structra-ui 0.1.87 → 0.1.90
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 +27 -28
- package/fesm2022/structra-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/structra-ui.d.ts +10 -15
package/fesm2022/structra-ui.mjs
CHANGED
|
@@ -256,14 +256,9 @@ var ButtonSize;
|
|
|
256
256
|
ButtonSize["Sm"] = "sm";
|
|
257
257
|
ButtonSize["Md"] = "md";
|
|
258
258
|
ButtonSize["Lg"] = "lg";
|
|
259
|
+
/** Maior que `lg` — ênfase / touch targets amplos (CTAs hero). */
|
|
260
|
+
ButtonSize["Xl"] = "xl";
|
|
259
261
|
})(ButtonSize || (ButtonSize = {}));
|
|
260
|
-
/** Alinhamento horizontal do bloco `<app-button>` quando `fullWidth` é `false`. */
|
|
261
|
-
var ButtonAlign;
|
|
262
|
-
(function (ButtonAlign) {
|
|
263
|
-
ButtonAlign["Start"] = "start";
|
|
264
|
-
ButtonAlign["Center"] = "center";
|
|
265
|
-
ButtonAlign["End"] = "end";
|
|
266
|
-
})(ButtonAlign || (ButtonAlign = {}));
|
|
267
262
|
/**
|
|
268
263
|
* Base do botão; **não** exposta no barrel público `buttons`. Use `ButtonComponent` (`app-button`).
|
|
269
264
|
*/
|
|
@@ -284,11 +279,6 @@ class BaseButtonComponent {
|
|
|
284
279
|
this.fullWidth = true;
|
|
285
280
|
/** Escala tipográfica e de paddings/`min-height` do design system. `md` = aparência legada do botão. */
|
|
286
281
|
this.size = ButtonSize.Md;
|
|
287
|
-
/**
|
|
288
|
-
* Posição horizontal do próprio `<app-button>` no pai quando `fullWidth="false"` (fluxo tipo bloco ou flex).
|
|
289
|
-
* Ignorado com `fullWidth="true"` (mantém igual ao comportamento anterior).
|
|
290
|
-
*/
|
|
291
|
-
this.align = null;
|
|
292
282
|
/** Placeholder de carregamento (skeleton no lugar do rótulo). */
|
|
293
283
|
this.loading = false;
|
|
294
284
|
/** Estilo visual base; pode ser estendido no SCSS do projeto. */
|
|
@@ -319,9 +309,6 @@ class BaseButtonComponent {
|
|
|
319
309
|
if (this.fullWidth) {
|
|
320
310
|
parts.push('base-button--full-width');
|
|
321
311
|
}
|
|
322
|
-
else if (this.align != null) {
|
|
323
|
-
parts.push(`base-button--align-${this.align}`);
|
|
324
|
-
}
|
|
325
312
|
if (this.loading) {
|
|
326
313
|
parts.push('base-button--loading');
|
|
327
314
|
}
|
|
@@ -332,11 +319,11 @@ class BaseButtonComponent {
|
|
|
332
319
|
this.nativeBtn?.nativeElement?.focus(options);
|
|
333
320
|
}
|
|
334
321
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BaseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
335
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: BaseButtonComponent, isStandalone: true, selector: "app-base-button", inputs: { type: "type", disabled: ["disabled", "disabled", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], fullWidth: ["fullWidth", "fullWidth", booleanAttribute], size: "size",
|
|
322
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: BaseButtonComponent, isStandalone: true, selector: "app-base-button", inputs: { type: "type", disabled: ["disabled", "disabled", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], fullWidth: ["fullWidth", "fullWidth", booleanAttribute], size: "size", loading: ["loading", "loading", booleanAttribute], variant: "variant", appearance: "appearance" }, host: { properties: { "class": "this.hostClasses" } }, viewQueries: [{ propertyName: "nativeBtn", first: true, predicate: ["nativeBtn"], descendants: true, read: ElementRef }], 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}:host(.base-button--size-sm){--bb-fs: .8125rem;--bb-min-h: 2rem;--bb-pad-y: .375rem;--bb-pad-x: .875rem;--bb-gap: .375rem;--bb-min-w: 4rem}:host(.base-button--size-md){--bb-fs: .9375rem;--bb-min-h: 2.5rem;--bb-pad-y: .5rem;--bb-pad-x: 1.25rem;--bb-gap: .5rem;--bb-min-w: 5rem}:host(.base-button--size-lg){--bb-fs: 1rem;--bb-min-h: 2.875rem;--bb-pad-y: .625rem;--bb-pad-x: 1.5rem;--bb-gap: .625rem;--bb-min-w: 5.5rem}:host(.base-button--size-xl){--bb-fs: 1.0625rem;--bb-min-h: 3.25rem;--bb-pad-y: .75rem;--bb-pad-x: 1.75rem;--bb-gap: .75rem;--bb-min-w: 6rem}:host(.base-button--ghost){--bb-min-h: 2.25rem;--bb-pad-y: .35rem;--bb-pad-x: .5rem;--bb-fs: .95rem;--bb-gap: .45rem;--bb-min-w: 0}:host(.base-button--ghost.base-button--size-sm){--bb-min-h: 2rem;--bb-pad-y: .28rem;--bb-pad-x: .42rem;--bb-fs: .875rem;--bb-gap: .35rem}:host(.base-button--ghost.base-button--size-lg){--bb-min-h: 2.5rem;--bb-pad-y: .42rem;--bb-pad-x: .62rem;--bb-fs: 1.05rem;--bb-gap: .5rem}:host(.base-button--ghost.base-button--size-xl){--bb-min-h: 2.875rem;--bb-pad-y: .5rem;--bb-pad-x: .72rem;--bb-fs: 1.1rem;--bb-gap: .55rem}:host(.base-button--link){--bb-min-h: 0;--bb-min-w: 0;--bb-gap: .35rem;--bb-pad-x: 0}:host(.base-button--link.base-button--size-sm){--bb-fs: .8125rem;--bb-pad-y: .05rem;--bb-gap: .3rem}:host(.base-button--link.base-button--size-md){--bb-fs: .9375rem}:host(.base-button--link.base-button--size-lg){--bb-fs: 1rem;--bb-pad-y: .12rem;--bb-gap: .4rem}:host(.base-button--link.base-button--size-xl){--bb-fs: 1.0625rem;--bb-pad-y: .14rem;--bb-gap: .45rem}.base-button__native{-webkit-appearance:none;appearance:none;display:flex;width:auto;min-width:var(--bb-min-w, 5rem);align-items:center;justify-content:center;text-align:center;gap:var(--bb-gap, .5rem);min-height:var(--bb-min-h, 2.5rem);padding:var(--bb-pad-y, .5rem) var(--bb-pad-x, 1.25rem);margin:0;border:1px solid transparent;border-radius:var(--ui-field-float-border-radius, 14px);font:inherit;font-size:var(--bb-fs, .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;border-radius:8px;font-weight:600;justify-content:flex-start}: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--link) .base-button__native{color:var(--app-color-primary, #2b7fd9);background:transparent;border:none;border-radius:0;padding:var(--bb-pad-y, .1rem) var(--bb-pad-x, 0);min-height:0;font-family:inherit;font-weight:500;line-height:inherit;justify-content:flex-start;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;box-shadow:none;transition:color .15s ease,opacity .15s ease}:host(.base-button--link) .base-button__native:hover:not(:disabled){color:var(--app-color-secondary, #1a2f45);background:transparent;border-color:transparent;filter:none}:host(.base-button--link) .base-button__native:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ui-field-float-focus-ring, rgba(43, 127, 217, .4));border-radius:2px}:host(.base-button--danger) .base-button__native{color:var(--app-color-error-contrast, #fff);background:var(--app-color-error, #b91c1c);border-color:var(--app-color-error-border, #dc2626)}:host(.base-button--danger) .base-button__native:hover:not(:disabled){filter:brightness(.95)}:host(.base-button--danger) .base-button__native:focus-visible{outline:none;box-shadow:0 0 0 3px var(--app-color-error-focus-ring, rgba(220, 38, 38, .35))}: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))}:host(.base-button--readonly.base-button--link) .base-button__native{background:transparent;border:none;text-decoration:underline}.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}:host(.base-button--link.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--app-color-primary, #2b7fd9) 12%,transparent);border:none;min-height:calc(var(--bb-fs, .9375rem) * 1.35);border-radius:2px}:host(.base-button--danger.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--app-color-error, #b91c1c) 82%,#ffffff);border-color:color-mix(in srgb,var(--app-color-error-border, #dc2626) 88%,#ffffff)}\n"], dependencies: [{ kind: "component", type: SkeletonBlockComponent, selector: "app-skeleton-block", inputs: ["width", "height", "radius", "animate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
336
323
|
}
|
|
337
324
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BaseButtonComponent, decorators: [{
|
|
338
325
|
type: Component,
|
|
339
|
-
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}:host(.base-button--size-sm){--bb-fs: .8125rem;--bb-min-h: 2rem;--bb-pad-y: .375rem;--bb-pad-x: .875rem;--bb-gap: .375rem;--bb-min-w: 4rem}:host(.base-button--size-md){--bb-fs: .9375rem;--bb-min-h: 2.5rem;--bb-pad-y: .5rem;--bb-pad-x: 1.25rem;--bb-gap: .5rem;--bb-min-w: 5rem}:host(.base-button--size-lg){--bb-fs: 1rem;--bb-min-h: 2.875rem;--bb-pad-y: .625rem;--bb-pad-x: 1.5rem;--bb-gap: .625rem;--bb-min-w: 5.5rem}:host(.base-button--ghost){--bb-min-h: 2.25rem;--bb-pad-y: .35rem;--bb-pad-x: .5rem;--bb-fs: .95rem;--bb-gap: .45rem;--bb-min-w: 0}:host(.base-button--ghost.base-button--size-sm){--bb-min-h: 2rem;--bb-pad-y: .28rem;--bb-pad-x: .42rem;--bb-fs: .875rem;--bb-gap: .35rem}:host(.base-button--ghost.base-button--size-lg){--bb-min-h: 2.5rem;--bb-pad-y: .42rem;--bb-pad-x: .62rem;--bb-fs: 1.05rem;--bb-gap: .5rem}:host(.base-button--link){--bb-min-h: 0;--bb-min-w: 0;--bb-gap: .35rem;--bb-pad-x: 0}:host(.base-button--link.base-button--size-sm){--bb-fs: .8125rem;--bb-pad-y: .05rem;--bb-gap: .3rem}:host(.base-button--link.base-button--size-md){--bb-fs: .9375rem}:host(.base-button--link.base-button--size-lg){--bb-fs: 1rem;--bb-pad-y: .12rem;--bb-gap: .4rem}.base-button__native{-webkit-appearance:none;appearance:none;display:flex;width:auto;min-width:var(--bb-min-w, 5rem);align-items:center;justify-content:center;text-align:center;gap:var(--bb-gap, .5rem);min-height:var(--bb-min-h, 2.5rem);padding:var(--bb-pad-y, .5rem) var(--bb-pad-x, 1.25rem);margin:0;border:1px solid transparent;border-radius:var(--ui-field-float-border-radius, 14px);font:inherit;font-size:var(--bb-fs, .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}
|
|
326
|
+
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}:host(.base-button--size-sm){--bb-fs: .8125rem;--bb-min-h: 2rem;--bb-pad-y: .375rem;--bb-pad-x: .875rem;--bb-gap: .375rem;--bb-min-w: 4rem}:host(.base-button--size-md){--bb-fs: .9375rem;--bb-min-h: 2.5rem;--bb-pad-y: .5rem;--bb-pad-x: 1.25rem;--bb-gap: .5rem;--bb-min-w: 5rem}:host(.base-button--size-lg){--bb-fs: 1rem;--bb-min-h: 2.875rem;--bb-pad-y: .625rem;--bb-pad-x: 1.5rem;--bb-gap: .625rem;--bb-min-w: 5.5rem}:host(.base-button--size-xl){--bb-fs: 1.0625rem;--bb-min-h: 3.25rem;--bb-pad-y: .75rem;--bb-pad-x: 1.75rem;--bb-gap: .75rem;--bb-min-w: 6rem}:host(.base-button--ghost){--bb-min-h: 2.25rem;--bb-pad-y: .35rem;--bb-pad-x: .5rem;--bb-fs: .95rem;--bb-gap: .45rem;--bb-min-w: 0}:host(.base-button--ghost.base-button--size-sm){--bb-min-h: 2rem;--bb-pad-y: .28rem;--bb-pad-x: .42rem;--bb-fs: .875rem;--bb-gap: .35rem}:host(.base-button--ghost.base-button--size-lg){--bb-min-h: 2.5rem;--bb-pad-y: .42rem;--bb-pad-x: .62rem;--bb-fs: 1.05rem;--bb-gap: .5rem}:host(.base-button--ghost.base-button--size-xl){--bb-min-h: 2.875rem;--bb-pad-y: .5rem;--bb-pad-x: .72rem;--bb-fs: 1.1rem;--bb-gap: .55rem}:host(.base-button--link){--bb-min-h: 0;--bb-min-w: 0;--bb-gap: .35rem;--bb-pad-x: 0}:host(.base-button--link.base-button--size-sm){--bb-fs: .8125rem;--bb-pad-y: .05rem;--bb-gap: .3rem}:host(.base-button--link.base-button--size-md){--bb-fs: .9375rem}:host(.base-button--link.base-button--size-lg){--bb-fs: 1rem;--bb-pad-y: .12rem;--bb-gap: .4rem}:host(.base-button--link.base-button--size-xl){--bb-fs: 1.0625rem;--bb-pad-y: .14rem;--bb-gap: .45rem}.base-button__native{-webkit-appearance:none;appearance:none;display:flex;width:auto;min-width:var(--bb-min-w, 5rem);align-items:center;justify-content:center;text-align:center;gap:var(--bb-gap, .5rem);min-height:var(--bb-min-h, 2.5rem);padding:var(--bb-pad-y, .5rem) var(--bb-pad-x, 1.25rem);margin:0;border:1px solid transparent;border-radius:var(--ui-field-float-border-radius, 14px);font:inherit;font-size:var(--bb-fs, .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;border-radius:8px;font-weight:600;justify-content:flex-start}: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--link) .base-button__native{color:var(--app-color-primary, #2b7fd9);background:transparent;border:none;border-radius:0;padding:var(--bb-pad-y, .1rem) var(--bb-pad-x, 0);min-height:0;font-family:inherit;font-weight:500;line-height:inherit;justify-content:flex-start;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;box-shadow:none;transition:color .15s ease,opacity .15s ease}:host(.base-button--link) .base-button__native:hover:not(:disabled){color:var(--app-color-secondary, #1a2f45);background:transparent;border-color:transparent;filter:none}:host(.base-button--link) .base-button__native:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ui-field-float-focus-ring, rgba(43, 127, 217, .4));border-radius:2px}:host(.base-button--danger) .base-button__native{color:var(--app-color-error-contrast, #fff);background:var(--app-color-error, #b91c1c);border-color:var(--app-color-error-border, #dc2626)}:host(.base-button--danger) .base-button__native:hover:not(:disabled){filter:brightness(.95)}:host(.base-button--danger) .base-button__native:focus-visible{outline:none;box-shadow:0 0 0 3px var(--app-color-error-focus-ring, rgba(220, 38, 38, .35))}: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))}:host(.base-button--readonly.base-button--link) .base-button__native{background:transparent;border:none;text-decoration:underline}.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}:host(.base-button--link.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--app-color-primary, #2b7fd9) 12%,transparent);border:none;min-height:calc(var(--bb-fs, .9375rem) * 1.35);border-radius:2px}:host(.base-button--danger.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--app-color-error, #b91c1c) 82%,#ffffff);border-color:color-mix(in srgb,var(--app-color-error-border, #dc2626) 88%,#ffffff)}\n"] }]
|
|
340
327
|
}], propDecorators: { nativeBtn: [{
|
|
341
328
|
type: ViewChild,
|
|
342
329
|
args: ['nativeBtn', { read: ElementRef }]
|
|
@@ -353,8 +340,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
353
340
|
args: [{ transform: booleanAttribute }]
|
|
354
341
|
}], size: [{
|
|
355
342
|
type: Input
|
|
356
|
-
}], align: [{
|
|
357
|
-
type: Input
|
|
358
343
|
}], loading: [{
|
|
359
344
|
type: Input,
|
|
360
345
|
args: [{ transform: booleanAttribute }]
|
|
@@ -374,11 +359,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
374
359
|
*/
|
|
375
360
|
class ButtonComponent extends BaseButtonComponent {
|
|
376
361
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
377
|
-
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}:host(.base-button--size-sm){--bb-fs: .8125rem;--bb-min-h: 2rem;--bb-pad-y: .375rem;--bb-pad-x: .875rem;--bb-gap: .375rem;--bb-min-w: 4rem}:host(.base-button--size-md){--bb-fs: .9375rem;--bb-min-h: 2.5rem;--bb-pad-y: .5rem;--bb-pad-x: 1.25rem;--bb-gap: .5rem;--bb-min-w: 5rem}:host(.base-button--size-lg){--bb-fs: 1rem;--bb-min-h: 2.875rem;--bb-pad-y: .625rem;--bb-pad-x: 1.5rem;--bb-gap: .625rem;--bb-min-w: 5.5rem}:host(.base-button--ghost){--bb-min-h: 2.25rem;--bb-pad-y: .35rem;--bb-pad-x: .5rem;--bb-fs: .95rem;--bb-gap: .45rem;--bb-min-w: 0}:host(.base-button--ghost.base-button--size-sm){--bb-min-h: 2rem;--bb-pad-y: .28rem;--bb-pad-x: .42rem;--bb-fs: .875rem;--bb-gap: .35rem}:host(.base-button--ghost.base-button--size-lg){--bb-min-h: 2.5rem;--bb-pad-y: .42rem;--bb-pad-x: .62rem;--bb-fs: 1.05rem;--bb-gap: .5rem}:host(.base-button--link){--bb-min-h: 0;--bb-min-w: 0;--bb-gap: .35rem;--bb-pad-x: 0}:host(.base-button--link.base-button--size-sm){--bb-fs: .8125rem;--bb-pad-y: .05rem;--bb-gap: .3rem}:host(.base-button--link.base-button--size-md){--bb-fs: .9375rem}:host(.base-button--link.base-button--size-lg){--bb-fs: 1rem;--bb-pad-y: .12rem;--bb-gap: .4rem}.base-button__native{-webkit-appearance:none;appearance:none;display:flex;width:auto;min-width:var(--bb-min-w, 5rem);align-items:center;justify-content:center;text-align:center;gap:var(--bb-gap, .5rem);min-height:var(--bb-min-h, 2.5rem);padding:var(--bb-pad-y, .5rem) var(--bb-pad-x, 1.25rem);margin:0;border:1px solid transparent;border-radius:var(--ui-field-float-border-radius, 14px);font:inherit;font-size:var(--bb-fs, .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}
|
|
362
|
+
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}:host(.base-button--size-sm){--bb-fs: .8125rem;--bb-min-h: 2rem;--bb-pad-y: .375rem;--bb-pad-x: .875rem;--bb-gap: .375rem;--bb-min-w: 4rem}:host(.base-button--size-md){--bb-fs: .9375rem;--bb-min-h: 2.5rem;--bb-pad-y: .5rem;--bb-pad-x: 1.25rem;--bb-gap: .5rem;--bb-min-w: 5rem}:host(.base-button--size-lg){--bb-fs: 1rem;--bb-min-h: 2.875rem;--bb-pad-y: .625rem;--bb-pad-x: 1.5rem;--bb-gap: .625rem;--bb-min-w: 5.5rem}:host(.base-button--size-xl){--bb-fs: 1.0625rem;--bb-min-h: 3.25rem;--bb-pad-y: .75rem;--bb-pad-x: 1.75rem;--bb-gap: .75rem;--bb-min-w: 6rem}:host(.base-button--ghost){--bb-min-h: 2.25rem;--bb-pad-y: .35rem;--bb-pad-x: .5rem;--bb-fs: .95rem;--bb-gap: .45rem;--bb-min-w: 0}:host(.base-button--ghost.base-button--size-sm){--bb-min-h: 2rem;--bb-pad-y: .28rem;--bb-pad-x: .42rem;--bb-fs: .875rem;--bb-gap: .35rem}:host(.base-button--ghost.base-button--size-lg){--bb-min-h: 2.5rem;--bb-pad-y: .42rem;--bb-pad-x: .62rem;--bb-fs: 1.05rem;--bb-gap: .5rem}:host(.base-button--ghost.base-button--size-xl){--bb-min-h: 2.875rem;--bb-pad-y: .5rem;--bb-pad-x: .72rem;--bb-fs: 1.1rem;--bb-gap: .55rem}:host(.base-button--link){--bb-min-h: 0;--bb-min-w: 0;--bb-gap: .35rem;--bb-pad-x: 0}:host(.base-button--link.base-button--size-sm){--bb-fs: .8125rem;--bb-pad-y: .05rem;--bb-gap: .3rem}:host(.base-button--link.base-button--size-md){--bb-fs: .9375rem}:host(.base-button--link.base-button--size-lg){--bb-fs: 1rem;--bb-pad-y: .12rem;--bb-gap: .4rem}:host(.base-button--link.base-button--size-xl){--bb-fs: 1.0625rem;--bb-pad-y: .14rem;--bb-gap: .45rem}.base-button__native{-webkit-appearance:none;appearance:none;display:flex;width:auto;min-width:var(--bb-min-w, 5rem);align-items:center;justify-content:center;text-align:center;gap:var(--bb-gap, .5rem);min-height:var(--bb-min-h, 2.5rem);padding:var(--bb-pad-y, .5rem) var(--bb-pad-x, 1.25rem);margin:0;border:1px solid transparent;border-radius:var(--ui-field-float-border-radius, 14px);font:inherit;font-size:var(--bb-fs, .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;border-radius:8px;font-weight:600;justify-content:flex-start}: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--link) .base-button__native{color:var(--app-color-primary, #2b7fd9);background:transparent;border:none;border-radius:0;padding:var(--bb-pad-y, .1rem) var(--bb-pad-x, 0);min-height:0;font-family:inherit;font-weight:500;line-height:inherit;justify-content:flex-start;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;box-shadow:none;transition:color .15s ease,opacity .15s ease}:host(.base-button--link) .base-button__native:hover:not(:disabled){color:var(--app-color-secondary, #1a2f45);background:transparent;border-color:transparent;filter:none}:host(.base-button--link) .base-button__native:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ui-field-float-focus-ring, rgba(43, 127, 217, .4));border-radius:2px}:host(.base-button--danger) .base-button__native{color:var(--app-color-error-contrast, #fff);background:var(--app-color-error, #b91c1c);border-color:var(--app-color-error-border, #dc2626)}:host(.base-button--danger) .base-button__native:hover:not(:disabled){filter:brightness(.95)}:host(.base-button--danger) .base-button__native:focus-visible{outline:none;box-shadow:0 0 0 3px var(--app-color-error-focus-ring, rgba(220, 38, 38, .35))}: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))}:host(.base-button--readonly.base-button--link) .base-button__native{background:transparent;border:none;text-decoration:underline}.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}:host(.base-button--link.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--app-color-primary, #2b7fd9) 12%,transparent);border:none;min-height:calc(var(--bb-fs, .9375rem) * 1.35);border-radius:2px}:host(.base-button--danger.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--app-color-error, #b91c1c) 82%,#ffffff);border-color:color-mix(in srgb,var(--app-color-error-border, #dc2626) 88%,#ffffff)}\n"], dependencies: [{ kind: "component", type: SkeletonBlockComponent, selector: "app-skeleton-block", inputs: ["width", "height", "radius", "animate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
378
363
|
}
|
|
379
364
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
380
365
|
type: Component,
|
|
381
|
-
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}:host(.base-button--size-sm){--bb-fs: .8125rem;--bb-min-h: 2rem;--bb-pad-y: .375rem;--bb-pad-x: .875rem;--bb-gap: .375rem;--bb-min-w: 4rem}:host(.base-button--size-md){--bb-fs: .9375rem;--bb-min-h: 2.5rem;--bb-pad-y: .5rem;--bb-pad-x: 1.25rem;--bb-gap: .5rem;--bb-min-w: 5rem}:host(.base-button--size-lg){--bb-fs: 1rem;--bb-min-h: 2.875rem;--bb-pad-y: .625rem;--bb-pad-x: 1.5rem;--bb-gap: .625rem;--bb-min-w: 5.5rem}:host(.base-button--ghost){--bb-min-h: 2.25rem;--bb-pad-y: .35rem;--bb-pad-x: .5rem;--bb-fs: .95rem;--bb-gap: .45rem;--bb-min-w: 0}:host(.base-button--ghost.base-button--size-sm){--bb-min-h: 2rem;--bb-pad-y: .28rem;--bb-pad-x: .42rem;--bb-fs: .875rem;--bb-gap: .35rem}:host(.base-button--ghost.base-button--size-lg){--bb-min-h: 2.5rem;--bb-pad-y: .42rem;--bb-pad-x: .62rem;--bb-fs: 1.05rem;--bb-gap: .5rem}:host(.base-button--link){--bb-min-h: 0;--bb-min-w: 0;--bb-gap: .35rem;--bb-pad-x: 0}:host(.base-button--link.base-button--size-sm){--bb-fs: .8125rem;--bb-pad-y: .05rem;--bb-gap: .3rem}:host(.base-button--link.base-button--size-md){--bb-fs: .9375rem}:host(.base-button--link.base-button--size-lg){--bb-fs: 1rem;--bb-pad-y: .12rem;--bb-gap: .4rem}.base-button__native{-webkit-appearance:none;appearance:none;display:flex;width:auto;min-width:var(--bb-min-w, 5rem);align-items:center;justify-content:center;text-align:center;gap:var(--bb-gap, .5rem);min-height:var(--bb-min-h, 2.5rem);padding:var(--bb-pad-y, .5rem) var(--bb-pad-x, 1.25rem);margin:0;border:1px solid transparent;border-radius:var(--ui-field-float-border-radius, 14px);font:inherit;font-size:var(--bb-fs, .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}
|
|
366
|
+
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}:host(.base-button--size-sm){--bb-fs: .8125rem;--bb-min-h: 2rem;--bb-pad-y: .375rem;--bb-pad-x: .875rem;--bb-gap: .375rem;--bb-min-w: 4rem}:host(.base-button--size-md){--bb-fs: .9375rem;--bb-min-h: 2.5rem;--bb-pad-y: .5rem;--bb-pad-x: 1.25rem;--bb-gap: .5rem;--bb-min-w: 5rem}:host(.base-button--size-lg){--bb-fs: 1rem;--bb-min-h: 2.875rem;--bb-pad-y: .625rem;--bb-pad-x: 1.5rem;--bb-gap: .625rem;--bb-min-w: 5.5rem}:host(.base-button--size-xl){--bb-fs: 1.0625rem;--bb-min-h: 3.25rem;--bb-pad-y: .75rem;--bb-pad-x: 1.75rem;--bb-gap: .75rem;--bb-min-w: 6rem}:host(.base-button--ghost){--bb-min-h: 2.25rem;--bb-pad-y: .35rem;--bb-pad-x: .5rem;--bb-fs: .95rem;--bb-gap: .45rem;--bb-min-w: 0}:host(.base-button--ghost.base-button--size-sm){--bb-min-h: 2rem;--bb-pad-y: .28rem;--bb-pad-x: .42rem;--bb-fs: .875rem;--bb-gap: .35rem}:host(.base-button--ghost.base-button--size-lg){--bb-min-h: 2.5rem;--bb-pad-y: .42rem;--bb-pad-x: .62rem;--bb-fs: 1.05rem;--bb-gap: .5rem}:host(.base-button--ghost.base-button--size-xl){--bb-min-h: 2.875rem;--bb-pad-y: .5rem;--bb-pad-x: .72rem;--bb-fs: 1.1rem;--bb-gap: .55rem}:host(.base-button--link){--bb-min-h: 0;--bb-min-w: 0;--bb-gap: .35rem;--bb-pad-x: 0}:host(.base-button--link.base-button--size-sm){--bb-fs: .8125rem;--bb-pad-y: .05rem;--bb-gap: .3rem}:host(.base-button--link.base-button--size-md){--bb-fs: .9375rem}:host(.base-button--link.base-button--size-lg){--bb-fs: 1rem;--bb-pad-y: .12rem;--bb-gap: .4rem}:host(.base-button--link.base-button--size-xl){--bb-fs: 1.0625rem;--bb-pad-y: .14rem;--bb-gap: .45rem}.base-button__native{-webkit-appearance:none;appearance:none;display:flex;width:auto;min-width:var(--bb-min-w, 5rem);align-items:center;justify-content:center;text-align:center;gap:var(--bb-gap, .5rem);min-height:var(--bb-min-h, 2.5rem);padding:var(--bb-pad-y, .5rem) var(--bb-pad-x, 1.25rem);margin:0;border:1px solid transparent;border-radius:var(--ui-field-float-border-radius, 14px);font:inherit;font-size:var(--bb-fs, .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;border-radius:8px;font-weight:600;justify-content:flex-start}: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--link) .base-button__native{color:var(--app-color-primary, #2b7fd9);background:transparent;border:none;border-radius:0;padding:var(--bb-pad-y, .1rem) var(--bb-pad-x, 0);min-height:0;font-family:inherit;font-weight:500;line-height:inherit;justify-content:flex-start;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;box-shadow:none;transition:color .15s ease,opacity .15s ease}:host(.base-button--link) .base-button__native:hover:not(:disabled){color:var(--app-color-secondary, #1a2f45);background:transparent;border-color:transparent;filter:none}:host(.base-button--link) .base-button__native:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ui-field-float-focus-ring, rgba(43, 127, 217, .4));border-radius:2px}:host(.base-button--danger) .base-button__native{color:var(--app-color-error-contrast, #fff);background:var(--app-color-error, #b91c1c);border-color:var(--app-color-error-border, #dc2626)}:host(.base-button--danger) .base-button__native:hover:not(:disabled){filter:brightness(.95)}:host(.base-button--danger) .base-button__native:focus-visible{outline:none;box-shadow:0 0 0 3px var(--app-color-error-focus-ring, rgba(220, 38, 38, .35))}: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))}:host(.base-button--readonly.base-button--link) .base-button__native{background:transparent;border:none;text-decoration:underline}.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}:host(.base-button--link.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--app-color-primary, #2b7fd9) 12%,transparent);border:none;min-height:calc(var(--bb-fs, .9375rem) * 1.35);border-radius:2px}:host(.base-button--danger.base-button--loading) .base-button__native--skeleton{color:transparent;background:color-mix(in srgb,var(--app-color-error, #b91c1c) 82%,#ffffff);border-color:color-mix(in srgb,var(--app-color-error-border, #dc2626) 88%,#ffffff)}\n"] }]
|
|
382
367
|
}] });
|
|
383
368
|
|
|
384
369
|
let fieldControlAutoId = 0;
|
|
@@ -3414,6 +3399,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
3414
3399
|
}] } });
|
|
3415
3400
|
|
|
3416
3401
|
class CheckboxFieldComponent extends BooleanFieldDirective {
|
|
3402
|
+
constructor() {
|
|
3403
|
+
super(...arguments);
|
|
3404
|
+
/** `true` (padrão): host ocupa 100%. Com `false`, usa largura intrínseca (útil em `app-form-row` com justify). */
|
|
3405
|
+
this.fullWidth = true;
|
|
3406
|
+
}
|
|
3407
|
+
get fullWidthClass() {
|
|
3408
|
+
return this.fullWidth;
|
|
3409
|
+
}
|
|
3417
3410
|
onCheckboxClick(ev) {
|
|
3418
3411
|
if (this.readonly || this.loading) {
|
|
3419
3412
|
ev.preventDefault();
|
|
@@ -3425,13 +3418,13 @@ class CheckboxFieldComponent extends BooleanFieldDirective {
|
|
|
3425
3418
|
this.setChecked(el.checked);
|
|
3426
3419
|
}
|
|
3427
3420
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CheckboxFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3428
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CheckboxFieldComponent, isStandalone: true, selector: "app-checkbox-field", providers: [
|
|
3421
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CheckboxFieldComponent, isStandalone: true, selector: "app-checkbox-field", inputs: { fullWidth: ["fullWidth", "fullWidth", booleanAttribute] }, host: { properties: { "class.checkbox-field--full-width": "this.fullWidthClass" } }, providers: [
|
|
3429
3422
|
{
|
|
3430
3423
|
provide: NG_VALUE_ACCESSOR,
|
|
3431
3424
|
useExisting: forwardRef(() => CheckboxFieldComponent),
|
|
3432
3425
|
multi: true,
|
|
3433
3426
|
},
|
|
3434
|
-
], usesInheritance: true, ngImport: i0, template: "@if (!loading) {\r\n<div class=\"checkbox-field\" [class.checkbox-field--invalid]=\"uiInvalid\"\r\n [class.checkbox-field--readonly]=\"readonly\">\r\n <label class=\"checkbox-field__row\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"checkbox-field__native\"\r\n [id]=\"controlId\"\r\n [attr.name]=\"name || null\"\r\n [attr.tabindex]=\"readonly ? -1 : null\"\r\n [checked]=\"checked\"\r\n [disabled]=\"disabled\"\r\n [required]=\"uiRequiredEffective\"\r\n [attr.aria-invalid]=\"uiInvalid\"\r\n [attr.aria-describedby]=\"uiAriaDescribedBy\"\r\n [attr.aria-readonly]=\"readonly ? true : null\"\r\n [attr.aria-label]=\"label || placeholder || 'Op\u00E7\u00E3o'\"\r\n (click)=\"onCheckboxClick($event)\"\r\n (change)=\"onNativeChange($event)\"\r\n (blur)=\"onBlur()\"\r\n />\r\n @if (label) {\r\n <span class=\"checkbox-field__label\">{{ label }}</span>\r\n }\r\n </label>\r\n @if (showErrorMessage && uiInvalid && uiErrorMessage) {\r\n <p class=\"checkbox-field__error\" [id]=\"errorElementId\" role=\"alert\">{{ uiErrorMessage }}</p>\r\n }\r\n</div>\r\n} @else {\r\n<div class=\"checkbox-field checkbox-field--loading\" role=\"status\" aria-live=\"polite\" [attr.aria-busy]=\"true\"\r\n [attr.aria-label]=\"label || 'A carregar'\">\r\n <div class=\"checkbox-field__skeleton-row\" aria-hidden=\"true\">\r\n <app-skeleton-block width=\"1.1rem\" height=\"1.1rem\" radius=\"4px\" />\r\n <app-skeleton-block width=\"11rem\" height=\"0.72rem\" radius=\"6px\" />\r\n </div>\r\n</div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:
|
|
3427
|
+
], usesInheritance: true, ngImport: i0, template: "@if (!loading) {\r\n<div class=\"checkbox-field\" [class.checkbox-field--invalid]=\"uiInvalid\"\r\n [class.checkbox-field--readonly]=\"readonly\">\r\n <label class=\"checkbox-field__row\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"checkbox-field__native\"\r\n [id]=\"controlId\"\r\n [attr.name]=\"name || null\"\r\n [attr.tabindex]=\"readonly ? -1 : null\"\r\n [checked]=\"checked\"\r\n [disabled]=\"disabled\"\r\n [required]=\"uiRequiredEffective\"\r\n [attr.aria-invalid]=\"uiInvalid\"\r\n [attr.aria-describedby]=\"uiAriaDescribedBy\"\r\n [attr.aria-readonly]=\"readonly ? true : null\"\r\n [attr.aria-label]=\"label || placeholder || 'Op\u00E7\u00E3o'\"\r\n (click)=\"onCheckboxClick($event)\"\r\n (change)=\"onNativeChange($event)\"\r\n (blur)=\"onBlur()\"\r\n />\r\n @if (label) {\r\n <span class=\"checkbox-field__label\">{{ label }}</span>\r\n }\r\n </label>\r\n @if (showErrorMessage && uiInvalid && uiErrorMessage) {\r\n <p class=\"checkbox-field__error\" [id]=\"errorElementId\" role=\"alert\">{{ uiErrorMessage }}</p>\r\n }\r\n</div>\r\n} @else {\r\n<div class=\"checkbox-field checkbox-field--loading\" role=\"status\" aria-live=\"polite\" [attr.aria-busy]=\"true\"\r\n [attr.aria-label]=\"label || 'A carregar'\">\r\n <div class=\"checkbox-field__skeleton-row\" aria-hidden=\"true\">\r\n <app-skeleton-block width=\"1.1rem\" height=\"1.1rem\" radius=\"4px\" />\r\n <app-skeleton-block width=\"11rem\" height=\"0.72rem\" radius=\"6px\" />\r\n </div>\r\n</div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:auto;box-sizing:border-box}:host(.checkbox-field--full-width){width:100%}.checkbox-field--invalid .checkbox-field__label{color:var(--ui-field-float-label-invalid-color)}.checkbox-field__row{display:flex;align-items:center;gap:.5rem;margin:0;cursor:pointer;width:fit-content;max-width:100%}.checkbox-field__native{appearance:none;-webkit-appearance:none;width:1.1rem;height:1.1rem;margin:0;flex-shrink:0;box-sizing:border-box;border:1px solid var(--ui-field-float-border);border-radius:4px;background-color:var(--ui-field-float-bg);background-repeat:no-repeat;background-position:center;background-size:.65rem auto;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}.checkbox-field__native:focus-visible{outline:2px solid var(--ui-field-float-border-focus);outline-offset:2px}.checkbox-field__native:focus:not(:focus-visible){outline:2px solid var(--ui-field-float-border-focus);outline-offset:2px}.checkbox-field__native:checked{border-color:var(--ui-field-float-border-focus);background-color:var(--ui-field-float-border-focus);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6l2.5 2.5 4.5-5'/%3E%3C/svg%3E\")}.checkbox-field__native:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}.checkbox-field--invalid .checkbox-field__native{border-color:var(--ui-field-input-invalid-border)}.checkbox-field--invalid .checkbox-field__native:checked{border-color:var(--ui-field-input-invalid-border);background-color:var(--ui-field-input-invalid-border);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6l2.5 2.5 4.5-5'/%3E%3C/svg%3E\")}.checkbox-field--invalid .checkbox-field__native:focus-visible{outline-color:var(--ui-field-input-invalid-border)}.checkbox-field--invalid .checkbox-field__native:focus:not(:focus-visible){outline:2px solid var(--ui-field-input-invalid-border);outline-offset:2px}.checkbox-field__label{font-size:1rem;line-height:1.35;color:var(--ui-field-float-label-color);cursor:pointer;-webkit-user-select:none;user-select:none;padding-top:.1em}.checkbox-field__error{margin:.35rem 0 0 1.6rem;padding:0;font-size:.75rem;color:var(--ui-field-error-text-color);user-select:none;-webkit-user-select:none}.checkbox-field--loading{width:100%;max-width:100%;box-sizing:border-box}.checkbox-field--loading .checkbox-field__skeleton-row{display:flex;align-items:center;gap:.5rem;width:100%;max-width:100%;box-sizing:border-box}.checkbox-field--readonly .checkbox-field__row{cursor:default;pointer-events:none}.checkbox-field--readonly .checkbox-field__native{border-color:var(--ui-field-readonly-border);background-color:var(--ui-field-readonly-bg);cursor:default}.checkbox-field--readonly .checkbox-field__native:checked{border-color:var(--ui-field-readonly-border-focus);background-color:var(--ui-field-readonly-border-focus);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6l2.5 2.5 4.5-5'/%3E%3C/svg%3E\")}.checkbox-field--readonly .checkbox-field__native:focus,.checkbox-field--readonly .checkbox-field__native:focus-visible{outline:none}.checkbox-field--readonly .checkbox-field__label{color:var(--ui-field-readonly-label-color);cursor:default}\n"], dependencies: [{ kind: "component", type: SkeletonBlockComponent, selector: "app-skeleton-block", inputs: ["width", "height", "radius", "animate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3435
3428
|
}
|
|
3436
3429
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CheckboxFieldComponent, decorators: [{
|
|
3437
3430
|
type: Component,
|
|
@@ -3441,8 +3434,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
3441
3434
|
useExisting: forwardRef(() => CheckboxFieldComponent),
|
|
3442
3435
|
multi: true,
|
|
3443
3436
|
},
|
|
3444
|
-
], template: "@if (!loading) {\r\n<div class=\"checkbox-field\" [class.checkbox-field--invalid]=\"uiInvalid\"\r\n [class.checkbox-field--readonly]=\"readonly\">\r\n <label class=\"checkbox-field__row\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"checkbox-field__native\"\r\n [id]=\"controlId\"\r\n [attr.name]=\"name || null\"\r\n [attr.tabindex]=\"readonly ? -1 : null\"\r\n [checked]=\"checked\"\r\n [disabled]=\"disabled\"\r\n [required]=\"uiRequiredEffective\"\r\n [attr.aria-invalid]=\"uiInvalid\"\r\n [attr.aria-describedby]=\"uiAriaDescribedBy\"\r\n [attr.aria-readonly]=\"readonly ? true : null\"\r\n [attr.aria-label]=\"label || placeholder || 'Op\u00E7\u00E3o'\"\r\n (click)=\"onCheckboxClick($event)\"\r\n (change)=\"onNativeChange($event)\"\r\n (blur)=\"onBlur()\"\r\n />\r\n @if (label) {\r\n <span class=\"checkbox-field__label\">{{ label }}</span>\r\n }\r\n </label>\r\n @if (showErrorMessage && uiInvalid && uiErrorMessage) {\r\n <p class=\"checkbox-field__error\" [id]=\"errorElementId\" role=\"alert\">{{ uiErrorMessage }}</p>\r\n }\r\n</div>\r\n} @else {\r\n<div class=\"checkbox-field checkbox-field--loading\" role=\"status\" aria-live=\"polite\" [attr.aria-busy]=\"true\"\r\n [attr.aria-label]=\"label || 'A carregar'\">\r\n <div class=\"checkbox-field__skeleton-row\" aria-hidden=\"true\">\r\n <app-skeleton-block width=\"1.1rem\" height=\"1.1rem\" radius=\"4px\" />\r\n <app-skeleton-block width=\"11rem\" height=\"0.72rem\" radius=\"6px\" />\r\n </div>\r\n</div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:
|
|
3445
|
-
}]
|
|
3437
|
+
], template: "@if (!loading) {\r\n<div class=\"checkbox-field\" [class.checkbox-field--invalid]=\"uiInvalid\"\r\n [class.checkbox-field--readonly]=\"readonly\">\r\n <label class=\"checkbox-field__row\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"checkbox-field__native\"\r\n [id]=\"controlId\"\r\n [attr.name]=\"name || null\"\r\n [attr.tabindex]=\"readonly ? -1 : null\"\r\n [checked]=\"checked\"\r\n [disabled]=\"disabled\"\r\n [required]=\"uiRequiredEffective\"\r\n [attr.aria-invalid]=\"uiInvalid\"\r\n [attr.aria-describedby]=\"uiAriaDescribedBy\"\r\n [attr.aria-readonly]=\"readonly ? true : null\"\r\n [attr.aria-label]=\"label || placeholder || 'Op\u00E7\u00E3o'\"\r\n (click)=\"onCheckboxClick($event)\"\r\n (change)=\"onNativeChange($event)\"\r\n (blur)=\"onBlur()\"\r\n />\r\n @if (label) {\r\n <span class=\"checkbox-field__label\">{{ label }}</span>\r\n }\r\n </label>\r\n @if (showErrorMessage && uiInvalid && uiErrorMessage) {\r\n <p class=\"checkbox-field__error\" [id]=\"errorElementId\" role=\"alert\">{{ uiErrorMessage }}</p>\r\n }\r\n</div>\r\n} @else {\r\n<div class=\"checkbox-field checkbox-field--loading\" role=\"status\" aria-live=\"polite\" [attr.aria-busy]=\"true\"\r\n [attr.aria-label]=\"label || 'A carregar'\">\r\n <div class=\"checkbox-field__skeleton-row\" aria-hidden=\"true\">\r\n <app-skeleton-block width=\"1.1rem\" height=\"1.1rem\" radius=\"4px\" />\r\n <app-skeleton-block width=\"11rem\" height=\"0.72rem\" radius=\"6px\" />\r\n </div>\r\n</div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:auto;box-sizing:border-box}:host(.checkbox-field--full-width){width:100%}.checkbox-field--invalid .checkbox-field__label{color:var(--ui-field-float-label-invalid-color)}.checkbox-field__row{display:flex;align-items:center;gap:.5rem;margin:0;cursor:pointer;width:fit-content;max-width:100%}.checkbox-field__native{appearance:none;-webkit-appearance:none;width:1.1rem;height:1.1rem;margin:0;flex-shrink:0;box-sizing:border-box;border:1px solid var(--ui-field-float-border);border-radius:4px;background-color:var(--ui-field-float-bg);background-repeat:no-repeat;background-position:center;background-size:.65rem auto;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}.checkbox-field__native:focus-visible{outline:2px solid var(--ui-field-float-border-focus);outline-offset:2px}.checkbox-field__native:focus:not(:focus-visible){outline:2px solid var(--ui-field-float-border-focus);outline-offset:2px}.checkbox-field__native:checked{border-color:var(--ui-field-float-border-focus);background-color:var(--ui-field-float-border-focus);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6l2.5 2.5 4.5-5'/%3E%3C/svg%3E\")}.checkbox-field__native:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}.checkbox-field--invalid .checkbox-field__native{border-color:var(--ui-field-input-invalid-border)}.checkbox-field--invalid .checkbox-field__native:checked{border-color:var(--ui-field-input-invalid-border);background-color:var(--ui-field-input-invalid-border);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6l2.5 2.5 4.5-5'/%3E%3C/svg%3E\")}.checkbox-field--invalid .checkbox-field__native:focus-visible{outline-color:var(--ui-field-input-invalid-border)}.checkbox-field--invalid .checkbox-field__native:focus:not(:focus-visible){outline:2px solid var(--ui-field-input-invalid-border);outline-offset:2px}.checkbox-field__label{font-size:1rem;line-height:1.35;color:var(--ui-field-float-label-color);cursor:pointer;-webkit-user-select:none;user-select:none;padding-top:.1em}.checkbox-field__error{margin:.35rem 0 0 1.6rem;padding:0;font-size:.75rem;color:var(--ui-field-error-text-color);user-select:none;-webkit-user-select:none}.checkbox-field--loading{width:100%;max-width:100%;box-sizing:border-box}.checkbox-field--loading .checkbox-field__skeleton-row{display:flex;align-items:center;gap:.5rem;width:100%;max-width:100%;box-sizing:border-box}.checkbox-field--readonly .checkbox-field__row{cursor:default;pointer-events:none}.checkbox-field--readonly .checkbox-field__native{border-color:var(--ui-field-readonly-border);background-color:var(--ui-field-readonly-bg);cursor:default}.checkbox-field--readonly .checkbox-field__native:checked{border-color:var(--ui-field-readonly-border-focus);background-color:var(--ui-field-readonly-border-focus);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6l2.5 2.5 4.5-5'/%3E%3C/svg%3E\")}.checkbox-field--readonly .checkbox-field__native:focus,.checkbox-field--readonly .checkbox-field__native:focus-visible{outline:none}.checkbox-field--readonly .checkbox-field__label{color:var(--ui-field-readonly-label-color);cursor:default}\n"] }]
|
|
3438
|
+
}], propDecorators: { fullWidth: [{
|
|
3439
|
+
type: Input,
|
|
3440
|
+
args: [{ transform: booleanAttribute }]
|
|
3441
|
+
}], fullWidthClass: [{
|
|
3442
|
+
type: HostBinding,
|
|
3443
|
+
args: ['class.checkbox-field--full-width']
|
|
3444
|
+
}] } });
|
|
3446
3445
|
|
|
3447
3446
|
class SwitchFieldComponent extends BooleanFieldDirective {
|
|
3448
3447
|
get labelId() {
|
|
@@ -7319,11 +7318,11 @@ class FormRowComponent {
|
|
|
7319
7318
|
return parts.join(' ');
|
|
7320
7319
|
}
|
|
7321
7320
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7322
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.9", type: FormRowComponent, isStandalone: true, selector: "app-form-row", inputs: { gap: "gap", align: "align", justify: "justify", grow: ["grow", "grow", booleanAttribute], wrap: ["wrap", "wrap", booleanAttribute], stackOnMobile: ["stackOnMobile", "stackOnMobile", booleanAttribute] }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<div class=\"form-row__grid\">\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}.form-row__grid{display:grid;width:100%;min-width:0;box-sizing:border-box;grid-template-columns:repeat(12,minmax(0,1fr));align-items:stretch}.form-row__grid:not(:has(>app-form-col)){grid-template-columns:repeat(auto-fit,minmax(0,1fr))}:host(.form-row--justify-between) .form-row__grid:not(:has(>app-form-col)){display:flex;flex-wrap:wrap
|
|
7321
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.9", type: FormRowComponent, isStandalone: true, selector: "app-form-row", inputs: { gap: "gap", align: "align", justify: "justify", grow: ["grow", "grow", booleanAttribute], wrap: ["wrap", "wrap", booleanAttribute], stackOnMobile: ["stackOnMobile", "stackOnMobile", booleanAttribute] }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<div class=\"form-row__grid\">\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}.form-row__grid{display:grid;width:100%;min-width:0;box-sizing:border-box;grid-template-columns:repeat(12,minmax(0,1fr));align-items:stretch}.form-row__grid:not(:has(>app-form-col)){grid-template-columns:repeat(auto-fit,minmax(0,1fr))}:host(.form-row--justify-center) .form-row__grid:not(:has(>app-form-col)),:host(.form-row--justify-end) .form-row__grid:not(:has(>app-form-col)),:host(.form-row--justify-between) .form-row__grid:not(:has(>app-form-col)){display:flex;flex-wrap:wrap}:host(.form-row--justify-center) .form-row__grid:not(:has(>app-form-col)){justify-content:center}:host(.form-row--justify-end) .form-row__grid:not(:has(>app-form-col)){justify-content:flex-end}:host(.form-row--justify-between) .form-row__grid:not(:has(>app-form-col)){justify-content:space-between}:host(.form-row--justify-center) .form-row__grid:not(:has(>app-form-col))>*,:host(.form-row--justify-end) .form-row__grid:not(:has(>app-form-col))>*,:host(.form-row--justify-between) .form-row__grid:not(:has(>app-form-col))>*{flex:0 1 auto;width:auto;max-width:100%}.form-row__grid:not(:has(>app-form-col))>*{min-width:0}:host(.form-row--gap-xs) .form-row__grid{gap:.5rem}:host(.form-row--gap-sm) .form-row__grid{gap:.75rem}:host(.form-row--gap-md) .form-row__grid{gap:1.25rem}:host(.form-row--gap-lg) .form-row__grid{gap:1.5rem}:host(.form-row--grow) .form-row__grid>:not(app-form-col){min-width:0;grid-column:1/-1}:host(.form-row--align-start) .form-row__grid{align-items:start}:host(.form-row--align-center) .form-row__grid{align-items:center}:host(.form-row--align-end) .form-row__grid{align-items:end}:host(.form-row--align-stretch) .form-row__grid{align-items:stretch}:host(.form-row--justify-start) .form-row__grid{justify-items:stretch;justify-content:start}:host(.form-row--justify-center) .form-row__grid{justify-content:center}:host(.form-row--justify-end) .form-row__grid{justify-content:end}:host(.form-row--justify-between) .form-row__grid{justify-content:space-between}@media(max-width:39.98rem){:host(.form-row--stack-mobile) .form-row__grid{grid-template-columns:1fr}:host(.form-row--stack-mobile) .form-row__grid ::ng-deep>app-form-col{grid-column:1/-1!important}:host(.form-row--stack-mobile.form-row--justify-center) .form-row__grid:not(:has(>app-form-col)),:host(.form-row--stack-mobile.form-row--justify-end) .form-row__grid:not(:has(>app-form-col)),:host(.form-row--stack-mobile.form-row--justify-between) .form-row__grid:not(:has(>app-form-col)){flex-direction:column;align-items:stretch;justify-content:flex-start}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7323
7322
|
}
|
|
7324
7323
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormRowComponent, decorators: [{
|
|
7325
7324
|
type: Component,
|
|
7326
|
-
args: [{ selector: 'app-form-row', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-row__grid\">\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}.form-row__grid{display:grid;width:100%;min-width:0;box-sizing:border-box;grid-template-columns:repeat(12,minmax(0,1fr));align-items:stretch}.form-row__grid:not(:has(>app-form-col)){grid-template-columns:repeat(auto-fit,minmax(0,1fr))}:host(.form-row--justify-between) .form-row__grid:not(:has(>app-form-col)){display:flex;flex-wrap:wrap
|
|
7325
|
+
args: [{ selector: 'app-form-row', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-row__grid\">\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}.form-row__grid{display:grid;width:100%;min-width:0;box-sizing:border-box;grid-template-columns:repeat(12,minmax(0,1fr));align-items:stretch}.form-row__grid:not(:has(>app-form-col)){grid-template-columns:repeat(auto-fit,minmax(0,1fr))}:host(.form-row--justify-center) .form-row__grid:not(:has(>app-form-col)),:host(.form-row--justify-end) .form-row__grid:not(:has(>app-form-col)),:host(.form-row--justify-between) .form-row__grid:not(:has(>app-form-col)){display:flex;flex-wrap:wrap}:host(.form-row--justify-center) .form-row__grid:not(:has(>app-form-col)){justify-content:center}:host(.form-row--justify-end) .form-row__grid:not(:has(>app-form-col)){justify-content:flex-end}:host(.form-row--justify-between) .form-row__grid:not(:has(>app-form-col)){justify-content:space-between}:host(.form-row--justify-center) .form-row__grid:not(:has(>app-form-col))>*,:host(.form-row--justify-end) .form-row__grid:not(:has(>app-form-col))>*,:host(.form-row--justify-between) .form-row__grid:not(:has(>app-form-col))>*{flex:0 1 auto;width:auto;max-width:100%}.form-row__grid:not(:has(>app-form-col))>*{min-width:0}:host(.form-row--gap-xs) .form-row__grid{gap:.5rem}:host(.form-row--gap-sm) .form-row__grid{gap:.75rem}:host(.form-row--gap-md) .form-row__grid{gap:1.25rem}:host(.form-row--gap-lg) .form-row__grid{gap:1.5rem}:host(.form-row--grow) .form-row__grid>:not(app-form-col){min-width:0;grid-column:1/-1}:host(.form-row--align-start) .form-row__grid{align-items:start}:host(.form-row--align-center) .form-row__grid{align-items:center}:host(.form-row--align-end) .form-row__grid{align-items:end}:host(.form-row--align-stretch) .form-row__grid{align-items:stretch}:host(.form-row--justify-start) .form-row__grid{justify-items:stretch;justify-content:start}:host(.form-row--justify-center) .form-row__grid{justify-content:center}:host(.form-row--justify-end) .form-row__grid{justify-content:end}:host(.form-row--justify-between) .form-row__grid{justify-content:space-between}@media(max-width:39.98rem){:host(.form-row--stack-mobile) .form-row__grid{grid-template-columns:1fr}:host(.form-row--stack-mobile) .form-row__grid ::ng-deep>app-form-col{grid-column:1/-1!important}:host(.form-row--stack-mobile.form-row--justify-center) .form-row__grid:not(:has(>app-form-col)),:host(.form-row--stack-mobile.form-row--justify-end) .form-row__grid:not(:has(>app-form-col)),:host(.form-row--stack-mobile.form-row--justify-between) .form-row__grid:not(:has(>app-form-col)){flex-direction:column;align-items:stretch;justify-content:flex-start}}\n"] }]
|
|
7327
7326
|
}], propDecorators: { gap: [{
|
|
7328
7327
|
type: Input
|
|
7329
7328
|
}], align: [{
|
|
@@ -10225,5 +10224,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
10225
10224
|
* Generated bundle index. Do not edit.
|
|
10226
10225
|
*/
|
|
10227
10226
|
|
|
10228
|
-
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, BaseFieldComponent, BaseFieldDirective, BooleanFieldDirective,
|
|
10227
|
+
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, BaseFieldComponent, BaseFieldDirective, BooleanFieldDirective, ButtonComponent, ButtonSize, ButtonType, ButtonVariant, CardListComponent, CepFieldComponent, CheckboxFieldComponent, ConfirmDialogComponent, ConfirmDialogService, ContextMenuComponent, CpfCnpjFieldComponent, DashboardSectionComponent, DataCardComponent, DataGridComponent, DataListComponent, DataToolbarComponent, DateFieldComponent, DecimalFieldComponent, DetailsFieldComponent, DetailsViewComponent, DialogFooterDirective, DividerComponent, DrawerComponent, DrawerSide, DrawerSize, DropdownBaseComponent, DropdownMenuComponent, DropdownMultiOptionFieldBase, DropdownOptionFieldBase, DropdownSearchFieldComponent, EmptyStateComponent, FILE_PREVIEW_UNAVAILABLE_MESSAGE, FileUploadFieldComponent, FormActionsAlign, FormActionsComponent, FormColComponent, FormGroupComponent, FormGroupVariant, FormLayoutGap, FormRowAlign, FormRowComponent, FormRowJustify, FormSectionComponent, FormTabComponent, FormTabsComponent, ImagePreviewPanelComponent, 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, PDF_IFRAME_VIEWER_HASH, 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, appendPdfIframeViewerParams, applyPickedCalendarDate, buildDecimalBrDisplay, buildDecimalBrParseString, buildEmptyStateOverlayHtml, caretIndexFromIntegerDigitCount, caretIndexFromSemantic, cepMaskCompleteValidator, cpfCnpjMaskCompleteValidator, escapeHtml, extractDecimalBrParts, fileIsLikelyImage, fileMatchesAccept, fixedDigitsMaskCompleteValidator, formatAcceptForDisplay, formatDateTimePtBr, formatDecimalBr, formatFileSizeBytes, formatIntegerThousandsBr, formatMaskDigits, formatUiFieldDateValue, getFilePreviewKind, libDialogPanelClasses, mapEstadosToOptions, maskDigitCount, normalizeFormDateValue, parseDecimalBr, parseIntegerString, parseUiFieldDateValue, phoneBrMaskCompleteValidator, resolveControlAtPath, sanitizeDecimalBrInput, sanitizeIntegerDigits, sectionHasVisibleInvalid, semanticCaretAt, semanticIntegerDigitCountLeft, stripToDigits, subscribeMarkForCheckOnInvalidUiRefresh, subtreeHasVisibleInvalid };
|
|
10229
10228
|
//# sourceMappingURL=structra-ui.mjs.map
|