@oslokommune/punkt-elements 17.0.9 → 17.1.0

package/dist/input-wrapper-fWV5P4MN.js

@@ -1,126 +0,0 @@
-import { d as e, n as t, o as n, p as r, s as i } from "./element-BoJrqauR.js";
-import { t as a } from "./class-map-CAQCRB1W.js";
-import { n as o, t as s } from "./element-with-slot-mXLg8gg8.js";
-import "./alert-CbtVGrHD.js";
-import { r as c } from "./icon-DGFEIlco.js";
-import { t as l } from "./if-defined-D0bnetLJ.js";
-import { n as u } from "./utils-BwF4QSrq.js";
-import { t as d } from "./booleanish-MfutDT_4.js";
-import { t as f } from "./input-wrapper-BweP6t3O.js";
-import "./helptext-C_brWCIT.js";
-import { t as p } from "./focus-modality-controller-Dc2S-KqR.js";
-//#region src/components/input-wrapper/input-wrapper.ts
-var m = class extends s {
-	constructor(...e) {
-		super(...e), this.forId = u(), this.label = "", this.helptext = null, this.helptextDropdown = null, this.helptextDropdownButton = null, this.counter = f.props.counter.default, this.counterCurrent = 0, this.counterMaxLength = 0, this.counterError = null, this.counterPosition = "bottom", this.optionalTag = f.props.optionalTag.default, this.optionalText = f.props.optionalText.default, this.requiredTag = f.props.requiredTag.default, this.requiredText = f.props.requiredText.default, this.tagText = null, this.hasError = f.props.hasError.default, this.errorMessage = "", this.disabled = f.props.disabled.default, this.inline = f.props.inline.default, this.ariaDescribedby = void 0, this.hasFieldset = f.props.hasFieldset.default, this.role = "group", this.useWrapper = f.props.useWrapper.default, this.size = "medium", this.focusModality = new p(this, ".pkt-inputwrapper");
-	}
-	updated(e) {
-		super.updated(e);
-	}
-	render() {
-		let t = {
-			"pkt-inputwrapper": !0,
-			"pkt-inputwrapper--error": this.hasError,
-			"pkt-inputwrapper--disabled": this.disabled,
-			"pkt-inputwrapper--inline": this.inline,
-			"pkt-inputwrapper--small": this.size === "small",
-			"pkt-inputwrapper--xsmall": this.size === "xsmall"
-		}, n = this.ariaDescribedby ? this.ariaDescribedby : this.helptext ? `${this.forId}-helptext` : e, i = () => r`
-        ${this.tagText ? r`<span class=${"pkt-tag pkt-tag--small pkt-tag--thin-text pkt-tag--gray"}>${this.tagText}</span>` : e}
-        ${this.optionalTag ? r`<span class=${"pkt-tag pkt-tag--small pkt-tag--thin-text pkt-tag--blue-light"}>${this.optionalText}</span>` : e}
-        ${this.requiredTag ? r`<span class=${"pkt-tag pkt-tag--small pkt-tag--thin-text pkt-tag--beige"}>${this.requiredText}</span>` : e}
-      `, s = () => this.useWrapper ? this.hasFieldset ? r`<legend
-            class="pkt-inputwrapper__legend"
-            id="${this.forId}-label"
-            @click=${this.handleLabelClick}
-          >
-            ${this.label} ${i()}
-          </legend>` : r`<label
-            class="pkt-inputwrapper__label"
-            for="${this.forId}"
-            aria-describedby="${n}"
-            id="${this.forId}-label"
-            @click=${this.handleLabelClick}
-            >${this.label}${i()}</label
-          >` : r`<label
-          for="${this.forId}"
-          class="pkt-sr-only"
-          aria-describedby="${n}"
-          id="${this.forId}-label"
-        >
-          ${this.label}
-        </label>`, u = () => r`
-        <pkt-helptext
-          class="${l(this.useWrapper ? void 0 : "pkt-hide")}"
-          .forId=${this.forId}
-          .helptext=${this.helptext}
-          .helptextDropdown=${this.helptextDropdown}
-          .helptextDropdownButton=${this.helptextDropdownButton || f.props.helptextDropdownButton.default}
-          @toggleHelpText=${(e) => {
-			this.toggleDropdown(e);
-		}}
-          >${o(this, "helptext")}</pkt-helptext
-        >
-      `, d = () => this.counter ? r`<div class="pkt-input__counter" aria-live="polite" aria-atomic="true">
-          ${this.counterError ? this.counterError : e} ${this.counterCurrent || 0}
-          ${this.counterMaxLength ? `/${this.counterMaxLength}` : e}
-        </div>` : e, p = () => this.hasError && this.errorMessage ? r`<div class="pkt-inputwrapper__alert-wrapper">
-          <pkt-alert
-            skin="error"
-            .size=${this.size === "medium" ? "small" : "xsmall"}
-            id=${`${this.forId}-error`}
-            aria-live="assertive"
-            aria-atomic="true"
-          >
-            ${c(this.errorMessage)}
-          </pkt-alert>
-        </div>` : e, m = () => r`
-        ${s()} 
-        ${u()}
-        ${this.counterPosition === "top" ? d() : e}
-        <div class="pkt-contents">${o(this)}</div>
-        ${this.counterPosition === "bottom" ? d() : e} 
-        ${p()}
-      `;
-		return r`<div class=${a(t)}>${this.hasFieldset ? r`<fieldset class="pkt-inputwrapper__fieldset" aria-describedby="${n}">
-            ${m()}
-          </fieldset>` : r`<div class="pkt-inputwrapper__fieldset">${m()}</div>`}</div> `;
-	}
-	toggleDropdown(e) {
-		this.dispatchEvent(new CustomEvent("toggleHelpText", {
-			bubbles: !1,
-			detail: { isOpen: e.detail.isOpen }
-		}));
-	}
-	handleLabelClick() {
-		this.dispatchEvent(new CustomEvent("labelClick", {
-			bubbles: !0,
-			composed: !0,
-			detail: "label clicked"
-		}));
-	}
-};
-t([n({ type: String })], m.prototype, "forId", void 0), t([n({ type: String })], m.prototype, "label", void 0), t([n({ type: String })], m.prototype, "helptext", void 0), t([n({ type: String })], m.prototype, "helptextDropdown", void 0), t([n({ type: String })], m.prototype, "helptextDropdownButton", void 0), t([n({ type: Boolean })], m.prototype, "counter", void 0), t([n({ type: Number })], m.prototype, "counterCurrent", void 0), t([n({ type: Number })], m.prototype, "counterMaxLength", void 0), t([n({ type: String })], m.prototype, "counterError", void 0), t([n({
-	type: String,
-	reflect: !1
-})], m.prototype, "counterPosition", void 0), t([n({ type: Boolean })], m.prototype, "optionalTag", void 0), t([n({ type: String })], m.prototype, "optionalText", void 0), t([n({ type: Boolean })], m.prototype, "requiredTag", void 0), t([n({ type: String })], m.prototype, "requiredText", void 0), t([n({ type: String })], m.prototype, "tagText", void 0), t([n({ type: Boolean })], m.prototype, "hasError", void 0), t([n({ type: String })], m.prototype, "errorMessage", void 0), t([n({ type: Boolean })], m.prototype, "disabled", void 0), t([n({ type: Boolean })], m.prototype, "inline", void 0), t([n({ type: String })], m.prototype, "ariaDescribedby", void 0), t([n({ type: Boolean })], m.prototype, "hasFieldset", void 0), t([n({
-	type: String,
-	reflect: !0
-})], m.prototype, "role", void 0), t([n({
-	type: Boolean,
-	reflect: !0,
-	converter: d
-})], m.prototype, "useWrapper", void 0), t([n({
-	type: String,
-	attribute: "input-wrapper-size"
-})], m.prototype, "size", void 0);
-try {
-	i("pkt-input-wrapper")(m);
-} catch {
-	console.warn("Forsøker å definere <pkt-input-wrapper>, men den er allerede definert");
-}
-//#endregion
-//#region src/components/input-wrapper/index.ts
-var h = m;
-//#endregion
-export { m as n, h as t };

