@nordhealth/components 1.0.0-beta.12 → 1.0.0-beta.15

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.
@@ -4660,82 +4660,6 @@
4660
4660
  ],
4661
4661
  "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use the fieldset component when you need to create a relationship between multiple form inputs.\n- It is especially important to use with a group of radio components.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place interactive content (buttons, links etc) inside the label.\n- Don’t use with a checkbox component when there is **only one** checkbox. For example, when accepting terms and conditions.\n\n</div>\n\n-------\n\n## Content guidelines\n\nFieldset label should be clear, accurate and predictable. It should help the user to understand how the items in the fieldset are grouped together, or what kind of choice the user is making:\n\n<div class=\"n-usage n-usage-do\">Pick a color</div>\n<div class=\"n-usage n-usage-dont\">Choose</div>\n\nWhen writing fieldset labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Pick a color</div>\n<div class=\"n-usage n-usage-dont\">Pick A Color</div>\n\nAvoid ending in punctuation if it’s a single sentence, word, or a fragment:\n\n<div class=\"n-usage n-usage-do\">Pick a color</div>\n<div class=\"n-usage n-usage-dont\">Pick a color.</div>\n\nDo not use colons in fieldset label:\n\n<div class=\"n-usage n-usage-do\">Payment details</div>\n<div class=\"n-usage n-usage-dont\">Payment details:</div>\n\n-------\n\n## Additional considerations\n\n- A label (which becomes to `<legend>` inside the fieldset) is always required.\n- Hint text can be used to offer further information or explanation for an option.\n"
4662
4662
  },
4663
- {
4664
- "kind": "javascript-module",
4665
- "path": "src/header/Header.ts",
4666
- "declarations": [
4667
- {
4668
- "kind": "class",
4669
- "description": "The header is a block of designated space for labelling the currently\nviewed context as well as providing primary actions.",
4670
- "name": "Header",
4671
- "slots": [
4672
- {
4673
- "description": "The header content.",
4674
- "name": ""
4675
- },
4676
- {
4677
- "description": "Optional slot for buttons, toggles, etc.",
4678
- "name": "action"
4679
- }
4680
- ],
4681
- "members": [
4682
- {
4683
- "kind": "field",
4684
- "name": "actionSlot",
4685
- "privacy": "private",
4686
- "default": "new SlotController(this, \"action\")"
4687
- },
4688
- {
4689
- "kind": "field",
4690
- "name": "_warningLogged",
4691
- "type": {
4692
- "text": "boolean"
4693
- },
4694
- "privacy": "private",
4695
- "static": true,
4696
- "default": "false",
4697
- "inheritedFrom": {
4698
- "name": "DraftComponentMixin",
4699
- "module": "src/common/mixins/DraftComponentMixin.ts"
4700
- }
4701
- }
4702
- ],
4703
- "mixins": [
4704
- {
4705
- "name": "DraftComponentMixin",
4706
- "module": "/src/common/mixins/DraftComponentMixin.js"
4707
- }
4708
- ],
4709
- "superclass": {
4710
- "name": "LitElement",
4711
- "package": "lit"
4712
- },
4713
- "status": "draft",
4714
- "category": "structure",
4715
- "tagName": "nord-header",
4716
- "customElement": true
4717
- }
4718
- ],
4719
- "exports": [
4720
- {
4721
- "kind": "js",
4722
- "name": "default",
4723
- "declaration": {
4724
- "name": "Header",
4725
- "module": "src/header/Header.ts"
4726
- }
4727
- },
4728
- {
4729
- "kind": "custom-element-definition",
4730
- "name": "nord-header",
4731
- "declaration": {
4732
- "name": "Header",
4733
- "module": "src/header/Header.ts"
4734
- }
4735
- }
4736
- ],
4737
- "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use the header component to show a heading to describe the current view.\n- Use the header component to hold primary actions.\n- Use the header component at a visual high position at full width.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t overcrowd the header component with too many actions or information.\n- Don’t nest the header component too deeply and restrict its available space.\n\n</div>\n\n-------\n\n## Content guidelines\n\nThe header component should be a containing element placed high on the page to present high level controls and to describe the page itself. It shouldn’t be overcrowded with controls or information.\n\n<div class=\"n-usage n-usage-do\">[Menu] Dashboard [Account] [Log out]</div>\n<div class=\"n-usage n-usage-dont\">[Menu] Use the cards below to view various information [Export] [Save] [Edit Profile] [Log out] [Preferences]</div>\n"
4738
- },
4739
4663
  {
4740
4664
  "kind": "javascript-module",
4741
4665
  "path": "src/icon/Icon.ts",
@@ -4971,6 +4895,82 @@
4971
4895
  ],
4972
4896
  "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to provide additional meaning in addition to a text label.\n- Use to help users who have difficulties with reading and attention.\n- Use in places where text label doesn’t fit (remember to add an accessible label for the icon).\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for decorative purposes alone.\n- Don’t use when a button’s action is already clear based on the text label.\n- Don’t use the same icon for differing purposes, as users will come to associate icons with specific types of actions.\n\n</div>\n\n---\n\n## Additional considerations\n\n- Icon components are hidden from assistive technologies by default.\n- Use `label` property to give an accessible label for the icon and to make it visible to assistive technologies.\n"
4973
4897
  },
4898
+ {
4899
+ "kind": "javascript-module",
4900
+ "path": "src/header/Header.ts",
4901
+ "declarations": [
4902
+ {
4903
+ "kind": "class",
4904
+ "description": "The header is a block of designated space for labelling the currently\nviewed context as well as providing primary actions.",
4905
+ "name": "Header",
4906
+ "slots": [
4907
+ {
4908
+ "description": "The header content.",
4909
+ "name": ""
4910
+ },
4911
+ {
4912
+ "description": "Optional slot for buttons, toggles, etc.",
4913
+ "name": "action"
4914
+ }
4915
+ ],
4916
+ "members": [
4917
+ {
4918
+ "kind": "field",
4919
+ "name": "actionSlot",
4920
+ "privacy": "private",
4921
+ "default": "new SlotController(this, \"action\")"
4922
+ },
4923
+ {
4924
+ "kind": "field",
4925
+ "name": "_warningLogged",
4926
+ "type": {
4927
+ "text": "boolean"
4928
+ },
4929
+ "privacy": "private",
4930
+ "static": true,
4931
+ "default": "false",
4932
+ "inheritedFrom": {
4933
+ "name": "DraftComponentMixin",
4934
+ "module": "src/common/mixins/DraftComponentMixin.ts"
4935
+ }
4936
+ }
4937
+ ],
4938
+ "mixins": [
4939
+ {
4940
+ "name": "DraftComponentMixin",
4941
+ "module": "/src/common/mixins/DraftComponentMixin.js"
4942
+ }
4943
+ ],
4944
+ "superclass": {
4945
+ "name": "LitElement",
4946
+ "package": "lit"
4947
+ },
4948
+ "status": "draft",
4949
+ "category": "structure",
4950
+ "tagName": "nord-header",
4951
+ "customElement": true
4952
+ }
4953
+ ],
4954
+ "exports": [
4955
+ {
4956
+ "kind": "js",
4957
+ "name": "default",
4958
+ "declaration": {
4959
+ "name": "Header",
4960
+ "module": "src/header/Header.ts"
4961
+ }
4962
+ },
4963
+ {
4964
+ "kind": "custom-element-definition",
4965
+ "name": "nord-header",
4966
+ "declaration": {
4967
+ "name": "Header",
4968
+ "module": "src/header/Header.ts"
4969
+ }
4970
+ }
4971
+ ],
4972
+ "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use the header component to show a heading to describe the current view.\n- Use the header component to hold primary actions.\n- Use the header component at a visual high position at full width.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t overcrowd the header component with too many actions or information.\n- Don’t nest the header component too deeply and restrict its available space.\n\n</div>\n\n-------\n\n## Content guidelines\n\nThe header component should be a containing element placed high on the page to present high level controls and to describe the page itself. It shouldn’t be overcrowded with controls or information.\n\n<div class=\"n-usage n-usage-do\">[Menu] Dashboard [Account] [Log out]</div>\n<div class=\"n-usage n-usage-dont\">[Menu] Use the cards below to view various information [Export] [Save] [Edit Profile] [Log out] [Preferences]</div>\n"
4973
+ },
4974
4974
  {
4975
4975
  "kind": "javascript-module",
4976
4976
  "path": "src/input/Input.ts",
@@ -7550,6 +7550,16 @@
7550
7550
  "description": "How to align the child items inside the stack.",
7551
7551
  "attribute": "align-items",
7552
7552
  "reflects": true
7553
+ },
7554
+ {
7555
+ "kind": "field",
7556
+ "name": "justifyContent",
7557
+ "type": {
7558
+ "text": "\"center\" | \"start\" | \"end\" | undefined"
7559
+ },
7560
+ "description": "How to justify the child items inside the stack.",
7561
+ "attribute": "justify-content",
7562
+ "reflects": true
7553
7563
  }
7554
7564
  ],
7555
7565
  "attributes": [
@@ -7578,6 +7588,14 @@
7578
7588
  },
7579
7589
  "description": "How to align the child items inside the stack.",
7580
7590
  "fieldName": "alignItems"
7591
+ },
7592
+ {
7593
+ "name": "justify-content",
7594
+ "type": {
7595
+ "text": "\"center\" | \"start\" | \"end\" | undefined"
7596
+ },
7597
+ "description": "How to justify the child items inside the stack.",
7598
+ "fieldName": "justifyContent"
7581
7599
  }
7582
7600
  ],
