@exadel/esl/modules/esl-line-clamp/core/esl-line-clamp-alt.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, listen, memoize, prop, safe } from '../../esl-utils/decorators';
import { ESLMediaRuleList } from '../../esl-media-query/core';
import { ESLMixinElement } from '../../esl-mixin-element/core';
import { ESLLineClamp } from './esl-line-clamp';
/**
 * ESLLineClampAlt mixin element
 * @author Feoktyst Shovchko
 *
 * ESLLineClampAlt is a custom attribute designed to work complementary to {@link ESLLineClamp}
 * Its purpose is to provide alternative line clamp values that can be toggled,
 * allowing to switch between the regular clamp configuration and an alternative one.
 */
export class ESLLineClampAlt extends ESLMixinElement {
    /** @returns parsed media rule list for line clamping configuration */
    get linesQuery() {
        return ESLMediaRuleList.parse(this.lines, this.mask);
    }
    connectedCallback() {
        super.connectedCallback();
        this.onQueryChange();
    }
    attributeChangedCallback() {
        memoize.clear(this, 'linesQuery');
        this.$$on(this.onQueryChange);
        this.onQueryChange();
    }
    updateLines() {
        this.$host.style.setProperty(this.ALT_LINE_CLAMP_VAR, this.linesQuery.value || '0');
    }
    onQueryChange() {
        this.updateLines();
    }
}
ESLLineClampAlt.is = 'esl-line-clamp-alt';
__decorate([
    attr({ name: ESLLineClampAlt.is, defaultValue: '' })
], ESLLineClampAlt.prototype, "lines", void 0);
__decorate([
    prop('--esl-line-clamp-alt')
], ESLLineClampAlt.prototype, "ALT_LINE_CLAMP_VAR", void 0);
__decorate([
    attr({
        name: ESLLineClamp.is + '-mask',
        defaultValue: () => ESLLineClamp.DEFAULT_MASK
    })
], ESLLineClampAlt.prototype, "mask", void 0);
__decorate([
    memoize(),
    safe(ESLMediaRuleList.empty())
], ESLLineClampAlt.prototype, "linesQuery", null);
__decorate([
    listen({ event: 'change', target: ($this) => $this.linesQuery })
], ESLLineClampAlt.prototype, "onQueryChange", null);