@oslokommune/punkt-elements 19.7.0 → 19.9.0

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}});