structra-ui 0.1.48 → 0.1.50
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.
- package/fesm2022/structra-ui.mjs +60 -32
- package/fesm2022/structra-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/structra-ui.d.ts +30 -7
package/fesm2022/structra-ui.mjs
CHANGED
|
@@ -240,6 +240,9 @@ var BaseButtonType;
|
|
|
240
240
|
BaseButtonType["Submit"] = "submit";
|
|
241
241
|
BaseButtonType["Reset"] = "reset";
|
|
242
242
|
})(BaseButtonType || (BaseButtonType = {}));
|
|
243
|
+
/**
|
|
244
|
+
* Base do botão; **não** exposta no barrel público `buttons`. Use `ButtonComponent` (`app-button`).
|
|
245
|
+
*/
|
|
243
246
|
class BaseButtonComponent {
|
|
244
247
|
constructor() {
|
|
245
248
|
/** `submit` envia o `<form>` ancestral; use `button` para ações sem submit. */
|
|
@@ -293,7 +296,7 @@ class BaseButtonComponent {
|
|
|
293
296
|
}
|
|
294
297
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BaseButtonComponent, decorators: [{
|
|
295
298
|
type: Component,
|
|
296
|
-
args: [{ selector: 'app-base-button', imports: [SkeletonBlockComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!loading) {\r\n<button\r\n #nativeBtn\r\n class=\"base-button__native\"\r\n [attr.type]=\"type\"\r\n [disabled]=\"disabled || readonly\"\r\n [attr.aria-readonly]=\"readonly ? true : null\"\r\n>\r\n <ng-content />\r\n</button>\r\n} @else {\r\n<div class=\"base-button__native base-button__native--skeleton\" role=\"status\" aria-live=\"polite\" aria-busy=\"true\"\r\n aria-label=\"A carregar\">\r\n <app-skeleton-block width=\"40%\" height=\"0.7rem\" radius=\"8px\" />\r\n</div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;width:fit-content;max-width:100%;box-sizing:border-box;vertical-align:middle}.base-button__native{-webkit-appearance:none;appearance:none;display:flex;width:auto;min-width:5rem;align-items:center;justify-content:center;text-align:center;gap:.5rem;min-height:2.5rem;padding:.5rem 1.25rem;margin:0;border:1px solid transparent;border-radius:var(--ui-field-float-border-radius, 14px);font:inherit;font-size:.9375rem;font-weight:600;line-height:1.25;cursor:pointer;user-select:none;-webkit-user-select:none;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease}:host(.base-button--full-width){display:block;width:auto;min-width:0;max-width:100%;box-sizing:border-box}:host(.base-button--full-width) .base-button__native{width:100%;min-width:0}.base-button__native:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ui-field-float-focus-ring, rgba(43, 127, 217, .35))}:host(.base-button--primary) .base-button__native{color:var(--app-color-primary-contrast, #ffffff);background:var(--ui-field-float-border-focus, #2b7fd9);border-color:var(--ui-field-float-border-focus, #2b7fd9)}:host(.base-button--primary) .base-button__native:hover:not(:disabled){filter:brightness(.95)}:host(.base-button--secondary) .base-button__native{color:var(--ui-field-float-label-top-color, #4a6d8c);background:var(--ui-field-float-bg, #f3f7fb);border-color:var(--ui-field-float-border, #b6cce5)}:host(.base-button--secondary) .base-button__native:hover:not(:disabled){background:var(--app-color-button-secondary-hover-bg, #e8f0fa)}:host(.base-button--ghost) .base-button__native{color:var(--app-color-text-primary, #1a2f45);background:transparent;border-color:transparent;min-width:0;min-height:2.25rem;padding:.35rem .5rem;border-radius:8px;font-size:.95rem;font-weight:600;justify-content:flex-start;gap:.45rem}:host(.base-button--ghost) .base-button__native:hover:not(:disabled){color:var(--app-color-nav-link);background:color-mix(in srgb,var(--app-color-primary) 6%,transparent)}:host(.base-button--disabled:not(.base-button--readonly)) .base-button__native,.base-button__native:disabled:not([aria-readonly=true]){cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity, .65)}:host(.base-button--readonly) .base-button__native{cursor:default;opacity:1;color:var(--ui-field-readonly-button-text, #37474f);background:var(--ui-field-readonly-button-bg, #cfd8dc);border-color:var(--ui-field-readonly-button-border, #90a4ae)}:host(.base-button--readonly) .base-button__native:hover:not(:disabled){filter:brightness(.97)}:host(.base-button--readonly) .base-button__native:focus-visible{box-shadow:0 0 0 3px var(--ui-field-readonly-button-focus-ring, rgba(96, 125, 139, .35))}.base-button__native--skeleton{pointer-events:none;cursor:default}:host(.base-button--primary.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--ui-field-float-border-focus, #2b7fd9) 82%,#ffffff);border-color:color-mix(in srgb,var(--ui-field-float-border-focus, #2b7fd9) 82%,#ffffff)}:host(.base-button--secondary.base-button--loading) .base-button__native--skeleton{background:var(--ui-field-float-bg, #f3f7fb);border-color:var(--ui-field-float-border, #b6cce5)}:host(.base-button--ghost.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 8%,transparent);border-color:transparent}\n"] }]
|
|
299
|
+
args: [{ selector: 'app-base-button', standalone: true, imports: [SkeletonBlockComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!loading) {\r\n<button\r\n #nativeBtn\r\n class=\"base-button__native\"\r\n [attr.type]=\"type\"\r\n [disabled]=\"disabled || readonly\"\r\n [attr.aria-readonly]=\"readonly ? true : null\"\r\n>\r\n <ng-content />\r\n</button>\r\n} @else {\r\n<div class=\"base-button__native base-button__native--skeleton\" role=\"status\" aria-live=\"polite\" aria-busy=\"true\"\r\n aria-label=\"A carregar\">\r\n <app-skeleton-block width=\"40%\" height=\"0.7rem\" radius=\"8px\" />\r\n</div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;width:fit-content;max-width:100%;box-sizing:border-box;vertical-align:middle}.base-button__native{-webkit-appearance:none;appearance:none;display:flex;width:auto;min-width:5rem;align-items:center;justify-content:center;text-align:center;gap:.5rem;min-height:2.5rem;padding:.5rem 1.25rem;margin:0;border:1px solid transparent;border-radius:var(--ui-field-float-border-radius, 14px);font:inherit;font-size:.9375rem;font-weight:600;line-height:1.25;cursor:pointer;user-select:none;-webkit-user-select:none;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease}:host(.base-button--full-width){display:block;width:auto;min-width:0;max-width:100%;box-sizing:border-box}:host(.base-button--full-width) .base-button__native{width:100%;min-width:0}.base-button__native:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ui-field-float-focus-ring, rgba(43, 127, 217, .35))}:host(.base-button--primary) .base-button__native{color:var(--app-color-primary-contrast, #ffffff);background:var(--ui-field-float-border-focus, #2b7fd9);border-color:var(--ui-field-float-border-focus, #2b7fd9)}:host(.base-button--primary) .base-button__native:hover:not(:disabled){filter:brightness(.95)}:host(.base-button--secondary) .base-button__native{color:var(--ui-field-float-label-top-color, #4a6d8c);background:var(--ui-field-float-bg, #f3f7fb);border-color:var(--ui-field-float-border, #b6cce5)}:host(.base-button--secondary) .base-button__native:hover:not(:disabled){background:var(--app-color-button-secondary-hover-bg, #e8f0fa)}:host(.base-button--ghost) .base-button__native{color:var(--app-color-text-primary, #1a2f45);background:transparent;border-color:transparent;min-width:0;min-height:2.25rem;padding:.35rem .5rem;border-radius:8px;font-size:.95rem;font-weight:600;justify-content:flex-start;gap:.45rem}:host(.base-button--ghost) .base-button__native:hover:not(:disabled){color:var(--app-color-nav-link);background:color-mix(in srgb,var(--app-color-primary) 6%,transparent)}:host(.base-button--disabled:not(.base-button--readonly)) .base-button__native,.base-button__native:disabled:not([aria-readonly=true]){cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity, .65)}:host(.base-button--readonly) .base-button__native{cursor:default;opacity:1;color:var(--ui-field-readonly-button-text, #37474f);background:var(--ui-field-readonly-button-bg, #cfd8dc);border-color:var(--ui-field-readonly-button-border, #90a4ae)}:host(.base-button--readonly) .base-button__native:hover:not(:disabled){filter:brightness(.97)}:host(.base-button--readonly) .base-button__native:focus-visible{box-shadow:0 0 0 3px var(--ui-field-readonly-button-focus-ring, rgba(96, 125, 139, .35))}.base-button__native--skeleton{pointer-events:none;cursor:default}:host(.base-button--primary.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--ui-field-float-border-focus, #2b7fd9) 82%,#ffffff);border-color:color-mix(in srgb,var(--ui-field-float-border-focus, #2b7fd9) 82%,#ffffff)}:host(.base-button--secondary.base-button--loading) .base-button__native--skeleton{background:var(--ui-field-float-bg, #f3f7fb);border-color:var(--ui-field-float-border, #b6cce5)}:host(.base-button--ghost.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 8%,transparent);border-color:transparent}\n"] }]
|
|
297
300
|
}], propDecorators: { nativeBtn: [{
|
|
298
301
|
type: ViewChild,
|
|
299
302
|
args: ['nativeBtn', { read: ElementRef }]
|
|
@@ -321,6 +324,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
321
324
|
args: ['class']
|
|
322
325
|
}] } });
|
|
323
326
|
|
|
327
|
+
/**
|
|
328
|
+
* Botão público da library (`app-button`). Comportamento e API iguais a {@link BaseButtonComponent};
|
|
329
|
+
* use sempre este componente em templates — a base permanece interna ao pacote.
|
|
330
|
+
*/
|
|
331
|
+
class ButtonComponent extends BaseButtonComponent {
|
|
332
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
333
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ButtonComponent, isStandalone: true, selector: "app-button", usesInheritance: true, ngImport: i0, template: "@if (!loading) {\r\n<button\r\n #nativeBtn\r\n class=\"base-button__native\"\r\n [attr.type]=\"type\"\r\n [disabled]=\"disabled || readonly\"\r\n [attr.aria-readonly]=\"readonly ? true : null\"\r\n>\r\n <ng-content />\r\n</button>\r\n} @else {\r\n<div class=\"base-button__native base-button__native--skeleton\" role=\"status\" aria-live=\"polite\" aria-busy=\"true\"\r\n aria-label=\"A carregar\">\r\n <app-skeleton-block width=\"40%\" height=\"0.7rem\" radius=\"8px\" />\r\n</div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;width:fit-content;max-width:100%;box-sizing:border-box;vertical-align:middle}.base-button__native{-webkit-appearance:none;appearance:none;display:flex;width:auto;min-width:5rem;align-items:center;justify-content:center;text-align:center;gap:.5rem;min-height:2.5rem;padding:.5rem 1.25rem;margin:0;border:1px solid transparent;border-radius:var(--ui-field-float-border-radius, 14px);font:inherit;font-size:.9375rem;font-weight:600;line-height:1.25;cursor:pointer;user-select:none;-webkit-user-select:none;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease}:host(.base-button--full-width){display:block;width:auto;min-width:0;max-width:100%;box-sizing:border-box}:host(.base-button--full-width) .base-button__native{width:100%;min-width:0}.base-button__native:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ui-field-float-focus-ring, rgba(43, 127, 217, .35))}:host(.base-button--primary) .base-button__native{color:var(--app-color-primary-contrast, #ffffff);background:var(--ui-field-float-border-focus, #2b7fd9);border-color:var(--ui-field-float-border-focus, #2b7fd9)}:host(.base-button--primary) .base-button__native:hover:not(:disabled){filter:brightness(.95)}:host(.base-button--secondary) .base-button__native{color:var(--ui-field-float-label-top-color, #4a6d8c);background:var(--ui-field-float-bg, #f3f7fb);border-color:var(--ui-field-float-border, #b6cce5)}:host(.base-button--secondary) .base-button__native:hover:not(:disabled){background:var(--app-color-button-secondary-hover-bg, #e8f0fa)}:host(.base-button--ghost) .base-button__native{color:var(--app-color-text-primary, #1a2f45);background:transparent;border-color:transparent;min-width:0;min-height:2.25rem;padding:.35rem .5rem;border-radius:8px;font-size:.95rem;font-weight:600;justify-content:flex-start;gap:.45rem}:host(.base-button--ghost) .base-button__native:hover:not(:disabled){color:var(--app-color-nav-link);background:color-mix(in srgb,var(--app-color-primary) 6%,transparent)}:host(.base-button--disabled:not(.base-button--readonly)) .base-button__native,.base-button__native:disabled:not([aria-readonly=true]){cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity, .65)}:host(.base-button--readonly) .base-button__native{cursor:default;opacity:1;color:var(--ui-field-readonly-button-text, #37474f);background:var(--ui-field-readonly-button-bg, #cfd8dc);border-color:var(--ui-field-readonly-button-border, #90a4ae)}:host(.base-button--readonly) .base-button__native:hover:not(:disabled){filter:brightness(.97)}:host(.base-button--readonly) .base-button__native:focus-visible{box-shadow:0 0 0 3px var(--ui-field-readonly-button-focus-ring, rgba(96, 125, 139, .35))}.base-button__native--skeleton{pointer-events:none;cursor:default}:host(.base-button--primary.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--ui-field-float-border-focus, #2b7fd9) 82%,#ffffff);border-color:color-mix(in srgb,var(--ui-field-float-border-focus, #2b7fd9) 82%,#ffffff)}:host(.base-button--secondary.base-button--loading) .base-button__native--skeleton{background:var(--ui-field-float-bg, #f3f7fb);border-color:var(--ui-field-float-border, #b6cce5)}:host(.base-button--ghost.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 8%,transparent);border-color:transparent}\n"], dependencies: [{ kind: "component", type: SkeletonBlockComponent, selector: "app-skeleton-block", inputs: ["width", "height", "radius", "animate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
334
|
+
}
|
|
335
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
336
|
+
type: Component,
|
|
337
|
+
args: [{ selector: 'app-button', standalone: true, imports: [SkeletonBlockComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!loading) {\r\n<button\r\n #nativeBtn\r\n class=\"base-button__native\"\r\n [attr.type]=\"type\"\r\n [disabled]=\"disabled || readonly\"\r\n [attr.aria-readonly]=\"readonly ? true : null\"\r\n>\r\n <ng-content />\r\n</button>\r\n} @else {\r\n<div class=\"base-button__native base-button__native--skeleton\" role=\"status\" aria-live=\"polite\" aria-busy=\"true\"\r\n aria-label=\"A carregar\">\r\n <app-skeleton-block width=\"40%\" height=\"0.7rem\" radius=\"8px\" />\r\n</div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;width:fit-content;max-width:100%;box-sizing:border-box;vertical-align:middle}.base-button__native{-webkit-appearance:none;appearance:none;display:flex;width:auto;min-width:5rem;align-items:center;justify-content:center;text-align:center;gap:.5rem;min-height:2.5rem;padding:.5rem 1.25rem;margin:0;border:1px solid transparent;border-radius:var(--ui-field-float-border-radius, 14px);font:inherit;font-size:.9375rem;font-weight:600;line-height:1.25;cursor:pointer;user-select:none;-webkit-user-select:none;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease}:host(.base-button--full-width){display:block;width:auto;min-width:0;max-width:100%;box-sizing:border-box}:host(.base-button--full-width) .base-button__native{width:100%;min-width:0}.base-button__native:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ui-field-float-focus-ring, rgba(43, 127, 217, .35))}:host(.base-button--primary) .base-button__native{color:var(--app-color-primary-contrast, #ffffff);background:var(--ui-field-float-border-focus, #2b7fd9);border-color:var(--ui-field-float-border-focus, #2b7fd9)}:host(.base-button--primary) .base-button__native:hover:not(:disabled){filter:brightness(.95)}:host(.base-button--secondary) .base-button__native{color:var(--ui-field-float-label-top-color, #4a6d8c);background:var(--ui-field-float-bg, #f3f7fb);border-color:var(--ui-field-float-border, #b6cce5)}:host(.base-button--secondary) .base-button__native:hover:not(:disabled){background:var(--app-color-button-secondary-hover-bg, #e8f0fa)}:host(.base-button--ghost) .base-button__native{color:var(--app-color-text-primary, #1a2f45);background:transparent;border-color:transparent;min-width:0;min-height:2.25rem;padding:.35rem .5rem;border-radius:8px;font-size:.95rem;font-weight:600;justify-content:flex-start;gap:.45rem}:host(.base-button--ghost) .base-button__native:hover:not(:disabled){color:var(--app-color-nav-link);background:color-mix(in srgb,var(--app-color-primary) 6%,transparent)}:host(.base-button--disabled:not(.base-button--readonly)) .base-button__native,.base-button__native:disabled:not([aria-readonly=true]){cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity, .65)}:host(.base-button--readonly) .base-button__native{cursor:default;opacity:1;color:var(--ui-field-readonly-button-text, #37474f);background:var(--ui-field-readonly-button-bg, #cfd8dc);border-color:var(--ui-field-readonly-button-border, #90a4ae)}:host(.base-button--readonly) .base-button__native:hover:not(:disabled){filter:brightness(.97)}:host(.base-button--readonly) .base-button__native:focus-visible{box-shadow:0 0 0 3px var(--ui-field-readonly-button-focus-ring, rgba(96, 125, 139, .35))}.base-button__native--skeleton{pointer-events:none;cursor:default}:host(.base-button--primary.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--ui-field-float-border-focus, #2b7fd9) 82%,#ffffff);border-color:color-mix(in srgb,var(--ui-field-float-border-focus, #2b7fd9) 82%,#ffffff)}:host(.base-button--secondary.base-button--loading) .base-button__native--skeleton{background:var(--ui-field-float-bg, #f3f7fb);border-color:var(--ui-field-float-border, #b6cce5)}:host(.base-button--ghost.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--app-color-text-primary, #1a2f45) 8%,transparent);border-color:transparent}\n"] }]
|
|
338
|
+
}] });
|
|
339
|
+
|
|
324
340
|
let fieldControlAutoId = 0;
|
|
325
341
|
/**
|
|
326
342
|
* Diretiva base abstrata: CVA, valor interno, disabled, touched e inputs comuns.
|
|
@@ -541,15 +557,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
541
557
|
type: Output
|
|
542
558
|
}] } });
|
|
543
559
|
|
|
560
|
+
/** Identificadores de paleta suportados pela library (uso em `AppThemeService.setTheme`). */
|
|
561
|
+
var AppTheme;
|
|
562
|
+
(function (AppTheme) {
|
|
563
|
+
AppTheme["Blue"] = "blue";
|
|
564
|
+
AppTheme["Green"] = "green";
|
|
565
|
+
AppTheme["Purple"] = "purple";
|
|
566
|
+
AppTheme["Orange"] = "orange";
|
|
567
|
+
AppTheme["White"] = "white";
|
|
568
|
+
AppTheme["Gray"] = "gray";
|
|
569
|
+
AppTheme["Sepia"] = "sepia";
|
|
570
|
+
AppTheme["Black"] = "black";
|
|
571
|
+
})(AppTheme || (AppTheme = {}));
|
|
544
572
|
const APP_THEME_IDS = [
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
573
|
+
AppTheme.Blue,
|
|
574
|
+
AppTheme.Green,
|
|
575
|
+
AppTheme.Purple,
|
|
576
|
+
AppTheme.Orange,
|
|
577
|
+
AppTheme.White,
|
|
578
|
+
AppTheme.Gray,
|
|
579
|
+
AppTheme.Sepia,
|
|
580
|
+
AppTheme.Black,
|
|
553
581
|
];
|
|
554
582
|
/**
|
|
555
583
|
* Estado global do tema da library: **sempre** `.app-library-theme` + `theme-*` juntos.
|
|
@@ -557,7 +585,7 @@ const APP_THEME_IDS = [
|
|
|
557
585
|
*/
|
|
558
586
|
class AppThemeService {
|
|
559
587
|
constructor() {
|
|
560
|
-
this.activeId = signal(
|
|
588
|
+
this.activeId = signal(AppTheme.Black, ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
|
|
561
589
|
/** Identificador do tema activo (`blue`, `green`, …). */
|
|
562
590
|
this.activeThemeId = this.activeId.asReadonly();
|
|
563
591
|
/**
|
|
@@ -566,9 +594,9 @@ class AppThemeService {
|
|
|
566
594
|
this.themeClassList = computed(() => ['app-library-theme', `theme-${this.activeId()}`], ...(ngDevMode ? [{ debugName: "themeClassList" }] : /* istanbul ignore next */ []));
|
|
567
595
|
/**
|
|
568
596
|
* As duas classes numa string — útil para `[class]`, `[ngClass]` com string, ou hosts HTML.
|
|
569
|
-
* Ex.: `<div [ngClass]="libTheme.
|
|
597
|
+
* Ex.: `<div [ngClass]="libTheme.getTheme()">` aplica paleta completa no consumidor.
|
|
570
598
|
*/
|
|
571
|
-
this.
|
|
599
|
+
this.getTheme = computed(() => this.themeClassList().join(' '), ...(ngDevMode ? [{ debugName: "getTheme" }] : /* istanbul ignore next */ []));
|
|
572
600
|
/** Mapa para `[ngClass]` com chaves dinâmicas (painéis overlay). */
|
|
573
601
|
this.themeClassMap = computed(() => {
|
|
574
602
|
const [base, token] = this.themeClassList();
|
|
@@ -576,14 +604,14 @@ class AppThemeService {
|
|
|
576
604
|
}, ...(ngDevMode ? [{ debugName: "themeClassMap" }] : /* istanbul ignore next */ []));
|
|
577
605
|
/** Lista fixa de temas suportados pela library. */
|
|
578
606
|
this.themeOptions = [
|
|
579
|
-
{ id:
|
|
580
|
-
{ id:
|
|
581
|
-
{ id:
|
|
582
|
-
{ id:
|
|
583
|
-
{ id:
|
|
584
|
-
{ id:
|
|
585
|
-
{ id:
|
|
586
|
-
{ id:
|
|
607
|
+
{ id: AppTheme.Blue, label: 'Azul' },
|
|
608
|
+
{ id: AppTheme.Green, label: 'Verde' },
|
|
609
|
+
{ id: AppTheme.Purple, label: 'Roxo' },
|
|
610
|
+
{ id: AppTheme.Orange, label: 'Laranja' },
|
|
611
|
+
{ id: AppTheme.White, label: 'Branco' },
|
|
612
|
+
{ id: AppTheme.Gray, label: 'Cinza' },
|
|
613
|
+
{ id: AppTheme.Sepia, label: 'Sépia' },
|
|
614
|
+
{ id: AppTheme.Black, label: 'Preto' },
|
|
587
615
|
];
|
|
588
616
|
}
|
|
589
617
|
setTheme(id) {
|
|
@@ -5017,8 +5045,8 @@ class LayoutStackComponent {
|
|
|
5017
5045
|
*/
|
|
5018
5046
|
this.itemAlign = null;
|
|
5019
5047
|
/**
|
|
5020
|
-
* Em ecrãs
|
|
5021
|
-
*
|
|
5048
|
+
* Em ecrãs < `40rem` (o mesmo breakpoint que `app-form-row`), a faixa passa a **coluna**:
|
|
5049
|
+
* filhos em pilha, largura total, mesmo com `direction="row"`. Desative para manter fila no telemóvel.
|
|
5022
5050
|
*/
|
|
5023
5051
|
this.stackOnMobile = true;
|
|
5024
5052
|
/** Linha separadora acima da faixa. Nome explícito para evitar colisão com o esquema DOM em templates aninhados. */
|
|
@@ -5051,11 +5079,11 @@ class LayoutStackComponent {
|
|
|
5051
5079
|
return parts.join(' ');
|
|
5052
5080
|
}
|
|
5053
5081
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LayoutStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5054
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.9", type: LayoutStackComponent, isStandalone: true, selector: "app-layout-stack", inputs: { align: "align", direction: "direction", itemAlign: "itemAlign", stackOnMobile: ["stackOnMobile", "stackOnMobile", booleanAttribute], stackDivider: ["stackDivider", "stackDivider", booleanAttribute], stackFill: ["stackFill", "stackFill", booleanAttribute] }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<div class=\"layout-stack__track\">\r\n <ng-content />\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;min-width:0;box-sizing:border-box}.layout-stack__track{display:flex;flex-wrap:wrap;width:100%;min-width:0;box-sizing:border-box;align-items:stretch;gap:.5rem .75rem;padding-top:.25rem}:host(.layout-stack--dir-column) .layout-stack__track{flex-direction:column;flex-wrap:nowrap;align-items:stretch}:host(.layout-stack--align-start) .layout-stack__track{justify-content:flex-start}:host(.layout-stack--align-center) .layout-stack__track{justify-content:center}:host(.layout-stack--align-end) .layout-stack__track{justify-content:flex-end}:host(.layout-stack--align-space-between) .layout-stack__track{justify-content:space-between}:host(.layout-stack--divider){margin-top:.25rem;padding-top:1rem;border-top:1px solid var(--ui-layout-stack-divider-color, #e8eaed)}:host:not(.layout-stack--fill) .layout-stack__track{align-items:center}:host:not(.layout-stack--fill) ::ng-deep .layout-stack__track>*{flex:0 0 auto;min-width:0;max-width:100%}:host(.layout-stack--items-stretch) .layout-stack__track{align-items:stretch}:host(.layout-stack--items-start) .layout-stack__track{align-items:flex-start}:host(.layout-stack--items-center) .layout-stack__track{align-items:center}:host(.layout-stack--items-end) .layout-stack__track{align-items:flex-end}:host(.layout-stack--fill:not(.layout-stack--align-space-between)) .layout-stack__track{flex-wrap:nowrap}:host(.layout-stack--fill.layout-stack--align-space-between) .layout-stack__track{flex-wrap:nowrap}:host(.layout-stack--fill) ::ng-deep .layout-stack__track>*{flex:1 1 0;min-width:0;max-width:100%;min-height:0;align-self:auto}:host(.layout-stack--fill.layout-stack--dir-column) ::ng-deep .layout-stack__track>*{flex:0 0 auto;min-height:min-content;min-width:0;width:100%;max-width:100%;align-self:stretch}:host(.layout-stack--fill) ::ng-deep .layout-stack__track>.base-button:not(.base-button--full-width){flex:0 0 auto;align-self:center}@media(max-width:39.98rem){:host(.layout-stack--stack-mobile) .layout-stack__track{gap:.45rem .6rem}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5082
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.9", type: LayoutStackComponent, isStandalone: true, selector: "app-layout-stack", inputs: { align: "align", direction: "direction", itemAlign: "itemAlign", stackOnMobile: ["stackOnMobile", "stackOnMobile", booleanAttribute], stackDivider: ["stackDivider", "stackDivider", booleanAttribute], stackFill: ["stackFill", "stackFill", booleanAttribute] }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<div class=\"layout-stack__track\">\r\n <ng-content />\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;min-width:0;box-sizing:border-box}.layout-stack__track{display:flex;flex-wrap:wrap;width:100%;min-width:0;box-sizing:border-box;align-items:stretch;gap:.5rem .75rem;padding-top:.25rem}:host(.layout-stack--dir-column) .layout-stack__track{flex-direction:column;flex-wrap:nowrap;align-items:stretch}:host(.layout-stack--align-start) .layout-stack__track{justify-content:flex-start}:host(.layout-stack--align-center) .layout-stack__track{justify-content:center}:host(.layout-stack--align-end) .layout-stack__track{justify-content:flex-end}:host(.layout-stack--align-space-between) .layout-stack__track{justify-content:space-between}:host(.layout-stack--divider){margin-top:.25rem;padding-top:1rem;border-top:1px solid var(--ui-layout-stack-divider-color, #e8eaed)}:host:not(.layout-stack--fill) .layout-stack__track{align-items:center}:host:not(.layout-stack--fill) ::ng-deep .layout-stack__track>*{flex:0 0 auto;min-width:0;max-width:100%}:host(.layout-stack--items-stretch) .layout-stack__track{align-items:stretch}:host(.layout-stack--items-start) .layout-stack__track{align-items:flex-start}:host(.layout-stack--items-center) .layout-stack__track{align-items:center}:host(.layout-stack--items-end) .layout-stack__track{align-items:flex-end}:host(.layout-stack--fill:not(.layout-stack--align-space-between)) .layout-stack__track{flex-wrap:nowrap}:host(.layout-stack--fill.layout-stack--align-space-between) .layout-stack__track{flex-wrap:nowrap}:host(.layout-stack--fill) ::ng-deep .layout-stack__track>*{flex:1 1 0;min-width:0;max-width:100%;min-height:0;align-self:auto}:host(.layout-stack--fill.layout-stack--dir-column) ::ng-deep .layout-stack__track>*{flex:0 0 auto;min-height:min-content;min-width:0;width:100%;max-width:100%;align-self:stretch}:host(.layout-stack--fill) ::ng-deep .layout-stack__track>.base-button:not(.base-button--full-width){flex:0 0 auto;align-self:center}@media(max-width:39.98rem){:host(.layout-stack--stack-mobile) .layout-stack__track{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:.45rem .6rem}:host(.layout-stack--stack-mobile.layout-stack--fill) ::ng-deep .layout-stack__track>*{flex:0 0 auto;min-height:min-content;min-width:0;width:100%;max-width:100%;align-self:stretch}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5055
5083
|
}
|
|
5056
5084
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LayoutStackComponent, decorators: [{
|
|
5057
5085
|
type: Component,
|
|
5058
|
-
args: [{ selector: 'app-layout-stack', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-stack__track\">\r\n <ng-content />\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;min-width:0;box-sizing:border-box}.layout-stack__track{display:flex;flex-wrap:wrap;width:100%;min-width:0;box-sizing:border-box;align-items:stretch;gap:.5rem .75rem;padding-top:.25rem}:host(.layout-stack--dir-column) .layout-stack__track{flex-direction:column;flex-wrap:nowrap;align-items:stretch}:host(.layout-stack--align-start) .layout-stack__track{justify-content:flex-start}:host(.layout-stack--align-center) .layout-stack__track{justify-content:center}:host(.layout-stack--align-end) .layout-stack__track{justify-content:flex-end}:host(.layout-stack--align-space-between) .layout-stack__track{justify-content:space-between}:host(.layout-stack--divider){margin-top:.25rem;padding-top:1rem;border-top:1px solid var(--ui-layout-stack-divider-color, #e8eaed)}:host:not(.layout-stack--fill) .layout-stack__track{align-items:center}:host:not(.layout-stack--fill) ::ng-deep .layout-stack__track>*{flex:0 0 auto;min-width:0;max-width:100%}:host(.layout-stack--items-stretch) .layout-stack__track{align-items:stretch}:host(.layout-stack--items-start) .layout-stack__track{align-items:flex-start}:host(.layout-stack--items-center) .layout-stack__track{align-items:center}:host(.layout-stack--items-end) .layout-stack__track{align-items:flex-end}:host(.layout-stack--fill:not(.layout-stack--align-space-between)) .layout-stack__track{flex-wrap:nowrap}:host(.layout-stack--fill.layout-stack--align-space-between) .layout-stack__track{flex-wrap:nowrap}:host(.layout-stack--fill) ::ng-deep .layout-stack__track>*{flex:1 1 0;min-width:0;max-width:100%;min-height:0;align-self:auto}:host(.layout-stack--fill.layout-stack--dir-column) ::ng-deep .layout-stack__track>*{flex:0 0 auto;min-height:min-content;min-width:0;width:100%;max-width:100%;align-self:stretch}:host(.layout-stack--fill) ::ng-deep .layout-stack__track>.base-button:not(.base-button--full-width){flex:0 0 auto;align-self:center}@media(max-width:39.98rem){:host(.layout-stack--stack-mobile) .layout-stack__track{gap:.45rem .6rem}}\n"] }]
|
|
5086
|
+
args: [{ selector: 'app-layout-stack', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-stack__track\">\r\n <ng-content />\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;min-width:0;box-sizing:border-box}.layout-stack__track{display:flex;flex-wrap:wrap;width:100%;min-width:0;box-sizing:border-box;align-items:stretch;gap:.5rem .75rem;padding-top:.25rem}:host(.layout-stack--dir-column) .layout-stack__track{flex-direction:column;flex-wrap:nowrap;align-items:stretch}:host(.layout-stack--align-start) .layout-stack__track{justify-content:flex-start}:host(.layout-stack--align-center) .layout-stack__track{justify-content:center}:host(.layout-stack--align-end) .layout-stack__track{justify-content:flex-end}:host(.layout-stack--align-space-between) .layout-stack__track{justify-content:space-between}:host(.layout-stack--divider){margin-top:.25rem;padding-top:1rem;border-top:1px solid var(--ui-layout-stack-divider-color, #e8eaed)}:host:not(.layout-stack--fill) .layout-stack__track{align-items:center}:host:not(.layout-stack--fill) ::ng-deep .layout-stack__track>*{flex:0 0 auto;min-width:0;max-width:100%}:host(.layout-stack--items-stretch) .layout-stack__track{align-items:stretch}:host(.layout-stack--items-start) .layout-stack__track{align-items:flex-start}:host(.layout-stack--items-center) .layout-stack__track{align-items:center}:host(.layout-stack--items-end) .layout-stack__track{align-items:flex-end}:host(.layout-stack--fill:not(.layout-stack--align-space-between)) .layout-stack__track{flex-wrap:nowrap}:host(.layout-stack--fill.layout-stack--align-space-between) .layout-stack__track{flex-wrap:nowrap}:host(.layout-stack--fill) ::ng-deep .layout-stack__track>*{flex:1 1 0;min-width:0;max-width:100%;min-height:0;align-self:auto}:host(.layout-stack--fill.layout-stack--dir-column) ::ng-deep .layout-stack__track>*{flex:0 0 auto;min-height:min-content;min-width:0;width:100%;max-width:100%;align-self:stretch}:host(.layout-stack--fill) ::ng-deep .layout-stack__track>.base-button:not(.base-button--full-width){flex:0 0 auto;align-self:center}@media(max-width:39.98rem){:host(.layout-stack--stack-mobile) .layout-stack__track{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:.45rem .6rem}:host(.layout-stack--stack-mobile.layout-stack--fill) ::ng-deep .layout-stack__track>*{flex:0 0 auto;min-height:min-content;min-width:0;width:100%;max-width:100%;align-self:stretch}}\n"] }]
|
|
5059
5087
|
}], propDecorators: { align: [{
|
|
5060
5088
|
type: Input
|
|
5061
5089
|
}], direction: [{
|
|
@@ -7524,7 +7552,7 @@ class AppDialogComponent {
|
|
|
7524
7552
|
* valores de `:root` (azul); alinhamos ao CDK Dialog (`libDialogPanelClasses`).
|
|
7525
7553
|
*/
|
|
7526
7554
|
get hostThemeClasses() {
|
|
7527
|
-
return this.appTheme.
|
|
7555
|
+
return this.appTheme.getTheme();
|
|
7528
7556
|
}
|
|
7529
7557
|
ngOnInit() {
|
|
7530
7558
|
this.stripHostNativeTitle();
|
|
@@ -7692,11 +7720,11 @@ class ConfirmDialogComponent {
|
|
|
7692
7720
|
this.ref.close(false);
|
|
7693
7721
|
}
|
|
7694
7722
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7695
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: ConfirmDialogComponent, isStandalone: true, selector: "app-confirm-dialog", viewQueries: [{ propertyName: "cancelBtn", first: true, predicate: ["cancelBtn"], descendants: true }], ngImport: i0, template: "<div\r\n class=\"confirm-dialog\"\r\n role=\"alertdialog\"\r\n aria-modal=\"true\"\r\n [attr.aria-labelledby]=\"titleId\"\r\n [attr.aria-describedby]=\"descId\"\r\n>\r\n <header class=\"confirm-dialog__header\">\r\n <h2 class=\"confirm-dialog__title\" [id]=\"titleId\">{{ data.title }}</h2>\r\n </header>\r\n\r\n <div class=\"confirm-dialog__body\">\r\n <p class=\"confirm-dialog__message\" [id]=\"descId\">{{ data.message }}</p>\r\n </div>\r\n\r\n <footer class=\"confirm-dialog__footer\">\r\n <app-
|
|
7723
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: ConfirmDialogComponent, isStandalone: true, selector: "app-confirm-dialog", viewQueries: [{ propertyName: "cancelBtn", first: true, predicate: ["cancelBtn"], descendants: true }], ngImport: i0, template: "<div\r\n class=\"confirm-dialog\"\r\n role=\"alertdialog\"\r\n aria-modal=\"true\"\r\n [attr.aria-labelledby]=\"titleId\"\r\n [attr.aria-describedby]=\"descId\"\r\n>\r\n <header class=\"confirm-dialog__header\">\r\n <h2 class=\"confirm-dialog__title\" [id]=\"titleId\">{{ data.title }}</h2>\r\n </header>\r\n\r\n <div class=\"confirm-dialog__body\">\r\n <p class=\"confirm-dialog__message\" [id]=\"descId\">{{ data.message }}</p>\r\n </div>\r\n\r\n <footer class=\"confirm-dialog__footer\">\r\n <app-button\r\n #cancelBtn\r\n [type]=\"BaseButtonType.Button\"\r\n [variant]=\"BaseButtonVariant.Secondary\"\r\n [fullWidth]=\"false\"\r\n (click)=\"onCancel()\"\r\n >\r\n {{ data.cancelLabel ?? 'Cancelar' }}\r\n </app-button>\r\n <app-button\r\n [type]=\"BaseButtonType.Button\"\r\n [variant]=\"BaseButtonVariant.Primary\"\r\n [fullWidth]=\"false\"\r\n [class.confirm-dialog__confirm--danger]=\"data.variant === 'danger'\"\r\n (click)=\"onConfirm()\"\r\n >\r\n {{ data.confirmLabel ?? 'Confirmar' }}\r\n </app-button>\r\n </footer>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.confirm-dialog{box-sizing:border-box;display:flex;flex-direction:column;min-width:0;max-width:100%;min-height:0;overflow:hidden}.confirm-dialog__header{flex:0 0 auto;padding:1rem 1rem .65rem;border-bottom:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09))}.confirm-dialog__title{margin:0;font-size:1.05rem;font-weight:600;line-height:1.3;color:var(--app-color-text-primary, #1a2f45)}.confirm-dialog__body{flex:1 1 auto;min-height:0;padding:1rem;overflow:auto}.confirm-dialog__message{margin:0;font-size:.9rem;line-height:1.5;color:var(--app-color-text-secondary, #5a7fa3)}.confirm-dialog__footer{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.5rem;padding:.65rem 1rem 1rem;border-top:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09))}:host ::ng-deep app-button.confirm-dialog__confirm--danger.base-button--primary .base-button__native{border-color:var(--app-color-error-border, #dc2626);background:var(--app-color-error, #b91c1c);color:var(--app-color-error-contrast, #fff)}:host ::ng-deep app-button.confirm-dialog__confirm--danger.base-button--primary .base-button__native:hover:not(:disabled){filter:brightness(.95)}:host ::ng-deep app-button.confirm-dialog__confirm--danger.base-button--primary .base-button__native:focus-visible{outline:none;box-shadow:0 0 0 3px var(--app-color-error-focus-ring, rgba(220, 38, 38, .35))}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "app-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7696
7724
|
}
|
|
7697
7725
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
|
|
7698
7726
|
type: Component,
|
|
7699
|
-
args: [{ selector: 'app-confirm-dialog', imports: [
|
|
7727
|
+
args: [{ selector: 'app-confirm-dialog', imports: [ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"confirm-dialog\"\r\n role=\"alertdialog\"\r\n aria-modal=\"true\"\r\n [attr.aria-labelledby]=\"titleId\"\r\n [attr.aria-describedby]=\"descId\"\r\n>\r\n <header class=\"confirm-dialog__header\">\r\n <h2 class=\"confirm-dialog__title\" [id]=\"titleId\">{{ data.title }}</h2>\r\n </header>\r\n\r\n <div class=\"confirm-dialog__body\">\r\n <p class=\"confirm-dialog__message\" [id]=\"descId\">{{ data.message }}</p>\r\n </div>\r\n\r\n <footer class=\"confirm-dialog__footer\">\r\n <app-button\r\n #cancelBtn\r\n [type]=\"BaseButtonType.Button\"\r\n [variant]=\"BaseButtonVariant.Secondary\"\r\n [fullWidth]=\"false\"\r\n (click)=\"onCancel()\"\r\n >\r\n {{ data.cancelLabel ?? 'Cancelar' }}\r\n </app-button>\r\n <app-button\r\n [type]=\"BaseButtonType.Button\"\r\n [variant]=\"BaseButtonVariant.Primary\"\r\n [fullWidth]=\"false\"\r\n [class.confirm-dialog__confirm--danger]=\"data.variant === 'danger'\"\r\n (click)=\"onConfirm()\"\r\n >\r\n {{ data.confirmLabel ?? 'Confirmar' }}\r\n </app-button>\r\n </footer>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.confirm-dialog{box-sizing:border-box;display:flex;flex-direction:column;min-width:0;max-width:100%;min-height:0;overflow:hidden}.confirm-dialog__header{flex:0 0 auto;padding:1rem 1rem .65rem;border-bottom:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09))}.confirm-dialog__title{margin:0;font-size:1.05rem;font-weight:600;line-height:1.3;color:var(--app-color-text-primary, #1a2f45)}.confirm-dialog__body{flex:1 1 auto;min-height:0;padding:1rem;overflow:auto}.confirm-dialog__message{margin:0;font-size:.9rem;line-height:1.5;color:var(--app-color-text-secondary, #5a7fa3)}.confirm-dialog__footer{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.5rem;padding:.65rem 1rem 1rem;border-top:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .09))}:host ::ng-deep app-button.confirm-dialog__confirm--danger.base-button--primary .base-button__native{border-color:var(--app-color-error-border, #dc2626);background:var(--app-color-error, #b91c1c);color:var(--app-color-error-contrast, #fff)}:host ::ng-deep app-button.confirm-dialog__confirm--danger.base-button--primary .base-button__native:hover:not(:disabled){filter:brightness(.95)}:host ::ng-deep app-button.confirm-dialog__confirm--danger.base-button--primary .base-button__native:focus-visible{outline:none;box-shadow:0 0 0 3px var(--app-color-error-focus-ring, rgba(220, 38, 38, .35))}\n"] }]
|
|
7700
7728
|
}], propDecorators: { cancelBtn: [{
|
|
7701
7729
|
type: ViewChild,
|
|
7702
7730
|
args: ['cancelBtn']
|
|
@@ -7855,7 +7883,7 @@ class ToastHostComponent {
|
|
|
7855
7883
|
this.toastService.runAction(id);
|
|
7856
7884
|
}
|
|
7857
7885
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ToastHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7858
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ToastHostComponent, isStandalone: true, selector: "app-toast-host", ngImport: i0, template: "@if (topToasts().length > 0) {\r\n <div\r\n class=\"toast-host toast-host--top app-library-theme\"\r\n [ngClass]=\"theme.
|
|
7886
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ToastHostComponent, isStandalone: true, selector: "app-toast-host", ngImport: i0, template: "@if (topToasts().length > 0) {\r\n <div\r\n class=\"toast-host toast-host--top app-library-theme\"\r\n [ngClass]=\"theme.getTheme()\"\r\n aria-live=\"polite\"\r\n aria-relevant=\"additions text\"\r\n >\r\n @for (t of topToasts(); track t.id) {\r\n <div\r\n [ngClass]=\"['toast-host__item', 'toast-host__item--' + t.type]\"\r\n @toastAnimTop\r\n role=\"status\"\r\n >\r\n <div class=\"toast-host__body\">\r\n @if (t.title) {\r\n <p class=\"toast-host__title\">{{ t.title }}</p>\r\n }\r\n <p class=\"toast-host__message\">{{ t.message }}</p>\r\n @if (t.actionLabel) {\r\n <button type=\"button\" class=\"toast-host__action\" (click)=\"action(t.id)\">\r\n {{ t.actionLabel }}\r\n </button>\r\n }\r\n </div>\r\n <button\r\n type=\"button\"\r\n class=\"toast-host__close\"\r\n [attr.aria-label]=\"'Fechar notifica\u00E7\u00E3o'\"\r\n (click)=\"dismiss(t.id)\"\r\n >\r\n <span aria-hidden=\"true\">×</span>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n}\r\n@if (bottomToasts().length > 0) {\r\n <div\r\n class=\"toast-host toast-host--bottom app-library-theme\"\r\n [ngClass]=\"theme.getTheme()\"\r\n aria-live=\"polite\"\r\n aria-relevant=\"additions text\"\r\n >\r\n @for (t of bottomToasts(); track t.id) {\r\n <div\r\n [ngClass]=\"['toast-host__item', 'toast-host__item--' + t.type]\"\r\n @toastAnimBottom\r\n role=\"status\"\r\n >\r\n <div class=\"toast-host__body\">\r\n @if (t.title) {\r\n <p class=\"toast-host__title\">{{ t.title }}</p>\r\n }\r\n <p class=\"toast-host__message\">{{ t.message }}</p>\r\n @if (t.actionLabel) {\r\n <button type=\"button\" class=\"toast-host__action\" (click)=\"action(t.id)\">\r\n {{ t.actionLabel }}\r\n </button>\r\n }\r\n </div>\r\n <button\r\n type=\"button\"\r\n class=\"toast-host__close\"\r\n [attr.aria-label]=\"'Fechar notifica\u00E7\u00E3o'\"\r\n (click)=\"dismiss(t.id)\"\r\n >\r\n <span aria-hidden=\"true\">×</span>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n}\r\n", styles: [":host{display:contents}.toast-host{position:fixed;right:0;z-index:var(--app-z-toast, 1300);display:flex;align-items:flex-end;gap:.6rem;box-sizing:border-box;pointer-events:none;max-width:100vw}.toast-host--top{top:0;flex-direction:column;padding:max(.85rem,env(safe-area-inset-top)) max(.85rem,env(safe-area-inset-right)) max(.85rem,env(safe-area-inset-bottom)) max(.85rem,env(safe-area-inset-left))}.toast-host--bottom{bottom:0;top:auto;flex-direction:column-reverse;padding:max(.85rem,env(safe-area-inset-top)) max(.85rem,env(safe-area-inset-right)) max(.85rem,env(safe-area-inset-bottom)) max(.85rem,env(safe-area-inset-left))}.toast-host__item{pointer-events:auto;display:flex;align-items:flex-start;gap:.6rem;width:min(25rem,100vw - 1.7rem);max-width:100%;box-sizing:border-box;border-radius:12px;border:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .1));background:var(--app-color-surface, #fff);box-shadow:0 4px 8px -2px #0000000f,0 14px 32px -8px #1a2f4524;padding:.85rem .65rem .85rem .95rem;border-left-width:5px;border-left-style:solid}.toast-host__item--success{border-left-color:var(--app-color-success, #15803d)}.toast-host__item--error{border-left-color:var(--app-color-error-border, #dc2626)}.toast-host__item--warning{border-left-color:var(--app-color-warning, #c2410c)}.toast-host__item--info{border-left-color:var(--app-color-info, #1d4ed8)}.toast-host__body{flex:1 1 auto;min-width:0}.toast-host__title{margin:0 0 .3rem;font-size:.9rem;font-weight:600;line-height:1.35;color:var(--app-color-text-primary, #1a2f45);letter-spacing:.01em}.toast-host__message{margin:0;font-size:.92rem;line-height:1.5;color:var(--app-color-text-secondary, #5a7fa3);word-break:break-word}.toast-host__action{margin:.5rem 0 0;padding:0;border:none;background:none;font:inherit;font-size:.86rem;font-weight:600;color:var(--app-color-primary, #2b7fd9);cursor:pointer;text-decoration:underline;text-underline-offset:2px}.toast-host__action:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:2px;border-radius:4px}.toast-host__close{flex:0 0 auto;width:1.85rem;height:1.85rem;margin:-.05rem 0 0;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--app-color-text-muted, #6b8299);font-size:1.25rem;line-height:1;cursor:pointer}.toast-host__close:hover{background:var(--app-color-hover-bg, rgba(43, 127, 217, .08));color:var(--app-color-text-primary, #1a2f45)}.toast-host__close:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:2px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
|
|
7859
7887
|
trigger('toastAnimTop', [
|
|
7860
7888
|
transition(':enter', [
|
|
7861
7889
|
style({ opacity: 0, transform: 'translateX(110%)' }),
|
|
@@ -7897,7 +7925,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
7897
7925
|
animate('180ms ease-in', style({ opacity: 0, transform: 'translateY(120%)' })),
|
|
7898
7926
|
]),
|
|
7899
7927
|
]),
|
|
7900
|
-
], template: "@if (topToasts().length > 0) {\r\n <div\r\n class=\"toast-host toast-host--top app-library-theme\"\r\n [ngClass]=\"theme.
|
|
7928
|
+
], template: "@if (topToasts().length > 0) {\r\n <div\r\n class=\"toast-host toast-host--top app-library-theme\"\r\n [ngClass]=\"theme.getTheme()\"\r\n aria-live=\"polite\"\r\n aria-relevant=\"additions text\"\r\n >\r\n @for (t of topToasts(); track t.id) {\r\n <div\r\n [ngClass]=\"['toast-host__item', 'toast-host__item--' + t.type]\"\r\n @toastAnimTop\r\n role=\"status\"\r\n >\r\n <div class=\"toast-host__body\">\r\n @if (t.title) {\r\n <p class=\"toast-host__title\">{{ t.title }}</p>\r\n }\r\n <p class=\"toast-host__message\">{{ t.message }}</p>\r\n @if (t.actionLabel) {\r\n <button type=\"button\" class=\"toast-host__action\" (click)=\"action(t.id)\">\r\n {{ t.actionLabel }}\r\n </button>\r\n }\r\n </div>\r\n <button\r\n type=\"button\"\r\n class=\"toast-host__close\"\r\n [attr.aria-label]=\"'Fechar notifica\u00E7\u00E3o'\"\r\n (click)=\"dismiss(t.id)\"\r\n >\r\n <span aria-hidden=\"true\">×</span>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n}\r\n@if (bottomToasts().length > 0) {\r\n <div\r\n class=\"toast-host toast-host--bottom app-library-theme\"\r\n [ngClass]=\"theme.getTheme()\"\r\n aria-live=\"polite\"\r\n aria-relevant=\"additions text\"\r\n >\r\n @for (t of bottomToasts(); track t.id) {\r\n <div\r\n [ngClass]=\"['toast-host__item', 'toast-host__item--' + t.type]\"\r\n @toastAnimBottom\r\n role=\"status\"\r\n >\r\n <div class=\"toast-host__body\">\r\n @if (t.title) {\r\n <p class=\"toast-host__title\">{{ t.title }}</p>\r\n }\r\n <p class=\"toast-host__message\">{{ t.message }}</p>\r\n @if (t.actionLabel) {\r\n <button type=\"button\" class=\"toast-host__action\" (click)=\"action(t.id)\">\r\n {{ t.actionLabel }}\r\n </button>\r\n }\r\n </div>\r\n <button\r\n type=\"button\"\r\n class=\"toast-host__close\"\r\n [attr.aria-label]=\"'Fechar notifica\u00E7\u00E3o'\"\r\n (click)=\"dismiss(t.id)\"\r\n >\r\n <span aria-hidden=\"true\">×</span>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n}\r\n", styles: [":host{display:contents}.toast-host{position:fixed;right:0;z-index:var(--app-z-toast, 1300);display:flex;align-items:flex-end;gap:.6rem;box-sizing:border-box;pointer-events:none;max-width:100vw}.toast-host--top{top:0;flex-direction:column;padding:max(.85rem,env(safe-area-inset-top)) max(.85rem,env(safe-area-inset-right)) max(.85rem,env(safe-area-inset-bottom)) max(.85rem,env(safe-area-inset-left))}.toast-host--bottom{bottom:0;top:auto;flex-direction:column-reverse;padding:max(.85rem,env(safe-area-inset-top)) max(.85rem,env(safe-area-inset-right)) max(.85rem,env(safe-area-inset-bottom)) max(.85rem,env(safe-area-inset-left))}.toast-host__item{pointer-events:auto;display:flex;align-items:flex-start;gap:.6rem;width:min(25rem,100vw - 1.7rem);max-width:100%;box-sizing:border-box;border-radius:12px;border:1px solid var(--app-color-border-subtle, rgba(26, 47, 69, .1));background:var(--app-color-surface, #fff);box-shadow:0 4px 8px -2px #0000000f,0 14px 32px -8px #1a2f4524;padding:.85rem .65rem .85rem .95rem;border-left-width:5px;border-left-style:solid}.toast-host__item--success{border-left-color:var(--app-color-success, #15803d)}.toast-host__item--error{border-left-color:var(--app-color-error-border, #dc2626)}.toast-host__item--warning{border-left-color:var(--app-color-warning, #c2410c)}.toast-host__item--info{border-left-color:var(--app-color-info, #1d4ed8)}.toast-host__body{flex:1 1 auto;min-width:0}.toast-host__title{margin:0 0 .3rem;font-size:.9rem;font-weight:600;line-height:1.35;color:var(--app-color-text-primary, #1a2f45);letter-spacing:.01em}.toast-host__message{margin:0;font-size:.92rem;line-height:1.5;color:var(--app-color-text-secondary, #5a7fa3);word-break:break-word}.toast-host__action{margin:.5rem 0 0;padding:0;border:none;background:none;font:inherit;font-size:.86rem;font-weight:600;color:var(--app-color-primary, #2b7fd9);cursor:pointer;text-decoration:underline;text-underline-offset:2px}.toast-host__action:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:2px;border-radius:4px}.toast-host__close{flex:0 0 auto;width:1.85rem;height:1.85rem;margin:-.05rem 0 0;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--app-color-text-muted, #6b8299);font-size:1.25rem;line-height:1;cursor:pointer}.toast-host__close:hover{background:var(--app-color-hover-bg, rgba(43, 127, 217, .08));color:var(--app-color-text-primary, #1a2f45)}.toast-host__close:focus-visible{outline:2px solid var(--app-color-focus-ring-strong, rgba(43, 127, 217, .45));outline-offset:2px}\n"] }]
|
|
7901
7929
|
}] });
|
|
7902
7930
|
|
|
7903
7931
|
const DEFAULT_MESSAGE = 'A carregar…';
|
|
@@ -8776,7 +8804,7 @@ class AppShellComponent {
|
|
|
8776
8804
|
this.DrawerSize = DrawerSize;
|
|
8777
8805
|
}
|
|
8778
8806
|
get hostThemeClasses() {
|
|
8779
|
-
return this.theme.
|
|
8807
|
+
return this.theme.getTheme();
|
|
8780
8808
|
}
|
|
8781
8809
|
/** Conteúdo lateral (obrigatório): `<ng-template appShellSidebar>...</ng-template>`. */
|
|
8782
8810
|
get sidebarTemplate() {
|
|
@@ -8857,7 +8885,7 @@ class AppSidebarComponent {
|
|
|
8857
8885
|
* herdarem a paleta activa (útil fora da demo ou sem antepassado tematizado).
|
|
8858
8886
|
*/
|
|
8859
8887
|
get hostThemeClasses() {
|
|
8860
|
-
return this.theme.
|
|
8888
|
+
return this.theme.getTheme();
|
|
8861
8889
|
}
|
|
8862
8890
|
constructor() {
|
|
8863
8891
|
this.theme = inject(AppThemeService);
|
|
@@ -9074,5 +9102,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
9074
9102
|
* Generated bundle index. Do not edit.
|
|
9075
9103
|
*/
|
|
9076
9104
|
|
|
9077
|
-
export { ADAPTIVE_DATA_VIEW_MOBILE_QUERY, APP_SIDEBAR_LABEL_REVEAL_LAG_MS, APP_SIDEBAR_LAYOUT_DURATION_MS, APP_SIDEBAR_NAV_REVEAL_TOTAL_MS, APP_THEME_IDS, ActionMenuComponent, AdaptiveDataViewComponent, AnchoredOverlayComponent, AppBreadcrumbComponent, AppDialogComponent, AppLibLightBlockScrollStrategy, AppShellComponent, AppShellSidebarTemplateDirective, AppShellSidebarToggleComponent, AppSidebarComponent, AppSidebarToolbarDirective, AppThemeService, AppTopbarComponent, AppUserMenuComponent, BR_ESTADOS_NOME_SIGLA,
|
|
9105
|
+
export { ADAPTIVE_DATA_VIEW_MOBILE_QUERY, APP_SIDEBAR_LABEL_REVEAL_LAG_MS, APP_SIDEBAR_LAYOUT_DURATION_MS, APP_SIDEBAR_NAV_REVEAL_TOTAL_MS, APP_THEME_IDS, ActionMenuComponent, AdaptiveDataViewComponent, AnchoredOverlayComponent, AppBreadcrumbComponent, AppDialogComponent, AppLibLightBlockScrollStrategy, AppShellComponent, AppShellSidebarTemplateDirective, AppShellSidebarToggleComponent, AppSidebarComponent, AppSidebarToolbarDirective, AppTheme, AppThemeService, AppTopbarComponent, AppUserMenuComponent, BR_ESTADOS_NOME_SIGLA, BaseButtonType, BaseButtonVariant, BaseFieldComponent, BaseFieldDirective, BooleanFieldDirective, ButtonComponent, CardListComponent, CepFieldComponent, CheckboxFieldComponent, ConfirmDialogComponent, ConfirmDialogService, ContextMenuComponent, CpfCnpjFieldComponent, DashboardSectionComponent, DataCardComponent, DataGridComponent, DataListComponent, DataToolbarComponent, DateFieldComponent, DecimalFieldComponent, DetailsFieldComponent, DetailsViewComponent, DialogFooterDirective, DrawerComponent, DrawerSide, DrawerSize, DropdownBaseComponent, DropdownMenuComponent, DropdownMultiOptionFieldBase, DropdownOptionFieldBase, DropdownSearchFieldComponent, EmptyStateComponent, FormActionsAlign, FormActionsComponent, FormColComponent, FormGroupComponent, FormGroupVariant, FormLayoutGap, FormRowAlign, FormRowComponent, FormRowJustify, FormSectionComponent, FormTabComponent, FormTabsComponent, InputMaskFieldComponent, IntegerFieldComponent, LAYOUT_STACK_SIDE_BY_SIDE, LAYOUT_STACK_STACKED, LayoutStackAlign, LayoutStackComponent, LayoutStackDirection, LayoutStackItemAlign, LibDialogSize, ListItemComponent, LoadingDialogComponent, LoadingDialogService, MaskedTextFieldBase, MenuDividerComponent, MenuDropdownPlacement, MenuGroupComponent, MenuListComponent, MultiselectFieldComponent, NgControlFieldDirective, OverlayPlacement, PasswordFieldComponent, PhoneFieldComponent, PopoverBodyTemplateDirective, PopoverComponent, PopoverFooterTemplateDirective, PopoverTriggerDirective, STRUCTRA_UI, SelectFieldComponent, SkeletonBlockComponent, SkeletonCardComponent, SkeletonFieldShellComponent, SkeletonListComponent, SkeletonTableComponent, SkeletonTextComponent, StatCardComponent, StatusBadgeComponent, SwitchFieldComponent, TableEmptyStateComponent, TableToolbarComponent, TextFieldComponent, TextareaFieldComponent, ToastHostComponent, ToastService, TooltipComponent, TooltipPanelTemplateDirective, ValidationSummaryComponent, anchoredOverlayPositions, applyPickedCalendarDate, buildDecimalBrDisplay, buildDecimalBrParseString, buildEmptyStateOverlayHtml, caretIndexFromIntegerDigitCount, caretIndexFromSemantic, cepMaskCompleteValidator, cpfCnpjMaskCompleteValidator, escapeHtml, extractDecimalBrParts, fixedDigitsMaskCompleteValidator, formatDateTimePtBr, formatDecimalBr, formatIntegerThousandsBr, formatMaskDigits, formatUiFieldDateValue, libDialogPanelClasses, mapEstadosToOptions, maskDigitCount, normalizeFormDateValue, parseDecimalBr, parseIntegerString, parseUiFieldDateValue, phoneBrMaskCompleteValidator, resolveControlAtPath, sanitizeDecimalBrInput, sanitizeIntegerDigits, sectionHasVisibleInvalid, semanticCaretAt, semanticIntegerDigitCountLeft, stripToDigits, subscribeMarkForCheckOnInvalidUiRefresh, subtreeHasVisibleInvalid };
|
|
9078
9106
|
//# sourceMappingURL=structra-ui.mjs.map
|