7583
7601
  "superclass": {
package/lib/Avatar.js CHANGED
@@ -1,2 +1,2 @@
1
- import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{r as i,s as r,$ as s,w as a}from"./lit-element-9646ab7e.js";import{l as o}from"./if-defined-2a4c6dbc.js";import{e as n}from"./property-03f59dce.js";import{t as l}from"./state-70f38ceb.js";import{s as c}from"./Component-6762b5eb.js";const d=i`:host{--n-avatar-size:var(--n-size-icon-l);display:inline-flex;block-size:var(--n-avatar-size);inline-size:var(--n-avatar-size)}.n-avatar{background:var(--n-color-status-info);border-radius:var(--n-border-radius-circle);overflow:hidden;inline-size:100%;block-size:100%}img,svg{inline-size:100%;block-size:auto;object-fit:cover}.n-loading{display:none}:host([size="l"]){--n-avatar-size:var(--n-size-icon-xl)}:host([size=xl]){--n-avatar-size:var(--n-size-icon-xxl)}`;const{transition:h}=(v={initial:{"src-set":"loading"},loading:{load:"loaded",error:"initial","src-clear":"initial"},loaded:{"src-set":"loading","src-clear":"initial"}},{transition:(e,t)=>v[e][t]||e});var v;let m=class extends r{constructor(){super(...arguments),this.state="initial",this.size="m",this.name=""}willUpdate(e){if(e.has("src")){const e=this.src?"src-set":"src-clear";this.state=h(this.state,e)}}render(){return s`<div class="n-avatar">${"initial"!==this.state?this.renderImage():a} ${"loaded"!==this.state?this.renderFallback():a}</div>`}renderImage(){return this.src?s`<img class="n-${this.state}" src="${this.src}" @load="${this.handleLoad}" @error="${this.handleError}" alt="${this.name||""}">`:a}renderFallback(){return s`<svg aria-label="${this.name}" role="${o(this.name?"img":void 0)}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27"><rect fill="var(--n-color-status-info)" height="27" rx="12" width="27" x="0" y="0"></rect><g fill="var(--n-color-text-inverse)" opacity=".5"><circle cx="13.5" cy="30" r="13"></circle><circle cx="13.5" cy="11" r="5"></circle></g></svg>`}handleLoad(){this.state=h(this.state,"load")}handleError(){this.state=h(this.state,"error")}};m.styles=[c,d],e([l()],m.prototype,"state",void 0),e([n({reflect:!0})],m.prototype,"size",void 0),e([n({reflect:!0})],m.prototype,"src",void 0),e([n()],m.prototype,"name",void 0),m=e([t("nord-avatar")],m);var p=m;export{p as default};
1
+ import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{r as i,s as r,$ as s,w as a}from"./lit-element-9646ab7e.js";import{l as o}from"./if-defined-2a4c6dbc.js";import{e as n}from"./property-03f59dce.js";import{t as l}from"./state-70f38ceb.js";import{s as c}from"./Component-6762b5eb.js";const d=i`:host{--n-avatar-size:var(--n-size-icon-l);display:inline-flex;block-size:var(--n-avatar-size);inline-size:var(--n-avatar-size)}.n-avatar{background:var(--n-color-status-info);border-radius:var(--n-border-radius-circle);overflow:hidden;inline-size:100%;block-size:100%}img,svg{inline-size:100%;block-size:auto;object-fit:cover}.n-loading{display:none}:host([size="l"]){--n-avatar-size:var(--n-size-icon-xl)}:host([size=xl]){--n-avatar-size:var(--n-size-icon-xxl)}`;const{transition:h}=(v={initial:{"src-set":"loading"},loading:{load:"loaded",error:"initial","src-clear":"initial"},loaded:{"src-set":"loading","src-clear":"initial"}},{transition:(e,t)=>v[e][t]||e});var v;let m=class extends r{constructor(){super(...arguments),this.state="initial",this.size="m",this.name=""}willUpdate(e){if(e.has("src")){const e=this.src?"src-set":"src-clear";this.state=h(this.state,e)}}render(){return s`<div class="n-avatar">${"initial"!==this.state?this.renderImage():a} ${"loaded"!==this.state?this.renderFallback():a}</div>`}renderImage(){return this.src?s`<img class="n-${this.state}" src="${this.src}" @load="${this.handleLoad}" @error="${this.handleError}" alt="${this.name||""}">`:a}renderFallback(){return s`<svg aria-label="${this.name}" role="${o(this.name?"img":void 0)}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27"><rect fill="var(--n-color-status-info)" height="27" rx="12" width="27" x="0" y="0"></rect><g fill="#fff" opacity=".5"><circle cx="13.5" cy="30" r="13"></circle><circle cx="13.5" cy="11" r="5"></circle></g></svg>`}handleLoad(){this.state=h(this.state,"load")}handleError(){this.state=h(this.state,"error")}};m.styles=[c,d],e([l()],m.prototype,"state",void 0),e([n({reflect:!0})],m.prototype,"size",void 0),e([n({reflect:!0})],m.prototype,"src",void 0),e([n()],m.prototype,"name",void 0),m=e([t("nord-avatar")],m);var f=m;export{f as default};
2
2
  //# sourceMappingURL=Avatar.js.map
package/lib/Avatar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Avatar.js","sources":["../src/avatar/Avatar.ts","../src/common/fsm.ts"],"sourcesContent":["// eslint-disable-next-line max-classes-per-file\nimport { LitElement, html, PropertyValues, nothing } from \"lit\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { customElement, property, state } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Avatar.css\"\nimport { fsm } from \"../common/fsm.js\"\n\nconst { transition } = fsm({\n initial: {\n \"src-set\": \"loading\",\n },\n loading: {\n load: \"loaded\",\n error: \"initial\",\n \"src-clear\": \"initial\",\n },\n loaded: {\n \"src-set\": \"loading\",\n \"src-clear\": \"initial\",\n },\n})\n\ntype States = Parameters<typeof transition>[0]\n\n/**\n * Avatar is used for showing a thumbnail representation of a user or entity.\n * Default avatar illustration is displayed when no src is specified.\n *\n * @status new\n * @category image\n */\n@customElement(\"nord-avatar\")\nexport default class Avatar extends LitElement {\n static styles = [componentStyle, style]\n\n @state() private state: States = \"initial\"\n\n /**\n * The size of the avatar.\n */\n @property({ reflect: true }) size: \"m\" | \"l\" | \"xl\" = \"m\"\n\n /**\n * The URL of the avatar image uploaded by the user.\n */\n @property({ reflect: true }) src?: string\n\n /**\n * The name of the person.\n */\n @property() name: string = \"\"\n\n protected willUpdate(changedProperties: PropertyValues<this>): void {\n if (changedProperties.has(\"src\")) {\n const event = this.src ? \"src-set\" : \"src-clear\"\n this.state = transition(this.state, event)\n }\n }\n\n render() {\n return html`\n <div class=\"n-avatar\">\n ${this.state !== \"initial\" ? this.renderImage() : nothing}\n ${this.state !== \"loaded\" ? this.renderFallback() : nothing}\n </div>\n `\n }\n\n protected renderImage() {\n return this.src\n ? html`\n <img\n class=\"n-${this.state}\"\n src=${this.src}\n @load=${this.handleLoad}\n @error=${this.handleError}\n alt=${this.name || \"\"}\n />\n `\n : nothing\n }\n\n renderFallback() {\n return html`\n <svg\n aria-label=${this.name}\n role=${ifDefined(this.name ? \"img\" : undefined)}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 27 27\"\n >\n <rect fill=\"var(--n-color-status-info)\" height=\"27\" rx=\"12\" width=\"27\" x=\"0\" y=\"0\"></rect>\n <g fill=\"var(--n-color-text-inverse)\" opacity=\".5\">\n <circle cx=\"13.5\" cy=\"30\" r=\"13\"></circle>\n <circle cx=\"13.5\" cy=\"11\" r=\"5\"></circle>\n </g>\n </svg>\n `\n }\n\n private handleLoad() {\n this.state = transition(this.state, \"load\")\n }\n\n private handleError() {\n this.state = transition(this.state, \"error\")\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-avatar\": Avatar\n }\n}\n","type MemberUnion<T> = T extends any ? keyof T : never\n\nexport function fsm<TStates extends keyof TTransitions, TTransitions extends Record<TStates, Record<string, TStates>>>(\n config: TTransitions\n) {\n return {\n transition(currentState: TStates, event: MemberUnion<TTransitions[TStates]>) {\n const nextState = config[currentState][event]\n return nextState || currentState\n },\n }\n}\n"],"names":["transition","config","initial","loading","load","error","loaded","currentState","event","Avatar","LitElement","constructor","this","willUpdate","changedProperties","has","src","state","render","html","renderImage","nothing","renderFallback","handleLoad","handleError","name","ifDefined","undefined","componentStyle","style","__decorate","property","reflect","customElement"],"mappings":"2wBASA,MAAMA,WAAEA,ICNNC,EDMyB,CACzBC,QAAS,CACP,UAAW,WAEbC,QAAS,CACPC,KAAM,SACNC,MAAO,UACP,YAAa,WAEfC,OAAQ,CACN,UAAW,UACX,YAAa,YCfR,CACLN,WAAU,CAACO,EAAuBC,IACdP,EAAOM,GAAcC,IACnBD,QALxBN,ED+BF,IAAqBQ,EAArB,cAAoCC,EAApCC,kCAGmBC,WAAgB,UAKJA,UAAyB,IAU1CA,UAAe,GAEjBC,WAAWC,GACnB,GAAIA,EAAkBC,IAAI,OAAQ,CAChC,MAAMP,EAAQI,KAAKI,IAAM,UAAY,YACrCJ,KAAKK,MAAQjB,EAAWY,KAAKK,MAAOT,IAIxCU,SACE,OAAOC,CAAI,yBAEU,YAAfP,KAAKK,MAAsBL,KAAKQ,cAAgBC,KACjC,WAAfT,KAAKK,MAAqBL,KAAKU,iBAAmBD,UAKhDD,cACR,OAAOR,KAAKI,IACRG,CAAI,iBAEWP,KAAKK,eACVL,KAAKI,eACHJ,KAAKW,uBACJX,KAAKY,qBACRZ,KAAKa,MAAQ,OAGvBJ,EAGNC,iBACE,OAAOH,CAAI,oBAEMP,KAAKa,eACXC,EAAUd,KAAKa,KAAO,WAAQE,wSAanCJ,aACNX,KAAKK,MAAQjB,EAAWY,KAAKK,MAAO,QAG9BO,cACNZ,KAAKK,MAAQjB,EAAWY,KAAKK,MAAO,WAvE/BR,SAAS,CAACmB,EAAgBC,GAExBC,GAARb,iCAK4Ba,GAA5BC,EAAS,CAAEC,SAAS,gCAKQF,GAA5BC,EAAS,CAAEC,SAAS,+BAKTF,GAAXC,gCAlBkBtB,KADpBwB,EAAc,gBACMxB,SAAAA"}
1
+ {"version":3,"file":"Avatar.js","sources":["../src/avatar/Avatar.ts","../src/common/fsm.ts"],"sourcesContent":["// eslint-disable-next-line max-classes-per-file\nimport { LitElement, html, PropertyValues, nothing } from \"lit\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { customElement, property, state } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Avatar.css\"\nimport { fsm } from \"../common/fsm.js\"\n\nconst { transition } = fsm({\n initial: {\n \"src-set\": \"loading\",\n },\n loading: {\n load: \"loaded\",\n error: \"initial\",\n \"src-clear\": \"initial\",\n },\n loaded: {\n \"src-set\": \"loading\",\n \"src-clear\": \"initial\",\n },\n})\n\ntype States = Parameters<typeof transition>[0]\n\n/**\n * Avatar is used for showing a thumbnail representation of a user or entity.\n * Default avatar illustration is displayed when no src is specified.\n *\n * @status new\n * @category image\n */\n@customElement(\"nord-avatar\")\nexport default class Avatar extends LitElement {\n static styles = [componentStyle, style]\n\n @state() private state: States = \"initial\"\n\n /**\n * The size of the avatar.\n */\n @property({ reflect: true }) size: \"m\" | \"l\" | \"xl\" = \"m\"\n\n /**\n * The URL of the avatar image uploaded by the user.\n */\n @property({ reflect: true }) src?: string\n\n /**\n * The name of the person.\n */\n @property() name: string = \"\"\n\n protected willUpdate(changedProperties: PropertyValues<this>): void {\n if (changedProperties.has(\"src\")) {\n const event = this.src ? \"src-set\" : \"src-clear\"\n this.state = transition(this.state, event)\n }\n }\n\n render() {\n return html`\n <div class=\"n-avatar\">\n ${this.state !== \"initial\" ? this.renderImage() : nothing}\n ${this.state !== \"loaded\" ? this.renderFallback() : nothing}\n </div>\n `\n }\n\n protected renderImage() {\n return this.src\n ? html`\n <img\n class=\"n-${this.state}\"\n src=${this.src}\n @load=${this.handleLoad}\n @error=${this.handleError}\n alt=${this.name || \"\"}\n />\n `\n : nothing\n }\n\n renderFallback() {\n return html`\n <svg\n aria-label=${this.name}\n role=${ifDefined(this.name ? \"img\" : undefined)}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 27 27\"\n >\n <rect fill=\"var(--n-color-status-info)\" height=\"27\" rx=\"12\" width=\"27\" x=\"0\" y=\"0\"></rect>\n <g fill=\"#fff\" opacity=\".5\">\n <circle cx=\"13.5\" cy=\"30\" r=\"13\"></circle>\n <circle cx=\"13.5\" cy=\"11\" r=\"5\"></circle>\n </g>\n </svg>\n `\n }\n\n private handleLoad() {\n this.state = transition(this.state, \"load\")\n }\n\n private handleError() {\n this.state = transition(this.state, \"error\")\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-avatar\": Avatar\n }\n}\n","type MemberUnion<T> = T extends any ? keyof T : never\n\nexport function fsm<TStates extends keyof TTransitions, TTransitions extends Record<TStates, Record<string, TStates>>>(\n config: TTransitions\n) {\n return {\n transition(currentState: TStates, event: MemberUnion<TTransitions[TStates]>) {\n const nextState = config[currentState][event]\n return nextState || currentState\n },\n }\n}\n"],"names":["transition","config","initial","loading","load","error","loaded","currentState","event","Avatar","LitElement","constructor","this","willUpdate","changedProperties","has","src","state","render","html","renderImage","nothing","renderFallback","handleLoad","handleError","name","ifDefined","undefined","componentStyle","style","__decorate","property","reflect","customElement"],"mappings":"2wBASA,MAAMA,WAAEA,ICNNC,EDMyB,CACzBC,QAAS,CACP,UAAW,WAEbC,QAAS,CACPC,KAAM,SACNC,MAAO,UACP,YAAa,WAEfC,OAAQ,CACN,UAAW,UACX,YAAa,YCfR,CACLN,WAAU,CAACO,EAAuBC,IACdP,EAAOM,GAAcC,IACnBD,QALxBN,ED+BF,IAAqBQ,EAArB,cAAoCC,EAApCC,kCAGmBC,WAAgB,UAKJA,UAAyB,IAU1CA,UAAe,GAEjBC,WAAWC,GACnB,GAAIA,EAAkBC,IAAI,OAAQ,CAChC,MAAMP,EAAQI,KAAKI,IAAM,UAAY,YACrCJ,KAAKK,MAAQjB,EAAWY,KAAKK,MAAOT,IAIxCU,SACE,OAAOC,CAAI,yBAEU,YAAfP,KAAKK,MAAsBL,KAAKQ,cAAgBC,KACjC,WAAfT,KAAKK,MAAqBL,KAAKU,iBAAmBD,UAKhDD,cACR,OAAOR,KAAKI,IACRG,CAAI,iBAEWP,KAAKK,eACVL,KAAKI,eACHJ,KAAKW,uBACJX,KAAKY,qBACRZ,KAAKa,MAAQ,OAGvBJ,EAGNC,iBACE,OAAOH,CAAI,oBAEMP,KAAKa,eACXC,EAAUd,KAAKa,KAAO,WAAQE,iRAanCJ,aACNX,KAAKK,MAAQjB,EAAWY,KAAKK,MAAO,QAG9BO,cACNZ,KAAKK,MAAQjB,EAAWY,KAAKK,MAAO,WAvE/BR,SAAS,CAACmB,EAAgBC,GAExBC,GAARb,iCAK4Ba,GAA5BC,EAAS,CAAEC,SAAS,gCAKQF,GAA5BC,EAAS,CAAEC,SAAS,+BAKTF,GAAXC,gCAlBkBtB,KADpBwB,EAAc,gBACMxB,SAAAA"}
package/lib/Button.js CHANGED
@@ -1,2 +1,2 @@
1
- import{_ as t,n as o}from"./query-assigned-elements-37b095c4.js";import{r as n,$ as e,w as r,s as a}from"./lit-element-9646ab7e.js";import{e as i}from"./property-03f59dce.js";import{l as s}from"./if-defined-2a4c6dbc.js";import{e as l,n as b}from"./ref-eb5cfa10.js";import{L as d}from"./LightDomController-f56fa1a4.js";import{F as c}from"./FocusableMixin-98e13999.js";import{I as u}from"./InputMixin-94d15730.js";import{s as h}from"./Component-6762b5eb.js";import"./directive-helpers-e7b6bf4b.js";import"./directive-de55b00a.js";const v=n`:host{display:inline-block}.n-button{-webkit-appearance:none;align-items:center;appearance:none;background:var(--n-button-background-color,var(--n-color-button));border-radius:var(--n-button-border-radius,var(--n-border-radius-s));border:1px var(--n-button-border-style,solid) var(--n-button-border-color,var(--n-color-border-strong));box-shadow:var(--n-button-box-shadow,var(--n-box-shadow));color:var(--n-button-color,var(--n-color-text));cursor:pointer;display:flex;gap:var(--n-button-gap,var(--n-space-s));font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--n-button-font-size,var(--n-font-size-m));font-weight:var(--n-button-font-weight,var(--n-font-weight));line-height:var(--n-line-height-form);margin:0;min-block-size:var(--n-button-min-height,var(--n-space-xl));padding:var(--n-button-padding-y,calc(var(--n-space-s)/ 1.6)) var(--n-button-padding-x,calc(var(--n-space-m)/ 1.2));text-align:var(--n-button-text-align,center);text-decoration:none;transition:all .1s ease;-webkit-user-select:none;user-select:none;position:relative;inline-size:var(--n-button-width,fit-content)}.n-button::after{content:"";position:absolute;background:0 0;background-image:var(--n-button-gradient,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}:host([expand]){--n-button-width:100%;display:block}.n-content{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative}.n-button:hover{--n-button-background-color:var(--n-color-button-hover);--n-button-border-color:var(--n-color-border-hover)}.n-button:focus{--n-button-border-color:var(--n-color-primary);--n-button-border-style:solid;--n-button-box-shadow:0 0 0 1px var(--n-button-border-color);outline:0}.n-button:active{opacity:.8;transform:translateY(1px);transition:none}:host([variant=primary]){--n-button-background-color:var(--n-color-primary);--n-button-border-color:transparent;--n-button-box-shadow:none;--n-button-color:var(--n-color-text-inverse);--n-button-font-weight:var(--n-font-weight-active)}:host([variant=primary]) .n-button:focus{--n-button-box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-button-border-color)}:host([variant=primary]) .n-button:hover{--n-button-background-color:var(--n-color-primary-strong);--n-button-border-color:transparent}:host([variant=dashed]){--n-button-color:var(--n-color-text-weaker);--n-button-border-color:var(--n-color-border-hover);--n-button-border-style:dashed;--n-button-box-shadow:none}:host([variant=dashed]) .n-button:hover{--n-button-color:var(--n-color-text)}:host([variant=dashed]) .n-button::after{display:none}:host([variant=plain]){--n-button-border-color:transparent;--n-button-box-shadow:none}:host([variant=plain]) .n-button:hover{--n-button-border-color:transparent}:host([variant=plain]) .n-button:focus{--n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([variant=plain]) .n-button::after{display:none}:host([variant=danger]){--n-button-border-color:var(--n-color-status-danger);--n-button-color:var(--n-color-text-error);--n-button-font-weight:var(--n-font-weight-active)}:host([variant=danger]) .n-button:hover{--n-button-border-color:var(--n-color-status-danger)}:host([disabled]){--n-button-background-color:var(--n-color-border);--n-button-box-shadow:none;--n-button-border-color:var(--n-button-background-color);--n-button-color:var(--n-color-text-weaker);opacity:.5;pointer-events:none}:host([disabled]) .n-button::after{display:none}:host([size="s"]){--n-button-font-size:var(--n-font-size-s);--n-button-min-height:var(--n-space-l);--n-button-padding-y:calc(var(--n-space-s) / 1.5);--n-button-padding-x:var(--n-space-s);--n-button-gap:calc(var(--n-space-s) / 2)}:host([size="s"]) .n-button{line-height:var(--n-line-height-tight)}:host([size="l"]){--n-button-border-radius:var(--n-border-radius);--n-button-font-size:var(--n-font-size-l);--n-button-min-height:calc(var(--n-space-xxl) - var(--n-space-l));--n-button-padding-x:calc(var(--n-space-l) / 1.3);--n-button-font-weight:var(--n-font-weight-active)}::slotted(*){color:inherit;pointer-events:none}::slotted(svg){color:var(--n-color-icon)}::slotted(button[slot=proxy]){display:none}`;let p=class extends(u(c(a))){constructor(){super(...arguments),this.buttonRef=l(),this.lightDom=new d(this,{render:()=>this.renderLightDom()}),this.variant="default",this.type="submit",this.size="m",this.download=!1,this.target="_self",this.expand=!1,this.handleOuterClick=t=>{t.composedPath().some((t=>t===this.focusableRef.value||t===this.buttonRef.value))||t.stopPropagation()}}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleOuterClick,!0)}disconnectedCallback(){this.removeEventListener("click",this.handleOuterClick,!0)}render(){const t=e`<slot name="before"></slot><div class="n-content"><slot></slot></div><slot name="after"></slot>`;return this.href?this.renderLink(t):this.renderButton(t)}renderLink(t){return e`<a ${b(this.focusableRef)} class="n-button" target="${this.target}" ?download="${this.download}" href="${s(this.disabled?void 0:this.href)}" tabindex="${s(this.disabled?"-1":void 0)}" aria-disabled="${s(this.disabled?"true":void 0)}" role="${s(this.disabled?"link":void 0)}">${t}</a>`}renderButton(t){return e`<slot name="proxy"></slot><button ${b(this.focusableRef)} class="n-button" ?disabled="${this.disabled}" name="${s(this.name||void 0)}" value="${s(this.value||void 0)}" @click="${this.handleClick}">${t}</button>`}renderLightDom(){return this.href||!this.form?r:e`<button ${b(this.buttonRef)} slot="proxy" name="${s(this.name||void 0)}" value="${s(this.value||void 0)}" ?disabled="${this.disabled}" type="${this.type}"></button>`}handleClick(t){this.buttonRef.value&&(t.stopPropagation(),this.buttonRef.value.click())}};p.styles=[h,v],t([i({reflect:!0})],p.prototype,"variant",void 0),t([i({reflect:!0})],p.prototype,"type",void 0),t([i({reflect:!0})],p.prototype,"size",void 0),t([i({reflect:!0})],p.prototype,"href",void 0),t([i({type:Boolean})],p.prototype,"download",void 0),t([i({reflect:!0})],p.prototype,"target",void 0),t([i({reflect:!0,type:Boolean})],p.prototype,"expand",void 0),p=t([o("nord-button")],p);var f=p;export{f as default};
1
+ import{_ as t,n as o}from"./query-assigned-elements-37b095c4.js";import{r as n,$ as e,w as r,s as a}from"./lit-element-9646ab7e.js";import{e as i}from"./property-03f59dce.js";import{l as s}from"./if-defined-2a4c6dbc.js";import{e as l,n as b}from"./ref-eb5cfa10.js";import{L as d}from"./LightDomController-f56fa1a4.js";import{F as c}from"./FocusableMixin-98e13999.js";import{I as u}from"./InputMixin-94d15730.js";import{s as h}from"./Component-6762b5eb.js";import"./directive-helpers-e7b6bf4b.js";import"./directive-de55b00a.js";const v=n`:host{display:inline-block}.n-button{-webkit-appearance:none;align-items:center;appearance:none;background:var(--n-button-background-color,var(--n-color-button));border-radius:var(--n-button-border-radius,var(--n-border-radius-s));border:1px var(--n-button-border-style,solid) var(--n-button-border-color,var(--n-color-border-strong));box-shadow:var(--n-button-box-shadow,var(--n-box-shadow));color:var(--n-button-color,var(--n-color-text));cursor:pointer;display:flex;gap:var(--n-button-gap,var(--n-space-s));font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--n-button-font-size,var(--n-font-size-m));font-weight:var(--n-button-font-weight,var(--n-font-weight));line-height:var(--n-line-height-form);margin:0;min-block-size:var(--n-button-min-height,var(--n-space-xl));padding:var(--n-button-padding-y,calc(var(--n-space-s)/ 1.6)) var(--n-button-padding-x,calc(var(--n-space-m)/ 1.2));text-align:var(--n-button-text-align,center);text-decoration:none;transition:all .1s ease;-webkit-user-select:none;user-select:none;position:relative;inline-size:var(--n-button-width,fit-content)}.n-button::after{content:"";position:absolute;background:0 0;background-image:var(--n-button-gradient,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}:host([expand]){--n-button-width:100%;display:block}.n-content{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative}.n-button:hover{--n-button-background-color:var(--n-color-button-hover);--n-button-border-color:var(--n-color-border-hover)}.n-button:focus{--n-button-border-color:var(--n-color-accent);--n-button-border-style:solid;--n-button-box-shadow:0 0 0 1px var(--n-button-border-color);outline:0}.n-button:active{opacity:.8;transform:translateY(1px);transition:none}:host([variant=primary]){--n-button-background-color:var(--n-color-accent);--n-button-border-color:transparent;--n-button-box-shadow:none;--n-button-color:var(--n-color-text-on-accent);--n-button-font-weight:var(--n-font-weight-active)}:host([variant=primary]) .n-button:focus{--n-button-box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-button-border-color)}:host([variant=primary]) .n-button:hover{--n-button-border-color:transparent;--n-button-background-color:var(--n-color-accent);filter:brightness(93%)}:host([variant=dashed]){--n-button-color:var(--n-color-text-weaker);--n-button-border-color:var(--n-color-border-hover);--n-button-border-style:dashed;--n-button-box-shadow:none}:host([variant=dashed]) .n-button:hover{--n-button-color:var(--n-color-text)}:host([variant=dashed]) .n-button::after{display:none}:host([variant=plain]){--n-button-border-color:transparent;--n-button-box-shadow:none}:host([variant=plain]) .n-button:hover{--n-button-border-color:transparent}:host([variant=plain]) .n-button:focus{--n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([variant=plain]) .n-button::after{display:none}:host([variant=danger]){--n-button-border-color:var(--n-color-status-danger);--n-button-color:var(--n-color-text-error);--n-button-font-weight:var(--n-font-weight-active)}:host([variant=danger]) .n-button:hover{--n-button-border-color:var(--n-color-status-danger)}:host([disabled]){--n-button-background-color:var(--n-color-border);--n-button-box-shadow:none;--n-button-border-color:var(--n-button-background-color);--n-button-color:var(--n-color-text-weaker);opacity:.5;pointer-events:none}:host([disabled]) .n-button::after{display:none}:host([size="s"]){--n-button-font-size:var(--n-font-size-s);--n-button-min-height:var(--n-space-l);--n-button-padding-y:calc(var(--n-space-s) / 1.5);--n-button-padding-x:var(--n-space-s);--n-button-gap:calc(var(--n-space-s) / 2)}:host([size="s"]) .n-button{line-height:var(--n-line-height-tight)}:host([size="l"]){--n-button-border-radius:var(--n-border-radius);--n-button-font-size:var(--n-font-size-l);--n-button-min-height:calc(var(--n-space-xxl) - var(--n-space-l));--n-button-padding-x:calc(var(--n-space-l) / 1.3);--n-button-font-weight:var(--n-font-weight-active)}::slotted(*){color:inherit;pointer-events:none}::slotted(svg){color:var(--n-color-icon)}::slotted(button[slot=proxy]){display:none}`;let p=class extends(u(c(a))){constructor(){super(...arguments),this.buttonRef=l(),this.lightDom=new d(this,{render:()=>this.renderLightDom()}),this.variant="default",this.type="submit",this.size="m",this.download=!1,this.target="_self",this.expand=!1,this.handleOuterClick=t=>{t.composedPath().some((t=>t===this.focusableRef.value||t===this.buttonRef.value))||t.stopPropagation()}}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleOuterClick,!0)}disconnectedCallback(){this.removeEventListener("click",this.handleOuterClick,!0)}render(){const t=e`<slot name="before"></slot><div class="n-content"><slot></slot></div><slot name="after"></slot>`;return this.href?this.renderLink(t):this.renderButton(t)}renderLink(t){return e`<a ${b(this.focusableRef)} class="n-button" target="${this.target}" ?download="${this.download}" href="${s(this.disabled?void 0:this.href)}" tabindex="${s(this.disabled?"-1":void 0)}" aria-disabled="${s(this.disabled?"true":void 0)}" role="${s(this.disabled?"link":void 0)}">${t}</a>`}renderButton(t){return e`<slot name="proxy"></slot><button ${b(this.focusableRef)} class="n-button" ?disabled="${this.disabled}" name="${s(this.name||void 0)}" value="${s(this.value||void 0)}" @click="${this.handleClick}">${t}</button>`}renderLightDom(){return this.href||!this.form?r:e`<button ${b(this.buttonRef)} slot="proxy" name="${s(this.name||void 0)}" value="${s(this.value||void 0)}" ?disabled="${this.disabled}" type="${this.type}"></button>`}handleClick(t){this.buttonRef.value&&(t.stopPropagation(),this.buttonRef.value.click())}};p.styles=[h,v],t([i({reflect:!0})],p.prototype,"variant",void 0),t([i({reflect:!0})],p.prototype,"type",void 0),t([i({reflect:!0})],p.prototype,"size",void 0),t([i({reflect:!0})],p.prototype,"href",void 0),t([i({type:Boolean})],p.prototype,"download",void 0),t([i({reflect:!0})],p.prototype,"target",void 0),t([i({reflect:!0,type:Boolean})],p.prototype,"expand",void 0),p=t([o("nord-button")],p);var f=p;export{f as default};
2
2
  //# sourceMappingURL=Button.js.map
