From 610d8e1547fbed9d3e6319a027b9b7e38d6fa541 Mon Sep 17 00:00:00 2001
From: nathan <nathangray.bsc+github@gmail.com>
Date: Mon, 19 Jul 2021 11:57:06 -0600
Subject: [PATCH] Try out Lion as base for button. Much easier to customize,
 though not without its issues: - Lion give us some stuff to handle
 validation, forms & input that I haven't looked into - Slightly different
 mixin structure, I might be missing out on something - Properties in
 extending class cause TypeScript error, but still work

---
 api/js/etemplate/et2-button.ts           | 43 +++++++++++++++++-------
 api/js/etemplate/et2_core_inheritance.ts |  2 +-
 api/js/etemplate/et2_core_inputWidget.ts |  3 +-
 package.json                             |  2 ++
 4 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/api/js/etemplate/et2-button.ts b/api/js/etemplate/et2-button.ts
index 8ab8147f54..8a1cd81c5b 100644
--- a/api/js/etemplate/et2-button.ts
+++ b/api/js/etemplate/et2-button.ts
@@ -9,15 +9,34 @@
  */
 
 
-import BXButton from "../../../node_modules/carbon-web-components/es/components/button/button"
-import {css} from "../../../node_modules/lit-element/lit-element.js";
+import {css,html} from "../../../node_modules/@lion/core/index.js";
+import {LionButton} from "../../../node_modules/@lion/button/index.js";
 import {Et2InputWidget} from "./et2_core_inputWidget";
 import {Et2Widget} from "./et2_core_inheritance";
 
-export class Et2Button extends Et2InputWidget(Et2Widget(BXButton))
+export class Et2Button extends  Et2InputWidget(Et2Widget(LionButton))
 {
     protected _created_icon_node: HTMLImageElement;
     protected clicked: boolean = false;
+    private image: string;
+
+    static get styles() {
+        return [
+            ...super.styles,
+            css`
+            :host {
+                padding: 1px 8px;
+                /* These should probably come from somewhere else */
+                border-radius: 3px;
+                background-color: #e6e6e6;
+            }
+            /* Set size for icon */
+            ::slotted([slot="icon"]) {
+                width: 20px;
+                padding-right: 3px;
+            }`,
+        ];
+    }
 
     static get properties() {
         return {
@@ -25,15 +44,7 @@ export class Et2Button extends Et2InputWidget(Et2Widget(BXButton))
             onclick: {type: Function}
         }
     }
-    static get styles()
-    {
-        return [
-            super.styles,
-            css`
-            /* Custom CSS - Needs to work with the LitElement we're extending */
-            `
-        ];
-    }
+
     constructor()
     {
         super();
@@ -57,7 +68,7 @@ export class Et2Button extends Et2InputWidget(Et2Widget(BXButton))
     connectedCallback() {
         super.connectedCallback();
 
-        this.classList.add("et2_button")
+        //this.classList.add("et2_button")
 
         if(this.image)
         {
@@ -93,6 +104,12 @@ export class Et2Button extends Et2InputWidget(Et2Widget(BXButton))
         return true;
     }
 
+      render() {
+        return html` <div class="button-content et2_button" id="${this._buttonId}">
+            <slot name="icon"></slot>
+            <slot></slot>
+        </div> `;
+      }
     /**
      * Implementation of the et2_IInput interface
      */
diff --git a/api/js/etemplate/et2_core_inheritance.ts b/api/js/etemplate/et2_core_inheritance.ts
index 4d9951ff96..2c9621cf36 100644
--- a/api/js/etemplate/et2_core_inheritance.ts
+++ b/api/js/etemplate/et2_core_inheritance.ts
@@ -260,7 +260,7 @@ export class ClassWithAttributes extends ClassWithInterfaces
  */
 
 type Constructor<T = {}> = new (...args: any[]) => T;
-export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) => {
+export const Et2Widget = <T extends Constructor>(superClass: T) => {
 	class Et2WidgetClass extends superClass implements et2_IDOMNode {
 
 		/** et2_widget compatability **/
diff --git a/api/js/etemplate/et2_core_inputWidget.ts b/api/js/etemplate/et2_core_inputWidget.ts
index 3b9c2a8002..2da41e2c8a 100644
--- a/api/js/etemplate/et2_core_inputWidget.ts
+++ b/api/js/etemplate/et2_core_inputWidget.ts
@@ -22,7 +22,6 @@ import {et2_IInput, et2_IInputNode, et2_ISubmitListener} from "./et2_core_interf
 import {et2_compileLegacyJS} from "./et2_core_legacyJSFunctions";
 // fixing circular dependencies by only importing the type (not in compiled .js)
 import type {et2_tabbox} from "./et2_widget_tabs";
-import {LitElement} from "lit-element";
 
 export interface et2_input {
 	getInputNode() : HTMLInputElement|HTMLElement;
@@ -393,7 +392,7 @@ export class et2_inputWidget extends et2_valueWidget implements et2_IInput, et2_
  */
 
 type Constructor<T = {}> = new (...args: any[]) => T;
-export const Et2InputWidget = <T extends Constructor<LitElement>>(superClass: T) => {
+export const Et2InputWidget = <T extends Constructor>(superClass: T) => {
 	class Et2InputWidgetClass extends superClass implements et2_IInput, et2_IInputNode {
 
 		label: string = '';
diff --git a/package.json b/package.json
index 56ddc5b4d5..1f6faf2860 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,8 @@
     }
   },
   "dependencies": {
+    "@lion/button": "^0.14.1",
+    "@lion/core": "^0.18.1",
     "carbon-components": "^10.37.0",
     "carbon-web-components": "^1.14.1",
     "lit-element": "^2.5.1",