@oslokommune/punkt-elements 13.5.12 → 13.6.0

package/src/components/select/select.ts

@@ -43,7 +43,7 @@ export class PktSelect extends PktInputElement implements IPktSelect {
   private inputRef: Ref<HTMLSelectElement> = createRef()
   private helptextSlot: Ref<HTMLElement> = createRef()
 
-  @property({ type: Array }) options: TSelectOption[] = []
+  @property({ type: Array, attribute: 'options' }) private _optionsProp: TSelectOption[] = []
   @property({ type: String }) value: string = ''
 
   @state() private _options: TSelectOption[] = []
@@ -51,6 +51,19 @@ export class PktSelect extends PktInputElement implements IPktSelect {
   public selectedIndex: number | null = -1
   public selectedOptions: HTMLCollectionOf<HTMLOptionElement> | undefined = undefined
 
+  // Getter and setter for options to expose the actual parsed options
+  public get options(): TSelectOption[] {
+    return this._options.map((option) => ({
+      ...option,
+      selected: option.value === this.value,
+    }))
+  }
+
+  public set options(value: TSelectOption[]) {
+    this._optionsProp = value
+    this.requestUpdate('_optionsProp', this._options)
+  }
+
   constructor() {
     super()
     this.optionsController = new PktOptionsSlotController(this)
@@ -58,11 +71,10 @@ export class PktSelect extends PktInputElement implements IPktSelect {
     this.slotController.skipOptions = true
   }
 
-  // Used for initilization
   connectedCallback(): void {
     super.connectedCallback()
 
-    const optionsReceivedFromProps = this.options.length > 0
+    const optionsReceivedFromProps = this._optionsProp.length > 0
     const checkIfOptionNodesInSlot =
       this.optionsController.nodes.length && this.optionsController.nodes.length > 0
 
@@ -83,7 +95,7 @@ export class PktSelect extends PktInputElement implements IPktSelect {
         this._options.push(option)
       })
     } else {
-      this._options = this.options
+      this._options = this._optionsProp
       this._options.forEach((option) => {
         if (option.selected && !this.value) {
           this.value = option.value
@@ -94,17 +106,32 @@ export class PktSelect extends PktInputElement implements IPktSelect {
 
   // Support native Select method `add`
   public add(item: HTMLOptionElement, before?: HTMLOptionElement | number) {
-    this.inputRef.value?.add(item, before)
-    this._options.push({
+    const newOption = {
       value: item.value || item.text,
       label: item.text || item.value,
       selected: item.selected,
       disabled: item.disabled,
-    })
+    }
+
+    // Add to our internal options array at the correct position
+    if (before === undefined) {
+      this._options.push(newOption)
+    } else if (typeof before === 'number') {
+      this._options.splice(before, 0, newOption)
+    } else {
+      // If before is an HTMLOptionElement, find its index in our options
+      const beforeValue = before.value || before.text
+      const beforeIndex = this._options.findIndex((opt) => opt.value === beforeValue)
+      if (beforeIndex >= 0) {
+        this._options.splice(beforeIndex, 0, newOption)
+      } else {
+        this._options.push(newOption)
+      }
+    }
+
     if (item.selected) {
       this.value = item.value || item.text
-      this.selectedIndex = this.returnNumberOrNull(this.inputRef.value?.selectedIndex)
-      this.selectedOptions = this.inputRef.value?.selectedOptions
+      this.selectedIndex = this._options.findIndex((opt) => opt.value === this.value)
     }
     this.requestUpdate()
   }
@@ -115,7 +142,8 @@ export class PktSelect extends PktInputElement implements IPktSelect {
       if (this.selectedIndex === item) {
         this.value = this._options[0]?.value || ''
       }
-      this.inputRef.value?.remove(item)
+      this._options.splice(item, 1)
+      this.requestUpdate()
     }
   }
 
@@ -131,7 +159,9 @@ export class PktSelect extends PktInputElement implements IPktSelect {
 
   // Support native Select method `showPicker`
   public showPicker() {
-    this.inputRef.value?.showPicker()
+    if (this.inputRef.value && 'showPicker' in this.inputRef.value) {
+      ;(this.inputRef.value as any).showPicker()
+    }
   }
 
   public attributeChangedCallback(name: string, _old: string, value: string): void {
@@ -141,7 +171,7 @@ export class PktSelect extends PktInputElement implements IPktSelect {
     if (name === 'value' && this.value !== _old) {
       this.selectedIndex = this.touched
         ? this.returnNumberOrNull(this.inputRef.value?.selectedIndex)
-        : this.options.findIndex((option) => option.value === value)
+        : this._options.findIndex((option) => option.value === value)
       this.selectedOptions = this.inputRef.value?.selectedOptions
       this.valueChanged(value, _old)
     }
@@ -150,8 +180,8 @@ export class PktSelect extends PktInputElement implements IPktSelect {
 
   update(changedProperties: PropertyValues) {
     super.update(changedProperties)
-    if (changedProperties.has('options')) {
-      this._options = this.options
+    if (changedProperties.has('_optionsProp') && this._optionsProp.length > 0) {
+      this._options = this._optionsProp
       this.requestUpdate('_options')
 
       // If no value is set and we have options, set to first option
@@ -163,7 +193,7 @@ export class PktSelect extends PktInputElement implements IPktSelect {
     if (changedProperties.has('value') && this.value !== changedProperties.get('value')) {
       this.selectedIndex = this.touched
         ? this.returnNumberOrNull(this.inputRef.value?.selectedIndex)
-        : this.options.findIndex((option) => option.value === this.value)
+        : this._options.findIndex((option) => option.value === this.value)
       this.selectedOptions = this.inputRef.value?.selectedOptions
       this.valueChanged(this.value, changedProperties.get('value'))
     }
@@ -174,8 +204,8 @@ export class PktSelect extends PktInputElement implements IPktSelect {
 
   protected firstUpdated(_changedProperties: PropertyValues): void {
     super.firstUpdated(_changedProperties)
-    if (this.options.length) {
-      this._options = this.options
+    if (this._optionsProp.length) {
+      this._options = this._optionsProp
     }
     // If no options are selected, set value and selectedIndex to the first option
     if (!this.value && this._options.length > 0) {

package/dist/datepicker-DonUad47.cjs

@@ -1,164 +0,0 @@
-"use strict";const d=require("./class-map-BBG2gMX4.cjs"),h=require("./if-defined-Cni-RHLS.cjs"),s=require("./element-6DBpyGQm.cjs"),v=require("./state-DPobt-Yz.cjs"),o=require("./calendar-32W9p9uc.cjs"),m=require("./input-element-C4xJoM-X.cjs"),r=require("./ref-iJtiv3o2.cjs"),y=require("./repeat-CDsZqct8.cjs");require("./icon-B_ryAy4Q.cjs");require("./input-wrapper-CZ-a00V7.cjs");require("./tag-Bbs0U_Au.cjs");const k=require("./pkt-slot-controller-BzddBp7z.cjs"),$={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:$};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 m.PktInputElement{constructor(){super(),this._valueProperty="",this._value=[],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?o.newDate(this.min):null,a=this.max?o.newDate(this.max):null,l=o.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 k.PktSlotController(this,this.helptextSlot)}get value(){return this._valueProperty}set value(t){const e=this._valueProperty;this._valueProperty=Array.isArray(t)?t.join(","):t||"",this.valueChanged(this._valueProperty,e),this.requestUpdate("value",e)}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())}),document&&document.body.addEventListener("keydown",i=>{i.key==="Escape"&&this.calendarOpen&&this.hideCalendar()}),this.value&&(this._value=Array.isArray(this.value)?this.value.filter(Boolean):this.value.split(",").filter(Boolean)),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()})}onInput(){this.dispatchEvent(new Event("input",{bubbles:!0}))}valueChanged(t,e){if(t===e)return;let i=[];t&&(typeof t=="string"?i=t.split(",").filter(Boolean):i=String(t).split(",").filter(Boolean)),this._value=i;const a=i.join(",");this._valueProperty!==a&&(this._valueProperty=a),super.valueChanged(a,e)}attributeChangedCallback(t,e,i){t==="value"&&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){if(t.has("value")){const e=Array.isArray(this.value)?this.value.join(","):this.value,i=t.get("value"),a=Array.isArray(i)?i.join(","):i;this.valueChanged(e,a)}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&&!this.range&&Array.isArray(this._value)&&(this._value=[this._value[0]??""])),super.updated(t)}renderInput(){return s.x`
-      <input
-        class="${d.e(this.inputClasses)}"
-        .type=${this.inputType}
-        id="${this.id}-input"
-        .value=${this._value[0]??""}
-        min=${h.o(this.min)}
-        max=${h.o(this.max)}
-        placeholder=${h.o(this.placeholder)}
-        ?readonly=${this.readonly}
-        aria-describedby="${this.id}-helptext"
-        @click=${t=>{t.preventDefault(),this.showCalendar()}}
-        ?disabled=${this.disabled}
-        @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()}}}
-        @input=${t=>{this.onInput(),t.stopImmediatePropagation()}}
-        @focus=${()=>{this.onFocus(),this.isMobileSafari&&this.showCalendar()}}
-        @blur=${t=>{var e;(e=this.calRef.value)!=null&&e.contains(t.relatedTarget)||this.onBlur(),this.manageValidity(t.target),this.value=t.target.value}}
-        @change=${t=>{this.touched=!0,t.stopImmediatePropagation()}}
-        ${r.n(this.inputRef)}
-      />
-    `}renderRangeInput(){const t={"pkt-input-prefix":this.showRangeLabels,"pkt-hide":!this.showRangeLabels};return s.x`
-      ${this.showRangeLabels?s.x` <div class="pkt-input-prefix">${this.strings.generic.from}</div> `:s.E}
-      <input
-        class=${d.e(this.inputClasses)}
-        .type=${this.inputType}
-        id="${this.id}-input"
-        .value=${this._value[0]??""}
-        min=${h.o(this.min)}
-        max=${h.o(this.max)}
-        placeholder=${h.o(this.placeholder)}
-        ?readonly=${this.readonly}
-        ?disabled=${this.disabled}
-        @click=${e=>{e.preventDefault(),this.showCalendar()}}
-        @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()}}}
-        @input=${e=>{this.onInput(),e.stopImmediatePropagation()}}
-        @focus=${()=>{this.onFocus(),this.isMobileSafari&&this.showCalendar()}}
-        @blur=${e=>{var i,a;if(e.target.value){this.manageValidity(e.target);const l=o.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()}}
-        @change=${e=>{e.stopImmediatePropagation()}}
-        ${r.n(this.inputRef)}
-      />
-      <div class="${d.e(t)}" id="${this.id}-to-label">
-        ${this.strings.generic.to}
-      </div>
-      ${this.showRangeLabels?s.E:s.x` <div class="pkt-input-separator">–</div> `}
-      <input
-        class=${d.e(this.inputClasses)}
-        .type=${this.inputType}
-        id="${this.id}-to"
-        aria-labelledby="${this.id}-to-label"
-        .value=${this._value[1]??""}
-        min=${h.o(this.min)}
-        max=${h.o(this.max)}
-        placeholder=${h.o(this.placeholder)}
-        ?readonly=${this.readonly}
-        ?disabled=${this.disabled}
-        @click=${e=>{e.preventDefault(),this.showCalendar()}}
-        @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()}}}
-        @input=${e=>{this.onInput(),e.stopImmediatePropagation()}}
-        @focus=${()=>{this.onFocus(),this.isMobileSafari&&this.showCalendar()}}
-        @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=o.fromISOToDate(e.target.value);f&&this._value[1]!==o.formatISODate(f)&&((l=(a=this.calRef)==null?void 0:a.value)==null||l.handleDateSelect(f))}}}
-        @change=${e=>{this.touched=!0,e.stopImmediatePropagation()}}
-        ${r.n(this.inputRefTo)}
-      />
-    `}renderMultipleInput(){return s.x`
-      <input
-        class=${d.e(this.inputClasses)}
-        .type=${this.inputType}
-        id="${this.id}-input"
-        min=${h.o(this.min)}
-        max=${h.o(this.max)}
-        placeholder=${h.o(this.placeholder)}
-        ?readonly=${this.readonly}
-        ?disabled=${this.disabled||this.maxlength&&this._value.length>=this.maxlength}
-        @click=${t=>{t.preventDefault(),this.showCalendar()}}
-        @blur=${t=>{var e;(e=this.calRef.value)!=null&&e.contains(t.relatedTarget)||this.onBlur(),this.addToSelected(t)}}
-        @input=${t=>{this.onInput(),t.stopImmediatePropagation()}}
-        @focus=${()=>{this.onFocus(),this.isMobileSafari&&this.showCalendar()}}
-        @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()}}}
-        @change=${t=>{this.touched=!0,t.stopImmediatePropagation()}}
-        ${r.n(this.inputRef)}
-      />
-    `}renderTags(){return s.x`
-      <div class="pkt-datepicker__tags" aria-live="polite">
-        ${this._value[0]?y.c((this._value??[]).filter(Boolean).sort(),t=>t,t=>s.x`
-                <pkt-tag
-                  .id="${this.id+t+"-tag"}"
-                  closeTag
-                  ariaLabel="${this.strings.calendar.deleteDate} ${o.fromISOtoLocal(t,this.dateformat)}"
-                  @close=${()=>{var e;return(e=this.calRef.value)==null?void 0:e.handleDateSelect(o.fromISOToDate(t))}}
-                  ><time datetime="${t}">${o.fromISOtoLocal(t,this.dateformat)}</time></pkt-tag
-                >
-              `):s.E}
-      </div>
-    `}renderCalendar(){return s.x`<div
-      class="pkt-calendar-popup pkt-${this.calendarOpen?"show":"hide"}"
-      @focusout=${t=>{this.calendarOpen&&this.handleFocusOut(t)}}
-      id="${this.id}-popup"
-      ${r.n(this.popupRef)}
-    >
-      <pkt-calendar
-        id="${this.id}-calendar"
-        ?multiple=${this.multiple}
-        ?range=${this.range}
-        ?weeknumbers=${this.weeknumbers}
-        ?withcontrols=${this.withcontrols}
-        .maxMultiple=${this.maxlength}
-        .selected=${this._value}
-        .earliest=${this.min}
-        .latest=${this.max}
-        .excludedates=${Array.isArray(this.excludedates)?this.excludedates:this.excludedates.split(",")}
-        .excludeweekdays=${this.excludeweekdays}
-        .currentmonth=${this.currentmonth?o.parseISODateString(this.currentmonth):null}
-        @date-selected=${t=>{this.value=!this.multiple&&!this.range?t.detail[0]:Array.isArray(t.detail)?t.detail.join(","):t.detail,this._value=t.detail,this.inputRef.value&&(this.range&&this.inputRefTo.value?(this.inputRef.value.value=this._value[0]??"",this.inputRefTo.value.value=this._value[1]??"",this.manageValidity(this.inputRef.value),this.manageValidity(this.inputRefTo.value)):this.multiple||(this.inputRef.value.value=this._value.length?this._value[0]:"",this.manageValidity(this.inputRef.value)))}}
-        @close=${()=>{this.onBlur(),this.hideCalendar()}}
-        ${r.n(this.calRef)}
-      ></pkt-calendar>
-    </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,"pkt-datepicker__calendar-button":!0},s.x`
-      <pkt-input-wrapper
-        label="${this.label}"
-        forId="${this.id}-input"
-        ?counter=${this.multiple&&!!this.maxlength}
-        .counterCurrent=${this.value?this._value.length:0}
-        .counterMaxLength=${this.maxlength}
-        ?disabled=${this.disabled}
-        ?hasError=${this.hasError}
-        ?hasFieldset=${this.hasFieldset}
-        ?inline=${this.inline}
-        ?required=${this.required}
-        ?optionalTag=${this.optionalTag}
-        ?requiredTag=${this.requiredTag}
-        ?useWrapper=${this.useWrapper}
-        .optionalText=${this.optionalText}
-        .requiredText=${this.requiredText}
-        .tagText=${this.tagText}
-        .errorMessage=${this.errorMessage}
-        .helptext=${this.helptext}
-        .helptextDropdown=${this.helptextDropdown}
-        .helptextDropdownButton=${this.helptextDropdownButton}
-        .ariaDescribedBy=${this.ariaDescribedBy}
-        class="pkt-datepicker"
-      >
-        <div class="pkt-contents" ${r.n(this.helptextSlot)} name="helptext" slot="helptext"></div>
-        ${this.multiple?this.renderTags():s.E}
-        <div
-          class="pkt-datepicker__inputs ${this.range&&this.showRangeLabels?"pkt-input__range-inputs":""}"
-        >
-          <div class="pkt-input__container">
-            ${this.range?this.renderRangeInput():this.multiple?this.renderMultipleInput():this.renderInput()}
-            <button
-              class="${d.e(this.buttonClasses)}"
-              type="button"
-              @click=${this.toggleCalendar}
-              @keydown=${t=>{(t.key==="Enter"||t.key===" "||t.key==="Space")&&(t.preventDefault(),this.toggleCalendar(t))}}
-              ?disabled=${this.disabled}
-              ${r.n(this.btnRef)}
-            >
-              <pkt-icon name="calendar"></pkt-icon>
-              <span class="pkt-btn__text">${this.strings.calendar.buttonAltText}</span>
-            </button>
-          </div>
-        </div>
-      </pkt-input-wrapper>
-      ${this.renderCalendar()}
-    `}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()}clearInputValue(){this._value=[],this.value=""}};n([s.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"value",1);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:o.converters.csvToArray})],exports.PktDatepicker.prototype,"excludedates",2);n([s.n({converter:o.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([v.r()],exports.PktDatepicker.prototype,"inputClasses",2);n([v.r()],exports.PktDatepicker.prototype,"buttonClasses",2);exports.PktDatepicker=n([s.t("pkt-datepicker")],exports.PktDatepicker);

package/dist/select-CD6Zn8YH.cjs

@@ -1,49 +0,0 @@
-"use strict";const h=require("./element-6DBpyGQm.cjs"),p=require("./state-DPobt-Yz.cjs"),r=require("./ref-iJtiv3o2.cjs"),l=require("./if-defined-Cni-RHLS.cjs"),d=require("./input-element-C4xJoM-X.cjs"),c=require("./pkt-options-controller-CiuBG6Lt.cjs"),v=require("./pkt-slot-controller-BzddBp7z.cjs");require("./input-wrapper-CZ-a00V7.cjs");var f=Object.defineProperty,b=Object.getOwnPropertyDescriptor,a=(u,t,e,s)=>{for(var i=s>1?void 0:s?b(t,e):t,o=u.length-1,n;o>=0;o--)(n=u[o])&&(i=(s?n(t,e,i):n(i))||i);return s&&i&&f(t,e,i),i};exports.PktSelect=class extends d.PktInputElement{constructor(){super(),this.inputRef=r.e(),this.helptextSlot=r.e(),this.options=[],this.value="",this._options=[],this.selectedIndex=-1,this.selectedOptions=void 0,this.optionsController=new c.PktOptionsSlotController(this),this.slotController=new v.PktSlotController(this,this.helptextSlot),this.slotController.skipOptions=!0}connectedCallback(){super.connectedCallback();const t=this.options.length>0,e=this.optionsController.nodes.length&&this.optionsController.nodes.length>0;!t&&e?this.optionsController.nodes.forEach(s=>{const i={value:s.hasAttribute("value")?s.getAttribute("value")??"":s.textContent??"",label:s.textContent||s.getAttribute("value")||"",disabled:s.hasAttribute("disabled"),selected:s.hasAttribute("selected"),hidden:s.hasAttribute("data-hidden")};s.getAttribute("selected")&&!this.value&&(this.value=i.value),this._options.push(i)}):(this._options=this.options,this._options.forEach(s=>{s.selected&&!this.value&&(this.value=s.value)}))}add(t,e){var s,i,o;(s=this.inputRef.value)==null||s.add(t,e),this._options.push({value:t.value||t.text,label:t.text||t.value,selected:t.selected,disabled:t.disabled}),t.selected&&(this.value=t.value||t.text,this.selectedIndex=this.returnNumberOrNull((i=this.inputRef.value)==null?void 0:i.selectedIndex),this.selectedOptions=(o=this.inputRef.value)==null?void 0:o.selectedOptions),this.requestUpdate()}remove(t){var e,s;typeof t=="number"&&(this.selectedIndex===t&&(this.value=((e=this._options[0])==null?void 0:e.value)||""),(s=this.inputRef.value)==null||s.remove(t))}item(t){var e;return(e=this.inputRef.value)==null?void 0:e.item(t)}namedItem(t){var e;return(e=this.inputRef.value)==null?void 0:e.namedItem(t)}showPicker(){var t;(t=this.inputRef.value)==null||t.showPicker()}attributeChangedCallback(t,e,s){var i,o;t==="options"&&(this._options=s?JSON.parse(s):[]),t==="value"&&this.value!==e&&(this.selectedIndex=this.touched?this.returnNumberOrNull((i=this.inputRef.value)==null?void 0:i.selectedIndex):this.options.findIndex(n=>n.value===s),this.selectedOptions=(o=this.inputRef.value)==null?void 0:o.selectedOptions,this.valueChanged(s,e)),super.attributeChangedCallback(t,e,s)}update(t){var e,s;super.update(t),t.has("options")&&(this._options=this.options,this.requestUpdate("_options"),!this.value&&this._options.length>0&&(this.value=this._options[0].value,this.selectedIndex=0)),t.has("value")&&this.value!==t.get("value")&&(this.selectedIndex=this.touched?this.returnNumberOrNull((e=this.inputRef.value)==null?void 0:e.selectedIndex):this.options.findIndex(i=>i.value===this.value),this.selectedOptions=(s=this.inputRef.value)==null?void 0:s.selectedOptions,this.valueChanged(this.value,t.get("value"))),t.has("id")&&!this.name&&this.id&&(this.name=this.id)}firstUpdated(t){var e;super.firstUpdated(t),this.options.length&&(this._options=this.options),!this.value&&this._options.length>0?(this.value=this._options[0].value,this.selectedIndex=0):this.selectedIndex=this._options.findIndex(s=>s.value===this.value),this.selectedOptions=(e=this.inputRef.value)==null?void 0:e.selectedOptions}render(){const t=`pkt-input ${this.fullwidth?"pkt-input--fullwidth":""}`;return h.x`
-      <pkt-input-wrapper
-        ?counter=${this.counter}
-        ?disabled=${this.disabled}
-        ?hasError=${this.hasError}
-        ?hasFieldset=${this.hasFieldset}
-        ?inline=${this.inline}
-        ?optionalTag=${this.optionalTag}
-        ?requiredTag=${this.requiredTag}
-        ?useWrapper=${this.useWrapper}
-        ariaDescribedBy=${l.o(this.ariaDescribedBy)}
-        class="pkt-select"
-        errorMessage=${l.o(this.errorMessage)}
-        forId=${this.id+"-input"}
-        helptext=${l.o(this.helptext)}
-        helptextDropdown=${l.o(this.helptextDropdown)}
-        helptextDropdownButton=${l.o(this.helptextDropdownButton)}
-        label=${l.o(this.label)}
-        optionalText=${l.o(this.optionalText)}
-        requiredText=${l.o(this.requiredText)}
-        tagText=${l.o(this.tagText)}
-      >
-        <select
-          class=${t}
-          aria-invalid=${this.hasError}
-          aria-errormessage=${`${this.id}-error`}
-          aria-labelledby=${l.o(this.ariaLabelledby)}
-          ?disabled=${this.disabled}
-          id=${this.id+"-input"}
-          name=${(this.name||this.id)+"-input"}
-          value=${this.value}
-          @change=${e=>{this.touched=!0,this.value=e.target.value,e.stopImmediatePropagation()}}
-          @input=${e=>{this.onInput(),e.stopImmediatePropagation()}}
-          @focus=${e=>{this.onFocus(),e.stopImmediatePropagation()}}
-          @blur=${e=>{this.onBlur(),e.stopImmediatePropagation()}}
-          ${r.n(this.inputRef)}
-        >
-          ${this._options.length>0?this._options.map(e=>h.x`<option
-                    value=${e.value}
-                    ?selected=${this.value==e.value||e.selected}
-                    ?disabled=${e.disabled}
-                    ?hidden=${e.hidden}
-                  >
-                    ${e.label}
-                  </option>`):""}
-        </select>
-        <div class="pkt-contents" ${r.n(this.helptextSlot)} name="helptext" slot="helptext"></div>
-      </pkt-input-wrapper>
-    `}returnNumberOrNull(t){return t==null||isNaN(t)?null:t}};a([h.n({type:Array})],exports.PktSelect.prototype,"options",2);a([h.n({type:String})],exports.PktSelect.prototype,"value",2);a([p.r()],exports.PktSelect.prototype,"_options",2);exports.PktSelect=a([h.t("pkt-select")],exports.PktSelect);

package/dist/select-dcaJHvmR.js

@@ -1,157 +0,0 @@
-import { x as p, n as c, a as v } from "./element-CgEWt74-.js";
-import { r as f } from "./state-Bo2bck5_.js";
-import { e as u, n as d } from "./ref-BBYSqgeW.js";
-import { o } from "./if-defined-CmuO4Vz9.js";
-import { P as b } from "./input-element-NnrDmp4r.js";
-import { P as $ } from "./pkt-options-controller-CZO1nxZ8.js";
-import { P as x } from "./pkt-slot-controller-BPGj-LC5.js";
-import "./input-wrapper-Dr__Sxql.js";
-var m = Object.defineProperty, g = Object.getOwnPropertyDescriptor, n = (t, e, s, i) => {
-  for (var l = i > 1 ? void 0 : i ? g(e, s) : e, h = t.length - 1, r; h >= 0; h--)
-    (r = t[h]) && (l = (i ? r(e, s, l) : r(l)) || l);
-  return i && l && m(e, s, l), l;
-};
-let a = class extends b {
-  constructor() {
-    super(), this.inputRef = u(), this.helptextSlot = u(), this.options = [], this.value = "", this._options = [], this.selectedIndex = -1, this.selectedOptions = void 0, this.optionsController = new $(this), this.slotController = new x(this, this.helptextSlot), this.slotController.skipOptions = !0;
-  }
-  // Used for initilization
-  connectedCallback() {
-    super.connectedCallback();
-    const t = this.options.length > 0, e = this.optionsController.nodes.length && this.optionsController.nodes.length > 0;
-    !t && e ? this.optionsController.nodes.forEach((s) => {
-      const i = {
-        value: s.hasAttribute("value") ? s.getAttribute("value") ?? "" : s.textContent ?? "",
-        label: s.textContent || s.getAttribute("value") || "",
-        disabled: s.hasAttribute("disabled"),
-        selected: s.hasAttribute("selected"),
-        hidden: s.hasAttribute("data-hidden")
-      };
-      s.getAttribute("selected") && !this.value && (this.value = i.value), this._options.push(i);
-    }) : (this._options = this.options, this._options.forEach((s) => {
-      s.selected && !this.value && (this.value = s.value);
-    }));
-  }
-  // Support native Select method `add`
-  add(t, e) {
-    var s, i, l;
-    (s = this.inputRef.value) == null || s.add(t, e), this._options.push({
-      value: t.value || t.text,
-      label: t.text || t.value,
-      selected: t.selected,
-      disabled: t.disabled
-    }), t.selected && (this.value = t.value || t.text, this.selectedIndex = this.returnNumberOrNull((i = this.inputRef.value) == null ? void 0 : i.selectedIndex), this.selectedOptions = (l = this.inputRef.value) == null ? void 0 : l.selectedOptions), this.requestUpdate();
-  }
-  // Support native Select method `remove`
-  remove(t) {
-    var e, s;
-    typeof t == "number" && (this.selectedIndex === t && (this.value = ((e = this._options[0]) == null ? void 0 : e.value) || ""), (s = this.inputRef.value) == null || s.remove(t));
-  }
-  // Support native Select method `item`
-  item(t) {
-    var e;
-    return (e = this.inputRef.value) == null ? void 0 : e.item(t);
-  }
-  // Support native Select method `namedItem`
-  namedItem(t) {
-    var e;
-    return (e = this.inputRef.value) == null ? void 0 : e.namedItem(t);
-  }
-  // Support native Select method `showPicker`
-  showPicker() {
-    var t;
-    (t = this.inputRef.value) == null || t.showPicker();
-  }
-  attributeChangedCallback(t, e, s) {
-    var i, l;
-    t === "options" && (this._options = s ? JSON.parse(s) : []), t === "value" && this.value !== e && (this.selectedIndex = this.touched ? this.returnNumberOrNull((i = this.inputRef.value) == null ? void 0 : i.selectedIndex) : this.options.findIndex((h) => h.value === s), this.selectedOptions = (l = this.inputRef.value) == null ? void 0 : l.selectedOptions, this.valueChanged(s, e)), super.attributeChangedCallback(t, e, s);
-  }
-  update(t) {
-    var e, s;
-    super.update(t), t.has("options") && (this._options = this.options, this.requestUpdate("_options"), !this.value && this._options.length > 0 && (this.value = this._options[0].value, this.selectedIndex = 0)), t.has("value") && this.value !== t.get("value") && (this.selectedIndex = this.touched ? this.returnNumberOrNull((e = this.inputRef.value) == null ? void 0 : e.selectedIndex) : this.options.findIndex((i) => i.value === this.value), this.selectedOptions = (s = this.inputRef.value) == null ? void 0 : s.selectedOptions, this.valueChanged(this.value, t.get("value"))), t.has("id") && !this.name && this.id && (this.name = this.id);
-  }
-  firstUpdated(t) {
-    var e;
-    super.firstUpdated(t), this.options.length && (this._options = this.options), !this.value && this._options.length > 0 ? (this.value = this._options[0].value, this.selectedIndex = 0) : this.selectedIndex = this._options.findIndex((s) => s.value === this.value), this.selectedOptions = (e = this.inputRef.value) == null ? void 0 : e.selectedOptions;
-  }
-  render() {
-    const t = `pkt-input ${this.fullwidth ? "pkt-input--fullwidth" : ""}`;
-    return p`
-      <pkt-input-wrapper
-        ?counter=${this.counter}
-        ?disabled=${this.disabled}
-        ?hasError=${this.hasError}
-        ?hasFieldset=${this.hasFieldset}
-        ?inline=${this.inline}
-        ?optionalTag=${this.optionalTag}
-        ?requiredTag=${this.requiredTag}
-        ?useWrapper=${this.useWrapper}
-        ariaDescribedBy=${o(this.ariaDescribedBy)}
-        class="pkt-select"
-        errorMessage=${o(this.errorMessage)}
-        forId=${this.id + "-input"}
-        helptext=${o(this.helptext)}
-        helptextDropdown=${o(this.helptextDropdown)}
-        helptextDropdownButton=${o(this.helptextDropdownButton)}
-        label=${o(this.label)}
-        optionalText=${o(this.optionalText)}
-        requiredText=${o(this.requiredText)}
-        tagText=${o(this.tagText)}
-      >
-        <select
-          class=${t}
-          aria-invalid=${this.hasError}
-          aria-errormessage=${`${this.id}-error`}
-          aria-labelledby=${o(this.ariaLabelledby)}
-          ?disabled=${this.disabled}
-          id=${this.id + "-input"}
-          name=${(this.name || this.id) + "-input"}
-          value=${this.value}
-          @change=${(e) => {
-      this.touched = !0, this.value = e.target.value, e.stopImmediatePropagation();
-    }}
-          @input=${(e) => {
-      this.onInput(), e.stopImmediatePropagation();
-    }}
-          @focus=${(e) => {
-      this.onFocus(), e.stopImmediatePropagation();
-    }}
-          @blur=${(e) => {
-      this.onBlur(), e.stopImmediatePropagation();
-    }}
-          ${d(this.inputRef)}
-        >
-          ${this._options.length > 0 ? this._options.map(
-      (e) => p`<option
-                    value=${e.value}
-                    ?selected=${this.value == e.value || e.selected}
-                    ?disabled=${e.disabled}
-                    ?hidden=${e.hidden}
-                  >
-                    ${e.label}
-                  </option>`
-    ) : ""}
-        </select>
-        <div class="pkt-contents" ${d(this.helptextSlot)} name="helptext" slot="helptext"></div>
-      </pkt-input-wrapper>
-    `;
-  }
-  returnNumberOrNull(t) {
-    return t == null || isNaN(t) ? null : t;
-  }
-};
-n([
-  c({ type: Array })
-], a.prototype, "options", 2);
-n([
-  c({ type: String })
-], a.prototype, "value", 2);
-n([
-  f()
-], a.prototype, "_options", 2);
-a = n([
-  v("pkt-select")
-], a);
-export {
-  a as P
-};