@nordhealth/components 4.3.1 → 4.5.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.
Files changed (25) hide show
  1. package/custom-elements.json +5482 -5401
  2. package/lib/Button.js +1 -1
  3. package/lib/Button.js.map +1 -1
  4. package/lib/IconManager.js +1 -1
  5. package/lib/Layout.js +1 -1
  6. package/lib/Layout.js.map +1 -1
  7. package/lib/LocalizeController.js +1 -1
  8. package/lib/LocalizeController.js.map +1 -1
  9. package/lib/Modal.js +1 -1
  10. package/lib/Modal.js.map +1 -1
  11. package/lib/Select.js +1 -1
  12. package/lib/Select.js.map +1 -1
  13. package/lib/TabGroup.js +1 -1
  14. package/lib/TabGroup.js.map +1 -1
  15. package/lib/bundle.js +15 -16
  16. package/lib/bundle.js.map +1 -1
  17. package/lib/index.js +1 -1
  18. package/lib/src/button/Button.d.ts +5 -0
  19. package/lib/src/localization/LocalizeController.d.ts +3 -1
  20. package/lib/src/localization/translation.d.ts +9 -3
  21. package/lib/src/select/Select.d.ts +5 -0
  22. package/lib/src/tab-group/TabGroup.d.ts +3 -1
  23. package/lib/translation.js +1 -1
  24. package/lib/translation.js.map +1 -1
  25. package/package.json +3 -3
package/lib/Button.js CHANGED
@@ -1,2 +1,2 @@
1
- import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as o,html as n,nothing as r,LitElement as e}from"lit";import{property as a,customElement as i}from"lit/decorators.js";import{createRef as s,ref as l}from"lit/directives/ref.js";import{E as b}from"./EventController-BBOmvfLa.js";import{L as d}from"./LightDomController-DIwtVelV.js";import{c}from"./cond-CI1KbneT.js";import"./Spinner.js";import{F as u}from"./FocusableMixin-BlQLNPdJ.js";import{I as v}from"./InputMixin-LetXsCyv.js";import{s as h}from"./Component-DSU3Qp0O.js";import{S as p}from"./SlotController-Z6eG7LSZ.js";import"lit/directives/if-defined.js";const g=o`:host{--_n-button-border-radius:var(--n-button-border-radius, var(--n-border-radius-s));--_n-button-gap:var(--n-button-gap, var(--n-space-s));--_n-button-gradient:var(--n-button-gradient, linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%));--_n-button-background-color:var(--n-button-background-color, var(--n-color-button));--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-strong));--_n-button-text-align:var(--n-button-text-align, center);--_n-button-box-shadow:var(--n-button-box-shadow, var(--n-box-shadow));--_n-button-color:var(--n-button-color, var(--n-color-text));--_n-button-padding-inline:var(--n-button-padding-inline, calc(var(--n-space-m) / 1.2));--_n-button-font-size:var(--n-button-font-size, var(--n-font-size-m));--_n-button-font-weight:var(--n-button-font-weight, var(--n-font-weight));--_n-button-min-block-size:var(--n-button-min-block-size, var(--n-space-xl));--_n-button-toggle-icon-color:var(--n-button-toggle-icon-color, var(--n-color-icon));--_n-button-overflow:var(--n-button-overflow, hidden);--_n-button-opacity:1;--_n-button-border-style:solid;--_n-button-inline-size:fit-content;--_n-button-padding-block:calc(var(--n-space-s) / 1.6);--_n-button-icon-size:var(--n-size-icon-s);display:inline-block}.n-button{-webkit-appearance:none;align-items:center;appearance:none;background:var(--_n-button-background-color);opacity:var(--_n-button-opacity);border-radius:var(--_n-button-border-radius);border:1px var(--_n-button-border-style) var(--_n-button-border-color);box-shadow:var(--_n-button-box-shadow);color:var(--_n-button-color);cursor:pointer;display:flex;gap:var(--_n-button-gap);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--_n-button-font-size);font-weight:var(--_n-button-font-weight);line-height:var(--n-line-height-form);margin:0;min-block-size:var(--_n-button-min-block-size);padding:var(--_n-button-padding-block) var(--_n-button-padding-inline);text-align:var(--_n-button-text-align);text-decoration:none;transition:var(--n-transition-quickly);transition-property:background-color,opacity,color,box-shadow,border-color;-webkit-user-select:none;user-select:none;position:relative;inline-size:var(--_n-button-inline-size)}.n-button::after{content:"";position:absolute;background:0 0;background-image:var(--_n-button-gradient);border-radius:var(--_n-button-border-radius);background-repeat:repeat-x;inline-size:100%;inset-inline:0;block-size:100%;inset-block-start:0}:host([expand]){--_n-button-inline-size:100%;display:block}.n-content{flex:1;overflow:var(--_n-button-overflow);text-overflow:ellipsis;white-space:nowrap;position:relative}.n-button:hover{--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-hover));--_n-button-background-color:var(--n-button-background-color, var(--n-color-button-hover))}.n-button:focus{outline:0}.n-button:focus-visible{--_n-button-border-color:var(--n-button-border-color, var(--n-color-accent));--_n-button-box-shadow:var(--n-button-box-shadow, 0 0 0 1px var(--n-color-accent), var(--n-box-shadow));--_n-button-border-style:solid}.n-button:active{opacity:.8;transform:translateY(1px);transition:none}:host([variant=primary]){--_n-button-box-shadow:var(--n-button-box-shadow, none);--_n-button-color:var(--n-button-color, var(--n-color-text-on-accent));--_n-button-font-weight:var(--n-button-font-weight, var(--n-font-weight-active))}:host([variant=primary]),:host([variant=primary]) .n-button:hover{--_n-button-border-color:var(--n-button-border-color, transparent);--_n-button-background-color:var(--n-button-background-color, var(--n-color-accent))}:host([variant=primary]) .n-button:hover{filter:brightness(93%)}:host([variant=primary]) .n-button:focus{--_n-button-box-shadow:var(--n-button-box-shadow, 0 0 0 1px var(--n-color-surface), 0 0 0 3px var(--_n-button-border-color))}:host([variant=dashed]){--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-hover));--_n-button-box-shadow:var(--n-button-box-shadow, none);--_n-button-color:var(--n-button-color, var(--n-color-text-weaker));--_n-button-border-style:dashed}:host([variant=dashed]) .n-button:hover{--_n-button-color:var(--n-button-color, var(--n-color-text))}:host([variant=dashed]) .n-button::after{display:none}:host([variant=plain]){--_n-button-box-shadow:var(--n-button-box-shadow, none)}:host([variant=plain]),:host([variant=plain]) .n-button:hover{--_n-button-border-color:var(--n-button-border-color, transparent)}:host([variant=plain]) .n-button::after{display:none}:host([variant=danger]){--_n-button-box-shadow:var(--n-button-box-shadow, none);--_n-button-color:var(--n-button-color, var(--n-color-text-on-accent));--_n-button-font-weight:var(--n-button-font-weight, var(--n-font-weight-active))}:host([variant=danger]),:host([variant=danger]) .n-button:hover{--_n-button-border-color:var(--n-button-border-color, transparent);--_n-button-background-color:var(--n-button-background-color, var(--n-color-status-danger))}:host([variant=danger]) .n-button:hover{filter:brightness(93%)}:host([variant=danger]) .n-button:focus{--_n-button-border-color:var(--n-button-border-color, var(--n-color-status-danger));--_n-button-box-shadow:var(--n-button-box-shadow, 0 0 0 1px var(--n-color-surface), 0 0 0 3px var(--n-color-status-danger))}:host([disabled]){--_n-button-border-color:var(--n-button-border-color, var(--_n-button-background-color));--_n-button-background-color:var(--n-button-background-color, var(--n-color-border));--_n-button-box-shadow:var(--n-button-box-shadow, none);--_n-button-color:var(--n-button-color, var(--n-color-text-weak));--_n-button-opacity:0.5;pointer-events:none}:host([disabled]) .n-button::after{display:none}.n-button-spinner{position:absolute;transform:translateX(-50%) translateY(-50%);inset-block-start:50%;inset-inline-start:50%}:host([loading]:not([href])){pointer-events:none}:host([loading]:not([href])) .n-content,:host([loading]:not([href])) ::slotted([slot=end]),:host([loading]:not([href])) ::slotted([slot=start]){opacity:0}:host([size="s"]){--_n-button-gap:var(--n-button-gap, var(--n-space-xs));--_n-button-padding-inline:var(--n-button-padding-inline, calc(var(--n-space-s) + 1px));--_n-button-font-size:var(--n-button-font-size, var(--n-font-size-s));--_n-button-min-block-size:var(--n-button-min-block-size, calc(var(--n-space-l) + var(--n-space-xs)));--_n-button-padding-block:calc(var(--n-space-xs) - 1px);--_n-button-icon-size:var(--n-size-icon-xs)}:host([size="l"]){--_n-button-border-radius:var(--n-button-border-radius, var(--n-border-radius));--_n-button-padding-inline:var(--n-button-padding-inline, calc(var(--n-space-l) / 1.3));--_n-button-font-size:var(--n-button-font-size, var(--n-font-size-l));--_n-button-font-weight:var(--n-button-font-weight, var(--n-font-weight-active));--_n-button-min-block-size:var(--n-button-min-block-size, calc(var(--n-space-xxl) - var(--n-space-l)));--_n-button-icon-size:var(--n-size-icon-m)}:host([square]){--_n-button-inline-size:var(--_n-button-min-block-size);--_n-button-padding-block:0;--_n-button-padding-inline:0}:host([square]) .n-content{display:flex;justify-content:center;align-items:center}::slotted(*){color:inherit;pointer-events:none}::slotted(svg){color:var(--n-color-icon)}::slotted(button[slot=proxy]){display:none}:host(:not([variant=primary],[variant=danger])) ::slotted(nord-icon){color:var(--n-color-icon)}:host(:not([variant=primary],[variant=danger])) .n-toggle-icon{color:var(--_n-button-toggle-icon-color)}:host(:not([square])) slot:not([name])::slotted(nord-icon){transform:translateY(1px)}::slotted(nord-icon:not([size])),nord-icon{--_n-icon-size:var(--_n-button-icon-size)}`;let f=class extends(v(u(e))){constructor(){super(...arguments),this.defaultSlot=new p(this),this.buttonRef=s(),this.events=new b(this),this.lightDom=new d(this,{render:()=>this.renderLightDom()}),this.variant="default",this.type="submit",this.size="m",this.download=!1,this.target="_self",this.expand=!1,this.square=!1,this.loading=!1,this.handleOuterClick=t=>{t.composedPath().some((t=>t===this.focusableRef.value||t===this.buttonRef.value))||t.stopPropagation()}}connectedCallback(){super.connectedCallback(),this.events.listen(this,"click",this.handleOuterClick,!0)}render(){var t;const o="toggle"===(null===(t=this.assignedSlot)||void 0===t?void 0:t.name),e=this.defaultSlot.assigned.some((t=>"nord-icon"===t.localName)),a=o&&!e&&!this.href,i=n`<slot name="start"></slot><div class="n-content"><slot></slot></div><nord-spinner class="n-button-spinner" color="currentColor" ?hidden="${!this.loading||Boolean(this.href)}"></nord-spinner><slot name="end">${a?n`<nord-icon name="interface-dropdown-small" class="n-toggle-icon"></nord-icon>`:r}</slot>`;return this.href?this.renderLink(i):this.renderButton(i)}renderLink(t){return n`<a ${l(this.focusableRef)} class="n-button" target="${this.target}" ?download="${this.download}" href="${c(this.disabled,r,this.href)}" tabindex="${c(this.disabled,"-1")}" aria-disabled="${c(this.disabled,"true")}" role="${c(this.disabled,"link")}">${t}</a>`}renderButton(t){return n`<slot name="proxy" @slotchange="${this.handleProxyChange}"></slot><button ${l(this.focusableRef)} class="n-button" ?disabled="${this.disabled}" name="${c(this.name)}" value="${c(this.value)}" @click="${this.handleClick}" aria-disabled="${c(this.loading,"true")}" aria-expanded="${c(this.accessibleExpanded)}" aria-haspopup="${c(this.accessibleHasPopup)}">${t}</button>`}renderLightDom(){return this.href||!this.form?r:n`<button ${l(this.buttonRef)} slot="proxy" name="${c(this.name)}" value="${c(this.value)}" ?disabled="${this.disabled}" form="${c(this._formId)}" type="${this.type}"></button>`}handleClick(t){this.buttonRef.value&&(t.stopPropagation(),this.buttonRef.value.click())}handleProxyChange(t){const o=t.target,n=this.buttonRef.value;n&&n.assignedSlot!==o&&this.appendChild(n)}};f.styles=[h,g],t([a({reflect:!0})],f.prototype,"variant",void 0),t([a({reflect:!0})],f.prototype,"type",void 0),t([a({reflect:!0})],f.prototype,"size",void 0),t([a({attribute:"aria-expanded"})],f.prototype,"accessibleExpanded",void 0),t([a({attribute:"aria-haspopup"})],f.prototype,"accessibleHasPopup",void 0),t([a({reflect:!0})],f.prototype,"href",void 0),t([a({reflect:!0,type:Boolean})],f.prototype,"download",void 0),t([a()],f.prototype,"target",void 0),t([a({reflect:!0,type:Boolean})],f.prototype,"expand",void 0),t([a({reflect:!0,type:Boolean})],f.prototype,"square",void 0),t([a({reflect:!0,type:Boolean})],f.prototype,"loading",void 0),f=t([i("nord-button")],f);var _=f;export{_ as default};
1
+ import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as o,html as n,nothing as r,LitElement as e}from"lit";import{property as a,customElement as i}from"lit/decorators.js";import{createRef as s,ref as l}from"lit/directives/ref.js";import{E as b}from"./EventController-BBOmvfLa.js";import{L as d}from"./LightDomController-DIwtVelV.js";import{c}from"./cond-CI1KbneT.js";import"./Spinner.js";import{F as u}from"./FocusableMixin-BlQLNPdJ.js";import{I as v}from"./InputMixin-LetXsCyv.js";import{s as h}from"./Component-DSU3Qp0O.js";import{S as p}from"./SlotController-Z6eG7LSZ.js";import"lit/directives/if-defined.js";const g=o`:host{--_n-button-border-radius:var(--n-button-border-radius, var(--n-border-radius-s));--_n-button-gap:var(--n-button-gap, var(--n-space-s));--_n-button-gradient:var(--n-button-gradient, linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%));--_n-button-background-color:var(--n-button-background-color, var(--n-color-button));--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-strong));--_n-button-text-align:var(--n-button-text-align, center);--_n-button-box-shadow:var(--n-button-box-shadow, var(--n-box-shadow));--_n-button-color:var(--n-button-color, var(--n-color-text));--_n-button-padding-inline:var(--n-button-padding-inline, calc(var(--n-space-m) / 1.2));--_n-button-font-size:var(--n-button-font-size, var(--n-font-size-m));--_n-button-font-weight:var(--n-button-font-weight, var(--n-font-weight));--_n-button-min-block-size:var(--n-button-min-block-size, var(--n-space-xl));--_n-button-toggle-icon-color:var(--n-button-toggle-icon-color, var(--n-color-icon));--_n-button-overflow:var(--n-button-overflow, hidden);--_n-button-opacity:1;--_n-button-border-style:solid;--_n-button-inline-size:fit-content;--_n-button-padding-block:calc(var(--n-space-s) / 1.6);--_n-button-icon-size:var(--n-size-icon-s);display:inline-block}.n-button{-webkit-appearance:none;align-items:center;appearance:none;background:var(--_n-button-background-color);opacity:var(--_n-button-opacity);border-radius:var(--_n-button-border-radius);border:1px var(--_n-button-border-style) var(--_n-button-border-color);box-shadow:var(--_n-button-box-shadow);color:var(--_n-button-color);cursor:pointer;display:flex;gap:var(--_n-button-gap);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--_n-button-font-size);font-weight:var(--_n-button-font-weight);line-height:var(--n-line-height-form);margin:0;min-block-size:var(--_n-button-min-block-size);padding:var(--_n-button-padding-block) var(--_n-button-padding-inline);text-align:var(--_n-button-text-align);text-decoration:none;transition:var(--n-transition-quickly);transition-property:background-color,opacity,color,box-shadow,border-color;-webkit-user-select:none;user-select:none;position:relative;inline-size:var(--_n-button-inline-size)}.n-button::after{content:"";position:absolute;background:0 0;background-image:var(--_n-button-gradient);border-radius:var(--_n-button-border-radius);background-repeat:repeat-x;inline-size:100%;inset-inline:0;block-size:100%;inset-block-start:0}:host([expand]){--_n-button-inline-size:100%;display:block}.n-content{flex:1;overflow:var(--_n-button-overflow);text-overflow:ellipsis;white-space:nowrap;position:relative}.n-button:hover{--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-hover));--_n-button-background-color:var(--n-button-background-color, var(--n-color-button-hover))}.n-button:focus{outline:0}.n-button:focus-visible{--_n-button-border-color:var(--n-button-border-color, var(--n-color-accent));--_n-button-box-shadow:var(--n-button-box-shadow, 0 0 0 1px var(--n-color-accent), var(--n-box-shadow));--_n-button-border-style:solid}.n-button:active{opacity:.8;transform:translateY(1px);transition:none}:host([variant=primary]){--_n-button-box-shadow:var(--n-button-box-shadow, none);--_n-button-color:var(--n-button-color, var(--n-color-text-on-accent));--_n-button-font-weight:var(--n-button-font-weight, var(--n-font-weight-active))}:host([variant=primary]),:host([variant=primary]) .n-button:hover{--_n-button-border-color:var(--n-button-border-color, transparent);--_n-button-background-color:var(--n-button-background-color, var(--n-color-accent))}:host([variant=primary]) .n-button:hover{filter:brightness(93%)}:host([variant=primary]) .n-button:focus{--_n-button-box-shadow:var(--n-button-box-shadow, 0 0 0 1px var(--n-color-surface), 0 0 0 3px var(--_n-button-border-color))}:host([variant=dashed]){--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-hover));--_n-button-box-shadow:var(--n-button-box-shadow, none);--_n-button-color:var(--n-button-color, var(--n-color-text-weaker));--_n-button-border-style:dashed}:host([variant=dashed]) .n-button:hover{--_n-button-color:var(--n-button-color, var(--n-color-text))}:host([variant=dashed]) .n-button::after{display:none}:host([variant=plain]){--_n-button-box-shadow:var(--n-button-box-shadow, none)}:host([variant=plain]),:host([variant=plain]) .n-button:hover{--_n-button-border-color:var(--n-button-border-color, transparent)}:host([variant=plain]) .n-button::after{display:none}:host([variant=danger]){--_n-button-box-shadow:var(--n-button-box-shadow, none);--_n-button-color:var(--n-button-color, var(--n-color-text-on-accent));--_n-button-font-weight:var(--n-button-font-weight, var(--n-font-weight-active))}:host([variant=danger]),:host([variant=danger]) .n-button:hover{--_n-button-border-color:var(--n-button-border-color, transparent);--_n-button-background-color:var(--n-button-background-color, var(--n-color-status-danger))}:host([variant=danger]) .n-button:hover{filter:brightness(93%)}:host([variant=danger]) .n-button:focus{--_n-button-border-color:var(--n-button-border-color, var(--n-color-status-danger));--_n-button-box-shadow:var(--n-button-box-shadow, 0 0 0 1px var(--n-color-surface), 0 0 0 3px var(--n-color-status-danger))}:host([disabled]){--_n-button-border-color:var(--n-button-border-color, var(--_n-button-background-color));--_n-button-background-color:var(--n-button-background-color, var(--n-color-border));--_n-button-box-shadow:var(--n-button-box-shadow, none);--_n-button-color:var(--n-button-color, var(--n-color-text-weak));--_n-button-opacity:0.5;pointer-events:none}:host([disabled]) .n-button::after{display:none}.n-button-spinner{position:absolute;transform:translateX(-50%) translateY(-50%);inset-block-start:50%;inset-inline-start:50%}:host([loading]:not([href])){pointer-events:none}:host([loading]:not([href])) .n-content,:host([loading]:not([href])) ::slotted([slot=end]),:host([loading]:not([href])) ::slotted([slot=start]){opacity:0}:host([size="s"]){--_n-button-gap:var(--n-button-gap, var(--n-space-xs));--_n-button-padding-inline:var(--n-button-padding-inline, calc(var(--n-space-s) + 1px));--_n-button-font-size:var(--n-button-font-size, var(--n-font-size-s));--_n-button-min-block-size:var(--n-button-min-block-size, calc(var(--n-space-l) + var(--n-space-xs)));--_n-button-padding-block:calc(var(--n-space-xs) - 1px);--_n-button-icon-size:var(--n-size-icon-xs)}:host([size="l"]){--_n-button-border-radius:var(--n-button-border-radius, var(--n-border-radius));--_n-button-padding-inline:var(--n-button-padding-inline, calc(var(--n-space-l) / 1.3));--_n-button-font-size:var(--n-button-font-size, var(--n-font-size-l));--_n-button-font-weight:var(--n-button-font-weight, var(--n-font-weight-active));--_n-button-min-block-size:var(--n-button-min-block-size, calc(var(--n-space-xxl) - var(--n-space-l)));--_n-button-icon-size:var(--n-size-icon-m)}:host([square]){--_n-button-inline-size:var(--_n-button-min-block-size);--_n-button-padding-block:0;--_n-button-padding-inline:0}:host([square]) .n-content{display:flex;justify-content:center;align-items:center}::slotted(*){color:inherit;pointer-events:none}::slotted(svg){color:var(--n-color-icon)}::slotted(button[slot=proxy]){display:none}:host(:not([variant=primary],[variant=danger])) ::slotted(nord-icon){color:var(--n-color-icon)}:host(:not([variant=primary],[variant=danger])) .n-toggle-icon{color:var(--_n-button-toggle-icon-color)}:host(:not([square])) slot:not([name])::slotted(nord-icon){transform:translateY(1px)}::slotted(nord-icon:not([size])),nord-icon{--_n-icon-size:var(--_n-button-icon-size)}`;let f=class extends(v(u(e))){constructor(){super(...arguments),this.defaultSlot=new p(this),this.buttonRef=s(),this.events=new b(this),this.lightDom=new d(this,{render:()=>this.renderLightDom()}),this.variant="default",this.type="submit",this.size="m",this.download=!1,this.target="_self",this.expand=!1,this.square=!1,this.loading=!1,this.hideDropdownIcon=!1,this.handleOuterClick=t=>{t.composedPath().some((t=>t===this.focusableRef.value||t===this.buttonRef.value))||t.stopPropagation()}}connectedCallback(){super.connectedCallback(),this.events.listen(this,"click",this.handleOuterClick,!0)}render(){var t;const o="toggle"===(null===(t=this.assignedSlot)||void 0===t?void 0:t.name),e=this.defaultSlot.assigned.some((t=>"nord-icon"===t.localName)),a=o&&!this.hideDropdownIcon&&!e&&!this.href,i=n`<slot name="start"></slot><div class="n-content"><slot></slot></div><nord-spinner class="n-button-spinner" color="currentColor" ?hidden="${!this.loading||Boolean(this.href)}"></nord-spinner><slot name="end">${a?n`<nord-icon name="interface-dropdown-small" class="n-toggle-icon"></nord-icon>`:r}</slot>`;return this.href?this.renderLink(i):this.renderButton(i)}renderLink(t){return n`<a ${l(this.focusableRef)} class="n-button" target="${this.target}" ?download="${this.download}" href="${c(this.disabled,r,this.href)}" tabindex="${c(this.disabled,"-1")}" aria-disabled="${c(this.disabled,"true")}" role="${c(this.disabled,"link")}">${t}</a>`}renderButton(t){return n`<slot name="proxy" @slotchange="${this.handleProxyChange}"></slot><button ${l(this.focusableRef)} class="n-button" ?disabled="${this.disabled}" name="${c(this.name)}" value="${c(this.value)}" @click="${this.handleClick}" aria-disabled="${c(this.loading,"true")}" aria-expanded="${c(this.accessibleExpanded)}" aria-haspopup="${c(this.accessibleHasPopup)}">${t}</button>`}renderLightDom(){return this.href||!this.form?r:n`<button ${l(this.buttonRef)} slot="proxy" name="${c(this.name)}" value="${c(this.value)}" ?disabled="${this.disabled}" form="${c(this._formId)}" type="${this.type}"></button>`}handleClick(t){this.buttonRef.value&&(t.stopPropagation(),this.buttonRef.value.click())}handleProxyChange(t){const o=t.target,n=this.buttonRef.value;n&&n.assignedSlot!==o&&this.appendChild(n)}};f.styles=[h,g],t([a({reflect:!0})],f.prototype,"variant",void 0),t([a({reflect:!0})],f.prototype,"type",void 0),t([a({reflect:!0})],f.prototype,"size",void 0),t([a({attribute:"aria-expanded"})],f.prototype,"accessibleExpanded",void 0),t([a({attribute:"aria-haspopup"})],f.prototype,"accessibleHasPopup",void 0),t([a({reflect:!0})],f.prototype,"href",void 0),t([a({reflect:!0,type:Boolean})],f.prototype,"download",void 0),t([a()],f.prototype,"target",void 0),t([a({reflect:!0,type:Boolean})],f.prototype,"expand",void 0),t([a({reflect:!0,type:Boolean})],f.prototype,"square",void 0),t([a({reflect:!0,type:Boolean})],f.prototype,"loading",void 0),t([a({reflect:!0,type:Boolean,attribute:"hide-dropdown-icon"})],f.prototype,"hideDropdownIcon",void 0),f=t([i("nord-button")],f);var _=f;export{_ as default};
2
2
  //# sourceMappingURL=Button.js.map
