@nordhealth/components 1.0.0-beta.20 → 1.0.0-beta.21

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.
Files changed (17) hide show
  1. package/custom-elements.json +252 -252
  2. package/lib/Button.js +1 -1
  3. package/lib/Button.js.map +1 -1
  4. package/lib/{Calendar-582091ef.js → Calendar-600fd148.js} +1 -1
  5. package/lib/{Calendar-582091ef.js.map → Calendar-600fd148.js.map} +1 -1
  6. package/lib/Calendar.js +1 -1
  7. package/lib/DatePicker.js +1 -1
  8. package/lib/Input.js +1 -1
  9. package/lib/Input.js.map +1 -1
  10. package/lib/Select.js +1 -1
  11. package/lib/Select.js.map +1 -1
  12. package/lib/bundle.js +5 -5
  13. package/lib/bundle.js.map +1 -1
  14. package/lib/index.js +1 -1
  15. package/lib/src/button/Button.d.ts +2 -2
  16. package/lib/src/input/Input.d.ts +2 -2
  17. package/package.json +3 -3
package/lib/{Calendar-582091ef.js → Calendar-600fd148.js} RENAMED
@@ -10,4 +10,4 @@ import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{r as a,s
10
10
  * SPDX-License-Identifier: BSD-3-Clause
11
11
  */
12
12
  function M(e,t){return(({finisher:e,descriptor:t})=>(a,n)=>{var i;if(void 0===n){const n=null!==(i=a.originalKey)&&void 0!==i?i:a.key,o=null!=t?{kind:"method",placement:"prototype",key:n,descriptor:t(a.key)}:{...a,key:n};return null!=e&&(o.finisher=function(t){e(t,n)}),o}{const i=a.constructor;void 0!==t&&Object.defineProperty(a,n,t(n)),null==e||e(i,n)}})({descriptor:a=>{const n={get(){var t,a;return null!==(a=null===(t=this.renderRoot)||void 0===t?void 0:t.querySelector(e))&&void 0!==a?a:null},enumerable:!0,configurable:!0};if(t){const t="symbol"==typeof a?Symbol():"__"+a;n.get=function(){var a,n;return void 0===this[t]&&(this[t]=null!==(n=null===(a=this.renderRoot)||void 0===a?void 0:a.querySelector(e))&&void 0!==n?n:null),this[t]}}return n}})}var Y=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 j=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 L=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 T=e=>e.preventDefault();class E{constructor(e,t){var a;this.attached=!1,this.initialTouchX=0,this.initialTouchY=0,this.handleTouchStart=e=>{const[{pageX:t,pageY:a}]=e.changedTouches;this.initialTouchX=t,this.initialTouchY=a},this.handleTouchEnd=e=>{const[{pageX:t,pageY:a}]=e.changedTouches,n=t-this.initialTouchX,i=a-this.initialTouchY,o={initialX:this.initialTouchX,initialY:this.initialTouchY,pageX:t,pageY:a,distX:n,distY:i};this.matchesGesture(o)&&(e.preventDefault(),this.onSwipeEnd(o))},this.host=e,e.addController(this),this.target=null!==(a=null==t?void 0:t.target)&&void 0!==a?a:()=>e,this.matchesGesture=t.matchesGesture,this.onSwipeEnd=t.onSwipeEnd}hostUpdated(){if(!this.attached){this.attached=!0;const e=this.target();e.addEventListener("touchstart",this.handleTouchStart),e.addEventListener("touchmove",T),e.addEventListener("touchend",this.handleTouchEnd)}}hostDisconnected(){this.attached=!1;const e=this.target();e.removeEventListener("touchstart",this.handleTouchStart),e.removeEventListener("touchmove",T),e.removeEventListener("touchend",this.handleTouchEnd)}}const O=({distX:e,distY:t})=>Math.abs(e)>=70&&Math.abs(t)<=70,_=({distX:e,distY:t})=>Math.abs(t)>=70&&Math.abs(e)<=70&&t>0,I=a`:host{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,var(--n-box-shadow-popout));border-radius:var(--n-border-radius-s);max-inline-size:310px;min-inline-size:290px;padding:var(--n-calendar-padding,16px 16px 20px)}@media (max-width:35.9375em){.n-calendar{max-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}.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;z-index:1}.n-calendar-day[aria-current=date]{box-shadow:0 0 0 1px var(--n-color-accent);color:var(--n-color-text-link);position:relative;z-index:200}.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);z-index:200}.n-calendar-day:focus{box-shadow:0 0 5px var(--n-color-accent);z-index:200}.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][aria-current=date]{box-shadow:0 0 0 1px var(--n-color-accent)}.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:center;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-x: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-heading)}.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%;z-index:2}.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:0 4px 0 8px;pointer-events:none;position:relative;inline-size:100%;z-index:1}`;c.registerIcon(Y),c.registerIcon(j),c.registerIcon(L);const N=e=>t=>{t.preventDefault(),e(t)},X=()=>!1;let A=class extends n{constructor(){super(...arguments),this.dialogLabelId="dialog-header",this.direction=new h(this),this.swipe=new E(this,{matchesGesture:O,onSwipeEnd:({distX:e})=>this.addMonths(e<0?1:-1)}),this.shortcuts=d({ArrowRight:N((()=>this.addDays(this.direction.isLTR?1:-1))),ArrowLeft:N((()=>this.addDays(this.direction.isLTR?-1:1))),ArrowDown:N((()=>this.addDays(7))),ArrowUp:N((()=>this.addDays(-7))),Home:N((()=>this.startOfWeek())),End:N((()=>this.endOfWeek())),PageUp:N((()=>this.addMonths(-1))),PageDown:N((()=>this.addMonths(1))),"Shift+PageUp":N((()=>this.addYears(-1))),"Shift+PageDown":N((()=>this.addYears(1)))}),this.localization=k,this.value="",this.firstDayOfWeek=1,this.min="",this.max="",this.isDateDisabled=X,this.activeFocus=!1,this.focusedDay=new Date,this.handleDaySelect=e=>{const t=u(e,v(this.min),v(this.max)),a=!this.isDateDisabled(e);t&&a&&(this.value=p(e),this.dispatchEvent(new S("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 t;const a=null!==(t=null==e?void 0:e.target)&&void 0!==t?t:"day";"day"===a?this.focusedDayNode.focus():"month"===a&&this.monthSelectNode.focus()}willUpdate(e){e.has("value")&&this.setFocusedDay(v(this.value)||new Date),e.has("localization")&&this.createDateFormatter()}updated(e){e.has("focusedDay")&&this.activeFocus&&this.focusedDayNode.focus()}render(){const e=v(this.value),t=this.focusedDay.getMonth(),a=this.focusedDay.getFullYear(),n=v(this.min),o=v(this.max),s=n?f(n):void 0,d=o?m(o):void 0,c=(e||this.focusedDay).getFullYear(),h=n?n.getFullYear():c-10,p=o?o.getFullYear():c+10;return i`<div class="n-calendar"><div class="n-calendar-header"><div><nord-visually-hidden><h2 id="${this.dialogLabelId}" aria-live="polite" aria-atomic="true">${this.localization.monthNames[t]}, ${this.focusedDay.getFullYear()}</h2></nord-visually-hidden><div class="n-calendar-select"><select aria-label="${this.localization.monthSelectLabel}" class="n-calendar-select-month" @input="${this.handleMonthSelect}">${this.localization.monthNames.map(((e,n)=>i`<option key="${e}" value="${n}" ?selected="${n===t}" ?disabled="${!u(new Date(a,n,1),s,d)}">${e}</option>`))}</select><div class="n-calendar-select-label" aria-hidden="true"><span>${this.localization.monthNamesShort[t]}</span><nord-icon color="var(--n-color-icon)" name="arrow-down-small" size="xs"></nord-icon></div></div><div class="n-calendar-select"><select aria-label="${this.localization.yearSelectLabel}" class="n-calendar-select-year" @input="${this.handleYearSelect}">${r(l(h,p),(e=>e),(e=>i`<option key="${e}" ?selected="${e===a}">${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="xs"></nord-icon></div></div></div><div class="n-calendar-nav"><nord-button class="n-calendar-prev" @click="${this.handlePreviousMonthClick}" ?disabled="${y(n,this.focusedDay)}" type="button"><nord-visually-hidden>${this.localization.prevMonthLabel}</nord-visually-hidden><nord-icon color="var(--n-color-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="${y(o,this.focusedDay)}" type="button"><nord-visually-hidden>${this.localization.nextMonthLabel}</nord-visually-hidden><nord-icon color="var(--n-color-icon)" name="${this.direction.isLTR?"arrow-right-small":"arrow-left-small"}" size="s"></nord-icon></nord-button></div></div>${F({onFocusOut:this.disableActiveFocus,onFocusIn:this.enableActiveFocus,dateFormatter:this.dateFormatShort,selectedDate:e,focusedDate:this.focusedDay,onDateSelect:this.handleDaySelect,onKeyboardNavigation:this.shortcuts,labelledById:this.dialogLabelId,localization:this.localization,firstDayOfWeek:this.firstDayOfWeek,min:n,max:o,isDateDisabled:this.isDateDisabled})}</div>`}createDateFormatter(){this.dateFormatShort=new Intl.DateTimeFormat(this.localization.locale,{day:"numeric",month:"long"})}addDays(e){this.setFocusedDay(g(this.focusedDay,e))}addMonths(e){this.setMonth(this.focusedDay.getMonth()+e)}addYears(e){this.setYear(this.focusedDay.getFullYear()+e)}startOfWeek(){this.setFocusedDay(b(this.focusedDay,this.firstDayOfWeek))}endOfWeek(){this.setFocusedDay(w(this.focusedDay,this.firstDayOfWeek))}setMonth(e){const t=x(f(this.focusedDay),e),a=m(t),n=x(this.focusedDay,e);this.setFocusedDay(D(n,t,a))}setYear(e){const t=z(f(this.focusedDay),e),a=m(t),n=z(this.focusedDay,e);this.setFocusedDay(D(n,t,a))}setFocusedDay(e){this.focusedDay=D(e,v(this.min),v(this.max)),this.dispatchEvent(new S("nord-focus-date",this.focusedDay))}};A.styles=[$,I],e([M(".n-calendar-select-month",!0)],A.prototype,"monthSelectNode",void 0),e([M('button[tabindex="0"]')],A.prototype,"focusedDayNode",void 0),e([o({attribute:!1})],A.prototype,"localization",void 0),e([o()],A.prototype,"value",void 0),e([o({type:Number})],A.prototype,"firstDayOfWeek",void 0),e([o()],A.prototype,"min",void 0),e([o()],A.prototype,"max",void 0),e([o({attribute:!1})],A.prototype,"isDateDisabled",void 0),e([s()],A.prototype,"activeFocus",void 0),e([s()],A.prototype,"focusedDay",void 0),A=e([t("nord-calendar")],A);var C=A;export{C,E as S,M as a,_ as i};
13
- //# sourceMappingURL=Calendar-582091ef.js.map
13
+ //# sourceMappingURL=Calendar-600fd148.js.map
package/lib/{Calendar-582091ef.js.map → Calendar-600fd148.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"file":"Calendar-582091ef.js","sources":["../node_modules/@lit/reactive-element/decorators/query.js","../node_modules/@lit/reactive-element/decorators/base.js","../../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":["import{decorateProperty as o}from\"./base.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */function i(i,n){return o({descriptor:o=>{const t={get(){var o,n;return null!==(n=null===(o=this.renderRoot)||void 0===o?void 0:o.querySelector(i))&&void 0!==n?n:null},enumerable:!0,configurable:!0};if(n){const n=\"symbol\"==typeof o?Symbol():\"__\"+o;t.get=function(){var o,t;return void 0===this[n]&&(this[n]=null!==(t=null===(o=this.renderRoot)||void 0===o?void 0:o.querySelector(i))&&void 0!==t?t:null),this[n]}}return t}})}export{i as query};\n//# sourceMappingURL=query.js.map\n","/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nconst e=(e,t,o)=>{Object.defineProperty(t,o,e)},t=(e,t)=>({kind:\"method\",placement:\"prototype\",key:t.key,descriptor:e}),o=({finisher:e,descriptor:t})=>(o,n)=>{var r;if(void 0===n){const n=null!==(r=o.originalKey)&&void 0!==r?r:o.key,i=null!=t?{kind:\"method\",placement:\"prototype\",key:n,descriptor:t(o.key)}:{...o,key:n};return null!=e&&(i.finisher=function(t){e(t,n)}),i}{const r=o.constructor;void 0!==t&&Object.defineProperty(o,n,t(n)),null==e||e(r,n)}};export{o as decorateProperty,e as legacyPrototypeMethod,t as standardPrototypeMethod};\n//# sourceMappingURL=base.js.map\n","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\"\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 SwipeControllerOptions = {\n target?: () => HTMLElement\n matchesGesture: (details: SwipeDetails) => boolean\n onSwipeEnd: (details: SwipeDetails) => void\n}\n\nexport class SwipeController implements ReactiveController {\n private host: ReactiveElement\n private attached = false\n\n private initialTouchX: number = 0\n private initialTouchY: number = 0\n private target: () => HTMLElement\n private onSwipeEnd: SwipeControllerOptions[\"onSwipeEnd\"]\n matchesGesture: SwipeControllerOptions[\"matchesGesture\"]\n\n constructor(host: ReactiveElement, options: SwipeControllerOptions) {\n this.host = host\n host.addController(this)\n this.target = options?.target ?? (() => host)\n this.matchesGesture = options.matchesGesture\n this.onSwipeEnd = options.onSwipeEnd\n }\n\n hostUpdated() {\n if (!this.attached) {\n this.attached = true\n\n const target = this.target()\n target.addEventListener(\"touchstart\", this.handleTouchStart)\n target.addEventListener(\"touchmove\", preventDefault)\n target.addEventListener(\"touchend\", this.handleTouchEnd)\n }\n }\n\n hostDisconnected() {\n this.attached = false\n\n const target = this.target()\n target.removeEventListener(\"touchstart\", this.handleTouchStart)\n target.removeEventListener(\"touchmove\", preventDefault)\n target.removeEventListener(\"touchend\", this.handleTouchEnd)\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\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 (this.matchesGesture(details)) {\n event.preventDefault()\n this.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, PropertyValues } 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 { range } from \"../common/number.js\"\nimport {\n addDays,\n clamp,\n DaysOfWeek,\n endOfMonth,\n endOfWeek,\n inRange,\n isEqualMonth,\n parseISODate,\n printISODate,\n setMonth,\n setYear,\n startOfMonth,\n startOfWeek,\n} from \"../common/dates.js\"\n\nimport localization, { CalendarLocalizedText } from \"./calendar-localization.js\"\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 = () => 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@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 /**\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\n @property({ attribute: false }) localization: CalendarLocalizedText = localization\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 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 willUpdate(changedProperties: PropertyValues<this>) {\n if (changedProperties.has(\"value\")) {\n this.setFocusedDay(parseISODate(this.value) || new Date())\n }\n if (changedProperties.has(\"localization\")) {\n this.createDateFormatter()\n }\n }\n\n protected updated(changedProperties: PropertyValues<this>): void {\n // @ts-expect-error focusedDay is private so TS complains, but we don't want to loosen the param type\n if (changedProperties.has(\"focusedDay\") && this.activeFocus) {\n this.focusedDayNode.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.localization.monthNames[focusedMonth]}, ${this.focusedDay.getFullYear()}\n </h2>\n </nord-visually-hidden>\n\n <div class=\"n-calendar-select\">\n <select\n aria-label=${this.localization.monthSelectLabel}\n class=\"n-calendar-select-month\"\n @input=${this.handleMonthSelect}\n >\n ${this.localization.monthNames.map(\n (month, i) =>\n html`<option\n key=${month}\n value=${i}\n ?selected=${i === focusedMonth}\n ?disabled=${!inRange(new Date(focusedYear, i, 1), minDateStartOfMonth, maxDateEndOfMonth)}\n >\n ${month}\n </option>`\n )}\n </select>\n <div class=\"n-calendar-select-label\" aria-hidden=\"true\">\n <span>${this.localization.monthNamesShort[focusedMonth]}</span>\n <nord-icon color=\"var(--n-color-icon)\" name=\"arrow-down-small\" size=\"xs\"></nord-icon>\n </div>\n </div>\n\n <div class=\"n-calendar-select\">\n <select\n aria-label=${this.localization.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 key=${year} ?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=\"xs\"></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.localization.prevMonthLabel}</nord-visually-hidden>\n <nord-icon\n color=\"var(--n-color-icon)\"\n name=${this.direction.isLTR ? \"arrow-left-small\" : \"arrow-right-small\"}\n size=\"s\"\n ></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.localization.nextMonthLabel}</nord-visually-hidden>\n <nord-icon\n color=\"var(--n-color-icon)\"\n name=${this.direction.isLTR ? \"arrow-right-small\" : \"arrow-left-small\"}\n size=\"s\"\n ></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 localization: this.localization,\n firstDayOfWeek: this.firstDayOfWeek,\n min: minDate,\n max: maxDate,\n isDateDisabled: this.isDateDisabled,\n })}\n </div>\n `\n }\n\n private createDateFormatter() {\n this.dateFormatShort = new Intl.DateTimeFormat(this.localization.locale, { day: \"numeric\", month: \"long\" })\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":["i","n","finisher","e","descriptor","t","o","r","originalKey","key","kind","placement","constructor","Object","defineProperty","get","this","renderRoot","querySelector","enumerable","configurable","Symbol","preventDefault","SwipeController","host","options","event","pageX","pageY","changedTouches","initialTouchX","initialTouchY","distX","distY","details","initialX","initialY","matchesGesture","onSwipeEnd","addController","target","hostUpdated","attached","addEventListener","handleTouchStart","handleTouchEnd","hostDisconnected","removeEventListener","isHorizontalSwipe","Math","abs","isDownwardsSwipe","Icon","registerIcon","arrowRightIcon","arrowLeftIcon","arrowDownIcon","fn","isDateDisabled","Calendar","LitElement","DirectionController","addMonths","createKeybindingsHandler","ArrowRight","addDays","direction","isLTR","ArrowLeft","ArrowDown","ArrowUp","Home","startOfWeek","End","endOfWeek","PageUp","PageDown","addYears","localization","Date","day","isInRange","inRange","parseISODate","min","max","isAllowed","value","printISODate","dispatchEvent","DateSelectEvent","setMonth","parseInt","setYear","activeFocus","focus","focusedDayNode","monthSelectNode","willUpdate","changedProperties","has","setFocusedDay","createDateFormatter","updated","render","valueAsDate","focusedMonth","focusedDay","getMonth","focusedYear","getFullYear","minDate","maxDate","minDateStartOfMonth","startOfMonth","undefined","maxDateEndOfMonth","endOfMonth","selectedYear","minYear","maxYear","html","dialogLabelId","monthNames","monthSelectLabel","handleMonthSelect","map","month","monthNamesShort","yearSelectLabel","handleYearSelect","repeat","range","year","handlePreviousMonthClick","isEqualMonth","prevMonthLabel","handleNextMonthClick","nextMonthLabel","monthView","onFocusOut","disableActiveFocus","onFocusIn","enableActiveFocus","dateFormatter","dateFormatShort","selectedDate","focusedDate","onDateSelect","handleDaySelect","onKeyboardNavigation","shortcuts","labelledById","firstDayOfWeek","Intl","DateTimeFormat","locale","days","months","years","date","clamp","componentStyle","style","__decorate","query","property","attribute","type","Number","state","customElement"],"mappings":";;;;;;;;;;;AAKG,SAASA,EAAEA,EAAEC,GAAG,MCAuG,GAAEC,SAASC,EAAEC,WAAWC,KAAK,CAACC,EAAEL,KAAK,IAAIM,EAAE,QAAG,IAASN,EAAE,CAAC,MAAMA,EAAE,QAAQM,EAAED,EAAEE,mBAAc,IAASD,EAAEA,EAAED,EAAEG,IAAIT,EAAE,MAAMK,EAAE,CAACK,KAAK,SAASC,UAAU,YAAYF,IAAIR,EAAEG,WAAWC,EAAEC,EAAEG,MAAM,IAAIH,EAAEG,IAAIR,GAAG,OAAO,MAAME,IAAIH,EAAEE,SAAS,SAASG,GAAGF,EAAEE,EAAEJ,KAAKD,EAAE,CAAC,MAAMO,EAAED,EAAEM,iBAAY,IAASP,GAAGQ,OAAOC,eAAeR,EAAEL,EAAEI,EAAEJ,IAAI,MAAME,GAAGA,EAAEI,EAAEN,KDAzaK,CAAE,CAACF,WAAWE,IAAI,MAAMD,EAAE,CAACU,MAAM,IAAIT,EAAEL,EAAE,OAAO,QAAQA,EAAE,QAAQK,EAAEU,KAAKC,kBAAa,IAASX,OAAE,EAAOA,EAAEY,cAAclB,UAAK,IAASC,EAAEA,EAAE,MAAMkB,YAAW,EAAGC,cAAa,GAAI,GAAGnB,EAAE,CAAC,MAAMA,EAAE,iBAAiBK,EAAEe,SAAS,KAAKf,EAAED,EAAEU,IAAI,WAAW,IAAIT,EAAED,EAAE,YAAO,IAASW,KAAKf,KAAKe,KAAKf,GAAG,QAAQI,EAAE,QAAQC,EAAEU,KAAKC,kBAAa,IAASX,OAAE,EAAOA,EAAEY,cAAclB,UAAK,IAASK,EAAEA,EAAE,MAAMW,KAAKf,IAAI,OAAOI,iDELtZ,kSACM,yBACD,2GCFL,+TACM,wBACD,0GCFL,sUACM,wBACD,8DCSpB,MAAMiB,EAAkBnB,GAAaA,EAAEmB,uBAQ1BC,EAUXX,YAAYY,EAAuBC,SAR3BT,eAAW,EAEXA,mBAAwB,EACxBA,mBAAwB,EAiCxBA,sBAAoBU,IAC1B,OAAOC,MAAEA,EAAKC,MAAEA,IAAWF,EAAMG,eACjCb,KAAKc,cAAgBH,EACrBX,KAAKe,cAAgBH,GAGfZ,oBAAkBU,IACxB,OAAOC,MAAEA,EAAKC,MAAEA,IAAWF,EAAMG,eAE3BG,EAAQL,EAAQX,KAAKc,cACrBG,EAAQL,EAAQZ,KAAKe,cACrBG,EAAU,CAAEC,SAAUnB,KAAKc,cAAeM,SAAUpB,KAAKe,cAAeJ,MAAAA,EAAOC,MAAAA,EAAOI,MAAAA,EAAOC,MAAAA,GAE/FjB,KAAKqB,eAAeH,KACtBR,EAAMJ,iBACNN,KAAKsB,WAAWJ,KA1ClBlB,KAAKQ,KAAOA,EACZA,EAAKe,cAAcvB,MACnBA,KAAKwB,iBAASf,MAAAA,SAAAA,EAASe,0BAAiBhB,EACxCR,KAAKqB,eAAiBZ,EAAQY,eAC9BrB,KAAKsB,WAAab,EAAQa,WAG5BG,cACE,IAAKzB,KAAK0B,SAAU,CAClB1B,KAAK0B,UAAW,EAEhB,MAAMF,EAASxB,KAAKwB,SACpBA,EAAOG,iBAAiB,aAAc3B,KAAK4B,kBAC3CJ,EAAOG,iBAAiB,YAAarB,GACrCkB,EAAOG,iBAAiB,WAAY3B,KAAK6B,iBAI7CC,mBACE9B,KAAK0B,UAAW,EAEhB,MAAMF,EAASxB,KAAKwB,SACpBA,EAAOO,oBAAoB,aAAc/B,KAAK4B,kBAC9CJ,EAAOO,oBAAoB,YAAazB,GACxCkB,EAAOO,oBAAoB,WAAY/B,KAAK6B,iBAuBhD,MAEaG,EAAoB,EAAGhB,MAAAA,EAAOC,MAAAA,KACzCgB,KAAKC,IAAIlB,IAHO,IAGgBiB,KAAKC,IAAIjB,IAHzB,GAKLkB,EAAmB,EAAGnB,MAAAA,EAAOC,MAAAA,KACxCgB,KAAKC,IAAIjB,IANO,IAMgBgB,KAAKC,IAAIlB,IANzB,IAMgDC,EAAQ,0kHC5C1EmB,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAClBH,EAAKC,aAAaG,GAElB,MAAMlC,EAAkBmC,GAAuBtD,IAC7CA,EAAEmB,iBACFmC,EAAGtD,IAGCuD,EAAiB,KAAM,EAa7B,IAAqBC,EAArB,cAAsCC,EAAtChD,kCAGUI,mBAAgB,gBAKhBA,eAAY,IAAI6C,EAAoB7C,MACpCA,WAAQ,IAAIO,EAAgBP,KAAM,CACxCqB,eAAgBW,EAChBV,WAAY,EAAGN,MAAAA,KAAYhB,KAAK8C,UAAU9B,EAAQ,EAAI,GAAK,KAGrDhB,eAAY+C,EAAyB,CAC3CC,WAAY1C,GAAe,IAAMN,KAAKiD,QAAQjD,KAAKkD,UAAUC,MAAQ,GAAK,KAC1EC,UAAW9C,GAAe,IAAMN,KAAKiD,QAAQjD,KAAKkD,UAAUC,OAAS,EAAI,KACzEE,UAAW/C,GAAe,IAAMN,KAAKiD,QAAQ,KAC7CK,QAAShD,GAAe,IAAMN,KAAKiD,SAAS,KAC5CM,KAAMjD,GAAe,IAAMN,KAAKwD,gBAChCC,IAAKnD,GAAe,IAAMN,KAAK0D,cAC/BC,OAAQrD,GAAe,IAAMN,KAAK8C,WAAW,KAC7Cc,SAAUtD,GAAe,IAAMN,KAAK8C,UAAU,KAC9C,eAAgBxC,GAAe,IAAMN,KAAK6D,UAAU,KACpD,iBAAkBvD,GAAe,IAAMN,KAAK6D,SAAS,OAavB7D,kBAAsC8D,EAK1D9D,WAAgB,GAMAA,sBAMhBA,SAAc,GAMdA,SAAc,GAMMA,oBAAwC0C,EAEvD1C,kBAAc,EACdA,gBAAa,IAAI+D,KAyJ1B/D,qBAAmBgE,IACzB,MAAMC,EAAYC,EAAQF,EAAKG,EAAanE,KAAKoE,KAAMD,EAAanE,KAAKqE,MACnEC,GAAatE,KAAK0C,eAAesB,GAEnCC,GAAaK,IACftE,KAAKuE,MAAQC,EAAaR,GAC1BhE,KAAKyE,cAAc,IAAIC,EAAgB,SAAUV,MA6C7ChE,uBAAqBb,IAC3Ba,KAAK2E,SAASC,SAASzF,EAAEqC,OAAO+C,MAAO,MAGjCvE,sBAAoBb,IAC1Ba,KAAK6E,QAAQD,SAASzF,EAAEqC,OAAO+C,MAAO,MAGhCvE,0BAAwBU,IAC9BA,EAAMJ,iBACNN,KAAK8C,UAAU,IAGT9C,8BAA4BU,IAClCA,EAAMJ,iBACNN,KAAK8C,WAAW,IAGV9C,uBAAoB,KAC1BA,KAAK8E,aAAc,GAGb9E,wBAAqB,KAC3BA,KAAK8E,aAAc,GA7NrBC,MAAMtE,SACJ,MAAMe,YAASf,MAAAA,SAAAA,EAASe,sBAAU,MAEnB,QAAXA,EACFxB,KAAKgF,eAAeD,QACA,UAAXvD,GACTxB,KAAKiF,gBAAgBF,QAIzBG,WAAWC,GACLA,EAAkBC,IAAI,UACxBpF,KAAKqF,cAAclB,EAAanE,KAAKuE,QAAU,IAAIR,MAEjDoB,EAAkBC,IAAI,iBACxBpF,KAAKsF,sBAICC,QAAQJ,GAEZA,EAAkBC,IAAI,eAAiBpF,KAAK8E,aAC9C9E,KAAKgF,eAAeD,QAIxBS,SACE,MAAMC,EAActB,EAAanE,KAAKuE,OAChCmB,EAAe1F,KAAK2F,WAAWC,WAC/BC,EAAc7F,KAAK2F,WAAWG,cAE9BC,EAAU5B,EAAanE,KAAKoE,KAC5B4B,EAAU7B,EAAanE,KAAKqE,KAC5B4B,EAAsBF,EAAUG,EAAaH,QAAWI,EACxDC,EAAoBJ,EAAUK,EAAWL,QAAWG,EAEpDG,GAAgBb,GAAezF,KAAK2F,YAAYG,cAChDS,EAAUR,EAAUA,EAAQD,cAAgBQ,EAAe,GAC3DE,EAAUR,EAAUA,EAAQF,cAAgBQ,EAAe,GAEjE,OAAOG,CAAI,6FAKQzG,KAAK0G,wDACV1G,KAAK8D,aAAa6C,WAAWjB,OAAkB1F,KAAK2F,WAAWG,+FAMpD9F,KAAK8D,aAAa8C,6DAEtB5G,KAAK6G,sBAEZ7G,KAAK8D,aAAa6C,WAAWG,KAC7B,CAACC,EAAO/H,IACNyH,CAAI,gBACIM,aACE/H,iBACIA,IAAM0G,kBACLxB,EAAQ,IAAIH,KAAK8B,EAAa7G,EAAG,GAAIiH,EAAqBG,OAErEW,wFAKA/G,KAAK8D,aAAakD,gBAAgBtB,gKAO7B1F,KAAK8D,aAAamD,2DAEtBjH,KAAKkH,qBAEZC,EACAC,EAAMb,EAASC,IACfa,GAAQA,IACRA,GAAQZ,CAAI,gBAAeY,iBAAkBA,IAASxB,MAAewB,wFAI/DrH,KAAK2F,WAAWG,uMASjB9F,KAAKsH,wCACFC,EAAaxB,EAAS/F,KAAK2F,oDAGf3F,KAAK8D,aAAa0D,qFAGjCxH,KAAKkD,UAAUC,MAAQ,mBAAqB,wGAO5CnD,KAAKyH,oCACFF,EAAavB,EAAShG,KAAK2F,oDAGf3F,KAAK8D,aAAa4D,qFAGjC1H,KAAKkD,UAAUC,MAAQ,oBAAsB,sEAO1DwE,EAAU,CACVC,WAAY5H,KAAK6H,mBACjBC,UAAW9H,KAAK+H,kBAChBC,cAAehI,KAAKiI,gBACpBC,aAAczC,EACd0C,YAAanI,KAAK2F,WAClByC,aAAcpI,KAAKqI,gBACnBC,qBAAsBtI,KAAKuI,UAC3BC,aAAcxI,KAAK0G,cACnB5C,aAAc9D,KAAK8D,aACnB2E,eAAgBzI,KAAKyI,eACrBrE,IAAK2B,EACL1B,IAAK2B,EACLtD,eAAgB1C,KAAK0C,yBAMrB4C,sBACNtF,KAAKiI,gBAAkB,IAAIS,KAAKC,eAAe3I,KAAK8D,aAAa8E,OAAQ,CAAE5E,IAAK,UAAW+C,MAAO,SAa5F9D,QAAQ4F,GACd7I,KAAKqF,cAAcpC,EAAQjD,KAAK2F,WAAYkD,IAGtC/F,UAAUgG,GAChB9I,KAAK2E,SAAS3E,KAAK2F,WAAWC,WAAakD,GAGrCjF,SAASkF,GACf/I,KAAK6E,QAAQ7E,KAAK2F,WAAWG,cAAgBiD,GAGvCvF,cACNxD,KAAKqF,cAAc7B,EAAYxD,KAAK2F,WAAY3F,KAAKyI,iBAG/C/E,YACN1D,KAAKqF,cAAc3B,EAAU1D,KAAK2F,WAAY3F,KAAKyI,iBAG7C9D,SAASoC,GACf,MAAM3C,EAAMO,EAASuB,EAAalG,KAAK2F,YAAaoB,GAC9C1C,EAAMgC,EAAWjC,GACjB4E,EAAOrE,EAAS3E,KAAK2F,WAAYoB,GAEvC/G,KAAKqF,cAAc4D,EAAMD,EAAM5E,EAAKC,IAG9BQ,QAAQwC,GACd,MAAMjD,EAAMS,EAAQqB,EAAalG,KAAK2F,YAAa0B,GAC7ChD,EAAMgC,EAAWjC,GACjB4E,EAAOnE,EAAQ7E,KAAK2F,WAAY0B,GAEtCrH,KAAKqF,cAAc4D,EAAMD,EAAM5E,EAAKC,IAG9BgB,cAAcrB,GACpBhE,KAAK2F,WAAasD,EAAMjF,EAAKG,EAAanE,KAAKoE,KAAMD,EAAanE,KAAKqE,MACvErE,KAAKyE,cAAc,IAAIC,EAAgB,kBAAmB1E,KAAK2F,eA7Q1DhD,SAAS,CAACuG,EAAgBC,GAIQC,GAAxCC,EAAM,4BAA4B,0CACJD,GAA9BC,EAAM,8DA+ByBD,GAA/BE,EAAS,CAAEC,WAAW,wCAKXH,GAAXE,iCAM2BF,GAA3BE,EAAS,CAAEE,KAAMC,+CAMNL,GAAXE,+BAMWF,GAAXE,+BAM+BF,GAA/BE,EAAS,CAAEC,WAAW,0CAEdH,GAARM,uCACQN,GAARM,sCArEkB/G,KADpBgH,EAAc,kBACMhH,SAAAA"}
1
+ {"version":3,"file":"Calendar-600fd148.js","sources":["../node_modules/@lit/reactive-element/decorators/query.js","../node_modules/@lit/reactive-element/decorators/base.js","../../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":["import{decorateProperty as o}from\"./base.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */function i(i,n){return o({descriptor:o=>{const t={get(){var o,n;return null!==(n=null===(o=this.renderRoot)||void 0===o?void 0:o.querySelector(i))&&void 0!==n?n:null},enumerable:!0,configurable:!0};if(n){const n=\"symbol\"==typeof o?Symbol():\"__\"+o;t.get=function(){var o,t;return void 0===this[n]&&(this[n]=null!==(t=null===(o=this.renderRoot)||void 0===o?void 0:o.querySelector(i))&&void 0!==t?t:null),this[n]}}return t}})}export{i as query};\n//# sourceMappingURL=query.js.map\n","/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nconst e=(e,t,o)=>{Object.defineProperty(t,o,e)},t=(e,t)=>({kind:\"method\",placement:\"prototype\",key:t.key,descriptor:e}),o=({finisher:e,descriptor:t})=>(o,n)=>{var r;if(void 0===n){const n=null!==(r=o.originalKey)&&void 0!==r?r:o.key,i=null!=t?{kind:\"method\",placement:\"prototype\",key:n,descriptor:t(o.key)}:{...o,key:n};return null!=e&&(i.finisher=function(t){e(t,n)}),i}{const r=o.constructor;void 0!==t&&Object.defineProperty(o,n,t(n)),null==e||e(r,n)}};export{o as decorateProperty,e as legacyPrototypeMethod,t as standardPrototypeMethod};\n//# sourceMappingURL=base.js.map\n","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\"\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 SwipeControllerOptions = {\n target?: () => HTMLElement\n matchesGesture: (details: SwipeDetails) => boolean\n onSwipeEnd: (details: SwipeDetails) => void\n}\n\nexport class SwipeController implements ReactiveController {\n private host: ReactiveElement\n private attached = false\n\n private initialTouchX: number = 0\n private initialTouchY: number = 0\n private target: () => HTMLElement\n private onSwipeEnd: SwipeControllerOptions[\"onSwipeEnd\"]\n matchesGesture: SwipeControllerOptions[\"matchesGesture\"]\n\n constructor(host: ReactiveElement, options: SwipeControllerOptions) {\n this.host = host\n host.addController(this)\n this.target = options?.target ?? (() => host)\n this.matchesGesture = options.matchesGesture\n this.onSwipeEnd = options.onSwipeEnd\n }\n\n hostUpdated() {\n if (!this.attached) {\n this.attached = true\n\n const target = this.target()\n target.addEventListener(\"touchstart\", this.handleTouchStart)\n target.addEventListener(\"touchmove\", preventDefault)\n target.addEventListener(\"touchend\", this.handleTouchEnd)\n }\n }\n\n hostDisconnected() {\n this.attached = false\n\n const target = this.target()\n target.removeEventListener(\"touchstart\", this.handleTouchStart)\n target.removeEventListener(\"touchmove\", preventDefault)\n target.removeEventListener(\"touchend\", this.handleTouchEnd)\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\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 (this.matchesGesture(details)) {\n event.preventDefault()\n this.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, PropertyValues } 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 { range } from \"../common/number.js\"\nimport {\n addDays,\n clamp,\n DaysOfWeek,\n endOfMonth,\n endOfWeek,\n inRange,\n isEqualMonth,\n parseISODate,\n printISODate,\n setMonth,\n setYear,\n startOfMonth,\n startOfWeek,\n} from \"../common/dates.js\"\n\nimport localization, { CalendarLocalizedText } from \"./calendar-localization.js\"\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 = () => 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@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 /**\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\n @property({ attribute: false }) localization: CalendarLocalizedText = localization\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 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 willUpdate(changedProperties: PropertyValues<this>) {\n if (changedProperties.has(\"value\")) {\n this.setFocusedDay(parseISODate(this.value) || new Date())\n }\n if (changedProperties.has(\"localization\")) {\n this.createDateFormatter()\n }\n }\n\n protected updated(changedProperties: PropertyValues<this>): void {\n // @ts-expect-error focusedDay is private so TS complains, but we don't want to loosen the param type\n if (changedProperties.has(\"focusedDay\") && this.activeFocus) {\n this.focusedDayNode.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.localization.monthNames[focusedMonth]}, ${this.focusedDay.getFullYear()}\n </h2>\n </nord-visually-hidden>\n\n <div class=\"n-calendar-select\">\n <select\n aria-label=${this.localization.monthSelectLabel}\n class=\"n-calendar-select-month\"\n @input=${this.handleMonthSelect}\n >\n ${this.localization.monthNames.map(\n (month, i) =>\n html`<option\n key=${month}\n value=${i}\n ?selected=${i === focusedMonth}\n ?disabled=${!inRange(new Date(focusedYear, i, 1), minDateStartOfMonth, maxDateEndOfMonth)}\n >\n ${month}\n </option>`\n )}\n </select>\n <div class=\"n-calendar-select-label\" aria-hidden=\"true\">\n <span>${this.localization.monthNamesShort[focusedMonth]}</span>\n <nord-icon color=\"var(--n-color-icon)\" name=\"arrow-down-small\" size=\"xs\"></nord-icon>\n </div>\n </div>\n\n <div class=\"n-calendar-select\">\n <select\n aria-label=${this.localization.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 key=${year} ?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=\"xs\"></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.localization.prevMonthLabel}</nord-visually-hidden>\n <nord-icon\n color=\"var(--n-color-icon)\"\n name=${this.direction.isLTR ? \"arrow-left-small\" : \"arrow-right-small\"}\n size=\"s\"\n ></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.localization.nextMonthLabel}</nord-visually-hidden>\n <nord-icon\n color=\"var(--n-color-icon)\"\n name=${this.direction.isLTR ? \"arrow-right-small\" : \"arrow-left-small\"}\n size=\"s\"\n ></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 localization: this.localization,\n firstDayOfWeek: this.firstDayOfWeek,\n min: minDate,\n max: maxDate,\n isDateDisabled: this.isDateDisabled,\n })}\n </div>\n `\n }\n\n private createDateFormatter() {\n this.dateFormatShort = new Intl.DateTimeFormat(this.localization.locale, { day: \"numeric\", month: \"long\" })\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":["i","n","finisher","e","descriptor","t","o","r","originalKey","key","kind","placement","constructor","Object","defineProperty","get","this","renderRoot","querySelector","enumerable","configurable","Symbol","preventDefault","SwipeController","host","options","event","pageX","pageY","changedTouches","initialTouchX","initialTouchY","distX","distY","details","initialX","initialY","matchesGesture","onSwipeEnd","addController","target","hostUpdated","attached","addEventListener","handleTouchStart","handleTouchEnd","hostDisconnected","removeEventListener","isHorizontalSwipe","Math","abs","isDownwardsSwipe","Icon","registerIcon","arrowRightIcon","arrowLeftIcon","arrowDownIcon","fn","isDateDisabled","Calendar","LitElement","DirectionController","addMonths","createKeybindingsHandler","ArrowRight","addDays","direction","isLTR","ArrowLeft","ArrowDown","ArrowUp","Home","startOfWeek","End","endOfWeek","PageUp","PageDown","addYears","localization","Date","day","isInRange","inRange","parseISODate","min","max","isAllowed","value","printISODate","dispatchEvent","DateSelectEvent","setMonth","parseInt","setYear","activeFocus","focus","focusedDayNode","monthSelectNode","willUpdate","changedProperties","has","setFocusedDay","createDateFormatter","updated","render","valueAsDate","focusedMonth","focusedDay","getMonth","focusedYear","getFullYear","minDate","maxDate","minDateStartOfMonth","startOfMonth","undefined","maxDateEndOfMonth","endOfMonth","selectedYear","minYear","maxYear","html","dialogLabelId","monthNames","monthSelectLabel","handleMonthSelect","map","month","monthNamesShort","yearSelectLabel","handleYearSelect","repeat","range","year","handlePreviousMonthClick","isEqualMonth","prevMonthLabel","handleNextMonthClick","nextMonthLabel","monthView","onFocusOut","disableActiveFocus","onFocusIn","enableActiveFocus","dateFormatter","dateFormatShort","selectedDate","focusedDate","onDateSelect","handleDaySelect","onKeyboardNavigation","shortcuts","labelledById","firstDayOfWeek","Intl","DateTimeFormat","locale","days","months","years","date","clamp","componentStyle","style","__decorate","query","property","attribute","type","Number","state","customElement"],"mappings":"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"}
package/lib/Calendar.js CHANGED
@@ -1,2 +1,2 @@
1
- import"./query-assigned-elements-37b095c4.js";import"./lit-element-74b6bb4b.js";import"./property-03f59dce.js";import"./state-70f38ceb.js";export{C as default}from"./Calendar-582091ef.js";import"./number-3a8ef88a.js";import"./tinykeys.module-84e6cc41.js";import"./Button.js";import"./VisuallyHidden.js";import"./Icon.js";import"./DirectionController-82794ee9.js";import"./dates-ccf5a897.js";import"./calendar-localization.js";import"./month-view.js";import"./DateSelectEvent.js";import"./Component-9d373ef3.js";import"./directive-de55b00a.js";import"./ref-7d028e3a.js";import"./if-defined-fe657a02.js";import"./LightDomController-011334da.js";import"./FocusableMixin-ebb67709.js";import"./InputMixin-94d15730.js";import"./unsafe-html-989a642b.js";import"./class-map-87423405.js";import"./collection-f3631dc8.js";import"./events-731d0007.js";
1
+ import"./query-assigned-elements-37b095c4.js";import"./lit-element-74b6bb4b.js";import"./property-03f59dce.js";import"./state-70f38ceb.js";export{C as default}from"./Calendar-600fd148.js";import"./number-3a8ef88a.js";import"./tinykeys.module-84e6cc41.js";import"./Button.js";import"./VisuallyHidden.js";import"./Icon.js";import"./DirectionController-82794ee9.js";import"./dates-ccf5a897.js";import"./calendar-localization.js";import"./month-view.js";import"./DateSelectEvent.js";import"./Component-9d373ef3.js";import"./directive-de55b00a.js";import"./ref-7d028e3a.js";import"./if-defined-fe657a02.js";import"./LightDomController-011334da.js";import"./FocusableMixin-ebb67709.js";import"./InputMixin-94d15730.js";import"./unsafe-html-989a642b.js";import"./class-map-87423405.js";import"./collection-f3631dc8.js";import"./events-731d0007.js";
2
2
  //# sourceMappingURL=Calendar.js.map
package/lib/DatePicker.js CHANGED
@@ -1,2 +1,2 @@
1
- import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{r as i,$ as a,w as o,s as n}from"./lit-element-74b6bb4b.js";import{e as r}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{S as l,i as d,a as c}from"./Calendar-582091ef.js";import{o as p}from"./class-map-87423405.js";import{n as h}from"./ref-7d028e3a.js";import{l as m}from"./if-defined-fe657a02.js";import{F as u}from"./FocusableMixin-ebb67709.js";import{F as b}from"./FormAssociatedMixin-ccae91fd.js";import{I as v}from"./InputMixin-94d15730.js";import{k as g,p as f,a as y}from"./dates-ccf5a897.js";import{N as w}from"./events-731d0007.js";import"./Button.js";import x from"./Icon.js";import"./VisuallyHidden.js";import{s as k}from"./Component-9d373ef3.js";import{s as z}from"./FormField-50bd73d5.js";import{s as j}from"./TextField-ece1c786.js";import{isoAdapter as $}from"./date-adapter.js";import D from"./date-localization.js";import{L as F}from"./LightDismissController-cc5b4bf2.js";import"./number-3a8ef88a.js";import"./directive-de55b00a.js";import"./tinykeys.module-84e6cc41.js";import"./DirectionController-82794ee9.js";import"./calendar-localization.js";import"./month-view.js";import"./collection-f3631dc8.js";import"./DateSelectEvent.js";import"./SlotController-5bfc47d1.js";import"./LightDomController-011334da.js";import"./unsafe-html-989a642b.js";import"./ShortcutController-93173ff4.js";var L=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"});var A=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M89.796 74.956a7 7 0 0 1 0-9.912L136.92 17.92a10.5 10.5 0 0 0-14.84-14.84L74.956 50.204a7 7 0 0 1-9.912 0L17.92 3.08A10.5 10.5 0 0 0 3.08 17.92l47.124 47.124a7 7 0 0 1 0 9.912L3.08 122.08a10.5 10.5 0 1 0 14.84 14.84l47.124-47.124a7 7 0 0 1 9.912 0l47.124 47.124a10.5 10.5 0 0 0 14.84-14.84z"/></svg>',title:"interface-close-small",tags:"nordicon interface close remove small cross delete erase symbol"});const C=i`:host{--n-date-picker-color-overlay:rgba(0, 0, 0, 0.8);--n-date-picker-line-height:1.25;--n-date-picker-toggle-height:34px;color:var(--n-color-text);font-size:var(--n-font-size-m);position:relative}.n-input-container{inline-size:fit-content}:host([expand]) .n-input-container{inline-size:100%}.n-date-toggle{-webkit-appearance:none;appearance:none;min-block-size:var(--n-date-picker-toggle-height);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{padding-inline-end:calc(var(--n-space-s) * 1.6 + var(--n-date-picker-toggle-height))}[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-dropdown)}@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-dropdown)}nord-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 .4s ease,opacity .4s ease,visibility .4s ease;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-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;z-index:10}@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}`;x.registerIcon(L),x.registerIcon(A);const B=/[^0-9./-]+/g,E=()=>!1;let I=class extends(b(v(u(n)))){constructor(){super(...arguments),this.dismiss=new F(this,{isOpen:()=>this.open,onDismiss:e=>this.hide("click"!==e.type),isDismissible:e=>e!==this.calendar&&e!==this.toggleButton}),this.swipe=new l(this,{target:()=>this.dialog,matchesGesture:d,onSwipeEnd:()=>this.hide(!1)}),this.open=!1,this.value="",this.min="",this.max="",this.direction="right",this.firstDayOfWeek=1,this.localization=D,this.dateAdapter=$,this.isDateDisabled=E,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 w("blur"))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new w("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,B),this.dispatchEvent(new w("input"));const i=this.dateAdapter.parse(t.value,g);(i||""===t.value)&&this.setValue(i)}}get valueAsDate(){return f(this.value)}set valueAsDate(e){this.value=e?y(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?y(new Date(e)):""}show(){this.open=!0,this.dispatchEvent(new w("open")),this.updateComplete.then((()=>this.calendar.focus({target:"month"})))}hide(e=!0){this.open=!1,this.dispatchEvent(new w("close")),e&&this.toggleButton.focus()}willUpdate(e){e.has("localization")&&this.createDateFormatters()}createDateFormatters(){this.dateFormatLong=new Intl.DateTimeFormat(this.localization.locale,{day:"numeric",month:"long",year:"numeric"})}render(){const{valueAsDate:e}=this,t=e?this.dateAdapter.format(e):"";return a`${this.renderLabel()}<div class="n-input-container"><input class="n-input" name="${this.name}" .value="${t}" placeholder="${m(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" ${h(this.focusableRef)} aria-invalid="${m(this.error?"true":void 0)}" aria-describedby="${m(this.getDescribedBy())}"> <button class="n-date-toggle" @click="${this.toggleOpen}" ?disabled="${this.disabled}" type="button"><nord-icon name="interface-calendar" size="s"></nord-icon><nord-visually-hidden>${D.buttonLabel} ${e?a`<span>, ${D.selectedDateMessage} ${this.dateFormatLong.format(e)}</span>`:o}</nord-visually-hidden></button></div>${this.renderError()}<div class="${p({"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.localization.calendarHeading}</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.localization.closeLabel}</nord-visually-hidden></button></div><nord-calendar value="${this.value}" min="${this.min}" max="${this.max}" .localization="${this.localization}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" @change="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></div></div>`}focusFirst(){this.closeButton.focus()}focusLast(){this.calendar.focus({target:"day"})}setValue(e){this.value=e?y(e):"",this.dispatchEvent(new w("change"))}};I.styles=[k,z,j,C],e([c(".n-date-toggle",!0)],I.prototype,"toggleButton",void 0),e([c(".n-date-close",!0)],I.prototype,"closeButton",void 0),e([c("nord-calendar",!0)],I.prototype,"calendar",void 0),e([c('[role="dialog"]',!0)],I.prototype,"dialog",void 0),e([s()],I.prototype,"open",void 0),e([r()],I.prototype,"value",void 0),e([r()],I.prototype,"min",void 0),e([r()],I.prototype,"max",void 0),e([r()],I.prototype,"direction",void 0),e([r({attribute:"first-day-of-week",type:Number})],I.prototype,"firstDayOfWeek",void 0),e([r({attribute:!1})],I.prototype,"localization",void 0),e([r({attribute:!1})],I.prototype,"dateAdapter",void 0),e([r({attribute:!1})],I.prototype,"isDateDisabled",void 0),I=e([t("nord-date-picker")],I);var O=I;export{O as default};
1
+ import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{r as i,$ as a,w as o,s as n}from"./lit-element-74b6bb4b.js";import{e as r}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{S as l,i as d,a as c}from"./Calendar-600fd148.js";import{o as p}from"./class-map-87423405.js";import{n as h}from"./ref-7d028e3a.js";import{l as m}from"./if-defined-fe657a02.js";import{F as u}from"./FocusableMixin-ebb67709.js";import{F as b}from"./FormAssociatedMixin-ccae91fd.js";import{I as v}from"./InputMixin-94d15730.js";import{k as g,p as f,a as y}from"./dates-ccf5a897.js";import{N as w}from"./events-731d0007.js";import"./Button.js";import x from"./Icon.js";import"./VisuallyHidden.js";import{s as k}from"./Component-9d373ef3.js";import{s as z}from"./FormField-50bd73d5.js";import{s as j}from"./TextField-ece1c786.js";import{isoAdapter as $}from"./date-adapter.js";import D from"./date-localization.js";import{L as F}from"./LightDismissController-cc5b4bf2.js";import"./number-3a8ef88a.js";import"./directive-de55b00a.js";import"./tinykeys.module-84e6cc41.js";import"./DirectionController-82794ee9.js";import"./calendar-localization.js";import"./month-view.js";import"./collection-f3631dc8.js";import"./DateSelectEvent.js";import"./SlotController-5bfc47d1.js";import"./LightDomController-011334da.js";import"./unsafe-html-989a642b.js";import"./ShortcutController-93173ff4.js";var L=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"});var A=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M89.796 74.956a7 7 0 0 1 0-9.912L136.92 17.92a10.5 10.5 0 0 0-14.84-14.84L74.956 50.204a7 7 0 0 1-9.912 0L17.92 3.08A10.5 10.5 0 0 0 3.08 17.92l47.124 47.124a7 7 0 0 1 0 9.912L3.08 122.08a10.5 10.5 0 1 0 14.84 14.84l47.124-47.124a7 7 0 0 1 9.912 0l47.124 47.124a10.5 10.5 0 0 0 14.84-14.84z"/></svg>',title:"interface-close-small",tags:"nordicon interface close remove small cross delete erase symbol"});const C=i`:host{--n-date-picker-color-overlay:rgba(0, 0, 0, 0.8);--n-date-picker-line-height:1.25;--n-date-picker-toggle-height:34px;color:var(--n-color-text);font-size:var(--n-font-size-m);position:relative}.n-input-container{inline-size:fit-content}:host([expand]) .n-input-container{inline-size:100%}.n-date-toggle{-webkit-appearance:none;appearance:none;min-block-size:var(--n-date-picker-toggle-height);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{padding-inline-end:calc(var(--n-space-s) * 1.6 + var(--n-date-picker-toggle-height))}[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-dropdown)}@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-dropdown)}nord-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 .4s ease,opacity .4s ease,visibility .4s ease;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-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;z-index:10}@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}`;x.registerIcon(L),x.registerIcon(A);const B=/[^0-9./-]+/g,E=()=>!1;let I=class extends(b(v(u(n)))){constructor(){super(...arguments),this.dismiss=new F(this,{isOpen:()=>this.open,onDismiss:e=>this.hide("click"!==e.type),isDismissible:e=>e!==this.calendar&&e!==this.toggleButton}),this.swipe=new l(this,{target:()=>this.dialog,matchesGesture:d,onSwipeEnd:()=>this.hide(!1)}),this.open=!1,this.value="",this.min="",this.max="",this.direction="right",this.firstDayOfWeek=1,this.localization=D,this.dateAdapter=$,this.isDateDisabled=E,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 w("blur"))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new w("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,B),this.dispatchEvent(new w("input"));const i=this.dateAdapter.parse(t.value,g);(i||""===t.value)&&this.setValue(i)}}get valueAsDate(){return f(this.value)}set valueAsDate(e){this.value=e?y(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?y(new Date(e)):""}show(){this.open=!0,this.dispatchEvent(new w("open")),this.updateComplete.then((()=>this.calendar.focus({target:"month"})))}hide(e=!0){this.open=!1,this.dispatchEvent(new w("close")),e&&this.toggleButton.focus()}willUpdate(e){e.has("localization")&&this.createDateFormatters()}createDateFormatters(){this.dateFormatLong=new Intl.DateTimeFormat(this.localization.locale,{day:"numeric",month:"long",year:"numeric"})}render(){const{valueAsDate:e}=this,t=e?this.dateAdapter.format(e):"";return a`${this.renderLabel()}<div class="n-input-container"><input class="n-input" name="${this.name}" .value="${t}" placeholder="${m(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" ${h(this.focusableRef)} aria-invalid="${m(this.error?"true":void 0)}" aria-describedby="${m(this.getDescribedBy())}"> <button class="n-date-toggle" @click="${this.toggleOpen}" ?disabled="${this.disabled}" type="button"><nord-icon name="interface-calendar" size="s"></nord-icon><nord-visually-hidden>${D.buttonLabel} ${e?a`<span>, ${D.selectedDateMessage} ${this.dateFormatLong.format(e)}</span>`:o}</nord-visually-hidden></button></div>${this.renderError()}<div class="${p({"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.localization.calendarHeading}</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.localization.closeLabel}</nord-visually-hidden></button></div><nord-calendar value="${this.value}" min="${this.min}" max="${this.max}" .localization="${this.localization}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" @change="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></div></div>`}focusFirst(){this.closeButton.focus()}focusLast(){this.calendar.focus({target:"day"})}setValue(e){this.value=e?y(e):"",this.dispatchEvent(new w("change"))}};I.styles=[k,z,j,C],e([c(".n-date-toggle",!0)],I.prototype,"toggleButton",void 0),e([c(".n-date-close",!0)],I.prototype,"closeButton",void 0),e([c("nord-calendar",!0)],I.prototype,"calendar",void 0),e([c('[role="dialog"]',!0)],I.prototype,"dialog",void 0),e([s()],I.prototype,"open",void 0),e([r()],I.prototype,"value",void 0),e([r()],I.prototype,"min",void 0),e([r()],I.prototype,"max",void 0),e([r()],I.prototype,"direction",void 0),e([r({attribute:"first-day-of-week",type:Number})],I.prototype,"firstDayOfWeek",void 0),e([r({attribute:!1})],I.prototype,"localization",void 0),e([r({attribute:!1})],I.prototype,"dateAdapter",void 0),e([r({attribute:!1})],I.prototype,"isDateDisabled",void 0),I=e([t("nord-date-picker")],I);var O=I;export{O as default};
2
2
  //# sourceMappingURL=DatePicker.js.map
package/lib/Input.js CHANGED
@@ -1,2 +1,2 @@
1
- import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{r as i,w as s,$ as n,s as r}from"./lit-element-74b6bb4b.js";import{e as o}from"./property-03f59dce.js";import{l as a}from"./if-defined-fe657a02.js";import{n as l}from"./ref-7d028e3a.js";import{o as d}from"./unsafe-html-989a642b.js";import{F as p}from"./FocusableMixin-ebb67709.js";import{F as c}from"./FormAssociatedMixin-ccae91fd.js";import{I as m}from"./InputMixin-94d15730.js";import{s as h}from"./Component-9d373ef3.js";import{s as u}from"./FormField-50bd73d5.js";import{s as f}from"./TextField-ece1c786.js";import{S as b}from"./SlotController-5bfc47d1.js";import"./directive-de55b00a.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const v=i`.n-input::-webkit-search-cancel-button,.n-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}slot[name=before]{display:flex;align-items:center;position:absolute;margin-inline-start:var(--n-space-m);block-size:100%;pointer-events:none;color:var(--n-color-icon)}slot[name=before]:not([hidden])+.n-input{padding-inline-start:var(--n-space-xl)}::slotted(svg),svg{block-size:var(--n-size-icon-s);inline-size:var(--n-size-icon-s)}`;let y=class extends(c(m(p(r)))){constructor(){super(...arguments),this.beforeSlot=new b(this,"before"),this.type="text"}render(){var e;const t="search"===this.type||this.beforeSlot.hasContent,i="number"===this.type,r="search"===this.type?d('<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>'):s;return n`${this.renderLabel()}<div class="n-input-container"><slot name="before" ?hidden="${!t}">${r}</slot><input ${l(this.focusableRef)} id="${this.inputId}" class="n-input" type="${i?"text":this.type}" inputmode="${a(i?"numeric":void 0)}" pattern="${a(i?"[0-9]*":void 0)}" ?disabled="${this.disabled}" ?required="${this.required}" 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"></div>${this.renderError()}`}handleKeydown(e){var t;"Enter"===e.key&&this.form&&(null===(t=this.form.querySelector('button[type="submit"]'))||void 0===t||t.click())}};y.styles=[h,u,f,v],e([o()],y.prototype,"type",void 0),y=e([t("nord-input")],y);var $=y;export{$ as default};
1
+ import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{r as i,w as s,$ as n,s as r}from"./lit-element-74b6bb4b.js";import{e as o}from"./property-03f59dce.js";import{l as a}from"./if-defined-fe657a02.js";import{n as l}from"./ref-7d028e3a.js";import{o as d}from"./unsafe-html-989a642b.js";import{F as p}from"./FocusableMixin-ebb67709.js";import{F as m}from"./FormAssociatedMixin-ccae91fd.js";import{I as c}from"./InputMixin-94d15730.js";import{s as h}from"./Component-9d373ef3.js";import{s as u}from"./FormField-50bd73d5.js";import{s as f}from"./TextField-ece1c786.js";import{S as b}from"./SlotController-5bfc47d1.js";import"./directive-de55b00a.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const v=i`.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=start]{display:flex;align-items:center;position:absolute;margin-inline-start:var(--n-space-m);block-size:100%;pointer-events:none;color:var(--n-color-icon)}slot[name=start]:not([hidden])+.n-input{padding-inline-start:var(--n-space-xl)}::slotted(svg),svg{block-size:var(--n-size-icon-s)!important;inline-size:var(--n-size-icon-s)!important}`;let y=class extends(m(c(p(r)))){constructor(){super(...arguments),this.startSlot=new b(this,"start"),this.type="text"}render(){var e;const t="search"===this.type||this.startSlot.hasContent,i="number"===this.type,r="search"===this.type?d('<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>'):s;return n`${this.renderLabel()}<div class="n-input-container"><slot name="${this.startSlot.slotName}" ?hidden="${!t}">${r}</slot><input ${l(this.focusableRef)} id="${this.inputId}" class="n-input" type="${i?"text":this.type}" inputmode="${a(i?"numeric":void 0)}" pattern="${a(i?"[0-9]*":void 0)}" ?disabled="${this.disabled}" ?required="${this.required}" 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"></div>${this.renderError()}`}handleKeydown(e){var t;"Enter"===e.key&&this.form&&(null===(t=this.form.querySelector('button[type="submit"]'))||void 0===t||t.click())}};y.styles=[h,u,f,v],e([o()],y.prototype,"type",void 0),y=e([t("nord-input")],y);var $=y;export{$ as default};
2
2
  //# sourceMappingURL=Input.js.map
package/lib/Input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Input.js","sources":["../src/input/Input.ts","../../icons/lib/assets/navigation-search.js"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\"\n\nimport searchIcon from \"@nordhealth/icons/lib/assets/navigation-search.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./Input.css\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\n/**\n * Inputs are used to allow users to provide text input when the expected input is short.\n * As well as plain text, Input supports various types of text, including passwords and numbers.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n * @slot before - Optional slot that holds an icon for the input.\n */\n@customElement(\"nord-input\")\nexport default class Input extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n private beforeSlot = new SlotController(this, \"before\")\n\n /**\n * The type of the input.\n */\n @property() type: \"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\" = \"text\"\n\n render() {\n const hasIcon = this.type === \"search\" || this.beforeSlot.hasContent\n const isNumber = this.type === \"number\"\n const defaultIcon = this.type === \"search\" ? unsafeHTML(searchIcon) : nothing\n\n return html`\n ${this.renderLabel()}\n\n <div class=\"n-input-container\">\n <slot name=\"before\" ?hidden=${!hasIcon}>${defaultIcon}</slot>\n <input\n ${ref(this.focusableRef)}\n id=${this.inputId}\n class=\"n-input\"\n type=${isNumber ? \"text\" : this.type}\n inputmode=${ifDefined(isNumber ? \"numeric\" : undefined)}\n pattern=${ifDefined(isNumber ? \"[0-9]*\" : undefined)}\n ?disabled=${this.disabled}\n ?required=${this.required}\n name=${ifDefined(this.name)}\n .value=${this.value ?? \"\"}\n placeholder=${ifDefined(this.placeholder)}\n @input=${this.handleInput}\n @change=${this.handleChange}\n @keydown=${this.handleKeydown}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n spellcheck=\"false\"\n />\n </div>\n\n ${this.renderError()}\n `\n }\n\n private handleKeydown(e: KeyboardEvent) {\n if (e.key === \"Enter\" && this.form) {\n this.form.querySelector<HTMLButtonElement>(`button[type=\"submit\"]`)?.click()\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-input\": Input\n }\n}\n","export default '<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>'\nexport const title = \"navigation-search\"\nexport const tags = \"nordicon navigation menu find search magnifying glass\"\n"],"names":["Input","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","SlotController","render","hasIcon","type","beforeSlot","hasContent","isNumber","defaultIcon","unsafeHTML","nothing","html","renderLabel","ref","focusableRef","inputId","ifDefined","undefined","disabled","required","name","value","placeholder","handleInput","handleChange","handleKeydown","getDescribedBy","getInvalid","renderError","e","key","form","querySelector","click","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","property","customElement"],"mappings":"4pCA6BA,IAAqBA,EAArB,cAAmCC,EAAoBC,EAAWC,EAAeC,MAAjFC,kCAGUC,gBAAa,IAAIC,EAAeD,KAAM,UAKlCA,UAA4E,OAExFE,eACE,MAAMC,EAAwB,WAAdH,KAAKI,MAAqBJ,KAAKK,WAAWC,WACpDC,EAAyB,WAAdP,KAAKI,KAChBI,EAA4B,WAAdR,KAAKI,KAAoBK,EC1ClC,iQD0C2DC,EAEtE,OAAOC,CAAI,GACPX,KAAKY,6EAG0BT,MAAWK,kBAEtCK,EAAIb,KAAKc,qBACNd,KAAKe,kCAEHR,EAAW,OAASP,KAAKI,oBACpBY,EAAUT,EAAW,eAAYU,gBACnCD,EAAUT,EAAW,cAAWU,kBAC9BjB,KAAKkB,wBACLlB,KAAKmB,mBACVH,EAAUhB,KAAKoB,4BACbpB,KAAKqB,qBAAS,oBACTL,EAAUhB,KAAKsB,yBACpBtB,KAAKuB,yBACJvB,KAAKwB,2BACJxB,KAAKyB,oCACGT,EAAUhB,KAAK0B,oCACnBV,EAAUhB,KAAK2B,2CAKhC3B,KAAK4B,gBAIHH,cAAcI,SACN,UAAVA,EAAEC,KAAmB9B,KAAK+B,iBAC5B/B,KAAK+B,KAAKC,cAAiC,yCAA0BC,WA9ClEvC,SAAS,CAACwC,EAAgBC,EAAgBC,EAAgBC,GAOrDC,GAAXC,gCARkB7C,KADpB8C,EAAc,eACM9C,SAAAA"}
1
+ {"version":3,"file":"Input.js","sources":["../src/input/Input.ts","../../icons/lib/assets/navigation-search.js"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\"\n\nimport searchIcon from \"@nordhealth/icons/lib/assets/navigation-search.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./Input.css\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\n/**\n * Inputs are used to allow users to provide text input when the expected input is short.\n * As well as plain text, Input supports various types of text, including passwords and numbers.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n * @slot start - Optional slot used to place an icon at the start of the input.\n */\n@customElement(\"nord-input\")\nexport default class Input extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n private startSlot = new SlotController(this, \"start\")\n\n /**\n * The type of the input.\n */\n @property() type: \"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\" = \"text\"\n\n render() {\n const hasIcon = this.type === \"search\" || this.startSlot.hasContent\n const isNumber = this.type === \"number\"\n const defaultIcon = this.type === \"search\" ? unsafeHTML(searchIcon) : nothing\n\n return html`\n ${this.renderLabel()}\n\n <div class=\"n-input-container\">\n <slot name=${this.startSlot.slotName} ?hidden=${!hasIcon}>${defaultIcon}</slot>\n <input\n ${ref(this.focusableRef)}\n id=${this.inputId}\n class=\"n-input\"\n type=${isNumber ? \"text\" : this.type}\n inputmode=${ifDefined(isNumber ? \"numeric\" : undefined)}\n pattern=${ifDefined(isNumber ? \"[0-9]*\" : undefined)}\n ?disabled=${this.disabled}\n ?required=${this.required}\n name=${ifDefined(this.name)}\n .value=${this.value ?? \"\"}\n placeholder=${ifDefined(this.placeholder)}\n @input=${this.handleInput}\n @change=${this.handleChange}\n @keydown=${this.handleKeydown}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n spellcheck=\"false\"\n />\n </div>\n\n ${this.renderError()}\n `\n }\n\n private handleKeydown(e: KeyboardEvent) {\n if (e.key === \"Enter\" && this.form) {\n this.form.querySelector<HTMLButtonElement>(`button[type=\"submit\"]`)?.click()\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-input\": Input\n }\n}\n","export default '<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>'\nexport const title = \"navigation-search\"\nexport const tags = \"nordicon navigation menu find search magnifying glass\"\n"],"names":["Input","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","SlotController","render","hasIcon","type","startSlot","hasContent","isNumber","defaultIcon","unsafeHTML","nothing","html","renderLabel","slotName","ref","focusableRef","inputId","ifDefined","undefined","disabled","required","name","value","placeholder","handleInput","handleChange","handleKeydown","getDescribedBy","getInvalid","renderError","e","key","form","querySelector","click","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","property","customElement"],"mappings":"guCA6BA,IAAqBA,EAArB,cAAmCC,EAAoBC,EAAWC,EAAeC,MAAjFC,kCAGUC,eAAY,IAAIC,EAAeD,KAAM,SAKjCA,UAA4E,OAExFE,eACE,MAAMC,EAAwB,WAAdH,KAAKI,MAAqBJ,KAAKK,UAAUC,WACnDC,EAAyB,WAAdP,KAAKI,KAChBI,EAA4B,WAAdR,KAAKI,KAAoBK,EC1ClC,iQD0C2DC,EAEtE,OAAOC,CAAI,GACPX,KAAKY,2DAGQZ,KAAKK,UAAUQ,uBAAqBV,MAAWK,kBAExDM,EAAId,KAAKe,qBACNf,KAAKgB,kCAEHT,EAAW,OAASP,KAAKI,oBACpBa,EAAUV,EAAW,eAAYW,gBACnCD,EAAUV,EAAW,cAAWW,kBAC9BlB,KAAKmB,wBACLnB,KAAKoB,mBACVH,EAAUjB,KAAKqB,4BACbrB,KAAKsB,qBAAS,oBACTL,EAAUjB,KAAKuB,yBACpBvB,KAAKwB,yBACJxB,KAAKyB,2BACJzB,KAAK0B,oCACGT,EAAUjB,KAAK2B,oCACnBV,EAAUjB,KAAK4B,2CAKhC5B,KAAK6B,gBAIHH,cAAcI,SACN,UAAVA,EAAEC,KAAmB/B,KAAKgC,iBAC5BhC,KAAKgC,KAAKC,cAAiC,yCAA0BC,WA9ClExC,SAAS,CAACyC,EAAgBC,EAAgBC,EAAgBC,GAOrDC,GAAXC,gCARkB9C,KADpB+C,EAAc,eACM/C,SAAAA"}
package/lib/Select.js CHANGED
@@ -1,2 +1,2 @@
1
- import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{r as o,$ as n,s as r}from"./lit-element-74b6bb4b.js";import{l as i}from"./if-defined-fe657a02.js";import{n as s}from"./ref-7d028e3a.js";import{o as a}from"./unsafe-html-989a642b.js";import"./Button.js";import{I as l}from"./InputMixin-94d15730.js";import{F as d}from"./FocusableMixin-ebb67709.js";import{F as c}from"./FormAssociatedMixin-ccae91fd.js";import{s as p}from"./Component-9d373ef3.js";import{s as u}from"./FormField-50bd73d5.js";import{S as b}from"./SlotController-5bfc47d1.js";import"./directive-de55b00a.js";import"./property-03f59dce.js";import"./LightDomController-011334da.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const m=o`.n-select-container{position:relative;inline-size:fit-content}:host([expand]){inline-size:100%}:host([expand]) .n-select-container{inline-size:100%}select{-webkit-appearance:none;appearance:none;position:absolute;font-size:var(--n-font-size-m);font-family:var(--n-font-family);color:var(--n-color-text);inline-size:100%;opacity:.0001;cursor:pointer;background:0 0;border:0;block-size:var(--n-space-xl);inset-block-end:0;inset-inline-start:0;z-index:2}nord-button{--n-button-text-align:start}.n-label-container:hover+.n-select-container nord-button,select:hover+nord-button{--n-button-background-color:var(--n-color-button-hover);--n-button-border-color:var(--n-color-border-hover)}.n-label-container:hover+.n-select-container nord-button svg,select:hover+nord-button svg{color:var(--n-color-icon-hover)}select:focus+nord-button{--n-button-border-color:var(--n-color-accent);--n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([disabled]){cursor:auto;pointer-events:none}::slotted(:not([slot])){display:none}[slot=after] svg{color:var(--n-color-icon);margin-inline-start:var(--n-space-m);margin-inline-end:calc(var(--n-space-s)/ -2);min-inline-size:calc(var(--n-space-l)/ 2.2);max-inline-size:calc(var(--n-space-l)/ 2.2)}::slotted([slot=before]){margin-inline-start:calc(var(--n-space-s) * -1);margin-inline-end:var(--n-space-s)}select[aria-invalid=true]+nord-button{--n-button-border-color:var(--n-color-status-danger)}`;let v=class extends(c(l(d(r)))){constructor(){super(...arguments),this.defaultSlot=new b(this),this.inputId="select"}get formValue(){return this.value||void 0}render(){const e=this.options,t=this.getButtonText(e);return n`<slot></slot>${this.renderLabel()}<div class="n-select-container"><select ${s(this.focusableRef)} id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" name="${i(this.name)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${i(this.getDescribedBy())}" aria-invalid="${i(this.getInvalid())}">${this.placeholder&&n`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${e.map((e=>this.renderOption(e)))}</select><nord-button tabindex="-1" ?disabled="${this.disabled}" ?expand="${this.expand}" aria-hidden="true" type="button"><slot slot="before" name="before"></slot>${t}<div slot="after">${a('<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M105 56a10.416 10.416 0 0 1-7.42-3.08L72.478 27.818a3.528 3.528 0 0 0-4.956 0L42.42 52.92a10.5 10.5 0 0 1-14.84-14.84l35-35a10.486 10.486 0 0 1 14.84 0l35 35A10.5 10.5 0 0 1 105 56zm-35 84a10.416 10.416 0 0 1-7.42-3.08l-35-35a10.5 10.5 0 0 1 14.84-14.84l25.102 25.102a3.528 3.528 0 0 0 4.956 0L97.58 87.08a10.5 10.5 0 1 1 14.84 14.84l-35 35A10.416 10.416 0 0 1 70 140z"/></svg>')}</div></nord-button></div>${this.renderError()}`}get options(){return Array.from(this.querySelectorAll("option"))}getButtonText(e){const t=e.find((e=>e.value===this.value));return t?t.text:this.placeholder?this.placeholder:e[0]?e[0].text:""}renderOption(e){return n`<option value="${i(e.value)}" ?disabled="${e.disabled}" ?selected="${e.value===this.value}">${e.text}</option>`}};v.styles=[p,u,m],v=e([t("nord-select")],v);var h=v;export{h as default};
1
+ import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{r as n,$ as o,s as r}from"./lit-element-74b6bb4b.js";import{l as i}from"./if-defined-fe657a02.js";import{n as s}from"./ref-7d028e3a.js";import{o as a}from"./unsafe-html-989a642b.js";import"./Button.js";import{I as l}from"./InputMixin-94d15730.js";import{F as d}from"./FocusableMixin-ebb67709.js";import{F as c}from"./FormAssociatedMixin-ccae91fd.js";import{s as p}from"./Component-9d373ef3.js";import{s as u}from"./FormField-50bd73d5.js";import{S as b}from"./SlotController-5bfc47d1.js";import"./directive-de55b00a.js";import"./property-03f59dce.js";import"./LightDomController-011334da.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const m=n`.n-select-container{position:relative;inline-size:fit-content}:host([expand]){inline-size:100%}:host([expand]) .n-select-container{inline-size:100%}select{-webkit-appearance:none;appearance:none;position:absolute;font-size:var(--n-font-size-m);font-family:var(--n-font-family);color:var(--n-color-text);inline-size:100%;opacity:.0001;cursor:pointer;background:0 0;border:0;block-size:var(--n-space-xl);inset-block-end:0;inset-inline-start:0;z-index:2}nord-button{--n-button-text-align:start}.n-label-container:hover+.n-select-container nord-button,select:hover+nord-button{--n-button-background-color:var(--n-color-button-hover);--n-button-border-color:var(--n-color-border-hover)}.n-label-container:hover+.n-select-container nord-button svg,select:hover+nord-button svg{color:var(--n-color-icon-hover)}select:focus+nord-button{--n-button-border-color:var(--n-color-accent);--n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([disabled]){cursor:auto;pointer-events:none}::slotted(:not([slot])){display:none}[slot=end] svg{color:var(--n-color-icon);margin-inline-start:var(--n-space-m);margin-inline-end:calc(var(--n-space-s)/ -2);min-inline-size:calc(var(--n-space-l)/ 2.2);max-inline-size:calc(var(--n-space-l)/ 2.2)}::slotted([slot=start]){margin-inline-start:calc(var(--n-space-s) * -1);margin-inline-end:var(--n-space-s)}select[aria-invalid=true]+nord-button{--n-button-border-color:var(--n-color-status-danger)}`;let v=class extends(c(l(d(r)))){constructor(){super(...arguments),this.defaultSlot=new b(this),this.inputId="select"}get formValue(){return this.value||void 0}render(){const e=this.options,t=this.getButtonText(e);return o`<slot></slot>${this.renderLabel()}<div class="n-select-container"><select ${s(this.focusableRef)} id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" name="${i(this.name)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${i(this.getDescribedBy())}" aria-invalid="${i(this.getInvalid())}">${this.placeholder&&o`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${e.map((e=>this.renderOption(e)))}</select><nord-button tabindex="-1" ?disabled="${this.disabled}" ?expand="${this.expand}" aria-hidden="true" type="button"><slot slot="start" name="start"></slot>${t}<div slot="end">${a('<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M105 56a10.416 10.416 0 0 1-7.42-3.08L72.478 27.818a3.528 3.528 0 0 0-4.956 0L42.42 52.92a10.5 10.5 0 0 1-14.84-14.84l35-35a10.486 10.486 0 0 1 14.84 0l35 35A10.5 10.5 0 0 1 105 56zm-35 84a10.416 10.416 0 0 1-7.42-3.08l-35-35a10.5 10.5 0 0 1 14.84-14.84l25.102 25.102a3.528 3.528 0 0 0 4.956 0L97.58 87.08a10.5 10.5 0 1 1 14.84 14.84l-35 35A10.416 10.416 0 0 1 70 140z"/></svg>')}</div></nord-button></div>${this.renderError()}`}get options(){return Array.from(this.querySelectorAll("option"))}getButtonText(e){const t=e.find((e=>e.value===this.value));return t?t.text:this.placeholder?this.placeholder:e[0]?e[0].text:""}renderOption(e){return o`<option value="${i(e.value)}" ?disabled="${e.disabled}" ?selected="${e.value===this.value}">${e.text}</option>`}};v.styles=[p,u,m],v=e([t("nord-select")],v);var h=v;export{h as default};
2
2
  //# sourceMappingURL=Select.js.map
package/lib/Select.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Select.js","sources":["../src/select/Select.ts","../../icons/lib/assets/interface-dropdown-small.js"],"sourcesContent":["/* eslint-disable lit-a11y/no-invalid-change-handler */\nimport { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\"\n\nimport \"../button/Button.js\"\n\nimport dropdownIcon from \"@nordhealth/icons/lib/assets/interface-dropdown-small.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Select.css\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\n/**\n * Select lets users choose one option from an options menu.\n * Consider using select when you have 5 or more options to choose from.\n *\n * @status ready\n * @category form\n * @slot - Default slot for holding <option> elements.\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@customElement(\"nord-select\")\nexport default class Select extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n static styles = [componentStyle, formFieldStyle, style]\n\n protected override get formValue() {\n return this.value || undefined\n }\n\n private defaultSlot = new SlotController(this)\n\n protected inputId = \"select\"\n\n render() {\n const slottedOptions = this.options\n const buttonText = this.getButtonText(slottedOptions)\n\n return html`\n <slot></slot>\n ${this.renderLabel()}\n\n <div class=\"n-select-container\">\n <select\n ${ref(this.focusableRef)}\n id=${this.inputId}\n ?disabled=${this.disabled}\n ?required=${this.required}\n name=${ifDefined(this.name)}\n @change=${this.handleChange}\n @input=${this.handleInput}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n >\n ${this.placeholder && html`<option value=\"\" disabled ?selected=${!this.value}>${this.placeholder}</option>`}\n ${slottedOptions.map(option => this.renderOption(option))}\n </select>\n\n <nord-button tabindex=\"-1\" ?disabled=${this.disabled} ?expand=${this.expand} aria-hidden=\"true\" type=\"button\">\n <slot slot=\"before\" name=\"before\"></slot>\n ${buttonText}\n <div slot=\"after\">${unsafeHTML(dropdownIcon)}</div>\n </nord-button>\n </div>\n\n ${this.renderError()}\n `\n }\n\n private get options() {\n return Array.from(this.querySelectorAll(\"option\"))\n }\n\n private getButtonText(options: HTMLOptionElement[]): string {\n const selected = options.find(option => option.value === this.value)\n\n if (selected) {\n return selected.text\n }\n\n if (this.placeholder) {\n return this.placeholder\n }\n\n if (options[0]) {\n return options[0].text\n }\n\n return \"\"\n }\n\n private renderOption(option: HTMLOptionElement) {\n return html`\n <option value=${ifDefined(option.value)} ?disabled=${option.disabled} ?selected=${option.value === this.value}>\n ${option.text}\n </option>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-select\": Select\n }\n}\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M105 56a10.416 10.416 0 0 1-7.42-3.08L72.478 27.818a3.528 3.528 0 0 0-4.956 0L42.42 52.92a10.5 10.5 0 0 1-14.84-14.84l35-35a10.486 10.486 0 0 1 14.84 0l35 35A10.5 10.5 0 0 1 105 56zm-35 84a10.416 10.416 0 0 1-7.42-3.08l-35-35a10.5 10.5 0 0 1 14.84-14.84l25.102 25.102a3.528 3.528 0 0 0 4.956 0L97.58 87.08a10.5 10.5 0 1 1 14.84 14.84l-35 35A10.416 10.416 0 0 1 70 140z\"/></svg>'\nexport const title = \"interface-dropdown-small\"\nexport const tags = \"nordicon small interface dropdown select arrow up down caret triangle chevron\"\n"],"names":["Select","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","SlotController","formValue","value","undefined","render","slottedOptions","options","buttonText","getButtonText","html","renderLabel","ref","focusableRef","inputId","disabled","required","ifDefined","name","handleChange","handleInput","getDescribedBy","getInvalid","placeholder","map","option","renderOption","expand","unsafeHTML","renderError","Array","from","querySelectorAll","selected","find","text","componentStyle","formFieldStyle","style","customElement"],"mappings":"snEA+BA,IAAqBA,EAArB,cAAoCC,EAAoBC,EAAWC,EAAeC,MAAlFC,kCAOUC,iBAAc,IAAIC,EAAeD,MAE/BA,aAAU,SANGE,gBACrB,OAAOF,KAAKG,YAASC,EAOvBC,SACE,MAAMC,EAAiBN,KAAKO,QACtBC,EAAaR,KAAKS,cAAcH,GAEtC,OAAOI,CAAI,gBAEPV,KAAKW,wDAIDC,EAAIZ,KAAKa,qBACNb,KAAKc,uBACEd,KAAKe,wBACLf,KAAKgB,mBACVC,EAAUjB,KAAKkB,mBACZlB,KAAKmB,yBACNnB,KAAKoB,kCACKH,EAAUjB,KAAKqB,oCACnBJ,EAAUjB,KAAKsB,kBAE5BtB,KAAKuB,aAAeb,CAAI,oDAAwCV,KAAKG,UAASH,KAAKuB,0BACnFjB,EAAekB,KAAIC,GAAUzB,KAAK0B,aAAaD,sDAGZzB,KAAKe,sBAAoBf,KAAK2B,qFAEjEnB,sBACkBoB,ECrEf,ofDyEP5B,KAAK6B,gBAICtB,cACV,OAAOuB,MAAMC,KAAK/B,KAAKgC,iBAAiB,WAGlCvB,cAAcF,GACpB,MAAM0B,EAAW1B,EAAQ2B,MAAKT,GAAUA,EAAOtB,QAAUH,KAAKG,QAE9D,OAAI8B,EACKA,EAASE,KAGdnC,KAAKuB,YACAvB,KAAKuB,YAGVhB,EAAQ,GACHA,EAAQ,GAAG4B,KAGb,GAGDT,aAAaD,GACnB,OAAOf,CAAI,kBACOO,EAAUQ,EAAOtB,sBAAoBsB,EAAOV,wBAAsBU,EAAOtB,QAAUH,KAAKG,UACpGsB,EAAOU,kBAtERzC,SAAS,CAAC0C,EAAgBC,EAAgBC,GAD9B5C,KADpB6C,EAAc,gBACM7C,SAAAA"}
1
+ {"version":3,"file":"Select.js","sources":["../src/select/Select.ts","../../icons/lib/assets/interface-dropdown-small.js"],"sourcesContent":["/* eslint-disable lit-a11y/no-invalid-change-handler */\nimport { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\"\n\nimport \"../button/Button.js\"\n\nimport dropdownIcon from \"@nordhealth/icons/lib/assets/interface-dropdown-small.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Select.css\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\n/**\n * Select lets users choose one option from an options menu.\n * Consider using select when you have 5 or more options to choose from.\n *\n * @status ready\n * @category form\n * @slot - Default slot for holding <option> elements.\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@customElement(\"nord-select\")\nexport default class Select extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n static styles = [componentStyle, formFieldStyle, style]\n\n protected override get formValue() {\n return this.value || undefined\n }\n\n private defaultSlot = new SlotController(this)\n\n protected inputId = \"select\"\n\n render() {\n const slottedOptions = this.options\n const buttonText = this.getButtonText(slottedOptions)\n\n return html`\n <slot></slot>\n ${this.renderLabel()}\n\n <div class=\"n-select-container\">\n <select\n ${ref(this.focusableRef)}\n id=${this.inputId}\n ?disabled=${this.disabled}\n ?required=${this.required}\n name=${ifDefined(this.name)}\n @change=${this.handleChange}\n @input=${this.handleInput}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n >\n ${this.placeholder && html`<option value=\"\" disabled ?selected=${!this.value}>${this.placeholder}</option>`}\n ${slottedOptions.map(option => this.renderOption(option))}\n </select>\n\n <nord-button tabindex=\"-1\" ?disabled=${this.disabled} ?expand=${this.expand} aria-hidden=\"true\" type=\"button\">\n <slot slot=\"start\" name=\"start\"></slot>\n ${buttonText}\n <div slot=\"end\">${unsafeHTML(dropdownIcon)}</div>\n </nord-button>\n </div>\n\n ${this.renderError()}\n `\n }\n\n private get options() {\n return Array.from(this.querySelectorAll(\"option\"))\n }\n\n private getButtonText(options: HTMLOptionElement[]): string {\n const selected = options.find(option => option.value === this.value)\n\n if (selected) {\n return selected.text\n }\n\n if (this.placeholder) {\n return this.placeholder\n }\n\n if (options[0]) {\n return options[0].text\n }\n\n return \"\"\n }\n\n private renderOption(option: HTMLOptionElement) {\n return html`\n <option value=${ifDefined(option.value)} ?disabled=${option.disabled} ?selected=${option.value === this.value}>\n ${option.text}\n </option>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-select\": Select\n }\n}\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M105 56a10.416 10.416 0 0 1-7.42-3.08L72.478 27.818a3.528 3.528 0 0 0-4.956 0L42.42 52.92a10.5 10.5 0 0 1-14.84-14.84l35-35a10.486 10.486 0 0 1 14.84 0l35 35A10.5 10.5 0 0 1 105 56zm-35 84a10.416 10.416 0 0 1-7.42-3.08l-35-35a10.5 10.5 0 0 1 14.84-14.84l25.102 25.102a3.528 3.528 0 0 0 4.956 0L97.58 87.08a10.5 10.5 0 1 1 14.84 14.84l-35 35A10.416 10.416 0 0 1 70 140z\"/></svg>'\nexport const title = \"interface-dropdown-small\"\nexport const tags = \"nordicon small interface dropdown select arrow up down caret triangle chevron\"\n"],"names":["Select","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","SlotController","formValue","value","undefined","render","slottedOptions","options","buttonText","getButtonText","html","renderLabel","ref","focusableRef","inputId","disabled","required","ifDefined","name","handleChange","handleInput","getDescribedBy","getInvalid","placeholder","map","option","renderOption","expand","unsafeHTML","renderError","Array","from","querySelectorAll","selected","find","text","componentStyle","formFieldStyle","style","customElement"],"mappings":"mnEA+BA,IAAqBA,EAArB,cAAoCC,EAAoBC,EAAWC,EAAeC,MAAlFC,kCAOUC,iBAAc,IAAIC,EAAeD,MAE/BA,aAAU,SANGE,gBACrB,OAAOF,KAAKG,YAASC,EAOvBC,SACE,MAAMC,EAAiBN,KAAKO,QACtBC,EAAaR,KAAKS,cAAcH,GAEtC,OAAOI,CAAI,gBAEPV,KAAKW,wDAIDC,EAAIZ,KAAKa,qBACNb,KAAKc,uBACEd,KAAKe,wBACLf,KAAKgB,mBACVC,EAAUjB,KAAKkB,mBACZlB,KAAKmB,yBACNnB,KAAKoB,kCACKH,EAAUjB,KAAKqB,oCACnBJ,EAAUjB,KAAKsB,kBAE5BtB,KAAKuB,aAAeb,CAAI,oDAAwCV,KAAKG,UAASH,KAAKuB,0BACnFjB,EAAekB,KAAIC,GAAUzB,KAAK0B,aAAaD,sDAGZzB,KAAKe,sBAAoBf,KAAK2B,mFAEjEnB,oBACgBoB,ECrEb,ofDyEP5B,KAAK6B,gBAICtB,cACV,OAAOuB,MAAMC,KAAK/B,KAAKgC,iBAAiB,WAGlCvB,cAAcF,GACpB,MAAM0B,EAAW1B,EAAQ2B,MAAKT,GAAUA,EAAOtB,QAAUH,KAAKG,QAE9D,OAAI8B,EACKA,EAASE,KAGdnC,KAAKuB,YACAvB,KAAKuB,YAGVhB,EAAQ,GACHA,EAAQ,GAAG4B,KAGb,GAGDT,aAAaD,GACnB,OAAOf,CAAI,kBACOO,EAAUQ,EAAOtB,sBAAoBsB,EAAOV,wBAAsBU,EAAOtB,QAAUH,KAAKG,UACpGsB,EAAOU,kBAtERzC,SAAS,CAAC0C,EAAgBC,EAAgBC,GAD9B5C,KADpB6C,EAAc,gBACM7C,SAAAA"}