@oslokommune/punkt-elements 12.26.2 → 12.27.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 (90) hide show
  1. package/dist/{alert-MKb7NX3r.js → alert-BvN80UkI.js} +1 -1
  2. package/dist/{alert-3DZNN48_.cjs → alert-uNzcOJR9.cjs} +1 -1
  3. package/dist/alert.d.ts +7 -0
  4. package/dist/calendar.d.ts +7 -0
  5. package/dist/{card-CtipjQuP.cjs → card-BaxqXP-k.cjs} +1 -1
  6. package/dist/{card-ClWsCQfD.js → card-Br6A74Q1.js} +2 -2
  7. package/dist/card.d.ts +7 -0
  8. package/dist/{datepicker-B2W8ra1B.cjs → datepicker-BC0e34ws.cjs} +16 -15
  9. package/dist/{datepicker-BVI4szRk.js → datepicker-ONV4HuJt.js} +84 -82
  10. package/dist/datepicker.d.ts +7 -0
  11. package/dist/helptext-DHfBEO42.js +78 -0
  12. package/dist/helptext-xUdEGuNQ.cjs +24 -0
  13. package/dist/helptext.d.ts +7 -0
  14. package/dist/icon.d.ts +7 -0
  15. package/dist/index.d.ts +29 -8
  16. package/dist/input-wrapper-DeCY6nta.cjs +50 -0
  17. package/dist/input-wrapper-Df18_PvD.js +172 -0
  18. package/dist/input-wrapper.d.ts +7 -0
  19. package/dist/{link-B3PDtnXT.js → link-0N9wG5l8.js} +1 -1
  20. package/dist/{link-BnL83t0x.cjs → link-I_LKEBVK.cjs} +1 -1
  21. package/dist/link.d.ts +7 -0
  22. package/dist/{linkcard-C4q7HCwY.js → linkcard-BJeRbpq_.js} +1 -1
  23. package/dist/{linkcard-RyOjvpmF.cjs → linkcard-ClXGVwdJ.cjs} +1 -1
  24. package/dist/linkcard.d.ts +7 -0
  25. package/dist/{messagebox-BDfhozc3.js → messagebox-C5M56R8f.js} +1 -1
  26. package/dist/{messagebox-CuM1y2P_.cjs → messagebox-CC3j63Wp.cjs} +1 -1
  27. package/dist/messagebox.d.ts +7 -0
  28. package/dist/{modal-gLMGJSSY.cjs → modal-BkchlKkL.cjs} +1 -1
  29. package/dist/{modal-CYv8Qk0Y.js → modal-PKDnp91S.js} +1 -1
  30. package/dist/modal.d.ts +7 -0
  31. package/dist/pkt-alert.cjs +1 -1
  32. package/dist/pkt-alert.js +1 -1
  33. package/dist/pkt-card.cjs +1 -1
  34. package/dist/pkt-card.js +1 -1
  35. package/dist/pkt-datepicker.cjs +1 -1
  36. package/dist/pkt-datepicker.js +1 -1
  37. package/dist/pkt-helptext.cjs +1 -1
  38. package/dist/pkt-helptext.js +1 -1
  39. package/dist/pkt-index.cjs +1 -1
  40. package/dist/pkt-index.js +14 -14
  41. package/dist/pkt-input-wrapper.cjs +1 -1
  42. package/dist/pkt-input-wrapper.js +1 -1
  43. package/dist/pkt-link.cjs +1 -1
  44. package/dist/pkt-link.js +1 -1
  45. package/dist/pkt-linkcard.cjs +1 -1
  46. package/dist/pkt-linkcard.js +1 -1
  47. package/dist/pkt-messagebox.cjs +1 -1
  48. package/dist/pkt-messagebox.js +1 -1
  49. package/dist/pkt-modal.cjs +1 -1
  50. package/dist/pkt-modal.js +1 -1
  51. package/dist/pkt-select.cjs +1 -1
  52. package/dist/pkt-select.js +1 -1
  53. package/dist/pkt-slot-controller-Clbye6cM.js +85 -0
  54. package/dist/pkt-slot-controller-Oc32unDk.cjs +1 -0
  55. package/dist/pkt-tag.cjs +1 -1
  56. package/dist/pkt-tag.js +1 -1
  57. package/dist/pkt-textarea.cjs +1 -1
  58. package/dist/pkt-textarea.js +1 -1
  59. package/dist/pkt-textinput.cjs +1 -1
  60. package/dist/pkt-textinput.js +1 -1
  61. package/dist/progressbar.d.ts +7 -0
  62. package/dist/radiobutton.d.ts +7 -0
  63. package/dist/select-DFlu7Eq6.cjs +48 -0
  64. package/dist/{select-BJr30hL7.js → select-DVyh7z8C.js} +60 -43
  65. package/dist/select.d.ts +7 -0
  66. package/dist/{tag-nAMwKi6B.cjs → tag-DGywzHJ5.cjs} +1 -1
  67. package/dist/{tag-CPLBzyiV.js → tag-W9Lf1doW.js} +1 -1
  68. package/dist/tag.d.ts +7 -0
  69. package/dist/{textarea-Da-bIu5d.js → textarea-80zuPTTD.js} +35 -33
  70. package/dist/textarea-WWRAA1LV.cjs +49 -0
  71. package/dist/textarea.d.ts +7 -0
  72. package/dist/{textinput-C9pkRR6S.cjs → textinput-CE5AzOur.cjs} +4 -3
  73. package/dist/{textinput-Buj2CAKl.js → textinput-CZIE3v3S.js} +44 -42
  74. package/dist/textinput.d.ts +7 -0
  75. package/package.json +4 -4
  76. package/src/components/datepicker/datepicker.ts +8 -0
  77. package/src/components/helptext/helptext.ts +41 -35
  78. package/src/components/icon/icon.ts +10 -3
  79. package/src/components/input-wrapper/input-wrapper.ts +28 -19
  80. package/src/components/select/select.ts +41 -8
  81. package/src/components/textarea/textarea.ts +9 -1
  82. package/src/components/textinput/textinput.ts +10 -1
  83. package/dist/helptext-CNgXo34f.js +0 -75
  84. package/dist/helptext-XPScYIkx.cjs +0 -23
  85. package/dist/input-wrapper-CWvzXs6X.js +0 -160
  86. package/dist/input-wrapper-nvacN4EY.cjs +0 -48
  87. package/dist/pkt-slot-controller-BEDVscvU.cjs +0 -1
  88. package/dist/pkt-slot-controller-DhwCJd_0.js +0 -67
  89. package/dist/select-B19JEWYw.cjs +0 -44
  90. package/dist/textarea-D7uvC79V.cjs +0 -48
package/dist/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { LitElement } from 'lit';
2
+ import { PktIconName } from '@oslokommune/punkt-assets/dist/icons/icon';
2
3
  import { PropertyValues } from 'lit';
3
4
  import { ReactiveController } from 'lit';
4
5
  import { ReactiveControllerHost } from 'lit';
