@exadel/esl/modules/esl-line-clamp/core/esl-line-clamp-toggler.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 { attr, boolAttr, listen, memoize, prop } from '../../esl-utils/decorators';
import { ESLMixinElement } from '../../esl-mixin-element/core';
/**
 * ESLLineClampToggler mixin element
 * @author Feoktyst Shovchko
 *
 * ESLLineClampToggler is a custom attribute designed to work in pair with {@link ESLLineClamp}
 * Its purpose is provide toggle controls for switching between regular {@link ESLLineClamp} values and {@link ESLLineClampAlt} values.
 */
export class ESLLineClampToggler extends ESLMixinElement {
    /** @returns the target element to control */
    get $target() {
        return this.$$find(this.target);
    }
    get isTargetActive() {
        return this.$target.hasAttribute(this.ALT_ACTIVE_ATTRIBUTE);
    }
    connectedCallback() {
        super.connectedCallback();
        this.initA11y();
        this.updateState();
    }
    updateState() {
        this.active = this.isTargetActive;
        this.updateA11y();
    }
    initA11y() {
        !this.$$attr('role') && this.$$attr('role', 'button');
    }
    /** Updates accessibility attributes based on the current state */
    updateA11y() {
        this.$$attr('aria-expanded', String(this.active));
    }
    toggle(value = !this.active) {
        this.$target.toggleAttribute(this.ALT_ACTIVE_ATTRIBUTE, value);
        this.$target.dispatchEvent(new CustomEvent(this.CLAMP_EVENT));
    }
    onToggle() {
        this.toggle();
    }
    onClampToggle() {
        this.updateState();
    }
}
ESLLineClampToggler.is = 'esl-line-clamp-toggler';
__decorate([
    prop('esl:clamp:toggle')
], ESLLineClampToggler.prototype, "CLAMP_EVENT", void 0);
__decorate([
    prop('alt-active')
], ESLLineClampToggler.prototype, "ALT_ACTIVE_ATTRIBUTE", void 0);
__decorate([
    attr({ name: ESLLineClampToggler.is, defaultValue: '' })
], ESLLineClampToggler.prototype, "target", void 0);
__decorate([
    boolAttr({ name: 'toggler-active' })
], ESLLineClampToggler.prototype, "active", void 0);
__decorate([
    memoize()
], ESLLineClampToggler.prototype, "$target", null);
__decorate([
    listen('click')
], ESLLineClampToggler.prototype, "onToggle", null);
__decorate([
    listen({ event: ($this) => $this.CLAMP_EVENT, target: ($this) => $this.$target })
], ESLLineClampToggler.prototype, "onClampToggle", null);