@ptcwebops/ptcw-design 1.3.4 → 1.3.6

package/dist/cjs/ptc-checkbox.cjs.entry.js

@@ -6,56 +6,56 @@ const index = require('./index-88135a6b.js');
 
 const ptcCheckboxCss = ":host{display:block}:host .ptc-checkbox{display:block;position:relative;user-select:none;cursor:pointer;font-family:var(--ptc-font-latin);font-style:normal;color:var(--color-gray-12);padding-left:var(--spacing-lg);font-weight:var(--ptc-font-weight-regular);font-size:var(--ptc-font-size-x-small);line-height:1.375rem}:host .ptc-checkbox input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}:host .ptc-checkbox .check{position:absolute;top:0;left:0;height:1.375rem;width:1.375rem;background-color:var(--color-white);border:1px solid var(--color-gray-07);line-height:var(--ptc-line-height-densest);box-sizing:border-box;border-radius:4px}:host .ptc-checkbox .check .mark{position:absolute;transition:opacity ease-out 250ms;opacity:0;left:3px;top:2px;width:1.375rem;height:1.375rem}:host .ptc-checkbox input:checked~.check{background-color:var(--color-gray-12)}:host .ptc-checkbox input:checked~.check .mark{opacity:1}:host .ptc-checkbox:hover input~.check{background-color:var(--color-gray-02)}:host .ptc-checkbox:hover input:checked~.check{background-color:var(--color-gray-12)}:host .ptc-checkbox.disabled{cursor:not-allowed;color:var(--color-gray-04)}:host .ptc-checkbox.disabled .mark{opacity:0}:host .ptc-checkbox.disabled .check{background-color:var(--color-white);border:1px dashed var(--color-gray-04)}:host .ptc-checkbox.disabled:hover input~.check{background-color:var(--color-white)}:host .ptc-checkbox.disabled:hover input:checked~.check{background-color:var(--color-white)}";
 
-const PtcCheckbox = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.checkedChanged = index.createEvent(this, "checkedChanged", 7);
-    this.handleClick = (e) => {
-      if (this.disabled) {
-        e.preventDefault();
-      }
-    };
-    this.handleChange = (e) => {
-      if (this.disabled) {
-        e.preventDefault();
-      }
-      else {
-        let input = this.host.shadowRoot.querySelector('input');
-        if (this.checked == 'unchecked') {
-          this.checked = 'checked';
-        }
-        else {
-          this.checked = 'unchecked';
-        }
-        let parameter = {
-          event: e,
-          sender: input,
-          value: this.value,
-          checked: this.checked
-        };
-        this.checkedChanged.emit(parameter);
-      }
-    };
-    this.checked = 'unchecked';
-    this.value = undefined;
-    this.disabled = undefined;
-    this.inputName = undefined;
-  }
-  componentDidLoad() {
-    let input = this.host.shadowRoot.querySelector('input');
-    input.checked = this.checked == 'checked';
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("label", { class: this.getCssClassMap() }, index.h("slot", null), index.h("input", { type: "checkbox", onClick: (e) => this.handleClick(e), checked: this.checked == "checked", name: this.inputName, value: this.value, onChange: (e) => this.handleChange(e) }), index.h("span", { class: "check" }, index.h("span", { class: "mark" }, index.h("icon-asset", { type: "ptc", color: "white", size: "xx-small", name: "checkmark" }))))));
-  }
-  getCssClassMap() {
-    return {
-      ['ptc-checkbox']: true,
-      ['disabled']: this.disabled
-    };
-  }
-  get host() { return index.getElement(this); }
-};
+const PtcCheckbox = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.checkedChanged = index.createEvent(this, "checkedChanged", 7);
+    this.handleClick = (e) => {
+      if (this.disabled) {
+        e.preventDefault();
+      }
+    };
+    this.handleChange = (e) => {
+      if (this.disabled) {
+        e.preventDefault();
+      }
+      else {
+        let input = this.host.shadowRoot.querySelector('input');
+        if (this.checked == 'unchecked') {
+          this.checked = 'checked';
+        }
+        else {
+          this.checked = 'unchecked';
+        }
+        let parameter = {
+          event: e,
+          sender: input,
+          value: this.value,
+          checked: this.checked
+        };
+        this.checkedChanged.emit(parameter);
+      }
+    };
+    this.checked = 'unchecked';
+    this.value = undefined;
+    this.disabled = undefined;
+    this.inputName = undefined;
+  }
+  componentDidLoad() {
+    let input = this.host.shadowRoot.querySelector('input');
+    input.checked = this.checked == 'checked';
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("label", { class: this.getCssClassMap() }, index.h("slot", null), index.h("input", { type: "checkbox", onClick: (e) => this.handleClick(e), checked: this.checked == "checked", name: this.inputName, value: this.value, onChange: (e) => this.handleChange(e) }), index.h("span", { class: "check" }, index.h("span", { class: "mark" }, index.h("icon-asset", { type: "ptc", color: "white", size: "xx-small", name: "checkmark" }))))));
+  }
+  getCssClassMap() {
+    return {
+      ['ptc-checkbox']: true,
+      ['disabled']: this.disabled
+    };
+  }
+  get host() { return index.getElement(this); }
+};
 PtcCheckbox.style = ptcCheckboxCss;
 
 exports.ptc_checkbox = PtcCheckbox;