@@ -235,6 +236,7 @@ export declare class PktDatepicker extends PktInputElement {
235
236
  /**
236
237
  * Housekeeping / lifecycle methods
237
238
  */
239
+ constructor();
238
240
  connectedCallback(): Promise<void>;
239
241
  disconnectedCallback(): void;
240
242
  attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
@@ -247,6 +249,7 @@ export declare class PktDatepicker extends PktInputElement {
247
249
  btnRef: Ref<HTMLButtonElement>;
248
250
  calRef: Ref<PktCalendar>;
249
251
  popupRef: Ref<HTMLDivElement>;
252
+ helptextSlot: Ref<HTMLElement>;
250
253
  /**
251
254
  * Rendering
252
255
  */
@@ -298,6 +301,7 @@ declare class PktElement extends LitElement {
298
301
  }
299
302
 
300
303
  export declare class PktHelptext extends PktElement {
304
+ defaultSlot: Ref<HTMLElement>;
301
305
  constructor();
302
306
  forId: string;
303
307
  helptext: string;
@@ -309,13 +313,13 @@ export declare class PktHelptext extends PktElement {
309
313
 
310
314
  export declare class PktIcon extends PktElement {
311
315
  path: string | undefined;
312
- name: string;
316
+ name: PktIconName;
313
317
  private icon;
314
318
  private _updatedProps;
315
319
  connectedCallback(): void;
316
320
  attributeChangedCallback(name: string, _old: string | null, value: string | null): Promise<void>;
317
321
  protected updated(_changedProperties: PropertyValues): Promise<void>;
318
- protected getIcon(name?: string): Promise<void>;
322
+ protected getIcon(name?: PktIconName): Promise<void>;
319
323
  render(): TemplateResult<1>;
320
324
  }
321
325
 
@@ -372,6 +376,8 @@ declare class PktInputElement extends PktElement {
372
376
 
373
377
  export declare class PktInputWrapper extends PktElement {
374
378
  defaultSlot: Ref<HTMLElement>;
379
+ helptextSlot: Ref<HTMLElement>;
380
+ hasHelptextSlot: boolean;
375
381
  constructor();
376
382
  /**
377
383
  * Element attributes
@@ -396,6 +402,8 @@ export declare class PktInputWrapper extends PktElement {
396
402
  hasFieldset: boolean;
397
403
  useWrapper: boolean;
398
404
  role: string | null;
405
+ updateSlots(): void;
406
+ protected updated(changedProperties: PropertyValues): void;
399
407
  render(): TemplateResult<1>;
400
408
  private toggleDropdown;
401
409
  }
@@ -515,14 +523,15 @@ export declare class PktRadioButton extends PktInputElement {
515
523
  *
516
524
  */
517
525
  export declare class PktSelect extends PktInputElement implements IPktSelect {
518
- private selectRef;
519
- defaultSlot: Ref<HTMLElement>;
526
+ private inputRef;
527
+ private helptextSlot;
520
528
  options: TSelectOption[];
521
529
  value: string;
522
530
  private _options;
523
531
  constructor();
524
532
  connectedCallback(): void;
525
533
  attributeChangedCallback(name: string, _old: string, value: string): void;
534
+ updated(changedProperties: PropertyValues): void;
526
535
  protected firstUpdated(_changedProperties: PropertyValues): void;
527
536
  render(): TemplateResult<1>;
528
537
  }
@@ -532,6 +541,9 @@ declare class PktSlotController implements ReactiveController {
532
541
  nodes: Element[];
533
542
  slots: Ref<HTMLElement>[];
534
543
  observer: MutationObserver;
544
+ filledSlots: Set<string | null | undefined>;
545
+ skipOptions: boolean;
546
+ private updatingSlots;
535
547
  constructor(host: LitElement & ReactiveControllerHost, ...slots: Ref<HTMLElement>[]);
536
548
  hostConnected(): void;
537
549
  hostDisconnected(): void;
@@ -539,8 +551,6 @@ declare class PktSlotController implements ReactiveController {
539
551
  private updateNodes;
540
552
  private updateSlots;
541
553
  private handleMutations;
542
- private isSlotElement;
543
- private nodeFromElement;
544
554
  }
545
555
 
546
556
  export declare class PktTag extends PktElement {
@@ -569,18 +579,22 @@ export declare class PktTag extends PktElement {
569
579
  }
570
580
 
571
581
  export declare class PktTextarea extends PktInputElement {
582
+ private inputRef;
583
+ private helptextSlot;
572
584
  value: string;
573
585
  autocomplete: string;
574
586
  placeholder: string;
575
587
  rows: number | null;
576
588
  counterCurrent: number;
577
- private inputRef;
589
+ constructor();
578
590
  attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
579
591
  updated(changedProperties: PropertyValues): void;
580
592
  render(): TemplateResult<1>;
581
593
  }
582
594
 
583
595
  export declare class PktTextinput extends PktInputElement {
596
+ private inputRef;
597
+ private helptextSlot;
584
598
  value: string;
585
599
  type: string;
586
600
  size: number | null;
@@ -590,7 +604,7 @@ export declare class PktTextinput extends PktInputElement {
590
604
  suffix: string | null;
591
605
  omitSearchIcon: boolean;
592
606
  counterCurrent: number;
593
- private inputRef;
607
+ constructor();
594
608
  attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
595
609
  updated(changedProperties: PropertyValues): void;
596
610
  render(): TemplateResult<1>;
@@ -634,6 +648,13 @@ export declare type TTagType = 'button' | 'reset' | 'submit';
634
648
  export { }
635
649
 
636
650
 
651
+ declare global {
652
+ interface HTMLElementTagNameMap {
653
+ 'pkt-icon': PktIcon;
654
+ }
655
+ }
656
+
657
+
637
658
  declare global {
638
659
  interface Window {
639
660
  pktTz: string;
@@ -0,0 +1,50 @@
1
+ "use strict";const t=require("./element-B0UgldHm.cjs"),f=require("./pkt-slot-controller-Oc32unDk.cjs"),u=require("./ref-DDYBJ4EB.cjs"),$=require("./icon-PWn7rnfg.cjs"),a=require("./class-map-aeZWY44S.cjs"),I=require("./state-CG-binsl.cjs"),P=require("./stringutils-CkVRq4jP.cjs"),p=require("./input-wrapper-jPnKsfEC.cjs");require("./helptext-xUdEGuNQ.cjs");var W=Object.defineProperty,w=Object.getOwnPropertyDescriptor,e=(h,s,n,o)=>{for(var r=o>1?void 0:o?w(s,n):s,i=h.length-1,l;i>=0;i--)(l=h[i])&&(r=(o?l(s,n,r):l(r))||r);return o&&r&&W(s,n,r),r};exports.PktInputWrapper=class extends t.PktElement{constructor(){super(),this.defaultSlot=u.e(),this.helptextSlot=u.e(),this.hasHelptextSlot=!1,this.forId=P.uuidish(),this.label="",this.helptext=null,this.helptextDropdown=null,this.helptextDropdownButton=null,this.counter=p.specs.props.counter.default,this.counterCurrent=0,this.counterMaxLength=0,this.optionalTag=p.specs.props.optionalTag.default,this.optionalText=p.specs.props.optionalText.default,this.requiredTag=p.specs.props.requiredTag.default,this.requiredText=p.specs.props.requiredText.default,this.hasError=p.specs.props.hasError.default,this.errorMessage="",this.disabled=p.specs.props.disabled.default,this.inline=p.specs.props.inline.default,this.ariaDescribedby=void 0,this.hasFieldset=p.specs.props.hasFieldset.default,this.useWrapper=p.specs.props.useWrapper.default,this.role="group",this.slotController=new f.PktSlotController(this,this.defaultSlot,this.helptextSlot)}updateSlots(){this.hasHelptextSlot=this.slotController.filledSlots.has("helptext")}updated(s){this.updateSlots(),super.updated(s)}render(){const s={"pkt-inputwrapper":!0,"pkt-inputwrapper--error":this.hasError,"pkt-inputwrapper--disabled":this.disabled,"pkt-inputwrapper--inline":this.inline},n={"pkt-tag":!0,"pkt-tag--small":!0,"pkt-tag--thin-text":!0,"pkt-tag--blue-light":this.optionalTag,"pkt-tag--beige":!this.optionalTag&&this.requiredTag},o=this.helptextDropdown!=="",r={"pkt-inputwrapper__label":!0,"pkt-inputwrapper__fieldset":this.hasFieldset,"pkt-inputwrapper__legend":this.hasFieldset},i=this.ariaDescribedby?this.ariaDescribedby:this.helptext?`${this.forId}-helptext`:t.E,l=()=>this.optionalTag||this.requiredTag?t.x`<span class=${a.e(n)}
2
+ >${this.optionalTag?this.optionalText:this.requiredTag?this.requiredText:t.E}</span
3
+ >`:t.E,c=()=>this.useWrapper?this.hasFieldset?t.x`<legend class="pkt-inputwrapper__legend" id="${this.forId}-label">
4
+ ${this.label} ${l()}
5
+ </legend>`:o?t.x`<h2>${this.label} ${l()}</h2>`:t.x`<span>${this.label} ${l()}</span>`:t.x`<label
6
+ for="${this.forId}"
7
+ class="pkt-sr-only"
8
+ aria-describedby="${i}"
9
+ id="${this.forId}-label"
10
+ >
11
+ ${this.label}
12
+ </label>`,x=()=>t.x`
13
+ <pkt-helptext
14
+ .forId=${this.forId}
15
+ .helptext=${this.helptext}
16
+ .helptextDropdown=${this.helptextDropdown}
17
+ .helptextDropdownButton=${this.helptextDropdownButton||p.specs.props.helptextDropdownButton.default}
18
+ @toggleHelpText=${b=>{this.toggleDropdown(b)}}
19
+ ${u.n(this.helptextSlot)}
20
+ name="helptext"
21
+ ></pkt-helptext>
22
+ `,g=()=>this.counter?t.x`<div class="pkt-input__counter" aria-live="polite" aria-atomic="true">
23
+ ${this.counterCurrent||0}
24
+ ${this.counterMaxLength?`/${this.counterMaxLength}`:t.E}
25
+ </div>`:t.E,y=()=>this.hasError&&this.errorMessage?t.x`<div
26
+ role="alert"
27
+ class="pkt-alert pkt-alert--error pkt-alert--compact"
28
+ aria-live="assertive"
29
+ aria-atomic="true"
30
+ id="${this.forId}-error"
31
+ >
32
+ <pkt-icon name="alert-error" class="pkt-alert__icon"></pkt-icon>
33
+ <div class="pkt-alert__text">${$.o(this.errorMessage)}</div>
34
+ </div>`:t.E,d=()=>t.x`
35
+ ${c()} ${x()}
36
+ ${o?t.x`<label for="${this.forId}" class="pkt-sr-only" aria-describedby="${i}"
37
+ >${this.label}</label
38
+ >`:t.E}
39
+ <div class="pkt-contents" ${u.n(this.defaultSlot)}></div>
40
+ ${g()} ${y()}
41
+ `,k=()=>this.hasFieldset?t.x`<fieldset class=${a.e(r)} aria-describedby="${i}">
42
+ ${d()}
43
+ </fieldset>`:o?t.x`<div class=${a.e(r)}>${d()}</div>`:t.x`<label
44
+ class=${a.e(r)}
45
+ for="${this.forId}"
46
+ aria-describedby="${i}"
47
+ id="${this.forId}-label"
48
+ >
49
+ ${d()}
50
+ </label>`;return t.x`<div class=${a.e(s)}>${k()}</div> `}toggleDropdown(s){this.dispatchEvent(new CustomEvent("toggleHelpText",{bubbles:!1,detail:{isOpen:s.detail.isOpen}}))}};e([I.r()],exports.PktInputWrapper.prototype,"hasHelptextSlot",2);e([t.n({type:String})],exports.PktInputWrapper.prototype,"forId",2);e([t.n({type:String})],exports.PktInputWrapper.prototype,"label",2);e([t.n({type:String})],exports.PktInputWrapper.prototype,"helptext",2);e([t.n({type:String})],exports.PktInputWrapper.prototype,"helptextDropdown",2);e([t.n({type:String})],exports.PktInputWrapper.prototype,"helptextDropdownButton",2);e([t.n({type:Boolean})],exports.PktInputWrapper.prototype,"counter",2);e([t.n({type:Number})],exports.PktInputWrapper.prototype,"counterCurrent",2);e([t.n({type:Number})],exports.PktInputWrapper.prototype,"counterMaxLength",2);e([t.n({type:Boolean})],exports.PktInputWrapper.prototype,"optionalTag",2);e([t.n({type:String})],exports.PktInputWrapper.prototype,"optionalText",2);e([t.n({type:Boolean})],exports.PktInputWrapper.prototype,"requiredTag",2);e([t.n({type:String})],exports.PktInputWrapper.prototype,"requiredText",2);e([t.n({type:Boolean})],exports.PktInputWrapper.prototype,"hasError",2);e([t.n({type:String})],exports.PktInputWrapper.prototype,"errorMessage",2);e([t.n({type:Boolean})],exports.PktInputWrapper.prototype,"disabled",2);e([t.n({type:Boolean})],exports.PktInputWrapper.prototype,"inline",2);e([t.n({type:String})],exports.PktInputWrapper.prototype,"ariaDescribedby",2);e([t.n({type:Boolean})],exports.PktInputWrapper.prototype,"hasFieldset",2);e([t.n({type:Boolean})],exports.PktInputWrapper.prototype,"useWrapper",2);e([t.n({type:String,reflect:!0})],exports.PktInputWrapper.prototype,"role",2);exports.PktInputWrapper=e([t.t("pkt-input-wrapper")],exports.PktInputWrapper);
@@ -0,0 +1,172 @@
1
+ import { P as k, E as h, x as o, n as r, t as v } from "./element-BKrU5soj.js";
2
+ import { P as S } from "./pkt-slot-controller-Clbye6cM.js";
3
+ import { e as g, n as y } from "./ref-D5qG7OFB.js";
4
+ import { o as T } from "./icon-Bsb0MB2h.js";
5
+ import { e as c } from "./class-map-CQzsZCwS.js";
6
+ import { r as _ } from "./state-C36ZmZgt.js";
7
+ import { u as D } from "./stringutils-DJjRa8dG.js";
8
+ import { s } from "./input-wrapper-Bw9tARAD.js";
9
+ import "./helptext-DHfBEO42.js";
10
+ var E = Object.defineProperty, B = Object.getOwnPropertyDescriptor, e = (i, d, a, l) => {
11
+ for (var p = l > 1 ? void 0 : l ? B(d, a) : d, n = i.length - 1, u; n >= 0; n--)
12
+ (u = i[n]) && (p = (l ? u(d, a, p) : u(p)) || p);
13
+ return l && p && E(d, a, p), p;
14
+ };
15
+ let t = class extends k {
16
+ constructor() {
17
+ super(), this.defaultSlot = g(), this.helptextSlot = g(), this.hasHelptextSlot = !1, this.forId = D(), this.label = "", this.helptext = null, this.helptextDropdown = null, this.helptextDropdownButton = null, this.counter = s.props.counter.default, this.counterCurrent = 0, this.counterMaxLength = 0, this.optionalTag = s.props.optionalTag.default, this.optionalText = s.props.optionalText.default, this.requiredTag = s.props.requiredTag.default, this.requiredText = s.props.requiredText.default, this.hasError = s.props.hasError.default, this.errorMessage = "", this.disabled = s.props.disabled.default, this.inline = s.props.inline.default, this.ariaDescribedby = void 0, this.hasFieldset = s.props.hasFieldset.default, this.useWrapper = s.props.useWrapper.default, this.role = "group", this.slotController = new S(this, this.defaultSlot, this.helptextSlot);
18
+ }
19
+ updateSlots() {
20
+ this.hasHelptextSlot = this.slotController.filledSlots.has("helptext");
21
+ }
22
+ updated(i) {
23
+ this.updateSlots(), super.updated(i);
24
+ }
25
+ render() {
26
+ const i = {
27
+ "pkt-inputwrapper": !0,
28
+ "pkt-inputwrapper--error": this.hasError,
29
+ "pkt-inputwrapper--disabled": this.disabled,
30
+ "pkt-inputwrapper--inline": this.inline
31
+ }, d = {
32
+ "pkt-tag": !0,
33
+ "pkt-tag--small": !0,
34
+ "pkt-tag--thin-text": !0,
35
+ "pkt-tag--blue-light": this.optionalTag,
36
+ "pkt-tag--beige": !this.optionalTag && this.requiredTag
37
+ }, a = this.helptextDropdown !== "", l = {
38
+ "pkt-inputwrapper__label": !0,
39
+ "pkt-inputwrapper__fieldset": this.hasFieldset,
40
+ "pkt-inputwrapper__legend": this.hasFieldset
41
+ }, p = this.ariaDescribedby ? this.ariaDescribedby : this.helptext ? `${this.forId}-helptext` : h, n = () => this.optionalTag || this.requiredTag ? o`<span class=${c(d)}
42
+ >${this.optionalTag ? this.optionalText : this.requiredTag ? this.requiredText : h}</span
43
+ >` : h, u = () => this.useWrapper ? this.hasFieldset ? o`<legend class="pkt-inputwrapper__legend" id="${this.forId}-label">
44
+ ${this.label} ${n()}
45
+ </legend>` : a ? o`<h2>${this.label} ${n()}</h2>` : o`<span>${this.label} ${n()}</span>` : o`<label
46
+ for="${this.forId}"
47
+ class="pkt-sr-only"
48
+ aria-describedby="${p}"
49
+ id="${this.forId}-label"
50
+ >
51
+ ${this.label}
52
+ </label>`, b = () => o`
53
+ <pkt-helptext
54
+ .forId=${this.forId}
55
+ .helptext=${this.helptext}
56
+ .helptextDropdown=${this.helptextDropdown}
57
+ .helptextDropdownButton=${this.helptextDropdownButton || s.props.helptextDropdownButton.default}
58
+ @toggleHelpText=${(w) => {
59
+ this.toggleDropdown(w);
60
+ }}
61
+ ${y(this.helptextSlot)}
62
+ name="helptext"
63
+ ></pkt-helptext>
64
+ `, $ = () => this.counter ? o`<div class="pkt-input__counter" aria-live="polite" aria-atomic="true">
65
+ ${this.counterCurrent || 0}
66
+ ${this.counterMaxLength ? `/${this.counterMaxLength}` : h}
67
+ </div>` : h, x = () => this.hasError && this.errorMessage ? o`<div
68
+ role="alert"
69
+ class="pkt-alert pkt-alert--error pkt-alert--compact"
70
+ aria-live="assertive"
71
+ aria-atomic="true"
72
+ id="${this.forId}-error"
73
+ >
74
+ <pkt-icon name="alert-error" class="pkt-alert__icon"></pkt-icon>
75
+ <div class="pkt-alert__text">${T(this.errorMessage)}</div>
76
+ </div>` : h, f = () => o`
77
+ ${u()} ${b()}
78
+ ${a ? o`<label for="${this.forId}" class="pkt-sr-only" aria-describedby="${p}"
79
+ >${this.label}</label
80
+ >` : h}
81
+ <div class="pkt-contents" ${y(this.defaultSlot)}></div>
82
+ ${$()} ${x()}
83
+ `, m = () => this.hasFieldset ? o`<fieldset class=${c(l)} aria-describedby="${p}">
84
+ ${f()}
85
+ </fieldset>` : a ? o`<div class=${c(l)}>${f()}</div>` : o`<label
86
+ class=${c(l)}
87
+ for="${this.forId}"
88
+ aria-describedby="${p}"
89
+ id="${this.forId}-label"
90
+ >
91
+ ${f()}
92
+ </label>`;
93
+ return o`<div class=${c(i)}>${m()}</div> `;
94
+ }
95
+ toggleDropdown(i) {
96
+ this.dispatchEvent(
97
+ new CustomEvent("toggleHelpText", {
98
+ bubbles: !1,
99
+ detail: { isOpen: i.detail.isOpen }
100
+ })
101
+ );
102
+ }
103
+ };
104
+ e([
105
+ _()
106
+ ], t.prototype, "hasHelptextSlot", 2);
107
+ e([
108
+ r({ type: String })
109
+ ], t.prototype, "forId", 2);
110
+ e([
111
+ r({ type: String })
112
+ ], t.prototype, "label", 2);
113
+ e([
114
+ r({ type: String })
115
+ ], t.prototype, "helptext", 2);
116
+ e([
117
+ r({ type: String })
118
+ ], t.prototype, "helptextDropdown", 2);
119
+ e([
120
+ r({ type: String })
121
+ ], t.prototype, "helptextDropdownButton", 2);
122
+ e([
123
+ r({ type: Boolean })
124
+ ], t.prototype, "counter", 2);
125
+ e([
126
+ r({ type: Number })
127
+ ], t.prototype, "counterCurrent", 2);
128
+ e([
129
+ r({ type: Number })
130
+ ], t.prototype, "counterMaxLength", 2);
131
+ e([
132
+ r({ type: Boolean })
133
+ ], t.prototype, "optionalTag", 2);
134
+ e([
135
+ r({ type: String })
136
+ ], t.prototype, "optionalText", 2);
137
+ e([
138
+ r({ type: Boolean })
139
+ ], t.prototype, "requiredTag", 2);
140
+ e([
141
+ r({ type: String })
142
+ ], t.prototype, "requiredText", 2);
143
+ e([
144
+ r({ type: Boolean })
145
+ ], t.prototype, "hasError", 2);
146
+ e([
147
+ r({ type: String })
148
+ ], t.prototype, "errorMessage", 2);
149
+ e([
150
+ r({ type: Boolean })
151
+ ], t.prototype, "disabled", 2);
152
+ e([
153
+ r({ type: Boolean })
154
+ ], t.prototype, "inline", 2);
155
+ e([
156
+ r({ type: String })
157
+ ], t.prototype, "ariaDescribedby", 2);
158
+ e([
159
+ r({ type: Boolean })
160
+ ], t.prototype, "hasFieldset", 2);
161
+ e([
162
+ r({ type: Boolean })
163
+ ], t.prototype, "useWrapper", 2);
164
+ e([
165
+ r({ type: String, reflect: !0 })
166
+ ], t.prototype, "role", 2);
167
+ t = e([
168
+ v("pkt-input-wrapper")
169
+ ], t);
170
+ export {
171
+ t as P
172
+ };
@@ -1,6 +1,13 @@
1
1
  export { }
2
2
 
3
3
 
4
+ declare global {
5
+ interface HTMLElementTagNameMap {
6
+ 'pkt-icon': PktIcon;
7
+ }
8
+ }
9
+
10
+
4
11
  declare global {
5
12
  interface Window {
6
13
  pktTz: string;
@@ -1,5 +1,5 @@
1
1
  import { P as f, x as k, E as h, n as i, t as m } from "./element-BKrU5soj.js";
2
- import { P as d } from "./pkt-slot-controller-DhwCJd_0.js";
2
+ import { P as d } from "./pkt-slot-controller-Clbye6cM.js";
3
3
  import { e as u, n as P } from "./ref-D5qG7OFB.js";
4
4
  import { e as y } from "./class-map-CQzsZCwS.js";
5
5
  import "./icon-Bsb0MB2h.js";
@@ -1,4 +1,4 @@
1
- "use strict";const e=require("./element-B0UgldHm.cjs"),k=require("./pkt-slot-controller-BEDVscvU.cjs"),p=require("./ref-DDYBJ4EB.cjs"),h=require("./class-map-aeZWY44S.cjs");require("./icon-PWn7rnfg.cjs");const f="pkt-link",u=!0,d={href:{name:"URL",description:"URL til lenken",type:"string",default:"#"},target:{name:"Mål",description:"Mål for lenken",type:["_blank","_self","_parent","_top"],default:"_self"},iconName:{name:"Ikon",description:"Ikon som skal vises ved siden av lenketeksten",type:"icon"},iconPosition:{name:"Ikonposisjon",description:"Posisjonen til ikonet i forhold til lenketeksten",type:["left","right"]},external:{name:"Ekstern lenke",description:"Vis ikon for ekstern lenke",type:"boolean",default:!1}},m={default:{description:"Innholdet i lenken"}},c={name:f,"css-class":"pkt-link","dark-mode":!0,isElement:u,props:d,slots:m};var P=Object.defineProperty,y=Object.getOwnPropertyDescriptor,i=(s,n,r,o)=>{for(var t=o>1?void 0:o?y(n,r):n,l=s.length-1,a;l>=0;l--)(a=s[l])&&(t=(o?a(n,r,t):a(t))||t);return o&&t&&P(n,r,t),t};exports.PktLink=class extends e.PktElement{constructor(){super(),this.defaultSlot=p.e(),this.href=c.props.href.default,this.iconName=void 0,this.iconPosition=void 0,this.external=c.props.external.default,this.target=c.props.target.default,this.slotController=new k.PktSlotController(this,this.defaultSlot)}render(){const n={"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 e.x`<a
1
+ "use strict";const e=require("./element-B0UgldHm.cjs"),k=require("./pkt-slot-controller-Oc32unDk.cjs"),p=require("./ref-DDYBJ4EB.cjs"),h=require("./class-map-aeZWY44S.cjs");require("./icon-PWn7rnfg.cjs");const f="pkt-link",u=!0,d={href:{name:"URL",description:"URL til lenken",type:"string",default:"#"},target:{name:"Mål",description:"Mål for lenken",type:["_blank","_self","_parent","_top"],default:"_self"},iconName:{name:"Ikon",description:"Ikon som skal vises ved siden av lenketeksten",type:"icon"},iconPosition:{name:"Ikonposisjon",description:"Posisjonen til ikonet i forhold til lenketeksten",type:["left","right"]},external:{name:"Ekstern lenke",description:"Vis ikon for ekstern lenke",type:"boolean",default:!1}},m={default:{description:"Innholdet i lenken"}},c={name:f,"css-class":"pkt-link","dark-mode":!0,isElement:u,props:d,slots:m};var P=Object.defineProperty,y=Object.getOwnPropertyDescriptor,i=(s,n,r,o)=>{for(var t=o>1?void 0:o?y(n,r):n,l=s.length-1,a;l>=0;l--)(a=s[l])&&(t=(o?a(n,r,t):a(t))||t);return o&&t&&P(n,r,t),t};exports.PktLink=class extends e.PktElement{constructor(){super(),this.defaultSlot=p.e(),this.href=c.props.href.default,this.iconName=void 0,this.iconPosition=void 0,this.external=c.props.external.default,this.target=c.props.target.default,this.slotController=new k.PktSlotController(this,this.defaultSlot)}render(){const n={"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 e.x`<a
2
2
  class=${h.e(n)}
3
3
  href=${this.href}
4
4
  @click=${this.handleClick}
package/dist/link.d.ts CHANGED
@@ -1,6 +1,13 @@
1
1
  export { }
2
2
 
3
3
 
4
+ declare global {
5
+ interface HTMLElementTagNameMap {
6
+ 'pkt-icon': PktIcon;
7
+ }
8
+ }
9
+
10
+
4
11
  declare global {
5
12
  interface Window {
6
13
  pktTz: string;
@@ -1,6 +1,6 @@
1
1
  import { P as f, x as c, n, t as h } from "./element-BKrU5soj.js";
2
2
  import { e as k, n as m } from "./ref-D5qG7OFB.js";
3
- import { P as u } from "./pkt-slot-controller-DhwCJd_0.js";
3
+ import { P as u } from "./pkt-slot-controller-Clbye6cM.js";
4
4
  import "./icon-Bsb0MB2h.js";
5
5
  var _ = Object.defineProperty, d = Object.getOwnPropertyDescriptor, r = (l, i, s, o) => {
6
6
  for (var e = o > 1 ? void 0 : o ? d(i, s) : i, a = l.length - 1, p; a >= 0; a--)
@@ -1,4 +1,4 @@
1
- "use strict";const t=require("./element-B0UgldHm.cjs"),k=require("./ref-DDYBJ4EB.cjs"),p=require("./pkt-slot-controller-BEDVscvU.cjs");require("./icon-PWn7rnfg.cjs");var c=Object.defineProperty,h=Object.getOwnPropertyDescriptor,r=(s,n,i,l)=>{for(var e=l>1?void 0:l?h(n,i):n,o=s.length-1,a;o>=0;o--)(a=s[o])&&(e=(l?a(n,i,e):a(e))||e);return l&&e&&c(n,i,e),e};exports.PktLinkCard=class extends t.PktElement{constructor(){super(),this.defaultSlot=k.e(),this.title="",this.href="#",this.iconName="",this.external=!1,this.openInNewTab=!1,this.skin="normal",this.slotController=new p.PktSlotController(this,this.defaultSlot)}render(){const n=["pkt-linkcard",this.skin&&`pkt-linkcard--${this.skin}`].filter(Boolean).join(" "),i=["pkt-linkcard__title",this.external&&"pkt-link pkt-link--external"].filter(Boolean).join(" ");return t.x`
1
+ "use strict";const t=require("./element-B0UgldHm.cjs"),k=require("./ref-DDYBJ4EB.cjs"),p=require("./pkt-slot-controller-Oc32unDk.cjs");require("./icon-PWn7rnfg.cjs");var c=Object.defineProperty,h=Object.getOwnPropertyDescriptor,r=(s,n,i,l)=>{for(var e=l>1?void 0:l?h(n,i):n,o=s.length-1,a;o>=0;o--)(a=s[o])&&(e=(l?a(n,i,e):a(e))||e);return l&&e&&c(n,i,e),e};exports.PktLinkCard=class extends t.PktElement{constructor(){super(),this.defaultSlot=k.e(),this.title="",this.href="#",this.iconName="",this.external=!1,this.openInNewTab=!1,this.skin="normal",this.slotController=new p.PktSlotController(this,this.defaultSlot)}render(){const n=["pkt-linkcard",this.skin&&`pkt-linkcard--${this.skin}`].filter(Boolean).join(" "),i=["pkt-linkcard__title",this.external&&"pkt-link pkt-link--external"].filter(Boolean).join(" ");return t.x`
2
2
  <a
3
3
  href=${this.href}
4
4
  class=${n}
@@ -1,6 +1,13 @@
1
1
  export { }
2
2
 
3
3
 
4
+ declare global {
5
+ interface HTMLElementTagNameMap {
6
+ 'pkt-icon': PktIcon;
7
+ }
8
+ }
9
+
10
+
4
11
  declare global {
5
12
  interface Window {
6
13
  pktTz: string;
@@ -1,5 +1,5 @@
1
1
  import { P as b, x as c, E as d, n, t as k } from "./element-BKrU5soj.js";
2
- import { P as u } from "./pkt-slot-controller-DhwCJd_0.js";
2
+ import { P as u } from "./pkt-slot-controller-Clbye6cM.js";
3
3
  import { e as g, n as f } from "./ref-D5qG7OFB.js";
4
4
  import { e as h } from "./class-map-CQzsZCwS.js";
5
5
  import { r as v } from "./state-C36ZmZgt.js";
@@ -1,4 +1,4 @@
1
- "use strict";const e=require("./element-B0UgldHm.cjs"),b=require("./pkt-slot-controller-BEDVscvU.cjs"),p=require("./ref-DDYBJ4EB.cjs"),k=require("./class-map-aeZWY44S.cjs"),d=require("./state-CG-binsl.cjs");require("./icon-PWn7rnfg.cjs");const u="pkt-messagebox",m=!0,g={onClose:{description:"React: Event som trigges når meldingsboksen lukkes"},"on-close":{description:"Vue: Event som trigges når meldingsboksen lukkes"}},h={title:{name:"Tittel",description:"Tittelen på meldingsboksen",type:"string"},skin:{name:"Utseende",description:"Velg farge på meldingsboksen",type:["beige","blue","red","green"],default:"beige"},compact:{name:"Kompakt",description:"Gjør meldingsboksen mindre",type:"boolean",default:!1},closable:{name:"Kan lukkes",description:"Viser lukkeknapp",type:"boolean",default:!1}},f={default:{description:"Innholdet i meldingsboksen"}},c={name:u,"css-class":"pkt-messagebox",isElement:m,events:g,props:h,slots:f};var x=Object.defineProperty,v=Object.getOwnPropertyDescriptor,o=(i,t,n,l)=>{for(var s=l>1?void 0:l?v(t,n):t,r=i.length-1,a;r>=0;r--)(a=i[r])&&(s=(l?a(t,n,s):a(s))||s);return l&&s&&x(t,n,s),s};exports.PktMessagebox=class extends e.PktElement{constructor(){super(),this.defaultSlot=p.e(),this.closable=c.props.closable.default,this.compact=c.props.compact.default,this.title="",this.skin=c.props.skin.default,this._isClosed=!1,this.close=t=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:t},bubbles:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:t},bubbles:!0}))},this.slotController=new b.PktSlotController(this,this.defaultSlot),this._isClosed=!1}render(){const t={"pkt-messagebox":!0,"pkt-messagebox--compact":this.compact,[`pkt-messagebox--${this.skin}`]:this.skin,"pkt-messagebox--closable":this.closable,"pkt-hide":this._isClosed};return e.x`<div class=${k.e(t)}>
1
+ "use strict";const e=require("./element-B0UgldHm.cjs"),b=require("./pkt-slot-controller-Oc32unDk.cjs"),p=require("./ref-DDYBJ4EB.cjs"),k=require("./class-map-aeZWY44S.cjs"),d=require("./state-CG-binsl.cjs");require("./icon-PWn7rnfg.cjs");const u="pkt-messagebox",m=!0,g={onClose:{description:"React: Event som trigges når meldingsboksen lukkes"},"on-close":{description:"Vue: Event som trigges når meldingsboksen lukkes"}},h={title:{name:"Tittel",description:"Tittelen på meldingsboksen",type:"string"},skin:{name:"Utseende",description:"Velg farge på meldingsboksen",type:["beige","blue","red","green"],default:"beige"},compact:{name:"Kompakt",description:"Gjør meldingsboksen mindre",type:"boolean",default:!1},closable:{name:"Kan lukkes",description:"Viser lukkeknapp",type:"boolean",default:!1}},f={default:{description:"Innholdet i meldingsboksen"}},c={name:u,"css-class":"pkt-messagebox",isElement:m,events:g,props:h,slots:f};var x=Object.defineProperty,v=Object.getOwnPropertyDescriptor,o=(i,t,n,l)=>{for(var s=l>1?void 0:l?v(t,n):t,r=i.length-1,a;r>=0;r--)(a=i[r])&&(s=(l?a(t,n,s):a(s))||s);return l&&s&&x(t,n,s),s};exports.PktMessagebox=class extends e.PktElement{constructor(){super(),this.defaultSlot=p.e(),this.closable=c.props.closable.default,this.compact=c.props.compact.default,this.title="",this.skin=c.props.skin.default,this._isClosed=!1,this.close=t=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent("close",{detail:{origin:t},bubbles:!0})),this.dispatchEvent(new CustomEvent("on-close",{detail:{origin:t},bubbles:!0}))},this.slotController=new b.PktSlotController(this,this.defaultSlot),this._isClosed=!1}render(){const t={"pkt-messagebox":!0,"pkt-messagebox--compact":this.compact,[`pkt-messagebox--${this.skin}`]:this.skin,"pkt-messagebox--closable":this.closable,"pkt-hide":this._isClosed};return e.x`<div class=${k.e(t)}>
2
2
  ${this.closable?e.x`<div class="pkt-messagebox__close">
3
3
  <button
4
4
  @click=${this.close}
@@ -1,6 +1,13 @@
1
1
  export { }
2
2
 
3
3
 
4
+ declare global {
5
+ interface HTMLElementTagNameMap {
6
+ 'pkt-icon': PktIcon;
7
+ }
8
+ }
9
+
10
+
4
11
  declare global {
5
12
  interface Window {
6
13
  pktTz: string;
@@ -1,4 +1,4 @@
1
- "use strict";const d=require("./class-map-aeZWY44S.cjs"),s=require("./element-B0UgldHm.cjs"),k=require("./state-CG-binsl.cjs"),m=require("./pkt-slot-controller-BEDVscvU.cjs"),r=require("./ref-DDYBJ4EB.cjs");require("./icon-PWn7rnfg.cjs");const h="pkt-modal",g=!0,f={"background-click":{description:"Event som trigges når bakgrunnen trykkes på"},close:{description:"Event som trigges når meldingsboksen lukkes"}},v={headingText:{name:"Heading text",description:"Heading tekst på modalen",type:"string"},hideCloseButton:{name:"Gjem 'Lukk'-knapp",description:"Gjemmer lukkeknappen. Dersom denne er satt til true, vil ikke lukkeknappen vises, og dermed er det viktig at man tilbyr en annen måte som f.eks. en knapp for å lukke modalen på.",type:"boolean",default:!1},closeOnBackdropClick:{name:"Lukk modalen når bakgrunnen trykkes på",description:"Lukk modalen når bakgrunnen trykkes på",type:"boolean",default:!1},closeButtonSkin:{name:"Stil på lukkeknappen",description:"Stil på lukkeknappen",type:["blue","yellow-filled"],default:"blue"},size:{name:"Størrelse",description:"Størrelsen på modalen",type:["small","medium","large"],default:"medium"}},b={default:{description:"Innholdet i meldingen. Her tilbyr vi støtteklasser for å style 1-3 knapper i modalen."}},p={name:h,"css-class":"pkt-modal",isElements:g,events:f,props:v,slots:b};var y=Object.defineProperty,_=Object.getOwnPropertyDescriptor,l=(c,e,t,o)=>{for(var n=o>1?void 0:o?_(e,t):e,i=c.length-1,a;i>=0;i--)(a=c[i])&&(n=(o?a(e,t,n):a(n))||n);return o&&n&&y(e,t,n),n};exports.PktModal=class extends s.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.defaultSlot=r.e(),this.dialogRef=r.e(),this._isOpen=!1,this.close=(e,t=!1)=>{var i;this._isOpen=!1,t||(i=this.dialogRef.value)==null||i.close();const o=document.activeElement;o&&!this.isElementInViewport(o)&&o.scrollIntoView({behavior:"smooth",block:"nearest"}),this.dispatchEvent(new CustomEvent("close",{detail:{origin:e},bubbles:!0,composed:!0})),document.querySelector(".pkt-modal")&&document.body.classList.remove("pkt-modal--open"),this.requestUpdate()},this.showModal=e=>{var o;this._isOpen=!0,(o=this.dialogRef.value)==null||o.showModal();const t=document.querySelector(".pkt-modal");requestAnimationFrame(()=>{var n;this.dialogRef.value&&((n=this.dialogRef.value)==null||n.focus())}),t&&document.body.classList.add("pkt-modal--open"),this.dispatchEvent(new CustomEvent("showModal",{detail:{origin:e},bubbles:!0,composed:!0})),this.requestUpdate()},this.slotController=new m.PktSlotController(this,this.defaultSlot),this._isOpen=!1}async connectedCallback(){var e;super.connectedCallback(),document.addEventListener("keydown",this.handleKeyDown.bind(this)),document.addEventListener("click",this.handleBackdropClick.bind(this)),(e=this.dialogRef.value)==null||e.addEventListener("submit",t=>this.close(t,!0))}disconnectedCallback(){var e;super.disconnectedCallback(),document.removeEventListener("keydown",this.handleKeyDown.bind(this)),document.removeEventListener("click",this.handleBackdropClick.bind(this)),(e=this.dialogRef.value)==null||e.removeEventListener("submit",t=>this.close(t,!0))}handleKeyDown(e){e.key==="Escape"&&this.close(e)}handleBackdropClick(e){var t;this.closeOnBackdropClick&&e.target===((t=this.dialogRef)==null?void 0:t.value)&&this.close(e)}isElementInViewport(e){const t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)}render(){const e={"pkt-modal":!0,"pkt-modal--removePadding":this.removePadding??!1,"pkt-modal--noHeadingText":this.headingText===""||this.headingText===void 0,[`pkt-modal--${this.size}`]:this.size!==void 0},t={"pkt-modal__headingText":!0,"pkt-txt-24":!0},o={"pkt-modal__content":!0,"pkt-txt-18-light":!0},n=this.closeButtonSkin==="blue",i={"pkt-modal__closeButton":!0,[`pkt-modal__closeButton--${this.closeButtonSkin}`]:!0},a={"pkt-btn":!0,[`pkt-btn--${n?"tertiary":"primary"}`]:!0,"pkt-btn--icon-only":!0,"pkt-btn--medium":!0};return s.x`
1
+ "use strict";const d=require("./class-map-aeZWY44S.cjs"),s=require("./element-B0UgldHm.cjs"),k=require("./state-CG-binsl.cjs"),m=require("./pkt-slot-controller-Oc32unDk.cjs"),r=require("./ref-DDYBJ4EB.cjs");require("./icon-PWn7rnfg.cjs");const h="pkt-modal",g=!0,f={"background-click":{description:"Event som trigges når bakgrunnen trykkes på"},close:{description:"Event som trigges når meldingsboksen lukkes"}},v={headingText:{name:"Heading text",description:"Heading tekst på modalen",type:"string"},hideCloseButton:{name:"Gjem 'Lukk'-knapp",description:"Gjemmer lukkeknappen. Dersom denne er satt til true, vil ikke lukkeknappen vises, og dermed er det viktig at man tilbyr en annen måte som f.eks. en knapp for å lukke modalen på.",type:"boolean",default:!1},closeOnBackdropClick:{name:"Lukk modalen når bakgrunnen trykkes på",description:"Lukk modalen når bakgrunnen trykkes på",type:"boolean",default:!1},closeButtonSkin:{name:"Stil på lukkeknappen",description:"Stil på lukkeknappen",type:["blue","yellow-filled"],default:"blue"},size:{name:"Størrelse",description:"Størrelsen på modalen",type:["small","medium","large"],default:"medium"}},b={default:{description:"Innholdet i meldingen. Her tilbyr vi støtteklasser for å style 1-3 knapper i modalen."}},p={name:h,"css-class":"pkt-modal",isElements:g,events:f,props:v,slots:b};var y=Object.defineProperty,_=Object.getOwnPropertyDescriptor,l=(c,e,t,o)=>{for(var n=o>1?void 0:o?_(e,t):e,i=c.length-1,a;i>=0;i--)(a=c[i])&&(n=(o?a(e,t,n):a(n))||n);return o&&n&&y(e,t,n),n};exports.PktModal=class extends s.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.defaultSlot=r.e(),this.dialogRef=r.e(),this._isOpen=!1,this.close=(e,t=!1)=>{var i;this._isOpen=!1,t||(i=this.dialogRef.value)==null||i.close();const o=document.activeElement;o&&!this.isElementInViewport(o)&&o.scrollIntoView({behavior:"smooth",block:"nearest"}),this.dispatchEvent(new CustomEvent("close",{detail:{origin:e},bubbles:!0,composed:!0})),document.querySelector(".pkt-modal")&&document.body.classList.remove("pkt-modal--open"),this.requestUpdate()},this.showModal=e=>{var o;this._isOpen=!0,(o=this.dialogRef.value)==null||o.showModal();const t=document.querySelector(".pkt-modal");requestAnimationFrame(()=>{var n;this.dialogRef.value&&((n=this.dialogRef.value)==null||n.focus())}),t&&document.body.classList.add("pkt-modal--open"),this.dispatchEvent(new CustomEvent("showModal",{detail:{origin:e},bubbles:!0,composed:!0})),this.requestUpdate()},this.slotController=new m.PktSlotController(this,this.defaultSlot),this._isOpen=!1}async connectedCallback(){var e;super.connectedCallback(),document.addEventListener("keydown",this.handleKeyDown.bind(this)),document.addEventListener("click",this.handleBackdropClick.bind(this)),(e=this.dialogRef.value)==null||e.addEventListener("submit",t=>this.close(t,!0))}disconnectedCallback(){var e;super.disconnectedCallback(),document.removeEventListener("keydown",this.handleKeyDown.bind(this)),document.removeEventListener("click",this.handleBackdropClick.bind(this)),(e=this.dialogRef.value)==null||e.removeEventListener("submit",t=>this.close(t,!0))}handleKeyDown(e){e.key==="Escape"&&this.close(e)}handleBackdropClick(e){var t;this.closeOnBackdropClick&&e.target===((t=this.dialogRef)==null?void 0:t.value)&&this.close(e)}isElementInViewport(e){const t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)}render(){const e={"pkt-modal":!0,"pkt-modal--removePadding":this.removePadding??!1,"pkt-modal--noHeadingText":this.headingText===""||this.headingText===void 0,[`pkt-modal--${this.size}`]:this.size!==void 0},t={"pkt-modal__headingText":!0,"pkt-txt-24":!0},o={"pkt-modal__content":!0,"pkt-txt-18-light":!0},n=this.closeButtonSkin==="blue",i={"pkt-modal__closeButton":!0,[`pkt-modal__closeButton--${this.closeButtonSkin}`]:!0},a={"pkt-btn":!0,[`pkt-btn--${n?"tertiary":"primary"}`]:!0,"pkt-btn--icon-only":!0,"pkt-btn--medium":!0};return s.x`
2
2
  <dialog
3
3
  class=${d.e(e)}
4
4
  aria-modal=${this._isOpen}
@@ -1,7 +1,7 @@
1
1
  import { e as c } from "./class-map-CQzsZCwS.js";
2
2
  import { P as f, x as p, E as m, n as a, t as g } from "./element-BKrU5soj.js";
3
3
  import { r as v } from "./state-C36ZmZgt.js";
4
- import { P as b } from "./pkt-slot-controller-DhwCJd_0.js";
4
+ import { P as b } from "./pkt-slot-controller-Clbye6cM.js";
5
5
  import { e as k, n as h } from "./ref-D5qG7OFB.js";
6
6
  import "./icon-Bsb0MB2h.js";
7
7
  const y = "pkt-modal", _ = !0, C = {
package/dist/modal.d.ts CHANGED
@@ -1,6 +1,13 @@
1
1
  export { }
2
2
 
3
3
 
4
+ declare global {
5
+ interface HTMLElementTagNameMap {
6
+ 'pkt-icon': PktIcon;
7
+ }
8
+ }
9
+
10
+
4
11
  declare global {
5
12
  interface Window {
6
13
  pktTz: string;
@@ -1 +1 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./alert-3DZNN48_.cjs"),t=e.PktAlert;Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>e.PktAlert});exports.default=t;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./alert-uNzcOJR9.cjs"),t=e.PktAlert;Object.defineProperty(exports,"PktAlert",{enumerable:!0,get:()=>e.PktAlert});exports.default=t;
package/dist/pkt-alert.js CHANGED
@@ -1,4 +1,4 @@
1
- import { P as t } from "./alert-MKb7NX3r.js";
1
+ import { P as t } from "./alert-BvN80UkI.js";
2
2
  const e = t;
3
3
  export {
4
4
  t as PktAlert,
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-CtipjQuP.cjs"),t=e.PktCard;Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>e.PktCard});exports.default=t;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./card-BaxqXP-k.cjs"),t=e.PktCard;Object.defineProperty(exports,"PktCard",{enumerable:!0,get:()=>e.PktCard});exports.default=t;
package/dist/pkt-card.js CHANGED
@@ -1,4 +1,4 @@
1
- import { P as a } from "./card-ClWsCQfD.js";
1
+ import { P as a } from "./card-Br6A74Q1.js";
2
2
  const r = a;
3
3
  export {
4
4
  a as PktCard,
@@ -1 +1 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./datepicker-B2W8ra1B.cjs"),t=e.PktDatepicker;Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>e.PktDatepicker});exports.default=t;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./datepicker-BC0e34ws.cjs"),t=e.PktDatepicker;Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>e.PktDatepicker});exports.default=t;
@@ -1,4 +1,4 @@
1
- import { P as t } from "./datepicker-BVI4szRk.js";
1
+ import { P as t } from "./datepicker-ONV4HuJt.js";
2
2
  const a = t;
3
3
  export {
4
4
  t as PktDatepicker,
@@ -1 +1 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./helptext-XPScYIkx.cjs"),t=e.PktHelptext;Object.defineProperty(exports,"PktHelptext",{enumerable:!0,get:()=>e.PktHelptext});exports.default=t;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./helptext-xUdEGuNQ.cjs"),t=e.PktHelptext;Object.defineProperty(exports,"PktHelptext",{enumerable:!0,get:()=>e.PktHelptext});exports.default=t;
@@ -1,4 +1,4 @@
1
- import { P as t } from "./helptext-CNgXo34f.js";
1
+ import { P as t } from "./helptext-DHfBEO42.js";
2
2
  const p = t;
3
3
  export {
4
4
  t as PktHelptext,
@@ -1,4 +1,4 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./alert-3DZNN48_.cjs"),p=require("./calendar-CPEJ1enc.cjs"),d=require("./card-CtipjQuP.cjs"),t=require("./element-B0UgldHm.cjs"),P=require("./pkt-slot-controller-BEDVscvU.cjs"),i=require("./ref-DDYBJ4EB.cjs"),k=require("./class-map-aeZWY44S.cjs"),b=require("./datepicker-B2W8ra1B.cjs"),g=require("./helptext-XPScYIkx.cjs"),m=require("./icon-PWn7rnfg.cjs"),h=require("./input-wrapper-nvacN4EY.cjs"),f=require("./link-BnL83t0x.cjs"),y=require("./linkcard-RyOjvpmF.cjs"),v=require("./messagebox-CuM1y2P_.cjs"),x=require("./modal-gLMGJSSY.cjs"),C=require("./progressbar-CkaLjQYa.cjs"),O=require("./radiobutton-HmicLshI.cjs"),j=require("./tag-nAMwKi6B.cjs"),q=require("./textarea-D7uvC79V.cjs"),S=require("./textinput-C9pkRR6S.cjs"),$=require("./select-B19JEWYw.cjs");var _=Object.defineProperty,T=Object.getOwnPropertyDescriptor,o=(a,e,r,s)=>{for(var n=s>1?void 0:s?T(e,r):e,l=a.length-1,u;l>=0;l--)(u=a[l])&&(n=(s?u(e,r,n):u(n))||n);return s&&n&&_(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=i.e(),this.namedSlot=i.e(),this.slotController=new P.PktSlotController(this,this.defaultSlot,this.namedSlot)}connectedCallback(){this.strings.length&&this.strings.forEach(e=>{this._list.push(e.toUpperCase())}),super.connectedCallback()}render(){const e={"pkt-component":!0,"pkt-component--has-list":this.strings.length>0,"pkt-darkmode":this.darkmode};return t.x`
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./alert-uNzcOJR9.cjs"),p=require("./calendar-CPEJ1enc.cjs"),d=require("./card-BaxqXP-k.cjs"),t=require("./element-B0UgldHm.cjs"),P=require("./pkt-slot-controller-Oc32unDk.cjs"),i=require("./ref-DDYBJ4EB.cjs"),k=require("./class-map-aeZWY44S.cjs"),b=require("./datepicker-BC0e34ws.cjs"),g=require("./helptext-xUdEGuNQ.cjs"),m=require("./icon-PWn7rnfg.cjs"),h=require("./input-wrapper-DeCY6nta.cjs"),f=require("./link-I_LKEBVK.cjs"),y=require("./linkcard-ClXGVwdJ.cjs"),v=require("./messagebox-CC3j63Wp.cjs"),x=require("./modal-BkchlKkL.cjs"),C=require("./progressbar-CkaLjQYa.cjs"),O=require("./radiobutton-HmicLshI.cjs"),j=require("./tag-DGywzHJ5.cjs"),q=require("./textarea-WWRAA1LV.cjs"),S=require("./textinput-CE5AzOur.cjs"),$=require("./select-DFlu7Eq6.cjs");var _=Object.defineProperty,T=Object.getOwnPropertyDescriptor,o=(a,e,r,s)=>{for(var n=s>1?void 0:s?T(e,r):e,l=a.length-1,u;l>=0;l--)(u=a[l])&&(n=(s?u(e,r,n):u(n))||n);return s&&n&&_(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=i.e(),this.namedSlot=i.e(),this.slotController=new P.PktSlotController(this,this.defaultSlot,this.namedSlot)}connectedCallback(){this.strings.length&&this.strings.forEach(e=>{this._list.push(e.toUpperCase())}),super.connectedCallback()}render(){const e={"pkt-component":!0,"pkt-component--has-list":this.strings.length>0,"pkt-darkmode":this.darkmode};return t.x`
2
2
  <div class="${k.e(e)}">
3
3
  <h1 class="pkt-txt-28">${this.string}</h1>
4
4