@exadel/esl
Version:
Exadel Smart Library (ESL) is the lightweight custom elements library that provide a set of super-flexible components
107 lines (106 loc) • 4.16 kB
JavaScript
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 { attr, boolAttr, jsonAttr, prop, ready } from '../../esl-utils/decorators';
import { ESLTraversingQuery } from '../../esl-traversing-query/core';
import { ESLBaseTrigger } from '../../esl-trigger/core';
import { ESLSharePopup } from './esl-share-popup';
/**
* ESLShare
* @author Dmytro Shovchko
*
* ESLShare is a component that allows triggering {@link ESLSharePopup} instance state changes.
*/
let ESLShare = class ESLShare extends ESLBaseTrigger {
/** Register {@link ESLShare} component and dependent {@link ESLSharePopup} */
static register() {
ESLSharePopup.register();
super.register();
}
/** Target observable Toggleable */
get $target() {
return ESLSharePopup.sharedInstance;
}
/** Checks that the target is in active state */
get isTargetActive() {
var _a, _b;
return !!((_a = this.$target) === null || _a === void 0 ? void 0 : _a.open) && ((_b = this.$target) === null || _b === void 0 ? void 0 : _b.activator) === this;
}
/** The text writing directionality of the element */
get currentDir() {
return getComputedStyle(this).direction;
}
/** The base language of the element */
get currentLang() {
const el = this.closest('[lang]');
return (el) ? el.lang : '';
}
/** Container element that defines bounds of popups visibility */
get $containerEl() {
const container = this.getClosestRelatedAttr('container');
return container ? ESLTraversingQuery.first(container, this) : undefined;
}
connectedCallback() {
super.connectedCallback();
if (!this.ready) {
this.$$attr('ready', true);
this.$$fire(this.SHARE_READY_EVENT, { bubbles: false });
}
}
attributeChangedCallback(attrName, oldValue, newValue) {
if (!this.connected || oldValue === newValue)
return;
this.update();
}
/** Updates the component and related popup */
update() {
var _a;
if (!this.isTargetActive)
return;
(_a = this.$target) === null || _a === void 0 ? void 0 : _a.hide();
}
/** Gets attribute value from the closest element with group behavior settings */
getClosestRelatedAttr(attrName) {
const relatedAttrName = `${this.baseTagName}-${attrName}`;
const $closest = this.closest(`[${relatedAttrName}]`);
return $closest ? $closest.getAttribute(relatedAttrName) : null;
}
/** Merges params to pass to the toggleable */
mergeToggleableParams(...params) {
return super.mergeToggleableParams({
initiator: 'share',
containerEl: this.$containerEl,
list: this.list,
dir: this.currentDir,
lang: this.currentLang
}, this.popupParams, ...params);
}
};
ESLShare.is = 'esl-share';
ESLShare.observedAttributes = ['list'];
__decorate([
prop('esl:share:ready')
], ESLShare.prototype, "SHARE_READY_EVENT", void 0);
__decorate([
attr({ defaultValue: 'all' })
], ESLShare.prototype, "list", void 0);
__decorate([
attr({ defaultValue: 'all' })
], ESLShare.prototype, "trackHover", void 0);
__decorate([
jsonAttr({ defaultValue: {} })
], ESLShare.prototype, "popupParams", void 0);
__decorate([
boolAttr({ readonly: true })
], ESLShare.prototype, "ready", void 0);
__decorate([
ready
], ESLShare.prototype, "connectedCallback", null);
ESLShare = __decorate([
ExportNs('Share')
], ESLShare);
export { ESLShare };