@educarehq/solaris-ui 0.15.0 → 0.16.0
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.
|
@@ -2573,6 +2573,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2573
2573
|
class SolarisAlertComponent {
|
|
2574
2574
|
translateService = inject(SolarisTranslateService);
|
|
2575
2575
|
themeService = inject(SolarisThemeService);
|
|
2576
|
+
textPosition = input('start', ...(ngDevMode ? [{ debugName: "textPosition" }] : /* istanbul ignore next */ []));
|
|
2576
2577
|
appearance = input('tonal', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
2577
2578
|
variant = input('info', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
2578
2579
|
radius = input('md', ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
|
|
@@ -2644,21 +2645,22 @@ class SolarisAlertComponent {
|
|
|
2644
2645
|
this.dismissed.emit();
|
|
2645
2646
|
}
|
|
2646
2647
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2647
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisAlertComponent, isStandalone: true, selector: "solaris-alert", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, live: { classPropertyName: "live", publicName: "live", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, hasTitle: { classPropertyName: "hasTitle", publicName: "hasTitle", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, closeLabelKey: { classPropertyName: "closeLabelKey", publicName: "closeLabelKey", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { properties: { "attr.role": "liveRole()", "attr.data-variant": "variant()", "attr.aria-live": "ariaLive()", "attr.data-radius": "radius()", "attr.data-density": "effectiveDensity()", "attr.data-appearance": "appearance()", "attr.data-closable": "closable() ? \"\" : null", "attr.data-has-title": "hasTitle() ? \"\" : null" } }, ngImport: i0, template: "@if (showIcon()) {\n <div class=\"solaris-alert__icon\">\n <solaris-icon [name]=\"iconName()\" [decorative]=\"true\" />\n </div>\n}\n\n<div class=\"solaris-alert__content\">\n <ng-content />\n</div>\n\n@if (closable()) {\n <div class=\"solaris-alert__close-slot\">\n <button\n type=\"button\"\n class=\"solaris-alert__close\"\n [attr.aria-label]=\"closeButtonLabel()\"\n (click)=\"handleClose()\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n </div>\n}\n", styles: [":host{--solaris-alert-icon-offset: -1px;--solaris-alert-close-offset: 0px;--solaris-alert-close-background: transparent;--solaris-alert-gap: var(--solaris-spacing-3);--solaris-alert-color: var(--solaris-info-text);--solaris-alert-radius: var(--solaris-radius-md);--solaris-alert-padding: var(--solaris-spacing-4);--solaris-alert-icon-color: var(--solaris-info-base);--solaris-alert-close-size: var(--solaris-spacing-4);--solaris-alert-content-gap: var(--solaris-spacing-1);--solaris-alert-actions-gap: var(--solaris-spacing-2);--solaris-alert-close-color: var(--solaris-text-muted);--solaris-alert-icon-size: var(--solaris-font-size-lg);--solaris-alert-background: var(--solaris-info-surface);--solaris-alert-title-color: var(--solaris-text-strong);--solaris-alert-border-color: var(--solaris-info-border);--solaris-alert-close-hover-background: #0000000f;--solaris-alert-border-width: var(--solaris-border-width-sm);--solaris-alert-close-icon-size: var(--solaris-font-size-md);--solaris-alert-description-color: var(--solaris-text-default);--solaris-alert-first-line-height: var(--solaris-line-height-md);--solaris-alert-first-line-font-size: var(--solaris-font-size-sm);display:flex;box-sizing:border-box;align-items:flex-start;gap:var(--solaris-alert-gap);color:var(--solaris-alert-color);padding:var(--solaris-alert-padding);border-radius:var(--solaris-alert-radius);background:var(--solaris-alert-background);border:var(--solaris-alert-border-width) solid var(--solaris-alert-border-color)}:host([data-has-title]){--solaris-alert-icon-offset: 0px;--solaris-alert-close-offset: 0px;--solaris-alert-first-line-height: var(--solaris-line-height-sm);--solaris-alert-first-line-font-size: var(--solaris-font-size-md)}.solaris-alert__icon{display:grid;flex-shrink:0;position:relative;place-items:center;transform:translateY(-50%);width:var(--solaris-alert-icon-size);height:var(--solaris-alert-icon-size);color:var(--solaris-alert-icon-color);line-height:var(--solaris-alert-first-line-height);font-size:var(--solaris-alert-first-line-font-size);inset-block-start:calc(.5lh + var(--solaris-alert-icon-offset))}.solaris-alert__icon solaris-icon,.solaris-alert__icon svg{display:block;width:var(--solaris-alert-icon-size);height:var(--solaris-alert-icon-size)}.solaris-alert__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--solaris-alert-content-gap);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-alert__close:hover{background:var(--solaris-alert-close-hover-background)}.solaris-alert__close:focus-visible{outline-offset:2px;outline:2px solid var(--solaris-primary-base)}.solaris-alert__close{all:unset;display:grid;flex-shrink:0;cursor:pointer;position:relative;place-items:center;box-sizing:border-box;inset-block-start:.5lh;transform:translateY(-50%);width:var(--solaris-alert-close-size);height:var(--solaris-alert-close-size);border-radius:var(--solaris-radius-sm);color:var(--solaris-alert-close-color);background:var(--solaris-alert-close-background);line-height:var(--solaris-alert-first-line-height);font-size:var(--solaris-alert-first-line-font-size)}.solaris-alert__close solaris-icon,.solaris-alert__close svg{display:block;width:var(--solaris-alert-close-icon-size);height:var(--solaris-alert-close-icon-size)}::ng-deep .solaris-alert-title{margin:0;font-size:var(--solaris-font-size-md);color:var(--solaris-alert-title-color);line-height:var(--solaris-line-height-sm);font-weight:var(--solaris-font-weight-semibold)}::ng-deep .solaris-alert-description{margin:0;font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md);color:var(--solaris-alert-description-color)}::ng-deep .solaris-alert-actions{display:flex;flex-wrap:wrap;gap:var(--solaris-alert-actions-gap);margin-block-start:var(--solaris-spacing-2)}::ng-deep .solaris-alert-title+.solaris-alert-description{margin-block-start:var(--solaris-alert-content-gap)}::ng-deep .solaris-alert__content>:first-child:not(.solaris-alert-title){margin-block-start:0}:host([data-radius=sm]){--solaris-alert-radius: var(--solaris-radius-sm)}:host([data-radius=md]){--solaris-alert-radius: var(--solaris-radius-md)}:host([data-radius=lg]){--solaris-alert-radius: var(--solaris-radius-lg)}:host([data-radius=xl]){--solaris-alert-radius: var(--solaris-radius-xl)}:host([data-density=compact]){--solaris-alert-gap: var(--solaris-density-gap-md);--solaris-alert-padding: var(--solaris-density-padding-md);--solaris-alert-content-gap: var(--solaris-density-gap-md);--solaris-alert-actions-gap: var(--solaris-density-gap-md);--solaris-alert-close-size: var(--solaris-density-min-height)}:host([data-density=normal]){--solaris-alert-gap: var(--solaris-density-gap-md);--solaris-alert-padding: var(--solaris-density-padding-md);--solaris-alert-content-gap: var(--solaris-density-gap-md);--solaris-alert-actions-gap: var(--solaris-density-gap-md);--solaris-alert-close-size: var(--solaris-density-min-height)}:host([data-density=comfortable]){--solaris-alert-gap: var(--solaris-density-gap-md);--solaris-alert-padding: var(--solaris-density-padding-lg);--solaris-alert-content-gap: var(--solaris-density-gap-md);--solaris-alert-actions-gap: var(--solaris-density-gap-md);--solaris-alert-close-size: var(--solaris-density-min-height)}:host([data-variant=neutral][data-appearance=tonal]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-text-muted);--solaris-alert-background: var(--solaris-surface-muted);--solaris-alert-border-color: var(--solaris-border-default)}:host([data-variant=neutral][data-appearance=outline]){--solaris-alert-background: transparent;--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-text-muted);--solaris-alert-border-color: var(--solaris-border-default)}:host([data-variant=neutral][data-appearance=surface]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-text-muted);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-border-color: var(--solaris-border-subtle)}:host([data-variant=neutral][data-appearance=solid]){--solaris-alert-border-color: transparent;--solaris-alert-color: var(--solaris-text-strong);--solaris-alert-icon-color: var(--solaris-text-strong);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-close-color: var(--solaris-text-strong);--solaris-alert-title-color: var(--solaris-text-strong);--solaris-alert-description-color: var(--solaris-text-inverse);--solaris-alert-close-hover-background: #ffffff1f}:host([data-variant=info][data-appearance=tonal]){--solaris-alert-color: var(--solaris-info-text);--solaris-alert-icon-color: var(--solaris-info-base);--solaris-alert-background: var(--solaris-info-surface);--solaris-alert-border-color: var(--solaris-info-border)}:host([data-variant=info][data-appearance=outline]){--solaris-alert-background: transparent;--solaris-alert-color: var(--solaris-info-text);--solaris-alert-icon-color: var(--solaris-info-base);--solaris-alert-border-color: var(--solaris-info-border)}:host([data-variant=info][data-appearance=surface]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-info-base);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-border-color: var(--solaris-info-border)}:host([data-variant=info][data-appearance=solid]){--solaris-alert-border-color: transparent;--solaris-alert-color: var(--solaris-info-on-solid);--solaris-alert-background: var(--solaris-info-base);--solaris-alert-icon-color: var(--solaris-info-on-solid);--solaris-alert-close-color: var(--solaris-info-on-solid);--solaris-alert-title-color: var(--solaris-info-on-solid);--solaris-alert-description-color: var(--solaris-info-on-solid);--solaris-alert-close-hover-background: #ffffff1f}:host([data-variant=success][data-appearance=tonal]){--solaris-alert-color: var(--solaris-success-text);--solaris-alert-icon-color: var(--solaris-success-base);--solaris-alert-background: var(--solaris-success-surface);--solaris-alert-border-color: var(--solaris-success-border)}:host([data-variant=success][data-appearance=outline]){--solaris-alert-background: transparent;--solaris-alert-color: var(--solaris-success-text);--solaris-alert-icon-color: var(--solaris-success-base);--solaris-alert-border-color: var(--solaris-success-border)}:host([data-variant=success][data-appearance=surface]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-icon-color: var(--solaris-success-base);--solaris-alert-border-color: var(--solaris-success-border)}:host([data-variant=success][data-appearance=solid]){--solaris-alert-border-color: transparent;--solaris-alert-color: var(--solaris-success-on-solid);--solaris-alert-background: var(--solaris-success-base);--solaris-alert-icon-color: var(--solaris-success-on-solid);--solaris-alert-close-color: var(--solaris-success-on-solid);--solaris-alert-title-color: var(--solaris-success-on-solid);--solaris-alert-close-hover-background: #ffffff1f;--solaris-alert-description-color: var(--solaris-success-on-solid)}:host([data-variant=warning][data-appearance=tonal]){--solaris-alert-color: var(--solaris-warning-text);--solaris-alert-icon-color: var(--solaris-warning-base);--solaris-alert-background: var(--solaris-warning-surface);--solaris-alert-border-color: var(--solaris-warning-border)}:host([data-variant=warning][data-appearance=outline]){--solaris-alert-background: transparent;--solaris-alert-color: var(--solaris-warning-text);--solaris-alert-icon-color: var(--solaris-warning-base);--solaris-alert-border-color: var(--solaris-warning-border)}:host([data-variant=warning][data-appearance=surface]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-warning-base);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-border-color: var(--solaris-warning-border)}:host([data-variant=warning][data-appearance=solid]){--solaris-alert-border-color: transparent;--solaris-alert-color: var(--solaris-warning-on-solid);--solaris-alert-background: var(--solaris-warning-base);--solaris-alert-close-hover-background: #0000001a;--solaris-alert-icon-color: var(--solaris-warning-on-solid);--solaris-alert-close-color: var(--solaris-warning-on-solid);--solaris-alert-title-color: var(--solaris-warning-on-solid);--solaris-alert-description-color: var(--solaris-warning-on-solid)}:host([data-variant=danger][data-appearance=tonal]){--solaris-alert-color: var(--solaris-danger-text);--solaris-alert-icon-color: var(--solaris-danger-base);--solaris-alert-background: var(--solaris-danger-surface);--solaris-alert-border-color: var(--solaris-danger-border)}:host([data-variant=danger][data-appearance=outline]){--solaris-alert-background: transparent;--solaris-alert-color: var(--solaris-danger-text);--solaris-alert-icon-color: var(--solaris-danger-base);--solaris-alert-border-color: var(--solaris-danger-border)}:host([data-variant=danger][data-appearance=surface]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-danger-base);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-border-color: var(--solaris-danger-border)}:host([data-variant=danger][data-appearance=solid]){--solaris-alert-border-color: transparent;--solaris-alert-color: var(--solaris-danger-on-solid);--solaris-alert-background: var(--solaris-danger-base);--solaris-alert-icon-color: var(--solaris-danger-on-solid);--solaris-alert-close-color: var(--solaris-danger-on-solid);--solaris-alert-title-color: var(--solaris-danger-on-solid);--solaris-alert-description-color: var(--solaris-danger-on-solid);--solaris-alert-close-hover-background: #ffffff1f}:host([data-variant=custom]){--solaris-alert-color: var( --solaris-alert-custom-color, var(--solaris-text-default) );--solaris-alert-icon-color: var( --solaris-alert-custom-icon-color, var(--solaris-text-muted) );--solaris-alert-background: var( --solaris-alert-custom-background, var(--solaris-surface-base) );--solaris-alert-border-color: var( --solaris-alert-custom-border-color, var(--solaris-border-default) )}:host([data-appearance=solid]){--solaris-alert-border-width: 0}:host([data-appearance]:not([data-appearance=solid])){--solaris-alert-border-width: var(--solaris-border-width-sm)}@media(prefers-reduced-motion:reduce){.solaris-alert__close{transition:none}}:host-context([data-reduced-motion=true]) .solaris-alert__close{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2648
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisAlertComponent, isStandalone: true, selector: "solaris-alert", inputs: { textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, live: { classPropertyName: "live", publicName: "live", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, hasTitle: { classPropertyName: "hasTitle", publicName: "hasTitle", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, closeLabelKey: { classPropertyName: "closeLabelKey", publicName: "closeLabelKey", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { properties: { "attr.role": "liveRole()", "attr.aria-live": "ariaLive()", "attr.data-radius": "radius()", "attr.data-variant": "variant()", "attr.data-density": "effectiveDensity()", "attr.data-appearance": "appearance()", "attr.data-closable": "closable() ? \"\" : null", "attr.data-has-title": "hasTitle() ? \"\" : null", "attr.data-text-position": "textPosition()" } }, ngImport: i0, template: "@if (showIcon()) {\n <div class=\"solaris-alert__icon\">\n <solaris-icon [name]=\"iconName()\" [decorative]=\"true\" />\n </div>\n}\n\n<div class=\"solaris-alert__content\">\n <ng-content />\n</div>\n\n@if (closable()) {\n <div class=\"solaris-alert__close-slot\">\n <button\n type=\"button\"\n class=\"solaris-alert__close\"\n [attr.aria-label]=\"closeButtonLabel()\"\n (click)=\"handleClose()\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n </div>\n}\n", styles: [":host{--solaris-alert-icon-offset: -1px;--solaris-alert-close-offset: 0px;--solaris-alert-close-background: transparent;--solaris-alert-gap: var(--solaris-spacing-3);--solaris-alert-color: var(--solaris-info-text);--solaris-alert-radius: var(--solaris-radius-md);--solaris-alert-padding: var(--solaris-spacing-4);--solaris-alert-icon-color: var(--solaris-info-base);--solaris-alert-content-gap: var(--solaris-spacing-1);--solaris-alert-actions-gap: var(--solaris-spacing-2);--solaris-alert-close-color: var(--solaris-text-muted);--solaris-alert-icon-size: var(--solaris-font-size-lg);--solaris-alert-background: var(--solaris-info-surface);--solaris-alert-title-color: var(--solaris-text-strong);--solaris-alert-border-color: var(--solaris-info-border);--solaris-alert-border-width: var(--solaris-border-width-sm);--solaris-alert-close-icon-size: var(--solaris-font-size-md);--solaris-alert-description-color: var(--solaris-text-default);--solaris-alert-first-line-height: var(--solaris-line-height-md);--solaris-alert-first-line-font-size: var(--solaris-font-size-sm);display:flex;box-sizing:border-box;align-items:flex-start;gap:var(--solaris-alert-gap);color:var(--solaris-alert-color);padding:var(--solaris-alert-padding);border-radius:var(--solaris-alert-radius);background:var(--solaris-alert-background);border:var(--solaris-alert-border-width) solid var(--solaris-alert-border-color)}:host([data-has-title]){--solaris-alert-icon-offset: 0px;--solaris-alert-close-offset: 0px;--solaris-alert-first-line-height: var(--solaris-line-height-sm);--solaris-alert-first-line-font-size: var(--solaris-font-size-md)}.solaris-alert__icon{display:grid;flex-shrink:0;position:relative;place-items:center;transform:translateY(-50%);width:var(--solaris-alert-icon-size);height:var(--solaris-alert-icon-size);color:var(--solaris-alert-icon-color);line-height:var(--solaris-alert-first-line-height);font-size:var(--solaris-alert-first-line-font-size);inset-block-start:calc(.5lh + var(--solaris-alert-icon-offset))}.solaris-alert__icon solaris-icon,.solaris-alert__icon svg{display:block;width:var(--solaris-alert-icon-size);height:var(--solaris-alert-icon-size)}.solaris-alert__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--solaris-alert-content-gap);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}:host([data-text-position=center]) .solaris-alert__content{text-align:center}:host([data-text-position=end]) .solaris-alert__content{text-align:right}:host([data-text-position=space-between]) .solaris-alert__content{flex-direction:row;justify-content:space-between;padding-inline:var(--solaris-spacing-4)}:host([data-text-position=space-between]) .solaris-alert-description{flex:1}.solaris-alert__close{all:unset;display:grid;flex-shrink:0;cursor:pointer;position:relative;place-items:center;box-sizing:border-box;inset-block-start:.5lh;transform:translateY(-50%);width:var(--solaris-font-size-md);height:var(--solaris-font-size-md);border-radius:var(--solaris-radius-sm);color:var(--solaris-alert-close-color);background:var(--solaris-alert-close-background);line-height:var(--solaris-alert-first-line-height);font-size:var(--solaris-alert-first-line-font-size);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-alert__close:hover{color:var(--solaris-text-default)}.solaris-alert__close:focus-visible{outline-offset:2px;outline:2px solid var(--solaris-primary-base)}.solaris-alert__close solaris-icon,.solaris-alert__close svg{display:block;width:var(--solaris-alert-close-icon-size);height:var(--solaris-alert-close-icon-size)}::ng-deep .solaris-alert-title{margin:0;font-size:var(--solaris-font-size-md);color:var(--solaris-alert-title-color);line-height:var(--solaris-line-height-sm);font-weight:var(--solaris-font-weight-semibold)}::ng-deep .solaris-alert-description{margin:0;font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md);color:var(--solaris-alert-description-color)}::ng-deep .solaris-alert-actions{display:flex;flex-wrap:wrap;gap:var(--solaris-alert-actions-gap);margin-block-start:var(--solaris-spacing-2)}::ng-deep .solaris-alert-title+.solaris-alert-description{margin-block-start:var(--solaris-alert-content-gap)}::ng-deep .solaris-alert__content>:first-child:not(.solaris-alert-title){margin-block-start:0}:host([data-radius=none]){--solaris-alert-radius: 0}:host([data-radius=sm]){--solaris-alert-radius: var(--solaris-radius-sm)}:host([data-radius=md]){--solaris-alert-radius: var(--solaris-radius-md)}:host([data-radius=lg]){--solaris-alert-radius: var(--solaris-radius-lg)}:host([data-radius=xl]){--solaris-alert-radius: var(--solaris-radius-xl)}:host([data-density=compact]){--solaris-alert-gap: var(--solaris-density-gap-md);--solaris-alert-padding: var(--solaris-density-padding-md);--solaris-alert-content-gap: var(--solaris-density-gap-md);--solaris-alert-actions-gap: var(--solaris-density-gap-md)}:host([data-density=normal]){--solaris-alert-gap: var(--solaris-density-gap-md);--solaris-alert-padding: var(--solaris-density-padding-md);--solaris-alert-content-gap: var(--solaris-density-gap-md);--solaris-alert-actions-gap: var(--solaris-density-gap-md)}:host([data-density=comfortable]){--solaris-alert-gap: var(--solaris-density-gap-md);--solaris-alert-padding: var(--solaris-density-padding-lg);--solaris-alert-content-gap: var(--solaris-density-gap-md);--solaris-alert-actions-gap: var(--solaris-density-gap-md)}:host([data-variant=neutral][data-appearance=tonal]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-text-muted);--solaris-alert-background: var(--solaris-surface-muted);--solaris-alert-border-color: var(--solaris-border-default)}:host([data-variant=neutral][data-appearance=outline]){--solaris-alert-background: transparent;--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-text-muted);--solaris-alert-border-color: var(--solaris-border-default)}:host([data-variant=neutral][data-appearance=surface]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-text-muted);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-border-color: var(--solaris-border-subtle)}:host([data-variant=neutral][data-appearance=solid]){--solaris-alert-border-color: transparent;--solaris-alert-color: var(--solaris-text-strong);--solaris-alert-icon-color: var(--solaris-text-strong);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-close-color: var(--solaris-text-strong);--solaris-alert-title-color: var(--solaris-text-strong);--solaris-alert-description-color: var(--solaris-text-default)}:host([data-variant=info][data-appearance=tonal]){--solaris-alert-color: var(--solaris-info-text);--solaris-alert-icon-color: var(--solaris-info-base);--solaris-alert-background: var(--solaris-info-surface);--solaris-alert-border-color: var(--solaris-info-border)}:host([data-variant=info][data-appearance=outline]){--solaris-alert-background: transparent;--solaris-alert-color: var(--solaris-info-text);--solaris-alert-icon-color: var(--solaris-info-base);--solaris-alert-border-color: var(--solaris-info-border)}:host([data-variant=info][data-appearance=surface]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-info-base);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-border-color: var(--solaris-info-border)}:host([data-variant=info][data-appearance=solid]){--solaris-alert-border-color: transparent;--solaris-alert-color: var(--solaris-info-on-solid);--solaris-alert-background: var(--solaris-info-base);--solaris-alert-icon-color: var(--solaris-info-on-solid);--solaris-alert-close-color: var(--solaris-info-on-solid);--solaris-alert-title-color: var(--solaris-info-on-solid);--solaris-alert-description-color: var(--solaris-info-on-solid)}:host([data-variant=success][data-appearance=tonal]){--solaris-alert-color: var(--solaris-success-text);--solaris-alert-icon-color: var(--solaris-success-base);--solaris-alert-background: var(--solaris-success-surface);--solaris-alert-border-color: var(--solaris-success-border)}:host([data-variant=success][data-appearance=outline]){--solaris-alert-background: transparent;--solaris-alert-color: var(--solaris-success-text);--solaris-alert-icon-color: var(--solaris-success-base);--solaris-alert-border-color: var(--solaris-success-border)}:host([data-variant=success][data-appearance=surface]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-icon-color: var(--solaris-success-base);--solaris-alert-border-color: var(--solaris-success-border)}:host([data-variant=success][data-appearance=solid]){--solaris-alert-border-color: transparent;--solaris-alert-color: var(--solaris-success-on-solid);--solaris-alert-background: var(--solaris-success-base);--solaris-alert-icon-color: var(--solaris-success-on-solid);--solaris-alert-close-color: var(--solaris-success-on-solid);--solaris-alert-title-color: var(--solaris-success-on-solid);--solaris-alert-description-color: var(--solaris-success-on-solid)}:host([data-variant=warning][data-appearance=tonal]){--solaris-alert-color: var(--solaris-warning-text);--solaris-alert-icon-color: var(--solaris-warning-base);--solaris-alert-background: var(--solaris-warning-surface);--solaris-alert-border-color: var(--solaris-warning-border)}:host([data-variant=warning][data-appearance=outline]){--solaris-alert-background: transparent;--solaris-alert-color: var(--solaris-warning-text);--solaris-alert-icon-color: var(--solaris-warning-base);--solaris-alert-border-color: var(--solaris-warning-border)}:host([data-variant=warning][data-appearance=surface]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-warning-base);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-border-color: var(--solaris-warning-border)}:host([data-variant=warning][data-appearance=solid]){--solaris-alert-border-color: transparent;--solaris-alert-color: var(--solaris-warning-on-solid);--solaris-alert-background: var(--solaris-warning-base);--solaris-alert-icon-color: var(--solaris-warning-on-solid);--solaris-alert-close-color: var(--solaris-warning-on-solid);--solaris-alert-title-color: var(--solaris-warning-on-solid);--solaris-alert-description-color: var(--solaris-warning-on-solid)}:host([data-variant=danger][data-appearance=tonal]){--solaris-alert-color: var(--solaris-danger-text);--solaris-alert-icon-color: var(--solaris-danger-base);--solaris-alert-background: var(--solaris-danger-surface);--solaris-alert-border-color: var(--solaris-danger-border)}:host([data-variant=danger][data-appearance=outline]){--solaris-alert-background: transparent;--solaris-alert-color: var(--solaris-danger-text);--solaris-alert-icon-color: var(--solaris-danger-base);--solaris-alert-border-color: var(--solaris-danger-border)}:host([data-variant=danger][data-appearance=surface]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-danger-base);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-border-color: var(--solaris-danger-border)}:host([data-variant=danger][data-appearance=solid]){--solaris-alert-border-color: transparent;--solaris-alert-color: var(--solaris-danger-on-solid);--solaris-alert-background: var(--solaris-danger-base);--solaris-alert-icon-color: var(--solaris-danger-on-solid);--solaris-alert-close-color: var(--solaris-danger-on-solid);--solaris-alert-title-color: var(--solaris-danger-on-solid);--solaris-alert-description-color: var(--solaris-danger-on-solid)}:host([data-variant=custom]){--solaris-alert-color: var( --solaris-alert-custom-color, var(--solaris-text-default) );--solaris-alert-icon-color: var( --solaris-alert-custom-icon-color, var(--solaris-text-muted) );--solaris-alert-background: var( --solaris-alert-custom-background, var(--solaris-surface-base) );--solaris-alert-border-color: var( --solaris-alert-custom-border-color, var(--solaris-border-default) )}:host([data-appearance=solid]){--solaris-alert-border-width: 0}:host([data-appearance]:not([data-appearance=solid])){--solaris-alert-border-width: var(--solaris-border-width-sm)}@media(prefers-reduced-motion:reduce){.solaris-alert__close{transition:none}}:host-context([data-reduced-motion=true]) .solaris-alert__close{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2648
2649
|
}
|
|
2649
2650
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisAlertComponent, decorators: [{
|
|
2650
2651
|
type: Component,
|
|
2651
2652
|
args: [{ selector: 'solaris-alert', standalone: true, imports: [SolarisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2652
2653
|
'[attr.role]': 'liveRole()',
|
|
2653
|
-
'[attr.data-variant]': 'variant()',
|
|
2654
2654
|
'[attr.aria-live]': 'ariaLive()',
|
|
2655
2655
|
'[attr.data-radius]': 'radius()',
|
|
2656
|
+
'[attr.data-variant]': 'variant()',
|
|
2656
2657
|
'[attr.data-density]': 'effectiveDensity()',
|
|
2657
2658
|
'[attr.data-appearance]': 'appearance()',
|
|
2658
2659
|
'[attr.data-closable]': 'closable() ? "" : null',
|
|
2659
2660
|
'[attr.data-has-title]': 'hasTitle() ? "" : null',
|
|
2660
|
-
}, template: "@if (showIcon()) {\n <div class=\"solaris-alert__icon\">\n <solaris-icon [name]=\"iconName()\" [decorative]=\"true\" />\n </div>\n}\n\n<div class=\"solaris-alert__content\">\n <ng-content />\n</div>\n\n@if (closable()) {\n <div class=\"solaris-alert__close-slot\">\n <button\n type=\"button\"\n class=\"solaris-alert__close\"\n [attr.aria-label]=\"closeButtonLabel()\"\n (click)=\"handleClose()\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n </div>\n}\n", styles: [":host{--solaris-alert-icon-offset: -1px;--solaris-alert-close-offset: 0px;--solaris-alert-close-background: transparent;--solaris-alert-gap: var(--solaris-spacing-3);--solaris-alert-color: var(--solaris-info-text);--solaris-alert-radius: var(--solaris-radius-md);--solaris-alert-padding: var(--solaris-spacing-4);--solaris-alert-icon-color: var(--solaris-info-base);--solaris-alert-close-size: var(--solaris-spacing-4);--solaris-alert-content-gap: var(--solaris-spacing-1);--solaris-alert-actions-gap: var(--solaris-spacing-2);--solaris-alert-close-color: var(--solaris-text-muted);--solaris-alert-icon-size: var(--solaris-font-size-lg);--solaris-alert-background: var(--solaris-info-surface);--solaris-alert-title-color: var(--solaris-text-strong);--solaris-alert-border-color: var(--solaris-info-border);--solaris-alert-close-hover-background: #0000000f;--solaris-alert-border-width: var(--solaris-border-width-sm);--solaris-alert-close-icon-size: var(--solaris-font-size-md);--solaris-alert-description-color: var(--solaris-text-default);--solaris-alert-first-line-height: var(--solaris-line-height-md);--solaris-alert-first-line-font-size: var(--solaris-font-size-sm);display:flex;box-sizing:border-box;align-items:flex-start;gap:var(--solaris-alert-gap);color:var(--solaris-alert-color);padding:var(--solaris-alert-padding);border-radius:var(--solaris-alert-radius);background:var(--solaris-alert-background);border:var(--solaris-alert-border-width) solid var(--solaris-alert-border-color)}:host([data-has-title]){--solaris-alert-icon-offset: 0px;--solaris-alert-close-offset: 0px;--solaris-alert-first-line-height: var(--solaris-line-height-sm);--solaris-alert-first-line-font-size: var(--solaris-font-size-md)}.solaris-alert__icon{display:grid;flex-shrink:0;position:relative;place-items:center;transform:translateY(-50%);width:var(--solaris-alert-icon-size);height:var(--solaris-alert-icon-size);color:var(--solaris-alert-icon-color);line-height:var(--solaris-alert-first-line-height);font-size:var(--solaris-alert-first-line-font-size);inset-block-start:calc(.5lh + var(--solaris-alert-icon-offset))}.solaris-alert__icon solaris-icon,.solaris-alert__icon svg{display:block;width:var(--solaris-alert-icon-size);height:var(--solaris-alert-icon-size)}.solaris-alert__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--solaris-alert-content-gap);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-alert__close:hover{background:var(--solaris-alert-close-hover-background)}.solaris-alert__close:focus-visible{outline-offset:2px;outline:2px solid var(--solaris-primary-base)}.solaris-alert__close{all:unset;display:grid;flex-shrink:0;cursor:pointer;position:relative;place-items:center;box-sizing:border-box;inset-block-start:.5lh;transform:translateY(-50%);width:var(--solaris-alert-close-size);height:var(--solaris-alert-close-size);border-radius:var(--solaris-radius-sm);color:var(--solaris-alert-close-color);background:var(--solaris-alert-close-background);line-height:var(--solaris-alert-first-line-height);font-size:var(--solaris-alert-first-line-font-size)}.solaris-alert__close solaris-icon,.solaris-alert__close svg{display:block;width:var(--solaris-alert-close-icon-size);height:var(--solaris-alert-close-icon-size)}::ng-deep .solaris-alert-title{margin:0;font-size:var(--solaris-font-size-md);color:var(--solaris-alert-title-color);line-height:var(--solaris-line-height-sm);font-weight:var(--solaris-font-weight-semibold)}::ng-deep .solaris-alert-description{margin:0;font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md);color:var(--solaris-alert-description-color)}::ng-deep .solaris-alert-actions{display:flex;flex-wrap:wrap;gap:var(--solaris-alert-actions-gap);margin-block-start:var(--solaris-spacing-2)}::ng-deep .solaris-alert-title+.solaris-alert-description{margin-block-start:var(--solaris-alert-content-gap)}::ng-deep .solaris-alert__content>:first-child:not(.solaris-alert-title){margin-block-start:0}:host([data-radius=sm]){--solaris-alert-radius: var(--solaris-radius-sm)}:host([data-radius=md]){--solaris-alert-radius: var(--solaris-radius-md)}:host([data-radius=lg]){--solaris-alert-radius: var(--solaris-radius-lg)}:host([data-radius=xl]){--solaris-alert-radius: var(--solaris-radius-xl)}:host([data-density=compact]){--solaris-alert-gap: var(--solaris-density-gap-md);--solaris-alert-padding: var(--solaris-density-padding-md);--solaris-alert-content-gap: var(--solaris-density-gap-md);--solaris-alert-actions-gap: var(--solaris-density-gap-md);--solaris-alert-close-size: var(--solaris-density-min-height)}:host([data-density=normal]){--solaris-alert-gap: var(--solaris-density-gap-md);--solaris-alert-padding: var(--solaris-density-padding-md);--solaris-alert-content-gap: var(--solaris-density-gap-md);--solaris-alert-actions-gap: var(--solaris-density-gap-md);--solaris-alert-close-size: var(--solaris-density-min-height)}:host([data-density=comfortable]){--solaris-alert-gap: var(--solaris-density-gap-md);--solaris-alert-padding: var(--solaris-density-padding-lg);--solaris-alert-content-gap: var(--solaris-density-gap-md);--solaris-alert-actions-gap: var(--solaris-density-gap-md);--solaris-alert-close-size: var(--solaris-density-min-height)}:host([data-variant=neutral][data-appearance=tonal]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-text-muted);--solaris-alert-background: var(--solaris-surface-muted);--solaris-alert-border-color: var(--solaris-border-default)}:host([data-variant=neutral][data-appearance=outline]){--solaris-alert-background: transparent;--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-text-muted);--solaris-alert-border-color: var(--solaris-border-default)}:host([data-variant=neutral][data-appearance=surface]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-text-muted);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-border-color: var(--solaris-border-subtle)}:host([data-variant=neutral][data-appearance=solid]){--solaris-alert-border-color: transparent;--solaris-alert-color: var(--solaris-text-strong);--solaris-alert-icon-color: var(--solaris-text-strong);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-close-color: var(--solaris-text-strong);--solaris-alert-title-color: var(--solaris-text-strong);--solaris-alert-description-color: var(--solaris-text-inverse);--solaris-alert-close-hover-background: #ffffff1f}:host([data-variant=info][data-appearance=tonal]){--solaris-alert-color: var(--solaris-info-text);--solaris-alert-icon-color: var(--solaris-info-base);--solaris-alert-background: var(--solaris-info-surface);--solaris-alert-border-color: var(--solaris-info-border)}:host([data-variant=info][data-appearance=outline]){--solaris-alert-background: transparent;--solaris-alert-color: var(--solaris-info-text);--solaris-alert-icon-color: var(--solaris-info-base);--solaris-alert-border-color: var(--solaris-info-border)}:host([data-variant=info][data-appearance=surface]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-info-base);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-border-color: var(--solaris-info-border)}:host([data-variant=info][data-appearance=solid]){--solaris-alert-border-color: transparent;--solaris-alert-color: var(--solaris-info-on-solid);--solaris-alert-background: var(--solaris-info-base);--solaris-alert-icon-color: var(--solaris-info-on-solid);--solaris-alert-close-color: var(--solaris-info-on-solid);--solaris-alert-title-color: var(--solaris-info-on-solid);--solaris-alert-description-color: var(--solaris-info-on-solid);--solaris-alert-close-hover-background: #ffffff1f}:host([data-variant=success][data-appearance=tonal]){--solaris-alert-color: var(--solaris-success-text);--solaris-alert-icon-color: var(--solaris-success-base);--solaris-alert-background: var(--solaris-success-surface);--solaris-alert-border-color: var(--solaris-success-border)}:host([data-variant=success][data-appearance=outline]){--solaris-alert-background: transparent;--solaris-alert-color: var(--solaris-success-text);--solaris-alert-icon-color: var(--solaris-success-base);--solaris-alert-border-color: var(--solaris-success-border)}:host([data-variant=success][data-appearance=surface]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-icon-color: var(--solaris-success-base);--solaris-alert-border-color: var(--solaris-success-border)}:host([data-variant=success][data-appearance=solid]){--solaris-alert-border-color: transparent;--solaris-alert-color: var(--solaris-success-on-solid);--solaris-alert-background: var(--solaris-success-base);--solaris-alert-icon-color: var(--solaris-success-on-solid);--solaris-alert-close-color: var(--solaris-success-on-solid);--solaris-alert-title-color: var(--solaris-success-on-solid);--solaris-alert-close-hover-background: #ffffff1f;--solaris-alert-description-color: var(--solaris-success-on-solid)}:host([data-variant=warning][data-appearance=tonal]){--solaris-alert-color: var(--solaris-warning-text);--solaris-alert-icon-color: var(--solaris-warning-base);--solaris-alert-background: var(--solaris-warning-surface);--solaris-alert-border-color: var(--solaris-warning-border)}:host([data-variant=warning][data-appearance=outline]){--solaris-alert-background: transparent;--solaris-alert-color: var(--solaris-warning-text);--solaris-alert-icon-color: var(--solaris-warning-base);--solaris-alert-border-color: var(--solaris-warning-border)}:host([data-variant=warning][data-appearance=surface]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-warning-base);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-border-color: var(--solaris-warning-border)}:host([data-variant=warning][data-appearance=solid]){--solaris-alert-border-color: transparent;--solaris-alert-color: var(--solaris-warning-on-solid);--solaris-alert-background: var(--solaris-warning-base);--solaris-alert-close-hover-background: #0000001a;--solaris-alert-icon-color: var(--solaris-warning-on-solid);--solaris-alert-close-color: var(--solaris-warning-on-solid);--solaris-alert-title-color: var(--solaris-warning-on-solid);--solaris-alert-description-color: var(--solaris-warning-on-solid)}:host([data-variant=danger][data-appearance=tonal]){--solaris-alert-color: var(--solaris-danger-text);--solaris-alert-icon-color: var(--solaris-danger-base);--solaris-alert-background: var(--solaris-danger-surface);--solaris-alert-border-color: var(--solaris-danger-border)}:host([data-variant=danger][data-appearance=outline]){--solaris-alert-background: transparent;--solaris-alert-color: var(--solaris-danger-text);--solaris-alert-icon-color: var(--solaris-danger-base);--solaris-alert-border-color: var(--solaris-danger-border)}:host([data-variant=danger][data-appearance=surface]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-danger-base);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-border-color: var(--solaris-danger-border)}:host([data-variant=danger][data-appearance=solid]){--solaris-alert-border-color: transparent;--solaris-alert-color: var(--solaris-danger-on-solid);--solaris-alert-background: var(--solaris-danger-base);--solaris-alert-icon-color: var(--solaris-danger-on-solid);--solaris-alert-close-color: var(--solaris-danger-on-solid);--solaris-alert-title-color: var(--solaris-danger-on-solid);--solaris-alert-description-color: var(--solaris-danger-on-solid);--solaris-alert-close-hover-background: #ffffff1f}:host([data-variant=custom]){--solaris-alert-color: var( --solaris-alert-custom-color, var(--solaris-text-default) );--solaris-alert-icon-color: var( --solaris-alert-custom-icon-color, var(--solaris-text-muted) );--solaris-alert-background: var( --solaris-alert-custom-background, var(--solaris-surface-base) );--solaris-alert-border-color: var( --solaris-alert-custom-border-color, var(--solaris-border-default) )}:host([data-appearance=solid]){--solaris-alert-border-width: 0}:host([data-appearance]:not([data-appearance=solid])){--solaris-alert-border-width: var(--solaris-border-width-sm)}@media(prefers-reduced-motion:reduce){.solaris-alert__close{transition:none}}:host-context([data-reduced-motion=true]) .solaris-alert__close{transition:none}\n"] }]
|
|
2661
|
-
}], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], live: [{ type: i0.Input, args: [{ isSignal: true, alias: "live", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], hasTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasTitle", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], closeLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabelKey", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }] } });
|
|
2661
|
+
'[attr.data-text-position]': 'textPosition()',
|
|
2662
|
+
}, template: "@if (showIcon()) {\n <div class=\"solaris-alert__icon\">\n <solaris-icon [name]=\"iconName()\" [decorative]=\"true\" />\n </div>\n}\n\n<div class=\"solaris-alert__content\">\n <ng-content />\n</div>\n\n@if (closable()) {\n <div class=\"solaris-alert__close-slot\">\n <button\n type=\"button\"\n class=\"solaris-alert__close\"\n [attr.aria-label]=\"closeButtonLabel()\"\n (click)=\"handleClose()\"\n >\n <solaris-icon name=\"x\" [decorative]=\"true\" />\n </button>\n </div>\n}\n", styles: [":host{--solaris-alert-icon-offset: -1px;--solaris-alert-close-offset: 0px;--solaris-alert-close-background: transparent;--solaris-alert-gap: var(--solaris-spacing-3);--solaris-alert-color: var(--solaris-info-text);--solaris-alert-radius: var(--solaris-radius-md);--solaris-alert-padding: var(--solaris-spacing-4);--solaris-alert-icon-color: var(--solaris-info-base);--solaris-alert-content-gap: var(--solaris-spacing-1);--solaris-alert-actions-gap: var(--solaris-spacing-2);--solaris-alert-close-color: var(--solaris-text-muted);--solaris-alert-icon-size: var(--solaris-font-size-lg);--solaris-alert-background: var(--solaris-info-surface);--solaris-alert-title-color: var(--solaris-text-strong);--solaris-alert-border-color: var(--solaris-info-border);--solaris-alert-border-width: var(--solaris-border-width-sm);--solaris-alert-close-icon-size: var(--solaris-font-size-md);--solaris-alert-description-color: var(--solaris-text-default);--solaris-alert-first-line-height: var(--solaris-line-height-md);--solaris-alert-first-line-font-size: var(--solaris-font-size-sm);display:flex;box-sizing:border-box;align-items:flex-start;gap:var(--solaris-alert-gap);color:var(--solaris-alert-color);padding:var(--solaris-alert-padding);border-radius:var(--solaris-alert-radius);background:var(--solaris-alert-background);border:var(--solaris-alert-border-width) solid var(--solaris-alert-border-color)}:host([data-has-title]){--solaris-alert-icon-offset: 0px;--solaris-alert-close-offset: 0px;--solaris-alert-first-line-height: var(--solaris-line-height-sm);--solaris-alert-first-line-font-size: var(--solaris-font-size-md)}.solaris-alert__icon{display:grid;flex-shrink:0;position:relative;place-items:center;transform:translateY(-50%);width:var(--solaris-alert-icon-size);height:var(--solaris-alert-icon-size);color:var(--solaris-alert-icon-color);line-height:var(--solaris-alert-first-line-height);font-size:var(--solaris-alert-first-line-font-size);inset-block-start:calc(.5lh + var(--solaris-alert-icon-offset))}.solaris-alert__icon solaris-icon,.solaris-alert__icon svg{display:block;width:var(--solaris-alert-icon-size);height:var(--solaris-alert-icon-size)}.solaris-alert__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--solaris-alert-content-gap);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}:host([data-text-position=center]) .solaris-alert__content{text-align:center}:host([data-text-position=end]) .solaris-alert__content{text-align:right}:host([data-text-position=space-between]) .solaris-alert__content{flex-direction:row;justify-content:space-between;padding-inline:var(--solaris-spacing-4)}:host([data-text-position=space-between]) .solaris-alert-description{flex:1}.solaris-alert__close{all:unset;display:grid;flex-shrink:0;cursor:pointer;position:relative;place-items:center;box-sizing:border-box;inset-block-start:.5lh;transform:translateY(-50%);width:var(--solaris-font-size-md);height:var(--solaris-font-size-md);border-radius:var(--solaris-radius-sm);color:var(--solaris-alert-close-color);background:var(--solaris-alert-close-background);line-height:var(--solaris-alert-first-line-height);font-size:var(--solaris-alert-first-line-font-size);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-alert__close:hover{color:var(--solaris-text-default)}.solaris-alert__close:focus-visible{outline-offset:2px;outline:2px solid var(--solaris-primary-base)}.solaris-alert__close solaris-icon,.solaris-alert__close svg{display:block;width:var(--solaris-alert-close-icon-size);height:var(--solaris-alert-close-icon-size)}::ng-deep .solaris-alert-title{margin:0;font-size:var(--solaris-font-size-md);color:var(--solaris-alert-title-color);line-height:var(--solaris-line-height-sm);font-weight:var(--solaris-font-weight-semibold)}::ng-deep .solaris-alert-description{margin:0;font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md);color:var(--solaris-alert-description-color)}::ng-deep .solaris-alert-actions{display:flex;flex-wrap:wrap;gap:var(--solaris-alert-actions-gap);margin-block-start:var(--solaris-spacing-2)}::ng-deep .solaris-alert-title+.solaris-alert-description{margin-block-start:var(--solaris-alert-content-gap)}::ng-deep .solaris-alert__content>:first-child:not(.solaris-alert-title){margin-block-start:0}:host([data-radius=none]){--solaris-alert-radius: 0}:host([data-radius=sm]){--solaris-alert-radius: var(--solaris-radius-sm)}:host([data-radius=md]){--solaris-alert-radius: var(--solaris-radius-md)}:host([data-radius=lg]){--solaris-alert-radius: var(--solaris-radius-lg)}:host([data-radius=xl]){--solaris-alert-radius: var(--solaris-radius-xl)}:host([data-density=compact]){--solaris-alert-gap: var(--solaris-density-gap-md);--solaris-alert-padding: var(--solaris-density-padding-md);--solaris-alert-content-gap: var(--solaris-density-gap-md);--solaris-alert-actions-gap: var(--solaris-density-gap-md)}:host([data-density=normal]){--solaris-alert-gap: var(--solaris-density-gap-md);--solaris-alert-padding: var(--solaris-density-padding-md);--solaris-alert-content-gap: var(--solaris-density-gap-md);--solaris-alert-actions-gap: var(--solaris-density-gap-md)}:host([data-density=comfortable]){--solaris-alert-gap: var(--solaris-density-gap-md);--solaris-alert-padding: var(--solaris-density-padding-lg);--solaris-alert-content-gap: var(--solaris-density-gap-md);--solaris-alert-actions-gap: var(--solaris-density-gap-md)}:host([data-variant=neutral][data-appearance=tonal]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-text-muted);--solaris-alert-background: var(--solaris-surface-muted);--solaris-alert-border-color: var(--solaris-border-default)}:host([data-variant=neutral][data-appearance=outline]){--solaris-alert-background: transparent;--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-text-muted);--solaris-alert-border-color: var(--solaris-border-default)}:host([data-variant=neutral][data-appearance=surface]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-text-muted);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-border-color: var(--solaris-border-subtle)}:host([data-variant=neutral][data-appearance=solid]){--solaris-alert-border-color: transparent;--solaris-alert-color: var(--solaris-text-strong);--solaris-alert-icon-color: var(--solaris-text-strong);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-close-color: var(--solaris-text-strong);--solaris-alert-title-color: var(--solaris-text-strong);--solaris-alert-description-color: var(--solaris-text-default)}:host([data-variant=info][data-appearance=tonal]){--solaris-alert-color: var(--solaris-info-text);--solaris-alert-icon-color: var(--solaris-info-base);--solaris-alert-background: var(--solaris-info-surface);--solaris-alert-border-color: var(--solaris-info-border)}:host([data-variant=info][data-appearance=outline]){--solaris-alert-background: transparent;--solaris-alert-color: var(--solaris-info-text);--solaris-alert-icon-color: var(--solaris-info-base);--solaris-alert-border-color: var(--solaris-info-border)}:host([data-variant=info][data-appearance=surface]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-info-base);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-border-color: var(--solaris-info-border)}:host([data-variant=info][data-appearance=solid]){--solaris-alert-border-color: transparent;--solaris-alert-color: var(--solaris-info-on-solid);--solaris-alert-background: var(--solaris-info-base);--solaris-alert-icon-color: var(--solaris-info-on-solid);--solaris-alert-close-color: var(--solaris-info-on-solid);--solaris-alert-title-color: var(--solaris-info-on-solid);--solaris-alert-description-color: var(--solaris-info-on-solid)}:host([data-variant=success][data-appearance=tonal]){--solaris-alert-color: var(--solaris-success-text);--solaris-alert-icon-color: var(--solaris-success-base);--solaris-alert-background: var(--solaris-success-surface);--solaris-alert-border-color: var(--solaris-success-border)}:host([data-variant=success][data-appearance=outline]){--solaris-alert-background: transparent;--solaris-alert-color: var(--solaris-success-text);--solaris-alert-icon-color: var(--solaris-success-base);--solaris-alert-border-color: var(--solaris-success-border)}:host([data-variant=success][data-appearance=surface]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-icon-color: var(--solaris-success-base);--solaris-alert-border-color: var(--solaris-success-border)}:host([data-variant=success][data-appearance=solid]){--solaris-alert-border-color: transparent;--solaris-alert-color: var(--solaris-success-on-solid);--solaris-alert-background: var(--solaris-success-base);--solaris-alert-icon-color: var(--solaris-success-on-solid);--solaris-alert-close-color: var(--solaris-success-on-solid);--solaris-alert-title-color: var(--solaris-success-on-solid);--solaris-alert-description-color: var(--solaris-success-on-solid)}:host([data-variant=warning][data-appearance=tonal]){--solaris-alert-color: var(--solaris-warning-text);--solaris-alert-icon-color: var(--solaris-warning-base);--solaris-alert-background: var(--solaris-warning-surface);--solaris-alert-border-color: var(--solaris-warning-border)}:host([data-variant=warning][data-appearance=outline]){--solaris-alert-background: transparent;--solaris-alert-color: var(--solaris-warning-text);--solaris-alert-icon-color: var(--solaris-warning-base);--solaris-alert-border-color: var(--solaris-warning-border)}:host([data-variant=warning][data-appearance=surface]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-warning-base);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-border-color: var(--solaris-warning-border)}:host([data-variant=warning][data-appearance=solid]){--solaris-alert-border-color: transparent;--solaris-alert-color: var(--solaris-warning-on-solid);--solaris-alert-background: var(--solaris-warning-base);--solaris-alert-icon-color: var(--solaris-warning-on-solid);--solaris-alert-close-color: var(--solaris-warning-on-solid);--solaris-alert-title-color: var(--solaris-warning-on-solid);--solaris-alert-description-color: var(--solaris-warning-on-solid)}:host([data-variant=danger][data-appearance=tonal]){--solaris-alert-color: var(--solaris-danger-text);--solaris-alert-icon-color: var(--solaris-danger-base);--solaris-alert-background: var(--solaris-danger-surface);--solaris-alert-border-color: var(--solaris-danger-border)}:host([data-variant=danger][data-appearance=outline]){--solaris-alert-background: transparent;--solaris-alert-color: var(--solaris-danger-text);--solaris-alert-icon-color: var(--solaris-danger-base);--solaris-alert-border-color: var(--solaris-danger-border)}:host([data-variant=danger][data-appearance=surface]){--solaris-alert-color: var(--solaris-text-default);--solaris-alert-icon-color: var(--solaris-danger-base);--solaris-alert-background: var(--solaris-surface-base);--solaris-alert-border-color: var(--solaris-danger-border)}:host([data-variant=danger][data-appearance=solid]){--solaris-alert-border-color: transparent;--solaris-alert-color: var(--solaris-danger-on-solid);--solaris-alert-background: var(--solaris-danger-base);--solaris-alert-icon-color: var(--solaris-danger-on-solid);--solaris-alert-close-color: var(--solaris-danger-on-solid);--solaris-alert-title-color: var(--solaris-danger-on-solid);--solaris-alert-description-color: var(--solaris-danger-on-solid)}:host([data-variant=custom]){--solaris-alert-color: var( --solaris-alert-custom-color, var(--solaris-text-default) );--solaris-alert-icon-color: var( --solaris-alert-custom-icon-color, var(--solaris-text-muted) );--solaris-alert-background: var( --solaris-alert-custom-background, var(--solaris-surface-base) );--solaris-alert-border-color: var( --solaris-alert-custom-border-color, var(--solaris-border-default) )}:host([data-appearance=solid]){--solaris-alert-border-width: 0}:host([data-appearance]:not([data-appearance=solid])){--solaris-alert-border-width: var(--solaris-border-width-sm)}@media(prefers-reduced-motion:reduce){.solaris-alert__close{transition:none}}:host-context([data-reduced-motion=true]) .solaris-alert__close{transition:none}\n"] }]
|
|
2663
|
+
}], propDecorators: { textPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "textPosition", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], live: [{ type: i0.Input, args: [{ isSignal: true, alias: "live", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], hasTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasTitle", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], closeLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabelKey", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }] } });
|
|
2662
2664
|
|
|
2663
2665
|
class SolarisAlertActionsComponent {
|
|
2664
2666
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisAlertActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|