@educarehq/solaris-ui 0.15.0 → 0.16.1
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 });
|
|
@@ -2919,12 +2921,10 @@ class SolarisButtonDirective {
|
|
|
2919
2921
|
}
|
|
2920
2922
|
// Apply variant attributes synchronously so the element never flashes the
|
|
2921
2923
|
// base style before Angular's first change detection (SSR/hydration FOUC).
|
|
2922
|
-
|
|
2923
|
-
|
|
2924
|
-
el.
|
|
2925
|
-
el.
|
|
2926
|
-
el.dataset['radius'] = this.radius();
|
|
2927
|
-
el.dataset['shape'] = this.shape();
|
|
2924
|
+
el.setAttribute('data-appearance', this.appearance());
|
|
2925
|
+
el.setAttribute('data-color', this.color());
|
|
2926
|
+
el.setAttribute('data-radius', this.radius());
|
|
2927
|
+
el.setAttribute('data-shape', this.shape());
|
|
2928
2928
|
effect(() => {
|
|
2929
2929
|
if (this.loading()) {
|
|
2930
2930
|
this.attachSpinner();
|
|
@@ -3870,7 +3870,7 @@ class SolarisFormFieldComponent {
|
|
|
3870
3870
|
this.controlResize.set(null);
|
|
3871
3871
|
return;
|
|
3872
3872
|
}
|
|
3873
|
-
const resize = first.
|
|
3873
|
+
const resize = first.getAttribute('data-resize') ?? first.getAttribute('resize');
|
|
3874
3874
|
const validResize = resize === 'none' ||
|
|
3875
3875
|
resize === 'vertical' ||
|
|
3876
3876
|
resize === 'horizontal' ||
|
|
@@ -4302,17 +4302,16 @@ class SolarisPopoverTriggerDirective {
|
|
|
4302
4302
|
this.connectedSide =
|
|
4303
4303
|
change.connectionPair.originY === 'bottom' ? 'bottom' : 'top';
|
|
4304
4304
|
if (this.panelContainerRef) {
|
|
4305
|
-
this.panelContainerRef.
|
|
4305
|
+
this.panelContainerRef.setAttribute('data-connected-side', this.connectedSide);
|
|
4306
4306
|
if (this.solarisPopoverTopConnected()) {
|
|
4307
|
-
this.panelContainerRef.
|
|
4307
|
+
this.panelContainerRef.setAttribute('data-form-field', '');
|
|
4308
4308
|
}
|
|
4309
4309
|
}
|
|
4310
4310
|
if (this.solarisPopoverTopConnected()) {
|
|
4311
|
-
this.elementRef.nativeElement.
|
|
4312
|
-
this.connectedSide;
|
|
4311
|
+
this.elementRef.nativeElement.setAttribute('data-connected-side', this.connectedSide);
|
|
4313
4312
|
const formFieldWrapper = this.elementRef.nativeElement.querySelector(':scope > .solaris-form-field__control-wrapper');
|
|
4314
4313
|
if (formFieldWrapper) {
|
|
4315
|
-
formFieldWrapper.
|
|
4314
|
+
formFieldWrapper.setAttribute('data-connected-side', this.connectedSide);
|
|
4316
4315
|
}
|
|
4317
4316
|
}
|
|
4318
4317
|
});
|
|
@@ -4383,12 +4382,12 @@ class SolarisPopoverTriggerDirective {
|
|
|
4383
4382
|
const componentRef = this.overlayRef.attach(portal);
|
|
4384
4383
|
this.panelContainerRef = componentRef.location.nativeElement.querySelector('.solaris-popover-panel__container');
|
|
4385
4384
|
if (this.panelContainerRef && initialSide) {
|
|
4386
|
-
this.panelContainerRef.
|
|
4385
|
+
this.panelContainerRef.setAttribute('data-connected-side', initialSide);
|
|
4387
4386
|
if (topConnected) {
|
|
4388
|
-
this.panelContainerRef.
|
|
4387
|
+
this.panelContainerRef.setAttribute('data-form-field', '');
|
|
4389
4388
|
const formFieldWrapper = this.elementRef.nativeElement.querySelector(':scope > .solaris-form-field__control-wrapper');
|
|
4390
4389
|
if (formFieldWrapper) {
|
|
4391
|
-
formFieldWrapper.
|
|
4390
|
+
formFieldWrapper.setAttribute('data-connected-side', initialSide);
|
|
4392
4391
|
}
|
|
4393
4392
|
}
|
|
4394
4393
|
}
|
|
@@ -4899,7 +4898,7 @@ class SolarisSelectComponent extends SolarisFormControl {
|
|
|
4899
4898
|
if (el) {
|
|
4900
4899
|
const wrapper = el.querySelector('.solaris-form-field__control-wrapper');
|
|
4901
4900
|
if (wrapper) {
|
|
4902
|
-
wrapper.
|
|
4901
|
+
wrapper.setAttribute('data-connected-side', side);
|
|
4903
4902
|
}
|
|
4904
4903
|
}
|
|
4905
4904
|
}
|
|
@@ -4908,7 +4907,7 @@ class SolarisSelectComponent extends SolarisFormControl {
|
|
|
4908
4907
|
if (el) {
|
|
4909
4908
|
const wrapper = el.querySelector('.solaris-form-field__control-wrapper');
|
|
4910
4909
|
if (wrapper) {
|
|
4911
|
-
|
|
4910
|
+
wrapper.removeAttribute('data-connected-side');
|
|
4912
4911
|
}
|
|
4913
4912
|
}
|
|
4914
4913
|
}
|
|
@@ -6504,7 +6503,7 @@ class SolarisMultiSelectComponent extends SolarisFormControl {
|
|
|
6504
6503
|
if (el) {
|
|
6505
6504
|
const wrapper = el.querySelector('.solaris-form-field__control-wrapper');
|
|
6506
6505
|
if (wrapper) {
|
|
6507
|
-
wrapper.
|
|
6506
|
+
wrapper.setAttribute('data-connected-side', side);
|
|
6508
6507
|
}
|
|
6509
6508
|
}
|
|
6510
6509
|
}
|
|
@@ -6513,7 +6512,7 @@ class SolarisMultiSelectComponent extends SolarisFormControl {
|
|
|
6513
6512
|
if (el) {
|
|
6514
6513
|
const wrapper = el.querySelector('.solaris-form-field__control-wrapper');
|
|
6515
6514
|
if (wrapper) {
|
|
6516
|
-
|
|
6515
|
+
wrapper.removeAttribute('data-connected-side');
|
|
6517
6516
|
}
|
|
6518
6517
|
}
|
|
6519
6518
|
}
|
|
@@ -12631,11 +12630,11 @@ class SolarisSegmentedItemComponent {
|
|
|
12631
12630
|
if (!innerEl)
|
|
12632
12631
|
return;
|
|
12633
12632
|
for (const node of Array.from(innerEl.childNodes)) {
|
|
12634
|
-
if (node.nodeType ===
|
|
12633
|
+
if (node.nodeType === 3 && node.textContent?.trim()) {
|
|
12635
12634
|
this.hasContent.set(true);
|
|
12636
12635
|
return;
|
|
12637
12636
|
}
|
|
12638
|
-
if (node.nodeType ===
|
|
12637
|
+
if (node.nodeType === 1) {
|
|
12639
12638
|
const el = node;
|
|
12640
12639
|
if (!el.classList.contains('solaris-segmented-item__icon')) {
|
|
12641
12640
|
this.hasContent.set(true);
|
|
@@ -12775,6 +12774,7 @@ class SolarisSegmentedControlComponent {
|
|
|
12775
12774
|
elementRef = inject(ElementRef);
|
|
12776
12775
|
injector = inject(Injector);
|
|
12777
12776
|
ngZone = inject(NgZone);
|
|
12777
|
+
platformId = inject(PLATFORM_ID);
|
|
12778
12778
|
items = contentChildren(SolarisSegmentedItemComponent, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
12779
12779
|
invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
12780
12780
|
indicator = input(true, ...(ngDevMode ? [{ debugName: "indicator" }] : /* istanbul ignore next */ []));
|
|
@@ -12837,6 +12837,9 @@ class SolarisSegmentedControlComponent {
|
|
|
12837
12837
|
});
|
|
12838
12838
|
}
|
|
12839
12839
|
ngAfterViewInit() {
|
|
12840
|
+
if (!isPlatformBrowser(this.platformId)) {
|
|
12841
|
+
return;
|
|
12842
|
+
}
|
|
12840
12843
|
this.setupIndicatorMeasurement();
|
|
12841
12844
|
effect(() => {
|
|
12842
12845
|
this.value();
|
|
@@ -12880,6 +12883,9 @@ class SolarisSegmentedControlComponent {
|
|
|
12880
12883
|
// ControlValueAccessor
|
|
12881
12884
|
writeValue(safe) {
|
|
12882
12885
|
this.value.set(safe);
|
|
12886
|
+
if (!isPlatformBrowser(this.platformId)) {
|
|
12887
|
+
return;
|
|
12888
|
+
}
|
|
12883
12889
|
this.ngZone.runOutsideAngular(() => {
|
|
12884
12890
|
requestAnimationFrame(() => this.measureIndicator());
|
|
12885
12891
|
});
|