@nordhealth/components 1.4.0 → 1.5.0

package/lib/Toggle.js

@@ -0,0 +1,2 @@
+import{_ as e,n}from"./query-assigned-elements-ef860822.js";import{r as i,$ as t,s as r}from"./lit-element-e382250e.js";import{e as o}from"./property-03f59dce.js";import{l as a}from"./if-defined-4d1db15c.js";import{n as s}from"./ref-adf41565.js";import{F as l}from"./FocusableMixin-4c85ced9.js";import{F as c}from"./FormAssociatedMixin-9d38814c.js";import{I as d}from"./InputMixin-84ca72ae.js";import{s as g}from"./Component-fa316972.js";import{s as p}from"./FormField-44e865a4.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-ea6eff46.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const h=i`:host{display:inline-block;font-size:var(--n-font-size-m);--n-toggle-inline-size:3.2143em;--n-toggle-block-size:calc(var(--n-toggle-inline-size) / 1.6);--n-toggle-thumb-margin:0.35em}.n-flex{display:flex}.n-expand{flex:1;display:flex;justify-content:center;align-items:flex-start;flex-direction:column;min-block-size:100%}.n-input-container{position:relative}.n-toggle{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;inline-size:var(--n-toggle-inline-size);block-size:var(--n-toggle-block-size);border-radius:var(--n-border-radius-pill);background:var(--n-toggle-background,var(--n-color-border-strong));cursor:pointer;transition:background var(--n-transition-slowly);font-size:var(--n-toggle-size,var(--n-font-size-m))}.n-toggle::before{content:"";display:block;aspect-ratio:1/1;block-size:calc(100% - 2 * var(--n-toggle-thumb-margin));background:var(--n-color-text-on-accent);border-radius:var(--n-border-radius-circle);transition:margin;transition-duration:inherit;margin-inline-start:var(--n-toggle-thumb-margin);box-shadow:var(--n-box-shadow)}input:checked{--n-toggle-background:var(--n-color-text-link)}input:checked::before{margin-inline-start:calc(var(--n-toggle-inline-size) - var(--n-toggle-block-size) + var(--n-toggle-thumb-margin))}input:checked[aria-invalid]{--n-toggle-background:var(--n-color-status-danger)}input:focus{outline:0;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)}:host([disabled]) label{color:var(--n-color-text-weaker);cursor:default}:host([disabled]) input{opacity:.3;cursor:not-allowed}.n-label-container{padding-block-end:0}label{-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-l);padding-inline-start:var(--n-space-s);cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:calc(var(--n-space-s)/ 2);padding-inline-start:var(--n-space-s)}:host([reverse]) .n-error,:host([reverse]) .n-hint,:host([reverse]) label{padding-inline-start:0;padding-inline-end:var(--n-space-s)}:host([size="s"]) .n-toggle{--n-toggle-size:var(--n-font-size-xs)}:host([size="l"]) .n-toggle{--n-toggle-size:var(--n-font-size-xl)}`;let u=class extends(function(e){class n extends e{connectedCallback(){super.connectedCallback(),n._warningLogged||(console.warn(`NORD: %c${this.localName}%c should not be used in production, as it is in draft status.`,"font-weight:bold","font-weight:normal"),n._warningLogged=!0)}}return n._warningLogged=!1,n}(c(d(l(r))))){constructor(){super(...arguments),this.checked=!1,this.reverse=!1,this.size="m"}get formValue(){return this.checked?this.value||"on":void 0}render(){const e=t`<div class="n-expand">${this.renderLabel()} ${this.renderError()}</div>`,n=t`<div class="n-input-container"><input ${s(this.focusableRef)} class="n-toggle" id="${this.inputId}" type="checkbox" role="switch" name="${a(this.name)}" .value="${this.value}" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" @change="${this.handleChange}"></div>`;return t`<div class="n-flex">${this.reverse?[e,n]:[n,e]}</div>`}handleChange(e){const n=e.target;this.checked=n.checked,super.handleChange(e)}};u.styles=[g,p,h],e([o({type:Boolean})],u.prototype,"checked",void 0),e([o({type:Boolean})],u.prototype,"reverse",void 0),e([o({reflect:!0})],u.prototype,"size",void 0),u=e([n("nord-toggle")],u);var v=u;export{v as default};
+//# sourceMappingURL=Toggle.js.map

package/lib/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","sources":["../src/toggle/Toggle.ts","../src/common/mixins/DraftComponentMixin.ts"],"sourcesContent":["/* eslint-disable lit-a11y/role-has-required-aria-attrs */\nimport { html, LitElement } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\n\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Toggle.css\"\n\n/**\n * Toggle switch gives control over a feature or option that can be\n * turned on or off. If a physical switch would work for the action, a\n * toggle is probably the best component to use.\n *\n * @status draft\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n */\n@customElement(\"nord-toggle\")\nexport default class Toggle extends DraftComponentMixin(FormAssociatedMixin(InputMixin(FocusableMixin(LitElement)))) {\n  static styles = [componentStyle, formFieldStyle, style]\n\n  protected override get formValue() {\n    return this.checked ? this.value || \"on\" : undefined\n  }\n\n  /**\n   * Controls whether the toggle is checked or not.\n   */\n  @property({ type: Boolean }) checked: boolean = false\n\n  /**\n   * Controls whether the contents are displayed in reverse order,\n   * putting the label before the toggle.\n   */\n  @property({ type: Boolean }) reverse: boolean = false\n\n  /**\n   * The size of the toggle switch.\n   */\n  @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" = \"m\"\n\n  render() {\n    const label = html`<div class=\"n-expand\">${this.renderLabel()} ${this.renderError()}</div>`\n    const input = html`<div class=\"n-input-container\">\n      <input\n        ${ref(this.focusableRef)}\n        class=\"n-toggle\"\n        id=${this.inputId}\n        type=\"checkbox\"\n        role=\"switch\"\n        name=${ifDefined(this.name)}\n        .value=${this.value}\n        .checked=${this.checked}\n        ?disabled=${this.disabled}\n        ?required=${this.required}\n        aria-describedby=${ifDefined(this.getDescribedBy())}\n        aria-invalid=${ifDefined(this.getInvalid())}\n        @change=${this.handleChange}\n      />\n    </div>`\n\n    return html`<div class=\"n-flex\">${this.reverse ? [label, input] : [input, label]}</div>`\n  }\n\n  protected handleChange(e: Event): void {\n    const target = e.target as HTMLInputElement\n    this.checked = target.checked\n    super.handleChange(e)\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-toggle\": Toggle\n  }\n}\n","import { LitElement } from \"lit\"\n\ntype Constructable<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport function DraftComponentMixin<T extends Constructable<LitElement>>(superClass: T) {\n  class DraftComponent extends superClass {\n    private static _warningLogged = false\n\n    connectedCallback() {\n      super.connectedCallback()\n\n      if (process.env.NODE_ENV !== \"development\" && !DraftComponent._warningLogged) {\n        // eslint-disable-next-line no-console\n        console.warn(\n          `NORD: %c${this.localName}%c should not be used in production, as it is in draft status.`,\n          \"font-weight:bold\",\n          \"font-weight:normal\"\n        )\n        DraftComponent._warningLogged = true\n      }\n    }\n  }\n\n  return DraftComponent as T\n}\n"],"names":["Toggle","superClass","DraftComponent","connectedCallback","super","_warningLogged","console","warn","this","localName","DraftComponentMixin","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","checked","reverse","size","formValue","value","undefined","render","label","html","renderLabel","renderError","input","ref","focusableRef","inputId","ifDefined","name","disabled","required","getDescribedBy","getInvalid","handleChange","e","target","styles","componentStyle","formFieldStyle","style","__decorate","property","type","Boolean","prototype","reflect","customElement"],"mappings":"0yFA2BA,IAAqBA,EAArB,cCvBM,SAAmEC,GACvE,MAAMC,UAAuBD,EAG3BE,oBACEC,MAAMD,oBAEyCD,EAAeG,iBAE5DC,QAAQC,KACN,WAAWC,KAAKC,0EAChB,mBACA,sBAEFP,EAAeG,gBAAiB,IAKtC,OAjBiBH,EAAcG,gBAAG,EAiB3BH,EDI2BQ,CAAoBC,EAAoBC,EAAWC,EAAeC,OAAtGC,kCAU+BP,KAAOQ,SAAY,EAMnBR,KAAOS,SAAY,EAKnBT,KAAIU,KAAoB,IAlB9BC,gBACrB,OAAOX,KAAKQ,QAAUR,KAAKY,OAAS,UAAOC,EAmB7CC,SACE,MAAMC,EAAQC,CAAI,yBAAyBhB,KAAKiB,iBAAiBjB,KAAKkB,sBAChEC,EAAQH,CAAI,yCAEZI,EAAIpB,KAAKqB,sCAENrB,KAAKsB,gDAGHC,EAAUvB,KAAKwB,kBACbxB,KAAKY,oBACHZ,KAAKQ,uBACJR,KAAKyB,wBACLzB,KAAK0B,+BACEH,EAAUvB,KAAK2B,oCACnBJ,EAAUvB,KAAK4B,2BACpB5B,KAAK6B,uBAInB,OAAOb,CAAI,uBAAuBhB,KAAKS,QAAU,CAACM,EAAOI,GAAS,CAACA,EAAOJ,WAGlEc,aAAaC,GACrB,MAAMC,EAASD,EAAEC,OACjB/B,KAAKQ,QAAUuB,EAAOvB,QACtBZ,MAAMiC,aAAaC,KAhDdtC,EAAMwC,OAAG,CAACC,EAAgBC,EAAgBC,GASpBC,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAmC/C,EAAAgD,UAAA,eAAA,GAMxBJ,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAmC/C,EAAAgD,UAAA,eAAA,GAKxBJ,EAAA,CAA5BC,EAAS,CAAEI,SAAS,KAAmCjD,EAAAgD,UAAA,YAAA,GArBrChD,EAAM4C,EAAA,CAD1BM,EAAc,gBACMlD,SAAAA"}