package/dist/select-CZvAW7W2.cjs

@@ -1,50 +0,0 @@
-const e=require("./element-DJzurxgt.cjs"),t=require("./element-with-slot-BY7Jc-q8.cjs"),n=require("./if-defined-DrwbxQOj.cjs"),r=require("./ref-DO7TzO4O.cjs"),i=require("./input-element-B0qLbEdF.cjs"),a=require("./pkt-options-controller-CPrfqepu.cjs");require("./input-wrapper-DPkkiG7S.cjs");var o=class extends i.t{constructor(...e){super(...e),this._optionsProp=[],this._options=[]}get options(){return this._options.map(e=>({...e,selected:this.isOptionSelected(e)}))}set options(e){this._optionsProp=e,this.requestUpdate(`_optionsProp`,this._options)}isOptionSelected(e){return Array.isArray(this.value)?this.value.includes(e.value):e.value===this.value}findOptionByValue(e){return this._options.find(t=>t.value===e)}getSelectedOptions(){return this._options.filter(e=>this.isOptionSelected(e))}parseOptions(){let e=this._optionsProp.length>0,t=this.optionsController?.nodes?.length&&this.optionsController.nodes.length>0;e?this._options=this._optionsProp:t&&(this._options=this.optionsController.options)}willUpdate(e){super.willUpdate(e),this.parseOptions()}};e.n([e.o({type:Array,attribute:`options`})],o.prototype,`_optionsProp`,void 0),e.n([e.a()],o.prototype,`_options`,void 0);var s=class extends o{constructor(){super(),this.inputRef=r.t(),this.value=``,this.selectedIndex=-1,this.selectedOptions=void 0,this.optionsController=new a.t(this)}connectedCallback(){super.connectedCallback(),this.parseOptions(),this._options.forEach(e=>{e.selected&&!this.value&&(this.value=e.value)})}add(e,t){let n={value:e.value||e.text,label:e.text||e.value,selected:e.selected,disabled:e.disabled};if(t===void 0)this._options.push(n);else if(typeof t==`number`)this._options.splice(t,0,n);else{let e=t.value||t.text,r=this._options.findIndex(t=>t.value===e);r>=0?this._options.splice(r,0,n):this._options.push(n)}e.selected&&(this.value=e.value||e.text,this.selectedIndex=this._options.findIndex(e=>e.value===this.value)),this.requestUpdate()}remove(e){typeof e==`number`&&(this.selectedIndex===e&&(this.value=this._options[0]?.value||``),this._options.splice(e,1),this.requestUpdate())}item(e){return this.inputRef.value?.item(e)}namedItem(e){return this.inputRef.value?.namedItem(e)}showPicker(){this.inputRef.value&&`showPicker`in this.inputRef.value&&this.inputRef.value.showPicker()}attributeChangedCallback(e,t,n){e===`options`&&(this._options=n?JSON.parse(n):[]),e===`value`&&this.value!==t&&(this.selectedIndex=this.touched?this.returnNumberOrNull(this.inputRef.value?.selectedIndex):this._options.findIndex(e=>e.value===n),this.selectedOptions=this.inputRef.value?.selectedOptions,this.valueChanged(n,t)),super.attributeChangedCallback(e,t,n)}update(e){super.update(e),e.has(`_optionsProp`)&&this._optionsProp.length>0&&(this._options=this._optionsProp,this.requestUpdate(`_options`),!this.value&&this._options.length>0&&(this.value=this._options[0].value,this.selectedIndex=0)),e.has(`value`)&&this.value!==e.get(`value`)&&(this.selectedIndex=this.touched?this.returnNumberOrNull(this.inputRef.value?.selectedIndex):this._options.findIndex(e=>e.value===this.value),this.selectedOptions=this.inputRef.value?.selectedOptions,this.valueChanged(this.value,e.get(`value`))),e.has(`id`)&&!this.name&&this.id&&(this.name=this.id)}firstUpdated(e){super.firstUpdated(e),this._optionsProp.length&&(this._options=this._optionsProp),!this.value&&this._options.length>0?(this.value=this._options[0].value,this.selectedIndex=0):this.selectedIndex=this._options.findIndex(e=>e.value===this.value),this.selectedOptions=this.inputRef.value?.selectedOptions}render(){let i=`pkt-input pkt-input--${this.inputSize} ${this.fullwidth?`pkt-input--fullwidth`:``}`;return e.p`
-      <pkt-input-wrapper
-        .size=${this.inputSize}
-        ?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=${n.t(this.ariaDescribedBy)}
-        class="pkt-select"
-        errorMessage=${n.t(this.errorMessage)}
-        forId=${this.id+`-input`}
-        helptext=${n.t(this.helptext)}
-        helptextDropdown=${n.t(this.helptextDropdown)}
-        helptextDropdownButton=${n.t(this.helptextDropdownButton)}
-        label=${n.t(this.label)}
-        optionalText=${n.t(this.optionalText)}
-        requiredText=${n.t(this.requiredText)}
-        tagText=${n.t(this.tagText)}
-      >
-        <select
-          class=${i}
-          aria-invalid=${this.hasError}
-          aria-errormessage=${`${this.id}-error`}
-          aria-labelledby=${n.t(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(t=>e.p`<option
-                    value=${t.value}
-                    ?selected=${this.value==t.value||t.selected}
-                    ?disabled=${t.disabled}
-                    ?hidden=${t.hidden}
-                  >
-                    ${t.label}
-                  </option>`):``}
-        </select>
-        <div class="pkt-contents" slot="helptext">${t.n(this,`helptext`)}</div>
-      </pkt-input-wrapper>
-    `}returnNumberOrNull(e){return e==null||isNaN(e)?null:e}};e.n([e.o({type:String})],s.prototype,`value`,void 0);try{e.s(`pkt-select`)(s)}catch{console.warn(`Forsøker å definere <pkt-select>, men den er allerede definert`)}var c=s;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return c}});