package/lib/Button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sources":["../src/button/Button.ts"],"sourcesContent":["/* eslint-disable lit-a11y/accessible-name */\nimport { LitElement, html, nothing, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { createRef, ref } from \"lit/directives/ref.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { LightDomController } from \"../common/controllers/LightDomController.js\"\nimport { cond } from \"../common/directives/cond.js\"\n\nimport \"../spinner/Spinner.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Button.css\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\n/**\n * Buttons are used for interface actions. Primary style should be\n * used only once per section for main call-to-action, while other\n * styles can appear more frequently.\n *\n * @status ready\n * @category action\n * @slot - The button content\n * @slot start - Used to place content at the start of button text. Typically used for icons.\n * @slot end - Used to place content at the end of button text. Typically used for icons.\n *\n * @cssprop [--n-button-border-radius=var(--n-border-radius-s)] - Controls the rounded corners of the button, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-button-gap=var(--n-space-s)] - Controls the spacing between items within the button, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-button-gradient=linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%))] - Controls the overlayed gradient background on the button.\n * @cssprop [--n-button-background-color=var(--n-color-button)] - Controls the background color of the button, using our [color tokens](/tokens/#color).\n * @cssprop [--n-button-border-color=var(--n-color-border-strong)] - Controls the border color of the button, using our [color tokens](/tokens/#color).\n * @cssprop [--n-button-text-align=center] - Controls the text alignment for the text in the button.\n * @cssprop [--n-button-box-shadow=var(--n-box-shadow)] - Controls the surrounding shadow, using our [box shadow tokens](/tokens/#box-shadow).\n * @cssprop [--n-button-color=var(--n-color-text)] - Controls the color of the text within the button, using our [color tokens](/tokens/#color).\n * @cssprop [--n-button-padding-inline=calc(var(--n-space-m) / 1.2)] - Controls the inline, or left and right, padding of the button.\n * @cssprop [--n-button-font-size=var(--n-font-size-m)] - Controls the size of the text within the button, using our [font tokens](/tokens/#font).\n * @cssprop [--n-button-font-weight=var(--n-font-weight)] - Controls the weight of the text within the button, using our [font tokens](/tokens/#font).\n * @cssprop [--n-button-min-block-size=var(--n-space-xl)] - Controls the minimum block size, or height, of the button using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-button-toggle-icon-color=var(--n-color-icon)] - Controls the color of toggle icon that gets rendered when the button is used as a [Dropdown](/components/dropdown/) toggle.\n */\n@customElement(\"nord-button\")\nexport default class Button extends InputMixin(FocusableMixin(LitElement)) {\n static styles = [componentStyle, style]\n\n private defaultSlot = new SlotController(this)\n private buttonRef = createRef<HTMLButtonElement>()\n private events = new EventController(this)\n private lightDom = new LightDomController(this, {\n render: () => this.renderLightDom(),\n })\n\n /**\n * The style variant of the button.\n */\n @property({ reflect: true }) variant: \"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\" = \"default\"\n\n /**\n * The type of the button.\n */\n @property({ reflect: true }) type: \"button\" | \"submit\" | \"reset\" = \"submit\"\n\n /**\n * The size of the button.\n * This affects font-size and padding.\n */\n @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" = \"m\"\n\n /**\n * @private\n * This does not need to be documented,\n * since it is only for forwarding the aria-expanded attribute\n * to the internal button element.\n */\n @property({ attribute: \"aria-expanded\" }) accessibleExpanded?: \"true\" | \"false\"\n\n /**\n * @private\n * This does not need to be documented,\n * since it is only for forwarding the aria-haspopup attribute\n * to the internal button element.\n */\n @property({ attribute: \"aria-haspopup\" }) accessibleHasPopup?:\n | \"false\"\n | \"true\"\n | \"menu\"\n | \"listbox\"\n | \"tree\"\n | \"grid\"\n | \"dialog\"\n\n /**\n * When provided, renders the button as a link,\n * with its href attribute set to the given value.\n */\n @property({ reflect: true }) href?: string\n\n /**\n * When provided together with a href property, the button will\n * trigger a file download instead of a page visit.\n */\n @property({ reflect: true, type: Boolean }) download = false\n\n /**\n * When provided together with a href property, determines where\n * to open the linked URL. The keywords have special meanings for\n * where to load the URL: “_self” means the current browsing context,\n * “_blank” usually a new tab but users can configure browsers this to\n * open a new window instead, “_parent” means the parent browsing\n * context of the current one, but if no parent exists, behaves as\n * _self, and finally “top” means the topmost browsing context.\n */\n @property() target: \"_self\" | \"_blank\" | \"_parent\" | \"_top\" = \"_self\"\n\n /**\n * Controls whether the button expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n /**\n * When provided, the button is rendered as a square button. Use this for icon only buttons.\n */\n @property({ reflect: true, type: Boolean }) square = false\n\n /**\n * Controls whether the button is in loading state. Please note that the spinner\n * is hidden from assistive technologies, so you need to make sure to announce\n * the loading state to e.g. screen reader users. We also recommend disabling\n * all user interactions on the button itself while in loading state.\n */\n @property({ reflect: true, type: Boolean }) loading = false\n\n connectedCallback() {\n super.connectedCallback()\n this.events.listen(this, \"click\", this.handleOuterClick, true)\n }\n\n render() {\n const isDropdownToggle = this.assignedSlot?.name === \"toggle\"\n const isIconButton = this.defaultSlot.assigned.some(node => node.localName === \"nord-icon\")\n const shouldShowDropdownIcon = isDropdownToggle && !isIconButton && !this.href\n\n const innards = html`\n <slot name=\"start\"></slot>\n <div class=\"n-content\">\n <slot></slot>\n </div>\n <nord-spinner\n class=\"n-button-spinner\"\n color=\"currentColor\"\n ?hidden=${!this.loading || Boolean(this.href)}\n ></nord-spinner>\n <slot name=\"end\">\n ${shouldShowDropdownIcon\n ? html`<nord-icon name=\"interface-dropdown-small\" class=\"n-toggle-icon\"></nord-icon>`\n : nothing}\n </slot>\n `\n\n return this.href ? this.renderLink(innards) : this.renderButton(innards)\n }\n\n /**\n * We jump through some hoops here to ensure the link is treated correctly when \"disabled\".\n * Links cannot be disabled natively, so we need to rely on some aria magic to get the correct semantics.\n * Along with the advice in the article below, we also set tabindex to \"-1\", so it is taken out of tab order.\n *\n * @see https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n */\n private renderLink(innards: TemplateResult) {\n return html`\n <a\n ${ref(this.focusableRef)}\n class=\"n-button\"\n target=${this.target}\n ?download=${this.download}\n href=${cond(this.disabled, nothing, this.href)}\n tabindex=${cond(this.disabled, \"-1\")}\n aria-disabled=${cond(this.disabled, \"true\")}\n role=${cond(this.disabled, \"link\")}\n >${innards}\n </a>\n `\n }\n\n private renderButton(innards: TemplateResult) {\n return html`\n <slot name=\"proxy\" @slotchange=${this.handleProxyChange}></slot>\n <button\n ${ref(this.focusableRef)}\n class=\"n-button\"\n ?disabled=${this.disabled}\n name=${cond(this.name)}\n value=${cond(this.value)}\n @click=${this.handleClick}\n aria-disabled=${cond(this.loading, \"true\")}\n aria-expanded=${cond(this.accessibleExpanded)}\n aria-haspopup=${cond(this.accessibleHasPopup)}\n >\n ${innards}\n </button>\n `\n }\n\n private renderLightDom() {\n if (this.href || !this.form) {\n return nothing\n }\n\n return html`\n <button\n ${ref(this.buttonRef)}\n slot=\"proxy\"\n name=${cond(this.name)}\n value=${cond(this.value)}\n ?disabled=${this.disabled}\n form=${cond(this._formId)}\n type=${this.type}\n ></button>\n `\n }\n\n private handleOuterClick = (e: MouseEvent) => {\n // we want to avoid emitting click events when a click\n // happens in blank space in the host, but not on the button\n // so we stop propagation of any events if click didn't happen on the internal or proxy button\n const isInternalButton = e\n .composedPath()\n .some(node => node === this.focusableRef.value || node === this.buttonRef.value)\n\n if (!isInternalButton) {\n e.stopPropagation()\n }\n }\n\n private handleClick(e: Event) {\n if (this.buttonRef.value) {\n // prevents two events: one from internal button, one from proxy button\n e.stopPropagation()\n this.buttonRef.value.click()\n }\n }\n\n /**\n * React/Vue etc may remove our proxy button when updating button text, since they are unaware of its existence.\n * So we listen for a slotchange event, and if the element is no longer connected to the DOM we add it back in.\n */\n private handleProxyChange(e: Event) {\n const slot = e.target as HTMLSlotElement\n const proxyButton = this.buttonRef.value\n\n if (proxyButton && proxyButton.assignedSlot !== slot) {\n this.appendChild(proxyButton)\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-button\": Button\n }\n}\n"],"names":["Button","InputMixin","FocusableMixin","LitElement","constructor","this","defaultSlot","SlotController","buttonRef","createRef","events","EventController","lightDom","LightDomController","render","renderLightDom","variant","type","size","download","target","expand","square","loading","handleOuterClick","e","composedPath","some","node","focusableRef","value","stopPropagation","connectedCallback","super","listen","isDropdownToggle","_a","assignedSlot","name","isIconButton","assigned","localName","shouldShowDropdownIcon","href","innards","html","Boolean","nothing","renderLink","renderButton","ref","cond","disabled","handleProxyChange","handleClick","accessibleExpanded","accessibleHasPopup","form","_formId","click","slot","proxyButton","appendChild","styles","componentStyle","style","__decorate","property","reflect","prototype","attribute","customElement"],"mappings":"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"}
1
+ {"version":3,"file":"Button.js","sources":["../src/button/Button.ts"],"sourcesContent":["/* eslint-disable lit-a11y/accessible-name */\nimport { LitElement, html, nothing, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { createRef, ref } from \"lit/directives/ref.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { LightDomController } from \"../common/controllers/LightDomController.js\"\nimport { cond } from \"../common/directives/cond.js\"\n\nimport \"../spinner/Spinner.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Button.css\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\n/**\n * Buttons are used for interface actions. Primary style should be\n * used only once per section for main call-to-action, while other\n * styles can appear more frequently.\n *\n * @status ready\n * @category action\n * @slot - The button content\n * @slot start - Used to place content at the start of button text. Typically used for icons.\n * @slot end - Used to place content at the end of button text. Typically used for icons.\n *\n * @cssprop [--n-button-border-radius=var(--n-border-radius-s)] - Controls the rounded corners of the button, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-button-gap=var(--n-space-s)] - Controls the spacing between items within the button, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-button-gradient=linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%))] - Controls the overlayed gradient background on the button.\n * @cssprop [--n-button-background-color=var(--n-color-button)] - Controls the background color of the button, using our [color tokens](/tokens/#color).\n * @cssprop [--n-button-border-color=var(--n-color-border-strong)] - Controls the border color of the button, using our [color tokens](/tokens/#color).\n * @cssprop [--n-button-text-align=center] - Controls the text alignment for the text in the button.\n * @cssprop [--n-button-box-shadow=var(--n-box-shadow)] - Controls the surrounding shadow, using our [box shadow tokens](/tokens/#box-shadow).\n * @cssprop [--n-button-color=var(--n-color-text)] - Controls the color of the text within the button, using our [color tokens](/tokens/#color).\n * @cssprop [--n-button-padding-inline=calc(var(--n-space-m) / 1.2)] - Controls the inline, or left and right, padding of the button.\n * @cssprop [--n-button-font-size=var(--n-font-size-m)] - Controls the size of the text within the button, using our [font tokens](/tokens/#font).\n * @cssprop [--n-button-font-weight=var(--n-font-weight)] - Controls the weight of the text within the button, using our [font tokens](/tokens/#font).\n * @cssprop [--n-button-min-block-size=var(--n-space-xl)] - Controls the minimum block size, or height, of the button using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-button-toggle-icon-color=var(--n-color-icon)] - Controls the color of toggle icon that gets rendered when the button is used as a [Dropdown](/components/dropdown/) toggle.\n */\n@customElement(\"nord-button\")\nexport default class Button extends InputMixin(FocusableMixin(LitElement)) {\n static styles = [componentStyle, style]\n\n private defaultSlot = new SlotController(this)\n private buttonRef = createRef<HTMLButtonElement>()\n private events = new EventController(this)\n private lightDom = new LightDomController(this, {\n render: () => this.renderLightDom(),\n })\n\n /**\n * The style variant of the button.\n */\n @property({ reflect: true }) variant: \"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\" = \"default\"\n\n /**\n * The type of the button.\n */\n @property({ reflect: true }) type: \"button\" | \"submit\" | \"reset\" = \"submit\"\n\n /**\n * The size of the button.\n * This affects font-size and padding.\n */\n @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" = \"m\"\n\n /**\n * @private\n * This does not need to be documented,\n * since it is only for forwarding the aria-expanded attribute\n * to the internal button element.\n */\n @property({ attribute: \"aria-expanded\" }) accessibleExpanded?: \"true\" | \"false\"\n\n /**\n * @private\n * This does not need to be documented,\n * since it is only for forwarding the aria-haspopup attribute\n * to the internal button element.\n */\n @property({ attribute: \"aria-haspopup\" }) accessibleHasPopup?:\n | \"false\"\n | \"true\"\n | \"menu\"\n | \"listbox\"\n | \"tree\"\n | \"grid\"\n | \"dialog\"\n\n /**\n * When provided, renders the button as a link,\n * with its href attribute set to the given value.\n */\n @property({ reflect: true }) href?: string\n\n /**\n * When provided together with a href property, the button will\n * trigger a file download instead of a page visit.\n */\n @property({ reflect: true, type: Boolean }) download = false\n\n /**\n * When provided together with a href property, determines where\n * to open the linked URL. The keywords have special meanings for\n * where to load the URL: “_self” means the current browsing context,\n * “_blank” usually a new tab but users can configure browsers this to\n * open a new window instead, “_parent” means the parent browsing\n * context of the current one, but if no parent exists, behaves as\n * _self, and finally “top” means the topmost browsing context.\n */\n @property() target: \"_self\" | \"_blank\" | \"_parent\" | \"_top\" = \"_self\"\n\n /**\n * Controls whether the button expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n /**\n * When provided, the button is rendered as a square button. Use this for icon only buttons.\n */\n @property({ reflect: true, type: Boolean }) square = false\n\n /**\n * Controls whether the button is in loading state. Please note that the spinner\n * is hidden from assistive technologies, so you need to make sure to announce\n * the loading state to e.g. screen reader users. We also recommend disabling\n * all user interactions on the button itself while in loading state.\n */\n @property({ reflect: true, type: Boolean }) loading = false\n\n /**\n * Controls whether the `interface-dropdown-small` icon from Nordicons is hidden\n * in the `end` slot when used as a dropdown toggle.\n */\n @property({ reflect: true, type: Boolean, attribute: \"hide-dropdown-icon\" }) hideDropdownIcon = false\n\n connectedCallback() {\n super.connectedCallback()\n this.events.listen(this, \"click\", this.handleOuterClick, true)\n }\n\n render() {\n const isDropdownToggle = this.assignedSlot?.name === \"toggle\"\n const isIconButton = this.defaultSlot.assigned.some(node => node.localName === \"nord-icon\")\n const shouldShowDropdownIcon = isDropdownToggle && !this.hideDropdownIcon && !isIconButton && !this.href\n\n const innards = html`\n <slot name=\"start\"></slot>\n <div class=\"n-content\">\n <slot></slot>\n </div>\n <nord-spinner\n class=\"n-button-spinner\"\n color=\"currentColor\"\n ?hidden=${!this.loading || Boolean(this.href)}\n ></nord-spinner>\n <slot name=\"end\">\n ${shouldShowDropdownIcon\n ? html`<nord-icon name=\"interface-dropdown-small\" class=\"n-toggle-icon\"></nord-icon>`\n : nothing}\n </slot>\n `\n\n return this.href ? this.renderLink(innards) : this.renderButton(innards)\n }\n\n /**\n * We jump through some hoops here to ensure the link is treated correctly when \"disabled\".\n * Links cannot be disabled natively, so we need to rely on some aria magic to get the correct semantics.\n * Along with the advice in the article below, we also set tabindex to \"-1\", so it is taken out of tab order.\n *\n * @see https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n */\n private renderLink(innards: TemplateResult) {\n return html`\n <a\n ${ref(this.focusableRef)}\n class=\"n-button\"\n target=${this.target}\n ?download=${this.download}\n href=${cond(this.disabled, nothing, this.href)}\n tabindex=${cond(this.disabled, \"-1\")}\n aria-disabled=${cond(this.disabled, \"true\")}\n role=${cond(this.disabled, \"link\")}\n >${innards}\n </a>\n `\n }\n\n private renderButton(innards: TemplateResult) {\n return html`\n <slot name=\"proxy\" @slotchange=${this.handleProxyChange}></slot>\n <button\n ${ref(this.focusableRef)}\n class=\"n-button\"\n ?disabled=${this.disabled}\n name=${cond(this.name)}\n value=${cond(this.value)}\n @click=${this.handleClick}\n aria-disabled=${cond(this.loading, \"true\")}\n aria-expanded=${cond(this.accessibleExpanded)}\n aria-haspopup=${cond(this.accessibleHasPopup)}\n >\n ${innards}\n </button>\n `\n }\n\n private renderLightDom() {\n if (this.href || !this.form) {\n return nothing\n }\n\n return html`\n <button\n ${ref(this.buttonRef)}\n slot=\"proxy\"\n name=${cond(this.name)}\n value=${cond(this.value)}\n ?disabled=${this.disabled}\n form=${cond(this._formId)}\n type=${this.type}\n ></button>\n `\n }\n\n private handleOuterClick = (e: MouseEvent) => {\n // we want to avoid emitting click events when a click\n // happens in blank space in the host, but not on the button\n // so we stop propagation of any events if click didn't happen on the internal or proxy button\n const isInternalButton = e\n .composedPath()\n .some(node => node === this.focusableRef.value || node === this.buttonRef.value)\n\n if (!isInternalButton) {\n e.stopPropagation()\n }\n }\n\n private handleClick(e: Event) {\n if (this.buttonRef.value) {\n // prevents two events: one from internal button, one from proxy button\n e.stopPropagation()\n this.buttonRef.value.click()\n }\n }\n\n /**\n * React/Vue etc may remove our proxy button when updating button text, since they are unaware of its existence.\n * So we listen for a slotchange event, and if the element is no longer connected to the DOM we add it back in.\n */\n private handleProxyChange(e: Event) {\n const slot = e.target as HTMLSlotElement\n const proxyButton = this.buttonRef.value\n\n if (proxyButton && proxyButton.assignedSlot !== slot) {\n this.appendChild(proxyButton)\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-button\": Button\n }\n}\n"],"names":["Button","InputMixin","FocusableMixin","LitElement","constructor","this","defaultSlot","SlotController","buttonRef","createRef","events","EventController","lightDom","LightDomController","render","renderLightDom","variant","type","size","download","target","expand","square","loading","hideDropdownIcon","handleOuterClick","e","composedPath","some","node","focusableRef","value","stopPropagation","connectedCallback","super","listen","isDropdownToggle","_a","assignedSlot","name","isIconButton","assigned","localName","shouldShowDropdownIcon","href","innards","html","Boolean","nothing","renderLink","renderButton","ref","cond","disabled","handleProxyChange","handleClick","accessibleExpanded","accessibleHasPopup","form","_formId","click","slot","proxyButton","appendChild","styles","componentStyle","style","__decorate","property","reflect","prototype","attribute","customElement"],"mappings":"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"}
package/lib/IconManager.js CHANGED
@@ -1,2 +1,2 @@
1
- const e=e=>fetch(`https://nordcdn.net/ds/icons/3.10.0/assets/${e}.svg`).then((t=>{if(!t.ok)throw new TypeError(`NORD: unknown icon: '${e}'`);return t.text()}));class t{constructor(){this.cache=new Map,this.resolver=e}resolve(e,t){let r=this.cache.get(e);"string"!=typeof r?(r||(r=this.resolver(e).catch((()=>"")).then((t=>(this.cache.set(e,t),t))),this.cache.set(e,r)),r.then(t)):t(r)}registerIcon(e,t){let r,s;if("string"==typeof e?(r=e,s=t):(r=e.title,s=e.default),!r)throw new Error("name is required when registering an icon");if(!s)throw new Error("icon must not be empty");this.cache.set(r,s)}clear(){this.cache.clear()}}export{t as IconManager};
1
+ const e=e=>fetch(`https://nordcdn.net/ds/icons/3.11.0/assets/${e}.svg`).then((t=>{if(!t.ok)throw new TypeError(`NORD: unknown icon: '${e}'`);return t.text()}));class t{constructor(){this.cache=new Map,this.resolver=e}resolve(e,t){let r=this.cache.get(e);"string"!=typeof r?(r||(r=this.resolver(e).catch((()=>"")).then((t=>(this.cache.set(e,t),t))),this.cache.set(e,r)),r.then(t)):t(r)}registerIcon(e,t){let r,s;if("string"==typeof e?(r=e,s=t):(r=e.title,s=e.default),!r)throw new Error("name is required when registering an icon");if(!s)throw new Error("icon must not be empty");this.cache.set(r,s)}clear(){this.cache.clear()}}export{t as IconManager};
2
2
  //# sourceMappingURL=IconManager.js.map
