@educarehq/solaris-components 0.6.1 → 0.6.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -3028,8 +3028,9 @@ class SolarisCarousel {
|
|
|
3028
3028
|
resume: this.resume,
|
|
3029
3029
|
};
|
|
3030
3030
|
}
|
|
3031
|
-
|
|
3031
|
+
slideComponentInputs(index) {
|
|
3032
3032
|
const context = this.carouselContext(index);
|
|
3033
|
+
const itemInputs = context.item.slideInputs ?? {};
|
|
3033
3034
|
return {
|
|
3034
3035
|
item: context.item,
|
|
3035
3036
|
index: context.index,
|
|
@@ -3043,6 +3044,26 @@ class SolarisCarousel {
|
|
|
3043
3044
|
prev: context.prev,
|
|
3044
3045
|
pause: context.pause,
|
|
3045
3046
|
resume: context.resume,
|
|
3047
|
+
...itemInputs,
|
|
3048
|
+
};
|
|
3049
|
+
}
|
|
3050
|
+
overlayComponentInputs(index) {
|
|
3051
|
+
const context = this.carouselContext(index);
|
|
3052
|
+
const itemInputs = context.item.overlayInputs ?? {};
|
|
3053
|
+
return {
|
|
3054
|
+
item: context.item,
|
|
3055
|
+
index: context.index,
|
|
3056
|
+
active: context.active,
|
|
3057
|
+
first: context.first,
|
|
3058
|
+
last: context.last,
|
|
3059
|
+
count: context.count,
|
|
3060
|
+
isPlaying: context.isPlaying,
|
|
3061
|
+
goTo: context.goTo,
|
|
3062
|
+
next: context.next,
|
|
3063
|
+
prev: context.prev,
|
|
3064
|
+
pause: context.pause,
|
|
3065
|
+
resume: context.resume,
|
|
3066
|
+
...itemInputs,
|
|
3046
3067
|
};
|
|
3047
3068
|
}
|
|
3048
3069
|
text(text, key) {
|
|
@@ -3123,14 +3144,14 @@ class SolarisCarousel {
|
|
|
3123
3144
|
}
|
|
3124
3145
|
}
|
|
3125
3146
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisCarousel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3126
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisCarousel, isStandalone: true, selector: "solaris-carousel", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, aspect: { classPropertyName: "aspect", publicName: "aspect", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, controlsPosition: { classPropertyName: "controlsPosition", publicName: "controlsPosition", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, intervalMs: { classPropertyName: "intervalMs", publicName: "intervalMs", isSignal: true, isRequired: false, transformFunction: null }, transitionMs: { classPropertyName: "transitionMs", publicName: "transitionMs", isSignal: true, isRequired: false, transformFunction: null }, pauseOnHover: { classPropertyName: "pauseOnHover", publicName: "pauseOnHover", isSignal: true, isRequired: false, transformFunction: null }, pauseOnFocus: { classPropertyName: "pauseOnFocus", publicName: "pauseOnFocus", isSignal: true, isRequired: false, transformFunction: null }, resetAutoplayOnInteraction: { classPropertyName: "resetAutoplayOnInteraction", publicName: "resetAutoplayOnInteraction", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, showArrows: { classPropertyName: "showArrows", publicName: "showArrows", isSignal: true, isRequired: false, transformFunction: null }, keyboard: { classPropertyName: "keyboard", publicName: "keyboard", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, previousLabelKey: { classPropertyName: "previousLabelKey", publicName: "previousLabelKey", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabelKey: { classPropertyName: "nextLabelKey", publicName: "nextLabelKey", isSignal: true, isRequired: false, transformFunction: null }, navigationLabel: { classPropertyName: "navigationLabel", publicName: "navigationLabel", isSignal: true, isRequired: false, transformFunction: null }, navigationLabelKey: { classPropertyName: "navigationLabelKey", publicName: "navigationLabelKey", isSignal: true, isRequired: false, transformFunction: null }, goToSlideLabel: { classPropertyName: "goToSlideLabel", publicName: "goToSlideLabel", isSignal: true, isRequired: false, transformFunction: null }, goToSlideLabelKey: { classPropertyName: "goToSlideLabelKey", publicName: "goToSlideLabelKey", isSignal: true, isRequired: false, transformFunction: null }, openLabel: { classPropertyName: "openLabel", publicName: "openLabel", isSignal: true, isRequired: false, transformFunction: null }, openLabelKey: { classPropertyName: "openLabelKey", publicName: "openLabelKey", isSignal: true, isRequired: false, transformFunction: null }, textResolver: { classPropertyName: "textResolver", publicName: "textResolver", isSignal: true, isRequired: false, transformFunction: null }, slideTpl: { classPropertyName: "slideTpl", publicName: "slideTpl", isSignal: true, isRequired: false, transformFunction: null }, overlayTpl: { classPropertyName: "overlayTpl", publicName: "overlayTpl", isSignal: true, isRequired: false, transformFunction: null }, slideComponent: { classPropertyName: "slideComponent", publicName: "slideComponent", isSignal: true, isRequired: false, transformFunction: null }, overlayComponent: { classPropertyName: "overlayComponent", publicName: "overlayComponent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange", slideChange: "slideChange" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.data-aspect": "this.dataAspect", "attr.data-radius": "this.dataRadius", "attr.data-appearance": "this.dataAppearance", "attr.data-controls-position": "this.dataControlsPosition" } }, queries: [{ propertyName: "projectedSlide", first: true, predicate: SolarisCarouselSlideDirective, descendants: true, isSignal: true }, { propertyName: "projectedOverlay", first: true, predicate: SolarisCarouselOverlayDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"solaris-carousel\" role=\"region\" aria-roledescription=\"carousel\" [attr.aria-label]=\"rootAriaLabel()\"\r\n [attr.tabindex]=\"keyboard() ? '0' : null\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\"\r\n (focusin)=\"onFocusIn()\" (focusout)=\"onFocusOut()\">\r\n\r\n <div class=\"solaris-carousel__viewport\">\r\n <div class=\"solaris-carousel__track\" [style.transition-duration.ms]=\"transitionMs()\"\r\n [style.transform]=\"'translate3d(' + (-activeIndex() * 100) + '%, 0, 0)'\">\r\n\r\n @for (item of items(); track trackByItem($index, item)) {\r\n <div class=\"solaris-carousel__slide\" role=\"group\" aria-roledescription=\"slide\" [attr.aria-label]=\"($index + 1) + ' / ' + count()\"\r\n [attr.aria-hidden]=\"$index !== activeIndex() ? 'true' : null\">\r\n\r\n @if (resolvedSlideTpl(); as tpl) {\r\n <ng-container\r\n *ngTemplateOutlet=\"tpl; context: carouselContext($index)\">\r\n </ng-container>\r\n } @else if (slideComponent(); as component) {\r\n <ng-container\r\n *ngComponentOutlet=\"component; inputs: componentInputs($index)\">\r\n </ng-container>\r\n } @else {\r\n <ng-container\r\n *ngTemplateOutlet=\"defaultImageSlide; context: carouselContext($index)\">\r\n </ng-container>\r\n }\r\n\r\n @if (resolvedOverlayTpl(); as tpl) {\r\n <div class=\"solaris-carousel__overlay\">\r\n <ng-container\r\n *ngTemplateOutlet=\"tpl; context: carouselContext($index)\">\r\n </ng-container>\r\n </div>\r\n } @else if (overlayComponent(); as component) {\r\n <div class=\"solaris-carousel__overlay\">\r\n <ng-container\r\n *ngComponentOutlet=\"component; inputs: componentInputs($index)\">\r\n </ng-container>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (showArrows() && hasMultiple()) {\r\n <button type=\"button\" class=\"solaris-carousel__arrow is-prev\" [disabled]=\"!canGoPrev()\" [attr.aria-label]=\"previousAriaLabel()\"\r\n (click)=\"prev('arrow')\">\r\n <i class=\"ph ph-caret-left\" aria-hidden=\"true\"></i>\r\n </button>\r\n\r\n <button type=\"button\" class=\"solaris-carousel__arrow is-next\" [disabled]=\"!canGoNext()\" [attr.aria-label]=\"nextAriaLabel()\"\r\n (click)=\"next('arrow')\">\r\n <i class=\"ph ph-caret-right\" aria-hidden=\"true\"></i>\r\n </button>\r\n }\r\n\r\n @if (showDots() && hasMultiple()) {\r\n <div class=\"solaris-carousel__dots\" role=\"tablist\" [attr.aria-label]=\"navigationAriaLabel()\">\r\n @for (item of items(); track trackByItem($index, item)) {\r\n <button type=\"button\" class=\"solaris-carousel__dot\" role=\"tab\" [class.is-active]=\"$index === activeIndex()\"\r\n [attr.aria-label]=\"dotAriaLabel($index)\" [attr.aria-selected]=\"$index === activeIndex() ? 'true' : 'false'\"\r\n [attr.aria-current]=\"$index === activeIndex() ? 'true' : null\" (click)=\"goTo($index, 'dot')\">\r\n </button>\r\n }\r\n </div>\r\n }\r\n</div>\r\n\r\n<ng-template #defaultImageSlide let-item>\r\n @if (item.src) {\r\n @if (item.href) {\r\n <a class=\"solaris-carousel__media\" [href]=\"item.href\" [attr.target]=\"item.target ?? null\" [attr.aria-label]=\"itemAriaLabel(item)\">\r\n <img class=\"solaris-carousel__img\" [src]=\"item.src\" [attr.srcset]=\"item.srcSet ?? null\" [attr.sizes]=\"item.sizes ?? null\"\r\n [attr.alt]=\"itemAlt(item)\"/>\r\n </a>\r\n } @else {\r\n <div class=\"solaris-carousel__media\">\r\n <img class=\"solaris-carousel__img\" [src]=\"item.src\" [attr.srcset]=\"item.srcSet ?? null\" [attr.sizes]=\"item.sizes ?? null\"\r\n [attr.alt]=\"itemAlt(item)\"/>\r\n </div>\r\n }\r\n } @else {\r\n <div class=\"solaris-carousel__empty\" aria-hidden=\"true\"></div>\r\n }\r\n</ng-template>\r\n", styles: [":host{display:block;width:100%;min-width:0;--solaris-carousel-radius: var(--solaris-radius-lg);--solaris-carousel-bg: var(--solaris-color-surface);--solaris-carousel-color: var(--solaris-color-text);--solaris-carousel-overlay-padding: var(--solaris-space-5);--solaris-carousel-arrow-size: 4.2rem;--solaris-carousel-arrow-bg: color-mix(in srgb, #000 28%, transparent);--solaris-carousel-arrow-color: #fff;--solaris-carousel-dot-size: .8rem;--solaris-carousel-dot-active-width: 2.6rem;--solaris-carousel-dot-bg: #fff;--solaris-carousel-dot-bg-wrapper: color-mix(in srgb, #000 22%, transparent)}.solaris-carousel{width:100%;min-width:0;outline:none;overflow:hidden;position:relative;color:var(--solaris-carousel-color);border-radius:var(--solaris-carousel-radius);background:var(--solaris-carousel-bg)}:host([data-radius=none]){--solaris-carousel-radius: 0}:host([data-radius=sm]){--solaris-carousel-radius: var(--solaris-radius-sm)}:host([data-radius=md]){--solaris-carousel-radius: var(--solaris-radius-md)}:host([data-radius=lg]){--solaris-carousel-radius: var(--solaris-radius-lg)}:host([data-radius=xl]){--solaris-carousel-radius: var(--solaris-radius-xl, var(--solaris-radius-lg))}:host([data-radius=full]){--solaris-carousel-radius: var(--solaris-radius-full)}:host([data-appearance=surface]) .solaris-carousel{border:1px solid var(--solaris-color-border)}:host([data-appearance=elevated]) .solaris-carousel{box-shadow:var(--solaris-shadow-md, 0 1.2rem 3rem rgba(0, 0, 0, .12))}:host([data-appearance=hero]) .solaris-carousel{background:#000}.solaris-carousel:focus-visible{box-shadow:0 0 0 .3rem color-mix(in srgb,var(--solaris-color-primary) 18%,transparent)}.solaris-carousel__viewport{width:100%;position:relative}:host([data-aspect=\"16/9\"]) .solaris-carousel__viewport{aspect-ratio:16/9}:host([data-aspect=\"9/16\"]) .solaris-carousel__viewport{aspect-ratio:9/16}:host([data-aspect=\"4/3\"]) .solaris-carousel__viewport{aspect-ratio:4/3}:host([data-aspect=\"1/1\"]) .solaris-carousel__viewport{aspect-ratio:1/1}:host([data-aspect=auto]) .solaris-carousel__viewport{aspect-ratio:auto}.solaris-carousel__track{height:100%;display:flex;will-change:transform;transition-property:transform;transition-timing-function:cubic-bezier(.16,1,.3,1)}@media(prefers-reduced-motion:reduce){.solaris-carousel__track{transition:none!important}}.solaris-carousel__slide{height:100%;min-width:0;flex:0 0 100%;position:relative}.solaris-carousel__media{display:block;width:100%;height:100%;position:relative}.solaris-carousel__img{width:100%;height:100%;display:block;object-fit:cover}.solaris-carousel__empty{width:100%;height:100%;background:linear-gradient(135deg,color-mix(in srgb,var(--solaris-color-surface) 88%,#000),var(--solaris-color-surface))}.solaris-carousel__overlay{inset:0;display:grid;align-items:end;position:absolute;pointer-events:none;padding:var(--solaris-carousel-overlay-padding)}.solaris-carousel__overlay :is(a,button,input,textarea,select,[tabindex]){pointer-events:auto}.solaris-carousel__arrow{top:50%;z-index:2;border:1px solid color-mix(in srgb,var(--solaris-color-border) 60%,transparent);color:var(--solaris-carousel-arrow-color);display:grid;width:var(--solaris-carousel-arrow-size);height:var(--solaris-carousel-arrow-size);opacity:.85;cursor:pointer;position:absolute;place-items:center;transform:translateY(-50%);border-radius:var(--solaris-radius-full);background:var(--solaris-carousel-arrow-bg);transition:opacity .16s ease,transform .16s ease,filter .16s ease}.solaris-carousel__arrow:hover:not(:disabled){opacity:1;filter:brightness(1.08)}.solaris-carousel__arrow:disabled{opacity:.35;cursor:not-allowed}.solaris-carousel__arrow.is-prev{left:var(--solaris-space-3)}.solaris-carousel__arrow.is-next{right:var(--solaris-space-3)}.solaris-carousel__arrow i.ph{font-size:2rem;line-height:1}.solaris-carousel__dots{left:50%;z-index:2;gap:.6rem;position:absolute;align-items:center;display:inline-flex;padding:.6rem .8rem;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transform:translate(-50%);bottom:var(--solaris-space-3);border-radius:var(--solaris-radius-full);background:var(--solaris-carousel-dot-bg-wrapper)}.solaris-carousel__dot{border:0;opacity:.35;width:var(--solaris-carousel-dot-size);height:var(--solaris-carousel-dot-size);cursor:pointer;background:var(--solaris-carousel-dot-bg);border-radius:99rem;transition:width .22s cubic-bezier(.16,1,.3,1),opacity .22s ease,transform .22s ease}.solaris-carousel__dot.is-active{width:var(--solaris-carousel-dot-active-width);opacity:1}:host([data-controls-position=outside]) .solaris-carousel{overflow:visible}:host([data-controls-position=outside]) .solaris-carousel__dots{bottom:auto;top:calc(100% + var(--solaris-space-3))}:host([data-controls-position=outside]) .solaris-carousel__arrow.is-prev{left:calc(var(--solaris-carousel-arrow-size) * -.5)}:host([data-controls-position=outside]) .solaris-carousel__arrow.is-next{right:calc(var(--solaris-carousel-arrow-size) * -.5)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3147
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisCarousel, isStandalone: true, selector: "solaris-carousel", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, aspect: { classPropertyName: "aspect", publicName: "aspect", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, controlsPosition: { classPropertyName: "controlsPosition", publicName: "controlsPosition", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, intervalMs: { classPropertyName: "intervalMs", publicName: "intervalMs", isSignal: true, isRequired: false, transformFunction: null }, transitionMs: { classPropertyName: "transitionMs", publicName: "transitionMs", isSignal: true, isRequired: false, transformFunction: null }, pauseOnHover: { classPropertyName: "pauseOnHover", publicName: "pauseOnHover", isSignal: true, isRequired: false, transformFunction: null }, pauseOnFocus: { classPropertyName: "pauseOnFocus", publicName: "pauseOnFocus", isSignal: true, isRequired: false, transformFunction: null }, resetAutoplayOnInteraction: { classPropertyName: "resetAutoplayOnInteraction", publicName: "resetAutoplayOnInteraction", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, showArrows: { classPropertyName: "showArrows", publicName: "showArrows", isSignal: true, isRequired: false, transformFunction: null }, keyboard: { classPropertyName: "keyboard", publicName: "keyboard", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, previousLabelKey: { classPropertyName: "previousLabelKey", publicName: "previousLabelKey", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabelKey: { classPropertyName: "nextLabelKey", publicName: "nextLabelKey", isSignal: true, isRequired: false, transformFunction: null }, navigationLabel: { classPropertyName: "navigationLabel", publicName: "navigationLabel", isSignal: true, isRequired: false, transformFunction: null }, navigationLabelKey: { classPropertyName: "navigationLabelKey", publicName: "navigationLabelKey", isSignal: true, isRequired: false, transformFunction: null }, goToSlideLabel: { classPropertyName: "goToSlideLabel", publicName: "goToSlideLabel", isSignal: true, isRequired: false, transformFunction: null }, goToSlideLabelKey: { classPropertyName: "goToSlideLabelKey", publicName: "goToSlideLabelKey", isSignal: true, isRequired: false, transformFunction: null }, openLabel: { classPropertyName: "openLabel", publicName: "openLabel", isSignal: true, isRequired: false, transformFunction: null }, openLabelKey: { classPropertyName: "openLabelKey", publicName: "openLabelKey", isSignal: true, isRequired: false, transformFunction: null }, textResolver: { classPropertyName: "textResolver", publicName: "textResolver", isSignal: true, isRequired: false, transformFunction: null }, slideTpl: { classPropertyName: "slideTpl", publicName: "slideTpl", isSignal: true, isRequired: false, transformFunction: null }, overlayTpl: { classPropertyName: "overlayTpl", publicName: "overlayTpl", isSignal: true, isRequired: false, transformFunction: null }, slideComponent: { classPropertyName: "slideComponent", publicName: "slideComponent", isSignal: true, isRequired: false, transformFunction: null }, overlayComponent: { classPropertyName: "overlayComponent", publicName: "overlayComponent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange", slideChange: "slideChange" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.data-aspect": "this.dataAspect", "attr.data-radius": "this.dataRadius", "attr.data-appearance": "this.dataAppearance", "attr.data-controls-position": "this.dataControlsPosition" } }, queries: [{ propertyName: "projectedSlide", first: true, predicate: SolarisCarouselSlideDirective, descendants: true, isSignal: true }, { propertyName: "projectedOverlay", first: true, predicate: SolarisCarouselOverlayDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"solaris-carousel\" role=\"region\" aria-roledescription=\"carousel\" [attr.aria-label]=\"rootAriaLabel()\"\r\n [attr.tabindex]=\"keyboard() ? '0' : null\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\"\r\n (focusin)=\"onFocusIn()\" (focusout)=\"onFocusOut()\">\r\n\r\n <div class=\"solaris-carousel__viewport\">\r\n <div class=\"solaris-carousel__track\" [style.transition-duration.ms]=\"transitionMs()\"\r\n [style.transform]=\"'translate3d(' + (-activeIndex() * 100) + '%, 0, 0)'\">\r\n\r\n @for (item of items(); track trackByItem($index, item)) {\r\n <div class=\"solaris-carousel__slide\" role=\"group\" aria-roledescription=\"slide\" [attr.aria-label]=\"($index + 1) + ' / ' + count()\"\r\n [attr.aria-hidden]=\"$index !== activeIndex() ? 'true' : null\">\r\n\r\n @if (resolvedSlideTpl(); as tpl) {\r\n <ng-container\r\n *ngTemplateOutlet=\"tpl; context: carouselContext($index)\">\r\n </ng-container>\r\n } @else if (item.slideComponent; as component) {\r\n <ng-container\r\n *ngComponentOutlet=\"component; inputs: slideComponentInputs($index)\">\r\n </ng-container>\r\n } @else if (slideComponent(); as component) {\r\n <ng-container\r\n *ngComponentOutlet=\"component; inputs: slideComponentInputs($index)\">\r\n </ng-container>\r\n } @else {\r\n <ng-container\r\n *ngTemplateOutlet=\"defaultImageSlide; context: carouselContext($index)\">\r\n </ng-container>\r\n }\r\n\r\n @if (resolvedOverlayTpl(); as tpl) {\r\n <div class=\"solaris-carousel__overlay\">\r\n <ng-container\r\n *ngTemplateOutlet=\"tpl; context: carouselContext($index)\">\r\n </ng-container>\r\n </div>\r\n } @else if (item.overlayComponent; as component) {\r\n <div class=\"solaris-carousel__overlay\">\r\n <ng-container\r\n *ngComponentOutlet=\"component; inputs: overlayComponentInputs($index)\">\r\n </ng-container>\r\n </div>\r\n } @else if (overlayComponent(); as component) {\r\n <div class=\"solaris-carousel__overlay\">\r\n <ng-container\r\n *ngComponentOutlet=\"component; inputs: overlayComponentInputs($index)\">\r\n </ng-container>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (showArrows() && hasMultiple()) {\r\n <button type=\"button\" class=\"solaris-carousel__arrow is-prev\" [disabled]=\"!canGoPrev()\" [attr.aria-label]=\"previousAriaLabel()\"\r\n (click)=\"prev('arrow')\">\r\n <i class=\"ph ph-caret-left\" aria-hidden=\"true\"></i>\r\n </button>\r\n\r\n <button type=\"button\" class=\"solaris-carousel__arrow is-next\" [disabled]=\"!canGoNext()\" [attr.aria-label]=\"nextAriaLabel()\"\r\n (click)=\"next('arrow')\">\r\n <i class=\"ph ph-caret-right\" aria-hidden=\"true\"></i>\r\n </button>\r\n }\r\n\r\n @if (showDots() && hasMultiple()) {\r\n <div class=\"solaris-carousel__dots\" role=\"tablist\" [attr.aria-label]=\"navigationAriaLabel()\">\r\n @for (item of items(); track trackByItem($index, item)) {\r\n <button type=\"button\" class=\"solaris-carousel__dot\" role=\"tab\" [class.is-active]=\"$index === activeIndex()\"\r\n [attr.aria-label]=\"dotAriaLabel($index)\" [attr.aria-selected]=\"$index === activeIndex() ? 'true' : 'false'\"\r\n [attr.aria-current]=\"$index === activeIndex() ? 'true' : null\" (click)=\"goTo($index, 'dot')\">\r\n </button>\r\n }\r\n </div>\r\n }\r\n</div>\r\n\r\n<ng-template #defaultImageSlide let-item>\r\n @if (item.src) {\r\n @if (item.href) {\r\n <a class=\"solaris-carousel__media\" [href]=\"item.href\" [attr.target]=\"item.target ?? null\" [attr.aria-label]=\"itemAriaLabel(item)\">\r\n <img class=\"solaris-carousel__img\" [src]=\"item.src\" [attr.srcset]=\"item.srcSet ?? null\" [attr.sizes]=\"item.sizes ?? null\"\r\n [attr.alt]=\"itemAlt(item)\"/>\r\n </a>\r\n } @else {\r\n <div class=\"solaris-carousel__media\">\r\n <img class=\"solaris-carousel__img\" [src]=\"item.src\" [attr.srcset]=\"item.srcSet ?? null\" [attr.sizes]=\"item.sizes ?? null\"\r\n [attr.alt]=\"itemAlt(item)\"/>\r\n </div>\r\n }\r\n } @else {\r\n <div class=\"solaris-carousel__empty\" aria-hidden=\"true\"></div>\r\n }\r\n</ng-template>\r\n", styles: [":host{display:block;width:100%;min-width:0;--solaris-carousel-radius: var(--solaris-radius-lg);--solaris-carousel-bg: var(--solaris-color-surface);--solaris-carousel-color: var(--solaris-color-text);--solaris-carousel-overlay-padding: var(--solaris-space-5);--solaris-carousel-arrow-size: 4.2rem;--solaris-carousel-arrow-bg: color-mix(in srgb, #000 28%, transparent);--solaris-carousel-arrow-color: #fff;--solaris-carousel-dot-size: .8rem;--solaris-carousel-dot-active-width: 2.6rem;--solaris-carousel-dot-bg: #fff;--solaris-carousel-dot-bg-wrapper: color-mix(in srgb, #000 22%, transparent)}.solaris-carousel{width:100%;min-width:0;outline:none;overflow:hidden;position:relative;color:var(--solaris-carousel-color);border-radius:var(--solaris-carousel-radius);background:var(--solaris-carousel-bg)}:host([data-radius=none]){--solaris-carousel-radius: 0}:host([data-radius=sm]){--solaris-carousel-radius: var(--solaris-radius-sm)}:host([data-radius=md]){--solaris-carousel-radius: var(--solaris-radius-md)}:host([data-radius=lg]){--solaris-carousel-radius: var(--solaris-radius-lg)}:host([data-radius=xl]){--solaris-carousel-radius: var(--solaris-radius-xl, var(--solaris-radius-lg))}:host([data-radius=full]){--solaris-carousel-radius: var(--solaris-radius-full)}:host([data-appearance=surface]) .solaris-carousel{border:1px solid var(--solaris-color-border)}:host([data-appearance=elevated]) .solaris-carousel{box-shadow:var(--solaris-shadow-md, 0 1.2rem 3rem rgba(0, 0, 0, .12))}:host([data-appearance=hero]) .solaris-carousel{background:#000}.solaris-carousel:focus-visible{box-shadow:0 0 0 .3rem color-mix(in srgb,var(--solaris-color-primary) 18%,transparent)}.solaris-carousel__viewport{width:100%;position:relative}:host([data-aspect=\"16/9\"]) .solaris-carousel__viewport{aspect-ratio:16/9}:host([data-aspect=\"9/16\"]) .solaris-carousel__viewport{aspect-ratio:9/16}:host([data-aspect=\"4/3\"]) .solaris-carousel__viewport{aspect-ratio:4/3}:host([data-aspect=\"1/1\"]) .solaris-carousel__viewport{aspect-ratio:1/1}:host([data-aspect=auto]) .solaris-carousel__viewport{aspect-ratio:auto}.solaris-carousel__track{height:100%;display:flex;will-change:transform;transition-property:transform;transition-timing-function:cubic-bezier(.16,1,.3,1)}@media(prefers-reduced-motion:reduce){.solaris-carousel__track{transition:none!important}}.solaris-carousel__slide{height:100%;min-width:0;flex:0 0 100%;position:relative}.solaris-carousel__media{display:block;width:100%;height:100%;position:relative}.solaris-carousel__img{width:100%;height:100%;display:block;object-fit:cover}.solaris-carousel__empty{width:100%;height:100%;background:linear-gradient(135deg,color-mix(in srgb,var(--solaris-color-surface) 88%,#000),var(--solaris-color-surface))}.solaris-carousel__overlay{inset:0;display:grid;align-items:end;position:absolute;pointer-events:none;padding:var(--solaris-carousel-overlay-padding)}.solaris-carousel__overlay :is(a,button,input,textarea,select,[tabindex]){pointer-events:auto}.solaris-carousel__arrow{top:50%;z-index:2;border:1px solid color-mix(in srgb,var(--solaris-color-border) 60%,transparent);color:var(--solaris-carousel-arrow-color);display:grid;width:var(--solaris-carousel-arrow-size);height:var(--solaris-carousel-arrow-size);opacity:.85;cursor:pointer;position:absolute;place-items:center;transform:translateY(-50%);border-radius:var(--solaris-radius-full);background:var(--solaris-carousel-arrow-bg);transition:opacity .16s ease,transform .16s ease,filter .16s ease}.solaris-carousel__arrow:hover:not(:disabled){opacity:1;filter:brightness(1.08)}.solaris-carousel__arrow:disabled{opacity:.35;cursor:not-allowed}.solaris-carousel__arrow.is-prev{left:var(--solaris-space-3)}.solaris-carousel__arrow.is-next{right:var(--solaris-space-3)}.solaris-carousel__arrow i.ph{font-size:2rem;line-height:1}.solaris-carousel__dots{left:50%;z-index:2;gap:.6rem;position:absolute;align-items:center;display:inline-flex;padding:.6rem .8rem;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transform:translate(-50%);bottom:var(--solaris-space-3);border-radius:var(--solaris-radius-full);background:var(--solaris-carousel-dot-bg-wrapper)}.solaris-carousel__dot{border:0;opacity:.35;width:var(--solaris-carousel-dot-size);height:var(--solaris-carousel-dot-size);cursor:pointer;background:var(--solaris-carousel-dot-bg);border-radius:99rem;transition:width .22s cubic-bezier(.16,1,.3,1),opacity .22s ease,transform .22s ease}.solaris-carousel__dot.is-active{width:var(--solaris-carousel-dot-active-width);opacity:1}:host([data-controls-position=outside]) .solaris-carousel{overflow:visible}:host([data-controls-position=outside]) .solaris-carousel__dots{bottom:auto;top:calc(100% + var(--solaris-space-3))}:host([data-controls-position=outside]) .solaris-carousel__arrow.is-prev{left:calc(var(--solaris-carousel-arrow-size) * -.5)}:host([data-controls-position=outside]) .solaris-carousel__arrow.is-next{right:calc(var(--solaris-carousel-arrow-size) * -.5)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3127
3148
|
}
|
|
3128
3149
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisCarousel, decorators: [{
|
|
3129
3150
|
type: Component,
|
|
3130
3151
|
args: [{ selector: 'solaris-carousel', standalone: true, imports: [
|
|
3131
3152
|
NgTemplateOutlet,
|
|
3132
3153
|
NgComponentOutlet
|
|
3133
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-carousel\" role=\"region\" aria-roledescription=\"carousel\" [attr.aria-label]=\"rootAriaLabel()\"\r\n [attr.tabindex]=\"keyboard() ? '0' : null\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\"\r\n (focusin)=\"onFocusIn()\" (focusout)=\"onFocusOut()\">\r\n\r\n <div class=\"solaris-carousel__viewport\">\r\n <div class=\"solaris-carousel__track\" [style.transition-duration.ms]=\"transitionMs()\"\r\n [style.transform]=\"'translate3d(' + (-activeIndex() * 100) + '%, 0, 0)'\">\r\n\r\n @for (item of items(); track trackByItem($index, item)) {\r\n <div class=\"solaris-carousel__slide\" role=\"group\" aria-roledescription=\"slide\" [attr.aria-label]=\"($index + 1) + ' / ' + count()\"\r\n [attr.aria-hidden]=\"$index !== activeIndex() ? 'true' : null\">\r\n\r\n @if (resolvedSlideTpl(); as tpl) {\r\n <ng-container\r\n *ngTemplateOutlet=\"tpl; context: carouselContext($index)\">\r\n </ng-container>\r\n } @else if (slideComponent(); as component) {\r\n <ng-container\r\n *ngComponentOutlet=\"component; inputs:
|
|
3154
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-carousel\" role=\"region\" aria-roledescription=\"carousel\" [attr.aria-label]=\"rootAriaLabel()\"\r\n [attr.tabindex]=\"keyboard() ? '0' : null\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\"\r\n (focusin)=\"onFocusIn()\" (focusout)=\"onFocusOut()\">\r\n\r\n <div class=\"solaris-carousel__viewport\">\r\n <div class=\"solaris-carousel__track\" [style.transition-duration.ms]=\"transitionMs()\"\r\n [style.transform]=\"'translate3d(' + (-activeIndex() * 100) + '%, 0, 0)'\">\r\n\r\n @for (item of items(); track trackByItem($index, item)) {\r\n <div class=\"solaris-carousel__slide\" role=\"group\" aria-roledescription=\"slide\" [attr.aria-label]=\"($index + 1) + ' / ' + count()\"\r\n [attr.aria-hidden]=\"$index !== activeIndex() ? 'true' : null\">\r\n\r\n @if (resolvedSlideTpl(); as tpl) {\r\n <ng-container\r\n *ngTemplateOutlet=\"tpl; context: carouselContext($index)\">\r\n </ng-container>\r\n } @else if (item.slideComponent; as component) {\r\n <ng-container\r\n *ngComponentOutlet=\"component; inputs: slideComponentInputs($index)\">\r\n </ng-container>\r\n } @else if (slideComponent(); as component) {\r\n <ng-container\r\n *ngComponentOutlet=\"component; inputs: slideComponentInputs($index)\">\r\n </ng-container>\r\n } @else {\r\n <ng-container\r\n *ngTemplateOutlet=\"defaultImageSlide; context: carouselContext($index)\">\r\n </ng-container>\r\n }\r\n\r\n @if (resolvedOverlayTpl(); as tpl) {\r\n <div class=\"solaris-carousel__overlay\">\r\n <ng-container\r\n *ngTemplateOutlet=\"tpl; context: carouselContext($index)\">\r\n </ng-container>\r\n </div>\r\n } @else if (item.overlayComponent; as component) {\r\n <div class=\"solaris-carousel__overlay\">\r\n <ng-container\r\n *ngComponentOutlet=\"component; inputs: overlayComponentInputs($index)\">\r\n </ng-container>\r\n </div>\r\n } @else if (overlayComponent(); as component) {\r\n <div class=\"solaris-carousel__overlay\">\r\n <ng-container\r\n *ngComponentOutlet=\"component; inputs: overlayComponentInputs($index)\">\r\n </ng-container>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (showArrows() && hasMultiple()) {\r\n <button type=\"button\" class=\"solaris-carousel__arrow is-prev\" [disabled]=\"!canGoPrev()\" [attr.aria-label]=\"previousAriaLabel()\"\r\n (click)=\"prev('arrow')\">\r\n <i class=\"ph ph-caret-left\" aria-hidden=\"true\"></i>\r\n </button>\r\n\r\n <button type=\"button\" class=\"solaris-carousel__arrow is-next\" [disabled]=\"!canGoNext()\" [attr.aria-label]=\"nextAriaLabel()\"\r\n (click)=\"next('arrow')\">\r\n <i class=\"ph ph-caret-right\" aria-hidden=\"true\"></i>\r\n </button>\r\n }\r\n\r\n @if (showDots() && hasMultiple()) {\r\n <div class=\"solaris-carousel__dots\" role=\"tablist\" [attr.aria-label]=\"navigationAriaLabel()\">\r\n @for (item of items(); track trackByItem($index, item)) {\r\n <button type=\"button\" class=\"solaris-carousel__dot\" role=\"tab\" [class.is-active]=\"$index === activeIndex()\"\r\n [attr.aria-label]=\"dotAriaLabel($index)\" [attr.aria-selected]=\"$index === activeIndex() ? 'true' : 'false'\"\r\n [attr.aria-current]=\"$index === activeIndex() ? 'true' : null\" (click)=\"goTo($index, 'dot')\">\r\n </button>\r\n }\r\n </div>\r\n }\r\n</div>\r\n\r\n<ng-template #defaultImageSlide let-item>\r\n @if (item.src) {\r\n @if (item.href) {\r\n <a class=\"solaris-carousel__media\" [href]=\"item.href\" [attr.target]=\"item.target ?? null\" [attr.aria-label]=\"itemAriaLabel(item)\">\r\n <img class=\"solaris-carousel__img\" [src]=\"item.src\" [attr.srcset]=\"item.srcSet ?? null\" [attr.sizes]=\"item.sizes ?? null\"\r\n [attr.alt]=\"itemAlt(item)\"/>\r\n </a>\r\n } @else {\r\n <div class=\"solaris-carousel__media\">\r\n <img class=\"solaris-carousel__img\" [src]=\"item.src\" [attr.srcset]=\"item.srcSet ?? null\" [attr.sizes]=\"item.sizes ?? null\"\r\n [attr.alt]=\"itemAlt(item)\"/>\r\n </div>\r\n }\r\n } @else {\r\n <div class=\"solaris-carousel__empty\" aria-hidden=\"true\"></div>\r\n }\r\n</ng-template>\r\n", styles: [":host{display:block;width:100%;min-width:0;--solaris-carousel-radius: var(--solaris-radius-lg);--solaris-carousel-bg: var(--solaris-color-surface);--solaris-carousel-color: var(--solaris-color-text);--solaris-carousel-overlay-padding: var(--solaris-space-5);--solaris-carousel-arrow-size: 4.2rem;--solaris-carousel-arrow-bg: color-mix(in srgb, #000 28%, transparent);--solaris-carousel-arrow-color: #fff;--solaris-carousel-dot-size: .8rem;--solaris-carousel-dot-active-width: 2.6rem;--solaris-carousel-dot-bg: #fff;--solaris-carousel-dot-bg-wrapper: color-mix(in srgb, #000 22%, transparent)}.solaris-carousel{width:100%;min-width:0;outline:none;overflow:hidden;position:relative;color:var(--solaris-carousel-color);border-radius:var(--solaris-carousel-radius);background:var(--solaris-carousel-bg)}:host([data-radius=none]){--solaris-carousel-radius: 0}:host([data-radius=sm]){--solaris-carousel-radius: var(--solaris-radius-sm)}:host([data-radius=md]){--solaris-carousel-radius: var(--solaris-radius-md)}:host([data-radius=lg]){--solaris-carousel-radius: var(--solaris-radius-lg)}:host([data-radius=xl]){--solaris-carousel-radius: var(--solaris-radius-xl, var(--solaris-radius-lg))}:host([data-radius=full]){--solaris-carousel-radius: var(--solaris-radius-full)}:host([data-appearance=surface]) .solaris-carousel{border:1px solid var(--solaris-color-border)}:host([data-appearance=elevated]) .solaris-carousel{box-shadow:var(--solaris-shadow-md, 0 1.2rem 3rem rgba(0, 0, 0, .12))}:host([data-appearance=hero]) .solaris-carousel{background:#000}.solaris-carousel:focus-visible{box-shadow:0 0 0 .3rem color-mix(in srgb,var(--solaris-color-primary) 18%,transparent)}.solaris-carousel__viewport{width:100%;position:relative}:host([data-aspect=\"16/9\"]) .solaris-carousel__viewport{aspect-ratio:16/9}:host([data-aspect=\"9/16\"]) .solaris-carousel__viewport{aspect-ratio:9/16}:host([data-aspect=\"4/3\"]) .solaris-carousel__viewport{aspect-ratio:4/3}:host([data-aspect=\"1/1\"]) .solaris-carousel__viewport{aspect-ratio:1/1}:host([data-aspect=auto]) .solaris-carousel__viewport{aspect-ratio:auto}.solaris-carousel__track{height:100%;display:flex;will-change:transform;transition-property:transform;transition-timing-function:cubic-bezier(.16,1,.3,1)}@media(prefers-reduced-motion:reduce){.solaris-carousel__track{transition:none!important}}.solaris-carousel__slide{height:100%;min-width:0;flex:0 0 100%;position:relative}.solaris-carousel__media{display:block;width:100%;height:100%;position:relative}.solaris-carousel__img{width:100%;height:100%;display:block;object-fit:cover}.solaris-carousel__empty{width:100%;height:100%;background:linear-gradient(135deg,color-mix(in srgb,var(--solaris-color-surface) 88%,#000),var(--solaris-color-surface))}.solaris-carousel__overlay{inset:0;display:grid;align-items:end;position:absolute;pointer-events:none;padding:var(--solaris-carousel-overlay-padding)}.solaris-carousel__overlay :is(a,button,input,textarea,select,[tabindex]){pointer-events:auto}.solaris-carousel__arrow{top:50%;z-index:2;border:1px solid color-mix(in srgb,var(--solaris-color-border) 60%,transparent);color:var(--solaris-carousel-arrow-color);display:grid;width:var(--solaris-carousel-arrow-size);height:var(--solaris-carousel-arrow-size);opacity:.85;cursor:pointer;position:absolute;place-items:center;transform:translateY(-50%);border-radius:var(--solaris-radius-full);background:var(--solaris-carousel-arrow-bg);transition:opacity .16s ease,transform .16s ease,filter .16s ease}.solaris-carousel__arrow:hover:not(:disabled){opacity:1;filter:brightness(1.08)}.solaris-carousel__arrow:disabled{opacity:.35;cursor:not-allowed}.solaris-carousel__arrow.is-prev{left:var(--solaris-space-3)}.solaris-carousel__arrow.is-next{right:var(--solaris-space-3)}.solaris-carousel__arrow i.ph{font-size:2rem;line-height:1}.solaris-carousel__dots{left:50%;z-index:2;gap:.6rem;position:absolute;align-items:center;display:inline-flex;padding:.6rem .8rem;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transform:translate(-50%);bottom:var(--solaris-space-3);border-radius:var(--solaris-radius-full);background:var(--solaris-carousel-dot-bg-wrapper)}.solaris-carousel__dot{border:0;opacity:.35;width:var(--solaris-carousel-dot-size);height:var(--solaris-carousel-dot-size);cursor:pointer;background:var(--solaris-carousel-dot-bg);border-radius:99rem;transition:width .22s cubic-bezier(.16,1,.3,1),opacity .22s ease,transform .22s ease}.solaris-carousel__dot.is-active{width:var(--solaris-carousel-dot-active-width);opacity:1}:host([data-controls-position=outside]) .solaris-carousel{overflow:visible}:host([data-controls-position=outside]) .solaris-carousel__dots{bottom:auto;top:calc(100% + var(--solaris-space-3))}:host([data-controls-position=outside]) .solaris-carousel__arrow.is-prev{left:calc(var(--solaris-carousel-arrow-size) * -.5)}:host([data-controls-position=outside]) .solaris-carousel__arrow.is-next{right:calc(var(--solaris-carousel-arrow-size) * -.5)}\n"] }]
|
|
3134
3155
|
}], ctorParameters: () => [], propDecorators: { projectedSlide: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisCarouselSlideDirective), { isSignal: true }] }], projectedOverlay: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisCarouselOverlayDirective), { isSignal: true }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], aspect: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspect", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], controlsPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlsPosition", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], autoplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoplay", required: false }] }], intervalMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "intervalMs", required: false }] }], transitionMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionMs", required: false }] }], pauseOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "pauseOnHover", required: false }] }], pauseOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "pauseOnFocus", required: false }] }], resetAutoplayOnInteraction: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetAutoplayOnInteraction", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }], showArrows: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrows", required: false }] }], keyboard: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboard", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], previousLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabelKey", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], nextLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabelKey", required: false }] }], navigationLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigationLabel", required: false }] }], navigationLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigationLabelKey", required: false }] }], goToSlideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "goToSlideLabel", required: false }] }], goToSlideLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "goToSlideLabelKey", required: false }] }], openLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "openLabel", required: false }] }], openLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "openLabelKey", required: false }] }], textResolver: [{ type: i0.Input, args: [{ isSignal: true, alias: "textResolver", required: false }] }], slideTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "slideTpl", required: false }] }], overlayTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayTpl", required: false }] }], slideComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "slideComponent", required: false }] }], overlayComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayComponent", required: false }] }], slideChange: [{ type: i0.Output, args: ["slideChange"] }], dataAspect: [{
|
|
3135
3156
|
type: HostBinding,
|
|
3136
3157
|
args: ['attr.data-aspect']
|