@dile/ui 2.1.17 → 2.1.18

package/components/checkbox/src/DileCheckbox.js

@@ -4,8 +4,8 @@ import { DileEmmitChange } from '../../../mixins/form/index.js';
 export class DileCheckbox extends DileEmmitChange(LitElement) {
   static get properties() {
     return {
-      checked: { type: Boolean },
-      disabled: { type: Boolean },
+      checked: { type: Boolean, reflect: true, },
+      disabled: { type: Boolean, reflect: true, },
       _hasInner: { type: Boolean },
       name: { type: String },
     };
@@ -94,15 +94,21 @@ export class DileCheckbox extends DileEmmitChange(LitElement) {
         <a href="#" @click="${this.linkClick}" @keypress="${this.doKeyPress}" class="checkbox ${this.checked ? "isChecked" : "isUnchecked"}">
           ${this.checked ? this.checkedIcon : this.unCheckedIcon}
         </a>
-        ${this._hasInner
-          ? html` <span class="label">
-              <slot></slot>
-            </span>`
-          : ""}
+        ${this.innerTemplate}
       </div>
     `;
   }
 
+  get innerTemplate() {
+    return html`
+      ${this._hasInner
+        ? html` <label class="label">
+            <slot></slot>
+          </label>`
+        : ""
+      }
+    `
+  }
   doClick() {
     if (this.disabled) {
       return;

package/components/switch/index.js

@@ -0,0 +1 @@
+export { DileSwitch } from "./src/DileSwitch";

package/components/switch/src/DileSwitch.js

@@ -0,0 +1,71 @@
+import { LitElement, html, css } from 'lit';
+import { DileCheckbox } from '../../checkbox/src/DileCheckbox';
+
+export class DileSwitch extends DileCheckbox {
+    static styles = [
+        css`
+            :host {
+                display: inline-block;
+            }
+            div {
+              display: flex;
+              align-items: center;
+            }
+            section {
+                width: 56px;
+                height: 20px;
+                border-radius: 10px;
+                background-color: var(--dile-switch-bar-color, #ccc);
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;  
+            }
+            span {
+                width: 24px;
+                height: 24px;
+                left: 0px;
+                position: relative;
+                border-radius: 50%;
+                background-color: var(--dile-switch-off-state-color, #d52121);
+                transition: all 0.2s linear;
+            }
+            :host([checked]) span {
+                left: 32px;
+                background-color: var(--dile-switch-on-state-color, #2566e8);
+            }
+            :host([disabled]) {
+              opacity: 0.5;
+            }
+            label {
+              margin-left: 0.5rem;
+            }
+        `
+    ];
+
+    render() {
+        return html`
+            <div @click=${this.toggle}>
+              <section>
+                  <span></span>
+              </section>
+              ${this.innerTemplate}
+            </div>
+        `;
+    }
+
+    toggle() {
+        if (this.disabled) {
+          return;
+        }
+        this.checked = !this.checked;
+        this.dispatchEvent(new CustomEvent('dile-switch-changed', { 
+            bubbles: true,
+            composed: true,
+            detail: {
+                checked: this.checked,
+                name: this.name,
+            }
+        }));
+    }
+
+}

package/components/switch/switch.js

@@ -0,0 +1,2 @@
+import { DileSwitch } from "./src/DileSwitch";
+customElements.define('dile-switch', DileSwitch);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "2.1.17",
+  "version": "2.1.18",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "scripts": {
@@ -26,5 +26,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "15a59318f4be16facc3e442c13709fc0c543b57b"
+  "gitHead": "590589b6c02e4ad4ca232a7959b19eccaea30295"
 }