@oslokommune/punkt-elements 12.17.2 → 12.18.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (128) hide show
  1. package/dist/alert-BbVWu2lm.cjs +27 -0
  2. package/dist/alert-Dh6A96vo.js +159 -0
  3. package/dist/{index-D2jSRMrn.js → calendar-BUqcNvfI.js} +41 -29
  4. package/dist/calendar-QSulz7im.cjs +108 -0
  5. package/dist/card-B0GPdG5M.cjs +23 -0
  6. package/dist/card-kWt0BA2a.js +170 -0
  7. package/dist/{class-map-a5HUzP83.cjs → class-map-Boa7BqCc.cjs} +2 -2
  8. package/dist/{class-map-CBvUV2N3.js → class-map-hz16xq5a.js} +9 -10
  9. package/dist/datepicker-BHepKxof.cjs +154 -0
  10. package/dist/datepicker-iNCYioZ9.js +659 -0
  11. package/dist/helptext--4FLdAWi.js +194 -0
  12. package/dist/helptext-iZEgxz2U.cjs +23 -0
  13. package/dist/icon-CdMQ6zBT.cjs +250 -0
  14. package/dist/{index-CFDwiDTU.js → icon-wUXeHiBk.js} +7371 -7559
  15. package/dist/if-defined-DEDlGbAc.cjs +5 -0
  16. package/dist/if-defined-ZFE4ti2t.js +10 -0
  17. package/dist/index.d.ts +96 -51
  18. package/dist/input-element-D1Vls6A5.js +184 -0
  19. package/dist/input-element-DPKoFVwJ.cjs +1 -0
  20. package/dist/{input-wrapper-6vTrKtsW.js → input-wrapper-BTQk3W8T.js} +10 -10
  21. package/dist/input-wrapper-D-PNRJB_.cjs +46 -0
  22. package/dist/link-BpqavGSD.cjs +8 -0
  23. package/dist/link-Bx9nVgZi.js +108 -0
  24. package/dist/{linkcard-BlWQ8jOv.js → linkcard-CUrbzjLK.js} +16 -17
  25. package/dist/linkcard-DSu3A4Yx.cjs +13 -0
  26. package/dist/messagebox-C1aWoQbu.cjs +12 -0
  27. package/dist/messagebox-LpiVQIoM.js +107 -0
  28. package/dist/{modal-DYTVJjYh.cjs → modal-Avai5eVz.cjs} +2 -2
  29. package/dist/{modal-3OZTPqee.js → modal-Co1YFmHi.js} +8 -8
  30. package/dist/pkt-alert.cjs +1 -27
  31. package/dist/pkt-alert.js +4 -157
  32. package/dist/pkt-calendar.cjs +1 -1
  33. package/dist/pkt-calendar.js +4 -7
  34. package/dist/pkt-card.cjs +1 -23
  35. package/dist/pkt-card.js +4 -168
  36. package/dist/pkt-datepicker.cjs +1 -154
  37. package/dist/pkt-datepicker.js +4 -657
  38. package/dist/pkt-helptext.cjs +1 -1
  39. package/dist/pkt-helptext.js +1 -1
  40. package/dist/pkt-icon.cjs +1 -1
  41. package/dist/pkt-icon.js +4 -4
  42. package/dist/pkt-index.cjs +29 -1
  43. package/dist/pkt-index.js +127 -30
  44. package/dist/pkt-input-wrapper.cjs +1 -1
  45. package/dist/pkt-input-wrapper.js +1 -1
  46. package/dist/pkt-link.cjs +1 -8
  47. package/dist/pkt-link.js +4 -107
  48. package/dist/pkt-linkcard.cjs +1 -1
  49. package/dist/pkt-linkcard.js +1 -1
  50. package/dist/pkt-messagebox.cjs +1 -12
  51. package/dist/pkt-messagebox.js +4 -105
  52. package/dist/pkt-modal.cjs +1 -1
  53. package/dist/pkt-modal.js +1 -1
  54. package/dist/pkt-progressbar.cjs +1 -0
  55. package/dist/pkt-progressbar.js +6 -0
  56. package/dist/pkt-slot-controller-Ckk_yV0j.cjs +1 -0
  57. package/dist/pkt-slot-controller-RJvOnbF4.js +61 -0
  58. package/dist/pkt-tag.cjs +1 -17
  59. package/dist/pkt-tag.js +4 -148
  60. package/dist/pkt-textarea.cjs +1 -1
  61. package/dist/pkt-textarea.js +1 -1
  62. package/dist/pkt-textinput.cjs +1 -1
  63. package/dist/pkt-textinput.js +1 -1
  64. package/dist/progressbar-BS_oawSB.js +150 -0
  65. package/dist/progressbar-CuXkbAhJ.cjs +32 -0
  66. package/dist/ref-DCOsLZQg.cjs +13 -0
  67. package/dist/ref-DuFGTLVX.js +142 -0
  68. package/dist/state-BfyXV7EL.js +12 -0
  69. package/dist/state-SKYD8kRO.cjs +5 -0
  70. package/dist/stringutils-CkVRq4jP.cjs +1 -0
  71. package/dist/stringutils-DJjRa8dG.js +7 -0
  72. package/dist/tag-CGy2mSLE.cjs +17 -0
  73. package/dist/tag-DGFgUF3l.js +150 -0
  74. package/dist/{textarea-BTpJjEhO.js → textarea-BAGWR1Hi.js} +29 -29
  75. package/dist/textarea-BiUrhAlk.cjs +48 -0
  76. package/dist/{textinput-BIhQEr8z.cjs → textinput-CHOR5PPp.cjs} +2 -2
  77. package/dist/{textinput-CVo5wG14.js → textinput-pJ3N8m6g.js} +23 -23
  78. package/package.json +2 -2
  79. package/src/components/alert/alert.ts +115 -0
  80. package/src/components/alert/index.ts +4 -113
  81. package/src/components/calendar/calendar.ts +711 -0
  82. package/src/components/calendar/index.ts +3 -711
  83. package/src/components/card/card.ts +78 -0
  84. package/src/components/card/index.ts +4 -77
  85. package/src/components/datepicker/datepicker.ts +619 -0
  86. package/src/components/datepicker/index.ts +3 -618
  87. package/src/components/helptext/helptext.ts +2 -2
  88. package/src/components/icon/icon.ts +99 -0
  89. package/src/components/icon/index.ts +3 -98
  90. package/src/components/index.ts +29 -15
  91. package/src/components/input-wrapper/input-wrapper.ts +2 -2
  92. package/src/components/link/index.ts +3 -56
  93. package/src/components/link/link.ts +57 -0
  94. package/src/components/linkcard/index.ts +1 -1
  95. package/src/components/linkcard/linkcard.ts +5 -6
  96. package/src/components/messagebox/index.ts +4 -69
  97. package/src/components/messagebox/messagebox.ts +69 -0
  98. package/src/components/modal/index.ts +0 -1
  99. package/src/components/modal/modal.ts +5 -7
  100. package/src/components/progressbar/index.ts +12 -0
  101. package/src/components/progressbar/progressbar.ts +144 -0
  102. package/src/components/tag/index.ts +4 -109
  103. package/src/components/tag/tag.ts +118 -0
  104. package/src/components/textarea/textarea.ts +5 -4
  105. package/src/components/textinput/textinput.ts +3 -3
  106. package/dist/converters-DNCwIFwr.js +0 -17
  107. package/dist/converters-DhM11VlY.cjs +0 -1
  108. package/dist/custom-element-B-TlBwRu.cjs +0 -9
  109. package/dist/custom-element-CWfU4dcr.js +0 -38
  110. package/dist/element.d.ts +0 -8
  111. package/dist/helptext-DBolvFI4.js +0 -72
  112. package/dist/helptext-_fMLOOCL.cjs +0 -23
  113. package/dist/index-CR7t1zY9.cjs +0 -238
  114. package/dist/index-CmTjXoAb.cjs +0 -9
  115. package/dist/index-RwtTBIhT.js +0 -88
  116. package/dist/index-tvpcg-ad.cjs +0 -108
  117. package/dist/input-wrapper-DX41tnbj.cjs +0 -46
  118. package/dist/linkcard-Det6CJ5D.cjs +0 -13
  119. package/dist/pkt-component-template.cjs +0 -29
  120. package/dist/pkt-component-template.js +0 -99
  121. package/dist/pkt-element.cjs +0 -1
  122. package/dist/pkt-element.js +0 -5
  123. package/dist/ref-C2yPtMJA.cjs +0 -13
  124. package/dist/ref-CaiKp3S2.js +0 -202
  125. package/dist/textarea-B45ZZYpx.cjs +0 -48
  126. package/src/components/component-template/index.ts +0 -129
  127. package/src/components/element/index.ts +0 -353
  128. /package/dist/{component-template.d.ts → progressbar.d.ts} +0 -0
