@nordhealth/components 3.15.0 → 3.16.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/lib/DatePicker.js CHANGED
@@ -1,2 +1,2 @@
1
- import{i as t,x as e,A as i,_ as o,e as a,s}from"./query-assigned-elements-92ce7494.js";import{n as r}from"./property-c78323b1.js";import{i as n}from"./query-36bfe0e4.js";import{n as l}from"./ref-99418ab4.js";import{l as d}from"./if-defined-cccde88f.js";import{c as p}from"./interface-close-small-f26b0299.js";import{F as c}from"./FocusableMixin-d30213b4.js";import{F as h}from"./FormAssociatedMixin-3fa55d53.js";import{I as m}from"./InputMixin-83b5bd46.js";import{o as u,p as v,a as b}from"./dates-5b651fbe.js";import{N as f}from"./events-d9666e88.js";import{S as g,i as j}from"./Calendar-5fbf9d8d.js";import{LocalizeController as y}from"./LocalizeController.js";import $ from"./Icon.js";import"./Input.js";import"./Button.js";import"./VisuallyHidden.js";import"./Popout-b6f0175c.js";import"./Stack.js";import{s as k}from"./Component-2253424f.js";import{s as D}from"./FormField-87551be2.js";import{R as x,s as z}from"./TextField-2d778949.js";import{isoAdapter as w}from"./date-adapter.js";import{c as C}from"./cond-bb9ee891.js";import{S as F}from"./SizeMixin-ab074eff.js";import"./directive-e9ce14b4.js";import"./FormDataController-592ff3dd.js";import"./SlotController-d733c575.js";import"./EventController-d99ebeef.js";import"./state-d31c6912.js";import"./class-map-512f0bc1.js";import"./collection-511dcfac.js";import"./tinykeys.module-84e6cc41.js";import"./DirectionController-f35f5476.js";import"./number-c3ab3e95.js";import"./observe-a9c6dfb6.js";import"./DateSelectEvent.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./IconManager.js";import"./style-map-f8a1c8d5.js";import"./AutocompleteMixin-5a7e10b2.js";import"./TextSelectableMixin-aac97d82.js";import"./LightDomController-5388d84c.js";import"./Spinner.js";import"./positioning-35c8d434.js";import"./LightDismissController-11ae4745.js";import"./ShortcutController-87615e31.js";import"./ScrollbarController-773c79f4.js";var S=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18 2h-2v-2h-2v2h-8v-2h-2v2h-2c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2zm-14 2v2h2v-2h8v2h2v-2h2v4h-16v-4zm-2 14v-8h16v8z" fill="currentColor"/></svg>',title:"interface-calendar",tags:"nordicon interface calendar date time day week month year"});const A=t`:host{color:var(--n-color-text);position:relative}:host(:not([expand])) .n-date-picker-input{max-inline-size:max-content}.n-date-picker-calendar{--n-calendar-box-shadow:none}@media (max-width:35.9375em){.n-date-picker-header{padding:calc(var(--n-space-s) * 1.5) var(--n-space-m);border-block-end:1px solid var(--n-color-border)}.n-date-picker-calendar{--_n-calendar-padding:var(--n-space-l)}}.n-date-picker-close-button{--n-button-border-radius:var(--n-border-radius-circle);--_n-button-padding-inline:calc(var(--n-space-s) / 1.3);--_n-button-padding-block:0;opacity:0;position:absolute;inset-block-start:calc(var(--n-space-s) * -1);inset-inline-end:calc(var(--n-space-s) * -1)}.n-date-picker-close-button:focus{opacity:1}.n-date-picker-heading{display:none;font-weight:var(--n-font-weight-active)}@media (max-width:35.9375em){.n-date-picker-close-button{opacity:1;position:relative;inset:auto}.n-date-picker-heading{display:initial}}`;$.registerIcon(S),$.registerIcon(p);const I=()=>!1,L=()=>!1;let B=class extends(F(h(x(m(c(s)))))){constructor(){super(...arguments),this.swipe=new g(this,{target:()=>this.popout,matchesGesture:j,onSwipeEnd:()=>this.hide()}),this.localize=new y(this,{onLangChange:()=>this.createDateFormatters()}),this.value="",this.open=!1,this.firstDayOfWeek=1,this.dateAdapter=w,this.isDateDisabled=I,this.isDateHighlighted=L,this.expand=!1,this.handleDaySelect=t=>{t.stopPropagation(),this.setValue(t.date),this.hide()},this.handleBlur=t=>{t.stopPropagation(),this.dispatchEvent(new f("blur"))},this.handleFocus=t=>{t.stopPropagation(),this.dispatchEvent(new f("focus"))},this.handleInputChange=t=>{const e=t.target,i=this.dateAdapter.parse(e.value,u);(i||""===e.value)&&this.setValue(i)}}get valueAsDate(){return v(this.value)}set valueAsDate(t){this.value=t?b(t):""}get valueAsNumber(){var t,e;return null!==(e=null===(t=this.valueAsDate)||void 0===t?void 0:t.getTime())&&void 0!==e?e:NaN}set valueAsNumber(t){this.value=t?b(new Date(t)):""}render(){const{valueAsDate:t}=this,o=t?this.dateAdapter.format(t):"";return e`<nord-input class="n-date-picker-input" value="${o}" label="${d(this.label)}" hint="${d(this.hint)}" error="${C(this.error,this.error)}" placeholder="${d(this.placeholder)}" id="${this.inputId}" size="${this.size}" ?expand="${this.expand}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" ?hide-label="${this.hideLabel}" disallow-pattern="[^0-9./-]" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @input="${this.handleInputChange}" ${l(this.focusableRef)} aria-invalid="${C(this.error,"true")}" aria-describedby="${d(this.getDescribedBy())}">${this.hintSlot.isEmpty?i:e`<slot name="hint" slot="hint"></slot>`} ${this.labelSlot.isEmpty?i:e`<slot name="label" slot="label"></slot>`}<nord-button size="${this.size}" ?disabled="${this.disabled||this.readonly}" slot="end" class="n-date-picker-toggle" aria-controls="popout" type="button"><nord-icon name="interface-calendar"></nord-icon><nord-visually-hidden>${this.localize.term("buttonLabel")} ${t?e`<span>, ${this.localize.term("selectedDateMessage")} ${this.dateFormatLong.format(t)}</span>`:i}</nord-visually-hidden></nord-button></nord-input><nord-popout id="popout" anchor="${this.inputId}" align="end" position="block-end" role="dialog" aria-modal="true" ?open="${this.open}" @open="${this.handleOpen}" @close="${this.handleClose}" aria-labelledby="header"><div aria-hidden="true" tabindex="0" @focus="${this.focusLast}"></div><nord-stack class="n-date-picker-header" direction="horizontal" justify-content="space-between"><div class="n-date-picker-heading" id="header">${this.localize.term("modalHeading")}</div><nord-button class="n-date-picker-close-button" type="button" size="s" variant="plain" @click="${this.handleClose}"><nord-visually-hidden>${this.localize.term("closeLabel")}</nord-visually-hidden><nord-icon name="interface-close-small"></nord-icon></nord-button></nord-stack><nord-calendar class="n-date-picker-calendar" expand value="${this.value}" min="${d(this.min)}" max="${d(this.max)}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" .isDateHighlighted="${this.isDateHighlighted}" @change="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></nord-popout>`}createDateFormatters(){this.dateFormatLong=new Intl.DateTimeFormat(this.localize.resolvedLang,{timeZone:"UTC",day:"numeric",month:"long",year:"numeric"})}focusFirst(){this.closeButton.focus()}focusLast(){this.calendar.focus({target:"day"})}handleOpen(){this.open=!0,this.calendar.focus({target:"month"})}handleClose(){this.open=!1}setValue(t){this.value=t?b(t):"",this.dispatchEvent(new f("change"))}hide(t){this.popout.hide(t)}show(){this.popout.show()}};B.styles=[k,D,z,A],o([n(".n-date-picker-toggle",!0)],B.prototype,"toggleButton",void 0),o([n(".n-date-picker-close-button",!0)],B.prototype,"closeButton",void 0),o([n("nord-calendar",!0)],B.prototype,"calendar",void 0),o([n('[role="dialog"]',!0)],B.prototype,"popout",void 0),o([r()],B.prototype,"value",void 0),o([r({type:Boolean,reflect:!0})],B.prototype,"open",void 0),o([r({reflect:!0})],B.prototype,"min",void 0),o([r({reflect:!0})],B.prototype,"max",void 0),o([r({reflect:!0,attribute:"first-day-of-week",type:Number})],B.prototype,"firstDayOfWeek",void 0),o([r({attribute:!1})],B.prototype,"dateAdapter",void 0),o([r({attribute:!1})],B.prototype,"isDateDisabled",void 0),o([r({attribute:!1})],B.prototype,"isDateHighlighted",void 0),o([r({reflect:!0,type:Boolean})],B.prototype,"expand",void 0),B=o([a("nord-date-picker")],B);var E=B;export{E as default};
1
+ import{i as t,x as e,A as i,_ as o,e as a,s}from"./query-assigned-elements-92ce7494.js";import{n as r}from"./property-c78323b1.js";import{i as n}from"./query-36bfe0e4.js";import{n as l}from"./ref-99418ab4.js";import{l as d}from"./if-defined-cccde88f.js";import{c as p}from"./interface-close-small-f26b0299.js";import{F as c}from"./FocusableMixin-d30213b4.js";import{F as h}from"./FormAssociatedMixin-3fa55d53.js";import{I as m}from"./InputMixin-83b5bd46.js";import{o as u,p as v,a as f}from"./dates-5b651fbe.js";import{N as b}from"./events-d9666e88.js";import{S as g,i as j}from"./Calendar-5fbf9d8d.js";import{LocalizeController as y}from"./LocalizeController.js";import $ from"./Icon.js";import"./Input.js";import"./Button.js";import"./VisuallyHidden.js";import"./Popout-b6f0175c.js";import"./Stack.js";import{s as D}from"./Component-2253424f.js";import{s as k}from"./FormField-87551be2.js";import{R as x,s as w}from"./TextField-2d778949.js";import{isoAdapter as z}from"./date-adapter.js";import{c as C}from"./cond-bb9ee891.js";import{S as F}from"./SizeMixin-ab074eff.js";import"./directive-e9ce14b4.js";import"./FormDataController-592ff3dd.js";import"./SlotController-d733c575.js";import"./EventController-d99ebeef.js";import"./state-d31c6912.js";import"./class-map-512f0bc1.js";import"./collection-511dcfac.js";import"./tinykeys.module-84e6cc41.js";import"./DirectionController-f35f5476.js";import"./number-c3ab3e95.js";import"./observe-a9c6dfb6.js";import"./DateSelectEvent.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./IconManager.js";import"./style-map-f8a1c8d5.js";import"./AutocompleteMixin-5a7e10b2.js";import"./TextSelectableMixin-aac97d82.js";import"./LightDomController-5388d84c.js";import"./Spinner.js";import"./positioning-35c8d434.js";import"./LightDismissController-11ae4745.js";import"./ShortcutController-87615e31.js";import"./ScrollbarController-773c79f4.js";var S=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18 2h-2v-2h-2v2h-8v-2h-2v2h-2c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2zm-14 2v2h2v-2h8v2h2v-2h2v4h-16v-4zm-2 14v-8h16v8z" fill="currentColor"/></svg>',title:"interface-calendar",tags:"nordicon interface calendar date time day week month year"});const A=t`:host{color:var(--n-color-text);position:relative}:host(:not([expand])) .n-date-picker-input{max-inline-size:max-content}.n-date-picker-calendar{--n-calendar-box-shadow:none}@media (max-width:35.9375em){.n-date-picker-header{padding:calc(var(--n-space-s) * 1.5) var(--n-space-m);border-block-end:1px solid var(--n-color-border)}.n-date-picker-calendar{--_n-calendar-padding:var(--n-space-l)}}.n-date-picker-close-button{--n-button-border-radius:var(--n-border-radius-circle);--_n-button-padding-inline:calc(var(--n-space-s) / 1.3);--_n-button-padding-block:0;opacity:0;position:absolute;inset-block-start:calc(var(--n-space-s) * -1);inset-inline-end:calc(var(--n-space-s) * -1)}.n-date-picker-close-button:focus{opacity:1}.n-date-picker-heading{display:none;font-weight:var(--n-font-weight-active)}@media (max-width:35.9375em){.n-date-picker-close-button{opacity:1;position:relative;inset:auto}.n-date-picker-heading{display:initial}}`;$.registerIcon(S),$.registerIcon(p);const I=()=>!1,L=()=>!1;let B=class extends(F(h(x(m(c(s)))))){constructor(){super(...arguments),this.swipe=new g(this,{target:()=>this.popout,matchesGesture:j,onSwipeEnd:()=>this.hide()}),this.localize=new y(this,{onLangChange:()=>this.createDateFormatters()}),this.value="",this.open=!1,this.firstDayOfWeek=1,this.dateAdapter=z,this.isDateDisabled=I,this.isDateHighlighted=L,this.expand=!1,this.handleDaySelect=t=>{t.stopPropagation(),this.setValue(t.date),this.hide()},this.handleBlur=t=>{t.stopPropagation(),this.dispatchEvent(new b("blur"))},this.handleFocus=t=>{t.stopPropagation(),this.dispatchEvent(new b("focus"))},this.handleInputChange=t=>{var e;const i=t.target,o=this.dateAdapter.parse(i.value,u);this.rawValue=null===(e=this.focusableRef.value)||void 0===e?void 0:e.value,(o||""===i.value)&&this.setValue(o)}}get valueAsDate(){return v(this.value)}set valueAsDate(t){this.value=t?f(t):""}get valueAsNumber(){var t,e;return null!==(e=null===(t=this.valueAsDate)||void 0===t?void 0:t.getTime())&&void 0!==e?e:NaN}set valueAsNumber(t){this.value=t?f(new Date(t)):""}render(){const{valueAsDate:t}=this,o=t?this.dateAdapter.format(t):"";return e`<nord-input class="n-date-picker-input" value="${o}" label="${d(this.label)}" hint="${d(this.hint)}" error="${C(this.error,this.error)}" placeholder="${d(this.placeholder)}" id="${this.inputId}" size="${this.size}" ?expand="${this.expand}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" ?hide-label="${this.hideLabel}" disallow-pattern="[^0-9./-]" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @input="${this.handleInputChange}" ${l(this.focusableRef)} aria-invalid="${C(this.error,"true")}" aria-describedby="${d(this.getDescribedBy())}">${this.hintSlot.isEmpty?i:e`<slot name="hint" slot="hint"></slot>`} ${this.labelSlot.isEmpty?i:e`<slot name="label" slot="label"></slot>`}<nord-button size="${this.size}" ?disabled="${this.disabled||this.readonly}" slot="end" class="n-date-picker-toggle" aria-controls="popout" type="button"><nord-icon name="interface-calendar"></nord-icon><nord-visually-hidden>${this.localize.term("buttonLabel")} ${t?e`<span>, ${this.localize.term("selectedDateMessage")} ${this.dateFormatLong.format(t)}</span>`:i}</nord-visually-hidden></nord-button></nord-input><nord-popout id="popout" anchor="${this.inputId}" align="end" position="block-end" role="dialog" aria-modal="true" ?open="${this.open}" @open="${this.handleOpen}" @close="${this.handleClose}" aria-labelledby="header"><div aria-hidden="true" tabindex="0" @focus="${this.focusLast}"></div><nord-stack class="n-date-picker-header" direction="horizontal" justify-content="space-between"><div class="n-date-picker-heading" id="header">${this.localize.term("modalHeading")}</div><nord-button class="n-date-picker-close-button" type="button" size="s" variant="plain" @click="${this.handleClose}"><nord-visually-hidden>${this.localize.term("closeLabel")}</nord-visually-hidden><nord-icon name="interface-close-small"></nord-icon></nord-button></nord-stack><nord-calendar class="n-date-picker-calendar" expand value="${this.value}" min="${d(this.min)}" max="${d(this.max)}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" .isDateHighlighted="${this.isDateHighlighted}" @change="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></nord-popout>`}createDateFormatters(){this.dateFormatLong=new Intl.DateTimeFormat(this.localize.resolvedLang,{timeZone:"UTC",day:"numeric",month:"long",year:"numeric"})}focusFirst(){this.closeButton.focus()}focusLast(){this.calendar.focus({target:"day"})}handleOpen(){this.open=!0,this.calendar.focus({target:"month"})}handleClose(){this.open=!1}setValue(t){this.value=t?f(t):"";const{valueAsDate:e}=this,i=e?this.dateAdapter.format(e):"";this.rawValue=i,this.dispatchEvent(new b("change"))}hide(t){this.popout.hide(t)}show(){this.popout.show()}};B.styles=[D,k,w,A],o([n(".n-date-picker-toggle",!0)],B.prototype,"toggleButton",void 0),o([n(".n-date-picker-close-button",!0)],B.prototype,"closeButton",void 0),o([n("nord-calendar",!0)],B.prototype,"calendar",void 0),o([n('[role="dialog"]',!0)],B.prototype,"popout",void 0),o([r()],B.prototype,"value",void 0),o([r({reflect:!0})],B.prototype,"rawValue",void 0),o([r({type:Boolean,reflect:!0})],B.prototype,"open",void 0),o([r({reflect:!0})],B.prototype,"min",void 0),o([r({reflect:!0})],B.prototype,"max",void 0),o([r({reflect:!0,attribute:"first-day-of-week",type:Number})],B.prototype,"firstDayOfWeek",void 0),o([r({attribute:!1})],B.prototype,"dateAdapter",void 0),o([r({attribute:!1})],B.prototype,"isDateDisabled",void 0),o([r({attribute:!1})],B.prototype,"isDateHighlighted",void 0),o([r({reflect:!0,type:Boolean})],B.prototype,"expand",void 0),B=o([a("nord-date-picker")],B);var E=B;export{E as default};
2
2
  //# sourceMappingURL=DatePicker.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"DatePicker.js","sources":["../../icons/lib/assets/interface-calendar.js","../src/date-picker/DatePicker.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m18 2h-2v-2h-2v2h-8v-2h-2v2h-2c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2zm-14 2v2h2v-2h8v2h2v-2h2v4h-16v-4zm-2 14v-8h16v8z\" fill=\"currentColor\"/></svg>'\nexport const title = \"interface-calendar\"\nexport const tags = \"nordicon interface calendar date time day week month year\"\n","import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport * as calendarIcon from \"@nordhealth/icons/lib/assets/interface-calendar.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close-small.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport { createDate, DaysOfWeek, parseISODate, printISODate } from \"../common/dates.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { isDownwardsSwipe, SwipeController } from \"../common/controllers/SwipeController.js\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\n\nimport type Button from \"../button/Button.js\"\nimport type Popout from \"../popout/Popout.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../input/Input.js\"\nimport \"../button/Button.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\nimport \"../popout/Popout.js\"\nimport \"../stack/Stack.js\"\nimport \"../calendar/Calendar.js\"\n\nimport type { DateSelectEvent } from \"../calendar/DateSelectEvent.js\"\nimport type Calendar from \"../calendar/Calendar.js\"\nimport type { DatePredicate } from \"../calendar/Calendar.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 \"./DatePicker.css\"\n\nimport { DateAdapter, isoAdapter } from \"./date-adapter.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { ReadonlyMixin } from \"../common/mixins/ReadonlyMixin.js\"\nimport { SizeMixin } from \"../common/mixins/SizeMixin.js\"\n\nIcon.registerIcon(calendarIcon)\nIcon.registerIcon(closeIcon)\n\nconst isDateDisabled = () => false\nconst isDateHighlighted = () => false\n\n/**\n *\n * Date Picker allows user to enter a date either through text input,\n * or by choosing a date from the calendar. Please note that the date\n * must be passed in ISO-8601 format: YYYY-MM-DD.\n *\n * @status ready\n * @category form\n *\n * @fires {NordEvent} open - Dispatched when the popout is opened.\n * @fires {NordEvent} close - Dispatched when the popout is closed.\n * @fires {DateSelectEvent} nord-focus-date - Dispatched when the calendar's focused date changes.\n *\n * @localization modalHeading - Heading for the date picker's modal.\n * @localization closeLabel - Accessible label for the close button.\n * @localization buttonLabel - Accessible label for the toggle button that opens the date picker modal.\n * @localization selectedDateMessage - Describes the selected date. This message is appended to the toggle button label when a date is selected.\n */\n@customElement(\"nord-date-picker\")\nexport default class DatePicker extends SizeMixin(\n FormAssociatedMixin(ReadonlyMixin(InputMixin(FocusableMixin(LitElement))))\n) {\n static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n @query(`.n-date-picker-toggle`, true) private toggleButton!: Button\n @query(`.n-date-picker-close-button`, true) private closeButton!: HTMLButtonElement\n @query(`nord-calendar`, true) private calendar!: Calendar\n @query(`[role=\"dialog\"]`, true) private popout!: Popout\n\n private swipe = new SwipeController(this, {\n target: () => this.popout,\n matchesGesture: isDownwardsSwipe,\n onSwipeEnd: () => this.hide(),\n })\n\n private localize = new LocalizeController<\"nord-date-picker\">(this, {\n onLangChange: () => this.createDateFormatters(),\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 dateFormatLong!: Intl.DateTimeFormat\n\n /**\n * Date value. Must be in IS0-8601 format: YYYY-MM-DD.\n */\n @property() value: string = \"\"\n\n get valueAsDate(): Date | undefined {\n return parseISODate(this.value)\n }\n\n /**\n * Get/set the value of the picker as a Date object.\n */\n set valueAsDate(date: Date | undefined) {\n this.value = date ? printISODate(date) : \"\"\n }\n\n get valueAsNumber(): number {\n return this.valueAsDate?.getTime() ?? NaN\n }\n\n /**\n * Get/set the value of the picker as the number of milliseconds elapsed since the UNIX epoch.\n */\n set valueAsNumber(date: number) {\n this.value = date ? printISODate(new Date(date)) : \"\"\n }\n\n /**\n * Controls whether date picker dialog is open or not.\n */\n @property({ type: Boolean, reflect: true }) open = false\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({ reflect: true }) 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({ reflect: true }) max?: 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({ reflect: true, attribute: \"first-day-of-week\", type: Number }) firstDayOfWeek: DaysOfWeek =\n DaysOfWeek.Monday\n\n /**\n * Date adapter, for custom parsing/formatting.\n * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n * and a `format` function which accepts a `Date` and returns a `string`.\n * Default is IS0-8601 parsing and formatting.\n */\n @property({ attribute: false }) dateAdapter: DateAdapter = isoAdapter\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: DatePredicate = isDateDisabled\n\n /**\n * Controls which days are highlighted with a small indicator.\n * Returning `false` will not show an indicator.\n * Returning `true` will show the indicator, but without an accessible label. Therefore\n * Returning a string will show the indicator, and use the string as accessible label.\n * It is recommended to return a string rather than `true` whenever possible.\n */\n @property({ attribute: false }) isDateHighlighted: (date: Date) => string | boolean = isDateHighlighted\n\n /**\n * Controls whether the date picker expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n render() {\n const { valueAsDate } = this\n const formattedDate = valueAsDate ? this.dateAdapter.format(valueAsDate) : \"\"\n\n return html`\n <nord-input\n class=\"n-date-picker-input\"\n value=${formattedDate}\n label=${ifDefined(this.label)}\n hint=${ifDefined(this.hint)}\n error=${cond(this.error, this.error)}\n placeholder=${ifDefined(this.placeholder)}\n id=${this.inputId}\n size=${this.size}\n ?expand=${this.expand}\n ?disabled=${this.disabled}\n ?required=${this.required}\n ?readonly=${this.readonly}\n ?hide-label=${this.hideLabel}\n disallow-pattern=\"[^0-9./-]\"\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n @input=${this.handleInputChange}\n ${ref(this.focusableRef)}\n aria-invalid=${cond(this.error, \"true\")}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n >\n ${!this.hintSlot.isEmpty ? html`<slot name=\"hint\" slot=\"hint\"></slot>` : nothing}\n ${!this.labelSlot.isEmpty ? html`<slot name=\"label\" slot=\"label\"></slot>` : nothing}\n <nord-button\n size=${this.size}\n ?disabled=${this.disabled || this.readonly}\n slot=\"end\"\n class=\"n-date-picker-toggle\"\n aria-controls=\"popout\"\n type=\"button\"\n >\n <nord-icon name=\"interface-calendar\"></nord-icon>\n <nord-visually-hidden>\n ${this.localize.term(\"buttonLabel\")}\n ${valueAsDate\n ? html`\n <span>\n , ${this.localize.term(\"selectedDateMessage\")} ${this.dateFormatLong.format(valueAsDate)}\n </span>\n `\n : nothing}\n </nord-visually-hidden>\n </nord-button>\n </nord-input>\n <nord-popout\n id=\"popout\"\n anchor=${this.inputId}\n align=\"end\"\n position=\"block-end\"\n role=\"dialog\"\n aria-modal=\"true\"\n ?open=${this.open}\n @open=${this.handleOpen}\n @close=${this.handleClose}\n aria-labelledby=\"header\"\n >\n <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusLast}></div>\n\n <nord-stack class=\"n-date-picker-header\" direction=\"horizontal\" justify-content=\"space-between\">\n <div class=\"n-date-picker-heading\" id=\"header\">${this.localize.term(\"modalHeading\")}</div>\n <nord-button\n class=\"n-date-picker-close-button\"\n type=\"button\"\n size=\"s\"\n variant=\"plain\"\n @click=${this.handleClose}\n >\n <nord-visually-hidden>${this.localize.term(\"closeLabel\")}</nord-visually-hidden>\n <nord-icon name=\"interface-close-small\"></nord-icon>\n </nord-button>\n </nord-stack>\n\n <nord-calendar\n class=\"n-date-picker-calendar\"\n expand\n value=${this.value}\n min=${ifDefined(this.min)}\n max=${ifDefined(this.max)}\n .firstDayOfWeek=${this.firstDayOfWeek}\n .isDateDisabled=${this.isDateDisabled}\n .isDateHighlighted=${this.isDateHighlighted}\n @change=${this.handleDaySelect}\n ></nord-calendar>\n\n <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusFirst}></div>\n </nord-popout>\n `\n }\n\n private createDateFormatters() {\n this.dateFormatLong = new Intl.DateTimeFormat(this.localize.resolvedLang, {\n timeZone: \"UTC\",\n day: \"numeric\",\n month: \"long\",\n year: \"numeric\",\n })\n }\n\n private focusFirst() {\n this.closeButton.focus()\n }\n\n private focusLast() {\n this.calendar.focus({ target: \"day\" })\n }\n\n private handleDaySelect = (e: DateSelectEvent) => {\n e.stopPropagation()\n this.setValue(e.date)\n this.hide()\n }\n\n private handleOpen() {\n this.open = true\n this.calendar.focus({ target: \"month\" })\n }\n\n private handleClose() {\n this.open = false\n }\n\n private handleBlur = (event: Event) => {\n event.stopPropagation()\n this.dispatchEvent(new NordEvent(\"blur\"))\n }\n\n private handleFocus = (event: Event) => {\n event.stopPropagation()\n this.dispatchEvent(new NordEvent(\"focus\"))\n }\n\n private handleInputChange = (e: Event) => {\n const target = e.target as HTMLInputElement\n\n const parsed = this.dateAdapter.parse(target.value, createDate)\n if (parsed || target.value === \"\") {\n this.setValue(parsed)\n }\n }\n\n private setValue(date?: Date) {\n this.value = date ? printISODate(date) : \"\"\n this.dispatchEvent(new NordEvent(\"change\"))\n }\n\n /**\n * Hide the date picker programmatically.\n * @param moveFocusToButton A boolean option to move the focus to the original button that opens the popout.\n */\n hide(moveFocusToButton?: boolean) {\n this.popout.hide(moveFocusToButton)\n }\n\n /**\n * Show the date picker programmatically.\n */\n show() {\n this.popout.show()\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-date-picker\": DatePicker\n }\n}\n"],"names":["Icon","registerIcon","calendarIcon","closeIcon","isDateDisabled","isDateHighlighted","DatePicker","SizeMixin","FormAssociatedMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","constructor","this","swipe","SwipeController","target","popout","matchesGesture","isDownwardsSwipe","onSwipeEnd","hide","localize","LocalizeController","onLangChange","createDateFormatters","value","open","firstDayOfWeek","dateAdapter","isoAdapter","expand","handleDaySelect","e","stopPropagation","setValue","date","handleBlur","event","dispatchEvent","NordEvent","handleFocus","handleInputChange","parsed","parse","createDate","valueAsDate","parseISODate","printISODate","valueAsNumber","_b","_a","getTime","NaN","Date","render","formattedDate","format","html","ifDefined","label","hint","cond","error","placeholder","inputId","size","disabled","required","readonly","hideLabel","ref","focusableRef","getDescribedBy","hintSlot","isEmpty","nothing","labelSlot","term","dateFormatLong","handleOpen","handleClose","focusLast","min","max","focusFirst","Intl","DateTimeFormat","resolvedLang","timeZone","day","month","year","closeButton","focus","calendar","moveFocusToButton","show","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","query","prototype","property","type","Boolean","reflect","attribute","Number","customElement"],"mappings":"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"}
