@exadel/esl/modules/esl-share/core/esl-share-list.js

Exadel Smart Library (ESL) is the lightweight custom elements library that provide a set of super-flexible components

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { ExportNs } from '../../esl-utils/environment/export-ns';
import { ESLBaseElement } from '../../esl-base-element/core';
import { isEqual } from '../../esl-utils/misc/object/compare';
import { attr, boolAttr, listen, memoize, prop } from '../../esl-utils/decorators';
import { ESLShareButton } from './esl-share-button';
import { ESLShareConfig } from './esl-share-config';
/**
 * ESLShareList
 * @author Dmytro Shovchko
 *
 * ESLShareList is a custom element to dynamically draw {@link ESLShareButton}s using simplified shared config
 */
let ESLShareList = class ESLShareList extends ESLBaseElement {
    /** Register {@link ESLShareList} component and dependent {@link ESLShareButton} */
    static register() {
        ESLShareButton.register();
        super.register();
    }
    /** @returns config of buttons specified by the list attribute */
    get buttonsConfig() {
        return ESLShareConfig.instance.get(this.list);
    }
    attributeChangedCallback(attrName, oldVal, newVal) {
        if (!this.connected || oldVal === newVal)
            return;
        this.update();
    }
    connectedCallback() {
        super.connectedCallback();
        this.init();
    }
    /** Initializes the component */
    init(force) {
        if (this.ready && !force)
            return;
        this.buildContent();
        this.onReady();
    }
    /** Updates the component if the buttons config was changed */
    update() {
        const { buttonsConfig } = this;
        memoize.clear(this, 'buttonsConfig');
        if (isEqual(this.buttonsConfig, buttonsConfig))
            return;
        this.init(true);
    }
    /** Appends buttons to the component. */
    buildContent() {
        this.innerHTML = '';
        this.buttonsConfig.forEach((cfg) => {
            const btn = ESLShareButton.create(cfg.name);
            btn && this.appendChild(btn);
        });
    }
    /** Actions on complete init and ready component. */
    onReady() {
        if (this.ready)
            return;
        this.$$attr('ready', true);
        this.$$fire(this.SHARE_READY_EVENT, { bubbles: false });
    }
    _onConfigChange() {
        this.update();
        this.$$fire(this.SHARE_CHANGED_EVENT, { bubbles: false });
    }
};
ESLShareList.is = 'esl-share-list';
ESLShareList.observedAttributes = ['list'];
__decorate([
    prop('esl:share:changed')
], ESLShareList.prototype, "SHARE_CHANGED_EVENT", void 0);
__decorate([
    prop('esl:share:ready')
], ESLShareList.prototype, "SHARE_READY_EVENT", void 0);
__decorate([
    attr({ defaultValue: 'all' })
], ESLShareList.prototype, "list", void 0);
__decorate([
    boolAttr({ readonly: true })
], ESLShareList.prototype, "ready", void 0);
__decorate([
    memoize()
], ESLShareList.prototype, "buttonsConfig", null);
__decorate([
    listen({ event: 'change', target: ESLShareConfig.instance })
], ESLShareList.prototype, "_onConfigChange", null);
ESLShareList = __decorate([
    ExportNs('ShareList')
], ESLShareList);
export { ESLShareList };