@nordhealth/components 5.0.1 → 5.0.3
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 +20491 -20303
- package/lib/Aside.js +1 -1
- package/lib/AsideDrawer.js +2 -2
- package/lib/AsideDrawer.js.map +1 -1
- package/lib/AsideTrigger.js +2 -2
- package/lib/AsideTrigger.js.map +1 -1
- package/lib/Button.js +2 -2
- package/lib/Button.js.map +1 -1
- package/lib/CommandMenu.js +1 -1
- package/lib/DatePicker.js +1 -1
- package/lib/DateRangePicker.js +1 -1
- package/lib/FilterDateRange.js +1 -1
- package/lib/FilterDropdown.js +1 -1
- package/lib/Header.js +1 -1
- package/lib/Header.js.map +1 -1
- package/lib/IconManager.js +1 -1
- package/lib/Input.js +1 -1
- package/lib/KeyboardController.js +1 -1
- package/lib/KeyboardController.js.map +1 -1
- package/lib/Layout.js +1 -1
- package/lib/Layout.js.map +1 -1
- package/lib/NavItem.js +1 -1
- package/lib/NavItem.js.map +1 -1
- package/lib/Navigation.js +1 -1
- package/lib/Navigation.js.map +1 -1
- package/lib/Range.js +1 -1
- package/lib/SegmentedControlItem.js +1 -1
- package/lib/ShortcutController-CV5b0BZl.js.map +1 -1
- package/lib/TextField-BYSciLeB.js +2 -0
- package/lib/TextField-BYSciLeB.js.map +1 -0
- package/lib/Textarea.js +1 -1
- package/lib/TimePicker.js +1 -1
- package/lib/bundle.js +18 -18
- package/lib/bundle.js.map +1 -1
- package/lib/focus-Dsbrvxj1.js +2 -0
- package/lib/focus-Dsbrvxj1.js.map +1 -0
- package/lib/index.js +1 -1
- package/lib/src/aside-trigger/AsideTrigger.d.ts +28 -2
- package/lib/src/button/Button.d.ts +6 -0
- package/lib/src/command-menu/ICommandMenuAction.d.ts +11 -0
- package/lib/src/common/controllers/BroadcastChannelController.d.ts +15 -0
- package/lib/src/common/focus.d.ts +10 -0
- package/lib/src/nav-item/NavItem.d.ts +22 -0
- package/lib/src/navigation/Navigation.d.ts +18 -0
- package/package.json +8 -8
- package/lib/TextField-CSKvieoG.js +0 -2
- package/lib/TextField-CSKvieoG.js.map +0 -1
- package/lib/focus-D8oSvIcN.js +0 -2
- package/lib/focus-D8oSvIcN.js.map +0 -1
package/lib/DatePicker.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{i}from"./context-provider-D8lrPLVi.js";import{c as e}from"./interface-calendar-Cw2bJfbS.js";import{c as o}from"./interface-close-small-CnpAFMO3.js";import{css as a,html as s,nothing as r,LitElement as n}from"lit";import{query as l,property as d,customElement as p}from"lit/decorators.js";import{ifDefined as c}from"lit/directives/if-defined.js";import{ref as h}from"lit/directives/ref.js";import{S as m,i as u}from"./Calendar-D47b20IT.js";import{D as v,c as j,p as f,a as b}from"./dates-C-ZvzXaC.js";import{c as y}from"./cond-CI1KbneT.js";import{N as g}from"./events-Bv6wNHwJ.js";import{F as $}from"./FocusableMixin-BlQLNPdJ.js";import{F as z}from"./FormAssociatedMixin-D9aPREgv.js";import{I as D}from"./InputMixin-LetXsCyv.js";import{R as x}from"./ReadonlyMixin-BdJPGtQ3.js";import{S as k}from"./SizeMixin-CU9cLbLC.js";import{s as w}from"./Component-BJ5O5n8k.js";import{s as F}from"./FormField-CMgEFZCK.js";import{s as C}from"./TextField-
|
|
1
|
+
import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{i}from"./context-provider-D8lrPLVi.js";import{c as e}from"./interface-calendar-Cw2bJfbS.js";import{c as o}from"./interface-close-small-CnpAFMO3.js";import{css as a,html as s,nothing as r,LitElement as n}from"lit";import{query as l,property as d,customElement as p}from"lit/decorators.js";import{ifDefined as c}from"lit/directives/if-defined.js";import{ref as h}from"lit/directives/ref.js";import{S as m,i as u}from"./Calendar-D47b20IT.js";import{D as v,c as j,p as f,a as b}from"./dates-C-ZvzXaC.js";import{c as y}from"./cond-CI1KbneT.js";import{N as g}from"./events-Bv6wNHwJ.js";import{F as $}from"./FocusableMixin-BlQLNPdJ.js";import{F as z}from"./FormAssociatedMixin-D9aPREgv.js";import{I as D}from"./InputMixin-LetXsCyv.js";import{R as x}from"./ReadonlyMixin-BdJPGtQ3.js";import{S as k}from"./SizeMixin-CU9cLbLC.js";import{s as w}from"./Component-BJ5O5n8k.js";import{s as F}from"./FormField-CMgEFZCK.js";import{s as C}from"./TextField-BYSciLeB.js";import{fieldContext as A}from"./field-context.js";import I from"./Icon.js";import{LocalizeController as S}from"./LocalizeController.js";import{isoAdapter as B}from"./date-adapter.js";import"./Input.js";import"./Button.js";import"./VisuallyHidden.js";import"./Popout-B6Hirj3y.js";import"./Stack.js";import"./context-request-event-CCRlXoeR.js";import"lit/directives/class-map.js";import"lit/directives/repeat.js";import"./tinykeys-DwvDXsEb.js";import"./collection-Dvg2XbxV.js";import"./DirectionController-ChvNGESZ.js";import"./EventController-BBOmvfLa.js";import"./observe-D0n0zOfU.js";import"./number-Dg2vCfGd.js";import"./DateRangeSelectEvent.js";import"./DateSelectEvent.js";import"./FormDataController-OUt5L5uC.js";import"./FieldControlMixin-BXNZJXu9.js";import"./context-consumer-BJVUulGf.js";import"./SlotController-Z6eG7LSZ.js";import"./light-dom-styles-DXsbiKU9.js";import"./create-context-CJ69ntlY.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"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"./localization23.js";import"./localization24.js";import"./navigation-search-CBbIGzo2.js";import"lit/directives/style-map.js";import"./ResizeController-14PUwRQy.js";import"./AutocompleteMixin-D8eiOxvO.js";import"./TextSelectableMixin-Cfv__lHS.js";import"./LightDomController-DIwtVelV.js";import"./Spinner.js";import"./positioning-D-K8Mueq.js";import"./LightDismissController-wcL1ziJa.js";import"./ShortcutController-CV5b0BZl.js";import"./ScrollbarController-BFC67Y2x.js";const E=a`: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{border-block-end:1px solid var(--n-color-border);padding:calc(var(--n-space-s)*1.5) var(--n-space-m)}.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;inset-block-start:calc(var(--n-space-s)*-1);inset-inline-end:calc(var(--n-space-s)*-1);opacity:0;position:absolute}.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{inset:auto;opacity:1;position:relative}.n-date-picker-heading{display:initial}}`;I.registerIcon(e),I.registerIcon(o);const L=()=>!1,M=()=>!1;let O=class extends(k(z(x(D($(n)))))){constructor(){super(...arguments),this.fieldBarrier=new i(this,{context:A,initialValue:void 0}),this.swipe=new m(this,{target:()=>this.popout,matchesGesture:u,onSwipeEnd:()=>this.hide()}),this.localize=new S(this,{onLangChange:()=>this.createDateFormatters()}),this.value="",this.open=!1,this.firstDayOfWeek=v.Monday,this.dateAdapter=B,this.isDateDisabled=L,this.isDateHighlighted=M,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 i;const e=t.target,o=this.dateAdapter.parse(e.value,j);this.rawValue=null===(i=this.focusableRef.value)||void 0===i?void 0:i.value,(o||""===e.value)&&this.setValue(o)}}get valueAsDate(){return f(this.value)}set valueAsDate(t){this.value=t?b(t):""}get valueAsNumber(){var t,i;return null!==(i=null===(t=this.valueAsDate)||void 0===t?void 0:t.getTime())&&void 0!==i?i:Number.NaN}set valueAsNumber(t){this.value=t?b(new Date(t)):""}get ownInvalid(){return Boolean(this.error||this.internalError)||super.ownInvalid}firstUpdated(){var t;this.rawValue=null===(t=this.focusableRef.value)||void 0===t?void 0:t.value}render(){const{valueAsDate:t}=this,i=t?this.dateAdapter.format(t):"";return s`<nord-input class="n-date-picker-input" value="${i}" label="${this.insideField?r:c(this.label)}" hint="${this.insideField?r:c(this.hint)}" error="${this.insideField?r:y(this.error||this.internalError,this.error||this.internalError)}" placeholder="${c(this.placeholder)}" id="${this.inputId}" size="${this.size}" ?expand="${this.expand}" ?disabled="${this.effectiveDisabled}" ?required="${this.required}" ?readonly="${this.readonly}" ?hint-below="${this.hintBelow}" ?hide-label="${this.insideField||this.hideLabel}" ?hide-required="${this.hideRequired}" disallow-pattern="[^0-9./-]" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @input="${this.handleInputChange}" ${h(this.focusableRef)} aria-label="${c(this.controlAriaLabel)}" aria-invalid="${c(this.controlAriaInvalid)}" aria-describedby="${c(this.controlAriaDescribedby)}">${this.insideField||this.hintSlot.isEmpty?r:s`<slot name="hint" slot="hint"></slot>`} ${this.insideField||this.labelSlot.isEmpty?r:s`<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?s`<span>, ${this.localize.term("selectedDateMessage")} ${this.dateFormatLong.format(t)}</span>`:r}</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="${c(this.min)}" max="${c(this.max)}" today="${c(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?b(t):"";const{valueAsDate:i}=this,e=i?this.dateAdapter.format(i):"";this.rawValue=e,this.dispatchEvent(new g("change"))}validateDateBounds(t){if(!t)return;const i=f(this.min||""),e=f(this.max||"");return i&&t<i?this.localize.term("dateOutOfMinBound",this.min):e&&t>e?this.localize.term("dateOutOfMaxBound",this.max):void 0}hide(t){this.popout.hide(t)}show(){this.popout.show()}};O.styles=[w,F,C,E],t([l(".n-date-picker-toggle",!0)],O.prototype,"toggleButton",void 0),t([l(".n-date-picker-close-button",!0)],O.prototype,"closeButton",void 0),t([l("nord-calendar",!0)],O.prototype,"calendar",void 0),t([l('[role="dialog"]',!0)],O.prototype,"popout",void 0),t([d()],O.prototype,"value",void 0),t([d({attribute:!1})],O.prototype,"internalError",void 0),t([d({attribute:!1})],O.prototype,"rawValue",void 0),t([d({type:Boolean,reflect:!0})],O.prototype,"open",void 0),t([d({reflect:!0})],O.prototype,"min",void 0),t([d({reflect:!0})],O.prototype,"max",void 0),t([d({reflect:!0})],O.prototype,"today",void 0),t([d({reflect:!0,attribute:"first-day-of-week",type:Number})],O.prototype,"firstDayOfWeek",void 0),t([d({attribute:!1})],O.prototype,"dateAdapter",void 0),t([d({attribute:!1})],O.prototype,"isDateDisabled",void 0),t([d({attribute:!1})],O.prototype,"isDateHighlighted",void 0),t([d({reflect:!0,type:Boolean})],O.prototype,"expand",void 0),O=t([p("nord-date-picker")],O);var R=O;export{R as default};
|
|
2
2
|
//# sourceMappingURL=DatePicker.js.map
|
package/lib/DateRangePicker.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{c as t}from"./interface-calendar-Cw2bJfbS.js";import{c as r}from"./interface-close-small-CnpAFMO3.js";import{d as i}from"./interface-dropdown-small-CYvgxudU.js";import{css as n,html as a,nothing as s,LitElement as o}from"lit";import{query as d,property as l,state as p,customElement as c}from"lit/decorators.js";import{classMap as h}from"lit/directives/class-map.js";import{ifDefined as m}from"lit/directives/if-defined.js";import{ref as u}from"lit/directives/ref.js";import{O as g}from"./OpenStateController-CCnZ7up6.js";import{D as v,a as b,p as f,b as y,s as k,d as $,e as z,f as j,g as D,h as x,i as w,j as F}from"./dates-C-ZvzXaC.js";import{o as P}from"./observe-D0n0zOfU.js";import{c as C}from"./cond-CI1KbneT.js";import{N as S}from"./events-Bv6wNHwJ.js";import{i as L}from"./light-dom-styles-DXsbiKU9.js";import{D as E}from"./DraftComponentMixin-4qug5Rky.js";import{F as O}from"./FocusableMixin-BlQLNPdJ.js";import{F as R}from"./FormAssociatedMixin-D9aPREgv.js";import{I}from"./InputMixin-LetXsCyv.js";import{R as T}from"./ReadonlyMixin-BdJPGtQ3.js";import{S as N}from"./SizeMixin-CU9cLbLC.js";import M from"./Icon.js";import{LocalizeController as B}from"./LocalizeController.js";import{DateRangeChangeEvent as V}from"./DateRangeChangeEvent.js";import"./Button.js";import"./Input.js";import"./Calendar-D47b20IT.js";import"./Popout-B6Hirj3y.js";import"./Stack.js";import"./VisuallyHidden.js";import"./FormDataController-OUt5L5uC.js";import"./FieldControlMixin-BXNZJXu9.js";import"./context-consumer-BJVUulGf.js";import"./context-request-event-CCRlXoeR.js";import"./field-context.js";import"./create-context-CJ69ntlY.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"lit/directives/unsafe-html.js";import"./Component-BJ5O5n8k.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"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"./localization23.js";import"./localization24.js";import"./LightDomController-DIwtVelV.js";import"./Spinner.js";import"./navigation-search-CBbIGzo2.js";import"lit/directives/style-map.js";import"./DirectionController-ChvNGESZ.js";import"./ResizeController-14PUwRQy.js";import"./AutocompleteMixin-D8eiOxvO.js";import"./TextSelectableMixin-Cfv__lHS.js";import"./FormField-CMgEFZCK.js";import"./TextField-CSKvieoG.js";import"lit/directives/repeat.js";import"./tinykeys-DwvDXsEb.js";import"./collection-Dvg2XbxV.js";import"./number-Dg2vCfGd.js";import"./DateRangeSelectEvent.js";import"./DateSelectEvent.js";import"./positioning-D-K8Mueq.js";import"./LightDismissController-wcL1ziJa.js";import"./ShortcutController-CV5b0BZl.js";import"./ScrollbarController-BFC67Y2x.js";const A=n`nord-date-range-picker,nord-date-range-picker *,nord-date-range-picker :after,nord-date-range-picker :before{box-sizing:border-box}nord-date-range-picker{--_n-drp-trigger-min-inline-size:var(--n-date-range-picker-trigger-min-inline-size,14rem);color:var(--n-color-text);display:block;font-family:var(--n-font-family)}nord-date-range-picker .n-drp{inline-size:100%;position:relative}nord-date-range-picker .n-drp-toggle{--n-input-inline-size:100%;display:block;min-inline-size:var(--_n-drp-trigger-min-inline-size)}nord-date-range-picker:not([disabled]) .n-drp-toggle.is-placeholder{--n-input-color:var(--n-color-text-weaker)}nord-date-range-picker .n-drp-popout{inline-size:var(--n-date-range-picker-popout-inline-size,max-content);max-inline-size:100%}nord-date-range-picker[inline] .n-drp{background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-border-radius-l);display:inline-block;inline-size:auto;max-inline-size:100%}nord-date-range-picker .n-drp-popout-header{align-items:center;display:none;gap:var(--n-space-s);justify-content:space-between;padding-block-end:var(--n-space-s)}nord-date-range-picker .n-drp-heading{font-weight:var(--n-font-weight-active)}nord-date-range-picker .n-drp-close{align-items:center;appearance:none;background:#0000;border:none;border-radius:var(--n-border-radius-circle);color:var(--n-color-icon);cursor:pointer;display:flex;flex-shrink:0;justify-content:center;margin:0;padding:0}nord-date-range-picker .n-drp-close:hover{color:var(--n-color-text)}nord-date-range-picker .n-drp-close nord-icon{--_n-icon-size:var(--n-size-icon-s)}nord-date-range-picker .n-drp-body{align-items:flex-start;display:flex;justify-content:center;padding:var(--n-space-m)}nord-date-range-picker .n-drp-body:not(.is-narrow){padding:0}nord-date-range-picker .n-drp-presets{border-inline-end:1px solid var(--n-color-border);display:flex;flex-direction:column;max-block-size:20.375rem;min-inline-size:calc(var(--n-space-xl)*5);overflow-y:auto;padding-block-end:var(--n-space-s);padding-block-start:var(--n-space-s);padding-inline-end:var(--n-space-s);padding-inline-start:var(--n-space-s)}nord-date-range-picker .n-drp-preset-group{display:flex;flex-direction:column;gap:0;list-style:none;margin:0;padding:0}nord-date-range-picker .n-drp-preset-group:not(:last-child){border-block-end:1px solid var(--n-color-border);margin-block-end:var(--n-space-s);padding-block-end:var(--n-space-s)}nord-date-range-picker .n-drp-preset-group li{margin:0;padding:0}nord-date-range-picker .n-drp-body.is-narrow{align-items:center;flex-direction:column;gap:var(--n-space-s)}nord-date-range-picker .n-drp-presets-collapsed{inline-size:100%}nord-date-range-picker .n-drp-body.is-narrow .n-drp-calendar{padding-inline:0}nord-date-range-picker .n-drp-presets-menu{display:flex;flex-direction:column;inline-size:var(--_n-drp-presets-inline-size,100%);max-block-size:20rem;overflow-y:auto;padding:var(--n-space-s)}nord-date-range-picker .n-drp-preset{align-items:center;appearance:none;background:#0000;border:none;border-radius:var(--n-border-radius-s);color:var(--n-color-text);cursor:pointer;display:flex;font-family:var(--n-font-family);font-size:var(--n-font-size-m);inline-size:100%;line-height:var(--n-line-height);margin:0;min-block-size:var(--n-space-xl);padding-block-end:0;padding-block-start:0;padding-inline-end:var(--n-space-s);padding-inline-start:var(--n-space-s);text-align:start;transition:background var(--n-transition-quickly)}nord-date-range-picker .n-drp-preset:hover{background:var(--n-color-active)}nord-date-range-picker .n-drp-preset:focus-visible{box-shadow:0 0 0 2px var(--n-color-accent);outline:none}nord-date-range-picker .n-drp-preset.is-active{background:var(--n-color-accent);color:var(--n-color-text-on-accent);font-weight:var(--n-font-weight-active)}nord-date-range-picker .n-drp-calendar{padding:var(--n-space-m)}nord-date-range-picker .n-drp-calendar nord-calendar{--n-calendar-box-shadow:none;--n-calendar-padding-block:0;--n-calendar-padding-inline:0;--n-calendar-day-size:var(--n-space-xl);--n-calendar-header-margin-block-end:var(--n-space-xs);--n-calendar-header-padding-block-end:var(--n-space-s);--n-calendar-nav-padding-inline:var(--n-space-s)}nord-date-range-picker .n-drp-footer{align-items:center;border-block-start:1px solid var(--n-color-border);display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--n-space-s);justify-content:space-between;margin-block-start:0;padding-block-end:var(--n-space-s);padding-block-start:var(--n-space-s);padding-inline-end:var(--n-space-m);padding-inline-start:var(--n-space-m)}nord-date-range-picker .n-drp-footer-end{align-items:center;display:flex;flex-direction:row;gap:var(--n-space-m)}nord-date-range-picker .n-drp-period{color:var(--n-color-text-weaker);font-size:var(--n-font-size-s);white-space:nowrap}@media (max-width:35.9375em){nord-date-range-picker .n-drp-popout{margin-inline-end:auto;margin-inline-start:auto}nord-date-range-picker .n-drp-popout-header{display:flex;margin-block-start:var(--n-space-s)}nord-date-range-picker .n-drp-body{flex-direction:column}nord-date-range-picker .n-drp-calendar{margin-block-end:var(--n-space-s);padding:0}nord-date-range-picker .n-drp-presets{border-block-end:1px solid var(--n-color-border);border-inline-end:none;inline-size:100%;padding-block-end:var(--n-space-m);padding-inline-end:0}nord-date-range-picker .n-drp-footer{padding-inline:0}}`;var q;M.registerIcon(t),M.registerIcon(r),M.registerIcon(i);let W=1;const H=()=>!1,G=()=>!1,_=["today","lastDays","lastPeriod","currentPeriod","quarters"];function Y(e,t){return e&&t?`${e}/${t}`:""}let Q=q=class extends(E(N(R(T(I(O(o))))))){constructor(){super(...arguments),this.dateRangePickerId="nord-date-range-picker-"+W++,this.inputId=`${this.dateRangePickerId}-input`,this.localize=new B(this,{onLangChange:()=>this.createDateFormatters()}),this.openState=new g(this,{isOpen:()=>this.open,setOpen:e=>{this.open=e},popout:()=>this.popout,isInert:()=>this.disabled||this.readonly,onOpen:()=>{var e;this.pendingStart=this.startDate,this.pendingEnd=this.endDate,null===(e=this.calendar)||void 0===e||e.updateComplete.then((()=>{var e;return null===(e=this.calendar)||void 0===e?void 0:e.focus({target:"day"})}))}}),this.value="",this.startDate="",this.endDate="",this.open=!1,this.firstDayOfWeek=v.Monday,this.isDateDisabled=H,this.isDateHighlighted=G,this.hidePresets=!1,this.inline=!1,this.pendingStart="",this.pendingEnd="",this.isNarrow=!1,this.presetsOpen=!1,this.resizeObserver=new ResizeObserver((()=>{this.measureNarrow(),this.syncPresetsInlineSize()})),this.handleViewportResize=()=>{this.measureNarrow()},this.customTrigger=null,this.syncingFromValue=!1,this.boundForm=null,this.handleFormData=e=>{if(!this.disabled)return this.startName&&this.endName?(this.startDate&&e.formData.append(this.startName,this.startDate),void(this.endDate&&e.formData.append(this.endName,this.endDate))):void(this.name&&this.value&&e.formData.append(this.name,this.value))},this.handleFocus=()=>{this.dispatchEvent(new S("focus"))},this.handleBlur=()=>{this.dispatchEvent(new S("blur"))},this.handleRangeChange=e=>{e.stopPropagation(),this.disabled||this.readonly||(this.pendingStart=b(e.start),this.pendingEnd=b(e.end),this.emitInput())},this.handleApply=()=>{!this.disabled&&!this.readonly&&this.pendingStart&&this.pendingEnd&&(this.commit(this.pendingStart,this.pendingEnd),this.hide(!0))},this.handleClear=()=>{this.disabled||this.readonly||(this.pendingStart="",this.pendingEnd="",this.commit("",""),this.hide(!0))},this.handleTriggerClick=()=>{this.measureNarrow(),this.openState.toggle()}}get labelFocusOnly(){return!0}measureNarrow(e=window.innerWidth){if(e>0){const t=Number.parseFloat(getComputedStyle(document.documentElement).fontSize)||16;this.isNarrow=e<q.narrowThresholdRem*t}}syncPresetsInlineSize(){const e=this.renderRoot.querySelector(".n-drp-presets-collapsed");e&&this.style.setProperty("--_n-drp-presets-inline-size",`${e.clientWidth}px`)}get valueAsDateRange(){const e=f(this.startDate),t=f(this.endDate);return e&&t?[e,t]:void 0}set valueAsDateRange(e){if(!e)return void(this.value="");const[t,r]=e;this.value=Y(b(t),b(r))}connectedCallback(){super.connectedCallback(),L(this,A),this.syncFormListener(),this.resizeObserver.observe(this),window.addEventListener("resize",this.handleViewportResize),this.customTrigger=this.querySelector(':scope > [slot="trigger"]')}disconnectedCallback(){var e;super.disconnectedCallback(),null===(e=this.boundForm)||void 0===e||e.removeEventListener("formdata",this.handleFormData),this.boundForm=null,this.resizeObserver.disconnect(),window.removeEventListener("resize",this.handleViewportResize)}createRenderRoot(){return this}get ownInvalid(){return Boolean(this.error||this.internalError)||super.ownInvalid}firstUpdated(e){super.firstUpdated(e),this.inline&&(this.pendingStart=this.startDate,this.pendingEnd=this.endDate)}updated(e){super.updated(e),this.syncFormListener(),this.wireCustomTrigger(),this.syncPresetsInlineSize()}wireCustomTrigger(){const e=this.customTrigger;if(!e)return;const t=`${this.dateRangePickerId}-popout`;e.setAttribute("aria-controls",t),e.setAttribute("aria-haspopup","dialog"),e.setAttribute("aria-expanded",this.open?"true":"false"),e.removeEventListener("click",this.handleTriggerClick),e.addEventListener("click",this.handleTriggerClick)}syncFormListener(){var e,t;const r=this.form;r!==this.boundForm&&(null===(e=this.boundForm)||void 0===e||e.removeEventListener("formdata",this.handleFormData),this.boundForm=r,null===(t=this.boundForm)||void 0===t||t.addEventListener("formdata",this.handleFormData))}handleValueObserve(){if(this.syncingFromValue)return;this.syncingFromValue=!0;const[e,t]=function(e){if(!e)return["",""];const[t="",r=""]=e.split("/");return[t,r]}(this.value);this.startDate=e,this.endDate=t,this.internalError=this.validateBounds(e,t),this.syncingFromValue=!1,this.inline&&(this.pendingStart=e,this.pendingEnd=t)}handlePartObserve(){this.syncingFromValue||(this.syncingFromValue=!0,this.value=Y(this.startDate,this.endDate),this.internalError=this.validateBounds(this.startDate,this.endDate),this.syncingFromValue=!1)}get formValue(){}get presetCatalogue(){const e=this.localize,t=this.firstDayOfWeek,r=this.getToday().getFullYear(),i=r-1,n=[{id:"today",group:"today",label:e.term("presetToday"),resolve:e=>[e,e]},{id:"yesterday",group:"today",label:e.term("presetYesterday"),resolve:e=>{const t=y(e,-1);return[t,t]}},{id:"last-7",group:"lastDays",label:e.term("presetLastDays",7),resolve:e=>[y(e,-7),e]},{id:"last-30",group:"lastDays",label:e.term("presetLastDays",30),resolve:e=>[y(e,-30),e]},{id:"last-60",group:"lastDays",label:e.term("presetLastDays",60),resolve:e=>[y(e,-60),e]},{id:"last-90",group:"lastDays",label:e.term("presetLastDays",90),resolve:e=>[y(e,-90),e]},{id:"last-365",group:"lastDays",label:e.term("presetLastDays",365),resolve:e=>[y(e,-365),e]},{id:"last-week",group:"lastPeriod",label:e.term("presetLastWeek"),resolve:e=>{const r=k(e,t);return[y(r,-7),y(r,-1)]}},{id:"last-month",group:"lastPeriod",label:e.term("presetLastMonth"),resolve:e=>{const t=y($(e),-1);return[$(t),t]}},{id:"last-6-months",group:"lastPeriod",label:e.term("presetLastMonths",6),resolve:e=>{const t=y($(e),-1);return[$(z(t,-5)),t]}},{id:"last-quarter",group:"lastPeriod",label:e.term("presetLastQuarter"),resolve:e=>{const t=y(j(e),-1);return[j(t),t]}},{id:"last-year",group:"lastPeriod",label:e.term("presetLastYear"),resolve:e=>{const t=D(e,e.getFullYear()-1);return[x(t),y(x(e),-1)]}},{id:"last-12-months",group:"lastPeriod",label:e.term("presetLastMonths",12),resolve:e=>{const t=y($(e),-1);return[$(z(t,-11)),t]}},{id:"current-week",group:"currentPeriod",label:e.term("presetCurrentWeek"),resolve:e=>[k(e,t),e]},{id:"current-month",group:"currentPeriod",label:e.term("presetCurrentMonth"),resolve:e=>[$(e),e]},{id:"current-quarter",group:"currentPeriod",label:e.term("presetCurrentQuarter"),resolve:e=>[j(e),e]},{id:"current-year",group:"currentPeriod",label:e.term("presetCurrentYear"),resolve:e=>[x(e),e]}];for(const t of[r,i])for(const i of[4,3,2,1])n.push({id:`q-${t}-${i}`,group:"quarters",label:e.term("presetQuarter",i,t),resolve:()=>w(i,t),available:t===r?e=>F(i,e):void 0});return n}get visiblePresets(){const e=this.getToday(),t=f(this.min||""),r=f(this.max||"");let i=this.presetCatalogue;if(this.presets){const e=new Set(this.presets);i=i.filter((t=>e.has(t.id)))}return i.filter((i=>{if(i.available&&!i.available(e))return!1;const[n,a]=i.resolve(e);return!(t&&n.getTime()<t.getTime())&&!(r&&a.getTime()>r.getTime())}))}get presetGroups(){const e=this.visiblePresets;return _.map((t=>e.filter((e=>e.group===t)))).filter((e=>e.length>0))}getToday(){return f(this.today||"")||new Date}get activePresetId(){if(!this.pendingStart||!this.pendingEnd)return;const e=this.getToday();for(const t of this.visiblePresets){const[r,i]=t.resolve(e);if(b(r)===this.pendingStart&&b(i)===this.pendingEnd)return t.id}}createDateFormatters(){this.dateFormat=new Intl.DateTimeFormat(this.localize.resolvedLang,{day:"numeric",month:"short",year:"numeric"})}get displayValue(){const e=this.valueAsDateRange;if(!e)return"";const[t,r]=e,i=this.localize.term("rangeSeparator");return`${this.dateFormat.format(t)} ${i} ${this.dateFormat.format(r)}`}get pendingRangeLabel(){const e=f(this.pendingStart);if(!e)return"";const t=f(this.pendingEnd),r=this.localize.term("rangeSeparator");return t?`${this.dateFormat.format(e)} ${r} ${this.dateFormat.format(t)}`:this.dateFormat.format(e)}validateBounds(e,t){const r=f(this.min||""),i=f(this.max||""),n=f(e),a=f(t);return r&&n&&n<r?this.localize.term("dateOutOfMinBound",this.min):i&&a&&a>i?this.localize.term("dateOutOfMaxBound",this.max):void 0}render(){const e=this.displayValue,t=this.placeholder||this.localize.term("placeholder"),r=`${this.dateRangePickerId}-anchor`,i=`${this.dateRangePickerId}-popout`,n=`${this.dateRangePickerId}-header`,o=this.controlAriaLabel,d=this.controlAriaLabelledby,l=this.controlAriaDescribedby,p=this.activePresetId;return this.inline?a`${this.renderLabel()}<div class="n-drp" id="${r}" aria-label="${m(o)}" aria-labelledby="${m(d)}" aria-describedby="${m(l)}" ?inert="${this.effectiveDisabled||this.readonly}" aria-disabled="${this.effectiveDisabled?"true":s}">${this.renderBody(p)}</div>${this.renderError()} ${this.isHintBelow?this.renderHint():s}`:a`<div class="n-drp" id="${r}">${this.customTrigger?this.customTrigger:a`<nord-input class="${h({"n-drp-toggle":!0,"is-placeholder":!e})}" type="button" size="${this.size}" id="${`${this.dateRangePickerId}-input`}" value="${e||t}" label="${this.insideField?s:m(this.label)}" hint="${this.insideField?s:m(this.hint)}" error="${this.insideField?s:C(this.error||this.internalError,this.error||this.internalError)}" placeholder="${m(t)}" ?disabled="${this.effectiveDisabled}" ?required="${this.required}" ?readonly="${this.readonly}" ?hint-below="${this.hintBelow}" ?hide-label="${this.insideField||this.hideLabel}" aria-haspopup="dialog" aria-controls="${i}" aria-expanded="${this.open?"true":"false"}" aria-label="${m(o)}" aria-describedby="${m(l)}" aria-invalid="${m(this.controlAriaInvalid)}" @click="${this.handleTriggerClick}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" ${u(this.focusableRef)}>${this.insideField||this.hintSlot.isEmpty?s:a`<slot name="hint" slot="hint"></slot>`} ${this.insideField||this.labelSlot.isEmpty?s:a`<slot name="label" slot="label"></slot>`}<nord-button slot="end" class="n-drp-toggle-button" size="${this.size}" ?disabled="${this.effectiveDisabled||this.readonly}" aria-controls="${i}" type="button"><nord-icon name="interface-calendar"></nord-icon><nord-visually-hidden>${this.localize.term("buttonLabel")}</nord-visually-hidden></nord-button></nord-input>`}<nord-popout id="${i}" controlled anchor="${r}" align="start" position="block-end" role="dialog" aria-modal="true" aria-labelledby="${n}" @open="${this.openState.onPopoutOpen}" @close="${this.openState.onPopoutClose}"><div class="n-drp-popout"><div class="n-drp-popout-header"><span class="n-drp-heading" id="${n}">${this.localize.term("modalHeading")}</span> <button type="button" class="n-drp-close" aria-label="${this.localize.term("closeLabel")}" @click="${()=>this.hide(!0)}"><nord-icon name="interface-close-small"></nord-icon></button></div>${this.renderBody(p)}</div></nord-popout></div>`}renderBody(e){const t=this.isNarrow?"s":"m";return a`<div class="${h({"n-drp-body":!0,"is-narrow":this.isNarrow})}">${this.hidePresets||0===this.presetGroups.length?s:this.isNarrow?this.renderPresetsCollapsed(e):this.renderPresetsList(e)}<div class="n-drp-calendar"><nord-calendar range expand months="${this.isNarrow?1:2}" range-start="${this.pendingStart}" range-end="${this.pendingEnd}" min="${m(this.min)}" max="${m(this.max)}" today="${m(this.today)}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" .isDateHighlighted="${this.isDateHighlighted}" @range-change="${this.handleRangeChange}"></nord-calendar></div></div><div class="n-drp-footer"><nord-button type="button" size="${t}" variant="plain" @click="${this.handleClear}">${this.localize.term("clearLabel")}</nord-button><div class="n-drp-footer-end">${this.pendingRangeLabel?a`<span class="n-drp-period">${this.pendingRangeLabel}</span>`:s} ${this.inline?s:a`<nord-button type="button" size="${t}" @click="${()=>this.hide(!0)}">${this.localize.term("cancelLabel")}</nord-button>`}<nord-button type="button" size="${t}" variant="primary" ?disabled="${!this.pendingStart||!this.pendingEnd}" @click="${this.handleApply}">${this.localize.term("applyLabel")}</nord-button></div></div>`}renderPreset(e,t){return a`<li><button type="button" class="${h({"n-drp-preset":!0,"is-active":e.id===t})}" aria-pressed="${e.id===t?"true":"false"}" @click="${()=>this.handlePresetClick(e)}">${e.label}</button></li>`}renderPresetGroups(e){return this.presetGroups.map((t=>a`<ul class="n-drp-preset-group">${t.map((t=>this.renderPreset(t,e)))}</ul>`))}renderPresetsList(e){return a`<div class="n-drp-presets" role="group" aria-label="${this.localize.term("presetsLabel")}">${this.renderPresetGroups(e)}</div>`}renderPresetsCollapsed(e){var t;const r=`${this.dateRangePickerId}-presets`,i=null===(t=this.visiblePresets.find((t=>t.id===e)))||void 0===t?void 0:t.label;return a`<div class="n-drp-presets-collapsed"><nord-button type="button" size="s" expand aria-haspopup="true" aria-controls="${r}" aria-expanded="${this.presetsOpen?"true":"false"}">${null!=i?i:this.localize.term("presetsCollapsedLabel")}<nord-icon slot="end" name="interface-dropdown-small"></nord-icon></nord-button><nord-popout id="${r}" always-floating expand position="block-end" ?open="${this.presetsOpen}" @open="${()=>this.presetsOpen=!0}" @close="${()=>this.presetsOpen=!1}"><div class="n-drp-presets-menu" role="group" aria-label="${this.localize.term("presetsLabel")}">${this.renderPresetGroups(e)}</div></nord-popout></div>`}handlePresetClick(e){if(this.disabled||this.readonly)return;const[t,r]=e.resolve(this.getToday());this.pendingStart=b(t),this.pendingEnd=b(r),this.emitInput(),this.presetsOpen=!1}emitInput(){this.dispatchEvent(new V("input",{value:Y(this.pendingStart,this.pendingEnd),startDate:this.pendingStart,endDate:this.pendingEnd}))}commit(e,t){this.value=Y(e,t),this.dispatchEvent(new V("change",{value:this.value,startDate:e,endDate:t}))}show(){this.measureNarrow(),this.openState.show()}hide(e=!1){var t,r;e&&(null===(r=null!==(t=this.customTrigger)&&void 0!==t?t:this.toggle)||void 0===r||r.focus()),this.openState.hide()}focus(e){var t;null===(t=this.toggle)||void 0===t||t.focus(e)}};Q.narrowThresholdRem=57.5,e([d("nord-calendar",!0)],Q.prototype,"calendar",void 0),e([d(".n-drp-toggle",!0)],Q.prototype,"toggle",void 0),e([d("nord-popout",!0)],Q.prototype,"popout",void 0),e([l()],Q.prototype,"value",void 0),e([l({reflect:!0,attribute:"start-date"})],Q.prototype,"startDate",void 0),e([l({reflect:!0,attribute:"end-date"})],Q.prototype,"endDate",void 0),e([l({type:Boolean,reflect:!0})],Q.prototype,"open",void 0),e([l({reflect:!0})],Q.prototype,"min",void 0),e([l({reflect:!0})],Q.prototype,"max",void 0),e([l({reflect:!0})],Q.prototype,"today",void 0),e([l({reflect:!0,attribute:"first-day-of-week",type:Number})],Q.prototype,"firstDayOfWeek",void 0),e([l({attribute:!1})],Q.prototype,"isDateDisabled",void 0),e([l({attribute:!1})],Q.prototype,"isDateHighlighted",void 0),e([l({reflect:!0,type:Boolean,attribute:"hide-presets"})],Q.prototype,"hidePresets",void 0),e([l({attribute:!1})],Q.prototype,"presets",void 0),e([l({reflect:!0,type:Boolean})],Q.prototype,"inline",void 0),e([l({reflect:!0,attribute:"start-name"})],Q.prototype,"startName",void 0),e([l({reflect:!0,attribute:"end-name"})],Q.prototype,"endName",void 0),e([l({attribute:!1})],Q.prototype,"internalError",void 0),e([p()],Q.prototype,"pendingStart",void 0),e([p()],Q.prototype,"pendingEnd",void 0),e([p()],Q.prototype,"isNarrow",void 0),e([p()],Q.prototype,"presetsOpen",void 0),e([P("value")],Q.prototype,"handleValueObserve",null),e([P("startDate"),P("endDate")],Q.prototype,"handlePartObserve",null),Q=q=e([c("nord-date-range-picker")],Q);var U=Q;export{U as default};
|
|
1
|
+
import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{c as t}from"./interface-calendar-Cw2bJfbS.js";import{c as r}from"./interface-close-small-CnpAFMO3.js";import{d as i}from"./interface-dropdown-small-CYvgxudU.js";import{css as n,html as a,nothing as s,LitElement as o}from"lit";import{query as d,property as l,state as p,customElement as c}from"lit/decorators.js";import{classMap as h}from"lit/directives/class-map.js";import{ifDefined as m}from"lit/directives/if-defined.js";import{ref as u}from"lit/directives/ref.js";import{O as g}from"./OpenStateController-CCnZ7up6.js";import{D as v,a as b,p as f,b as y,s as k,d as $,e as z,f as j,g as D,h as x,i as w,j as F}from"./dates-C-ZvzXaC.js";import{o as P}from"./observe-D0n0zOfU.js";import{c as C}from"./cond-CI1KbneT.js";import{N as S}from"./events-Bv6wNHwJ.js";import{i as L}from"./light-dom-styles-DXsbiKU9.js";import{D as E}from"./DraftComponentMixin-4qug5Rky.js";import{F as O}from"./FocusableMixin-BlQLNPdJ.js";import{F as R}from"./FormAssociatedMixin-D9aPREgv.js";import{I}from"./InputMixin-LetXsCyv.js";import{R as T}from"./ReadonlyMixin-BdJPGtQ3.js";import{S as N}from"./SizeMixin-CU9cLbLC.js";import M from"./Icon.js";import{LocalizeController as B}from"./LocalizeController.js";import{DateRangeChangeEvent as V}from"./DateRangeChangeEvent.js";import"./Button.js";import"./Input.js";import"./Calendar-D47b20IT.js";import"./Popout-B6Hirj3y.js";import"./Stack.js";import"./VisuallyHidden.js";import"./FormDataController-OUt5L5uC.js";import"./FieldControlMixin-BXNZJXu9.js";import"./context-consumer-BJVUulGf.js";import"./context-request-event-CCRlXoeR.js";import"./field-context.js";import"./create-context-CJ69ntlY.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"lit/directives/unsafe-html.js";import"./Component-BJ5O5n8k.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"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"./localization23.js";import"./localization24.js";import"./LightDomController-DIwtVelV.js";import"./Spinner.js";import"./navigation-search-CBbIGzo2.js";import"lit/directives/style-map.js";import"./DirectionController-ChvNGESZ.js";import"./ResizeController-14PUwRQy.js";import"./AutocompleteMixin-D8eiOxvO.js";import"./TextSelectableMixin-Cfv__lHS.js";import"./FormField-CMgEFZCK.js";import"./TextField-BYSciLeB.js";import"lit/directives/repeat.js";import"./tinykeys-DwvDXsEb.js";import"./collection-Dvg2XbxV.js";import"./number-Dg2vCfGd.js";import"./DateRangeSelectEvent.js";import"./DateSelectEvent.js";import"./positioning-D-K8Mueq.js";import"./LightDismissController-wcL1ziJa.js";import"./ShortcutController-CV5b0BZl.js";import"./ScrollbarController-BFC67Y2x.js";const A=n`nord-date-range-picker,nord-date-range-picker *,nord-date-range-picker :after,nord-date-range-picker :before{box-sizing:border-box}nord-date-range-picker{--_n-drp-trigger-min-inline-size:var(--n-date-range-picker-trigger-min-inline-size,14rem);color:var(--n-color-text);display:block;font-family:var(--n-font-family)}nord-date-range-picker .n-drp{inline-size:100%;position:relative}nord-date-range-picker .n-drp-toggle{--n-input-inline-size:100%;display:block;min-inline-size:var(--_n-drp-trigger-min-inline-size)}nord-date-range-picker:not([disabled]) .n-drp-toggle.is-placeholder{--n-input-color:var(--n-color-text-weaker)}nord-date-range-picker .n-drp-popout{inline-size:var(--n-date-range-picker-popout-inline-size,max-content);max-inline-size:100%}nord-date-range-picker[inline] .n-drp{background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-border-radius-l);display:inline-block;inline-size:auto;max-inline-size:100%}nord-date-range-picker .n-drp-popout-header{align-items:center;display:none;gap:var(--n-space-s);justify-content:space-between;padding-block-end:var(--n-space-s)}nord-date-range-picker .n-drp-heading{font-weight:var(--n-font-weight-active)}nord-date-range-picker .n-drp-close{align-items:center;appearance:none;background:#0000;border:none;border-radius:var(--n-border-radius-circle);color:var(--n-color-icon);cursor:pointer;display:flex;flex-shrink:0;justify-content:center;margin:0;padding:0}nord-date-range-picker .n-drp-close:hover{color:var(--n-color-text)}nord-date-range-picker .n-drp-close nord-icon{--_n-icon-size:var(--n-size-icon-s)}nord-date-range-picker .n-drp-body{align-items:flex-start;display:flex;justify-content:center;padding:var(--n-space-m)}nord-date-range-picker .n-drp-body:not(.is-narrow){padding:0}nord-date-range-picker .n-drp-presets{border-inline-end:1px solid var(--n-color-border);display:flex;flex-direction:column;max-block-size:20.375rem;min-inline-size:calc(var(--n-space-xl)*5);overflow-y:auto;padding-block-end:var(--n-space-s);padding-block-start:var(--n-space-s);padding-inline-end:var(--n-space-s);padding-inline-start:var(--n-space-s)}nord-date-range-picker .n-drp-preset-group{display:flex;flex-direction:column;gap:0;list-style:none;margin:0;padding:0}nord-date-range-picker .n-drp-preset-group:not(:last-child){border-block-end:1px solid var(--n-color-border);margin-block-end:var(--n-space-s);padding-block-end:var(--n-space-s)}nord-date-range-picker .n-drp-preset-group li{margin:0;padding:0}nord-date-range-picker .n-drp-body.is-narrow{align-items:center;flex-direction:column;gap:var(--n-space-s)}nord-date-range-picker .n-drp-presets-collapsed{inline-size:100%}nord-date-range-picker .n-drp-body.is-narrow .n-drp-calendar{padding-inline:0}nord-date-range-picker .n-drp-presets-menu{display:flex;flex-direction:column;inline-size:var(--_n-drp-presets-inline-size,100%);max-block-size:20rem;overflow-y:auto;padding:var(--n-space-s)}nord-date-range-picker .n-drp-preset{align-items:center;appearance:none;background:#0000;border:none;border-radius:var(--n-border-radius-s);color:var(--n-color-text);cursor:pointer;display:flex;font-family:var(--n-font-family);font-size:var(--n-font-size-m);inline-size:100%;line-height:var(--n-line-height);margin:0;min-block-size:var(--n-space-xl);padding-block-end:0;padding-block-start:0;padding-inline-end:var(--n-space-s);padding-inline-start:var(--n-space-s);text-align:start;transition:background var(--n-transition-quickly)}nord-date-range-picker .n-drp-preset:hover{background:var(--n-color-active)}nord-date-range-picker .n-drp-preset:focus-visible{box-shadow:0 0 0 2px var(--n-color-accent);outline:none}nord-date-range-picker .n-drp-preset.is-active{background:var(--n-color-accent);color:var(--n-color-text-on-accent);font-weight:var(--n-font-weight-active)}nord-date-range-picker .n-drp-calendar{padding:var(--n-space-m)}nord-date-range-picker .n-drp-calendar nord-calendar{--n-calendar-box-shadow:none;--n-calendar-padding-block:0;--n-calendar-padding-inline:0;--n-calendar-day-size:var(--n-space-xl);--n-calendar-header-margin-block-end:var(--n-space-xs);--n-calendar-header-padding-block-end:var(--n-space-s);--n-calendar-nav-padding-inline:var(--n-space-s)}nord-date-range-picker .n-drp-footer{align-items:center;border-block-start:1px solid var(--n-color-border);display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--n-space-s);justify-content:space-between;margin-block-start:0;padding-block-end:var(--n-space-s);padding-block-start:var(--n-space-s);padding-inline-end:var(--n-space-m);padding-inline-start:var(--n-space-m)}nord-date-range-picker .n-drp-footer-end{align-items:center;display:flex;flex-direction:row;gap:var(--n-space-m)}nord-date-range-picker .n-drp-period{color:var(--n-color-text-weaker);font-size:var(--n-font-size-s);white-space:nowrap}@media (max-width:35.9375em){nord-date-range-picker .n-drp-popout{margin-inline-end:auto;margin-inline-start:auto}nord-date-range-picker .n-drp-popout-header{display:flex;margin-block-start:var(--n-space-s)}nord-date-range-picker .n-drp-body{flex-direction:column}nord-date-range-picker .n-drp-calendar{margin-block-end:var(--n-space-s);padding:0}nord-date-range-picker .n-drp-presets{border-block-end:1px solid var(--n-color-border);border-inline-end:none;inline-size:100%;padding-block-end:var(--n-space-m);padding-inline-end:0}nord-date-range-picker .n-drp-footer{padding-inline:0}}`;var q;M.registerIcon(t),M.registerIcon(r),M.registerIcon(i);let W=1;const H=()=>!1,G=()=>!1,_=["today","lastDays","lastPeriod","currentPeriod","quarters"];function Y(e,t){return e&&t?`${e}/${t}`:""}let Q=q=class extends(E(N(R(T(I(O(o))))))){constructor(){super(...arguments),this.dateRangePickerId="nord-date-range-picker-"+W++,this.inputId=`${this.dateRangePickerId}-input`,this.localize=new B(this,{onLangChange:()=>this.createDateFormatters()}),this.openState=new g(this,{isOpen:()=>this.open,setOpen:e=>{this.open=e},popout:()=>this.popout,isInert:()=>this.disabled||this.readonly,onOpen:()=>{var e;this.pendingStart=this.startDate,this.pendingEnd=this.endDate,null===(e=this.calendar)||void 0===e||e.updateComplete.then((()=>{var e;return null===(e=this.calendar)||void 0===e?void 0:e.focus({target:"day"})}))}}),this.value="",this.startDate="",this.endDate="",this.open=!1,this.firstDayOfWeek=v.Monday,this.isDateDisabled=H,this.isDateHighlighted=G,this.hidePresets=!1,this.inline=!1,this.pendingStart="",this.pendingEnd="",this.isNarrow=!1,this.presetsOpen=!1,this.resizeObserver=new ResizeObserver((()=>{this.measureNarrow(),this.syncPresetsInlineSize()})),this.handleViewportResize=()=>{this.measureNarrow()},this.customTrigger=null,this.syncingFromValue=!1,this.boundForm=null,this.handleFormData=e=>{if(!this.disabled)return this.startName&&this.endName?(this.startDate&&e.formData.append(this.startName,this.startDate),void(this.endDate&&e.formData.append(this.endName,this.endDate))):void(this.name&&this.value&&e.formData.append(this.name,this.value))},this.handleFocus=()=>{this.dispatchEvent(new S("focus"))},this.handleBlur=()=>{this.dispatchEvent(new S("blur"))},this.handleRangeChange=e=>{e.stopPropagation(),this.disabled||this.readonly||(this.pendingStart=b(e.start),this.pendingEnd=b(e.end),this.emitInput())},this.handleApply=()=>{!this.disabled&&!this.readonly&&this.pendingStart&&this.pendingEnd&&(this.commit(this.pendingStart,this.pendingEnd),this.hide(!0))},this.handleClear=()=>{this.disabled||this.readonly||(this.pendingStart="",this.pendingEnd="",this.commit("",""),this.hide(!0))},this.handleTriggerClick=()=>{this.measureNarrow(),this.openState.toggle()}}get labelFocusOnly(){return!0}measureNarrow(e=window.innerWidth){if(e>0){const t=Number.parseFloat(getComputedStyle(document.documentElement).fontSize)||16;this.isNarrow=e<q.narrowThresholdRem*t}}syncPresetsInlineSize(){const e=this.renderRoot.querySelector(".n-drp-presets-collapsed");e&&this.style.setProperty("--_n-drp-presets-inline-size",`${e.clientWidth}px`)}get valueAsDateRange(){const e=f(this.startDate),t=f(this.endDate);return e&&t?[e,t]:void 0}set valueAsDateRange(e){if(!e)return void(this.value="");const[t,r]=e;this.value=Y(b(t),b(r))}connectedCallback(){super.connectedCallback(),L(this,A),this.syncFormListener(),this.resizeObserver.observe(this),window.addEventListener("resize",this.handleViewportResize),this.customTrigger=this.querySelector(':scope > [slot="trigger"]')}disconnectedCallback(){var e;super.disconnectedCallback(),null===(e=this.boundForm)||void 0===e||e.removeEventListener("formdata",this.handleFormData),this.boundForm=null,this.resizeObserver.disconnect(),window.removeEventListener("resize",this.handleViewportResize)}createRenderRoot(){return this}get ownInvalid(){return Boolean(this.error||this.internalError)||super.ownInvalid}firstUpdated(e){super.firstUpdated(e),this.inline&&(this.pendingStart=this.startDate,this.pendingEnd=this.endDate)}updated(e){super.updated(e),this.syncFormListener(),this.wireCustomTrigger(),this.syncPresetsInlineSize()}wireCustomTrigger(){const e=this.customTrigger;if(!e)return;const t=`${this.dateRangePickerId}-popout`;e.setAttribute("aria-controls",t),e.setAttribute("aria-haspopup","dialog"),e.setAttribute("aria-expanded",this.open?"true":"false"),e.removeEventListener("click",this.handleTriggerClick),e.addEventListener("click",this.handleTriggerClick)}syncFormListener(){var e,t;const r=this.form;r!==this.boundForm&&(null===(e=this.boundForm)||void 0===e||e.removeEventListener("formdata",this.handleFormData),this.boundForm=r,null===(t=this.boundForm)||void 0===t||t.addEventListener("formdata",this.handleFormData))}handleValueObserve(){if(this.syncingFromValue)return;this.syncingFromValue=!0;const[e,t]=function(e){if(!e)return["",""];const[t="",r=""]=e.split("/");return[t,r]}(this.value);this.startDate=e,this.endDate=t,this.internalError=this.validateBounds(e,t),this.syncingFromValue=!1,this.inline&&(this.pendingStart=e,this.pendingEnd=t)}handlePartObserve(){this.syncingFromValue||(this.syncingFromValue=!0,this.value=Y(this.startDate,this.endDate),this.internalError=this.validateBounds(this.startDate,this.endDate),this.syncingFromValue=!1)}get formValue(){}get presetCatalogue(){const e=this.localize,t=this.firstDayOfWeek,r=this.getToday().getFullYear(),i=r-1,n=[{id:"today",group:"today",label:e.term("presetToday"),resolve:e=>[e,e]},{id:"yesterday",group:"today",label:e.term("presetYesterday"),resolve:e=>{const t=y(e,-1);return[t,t]}},{id:"last-7",group:"lastDays",label:e.term("presetLastDays",7),resolve:e=>[y(e,-7),e]},{id:"last-30",group:"lastDays",label:e.term("presetLastDays",30),resolve:e=>[y(e,-30),e]},{id:"last-60",group:"lastDays",label:e.term("presetLastDays",60),resolve:e=>[y(e,-60),e]},{id:"last-90",group:"lastDays",label:e.term("presetLastDays",90),resolve:e=>[y(e,-90),e]},{id:"last-365",group:"lastDays",label:e.term("presetLastDays",365),resolve:e=>[y(e,-365),e]},{id:"last-week",group:"lastPeriod",label:e.term("presetLastWeek"),resolve:e=>{const r=k(e,t);return[y(r,-7),y(r,-1)]}},{id:"last-month",group:"lastPeriod",label:e.term("presetLastMonth"),resolve:e=>{const t=y($(e),-1);return[$(t),t]}},{id:"last-6-months",group:"lastPeriod",label:e.term("presetLastMonths",6),resolve:e=>{const t=y($(e),-1);return[$(z(t,-5)),t]}},{id:"last-quarter",group:"lastPeriod",label:e.term("presetLastQuarter"),resolve:e=>{const t=y(j(e),-1);return[j(t),t]}},{id:"last-year",group:"lastPeriod",label:e.term("presetLastYear"),resolve:e=>{const t=D(e,e.getFullYear()-1);return[x(t),y(x(e),-1)]}},{id:"last-12-months",group:"lastPeriod",label:e.term("presetLastMonths",12),resolve:e=>{const t=y($(e),-1);return[$(z(t,-11)),t]}},{id:"current-week",group:"currentPeriod",label:e.term("presetCurrentWeek"),resolve:e=>[k(e,t),e]},{id:"current-month",group:"currentPeriod",label:e.term("presetCurrentMonth"),resolve:e=>[$(e),e]},{id:"current-quarter",group:"currentPeriod",label:e.term("presetCurrentQuarter"),resolve:e=>[j(e),e]},{id:"current-year",group:"currentPeriod",label:e.term("presetCurrentYear"),resolve:e=>[x(e),e]}];for(const t of[r,i])for(const i of[4,3,2,1])n.push({id:`q-${t}-${i}`,group:"quarters",label:e.term("presetQuarter",i,t),resolve:()=>w(i,t),available:t===r?e=>F(i,e):void 0});return n}get visiblePresets(){const e=this.getToday(),t=f(this.min||""),r=f(this.max||"");let i=this.presetCatalogue;if(this.presets){const e=new Set(this.presets);i=i.filter((t=>e.has(t.id)))}return i.filter((i=>{if(i.available&&!i.available(e))return!1;const[n,a]=i.resolve(e);return!(t&&n.getTime()<t.getTime())&&!(r&&a.getTime()>r.getTime())}))}get presetGroups(){const e=this.visiblePresets;return _.map((t=>e.filter((e=>e.group===t)))).filter((e=>e.length>0))}getToday(){return f(this.today||"")||new Date}get activePresetId(){if(!this.pendingStart||!this.pendingEnd)return;const e=this.getToday();for(const t of this.visiblePresets){const[r,i]=t.resolve(e);if(b(r)===this.pendingStart&&b(i)===this.pendingEnd)return t.id}}createDateFormatters(){this.dateFormat=new Intl.DateTimeFormat(this.localize.resolvedLang,{day:"numeric",month:"short",year:"numeric"})}get displayValue(){const e=this.valueAsDateRange;if(!e)return"";const[t,r]=e,i=this.localize.term("rangeSeparator");return`${this.dateFormat.format(t)} ${i} ${this.dateFormat.format(r)}`}get pendingRangeLabel(){const e=f(this.pendingStart);if(!e)return"";const t=f(this.pendingEnd),r=this.localize.term("rangeSeparator");return t?`${this.dateFormat.format(e)} ${r} ${this.dateFormat.format(t)}`:this.dateFormat.format(e)}validateBounds(e,t){const r=f(this.min||""),i=f(this.max||""),n=f(e),a=f(t);return r&&n&&n<r?this.localize.term("dateOutOfMinBound",this.min):i&&a&&a>i?this.localize.term("dateOutOfMaxBound",this.max):void 0}render(){const e=this.displayValue,t=this.placeholder||this.localize.term("placeholder"),r=`${this.dateRangePickerId}-anchor`,i=`${this.dateRangePickerId}-popout`,n=`${this.dateRangePickerId}-header`,o=this.controlAriaLabel,d=this.controlAriaLabelledby,l=this.controlAriaDescribedby,p=this.activePresetId;return this.inline?a`${this.renderLabel()}<div class="n-drp" id="${r}" aria-label="${m(o)}" aria-labelledby="${m(d)}" aria-describedby="${m(l)}" ?inert="${this.effectiveDisabled||this.readonly}" aria-disabled="${this.effectiveDisabled?"true":s}">${this.renderBody(p)}</div>${this.renderError()} ${this.isHintBelow?this.renderHint():s}`:a`<div class="n-drp" id="${r}">${this.customTrigger?this.customTrigger:a`<nord-input class="${h({"n-drp-toggle":!0,"is-placeholder":!e})}" type="button" size="${this.size}" id="${`${this.dateRangePickerId}-input`}" value="${e||t}" label="${this.insideField?s:m(this.label)}" hint="${this.insideField?s:m(this.hint)}" error="${this.insideField?s:C(this.error||this.internalError,this.error||this.internalError)}" placeholder="${m(t)}" ?disabled="${this.effectiveDisabled}" ?required="${this.required}" ?readonly="${this.readonly}" ?hint-below="${this.hintBelow}" ?hide-label="${this.insideField||this.hideLabel}" aria-haspopup="dialog" aria-controls="${i}" aria-expanded="${this.open?"true":"false"}" aria-label="${m(o)}" aria-describedby="${m(l)}" aria-invalid="${m(this.controlAriaInvalid)}" @click="${this.handleTriggerClick}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" ${u(this.focusableRef)}>${this.insideField||this.hintSlot.isEmpty?s:a`<slot name="hint" slot="hint"></slot>`} ${this.insideField||this.labelSlot.isEmpty?s:a`<slot name="label" slot="label"></slot>`}<nord-button slot="end" class="n-drp-toggle-button" size="${this.size}" ?disabled="${this.effectiveDisabled||this.readonly}" aria-controls="${i}" type="button"><nord-icon name="interface-calendar"></nord-icon><nord-visually-hidden>${this.localize.term("buttonLabel")}</nord-visually-hidden></nord-button></nord-input>`}<nord-popout id="${i}" controlled anchor="${r}" align="start" position="block-end" role="dialog" aria-modal="true" aria-labelledby="${n}" @open="${this.openState.onPopoutOpen}" @close="${this.openState.onPopoutClose}"><div class="n-drp-popout"><div class="n-drp-popout-header"><span class="n-drp-heading" id="${n}">${this.localize.term("modalHeading")}</span> <button type="button" class="n-drp-close" aria-label="${this.localize.term("closeLabel")}" @click="${()=>this.hide(!0)}"><nord-icon name="interface-close-small"></nord-icon></button></div>${this.renderBody(p)}</div></nord-popout></div>`}renderBody(e){const t=this.isNarrow?"s":"m";return a`<div class="${h({"n-drp-body":!0,"is-narrow":this.isNarrow})}">${this.hidePresets||0===this.presetGroups.length?s:this.isNarrow?this.renderPresetsCollapsed(e):this.renderPresetsList(e)}<div class="n-drp-calendar"><nord-calendar range expand months="${this.isNarrow?1:2}" range-start="${this.pendingStart}" range-end="${this.pendingEnd}" min="${m(this.min)}" max="${m(this.max)}" today="${m(this.today)}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" .isDateHighlighted="${this.isDateHighlighted}" @range-change="${this.handleRangeChange}"></nord-calendar></div></div><div class="n-drp-footer"><nord-button type="button" size="${t}" variant="plain" @click="${this.handleClear}">${this.localize.term("clearLabel")}</nord-button><div class="n-drp-footer-end">${this.pendingRangeLabel?a`<span class="n-drp-period">${this.pendingRangeLabel}</span>`:s} ${this.inline?s:a`<nord-button type="button" size="${t}" @click="${()=>this.hide(!0)}">${this.localize.term("cancelLabel")}</nord-button>`}<nord-button type="button" size="${t}" variant="primary" ?disabled="${!this.pendingStart||!this.pendingEnd}" @click="${this.handleApply}">${this.localize.term("applyLabel")}</nord-button></div></div>`}renderPreset(e,t){return a`<li><button type="button" class="${h({"n-drp-preset":!0,"is-active":e.id===t})}" aria-pressed="${e.id===t?"true":"false"}" @click="${()=>this.handlePresetClick(e)}">${e.label}</button></li>`}renderPresetGroups(e){return this.presetGroups.map((t=>a`<ul class="n-drp-preset-group">${t.map((t=>this.renderPreset(t,e)))}</ul>`))}renderPresetsList(e){return a`<div class="n-drp-presets" role="group" aria-label="${this.localize.term("presetsLabel")}">${this.renderPresetGroups(e)}</div>`}renderPresetsCollapsed(e){var t;const r=`${this.dateRangePickerId}-presets`,i=null===(t=this.visiblePresets.find((t=>t.id===e)))||void 0===t?void 0:t.label;return a`<div class="n-drp-presets-collapsed"><nord-button type="button" size="s" expand aria-haspopup="true" aria-controls="${r}" aria-expanded="${this.presetsOpen?"true":"false"}">${null!=i?i:this.localize.term("presetsCollapsedLabel")}<nord-icon slot="end" name="interface-dropdown-small"></nord-icon></nord-button><nord-popout id="${r}" always-floating expand position="block-end" ?open="${this.presetsOpen}" @open="${()=>this.presetsOpen=!0}" @close="${()=>this.presetsOpen=!1}"><div class="n-drp-presets-menu" role="group" aria-label="${this.localize.term("presetsLabel")}">${this.renderPresetGroups(e)}</div></nord-popout></div>`}handlePresetClick(e){if(this.disabled||this.readonly)return;const[t,r]=e.resolve(this.getToday());this.pendingStart=b(t),this.pendingEnd=b(r),this.emitInput(),this.presetsOpen=!1}emitInput(){this.dispatchEvent(new V("input",{value:Y(this.pendingStart,this.pendingEnd),startDate:this.pendingStart,endDate:this.pendingEnd}))}commit(e,t){this.value=Y(e,t),this.dispatchEvent(new V("change",{value:this.value,startDate:e,endDate:t}))}show(){this.measureNarrow(),this.openState.show()}hide(e=!1){var t,r;e&&(null===(r=null!==(t=this.customTrigger)&&void 0!==t?t:this.toggle)||void 0===r||r.focus()),this.openState.hide()}focus(e){var t;null===(t=this.toggle)||void 0===t||t.focus(e)}};Q.narrowThresholdRem=57.5,e([d("nord-calendar",!0)],Q.prototype,"calendar",void 0),e([d(".n-drp-toggle",!0)],Q.prototype,"toggle",void 0),e([d("nord-popout",!0)],Q.prototype,"popout",void 0),e([l()],Q.prototype,"value",void 0),e([l({reflect:!0,attribute:"start-date"})],Q.prototype,"startDate",void 0),e([l({reflect:!0,attribute:"end-date"})],Q.prototype,"endDate",void 0),e([l({type:Boolean,reflect:!0})],Q.prototype,"open",void 0),e([l({reflect:!0})],Q.prototype,"min",void 0),e([l({reflect:!0})],Q.prototype,"max",void 0),e([l({reflect:!0})],Q.prototype,"today",void 0),e([l({reflect:!0,attribute:"first-day-of-week",type:Number})],Q.prototype,"firstDayOfWeek",void 0),e([l({attribute:!1})],Q.prototype,"isDateDisabled",void 0),e([l({attribute:!1})],Q.prototype,"isDateHighlighted",void 0),e([l({reflect:!0,type:Boolean,attribute:"hide-presets"})],Q.prototype,"hidePresets",void 0),e([l({attribute:!1})],Q.prototype,"presets",void 0),e([l({reflect:!0,type:Boolean})],Q.prototype,"inline",void 0),e([l({reflect:!0,attribute:"start-name"})],Q.prototype,"startName",void 0),e([l({reflect:!0,attribute:"end-name"})],Q.prototype,"endName",void 0),e([l({attribute:!1})],Q.prototype,"internalError",void 0),e([p()],Q.prototype,"pendingStart",void 0),e([p()],Q.prototype,"pendingEnd",void 0),e([p()],Q.prototype,"isNarrow",void 0),e([p()],Q.prototype,"presetsOpen",void 0),e([P("value")],Q.prototype,"handleValueObserve",null),e([P("startDate"),P("endDate")],Q.prototype,"handlePartObserve",null),Q=q=e([c("nord-date-range-picker")],Q);var U=Q;export{U as default};
|
|
2
2
|
//# sourceMappingURL=DateRangePicker.js.map
|
package/lib/FilterDateRange.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{c as e}from"./interface-calendar-Cw2bJfbS.js";import{css as i,html as o,LitElement as r}from"lit";import{query as a,property as s,customElement as l}from"lit/decorators.js";import{ifDefined as n}from"lit/directives/if-defined.js";import{O as p}from"./OpenStateController-CCnZ7up6.js";import{p as m}from"./dates-C-ZvzXaC.js";import{i as d}from"./light-dom-styles-DXsbiKU9.js";import{D as c}from"./DraftComponentMixin-4qug5Rky.js";import h from"./Icon.js";import{LocalizeController as j}from"./LocalizeController.js";import{FilterDateRangeChangeEvent as f,FilterDateRangeClearEvent as u,FilterDateRangeRemoveEvent as v}from"./FilterDateRangeEvents.js";import"./FilterField.js";import"./Popout-B6Hirj3y.js";import"./DateRangePicker.js";import"./events-Bv6wNHwJ.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./Component-BJ5O5n8k.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"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"./localization23.js";import"./localization24.js";import"./interface-close-small-CnpAFMO3.js";import"./interface-filter-CCsx9-u6.js";import"./filter-chip-C97zd4PT.js";import"./FilterFieldEvents.js";import"./Button.js";import"lit/directives/ref.js";import"./EventController-BBOmvfLa.js";import"./LightDomController-DIwtVelV.js";import"./SlotController-Z6eG7LSZ.js";import"./FocusableMixin-BlQLNPdJ.js";import"./InputMixin-LetXsCyv.js";import"./Spinner.js";import"./ButtonGroup.js";import"lit/directives/class-map.js";import"./DirectionController-ChvNGESZ.js";import"./VisuallyHidden.js";import"./positioning-D-K8Mueq.js";import"./LightDismissController-wcL1ziJa.js";import"./ShortcutController-CV5b0BZl.js";import"./tinykeys-DwvDXsEb.js";import"./ScrollbarController-BFC67Y2x.js";import"./interface-dropdown-small-CYvgxudU.js";import"./FormAssociatedMixin-D9aPREgv.js";import"./FormDataController-OUt5L5uC.js";import"./FieldControlMixin-BXNZJXu9.js";import"./context-consumer-BJVUulGf.js";import"./context-request-event-CCRlXoeR.js";import"./field-context.js";import"./create-context-CJ69ntlY.js";import"./ReadonlyMixin-BdJPGtQ3.js";import"./SizeMixin-CU9cLbLC.js";import"./DateRangeChangeEvent.js";import"./Input.js";import"./navigation-search-CBbIGzo2.js";import"lit/directives/style-map.js";import"./ResizeController-14PUwRQy.js";import"./AutocompleteMixin-D8eiOxvO.js";import"./TextSelectableMixin-Cfv__lHS.js";import"./FormField-CMgEFZCK.js";import"./TextField-
|
|
1
|
+
import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{c as e}from"./interface-calendar-Cw2bJfbS.js";import{css as i,html as o,LitElement as r}from"lit";import{query as a,property as s,customElement as l}from"lit/decorators.js";import{ifDefined as n}from"lit/directives/if-defined.js";import{O as p}from"./OpenStateController-CCnZ7up6.js";import{p as m}from"./dates-C-ZvzXaC.js";import{i as d}from"./light-dom-styles-DXsbiKU9.js";import{D as c}from"./DraftComponentMixin-4qug5Rky.js";import h from"./Icon.js";import{LocalizeController as j}from"./LocalizeController.js";import{FilterDateRangeChangeEvent as f,FilterDateRangeClearEvent as u,FilterDateRangeRemoveEvent as v}from"./FilterDateRangeEvents.js";import"./FilterField.js";import"./Popout-B6Hirj3y.js";import"./DateRangePicker.js";import"./events-Bv6wNHwJ.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./Component-BJ5O5n8k.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"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"./localization23.js";import"./localization24.js";import"./interface-close-small-CnpAFMO3.js";import"./interface-filter-CCsx9-u6.js";import"./filter-chip-C97zd4PT.js";import"./FilterFieldEvents.js";import"./Button.js";import"lit/directives/ref.js";import"./EventController-BBOmvfLa.js";import"./LightDomController-DIwtVelV.js";import"./SlotController-Z6eG7LSZ.js";import"./FocusableMixin-BlQLNPdJ.js";import"./InputMixin-LetXsCyv.js";import"./Spinner.js";import"./ButtonGroup.js";import"lit/directives/class-map.js";import"./DirectionController-ChvNGESZ.js";import"./VisuallyHidden.js";import"./positioning-D-K8Mueq.js";import"./LightDismissController-wcL1ziJa.js";import"./ShortcutController-CV5b0BZl.js";import"./tinykeys-DwvDXsEb.js";import"./ScrollbarController-BFC67Y2x.js";import"./interface-dropdown-small-CYvgxudU.js";import"./FormAssociatedMixin-D9aPREgv.js";import"./FormDataController-OUt5L5uC.js";import"./FieldControlMixin-BXNZJXu9.js";import"./context-consumer-BJVUulGf.js";import"./context-request-event-CCRlXoeR.js";import"./field-context.js";import"./create-context-CJ69ntlY.js";import"./ReadonlyMixin-BdJPGtQ3.js";import"./SizeMixin-CU9cLbLC.js";import"./DateRangeChangeEvent.js";import"./Input.js";import"./navigation-search-CBbIGzo2.js";import"lit/directives/style-map.js";import"./ResizeController-14PUwRQy.js";import"./AutocompleteMixin-D8eiOxvO.js";import"./TextSelectableMixin-Cfv__lHS.js";import"./FormField-CMgEFZCK.js";import"./TextField-BYSciLeB.js";import"./Calendar-D47b20IT.js";import"lit/directives/repeat.js";import"./collection-Dvg2XbxV.js";import"./number-Dg2vCfGd.js";import"./DateRangeSelectEvent.js";import"./DateSelectEvent.js";import"./Stack.js";const g=i`nord-filter-date-range{display:inline-flex;max-inline-size:100%}nord-filter-date-range .n-filter-date-range-popout{inline-size:var(--n-filter-date-range-popout-inline-size,max-content);max-inline-size:100%;padding:0}nord-filter-date-range nord-date-range-picker[inline] .n-drp{background:none;border:none;padding:0}`;h.registerIcon(e);let y=1,z=class extends(c(r)){constructor(){super(...arguments),this.filterDateRangeId="nord-filter-date-range-"+y++,this.localize=new j(this),this.openState=new p(this,{isOpen:()=>this.open,setOpen:t=>{this.open=t},popout:()=>this.popout,isInert:()=>this.disabled}),this.label="",this.value="",this.hidePresets=!1,this.removable=!1,this.clearable=!0,this.disabled=!1,this.size="s",this.name="",this.open=!1,this.handleTriggerClick=()=>{this.openState.toggle()},this.handleInnerChange=t=>{t.stopPropagation(),this.disabled||(this.value=t.value,this.dispatchEvent(new f({value:t.value,startDate:t.startDate,endDate:t.endDate})),this.hide())},this.handleInnerInput=t=>{t.stopPropagation()},this.handleClear=t=>{t.stopPropagation(),this.disabled||(this.value="",this.dispatchEvent(new f({value:"",startDate:"",endDate:""})),this.dispatchEvent(new u))},this.handleRemove=t=>{t.stopPropagation(),this.disabled||this.dispatchEvent(new v)}}get startDate(){var t;return null!==(t=this.value.split("/")[0])&&void 0!==t?t:""}get endDate(){var t;return null!==(t=this.value.split("/")[1])&&void 0!==t?t:""}connectedCallback(){super.connectedCallback(),d(this,g)}createRenderRoot(){return this}get displayValue(){if(!this.value)return"";const t=m(this.startDate),e=m(this.endDate);if(!t||!e)return this.value;const i=new Intl.DateTimeFormat(this.localize.resolvedLang,{day:"numeric",month:"short",year:"numeric"});return`${i.format(t)} ${this.localize.term("rangeSeparator")} ${i.format(e)}`}show(){this.openState.show()}hide(){this.openState.hide()}render(){const t=`${this.filterDateRangeId}-popout`;return o`<nord-filter-field aria-controls="${t}" aria-haspopup="dialog" aria-expanded="${this.open?"true":"false"}" label="${this.label}" value="${this.displayValue}" icon="interface-calendar" size="${this.size}" name="${n(this.name||void 0)}" ?removable="${this.removable}" ?clearable="${this.clearable}" ?disabled="${this.disabled}" @click="${this.handleTriggerClick}" @clear="${this.handleClear}" @remove="${this.handleRemove}"></nord-filter-field><nord-popout id="${t}" controlled always-floating @open="${this.openState.onPopoutOpen}" @close="${this.openState.onPopoutClose}"><div class="n-filter-date-range-popout"><nord-date-range-picker inline label="${this.label}" hide-label value="${this.value}" min="${n(this.min)}" max="${n(this.max)}" today="${n(this.today)}" first-day-of-week="${n(this.firstDayOfWeek)}" ?hide-presets="${this.hidePresets}" ?disabled="${this.disabled}" @change="${this.handleInnerChange}" @input="${this.handleInnerInput}"></nord-date-range-picker></div></nord-popout>`}};t([a("nord-popout",!0)],z.prototype,"popout",void 0),t([s({reflect:!0})],z.prototype,"label",void 0),t([s({reflect:!0})],z.prototype,"value",void 0),t([s({reflect:!0})],z.prototype,"min",void 0),t([s({reflect:!0})],z.prototype,"max",void 0),t([s({reflect:!0,type:Boolean,attribute:"hide-presets"})],z.prototype,"hidePresets",void 0),t([s({reflect:!0,type:Number,attribute:"first-day-of-week"})],z.prototype,"firstDayOfWeek",void 0),t([s({reflect:!0})],z.prototype,"today",void 0),t([s({reflect:!0,type:Boolean})],z.prototype,"removable",void 0),t([s({reflect:!0,type:Boolean})],z.prototype,"clearable",void 0),t([s({reflect:!0,type:Boolean})],z.prototype,"disabled",void 0),t([s({reflect:!0})],z.prototype,"size",void 0),t([s({reflect:!0})],z.prototype,"name",void 0),t([s({reflect:!0,type:Boolean})],z.prototype,"open",void 0),z=t([l("nord-filter-date-range")],z);var b=z;export{f as FilterDateRangeChangeEvent,u as FilterDateRangeClearEvent,v as FilterDateRangeRemoveEvent,b as default};
|
|
2
2
|
//# sourceMappingURL=FilterDateRange.js.map
|
package/lib/FilterDropdown.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{c as t}from"./interface-checked-small-BQmkNgCI.js";import{c as i,A as o}from"./ActiveDescendantController-BnMqM79O.js";import{c as n}from"./interface-close-small-CnpAFMO3.js";import{f as s}from"./interface-filter-CCsx9-u6.js";import{s as r}from"./navigation-search-CBbIGzo2.js";import{css as l,html as a,nothing as d,LitElement as p}from"lit";import{query as c,property as h,state as u,customElement as v}from"lit/decorators.js";import{classMap as f}from"lit/directives/class-map.js";import{createRef as m,ref as b}from"lit/directives/ref.js";import{repeat as g}from"lit/directives/repeat.js";import{L as w}from"./LightDismissController-wcL1ziJa.js";import{O as y}from"./OpenStateController-CCnZ7up6.js";import{i as j}from"./light-dom-styles-DXsbiKU9.js";import{D as z}from"./DraftComponentMixin-4qug5Rky.js";import{s as $}from"./filter-chip-C97zd4PT.js";import k from"./Icon.js";import{LocalizeController as x}from"./LocalizeController.js";import{FilterDropdownRemoveEvent as S,FilterDropdownSearchChangeEvent as A,FilterDropdownLoadMoreEvent as D,FilterDropdownChangeEvent as I,FilterDropdownClearEvent as O}from"./FilterDropdownEvents.js";import"./Button.js";import"./ButtonGroup.js";import"./Input.js";import"./Popout-B6Hirj3y.js";import"./Spinner.js";import"./VisuallyHidden.js";import"./number-Dg2vCfGd.js";import"./EventController-BBOmvfLa.js";import"./ShortcutController-CV5b0BZl.js";import"./tinykeys-DwvDXsEb.js";import"./events-Bv6wNHwJ.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./Component-BJ5O5n8k.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"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"./localization23.js";import"./localization24.js";import"./LightDomController-DIwtVelV.js";import"./SlotController-Z6eG7LSZ.js";import"./FocusableMixin-BlQLNPdJ.js";import"./InputMixin-LetXsCyv.js";import"./DirectionController-ChvNGESZ.js";import"lit/directives/style-map.js";import"./ResizeController-14PUwRQy.js";import"./AutocompleteMixin-D8eiOxvO.js";import"./FormAssociatedMixin-D9aPREgv.js";import"./FormDataController-OUt5L5uC.js";import"./FieldControlMixin-BXNZJXu9.js";import"./context-consumer-BJVUulGf.js";import"./context-request-event-CCRlXoeR.js";import"./field-context.js";import"./create-context-CJ69ntlY.js";import"./ReadonlyMixin-BdJPGtQ3.js";import"./SizeMixin-CU9cLbLC.js";import"./TextSelectableMixin-Cfv__lHS.js";import"./FormField-CMgEFZCK.js";import"./TextField-CSKvieoG.js";import"./positioning-D-K8Mueq.js";import"./ScrollbarController-BFC67Y2x.js";const C=l`nord-filter-dropdown{--_n-filter-dropdown-list-inline-size:var(--n-filter-dropdown-list-inline-size,250px)}nord-filter-dropdown .n-filter-dropdown-panel{display:flex;flex-direction:column;max-inline-size:calc(var(--_n-filter-dropdown-list-inline-size)*1.5);min-inline-size:var(--_n-filter-dropdown-list-inline-size)}nord-filter-dropdown .n-filter-dropdown-size-s{--_n-filter-dropdown-list-inline-size:var(--n-filter-dropdown-list-inline-size,250px)}nord-filter-dropdown .n-filter-dropdown-size-l{--_n-filter-dropdown-list-inline-size:var(--n-filter-dropdown-list-inline-size,300px)}nord-filter-dropdown .n-filter-dropdown-search{padding-block-end:var(--n-space-xs);padding-block-start:var(--n-space-m);padding-inline-end:var(--n-space-m);padding-inline-start:var(--n-space-m)}nord-filter-dropdown .n-filter-dropdown-select-all{border-block-end:1px solid var(--n-color-border);padding-block-start:0}nord-filter-dropdown .n-filter-dropdown-list,nord-filter-dropdown .n-filter-dropdown-select-all{padding-block-end:var(--n-space-s);padding-inline-end:var(--n-space-s);padding-inline-start:var(--n-space-s)}nord-filter-dropdown .n-filter-dropdown-list{max-block-size:330px;overflow-y:auto;padding-block-start:var(--n-space-s)}nord-filter-dropdown .n-filter-dropdown-list.is-loading-more{opacity:.3;pointer-events:none}@media (width <= 35.9375em){nord-filter-dropdown .n-filter-dropdown-panel{max-inline-size:none}nord-filter-dropdown .n-filter-dropdown-list{max-block-size:70vh}}nord-filter-dropdown .n-filter-dropdown-group{border-block-end:1px solid var(--n-color-border);margin-block-end:var(--n-space-s);padding-block-end:var(--n-space-s)}nord-filter-dropdown .n-filter-dropdown-group:last-child{border-block-end:0;margin-block-end:0;padding-block-end:0}nord-filter-dropdown .n-filter-dropdown-heading{color:var(--n-color-text-weaker);font-size:var(--n-font-size-s);font-weight:var(--n-font-weight-active);padding-block-end:var(--n-space-xs);padding-block-start:var(--n-space-xs);padding-inline-end:var(--n-space-s);padding-inline-start:var(--n-space-s)}nord-filter-dropdown .n-filter-dropdown-option{align-items:center;border-radius:var(--n-border-radius-s);color:var(--n-color-text);cursor:pointer;display:flex;gap:var(--n-space-s);padding-block-end:var(--n-space-s);padding-block-start:var(--n-space-s);padding-inline-end:var(--n-space-s);padding-inline-start:var(--n-space-s);user-select:none}nord-filter-dropdown .n-filter-dropdown-option.is-indented{padding-inline-start:var(--n-space-l)}nord-filter-dropdown .n-filter-dropdown-option.is-active,nord-filter-dropdown .n-filter-dropdown-option:hover{background-color:var(--n-color-active)}nord-filter-dropdown .n-filter-dropdown-option.is-disabled{color:var(--n-color-text-weakest);cursor:not-allowed;pointer-events:none}nord-filter-dropdown .n-filter-dropdown-option-label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nord-filter-dropdown .n-filter-dropdown-checkbox{background-color:var(--n-color-surface);block-size:var(--n-space-m);border:1px solid var(--n-color-border-hover);border-radius:var(--n-border-radius-s);color:var(--n-color-text-on-accent);display:grid;flex:0 0 var(--n-space-m);inline-size:var(--n-space-m);place-items:center}nord-filter-dropdown .n-filter-dropdown-checkbox:has(nord-icon){background-color:var(--n-color-accent);border-color:var(--n-color-accent)}nord-filter-dropdown .n-filter-dropdown-check{block-size:var(--n-space-m);color:var(--n-color-text-highlight);display:grid;flex:0 0 var(--n-space-m);inline-size:var(--n-space-m);place-items:center}nord-filter-dropdown .n-filter-dropdown-empty{color:var(--n-color-text-weaker);display:flex;justify-content:center;padding-block-end:var(--n-space-s);padding-block-start:var(--n-space-s);padding-inline-end:var(--n-space-s);padding-inline-start:var(--n-space-s)}`;k.registerIcon(t),k.registerIcon(i),k.registerIcon(n),k.registerIcon(s),k.registerIcon(r);let L=1;function M(e){return"heading"in e}let R=class extends(z(p)){constructor(){super(...arguments),this.filterDropdownId="nord-filter-dropdown-"+L++,this.localize=new x(this),this.listRef=m(),this.dismiss=new w(this,{isOpen:()=>this.open,onDismiss:()=>this.hide(),isDismissible:e=>e!==this}),this.activeDescendant=new o(this,{count:()=>this.flatOptions.length,isEnabled:e=>{var t;return!(null===(t=this.flatOptions[e])||void 0===t?void 0:t.disabled)},optionId:e=>this.optionId(e)}),this.openState=new y(this,{isOpen:()=>this.open,setOpen:e=>{this.open=e},popout:()=>this.popout,isInert:()=>this.disabled,onOpen:()=>{var e;this.loadMoreRequested=!1,null===(e=this.listRef.value)||void 0===e||e.scrollTo(0,0),this.activeDescendant.reset()},onClose:()=>{this.search&&(this.search=""),this.removable&&this.isInactive&&this.dispatchEvent(new S)}}),this.label="",this.name="",this.icon="interface-filter",this.size="s",this.options=[],this.optionsValueKey="value",this.optionsLabelKey="label",this.value="",this.multiple=!1,this.searchable=!1,this.internalSearch=!0,this.selectAll=!1,this.clearable=!0,this.removable=!1,this.disabled=!1,this.loading=!1,this.open=!1,this.noResultsMessage="",this.labelForUnknown="",this.search="",this.scrollActivePending=!1,this.loadMoreRequested=!1,this.handleTriggerClick=()=>{this.openState.toggle()},this.toggleSelectAll=()=>{!this.disabled&&this.multiple&&this.commit(this.isAllSelected?[]:[...this.allSelectableValues])},this.handleClear=e=>{e.stopPropagation(),this.disabled||(this.clear(),this.focus())},this.handleRemove=e=>{e.stopPropagation(),this.disabled||(this.clear(),this.dispatchEvent(new S))},this.handleSearchInput=e=>{if(e.stopPropagation(),this.disabled)return;const t=e.target;this.search=t.value,this.activeDescendant.reset(),this.scrollActivePending=!0,this.dispatchEvent(new A(this.search))},this.handleListScroll=e=>{if(this.disabled)return;const t=e.target,{scrollTop:i,scrollHeight:o,clientHeight:n}=t;if(o<=n)return;(i+n)/o>.8?this.loading||this.loadMoreRequested||(this.loadMoreRequested=!0,this.dispatchEvent(new D)):this.loadMoreRequested=!1},this.handleKeydown=e=>{if(!this.disabled)switch(e.key){case"ArrowDown":if(e.preventDefault(),!this.open)return void this.show();this.activeDescendant.move(1),this.scrollActivePending=!0;break;case"ArrowUp":if(e.preventDefault(),!this.open)return void this.show();this.activeDescendant.move(-1),this.scrollActivePending=!0;break;case"Home":this.open&&(e.preventDefault(),this.activeDescendant.first(),this.scrollActivePending=!0);break;case"End":this.open&&(e.preventDefault(),this.activeDescendant.last(),this.scrollActivePending=!0);break;case"Enter":{if(!this.open)return e.preventDefault(),void this.show();e.preventDefault();const t=this.flatOptions[this.activeDescendant.activeIndex];t&&this.toggle(t);break}case"Escape":this.open&&(e.preventDefault(),this.hide(),this.focus())}}}connectedCallback(){super.connectedCallback(),j(this,C),j(this,$,"nord-filter-chip")}createRenderRoot(){return this}get valueAsArray(){const{value:e}=this;return Array.isArray(e)?e:e?[e]:[]}get isInactive(){return 0===this.valueAsArray.length}getOptionValue(e){var t;return String(null!==(t=e[this.optionsValueKey])&&void 0!==t?t:"")}getOptionLabel(e){var t;return String(null!==(t=e[this.optionsLabelKey])&&void 0!==t?t:"")}get hasGroupedOptions(){return this.options.some((e=>{var t;return M(e)||Boolean(null===(t=e.children)||void 0===t?void 0:t.length)}))}get needle(){return this.searchable&&this.internalSearch?this.search.trim().toLocaleLowerCase():""}matchesSearch(e){const t=this.needle;return!t||this.getOptionLabel(e).toLocaleLowerCase().includes(t)}get sections(){var e,t;const i=(e,t)=>({value:this.getOptionValue(e),label:this.getOptionLabel(e),disabled:Boolean(e.disabled),indent:t,source:e});if(!this.hasGroupedOptions){const e=this.options.filter((e=>this.matchesSearch(e))).map((e=>i(e,!1)));return e.length?[{options:e}]:[]}const o=[];let n=[];const s=()=>{n.length&&(o.push({options:n}),n=[])};for(const r of this.options)if(M(r)){s();const t=(null!==(e=r.children)&&void 0!==e?e:[]).filter((e=>this.matchesSearch(e))).map((e=>i({...e,disabled:e.disabled||r.disabled},!1)));t.length&&o.push({heading:r.heading,options:t})}else if(null===(t=r.children)||void 0===t?void 0:t.length){const e=this.matchesSearch(r),t=r.children.filter((e=>this.matchesSearch(e)));if(e||t.length){e&&n.push(i(r,!1));for(const e of t)n.push(i(e,!0))}}else this.matchesSearch(r)&&n.push(i(r,!1));return s(),o}get flatOptions(){return this.sections.flatMap((e=>e.options))}get allSelectableValues(){var e,t;const i=[];for(const o of this.options)if(M(o)){if(o.disabled)continue;for(const t of null!==(e=o.children)&&void 0!==e?e:[])t.disabled||i.push(this.getOptionValue(t))}else{o.disabled||i.push(this.getOptionValue(o));for(const e of null!==(t=o.children)&&void 0!==t?t:[])o.disabled||e.disabled||i.push(this.getOptionValue(e))}return i}get isAllSelected(){if(!this.selectAll||!this.multiple)return!1;const e=this.allSelectableValues,t=new Set(this.valueAsArray);return e.length>0&&e.every((e=>t.has(e)))}labelForValue(e){var t,i;for(const o of this.options)if(M(o)){for(const i of null!==(t=o.children)&&void 0!==t?t:[])if(this.getOptionValue(i)===e)return this.getOptionLabel(i)}else{if(this.getOptionValue(o)===e)return this.getOptionLabel(o);for(const t of null!==(i=o.children)&&void 0!==i?i:[])if(this.getOptionValue(t)===e)return this.getOptionLabel(t)}return this.labelForUnknown||this.localize.term("unknown")}get selectionLabel(){const e=this.valueAsArray;if(0===e.length)return"";const t=this.labelForValue(e[0]);return e.length>1?t+this.localize.term("countSuffix",e.length-1):t}isSelected(e){return this.valueAsArray.includes(e)}show(){this.openState.show()}hide(){this.openState.hide()}focus(e){var t;null===(t=this.triggerButton)||void 0===t||t.focus(e)}updated(e){var t,i;super.updated(e),this.scrollActivePending&&(this.scrollActivePending=!1,null===(i=null===(t=this.listRef.value)||void 0===t?void 0:t.querySelector(".n-filter-dropdown-option.is-active"))||void 0===i||i.scrollIntoView({block:"nearest"})),this.loadMoreRequested&&(e.has("loading")||e.has("options"))&&(this.loadMoreRequested=!1),e.has("disabled")&&this.disabled&&(this.activeDescendant.reset(),this.scrollActivePending=!0)}commit(e){this.value=e,this.dispatchEvent(new I(e))}toggle(e){if(this.disabled||e.disabled)return;if(!this.multiple)return this.commit(e.value),void this.hide();const t=this.valueAsArray,i=t.includes(e.value)?t.filter((t=>t!==e.value)):[...t,e.value];this.commit(i)}clear(){this.disabled||(this.search="",this.dispatchEvent(new O),this.commit(this.multiple?[]:""))}get listInlineSizeClass(){return`n-filter-dropdown-size-${this.size}`}renderIndicator(e){const t=this.isSelected(e);return this.multiple?a`<span class="n-filter-dropdown-checkbox">${t?a`<nord-icon name="interface-checked-small" size="xs"></nord-icon>`:d}</span>`:a`<span class="n-filter-dropdown-check">${t?a`<nord-icon name="interface-checked" size="s"></nord-icon>`:d}</span>`}renderOption(e,t){const i=this.isSelected(e.value);return a`<div id="${this.optionId(t)}" class="${f({"n-filter-dropdown-option":!0,"is-active":t===this.activeDescendant.activeIndex,"is-disabled":e.disabled,"is-indented":e.indent})}" role="option" aria-selected="${i?"true":"false"}" aria-disabled="${e.disabled?"true":d}" @click="${()=>this.toggle(e)}" @mousemove="${()=>this.activeDescendant.setActiveIndex(t)}">${this.renderIndicator(e.value)} <span class="n-filter-dropdown-option-label">${e.label}</span></div>`}optionId(e){return`${this.filterDropdownId}-option-${e}`}renderList(){const e=this.sections,t=e.flatMap((e=>e.options));if(this.loading&&0===t.length)return a`<div class="n-filter-dropdown-empty" role="status"><nord-spinner size="s"></nord-spinner></div>`;if(0===t.length)return a`<div class="n-filter-dropdown-empty" role="status">${this.noResultsMessage||this.localize.term("noResults")}</div>`;let i=0;return g(e,((e,t)=>t),((e,t)=>{const o=e.heading?`${this.filterDropdownId}-group-${t}`:void 0;return a`<div class="n-filter-dropdown-group" role="group" aria-labelledby="${null!=o?o:d}">${e.heading?a`<div class="n-filter-dropdown-heading" id="${o}" role="presentation">${e.heading}</div>`:d} ${g(e.options,((e,i)=>`${t}-${i}`),(e=>this.renderOption(e,i++)))}</div>`}))}render(){var e;const t=`${this.filterDropdownId}-popout`,i=`${this.filterDropdownId}-list`,o=!this.isInactive,n=this.removable,s=!n&&this.clearable&&o,r=this.open&&null!==(e=this.activeDescendant.activeDescendant)&&void 0!==e?e:d;return a`<nord-button-group><nord-button class="n-filter-dropdown-trigger" type="button" size="${this.size}" variant="${o?d:"dashed"}" aria-controls="${t}" aria-haspopup="dialog" aria-expanded="${this.open?"true":"false"}" aria-activedescendant="${r}" ?disabled="${this.disabled}" @click="${this.handleTriggerClick}" @keydown="${this.handleKeydown}"><nord-icon slot="start" name="${this.icon}" label="${this.localize.term("filterIconLabel")}"></nord-icon><span class="n-filter-dropdown-label">${o?this.localize.term("selectionLabel",this.label):this.label}</span> ${o?a`<span class="n-filter-dropdown-value">${this.selectionLabel}</span>`:d}</nord-button>${s?a`<nord-button class="n-filter-dropdown-clear" type="button" size="${this.size}" square ?disabled="${this.disabled}" @click="${this.handleClear}"><nord-icon name="interface-close-small" size="xs"></nord-icon><nord-visually-hidden>${this.localize.term("clearLabel")}</nord-visually-hidden></nord-button>`:d} ${n?a`<nord-button class="n-filter-dropdown-remove" type="button" size="${this.size}" square variant="${o?d:"dashed"}" ?disabled="${this.disabled}" @click="${this.handleRemove}"><nord-icon name="interface-close-small" size="xs"></nord-icon><nord-visually-hidden>${this.localize.term("removeLabel")}</nord-visually-hidden></nord-button>`:d}</nord-button-group><nord-popout id="${t}" controlled always-floating @open="${this.openState.onPopoutOpen}" @close="${this.openState.onPopoutClose}"><div class="${f({"n-filter-dropdown-panel":!0,[this.listInlineSizeClass]:!0})}">${this.searchable?a`<div class="n-filter-dropdown-search"><nord-input type="search" label="${this.localize.term("searchLabel")}" hide-label expand size="s" .value="${this.search}" ?disabled="${this.disabled}" @input="${this.handleSearchInput}" @keydown="${this.handleKeydown}"><nord-icon slot="start" name="navigation-search"></nord-icon>${this.loading?a`<nord-spinner slot="end" size="s"></nord-spinner>`:d}</nord-input></div>`:d} ${this.selectAll&&this.multiple?a`<div class="n-filter-dropdown-select-all"><div class="${f({"n-filter-dropdown-option":!0,"is-active":!1})}" role="button" tabindex="0" aria-pressed="${this.isAllSelected?"true":"false"}" aria-disabled="${this.disabled?"true":d}" @click="${this.toggleSelectAll}" @keydown="${e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.toggleSelectAll())}}"><span class="n-filter-dropdown-checkbox">${this.isAllSelected?a`<nord-icon name="interface-checked-small" size="xs"></nord-icon>`:d} </span><span class="n-filter-dropdown-option-label">${this.isAllSelected?this.localize.term("deselectAll"):this.localize.term("selectAll")}</span></div></div>`:d}<div ${b(this.listRef)} id="${i}" class="${f({"n-filter-dropdown-list":!0,"is-loading-more":this.loading&&this.flatOptions.length>0})}" role="listbox" aria-label="${this.label||d}" aria-multiselectable="${this.multiple?"true":"false"}" @scroll="${this.handleListScroll}" @keydown="${this.handleKeydown}">${this.renderList()}</div></div></nord-popout>`}};e([c("nord-popout",!0)],R.prototype,"popout",void 0),e([c(".n-filter-dropdown-trigger")],R.prototype,"triggerButton",void 0),e([h({reflect:!0})],R.prototype,"label",void 0),e([h({reflect:!0})],R.prototype,"name",void 0),e([h({reflect:!0})],R.prototype,"icon",void 0),e([h({reflect:!0})],R.prototype,"size",void 0),e([h({attribute:!1})],R.prototype,"options",void 0),e([h({reflect:!0,attribute:"options-value-key"})],R.prototype,"optionsValueKey",void 0),e([h({reflect:!0,attribute:"options-label-key"})],R.prototype,"optionsLabelKey",void 0),e([h({attribute:!1})],R.prototype,"value",void 0),e([h({reflect:!0,type:Boolean})],R.prototype,"multiple",void 0),e([h({reflect:!0,type:Boolean})],R.prototype,"searchable",void 0),e([h({reflect:!0,type:Boolean,attribute:"internal-search"})],R.prototype,"internalSearch",void 0),e([h({reflect:!0,type:Boolean,attribute:"select-all"})],R.prototype,"selectAll",void 0),e([h({reflect:!0,type:Boolean})],R.prototype,"clearable",void 0),e([h({reflect:!0,type:Boolean})],R.prototype,"removable",void 0),e([h({reflect:!0,type:Boolean})],R.prototype,"disabled",void 0),e([h({reflect:!0,type:Boolean})],R.prototype,"loading",void 0),e([h({reflect:!0,type:Boolean})],R.prototype,"open",void 0),e([h({reflect:!0,attribute:"no-results-message"})],R.prototype,"noResultsMessage",void 0),e([h({reflect:!0,attribute:"label-for-unknown"})],R.prototype,"labelForUnknown",void 0),e([u()],R.prototype,"search",void 0),R=e([v("nord-filter-dropdown")],R);var V=R;export{I as FilterDropdownChangeEvent,O as FilterDropdownClearEvent,D as FilterDropdownLoadMoreEvent,S as FilterDropdownRemoveEvent,A as FilterDropdownSearchChangeEvent,V as default};
|
|
1
|
+
import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{c as t}from"./interface-checked-small-BQmkNgCI.js";import{c as i,A as o}from"./ActiveDescendantController-BnMqM79O.js";import{c as n}from"./interface-close-small-CnpAFMO3.js";import{f as s}from"./interface-filter-CCsx9-u6.js";import{s as r}from"./navigation-search-CBbIGzo2.js";import{css as l,html as a,nothing as d,LitElement as p}from"lit";import{query as c,property as h,state as u,customElement as v}from"lit/decorators.js";import{classMap as f}from"lit/directives/class-map.js";import{createRef as m,ref as b}from"lit/directives/ref.js";import{repeat as g}from"lit/directives/repeat.js";import{L as w}from"./LightDismissController-wcL1ziJa.js";import{O as y}from"./OpenStateController-CCnZ7up6.js";import{i as j}from"./light-dom-styles-DXsbiKU9.js";import{D as z}from"./DraftComponentMixin-4qug5Rky.js";import{s as $}from"./filter-chip-C97zd4PT.js";import k from"./Icon.js";import{LocalizeController as x}from"./LocalizeController.js";import{FilterDropdownRemoveEvent as S,FilterDropdownSearchChangeEvent as A,FilterDropdownLoadMoreEvent as D,FilterDropdownChangeEvent as I,FilterDropdownClearEvent as O}from"./FilterDropdownEvents.js";import"./Button.js";import"./ButtonGroup.js";import"./Input.js";import"./Popout-B6Hirj3y.js";import"./Spinner.js";import"./VisuallyHidden.js";import"./number-Dg2vCfGd.js";import"./EventController-BBOmvfLa.js";import"./ShortcutController-CV5b0BZl.js";import"./tinykeys-DwvDXsEb.js";import"./events-Bv6wNHwJ.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./Component-BJ5O5n8k.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"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";import"./localization23.js";import"./localization24.js";import"./LightDomController-DIwtVelV.js";import"./SlotController-Z6eG7LSZ.js";import"./FocusableMixin-BlQLNPdJ.js";import"./InputMixin-LetXsCyv.js";import"./DirectionController-ChvNGESZ.js";import"lit/directives/style-map.js";import"./ResizeController-14PUwRQy.js";import"./AutocompleteMixin-D8eiOxvO.js";import"./FormAssociatedMixin-D9aPREgv.js";import"./FormDataController-OUt5L5uC.js";import"./FieldControlMixin-BXNZJXu9.js";import"./context-consumer-BJVUulGf.js";import"./context-request-event-CCRlXoeR.js";import"./field-context.js";import"./create-context-CJ69ntlY.js";import"./ReadonlyMixin-BdJPGtQ3.js";import"./SizeMixin-CU9cLbLC.js";import"./TextSelectableMixin-Cfv__lHS.js";import"./FormField-CMgEFZCK.js";import"./TextField-BYSciLeB.js";import"./positioning-D-K8Mueq.js";import"./ScrollbarController-BFC67Y2x.js";const C=l`nord-filter-dropdown{--_n-filter-dropdown-list-inline-size:var(--n-filter-dropdown-list-inline-size,250px)}nord-filter-dropdown .n-filter-dropdown-panel{display:flex;flex-direction:column;max-inline-size:calc(var(--_n-filter-dropdown-list-inline-size)*1.5);min-inline-size:var(--_n-filter-dropdown-list-inline-size)}nord-filter-dropdown .n-filter-dropdown-size-s{--_n-filter-dropdown-list-inline-size:var(--n-filter-dropdown-list-inline-size,250px)}nord-filter-dropdown .n-filter-dropdown-size-l{--_n-filter-dropdown-list-inline-size:var(--n-filter-dropdown-list-inline-size,300px)}nord-filter-dropdown .n-filter-dropdown-search{padding-block-end:var(--n-space-xs);padding-block-start:var(--n-space-m);padding-inline-end:var(--n-space-m);padding-inline-start:var(--n-space-m)}nord-filter-dropdown .n-filter-dropdown-select-all{border-block-end:1px solid var(--n-color-border);padding-block-start:0}nord-filter-dropdown .n-filter-dropdown-list,nord-filter-dropdown .n-filter-dropdown-select-all{padding-block-end:var(--n-space-s);padding-inline-end:var(--n-space-s);padding-inline-start:var(--n-space-s)}nord-filter-dropdown .n-filter-dropdown-list{max-block-size:330px;overflow-y:auto;padding-block-start:var(--n-space-s)}nord-filter-dropdown .n-filter-dropdown-list.is-loading-more{opacity:.3;pointer-events:none}@media (width <= 35.9375em){nord-filter-dropdown .n-filter-dropdown-panel{max-inline-size:none}nord-filter-dropdown .n-filter-dropdown-list{max-block-size:70vh}}nord-filter-dropdown .n-filter-dropdown-group{border-block-end:1px solid var(--n-color-border);margin-block-end:var(--n-space-s);padding-block-end:var(--n-space-s)}nord-filter-dropdown .n-filter-dropdown-group:last-child{border-block-end:0;margin-block-end:0;padding-block-end:0}nord-filter-dropdown .n-filter-dropdown-heading{color:var(--n-color-text-weaker);font-size:var(--n-font-size-s);font-weight:var(--n-font-weight-active);padding-block-end:var(--n-space-xs);padding-block-start:var(--n-space-xs);padding-inline-end:var(--n-space-s);padding-inline-start:var(--n-space-s)}nord-filter-dropdown .n-filter-dropdown-option{align-items:center;border-radius:var(--n-border-radius-s);color:var(--n-color-text);cursor:pointer;display:flex;gap:var(--n-space-s);padding-block-end:var(--n-space-s);padding-block-start:var(--n-space-s);padding-inline-end:var(--n-space-s);padding-inline-start:var(--n-space-s);user-select:none}nord-filter-dropdown .n-filter-dropdown-option.is-indented{padding-inline-start:var(--n-space-l)}nord-filter-dropdown .n-filter-dropdown-option.is-active,nord-filter-dropdown .n-filter-dropdown-option:hover{background-color:var(--n-color-active)}nord-filter-dropdown .n-filter-dropdown-option.is-disabled{color:var(--n-color-text-weakest);cursor:not-allowed;pointer-events:none}nord-filter-dropdown .n-filter-dropdown-option-label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nord-filter-dropdown .n-filter-dropdown-checkbox{background-color:var(--n-color-surface);block-size:var(--n-space-m);border:1px solid var(--n-color-border-hover);border-radius:var(--n-border-radius-s);color:var(--n-color-text-on-accent);display:grid;flex:0 0 var(--n-space-m);inline-size:var(--n-space-m);place-items:center}nord-filter-dropdown .n-filter-dropdown-checkbox:has(nord-icon){background-color:var(--n-color-accent);border-color:var(--n-color-accent)}nord-filter-dropdown .n-filter-dropdown-check{block-size:var(--n-space-m);color:var(--n-color-text-highlight);display:grid;flex:0 0 var(--n-space-m);inline-size:var(--n-space-m);place-items:center}nord-filter-dropdown .n-filter-dropdown-empty{color:var(--n-color-text-weaker);display:flex;justify-content:center;padding-block-end:var(--n-space-s);padding-block-start:var(--n-space-s);padding-inline-end:var(--n-space-s);padding-inline-start:var(--n-space-s)}`;k.registerIcon(t),k.registerIcon(i),k.registerIcon(n),k.registerIcon(s),k.registerIcon(r);let L=1;function M(e){return"heading"in e}let R=class extends(z(p)){constructor(){super(...arguments),this.filterDropdownId="nord-filter-dropdown-"+L++,this.localize=new x(this),this.listRef=m(),this.dismiss=new w(this,{isOpen:()=>this.open,onDismiss:()=>this.hide(),isDismissible:e=>e!==this}),this.activeDescendant=new o(this,{count:()=>this.flatOptions.length,isEnabled:e=>{var t;return!(null===(t=this.flatOptions[e])||void 0===t?void 0:t.disabled)},optionId:e=>this.optionId(e)}),this.openState=new y(this,{isOpen:()=>this.open,setOpen:e=>{this.open=e},popout:()=>this.popout,isInert:()=>this.disabled,onOpen:()=>{var e;this.loadMoreRequested=!1,null===(e=this.listRef.value)||void 0===e||e.scrollTo(0,0),this.activeDescendant.reset()},onClose:()=>{this.search&&(this.search=""),this.removable&&this.isInactive&&this.dispatchEvent(new S)}}),this.label="",this.name="",this.icon="interface-filter",this.size="s",this.options=[],this.optionsValueKey="value",this.optionsLabelKey="label",this.value="",this.multiple=!1,this.searchable=!1,this.internalSearch=!0,this.selectAll=!1,this.clearable=!0,this.removable=!1,this.disabled=!1,this.loading=!1,this.open=!1,this.noResultsMessage="",this.labelForUnknown="",this.search="",this.scrollActivePending=!1,this.loadMoreRequested=!1,this.handleTriggerClick=()=>{this.openState.toggle()},this.toggleSelectAll=()=>{!this.disabled&&this.multiple&&this.commit(this.isAllSelected?[]:[...this.allSelectableValues])},this.handleClear=e=>{e.stopPropagation(),this.disabled||(this.clear(),this.focus())},this.handleRemove=e=>{e.stopPropagation(),this.disabled||(this.clear(),this.dispatchEvent(new S))},this.handleSearchInput=e=>{if(e.stopPropagation(),this.disabled)return;const t=e.target;this.search=t.value,this.activeDescendant.reset(),this.scrollActivePending=!0,this.dispatchEvent(new A(this.search))},this.handleListScroll=e=>{if(this.disabled)return;const t=e.target,{scrollTop:i,scrollHeight:o,clientHeight:n}=t;if(o<=n)return;(i+n)/o>.8?this.loading||this.loadMoreRequested||(this.loadMoreRequested=!0,this.dispatchEvent(new D)):this.loadMoreRequested=!1},this.handleKeydown=e=>{if(!this.disabled)switch(e.key){case"ArrowDown":if(e.preventDefault(),!this.open)return void this.show();this.activeDescendant.move(1),this.scrollActivePending=!0;break;case"ArrowUp":if(e.preventDefault(),!this.open)return void this.show();this.activeDescendant.move(-1),this.scrollActivePending=!0;break;case"Home":this.open&&(e.preventDefault(),this.activeDescendant.first(),this.scrollActivePending=!0);break;case"End":this.open&&(e.preventDefault(),this.activeDescendant.last(),this.scrollActivePending=!0);break;case"Enter":{if(!this.open)return e.preventDefault(),void this.show();e.preventDefault();const t=this.flatOptions[this.activeDescendant.activeIndex];t&&this.toggle(t);break}case"Escape":this.open&&(e.preventDefault(),this.hide(),this.focus())}}}connectedCallback(){super.connectedCallback(),j(this,C),j(this,$,"nord-filter-chip")}createRenderRoot(){return this}get valueAsArray(){const{value:e}=this;return Array.isArray(e)?e:e?[e]:[]}get isInactive(){return 0===this.valueAsArray.length}getOptionValue(e){var t;return String(null!==(t=e[this.optionsValueKey])&&void 0!==t?t:"")}getOptionLabel(e){var t;return String(null!==(t=e[this.optionsLabelKey])&&void 0!==t?t:"")}get hasGroupedOptions(){return this.options.some((e=>{var t;return M(e)||Boolean(null===(t=e.children)||void 0===t?void 0:t.length)}))}get needle(){return this.searchable&&this.internalSearch?this.search.trim().toLocaleLowerCase():""}matchesSearch(e){const t=this.needle;return!t||this.getOptionLabel(e).toLocaleLowerCase().includes(t)}get sections(){var e,t;const i=(e,t)=>({value:this.getOptionValue(e),label:this.getOptionLabel(e),disabled:Boolean(e.disabled),indent:t,source:e});if(!this.hasGroupedOptions){const e=this.options.filter((e=>this.matchesSearch(e))).map((e=>i(e,!1)));return e.length?[{options:e}]:[]}const o=[];let n=[];const s=()=>{n.length&&(o.push({options:n}),n=[])};for(const r of this.options)if(M(r)){s();const t=(null!==(e=r.children)&&void 0!==e?e:[]).filter((e=>this.matchesSearch(e))).map((e=>i({...e,disabled:e.disabled||r.disabled},!1)));t.length&&o.push({heading:r.heading,options:t})}else if(null===(t=r.children)||void 0===t?void 0:t.length){const e=this.matchesSearch(r),t=r.children.filter((e=>this.matchesSearch(e)));if(e||t.length){e&&n.push(i(r,!1));for(const e of t)n.push(i(e,!0))}}else this.matchesSearch(r)&&n.push(i(r,!1));return s(),o}get flatOptions(){return this.sections.flatMap((e=>e.options))}get allSelectableValues(){var e,t;const i=[];for(const o of this.options)if(M(o)){if(o.disabled)continue;for(const t of null!==(e=o.children)&&void 0!==e?e:[])t.disabled||i.push(this.getOptionValue(t))}else{o.disabled||i.push(this.getOptionValue(o));for(const e of null!==(t=o.children)&&void 0!==t?t:[])o.disabled||e.disabled||i.push(this.getOptionValue(e))}return i}get isAllSelected(){if(!this.selectAll||!this.multiple)return!1;const e=this.allSelectableValues,t=new Set(this.valueAsArray);return e.length>0&&e.every((e=>t.has(e)))}labelForValue(e){var t,i;for(const o of this.options)if(M(o)){for(const i of null!==(t=o.children)&&void 0!==t?t:[])if(this.getOptionValue(i)===e)return this.getOptionLabel(i)}else{if(this.getOptionValue(o)===e)return this.getOptionLabel(o);for(const t of null!==(i=o.children)&&void 0!==i?i:[])if(this.getOptionValue(t)===e)return this.getOptionLabel(t)}return this.labelForUnknown||this.localize.term("unknown")}get selectionLabel(){const e=this.valueAsArray;if(0===e.length)return"";const t=this.labelForValue(e[0]);return e.length>1?t+this.localize.term("countSuffix",e.length-1):t}isSelected(e){return this.valueAsArray.includes(e)}show(){this.openState.show()}hide(){this.openState.hide()}focus(e){var t;null===(t=this.triggerButton)||void 0===t||t.focus(e)}updated(e){var t,i;super.updated(e),this.scrollActivePending&&(this.scrollActivePending=!1,null===(i=null===(t=this.listRef.value)||void 0===t?void 0:t.querySelector(".n-filter-dropdown-option.is-active"))||void 0===i||i.scrollIntoView({block:"nearest"})),this.loadMoreRequested&&(e.has("loading")||e.has("options"))&&(this.loadMoreRequested=!1),e.has("disabled")&&this.disabled&&(this.activeDescendant.reset(),this.scrollActivePending=!0)}commit(e){this.value=e,this.dispatchEvent(new I(e))}toggle(e){if(this.disabled||e.disabled)return;if(!this.multiple)return this.commit(e.value),void this.hide();const t=this.valueAsArray,i=t.includes(e.value)?t.filter((t=>t!==e.value)):[...t,e.value];this.commit(i)}clear(){this.disabled||(this.search="",this.dispatchEvent(new O),this.commit(this.multiple?[]:""))}get listInlineSizeClass(){return`n-filter-dropdown-size-${this.size}`}renderIndicator(e){const t=this.isSelected(e);return this.multiple?a`<span class="n-filter-dropdown-checkbox">${t?a`<nord-icon name="interface-checked-small" size="xs"></nord-icon>`:d}</span>`:a`<span class="n-filter-dropdown-check">${t?a`<nord-icon name="interface-checked" size="s"></nord-icon>`:d}</span>`}renderOption(e,t){const i=this.isSelected(e.value);return a`<div id="${this.optionId(t)}" class="${f({"n-filter-dropdown-option":!0,"is-active":t===this.activeDescendant.activeIndex,"is-disabled":e.disabled,"is-indented":e.indent})}" role="option" aria-selected="${i?"true":"false"}" aria-disabled="${e.disabled?"true":d}" @click="${()=>this.toggle(e)}" @mousemove="${()=>this.activeDescendant.setActiveIndex(t)}">${this.renderIndicator(e.value)} <span class="n-filter-dropdown-option-label">${e.label}</span></div>`}optionId(e){return`${this.filterDropdownId}-option-${e}`}renderList(){const e=this.sections,t=e.flatMap((e=>e.options));if(this.loading&&0===t.length)return a`<div class="n-filter-dropdown-empty" role="status"><nord-spinner size="s"></nord-spinner></div>`;if(0===t.length)return a`<div class="n-filter-dropdown-empty" role="status">${this.noResultsMessage||this.localize.term("noResults")}</div>`;let i=0;return g(e,((e,t)=>t),((e,t)=>{const o=e.heading?`${this.filterDropdownId}-group-${t}`:void 0;return a`<div class="n-filter-dropdown-group" role="group" aria-labelledby="${null!=o?o:d}">${e.heading?a`<div class="n-filter-dropdown-heading" id="${o}" role="presentation">${e.heading}</div>`:d} ${g(e.options,((e,i)=>`${t}-${i}`),(e=>this.renderOption(e,i++)))}</div>`}))}render(){var e;const t=`${this.filterDropdownId}-popout`,i=`${this.filterDropdownId}-list`,o=!this.isInactive,n=this.removable,s=!n&&this.clearable&&o,r=this.open&&null!==(e=this.activeDescendant.activeDescendant)&&void 0!==e?e:d;return a`<nord-button-group><nord-button class="n-filter-dropdown-trigger" type="button" size="${this.size}" variant="${o?d:"dashed"}" aria-controls="${t}" aria-haspopup="dialog" aria-expanded="${this.open?"true":"false"}" aria-activedescendant="${r}" ?disabled="${this.disabled}" @click="${this.handleTriggerClick}" @keydown="${this.handleKeydown}"><nord-icon slot="start" name="${this.icon}" label="${this.localize.term("filterIconLabel")}"></nord-icon><span class="n-filter-dropdown-label">${o?this.localize.term("selectionLabel",this.label):this.label}</span> ${o?a`<span class="n-filter-dropdown-value">${this.selectionLabel}</span>`:d}</nord-button>${s?a`<nord-button class="n-filter-dropdown-clear" type="button" size="${this.size}" square ?disabled="${this.disabled}" @click="${this.handleClear}"><nord-icon name="interface-close-small" size="xs"></nord-icon><nord-visually-hidden>${this.localize.term("clearLabel")}</nord-visually-hidden></nord-button>`:d} ${n?a`<nord-button class="n-filter-dropdown-remove" type="button" size="${this.size}" square variant="${o?d:"dashed"}" ?disabled="${this.disabled}" @click="${this.handleRemove}"><nord-icon name="interface-close-small" size="xs"></nord-icon><nord-visually-hidden>${this.localize.term("removeLabel")}</nord-visually-hidden></nord-button>`:d}</nord-button-group><nord-popout id="${t}" controlled always-floating @open="${this.openState.onPopoutOpen}" @close="${this.openState.onPopoutClose}"><div class="${f({"n-filter-dropdown-panel":!0,[this.listInlineSizeClass]:!0})}">${this.searchable?a`<div class="n-filter-dropdown-search"><nord-input type="search" label="${this.localize.term("searchLabel")}" hide-label expand size="s" .value="${this.search}" ?disabled="${this.disabled}" @input="${this.handleSearchInput}" @keydown="${this.handleKeydown}"><nord-icon slot="start" name="navigation-search"></nord-icon>${this.loading?a`<nord-spinner slot="end" size="s"></nord-spinner>`:d}</nord-input></div>`:d} ${this.selectAll&&this.multiple?a`<div class="n-filter-dropdown-select-all"><div class="${f({"n-filter-dropdown-option":!0,"is-active":!1})}" role="button" tabindex="0" aria-pressed="${this.isAllSelected?"true":"false"}" aria-disabled="${this.disabled?"true":d}" @click="${this.toggleSelectAll}" @keydown="${e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.toggleSelectAll())}}"><span class="n-filter-dropdown-checkbox">${this.isAllSelected?a`<nord-icon name="interface-checked-small" size="xs"></nord-icon>`:d} </span><span class="n-filter-dropdown-option-label">${this.isAllSelected?this.localize.term("deselectAll"):this.localize.term("selectAll")}</span></div></div>`:d}<div ${b(this.listRef)} id="${i}" class="${f({"n-filter-dropdown-list":!0,"is-loading-more":this.loading&&this.flatOptions.length>0})}" role="listbox" aria-label="${this.label||d}" aria-multiselectable="${this.multiple?"true":"false"}" @scroll="${this.handleListScroll}" @keydown="${this.handleKeydown}">${this.renderList()}</div></div></nord-popout>`}};e([c("nord-popout",!0)],R.prototype,"popout",void 0),e([c(".n-filter-dropdown-trigger")],R.prototype,"triggerButton",void 0),e([h({reflect:!0})],R.prototype,"label",void 0),e([h({reflect:!0})],R.prototype,"name",void 0),e([h({reflect:!0})],R.prototype,"icon",void 0),e([h({reflect:!0})],R.prototype,"size",void 0),e([h({attribute:!1})],R.prototype,"options",void 0),e([h({reflect:!0,attribute:"options-value-key"})],R.prototype,"optionsValueKey",void 0),e([h({reflect:!0,attribute:"options-label-key"})],R.prototype,"optionsLabelKey",void 0),e([h({attribute:!1})],R.prototype,"value",void 0),e([h({reflect:!0,type:Boolean})],R.prototype,"multiple",void 0),e([h({reflect:!0,type:Boolean})],R.prototype,"searchable",void 0),e([h({reflect:!0,type:Boolean,attribute:"internal-search"})],R.prototype,"internalSearch",void 0),e([h({reflect:!0,type:Boolean,attribute:"select-all"})],R.prototype,"selectAll",void 0),e([h({reflect:!0,type:Boolean})],R.prototype,"clearable",void 0),e([h({reflect:!0,type:Boolean})],R.prototype,"removable",void 0),e([h({reflect:!0,type:Boolean})],R.prototype,"disabled",void 0),e([h({reflect:!0,type:Boolean})],R.prototype,"loading",void 0),e([h({reflect:!0,type:Boolean})],R.prototype,"open",void 0),e([h({reflect:!0,attribute:"no-results-message"})],R.prototype,"noResultsMessage",void 0),e([h({reflect:!0,attribute:"label-for-unknown"})],R.prototype,"labelForUnknown",void 0),e([u()],R.prototype,"search",void 0),R=e([v("nord-filter-dropdown")],R);var V=R;export{I as FilterDropdownChangeEvent,O as FilterDropdownClearEvent,D as FilterDropdownLoadMoreEvent,S as FilterDropdownRemoveEvent,A as FilterDropdownSearchChangeEvent,V as default};
|
|
2
2
|
//# sourceMappingURL=FilterDropdown.js.map
|
package/lib/Header.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as r,LitElement as a,html as n}from"lit";import{property as o,customElement as d}from"lit/decorators.js";import{S as s}from"./SlotController-Z6eG7LSZ.js";import{s as t}from"./Component-BJ5O5n8k.js";import"./EventController-BBOmvfLa.js";const i=r`:host{--_n-header-box-shadow:var(--n-box-shadow-header);--_n-header-block-size:var(--n-header-block-size,var(--n-space-xxl));--_n-header-padding-block:var(--n-space-m);--_n-header-padding-inline:var(--n-header-padding-inline,var(--n-space-l));--_n-header-background-color:var(--n-header-background-color,var(--n-color-surface));color:var(--n-color-text)}::slotted(*){margin:0!important}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}.n-header,.n-header-end{align-items:center;display:flex;flex-flow:row;gap:var(--n-space-m)}.n-header{background-color:var(--_n-header-background-color);block-size:var(--_n-header-block-size);border-block-end:1px solid var(--n-color-border);box-shadow:var(--_n-header-box-shadow);padding:var(--_n-header-padding-block)
|
|
1
|
+
import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as r,LitElement as a,html as n}from"lit";import{property as o,customElement as d}from"lit/decorators.js";import{S as s}from"./SlotController-Z6eG7LSZ.js";import{s as t}from"./Component-BJ5O5n8k.js";import"./EventController-BBOmvfLa.js";const i=r`:host{--_n-header-box-shadow:var(--n-box-shadow-header);--_n-header-block-size:var(--n-header-block-size,var(--n-space-xxl));--_n-header-padding-block:var(--n-space-m);--_n-header-padding-inline:var(--n-header-padding-inline,var(--n-space-l));--_n-header-background-color:var(--n-header-background-color,var(--n-color-surface));color:var(--n-color-text)}::slotted(*){margin:0!important}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}.n-header,.n-header-end{align-items:center;display:flex;flex-flow:row;gap:var(--n-space-m)}.n-header{background-color:var(--_n-header-background-color);block-size:var(--_n-header-block-size);border-block-end:1px solid var(--n-color-border);box-shadow:var(--_n-header-box-shadow);padding-block:var(--_n-header-padding-block);padding-inline:var(--_n-header-padding-inline);padding-inline-start:calc(var(--_n-header-padding-inline) + var(--_n-header-gutter, 0px))}.n-header-end{gap:var(--n-space-s);margin-inline-start:auto}:host([size=s]){--_n-header-block-size:var(--n-size-top-bar);--_n-header-padding-block:var(--n-space-s)}:host([size=xs]){--_n-header-block-size:45px;--_n-header-padding-block:var(--n-space-xs)}`;let l=class extends a{constructor(){super(...arguments),this.endSlot=new s(this,"end"),this.size="m"}render(){return n`<header class="n-header"><slot></slot><div class="n-header-end" ?hidden="${this.endSlot.isEmpty}"><slot name="end"></slot></div></header>`}};l.styles=[t,i],e([o({reflect:!0})],l.prototype,"size",void 0),l=e([d("nord-header")],l);var c=l;export{c as default};
|
|
2
2
|
//# sourceMappingURL=Header.js.map
|
package/lib/Header.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.js","sources":["../src/header/Header.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Header.css'\n\n/**\n * The header is a block of designated space for labelling the currently\n * viewed context as well as providing primary actions.\n *\n * @status ready\n * @category layout\n * @slot - The header content.\n * @slot end - Optional slot for buttons, toggles, etc.\n *\n * @cssprop [--n-header-background-color=var(--n-color-surface)] - Background color of the header.\n */\n@customElement('nord-header')\nexport default class Header extends LitElement {\n static styles = [componentStyle, style]\n\n private endSlot = new SlotController(this, 'end')\n\n /**\n * Controls the size of the header component.\n */\n @property({ reflect: true }) size: 'm' | 's' | 'xs' = 'm'\n\n render() {\n return html`\n <header class=\"n-header\">\n <slot></slot>\n <div class=\"n-header-end\" ?hidden=${this.endSlot.isEmpty}>\n <slot name=\"end\"></slot>\n </div>\n </header>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nord-header': Header\n }\n}\n"],"names":["Header","LitElement","constructor","this","endSlot","SlotController","size","render","html","isEmpty","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Header.js","sources":["../src/header/Header.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Header.css'\n\n/**\n * The header is a block of designated space for labelling the currently\n * viewed context as well as providing primary actions.\n *\n * @status ready\n * @category layout\n * @slot - The header content.\n * @slot end - Optional slot for buttons, toggles, etc.\n *\n * @cssprop [--n-header-background-color=var(--n-color-surface)] - Background color of the header.\n */\n@customElement('nord-header')\nexport default class Header extends LitElement {\n static styles = [componentStyle, style]\n\n private endSlot = new SlotController(this, 'end')\n\n /**\n * Controls the size of the header component.\n */\n @property({ reflect: true }) size: 'm' | 's' | 'xs' = 'm'\n\n render() {\n return html`\n <header class=\"n-header\">\n <slot></slot>\n <div class=\"n-header-end\" ?hidden=${this.endSlot.isEmpty}>\n <slot name=\"end\"></slot>\n </div>\n </header>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nord-header': Header\n }\n}\n"],"names":["Header","LitElement","constructor","this","endSlot","SlotController","size","render","html","isEmpty","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"y+CAkBe,IAAMA,EAAN,cAAqBC,EAArB,WAAAC,uBAGLC,KAAOC,QAAG,IAAIC,EAAeF,KAAM,OAKdA,KAAIG,KAAqB,GAYvD,CAVC,MAAAC,GACE,OAAOC,CAAI,4EAG6BL,KAAKC,QAAQK,kDAKtD,GAlBMT,EAAAU,OAAS,CAACC,EAAgBC,GAOJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAoCf,EAAAgB,UAAA,YAAA,GARtChB,EAAMa,EAAA,CAD1BI,EAAc,gBACMjB,SAAAA"}
|
package/lib/IconManager.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const e=e=>fetch(`https://nordcdn.net/ds/icons/3.17.
|
|
1
|
+
const e=e=>fetch(`https://nordcdn.net/ds/icons/3.17.2/assets/${e}.svg`).then((t=>{if(!t.ok)throw new TypeError(`NORD: unknown icon: '${e}'`);return t.text()}));class t{constructor(){this.cache=new Map,this.resolver=e}resolve(e,t){let r=this.cache.get(e);"string"!=typeof r?(r||(r=this.resolver(e).catch((()=>"")).then((t=>(this.cache.set(e,t),t))),this.cache.set(e,r)),r.then(t)):t(r)}registerIcon(e,t){let r,s;if("string"==typeof e?(r=e,s=t):(r=e.title,s=e.default),!r)throw new Error("name is required when registering an icon");if(!s)throw new Error("icon must not be empty");this.cache.set(r,s)}clear(){this.cache.clear()}}export{t as IconManager};
|
|
2
2
|
//# sourceMappingURL=IconManager.js.map
|
package/lib/Input.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{s as n}from"./navigation-search-CBbIGzo2.js";import{css as e,html as i,nothing as o,LitElement as r}from"lit";import{query as s,property as a,customElement as d}from"lit/decorators.js";import{classMap as l}from"lit/directives/class-map.js";import{ifDefined as p}from"lit/directives/if-defined.js";import{ref as c}from"lit/directives/ref.js";import{styleMap as u}from"lit/directives/style-map.js";import{D as m}from"./DirectionController-ChvNGESZ.js";import{R as h}from"./ResizeController-14PUwRQy.js";import{c as v}from"./cond-CI1KbneT.js";import{N as b}from"./events-Bv6wNHwJ.js";import{A as f}from"./AutocompleteMixin-D8eiOxvO.js";import{F as g}from"./FocusableMixin-BlQLNPdJ.js";import{F as y}from"./FormAssociatedMixin-D9aPREgv.js";import{I as w}from"./InputMixin-LetXsCyv.js";import{R as x}from"./ReadonlyMixin-BdJPGtQ3.js";import{S as j}from"./SizeMixin-CU9cLbLC.js";import{T as $}from"./TextSelectableMixin-Cfv__lHS.js";import{s as z}from"./Component-BJ5O5n8k.js";import{s as _}from"./FormField-CMgEFZCK.js";import{s as k}from"./TextField-
|
|
1
|
+
import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{s as n}from"./navigation-search-CBbIGzo2.js";import{css as e,html as i,nothing as o,LitElement as r}from"lit";import{query as s,property as a,customElement as d}from"lit/decorators.js";import{classMap as l}from"lit/directives/class-map.js";import{ifDefined as p}from"lit/directives/if-defined.js";import{ref as c}from"lit/directives/ref.js";import{styleMap as u}from"lit/directives/style-map.js";import{D as m}from"./DirectionController-ChvNGESZ.js";import{R as h}from"./ResizeController-14PUwRQy.js";import{c as v}from"./cond-CI1KbneT.js";import{N as b}from"./events-Bv6wNHwJ.js";import{A as f}from"./AutocompleteMixin-D8eiOxvO.js";import{F as g}from"./FocusableMixin-BlQLNPdJ.js";import{F as y}from"./FormAssociatedMixin-D9aPREgv.js";import{I as w}from"./InputMixin-LetXsCyv.js";import{R as x}from"./ReadonlyMixin-BdJPGtQ3.js";import{S as j}from"./SizeMixin-CU9cLbLC.js";import{T as $}from"./TextSelectableMixin-Cfv__lHS.js";import{s as z}from"./Component-BJ5O5n8k.js";import{s as _}from"./FormField-CMgEFZCK.js";import{s as k}from"./TextField-BYSciLeB.js";import S from"./Icon.js";import"./FormDataController-OUt5L5uC.js";import"./FieldControlMixin-BXNZJXu9.js";import"./context-consumer-BJVUulGf.js";import"./context-request-event-CCRlXoeR.js";import"./field-context.js";import"./create-context-CJ69ntlY.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"./light-dom-styles-DXsbiKU9.js";import"./VisuallyHidden.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./IconManager.js";const I=e`.n-input::-webkit-search-cancel-button,.n-input::-webkit-search-decoration{appearance:none}.n-input-container{display:grid;font-size:var(--n-font-size-m);grid-template-columns:max-content 1fr max-content}.n-input{grid-area:1/1/2/4;padding-inline-end:var(--_n-input-end-inline-size,var(--_n-input-padding-inline));padding-inline-start:var(--_n-input-start-inline-size,var(--_n-input-padding-inline))}slot[name=end],slot[name=start]{align-items:center;color:var(--n-color-icon);display:flex;pointer-events:none}:host([disabled]) slot:is([name=start],[name=end]){color:var(--n-color-text-weakest)}:host([readonly]) slot:is([name=start],[name=end]){color:var(--n-color-text)}slot[name=start]{grid-area:1/1/2/2;order:1}slot[name=end]{grid-area:1/3/2/4}.is-rtl slot[name=end],slot[name=start]{--n-button-border-radius:var(--n-border-radius-s) 0 0 var(--n-border-radius-s)}.is-rtl slot[name=start],slot[name=end]{--n-button-border-radius:0 var(--n-border-radius-s) var(--n-border-radius-s) 0}:is([name=start],[name=end])::slotted(*){font-size:var(--_n-input-font-size)}[name=start]::slotted(*),nord-icon{margin-inline-end:calc(var(--_n-input-padding-inline)/2)!important;margin-inline-start:var(--_n-input-padding-inline)!important}[name=end]::slotted(*){margin-inline-end:var(--_n-input-padding-inline)!important;margin-inline-start:calc(var(--_n-input-padding-inline)/2)!important}[name=start]::slotted(:is(nord-button,nord-dropdown)){margin-inline-start:0!important}[name=end]::slotted(:is(nord-button,nord-dropdown)){margin-inline-end:0!important}nord-icon{--_n-input-icon-color:var(--n-input-icon-color,var(--n-color-icon));color:var(--_n-input-icon-color)}::slotted(:is(nord-button:not([disabled]),nord-dropdown)){pointer-events:auto;position:relative}::slotted(nord-button:not([disabled],:focus)),::slotted(nord-dropdown:not(:focus-within)){--n-button-box-shadow:none}::slotted(nord-button:active),::slotted(nord-dropdown:active:not([open])){inset-block-start:-1px}::slotted(nord-button[disabled]){--n-button-color:var(--n-color-text-weaker);-webkit-text-fill-color:var(--n-button-color);opacity:.8}.n-input-container:hover:not(:focus-within) ::slotted(:is(nord-button:not([disabled]),nord-dropdown)),.n-label-container:hover~.n-input-container:not(:focus-within) ::slotted(:is(nord-button:not([disabled]),nord-dropdown)){--n-button-border-color:var(--n-input-border-color,var(--n-color-border-hover))}.n-input-container:focus-within ::slotted(:is(nord-button,nord-dropdown:not([open]))){--n-button-border-color:var(--n-input-border-color,var(--n-color-accent))}:host([error]) .n-input-container ::slotted(:is(nord-button:not(:focus),nord-dropdown:not(:focus-within),nord-dropdown[open])){--n-button-border-color:var(--n-input-border-color,var(--n-color-status-danger))}:host([size=s]) ::slotted(nord-button){--_n-button-padding-inline:calc(var(--n-space-s)*1.4)}:host{--_n-input-icon-size:var(--n-size-icon-s)}:host([size=s]){--_n-input-icon-size:var(--n-size-icon-xs)}:host([size=l]){--_n-input-icon-size:var(--n-size-icon-m)}::slotted(nord-icon:not([size])),nord-icon{--_n-icon-size:var(--_n-input-icon-size)}:host([type=unit]) :is(.n-input-container,.n-input){--_n-input-text-align:var(--n-input-text-align,end);font-family:var(--n-font-family-code)!important}:host([type=button]) :is(.n-input-container,.n-input){cursor:pointer}:host(:is([type=date],[type=time],[type=datetime-local])) .n-input{block-size:calc(var(--n-line-height-form) + var(--_n-input-padding-block)*2 + 2px)}.n-input::-webkit-calendar-picker-indicator{border-radius:var(--n-border-radius-s);cursor:pointer;display:var(--n-input-picker-indicator-display,revert)}.n-input::-webkit-calendar-picker-indicator:hover{background:var(--n-color-surface-lowered)}.n-input::-webkit-inner-spin-button{display:var(--n-input-picker-indicator-display,revert)}.n-input::-webkit-datetime-edit{color:var(--_n-input-color)}:host([type=file]) .n-input{cursor:pointer}.n-input::file-selector-button{background:#0000;border:0;color:var(--n-color-text);cursor:pointer;font:inherit;font-weight:var(--n-font-weight-active);margin-inline-end:var(--_n-input-padding-inline);padding:0}`;S.registerIcon(n);const C=t=>t?`${t}px`:void 0,M={number:"numeric",email:"email",tel:"tel",url:"url",search:"search"};let F=class extends(j(y(f(x($(w(g(r)))))))){constructor(){super(...arguments),this.startObserver=new h(this,(()=>this.startSlot)),this.endObserver=new h(this,(()=>this.endSlot)),this.direction=new m(this),this.type="text",this.expand=!1,this.disallowPattern=void 0,this.inputmode=void 0,this.handleInputChange=t=>{const n=t.target;this.disallowPattern&&function(t,n){const{value:e}=t,i=t.selectionStart,o=e.slice(0,i),r=e.slice(i,e.length),s=o.replace(n,""),a=s+r.replace(n,""),d=s.length;t.value=a,t.selectionStart=d,t.selectionEnd=d}(n,new RegExp(this.disallowPattern,"g")),this.handleInput(t)}}render(){var t;const n="number"===this.type,e=this.inputmode||M[this.type];return i`${this.renderLabel()}<div class="${l({"n-input-container":!0,"is-rtl":"rtl"===this.direction.dir})}" style="${u({"--_n-input-start-inline-size":C(this.startObserver.inlineSize),"--_n-input-end-inline-size":C(this.endObserver.inlineSize)})}"><slot name="start">${"search"===this.type?i`<nord-icon name="navigation-search"></nord-icon>`:o}</slot><input ${c(this.textSelectableRef)} ${c(this.focusableRef)} id="${this.inputId}" class="n-input" type="${n||"unit"===this.type?"text":this.type}" inputmode="${p(e)}" pattern="${v(n,"[0-9]*")}" ?disabled="${this.effectiveDisabled}" ?required="${this.required}" ?readonly="${this.readonly}" name="${p(this.name)}" .value="${"file"===this.type?"":null!==(t=this.value)&&void 0!==t?t:""}" placeholder="${p(this.placeholder)}" @input="${this.handleInputChange}" @change="${this.handleChange}" @keydown="${this.handleKeydown}" @select="${this.handleSelect}" aria-label="${p(this.controlAriaLabel)}" aria-describedby="${p(this.controlAriaDescribedby)}" aria-invalid="${p(this.controlAriaInvalid)}" spellcheck="false" autocomplete="${this.autocomplete}"><slot name="end"></slot></div>${this.renderError()} ${this.isHintBelow?this.renderHint():o}`}handleKeydown(t){if("Enter"!==t.key)return;const{form:n}=this;if(n){const t=function(t){let n=t.querySelector('button[type="submit"]');!n&&t.id&&(n=t.getRootNode().querySelector(`button[form=${t.id}]`));return n}(n);setTimeout((()=>null==t?void 0:t.click()),0)}}handleSelect(t){t.stopPropagation(),this.dispatchEvent(new b("select"))}};F.styles=[z,_,k,I],t([s("slot[name='start']")],F.prototype,"startSlot",void 0),t([s("slot[name='end']")],F.prototype,"endSlot",void 0),t([a({reflect:!0})],F.prototype,"type",void 0),t([a({reflect:!0,type:Boolean})],F.prototype,"expand",void 0),t([a({reflect:!0,attribute:"disallow-pattern"})],F.prototype,"disallowPattern",void 0),t([a({reflect:!0})],F.prototype,"inputmode",void 0),F=t([d("nord-input")],F);var R=F;export{R as default};
|
|
2
2
|
//# sourceMappingURL=Input.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{S as t}from"./ShortcutController-CV5b0BZl.js";import"./tinykeys-DwvDXsEb.js";function
|
|
1
|
+
import{S as t}from"./ShortcutController-CV5b0BZl.js";import{i as o,g as r}from"./focus-Dsbrvxj1.js";import"./tinykeys-DwvDXsEb.js";function s(t){return o=>{o.preventDefault(),t(o)}}class n{constructor(o,r){this.host=o,o.addController(this),this.commandShortcuts=new t(o),this.globalShortcuts=new t(o,{"$mod+k":s(r.toggleOpen)}),this.navigationShortcuts=new t(o,{Enter:s(r.trigger),Backspace:r.goBack,End:s(r.end),Home:s(r.start),ArrowDown:s(r.next),ArrowUp:s(r.previous)},o)}registerCommandShortcuts(){const t={};for(const s of this.host.commands)s.shortcut&&(t[s.shortcut]=t=>{var n;s.ignoreWhileTyping&&o(r(document))||(s.forceShortcut&&t.preventDefault(),null===(n=s.handler)||void 0===n||n.call(s,this.host))});this.commandShortcuts.bind(t)}}export{n 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] = (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":"
|
|
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'\nimport { getFocusedElement, isEditableElement } from '../common/focus.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 // Command shortcuts bind to `window`, so an Alt+letter combo (e.g.\n // Alt+L → ¬, Alt+S → ß on some layouts) can fire the command instead\n // of typing into the focused field. Commands opting into\n // `ignoreWhileTyping` are skipped while an editable element is focused.\n // `getFocusedElement` resolves through shadow roots so Nord's own form\n // hosts (e.g. `nord-input`) are matched via their inner native field.\n if (command.ignoreWhileTyping && isEditableElement(getFocusedElement(document))) {\n return\n }\n\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","ignoreWhileTyping","isEditableElement","getFocusedElement","document","forceShortcut","_a","handler","call","bind"],"mappings":"mIAgBA,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,UAOzBH,EAAQI,mBAAqBC,EAAkBC,EAAkBC,aAOjEP,EAAQQ,eACVL,EAAM/B,iBAEO,QAAfqC,EAAAT,EAAQU,eAAO,IAAAD,GAAAA,EAAAE,KAAAX,EAAGrB,KAAKF,MAAK,GAKlCE,KAAKE,iBAAiB+B,KAAKb,EAC5B"}
|