@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
5 lines • 3.4 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import{h as s,r as t,c as e,H as i}from"./index-BQlHOxik.js";import{B as o}from"./variant-quote-y0Z1TRdz.js";import{b as n}from"./bem-registry-CWvl2xho.js";import{C as a,a as r}from"./controller-osuRO7S2.js";import{L as h}from"./common-Cx_AGO_M.js";import{c as l,n as c}from"./normalizers-m3s9sgmq.js";import{B as d}from"./base-controller-CXhqh4cR.js";import"./label-KTv-zMW0.js";import"./_Uint8Array-kJHDjtoP.js";import"./isArray-CcrBs4JM.js";const m=l("name","",c);const u=n.forBlock("kol-skeleton");const f=u("actions");const v=u("container");const p=u("counter");const b=u("name");const k=t=>{const{count:e,label:i,name:o,show:n,handleClick:r,refButton:h}=t;const l=!!(n&&(o===null||o===void 0?void 0:o.trim()));const c=u({"has-name":l,"is-hidden":!n});return s("div",{class:c},s("div",{class:v},l&&s("span",{class:b},o),s("div",{class:p},"Count: ",e)),s("div",{class:f},s(a,{label:i,handleClick:r,refButton:h})))};const w={required:[m]};class C extends d{constructor(s){super(s,w);this.onKeydown=s=>{if(s.key==="Escape"){console.log("Show should be toggled");void this.toggle()}};this.handleClick=()=>{var s,t;h.debug("Button clicked, count should be increased");this.setState("count",((t=(s=this.getState)===null||s===void 0?void 0:s.call(this,"count"))!==null&&t!==void 0?t:0)+1)};this.setButtonRef=s=>{this.clickButtonCtrl.setButtonRef(s)};this.clickButtonCtrl=new r(o.stateLess);this.startLoadedEventInterval()}componentWillLoad(s){const{name:t}=s;this.watchName(t);this.clickButtonCtrl.componentWillLoad({label:"Click me"})}watchName(s){m.apply(s,(s=>{this.setRenderProp("name",s)}))}toggle(){var s,t;this.setState("show",!((t=(s=this.getState)===null||s===void 0?void 0:s.call(this,"show"))!==null&&t!==void 0?t:false))}focus(){return this.clickButtonCtrl.focus()}startLoadedEventInterval(){this.intervalId=setInterval((()=>{var s,t;this.emitLoaded((t=(s=this.getState)===null||s===void 0?void 0:s.call(this,"count"))!==null&&t!==void 0?t:0)}),2e3)}emitLoaded(s){if(this.onLoadedCallback){this.onLoadedCallback(s)}}setOnLoadedCallback(s){this.onLoadedCallback=s}destroy(){if(this.intervalId){clearInterval(this.intervalId);this.intervalId=undefined}}}const j=class extends o{constructor(s){super();t(this,s);this.loaded=e(this,"loaded");this.rendered=e(this,"rendered");this.ctrl=new C(this.stateAccess);this.count=0;this.label="Label";this.show=true}async focus(){return Promise.resolve(this.ctrl.focus())}async toggle(){return Promise.resolve(this.ctrl.toggle())}watchName(s){this.ctrl.watchName(s)}handleKeyDown(s){if(s.key==="Enter"||s.key===" "){h.debug("button pressed");this.ctrl.handleClick()}}onKeydown(s){this.ctrl.onKeydown(s)}componentWillLoad(){this.ctrl.componentWillLoad({name:this._name});this.ctrl.setOnLoadedCallback((s=>{this.loaded.emit(s)}))}componentDidLoad(){requestAnimationFrame((()=>{this.rendered.emit()}))}disconnectedCallback(){this.ctrl.destroy()}render(){return s(i,{key:"ff0f258279d6e18440f82f7fb4de42ed9bf4eaac"},s(k,{key:"2a07e293ba5934de959d7099f927db80ad396c68",count:this.count,label:this.label,name:this.ctrl.getRenderProp("name"),handleClick:()=>this.ctrl.handleClick(),onLoaded:this.loaded,onRendered:this.rendered,show:this.show,refButton:s=>this.ctrl.setButtonRef(s)}))}static get watchers(){return{_name:["watchName"]}}};export{j as kol_skeleton};
//# sourceMappingURL=kol-skeleton.entry.js.map