package/lib/Layout.js CHANGED
@@ -1,2 +1,2 @@
1
- import{_ as n}from"./tslib.es6-CmLYFWVC.js";import{css as e,LitElement as t,html as a,nothing as o}from"lit";import{query as i,state as s,property as r,customElement as l}from"lit/decorators.js";import{classMap as d}from"lit/directives/class-map.js";import{styleMap as c}from"lit/directives/style-map.js";import{l as h}from"./NavToggle-D-udBTou.js";import{D as v}from"./DirectionController-ChvNGESZ.js";import{E as p}from"./EventController-BBOmvfLa.js";import{L as u}from"./LightDismissController-4pH8cdko.js";import{S as g}from"./SlotController-Z6eG7LSZ.js";import{o as b}from"./observe-D0n0zOfU.js";import{c as m}from"./cond-CI1KbneT.js";import{f as y}from"./fsm-Bq5jMQrK.js";import{c as k}from"./number-Dg2vCfGd.js";import w from"./Icon.js";import{s as f}from"./Component-DSU3Qp0O.js";import{s as z}from"./Sticky-DqnqENYN.js";import"lit/directives/ref.js";import"./LocalizeController.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./FocusableMixin-BlQLNPdJ.js";import"./Button.js";import"./LightDomController-DIwtVelV.js";import"./Spinner.js";import"lit/directives/if-defined.js";import"./InputMixin-LetXsCyv.js";import"./VisuallyHidden.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";const x=()=>!0;class S{constructor(n,e){n.addController(this),this.options={enabled:x,...e}}hostConnected(){"undefined"!=typeof BroadcastChannel&&(this.channel=new BroadcastChannel(this.options.channelName),this.channel.addEventListener("message",this))}hostDisconnected(){var n,e;null===(n=this.channel)||void 0===n||n.removeEventListener("message",this),null===(e=this.channel)||void 0===e||e.close()}handleEvent(n){this.options.enabled()&&this.options.onMessage(n.data)}post(n){var e;this.options.enabled()&&(null===(e=this.channel)||void 0===e||e.postMessage(n))}}function _(n,e,t=JSON.stringify,a=JSON.parse){return{get value(){try{const t=localStorage.getItem(n);return t?a(t):e}catch(n){return e}},set value(e){try{localStorage.setItem(n,t(e))}catch(n){}}}}const C=e`:host{--_n-layout-padding:var(--n-layout-padding, var(--n-space-l));--_n-layout-drawer-inline-size:var(--n-layout-drawer-inline-size, 320px);--_n-layout-background-color:var(--n-layout-background-color, var(--n-color-background));--_n-layout-nav-transition-duration:var(--n-transition-mobile);--_n-layout-header-size:var(--n-space-xxl);--_n-layout-header-size-s:calc(var(--n-space-xl) + var(--n-space-m));--_n-layout-footer-size:var(--n-space-xxl);background:var(--_n-layout-background-color);color:var(--n-color-text);min-block-size:100vh}.n-layout{block-size:calc(100vh - var(--n-sticky-top))}.n-layout-main,.n-layout-nav{background:var(--_n-layout-background-color);min-block-size:100%}.n-layout-nav{position:fixed;user-select:none;inline-size:var(--_n-layout-nav-width);z-index:var(--n-index-nav);inset-block-start:0;inset-inline-start:0;inset-block-end:0;transform:translateX(var(--n-nav-transform));box-shadow:var(--n-box-shadow-nav)}.n-layout-main{position:relative}main{padding:var(--_n-layout-padding)}.n-has-top-bar{--_n-sticky-top:var(--_n-layout-header-size)}:host([sticky]) .n-has-header{--_n-sticky-size:var(--_n-layout-header-size)}:host([sticky-footer]) .n-has-footer slot[name=footer]::slotted(*){position:fixed}aside{position:fixed;z-index:var(--n-index-nav);inset-block:0;inset-inline-end:0;inline-size:var(--_n-layout-drawer-inline-size);max-inline-size:100%;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-nav)}@media (min-width:1240px){.n-has-drawer .n-layout-content{margin-inline-end:var(--_n-layout-drawer-inline-size)}aside{box-shadow:var(--n-box-shadow-header);border-inline-start:1px solid var(--n-color-border)}}slot[name=drawer]::slotted(*){block-size:100%!important}.n-has-top-bar aside{inset-block-start:var(--_n-layout-header-size)}:is(.n-has-top-bar,.n-has-header) ::slotted(nord-notification-group){inset-block-start:var(--_n-layout-header-size)}:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(-110%)}.n-rtl:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(110%)}[data-screen=narrow] .n-layout-nav{z-index:var(--n-index-popout);transition:transform var(--_n-layout-nav-transition-duration)}[data-screen=wide]:is(:not([data-nav=opened],[data-nav=closed])) .n-layout-nav{transition:transform var(--_n-layout-nav-transition-duration);border-start-end-radius:var(--n-border-radius);border-end-end-radius:var(--n-border-radius);min-block-size:0;inset-block-start:calc(var(--n-space-m) * 4);inset-block-end:var(--n-space-l)}[data-screen=wide][data-nav=opened] .n-layout-nav{border-inline-end:1px solid var(--n-color-border);box-shadow:none}[data-screen=wide][data-nav=opened]:not(.n-has-top-bar) .n-layout-nav{--n-navigation-header-padding-inline:calc(var(--n-space-l) / 1.5)}.n-has-top-bar[data-screen=wide][data-nav=opened] .n-layout-nav{--n-navigation-header-background:var(--n-color-accent-secondary);--n-navigation-header-color:var(--n-color-text-on-accent);--n-navigation-header-divider:none;--n-navigation-header-toggle-icon-color:rgba(255, 255, 255, 0.85);--n-navigation-header-focus-style:0 0 0 1px #fff inset,inset 0 0 0 100px rgba(255, 255, 255, 0.2);border-color:transparent;border-image-slice:1;border-image-source:linear-gradient(to bottom,rgba(255,255,255,.16) calc(var(--_n-layout-header-size) + 1px),var(--n-color-border) calc(var(--_n-layout-header-size) + 1px));background:var(--n-color-accent-secondary);box-shadow:0 0 transparent}[data-screen=wide]:not([data-nav=opened]) .n-layout-nav{--n-navigation-header-block-size:var(--_n-layout-header-size-s);overflow:hidden}[data-screen=wide][data-nav=opened] .n-layout-main{margin-inline-start:var(--_n-layout-nav-width)}[data-screen=narrow] .n-layout-main::after{content:"";position:fixed;inset:0;z-index:var(--n-index-overlay);transition:opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);background:var(--n-color-overlay)}[data-screen=narrow]:not([data-nav=opened],[data-nav=peek],[data-nav=blocked]) .n-layout-main::after{visibility:hidden;opacity:0}.n-resize{touch-action:none;position:absolute;min-block-size:100%;inset-block:0;inset-inline-end:-8px;inline-size:10px;background:0 0}[data-nav=opened] .n-resize{cursor:col-resize}.n-resize::after{content:"";position:absolute;z-index:var(--n-index-sticky);inset-block:0;inset-inline-end:5px;inline-size:3px;background:var(--n-color-accent);transition:opacity var(--n-transition-slowly);opacity:0}.n-resize:focus{outline:0}.n-dragging .n-resize::after,.n-resize:focus::after,[data-nav=opened] .n-resize:hover::after{opacity:1;transition-delay:.15s}@supports selector(:focus-visible){.n-resize:focus::after{opacity:0}.n-resize:focus-visible::after{opacity:1}}.n-dragging{cursor:col-resize!important;-webkit-user-select:none;user-select:none}:host([padding=none]){--_n-layout-padding:var(--n-layout-padding, 0)}.n-top-bar-container{position:fixed;inset-inline-start:var(--_n-layout-nav-width);inset-inline-end:0;inset-block-start:0;z-index:var(--n-index-top-bar)}[data-screen=narrow] .n-top-bar-container,[data-screen=wide]:not([data-nav=opened]) .n-top-bar-container{inset-inline-start:0}.n-has-top-bar{--_n-layout-header-size:var(--_n-layout-header-size-s);--n-navigation-header-block-size:var(--_n-layout-header-size)}.n-has-top-bar :is([name=header],[name=drawer])::slotted(*){--n-header-block-size:var(--_n-layout-header-size)}.n-has-top-bar .n-layout-main{inset-block-start:var(--_n-layout-header-size)}.n-nav-toggle-container{position:absolute;padding-inline-start:var(--n-space-s);block-size:var(--_n-layout-header-size);display:flex;align-items:center;z-index:calc(var(--n-index-top-bar) + 1)}[data-screen=narrow] .n-nav-toggle-container{padding-inline-start:var(--n-space-xs)}.n-has-top-bar .n-nav-toggle-container,:host([sticky]) .n-nav-toggle-container{position:fixed;inset-block-start:0}[data-screen=wide][data-nav=opened] .n-nav-toggle-container{display:none}.n-has-nav[data-screen=wide]:not([data-nav=opened]) ::slotted(nord-top-bar),.n-has-nav[data-screen=wide]:not([data-nav=opened],.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:calc(var(--n-space-l) * 1.8)}.n-has-nav[data-screen=narrow] ::slotted(nord-top-bar),.n-has-nav[data-screen=narrow]:not(.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:var(--n-space-xl)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)){--n-button-background-color:transparent;color:rgba(255,255,255,.85)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)):focus{--n-button-background-color:rgba(0, 0, 0, 0.2)}.n-collapse-btn{--_n-collapse-btn-size:var(--n-space-l);position:fixed;inset-inline-start:calc(var(--_n-layout-nav-width) - (var(--_n-collapse-btn-size)/ 2));inset-block-start:calc(var(--_n-layout-header-size) + (var(--_n-layout-header-size) - var(--_n-collapse-btn-size))/ 2);border-radius:var(--n-border-radius-circle);block-size:var(--_n-collapse-btn-size);inline-size:var(--_n-collapse-btn-size);display:flex;align-items:center;justify-content:center;color:var(--n-color-icon);background:var(--n-color-button);box-shadow:var(--n-box-shadow-card);border:0;z-index:var(--n-index-sticky);opacity:0;visibility:hidden;cursor:pointer;transition:opacity var(--n-transition-slowly),visibility var(--n-transition-slowly),background-color var(--n-transition-quickly),color var(--n-transition-quickly)}.n-collapse-btn:hover{background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-collapse-btn:focus{outline:0;box-shadow:0 0 0 2px var(--n-color-accent),var(--n-box-shadow)}[data-screen=narrow] .n-collapse-btn,[data-screen=wide]:not([data-nav=opened]) .n-collapse-btn{display:none}.n-collapse-btn:focus,.n-layout-nav:hover .n-collapse-btn{opacity:1;visibility:visible}.n-collapse-btn nord-icon{transform:rotate(180deg)}.n-rtl .n-collapse-btn nord-icon{transform:rotate(0)}slot[name=footer]::slotted(*){inset-inline-start:var(--_n-layout-nav-width);inset-inline-end:0;inset-block-end:0}@media (min-width:1240px){.n-has-drawer slot[name=footer]::slotted(*){inset-inline-end:var(--_n-layout-drawer-inline-size)}}[data-screen=narrow] slot[name=footer]::slotted(*),[data-screen=wide]:not([data-nav=opened]) slot[name=footer]::slotted(*){inset-inline-start:0}:host([sticky-footer]) .n-has-footer .n-layout-content{padding-block-end:var(--_n-layout-footer-size)}`;w.registerIcon(h);const j="undefined"!=typeof matchMedia?matchMedia("(min-width: 768px)"):{matches:!1,addEventListener(){}},N=_("nord-layout.navWidth",250),T=_("nord-layout.navOpen",!0),$=y({opened:{toggle:"closed",close:"closed"},closed:{toggle:"opened",open:"opened",focusin:"peek",pointerenter:"peek"},peek:{toggle:"opened",focusout:"unpeek",pointerleave:"wait",dropdownOpen:"blocked",click:"unpeek",open:"opened"},blocked:{dropdownClose:"peek",open:"opened"},wait:{toggle:"opened",focusin:"peek",pointerenter:"peek",timeout:"unpeek"},unpeek:{toggle:"opened",focusin:"peek",pointerenter:"peek",transitionend:"closed"}});let D=class extends t{constructor(){super(...arguments),this.navSlot=new g(this,"nav"),this.drawerSlot=new g(this,"drawer"),this.topBarSlot=new g(this,"top-bar"),this.headerSlot=new g(this,"header"),this.footerSlot=new g(this,"footer"),this.direction=new v(this),this.events=new p(this),this.lightDismiss=new u(this,{isOpen:()=>"opened"===this.navState&&!this.wideScreen,onDismiss:()=>this.navTransition("close"),isDismissible:n=>n!==this.navEl}),this.broadcast=new S(this,{channelName:"nord-layout-nav-state",enabled:()=>this.syncNavState&&this.wideScreen,onMessage:n=>{"navOpen"in n&&(this.navOpen=n.navOpen),"navWidth"in n&&(this.navWidth=n.navWidth)}}),this.navWidth=N.value,this.isDragging=!1,this.wideScreen=j.matches,this.persistNavState=!1,this.syncNavState=!1,this.padding="m",this.sticky=!1,this.stickyFooter=!1,this.handleMediaQueryChange=()=>{this.wideScreen=j.matches,this.navTransition(this.wideScreen?"open":"close")},this.handleToggleClick=()=>{this.navTransition("toggle")},this.handleNavFocus=()=>{this.navTransition("focusin")},this.handleMainFocus=()=>{this.navTransition("focusout")},this.handleMouseEnter=()=>{this.wideScreen&&this.navTransition("pointerenter")},this.handleMouseLeave=()=>{this.navTransition("pointerleave")},this.handleTransitionEnd=()=>{this.navTransition("transitionend")}}get isNarrow(){return!this.wideScreen}connectedCallback(){super.connectedCallback(),this.events.listen(j,"change",this.handleMediaQueryChange)}willUpdate(){this.hasUpdated||(this.isNarrow||this.persistNavState&&!1===T.value?this.navState="closed":this.navState="opened")}render(){const{navWidth:n,navState:e,navSlot:t,headerSlot:i,footerSlot:s,topBarSlot:r,drawerSlot:l,isDragging:h,direction:v}=this,p="opened"===e&&this.wideScreen?n:250;return a`<div class="${d({"n-layout":!0,"n-rtl":v.isRTL,"n-dragging":h,"n-has-header":i.hasContent,"n-has-footer":s.hasContent,"n-has-top-bar":r.hasContent,"n-has-drawer":l.hasContent,"n-has-nav":t.hasContent})}" style="${c({"--_n-layout-nav-width":`${p}px`})}" data-nav="${t.hasContent?e:"closed"}" data-screen="${this.wideScreen?"wide":"narrow"}"><div class="n-layout-nav" ?hidden="${t.isEmpty}" @focusin="${this.handleNavFocus}" @mouseenter="${this.handleMouseEnter}" @mouseleave="${this.handleMouseLeave}" @open="${this.handleDropdownOpen}" @close="${this.handleDropdownClose}"><slot name="nav" @click="${this.handleNavClick}"></slot><div class="n-resize" role="separator" aria-orientation="vertical" tabindex="0" @pointerdown="${m("opened"===e,this.startDragging)}" @pointermove="${m(h,this.handleDrag)}" @pointerleave="${this.stopDragging}" @pointerup="${this.stopDragging}" @keydown="${this.handleKeyboardResize}" ?hidden="${this.isNarrow}"></div>${this.renderNavCollapse()}</div><div class="n-layout-main" @focusin="${this.handleMainFocus}" @click="${this.handleMainClick}">${t.hasContent?this.renderNavToggle():o}<div class="n-top-bar-container"><slot name="top-bar"></slot></div><div class="n-layout-content"><div class="n-sticky"><slot name="header"></slot></div><main><slot></slot></main><slot name="footer"></slot></div><aside ?hidden="${this.drawerSlot.isEmpty}"><slot name="drawer"></slot></aside></div></div>`}renderNavToggle(){return a`<div class="n-nav-toggle-container"><slot name="nav-toggle" @click="${this.handleToggleClick}" @mouseover="${this.handleMouseEnter}" @mouseout="${this.handleMouseLeave}"><nord-nav-toggle></nord-nav-toggle></slot></div>`}renderNavCollapse(){return a`<button class="n-collapse-btn" @click="${this.handleToggleClick}"><nord-icon name="navigation-toggle-lock" size="s"></nord-icon></button>`}handleNavWidthChange(){N.value=this.navWidth}handleNavStateChange(n){switch("wait"===n&&this.peekTimeoutId&&clearTimeout(this.peekTimeoutId),"unpeek"===n&&this.navEl.removeEventListener("transitionend",this.handleTransitionEnd),this.navState){case"closed":this.navOpen=!1;break;case"opened":this.navOpen=!0;break;case"wait":this.peekTimeoutId=setTimeout((()=>this.navTransition("timeout")),300);break;case"unpeek":this.navEl.addEventListener("transitionend",this.handleTransitionEnd,{once:!0})}}handleOpenChange(n){this.isDragging||this.setNavWidth(Math.max(this.navWidth,250)),this.navTransition(this.navOpen?"open":"close"),this.persistNavState&&(T.value=this.navOpen),null!=n&&this.broadcast.post({navOpen:this.navOpen})}navTransition(n){this.navState=$.transition(this.navState,n)}handleNavClick(n){if(!n.defaultPrevented&&!this.wideScreen){const t=n.target;(n=>"nord-nav-item"===n.localName)(e=t)&&!e.hasSubNav&&this.navTransition("close")}var e}handleMainClick(){this.navTransition("click")}handleDropdownOpen(n){"nord-dropdown"===n.target.localName&&this.navTransition("dropdownOpen")}handleDropdownClose(n){"nord-dropdown"===n.target.localName&&this.navTransition("dropdownClose")}handleKeyboardResize(n){const{navWidth:e,direction:{isLTR:t}}=this;switch(n.key){case"ArrowLeft":this.setNavWidth(e+(t?-30:30));break;case"ArrowRight":this.setNavWidth(e+(t?30:-30));break;case"Enter":this.navTransition("toggle");break;case"Home":this.setNavWidth(220);break;case"End":this.setNavWidth(400);break;default:return}this.broadcast.post({navWidth:this.navWidth}),n.preventDefault()}setNavWidth(n){this.navWidth=k(Math.round(n),220,400)}startDragging(n){if(0===n.button){n.target.setPointerCapture(n.pointerId),this.isDragging=!0}}stopDragging(){this.isDragging=!1,this.broadcast.post({navWidth:this.navWidth})}handleDrag(n){const e=this.direction.isRTL?this.clientWidth-n.clientX:n.clientX;this.setNavWidth(e),this.navTransition(e>=100?"open":"close")}};D.styles=[f,z,C],n([i(".n-layout-nav",!0)],D.prototype,"navEl",void 0),n([s()],D.prototype,"navWidth",void 0),n([s()],D.prototype,"isDragging",void 0),n([s()],D.prototype,"navState",void 0),n([s()],D.prototype,"wideScreen",void 0),n([r({reflect:!0,type:Boolean,attribute:"nav-open"})],D.prototype,"navOpen",void 0),n([r({reflect:!0,type:Boolean,attribute:"persist-nav-state"})],D.prototype,"persistNavState",void 0),n([r({type:Boolean,reflect:!0,attribute:"sync-nav-state"})],D.prototype,"syncNavState",void 0),n([r({reflect:!0})],D.prototype,"padding",void 0),n([r({type:Boolean,reflect:!0})],D.prototype,"sticky",void 0),n([r({type:Boolean,reflect:!0,attribute:"sticky-footer"})],D.prototype,"stickyFooter",void 0),n([b("navWidth","updated")],D.prototype,"handleNavWidthChange",null),n([b("navState")],D.prototype,"handleNavStateChange",null),n([b("navOpen","updated")],D.prototype,"handleOpenChange",null),D=n([l("nord-layout")],D);var W=D;export{W as default};
1
+ import{_ as n}from"./tslib.es6-CmLYFWVC.js";import{css as e,LitElement as t,html as a,nothing as o}from"lit";import{query as i,state as s,property as r,customElement as l}from"lit/decorators.js";import{classMap as d}from"lit/directives/class-map.js";import{styleMap as c}from"lit/directives/style-map.js";import{l as h}from"./NavToggle-D-udBTou.js";import{D as v}from"./DirectionController-ChvNGESZ.js";import{E as p}from"./EventController-BBOmvfLa.js";import{L as u}from"./LightDismissController-4pH8cdko.js";import{S as g}from"./SlotController-Z6eG7LSZ.js";import{o as b}from"./observe-D0n0zOfU.js";import{c as m}from"./cond-CI1KbneT.js";import{f as y}from"./fsm-Bq5jMQrK.js";import{c as k}from"./number-Dg2vCfGd.js";import f from"./Icon.js";import{s as w}from"./Component-DSU3Qp0O.js";import{s as z}from"./Sticky-DqnqENYN.js";import"lit/directives/ref.js";import"./LocalizeController.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./FocusableMixin-BlQLNPdJ.js";import"./Button.js";import"./LightDomController-DIwtVelV.js";import"./Spinner.js";import"lit/directives/if-defined.js";import"./InputMixin-LetXsCyv.js";import"./VisuallyHidden.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";const x=()=>!0;class S{constructor(n,e){n.addController(this),this.options={enabled:x,...e}}hostConnected(){"undefined"!=typeof BroadcastChannel&&(this.channel=new BroadcastChannel(this.options.channelName),this.channel.addEventListener("message",this))}hostDisconnected(){var n,e;null===(n=this.channel)||void 0===n||n.removeEventListener("message",this),null===(e=this.channel)||void 0===e||e.close()}handleEvent(n){this.options.enabled()&&this.options.onMessage(n.data)}post(n){var e;this.options.enabled()&&(null===(e=this.channel)||void 0===e||e.postMessage(n))}}function _(n,e,t=JSON.stringify,a=JSON.parse){return{get value(){try{const t=localStorage.getItem(n);return t?a(t):e}catch(n){return e}},set value(e){try{localStorage.setItem(n,t(e))}catch(n){}}}}const C=e`:host{--_n-layout-padding:var(--n-layout-padding, var(--n-space-l));--_n-layout-drawer-inline-size:var(--n-layout-drawer-inline-size, 320px);--_n-layout-background-color:var(--n-layout-background-color, var(--n-color-background));--_n-layout-nav-transition-duration:var(--n-transition-mobile);--_n-layout-header-size:var(--n-space-xxl);--_n-layout-header-size-s:calc(var(--n-space-xl) + var(--n-space-m));--_n-layout-footer-size:var(--n-space-xxl);background:var(--_n-layout-background-color);color:var(--n-color-text);min-block-size:100vh}.n-layout{block-size:calc(100vh - var(--n-sticky-top))}.n-layout-main,.n-layout-nav{background:var(--_n-layout-background-color);min-block-size:100%}.n-layout-nav{position:fixed;user-select:none;inline-size:var(--_n-layout-nav-width);z-index:var(--n-index-nav);inset-block-start:0;inset-inline-start:0;inset-block-end:0;transform:translateX(var(--n-nav-transform));box-shadow:var(--n-box-shadow-nav)}.n-layout-main{position:relative}main{padding:var(--_n-layout-padding)}.n-has-top-bar{--_n-sticky-top:var(--_n-layout-header-size)}:host([sticky]) .n-has-header{--_n-sticky-size:var(--_n-layout-header-size)}:host([sticky-footer]) .n-has-footer slot[name=footer]::slotted(*){position:fixed}aside{position:fixed;z-index:var(--n-index-nav);inset-block:0;inset-inline-end:0;inline-size:var(--_n-layout-drawer-inline-size);max-inline-size:100%;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-nav)}@media (min-width:1240px){.n-has-drawer .n-layout-content{margin-inline-end:var(--_n-layout-drawer-inline-size)}aside{box-shadow:var(--n-box-shadow-header);border-inline-start:1px solid var(--n-color-border)}}slot[name=drawer]::slotted(*){block-size:100%!important}.n-has-top-bar aside{inset-block-start:var(--_n-layout-header-size)}:is(.n-has-top-bar,.n-has-header) ::slotted(nord-notification-group){inset-block-start:var(--_n-layout-header-size)}:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(-110%)}.n-rtl:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(110%)}[data-screen=narrow] .n-layout-nav{z-index:var(--n-index-popout);transition:transform var(--_n-layout-nav-transition-duration)}[data-screen=wide]:is(:not([data-nav=opened],[data-nav=closed])) .n-layout-nav{transition:transform var(--_n-layout-nav-transition-duration);border-start-end-radius:var(--n-border-radius);border-end-end-radius:var(--n-border-radius);min-block-size:0;inset-block-start:calc(var(--n-space-m) * 4);inset-block-end:var(--n-space-l)}[data-screen=wide][data-nav=opened] .n-layout-nav{border-inline-end:1px solid var(--n-color-border);box-shadow:none}[data-screen=wide][data-nav=opened]:not(.n-has-top-bar) .n-layout-nav{--n-navigation-header-padding-inline:calc(var(--n-space-l) / 1.5)}.n-has-top-bar[data-screen=wide][data-nav=opened] .n-layout-nav{--n-navigation-header-background:var(--n-color-accent-secondary);--n-navigation-header-color:var(--n-color-text-on-accent);--n-navigation-header-divider:none;--n-navigation-header-toggle-icon-color:rgba(255, 255, 255, 0.85);--n-navigation-header-focus-style:0 0 0 1px #fff inset,inset 0 0 0 100px rgba(255, 255, 255, 0.2);border-color:transparent;border-image-slice:1;border-image-source:linear-gradient(to bottom,rgba(255,255,255,.16) calc(var(--_n-layout-header-size) + 1px),var(--n-color-border) calc(var(--_n-layout-header-size) + 1px));background:var(--n-color-accent-secondary);box-shadow:0 0 transparent}[data-screen=wide]:not([data-nav=opened]) .n-layout-nav{--n-navigation-header-block-size:var(--_n-layout-header-size-s);overflow:hidden}[data-screen=wide][data-nav=opened] .n-layout-main{margin-inline-start:var(--_n-layout-nav-width)}[data-screen=narrow] .n-layout-main::after{content:"";position:fixed;inset:0;z-index:var(--n-index-overlay);transition:opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);background:var(--n-color-overlay)}[data-screen=narrow]:not([data-nav=opened],[data-nav=peek],[data-nav=blocked]) .n-layout-main::after{visibility:hidden;opacity:0}.n-resize{touch-action:none;position:absolute;min-block-size:100%;inset-block:0;inset-inline-end:-8px;inline-size:10px;background:0 0}[data-nav=opened] .n-resize{cursor:col-resize}.n-resize::after{content:"";position:absolute;z-index:var(--n-index-sticky);inset-block:0;inset-inline-end:5px;inline-size:3px;background:var(--n-color-accent);transition:opacity var(--n-transition-slowly);opacity:0}.n-resize:focus{outline:0}.n-dragging .n-resize::after,.n-resize:focus::after,[data-nav=opened] .n-resize:hover::after{opacity:1;transition-delay:.15s}@supports selector(:focus-visible){.n-resize:focus::after{opacity:0}.n-resize:focus-visible::after{opacity:1}}.n-dragging{cursor:col-resize!important;-webkit-user-select:none;user-select:none}:host([padding=none]){--_n-layout-padding:var(--n-layout-padding, 0)}.n-top-bar-container{position:fixed;inset-inline-start:var(--_n-layout-nav-width);inset-inline-end:0;inset-block-start:0;z-index:var(--n-index-top-bar)}[data-screen=narrow] .n-top-bar-container,[data-screen=wide]:not([data-nav=opened]) .n-top-bar-container{inset-inline-start:0}.n-has-top-bar{--_n-layout-header-size:var(--_n-layout-header-size-s);--n-navigation-header-block-size:var(--_n-layout-header-size)}.n-has-top-bar :is([name=header],[name=drawer])::slotted(*){--n-header-block-size:var(--_n-layout-header-size)}.n-has-top-bar .n-layout-main{inset-block-start:var(--_n-layout-header-size)}.n-nav-toggle-container{position:absolute;padding-inline-start:var(--n-space-s);block-size:var(--_n-layout-header-size);display:flex;align-items:center;z-index:calc(var(--n-index-top-bar) + 1)}[data-screen=narrow] .n-nav-toggle-container{padding-inline-start:var(--n-space-xs)}.n-has-top-bar .n-nav-toggle-container,:host([sticky]) .n-nav-toggle-container{position:fixed;inset-block-start:0}[data-screen=wide][data-nav=opened] .n-nav-toggle-container{display:none}.n-has-nav[data-screen=wide]:not([data-nav=opened]) ::slotted(nord-top-bar),.n-has-nav[data-screen=wide]:not([data-nav=opened],.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:calc(var(--n-space-l) * 1.8)}.n-has-nav[data-screen=narrow] ::slotted(nord-top-bar),.n-has-nav[data-screen=narrow]:not(.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:var(--n-space-xl)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)){--n-button-background-color:transparent;color:rgba(255,255,255,.85)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)):focus{--n-button-background-color:rgba(0, 0, 0, 0.2)}.n-collapse-btn{--_n-collapse-btn-size:var(--n-space-l);position:fixed;inset-inline-start:calc(var(--_n-layout-nav-width) - (var(--_n-collapse-btn-size)/ 2));inset-block-start:calc(var(--_n-layout-header-size) + (var(--_n-layout-header-size) - var(--_n-collapse-btn-size))/ 2);border-radius:var(--n-border-radius-circle);block-size:var(--_n-collapse-btn-size);inline-size:var(--_n-collapse-btn-size);display:flex;align-items:center;justify-content:center;color:var(--n-color-icon);background:var(--n-color-button);box-shadow:var(--n-box-shadow-card);border:0;z-index:var(--n-index-sticky);cursor:pointer;transition:opacity var(--n-transition-slowly),visibility var(--n-transition-slowly),background-color var(--n-transition-quickly),color var(--n-transition-quickly)}.n-collapse-btn:hover{background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-collapse-btn:focus{outline:0;box-shadow:0 0 0 2px var(--n-color-accent),var(--n-box-shadow)}[data-screen=narrow] .n-collapse-btn,[data-screen=wide]:not([data-nav=opened]) .n-collapse-btn{display:none}@media (hover:hover) and (pointer:fine){.n-collapse-btn{opacity:0;visibility:hidden}.n-collapse-btn:focus,.n-layout-nav:hover .n-collapse-btn{opacity:1;visibility:visible}}.n-collapse-btn nord-icon{transform:rotate(180deg)}.n-rtl .n-collapse-btn nord-icon{transform:rotate(0)}slot[name=footer]::slotted(*){inset-inline-start:var(--_n-layout-nav-width);inset-inline-end:0;inset-block-end:0}@media (min-width:1240px){.n-has-drawer slot[name=footer]::slotted(*){inset-inline-end:var(--_n-layout-drawer-inline-size)}}[data-screen=narrow] slot[name=footer]::slotted(*),[data-screen=wide]:not([data-nav=opened]) slot[name=footer]::slotted(*){inset-inline-start:0}:host([sticky-footer]) .n-has-footer .n-layout-content{padding-block-end:var(--_n-layout-footer-size)}`;f.registerIcon(h);const j="undefined"!=typeof matchMedia?matchMedia("(min-width: 768px)"):{matches:!1,addEventListener(){}},N=_("nord-layout.navWidth",250),T=_("nord-layout.navOpen",!0),$=y({opened:{toggle:"closed",close:"closed"},closed:{toggle:"opened",open:"opened",focusin:"peek",pointerenter:"peek"},peek:{toggle:"opened",focusout:"unpeek",pointerleave:"wait",dropdownOpen:"blocked",click:"unpeek",open:"opened"},blocked:{dropdownClose:"peek",open:"opened"},wait:{toggle:"opened",focusin:"peek",pointerenter:"peek",timeout:"unpeek"},unpeek:{toggle:"opened",focusin:"peek",pointerenter:"peek",transitionend:"closed"}});let D=class extends t{constructor(){super(...arguments),this.navSlot=new g(this,"nav"),this.drawerSlot=new g(this,"drawer"),this.topBarSlot=new g(this,"top-bar"),this.headerSlot=new g(this,"header"),this.footerSlot=new g(this,"footer"),this.direction=new v(this),this.events=new p(this),this.lightDismiss=new u(this,{isOpen:()=>"opened"===this.navState&&!this.wideScreen,onDismiss:()=>this.navTransition("close"),isDismissible:n=>n!==this.navEl}),this.broadcast=new S(this,{channelName:"nord-layout-nav-state",enabled:()=>this.syncNavState&&this.wideScreen,onMessage:n=>{"navOpen"in n&&(this.navOpen=n.navOpen),"navWidth"in n&&(this.navWidth=n.navWidth)}}),this.navWidth=N.value,this.isDragging=!1,this.wideScreen=j.matches,this.persistNavState=!1,this.syncNavState=!1,this.padding="m",this.sticky=!1,this.stickyFooter=!1,this.handleMediaQueryChange=()=>{this.wideScreen=j.matches,this.navTransition(this.wideScreen?"open":"close")},this.handleToggleClick=()=>{this.navTransition("toggle")},this.handleNavFocus=()=>{this.navTransition("focusin")},this.handleMainFocus=()=>{this.navTransition("focusout")},this.handleMouseEnter=()=>{this.wideScreen&&this.navTransition("pointerenter")},this.handleMouseLeave=()=>{this.navTransition("pointerleave")},this.handleTransitionEnd=()=>{this.navTransition("transitionend")}}get isNarrow(){return!this.wideScreen}connectedCallback(){super.connectedCallback(),this.events.listen(j,"change",this.handleMediaQueryChange)}willUpdate(){this.hasUpdated||(this.isNarrow||this.persistNavState&&!1===T.value?this.navState="closed":this.navState="opened")}render(){const{navWidth:n,navState:e,navSlot:t,headerSlot:i,footerSlot:s,topBarSlot:r,drawerSlot:l,isDragging:h,direction:v}=this,p="opened"===e&&this.wideScreen?n:250;return a`<div class="${d({"n-layout":!0,"n-rtl":v.isRTL,"n-dragging":h,"n-has-header":i.hasContent,"n-has-footer":s.hasContent,"n-has-top-bar":r.hasContent,"n-has-drawer":l.hasContent,"n-has-nav":t.hasContent})}" style="${c({"--_n-layout-nav-width":`${p}px`})}" data-nav="${t.hasContent?e:"closed"}" data-screen="${this.wideScreen?"wide":"narrow"}"><div class="n-layout-nav" ?hidden="${t.isEmpty}" @focusin="${this.handleNavFocus}" @mouseenter="${this.handleMouseEnter}" @mouseleave="${this.handleMouseLeave}" @open="${this.handleDropdownOpen}" @close="${this.handleDropdownClose}"><slot name="nav" @click="${this.handleNavClick}"></slot><div class="n-resize" role="separator" aria-orientation="vertical" tabindex="0" @pointerdown="${m("opened"===e,this.startDragging)}" @pointermove="${m(h,this.handleDrag)}" @pointerleave="${this.stopDragging}" @pointerup="${this.stopDragging}" @keydown="${this.handleKeyboardResize}" ?hidden="${this.isNarrow}"></div>${this.renderNavCollapse()}</div><div class="n-layout-main" @focusin="${this.handleMainFocus}" @click="${this.handleMainClick}">${t.hasContent?this.renderNavToggle():o}<div class="n-top-bar-container"><slot name="top-bar"></slot></div><div class="n-layout-content"><div class="n-sticky"><slot name="header"></slot></div><main><slot></slot></main><slot name="footer"></slot></div><aside ?hidden="${this.drawerSlot.isEmpty}"><slot name="drawer"></slot></aside></div></div>`}renderNavToggle(){return a`<div class="n-nav-toggle-container"><slot name="nav-toggle" @click="${this.handleToggleClick}" @mouseover="${this.handleMouseEnter}" @mouseout="${this.handleMouseLeave}"><nord-nav-toggle></nord-nav-toggle></slot></div>`}renderNavCollapse(){return a`<button class="n-collapse-btn" @click="${this.handleToggleClick}"><nord-icon name="navigation-toggle-lock" size="s"></nord-icon></button>`}handleNavWidthChange(){N.value=this.navWidth}handleNavStateChange(n){switch("wait"===n&&this.peekTimeoutId&&clearTimeout(this.peekTimeoutId),"unpeek"===n&&this.navEl.removeEventListener("transitionend",this.handleTransitionEnd),this.navState){case"closed":this.navOpen=!1;break;case"opened":this.navOpen=!0;break;case"wait":this.peekTimeoutId=setTimeout((()=>this.navTransition("timeout")),300);break;case"unpeek":this.navEl.addEventListener("transitionend",this.handleTransitionEnd,{once:!0})}}handleOpenChange(n){this.isDragging||this.setNavWidth(Math.max(this.navWidth,250)),this.navTransition(this.navOpen?"open":"close"),this.persistNavState&&(T.value=this.navOpen),null!=n&&this.broadcast.post({navOpen:this.navOpen})}navTransition(n){this.navState=$.transition(this.navState,n)}handleNavClick(n){if(!n.defaultPrevented&&!this.wideScreen){const t=n.target;(n=>"nord-nav-item"===n.localName)(e=t)&&!e.hasSubNav&&this.navTransition("close")}var e}handleMainClick(){this.navTransition("click")}handleDropdownOpen(n){"nord-dropdown"===n.target.localName&&this.navTransition("dropdownOpen")}handleDropdownClose(n){"nord-dropdown"===n.target.localName&&this.navTransition("dropdownClose")}handleKeyboardResize(n){const{navWidth:e,direction:{isLTR:t}}=this;switch(n.key){case"ArrowLeft":this.setNavWidth(e+(t?-30:30));break;case"ArrowRight":this.setNavWidth(e+(t?30:-30));break;case"Enter":this.navTransition("toggle");break;case"Home":this.setNavWidth(220);break;case"End":this.setNavWidth(400);break;default:return}this.broadcast.post({navWidth:this.navWidth}),n.preventDefault()}setNavWidth(n){this.navWidth=k(Math.round(n),220,400)}startDragging(n){if(0===n.button){n.target.setPointerCapture(n.pointerId),this.isDragging=!0}}stopDragging(){this.isDragging=!1,this.broadcast.post({navWidth:this.navWidth})}handleDrag(n){const e=this.direction.isRTL?this.clientWidth-n.clientX:n.clientX;this.setNavWidth(e),this.navTransition(e>=100?"open":"close")}};D.styles=[w,z,C],n([i(".n-layout-nav",!0)],D.prototype,"navEl",void 0),n([s()],D.prototype,"navWidth",void 0),n([s()],D.prototype,"isDragging",void 0),n([s()],D.prototype,"navState",void 0),n([s()],D.prototype,"wideScreen",void 0),n([r({reflect:!0,type:Boolean,attribute:"nav-open"})],D.prototype,"navOpen",void 0),n([r({reflect:!0,type:Boolean,attribute:"persist-nav-state"})],D.prototype,"persistNavState",void 0),n([r({type:Boolean,reflect:!0,attribute:"sync-nav-state"})],D.prototype,"syncNavState",void 0),n([r({reflect:!0})],D.prototype,"padding",void 0),n([r({type:Boolean,reflect:!0})],D.prototype,"sticky",void 0),n([r({type:Boolean,reflect:!0,attribute:"sticky-footer"})],D.prototype,"stickyFooter",void 0),n([b("navWidth","updated")],D.prototype,"handleNavWidthChange",null),n([b("navState")],D.prototype,"handleNavStateChange",null),n([b("navOpen","updated")],D.prototype,"handleOpenChange",null),D=n([l("nord-layout")],D);var W=D;export{W as default};
2
2
  //# sourceMappingURL=Layout.js.map
