@masmarino/gabarit 1.2.0 → 1.2.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.
|
@@ -7,7 +7,7 @@ import * as i1 from '@angular/forms';
|
|
|
7
7
|
import { NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
|
|
8
8
|
import { isObservable, switchMap, EMPTY, from, catchError, of, forkJoin } from 'rxjs';
|
|
9
9
|
|
|
10
|
-
const GABARIT_VERSION = '1.2.
|
|
10
|
+
const GABARIT_VERSION = '1.2.1';
|
|
11
11
|
|
|
12
12
|
const BUILT_IN_ICONS = {
|
|
13
13
|
search: `<path d="m21 21-4.34-4.34" />
|
|
@@ -1321,11 +1321,11 @@ class Alert {
|
|
|
1321
1321
|
icon = computed(() => VARIANT_ICONS$1[this.variant()], /* @ts-ignore */
|
|
1322
1322
|
...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
1323
1323
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Alert, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1324
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: Alert, isStandalone: true, selector: "gbt-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, live: { classPropertyName: "live", publicName: "live", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, iconAlign: { classPropertyName: "iconAlign", publicName: "iconAlign", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, ngImport: i0, template: "<div\n class=\"gbt-alert\"\n [attr.data-variant]=\"variant()\"\n [attr.data-heading]=\"heading() ? '' : null\"\n [attr.data-size]=\"size() === 'md' ? null : size()\"\n [attr.data-appearance]=\"appearance() === 'default' ? null : appearance()\"\n [attr.data-icon-align]=\"iconAlign() === 'auto' ? null : iconAlign()\"\n [attr.role]=\"role()\"\n [attr.aria-atomic]=\"role() ? 'true' : null\"\n>\n <span class=\"gbt-alert__icon\">\n <gbt-icon [name]=\"icon()\" aria-hidden=\"true\" />\n </span>\n <div class=\"gbt-alert__content\">\n <div class=\"gbt-alert__message\">\n @if (heading()) {\n <p class=\"gbt-alert__heading\">{{ heading() }}</p>\n }\n <ng-content />\n </div>\n <div class=\"gbt-alert__actions\"><ng-content select=\"[alert-actions]\" /></div>\n </div>\n @if (dismissible()) {\n <button\n type=\"button\"\n class=\"gbt-alert__close\"\n [attr.aria-label]=\"closeLabel()\"\n (click)=\"dismissed.emit()\"\n >\n <gbt-icon name=\"x\" aria-hidden=\"true\" />\n </button>\n }\n</div>\n", styles: [".gbt-alert{--gbt-alert-icon: 1.5rem;--gbt-alert-font: .875rem;--gbt-alert-line: calc(var(--gbt-alert-font) * 1.4);--gbt-alert-close: 26px;box-sizing:border-box;display:flex;align-items:center;gap:.625rem;width:100%;padding:.75rem 1rem;border-radius:var(--site-border-radius-sm);border:1.5px solid currentColor}.gbt-alert[data-variant=success]{--gbt-alert-bg: var(--color-success-bg);background:var(--color-success-bg);color:var(--color-success-bg-text)}.gbt-alert[data-variant=warning]{--gbt-alert-bg: var(--color-warning-bg);background:var(--color-warning-bg);color:var(--color-warning-bg-text)}.gbt-alert[data-variant=error]{--gbt-alert-bg: var(--color-error-bg);background:var(--color-error-bg);color:var(--color-error-bg-text)}.gbt-alert[data-variant=info]{--gbt-alert-bg: var(--color-info-bg);background:var(--color-info-bg);color:var(--color-info-bg-text)}.gbt-alert[data-variant=neutral]{--gbt-alert-bg: var(--bg-panel);background:var(--bg-panel);border-color:var(--border-color);color:var(--text-primary)}.gbt-alert[data-size=sm]{--gbt-alert-icon: 1.25rem;--gbt-alert-font: .8125rem;gap:.5rem;padding:.5rem .75rem}.gbt-alert[data-appearance=subtle]{border-width:1px;border-color:color-mix(in srgb,currentColor 30%,transparent);background:color-mix(in srgb,var(--gbt-alert-bg) 55%,var(--bg-principal))}.gbt-alert[data-appearance=subtle][data-variant=neutral]{border-color:color-mix(in srgb,var(--border-color) 60%,transparent)}.gbt-alert[data-appearance=subtle] .gbt-alert__icon{border-width:1px}.gbt-alert__icon{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;box-sizing:border-box;width:var(--gbt-alert-icon);height:var(--gbt-alert-icon);border:1.5px solid currentColor;border-radius:50%}.gbt-alert__icon gbt-icon{width:.875em;height:.875em}.gbt-alert__content{flex:1 1 auto;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;font-size:var(--gbt-alert-font);line-height:1.4}.gbt-alert__message{flex:1 1 14rem}.gbt-alert__heading{margin:0 0 .125rem;font-weight:600}.gbt-alert__actions{display:flex;flex:none;flex-wrap:wrap;align-items:center;gap:.5rem}.gbt-alert__actions:empty{display:none}.gbt-alert[data-heading] .gbt-alert__content{flex-direction:column;align-items:flex-start;gap:.5rem}.gbt-alert[data-heading] .gbt-alert__message{flex:none;width:100%}.gbt-alert__close{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--gbt-alert-close);height:var(--gbt-alert-close);background:none;border:none;border-radius:50%;color:currentColor;opacity:.7;cursor:pointer;transition:opacity var(--site-transition-fast)}.gbt-alert__close:hover,.gbt-alert__close:focus-visible{opacity:1}.gbt-alert__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.gbt-alert[data-icon-align=start],.gbt-alert[data-heading]:not([data-icon-align=center]){align-items:flex-start}.gbt-alert[data-icon-align=start] .gbt-alert__content,.gbt-alert[data-heading]:not([data-icon-align=center]) .gbt-alert__content{align-items:flex-start}.gbt-alert[data-icon-align=start] .gbt-alert__message,.gbt-alert[data-heading]:not([data-icon-align=center]) .gbt-alert__message{padding-block:max(0px,(var(--gbt-alert-icon) - var(--gbt-alert-line)) / 2)}.gbt-alert[data-icon-align=start]:not([data-heading]) .gbt-alert__actions,.gbt-alert[data-heading]:not([data-icon-align=center]):not([data-heading]) .gbt-alert__actions{min-height:var(--gbt-alert-icon);margin-block:-.25rem}.gbt-alert[data-icon-align=start] .gbt-alert__close,.gbt-alert[data-heading]:not([data-icon-align=center]) .gbt-alert__close{margin-block:calc((var(--gbt-alert-icon) - var(--gbt-alert-close)) / 2)}.gbt-alert:not([data-icon-align=center]):has(>.gbt-alert__content>.gbt-alert__actions:not(:empty)){align-items:flex-start}.gbt-alert:not([data-icon-align=center]):has(>.gbt-alert__content>.gbt-alert__actions:not(:empty)) .gbt-alert__content{align-items:flex-start}.gbt-alert:not([data-icon-align=center]):has(>.gbt-alert__content>.gbt-alert__actions:not(:empty)) .gbt-alert__message{padding-block:max(0px,(var(--gbt-alert-icon) - var(--gbt-alert-line)) / 2)}.gbt-alert:not([data-icon-align=center]):has(>.gbt-alert__content>.gbt-alert__actions:not(:empty)):not([data-heading]) .gbt-alert__actions{min-height:var(--gbt-alert-icon);margin-block:-.25rem}.gbt-alert:not([data-icon-align=center]):has(>.gbt-alert__content>.gbt-alert__actions:not(:empty)) .gbt-alert__close{margin-block:calc((var(--gbt-alert-icon) - var(--gbt-alert-close)) / 2)}@media(pointer:coarse){.gbt-alert{--gbt-alert-close: 44px}.gbt-alert__close{margin-block:calc((var(--gbt-alert-icon) - var(--gbt-alert-close)) / 2);margin-inline-end:-.5rem}}\n"], dependencies: [{ kind: "component", type: Icon, selector: "gbt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1324
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: Alert, isStandalone: true, selector: "gbt-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, live: { classPropertyName: "live", publicName: "live", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, iconAlign: { classPropertyName: "iconAlign", publicName: "iconAlign", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, ngImport: i0, template: "<div\n class=\"gbt-alert\"\n [attr.data-variant]=\"variant()\"\n [attr.data-heading]=\"heading() ? '' : null\"\n [attr.data-size]=\"size() === 'md' ? null : size()\"\n [attr.data-appearance]=\"appearance() === 'default' ? null : appearance()\"\n [attr.data-icon-align]=\"iconAlign() === 'auto' ? null : iconAlign()\"\n [attr.role]=\"role()\"\n [attr.aria-atomic]=\"role() ? 'true' : null\"\n>\n <span class=\"gbt-alert__icon\">\n <gbt-icon [name]=\"icon()\" aria-hidden=\"true\" />\n </span>\n <div class=\"gbt-alert__content\">\n <div class=\"gbt-alert__message\">\n @if (heading()) {\n <p class=\"gbt-alert__heading\">{{ heading() }}</p>\n }\n <ng-content />\n </div>\n <div class=\"gbt-alert__actions\"><ng-content select=\"[alert-actions]\" /></div>\n </div>\n @if (dismissible()) {\n <button\n type=\"button\"\n class=\"gbt-alert__close\"\n [attr.aria-label]=\"closeLabel()\"\n (click)=\"dismissed.emit()\"\n >\n <gbt-icon name=\"x\" aria-hidden=\"true\" />\n </button>\n }\n</div>\n", styles: [".gbt-alert{--gbt-alert-icon: 1.5rem;--gbt-alert-font: .875rem;--gbt-alert-line: calc(var(--gbt-alert-font) * 1.4);--gbt-alert-close: 26px;box-sizing:border-box;display:flex;align-items:center;gap:.625rem;width:100%;padding:.75rem 1rem;border-radius:var(--site-border-radius-sm);border:1.5px solid currentColor}.gbt-alert[data-variant=success]{--gbt-alert-bg: var(--color-success-bg);background:var(--color-success-bg);color:var(--color-success-bg-text)}.gbt-alert[data-variant=warning]{--gbt-alert-bg: var(--color-warning-bg);background:var(--color-warning-bg);color:var(--color-warning-bg-text)}.gbt-alert[data-variant=error]{--gbt-alert-bg: var(--color-error-bg);background:var(--color-error-bg);color:var(--color-error-bg-text)}.gbt-alert[data-variant=info]{--gbt-alert-bg: var(--color-info-bg);background:var(--color-info-bg);color:var(--color-info-bg-text)}.gbt-alert[data-variant=neutral]{--gbt-alert-bg: var(--bg-panel);background:var(--bg-panel);border-color:var(--border-color);color:var(--text-primary)}.gbt-alert[data-size=sm]{--gbt-alert-icon: 1.25rem;--gbt-alert-font: .8125rem;gap:.5rem;padding:.5rem .75rem}.gbt-alert[data-appearance=subtle]{border-width:1px;border-color:color-mix(in srgb,currentColor 30%,transparent);background:color-mix(in srgb,var(--gbt-alert-bg) 55%,var(--bg-principal))}.gbt-alert[data-appearance=subtle][data-variant=neutral]{border-color:color-mix(in srgb,var(--border-color) 60%,transparent)}.gbt-alert[data-appearance=subtle] .gbt-alert__icon{border-width:1px}.gbt-alert__icon{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;box-sizing:border-box;width:var(--gbt-alert-icon);height:var(--gbt-alert-icon);border:1.5px solid currentColor;border-radius:50%}.gbt-alert__icon gbt-icon{width:.875em;height:.875em}.gbt-alert__content{flex:1 1 auto;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;font-size:var(--gbt-alert-font);line-height:1.4}.gbt-alert__message{flex:1 1 14rem}.gbt-alert__heading{margin:0 0 .125rem;font-weight:600}.gbt-alert__actions{display:flex;flex:none;flex-wrap:wrap;align-items:center;gap:.5rem}.gbt-alert__actions:empty{display:none}.gbt-alert[data-heading] .gbt-alert__content{flex-direction:column;align-items:flex-start;gap:.5rem}.gbt-alert[data-heading] .gbt-alert__message{flex:none;width:100%}.gbt-alert__close{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--gbt-alert-close);height:var(--gbt-alert-close);background:none;border:none;border-radius:50%;color:currentColor;opacity:.7;cursor:pointer;transition:opacity var(--site-transition-fast)}.gbt-alert__close:hover,.gbt-alert__close:focus-visible{opacity:1}.gbt-alert__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.gbt-alert[data-icon-align=start],.gbt-alert[data-heading]:not([data-icon-align=center]){align-items:flex-start}.gbt-alert[data-icon-align=start] .gbt-alert__content,.gbt-alert[data-heading]:not([data-icon-align=center]) .gbt-alert__content{align-items:flex-start}.gbt-alert[data-icon-align=start] .gbt-alert__message,.gbt-alert[data-heading]:not([data-icon-align=center]) .gbt-alert__message{padding-block:max(0px,(var(--gbt-alert-icon) - var(--gbt-alert-line)) / 2)}.gbt-alert[data-icon-align=start]:not([data-heading]) .gbt-alert__actions,.gbt-alert[data-heading]:not([data-icon-align=center]):not([data-heading]) .gbt-alert__actions{min-height:var(--gbt-alert-icon);margin-block:-.25rem}.gbt-alert[data-icon-align=start] .gbt-alert__close,.gbt-alert[data-heading]:not([data-icon-align=center]) .gbt-alert__close{margin-block:calc((var(--gbt-alert-icon) - var(--gbt-alert-close)) / 2)}.gbt-alert:not([data-icon-align=center]):has(>.gbt-alert__content>.gbt-alert__actions:not(:empty)){align-items:flex-start}.gbt-alert:not([data-icon-align=center]):has(>.gbt-alert__content>.gbt-alert__actions:not(:empty)) .gbt-alert__content{align-items:flex-start}.gbt-alert:not([data-icon-align=center]):has(>.gbt-alert__content>.gbt-alert__actions:not(:empty)) .gbt-alert__message{padding-block:max(0px,(var(--gbt-alert-icon) - var(--gbt-alert-line)) / 2)}.gbt-alert:not([data-icon-align=center]):has(>.gbt-alert__content>.gbt-alert__actions:not(:empty)):not([data-heading]) .gbt-alert__actions{min-height:var(--gbt-alert-icon);margin-block:-.25rem}.gbt-alert:not([data-icon-align=center]):has(>.gbt-alert__content>.gbt-alert__actions:not(:empty)) .gbt-alert__close{margin-block:calc((var(--gbt-alert-icon) - var(--gbt-alert-close)) / 2)}@media(pointer:coarse){.gbt-alert{--gbt-alert-close: 44px}.gbt-alert__close{margin-block:calc((var(--gbt-alert-icon) - var(--gbt-alert-close)) / 2);margin-inline-end:-.5rem}.gbt-alert__actions ::ng-deep .gbt-button{min-height:44px}}\n"], dependencies: [{ kind: "component", type: Icon, selector: "gbt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1325
1325
|
}
|
|
1326
1326
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: Alert, decorators: [{
|
|
1327
1327
|
type: Component,
|
|
1328
|
-
args: [{ selector: 'gbt-alert', standalone: true, imports: [Icon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"gbt-alert\"\n [attr.data-variant]=\"variant()\"\n [attr.data-heading]=\"heading() ? '' : null\"\n [attr.data-size]=\"size() === 'md' ? null : size()\"\n [attr.data-appearance]=\"appearance() === 'default' ? null : appearance()\"\n [attr.data-icon-align]=\"iconAlign() === 'auto' ? null : iconAlign()\"\n [attr.role]=\"role()\"\n [attr.aria-atomic]=\"role() ? 'true' : null\"\n>\n <span class=\"gbt-alert__icon\">\n <gbt-icon [name]=\"icon()\" aria-hidden=\"true\" />\n </span>\n <div class=\"gbt-alert__content\">\n <div class=\"gbt-alert__message\">\n @if (heading()) {\n <p class=\"gbt-alert__heading\">{{ heading() }}</p>\n }\n <ng-content />\n </div>\n <div class=\"gbt-alert__actions\"><ng-content select=\"[alert-actions]\" /></div>\n </div>\n @if (dismissible()) {\n <button\n type=\"button\"\n class=\"gbt-alert__close\"\n [attr.aria-label]=\"closeLabel()\"\n (click)=\"dismissed.emit()\"\n >\n <gbt-icon name=\"x\" aria-hidden=\"true\" />\n </button>\n }\n</div>\n", styles: [".gbt-alert{--gbt-alert-icon: 1.5rem;--gbt-alert-font: .875rem;--gbt-alert-line: calc(var(--gbt-alert-font) * 1.4);--gbt-alert-close: 26px;box-sizing:border-box;display:flex;align-items:center;gap:.625rem;width:100%;padding:.75rem 1rem;border-radius:var(--site-border-radius-sm);border:1.5px solid currentColor}.gbt-alert[data-variant=success]{--gbt-alert-bg: var(--color-success-bg);background:var(--color-success-bg);color:var(--color-success-bg-text)}.gbt-alert[data-variant=warning]{--gbt-alert-bg: var(--color-warning-bg);background:var(--color-warning-bg);color:var(--color-warning-bg-text)}.gbt-alert[data-variant=error]{--gbt-alert-bg: var(--color-error-bg);background:var(--color-error-bg);color:var(--color-error-bg-text)}.gbt-alert[data-variant=info]{--gbt-alert-bg: var(--color-info-bg);background:var(--color-info-bg);color:var(--color-info-bg-text)}.gbt-alert[data-variant=neutral]{--gbt-alert-bg: var(--bg-panel);background:var(--bg-panel);border-color:var(--border-color);color:var(--text-primary)}.gbt-alert[data-size=sm]{--gbt-alert-icon: 1.25rem;--gbt-alert-font: .8125rem;gap:.5rem;padding:.5rem .75rem}.gbt-alert[data-appearance=subtle]{border-width:1px;border-color:color-mix(in srgb,currentColor 30%,transparent);background:color-mix(in srgb,var(--gbt-alert-bg) 55%,var(--bg-principal))}.gbt-alert[data-appearance=subtle][data-variant=neutral]{border-color:color-mix(in srgb,var(--border-color) 60%,transparent)}.gbt-alert[data-appearance=subtle] .gbt-alert__icon{border-width:1px}.gbt-alert__icon{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;box-sizing:border-box;width:var(--gbt-alert-icon);height:var(--gbt-alert-icon);border:1.5px solid currentColor;border-radius:50%}.gbt-alert__icon gbt-icon{width:.875em;height:.875em}.gbt-alert__content{flex:1 1 auto;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;font-size:var(--gbt-alert-font);line-height:1.4}.gbt-alert__message{flex:1 1 14rem}.gbt-alert__heading{margin:0 0 .125rem;font-weight:600}.gbt-alert__actions{display:flex;flex:none;flex-wrap:wrap;align-items:center;gap:.5rem}.gbt-alert__actions:empty{display:none}.gbt-alert[data-heading] .gbt-alert__content{flex-direction:column;align-items:flex-start;gap:.5rem}.gbt-alert[data-heading] .gbt-alert__message{flex:none;width:100%}.gbt-alert__close{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--gbt-alert-close);height:var(--gbt-alert-close);background:none;border:none;border-radius:50%;color:currentColor;opacity:.7;cursor:pointer;transition:opacity var(--site-transition-fast)}.gbt-alert__close:hover,.gbt-alert__close:focus-visible{opacity:1}.gbt-alert__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.gbt-alert[data-icon-align=start],.gbt-alert[data-heading]:not([data-icon-align=center]){align-items:flex-start}.gbt-alert[data-icon-align=start] .gbt-alert__content,.gbt-alert[data-heading]:not([data-icon-align=center]) .gbt-alert__content{align-items:flex-start}.gbt-alert[data-icon-align=start] .gbt-alert__message,.gbt-alert[data-heading]:not([data-icon-align=center]) .gbt-alert__message{padding-block:max(0px,(var(--gbt-alert-icon) - var(--gbt-alert-line)) / 2)}.gbt-alert[data-icon-align=start]:not([data-heading]) .gbt-alert__actions,.gbt-alert[data-heading]:not([data-icon-align=center]):not([data-heading]) .gbt-alert__actions{min-height:var(--gbt-alert-icon);margin-block:-.25rem}.gbt-alert[data-icon-align=start] .gbt-alert__close,.gbt-alert[data-heading]:not([data-icon-align=center]) .gbt-alert__close{margin-block:calc((var(--gbt-alert-icon) - var(--gbt-alert-close)) / 2)}.gbt-alert:not([data-icon-align=center]):has(>.gbt-alert__content>.gbt-alert__actions:not(:empty)){align-items:flex-start}.gbt-alert:not([data-icon-align=center]):has(>.gbt-alert__content>.gbt-alert__actions:not(:empty)) .gbt-alert__content{align-items:flex-start}.gbt-alert:not([data-icon-align=center]):has(>.gbt-alert__content>.gbt-alert__actions:not(:empty)) .gbt-alert__message{padding-block:max(0px,(var(--gbt-alert-icon) - var(--gbt-alert-line)) / 2)}.gbt-alert:not([data-icon-align=center]):has(>.gbt-alert__content>.gbt-alert__actions:not(:empty)):not([data-heading]) .gbt-alert__actions{min-height:var(--gbt-alert-icon);margin-block:-.25rem}.gbt-alert:not([data-icon-align=center]):has(>.gbt-alert__content>.gbt-alert__actions:not(:empty)) .gbt-alert__close{margin-block:calc((var(--gbt-alert-icon) - var(--gbt-alert-close)) / 2)}@media(pointer:coarse){.gbt-alert{--gbt-alert-close: 44px}.gbt-alert__close{margin-block:calc((var(--gbt-alert-icon) - var(--gbt-alert-close)) / 2);margin-inline-end:-.5rem}}\n"] }]
|
|
1328
|
+
args: [{ selector: 'gbt-alert', standalone: true, imports: [Icon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"gbt-alert\"\n [attr.data-variant]=\"variant()\"\n [attr.data-heading]=\"heading() ? '' : null\"\n [attr.data-size]=\"size() === 'md' ? null : size()\"\n [attr.data-appearance]=\"appearance() === 'default' ? null : appearance()\"\n [attr.data-icon-align]=\"iconAlign() === 'auto' ? null : iconAlign()\"\n [attr.role]=\"role()\"\n [attr.aria-atomic]=\"role() ? 'true' : null\"\n>\n <span class=\"gbt-alert__icon\">\n <gbt-icon [name]=\"icon()\" aria-hidden=\"true\" />\n </span>\n <div class=\"gbt-alert__content\">\n <div class=\"gbt-alert__message\">\n @if (heading()) {\n <p class=\"gbt-alert__heading\">{{ heading() }}</p>\n }\n <ng-content />\n </div>\n <div class=\"gbt-alert__actions\"><ng-content select=\"[alert-actions]\" /></div>\n </div>\n @if (dismissible()) {\n <button\n type=\"button\"\n class=\"gbt-alert__close\"\n [attr.aria-label]=\"closeLabel()\"\n (click)=\"dismissed.emit()\"\n >\n <gbt-icon name=\"x\" aria-hidden=\"true\" />\n </button>\n }\n</div>\n", styles: [".gbt-alert{--gbt-alert-icon: 1.5rem;--gbt-alert-font: .875rem;--gbt-alert-line: calc(var(--gbt-alert-font) * 1.4);--gbt-alert-close: 26px;box-sizing:border-box;display:flex;align-items:center;gap:.625rem;width:100%;padding:.75rem 1rem;border-radius:var(--site-border-radius-sm);border:1.5px solid currentColor}.gbt-alert[data-variant=success]{--gbt-alert-bg: var(--color-success-bg);background:var(--color-success-bg);color:var(--color-success-bg-text)}.gbt-alert[data-variant=warning]{--gbt-alert-bg: var(--color-warning-bg);background:var(--color-warning-bg);color:var(--color-warning-bg-text)}.gbt-alert[data-variant=error]{--gbt-alert-bg: var(--color-error-bg);background:var(--color-error-bg);color:var(--color-error-bg-text)}.gbt-alert[data-variant=info]{--gbt-alert-bg: var(--color-info-bg);background:var(--color-info-bg);color:var(--color-info-bg-text)}.gbt-alert[data-variant=neutral]{--gbt-alert-bg: var(--bg-panel);background:var(--bg-panel);border-color:var(--border-color);color:var(--text-primary)}.gbt-alert[data-size=sm]{--gbt-alert-icon: 1.25rem;--gbt-alert-font: .8125rem;gap:.5rem;padding:.5rem .75rem}.gbt-alert[data-appearance=subtle]{border-width:1px;border-color:color-mix(in srgb,currentColor 30%,transparent);background:color-mix(in srgb,var(--gbt-alert-bg) 55%,var(--bg-principal))}.gbt-alert[data-appearance=subtle][data-variant=neutral]{border-color:color-mix(in srgb,var(--border-color) 60%,transparent)}.gbt-alert[data-appearance=subtle] .gbt-alert__icon{border-width:1px}.gbt-alert__icon{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;box-sizing:border-box;width:var(--gbt-alert-icon);height:var(--gbt-alert-icon);border:1.5px solid currentColor;border-radius:50%}.gbt-alert__icon gbt-icon{width:.875em;height:.875em}.gbt-alert__content{flex:1 1 auto;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;font-size:var(--gbt-alert-font);line-height:1.4}.gbt-alert__message{flex:1 1 14rem}.gbt-alert__heading{margin:0 0 .125rem;font-weight:600}.gbt-alert__actions{display:flex;flex:none;flex-wrap:wrap;align-items:center;gap:.5rem}.gbt-alert__actions:empty{display:none}.gbt-alert[data-heading] .gbt-alert__content{flex-direction:column;align-items:flex-start;gap:.5rem}.gbt-alert[data-heading] .gbt-alert__message{flex:none;width:100%}.gbt-alert__close{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--gbt-alert-close);height:var(--gbt-alert-close);background:none;border:none;border-radius:50%;color:currentColor;opacity:.7;cursor:pointer;transition:opacity var(--site-transition-fast)}.gbt-alert__close:hover,.gbt-alert__close:focus-visible{opacity:1}.gbt-alert__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.gbt-alert[data-icon-align=start],.gbt-alert[data-heading]:not([data-icon-align=center]){align-items:flex-start}.gbt-alert[data-icon-align=start] .gbt-alert__content,.gbt-alert[data-heading]:not([data-icon-align=center]) .gbt-alert__content{align-items:flex-start}.gbt-alert[data-icon-align=start] .gbt-alert__message,.gbt-alert[data-heading]:not([data-icon-align=center]) .gbt-alert__message{padding-block:max(0px,(var(--gbt-alert-icon) - var(--gbt-alert-line)) / 2)}.gbt-alert[data-icon-align=start]:not([data-heading]) .gbt-alert__actions,.gbt-alert[data-heading]:not([data-icon-align=center]):not([data-heading]) .gbt-alert__actions{min-height:var(--gbt-alert-icon);margin-block:-.25rem}.gbt-alert[data-icon-align=start] .gbt-alert__close,.gbt-alert[data-heading]:not([data-icon-align=center]) .gbt-alert__close{margin-block:calc((var(--gbt-alert-icon) - var(--gbt-alert-close)) / 2)}.gbt-alert:not([data-icon-align=center]):has(>.gbt-alert__content>.gbt-alert__actions:not(:empty)){align-items:flex-start}.gbt-alert:not([data-icon-align=center]):has(>.gbt-alert__content>.gbt-alert__actions:not(:empty)) .gbt-alert__content{align-items:flex-start}.gbt-alert:not([data-icon-align=center]):has(>.gbt-alert__content>.gbt-alert__actions:not(:empty)) .gbt-alert__message{padding-block:max(0px,(var(--gbt-alert-icon) - var(--gbt-alert-line)) / 2)}.gbt-alert:not([data-icon-align=center]):has(>.gbt-alert__content>.gbt-alert__actions:not(:empty)):not([data-heading]) .gbt-alert__actions{min-height:var(--gbt-alert-icon);margin-block:-.25rem}.gbt-alert:not([data-icon-align=center]):has(>.gbt-alert__content>.gbt-alert__actions:not(:empty)) .gbt-alert__close{margin-block:calc((var(--gbt-alert-icon) - var(--gbt-alert-close)) / 2)}@media(pointer:coarse){.gbt-alert{--gbt-alert-close: 44px}.gbt-alert__close{margin-block:calc((var(--gbt-alert-icon) - var(--gbt-alert-close)) / 2);margin-inline-end:-.5rem}.gbt-alert__actions ::ng-deep .gbt-button{min-height:44px}}\n"] }]
|
|
1329
1329
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], live: [{ type: i0.Input, args: [{ isSignal: true, alias: "live", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], iconAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconAlign", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }] } });
|
|
1330
1330
|
|
|
1331
1331
|
const HEX_6 = /^#?[0-9a-fA-F]{6}$/;
|