@nordhealth/components 4.26.1 → 4.26.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +7235 -6847
- package/lib/ButtonGroup.js +1 -1
- package/lib/ButtonGroup.js.map +1 -1
- package/lib/DatePicker.js +1 -1
- package/lib/Drawer.js +1 -1
- package/lib/Drawer.js.map +1 -1
- package/lib/Dropdown.js +1 -1
- package/lib/Dropdown.js.map +1 -1
- package/lib/DropdownSubmenu.js +1 -1
- package/lib/KeyboardController.js +1 -1
- package/lib/KeyboardController.js.map +1 -1
- package/lib/Layout.js +2 -2
- package/lib/Layout.js.map +1 -1
- package/lib/NavItem.js +1 -1
- package/lib/NavItem.js.map +1 -1
- package/lib/Popout-CYqn_dZu.js +2 -0
- package/lib/Popout-CYqn_dZu.js.map +1 -0
- package/lib/Popout.js +1 -1
- package/lib/Textarea.js +1 -1
- package/lib/Textarea.js.map +1 -1
- package/lib/Tooltip.js +1 -1
- package/lib/Tooltip.js.map +1 -1
- package/lib/Truncate.js +1 -1
- package/lib/Truncate.js.map +1 -1
- package/lib/bundle.js +11 -11
- package/lib/bundle.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/src/button-group/ButtonGroup.d.ts +1 -0
- package/lib/src/command-menu/ICommandMenuAction.d.ts +11 -0
- package/lib/src/common/mixins/FloatingComponentMixin.d.ts +2 -0
- package/lib/src/drawer/Drawer.d.ts +7 -0
- package/lib/src/popout/Popout.d.ts +2 -2
- package/lib/src/textarea/Textarea.d.ts +2 -1
- package/lib/src/tooltip/Tooltip.d.ts +12 -0
- package/lib/src/truncate/Truncate.d.ts +12 -0
- package/package.json +2 -2
- package/lib/Popout-DtEL0HZ0.js +0 -2
- package/lib/Popout-DtEL0HZ0.js.map +0 -1
package/lib/ButtonGroup.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as o,LitElement as r,html as n}from"lit";import{property as a,customElement as i}from"lit/decorators.js";import{classMap as e}from"lit/directives/class-map.js";import{D as s}from"./DirectionController-ChvNGESZ.js";import{S as
|
|
1
|
+
import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as o,LitElement as r,html as n}from"lit";import{property as a,customElement as i}from"lit/decorators.js";import{classMap as e}from"lit/directives/class-map.js";import{D as s}from"./DirectionController-ChvNGESZ.js";import{S as u}from"./SlotController-Z6eG7LSZ.js";import{s as l}from"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";const d=o`:host{--_n-button-group-border-radius:var(--n-button-group-border-radius, var(--n-border-radius-s));--_n-button-group-box-shadow:var(--n-button-group-box-shadow, var(--n-box-shadow));--_n-button-group-gap:var(--n-button-group-gap, calc(var(--n-space-s) + var(--n-space-xs)));--_n-button-group-flex-direction:row;--_n-button-group-max-inline-size:max-content}:host([variant=default]) .n-multiple-buttons{--n-button-border-radius:0;--n-button-box-shadow:none}.n-button-group{display:flex;flex-direction:var(--_n-button-group-flex-direction);max-inline-size:var(--_n-button-group-max-inline-size)}:host([variant=default]) .n-button-group.n-multiple-buttons{border-radius:var(--_n-button-group-border-radius);box-shadow:var(--_n-button-group-box-shadow)}:host([variant=spaced]) .n-button-group{gap:var(--_n-button-group-gap)}:host([variant=spaced]) .n-button-group.n-small-gap{--_n-button-group-gap:var(--n-button-group-gap, var(--n-space-s))}:host([variant=default][direction=horizontal]) .n-multiple-buttons ::slotted(*){margin-inline-end:-1px}:host([variant=default]) .n-multiple-buttons ::slotted(:is(:hover,:focus,:focus-within,[aria-pressed=true])){z-index:var(--n-index-mask)}:host([variant=default]) ::slotted(:is(:focus,:focus-within)){--n-button-box-shadow:var(--n-button-box-shadow, 0 0 0 1px var(--n-color-accent), var(--n-box-shadow))}:host([variant=default]) ::slotted([aria-pressed=true]){--n-button-background-color:var(--n-color-status-info-weak);--n-button-border-color:var(--n-color-accent)}:host([variant=default]) .n-multiple-buttons ::slotted(*){border-radius:var(--n-button-border-radius)}:host([variant=default]) .n-multiple-buttons.n-rtl ::slotted(:last-child),:host([variant=default]) .n-multiple-buttons:not(.n-rtl) ::slotted(:first-child){--n-button-border-radius:var(--_n-button-group-border-radius) 0 0 var(--_n-button-group-border-radius)}:host([variant=default]) .n-multiple-buttons.n-rtl ::slotted(:first-child),:host([variant=default]) .n-multiple-buttons:not(.n-rtl) ::slotted(:last-child){--n-button-border-radius:0 var(--_n-button-group-border-radius) var(--_n-button-group-border-radius) 0}:host([direction=vertical]) .n-button-group{--_n-button-group-flex-direction:column}:host([variant=default][direction=vertical]) .n-multiple-buttons ::slotted(*){margin-block-end:-1px}:host([variant=default][direction=vertical]) .n-multiple-buttons ::slotted(:first-child){--n-button-border-radius:var(--_n-button-group-border-radius) var(--_n-button-group-border-radius) 0 0}:host([variant=default][direction=vertical]) .n-multiple-buttons ::slotted(:last-child){--n-button-border-radius:0 0 var(--_n-button-group-border-radius) var(--_n-button-group-border-radius)}:host([variant=spaced][wrap]) .n-button-group{flex-wrap:wrap}:host([variant=default]) ::slotted(nord-button[variant=primary]){position:relative}:host([variant=default]) ::slotted(nord-button[variant=primary]:not(:is(:focus,:first-child)))::before,:host([variant=default]) ::slotted(nord-button[variant=primary]:not(:is(:focus,:last-child)))::after{content:'';position:absolute;z-index:var(--n-index-mask);background:var(--n-color-text);opacity:.25}:host([variant=default][direction=horizontal]) ::slotted(nord-button[variant=primary])::after,:host([variant=default][direction=horizontal]) ::slotted(nord-button[variant=primary])::before{inline-size:1px;inset-block:0}:host([variant=default][direction=horizontal]) ::slotted(nord-button[variant=primary])::after{inset-inline-end:0}:host([variant=default][direction=vertical]) ::slotted(nord-button[variant=primary])::after,:host([variant=default][direction=vertical]) ::slotted(nord-button[variant=primary])::before{block-size:1px;inset-inline:0}:host([variant=default][direction=vertical]) ::slotted(nord-button[variant=primary])::after{inset-block-end:0}`;let b=class extends r{constructor(){super(...arguments),this.defaultSlot=new u(this),this.dirController=new s(this),this.variant="default",this.direction="horizontal",this.wrap=!1,this.role="group"}render(){const t=this.defaultSlot.assigned.every((t=>"nord-button"!==t.localName&&"nord-select"!==t.localName||"s"===t.getAttribute("size"))),o=this.defaultSlot.assigned.length>1;return n`<div class="${e({"n-button-group":!0,"n-rtl":this.dirController.isRTL,"n-small-gap":t&&"spaced"===this.variant,"n-multiple-buttons":o})}"><slot></slot></div>`}};b.styles=[l,d],t([a({reflect:!0})],b.prototype,"variant",void 0),t([a({reflect:!0})],b.prototype,"direction",void 0),t([a({reflect:!0,type:Boolean})],b.prototype,"wrap",void 0),t([a({reflect:!0})],b.prototype,"role",void 0),b=t([i("nord-button-group")],b);var p=b;export{p as default};
|
|
2
2
|
//# sourceMappingURL=ButtonGroup.js.map
|
package/lib/ButtonGroup.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonGroup.js","sources":["../src/button-group/ButtonGroup.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { classMap } from 'lit/directives/class-map.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './ButtonGroup.css'\n\n/**\n * Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.\n *\n * @status ready\n * @category structure\n * @slot - The button group content\n *\n * @cssprop [--n-button-group-border-radius=var(--n-border-radius-s)] - Controls the rounded corners of the button group, using [border radius tokens](/tokens/#border-radius). Only relevant for the default variant.\n * @cssprop [--n-button-group-box-shadow=var(--n-box-shadow)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow). Only relevant for the default variant.\n */\n@customElement('nord-button-group')\nexport default class ButtonGroup extends LitElement {\n static styles = [componentStyle, style]\n\n private defaultSlot = new SlotController(this)\n private dirController = new DirectionController(this)\n\n /**\n * The style variant of the button group.\n */\n @property({ reflect: true }) variant: 'default' | 'spaced' = 'default'\n\n /**\n * The direction of the button group.\n */\n @property({ reflect: true }) direction: 'vertical' | 'horizontal' = 'horizontal'\n\n /**\n * Defines whether the buttons are forced in a single line\n * or can be flowed into multiple lines (only applied when variant is set to `spaced`).\n */\n @property({ reflect: true, type: Boolean }) wrap = false\n\n /**\n * The appropriate role for the containing element.\n */\n\n @property({ reflect: true }) role: string = 'group'\n\n render() {\n const hasSmallButtons = this.defaultSlot.assigned.every((node) => {\n if (node.localName === 'nord-button' || node.localName === 'nord-select') {\n return node.getAttribute('size') === 's'\n }\n\n return true\n })\n\n const hasMultipleButtons = this.defaultSlot.assigned.length > 1\n\n return html`\n <div\n class=${classMap({\n 'n-button-group': true,\n 'n-rtl': this.dirController.isRTL,\n 'n-small-gap': hasSmallButtons && this.variant === 'spaced',\n 'n-multiple-buttons': hasMultipleButtons,\n })}\n >\n <slot></slot>\n </div>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nord-button-group': ButtonGroup\n }\n}\n"],"names":["ButtonGroup","LitElement","constructor","this","defaultSlot","SlotController","dirController","DirectionController","variant","direction","wrap","role","render","hasSmallButtons","assigned","every","node","localName","getAttribute","hasMultipleButtons","length","html","classMap","isRTL","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ButtonGroup.js","sources":["../src/button-group/ButtonGroup.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { classMap } from 'lit/directives/class-map.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './ButtonGroup.css'\n\n/**\n * Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.\n *\n * @status ready\n * @category structure\n * @slot - The button group content\n *\n * @cssprop [--n-button-group-border-radius=var(--n-border-radius-s)] - Controls the rounded corners of the button group, using [border radius tokens](/tokens/#border-radius). Only relevant for the default variant.\n * @cssprop [--n-button-group-box-shadow=var(--n-box-shadow)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow). Only relevant for the default variant.\n * @cssprop [--n-button-group-gap=calc(var(--n-space-s) + var(--n-space-xs))] - Controls the gap between buttons, using [space tokens](/tokens/#space). Only relevant for the spaced variant. Defaults to `var(--n-space-s)` when all slotted controls are `size=\"s\"`.\n */\n@customElement('nord-button-group')\nexport default class ButtonGroup extends LitElement {\n static styles = [componentStyle, style]\n\n private defaultSlot = new SlotController(this)\n private dirController = new DirectionController(this)\n\n /**\n * The style variant of the button group.\n */\n @property({ reflect: true }) variant: 'default' | 'spaced' = 'default'\n\n /**\n * The direction of the button group.\n */\n @property({ reflect: true }) direction: 'vertical' | 'horizontal' = 'horizontal'\n\n /**\n * Defines whether the buttons are forced in a single line\n * or can be flowed into multiple lines (only applied when variant is set to `spaced`).\n */\n @property({ reflect: true, type: Boolean }) wrap = false\n\n /**\n * The appropriate role for the containing element.\n */\n\n @property({ reflect: true }) role: string = 'group'\n\n render() {\n const hasSmallButtons = this.defaultSlot.assigned.every((node) => {\n if (node.localName === 'nord-button' || node.localName === 'nord-select') {\n return node.getAttribute('size') === 's'\n }\n\n return true\n })\n\n const hasMultipleButtons = this.defaultSlot.assigned.length > 1\n\n return html`\n <div\n class=${classMap({\n 'n-button-group': true,\n 'n-rtl': this.dirController.isRTL,\n 'n-small-gap': hasSmallButtons && this.variant === 'spaced',\n 'n-multiple-buttons': hasMultipleButtons,\n })}\n >\n <slot></slot>\n </div>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nord-button-group': ButtonGroup\n }\n}\n"],"names":["ButtonGroup","LitElement","constructor","this","defaultSlot","SlotController","dirController","DirectionController","variant","direction","wrap","role","render","hasSmallButtons","assigned","every","node","localName","getAttribute","hasMultipleButtons","length","html","classMap","isRTL","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"gnIAqBe,IAAMA,EAAN,cAA0BC,EAA1B,WAAAC,uBAGLC,KAAAC,YAAc,IAAIC,EAAeF,MACjCA,KAAAG,cAAgB,IAAIC,EAAoBJ,MAKnBA,KAAOK,QAAyB,UAKhCL,KAASM,UAA8B,aAMxBN,KAAIO,MAAG,EAMtBP,KAAIQ,KAAW,OA0B7C,CAxBC,MAAAC,GACE,MAAMC,EAAkBV,KAAKC,YAAYU,SAASC,OAAOC,GAChC,gBAAnBA,EAAKC,WAAkD,gBAAnBD,EAAKC,WACN,MAA9BD,EAAKE,aAAa,UAMvBC,EAAqBhB,KAAKC,YAAYU,SAASM,OAAS,EAE9D,OAAOC,CAAI,eAECC,EAAS,CACf,kBAAkB,EAClB,QAASnB,KAAKG,cAAciB,MAC5B,cAAeV,GAAoC,WAAjBV,KAAKK,QACvC,qBAAsBW,0BAM7B,GAlDMnB,EAAAwB,OAAS,CAACC,EAAgBC,GAQJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAiD7B,EAAA8B,UAAA,eAAA,GAKzCH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA2D7B,EAAA8B,UAAA,iBAAA,GAMpCH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAuBhC,EAAA8B,UAAA,YAAA,GAM3BH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA8B7B,EAAA8B,UAAA,YAAA,GA1BhC9B,EAAW2B,EAAA,CAD/BM,EAAc,sBACMjC,SAAAA"}
|
package/lib/DatePicker.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{c as e}from"./interface-close-small-CnpAFMO3.js";import{css as i,html as o,nothing as a,LitElement as r}from"lit";import{query as s,property as n,customElement as l}from"lit/decorators.js";import{ifDefined as d}from"lit/directives/if-defined.js";import{ref as p}from"lit/directives/ref.js";import{S as h,i as c}from"./Calendar-ChNZdVRO.js";import{D as m,c as u,p as v,a as f}from"./dates-CAAlPKZi.js";import{c as b}from"./cond-CI1KbneT.js";import{N as g}from"./events-Bv6wNHwJ.js";import{F as j}from"./FocusableMixin-BlQLNPdJ.js";import{F as y}from"./FormAssociatedMixin-B4Qj-CQN.js";import{I as $}from"./InputMixin-LetXsCyv.js";import{R as D,s as k}from"./TextField-B955GOhe.js";import{S as x}from"./SizeMixin-CU9cLbLC.js";import{s as w}from"./Component-DSU3Qp0O.js";import{s as z}from"./FormField-BFaVzUjk.js";import C from"./Icon.js";import{LocalizeController as F}from"./LocalizeController.js";import{isoAdapter as B}from"./date-adapter.js";import"./Input.js";import"./Button.js";import"./VisuallyHidden.js";import"./Popout-
|
|
1
|
+
import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{c as e}from"./interface-close-small-CnpAFMO3.js";import{css as i,html as o,nothing as a,LitElement as r}from"lit";import{query as s,property as n,customElement as l}from"lit/decorators.js";import{ifDefined as d}from"lit/directives/if-defined.js";import{ref as p}from"lit/directives/ref.js";import{S as h,i as c}from"./Calendar-ChNZdVRO.js";import{D as m,c as u,p as v,a as f}from"./dates-CAAlPKZi.js";import{c as b}from"./cond-CI1KbneT.js";import{N as g}from"./events-Bv6wNHwJ.js";import{F as j}from"./FocusableMixin-BlQLNPdJ.js";import{F as y}from"./FormAssociatedMixin-B4Qj-CQN.js";import{I as $}from"./InputMixin-LetXsCyv.js";import{R as D,s as k}from"./TextField-B955GOhe.js";import{S as x}from"./SizeMixin-CU9cLbLC.js";import{s as w}from"./Component-DSU3Qp0O.js";import{s as z}from"./FormField-BFaVzUjk.js";import C from"./Icon.js";import{LocalizeController as F}from"./LocalizeController.js";import{isoAdapter as B}from"./date-adapter.js";import"./Input.js";import"./Button.js";import"./VisuallyHidden.js";import"./Popout-CYqn_dZu.js";import"./Stack.js";import"lit/directives/class-map.js";import"lit/directives/repeat.js";import"./tinykeys.module-_6MZt7MP.js";import"./collection-Dvg2XbxV.js";import"./DirectionController-ChvNGESZ.js";import"./EventController-BBOmvfLa.js";import"./observe-D0n0zOfU.js";import"./number-Dg2vCfGd.js";import"./DateSelectEvent.js";import"./FormDataController-OUt5L5uC.js";import"./SlotController-Z6eG7LSZ.js";import"lit/directives/unsafe-html.js";import"./IconManager.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"lit/directives/style-map.js";import"./AutocompleteMixin-D8eiOxvO.js";import"./TextSelectableMixin-Cfv__lHS.js";import"./LightDomController-DIwtVelV.js";import"./Spinner.js";import"./positioning-D-K8Mueq.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./ScrollbarController-BFC67Y2x.js";var A=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18 2h-2v-2h-2v2h-8v-2h-2v2h-2c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2zm-14 2v2h2v-2h8v2h2v-2h2v4h-16v-4zm-2 14v-8h16v8z" fill="currentColor"/></svg>',tags:"nordicon interface calendar date time day week month year",title:"interface-calendar"});const S=i`:host{color:var(--n-color-text);position:relative}:host(:not([expand])) .n-date-picker-input{max-inline-size:max-content}.n-date-picker-calendar{--n-calendar-box-shadow:none}@media (max-width:35.9375em){.n-date-picker-header{padding:calc(var(--n-space-s) * 1.5) var(--n-space-m);border-block-end:1px solid var(--n-color-border)}.n-date-picker-calendar{--_n-calendar-padding:var(--n-space-l)}}.n-date-picker-close-button{--n-button-border-radius:var(--n-border-radius-circle);--_n-button-padding-inline:calc(var(--n-space-s) / 1.3);--_n-button-padding-block:0;opacity:0;position:absolute;inset-block-start:calc(var(--n-space-s) * -1);inset-inline-end:calc(var(--n-space-s) * -1)}.n-date-picker-close-button:focus{opacity:1}.n-date-picker-heading{display:none;font-weight:var(--n-font-weight-active)}@media (max-width:35.9375em){.n-date-picker-close-button{opacity:1;position:relative;inset:auto}.n-date-picker-heading{display:initial}}`;C.registerIcon(A),C.registerIcon(e);const E=()=>!1,I=()=>!1;let L=class extends(x(y(D($(j(r)))))){constructor(){super(...arguments),this.swipe=new h(this,{target:()=>this.popout,matchesGesture:c,onSwipeEnd:()=>this.hide()}),this.localize=new F(this,{onLangChange:()=>this.createDateFormatters()}),this.value="",this.open=!1,this.firstDayOfWeek=m.Monday,this.dateAdapter=B,this.isDateDisabled=E,this.isDateHighlighted=I,this.expand=!1,this.handleDaySelect=t=>{t.stopPropagation(),this.setValue(t.date),this.hide()},this.handleBlur=t=>{t.stopPropagation(),this.internalError=this.validateDateBounds(this.valueAsDate),this.dispatchEvent(new g("blur"))},this.handleFocus=t=>{t.stopPropagation(),this.dispatchEvent(new g("focus"))},this.handleInputChange=t=>{var e;const i=t.target,o=this.dateAdapter.parse(i.value,u);this.rawValue=null===(e=this.focusableRef.value)||void 0===e?void 0:e.value,(o||""===i.value)&&this.setValue(o)}}get valueAsDate(){return v(this.value)}set valueAsDate(t){this.value=t?f(t):""}get valueAsNumber(){var t,e;return null!==(e=null===(t=this.valueAsDate)||void 0===t?void 0:t.getTime())&&void 0!==e?e:Number.NaN}set valueAsNumber(t){this.value=t?f(new Date(t)):""}firstUpdated(){var t;this.rawValue=null===(t=this.focusableRef.value)||void 0===t?void 0:t.value}render(){const{valueAsDate:t}=this,e=t?this.dateAdapter.format(t):"";return o`<nord-input class="n-date-picker-input" value="${e}" label="${d(this.label)}" hint="${d(this.hint)}" error="${b(this.error||this.internalError,this.error||this.internalError)}" placeholder="${d(this.placeholder)}" id="${this.inputId}" size="${this.size}" ?expand="${this.expand}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" ?hint-below="${this.hintBelow}" ?hide-label="${this.hideLabel}" ?hide-required="${this.hideRequired}" disallow-pattern="[^0-9./-]" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @input="${this.handleInputChange}" ${p(this.focusableRef)} aria-invalid="${b(this.error||this.internalError,"true")}" aria-describedby="${d(this.getDescribedBy())}">${this.hintSlot.isEmpty?a:o`<slot name="hint" slot="hint"></slot>`} ${this.labelSlot.isEmpty?a:o`<slot name="label" slot="label"></slot>`}<nord-button size="${this.size}" ?disabled="${this.disabled||this.readonly}" slot="end" class="n-date-picker-toggle" aria-controls="popout" type="button"><nord-icon name="interface-calendar"></nord-icon><nord-visually-hidden>${this.localize.term("buttonLabel")} ${t?o`<span>, ${this.localize.term("selectedDateMessage")} ${this.dateFormatLong.format(t)}</span>`:a}</nord-visually-hidden></nord-button></nord-input><nord-popout id="popout" anchor="${this.inputId}" align="end" position="block-end" role="dialog" aria-modal="true" ?open="${this.open}" @open="${this.handleOpen}" @close="${this.handleClose}" aria-labelledby="header"><div aria-hidden="true" tabindex="0" @focus="${this.focusLast}"></div><nord-stack class="n-date-picker-header" direction="horizontal" justify-content="space-between"><div class="n-date-picker-heading" id="header">${this.localize.term("modalHeading")}</div><nord-button class="n-date-picker-close-button" type="button" size="s" variant="plain" @click="${this.handleClose}"><nord-visually-hidden>${this.localize.term("closeLabel")}</nord-visually-hidden><nord-icon name="interface-close-small"></nord-icon></nord-button></nord-stack><nord-calendar class="n-date-picker-calendar" expand value="${this.value}" min="${d(this.min)}" max="${d(this.max)}" today="${d(this.today)}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" .isDateHighlighted="${this.isDateHighlighted}" @change="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></nord-popout>`}createDateFormatters(){this.dateFormatLong=new Intl.DateTimeFormat(this.localize.resolvedLang,{day:"numeric",month:"long",year:"numeric"})}focusFirst(){this.closeButton.focus()}focusLast(){this.calendar.focus({target:"day"})}handleOpen(){this.open=!0,this.calendar.focus({target:"month"})}handleClose(){this.open=!1}setValue(t){this.value=t?f(t):"";const{valueAsDate:e}=this,i=e?this.dateAdapter.format(e):"";this.rawValue=i,this.dispatchEvent(new g("change"))}validateDateBounds(t){if(!t)return;const e=v(this.min||""),i=v(this.max||"");return e&&t<e?this.localize.term("dateOutOfMinBound",this.min):i&&t>i?this.localize.term("dateOutOfMaxBound",this.max):void 0}hide(t){this.popout.hide(t)}show(){this.popout.show()}};L.styles=[w,z,k,S],t([s(".n-date-picker-toggle",!0)],L.prototype,"toggleButton",void 0),t([s(".n-date-picker-close-button",!0)],L.prototype,"closeButton",void 0),t([s("nord-calendar",!0)],L.prototype,"calendar",void 0),t([s('[role="dialog"]',!0)],L.prototype,"popout",void 0),t([n()],L.prototype,"value",void 0),t([n({attribute:!1})],L.prototype,"internalError",void 0),t([n({attribute:!1})],L.prototype,"rawValue",void 0),t([n({type:Boolean,reflect:!0})],L.prototype,"open",void 0),t([n({reflect:!0})],L.prototype,"min",void 0),t([n({reflect:!0})],L.prototype,"max",void 0),t([n({reflect:!0})],L.prototype,"today",void 0),t([n({reflect:!0,attribute:"first-day-of-week",type:Number})],L.prototype,"firstDayOfWeek",void 0),t([n({attribute:!1})],L.prototype,"dateAdapter",void 0),t([n({attribute:!1})],L.prototype,"isDateDisabled",void 0),t([n({attribute:!1})],L.prototype,"isDateHighlighted",void 0),t([n({reflect:!0,type:Boolean})],L.prototype,"expand",void 0),L=t([l("nord-date-picker")],L);var M=L;export{M as default};
|
|
2
2
|
//# sourceMappingURL=DatePicker.js.map
|
package/lib/Drawer.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as r}from"./tslib.es6-CmLYFWVC.js";import{css as d,LitElement as e,html as o}from"lit";import{property as a,customElement as n}from"lit/decorators.js";import{S as t}from"./SlotController-Z6eG7LSZ.js";import{s as i}from"./Component-DSU3Qp0O.js";import"./Footer.js";import"./EventController-BBOmvfLa.js";const s=d`:host{--_n-drawer-padding:var(--n-drawer-padding, var(--n-space-l));--_n-drawer-background-color:var(--n-drawer-background-color, var(--n-color-surface));--_n-drawer-border-color:var(--n-drawer-border-color, var(--n-color-border));--_n-drawer-border-radius:var(--n-drawer-border-radius, 0);--_n-drawer-border-width:var(--n-drawer-border-width, 0);--_n-drawer-border-inline-start-width:var(--n-drawer-border-inline-start-width, var(--
|
|
1
|
+
import{_ as r}from"./tslib.es6-CmLYFWVC.js";import{css as d,LitElement as e,html as o}from"lit";import{property as a,customElement as n}from"lit/decorators.js";import{S as t}from"./SlotController-Z6eG7LSZ.js";import{s as i}from"./Component-DSU3Qp0O.js";import"./Footer.js";import"./EventController-BBOmvfLa.js";const s=d`:host{--_n-drawer-padding:var(--n-drawer-padding, var(--n-space-l));--_n-drawer-background-color:var(--n-drawer-background-color, var(--n-color-surface));--_n-drawer-border-color:var(--n-drawer-border-color, var(--n-color-border));--_n-drawer-border-radius:var(--n-drawer-border-radius, 0);--_n-drawer-border-width:var(--n-drawer-border-width, 0);--_n-drawer-border-inline-start-width:var(--n-drawer-border-inline-start-width, var(--n-drawer-border-width, 1px));--_n-drawer-border-inline-end-width:var(--n-drawer-border-inline-end-width, var(--_n-drawer-border-width));--_n-drawer-border-block-start-width:var(--n-drawer-border-block-start-width, var(--_n-drawer-border-width));--_n-drawer-border-block-end-width:var(--n-drawer-border-block-end-width, var(--_n-drawer-border-width));background-color:var(--_n-drawer-background-color);border-style:solid;border-color:var(--_n-drawer-border-color);border-inline-start-width:var(--_n-drawer-border-inline-start-width);border-inline-end-width:var(--_n-drawer-border-inline-end-width);border-block-start-width:var(--_n-drawer-border-block-start-width);border-block-end-width:var(--_n-drawer-border-block-end-width);border-radius:var(--_n-drawer-border-radius)}:host([padding='m']){--_n-drawer-padding:var(--n-drawer-padding, var(--n-space-m))}:host([padding='s']){--_n-drawer-padding:var(--n-drawer-padding, var(--n-space-s))}.n-drawer{--n-footer-box-shadow:none;display:flex;flex-direction:column;block-size:100%}.n-drawer-main{flex:1;padding:var(--_n-drawer-padding);overflow-y:auto}:host([padding=none]){--_n-drawer-padding:var(--n-drawer-padding, 0)}::slotted(nord-header){--_n-header-box-shadow:none;--n-header-background-color:transparent;--n-header-padding-inline:var(--_n-drawer-padding)}`;let w=class extends e{constructor(){super(...arguments),this.footerSlot=new t(this,"footer"),this.padding="l"}render(){return o`<div class="n-drawer"><slot name="header"></slot><div class="n-drawer-main"><slot></slot></div><nord-footer ?hidden="${this.footerSlot.isEmpty}"><slot name="${this.footerSlot.slotName}"></slot></nord-footer></div>`}};w.styles=[i,s],r([a({reflect:!0})],w.prototype,"padding",void 0),w=r([n("nord-drawer")],w);var l=w;export{l as default};
|
|
2
2
|
//# sourceMappingURL=Drawer.js.map
|
package/lib/Drawer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.js","sources":["../src/drawer/Drawer.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\n\nimport componentStyle from '../common/styles/Component.css'\n\nimport style from './Drawer.css'\nimport '../footer/Footer.js'\n\n/**\n * Drawer is used to display context-sensitive actions and information.\n * Drawer doesn’t block users from completing their task, like a modal would.\n *\n * @status new\n * @category structure\n * @slot header - Optional slot that holds a header for the drawer.\n * @slot - Default slot.\n * @slot footer - Optional slot that holds footer content for the drawer.\n *\n * @cssprop [--n-drawer-padding=var(--n-space-l)] - Controls the padding around the main area (the default slot), using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-drawer-background-color=var(--n-color-surface)] - Controls the background color of the drawer.\n */\n@customElement('nord-drawer')\nexport default class Drawer extends LitElement {\n static styles = [componentStyle, style]\n\n private footerSlot = new SlotController(this, 'footer')\n\n /**\n * Controls the padding of the drawer component.\n */\n @property({ reflect: true }) padding: 'l' | 'm' | 's' | 'none' = 'l'\n\n render() {\n return html`\n <div class=\"n-drawer\">\n <slot name=\"header\"></slot>\n\n <div class=\"n-drawer-main\">\n <slot></slot>\n </div>\n\n <nord-footer ?hidden=${this.footerSlot.isEmpty}>\n <slot name=${this.footerSlot.slotName}></slot>\n </nord-footer>\n </div>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nord-drawer': Drawer\n }\n}\n"],"names":["Drawer","LitElement","constructor","this","footerSlot","SlotController","padding","render","html","isEmpty","slotName","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Drawer.js","sources":["../src/drawer/Drawer.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\n\nimport componentStyle from '../common/styles/Component.css'\n\nimport style from './Drawer.css'\nimport '../footer/Footer.js'\n\n/**\n * Drawer is used to display context-sensitive actions and information.\n * Drawer doesn’t block users from completing their task, like a modal would.\n *\n * @status new\n * @category structure\n * @slot header - Optional slot that holds a header for the drawer.\n * @slot - Default slot.\n * @slot footer - Optional slot that holds footer content for the drawer.\n *\n * @cssprop [--n-drawer-padding=var(--n-space-l)] - Controls the padding around the main area (the default slot), using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-drawer-background-color=var(--n-color-surface)] - Controls the background color of the drawer.\n * @cssprop [--n-drawer-border-color=var(--n-color-border)] - Controls the color of the drawer's borders.\n * @cssprop [--n-drawer-border-radius=0] - Controls the border radius of the drawer.\n * @cssprop [--n-drawer-border-width=0] - Controls the width of the drawer's borders on every edge. The inline-start edge defaults to `1px` to separate the drawer from adjacent content; set this to `0` to remove all borders.\n * @cssprop [--n-drawer-border-inline-start-width=1px] - Controls the width of the drawer's inline-start border. Falls back to `--n-drawer-border-width`, then `1px`.\n * @cssprop [--n-drawer-border-inline-end-width=var(--n-drawer-border-width)] - Controls the width of the drawer's inline-end border.\n * @cssprop [--n-drawer-border-block-start-width=var(--n-drawer-border-width)] - Controls the width of the drawer's block-start border.\n * @cssprop [--n-drawer-border-block-end-width=var(--n-drawer-border-width)] - Controls the width of the drawer's block-end border.\n */\n@customElement('nord-drawer')\nexport default class Drawer extends LitElement {\n static styles = [componentStyle, style]\n\n private footerSlot = new SlotController(this, 'footer')\n\n /**\n * Controls the padding of the drawer component.\n */\n @property({ reflect: true }) padding: 'l' | 'm' | 's' | 'none' = 'l'\n\n render() {\n return html`\n <div class=\"n-drawer\">\n <slot name=\"header\"></slot>\n\n <div class=\"n-drawer-main\">\n <slot></slot>\n </div>\n\n <nord-footer ?hidden=${this.footerSlot.isEmpty}>\n <slot name=${this.footerSlot.slotName}></slot>\n </nord-footer>\n </div>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nord-drawer': Drawer\n }\n}\n"],"names":["Drawer","LitElement","constructor","this","footerSlot","SlotController","padding","render","html","isEmpty","slotName","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"ghEA8Be,IAAMA,EAAN,cAAqBC,EAArB,WAAAC,uBAGLC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UAKjBA,KAAOG,QAA6B,GAiBlE,CAfC,MAAAC,GACE,OAAOC,CAAI,wHAQgBL,KAAKC,WAAWK,wBACxBN,KAAKC,WAAWM,uCAIpC,GAvBMV,EAAAW,OAAS,CAACC,EAAgBC,GAOJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA+ChB,EAAAiB,UAAA,eAAA,GARjDjB,EAAMc,EAAA,CAD1BI,EAAc,gBACMlB,SAAAA"}
|
package/lib/Dropdown.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as o,LitElement as n}from"lit";import{query as s,state as i,property as a,customElement as r}from"lit/decorators.js";import{ifDefined as d}from"lit/directives/if-defined.js";import{S as l}from"./SlotController-Z6eG7LSZ.js";import{o as p}from"./observe-D0n0zOfU.js";import{F as c}from"./Popout-
|
|
1
|
+
import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as o,LitElement as n}from"lit";import{query as s,state as i,property as a,customElement as r}from"lit/decorators.js";import{ifDefined as d}from"lit/directives/if-defined.js";import{S as l}from"./SlotController-Z6eG7LSZ.js";import{o as p}from"./observe-D0n0zOfU.js";import{F as c}from"./Popout-CYqn_dZu.js";import{s as u}from"./Component-DSU3Qp0O.js";import"./Icon.js";import"./DropdownItem.js";import"./EventController-BBOmvfLa.js";import"./positioning-D-K8Mueq.js";import"./DirectionController-ChvNGESZ.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./ScrollbarController-BFC67Y2x.js";import"./events-Bv6wNHwJ.js";import"lit/directives/unsafe-html.js";import"./cond-CI1KbneT.js";import"./IconManager.js";import"lit/directives/ref.js";import"./FocusableMixin-BlQLNPdJ.js";import"./DropdownItem-Cb-7cHMg.js";const h=e`:host{--_n-dropdown-size:var(--n-dropdown-size, 250px);--_n-dropdown-max-block-size:var(--n-dropdown-max-block-size, 460px)}.n-dropdown-content{padding:var(--n-space-s) 0;min-inline-size:var(--_n-dropdown-size);max-inline-size:calc(var(--_n-dropdown-size) * 1.5);max-block-size:var(--_n-dropdown-max-block-size);overflow-y:auto}@media (max-width:35.9375em){.n-dropdown-content{max-block-size:70vh;max-inline-size:none}.n-dropdown-header.is-navigation-header{padding:var(--n-space-s) 0}.n-dropdown-back-item{padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-s);inline-size:100%}.n-dropdown-content.is-submenu-active ::slotted(nord-dropdown-group),.n-dropdown-content.is-submenu-active ::slotted(nord-dropdown-item),.n-dropdown-content.is-submenu-active ::slotted(nord-dropdown-submenu:not([mobile-active])){display:none}}::slotted(nord-dropdown-group),::slotted(nord-dropdown-item){padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-s)}::slotted(nord-dropdown-group){padding-block-end:var(--n-space-s);border-block-end:1px solid var(--n-color-border);margin-block-end:var(--n-space-s)}::slotted(nord-dropdown-group:last-child){padding-block-end:0;border-block-end:0;margin-block-end:0}::slotted(nord-message:first-of-type){padding-block-start:0}::slotted(nord-message:last-of-type){margin-block-end:var(--n-space-s)}slot[name=toggle]{display:inline-block}:host([expand]) slot[name=toggle]{inline-size:100%}:host([size='s']){--_n-dropdown-size:var(--n-dropdown-size, 150px)}:host([size='l']){--_n-dropdown-size:var(--n-dropdown-size, 300px)}.n-dropdown-header{padding:calc(var(--n-space-m) + 2px) var(--n-space-m);border-block-end:1px solid var(--n-color-border);background-color:var(--n-color-surface-raised);border-start-start-radius:var(--n-border-radius);border-start-end-radius:var(--n-border-radius);font-weight:var(--n-font-weight);display:flex;gap:var(--n-space-s);align-items:center;flex-wrap:wrap}.n-dropdown-header ::slotted(nord-button){--n-button-gap:var(--n-space-xs);--n-button-background-color:var(--n-color-surface)}.n-dropdown-header ::slotted(nord-button:hover){--n-button-background-color:var(--n-color-button-hover)}::slotted([slot=header-end]){margin-inline-start:auto;gap:var(--n-space-s);display:flex;align-items:center;flex-wrap:wrap}::slotted(:is(h1, h2, h3, h4, h5, h6, p)){margin:0!important}`;let m=class extends(c(n)){constructor(){super(...arguments),this.headerSlot=new l(this,"header"),this.headerEndSlot=new l(this,"header-end"),this.submenuStack=[],this.isNavigating=!1,this.expand=!1,this.size="m",this.alwaysFloating=!1}get isShowingSubmenu(){return this.submenuStack.length>0}get submenuStackRef(){return this.submenuStack}get deepestSubmenu(){return this.submenuStack[this.submenuStack.length-1]}handleAlwaysFloatingChange(){this.open&&(this.open=!1,this.updateComplete.then((()=>{this.open=!0})))}connectedCallback(){super.connectedCallback();const t=this.querySelector('[slot="toggle"]');null==t||t.setAttribute("aria-haspopup","true")}render(){var t;const e=this.submenuStack[this.submenuStack.length-1];return o`<div class="n-dropdown" @nord-submenu-navigate="${this.handleSubmenuNavigate}" @focusout="${this.handleBlur}"><slot name="toggle" aria-controls="popout"></slot><nord-popout id="popout" align="${d(this.align)}" position="${d(this.position)}" side-offset="${this.sideOffset}" align-offset="${this.alignOffset}" ?open="${this.open}" ?always-floating="${this.alwaysFloating}" @open="${this.handleOpen}" @close="${this.handleClose}">${this.isShowingSubmenu?o`<div class="n-dropdown-header is-navigation-header"><nord-dropdown-item @click="${this.handleBackClick}" class="n-dropdown-back-item"><nord-icon slot="start" name="arrow-left" size="s"></nord-icon>${null!==(t=null==e?void 0:e.label)&&void 0!==t?t:""}</nord-dropdown-item></div>`:o`<div class="n-dropdown-header" ?hidden="${this.headerSlot.isEmpty&&this.headerEndSlot.isEmpty}"><slot name="${this.headerSlot.slotName}"></slot><slot name="${this.headerEndSlot.slotName}"></slot></div>`}<div class="n-dropdown-content ${this.isShowingSubmenu?"is-submenu-active":""}"><slot></slot></div></nord-popout></div>`}handleBlur(t){const e=t.relatedTarget;this.isNavigating||this.isShowingSubmenu||e&&(this.contains(e)||this.popout.hide(!1))}handleOpen(){this.open=!0}handleBackClick(t){t.preventDefault(),t.stopPropagation(),this.isNavigating=!0,this.navigateBack(),this.updateComplete.then((()=>{this.isNavigating=!1;const t=this.submenuStack[this.submenuStack.length-1],e=t?t.querySelector('[slot="trigger"]'):this.querySelector("nord-dropdown-item");null==e||e.focus()}))}handleClose(t){if(this.isNavigating)return;this.clearSubmenuStack();const e=t.target;"NORD-POPOUT"===(null==e?void 0:e.tagName)&&this.contains(e)||(this.open=!1)}handleOpenChange(){var t;if(this.open){const e=null!==(t=this.querySelector("[autofocus]"))&&void 0!==t?t:this.querySelector("nord-dropdown-item, nord-message");null==e||e.focus(),this.list.scrollTop=0}else this.isNavigating||this.clearSubmenuStack()}navigateBack(){if(0===this.submenuStack.length)return;const t=this.submenuStack[this.submenuStack.length-1];t.deactivateMobile(),t.requestUpdate();const e=this.submenuStack[this.submenuStack.length-2];e&&(e.removeAttribute("has-active-child"),e.requestUpdate()),this.submenuStack=this.submenuStack.slice(0,-1)}clearSubmenuStack(){for(const t of this.submenuStack)t.deactivateMobile(),t.removeAttribute("has-active-child");this.submenuStack=[]}handleSubmenuNavigate(t){const e=t;e.stopPropagation();const o=this.submenuStack[this.submenuStack.length-1];o&&(o.setAttribute("has-active-child",""),o.requestUpdate());const n=e.detail.submenu;this.submenuStack=[...this.submenuStack,n],this.updateComplete.then((()=>{n.requestUpdate()}))}hide(t){return this.popout.hide(t)}show(){return this.popout.show()}};m.styles=[u,h],m.shadowRootOptions={...n.shadowRootOptions,delegatesFocus:!0},t([s(".n-dropdown-content")],m.prototype,"list",void 0),t([s("nord-popout",!0)],m.prototype,"popout",void 0),t([i()],m.prototype,"submenuStack",void 0),t([a({reflect:!0,type:Boolean})],m.prototype,"expand",void 0),t([a({reflect:!0})],m.prototype,"size",void 0),t([a({reflect:!0,type:Boolean,attribute:"always-floating"})],m.prototype,"alwaysFloating",void 0),t([p("alwaysFloating")],m.prototype,"handleAlwaysFloatingChange",null),t([p("open","updated")],m.prototype,"handleOpenChange",null),m=t([r("nord-dropdown")],m);var g=m;export{g as default};
|
|
2
2
|
//# sourceMappingURL=Dropdown.js.map
|
package/lib/Dropdown.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.js","sources":["../src/dropdown/Dropdown.ts"],"sourcesContent":["import type DropdownSubmenu from '../dropdown-submenu/DropdownSubmenu.js'\nimport type Popout from '../popout/Popout.js'\nimport { html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { observe } from '../common/decorators/observe.js'\n\nimport { FloatingMixin } from '../common/mixins/FloatingComponentMixin.js'\nimport componentStyle from '../common/styles/Component.css'\n\nimport style from './Dropdown.css'\nimport '../popout/Popout.js'\nimport '../icon/Icon.js'\nimport '../dropdown-item/DropdownItem.js'\n\n/**\n * Dropdown menu displays a list of actions or selectable options for\n * a user. Dropdown uses popout component internally to create\n * the overlay functionality.\n *\n * @status ready\n * @category action\n *\n * @slot - The dropdown content.\n * @slot toggle - Used to place the toggle for dropdown.\n * @slot header - Optional slot that holds a header for the dropdown.\n * @slot header-end - Optional slot that positions content at the end of the header. Useful for actions or additional info.\n *\n * @fires {NordEvent} open - Dispatched when the popout is opened.\n * @fires {NordEvent} close - Dispatched when the popout is closed.\n *\n * @cssprop [--n-dropdown-size=250px] - Controls the inline size, or width, of the dropdown. Will resize up to 1.5 times to account for larger content.\n * @cssprop [--n-dropdown-max-block-size=460px] - Controls the maximum block size, or height, of the dropdown. Larger content will get a scrollbar.\n */\n@customElement('nord-dropdown')\nexport default class Dropdown extends FloatingMixin(LitElement) {\n static styles = [componentStyle, style]\n\n /**\n * we delegate focus, to ensure focus does not move to body if you click\n * some whitespace or a dropdown-group heading, as this would close the dropdown\n * @internal\n */\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n\n private headerSlot = new SlotController(this, 'header')\n private headerEndSlot = new SlotController(this, 'header-end')\n\n @query('.n-dropdown-content') private list!: HTMLElement\n @query('nord-popout', true) private popout!: Popout\n\n @state() private submenuStack: DropdownSubmenu[] = []\n private isNavigating = false\n\n private get isShowingSubmenu(): boolean {\n return this.submenuStack.length > 0\n }\n\n /**\n * @internal\n */\n get submenuStackRef(): readonly DropdownSubmenu[] {\n return this.submenuStack\n }\n\n /**\n * @internal\n */\n get deepestSubmenu(): DropdownSubmenu | undefined {\n return this.submenuStack[this.submenuStack.length - 1]\n }\n\n /**\n * Controls whether the toggle slot expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n /**\n * The size of the dropdown. This affects the minimum and maximum inline-size\n * of the dropdown.\n */\n @property({ reflect: true }) size: 's' | 'm' | 'l' = 'm'\n\n /**\n * Set to true to always display the dropdown as a floating overlay, even on smaller viewports.\n */\n @property({ reflect: true, type: Boolean, attribute: 'always-floating' })\n alwaysFloating: boolean = false\n\n @observe('alwaysFloating')\n protected handleAlwaysFloatingChange() {\n if (this.open) {\n this.open = false\n this.updateComplete.then(() => {\n this.open = true\n })\n }\n }\n\n connectedCallback() {\n super.connectedCallback()\n\n const toggle = this.querySelector(`[slot=\"toggle\"]`)\n toggle?.setAttribute('aria-haspopup', 'true')\n }\n\n render() {\n const activeSubmenu = this.submenuStack[this.submenuStack.length - 1]\n\n return html`\n <div class=\"n-dropdown\" @nord-submenu-navigate=${this.handleSubmenuNavigate} @focusout=${this.handleBlur}>\n <slot name=\"toggle\" aria-controls=\"popout\"></slot>\n <nord-popout\n id=\"popout\"\n align=${ifDefined(this.align)}\n position=${ifDefined(this.position)}\n ?open=${this.open}\n ?always-floating=${this.alwaysFloating}\n @open=${this.handleOpen}\n @close=${this.handleClose}\n >\n ${\n this.isShowingSubmenu\n ? html`\n <div class=\"n-dropdown-header is-navigation-header\">\n <nord-dropdown-item @click=${this.handleBackClick} class=\"n-dropdown-back-item\">\n <nord-icon slot=\"start\" name=\"arrow-left\" size=\"s\"></nord-icon>\n ${activeSubmenu?.label ?? ''}\n </nord-dropdown-item>\n </div>\n `\n : html`\n <div class=\"n-dropdown-header\" ?hidden=${this.headerSlot.isEmpty && this.headerEndSlot.isEmpty}>\n <slot name=${this.headerSlot.slotName}></slot>\n <slot name=${this.headerEndSlot.slotName}></slot>\n </div>\n `\n }\n <div class=\"n-dropdown-content ${this.isShowingSubmenu ? 'is-submenu-active' : ''}\">\n <slot></slot>\n </div>\n </nord-popout>\n </div>\n `\n }\n\n private handleBlur(e: FocusEvent) {\n const relatedTarget = e.relatedTarget as HTMLElement\n\n // Don't close during navigation or if we're still showing a submenu\n // (the blur event fires after back button is removed from DOM, but we're still in submenu mode)\n if (this.isNavigating || this.isShowingSubmenu)\n return\n\n // Safari will set relatedTarget to null when clicking on the trigger button\n // because it doesn't focus buttons on click.\n // this caused weird behavior where the dropdown closed _and_ opened with a single click.\n // so we only run this logic if relatedTarget is set, which sidesteps this issue\n if (!relatedTarget) {\n return\n }\n\n // Close dropdown if focus moved outside\n if (!this.contains(relatedTarget)) {\n this.popout.hide(false)\n }\n }\n\n private handleOpen() {\n this.open = true\n }\n\n private handleBackClick(event: MouseEvent) {\n event.preventDefault()\n event.stopPropagation()\n\n this.isNavigating = true\n this.navigateBack()\n\n // Reset navigation flag after updates complete\n this.updateComplete.then(() => {\n this.isNavigating = false\n // Focus the trigger of the submenu we're returning to, or the first item\n const newTop = this.submenuStack[this.submenuStack.length - 1]\n const focusTarget = newTop\n ? newTop.querySelector<HTMLElement>('[slot=\"trigger\"]')\n : this.querySelector<HTMLElement>('nord-dropdown-item')\n focusTarget?.focus()\n })\n }\n\n private handleClose(e: Event) {\n // Don't close during navigation\n if (this.isNavigating)\n return\n\n // Clear submenu stack on close\n this.clearSubmenuStack()\n\n // Ignore close events from child popouts (submenus)\n // The event target will be a nord-popout element that is a child of this dropdown\n const eventTarget = e.target as HTMLElement\n const isChildPopout = eventTarget?.tagName === 'NORD-POPOUT' && this.contains(eventTarget)\n\n if (isChildPopout) {\n return\n }\n\n this.open = false\n }\n\n @observe('open', 'updated')\n protected handleOpenChange() {\n if (this.open) {\n const focusTarget\n = this.querySelector<HTMLElement>('[autofocus]')\n ?? this.querySelector<HTMLElement>('nord-dropdown-item, nord-message')\n\n focusTarget?.focus()\n this.list.scrollTop = 0\n }\n else if (!this.isNavigating) {\n // Clear submenu stack when dropdown closes (but not during navigation)\n this.clearSubmenuStack()\n }\n }\n\n /**\n * Navigate back one level in the submenu stack.\n * @internal\n */\n navigateBack() {\n if (this.submenuStack.length === 0)\n return\n\n const topSubmenu = this.submenuStack[this.submenuStack.length - 1]\n topSubmenu.deactivateMobile()\n // Trigger re-render so it loses active and is-deepest-active classes\n topSubmenu.requestUpdate()\n\n const newTop = this.submenuStack[this.submenuStack.length - 2]\n if (newTop) {\n newTop.removeAttribute('has-active-child')\n // Trigger re-render so it gains is-deepest-active class back\n newTop.requestUpdate()\n }\n\n this.submenuStack = this.submenuStack.slice(0, -1)\n }\n\n /**\n * Clear the entire submenu stack.\n * @internal\n */\n private clearSubmenuStack() {\n for (const submenu of this.submenuStack) {\n submenu.deactivateMobile()\n submenu.removeAttribute('has-active-child')\n }\n this.submenuStack = []\n }\n\n /**\n * Handle submenu navigation event.\n * @internal\n */\n private handleSubmenuNavigate(event: Event) {\n const customEvent = event as CustomEvent<{ submenu: DropdownSubmenu }>\n customEvent.stopPropagation()\n\n const previousDeepest = this.submenuStack[this.submenuStack.length - 1]\n if (previousDeepest) {\n previousDeepest.setAttribute('has-active-child', '')\n // Trigger re-render so it loses is-deepest-active class\n previousDeepest.requestUpdate()\n }\n\n const newSubmenu = customEvent.detail.submenu\n this.submenuStack = [...this.submenuStack, newSubmenu]\n\n // Trigger re-render of new deepest so it gains is-deepest-active class\n this.updateComplete.then(() => {\n newSubmenu.requestUpdate()\n })\n }\n\n /**\n * Hide the dropdown programmatically.\n * This method delegates to the Dropdown's internal Popout component.\n * See [Popout's hide() method](/components/popout#methods-hide) for more details.\n * @param moveFocusToButton A boolean option to move the focus to the original button that opens the dropdown.\n */\n hide(moveFocusToButton?: boolean): Promise<TransitionEvent | void> {\n return this.popout.hide(moveFocusToButton)\n }\n\n /**\n * Show the dropdown programmatically.\n * This method delegates to the Dropdown's internal Popout component.\n * See [Popout's show() method](/components/popout#methods-hide) for more details.\n */\n show(): Promise<TransitionEvent | void> {\n return this.popout.show()\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nord-dropdown': Dropdown\n }\n}\n"],"names":["Dropdown","FloatingMixin","LitElement","constructor","this","headerSlot","SlotController","headerEndSlot","submenuStack","isNavigating","expand","size","alwaysFloating","isShowingSubmenu","length","submenuStackRef","deepestSubmenu","handleAlwaysFloatingChange","open","updateComplete","then","connectedCallback","super","toggle","querySelector","setAttribute","render","activeSubmenu","html","handleSubmenuNavigate","handleBlur","ifDefined","align","position","handleOpen","handleClose","handleBackClick","_a","label","isEmpty","slotName","e","relatedTarget","contains","popout","hide","event","preventDefault","stopPropagation","navigateBack","newTop","focusTarget","focus","clearSubmenuStack","eventTarget","target","tagName","handleOpenChange","list","scrollTop","topSubmenu","deactivateMobile","requestUpdate","removeAttribute","slice","submenu","customEvent","previousDeepest","newSubmenu","detail","moveFocusToButton","show","styles","componentStyle","style","shadowRootOptions","delegatesFocus","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","observe","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Dropdown.js","sources":["../src/dropdown/Dropdown.ts"],"sourcesContent":["import type DropdownSubmenu from '../dropdown-submenu/DropdownSubmenu.js'\nimport type Popout from '../popout/Popout.js'\nimport { html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { observe } from '../common/decorators/observe.js'\n\nimport { FloatingMixin } from '../common/mixins/FloatingComponentMixin.js'\nimport componentStyle from '../common/styles/Component.css'\n\nimport style from './Dropdown.css'\nimport '../popout/Popout.js'\nimport '../icon/Icon.js'\nimport '../dropdown-item/DropdownItem.js'\n\n/**\n * Dropdown menu displays a list of actions or selectable options for\n * a user. Dropdown uses popout component internally to create\n * the overlay functionality.\n *\n * @status ready\n * @category action\n *\n * @slot - The dropdown content.\n * @slot toggle - Used to place the toggle for dropdown.\n * @slot header - Optional slot that holds a header for the dropdown.\n * @slot header-end - Optional slot that positions content at the end of the header. Useful for actions or additional info.\n *\n * @fires {NordEvent} open - Dispatched when the popout is opened.\n * @fires {NordEvent} close - Dispatched when the popout is closed.\n *\n * @cssprop [--n-dropdown-size=250px] - Controls the inline size, or width, of the dropdown. Will resize up to 1.5 times to account for larger content.\n * @cssprop [--n-dropdown-max-block-size=460px] - Controls the maximum block size, or height, of the dropdown. Larger content will get a scrollbar.\n */\n@customElement('nord-dropdown')\nexport default class Dropdown extends FloatingMixin(LitElement) {\n static styles = [componentStyle, style]\n\n /**\n * we delegate focus, to ensure focus does not move to body if you click\n * some whitespace or a dropdown-group heading, as this would close the dropdown\n * @internal\n */\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n\n private headerSlot = new SlotController(this, 'header')\n private headerEndSlot = new SlotController(this, 'header-end')\n\n @query('.n-dropdown-content') private list!: HTMLElement\n @query('nord-popout', true) private popout!: Popout\n\n @state() private submenuStack: DropdownSubmenu[] = []\n private isNavigating = false\n\n private get isShowingSubmenu(): boolean {\n return this.submenuStack.length > 0\n }\n\n /**\n * @internal\n */\n get submenuStackRef(): readonly DropdownSubmenu[] {\n return this.submenuStack\n }\n\n /**\n * @internal\n */\n get deepestSubmenu(): DropdownSubmenu | undefined {\n return this.submenuStack[this.submenuStack.length - 1]\n }\n\n /**\n * Controls whether the toggle slot expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n /**\n * The size of the dropdown. This affects the minimum and maximum inline-size\n * of the dropdown.\n */\n @property({ reflect: true }) size: 's' | 'm' | 'l' = 'm'\n\n /**\n * Set to true to always display the dropdown as a floating overlay, even on smaller viewports.\n */\n @property({ reflect: true, type: Boolean, attribute: 'always-floating' })\n alwaysFloating: boolean = false\n\n @observe('alwaysFloating')\n protected handleAlwaysFloatingChange() {\n if (this.open) {\n this.open = false\n this.updateComplete.then(() => {\n this.open = true\n })\n }\n }\n\n connectedCallback() {\n super.connectedCallback()\n\n const toggle = this.querySelector(`[slot=\"toggle\"]`)\n toggle?.setAttribute('aria-haspopup', 'true')\n }\n\n render() {\n const activeSubmenu = this.submenuStack[this.submenuStack.length - 1]\n\n return html`\n <div class=\"n-dropdown\" @nord-submenu-navigate=${this.handleSubmenuNavigate} @focusout=${this.handleBlur}>\n <slot name=\"toggle\" aria-controls=\"popout\"></slot>\n <nord-popout\n id=\"popout\"\n align=${ifDefined(this.align)}\n position=${ifDefined(this.position)}\n side-offset=${this.sideOffset}\n align-offset=${this.alignOffset}\n ?open=${this.open}\n ?always-floating=${this.alwaysFloating}\n @open=${this.handleOpen}\n @close=${this.handleClose}\n >\n ${\n this.isShowingSubmenu\n ? html`\n <div class=\"n-dropdown-header is-navigation-header\">\n <nord-dropdown-item @click=${this.handleBackClick} class=\"n-dropdown-back-item\">\n <nord-icon slot=\"start\" name=\"arrow-left\" size=\"s\"></nord-icon>\n ${activeSubmenu?.label ?? ''}\n </nord-dropdown-item>\n </div>\n `\n : html`\n <div class=\"n-dropdown-header\" ?hidden=${this.headerSlot.isEmpty && this.headerEndSlot.isEmpty}>\n <slot name=${this.headerSlot.slotName}></slot>\n <slot name=${this.headerEndSlot.slotName}></slot>\n </div>\n `\n }\n <div class=\"n-dropdown-content ${this.isShowingSubmenu ? 'is-submenu-active' : ''}\">\n <slot></slot>\n </div>\n </nord-popout>\n </div>\n `\n }\n\n private handleBlur(e: FocusEvent) {\n const relatedTarget = e.relatedTarget as HTMLElement\n\n // Don't close during navigation or if we're still showing a submenu\n // (the blur event fires after back button is removed from DOM, but we're still in submenu mode)\n if (this.isNavigating || this.isShowingSubmenu)\n return\n\n // Safari will set relatedTarget to null when clicking on the trigger button\n // because it doesn't focus buttons on click.\n // this caused weird behavior where the dropdown closed _and_ opened with a single click.\n // so we only run this logic if relatedTarget is set, which sidesteps this issue\n if (!relatedTarget) {\n return\n }\n\n // Close dropdown if focus moved outside\n if (!this.contains(relatedTarget)) {\n this.popout.hide(false)\n }\n }\n\n private handleOpen() {\n this.open = true\n }\n\n private handleBackClick(event: MouseEvent) {\n event.preventDefault()\n event.stopPropagation()\n\n this.isNavigating = true\n this.navigateBack()\n\n // Reset navigation flag after updates complete\n this.updateComplete.then(() => {\n this.isNavigating = false\n // Focus the trigger of the submenu we're returning to, or the first item\n const newTop = this.submenuStack[this.submenuStack.length - 1]\n const focusTarget = newTop\n ? newTop.querySelector<HTMLElement>('[slot=\"trigger\"]')\n : this.querySelector<HTMLElement>('nord-dropdown-item')\n focusTarget?.focus()\n })\n }\n\n private handleClose(e: Event) {\n // Don't close during navigation\n if (this.isNavigating)\n return\n\n // Clear submenu stack on close\n this.clearSubmenuStack()\n\n // Ignore close events from child popouts (submenus)\n // The event target will be a nord-popout element that is a child of this dropdown\n const eventTarget = e.target as HTMLElement\n const isChildPopout = eventTarget?.tagName === 'NORD-POPOUT' && this.contains(eventTarget)\n\n if (isChildPopout) {\n return\n }\n\n this.open = false\n }\n\n @observe('open', 'updated')\n protected handleOpenChange() {\n if (this.open) {\n const focusTarget\n = this.querySelector<HTMLElement>('[autofocus]')\n ?? this.querySelector<HTMLElement>('nord-dropdown-item, nord-message')\n\n focusTarget?.focus()\n this.list.scrollTop = 0\n }\n else if (!this.isNavigating) {\n // Clear submenu stack when dropdown closes (but not during navigation)\n this.clearSubmenuStack()\n }\n }\n\n /**\n * Navigate back one level in the submenu stack.\n * @internal\n */\n navigateBack() {\n if (this.submenuStack.length === 0)\n return\n\n const topSubmenu = this.submenuStack[this.submenuStack.length - 1]\n topSubmenu.deactivateMobile()\n // Trigger re-render so it loses active and is-deepest-active classes\n topSubmenu.requestUpdate()\n\n const newTop = this.submenuStack[this.submenuStack.length - 2]\n if (newTop) {\n newTop.removeAttribute('has-active-child')\n // Trigger re-render so it gains is-deepest-active class back\n newTop.requestUpdate()\n }\n\n this.submenuStack = this.submenuStack.slice(0, -1)\n }\n\n /**\n * Clear the entire submenu stack.\n * @internal\n */\n private clearSubmenuStack() {\n for (const submenu of this.submenuStack) {\n submenu.deactivateMobile()\n submenu.removeAttribute('has-active-child')\n }\n this.submenuStack = []\n }\n\n /**\n * Handle submenu navigation event.\n * @internal\n */\n private handleSubmenuNavigate(event: Event) {\n const customEvent = event as CustomEvent<{ submenu: DropdownSubmenu }>\n customEvent.stopPropagation()\n\n const previousDeepest = this.submenuStack[this.submenuStack.length - 1]\n if (previousDeepest) {\n previousDeepest.setAttribute('has-active-child', '')\n // Trigger re-render so it loses is-deepest-active class\n previousDeepest.requestUpdate()\n }\n\n const newSubmenu = customEvent.detail.submenu\n this.submenuStack = [...this.submenuStack, newSubmenu]\n\n // Trigger re-render of new deepest so it gains is-deepest-active class\n this.updateComplete.then(() => {\n newSubmenu.requestUpdate()\n })\n }\n\n /**\n * Hide the dropdown programmatically.\n * This method delegates to the Dropdown's internal Popout component.\n * See [Popout's hide() method](/components/popout#methods-hide) for more details.\n * @param moveFocusToButton A boolean option to move the focus to the original button that opens the dropdown.\n */\n hide(moveFocusToButton?: boolean): Promise<TransitionEvent | void> {\n return this.popout.hide(moveFocusToButton)\n }\n\n /**\n * Show the dropdown programmatically.\n * This method delegates to the Dropdown's internal Popout component.\n * See [Popout's show() method](/components/popout#methods-hide) for more details.\n */\n show(): Promise<TransitionEvent | void> {\n return this.popout.show()\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nord-dropdown': Dropdown\n }\n}\n"],"names":["Dropdown","FloatingMixin","LitElement","constructor","this","headerSlot","SlotController","headerEndSlot","submenuStack","isNavigating","expand","size","alwaysFloating","isShowingSubmenu","length","submenuStackRef","deepestSubmenu","handleAlwaysFloatingChange","open","updateComplete","then","connectedCallback","super","toggle","querySelector","setAttribute","render","activeSubmenu","html","handleSubmenuNavigate","handleBlur","ifDefined","align","position","sideOffset","alignOffset","handleOpen","handleClose","handleBackClick","_a","label","isEmpty","slotName","e","relatedTarget","contains","popout","hide","event","preventDefault","stopPropagation","navigateBack","newTop","focusTarget","focus","clearSubmenuStack","eventTarget","target","tagName","handleOpenChange","list","scrollTop","topSubmenu","deactivateMobile","requestUpdate","removeAttribute","slice","submenu","customEvent","previousDeepest","newSubmenu","detail","moveFocusToButton","show","styles","componentStyle","style","shadowRootOptions","delegatesFocus","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","observe","customElement"],"mappings":"mwGAoCe,IAAMA,EAAN,cAAuBC,EAAcC,IAArC,WAAAC,uBAULC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAaG,cAAG,IAAID,EAAeF,KAAM,cAKhCA,KAAYI,aAAsB,GAC3CJ,KAAYK,cAAG,EAuBqBL,KAAMM,QAAG,EAMxBN,KAAIO,KAAoB,IAMrDP,KAAcQ,gBAAY,CA2N3B,CA5PC,oBAAYC,GACV,OAAOT,KAAKI,aAAaM,OAAS,CACnC,CAKD,mBAAIC,GACF,OAAOX,KAAKI,YACb,CAKD,kBAAIQ,GACF,OAAOZ,KAAKI,aAAaJ,KAAKI,aAAaM,OAAS,EACrD,CAoBS,0BAAAG,GACJb,KAAKc,OACPd,KAAKc,MAAO,EACZd,KAAKe,eAAeC,MAAK,KACvBhB,KAAKc,MAAO,CAAI,IAGrB,CAED,iBAAAG,GACEC,MAAMD,oBAEN,MAAME,EAASnB,KAAKoB,cAAc,mBAClCD,SAAAA,EAAQE,aAAa,gBAAiB,OACvC,CAED,MAAAC,SACE,MAAMC,EAAgBvB,KAAKI,aAAaJ,KAAKI,aAAaM,OAAS,GAEnE,OAAOc,CAAI,mDACwCxB,KAAKyB,qCAAmCzB,KAAK0B,iGAIlFC,EAAU3B,KAAK4B,qBACZD,EAAU3B,KAAK6B,2BACZ7B,KAAK8B,6BACJ9B,KAAK+B,uBACZ/B,KAAKc,2BACMd,KAAKQ,0BAChBR,KAAKgC,uBACJhC,KAAKiC,gBAGZjC,KAAKS,iBACDe,CAAI,mFAEyBxB,KAAKkC,wHAE9BC,EAAAZ,aAAa,EAAbA,EAAea,qBAAS,gCAI5BZ,CAAI,2CACmCxB,KAAKC,WAAWoC,SAAWrC,KAAKG,cAAckC,wBACxErC,KAAKC,WAAWqC,gCAChBtC,KAAKG,cAAcmC,2DAILtC,KAAKS,iBAAmB,oBAAsB,6CAMtF,CAEO,UAAAiB,CAAWa,GACjB,MAAMC,EAAgBD,EAAEC,cAIpBxC,KAAKK,cAAgBL,KAAKS,kBAOzB+B,IAKAxC,KAAKyC,SAASD,IACjBxC,KAAK0C,OAAOC,MAAK,GAEpB,CAEO,UAAAX,GACNhC,KAAKc,MAAO,CACb,CAEO,eAAAoB,CAAgBU,GACtBA,EAAMC,iBACND,EAAME,kBAEN9C,KAAKK,cAAe,EACpBL,KAAK+C,eAGL/C,KAAKe,eAAeC,MAAK,KACvBhB,KAAKK,cAAe,EAEpB,MAAM2C,EAAShD,KAAKI,aAAaJ,KAAKI,aAAaM,OAAS,GACtDuC,EAAcD,EAChBA,EAAO5B,cAA2B,oBAClCpB,KAAKoB,cAA2B,sBACpC6B,SAAAA,EAAaC,OAAO,GAEvB,CAEO,WAAAjB,CAAYM,GAElB,GAAIvC,KAAKK,aACP,OAGFL,KAAKmD,oBAIL,MAAMC,EAAcb,EAAEc,OACyB,iBAAzBD,eAAAA,EAAaE,UAA6BtD,KAAKyC,SAASW,KAM9EpD,KAAKc,MAAO,EACb,CAGS,gBAAAyC,SACR,GAAIvD,KAAKc,KAAM,CACb,MAAMmC,EAC4C,QAA9Cd,EAAAnC,KAAKoB,cAA2B,sBAAc,IAAAe,EAAAA,EAC3CnC,KAAKoB,cAA2B,oCAEvC6B,SAAAA,EAAaC,QACblD,KAAKwD,KAAKC,UAAY,CACvB,MACSzD,KAAKK,cAEbL,KAAKmD,mBAER,CAMD,YAAAJ,GACE,GAAiC,IAA7B/C,KAAKI,aAAaM,OACpB,OAEF,MAAMgD,EAAa1D,KAAKI,aAAaJ,KAAKI,aAAaM,OAAS,GAChEgD,EAAWC,mBAEXD,EAAWE,gBAEX,MAAMZ,EAAShD,KAAKI,aAAaJ,KAAKI,aAAaM,OAAS,GACxDsC,IACFA,EAAOa,gBAAgB,oBAEvBb,EAAOY,iBAGT5D,KAAKI,aAAeJ,KAAKI,aAAa0D,MAAM,GAAI,EACjD,CAMO,iBAAAX,GACN,IAAK,MAAMY,KAAW/D,KAAKI,aACzB2D,EAAQJ,mBACRI,EAAQF,gBAAgB,oBAE1B7D,KAAKI,aAAe,EACrB,CAMO,qBAAAqB,CAAsBmB,GAC5B,MAAMoB,EAAcpB,EACpBoB,EAAYlB,kBAEZ,MAAMmB,EAAkBjE,KAAKI,aAAaJ,KAAKI,aAAaM,OAAS,GACjEuD,IACFA,EAAgB5C,aAAa,mBAAoB,IAEjD4C,EAAgBL,iBAGlB,MAAMM,EAAaF,EAAYG,OAAOJ,QACtC/D,KAAKI,aAAe,IAAIJ,KAAKI,aAAc8D,GAG3ClE,KAAKe,eAAeC,MAAK,KACvBkD,EAAWN,eAAe,GAE7B,CAQD,IAAAjB,CAAKyB,GACH,OAAOpE,KAAK0C,OAAOC,KAAKyB,EACzB,CAOD,IAAAC,GACE,OAAOrE,KAAK0C,OAAO2B,MACpB,GA7QMzE,EAAA0E,OAAS,CAACC,EAAgBC,GAO1B5E,EAAA6E,kBAAoB,IAAK3E,EAAW2E,kBAAmBC,gBAAgB,GAKxCC,EAAA,CAArCC,EAAM,wBAAiDhF,EAAAiF,UAAA,YAAA,GACpBF,EAAA,CAAnCC,EAAM,eAAe,IAA6BhF,EAAAiF,UAAA,cAAA,GAElCF,EAAA,CAAhBG,KAAoDlF,EAAAiF,UAAA,oBAAA,GAwBTF,EAAA,CAA3CI,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAyBtF,EAAAiF,UAAA,cAAA,GAM7BF,EAAA,CAA5BI,EAAS,CAAEC,SAAS,KAAmCpF,EAAAiF,UAAA,YAAA,GAMxDF,EAAA,CADCI,EAAS,CAAEC,SAAS,EAAMC,KAAMC,QAASC,UAAW,qBACtBvF,EAAAiF,UAAA,sBAAA,GAGrBF,EAAA,CADTS,EAAQ,mBAQRxF,EAAAiF,UAAA,6BAAA,MAqHSF,EAAA,CADTS,EAAQ,OAAQ,YAchBxF,EAAAiF,UAAA,mBAAA,MAhMkBjF,EAAQ+E,EAAA,CAD5BU,EAAc,kBACMzF,SAAAA"}
|
package/lib/DropdownSubmenu.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as t,LitElement as o,html as n}from"lit";import{query as i,state as s,customElement as r}from"lit/decorators.js";import{classMap as l}from"lit/directives/class-map.js";import{E as a}from"./EventController-BBOmvfLa.js";import{s as d}from"./Component-DSU3Qp0O.js";import"./Popout-
|
|
1
|
+
import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as t,LitElement as o,html as n}from"lit";import{query as i,state as s,customElement as r}from"lit/decorators.js";import{classMap as l}from"lit/directives/class-map.js";import{E as a}from"./EventController-BBOmvfLa.js";import{s as d}from"./Component-DSU3Qp0O.js";import"./Popout-CYqn_dZu.js";import"./positioning-D-K8Mueq.js";import"./DirectionController-ChvNGESZ.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./ScrollbarController-BFC67Y2x.js";import"./observe-D0n0zOfU.js";import"./events-Bv6wNHwJ.js";const u=t`:host{display:block;--_n-submenu-focus-padding:2px}.n-dropdown-submenu-content{padding-block-start:var(--_n-submenu-content-padding-block,var(--n-space-s));padding-block-end:var(--_n-submenu-content-padding-block,var(--n-space-s));min-inline-size:var(--_n-dropdown-size);max-inline-size:calc(var(--_n-dropdown-size) * 1.5);max-block-size:var(--_n-dropdown-max-block-size);overflow-y:auto}:host([mobile-active]){--_n-submenu-content-padding-block:0}@media (max-width:35.9375em){.n-dropdown-submenu-content{max-block-size:70vh;max-inline-size:none}.n-dropdown-submenu-content.is-deepest-active{padding-block-start:var(--_n-submenu-focus-padding);padding-block-end:var(--_n-submenu-focus-padding)}:host([mobile-active]) ::slotted([slot=trigger]){display:none}:host([mobile-active][has-active-child]) ::slotted(nord-dropdown-group),:host([mobile-active][has-active-child]) ::slotted(nord-dropdown-item),:host([mobile-active][has-active-child]) ::slotted(nord-dropdown-submenu:not([mobile-active])){display:none}}::slotted(nord-dropdown-item){padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-s)}::slotted(nord-dropdown-group){padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-s);padding-block-end:var(--n-space-s);border-block-end:1px solid var(--n-color-border);margin-block-end:var(--n-space-s)}::slotted(nord-dropdown-group:last-child){padding-block-end:0;border-block-end:0;margin-block-end:0}`;let p=0,h=class extends o{constructor(){super(...arguments),this.mobileActive=!1,this.popoutId="nord-dropdown-submenu-popout-"+ ++p,this.events=new a(this),this.currentTriggerElement=null,this.popoutOpen=!1,this.mobileMediaQuery=window.matchMedia("(max-width: 35.9375em)"),this.isSmallScreen=this.mobileMediaQuery.matches,this.parentDropdownAlwaysFloating=!1,this.handleTriggerMouseEnter=()=>{var e;this.shouldUseMobileStack||(this.closeOtherSubmenus(),null===(e=this.popout)||void 0===e||e.show())},this.handleTriggerClick=e=>{var t;e.preventDefault(),e.stopImmediatePropagation(),this.shouldUseMobileStack?this.navigateIntoSubmenu():(this.closeOtherSubmenus(),null===(t=this.popout)||void 0===t||t.show())},this.handleTriggerKeydown=e=>{var t;if("ArrowRight"===e.key||"Enter"===e.key){if(e.preventDefault(),this.shouldUseMobileStack)return void this.navigateIntoSubmenu();this.closeOtherSubmenus(),null===(t=this.popout)||void 0===t||t.show(),this.updateComplete.then((()=>{var e;null===(e=this.querySelector("nord-dropdown-item"))||void 0===e||e.focus()}))}},this.handleContentKeydown=e=>{var t,o;if("ArrowLeft"===e.key){if(e.preventDefault(),e.stopPropagation(),this.shouldUseMobileStack&&this.mobileActive)return void(null===(t=this.closest("nord-dropdown"))||void 0===t||t.navigateBack());null===(o=this.popout)||void 0===o||o.hide(!0)}},this.handlePopoutOpen=()=>{this.popoutOpen=!0,this.closeOtherSubmenus()},this.handlePopoutClose=e=>{e.stopPropagation(),this.popoutOpen=!1},this.handleParentDropdownMouseOver=e=>{var t;if(this.shouldUseMobileStack)return;const o=e.target;"NORD-DROPDOWN-ITEM"===o.tagName&&!this.contains(o)&&this.popoutOpen&&(e.stopImmediatePropagation(),null===(t=this.popout)||void 0===t||t.hide())}}get shouldUseMobileStack(){return this.isSmallScreen&&!this.parentDropdownAlwaysFloating}get parentDropdown(){return this.closest("nord-dropdown")}get isInSubmenuStack(){const e=this.parentDropdown;return!!e&&e.submenuStackRef.includes(this)}get isDeepestInStack(){const e=this.parentDropdown;return!!e&&e.deepestSubmenu===this}connectedCallback(){super.connectedCallback();const e=this.querySelector('[slot="trigger"]');null==e||e.setAttribute("aria-haspopup","menu");const t=this.closest("nord-dropdown");t&&(this.parentDropdownAlwaysFloating=t.alwaysFloating,this.events.listen(t,"mouseover",this.handleParentDropdownMouseOver),this.parentObserver=new MutationObserver((e=>{for(const o of e)"always-floating"===o.attributeName&&(this.parentDropdownAlwaysFloating=t.alwaysFloating)})),this.parentObserver.observe(t,{attributes:!0,attributeFilter:["always-floating"]})),this.events.listen(this.mobileMediaQuery,"change",(e=>{this.isSmallScreen=e.matches,this.requestUpdate()}))}disconnectedCallback(){var e;super.disconnectedCallback(),null===(e=this.parentObserver)||void 0===e||e.disconnect()}render(){return this.shouldUseMobileStack&&this.mobileActive?n`<slot name="trigger"></slot><div class="${l({"n-dropdown-submenu-content":!0,active:this.isInSubmenuStack,"is-deepest-active":this.isDeepestInStack})}" @keydown="${this.handleContentKeydown}"><slot></slot></div>`:n`<slot name="trigger" aria-controls="${this.popoutId}" @slotchange="${this.handleTriggerSlotChange}"></slot><nord-popout id="${this.popoutId}" position="inline-end" always-floating @open="${this.handlePopoutOpen}" @close="${this.handlePopoutClose}"><div class="n-dropdown-submenu-content" @keydown="${this.handleContentKeydown}"><slot></slot></div></nord-popout>`}handleTriggerSlotChange(){var e;const t=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector('slot[name="trigger"]'),o=null==t?void 0:t.assignedElements()[0];if(this.currentTriggerElement&&this.currentTriggerElement!==o&&(this.currentTriggerElement.removeEventListener("mouseenter",this.handleTriggerMouseEnter),this.currentTriggerElement.removeEventListener("click",this.handleTriggerClick),this.currentTriggerElement.removeEventListener("keydown",this.handleTriggerKeydown)),this.currentTriggerElement=null!=o?o:null,!o)return;o.setAttribute("aria-haspopup","menu");const n=!window.matchMedia("(hover: hover)").matches;this.events.listen(o,"mouseenter",this.handleTriggerMouseEnter),n&&!this.isSmallScreen||this.events.listen(o,"click",this.handleTriggerClick),this.events.listen(o,"keydown",this.handleTriggerKeydown)}closeOtherSubmenus(){var e;if(this.shouldUseMobileStack)return;const t=null===(e=this.parentElement)||void 0===e?void 0:e.closest("nord-dropdown, nord-dropdown-submenu");t&&Array.from(t.querySelectorAll(":scope > nord-dropdown-submenu")).forEach((e=>{e!==this&&e.close()}))}deactivateMobile(){var e;this.mobileActive=!1,this.removeAttribute("mobile-active");const t=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector('slot[name="trigger"]'),o=null==t?void 0:t.assignedElements()[0];null==o||o.removeAttribute("aria-expanded")}get label(){var e,t,o,n;const i=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector('slot[name="trigger"]');return null!==(n=null===(o=null===(t=null==i?void 0:i.assignedElements()[0])||void 0===t?void 0:t.textContent)||void 0===o?void 0:o.trim())&&void 0!==n?n:""}close(){return this.mobileActive?(this.deactivateMobile(),Promise.resolve()):this.popout?this.popout.hide():Promise.reject(new Error("DropdownSubmenu: popout component not found or not ready"))}navigateIntoSubmenu(){this.mobileActive=!0,this.setAttribute("mobile-active",""),this.dispatchEvent(new CustomEvent("nord-submenu-navigate",{bubbles:!0,detail:{submenu:this}})),this.updateComplete.then((()=>{const e=this.querySelector(".n-dropdown-submenu-content"),t=null==e?void 0:e.querySelector("nord-dropdown-item");null==t||t.focus()}))}};h.styles=[d,u],e([i("nord-popout")],h.prototype,"popout",void 0),e([s()],h.prototype,"mobileActive",void 0),e([s()],h.prototype,"isSmallScreen",void 0),e([s()],h.prototype,"parentDropdownAlwaysFloating",void 0),h=e([r("nord-dropdown-submenu")],h);var c=h;export{c as default};
|
|
2
2
|
//# sourceMappingURL=DropdownSubmenu.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{S as t}from"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";function o(t){return o=>{o.preventDefault(),t(o)}}class r{constructor(r,s){this.host=r,r.addController(this),this.commandShortcuts=new t(r),this.globalShortcuts=new t(r,{"$mod+k":o(s.toggleOpen)}),this.navigationShortcuts=new t(r,{Enter:o(s.trigger),Backspace:s.goBack,End:o(s.end),Home:o(s.start),ArrowDown:o(s.next),ArrowUp:o(s.previous)},r)}registerCommandShortcuts(){const t={};for(const o of this.host.commands)o.shortcut&&(t[o.shortcut]=
|
|
1
|
+
import{S as t}from"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";function o(t){return o=>{o.preventDefault(),t(o)}}class r{constructor(r,s){this.host=r,r.addController(this),this.commandShortcuts=new t(r),this.globalShortcuts=new t(r,{"$mod+k":o(s.toggleOpen)}),this.navigationShortcuts=new t(r,{Enter:o(s.trigger),Backspace:s.goBack,End:o(s.end),Home:o(s.start),ArrowDown:o(s.next),ArrowUp:o(s.previous)},r)}registerCommandShortcuts(){const t={};for(const o of this.host.commands)o.shortcut&&(t[o.shortcut]=t=>{var r;o.forceShortcut&&t.preventDefault(),null===(r=o.handler)||void 0===r||r.call(o,this.host)});this.commandShortcuts.bind(t)}}export{r as KeyboardController};
|
|
2
2
|
//# sourceMappingURL=KeyboardController.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KeyboardController.js","sources":["../src/command-menu/KeyboardController.ts"],"sourcesContent":["import type { ReactiveController } from 'lit'\nimport type { ShortcutMap } from '../common/controllers/ShortcutController.js'\nimport type CommandMenu from './CommandMenu.js'\nimport { ShortcutController } from '../common/controllers/ShortcutController.js'\n\ninterface KeyboardActions {\n trigger: () => void\n goBack: () => void\n start: () => void\n end: () => void\n next: () => void\n previous: () => void\n toggleOpen: () => void\n}\n\nfunction preventDefault(fn: (e: Event) => void) {\n return (e: Event) => {\n e.preventDefault()\n fn(e)\n }\n}\n\nexport class KeyboardController {\n private globalShortcuts: ShortcutController\n private navigationShortcuts: ShortcutController\n private commandShortcuts: ShortcutController\n\n constructor(\n private host: CommandMenu,\n actions: KeyboardActions,\n ) {\n host.addController(this as ReactiveController)\n\n this.commandShortcuts = new ShortcutController(host)\n this.globalShortcuts = new ShortcutController(host, { '$mod+k': preventDefault(actions.toggleOpen) })\n this.navigationShortcuts = new ShortcutController(\n host,\n {\n Enter: preventDefault(actions.trigger),\n Backspace: actions.goBack, // we don't want to prevent default, since that would stop backspace deleting chars\n End: preventDefault(actions.end),\n Home: preventDefault(actions.start),\n ArrowDown: preventDefault(actions.next),\n ArrowUp: preventDefault(actions.previous),\n },\n host,\n )\n }\n\n registerCommandShortcuts() {\n const shortcuts: ShortcutMap = {}\n\n for (const command of this.host.commands) {\n if (command.shortcut) {\n shortcuts[command.shortcut] = () => command.handler?.(this.host)\n }\n }\n\n this.commandShortcuts.bind(shortcuts)\n }\n}\n"],"names":["preventDefault","fn","e","KeyboardController","constructor","host","actions","this","addController","commandShortcuts","ShortcutController","globalShortcuts","toggleOpen","navigationShortcuts","Enter","trigger","Backspace","goBack","End","end","Home","start","ArrowDown","next","ArrowUp","previous","registerCommandShortcuts","shortcuts","command","commands","shortcut","_a","handler","call","bind"],"mappings":"2FAeA,SAASA,EAAeC,GACtB,OAAQC,IACNA,EAAEF,iBACFC,EAAGC,EAAE,CAET,OAEaC,EAKX,WAAAC,CACUC,EACRC,GADQC,KAAIF,KAAJA,EAGRA,EAAKG,cAAcD,MAEnBA,KAAKE,iBAAmB,IAAIC,EAAmBL,GAC/CE,KAAKI,gBAAkB,IAAID,EAAmBL,EAAM,CAAE,SAAUL,EAAeM,EAAQM,cACvFL,KAAKM,oBAAsB,IAAIH,EAC7BL,EACA,CACES,MAAOd,EAAeM,EAAQS,SAC9BC,UAAWV,EAAQW,OACnBC,IAAKlB,EAAeM,EAAQa,KAC5BC,KAAMpB,EAAeM,EAAQe,OAC7BC,UAAWtB,EAAeM,EAAQiB,MAClCC,QAASxB,EAAeM,EAAQmB,WAElCpB,EAEH,CAED,wBAAAqB,GACE,MAAMC,EAAyB,CAAA,EAE/B,IAAK,MAAMC,KAAWrB,KAAKF,KAAKwB,SAC1BD,EAAQE,WACVH,EAAUC,EAAQE,
|
|
1
|
+
{"version":3,"file":"KeyboardController.js","sources":["../src/command-menu/KeyboardController.ts"],"sourcesContent":["import type { ReactiveController } from 'lit'\nimport type { ShortcutMap } from '../common/controllers/ShortcutController.js'\nimport type CommandMenu from './CommandMenu.js'\nimport { ShortcutController } from '../common/controllers/ShortcutController.js'\n\ninterface KeyboardActions {\n trigger: () => void\n goBack: () => void\n start: () => void\n end: () => void\n next: () => void\n previous: () => void\n toggleOpen: () => void\n}\n\nfunction preventDefault(fn: (e: Event) => void) {\n return (e: Event) => {\n e.preventDefault()\n fn(e)\n }\n}\n\nexport class KeyboardController {\n private globalShortcuts: ShortcutController\n private navigationShortcuts: ShortcutController\n private commandShortcuts: ShortcutController\n\n constructor(\n private host: CommandMenu,\n actions: KeyboardActions,\n ) {\n host.addController(this as ReactiveController)\n\n this.commandShortcuts = new ShortcutController(host)\n this.globalShortcuts = new ShortcutController(host, { '$mod+k': preventDefault(actions.toggleOpen) })\n this.navigationShortcuts = new ShortcutController(\n host,\n {\n Enter: preventDefault(actions.trigger),\n Backspace: actions.goBack, // we don't want to prevent default, since that would stop backspace deleting chars\n End: preventDefault(actions.end),\n Home: preventDefault(actions.start),\n ArrowDown: preventDefault(actions.next),\n ArrowUp: preventDefault(actions.previous),\n },\n host,\n )\n }\n\n registerCommandShortcuts() {\n const shortcuts: ShortcutMap = {}\n\n for (const command of this.host.commands) {\n if (command.shortcut) {\n shortcuts[command.shortcut] = (event: Event) => {\n // The handler always fires. Only override the browser default when the\n // command explicitly opts in via `forceShortcut`, acknowledging it is\n // reclaiming a combo the browser may reserve (e.g. Alt+D = address bar).\n if (command.forceShortcut) {\n event.preventDefault()\n }\n command.handler?.(this.host)\n }\n }\n }\n\n this.commandShortcuts.bind(shortcuts)\n }\n}\n"],"names":["preventDefault","fn","e","KeyboardController","constructor","host","actions","this","addController","commandShortcuts","ShortcutController","globalShortcuts","toggleOpen","navigationShortcuts","Enter","trigger","Backspace","goBack","End","end","Home","start","ArrowDown","next","ArrowUp","previous","registerCommandShortcuts","shortcuts","command","commands","shortcut","event","forceShortcut","_a","handler","call","bind"],"mappings":"2FAeA,SAASA,EAAeC,GACtB,OAAQC,IACNA,EAAEF,iBACFC,EAAGC,EAAE,CAET,OAEaC,EAKX,WAAAC,CACUC,EACRC,GADQC,KAAIF,KAAJA,EAGRA,EAAKG,cAAcD,MAEnBA,KAAKE,iBAAmB,IAAIC,EAAmBL,GAC/CE,KAAKI,gBAAkB,IAAID,EAAmBL,EAAM,CAAE,SAAUL,EAAeM,EAAQM,cACvFL,KAAKM,oBAAsB,IAAIH,EAC7BL,EACA,CACES,MAAOd,EAAeM,EAAQS,SAC9BC,UAAWV,EAAQW,OACnBC,IAAKlB,EAAeM,EAAQa,KAC5BC,KAAMpB,EAAeM,EAAQe,OAC7BC,UAAWtB,EAAeM,EAAQiB,MAClCC,QAASxB,EAAeM,EAAQmB,WAElCpB,EAEH,CAED,wBAAAqB,GACE,MAAMC,EAAyB,CAAA,EAE/B,IAAK,MAAMC,KAAWrB,KAAKF,KAAKwB,SAC1BD,EAAQE,WACVH,EAAUC,EAAQE,UAAaC,UAIzBH,EAAQI,eACVD,EAAM/B,iBAEO,QAAfiC,EAAAL,EAAQM,eAAO,IAAAD,GAAAA,EAAAE,KAAAP,EAAGrB,KAAKF,KAAK,GAKlCE,KAAKE,iBAAiB2B,KAAKT,EAC5B"}
|
package/lib/Layout.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{l as t}from"./NavToggle-DzKbd-El.js";import{css as n,LitElement as a,html as o,nothing as i}from"lit";import{query as s,state as r,property as l,customElement as d}from"lit/decorators.js";import{classMap as h}from"lit/directives/class-map.js";import{styleMap as c}from"lit/directives/style-map.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
|
|
1
|
+
import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{l as t}from"./NavToggle-DzKbd-El.js";import{css as n,LitElement as a,html as o,nothing as i}from"lit";import{query as s,state as r,property as l,customElement as d}from"lit/decorators.js";import{classMap as h}from"lit/directives/class-map.js";import{styleMap as c}from"lit/directives/style-map.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 m}from"./SlotController-Z6eG7LSZ.js";import{o as y}from"./observe-D0n0zOfU.js";import{c as g}from"./cond-CI1KbneT.js";import{f as b}from"./fsm-Bq5jMQrK.js";import{c as f}from"./number-Dg2vCfGd.js";import{s as w}from"./storage-CGZ-YX4-.js";import{s as z}from"./Component-DSU3Qp0O.js";import{s as k}from"./Sticky-DqnqENYN.js";import x from"./Icon.js";import{NavOpenChangeEvent as S}from"./NavOpenChangeEvent.js";import{NavResizeEvent as N}from"./NavResizeEvent.js";import"./Tooltip.js";import"lit/directives/ref.js";import"./FocusableMixin-BlQLNPdJ.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"./Button.js";import"./LightDomController-DIwtVelV.js";import"./InputMixin-LetXsCyv.js";import"./Spinner.js";import"lit/directives/if-defined.js";import"./VisuallyHidden.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";import"./events-Bv6wNHwJ.js";import"./positioning-D-K8Mueq.js";const _=()=>!0;class C{constructor(e,t){e.addController(this),this.options={enabled:_,...t}}hostConnected(){"undefined"!=typeof BroadcastChannel&&(this.channel=new BroadcastChannel(this.options.channelName),this.channel.addEventListener("message",this))}hostDisconnected(){var e,t;null===(e=this.channel)||void 0===e||e.removeEventListener("message",this),null===(t=this.channel)||void 0===t||t.close()}handleEvent(e){this.options.enabled()&&this.options.onMessage(e.data)}post(e){var t;this.options.enabled()&&(null===(t=this.channel)||void 0===t||t.postMessage(e))}}const W=n`: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-drawer-min-inline-size:var(--n-layout-drawer-min-inline-size, 0px);--_n-layout-background-color:var(--n-layout-background-color, var(--n-color-background));--_n-layout-nav-border-color:var(--n-layout-nav-border-color, var(--n-color-border));--_n-layout-nav-transition-duration:var(--n-transition-mobile);--_n-layout-header-size:var(--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);--n-layout-main-min-inline-size:0;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) - var(--n-layout-block-size-offset,0px))}.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-layout-nav-z-index,var(--n-index-top-bar));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)}[data-screen=wide][data-collapse-mode=hide]:is(:not([data-nav=opened],[data-nav=closed])) .n-layout-nav{inline-size:fit-content;min-inline-size:var(--_n-layout-nav-min-width);max-inline-size:min(var(--_n-layout-nav-max-width),100dvw)}[data-screen=wide][data-collapse-mode=hide]:is(:not([data-nav=opened],[data-nav=closed])) .n-layout-nav>slot[name=nav]::slotted(*){inline-size:100%}.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;display:block;inset-inline-start:0;inset-inline-end:0;z-index:var(--n-layout-sticky-footer-z-index,calc(var(--n-index-top-bar,1000) + 1))}:host([sticky-footer][nav-open]) .n-has-footer slot[name=footer]::slotted(*){inset-inline-start:250px!important}@media (min-width:768px){:host([sticky-footer]) .n-has-drawer.n-has-footer slot[name=footer]::slotted(*){--n-footer-padding-inline-end:calc(
|
|
2
2
|
var(--n-footer-padding-inline, var(--n-space-l)) + var(--_n-layout-drawer-min-inline-size, 0px)
|
|
3
|
-
)}}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-layout-drawer-background-color,var(--n-color-surface));box-shadow:var(--n-layout-drawer-box-shadow,var(--n-box-shadow-nav))}:host([sticky-footer]) .n-has-footer aside{inset-block-end:var(--n-layout-footer-block-size,var(--_n-layout-footer-size))}.n-has-drawer .n-layout-content{margin-inline-end:var(--_n-layout-drawer-min-inline-size)}@media (min-width:1240px){:host{--n-layout-main-min-inline-size:600px}.n-has-drawer .n-layout-content{margin-inline-end:var(--_n-layout-drawer-inline-size)}aside{box-shadow:var(--n-layout-drawer-box-shadow-wide,var(--n-box-shadow-header));border-inline-start:var(--n-layout-drawer-border-inline-start-width,0) solid var(--n-layout-drawer-border-inline-start-color,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=wide][data-collapse-mode=rail]:is([data-nav=closed],[data-nav=peek],[data-nav=unpeek],[data-nav=wait]) .n-layout-nav{transform:none;inline-size:var(--_n-layout-nav-rail-width);inset-block:0;border-start-end-radius:0;border-end-end-radius:0;border-inline-end:1px solid var(--_n-layout-nav-border-color);box-shadow:none;overflow:visible}[data-screen=wide][data-collapse-mode=rail]:not([data-nav=opened]) .n-layout-main{margin-inline-start:var(--_n-layout-nav-rail-width)}[data-screen=wide][data-collapse-mode=rail]:not([data-nav=opened]) .n-top-bar-container{inset-inline-start:var(--_n-layout-nav-rail-width)}[data-screen=wide][data-collapse-mode=rail]:not([data-nav=opened]) slot[name=footer]::slotted(*){inset-inline-start:var(--_n-layout-nav-rail-width)}[data-screen=wide][data-collapse-mode=rail]:not([data-nav=opened]) .n-collapse-btn{display:flex}[data-screen=wide][data-collapse-mode=rail]:not([data-nav=opened]) .n-collapse-btn nord-icon{transform:rotate(0)}.n-rtl[data-screen=wide][data-collapse-mode=rail]:not([data-nav=opened]) .n-collapse-btn nord-icon{transform:rotate(180deg)}[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-layout-nav-border-color);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:rgb(255, 255, 255, 0.85);--n-navigation-header-focus-style:0 0 0 1px #fff inset,inset 0 0 0 100px rgb(255, 255, 255, 0.2);border-color:transparent;border-image-slice:1;border-image-source:linear-gradient(to bottom,rgb(255,255,255,.16) calc(var(--_n-layout-header-size) + 1px),var(--_n-layout-nav-border-color) 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;block-size:var(--n-layout-resize-block-size,100%);inset-block:0;margin-block:auto;inset-inline-end:-8px;inline-size:10px;background:0 0}[data-nav=opened] .n-resize,[data-screen=wide][data-collapse-mode=rail]:not([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-layout-resize-color,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,[data-screen=wide][data-collapse-mode=rail]:not([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;user-select:none}.n-resize-tooltip{transform:translateY(var(--n-resize-tooltip-y,0))}.n-dragging .n-resize-tooltip{visibility:hidden!important;opacity:0!important}: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}:host(:not([hide-default-nav-toggle])) .n-has-nav[data-screen=wide]:not([data-nav=opened]) ::slotted(nord-top-bar),:host(:not([hide-default-nav-toggle])) .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)}:host(:not([hide-default-nav-toggle])) .n-has-nav[data-screen=narrow] ::slotted(nord-top-bar),:host(:not([hide-default-nav-toggle])) .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:rgb(255,255,255,.85)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)):focus{--n-button-background-color:rgb(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)}@media (max-width:767px){:host([data-narrow-floating-drawer]) aside,:host([data-narrow-rail-bottom]) aside{inline-size:0;pointer-events:none;z-index:var(--n-layout-aside-narrow-z-index,calc(var(--n-index-top-bar,1000) + 5))}:host([sticky-footer][data-narrow-rail-bottom]) .n-has-footer slot[name=footer]::slotted(*){inset-block-end:var(--n-aside-rail-narrow-block-size,56px)}:host([data-narrow-rail-bottom]) .n-layout-content{padding-block-end:var(--n-aside-rail-narrow-block-size,56px)}:host([sticky-footer][data-narrow-rail-bottom]) .n-layout-content{padding-block-end:calc(var(--n-aside-rail-narrow-block-size,56px) + var(--n-layout-footer-block-size,var(--_n-layout-footer-size,0px)))}}`;x.registerIcon(t);let W=0;const E=250,j="undefined"!=typeof matchMedia?matchMedia("(min-width: 768px)"):{matches:!1,addEventListener(){}},M=w("nord-layout.navWidth",E),O=w("nord-layout.navWidthDefault",E),D=w("nord-layout.navOpen",!0);function $(e){for(const t of e)if(t instanceof HTMLElement&&"nord-nav-toggle"===t.localName)return t;return null}function L(e){return null!==$(e.composedPath())}const R=m({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 H=class extends a{constructor(){super(...arguments),this.resizeTooltipId="n-layout-resize-tip-"+ ++W,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.dividerTooltipSlot=new g(this,"tooltip-divider"),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:e=>e!==this.navEl}),this.applyingRemote=!1,this.broadcast=new _(this,{channelName:"nord-layout-nav-state",enabled:()=>this.syncNavState&&this.wideScreen,onMessage:e=>{this.applyingRemote=!0,"navOpen"in e&&(this.navOpen=e.navOpen),"navWidth"in e&&(this.navWidth=e.navWidth),this.updateComplete.then((()=>{this.applyingRemote=!1}))}}),this.navWidth=M.value,this.isDragging=!1,this.wideScreen=j.matches,this.persistNavState=!1,this.syncNavState=!1,this.defaultNavWidth=E,this.minNavWidth=220,this.maxNavWidth=400,this.navRailWidth=64,this.padding="m",this.sticky=!1,this.stickyFooter=!1,this.hideDefaultNavToggle=!1,this.hideCollapseButton=!1,this.toggleOnResizeClick=!1,this.collapseMode="hide",this.handleFooterSlotChange=()=>{var e,t;const n=null===(e=this.footerSlotEl)||void 0===e?void 0:e.assignedElements({flatten:!0})[0];n!==this.observedFooterElement&&(null===(t=this.footerSizeObserver)||void 0===t||t.disconnect(),this.observedFooterElement=n,n?(this.footerSizeObserver=new ResizeObserver((()=>this.publishFooterSize())),this.footerSizeObserver.observe(n),this.publishFooterSize()):this.style.removeProperty("--n-layout-footer-block-size"))},this.handleMediaQueryChange=()=>{this.wideScreen=j.matches,this.navTransition(this.wideScreen?"open":"close")},this.handleToggleClick=e=>{L(e)||this.navTransition("toggle")},this.handleHostClick=e=>{L(e)&&this.navTransition("toggle")},this.handleHostMouseOver=e=>{const t=$(e.composedPath());t&&(e.relatedTarget instanceof Node&&t.contains(e.relatedTarget)||this.handleMouseEnter())},this.handleHostMouseOut=e=>{const t=$(e.composedPath());t&&(e.relatedTarget instanceof Node&&t.contains(e.relatedTarget)||this.handleMouseLeave())},this.handleNavFocus=()=>{this.wideScreen&&"rail"===this.collapseMode||this.navTransition("focusin")},this.handleMainFocus=()=>{this.navTransition("focusout")},this.handleMouseEnter=()=>{this.wideScreen&&"rail"!==this.collapseMode&&this.navTransition("pointerenter")},this.handleMouseLeave=()=>{this.wideScreen&&"rail"===this.collapseMode||this.navTransition("pointerleave")},this.handleTransitionEnd=()=>{this.navTransition("transitionend")},this.dragStartX=0,this.hasDragged=!1,this.handleResizeHoverMove=e=>{const t=e.currentTarget;if(!t||!this.resizeTooltipEl)return;const n=t.getBoundingClientRect(),a=e.clientY-(n.top+n.height/2);this.resizeTooltipEl.style.setProperty("--n-resize-tooltip-y",`${a}px`)},this.handleResizePointerLeave=()=>{var e;this.stopDragging(),null===(e=this.resizeTooltipEl)||void 0===e||e.style.removeProperty("--n-resize-tooltip-y")}}get isNarrow(){return!this.wideScreen}connectedCallback(){super.connectedCallback(),this.events.listen(j,"change",this.handleMediaQueryChange),this.addEventListener("click",this.handleHostClick),this.addEventListener("mouseover",this.handleHostMouseOver),this.addEventListener("mouseout",this.handleHostMouseOut)}disconnectedCallback(){var e,t;super.disconnectedCallback(),this.removeEventListener("click",this.handleHostClick),this.removeEventListener("mouseover",this.handleHostMouseOver),this.removeEventListener("mouseout",this.handleHostMouseOut),null===(e=this.headerSizeObserver)||void 0===e||e.disconnect(),this.headerSizeObserver=void 0,null===(t=this.footerSizeObserver)||void 0===t||t.disconnect(),this.footerSizeObserver=void 0,this.observedFooterElement=void 0,this.style.removeProperty("--n-layout-header-block-size"),this.style.removeProperty("--n-layout-footer-block-size")}firstUpdated(){"undefined"!=typeof ResizeObserver&&(this.stickyHeaderEl&&(this.headerSizeObserver=new ResizeObserver((()=>this.publishHeaderSize())),this.headerSizeObserver.observe(this.stickyHeaderEl),this.publishHeaderSize()),this.footerSlotEl&&(this.footerSlotEl.addEventListener("slotchange",this.handleFooterSlotChange),this.handleFooterSlotChange()))}publishHeaderSize(){var e,t;const n=null!==(t=null===(e=this.stickyHeaderEl)||void 0===e?void 0:e.getBoundingClientRect().height)&&void 0!==t?t:0;n>0?this.style.setProperty("--n-layout-header-block-size",`${n}px`):this.style.removeProperty("--n-layout-header-block-size")}publishFooterSize(){var e,t;const n=null!==(t=null===(e=this.observedFooterElement)||void 0===e?void 0:e.getBoundingClientRect().height)&&void 0!==t?t:0;n>0?this.style.setProperty("--n-layout-footer-block-size",`${n}px`):this.style.removeProperty("--n-layout-footer-block-size")}willUpdate(){this.hasUpdated||(Number.isFinite(this.defaultNavWidth)||(this.defaultNavWidth=E),Number.isFinite(this.minNavWidth)||(this.minNavWidth=220),Number.isFinite(this.maxNavWidth)||(this.maxNavWidth=400),O.value!==this.defaultNavWidth?(this.setNavWidth(this.defaultNavWidth),M.value=this.navWidth,O.value=this.defaultNavWidth):this.setNavWidth(this.navWidth),this.isNarrow||this.persistNavState&&!1===D.value?this.navState="closed":this.navState="opened")}render(){const{navWidth:e,navState:t,navSlot:n,headerSlot:a,footerSlot:s,topBarSlot:r,drawerSlot:l,isDragging:d,direction:v}=this,p=this.wideScreen&&"rail"===this.collapseMode&&"opened"!==t,u="opened"===t&&this.wideScreen?e:p?64:this.defaultNavWidth;return o`<div class="${h({"n-layout":!0,"n-rtl":v.isRTL,"n-dragging":d,"n-has-header":a.hasContent,"n-has-footer":s.hasContent,"n-has-top-bar":r.hasContent,"n-has-drawer":l.hasContent,"n-has-nav":n.hasContent})}" style="${c({"--_n-layout-nav-width":`${u}px`,"--_n-layout-nav-rail-width":`var(--n-layout-nav-rail-width, ${this.navRailWidth}px)`})}" data-nav="${n.hasContent?t:"closed"}" data-screen="${this.wideScreen?"wide":"narrow"}" data-collapse-mode="${this.collapseMode}"><div class="n-layout-nav" ?hidden="${n.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" aria-describedby="${y(this.dividerTooltipSlot.hasContent&&!d,this.resizeTooltipId)}" @pointerdown="${y("opened"===t||p,this.startDragging)}" @pointermove="${d?this.handleDrag:this.handleResizeHoverMove}" @pointerleave="${this.handleResizePointerLeave}" @pointerup="${this.stopDragging}" @keydown="${this.handleKeyboardResize}" ?hidden="${this.isNarrow}"></div>${this.dividerTooltipSlot.hasContent?o`<nord-tooltip id="${this.resizeTooltipId}" position="inline-end" class="n-resize-tooltip"><slot name="tooltip-divider"></slot></nord-tooltip>`:i} ${this.hideCollapseButton?i:this.renderNavCollapse()}</div><div class="n-layout-main" @focusin="${this.handleMainFocus}" @click="${this.handleMainClick}">${n.hasContent&&!this.hideDefaultNavToggle?this.renderNavToggle():i}<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 o`<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 o`<button class="n-collapse-btn" @click="${this.handleToggleClick}"><nord-icon name="navigation-toggle-lock" size="s"></nord-icon></button>`}handleNavWidthChange(e){if(M.value=this.navWidth,null!=e){const e=this.navWidth;this.dispatchEvent(new N(e))}}handleNavStateChange(e){switch("wait"===e&&this.peekTimeoutId&&clearTimeout(this.peekTimeoutId),"unpeek"===e&&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(e){if(this.isDragging||this.setNavWidth(Math.max(this.navWidth,this.defaultNavWidth)),this.navTransition(this.navOpen?"open":"close"),this.persistNavState&&(D.value=this.navOpen),null!=e){const e=this.navOpen;this.applyingRemote||this.broadcast.post({navOpen:e}),this.dispatchEvent(new S(e))}}navTransition(e){this.navState=R.transition(this.navState,e)}handleNavClick(e){if(!e.defaultPrevented&&!this.wideScreen){const n=e.target;(e=>"nord-nav-item"===e.localName)(t=n)&&!t.hasSubNav&&this.navTransition("close")}var t}handleMainClick(){this.navTransition("click")}handleDropdownOpen(e){"nord-dropdown"===e.target.localName&&this.navTransition("dropdownOpen")}handleDropdownClose(e){"nord-dropdown"===e.target.localName&&this.navTransition("dropdownClose")}handleKeyboardResize(e){const{navWidth:t,direction:{isLTR:n}}=this;switch(e.key){case"ArrowLeft":this.setNavWidth(t+(n?-30:30));break;case"ArrowRight":this.setNavWidth(t+(n?30:-30));break;case"Enter":this.navTransition("toggle");break;case"Home":this.setNavWidth(this.minNavWidth);break;case"End":this.setNavWidth(this.maxNavWidth);break;default:return}this.broadcast.post({navWidth:this.navWidth}),e.preventDefault()}setNavWidth(e){this.navWidth=f(Math.round(e),this.minNavWidth,this.maxNavWidth)}startDragging(e){if(0===e.button){e.target.setPointerCapture(e.pointerId),this.isDragging=!0,this.dragStartX=e.clientX,this.hasDragged=!1}}stopDragging(){this.isDragging&&this.toggleOnResizeClick&&!this.hasDragged&&this.navTransition("toggle"),this.isDragging=!1,this.hasDragged=!1,this.broadcast.post({navWidth:this.navWidth})}handleDrag(e){if(!this.hasDragged&&Math.abs(e.clientX-this.dragStartX)<4)return;this.hasDragged=!0;const t=this.direction.isRTL?this.clientWidth-e.clientX:e.clientX;this.setNavWidth(t),this.navTransition(t>=100?"open":"close")}};H.styles=[k,z,T],e([s(".n-layout-nav",!0)],H.prototype,"navEl",void 0),e([s(".n-resize-tooltip")],H.prototype,"resizeTooltipEl",void 0),e([s(".n-sticky")],H.prototype,"stickyHeaderEl",void 0),e([s('slot[name="footer"]')],H.prototype,"footerSlotEl",void 0),e([r()],H.prototype,"navWidth",void 0),e([r()],H.prototype,"isDragging",void 0),e([r()],H.prototype,"navState",void 0),e([r()],H.prototype,"wideScreen",void 0),e([l({reflect:!0,type:Boolean,attribute:"nav-open"})],H.prototype,"navOpen",void 0),e([l({reflect:!0,type:Boolean,attribute:"persist-nav-state"})],H.prototype,"persistNavState",void 0),e([l({type:Boolean,reflect:!0,attribute:"sync-nav-state"})],H.prototype,"syncNavState",void 0),e([l({type:Number,reflect:!0,attribute:"default-nav-width"})],H.prototype,"defaultNavWidth",void 0),e([l({type:Number,reflect:!0,attribute:"min-nav-width"})],H.prototype,"minNavWidth",void 0),e([l({type:Number,reflect:!0,attribute:"max-nav-width"})],H.prototype,"maxNavWidth",void 0),e([l({type:Number,reflect:!0,attribute:"nav-rail-width"})],H.prototype,"navRailWidth",void 0),e([l({reflect:!0})],H.prototype,"padding",void 0),e([l({type:Boolean,reflect:!0})],H.prototype,"sticky",void 0),e([l({type:Boolean,reflect:!0,attribute:"sticky-footer"})],H.prototype,"stickyFooter",void 0),e([l({type:Boolean,reflect:!0,attribute:"hide-default-nav-toggle"})],H.prototype,"hideDefaultNavToggle",void 0),e([l({type:Boolean,reflect:!0,attribute:"hide-collapse-button"})],H.prototype,"hideCollapseButton",void 0),e([l({type:Boolean,reflect:!0,attribute:"toggle-on-resize-click"})],H.prototype,"toggleOnResizeClick",void 0),e([l({reflect:!0,attribute:"collapse-mode"})],H.prototype,"collapseMode",void 0),e([b("navWidth","updated")],H.prototype,"handleNavWidthChange",null),e([b("navState")],H.prototype,"handleNavStateChange",null),e([b("navOpen","updated")],H.prototype,"handleOpenChange",null),H=e([d("nord-layout")],H);var B=H;export{B as default};
|
|
3
|
+
)}}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-layout-drawer-background-color,var(--n-color-surface));box-shadow:var(--n-layout-drawer-box-shadow,var(--n-box-shadow-nav))}:host([sticky-footer]) .n-has-footer aside{inset-block-end:var(--n-layout-footer-block-size,var(--_n-layout-footer-size))}.n-has-drawer .n-layout-content{margin-inline-end:var(--_n-layout-drawer-min-inline-size)}@media (min-width:1240px){:host{--n-layout-main-min-inline-size:600px}.n-has-drawer .n-layout-content{margin-inline-end:var(--_n-layout-drawer-inline-size)}aside{box-shadow:var(--n-layout-drawer-box-shadow-wide,var(--n-box-shadow-header));border-inline-start:var(--n-layout-drawer-border-inline-start-width,0) solid var(--n-layout-drawer-border-inline-start-color,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=wide][data-collapse-mode=rail]:is([data-nav=closed],[data-nav=peek],[data-nav=unpeek],[data-nav=wait]) .n-layout-nav{transform:none;inline-size:var(--_n-layout-nav-rail-width);inset-block:0;border-start-end-radius:0;border-end-end-radius:0;border-inline-end:1px solid var(--_n-layout-nav-border-color);box-shadow:none;overflow:visible}[data-screen=wide][data-collapse-mode=rail]:not([data-nav=opened]) .n-layout-main{margin-inline-start:var(--_n-layout-nav-rail-width)}[data-screen=wide][data-collapse-mode=rail]:not([data-nav=opened]) .n-top-bar-container{inset-inline-start:var(--_n-layout-nav-rail-width)}[data-screen=wide][data-collapse-mode=rail]:not([data-nav=opened]) slot[name=footer]::slotted(*){inset-inline-start:var(--_n-layout-nav-rail-width)}[data-screen=wide][data-collapse-mode=rail]:not([data-nav=opened]) .n-collapse-btn{display:flex}[data-screen=wide][data-collapse-mode=rail]:not([data-nav=opened]) .n-collapse-btn nord-icon{transform:rotate(0)}.n-rtl[data-screen=wide][data-collapse-mode=rail]:not([data-nav=opened]) .n-collapse-btn nord-icon{transform:rotate(180deg)}[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-layout-nav-border-color);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:rgb(255, 255, 255, 0.85);--n-navigation-header-focus-style:0 0 0 1px #fff inset,inset 0 0 0 100px rgb(255, 255, 255, 0.2);border-color:transparent;border-image-slice:1;border-image-source:linear-gradient(to bottom,rgb(255,255,255,.16) calc(var(--_n-layout-header-size) + 1px),var(--_n-layout-nav-border-color) 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;block-size:var(--n-layout-resize-block-size,100%);inset-block:0;margin-block:auto;inset-inline-end:-8px;inline-size:10px;background:0 0}[data-nav=opened] .n-resize,[data-screen=wide][data-collapse-mode=rail]:not([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-layout-resize-color,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,[data-screen=wide][data-collapse-mode=rail]:not([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;user-select:none}.n-resize-tooltip{transform:translateY(var(--n-resize-tooltip-y,0))}.n-dragging .n-resize-tooltip{visibility:hidden!important;opacity:0!important}: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}:host(:not([hide-default-nav-toggle])) .n-has-nav[data-screen=wide]:not([data-nav=opened]) ::slotted(nord-top-bar),:host(:not([hide-default-nav-toggle])) .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)}:host(:not([hide-default-nav-toggle])) .n-has-nav[data-screen=narrow] ::slotted(nord-top-bar),:host(:not([hide-default-nav-toggle])) .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:rgb(255,255,255,.85)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)):focus{--n-button-background-color:rgb(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)}@media (max-width:767px){:host([data-narrow-floating-drawer]) aside,:host([data-narrow-rail-bottom]) aside{inline-size:0;pointer-events:none;z-index:var(--n-layout-aside-narrow-z-index,calc(var(--n-index-top-bar,1000) + 5))}:host([sticky-footer][data-narrow-rail-bottom]) .n-has-footer slot[name=footer]::slotted(*){inset-block-end:var(--n-aside-rail-narrow-block-size,56px)}:host([data-narrow-rail-bottom]) .n-layout-content{padding-block-end:var(--n-aside-rail-narrow-block-size,56px)}:host([sticky-footer][data-narrow-rail-bottom]) .n-layout-content{padding-block-end:calc(var(--n-aside-rail-narrow-block-size,56px) + var(--n-layout-footer-block-size,var(--_n-layout-footer-size,0px)))}}`;x.registerIcon(t);let T=0;const E=250,j="undefined"!=typeof matchMedia?matchMedia("(min-width: 768px)"):{matches:!1,addEventListener(){}},M=w("nord-layout.navWidth",E),O=w("nord-layout.navWidthDefault",E),D=w("nord-layout.navOpen",!0);function $(e){for(const t of e)if(t instanceof HTMLElement&&"nord-nav-toggle"===t.localName)return t;return null}function L(e){return null!==$(e.composedPath())}const R=b({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 H=class extends a{constructor(){super(...arguments),this.resizeTooltipId="n-layout-resize-tip-"+ ++T,this.navSlot=new m(this,"nav"),this.drawerSlot=new m(this,"drawer"),this.topBarSlot=new m(this,"top-bar"),this.headerSlot=new m(this,"header"),this.footerSlot=new m(this,"footer"),this.dividerTooltipSlot=new m(this,"tooltip-divider"),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:e=>e!==this.navEl}),this.applyingRemote=!1,this.broadcast=new C(this,{channelName:"nord-layout-nav-state",enabled:()=>this.syncNavState&&this.wideScreen,onMessage:e=>{this.applyingRemote=!0,"navOpen"in e&&(this.navOpen=e.navOpen),"navWidth"in e&&(this.navWidth=e.navWidth),this.updateComplete.then((()=>{this.applyingRemote=!1}))}}),this.navWidth=M.value,this.isDragging=!1,this.wideScreen=j.matches,this.persistNavState=!1,this.syncNavState=!1,this.defaultNavWidth=E,this.minNavWidth=220,this.maxNavWidth=400,this.navRailWidth=64,this.padding="m",this.sticky=!1,this.stickyFooter=!1,this.hideDefaultNavToggle=!1,this.hideCollapseButton=!1,this.toggleOnResizeClick=!1,this.collapseMode="hide",this.handleFooterSlotChange=()=>{var e,t;const n=null===(e=this.footerSlotEl)||void 0===e?void 0:e.assignedElements({flatten:!0})[0];n!==this.observedFooterElement&&(null===(t=this.footerSizeObserver)||void 0===t||t.disconnect(),this.observedFooterElement=n,n?(this.footerSizeObserver=new ResizeObserver((()=>this.publishFooterSize())),this.footerSizeObserver.observe(n),this.publishFooterSize()):this.style.removeProperty("--n-layout-footer-block-size"))},this.handleMediaQueryChange=()=>{this.wideScreen=j.matches,this.navTransition(this.wideScreen?"open":"close")},this.handleToggleClick=e=>{L(e)||this.navTransition("toggle")},this.handleHostClick=e=>{L(e)&&this.navTransition("toggle")},this.handleHostMouseOver=e=>{const t=$(e.composedPath());t&&(e.relatedTarget instanceof Node&&t.contains(e.relatedTarget)||this.handleMouseEnter())},this.handleHostMouseOut=e=>{const t=$(e.composedPath());t&&(e.relatedTarget instanceof Node&&t.contains(e.relatedTarget)||this.handleMouseLeave())},this.handleNavFocus=()=>{this.wideScreen&&"rail"===this.collapseMode||this.navTransition("focusin")},this.handleMainFocus=()=>{this.navTransition("focusout")},this.handleMouseEnter=()=>{this.wideScreen&&"rail"!==this.collapseMode&&this.navTransition("pointerenter")},this.handleMouseLeave=()=>{this.wideScreen&&"rail"===this.collapseMode||this.navTransition("pointerleave")},this.handleTransitionEnd=()=>{this.navTransition("transitionend")},this.dragStartX=0,this.hasDragged=!1,this.handleResizeHoverMove=e=>{const t=e.currentTarget;if(!t||!this.resizeTooltipEl)return;const n=t.getBoundingClientRect(),a=e.clientY-(n.top+n.height/2);this.resizeTooltipEl.style.setProperty("--n-resize-tooltip-y",`${a}px`)},this.handleResizePointerLeave=()=>{var e;this.stopDragging(),null===(e=this.resizeTooltipEl)||void 0===e||e.style.removeProperty("--n-resize-tooltip-y")}}get isNarrow(){return!this.wideScreen}connectedCallback(){super.connectedCallback(),this.events.listen(j,"change",this.handleMediaQueryChange),this.addEventListener("click",this.handleHostClick),this.addEventListener("mouseover",this.handleHostMouseOver),this.addEventListener("mouseout",this.handleHostMouseOut)}disconnectedCallback(){var e,t;super.disconnectedCallback(),this.removeEventListener("click",this.handleHostClick),this.removeEventListener("mouseover",this.handleHostMouseOver),this.removeEventListener("mouseout",this.handleHostMouseOut),null===(e=this.headerSizeObserver)||void 0===e||e.disconnect(),this.headerSizeObserver=void 0,null===(t=this.footerSizeObserver)||void 0===t||t.disconnect(),this.footerSizeObserver=void 0,this.observedFooterElement=void 0,this.style.removeProperty("--n-layout-header-block-size"),this.style.removeProperty("--n-layout-footer-block-size")}firstUpdated(){"undefined"!=typeof ResizeObserver&&(this.stickyHeaderEl&&(this.headerSizeObserver=new ResizeObserver((()=>this.publishHeaderSize())),this.headerSizeObserver.observe(this.stickyHeaderEl),this.publishHeaderSize()),this.footerSlotEl&&(this.footerSlotEl.addEventListener("slotchange",this.handleFooterSlotChange),this.handleFooterSlotChange()))}publishHeaderSize(){var e,t;const n=null!==(t=null===(e=this.stickyHeaderEl)||void 0===e?void 0:e.getBoundingClientRect().height)&&void 0!==t?t:0;n>0?this.style.setProperty("--n-layout-header-block-size",`${n}px`):this.style.removeProperty("--n-layout-header-block-size")}publishFooterSize(){var e,t;const n=null!==(t=null===(e=this.observedFooterElement)||void 0===e?void 0:e.getBoundingClientRect().height)&&void 0!==t?t:0;n>0?this.style.setProperty("--n-layout-footer-block-size",`${n}px`):this.style.removeProperty("--n-layout-footer-block-size")}willUpdate(){this.hasUpdated||(Number.isFinite(this.defaultNavWidth)||(this.defaultNavWidth=E),Number.isFinite(this.minNavWidth)||(this.minNavWidth=220),Number.isFinite(this.maxNavWidth)||(this.maxNavWidth=400),O.value!==this.defaultNavWidth?(this.setNavWidth(this.defaultNavWidth),M.value=this.navWidth,O.value=this.defaultNavWidth):this.setNavWidth(this.navWidth),this.isNarrow||this.persistNavState&&!1===D.value?this.navState="closed":this.navState="opened")}render(){const{navWidth:e,navState:t,navSlot:n,headerSlot:a,footerSlot:s,topBarSlot:r,drawerSlot:l,isDragging:d,direction:v}=this,p=this.wideScreen&&"rail"===this.collapseMode&&"opened"!==t,u="opened"===t&&this.wideScreen?e:p?64:this.defaultNavWidth;return o`<div class="${h({"n-layout":!0,"n-rtl":v.isRTL,"n-dragging":d,"n-has-header":a.hasContent,"n-has-footer":s.hasContent,"n-has-top-bar":r.hasContent,"n-has-drawer":l.hasContent,"n-has-nav":n.hasContent})}" style="${c({"--_n-layout-nav-width":`${u}px`,"--_n-layout-nav-rail-width":`var(--n-layout-nav-rail-width, ${this.navRailWidth}px)`,"--_n-layout-nav-min-width":`${this.minNavWidth}px`,"--_n-layout-nav-max-width":`${this.maxNavWidth}px`})}" data-nav="${n.hasContent?t:"closed"}" data-screen="${this.wideScreen?"wide":"narrow"}" data-collapse-mode="${this.collapseMode}"><div class="n-layout-nav" ?hidden="${n.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" aria-describedby="${g(this.dividerTooltipSlot.hasContent&&!d,this.resizeTooltipId)}" @pointerdown="${g("opened"===t||p,this.startDragging)}" @pointermove="${d?this.handleDrag:this.handleResizeHoverMove}" @pointerleave="${this.handleResizePointerLeave}" @pointerup="${this.stopDragging}" @keydown="${this.handleKeyboardResize}" ?hidden="${this.isNarrow}"></div>${this.dividerTooltipSlot.hasContent?o`<nord-tooltip id="${this.resizeTooltipId}" position="inline-end" class="n-resize-tooltip"><slot name="tooltip-divider"></slot></nord-tooltip>`:i} ${this.hideCollapseButton?i:this.renderNavCollapse()}</div><div class="n-layout-main" @focusin="${this.handleMainFocus}" @click="${this.handleMainClick}">${n.hasContent&&!this.hideDefaultNavToggle?this.renderNavToggle():i}<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 o`<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 o`<button class="n-collapse-btn" @click="${this.handleToggleClick}"><nord-icon name="navigation-toggle-lock" size="s"></nord-icon></button>`}handleNavWidthChange(e){if(M.value=this.navWidth,null!=e){const e=this.navWidth;this.dispatchEvent(new N(e))}}handleNavStateChange(e){switch("wait"===e&&this.peekTimeoutId&&clearTimeout(this.peekTimeoutId),"unpeek"===e&&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(e){if(this.isDragging||this.setNavWidth(Math.max(this.navWidth,this.defaultNavWidth)),this.navTransition(this.navOpen?"open":"close"),this.persistNavState&&(D.value=this.navOpen),null!=e){const e=this.navOpen;this.applyingRemote||this.broadcast.post({navOpen:e}),this.dispatchEvent(new S(e))}}navTransition(e){this.navState=R.transition(this.navState,e)}handleNavClick(e){if(!e.defaultPrevented&&!this.wideScreen){const n=e.target;(e=>"nord-nav-item"===e.localName)(t=n)&&!t.hasSubNav&&this.navTransition("close")}var t}handleMainClick(){this.navTransition("click")}handleDropdownOpen(e){"nord-dropdown"===e.target.localName&&this.navTransition("dropdownOpen")}handleDropdownClose(e){"nord-dropdown"===e.target.localName&&this.navTransition("dropdownClose")}handleKeyboardResize(e){const{navWidth:t,direction:{isLTR:n}}=this;switch(e.key){case"ArrowLeft":this.setNavWidth(t+(n?-30:30));break;case"ArrowRight":this.setNavWidth(t+(n?30:-30));break;case"Enter":this.navTransition("toggle");break;case"Home":this.setNavWidth(this.minNavWidth);break;case"End":this.setNavWidth(this.maxNavWidth);break;default:return}this.broadcast.post({navWidth:this.navWidth}),e.preventDefault()}setNavWidth(e){this.navWidth=f(Math.round(e),this.minNavWidth,this.maxNavWidth)}startDragging(e){if(0===e.button){e.target.setPointerCapture(e.pointerId),this.isDragging=!0,this.dragStartX=e.clientX,this.hasDragged=!1}}stopDragging(){this.isDragging&&this.toggleOnResizeClick&&!this.hasDragged&&this.navTransition("toggle"),this.isDragging=!1,this.hasDragged=!1,this.broadcast.post({navWidth:this.navWidth})}handleDrag(e){if(!this.hasDragged&&Math.abs(e.clientX-this.dragStartX)<4)return;this.hasDragged=!0;const t=this.direction.isRTL?this.clientWidth-e.clientX:e.clientX;this.setNavWidth(t),this.navTransition(t>=100?"open":"close")}};H.styles=[z,k,W],e([s(".n-layout-nav",!0)],H.prototype,"navEl",void 0),e([s(".n-resize-tooltip")],H.prototype,"resizeTooltipEl",void 0),e([s(".n-sticky")],H.prototype,"stickyHeaderEl",void 0),e([s('slot[name="footer"]')],H.prototype,"footerSlotEl",void 0),e([r()],H.prototype,"navWidth",void 0),e([r()],H.prototype,"isDragging",void 0),e([r()],H.prototype,"navState",void 0),e([r()],H.prototype,"wideScreen",void 0),e([l({reflect:!0,type:Boolean,attribute:"nav-open"})],H.prototype,"navOpen",void 0),e([l({reflect:!0,type:Boolean,attribute:"persist-nav-state"})],H.prototype,"persistNavState",void 0),e([l({type:Boolean,reflect:!0,attribute:"sync-nav-state"})],H.prototype,"syncNavState",void 0),e([l({type:Number,reflect:!0,attribute:"default-nav-width"})],H.prototype,"defaultNavWidth",void 0),e([l({type:Number,reflect:!0,attribute:"min-nav-width"})],H.prototype,"minNavWidth",void 0),e([l({type:Number,reflect:!0,attribute:"max-nav-width"})],H.prototype,"maxNavWidth",void 0),e([l({type:Number,reflect:!0,attribute:"nav-rail-width"})],H.prototype,"navRailWidth",void 0),e([l({reflect:!0})],H.prototype,"padding",void 0),e([l({type:Boolean,reflect:!0})],H.prototype,"sticky",void 0),e([l({type:Boolean,reflect:!0,attribute:"sticky-footer"})],H.prototype,"stickyFooter",void 0),e([l({type:Boolean,reflect:!0,attribute:"hide-default-nav-toggle"})],H.prototype,"hideDefaultNavToggle",void 0),e([l({type:Boolean,reflect:!0,attribute:"hide-collapse-button"})],H.prototype,"hideCollapseButton",void 0),e([l({type:Boolean,reflect:!0,attribute:"toggle-on-resize-click"})],H.prototype,"toggleOnResizeClick",void 0),e([l({reflect:!0,attribute:"collapse-mode"})],H.prototype,"collapseMode",void 0),e([y("navWidth","updated")],H.prototype,"handleNavWidthChange",null),e([y("navState")],H.prototype,"handleNavStateChange",null),e([y("navOpen","updated")],H.prototype,"handleOpenChange",null),H=e([d("nord-layout")],H);var B=H;export{B as default};
|
|
4
4
|
//# sourceMappingURL=Layout.js.map
|