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

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

/*!
 * KoliBri - The accessible HTML-Standard
 */
'use strict';

var index = require('./index-BrhW8s5h.js');
var variantQuote = require('./variant-quote-DpNzmCtr.js');
var bemRegistry = require('./bem-registry-DevvgGUu.js');
var controller = require('./controller-CHDjVlC1.js');
var common = require('./common-DPb6NWR4.js');
var normalizers = require('./normalizers-BCLslVaT.js');
var baseController = require('./base-controller-DAzsTqX9.js');
require('./label-DRrPbj-j.js');
require('./_Uint8Array-BAQUGozM.js');
require('./isArray-BOIOdEQh.js');

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

const skeletonBem = bemRegistry.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 (index.h("div", { class: BEM_CLASS_ROOT }, index.h("div", { class: BEM_CLASS_SKELETON__CONTAINER }, hasName && index.h("span", { class: BEM_CLASS_SKELETON__NAME }, name), index.h("div", { class: BEM_CLASS_SKELETON__COUNTER }, "Count: ", count)), index.h("div", { class: BEM_CLASS_SKELETON__ACTIONS }, index.h(controller.ClickButtonFC, { label: label, handleClick: handleClick, refButton: refButton }))));
};

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

class SkeletonController extends baseController.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;
            common.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 controller.ClickButtonController(variantQuote.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 = class extends variantQuote.BaseWebComponent {
    constructor(hostRef) {
        super();
        index.registerInstance(this, hostRef);
        this.loaded = index.createEvent(this, "loaded");
        this.rendered = index.createEvent(this, "rendered");
        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 === ' ') {
            common.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 (index.h(index.Host, { key: 'ff0f258279d6e18440f82f7fb4de42ed9bf4eaac' }, index.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"]
    }; }
};

exports.kol_skeleton = KolSkeleton;
//# sourceMappingURL=kol-skeleton.entry.cjs.js.map