@nordhealth/components 2.8.0 → 2.8.1
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 +2696 -2689
- package/lib/{Calendar-685c3990.js → Calendar-1904bf2f.js} +1 -1
- package/lib/{Calendar-685c3990.js.map → Calendar-1904bf2f.js.map} +1 -1
- package/lib/Calendar.js +1 -1
- package/lib/Card.js +1 -1
- package/lib/Card.js.map +1 -1
- package/lib/Checkbox.js +1 -1
- package/lib/DatePicker.js +1 -1
- package/lib/Drawer.js +1 -1
- package/lib/Fieldset.js +1 -1
- package/lib/{FormAssociatedMixin-3cc6e83b.js → FormAssociatedMixin-0d57fdc8.js} +2 -2
- package/lib/{FormAssociatedMixin-3cc6e83b.js.map → FormAssociatedMixin-0d57fdc8.js.map} +1 -1
- package/lib/Header.js +1 -1
- package/lib/Icon.js +1 -1
- package/lib/Input.js +1 -1
- package/lib/Layout.js +1 -1
- package/lib/Modal.js +1 -1
- package/lib/NavItem.js +1 -1
- package/lib/Radio.js +1 -1
- package/lib/Select.js +1 -1
- package/lib/{SlotController-ea6eff46.js → SlotController-89834aef.js} +2 -2
- package/lib/SlotController-89834aef.js.map +1 -0
- package/lib/Tab.js +1 -1
- package/lib/TabGroup.js +1 -1
- package/lib/Textarea.js +1 -1
- package/lib/ToastGroup.js.map +1 -1
- package/lib/Toggle.js +1 -1
- package/lib/Tooltip.js +1 -1
- package/lib/Tooltip.js.map +1 -1
- package/lib/bundle.js +3 -3
- package/lib/bundle.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/src/card/Card.test.d.ts +2 -1
- package/lib/src/toast-group/ToastGroup.d.ts +1 -1
- package/lib/src/tooltip/Tooltip.d.ts +1 -0
- package/package.json +2 -2
- package/lib/SlotController-ea6eff46.js.map +0 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import{_ as e,e as a}from"./query-assigned-elements-e6cbac30.js";import{i as t,s as n,y as o}from"./lit-element-9178eae5.js";import{e as s}from"./property-03f59dce.js";import{t as i}from"./state-70f38ceb.js";import{i as r}from"./query-2d22378e.js";import{c as l}from"./repeat-ae6f075f.js";import{o as d}from"./tinykeys.module-84e6cc41.js";import"./Button.js";import"./VisuallyHidden.js";import c from"./Icon.js";import{E as h}from"./EventController-d99ebeef.js";import{D as u}from"./DirectionController-8b298382.js";import{LocalizeController as p}from"./LocalizeController.js";import{r as v}from"./number-c3ab3e95.js";import{i as m,p as f,a as g,s as y,e as b,b as w,g as x,c as D,d as k,f as z,h as F,j as M,k as S,l as Y}from"./dates-a8de5b83.js";import{o as $}from"./observe-a9c6dfb6.js";import{monthView as j}from"./month-view.js";import{DateSelectEvent as _}from"./DateSelectEvent.js";import{s as C}from"./Component-92eb6234.js";var L=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M105 57.4 47.6 2.8a10.566 10.566 0 1 0-14.56 15.316l51.968 49.35a3.486 3.486 0 0 1 0 5.068l-51.968 49.35a10.502 10.502 0 0 0 14.462 15.232l57.638-54.74A17.584 17.584 0 0 0 105 57.4z"/></svg>',title:"arrow-right-small",tags:"nordicon arrow right small caret pointing triangle chevron"});var N=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M99.736 140a10.486 10.486 0 0 1-7.238-2.884L35 82.6a17.598 17.598 0 0 1-.14-24.976l57.638-54.74a10.502 10.502 0 1 1 14.462 15.232l-51.968 49.35a3.486 3.486 0 0 0 0 5.068l51.968 49.35A10.5 10.5 0 0 1 99.736 140z"/></svg>',title:"arrow-left-small",tags:"nordicon arrow left small caret pointing triangle chevron"});var T=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M70 110.236a17.332 17.332 0 0 1-12.306-5.096L2.884 47.502A10.502 10.502 0 1 1 18.116 33.04l49.35 51.968a3.486 3.486 0 0 0 5.068 0l49.35-51.968a10.502 10.502 0 1 1 15.232 14.462L82.6 105a17.766 17.766 0 0 1-12.6 5.236z"/></svg>',title:"arrow-down-small",tags:"nordicon arrow down small caret pointing triangle chevron"});const O=e=>e.preventDefault();class I{constructor(e,a){this.hadFirstUpdate=!1,this.initialTouchX=0,this.initialTouchY=0,this.handleTouchStart=e=>{const[{pageX:a,pageY:t}]=e.changedTouches;this.initialTouchX=a,this.initialTouchY=t},this.handleTouchEnd=e=>{const[{pageX:a,pageY:t}]=e.changedTouches,{matchesGesture:n,onSwipeEnd:o}=this.options,s=a-this.initialTouchX,i=t-this.initialTouchY,r={initialX:this.initialTouchX,initialY:this.initialTouchY,pageX:a,pageY:t,distX:s,distY:i};n(r)&&(e.preventDefault(),o(r))},e.addController(this),this.events=new h(e),this.options={target:()=>e,...a}}hostUpdated(){if(!this.hadFirstUpdate){this.hadFirstUpdate=!0;const e=this.options.target();this.events.listen(e,"touchstart",this.handleTouchStart),this.events.listen(e,"touchmove",O),this.events.listen(e,"touchend",this.handleTouchEnd)}}hostDisconnected(){this.hadFirstUpdate=!1}}const X=({distX:e,distY:a})=>Math.abs(e)>=70&&Math.abs(a)<=70,A=({distX:e,distY:a})=>Math.abs(a)>=70&&Math.abs(e)<=70&&a>0,E=t`:host{--_n-calendar-box-shadow:var(--n-calendar-box-shadow, var(--n-box-shadow-popout));--_n-calendar-border-radius:var(--n-calendar-border-radius, var(--n-border-radius-s));--_n-calendar-padding:var(--n-space-m) var(--n-space-m) calc(var(--n-space-m) * 1.25);--_n-calendar-inline-size:max-content;font-feature-settings:var(--n-font-features-reduced)}.n-calendar{-webkit-user-select:none;user-select:none;background:var(--n-color-surface);box-shadow:var(--_n-calendar-box-shadow);border-radius:var(--_n-calendar-border-radius);inline-size:var(--_n-calendar-inline-size);min-inline-size:min-content;padding:var(--_n-calendar-padding)}:host([expand]){--_n-calendar-inline-size:100%}.n-calendar-table{border-collapse:collapse;border-spacing:0;color:var(--n-color-text);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight);line-height:var(--n-date-picker-line-height);text-align:center;inline-size:100%}.n-calendar-table-header{font-size:var(--n-font-size-s);font-weight:var(--n-font-weight-active);letter-spacing:1px;line-height:var(--n-date-picker-line-height);padding-block-end:8px;text-decoration:none;text-transform:uppercase}.n-calendar-cell{text-align:center;padding:1px}.n-calendar-day{-moz-appearance:none;-webkit-appearance:none;appearance:none;background:0 0;border:0;border-radius:var(--n-border-radius-s);color:var(--n-color-text);cursor:pointer;display:inline-block;font-family:var(--n-font-family);font-size:var(--n-font-size-m);font-variant-numeric:tabular-nums;font-weight:var(--n-font-weight);block-size:36px;padding:0 0 1px;position:relative;text-align:center;vertical-align:middle;inline-size:36px}.n-calendar-day[aria-current=date]{box-shadow:0 0 0 1px var(--n-color-accent);color:var(--n-color-text-link);position:relative}.n-calendar-day:hover{background:var(--n-color-active)}.n-calendar-day:focus,.n-calendar-day[aria-pressed=true]{background:var(--n-color-accent);box-shadow:none;color:var(--n-color-text-on-accent);outline:0}.n-calendar-day:active{background:var(--n-color-accent);box-shadow:none!important;color:var(--n-color-text-on-accent)}.n-calendar-day:focus{box-shadow:0 0 5px var(--n-color-accent)}.n-calendar-day:not(.is-month){box-shadow:none}.n-calendar-day:not(.is-month),.n-calendar-day[aria-disabled=true]{background:0 0;color:var(--n-color-text-weakest);cursor:default}.n-calendar-day[aria-disabled=true]{color:var(--n-color-text-weaker);text-decoration:line-through}.n-calendar-day:not(.is-month)[aria-disabled=true]{color:var(--n-color-text-weakest);text-decoration:none}.n-calendar-day[aria-disabled=true][aria-current=date]{box-shadow:0 0 0 1px var(--n-color-accent);color:var(--n-color-text-link)}.n-calendar-day[aria-disabled=true][aria-current=date]:focus{box-shadow:0 0 5px var(--n-color-accent);background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-calendar-day[aria-disabled=true]:not([aria-current=date])::before{display:none}.n-calendar-day.is-outside{background:0 0;box-shadow:none;color:var(--n-color-text-weakest);cursor:default;pointer-events:none}.n-calendar-day.is-outside::before{display:none}.n-calendar-header{align-items:start;display:flex;justify-content:space-between;margin-block-end:16px;inline-size:100%}.n-calendar-nav{white-space:nowrap}.n-calendar-nav nord-button{--_n-button-padding-inline:11px;margin-inline-start:calc(var(--n-space-s)/ 2)}.n-calendar-select{display:inline-flex;margin-block-start:4px;position:relative;line-height:var(--n-line-height)}.n-calendar-select span{margin-inline-end:var(--n-space-s)}.n-calendar-select select{cursor:pointer;font-size:var(--n-font-size-l);block-size:100%;inset-inline-start:0;opacity:0;position:absolute;inset-block-start:0;inline-size:100%}.n-calendar-select select:focus+.n-calendar-select-label{box-shadow:0 0 0 2px var(--n-color-accent)}.n-calendar-select-label{align-items:center;border-radius:var(--n-border-radius-s);color:var(--n-color-text);display:flex;font-size:var(--n-font-size-xl);font-weight:var(--n-font-weight-active);line-height:var(--n-date-picker-line-height);padding-block:0;padding-inline:8px 4px;pointer-events:none;position:relative;inline-size:100%;text-transform:capitalize}`;c.registerIcon(L),c.registerIcon(N),c.registerIcon(T);const W=e=>a=>{a.preventDefault(),e(a)},U=()=>!1;let B=class extends n{constructor(){super(...arguments),this.dialogLabelId="dialog-header",this.direction=new u(this),this.swipe=new I(this,{matchesGesture:X,onSwipeEnd:({distX:e})=>this.addMonths(e<0?1:-1)}),this.shortcuts=d({ArrowRight:W((()=>this.addDays(this.direction.isLTR?1:-1))),ArrowLeft:W((()=>this.addDays(this.direction.isLTR?-1:1))),ArrowDown:W((()=>this.addDays(7))),ArrowUp:W((()=>this.addDays(-7))),Home:W((()=>this.startOfWeek())),End:W((()=>this.endOfWeek())),PageUp:W((()=>this.addMonths(-1))),PageDown:W((()=>this.addMonths(1))),"Shift+PageUp":W((()=>this.addYears(-1))),"Shift+PageDown":W((()=>this.addYears(1)))}),this.localize=new p(this,{onLangChange:()=>this.handleLangChange()}),this.value="",this.firstDayOfWeek=1,this.min="",this.max="",this.expand=!1,this.isDateDisabled=U,this.activeFocus=!1,this.focusedDay=new Date,this.handleDaySelect=e=>{const a=m(e,f(this.min),f(this.max)),t=!this.isDateDisabled(e);a&&t&&(this.value=g(e),this.dispatchEvent(new _("change",e)))},this.handleMonthSelect=e=>{this.setMonth(parseInt(e.target.value,10))},this.handleYearSelect=e=>{this.setYear(parseInt(e.target.value,10))},this.handleNextMonthClick=e=>{e.preventDefault(),this.addMonths(1)},this.handlePreviousMonthClick=e=>{e.preventDefault(),this.addMonths(-1)},this.enableActiveFocus=()=>{this.activeFocus=!0},this.disableActiveFocus=()=>{this.activeFocus=!1}}focus(e){var a;const t=null!==(a=null==e?void 0:e.target)&&void 0!==a?a:"day";"day"===t?this.focusedDayNode.focus():"month"===t&&this.monthSelectNode.focus()}render(){const e=f(this.value),a=this.focusedDay.getMonth(),t=this.focusedDay.getFullYear(),n=f(this.min),s=f(this.max),i=n?y(n):void 0,r=s?b(s):void 0,d=(e||this.focusedDay).getFullYear(),c=n?n.getFullYear():d-10,h=s?s.getFullYear():d+10;return o`<div class="n-calendar"><div class="n-calendar-header"><div><nord-visually-hidden><h2 id="${this.dialogLabelId}" aria-live="polite" aria-atomic="true">${this.monthNames[a]}, ${this.focusedDay.getFullYear()}</h2></nord-visually-hidden><div class="n-calendar-select"><select aria-label="${this.localize.term("monthSelectLabel")}" class="n-calendar-select-month" @input="${this.handleMonthSelect}">${this.monthNames.map(((e,n)=>o`<option value="${n}" ?selected="${n===a}" ?disabled="${!m(new Date(t,n,1),i,r)}">${e}</option>`))}</select><div class="n-calendar-select-label" aria-hidden="true"><span>${this.monthNamesShort[a]}</span><nord-icon color="var(--n-color-icon)" name="arrow-down-small" size="xxs"></nord-icon></div></div><div class="n-calendar-select"><select aria-label="${this.localize.term("yearSelectLabel")}" class="n-calendar-select-year" @input="${this.handleYearSelect}">${l(v(c,h),(e=>e),(e=>o`<option ?selected="${e===t}">${e}</option>`))}</select><div class="n-calendar-select-label" aria-hidden="true"><span>${this.focusedDay.getFullYear()}</span><nord-icon color="var(--n-color-icon)" name="arrow-down-small" size="xxs"></nord-icon></div></div></div><div class="n-calendar-nav"><nord-button class="n-calendar-prev" @click="${this.handlePreviousMonthClick}" ?disabled="${w(n,this.focusedDay)}" type="button"><nord-visually-hidden>${this.localize.term("prevMonthLabel")}</nord-visually-hidden><nord-icon name="${this.direction.isLTR?"arrow-left-small":"arrow-right-small"}" size="s"></nord-icon></nord-button><nord-button class="n-calendar-next" @click="${this.handleNextMonthClick}" ?disabled="${w(s,this.focusedDay)}" type="button"><nord-visually-hidden>${this.localize.term("nextMonthLabel")}</nord-visually-hidden><nord-icon name="${this.direction.isLTR?"arrow-right-small":"arrow-left-small"}" size="s"></nord-icon></nord-button></div></div>${j({onFocusOut:this.disableActiveFocus,onFocusIn:this.enableActiveFocus,dateFormatter:this.dateFormatShort,selectedDate:e,focusedDate:this.focusedDay,onDateSelect:this.handleDaySelect,onKeyboardNavigation:this.shortcuts,labelledById:this.dialogLabelId,dayNames:this.dayNames,dayNamesShort:this.dayNamesShort,firstDayOfWeek:this.firstDayOfWeek,min:n,max:s,isDateDisabled:this.isDateDisabled})}</div>`}handleValueChange(){this.setFocusedDay(f(this.value)||new Date)}handleFocusedDayChange(){this.activeFocus&&this.focusedDayNode.focus()}handleLangChange(){const e=this.localize.resolvedLang;this.dateFormatShort=new Intl.DateTimeFormat(e,{day:"numeric",month:"long"}),this.monthNames=x(e,"long"),this.monthNamesShort=x(e,"short"),this.dayNames=D(e,"long"),this.dayNamesShort=D(e,"narrow")}addDays(e){this.setFocusedDay(k(this.focusedDay,e))}addMonths(e){this.setMonth(this.focusedDay.getMonth()+e)}addYears(e){this.setYear(this.focusedDay.getFullYear()+e)}startOfWeek(){this.setFocusedDay(z(this.focusedDay,this.firstDayOfWeek))}endOfWeek(){this.setFocusedDay(F(this.focusedDay,this.firstDayOfWeek))}setMonth(e){const a=M(y(this.focusedDay),e),t=b(a),n=M(this.focusedDay,e);this.setFocusedDay(S(n,a,t))}setYear(e){const a=Y(y(this.focusedDay),e),t=b(a),n=Y(this.focusedDay,e);this.setFocusedDay(S(n,a,t))}setFocusedDay(e){this.focusedDay=S(e,f(this.min),f(this.max)),this.dispatchEvent(new _("nord-focus-date",this.focusedDay))}};B.styles=[C,E],e([r(".n-calendar-select-month",!0)],B.prototype,"monthSelectNode",void 0),e([r('button[tabindex="0"]')],B.prototype,"focusedDayNode",void 0),e([s()],B.prototype,"value",void 0),e([s({type:Number})],B.prototype,"firstDayOfWeek",void 0),e([s()],B.prototype,"min",void 0),e([s()],B.prototype,"max",void 0),e([s({reflect:!0,type:Boolean})],B.prototype,"expand",void 0),e([s({attribute:!1})],B.prototype,"isDateDisabled",void 0),e([i()],B.prototype,"activeFocus",void 0),e([i()],B.prototype,"focusedDay",void 0),e([$("value")],B.prototype,"handleValueChange",null),e([$("focusedDay","updated")],B.prototype,"handleFocusedDayChange",null),B=e([a("nord-calendar")],B);var P=B;export{P as C,I as S,A as i};
|
|
2
|
-
//# sourceMappingURL=Calendar-
|
|
2
|
+
//# sourceMappingURL=Calendar-1904bf2f.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar-685c3990.js","sources":["../../icons/lib/assets/arrow-right-small.js","../../icons/lib/assets/arrow-left-small.js","../../icons/lib/assets/arrow-down-small.js","../src/common/controllers/SwipeController.ts","../src/calendar/Calendar.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M105 57.4 47.6 2.8a10.566 10.566 0 1 0-14.56 15.316l51.968 49.35a3.486 3.486 0 0 1 0 5.068l-51.968 49.35a10.502 10.502 0 0 0 14.462 15.232l57.638-54.74A17.584 17.584 0 0 0 105 57.4z\"/></svg>'\nexport const title = \"arrow-right-small\"\nexport const tags = \"nordicon arrow right small caret pointing triangle chevron\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M99.736 140a10.486 10.486 0 0 1-7.238-2.884L35 82.6a17.598 17.598 0 0 1-.14-24.976l57.638-54.74a10.502 10.502 0 1 1 14.462 15.232l-51.968 49.35a3.486 3.486 0 0 0 0 5.068l51.968 49.35A10.5 10.5 0 0 1 99.736 140z\"/></svg>'\nexport const title = \"arrow-left-small\"\nexport const tags = \"nordicon arrow left small caret pointing triangle chevron\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M70 110.236a17.332 17.332 0 0 1-12.306-5.096L2.884 47.502A10.502 10.502 0 1 1 18.116 33.04l49.35 51.968a3.486 3.486 0 0 0 5.068 0l49.35-51.968a10.502 10.502 0 1 1 15.232 14.462L82.6 105a17.766 17.766 0 0 1-12.6 5.236z\"/></svg>'\nexport const title = \"arrow-down-small\"\nexport const tags = \"nordicon arrow down small caret pointing triangle chevron\"\n","import { ReactiveController, ReactiveElement } from \"lit\"\nimport { EventController } from \"./EventController.js\"\n\nexport type SwipeDetails = {\n initialX: number\n initialY: number\n pageX: number\n pageY: number\n distX: number\n distY: number\n}\n\nconst preventDefault = (e: Event) => e.preventDefault()\n\ntype SetRequired<T, K extends keyof T> = T & { [Property in K]-?: T[K] }\ntype SwipeControllerOptions = {\n target?: () => HTMLElement\n matchesGesture: (details: SwipeDetails) => boolean\n onSwipeEnd: (details: SwipeDetails) => void\n}\n\nexport class SwipeController implements ReactiveController {\n private events: EventController\n private hadFirstUpdate = false\n\n private initialTouchX: number = 0\n private initialTouchY: number = 0\n private options: SetRequired<SwipeControllerOptions, \"target\">\n\n constructor(host: ReactiveElement, options: SwipeControllerOptions) {\n host.addController(this)\n this.events = new EventController(host)\n\n this.options = {\n target: () => host,\n ...options,\n }\n }\n\n hostUpdated() {\n if (!this.hadFirstUpdate) {\n this.hadFirstUpdate = true\n\n const target = this.options.target()\n this.events.listen(target, \"touchstart\", this.handleTouchStart)\n this.events.listen(target, \"touchmove\", preventDefault)\n this.events.listen(target, \"touchend\", this.handleTouchEnd)\n }\n }\n\n hostDisconnected() {\n this.hadFirstUpdate = false\n }\n\n private handleTouchStart = (event: TouchEvent) => {\n const [{ pageX, pageY }] = event.changedTouches\n this.initialTouchX = pageX\n this.initialTouchY = pageY\n }\n\n private handleTouchEnd = (event: TouchEvent) => {\n const [{ pageX, pageY }] = event.changedTouches\n const { matchesGesture, onSwipeEnd } = this.options\n\n const distX = pageX - this.initialTouchX\n const distY = pageY - this.initialTouchY\n const details = { initialX: this.initialTouchX, initialY: this.initialTouchY, pageX, pageY, distX, distY }\n\n if (matchesGesture(details)) {\n event.preventDefault()\n onSwipeEnd(details)\n }\n }\n}\n\nconst THRESHOLD = 70\n\nexport const isHorizontalSwipe = ({ distX, distY }: SwipeDetails) =>\n Math.abs(distX) >= THRESHOLD && Math.abs(distY) <= THRESHOLD\n\nexport const isDownwardsSwipe = ({ distX, distY }: SwipeDetails) =>\n Math.abs(distY) >= THRESHOLD && Math.abs(distX) <= THRESHOLD && distY > 0\n","import { html, LitElement } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { repeat } from \"lit/directives/repeat.js\"\nimport { createKeybindingsHandler } from \"tinykeys\"\nimport * as arrowRightIcon from \"@nordhealth/icons/lib/assets/arrow-right-small.js\"\nimport * as arrowLeftIcon from \"@nordhealth/icons/lib/assets/arrow-left-small.js\"\nimport * as arrowDownIcon from \"@nordhealth/icons/lib/assets/arrow-down-small.js\"\n\nimport \"../button/Button.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\nimport Icon from \"../icon/Icon.js\"\n\nimport { isHorizontalSwipe, SwipeController } from \"../common/controllers/SwipeController.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\n\nimport { range } from \"../common/number.js\"\nimport {\n addDays,\n clamp,\n DaysOfWeek,\n endOfMonth,\n endOfWeek,\n getDayNames,\n getMonthNames,\n inRange,\n isEqualMonth,\n parseISODate,\n printISODate,\n setMonth,\n setYear,\n startOfMonth,\n startOfWeek,\n} from \"../common/dates.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\nimport { monthView } from \"./month-view.js\"\nimport { DateSelectEvent } from \"./DateSelectEvent.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Calendar.css\"\n\nexport type DateDisabledPredicate = (date: Date) => boolean\n\nIcon.registerIcon(arrowRightIcon)\nIcon.registerIcon(arrowLeftIcon)\nIcon.registerIcon(arrowDownIcon)\n\nconst preventDefault = (fn: EventListener) => (e: Event) => {\n e.preventDefault()\n fn(e)\n}\n\nconst isDateDisabled: DateDisabledPredicate = () => false\n\n/**\n * Calendar allows user to pick a date. It comes with built-in\n * functionality that allows you to set a minimum and a maximum allowed date.\n * Please note that the date must be passed in ISO-8601 format.\n *\n * @status ready\n * @category list\n * @fires {DateSelectEvent} change - Dispatched when a date is selected and the value changes.\n * @fires {DateSelectEvent} nord-focus-date - Dispatched when the calendar's focused date changes.\n *\n * @cssprop [--n-calendar-border-radius=var(--n-border-radius)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-calendar-box-shadow=var(--n-box-shadow-popout)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).\n */\n@customElement(\"nord-calendar\")\nexport default class Calendar extends LitElement {\n static styles = [componentStyle, style]\n\n private dialogLabelId = \"dialog-header\"\n\n @query(\".n-calendar-select-month\", true) private monthSelectNode!: HTMLElement\n @query(`button[tabindex=\"0\"]`) private focusedDayNode!: HTMLButtonElement\n\n private direction = new DirectionController(this)\n private swipe = new SwipeController(this, {\n matchesGesture: isHorizontalSwipe,\n onSwipeEnd: ({ distX }) => this.addMonths(distX < 0 ? 1 : -1),\n })\n\n private shortcuts = createKeybindingsHandler({\n ArrowRight: preventDefault(() => this.addDays(this.direction.isLTR ? 1 : -1)),\n ArrowLeft: preventDefault(() => this.addDays(this.direction.isLTR ? -1 : 1)),\n ArrowDown: preventDefault(() => this.addDays(7)),\n ArrowUp: preventDefault(() => this.addDays(-7)),\n Home: preventDefault(() => this.startOfWeek()),\n End: preventDefault(() => this.endOfWeek()),\n PageUp: preventDefault(() => this.addMonths(-1)),\n PageDown: preventDefault(() => this.addMonths(1)),\n \"Shift+PageUp\": preventDefault(() => this.addYears(-1)),\n \"Shift+PageDown\": preventDefault(() => this.addYears(1)),\n })\n\n private localize = new LocalizeController<\"nord-calendar\">(this, {\n onLangChange: () => this.handleLangChange(),\n })\n\n /**\n * Whilst dateAdapter is used for handling the formatting/parsing dates in the input,\n * these are used to format dates exclusively for the benefit of screen readers.\n *\n * We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n * better performance when formatting large number of dates. See:\n * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n */\n private dateFormatShort!: Intl.DateTimeFormat\n private monthNames!: string[]\n private monthNamesShort!: string[]\n private dayNames!: string[]\n private dayNamesShort!: string[]\n\n /**\n * The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.\n */\n @property() value: string = \"\"\n\n /**\n * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n * Default is Monday.\n */\n @property({ type: Number }) firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n\n /**\n * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the max property.\n */\n @property() min: string = \"\"\n\n /**\n * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the min property.\n */\n @property() max: string = \"\"\n\n /**\n * Controls whether the calendar expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n /**\n * Controls which days are disabled and therefore disallowed.\n * For example, this can be used to disallow selection of weekends.\n */\n @property({ attribute: false }) isDateDisabled: DateDisabledPredicate = isDateDisabled\n\n @state() private activeFocus = false\n @state() private focusedDay = new Date()\n\n /**\n * Programmatically move focus to the calendar.\n * @param options An object which controls aspects of the focusing process.\n */\n focus(options?: FocusOptions & { target: \"day\" | \"month\" }) {\n const target = options?.target ?? \"day\"\n\n if (target === \"day\") {\n this.focusedDayNode.focus()\n } else if (target === \"month\") {\n this.monthSelectNode.focus()\n }\n }\n\n render() {\n const valueAsDate = parseISODate(this.value)\n const focusedMonth = this.focusedDay.getMonth()\n const focusedYear = this.focusedDay.getFullYear()\n\n const minDate = parseISODate(this.min)\n const maxDate = parseISODate(this.max)\n const minDateStartOfMonth = minDate ? startOfMonth(minDate) : undefined\n const maxDateEndOfMonth = maxDate ? endOfMonth(maxDate) : undefined\n\n const selectedYear = (valueAsDate || this.focusedDay).getFullYear()\n const minYear = minDate ? minDate.getFullYear() : selectedYear - 10\n const maxYear = maxDate ? maxDate.getFullYear() : selectedYear + 10\n\n return html`\n <div class=\"n-calendar\">\n <div class=\"n-calendar-header\">\n <div>\n <nord-visually-hidden>\n <h2 id=${this.dialogLabelId} aria-live=\"polite\" aria-atomic=\"true\">\n ${this.monthNames[focusedMonth]}, ${this.focusedDay.getFullYear()}\n </h2>\n </nord-visually-hidden>\n\n <div class=\"n-calendar-select\">\n <select\n aria-label=${this.localize.term(\"monthSelectLabel\")}\n class=\"n-calendar-select-month\"\n @input=${this.handleMonthSelect}\n >\n ${this.monthNames.map(\n (month, i) =>\n html`\n <option\n value=${i}\n ?selected=${i === focusedMonth}\n ?disabled=${!inRange(new Date(focusedYear, i, 1), minDateStartOfMonth, maxDateEndOfMonth)}\n >\n ${month}\n </option>\n `\n )}\n </select>\n <div class=\"n-calendar-select-label\" aria-hidden=\"true\">\n <span>${this.monthNamesShort[focusedMonth]}</span>\n <nord-icon color=\"var(--n-color-icon)\" name=\"arrow-down-small\" size=\"xxs\"></nord-icon>\n </div>\n </div>\n\n <div class=\"n-calendar-select\">\n <select\n aria-label=${this.localize.term(\"yearSelectLabel\")}\n class=\"n-calendar-select-year\"\n @input=${this.handleYearSelect}\n >\n ${repeat(\n range(minYear, maxYear),\n year => year,\n year => html`<option ?selected=${year === focusedYear}>${year}</option>`\n )}\n </select>\n <div class=\"n-calendar-select-label\" aria-hidden=\"true\">\n <span>${this.focusedDay.getFullYear()}</span>\n <nord-icon color=\"var(--n-color-icon)\" name=\"arrow-down-small\" size=\"xxs\"></nord-icon>\n </div>\n </div>\n </div>\n\n <div class=\"n-calendar-nav\">\n <nord-button\n class=\"n-calendar-prev\"\n @click=${this.handlePreviousMonthClick}\n ?disabled=${isEqualMonth(minDate, this.focusedDay)}\n type=\"button\"\n >\n <nord-visually-hidden>${this.localize.term(\"prevMonthLabel\")}</nord-visually-hidden>\n <nord-icon name=${this.direction.isLTR ? \"arrow-left-small\" : \"arrow-right-small\"} size=\"s\"></nord-icon>\n </nord-button>\n\n <nord-button\n class=\"n-calendar-next\"\n @click=${this.handleNextMonthClick}\n ?disabled=${isEqualMonth(maxDate, this.focusedDay)}\n type=\"button\"\n >\n <nord-visually-hidden>${this.localize.term(\"nextMonthLabel\")}</nord-visually-hidden>\n <nord-icon name=${this.direction.isLTR ? \"arrow-right-small\" : \"arrow-left-small\"} size=\"s\"></nord-icon>\n </nord-button>\n </div>\n </div>\n\n ${monthView({\n onFocusOut: this.disableActiveFocus,\n onFocusIn: this.enableActiveFocus,\n dateFormatter: this.dateFormatShort,\n selectedDate: valueAsDate,\n focusedDate: this.focusedDay,\n onDateSelect: this.handleDaySelect,\n onKeyboardNavigation: this.shortcuts,\n labelledById: this.dialogLabelId,\n dayNames: this.dayNames,\n dayNamesShort: this.dayNamesShort,\n firstDayOfWeek: this.firstDayOfWeek,\n min: minDate,\n max: maxDate,\n isDateDisabled: this.isDateDisabled,\n })}\n </div>\n `\n }\n\n @observe(\"value\")\n protected handleValueChange() {\n this.setFocusedDay(parseISODate(this.value) || new Date())\n }\n\n @observe(\"focusedDay\", \"updated\")\n protected handleFocusedDayChange() {\n if (this.activeFocus) {\n this.focusedDayNode.focus()\n }\n }\n\n private handleLangChange() {\n const lang = this.localize.resolvedLang\n this.dateFormatShort = new Intl.DateTimeFormat(lang, { day: \"numeric\", month: \"long\" })\n this.monthNames = getMonthNames(lang, \"long\")\n this.monthNamesShort = getMonthNames(lang, \"short\")\n this.dayNames = getDayNames(lang, \"long\")\n this.dayNamesShort = getDayNames(lang, \"narrow\")\n }\n\n private handleDaySelect = (day: Date) => {\n const isInRange = inRange(day, parseISODate(this.min), parseISODate(this.max))\n const isAllowed = !this.isDateDisabled(day)\n\n if (isInRange && isAllowed) {\n this.value = printISODate(day)\n this.dispatchEvent(new DateSelectEvent(\"change\", day))\n }\n }\n\n private addDays(days: number) {\n this.setFocusedDay(addDays(this.focusedDay, days))\n }\n\n private addMonths(months: number) {\n this.setMonth(this.focusedDay.getMonth() + months)\n }\n\n private addYears(years: number) {\n this.setYear(this.focusedDay.getFullYear() + years)\n }\n\n private startOfWeek() {\n this.setFocusedDay(startOfWeek(this.focusedDay, this.firstDayOfWeek))\n }\n\n private endOfWeek() {\n this.setFocusedDay(endOfWeek(this.focusedDay, this.firstDayOfWeek))\n }\n\n private setMonth(month: number) {\n const min = setMonth(startOfMonth(this.focusedDay), month)\n const max = endOfMonth(min)\n const date = setMonth(this.focusedDay, month)\n\n this.setFocusedDay(clamp(date, min, max))\n }\n\n private setYear(year: number) {\n const min = setYear(startOfMonth(this.focusedDay), year)\n const max = endOfMonth(min)\n const date = setYear(this.focusedDay, year)\n\n this.setFocusedDay(clamp(date, min, max))\n }\n\n private setFocusedDay(day: Date) {\n this.focusedDay = clamp(day, parseISODate(this.min), parseISODate(this.max))\n this.dispatchEvent(new DateSelectEvent(\"nord-focus-date\", this.focusedDay))\n }\n\n private handleMonthSelect = (e: any) => {\n this.setMonth(parseInt(e.target.value, 10))\n }\n\n private handleYearSelect = (e: any) => {\n this.setYear(parseInt(e.target.value, 10))\n }\n\n private handleNextMonthClick = (event: MouseEvent) => {\n event.preventDefault()\n this.addMonths(1)\n }\n\n private handlePreviousMonthClick = (event: MouseEvent) => {\n event.preventDefault()\n this.addMonths(-1)\n }\n\n private enableActiveFocus = () => {\n this.activeFocus = true\n }\n\n private disableActiveFocus = () => {\n this.activeFocus = false\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-calendar\": Calendar\n }\n}\n"],"names":["preventDefault","e","SwipeController","constructor","host","options","this","hadFirstUpdate","initialTouchX","initialTouchY","handleTouchStart","event","pageX","pageY","changedTouches","handleTouchEnd","matchesGesture","onSwipeEnd","distX","distY","details","initialX","initialY","addController","events","EventController","target","hostUpdated","listen","hostDisconnected","isHorizontalSwipe","Math","abs","isDownwardsSwipe","Icon","registerIcon","arrowRightIcon","arrowLeftIcon","arrowDownIcon","fn","isDateDisabled","Calendar","LitElement","dialogLabelId","direction","DirectionController","swipe","addMonths","shortcuts","createKeybindingsHandler","ArrowRight","addDays","isLTR","ArrowLeft","ArrowDown","ArrowUp","Home","startOfWeek","End","endOfWeek","PageUp","PageDown","addYears","localize","LocalizeController","onLangChange","handleLangChange","value","firstDayOfWeek","min","max","expand","activeFocus","focusedDay","Date","handleDaySelect","day","isInRange","inRange","parseISODate","isAllowed","printISODate","dispatchEvent","DateSelectEvent","handleMonthSelect","setMonth","parseInt","handleYearSelect","setYear","handleNextMonthClick","handlePreviousMonthClick","enableActiveFocus","disableActiveFocus","focus","_a","focusedDayNode","monthSelectNode","render","valueAsDate","focusedMonth","getMonth","focusedYear","getFullYear","minDate","maxDate","minDateStartOfMonth","startOfMonth","undefined","maxDateEndOfMonth","endOfMonth","selectedYear","minYear","maxYear","html","monthNames","term","map","month","i","monthNamesShort","repeat","range","year","isEqualMonth","monthView","onFocusOut","onFocusIn","dateFormatter","dateFormatShort","selectedDate","focusedDate","onDateSelect","onKeyboardNavigation","labelledById","dayNames","dayNamesShort","handleValueChange","setFocusedDay","handleFocusedDayChange","lang","resolvedLang","Intl","DateTimeFormat","getMonthNames","getDayNames","days","months","years","date","clamp","styles","componentStyle","style","__decorate","query","prototype","property","type","Number","reflect","Boolean","attribute","state","observe","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Calendar-1904bf2f.js","sources":["../../icons/lib/assets/arrow-right-small.js","../../icons/lib/assets/arrow-left-small.js","../../icons/lib/assets/arrow-down-small.js","../src/common/controllers/SwipeController.ts","../src/calendar/Calendar.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M105 57.4 47.6 2.8a10.566 10.566 0 1 0-14.56 15.316l51.968 49.35a3.486 3.486 0 0 1 0 5.068l-51.968 49.35a10.502 10.502 0 0 0 14.462 15.232l57.638-54.74A17.584 17.584 0 0 0 105 57.4z\"/></svg>'\nexport const title = \"arrow-right-small\"\nexport const tags = \"nordicon arrow right small caret pointing triangle chevron\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M99.736 140a10.486 10.486 0 0 1-7.238-2.884L35 82.6a17.598 17.598 0 0 1-.14-24.976l57.638-54.74a10.502 10.502 0 1 1 14.462 15.232l-51.968 49.35a3.486 3.486 0 0 0 0 5.068l51.968 49.35A10.5 10.5 0 0 1 99.736 140z\"/></svg>'\nexport const title = \"arrow-left-small\"\nexport const tags = \"nordicon arrow left small caret pointing triangle chevron\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M70 110.236a17.332 17.332 0 0 1-12.306-5.096L2.884 47.502A10.502 10.502 0 1 1 18.116 33.04l49.35 51.968a3.486 3.486 0 0 0 5.068 0l49.35-51.968a10.502 10.502 0 1 1 15.232 14.462L82.6 105a17.766 17.766 0 0 1-12.6 5.236z\"/></svg>'\nexport const title = \"arrow-down-small\"\nexport const tags = \"nordicon arrow down small caret pointing triangle chevron\"\n","import { ReactiveController, ReactiveElement } from \"lit\"\nimport { EventController } from \"./EventController.js\"\n\nexport type SwipeDetails = {\n initialX: number\n initialY: number\n pageX: number\n pageY: number\n distX: number\n distY: number\n}\n\nconst preventDefault = (e: Event) => e.preventDefault()\n\ntype SetRequired<T, K extends keyof T> = T & { [Property in K]-?: T[K] }\ntype SwipeControllerOptions = {\n target?: () => HTMLElement\n matchesGesture: (details: SwipeDetails) => boolean\n onSwipeEnd: (details: SwipeDetails) => void\n}\n\nexport class SwipeController implements ReactiveController {\n private events: EventController\n private hadFirstUpdate = false\n\n private initialTouchX: number = 0\n private initialTouchY: number = 0\n private options: SetRequired<SwipeControllerOptions, \"target\">\n\n constructor(host: ReactiveElement, options: SwipeControllerOptions) {\n host.addController(this)\n this.events = new EventController(host)\n\n this.options = {\n target: () => host,\n ...options,\n }\n }\n\n hostUpdated() {\n if (!this.hadFirstUpdate) {\n this.hadFirstUpdate = true\n\n const target = this.options.target()\n this.events.listen(target, \"touchstart\", this.handleTouchStart)\n this.events.listen(target, \"touchmove\", preventDefault)\n this.events.listen(target, \"touchend\", this.handleTouchEnd)\n }\n }\n\n hostDisconnected() {\n this.hadFirstUpdate = false\n }\n\n private handleTouchStart = (event: TouchEvent) => {\n const [{ pageX, pageY }] = event.changedTouches\n this.initialTouchX = pageX\n this.initialTouchY = pageY\n }\n\n private handleTouchEnd = (event: TouchEvent) => {\n const [{ pageX, pageY }] = event.changedTouches\n const { matchesGesture, onSwipeEnd } = this.options\n\n const distX = pageX - this.initialTouchX\n const distY = pageY - this.initialTouchY\n const details = { initialX: this.initialTouchX, initialY: this.initialTouchY, pageX, pageY, distX, distY }\n\n if (matchesGesture(details)) {\n event.preventDefault()\n onSwipeEnd(details)\n }\n }\n}\n\nconst THRESHOLD = 70\n\nexport const isHorizontalSwipe = ({ distX, distY }: SwipeDetails) =>\n Math.abs(distX) >= THRESHOLD && Math.abs(distY) <= THRESHOLD\n\nexport const isDownwardsSwipe = ({ distX, distY }: SwipeDetails) =>\n Math.abs(distY) >= THRESHOLD && Math.abs(distX) <= THRESHOLD && distY > 0\n","import { html, LitElement } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { repeat } from \"lit/directives/repeat.js\"\nimport { createKeybindingsHandler } from \"tinykeys\"\nimport * as arrowRightIcon from \"@nordhealth/icons/lib/assets/arrow-right-small.js\"\nimport * as arrowLeftIcon from \"@nordhealth/icons/lib/assets/arrow-left-small.js\"\nimport * as arrowDownIcon from \"@nordhealth/icons/lib/assets/arrow-down-small.js\"\n\nimport \"../button/Button.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\nimport Icon from \"../icon/Icon.js\"\n\nimport { isHorizontalSwipe, SwipeController } from \"../common/controllers/SwipeController.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\n\nimport { range } from \"../common/number.js\"\nimport {\n addDays,\n clamp,\n DaysOfWeek,\n endOfMonth,\n endOfWeek,\n getDayNames,\n getMonthNames,\n inRange,\n isEqualMonth,\n parseISODate,\n printISODate,\n setMonth,\n setYear,\n startOfMonth,\n startOfWeek,\n} from \"../common/dates.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\nimport { monthView } from \"./month-view.js\"\nimport { DateSelectEvent } from \"./DateSelectEvent.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Calendar.css\"\n\nexport type DateDisabledPredicate = (date: Date) => boolean\n\nIcon.registerIcon(arrowRightIcon)\nIcon.registerIcon(arrowLeftIcon)\nIcon.registerIcon(arrowDownIcon)\n\nconst preventDefault = (fn: EventListener) => (e: Event) => {\n e.preventDefault()\n fn(e)\n}\n\nconst isDateDisabled: DateDisabledPredicate = () => false\n\n/**\n * Calendar allows user to pick a date. It comes with built-in\n * functionality that allows you to set a minimum and a maximum allowed date.\n * Please note that the date must be passed in ISO-8601 format.\n *\n * @status ready\n * @category list\n * @fires {DateSelectEvent} change - Dispatched when a date is selected and the value changes.\n * @fires {DateSelectEvent} nord-focus-date - Dispatched when the calendar's focused date changes.\n *\n * @cssprop [--n-calendar-border-radius=var(--n-border-radius)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-calendar-box-shadow=var(--n-box-shadow-popout)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).\n */\n@customElement(\"nord-calendar\")\nexport default class Calendar extends LitElement {\n static styles = [componentStyle, style]\n\n private dialogLabelId = \"dialog-header\"\n\n @query(\".n-calendar-select-month\", true) private monthSelectNode!: HTMLElement\n @query(`button[tabindex=\"0\"]`) private focusedDayNode!: HTMLButtonElement\n\n private direction = new DirectionController(this)\n private swipe = new SwipeController(this, {\n matchesGesture: isHorizontalSwipe,\n onSwipeEnd: ({ distX }) => this.addMonths(distX < 0 ? 1 : -1),\n })\n\n private shortcuts = createKeybindingsHandler({\n ArrowRight: preventDefault(() => this.addDays(this.direction.isLTR ? 1 : -1)),\n ArrowLeft: preventDefault(() => this.addDays(this.direction.isLTR ? -1 : 1)),\n ArrowDown: preventDefault(() => this.addDays(7)),\n ArrowUp: preventDefault(() => this.addDays(-7)),\n Home: preventDefault(() => this.startOfWeek()),\n End: preventDefault(() => this.endOfWeek()),\n PageUp: preventDefault(() => this.addMonths(-1)),\n PageDown: preventDefault(() => this.addMonths(1)),\n \"Shift+PageUp\": preventDefault(() => this.addYears(-1)),\n \"Shift+PageDown\": preventDefault(() => this.addYears(1)),\n })\n\n private localize = new LocalizeController<\"nord-calendar\">(this, {\n onLangChange: () => this.handleLangChange(),\n })\n\n /**\n * Whilst dateAdapter is used for handling the formatting/parsing dates in the input,\n * these are used to format dates exclusively for the benefit of screen readers.\n *\n * We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n * better performance when formatting large number of dates. See:\n * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n */\n private dateFormatShort!: Intl.DateTimeFormat\n private monthNames!: string[]\n private monthNamesShort!: string[]\n private dayNames!: string[]\n private dayNamesShort!: string[]\n\n /**\n * The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.\n */\n @property() value: string = \"\"\n\n /**\n * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n * Default is Monday.\n */\n @property({ type: Number }) firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n\n /**\n * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the max property.\n */\n @property() min: string = \"\"\n\n /**\n * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the min property.\n */\n @property() max: string = \"\"\n\n /**\n * Controls whether the calendar expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n /**\n * Controls which days are disabled and therefore disallowed.\n * For example, this can be used to disallow selection of weekends.\n */\n @property({ attribute: false }) isDateDisabled: DateDisabledPredicate = isDateDisabled\n\n @state() private activeFocus = false\n @state() private focusedDay = new Date()\n\n /**\n * Programmatically move focus to the calendar.\n * @param options An object which controls aspects of the focusing process.\n */\n focus(options?: FocusOptions & { target: \"day\" | \"month\" }) {\n const target = options?.target ?? \"day\"\n\n if (target === \"day\") {\n this.focusedDayNode.focus()\n } else if (target === \"month\") {\n this.monthSelectNode.focus()\n }\n }\n\n render() {\n const valueAsDate = parseISODate(this.value)\n const focusedMonth = this.focusedDay.getMonth()\n const focusedYear = this.focusedDay.getFullYear()\n\n const minDate = parseISODate(this.min)\n const maxDate = parseISODate(this.max)\n const minDateStartOfMonth = minDate ? startOfMonth(minDate) : undefined\n const maxDateEndOfMonth = maxDate ? endOfMonth(maxDate) : undefined\n\n const selectedYear = (valueAsDate || this.focusedDay).getFullYear()\n const minYear = minDate ? minDate.getFullYear() : selectedYear - 10\n const maxYear = maxDate ? maxDate.getFullYear() : selectedYear + 10\n\n return html`\n <div class=\"n-calendar\">\n <div class=\"n-calendar-header\">\n <div>\n <nord-visually-hidden>\n <h2 id=${this.dialogLabelId} aria-live=\"polite\" aria-atomic=\"true\">\n ${this.monthNames[focusedMonth]}, ${this.focusedDay.getFullYear()}\n </h2>\n </nord-visually-hidden>\n\n <div class=\"n-calendar-select\">\n <select\n aria-label=${this.localize.term(\"monthSelectLabel\")}\n class=\"n-calendar-select-month\"\n @input=${this.handleMonthSelect}\n >\n ${this.monthNames.map(\n (month, i) =>\n html`\n <option\n value=${i}\n ?selected=${i === focusedMonth}\n ?disabled=${!inRange(new Date(focusedYear, i, 1), minDateStartOfMonth, maxDateEndOfMonth)}\n >\n ${month}\n </option>\n `\n )}\n </select>\n <div class=\"n-calendar-select-label\" aria-hidden=\"true\">\n <span>${this.monthNamesShort[focusedMonth]}</span>\n <nord-icon color=\"var(--n-color-icon)\" name=\"arrow-down-small\" size=\"xxs\"></nord-icon>\n </div>\n </div>\n\n <div class=\"n-calendar-select\">\n <select\n aria-label=${this.localize.term(\"yearSelectLabel\")}\n class=\"n-calendar-select-year\"\n @input=${this.handleYearSelect}\n >\n ${repeat(\n range(minYear, maxYear),\n year => year,\n year => html`<option ?selected=${year === focusedYear}>${year}</option>`\n )}\n </select>\n <div class=\"n-calendar-select-label\" aria-hidden=\"true\">\n <span>${this.focusedDay.getFullYear()}</span>\n <nord-icon color=\"var(--n-color-icon)\" name=\"arrow-down-small\" size=\"xxs\"></nord-icon>\n </div>\n </div>\n </div>\n\n <div class=\"n-calendar-nav\">\n <nord-button\n class=\"n-calendar-prev\"\n @click=${this.handlePreviousMonthClick}\n ?disabled=${isEqualMonth(minDate, this.focusedDay)}\n type=\"button\"\n >\n <nord-visually-hidden>${this.localize.term(\"prevMonthLabel\")}</nord-visually-hidden>\n <nord-icon name=${this.direction.isLTR ? \"arrow-left-small\" : \"arrow-right-small\"} size=\"s\"></nord-icon>\n </nord-button>\n\n <nord-button\n class=\"n-calendar-next\"\n @click=${this.handleNextMonthClick}\n ?disabled=${isEqualMonth(maxDate, this.focusedDay)}\n type=\"button\"\n >\n <nord-visually-hidden>${this.localize.term(\"nextMonthLabel\")}</nord-visually-hidden>\n <nord-icon name=${this.direction.isLTR ? \"arrow-right-small\" : \"arrow-left-small\"} size=\"s\"></nord-icon>\n </nord-button>\n </div>\n </div>\n\n ${monthView({\n onFocusOut: this.disableActiveFocus,\n onFocusIn: this.enableActiveFocus,\n dateFormatter: this.dateFormatShort,\n selectedDate: valueAsDate,\n focusedDate: this.focusedDay,\n onDateSelect: this.handleDaySelect,\n onKeyboardNavigation: this.shortcuts,\n labelledById: this.dialogLabelId,\n dayNames: this.dayNames,\n dayNamesShort: this.dayNamesShort,\n firstDayOfWeek: this.firstDayOfWeek,\n min: minDate,\n max: maxDate,\n isDateDisabled: this.isDateDisabled,\n })}\n </div>\n `\n }\n\n @observe(\"value\")\n protected handleValueChange() {\n this.setFocusedDay(parseISODate(this.value) || new Date())\n }\n\n @observe(\"focusedDay\", \"updated\")\n protected handleFocusedDayChange() {\n if (this.activeFocus) {\n this.focusedDayNode.focus()\n }\n }\n\n private handleLangChange() {\n const lang = this.localize.resolvedLang\n this.dateFormatShort = new Intl.DateTimeFormat(lang, { day: \"numeric\", month: \"long\" })\n this.monthNames = getMonthNames(lang, \"long\")\n this.monthNamesShort = getMonthNames(lang, \"short\")\n this.dayNames = getDayNames(lang, \"long\")\n this.dayNamesShort = getDayNames(lang, \"narrow\")\n }\n\n private handleDaySelect = (day: Date) => {\n const isInRange = inRange(day, parseISODate(this.min), parseISODate(this.max))\n const isAllowed = !this.isDateDisabled(day)\n\n if (isInRange && isAllowed) {\n this.value = printISODate(day)\n this.dispatchEvent(new DateSelectEvent(\"change\", day))\n }\n }\n\n private addDays(days: number) {\n this.setFocusedDay(addDays(this.focusedDay, days))\n }\n\n private addMonths(months: number) {\n this.setMonth(this.focusedDay.getMonth() + months)\n }\n\n private addYears(years: number) {\n this.setYear(this.focusedDay.getFullYear() + years)\n }\n\n private startOfWeek() {\n this.setFocusedDay(startOfWeek(this.focusedDay, this.firstDayOfWeek))\n }\n\n private endOfWeek() {\n this.setFocusedDay(endOfWeek(this.focusedDay, this.firstDayOfWeek))\n }\n\n private setMonth(month: number) {\n const min = setMonth(startOfMonth(this.focusedDay), month)\n const max = endOfMonth(min)\n const date = setMonth(this.focusedDay, month)\n\n this.setFocusedDay(clamp(date, min, max))\n }\n\n private setYear(year: number) {\n const min = setYear(startOfMonth(this.focusedDay), year)\n const max = endOfMonth(min)\n const date = setYear(this.focusedDay, year)\n\n this.setFocusedDay(clamp(date, min, max))\n }\n\n private setFocusedDay(day: Date) {\n this.focusedDay = clamp(day, parseISODate(this.min), parseISODate(this.max))\n this.dispatchEvent(new DateSelectEvent(\"nord-focus-date\", this.focusedDay))\n }\n\n private handleMonthSelect = (e: any) => {\n this.setMonth(parseInt(e.target.value, 10))\n }\n\n private handleYearSelect = (e: any) => {\n this.setYear(parseInt(e.target.value, 10))\n }\n\n private handleNextMonthClick = (event: MouseEvent) => {\n event.preventDefault()\n this.addMonths(1)\n }\n\n private handlePreviousMonthClick = (event: MouseEvent) => {\n event.preventDefault()\n this.addMonths(-1)\n }\n\n private enableActiveFocus = () => {\n this.activeFocus = true\n }\n\n private disableActiveFocus = () => {\n this.activeFocus = false\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-calendar\": Calendar\n }\n}\n"],"names":["preventDefault","e","SwipeController","constructor","host","options","this","hadFirstUpdate","initialTouchX","initialTouchY","handleTouchStart","event","pageX","pageY","changedTouches","handleTouchEnd","matchesGesture","onSwipeEnd","distX","distY","details","initialX","initialY","addController","events","EventController","target","hostUpdated","listen","hostDisconnected","isHorizontalSwipe","Math","abs","isDownwardsSwipe","Icon","registerIcon","arrowRightIcon","arrowLeftIcon","arrowDownIcon","fn","isDateDisabled","Calendar","LitElement","dialogLabelId","direction","DirectionController","swipe","addMonths","shortcuts","createKeybindingsHandler","ArrowRight","addDays","isLTR","ArrowLeft","ArrowDown","ArrowUp","Home","startOfWeek","End","endOfWeek","PageUp","PageDown","addYears","localize","LocalizeController","onLangChange","handleLangChange","value","firstDayOfWeek","min","max","expand","activeFocus","focusedDay","Date","handleDaySelect","day","isInRange","inRange","parseISODate","isAllowed","printISODate","dispatchEvent","DateSelectEvent","handleMonthSelect","setMonth","parseInt","handleYearSelect","setYear","handleNextMonthClick","handlePreviousMonthClick","enableActiveFocus","disableActiveFocus","focus","_a","focusedDayNode","monthSelectNode","render","valueAsDate","focusedMonth","getMonth","focusedYear","getFullYear","minDate","maxDate","minDateStartOfMonth","startOfMonth","undefined","maxDateEndOfMonth","endOfMonth","selectedYear","minYear","maxYear","html","monthNames","term","map","month","i","monthNamesShort","repeat","range","year","isEqualMonth","monthView","onFocusOut","onFocusIn","dateFormatter","dateFormatShort","selectedDate","focusedDate","onDateSelect","onKeyboardNavigation","labelledById","dayNames","dayNamesShort","handleValueChange","setFocusedDay","handleFocusedDayChange","lang","resolvedLang","Intl","DateTimeFormat","getMonthNames","getDayNames","days","months","years","date","clamp","styles","componentStyle","style","__decorate","query","prototype","property","type","Number","reflect","Boolean","attribute","state","observe","customElement"],"mappings":"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"}
|
package/lib/Calendar.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"./query-assigned-elements-e6cbac30.js";import"./lit-element-9178eae5.js";import"./property-03f59dce.js";import"./state-70f38ceb.js";import"./query-2d22378e.js";import"./repeat-ae6f075f.js";import"./tinykeys.module-84e6cc41.js";export{C as default}from"./Calendar-
|
|
1
|
+
import"./query-assigned-elements-e6cbac30.js";import"./lit-element-9178eae5.js";import"./property-03f59dce.js";import"./state-70f38ceb.js";import"./query-2d22378e.js";import"./repeat-ae6f075f.js";import"./tinykeys.module-84e6cc41.js";export{C as default}from"./Calendar-1904bf2f.js";import"./Button.js";import"./VisuallyHidden.js";import"./Icon.js";import"./DirectionController-8b298382.js";import"./LocalizeController.js";import"./number-c3ab3e95.js";import"./dates-a8de5b83.js";import"./observe-a9c6dfb6.js";import"./month-view.js";import"./DateSelectEvent.js";import"./Component-92eb6234.js";import"./directive-de55b00a.js";import"./ref-0e619221.js";import"./EventController-d99ebeef.js";import"./LightDomController-3c726b20.js";import"./cond-338158e9.js";import"./Spinner.js";import"./if-defined-4598a996.js";import"./FocusableMixin-34870ed3.js";import"./InputMixin-158f63fb.js";import"./unsafe-html-6be42999.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./class-map-949b7d3b.js";import"./collection-800f5002.js";import"./events-731d0007.js";
|
|
2
2
|
//# sourceMappingURL=Calendar.js.map
|
package/lib/Card.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as a,e}from"./query-assigned-elements-e6cbac30.js";import{i as
|
|
1
|
+
import{_ as a,e as r}from"./query-assigned-elements-e6cbac30.js";import{i as e,s as d,y as o}from"./lit-element-9178eae5.js";import{e as t}from"./property-03f59dce.js";import{S as n}from"./SlotController-89834aef.js";import{s}from"./Component-92eb6234.js";import"./EventController-d99ebeef.js";const i=e`:host{--_n-card-padding:var(--n-card-padding, var(--n-space-m));--_n-card-slot-padding:var(--n-card-slot-padding, var(--n-space-m));--_n-card-box-shadow:var(--n-card-box-shadow, var(--n-box-shadow-card));--_n-card-border-radius:var(--n-card-border-radius, var(--n-border-radius));color:var(--n-color-text);display:block;inline-size:100%}.n-card{background:var(--n-color-surface);border-radius:var(--_n-card-border-radius);box-shadow:var(--_n-card-box-shadow);block-size:100%}.header{border-block-end:1px solid var(--n-color-border);padding:var(--n-space-m) var(--_n-card-slot-padding);display:flex;gap:var(--n-space-s);align-items:center;justify-content:space-between;flex-wrap:wrap}:host([padding="l"]){--_n-card-padding:var(--n-card-padding, var(--n-space-l));--_n-card-slot-padding:var(--n-card-slot-padding, var(--n-space-l))}:host([padding=none]){--_n-card-padding:var(--n-card-padding, 0)}slot{display:block}slot:not([name]){padding:var(--_n-card-padding)}slot[name=footer]{padding:var(--_n-card-slot-padding);padding-block-start:0;white-space:nowrap}::slotted([slot=header-end]){--n-stack-gap:var(--n-space-s);display:flex;gap:var(--n-stack-gap);align-items:center;flex-wrap:wrap}::slotted([slot=header]){font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-heading);margin:0}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}`;let l=class extends d{constructor(){super(...arguments),this.headerSlot=new n(this,"header"),this.headerEndSlot=new n(this,"header-end"),this.footerSlot=new n(this,"footer"),this.padding="m"}render(){return o`<div class="n-card"><div class="header" ?hidden="${this.headerSlot.isEmpty&&this.headerEndSlot.isEmpty}"><slot name="${this.headerSlot.slotName}"></slot><slot name="${this.headerEndSlot.slotName}"></slot></div><slot></slot><slot name="${this.footerSlot.slotName}" ?hidden="${this.footerSlot.isEmpty}"></slot></div>`}};l.styles=[s,i],a([t({reflect:!0})],l.prototype,"padding",void 0),l=a([r("nord-card")],l);var c=l;export{c as default};
|
|
2
2
|
//# sourceMappingURL=Card.js.map
|
package/lib/Card.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sources":["../src/card/Card.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Card.css\"\n\n/**\n * Cards are shadowed surfaces that display content and actions on a\n * single topic. They should be easy to scan for relevant and\n * actionable information.\n *\n * @status ready\n * @category structure\n * @slot - The card content.\n * @slot header - Optional slot that holds a header for the card.\n * @slot header-end - Optional slot that positions content at the end of the header. Useful for actions or additional info.\n * @slot footer - Optional slot that holds footer content for the card.\n *\n * @cssprop [--n-card-border-radius=var(--n-border-radius)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-card-box-shadow=var(--n-box-shadow-popout)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).\n * @cssprop [--n-card-padding=var(--n-space-m)] - Controls the padding on all sides of the card.\n * @cssprop [--n-card-slot-padding=var(--n-space-m)] - Controls the padding of items slotted within the card. This does not affect the block padding of items slotted into the header.\n */\n@customElement(\"nord-card\")\nexport default class Card extends LitElement {\n static styles = [componentStyle, style]\n\n private headerSlot = new SlotController(this, \"header\")\n private headerEndSlot = new SlotController(this, \"header-end\")\n private footerSlot = new SlotController(this, \"footer\")\n\n /**\n * Controls the padding of the card component. When set to “none”,\n * the header and footer slots will still have padding.\n */\n @property({ reflect: true }) padding: \"m\" | \"l\" | \"none\" = \"m\"\n\n render() {\n return html`\n <div class=\"n-card\">\n <div class=\"header\" ?hidden=${this.headerSlot.isEmpty && this.headerEndSlot.isEmpty}>\n <slot name=${this.headerSlot.slotName}></slot>\n <slot name=${this.headerEndSlot.slotName}></slot>\n </div>\n <slot></slot>\n <slot name=${this.footerSlot.slotName} ?hidden=${this.footerSlot.isEmpty}></slot>\n </div>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-card\": Card\n }\n}\n"],"names":["Card","LitElement","constructor","this","headerSlot","SlotController","headerEndSlot","footerSlot","padding","render","html","isEmpty","slotName","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Card.js","sources":["../src/card/Card.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Card.css\"\n\n/**\n * Cards are shadowed surfaces that display content and actions on a\n * single topic. They should be easy to scan for relevant and\n * actionable information.\n *\n * @status ready\n * @category structure\n * @slot - The card content.\n * @slot header - Optional slot that holds a header for the card.\n * @slot header-end - Optional slot that positions content at the end of the header. Useful for actions or additional info.\n * @slot footer - Optional slot that holds footer content for the card.\n *\n * @cssprop [--n-card-border-radius=var(--n-border-radius)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-card-box-shadow=var(--n-box-shadow-popout)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).\n * @cssprop [--n-card-padding=var(--n-space-m)] - Controls the padding on all sides of the card.\n * @cssprop [--n-card-slot-padding=var(--n-space-m)] - Controls the padding of items slotted within the card. This does not affect the block padding of items slotted into the header.\n */\n@customElement(\"nord-card\")\nexport default class Card extends LitElement {\n static styles = [componentStyle, style]\n\n private headerSlot = new SlotController(this, \"header\")\n private headerEndSlot = new SlotController(this, \"header-end\")\n private footerSlot = new SlotController(this, \"footer\")\n\n /**\n * Controls the padding of the card component. When set to “none”,\n * the header and footer slots will still have padding.\n */\n @property({ reflect: true }) padding: \"m\" | \"l\" | \"none\" = \"m\"\n\n render() {\n return html`\n <div class=\"n-card\">\n <div class=\"header\" ?hidden=${this.headerSlot.isEmpty && this.headerEndSlot.isEmpty}>\n <slot name=${this.headerSlot.slotName}></slot>\n <slot name=${this.headerEndSlot.slotName}></slot>\n </div>\n <slot></slot>\n <slot name=${this.footerSlot.slotName} ?hidden=${this.footerSlot.isEmpty}></slot>\n </div>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-card\": Card\n }\n}\n"],"names":["Card","LitElement","constructor","this","headerSlot","SlotController","headerEndSlot","footerSlot","padding","render","html","isEmpty","slotName","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"6qDAwBA,IAAqBA,EAArB,cAAkCC,EAAlCC,kCAGUC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAaG,cAAG,IAAID,EAAeF,KAAM,cACzCA,KAAUI,WAAG,IAAIF,EAAeF,KAAM,UAMjBA,KAAOK,QAAuB,GAc5D,CAZCC,SACE,OAAOC,CAAI,oDAEuBP,KAAKC,WAAWO,SAAWR,KAAKG,cAAcK,wBAC7DR,KAAKC,WAAWQ,gCAChBT,KAAKG,cAAcM,mDAGrBT,KAAKI,WAAWK,sBAAoBT,KAAKI,WAAWI,wBAGtE,GAvBMX,EAAAa,OAAS,CAACC,EAAgBC,GAUJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAyClB,EAAAmB,UAAA,eAAA,GAX3CnB,EAAIgB,EAAA,CADxBI,EAAc,cACMpB,SAAAA"}
|
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-0d57fdc8.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-3cc6e83b.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-685c3990.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-ea6eff46.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-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};
|
|
2
2
|
//# sourceMappingURL=DatePicker.js.map
|
package/lib/Drawer.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,e as r}from"./query-assigned-elements-e6cbac30.js";import{i as o,y as t,s as a}from"./lit-element-9178eae5.js";import{e as n}from"./property-03f59dce.js";import{S as d}from"./SlotController-
|
|
1
|
+
import{_ as e,e as r}from"./query-assigned-elements-e6cbac30.js";import{i as o,y as t,s as a}from"./lit-element-9178eae5.js";import{e as n}from"./property-03f59dce.js";import{S as d}from"./SlotController-89834aef.js";import{D as s}from"./DraftComponentMixin-9e4b7b34.js";import{s as i}from"./Component-92eb6234.js";import"./EventController-d99ebeef.js";const l=o`:host{--_n-drawer-padding:var(--n-drawer-padding, var(--n-space-l))}.n-drawer{display:flex;flex-direction:column;block-size:100%}.n-drawer-main{flex:1;padding:var(--_n-drawer-padding);overflow-y:auto}.n-drawer-footer{padding:var(--n-space-m) var(--n-space-l);border-block-start:1px solid var(--n-color-border)}:host([padding=none]){--_n-drawer-padding:var(--n-drawer-padding, 0)}::slotted(nord-header){--_n-header-box-shadow:none}slot[name=footer]{display:flex;justify-content:flex-end;gap:var(--n-space-s);flex-direction:row;align-items:center}`;let p=class extends(s(a)){constructor(){super(...arguments),this.footerSlot=new d(this,"footer"),this.padding="m"}render(){return t`<div class="n-drawer"><slot name="header"></slot><div class="n-drawer-main"><slot></slot></div><div class="n-drawer-footer" ?hidden="${this.footerSlot.isEmpty}"><slot name="${this.footerSlot.slotName}"></slot></div></div>`}};p.styles=[i,l],e([n({reflect:!0})],p.prototype,"padding",void 0),p=e([r("nord-drawer")],p);var m=p;export{m as default};
|
|
2
2
|
//# sourceMappingURL=Drawer.js.map
|
package/lib/Fieldset.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,e as r}from"./query-assigned-elements-e6cbac30.js";import{i as t,s as o,y as s}from"./lit-element-9178eae5.js";import{e as n}from"./property-03f59dce.js";import{S as i}from"./SlotController-
|
|
1
|
+
import{_ as e,e as r}from"./query-assigned-elements-e6cbac30.js";import{i as t,s as o,y as s}from"./lit-element-9178eae5.js";import{e as n}from"./property-03f59dce.js";import{S as i}from"./SlotController-89834aef.js";import{c as l}from"./cond-338158e9.js";import{s as a}from"./Component-92eb6234.js";import{s as d}from"./FormField-081da729.js";import"./EventController-d99ebeef.js";const h=t`fieldset{border:none}.n-label-container{margin-block-end:var(--n-space-s)}`;let m=class extends o{constructor(){super(...arguments),this.errorSlot=new i(this,"error"),this.hintSlot=new i(this,"hint"),this.label=""}render(){const{hasError:e}=this;return s`<fieldset aria-invalid="${l(e,"true")}" aria-describedby="${l(e,"error")}"><legend class="n-label-container"><slot class="n-label" name="label">${this.label}</slot><div class="n-caption n-hint" ?hidden="${!this.hasHint}"><slot name="hint">${this.hint}</slot></div></legend><slot></slot><div class="n-caption n-error" id="error" role="alert" ?hidden="${!this.hasError}"><slot name="error">${this.error}</slot></div></fieldset>`}get hasHint(){return Boolean(this.hint)||this.hintSlot.hasContent}get hasError(){return Boolean(this.error)||this.errorSlot.hasContent}};m.styles=[a,d,h],e([n()],m.prototype,"label",void 0),e([n()],m.prototype,"hint",void 0),e([n()],m.prototype,"error",void 0),m=e([r("nord-fieldset")],m);var p=m;export{p as default};
|
|
2
2
|
//# sourceMappingURL=Fieldset.js.map
|
|
@@ -1,2 +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-
|
|
2
|
-
//# sourceMappingURL=FormAssociatedMixin-
|
|
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(){const t=e`<label for="${this.inputId}"><slot name="label">${this.label}</slot></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>${t}</nord-visually-hidden>`:e`<div class="n-label-container">${t}</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-0d57fdc8.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormAssociatedMixin-
|
|
1
|
+
{"version":3,"file":"FormAssociatedMixin-0d57fdc8.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(): 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() {\n const label = html`\n <label for=${this.inputId}>\n <slot name=\"label\">${this.label}</slot>\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","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,CAyEzC,CA/GeN,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,cACR,MAAMT,EAAQU,CAAI,eACHnC,KAAKsB,+BACKtB,KAAKyB,yDAGOzB,KAAKwB,qBAAmBxB,KAAKoC,8BAC1CpC,KAAKqC,oBAI7B,OAAOrC,KAAK0B,UACRS,CAAI,yBAAyBV,2BAC7BU,CAAI,kCAAkCV,SAC3C,CAESa,cACR,OAAOH,CAAI,sCAC2BnC,KAAKuB,mCAAiCvB,KAAKuC,gCACxDvC,KAAKwC,oBAG/B,CAESC,iBACR,MAAML,QAAEA,EAAOG,SAAEA,GAAavC,KAE9B,OAAIoC,GAAWG,EACN,GAAGvC,KAAKwB,UAAUxB,KAAKuB,UAE5Ba,EACKpC,KAAKwB,OAEVe,EACKvC,KAAKuB,aADd,CAKD,CAESmB,aACR,OAAO1C,KAAKuC,SAAW,YAASI,CACjC,CAEaP,cACZ,OAAOQ,QAAQ5C,KAAKqC,OAASrC,KAAKoB,SAASyB,UAC5C,CAEaN,eACZ,OAAOK,QAAQ5C,KAAKwC,QAAUxC,KAAKmB,UAAU0B,UAC9C,EAGH,OAtGcC,EAAA,CAAXC,KAA6B/B,EAAAgC,UAAA,aAAA,GAKlBF,EAAA,CAAXC,KAAwB/B,EAAAgC,UAAA,YAAA,GAK6BF,EAAA,CAArDC,EAAS,CAAEE,KAAML,QAASM,UAAW,gBAAiClC,EAAAgC,UAAA,iBAAA,GAK3DF,EAAA,CAAXC,KAA+B/B,EAAAgC,UAAA,mBAAA,GAKpBF,EAAA,CAAXC,KAAyB/B,EAAAgC,UAAA,aAAA,GAOGF,EAAA,CAA5BC,EAAS,CAAEE,KAAML,WAA2B5B,EAAAgC,UAAA,gBAAA,GA2ExChC,CACT"}
|
package/lib/Header.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,e as r}from"./query-assigned-elements-e6cbac30.js";import{i as a,s as o,y as n}from"./lit-element-9178eae5.js";import{S as t}from"./SlotController-
|
|
1
|
+
import{_ as e,e as r}from"./query-assigned-elements-e6cbac30.js";import{i as a,s as o,y as n}from"./lit-element-9178eae5.js";import{S as t}from"./SlotController-89834aef.js";import{s}from"./Component-92eb6234.js";import"./EventController-d99ebeef.js";const d=a`:host{color:var(--n-color-text);--_n-header-gutter:var(--n-space-l);--_n-header-box-shadow:var(--n-box-shadow-header)}::slotted(*){margin:0!important}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}.n-header,.n-header-end{display:flex;flex-flow:row wrap;align-items:center;gap:var(--n-space-m)}.n-header{padding:var(--n-space-m) var(--n-space-l);padding-inline-start:var(--_n-header-gutter);background-color:var(--n-color-surface);border-block-end:1px solid var(--n-color-border);box-shadow:var(--_n-header-box-shadow);min-block-size:var(--n-space-xxl)}.n-header-end{margin-inline-start:auto;gap:var(--n-space-s)}`;let l=class extends o{constructor(){super(...arguments),this.endSlot=new t(this,"end")}render(){return n`<header class="n-header"><slot></slot><div class="n-header-end" ?hidden="${this.endSlot.isEmpty}"><slot name="end"></slot></div></header>`}};l.styles=[s,d],l=e([r("nord-header")],l);var i=l;export{i as default};
|
|
2
2
|
//# sourceMappingURL=Header.js.map
|
package/lib/Icon.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,e as s}from"./query-assigned-elements-e6cbac30.js";import{i,s as o,y as t}from"./lit-element-9178eae5.js";import{e as r}from"./property-03f59dce.js";import{t as n}from"./state-70f38ceb.js";import{l as a}from"./if-defined-4598a996.js";import{o as c}from"./unsafe-html-6be42999.js";import{o as l}from"./observe-a9c6dfb6.js";import{c as h}from"./cond-338158e9.js";import{s as d}from"./Component-92eb6234.js";import"./directive-de55b00a.js";const m=i`:host{--_n-icon-size:var(--n-size-icon-m);display:inline-block;block-size:var(--_n-icon-size);inline-size:var(--_n-icon-size);min-inline-size:var(--_n-icon-size)}:host([size=xxs]){--_n-icon-size:var(--n-size-icon-xxs)}:host([size=xs]){--_n-icon-size:var(--n-size-icon-xs)}:host([size="s"]){--_n-icon-size:var(--n-size-icon-s)}:host([size="l"]){--_n-icon-size:var(--n-size-icon-l)}:host([size=xl]){--_n-icon-size:var(--n-size-icon-xl)}:host([size=xxl]){--_n-icon-size:var(--n-size-icon-xxl)}.n-icon{display:block}svg{display:block}`;var v;let p=v=class extends o{constructor(){super(...arguments),this.name="",this.size="m",this.svg=""}static registerResolver(e){v.resolver=e}static registerIcon(e,s){let i,o;if("string"==typeof e?(i=e,o=s):(i=e.title,o=e.default),!i)throw new Error("name is required when registering an icon");if(!o)throw new Error("icon must not be empty");v.registeredIcons.has(i)||v.registeredIcons.set(i,o)}render(){return t`<div role="${h(this.label,"img")}" style="${h(this.color,`color:${this.color}`)}" aria-label="${a(this.label)}"><slot aria-hidden="true"></slot><div aria-hidden="true">${c(this.svg)}</div></div>`}handleNameChange(){this.name?v.registeredIcons.has(this.name)?this.svg=v.registeredIcons.get(this.name):v.resolver(this.name).then((e=>{this.svg=e})).catch((()=>{this.svg=""})):this.svg=""}};p.styles=[d,m],p.resolver=e=>fetch(`https://nordcdn.net/ds/icons/1.
|
|
1
|
+
import{_ as e,e as s}from"./query-assigned-elements-e6cbac30.js";import{i,s as o,y as t}from"./lit-element-9178eae5.js";import{e as r}from"./property-03f59dce.js";import{t as n}from"./state-70f38ceb.js";import{l as a}from"./if-defined-4598a996.js";import{o as c}from"./unsafe-html-6be42999.js";import{o as l}from"./observe-a9c6dfb6.js";import{c as h}from"./cond-338158e9.js";import{s as d}from"./Component-92eb6234.js";import"./directive-de55b00a.js";const m=i`:host{--_n-icon-size:var(--n-size-icon-m);display:inline-block;block-size:var(--_n-icon-size);inline-size:var(--_n-icon-size);min-inline-size:var(--_n-icon-size)}:host([size=xxs]){--_n-icon-size:var(--n-size-icon-xxs)}:host([size=xs]){--_n-icon-size:var(--n-size-icon-xs)}:host([size="s"]){--_n-icon-size:var(--n-size-icon-s)}:host([size="l"]){--_n-icon-size:var(--n-size-icon-l)}:host([size=xl]){--_n-icon-size:var(--n-size-icon-xl)}:host([size=xxl]){--_n-icon-size:var(--n-size-icon-xxl)}.n-icon{display:block}svg{display:block}`;var v;let p=v=class extends o{constructor(){super(...arguments),this.name="",this.size="m",this.svg=""}static registerResolver(e){v.resolver=e}static registerIcon(e,s){let i,o;if("string"==typeof e?(i=e,o=s):(i=e.title,o=e.default),!i)throw new Error("name is required when registering an icon");if(!o)throw new Error("icon must not be empty");v.registeredIcons.has(i)||v.registeredIcons.set(i,o)}render(){return t`<div role="${h(this.label,"img")}" style="${h(this.color,`color:${this.color}`)}" aria-label="${a(this.label)}"><slot aria-hidden="true"></slot><div aria-hidden="true">${c(this.svg)}</div></div>`}handleNameChange(){this.name?v.registeredIcons.has(this.name)?this.svg=v.registeredIcons.get(this.name):v.resolver(this.name).then((e=>{this.svg=e})).catch((()=>{this.svg=""})):this.svg=""}};p.styles=[d,m],p.resolver=e=>fetch(`https://nordcdn.net/ds/icons/1.8.0/assets/${e}.svg`).then((s=>{if(!s.ok)throw new TypeError(`NORD: unknown icon '${e}'`);return s.text()})),p.registeredIcons=new Map,e([r({reflect:!0})],p.prototype,"name",void 0),e([r({reflect:!0})],p.prototype,"size",void 0),e([r({reflect:!0})],p.prototype,"color",void 0),e([r({reflect:!0})],p.prototype,"label",void 0),e([n()],p.prototype,"svg",void 0),e([l("name")],p.prototype,"handleNameChange",null),p=v=e([s("nord-icon")],p);var z=p;export{z as default};
|
|
2
2
|
//# sourceMappingURL=Icon.js.map
|
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-0d57fdc8.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-ea6eff46.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 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};
|
|
2
2
|
//# sourceMappingURL=Layout.js.map
|
package/lib/Modal.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as o,e}from"./query-assigned-elements-e6cbac30.js";import{i as a,s as n,y as i}from"./lit-element-9178eae5.js";import{e as t}from"./property-03f59dce.js";import{i as s}from"./query-2d22378e.js";import{c as l}from"./interface-close-small-44ababc3.js";import r from"./Icon.js";import{S as d}from"./SlotController-
|
|
1
|
+
import{_ as o,e}from"./query-assigned-elements-e6cbac30.js";import{i as a,s as n,y as i}from"./lit-element-9178eae5.js";import{e as t}from"./property-03f59dce.js";import{i as s}from"./query-2d22378e.js";import{c as l}from"./interface-close-small-44ababc3.js";import r from"./Icon.js";import{S as d}from"./SlotController-89834aef.js";import{o as c}from"./observe-a9c6dfb6.js";import{N as p}from"./events-731d0007.js";import{s as m}from"./Component-92eb6234.js";import{LocalizeController as v}from"./LocalizeController.js";import{ModalController as h}from"./ModalController.js";import"./state-70f38ceb.js";import"./if-defined-4598a996.js";import"./unsafe-html-6be42999.js";import"./directive-de55b00a.js";import"./cond-338158e9.js";import"./EventController-d99ebeef.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./LightDismissController-a2645ae6.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./ScrollbarController-680392c9.js";const b=a`:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-padding-block:var(--n-modal-padding-block, var(--n-space-m));--_n-modal-focus-ring:0 0 0 2px var(--n-color-accent);--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 620px);color:var(--n-color-text);position:fixed;inset:0;visibility:hidden;transition:visibility var(--n-transition-slowly);z-index:var(--n-index-overlay)}:host([open]){transition-property:none;visibility:visible}.n-modal-backdrop{position:fixed;inset:0;background:var(--n-color-overlay);transition:opacity var(--n-transition-slowly);padding:var(--n-space-l);padding-block-start:clamp(var(--n-space-l),min(10vh,10vw) - 1em,calc(var(--n-space-xxl) + var(--n-space-s)));overflow-y:auto}:host(:not([open])) .n-modal-backdrop{opacity:0}.n-modal{position:relative;display:flex;flex-direction:column;inline-size:100%;max-inline-size:var(--_n-modal-max-inline-size);margin:auto;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-modal);border-radius:var(--n-border-radius);transition:opacity var(--n-transition-slowly),transform var(--n-transition-slowly)}.n-rounded-top{border-radius:var(--n-border-radius) var(--n-border-radius) 0 0}:host(:not([open])) .n-modal{transform:translateY(-10px) scale(.97);opacity:0}.n-modal:focus{outline:0}.n-modal-body{flex:1}.n-body-padded{display:block;padding:var(--n-space-l) var(--_n-modal-padding-inline) var(--n-space-xl)}.n-modal-header{display:flex;gap:var(--n-space-m);align-items:start;background:var(--n-color-nav-surface);border-block-end:1px solid var(--n-color-border)}.n-modal-footer{border-block-start:1px solid var(--n-color-border)}.n-padded{padding:var(--_n-modal-padding-block) var(--_n-modal-padding-inline)}.n-close{border:none;display:flex;justify-content:center;align-items:center;block-size:var(--n-space-xl);inline-size:var(--n-space-xl);background-color:transparent;border-radius:var(--n-border-radius);inset-block-start:var(--n-space-s);inset-inline-end:var(--n-space-s);color:var(--n-color-text);cursor:pointer;transition:color var(--n-transition-quickly);position:relative}.n-close::after{content:"";position:absolute;display:block;inset:calc(var(--n-space-s) * -1);border-radius:var(--n-border-radius)}.n-close:not(:hover){color:var(--n-color-icon)}.n-close:active{transform:translateY(1px)}.n-close:focus{outline:0;box-shadow:var(--_n-modal-focus-ring)}@supports selector(:focus-visible){.n-close:focus{box-shadow:none}.n-close:focus-visible{box-shadow:var(--_n-modal-focus-ring)}}:host([scrollable]) .n-modal{max-block-size:100%}:host([scrollable]) .n-modal-body{overflow-y:auto}@media (min-width:489px){:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l))}:host([size="s"]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 440px)}:host([size="l"]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 1320px)}}slot[name]{display:flex}slot[name=header]{flex:1}slot[name=header]::slotted(*){margin:0!important;padding:0!important;font-size:var(--n-font-size-l)!important;font-weight:var(--n-font-weight-heading)!important;line-height:var(--n-line-height-heading)!important}slot[name=footer]{gap:calc(var(--n-space-s)/ 2);flex-direction:column}@media (min-width:489px){slot[name=footer]{gap:var(--n-space-s);flex-direction:row;justify-content:flex-end;align-items:center}}slot[name=feature]{overflow:hidden}slot[name=feature]::slotted(*){inline-size:100%;block-size:auto}`;r.registerIcon(l);let f=class extends n{constructor(){super(...arguments),this.headerSlot=new d(this,"header"),this.featureSlot=new d(this,"feature"),this.footerSlot=new d(this,"footer"),this.localize=new v(this),this.modalController=new h(this,{isOpen:()=>this.open,onDismiss:()=>this.handleDismiss(),dialog:()=>this.modal,backdrop:()=>this.backdrop,close:o=>this.close(o)}),this.open=!1,this.size="m",this.returnValue="",this.scrollable=!1}connectedCallback(){super.connectedCallback(),this.setAttribute("role","dialog"),this.setAttribute("aria-modal","true")}showModal(){this.open=!0}close(o){this.open=!1,null!=o&&(this.returnValue=o),this.dispatchEvent(new p("close"))}focus(o){this.modal.focus({preventScroll:!0,...o})}render(){return i`<div class="n-modal-backdrop"><div class="n-modal" tabindex="0"><div class="n-modal-header n-rounded-top" ?hidden="${this.headerSlot.isEmpty}"><slot class="n-padded" name="${this.headerSlot.slotName}"></slot><button class="n-close" @click="${this.handleDismiss}"><nord-icon name="interface-close-small" size="s" label="${this.localize.term("closeLabel")}"></nord-icon></button></div><div class="n-modal-body"><slot name="${this.featureSlot.slotName}" class="${this.headerSlot.isEmpty?"n-rounded-top":""}" ?hidden="${this.featureSlot.isEmpty}"></slot><slot class="n-body-padded"></slot></div><div class="n-modal-footer n-padded" ?hidden="${this.footerSlot.isEmpty}"><slot name="${this.footerSlot.slotName}"></slot></div></div></div>`}handleOpenUpdated(o){this.open?this.modalController.block():!0===o&&this.modalController.unblock()}handleDismiss(){this.dispatchEvent(new p("cancel",{cancelable:!0}))&&this.close()}};f.styles=[m,b],f.shadowRootOptions={...n.shadowRootOptions,delegatesFocus:!0},o([s(".n-modal",!0)],f.prototype,"modal",void 0),o([s(".n-modal-backdrop",!0)],f.prototype,"backdrop",void 0),o([t({type:Boolean,reflect:!0})],f.prototype,"open",void 0),o([t({reflect:!0})],f.prototype,"size",void 0),o([t({attribute:!1})],f.prototype,"returnValue",void 0),o([t({type:Boolean,reflect:!0})],f.prototype,"scrollable",void 0),o([c("open","updated")],f.prototype,"handleOpenUpdated",null),f=o([e("nord-modal")],f);var u=f;export{u as default};
|
|
2
2
|
//# sourceMappingURL=Modal.js.map
|