@ngx-smz/ui-kit 21.9.0-next.19 → 21.9.0-next.21
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.
|
@@ -1964,7 +1964,13 @@ class SmzDialogComponent {
|
|
|
1964
1964
|
effect(() => {
|
|
1965
1965
|
const maximized = this.maximized();
|
|
1966
1966
|
const pane = this.sizing().pane;
|
|
1967
|
-
|
|
1967
|
+
// `updateSize` do CDK so MESCLA as chaves recebidas: ao restaurar, height/max-height/min-* do maximizado
|
|
1968
|
+
// (100vh, 0) sobrevivem se nao forem repostos explicitamente (vazio = remove o estilo inline).
|
|
1969
|
+
this.overlayRef?.updateSize(maximized
|
|
1970
|
+
? { width: '100vw', height: '100vh', maxWidth: '100vw', maxHeight: '100vh', minWidth: '0', minHeight: '0' }
|
|
1971
|
+
: { width: pane.width ?? '', height: pane.height ?? '', minWidth: pane.minWidth ?? '', minHeight: pane.minHeight ?? '', maxWidth: pane.maxWidth ?? '95vw', maxHeight: pane.maxHeight ?? '' });
|
|
1972
|
+
// A estrategia global alinha por tamanho (flush a 100vh/100vw); reaplica para voltar ao alinhamento do `position`.
|
|
1973
|
+
this.overlayRef?.updatePosition();
|
|
1968
1974
|
});
|
|
1969
1975
|
effect(() => {
|
|
1970
1976
|
const position = this.position();
|
|
@@ -2057,58 +2063,58 @@ class SmzDialogComponent {
|
|
|
2057
2063
|
this.overlayRef?.overlayElement.querySelector('[role="dialog"]')?.setAttribute('data-testid', testId);
|
|
2058
2064
|
}
|
|
2059
2065
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2060
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzDialogComponent, isStandalone: true, selector: "ui-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, dismissableMask: { classPropertyName: "dismissableMask", publicName: "dismissableMask", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, maximizable: { classPropertyName: "maximizable", publicName: "maximizable", isSignal: true, isRequired: false, transformFunction: null }, maximized: { classPropertyName: "maximized", publicName: "maximized", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", maximized: "maximizedChange", shown: "shown", hidden: "hidden" }, queries: [{ propertyName: "templates", predicate: SmzTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
2061
|
-
<ng-template #panel>
|
|
2062
|
-
<div
|
|
2063
|
-
role="dialog"
|
|
2064
|
-
aria-modal="true"
|
|
2065
|
-
[attr.aria-label]="header() || null"
|
|
2066
|
-
class="pointer-events-auto flex flex-col border border-ui-line bg-ui-surface-2 font-ui text-ui-fg shadow-overlay"
|
|
2067
|
-
[class]="(maximized() ? 'h-screen w-screen max-h-none max-w-none rounded-none ' : 'max-h-[90vh] max-w-[95vw] rounded-overlay ') + (resizable() && !maximized() ? 'resize overflow-auto ' : '') + (styleClass() ?? '')"
|
|
2068
|
-
[ngStyle]="maximized() ? null : sizing().rest"
|
|
2069
|
-
[style.width]="!maximized() && sizing().pane.width ? '100%' : null"
|
|
2070
|
-
[style.height]="!maximized() && sizing().pane.height ? '100%' : null"
|
|
2071
|
-
[style.transform]="maximized() || (dx() === 0 && dy() === 0) ? null : 'translate(' + dx() + 'px, ' + dy() + 'px)'"
|
|
2072
|
-
>
|
|
2073
|
-
@if (headerTemplate(); as headerTpl) {
|
|
2074
|
-
<div class="border-b border-ui-line px-4 py-3" [class.cursor-move]="draggable() && !maximized()" (pointerdown)="startDrag($event)">
|
|
2075
|
-
<ng-container [ngTemplateOutlet]="headerTpl" />
|
|
2076
|
-
</div>
|
|
2077
|
-
}
|
|
2078
|
-
@else if (header() || closable()) {
|
|
2079
|
-
<div class="flex items-center justify-between gap-4 border-b border-ui-line px-4 py-3" [class.cursor-move]="draggable() && !maximized()" (pointerdown)="startDrag($event)">
|
|
2080
|
-
<span class="text-ui-lg font-medium">{{ header() }}</span>
|
|
2081
|
-
<div class="flex items-center gap-1">
|
|
2082
|
-
@if (maximizable()) {
|
|
2083
|
-
<button type="button" class="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-ui-fg-muted transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus" [attr.aria-label]="maximized() ? 'Restaurar' : 'Maximizar'" (click)="maximize()">
|
|
2084
|
-
<svg viewBox="0 0 16 16" class="h-4 w-4" fill="none" aria-hidden="true">
|
|
2085
|
-
@if (maximized()) { <path d="M5 3h8v8M3 5h8v8H3z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" /> } @else { <rect x="3" y="3" width="10" height="10" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" /> }
|
|
2086
|
-
</svg>
|
|
2087
|
-
</button>
|
|
2088
|
-
}
|
|
2089
|
-
@if (closable()) {
|
|
2090
|
-
<button
|
|
2091
|
-
type="button"
|
|
2092
|
-
class="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-ui-fg-muted transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus"
|
|
2093
|
-
aria-label="Fechar"
|
|
2094
|
-
(click)="close()"
|
|
2095
|
-
>
|
|
2096
|
-
<svg viewBox="0 0 16 16" class="h-4 w-4" fill="none" aria-hidden="true">
|
|
2097
|
-
<path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" />
|
|
2098
|
-
</svg>
|
|
2099
|
-
</button>
|
|
2100
|
-
}
|
|
2101
|
-
</div>
|
|
2102
|
-
</div>
|
|
2103
|
-
}
|
|
2104
|
-
<div class="min-h-0 flex-1 overflow-auto p-4"><ng-content /></div>
|
|
2105
|
-
@if (footerTemplate(); as footerTpl) {
|
|
2106
|
-
<div class="flex justify-end gap-2 border-t border-ui-line px-4 py-3">
|
|
2107
|
-
<ng-container [ngTemplateOutlet]="footerTpl" />
|
|
2108
|
-
</div>
|
|
2109
|
-
}
|
|
2110
|
-
</div>
|
|
2111
|
-
</ng-template>
|
|
2066
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzDialogComponent, isStandalone: true, selector: "ui-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, dismissableMask: { classPropertyName: "dismissableMask", publicName: "dismissableMask", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, maximizable: { classPropertyName: "maximizable", publicName: "maximizable", isSignal: true, isRequired: false, transformFunction: null }, maximized: { classPropertyName: "maximized", publicName: "maximized", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", maximized: "maximizedChange", shown: "shown", hidden: "hidden" }, queries: [{ propertyName: "templates", predicate: SmzTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
2067
|
+
<ng-template #panel>
|
|
2068
|
+
<div
|
|
2069
|
+
role="dialog"
|
|
2070
|
+
aria-modal="true"
|
|
2071
|
+
[attr.aria-label]="header() || null"
|
|
2072
|
+
class="pointer-events-auto flex flex-col border border-ui-line bg-ui-surface-2 font-ui text-ui-fg shadow-overlay"
|
|
2073
|
+
[class]="(maximized() ? 'h-screen w-screen max-h-none max-w-none rounded-none ' : 'max-h-[90vh] max-w-[95vw] rounded-overlay ') + (resizable() && !maximized() ? 'resize overflow-auto ' : '') + (styleClass() ?? '')"
|
|
2074
|
+
[ngStyle]="maximized() ? null : sizing().rest"
|
|
2075
|
+
[style.width]="!maximized() && sizing().pane.width ? '100%' : null"
|
|
2076
|
+
[style.height]="!maximized() && sizing().pane.height ? '100%' : null"
|
|
2077
|
+
[style.transform]="maximized() || (dx() === 0 && dy() === 0) ? null : 'translate(' + dx() + 'px, ' + dy() + 'px)'"
|
|
2078
|
+
>
|
|
2079
|
+
@if (headerTemplate(); as headerTpl) {
|
|
2080
|
+
<div class="border-b border-ui-line px-4 py-3" [class.cursor-move]="draggable() && !maximized()" (pointerdown)="startDrag($event)">
|
|
2081
|
+
<ng-container [ngTemplateOutlet]="headerTpl" />
|
|
2082
|
+
</div>
|
|
2083
|
+
}
|
|
2084
|
+
@else if (header() || closable()) {
|
|
2085
|
+
<div class="flex items-center justify-between gap-4 border-b border-ui-line px-4 py-3" [class.cursor-move]="draggable() && !maximized()" (pointerdown)="startDrag($event)">
|
|
2086
|
+
<span class="text-ui-lg font-medium">{{ header() }}</span>
|
|
2087
|
+
<div class="flex items-center gap-1">
|
|
2088
|
+
@if (maximizable()) {
|
|
2089
|
+
<button type="button" class="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-ui-fg-muted transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus" [attr.aria-label]="maximized() ? 'Restaurar' : 'Maximizar'" (click)="maximize()">
|
|
2090
|
+
<svg viewBox="0 0 16 16" class="h-4 w-4" fill="none" aria-hidden="true">
|
|
2091
|
+
@if (maximized()) { <path d="M5 3h8v8M3 5h8v8H3z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" /> } @else { <rect x="3" y="3" width="10" height="10" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" /> }
|
|
2092
|
+
</svg>
|
|
2093
|
+
</button>
|
|
2094
|
+
}
|
|
2095
|
+
@if (closable()) {
|
|
2096
|
+
<button
|
|
2097
|
+
type="button"
|
|
2098
|
+
class="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-ui-fg-muted transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus"
|
|
2099
|
+
aria-label="Fechar"
|
|
2100
|
+
(click)="close()"
|
|
2101
|
+
>
|
|
2102
|
+
<svg viewBox="0 0 16 16" class="h-4 w-4" fill="none" aria-hidden="true">
|
|
2103
|
+
<path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" />
|
|
2104
|
+
</svg>
|
|
2105
|
+
</button>
|
|
2106
|
+
}
|
|
2107
|
+
</div>
|
|
2108
|
+
</div>
|
|
2109
|
+
}
|
|
2110
|
+
<div class="min-h-0 flex-1 overflow-auto p-4"><ng-content /></div>
|
|
2111
|
+
@if (footerTemplate(); as footerTpl) {
|
|
2112
|
+
<div class="flex justify-end gap-2 border-t border-ui-line px-4 py-3">
|
|
2113
|
+
<ng-container [ngTemplateOutlet]="footerTpl" />
|
|
2114
|
+
</div>
|
|
2115
|
+
}
|
|
2116
|
+
</div>
|
|
2117
|
+
</ng-template>
|
|
2112
2118
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2113
2119
|
}
|
|
2114
2120
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzDialogComponent, decorators: [{
|
|
@@ -2117,58 +2123,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
|
|
|
2117
2123
|
selector: 'ui-dialog',
|
|
2118
2124
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2119
2125
|
imports: [NgStyle, NgTemplateOutlet],
|
|
2120
|
-
template: `
|
|
2121
|
-
<ng-template #panel>
|
|
2122
|
-
<div
|
|
2123
|
-
role="dialog"
|
|
2124
|
-
aria-modal="true"
|
|
2125
|
-
[attr.aria-label]="header() || null"
|
|
2126
|
-
class="pointer-events-auto flex flex-col border border-ui-line bg-ui-surface-2 font-ui text-ui-fg shadow-overlay"
|
|
2127
|
-
[class]="(maximized() ? 'h-screen w-screen max-h-none max-w-none rounded-none ' : 'max-h-[90vh] max-w-[95vw] rounded-overlay ') + (resizable() && !maximized() ? 'resize overflow-auto ' : '') + (styleClass() ?? '')"
|
|
2128
|
-
[ngStyle]="maximized() ? null : sizing().rest"
|
|
2129
|
-
[style.width]="!maximized() && sizing().pane.width ? '100%' : null"
|
|
2130
|
-
[style.height]="!maximized() && sizing().pane.height ? '100%' : null"
|
|
2131
|
-
[style.transform]="maximized() || (dx() === 0 && dy() === 0) ? null : 'translate(' + dx() + 'px, ' + dy() + 'px)'"
|
|
2132
|
-
>
|
|
2133
|
-
@if (headerTemplate(); as headerTpl) {
|
|
2134
|
-
<div class="border-b border-ui-line px-4 py-3" [class.cursor-move]="draggable() && !maximized()" (pointerdown)="startDrag($event)">
|
|
2135
|
-
<ng-container [ngTemplateOutlet]="headerTpl" />
|
|
2136
|
-
</div>
|
|
2137
|
-
}
|
|
2138
|
-
@else if (header() || closable()) {
|
|
2139
|
-
<div class="flex items-center justify-between gap-4 border-b border-ui-line px-4 py-3" [class.cursor-move]="draggable() && !maximized()" (pointerdown)="startDrag($event)">
|
|
2140
|
-
<span class="text-ui-lg font-medium">{{ header() }}</span>
|
|
2141
|
-
<div class="flex items-center gap-1">
|
|
2142
|
-
@if (maximizable()) {
|
|
2143
|
-
<button type="button" class="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-ui-fg-muted transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus" [attr.aria-label]="maximized() ? 'Restaurar' : 'Maximizar'" (click)="maximize()">
|
|
2144
|
-
<svg viewBox="0 0 16 16" class="h-4 w-4" fill="none" aria-hidden="true">
|
|
2145
|
-
@if (maximized()) { <path d="M5 3h8v8M3 5h8v8H3z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" /> } @else { <rect x="3" y="3" width="10" height="10" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" /> }
|
|
2146
|
-
</svg>
|
|
2147
|
-
</button>
|
|
2148
|
-
}
|
|
2149
|
-
@if (closable()) {
|
|
2150
|
-
<button
|
|
2151
|
-
type="button"
|
|
2152
|
-
class="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-ui-fg-muted transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus"
|
|
2153
|
-
aria-label="Fechar"
|
|
2154
|
-
(click)="close()"
|
|
2155
|
-
>
|
|
2156
|
-
<svg viewBox="0 0 16 16" class="h-4 w-4" fill="none" aria-hidden="true">
|
|
2157
|
-
<path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" />
|
|
2158
|
-
</svg>
|
|
2159
|
-
</button>
|
|
2160
|
-
}
|
|
2161
|
-
</div>
|
|
2162
|
-
</div>
|
|
2163
|
-
}
|
|
2164
|
-
<div class="min-h-0 flex-1 overflow-auto p-4"><ng-content /></div>
|
|
2165
|
-
@if (footerTemplate(); as footerTpl) {
|
|
2166
|
-
<div class="flex justify-end gap-2 border-t border-ui-line px-4 py-3">
|
|
2167
|
-
<ng-container [ngTemplateOutlet]="footerTpl" />
|
|
2168
|
-
</div>
|
|
2169
|
-
}
|
|
2170
|
-
</div>
|
|
2171
|
-
</ng-template>
|
|
2126
|
+
template: `
|
|
2127
|
+
<ng-template #panel>
|
|
2128
|
+
<div
|
|
2129
|
+
role="dialog"
|
|
2130
|
+
aria-modal="true"
|
|
2131
|
+
[attr.aria-label]="header() || null"
|
|
2132
|
+
class="pointer-events-auto flex flex-col border border-ui-line bg-ui-surface-2 font-ui text-ui-fg shadow-overlay"
|
|
2133
|
+
[class]="(maximized() ? 'h-screen w-screen max-h-none max-w-none rounded-none ' : 'max-h-[90vh] max-w-[95vw] rounded-overlay ') + (resizable() && !maximized() ? 'resize overflow-auto ' : '') + (styleClass() ?? '')"
|
|
2134
|
+
[ngStyle]="maximized() ? null : sizing().rest"
|
|
2135
|
+
[style.width]="!maximized() && sizing().pane.width ? '100%' : null"
|
|
2136
|
+
[style.height]="!maximized() && sizing().pane.height ? '100%' : null"
|
|
2137
|
+
[style.transform]="maximized() || (dx() === 0 && dy() === 0) ? null : 'translate(' + dx() + 'px, ' + dy() + 'px)'"
|
|
2138
|
+
>
|
|
2139
|
+
@if (headerTemplate(); as headerTpl) {
|
|
2140
|
+
<div class="border-b border-ui-line px-4 py-3" [class.cursor-move]="draggable() && !maximized()" (pointerdown)="startDrag($event)">
|
|
2141
|
+
<ng-container [ngTemplateOutlet]="headerTpl" />
|
|
2142
|
+
</div>
|
|
2143
|
+
}
|
|
2144
|
+
@else if (header() || closable()) {
|
|
2145
|
+
<div class="flex items-center justify-between gap-4 border-b border-ui-line px-4 py-3" [class.cursor-move]="draggable() && !maximized()" (pointerdown)="startDrag($event)">
|
|
2146
|
+
<span class="text-ui-lg font-medium">{{ header() }}</span>
|
|
2147
|
+
<div class="flex items-center gap-1">
|
|
2148
|
+
@if (maximizable()) {
|
|
2149
|
+
<button type="button" class="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-ui-fg-muted transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus" [attr.aria-label]="maximized() ? 'Restaurar' : 'Maximizar'" (click)="maximize()">
|
|
2150
|
+
<svg viewBox="0 0 16 16" class="h-4 w-4" fill="none" aria-hidden="true">
|
|
2151
|
+
@if (maximized()) { <path d="M5 3h8v8M3 5h8v8H3z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" /> } @else { <rect x="3" y="3" width="10" height="10" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" /> }
|
|
2152
|
+
</svg>
|
|
2153
|
+
</button>
|
|
2154
|
+
}
|
|
2155
|
+
@if (closable()) {
|
|
2156
|
+
<button
|
|
2157
|
+
type="button"
|
|
2158
|
+
class="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-ui-fg-muted transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus"
|
|
2159
|
+
aria-label="Fechar"
|
|
2160
|
+
(click)="close()"
|
|
2161
|
+
>
|
|
2162
|
+
<svg viewBox="0 0 16 16" class="h-4 w-4" fill="none" aria-hidden="true">
|
|
2163
|
+
<path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" />
|
|
2164
|
+
</svg>
|
|
2165
|
+
</button>
|
|
2166
|
+
}
|
|
2167
|
+
</div>
|
|
2168
|
+
</div>
|
|
2169
|
+
}
|
|
2170
|
+
<div class="min-h-0 flex-1 overflow-auto p-4"><ng-content /></div>
|
|
2171
|
+
@if (footerTemplate(); as footerTpl) {
|
|
2172
|
+
<div class="flex justify-end gap-2 border-t border-ui-line px-4 py-3">
|
|
2173
|
+
<ng-container [ngTemplateOutlet]="footerTpl" />
|
|
2174
|
+
</div>
|
|
2175
|
+
}
|
|
2176
|
+
</div>
|
|
2177
|
+
</ng-template>
|
|
2172
2178
|
`,
|
|
2173
2179
|
}]
|
|
2174
2180
|
}], ctorParameters: () => [], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], dismissableMask: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissableMask", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], baseZIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseZIndex", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], maximizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximizable", required: false }] }], maximized: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximized", required: false }] }, { type: i0.Output, args: ["maximizedChange"] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], shown: [{ type: i0.Output, args: ["shown"] }], hidden: [{ type: i0.Output, args: ["hidden"] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SmzTemplateDirective), { isSignal: true }] }] } });
|
|
@@ -6119,22 +6125,22 @@ class SmzInputMaskComponent extends SmzValueAccessor {
|
|
|
6119
6125
|
this.field().nativeElement.setSelectionRange(position, position);
|
|
6120
6126
|
}
|
|
6121
6127
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzInputMaskComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
6122
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.1", type: SmzInputMaskComponent, isStandalone: true, selector: "ui-input-mask", inputs: { mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, slotChar: { classPropertyName: "slotChar", publicName: "slotChar", isSignal: true, isRequired: false, transformFunction: null }, characterPattern: { classPropertyName: "characterPattern", publicName: "characterPattern", isSignal: true, isRequired: false, transformFunction: null }, unmask: { classPropertyName: "unmask", publicName: "unmask", isSignal: true, isRequired: false, transformFunction: null }, autoClear: { classPropertyName: "autoClear", publicName: "autoClear", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputed: "inputed", blurred: "blurred", completed: "completed" }, host: { classAttribute: "flex min-w-0" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SmzInputMaskComponent), multi: true }], viewQueries: [{ propertyName: "field", first: true, predicate: ["field"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
|
|
6123
|
-
<input
|
|
6124
|
-
#field
|
|
6125
|
-
[attr.type]="type()"
|
|
6126
|
-
class="h-control w-full min-w-0 rounded-control border border-ui-line-strong bg-ui-surface-1 px-input-x font-ui text-ui-md text-ui-fg transition-colors duration-ui placeholder:text-ui-fg-subtle focus:outline-none focus:border-ui-focus focus:ring-1 focus:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50 [&.ng-invalid.ng-dirty]:border-ui-danger"
|
|
6127
|
-
[attr.id]="inputId() || null"
|
|
6128
|
-
[attr.name]="name() || null"
|
|
6129
|
-
[attr.placeholder]="placeholder() || null"
|
|
6130
|
-
[disabled]="isDisabled()"
|
|
6131
|
-
[readOnly]="readonly()"
|
|
6132
|
-
[value]="display()"
|
|
6133
|
-
(focus)="onFocus()"
|
|
6134
|
-
(input)="onInput($event)"
|
|
6135
|
-
(keydown)="onKeydown($event)"
|
|
6136
|
-
(blur)="onBlur($event)"
|
|
6137
|
-
/>
|
|
6128
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.1", type: SmzInputMaskComponent, isStandalone: true, selector: "ui-input-mask", inputs: { mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, slotChar: { classPropertyName: "slotChar", publicName: "slotChar", isSignal: true, isRequired: false, transformFunction: null }, characterPattern: { classPropertyName: "characterPattern", publicName: "characterPattern", isSignal: true, isRequired: false, transformFunction: null }, unmask: { classPropertyName: "unmask", publicName: "unmask", isSignal: true, isRequired: false, transformFunction: null }, autoClear: { classPropertyName: "autoClear", publicName: "autoClear", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputed: "inputed", blurred: "blurred", completed: "completed" }, host: { classAttribute: "flex min-w-0" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SmzInputMaskComponent), multi: true }], viewQueries: [{ propertyName: "field", first: true, predicate: ["field"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
|
|
6129
|
+
<input
|
|
6130
|
+
#field
|
|
6131
|
+
[attr.type]="type()"
|
|
6132
|
+
class="h-control w-full min-w-0 rounded-control border border-ui-line-strong bg-ui-surface-1 px-input-x font-ui text-ui-md text-ui-fg transition-colors duration-ui placeholder:text-ui-fg-subtle focus:outline-none focus:border-ui-focus focus:ring-1 focus:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50 [&.ng-invalid.ng-dirty]:border-ui-danger"
|
|
6133
|
+
[attr.id]="inputId() || null"
|
|
6134
|
+
[attr.name]="name() || null"
|
|
6135
|
+
[attr.placeholder]="placeholder() || null"
|
|
6136
|
+
[disabled]="isDisabled()"
|
|
6137
|
+
[readOnly]="readonly()"
|
|
6138
|
+
[value]="display()"
|
|
6139
|
+
(focus)="onFocus()"
|
|
6140
|
+
(input)="onInput($event)"
|
|
6141
|
+
(keydown)="onKeydown($event)"
|
|
6142
|
+
(blur)="onBlur($event)"
|
|
6143
|
+
/>
|
|
6138
6144
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6139
6145
|
}
|
|
6140
6146
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzInputMaskComponent, decorators: [{
|
|
@@ -6144,22 +6150,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
|
|
|
6144
6150
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
6145
6151
|
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SmzInputMaskComponent), multi: true }],
|
|
6146
6152
|
host: { class: 'flex min-w-0' },
|
|
6147
|
-
template: `
|
|
6148
|
-
<input
|
|
6149
|
-
#field
|
|
6150
|
-
[attr.type]="type()"
|
|
6151
|
-
class="h-control w-full min-w-0 rounded-control border border-ui-line-strong bg-ui-surface-1 px-input-x font-ui text-ui-md text-ui-fg transition-colors duration-ui placeholder:text-ui-fg-subtle focus:outline-none focus:border-ui-focus focus:ring-1 focus:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50 [&.ng-invalid.ng-dirty]:border-ui-danger"
|
|
6152
|
-
[attr.id]="inputId() || null"
|
|
6153
|
-
[attr.name]="name() || null"
|
|
6154
|
-
[attr.placeholder]="placeholder() || null"
|
|
6155
|
-
[disabled]="isDisabled()"
|
|
6156
|
-
[readOnly]="readonly()"
|
|
6157
|
-
[value]="display()"
|
|
6158
|
-
(focus)="onFocus()"
|
|
6159
|
-
(input)="onInput($event)"
|
|
6160
|
-
(keydown)="onKeydown($event)"
|
|
6161
|
-
(blur)="onBlur($event)"
|
|
6162
|
-
/>
|
|
6153
|
+
template: `
|
|
6154
|
+
<input
|
|
6155
|
+
#field
|
|
6156
|
+
[attr.type]="type()"
|
|
6157
|
+
class="h-control w-full min-w-0 rounded-control border border-ui-line-strong bg-ui-surface-1 px-input-x font-ui text-ui-md text-ui-fg transition-colors duration-ui placeholder:text-ui-fg-subtle focus:outline-none focus:border-ui-focus focus:ring-1 focus:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50 [&.ng-invalid.ng-dirty]:border-ui-danger"
|
|
6158
|
+
[attr.id]="inputId() || null"
|
|
6159
|
+
[attr.name]="name() || null"
|
|
6160
|
+
[attr.placeholder]="placeholder() || null"
|
|
6161
|
+
[disabled]="isDisabled()"
|
|
6162
|
+
[readOnly]="readonly()"
|
|
6163
|
+
[value]="display()"
|
|
6164
|
+
(focus)="onFocus()"
|
|
6165
|
+
(input)="onInput($event)"
|
|
6166
|
+
(keydown)="onKeydown($event)"
|
|
6167
|
+
(blur)="onBlur($event)"
|
|
6168
|
+
/>
|
|
6163
6169
|
`,
|
|
6164
6170
|
}]
|
|
6165
6171
|
}], propDecorators: { mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], slotChar: [{ type: i0.Input, args: [{ isSignal: true, alias: "slotChar", required: false }] }], characterPattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "characterPattern", required: false }] }], unmask: [{ type: i0.Input, args: [{ isSignal: true, alias: "unmask", required: false }] }], autoClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoClear", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], inputed: [{ type: i0.Output, args: ["inputed"] }], blurred: [{ type: i0.Output, args: ["blurred"] }], completed: [{ type: i0.Output, args: ["completed"] }], field: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }] } });
|