@nordhealth/components 1.10.0 → 1.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +2076 -2057
- package/lib/Checkbox.js +1 -1
- package/lib/Checkbox.js.map +1 -1
- package/lib/bundle.js +5 -5
- package/lib/bundle.js.map +1 -1
- package/lib/src/checkbox/Checkbox.d.ts +4 -0
- package/package.json +2 -2
package/lib/Checkbox.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,n
|
|
1
|
+
import{_ as e,n}from"./query-assigned-elements-ef860822.js";import{r,$ as o,s as i}from"./lit-element-67e6cd99.js";import{e as t}from"./property-03f59dce.js";import{l as a}from"./if-defined-fe1a64e3.js";import{n as c}from"./ref-57ff8ffc.js";import s from"./Icon.js";import{F as l}from"./FocusableMixin-175ea4d7.js";import{F as d}from"./FormAssociatedMixin-d0d98a92.js";import{I as p}from"./InputMixin-9334d385.js";import{s as h}from"./Component-a61df53a.js";import{s as m}from"./FormField-d3767c2e.js";import"./directive-de55b00a.js";import"./state-70f38ceb.js";import"./unsafe-html-61a04601.js";import"./observe-a9c6dfb6.js";import"./cond-97c45476.js";import"./EventController-d99ebeef.js";import"./SlotController-ea6eff46.js";import"./events-731d0007.js";import"./VisuallyHidden.js";var v=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M41.86 131.25a23.982 23.982 0 0 1-18.494-8.666L2.254 95.746a10.5 10.5 0 1 1 16.492-12.992l21 26.6a2.24 2.24 0 0 0 2.212.882 3.038 3.038 0 0 0 2.38-1.148l76.958-96.39a10.5 10.5 0 1 1 16.408 13.104L60.606 122.29A24.038 24.038 0 0 1 42 131.25z"/></svg>',title:"interface-checked-small",tags:"nordicon interface checked small symbol checkmark done ready"});var b=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M129.5 80.5h-119a10.5 10.5 0 0 1 0-21h119a10.5 10.5 0 0 1 0 21z"/></svg>',title:"interface-remove-small",tags:"nordicon interface remove small delete erase minimize line"});const u=r`:host{display:inline-block}.n-flex{display:flex}.n-expand{flex:1}.n-input-container{position:relative}input{--n-checkbox-size:calc(var(--n-space-m) * 1.25);--n-checkbox-accent-color:var(--n-color-accent);-moz-appearance:none;-webkit-appearance:none;appearance:none;border:1px solid var(--n-checkbox-border-color,var(--n-color-border-hover));border-radius:var(--n-border-radius-s);display:block;inline-size:var(--n-checkbox-size);block-size:var(--n-checkbox-size);cursor:pointer}input:checked,input:indeterminate{--n-checkbox-border-color:var(--n-color-accent);background:var(--n-checkbox-accent-color)}input[aria-invalid]{--n-checkbox-accent-color:var(--n-color-status-danger);--n-checkbox-border-color:var(--n-checkbox-accent-color)}input:focus-visible{outline:0!important}input:focus{outline:0!important;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)}input:active{opacity:.8}:host([disabled]) label{color:var(--n-color-text-weaker);cursor:default}:host([disabled]) input{--n-checkbox-accent-color:var(--n-color-border-strong);--n-checkbox-border-color:var(--n-checkbox-accent-color);background:var(--n-checkbox-accent-color);cursor:default;opacity:1}nord-icon{display:none;position:absolute;color:var(--n-color-text-on-accent);inset:calc(var(--n-space-s)/ 2);z-index:var(--n-index-default);pointer-events:none}input:checked~.icon-checked,input:indeterminate~.icon-indeterminate{display:block}.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)}`;s.registerIcon(v),s.registerIcon(b);let f=class extends(d(p(l(i)))){constructor(){super(...arguments),this.indeterminate=!1,this.checked=!1}get formValue(){return this.checked?this.value||"on":void 0}render(){return o`<div class="n-flex"><div class="n-input-container"><input ${c(this.focusableRef)} class="n-input" id="${this.inputId}" type="checkbox" name="${a(this.name)}" .value="${this.value}" .checked="${this.checked}" .indeterminate="${this.indeterminate}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" @change="${this.handleChange}"><nord-icon class="icon-checked" name="interface-checked-small" size="s"></nord-icon><nord-icon class="icon-indeterminate" name="interface-remove-small" size="s"></nord-icon></div><div class="n-expand">${this.renderLabel()} ${this.renderError()}</div></div>`}handleChange(e){const n=e.target;this.checked=n.checked,super.handleChange(e)}};f.styles=[h,m,u],e([t({type:Boolean})],f.prototype,"indeterminate",void 0),e([t({type:Boolean})],f.prototype,"checked",void 0),f=e([n("nord-checkbox")],f);var k=f;export{k as default};
|
|
2
2
|
//# sourceMappingURL=Checkbox.js.map
|
package/lib/Checkbox.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sources":["../../icons/lib/assets/interface-checked-small.js","../src/checkbox/Checkbox.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M41.86 131.25a23.982 23.982 0 0 1-18.494-8.666L2.254 95.746a10.5 10.5 0 1 1 16.492-12.992l21 26.6a2.24 2.24 0 0 0 2.212.882 3.038 3.038 0 0 0 2.38-1.148l76.958-96.39a10.5 10.5 0 1 1 16.408 13.104L60.606 122.29A24.038 24.038 0 0 1 42 131.25z\"/></svg>'\nexport const title = \"interface-checked-small\"\nexport const tags = \"nordicon interface checked small symbol checkmark done ready\"\n","import { 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\"\nimport * as checkedIcon from \"@nordhealth/icons/lib/assets/interface-checked-small.js\"\n\nimport Icon from \"../icon/Icon.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 \"./Checkbox.css\"\n\nIcon.registerIcon(checkedIcon)\n\n/**\n * Checkboxes allow user to choose one or more options from a limited set of options.\n * If you have more than 10 options, please use Select component instead.\n *\n * @status ready\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-checkbox\")\nexport default class Checkbox extends 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 checkbox is checked or not.\n */\n @property({ type: Boolean }) checked: boolean = false\n\n render() {\n return html`\n <div class=\"n-flex\">\n <div class=\"n-input-container\">\n <input\n ${ref(this.focusableRef)}\n class=\"n-input\"\n id=${this.inputId}\n type=\"checkbox\"\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 <nord-icon name=\"interface-checked-small\" size=\"s\"></nord-icon>\n </div>\n <div class=\"n-expand\">${this.renderLabel()} ${this.renderError()}</div>\n </div>\n `\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-checkbox\": Checkbox\n }\n}\n"],"names":["Icon","registerIcon","checkedIcon","Checkbox","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","checked","formValue","value","undefined","render","html","ref","focusableRef","inputId","ifDefined","name","disabled","required","getDescribedBy","getInvalid","handleChange","renderLabel","renderError","e","target","super","styles","componentStyle","formFieldStyle","style","__decorate","property","type","Boolean","prototype","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sources":["../../icons/lib/assets/interface-checked-small.js","../../icons/lib/assets/interface-remove-small.js","../src/checkbox/Checkbox.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M41.86 131.25a23.982 23.982 0 0 1-18.494-8.666L2.254 95.746a10.5 10.5 0 1 1 16.492-12.992l21 26.6a2.24 2.24 0 0 0 2.212.882 3.038 3.038 0 0 0 2.38-1.148l76.958-96.39a10.5 10.5 0 1 1 16.408 13.104L60.606 122.29A24.038 24.038 0 0 1 42 131.25z\"/></svg>'\nexport const title = \"interface-checked-small\"\nexport const tags = \"nordicon interface checked small symbol checkmark done ready\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M129.5 80.5h-119a10.5 10.5 0 0 1 0-21h119a10.5 10.5 0 0 1 0 21z\"/></svg>'\nexport const title = \"interface-remove-small\"\nexport const tags = \"nordicon interface remove small delete erase minimize line\"\n","import { 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\"\nimport * as checkedIcon from \"@nordhealth/icons/lib/assets/interface-checked-small.js\"\nimport * as indeterminateIcon from \"@nordhealth/icons/lib/assets/interface-remove-small.js\"\n\nimport Icon from \"../icon/Icon.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 \"./Checkbox.css\"\n\nIcon.registerIcon(checkedIcon)\nIcon.registerIcon(indeterminateIcon)\n\n/**\n * Checkboxes allow user to choose one or more options from a limited set of options.\n * If you have more than 10 options, please use Select component instead.\n *\n * @status ready\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-checkbox\")\nexport default class Checkbox extends 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 checkbox is in an indeterminate state.\n */\n @property({ type: Boolean }) indeterminate = false\n\n /**\n * Controls whether the checkbox is checked or not.\n */\n @property({ type: Boolean }) checked: boolean = false\n\n render() {\n return html`\n <div class=\"n-flex\">\n <div class=\"n-input-container\">\n <input\n ${ref(this.focusableRef)}\n class=\"n-input\"\n id=${this.inputId}\n type=\"checkbox\"\n name=${ifDefined(this.name)}\n .value=${this.value}\n .checked=${this.checked}\n .indeterminate=${this.indeterminate}\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 <nord-icon class=\"icon-checked\" name=\"interface-checked-small\" size=\"s\"></nord-icon>\n <nord-icon class=\"icon-indeterminate\" name=\"interface-remove-small\" size=\"s\"></nord-icon>\n </div>\n <div class=\"n-expand\">${this.renderLabel()} ${this.renderError()}</div>\n </div>\n `\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-checkbox\": Checkbox\n }\n}\n"],"names":["Icon","registerIcon","checkedIcon","indeterminateIcon","Checkbox","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","indeterminate","checked","formValue","value","undefined","render","html","ref","focusableRef","inputId","ifDefined","name","disabled","required","getDescribedBy","getInvalid","handleChange","renderLabel","renderError","e","target","super","styles","componentStyle","formFieldStyle","style","__decorate","property","type","Boolean","prototype","customElement"],"mappings":"6zBAAe,6VACM,+BACD,6GCFL,4KACM,8BACD,8zDCcpBA,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAalB,IAAqBC,EAArB,cAAsCC,EAAoBC,EAAWC,EAAeC,MAApFC,kCAU+BC,KAAaC,eAAG,EAKhBD,KAAOE,SAAY,EAZzBC,gBACrB,OAAOH,KAAKE,QAAUF,KAAKI,OAAS,UAAOC,EAa7CC,SACE,OAAOC,CAAI,6DAIDC,EAAIR,KAAKS,qCAENT,KAAKU,kCAEHC,EAAUX,KAAKY,kBACbZ,KAAKI,oBACHJ,KAAKE,4BACCF,KAAKC,6BACVD,KAAKa,wBACLb,KAAKc,+BACEH,EAAUX,KAAKe,oCACnBJ,EAAUX,KAAKgB,2BACpBhB,KAAKiB,0NAKKjB,KAAKkB,iBAAiBlB,KAAKmB,4BAK/CF,aAAaG,GACrB,MAAMC,EAASD,EAAEC,OACjBrB,KAAKE,QAAUmB,EAAOnB,QACtBoB,MAAML,aAAaG,KA9Cd1B,EAAM6B,OAAG,CAACC,EAAgBC,EAAgBC,GASpBC,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAgCpC,EAAAqC,UAAA,qBAAA,GAKrBJ,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAmCpC,EAAAqC,UAAA,eAAA,GAflCrC,EAAQiC,EAAA,CAD5BK,EAAc,kBACMtC,SAAAA"}
|