@nordhealth/components 2.8.1 → 2.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +6246 -5394
- package/lib/Checkbox.js +1 -1
- package/lib/DatePicker.js +1 -1
- package/lib/FormAssociatedMixin-252fb0e9.js +2 -0
- package/lib/FormAssociatedMixin-252fb0e9.js.map +1 -0
- package/lib/Input.js +1 -1
- package/lib/Layout.js +1 -1
- package/lib/Layout.js.map +1 -1
- package/lib/Radio.js +1 -1
- package/lib/Range.js +2 -0
- package/lib/Range.js.map +1 -0
- package/lib/Select.js +1 -1
- package/lib/Textarea.js +1 -1
- package/lib/Toggle.js +1 -1
- package/lib/bundle.js +3 -3
- package/lib/bundle.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/src/common/mixins/FormAssociatedMixin.d.ts +1 -1
- package/lib/src/index.d.ts +1 -0
- package/lib/src/layout/Layout.d.ts +1 -0
- package/lib/src/range/Range.d.ts +45 -0
- package/lib/src/range/Range.test.d.ts +2 -0
- package/package.json +5 -5
- package/lib/FormAssociatedMixin-0d57fdc8.js +0 -2
- package/lib/FormAssociatedMixin-0d57fdc8.js.map +0 -1
package/lib/Checkbox.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,e as n}from"./query-assigned-elements-e6cbac30.js";import{i as o,y as r,s as i}from"./lit-element-9178eae5.js";import{e as t}from"./property-03f59dce.js";import{l as a}from"./if-defined-4598a996.js";import{n as c}from"./ref-0e619221.js";import s from"./Icon.js";import{F as l}from"./FocusableMixin-34870ed3.js";import{F as d}from"./FormAssociatedMixin-
|
|
1
|
+
import{_ as e,e as n}from"./query-assigned-elements-e6cbac30.js";import{i as o,y as r,s as i}from"./lit-element-9178eae5.js";import{e as t}from"./property-03f59dce.js";import{l as a}from"./if-defined-4598a996.js";import{n as c}from"./ref-0e619221.js";import s from"./Icon.js";import{F as l}from"./FocusableMixin-34870ed3.js";import{F as d}from"./FormAssociatedMixin-252fb0e9.js";import{I as p}from"./InputMixin-158f63fb.js";import{S as h,i as m}from"./SizeMixin-4559b224.js";import{s as b}from"./Component-92eb6234.js";import{s as v}from"./FormField-081da729.js";import"./directive-de55b00a.js";import"./state-70f38ceb.js";import"./unsafe-html-6be42999.js";import"./observe-a9c6dfb6.js";import"./cond-338158e9.js";import"./EventController-d99ebeef.js";import"./SlotController-89834aef.js";import"./events-731d0007.js";import"./VisuallyHidden.js";var u=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M41.86 131.25a23.982 23.982 0 0 1-18.494-8.666L2.254 95.746a10.5 10.5 0 1 1 16.492-12.992l21 26.6a2.24 2.24 0 0 0 2.212.882 3.038 3.038 0 0 0 2.38-1.148l76.958-96.39a10.5 10.5 0 1 1 16.408 13.104L60.606 122.29A24.038 24.038 0 0 1 42 131.25z"/></svg>',title:"interface-checked-small",tags:"nordicon interface checked small symbol checkmark done ready"});var f=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M129.5 80.5h-119a10.5 10.5 0 0 1 0-21h119a10.5 10.5 0 0 1 0 21z"/></svg>',title:"interface-remove-small",tags:"nordicon interface remove small delete erase minimize line"});const k=o`:host{--_n-checkbox-size:calc(var(--n-space-m) * 1.25);--_n-checkbox-accent-color:var(--n-color-accent);--_n-checkbox-border-color:var(--n-color-border-hover);display:inline-block}.n-flex{display:flex}.n-expand{flex:1}.n-input-container{position:relative}input{-moz-appearance:none;-webkit-appearance:none;appearance:none;border:1px solid var(--_n-checkbox-border-color);border-radius:var(--n-border-radius-s);display:block;inline-size:var(--_n-checkbox-size);block-size:var(--_n-checkbox-size);cursor:pointer}input:checked,input:indeterminate{--_n-checkbox-border-color:var(--n-color-accent);background:var(--_n-checkbox-accent-color)}input[aria-invalid]{--_n-checkbox-accent-color:var(--n-color-status-danger);--_n-checkbox-border-color:var(--_n-checkbox-accent-color)}input:focus-visible{outline:0!important}input:focus{outline:0!important;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)}input:active{opacity:.8}:host([disabled]) label{color:var(--n-color-text-weaker);cursor:default}:host([disabled]) input{--_n-checkbox-accent-color:var(--n-color-border-strong);--_n-checkbox-border-color:var(--_n-checkbox-accent-color);background:var(--_n-checkbox-accent-color);cursor:default;opacity:1}nord-icon{display:none;position:absolute;color:var(--n-color-text-on-accent);inset:calc(var(--n-space-s)/ 2);z-index:var(--n-index-default);pointer-events:none}input:checked~.icon-checked,input:indeterminate~.icon-indeterminate{display:block}.n-label-container{padding-block-end:0}label{-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-form);padding-inline-start:var(--n-space-s);cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:calc(var(--n-space-s)/ 2);padding-inline-start:var(--n-space-s)}:host([size="s"]){--_n-checkbox-size:var(--n-space-m)}:host([size="s"]) nord-icon{inset:calc(var(--n-space-s)/ 2.6)}:host([size="s"]) .n-label-container{transform:translateY(-2px)}:host([size="l"]){--_n-checkbox-size:var(--n-space-l)}`;s.registerIcon(u),s.registerIcon(f);let x=class extends(h(d(p(l(i))))){constructor(){super(...arguments),this.indeterminate=!1,this.checked=!1}get formValue(){return this.checked?this.value||"on":void 0}render(){const e=m[this.size]||m.m;return r`<div class="n-flex"><div class="n-input-container"><input ${c(this.focusableRef)} class="n-input" id="${this.inputId}" type="checkbox" name="${a(this.name)}" .value="${this.value}" .checked="${this.checked}" .indeterminate="${this.indeterminate}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" @change="${this.handleChange}"><nord-icon class="icon-checked" name="interface-checked-small" size="${e}"></nord-icon><nord-icon class="icon-indeterminate" name="interface-remove-small" size="${e}"></nord-icon></div><div class="n-expand">${this.renderLabel()} ${this.renderError()}</div></div>`}handleChange(e){const n=e.target;this.checked=n.checked,super.handleChange(e)}};x.styles=[b,v,k],e([t({type:Boolean})],x.prototype,"indeterminate",void 0),e([t({type:Boolean})],x.prototype,"checked",void 0),x=e([n("nord-checkbox")],x);var g=x;export{g as default};
|
|
2
2
|
//# sourceMappingURL=Checkbox.js.map
|
package/lib/DatePicker.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,e as t}from"./query-assigned-elements-e6cbac30.js";import{i,y as a,b as o,s as n}from"./lit-element-9178eae5.js";import{e as r}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{i as l}from"./query-2d22378e.js";import{o as d}from"./class-map-949b7d3b.js";import{n as c}from"./ref-0e619221.js";import{l as p}from"./if-defined-4598a996.js";import{c as m}from"./interface-close-small-44ababc3.js";import{F as h}from"./FocusableMixin-34870ed3.js";import{F as u}from"./FormAssociatedMixin-0d57fdc8.js";import{I as b}from"./InputMixin-158f63fb.js";import{m as v,p as g,a as f}from"./dates-a8de5b83.js";import{N as y}from"./events-731d0007.js";import{S as x,i as w}from"./Calendar-1904bf2f.js";import{L as j}from"./LightDismissController-a2645ae6.js";import{LocalizeController as k}from"./LocalizeController.js";import"./Button.js";import z from"./Icon.js";import"./VisuallyHidden.js";import{s as $}from"./Component-92eb6234.js";import{s as D}from"./FormField-081da729.js";import{R as F,s as C}from"./TextField-a7382912.js";import{isoAdapter as L}from"./date-adapter.js";import{c as S}from"./cond-338158e9.js";import{S as A,i as E}from"./SizeMixin-4559b224.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-89834aef.js";import"./repeat-ae6f075f.js";import"./tinykeys.module-84e6cc41.js";import"./DirectionController-8b298382.js";import"./number-c3ab3e95.js";import"./observe-a9c6dfb6.js";import"./month-view.js";import"./collection-800f5002.js";import"./DateSelectEvent.js";import"./ShortcutController-87615e31.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./LightDomController-3c726b20.js";import"./Spinner.js";import"./unsafe-html-6be42999.js";var B=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 21h126v112H7zM35 7v28m70-28v28M7 63h126" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>',title:"interface-calendar",tags:"nordicon interface calendar date time day week month year"});const I=i`:host{--_n-date-picker-toggle-block-size:calc(100% - 2px);color:var(--n-color-text);position:relative}.n-date-toggle{-webkit-appearance:none;appearance:none;min-block-size:var(--_n-date-picker-toggle-block-size);border-start-end-radius:var(--n-border-radius-s);border-end-end-radius:var(--n-border-radius-s);box-shadow:var(--n-box-shadow),var(--n-box-shadow);padding:1px calc(var(--n-space-m)/ 1.5) 0;color:var(--n-color-icon);cursor:pointer;background:var(--n-color-button);position:absolute;inset-inline-end:1px;inset-block-start:1px;border:0;border-inline-start:1px solid var(--n-color-border-strong);transition:color var(--n-transition-slowly),background var(--n-transition-slowly)}@media (max-width:35.9375em){.n-date-toggle{padding-block-start:0}}.n-date-toggle:hover{color:var(--n-color-icon-hover)}.n-date-toggle:focus{border:0;box-shadow:0 0 0 2px var(--n-color-accent);outline:0}.n-date-toggle:active{opacity:.8}.n-date-toggle:disabled{box-shadow:none;background:0 0;border:0;color:var(--n-color-text-weakest);cursor:default}.n-date-toggle::after{content:"";position:absolute;background:0 0;background-image:linear-gradient(to bottom,rgba(0,0,0,0) 50%,rgba(0,0,0,.013) 100%);background-repeat:repeat-x;inline-size:100%;inset-inline:0;block-size:100%;inset-block-start:0}.n-input-container .n-input{padding-inline-end:calc(var(--n-space-xl) * 1.25)}[role=dialog]{display:flex;font-feature-settings:var(--n-font-features-reduced);opacity:0;position:absolute;inset-block-start:100%;inset-inline-start:0;transform:scale(.98) translateZ(0) translateY(-10px);transform-origin:top right;transition:transform var(--n-transition-slowly),opacity var(--n-transition-slowly),visibility var(--n-transition-slowly);visibility:hidden;will-change:transform,opacity,visibility;z-index:var(--n-index-popout)}@media (max-width:35.9375em){[role=dialog]{inset-block:0;position:fixed;inline-size:100%;inset-inline-end:0;min-inline-size:320px;transform:translateZ(0);transform-origin:bottom center}.n-date-dialog-content{box-shadow:var(--n-box-shadow-modal)}}[role=dialog].is-left{inset-inline:auto 0;inline-size:auto}[role=dialog][aria-hidden=false]{transition-property:transform,opacity;opacity:1;transform:scale(1.0001) translateZ(0) translateY(0);visibility:visible}.n-date-dialog-content{margin-inline-start:auto;margin-block-start:8px;position:relative;transform:none;z-index:var(--n-index-popout)}nord-calendar{--n-calendar-box-shadow:var(--n-box-shadow-popup)}@media (max-width:35.9375em){.n-date-dialog-content{background:var(--n-color-background);border:0;border-radius:0;border-start-start-radius:var(--n-border-radius-s);border-start-end-radius:var(--n-border-radius-s);inset-block-end:0;inset-inline-start:0;inline-size:100%;margin:0;max-inline-size:none;min-block-size:26em;opacity:0;padding:0 8% 20px;position:absolute;transform:translateZ(0) translateY(100%);transition:transform var(--n-transition-mobile),opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);visibility:hidden;will-change:transform,opacity,visibility}[role=dialog][aria-hidden=false] .n-date-dialog-content{opacity:1;transform:translateZ(0) translateY(0);visibility:visible}nord-calendar{--n-calendar-box-shadow:none;--_n-calendar-padding:0;--_n-calendar-inline-size:100%}}.n-date-header{align-items:center;display:flex;justify-content:space-between;margin-block-end:16px;inline-size:100%}.n-date-mobile{align-items:center;border-block-end:1px solid rgba(0,0,0,.12);display:flex;justify-content:space-between;margin-block-end:20px;margin-inline-start:-10%;overflow:hidden;padding:12px 20px;position:relative;text-overflow:ellipsis;white-space:nowrap;inline-size:120%}@media (min-width:36em){.n-date-mobile{border:0;margin:0;overflow:visible;padding:0;position:absolute;inset-inline-end:-8px;inset-block-start:-8px;inline-size:auto}}.n-date-mobile-heading{display:inline-block;font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-active);max-inline-size:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width:36em){.n-date-mobile-heading{display:none}}.n-date-close{-webkit-appearance:none;align-items:center;appearance:none;background:var(--n-color-background);border:0;border-radius:var(--n-border-radius);color:var(--n-color-text);cursor:pointer;display:flex;block-size:var(--n-size-icon-l);inline-size:var(--n-size-icon-l);justify-content:center;padding:0}@media (min-width:36em){.n-date-close{opacity:0}}.n-date-close:focus{box-shadow:0 0 0 2px var(--n-color-accent);outline:0}@media (min-width:36em){.n-date-close:focus{opacity:1}}.n-date-close svg{margin:0 auto}:host([size="s"]) .n-input-container .n-input{padding-inline-end:var(--n-space-xl)}:host([size="l"]) .n-date-toggle{padding-inline-start:var(--n-space-m);padding-inline-end:var(--n-space-m)}:host([size="l"]) .n-input-container .n-input{padding-inline-end:var(--n-space-xxl)}`;z.registerIcon(B),z.registerIcon(m);const _=/[^0-9./-]+/g,M=()=>!1;let O=class extends(A(u(F(b(h(n)))))){constructor(){super(...arguments),this.dismiss=new j(this,{isOpen:()=>this.open,onDismiss:e=>this.hide("click"!==e.type),isDismissible:e=>e!==this.calendar&&e!==this.toggleButton}),this.swipe=new x(this,{target:()=>this.dialog,matchesGesture:w,onSwipeEnd:()=>this.hide(!1)}),this.localize=new k(this,{onLangChange:()=>this.createDateFormatters()}),this.open=!1,this.value="",this.min="",this.max="",this.direction="right",this.firstDayOfWeek=1,this.dateAdapter=L,this.isDateDisabled=M,this.handleDaySelect=e=>{e.stopPropagation(),this.setValue(e.date),this.hide()},this.toggleOpen=e=>{e.preventDefault(),this.open?this.hide(!1):this.show()},this.handleBlur=e=>{e.stopPropagation(),this.dispatchEvent(new y("blur"))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new y("focus"))},this.handleInputChange=e=>{const t=e.target;!function(e,t){const{value:i}=e,a=e.selectionStart,o=i.slice(0,a),n=i.slice(a,i.length),r=o.replace(t,""),s=r+n.replace(t,""),l=r.length;e.value=s,e.selectionStart=l,e.selectionEnd=l}(t,_),this.dispatchEvent(new y("input"));const i=this.dateAdapter.parse(t.value,v);(i||""===t.value)&&this.setValue(i)}}get valueAsDate(){return g(this.value)}set valueAsDate(e){this.value=e?f(e):""}get valueAsNumber(){var e,t;return null!==(t=null===(e=this.valueAsDate)||void 0===e?void 0:e.getTime())&&void 0!==t?t:NaN}set valueAsNumber(e){this.value=e?f(new Date(e)):""}show(){this.open=!0,this.dispatchEvent(new y("open")),this.updateComplete.then((()=>this.calendar.focus({target:"month"})))}hide(e=!0){this.open=!1,this.dispatchEvent(new y("close")),e&&this.toggleButton.focus()}render(){const{valueAsDate:e}=this,t=e?this.dateAdapter.format(e):"",i=E[this.size]||E.m;return a`${this.renderLabel()}<div class="n-input-container"><input class="n-input" name="${p(this.name)}" .value="${t}" placeholder="${p(this.placeholder)}" id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" aria-autocomplete="none" @input="${this.handleInputChange}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" autocomplete="off" ${c(this.focusableRef)} aria-invalid="${S(this.error,"true")}" aria-describedby="${p(this.getDescribedBy())}" ?readonly="${this.readonly}"> <button class="n-date-toggle" @click="${this.toggleOpen}" ?disabled="${this.disabled||this.readonly}" type="button"><nord-icon name="interface-calendar" size="${i}"></nord-icon><nord-visually-hidden>${this.localize.term("buttonLabel")} ${e?a`<span>, ${this.localize.term("selectedDateMessage")} ${this.dateFormatLong.format(e)}</span>`:o}</nord-visually-hidden></button></div>${this.renderError()}<div class="${d({"is-left":"left"===this.direction,"is-active":this.open})}" role="dialog" aria-modal="true" aria-hidden="${this.open?"false":"true"}" aria-labelledby="dialog-header"><div class="n-date-dialog-content"><div aria-hidden="true" tabindex="0" @focus="${this.focusLast}"></div><div class="n-date-mobile"><div class="n-date-mobile-heading" id="dialog-header">${this.localize.term("modalHeading")}</div><button class="n-date-close" @click="${this.hide}" type="button"><nord-icon color="var(--n-color-icon)" name="interface-close-small" size="xs"></nord-icon><nord-visually-hidden>${this.localize.term("closeLabel")}</nord-visually-hidden></button></div><nord-calendar value="${this.value}" min="${this.min}" max="${this.max}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" @change="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></div></div>`}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"})}setValue(e){this.value=e?f(e):"",this.dispatchEvent(new y("change"))}};O.styles=[$,D,C,I],e([l(".n-date-toggle",!0)],O.prototype,"toggleButton",void 0),e([l(".n-date-close",!0)],O.prototype,"closeButton",void 0),e([l("nord-calendar",!0)],O.prototype,"calendar",void 0),e([l('[role="dialog"]',!0)],O.prototype,"dialog",void 0),e([s()],O.prototype,"open",void 0),e([r()],O.prototype,"value",void 0),e([r()],O.prototype,"min",void 0),e([r()],O.prototype,"max",void 0),e([r()],O.prototype,"direction",void 0),e([r({attribute:"first-day-of-week",type:Number})],O.prototype,"firstDayOfWeek",void 0),e([r({attribute:!1})],O.prototype,"dateAdapter",void 0),e([r({attribute:!1})],O.prototype,"isDateDisabled",void 0),O=e([t("nord-date-picker")],O);var N=O;export{N as default};
|
|
1
|
+
import{_ as e,e as t}from"./query-assigned-elements-e6cbac30.js";import{i,y as a,b as o,s as n}from"./lit-element-9178eae5.js";import{e as r}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{i as l}from"./query-2d22378e.js";import{o as d}from"./class-map-949b7d3b.js";import{n as c}from"./ref-0e619221.js";import{l as p}from"./if-defined-4598a996.js";import{c as m}from"./interface-close-small-44ababc3.js";import{F as h}from"./FocusableMixin-34870ed3.js";import{F as u}from"./FormAssociatedMixin-252fb0e9.js";import{I as b}from"./InputMixin-158f63fb.js";import{m as v,p as g,a as f}from"./dates-a8de5b83.js";import{N as y}from"./events-731d0007.js";import{S as x,i as w}from"./Calendar-1904bf2f.js";import{L as j}from"./LightDismissController-a2645ae6.js";import{LocalizeController as k}from"./LocalizeController.js";import"./Button.js";import z from"./Icon.js";import"./VisuallyHidden.js";import{s as $}from"./Component-92eb6234.js";import{s as D}from"./FormField-081da729.js";import{R as F,s as C}from"./TextField-a7382912.js";import{isoAdapter as L}from"./date-adapter.js";import{c as S}from"./cond-338158e9.js";import{S as A,i as E}from"./SizeMixin-4559b224.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-89834aef.js";import"./repeat-ae6f075f.js";import"./tinykeys.module-84e6cc41.js";import"./DirectionController-8b298382.js";import"./number-c3ab3e95.js";import"./observe-a9c6dfb6.js";import"./month-view.js";import"./collection-800f5002.js";import"./DateSelectEvent.js";import"./ShortcutController-87615e31.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./LightDomController-3c726b20.js";import"./Spinner.js";import"./unsafe-html-6be42999.js";var B=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 21h126v112H7zM35 7v28m70-28v28M7 63h126" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>',title:"interface-calendar",tags:"nordicon interface calendar date time day week month year"});const I=i`:host{--_n-date-picker-toggle-block-size:calc(100% - 2px);color:var(--n-color-text);position:relative}.n-date-toggle{-webkit-appearance:none;appearance:none;min-block-size:var(--_n-date-picker-toggle-block-size);border-start-end-radius:var(--n-border-radius-s);border-end-end-radius:var(--n-border-radius-s);box-shadow:var(--n-box-shadow),var(--n-box-shadow);padding:1px calc(var(--n-space-m)/ 1.5) 0;color:var(--n-color-icon);cursor:pointer;background:var(--n-color-button);position:absolute;inset-inline-end:1px;inset-block-start:1px;border:0;border-inline-start:1px solid var(--n-color-border-strong);transition:color var(--n-transition-slowly),background var(--n-transition-slowly)}@media (max-width:35.9375em){.n-date-toggle{padding-block-start:0}}.n-date-toggle:hover{color:var(--n-color-icon-hover)}.n-date-toggle:focus{border:0;box-shadow:0 0 0 2px var(--n-color-accent);outline:0}.n-date-toggle:active{opacity:.8}.n-date-toggle:disabled{box-shadow:none;background:0 0;border:0;color:var(--n-color-text-weakest);cursor:default}.n-date-toggle::after{content:"";position:absolute;background:0 0;background-image:linear-gradient(to bottom,rgba(0,0,0,0) 50%,rgba(0,0,0,.013) 100%);background-repeat:repeat-x;inline-size:100%;inset-inline:0;block-size:100%;inset-block-start:0}.n-input-container .n-input{padding-inline-end:calc(var(--n-space-xl) * 1.25)}[role=dialog]{display:flex;font-feature-settings:var(--n-font-features-reduced);opacity:0;position:absolute;inset-block-start:100%;inset-inline-start:0;transform:scale(.98) translateZ(0) translateY(-10px);transform-origin:top right;transition:transform var(--n-transition-slowly),opacity var(--n-transition-slowly),visibility var(--n-transition-slowly);visibility:hidden;will-change:transform,opacity,visibility;z-index:var(--n-index-popout)}@media (max-width:35.9375em){[role=dialog]{inset-block:0;position:fixed;inline-size:100%;inset-inline-end:0;min-inline-size:320px;transform:translateZ(0);transform-origin:bottom center}.n-date-dialog-content{box-shadow:var(--n-box-shadow-modal)}}[role=dialog].is-left{inset-inline:auto 0;inline-size:auto}[role=dialog][aria-hidden=false]{transition-property:transform,opacity;opacity:1;transform:scale(1.0001) translateZ(0) translateY(0);visibility:visible}.n-date-dialog-content{margin-inline-start:auto;margin-block-start:8px;position:relative;transform:none;z-index:var(--n-index-popout)}nord-calendar{--n-calendar-box-shadow:var(--n-box-shadow-popup)}@media (max-width:35.9375em){.n-date-dialog-content{background:var(--n-color-background);border:0;border-radius:0;border-start-start-radius:var(--n-border-radius-s);border-start-end-radius:var(--n-border-radius-s);inset-block-end:0;inset-inline-start:0;inline-size:100%;margin:0;max-inline-size:none;min-block-size:26em;opacity:0;padding:0 8% 20px;position:absolute;transform:translateZ(0) translateY(100%);transition:transform var(--n-transition-mobile),opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);visibility:hidden;will-change:transform,opacity,visibility}[role=dialog][aria-hidden=false] .n-date-dialog-content{opacity:1;transform:translateZ(0) translateY(0);visibility:visible}nord-calendar{--n-calendar-box-shadow:none;--_n-calendar-padding:0;--_n-calendar-inline-size:100%}}.n-date-header{align-items:center;display:flex;justify-content:space-between;margin-block-end:16px;inline-size:100%}.n-date-mobile{align-items:center;border-block-end:1px solid rgba(0,0,0,.12);display:flex;justify-content:space-between;margin-block-end:20px;margin-inline-start:-10%;overflow:hidden;padding:12px 20px;position:relative;text-overflow:ellipsis;white-space:nowrap;inline-size:120%}@media (min-width:36em){.n-date-mobile{border:0;margin:0;overflow:visible;padding:0;position:absolute;inset-inline-end:-8px;inset-block-start:-8px;inline-size:auto}}.n-date-mobile-heading{display:inline-block;font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-active);max-inline-size:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width:36em){.n-date-mobile-heading{display:none}}.n-date-close{-webkit-appearance:none;align-items:center;appearance:none;background:var(--n-color-background);border:0;border-radius:var(--n-border-radius);color:var(--n-color-text);cursor:pointer;display:flex;block-size:var(--n-size-icon-l);inline-size:var(--n-size-icon-l);justify-content:center;padding:0}@media (min-width:36em){.n-date-close{opacity:0}}.n-date-close:focus{box-shadow:0 0 0 2px var(--n-color-accent);outline:0}@media (min-width:36em){.n-date-close:focus{opacity:1}}.n-date-close svg{margin:0 auto}:host([size="s"]) .n-input-container .n-input{padding-inline-end:var(--n-space-xl)}:host([size="l"]) .n-date-toggle{padding-inline-start:var(--n-space-m);padding-inline-end:var(--n-space-m)}:host([size="l"]) .n-input-container .n-input{padding-inline-end:var(--n-space-xxl)}`;z.registerIcon(B),z.registerIcon(m);const _=/[^0-9./-]+/g,M=()=>!1;let O=class extends(A(u(F(b(h(n)))))){constructor(){super(...arguments),this.dismiss=new j(this,{isOpen:()=>this.open,onDismiss:e=>this.hide("click"!==e.type),isDismissible:e=>e!==this.calendar&&e!==this.toggleButton}),this.swipe=new x(this,{target:()=>this.dialog,matchesGesture:w,onSwipeEnd:()=>this.hide(!1)}),this.localize=new k(this,{onLangChange:()=>this.createDateFormatters()}),this.open=!1,this.value="",this.min="",this.max="",this.direction="right",this.firstDayOfWeek=1,this.dateAdapter=L,this.isDateDisabled=M,this.handleDaySelect=e=>{e.stopPropagation(),this.setValue(e.date),this.hide()},this.toggleOpen=e=>{e.preventDefault(),this.open?this.hide(!1):this.show()},this.handleBlur=e=>{e.stopPropagation(),this.dispatchEvent(new y("blur"))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new y("focus"))},this.handleInputChange=e=>{const t=e.target;!function(e,t){const{value:i}=e,a=e.selectionStart,o=i.slice(0,a),n=i.slice(a,i.length),r=o.replace(t,""),s=r+n.replace(t,""),l=r.length;e.value=s,e.selectionStart=l,e.selectionEnd=l}(t,_),this.dispatchEvent(new y("input"));const i=this.dateAdapter.parse(t.value,v);(i||""===t.value)&&this.setValue(i)}}get valueAsDate(){return g(this.value)}set valueAsDate(e){this.value=e?f(e):""}get valueAsNumber(){var e,t;return null!==(t=null===(e=this.valueAsDate)||void 0===e?void 0:e.getTime())&&void 0!==t?t:NaN}set valueAsNumber(e){this.value=e?f(new Date(e)):""}show(){this.open=!0,this.dispatchEvent(new y("open")),this.updateComplete.then((()=>this.calendar.focus({target:"month"})))}hide(e=!0){this.open=!1,this.dispatchEvent(new y("close")),e&&this.toggleButton.focus()}render(){const{valueAsDate:e}=this,t=e?this.dateAdapter.format(e):"",i=E[this.size]||E.m;return a`${this.renderLabel()}<div class="n-input-container"><input class="n-input" name="${p(this.name)}" .value="${t}" placeholder="${p(this.placeholder)}" id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" aria-autocomplete="none" @input="${this.handleInputChange}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" autocomplete="off" ${c(this.focusableRef)} aria-invalid="${S(this.error,"true")}" aria-describedby="${p(this.getDescribedBy())}" ?readonly="${this.readonly}"> <button class="n-date-toggle" @click="${this.toggleOpen}" ?disabled="${this.disabled||this.readonly}" type="button"><nord-icon name="interface-calendar" size="${i}"></nord-icon><nord-visually-hidden>${this.localize.term("buttonLabel")} ${e?a`<span>, ${this.localize.term("selectedDateMessage")} ${this.dateFormatLong.format(e)}</span>`:o}</nord-visually-hidden></button></div>${this.renderError()}<div class="${d({"is-left":"left"===this.direction,"is-active":this.open})}" role="dialog" aria-modal="true" aria-hidden="${this.open?"false":"true"}" aria-labelledby="dialog-header"><div class="n-date-dialog-content"><div aria-hidden="true" tabindex="0" @focus="${this.focusLast}"></div><div class="n-date-mobile"><div class="n-date-mobile-heading" id="dialog-header">${this.localize.term("modalHeading")}</div><button class="n-date-close" @click="${this.hide}" type="button"><nord-icon color="var(--n-color-icon)" name="interface-close-small" size="xs"></nord-icon><nord-visually-hidden>${this.localize.term("closeLabel")}</nord-visually-hidden></button></div><nord-calendar value="${this.value}" min="${this.min}" max="${this.max}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" @change="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></div></div>`}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"})}setValue(e){this.value=e?f(e):"",this.dispatchEvent(new y("change"))}};O.styles=[$,D,C,I],e([l(".n-date-toggle",!0)],O.prototype,"toggleButton",void 0),e([l(".n-date-close",!0)],O.prototype,"closeButton",void 0),e([l("nord-calendar",!0)],O.prototype,"calendar",void 0),e([l('[role="dialog"]',!0)],O.prototype,"dialog",void 0),e([s()],O.prototype,"open",void 0),e([r()],O.prototype,"value",void 0),e([r()],O.prototype,"min",void 0),e([r()],O.prototype,"max",void 0),e([r()],O.prototype,"direction",void 0),e([r({attribute:"first-day-of-week",type:Number})],O.prototype,"firstDayOfWeek",void 0),e([r({attribute:!1})],O.prototype,"dateAdapter",void 0),e([r({attribute:!1})],O.prototype,"isDateDisabled",void 0),O=e([t("nord-date-picker")],O);var N=O;export{N as default};
|
|
2
2
|
//# sourceMappingURL=DatePicker.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{_ as t}from"./query-assigned-elements-e6cbac30.js";import{y as e}from"./lit-element-9178eae5.js";import{e as r}from"./property-03f59dce.js";import{E as i}from"./EventController-d99ebeef.js";import{S as o}from"./SlotController-89834aef.js";import{N as s}from"./events-731d0007.js";import"./VisuallyHidden.js";class n{constructor(t,e){this.host=t,this.options=e,this.handleFormData=t=>{const{disabled:e,name:r}=this.host;if(e)return;const i=this.options.value();r&&null!=i&&t.formData.append(r,i)},t.addController(this),this.events=new i(t)}hostConnected(){this.host.form&&this.events.listen(this.host.form,"formdata",this.handleFormData)}}function h(i){class h extends i{constructor(){super(...arguments),this.labelSlot=new o(this,"label"),this.errorSlot=new o(this,"error"),this.hintSlot=new o(this,"hint"),this.formData=new n(this,{value:()=>this.formValue}),this.inputId="input",this.errorId="error",this.hintId="hint",this.label="",this.hideLabel=!1,this.required=!1}get formValue(){return this.value}handleInput(t){t.stopPropagation();const e=t.target;this.value=e.value,this.dispatchEvent(new s("input"))}handleChange(t){t.stopPropagation(),this.dispatchEvent(new s("change"))}renderLabel(t){const r=e`<label for="${this.inputId}"><slot name="label">${this.label}</slot>${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),h}export{h as F};
|
|
2
|
+
//# sourceMappingURL=FormAssociatedMixin-252fb0e9.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FormAssociatedMixin-252fb0e9.js","sources":["../src/common/controllers/FormDataController.ts","../src/common/mixins/FormAssociatedMixin.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { InputMixinInterface } from \"../mixins/InputMixin.js\"\nimport { EventController } from \"./EventController.js\"\n\ntype FormDataOptions = {\n value: () => string | undefined\n}\n\nexport class FormDataController implements ReactiveController {\n private events: EventController\n constructor(private host: ReactiveControllerHost & InputMixinInterface, private options: FormDataOptions) {\n host.addController(this)\n this.events = new EventController(host)\n }\n\n hostConnected() {\n if (this.host.form) {\n this.events.listen(this.host.form, \"formdata\", this.handleFormData)\n }\n }\n\n private handleFormData = (e: FormDataEvent) => {\n const { disabled, name } = this.host\n\n if (disabled) {\n return\n }\n\n const value = this.options.value()\n\n if (name && 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 hint?: string\n hideLabel: boolean\n placeholder?: string\n error?: string\n expand: boolean\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 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 ${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","handleFormData","e","disabled","name","value","formData","append","addController","events","EventController","hostConnected","form","listen","FormAssociatedMixin","superClass","FormAssociatedElement","labelSlot","SlotController","errorSlot","hintSlot","formValue","inputId","errorId","hintId","label","hideLabel","required","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":"iUAQaA,EAEXC,YAAoBC,EAA4DC,GAA5DC,KAAIF,KAAJA,EAA4DE,KAAOD,QAAPA,EAWxEC,KAAAC,eAAkBC,IACxB,MAAMC,SAAEA,EAAQC,KAAEA,GAASJ,KAAKF,KAEhC,GAAIK,EACF,OAGF,MAAME,EAAQL,KAAKD,QAAQM,QAEvBD,GAAiB,MAATC,GACVH,EAAEI,SAASC,OAAOH,EAAMC,EACzB,EArBDP,EAAKU,cAAcR,MACnBA,KAAKS,OAAS,IAAIC,EAAgBZ,EACnC,CAEDa,gBACMX,KAAKF,KAAKc,MACZZ,KAAKS,OAAOI,OAAOb,KAAKF,KAAKc,KAAM,WAAYZ,KAAKC,eAEvD,ECsBG,SAAUa,EAA6EC,GAQ3F,MAAMC,UAA8BD,EAApClB,kCACYG,KAASiB,UAAG,IAAIC,EAAelB,KAAM,SACrCA,KAASmB,UAAG,IAAID,EAAelB,KAAM,SACrCA,KAAQoB,SAAG,IAAIF,EAAelB,KAAM,QACpCA,KAAAM,SAAW,IAAIV,EAAmBI,KAAM,CAAEK,MAAO,IAAML,KAAKqB,YAM5DrB,KAAOsB,QAAG,QACVtB,KAAOuB,QAAG,QACVvB,KAAMwB,OAAG,OAKPxB,KAAKyB,MAAW,GAU0BzB,KAAS0B,WAAG,EAiBrC1B,KAAQ2B,UAAG,CA0EzC,CAhHeN,gBACZ,OAAOrB,KAAKK,KACb,CAsCSuB,YAAY1B,GACpBA,EAAE2B,kBACF,MAAMC,EAAS5B,EAAE4B,OACjB9B,KAAKK,MAAQyB,EAAOzB,MAKpBL,KAAK+B,cAAc,IAAIC,EAAU,SAClC,CAESC,aAAa/B,GACrBA,EAAE2B,kBAKF7B,KAAK+B,cAAc,IAAIC,EAAU,UAClC,CAESE,YAAYC,GACpB,MAAMV,EAAQW,CAAI,eACHpC,KAAKsB,+BACKtB,KAAKyB,eACxBU,8CAG+BnC,KAAKwB,qBAAmBxB,KAAKqC,8BAC1CrC,KAAKsC,oBAI7B,OAAOtC,KAAK0B,UACRU,CAAI,yBAAyBX,2BAC7BW,CAAI,kCAAkCX,SAC3C,CAESc,cACR,OAAOH,CAAI,sCAC2BpC,KAAKuB,mCAAiCvB,KAAKwC,gCACxDxC,KAAKyC,oBAG/B,CAESC,iBACR,MAAML,QAAEA,EAAOG,SAAEA,GAAaxC,KAE9B,OAAIqC,GAAWG,EACN,GAAGxC,KAAKwB,UAAUxB,KAAKuB,UAE5Bc,EACKrC,KAAKwB,OAEVgB,EACKxC,KAAKuB,aADd,CAKD,CAESoB,aACR,OAAO3C,KAAKwC,SAAW,YAASI,CACjC,CAEaP,cACZ,OAAOQ,QAAQ7C,KAAKsC,OAAStC,KAAKoB,SAAS0B,UAC5C,CAEaN,eACZ,OAAOK,QAAQ7C,KAAKyC,QAAUzC,KAAKmB,UAAU2B,UAC9C,EAGH,OAvGcC,EAAA,CAAXC,KAA6BhC,EAAAiC,UAAA,aAAA,GAKlBF,EAAA,CAAXC,KAAwBhC,EAAAiC,UAAA,YAAA,GAK6BF,EAAA,CAArDC,EAAS,CAAEE,KAAML,QAASM,UAAW,gBAAiCnC,EAAAiC,UAAA,iBAAA,GAK3DF,EAAA,CAAXC,KAA+BhC,EAAAiC,UAAA,mBAAA,GAKpBF,EAAA,CAAXC,KAAyBhC,EAAAiC,UAAA,aAAA,GAOGF,EAAA,CAA5BC,EAAS,CAAEE,KAAML,WAA2B7B,EAAAiC,UAAA,gBAAA,GA4ExCjC,CACT"}
|
package/lib/Input.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,e as t}from"./query-assigned-elements-e6cbac30.js";import{i as s,b as n,y as i,s as o}from"./lit-element-9178eae5.js";import{e as r}from"./property-03f59dce.js";import{l as a}from"./if-defined-4598a996.js";import{o as l}from"./class-map-949b7d3b.js";import{n as d}from"./ref-0e619221.js";import{o as p}from"./unsafe-html-6be42999.js";import{F as m}from"./FocusableMixin-34870ed3.js";import{F as c}from"./FormAssociatedMixin-
|
|
1
|
+
import{_ as e,e as t}from"./query-assigned-elements-e6cbac30.js";import{i as s,b as n,y as i,s as o}from"./lit-element-9178eae5.js";import{e as r}from"./property-03f59dce.js";import{l as a}from"./if-defined-4598a996.js";import{o as l}from"./class-map-949b7d3b.js";import{n as d}from"./ref-0e619221.js";import{o as p}from"./unsafe-html-6be42999.js";import{F as m}from"./FocusableMixin-34870ed3.js";import{F as c}from"./FormAssociatedMixin-252fb0e9.js";import{I as h}from"./InputMixin-158f63fb.js";import{R as u,s as f}from"./TextField-a7382912.js";import{A as v}from"./AutocompleteMixin-370de2be.js";import{S as b}from"./SizeMixin-4559b224.js";import{s as y}from"./Component-92eb6234.js";import{s as $}from"./FormField-081da729.js";import{S as j}from"./SlotController-89834aef.js";import{c as g}from"./cond-338158e9.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const x=s`.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)}slot[name=end],slot[name=start]{display:flex;align-items:center;position:absolute;margin-inline-start:var(--n-space-m);block-size:100%;pointer-events:none;inset-block-start:0;color:var(--n-color-icon)}slot[name=end]{inset-inline-end:var(--n-space-m)}.has-start .n-input{padding-inline-start:var(--n-space-xl)}.n-input-container.has-end .n-input{padding-inline-end:calc(var(--n-space-xl) + var(--n-space-s))}::slotted(svg),svg{block-size:var(--n-size-icon-s)!important;inline-size:var(--n-size-icon-s)!important}:host([size="s"]) :is(slot[name=start],slot[name=end]){margin-inline-start:var(--n-space-s)}:host([size="s"]) .has-start .n-input{padding-inline-start:var(--n-space-l)}`;let k=class extends(b(c(v(u(h(m(o))))))){constructor(){super(...arguments),this.startSlot=new j(this,"start"),this.endSlot=new j(this,"end"),this.type="text",this.expand=!1}render(){var e;const t="search"===this.type||this.startSlot.hasContent,s="number"===this.type,o="search"===this.type?p('<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 59.5a52.5 52.5 0 1 0 105 0 52.5 52.5 0 1 0-105 0zM133 133 96.628 96.628" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>'):n;return i`${this.renderLabel()}<div class="${l({"n-input-container":!0,"has-start":t,"has-end":this.endSlot.hasContent})}"><slot name="${this.startSlot.slotName}" ?hidden="${!t}">${o}</slot><input ${d(this.focusableRef)} id="${this.inputId}" class="n-input" type="${s?"text":this.type}" inputmode="${g(s,"numeric")}" pattern="${g(s,"[0-9]*")}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" name="${a(this.name)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${a(this.placeholder)}" @input="${this.handleInput}" @change="${this.handleChange}" @keydown="${this.handleKeydown}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" spellcheck="false" autocomplete="${this.autocomplete}"><slot name="${this.endSlot.slotName}" ?hidden="${this.endSlot.isEmpty}"></slot></div>${this.renderError()}`}handleKeydown(e){const{form:t}=this;if("Enter"===e.key&&t){const e=function(e){let t=e.querySelector('button[type="submit"]');!t&&e.id&&(t=e.getRootNode().querySelector(`button[form=${e.id}]`));return t}(t);setTimeout((()=>null==e?void 0:e.click()),0)}}};k.styles=[y,$,f,x],e([r()],k.prototype,"type",void 0),e([r({reflect:!0,type:Boolean})],k.prototype,"expand",void 0),k=e([t("nord-input")],k);var w=k;export{w as default};
|
|
2
2
|
//# sourceMappingURL=Input.js.map
|
package/lib/Layout.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,e as n}from"./query-assigned-elements-e6cbac30.js";import{i as t,s as a,y as i,b as o}from"./lit-element-9178eae5.js";import{e as s}from"./property-03f59dce.js";import{t as r}from"./state-70f38ceb.js";import{i as d}from"./query-2d22378e.js";import{o as l}from"./class-map-949b7d3b.js";import{D as h}from"./DirectionController-8b298382.js";import{E as p}from"./EventController-d99ebeef.js";import{L as c}from"./LightDismissController-a2645ae6.js";import{S as v}from"./SlotController-89834aef.js";import{o as u}from"./observe-a9c6dfb6.js";import{c as g}from"./cond-338158e9.js";import{f as m}from"./fsm-50373df9.js";import{c as b}from"./number-c3ab3e95.js";import"./NavToggle.js";import{s as y}from"./Component-92eb6234.js";import"./directive-de55b00a.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./ref-0e619221.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"./DraftComponentMixin-9e4b7b34.js";import"./FocusableMixin-34870ed3.js";import"./Button.js";import"./LightDomController-3c726b20.js";import"./Spinner.js";import"./if-defined-4598a996.js";import"./InputMixin-158f63fb.js";import"./Icon.js";import"./unsafe-html-6be42999.js";import"./VisuallyHidden.js";const w=t`: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-nav-transition-duration:var(--n-transition-mobile);background:var(--n-color-background);color:var(--n-color-text)}.n-layout-main,.n-layout-nav{background:var(--n-color-background);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)}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{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}: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{transition:transform var(--_n-layout-nav-transition-duration)}[data-screen=wide]:is([data-nav=peek],[data-nav=wait],[data-nav=unpeek],[data-nav=blocked]) .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] .n-layout-main{margin-inline-start:var(--_n-layout-nav-width)}.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-nav-toggle-container{position:absolute;padding:var(--n-space-m) var(--n-space-l);min-block-size:var(--n-space-xxl);display:flex;align-items:center}[data-screen=wide][data-nav=opened] .n-nav-toggle-container{display:none}:is([data-screen=wide]:not([data-nav=opened]),[data-screen=narrow]) .n-has-own-nav-toggle ::slotted(nord-header){--_n-header-gutter:calc(var(--n-space-l) * 3)}`,f=matchMedia("(min-width: 768px)"),k=function(e,n,t=JSON.stringify,a=JSON.parse){return{get value(){try{const t=localStorage.getItem(e);return t?a(t):n}catch(e){return n}},set value(n){try{localStorage.setItem(e,t(n))}catch(e){}}}}("nord-layout.navWidth",250),T=m({opened:{toggle:"closed",close:"closed"},closed:{toggle:"opened",open:"opened",focusin:"peek",pointerenter:"peek"},peek:{toggle:"opened",focusout:"unpeek",pointerleave:"wait",dropdownOpen:"blocked",click:"unpeek",open:"opened"},blocked:{dropdownClose:"peek",open:"opened"},wait:{toggle:"opened",focusin:"peek",pointerenter:"peek",timeout:"unpeek"},unpeek:{toggle:"opened",focusin:"peek",pointerenter:"peek",transitionend:"closed"}});let j=class extends a{constructor(){super(...arguments),this.navSlot=new v(this,"nav"),this.drawerSlot=new v(this,"drawer"),this.direction=new h(this),this.events=new p(this),this.lightDismiss=new c(this,{isOpen:()=>"opened"===this.navState&&!this.wideScreen,onDismiss:()=>this.navTransition("close"),isDismissible:e=>e!==this.navEl}),this.navWidth=k.value,this.isDragging=!1,this.navState=f.matches?"opened":"closed",this.wideScreen=f.matches,this.navOpen="opened"===this.navState,this.padding="m",this.handleMediaQueryChange=()=>{this.wideScreen=f.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")}}connectedCallback(){super.connectedCallback(),this.events.listen(f,"change",this.handleMediaQueryChange),this.events.listen(this,"click",(e=>{this.isNavToggle(e.target)&&this.handleToggleClick()})),this.events.listen(this,"mouseover",(e=>{this.isNavToggle(e.target)&&this.handleMouseEnter()})),this.events.listen(this,"mouseout",(e=>{this.isNavToggle(e.target)&&this.handleMouseLeave()}))}render(){const{navWidth:e,navState:n,navSlot:t,isDragging:a,direction:s}=this,r="opened"===n&&this.wideScreen?e:250,d=t.hasContent&&!this.navToggle;return i`<div class="${l({"n-layout":!0,"n-rtl":s.isRTL,"n-dragging":a})}" style="${`--_n-layout-nav-width: ${r}px`}" data-nav="${t.hasContent?n:"closed"}" data-screen="${this.wideScreen?"wide":"narrow"}"><div class="n-layout-nav" ?hidden="${t.isEmpty}" @focusin="${this.handleNavFocus}" @mouseenter="${this.handleMouseEnter}" @mouseleave="${this.handleMouseLeave}" @open="${this.handleDropdownOpen}" @close="${this.handleDropdownClose}"><slot name="nav"></slot><div class="n-resize" role="separator" aria-orientation="vertical" tabindex="0" @pointerdown="${g("opened"===n,this.startDragging)}" @pointermove="${g(a,this.handleDrag)}" @pointerleave="${this.stopDragging}" @pointerup="${this.stopDragging}" @keydown="${this.handleKeyboardResize}"></div></div><div class="${l({"n-layout-main":!0,"n-has-own-nav-toggle":d})}" @focusin="${this.handleMainFocus}" @click="${this.handleClick}">${d?this.renderNavToggle():o}<div class="${l({"n-has-drawer":this.drawerSlot.hasContent})}"><slot name="header"></slot><main><slot></slot></main></div><aside ?hidden="${this.drawerSlot.isEmpty}"><slot name="drawer"></slot></aside></div></div>`}renderNavToggle(){return i`<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>`}handleNavWidthChange(){k.value=this.navWidth}handleNavStateChange(e){switch("wait"===e&&this.peekTimeoutId&&clearTimeout(this.peekTimeoutId),"unpeek"===e&&this.navEl.removeEventListener("transitionend",this.handleTransitionEnd),this.navState){case"closed":this.navOpen=!1;break;case"opened":this.navOpen=!0;break;case"wait":this.peekTimeoutId=setTimeout((()=>this.navTransition("timeout")),300);break;case"unpeek":this.navEl.addEventListener("transitionend",this.handleTransitionEnd,{once:!0})}}handleOpenChange(){this.isDragging||this.setNavWidth(Math.max(this.navWidth,250)),this.navTransition(this.navOpen?"open":"close")}navTransition(e){this.navState=T.transition(this.navState,e)}handleClick(){this.navTransition("click")}handleDropdownOpen(e){"nord-dropdown"===e.target.localName&&this.navTransition("dropdownOpen")}handleDropdownClose(e){"nord-dropdown"===e.target.localName&&this.navTransition("dropdownClose")}isNavToggle(e){return Boolean(this.navToggle)&&(null!=(n=e)&&n.nodeType===Node.ELEMENT_NODE)&&e.id===this.navToggle;var n}handleKeyboardResize(e){const{navWidth:n,direction:{isLTR:t}}=this;switch(e.key){case"ArrowLeft":this.setNavWidth(n+(t?-30:30));break;case"ArrowRight":this.setNavWidth(n+(t?30:-30));break;case"Enter":this.navTransition("toggle");break;case"Home":this.setNavWidth(220);break;case"End":this.setNavWidth(400);break;default:return}e.preventDefault()}setNavWidth(e){this.navWidth=b(Math.round(e),220,400)}startDragging(e){if(0===e.button){e.target.setPointerCapture(e.pointerId),this.isDragging=!0}}stopDragging(){this.isDragging=!1}handleDrag(e){const n=this.direction.isRTL?this.clientWidth-e.clientX:e.clientX;this.setNavWidth(n),this.navTransition(n>=100?"open":"close")}};j.styles=[y,w],e([d(".n-layout-nav",!0)],j.prototype,"navEl",void 0),e([r()],j.prototype,"navWidth",void 0),e([r()],j.prototype,"isDragging",void 0),e([r()],j.prototype,"navState",void 0),e([r()],j.prototype,"wideScreen",void 0),e([s({reflect:!0,type:Boolean,attribute:"nav-open"})],j.prototype,"navOpen",void 0),e([s({attribute:"nav-toggle"})],j.prototype,"navToggle",void 0),e([s({reflect:!0})],j.prototype,"padding",void 0),e([u("navWidth","updated")],j.prototype,"handleNavWidthChange",null),e([u("navState")],j.prototype,"handleNavStateChange",null),e([u("navOpen","updated")],j.prototype,"handleOpenChange",null),j=e([n("nord-layout")],j);var x=j;export{x as default};
|
|
1
|
+
import{_ as e,e as n}from"./query-assigned-elements-e6cbac30.js";import{i as t,s as a,y as i,b as o}from"./lit-element-9178eae5.js";import{e as s}from"./property-03f59dce.js";import{t as r}from"./state-70f38ceb.js";import{i as d}from"./query-2d22378e.js";import{o as l}from"./class-map-949b7d3b.js";import{D as h}from"./DirectionController-8b298382.js";import{E as c}from"./EventController-d99ebeef.js";import{L as p}from"./LightDismissController-a2645ae6.js";import{S as v}from"./SlotController-89834aef.js";import{o as u}from"./observe-a9c6dfb6.js";import{c as g}from"./cond-338158e9.js";import{f as m}from"./fsm-50373df9.js";import{c as b}from"./number-c3ab3e95.js";import"./NavToggle.js";import{s as y}from"./Component-92eb6234.js";import"./directive-de55b00a.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./ref-0e619221.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"./DraftComponentMixin-9e4b7b34.js";import"./FocusableMixin-34870ed3.js";import"./Button.js";import"./LightDomController-3c726b20.js";import"./Spinner.js";import"./if-defined-4598a996.js";import"./InputMixin-158f63fb.js";import"./Icon.js";import"./unsafe-html-6be42999.js";import"./VisuallyHidden.js";const k=t`: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);background:var(--_n-layout-background-color);color:var(--n-color-text)}.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)}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{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}: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{transition:transform var(--_n-layout-nav-transition-duration)}[data-screen=wide]:is([data-nav=peek],[data-nav=wait],[data-nav=unpeek],[data-nav=blocked]) .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] .n-layout-main{margin-inline-start:var(--_n-layout-nav-width)}.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-nav-toggle-container{position:absolute;padding:var(--n-space-m) var(--n-space-l);min-block-size:calc(var(--n-space-xxl) - var(--n-space-s)/ 2);display:flex;align-items:center}[data-screen=wide][data-nav=opened] .n-nav-toggle-container{display:none}:is([data-screen=wide]:not([data-nav=opened]),[data-screen=narrow]) .n-has-own-nav-toggle ::slotted(nord-header){--_n-header-gutter:calc(var(--n-space-l) * 3)}`,w=matchMedia("(min-width: 768px)"),f=function(e,n,t=JSON.stringify,a=JSON.parse){return{get value(){try{const t=localStorage.getItem(e);return t?a(t):n}catch(e){return n}},set value(n){try{localStorage.setItem(e,t(n))}catch(e){}}}}("nord-layout.navWidth",250),T=m({opened:{toggle:"closed",close:"closed"},closed:{toggle:"opened",open:"opened",focusin:"peek",pointerenter:"peek"},peek:{toggle:"opened",focusout:"unpeek",pointerleave:"wait",dropdownOpen:"blocked",click:"unpeek",open:"opened"},blocked:{dropdownClose:"peek",open:"opened"},wait:{toggle:"opened",focusin:"peek",pointerenter:"peek",timeout:"unpeek"},unpeek:{toggle:"opened",focusin:"peek",pointerenter:"peek",transitionend:"closed"}});let j=class extends a{constructor(){super(...arguments),this.navSlot=new v(this,"nav"),this.drawerSlot=new v(this,"drawer"),this.direction=new h(this),this.events=new c(this),this.lightDismiss=new p(this,{isOpen:()=>"opened"===this.navState&&!this.wideScreen,onDismiss:()=>this.navTransition("close"),isDismissible:e=>e!==this.navEl}),this.navWidth=f.value,this.isDragging=!1,this.navState=w.matches?"opened":"closed",this.wideScreen=w.matches,this.navOpen="opened"===this.navState,this.padding="m",this.handleMediaQueryChange=()=>{this.wideScreen=w.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")}}connectedCallback(){super.connectedCallback(),this.events.listen(w,"change",this.handleMediaQueryChange),this.events.listen(this,"click",(e=>{this.isNavToggle(e.target)&&this.handleToggleClick()})),this.events.listen(this,"mouseover",(e=>{this.isNavToggle(e.target)&&this.handleMouseEnter()})),this.events.listen(this,"mouseout",(e=>{this.isNavToggle(e.target)&&this.handleMouseLeave()}))}render(){const{navWidth:e,navState:n,navSlot:t,isDragging:a,direction:s}=this,r="opened"===n&&this.wideScreen?e:250,d=t.hasContent&&!this.navToggle;return i`<div class="${l({"n-layout":!0,"n-rtl":s.isRTL,"n-dragging":a})}" style="${`--_n-layout-nav-width: ${r}px`}" data-nav="${t.hasContent?n:"closed"}" data-screen="${this.wideScreen?"wide":"narrow"}"><div class="n-layout-nav" ?hidden="${t.isEmpty}" @focusin="${this.handleNavFocus}" @mouseenter="${this.handleMouseEnter}" @mouseleave="${this.handleMouseLeave}" @open="${this.handleDropdownOpen}" @close="${this.handleDropdownClose}"><slot name="nav"></slot><div class="n-resize" role="separator" aria-orientation="vertical" tabindex="0" @pointerdown="${g("opened"===n,this.startDragging)}" @pointermove="${g(a,this.handleDrag)}" @pointerleave="${this.stopDragging}" @pointerup="${this.stopDragging}" @keydown="${this.handleKeyboardResize}"></div></div><div class="${l({"n-layout-main":!0,"n-has-own-nav-toggle":d})}" @focusin="${this.handleMainFocus}" @click="${this.handleClick}">${d?this.renderNavToggle():o}<div class="${l({"n-has-drawer":this.drawerSlot.hasContent})}"><slot name="header"></slot><main><slot></slot></main></div><aside ?hidden="${this.drawerSlot.isEmpty}"><slot name="drawer"></slot></aside></div></div>`}renderNavToggle(){return i`<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>`}handleNavWidthChange(){f.value=this.navWidth}handleNavStateChange(e){switch("wait"===e&&this.peekTimeoutId&&clearTimeout(this.peekTimeoutId),"unpeek"===e&&this.navEl.removeEventListener("transitionend",this.handleTransitionEnd),this.navState){case"closed":this.navOpen=!1;break;case"opened":this.navOpen=!0;break;case"wait":this.peekTimeoutId=setTimeout((()=>this.navTransition("timeout")),300);break;case"unpeek":this.navEl.addEventListener("transitionend",this.handleTransitionEnd,{once:!0})}}handleOpenChange(){this.isDragging||this.setNavWidth(Math.max(this.navWidth,250)),this.navTransition(this.navOpen?"open":"close")}navTransition(e){this.navState=T.transition(this.navState,e)}handleClick(){this.navTransition("click")}handleDropdownOpen(e){"nord-dropdown"===e.target.localName&&this.navTransition("dropdownOpen")}handleDropdownClose(e){"nord-dropdown"===e.target.localName&&this.navTransition("dropdownClose")}isNavToggle(e){return Boolean(this.navToggle)&&(null!=(n=e)&&n.nodeType===Node.ELEMENT_NODE)&&e.id===this.navToggle;var n}handleKeyboardResize(e){const{navWidth:n,direction:{isLTR:t}}=this;switch(e.key){case"ArrowLeft":this.setNavWidth(n+(t?-30:30));break;case"ArrowRight":this.setNavWidth(n+(t?30:-30));break;case"Enter":this.navTransition("toggle");break;case"Home":this.setNavWidth(220);break;case"End":this.setNavWidth(400);break;default:return}e.preventDefault()}setNavWidth(e){this.navWidth=b(Math.round(e),220,400)}startDragging(e){if(0===e.button){e.target.setPointerCapture(e.pointerId),this.isDragging=!0}}stopDragging(){this.isDragging=!1}handleDrag(e){const n=this.direction.isRTL?this.clientWidth-e.clientX:e.clientX;this.setNavWidth(n),this.navTransition(n>=100?"open":"close")}};j.styles=[y,k],e([d(".n-layout-nav",!0)],j.prototype,"navEl",void 0),e([r()],j.prototype,"navWidth",void 0),e([r()],j.prototype,"isDragging",void 0),e([r()],j.prototype,"navState",void 0),e([r()],j.prototype,"wideScreen",void 0),e([s({reflect:!0,type:Boolean,attribute:"nav-open"})],j.prototype,"navOpen",void 0),e([s({attribute:"nav-toggle"})],j.prototype,"navToggle",void 0),e([s({reflect:!0})],j.prototype,"padding",void 0),e([u("navWidth","updated")],j.prototype,"handleNavWidthChange",null),e([u("navState")],j.prototype,"handleNavStateChange",null),e([u("navOpen","updated")],j.prototype,"handleOpenChange",null),j=e([n("nord-layout")],j);var x=j;export{x as default};
|
|
2
2
|
//# sourceMappingURL=Layout.js.map
|
package/lib/Layout.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Layout.js","sources":["../src/layout/Layout.ts","../src/common/storage.ts"],"sourcesContent":["/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { Events, fsm, States } from \"../common/fsm.js\"\nimport { clamp } from \"../common/number.js\"\nimport { storage } from \"../common/storage.js\"\n\nimport \"../nav-toggle/NavToggle.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Layout.css\"\n\nconst NAV_DEFAULT_WIDTH = 250\nconst NAV_MIN_WIDTH = 220\nconst NAV_MAX_WIDTH = 400\nconst NAV_COLLAPSE_WIDTH = 100\nconst NAV_RESIZE_STEP = 30\nconst NAV_PEEK_DELAY = 300\n\nconst mediaQuery = matchMedia(\"(min-width: 768px)\")\nconst store = storage(\"nord-layout.navWidth\", NAV_DEFAULT_WIDTH)\n\nconst navMachine = fsm({\n opened: {\n toggle: \"closed\",\n close: \"closed\",\n },\n closed: {\n toggle: \"opened\",\n open: \"opened\",\n focusin: \"peek\",\n pointerenter: \"peek\",\n },\n peek: {\n toggle: \"opened\",\n focusout: \"unpeek\",\n pointerleave: \"wait\",\n dropdownOpen: \"blocked\",\n click: \"unpeek\",\n open: \"opened\",\n },\n blocked: {\n dropdownClose: \"peek\",\n open: \"opened\",\n },\n wait: {\n toggle: \"opened\",\n focusin: \"peek\",\n pointerenter: \"peek\",\n timeout: \"unpeek\",\n },\n unpeek: {\n toggle: \"opened\",\n focusin: \"peek\",\n pointerenter: \"peek\",\n transitionend: \"closed\",\n },\n})\n\ntype NavState = States<typeof navMachine>\ntype NavEvent = Events<typeof navMachine>\n\nfunction isElement(el: any): el is Element {\n return el != null && el.nodeType === Node.ELEMENT_NODE\n}\n\n/**\n * Layout component is used to create the main layout of an app. Layout\n * currently comes with one main configuration: two-column.\n *\n * @status ready\n * @category structure\n * @slot - The default main section content.\n * @slot nav - Used to place content inside the navigation sidebar.\n * @slot header - Used to place content inside the header section.\n * @slot drawer - Used to place additional content/details relating to a selected item.\n * @slot nav-toggle - Used to place a own nav-toggle component, for cases where you might need to add a tooltip.\n *\n * @cssprop [--n-layout-padding=var(--n-space-l)] - Controls the padding around the main layout area (the main slot), using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-layout-drawer-inline-size=320px] - Controls the width of the drawer area, when used.\n */\n@customElement(\"nord-layout\")\nexport default class Layout extends LitElement {\n static styles = [componentStyle, style]\n\n private peekTimeoutId?: ReturnType<typeof setTimeout>\n\n private navSlot = new SlotController(this, \"nav\")\n private drawerSlot = new SlotController(this, \"drawer\")\n private direction = new DirectionController(this)\n private events = new EventController(this)\n private lightDismiss = new LightDismissController(this, {\n isOpen: () => this.navState === \"opened\" && !this.wideScreen,\n onDismiss: () => this.navTransition(\"close\"),\n isDismissible: node => node !== this.navEl,\n })\n\n @query(\".n-layout-nav\", true) private navEl!: HTMLDivElement\n\n @state() private navWidth = store.value\n @state() private isDragging = false\n @state() private navState: NavState = mediaQuery.matches ? \"opened\" : \"closed\"\n @state() private wideScreen = mediaQuery.matches\n\n /**\n * Controls whether the navigation is hidden off-screen or not.\n * Defaults to `true` for wide viewports, and `false` otherwise.\n */\n @property({ reflect: true, type: Boolean, attribute: \"nav-open\" }) navOpen: boolean = this.navState === \"opened\"\n\n /**\n * ID reference of element used to toggle the navigation.\n * This is deprecated, the layout component will now render its own nav toggle to simplify usage.\n * @deprecated\n */\n @property({ attribute: \"nav-toggle\" }) navToggle?: string\n\n /**\n * Controls the padding of the default main section slot. When set to “none”,\n * the nav and header slots will still have padding.\n */\n @property({ reflect: true }) padding: \"m\" | \"none\" = \"m\"\n\n connectedCallback(): void {\n super.connectedCallback()\n\n this.events.listen(mediaQuery, \"change\", this.handleMediaQueryChange)\n\n this.events.listen(this, \"click\", e => {\n if (this.isNavToggle(e.target)) {\n this.handleToggleClick()\n }\n })\n this.events.listen(this, \"mouseover\", e => {\n if (this.isNavToggle(e.target)) {\n this.handleMouseEnter()\n }\n })\n this.events.listen(this, \"mouseout\", e => {\n if (this.isNavToggle(e.target)) {\n this.handleMouseLeave()\n }\n })\n }\n\n render() {\n const { navWidth, navState, navSlot, isDragging, direction } = this\n const adjustedNavWidth = navState === \"opened\" && this.wideScreen ? navWidth : NAV_DEFAULT_WIDTH\n const shouldRenderOwnNavToggle = navSlot.hasContent && !this.navToggle\n\n return html`\n <div\n class=${classMap({\n \"n-layout\": true,\n \"n-rtl\": direction.isRTL,\n \"n-dragging\": isDragging,\n })}\n style=${`--_n-layout-nav-width: ${adjustedNavWidth}px`}\n data-nav=${navSlot.hasContent ? navState : \"closed\"}\n data-screen=${this.wideScreen ? \"wide\" : \"narrow\"}\n >\n <div\n class=\"n-layout-nav\"\n ?hidden=${navSlot.isEmpty}\n @focusin=${this.handleNavFocus}\n @mouseenter=${this.handleMouseEnter}\n @mouseleave=${this.handleMouseLeave}\n @open=${this.handleDropdownOpen}\n @close=${this.handleDropdownClose}\n >\n <slot name=\"nav\"></slot>\n <div\n class=\"n-resize\"\n role=\"separator\"\n aria-orientation=\"vertical\"\n tabindex=\"0\"\n @pointerdown=${cond(navState === \"opened\", this.startDragging)}\n @pointermove=${cond(isDragging, this.handleDrag)}\n @pointerleave=${this.stopDragging}\n @pointerup=${this.stopDragging}\n @keydown=${this.handleKeyboardResize}\n ></div>\n </div>\n\n <div\n class=${classMap({ \"n-layout-main\": true, \"n-has-own-nav-toggle\": shouldRenderOwnNavToggle })}\n @focusin=${this.handleMainFocus}\n @click=${this.handleClick}\n >\n ${shouldRenderOwnNavToggle ? this.renderNavToggle() : nothing}\n <div class=${classMap({ \"n-has-drawer\": this.drawerSlot.hasContent })}>\n <slot name=\"header\"></slot>\n <main>\n <slot></slot>\n </main>\n </div>\n <aside ?hidden=${this.drawerSlot.isEmpty}>\n <slot name=\"drawer\"></slot>\n </aside>\n </div>\n </div>\n `\n }\n\n private renderNavToggle() {\n /* eslint-disable lit-a11y/mouse-events-have-key-events */\n return html`\n <div class=\"n-nav-toggle-container\">\n <slot\n name=\"nav-toggle\"\n @click=${this.handleToggleClick}\n @mouseover=${this.handleMouseEnter}\n @mouseout=${this.handleMouseLeave}\n >\n <nord-nav-toggle></nord-nav-toggle>\n </slot>\n </div>\n `\n /* eslint-enable lit-a11y/mouse-events-have-key-events */\n }\n\n @observe(\"navWidth\", \"updated\")\n protected handleNavWidthChange() {\n store.value = this.navWidth\n }\n\n @observe(\"navState\")\n protected handleNavStateChange(prev: NavState) {\n if (prev === \"wait\" && this.peekTimeoutId) {\n clearTimeout(this.peekTimeoutId)\n }\n if (prev === \"unpeek\") {\n this.navEl.removeEventListener(\"transitionend\", this.handleTransitionEnd)\n }\n\n switch (this.navState) {\n case \"closed\":\n this.navOpen = false\n break\n case \"opened\":\n this.navOpen = true\n break\n case \"wait\":\n this.peekTimeoutId = setTimeout(() => this.navTransition(\"timeout\"), NAV_PEEK_DELAY)\n break\n case \"unpeek\":\n this.navEl.addEventListener(\"transitionend\", this.handleTransitionEnd, { once: true })\n break\n default:\n break\n }\n }\n\n @observe(\"navOpen\", \"updated\")\n protected handleOpenChange() {\n if (!this.isDragging) {\n // when opening nav, it should restore to default width (or larger).\n // unless it is being dragged, in which case the drag width wins\n this.setNavWidth(Math.max(this.navWidth, NAV_DEFAULT_WIDTH))\n }\n\n this.navTransition(this.navOpen ? \"open\" : \"close\")\n }\n\n /* ---------------------------------------------\n / NAVIGATION OPEN/CLOSE LOGIC\n / --------------------------------------------- */\n\n private navTransition(event: NavEvent) {\n this.navState = navMachine.transition(this.navState, event)\n }\n\n private handleClick() {\n this.navTransition(\"click\")\n }\n\n private handleDropdownOpen(e: Event) {\n const target = e.target as Element\n\n if (target.localName === \"nord-dropdown\") {\n this.navTransition(\"dropdownOpen\")\n }\n }\n\n private handleDropdownClose(e: Event) {\n const target = e.target as Element\n\n if (target.localName === \"nord-dropdown\") {\n this.navTransition(\"dropdownClose\")\n }\n }\n\n private handleMediaQueryChange = () => {\n this.wideScreen = mediaQuery.matches\n this.navTransition(this.wideScreen ? \"open\" : \"close\")\n }\n\n private handleToggleClick = () => {\n this.navTransition(\"toggle\")\n }\n\n private handleNavFocus = () => {\n this.navTransition(\"focusin\")\n }\n\n private handleMainFocus = () => {\n this.navTransition(\"focusout\")\n }\n\n private handleMouseEnter = () => {\n if (this.wideScreen) {\n this.navTransition(\"pointerenter\")\n }\n }\n\n private handleMouseLeave = () => {\n this.navTransition(\"pointerleave\")\n }\n\n private handleTransitionEnd = () => {\n this.navTransition(\"transitionend\")\n }\n\n private isNavToggle(node: EventTarget | null) {\n return Boolean(this.navToggle) && isElement(node) && node.id === this.navToggle\n }\n\n /* ---------------------------------------------\n / RESIZE LOGIC\n / --------------------------------------------- */\n\n private handleKeyboardResize(e: KeyboardEvent) {\n const {\n navWidth,\n direction: { isLTR },\n } = this\n\n switch (e.key) {\n case \"ArrowLeft\":\n this.setNavWidth(navWidth + (isLTR ? -NAV_RESIZE_STEP : NAV_RESIZE_STEP))\n break\n case \"ArrowRight\":\n this.setNavWidth(navWidth + (isLTR ? NAV_RESIZE_STEP : -NAV_RESIZE_STEP))\n break\n case \"Enter\":\n this.navTransition(\"toggle\")\n break\n case \"Home\":\n this.setNavWidth(NAV_MIN_WIDTH)\n break\n case \"End\":\n this.setNavWidth(NAV_MAX_WIDTH)\n break\n default:\n return\n }\n\n e.preventDefault()\n }\n\n private setNavWidth(width: number) {\n this.navWidth = clamp(Math.round(width), NAV_MIN_WIDTH, NAV_MAX_WIDTH)\n }\n\n private startDragging(e: PointerEvent) {\n if (e.button === 0) {\n const target = e.target as Element\n target.setPointerCapture(e.pointerId)\n this.isDragging = true\n }\n }\n\n private stopDragging() {\n this.isDragging = false\n }\n\n private handleDrag(e: PointerEvent) {\n const width = this.direction.isRTL ? this.clientWidth - e.clientX : e.clientX\n\n this.setNavWidth(width)\n this.navTransition(width >= NAV_COLLAPSE_WIDTH ? \"open\" : \"close\")\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-layout\": Layout\n }\n}\n","/**\n * Thin wrapper around local storage which simplifies (de)serialization and default values.\n * By default, (de)serializes as JSON.\n */\nexport function storage<T>(\n key: string,\n defaultValue: T,\n serialize: (value: T) => string = JSON.stringify,\n deserialize: (value: string) => T = JSON.parse\n) {\n return {\n get value(): T {\n try {\n const value = localStorage.getItem(key)\n return value ? deserialize(value) : defaultValue\n } catch {\n return defaultValue\n }\n },\n\n set value(value: T) {\n try {\n localStorage.setItem(key, serialize(value))\n } catch {\n // nothing we can do here\n }\n },\n }\n}\n"],"names":["mediaQuery","matchMedia","store","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","_a","setItem","storage","navMachine","fsm","opened","toggle","close","closed","open","focusin","pointerenter","peek","focusout","pointerleave","dropdownOpen","click","blocked","dropdownClose","wait","timeout","unpeek","transitionend","Layout","LitElement","constructor","this","navSlot","SlotController","drawerSlot","direction","DirectionController","events","EventController","lightDismiss","LightDismissController","isOpen","navState","wideScreen","onDismiss","navTransition","isDismissible","node","navEl","navWidth","isDragging","matches","navOpen","padding","handleMediaQueryChange","handleToggleClick","handleNavFocus","handleMainFocus","handleMouseEnter","handleMouseLeave","handleTransitionEnd","connectedCallback","super","listen","e","isNavToggle","target","render","adjustedNavWidth","shouldRenderOwnNavToggle","hasContent","navToggle","html","classMap","isRTL","isEmpty","handleDropdownOpen","handleDropdownClose","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","handleClick","renderNavToggle","nothing","handleNavWidthChange","handleNavStateChange","prev","peekTimeoutId","clearTimeout","removeEventListener","setTimeout","addEventListener","once","handleOpenChange","setNavWidth","Math","max","event","transition","localName","Boolean","el","nodeType","Node","ELEMENT_NODE","id","isLTR","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","style","__decorate","query","prototype","state","property","reflect","type","attribute","observe","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Layout.js","sources":["../src/layout/Layout.ts","../src/common/storage.ts"],"sourcesContent":["/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { Events, fsm, States } from \"../common/fsm.js\"\nimport { clamp } from \"../common/number.js\"\nimport { storage } from \"../common/storage.js\"\n\nimport \"../nav-toggle/NavToggle.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Layout.css\"\n\nconst NAV_DEFAULT_WIDTH = 250\nconst NAV_MIN_WIDTH = 220\nconst NAV_MAX_WIDTH = 400\nconst NAV_COLLAPSE_WIDTH = 100\nconst NAV_RESIZE_STEP = 30\nconst NAV_PEEK_DELAY = 300\n\nconst mediaQuery = matchMedia(\"(min-width: 768px)\")\nconst store = storage(\"nord-layout.navWidth\", NAV_DEFAULT_WIDTH)\n\nconst navMachine = fsm({\n opened: {\n toggle: \"closed\",\n close: \"closed\",\n },\n closed: {\n toggle: \"opened\",\n open: \"opened\",\n focusin: \"peek\",\n pointerenter: \"peek\",\n },\n peek: {\n toggle: \"opened\",\n focusout: \"unpeek\",\n pointerleave: \"wait\",\n dropdownOpen: \"blocked\",\n click: \"unpeek\",\n open: \"opened\",\n },\n blocked: {\n dropdownClose: \"peek\",\n open: \"opened\",\n },\n wait: {\n toggle: \"opened\",\n focusin: \"peek\",\n pointerenter: \"peek\",\n timeout: \"unpeek\",\n },\n unpeek: {\n toggle: \"opened\",\n focusin: \"peek\",\n pointerenter: \"peek\",\n transitionend: \"closed\",\n },\n})\n\ntype NavState = States<typeof navMachine>\ntype NavEvent = Events<typeof navMachine>\n\nfunction isElement(el: any): el is Element {\n return el != null && el.nodeType === Node.ELEMENT_NODE\n}\n\n/**\n * Layout component is used to create the main layout of an app. Layout\n * currently comes with one main configuration: two-column.\n *\n * @status ready\n * @category structure\n * @slot - The default main section content.\n * @slot nav - Used to place content inside the navigation sidebar.\n * @slot header - Used to place content inside the header section.\n * @slot drawer - Used to place additional content/details relating to a selected item.\n * @slot nav-toggle - Used to place a own nav-toggle component, for cases where you might need to add a tooltip.\n *\n * @cssprop [--n-layout-padding=var(--n-space-l)] - Controls the padding around the main layout area (the main slot), using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-layout-drawer-inline-size=320px] - Controls the width of the drawer area, when used.\n * @cssprop [--n-layout-background-color=var(--n-color-background)] - Controls the background color of the layout, using [color tokens](/tokens/#color).\n */\n@customElement(\"nord-layout\")\nexport default class Layout extends LitElement {\n static styles = [componentStyle, style]\n\n private peekTimeoutId?: ReturnType<typeof setTimeout>\n\n private navSlot = new SlotController(this, \"nav\")\n private drawerSlot = new SlotController(this, \"drawer\")\n private direction = new DirectionController(this)\n private events = new EventController(this)\n private lightDismiss = new LightDismissController(this, {\n isOpen: () => this.navState === \"opened\" && !this.wideScreen,\n onDismiss: () => this.navTransition(\"close\"),\n isDismissible: node => node !== this.navEl,\n })\n\n @query(\".n-layout-nav\", true) private navEl!: HTMLDivElement\n\n @state() private navWidth = store.value\n @state() private isDragging = false\n @state() private navState: NavState = mediaQuery.matches ? \"opened\" : \"closed\"\n @state() private wideScreen = mediaQuery.matches\n\n /**\n * Controls whether the navigation is hidden off-screen or not.\n * Defaults to `true` for wide viewports, and `false` otherwise.\n */\n @property({ reflect: true, type: Boolean, attribute: \"nav-open\" }) navOpen: boolean = this.navState === \"opened\"\n\n /**\n * ID reference of element used to toggle the navigation.\n * This is deprecated, the layout component will now render its own nav toggle to simplify usage.\n * @deprecated\n */\n @property({ attribute: \"nav-toggle\" }) navToggle?: string\n\n /**\n * Controls the padding of the default main section slot. When set to “none”,\n * the nav and header slots will still have padding.\n */\n @property({ reflect: true }) padding: \"m\" | \"none\" = \"m\"\n\n connectedCallback(): void {\n super.connectedCallback()\n\n this.events.listen(mediaQuery, \"change\", this.handleMediaQueryChange)\n\n this.events.listen(this, \"click\", e => {\n if (this.isNavToggle(e.target)) {\n this.handleToggleClick()\n }\n })\n this.events.listen(this, \"mouseover\", e => {\n if (this.isNavToggle(e.target)) {\n this.handleMouseEnter()\n }\n })\n this.events.listen(this, \"mouseout\", e => {\n if (this.isNavToggle(e.target)) {\n this.handleMouseLeave()\n }\n })\n }\n\n render() {\n const { navWidth, navState, navSlot, isDragging, direction } = this\n const adjustedNavWidth = navState === \"opened\" && this.wideScreen ? navWidth : NAV_DEFAULT_WIDTH\n const shouldRenderOwnNavToggle = navSlot.hasContent && !this.navToggle\n\n return html`\n <div\n class=${classMap({\n \"n-layout\": true,\n \"n-rtl\": direction.isRTL,\n \"n-dragging\": isDragging,\n })}\n style=${`--_n-layout-nav-width: ${adjustedNavWidth}px`}\n data-nav=${navSlot.hasContent ? navState : \"closed\"}\n data-screen=${this.wideScreen ? \"wide\" : \"narrow\"}\n >\n <div\n class=\"n-layout-nav\"\n ?hidden=${navSlot.isEmpty}\n @focusin=${this.handleNavFocus}\n @mouseenter=${this.handleMouseEnter}\n @mouseleave=${this.handleMouseLeave}\n @open=${this.handleDropdownOpen}\n @close=${this.handleDropdownClose}\n >\n <slot name=\"nav\"></slot>\n <div\n class=\"n-resize\"\n role=\"separator\"\n aria-orientation=\"vertical\"\n tabindex=\"0\"\n @pointerdown=${cond(navState === \"opened\", this.startDragging)}\n @pointermove=${cond(isDragging, this.handleDrag)}\n @pointerleave=${this.stopDragging}\n @pointerup=${this.stopDragging}\n @keydown=${this.handleKeyboardResize}\n ></div>\n </div>\n\n <div\n class=${classMap({ \"n-layout-main\": true, \"n-has-own-nav-toggle\": shouldRenderOwnNavToggle })}\n @focusin=${this.handleMainFocus}\n @click=${this.handleClick}\n >\n ${shouldRenderOwnNavToggle ? this.renderNavToggle() : nothing}\n <div class=${classMap({ \"n-has-drawer\": this.drawerSlot.hasContent })}>\n <slot name=\"header\"></slot>\n <main>\n <slot></slot>\n </main>\n </div>\n <aside ?hidden=${this.drawerSlot.isEmpty}>\n <slot name=\"drawer\"></slot>\n </aside>\n </div>\n </div>\n `\n }\n\n private renderNavToggle() {\n /* eslint-disable lit-a11y/mouse-events-have-key-events */\n return html`\n <div class=\"n-nav-toggle-container\">\n <slot\n name=\"nav-toggle\"\n @click=${this.handleToggleClick}\n @mouseover=${this.handleMouseEnter}\n @mouseout=${this.handleMouseLeave}\n >\n <nord-nav-toggle></nord-nav-toggle>\n </slot>\n </div>\n `\n /* eslint-enable lit-a11y/mouse-events-have-key-events */\n }\n\n @observe(\"navWidth\", \"updated\")\n protected handleNavWidthChange() {\n store.value = this.navWidth\n }\n\n @observe(\"navState\")\n protected handleNavStateChange(prev: NavState) {\n if (prev === \"wait\" && this.peekTimeoutId) {\n clearTimeout(this.peekTimeoutId)\n }\n if (prev === \"unpeek\") {\n this.navEl.removeEventListener(\"transitionend\", this.handleTransitionEnd)\n }\n\n switch (this.navState) {\n case \"closed\":\n this.navOpen = false\n break\n case \"opened\":\n this.navOpen = true\n break\n case \"wait\":\n this.peekTimeoutId = setTimeout(() => this.navTransition(\"timeout\"), NAV_PEEK_DELAY)\n break\n case \"unpeek\":\n this.navEl.addEventListener(\"transitionend\", this.handleTransitionEnd, { once: true })\n break\n default:\n break\n }\n }\n\n @observe(\"navOpen\", \"updated\")\n protected handleOpenChange() {\n if (!this.isDragging) {\n // when opening nav, it should restore to default width (or larger).\n // unless it is being dragged, in which case the drag width wins\n this.setNavWidth(Math.max(this.navWidth, NAV_DEFAULT_WIDTH))\n }\n\n this.navTransition(this.navOpen ? \"open\" : \"close\")\n }\n\n /* ---------------------------------------------\n / NAVIGATION OPEN/CLOSE LOGIC\n / --------------------------------------------- */\n\n private navTransition(event: NavEvent) {\n this.navState = navMachine.transition(this.navState, event)\n }\n\n private handleClick() {\n this.navTransition(\"click\")\n }\n\n private handleDropdownOpen(e: Event) {\n const target = e.target as Element\n\n if (target.localName === \"nord-dropdown\") {\n this.navTransition(\"dropdownOpen\")\n }\n }\n\n private handleDropdownClose(e: Event) {\n const target = e.target as Element\n\n if (target.localName === \"nord-dropdown\") {\n this.navTransition(\"dropdownClose\")\n }\n }\n\n private handleMediaQueryChange = () => {\n this.wideScreen = mediaQuery.matches\n this.navTransition(this.wideScreen ? \"open\" : \"close\")\n }\n\n private handleToggleClick = () => {\n this.navTransition(\"toggle\")\n }\n\n private handleNavFocus = () => {\n this.navTransition(\"focusin\")\n }\n\n private handleMainFocus = () => {\n this.navTransition(\"focusout\")\n }\n\n private handleMouseEnter = () => {\n if (this.wideScreen) {\n this.navTransition(\"pointerenter\")\n }\n }\n\n private handleMouseLeave = () => {\n this.navTransition(\"pointerleave\")\n }\n\n private handleTransitionEnd = () => {\n this.navTransition(\"transitionend\")\n }\n\n private isNavToggle(node: EventTarget | null) {\n return Boolean(this.navToggle) && isElement(node) && node.id === this.navToggle\n }\n\n /* ---------------------------------------------\n / RESIZE LOGIC\n / --------------------------------------------- */\n\n private handleKeyboardResize(e: KeyboardEvent) {\n const {\n navWidth,\n direction: { isLTR },\n } = this\n\n switch (e.key) {\n case \"ArrowLeft\":\n this.setNavWidth(navWidth + (isLTR ? -NAV_RESIZE_STEP : NAV_RESIZE_STEP))\n break\n case \"ArrowRight\":\n this.setNavWidth(navWidth + (isLTR ? NAV_RESIZE_STEP : -NAV_RESIZE_STEP))\n break\n case \"Enter\":\n this.navTransition(\"toggle\")\n break\n case \"Home\":\n this.setNavWidth(NAV_MIN_WIDTH)\n break\n case \"End\":\n this.setNavWidth(NAV_MAX_WIDTH)\n break\n default:\n return\n }\n\n e.preventDefault()\n }\n\n private setNavWidth(width: number) {\n this.navWidth = clamp(Math.round(width), NAV_MIN_WIDTH, NAV_MAX_WIDTH)\n }\n\n private startDragging(e: PointerEvent) {\n if (e.button === 0) {\n const target = e.target as Element\n target.setPointerCapture(e.pointerId)\n this.isDragging = true\n }\n }\n\n private stopDragging() {\n this.isDragging = false\n }\n\n private handleDrag(e: PointerEvent) {\n const width = this.direction.isRTL ? this.clientWidth - e.clientX : e.clientX\n\n this.setNavWidth(width)\n this.navTransition(width >= NAV_COLLAPSE_WIDTH ? \"open\" : \"close\")\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-layout\": Layout\n }\n}\n","/**\n * Thin wrapper around local storage which simplifies (de)serialization and default values.\n * By default, (de)serializes as JSON.\n */\nexport function storage<T>(\n key: string,\n defaultValue: T,\n serialize: (value: T) => string = JSON.stringify,\n deserialize: (value: string) => T = JSON.parse\n) {\n return {\n get value(): T {\n try {\n const value = localStorage.getItem(key)\n return value ? deserialize(value) : defaultValue\n } catch {\n return defaultValue\n }\n },\n\n set value(value: T) {\n try {\n localStorage.setItem(key, serialize(value))\n } catch {\n // nothing we can do here\n }\n },\n }\n}\n"],"names":["mediaQuery","matchMedia","store","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","_a","setItem","storage","navMachine","fsm","opened","toggle","close","closed","open","focusin","pointerenter","peek","focusout","pointerleave","dropdownOpen","click","blocked","dropdownClose","wait","timeout","unpeek","transitionend","Layout","LitElement","constructor","this","navSlot","SlotController","drawerSlot","direction","DirectionController","events","EventController","lightDismiss","LightDismissController","isOpen","navState","wideScreen","onDismiss","navTransition","isDismissible","node","navEl","navWidth","isDragging","matches","navOpen","padding","handleMediaQueryChange","handleToggleClick","handleNavFocus","handleMainFocus","handleMouseEnter","handleMouseLeave","handleTransitionEnd","connectedCallback","super","listen","e","isNavToggle","target","render","adjustedNavWidth","shouldRenderOwnNavToggle","hasContent","navToggle","html","classMap","isRTL","isEmpty","handleDropdownOpen","handleDropdownClose","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","handleClick","renderNavToggle","nothing","handleNavWidthChange","handleNavStateChange","prev","peekTimeoutId","clearTimeout","removeEventListener","setTimeout","addEventListener","once","handleOpenChange","setNavWidth","Math","max","event","transition","localName","Boolean","el","nodeType","Node","ELEMENT_NODE","id","isLTR","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","style","__decorate","query","prototype","state","property","reflect","type","attribute","observe","customElement"],"mappings":"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"}
|
package/lib/Radio.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,e as t}from"./query-assigned-elements-e6cbac30.js";import{b as o,i as n,y as i,s as r}from"./lit-element-9178eae5.js";import{e as a}from"./property-03f59dce.js";import{n as s}from"./ref-0e619221.js";import{L as l}from"./LightDomController-3c726b20.js";import{S as d}from"./SlotController-89834aef.js";import{o as c}from"./observe-a9c6dfb6.js";import{c as h}from"./cond-338158e9.js";import{F as p}from"./FocusableMixin-34870ed3.js";import{F as m}from"./FormAssociatedMixin-
|
|
1
|
+
import{_ as e,e as t}from"./query-assigned-elements-e6cbac30.js";import{b as o,i as n,y as i,s as r}from"./lit-element-9178eae5.js";import{e as a}from"./property-03f59dce.js";import{n as s}from"./ref-0e619221.js";import{L as l}from"./LightDomController-3c726b20.js";import{S as d}from"./SlotController-89834aef.js";import{o as c}from"./observe-a9c6dfb6.js";import{c as h}from"./cond-338158e9.js";import{F as p}from"./FocusableMixin-34870ed3.js";import{F as m}from"./FormAssociatedMixin-252fb0e9.js";import{I as u}from"./InputMixin-158f63fb.js";import{s as v}from"./Component-92eb6234.js";import{s as b}from"./FormField-081da729.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./events-731d0007.js";import"./VisuallyHidden.js";class f extends d{constructor(e,t){super(e,t.slotName),this.options=t,this.onChange=()=>{this.syncLightDom()},this.renderHook=document.createComment(this.slotName),this.lightDom=new l(e,{render:()=>this.hasContent?o:this.options.render(),renderOptions:{renderBefore:this.renderHook}})}hostConnected(){super.hostConnected(),this.host.appendChild(this.renderHook),this.syncLightDom()}hostDisconnected(){this.renderHook.remove()}syncLightDom(){const e=this.content;e&&this.options.syncLightDom(e)}}const g=n`:host{--_n-radio-size:calc(var(--n-space-m) * 1.25);display:inline-block;line-height:var(--n-line-height)}.n-flex{display:flex}.n-expand{flex:1}.n-input-container{position:relative}::slotted(input){--_n-radio-accent-color:var(--n-color-accent);-moz-appearance:none;-webkit-appearance:none;appearance:none;margin:0!important;padding:0!important;border:1px solid var(--_n-radio-border-color,var(--n-color-border-hover))!important;border-radius:var(--n-border-radius-circle)!important;transition:none!important;display:block!important;inline-size:var(--_n-radio-size)!important;block-size:var(--_n-radio-size)!important;cursor:pointer}::slotted(input:checked){--_n-radio-border-color:var(--n-color-accent);background:var(--_n-radio-accent-color)!important}::slotted(input[aria-invalid]){--_n-radio-accent-color:var(--n-color-status-danger);--_n-radio-border-color:var(--_n-radio-accent-color)}::slotted(input:active){opacity:.8}::slotted(input:focus-visible){outline:0!important}::slotted(input:focus){outline:0!important;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)!important}:host([disabled]) ::slotted(input){--_n-radio-accent-color:var(--n-color-border-strong);--_n-radio-border-color:var(--_n-radio-accent-color);background:var(--_n-radio-accent-color);cursor:default;opacity:1}:host([disabled]) ::slotted(label){color:var(--n-color-text-weaker);cursor:default}.n-dot{--_n-radio-dot-size:var(--n-space-s);--_n-radio-dot-inset:calc((var(--_n-radio-size) - var(--_n-radio-dot-size)) / 2);position:absolute;border-radius:var(--n-border-radius-circle);inline-size:var(--_n-radio-dot-size);block-size:var(--_n-radio-dot-size);background-color:var(--n-color-text-on-accent);inset-inline-start:var(--_n-radio-dot-inset);inset-block-start:var(--_n-radio-dot-inset);z-index:var(--n-index-default);pointer-events:none}.n-label-container{padding-block-end:0}::slotted(label){-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-l)!important;padding-inline-start:var(--n-space-s)!important;cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:calc(var(--n-space-s)/ 2);padding-inline-start:var(--n-space-s)}`;let k=0;const $=e=>`nord-radio-${e}-${k++}`;let y=class extends(m(u(p(r)))){constructor(){super(...arguments),this.inputId=$("input"),this.hintId=$("hint"),this.errorId=$("error"),this.hintSlot=new f(this,{slotName:"hint",render:()=>this.hint?i`<div slot="hint-internal" id="${this.hintId}">${this.hint}</div>`:o,syncLightDom:e=>{e.id=this.hintId}}),this.labelSlot=new f(this,{slotName:"label",render:()=>this.label?i`<label slot="label-internal" for="${this.inputId}">${this.label}</label>`:o,syncLightDom:e=>{!function(e){return"label"===e.localName}(e)?console.warn('NORD: Only <label> elements should be placed in radio\'s "label" slot'):e.htmlFor=this.inputId}}),this.errorSlot=new f(this,{slotName:"error",render:()=>this.error?i`<div slot="error-internal" id="${this.errorId}">${this.error}</div>`:o,syncLightDom:e=>{e.id=this.hintId}}),this.inputSlot=new l(this,{render:()=>i`<input slot="input" @blur="${this.handleBlur}" @focus="${this.handleFocus}" ${s(this.focusableRef)} class="n-input" id="${this.inputId}" type="radio" name="${h(this.name)}" .value="${h(this.value)}" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${h(this.getDescribedBy())}" aria-invalid="${h(this.getInvalid())}" form="${h(this.getAttribute("form")||void 0)}">`}),this.checked=!1,this.handleBlur=e=>{e.stopPropagation(),this.dispatchEvent(new Event("blur",{bubbles:!1,cancelable:!0}))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new Event("focus",{bubbles:!1,cancelable:!0}))}}get formValue(){}render(){return i`<div class="n-flex"><div class="n-input-container" @change="${this.handleChange}"><slot name="input"></slot>${this.checked?i`<div class="n-dot"></div>`:o}</div><div class="n-expand"><div class="n-label-container">${e=this.hideLabel,t=()=>i`<slot name="label"></slot><slot name="label-internal"></slot>`,n=e=>i`<nord-visually-hidden>${e}</nord-visually-hidden>`,e?n(t()):t()}<div class="n-caption n-hint" ?hidden="${!this.hasHint}"><slot name="hint"></slot><slot name="hint-internal"></slot></div></div><div class="n-caption n-error" role="alert" ?hidden="${!this.hasError}"><slot name="error"></slot><slot name="error-internal"></slot></div></div></div>`;var e,t,n}handleCheckedChange(e){!e&&this.checked&&this.uncheckSiblings()}uncheckSiblings(){this.getRootNode().querySelectorAll(`nord-radio[name="${this.name}"]`).forEach((e=>{e!==this&&(e.checked=!1)}))}handleChange(e){e.stopPropagation();const t=e.target;this.checked=t.checked,super.handleChange(e)}};y.styles=[v,b,g],e([a({type:Boolean,reflect:!0})],y.prototype,"checked",void 0),e([c("checked")],y.prototype,"handleCheckedChange",null),y=e([t("nord-radio")],y);var _=y;export{_ as default};
|
|
2
2
|
//# sourceMappingURL=Radio.js.map
|
package/lib/Range.js
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{_ as r,e}from"./query-assigned-elements-e6cbac30.js";import{i as n,y as a,s as o}from"./lit-element-9178eae5.js";import{n as t}from"./ref-0e619221.js";import{o as i}from"./class-map-949b7d3b.js";import{e as s}from"./property-03f59dce.js";import{l as c}from"./if-defined-4598a996.js";import{N as l}from"./events-731d0007.js";import{D as d}from"./DraftComponentMixin-9e4b7b34.js";import{F as b}from"./FocusableMixin-34870ed3.js";import{F as m}from"./FormAssociatedMixin-252fb0e9.js";import{I as g}from"./InputMixin-158f63fb.js";import{R as u,s as h}from"./TextField-a7382912.js";import{A as p}from"./AutocompleteMixin-370de2be.js";import{D as v}from"./DirectionController-8b298382.js";import{s as f}from"./Component-92eb6234.js";import{s as _}from"./FormField-081da729.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-89834aef.js";import"./VisuallyHidden.js";const z=n`:host{--_n-range-progress:0%;--_n-range-thumb-focus-ring:0 0 0 1px var(--n-color-accent);--_n-range-thumb-color:var(--n-color-text-on-accent);--_n-range-thumb-border-size:1px;--_n-range-thumb-border-color:var(--n-color-border-strong);--_n-range-gradient-direction:right;--_n-range-thumb-size:var(--n-range-thumb-size, 20px);--_n-range-track-color-active:var(--n-range-track-color-active, var(--n-color-accent));--_n-range-track-color-inactive:var(--n-range-track-color-inactive, var(--n-color-border-strong));--_n-range-track-size:var(--n-range-track-size, 3px)}.n-range{-webkit-appearance:none;appearance:none;inline-size:100%;background:linear-gradient(to var(--_n-range-gradient-direction),var(--_n-range-track-color-active) 0,var(--_n-range-track-color-active) var(--_n-range-progress),var(--_n-range-track-color-inactive) var(--_n-range-progress));border-radius:var(--n-border-radius-s)}.n-range.is-rtl{--_n-range-gradient-direction:left}.n-range::-webkit-slider-runnable-track{inline-size:100%;block-size:var(--_n-range-track-size)}.n-range::-webkit-slider-thumb{block-size:var(--_n-range-thumb-size);inline-size:var(--_n-range-thumb-size);box-shadow:var(--n-box-shadow),var(--n-box-shadow);border-radius:var(--n-border-radius-circle);background:var(--_n-range-thumb-color);border:var(--_n-range-thumb-border-size) solid var(--_n-range-thumb-border-color);cursor:pointer;-webkit-appearance:none;margin-block-start:calc(calc(var(--_n-range-thumb-size) - var(--_n-range-track-size))/ 2 * -1)}.n-range::-moz-range-track{border:var(--n-space-s) solid var(--n-color-surface);inline-size:100%;block-size:var(--_n-range-track-size)}.n-range::-moz-range-thumb{block-size:var(--_n-range-thumb-size);inline-size:var(--_n-range-thumb-size);box-shadow:var(--n-box-shadow);border-radius:var(--n-border-radius-circle);background:var(--_n-range-thumb-color);border:var(--_n-range-thumb-border-size) solid var(--_n-range-thumb-border-color);cursor:pointer;appearance:none;margin-block-start:calc(calc(var(--_n-range-thumb-size) - var(--_n-range-track-size))/ 2 * -1)}.n-label-container{padding-block-end:0;inline-size:100%}label{display:flex!important}.n-range-output{font-weight:var(--n-font-weight);color:var(--n-color-text-weaker);font-size:var(--n-font-size-m);margin-inline-start:auto}.n-range:focus{outline:0}.n-label-container:hover+.n-input-container .n-input:disabled,.n-range:disabled{opacity:.5}.n-range:disabled::-webkit-slider-thumb,.n-range[readonly]::-webkit-slider-thumb{--_n-range-thumb-color:var(--n-color-border);--_n-range-thumb-border-color:var(--n-color-border);box-shadow:none;cursor:default}.n-range:disabled::-moz-range-thumb,.n-range[readonly]::-moz-range-thumb{--_n-range-thumb-color:var(--n-color-border);--_n-range-thumb-border-color:var(--n-color-border);box-shadow:none;cursor:default}.n-range:focus::-webkit-slider-thumb{--_n-range-thumb-border-color:var(--n-color-accent);box-shadow:var(--_n-range-thumb-focus-ring)}.n-range:focus::-moz-range-thumb{--_n-range-thumb-border-color:var(--n-color-accent);box-shadow:var(--_n-range-thumb-focus-ring)}`;let k=class extends(d(m(p(u(g(b(o))))))){constructor(){super(...arguments),this.direction=new v(this),this.min=0,this.max=10,this.step=1,this.expand=!1}render(){const r=Number(this.value)||0,e=Math.max(0,(r-this.min)/(this.max-this.min));return a`<div class="n-input-container">${this.renderLabel(a`<span class="n-range-output" aria-hidden="true">${r}</span>`)} <input ${t(this.focusableRef)} id="${this.inputId}" type="range" class="${i({"n-range":!0,"is-rtl":this.direction.isRTL})}" name="${c(this.name)}" min="${this.min}" step="${this.step}" max="${this.max}" style="${`--_n-range-progress: ${100*e}%`}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" .value="${this.value?this.value:0}" @input="${this.handleInput}" @change="${this.handleChange}" aria-describedby="${c(this.getDescribedBy())}" aria-invalid="${c(this.getInvalid())}"></div>${this.renderError()}`}handleInput(r){r.stopPropagation();const e=r.target;if(this.readonly)return r.preventDefault(),void(e.value=this.value);this.value=e.value,this.dispatchEvent(new l("input"))}};k.styles=[f,_,h,z],r([s()],k.prototype,"min",void 0),r([s()],k.prototype,"max",void 0),r([s()],k.prototype,"step",void 0),r([s({reflect:!0,type:Boolean})],k.prototype,"expand",void 0),k=r([e("nord-range")],k);var x=k;export{x as default};
|
|
2
|
+
//# sourceMappingURL=Range.js.map
|
package/lib/Range.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Range.js","sources":["../src/range/Range.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { NordEvent } from \"../common/events.js\"\n\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { ReadonlyMixin } from \"../common/mixins/ReadonlyMixin.js\"\nimport { AutocompleteMixin } from \"../common/mixins/AutocompleteMixin.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./Range.css\"\n\n/**\n * Range input lets user specify a numeric value using a slider which\n * must be no less than a given value, and no more than another given value.\n *\n * @status draft\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n *\n * @cssprop [--n-range-thumb-size=20px] - Controls the size of the thumb.\n * @cssprop [--n-range-track-color-active=var(--n-color-accent)] - Controls the color of the portion of the track that represents the current value.\n * @cssprop [--n-range-track-color-inactive=var(--n-color-border-strong)] - Controls the color of the portion of the track that represents the remaining value.\n * @cssprop [--n-range-track-size=3px] - Controls the height of the track.\n */\n@customElement(\"nord-range\")\nexport default class Range extends DraftComponentMixin(\n FormAssociatedMixin(AutocompleteMixin(ReadonlyMixin(InputMixin(FocusableMixin(LitElement)))))\n) {\n static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n private direction = new DirectionController(this)\n\n /**\n * Minimum value for the range slider.\n */\n @property() min: number = 0\n\n /**\n * Maximum value for the range slider.\n */\n @property() max: number = 10\n\n /**\n * Step amount for the range slider.\n */\n @property() step: number = 1\n\n /**\n * Controls whether the input expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n render() {\n const value = Number(this.value) || 0\n const percent = Math.max(0, (value - this.min) / (this.max - this.min))\n\n return html`\n <div class=\"n-input-container\">\n ${this.renderLabel(html`<span class=\"n-range-output\" aria-hidden=\"true\">${value}</span>`)}\n\n <input\n ${ref(this.focusableRef)}\n id=${this.inputId}\n type=\"range\"\n class=${classMap({\n \"n-range\": true,\n \"is-rtl\": this.direction.isRTL,\n })}\n name=${ifDefined(this.name)}\n min=${this.min}\n step=${this.step}\n max=${this.max}\n style=${`--_n-range-progress: ${percent * 100}%`}\n ?disabled=${this.disabled}\n ?required=${this.required}\n ?readonly=${this.readonly}\n .value=${this.value ? this.value : 0}\n @input=${this.handleInput}\n @change=${this.handleChange}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n />\n </div>\n\n ${this.renderError()}\n `\n }\n\n protected handleInput(e: Event) {\n e.stopPropagation()\n const target = e.target as HTMLInputElement\n\n if (this.readonly) {\n e.preventDefault()\n target.value = this.value\n return\n }\n\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\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-range\": Range\n }\n}\n"],"names":["Range","DraftComponentMixin","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","constructor","this","direction","DirectionController","min","max","step","expand","render","value","Number","percent","Math","html","renderLabel","ref","focusableRef","inputId","classMap","isRTL","ifDefined","name","disabled","required","readonly","handleInput","handleChange","getDescribedBy","getInvalid","renderError","e","stopPropagation","target","preventDefault","dispatchEvent","NordEvent","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","property","prototype","reflect","type","Boolean","customElement"],"mappings":"y5HAoCA,IAAqBA,EAArB,cAAmCC,EACjCC,EAAoBC,EAAkBC,EAAcC,EAAWC,EAAeC,SADhFC,kCAKUC,KAAAC,UAAY,IAAIC,EAAoBF,MAKhCA,KAAGG,IAAW,EAKdH,KAAGI,IAAW,GAKdJ,KAAIK,KAAW,EAKiBL,KAAMM,QAAG,CAuDtD,CArDCC,SACE,MAAMC,EAAQC,OAAOT,KAAKQ,QAAU,EAC9BE,EAAUC,KAAKP,IAAI,GAAII,EAAQR,KAAKG,MAAQH,KAAKI,IAAMJ,KAAKG,MAElE,OAAOS,CAAI,kCAELZ,KAAKa,YAAYD,CAAI,mDAAmDJ,sBAGtEM,EAAId,KAAKe,qBACNf,KAAKgB,gCAEFC,EAAS,CACf,WAAW,EACX,SAAUjB,KAAKC,UAAUiB,kBAEpBC,EAAUnB,KAAKoB,eAChBpB,KAAKG,cACJH,KAAKK,cACNL,KAAKI,eACH,wBAAkC,IAAVM,oBACpBV,KAAKqB,wBACLrB,KAAKsB,wBACLtB,KAAKuB,qBACRvB,KAAKQ,MAAQR,KAAKQ,MAAQ,cAC1BR,KAAKwB,yBACJxB,KAAKyB,mCACIN,EAAUnB,KAAK0B,oCACnBP,EAAUnB,KAAK2B,wBAIhC3B,KAAK4B,eAEV,CAESJ,YAAYK,GACpBA,EAAEC,kBACF,MAAMC,EAASF,EAAEE,OAEjB,GAAI/B,KAAKuB,SAGP,OAFAM,EAAEG,sBACFD,EAAOvB,MAAQR,KAAKQ,OAItBR,KAAKQ,MAAQuB,EAAOvB,MAKpBR,KAAKiC,cAAc,IAAIC,EAAU,SAClC,GA5EM3C,EAAM4C,OAAG,CAACC,EAAgBC,EAAgBC,EAAgBC,GAOrDC,EAAA,CAAXC,KAA0BlD,EAAAmD,UAAA,WAAA,GAKfF,EAAA,CAAXC,KAA2BlD,EAAAmD,UAAA,WAAA,GAKhBF,EAAA,CAAXC,KAA2BlD,EAAAmD,UAAA,YAAA,GAKgBF,EAAA,CAA3CC,EAAS,CAAEE,SAAS,EAAMC,KAAMC,WAAyBtD,EAAAmD,UAAA,cAAA,GAzBvCnD,EAAKiD,EAAA,CADzBM,EAAc,eACMvD,SAAAA"}
|
package/lib/Select.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,e as t}from"./query-assigned-elements-e6cbac30.js";import{i as o,y as n,s as r}from"./lit-element-9178eae5.js";import{e as i}from"./property-03f59dce.js";import{l as s}from"./if-defined-4598a996.js";import{n as a}from"./ref-0e619221.js";import"./Button.js";import l from"./Icon.js";import{I as d}from"./InputMixin-158f63fb.js";import{F as c}from"./FocusableMixin-34870ed3.js";import{F as p}from"./FormAssociatedMixin-
|
|
1
|
+
import{_ as e,e as t}from"./query-assigned-elements-e6cbac30.js";import{i as o,y as n,s as r}from"./lit-element-9178eae5.js";import{e as i}from"./property-03f59dce.js";import{l as s}from"./if-defined-4598a996.js";import{n as a}from"./ref-0e619221.js";import"./Button.js";import l from"./Icon.js";import{I as d}from"./InputMixin-158f63fb.js";import{F as c}from"./FocusableMixin-34870ed3.js";import{F as p}from"./FormAssociatedMixin-252fb0e9.js";import{A as u}from"./AutocompleteMixin-370de2be.js";import{S as b,i as m}from"./SizeMixin-4559b224.js";import{s as h}from"./Component-92eb6234.js";import{s as v}from"./FormField-081da729.js";import{S as f}from"./SlotController-89834aef.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./LightDomController-3c726b20.js";import"./cond-338158e9.js";import"./Spinner.js";import"./state-70f38ceb.js";import"./unsafe-html-6be42999.js";import"./observe-a9c6dfb6.js";import"./events-731d0007.js";import"./VisuallyHidden.js";var x=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><g transform="translate(6,6) scale(0.9)"><path fill="currentColor" d="M105 56a10.416 10.416 0 0 1-7.42-3.08L72.478 27.818a3.528 3.528 0 0 0-4.956 0L42.42 52.92a10.5 10.5 0 0 1-14.84-14.84l35-35a10.486 10.486 0 0 1 14.84 0l35 35A10.5 10.5 0 0 1 105 56zm-35 84a10.416 10.416 0 0 1-7.42-3.08l-35-35a10.5 10.5 0 0 1 14.84-14.84l25.102 25.102a3.528 3.528 0 0 0 4.956 0L97.58 87.08a10.5 10.5 0 1 1 14.84 14.84l-35 35A10.416 10.416 0 0 1 70 140z"/></g></svg>',title:"interface-dropdown-small",tags:"nordicon small interface dropdown select arrow up down caret triangle chevron"});const g=o`.n-select-container{position:relative;inline-size:fit-content}:host([expand]){inline-size:100%}:host([expand]) .n-select-container{inline-size:100%}select{-webkit-appearance:none;appearance:none;position:absolute;font-size:var(--n-font-size-m);font-family:var(--n-font-family);color:var(--n-color-text);inline-size:100%;opacity:.0001;cursor:pointer;background:0 0;border:0;block-size:var(--n-space-xl);inset-block-end:0;inset-inline-start:0;z-index:var(--n-index-default)}nord-button{--n-button-text-align:start}nord-icon{color:var(--n-color-icon)}.n-label-container:hover+.n-select-container nord-button,select:hover+nord-button{--n-button-border-color:var(--n-color-border-hover);--_n-button-background-color:var(--n-color-button-hover)}.n-label-container:hover+.n-select-container nord-button nord-icon,select:hover+nord-button nord-icon{color:var(--n-color-icon-hover)}select:focus+nord-button{--n-button-border-color:var(--n-color-accent);--_n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([disabled]){cursor:auto;pointer-events:none}:host([disabled]) nord-button{--n-input-border-color:var(--n-color-active);--_n-button-color:var(--n-color-text-weakest);--_n-button-background-color:var(--n-color-active);--_n-button-opacity:1}:host([disabled]) nord-icon{color:var(--n-color-text-weakest)}::slotted(:not([slot])){display:none}select[aria-invalid=true]+nord-button{--n-button-border-color:var(--n-color-status-danger)}`;l.registerIcon(x);let j=class extends(b(p(u(d(c(r)))))){constructor(){super(...arguments),this.defaultSlot=new f(this),this.inputId="select",this.expand=!1}get formValue(){return this.value||void 0}render(){const e=this.options,t=this.getButtonText(e),o=m[this.size]||m.m;return n`<slot></slot>${this.renderLabel()}<div class="n-select-container"><select ${a(this.focusableRef)} id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" name="${s(this.name)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${s(this.getDescribedBy())}" aria-invalid="${s(this.getInvalid())}" autocomplete="${this.autocomplete}">${this.placeholder&&n`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${e.map((e=>this.renderOption(e)))}</select><nord-button size="${this.size}" tabindex="-1" ?disabled="${this.disabled}" ?expand="${this.expand}" aria-hidden="true" type="button"><slot slot="start" name="icon"></slot>${t}<nord-icon slot="end" size="${o}" name="interface-dropdown-small"></nord-icon></nord-button></div>${this.renderError()}`}get options(){return Array.from(this.querySelectorAll("option"))}getButtonText(e){const t=e.find((e=>e.value===this.value.toString()));return t?t.text:this.placeholder?this.placeholder:e[0]?e[0].text:""}renderOption(e){return n`<option value="${s(e.value)}" ?disabled="${e.disabled}" .selected="${e.value===this.value.toString()}">${e.text}</option>`}};j.styles=[h,v,g],e([i({reflect:!0,type:Boolean})],j.prototype,"expand",void 0),j=e([t("nord-select")],j);var $=j;export{$ as default};
|
|
2
2
|
//# sourceMappingURL=Select.js.map
|
package/lib/Textarea.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,e as r}from"./query-assigned-elements-e6cbac30.js";import{i as t,y as o,s as n}from"./lit-element-9178eae5.js";import{e as a}from"./property-03f59dce.js";import{l as i}from"./if-defined-4598a996.js";import{n as s}from"./ref-0e619221.js";import{o as l}from"./observe-a9c6dfb6.js";import{F as d}from"./FocusableMixin-34870ed3.js";import{F as c}from"./FormAssociatedMixin-
|
|
1
|
+
import{_ as e,e as r}from"./query-assigned-elements-e6cbac30.js";import{i as t,y as o,s as n}from"./lit-element-9178eae5.js";import{e as a}from"./property-03f59dce.js";import{l as i}from"./if-defined-4598a996.js";import{n as s}from"./ref-0e619221.js";import{o as l}from"./observe-a9c6dfb6.js";import{F as d}from"./FocusableMixin-34870ed3.js";import{F as c}from"./FormAssociatedMixin-252fb0e9.js";import{I as p}from"./InputMixin-158f63fb.js";import{R as u,s as v}from"./TextField-a7382912.js";import{A as b}from"./AutocompleteMixin-370de2be.js";import{S as m}from"./SizeMixin-4559b224.js";import{s as h}from"./Component-92eb6234.js";import{s as x}from"./FormField-081da729.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-89834aef.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const f=t`:host{--_n-textarea-inline-size:var(--n-textarea-inline-size, 240px);--_n-textarea-block-size:var(--n-textarea-block-size, 76px);--_n-input-background:var(--n-textarea-background, var(--n-color-active));--_n-input-color:var(--n-textarea-color, var(--n-color-text));--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-border-strong));--_n-input-border-radius:var(--n-textarea-border-radius, var(--n-border-radius-s))}.n-input-container{position:relative;inline-size:var(--_n-textarea-inline-size)}.n-input{min-block-size:var(--_n-textarea-block-size);transition:border var(--n-transition-slowly),box-shadow var(--n-transition-slowly),background var(--n-transition-slowly);display:block;resize:vertical}:host([resize=auto]) .n-input{resize:none;overflow:hidden}:host([expand]){--_n-textarea-inline-size:100%}.n-input:hover,.n-label-container:hover+.n-input-container .n-input{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-border-hover))}.n-input:focus{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-accent));--_n-input-background:var(--n-textarea-background, var(--n-color-surface))}.n-input[aria-invalid=true]{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-status-danger))!important}.n-input:disabled,.n-input[readonly],.n-label-container:hover+.n-input-container .n-input:disabled,.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-active));--_n-input-color:var(--n-textarea-color, var(--n-color-text-weakest))}.n-input[readonly],.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-color:var(--n-textarea-color, var(--n-color-text-weak))}.n-input[readonly]:focus{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-accent))}`;let y=class extends(m(c(b(u(p(d(n))))))){constructor(){super(...arguments),this.inputId="textarea",this.resize="vertical",this.expand=!1}render(){var e;return o`${this.renderLabel()}<div class="n-input-container"><textarea ${s(this.focusableRef)} id="${this.inputId}" class="n-input" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" name="${i(this.name)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${i(this.placeholder)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${i(this.getDescribedBy())}" aria-invalid="${i(this.getInvalid())}" autocomplete="${this.autocomplete}"></textarea></div>${this.renderError()}`}resizeToFitContent(){const e=this.focusableRef.value;e&&("auto"===this.resize?(e.style.height="auto",e.style.height=`${e.scrollHeight}px`):e.style.height=null)}};y.styles=[h,x,v,f],e([a({reflect:!0})],y.prototype,"resize",void 0),e([a({reflect:!0,type:Boolean})],y.prototype,"expand",void 0),e([l("resize","updated"),l("value","updated")],y.prototype,"resizeToFitContent",null),y=e([r("nord-textarea")],y);var j=y;export{j as default};
|
|
2
2
|
//# sourceMappingURL=Textarea.js.map
|
package/lib/Toggle.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,e as n}from"./query-assigned-elements-e6cbac30.js";import{i,y as r,s as t}from"./lit-element-9178eae5.js";import{e as o}from"./property-03f59dce.js";import{l as a}from"./if-defined-4598a996.js";import{n as s}from"./ref-0e619221.js";import{F as l}from"./FocusableMixin-34870ed3.js";import{F as c}from"./FormAssociatedMixin-
|
|
1
|
+
import{_ as e,e as n}from"./query-assigned-elements-e6cbac30.js";import{i,y as r,s as t}from"./lit-element-9178eae5.js";import{e as o}from"./property-03f59dce.js";import{l as a}from"./if-defined-4598a996.js";import{n as s}from"./ref-0e619221.js";import{F as l}from"./FocusableMixin-34870ed3.js";import{F as c}from"./FormAssociatedMixin-252fb0e9.js";import{I as d}from"./InputMixin-158f63fb.js";import{s as g}from"./Component-92eb6234.js";import{s as p}from"./FormField-081da729.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-89834aef.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const h=i`:host{--_n-toggle-block-size:calc(var(--_n-toggle-inline-size) / 1.6);--_n-toggle-inline-size:3.2143em;--_n-toggle-thumb-margin:0.35em;display:inline-block;font-size:var(--n-font-size-m)}.n-flex{display:flex}.n-expand{flex:1;display:flex;justify-content:center;align-items:flex-start;flex-direction:column;min-block-size:100%}.n-input-container{position:relative}.n-toggle{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;inline-size:var(--_n-toggle-inline-size);block-size:var(--_n-toggle-block-size);border-radius:var(--n-border-radius-pill);background:var(--_n-toggle-background,var(--n-color-border-strong));cursor:pointer;transition:background var(--n-transition-slowly);font-size:var(--_n-toggle-size,var(--n-font-size-m))}.n-toggle::before{content:"";display:block;aspect-ratio:1/1;block-size:calc(100% - 2 * var(--_n-toggle-thumb-margin));background:var(--n-color-text-on-accent);border-radius:var(--n-border-radius-circle);transition:margin;transition-duration:inherit;margin-inline-start:var(--_n-toggle-thumb-margin);box-shadow:var(--n-box-shadow)}input:checked{--_n-toggle-background:var(--n-color-text-link)}input:checked::before{margin-inline-start:calc(var(--_n-toggle-inline-size) - var(--_n-toggle-block-size) + var(--_n-toggle-thumb-margin))}input:checked[aria-invalid]{--_n-toggle-background:var(--n-color-status-danger)}input:focus{outline:0;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)}:host([disabled]) label{color:var(--n-color-text-weaker);cursor:default}:host([disabled]) input{opacity:.3;cursor:not-allowed}.n-label-container{padding-block-end:0}label{-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-l);padding-inline-start:var(--n-space-s);cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:calc(var(--n-space-s)/ 2);padding-inline-start:var(--n-space-s)}:host([reverse]) .n-error,:host([reverse]) .n-hint,:host([reverse]) label{padding-inline-start:0;padding-inline-end:var(--n-space-s)}:host([size="s"]) .n-toggle{--_n-toggle-size:var(--n-font-size-xs)}:host([size="l"]) .n-toggle{--_n-toggle-size:var(--n-font-size-xl)}`;let v=class extends(c(d(l(t)))){constructor(){super(...arguments),this.checked=!1,this.reverse=!1,this.size="m"}get formValue(){return this.checked?this.value||"on":void 0}render(){const e=r`<div class="n-expand">${this.renderLabel()} ${this.renderError()}</div>`,n=r`<div class="n-input-container"><input ${s(this.focusableRef)} class="n-toggle" id="${this.inputId}" type="checkbox" role="switch" name="${a(this.name)}" .value="${this.value}" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" @change="${this.handleChange}"></div>`;return r`<div class="n-flex">${this.reverse?[e,n]:[n,e]}</div>`}handleChange(e){const n=e.target;this.checked=n.checked,super.handleChange(e)}};v.styles=[g,p,h],e([o({type:Boolean})],v.prototype,"checked",void 0),e([o({type:Boolean})],v.prototype,"reverse",void 0),e([o({reflect:!0})],v.prototype,"size",void 0),v=e([n("nord-toggle")],v);var m=v;export{m as default};
|
|
2
2
|
//# sourceMappingURL=Toggle.js.map
|