package/lib/Button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sources":["../src/button/Button.ts"],"sourcesContent":["import { LitElement, html, nothing, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { createRef, ref } from \"lit/directives/ref.js\"\nimport { LightDomController } from \"../common/controllers/LightDomController.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Button.css\"\n\n/**\n * Buttons are used for interface actions. Primary style should be\n * used only once per section for main call-to-action, while other\n * styles can appear more frequently.\n *\n * @status ready\n * @category action\n * @slot - The button content\n * @slot before - Used to place content before button text. Typically used for icons.\n * @slot after - Used to place content after button text. Typically used for icons.\n */\n@customElement(\"nord-button\")\nexport default class Button extends InputMixin(FocusableMixin(LitElement)) {\n static styles = [componentStyle, style]\n\n private buttonRef = createRef<HTMLButtonElement>()\n private lightDom = new LightDomController(this, {\n render: () => this.renderLightDom(),\n })\n\n /**\n * The style variant of the button.\n */\n @property({ reflect: true }) variant: \"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\" = \"default\"\n\n /**\n * The type of the button.\n */\n @property({ reflect: true }) type: \"button\" | \"submit\" | \"reset\" = \"submit\"\n\n /**\n * The size of the button.\n * This affects font-size and padding.\n */\n @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" = \"m\"\n\n /**\n * When provided, renders the button as a link,\n * with its href attribute set to the given value.\n */\n @property({ reflect: true }) href?: string\n\n /**\n * When provided together with a href property, the button will\n * trigger a file download instead of a page visit.\n */\n @property({ type: Boolean }) download = false\n\n /**\n * When provided together with a href property, determines where\n * to open the linked URL. The keywords have special meanings for\n * where to load the URL: “_self” means the current browsing context,\n * “_blank” usually a new tab but users can configure browsers this to\n * open a new window instead, “_parent” means the parent browsing\n * context of the current one, but if no parent exists, behaves as\n * _self, and finally “top” means the topmost browsing context.\n */\n @property({ reflect: true }) target: \"_self\" | \"_blank\" | \"_parent\" | \"_top\" = \"_self\"\n\n /**\n * Controls whether the button expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n connectedCallback() {\n super.connectedCallback()\n this.addEventListener(\"click\", this.handleOuterClick, true)\n }\n\n disconnectedCallback() {\n this.removeEventListener(\"click\", this.handleOuterClick, true)\n }\n\n render() {\n const innards = html`\n <slot name=\"before\"></slot>\n <div class=\"n-content\">\n <slot></slot>\n </div>\n <slot name=\"after\"></slot>\n `\n\n return this.href ? this.renderLink(innards) : this.renderButton(innards)\n }\n\n /**\n * We jump through some hoops here to ensure the link is treated correctly when \"disabled\".\n * Links cannot be disabled natively, so we need to rely on some aria magic to get the correct semantics.\n * Along with the advice in the article below, we also set tabindex to \"-1\", so it is taken out of tab order.\n *\n * @see https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n */\n private renderLink(innards: TemplateResult) {\n return html`\n <a\n ${ref(this.focusableRef)}\n class=\"n-button\"\n target=${this.target}\n ?download=${this.download}\n href=${ifDefined(this.disabled ? undefined : this.href)}\n tabindex=${ifDefined(this.disabled ? \"-1\" : undefined)}\n aria-disabled=${ifDefined(this.disabled ? \"true\" : undefined)}\n role=${ifDefined(this.disabled ? \"link\" : undefined)}\n >${innards}\n </a>\n `\n }\n\n private renderButton(innards: TemplateResult) {\n return html`\n <slot name=\"proxy\"></slot>\n <button\n ${ref(this.focusableRef)}\n class=\"n-button\"\n ?disabled=${this.disabled}\n name=${ifDefined(this.name || undefined)}\n value=${ifDefined(this.value || undefined)}\n @click=${this.handleClick}\n >\n ${innards}\n </button>\n `\n }\n\n private renderLightDom() {\n if (this.href || !this.form) {\n return nothing\n }\n\n return html`\n <button\n ${ref(this.buttonRef)}\n slot=\"proxy\"\n name=${ifDefined(this.name || undefined)}\n value=${ifDefined(this.value || undefined)}\n ?disabled=${this.disabled}\n type=${this.type}\n ></button>\n `\n }\n\n private handleOuterClick = (e: MouseEvent) => {\n // we want to avoid emitting click events when a click\n // happens in blank space in the host, but not on the button\n // so we stop propagation of any events if click didn't happen on the internal or proxy button\n const isInternalButton = e\n .composedPath()\n .some(node => node === this.focusableRef.value || node === this.buttonRef.value)\n\n if (!isInternalButton) {\n e.stopPropagation()\n }\n }\n\n private handleClick(e: Event) {\n if (this.buttonRef.value) {\n // prevents two events: one from internal button, one from proxy button\n e.stopPropagation()\n this.buttonRef.value.click()\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-button\": Button\n }\n}\n"],"names":["Button","InputMixin","FocusableMixin","LitElement","constructor","this","createRef","LightDomController","render","renderLightDom","e","composedPath","some","node","focusableRef","value","buttonRef","stopPropagation","connectedCallback","super","addEventListener","handleOuterClick","disconnectedCallback","removeEventListener","innards","html","href","renderLink","renderButton","ref","target","download","ifDefined","disabled","undefined","name","handleClick","form","nothing","type","click","componentStyle","style","__decorate","property","reflect","Boolean","customElement"],"mappings":"msJAuBA,IAAqBA,EAArB,cAAoCC,EAAWC,EAAeC,KAA9DC,kCAGUC,eAAYC,IACZD,cAAW,IAAIE,EAAmBF,KAAM,CAC9CG,OAAQ,IAAMH,KAAKI,mBAMQJ,aAAiE,UAKjEA,UAAsC,SAMtCA,UAAwB,IAYxBA,eAAW,EAWXA,YAAkD,QAKnCA,aAAS,EA+E7CA,sBAAoBK,IAIDA,EACtBC,eACAC,MAAKC,GAAQA,IAASR,KAAKS,aAAaC,OAASF,IAASR,KAAKW,UAAUD,SAG1EL,EAAEO,mBAtFNC,oBACEC,MAAMD,oBACNb,KAAKe,iBAAiB,QAASf,KAAKgB,kBAAkB,GAGxDC,uBACEjB,KAAKkB,oBAAoB,QAASlB,KAAKgB,kBAAkB,GAG3Db,SACE,MAAMgB,EAAUC,CAAI,kGAQpB,OAAOpB,KAAKqB,KAAOrB,KAAKsB,WAAWH,GAAWnB,KAAKuB,aAAaJ,GAU1DG,WAAWH,GACjB,OAAOC,CAAI,MAELI,EAAIxB,KAAKS,0CAEFT,KAAKyB,sBACFzB,KAAK0B,mBACVC,EAAU3B,KAAK4B,cAAWC,EAAY7B,KAAKqB,oBACvCM,EAAU3B,KAAK4B,SAAW,UAAOC,sBAC5BF,EAAU3B,KAAK4B,SAAW,YAASC,aAC5CF,EAAU3B,KAAK4B,SAAW,YAASC,OACvCV,QAKDI,aAAaJ,GACnB,OAAOC,CAAI,qCAGLI,EAAIxB,KAAKS,6CAECT,KAAK4B,mBACVD,EAAU3B,KAAK8B,WAAQD,cACtBF,EAAU3B,KAAKU,YAASmB,eACvB7B,KAAK+B,gBAEZZ,aAKAf,iBACN,OAAIJ,KAAKqB,OAASrB,KAAKgC,KACdC,EAGFb,CAAI,WAELI,EAAIxB,KAAKW,iCAEJgB,EAAU3B,KAAK8B,WAAQD,cACtBF,EAAU3B,KAAKU,YAASmB,kBACpB7B,KAAK4B,mBACV5B,KAAKkC,kBAkBVH,YAAY1B,GACdL,KAAKW,UAAUD,QAEjBL,EAAEO,kBACFZ,KAAKW,UAAUD,MAAMyB,WAjJlBxC,SAAS,CAACyC,EAAgBC,GAUJC,GAA5BC,EAAS,CAAEC,SAAS,mCAKQF,GAA5BC,EAAS,CAAEC,SAAS,gCAMQF,GAA5BC,EAAS,CAAEC,SAAS,gCAMQF,GAA5BC,EAAS,CAAEC,SAAS,gCAMQF,GAA5BC,EAAS,CAAEL,KAAMO,0CAWWH,GAA5BC,EAAS,CAAEC,SAAS,kCAKuBF,GAA3CC,EAAS,CAAEC,SAAS,EAAMN,KAAMO,wCAlDd9C,KADpB+C,EAAc,gBACM/C,SAAAA"}
1
+ {"version":3,"file":"Button.js","sources":["../src/button/Button.ts"],"sourcesContent":["import { LitElement, html, nothing, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { createRef, ref } from \"lit/directives/ref.js\"\nimport { LightDomController } from \"../common/controllers/LightDomController.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Button.css\"\n\n/**\n * Buttons are used for interface actions. Primary style should be\n * used only once per section for main call-to-action, while other\n * styles can appear more frequently.\n *\n * @status ready\n * @category action\n * @slot - The button content\n * @slot before - Used to place content before button text. Typically used for icons.\n * @slot after - Used to place content after button text. Typically used for icons.\n */\n@customElement(\"nord-button\")\nexport default class Button extends InputMixin(FocusableMixin(LitElement)) {\n static styles = [componentStyle, style]\n\n private buttonRef = createRef<HTMLButtonElement>()\n private lightDom = new LightDomController(this, {\n render: () => this.renderLightDom(),\n })\n\n /**\n * The style variant of the button.\n */\n @property({ reflect: true }) variant: \"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\" = \"default\"\n\n /**\n * The type of the button.\n */\n @property({ reflect: true }) type: \"button\" | \"submit\" | \"reset\" = \"submit\"\n\n /**\n * The size of the button.\n * This affects font-size and padding.\n */\n @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" = \"m\"\n\n /**\n * When provided, renders the button as a link,\n * with its href attribute set to the given value.\n */\n @property({ reflect: true }) href?: string\n\n /**\n * When provided together with a href property, the button will\n * trigger a file download instead of a page visit.\n */\n @property({ type: Boolean }) download = false\n\n /**\n * When provided together with a href property, determines where\n * to open the linked URL. The keywords have special meanings for\n * where to load the URL: “_self” means the current browsing context,\n * “_blank” usually a new tab but users can configure browsers this to\n * open a new window instead, “_parent” means the parent browsing\n * context of the current one, but if no parent exists, behaves as\n * _self, and finally “top” means the topmost browsing context.\n */\n @property({ reflect: true }) target: \"_self\" | \"_blank\" | \"_parent\" | \"_top\" = \"_self\"\n\n /**\n * Controls whether the button expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n connectedCallback() {\n super.connectedCallback()\n this.addEventListener(\"click\", this.handleOuterClick, true)\n }\n\n disconnectedCallback() {\n this.removeEventListener(\"click\", this.handleOuterClick, true)\n }\n\n render() {\n const innards = html`\n <slot name=\"before\"></slot>\n <div class=\"n-content\">\n <slot></slot>\n </div>\n <slot name=\"after\"></slot>\n `\n\n return this.href ? this.renderLink(innards) : this.renderButton(innards)\n }\n\n /**\n * We jump through some hoops here to ensure the link is treated correctly when \"disabled\".\n * Links cannot be disabled natively, so we need to rely on some aria magic to get the correct semantics.\n * Along with the advice in the article below, we also set tabindex to \"-1\", so it is taken out of tab order.\n *\n * @see https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n */\n private renderLink(innards: TemplateResult) {\n return html`\n <a\n ${ref(this.focusableRef)}\n class=\"n-button\"\n target=${this.target}\n ?download=${this.download}\n href=${ifDefined(this.disabled ? undefined : this.href)}\n tabindex=${ifDefined(this.disabled ? \"-1\" : undefined)}\n aria-disabled=${ifDefined(this.disabled ? \"true\" : undefined)}\n role=${ifDefined(this.disabled ? \"link\" : undefined)}\n >${innards}\n </a>\n `\n }\n\n private renderButton(innards: TemplateResult) {\n return html`\n <slot name=\"proxy\"></slot>\n <button\n ${ref(this.focusableRef)}\n class=\"n-button\"\n ?disabled=${this.disabled}\n name=${ifDefined(this.name || undefined)}\n value=${ifDefined(this.value || undefined)}\n @click=${this.handleClick}\n >\n ${innards}\n </button>\n `\n }\n\n private renderLightDom() {\n if (this.href || !this.form) {\n return nothing\n }\n\n return html`\n <button\n ${ref(this.buttonRef)}\n slot=\"proxy\"\n name=${ifDefined(this.name || undefined)}\n value=${ifDefined(this.value || undefined)}\n ?disabled=${this.disabled}\n type=${this.type}\n ></button>\n `\n }\n\n private handleOuterClick = (e: MouseEvent) => {\n // we want to avoid emitting click events when a click\n // happens in blank space in the host, but not on the button\n // so we stop propagation of any events if click didn't happen on the internal or proxy button\n const isInternalButton = e\n .composedPath()\n .some(node => node === this.focusableRef.value || node === this.buttonRef.value)\n\n if (!isInternalButton) {\n e.stopPropagation()\n }\n }\n\n private handleClick(e: Event) {\n if (this.buttonRef.value) {\n // prevents two events: one from internal button, one from proxy button\n e.stopPropagation()\n this.buttonRef.value.click()\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-button\": Button\n }\n}\n"],"names":["Button","InputMixin","FocusableMixin","LitElement","constructor","this","createRef","LightDomController","render","renderLightDom","e","composedPath","some","node","focusableRef","value","buttonRef","stopPropagation","connectedCallback","super","addEventListener","handleOuterClick","disconnectedCallback","removeEventListener","innards","html","href","renderLink","renderButton","ref","target","download","ifDefined","disabled","undefined","name","handleClick","form","nothing","type","click","componentStyle","style","__decorate","property","reflect","Boolean","customElement"],"mappings":"ktJAuBA,IAAqBA,EAArB,cAAoCC,EAAWC,EAAeC,KAA9DC,kCAGUC,eAAYC,IACZD,cAAW,IAAIE,EAAmBF,KAAM,CAC9CG,OAAQ,IAAMH,KAAKI,mBAMQJ,aAAiE,UAKjEA,UAAsC,SAMtCA,UAAwB,IAYxBA,eAAW,EAWXA,YAAkD,QAKnCA,aAAS,EA+E7CA,sBAAoBK,IAIDA,EACtBC,eACAC,MAAKC,GAAQA,IAASR,KAAKS,aAAaC,OAASF,IAASR,KAAKW,UAAUD,SAG1EL,EAAEO,mBAtFNC,oBACEC,MAAMD,oBACNb,KAAKe,iBAAiB,QAASf,KAAKgB,kBAAkB,GAGxDC,uBACEjB,KAAKkB,oBAAoB,QAASlB,KAAKgB,kBAAkB,GAG3Db,SACE,MAAMgB,EAAUC,CAAI,kGAQpB,OAAOpB,KAAKqB,KAAOrB,KAAKsB,WAAWH,GAAWnB,KAAKuB,aAAaJ,GAU1DG,WAAWH,GACjB,OAAOC,CAAI,MAELI,EAAIxB,KAAKS,0CAEFT,KAAKyB,sBACFzB,KAAK0B,mBACVC,EAAU3B,KAAK4B,cAAWC,EAAY7B,KAAKqB,oBACvCM,EAAU3B,KAAK4B,SAAW,UAAOC,sBAC5BF,EAAU3B,KAAK4B,SAAW,YAASC,aAC5CF,EAAU3B,KAAK4B,SAAW,YAASC,OACvCV,QAKDI,aAAaJ,GACnB,OAAOC,CAAI,qCAGLI,EAAIxB,KAAKS,6CAECT,KAAK4B,mBACVD,EAAU3B,KAAK8B,WAAQD,cACtBF,EAAU3B,KAAKU,YAASmB,eACvB7B,KAAK+B,gBAEZZ,aAKAf,iBACN,OAAIJ,KAAKqB,OAASrB,KAAKgC,KACdC,EAGFb,CAAI,WAELI,EAAIxB,KAAKW,iCAEJgB,EAAU3B,KAAK8B,WAAQD,cACtBF,EAAU3B,KAAKU,YAASmB,kBACpB7B,KAAK4B,mBACV5B,KAAKkC,kBAkBVH,YAAY1B,GACdL,KAAKW,UAAUD,QAEjBL,EAAEO,kBACFZ,KAAKW,UAAUD,MAAMyB,WAjJlBxC,SAAS,CAACyC,EAAgBC,GAUJC,GAA5BC,EAAS,CAAEC,SAAS,mCAKQF,GAA5BC,EAAS,CAAEC,SAAS,gCAMQF,GAA5BC,EAAS,CAAEC,SAAS,gCAMQF,GAA5BC,EAAS,CAAEC,SAAS,gCAMQF,GAA5BC,EAAS,CAAEL,KAAMO,0CAWWH,GAA5BC,EAAS,CAAEC,SAAS,kCAKuBF,GAA3CC,EAAS,CAAEC,SAAS,EAAMN,KAAMO,wCAlDd9C,KADpB+C,EAAc,gBACM/C,SAAAA"}
@@ -0,0 +1,13 @@
1
+ import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{r as a,s as n,$ as i}from"./lit-element-9646ab7e.js";import{e as o}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{c as r,r as l}from"./number-e7cd246c.js";import{o as d}from"./tinykeys.module-84e6cc41.js";import c from"./Icon.js";import{D as h}from"./DirectionController-82794ee9.js";import{i as u,p as v,a as p,s as f,e as m,b as y,c as g,d as b,f as x,g as w,h as D,j as z}from"./dates-ccf5a897.js";import k from"./calendar-localization.js";import{monthView as F}from"./month-view.js";import{DateSelectEvent as S}from"./DateSelectEvent.js";import{s as $}from"./Component-6762b5eb.js";
2
+ /**
3
+ * @license
4
+ * Copyright 2017 Google LLC
5
+ * SPDX-License-Identifier: BSD-3-Clause
6
+ */
7
+ /**
8
+ * @license
9
+ * Copyright 2017 Google LLC
10
+ * SPDX-License-Identifier: BSD-3-Clause
11
+ */
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 L=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M99.736 140a10.486 10.486 0 0 1-7.238-2.884L35 82.6a17.598 17.598 0 0 1-.14-24.976l57.638-54.74a10.502 10.502 0 1 1 14.462 15.232l-51.968 49.35a3.486 3.486 0 0 0 0 5.068l51.968 49.35A10.5 10.5 0 0 1 99.736 140z"/></svg>',title:"arrow-left-small",tags:"nordicon arrow left small caret pointing triangle chevron"});var T=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M70 110.236a17.332 17.332 0 0 1-12.306-5.096L2.884 47.502A10.502 10.502 0 1 1 18.116 33.04l49.35 51.968a3.486 3.486 0 0 0 5.068 0l49.35-51.968a10.502 10.502 0 1 1 15.232 14.462L82.6 105a17.766 17.766 0 0 1-12.6 5.236z"/></svg>',title:"arrow-down-small",tags:"nordicon arrow down small caret pointing triangle chevron"});const j=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",j),e.addEventListener("touchend",this.handleTouchEnd)}}hostDisconnected(){this.attached=!1;const e=this.target();e.removeEventListener("touchstart",this.handleTouchStart),e.removeEventListener("touchmove",j),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(L),c.registerIcon(T);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(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(x(this.focusedDay,this.firstDayOfWeek))}setMonth(e){const t=w(f(this.focusedDay),e),a=m(t),n=w(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))}};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-4cb3c8f2.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Calendar-664c2b4c.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","// eslint-disable-next-line max-classes-per-file\nimport { 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 Icon from \"../icon/Icon.js\"\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 */\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 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(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 }\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,4kHC9C1EmB,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAClBH,EAAKC,aAAaG,GAElB,MAAMlC,EAAkBmC,GAAuBtD,IAC7CA,EAAEmB,iBACFmC,EAAGtD,IAGCuD,EAAiB,KAAM,EAW7B,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,KAqJ1B/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,EAAgBV,MA4CnChE,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,GA5NrBC,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,QAxQlE1B,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-4cb3c8f2.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","// eslint-disable-next-line max-classes-per-file\nimport { 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 Icon from \"../icon/Icon.js\"\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 */\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 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(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 }\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,0kHC9C1EmB,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAClBH,EAAKC,aAAaG,GAElB,MAAMlC,EAAkBmC,GAAuBtD,IAC7CA,EAAEmB,iBACFmC,EAAGtD,IAGCuD,EAAiB,KAAM,EAW7B,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,KAqJ1B/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,EAAgBV,MA4CnChE,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,GA5NrBC,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,QAxQlE1B,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"}
package/lib/Calendar.js CHANGED
@@ -1,2 +1,2 @@
1
- import"./query-assigned-elements-37b095c4.js";import"./lit-element-9646ab7e.js";import"./property-03f59dce.js";import"./state-70f38ceb.js";export{C as default}from"./Calendar-664c2b4c.js";import"./number-e7cd246c.js";import"./tinykeys.module-84e6cc41.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-6762b5eb.js";import"./directive-de55b00a.js";import"./directive-helpers-e7b6bf4b.js";import"./if-defined-2a4c6dbc.js";import"./unsafe-html-4da54dd2.js";import"./class-map-61e9e8c1.js";import"./collection-f3631dc8.js";import"./events-731d0007.js";
1
+ import"./query-assigned-elements-37b095c4.js";import"./lit-element-9646ab7e.js";import"./property-03f59dce.js";import"./state-70f38ceb.js";export{C as default}from"./Calendar-4cb3c8f2.js";import"./number-e7cd246c.js";import"./tinykeys.module-84e6cc41.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-6762b5eb.js";import"./directive-de55b00a.js";import"./directive-helpers-e7b6bf4b.js";import"./if-defined-2a4c6dbc.js";import"./unsafe-html-4da54dd2.js";import"./class-map-61e9e8c1.js";import"./collection-f3631dc8.js";import"./events-731d0007.js";
2
2
  //# sourceMappingURL=Calendar.js.map
