@educarehq/solaris-components 0.6.1 → 0.6.3
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']
|
|
@@ -6921,12 +6942,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
6921
6942
|
type: Output
|
|
6922
6943
|
}] } });
|
|
6923
6944
|
|
|
6924
|
-
class
|
|
6945
|
+
class SolarisCardMediaOverlay {
|
|
6925
6946
|
attr = '';
|
|
6926
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type:
|
|
6927
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type:
|
|
6947
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisCardMediaOverlay, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
6948
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisCardMediaOverlay, isStandalone: true, selector: "[solaris-card-media-overlay]", host: { properties: { "attr.solaris-card-media-overlay": "this.attr" } }, ngImport: i0 });
|
|
6928
6949
|
}
|
|
6929
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type:
|
|
6950
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisCardMediaOverlay, decorators: [{
|
|
6930
6951
|
type: Directive,
|
|
6931
6952
|
args: [{
|
|
6932
6953
|
selector: '[solaris-card-media-overlay]',
|
|
@@ -6941,29 +6962,55 @@ class SolarisCardMedia {
|
|
|
6941
6962
|
variant = input('image', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
6942
6963
|
src = input(null, ...(ngDevMode ? [{ debugName: "src" }] : []));
|
|
6943
6964
|
alt = input(null, ...(ngDevMode ? [{ debugName: "alt" }] : []));
|
|
6965
|
+
color = input('neutral', ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
6966
|
+
appearance = input('solid', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
|
|
6967
|
+
customRatio = input(null, ...(ngDevMode ? [{ debugName: "customRatio" }] : []));
|
|
6944
6968
|
ratio = input('16:9', ...(ngDevMode ? [{ debugName: "ratio" }] : []));
|
|
6969
|
+
objectPosition = input('center', ...(ngDevMode ? [{ debugName: "objectPosition" }] : []));
|
|
6945
6970
|
fit = input('cover', ...(ngDevMode ? [{ debugName: "fit" }] : []));
|
|
6946
|
-
align = input('center', ...(ngDevMode ? [{ debugName: "align" }] : []));
|
|
6947
6971
|
radius = input('inherit', ...(ngDevMode ? [{ debugName: "radius" }] : []));
|
|
6972
|
+
align = input('center', ...(ngDevMode ? [{ debugName: "align" }] : []));
|
|
6973
|
+
padding = input('md', ...(ngDevMode ? [{ debugName: "padding" }] : []));
|
|
6974
|
+
height = input(null, ...(ngDevMode ? [{ debugName: "height" }] : []));
|
|
6975
|
+
minHeight = input(null, ...(ngDevMode ? [{ debugName: "minHeight" }] : []));
|
|
6976
|
+
maxHeight = input(null, ...(ngDevMode ? [{ debugName: "maxHeight" }] : []));
|
|
6977
|
+
shadow = input(null, ...(ngDevMode ? [{ debugName: "shadow" }] : []));
|
|
6978
|
+
background = input(null, ...(ngDevMode ? [{ debugName: "background" }] : []));
|
|
6979
|
+
foreground = input(null, ...(ngDevMode ? [{ debugName: "foreground" }] : []));
|
|
6980
|
+
borderColor = input(null, ...(ngDevMode ? [{ debugName: "borderColor" }] : []));
|
|
6981
|
+
overlayInset = input(null, ...(ngDevMode ? [{ debugName: "overlayInset" }] : []));
|
|
6982
|
+
overlayPosition = input('top-end', ...(ngDevMode ? [{ debugName: "overlayPosition" }] : []));
|
|
6948
6983
|
loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute });
|
|
6949
6984
|
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
|
|
6950
|
-
normalizedSrc = computed(() => this.normalize(this.src()), ...(ngDevMode ? [{ debugName: "normalizedSrc" }] : []));
|
|
6951
|
-
normalizedAlt = computed(() => this.normalize(this.alt()), ...(ngDevMode ? [{ debugName: "normalizedAlt" }] : []));
|
|
6952
6985
|
showImage = computed(() => {
|
|
6953
6986
|
return !this.loading()
|
|
6954
6987
|
&& this.variant() === 'image'
|
|
6955
6988
|
&& !!this.normalizedSrc();
|
|
6956
6989
|
}, ...(ngDevMode ? [{ debugName: "showImage" }] : []));
|
|
6990
|
+
resolvedCustomRatio = computed(() => {
|
|
6991
|
+
return this.ratio() === 'custom' ? this.normalizedCustomRatio() : '';
|
|
6992
|
+
}, ...(ngDevMode ? [{ debugName: "resolvedCustomRatio" }] : []));
|
|
6993
|
+
normalizedSrc = computed(() => this.normalize(this.src()), ...(ngDevMode ? [{ debugName: "normalizedSrc" }] : []));
|
|
6994
|
+
normalizedAlt = computed(() => this.normalize(this.alt()), ...(ngDevMode ? [{ debugName: "normalizedAlt" }] : []));
|
|
6995
|
+
normalizedShadow = computed(() => this.normalize(this.shadow()), ...(ngDevMode ? [{ debugName: "normalizedShadow" }] : []));
|
|
6996
|
+
normalizedHeight = computed(() => this.normalize(this.height()), ...(ngDevMode ? [{ debugName: "normalizedHeight" }] : []));
|
|
6997
|
+
normalizedMinHeight = computed(() => this.normalize(this.minHeight()), ...(ngDevMode ? [{ debugName: "normalizedMinHeight" }] : []));
|
|
6998
|
+
normalizedMaxHeight = computed(() => this.normalize(this.maxHeight()), ...(ngDevMode ? [{ debugName: "normalizedMaxHeight" }] : []));
|
|
6999
|
+
normalizedBackground = computed(() => this.normalize(this.background()), ...(ngDevMode ? [{ debugName: "normalizedBackground" }] : []));
|
|
7000
|
+
normalizedForeground = computed(() => this.normalize(this.foreground()), ...(ngDevMode ? [{ debugName: "normalizedForeground" }] : []));
|
|
7001
|
+
normalizedBorderColor = computed(() => this.normalize(this.borderColor()), ...(ngDevMode ? [{ debugName: "normalizedBorderColor" }] : []));
|
|
7002
|
+
normalizedCustomRatio = computed(() => this.normalize(this.customRatio()), ...(ngDevMode ? [{ debugName: "normalizedCustomRatio" }] : []));
|
|
7003
|
+
normalizedOverlayInset = computed(() => this.normalize(this.overlayInset()), ...(ngDevMode ? [{ debugName: "normalizedOverlayInset" }] : []));
|
|
6957
7004
|
normalize(value) {
|
|
6958
7005
|
return String(value ?? '').trim();
|
|
6959
7006
|
}
|
|
6960
7007
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisCardMedia, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6961
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisCardMedia, isStandalone: true, selector: "solaris-card-media", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, ratio: { classPropertyName: "ratio", publicName: "ratio", isSignal: true, isRequired: false, transformFunction: null }, fit: { classPropertyName: "fit", publicName: "fit", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"solaris-card-media\" [class.is-loading]=\"loading()\" [class.is-disabled]=\"disabled()\" [attr.data-variant]=\"variant()\"\r\n [attr.data-ratio]=\"ratio()\" [attr.data-align]=\"align()\" [attr.data-radius]=\"radius()\" [style.--solaris-card-media-fit]=\"fit()\">\r\n <div class=\"solaris-card-media__surface\">\r\n @if (loading()) {\r\n <span class=\"solaris-card-media__skeleton\" aria-hidden=\"true\"></span>\r\n } @else if (showImage()) {\r\n <img class=\"solaris-card-media__image\" [src]=\"normalizedSrc()\" [alt]=\"normalizedAlt()\" decoding=\"async\">\r\n } @else {\r\n <div class=\"solaris-card-media__content\">\r\n <ng-content></ng-content>\r\n </div>\r\n }\r\n\r\n <div class=\"solaris-card-media__overlay\">\r\n <ng-content select=\"[solaris-card-media-overlay]\"></ng-content>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;min-inline-size:0}.solaris-card-media{--solaris-card-media-bg: var(--solaris-color-surface-2);--solaris-card-media-border: color-mix( in srgb, var(--solaris-color-border) 78%, transparent );--solaris-card-media-radius: inherit;--solaris-card-media-fit: cover;--solaris-card-media-shadow: none;--solaris-card-media-min-height: 6rem;position:relative;display:block;min-inline-size:0}.solaris-card-media__surface{position:relative;overflow:hidden;display:grid;place-items:center;min-inline-size:0;min-block-size:var(--solaris-card-media-min-height);background:var(--solaris-card-media-bg);border:1px solid var(--solaris-card-media-border);border-radius:var(--solaris-card-media-radius);box-shadow:var(--solaris-card-media-shadow)}.solaris-card-media[data-ratio=auto] .solaris-card-media__surface{aspect-ratio:auto}.solaris-card-media[data-ratio=\"1:1\"] .solaris-card-media__surface{aspect-ratio:1/1}.solaris-card-media[data-ratio=\"4:3\"] .solaris-card-media__surface{aspect-ratio:4/3}.solaris-card-media[data-ratio=\"16:9\"] .solaris-card-media__surface{aspect-ratio:16/9}.solaris-card-media[data-ratio=\"21:9\"] .solaris-card-media__surface{aspect-ratio:21/9}.solaris-card-media[data-radius=none]{--solaris-card-media-radius: 0}.solaris-card-media[data-radius=sm]{--solaris-card-media-radius: var(--solaris-radius-sm)}.solaris-card-media[data-radius=md]{--solaris-card-media-radius: var(--solaris-radius-md)}.solaris-card-media[data-radius=lg]{--solaris-card-media-radius: var(--solaris-radius-lg)}.solaris-card-media[data-radius=inherit]{--solaris-card-media-radius: inherit}.solaris-card-media__image{inline-size:100%;block-size:100%;display:block;object-fit:var(--solaris-card-media-fit)}.solaris-card-media__content{inline-size:100%;block-size:100%;min-inline-size:0;display:flex;padding:var(--solaris-space-4)}.solaris-card-media[data-align=start] .solaris-card-media__content{align-items:flex-start;justify-content:flex-start}.solaris-card-media[data-align=center] .solaris-card-media__content{align-items:center;justify-content:center}.solaris-card-media[data-align=end] .solaris-card-media__content{align-items:flex-end;justify-content:flex-end}.solaris-card-media__overlay{position:absolute;inset-block-start:var(--solaris-space-3);inset-inline-end:var(--solaris-space-3);z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:var(--solaris-space-2)}.solaris-card-media__overlay:empty{display:none}.solaris-card-media__skeleton{inline-size:100%;block-size:100%;display:block;background:linear-gradient(90deg,color-mix(in srgb,var(--solaris-color-surface-2) 72%,transparent),color-mix(in srgb,white 18%,var(--solaris-color-surface-2)),color-mix(in srgb,var(--solaris-color-surface-2) 72%,transparent));background-size:200% 100%;animation:solaris-card-media-shimmer 1.2s linear infinite}.solaris-card-media.is-disabled{opacity:.58}.solaris-card-media.is-disabled .solaris-card-media__surface{filter:grayscale(.08)}@keyframes solaris-card-media-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7008
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisCardMedia, isStandalone: true, selector: "solaris-card-media", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, customRatio: { classPropertyName: "customRatio", publicName: "customRatio", isSignal: true, isRequired: false, transformFunction: null }, ratio: { classPropertyName: "ratio", publicName: "ratio", isSignal: true, isRequired: false, transformFunction: null }, objectPosition: { classPropertyName: "objectPosition", publicName: "objectPosition", isSignal: true, isRequired: false, transformFunction: null }, fit: { classPropertyName: "fit", publicName: "fit", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, foreground: { classPropertyName: "foreground", publicName: "foreground", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, overlayInset: { classPropertyName: "overlayInset", publicName: "overlayInset", isSignal: true, isRequired: false, transformFunction: null }, overlayPosition: { classPropertyName: "overlayPosition", publicName: "overlayPosition", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"solaris-card-media\" [class.is-loading]=\"loading()\" [class.is-disabled]=\"disabled()\" [attr.data-variant]=\"variant()\"\r\n [attr.data-appearance]=\"appearance()\" [attr.data-color]=\"color()\" [attr.data-ratio]=\"ratio()\" [attr.data-align]=\"align()\"\r\n [attr.data-radius]=\"radius()\" [attr.data-padding]=\"padding()\" [attr.data-overlay-position]=\"overlayPosition()\"\r\n [style.--solaris-card-media-fit]=\"fit()\" [style.--solaris-card-media-object-position]=\"objectPosition()\"\r\n [style.--solaris-card-media-custom-ratio]=\"resolvedCustomRatio() || null\"\r\n [style.--solaris-card-media-bg-override]=\"normalizedBackground() || null\"\r\n [style.--solaris-card-media-fg-override]=\"normalizedForeground() || null\"\r\n [style.--solaris-card-media-border-override]=\"normalizedBorderColor() || null\"\r\n [style.--solaris-card-media-shadow-override]=\"normalizedShadow() || null\"\r\n [style.--solaris-card-media-height]=\"normalizedHeight() || null\"\r\n [style.--solaris-card-media-min-height-override]=\"normalizedMinHeight() || null\"\r\n [style.--solaris-card-media-max-height]=\"normalizedMaxHeight() || null\"\r\n [style.--solaris-card-media-overlay-inset]=\"normalizedOverlayInset() || null\">\r\n\r\n <div class=\"solaris-card-media__surface\">\r\n @if (loading()) {\r\n <span class=\"solaris-card-media__skeleton\" aria-hidden=\"true\"></span>\r\n } @else if (showImage()) {\r\n <img class=\"solaris-card-media__image\" [src]=\"normalizedSrc()\" [alt]=\"normalizedAlt()\" decoding=\"async\">\r\n } @else {\r\n <div class=\"solaris-card-media__content\">\r\n <ng-content></ng-content>\r\n </div>\r\n }\r\n\r\n <div class=\"solaris-card-media__overlay\">\r\n <ng-content select=\"[solaris-card-media-overlay]\"></ng-content>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;min-inline-size:0}.solaris-card-media{--solaris-card-media-fg: var(--solaris-color-text);--solaris-card-media-bg: var(--solaris-color-surface-2);--solaris-card-media-border: color-mix( in srgb, var(--solaris-color-border) 78%, transparent );--solaris-card-media-tone: var(--solaris-color-surface-2);--solaris-card-media-tone-strong: var(--solaris-color-text);--solaris-card-media-tone-contrast: var(--solaris-color-text);--solaris-card-media-tone-border: var(--solaris-color-border);--solaris-card-media-tone-gradient: linear-gradient( 135deg, var(--solaris-color-surface) 0%, var(--solaris-color-surface-2) 100% );--solaris-card-media-fit: cover;--solaris-card-media-shadow: none;--solaris-card-media-radius: inherit;--solaris-card-media-object-position: center;--solaris-card-media-min-height: 6rem;--solaris-card-media-padding: var(--solaris-space-4);--solaris-card-media-overlay-inset: var(--solaris-space-3);display:block;position:relative;min-inline-size:0}.solaris-card-media[data-color=neutral]{--solaris-card-media-tone: var(--solaris-color-surface-2);--solaris-card-media-tone-strong: var(--solaris-color-text);--solaris-card-media-tone-contrast: var(--solaris-color-text);--solaris-card-media-tone-border: var(--solaris-color-border);--solaris-card-media-tone-gradient: linear-gradient( 135deg, var(--solaris-color-surface) 0%, var(--solaris-color-surface-2) 100% )}.solaris-card-media[data-color=primary]{--solaris-card-media-tone: var(--solaris-color-primary);--solaris-card-media-tone-strong: var(--solaris-color-primary-shade);--solaris-card-media-tone-contrast: var(--solaris-color-primary-contrast);--solaris-card-media-tone-border: color-mix( in srgb, var(--solaris-color-primary) 48%, var(--solaris-color-border) );--solaris-card-media-tone-gradient: var(--solaris-color-gradient)}.solaris-card-media[data-color=success]{--solaris-card-media-tone: var(--solaris-color-success);--solaris-card-media-tone-strong: var(--solaris-color-success);--solaris-card-media-tone-contrast: var(--solaris-color-primary-contrast);--solaris-card-media-tone-border: color-mix( in srgb, var(--solaris-color-success) 48%, var(--solaris-color-border) );--solaris-card-media-tone-gradient: linear-gradient( 135deg, var(--solaris-color-success) 0%, color-mix(in srgb, var(--solaris-color-success) 68%, var(--solaris-color-text)) 100% )}.solaris-card-media[data-color=warning]{--solaris-card-media-tone: var(--solaris-color-warning);--solaris-card-media-tone-strong: var(--solaris-color-warning);--solaris-card-media-tone-contrast: var(--solaris-color-primary-contrast);--solaris-card-media-tone-border: color-mix( in srgb, var(--solaris-color-warning) 48%, var(--solaris-color-border) );--solaris-card-media-tone-gradient: linear-gradient( 135deg, var(--solaris-color-warning) 0%, color-mix(in srgb, var(--solaris-color-warning) 68%, var(--solaris-color-text)) 100% )}.solaris-card-media[data-color=error]{--solaris-card-media-tone: var(--solaris-color-error);--solaris-card-media-tone-strong: var(--solaris-color-error);--solaris-card-media-tone-contrast: var(--solaris-color-primary-contrast);--solaris-card-media-tone-border: color-mix( in srgb, var(--solaris-color-error) 48%, var(--solaris-color-border) );--solaris-card-media-tone-gradient: linear-gradient( 135deg, var(--solaris-color-error) 0%, color-mix(in srgb, var(--solaris-color-error) 68%, var(--solaris-color-text)) 100% )}.solaris-card-media[data-color=info]{--solaris-card-media-tone: var(--solaris-color-info);--solaris-card-media-tone-strong: var(--solaris-color-info);--solaris-card-media-tone-contrast: var(--solaris-color-primary-contrast);--solaris-card-media-tone-border: color-mix( in srgb, var(--solaris-color-info) 48%, var(--solaris-color-border) );--solaris-card-media-tone-gradient: linear-gradient( 135deg, var(--solaris-color-info) 0%, color-mix(in srgb, var(--solaris-color-info) 68%, var(--solaris-color-text)) 100% )}.solaris-card-media[data-color=custom]{--solaris-card-media-tone: var(--solaris-card-media-bg-override, var(--solaris-color-surface-2));--solaris-card-media-tone-strong: var(--solaris-card-media-fg-override, var(--solaris-color-text));--solaris-card-media-tone-contrast: var(--solaris-card-media-fg-override, var(--solaris-color-text));--solaris-card-media-tone-border: var(--solaris-card-media-border-override, var(--solaris-color-border))}.solaris-card-media[data-appearance=solid]{--solaris-card-media-fg: var(--solaris-card-media-tone-contrast);--solaris-card-media-bg: var(--solaris-card-media-tone);--solaris-card-media-border: color-mix( in srgb, var(--solaris-card-media-tone) 54%, var(--solaris-color-border) );--solaris-card-media-shadow: none}.solaris-card-media[data-appearance=soft]{--solaris-card-media-fg: var(--solaris-card-media-tone-strong);--solaris-card-media-bg: color-mix( in srgb, var(--solaris-card-media-tone) 13%, var(--solaris-color-surface) );--solaris-card-media-border: color-mix( in srgb, var(--solaris-card-media-tone) 24%, var(--solaris-color-border) );--solaris-card-media-shadow: none}.solaris-card-media[data-appearance=outline]{--solaris-card-media-fg: var(--solaris-card-media-tone-strong);--solaris-card-media-bg: transparent;--solaris-card-media-border: color-mix( in srgb, var(--solaris-card-media-tone) 58%, var(--solaris-color-border) );--solaris-card-media-shadow: none}.solaris-card-media[data-appearance=ghost]{--solaris-card-media-fg: var(--solaris-card-media-tone-strong);--solaris-card-media-bg: transparent;--solaris-card-media-border: transparent;--solaris-card-media-shadow: none}.solaris-card-media[data-appearance=glass]{--solaris-card-media-fg: var(--solaris-color-text);--solaris-card-media-bg: color-mix( in srgb, var(--solaris-card-media-tone) 13%, transparent );--solaris-card-media-border: color-mix( in srgb, var(--solaris-color-surface) 34%, var(--solaris-color-border) );--solaris-card-media-shadow: var(--solaris-shadow-sm)}.solaris-card-media[data-appearance=elevated]{--solaris-card-media-fg: var(--solaris-color-text);--solaris-card-media-bg: color-mix( in srgb, var(--solaris-card-media-tone) 8%, var(--solaris-color-surface) );--solaris-card-media-border: color-mix( in srgb, var(--solaris-card-media-tone) 18%, var(--solaris-color-border) );--solaris-card-media-shadow: var(--solaris-shadow-md)}.solaris-card-media[data-appearance=gradient]{--solaris-card-media-fg: var(--solaris-card-media-tone-contrast);--solaris-card-media-bg: var(--solaris-card-media-tone-gradient);--solaris-card-media-border: color-mix( in srgb, var(--solaris-card-media-tone) 42%, transparent );--solaris-card-media-shadow: none}.solaris-card-media[data-color=neutral][data-appearance=solid]{--solaris-card-media-fg: var(--solaris-color-text);--solaris-card-media-bg: var(--solaris-color-surface-2);--solaris-card-media-border: color-mix( in srgb, var(--solaris-color-border) 78%, transparent )}.solaris-card-media[data-color=neutral][data-appearance=gradient]{--solaris-card-media-fg: var(--solaris-color-text);--solaris-card-media-bg: linear-gradient( 135deg, var(--solaris-color-surface) 0%, var(--solaris-color-surface-2) 100% )}.solaris-card-media__surface{display:grid;overflow:hidden;position:relative;isolation:isolate;min-inline-size:0;place-items:center;block-size:var(--solaris-card-media-height, auto);max-block-size:var(--solaris-card-media-max-height, none);min-block-size:var(--solaris-card-media-min-height-override, var(--solaris-card-media-min-height));border-radius:var(--solaris-card-media-radius);color:var(--solaris-card-media-fg-override, var(--solaris-card-media-fg));background:var(--solaris-card-media-bg-override, var(--solaris-card-media-bg));box-shadow:var(--solaris-card-media-shadow-override, var(--solaris-card-media-shadow));border:1px solid var(--solaris-card-media-border-override, var(--solaris-card-media-border))}.solaris-card-media[data-appearance=glass] .solaris-card-media__surface{backdrop-filter:blur(1.4rem) saturate(1.35);-webkit-backdrop-filter:blur(1.4rem) saturate(1.35)}.solaris-card-media[data-appearance=glass] .solaris-card-media__surface:before{content:\"\";position:absolute;inset:0;z-index:var(--solaris-z-base);pointer-events:none;background:linear-gradient(135deg,color-mix(in srgb,var(--solaris-color-surface) 24%,transparent) 0%,transparent 48%)}.solaris-card-media[data-appearance=gradient] .solaris-card-media__surface:before{content:\"\";position:absolute;inset:0;z-index:var(--solaris-z-base);pointer-events:none;background:radial-gradient(circle at top right,color-mix(in srgb,var(--solaris-color-surface) 28%,transparent) 0%,transparent 42%)}.solaris-card-media[data-ratio=auto] .solaris-card-media__surface{aspect-ratio:auto}.solaris-card-media[data-ratio=none] .solaris-card-media__surface{aspect-ratio:auto;min-block-size:var(--solaris-card-media-min-height-override, 0)}.solaris-card-media[data-ratio=\"1:1\"] .solaris-card-media__surface{aspect-ratio:1/1}.solaris-card-media[data-ratio=\"3:2\"] .solaris-card-media__surface{aspect-ratio:3/2}.solaris-card-media[data-ratio=\"4:3\"] .solaris-card-media__surface{aspect-ratio:4/3}.solaris-card-media[data-ratio=\"16:9\"] .solaris-card-media__surface{aspect-ratio:16/9}.solaris-card-media[data-ratio=\"21:9\"] .solaris-card-media__surface{aspect-ratio:21/9}.solaris-card-media[data-ratio=\"9:16\"] .solaris-card-media__surface{aspect-ratio:9/16}.solaris-card-media[data-ratio=\"3:4\"] .solaris-card-media__surface{aspect-ratio:3/4}.solaris-card-media[data-ratio=\"2:3\"] .solaris-card-media__surface{aspect-ratio:2/3}.solaris-card-media[data-ratio=custom] .solaris-card-media__surface{aspect-ratio:var(--solaris-card-media-custom-ratio, auto)}.solaris-card-media[data-radius=none]{--solaris-card-media-radius: var(--solaris-radius-none)}.solaris-card-media[data-radius=sm]{--solaris-card-media-radius: var(--solaris-radius-sm)}.solaris-card-media[data-radius=md]{--solaris-card-media-radius: var(--solaris-radius-md)}.solaris-card-media[data-radius=lg],.solaris-card-media[data-radius=xl],.solaris-card-media[data-radius=\"2xl\"]{--solaris-card-media-radius: var(--solaris-radius-lg)}.solaris-card-media[data-radius=full]{--solaris-card-media-radius: var(--solaris-radius-full)}.solaris-card-media[data-radius=inherit]{--solaris-card-media-radius: inherit}.solaris-card-media[data-padding=none]{--solaris-card-media-padding: var(--solaris-space-0)}.solaris-card-media[data-padding=xs]{--solaris-card-media-padding: var(--solaris-space-2)}.solaris-card-media[data-padding=sm]{--solaris-card-media-padding: var(--solaris-space-3)}.solaris-card-media[data-padding=md]{--solaris-card-media-padding: var(--solaris-space-4)}.solaris-card-media[data-padding=lg]{--solaris-card-media-padding: var(--solaris-space-6)}.solaris-card-media[data-padding=xl]{--solaris-card-media-padding: var(--solaris-space-8)}.solaris-card-media__image{inline-size:100%;block-size:100%;display:block;position:relative;z-index:var(--solaris-z-base);object-fit:var(--solaris-card-media-fit);object-position:var(--solaris-card-media-object-position)}.solaris-card-media__content{inline-size:100%;block-size:100%;min-inline-size:0;display:flex;position:relative;z-index:var(--solaris-z-raised);padding:var(--solaris-card-media-padding)}.solaris-card-media[data-align=start] .solaris-card-media__content{align-items:flex-start;justify-content:flex-start}.solaris-card-media[data-align=center] .solaris-card-media__content{align-items:center;justify-content:center}.solaris-card-media[data-align=end] .solaris-card-media__content{align-items:flex-end;justify-content:flex-end}.solaris-card-media__overlay{position:absolute;z-index:var(--solaris-z-raised);transform:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--solaris-space-2)}.solaris-card-media__overlay:empty{display:none}.solaris-card-media[data-overlay-position=top-start] .solaris-card-media__overlay{inset-block-start:var(--solaris-card-media-overlay-inset);inset-inline-start:var(--solaris-card-media-overlay-inset)}.solaris-card-media[data-overlay-position=top-center] .solaris-card-media__overlay{inset-block-start:var(--solaris-card-media-overlay-inset);inset-inline-start:50%;transform:translate(-50%)}.solaris-card-media[data-overlay-position=top-end] .solaris-card-media__overlay{inset-block-start:var(--solaris-card-media-overlay-inset);inset-inline-end:var(--solaris-card-media-overlay-inset)}.solaris-card-media[data-overlay-position=center] .solaris-card-media__overlay{inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.solaris-card-media[data-overlay-position=bottom-start] .solaris-card-media__overlay{inset-block-end:var(--solaris-card-media-overlay-inset);inset-inline-start:var(--solaris-card-media-overlay-inset)}.solaris-card-media[data-overlay-position=bottom-center] .solaris-card-media__overlay{inset-block-end:var(--solaris-card-media-overlay-inset);inset-inline-start:50%;transform:translate(-50%)}.solaris-card-media[data-overlay-position=bottom-end] .solaris-card-media__overlay{inset-block-end:var(--solaris-card-media-overlay-inset);inset-inline-end:var(--solaris-card-media-overlay-inset)}.solaris-card-media__skeleton{inline-size:100%;block-size:100%;display:block;position:relative;z-index:var(--solaris-z-base);background:linear-gradient(90deg,color-mix(in srgb,var(--solaris-color-surface-2) 72%,transparent),color-mix(in srgb,var(--solaris-color-surface) 72%,var(--solaris-color-surface-2)),color-mix(in srgb,var(--solaris-color-surface-2) 72%,transparent));background-size:200% 100%;animation:solaris-card-media-shimmer 1.2s linear infinite}.solaris-card-media.is-loading .solaris-card-media__surface{pointer-events:none}.solaris-card-media.is-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.solaris-card-media.is-disabled .solaris-card-media__surface{filter:grayscale(.1)}@keyframes solaris-card-media-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.solaris-card-media__skeleton{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6962
7009
|
}
|
|
6963
7010
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisCardMedia, decorators: [{
|
|
6964
7011
|
type: Component,
|
|
6965
|
-
args: [{ selector: 'solaris-card-media', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-card-media\" [class.is-loading]=\"loading()\" [class.is-disabled]=\"disabled()\" [attr.data-variant]=\"variant()\"\r\n [attr.data-ratio]=\"ratio()\" [attr.data-align]=\"align()\" [attr.data-radius]=\"radius()\" [style.--solaris-card-media-fit]=\"fit()\">\r\n <div class=\"solaris-card-media__surface\">\r\n @if (loading()) {\r\n <span class=\"solaris-card-media__skeleton\" aria-hidden=\"true\"></span>\r\n } @else if (showImage()) {\r\n <img class=\"solaris-card-media__image\" [src]=\"normalizedSrc()\" [alt]=\"normalizedAlt()\" decoding=\"async\">\r\n } @else {\r\n <div class=\"solaris-card-media__content\">\r\n <ng-content></ng-content>\r\n </div>\r\n }\r\n\r\n <div class=\"solaris-card-media__overlay\">\r\n <ng-content select=\"[solaris-card-media-overlay]\"></ng-content>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;min-inline-size:0}.solaris-card-media{--solaris-card-media-bg: var(--solaris-color-surface-2);--solaris-card-media-border: color-mix( in srgb, var(--solaris-color-border) 78%, transparent );--solaris-card-media-radius: inherit;--solaris-card-media-fit: cover;--solaris-card-media-shadow: none;--solaris-card-media-min-height: 6rem;position:relative;display:block;min-inline-size:0}.solaris-card-media__surface{position:relative;overflow:hidden;display:grid;place-items:center;min-inline-size:0;min-block-size:var(--solaris-card-media-min-height);background:var(--solaris-card-media-bg);border:1px solid var(--solaris-card-media-border);border-radius:var(--solaris-card-media-radius);box-shadow:var(--solaris-card-media-shadow)}.solaris-card-media[data-ratio=auto] .solaris-card-media__surface{aspect-ratio:auto}.solaris-card-media[data-ratio=\"1:1\"] .solaris-card-media__surface{aspect-ratio:1/1}.solaris-card-media[data-ratio=\"4:3\"] .solaris-card-media__surface{aspect-ratio:4/3}.solaris-card-media[data-ratio=\"16:9\"] .solaris-card-media__surface{aspect-ratio:16/9}.solaris-card-media[data-ratio=\"21:9\"] .solaris-card-media__surface{aspect-ratio:21/9}.solaris-card-media[data-radius=none]{--solaris-card-media-radius: 0}.solaris-card-media[data-radius=sm]{--solaris-card-media-radius: var(--solaris-radius-sm)}.solaris-card-media[data-radius=md]{--solaris-card-media-radius: var(--solaris-radius-md)}.solaris-card-media[data-radius=lg]{--solaris-card-media-radius: var(--solaris-radius-lg)}.solaris-card-media[data-radius=inherit]{--solaris-card-media-radius: inherit}.solaris-card-media__image{inline-size:100%;block-size:100%;display:block;object-fit:var(--solaris-card-media-fit)}.solaris-card-media__content{inline-size:100%;block-size:100%;min-inline-size:0;display:flex;padding:var(--solaris-space-4)}.solaris-card-media[data-align=start] .solaris-card-media__content{align-items:flex-start;justify-content:flex-start}.solaris-card-media[data-align=center] .solaris-card-media__content{align-items:center;justify-content:center}.solaris-card-media[data-align=end] .solaris-card-media__content{align-items:flex-end;justify-content:flex-end}.solaris-card-media__overlay{position:absolute;inset-block-start:var(--solaris-space-3);inset-inline-end:var(--solaris-space-3);z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:var(--solaris-space-2)}.solaris-card-media__overlay:empty{display:none}.solaris-card-media__skeleton{inline-size:100%;block-size:100%;display:block;background:linear-gradient(90deg,color-mix(in srgb,var(--solaris-color-surface-2) 72%,transparent),color-mix(in srgb,white 18%,var(--solaris-color-surface-2)),color-mix(in srgb,var(--solaris-color-surface-2) 72%,transparent));background-size:200% 100%;animation:solaris-card-media-shimmer 1.2s linear infinite}.solaris-card-media.is-disabled{opacity:.58}.solaris-card-media.is-disabled .solaris-card-media__surface{filter:grayscale(.08)}@keyframes solaris-card-media-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
|
|
6966
|
-
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], ratio: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratio", required: false }] }], fit: [{ type: i0.Input, args: [{ isSignal: true, alias: "fit", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }],
|
|
7012
|
+
args: [{ selector: 'solaris-card-media', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-card-media\" [class.is-loading]=\"loading()\" [class.is-disabled]=\"disabled()\" [attr.data-variant]=\"variant()\"\r\n [attr.data-appearance]=\"appearance()\" [attr.data-color]=\"color()\" [attr.data-ratio]=\"ratio()\" [attr.data-align]=\"align()\"\r\n [attr.data-radius]=\"radius()\" [attr.data-padding]=\"padding()\" [attr.data-overlay-position]=\"overlayPosition()\"\r\n [style.--solaris-card-media-fit]=\"fit()\" [style.--solaris-card-media-object-position]=\"objectPosition()\"\r\n [style.--solaris-card-media-custom-ratio]=\"resolvedCustomRatio() || null\"\r\n [style.--solaris-card-media-bg-override]=\"normalizedBackground() || null\"\r\n [style.--solaris-card-media-fg-override]=\"normalizedForeground() || null\"\r\n [style.--solaris-card-media-border-override]=\"normalizedBorderColor() || null\"\r\n [style.--solaris-card-media-shadow-override]=\"normalizedShadow() || null\"\r\n [style.--solaris-card-media-height]=\"normalizedHeight() || null\"\r\n [style.--solaris-card-media-min-height-override]=\"normalizedMinHeight() || null\"\r\n [style.--solaris-card-media-max-height]=\"normalizedMaxHeight() || null\"\r\n [style.--solaris-card-media-overlay-inset]=\"normalizedOverlayInset() || null\">\r\n\r\n <div class=\"solaris-card-media__surface\">\r\n @if (loading()) {\r\n <span class=\"solaris-card-media__skeleton\" aria-hidden=\"true\"></span>\r\n } @else if (showImage()) {\r\n <img class=\"solaris-card-media__image\" [src]=\"normalizedSrc()\" [alt]=\"normalizedAlt()\" decoding=\"async\">\r\n } @else {\r\n <div class=\"solaris-card-media__content\">\r\n <ng-content></ng-content>\r\n </div>\r\n }\r\n\r\n <div class=\"solaris-card-media__overlay\">\r\n <ng-content select=\"[solaris-card-media-overlay]\"></ng-content>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block;min-inline-size:0}.solaris-card-media{--solaris-card-media-fg: var(--solaris-color-text);--solaris-card-media-bg: var(--solaris-color-surface-2);--solaris-card-media-border: color-mix( in srgb, var(--solaris-color-border) 78%, transparent );--solaris-card-media-tone: var(--solaris-color-surface-2);--solaris-card-media-tone-strong: var(--solaris-color-text);--solaris-card-media-tone-contrast: var(--solaris-color-text);--solaris-card-media-tone-border: var(--solaris-color-border);--solaris-card-media-tone-gradient: linear-gradient( 135deg, var(--solaris-color-surface) 0%, var(--solaris-color-surface-2) 100% );--solaris-card-media-fit: cover;--solaris-card-media-shadow: none;--solaris-card-media-radius: inherit;--solaris-card-media-object-position: center;--solaris-card-media-min-height: 6rem;--solaris-card-media-padding: var(--solaris-space-4);--solaris-card-media-overlay-inset: var(--solaris-space-3);display:block;position:relative;min-inline-size:0}.solaris-card-media[data-color=neutral]{--solaris-card-media-tone: var(--solaris-color-surface-2);--solaris-card-media-tone-strong: var(--solaris-color-text);--solaris-card-media-tone-contrast: var(--solaris-color-text);--solaris-card-media-tone-border: var(--solaris-color-border);--solaris-card-media-tone-gradient: linear-gradient( 135deg, var(--solaris-color-surface) 0%, var(--solaris-color-surface-2) 100% )}.solaris-card-media[data-color=primary]{--solaris-card-media-tone: var(--solaris-color-primary);--solaris-card-media-tone-strong: var(--solaris-color-primary-shade);--solaris-card-media-tone-contrast: var(--solaris-color-primary-contrast);--solaris-card-media-tone-border: color-mix( in srgb, var(--solaris-color-primary) 48%, var(--solaris-color-border) );--solaris-card-media-tone-gradient: var(--solaris-color-gradient)}.solaris-card-media[data-color=success]{--solaris-card-media-tone: var(--solaris-color-success);--solaris-card-media-tone-strong: var(--solaris-color-success);--solaris-card-media-tone-contrast: var(--solaris-color-primary-contrast);--solaris-card-media-tone-border: color-mix( in srgb, var(--solaris-color-success) 48%, var(--solaris-color-border) );--solaris-card-media-tone-gradient: linear-gradient( 135deg, var(--solaris-color-success) 0%, color-mix(in srgb, var(--solaris-color-success) 68%, var(--solaris-color-text)) 100% )}.solaris-card-media[data-color=warning]{--solaris-card-media-tone: var(--solaris-color-warning);--solaris-card-media-tone-strong: var(--solaris-color-warning);--solaris-card-media-tone-contrast: var(--solaris-color-primary-contrast);--solaris-card-media-tone-border: color-mix( in srgb, var(--solaris-color-warning) 48%, var(--solaris-color-border) );--solaris-card-media-tone-gradient: linear-gradient( 135deg, var(--solaris-color-warning) 0%, color-mix(in srgb, var(--solaris-color-warning) 68%, var(--solaris-color-text)) 100% )}.solaris-card-media[data-color=error]{--solaris-card-media-tone: var(--solaris-color-error);--solaris-card-media-tone-strong: var(--solaris-color-error);--solaris-card-media-tone-contrast: var(--solaris-color-primary-contrast);--solaris-card-media-tone-border: color-mix( in srgb, var(--solaris-color-error) 48%, var(--solaris-color-border) );--solaris-card-media-tone-gradient: linear-gradient( 135deg, var(--solaris-color-error) 0%, color-mix(in srgb, var(--solaris-color-error) 68%, var(--solaris-color-text)) 100% )}.solaris-card-media[data-color=info]{--solaris-card-media-tone: var(--solaris-color-info);--solaris-card-media-tone-strong: var(--solaris-color-info);--solaris-card-media-tone-contrast: var(--solaris-color-primary-contrast);--solaris-card-media-tone-border: color-mix( in srgb, var(--solaris-color-info) 48%, var(--solaris-color-border) );--solaris-card-media-tone-gradient: linear-gradient( 135deg, var(--solaris-color-info) 0%, color-mix(in srgb, var(--solaris-color-info) 68%, var(--solaris-color-text)) 100% )}.solaris-card-media[data-color=custom]{--solaris-card-media-tone: var(--solaris-card-media-bg-override, var(--solaris-color-surface-2));--solaris-card-media-tone-strong: var(--solaris-card-media-fg-override, var(--solaris-color-text));--solaris-card-media-tone-contrast: var(--solaris-card-media-fg-override, var(--solaris-color-text));--solaris-card-media-tone-border: var(--solaris-card-media-border-override, var(--solaris-color-border))}.solaris-card-media[data-appearance=solid]{--solaris-card-media-fg: var(--solaris-card-media-tone-contrast);--solaris-card-media-bg: var(--solaris-card-media-tone);--solaris-card-media-border: color-mix( in srgb, var(--solaris-card-media-tone) 54%, var(--solaris-color-border) );--solaris-card-media-shadow: none}.solaris-card-media[data-appearance=soft]{--solaris-card-media-fg: var(--solaris-card-media-tone-strong);--solaris-card-media-bg: color-mix( in srgb, var(--solaris-card-media-tone) 13%, var(--solaris-color-surface) );--solaris-card-media-border: color-mix( in srgb, var(--solaris-card-media-tone) 24%, var(--solaris-color-border) );--solaris-card-media-shadow: none}.solaris-card-media[data-appearance=outline]{--solaris-card-media-fg: var(--solaris-card-media-tone-strong);--solaris-card-media-bg: transparent;--solaris-card-media-border: color-mix( in srgb, var(--solaris-card-media-tone) 58%, var(--solaris-color-border) );--solaris-card-media-shadow: none}.solaris-card-media[data-appearance=ghost]{--solaris-card-media-fg: var(--solaris-card-media-tone-strong);--solaris-card-media-bg: transparent;--solaris-card-media-border: transparent;--solaris-card-media-shadow: none}.solaris-card-media[data-appearance=glass]{--solaris-card-media-fg: var(--solaris-color-text);--solaris-card-media-bg: color-mix( in srgb, var(--solaris-card-media-tone) 13%, transparent );--solaris-card-media-border: color-mix( in srgb, var(--solaris-color-surface) 34%, var(--solaris-color-border) );--solaris-card-media-shadow: var(--solaris-shadow-sm)}.solaris-card-media[data-appearance=elevated]{--solaris-card-media-fg: var(--solaris-color-text);--solaris-card-media-bg: color-mix( in srgb, var(--solaris-card-media-tone) 8%, var(--solaris-color-surface) );--solaris-card-media-border: color-mix( in srgb, var(--solaris-card-media-tone) 18%, var(--solaris-color-border) );--solaris-card-media-shadow: var(--solaris-shadow-md)}.solaris-card-media[data-appearance=gradient]{--solaris-card-media-fg: var(--solaris-card-media-tone-contrast);--solaris-card-media-bg: var(--solaris-card-media-tone-gradient);--solaris-card-media-border: color-mix( in srgb, var(--solaris-card-media-tone) 42%, transparent );--solaris-card-media-shadow: none}.solaris-card-media[data-color=neutral][data-appearance=solid]{--solaris-card-media-fg: var(--solaris-color-text);--solaris-card-media-bg: var(--solaris-color-surface-2);--solaris-card-media-border: color-mix( in srgb, var(--solaris-color-border) 78%, transparent )}.solaris-card-media[data-color=neutral][data-appearance=gradient]{--solaris-card-media-fg: var(--solaris-color-text);--solaris-card-media-bg: linear-gradient( 135deg, var(--solaris-color-surface) 0%, var(--solaris-color-surface-2) 100% )}.solaris-card-media__surface{display:grid;overflow:hidden;position:relative;isolation:isolate;min-inline-size:0;place-items:center;block-size:var(--solaris-card-media-height, auto);max-block-size:var(--solaris-card-media-max-height, none);min-block-size:var(--solaris-card-media-min-height-override, var(--solaris-card-media-min-height));border-radius:var(--solaris-card-media-radius);color:var(--solaris-card-media-fg-override, var(--solaris-card-media-fg));background:var(--solaris-card-media-bg-override, var(--solaris-card-media-bg));box-shadow:var(--solaris-card-media-shadow-override, var(--solaris-card-media-shadow));border:1px solid var(--solaris-card-media-border-override, var(--solaris-card-media-border))}.solaris-card-media[data-appearance=glass] .solaris-card-media__surface{backdrop-filter:blur(1.4rem) saturate(1.35);-webkit-backdrop-filter:blur(1.4rem) saturate(1.35)}.solaris-card-media[data-appearance=glass] .solaris-card-media__surface:before{content:\"\";position:absolute;inset:0;z-index:var(--solaris-z-base);pointer-events:none;background:linear-gradient(135deg,color-mix(in srgb,var(--solaris-color-surface) 24%,transparent) 0%,transparent 48%)}.solaris-card-media[data-appearance=gradient] .solaris-card-media__surface:before{content:\"\";position:absolute;inset:0;z-index:var(--solaris-z-base);pointer-events:none;background:radial-gradient(circle at top right,color-mix(in srgb,var(--solaris-color-surface) 28%,transparent) 0%,transparent 42%)}.solaris-card-media[data-ratio=auto] .solaris-card-media__surface{aspect-ratio:auto}.solaris-card-media[data-ratio=none] .solaris-card-media__surface{aspect-ratio:auto;min-block-size:var(--solaris-card-media-min-height-override, 0)}.solaris-card-media[data-ratio=\"1:1\"] .solaris-card-media__surface{aspect-ratio:1/1}.solaris-card-media[data-ratio=\"3:2\"] .solaris-card-media__surface{aspect-ratio:3/2}.solaris-card-media[data-ratio=\"4:3\"] .solaris-card-media__surface{aspect-ratio:4/3}.solaris-card-media[data-ratio=\"16:9\"] .solaris-card-media__surface{aspect-ratio:16/9}.solaris-card-media[data-ratio=\"21:9\"] .solaris-card-media__surface{aspect-ratio:21/9}.solaris-card-media[data-ratio=\"9:16\"] .solaris-card-media__surface{aspect-ratio:9/16}.solaris-card-media[data-ratio=\"3:4\"] .solaris-card-media__surface{aspect-ratio:3/4}.solaris-card-media[data-ratio=\"2:3\"] .solaris-card-media__surface{aspect-ratio:2/3}.solaris-card-media[data-ratio=custom] .solaris-card-media__surface{aspect-ratio:var(--solaris-card-media-custom-ratio, auto)}.solaris-card-media[data-radius=none]{--solaris-card-media-radius: var(--solaris-radius-none)}.solaris-card-media[data-radius=sm]{--solaris-card-media-radius: var(--solaris-radius-sm)}.solaris-card-media[data-radius=md]{--solaris-card-media-radius: var(--solaris-radius-md)}.solaris-card-media[data-radius=lg],.solaris-card-media[data-radius=xl],.solaris-card-media[data-radius=\"2xl\"]{--solaris-card-media-radius: var(--solaris-radius-lg)}.solaris-card-media[data-radius=full]{--solaris-card-media-radius: var(--solaris-radius-full)}.solaris-card-media[data-radius=inherit]{--solaris-card-media-radius: inherit}.solaris-card-media[data-padding=none]{--solaris-card-media-padding: var(--solaris-space-0)}.solaris-card-media[data-padding=xs]{--solaris-card-media-padding: var(--solaris-space-2)}.solaris-card-media[data-padding=sm]{--solaris-card-media-padding: var(--solaris-space-3)}.solaris-card-media[data-padding=md]{--solaris-card-media-padding: var(--solaris-space-4)}.solaris-card-media[data-padding=lg]{--solaris-card-media-padding: var(--solaris-space-6)}.solaris-card-media[data-padding=xl]{--solaris-card-media-padding: var(--solaris-space-8)}.solaris-card-media__image{inline-size:100%;block-size:100%;display:block;position:relative;z-index:var(--solaris-z-base);object-fit:var(--solaris-card-media-fit);object-position:var(--solaris-card-media-object-position)}.solaris-card-media__content{inline-size:100%;block-size:100%;min-inline-size:0;display:flex;position:relative;z-index:var(--solaris-z-raised);padding:var(--solaris-card-media-padding)}.solaris-card-media[data-align=start] .solaris-card-media__content{align-items:flex-start;justify-content:flex-start}.solaris-card-media[data-align=center] .solaris-card-media__content{align-items:center;justify-content:center}.solaris-card-media[data-align=end] .solaris-card-media__content{align-items:flex-end;justify-content:flex-end}.solaris-card-media__overlay{position:absolute;z-index:var(--solaris-z-raised);transform:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--solaris-space-2)}.solaris-card-media__overlay:empty{display:none}.solaris-card-media[data-overlay-position=top-start] .solaris-card-media__overlay{inset-block-start:var(--solaris-card-media-overlay-inset);inset-inline-start:var(--solaris-card-media-overlay-inset)}.solaris-card-media[data-overlay-position=top-center] .solaris-card-media__overlay{inset-block-start:var(--solaris-card-media-overlay-inset);inset-inline-start:50%;transform:translate(-50%)}.solaris-card-media[data-overlay-position=top-end] .solaris-card-media__overlay{inset-block-start:var(--solaris-card-media-overlay-inset);inset-inline-end:var(--solaris-card-media-overlay-inset)}.solaris-card-media[data-overlay-position=center] .solaris-card-media__overlay{inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.solaris-card-media[data-overlay-position=bottom-start] .solaris-card-media__overlay{inset-block-end:var(--solaris-card-media-overlay-inset);inset-inline-start:var(--solaris-card-media-overlay-inset)}.solaris-card-media[data-overlay-position=bottom-center] .solaris-card-media__overlay{inset-block-end:var(--solaris-card-media-overlay-inset);inset-inline-start:50%;transform:translate(-50%)}.solaris-card-media[data-overlay-position=bottom-end] .solaris-card-media__overlay{inset-block-end:var(--solaris-card-media-overlay-inset);inset-inline-end:var(--solaris-card-media-overlay-inset)}.solaris-card-media__skeleton{inline-size:100%;block-size:100%;display:block;position:relative;z-index:var(--solaris-z-base);background:linear-gradient(90deg,color-mix(in srgb,var(--solaris-color-surface-2) 72%,transparent),color-mix(in srgb,var(--solaris-color-surface) 72%,var(--solaris-color-surface-2)),color-mix(in srgb,var(--solaris-color-surface-2) 72%,transparent));background-size:200% 100%;animation:solaris-card-media-shimmer 1.2s linear infinite}.solaris-card-media.is-loading .solaris-card-media__surface{pointer-events:none}.solaris-card-media.is-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.solaris-card-media.is-disabled .solaris-card-media__surface{filter:grayscale(.1)}@keyframes solaris-card-media-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.solaris-card-media__skeleton{animation:none}}\n"] }]
|
|
7013
|
+
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], customRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "customRatio", required: false }] }], ratio: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratio", required: false }] }], objectPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "objectPosition", required: false }] }], fit: [{ type: i0.Input, args: [{ isSignal: true, alias: "fit", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], foreground: [{ type: i0.Input, args: [{ isSignal: true, alias: "foreground", required: false }] }], borderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderColor", required: false }] }], overlayInset: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayInset", required: false }] }], overlayPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayPosition", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
6967
7014
|
|
|
6968
7015
|
function sanitizePhoneInput(v) {
|
|
6969
7016
|
let s = (v ?? '').replace(/[^\d+\-\s().]/g, '');
|
|
@@ -8760,5 +8807,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
8760
8807
|
* Generated bundle index. Do not edit.
|
|
8761
8808
|
*/
|
|
8762
8809
|
|
|
8763
|
-
export { ButtonGroupDirective, FieldErrorComponent, FormField, InputTextDirective, PasswordToggle, SOLARIS_CARD_GROUP, SOLARIS_CARD_SLOT_DIRECTIVES, SOLARIS_DIALOG_DATA, SOLARIS_DIALOG_STEP_DATA, SOLARIS_FORM_FIELD_CONTROLLER, SOLARIS_FORM_FIELD_FEATURES, SOLARIS_INPUT, SOLARIS_NOTIFICATION_CONFIG, SOLARIS_NOTIFICATION_DEFAULT_CONFIG, SOLARIS_NOTIFICATION_POSITIONS, SOLARIS_RADIO_GROUP, SolarisAvatar, SolarisAvatarDropdown, SolarisAvatarOverlayDirective, SolarisAvatarStack, SolarisBadge, SolarisBodyDirective, SolarisBreadcrumb, SolarisButtonDirective, SolarisCard, SolarisCardActionsDirective, SolarisCardBadgeDirective, SolarisCardDescriptionDirective, SolarisCardEyebrowDirective, SolarisCardFooterDirective, SolarisCardGroup, SolarisCardMedia, SolarisCardMediaDirective,
|
|
8810
|
+
export { ButtonGroupDirective, FieldErrorComponent, FormField, InputTextDirective, PasswordToggle, SOLARIS_CARD_GROUP, SOLARIS_CARD_SLOT_DIRECTIVES, SOLARIS_DIALOG_DATA, SOLARIS_DIALOG_STEP_DATA, SOLARIS_FORM_FIELD_CONTROLLER, SOLARIS_FORM_FIELD_FEATURES, SOLARIS_INPUT, SOLARIS_NOTIFICATION_CONFIG, SOLARIS_NOTIFICATION_DEFAULT_CONFIG, SOLARIS_NOTIFICATION_POSITIONS, SOLARIS_RADIO_GROUP, SolarisAvatar, SolarisAvatarDropdown, SolarisAvatarOverlayDirective, SolarisAvatarStack, SolarisBadge, SolarisBodyDirective, SolarisBreadcrumb, SolarisButtonDirective, SolarisCard, SolarisCardActionsDirective, SolarisCardBadgeDirective, SolarisCardDescriptionDirective, SolarisCardEyebrowDirective, SolarisCardFooterDirective, SolarisCardGroup, SolarisCardMedia, SolarisCardMediaDirective, SolarisCardMediaOverlay, SolarisCardMetaDirective, SolarisCardTitleDirective, SolarisCarousel, SolarisCarouselOverlayDirective, SolarisCarouselSlideDirective, SolarisCheckbox, SolarisColumnCellDef, SolarisColumnHeaderDef, SolarisControlBridgeDirective, SolarisDialogContainer, SolarisDialogRef, SolarisDialogService, SolarisDialogStepsContainer, SolarisDivider, SolarisDrawer, SolarisDrawerFooterDirective, SolarisDrawerHeaderDirective, SolarisDropdownContent, SolarisDropdownContentPanelDirective, SolarisDropdownContentRegistry, SolarisDropdownContentTriggerDirective, SolarisEmailDirective, SolarisFilterBar, SolarisFilterChip, SolarisFilterField, SolarisFilterPanel, SolarisFilterPanelFooterDirective, SolarisFloatingOverlayService, SolarisFooterDirective, SolarisFormFieldController, SolarisHeaderDirective, SolarisIdGenerator, SolarisLoading, SolarisLoadingOverlay, SolarisNotificationCenterComponent, SolarisNotificationHostComponent, SolarisNotificationIntlService, SolarisNotificationItemComponent, SolarisNotificationService, SolarisPage, SolarisPageHeader, SolarisPageHeaderBreadcrumbDirective, SolarisPageHeaderDescriptionDirective, SolarisPageHeaderTitle, SolarisPageHeaderTitleDirective, SolarisPasswordDirective, SolarisPhoneInput, SolarisPopover, SolarisPopoverPanelDirective, SolarisPopoverTriggerDirective, SolarisPrefixDirective, SolarisPresenceAvatar, SolarisRadio, SolarisRadioGroup, SolarisRichTooltipDirective, SolarisRichTooltipPanel, SolarisRowComponent, SolarisSectionComponent, SolarisSelect, SolarisSelectionCard, SolarisStepper, SolarisStepperItem, SolarisSuffixDirective, SolarisTab, SolarisTable, SolarisTableColumn, SolarisTableFilters, SolarisTableSkeleton, SolarisTabs, SolarisTooltipDirective, SolarisTooltipPanel, computeFloatingPosition, computePopoverPosition, provideSolarisNotifications, repositionTooltipOverlay, uniqueId };
|
|
8764
8811
|
//# sourceMappingURL=educarehq-solaris-components.mjs.map
|