@ngx-smz/ui-kit 21.9.0-next.5 → 21.9.0-next.6

package/fesm2022/ngx-smz-ui-kit.mjs

@@ -295,6 +295,9 @@ const buttonClasses = smzVariants({
     },
     defaults: { size: 'md', variant: 'solid', severity: 'primary', rounded: 'false', loading: 'false', iconOnly: 'false' },
     compound: [
+        { when: { iconOnly: 'true', size: 'sm' }, class: 'w-[var(--smz-control-h-sm)]' },
+        { when: { iconOnly: 'true', size: 'md' }, class: 'w-[var(--smz-control-h)]' },
+        { when: { iconOnly: 'true', size: 'lg' }, class: 'w-[var(--smz-control-h-lg)]' },
         { when: { variant: 'solid', severity: 'primary' }, class: 'bg-ui-primary text-ui-on-primary hover:bg-ui-primary-hover active:bg-ui-primary-active' },
         { when: { variant: 'solid', severity: 'secondary' }, class: 'bg-ui-surface-3 text-ui-fg hover:bg-ui-line active:bg-ui-line-strong' },
         { when: { variant: 'solid', severity: 'danger' }, class: 'bg-ui-danger text-ui-on-danger hover:bg-ui-danger-hover active:bg-ui-danger-active' },
@@ -3066,12 +3069,28 @@ class SmzAnchoredPanel {
 }
 
 /* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return, @typescript-eslint/explicit-module-boundary-types */
+/**
+ * Texto da opcao. Sem `optionLabel`, opcoes-objeto com `label` usam esse campo (como o `p-select` do PrimeNG);
+ * primitivos sao usados como estao.
+ */
 function optionLabel(option, config) {
-    const value = config.optionLabel ? SmzObjectUtils.resolveFieldData(option, config.optionLabel) : option;
+    let value = option;
+    if (config.optionLabel)
+        value = SmzObjectUtils.resolveFieldData(option, config.optionLabel);
+    else if (option !== null && typeof option === 'object' && option.label !== undefined)
+        value = option.label;
     return value === null || value === undefined ? '' : String(value);
 }
+/**
+ * Valor da opcao. Sem `optionValue` (e sem `optionLabel`), opcoes-objeto com `value` usam esse campo
+ * (como o `p-select` do PrimeNG); caso contrario o proprio objeto e o valor.
+ */
 function optionValue(option, config) {
-    return config.optionValue ? SmzObjectUtils.resolveFieldData(option, config.optionValue) : option;
+    if (config.optionValue)
+        return SmzObjectUtils.resolveFieldData(option, config.optionValue);
+    if (!config.optionLabel && option !== null && typeof option === 'object' && option.value !== undefined)
+        return option.value;
+    return option;
 }
 function optionDisabled(option, config) {
     return config.optionDisabled ? !!SmzObjectUtils.resolveFieldData(option, config.optionDisabled) : false;
@@ -3929,8 +3948,8 @@ class SmzSelectButtonComponent extends SmzValueAccessor {
             : sameValue(value, current, this.dataKey());
     }
     buttonClasses(option) {
-        const size = this.size() === 'small' ? 'h-control-sm text-ui-sm' : this.size() === 'large' ? 'h-control-lg text-ui-lg' : 'h-control';
-        const tone = this.isSelected(option) ? 'bg-ui-primary text-ui-on-primary' : 'bg-ui-surface-1 text-ui-fg hover:bg-ui-surface-3';
+        const size = this.size() === 'small' ? 'h-[calc(var(--smz-control-h-sm)-0.5rem)] text-ui-sm' : this.size() === 'large' ? 'h-[calc(var(--smz-control-h-lg)-0.5rem)] text-ui-lg' : 'h-[calc(var(--smz-control-h)-0.5rem)]';
+        const tone = this.isSelected(option) ? 'bg-ui-surface-1 text-ui-fg shadow-card' : 'text-ui-fg-muted hover:text-ui-fg';
         return `${size} ${tone}`;
     }
     toggle(option, event) {
@@ -3953,11 +3972,11 @@ class SmzSelectButtonComponent extends SmzValueAccessor {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzSelectButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzSelectButtonComponent, isStandalone: true, selector: "ui-select-button", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, allowEmpty: { classPropertyName: "allowEmpty", publicName: "allowEmpty", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, host: { classAttribute: "inline-flex" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SmzSelectButtonComponent), multi: true }], usesInheritance: true, ngImport: i0, template: `
-    <div role="group" class="inline-flex overflow-hidden rounded-control border border-ui-line-strong" [ngClass]="styleClass()">
+    <div role="group" class="inline-flex gap-1 rounded-control bg-ui-surface-3 p-1" [ngClass]="styleClass()">
       @for (option of options(); track $index) {
         <button
           type="button"
-          class="inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap border-l border-ui-line-strong px-control-x font-ui text-ui-md transition-colors duration-ui first:border-l-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50"
+          class="inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-control px-control-x font-ui text-ui-md font-medium transition-colors duration-ui focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50"
           [class]="buttonClasses(option)"
           [attr.aria-pressed]="isSelected(option)"
           [disabled]="isDisabled() || isOptionDisabled(option)"
@@ -3982,11 +4001,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                     providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SmzSelectButtonComponent), multi: true }],
                     host: { class: 'inline-flex' },
                     template: `
-    <div role="group" class="inline-flex overflow-hidden rounded-control border border-ui-line-strong" [ngClass]="styleClass()">
+    <div role="group" class="inline-flex gap-1 rounded-control bg-ui-surface-3 p-1" [ngClass]="styleClass()">
       @for (option of options(); track $index) {
         <button
           type="button"
-          class="inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap border-l border-ui-line-strong px-control-x font-ui text-ui-md transition-colors duration-ui first:border-l-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50"
+          class="inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-control px-control-x font-ui text-ui-md font-medium transition-colors duration-ui focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50"
           [class]="buttonClasses(option)"
           [attr.aria-pressed]="isSelected(option)"
           [disabled]="isDisabled() || isOptionDisabled(option)"
@@ -4905,10 +4924,15 @@ class SmzDatePickerComponent extends SmzValueAccessor {
     fieldRef = viewChild.required('field');
     panel = viewChild.required('panel');
     anchored = new SmzAnchoredPanel(this.overlay, this.viewContainer);
+    /**
+     * Aceita `Date`, string (ISO ou parseavel) e numero (timestamp), como o `p-datepicker`.
+     * Valores invalidos viram `null` em vez de lancar. O modelo do formulario so muda quando o usuario escolhe uma data.
+     */
     writeValue(value) {
-        super.writeValue(value);
+        const coerced = coerceDateValue(value);
+        super.writeValue(coerced);
         this.typed.set(null);
-        this.syncViewTo(value);
+        this.syncViewTo(coerced);
     }
     ngOnDestroy() {
         this.anchored.close();
@@ -5450,6 +5474,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
   `,
                 }]
         }], propDecorators: { selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], timeOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeOnly", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], showButtonBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtonBar", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], showOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOnFocus", required: false }] }], keepInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepInvalid", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyInput", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], touchUI: [{ type: i0.Input, args: [{ isSignal: true, alias: "touchUI", required: false }] }], focusTrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusTrap", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], blurred: [{ type: i0.Output, args: ["blurred"] }], anchorRef: [{ type: i0.ViewChild, args: ['anchor', { isSignal: true }] }], fieldRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
+function toDate(value) {
+    if (value instanceof Date)
+        return Number.isNaN(value.getTime()) ? null : value;
+    if (typeof value === 'string' || typeof value === 'number') {
+        if (value === '')
+            return null;
+        const date = new Date(value);
+        return Number.isNaN(date.getTime()) ? null : date;
+    }
+    return null;
+}
+function coerceDateValue(value) {
+    if (Array.isArray(value)) {
+        const dates = value.map(toDate).filter((date) => date !== null);
+        return dates.length > 0 ? dates : null;
+    }
+    return toDate(value);
+}
 
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-unsafe-return, max-len */
 /* eslint-disable max-len -- classes Tailwind nos templates */
@@ -8117,7 +8159,7 @@ class SmzCardComponent {
     subtitleTemplate = computed(() => smzFindTemplate(this.templates(), 'subtitle'), ...(ngDevMode ? [{ debugName: "subtitleTemplate" }] : []));
     footerTemplate = computed(() => smzFindTemplate(this.templates(), 'footer'), ...(ngDevMode ? [{ debugName: "footerTemplate" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzCardComponent, isStandalone: true, selector: "ui-card", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, subheader: { classPropertyName: "subheader", publicName: "subheader", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "p-card flex flex-col overflow-hidden rounded-card border border-ui-line bg-ui-surface-1 font-ui text-ui-md text-ui-fg shadow-card" }, queries: [{ propertyName: "templates", predicate: SmzTemplateDirective, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzCardComponent, isStandalone: true, selector: "ui-card", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, subheader: { classPropertyName: "subheader", publicName: "subheader", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "p-card flex flex-col overflow-hidden rounded-card bg-ui-surface-1 font-ui text-ui-md text-ui-fg shadow-card" }, queries: [{ propertyName: "templates", predicate: SmzTemplateDirective, isSignal: true }], ngImport: i0, template: `
     @if (headerTemplate(); as tpl) {
       <div class="p-card-header"><ng-container [ngTemplateOutlet]="tpl" /></div>
     }
@@ -8145,7 +8187,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                     selector: 'ui-card',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [NgTemplateOutlet],
-                    host: { class: 'p-card flex flex-col overflow-hidden rounded-card border border-ui-line bg-ui-surface-1 font-ui text-ui-md text-ui-fg shadow-card' },
+                    host: { class: 'p-card flex flex-col overflow-hidden rounded-card bg-ui-surface-1 font-ui text-ui-md text-ui-fg shadow-card' },
                     template: `
     @if (headerTemplate(); as tpl) {
       <div class="p-card-header"><ng-container [ngTemplateOutlet]="tpl" /></div>