package/lib/Layout.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Layout.js","sources":["../src/common/controllers/BroadcastChannelController.ts","../src/common/storage.ts","../src/layout/Layout.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\n\ntype Options<T> = {\n channelName: string\n onMessage: (message: T) => void\n enabled?: () => boolean\n}\n\nconst defaultEnabled = () => true\n\nexport class BroadcastChannelController<T> implements ReactiveController {\n private channel?: BroadcastChannel\n private options: Required<Options<T>>\n\n constructor(host: ReactiveControllerHost, options: Options<T>) {\n host.addController(this)\n this.options = { enabled: defaultEnabled, ...options }\n }\n\n hostConnected(): void {\n if (typeof BroadcastChannel !== \"undefined\") {\n this.channel = new BroadcastChannel(this.options.channelName)\n this.channel.addEventListener(\"message\", this)\n }\n }\n\n hostDisconnected(): void {\n this.channel?.removeEventListener(\"message\", this)\n this.channel?.close()\n }\n\n handleEvent(event: MessageEvent<T>) {\n if (this.options.enabled()) {\n this.options.onMessage(event.data)\n }\n }\n\n post(message: T) {\n if (this.options.enabled()) {\n this.channel?.postMessage(message)\n }\n }\n}\n","/**\n * Thin wrapper around local storage which simplifies (de)serialization and default values.\n * By default, (de)serializes as JSON.\n */\nexport function storage<T>(\n key: string,\n defaultValue: T,\n serialize: (value: T) => string = JSON.stringify,\n deserialize: (value: string) => T = JSON.parse\n) {\n return {\n get value(): T {\n try {\n const value = localStorage.getItem(key)\n return value ? deserialize(value) : defaultValue\n } catch {\n return defaultValue\n }\n },\n\n set value(value: T) {\n try {\n localStorage.setItem(key, serialize(value))\n } catch {\n // nothing we can do here\n }\n },\n }\n}\n","/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { styleMap } from \"lit/directives/style-map.js\"\nimport * as lockIcon from \"@nordhealth/icons/lib/assets/navigation-toggle-lock.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { BroadcastChannelController } from \"../common/controllers/BroadcastChannelController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { Events, fsm, States } from \"../common/fsm.js\"\nimport { clamp } from \"../common/number.js\"\nimport { storage } from \"../common/storage.js\"\nimport type NavItem from \"../nav-item/NavItem.js\"\n\nimport Icon from \"../icon/Icon.js\"\nimport \"../nav-toggle/NavToggle.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport stickyStyle from \"../common/styles/Sticky.css\"\nimport style from \"./Layout.css\"\n\nIcon.registerIcon(lockIcon)\n\nconst NAV_DEFAULT_WIDTH = 250\nconst NAV_MIN_WIDTH = 220\nconst NAV_MAX_WIDTH = 400\nconst NAV_COLLAPSE_WIDTH = 100\nconst NAV_RESIZE_STEP = 30\nconst NAV_PEEK_DELAY = 300\n\nconst mediaQuery =\n typeof matchMedia !== \"undefined\"\n ? matchMedia(\"(min-width: 768px)\")\n : ({\n matches: false,\n addEventListener() {\n /* noop */\n },\n } as unknown as MediaQueryList)\n\nconst navWidthStore = storage(\"nord-layout.navWidth\", NAV_DEFAULT_WIDTH)\nconst navOpenStore = storage(\"nord-layout.navOpen\", true)\n\nconst navMachine = fsm({\n opened: {\n toggle: \"closed\",\n close: \"closed\",\n },\n closed: {\n toggle: \"opened\",\n open: \"opened\",\n focusin: \"peek\",\n pointerenter: \"peek\",\n },\n peek: {\n toggle: \"opened\",\n focusout: \"unpeek\",\n pointerleave: \"wait\",\n dropdownOpen: \"blocked\",\n click: \"unpeek\",\n open: \"opened\",\n },\n blocked: {\n dropdownClose: \"peek\",\n open: \"opened\",\n },\n wait: {\n toggle: \"opened\",\n focusin: \"peek\",\n pointerenter: \"peek\",\n timeout: \"unpeek\",\n },\n unpeek: {\n toggle: \"opened\",\n focusin: \"peek\",\n pointerenter: \"peek\",\n transitionend: \"closed\",\n },\n})\n\ntype NavState = States<typeof navMachine>\ntype NavEvent = Events<typeof navMachine>\n\nconst isNavItem = (el: HTMLElement): el is NavItem => el.localName === \"nord-nav-item\"\nconst isNavItemLeaf = (el: HTMLElement) => isNavItem(el) && !el.hasSubNav\n\n/**\n * Layout component is used to create the main layout of an app. Layout\n * currently comes with one main configuration: two-column.\n *\n * @status ready\n * @category structure\n * @slot - The default main section content.\n * @slot nav - Used to place content inside the navigation sidebar.\n * @slot top-bar - Used to place the [Top Bar](../top-bar/) component.\n * @slot header - Used to place content inside the header section. This slot can be made sticky by utilizing the `sticky` property on the layout component.\n * @slot footer - Used to place content inside the footer section. This slot can be made sticky by utilizing the `stickyFooter` property on the layout component.\n * @slot drawer - Used to place additional content/details relating to a selected item.\n * @slot nav-toggle - Used to place a own nav-toggle component, for cases where you might need to add a tooltip.\n *\n * @cssprop [--n-layout-padding=var(--n-space-l)] - Controls the padding around the main layout area (the main slot), using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-layout-drawer-inline-size=320px] - Controls the width of the drawer area, when used.\n * @cssprop [--n-layout-background-color=var(--n-color-background)] - Controls the background color of the layout, using [color tokens](/tokens/#color).\n */\n@customElement(\"nord-layout\")\nexport default class Layout extends LitElement {\n static styles = [componentStyle, stickyStyle, style]\n\n private peekTimeoutId?: ReturnType<typeof setTimeout>\n\n private navSlot = new SlotController(this, \"nav\")\n private drawerSlot = new SlotController(this, \"drawer\")\n private topBarSlot = new SlotController(this, \"top-bar\")\n private headerSlot = new SlotController(this, \"header\")\n private footerSlot = new SlotController(this, \"footer\")\n private direction = new DirectionController(this)\n private events = new EventController(this)\n private lightDismiss = new LightDismissController(this, {\n isOpen: () => this.navState === \"opened\" && !this.wideScreen,\n onDismiss: () => this.navTransition(\"close\"),\n isDismissible: node => node !== this.navEl,\n })\n\n private broadcast = new BroadcastChannelController<{ navOpen: boolean } | { navWidth: number }>(this, {\n channelName: \"nord-layout-nav-state\",\n enabled: () => this.syncNavState && this.wideScreen,\n onMessage: data => {\n if (\"navOpen\" in data) {\n this.navOpen = data.navOpen\n }\n if (\"navWidth\" in data) {\n this.navWidth = data.navWidth\n }\n },\n })\n\n @query(\".n-layout-nav\", true) private navEl!: HTMLDivElement\n\n @state() private navWidth = navWidthStore.value\n @state() private isDragging = false\n @state() private navState!: NavState\n @state() private wideScreen = mediaQuery.matches\n\n /**\n * Controls whether the navigation is hidden off-screen or not.\n * Defaults to `true` for wide viewports, and `false` otherwise.\n */\n @property({ reflect: true, type: Boolean, attribute: \"nav-open\" }) navOpen!: boolean\n\n /**\n * Controls whether the navigation's open/closed state is persisted across page loads.\n * This is useful for multi-page apps, where clicks on links trigger a full page load.\n */\n @property({ reflect: true, type: Boolean, attribute: \"persist-nav-state\" }) persistNavState = false\n\n /**\n * Controls whether the navigation's open/closed state and width is synced across tabs/windows on the same origin.\n * This is useful for long-lived app sessions where you may have multiple tabs/windows open at once.\n */\n @property({ type: Boolean, reflect: true, attribute: \"sync-nav-state\" }) syncNavState = false\n\n /**\n * Controls the padding of the default main section slot. When set to “none”,\n * the nav and header slots will still have padding.\n */\n @property({ reflect: true }) padding: \"m\" | \"none\" = \"m\"\n\n /**\n * Controls whether the layout's header has sticky positioning.\n */\n @property({ type: Boolean, reflect: true }) sticky: boolean = false\n\n /**\n * Controls whether the layout's footer has sticky positioning.\n */\n @property({ type: Boolean, reflect: true, attribute: \"sticky-footer\" }) stickyFooter: boolean = false\n\n /**\n * A getter whose values reflects whether the layout component considers the viewport to be narrow or not.\n * A narrow viewport is considered to be less than 768px wide.\n */\n get isNarrow(): boolean {\n return !this.wideScreen\n }\n\n connectedCallback(): void {\n super.connectedCallback()\n this.events.listen(mediaQuery, \"change\", this.handleMediaQueryChange)\n }\n\n willUpdate() {\n // we only want this logic to run once, before first render\n if (this.hasUpdated) {\n return\n }\n\n // on mobile it should always start closed\n if (this.isNarrow) {\n this.navState = \"closed\"\n }\n // if nav state is persisted, and it was previously closed, start closed\n else if (this.persistNavState && navOpenStore.value === false) {\n this.navState = \"closed\"\n }\n // otherwise start open\n else {\n this.navState = \"opened\"\n }\n }\n\n render() {\n const { navWidth, navState, navSlot, headerSlot, footerSlot, topBarSlot, drawerSlot, isDragging, direction } = this\n const adjustedNavWidth = navState === \"opened\" && this.wideScreen ? navWidth : NAV_DEFAULT_WIDTH\n\n return html`\n <div\n class=${classMap({\n \"n-layout\": true,\n \"n-rtl\": direction.isRTL,\n \"n-dragging\": isDragging,\n \"n-has-header\": headerSlot.hasContent,\n \"n-has-footer\": footerSlot.hasContent,\n \"n-has-top-bar\": topBarSlot.hasContent,\n \"n-has-drawer\": drawerSlot.hasContent,\n \"n-has-nav\": navSlot.hasContent,\n })}\n style=${styleMap({\n \"--_n-layout-nav-width\": `${adjustedNavWidth}px`,\n })}\n data-nav=${navSlot.hasContent ? navState : \"closed\"}\n data-screen=${this.wideScreen ? \"wide\" : \"narrow\"}\n >\n <div\n class=\"n-layout-nav\"\n ?hidden=${navSlot.isEmpty}\n @focusin=${this.handleNavFocus}\n @mouseenter=${this.handleMouseEnter}\n @mouseleave=${this.handleMouseLeave}\n @open=${this.handleDropdownOpen}\n @close=${this.handleDropdownClose}\n >\n <slot name=\"nav\" @click=${this.handleNavClick}></slot>\n <div\n class=\"n-resize\"\n role=\"separator\"\n aria-orientation=\"vertical\"\n tabindex=\"0\"\n @pointerdown=${cond(navState === \"opened\", this.startDragging)}\n @pointermove=${cond(isDragging, this.handleDrag)}\n @pointerleave=${this.stopDragging}\n @pointerup=${this.stopDragging}\n @keydown=${this.handleKeyboardResize}\n ?hidden=${this.isNarrow}\n ></div>\n ${this.renderNavCollapse()}\n </div>\n\n <div class=\"n-layout-main\" @focusin=${this.handleMainFocus} @click=${this.handleMainClick}>\n ${navSlot.hasContent ? this.renderNavToggle() : nothing}\n\n <div class=\"n-top-bar-container\">\n <slot name=\"top-bar\"></slot>\n </div>\n\n <div class=\"n-layout-content\">\n <div class=\"n-sticky\">\n <slot name=\"header\"></slot>\n </div>\n <main>\n <slot></slot>\n </main>\n <slot name=\"footer\"></slot>\n </div>\n\n <aside ?hidden=${this.drawerSlot.isEmpty}>\n <slot name=\"drawer\"></slot>\n </aside>\n </div>\n </div>\n `\n }\n\n private renderNavToggle() {\n /* eslint-disable lit-a11y/mouse-events-have-key-events */\n return html`\n <div class=\"n-nav-toggle-container\">\n <slot\n name=\"nav-toggle\"\n @click=${this.handleToggleClick}\n @mouseover=${this.handleMouseEnter}\n @mouseout=${this.handleMouseLeave}\n >\n <nord-nav-toggle></nord-nav-toggle>\n </slot>\n </div>\n `\n /* eslint-enable lit-a11y/mouse-events-have-key-events */\n }\n\n private renderNavCollapse() {\n return html`\n <button class=\"n-collapse-btn\" @click=${this.handleToggleClick}>\n <nord-icon name=\"navigation-toggle-lock\" size=\"s\"></nord-icon>\n </button>\n `\n }\n\n @observe(\"navWidth\", \"updated\")\n protected handleNavWidthChange() {\n navWidthStore.value = this.navWidth\n }\n\n @observe(\"navState\")\n protected handleNavStateChange(prev: NavState) {\n if (prev === \"wait\" && this.peekTimeoutId) {\n clearTimeout(this.peekTimeoutId)\n }\n if (prev === \"unpeek\") {\n this.navEl.removeEventListener(\"transitionend\", this.handleTransitionEnd)\n }\n\n switch (this.navState) {\n case \"closed\":\n this.navOpen = false\n break\n case \"opened\":\n this.navOpen = true\n break\n case \"wait\":\n this.peekTimeoutId = setTimeout(() => this.navTransition(\"timeout\"), NAV_PEEK_DELAY)\n break\n case \"unpeek\":\n this.navEl.addEventListener(\"transitionend\", this.handleTransitionEnd, { once: true })\n break\n default:\n break\n }\n }\n\n @observe(\"navOpen\", \"updated\")\n protected handleOpenChange(prev: boolean) {\n if (!this.isDragging) {\n // when opening nav, it should restore to default width (or larger).\n // unless it is being dragged, in which case the drag width wins\n this.setNavWidth(Math.max(this.navWidth, NAV_DEFAULT_WIDTH))\n }\n\n this.navTransition(this.navOpen ? \"open\" : \"close\")\n\n if (this.persistNavState) {\n navOpenStore.value = this.navOpen\n }\n\n // skip first update, we only want subsequent changes\n if (prev != null) {\n this.broadcast.post({ navOpen: this.navOpen })\n }\n }\n\n /* ---------------------------------------------\n / NAVIGATION OPEN/CLOSE LOGIC\n / --------------------------------------------- */\n\n private navTransition(event: NavEvent) {\n this.navState = navMachine.transition(this.navState, event)\n }\n\n private handleNavClick(e: Event) {\n if (!e.defaultPrevented && !this.wideScreen) {\n const target = e.target as HTMLElement\n\n if (isNavItemLeaf(target)) {\n this.navTransition(\"close\")\n }\n }\n }\n\n private handleMainClick() {\n this.navTransition(\"click\")\n }\n\n private handleDropdownOpen(e: Event) {\n const target = e.target as Element\n\n if (target.localName === \"nord-dropdown\") {\n this.navTransition(\"dropdownOpen\")\n }\n }\n\n private handleDropdownClose(e: Event) {\n const target = e.target as Element\n\n if (target.localName === \"nord-dropdown\") {\n this.navTransition(\"dropdownClose\")\n }\n }\n\n private handleMediaQueryChange = () => {\n this.wideScreen = mediaQuery.matches\n this.navTransition(this.wideScreen ? \"open\" : \"close\")\n }\n\n private handleToggleClick = () => {\n this.navTransition(\"toggle\")\n }\n\n private handleNavFocus = () => {\n this.navTransition(\"focusin\")\n }\n\n private handleMainFocus = () => {\n this.navTransition(\"focusout\")\n }\n\n private handleMouseEnter = () => {\n if (this.wideScreen) {\n this.navTransition(\"pointerenter\")\n }\n }\n\n private handleMouseLeave = () => {\n this.navTransition(\"pointerleave\")\n }\n\n private handleTransitionEnd = () => {\n this.navTransition(\"transitionend\")\n }\n\n /* ---------------------------------------------\n / RESIZE LOGIC\n / --------------------------------------------- */\n\n private handleKeyboardResize(e: KeyboardEvent) {\n const {\n navWidth,\n direction: { isLTR },\n } = this\n\n switch (e.key) {\n case \"ArrowLeft\":\n this.setNavWidth(navWidth + (isLTR ? -NAV_RESIZE_STEP : NAV_RESIZE_STEP))\n break\n case \"ArrowRight\":\n this.setNavWidth(navWidth + (isLTR ? NAV_RESIZE_STEP : -NAV_RESIZE_STEP))\n break\n case \"Enter\":\n this.navTransition(\"toggle\")\n break\n case \"Home\":\n this.setNavWidth(NAV_MIN_WIDTH)\n break\n case \"End\":\n this.setNavWidth(NAV_MAX_WIDTH)\n break\n default:\n return\n }\n\n this.broadcast.post({ navWidth: this.navWidth })\n e.preventDefault()\n }\n\n private setNavWidth(width: number) {\n this.navWidth = clamp(Math.round(width), NAV_MIN_WIDTH, NAV_MAX_WIDTH)\n }\n\n private startDragging(e: PointerEvent) {\n if (e.button === 0) {\n const target = e.target as Element\n target.setPointerCapture(e.pointerId)\n this.isDragging = true\n }\n }\n\n private stopDragging() {\n this.isDragging = false\n this.broadcast.post({ navWidth: this.navWidth })\n }\n\n private handleDrag(e: PointerEvent) {\n const width = this.direction.isRTL ? this.clientWidth - e.clientX : e.clientX\n\n this.setNavWidth(width)\n this.navTransition(width >= NAV_COLLAPSE_WIDTH ? \"open\" : \"close\")\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-layout\": Layout\n }\n}\n"],"names":["defaultEnabled","BroadcastChannelController","constructor","host","options","addController","this","enabled","hostConnected","BroadcastChannel","channel","channelName","addEventListener","hostDisconnected","_a","removeEventListener","_b","close","handleEvent","event","onMessage","data","post","message","postMessage","storage","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","setItem","Icon","registerIcon","lockIcon","mediaQuery","matchMedia","matches","navWidthStore","navOpenStore","navMachine","fsm","opened","toggle","closed","open","focusin","pointerenter","peek","focusout","pointerleave","dropdownOpen","click","blocked","dropdownClose","wait","timeout","unpeek","transitionend","Layout","LitElement","navSlot","SlotController","drawerSlot","topBarSlot","headerSlot","footerSlot","direction","DirectionController","events","EventController","lightDismiss","LightDismissController","isOpen","navState","wideScreen","onDismiss","navTransition","isDismissible","node","navEl","broadcast","syncNavState","navOpen","navWidth","isDragging","persistNavState","padding","sticky","stickyFooter","handleMediaQueryChange","handleToggleClick","handleNavFocus","handleMainFocus","handleMouseEnter","handleMouseLeave","handleTransitionEnd","isNarrow","connectedCallback","super","listen","willUpdate","hasUpdated","render","adjustedNavWidth","html","classMap","isRTL","hasContent","styleMap","isEmpty","handleDropdownOpen","handleDropdownClose","handleNavClick","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","renderNavCollapse","handleMainClick","renderNavToggle","nothing","handleNavWidthChange","handleNavStateChange","prev","peekTimeoutId","clearTimeout","setTimeout","once","handleOpenChange","setNavWidth","Math","max","transition","e","defaultPrevented","target","el","localName","isNavItem","hasSubNav","isLTR","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","stickyStyle","style","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","observe","customElement"],"mappings":"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"}
1
+ {"version":3,"file":"Layout.js","sources":["../src/common/controllers/BroadcastChannelController.ts","../src/common/storage.ts","../src/layout/Layout.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\n\ntype Options<T> = {\n channelName: string\n onMessage: (message: T) => void\n enabled?: () => boolean\n}\n\nconst defaultEnabled = () => true\n\nexport class BroadcastChannelController<T> implements ReactiveController {\n private channel?: BroadcastChannel\n private options: Required<Options<T>>\n\n constructor(host: ReactiveControllerHost, options: Options<T>) {\n host.addController(this)\n this.options = { enabled: defaultEnabled, ...options }\n }\n\n hostConnected(): void {\n if (typeof BroadcastChannel !== \"undefined\") {\n this.channel = new BroadcastChannel(this.options.channelName)\n this.channel.addEventListener(\"message\", this)\n }\n }\n\n hostDisconnected(): void {\n this.channel?.removeEventListener(\"message\", this)\n this.channel?.close()\n }\n\n handleEvent(event: MessageEvent<T>) {\n if (this.options.enabled()) {\n this.options.onMessage(event.data)\n }\n }\n\n post(message: T) {\n if (this.options.enabled()) {\n this.channel?.postMessage(message)\n }\n }\n}\n","/**\n * Thin wrapper around local storage which simplifies (de)serialization and default values.\n * By default, (de)serializes as JSON.\n */\nexport function storage<T>(\n key: string,\n defaultValue: T,\n serialize: (value: T) => string = JSON.stringify,\n deserialize: (value: string) => T = JSON.parse\n) {\n return {\n get value(): T {\n try {\n const value = localStorage.getItem(key)\n return value ? deserialize(value) : defaultValue\n } catch {\n return defaultValue\n }\n },\n\n set value(value: T) {\n try {\n localStorage.setItem(key, serialize(value))\n } catch {\n // nothing we can do here\n }\n },\n }\n}\n","/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { styleMap } from \"lit/directives/style-map.js\"\nimport * as lockIcon from \"@nordhealth/icons/lib/assets/navigation-toggle-lock.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { BroadcastChannelController } from \"../common/controllers/BroadcastChannelController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { Events, fsm, States } from \"../common/fsm.js\"\nimport { clamp } from \"../common/number.js\"\nimport { storage } from \"../common/storage.js\"\nimport type NavItem from \"../nav-item/NavItem.js\"\n\nimport Icon from \"../icon/Icon.js\"\nimport \"../nav-toggle/NavToggle.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport stickyStyle from \"../common/styles/Sticky.css\"\nimport style from \"./Layout.css\"\n\nIcon.registerIcon(lockIcon)\n\nconst NAV_DEFAULT_WIDTH = 250\nconst NAV_MIN_WIDTH = 220\nconst NAV_MAX_WIDTH = 400\nconst NAV_COLLAPSE_WIDTH = 100\nconst NAV_RESIZE_STEP = 30\nconst NAV_PEEK_DELAY = 300\n\nconst mediaQuery =\n typeof matchMedia !== \"undefined\"\n ? matchMedia(\"(min-width: 768px)\")\n : ({\n matches: false,\n addEventListener() {\n /* noop */\n },\n } as unknown as MediaQueryList)\n\nconst navWidthStore = storage(\"nord-layout.navWidth\", NAV_DEFAULT_WIDTH)\nconst navOpenStore = storage(\"nord-layout.navOpen\", true)\n\nconst navMachine = fsm({\n opened: {\n toggle: \"closed\",\n close: \"closed\",\n },\n closed: {\n toggle: \"opened\",\n open: \"opened\",\n focusin: \"peek\",\n pointerenter: \"peek\",\n },\n peek: {\n toggle: \"opened\",\n focusout: \"unpeek\",\n pointerleave: \"wait\",\n dropdownOpen: \"blocked\",\n click: \"unpeek\",\n open: \"opened\",\n },\n blocked: {\n dropdownClose: \"peek\",\n open: \"opened\",\n },\n wait: {\n toggle: \"opened\",\n focusin: \"peek\",\n pointerenter: \"peek\",\n timeout: \"unpeek\",\n },\n unpeek: {\n toggle: \"opened\",\n focusin: \"peek\",\n pointerenter: \"peek\",\n transitionend: \"closed\",\n },\n})\n\ntype NavState = States<typeof navMachine>\ntype NavEvent = Events<typeof navMachine>\n\nconst isNavItem = (el: HTMLElement): el is NavItem => el.localName === \"nord-nav-item\"\nconst isNavItemLeaf = (el: HTMLElement) => isNavItem(el) && !el.hasSubNav\n\n/**\n * Layout component is used to create the main layout of an app. Layout\n * currently comes with one main configuration: two-column.\n *\n * @status ready\n * @category structure\n * @slot - The default main section content.\n * @slot nav - Used to place content inside the navigation sidebar.\n * @slot top-bar - Used to place the [Top Bar](../top-bar/) component.\n * @slot header - Used to place content inside the header section. This slot can be made sticky by utilizing the `sticky` property on the layout component.\n * @slot footer - Used to place content inside the footer section. This slot can be made sticky by utilizing the `stickyFooter` property on the layout component.\n * @slot drawer - Used to place additional content/details relating to a selected item.\n * @slot nav-toggle - Used to place a own nav-toggle component, for cases where you might need to add a tooltip.\n *\n * @cssprop [--n-layout-padding=var(--n-space-l)] - Controls the padding around the main layout area (the main slot), using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-layout-drawer-inline-size=320px] - Controls the width of the drawer area, when used.\n * @cssprop [--n-layout-background-color=var(--n-color-background)] - Controls the background color of the layout, using [color tokens](/tokens/#color).\n */\n@customElement(\"nord-layout\")\nexport default class Layout extends LitElement {\n static styles = [componentStyle, stickyStyle, style]\n\n private peekTimeoutId?: ReturnType<typeof setTimeout>\n\n private navSlot = new SlotController(this, \"nav\")\n private drawerSlot = new SlotController(this, \"drawer\")\n private topBarSlot = new SlotController(this, \"top-bar\")\n private headerSlot = new SlotController(this, \"header\")\n private footerSlot = new SlotController(this, \"footer\")\n private direction = new DirectionController(this)\n private events = new EventController(this)\n private lightDismiss = new LightDismissController(this, {\n isOpen: () => this.navState === \"opened\" && !this.wideScreen,\n onDismiss: () => this.navTransition(\"close\"),\n isDismissible: node => node !== this.navEl,\n })\n\n private broadcast = new BroadcastChannelController<{ navOpen: boolean } | { navWidth: number }>(this, {\n channelName: \"nord-layout-nav-state\",\n enabled: () => this.syncNavState && this.wideScreen,\n onMessage: data => {\n if (\"navOpen\" in data) {\n this.navOpen = data.navOpen\n }\n if (\"navWidth\" in data) {\n this.navWidth = data.navWidth\n }\n },\n })\n\n @query(\".n-layout-nav\", true) private navEl!: HTMLDivElement\n\n @state() private navWidth = navWidthStore.value\n @state() private isDragging = false\n @state() private navState!: NavState\n @state() private wideScreen = mediaQuery.matches\n\n /**\n * Controls whether the navigation is hidden off-screen or not.\n * Defaults to `true` for wide viewports, and `false` otherwise.\n */\n @property({ reflect: true, type: Boolean, attribute: \"nav-open\" }) navOpen!: boolean\n\n /**\n * Controls whether the navigation's open/closed state is persisted across page loads.\n * This is useful for multi-page apps, where clicks on links trigger a full page load.\n */\n @property({ reflect: true, type: Boolean, attribute: \"persist-nav-state\" }) persistNavState = false\n\n /**\n * Controls whether the navigation's open/closed state and width is synced across tabs/windows on the same origin.\n * This is useful for long-lived app sessions where you may have multiple tabs/windows open at once.\n */\n @property({ type: Boolean, reflect: true, attribute: \"sync-nav-state\" }) syncNavState = false\n\n /**\n * Controls the padding of the default main section slot. When set to “none”,\n * the nav and header slots will still have padding.\n */\n @property({ reflect: true }) padding: \"m\" | \"none\" = \"m\"\n\n /**\n * Controls whether the layout's header has sticky positioning.\n */\n @property({ type: Boolean, reflect: true }) sticky: boolean = false\n\n /**\n * Controls whether the layout's footer has sticky positioning.\n */\n @property({ type: Boolean, reflect: true, attribute: \"sticky-footer\" }) stickyFooter: boolean = false\n\n /**\n * A getter whose values reflects whether the layout component considers the viewport to be narrow or not.\n * A narrow viewport is considered to be less than 768px wide.\n */\n get isNarrow(): boolean {\n return !this.wideScreen\n }\n\n connectedCallback(): void {\n super.connectedCallback()\n this.events.listen(mediaQuery, \"change\", this.handleMediaQueryChange)\n }\n\n willUpdate() {\n // we only want this logic to run once, before first render\n if (this.hasUpdated) {\n return\n }\n\n // on mobile it should always start closed\n if (this.isNarrow) {\n this.navState = \"closed\"\n }\n // if nav state is persisted, and it was previously closed, start closed\n else if (this.persistNavState && navOpenStore.value === false) {\n this.navState = \"closed\"\n }\n // otherwise start open\n else {\n this.navState = \"opened\"\n }\n }\n\n render() {\n const { navWidth, navState, navSlot, headerSlot, footerSlot, topBarSlot, drawerSlot, isDragging, direction } = this\n const adjustedNavWidth = navState === \"opened\" && this.wideScreen ? navWidth : NAV_DEFAULT_WIDTH\n\n return html`\n <div\n class=${classMap({\n \"n-layout\": true,\n \"n-rtl\": direction.isRTL,\n \"n-dragging\": isDragging,\n \"n-has-header\": headerSlot.hasContent,\n \"n-has-footer\": footerSlot.hasContent,\n \"n-has-top-bar\": topBarSlot.hasContent,\n \"n-has-drawer\": drawerSlot.hasContent,\n \"n-has-nav\": navSlot.hasContent,\n })}\n style=${styleMap({\n \"--_n-layout-nav-width\": `${adjustedNavWidth}px`,\n })}\n data-nav=${navSlot.hasContent ? navState : \"closed\"}\n data-screen=${this.wideScreen ? \"wide\" : \"narrow\"}\n >\n <div\n class=\"n-layout-nav\"\n ?hidden=${navSlot.isEmpty}\n @focusin=${this.handleNavFocus}\n @mouseenter=${this.handleMouseEnter}\n @mouseleave=${this.handleMouseLeave}\n @open=${this.handleDropdownOpen}\n @close=${this.handleDropdownClose}\n >\n <slot name=\"nav\" @click=${this.handleNavClick}></slot>\n <div\n class=\"n-resize\"\n role=\"separator\"\n aria-orientation=\"vertical\"\n tabindex=\"0\"\n @pointerdown=${cond(navState === \"opened\", this.startDragging)}\n @pointermove=${cond(isDragging, this.handleDrag)}\n @pointerleave=${this.stopDragging}\n @pointerup=${this.stopDragging}\n @keydown=${this.handleKeyboardResize}\n ?hidden=${this.isNarrow}\n ></div>\n ${this.renderNavCollapse()}\n </div>\n\n <div class=\"n-layout-main\" @focusin=${this.handleMainFocus} @click=${this.handleMainClick}>\n ${navSlot.hasContent ? this.renderNavToggle() : nothing}\n\n <div class=\"n-top-bar-container\">\n <slot name=\"top-bar\"></slot>\n </div>\n\n <div class=\"n-layout-content\">\n <div class=\"n-sticky\">\n <slot name=\"header\"></slot>\n </div>\n <main>\n <slot></slot>\n </main>\n <slot name=\"footer\"></slot>\n </div>\n\n <aside ?hidden=${this.drawerSlot.isEmpty}>\n <slot name=\"drawer\"></slot>\n </aside>\n </div>\n </div>\n `\n }\n\n private renderNavToggle() {\n /* eslint-disable lit-a11y/mouse-events-have-key-events */\n return html`\n <div class=\"n-nav-toggle-container\">\n <slot\n name=\"nav-toggle\"\n @click=${this.handleToggleClick}\n @mouseover=${this.handleMouseEnter}\n @mouseout=${this.handleMouseLeave}\n >\n <nord-nav-toggle></nord-nav-toggle>\n </slot>\n </div>\n `\n /* eslint-enable lit-a11y/mouse-events-have-key-events */\n }\n\n private renderNavCollapse() {\n return html`\n <button class=\"n-collapse-btn\" @click=${this.handleToggleClick}>\n <nord-icon name=\"navigation-toggle-lock\" size=\"s\"></nord-icon>\n </button>\n `\n }\n\n @observe(\"navWidth\", \"updated\")\n protected handleNavWidthChange() {\n navWidthStore.value = this.navWidth\n }\n\n @observe(\"navState\")\n protected handleNavStateChange(prev: NavState) {\n if (prev === \"wait\" && this.peekTimeoutId) {\n clearTimeout(this.peekTimeoutId)\n }\n if (prev === \"unpeek\") {\n this.navEl.removeEventListener(\"transitionend\", this.handleTransitionEnd)\n }\n\n switch (this.navState) {\n case \"closed\":\n this.navOpen = false\n break\n case \"opened\":\n this.navOpen = true\n break\n case \"wait\":\n this.peekTimeoutId = setTimeout(() => this.navTransition(\"timeout\"), NAV_PEEK_DELAY)\n break\n case \"unpeek\":\n this.navEl.addEventListener(\"transitionend\", this.handleTransitionEnd, { once: true })\n break\n default:\n break\n }\n }\n\n @observe(\"navOpen\", \"updated\")\n protected handleOpenChange(prev: boolean) {\n if (!this.isDragging) {\n // when opening nav, it should restore to default width (or larger).\n // unless it is being dragged, in which case the drag width wins\n this.setNavWidth(Math.max(this.navWidth, NAV_DEFAULT_WIDTH))\n }\n\n this.navTransition(this.navOpen ? \"open\" : \"close\")\n\n if (this.persistNavState) {\n navOpenStore.value = this.navOpen\n }\n\n // skip first update, we only want subsequent changes\n if (prev != null) {\n this.broadcast.post({ navOpen: this.navOpen })\n }\n }\n\n /* ---------------------------------------------\n / NAVIGATION OPEN/CLOSE LOGIC\n / --------------------------------------------- */\n\n private navTransition(event: NavEvent) {\n this.navState = navMachine.transition(this.navState, event)\n }\n\n private handleNavClick(e: Event) {\n if (!e.defaultPrevented && !this.wideScreen) {\n const target = e.target as HTMLElement\n\n if (isNavItemLeaf(target)) {\n this.navTransition(\"close\")\n }\n }\n }\n\n private handleMainClick() {\n this.navTransition(\"click\")\n }\n\n private handleDropdownOpen(e: Event) {\n const target = e.target as Element\n\n if (target.localName === \"nord-dropdown\") {\n this.navTransition(\"dropdownOpen\")\n }\n }\n\n private handleDropdownClose(e: Event) {\n const target = e.target as Element\n\n if (target.localName === \"nord-dropdown\") {\n this.navTransition(\"dropdownClose\")\n }\n }\n\n private handleMediaQueryChange = () => {\n this.wideScreen = mediaQuery.matches\n this.navTransition(this.wideScreen ? \"open\" : \"close\")\n }\n\n private handleToggleClick = () => {\n this.navTransition(\"toggle\")\n }\n\n private handleNavFocus = () => {\n this.navTransition(\"focusin\")\n }\n\n private handleMainFocus = () => {\n this.navTransition(\"focusout\")\n }\n\n private handleMouseEnter = () => {\n if (this.wideScreen) {\n this.navTransition(\"pointerenter\")\n }\n }\n\n private handleMouseLeave = () => {\n this.navTransition(\"pointerleave\")\n }\n\n private handleTransitionEnd = () => {\n this.navTransition(\"transitionend\")\n }\n\n /* ---------------------------------------------\n / RESIZE LOGIC\n / --------------------------------------------- */\n\n private handleKeyboardResize(e: KeyboardEvent) {\n const {\n navWidth,\n direction: { isLTR },\n } = this\n\n switch (e.key) {\n case \"ArrowLeft\":\n this.setNavWidth(navWidth + (isLTR ? -NAV_RESIZE_STEP : NAV_RESIZE_STEP))\n break\n case \"ArrowRight\":\n this.setNavWidth(navWidth + (isLTR ? NAV_RESIZE_STEP : -NAV_RESIZE_STEP))\n break\n case \"Enter\":\n this.navTransition(\"toggle\")\n break\n case \"Home\":\n this.setNavWidth(NAV_MIN_WIDTH)\n break\n case \"End\":\n this.setNavWidth(NAV_MAX_WIDTH)\n break\n default:\n return\n }\n\n this.broadcast.post({ navWidth: this.navWidth })\n e.preventDefault()\n }\n\n private setNavWidth(width: number) {\n this.navWidth = clamp(Math.round(width), NAV_MIN_WIDTH, NAV_MAX_WIDTH)\n }\n\n private startDragging(e: PointerEvent) {\n if (e.button === 0) {\n const target = e.target as Element\n target.setPointerCapture(e.pointerId)\n this.isDragging = true\n }\n }\n\n private stopDragging() {\n this.isDragging = false\n this.broadcast.post({ navWidth: this.navWidth })\n }\n\n private handleDrag(e: PointerEvent) {\n const width = this.direction.isRTL ? this.clientWidth - e.clientX : e.clientX\n\n this.setNavWidth(width)\n this.navTransition(width >= NAV_COLLAPSE_WIDTH ? \"open\" : \"close\")\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-layout\": Layout\n }\n}\n"],"names":["defaultEnabled","BroadcastChannelController","constructor","host","options","addController","this","enabled","hostConnected","BroadcastChannel","channel","channelName","addEventListener","hostDisconnected","_a","removeEventListener","_b","close","handleEvent","event","onMessage","data","post","message","postMessage","storage","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","setItem","Icon","registerIcon","lockIcon","mediaQuery","matchMedia","matches","navWidthStore","navOpenStore","navMachine","fsm","opened","toggle","closed","open","focusin","pointerenter","peek","focusout","pointerleave","dropdownOpen","click","blocked","dropdownClose","wait","timeout","unpeek","transitionend","Layout","LitElement","navSlot","SlotController","drawerSlot","topBarSlot","headerSlot","footerSlot","direction","DirectionController","events","EventController","lightDismiss","LightDismissController","isOpen","navState","wideScreen","onDismiss","navTransition","isDismissible","node","navEl","broadcast","syncNavState","navOpen","navWidth","isDragging","persistNavState","padding","sticky","stickyFooter","handleMediaQueryChange","handleToggleClick","handleNavFocus","handleMainFocus","handleMouseEnter","handleMouseLeave","handleTransitionEnd","isNarrow","connectedCallback","super","listen","willUpdate","hasUpdated","render","adjustedNavWidth","html","classMap","isRTL","hasContent","styleMap","isEmpty","handleDropdownOpen","handleDropdownClose","handleNavClick","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","renderNavCollapse","handleMainClick","renderNavToggle","nothing","handleNavWidthChange","handleNavStateChange","prev","peekTimeoutId","clearTimeout","setTimeout","once","handleOpenChange","setNavWidth","Math","max","transition","e","defaultPrevented","target","el","localName","isNavItem","hasSubNav","isLTR","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","stickyStyle","style","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","observe","customElement"],"mappings":"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"}
package/lib/LocalizeController.js CHANGED
@@ -1,2 +1,2 @@
1
- import{isServer as n}from"lit";import{resolveTranslation as o,subscribe as t}from"./translation.js";import i from"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";const s=()=>{};class a{constructor(n,t={onLangChange:s}){this.host=n,this.options=t,this.handleLangChange=()=>{const n=o(this.lang);this.resolvedTranslation!==n&&(this.resolvedTranslation=n,this.options.onLangChange(),this.host.requestUpdate())},n.addController(this),this.resolvedTranslation=o(this.lang)}get lang(){return n?this.host.lang||"en-US":this.host.lang||document.documentElement.lang}get resolvedLang(){return this.resolvedTranslation.$lang}hostConnected(){this.unsubscribe=t(this.handleLangChange),this.options.onLangChange()}hostDisconnected(){var n;null===(n=this.unsubscribe)||void 0===n||n.call(this)}term(n,...o){var t,s;const{resolvedTranslation:a,resolvedLang:l}=this,r=this.host.localName;null==a[r]?console.warn(`NORD: Missing translations for component \`${r}\` in lang: \`${l}\``):null==a[r][n]&&console.warn(`NORD: Missing translation key \`${String(n)}\` for component \`${r}\` in lang \`${l}\``);const e=null!==(s=null===(t=a[r])||void 0===t?void 0:t[n])&&void 0!==s?s:i[r][n];return"function"==typeof e?e(...o):e}}export{a as LocalizeController};
1
+ import{isServer as t}from"lit";import{resolveTranslation as n,subscribeToTranslationRegistration as o,subscribeToDocumentLang as s}from"./translation.js";import i from"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";const a=()=>{};class l{constructor(t,o={onLangChange:a}){this.host=t,this.options=o,this.handleLangChange=()=>{const t=n(this.lang);this.resolvedTranslation!==t&&(this.resolvedTranslation=t,this.options.onLangChange(),this.host.requestUpdate())},t.addController(this),this.resolvedTranslation=n(this.lang)}get lang(){return t?this.host.lang||"en-US":this.host.lang||document.documentElement.lang}get resolvedLang(){return this.resolvedTranslation.$lang}hostConnected(){this.unsubscribeTranslationRegistration=o(this.handleLangChange);const t=n(this.lang);this.resolvedTranslation!==t&&(this.resolvedTranslation=t),this.host.getAttribute("lang")?(this.observer=new MutationObserver(this.handleLangChange),this.observer.observe(this.host,{attributes:!0,attributeFilter:["lang"]})):this.unsubscribeDocumentLang=s(this.handleLangChange),this.options.onLangChange()}hostDisconnected(){var t,n,o;null===(t=this.unsubscribeDocumentLang)||void 0===t||t.call(this),null===(n=this.unsubscribeTranslationRegistration)||void 0===n||n.call(this),null===(o=this.observer)||void 0===o||o.disconnect()}term(t,...n){var o,s;const{resolvedTranslation:a,resolvedLang:l}=this,e=this.host.localName;null==a[e]?console.warn(`NORD: Missing translations for component \`${e}\` in lang: \`${l}\``):null==a[e][t]&&console.warn(`NORD: Missing translation key \`${String(t)}\` for component \`${e}\` in lang \`${l}\``);const r=null!==(s=null===(o=a[e])||void 0===o?void 0:o[t])&&void 0!==s?s:i[e][t];return"function"==typeof r?r(...n):r}}export{l as LocalizeController};
2
2
  //# sourceMappingURL=LocalizeController.js.map
package/lib/LocalizeController.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"LocalizeController.js","sources":["../src/localization/LocalizeController.ts"],"sourcesContent":["import { isServer } from \"lit\"\nimport type { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { subscribe, resolveTranslation, Translation, WellKnownKeys, fallback } from \"./translation.js\"\n\n// helper types...\n\n// used to match any function\ntype Func = (...args: any[]) => any\n\n// if object property is function, use return type, else value type\ntype Result<Type, Key extends keyof Type> = Type[Key] extends Func ? ReturnType<Type[Key]> : Type[Key]\n\n// if object property is function,\ntype FuncParams<Type, K extends keyof Type> = Type[K] extends Func ? Parameters<Type[K]> : []\n\nconst noop = () => {\n // this function is intentionally left blank\n}\n\nexport class LocalizeController<TComponentName extends Exclude<keyof Translation, WellKnownKeys>>\n implements ReactiveController\n{\n private unsubscribe?: ReturnType<typeof subscribe>\n private resolvedTranslation: Translation\n\n constructor(\n private host: ReactiveControllerHost & HTMLElement,\n private options = { onLangChange: noop }\n ) {\n host.addController(this)\n this.resolvedTranslation = resolveTranslation(this.lang)\n }\n\n /**\n * The lang of the document or element, with element taking precedence\n */\n get lang() {\n if (isServer) {\n return this.host.lang || \"en-US\"\n }\n\n return this.host.lang || document.documentElement.lang\n }\n\n /**\n * The lang of the translation being applied.\n * This may not match the document/element lang, in case of fallback translation\n */\n get resolvedLang() {\n return this.resolvedTranslation.$lang\n }\n\n hostConnected() {\n this.unsubscribe = subscribe(this.handleLangChange)\n this.options.onLangChange()\n }\n\n hostDisconnected() {\n this.unsubscribe?.()\n }\n\n term<Key extends keyof Translation[TComponentName]>(\n key: Key,\n ...args: FuncParams<Translation[TComponentName], Key>\n ): Result<Translation[TComponentName], Key> {\n const { resolvedTranslation, resolvedLang } = this\n const component = this.host.localName as TComponentName\n\n /* eslint-disable no-console */\n if (resolvedTranslation[component] == null) {\n console.warn(`NORD: Missing translations for component \\`${component}\\` in lang: \\`${resolvedLang}\\``)\n } else if (resolvedTranslation[component][key] == null) {\n console.warn(\n `NORD: Missing translation key \\`${String(key)}\\` for component \\`${component}\\` in lang \\`${resolvedLang}\\``\n )\n }\n /* eslint-enable no-console */\n\n const t = resolvedTranslation[component]?.[key] ?? fallback[component][key]\n return typeof t === \"function\" ? t(...args) : t\n }\n\n private handleLangChange = () => {\n const resolved = resolveTranslation(this.lang)\n\n if (this.resolvedTranslation !== resolved) {\n this.resolvedTranslation = resolved\n\n this.options.onLangChange()\n this.host.requestUpdate()\n }\n }\n}\n"],"names":["noop","LocalizeController","constructor","host","options","onLangChange","this","handleLangChange","resolved","resolveTranslation","lang","resolvedTranslation","requestUpdate","addController","isServer","document","documentElement","resolvedLang","$lang","hostConnected","unsubscribe","subscribe","hostDisconnected","_a","call","term","key","args","component","localName","console","warn","String","t","_b","fallback"],"mappings":"gXAeA,MAAMA,EAAO,aAIAC,EAMX,WAAAC,CACUC,EACAC,EAAU,CAAEC,aAAcL,IAD1BM,KAAIH,KAAJA,EACAG,KAAOF,QAAPA,EAuDFE,KAAgBC,iBAAG,KACzB,MAAMC,EAAWC,EAAmBH,KAAKI,MAErCJ,KAAKK,sBAAwBH,IAC/BF,KAAKK,oBAAsBH,EAE3BF,KAAKF,QAAQC,eACbC,KAAKH,KAAKS,gBACX,EA7DDT,EAAKU,cAAcP,MACnBA,KAAKK,oBAAsBF,EAAmBH,KAAKI,KACpD,CAKD,QAAIA,GACF,OAAII,EACKR,KAAKH,KAAKO,MAAQ,QAGpBJ,KAAKH,KAAKO,MAAQK,SAASC,gBAAgBN,IACnD,CAMD,gBAAIO,GACF,OAAOX,KAAKK,oBAAoBO,KACjC,CAED,aAAAC,GACEb,KAAKc,YAAcC,EAAUf,KAAKC,kBAClCD,KAAKF,QAAQC,cACd,CAED,gBAAAiB,SACkB,QAAhBC,EAAAjB,KAAKc,mBAAW,IAAAG,GAAAA,EAAAC,KAAAlB,KACjB,CAED,IAAAmB,CACEC,KACGC,WAEH,MAAMhB,oBAAEA,EAAmBM,aAAEA,GAAiBX,KACxCsB,EAAYtB,KAAKH,KAAK0B,UAGU,MAAlClB,EAAoBiB,GACtBE,QAAQC,KAAK,8CAA8CH,kBAA0BX,OACrC,MAAvCN,EAAoBiB,GAAWF,IACxCI,QAAQC,KACN,mCAAmCC,OAAON,wBAA0BE,iBAAyBX,OAKjG,MAAMgB,EAAyC,QAArCC,EAA8B,UAA9BvB,EAAoBiB,UAAU,IAAAL,OAAA,EAAAA,EAAGG,UAAI,IAAAQ,EAAAA,EAAIC,EAASP,GAAWF,GACvE,MAAoB,mBAANO,EAAmBA,KAAKN,GAAQM,CAC/C"}
1
+ {"version":3,"file":"LocalizeController.js","sources":["../src/localization/LocalizeController.ts"],"sourcesContent":["import { isServer } from \"lit\"\nimport type { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport {\n subscribeToDocumentLang,\n subscribeToTranslationRegistration,\n resolveTranslation,\n Translation,\n WellKnownKeys,\n fallback,\n} from \"./translation.js\"\n\n// helper types...\n\n// used to match any function\ntype Func = (...args: any[]) => any\n\n// if object property is function, use return type, else value type\ntype Result<Type, Key extends keyof Type> = Type[Key] extends Func ? ReturnType<Type[Key]> : Type[Key]\n\n// if object property is function,\ntype FuncParams<Type, K extends keyof Type> = Type[K] extends Func ? Parameters<Type[K]> : []\n\nconst noop = () => {\n // this function is intentionally left blank\n}\n\nexport class LocalizeController<TComponentName extends Exclude<keyof Translation, WellKnownKeys>>\n implements ReactiveController\n{\n private unsubscribeDocumentLang?: ReturnType<typeof subscribeToDocumentLang>\n private unsubscribeTranslationRegistration?: ReturnType<typeof subscribeToTranslationRegistration>\n private observer?: MutationObserver\n private resolvedTranslation: Translation\n\n constructor(\n private host: ReactiveControllerHost & HTMLElement,\n private options = { onLangChange: noop }\n ) {\n host.addController(this)\n this.resolvedTranslation = resolveTranslation(this.lang)\n }\n\n /**\n * The lang of the document or element, with element taking precedence\n */\n get lang() {\n if (isServer) {\n return this.host.lang || \"en-US\"\n }\n\n return this.host.lang || document.documentElement.lang\n }\n\n /**\n * The lang of the translation being applied.\n * This may not match the document/element lang, in case of fallback translation\n */\n get resolvedLang() {\n return this.resolvedTranslation.$lang\n }\n\n hostConnected() {\n // Always subscribe to translation registration changes (for when new translations are registered)\n this.unsubscribeTranslationRegistration = subscribeToTranslationRegistration(this.handleLangChange)\n\n // Re-resolve translation now that the host is connected and attributes are set\n // This handles cases where the lang attribute is set after the constructor runs (e.g., in Vue)\n const resolved = resolveTranslation(this.lang)\n if (this.resolvedTranslation !== resolved) {\n this.resolvedTranslation = resolved\n }\n\n // If the host has its own `lang` attribute, create a local observer to watch for changes to that attribute\n if (this.host.getAttribute(\"lang\")) {\n this.observer = new MutationObserver(this.handleLangChange)\n this.observer.observe(this.host, {\n attributes: true,\n attributeFilter: [\"lang\"],\n })\n } else {\n // Otherwise, also subscribe to document language changes\n this.unsubscribeDocumentLang = subscribeToDocumentLang(this.handleLangChange)\n }\n\n this.options.onLangChange()\n }\n\n hostDisconnected() {\n this.unsubscribeDocumentLang?.()\n this.unsubscribeTranslationRegistration?.()\n this.observer?.disconnect()\n }\n\n term<Key extends keyof Translation[TComponentName]>(\n key: Key,\n ...args: FuncParams<Translation[TComponentName], Key>\n ): Result<Translation[TComponentName], Key> {\n const { resolvedTranslation, resolvedLang } = this\n const component = this.host.localName as TComponentName\n\n /* eslint-disable no-console */\n if (resolvedTranslation[component] == null) {\n console.warn(`NORD: Missing translations for component \\`${component}\\` in lang: \\`${resolvedLang}\\``)\n } else if (resolvedTranslation[component][key] == null) {\n console.warn(\n `NORD: Missing translation key \\`${String(key)}\\` for component \\`${component}\\` in lang \\`${resolvedLang}\\``\n )\n }\n /* eslint-enable no-console */\n\n const t = resolvedTranslation[component]?.[key] ?? fallback[component][key]\n return typeof t === \"function\" ? t(...args) : t\n }\n\n private handleLangChange = () => {\n const resolved = resolveTranslation(this.lang)\n\n if (this.resolvedTranslation !== resolved) {\n this.resolvedTranslation = resolved\n\n this.options.onLangChange()\n this.host.requestUpdate()\n }\n }\n}\n"],"names":["noop","LocalizeController","constructor","host","options","onLangChange","this","handleLangChange","resolved","resolveTranslation","lang","resolvedTranslation","requestUpdate","addController","isServer","document","documentElement","resolvedLang","$lang","hostConnected","unsubscribeTranslationRegistration","subscribeToTranslationRegistration","getAttribute","observer","MutationObserver","observe","attributes","attributeFilter","unsubscribeDocumentLang","subscribeToDocumentLang","hostDisconnected","_a","call","_b","_c","disconnect","term","key","args","component","localName","console","warn","String","t","fallback"],"mappings":"saAsBA,MAAMA,EAAO,aAIAC,EAQX,WAAAC,CACUC,EACAC,EAAU,CAAEC,aAAcL,IAD1BM,KAAIH,KAAJA,EACAG,KAAOF,QAAPA,EA8EFE,KAAgBC,iBAAG,KACzB,MAAMC,EAAWC,EAAmBH,KAAKI,MAErCJ,KAAKK,sBAAwBH,IAC/BF,KAAKK,oBAAsBH,EAE3BF,KAAKF,QAAQC,eACbC,KAAKH,KAAKS,gBACX,EApFDT,EAAKU,cAAcP,MACnBA,KAAKK,oBAAsBF,EAAmBH,KAAKI,KACpD,CAKD,QAAIA,GACF,OAAII,EACKR,KAAKH,KAAKO,MAAQ,QAGpBJ,KAAKH,KAAKO,MAAQK,SAASC,gBAAgBN,IACnD,CAMD,gBAAIO,GACF,OAAOX,KAAKK,oBAAoBO,KACjC,CAED,aAAAC,GAEEb,KAAKc,mCAAqCC,EAAmCf,KAAKC,kBAIlF,MAAMC,EAAWC,EAAmBH,KAAKI,MACrCJ,KAAKK,sBAAwBH,IAC/BF,KAAKK,oBAAsBH,GAIzBF,KAAKH,KAAKmB,aAAa,SACzBhB,KAAKiB,SAAW,IAAIC,iBAAiBlB,KAAKC,kBAC1CD,KAAKiB,SAASE,QAAQnB,KAAKH,KAAM,CAC/BuB,YAAY,EACZC,gBAAiB,CAAC,WAIpBrB,KAAKsB,wBAA0BC,EAAwBvB,KAAKC,kBAG9DD,KAAKF,QAAQC,cACd,CAED,gBAAAyB,aAC8B,QAA5BC,EAAAzB,KAAKsB,+BAAuB,IAAAG,GAAAA,EAAAC,KAAA1B,MACW,QAAvC2B,EAAA3B,KAAKc,0CAAkC,IAAAa,GAAAA,EAAAD,KAAA1B,MACxB,QAAf4B,EAAA5B,KAAKiB,gBAAU,IAAAW,GAAAA,EAAAC,YAChB,CAED,IAAAC,CACEC,KACGC,WAEH,MAAM3B,oBAAEA,EAAmBM,aAAEA,GAAiBX,KACxCiC,EAAYjC,KAAKH,KAAKqC,UAGU,MAAlC7B,EAAoB4B,GACtBE,QAAQC,KAAK,8CAA8CH,kBAA0BtB,OACrC,MAAvCN,EAAoB4B,GAAWF,IACxCI,QAAQC,KACN,mCAAmCC,OAAON,wBAA0BE,iBAAyBtB,OAKjG,MAAM2B,EAAyC,QAArCX,EAA8B,UAA9BtB,EAAoB4B,UAAU,IAAAR,OAAA,EAAAA,EAAGM,UAAI,IAAAJ,EAAAA,EAAIY,EAASN,GAAWF,GACvE,MAAoB,mBAANO,EAAmBA,KAAKN,GAAQM,CAC/C"}
package/lib/Modal.js CHANGED
@@ -1,2 +1,2 @@
1
- import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{css as n,LitElement as e,html as i}from"lit";import{query as a,property as t,customElement as l}from"lit/decorators.js";import{c as r}from"./interface-close-small-CnpAFMO3.js";import s from"./Icon.js";import{S as d}from"./SlotController-Z6eG7LSZ.js";import{o as p}from"./observe-D0n0zOfU.js";import{N as c}from"./events-Bv6wNHwJ.js";import{s as m}from"./Component-DSU3Qp0O.js";import{LocalizeController as v}from"./LocalizeController.js";import{ModalController as h}from"./ModalController.js";import"./Footer.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./cond-CI1KbneT.js";import"./IconManager.js";import"./EventController-BBOmvfLa.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./ScrollbarController-C5CMxfb3.js";const u=n`:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-padding-block:var(--n-modal-padding-block, var(--n-space-m));--_n-modal-focus-ring:0 0 0 2px var(--n-color-accent);--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 620px);color:var(--n-color-text);position:fixed;inset:0;visibility:hidden;transition:visibility var(--n-transition-slowly);z-index:var(--n-index-modal)}:host([open]){transition-property:none;visibility:visible}.n-modal-backdrop{position:fixed;inset:0;background:var(--n-color-overlay);transition:opacity var(--n-transition-slowly);padding:var(--n-space-l);padding-block-start:clamp(var(--n-space-l),min(10vh,10vw) - 1em,calc(var(--n-space-xxl) + var(--n-space-s)));overflow-y:auto}:host(:not([open])) .n-modal-backdrop{opacity:0}.n-modal{--n-footer-padding-inline:var(--_n-modal-padding-inline);--n-footer-background-color:transparent;--n-footer-box-shadow:none;position:relative;display:flex;flex-direction:column;inline-size:100%;max-inline-size:var(--_n-modal-max-inline-size);margin:auto;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-modal);border-radius:var(--n-border-radius);transition:opacity var(--n-transition-slowly),transform var(--n-transition-slowly)}.n-rounded-top{border-radius:var(--n-border-radius) var(--n-border-radius) 0 0}:host(:not([open])) .n-modal{transform:translateY(-10px) scale(.97);opacity:0}.n-modal:focus{outline:0}.n-modal-body{flex:1}.n-body-padded{display:block;padding:var(--n-space-l) var(--_n-modal-padding-inline) var(--n-space-xl)}.n-modal-header{display:flex;gap:var(--n-space-m);align-items:start;background:var(--n-color-header);border-block-end:1px solid var(--n-color-border)}.n-padded{padding:var(--_n-modal-padding-block) var(--_n-modal-padding-inline)}.n-close{border:none;display:flex;justify-content:center;align-items:center;block-size:var(--n-space-xl);inline-size:var(--n-space-xl);background-color:transparent;border-radius:var(--n-border-radius);inset-block-start:var(--n-space-s);inset-inline-end:var(--n-space-s);color:var(--n-color-text);cursor:pointer;transition:color var(--n-transition-quickly);position:relative}.n-close::after{content:"";position:absolute;display:block;inset:calc(var(--n-space-s) * -1);border-radius:var(--n-border-radius)}.n-close:not(:hover){color:var(--n-color-icon)}.n-close:active{transform:translateY(1px)}.n-close:focus{outline:0;box-shadow:var(--_n-modal-focus-ring)}@supports selector(:focus-visible){.n-close:focus{box-shadow:none}.n-close:focus-visible{box-shadow:var(--_n-modal-focus-ring)}}:host([scrollable]) .n-modal{max-block-size:100%}:host([scrollable]) .n-modal-body{overflow-y:auto}@media (min-width:489px){:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l))}:host([size="s"]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 440px)}:host([size="l"]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 940px)}:host([size=xl]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, none)}}slot[name]{display:flex}slot[name=header]{flex:1}slot[name=header]::slotted(*){margin:0!important;padding:0!important;font-size:var(--n-font-size-l)!important;font-weight:var(--n-font-weight-heading)!important;line-height:var(--n-line-height-heading)!important}slot[name=footer]{gap:var(--n-space-xs);flex-direction:column;inline-size:100%}slot[name=footer]::slotted(nord-button-group){--_n-button-group-flex-direction:column;--_n-button-group-max-inline-size:100%}@media (min-width:489px){slot[name=footer]{gap:var(--n-space-s);flex-direction:row;justify-content:flex-end;align-items:center}slot[name=footer]::slotted(nord-button-group){--_n-button-group-flex-direction:row;--_n-button-group-max-inline-size:max-content}}slot[name=feature]{overflow:hidden}slot[name=feature]::slotted(*){inline-size:100%;block-size:auto}`;s.registerIcon(r);let b=class extends e{constructor(){super(...arguments),this.defaultSlot=new d(this),this.headerSlot=new d(this,"header"),this.featureSlot=new d(this,"feature"),this.footerSlot=new d(this,"footer"),this.localize=new v(this),this.modalController=new h(this,{isOpen:()=>this.open,onDismiss:()=>this.handleDismiss(),dialog:()=>this.modal,backdrop:()=>this.backdrop,close:o=>this.close(o)}),this.open=!1,this.size="m",this.returnValue="",this.scrollable=!1}connectedCallback(){super.connectedCallback(),this.setAttribute("role","dialog")}showModal(){this.open=!0}close(o){this.open=!1,null!=o&&(this.returnValue=o),this.dispatchEvent(new c("close"))}focus(o){this.modal.focus({preventScroll:!0,...o})}render(){return i`<div class="n-modal-backdrop"><div class="n-modal" tabindex="0"><div class="n-modal-header n-rounded-top" ?hidden="${this.headerSlot.isEmpty}"><slot class="n-padded" name="${this.headerSlot.slotName}"></slot><button class="n-close" @click="${this.handleDismiss}"><nord-icon name="interface-close-small" size="s" label="${this.localize.term("closeLabel")}"></nord-icon></button></div><div class="n-modal-body"><slot name="${this.featureSlot.slotName}" class="${this.headerSlot.isEmpty?"n-rounded-top":""}" ?hidden="${this.featureSlot.isEmpty}"></slot><slot class="${this.defaultSlot.isEmpty?"":"n-body-padded"}"></slot></div><nord-footer ?hidden="${this.footerSlot.isEmpty}"><slot name="${this.footerSlot.slotName}"></slot></nord-footer></div></div>`}handleOpenUpdated(o){this.open?this.modalController.block():!0===o&&this.modalController.unblock()}handleDismiss(){this.dispatchEvent(new c("cancel",{cancelable:!0}))&&this.close()}};b.styles=[m,u],o([a(".n-modal",!0)],b.prototype,"modal",void 0),o([a(".n-modal-backdrop",!0)],b.prototype,"backdrop",void 0),o([t({type:Boolean,reflect:!0})],b.prototype,"open",void 0),o([t({reflect:!0})],b.prototype,"size",void 0),o([t({attribute:!1})],b.prototype,"returnValue",void 0),o([t({type:Boolean,reflect:!0})],b.prototype,"scrollable",void 0),o([p("open","updated")],b.prototype,"handleOpenUpdated",null),b=o([l("nord-modal")],b);var f=b;export{f as default};
1
+ import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{css as n,LitElement as e,html as i}from"lit";import{query as a,property as t,customElement as l}from"lit/decorators.js";import{c as r}from"./interface-close-small-CnpAFMO3.js";import s from"./Icon.js";import{S as d}from"./SlotController-Z6eG7LSZ.js";import{o as p}from"./observe-D0n0zOfU.js";import{N as c}from"./events-Bv6wNHwJ.js";import{s as m}from"./Component-DSU3Qp0O.js";import{LocalizeController as v}from"./LocalizeController.js";import{ModalController as h}from"./ModalController.js";import"./Footer.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./cond-CI1KbneT.js";import"./IconManager.js";import"./EventController-BBOmvfLa.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./ScrollbarController-C5CMxfb3.js";const u=n`:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-padding-block:var(--n-modal-padding-block, var(--n-space-m));--_n-modal-focus-ring:0 0 0 2px var(--n-color-accent);--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 620px);color:var(--n-color-text);position:fixed;inset:0;visibility:hidden;transition:visibility var(--n-transition-slowly);z-index:var(--n-index-modal)}:host([open]){transition-property:none;visibility:visible}.n-modal-backdrop{position:fixed;inset:0;background:var(--n-color-overlay);transition:opacity var(--n-transition-slowly);padding:var(--n-space-l);padding-block-start:clamp(var(--n-space-l),min(10vh,10vw) - 1em,calc(var(--n-space-xxl) + var(--n-space-s)));overflow-y:auto}:host(:not([open])) .n-modal-backdrop{opacity:0}.n-modal{--n-footer-padding-inline:var(--_n-modal-padding-inline);--n-footer-background-color:transparent;--n-footer-box-shadow:none;position:relative;display:flex;flex-direction:column;inline-size:100%;max-inline-size:var(--_n-modal-max-inline-size);margin:auto;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-modal);border-radius:var(--n-border-radius);overflow:hidden;transition:opacity var(--n-transition-slowly),transform var(--n-transition-slowly)}.n-rounded-top{border-radius:var(--n-border-radius) var(--n-border-radius) 0 0}:host(:not([open])) .n-modal{transform:translateY(-10px) scale(.97);opacity:0}.n-modal:focus{outline:0}.n-modal-body{flex:1}.n-body-padded{display:block;padding:var(--n-space-l) var(--_n-modal-padding-inline) var(--n-space-xl)}.n-modal-header{display:flex;gap:var(--n-space-m);align-items:start;background:var(--n-color-header);border-block-end:1px solid var(--n-color-border)}.n-padded{padding:var(--_n-modal-padding-block) var(--_n-modal-padding-inline)}.n-close{border:none;display:flex;justify-content:center;align-items:center;block-size:var(--n-space-xl);inline-size:var(--n-space-xl);background-color:transparent;border-radius:var(--n-border-radius);inset-block-start:var(--n-space-s);inset-inline-end:var(--n-space-s);color:var(--n-color-text);cursor:pointer;transition:color var(--n-transition-quickly);position:relative}.n-close::after{content:"";position:absolute;display:block;inset:calc(var(--n-space-s) * -1);border-radius:var(--n-border-radius)}.n-close:not(:hover){color:var(--n-color-icon)}.n-close:active{transform:translateY(1px)}.n-close:focus{outline:0;box-shadow:var(--_n-modal-focus-ring)}@supports selector(:focus-visible){.n-close:focus{box-shadow:none}.n-close:focus-visible{box-shadow:var(--_n-modal-focus-ring)}}:host([scrollable]) .n-modal{max-block-size:100%}:host([scrollable]) .n-modal-body{overflow-y:auto}@media (min-width:489px){:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l))}:host([size="s"]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 440px)}:host([size="l"]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 940px)}:host([size=xl]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, none)}}slot[name]{display:flex}slot[name=header]{flex:1}slot[name=header]::slotted(*){margin:0!important;padding:0!important;font-size:var(--n-font-size-l)!important;font-weight:var(--n-font-weight-heading)!important;line-height:var(--n-line-height-heading)!important}slot[name=footer]{gap:var(--n-space-xs);flex-direction:column;inline-size:100%}slot[name=footer]::slotted(nord-button-group){--_n-button-group-flex-direction:column;--_n-button-group-max-inline-size:100%}@media (min-width:489px){slot[name=footer]{gap:var(--n-space-s);flex-direction:row;justify-content:flex-end;align-items:center}slot[name=footer]::slotted(nord-button-group){--_n-button-group-flex-direction:row;--_n-button-group-max-inline-size:max-content}}slot[name=feature]{overflow:hidden}slot[name=feature]::slotted(*){inline-size:100%;block-size:auto}`;s.registerIcon(r);let f=class extends e{constructor(){super(...arguments),this.defaultSlot=new d(this),this.headerSlot=new d(this,"header"),this.featureSlot=new d(this,"feature"),this.footerSlot=new d(this,"footer"),this.localize=new v(this),this.modalController=new h(this,{isOpen:()=>this.open,onDismiss:()=>this.handleDismiss(),dialog:()=>this.modal,backdrop:()=>this.backdrop,close:o=>this.close(o)}),this.open=!1,this.size="m",this.returnValue="",this.scrollable=!1}connectedCallback(){super.connectedCallback(),this.setAttribute("role","dialog")}showModal(){this.open=!0}close(o){this.open=!1,null!=o&&(this.returnValue=o),this.dispatchEvent(new c("close"))}focus(o){this.modal.focus({preventScroll:!0,...o})}render(){return i`<div class="n-modal-backdrop"><div class="n-modal" tabindex="0"><div class="n-modal-header n-rounded-top" ?hidden="${this.headerSlot.isEmpty}"><slot class="n-padded" name="${this.headerSlot.slotName}"></slot><button class="n-close" @click="${this.handleDismiss}"><nord-icon name="interface-close-small" size="s" label="${this.localize.term("closeLabel")}"></nord-icon></button></div><div class="n-modal-body"><slot name="${this.featureSlot.slotName}" class="${this.headerSlot.isEmpty?"n-rounded-top":""}" ?hidden="${this.featureSlot.isEmpty}"></slot><slot class="${this.defaultSlot.isEmpty?"":"n-body-padded"}"></slot></div><nord-footer ?hidden="${this.footerSlot.isEmpty}"><slot name="${this.footerSlot.slotName}"></slot></nord-footer></div></div>`}handleOpenUpdated(o){this.open?this.modalController.block():!0===o&&this.modalController.unblock()}handleDismiss(){this.dispatchEvent(new c("cancel",{cancelable:!0}))&&this.close()}};f.styles=[m,u],o([a(".n-modal",!0)],f.prototype,"modal",void 0),o([a(".n-modal-backdrop",!0)],f.prototype,"backdrop",void 0),o([t({type:Boolean,reflect:!0})],f.prototype,"open",void 0),o([t({reflect:!0})],f.prototype,"size",void 0),o([t({attribute:!1})],f.prototype,"returnValue",void 0),o([t({type:Boolean,reflect:!0})],f.prototype,"scrollable",void 0),o([p("open","updated")],f.prototype,"handleOpenUpdated",null),f=o([l("nord-modal")],f);var b=f;export{b as default};
2
2
  //# sourceMappingURL=Modal.js.map
