@exadel/esl
Version:
Exadel Smart Library (ESL) is the lightweight custom elements library that provide a set of super-flexible components
78 lines (77 loc) • 3.35 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, listen, memoize, ready } from '../../../esl-utils/decorators';
import { ESLMixinElement } from '../../../esl-mixin-element/core';
import { ESLCarouselAutoplayMixin } from './esl-carousel.autoplay.mixin';
import { ESLCarouselAutoplayEvent } from './esl-carousel.autoplay.event';
/**
* Read-only autoplay state mixin.
* Resolves the target carousel, subscribes to autoplay invalidation events and reflects current autoplay state on host.
*/
let ESLCarouselAutoplayStateMixin = class ESLCarouselAutoplayStateMixin extends ESLMixinElement {
/** Target carousel instance */
get $carousel() {
return this.$$find(this.target);
}
/** Target autoplay plugin instance */
get autoplay() {
return this.$carousel ? ESLCarouselAutoplayMixin.get(this.$carousel) : null;
}
/** Controlled carousel id for a11y */
get targetID() {
var _a;
return ((_a = this.$carousel) === null || _a === void 0 ? void 0 : _a.id) || null;
}
/** Exclusive summary state for the controlled autoplay instance */
get state() {
var _a, _b;
return (_b = (_a = this.autoplay) === null || _a === void 0 ? void 0 : _a.state) !== null && _b !== void 0 ? _b : 'unavailable';
}
connectedCallback() {
super.connectedCallback();
this.syncState();
}
disconnectedCallback() {
super.disconnectedCallback();
memoize.clear(this, '$carousel');
}
/** Synchronize host state markers */
syncState() {
this.$$attr('disabled', !this.autoplay);
this.$$attr('autoplay-state', this.state);
}
/** Handles autoplay state changes on target carousel */
_onStateChange() {
this.syncState();
}
};
ESLCarouselAutoplayStateMixin.is = 'esl-carousel-autoplay-state';
ESLCarouselAutoplayStateMixin.DEFAULT_TARGET = '::parent(.esl-carousel-nav-container)::find(esl-carousel)';
__decorate([
attr({
name: 'esl-carousel-autoplay-target',
defaultValue: ESLCarouselAutoplayStateMixin.DEFAULT_TARGET
})
], ESLCarouselAutoplayStateMixin.prototype, "target", void 0);
__decorate([
memoize()
], ESLCarouselAutoplayStateMixin.prototype, "$carousel", null);
__decorate([
ready
], ESLCarouselAutoplayStateMixin.prototype, "connectedCallback", null);
__decorate([
listen({
event: ESLCarouselAutoplayEvent.NAME,
target: ($this) => $this.$carousel,
condition: ($this) => !!$this.$carousel
})
], ESLCarouselAutoplayStateMixin.prototype, "_onStateChange", null);
ESLCarouselAutoplayStateMixin = __decorate([
ExportNs('Carousel.AutoplayState')
], ESLCarouselAutoplayStateMixin);
export { ESLCarouselAutoplayStateMixin };