@oslokommune/punkt-elements 12.31.2 → 12.32.0

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import { nothing } from 'lit';
 import { PktIconName } from '@oslokommune/punkt-assets/dist/icons/icon';
 import { PropertyValues } from 'lit';
 import { ReactiveController } from 'lit';
@@ -93,6 +94,47 @@ export declare interface IPktButton {
     disabled?: boolean;
 }
 
+export declare interface IPktCombobox {
+    allowUserInput?: boolean;
+    typeahead?: boolean;
+    disabled?: boolean;
+    displayValueAs?: string;
+    errorMessage?: string;
+    fullwidth?: boolean;
+    hasError?: boolean;
+    helptext?: string | null;
+    helptextDropdown?: string | null;
+    helptextDropdownButton?: string | null;
+    id?: string;
+    includeSearch?: boolean;
+    label?: string | null;
+    maxlength?: number | null;
+    minlength?: number | null;
+    multiple?: boolean;
+    name?: string;
+    optionalTag?: boolean;
+    optionalText?: string;
+    options?: IPktComboboxOption[];
+    placeholder?: string | null;
+    requiredTag?: boolean;
+    requiredText?: string;
+    searchPlaceholder?: string;
+    tagPlacement?: TPktComboboxTagPlacement | null;
+    value?: string | string[];
+}
+
+export declare interface IPktComboboxOption {
+    description?: string;
+    disabled?: boolean;
+    fulltext?: string;
+    label?: string;
+    prefix?: string;
+    selected?: boolean;
+    tagSkinColor?: TTagSkin;
+    userAdded?: boolean;
+    value: string;
+}
+
 declare interface IPktLinkCard {
     title?: string;
     href?: string;
@@ -102,6 +144,21 @@ declare interface IPktLinkCard {
     skin?: TLinkCardSkin;
 }
 
+declare interface IPktListbox {
+    options: IPktComboboxOption[];
+    isOpen: boolean;
+    disabled: boolean;
+    includeSearch: boolean;
+    isMultiSelect: boolean;
+    allowUserInput: boolean;
+    maxIsReached: boolean;
+    customUserInput: string | null;
+    searchPlaceholder: string | null;
+    searchValue: string | null;
+    maxLength: number;
+    userMessage: string | null;
+}
+
 export declare interface IPktLoader {
     /**
      * The `delay` prop controls how much time the loading should be given before the loader is displayed.
@@ -343,6 +400,67 @@ export declare class PktCheckbox extends PktInputElement {
     private toggleChecked;
 }
 
+export declare class PktCombobox extends PktInputElement implements IPktCombobox {
+    private helptextSlot;
+    constructor();
+    value: string | string[];
+    options: IPktComboboxOption[];
+    allowUserInput: boolean;
+    typeahead: boolean;
+    includeSearch: boolean;
+    searchPlaceholder: string;
+    multiple: boolean;
+    maxlength: number | null;
+    displayValueAs: string;
+    tagPlacement: TPktComboboxTagPlacement | null;
+    private _options;
+    private _isOptionsOpen;
+    private _value;
+    private _userInfoMessage;
+    private _addValueText;
+    private _maxIsReached;
+    private _search;
+    private _inputFocus;
+    private _editingSingleValue;
+    inputRef: Ref<HTMLInputElement>;
+    arrowRef: Ref<HTMLButtonElement>;
+    listboxRef: Ref<PktListbox>;
+    focusRef: Ref<HTMLElement>;
+    optionTagRef: Ref<HTMLElement>;
+    connectedCallback(): void;
+    updated(changedProperties: PropertyValues): void;
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+    render(): TemplateResult<1>;
+    renderInputField(): TemplateResult<1>;
+    renderSingleOrMultipleValues(): unknown;
+    renderValueTag(option: IPktComboboxOption | null): "" | TemplateResult<1>;
+    handleInput(e: InputEvent): void;
+    private handleFocus;
+    private handleFocusOut;
+    private handleBlur;
+    private handleInputClick;
+    private handleArrowClick;
+    private handleOptionToggled;
+    private handleSearch;
+    private handleInputKeydown;
+    private handleTagRemove;
+    private blurInput;
+    private checkForMatches;
+    private findValueInOptions;
+    private findIndexInOptions;
+    private isMaxItemsReached;
+    toggleValue(value: string | null): void;
+    private setSelected;
+    private removeSelected;
+    private addAllOptions;
+    private removeAllSelected;
+    private addValue;
+    private removeValue;
+    private addNewUserValue;
+    private resetComboboxInput;
+    private removeLastValue;
+}
+
 export declare class PktComponent extends PktElement {
     /**
      * Element attributes => props
@@ -524,6 +642,7 @@ declare class PktInputElement<T = {}> extends PktElement<Props_2 & T> {
     counter: boolean;
     hasError: boolean;
     inline: boolean;
+    hasFieldset: boolean;
     optionalTag: boolean;
     requiredTag: boolean;
     skipForwardTestid: boolean;
@@ -569,6 +688,8 @@ export declare class PktInputWrapper extends PktElement<Props_4> {
     counter: boolean;
     counterCurrent: number;
     counterMaxLength: number;
+    counterError: string | null;
+    counterPosition: TCounterPosition;
     optionalTag: boolean;
     optionalText: string;
     requiredTag: boolean;
@@ -581,10 +702,11 @@ export declare class PktInputWrapper extends PktElement<Props_4> {
     hasFieldset: boolean;
     useWrapper: boolean;
     role: string | null;
-    updateSlots(): void;
+    updateSlots(filledSlots: Set<string | null | undefined>): void;
     protected updated(changedProperties: PropertyValues): void;
     render(): TemplateResult<1>;
     private toggleDropdown;
+    private handleLabelClick;
 }
 
 export declare class PktLink extends PktElement {
@@ -614,6 +736,51 @@ export declare class PktLinkCard extends PktElement implements IPktLinkCard {
     render(): TemplateResult<1>;
 }
 
+declare class PktListbox extends PktElement implements IPktListbox {
+    id: string;
+    label: string | null;
+    options: IPktComboboxOption[];
+    isOpen: boolean;
+    disabled: boolean;
+    includeSearch: boolean;
+    isMultiSelect: boolean;
+    allowUserInput: boolean;
+    maxIsReached: boolean;
+    customUserInput: string | null;
+    searchPlaceholder: string | null;
+    searchValue: string | null;
+    maxLength: number;
+    userMessage: string | null;
+    private _selectedOptions;
+    private _filteredOptions;
+    connectedCallback(): void;
+    updated(changedProperties: PropertyValues): void;
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+    render(): TemplateResult<1>;
+    renderCheckboxOrCheckIcon(option: IPktComboboxOption, index: number): TemplateResult<1> | typeof nothing;
+    renderList(): TemplateResult<1>;
+    renderNewOptionBanner(): TemplateResult<1> | typeof nothing;
+    renderMaximumReachedBanner(): TemplateResult<1> | typeof nothing;
+    renderUserMessage(): TemplateResult<1> | typeof nothing;
+    renderSearch(): TemplateResult<1> | typeof nothing;
+    handleSearchInput(e: InputEvent): void;
+    handleSearchKeydown(e: KeyboardEvent): void;
+    handleOptionKeydown(e: KeyboardEvent): void;
+    focusAndScrollIntoView(el: HTMLElement): void;
+    focusNextOption(target: HTMLElement): void;
+    focusPreviousOption(target: HTMLElement): void;
+    focusFirstOption(): void;
+    focusLastOption(): void;
+    focusFirstOrSelectedOption(): void;
+    toggleOption(option: IPktComboboxOption | HTMLElement): void;
+    selectAll(): void;
+    closeOptions(): void;
+    filterOptions(): void;
+    isLetterOrSpace(char: string): boolean;
+    handleTypeAhead(char: string): void;
+    getOptionElements(): HTMLElement[];
+}
+
 export declare class PktLoader extends PktElement implements IPktLoader {
     defaultSlot: Ref<HTMLElement>;
     constructor();
@@ -713,17 +880,6 @@ declare class PktRadioButton extends PktInputElement {
 export { PktRadioButton }
 export { PktRadioButton as PktRadiobutton }
 
-/**
- * Pkt Select is a wrapper for the native select element using the pkt-input-wrapper component.
- *
- * The component will prioritize options passed as a prop over options passed as children if both are provided.
- * This is to allow for dynamic options that might change in the case of both children/slot and props are provided.
- *
- * @slot (default) - Options to be rendered as children
- * @prop {TSelectOption[]} options - Options to be rendered as children
- *
- *
- */
 export declare class PktSelect extends PktInputElement implements IPktSelect {
     private inputRef;
     private helptextSlot;
@@ -743,6 +899,7 @@ declare class PktSlotController implements ReactiveController {
     nodes: Element[];
     slots: Ref<HTMLElement>[];
     observer: MutationObserver;
+    contentObserver: MutationObserver;
     filledSlots: Set<string | null | undefined>;
     skipOptions: boolean;
     private updatingSlots;
@@ -753,6 +910,7 @@ declare class PktSlotController implements ReactiveController {
     private updateNodes;
     private updateSlots;
     private handleMutations;
+    private handleSlotMutations;
 }
 
 export declare class PktTag extends PktElement implements IPktTag {
@@ -804,7 +962,7 @@ export declare class PktTextinput extends PktInputElement<Props_5> {
     value: string;
     type: string;
     size: number | null;
-    autocomplete: string;
+    autocomplete: string | null;
     iconNameRight: string | null;
     prefix: string | null;
     suffix: string | null;
@@ -818,7 +976,7 @@ export declare class PktTextinput extends PktInputElement<Props_5> {
 
 declare type Props = ElementProps<PktElement, 'strings' | 'role'>;
 
-declare type Props_2 = ElementProps<PktInputElement, 'defaultValue' | 'disabled' | 'readonly' | 'required' | 'max' | 'maxlength' | 'min' | 'minlength' | 'ariaDescribedBy' | 'ariaLabelledby' | 'name' | 'pattern' | 'placeholder' | 'id' | 'counter' | 'hasError' | 'inline' | 'optionalTag' | 'requiredTag' | 'skipForwardTestid' | 'useWrapper' | 'fullwidth' | 'counterMaxLength' | 'errorMessage' | 'helptext' | 'helptextDropdown' | 'helptextDropdownButton' | 'label' | 'optionalText' | 'requiredText' | 'dataTestid'>;
+declare type Props_2 = ElementProps<PktInputElement, 'defaultValue' | 'disabled' | 'readonly' | 'required' | 'max' | 'maxlength' | 'min' | 'minlength' | 'ariaDescribedBy' | 'ariaLabelledby' | 'name' | 'pattern' | 'placeholder' | 'id' | 'counter' | 'hasError' | 'hasFieldset' | 'inline' | 'optionalTag' | 'requiredTag' | 'skipForwardTestid' | 'useWrapper' | 'fullwidth' | 'counterMaxLength' | 'errorMessage' | 'helptext' | 'helptextDropdown' | 'helptextDropdownButton' | 'label' | 'optionalText' | 'requiredText' | 'dataTestid'>;
 
 declare type Props_3 = ElementProps<PktIcon, 'path' | 'name'>;
 
@@ -862,6 +1020,8 @@ declare type TAriaSort = 'none' | 'ascending' | 'descending' | 'other';
 
 declare type TCardSkin = 'outlined' | 'gray' | 'beige' | 'green' | 'blue';
 
+declare type TCounterPosition = 'top' | 'bottom';
+
 declare type TDirection = 'portrait' | 'landscape';
 
 declare type TLinkCardSkin = 'normal' | 'blue' | 'beige' | 'green' | 'gray' | 'beige-outline' | 'gray-outline';
@@ -882,6 +1042,8 @@ export declare type TPktButtonType = 'button' | 'submit' | 'reset';
 
 export declare type TPktButtonVariant = 'label-only' | 'icon-left' | 'icon-right' | 'icon-only' | 'icons-right-and-left';
 
+export declare type TPktComboboxTagPlacement = 'inside' | 'outside';
+
 export declare type TPktLoaderVariant = 'blue' | 'rainbow' | 'shapes';
 
 declare type TPktSize = 'small' | 'medium' | 'large';
@@ -910,6 +1072,31 @@ export declare type TTagType = 'button' | 'reset' | 'submit';
 export { }
 
 
+/**
+ * Pkt Select is a wrapper for the native select element using the pkt-input-wrapper component.
+ *
+ * The component will prioritize options passed as a prop over options passed as children if both are provided.
+ * This is to allow for dynamic options that might change in the case of both children/slot and props are provided.
+ *
+ * @slot (default) - Options to be rendered as children
+ * @prop {TSelectOption[]} options - Options to be rendered as children
+ *
+ *
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-select': PktSelect & HTMLSelectElement;
+    }
+}
+
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-combobox': PktCombobox & HTMLSelectElement;
+    }
+}
+
+
 declare global {
     interface HTMLElementTagNameMap {
         'pkt-icon': PktIcon;
@@ -917,6 +1104,13 @@ declare global {
 }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-listbox': PktListbox;
+    }
+}
+
+
 declare global {
     interface Window {
         pktTz: string;

package/dist/input-element-AhnBdCb8.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("./element-BBo3JZk5.cjs"),f=require("./state-BILlRnrD.cjs"),c=require("./stringutils-CkVRq4jP.cjs"),y=require("./input-wrapper-jPnKsfEC.cjs");var m=Object.defineProperty,s=(o,t,r,n)=>{for(var a=void 0,l=o.length-1,h;l>=0;l--)(h=o[l])&&(a=h(t,r,a)||a);return a&&m(t,r,a),a};class i extends e.PktElement{constructor(){super(),this.defaultValue=null,this.disabled=!1,this.readonly=!1,this.required=!1,this.max=null,this.maxlength=null,this.min=null,this.minlength=null,this.ariaDescribedBy=null,this.ariaLabelledby=null,this.name="",this.pattern=null,this.placeholder=null,this.id=c.uuidish(),this.counter=!1,this.hasError=!1,this.inline=!1,this.hasFieldset=!1,this.optionalTag=!1,this.requiredTag=!1,this.skipForwardTestid=!1,this.useWrapper=!0,this.fullwidth=!1,this.counterMaxLength=0,this.errorMessage="",this.helptext="",this.helptextDropdown="",this.helptextDropdownButton=y.specs.props.helptextDropdownButton.default,this.label=null,this.optionalText=e.translations.forms.labels.optional,this.requiredText=e.translations.forms.labels.required,this.dataTestid="",this.touched=!1,this.internals=this.attachInternals()}static get formAssociated(){return!0}manageValidity(t){var r,n,a,l,h,u,p,d;t&&(this.required&&!this.value?this.internals.setValidity({valueMissing:!0},e.translations.forms.messages.required,t):(r=t.validity)!=null&&r.typeMismatch||(n=t.validity)!=null&&n.badInput?this.internals.setValidity({typeMismatch:!0},e.translations.forms.messages.invalid,t):(a=t.validity)!=null&&a.patternMismatch?this.internals.setValidity({patternMismatch:!0},e.translations.forms.messages.invalidPattern,t):(l=t.validity)!=null&&l.tooShort||this.minlength&&this.minlength>0&&this.value.length<this.minlength?this.internals.setValidity({tooShort:!0},e.translations.forms.messages.tooShort,t):(h=t.validity)!=null&&h.tooLong||this.maxlength&&this.maxlength>0&&this.value.length>this.maxlength?this.internals.setValidity({tooLong:!0},e.translations.forms.messages.tooLong,t):(u=t.validity)!=null&&u.rangeUnderflow?this.internals.setValidity({rangeUnderflow:!0},e.translations.forms.messages.rangeUnderflow,t):(p=t.validity)!=null&&p.rangeOverflow?this.internals.setValidity({rangeOverflow:!0},e.translations.forms.messages.rangeOverflow,t):(d=t.validity)!=null&&d.customError?this.internals.setValidity({customError:!0},t.validationMessage,t):this.internals.setValidity({}))}setFormValue(t){if(this.internals)if(Array.isArray(t)){const r=new FormData;t.forEach(n=>{r.append(this.name,n)}),this.internals.setFormValue(r)}else this.internals.setFormValue(t)}valueChecked(t){if(!this.touched)return;const r=this.internals.form||this.closest("form");r&&r.querySelectorAll(`pkt-radiobutton[name=${this.name}], input[type=radio][name=${this.name}]`).forEach(n=>{const a=n;a.name===this.name&&a.value!==this.value&&a.checked&&(a.checked=!1)}),typeof t=="string"?(this.checked=t==="true",this.internals.ariaChecked=t==="true"):typeof t=="boolean"&&(this.checked=t,this.internals.ariaChecked=t),this.checked?(this.internals.setFormValue(this.value||"on",this.value||"on"),this.internals.states.add("--checked")):(this.internals.setFormValue("",""),this.internals.states.delete("--checked")),this.dispatchEvent(new Event("change")),this.dispatchEvent(new CustomEvent("value-change",{detail:this.checked,bubbles:!0,composed:!0})),this.internals.reportValidity()}valueChanged(t,r){(r!==this.value||r!==this._value)&&(typeof t=="string"?((this.multiple||this.range)&&t.includes(",")&&(t=t.split(",")),this.value=t,this._value=Array.isArray(t)?t:[t]):Array.isArray(t)?(this.value=this.multiple||this.range?t:t[0],this._value=t):(this.value="",this._value=[]),(!this.value||this.value.length===0)&&r&&r.length!==0?this.clearInputValue():this.value&&this.value.toString()!==(r==null?void 0:r.toString())&&this.onChange(this.value),this.updateComplete.then(()=>this.requestUpdate()))}clearInputValue(){const t=this.multiple||this.range?[]:"";this.value=t,this.internals.setFormValue(t),this.dispatchEvent(new Event("change")),this.dispatchEvent(new CustomEvent("value-change",{detail:t,bubbles:!0,composed:!0}))}onFocus(){this.dispatchEvent(new FocusEvent("focus"))}onBlur(){this.dispatchEvent(new FocusEvent("blur"))}onInput(){this.dispatchEvent(new InputEvent("input"))}onChange(t){if(!this.touched){this.touched=!0,t&&this.setFormValue(t);return}typeof t!="string"&&!Array.isArray(t)||((this.range||this.multiple)&&!Array.isArray(t)&&t.includes(",")&&(t=t.split(",")),!this.multiple&&!this.range&&Array.isArray(t)&&(t=t[0]),this.setFormValue(t),this.manageValidity(this.inputRef.value),this.inputRefTo&&this.manageValidity(this.inputRefTo.value),this.dispatchEvent(new Event("change")),this.dispatchEvent(new CustomEvent("value-change",{detail:t,bubbles:!0,composed:!0})),this.internals.reportValidity())}updated(t){super.updated(t),t.has("dataTestid")&&this.dataTestid&&this.inputRef.value&&(this.skipForwardTestid?this.hasAttribute("data-testid")||this.setAttribute("data-testid",this.dataTestid):(this.inputRef.value.dataset.testid=this.dataTestid,this.removeAttribute("data-testid")))}firstUpdated(t){if(super.firstUpdated(t),this.value&&this.defaultValue!==null&&(this.defaultValue=this.value),this.defaultValue!==null&&!this.value&&this.valueChanged(this.defaultValue,null),this.defaultChecked&&(this.internals.ariaChecked=!0,this.checked=!0),this.required&&(this.internals.ariaRequired=!0),this.disabled&&(this.internals.ariaDisabled=!0),this.id&&!this.name&&(this.name=this.id),this.checked!==void 0){const r=this.checked===""||this.checked==="true"||this.checked===!0;this.internals.ariaChecked=r,this.internals.setFormValue(r?this.value||"on":"",r?this.value||"on":"")}else this.internals.setFormValue(this.value);this.inputRef&&this.inputRef.value&&(this.inputRef.value.setAttribute("form",""),this.manageValidity(this.inputRef.value)),this.inputRefTo&&this.inputRefTo.value&&(this.inputRefTo.value.setAttribute("form",""),this.manageValidity(this.inputRefTo.value))}}s([e.n()],i.prototype,"defaultValue");s([e.n({type:Boolean,reflect:!0})],i.prototype,"disabled");s([e.n({type:Boolean,reflect:!0})],i.prototype,"readonly");s([e.n({type:Boolean,reflect:!0})],i.prototype,"required");s([e.n({type:Number,reflect:!0})],i.prototype,"max");s([e.n({type:Number,reflect:!0})],i.prototype,"maxlength");s([e.n({type:Number,reflect:!0})],i.prototype,"min");s([e.n({type:Number,reflect:!0})],i.prototype,"minlength");s([e.n({type:String})],i.prototype,"ariaDescribedBy");s([e.n({type:String})],i.prototype,"ariaLabelledby");s([e.n({type:String,reflect:!0})],i.prototype,"name");s([e.n({type:String,reflect:!0})],i.prototype,"pattern");s([e.n({type:String,reflect:!0})],i.prototype,"placeholder");s([e.n({type:String,reflect:!0})],i.prototype,"id");s([e.n({type:Boolean})],i.prototype,"counter");s([e.n({type:Boolean})],i.prototype,"hasError");s([e.n({type:Boolean})],i.prototype,"inline");s([e.n({type:Boolean})],i.prototype,"hasFieldset");s([e.n({type:Boolean})],i.prototype,"optionalTag");s([e.n({type:Boolean})],i.prototype,"requiredTag");s([e.n({type:Boolean})],i.prototype,"skipForwardTestid");s([e.n({type:Boolean,reflect:!1})],i.prototype,"useWrapper");s([e.n({type:Boolean,reflect:!0})],i.prototype,"fullwidth");s([e.n({type:Number})],i.prototype,"counterMaxLength");s([e.n({type:String})],i.prototype,"errorMessage");s([e.n({type:String})],i.prototype,"helptext");s([e.n({type:String})],i.prototype,"helptextDropdown");s([e.n({type:String,reflect:!1})],i.prototype,"helptextDropdownButton");s([e.n({type:String})],i.prototype,"label");s([e.n({type:String,reflect:!1})],i.prototype,"optionalText");s([e.n({type:String,reflect:!1})],i.prototype,"requiredText");s([e.n({type:String,attribute:"data-testid"})],i.prototype,"dataTestid");s([f.r()],i.prototype,"touched");exports.PktInputElement=i;

package/dist/{input-element-BK8UkQli.js → input-element-DM2uSYaW.js}

@@ -1,32 +1,32 @@
-import { n as s, P as y, t as n } from "./element-C7XjZtLU.js";
-import { r as c } from "./state-CDQk0DFQ.js";
+import { n as s, P as y, t as l } from "./element-G8JoS0Lj.js";
+import { r as c } from "./state-gfUuUqVg.js";
 import { u as m } from "./stringutils-DJjRa8dG.js";
 import { s as g } from "./input-wrapper-Bw9tARAD.js";
-var v = Object.defineProperty, e = (p, t, r, l) => {
+var v = Object.defineProperty, e = (p, t, r, n) => {
   for (var a = void 0, h = p.length - 1, o; h >= 0; h--)
     (o = p[h]) && (a = o(t, r, a) || a);
   return a && v(t, r, a), a;
 };
 class i extends y {
   constructor() {
-    super(), this.defaultValue = null, this.disabled = !1, this.readonly = !1, this.required = !1, this.max = null, this.maxlength = null, this.min = null, this.minlength = null, this.ariaDescribedBy = null, this.ariaLabelledby = null, this.name = "", this.pattern = null, this.placeholder = null, this.id = m(), this.counter = !1, this.hasError = !1, this.inline = !1, this.optionalTag = !1, this.requiredTag = !1, this.skipForwardTestid = !1, this.useWrapper = !0, this.fullwidth = !1, this.counterMaxLength = 0, this.errorMessage = "", this.helptext = "", this.helptextDropdown = "", this.helptextDropdownButton = g.props.helptextDropdownButton.default, this.label = null, this.optionalText = n.forms.labels.optional, this.requiredText = n.forms.labels.required, this.dataTestid = "", this.touched = !1, this.internals = this.attachInternals();
+    super(), this.defaultValue = null, this.disabled = !1, this.readonly = !1, this.required = !1, this.max = null, this.maxlength = null, this.min = null, this.minlength = null, this.ariaDescribedBy = null, this.ariaLabelledby = null, this.name = "", this.pattern = null, this.placeholder = null, this.id = m(), this.counter = !1, this.hasError = !1, this.inline = !1, this.hasFieldset = !1, this.optionalTag = !1, this.requiredTag = !1, this.skipForwardTestid = !1, this.useWrapper = !0, this.fullwidth = !1, this.counterMaxLength = 0, this.errorMessage = "", this.helptext = "", this.helptextDropdown = "", this.helptextDropdownButton = g.props.helptextDropdownButton.default, this.label = null, this.optionalText = l.forms.labels.optional, this.requiredText = l.forms.labels.required, this.dataTestid = "", this.touched = !1, this.internals = this.attachInternals();
   }
   static get formAssociated() {
     return !0;
   }
   manageValidity(t) {
-    var r, l, a, h, o, u, d, f;
-    t && (this.required && !this.value ? this.internals.setValidity({ valueMissing: !0 }, n.forms.messages.required, t) : (r = t.validity) != null && r.typeMismatch || (l = t.validity) != null && l.badInput ? this.internals.setValidity({ typeMismatch: !0 }, n.forms.messages.invalid, t) : (a = t.validity) != null && a.patternMismatch ? this.internals.setValidity(
+    var r, n, a, h, o, u, d, f;
+    t && (this.required && !this.value ? this.internals.setValidity({ valueMissing: !0 }, l.forms.messages.required, t) : (r = t.validity) != null && r.typeMismatch || (n = t.validity) != null && n.badInput ? this.internals.setValidity({ typeMismatch: !0 }, l.forms.messages.invalid, t) : (a = t.validity) != null && a.patternMismatch ? this.internals.setValidity(
       { patternMismatch: !0 },
-      n.forms.messages.invalidPattern,
+      l.forms.messages.invalidPattern,
       t
-    ) : (h = t.validity) != null && h.tooShort || this.minlength && this.minlength > 0 && this.value.length < this.minlength ? this.internals.setValidity({ tooShort: !0 }, n.forms.messages.tooShort, t) : (o = t.validity) != null && o.tooLong || this.maxlength && this.maxlength > 0 && this.value.length > this.maxlength ? this.internals.setValidity({ tooLong: !0 }, n.forms.messages.tooLong, t) : (u = t.validity) != null && u.rangeUnderflow ? this.internals.setValidity(
+    ) : (h = t.validity) != null && h.tooShort || this.minlength && this.minlength > 0 && this.value.length < this.minlength ? this.internals.setValidity({ tooShort: !0 }, l.forms.messages.tooShort, t) : (o = t.validity) != null && o.tooLong || this.maxlength && this.maxlength > 0 && this.value.length > this.maxlength ? this.internals.setValidity({ tooLong: !0 }, l.forms.messages.tooLong, t) : (u = t.validity) != null && u.rangeUnderflow ? this.internals.setValidity(
       { rangeUnderflow: !0 },
-      n.forms.messages.rangeUnderflow,
+      l.forms.messages.rangeUnderflow,
       t
     ) : (d = t.validity) != null && d.rangeOverflow ? this.internals.setValidity(
       { rangeOverflow: !0 },
-      n.forms.messages.rangeOverflow,
+      l.forms.messages.rangeOverflow,
       t
     ) : (f = t.validity) != null && f.customError ? this.internals.setValidity({ customError: !0 }, t.validationMessage, t) : this.internals.setValidity({}));
   }
@@ -34,8 +34,8 @@ class i extends y {
     if (this.internals)
       if (Array.isArray(t)) {
         const r = new FormData();
-        t.forEach((l) => {
-          r.append(this.name, l);
+        t.forEach((n) => {
+          r.append(this.name, n);
         }), this.internals.setFormValue(r);
       } else
         this.internals.setFormValue(t);
@@ -47,8 +47,8 @@ class i extends y {
     const r = this.internals.form || this.closest("form");
     r && r.querySelectorAll(
       `pkt-radiobutton[name=${this.name}], input[type=radio][name=${this.name}]`
-    ).forEach((l) => {
-      const a = l;
+    ).forEach((n) => {
+      const a = n;
       a.name === this.name && a.value !== this.value && a.checked && (a.checked = !1);
     }), typeof t == "string" ? (this.checked = t === "true", this.internals.ariaChecked = t === "true") : typeof t == "boolean" && (this.checked = t, this.internals.ariaChecked = t), this.checked ? (this.internals.setFormValue(this.value || "on", this.value || "on"), this.internals.states.add("--checked")) : (this.internals.setFormValue("", ""), this.internals.states.delete("--checked")), this.dispatchEvent(new Event("change")), this.dispatchEvent(
       new CustomEvent("value-change", {
@@ -59,7 +59,7 @@ class i extends y {
     ), this.internals.reportValidity();
   }
   valueChanged(t, r) {
-    (r !== this.value || r !== this._value) && (typeof t == "string" ? ((this.multiple || this.range) && t.includes(",") && (t = t.split(",")), this.value = t, this._value = Array.isArray(t) ? t : [t]) : Array.isArray(t) ? (this.value = t, this._value = t) : (this.value = "", this._value = []), (!this.value || this.value.length === 0) && r && r.length !== 0 ? this.clearInputValue() : this.value && this.value.toString() !== (r == null ? void 0 : r.toString()) && this.onChange(this.value), this.updateComplete.then(() => this.requestUpdate()));
+    (r !== this.value || r !== this._value) && (typeof t == "string" ? ((this.multiple || this.range) && t.includes(",") && (t = t.split(",")), this.value = t, this._value = Array.isArray(t) ? t : [t]) : Array.isArray(t) ? (this.value = this.multiple || this.range ? t : t[0], this._value = t) : (this.value = "", this._value = []), (!this.value || this.value.length === 0) && r && r.length !== 0 ? this.clearInputValue() : this.value && this.value.toString() !== (r == null ? void 0 : r.toString()) && this.onChange(this.value), this.updateComplete.then(() => this.requestUpdate()));
   }
   // When input goes from content to no content
   clearInputValue() {
@@ -164,6 +164,9 @@ e([
 e([
   s({ type: Boolean })
 ], i.prototype, "inline");
+e([
+  s({ type: Boolean })
+], i.prototype, "hasFieldset");
 e([
   s({ type: Boolean })
 ], i.prototype, "optionalTag");
@@ -174,7 +177,7 @@ e([
   s({ type: Boolean })
 ], i.prototype, "skipForwardTestid");
 e([
-  s({ type: Boolean })
+  s({ type: Boolean, reflect: !1 })
 ], i.prototype, "useWrapper");
 e([
   s({ type: Boolean, reflect: !0 })
@@ -192,16 +195,16 @@ e([
   s({ type: String })
 ], i.prototype, "helptextDropdown");
 e([
-  s({ type: String })
+  s({ type: String, reflect: !1 })
 ], i.prototype, "helptextDropdownButton");
 e([
   s({ type: String })
 ], i.prototype, "label");
 e([
-  s({ type: String })
+  s({ type: String, reflect: !1 })
 ], i.prototype, "optionalText");
 e([
-  s({ type: String })
+  s({ type: String, reflect: !1 })
 ], i.prototype, "requiredText");
 e([
   s({ type: String, attribute: "data-testid" })

package/dist/input-wrapper-BdZxmQyO.cjs

@@ -0,0 +1,52 @@
+"use strict";const t=require("./element-BBo3JZk5.cjs"),b=require("./pkt-slot-controller-CqNvEpFd.cjs"),a=require("./ref-DsoUUoPU.cjs"),y=require("./icon-BTUCDPN5.cjs"),c=require("./class-map-D4rXyUxT.cjs"),f=require("./state-BILlRnrD.cjs"),$=require("./stringutils-CkVRq4jP.cjs"),p=require("./input-wrapper-jPnKsfEC.cjs");require("./helptext-B4Uc-d56.cjs");var I=Object.defineProperty,P=Object.getOwnPropertyDescriptor,e=(u,r,i,o)=>{for(var s=o>1?void 0:o?P(r,i):r,n=u.length-1,l;n>=0;n--)(l=u[n])&&(s=(o?l(r,i,s):l(s))||s);return o&&s&&I(r,i,s),s};exports.PktInputWrapper=class extends t.PktElement{constructor(){super(),this.defaultSlot=a.e(),this.helptextSlot=a.e(),this.hasHelptextSlot=!0,this.forId=$.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.counterError=null,this.counterPosition="bottom",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 b.PktSlotController(this,this.defaultSlot,this.helptextSlot)}updateSlots(r){this.hasHelptextSlot=r.has("helptext"),this.requestUpdate()}updated(r){super.updated(r)}render(){const r={"pkt-inputwrapper":!0,"pkt-inputwrapper--error":this.hasError,"pkt-inputwrapper--disabled":this.disabled,"pkt-inputwrapper--inline":this.inline},i={"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.ariaDescribedby?this.ariaDescribedby:this.helptext?`${this.forId}-helptext`:t.E,s=()=>this.optionalTag||this.requiredTag?t.x`<span class=${c.e(i)}
+          >${this.optionalTag?this.optionalText:this.requiredTag?this.requiredText:t.E}</span
+        >`:t.E,n=()=>this.useWrapper?this.hasFieldset?t.x`<legend
+            class="pkt-inputwrapper__legend"
+            id="${this.forId}-label"
+            @click=${this.handleLabelClick}
+          >
+            ${this.label} ${s()}
+          </legend>`:t.x`<label
+            class="pkt-inputwrapper__label"
+            for="${this.forId}"
+            aria-describedby="${o}"
+            id="${this.forId}-label"
+            @click=${this.handleLabelClick}
+            >${this.label}${s()}</label
+          >`:t.x`<label
+          for="${this.forId}"
+          class="pkt-sr-only"
+          aria-describedby="${o}"
+          id="${this.forId}-label"
+        >
+          ${this.label}
+        </label>`,l=()=>!this.helptext&&!this.hasHelptextSlot&&!this.helptextDropdown?t.E:t.x`
+        <pkt-helptext
+          .forId=${this.forId}
+          .helptext=${this.helptext}
+          .helptextDropdown=${this.helptextDropdown}
+          .helptextDropdownButton=${this.helptextDropdownButton||p.specs.props.helptextDropdownButton.default}
+          @toggleHelpText=${g=>{this.toggleDropdown(g)}}
+          ${a.n(this.helptextSlot)}
+          name="helptext"
+        ></pkt-helptext>
+      `,h=()=>this.counter?t.x`<div class="pkt-input__counter" aria-live="polite" aria-atomic="true">
+          ${this.counterError?this.counterError:t.E} ${this.counterCurrent||0}
+          ${this.counterMaxLength?`/${this.counterMaxLength}`:t.E}
+        </div>`:t.E,k=()=>this.hasError&&this.errorMessage?t.x`<div
+          role="alert"
+          class="pkt-alert pkt-alert--error pkt-alert--compact"
+          aria-live="assertive"
+          aria-atomic="true"
+          id="${this.forId}-error"
+        >
+          <pkt-icon name="alert-error" class="pkt-alert__icon"></pkt-icon>
+          <div class="pkt-alert__text">${y.o(this.errorMessage)}</div>
+        </div>`:t.E,d=()=>t.x`
+        ${n()} ${l()}
+        ${this.counterPosition==="top"?h():t.E}
+        <div class="pkt-contents" ${a.n(this.defaultSlot)}></div>
+        ${this.counterPosition==="bottom"?h():t.E} ${k()}
+      `,x=()=>this.hasFieldset?t.x`<fieldset class="pkt-inputwrapper__fieldset" aria-describedby="${o}">
+            ${d()}
+          </fieldset>`:t.x`<div class="pkt-inputwrapper__fieldset">${d()}</div>`;return t.x`<div class=${c.e(r)}>${x()}</div> `}toggleDropdown(r){this.dispatchEvent(new CustomEvent("toggleHelpText",{bubbles:!1,detail:{isOpen:r.detail.isOpen}}))}handleLabelClick(r){this.disabled&&(r.preventDefault(),r.stopImmediatePropagation()),this.dispatchEvent(new CustomEvent("labelClick",{bubbles:!0,composed:!0,detail:"label clicked"}))}};e([f.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:String})],exports.PktInputWrapper.prototype,"counterError",2);e([t.n({type:String,reflect:!1})],exports.PktInputWrapper.prototype,"counterPosition",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);