@nordhealth/components 3.1.2 → 3.1.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 +2268 -2268
- package/lib/{AutocompleteMixin-a98ada34.js → AutocompleteMixin-3cf61f49.js} +2 -2
- package/lib/{AutocompleteMixin-a98ada34.js.map → AutocompleteMixin-3cf61f49.js.map} +1 -1
- package/lib/Avatar.js +1 -1
- package/lib/Badge.js +1 -1
- package/lib/Banner.js +1 -1
- package/lib/Button.js +1 -1
- package/lib/ButtonGroup.js +1 -1
- package/lib/{Calendar-dffd5740.js → Calendar-b170e2fc.js} +2 -2
- package/lib/{Calendar-dffd5740.js.map → Calendar-b170e2fc.js.map} +1 -1
- package/lib/Calendar.js +1 -1
- package/lib/Card.js +1 -1
- package/lib/Checkbox.js +1 -1
- package/lib/CommandMenu.js +1 -1
- package/lib/CommandMenuAction.js +1 -1
- package/lib/{Component-1f694235.js → Component-420bbc41.js} +2 -2
- package/lib/Component-420bbc41.js.map +1 -0
- package/lib/DatePicker.js +1 -1
- package/lib/Divider.js +1 -1
- package/lib/Drawer.js +1 -1
- package/lib/Dropdown.js +1 -1
- package/lib/DropdownGroup.js +1 -1
- package/lib/{DropdownItem-4a02675f.js → DropdownItem-a9bf32f4.js} +2 -2
- package/lib/DropdownItem-a9bf32f4.js.map +1 -0
- package/lib/DropdownItem.js +1 -1
- package/lib/EmptyState.js +1 -1
- package/lib/Fieldset.js +1 -1
- package/lib/FocusableMixin-4300e44e.js +2 -0
- package/lib/{FocusableMixin-186c69a2.js.map → FocusableMixin-4300e44e.js.map} +1 -1
- package/lib/{FormAssociatedMixin-5fedde68.js → FormAssociatedMixin-88e4bf5e.js} +2 -2
- package/lib/{FormAssociatedMixin-5fedde68.js.map → FormAssociatedMixin-88e4bf5e.js.map} +1 -1
- package/lib/{FormField-3226fb17.js → FormField-cbfebb3f.js} +2 -2
- package/lib/FormField-cbfebb3f.js.map +1 -0
- package/lib/Header.js +1 -1
- package/lib/Icon.js +2 -2
- package/lib/IconManager.js +1 -1
- package/lib/Input.js +1 -1
- package/lib/{InputMixin-d50cb41a.js → InputMixin-f9fb4034.js} +2 -2
- package/lib/{InputMixin-d50cb41a.js.map → InputMixin-f9fb4034.js.map} +1 -1
- package/lib/Layout.js +1 -1
- package/lib/Layout.js.map +1 -1
- package/lib/{LightDomController-8a770234.js → LightDomController-f78fb046.js} +2 -2
- package/lib/{LightDomController-8a770234.js.map → LightDomController-f78fb046.js.map} +1 -1
- package/lib/Message.js +1 -1
- package/lib/Modal.js +1 -1
- package/lib/NavGroup.js +1 -1
- package/lib/NavItem.js +1 -1
- package/lib/{NavToggle-5d3f0605.js → NavToggle-11625962.js} +2 -2
- package/lib/{NavToggle-5d3f0605.js.map → NavToggle-11625962.js.map} +1 -1
- package/lib/NavToggle.js +1 -1
- package/lib/Navigation.js +1 -1
- package/lib/Notification.js +1 -1
- package/lib/NotificationGroup.js +1 -1
- package/lib/{NotificationMixin-5e028561.js → NotificationMixin-c06bb631.js} +2 -2
- package/lib/{NotificationMixin-5e028561.js.map → NotificationMixin-c06bb631.js.map} +1 -1
- package/lib/{Popout-6a85e4b6.js → Popout-39425b6c.js} +2 -2
- package/lib/{Popout-6a85e4b6.js.map → Popout-39425b6c.js.map} +1 -1
- package/lib/Popout.js +1 -1
- package/lib/ProgressBar.js +1 -1
- package/lib/Qrcode.js +1 -1
- package/lib/Qrcode.js.map +1 -1
- package/lib/Radio.js +1 -1
- package/lib/Range.js +1 -1
- package/lib/Select.js +1 -1
- package/lib/{SizeMixin-f04ac402.js → SizeMixin-fb379434.js} +2 -2
- package/lib/{SizeMixin-f04ac402.js.map → SizeMixin-fb379434.js.map} +1 -1
- package/lib/Skeleton.js +1 -1
- package/lib/Spinner.js +1 -1
- package/lib/Stack.js +1 -1
- package/lib/{Sticky-b4e6c315.js → Sticky-acc92284.js} +2 -2
- package/lib/Sticky-acc92284.js.map +1 -0
- package/lib/Tab.js +1 -1
- package/lib/TabGroup.js +1 -1
- package/lib/TabPanel.js +1 -1
- package/lib/Table.js +1 -1
- package/lib/{TextField-3f901ec8.js → TextField-8b226327.js} +2 -2
- package/lib/{TextField-3f901ec8.js.map → TextField-8b226327.js.map} +1 -1
- package/lib/Textarea.js +1 -1
- package/lib/Toast.js +1 -1
- package/lib/ToastGroup.js +1 -1
- package/lib/Toggle.js +1 -1
- package/lib/Tooltip.js +1 -1
- package/lib/TopBar.js +1 -1
- package/lib/VisuallyHidden.js +1 -1
- package/lib/bundle.js +4 -4
- package/lib/bundle.js.map +1 -1
- package/lib/{class-map-c0d8e1e5.js → class-map-cb77ead2.js} +2 -2
- package/lib/{class-map-c0d8e1e5.js.map → class-map-cb77ead2.js.map} +1 -1
- package/lib/{collection-498f2b1f.js → collection-2f8e38bd.js} +2 -2
- package/lib/{collection-498f2b1f.js.map → collection-2f8e38bd.js.map} +1 -1
- package/lib/cond-44672025.js +2 -0
- package/lib/{cond-09498763.js.map → cond-44672025.js.map} +1 -1
- package/lib/{if-defined-8a007930.js → if-defined-9b177db4.js} +2 -2
- package/lib/{if-defined-8a007930.js.map → if-defined-9b177db4.js.map} +1 -1
- package/lib/index.js +1 -1
- package/lib/{query-assigned-elements-822fe360.js → query-assigned-elements-15485e3d.js} +3 -3
- package/lib/query-assigned-elements-15485e3d.js.map +1 -0
- package/lib/{ref-6b46e5ea.js → ref-5526fb07.js} +4 -4
- package/lib/{ref-6b46e5ea.js.map → ref-5526fb07.js.map} +1 -1
- package/lib/style-map-ed7e6cc6.js +7 -0
- package/lib/style-map-ed7e6cc6.js.map +1 -0
- package/package.json +3 -3
- package/lib/Component-1f694235.js.map +0 -1
- package/lib/DropdownItem-4a02675f.js.map +0 -1
- package/lib/FocusableMixin-186c69a2.js +0 -2
- package/lib/FormField-3226fb17.js.map +0 -1
- package/lib/Sticky-b4e6c315.js.map +0 -1
- package/lib/cond-09498763.js +0 -2
- package/lib/query-assigned-elements-822fe360.js.map +0 -1
- package/lib/style-map-5b757428.js +0 -7
- package/lib/style-map-5b757428.js.map +0 -1
package/lib/CommandMenuAction.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as e,_ as o,s as r,x as n,A as t,e as i}from"./query-assigned-elements-
|
|
1
|
+
import{i as e,_ as o,s as r,x as n,A as t,e as i}from"./query-assigned-elements-15485e3d.js";import{e as s}from"./property-03f59dce.js";import{o as a}from"./class-map-cb77ead2.js";import{D as c}from"./DirectionController-f35f5476.js";import{o as l}from"./observe-a9c6dfb6.js";import d from"./Icon.js";import"./VisuallyHidden.js";import"./directive-de55b00a.js";import"./state-70f38ceb.js";import"./if-defined-9b177db4.js";import"./cond-44672025.js";import"./IconManager.js";import"./Component-420bbc41.js";const m="arrow-right";var p=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m14.7098 10.7401-8.63996 8.67-1.42-1.41 7.93996-7.97-7.99996-8.03001 1.42-1.410002 8.69996 8.740002c.39.39.39 1.02001 0 1.41001z" fill="currentColor"/></svg>',title:m,tags:"nordicon arrow right caret pointing triangle chevron"});const v="arrow-left";var h=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path d="m14.4101 18.0001-1.42 1.41-8.70004-8.74c-.39-.39-.39-1.02001 0-1.41001l8.64004-8.670002 1.42 1.410002-7.94004 7.97 8.00004 8.04001z"/><path d="m14.4101 18.0001-1.42 1.41-8.70004-8.74c-.39-.39-.39-1.02001 0-1.41001l8.64004-8.670002 1.42 1.410002-7.94004 7.97 8.00004 8.04001z"/></g></svg>',title:v,tags:"nordicon arrow left caret pointing triangle chevron"});const g="keyboard-option";var u=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m13.5 14h6.5v2h-6.5c-.63 0-1.22-.3-1.6-.8l-5.4-7.2h-6.5v-2h6.5c.63 0 1.22.3 1.6.8zm-1.5-8v2h8v-2z" fill="currentColor"/></svg>',title:g,tags:"nordicon keyboard option key shortcut"});const f=e`:host{display:flex}.n-command{display:flex;flex:1;border-inline-start:2px solid transparent;align-items:center;color:var(--n-color-text);border-block-end:1px solid var(--n-color-border);padding:calc(var(--n-space-m)/ 1.5) var(--n-space-m)}.n-command.n-selected,.n-command:hover{cursor:pointer;background-color:var(--n-color-active)}.n-command.n-selected{border-inline-start-color:var(--n-color-accent)}nord-icon{color:var(--n-color-icon)}.n-command-icon{margin-inline-start:2px;margin-inline-end:calc(var(--n-space-s) * 1.4);line-height:var(--n-line-height-tight)}.n-selected .n-command-icon nord-icon{color:var(--n-color-icon-hover)}.n-title{flex:1;margin-inline-end:var(--n-space-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.n-shortcuts{display:flex;gap:var(--n-space-xs)}.n-shortcut{padding:calc(var(--n-space-xs)/ 2) calc(var(--n-space-s)/ 3);text-transform:capitalize;font-size:var(--n-font-size-xs);border:1px solid var(--n-color-border-strong);font-weight:var(--n-font-weight);box-shadow:var(--n-box-shadow);border-radius:var(--n-border-radius-s);color:var(--n-color-icon);background:var(--n-color-button);line-height:var(--n-line-height-tight);min-inline-size:var(--n-space-s);display:inline-flex;align-items:center;justify-content:center;user-select:none}`,w=/(?:Key|Digit)([A-Z0-9])/g;d.registerIcon(h),d.registerIcon(p),d.registerIcon(u);let b=class extends r{constructor(){super(...arguments),this.direction=new c(this),this.selected=!1}render(){return n`<div class="${a({"n-selected":this.selected,"n-command":!0})}"><div aria-hidden="true" class="n-command-icon"><nord-icon size="s" name="${this.getIconName()}"></nord-icon></div><div class="n-title">${this.command.title}</div>${this.renderShortcut()}</div>`}ensureInView(){this.selected&&requestAnimationFrame((()=>this.scrollIntoView({block:"nearest"})))}getIconName(){return this.command.icon?this.command.icon:this.direction.isLTR?m:v}renderShortcut(){if(!this.command.shortcut)return t;const e=this.command.shortcut.replace(w,"$1");return n`<nord-visually-hidden>, ${e}</nord-visually-hidden><div aria-hidden="true" class="n-shortcuts">${e.split("+").map((e=>n`<div class="n-shortcut">${"alt"===e.toLowerCase()&&navigator.platform.indexOf("Mac")>-1?n`<nord-icon name="${g}" size="s"></nord-icon>`:e}</div>`))}</div>`}};b.styles=f,o([s({type:Object})],b.prototype,"command",void 0),o([s({type:Boolean})],b.prototype,"selected",void 0),o([l("selected")],b.prototype,"ensureInView",null),b=o([i("nord-command-menu-action")],b);var x=b;export{x as default};
|
|
2
2
|
//# sourceMappingURL=CommandMenuAction.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as e}from"./query-assigned-elements-
|
|
2
|
-
//# sourceMappingURL=Component-
|
|
1
|
+
import{i as e}from"./query-assigned-elements-15485e3d.js";const n=e`:host{all:unset;display:block;font-family:var(--n-font-family);font-size:var(--n-font-size-m);line-height:var(--n-line-height);font-feature-settings:var(--n-font-features);box-sizing:border-box;text-align:start}*,::after,::before{box-sizing:border-box;margin:0;padding:0}:host([hidden]),[hidden]{display:none!important}`;export{n as s};
|
|
2
|
+
//# sourceMappingURL=Component-420bbc41.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Component-420bbc41.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
package/lib/DatePicker.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as t,x as e,A as i,_ as o,e as a,s}from"./query-assigned-elements-
|
|
1
|
+
import{i as t,x as e,A as i,_ as o,e as a,s}from"./query-assigned-elements-15485e3d.js";import{e as r}from"./property-03f59dce.js";import{i as n}from"./query-2d22378e.js";import{n as l}from"./ref-5526fb07.js";import{l as d}from"./if-defined-9b177db4.js";import{c as p}from"./interface-close-small-f26b0299.js";import{F as c}from"./FocusableMixin-4300e44e.js";import{F as h}from"./FormAssociatedMixin-88e4bf5e.js";import{I as m}from"./InputMixin-f9fb4034.js";import{o as u,p as b,a as v}from"./dates-5b651fbe.js";import{N as f}from"./events-d9666e88.js";import{S as g,i as j}from"./Calendar-b170e2fc.js";import{LocalizeController as y}from"./LocalizeController.js";import $ from"./Icon.js";import"./Input.js";import"./Button.js";import"./VisuallyHidden.js";import"./Popout-39425b6c.js";import"./Stack.js";import{s as k}from"./Component-420bbc41.js";import{s as D}from"./FormField-cbfebb3f.js";import{R as x,s as z}from"./TextField-8b226327.js";import{isoAdapter as w}from"./date-adapter.js";import{c as C}from"./cond-44672025.js";import{S as F}from"./SizeMixin-fb379434.js";import"./directive-de55b00a.js";import"./SlotController-d733c575.js";import"./EventController-d99ebeef.js";import"./state-70f38ceb.js";import"./class-map-cb77ead2.js";import"./collection-2f8e38bd.js";import"./tinykeys.module-84e6cc41.js";import"./DirectionController-f35f5476.js";import"./number-c3ab3e95.js";import"./observe-a9c6dfb6.js";import"./DateSelectEvent.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"./IconManager.js";import"./style-map-ed7e6cc6.js";import"./AutocompleteMixin-3cf61f49.js";import"./LightDomController-f78fb046.js";import"./Spinner.js";import"./positioning-a572d126.js";import"./LightDismissController-a2645ae6.js";import"./ShortcutController-87615e31.js";import"./ScrollbarController-773c79f4.js";var S=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18 2h-2v-2h-2v2h-8v-2h-2v2h-2c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2zm-14 2v2h2v-2h8v2h2v-2h2v4h-16v-4zm-2 14v-8h16v8z" fill="currentColor"/></svg>',title:"interface-calendar",tags:"nordicon interface calendar date time day week month year"});const A=t`:host{color:var(--n-color-text);position:relative}:host(:not([expand])) .n-date-picker-input{max-inline-size:max-content}.n-date-picker-calendar{--n-calendar-box-shadow:none}@media (max-width:35.9375em){.n-date-picker-header{padding:calc(var(--n-space-s) * 1.5) var(--n-space-m);border-block-end:1px solid var(--n-color-border)}.n-date-picker-calendar{--_n-calendar-padding:var(--n-space-l)}}.n-date-picker-close-button{--n-button-border-radius:var(--n-border-radius-circle);--_n-button-padding-inline:calc(var(--n-space-s) / 1.3);--_n-button-padding-block:0;opacity:0;position:absolute;inset-block-start:calc(var(--n-space-s) * -1);inset-inline-end:calc(var(--n-space-s) * -1)}.n-date-picker-close-button:focus{opacity:1}.n-date-picker-heading{display:none;font-weight:var(--n-font-weight-active)}@media (max-width:35.9375em){.n-date-picker-close-button{opacity:1;position:relative;inset:auto}.n-date-picker-heading{display:initial}}`;$.registerIcon(S),$.registerIcon(p);const I=()=>!1,L=()=>!1;let B=class extends(F(h(x(m(c(s)))))){constructor(){super(...arguments),this.swipe=new g(this,{target:()=>this.popout,matchesGesture:j,onSwipeEnd:()=>this.hide()}),this.localize=new y(this,{onLangChange:()=>this.createDateFormatters()}),this.value="",this.open=!1,this.min="",this.max="",this.firstDayOfWeek=1,this.dateAdapter=w,this.isDateDisabled=I,this.isDateHighlighted=L,this.expand=!1,this.handleDaySelect=t=>{t.stopPropagation(),this.setValue(t.date),this.hide()},this.handleBlur=t=>{t.stopPropagation(),this.dispatchEvent(new f("blur"))},this.handleFocus=t=>{t.stopPropagation(),this.dispatchEvent(new f("focus"))},this.handleInputChange=t=>{const e=t.target,i=this.dateAdapter.parse(e.value,u);(i||""===e.value)&&this.setValue(i)}}get valueAsDate(){return b(this.value)}set valueAsDate(t){this.value=t?v(t):""}get valueAsNumber(){var t,e;return null!==(e=null===(t=this.valueAsDate)||void 0===t?void 0:t.getTime())&&void 0!==e?e:NaN}set valueAsNumber(t){this.value=t?v(new Date(t)):""}render(){const{valueAsDate:t}=this,o=t?this.dateAdapter.format(t):"";return e`<nord-input class="n-date-picker-input" value="${o}" label="${d(this.label)}" hint="${d(this.hint)}" error="${C(this.error,this.error)}" placeholder="${d(this.placeholder)}" id="${this.inputId}" size="${this.size}" ?expand="${this.expand}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" ?hide-label="${this.hideLabel}" disallow-pattern="[^0-9./-]" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @input="${this.handleInputChange}" ${l(this.focusableRef)} aria-invalid="${C(this.error,"true")}" aria-describedby="${d(this.getDescribedBy())}">${this.hintSlot.isEmpty?i:e`<slot name="hint" slot="hint"></slot>`} ${this.labelSlot.isEmpty?i:e`<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?e`<span>, ${this.localize.term("selectedDateMessage")} ${this.dateFormatLong.format(t)}</span>`:i}</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="${this.min}" max="${this.max}" .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?v(t):"",this.dispatchEvent(new f("change"))}hide(t){this.popout.hide(t)}show(){this.popout.show()}};B.styles=[k,D,z,A],o([n(".n-date-picker-toggle",!0)],B.prototype,"toggleButton",void 0),o([n(".n-date-picker-close-button",!0)],B.prototype,"closeButton",void 0),o([n("nord-calendar",!0)],B.prototype,"calendar",void 0),o([n('[role="dialog"]',!0)],B.prototype,"popout",void 0),o([r()],B.prototype,"value",void 0),o([r({type:Boolean,reflect:!0})],B.prototype,"open",void 0),o([r()],B.prototype,"min",void 0),o([r()],B.prototype,"max",void 0),o([r({attribute:"first-day-of-week",type:Number})],B.prototype,"firstDayOfWeek",void 0),o([r({attribute:!1})],B.prototype,"dateAdapter",void 0),o([r({attribute:!1})],B.prototype,"isDateDisabled",void 0),o([r({attribute:!1})],B.prototype,"isDateHighlighted",void 0),o([r({reflect:!0,type:Boolean})],B.prototype,"expand",void 0),B=o([a("nord-date-picker")],B);var E=B;export{E as default};
|
|
2
2
|
//# sourceMappingURL=DatePicker.js.map
|
package/lib/Divider.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as r,_ as i,s as e,e as o}from"./query-assigned-elements-
|
|
1
|
+
import{i as r,_ as i,s as e,e as o}from"./query-assigned-elements-15485e3d.js";import{e as t}from"./property-03f59dce.js";import{o as s}from"./observe-a9c6dfb6.js";import{s as d}from"./Component-420bbc41.js";const n=r`:host{--_n-divider-color:var(--n-divider-color, var(--n-color-border));--_n-divider-size:var(--n-divider-size, 1px)}:host([direction=horizontal]){display:block;border-block-start:var(--_n-divider-size) solid var(--_n-divider-color)}:host([direction=vertical]){display:inline-block;min-block-size:100%;border-inline-start:var(--_n-divider-size) solid var(--_n-divider-color)}`;let a=class extends e{constructor(){super(...arguments),this.direction="horizontal"}firstUpdated(){this.setAttribute("role","separator")}handleDirectionChange(){this.setAttribute("aria-orientation","vertical"===this.direction?"vertical":"horizontal")}};a.styles=[d,n],i([t({reflect:!0})],a.prototype,"direction",void 0),i([s("direction")],a.prototype,"handleDirectionChange",null),a=i([o("nord-divider")],a);var l=a;export{l as default};
|
|
2
2
|
//# sourceMappingURL=Divider.js.map
|
package/lib/Drawer.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as e,_ as r,s as o,x as d,e as a}from"./query-assigned-elements-
|
|
1
|
+
import{i as e,_ as r,s as o,x as d,e as a}from"./query-assigned-elements-15485e3d.js";import{e as t}from"./property-03f59dce.js";import{S as n}from"./SlotController-d733c575.js";import{s}from"./Component-420bbc41.js";import"./EventController-d99ebeef.js";const i=e`:host{--_n-drawer-padding:var(--n-drawer-padding, var(--n-space-l))}.n-drawer{display:flex;flex-direction:column;block-size:100%}.n-drawer-main{flex:1;padding:var(--_n-drawer-padding);overflow-y:auto}.n-drawer-footer{padding:var(--n-space-m) var(--n-space-l);border-block-start:1px solid var(--n-color-border)}:host([padding=none]){--_n-drawer-padding:var(--n-drawer-padding, 0)}::slotted(nord-header){--_n-header-box-shadow:none}slot[name=footer]{display:flex;justify-content:flex-end;gap:var(--n-space-s);flex-direction:row;align-items:center}`;let l=class extends o{constructor(){super(...arguments),this.footerSlot=new n(this,"footer"),this.padding="m"}render(){return d`<div class="n-drawer"><slot name="header"></slot><div class="n-drawer-main"><slot></slot></div><div class="n-drawer-footer" ?hidden="${this.footerSlot.isEmpty}"><slot name="${this.footerSlot.slotName}"></slot></div></div>`}};l.styles=[s,i],r([t({reflect:!0})],l.prototype,"padding",void 0),l=r([a("nord-drawer")],l);var p=l;export{p as default};
|
|
2
2
|
//# sourceMappingURL=Drawer.js.map
|
package/lib/Dropdown.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as o,x as e,s as t,_ as n,e as r}from"./query-assigned-elements-
|
|
1
|
+
import{i as o,x as e,s as t,_ as n,e as r}from"./query-assigned-elements-15485e3d.js";import{e as s}from"./property-03f59dce.js";import{i as d}from"./query-2d22378e.js";import{l as a}from"./if-defined-9b177db4.js";import{S as i}from"./SlotController-d733c575.js";import{F as l}from"./Popout-39425b6c.js";import{o as p}from"./observe-a9c6dfb6.js";import{s as c}from"./Component-420bbc41.js";import"./EventController-d99ebeef.js";import"./state-70f38ceb.js";import"./positioning-a572d126.js";import"./LightDismissController-a2645ae6.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./ScrollbarController-773c79f4.js";import"./events-d9666e88.js";import"./DirectionController-f35f5476.js";const h=o`:host{--_n-dropdown-size:var(--n-dropdown-size, 250px)}.n-dropdown-content{padding:var(--n-space-s) 0;min-inline-size:var(--_n-dropdown-size);max-inline-size:calc(var(--_n-dropdown-size) * 1.5);max-block-size:460px;overflow-y:auto}@media (max-width:35.9375em){.n-dropdown-content{max-block-size:70vh;max-inline-size:none}}::slotted(nord-dropdown-group),::slotted(nord-dropdown-item){padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-s)}::slotted(nord-dropdown-group){padding-block-end:var(--n-space-s);border-block-end:1px solid var(--n-color-border);margin-block-end:var(--n-space-s)}::slotted(nord-dropdown-group:last-child){padding-block-end:0;border-block-end:0;margin-block-end:0}::slotted(nord-message:first-of-type){padding-block-start:0}::slotted(nord-message:last-of-type){margin-block-end:var(--n-space-s)}slot[name=toggle]{display:inline-block}:host([expand]) slot[name=toggle]{inline-size:100%}:host([size="s"]){--_n-dropdown-size:var(--n-dropdown-size, 150px)}:host([size="l"]){--_n-dropdown-size:var(--n-dropdown-size, 300px)}.n-dropdown-header{padding:calc(var(--n-space-m) + 2px) var(--n-space-m);border-block-end:1px solid var(--n-color-border);background-color:var(--n-color-surface-raised);border-start-start-radius:var(--n-border-radius);border-start-end-radius:var(--n-border-radius);font-weight:var(--n-font-weight);display:flex;gap:var(--n-space-s);align-items:center;flex-wrap:wrap}.n-dropdown-header ::slotted(nord-button){--n-button-gap:var(--n-space-xs);--n-button-background-color:var(--n-color-surface)}.n-dropdown-header ::slotted(nord-button:hover){--n-button-background-color:var(--n-color-button-hover)}::slotted([slot=header-end]){margin-inline-start:auto;gap:var(--n-space-s);display:flex;align-items:center;flex-wrap:wrap}::slotted(:is(h1, h2, h3, h4, h5, h6, p)){margin:0!important}`;let m=class extends(l(t)){constructor(){super(...arguments),this.headerSlot=new i(this,"header"),this.headerEndSlot=new i(this,"header-end"),this.expand=!1,this.size="m"}connectedCallback(){super.connectedCallback();const o=this.querySelector('[slot="toggle"]');null==o||o.setAttribute("aria-haspopup","true")}render(){return e`<div class="n-dropdown" @focusout="${this.handleBlur}"><slot name="toggle" aria-controls="popout"></slot><nord-popout id="popout" align="${a(this.align)}" position="${a(this.position)}" ?open="${this.open}" @open="${this.handleOpen}" @close="${this.handleClose}"><div class="n-dropdown-header" ?hidden="${this.headerSlot.isEmpty&&this.headerEndSlot.isEmpty}"><slot name="${this.headerSlot.slotName}"></slot><slot name="${this.headerEndSlot.slotName}"></slot></div><div class="n-dropdown-content"><slot></slot></div></nord-popout></div>`}handleBlur(o){const e=o.relatedTarget;e&&!this.contains(e)&&this.popout.hide(!1)}handleOpen(){this.open=!0}handleClose(){this.open=!1}handleOpenChange(){var o;if(this.open){const e=null!==(o=this.querySelector("[autofocus]"))&&void 0!==o?o:this.querySelector("nord-dropdown-item, nord-message");null==e||e.focus(),this.list.scrollTop=0}}hide(o){return this.popout.hide(o)}show(){return this.popout.show()}};m.styles=[c,h],m.shadowRootOptions={...t.shadowRootOptions,delegatesFocus:!0},n([d(".n-dropdown-content")],m.prototype,"list",void 0),n([d("nord-popout",!0)],m.prototype,"popout",void 0),n([s({reflect:!0,type:Boolean})],m.prototype,"expand",void 0),n([s({reflect:!0})],m.prototype,"size",void 0),n([p("open","updated")],m.prototype,"handleOpenChange",null),m=n([r("nord-dropdown")],m);var u=m;export{u as default};
|
|
2
2
|
//# sourceMappingURL=Dropdown.js.map
|
package/lib/DropdownGroup.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as e,_ as n,s as o,x as a,A as d,e as r}from"./query-assigned-elements-
|
|
1
|
+
import{i as e,_ as n,s as o,x as a,A as d,e as r}from"./query-assigned-elements-15485e3d.js";import{e as s}from"./property-03f59dce.js";import{s as i}from"./Component-420bbc41.js";const t=e`.n-dropdown-group-heading{font-size:var(--n-font-size-xs);font-weight:var(--n-font-weight-heading);color:var(--n-color-text-weaker);padding:var(--n-space-xs) var(--n-space-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width:35.9375em){.n-dropdown-group-heading{padding:calc(var(--n-space-s)/ 1.5) var(--n-space-m)}}.n-dropdown-group-content{display:flex;flex-direction:column}::slotted(nord-message){inline-size:calc(100% + calc(var(--n-space-s) * 2));margin-inline-start:calc(var(--n-space-s) * -1)}::slotted(nord-message:last-of-type){padding-block-end:0;border-block-end:0}`;let p=class extends o{render(){return a`<div class="n-dropdown-group">${this.heading?a`<p id="heading" aria-hidden="true" class="n-dropdown-group-heading">${this.heading}</p>`:d}<div class="n-dropdown-group-content" role="group" aria-labelledby="${this.heading?"heading":d}"><slot></slot></div></div>`}};p.styles=[i,t],n([s()],p.prototype,"heading",void 0),p=n([r("nord-dropdown-group")],p);var l=p;export{l as default};
|
|
2
2
|
//# sourceMappingURL=DropdownGroup.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as o}from"./query-assigned-elements-
|
|
2
|
-
//# sourceMappingURL=DropdownItem-
|
|
1
|
+
import{i as o}from"./query-assigned-elements-15485e3d.js";const n=o`:host{display:flex;line-height:var(--n-line-height-tight)}.n-dropdown-item{-webkit-appearance:none;appearance:none;cursor:pointer;display:flex;flex:1;gap:var(--n-space-s);align-items:center;font-family:inherit;font-size:inherit;text-decoration:none;border:0;color:var(--n-color-text);padding:var(--n-space-s);border-radius:var(--n-border-radius-s);background:0 0;text-align:start;box-shadow:var(--n-dropdown-item-box-shadow,none);min-inline-size:0}.n-dropdown-item:hover{background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-dropdown-item:hover ::slotted(*){color:var(--n-color-text-on-accent)!important}.n-dropdown-item ::slotted(nord-icon){color:var(--n-color-icon)}.n-dropdown-item:hover ::slotted(nord-icon){color:currentColor}.n-dropdown-item:active{opacity:.7}.n-dropdown-item:focus{--n-dropdown-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:0;position:relative;z-index:var(--n-index-masked)}@supports selector(:focus-visible){.n-dropdown-item:focus{--n-dropdown-item-box-shadow:none}.n-dropdown-item:focus-visible{--n-dropdown-item-box-shadow:0 0 0 2px var(--n-color-accent)}}@media (max-width:35.9375em){.n-dropdown-item{gap:var(--n-space-m);padding:calc(var(--n-space-m)/ 1.5) var(--n-space-m)}.n-dropdown-item ::slotted(nord-icon){block-size:var(--n-size-icon-m);inline-size:var(--n-size-icon-m)}}slot[name=end],slot[name=start]{flex:0 0 auto}slot[name=end]{display:flex;margin-inline-start:auto}.n-truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::slotted(nord-icon:not([size])){--_n-icon-size:var(--n-size-icon-s)}`;export{n as s};
|
|
2
|
+
//# sourceMappingURL=DropdownItem-a9bf32f4.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DropdownItem-a9bf32f4.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
package/lib/DropdownItem.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,e as s,x as t,s as o}from"./query-assigned-elements-
|
|
1
|
+
import{_ as e,e as s,x as t,s as o}from"./query-assigned-elements-15485e3d.js";import{e as r}from"./property-03f59dce.js";import{l as a}from"./if-defined-9b177db4.js";import{n}from"./ref-5526fb07.js";import{F as f}from"./FocusableMixin-4300e44e.js";import{s as i}from"./Component-420bbc41.js";import{s as m}from"./DropdownItem-a9bf32f4.js";import"./directive-de55b00a.js";let d=class extends(f(o)){render(){return(this.href?e=>t`<a href="${a(this.href)}" ${n(this.focusableRef)} class="n-dropdown-item">${e}</a>`:e=>t`<button ${n(this.focusableRef)} class="n-dropdown-item">${e}</button>`)(t`<slot name="start"></slot><span class="n-truncate"><slot></slot></span><slot name="end"></slot>`)}};d.styles=[i,m],e([r({reflect:!0})],d.prototype,"href",void 0),d=e([s("nord-dropdown-item")],d);var p=d;export{p as default};
|
|
2
2
|
//# sourceMappingURL=DropdownItem.js.map
|
package/lib/EmptyState.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as t,_ as e,s as n,x as a,e as r}from"./query-assigned-elements-
|
|
1
|
+
import{i as t,_ as e,s as n,x as a,e as r}from"./query-assigned-elements-15485e3d.js";import{s as i}from"./Component-420bbc41.js";const o=t`:host{background:var(--n-color-surface);color:var(--n-color-text)}.n-empty-state{text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:var(--n-space-xl)}@media (max-width:500px){.n-empty-state{padding:var(--n-space-l) var(--n-space-m)}}::slotted(:is(h1, h2, h3, h4, h5, h6)){color:var(--n-color-text)!important;margin:0 0 var(--n-space-m)!important;font-weight:var(--n-font-weight-heading)!important;font-size:var(--n-font-size-xl)!important;line-height:var(--n-line-height-heading)!important}::slotted(p){margin:0 0 var(--n-space-l)!important;font-size:var(--n-font-size-m)!important;color:var(--n-color-text-weaker)!important;line-height:var(--n-line-height)!important;max-inline-size:var(--n-empty-state-text-width,400px)}`;let s=class extends n{render(){return a`<div class="n-empty-state"><slot></slot></div>`}};s.styles=[i,o],s=e([r("nord-empty-state")],s);var l=s;export{l as default};
|
|
2
2
|
//# sourceMappingURL=EmptyState.js.map
|
package/lib/Fieldset.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as e,_ as r,s as t,x as o,e as i}from"./query-assigned-elements-
|
|
1
|
+
import{i as e,_ as r,s as t,x as o,e as i}from"./query-assigned-elements-15485e3d.js";import{e as s}from"./property-03f59dce.js";import{S as n}from"./SlotController-d733c575.js";import{c as a}from"./cond-44672025.js";import{s as l}from"./Component-420bbc41.js";import{s as d}from"./FormField-cbfebb3f.js";import"./EventController-d99ebeef.js";const h=e`fieldset{border:none}.n-label-container{margin-block-end:calc(var(--n-space-s) * 2)}`;let p=class extends t{constructor(){super(...arguments),this.errorSlot=new n(this,"error"),this.hintSlot=new n(this,"hint"),this.label="",this.required=!1,this.hideRequired=!1}render(){const{hasError:e}=this;return o`<fieldset aria-invalid="${a(e,"true")}" aria-describedby="${a(e,"error")}" ?aria-required="${this.required}"><legend class="n-label-container"><div class="n-label"><slot name="label">${this.label}</slot><span aria-hidden="true" class="n-required" ?hidden="${!this.required||this.hideRequired}">*</span></div><div class="n-caption n-hint" ?hidden="${!this.hasHint}"><slot name="hint">${this.hint}</slot></div></legend><slot></slot><div class="n-caption n-error" id="error" role="alert" ?hidden="${!this.hasError}"><slot name="error">${this.error}</slot></div></fieldset>`}get hasHint(){return Boolean(this.hint)||this.hintSlot.hasContent}get hasError(){return Boolean(this.error)||this.errorSlot.hasContent}};p.styles=[l,d,h],r([s()],p.prototype,"label",void 0),r([s()],p.prototype,"hint",void 0),r([s()],p.prototype,"error",void 0),r([s({type:Boolean})],p.prototype,"required",void 0),r([s({type:Boolean,attribute:"hide-required"})],p.prototype,"hideRequired",void 0),p=r([i("nord-fieldset")],p);var c=p;export{c as default};
|
|
2
2
|
//# sourceMappingURL=Fieldset.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{e as l}from"./ref-5526fb07.js";function u(u){return class extends u{constructor(){super(...arguments),this.focusableRef=l()}focus(l){var u;null===(u=this.focusableRef.value)||void 0===u||u.focus(l)}blur(){var l;null===(l=this.focusableRef.value)||void 0===l||l.blur()}click(){var l;null===(l=this.focusableRef.value)||void 0===l||l.click()}}}export{u as F};
|
|
2
|
+
//# sourceMappingURL=FocusableMixin-4300e44e.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FocusableMixin-
|
|
1
|
+
{"version":3,"file":"FocusableMixin-4300e44e.js","sources":["../src/common/mixins/FocusableMixin.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file */\n\nimport { LitElement } from \"lit\"\nimport { createRef, Ref } from \"lit/directives/ref.js\"\n\ntype Constructable<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class FocusableMixinInterface {\n protected focusableRef: Ref<HTMLElement>\n focus(options?: FocusOptions): void\n blur(): void\n click(): void\n}\n\nexport function FocusableMixin<T extends Constructable<LitElement>>(superClass: T) {\n class FocusableElement extends superClass {\n protected focusableRef = createRef<HTMLElement>()\n\n /**\n * Programmatically move focus to the component.\n * @param {FocusOptions} options An object which controls aspects of the focusing process.\n */\n focus(options?: FocusOptions) {\n this.focusableRef.value?.focus(options)\n }\n\n /**\n * Programmatically remove focus from the component.\n */\n blur() {\n this.focusableRef.value?.blur()\n }\n\n /**\n * Programmatically simulates a click on the component.\n */\n click() {\n this.focusableRef.value?.click()\n }\n }\n\n return FocusableElement as unknown as Constructable<FocusableMixinInterface> & T\n}\n"],"names":["FocusableMixin","superClass","constructor","this","focusableRef","createRef","focus","options","_a","value","blur","click"],"mappings":"sCAcM,SAAUA,EAAoDC,GA2BlE,OA1BA,cAA+BA,EAA/BC,kCACYC,KAAYC,aAAGC,GAuB1B,CAjBCC,MAAMC,iBACJC,EAAAL,KAAKC,aAAaK,sBAAOH,MAAMC,EAChC,CAKDG,aAC2B,QAAzBF,EAAAL,KAAKC,aAAaK,aAAO,IAAAD,GAAAA,EAAAE,MAC1B,CAKDC,cAC2B,QAAzBH,EAAAL,KAAKC,aAAaK,aAAO,IAAAD,GAAAA,EAAAG,OAC1B,EAIL"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as t,x as e}from"./query-assigned-elements-
|
|
2
|
-
//# sourceMappingURL=FormAssociatedMixin-
|
|
1
|
+
import{_ as t,x as e}from"./query-assigned-elements-15485e3d.js";import{e as r}from"./property-03f59dce.js";import{S as i}from"./SlotController-d733c575.js";import{N as o}from"./events-d9666e88.js";import"./VisuallyHidden.js";class s{constructor(t,e){this.host=t,this.options=e,this._form=null,this.handleFormData=t=>{const{disabled:e,name:r}=this.host;if(e)return;if(!r)return;const i=this.options.value();null!=i&&t.formData.append(r,i)},t.addController(this)}hostConnected(){this.listen(this.host.form)}hostUpdated(){this.listen(this.host.form)}hostDisconnected(){this.cleanup()}listen(t){var e;this._form!==t&&(this.cleanup(),this._form=t,null===(e=this._form)||void 0===e||e.addEventListener("formdata",this.handleFormData))}cleanup(){var t;null===(t=this._form)||void 0===t||t.removeEventListener("formdata",this.handleFormData),this._form=null}}function n(n){class h extends n{constructor(){super(...arguments),this.labelSlot=new i(this,"label"),this.errorSlot=new i(this,"error"),this.hintSlot=new i(this,"hint"),this.formData=new s(this,{value:()=>this.formValue}),this.inputId="input",this.errorId="error",this.hintId="hint",this.label="",this.hideLabel=!1,this.required=!1,this.hideRequired=!1}get formValue(){return this.value}handleInput(t){t.stopPropagation();const e=t.target;this.value=e.value,this.dispatchEvent(new o("input"))}handleChange(t){t.stopPropagation(),this.dispatchEvent(new o("change"))}renderLabel(t){const r=e`<label for="${this.inputId}"><slot name="label">${this.label}</slot><span ?hidden="${!this.required||this.hideRequired}" aria-hidden="true" class="n-required">*</span> ${t}</label><div class="n-caption n-hint" id="${this.hintId}" ?hidden="${!this.hasHint}"><slot name="hint">${this.hint}</slot></div>`;return this.hideLabel?e`<nord-visually-hidden>${r}</nord-visually-hidden>`:e`<div class="n-label-container">${r}</div>`}renderError(){return e`<div class="n-caption n-error" id="${this.errorId}" role="alert" ?hidden="${!this.hasError}"><slot name="error">${this.error}</slot></div>`}getDescribedBy(){const{hasHint:t,hasError:e}=this;return t&&e?`${this.hintId} ${this.errorId}`:t?this.hintId:e?this.errorId:void 0}getInvalid(){return this.hasError?"true":void 0}get hasHint(){return Boolean(this.hint)||this.hintSlot.hasContent}get hasError(){return Boolean(this.error)||this.errorSlot.hasContent}}return t([r()],h.prototype,"label",void 0),t([r()],h.prototype,"hint",void 0),t([r({type:Boolean,attribute:"hide-label"})],h.prototype,"hideLabel",void 0),t([r()],h.prototype,"placeholder",void 0),t([r()],h.prototype,"error",void 0),t([r({type:Boolean})],h.prototype,"required",void 0),t([r({type:Boolean,attribute:"hide-required"})],h.prototype,"hideRequired",void 0),h}export{n as F};
|
|
2
|
+
//# sourceMappingURL=FormAssociatedMixin-88e4bf5e.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormAssociatedMixin-5fedde68.js","sources":["../src/common/controllers/FormDataController.ts","../src/common/mixins/FormAssociatedMixin.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { InputMixinInterface } from \"../mixins/InputMixin.js\"\n\ntype FormDataOptions = {\n value: () => string | undefined\n}\n\nexport class FormDataController implements ReactiveController {\n private _form: HTMLFormElement | null = null\n\n constructor(private host: ReactiveControllerHost & InputMixinInterface, private options: FormDataOptions) {\n host.addController(this)\n }\n\n hostConnected() {\n this.listen(this.host.form)\n }\n\n hostUpdated() {\n this.listen(this.host.form)\n }\n\n hostDisconnected() {\n this.cleanup()\n }\n\n private listen(form: HTMLFormElement | null) {\n if (this._form !== form) {\n this.cleanup()\n this._form = form\n this._form?.addEventListener(\"formdata\", this.handleFormData)\n }\n }\n\n private cleanup() {\n this._form?.removeEventListener(\"formdata\", this.handleFormData)\n this._form = null\n }\n\n private handleFormData = (e: FormDataEvent) => {\n const { disabled, name } = this.host\n\n if (disabled) {\n return\n }\n if (!name) {\n return\n }\n\n const value = this.options.value()\n if (value != null) {\n e.formData.append(name, value)\n }\n }\n}\n","/* eslint-disable max-classes-per-file */\nimport { html, LitElement, TemplateResult } from \"lit\"\nimport { property } from \"lit/decorators.js\"\nimport { FormDataController } from \"../controllers/FormDataController.js\"\nimport { SlotController } from \"../controllers/SlotController.js\"\nimport { NordEvent } from \"../events.js\"\nimport { InputMixinInterface } from \"./InputMixin.js\"\nimport \"../../visually-hidden/VisuallyHidden.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\ntype NativeInputElement = HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement\n\nexport declare class FormAssociatedMixinInterface {\n label: string\n required: boolean\n hideRequired: boolean\n hint?: string\n hideLabel: boolean\n placeholder?: string\n error?: string\n\n protected inputId: string\n protected errorId: string\n protected hintId: string\n protected labelSlot: SlotController\n protected hintSlot: SlotController\n protected errorSlot: SlotController\n protected formData: FormDataController\n\n protected get formValue(): string | undefined\n protected get hasError(): boolean\n protected get hasHint(): boolean\n\n protected handleChange(e: Event): void\n protected handleInput(e: Event): void\n protected renderLabel(additionalContent?: TemplateResult): TemplateResult\n protected renderError(): TemplateResult\n protected getDescribedBy(): string | undefined\n protected getInvalid(): \"true\" | undefined\n}\n\nexport function FormAssociatedMixin<T extends Constructor<InputMixinInterface & LitElement>>(superClass: T) {\n // TODO: would be nice if custom elements analyzer could pick up the slot docs from the mixin\n\n /**\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Use when a hint requires more than plain text.\n * @slot error - Optional slot that holds error text for the input.\n */\n class FormAssociatedElement extends superClass {\n protected labelSlot = new SlotController(this, \"label\")\n protected errorSlot = new SlotController(this, \"error\")\n protected hintSlot = new SlotController(this, \"hint\")\n protected formData = new FormDataController(this, { value: () => this.formValue })\n\n protected get formValue() {\n return this.value\n }\n\n protected inputId = \"input\"\n protected errorId = \"error\"\n protected hintId = \"hint\"\n\n /**\n * Label for the input.\n */\n @property() label: string = \"\"\n\n /**\n * Optional hint text to be displayed with the input. Alternatively use the hint slot.\n */\n @property() hint?: string\n\n /**\n * Visually hide the label, but still show it to assistive technologies like screen readers.\n */\n @property({ type: Boolean, attribute: \"hide-label\" }) hideLabel = false\n\n /**\n * Placeholder text to display within the input.\n */\n @property() placeholder?: string\n\n /**\n * Optional error to be shown with the input. Alternatively use the error slot.\n */\n @property() error?: string\n\n /**\n * Determines whether the input is required or not.\n * An input marked as required will be announced as such to users of assistive technology.\n * When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.\n */\n @property({ type: Boolean }) required = false\n\n /**\n * Visually hide the required indicator, but still show\n * required attribute to assistive technologies like screen readers.\n */\n @property({ type: Boolean, attribute: \"hide-required\" }) hideRequired = false\n\n protected handleInput(e: Event) {\n e.stopPropagation()\n const target = e.target as NativeInputElement\n this.value = target.value\n\n /**\n * Fired as the user types into the input.\n */\n this.dispatchEvent(new NordEvent(\"input\"))\n }\n\n protected handleChange(e: Event) {\n e.stopPropagation()\n\n /**\n * Fired whenever the input's value is changed via user interaction.\n */\n this.dispatchEvent(new NordEvent(\"change\"))\n }\n\n protected renderLabel(additionalContent?: TemplateResult) {\n const label = html`\n <label for=${this.inputId}>\n <slot name=\"label\">${this.label}</slot\n ><span ?hidden=${!this.required || this.hideRequired} aria-hidden=\"true\" class=\"n-required\">*</span>\n ${additionalContent}\n </label>\n\n <div class=\"n-caption n-hint\" id=${this.hintId} ?hidden=${!this.hasHint}>\n <slot name=\"hint\">${this.hint}</slot>\n </div>\n `\n\n return this.hideLabel\n ? html`<nord-visually-hidden>${label}</nord-visually-hidden>`\n : html`<div class=\"n-label-container\">${label}</div>`\n }\n\n protected renderError() {\n return html`\n <div class=\"n-caption n-error\" id=${this.errorId} role=\"alert\" ?hidden=${!this.hasError}>\n <slot name=\"error\">${this.error}</slot>\n </div>\n `\n }\n\n protected getDescribedBy() {\n const { hasHint, hasError } = this\n\n if (hasHint && hasError) {\n return `${this.hintId} ${this.errorId}`\n }\n if (hasHint) {\n return this.hintId\n }\n if (hasError) {\n return this.errorId\n }\n\n return undefined\n }\n\n protected getInvalid() {\n return this.hasError ? \"true\" : undefined\n }\n\n protected get hasHint() {\n return Boolean(this.hint) || this.hintSlot.hasContent\n }\n\n protected get hasError() {\n return Boolean(this.error) || this.errorSlot.hasContent\n }\n }\n\n return FormAssociatedElement as unknown as Constructor<FormAssociatedMixinInterface> & T\n}\n"],"names":["FormDataController","constructor","host","options","this","_form","handleFormData","e","disabled","name","value","formData","append","addController","hostConnected","listen","form","hostUpdated","hostDisconnected","cleanup","_a","addEventListener","removeEventListener","FormAssociatedMixin","superClass","FormAssociatedElement","labelSlot","SlotController","errorSlot","hintSlot","formValue","inputId","errorId","hintId","label","hideLabel","required","hideRequired","handleInput","stopPropagation","target","dispatchEvent","NordEvent","handleChange","renderLabel","additionalContent","html","hasHint","hint","renderError","hasError","error","getDescribedBy","getInvalid","undefined","Boolean","hasContent","__decorate","property","prototype","type","attribute"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"FormAssociatedMixin-88e4bf5e.js","sources":["../src/common/controllers/FormDataController.ts","../src/common/mixins/FormAssociatedMixin.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { InputMixinInterface } from \"../mixins/InputMixin.js\"\n\ntype FormDataOptions = {\n value: () => string | undefined\n}\n\nexport class FormDataController implements ReactiveController {\n private _form: HTMLFormElement | null = null\n\n constructor(private host: ReactiveControllerHost & InputMixinInterface, private options: FormDataOptions) {\n host.addController(this)\n }\n\n hostConnected() {\n this.listen(this.host.form)\n }\n\n hostUpdated() {\n this.listen(this.host.form)\n }\n\n hostDisconnected() {\n this.cleanup()\n }\n\n private listen(form: HTMLFormElement | null) {\n if (this._form !== form) {\n this.cleanup()\n this._form = form\n this._form?.addEventListener(\"formdata\", this.handleFormData)\n }\n }\n\n private cleanup() {\n this._form?.removeEventListener(\"formdata\", this.handleFormData)\n this._form = null\n }\n\n private handleFormData = (e: FormDataEvent) => {\n const { disabled, name } = this.host\n\n if (disabled) {\n return\n }\n if (!name) {\n return\n }\n\n const value = this.options.value()\n if (value != null) {\n e.formData.append(name, value)\n }\n }\n}\n","/* eslint-disable max-classes-per-file */\nimport { html, LitElement, TemplateResult } from \"lit\"\nimport { property } from \"lit/decorators.js\"\nimport { FormDataController } from \"../controllers/FormDataController.js\"\nimport { SlotController } from \"../controllers/SlotController.js\"\nimport { NordEvent } from \"../events.js\"\nimport { InputMixinInterface } from \"./InputMixin.js\"\nimport \"../../visually-hidden/VisuallyHidden.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\ntype NativeInputElement = HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement\n\nexport declare class FormAssociatedMixinInterface {\n label: string\n required: boolean\n hideRequired: boolean\n hint?: string\n hideLabel: boolean\n placeholder?: string\n error?: string\n\n protected inputId: string\n protected errorId: string\n protected hintId: string\n protected labelSlot: SlotController\n protected hintSlot: SlotController\n protected errorSlot: SlotController\n protected formData: FormDataController\n\n protected get formValue(): string | undefined\n protected get hasError(): boolean\n protected get hasHint(): boolean\n\n protected handleChange(e: Event): void\n protected handleInput(e: Event): void\n protected renderLabel(additionalContent?: TemplateResult): TemplateResult\n protected renderError(): TemplateResult\n protected getDescribedBy(): string | undefined\n protected getInvalid(): \"true\" | undefined\n}\n\nexport function FormAssociatedMixin<T extends Constructor<InputMixinInterface & LitElement>>(superClass: T) {\n // TODO: would be nice if custom elements analyzer could pick up the slot docs from the mixin\n\n /**\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Use when a hint requires more than plain text.\n * @slot error - Optional slot that holds error text for the input.\n */\n class FormAssociatedElement extends superClass {\n protected labelSlot = new SlotController(this, \"label\")\n protected errorSlot = new SlotController(this, \"error\")\n protected hintSlot = new SlotController(this, \"hint\")\n protected formData = new FormDataController(this, { value: () => this.formValue })\n\n protected get formValue() {\n return this.value\n }\n\n protected inputId = \"input\"\n protected errorId = \"error\"\n protected hintId = \"hint\"\n\n /**\n * Label for the input.\n */\n @property() label: string = \"\"\n\n /**\n * Optional hint text to be displayed with the input. Alternatively use the hint slot.\n */\n @property() hint?: string\n\n /**\n * Visually hide the label, but still show it to assistive technologies like screen readers.\n */\n @property({ type: Boolean, attribute: \"hide-label\" }) hideLabel = false\n\n /**\n * Placeholder text to display within the input.\n */\n @property() placeholder?: string\n\n /**\n * Optional error to be shown with the input. Alternatively use the error slot.\n */\n @property() error?: string\n\n /**\n * Determines whether the input is required or not.\n * An input marked as required will be announced as such to users of assistive technology.\n * When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.\n */\n @property({ type: Boolean }) required = false\n\n /**\n * Visually hide the required indicator, but still show\n * required attribute to assistive technologies like screen readers.\n */\n @property({ type: Boolean, attribute: \"hide-required\" }) hideRequired = false\n\n protected handleInput(e: Event) {\n e.stopPropagation()\n const target = e.target as NativeInputElement\n this.value = target.value\n\n /**\n * Fired as the user types into the input.\n */\n this.dispatchEvent(new NordEvent(\"input\"))\n }\n\n protected handleChange(e: Event) {\n e.stopPropagation()\n\n /**\n * Fired whenever the input's value is changed via user interaction.\n */\n this.dispatchEvent(new NordEvent(\"change\"))\n }\n\n protected renderLabel(additionalContent?: TemplateResult) {\n const label = html`\n <label for=${this.inputId}>\n <slot name=\"label\">${this.label}</slot\n ><span ?hidden=${!this.required || this.hideRequired} aria-hidden=\"true\" class=\"n-required\">*</span>\n ${additionalContent}\n </label>\n\n <div class=\"n-caption n-hint\" id=${this.hintId} ?hidden=${!this.hasHint}>\n <slot name=\"hint\">${this.hint}</slot>\n </div>\n `\n\n return this.hideLabel\n ? html`<nord-visually-hidden>${label}</nord-visually-hidden>`\n : html`<div class=\"n-label-container\">${label}</div>`\n }\n\n protected renderError() {\n return html`\n <div class=\"n-caption n-error\" id=${this.errorId} role=\"alert\" ?hidden=${!this.hasError}>\n <slot name=\"error\">${this.error}</slot>\n </div>\n `\n }\n\n protected getDescribedBy() {\n const { hasHint, hasError } = this\n\n if (hasHint && hasError) {\n return `${this.hintId} ${this.errorId}`\n }\n if (hasHint) {\n return this.hintId\n }\n if (hasError) {\n return this.errorId\n }\n\n return undefined\n }\n\n protected getInvalid() {\n return this.hasError ? \"true\" : undefined\n }\n\n protected get hasHint() {\n return Boolean(this.hint) || this.hintSlot.hasContent\n }\n\n protected get hasError() {\n return Boolean(this.error) || this.errorSlot.hasContent\n }\n }\n\n return FormAssociatedElement as unknown as Constructor<FormAssociatedMixinInterface> & T\n}\n"],"names":["FormDataController","constructor","host","options","this","_form","handleFormData","e","disabled","name","value","formData","append","addController","hostConnected","listen","form","hostUpdated","hostDisconnected","cleanup","_a","addEventListener","removeEventListener","FormAssociatedMixin","superClass","FormAssociatedElement","labelSlot","SlotController","errorSlot","hintSlot","formValue","inputId","errorId","hintId","label","hideLabel","required","hideRequired","handleInput","stopPropagation","target","dispatchEvent","NordEvent","handleChange","renderLabel","additionalContent","html","hasHint","hint","renderError","hasError","error","getDescribedBy","getInvalid","undefined","Boolean","hasContent","__decorate","property","prototype","type","attribute"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as n}from"./query-assigned-elements-
|
|
2
|
-
//# sourceMappingURL=FormField-
|
|
1
|
+
import{i as n}from"./query-assigned-elements-15485e3d.js";const a=n`.n-caption,::slotted(.n-caption){font-size:var(--n-font-size-s);line-height:var(--n-line-height-caption)}.n-label-container{margin-block-end:var(--n-space-s);display:inline-block}.n-label,::slotted(label),label{display:block!important;color:var(--n-color-text);font-family:var(--n-font-family);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-heading)!important;line-height:var(--n-line-height-heading);margin:0!important}.n-hint{padding-block-start:var(--n-space-xs);color:var(--n-color-text-weaker)}.n-error{margin-block-start:var(--n-space-s);color:var(--n-color-text-error)}.n-required{color:var(--n-color-status-danger);margin-inline-start:var(--n-space-xs)}`;export{a as s};
|
|
2
|
+
//# sourceMappingURL=FormField-cbfebb3f.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FormField-cbfebb3f.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
package/lib/Header.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as e,_ as r,s as a,x as n,e as o}from"./query-assigned-elements-
|
|
1
|
+
import{i as e,_ as r,s as a,x as n,e as o}from"./query-assigned-elements-15485e3d.js";import{e as d}from"./property-03f59dce.js";import{S as s}from"./SlotController-d733c575.js";import{s as t}from"./Component-420bbc41.js";import"./EventController-d99ebeef.js";const l=e`: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-space-l);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{display:flex;flex-flow:row;align-items:center;gap:var(--n-space-m)}.n-header{padding:var(--_n-header-padding-block) var(--_n-header-padding-inline);padding-inline-start:calc(var(--_n-header-padding-inline) + var(--_n-header-gutter,0px));background-color:var(--n-color-surface);border-block-end:1px solid var(--n-color-border);box-shadow:var(--_n-header-box-shadow);block-size:var(--_n-header-block-size)}.n-header-end{margin-inline-start:auto;gap:var(--n-space-s)}:host([size="s"]){--_n-header-block-size:52px;--_n-header-padding-block:var(--n-space-s)}`;let i=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>`}};i.styles=[t,l],r([d({reflect:!0})],i.prototype,"size",void 0),i=r([o("nord-header")],i);var c=i;export{c as default};
|
|
2
2
|
//# sourceMappingURL=Header.js.map
|
package/lib/Icon.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import{A as e,T as i,i as s,_ as t,s as r,x as o,e as n}from"./query-assigned-elements-
|
|
1
|
+
import{A as e,T as i,i as s,_ as t,s as r,x as o,e as n}from"./query-assigned-elements-15485e3d.js";import{e as a}from"./property-03f59dce.js";import{t as c}from"./state-70f38ceb.js";import{l}from"./if-defined-9b177db4.js";import{i as d,t as h,e as v}from"./directive-de55b00a.js";import{c as m}from"./cond-44672025.js";import{IconManager as p}from"./IconManager.js";import{s as f}from"./Component-420bbc41.js";import{o as z}from"./observe-a9c6dfb6.js";
|
|
2
2
|
/**
|
|
3
3
|
* @license
|
|
4
4
|
* Copyright 2017 Google LLC
|
|
5
5
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
6
|
-
*/class u extends d{constructor(i){if(super(i),this.et=e,i.type!==h.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(s){if(s===e||null==s)return this.ft=void 0,this.et=s;if(s===i)return s;if("string"!=typeof s)throw Error(this.constructor.directiveName+"() called with a non-string value");if(s===this.et)return this.ft;this.et=s;const t=[s];return t.raw=t,this.ft={_$litType$:this.constructor.resultType,strings:t,values:[]}}}u.directiveName="unsafeHTML",u.resultType=1;const g=v(u),y=s`:host{--_n-icon-size:var(--n-size-icon-m);display:inline-block;block-size:var(--_n-icon-size);inline-size:var(--_n-icon-size);min-inline-size:var(--_n-icon-size)}:host([size=xxs]){--_n-icon-size:var(--n-size-icon-xxs)}:host([size=xs]){--_n-icon-size:var(--n-size-icon-xs)}:host([size="s"]){--_n-icon-size:var(--n-size-icon-s)}:host([size="l"]){--_n-icon-size:var(--n-size-icon-l)}:host([size=xl]){--_n-icon-size:var(--n-size-icon-xl)}:host([size=xxl]){--_n-icon-size:var(--n-size-icon-xxl)}.n-icon{display:block}svg{display:block}`;var
|
|
6
|
+
*/class u extends d{constructor(i){if(super(i),this.et=e,i.type!==h.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(s){if(s===e||null==s)return this.ft=void 0,this.et=s;if(s===i)return s;if("string"!=typeof s)throw Error(this.constructor.directiveName+"() called with a non-string value");if(s===this.et)return this.ft;this.et=s;const t=[s];return t.raw=t,this.ft={_$litType$:this.constructor.resultType,strings:t,values:[]}}}u.directiveName="unsafeHTML",u.resultType=1;const g=v(u),y=s`:host{--_n-icon-size:var(--n-size-icon-m);display:inline-block;block-size:var(--_n-icon-size);inline-size:var(--_n-icon-size);min-inline-size:var(--_n-icon-size)}:host([size=xxs]){--_n-icon-size:var(--n-size-icon-xxs)}:host([size=xs]){--_n-icon-size:var(--n-size-icon-xs)}:host([size="s"]){--_n-icon-size:var(--n-size-icon-s)}:host([size="l"]){--_n-icon-size:var(--n-size-icon-l)}:host([size=xl]){--_n-icon-size:var(--n-size-icon-xl)}:host([size=xxl]){--_n-icon-size:var(--n-size-icon-xxl)}.n-icon{display:block}svg{display:block}`;var b;let x=b=class extends r{constructor(){super(...arguments),this.name="",this.svg=""}static registerResolver(e){this.manager.resolver=e}static registerIcon(e,i){return this.manager.registerIcon(e,i)}render(){return o`<div role="${m(this.label,"img")}" style="${m(this.color,`color:${this.color}`)}" aria-label="${l(this.label)}"><slot aria-hidden="true"></slot><div aria-hidden="true">${g(this.svg)}</div></div>`}handleNameChange(){this.name?b.manager.resolve(this.name,(e=>{this.svg=e})):this.svg=""}};x.styles=[f,y],x.manager=new p,t([a({reflect:!0})],x.prototype,"name",void 0),t([a({reflect:!0})],x.prototype,"size",void 0),t([a({reflect:!0})],x.prototype,"color",void 0),t([a({reflect:!0})],x.prototype,"label",void 0),t([c()],x.prototype,"svg",void 0),t([z("name")],x.prototype,"handleNameChange",null),x=b=t([n("nord-icon")],x);var _=x;export{_ as default};
|
|
7
7
|
//# sourceMappingURL=Icon.js.map
|
package/lib/IconManager.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const e=e=>fetch(`https://nordcdn.net/ds/icons/3.0
|
|
1
|
+
const e=e=>fetch(`https://nordcdn.net/ds/icons/3.1.0/assets/${e}.svg`).then((t=>{if(!t.ok)throw new TypeError(`NORD: unknown icon: '${e}'`);return t.text()}));class t{constructor(){this.cache=new Map,this.resolver=e}resolve(e,t){let r=this.cache.get(e);"string"!=typeof r?(r||(r=this.resolver(e).catch((()=>"")).then((t=>(this.cache.set(e,t),t))),this.cache.set(e,r)),r.then(t)):t(r)}registerIcon(e,t){let r,s;if("string"==typeof e?(r=e,s=t):(r=e.title,s=e.default),!r)throw new Error("name is required when registering an icon");if(!s)throw new Error("icon must not be empty");this.cache.set(r,s)}clear(){this.cache.clear()}}export{t as IconManager};
|
|
2
2
|
//# sourceMappingURL=IconManager.js.map
|
package/lib/Input.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as t,x as n,A as e,_ as o,e as i,s as r}from"./query-assigned-elements-
|
|
1
|
+
import{i as t,x as n,A as e,_ as o,e as i,s as r}from"./query-assigned-elements-15485e3d.js";import{e as s}from"./property-03f59dce.js";import{i as a}from"./query-2d22378e.js";import{l as d}from"./if-defined-9b177db4.js";import{o as l}from"./class-map-cb77ead2.js";import{n as c}from"./ref-5526fb07.js";import{o as p}from"./style-map-ed7e6cc6.js";import{F as u}from"./FocusableMixin-4300e44e.js";import{F as m}from"./FormAssociatedMixin-88e4bf5e.js";import{I as h}from"./InputMixin-f9fb4034.js";import{R as b,s as v}from"./TextField-8b226327.js";import{A as f}from"./AutocompleteMixin-3cf61f49.js";import{S as g}from"./SizeMixin-fb379434.js";import{s as w}from"./Component-420bbc41.js";import{s as y}from"./FormField-cbfebb3f.js";import{D as z}from"./DirectionController-f35f5476.js";import{c as x}from"./cond-44672025.js";import j from"./Icon.js";import"./directive-de55b00a.js";import"./SlotController-d733c575.js";import"./EventController-d99ebeef.js";import"./events-d9666e88.js";import"./VisuallyHidden.js";import"./state-70f38ceb.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";var _=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m16.03 14.61c1.23-1.54 1.97-3.49 1.97-5.61 0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.12 0 4.07-.74 5.61-1.97l3.97 3.97 1.41-1.41-3.97-3.97zm-7.03 1.39c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7z" fill="currentColor"/></svg>',title:"navigation-search",tags:"nordicon navigation menu find search magnifying glass"});const $=t`.n-input::-webkit-search-cancel-button,.n-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.n-input-container{font-size:var(--n-font-size-m);display:grid;grid-template-columns:max-content 1fr max-content}.n-input{grid-area:1/1/2/4;padding-inline-start:var(--_n-input-start-inline-size,var(--_n-input-padding-inline));padding-inline-end:var(--_n-input-end-inline-size,var(--_n-input-padding-inline))}slot[name=end],slot[name=start]{pointer-events:none;display:flex;align-items:center;color:var(--n-color-icon)}:host([disabled]) slot:is([name=start],[name=end]){color:var(--n-color-text-weakest)}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-start:var(--_n-input-padding-inline)!important;margin-inline-end:calc(var(--_n-input-padding-inline)/ 2)!important}[name=end]::slotted(*){margin-inline-start:calc(var(--_n-input-padding-inline)/ 2)!important;margin-inline-end:var(--_n-input-padding-inline)!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}`;class S{constructor(t,n){this.target=n,this.hadFirstUpdate=!1,t.addController(this),this.observer=new ResizeObserver((([n])=>{const[e]=n.borderBoxSize;this.borderBoxSize=e,t.requestUpdate()}))}get inlineSize(){var t;return null===(t=this.borderBoxSize)||void 0===t?void 0:t.inlineSize}get blockSize(){var t;return null===(t=this.borderBoxSize)||void 0===t?void 0:t.blockSize}hostUpdated(){this.hadFirstUpdate||(this.observer.observe(this.target()),this.hadFirstUpdate=!0)}hostConnected(){this.hadFirstUpdate&&this.observer.observe(this.target())}hostDisconnected(){this.observer.disconnect()}}j.registerIcon(_);const k=t=>t?`${t}px`:void 0;let F=class extends(g(m(f(b(h(u(r))))))){constructor(){super(...arguments),this.startObserver=new S(this,(()=>this.startSlot)),this.endObserver=new S(this,(()=>this.endSlot)),this.direction=new z(this),this.type="text",this.expand=!1,this.disallowPattern=void 0,this.handleInputChange=t=>{const n=t.target;this.disallowPattern&&function(t,n){const{value:e}=t,o=t.selectionStart,i=e.slice(0,o),r=e.slice(o,e.length),s=i.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 o="number"===this.type;return n`${this.renderLabel()}<div class="${l({"n-input-container":!0,"is-rtl":"rtl"===this.direction.dir})}" style="${p({"--_n-input-start-inline-size":k(this.startObserver.inlineSize),"--_n-input-end-inline-size":k(this.endObserver.inlineSize)})}"><slot name="start">${"search"===this.type?n`<nord-icon name="navigation-search"></nord-icon>`:e}</slot><input ${c(this.focusableRef)} id="${this.inputId}" class="n-input" type="${o||"unit"===this.type?"text":this.type}" inputmode="${x(o,"numeric")}" pattern="${x(o,"[0-9]*")}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" name="${d(this.name)}" .value="${null!==(t=this.value)&&void 0!==t?t:""}" placeholder="${d(this.placeholder)}" @input="${this.handleInputChange}" @change="${this.handleChange}" @keydown="${this.handleKeydown}" aria-describedby="${d(this.getDescribedBy())}" aria-invalid="${d(this.getInvalid())}" spellcheck="false" autocomplete="${this.autocomplete}"><slot name="end"></slot></div>${this.renderError()}`}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)}}};F.styles=[w,y,v,$],o([a("slot[name='start']")],F.prototype,"startSlot",void 0),o([a("slot[name='end']")],F.prototype,"endSlot",void 0),o([s({reflect:!0})],F.prototype,"type",void 0),o([s({reflect:!0,type:Boolean})],F.prototype,"expand",void 0),o([s({reflect:!0,attribute:"disallow-pattern"})],F.prototype,"disallowPattern",void 0),F=o([i("nord-input")],F);var C=F;export{C as default};
|
|
2
2
|
//# sourceMappingURL=Input.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e}from"./query-assigned-elements-
|
|
2
|
-
//# sourceMappingURL=InputMixin-
|
|
1
|
+
import{_ as e}from"./query-assigned-elements-15485e3d.js";import{e as t}from"./property-03f59dce.js";function o(o){class r extends o{constructor(){super(...arguments),this.disabled=!1,this.value="",this.formAncestor=null}set form(e){const t=this._formId;this._formId=e,this.requestUpdate("form",t)}get form(){if(this._formId){return this.getRootNode().querySelector(`form#${this._formId}`)}return this.formAncestor}connectedCallback(){super.connectedCallback(),this.formAncestor=this.closest("form")}disconnectedCallback(){super.disconnectedCallback(),this.formAncestor=null}}return e([t({type:Boolean,reflect:!0})],r.prototype,"disabled",void 0),e([t()],r.prototype,"name",void 0),e([t()],r.prototype,"value",void 0),e([t()],r.prototype,"form",null),r}export{o as I};
|
|
2
|
+
//# sourceMappingURL=InputMixin-f9fb4034.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputMixin-
|
|
1
|
+
{"version":3,"file":"InputMixin-f9fb4034.js","sources":["../src/common/mixins/InputMixin.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file */\nimport { LitElement } from \"lit\"\nimport { property } from \"lit/decorators.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class InputMixinInterface {\n name?: string\n value: string\n disabled: boolean\n protected _formId?: string\n set form(id: string)\n get form(): HTMLFormElement | null\n}\n\nexport function InputMixin<T extends Constructor<LitElement>>(superClass: T): Constructor<InputMixinInterface> & T {\n class InputElement extends superClass {\n /**\n * Makes the component disabled. This prevents users from\n * being able to interact with the component, and conveys\n * its inactive state to assistive technologies.\n */\n @property({ type: Boolean, reflect: true }) disabled = false\n\n /**\n * The name of the form component.\n */\n @property() name?: string\n\n /**\n * The value of the form component.\n */\n @property() value: string = \"\"\n\n private formAncestor: HTMLFormElement | null = null\n protected _formId?: string\n set form(id: string) {\n const oldVal = this._formId\n this._formId = id\n this.requestUpdate(\"form\", oldVal)\n }\n\n /**\n * Gets the form, if any, associated with the form element.\n * The setter accepts a string, which is the id of the form.\n */\n @property()\n get form(): HTMLFormElement | null {\n if (this._formId) {\n const root = this.getRootNode() as ShadowRoot | Document\n return root.querySelector<HTMLFormElement>(`form#${this._formId}`)\n }\n return this.formAncestor\n }\n\n connectedCallback() {\n super.connectedCallback()\n // we can cache this, since it will only change if the element is (re)connected\n this.formAncestor = this.closest(\"form\")\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n this.formAncestor = null\n }\n }\n\n return InputElement as unknown as Constructor<InputMixinInterface> & T\n}\n"],"names":["InputMixin","superClass","InputElement","constructor","this","disabled","value","formAncestor","form","id","oldVal","_formId","requestUpdate","getRootNode","querySelector","connectedCallback","super","closest","disconnectedCallback","__decorate","property","type","Boolean","reflect","prototype"],"mappings":"qGAeM,SAAUA,EAA8CC,GAC5D,MAAMC,UAAqBD,EAA3BE,kCAM8CC,KAAQC,UAAG,EAU3CD,KAAKE,MAAW,GAEpBF,KAAYG,aAA2B,IA+BhD,CA7BKC,SAAKC,GACP,MAAMC,EAASN,KAAKO,QACpBP,KAAKO,QAAUF,EACfL,KAAKQ,cAAc,OAAQF,EAC5B,CAOGF,WACF,GAAIJ,KAAKO,QAAS,CAEhB,OADaP,KAAKS,cACNC,cAA+B,QAAQV,KAAKO,UACzD,CACD,OAAOP,KAAKG,YACb,CAEDQ,oBACEC,MAAMD,oBAENX,KAAKG,aAAeH,KAAKa,QAAQ,OAClC,CAEDC,uBACEF,MAAME,uBACNd,KAAKG,aAAe,IACrB,EAGH,OA7C8CY,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAwBrB,EAAAsB,UAAA,gBAAA,GAKhDL,EAAA,CAAXC,KAAwBlB,EAAAsB,UAAA,YAAA,GAKbL,EAAA,CAAXC,KAA6BlB,EAAAsB,UAAA,aAAA,GAe9BL,EAAA,CADCC,KAOAlB,EAAAsB,UAAA,OAAA,MAcItB,CACT"}
|
package/lib/Layout.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as n,_ as e,s as a,x as t,A as o,e as i}from"./query-assigned-elements-822fe360.js";import{e as r}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{i as d}from"./query-2d22378e.js";import{o as l}from"./class-map-c0d8e1e5.js";import{o as c}from"./style-map-5b757428.js";import{l as v}from"./NavToggle-5d3f0605.js";import{D as p}from"./DirectionController-f35f5476.js";import{E as h}from"./EventController-d99ebeef.js";import{L as u}from"./LightDismissController-a2645ae6.js";import{S as g}from"./SlotController-d733c575.js";import{o as b}from"./observe-a9c6dfb6.js";import{c as m}from"./cond-09498763.js";import{f as y}from"./fsm-50373df9.js";import{c as k}from"./number-c3ab3e95.js";import w from"./Icon.js";import{s as f}from"./Component-1f694235.js";import{s as z}from"./Sticky-b4e6c315.js";import"./directive-de55b00a.js";import"./ref-6b46e5ea.js";import"./LocalizeController.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./FocusableMixin-186c69a2.js";import"./Button.js";import"./LightDomController-8a770234.js";import"./Spinner.js";import"./if-defined-8a007930.js";import"./InputMixin-d50cb41a.js";import"./VisuallyHidden.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./IconManager.js";const x=n`:host{--_n-layout-padding:var(--n-layout-padding, var(--n-space-l));--_n-layout-drawer-inline-size:var(--n-layout-drawer-inline-size, 320px);--_n-layout-background-color:var(--n-layout-background-color, var(--n-color-background));--_n-layout-nav-transition-duration:var(--n-transition-mobile);--_n-layout-header-size:var(--n-space-xxl);--_n-layout-header-size-s:calc(var(--n-space-xl) + var(--n-space-m));background:var(--_n-layout-background-color);color:var(--n-color-text);min-block-size:100vh}.n-layout-main,.n-layout-nav{background:var(--_n-layout-background-color);min-block-size:100%}.n-layout-nav{position:fixed;user-select:none;inline-size:var(--_n-layout-nav-width);z-index:var(--n-index-nav);inset-block-start:0;inset-inline-start:0;inset-block-end:0;transform:translateX(var(--n-nav-transform));box-shadow:var(--n-box-shadow-nav)}.n-layout-main{position:relative}main{padding:var(--_n-layout-padding)}.n-has-top-bar{--_n-sticky-top:var(--_n-layout-header-size)}:host([sticky]) .n-has-header{--_n-sticky-size:var(--_n-layout-header-size)}aside{position:fixed;z-index:var(--n-index-nav);inset-block:0;inset-inline-end:0;inline-size:var(--_n-layout-drawer-inline-size);max-inline-size:100%;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-nav)}@media (min-width:1240px){.n-has-drawer .n-layout-content{margin-inline-end:var(--_n-layout-drawer-inline-size)}aside{box-shadow:var(--n-box-shadow-header);border-inline-start:1px solid var(--n-color-border)}}slot[name=drawer]::slotted(*){block-size:100%!important}.n-has-top-bar aside{inset-block-start:var(--_n-layout-header-size)}:is(.n-has-top-bar,.n-has-header) ::slotted(nord-notification-group){inset-block-start:var(--_n-layout-header-size)}:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(-110%)}.n-rtl:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(110%)}[data-screen=narrow] .n-layout-nav{z-index:var(--n-index-popout);transition:transform var(--_n-layout-nav-transition-duration)}[data-screen=wide]:is(:not([data-nav=opened],[data-nav=closed])) .n-layout-nav{transition:transform var(--_n-layout-nav-transition-duration);border-start-end-radius:var(--n-border-radius);border-end-end-radius:var(--n-border-radius);min-block-size:0;inset-block-start:calc(var(--n-space-m) * 4);inset-block-end:var(--n-space-l)}[data-screen=wide][data-nav=opened] .n-layout-nav{border-inline-end:1px solid var(--n-color-border);box-shadow:none}[data-screen=wide][data-nav=opened]:not(.n-has-top-bar) .n-layout-nav{--n-navigation-header-padding-inline:calc(var(--n-space-l) / 1.5)}.n-has-top-bar[data-screen=wide][data-nav=opened] .n-layout-nav{--n-navigation-header-background:var(--n-color-accent-secondary);--n-navigation-header-color:var(--n-color-text-on-accent);--n-navigation-header-divider:none;--n-navigation-header-toggle-icon-color:rgba(255, 255, 255, 0.85);--n-navigation-header-focus-style:0 0 0 1px #fff inset,inset 0 0 0 100px rgba(255, 255, 255, 0.2);border-color:transparent;border-image-slice:1;border-image-source:linear-gradient(to bottom,rgba(255,255,255,.16) calc(var(--_n-layout-header-size) + 1px),var(--n-color-border) calc(var(--_n-layout-header-size) + 1px));background:var(--n-color-accent-secondary);box-shadow:0 0 transparent}[data-screen=wide]:not([data-nav=opened]) .n-layout-nav{--n-navigation-header-block-size:var(--_n-layout-header-size-s);overflow:hidden}[data-screen=wide][data-nav=opened] .n-layout-main{margin-inline-start:var(--_n-layout-nav-width)}[data-screen=narrow] .n-layout-main::after{content:"";position:fixed;inset:0;z-index:var(--n-index-overlay);transition:opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);background:var(--n-color-overlay)}[data-screen=narrow]:not([data-nav=opened],[data-nav=peek],[data-nav=blocked]) .n-layout-main::after{visibility:hidden;opacity:0}.n-resize{touch-action:none;position:absolute;min-block-size:100%;inset-block:0;inset-inline-end:-8px;inline-size:10px;background:0 0}[data-nav=opened] .n-resize{cursor:col-resize}.n-resize::after{content:"";position:absolute;z-index:var(--n-index-sticky);inset-block:0;inset-inline-end:5px;inline-size:3px;background:var(--n-color-accent);transition:opacity var(--n-transition-slowly);opacity:0}.n-resize:focus{outline:0}.n-dragging .n-resize::after,.n-resize:focus::after,[data-nav=opened] .n-resize:hover::after{opacity:1;transition-delay:.15s}@supports selector(:focus-visible){.n-resize:focus::after{opacity:0}.n-resize:focus-visible::after{opacity:1}}.n-dragging{cursor:col-resize!important;-webkit-user-select:none;user-select:none}:host([padding=none]){--_n-layout-padding:var(--n-layout-padding, 0)}.n-top-bar-container{position:sticky;inset-block-start:0;z-index:var(--n-index-top-bar)}.n-has-top-bar{--_n-layout-header-size:var(--_n-layout-header-size-s);--n-navigation-header-block-size:var(--_n-layout-header-size)}.n-has-top-bar :is([name=header],[name=drawer])::slotted(*){--n-header-block-size:var(--_n-layout-header-size)}.n-nav-toggle-container{position:absolute;padding-inline-start:var(--n-space-s);block-size:var(--_n-layout-header-size);display:flex;align-items:center;z-index:calc(var(--n-index-top-bar) + 1)}[data-screen=narrow] .n-nav-toggle-container{padding-inline-start:var(--n-space-xs)}.n-has-top-bar .n-nav-toggle-container,:host([sticky]) .n-nav-toggle-container{position:fixed}[data-screen=wide][data-nav=opened] .n-nav-toggle-container{display:none}.n-has-nav[data-screen=wide]:not([data-nav=opened]) ::slotted(nord-top-bar),.n-has-nav[data-screen=wide]:not([data-nav=opened],.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:calc(var(--n-space-l) * 1.8)}.n-has-nav[data-screen=narrow] ::slotted(nord-top-bar),.n-has-nav[data-screen=narrow]:not(.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:var(--n-space-xl)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)){--n-button-background-color:transparent;color:rgba(255,255,255,.85)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)):focus{--n-button-background-color:rgba(0, 0, 0, 0.2)}.n-collapse-btn{--_n-collapse-btn-size:var(--n-space-l);position:fixed;inset-inline-start:calc(var(--_n-layout-nav-width) - (var(--_n-collapse-btn-size)/ 2));inset-block-start:calc(var(--_n-layout-header-size) + (var(--_n-layout-header-size) - var(--_n-collapse-btn-size))/ 2);border-radius:var(--n-border-radius-circle);block-size:var(--_n-collapse-btn-size);inline-size:var(--_n-collapse-btn-size);display:flex;align-items:center;justify-content:center;color:var(--n-color-icon);background:var(--n-color-button);box-shadow:var(--n-box-shadow-card);border:0;z-index:var(--n-index-sticky);opacity:0;visibility:hidden;cursor:pointer;transition:opacity var(--n-transition-slowly),visibility var(--n-transition-slowly),background-color var(--n-transition-quickly),color var(--n-transition-quickly)}.n-collapse-btn:hover{background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-collapse-btn:focus{outline:0;box-shadow:0 0 0 2px var(--n-color-accent),var(--n-box-shadow)}[data-screen=narrow] .n-collapse-btn,[data-screen=wide]:not([data-nav=opened]) .n-collapse-btn{display:none}.n-collapse-btn:focus,.n-layout-nav:hover .n-collapse-btn{opacity:1;visibility:visible}.n-collapse-btn nord-icon{transform:rotate(180deg)}.n-rtl .n-collapse-btn nord-icon{transform:rotate(0)}`;w.registerIcon(v);const j=matchMedia("(min-width: 768px)"),_=function(n,e,a=JSON.stringify,t=JSON.parse){return{get value(){try{const a=localStorage.getItem(n);return a?t(a):e}catch(n){return e}},set value(e){try{localStorage.setItem(n,a(e))}catch(n){}}}}("nord-layout.navWidth",250),S=y({opened:{toggle:"closed",close:"closed"},closed:{toggle:"opened",open:"opened",focusin:"peek",pointerenter:"peek"},peek:{toggle:"opened",focusout:"unpeek",pointerleave:"wait",dropdownOpen:"blocked",click:"unpeek",open:"opened"},blocked:{dropdownClose:"peek",open:"opened"},wait:{toggle:"opened",focusin:"peek",pointerenter:"peek",timeout:"unpeek"},unpeek:{toggle:"opened",focusin:"peek",pointerenter:"peek",transitionend:"closed"}});let C=class extends a{constructor(){super(...arguments),this.navSlot=new g(this,"nav"),this.drawerSlot=new g(this,"drawer"),this.topBarSlot=new g(this,"top-bar"),this.headerSlot=new g(this,"header"),this.direction=new p(this),this.events=new h(this),this.lightDismiss=new u(this,{isOpen:()=>"opened"===this.navState&&!this.wideScreen,onDismiss:()=>this.navTransition("close"),isDismissible:n=>n!==this.navEl}),this.navWidth=_.value,this.isDragging=!1,this.navState=j.matches?"opened":"closed",this.wideScreen=j.matches,this.navOpen="opened"===this.navState,this.padding="m",this.sticky=!1,this.handleMediaQueryChange=()=>{this.wideScreen=j.matches,this.navTransition(this.wideScreen?"open":"close")},this.handleToggleClick=()=>{this.navTransition("toggle")},this.handleNavFocus=()=>{this.navTransition("focusin")},this.handleMainFocus=()=>{this.navTransition("focusout")},this.handleMouseEnter=()=>{this.wideScreen&&this.navTransition("pointerenter")},this.handleMouseLeave=()=>{this.navTransition("pointerleave")},this.handleTransitionEnd=()=>{this.navTransition("transitionend")}}get isNarrow(){return!this.wideScreen}connectedCallback(){super.connectedCallback(),this.events.listen(j,"change",this.handleMediaQueryChange)}render(){const{navWidth:n,navState:e,navSlot:a,headerSlot:i,topBarSlot:r,drawerSlot:s,isDragging:d,direction:v}=this,p="opened"===e&&this.wideScreen?n:250;return t`<div class="${l({"n-layout":!0,"n-rtl":v.isRTL,"n-dragging":d,"n-has-header":i.hasContent,"n-has-top-bar":r.hasContent,"n-has-drawer":s.hasContent,"n-has-nav":a.hasContent})}" style="${c({"--_n-layout-nav-width":`${p}px`})}" data-nav="${a.hasContent?e:"closed"}" data-screen="${this.wideScreen?"wide":"narrow"}"><div class="n-layout-nav" ?hidden="${a.isEmpty}" @focusin="${this.handleNavFocus}" @mouseenter="${this.handleMouseEnter}" @mouseleave="${this.handleMouseLeave}" @open="${this.handleDropdownOpen}" @close="${this.handleDropdownClose}"><slot name="nav" @click="${this.handleNavClick}"></slot><div class="n-resize" role="separator" aria-orientation="vertical" tabindex="0" @pointerdown="${m("opened"===e,this.startDragging)}" @pointermove="${m(d,this.handleDrag)}" @pointerleave="${this.stopDragging}" @pointerup="${this.stopDragging}" @keydown="${this.handleKeyboardResize}" ?hidden="${this.isNarrow}"></div>${this.renderNavCollapse()}</div><div class="n-layout-main" @focusin="${this.handleMainFocus}" @click="${this.handleMainClick}">${a.hasContent?this.renderNavToggle():o}<div class="n-top-bar-container"><slot name="top-bar"></slot></div><div class="n-layout-content"><div class="n-sticky"><slot name="header"></slot></div><main><slot></slot></main></div><aside ?hidden="${this.drawerSlot.isEmpty}"><slot name="drawer"></slot></aside></div></div>`}renderNavToggle(){return t`<div class="n-nav-toggle-container"><slot name="nav-toggle" @click="${this.handleToggleClick}" @mouseover="${this.handleMouseEnter}" @mouseout="${this.handleMouseLeave}"><nord-nav-toggle></nord-nav-toggle></slot></div>`}renderNavCollapse(){return t`<button class="n-collapse-btn" @click="${this.handleToggleClick}"><nord-icon name="navigation-toggle-lock" size="s"></nord-icon></button>`}handleNavWidthChange(){_.value=this.navWidth}handleNavStateChange(n){switch("wait"===n&&this.peekTimeoutId&&clearTimeout(this.peekTimeoutId),"unpeek"===n&&this.navEl.removeEventListener("transitionend",this.handleTransitionEnd),this.navState){case"closed":this.navOpen=!1;break;case"opened":this.navOpen=!0;break;case"wait":this.peekTimeoutId=setTimeout((()=>this.navTransition("timeout")),300);break;case"unpeek":this.navEl.addEventListener("transitionend",this.handleTransitionEnd,{once:!0})}}handleOpenChange(){this.isDragging||this.setNavWidth(Math.max(this.navWidth,250)),this.navTransition(this.navOpen?"open":"close")}navTransition(n){this.navState=S.transition(this.navState,n)}handleNavClick(n){if(!n.defaultPrevented&&!this.wideScreen){const a=n.target;(n=>"nord-nav-item"===n.localName)(e=a)&&!e.hasSubNav&&this.navTransition("close")}var e}handleMainClick(){this.navTransition("click")}handleDropdownOpen(n){"nord-dropdown"===n.target.localName&&this.navTransition("dropdownOpen")}handleDropdownClose(n){"nord-dropdown"===n.target.localName&&this.navTransition("dropdownClose")}handleKeyboardResize(n){const{navWidth:e,direction:{isLTR:a}}=this;switch(n.key){case"ArrowLeft":this.setNavWidth(e+(a?-30:30));break;case"ArrowRight":this.setNavWidth(e+(a?30:-30));break;case"Enter":this.navTransition("toggle");break;case"Home":this.setNavWidth(220);break;case"End":this.setNavWidth(400);break;default:return}n.preventDefault()}setNavWidth(n){this.navWidth=k(Math.round(n),220,400)}startDragging(n){if(0===n.button){n.target.setPointerCapture(n.pointerId),this.isDragging=!0}}stopDragging(){this.isDragging=!1}handleDrag(n){const e=this.direction.isRTL?this.clientWidth-n.clientX:n.clientX;this.setNavWidth(e),this.navTransition(e>=100?"open":"close")}};C.styles=[f,z,x],e([d(".n-layout-nav",!0)],C.prototype,"navEl",void 0),e([s()],C.prototype,"navWidth",void 0),e([s()],C.prototype,"isDragging",void 0),e([s()],C.prototype,"navState",void 0),e([s()],C.prototype,"wideScreen",void 0),e([r({reflect:!0,type:Boolean,attribute:"nav-open"})],C.prototype,"navOpen",void 0),e([r({reflect:!0})],C.prototype,"padding",void 0),e([r({type:Boolean,reflect:!0})],C.prototype,"sticky",void 0),e([b("navWidth","updated")],C.prototype,"handleNavWidthChange",null),e([b("navState")],C.prototype,"handleNavStateChange",null),e([b("navOpen","updated")],C.prototype,"handleOpenChange",null),C=e([i("nord-layout")],C);var T=C;export{T as default};
|
|
1
|
+
import{i as n,_ as e,s as a,x as t,A as o,e as i}from"./query-assigned-elements-15485e3d.js";import{e as r}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{i as d}from"./query-2d22378e.js";import{o as l}from"./class-map-cb77ead2.js";import{o as c}from"./style-map-ed7e6cc6.js";import{l as v}from"./NavToggle-11625962.js";import{D as p}from"./DirectionController-f35f5476.js";import{E as h}from"./EventController-d99ebeef.js";import{L as u}from"./LightDismissController-a2645ae6.js";import{S as g}from"./SlotController-d733c575.js";import{o as b}from"./observe-a9c6dfb6.js";import{c as m}from"./cond-44672025.js";import{f as y}from"./fsm-50373df9.js";import{c as k}from"./number-c3ab3e95.js";import f from"./Icon.js";import{s as w}from"./Component-420bbc41.js";import{s as z}from"./Sticky-acc92284.js";import"./directive-de55b00a.js";import"./ref-5526fb07.js";import"./LocalizeController.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./FocusableMixin-4300e44e.js";import"./Button.js";import"./LightDomController-f78fb046.js";import"./Spinner.js";import"./if-defined-9b177db4.js";import"./InputMixin-f9fb4034.js";import"./VisuallyHidden.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./IconManager.js";const x=n`:host{--_n-layout-padding:var(--n-layout-padding, var(--n-space-l));--_n-layout-drawer-inline-size:var(--n-layout-drawer-inline-size, 320px);--_n-layout-background-color:var(--n-layout-background-color, var(--n-color-background));--_n-layout-nav-transition-duration:var(--n-transition-mobile);--_n-layout-header-size:var(--n-space-xxl);--_n-layout-header-size-s:calc(var(--n-space-xl) + var(--n-space-m));background:var(--_n-layout-background-color);color:var(--n-color-text);min-block-size:100vh}.n-layout-main,.n-layout-nav{background:var(--_n-layout-background-color);min-block-size:100%}.n-layout-nav{position:fixed;user-select:none;inline-size:var(--_n-layout-nav-width);z-index:var(--n-index-nav);inset-block-start:0;inset-inline-start:0;inset-block-end:0;transform:translateX(var(--n-nav-transform));box-shadow:var(--n-box-shadow-nav)}.n-layout-main{position:relative}main{padding:var(--_n-layout-padding)}.n-has-top-bar{--_n-sticky-top:var(--_n-layout-header-size)}:host([sticky]) .n-has-header{--_n-sticky-size:var(--_n-layout-header-size)}aside{position:fixed;z-index:var(--n-index-nav);inset-block:0;inset-inline-end:0;inline-size:var(--_n-layout-drawer-inline-size);max-inline-size:100%;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-nav)}@media (min-width:1240px){.n-has-drawer .n-layout-content{margin-inline-end:var(--_n-layout-drawer-inline-size)}aside{box-shadow:var(--n-box-shadow-header);border-inline-start:1px solid var(--n-color-border)}}slot[name=drawer]::slotted(*){block-size:100%!important}.n-has-top-bar aside{inset-block-start:var(--_n-layout-header-size)}:is(.n-has-top-bar,.n-has-header) ::slotted(nord-notification-group){inset-block-start:var(--_n-layout-header-size)}:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(-110%)}.n-rtl:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(110%)}[data-screen=narrow] .n-layout-nav{z-index:var(--n-index-popout);transition:transform var(--_n-layout-nav-transition-duration)}[data-screen=wide]:is(:not([data-nav=opened],[data-nav=closed])) .n-layout-nav{transition:transform var(--_n-layout-nav-transition-duration);border-start-end-radius:var(--n-border-radius);border-end-end-radius:var(--n-border-radius);min-block-size:0;inset-block-start:calc(var(--n-space-m) * 4);inset-block-end:var(--n-space-l)}[data-screen=wide][data-nav=opened] .n-layout-nav{border-inline-end:1px solid var(--n-color-border);box-shadow:none}[data-screen=wide][data-nav=opened]:not(.n-has-top-bar) .n-layout-nav{--n-navigation-header-padding-inline:calc(var(--n-space-l) / 1.5)}.n-has-top-bar[data-screen=wide][data-nav=opened] .n-layout-nav{--n-navigation-header-background:var(--n-color-accent-secondary);--n-navigation-header-color:var(--n-color-text-on-accent);--n-navigation-header-divider:none;--n-navigation-header-toggle-icon-color:rgba(255, 255, 255, 0.85);--n-navigation-header-focus-style:0 0 0 1px #fff inset,inset 0 0 0 100px rgba(255, 255, 255, 0.2);border-color:transparent;border-image-slice:1;border-image-source:linear-gradient(to bottom,rgba(255,255,255,.16) calc(var(--_n-layout-header-size) + 1px),var(--n-color-border) calc(var(--_n-layout-header-size) + 1px));background:var(--n-color-accent-secondary);box-shadow:0 0 transparent}[data-screen=wide]:not([data-nav=opened]) .n-layout-nav{--n-navigation-header-block-size:var(--_n-layout-header-size-s);overflow:hidden}[data-screen=wide][data-nav=opened] .n-layout-main{margin-inline-start:var(--_n-layout-nav-width)}[data-screen=narrow] .n-layout-main::after{content:"";position:fixed;inset:0;z-index:var(--n-index-overlay);transition:opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);background:var(--n-color-overlay)}[data-screen=narrow]:not([data-nav=opened],[data-nav=peek],[data-nav=blocked]) .n-layout-main::after{visibility:hidden;opacity:0}.n-resize{touch-action:none;position:absolute;min-block-size:100%;inset-block:0;inset-inline-end:-8px;inline-size:10px;background:0 0}[data-nav=opened] .n-resize{cursor:col-resize}.n-resize::after{content:"";position:absolute;z-index:var(--n-index-sticky);inset-block:0;inset-inline-end:5px;inline-size:3px;background:var(--n-color-accent);transition:opacity var(--n-transition-slowly);opacity:0}.n-resize:focus{outline:0}.n-dragging .n-resize::after,.n-resize:focus::after,[data-nav=opened] .n-resize:hover::after{opacity:1;transition-delay:.15s}@supports selector(:focus-visible){.n-resize:focus::after{opacity:0}.n-resize:focus-visible::after{opacity:1}}.n-dragging{cursor:col-resize!important;-webkit-user-select:none;user-select:none}:host([padding=none]){--_n-layout-padding:var(--n-layout-padding, 0)}.n-top-bar-container{position:sticky;inset-block-start:0;z-index:var(--n-index-top-bar)}.n-has-top-bar{--_n-layout-header-size:var(--_n-layout-header-size-s);--n-navigation-header-block-size:var(--_n-layout-header-size)}.n-has-top-bar :is([name=header],[name=drawer])::slotted(*){--n-header-block-size:var(--_n-layout-header-size)}.n-nav-toggle-container{position:absolute;padding-inline-start:var(--n-space-s);block-size:var(--_n-layout-header-size);display:flex;align-items:center;z-index:calc(var(--n-index-top-bar) + 1)}[data-screen=narrow] .n-nav-toggle-container{padding-inline-start:var(--n-space-xs)}.n-has-top-bar .n-nav-toggle-container,:host([sticky]) .n-nav-toggle-container{position:fixed}[data-screen=wide][data-nav=opened] .n-nav-toggle-container{display:none}.n-has-nav[data-screen=wide]:not([data-nav=opened]) ::slotted(nord-top-bar),.n-has-nav[data-screen=wide]:not([data-nav=opened],.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:calc(var(--n-space-l) * 1.8)}.n-has-nav[data-screen=narrow] ::slotted(nord-top-bar),.n-has-nav[data-screen=narrow]:not(.n-has-top-bar) ::slotted(nord-header[slot=header]){--_n-header-gutter:var(--n-space-xl)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)){--n-button-background-color:transparent;color:rgba(255,255,255,.85)}.n-has-top-bar :is(nord-nav-toggle,::slotted(nord-nav-toggle)):focus{--n-button-background-color:rgba(0, 0, 0, 0.2)}.n-collapse-btn{--_n-collapse-btn-size:var(--n-space-l);position:fixed;inset-inline-start:calc(var(--_n-layout-nav-width) - (var(--_n-collapse-btn-size)/ 2));inset-block-start:calc(var(--_n-layout-header-size) + (var(--_n-layout-header-size) - var(--_n-collapse-btn-size))/ 2);border-radius:var(--n-border-radius-circle);block-size:var(--_n-collapse-btn-size);inline-size:var(--_n-collapse-btn-size);display:flex;align-items:center;justify-content:center;color:var(--n-color-icon);background:var(--n-color-button);box-shadow:var(--n-box-shadow-card);border:0;z-index:var(--n-index-sticky);opacity:0;visibility:hidden;cursor:pointer;transition:opacity var(--n-transition-slowly),visibility var(--n-transition-slowly),background-color var(--n-transition-quickly),color var(--n-transition-quickly)}.n-collapse-btn:hover{background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-collapse-btn:focus{outline:0;box-shadow:0 0 0 2px var(--n-color-accent),var(--n-box-shadow)}[data-screen=narrow] .n-collapse-btn,[data-screen=wide]:not([data-nav=opened]) .n-collapse-btn{display:none}.n-collapse-btn:focus,.n-layout-nav:hover .n-collapse-btn{opacity:1;visibility:visible}.n-collapse-btn nord-icon{transform:rotate(180deg)}.n-rtl .n-collapse-btn nord-icon{transform:rotate(0)}`;f.registerIcon(v);const j=matchMedia("(min-width: 768px)"),_=function(n,e,a=JSON.stringify,t=JSON.parse){return{get value(){try{const a=localStorage.getItem(n);return a?t(a):e}catch(n){return e}},set value(e){try{localStorage.setItem(n,a(e))}catch(n){}}}}("nord-layout.navWidth",250),S=y({opened:{toggle:"closed",close:"closed"},closed:{toggle:"opened",open:"opened",focusin:"peek",pointerenter:"peek"},peek:{toggle:"opened",focusout:"unpeek",pointerleave:"wait",dropdownOpen:"blocked",click:"unpeek",open:"opened"},blocked:{dropdownClose:"peek",open:"opened"},wait:{toggle:"opened",focusin:"peek",pointerenter:"peek",timeout:"unpeek"},unpeek:{toggle:"opened",focusin:"peek",pointerenter:"peek",transitionend:"closed"}});let C=class extends a{constructor(){super(...arguments),this.navSlot=new g(this,"nav"),this.drawerSlot=new g(this,"drawer"),this.topBarSlot=new g(this,"top-bar"),this.headerSlot=new g(this,"header"),this.direction=new p(this),this.events=new h(this),this.lightDismiss=new u(this,{isOpen:()=>"opened"===this.navState&&!this.wideScreen,onDismiss:()=>this.navTransition("close"),isDismissible:n=>n!==this.navEl}),this.navWidth=_.value,this.isDragging=!1,this.navState=j.matches?"opened":"closed",this.wideScreen=j.matches,this.navOpen="opened"===this.navState,this.padding="m",this.sticky=!1,this.handleMediaQueryChange=()=>{this.wideScreen=j.matches,this.navTransition(this.wideScreen?"open":"close")},this.handleToggleClick=()=>{this.navTransition("toggle")},this.handleNavFocus=()=>{this.navTransition("focusin")},this.handleMainFocus=()=>{this.navTransition("focusout")},this.handleMouseEnter=()=>{this.wideScreen&&this.navTransition("pointerenter")},this.handleMouseLeave=()=>{this.navTransition("pointerleave")},this.handleTransitionEnd=()=>{this.navTransition("transitionend")}}get isNarrow(){return!this.wideScreen}connectedCallback(){super.connectedCallback(),this.events.listen(j,"change",this.handleMediaQueryChange)}render(){const{navWidth:n,navState:e,navSlot:a,headerSlot:i,topBarSlot:r,drawerSlot:s,isDragging:d,direction:v}=this,p="opened"===e&&this.wideScreen?n:250;return t`<div class="${l({"n-layout":!0,"n-rtl":v.isRTL,"n-dragging":d,"n-has-header":i.hasContent,"n-has-top-bar":r.hasContent,"n-has-drawer":s.hasContent,"n-has-nav":a.hasContent})}" style="${c({"--_n-layout-nav-width":`${p}px`})}" data-nav="${a.hasContent?e:"closed"}" data-screen="${this.wideScreen?"wide":"narrow"}"><div class="n-layout-nav" ?hidden="${a.isEmpty}" @focusin="${this.handleNavFocus}" @mouseenter="${this.handleMouseEnter}" @mouseleave="${this.handleMouseLeave}" @open="${this.handleDropdownOpen}" @close="${this.handleDropdownClose}"><slot name="nav" @click="${this.handleNavClick}"></slot><div class="n-resize" role="separator" aria-orientation="vertical" tabindex="0" @pointerdown="${m("opened"===e,this.startDragging)}" @pointermove="${m(d,this.handleDrag)}" @pointerleave="${this.stopDragging}" @pointerup="${this.stopDragging}" @keydown="${this.handleKeyboardResize}" ?hidden="${this.isNarrow}"></div>${this.renderNavCollapse()}</div><div class="n-layout-main" @focusin="${this.handleMainFocus}" @click="${this.handleMainClick}">${a.hasContent?this.renderNavToggle():o}<div class="n-top-bar-container"><slot name="top-bar"></slot></div><div class="n-layout-content"><div class="n-sticky"><slot name="header"></slot></div><main><slot></slot></main></div><aside ?hidden="${this.drawerSlot.isEmpty}"><slot name="drawer"></slot></aside></div></div>`}renderNavToggle(){return t`<div class="n-nav-toggle-container"><slot name="nav-toggle" @click="${this.handleToggleClick}" @mouseover="${this.handleMouseEnter}" @mouseout="${this.handleMouseLeave}"><nord-nav-toggle></nord-nav-toggle></slot></div>`}renderNavCollapse(){return t`<button class="n-collapse-btn" @click="${this.handleToggleClick}"><nord-icon name="navigation-toggle-lock" size="s"></nord-icon></button>`}handleNavWidthChange(){_.value=this.navWidth}handleNavStateChange(n){switch("wait"===n&&this.peekTimeoutId&&clearTimeout(this.peekTimeoutId),"unpeek"===n&&this.navEl.removeEventListener("transitionend",this.handleTransitionEnd),this.navState){case"closed":this.navOpen=!1;break;case"opened":this.navOpen=!0;break;case"wait":this.peekTimeoutId=setTimeout((()=>this.navTransition("timeout")),300);break;case"unpeek":this.navEl.addEventListener("transitionend",this.handleTransitionEnd,{once:!0})}}handleOpenChange(){this.isDragging||this.setNavWidth(Math.max(this.navWidth,250)),this.navTransition(this.navOpen?"open":"close")}navTransition(n){this.navState=S.transition(this.navState,n)}handleNavClick(n){if(!n.defaultPrevented&&!this.wideScreen){const a=n.target;(n=>"nord-nav-item"===n.localName)(e=a)&&!e.hasSubNav&&this.navTransition("close")}var e}handleMainClick(){this.navTransition("click")}handleDropdownOpen(n){"nord-dropdown"===n.target.localName&&this.navTransition("dropdownOpen")}handleDropdownClose(n){"nord-dropdown"===n.target.localName&&this.navTransition("dropdownClose")}handleKeyboardResize(n){const{navWidth:e,direction:{isLTR:a}}=this;switch(n.key){case"ArrowLeft":this.setNavWidth(e+(a?-30:30));break;case"ArrowRight":this.setNavWidth(e+(a?30:-30));break;case"Enter":this.navTransition("toggle");break;case"Home":this.setNavWidth(220);break;case"End":this.setNavWidth(400);break;default:return}n.preventDefault()}setNavWidth(n){this.navWidth=k(Math.round(n),220,400)}startDragging(n){if(0===n.button){n.target.setPointerCapture(n.pointerId),this.isDragging=!0}}stopDragging(){this.isDragging=!1}handleDrag(n){const e=this.direction.isRTL?this.clientWidth-n.clientX:n.clientX;this.setNavWidth(e),this.navTransition(e>=100?"open":"close")}};C.styles=[w,z,x],e([d(".n-layout-nav",!0)],C.prototype,"navEl",void 0),e([s()],C.prototype,"navWidth",void 0),e([s()],C.prototype,"isDragging",void 0),e([s()],C.prototype,"navState",void 0),e([s()],C.prototype,"wideScreen",void 0),e([r({reflect:!0,type:Boolean,attribute:"nav-open"})],C.prototype,"navOpen",void 0),e([r({reflect:!0})],C.prototype,"padding",void 0),e([r({type:Boolean,reflect:!0})],C.prototype,"sticky",void 0),e([b("navWidth","updated")],C.prototype,"handleNavWidthChange",null),e([b("navState")],C.prototype,"handleNavStateChange",null),e([b("navOpen","updated")],C.prototype,"handleOpenChange",null),C=e([i("nord-layout")],C);var T=C;export{T as default};
|
|
2
2
|
//# sourceMappingURL=Layout.js.map
|