package/lib/Modal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.js","sources":["../src/modal/Modal.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close-small.js\"\n\nimport Icon from \"../icon/Icon.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { NordEvent } from \"../common/events.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\nimport style from \"./Modal.css\"\nimport { ModalController } from \"./ModalController.js\"\n\nimport \"../footer/Footer.js\"\n\nIcon.registerIcon(closeIcon)\n\n/**\n * Modal component is used to display content that temporarily blocks interactions\n * with the main view of an application. Modal should be used sparingly and\n * only when necessary.\n *\n * @status ready\n * @category overlay\n * @slot - Default slot\n * @slot header - Slot which holds the header of the modal, positioned next to the close button.\n * @slot feature - Slot for full bleed content like an image.\n * @slot footer - Slot which is typically used to hold call to action buttons, but can also be used to build custom footers.\n * @fires cancel - Dispatched before the modal has closed when a user attempts to dismiss a modal. Call `preventDefault()` on the event to prevent the modal closing.\n * @fires close - Dispatched when a modal is closed for any reason.\n *\n * @cssprop [--n-modal-padding-inline=var(--n-space-m)] - Controls the padding on the sides of the modal, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-modal-padding-block=var(--n-space-m)] - Controls the padding above and below the header of the modal, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-modal-max-inline-size=620px] - Controls the width of the modal.\n *\n * @localization closeLabel - Accessible label for the close button.\n */\n@customElement(\"nord-modal\")\nexport default class Modal extends LitElement {\n static styles = [componentStyle, style]\n\n @query(\".n-modal\", true) private modal!: HTMLDivElement\n @query(\".n-modal-backdrop\", true) private backdrop!: HTMLDivElement\n\n private defaultSlot = new SlotController(this)\n private headerSlot = new SlotController(this, \"header\")\n private featureSlot = new SlotController(this, \"feature\")\n private footerSlot = new SlotController(this, \"footer\")\n\n private localize = new LocalizeController<\"nord-modal\">(this)\n private modalController = new ModalController(this, {\n isOpen: () => this.open,\n onDismiss: () => this.handleDismiss(),\n dialog: () => this.modal,\n backdrop: () => this.backdrop,\n close: returnValue => this.close(returnValue),\n })\n\n /**\n * Controls whether the modal is open or not.\n */\n @property({ type: Boolean, reflect: true }) open = false\n\n /**\n * Controls the max-width of the modal when open.\n */\n @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" | \"xl\" = \"m\"\n\n /**\n * The reason why the modal was closed. This typically indicates\n * which button the user pressed to close the modal, though any value\n * can be supplied if the modal is programmatically closed.\n */\n @property({ attribute: false }) returnValue: string = \"\"\n\n /**\n * By default if a modal is too big for the browser window,\n * the entire modal will scroll. This setting changes that behavior\n * so that the body of the modal scrolls instead, with the modal\n * itself remaining fixed.\n */\n @property({ type: Boolean, reflect: true }) scrollable = false\n\n connectedCallback(): void {\n super.connectedCallback()\n\n this.setAttribute(\"role\", \"dialog\")\n }\n\n /**\n * Show the modal, automatically moving focus to the modal or a child\n * element with an `autofocus` attribute.\n */\n showModal() {\n this.open = true\n }\n\n /**\n * Programmatically close the modal.\n * @param returnValue An optional value to indicate why the modal was closed.\n */\n close(returnValue?: string) {\n this.open = false\n\n if (returnValue != null) {\n this.returnValue = returnValue\n }\n\n this.dispatchEvent(new NordEvent(\"close\"))\n }\n\n /**\n * Programmatically focus the modal.\n * @param options An object which controls aspects of the focusing process.\n */\n focus(options?: FocusOptions) {\n this.modal.focus({ preventScroll: true, ...options })\n }\n\n render() {\n return html`\n <div class=\"n-modal-backdrop\">\n <div class=\"n-modal\" tabindex=\"0\">\n <div class=\"n-modal-header n-rounded-top\" ?hidden=${this.headerSlot.isEmpty}>\n <slot class=\"n-padded\" name=${this.headerSlot.slotName}></slot>\n <button class=\"n-close\" @click=${this.handleDismiss}>\n <nord-icon name=\"interface-close-small\" size=\"s\" label=${this.localize.term(\"closeLabel\")}></nord-icon>\n </button>\n </div>\n\n <div class=\"n-modal-body\">\n <slot\n name=${this.featureSlot.slotName}\n class=${this.headerSlot.isEmpty ? \"n-rounded-top\" : \"\"}\n ?hidden=${this.featureSlot.isEmpty}\n ></slot>\n <slot class=${this.defaultSlot.isEmpty ? \"\" : \"n-body-padded\"}></slot>\n </div>\n\n <nord-footer ?hidden=${this.footerSlot.isEmpty}>\n <slot name=${this.footerSlot.slotName}></slot>\n </nord-footer>\n </div>\n </div>\n `\n }\n\n @observe(\"open\", \"updated\")\n protected handleOpenUpdated(prev: boolean) {\n if (this.open) {\n this.modalController.block()\n } else if (prev === true) {\n this.modalController.unblock()\n }\n }\n\n private handleDismiss() {\n // allow cancelling of close\n const allowed = this.dispatchEvent(new NordEvent(\"cancel\", { cancelable: true }))\n\n if (allowed) {\n this.close()\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-modal\": Modal\n }\n}\n"],"names":["Icon","registerIcon","closeIcon","Modal","LitElement","constructor","this","defaultSlot","SlotController","headerSlot","featureSlot","footerSlot","localize","LocalizeController","modalController","ModalController","isOpen","open","onDismiss","handleDismiss","dialog","modal","backdrop","close","returnValue","size","scrollable","connectedCallback","super","setAttribute","showModal","dispatchEvent","NordEvent","focus","options","preventScroll","render","html","isEmpty","slotName","term","handleOpenUpdated","prev","block","unblock","cancelable","styles","componentStyle","style","__decorate","query","prototype","property","type","Boolean","reflect","attribute","observe","customElement"],"mappings":"soKAgBAA,EAAKC,aAAaC,GAuBH,IAAMC,EAAN,cAAoBC,EAApB,WAAAC,uBAMLC,KAAAC,YAAc,IAAIC,EAAeF,MACjCA,KAAUG,WAAG,IAAID,EAAeF,KAAM,UACtCA,KAAWI,YAAG,IAAIF,EAAeF,KAAM,WACvCA,KAAUK,WAAG,IAAIH,EAAeF,KAAM,UAEtCA,KAAAM,SAAW,IAAIC,EAAiCP,MAChDA,KAAAQ,gBAAkB,IAAIC,EAAgBT,KAAM,CAClDU,OAAQ,IAAMV,KAAKW,KACnBC,UAAW,IAAMZ,KAAKa,gBACtBC,OAAQ,IAAMd,KAAKe,MACnBC,SAAU,IAAMhB,KAAKgB,SACrBC,MAAOC,GAAelB,KAAKiB,MAAMC,KAMSlB,KAAIW,MAAG,EAKtBX,KAAImB,KAA2B,IAO5BnB,KAAWkB,YAAW,GAQVlB,KAAUoB,YAAG,CAmF1D,CAjFC,iBAAAC,GACEC,MAAMD,oBAENrB,KAAKuB,aAAa,OAAQ,SAC3B,CAMD,SAAAC,GACExB,KAAKW,MAAO,CACb,CAMD,KAAAM,CAAMC,GACJlB,KAAKW,MAAO,EAEO,MAAfO,IACFlB,KAAKkB,YAAcA,GAGrBlB,KAAKyB,cAAc,IAAIC,EAAU,SAClC,CAMD,KAAAC,CAAMC,GACJ5B,KAAKe,MAAMY,MAAM,CAAEE,eAAe,KAASD,GAC5C,CAED,MAAAE,GACE,OAAOC,CAAI,sHAG+C/B,KAAKG,WAAW6B,yCACpChC,KAAKG,WAAW8B,oDACbjC,KAAKa,0EACqBb,KAAKM,SAAS4B,KAAK,mFAMrElC,KAAKI,YAAY6B,oBAChBjC,KAAKG,WAAW6B,QAAU,gBAAkB,gBAC1ChC,KAAKI,YAAY4B,gCAEfhC,KAAKC,YAAY+B,QAAU,GAAK,uDAGzBhC,KAAKK,WAAW2B,wBACxBhC,KAAKK,WAAW4B,6CAKtC,CAGS,iBAAAE,CAAkBC,GACtBpC,KAAKW,KACPX,KAAKQ,gBAAgB6B,SACH,IAATD,GACTpC,KAAKQ,gBAAgB8B,SAExB,CAEO,aAAAzB,GAEUb,KAAKyB,cAAc,IAAIC,EAAU,SAAU,CAAEa,YAAY,MAGvEvC,KAAKiB,OAER,GA5HMpB,EAAA2C,OAAS,CAACC,EAAgBC,GAEAC,EAAA,CAAhCC,EAAM,YAAY,IAAoC/C,EAAAgD,UAAA,aAAA,GACbF,EAAA,CAAzCC,EAAM,qBAAqB,IAAuC/C,EAAAgD,UAAA,gBAAA,GAmBvBF,EAAA,CAA3CG,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAoBpD,EAAAgD,UAAA,YAAA,GAK3BF,EAAA,CAA5BG,EAAS,CAAEG,SAAS,KAA0CpD,EAAAgD,UAAA,YAAA,GAO/BF,EAAA,CAA/BG,EAAS,CAAEI,WAAW,KAAiCrD,EAAAgD,UAAA,mBAAA,GAQZF,EAAA,CAA3CG,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAA0BpD,EAAAgD,UAAA,kBAAA,GAmEpDF,EAAA,CADTQ,EAAQ,OAAQ,YAOhBtD,EAAAgD,UAAA,oBAAA,MApHkBhD,EAAK8C,EAAA,CADzBS,EAAc,eACMvD,SAAAA"}
1
+ {"version":3,"file":"Modal.js","sources":["../src/modal/Modal.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close-small.js\"\n\nimport Icon from \"../icon/Icon.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { NordEvent } from \"../common/events.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\nimport style from \"./Modal.css\"\nimport { ModalController } from \"./ModalController.js\"\n\nimport \"../footer/Footer.js\"\n\nIcon.registerIcon(closeIcon)\n\n/**\n * Modal component is used to display content that temporarily blocks interactions\n * with the main view of an application. Modal should be used sparingly and\n * only when necessary.\n *\n * @status ready\n * @category overlay\n * @slot - Default slot\n * @slot header - Slot which holds the header of the modal, positioned next to the close button.\n * @slot feature - Slot for full bleed content like an image.\n * @slot footer - Slot which is typically used to hold call to action buttons, but can also be used to build custom footers.\n * @fires cancel - Dispatched before the modal has closed when a user attempts to dismiss a modal. Call `preventDefault()` on the event to prevent the modal closing.\n * @fires close - Dispatched when a modal is closed for any reason.\n *\n * @cssprop [--n-modal-padding-inline=var(--n-space-m)] - Controls the padding on the sides of the modal, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-modal-padding-block=var(--n-space-m)] - Controls the padding above and below the header of the modal, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-modal-max-inline-size=620px] - Controls the width of the modal.\n *\n * @localization closeLabel - Accessible label for the close button.\n */\n@customElement(\"nord-modal\")\nexport default class Modal extends LitElement {\n static styles = [componentStyle, style]\n\n @query(\".n-modal\", true) private modal!: HTMLDivElement\n @query(\".n-modal-backdrop\", true) private backdrop!: HTMLDivElement\n\n private defaultSlot = new SlotController(this)\n private headerSlot = new SlotController(this, \"header\")\n private featureSlot = new SlotController(this, \"feature\")\n private footerSlot = new SlotController(this, \"footer\")\n\n private localize = new LocalizeController<\"nord-modal\">(this)\n private modalController = new ModalController(this, {\n isOpen: () => this.open,\n onDismiss: () => this.handleDismiss(),\n dialog: () => this.modal,\n backdrop: () => this.backdrop,\n close: returnValue => this.close(returnValue),\n })\n\n /**\n * Controls whether the modal is open or not.\n */\n @property({ type: Boolean, reflect: true }) open = false\n\n /**\n * Controls the max-width of the modal when open.\n */\n @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" | \"xl\" = \"m\"\n\n /**\n * The reason why the modal was closed. This typically indicates\n * which button the user pressed to close the modal, though any value\n * can be supplied if the modal is programmatically closed.\n */\n @property({ attribute: false }) returnValue: string = \"\"\n\n /**\n * By default if a modal is too big for the browser window,\n * the entire modal will scroll. This setting changes that behavior\n * so that the body of the modal scrolls instead, with the modal\n * itself remaining fixed.\n */\n @property({ type: Boolean, reflect: true }) scrollable = false\n\n connectedCallback(): void {\n super.connectedCallback()\n\n this.setAttribute(\"role\", \"dialog\")\n }\n\n /**\n * Show the modal, automatically moving focus to the modal or a child\n * element with an `autofocus` attribute.\n */\n showModal() {\n this.open = true\n }\n\n /**\n * Programmatically close the modal.\n * @param returnValue An optional value to indicate why the modal was closed.\n */\n close(returnValue?: string) {\n this.open = false\n\n if (returnValue != null) {\n this.returnValue = returnValue\n }\n\n this.dispatchEvent(new NordEvent(\"close\"))\n }\n\n /**\n * Programmatically focus the modal.\n * @param options An object which controls aspects of the focusing process.\n */\n focus(options?: FocusOptions) {\n this.modal.focus({ preventScroll: true, ...options })\n }\n\n render() {\n return html`\n <div class=\"n-modal-backdrop\">\n <div class=\"n-modal\" tabindex=\"0\">\n <div class=\"n-modal-header n-rounded-top\" ?hidden=${this.headerSlot.isEmpty}>\n <slot class=\"n-padded\" name=${this.headerSlot.slotName}></slot>\n <button class=\"n-close\" @click=${this.handleDismiss}>\n <nord-icon name=\"interface-close-small\" size=\"s\" label=${this.localize.term(\"closeLabel\")}></nord-icon>\n </button>\n </div>\n\n <div class=\"n-modal-body\">\n <slot\n name=${this.featureSlot.slotName}\n class=${this.headerSlot.isEmpty ? \"n-rounded-top\" : \"\"}\n ?hidden=${this.featureSlot.isEmpty}\n ></slot>\n <slot class=${this.defaultSlot.isEmpty ? \"\" : \"n-body-padded\"}></slot>\n </div>\n\n <nord-footer ?hidden=${this.footerSlot.isEmpty}>\n <slot name=${this.footerSlot.slotName}></slot>\n </nord-footer>\n </div>\n </div>\n `\n }\n\n @observe(\"open\", \"updated\")\n protected handleOpenUpdated(prev: boolean) {\n if (this.open) {\n this.modalController.block()\n } else if (prev === true) {\n this.modalController.unblock()\n }\n }\n\n private handleDismiss() {\n // allow cancelling of close\n const allowed = this.dispatchEvent(new NordEvent(\"cancel\", { cancelable: true }))\n\n if (allowed) {\n this.close()\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-modal\": Modal\n }\n}\n"],"names":["Icon","registerIcon","closeIcon","Modal","LitElement","constructor","this","defaultSlot","SlotController","headerSlot","featureSlot","footerSlot","localize","LocalizeController","modalController","ModalController","isOpen","open","onDismiss","handleDismiss","dialog","modal","backdrop","close","returnValue","size","scrollable","connectedCallback","super","setAttribute","showModal","dispatchEvent","NordEvent","focus","options","preventScroll","render","html","isEmpty","slotName","term","handleOpenUpdated","prev","block","unblock","cancelable","styles","componentStyle","style","__decorate","query","prototype","property","type","Boolean","reflect","attribute","observe","customElement"],"mappings":"spKAgBAA,EAAKC,aAAaC,GAuBH,IAAMC,EAAN,cAAoBC,EAApB,WAAAC,uBAMLC,KAAAC,YAAc,IAAIC,EAAeF,MACjCA,KAAUG,WAAG,IAAID,EAAeF,KAAM,UACtCA,KAAWI,YAAG,IAAIF,EAAeF,KAAM,WACvCA,KAAUK,WAAG,IAAIH,EAAeF,KAAM,UAEtCA,KAAAM,SAAW,IAAIC,EAAiCP,MAChDA,KAAAQ,gBAAkB,IAAIC,EAAgBT,KAAM,CAClDU,OAAQ,IAAMV,KAAKW,KACnBC,UAAW,IAAMZ,KAAKa,gBACtBC,OAAQ,IAAMd,KAAKe,MACnBC,SAAU,IAAMhB,KAAKgB,SACrBC,MAAOC,GAAelB,KAAKiB,MAAMC,KAMSlB,KAAIW,MAAG,EAKtBX,KAAImB,KAA2B,IAO5BnB,KAAWkB,YAAW,GAQVlB,KAAUoB,YAAG,CAmF1D,CAjFC,iBAAAC,GACEC,MAAMD,oBAENrB,KAAKuB,aAAa,OAAQ,SAC3B,CAMD,SAAAC,GACExB,KAAKW,MAAO,CACb,CAMD,KAAAM,CAAMC,GACJlB,KAAKW,MAAO,EAEO,MAAfO,IACFlB,KAAKkB,YAAcA,GAGrBlB,KAAKyB,cAAc,IAAIC,EAAU,SAClC,CAMD,KAAAC,CAAMC,GACJ5B,KAAKe,MAAMY,MAAM,CAAEE,eAAe,KAASD,GAC5C,CAED,MAAAE,GACE,OAAOC,CAAI,sHAG+C/B,KAAKG,WAAW6B,yCACpChC,KAAKG,WAAW8B,oDACbjC,KAAKa,0EACqBb,KAAKM,SAAS4B,KAAK,mFAMrElC,KAAKI,YAAY6B,oBAChBjC,KAAKG,WAAW6B,QAAU,gBAAkB,gBAC1ChC,KAAKI,YAAY4B,gCAEfhC,KAAKC,YAAY+B,QAAU,GAAK,uDAGzBhC,KAAKK,WAAW2B,wBACxBhC,KAAKK,WAAW4B,6CAKtC,CAGS,iBAAAE,CAAkBC,GACtBpC,KAAKW,KACPX,KAAKQ,gBAAgB6B,SACH,IAATD,GACTpC,KAAKQ,gBAAgB8B,SAExB,CAEO,aAAAzB,GAEUb,KAAKyB,cAAc,IAAIC,EAAU,SAAU,CAAEa,YAAY,MAGvEvC,KAAKiB,OAER,GA5HMpB,EAAA2C,OAAS,CAACC,EAAgBC,GAEAC,EAAA,CAAhCC,EAAM,YAAY,IAAoC/C,EAAAgD,UAAA,aAAA,GACbF,EAAA,CAAzCC,EAAM,qBAAqB,IAAuC/C,EAAAgD,UAAA,gBAAA,GAmBvBF,EAAA,CAA3CG,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAoBpD,EAAAgD,UAAA,YAAA,GAK3BF,EAAA,CAA5BG,EAAS,CAAEG,SAAS,KAA0CpD,EAAAgD,UAAA,YAAA,GAO/BF,EAAA,CAA/BG,EAAS,CAAEI,WAAW,KAAiCrD,EAAAgD,UAAA,mBAAA,GAQZF,EAAA,CAA3CG,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAA0BpD,EAAAgD,UAAA,kBAAA,GAmEpDF,EAAA,CADTQ,EAAQ,OAAQ,YAOhBtD,EAAAgD,UAAA,oBAAA,MApHkBhD,EAAK8C,EAAA,CADzBS,EAAc,eACMvD,SAAAA"}
package/lib/Select.js CHANGED
@@ -1,2 +1,2 @@
1
- import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as o,html as e,isServer as n,LitElement as r}from"lit";import{property as i,customElement as s}from"lit/decorators.js";import{ifDefined as l}from"lit/directives/if-defined.js";import{ref as a}from"lit/directives/ref.js";import"./Button.js";import c from"./Icon.js";import{I as d}from"./InputMixin-LetXsCyv.js";import{F as p}from"./FocusableMixin-BlQLNPdJ.js";import{F as u}from"./FormAssociatedMixin-DFL7yabe.js";import{A as b}from"./AutocompleteMixin-D8eiOxvO.js";import{S as m}from"./SizeMixin-CU9cLbLC.js";import{s as v}from"./Component-DSU3Qp0O.js";import{s as h}from"./FormField-CUC_H-0e.js";import{S as f}from"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"./LightDomController-DIwtVelV.js";import"./cond-CI1KbneT.js";import"./Spinner.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";import"./observe-D0n0zOfU.js";import"./FormDataController-OUt5L5uC.js";import"./events-Bv6wNHwJ.js";import"./VisuallyHidden.js";var x=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m14.0864 12.0402 1.8138 1.8137-4.7724 4.7724c-.2573.2573-.5789.373-.9133.373-.33447 0-.65606-.1286-.91333-.373l-4.77238-4.7724 1.81377-1.8137 3.85904 3.859 3.8591-3.859zm-3.859-7.93687 3.859 3.85907 1.8138-1.81376-4.7724-4.77238c-.5017-.50168-1.31208-.50168-1.81376 0l-4.77238 4.77238 1.81376 1.81376 3.85908-3.85907z" fill="currentColor"/></svg>',tags:"nordicon small interface dropdown select arrow up down caret triangle chevron",title:"interface-dropdown-small"});const g=o`:host{--_n-select-inline-size:var(--n-select-inline-size, fit-content);--_n-select-block-size:var(--n-select-block-size, var(--n-space-xl))}.n-select-container{position:relative;inline-size:fit-content}:host([expand]){inline-size:100%}:host([expand]) .n-select-container{inline-size:100%}select{-webkit-appearance:none;appearance:none;position:absolute;font-size:var(--n-font-size-m);font-family:var(--n-font-family);color:var(--n-color-text);inline-size:100%;opacity:.0001;cursor:pointer;background:0 0;border:0;block-size:var(--_n-select-block-size);inset-block-end:0;inset-inline-start:0;z-index:var(--n-index-default)}option{color:initial}nord-button{--n-button-text-align:start}nord-button:not([expand]){--_n-button-inline-size:var(--_n-select-inline-size)}nord-icon{color:var(--n-color-icon)}.n-label-container:hover+.n-select-container nord-button,select:hover+nord-button{--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-hover));--_n-button-background-color:var(--n-button-background-color, var(--n-color-button-hover))}select:focus+nord-button{--n-button-border-color:var(--n-color-accent);--n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([disabled]){cursor:auto;pointer-events:none}:host([disabled]) nord-button{--n-input-border-color:var(--n-color-active);--_n-button-color:var(--n-color-text-weakest);--_n-button-background-color:var(--n-color-active);--_n-button-opacity:1}:host([disabled]) nord-icon{color:var(--n-color-text-weakest)}::slotted(:not([slot])){display:none}select[aria-invalid=true]+nord-button{--n-button-border-color:var(--n-color-status-danger)}`;c.registerIcon(x);let j=class extends(m(u(b(d(p(r)))))){constructor(){super(...arguments),this.defaultSlot=new f(this),this.inputId="select",this.expand=!1}get formValue(){return this.value||void 0}render(){const t=this.options,o=this.getButtonText(t);return e`<slot></slot>${this.renderLabel()}<div class="n-select-container"><select ${a(this.focusableRef)} id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" name="${l(this.name)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${l(this.getDescribedBy())}" aria-invalid="${l(this.getInvalid())}" autocomplete="${this.autocomplete}">${this.placeholder&&e`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${t.map((t=>this.renderOption(t)))}</select><nord-button size="${this.size}" ?disabled="${this.disabled}" ?expand="${this.expand}" type="button" inert><slot slot="start" name="icon"></slot>${o}<nord-icon slot="end" name="interface-dropdown-small"></nord-icon></nord-button></div>${this.renderError()}`}get options(){return n?[]:Array.from(this.querySelectorAll("option"))}getButtonText(t){const o=t.find((t=>t.value===this.value.toString()));return o?o.text:this.placeholder?this.placeholder:t[0]?t[0].text:""}renderOption(t){return e`<option value="${l(t.value)}" ?disabled="${t.disabled}" .selected="${t.value===this.value.toString()}">${t.text}</option>`}};j.styles=[v,h,g],t([i({reflect:!0,type:Boolean})],j.prototype,"expand",void 0),j=t([s("nord-select")],j);var $=j;export{$ as default};
1
+ import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as o,isServer as n,LitElement as r}from"lit";import{property as i,customElement as s}from"lit/decorators.js";import{ifDefined as l}from"lit/directives/if-defined.js";import{ref as a}from"lit/directives/ref.js";import"./Button.js";import c from"./Icon.js";import{I as d}from"./InputMixin-LetXsCyv.js";import{F as p}from"./FocusableMixin-BlQLNPdJ.js";import{F as u}from"./FormAssociatedMixin-DFL7yabe.js";import{A as b}from"./AutocompleteMixin-D8eiOxvO.js";import{S as v}from"./SizeMixin-CU9cLbLC.js";import{s as h}from"./Component-DSU3Qp0O.js";import{s as m}from"./FormField-CUC_H-0e.js";import{S as f}from"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"./LightDomController-DIwtVelV.js";import"./cond-CI1KbneT.js";import"./Spinner.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";import"./observe-D0n0zOfU.js";import"./FormDataController-OUt5L5uC.js";import"./events-Bv6wNHwJ.js";import"./VisuallyHidden.js";var x=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m14.0864 12.0402 1.8138 1.8137-4.7724 4.7724c-.2573.2573-.5789.373-.9133.373-.33447 0-.65606-.1286-.91333-.373l-4.77238-4.7724 1.81377-1.8137 3.85904 3.859 3.8591-3.859zm-3.859-7.93687 3.859 3.85907 1.8138-1.81376-4.7724-4.77238c-.5017-.50168-1.31208-.50168-1.81376 0l-4.77238 4.77238 1.81376 1.81376 3.85908-3.85907z" fill="currentColor"/></svg>',tags:"nordicon small interface dropdown select arrow up down caret triangle chevron",title:"interface-dropdown-small"});const g=e`:host{--_n-select-inline-size:var(--n-select-inline-size, fit-content);--_n-select-block-size:var(--n-select-block-size, var(--n-space-xl))}.n-select-container{position:relative;inline-size:fit-content}:host([expand]){inline-size:100%}:host([expand]) .n-select-container{inline-size:100%}select{-webkit-appearance:none;appearance:none;position:absolute;font-size:var(--n-font-size-m);font-family:var(--n-font-family);color:var(--n-color-text);inline-size:100%;opacity:.0001;cursor:pointer;background:0 0;border:0;block-size:var(--_n-select-block-size);inset-block-end:0;inset-inline-start:0;z-index:var(--n-index-default)}option{color:initial}nord-button{--n-button-text-align:start}nord-button:not([expand]){--_n-button-inline-size:var(--_n-select-inline-size)}nord-icon{color:var(--n-color-icon)}.n-label-container:hover+.n-select-container nord-button,select:hover+nord-button{--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-hover));--_n-button-background-color:var(--n-button-background-color, var(--n-color-button-hover))}select:focus+nord-button{--n-button-border-color:var(--n-color-accent);--n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([disabled]){cursor:auto;pointer-events:none}:host([disabled]) nord-button{--n-input-border-color:var(--n-color-active);--_n-button-color:var(--n-color-text-weakest);--_n-button-background-color:var(--n-color-active);--_n-button-opacity:1}:host([disabled]) nord-icon{color:var(--n-color-text-weakest)}::slotted(:not([slot])){display:none}select[aria-invalid=true]+nord-button{--n-button-border-color:var(--n-color-status-danger)}`;c.registerIcon(x);let j=class extends(v(u(b(d(p(r)))))){constructor(){super(...arguments),this.defaultSlot=new f(this),this.inputId="select",this.expand=!1}get formValue(){return this.value||void 0}firstUpdated(){this.setupOptionObserver()}connectedCallback(){super.connectedCallback(),this.hasUpdated&&!this.optionObserver&&this.setupOptionObserver()}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.optionObserver)||void 0===t||t.disconnect(),this.optionObserver=void 0}setupOptionObserver(){this.optionObserver||(this.optionObserver=new MutationObserver((()=>this.requestUpdate())),this.optionObserver.observe(this,{subtree:!0,childList:!0,characterData:!0}))}render(){const t=this.options,e=this.getButtonText(t);return o`<slot></slot>${this.renderLabel()}<div class="n-select-container"><select ${a(this.focusableRef)} id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" name="${l(this.name)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${l(this.getDescribedBy())}" aria-invalid="${l(this.getInvalid())}" autocomplete="${this.autocomplete}">${this.placeholder&&o`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${t.map((t=>this.renderOption(t)))}</select><nord-button size="${this.size}" ?disabled="${this.disabled}" ?expand="${this.expand}" type="button" inert><slot slot="start" name="icon"></slot>${e}<nord-icon slot="end" name="interface-dropdown-small"></nord-icon></nord-button></div>${this.renderError()}`}get options(){return n?[]:Array.from(this.querySelectorAll("option"))}getButtonText(t){const e=t.find((t=>t.value===this.value.toString()));return e?e.text:this.placeholder?this.placeholder:t[0]?t[0].text:""}renderOption(t){return o`<option value="${l(t.value)}" ?disabled="${t.disabled}" .selected="${t.value===this.value.toString()}">${t.text}</option>`}};j.styles=[h,m,g],t([i({reflect:!0,type:Boolean})],j.prototype,"expand",void 0),j=t([s("nord-select")],j);var $=j;export{$ as default};
2
2
  //# sourceMappingURL=Select.js.map