@tmorrow/cre8-wc 1.0.26 → 1.1.1

package/lib/components/checkbox-field-item/checkbox-field-item.js

@@ -1,184 +1,17 @@
-import { css as m, html as l, nothing as u } from "lit";
+import { css as f, html as a, nothing as b } from "lit";
 import { ifDefined as o } from "lit-html/directives/if-defined.js";
-import { property as c, query as p } from "lit/decorators.js";
-import { nanoid as a } from "nanoid";
-import { s as k } from "../../icon-DImqxDiW.js";
+import { property as r, query as u } from "lit/decorators.js";
+import { nanoid as d } from "nanoid";
+import { s as x } from "../../icon-D22g8aWB.js";
 import "../field-note/field-note.js";
-import { Cre8FormElement as x } from "../cre8-form-element.js";
-const y = m`
-@import '../../design-tokens/core/scss/theming/component.scss';
-@import '../../design-tokens/core/scss/theming/visibility.scss';
-
-/*------------------------------------*\
- #CHECKBOX-FIELD-ITEM
-\*------------------------------------*/
-
-:host {
-  display: inline-flex;
-  flex-wrap: wrap;
-}
-
-/** 
- * 1) Form field that is composed of a checkbox input, label, and an optional field note.
- */
-.cre8-c-checkbox-field-item {
-  display: flex;
-  position: relative;
-  align-items: center;
-  margin-bottom: calc(8px * 1);
-  min-height: calc(8px * 3);
-
-  /** 
-  * Checkbox field item within last cre8-checkbox-field-item wrapper in a fieldset
-  * 1) Remove margin bottom on last item
-  */
-  :host(:last-child) & {
-    margin-bottom: 0; /* 1 */
-  }
-}
-
-/** 
- * Checkbox field item input 
- */
-.cre8-c-checkbox-field-item__input {
-  opacity: 0;
-  cursor: pointer;
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: calc(8px * 3);
-  min-width: calc(8px * 3);
-  margin: 0;
-  z-index: 1;
-
-  /** 
- * Checkbox field item input error
- */
-  .cre8-c-checkbox-field-item--disabled & {
-    cursor: not-allowed;
-  }
-}
-
-/** 
- * Checkbox field item custom checkbox container
- */
-.cre8-c-checkbox-field-item__custom-checkbox {
-  display: flex;
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: calc(8px * 3);
-  width: calc(8px * 3);
-  cursor: pointer;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--cre8-border-radius-small);
-  border-width: var(--cre8-border-width-default);
-  border-style: var(--cre8-border-style-default);
-  background-color: var(--cre8-color-bg-default);
-  border-color: var(--cre8-color-border-strong);
-
-  /** 
-  * Checkbox field item custom checkbox focus visible  custom outline
-  */
-  .cre8-c-checkbox-field-item__input:focus-visible + & {
-    @include focus;
-
-    .cre8-c-checkbox-field-item--error & {
-      @include focusError;
-    }
-  }
-
-  /** 
-  * Checkbox field item custom checkbox within checkbox field with error
-  */
-  .cre8-c-checkbox-field-item--error & {
-    background-color: var(--cre8-color-bg-default);
-    border-color: var(--cre8-color-border-error);
-  }
-
-  /** 
-  * Checkbox field item custom checkbox within checkbox field with disabled
-  */
-  .cre8-c-checkbox-field-item--disabled & {
-    cursor: not-allowed;
-    background-color: var(--cre8-color-bg-disabled);
-    border-color: var(--cre8-color-border-disabled);
-  }
-}
-
-/**
-  * Checkbox field item custom checkbox when item is checked
-  */
-.cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox {
-  background-color: var(--cre8-color-bg-brand-strong);
-
-  /** 
-  * Checkbox field item custom checkbox when item is checked with error
-  */
-  .cre8-c-checkbox-field-item--error & {
-    background-color: var(--cre8-color-bg-default);
-  }
-
-  /** 
-  * Checkbox field item custom checkbox when item is checked with disabled
-  */
-  .cre8-c-checkbox-field-item--disabled & {
-    background-color: var(--cre8-color-bg-disabled);
-  }
-}
-
-/** 
- * Checkbox field item checkmark icon
- */
-.cre8-c-checkbox-field-item__icon {
-  display: none;
-  color: var(--cre8-color-content-knockout);
-
-  /** 
-  * Checkbox field item icon within checkbox field with error
-  */
-  .cre8-c-checkbox-field-item--error & {
-    color: var(--cre8-color-content-error);
-  }
-
-  /** 
-  * Checkbox field item icon within checkbox field disabled
-  */
-  .cre8-c-checkbox-field-item--disabled & {
-    color: var(--cre8-color-content-disabled);
-  }
-
-  /**
-  * Checkbox field item icon will display in the box if the input is checked
-  */
-  .cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox & {
-    display: flex;
-  }
-}
-
-/** 
- * Checkbox field item input 
- */
-.cre8-c-checkbox-field-item__label {
-  margin-left: calc(8px * 4);
-  @include cre8-typography-label-small;
-}
-
-/** 
- * Checkbox field item field notes
- */
-.cre8-c-checkbox-field-item__field-note,
-.cre8-c-checkbox-field-item__field-note-success,
-.cre8-c-checkbox-field-item__field-note-error {
-  flex-basis: 100%;
-}`;
-var v = Object.defineProperty, i = (n, t, s, b) => {
-  for (var r = void 0, d = n.length - 1, f; d >= 0; d--)
-    (f = n[d]) && (r = f(t, s, r) || r);
-  return r && v(t, s, r), r;
+import { Cre8FormElement as k } from "../cre8-form-element.js";
+const y = f`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.cre8-u-is-hidden{display:none !important;visibility:hidden !important}.cre8-u-is-vishidden{position:absolute !important;overflow:hidden;width:1px;height:1px;padding:0;border:0;clip:rect(1px, 1px, 1px, 1px)}@media all and (min-width: 23.4375rem){.cre8-u-hide-sm{display:none !important}}@media all and (min-width: 35rem){.cre8-u-hide-sm-2{display:none !important}}@media all and (min-width: 48rem){.cre8-u-hide-md{display:none !important}}@media all and (min-width: 60rem){.cre8-u-hide-lg{display:none !important}}@media all and (min-width: 75rem){.cre8-u-hide-xl{display:none !important}}@media all and (max-width: 23.4375rem){.cre8-u-show-sm{display:none !important}}@media all and (max-width: 35rem){.cre8-u-show-sm-2{display:none !important}}@media all and (max-width: 48rem){.cre8-u-show-md{display:none !important}}@media all and (max-width: 60rem){.cre8-u-show-lg{display:none !important}}@media all and (max-width: 75rem){.cre8-u-show-xl{display:none !important}}:host{display:inline-flex;flex-wrap:wrap}.cre8-c-checkbox-field-item{display:flex;position:relative;align-items:center;margin-bottom:0.5rem;min-height:1.5rem}:host(:last-child) .cre8-c-checkbox-field-item{margin-bottom:0}.cre8-c-checkbox-field-item__input{opacity:0;cursor:pointer;position:absolute;top:0;left:0;height:1.5rem;min-width:1.5rem;margin:0;z-index:1}.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__input{cursor:not-allowed}.cre8-c-checkbox-field-item__custom-checkbox{display:flex;position:absolute;top:0;left:0;height:1.5rem;width:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--cre8-border-radius-small);border-width:var(--cre8-border-width-default);border-style:var(--cre8-border-style-default);background-color:var(--cre8-color-bg-default);border-color:var(--cre8-color-border-strong)}.cre8-c-checkbox-field-item__input:focus-visible+.cre8-c-checkbox-field-item__custom-checkbox{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-checkbox-field-item--error .cre8-c-checkbox-field-item__input:focus-visible+.cre8-c-checkbox-field-item__custom-checkbox{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-error);outline-offset:0.125rem}.cre8-c-checkbox-field-item--error .cre8-c-checkbox-field-item__custom-checkbox{background-color:var(--cre8-color-bg-default);border-color:var(--cre8-color-border-error)}.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__custom-checkbox{cursor:not-allowed;background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled)}.cre8-c-checkbox-field-item__input:checked+.cre8-c-checkbox-field-item__custom-checkbox{background-color:var(--cre8-color-bg-brand-strong)}.cre8-c-checkbox-field-item--error .cre8-c-checkbox-field-item__input:checked+.cre8-c-checkbox-field-item__custom-checkbox{background-color:var(--cre8-color-bg-default)}.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__input:checked+.cre8-c-checkbox-field-item__custom-checkbox{background-color:var(--cre8-color-bg-disabled)}.cre8-c-checkbox-field-item__icon{display:none;color:var(--cre8-color-content-knockout)}.cre8-c-checkbox-field-item--error .cre8-c-checkbox-field-item__icon{color:var(--cre8-color-content-error)}.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__icon{color:var(--cre8-color-content-disabled)}.cre8-c-checkbox-field-item__input:checked+.cre8-c-checkbox-field-item__custom-checkbox .cre8-c-checkbox-field-item__icon{display:flex}.cre8-c-checkbox-field-item__label{margin-left:2rem;font-family:var(--cre8-typography-label-small-font-family);font-size:var(--cre8-typography-label-small-font-size);font-weight:var(--cre8-typography-label-small-font-weight);line-height:var(--cre8-typography-label-small-line-height);text-decoration:var(--cre8-typography-label-small-text-decoration);text-transform:var(--cre8-typography-label-small-text-transform)}.cre8-c-checkbox-field-item__field-note,.cre8-c-checkbox-field-item__field-note-success,.cre8-c-checkbox-field-item__field-note-error{flex-basis:100%}`;
+var g = Object.defineProperty, i = (h, t, s, m) => {
+  for (var c = void 0, l = h.length - 1, p; l >= 0; l--)
+    (p = h[l]) && (c = p(t, s, c) || c);
+  return c && g(t, s, c), c;
 };
-const h = class h extends x {
+const n = class n extends k {
   constructor() {
     super(...arguments), this.type = "checkbox", this.errorText = "Error", this.successText = "Success";
   }
@@ -222,7 +55,7 @@ const h = class h extends x {
   _handleOnChange(t) {
     const s = t.target;
     this.value = s.value, this._internals.setFormValue(this.value);
-    const b = new CustomEvent("change", {
+    const m = new CustomEvent("change", {
       detail: {
         name: this.name,
         value: this.value
@@ -230,7 +63,7 @@ const h = class h extends x {
       bubbles: !0,
       composed: !0
     });
-    this.dispatchEvent(b);
+    this.dispatchEvent(m);
   }
   /**
    * Form reset callback
@@ -253,7 +86,7 @@ const h = class h extends x {
    * Initialize aria attributes
    */
   initializeAria() {
-    this.fieldId = this.fieldId || a(), (this.fieldNote || this.slotNotEmpty("fieldNote")) && (this.ariaDescribedBy = this.ariaDescribedBy || a()), (this.successNote || this.errorNote) && (this.validationAriaDescribedBy = this.validationAriaDescribedBy || a());
+    this.fieldId = this.fieldId || d(), (this.fieldNote || this.slotNotEmpty("fieldNote")) && (this.ariaDescribedBy = this.ariaDescribedBy || d()), (this.successNote || this.errorNote) && (this.validationAriaDescribedBy = this.validationAriaDescribedBy || d());
   }
   /**
    * Aria describedby string based on field notes and error/success notes
@@ -272,14 +105,14 @@ const h = class h extends x {
    * 2. If there is a errorNote, then return the field note with the error message and state.
    */
   renderSuccessErrorFieldNote() {
-    return this.successNote ? l`<cre8-field-note
+    return this.successNote ? a`<cre8-field-note
         ?isSuccess=${this.isSuccess}
         id=${this.validationAriaDescribedBy}
         class="cre8-c-checkbox-field-item__field-note-success"
         iconName="success"
       >
         <span class="cre8-u-is-vishidden">${this.successText}</span> ${this.successNote}
-      </cre8-field-note>` : this.errorNote ? l` <cre8-field-note
+      </cre8-field-note>` : this.errorNote ? a` <cre8-field-note
         ?isError=${this.isError}
         id=${this.validationAriaDescribedBy}
         class="cre8-c-checkbox-field-item__field-note-error"
@@ -294,7 +127,7 @@ const h = class h extends x {
       "cre8-c-checkbox-field-item--success": this.isSuccess,
       "cre8-c-checkbox-field-item--disabled": this.disabled
     });
-    return l`
+    return a`
       <div role=${o(this.getRole())} class="${t}">
         <input class="cre8-c-checkbox-field-item__input"
           type="checkbox"
@@ -310,67 +143,67 @@ const h = class h extends x {
           @change=${this._handleOnChange}
         />
         <span class="cre8-c-checkbox-field-item__custom-checkbox">
-          <cre8-icon svg='${k}' class="cre8-c-checkbox-field-item__icon" aria-label="checkbox"
+          <cre8-icon svg='${x}' class="cre8-c-checkbox-field-item__icon" aria-label="checkbox"
           aria-hidden="${!this.checked}"></cre8-icon>
         </span>
         <label class="cre8-c-checkbox-field-item__label" for=${this.fieldId}>${this.label}</label>
       </div>
-      ${this.fieldNote || this.slotNotEmpty("fieldNote") ? l`<cre8-field-note id=${this.ariaDescribedBy} class="cre8-c-checkbox-field-item__field-note"
+      ${this.fieldNote || this.slotNotEmpty("fieldNote") ? a`<cre8-field-note id=${this.ariaDescribedBy} class="cre8-c-checkbox-field-item__field-note"
               ><slot name="fieldNote">${this.fieldNote}</slot></cre8-field-note
-            >` : u}
+            >` : b}
         ${this.renderSuccessErrorFieldNote()}
     `;
   }
 };
-h.styles = [y];
-let e = h;
+n.styles = [y];
+let e = n;
 i([
-  c({ type: String })
+  r({ type: String })
 ], e.prototype, "label");
 i([
-  c({ type: Boolean, reflect: !0 })
+  r({ type: Boolean, reflect: !0 })
 ], e.prototype, "isError");
 i([
-  c()
+  r()
 ], e.prototype, "errorText");
 i([
-  c()
+  r()
 ], e.prototype, "errorNote");
 i([
-  c({ type: Boolean, reflect: !0 })
+  r({ type: Boolean, reflect: !0 })
 ], e.prototype, "isSuccess");
 i([
-  c()
+  r()
 ], e.prototype, "successText");
 i([
-  c()
+  r()
 ], e.prototype, "successNote");
 i([
-  c({ type: Boolean, reflect: !0 })
+  r({ type: Boolean, reflect: !0 })
 ], e.prototype, "disabled");
 i([
-  c({ type: Boolean, reflect: !0 })
+  r({ type: Boolean, reflect: !0 })
 ], e.prototype, "checked");
 i([
-  c()
+  r()
 ], e.prototype, "fieldId");
 i([
-  c()
+  r()
 ], e.prototype, "fieldNote");
 i([
-  c()
+  r()
 ], e.prototype, "ariaDescribedBy");
 i([
-  c()
+  r()
 ], e.prototype, "validationAriaDescribedBy");
 i([
-  c({ type: Boolean, reflect: !0 })
+  r({ type: Boolean, reflect: !0 })
 ], e.prototype, "required");
 i([
-  c()
+  r()
 ], e.prototype, "fieldNoteIconName");
 i([
-  p("input")
+  u("input")
 ], e.prototype, "field");
 customElements.get("cre8-checkbox-field-item") === void 0 && customElements.define("cre8-checkbox-field-item", e);
 export {

package/lib/components/checkbox-field-item/checkbox-field-item.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-field-item.styles.d.ts","sourceRoot":"","sources":["../../../components/checkbox-field-item/checkbox-field-item.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAuKV,CAAC;AACH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"checkbox-field-item.styles.d.ts","sourceRoot":"","sources":["../../../components/checkbox-field-item/checkbox-field-item.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAmyL,CAAC;AAChzL,eAAe,MAAM,CAAC"}