@oslokommune/punkt-elements/dist/tabs-CN_RIMWg.cjs

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

const e=require(`./element-DjtxO-1r.cjs`),t=require(`./element-with-slot-CWoTGA1B.cjs`),n=require(`./if-defined-XKOD_t_V.cjs`),r=require(`./ref-BaJ0mBT_.cjs`);var i=class extends Event{constructor(e,t,n,r){super(`context-request`,{bubbles:!0,composed:!0}),this.context=e,this.contextTarget=t,this.callback=n,this.subscribe=r??!1}};function a(e){return e}var o=class{constructor(e,t,n,r){if(this.subscribe=!1,this.provided=!1,this.value=void 0,this.t=(e,t)=>{this.unsubscribe&&(this.unsubscribe!==t&&(this.provided=!1,this.unsubscribe()),this.subscribe||this.unsubscribe()),this.value=e,this.host.requestUpdate(),this.provided&&!this.subscribe||(this.provided=!0,this.callback&&this.callback(e,t)),this.unsubscribe=t},this.host=e,t.context!==void 0){let e=t;this.context=e.context,this.callback=e.callback,this.subscribe=e.subscribe??!1}else this.context=t,this.callback=n,this.subscribe=r??!1;this.host.addController(this)}hostConnected(){this.dispatchRequest()}hostDisconnected(){this.unsubscribe&&=(this.unsubscribe(),void 0)}dispatchRequest(){this.host.dispatchEvent(new i(this.context,this.host,this.t,this.subscribe))}},s=class{get value(){return this.o}set value(e){this.setValue(e)}setValue(e,t=!1){let n=t||!Object.is(e,this.o);this.o=e,n&&this.updateObservers()}constructor(e){this.subscriptions=new Map,this.updateObservers=()=>{for(let[e,{disposer:t}]of this.subscriptions)e(this.o,t)},e!==void 0&&(this.value=e)}addCallback(e,t,n){if(!n)return void e(this.value);this.subscriptions.has(e)||this.subscriptions.set(e,{disposer:()=>{this.subscriptions.delete(e)},consumerHost:t});let{disposer:r}=this.subscriptions.get(e);e(this.value,r)}clearCallbacks(){this.subscriptions.clear()}},c=class extends Event{constructor(e,t){super(`context-provider`,{bubbles:!0,composed:!0}),this.context=e,this.contextTarget=t}},l=class extends s{constructor(e,t,n){super(t.context===void 0?n:t.initialValue),this.onContextRequest=e=>{if(e.context!==this.context)return;let t=e.contextTarget??e.composedPath()[0];t!==this.host&&(e.stopPropagation(),this.addCallback(e.callback,t,e.subscribe))},this.onProviderRequest=e=>{if(e.context!==this.context||(e.contextTarget??e.composedPath()[0])===this.host)return;let t=new Set;for(let[e,{consumerHost:n}]of this.subscriptions)t.has(e)||(t.add(e),n.dispatchEvent(new i(this.context,n,e,!0)));e.stopPropagation()},this.host=e,t.context===void 0?this.context=t:this.context=t.context,this.attachListeners(),this.host.addController?.(this)}attachListeners(){this.host.addEventListener(`context-request`,this.onContextRequest),this.host.addEventListener(`context-provider`,this.onProviderRequest)}hostConnected(){this.host.dispatchEvent(new c(this.context,this.host))}};function u({context:e}){return(t,n)=>{let r=new WeakMap;if(typeof n==`object`)return{get(){return t.get.call(this)},set(e){return r.get(this).setValue(e),t.set.call(this,e)},init(t){return r.set(this,new l(this,{context:e,initialValue:t})),t}};{t.constructor.addInitializer((t=>{r.set(t,new l(t,{context:e}))}));let i=Object.getOwnPropertyDescriptor(t,n),a;if(i===void 0){let e=new WeakMap;a={get(){return e.get(this)},set(t){r.get(this).setValue(t),e.set(this,t)},configurable:!0,enumerable:!0}}else{let e=i.set;a={...i,set(t){r.get(this).setValue(t),e?.call(this,t)}}}Object.defineProperty(t,n,a);return}}}function d({context:e,subscribe:t}){return(n,r)=>{typeof r==`object`?r.addInitializer((function(){new o(this,{context:e,callback:e=>{n.set.call(this,e)},subscribe:t})})):n.constructor.addInitializer((n=>{new o(n,{context:e,callback:e=>{n[r]=e},subscribe:t})}))}}var f=a(Symbol(`pkt-tabs-context`)),p=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}updated(e){(e.has(`arrowNav`)||e.has(`disableArrowNav`))&&(this.context={...this.context,useArrowNav:this.useArrowNav}),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`;return e.d`
      <div class=${this.separatorIconName||this.separatorIconPath?`pkt-tabs pkt-tabs--with-separator`:`pkt-tabs`}>
        <div class="pkt-tabs__list" role=${n}>${t.n(this)}</div>
      </div>
    `}};e.r([e.s({type:Boolean,reflect:!0,attribute:`arrow-nav`})],p.prototype,`arrowNav`,void 0),e.r([e.s({type:Boolean,reflect:!0,attribute:`disable-arrow-nav`})],p.prototype,`disableArrowNav`,void 0),e.r([e.s({type:String,reflect:!0,attribute:`separator-icon-name`})],p.prototype,`separatorIconName`,void 0),e.r([e.s({type:String,reflect:!0,attribute:`separator-icon-path`})],p.prototype,`separatorIconPath`,void 0),e.r([e.o()],p.prototype,`tabRefs`,void 0),e.r([e.o()],p.prototype,`disabledMap`,void 0),e.r([e.o()],p.prototype,`tabCount`,void 0),e.r([u({context:f}),e.o()],p.prototype,`context`,void 0);try{e.c(`pkt-tabs`)(p)}catch{console.warn(`Forsøker å definere <pkt-tabs>, men den er allerede definert`)}var m=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=r.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 i=this.context?.useArrowNav??!0,a=this.active&&!this.disabled,o=[a?`active`:``,this.disabled?`pkt-tabs__item--disabled`:``].filter(Boolean).join(` `),s=i?`tab`:void 0,c=i?a:void 0,l=this.disabled?-1:a||!i?void 0:-1,u=`pkt-icon--small ${this.icon===`check`?`pkt-tabs__status-icon`:``}`,d=e.d`
      ${this.icon?e.d`<pkt-icon name=${this.icon} class=${u}></pkt-icon>`:``}
      <span>${t.n(this)}</span>
      ${this.tag?e.d`<pkt-tag skin=${this.tagSkin} size="small">${this.tag}</pkt-tag>`:``}
    `;return this.href?e.d`
        <a
          ${r.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.d`
      <button
        ${r.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.r([e.s({type:Boolean,reflect:!0})],m.prototype,`active`,void 0),e.r([e.s({type:Boolean,reflect:!0})],m.prototype,`disabled`,void 0),e.r([e.s({type:String,reflect:!0})],m.prototype,`href`,void 0),e.r([e.s({type:String,reflect:!0})],m.prototype,`icon`,void 0),e.r([e.s({type:String,reflect:!0})],m.prototype,`controls`,void 0),e.r([e.s({type:String,reflect:!0})],m.prototype,`tag`,void 0),e.r([e.s({type:String,reflect:!0,attribute:`tag-skin`})],m.prototype,`tagSkin`,void 0),e.r([e.s({type:Number,reflect:!0})],m.prototype,`index`,void 0),e.r([d({context:f,subscribe:!0}),e.s({attribute:!1})],m.prototype,`context`,void 0);try{e.c(`pkt-tab-item`)(m)}catch{console.warn(`Forsøker å definere <pkt-tab-item>, men den er allerede definert`)}var h=p;Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return m}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return h}});