package/lib/Checkbox.js CHANGED
@@ -1,2 +1,2 @@
1
- import{_ as e,n as r}from"./query-assigned-elements-37b095c4.js";import{r as o,$ as n,s as a}from"./lit-element-9646ab7e.js";import{e as c}from"./property-03f59dce.js";import{l as i}from"./if-defined-2a4c6dbc.js";import{n as t}from"./ref-eb5cfa10.js";import s from"./Icon.js";import{F as l}from"./FocusableMixin-98e13999.js";import{F as d}from"./FormAssociatedMixin-bfbbe389.js";import{I as p}from"./InputMixin-94d15730.js";import{s as b}from"./Component-6762b5eb.js";import{s as h}from"./FormField-b1c18e6e.js";import"./directive-helpers-e7b6bf4b.js";import"./directive-de55b00a.js";import"./state-70f38ceb.js";import"./unsafe-html-4da54dd2.js";import"./SlotController-5bfc47d1.js";import"./events-731d0007.js";import"./VisuallyHidden.js";var v=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M41.86 131.25a23.982 23.982 0 0 1-18.494-8.666L2.254 95.746a10.5 10.5 0 1 1 16.492-12.992l21 26.6a2.24 2.24 0 0 0 2.212.882 3.038 3.038 0 0 0 2.38-1.148l76.958-96.39a10.5 10.5 0 1 1 16.408 13.104L60.606 122.29A24.038 24.038 0 0 1 42 131.25z"/></svg>',title:"interface-checked-small",tags:"nordicon interface checked small symbol checkmark done ready"});const m=o`:host{display:inline-block;font-size:var(--n-font-size-m)}.n-flex{display:flex}.n-expand{flex:1}.n-input-container{position:relative}input{--n-checkbox-size:calc(var(--n-space-m) * 1.25);--n-checkbox-accent-color:var(--n-color-primary);-moz-appearance:none;-webkit-appearance:none;appearance:none;border:1px solid var(--n-checkbox-border-color,var(--n-color-border-hover));border-radius:var(--n-border-radius-s);display:block;inline-size:var(--n-checkbox-size);block-size:var(--n-checkbox-size);cursor:pointer}input:checked{--n-checkbox-border-color:var(--n-color-primary);background:var(--n-checkbox-accent-color)}input[aria-invalid]{--n-checkbox-accent-color:var(--n-color-status-danger);--n-checkbox-border-color:var(--n-checkbox-accent-color)}input:focus-visible{outline:0!important}input:focus{outline:0!important;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-primary)}input:active{opacity:.8}:host([disabled]) label{color:var(--n-color-text-weaker);cursor:default}:host([disabled]) input{--n-checkbox-accent-color:var(--n-color-border-strong);--n-checkbox-border-color:var(--n-checkbox-accent-color);background:var(--n-checkbox-accent-color);cursor:default;opacity:1}nord-icon{display:none;position:absolute;color:var(--n-color-text-inverse);inset-inline-start:calc(var(--n-space-s)/ 2);inset-block-start:calc(var(--n-space-s)/ 2);z-index:var(--n-index-default);pointer-events:none}input:checked+nord-icon{display:block}.n-label-container{padding-block-end:0}label{-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-l);padding-inline-start:var(--n-space-s);cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:calc(var(--n-space-s)/ 2);padding-inline-start:var(--n-space-s)}`;s.registerIcon(v);let u=class extends(d(p(l(a)))){constructor(){super(...arguments),this.checked=!1}get formValue(){return this.checked?this.value||"on":void 0}render(){return n`<div class="n-flex"><div class="n-input-container"><input ${t(this.focusableRef)} class="n-input" id="${this.inputId}" type="checkbox" name="${i(this.name)}" .value="${this.value}" ?checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${i(this.getDescribedBy())}" aria-invalid="${i(this.getInvalid())}" @change="${this.handleChange}"><nord-icon name="interface-checked-small" size="s"></nord-icon></div><div class="n-expand">${this.renderLabel()} ${this.renderError()}</div></div>`}handleChange(e){const r=e.target;this.checked=r.checked,super.handleChange(e)}};u.styles=[b,h,m],e([c({type:Boolean})],u.prototype,"checked",void 0),u=e([r("nord-checkbox")],u);var f=u;export{f as default};
1
+ import{_ as e,n as r}from"./query-assigned-elements-37b095c4.js";import{r as o,$ as n,s as c}from"./lit-element-9646ab7e.js";import{e as a}from"./property-03f59dce.js";import{l as i}from"./if-defined-2a4c6dbc.js";import{n as t}from"./ref-eb5cfa10.js";import s from"./Icon.js";import{F as l}from"./FocusableMixin-98e13999.js";import{F as d}from"./FormAssociatedMixin-bfbbe389.js";import{I as p}from"./InputMixin-94d15730.js";import{s as b}from"./Component-6762b5eb.js";import{s as h}from"./FormField-b1c18e6e.js";import"./directive-helpers-e7b6bf4b.js";import"./directive-de55b00a.js";import"./state-70f38ceb.js";import"./unsafe-html-4da54dd2.js";import"./SlotController-5bfc47d1.js";import"./events-731d0007.js";import"./VisuallyHidden.js";var v=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M41.86 131.25a23.982 23.982 0 0 1-18.494-8.666L2.254 95.746a10.5 10.5 0 1 1 16.492-12.992l21 26.6a2.24 2.24 0 0 0 2.212.882 3.038 3.038 0 0 0 2.38-1.148l76.958-96.39a10.5 10.5 0 1 1 16.408 13.104L60.606 122.29A24.038 24.038 0 0 1 42 131.25z"/></svg>',title:"interface-checked-small",tags:"nordicon interface checked small symbol checkmark done ready"});const u=o`:host{display:inline-block;font-size:var(--n-font-size-m)}.n-flex{display:flex}.n-expand{flex:1}.n-input-container{position:relative}input{--n-checkbox-size:calc(var(--n-space-m) * 1.25);--n-checkbox-accent-color:var(--n-color-accent);-moz-appearance:none;-webkit-appearance:none;appearance:none;border:1px solid var(--n-checkbox-border-color,var(--n-color-border-hover));border-radius:var(--n-border-radius-s);display:block;inline-size:var(--n-checkbox-size);block-size:var(--n-checkbox-size);cursor:pointer}input:checked{--n-checkbox-border-color:var(--n-color-accent);background:var(--n-checkbox-accent-color)}input[aria-invalid]{--n-checkbox-accent-color:var(--n-color-status-danger);--n-checkbox-border-color:var(--n-checkbox-accent-color)}input:focus-visible{outline:0!important}input:focus{outline:0!important;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)}input:active{opacity:.8}:host([disabled]) label{color:var(--n-color-text-weaker);cursor:default}:host([disabled]) input{--n-checkbox-accent-color:var(--n-color-border-strong);--n-checkbox-border-color:var(--n-checkbox-accent-color);background:var(--n-checkbox-accent-color);cursor:default;opacity:1}nord-icon{display:none;position:absolute;color:var(--n-color-text-on-accent);inset-inline-start:calc(var(--n-space-s)/ 2);inset-block-start:calc(var(--n-space-s)/ 2);z-index:var(--n-index-default);pointer-events:none}input:checked+nord-icon{display:block}.n-label-container{padding-block-end:0}label{-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-l);padding-inline-start:var(--n-space-s);cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:calc(var(--n-space-s)/ 2);padding-inline-start:var(--n-space-s)}`;s.registerIcon(v);let m=class extends(d(p(l(c)))){constructor(){super(...arguments),this.checked=!1}get formValue(){return this.checked?this.value||"on":void 0}render(){return n`<div class="n-flex"><div class="n-input-container"><input ${t(this.focusableRef)} class="n-input" id="${this.inputId}" type="checkbox" name="${i(this.name)}" .value="${this.value}" ?checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${i(this.getDescribedBy())}" aria-invalid="${i(this.getInvalid())}" @change="${this.handleChange}"><nord-icon name="interface-checked-small" size="s"></nord-icon></div><div class="n-expand">${this.renderLabel()} ${this.renderError()}</div></div>`}handleChange(e){const r=e.target;this.checked=r.checked,super.handleChange(e)}};m.styles=[b,h,u],e([a({type:Boolean})],m.prototype,"checked",void 0),m=e([r("nord-checkbox")],m);var f=m;export{f as default};
2
2
  //# sourceMappingURL=Checkbox.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.js","sources":["../../icons/lib/assets/interface-checked-small.js","../src/checkbox/Checkbox.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M41.86 131.25a23.982 23.982 0 0 1-18.494-8.666L2.254 95.746a10.5 10.5 0 1 1 16.492-12.992l21 26.6a2.24 2.24 0 0 0 2.212.882 3.038 3.038 0 0 0 2.38-1.148l76.958-96.39a10.5 10.5 0 1 1 16.408 13.104L60.606 122.29A24.038 24.038 0 0 1 42 131.25z\"/></svg>'\nexport const title = \"interface-checked-small\"\nexport const tags = \"nordicon interface checked small symbol checkmark done ready\"\n","import { html, LitElement } 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 * as checkedIcon from \"@nordhealth/icons/lib/assets/interface-checked-small.js\"\n\nimport Icon from \"../icon/Icon.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 style from \"./Checkbox.css\"\n\nIcon.registerIcon(checkedIcon)\n\n/**\n * Checkboxes allow user to choose one or more options from a limited set of options.\n * If you have more than 10 options, please use Select component instead.\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 */\n@customElement(\"nord-checkbox\")\nexport default class Checkbox extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n static styles = [componentStyle, formFieldStyle, style]\n\n protected override get formValue() {\n return this.checked ? this.value || \"on\" : undefined\n }\n\n /**\n * Controls whether the checkbox is checked or not.\n */\n @property({ type: Boolean }) checked: boolean = false\n\n render() {\n return html`\n <div class=\"n-flex\">\n <div class=\"n-input-container\">\n <input\n ${ref(this.focusableRef)}\n class=\"n-input\"\n id=${this.inputId}\n type=\"checkbox\"\n name=${ifDefined(this.name)}\n .value=${this.value}\n ?checked=${this.checked}\n ?disabled=${this.disabled}\n ?required=${this.required}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n @change=${this.handleChange}\n />\n <nord-icon name=\"interface-checked-small\" size=\"s\"></nord-icon>\n </div>\n <div class=\"n-expand\">${this.renderLabel()} ${this.renderError()}</div>\n </div>\n `\n }\n\n protected handleChange(e: Event): void {\n const target = e.target as HTMLInputElement\n this.checked = target.checked\n super.handleChange(e)\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-checkbox\": Checkbox\n }\n}\n"],"names":["Icon","registerIcon","checkedIcon","Checkbox","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","formValue","checked","value","undefined","render","html","ref","focusableRef","inputId","ifDefined","name","disabled","required","getDescribedBy","getInvalid","handleChange","renderLabel","renderError","e","target","super","componentStyle","formFieldStyle","style","__decorate","property","type","Boolean","customElement"],"mappings":"gxBAAe,6VACM,+BACD,y1DCapBA,EAAKC,aAAaC,GAalB,IAAqBC,EAArB,cAAsCC,EAAoBC,EAAWC,EAAeC,MAApFC,kCAU+BC,cAAmB,EAPzBC,gBACrB,OAAOD,KAAKE,QAAUF,KAAKG,OAAS,UAAOC,EAQ7CC,SACE,OAAOC,CAAI,6DAIDC,EAAIP,KAAKQ,qCAENR,KAAKS,kCAEHC,EAAUV,KAAKW,kBACbX,KAAKG,oBACHH,KAAKE,uBACJF,KAAKY,wBACLZ,KAAKa,+BACEH,EAAUV,KAAKc,oCACnBJ,EAAUV,KAAKe,2BACpBf,KAAKgB,4GAIKhB,KAAKiB,iBAAiBjB,KAAKkB,4BAK/CF,aAAaG,GACrB,MAAMC,EAASD,EAAEC,OACjBpB,KAAKE,QAAUkB,EAAOlB,QACtBmB,MAAML,aAAaG,KAvCdzB,SAAS,CAAC4B,EAAgBC,EAAgBC,GASpBC,GAA5BC,EAAS,CAAEC,KAAMC,yCAVClC,KADpBmC,EAAc,kBACMnC,SAAAA"}