package/dist/textarea-sTcZxOIB.cjs

@@ -1,47 +0,0 @@
-const e=require("./element-DJzurxgt.cjs"),t=require("./class-map-CCZN5uS3.cjs"),n=require("./directive-helpers-BshFvt7A.cjs"),r=require("./element-with-slot-BY7Jc-q8.cjs");require("./icon-B8PVq2O6.cjs");const i=require("./if-defined-DrwbxQOj.cjs"),a=require("./ref-DO7TzO4O.cjs"),o=require("./input-element-B0qLbEdF.cjs");require("./input-wrapper-DPkkiG7S.cjs");var s=e.c(class extends e.l{constructor(t){if(super(t),t.type!==e.u.PROPERTY&&t.type!==e.u.ATTRIBUTE&&t.type!==e.u.BOOLEAN_ATTRIBUTE)throw Error("The `live` directive is not allowed on child or event bindings");if(!n.i(t))throw Error("`live` bindings can only contain a single expression")}render(e){return e}update(t,[r]){if(r===e.f||r===e.d)return r;let i=t.element,a=t.name;if(t.type===e.u.PROPERTY){if(r===i[a])return e.f}else if(t.type===e.u.BOOLEAN_ATTRIBUTE){if(!!r===i.hasAttribute(a))return e.f}else if(t.type===e.u.ATTRIBUTE&&i.getAttribute(a)===r+``)return e.f;return n.r(t),r}}),c=class extends o.t{constructor(...e){super(...e),this.inputRef=a.t(),this.value=``,this.autocomplete=`off`,this.rows=null,this.counterCurrent=0}attributeChangedCallback(e,t,n){e===`value`&&this.value!==t&&(this.counterCurrent=n?n.length:0),super.attributeChangedCallback(e,t,n)}updated(e){super.updated(e),e.has(`value`)&&(this.counterCurrent=this.value?.length||0,this.valueChanged(this.value,e.get(`value`))),e.has(`id`)&&!this.name&&this.id&&(this.name=this.id)}render(){let n=t.t({"pkt-input":!0,[`pkt-input--${this.inputSize}`]:!0,"pkt-input--fullwidth":this.fullwidth,"pkt-input--counter-error":this.counter&&this.counterMaxLength&&this.value.length&&this.value.length>this.counterMaxLength}),o=this.ariaLabelledby||`${this.id}-input-label`;return e.p`<pkt-input-wrapper
-      label=${this.label}
-      ?counter=${this.counter}
-      ?disabled=${this.disabled}
-      ?hasError=${this.hasError}
-      ?inline=${this.inline}
-      ?optionalTag=${this.optionalTag}
-      ?required=${this.required}
-      ?requiredTag=${this.requiredTag}
-      useWrapper=${this.useWrapper}
-      .ariaDescribedBy=${this.ariaDescribedBy}
-      .counterCurrent=${this.counterCurrent}
-      .counterMaxLength=${this.counterMaxLength}
-      .errorMessage=${this.errorMessage}
-      .forId="${this.id+`-input`}"
-      .helptext=${this.helptext}
-      .helptextDropdown=${this.helptextDropdown}
-      .helptextDropdownButton=${this.helptextDropdownButton}
-      .optionalText=${this.optionalText}
-      .requiredText=${this.requiredText}
-      .tagText=${this.tagText}
-      .size=${this.inputSize}
-      class="pkt-textarea"
-    >
-      <div class="pkt-contents" slot="helptext">${r.n(this,`helptext`)}</div>
-      <textarea
-        ${a.n(this.inputRef)}
-        class=${n}
-        id=${this.id+`-input`}
-        name=${(this.name||this.id)+`-input`}
-        placeholder=${i.t(this.placeholder)}
-        .value=${s(this.value)}
-        minlength=${i.t(this.minlength)}
-        maxlength=${i.t(this.maxlength)}
-        ?readonly=${this.readonly}
-        autocomplete=${this.autocomplete}
-        aria-labelledby=${o}
-        aria-invalid=${this.hasError}
-        aria-errormessage=${`${this.id}-error`}
-        rows=${i.t(this.rows??void 0)}
-        ?disabled=${this.disabled}
-        @input=${e=>{this.value=e.target.value,this.onInput(),e.stopImmediatePropagation()}}
-        @change=${e=>{e.stopImmediatePropagation()}}
-        @focus=${e=>{this.onFocus(),e.stopImmediatePropagation()}}
-        @blur=${e=>{this.value=e.target.value,this.onBlur(),e.stopImmediatePropagation()}}
-      ></textarea>
-    </pkt-input-wrapper>`}};e.n([e.o({type:String,reflect:!0})],c.prototype,`value`,void 0),e.n([e.o({type:String})],c.prototype,`autocomplete`,void 0),e.n([e.o({type:Number})],c.prototype,`rows`,void 0),e.n([e.a()],c.prototype,`counterCurrent`,void 0);try{e.s(`pkt-textarea`)(c)}catch{console.warn(`Forsøker å definere <pkt-textarea>, men den er allerede definert`)}var l=c;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return l}});