@oslokommune/punkt-elements 19.8.0 → 19.10.0

package/dist/radiobutton-l_3oGDbb.js

@@ -1,97 +0,0 @@
-import { _ as e, d as t, h as n, l as r, n as i, u as a } from "./element-mwwC2Rra.js";
-import { t as o } from "./class-map-C4hdfSfY.js";
-import { n as s, t as c } from "./ref-CCSGk4MP.js";
-import { t as l } from "./input-element-lLzfwdim.js";
-//#region src/components/radiobutton/radiobutton.ts
-var u = class extends l {
-	constructor(...e) {
-		super(...e), this.inputRef = c(), this.value = "", this.checkHelptext = null, this.defaultChecked = !1, this.hasTile = !1, this.checked = null, this.type = "radio", this.inputSize = void 0, this.tagText = null, this.optionalTag = !1, this.requiredTag = !1, this._checked = !1;
-	}
-	connectedCallback() {
-		super.connectedCallback();
-	}
-	attributeChangedCallback(e, t, n) {
-		e === "checked" && (this._checked = this.checked === "" || this.checked === "true" || this.checked === !0), super.attributeChangedCallback(e, t, n);
-	}
-	render() {
-		let t = o({
-			"pkt-input-check__input": !0,
-			"pkt-input-check__input--tile": this.hasTile,
-			"pkt-input-check__input--tile-disabled": this.isDisabled && this.hasTile
-		}), r = o({
-			"pkt-input-check__input-checkbox": !0,
-			"pkt-input-check__input-checkbox--error": this.hasError
-		}), i = o({
-			"pkt-input-check__input-label": !0,
-			"pkt-input-check__input-label--disabled": this.isDisabled,
-			"pkt-sr-only": this.hideLabel
-		}), a = "pkt-tag pkt-tag--small pkt-tag--thin-text", c = this.pktStrings.get("forms"), l = () => e`
-        ${this.tagText ? e`<span class=${a + " pkt-tag--gray"}>${this.tagText}</span>` : n}
-        ${this.optionalTag ? e`<span class=${a + " pkt-tag--blue-light"}
-                >${this.optionalText ?? c.optional}</span
-              >` : n}
-        ${this.requiredTag ? e`<span class=${a + " pkt-tag--beige"}
-                >${this.requiredText ?? c.required}</span
-              >` : n}
-      `, u = this.id + "-check-label", d = this.id + "-check-helptext";
-		return e`
-      <div class="pkt-input-check${this.inputSize ? ` pkt-input-check--${this.inputSize}` : ""}">
-        <div class=${t}>
-          <input
-            id=${this.id + "-internal"}
-            class=${r}
-            type="radio"
-            ?disabled=${this.isDisabled}
-            form=""
-            name=${this.name + "-internal"}
-            ${s(this.inputRef)}
-            @change=${this.toggleChecked}
-            @input=${this.handleInput}
-            @blur=${this.onBlur}
-            @focus=${this.onFocus}
-            ?checked=${this.checked}
-            aria-labelledby=${this.label ? u : n}
-            aria-describedby=${this.checkHelptext ? d : n}
-          />
-          ${e`
-        <label class=${i} for=${this.id + "-internal"}>
-          <span id=${u}>${this.label} ${l()}</span>
-          ${this.checkHelptext ? e`<div id=${d} class="pkt-input-check__input-helptext">
-                  ${this.checkHelptext}
-                </div>` : n}
-        </label>
-      `}
-        </div>
-      </div>
-    `;
-	}
-	handleInput(e) {
-		e.stopImmediatePropagation(), this.onInput();
-	}
-	toggleChecked(e = null) {
-		e && e.preventDefault(), e && e.stopImmediatePropagation(), this.touched = !0, this.inputRef.value && (this._checked = this.inputRef.value.matches(":checked"), this.valueChecked(this._checked));
-	}
-};
-i([a({
-	type: String,
-	reflect: !0
-})], u.prototype, "value", void 0), i([a({ type: String })], u.prototype, "checkHelptext", void 0), i([a({ type: Boolean })], u.prototype, "defaultChecked", void 0), i([a({ type: Boolean })], u.prototype, "hasTile", void 0), i([a({
-	type: Boolean,
-	reflect: !0
-})], u.prototype, "checked", void 0), i([a({
-	type: String,
-	reflect: !0
-})], u.prototype, "type", void 0), i([a({
-	type: String,
-	attribute: "input-size"
-})], u.prototype, "inputSize", void 0), i([a({ type: String })], u.prototype, "tagText", void 0), i([a({ type: Boolean })], u.prototype, "optionalTag", void 0), i([a({ type: String })], u.prototype, "optionalText", void 0), i([a({ type: Boolean })], u.prototype, "requiredTag", void 0), i([a({ type: String })], u.prototype, "requiredText", void 0), i([r()], u.prototype, "_checked", void 0);
-try {
-	t("pkt-radiobutton")(u);
-} catch {
-	console.warn("Forsøker å definere <pkt-radiobutton>, men den er allerede definert");
-}
-//#endregion
-//#region src/components/radiobutton/index.ts
-var d = u;
-//#endregion
-export { u as n, d as t };

