@public-ui/components/dist/components/kol-skeleton.js

Contains all web components that belong to KoliBri - The accessible HTML-Standard.

/*!
 * KoliBri - The accessible HTML-Standard
 */
import { h, proxyCustomElement, createEvent, Host } from '@stencil/core/internal/client';
import { B as BaseWebComponent } from './variant-quote.js';
import { b as bem } from './bem-registry.js';
import { a as ClickButtonFC, C as ClickButtonController } from './controller3.js';
import './common.js';
import { L as Log } from './prop.validators.js';
import { c as createPropDefinition, n as normalizeString } from './normalizers.js';
import { B as BaseController } from './base-controller.js';

const nameProp = createPropDefinition('name', '', normalizeString);

const skeletonBem = bem.forBlock('kol-skeleton');
const BEM_CLASS_SKELETON__ACTIONS = skeletonBem('actions');
const BEM_CLASS_SKELETON__CONTAINER = skeletonBem('container');
const BEM_CLASS_SKELETON__COUNTER = skeletonBem('counter');
const BEM_CLASS_SKELETON__NAME = skeletonBem('name');
const SkeletonFC = (props) => {
    const { count, label, name, show, handleClick, refButton } = props;
    const hasName = !!(show && (name === null || name === void 0 ? void 0 : name.trim()));
    const BEM_CLASS_ROOT = skeletonBem({
        'has-name': hasName,
        'is-hidden': !show,
    });
    return (h("div", { class: BEM_CLASS_ROOT }, h("div", { class: BEM_CLASS_SKELETON__CONTAINER }, hasName && h("span", { class: BEM_CLASS_SKELETON__NAME }, name), h("div", { class: BEM_CLASS_SKELETON__COUNTER }, "Count: ", count)), h("div", { class: BEM_CLASS_SKELETON__ACTIONS }, h(ClickButtonFC, { label: label, handleClick: handleClick, refButton: refButton }))));
};

const skeletonPropsConfig = {
    required: [nameProp],
};

class SkeletonController extends BaseController {
    constructor(stateAccess) {
        super(stateAccess, skeletonPropsConfig);
        this.onKeydown = (event) => {
            if (event.key === 'Escape') {
                console.log('Show should be toggled');
                void this.toggle();
            }
        };
        this.handleClick = () => {
            var _a, _b;
            Log.debug('Button clicked, count should be increased');
            this.setState('count', ((_b = (_a = this.getState) === null || _a === void 0 ? void 0 : _a.call(this, 'count')) !== null && _b !== void 0 ? _b : 0) + 1);
        };
        this.setButtonRef = (element) => {
            this.clickButtonCtrl.setButtonRef(element);
        };
        this.clickButtonCtrl = new ClickButtonController(BaseWebComponent.stateLess);
        this.startLoadedEventInterval();
    }
    componentWillLoad(props) {
        const { name } = props;
        this.watchName(name);
        this.clickButtonCtrl.componentWillLoad({
            label: 'Click me',
        });
    }
    watchName(value) {
        nameProp.apply(value, (v) => {
            this.setRenderProp('name', v);
        });
    }
    toggle() {
        var _a, _b;
        this.setState('show', !((_b = (_a = this.getState) === null || _a === void 0 ? void 0 : _a.call(this, 'show')) !== null && _b !== void 0 ? _b : false));
    }
    focus() {
        return this.clickButtonCtrl.focus();
    }
    startLoadedEventInterval() {
        this.intervalId = setInterval(() => {
            var _a, _b;
            this.emitLoaded((_b = (_a = this.getState) === null || _a === void 0 ? void 0 : _a.call(this, 'count')) !== null && _b !== void 0 ? _b : 0);
        }, 2000);
    }
    emitLoaded(count) {
        if (this.onLoadedCallback) {
            this.onLoadedCallback(count);
        }
    }
    setOnLoadedCallback(callback) {
        this.onLoadedCallback = callback;
    }
    destroy() {
        if (this.intervalId) {
            clearInterval(this.intervalId);
            this.intervalId = undefined;
        }
    }
}

const KolSkeleton$1 = proxyCustomElement(class KolSkeleton extends BaseWebComponent {
    constructor(registerHost) {
        super(false);
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.__attachShadow();
        this.loaded = createEvent(this, "loaded", 7);
        this.rendered = createEvent(this, "rendered", 7);
        this.ctrl = new SkeletonController(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(value) {
        this.ctrl.watchName(value);
    }
    handleKeyDown(event) {
        if (event.key === 'Enter' || event.key === ' ') {
            Log.debug('button pressed');
            this.ctrl.handleClick();
        }
    }
    onKeydown(event) {
        this.ctrl.onKeydown(event);
    }
    componentWillLoad() {
        this.ctrl.componentWillLoad({
            name: this._name,
        });
        this.ctrl.setOnLoadedCallback((count) => {
            this.loaded.emit(count);
        });
    }
    componentDidLoad() {
        requestAnimationFrame(() => {
            this.rendered.emit();
        });
    }
    disconnectedCallback() {
        this.ctrl.destroy();
    }
    render() {
        return (h(Host, { key: 'ff0f258279d6e18440f82f7fb4de42ed9bf4eaac' }, h(SkeletonFC, { 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: (element) => this.ctrl.setButtonRef(element) })));
    }
    static get watchers() { return {
        "_name": ["watchName"]
    }; }
}, [769, "kol-skeleton", {
        "_name": [1],
        "count": [32],
        "label": [32],
        "show": [32],
        "focus": [64],
        "toggle": [64]
    }, [[0, "keydown", "handleKeyDown"], [8, "keydown", "onKeydown"]], {
        "_name": ["watchName"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["kol-skeleton"];
    components.forEach(tagName => { switch (tagName) {
        case "kol-skeleton":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, KolSkeleton$1);
            }
            break;
    } });
}

const KolSkeleton = KolSkeleton$1;
const defineCustomElement = defineCustomElement$1;

export { KolSkeleton, defineCustomElement };
//# sourceMappingURL=kol-skeleton.js.map

//# sourceMappingURL=kol-skeleton.js.map