package/dist/pkt-card.js CHANGED
@@ -1,170 +1,6 @@
1
- import { e as g } from "./class-map-CBvUV2N3.js";
2
- import { t as h } from "./custom-element-CWfU4dcr.js";
3
- import { P as k, x as r, E as u, n as a } from "./index-CFDwiDTU.js";
4
- import { e as m, P as y, n as f } from "./ref-CaiKp3S2.js";
5
- import "./index-RwtTBIhT.js";
6
- import "./pkt-tag.js";
7
- const b = "pkt-card", v = !0, $ = {
8
- heading: {
9
- type: "string",
10
- name: "Heading",
11
- description: "Tittel på kortet"
12
- },
13
- subheading: {
14
- type: "string",
15
- name: "Subheading",
16
- description: "Undertittel på kortet"
17
- },
18
- tags: {
19
- type: "array",
20
- description: "Liste av tags på kortet. Tar inn en array med objekter med følgende stringproperties: skin, iconName, ariaLabel, text",
21
- name: "Tags",
22
- items: {
23
- type: "object",
24
- properties: {
25
- skin: {
26
- type: [
27
- "blue",
28
- "green",
29
- "red",
30
- "yellow"
31
- ],
32
- description: "Farge på tag"
33
- },
34
- iconName: {
35
- type: "icon",
36
- description: "Id på ikonet du ønsker å bruke til tag"
37
- },
38
- ariaLabel: {
39
- type: "string",
40
- description: "Tekst for aria-label"
41
- },
42
- text: {
43
- type: "string",
44
- description: "Tekst på tag",
45
- required: !0
46
- }
47
- }
48
- }
49
- },
50
- skin: {
51
- type: [
52
- "outlined",
53
- "gray",
54
- "blue",
55
- "beige",
56
- "green"
57
- ],
58
- name: "Skin",
59
- description: "Farge på kortet",
60
- default: "outlined"
61
- },
62
- direction: {
63
- type: [
64
- "landscape",
65
- "portrait"
66
- ],
67
- name: "Direction",
68
- description: "Retningen innholdet skal ligge i forhold til kortet",
69
- default: "portrait"
70
- },
71
- image: {
72
- type: "object",
73
- name: "Bilde",
74
- description: "Bilde på kortet. Tar inn et objekt av typen {src: string, alt: string}. src er stien til bildet, og alt er tekst for aria-label.",
75
- properties: {
76
- src: {
77
- type: "string",
78
- description: "Bilde på kortet",
79
- required: !0
80
- },
81
- alt: {
82
- type: "string",
83
- description: "Tekst for aria-label",
84
- required: !0
85
- }
86
- }
87
- }
88
- }, _ = {
89
- default: {
90
- description: "Innholdet i kortet"
91
- }
92
- }, c = {
93
- name: b,
94
- "css-class": "pkt-card",
95
- isElement: v,
96
- props: $,
97
- slots: _
98
- };
99
- var S = Object.defineProperty, x = Object.getOwnPropertyDescriptor, s = (n, e, p, o) => {
100
- for (var i = o > 1 ? void 0 : o ? x(e, p) : e, l = n.length - 1, d; l >= 0; l--)
101
- (d = n[l]) && (i = (o ? d(e, p, i) : d(i)) || i);
102
- return o && i && S(e, p, i), i;
103
- };
104
- let t = class extends k {
105
- constructor() {
106
- super(), this.defaultSlot = m(), this.skin = c.props.skin.default, this.direction = c.props.direction.default, this.image = {
107
- src: "",
108
- alt: ""
109
- }, this.heading = "", this.subheading = "", this.tags = [], this.slotController = new y(this, this.defaultSlot);
110
- }
111
- connectedCallback() {
112
- super.connectedCallback();
113
- }
114
- render() {
115
- const n = {
116
- "pkt-card": !0,
117
- [`pkt-card--${this.skin}`]: this.skin,
118
- [`pkt-card--${this.direction}`]: this.direction
119
- };
120
- return r`
121
- <div class=${g(n)}>
122
- ${this.image.src && r`
123
- <div class="pkt-card__image">
124
- <img src=${this.image.src} alt=${this.image.alt || ""} />
125
- </div>
126
- `}
127
- <div class="pkt-card__wrapper">
128
- ${this.tags.length > 0 ? r`
129
- <div class="pkt-card__tags">
130
- ${this.tags.map(
131
- (e) => r`
132
- <pkt-tag textStyle="normal-text" size="medium" skin=${e.skin}>
133
- ${e.text}
134
- </pkt-tag>
135
- `
136
- )}
137
- </div>
138
- ` : u}
139
- ${this.heading && r`<h3 class="pkt-txt-30-medium">${this.heading}</h3>`}
140
- ${this.subheading && r`<p class="pkt-txt-20-light">${this.subheading}</p>`}
141
- ${this.defaultSlot && r`<div class="pkt-card__content" ${f(this.defaultSlot)}></div>`}
142
- </div>
143
- </div>
144
- `;
145
- }
146
- };
147
- s([
148
- a({ type: String, reflect: !0 })
149
- ], t.prototype, "skin", 2);
150
- s([
151
- a({ type: String, reflect: !0 })
152
- ], t.prototype, "direction", 2);
153
- s([
154
- a({ type: Object, reflect: !0 })
155
- ], t.prototype, "image", 2);
156
- s([
157
- a({ type: String, reflect: !0 })
158
- ], t.prototype, "heading", 2);
159
- s([
160
- a({ type: String, reflect: !0 })
161
- ], t.prototype, "subheading", 2);
162
- s([
163
- a({ type: Array, reflect: !0 })
164
- ], t.prototype, "tags", 2);
165
- t = s([
166
- h("pkt-card")
167
- ], t);
1
+ import { P as a } from "./card-kWt0BA2a.js";
2
+ const r = a;
168
3
  export {
169
- t as PktCard
4
+ a as PktCard,
5
+ r as default
170
6
  };
