@oslokommune/punkt-elements 13.2.4 → 13.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +367 -32
- package/dist/{card-Djnd-pgo.js → card-BI1NZONj.js} +9 -9
- package/dist/{card-Bx36j0q4.cjs → card-uccD6Pnv.cjs} +2 -2
- package/dist/{combobox-B7cWV_90.cjs → combobox-BhcqC30d.cjs} +1 -1
- package/dist/{combobox-DoK5e7Rc.js → combobox-D9dGKWuZ.js} +1 -1
- package/dist/{datepicker-BhrUneAP.cjs → datepicker-B9rhz_AF.cjs} +20 -20
- package/dist/{datepicker-CEfh3TTA.js → datepicker-CYOn3tRm.js} +12 -16
- package/dist/index.d.ts +1 -1
- package/dist/{link-C76H6Qf1.js → link-AIyVfcyH.js} +15 -18
- package/dist/link-Cjl0xwSq.cjs +7 -0
- package/dist/{modal-BdA5aWGU.cjs → modal-CRtxhCaP.cjs} +7 -6
- package/dist/{modal-DcXPnFus.js → modal-Zj8yRX3K.js} +22 -26
- package/dist/pkt-card.cjs +1 -1
- package/dist/pkt-card.js +1 -1
- package/dist/pkt-combobox.cjs +1 -1
- package/dist/pkt-combobox.js +1 -1
- package/dist/pkt-datepicker.cjs +1 -1
- package/dist/pkt-datepicker.js +1 -1
- package/dist/pkt-index.cjs +1 -1
- package/dist/pkt-index.js +7 -7
- package/dist/pkt-link.cjs +1 -1
- package/dist/pkt-link.js +1 -1
- package/dist/pkt-modal.cjs +1 -1
- package/dist/pkt-modal.js +1 -1
- package/dist/pkt-select.cjs +1 -1
- package/dist/pkt-select.js +1 -1
- package/dist/pkt-tag.cjs +1 -1
- package/dist/pkt-tag.js +1 -1
- package/dist/{select-CsgDatCa.js → select-CJS_CIKv.js} +1 -0
- package/dist/{select-DUeTm8ac.cjs → select-Dkl0KhGW.cjs} +1 -1
- package/dist/{tag-DPk3fpEg.cjs → tag-Bbs0U_Au.cjs} +1 -1
- package/package.json +4 -4
- package/src/components/card/card.ts +1 -1
- package/src/components/datepicker/datepicker.ts +22 -4
- package/src/components/link/link.ts +1 -1
- package/src/components/linkcard/linkcard.ts +2 -2
- package/src/components/modal/modal.ts +2 -8
- package/src/components/select/select.ts +1 -0
- package/dist/link-DTkjNlmy.cjs +0 -7
- package/dist/{tag-BWm6s48d.js → tag-DyXzTY68.js} +3 -3
|
@@ -4,7 +4,7 @@ import { P as m, E as d, x as t, n as i, a as u } from "./element-CgEWt74-.js";
|
|
|
4
4
|
import { P as $ } from "./pkt-slot-controller-BPGj-LC5.js";
|
|
5
5
|
import { e as y, n as _ } from "./ref-BBYSqgeW.js";
|
|
6
6
|
import "./icon-CC1js8eR.js";
|
|
7
|
-
import "./tag-
|
|
7
|
+
import "./tag-DyXzTY68.js";
|
|
8
8
|
const b = {
|
|
9
9
|
layout: {
|
|
10
10
|
default: "vertical"
|
|
@@ -18,10 +18,10 @@ const b = {
|
|
|
18
18
|
}, k = {
|
|
19
19
|
props: b
|
|
20
20
|
};
|
|
21
|
-
var f = Object.defineProperty, S = Object.getOwnPropertyDescriptor, a = (r, s,
|
|
22
|
-
for (var n =
|
|
23
|
-
(h = r[l]) && (n = (
|
|
24
|
-
return
|
|
21
|
+
var f = Object.defineProperty, S = Object.getOwnPropertyDescriptor, a = (r, s, o, p) => {
|
|
22
|
+
for (var n = p > 1 ? void 0 : p ? S(s, o) : s, l = r.length - 1, h; l >= 0; l--)
|
|
23
|
+
(h = r[l]) && (n = (p ? h(s, o, n) : h(n)) || n);
|
|
24
|
+
return p && n && f(s, o, n), n;
|
|
25
25
|
};
|
|
26
26
|
let e = class extends m {
|
|
27
27
|
//Constructor
|
|
@@ -38,18 +38,18 @@ let e = class extends m {
|
|
|
38
38
|
// Main render method
|
|
39
39
|
// prettier-ignore
|
|
40
40
|
render() {
|
|
41
|
-
var
|
|
41
|
+
var p, n;
|
|
42
42
|
const r = {
|
|
43
43
|
"pkt-card": !0,
|
|
44
44
|
[`pkt-card--${this.skin}`]: this.skin,
|
|
45
45
|
[`pkt-card--${this.layout}`]: this.layout,
|
|
46
46
|
[`pkt-card--padding-${this.padding}`]: this.padding,
|
|
47
47
|
"pkt-card--border-on-hover": this.borderOnHover
|
|
48
|
-
}, s = ((
|
|
48
|
+
}, s = ((p = this.ariaLabel) == null ? void 0 : p.trim()) || (this.heading ? `${this.heading} lenkekort` : "lenkekort"), o = ((n = this.ariaLabel) == null ? void 0 : n.trim()) || (this.heading ? this.heading : "kort");
|
|
49
49
|
return t`
|
|
50
50
|
<article
|
|
51
51
|
class=${g(r)}
|
|
52
|
-
aria-label=${c(this.clickCardLink ? s :
|
|
52
|
+
aria-label=${c(this.clickCardLink ? s : o)}
|
|
53
53
|
>
|
|
54
54
|
${this.renderImage()}
|
|
55
55
|
<div class="pkt-card__wrapper">
|
|
@@ -151,7 +151,7 @@ let e = class extends m {
|
|
|
151
151
|
skin=${c(s.skin)}
|
|
152
152
|
iconName=${c(s.iconName)}
|
|
153
153
|
>
|
|
154
|
-
|
|
154
|
+
<span>${s.text}</span>
|
|
155
155
|
</pkt-tag>
|
|
156
156
|
`
|
|
157
157
|
)}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const l=require("./class-map-BBG2gMX4.cjs"),p=require("./if-defined-Cni-RHLS.cjs"),t=require("./element-6DBpyGQm.cjs"),g=require("./pkt-slot-controller-BzddBp7z.cjs"),c=require("./ref-iJtiv3o2.cjs");require("./icon-B_ryAy4Q.cjs");require("./tag-
|
|
1
|
+
"use strict";const l=require("./class-map-BBG2gMX4.cjs"),p=require("./if-defined-Cni-RHLS.cjs"),t=require("./element-6DBpyGQm.cjs"),g=require("./pkt-slot-controller-BzddBp7z.cjs"),c=require("./ref-iJtiv3o2.cjs");require("./icon-B_ryAy4Q.cjs");require("./tag-Bbs0U_Au.cjs");const k={layout:{default:"vertical"},skin:{default:"outlined"},padding:{default:"default"}},h={props:k};var u=Object.defineProperty,m=Object.getOwnPropertyDescriptor,e=(d,a,i,s)=>{for(var r=s>1?void 0:s?m(a,i):a,n=d.length-1,o;n>=0;n--)(o=d[n])&&(r=(s?o(a,i,r):o(r))||r);return s&&r&&u(a,i,r),r};exports.PktCard=class extends t.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.ariaLabel="",this.metaLead=null,this.borderOnHover=!0,this.clickCardLink=null,this.metaTrail=null,this.layout=h.props.layout.default,this.heading="",this.headinglevel=3,this.image={src:"",alt:""},this.imageShape="square",this.openLinkInNewTab=!1,this.padding=h.props.padding.default,this.skin=h.props.skin.default,this.subheading="",this.tagPosition="top",this.tags=[],this.slotController=new g.PktSlotController(this,this.defaultSlot)}connectedCallback(){super.connectedCallback()}render(){var r,n;const a={"pkt-card":!0,[`pkt-card--${this.skin}`]:this.skin,[`pkt-card--${this.layout}`]:this.layout,[`pkt-card--padding-${this.padding}`]:this.padding,"pkt-card--border-on-hover":this.borderOnHover},i=((r=this.ariaLabel)==null?void 0:r.trim())||(this.heading?`${this.heading} lenkekort`:"lenkekort"),s=((n=this.ariaLabel)==null?void 0:n.trim())||(this.heading?this.heading:"kort");return t.x`
|
|
2
2
|
<article
|
|
3
3
|
class=${l.e(a)}
|
|
4
4
|
aria-label=${p.o(this.clickCardLink?i:s)}
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
skin=${p.o(i.skin)}
|
|
71
71
|
iconName=${p.o(i.iconName)}
|
|
72
72
|
>
|
|
73
|
-
|
|
73
|
+
<span>${i.text}</span>
|
|
74
74
|
</pkt-tag>
|
|
75
75
|
`)}
|
|
76
76
|
</div>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const a=require("./element-6DBpyGQm.cjs"),c=require("./if-defined-Cni-RHLS.cjs"),d=require("./state-DPobt-Yz.cjs"),r=require("./ref-iJtiv3o2.cjs"),O=require("./class-map-BBG2gMX4.cjs"),$=require("./repeat-CDsZqct8.cjs"),I=require("./input-element-C4xJoM-X.cjs"),y=require("./pkt-options-controller-CiuBG6Lt.cjs"),w=require("./pkt-slot-controller-BzddBp7z.cjs");require("./input-wrapper-CZ-a00V7.cjs");require("./icon-B_ryAy4Q.cjs");require("./tag-
|
|
1
|
+
"use strict";const a=require("./element-6DBpyGQm.cjs"),c=require("./if-defined-Cni-RHLS.cjs"),d=require("./state-DPobt-Yz.cjs"),r=require("./ref-iJtiv3o2.cjs"),O=require("./class-map-BBG2gMX4.cjs"),$=require("./repeat-CDsZqct8.cjs"),I=require("./input-element-C4xJoM-X.cjs"),y=require("./pkt-options-controller-CiuBG6Lt.cjs"),w=require("./pkt-slot-controller-BzddBp7z.cjs");require("./input-wrapper-CZ-a00V7.cjs");require("./icon-B_ryAy4Q.cjs");require("./tag-Bbs0U_Au.cjs");require("./listbox-C4supLfR.cjs");const C={displayValueAs:{default:"label"}},V={props:C};var R=Object.defineProperty,S=Object.getOwnPropertyDescriptor,o=(v,e,t,i)=>{for(var s=i>1?void 0:i?S(e,t):e,l=v.length-1,h;l>=0;l--)(h=v[l])&&(s=(i?h(e,t,s):h(s))||s);return i&&s&&R(e,t,s),s};exports.PktCombobox=class extends I.PktInputElement{constructor(){super(),this.helptextSlot=r.e(),this.value="",this.options=[],this.defaultOptions=[],this.allowUserInput=!1,this.typeahead=!1,this.includeSearch=!1,this.searchPlaceholder="",this.multiple=!1,this.maxlength=null,this.displayValueAs=V.props.displayValueAs.default,this.tagPlacement=null,this._options=[],this._isOptionsOpen=!1,this._value=[],this._userInfoMessage="",this._addValueText=null,this._maxIsReached=!1,this._search="",this._inputFocus=!1,this._editingSingleValue=!1,this.inputRef=r.e(),this.arrowRef=r.e(),this.listboxRef=r.e(),this.focusRef=r.e(),this.optionTagRef=r.e(),this.optionsController=new y.PktOptionsSlotController(this),this.slotController=new w.PktSlotController(this,this.helptextSlot),this.slotController.skipOptions=!0}connectedCallback(){var e;if(super.connectedCallback(),document&&document.body.addEventListener("click",t=>{this._isOptionsOpen&&!this.contains(t.target)&&this.handleFocusOut(t)}),this._options=[],this.defaultOptions&&this.defaultOptions.length){const t=((e=this.options)==null?void 0:e.filter(i=>i.userAdded))||[];this.options=[...t,...JSON.parse(JSON.stringify(this.defaultOptions))],this._options=[...this.options]}if(this.optionsController.nodes.length){const t=[];this.optionsController.nodes.forEach(i=>{if(!i.textContent&&!i.getAttribute("value"))return null;const s={value:i.getAttribute("value")||i.textContent||"",label:i.textContent||i.getAttribute("value")||""};i.getAttribute("data-prefix")&&(s.prefix=i.getAttribute("data-prefix")||void 0),i.getAttribute("tagskincolor")&&(s.tagSkinColor=i.getAttribute("tagskincolor")),i.getAttribute("description")&&(s.description=i.getAttribute("description")||void 0),s.fulltext=s.value+s.label+(s.prefix||""),t.push(s)}),t.length&&(this.options=[...t],this._options=[...t])}}updated(e){var t;if(e.has("_value")&&this.valueChanged(this._value,e.get("_value")),e.has("value")&&(Array.isArray(this.value)?this._value=this.value:this.value&&this.multiple?this._value=this.value.split(","):this.value?this._value=[this.value]:this._value=[],!this.multiple&&this._value.length>1&&(this._value=[this._value[0]]),this.isMaxItemsReached()),e.has("defaultOptions")&&this.defaultOptions.length){const i=((t=this.options)==null?void 0:t.filter(s=>s.userAdded))||[];this.options=[...i,...JSON.parse(JSON.stringify(this.defaultOptions))],this._options=[...this.options]}if(e.has("options")&&this.options.length){const s=this._options.filter(l=>l.userAdded).filter(l=>!this.options.some(h=>h.value===l.value));this._options=[...s,...this.options],this._options.forEach(l=>{if(l.value&&!l.label&&(l.label=l.value),l.selected&&!this._value.includes(l.value)){const h=[...this._value];this._value=[...this._value,l.value],this.valueChanged(this._value,h)}l.fulltext=l.value+l.label+(l.prefix||""),l.selected=l.selected||this._value.includes(l.value)})}e.has("_search")&&this.dispatchEvent(new CustomEvent("search",{detail:this._search,bubbles:!1})),super.updated(e)}attributeChangedCallback(e,t,i){e==="value"&&(Array.isArray(this.value)?this._value=this.value:this.value&&this.multiple?this._value=this.value.split(","):this.value?this._value=[this.value]:this._value=[],!this.multiple&&this._value.length>1&&(this._value=[this._value[0]])),e==="options"&&(this._options=this.options,this._options.forEach(s=>{s.value&&!s.label&&(s.label=s.value),s.selected&&!this._value.includes(s.value)&&(this._value=[...this._value,s.value]),s.fulltext=s.value+s.label+(s.prefix||"")}),this._search=""),super.attributeChangedCallback(e,t,i)}render(){return a.x`
|
|
2
2
|
<pkt-input-wrapper
|
|
3
3
|
.label=${this.label}
|
|
4
4
|
.helptext=${this.helptext}
|
|
@@ -9,7 +9,7 @@ import { P as S } from "./pkt-options-controller-CZO1nxZ8.js";
|
|
|
9
9
|
import { P as C } from "./pkt-slot-controller-BPGj-LC5.js";
|
|
10
10
|
import "./input-wrapper-Dr__Sxql.js";
|
|
11
11
|
import "./icon-CC1js8eR.js";
|
|
12
|
-
import "./tag-
|
|
12
|
+
import "./tag-DyXzTY68.js";
|
|
13
13
|
import "./listbox-CLsSW32I.js";
|
|
14
14
|
const A = {
|
|
15
15
|
displayValueAs: {
|
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
"use strict";const d=require("./class-map-BBG2gMX4.cjs"),
|
|
1
|
+
"use strict";const d=require("./class-map-BBG2gMX4.cjs"),o=require("./if-defined-Cni-RHLS.cjs"),s=require("./element-6DBpyGQm.cjs"),m=require("./state-DPobt-Yz.cjs"),h=require("./calendar-BZe2D4Sr.cjs"),v=require("./input-element-C4xJoM-X.cjs"),r=require("./ref-iJtiv3o2.cjs"),k=require("./repeat-CDsZqct8.cjs");require("./icon-B_ryAy4Q.cjs");require("./input-wrapper-CZ-a00V7.cjs");require("./tag-Bbs0U_Au.cjs");const $=require("./pkt-slot-controller-BzddBp7z.cjs"),y={dateformat:{default:"dd.MM.yyyy"},min:{default:null},max:{default:null},weeknumbers:{default:!1},withcontrols:{default:!1},multiple:{default:!1},range:{default:!1}},p={props:y};var b=Object.defineProperty,x=Object.getOwnPropertyDescriptor,n=(c,t,e,i)=>{for(var a=i>1?void 0:i?x(t,e):t,l=c.length-1,u;l>=0;l--)(u=c[l])&&(a=(i?u(t,e,a):u(a))||a);return i&&a&&b(t,e,a),a};const g=c=>new Promise(t=>setTimeout(t,c));exports.PktDatepicker=class extends v.PktInputElement{constructor(){super(),this.value="",this._value=this.value?Array.isArray(this.value)?this.value:this.value.split(","):[],this.label="Datovelger",this.dateformat=p.props.dateformat.default,this.multiple=p.props.multiple.default,this.maxlength=null,this.range=p.props.range.default,this.showRangeLabels=!1,this.min=null,this.max=null,this.weeknumbers=p.props.weeknumbers.default,this.withcontrols=p.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.helptextSlot=r.e(),this.addToSelected=t=>{const e=t.target;if(!e.value)return;const i=this.min?h.newDate(this.min):null,a=this.max?h.newDate(this.max):null,l=h.newDate(e.value.split(",")[0]);l&&!isNaN(l.getTime())&&(!i||l>=i)&&(!a||l<=a)&&this.calRef.value&&this.calRef.value.handleDateSelect(l),e.value=""},this.slotController=new $.PktSlotController(this,this.helptextSlot)}async connectedCallback(){super.connectedCallback();const t=navigator.userAgent,e=/iP(hone|od|ad)/.test(t);this.inputType=e?"text":"date",document&&document.body.addEventListener("click",i=>{var a,l;(a=this.inputRef)!=null&&a.value&&((l=this.btnRef)!=null&&l.value)&&!this.inputRef.value.contains(i.target)&&!(this.inputRefTo.value&&this.inputRefTo.value.contains(i.target))&&!this.btnRef.value.contains(i.target)&&!i.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||p.props.min.default,this.max=this.max||p.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 g(20),this.handleCalendarPosition())}disconnectedCallback(){super.disconnectedCallback(),document&&document.body.removeEventListener("click",t=>{var e,i;(e=this.inputRef)!=null&&e.value&&((i=this.btnRef)!=null&&i.value)&&!this.inputRef.value.contains(t.target)&&!this.btnRef.value.contains(t.target)&&this.hideCalendar()})}attributeChangedCallback(t,e,i){if(t==="value"){if(this.range&&(i==null?void 0:i.split(",").length)===1)return;this.value!==e&&this.valueChanged(i,e)}t==="excludedates"&&typeof this.excludedates=="string"&&(this.excludedates=(i==null?void 0:i.split(","))??[]),t==="excludeweekdays"&&typeof this.excludeweekdays=="string"&&(this.excludeweekdays=(i==null?void 0:i.split(","))??[]),super.attributeChangedCallback(t,e,i)}updated(t){t.has("multiple")&&(this.multiple&&!Array.isArray(this._value)?this._value=typeof this.value=="string"?this.value?this.value.split(",").filter(Boolean):[]:[]:!this.multiple&&Array.isArray(this._value)&&(this._value=this._value.filter(Boolean)),!this.multiple&&Array.isArray(this._value)&&(this._value=[this._value[0]??""])),super.updated(t)}renderInput(){return s.x`
|
|
2
2
|
<input
|
|
3
3
|
class="${d.e(this.inputClasses)}"
|
|
4
4
|
.type=${this.inputType}
|
|
5
5
|
id="${this.id}-input"
|
|
6
6
|
.value=${this._value[0]??""}
|
|
7
|
-
min=${
|
|
8
|
-
max=${
|
|
7
|
+
min=${o.o(this.min)}
|
|
8
|
+
max=${o.o(this.max)}
|
|
9
9
|
@click=${t=>{t.preventDefault(),this.showCalendar()}}
|
|
10
10
|
?disabled=${this.disabled}
|
|
11
11
|
@keydown=${t=>{var e,i;if(t.key===","&&((e=this.inputRef.value)==null||e.blur()),(t.key==="Space"||t.key===" ")&&(t.preventDefault(),this.toggleCalendar(t)),t.key==="Enter"){const a=this.internals.form;a?a.requestSubmit():(i=this.inputRef.value)==null||i.blur()}}}
|
|
12
12
|
@input=${t=>{this.onInput(),t.stopImmediatePropagation()}}
|
|
13
13
|
@focus=${()=>{this.onFocus(),this.isMobileSafari&&this.showCalendar()}}
|
|
14
14
|
@blur=${t=>{var e;(e=this.calRef.value)!=null&&e.contains(t.relatedTarget)||this.onBlur(),this.manageValidity(t.target),this.value=t.target.value}}
|
|
15
|
-
@change=${t=>{t.stopImmediatePropagation()}}
|
|
15
|
+
@change=${t=>{this.touched=!0,t.stopImmediatePropagation()}}
|
|
16
16
|
${r.n(this.inputRef)}
|
|
17
17
|
/>
|
|
18
18
|
`}renderRangeInput(){const t={"pkt-input-prefix":this.showRangeLabels,"pkt-hide":!this.showRangeLabels};return s.x`
|
|
@@ -22,14 +22,14 @@
|
|
|
22
22
|
.type=${this.inputType}
|
|
23
23
|
id="${this.id}-input"
|
|
24
24
|
.value=${this._value[0]??""}
|
|
25
|
-
min=${
|
|
26
|
-
max=${
|
|
25
|
+
min=${o.o(this.min)}
|
|
26
|
+
max=${o.o(this.max)}
|
|
27
27
|
?disabled=${this.disabled}
|
|
28
28
|
@click=${e=>{e.preventDefault(),this.showCalendar()}}
|
|
29
|
-
@keydown=${e=>{var i,a;if(e.key===","&&((i=this.inputRef.value)==null||i.blur()),(e.key==="Space"||e.key===" ")&&(e.preventDefault(),this.toggleCalendar(e)),e.key==="Enter"){const
|
|
29
|
+
@keydown=${e=>{var i,a;if(e.key===","&&((i=this.inputRef.value)==null||i.blur()),(e.key==="Space"||e.key===" ")&&(e.preventDefault(),this.toggleCalendar(e)),e.key==="Enter"){const l=this.internals.form;l?l.requestSubmit():(a=this.inputRefTo.value)==null||a.focus()}}}
|
|
30
30
|
@input=${e=>{this.onInput(),e.stopImmediatePropagation()}}
|
|
31
31
|
@focus=${()=>{this.onFocus(),this.isMobileSafari&&this.showCalendar()}}
|
|
32
|
-
@blur=${e=>{var i,a;if(e.target.value){this.manageValidity(e.target);const
|
|
32
|
+
@blur=${e=>{var i,a;if(e.target.value){this.manageValidity(e.target);const l=h.fromISOToDate(e.target.value);l&&this._value[0]!==e.target.value&&this._value[1]&&(this.clearInputValue(),(a=(i=this.calRef)==null?void 0:i.value)==null||a.handleDateSelect(l))}else this._value[0]&&this.clearInputValue()}}
|
|
33
33
|
@change=${e=>{e.stopImmediatePropagation()}}
|
|
34
34
|
${r.n(this.inputRef)}
|
|
35
35
|
/>
|
|
@@ -43,36 +43,36 @@
|
|
|
43
43
|
id="${this.id}-to"
|
|
44
44
|
aria-labelledby="${this.id}-to-label"
|
|
45
45
|
.value=${this._value[1]??""}
|
|
46
|
-
min=${
|
|
47
|
-
max=${
|
|
46
|
+
min=${o.o(this.min)}
|
|
47
|
+
max=${o.o(this.max)}
|
|
48
48
|
?disabled=${this.disabled}
|
|
49
49
|
@click=${e=>{e.preventDefault(),this.showCalendar()}}
|
|
50
|
-
@keydown=${e=>{var i,a;if(e.key===","&&((i=this.inputRefTo.value)==null||i.blur()),(e.key==="Space"||e.key===" ")&&(e.preventDefault(),this.toggleCalendar(e)),e.key==="Enter"){const
|
|
50
|
+
@keydown=${e=>{var i,a;if(e.key===","&&((i=this.inputRefTo.value)==null||i.blur()),(e.key==="Space"||e.key===" ")&&(e.preventDefault(),this.toggleCalendar(e)),e.key==="Enter"){const l=this.internals.form;l?l.requestSubmit():(a=this.inputRefTo.value)==null||a.blur()}}}
|
|
51
51
|
@input=${e=>{this.onInput(),e.stopImmediatePropagation()}}
|
|
52
52
|
@focus=${()=>{this.onFocus(),this.isMobileSafari&&this.showCalendar()}}
|
|
53
|
-
@blur=${e=>{var i,a,
|
|
54
|
-
@change=${e=>{e.stopImmediatePropagation()}}
|
|
53
|
+
@blur=${e=>{var i,a,l;if((i=this.calRef.value)!=null&&i.contains(e.relatedTarget)||this.onBlur(),e.target.value){this.manageValidity(e.target);const u=e.target.value;this.min&&this.min>u?this.internals.setValidity({rangeUnderflow:!0},this.strings.forms.messages.rangeUnderflow,e.target):this.max&&this.max<u&&this.internals.setValidity({rangeOverflow:!0},this.strings.forms.messages.rangeOverflow,e.target);const f=h.fromISOToDate(e.target.value);f&&this._value[1]!==h.formatISODate(f)&&((l=(a=this.calRef)==null?void 0:a.value)==null||l.handleDateSelect(f))}}}
|
|
54
|
+
@change=${e=>{this.touched=!0,e.stopImmediatePropagation()}}
|
|
55
55
|
${r.n(this.inputRefTo)}
|
|
56
56
|
/>
|
|
57
|
-
`}renderMultipleInput(){return s.x`
|
|
57
|
+
`}renderMultipleInput(){return console.log("range",this.range,"multiple",this.multiple),s.x`
|
|
58
58
|
<input
|
|
59
59
|
class=${d.e(this.inputClasses)}
|
|
60
60
|
.type=${this.inputType}
|
|
61
61
|
id="${this.id}-input"
|
|
62
|
-
min=${
|
|
63
|
-
max=${
|
|
62
|
+
min=${o.o(this.min)}
|
|
63
|
+
max=${o.o(this.max)}
|
|
64
64
|
?disabled=${this.disabled||this.maxlength&&this._value.length>=this.maxlength}
|
|
65
65
|
@click=${t=>{t.preventDefault(),this.showCalendar()}}
|
|
66
66
|
@blur=${t=>{var e;(e=this.calRef.value)!=null&&e.contains(t.relatedTarget)||this.onBlur(),this.addToSelected(t)}}
|
|
67
67
|
@input=${t=>{this.onInput(),t.stopImmediatePropagation()}}
|
|
68
68
|
@focus=${()=>{this.onFocus(),this.isMobileSafari&&this.showCalendar()}}
|
|
69
69
|
@keydown=${t=>{var e;if(t.key===","&&(t.preventDefault(),this.addToSelected(t)),(t.key==="Space"||t.key===" ")&&(t.preventDefault(),this.toggleCalendar(t)),t.key==="Enter"){const i=this.internals.form;i?i.requestSubmit():(e=this.inputRef.value)==null||e.blur()}}}
|
|
70
|
-
@change=${t=>{t.stopImmediatePropagation()}}
|
|
70
|
+
@change=${t=>{this.touched=!0,t.stopImmediatePropagation()}}
|
|
71
71
|
${r.n(this.inputRef)}
|
|
72
72
|
/>
|
|
73
73
|
`}renderTags(){return s.x`
|
|
74
74
|
<div class="pkt-datepicker__tags" aria-live="polite">
|
|
75
|
-
${this._value[0]?
|
|
75
|
+
${this._value[0]?k.c((this._value??[]).filter(Boolean),t=>t,t=>s.x`
|
|
76
76
|
<pkt-tag
|
|
77
77
|
.id="${this.id+t+"-tag"}"
|
|
78
78
|
closeTag
|
|
@@ -105,7 +105,7 @@
|
|
|
105
105
|
@close=${()=>{this.onBlur(),this.hideCalendar()}}
|
|
106
106
|
${r.n(this.calRef)}
|
|
107
107
|
></pkt-calendar>
|
|
108
|
-
</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`
|
|
108
|
+
</div>`}render(){return console.log("multiple",this.multiple,"value",this.value,"_value",this._value),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`
|
|
109
109
|
<pkt-input-wrapper
|
|
110
110
|
label="${this.label}"
|
|
111
111
|
forId="${this.id}-input"
|
|
@@ -151,4 +151,4 @@
|
|
|
151
151
|
</div>
|
|
152
152
|
</pkt-input-wrapper>
|
|
153
153
|
${this.renderCalendar()}
|
|
154
|
-
`}handleCalendarPosition(){var t;if(this.popupRef.value&&this.inputRef.value){const e=this.multiple&&!!this.maxlength,i=((t=this.inputRef.value.parentElement)==null?void 0:t.getBoundingClientRect())||this.inputRef.value.getBoundingClientRect(),a=e?i.height+30:i.height,
|
|
154
|
+
`}handleCalendarPosition(){var t;if(this.popupRef.value&&this.inputRef.value){const e=this.multiple&&!!this.maxlength,i=((t=this.inputRef.value.parentElement)==null?void 0:t.getBoundingClientRect())||this.inputRef.value.getBoundingClientRect(),a=e?i.height+30:i.height,l=this.popupRef.value.getBoundingClientRect().height;let u=e?"calc(100% - 30px)":"100%";i&&i.top+l>window.innerHeight&&i.top-l>0&&(u=`calc(100% - ${a}px - ${l}px)`),this.popupRef.value.style.top=u}}handleFocusOut(t){this.contains(t.target)||(this.onBlur(),this.hideCalendar())}async showCalendar(){var t;this.calendarOpen=!0,await g(20),this.handleCalendarPosition(),this.isMobileSafari&&((t=this.calRef.value)==null||t.focusOnCurrentDate())}hideCalendar(){this.calendarOpen=!1}async toggleCalendar(t){t.preventDefault(),this.calendarOpen?this.hideCalendar():this.showCalendar()}};n([s.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"value",2);n([s.n({type:Array})],exports.PktDatepicker.prototype,"_value",2);n([s.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"label",2);n([s.n({type:String})],exports.PktDatepicker.prototype,"dateformat",2);n([s.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"multiple",2);n([s.n({type:Number,reflect:!0})],exports.PktDatepicker.prototype,"maxlength",2);n([s.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"range",2);n([s.n({type:Boolean})],exports.PktDatepicker.prototype,"showRangeLabels",2);n([s.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"min",2);n([s.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"max",2);n([s.n({type:Boolean})],exports.PktDatepicker.prototype,"weeknumbers",2);n([s.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"withcontrols",2);n([s.n({converter:h.converters.csvToArray})],exports.PktDatepicker.prototype,"excludedates",2);n([s.n({converter:h.converters.csvToArray})],exports.PktDatepicker.prototype,"excludeweekdays",2);n([s.n({type:String})],exports.PktDatepicker.prototype,"currentmonth",2);n([s.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"calendarOpen",2);n([s.n({type:String})],exports.PktDatepicker.prototype,"timezone",2);n([m.r()],exports.PktDatepicker.prototype,"inputClasses",2);n([m.r()],exports.PktDatepicker.prototype,"buttonClasses",2);exports.PktDatepicker=n([s.t("pkt-datepicker")],exports.PktDatepicker);
|
|
@@ -5,11 +5,11 @@ import { r as k } from "./state-Bo2bck5_.js";
|
|
|
5
5
|
import { n as v, f as $, a as R, b as y, d as x } from "./calendar-DevQhOup.js";
|
|
6
6
|
import { P as C } from "./input-element-NnrDmp4r.js";
|
|
7
7
|
import { e as m, n as p } from "./ref-BBYSqgeW.js";
|
|
8
|
-
import { c as
|
|
8
|
+
import { c as _ } from "./repeat-C8BeHwYx.js";
|
|
9
9
|
import "./icon-CC1js8eR.js";
|
|
10
10
|
import "./input-wrapper-Dr__Sxql.js";
|
|
11
|
-
import "./tag-
|
|
12
|
-
import { P as
|
|
11
|
+
import "./tag-DyXzTY68.js";
|
|
12
|
+
import { P as T } from "./pkt-slot-controller-BPGj-LC5.js";
|
|
13
13
|
const S = {
|
|
14
14
|
dateformat: {
|
|
15
15
|
default: "dd.MM.yyyy"
|
|
@@ -51,7 +51,7 @@ let l = class extends C {
|
|
|
51
51
|
if (!e.value) return;
|
|
52
52
|
const i = this.min ? v(this.min) : null, a = this.max ? v(this.max) : null, s = v(e.value.split(",")[0]);
|
|
53
53
|
s && !isNaN(s.getTime()) && (!i || s >= i) && (!a || s <= a) && this.calRef.value && this.calRef.value.handleDateSelect(s), e.value = "";
|
|
54
|
-
}, this.slotController = new
|
|
54
|
+
}, this.slotController = new T(this, this.helptextSlot);
|
|
55
55
|
}
|
|
56
56
|
async connectedCallback() {
|
|
57
57
|
super.connectedCallback();
|
|
@@ -75,11 +75,7 @@ let l = class extends C {
|
|
|
75
75
|
t === "excludedates" && typeof this.excludedates == "string" && (this.excludedates = (i == null ? void 0 : i.split(",")) ?? []), t === "excludeweekdays" && typeof this.excludeweekdays == "string" && (this.excludeweekdays = (i == null ? void 0 : i.split(",")) ?? []), super.attributeChangedCallback(t, e, i);
|
|
76
76
|
}
|
|
77
77
|
updated(t) {
|
|
78
|
-
|
|
79
|
-
if (this.range && this.value.length === 1) return;
|
|
80
|
-
this.valueChanged(this.value, t.get("value"));
|
|
81
|
-
}
|
|
82
|
-
super.updated(t);
|
|
78
|
+
t.has("multiple") && (this.multiple && !Array.isArray(this._value) ? this._value = typeof this.value == "string" ? this.value ? this.value.split(",").filter(Boolean) : [] : [] : !this.multiple && Array.isArray(this._value) && (this._value = this._value.filter(Boolean)), !this.multiple && Array.isArray(this._value) && (this._value = [this._value[0] ?? ""])), super.updated(t);
|
|
83
79
|
}
|
|
84
80
|
/**
|
|
85
81
|
* Rendering
|
|
@@ -115,7 +111,7 @@ let l = class extends C {
|
|
|
115
111
|
(e = this.calRef.value) != null && e.contains(t.relatedTarget) || this.onBlur(), this.manageValidity(t.target), this.value = t.target.value;
|
|
116
112
|
}}
|
|
117
113
|
@change=${(t) => {
|
|
118
|
-
t.stopImmediatePropagation();
|
|
114
|
+
this.touched = !0, t.stopImmediatePropagation();
|
|
119
115
|
}}
|
|
120
116
|
${p(this.inputRef)}
|
|
121
117
|
/>
|
|
@@ -213,14 +209,14 @@ let l = class extends C {
|
|
|
213
209
|
}
|
|
214
210
|
}}
|
|
215
211
|
@change=${(e) => {
|
|
216
|
-
e.stopImmediatePropagation();
|
|
212
|
+
this.touched = !0, e.stopImmediatePropagation();
|
|
217
213
|
}}
|
|
218
214
|
${p(this.inputRefTo)}
|
|
219
215
|
/>
|
|
220
216
|
`;
|
|
221
217
|
}
|
|
222
218
|
renderMultipleInput() {
|
|
223
|
-
return u`
|
|
219
|
+
return console.log("range", this.range, "multiple", this.multiple), u`
|
|
224
220
|
<input
|
|
225
221
|
class=${f(this.inputClasses)}
|
|
226
222
|
.type=${this.inputType}
|
|
@@ -249,7 +245,7 @@ let l = class extends C {
|
|
|
249
245
|
}
|
|
250
246
|
}}
|
|
251
247
|
@change=${(t) => {
|
|
252
|
-
t.stopImmediatePropagation();
|
|
248
|
+
this.touched = !0, t.stopImmediatePropagation();
|
|
253
249
|
}}
|
|
254
250
|
${p(this.inputRef)}
|
|
255
251
|
/>
|
|
@@ -258,8 +254,8 @@ let l = class extends C {
|
|
|
258
254
|
renderTags() {
|
|
259
255
|
return u`
|
|
260
256
|
<div class="pkt-datepicker__tags" aria-live="polite">
|
|
261
|
-
${this._value[0] ?
|
|
262
|
-
this._value ?? [],
|
|
257
|
+
${this._value[0] ? _(
|
|
258
|
+
(this._value ?? []).filter(Boolean),
|
|
263
259
|
(t) => t,
|
|
264
260
|
(t) => u`
|
|
265
261
|
<pkt-tag
|
|
@@ -313,7 +309,7 @@ let l = class extends C {
|
|
|
313
309
|
</div>`;
|
|
314
310
|
}
|
|
315
311
|
render() {
|
|
316
|
-
return this.inputClasses = {
|
|
312
|
+
return console.log("multiple", this.multiple, "value", this.value, "_value", this._value), this.inputClasses = {
|
|
317
313
|
"pkt-input": !0,
|
|
318
314
|
"pkt-datepicker__input": !0,
|
|
319
315
|
"pkt-input--fullwidth": this.fullwidth,
|
package/dist/index.d.ts
CHANGED
|
@@ -1222,7 +1222,7 @@ declare type TCounterPosition = 'top' | 'bottom';
|
|
|
1222
1222
|
|
|
1223
1223
|
declare type TLayout = 'vertical' | 'horizontal';
|
|
1224
1224
|
|
|
1225
|
-
declare type TLinkCardSkin = 'normal' | 'blue' | 'beige' | 'green' | 'gray' | 'beige-outline' | 'gray-outline';
|
|
1225
|
+
declare type TLinkCardSkin = 'normal' | 'no-padding' | 'blue' | 'beige' | 'green' | 'gray' | 'beige-outline' | 'gray-outline';
|
|
1226
1226
|
|
|
1227
1227
|
declare type TMessageboxSkin = 'beige' | 'blue' | 'red' | 'green';
|
|
1228
1228
|
|
|
@@ -1,29 +1,26 @@
|
|
|
1
|
-
import { P as h, E as
|
|
1
|
+
import { P as h, E as m, x as c, n as o, a as u } from "./element-CgEWt74-.js";
|
|
2
2
|
import { P } from "./pkt-slot-controller-BPGj-LC5.js";
|
|
3
3
|
import { e as k, n as g } from "./ref-BBYSqgeW.js";
|
|
4
|
-
import { e as
|
|
4
|
+
import { e as y } from "./class-map-BpTj9gtz.js";
|
|
5
5
|
import "./icon-CC1js8eR.js";
|
|
6
|
-
const
|
|
6
|
+
const d = {
|
|
7
7
|
href: {
|
|
8
8
|
default: "#"
|
|
9
9
|
},
|
|
10
10
|
target: {
|
|
11
11
|
default: "_self"
|
|
12
|
-
},
|
|
13
|
-
external: {
|
|
14
|
-
default: !1
|
|
15
12
|
}
|
|
16
|
-
},
|
|
17
|
-
props:
|
|
13
|
+
}, f = {
|
|
14
|
+
props: d
|
|
18
15
|
};
|
|
19
|
-
var
|
|
20
|
-
for (var t =
|
|
21
|
-
(a = i[p]) && (t = (
|
|
22
|
-
return
|
|
16
|
+
var _ = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, r = (i, s, l, n) => {
|
|
17
|
+
for (var t = n > 1 ? void 0 : n ? $(s, l) : s, p = i.length - 1, a; p >= 0; p--)
|
|
18
|
+
(a = i[p]) && (t = (n ? a(s, l, t) : a(t)) || t);
|
|
19
|
+
return n && t && _(s, l, t), t;
|
|
23
20
|
};
|
|
24
21
|
let e = class extends h {
|
|
25
22
|
constructor() {
|
|
26
|
-
super(), this.defaultSlot = k(), this.href =
|
|
23
|
+
super(), this.defaultSlot = k(), this.href = f.props.href.default, this.iconName = void 0, this.iconPosition = void 0, this.external = !1, this.target = f.props.target.default, this.slotController = new P(this, this.defaultSlot);
|
|
27
24
|
}
|
|
28
25
|
render() {
|
|
29
26
|
const i = {
|
|
@@ -32,12 +29,12 @@ let e = class extends h {
|
|
|
32
29
|
"pkt-link--icon-right": !!this.iconName && this.iconPosition === "right",
|
|
33
30
|
"pkt-link--external": this.external
|
|
34
31
|
};
|
|
35
|
-
return
|
|
36
|
-
class=${
|
|
32
|
+
return c`<a
|
|
33
|
+
class=${y(i)}
|
|
37
34
|
href=${this.href}
|
|
38
35
|
.target=${this.target}
|
|
39
|
-
.rel=${this.external ? "noopener noreferrer" :
|
|
40
|
-
>${this.iconName ?
|
|
36
|
+
.rel=${this.external ? "noopener noreferrer" : m}
|
|
37
|
+
>${this.iconName ? c`<pkt-icon name=${this.iconName} class="pkt-link__icon"></pkt-icon>` : ""} <span ${g(this.defaultSlot)}>Link</span></a
|
|
41
38
|
>`;
|
|
42
39
|
}
|
|
43
40
|
};
|
|
@@ -57,7 +54,7 @@ r([
|
|
|
57
54
|
o({ type: String, reflect: !0 })
|
|
58
55
|
], e.prototype, "target", 2);
|
|
59
56
|
e = r([
|
|
60
|
-
|
|
57
|
+
u("pkt-link")
|
|
61
58
|
], e);
|
|
62
59
|
export {
|
|
63
60
|
e as P
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
"use strict";const t=require("./element-6DBpyGQm.cjs"),h=require("./pkt-slot-controller-BzddBp7z.cjs"),c=require("./ref-iJtiv3o2.cjs"),k=require("./class-map-BBG2gMX4.cjs");require("./icon-B_ryAy4Q.cjs");const f={href:{default:"#"},target:{default:"_self"}},a={props:f};var u=Object.defineProperty,P=Object.getOwnPropertyDescriptor,i=(o,r,s,n)=>{for(var e=n>1?void 0:n?P(r,s):r,l=o.length-1,p;l>=0;l--)(p=o[l])&&(e=(n?p(r,s,e):p(e))||e);return n&&e&&u(r,s,e),e};exports.PktLink=class extends t.PktElement{constructor(){super(),this.defaultSlot=c.e(),this.href=a.props.href.default,this.iconName=void 0,this.iconPosition=void 0,this.external=!1,this.target=a.props.target.default,this.slotController=new h.PktSlotController(this,this.defaultSlot)}render(){const r={"pkt-link":!0,"pkt-link--icon-left":!!this.iconName&&this.iconPosition==="left"||!!(this.iconName&&!this.iconPosition),"pkt-link--icon-right":!!this.iconName&&this.iconPosition==="right","pkt-link--external":this.external};return t.x`<a
|
|
2
|
+
class=${k.e(r)}
|
|
3
|
+
href=${this.href}
|
|
4
|
+
.target=${this.target}
|
|
5
|
+
.rel=${this.external?"noopener noreferrer":t.E}
|
|
6
|
+
>${this.iconName?t.x`<pkt-icon name=${this.iconName} class="pkt-link__icon"></pkt-icon>`:""} <span ${c.n(this.defaultSlot)}>Link</span></a
|
|
7
|
+
>`}};i([t.n({type:String,reflect:!0})],exports.PktLink.prototype,"href",2);i([t.n({type:String,reflect:!0})],exports.PktLink.prototype,"iconName",2);i([t.n({type:String,reflect:!0})],exports.PktLink.prototype,"iconPosition",2);i([t.n({type:Boolean,reflect:!0})],exports.PktLink.prototype,"external",2);i([t.n({type:String,reflect:!0})],exports.PktLink.prototype,"target",2);exports.PktLink=i([t.t("pkt-link")],exports.PktLink);
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
"use strict";const d=require("./class-map-BBG2gMX4.cjs"),o=require("./element-6DBpyGQm.cjs"),
|
|
1
|
+
"use strict";const d=require("./class-map-BBG2gMX4.cjs"),o=require("./element-6DBpyGQm.cjs"),h=require("./state-DPobt-Yz.cjs"),u=require("./pkt-slot-controller-BzddBp7z.cjs"),r=require("./ref-iJtiv3o2.cjs");require("./icon-B_ryAy4Q.cjs");const k={hideCloseButton:{default:!1},closeOnBackdropClick:{default:!1},size:{default:"medium"}},p={props:k};var m=Object.defineProperty,v=Object.getOwnPropertyDescriptor,l=(c,t,e,i)=>{for(var s=i>1?void 0:i?v(t,e):t,a=c.length-1,n;a>=0;a--)(n=c[a])&&(s=(i?n(t,e,s):n(s))||s);return i&&s&&m(t,e,s),s};exports.PktModal=class extends o.PktElement{constructor(){super(),this.headingText="",this.removePadding=!1,this.hideCloseButton=p.props.hideCloseButton.default,this.closeOnBackdropClick=p.props.closeOnBackdropClick.default,this.closeButtonSkin="blue",this.size=p.props.size.default,this.variant="dialog",this.drawerPosition="right",this.transparentBackdrop=!1,this.defaultSlot=r.e(),this.dialogRef=r.e(),this._isOpen=!1,this.close=(t,e=!1)=>{var s;if(!this._isOpen)return;this._isOpen=!1,document.body.classList.remove("pkt-modal--open");const i=document.activeElement;i&&!this.isElementInViewport(i)&&i.scrollIntoView({behavior:"smooth",block:"nearest"}),this.dispatchEvent(new CustomEvent("close",{detail:{origin:t},bubbles:!0,composed:!0})),e||(s=this.dialogRef.value)==null||s.close(),this.requestUpdate()},this.showModal=(t=null)=>{var i;this._isOpen=!0,(i=this.dialogRef.value)==null||i.showModal();const e=document.querySelector(".pkt-modal");requestAnimationFrame(()=>{var s;this.dialogRef.value&&((s=this.dialogRef.value)==null||s.focus())}),e&&document.body.classList.add("pkt-modal--open"),this.dispatchEvent(new CustomEvent("showModal",{detail:{origin:t},bubbles:!0,composed:!0})),this.requestUpdate()},this.slotController=new u.PktSlotController(this,this.defaultSlot),this._isOpen=!1}async connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this.handleKeyDown.bind(this)),document.addEventListener("click",this.handleBackdropClick.bind(this))}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("click",this.handleBackdropClick)}async firstUpdated(t){super.firstUpdated(t),this.dialogRef.value&&!window.HTMLDialogElement&&!this.dialogRef.value.showModal&&("document"in window&&"createElement"in document&&(await Promise.resolve().then(()=>require("./dialog-polyfill.esm-CPKZe7AL.cjs")).then(i=>i.default)).registerDialog(this.dialogRef.value),this.dialogRef.value.addEventListener("close",()=>{this.close(new Event("close"),!0)}))}handleKeyDown(t){t.key==="Escape"&&this.close(t)}handleBackdropClick(t){var e;this.closeOnBackdropClick&&t.target===((e=this.dialogRef)==null?void 0:e.value)&&this.close(t)}isElementInViewport(t){const e=t.getBoundingClientRect();return e.top>=0&&e.left>=0&&e.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&e.right<=(window.innerWidth||document.documentElement.clientWidth)}render(){const t={"pkt-modal":!0,"pkt-modal--removePadding":this.removePadding??!1,"pkt-modal--noHeadingText":this.headingText===""||this.headingText===void 0,"pkt-modal--noShadow":this.closeButtonSkin==="yellow-filled","pkt-modal--transparentBackdrop":this.transparentBackdrop??!1,[`pkt-modal--${this.size}`]:this.size!==void 0,[`pkt-modal__${this.variant}`]:this.variant!==void 0,[`pkt-modal__drawer--${this.drawerPosition}`]:this.variant==="drawer"},e={"pkt-modal__headingText":!0,"pkt-txt-24":!0},i={"pkt-modal__content":!0,"pkt-txt-18-light":!0},s=this.closeButtonSkin==="blue",a={"pkt-modal__closeButton":!0,[`pkt-modal__closeButton--${this.closeButtonSkin}`]:!0};return o.x`
|
|
2
2
|
<dialog
|
|
3
3
|
class=${d.e(t)}
|
|
4
4
|
${r.n(this.dialogRef)}
|
|
5
5
|
aria-labelledby="pkt-modal__headingText"
|
|
6
6
|
aria-describedby="pkt-modal__content"
|
|
7
|
-
@close=${
|
|
7
|
+
@close=${n=>this.close(n,!0)}
|
|
8
8
|
>
|
|
9
9
|
<div class="pkt-modal__wrapper">
|
|
10
10
|
${this.headingText||!this.hideCloseButton?o.x`<div class="pkt-modal__header">
|
|
@@ -12,13 +12,14 @@
|
|
|
12
12
|
${this.headingText?o.x`<h1 id="pkt-modal__headingText" class=${d.e(e)}>
|
|
13
13
|
${this.headingText}
|
|
14
14
|
</h1>`:o.x`<div class="pkt-modal__headingText"></div>`}
|
|
15
|
-
${this.hideCloseButton?o.x`<div class="pkt-modal__noCloseButton"></div>`:o.x`<div class="${d.e(
|
|
15
|
+
${this.hideCloseButton?o.x`<div class="pkt-modal__noCloseButton"></div>`:o.x`<div class="${d.e(a)}">
|
|
16
16
|
<pkt-button
|
|
17
|
-
@click=${
|
|
18
|
-
class=${d.e(a)}
|
|
17
|
+
@click=${n=>this.close(n)}
|
|
19
18
|
aria-label="close"
|
|
20
19
|
iconname="close"
|
|
21
20
|
variant="icon-only"
|
|
21
|
+
size="medium"
|
|
22
|
+
skin=${s?"tertiary":"primary"}
|
|
22
23
|
>
|
|
23
24
|
Lukk
|
|
24
25
|
</pkt-button>
|
|
@@ -33,4 +34,4 @@
|
|
|
33
34
|
</div>
|
|
34
35
|
</div>
|
|
35
36
|
</dialog>
|
|
36
|
-
`}};l([o.n({type:String})],exports.PktModal.prototype,"headingText",2);l([o.n({type:Boolean})],exports.PktModal.prototype,"removePadding",2);l([o.n({type:Boolean})],exports.PktModal.prototype,"hideCloseButton",2);l([o.n({type:Boolean})],exports.PktModal.prototype,"closeOnBackdropClick",2);l([o.n({type:String})],exports.PktModal.prototype,"closeButtonSkin",2);l([o.n({type:String})],exports.PktModal.prototype,"size",2);l([o.n({type:String})],exports.PktModal.prototype,"variant",2);l([o.n({type:String})],exports.PktModal.prototype,"drawerPosition",2);l([o.n({type:Boolean})],exports.PktModal.prototype,"transparentBackdrop",2);l([
|
|
37
|
+
`}};l([o.n({type:String})],exports.PktModal.prototype,"headingText",2);l([o.n({type:Boolean})],exports.PktModal.prototype,"removePadding",2);l([o.n({type:Boolean})],exports.PktModal.prototype,"hideCloseButton",2);l([o.n({type:Boolean})],exports.PktModal.prototype,"closeOnBackdropClick",2);l([o.n({type:String})],exports.PktModal.prototype,"closeButtonSkin",2);l([o.n({type:String})],exports.PktModal.prototype,"size",2);l([o.n({type:String})],exports.PktModal.prototype,"variant",2);l([o.n({type:String})],exports.PktModal.prototype,"drawerPosition",2);l([o.n({type:Boolean})],exports.PktModal.prototype,"transparentBackdrop",2);l([h.r()],exports.PktModal.prototype,"_isOpen",2);exports.PktModal=l([o.t("pkt-modal")],exports.PktModal);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { e as
|
|
2
|
-
import { P as k, E as f, x as r, n
|
|
1
|
+
import { e as c } from "./class-map-BpTj9gtz.js";
|
|
2
|
+
import { P as k, E as f, x as r, n, a as v } from "./element-CgEWt74-.js";
|
|
3
3
|
import { r as g } from "./state-Bo2bck5_.js";
|
|
4
4
|
import { P as _ } from "./pkt-slot-controller-BPGj-LC5.js";
|
|
5
5
|
import { e as u, n as m } from "./ref-BBYSqgeW.js";
|
|
@@ -17,10 +17,10 @@ const y = {
|
|
|
17
17
|
}, h = {
|
|
18
18
|
props: y
|
|
19
19
|
};
|
|
20
|
-
var w = Object.defineProperty,
|
|
21
|
-
for (var
|
|
22
|
-
(
|
|
23
|
-
return i &&
|
|
20
|
+
var w = Object.defineProperty, B = Object.getOwnPropertyDescriptor, a = (e, t, o, i) => {
|
|
21
|
+
for (var l = i > 1 ? void 0 : i ? B(t, o) : t, d = e.length - 1, p; d >= 0; d--)
|
|
22
|
+
(p = e[d]) && (l = (i ? p(t, o, l) : p(l)) || l);
|
|
23
|
+
return i && l && w(t, o, l), l;
|
|
24
24
|
};
|
|
25
25
|
let s = class extends k {
|
|
26
26
|
constructor() {
|
|
@@ -83,18 +83,13 @@ let s = class extends k {
|
|
|
83
83
|
}, o = {
|
|
84
84
|
"pkt-modal__content": !0,
|
|
85
85
|
"pkt-txt-18-light": !0
|
|
86
|
-
}, i = this.closeButtonSkin === "blue",
|
|
86
|
+
}, i = this.closeButtonSkin === "blue", l = {
|
|
87
87
|
"pkt-modal__closeButton": !0,
|
|
88
88
|
[`pkt-modal__closeButton--${this.closeButtonSkin}`]: !0
|
|
89
|
-
}, c = {
|
|
90
|
-
"pkt-btn": !0,
|
|
91
|
-
[`pkt-btn--${i ? "tertiary" : "primary"}`]: !0,
|
|
92
|
-
"pkt-btn--icon-only": !0,
|
|
93
|
-
"pkt-btn--medium": !0
|
|
94
89
|
};
|
|
95
90
|
return r`
|
|
96
91
|
<dialog
|
|
97
|
-
class=${
|
|
92
|
+
class=${c(e)}
|
|
98
93
|
${m(this.dialogRef)}
|
|
99
94
|
aria-labelledby="pkt-modal__headingText"
|
|
100
95
|
aria-describedby="pkt-modal__content"
|
|
@@ -103,16 +98,17 @@ let s = class extends k {
|
|
|
103
98
|
<div class="pkt-modal__wrapper">
|
|
104
99
|
${this.headingText || !this.hideCloseButton ? r`<div class="pkt-modal__header">
|
|
105
100
|
<div class="pkt-modal__header-background"></div>
|
|
106
|
-
${this.headingText ? r`<h1 id="pkt-modal__headingText" class=${
|
|
101
|
+
${this.headingText ? r`<h1 id="pkt-modal__headingText" class=${c(t)}>
|
|
107
102
|
${this.headingText}
|
|
108
103
|
</h1>` : r`<div class="pkt-modal__headingText"></div>`}
|
|
109
|
-
${this.hideCloseButton ? r`<div class="pkt-modal__noCloseButton"></div>` : r`<div class="${
|
|
104
|
+
${this.hideCloseButton ? r`<div class="pkt-modal__noCloseButton"></div>` : r`<div class="${c(l)}">
|
|
110
105
|
<pkt-button
|
|
111
106
|
@click=${(d) => this.close(d)}
|
|
112
|
-
class=${p(c)}
|
|
113
107
|
aria-label="close"
|
|
114
108
|
iconname="close"
|
|
115
109
|
variant="icon-only"
|
|
110
|
+
size="medium"
|
|
111
|
+
skin=${i ? "tertiary" : "primary"}
|
|
116
112
|
>
|
|
117
113
|
Lukk
|
|
118
114
|
</pkt-button>
|
|
@@ -121,7 +117,7 @@ let s = class extends k {
|
|
|
121
117
|
<div class="pkt-modal__container">
|
|
122
118
|
<div
|
|
123
119
|
id="pkt-modal__content"
|
|
124
|
-
class=${
|
|
120
|
+
class=${c(o)}
|
|
125
121
|
${m(this.defaultSlot)}
|
|
126
122
|
></div>
|
|
127
123
|
</div>
|
|
@@ -131,31 +127,31 @@ let s = class extends k {
|
|
|
131
127
|
}
|
|
132
128
|
};
|
|
133
129
|
a([
|
|
134
|
-
|
|
130
|
+
n({ type: String })
|
|
135
131
|
], s.prototype, "headingText", 2);
|
|
136
132
|
a([
|
|
137
|
-
|
|
133
|
+
n({ type: Boolean })
|
|
138
134
|
], s.prototype, "removePadding", 2);
|
|
139
135
|
a([
|
|
140
|
-
|
|
136
|
+
n({ type: Boolean })
|
|
141
137
|
], s.prototype, "hideCloseButton", 2);
|
|
142
138
|
a([
|
|
143
|
-
|
|
139
|
+
n({ type: Boolean })
|
|
144
140
|
], s.prototype, "closeOnBackdropClick", 2);
|
|
145
141
|
a([
|
|
146
|
-
|
|
142
|
+
n({ type: String })
|
|
147
143
|
], s.prototype, "closeButtonSkin", 2);
|
|
148
144
|
a([
|
|
149
|
-
|
|
145
|
+
n({ type: String })
|
|
150
146
|
], s.prototype, "size", 2);
|
|
151
147
|
a([
|
|
152
|
-
|
|
148
|
+
n({ type: String })
|
|
153
149
|
], s.prototype, "variant", 2);
|
|
154
150
|
a([
|
|
155
|
-
|
|
151
|
+
n({ type: String })
|
|
156
152
|
], s.prototype, "drawerPosition", 2);
|
|
157
153
|
a([
|
|
158
|
-
|
|
154
|
+
n({ type: Boolean })
|
|
159
155
|
], s.prototype, "transparentBackdrop", 2);
|
|
160
156
|
a([
|
|
161
157
|
g()
|
package/dist/pkt-card.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./card-
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./card-uccD6Pnv.cjs"),t=e.PktCard;Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>e.PktCard});exports.default=t;
|
package/dist/pkt-card.js
CHANGED
package/dist/pkt-combobox.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./combobox-
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./combobox-BhcqC30d.cjs"),o=e.PktCombobox;Object.defineProperty(exports,"PktCombobox",{enumerable:!0,get:()=>e.PktCombobox});exports.default=o;
|