package/dist/tabs-CjX-GWvM.cjs

@@ -1,40 +0,0 @@
-const e=require("./element-BOmr9YLv.cjs"),t=require("./element-with-slot-D7sTqOr3.cjs"),n=require("./if-defined-2mkIDgOm.cjs"),r=require("./consume-Le4HztPo.cjs"),i=require("./ref-Emu5PNxk.cjs");var a=r.r(Symbol(`pkt-tabs-context`)),o=class extends t.t{constructor(...e){super(...e),this.arrowNav=!0,this.disableArrowNav=!1,this.separatorIconName=``,this.separatorIconPath=``,this.tabRefs=[],this.disabledMap={},this.tabCount=0,this.context={useArrowNav:this.useArrowNav,registerTab:this.registerTab.bind(this),handleClick:this.handleClick.bind(this),handleKeyUp:this.handleKeyUp.bind(this)}}get useArrowNav(){return this.arrowNav&&!this.disableArrowNav}willUpdate(e){(e.has(`arrowNav`)||e.has(`disableArrowNav`))&&(this.context={...this.context,useArrowNav:this.useArrowNav})}updated(){this.updateComplete.then(()=>this.syncSeparators())}syncSeparators(){let e=this.querySelector(`.pkt-tabs__list`);if(!e||(e.querySelectorAll(`.pkt-tabs__separator`).forEach(e=>e.remove()),!(this.separatorIconName||this.separatorIconPath)))return;let t=Array.from(e.children).filter(e=>!e.classList.contains(`pkt-tabs__separator`));for(let e=0;e<t.length-1;e++){let n=document.createElement(`span`);if(n.className=`pkt-tabs__separator`,n.setAttribute(`aria-hidden`,`true`),n.setAttribute(`role`,`presentation`),this.separatorIconPath){let e=document.createElement(`img`);e.setAttribute(`src`,this.separatorIconPath),e.setAttribute(`alt`,``),e.setAttribute(`aria-hidden`,`true`),n.appendChild(e)}else if(this.separatorIconName){let e=document.createElement(`pkt-icon`);e.setAttribute(`name`,this.separatorIconName),e.classList.add(`pkt-tabs__separator-icon`),n.appendChild(e)}t[e].after(n)}}registerTab(e,t,n=!1){this.tabRefs[t]=e,this.disabledMap[t]=n,this.tabCount=Math.max(this.tabCount,t+1)}isTabDisabled(e){return!!this.disabledMap[e]}findEnabledIndex(e,t){let n=e+t;for(;n>=0&&n<this.tabCount;){if(!this.isTabDisabled(n))return n;n+=t}return null}handleClick(e){this.isTabDisabled(e)||this.dispatchEvent(new CustomEvent(`tab-selected`,{detail:{index:e},bubbles:!0,composed:!0}))}handleKeyUp(e,t){if(this.useArrowNav){if(e.key===`ArrowLeft`){e.preventDefault();let n=this.findEnabledIndex(t,-1);n!==null&&this.tabRefs[n]?.focus()}if(e.key===`ArrowRight`){e.preventDefault();let n=this.findEnabledIndex(t,1);n!==null&&this.tabRefs[n]?.focus()}(e.key===`Enter`||e.key===` `||e.key===`Spacebar`||e.key===`ArrowDown`)&&(e.preventDefault(),this.handleClick(t))}}render(){let n=this.useArrowNav?`tablist`:`navigation`,r=this.separatorIconName||this.separatorIconPath?`pkt-tabs pkt-tabs--with-separator`:`pkt-tabs`;return e._`
-      <div class=${r}>
-        <div class="pkt-tabs__list" role=${n}>${t.i(this)}</div>
-      </div>
-    `}};e.n([e.u({type:Boolean,reflect:!0,attribute:`arrow-nav`})],o.prototype,`arrowNav`,void 0),e.n([e.u({type:Boolean,reflect:!0,attribute:`disable-arrow-nav`})],o.prototype,`disableArrowNav`,void 0),e.n([e.u({type:String,reflect:!0,attribute:`separator-icon-name`})],o.prototype,`separatorIconName`,void 0),e.n([e.u({type:String,reflect:!0,attribute:`separator-icon-path`})],o.prototype,`separatorIconPath`,void 0),e.n([e.l()],o.prototype,`tabRefs`,void 0),e.n([e.l()],o.prototype,`disabledMap`,void 0),e.n([e.l()],o.prototype,`tabCount`,void 0),e.n([r.n({context:a}),e.l()],o.prototype,`context`,void 0);try{e.d(`pkt-tabs`)(o)}catch{console.warn(`Forsøker å definere <pkt-tabs>, men den er allerede definert`)}var s=class extends t.t{constructor(){super(),this.active=!1,this.disabled=!1,this.href=``,this.icon=``,this.controls=``,this.tag=``,this.tagSkin=`blue`,this.index=0,this.elementRef=i.t()}connectedCallback(){super.connectedCallback(),this.updateComplete.then(()=>{this.elementRef.value&&this.context&&this.context.registerTab(this.elementRef.value,this.index,this.disabled)})}updated(){this.elementRef.value&&this.context&&this.context.registerTab(this.elementRef.value,this.index,this.disabled)}handleClick(e){if(this.disabled){e.preventDefault(),e.stopPropagation();return}this.context&&this.context.handleClick(this.index)}handleKeyDown(e){if(this.disabled&&(e.key===`Enter`||e.key===` `||e.key===`Spacebar`)){e.preventDefault(),e.stopPropagation();return}this.context&&this.context.handleKeyUp(e,this.index)}render(){let r=this.context?.useArrowNav??!0,a=this.active&&!this.disabled,o=[a?`active`:``,this.disabled?`pkt-tabs__item--disabled`:``].filter(Boolean).join(` `),s=r?`tab`:void 0,c=r?a:void 0,l=this.disabled?-1:a||!r?void 0:-1,u=`pkt-icon--small ${this.icon===`check`?`pkt-tabs__status-icon`:``}`,d=e._`
-      ${this.icon?e._`<pkt-icon name=${this.icon} class=${u}></pkt-icon>`:``}
-      <span>${t.i(this)}</span>
-      ${this.tag?e._`<pkt-tag skin=${this.tagSkin} size="small">${this.tag}</pkt-tag>`:``}
-    `;return this.href?e._`
-        <a
-          ${i.n(this.elementRef)}
-          href=${n.t(this.disabled?void 0:this.href)}
-          class="pkt-tabs__link ${o}"
-          role=${n.t(s)}
-          aria-selected=${n.t(c)}
-          aria-disabled=${n.t(this.disabled?`true`:void 0)}
-          aria-controls=${n.t(this.controls||void 0)}
-          tabindex=${n.t(l)}
-          @click=${this.handleClick}
-          @keydown=${this.handleKeyDown}
-        >
-          ${d}
-        </a>
-      `:e._`
-      <button
-        ${i.n(this.elementRef)}
-        type="button"
-        class="pkt-tabs__button pkt-link-button ${o}"
-        ?disabled=${this.disabled}
-        aria-disabled=${n.t(this.disabled?`true`:void 0)}
-        role=${n.t(s)}
-        aria-selected=${n.t(c)}
-        aria-controls=${n.t(this.controls||void 0)}
-        tabindex=${n.t(l)}
-        @click=${this.handleClick}
-        @keydown=${this.handleKeyDown}
-      >
-        ${d}
-      </button>
-    `}};e.n([e.u({type:Boolean,reflect:!0})],s.prototype,`active`,void 0),e.n([e.u({type:Boolean,reflect:!0})],s.prototype,`disabled`,void 0),e.n([e.u({type:String,reflect:!0})],s.prototype,`href`,void 0),e.n([e.u({type:String,reflect:!0})],s.prototype,`icon`,void 0),e.n([e.u({type:String,reflect:!0})],s.prototype,`controls`,void 0),e.n([e.u({type:String,reflect:!0})],s.prototype,`tag`,void 0),e.n([e.u({type:String,reflect:!0,attribute:`tag-skin`})],s.prototype,`tagSkin`,void 0),e.n([e.u({type:Number,reflect:!0})],s.prototype,`index`,void 0),e.n([r.t({context:a,subscribe:!0}),e.u({attribute:!1})],s.prototype,`context`,void 0);try{e.d(`pkt-tab-item`)(s)}catch{console.warn(`Forsøker å definere <pkt-tab-item>, men den er allerede definert`)}var c=o;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return c}});