@@ -1,154 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./index-CR7t1zY9.cjs"),b=require("./custom-element-B-TlBwRu.cjs"),r=require("./ref-C2yPtMJA.cjs"),y=require("./class-map-a5HUzP83.cjs"),T=require("./converters-DhM11VlY.cjs"),m=require("./index-tvpcg-ad.cjs");require("./input-wrapper-DX41tnbj.cjs");require("./index-CmTjXoAb.cjs");require("./pkt-tag.cjs");/**
2
- * @license
3
- * Copyright 2017 Google LLC
4
- * SPDX-License-Identifier: BSD-3-Clause
5
- */const R=(o,e,t)=>{const i=new Map;for(let a=e;a<=t;a++)i.set(o[a],a);return i},S=b.e(class extends b.i{constructor(o){if(super(o),o.type!==b.t$1.CHILD)throw Error("repeat() can only be used in text expressions")}dt(o,e,t){let i;t===void 0?t=e:e!==void 0&&(i=e);const a=[],n=[];let l=0;for(const c of o)a[l]=i?i(c,l):l,n[l]=t(c,l),l++;return{values:n,keys:a}}render(o,e,t){return this.dt(o,e,t).values}update(o,[e,t,i]){const a=r.p(o),{values:n,keys:l}=this.dt(e,t,i);if(!Array.isArray(a))return this.ut=l,n;const c=this.ut??(this.ut=[]),g=[];let $,w,u=0,h=a.length-1,d=0,f=n.length-1;for(;u<=h&&d<=f;)if(a[u]===null)u++;else if(a[h]===null)h--;else if(c[u]===l[d])g[d]=r.v(a[u],n[d]),u++,d++;else if(c[h]===l[f])g[f]=r.v(a[h],n[f]),h--,f--;else if(c[u]===l[f])g[f]=r.v(a[u],n[f]),r.r(o,g[f+1],a[u]),u++,f--;else if(c[h]===l[d])g[d]=r.v(a[h],n[d]),r.r(o,a[u],a[h]),h--,d++;else if($===void 0&&($=R(l,d,f),w=R(c,u,h)),$.has(c[u]))if($.has(c[h])){const v=w.get(l[d]),x=v!==void 0?a[v]:null;if(x===null){const D=r.r(o,a[u]);r.v(D,n[d]),g[d]=D}else g[d]=r.v(x,n[d]),r.r(o,a[u],x),a[v]=null;d++}else r.M(a[h]),h--;else r.M(a[u]),u++;for(;d<=f;){const v=r.r(o,g[f+1]);r.v(v,n[d]),g[d++]=v}for(;u<=h;){const v=a[u++];v!==null&&r.M(v)}return this.ut=l,r.m(o,g),s.T}}),P="pkt-datepicker",I=!0,_={name:{type:"string",name:"Navn",description:"Navn som sendes brukes i skjema ved innsending"},label:{type:"string",name:"Etikett",description:"Tekst som vises over datovelgeren"},helptext:{type:"string",name:"Hjelpetekst",description:"Hjelpetekst som vises over datovelgeren"},helptextDropdown:{type:"string",name:"Utvidet hjelpetekst",description:"Hjelpetekst som vises i en lukket boks man kan åpne"},helptextDropdownButton:{type:"string",name:"Knappetekst for hjelpetekst",description:"Tekst som vises på knappen for å åpne/lukke utvidet hjelpetekst",default:"Les mer"},dateformat:{name:"Datoformat",description:"Datoformat for valgte datoer i flervalgsmodus",type:"string",default:"dd.MM.yyyy"},currentmonth:{name:"Nåværende måned",type:"ISOdatestring",description:"Måneden som skal vises i datovelgeren"},value:{name:"Verdi",type:"ISOdatestring",variant:"multiple",reflect:!0,description:"Kommaseparert liste av valgte datoer"},excludeweekdays:{name:"Utelat ukedager",type:"string",description:"Kommaseparert liste over ukedager (1-7) som skal ekskluderes"},excludedates:{name:"Utelat datoer",type:"ISOdatestring",variant:"multiple",description:"Kommaseparert liste over datoer som skal ekskluderes"},min:{name:"Tidligst tillatt",type:"ISOdatestring",default:null,description:"Første tillate dato i datovelgeren"},max:{name:"Senest tillatt",type:"ISOdatestring",default:null,description:"Siste tillate dato i datovelgeren"},weeknumbers:{name:"Vis ukenummer",type:"boolean",reflect:!0,default:!1,description:"Vis ukedager i datovelgerens kalender"},withcontrols:{name:"Med kontroller",type:"boolean",reflect:!0,default:!1,description:"Vis avanserte velgere for måned og år"},multiple:{name:"Flervalg",type:"boolean",reflect:!0,default:!1,description:"Tillat valg av flere enn én dato i samme velger"},maxlength:{name:"Maks antall",description:"Maks valgte datoer i flervalgsmodus",type:"number"},range:{name:"Datotidsrom",type:"boolean",reflect:!0,default:!1,description:"Tillat å velge et tidsrom mellom to datoer i samme velger"},hasError:{type:"boolean",name:"Feil",default:!1,description:"Viser feiltilstand for datovelgeren"},errorMessage:{type:"string",name:"Feilmelding",description:"Tekst som vises under datovelgeren ved feiltilstand"},disabled:{type:"boolean",name:"Deaktivert",default:!1,reflect:!0,description:"Er datovelgeren deaktivert?"},fullwidth:{type:"boolean",name:"Full bredde",default:!1,reflect:!0,description:"Skal datovelgeren ta opp hele bredden?"},required:{type:"boolean",name:"Påkrevd",default:!1,reflect:!0,description:"Er datovelgeren påkrevd?"},requiredTag:{type:"boolean",name:"Vise påkrevd-merking",default:!1,description:"Viser en merking som indikerer at datovelgeren er påkrevd"},requiredText:{type:"string",name:"Påkrevd-tekst",default:"Må fylles ut",description:"Tekst som vises i påkrevd-merkingen"},optionalTag:{type:"boolean",name:"Vise valgfritt-merking",default:!1,description:"Viser en merking som indikerer at datovelgeren er valgfri"},optionalText:{type:"string",name:"Valgfritt-tekst",default:"Valgfritt",description:"Tekst som vises i valgfritt-merkingen"},useWrapper:{type:"boolean",name:"Bruk wrapper",description:"Indikerer at feltet skal ha synlig label og hjelpetekst",displayAsFalse:!0,default:!0},id:{type:"string",name:"ID",description:"Unik identifikasjon for datovelgeren"}},O={change:{type:"Event",description:"Returnerer valgt dato som streng i ISO-format"},"value-change":{type:"CustomEvent",description:"Returnerer en <code>array</code> med valgte datoer i ISO-format"},toggleHelpText:{type:"CustomEvent",description:"Returnerer <code>event.detail { isOpen: true }</code> eller <code>event.detail { isOpen: false }</code> når hjelpeteksten åpnes eller lukkes"}},k={name:P,"css-class":"pkt-datepicker",isElement:I,props:_,events:O};var E=Object.defineProperty,M=Object.getOwnPropertyDescriptor,p=(o,e,t,i)=>{for(var a=i>1?void 0:i?M(e,t):e,n=o.length-1,l;n>=0;n--)(l=o[n])&&(a=(i?l(e,t,a):l(a))||a);return i&&a&&E(e,t,a),a};const C=o=>new Promise(e=>setTimeout(e,o));exports.PktDatepicker=class extends s.PktInputElement{constructor(){super(...arguments),this.value="",this._value=this.value?Array.isArray(this.value)?this.value:this.value.split(","):[],this.label="Datovelger",this.dateformat=k.props.dateformat.default,this.multiple=k.props.multiple.default,this.maxlength=null,this.range=k.props.range.default,this.showRangeLabels=!1,this.min=null,this.max=null,this.weeknumbers=k.props.weeknumbers.default,this.withcontrols=k.props.withcontrols.default,this.excludedates=[],this.excludeweekdays=[],this.currentmonth=null,this.calendarOpen=!1,this.timezone="Europe/Oslo",this.inputClasses={},this.buttonClasses={},this.inputRef=r.e(),this.inputRefTo=r.e(),this.btnRef=r.e(),this.calRef=r.e(),this.popupRef=r.e(),this.addToSelected=e=>{const t=e.target;if(!t.value)return;const i=this.min?m.newDate(this.min):null,a=this.max?m.newDate(this.max):null,n=m.newDate(t.value.split(",")[0]);n&&!isNaN(n.getTime())&&(!i||n>=i)&&(!a||n<=a)&&this.calRef.value&&this.calRef.value.handleDateSelect(n),t.value=""}}async connectedCallback(){super.connectedCallback(),this.isMobileSafari=/iP(ad|od|hone)/i.test(window.navigator.userAgent)&&!!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/),this.inputType=this.isMobileSafari?"text":"date",document&&document.body.addEventListener("click",e=>{var t,i;(t=this.inputRef)!=null&&t.value&&((i=this.btnRef)!=null&&i.value)&&!this.inputRef.value.contains(e.target)&&!(this.inputRefTo.value&&this.inputRefTo.value.contains(e.target))&&!this.btnRef.value.contains(e.target)&&!e.target.closest(".pkt-calendar-popup")&&this.calendarOpen&&(this.onBlur(),this.hideCalendar())}),this.value.length&&this._value.length===0&&(this._value=Array.isArray(this.value)?this.value:this.value.split(",")),this.min=this.min||k.props.min.default,this.max=this.max||k.props.max.default,typeof this.excludedates=="string"&&(this.excludedates=this.excludedates.split(",")),typeof this.excludeweekdays=="string"&&(this.excludeweekdays=this.excludeweekdays.split(",")),(this.multiple||this.range)&&this.name&&!this.name.endsWith("[]")&&(this.name=this.name+"[]"),this.calendarOpen&&(await C(20),this.handleCalendarPosition())}disconnectedCallback(){super.disconnectedCallback(),document&&document.body.removeEventListener("click",e=>{var t,i;(t=this.inputRef)!=null&&t.value&&((i=this.btnRef)!=null&&i.value)&&!this.inputRef.value.contains(e.target)&&!this.btnRef.value.contains(e.target)&&this.hideCalendar()})}attributeChangedCallback(e,t,i){if(e==="value"){if(this.range&&(i==null?void 0:i.split(",").length)===1)return;this.value!==t&&this.valueChanged(i,t)}e==="excludedates"&&typeof this.excludedates=="string"&&(this.excludedates=(i==null?void 0:i.split(","))??[]),e==="excludeweekdays"&&typeof this.excludeweekdays=="string"&&(this.excludeweekdays=(i==null?void 0:i.split(","))??[]),super.attributeChangedCallback(e,t,i)}updated(e){if(e.has("value")){if(this.range&&this.value.length===1)return;this.valueChanged(this.value,e.get("value"))}super.updated(e)}renderInput(){return s.x`
6
- <input
7
- class="${y.e(this.inputClasses)}"
8
- .type=${this.inputType}
9
- id="${this.id}-input"
10
- .value=${this._value[0]??""}
11
- min=${this.min}
12
- max=${this.max}
13
- @click=${e=>{e.preventDefault(),this.showCalendar()}}
14
- ?disabled=${this.disabled}
15
- @keydown=${e=>{var t;(e.key===","||e.key==="Enter")&&((t=this.inputRef.value)==null||t.blur()),(e.key==="Space"||e.key===" ")&&(e.preventDefault(),this.toggleCalendar(e))}}
16
- @input=${e=>{this.onInput(),e.stopImmediatePropagation()}}
17
- @focus=${()=>{this.onFocus(),this.isMobileSafari&&this.showCalendar()}}
18
- @blur=${e=>{var t;(t=this.calRef.value)!=null&&t.contains(e.relatedTarget)||this.onBlur(),this.manageValidity(e.target),this.value=e.target.value}}
19
- @change=${e=>{e.stopImmediatePropagation()}}
20
- ${r.n(this.inputRef)}
21
- />
22
- `}renderRangeInput(){const e={"pkt-input-prefix":this.showRangeLabels,"pkt-hide":!this.showRangeLabels};return s.x`
23
- ${this.showRangeLabels?s.x` <div class="pkt-input-prefix">${this.strings.generic.from}</div> `:s.E}
24
- <input
25
- class=${y.e(this.inputClasses)}
26
- .type=${this.inputType}
27
- id="${this.id}-input"
28
- .value=${this._value[0]??""}
29
- min=${this.min}
30
- max=${this.max}
31
- ?disabled=${this.disabled}
32
- @click=${t=>{t.preventDefault(),this.showCalendar()}}
33
- @keydown=${t=>{var i;(t.key===","||t.key==="Enter")&&((i=this.inputRef.value)==null||i.blur()),(t.key==="Space"||t.key===" ")&&(t.preventDefault(),this.toggleCalendar(t))}}
34
- @input=${t=>{this.onInput(),t.stopImmediatePropagation()}}
35
- @focus=${()=>{this.onFocus(),this.isMobileSafari&&this.showCalendar()}}
36
- @blur=${t=>{var i,a;if(t.target.value){this.manageValidity(t.target);const n=m.fromISOToDate(t.target.value);n&&this._value[0]!==t.target.value&&this._value[1]&&(this.clearInputValue(),(a=(i=this.calRef)==null?void 0:i.value)==null||a.handleDateSelect(n))}else this._value[0]&&this.clearInputValue()}}
37
- @change=${t=>{t.stopImmediatePropagation()}}
38
- ${r.n(this.inputRef)}
39
- />
40
- <div class="${y.e(e)}" id="${this.id}-to-label">
41
- ${this.strings.generic.to}
42
- </div>
43
- ${this.showRangeLabels?s.E:s.x` <div class="pkt-input-separator">–</div> `}
44
- <input
45
- class=${y.e(this.inputClasses)}
46
- .type=${this.inputType}
47
- id="${this.id}-to"
48
- aria-labelledby="${this.id}-to-label"
49
- .value=${this._value[1]??""}
50
- min=${this.min}
51
- max=${this.max}
52
- ?disabled=${this.disabled}
53
- @click=${t=>{t.preventDefault(),this.showCalendar()}}
54
- @keydown=${t=>{var i;(t.key===","||t.key==="Enter")&&((i=this.inputRefTo.value)==null||i.blur()),(t.key==="Space"||t.key===" ")&&(t.preventDefault(),this.toggleCalendar(t))}}
55
- @input=${t=>{this.onInput(),t.stopImmediatePropagation()}}
56
- @focus=${()=>{this.onFocus(),this.isMobileSafari&&this.showCalendar()}}
57
- @blur=${t=>{var i,a,n;if((i=this.calRef.value)!=null&&i.contains(t.relatedTarget)||this.onBlur(),t.target.value){this.manageValidity(t.target);const l=t.target.value;this.min&&this.min>l?this.internals.setValidity({rangeUnderflow:!0},this.strings.forms.messages.rangeUnderflow,t.target):this.max&&this.max<l&&this.internals.setValidity({rangeOverflow:!0},this.strings.forms.messages.rangeOverflow,t.target);const c=m.fromISOToDate(t.target.value);c&&this._value[1]!==m.formatISODate(c)&&((n=(a=this.calRef)==null?void 0:a.value)==null||n.handleDateSelect(c))}}}
58
- @change=${t=>{t.stopImmediatePropagation()}}
59
- ${r.n(this.inputRefTo)}
60
- />
61
- `}renderMultipleInput(){return s.x`
62
- <input
63
- class=${y.e(this.inputClasses)}
64
- .type=${this.inputType}
65
- id="${this.id}-input"
66
- min=${this.min||s.E}
67
- max=${this.max||s.E}
68
- ?disabled=${this.disabled||this.maxlength&&this._value.length>=this.maxlength}
69
- @click=${e=>{e.preventDefault(),this.showCalendar()}}
70
- @blur=${e=>{var t;(t=this.calRef.value)!=null&&t.contains(e.relatedTarget)||this.onBlur(),this.addToSelected(e)}}
71
- @input=${e=>{this.onInput(),e.stopImmediatePropagation()}}
72
- @focus=${()=>{this.onFocus(),this.isMobileSafari&&this.showCalendar()}}
73
- @keydown=${e=>{(e.key===","||e.key==="Enter")&&(e.preventDefault(),this.addToSelected(e)),(e.key==="Space"||e.key===" ")&&(e.preventDefault(),this.toggleCalendar(e))}}
74
- @change=${e=>{e.stopImmediatePropagation()}}
75
- ${r.n(this.inputRef)}
76
- />
77
- `}renderTags(){return s.x`
78
- <div class="pkt-datepicker__tags" aria-live="polite">
79
- ${this._value[0]?S(this._value??[],e=>e,e=>s.x`
80
- <pkt-tag
81
- .id="${this.id+e+"-tag"}"
82
- closeTag
83
- ariaLabel="${this.strings.calendar.deleteDate} ${m.fromISOtoLocal(e,this.dateformat)}"
84
- @close=${()=>{var t;return(t=this.calRef.value)==null?void 0:t.handleDateSelect(m.fromISOToDate(e))}}
85
- ><time datetime="${e}">${m.fromISOtoLocal(e,this.dateformat)}</time></pkt-tag
86
- >
87
- `):s.E}
88
- </div>
89
- `}renderCalendar(){return s.x`<div
90
- class="pkt-calendar-popup pkt-${this.calendarOpen?"show":"hide"}"
91
- @focusout=${e=>{this.calendarOpen&&this.handleFocusOut(e)}}
92
- id="${this.id}-popup"
93
- ${r.n(this.popupRef)}
94
- >
95
- <pkt-calendar
96
- id="${this.id}-calendar"
97
- ?multiple=${this.multiple}
98
- ?range=${this.range}
99
- ?weeknumbers=${this.weeknumbers}
100
- ?withcontrols=${this.withcontrols}
101
- .maxMultiple=${this.maxlength}
102
- .selected=${this._value}
103
- .earliest=${this.min}
104
- .latest=${this.max}
105
- .excludedates=${Array.isArray(this.excludedates)?this.excludedates:this.excludedates.split(",")}
106
- .excludeweekdays=${this.excludeweekdays}
107
- .currentmonth=${this.currentmonth?m.newDate(this.currentmonth):null}
108
- @date-selected=${e=>{this.value=!this.multiple&&!this.range?e.detail[0]:e.detail,this._value=e.detail,this.inputRef.value&&(this.range&&this.inputRefTo.value?(this.inputRef.value.value=this._value[0]??"",this.inputRefTo.value.value=this._value[1]??""):this.multiple||(this.inputRef.value.value=this._value.length?this._value[0]:""))}}
109
- @close=${()=>{this.onBlur(),this.hideCalendar()}}
110
- ${r.n(this.calRef)}
111
- ></pkt-calendar>
112
- </div>`}render(){return this.inputClasses={"pkt-input":!0,"pkt-datepicker__input":!0,"pkt-input--fullwidth":this.fullwidth,"pkt-datepicker--hasrangelabels":this.showRangeLabels,"pkt-datepicker--multiple":this.multiple,"pkt-datepicker--range":this.range},this.buttonClasses={"pkt-input-icon":!0,"pkt-btn":!0,"pkt-btn--icon-only":!0,"pkt-btn--tertiary":!0},s.x`
113
- <pkt-input-wrapper
114
- label="${this.label}"
115
- forId="${this.id}-input"
116
- ?counter=${this.multiple&&!!this.maxlength}
117
- .counterCurrent=${this.value?this._value.length:0}
118
- .counterMaxLength=${this.maxlength}
119
- ?disabled=${this.disabled}
120
- ?hasError=${this.hasError}
121
- ?required=${this.required}
122
- ?optionalTag=${this.optionalTag}
123
- ?requiredTag=${this.requiredTag}
124
- ?useWrapper=${this.useWrapper}
125
- .optionalText=${this.optionalText}
126
- .requiredText=${this.requiredText}
127
- .errorMessage=${this.errorMessage}
128
- .helptext=${this.helptext}
129
- .helptextDropdown=${this.helptextDropdown}
130
- .helptextDropdownButton=${this.helptextDropdownButton}
131
- .ariaDescribedBy=${this.ariaDescribedBy}
132
- class="pkt-datepicker"
133
- >
134
- ${this.multiple?this.renderTags():s.E}
135
- <div
136
- class="pkt-datepicker__inputs ${this.range&&this.showRangeLabels?"pkt-input__range-inputs":""}"
137
- >
138
- <div class="pkt-input__container">
139
- ${this.range?this.renderRangeInput():this.multiple?this.renderMultipleInput():this.renderInput()}
140
- <button
141
- class="${y.e(this.buttonClasses)}"
142
- type="button"
143
- @click=${this.toggleCalendar}
144
- ?disabled=${this.disabled}
145
- ${r.n(this.btnRef)}
146
- >
147
- <pkt-icon name="calendar"></pkt-icon>
148
- <span class="pkt-btn__text">${this.strings.calendar.buttonAltText}</span>
149
- </button>
150
- </div>
151
- </div>
152
- </pkt-input-wrapper>
153
- ${this.renderCalendar()}
154
- `}handleCalendarPosition(){var e;if(this.popupRef.value&&this.inputRef.value){const t=this.multiple&&!!this.maxlength,i=((e=this.inputRef.value.parentElement)==null?void 0:e.getBoundingClientRect())||this.inputRef.value.getBoundingClientRect(),a=t?i.height+30:i.height,n=this.popupRef.value.getBoundingClientRect().height;let l=t?"calc(100% - 30px)":"100%";i&&i.top+n>window.innerHeight&&i.top-n>0&&(l=`calc(100% - ${a}px - ${n}px)`),this.popupRef.value.style.top=l}}handleFocusOut(e){this.contains(e.target)||(this.onBlur(),this.hideCalendar())}async showCalendar(){var e;this.calendarOpen=!0,await C(20),this.handleCalendarPosition(),this.isMobileSafari&&((e=this.calRef.value)==null||e.focusOnCurrentDate())}hideCalendar(){this.calendarOpen=!1}async toggleCalendar(e){e.preventDefault(),this.calendarOpen?this.hideCalendar():this.showCalendar()}};p([s.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"value",2);p([s.n({type:Array})],exports.PktDatepicker.prototype,"_value",2);p([s.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"label",2);p([s.n({type:String})],exports.PktDatepicker.prototype,"dateformat",2);p([s.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"multiple",2);p([s.n({type:Number,reflect:!0})],exports.PktDatepicker.prototype,"maxlength",2);p([s.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"range",2);p([s.n({type:Boolean})],exports.PktDatepicker.prototype,"showRangeLabels",2);p([s.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"min",2);p([s.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"max",2);p([s.n({type:Boolean})],exports.PktDatepicker.prototype,"weeknumbers",2);p([s.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"withcontrols",2);p([s.n({converter:T.converters.csvToArray})],exports.PktDatepicker.prototype,"excludedates",2);p([s.n({converter:T.converters.csvToArray})],exports.PktDatepicker.prototype,"excludeweekdays",2);p([s.n({type:String})],exports.PktDatepicker.prototype,"currentmonth",2);p([s.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"calendarOpen",2);p([s.n({type:String})],exports.PktDatepicker.prototype,"timezone",2);p([s.r()],exports.PktDatepicker.prototype,"inputClasses",2);p([s.r()],exports.PktDatepicker.prototype,"buttonClasses",2);exports.PktDatepicker=p([b.t("pkt-datepicker")],exports.PktDatepicker);
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./datepicker-BHepKxof.cjs"),t=e.PktDatepicker;Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>e.PktDatepicker});exports.default=t;