1
+ {"version":3,"file":"DatePicker.js","sources":["../../icons/lib/assets/interface-calendar.js","../src/date-picker/DatePicker.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m18 2h-2v-2h-2v2h-8v-2h-2v2h-2c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2zm-14 2v2h2v-2h8v2h2v-2h2v4h-16v-4zm-2 14v-8h16v8z\" fill=\"currentColor\"/></svg>'\nexport const title = \"interface-calendar\"\nexport const tags = \"nordicon interface calendar date time day week month year\"\n","import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport * as calendarIcon from \"@nordhealth/icons/lib/assets/interface-calendar.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close-small.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport { createDate, DaysOfWeek, parseISODate, printISODate } from \"../common/dates.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { isDownwardsSwipe, SwipeController } from \"../common/controllers/SwipeController.js\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\n\nimport type Button from \"../button/Button.js\"\nimport type Popout from \"../popout/Popout.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../input/Input.js\"\nimport \"../button/Button.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\nimport \"../popout/Popout.js\"\nimport \"../stack/Stack.js\"\nimport \"../calendar/Calendar.js\"\n\nimport type { DateSelectEvent } from \"../calendar/DateSelectEvent.js\"\nimport type Calendar from \"../calendar/Calendar.js\"\nimport type { DatePredicate } from \"../calendar/Calendar.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 \"./DatePicker.css\"\n\nimport { DateAdapter, isoAdapter } from \"./date-adapter.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { ReadonlyMixin } from \"../common/mixins/ReadonlyMixin.js\"\nimport { SizeMixin } from \"../common/mixins/SizeMixin.js\"\n\nIcon.registerIcon(calendarIcon)\nIcon.registerIcon(closeIcon)\n\nconst isDateDisabled = () => false\nconst isDateHighlighted = () => false\n\n/**\n *\n * Date Picker allows user to enter a date either through text input,\n * or by choosing a date from the calendar. Please note that the date\n * must be passed in ISO-8601 format: YYYY-MM-DD.\n *\n * @status ready\n * @category form\n *\n * @fires {NordEvent} open - Dispatched when the popout is opened.\n * @fires {NordEvent} close - Dispatched when the popout is closed.\n * @fires {DateSelectEvent} nord-focus-date - Dispatched when the calendar's focused date changes.\n *\n * @localization modalHeading - Heading for the date picker's modal.\n * @localization closeLabel - Accessible label for the close button.\n * @localization buttonLabel - Accessible label for the toggle button that opens the date picker modal.\n * @localization selectedDateMessage - Describes the selected date. This message is appended to the toggle button label when a date is selected.\n */\n@customElement(\"nord-date-picker\")\nexport default class DatePicker extends SizeMixin(\n FormAssociatedMixin(ReadonlyMixin(InputMixin(FocusableMixin(LitElement))))\n) {\n static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n @query(`.n-date-picker-toggle`, true) private toggleButton!: Button\n @query(`.n-date-picker-close-button`, true) private closeButton!: HTMLButtonElement\n @query(`nord-calendar`, true) private calendar!: Calendar\n @query(`[role=\"dialog\"]`, true) private popout!: Popout\n\n private swipe = new SwipeController(this, {\n target: () => this.popout,\n matchesGesture: isDownwardsSwipe,\n onSwipeEnd: () => this.hide(),\n })\n\n private localize = new LocalizeController<\"nord-date-picker\">(this, {\n onLangChange: () => this.createDateFormatters(),\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 dateFormatLong!: Intl.DateTimeFormat\n\n /**\n * Date value. Must be in IS0-8601 format: YYYY-MM-DD.\n */\n @property() value: string = \"\"\n\n get valueAsDate(): Date | undefined {\n return parseISODate(this.value)\n }\n\n /**\n * Get/set the value of the picker as a Date object.\n */\n set valueAsDate(date: Date | undefined) {\n this.value = date ? printISODate(date) : \"\"\n }\n\n get valueAsNumber(): number {\n return this.valueAsDate?.getTime() ?? NaN\n }\n\n /**\n * Get/set the value of the picker as the number of milliseconds elapsed since the UNIX epoch.\n */\n set valueAsNumber(date: number) {\n this.value = date ? printISODate(new Date(date)) : \"\"\n }\n\n /**\n * Exposes the raw value of the input field without date formatting.\n */\n @property({ reflect: true }) rawValue?: string\n\n /**\n * Controls whether date picker dialog is open or not.\n */\n @property({ type: Boolean, reflect: true }) open = false\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({ reflect: true }) 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({ reflect: true }) max?: 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({ reflect: true, attribute: \"first-day-of-week\", type: Number }) firstDayOfWeek: DaysOfWeek =\n DaysOfWeek.Monday\n\n /**\n * Date adapter, for custom parsing/formatting.\n * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n * and a `format` function which accepts a `Date` and returns a `string`.\n * Default is IS0-8601 parsing and formatting.\n */\n @property({ attribute: false }) dateAdapter: DateAdapter = isoAdapter\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: DatePredicate = isDateDisabled\n\n /**\n * Controls which days are highlighted with a small indicator.\n * Returning `false` will not show an indicator.\n * Returning `true` will show the indicator, but without an accessible label. Therefore\n * Returning a string will show the indicator, and use the string as accessible label.\n * It is recommended to return a string rather than `true` whenever possible.\n */\n @property({ attribute: false }) isDateHighlighted: (date: Date) => string | boolean = isDateHighlighted\n\n /**\n * Controls whether the date picker expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n render() {\n const { valueAsDate } = this\n const formattedDate = valueAsDate ? this.dateAdapter.format(valueAsDate) : \"\"\n\n return html`\n <nord-input\n class=\"n-date-picker-input\"\n value=${formattedDate}\n label=${ifDefined(this.label)}\n hint=${ifDefined(this.hint)}\n error=${cond(this.error, this.error)}\n placeholder=${ifDefined(this.placeholder)}\n id=${this.inputId}\n size=${this.size}\n ?expand=${this.expand}\n ?disabled=${this.disabled}\n ?required=${this.required}\n ?readonly=${this.readonly}\n ?hide-label=${this.hideLabel}\n disallow-pattern=\"[^0-9./-]\"\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n @input=${this.handleInputChange}\n ${ref(this.focusableRef)}\n aria-invalid=${cond(this.error, \"true\")}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n >\n ${!this.hintSlot.isEmpty ? html`<slot name=\"hint\" slot=\"hint\"></slot>` : nothing}\n ${!this.labelSlot.isEmpty ? html`<slot name=\"label\" slot=\"label\"></slot>` : nothing}\n <nord-button\n size=${this.size}\n ?disabled=${this.disabled || this.readonly}\n slot=\"end\"\n class=\"n-date-picker-toggle\"\n aria-controls=\"popout\"\n type=\"button\"\n >\n <nord-icon name=\"interface-calendar\"></nord-icon>\n <nord-visually-hidden>\n ${this.localize.term(\"buttonLabel\")}\n ${valueAsDate\n ? html`\n <span>\n , ${this.localize.term(\"selectedDateMessage\")} ${this.dateFormatLong.format(valueAsDate)}\n </span>\n `\n : nothing}\n </nord-visually-hidden>\n </nord-button>\n </nord-input>\n <nord-popout\n id=\"popout\"\n anchor=${this.inputId}\n align=\"end\"\n position=\"block-end\"\n role=\"dialog\"\n aria-modal=\"true\"\n ?open=${this.open}\n @open=${this.handleOpen}\n @close=${this.handleClose}\n aria-labelledby=\"header\"\n >\n <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusLast}></div>\n\n <nord-stack class=\"n-date-picker-header\" direction=\"horizontal\" justify-content=\"space-between\">\n <div class=\"n-date-picker-heading\" id=\"header\">${this.localize.term(\"modalHeading\")}</div>\n <nord-button\n class=\"n-date-picker-close-button\"\n type=\"button\"\n size=\"s\"\n variant=\"plain\"\n @click=${this.handleClose}\n >\n <nord-visually-hidden>${this.localize.term(\"closeLabel\")}</nord-visually-hidden>\n <nord-icon name=\"interface-close-small\"></nord-icon>\n </nord-button>\n </nord-stack>\n\n <nord-calendar\n class=\"n-date-picker-calendar\"\n expand\n value=${this.value}\n min=${ifDefined(this.min)}\n max=${ifDefined(this.max)}\n .firstDayOfWeek=${this.firstDayOfWeek}\n .isDateDisabled=${this.isDateDisabled}\n .isDateHighlighted=${this.isDateHighlighted}\n @change=${this.handleDaySelect}\n ></nord-calendar>\n\n <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusFirst}></div>\n </nord-popout>\n `\n }\n\n private createDateFormatters() {\n this.dateFormatLong = new Intl.DateTimeFormat(this.localize.resolvedLang, {\n timeZone: \"UTC\",\n day: \"numeric\",\n month: \"long\",\n year: \"numeric\",\n })\n }\n\n private focusFirst() {\n this.closeButton.focus()\n }\n\n private focusLast() {\n this.calendar.focus({ target: \"day\" })\n }\n\n private handleDaySelect = (e: DateSelectEvent) => {\n e.stopPropagation()\n this.setValue(e.date)\n this.hide()\n }\n\n private handleOpen() {\n this.open = true\n this.calendar.focus({ target: \"month\" })\n }\n\n private handleClose() {\n this.open = false\n }\n\n private handleBlur = (event: Event) => {\n event.stopPropagation()\n this.dispatchEvent(new NordEvent(\"blur\"))\n }\n\n private handleFocus = (event: Event) => {\n event.stopPropagation()\n this.dispatchEvent(new NordEvent(\"focus\"))\n }\n\n private handleInputChange = (e: Event) => {\n const target = e.target as HTMLInputElement\n\n const parsed = this.dateAdapter.parse(target.value, createDate)\n this.rawValue = (<HTMLInputElement | null>this.focusableRef.value)?.value\n\n if (parsed || target.value === \"\") {\n this.setValue(parsed)\n }\n }\n\n private setValue(date?: Date) {\n this.value = date ? printISODate(date) : \"\"\n\n const { valueAsDate } = this\n const formattedDate = valueAsDate ? this.dateAdapter.format(valueAsDate) : \"\"\n this.rawValue = formattedDate\n\n this.dispatchEvent(new NordEvent(\"change\"))\n }\n\n /**\n * Hide the date picker programmatically.\n * @param moveFocusToButton A boolean option to move the focus to the original button that opens the popout.\n */\n hide(moveFocusToButton?: boolean) {\n this.popout.hide(moveFocusToButton)\n }\n\n /**\n * Show the date picker programmatically.\n */\n show() {\n this.popout.show()\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-date-picker\": DatePicker\n }\n}\n"],"names":["Icon","registerIcon","calendarIcon","closeIcon","isDateDisabled","isDateHighlighted","DatePicker","SizeMixin","FormAssociatedMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","constructor","this","swipe","SwipeController","target","popout","matchesGesture","isDownwardsSwipe","onSwipeEnd","hide","localize","LocalizeController","onLangChange","createDateFormatters","value","open","firstDayOfWeek","dateAdapter","isoAdapter","expand","handleDaySelect","e","stopPropagation","setValue","date","handleBlur","event","dispatchEvent","NordEvent","handleFocus","handleInputChange","parsed","parse","createDate","rawValue","_a","focusableRef","valueAsDate","parseISODate","printISODate","valueAsNumber","_b","getTime","NaN","Date","render","formattedDate","format","html","ifDefined","label","hint","cond","error","placeholder","inputId","size","disabled","required","readonly","hideLabel","ref","getDescribedBy","hintSlot","isEmpty","nothing","labelSlot","term","dateFormatLong","handleOpen","handleClose","focusLast","min","max","focusFirst","Intl","DateTimeFormat","resolvedLang","timeZone","day","month","year","closeButton","focus","calendar","moveFocusToButton","show","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","query","prototype","property","reflect","type","Boolean","attribute","Number","customElement"],"mappings":"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"}