structra-ui 0.2.15 → 0.2.16
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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import '../structra-ui.css';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { signal, booleanAttribute, Input, ChangeDetectionStrategy, Component, ElementRef,
|
|
3
|
+
import { signal, booleanAttribute, Input, HostBinding, ChangeDetectionStrategy, Component, ElementRef, ViewChild, inject, ChangeDetectorRef, Injector, DestroyRef, EventEmitter, Output, Directive, numberAttribute, computed, Injectable, Renderer2, HostListener, ViewChildren, forwardRef, ApplicationRef, afterNextRender, ContentChildren, NgZone, ViewContainerRef, TemplateRef, ContentChild } from '@angular/core';
|
|
4
4
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
5
5
|
import * as i1 from '@angular/forms';
|
|
6
6
|
import { Validators, FormGroupDirective, NgForm, NgControl, NG_VALUE_ACCESSOR, FormsModule, FormGroup, FormArray, FormControl } from '@angular/forms';
|
|
@@ -42,6 +42,10 @@ class AlertComponent {
|
|
|
42
42
|
info: 'alert--info',
|
|
43
43
|
};
|
|
44
44
|
}
|
|
45
|
+
/** Remove o host do fluxo ao fechar (evita faixa em branco com `display: block` vazio). */
|
|
46
|
+
get hostHidden() {
|
|
47
|
+
return !this.visible();
|
|
48
|
+
}
|
|
45
49
|
get hasMessage() {
|
|
46
50
|
return this.message != null && String(this.message).trim().length > 0;
|
|
47
51
|
}
|
|
@@ -52,12 +56,15 @@ class AlertComponent {
|
|
|
52
56
|
this.visible.set(false);
|
|
53
57
|
}
|
|
54
58
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
55
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AlertComponent, isStandalone: true, selector: "app-alert", inputs: { type: "type", message: "message", closable: ["closable", "closable", booleanAttribute] }, ngImport: i0, template: "@if (visible()) {\r\n <div [class]=\"alertHostClass\" role=\"alert\">\r\n <div class=\"alert__content\">\r\n @if (hasMessage) {\r\n <span class=\"alert__text\">{{ message }}</span>\r\n } @else {\r\n <span class=\"alert__text\"><ng-content /></span>\r\n }\r\n </div>\r\n\r\n @if (closable) {\r\n <button type=\"button\" class=\"alert__close\" aria-label=\"Fechar alerta\" (click)=\"onClose()\">\r\n <span aria-hidden=\"true\">×</span>\r\n </button>\r\n }\r\n </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;max-width:100%;box-sizing:border-box}.alert{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;padding:.75rem 1rem;border-radius:var(--radius-md, 12px);border:1px solid;font-size:.875rem;line-height:1.4;font-family:var(--structra-font-family);font-weight:var(--structra-body-weight, 400)}.alert__content{flex:1 1 auto;min-width:0}.alert__text{display:block;word-wrap:break-word}.alert__close{flex-shrink:0;margin:0;padding:0 .125rem;background:transparent;border:none;cursor:pointer;font-size:1rem;line-height:1;color:inherit;opacity:.65;transition:opacity .12s ease}.alert__close:hover{opacity:1}.alert__close:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:4px}.alert--error{background:var(--ui-validation-summary-bg-error, #fef2f2);border-color:var(--ui-validation-summary-border-error, #fecaca);color:var(--ui-validation-summary-title-error, #991b1b)}.alert--success{color:var(--app-color-success, #166534);background:color-mix(in srgb,var(--app-color-success, #15803d) 10%,var(--app-color-surface, #ffffff));border-color:color-mix(in srgb,var(--app-color-success, #15803d) 28%,#ffffff)}.alert--warning{background:var(--ui-validation-summary-bg-warning, #fffbeb);border-color:var(--ui-validation-summary-border-warning, #fef3c7);color:var(--ui-validation-summary-title-warning, #92400e)}.alert--info{background:var(--ui-validation-summary-bg-info, #eff6ff);border-color:var(--ui-validation-summary-border-info, #bfdbfe);color:var(--ui-validation-summary-title-info, #1e3a8a)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
59
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AlertComponent, isStandalone: true, selector: "app-alert", inputs: { type: "type", message: "message", closable: ["closable", "closable", booleanAttribute] }, host: { properties: { "hidden": "this.hostHidden" } }, ngImport: i0, template: "@if (visible()) {\r\n <div [class]=\"alertHostClass\" role=\"alert\">\r\n <div class=\"alert__content\">\r\n @if (hasMessage) {\r\n <span class=\"alert__text\">{{ message }}</span>\r\n } @else {\r\n <span class=\"alert__text\"><ng-content /></span>\r\n }\r\n </div>\r\n\r\n @if (closable) {\r\n <button type=\"button\" class=\"alert__close\" aria-label=\"Fechar alerta\" (click)=\"onClose()\">\r\n <span aria-hidden=\"true\">×</span>\r\n </button>\r\n }\r\n </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;max-width:100%;box-sizing:border-box}:host([hidden]){display:none!important}.alert{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;padding:.75rem 1rem;border-radius:var(--radius-md, 12px);border:1px solid;font-size:.875rem;line-height:1.4;font-family:var(--structra-font-family);font-weight:var(--structra-body-weight, 400)}.alert__content{flex:1 1 auto;min-width:0}.alert__text{display:block;word-wrap:break-word}.alert__close{flex-shrink:0;margin:0;padding:0 .125rem;background:transparent;border:none;cursor:pointer;font-size:1rem;line-height:1;color:inherit;opacity:.65;transition:opacity .12s ease}.alert__close:hover{opacity:1}.alert__close:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:4px}.alert--error{background:var(--ui-validation-summary-bg-error, #fef2f2);border-color:var(--ui-validation-summary-border-error, #fecaca);color:var(--ui-validation-summary-title-error, #991b1b)}.alert--success{color:var(--app-color-success, #166534);background:color-mix(in srgb,var(--app-color-success, #15803d) 10%,var(--app-color-surface, #ffffff));border-color:color-mix(in srgb,var(--app-color-success, #15803d) 28%,#ffffff)}.alert--warning{background:var(--ui-validation-summary-bg-warning, #fffbeb);border-color:var(--ui-validation-summary-border-warning, #fef3c7);color:var(--ui-validation-summary-title-warning, #92400e)}.alert--info{background:var(--ui-validation-summary-bg-info, #eff6ff);border-color:var(--ui-validation-summary-border-info, #bfdbfe);color:var(--ui-validation-summary-title-info, #1e3a8a)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
56
60
|
}
|
|
57
61
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AlertComponent, decorators: [{
|
|
58
62
|
type: Component,
|
|
59
|
-
args: [{ selector: 'app-alert', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible()) {\r\n <div [class]=\"alertHostClass\" role=\"alert\">\r\n <div class=\"alert__content\">\r\n @if (hasMessage) {\r\n <span class=\"alert__text\">{{ message }}</span>\r\n } @else {\r\n <span class=\"alert__text\"><ng-content /></span>\r\n }\r\n </div>\r\n\r\n @if (closable) {\r\n <button type=\"button\" class=\"alert__close\" aria-label=\"Fechar alerta\" (click)=\"onClose()\">\r\n <span aria-hidden=\"true\">×</span>\r\n </button>\r\n }\r\n </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;max-width:100%;box-sizing:border-box}.alert{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;padding:.75rem 1rem;border-radius:var(--radius-md, 12px);border:1px solid;font-size:.875rem;line-height:1.4;font-family:var(--structra-font-family);font-weight:var(--structra-body-weight, 400)}.alert__content{flex:1 1 auto;min-width:0}.alert__text{display:block;word-wrap:break-word}.alert__close{flex-shrink:0;margin:0;padding:0 .125rem;background:transparent;border:none;cursor:pointer;font-size:1rem;line-height:1;color:inherit;opacity:.65;transition:opacity .12s ease}.alert__close:hover{opacity:1}.alert__close:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:4px}.alert--error{background:var(--ui-validation-summary-bg-error, #fef2f2);border-color:var(--ui-validation-summary-border-error, #fecaca);color:var(--ui-validation-summary-title-error, #991b1b)}.alert--success{color:var(--app-color-success, #166534);background:color-mix(in srgb,var(--app-color-success, #15803d) 10%,var(--app-color-surface, #ffffff));border-color:color-mix(in srgb,var(--app-color-success, #15803d) 28%,#ffffff)}.alert--warning{background:var(--ui-validation-summary-bg-warning, #fffbeb);border-color:var(--ui-validation-summary-border-warning, #fef3c7);color:var(--ui-validation-summary-title-warning, #92400e)}.alert--info{background:var(--ui-validation-summary-bg-info, #eff6ff);border-color:var(--ui-validation-summary-border-info, #bfdbfe);color:var(--ui-validation-summary-title-info, #1e3a8a)}\n"] }]
|
|
60
|
-
}], propDecorators: {
|
|
63
|
+
args: [{ selector: 'app-alert', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible()) {\r\n <div [class]=\"alertHostClass\" role=\"alert\">\r\n <div class=\"alert__content\">\r\n @if (hasMessage) {\r\n <span class=\"alert__text\">{{ message }}</span>\r\n } @else {\r\n <span class=\"alert__text\"><ng-content /></span>\r\n }\r\n </div>\r\n\r\n @if (closable) {\r\n <button type=\"button\" class=\"alert__close\" aria-label=\"Fechar alerta\" (click)=\"onClose()\">\r\n <span aria-hidden=\"true\">×</span>\r\n </button>\r\n }\r\n </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;max-width:100%;box-sizing:border-box}:host([hidden]){display:none!important}.alert{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;padding:.75rem 1rem;border-radius:var(--radius-md, 12px);border:1px solid;font-size:.875rem;line-height:1.4;font-family:var(--structra-font-family);font-weight:var(--structra-body-weight, 400)}.alert__content{flex:1 1 auto;min-width:0}.alert__text{display:block;word-wrap:break-word}.alert__close{flex-shrink:0;margin:0;padding:0 .125rem;background:transparent;border:none;cursor:pointer;font-size:1rem;line-height:1;color:inherit;opacity:.65;transition:opacity .12s ease}.alert__close:hover{opacity:1}.alert__close:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:4px}.alert--error{background:var(--ui-validation-summary-bg-error, #fef2f2);border-color:var(--ui-validation-summary-border-error, #fecaca);color:var(--ui-validation-summary-title-error, #991b1b)}.alert--success{color:var(--app-color-success, #166534);background:color-mix(in srgb,var(--app-color-success, #15803d) 10%,var(--app-color-surface, #ffffff));border-color:color-mix(in srgb,var(--app-color-success, #15803d) 28%,#ffffff)}.alert--warning{background:var(--ui-validation-summary-bg-warning, #fffbeb);border-color:var(--ui-validation-summary-border-warning, #fef3c7);color:var(--ui-validation-summary-title-warning, #92400e)}.alert--info{background:var(--ui-validation-summary-bg-info, #eff6ff);border-color:var(--ui-validation-summary-border-info, #bfdbfe);color:var(--ui-validation-summary-title-info, #1e3a8a)}\n"] }]
|
|
64
|
+
}], propDecorators: { hostHidden: [{
|
|
65
|
+
type: HostBinding,
|
|
66
|
+
args: ['hidden']
|
|
67
|
+
}], type: [{
|
|
61
68
|
type: Input
|
|
62
69
|
}], message: [{
|
|
63
70
|
type: Input
|