1
+ {"version":3,"file":"Checkbox.js","sources":["../../icons/lib/assets/interface-checked-small.js","../src/checkbox/Checkbox.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M41.86 131.25a23.982 23.982 0 0 1-18.494-8.666L2.254 95.746a10.5 10.5 0 1 1 16.492-12.992l21 26.6a2.24 2.24 0 0 0 2.212.882 3.038 3.038 0 0 0 2.38-1.148l76.958-96.39a10.5 10.5 0 1 1 16.408 13.104L60.606 122.29A24.038 24.038 0 0 1 42 131.25z\"/></svg>'\nexport const title = \"interface-checked-small\"\nexport const tags = \"nordicon interface checked small symbol checkmark done ready\"\n","import { html, LitElement } 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 * as checkedIcon from \"@nordhealth/icons/lib/assets/interface-checked-small.js\"\n\nimport Icon from \"../icon/Icon.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 style from \"./Checkbox.css\"\n\nIcon.registerIcon(checkedIcon)\n\n/**\n * Checkboxes allow user to choose one or more options from a limited set of options.\n * If you have more than 10 options, please use Select component instead.\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 */\n@customElement(\"nord-checkbox\")\nexport default class Checkbox extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n static styles = [componentStyle, formFieldStyle, style]\n\n protected override get formValue() {\n return this.checked ? this.value || \"on\" : undefined\n }\n\n /**\n * Controls whether the checkbox is checked or not.\n */\n @property({ type: Boolean }) checked: boolean = false\n\n render() {\n return html`\n <div class=\"n-flex\">\n <div class=\"n-input-container\">\n <input\n ${ref(this.focusableRef)}\n class=\"n-input\"\n id=${this.inputId}\n type=\"checkbox\"\n name=${ifDefined(this.name)}\n .value=${this.value}\n ?checked=${this.checked}\n ?disabled=${this.disabled}\n ?required=${this.required}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n @change=${this.handleChange}\n />\n <nord-icon name=\"interface-checked-small\" size=\"s\"></nord-icon>\n </div>\n <div class=\"n-expand\">${this.renderLabel()} ${this.renderError()}</div>\n </div>\n `\n }\n\n protected handleChange(e: Event): void {\n const target = e.target as HTMLInputElement\n this.checked = target.checked\n super.handleChange(e)\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-checkbox\": Checkbox\n }\n}\n"],"names":["Icon","registerIcon","checkedIcon","Checkbox","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","formValue","checked","value","undefined","render","html","ref","focusableRef","inputId","ifDefined","name","disabled","required","getDescribedBy","getInvalid","handleChange","renderLabel","renderError","e","target","super","componentStyle","formFieldStyle","style","__decorate","property","type","Boolean","customElement"],"mappings":"gxBAAe,6VACM,+BACD,w1DCapBA,EAAKC,aAAaC,GAalB,IAAqBC,EAArB,cAAsCC,EAAoBC,EAAWC,EAAeC,MAApFC,kCAU+BC,cAAmB,EAPzBC,gBACrB,OAAOD,KAAKE,QAAUF,KAAKG,OAAS,UAAOC,EAQ7CC,SACE,OAAOC,CAAI,6DAIDC,EAAIP,KAAKQ,qCAENR,KAAKS,kCAEHC,EAAUV,KAAKW,kBACbX,KAAKG,oBACHH,KAAKE,uBACJF,KAAKY,wBACLZ,KAAKa,+BACEH,EAAUV,KAAKc,oCACnBJ,EAAUV,KAAKe,2BACpBf,KAAKgB,4GAIKhB,KAAKiB,iBAAiBjB,KAAKkB,4BAK/CF,aAAaG,GACrB,MAAMC,EAASD,EAAEC,OACjBpB,KAAKE,QAAUkB,EAAOlB,QACtBmB,MAAML,aAAaG,KAvCdzB,SAAS,CAAC4B,EAAgBC,EAAgBC,GASpBC,GAA5BC,EAAS,CAAEC,KAAMC,yCAVClC,KADpBmC,EAAc,kBACMnC,SAAAA"}