@ajuarezso/sui-design-system 0.5.1 → 0.5.2
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.
|
@@ -2131,6 +2131,9 @@ class SuiButton {
|
|
|
2131
2131
|
color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
2132
2132
|
size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
2133
2133
|
onlyIcon = input(false, ...(ngDevMode ? [{ debugName: "onlyIcon" }] : /* istanbul ignore next */ []));
|
|
2134
|
+
/* Pill: radius full (cápsula) para CTAs consumer — look Rappi/UberEats.
|
|
2135
|
+
No cambia el radius default del DS; opt-in por botón. */
|
|
2136
|
+
pill = input(false, ...(ngDevMode ? [{ debugName: "pill" }] : /* istanbul ignore next */ []));
|
|
2134
2137
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
2135
2138
|
/* Iconos por prop (nombre RemixIcon), mismo patrón que sui-link-button — homologa
|
|
2136
2139
|
a Figma (Left Icon / Pick Left · Right Icon / Pick Right). Para íconos custom
|
|
@@ -2167,7 +2170,7 @@ class SuiButton {
|
|
|
2167
2170
|
}
|
|
2168
2171
|
}
|
|
2169
2172
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2170
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiButton, isStandalone: true, selector: "sui-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, onlyIcon: { classPropertyName: "onlyIcon", publicName: "onlyIcon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, leftIcon: { classPropertyName: "leftIcon", publicName: "leftIcon", isSignal: true, isRequired: false, transformFunction: null }, rightIcon: { classPropertyName: "rightIcon", publicName: "rightIcon", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "touchstart": "$event.currentTarget", "touchend": "$any($event.currentTarget).blur()", "click": "_onClick($event)", "keydown.enter": "_onClick($event)", "keydown.space": "_onClick($event)" }, properties: { "attr.data-sui-variant": "variant()", "attr.data-sui-color": "color()", "attr.data-sui-size": "size()", "attr.data-sui-only-icon": "onlyIcon() ? \"\" : null", "attr.data-sui-disabled": "disabled() ? \"\" : null", "attr.role": "\"button\"", "attr.tabindex": "disabled() ? \"-1\" : \"0\"", "attr.aria-disabled": "disabled() ? \"true\" : null" } }, ngImport: i0, template: "@if (leftIcon()) {\n <sui-icon class=\"sui-button__icon\" [name]=\"leftIcon()!\" [size]=\"20\" data-slot=\"start\" />\n}\n<ng-content select=\"[data-slot=start]\"></ng-content>\n@if (!onlyIcon()) {\n <span class=\"sui-button__label\"><ng-content></ng-content></span>\n}\n<ng-content select=\"[data-slot=end]\"></ng-content>\n@if (rightIcon()) {\n <sui-icon class=\"sui-button__icon\" [name]=\"rightIcon()!\" [size]=\"20\" data-slot=\"end\" />\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid transparent;cursor:pointer;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;user-select:none;text-decoration:none;outline:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host:active:not([data-sui-disabled]){transform:scale(.96)}:host{font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}.sui-button__label{display:inline-flex;align-items:center}:host ::ng-deep [data-slot=start],:host ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md)}:host([data-sui-size=\"2xsmall\"]){height:28px;padding:4px 6px;gap:6px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-size=xsmall]){height:32px;padding:6px;gap:6px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-size=small]){height:36px;padding:8px;gap:8px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-size=medium]){height:40px;padding:10px;gap:8px;border-radius:var(--sui-radius-10, 10px)}:host([data-sui-only-icon]){gap:0}:host([data-sui-only-icon][data-sui-size=\"2xsmall\"]){width:28px;padding:4px}:host([data-sui-only-icon][data-sui-size=xsmall]){width:32px;padding:6px}:host([data-sui-only-icon][data-sui-size=small]){width:36px;padding:8px}:host([data-sui-only-icon][data-sui-size=medium]){width:40px;padding:10px}:host([data-sui-color=primary][data-sui-variant=filled]){background:var(--sui-primary-base);border-color:transparent;color:var(--sui-static-white)}:host([data-sui-color=primary][data-sui-variant=filled]):hover{background:var(--sui-primary-dark)}:host([data-sui-color=primary][data-sui-variant=filled]):active,:host([data-sui-color=primary][data-sui-variant=filled]):focus-visible{background:var(--sui-primary-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-color=error][data-sui-variant=filled]){background:var(--sui-state-error-base);border-color:transparent;color:var(--sui-static-white)}:host([data-sui-color=error][data-sui-variant=filled]):hover{background:var(--sui-red-700)}:host([data-sui-color=error][data-sui-variant=filled]):active,:host([data-sui-color=error][data-sui-variant=filled]):focus-visible{background:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-10)}:host([data-sui-color=neutral][data-sui-variant=filled]){background:var(--sui-bg-strong-950);border-color:transparent;color:var(--sui-text-white-0)}:host([data-sui-color=neutral][data-sui-variant=filled]):hover{background:var(--sui-bg-surface-800)}:host([data-sui-color=neutral][data-sui-variant=filled]):active,:host([data-sui-color=neutral][data-sui-variant=filled]):focus-visible{background:var(--sui-bg-surface-800);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-variant=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-text-sub-600);box-shadow:var(--sui-regular-shadow-x-small)}:host([data-sui-variant=stroke]):hover{background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-text-strong-950)}:host([data-sui-variant=stroke]):active,:host([data-sui-variant=stroke]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);color:var(--sui-text-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-color=primary][data-sui-variant=stroke]){border-color:var(--sui-primary-base);color:var(--sui-primary-base);box-shadow:none}:host([data-sui-color=primary][data-sui-variant=stroke]):hover{background:var(--sui-primary-alpha-10);border-color:transparent;color:var(--sui-primary-base)}:host([data-sui-color=primary][data-sui-variant=stroke]):active,:host([data-sui-color=primary][data-sui-variant=stroke]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-primary-base);color:var(--sui-primary-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-color=error][data-sui-variant=stroke]){border-color:var(--sui-state-error-base);color:var(--sui-state-error-base);box-shadow:none}:host([data-sui-color=error][data-sui-variant=stroke]):hover{background:var(--sui-red-alpha-10);border-color:transparent;color:var(--sui-state-error-base)}:host([data-sui-color=error][data-sui-variant=stroke]):active,:host([data-sui-color=error][data-sui-variant=stroke]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-state-error-base);color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-10)}:host([data-sui-color=primary][data-sui-variant=lighter]){background:var(--sui-primary-alpha-10);border-color:transparent;color:var(--sui-primary-base)}:host([data-sui-color=primary][data-sui-variant=lighter]):hover{background:var(--sui-bg-white-0);border-color:var(--sui-primary-base)}:host([data-sui-color=primary][data-sui-variant=lighter]):active,:host([data-sui-color=primary][data-sui-variant=lighter]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-primary-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-color=neutral][data-sui-variant=lighter]){background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-text-sub-600)}:host([data-sui-color=neutral][data-sui-variant=lighter]):hover{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-text-strong-950);box-shadow:var(--sui-regular-shadow-x-small)}:host([data-sui-color=neutral][data-sui-variant=lighter]):active,:host([data-sui-color=neutral][data-sui-variant=lighter]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);color:var(--sui-text-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-color=error][data-sui-variant=lighter]){background:var(--sui-state-error-lighter);border-color:transparent;color:var(--sui-state-error-base)}:host([data-sui-color=error][data-sui-variant=lighter]):hover{background:var(--sui-bg-white-0);border-color:var(--sui-state-error-base)}:host([data-sui-color=error][data-sui-variant=lighter]):active,:host([data-sui-color=error][data-sui-variant=lighter]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-10)}:host([data-sui-color=primary][data-sui-variant=ghost]){background:transparent;border-color:transparent;color:var(--sui-primary-base)}:host([data-sui-color=primary][data-sui-variant=ghost]):hover{background:var(--sui-primary-alpha-10)}:host([data-sui-color=primary][data-sui-variant=ghost]):active,:host([data-sui-color=primary][data-sui-variant=ghost]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-primary-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-color=neutral][data-sui-variant=ghost]){background:transparent;border-color:transparent;color:var(--sui-text-sub-600)}:host([data-sui-color=neutral][data-sui-variant=ghost]):hover{background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}:host([data-sui-color=neutral][data-sui-variant=ghost]):active,:host([data-sui-color=neutral][data-sui-variant=ghost]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);color:var(--sui-text-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-color=error][data-sui-variant=ghost]){background:transparent;border-color:transparent;color:var(--sui-state-error-base)}:host([data-sui-color=error][data-sui-variant=ghost]):hover{background:var(--sui-state-error-lighter)}:host([data-sui-color=error][data-sui-variant=ghost]):active,:host([data-sui-color=error][data-sui-variant=ghost]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-10)}:host([data-sui-disabled]){background:var(--sui-bg-weak-50)!important;border-color:transparent!important;color:var(--sui-text-disabled-300)!important;cursor:not-allowed;pointer-events:none;box-shadow:none!important}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2173
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiButton, isStandalone: true, selector: "sui-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, onlyIcon: { classPropertyName: "onlyIcon", publicName: "onlyIcon", isSignal: true, isRequired: false, transformFunction: null }, pill: { classPropertyName: "pill", publicName: "pill", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, leftIcon: { classPropertyName: "leftIcon", publicName: "leftIcon", isSignal: true, isRequired: false, transformFunction: null }, rightIcon: { classPropertyName: "rightIcon", publicName: "rightIcon", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "touchstart": "$event.currentTarget", "touchend": "$any($event.currentTarget).blur()", "click": "_onClick($event)", "keydown.enter": "_onClick($event)", "keydown.space": "_onClick($event)" }, properties: { "attr.data-sui-variant": "variant()", "attr.data-sui-color": "color()", "attr.data-sui-size": "size()", "attr.data-sui-only-icon": "onlyIcon() ? \"\" : null", "attr.data-sui-pill": "pill() ? \"\" : null", "attr.data-sui-disabled": "disabled() ? \"\" : null", "attr.role": "\"button\"", "attr.tabindex": "disabled() ? \"-1\" : \"0\"", "attr.aria-disabled": "disabled() ? \"true\" : null" } }, ngImport: i0, template: "@if (leftIcon()) {\n <sui-icon class=\"sui-button__icon\" [name]=\"leftIcon()!\" [size]=\"20\" data-slot=\"start\" />\n}\n<ng-content select=\"[data-slot=start]\"></ng-content>\n@if (!onlyIcon()) {\n <span class=\"sui-button__label\"><ng-content></ng-content></span>\n}\n<ng-content select=\"[data-slot=end]\"></ng-content>\n@if (rightIcon()) {\n <sui-icon class=\"sui-button__icon\" [name]=\"rightIcon()!\" [size]=\"20\" data-slot=\"end\" />\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid transparent;cursor:pointer;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;user-select:none;text-decoration:none;outline:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host:active:not([data-sui-disabled]){transform:scale(.96)}:host{font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}.sui-button__label{display:inline-flex;align-items:center}:host ::ng-deep [data-slot=start],:host ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md)}:host([data-sui-size=\"2xsmall\"]){height:28px;padding:4px 6px;gap:6px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-size=xsmall]){height:32px;padding:6px;gap:6px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-size=small]){height:36px;padding:8px;gap:8px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-size=medium]){height:40px;padding:10px;gap:8px;border-radius:var(--sui-radius-10, 10px)}:host([data-sui-size=large]){height:48px;padding:12px 18px;gap:8px;border-radius:var(--sui-radius-12, 12px);font-size:var(--sui-type-label-md-size, 16px)}:host([data-sui-size=xlarge]){height:52px;padding:14px 20px;gap:8px;border-radius:var(--sui-radius-14, 14px);font-size:var(--sui-type-label-md-size, 16px)}:host([data-sui-pill]){border-radius:999px}:host([data-sui-only-icon]){gap:0}:host([data-sui-only-icon][data-sui-size=\"2xsmall\"]){width:28px;padding:4px}:host([data-sui-only-icon][data-sui-size=xsmall]){width:32px;padding:6px}:host([data-sui-only-icon][data-sui-size=small]){width:36px;padding:8px}:host([data-sui-only-icon][data-sui-size=medium]){width:40px;padding:10px}:host([data-sui-only-icon][data-sui-size=large]){width:48px;padding:12px}:host([data-sui-only-icon][data-sui-size=xlarge]){width:52px;padding:14px}:host([data-sui-color=primary][data-sui-variant=filled]){background:var(--sui-primary-base);border-color:transparent;color:var(--sui-static-white)}:host([data-sui-color=primary][data-sui-variant=filled]):hover{background:var(--sui-primary-dark)}:host([data-sui-color=primary][data-sui-variant=filled]):active,:host([data-sui-color=primary][data-sui-variant=filled]):focus-visible{background:var(--sui-primary-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-color=error][data-sui-variant=filled]){background:var(--sui-state-error-base);border-color:transparent;color:var(--sui-static-white)}:host([data-sui-color=error][data-sui-variant=filled]):hover{background:var(--sui-red-700)}:host([data-sui-color=error][data-sui-variant=filled]):active,:host([data-sui-color=error][data-sui-variant=filled]):focus-visible{background:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-10)}:host([data-sui-color=neutral][data-sui-variant=filled]){background:var(--sui-bg-strong-950);border-color:transparent;color:var(--sui-text-white-0)}:host([data-sui-color=neutral][data-sui-variant=filled]):hover{background:var(--sui-bg-surface-800)}:host([data-sui-color=neutral][data-sui-variant=filled]):active,:host([data-sui-color=neutral][data-sui-variant=filled]):focus-visible{background:var(--sui-bg-surface-800);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-variant=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-text-sub-600);box-shadow:var(--sui-regular-shadow-x-small)}:host([data-sui-variant=stroke]):hover{background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-text-strong-950)}:host([data-sui-variant=stroke]):active,:host([data-sui-variant=stroke]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);color:var(--sui-text-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-color=primary][data-sui-variant=stroke]){border-color:var(--sui-primary-base);color:var(--sui-primary-base);box-shadow:none}:host([data-sui-color=primary][data-sui-variant=stroke]):hover{background:var(--sui-primary-alpha-10);border-color:transparent;color:var(--sui-primary-base)}:host([data-sui-color=primary][data-sui-variant=stroke]):active,:host([data-sui-color=primary][data-sui-variant=stroke]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-primary-base);color:var(--sui-primary-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-color=error][data-sui-variant=stroke]){border-color:var(--sui-state-error-base);color:var(--sui-state-error-base);box-shadow:none}:host([data-sui-color=error][data-sui-variant=stroke]):hover{background:var(--sui-red-alpha-10);border-color:transparent;color:var(--sui-state-error-base)}:host([data-sui-color=error][data-sui-variant=stroke]):active,:host([data-sui-color=error][data-sui-variant=stroke]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-state-error-base);color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-10)}:host([data-sui-color=primary][data-sui-variant=lighter]){background:var(--sui-primary-alpha-10);border-color:transparent;color:var(--sui-primary-base)}:host([data-sui-color=primary][data-sui-variant=lighter]):hover{background:var(--sui-bg-white-0);border-color:var(--sui-primary-base)}:host([data-sui-color=primary][data-sui-variant=lighter]):active,:host([data-sui-color=primary][data-sui-variant=lighter]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-primary-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-color=neutral][data-sui-variant=lighter]){background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-text-sub-600)}:host([data-sui-color=neutral][data-sui-variant=lighter]):hover{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-text-strong-950);box-shadow:var(--sui-regular-shadow-x-small)}:host([data-sui-color=neutral][data-sui-variant=lighter]):active,:host([data-sui-color=neutral][data-sui-variant=lighter]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);color:var(--sui-text-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-color=error][data-sui-variant=lighter]){background:var(--sui-state-error-lighter);border-color:transparent;color:var(--sui-state-error-base)}:host([data-sui-color=error][data-sui-variant=lighter]):hover{background:var(--sui-bg-white-0);border-color:var(--sui-state-error-base)}:host([data-sui-color=error][data-sui-variant=lighter]):active,:host([data-sui-color=error][data-sui-variant=lighter]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-10)}:host([data-sui-color=primary][data-sui-variant=ghost]){background:transparent;border-color:transparent;color:var(--sui-primary-base)}:host([data-sui-color=primary][data-sui-variant=ghost]):hover{background:var(--sui-primary-alpha-10)}:host([data-sui-color=primary][data-sui-variant=ghost]):active,:host([data-sui-color=primary][data-sui-variant=ghost]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-primary-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-color=neutral][data-sui-variant=ghost]){background:transparent;border-color:transparent;color:var(--sui-text-sub-600)}:host([data-sui-color=neutral][data-sui-variant=ghost]):hover{background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}:host([data-sui-color=neutral][data-sui-variant=ghost]):active,:host([data-sui-color=neutral][data-sui-variant=ghost]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);color:var(--sui-text-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-color=error][data-sui-variant=ghost]){background:transparent;border-color:transparent;color:var(--sui-state-error-base)}:host([data-sui-color=error][data-sui-variant=ghost]):hover{background:var(--sui-state-error-lighter)}:host([data-sui-color=error][data-sui-variant=ghost]):active,:host([data-sui-color=error][data-sui-variant=ghost]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-10)}:host([data-sui-disabled]){background:var(--sui-bg-weak-50)!important;border-color:transparent!important;color:var(--sui-text-disabled-300)!important;cursor:not-allowed;pointer-events:none;box-shadow:none!important}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2171
2174
|
}
|
|
2172
2175
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiButton, decorators: [{
|
|
2173
2176
|
type: Component,
|
|
@@ -2176,6 +2179,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2176
2179
|
'[attr.data-sui-color]': 'color()',
|
|
2177
2180
|
'[attr.data-sui-size]': 'size()',
|
|
2178
2181
|
'[attr.data-sui-only-icon]': 'onlyIcon() ? "" : null',
|
|
2182
|
+
'[attr.data-sui-pill]': 'pill() ? "" : null',
|
|
2179
2183
|
'[attr.data-sui-disabled]': 'disabled() ? "" : null',
|
|
2180
2184
|
'[attr.role]': '"button"',
|
|
2181
2185
|
'[attr.tabindex]': 'disabled() ? "-1" : "0"',
|
|
@@ -2194,8 +2198,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2194
2198
|
'(click)': '_onClick($event)',
|
|
2195
2199
|
'(keydown.enter)': '_onClick($event)',
|
|
2196
2200
|
'(keydown.space)': '_onClick($event)',
|
|
2197
|
-
}, template: "@if (leftIcon()) {\n <sui-icon class=\"sui-button__icon\" [name]=\"leftIcon()!\" [size]=\"20\" data-slot=\"start\" />\n}\n<ng-content select=\"[data-slot=start]\"></ng-content>\n@if (!onlyIcon()) {\n <span class=\"sui-button__label\"><ng-content></ng-content></span>\n}\n<ng-content select=\"[data-slot=end]\"></ng-content>\n@if (rightIcon()) {\n <sui-icon class=\"sui-button__icon\" [name]=\"rightIcon()!\" [size]=\"20\" data-slot=\"end\" />\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid transparent;cursor:pointer;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;user-select:none;text-decoration:none;outline:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host:active:not([data-sui-disabled]){transform:scale(.96)}:host{font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}.sui-button__label{display:inline-flex;align-items:center}:host ::ng-deep [data-slot=start],:host ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md)}:host([data-sui-size=\"2xsmall\"]){height:28px;padding:4px 6px;gap:6px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-size=xsmall]){height:32px;padding:6px;gap:6px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-size=small]){height:36px;padding:8px;gap:8px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-size=medium]){height:40px;padding:10px;gap:8px;border-radius:var(--sui-radius-10, 10px)}:host([data-sui-only-icon]){gap:0}:host([data-sui-only-icon][data-sui-size=\"2xsmall\"]){width:28px;padding:4px}:host([data-sui-only-icon][data-sui-size=xsmall]){width:32px;padding:6px}:host([data-sui-only-icon][data-sui-size=small]){width:36px;padding:8px}:host([data-sui-only-icon][data-sui-size=medium]){width:40px;padding:10px}:host([data-sui-color=primary][data-sui-variant=filled]){background:var(--sui-primary-base);border-color:transparent;color:var(--sui-static-white)}:host([data-sui-color=primary][data-sui-variant=filled]):hover{background:var(--sui-primary-dark)}:host([data-sui-color=primary][data-sui-variant=filled]):active,:host([data-sui-color=primary][data-sui-variant=filled]):focus-visible{background:var(--sui-primary-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-color=error][data-sui-variant=filled]){background:var(--sui-state-error-base);border-color:transparent;color:var(--sui-static-white)}:host([data-sui-color=error][data-sui-variant=filled]):hover{background:var(--sui-red-700)}:host([data-sui-color=error][data-sui-variant=filled]):active,:host([data-sui-color=error][data-sui-variant=filled]):focus-visible{background:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-10)}:host([data-sui-color=neutral][data-sui-variant=filled]){background:var(--sui-bg-strong-950);border-color:transparent;color:var(--sui-text-white-0)}:host([data-sui-color=neutral][data-sui-variant=filled]):hover{background:var(--sui-bg-surface-800)}:host([data-sui-color=neutral][data-sui-variant=filled]):active,:host([data-sui-color=neutral][data-sui-variant=filled]):focus-visible{background:var(--sui-bg-surface-800);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-variant=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-text-sub-600);box-shadow:var(--sui-regular-shadow-x-small)}:host([data-sui-variant=stroke]):hover{background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-text-strong-950)}:host([data-sui-variant=stroke]):active,:host([data-sui-variant=stroke]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);color:var(--sui-text-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-color=primary][data-sui-variant=stroke]){border-color:var(--sui-primary-base);color:var(--sui-primary-base);box-shadow:none}:host([data-sui-color=primary][data-sui-variant=stroke]):hover{background:var(--sui-primary-alpha-10);border-color:transparent;color:var(--sui-primary-base)}:host([data-sui-color=primary][data-sui-variant=stroke]):active,:host([data-sui-color=primary][data-sui-variant=stroke]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-primary-base);color:var(--sui-primary-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-color=error][data-sui-variant=stroke]){border-color:var(--sui-state-error-base);color:var(--sui-state-error-base);box-shadow:none}:host([data-sui-color=error][data-sui-variant=stroke]):hover{background:var(--sui-red-alpha-10);border-color:transparent;color:var(--sui-state-error-base)}:host([data-sui-color=error][data-sui-variant=stroke]):active,:host([data-sui-color=error][data-sui-variant=stroke]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-state-error-base);color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-10)}:host([data-sui-color=primary][data-sui-variant=lighter]){background:var(--sui-primary-alpha-10);border-color:transparent;color:var(--sui-primary-base)}:host([data-sui-color=primary][data-sui-variant=lighter]):hover{background:var(--sui-bg-white-0);border-color:var(--sui-primary-base)}:host([data-sui-color=primary][data-sui-variant=lighter]):active,:host([data-sui-color=primary][data-sui-variant=lighter]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-primary-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-color=neutral][data-sui-variant=lighter]){background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-text-sub-600)}:host([data-sui-color=neutral][data-sui-variant=lighter]):hover{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-text-strong-950);box-shadow:var(--sui-regular-shadow-x-small)}:host([data-sui-color=neutral][data-sui-variant=lighter]):active,:host([data-sui-color=neutral][data-sui-variant=lighter]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);color:var(--sui-text-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-color=error][data-sui-variant=lighter]){background:var(--sui-state-error-lighter);border-color:transparent;color:var(--sui-state-error-base)}:host([data-sui-color=error][data-sui-variant=lighter]):hover{background:var(--sui-bg-white-0);border-color:var(--sui-state-error-base)}:host([data-sui-color=error][data-sui-variant=lighter]):active,:host([data-sui-color=error][data-sui-variant=lighter]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-10)}:host([data-sui-color=primary][data-sui-variant=ghost]){background:transparent;border-color:transparent;color:var(--sui-primary-base)}:host([data-sui-color=primary][data-sui-variant=ghost]):hover{background:var(--sui-primary-alpha-10)}:host([data-sui-color=primary][data-sui-variant=ghost]):active,:host([data-sui-color=primary][data-sui-variant=ghost]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-primary-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-color=neutral][data-sui-variant=ghost]){background:transparent;border-color:transparent;color:var(--sui-text-sub-600)}:host([data-sui-color=neutral][data-sui-variant=ghost]):hover{background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}:host([data-sui-color=neutral][data-sui-variant=ghost]):active,:host([data-sui-color=neutral][data-sui-variant=ghost]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);color:var(--sui-text-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-color=error][data-sui-variant=ghost]){background:transparent;border-color:transparent;color:var(--sui-state-error-base)}:host([data-sui-color=error][data-sui-variant=ghost]):hover{background:var(--sui-state-error-lighter)}:host([data-sui-color=error][data-sui-variant=ghost]):active,:host([data-sui-color=error][data-sui-variant=ghost]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-10)}:host([data-sui-disabled]){background:var(--sui-bg-weak-50)!important;border-color:transparent!important;color:var(--sui-text-disabled-300)!important;cursor:not-allowed;pointer-events:none;box-shadow:none!important}\n"] }]
|
|
2198
|
-
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], onlyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlyIcon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], leftIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftIcon", required: false }] }], rightIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightIcon", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }] } });
|
|
2201
|
+
}, template: "@if (leftIcon()) {\n <sui-icon class=\"sui-button__icon\" [name]=\"leftIcon()!\" [size]=\"20\" data-slot=\"start\" />\n}\n<ng-content select=\"[data-slot=start]\"></ng-content>\n@if (!onlyIcon()) {\n <span class=\"sui-button__label\"><ng-content></ng-content></span>\n}\n<ng-content select=\"[data-slot=end]\"></ng-content>\n@if (rightIcon()) {\n <sui-icon class=\"sui-button__icon\" [name]=\"rightIcon()!\" [size]=\"20\" data-slot=\"end\" />\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid transparent;cursor:pointer;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;user-select:none;text-decoration:none;outline:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host:active:not([data-sui-disabled]){transform:scale(.96)}:host{font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}.sui-button__label{display:inline-flex;align-items:center}:host ::ng-deep [data-slot=start],:host ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md)}:host([data-sui-size=\"2xsmall\"]){height:28px;padding:4px 6px;gap:6px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-size=xsmall]){height:32px;padding:6px;gap:6px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-size=small]){height:36px;padding:8px;gap:8px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-size=medium]){height:40px;padding:10px;gap:8px;border-radius:var(--sui-radius-10, 10px)}:host([data-sui-size=large]){height:48px;padding:12px 18px;gap:8px;border-radius:var(--sui-radius-12, 12px);font-size:var(--sui-type-label-md-size, 16px)}:host([data-sui-size=xlarge]){height:52px;padding:14px 20px;gap:8px;border-radius:var(--sui-radius-14, 14px);font-size:var(--sui-type-label-md-size, 16px)}:host([data-sui-pill]){border-radius:999px}:host([data-sui-only-icon]){gap:0}:host([data-sui-only-icon][data-sui-size=\"2xsmall\"]){width:28px;padding:4px}:host([data-sui-only-icon][data-sui-size=xsmall]){width:32px;padding:6px}:host([data-sui-only-icon][data-sui-size=small]){width:36px;padding:8px}:host([data-sui-only-icon][data-sui-size=medium]){width:40px;padding:10px}:host([data-sui-only-icon][data-sui-size=large]){width:48px;padding:12px}:host([data-sui-only-icon][data-sui-size=xlarge]){width:52px;padding:14px}:host([data-sui-color=primary][data-sui-variant=filled]){background:var(--sui-primary-base);border-color:transparent;color:var(--sui-static-white)}:host([data-sui-color=primary][data-sui-variant=filled]):hover{background:var(--sui-primary-dark)}:host([data-sui-color=primary][data-sui-variant=filled]):active,:host([data-sui-color=primary][data-sui-variant=filled]):focus-visible{background:var(--sui-primary-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-color=error][data-sui-variant=filled]){background:var(--sui-state-error-base);border-color:transparent;color:var(--sui-static-white)}:host([data-sui-color=error][data-sui-variant=filled]):hover{background:var(--sui-red-700)}:host([data-sui-color=error][data-sui-variant=filled]):active,:host([data-sui-color=error][data-sui-variant=filled]):focus-visible{background:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-10)}:host([data-sui-color=neutral][data-sui-variant=filled]){background:var(--sui-bg-strong-950);border-color:transparent;color:var(--sui-text-white-0)}:host([data-sui-color=neutral][data-sui-variant=filled]):hover{background:var(--sui-bg-surface-800)}:host([data-sui-color=neutral][data-sui-variant=filled]):active,:host([data-sui-color=neutral][data-sui-variant=filled]):focus-visible{background:var(--sui-bg-surface-800);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-variant=stroke]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-text-sub-600);box-shadow:var(--sui-regular-shadow-x-small)}:host([data-sui-variant=stroke]):hover{background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-text-strong-950)}:host([data-sui-variant=stroke]):active,:host([data-sui-variant=stroke]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);color:var(--sui-text-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-color=primary][data-sui-variant=stroke]){border-color:var(--sui-primary-base);color:var(--sui-primary-base);box-shadow:none}:host([data-sui-color=primary][data-sui-variant=stroke]):hover{background:var(--sui-primary-alpha-10);border-color:transparent;color:var(--sui-primary-base)}:host([data-sui-color=primary][data-sui-variant=stroke]):active,:host([data-sui-color=primary][data-sui-variant=stroke]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-primary-base);color:var(--sui-primary-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-color=error][data-sui-variant=stroke]){border-color:var(--sui-state-error-base);color:var(--sui-state-error-base);box-shadow:none}:host([data-sui-color=error][data-sui-variant=stroke]):hover{background:var(--sui-red-alpha-10);border-color:transparent;color:var(--sui-state-error-base)}:host([data-sui-color=error][data-sui-variant=stroke]):active,:host([data-sui-color=error][data-sui-variant=stroke]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-state-error-base);color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-10)}:host([data-sui-color=primary][data-sui-variant=lighter]){background:var(--sui-primary-alpha-10);border-color:transparent;color:var(--sui-primary-base)}:host([data-sui-color=primary][data-sui-variant=lighter]):hover{background:var(--sui-bg-white-0);border-color:var(--sui-primary-base)}:host([data-sui-color=primary][data-sui-variant=lighter]):active,:host([data-sui-color=primary][data-sui-variant=lighter]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-primary-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-color=neutral][data-sui-variant=lighter]){background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-text-sub-600)}:host([data-sui-color=neutral][data-sui-variant=lighter]):hover{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-text-strong-950);box-shadow:var(--sui-regular-shadow-x-small)}:host([data-sui-color=neutral][data-sui-variant=lighter]):active,:host([data-sui-color=neutral][data-sui-variant=lighter]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);color:var(--sui-text-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-color=error][data-sui-variant=lighter]){background:var(--sui-state-error-lighter);border-color:transparent;color:var(--sui-state-error-base)}:host([data-sui-color=error][data-sui-variant=lighter]):hover{background:var(--sui-bg-white-0);border-color:var(--sui-state-error-base)}:host([data-sui-color=error][data-sui-variant=lighter]):active,:host([data-sui-color=error][data-sui-variant=lighter]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-10)}:host([data-sui-color=primary][data-sui-variant=ghost]){background:transparent;border-color:transparent;color:var(--sui-primary-base)}:host([data-sui-color=primary][data-sui-variant=ghost]):hover{background:var(--sui-primary-alpha-10)}:host([data-sui-color=primary][data-sui-variant=ghost]):active,:host([data-sui-color=primary][data-sui-variant=ghost]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-primary-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-color=neutral][data-sui-variant=ghost]){background:transparent;border-color:transparent;color:var(--sui-text-sub-600)}:host([data-sui-color=neutral][data-sui-variant=ghost]):hover{background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}:host([data-sui-color=neutral][data-sui-variant=ghost]):active,:host([data-sui-color=neutral][data-sui-variant=ghost]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);color:var(--sui-text-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}:host([data-sui-color=error][data-sui-variant=ghost]){background:transparent;border-color:transparent;color:var(--sui-state-error-base)}:host([data-sui-color=error][data-sui-variant=ghost]):hover{background:var(--sui-state-error-lighter)}:host([data-sui-color=error][data-sui-variant=ghost]):active,:host([data-sui-color=error][data-sui-variant=ghost]):focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-10)}:host([data-sui-disabled]){background:var(--sui-bg-weak-50)!important;border-color:transparent!important;color:var(--sui-text-disabled-300)!important;cursor:not-allowed;pointer-events:none;box-shadow:none!important}\n"] }]
|
|
2202
|
+
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], onlyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlyIcon", required: false }] }], pill: [{ type: i0.Input, args: [{ isSignal: true, alias: "pill", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], leftIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftIcon", required: false }] }], rightIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightIcon", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }] } });
|
|
2199
2203
|
|
|
2200
2204
|
/**
|
|
2201
2205
|
* SUI Card — SUI Design System 2.0
|
|
@@ -6672,7 +6676,7 @@ class SuiDatepicker {
|
|
|
6672
6676
|
useExisting: forwardRef(() => SuiDatepicker),
|
|
6673
6677
|
multi: true,
|
|
6674
6678
|
},
|
|
6675
|
-
], ngImport: i0, template: "<!-- Trigger (input + icono calendario) \u2014 solo si no es inline -->\n@if (!inline()) {\n <button\n type=\"button\"\n class=\"sui-datepicker__trigger\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-haspopup]=\"true\"\n (click)=\"toggle()\"\n >\n <sui-icon class=\"sui-datepicker__trigger-icon\" name=\"calendar-line\" [size]=\"20\" />\n <span class=\"sui-datepicker__trigger-text\" [class.sui-datepicker__trigger-text--placeholder]=\"!value()\">\n {{ triggerText() }}\n </span>\n <sui-icon class=\"sui-datepicker__trigger-chevron\" name=\"arrow-down-s-line\" [size]=\"20\" />\n </button>\n}\n\n<!-- Popover panel \u2014 visible cuando open() o inline() -->\n@if (inline() || open()) {\n <div class=\"sui-datepicker__panel\"\n [class.sui-datepicker__panel--inline]=\"inline()\"\n [class.sui-datepicker__panel--range]=\"mode() === 'range'\"\n role=\"dialog\">\n <!-- Sidebar de presets \u2014 solo en mode=range (usa <sui-period-range>) -->\n @if (mode() === 'range') {\n <aside class=\"sui-datepicker__presets\" aria-label=\"Rangos predefinidos\">\n @for (p of presets(); track trackPreset($index, p)) {\n <sui-period-range\n [label]=\"p.label\"\n [active]=\"isPresetActive(p.id)\"\n (clicked)=\"selectPreset(p)\"\n />\n }\n </aside>\n }\n\n <!-- Contenido principal: 1 o 2 calendarios + footer -->\n <div class=\"sui-datepicker__content\">\n <div class=\"sui-datepicker__calendars\">\n <!-- Calendario izquierdo (siempre visible) -->\n <div class=\"sui-datepicker__calendar\">\n <sui-date-selector\n [label]=\"leftMonthLabel()\"\n [leftIcon]=\"true\"\n [rightIcon]=\"effectiveCalendars() === 1\"\n (prev)=\"prevMonth()\"\n (next)=\"nextMonth()\"\n />\n\n <div class=\"sui-datepicker__day-labels\" role=\"row\">\n @for (label of dayLabels; track label) {\n <sui-day-label [label]=\"label\" />\n }\n </div>\n\n <div class=\"sui-datepicker__day-grid\" role=\"grid\">\n @for (row of leftRows(); track trackRow($index, row)) {\n <div class=\"sui-datepicker__day-row\" role=\"row\">\n @if (row.hasBand) {\n <span\n class=\"sui-datepicker__range-band\"\n [class.sui-datepicker__range-band--round-left]=\"row.bandRoundLeft\"\n [class.sui-datepicker__range-band--round-right]=\"row.bandRoundRight\"\n [style.--sui-band-start]=\"row.bandStart\"\n [style.--sui-band-end]=\"row.bandEnd\"\n aria-hidden=\"true\"\n ></span>\n }\n @for (cell of row.cells; track trackCell($index, cell)) {\n <sui-day-cell\n [day]=\"cell.day\"\n [type]=\"mode() === 'range' ? 'range' : 'basic'\"\n [selected]=\"mode() === 'date' && cell.selected\"\n [rangePosition]=\"cellRangePosition(cell)\"\n [marked]=\"cell.marked\"\n [today]=\"cell.isToday\"\n [disabled]=\"cell.disabled\"\n [outOfMonth]=\"!cell.inCurrentMonth\"\n (clicked)=\"selectCell(cell)\"\n />\n }\n </div>\n }\n </div>\n </div>\n\n <!-- Calendario derecho \u2014 solo en mode=range con effectiveCalendars=2 (desktop) -->\n @if (mode() === 'range' && effectiveCalendars() === 2) {\n <div class=\"sui-datepicker__calendar sui-datepicker__calendar--right\">\n <sui-date-selector\n [label]=\"rightMonthLabel()\"\n [leftIcon]=\"false\"\n [rightIcon]=\"true\"\n (next)=\"nextMonth()\"\n />\n\n <div class=\"sui-datepicker__day-labels\" role=\"row\">\n @for (label of dayLabels; track label) {\n <sui-day-label [label]=\"label\" />\n }\n </div>\n\n <div class=\"sui-datepicker__day-grid\" role=\"grid\">\n @for (row of rightRows(); track trackRow($index, row)) {\n <div class=\"sui-datepicker__day-row\" role=\"row\">\n @if (row.hasBand) {\n <span\n class=\"sui-datepicker__range-band\"\n [class.sui-datepicker__range-band--round-left]=\"row.bandRoundLeft\"\n [class.sui-datepicker__range-band--round-right]=\"row.bandRoundRight\"\n [style.--sui-band-start]=\"row.bandStart\"\n [style.--sui-band-end]=\"row.bandEnd\"\n aria-hidden=\"true\"\n ></span>\n }\n @for (cell of row.cells; track trackCell($index, cell)) {\n <sui-day-cell\n [day]=\"cell.day\"\n [type]=\"mode() === 'range' ? 'range' : 'basic'\"\n [selected]=\"false\"\n [rangePosition]=\"cellRangePosition(cell)\"\n [marked]=\"cell.marked\"\n [today]=\"cell.isToday\"\n [disabled]=\"cell.disabled\"\n [outOfMonth]=\"!cell.inCurrentMonth\"\n (clicked)=\"selectCell(cell)\"\n />\n }\n </div>\n }\n </div>\n </div>\n }\n </div>\n\n <!-- Footer con Cancel + Apply (Range siempre lo muestra) -->\n @if (showFooter() || mode() === 'range') {\n <footer class=\"sui-datepicker__footer\">\n @if (mode() === 'range' && rangeHint(); as hint) {\n <span class=\"sui-datepicker__range-hint\">{{ hint }}</span>\n }\n <div class=\"sui-datepicker__footer-actions\">\n <sui-button variant=\"stroke\" color=\"neutral\" size=\"small\" type=\"button\" (click)=\"cancel()\">\n Cancel\n </sui-button>\n <sui-button variant=\"filled\" color=\"primary\" size=\"small\" type=\"button\" (click)=\"apply()\">\n Apply\n </sui-button>\n </div>\n </footer>\n }\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;font-family:var(--sui-font-sans, var(--font-sans, sans-serif))}:host([data-sui-mode=range]){display:block}.sui-datepicker__trigger{display:inline-flex;align-items:center;gap:8px;width:100%;min-width:180px;height:40px;padding:0 12px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-10, 10px);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));cursor:pointer;outline:none;font:inherit;color:var(--sui-text-strong-950, #171717);transition:border-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}.sui-datepicker__trigger:hover:not(:disabled){border-color:var(--sui-stroke-sub-300, #d1d1d1)}.sui-datepicker__trigger:focus-visible:not(:disabled){border-color:var(--sui-stroke-strong-950, #171717);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px color-mix(in oklab,var(--sui-stroke-strong-950, #171717) 16%,transparent)}.sui-datepicker__trigger:disabled{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;border:none}.sui-datepicker__trigger-icon{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-datepicker__trigger-text{flex:1 1 auto;text-align:left;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-datepicker__trigger-text--placeholder{color:var(--sui-text-soft-400, #a3a3a3);font-weight:400}.sui-datepicker__trigger-chevron{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-datepicker__panel{position:absolute;top:calc(100% + 8px);left:0;z-index:50;display:flex;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-20, 20px);box-shadow:var(--sui-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, .1019607843));overflow:hidden;animation:sui-datepicker-enter .16s cubic-bezier(.23,1,.32,1)}.sui-datepicker__panel--inline{position:static;animation:none}.sui-datepicker__panel--range{width:936px;max-width:calc(100vw - 32px)}:host([data-sui-calendars=\"1\"]) .sui-datepicker__panel--range{width:auto}@keyframes sui-datepicker-enter{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.sui-datepicker__presets{display:flex;flex-direction:column;gap:8px;width:200px;flex-shrink:0;padding:20px 16px 2px;border-right:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #fff);box-sizing:border-box}.sui-datepicker__content{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.sui-datepicker__calendars{display:flex;flex:1 1 auto}.sui-datepicker__calendar{flex:1 1 0;max-width:368px;padding:20px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:8px}.sui-datepicker__calendar--right{border-left:1px solid var(--sui-stroke-soft-200, #ebebeb)}.sui-datepicker__day-labels{display:flex;gap:8px;align-items:center;justify-content:space-between;width:328px;max-width:328px}.sui-datepicker__day-grid{display:flex;flex-direction:column;gap:8px;width:328px;max-width:328px}.sui-datepicker__day-row{position:relative;display:flex;gap:8px;align-items:center;justify-content:space-between;width:328px}.sui-datepicker__range-band{position:absolute;inset:0;background:var(--sui-primary-alpha-10, rgba(250, 115, 25, .1019607843));pointer-events:none;z-index:0}.sui-datepicker__range-band--round-left{left:calc(var(--sui-band-start) * var(--sui-day-step, 48px));border-top-left-radius:var(--sui-radius-8, 8px);border-bottom-left-radius:var(--sui-radius-8, 8px)}.sui-datepicker__range-band--round-right{right:calc((6 - var(--sui-band-end)) * var(--sui-day-step, 48px));border-top-right-radius:var(--sui-radius-8, 8px);border-bottom-right-radius:var(--sui-radius-8, 8px)}.sui-datepicker__day-row sui-day-cell{position:relative;z-index:1}.sui-datepicker__footer{display:flex;align-items:center;gap:16px;padding:16px;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb)}:host([data-sui-mode=range]) .sui-datepicker__footer{padding:16px 16px 16px 24px}.sui-datepicker__range-hint{flex:1 0 0;min-width:0;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-datepicker__footer-actions{display:flex;gap:16px;align-items:center}:host(:not([data-sui-mode=range])) .sui-datepicker__footer-actions{flex:1 0 0;min-width:0}:host(:not([data-sui-mode=range])) .sui-datepicker__footer-actions sui-button{flex:1 0 0;min-width:0}:host([data-sui-mode=range]) .sui-datepicker__footer-actions{flex-shrink:0;margin-left:auto}:host([data-sui-mode=range]) .sui-datepicker__footer-actions sui-button{width:108px}@media(max-width:767px){.sui-datepicker__panel--range{width:calc(100vw - 32px);flex-direction:column}.sui-datepicker__presets{flex-direction:row;overflow-x:auto;width:100%;border-right:none;border-bottom:1px solid var(--sui-stroke-soft-200, #ebebeb);padding:12px 16px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}.sui-datepicker__presets sui-period-range{width:auto;flex-shrink:0;scroll-snap-align:start}.sui-datepicker__calendar{padding-left:12px;padding-right:12px;max-width:none}.sui-datepicker__day-labels,.sui-datepicker__day-grid,.sui-datepicker__day-row{--sui-day-step: 44px;width:304px;max-width:304px;gap:4px}}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiButton, selector: "sui-button", inputs: ["variant", "color", "size", "onlyIcon", "disabled", "leftIcon", "rightIcon", "type"] }, { kind: "component", type: SuiDayLabel, selector: "sui-day-label", inputs: ["label"] }, { kind: "component", type: SuiDayCell, selector: "sui-day-cell", inputs: ["day", "type", "rangePosition", "selected", "marked", "today", "disabled", "outOfMonth", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: SuiDateSelector, selector: "sui-date-selector", inputs: ["label", "leftIcon", "rightIcon", "disabled"], outputs: ["prev", "next"] }, { kind: "component", type: SuiPeriodRange, selector: "sui-period-range", inputs: ["label", "active", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6679
|
+
], ngImport: i0, template: "<!-- Trigger (input + icono calendario) \u2014 solo si no es inline -->\n@if (!inline()) {\n <button\n type=\"button\"\n class=\"sui-datepicker__trigger\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-haspopup]=\"true\"\n (click)=\"toggle()\"\n >\n <sui-icon class=\"sui-datepicker__trigger-icon\" name=\"calendar-line\" [size]=\"20\" />\n <span class=\"sui-datepicker__trigger-text\" [class.sui-datepicker__trigger-text--placeholder]=\"!value()\">\n {{ triggerText() }}\n </span>\n <sui-icon class=\"sui-datepicker__trigger-chevron\" name=\"arrow-down-s-line\" [size]=\"20\" />\n </button>\n}\n\n<!-- Popover panel \u2014 visible cuando open() o inline() -->\n@if (inline() || open()) {\n <div class=\"sui-datepicker__panel\"\n [class.sui-datepicker__panel--inline]=\"inline()\"\n [class.sui-datepicker__panel--range]=\"mode() === 'range'\"\n role=\"dialog\">\n <!-- Sidebar de presets \u2014 solo en mode=range (usa <sui-period-range>) -->\n @if (mode() === 'range') {\n <aside class=\"sui-datepicker__presets\" aria-label=\"Rangos predefinidos\">\n @for (p of presets(); track trackPreset($index, p)) {\n <sui-period-range\n [label]=\"p.label\"\n [active]=\"isPresetActive(p.id)\"\n (clicked)=\"selectPreset(p)\"\n />\n }\n </aside>\n }\n\n <!-- Contenido principal: 1 o 2 calendarios + footer -->\n <div class=\"sui-datepicker__content\">\n <div class=\"sui-datepicker__calendars\">\n <!-- Calendario izquierdo (siempre visible) -->\n <div class=\"sui-datepicker__calendar\">\n <sui-date-selector\n [label]=\"leftMonthLabel()\"\n [leftIcon]=\"true\"\n [rightIcon]=\"effectiveCalendars() === 1\"\n (prev)=\"prevMonth()\"\n (next)=\"nextMonth()\"\n />\n\n <div class=\"sui-datepicker__day-labels\" role=\"row\">\n @for (label of dayLabels; track label) {\n <sui-day-label [label]=\"label\" />\n }\n </div>\n\n <div class=\"sui-datepicker__day-grid\" role=\"grid\">\n @for (row of leftRows(); track trackRow($index, row)) {\n <div class=\"sui-datepicker__day-row\" role=\"row\">\n @if (row.hasBand) {\n <span\n class=\"sui-datepicker__range-band\"\n [class.sui-datepicker__range-band--round-left]=\"row.bandRoundLeft\"\n [class.sui-datepicker__range-band--round-right]=\"row.bandRoundRight\"\n [style.--sui-band-start]=\"row.bandStart\"\n [style.--sui-band-end]=\"row.bandEnd\"\n aria-hidden=\"true\"\n ></span>\n }\n @for (cell of row.cells; track trackCell($index, cell)) {\n <sui-day-cell\n [day]=\"cell.day\"\n [type]=\"mode() === 'range' ? 'range' : 'basic'\"\n [selected]=\"mode() === 'date' && cell.selected\"\n [rangePosition]=\"cellRangePosition(cell)\"\n [marked]=\"cell.marked\"\n [today]=\"cell.isToday\"\n [disabled]=\"cell.disabled\"\n [outOfMonth]=\"!cell.inCurrentMonth\"\n (clicked)=\"selectCell(cell)\"\n />\n }\n </div>\n }\n </div>\n </div>\n\n <!-- Calendario derecho \u2014 solo en mode=range con effectiveCalendars=2 (desktop) -->\n @if (mode() === 'range' && effectiveCalendars() === 2) {\n <div class=\"sui-datepicker__calendar sui-datepicker__calendar--right\">\n <sui-date-selector\n [label]=\"rightMonthLabel()\"\n [leftIcon]=\"false\"\n [rightIcon]=\"true\"\n (next)=\"nextMonth()\"\n />\n\n <div class=\"sui-datepicker__day-labels\" role=\"row\">\n @for (label of dayLabels; track label) {\n <sui-day-label [label]=\"label\" />\n }\n </div>\n\n <div class=\"sui-datepicker__day-grid\" role=\"grid\">\n @for (row of rightRows(); track trackRow($index, row)) {\n <div class=\"sui-datepicker__day-row\" role=\"row\">\n @if (row.hasBand) {\n <span\n class=\"sui-datepicker__range-band\"\n [class.sui-datepicker__range-band--round-left]=\"row.bandRoundLeft\"\n [class.sui-datepicker__range-band--round-right]=\"row.bandRoundRight\"\n [style.--sui-band-start]=\"row.bandStart\"\n [style.--sui-band-end]=\"row.bandEnd\"\n aria-hidden=\"true\"\n ></span>\n }\n @for (cell of row.cells; track trackCell($index, cell)) {\n <sui-day-cell\n [day]=\"cell.day\"\n [type]=\"mode() === 'range' ? 'range' : 'basic'\"\n [selected]=\"false\"\n [rangePosition]=\"cellRangePosition(cell)\"\n [marked]=\"cell.marked\"\n [today]=\"cell.isToday\"\n [disabled]=\"cell.disabled\"\n [outOfMonth]=\"!cell.inCurrentMonth\"\n (clicked)=\"selectCell(cell)\"\n />\n }\n </div>\n }\n </div>\n </div>\n }\n </div>\n\n <!-- Footer con Cancel + Apply (Range siempre lo muestra) -->\n @if (showFooter() || mode() === 'range') {\n <footer class=\"sui-datepicker__footer\">\n @if (mode() === 'range' && rangeHint(); as hint) {\n <span class=\"sui-datepicker__range-hint\">{{ hint }}</span>\n }\n <div class=\"sui-datepicker__footer-actions\">\n <sui-button variant=\"stroke\" color=\"neutral\" size=\"small\" type=\"button\" (click)=\"cancel()\">\n Cancel\n </sui-button>\n <sui-button variant=\"filled\" color=\"primary\" size=\"small\" type=\"button\" (click)=\"apply()\">\n Apply\n </sui-button>\n </div>\n </footer>\n }\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;font-family:var(--sui-font-sans, var(--font-sans, sans-serif))}:host([data-sui-mode=range]){display:block}.sui-datepicker__trigger{display:inline-flex;align-items:center;gap:8px;width:100%;min-width:180px;height:40px;padding:0 12px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-10, 10px);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));cursor:pointer;outline:none;font:inherit;color:var(--sui-text-strong-950, #171717);transition:border-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}.sui-datepicker__trigger:hover:not(:disabled){border-color:var(--sui-stroke-sub-300, #d1d1d1)}.sui-datepicker__trigger:focus-visible:not(:disabled){border-color:var(--sui-stroke-strong-950, #171717);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px color-mix(in oklab,var(--sui-stroke-strong-950, #171717) 16%,transparent)}.sui-datepicker__trigger:disabled{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;border:none}.sui-datepicker__trigger-icon{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-datepicker__trigger-text{flex:1 1 auto;text-align:left;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-datepicker__trigger-text--placeholder{color:var(--sui-text-soft-400, #a3a3a3);font-weight:400}.sui-datepicker__trigger-chevron{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-datepicker__panel{position:absolute;top:calc(100% + 8px);left:0;z-index:50;display:flex;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-20, 20px);box-shadow:var(--sui-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, .1019607843));overflow:hidden;animation:sui-datepicker-enter .16s cubic-bezier(.23,1,.32,1)}.sui-datepicker__panel--inline{position:static;animation:none}.sui-datepicker__panel--range{width:936px;max-width:calc(100vw - 32px)}:host([data-sui-calendars=\"1\"]) .sui-datepicker__panel--range{width:auto}@keyframes sui-datepicker-enter{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.sui-datepicker__presets{display:flex;flex-direction:column;gap:8px;width:200px;flex-shrink:0;padding:20px 16px 2px;border-right:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #fff);box-sizing:border-box}.sui-datepicker__content{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.sui-datepicker__calendars{display:flex;flex:1 1 auto}.sui-datepicker__calendar{flex:1 1 0;max-width:368px;padding:20px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:8px}.sui-datepicker__calendar--right{border-left:1px solid var(--sui-stroke-soft-200, #ebebeb)}.sui-datepicker__day-labels{display:flex;gap:8px;align-items:center;justify-content:space-between;width:328px;max-width:328px}.sui-datepicker__day-grid{display:flex;flex-direction:column;gap:8px;width:328px;max-width:328px}.sui-datepicker__day-row{position:relative;display:flex;gap:8px;align-items:center;justify-content:space-between;width:328px}.sui-datepicker__range-band{position:absolute;inset:0;background:var(--sui-primary-alpha-10, rgba(250, 115, 25, .1019607843));pointer-events:none;z-index:0}.sui-datepicker__range-band--round-left{left:calc(var(--sui-band-start) * var(--sui-day-step, 48px));border-top-left-radius:var(--sui-radius-8, 8px);border-bottom-left-radius:var(--sui-radius-8, 8px)}.sui-datepicker__range-band--round-right{right:calc((6 - var(--sui-band-end)) * var(--sui-day-step, 48px));border-top-right-radius:var(--sui-radius-8, 8px);border-bottom-right-radius:var(--sui-radius-8, 8px)}.sui-datepicker__day-row sui-day-cell{position:relative;z-index:1}.sui-datepicker__footer{display:flex;align-items:center;gap:16px;padding:16px;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb)}:host([data-sui-mode=range]) .sui-datepicker__footer{padding:16px 16px 16px 24px}.sui-datepicker__range-hint{flex:1 0 0;min-width:0;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-datepicker__footer-actions{display:flex;gap:16px;align-items:center}:host(:not([data-sui-mode=range])) .sui-datepicker__footer-actions{flex:1 0 0;min-width:0}:host(:not([data-sui-mode=range])) .sui-datepicker__footer-actions sui-button{flex:1 0 0;min-width:0}:host([data-sui-mode=range]) .sui-datepicker__footer-actions{flex-shrink:0;margin-left:auto}:host([data-sui-mode=range]) .sui-datepicker__footer-actions sui-button{width:108px}@media(max-width:767px){.sui-datepicker__panel--range{width:calc(100vw - 32px);flex-direction:column}.sui-datepicker__presets{flex-direction:row;overflow-x:auto;width:100%;border-right:none;border-bottom:1px solid var(--sui-stroke-soft-200, #ebebeb);padding:12px 16px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}.sui-datepicker__presets sui-period-range{width:auto;flex-shrink:0;scroll-snap-align:start}.sui-datepicker__calendar{padding-left:12px;padding-right:12px;max-width:none}.sui-datepicker__day-labels,.sui-datepicker__day-grid,.sui-datepicker__day-row{--sui-day-step: 44px;width:304px;max-width:304px;gap:4px}}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiButton, selector: "sui-button", inputs: ["variant", "color", "size", "onlyIcon", "pill", "disabled", "leftIcon", "rightIcon", "type"] }, { kind: "component", type: SuiDayLabel, selector: "sui-day-label", inputs: ["label"] }, { kind: "component", type: SuiDayCell, selector: "sui-day-cell", inputs: ["day", "type", "rangePosition", "selected", "marked", "today", "disabled", "outOfMonth", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: SuiDateSelector, selector: "sui-date-selector", inputs: ["label", "leftIcon", "rightIcon", "disabled"], outputs: ["prev", "next"] }, { kind: "component", type: SuiPeriodRange, selector: "sui-period-range", inputs: ["label", "active", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6676
6680
|
}
|
|
6677
6681
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiDatepicker, decorators: [{
|
|
6678
6682
|
type: Component,
|
|
@@ -6912,7 +6916,7 @@ class SuiDrawerFooter {
|
|
|
6912
6916
|
this.linkClick.emit(event);
|
|
6913
6917
|
}
|
|
6914
6918
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiDrawerFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6915
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiDrawerFooter, isStandalone: true, selector: "sui-drawer-footer", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, primaryLabel: { classPropertyName: "primaryLabel", publicName: "primaryLabel", isSignal: true, isRequired: false, transformFunction: null }, secondaryLabel: { classPropertyName: "secondaryLabel", publicName: "secondaryLabel", isSignal: true, isRequired: false, transformFunction: null }, primaryDisabled: { classPropertyName: "primaryDisabled", publicName: "primaryDisabled", isSignal: true, isRequired: false, transformFunction: null }, secondaryDisabled: { classPropertyName: "secondaryDisabled", publicName: "secondaryDisabled", isSignal: true, isRequired: false, transformFunction: null }, checkboxLabel: { classPropertyName: "checkboxLabel", publicName: "checkboxLabel", isSignal: true, isRequired: false, transformFunction: null }, checkboxActive: { classPropertyName: "checkboxActive", publicName: "checkboxActive", isSignal: true, isRequired: false, transformFunction: null }, toggleLabel: { classPropertyName: "toggleLabel", publicName: "toggleLabel", isSignal: true, isRequired: false, transformFunction: null }, toggleActive: { classPropertyName: "toggleActive", publicName: "toggleActive", isSignal: true, isRequired: false, transformFunction: null }, stepperCurrent: { classPropertyName: "stepperCurrent", publicName: "stepperCurrent", isSignal: true, isRequired: false, transformFunction: null }, stepperTotal: { classPropertyName: "stepperTotal", publicName: "stepperTotal", isSignal: true, isRequired: false, transformFunction: null }, linkLabel: { classPropertyName: "linkLabel", publicName: "linkLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkboxActive: "checkboxActiveChange", toggleActive: "toggleActiveChange", primaryClick: "primaryClick", secondaryClick: "secondaryClick", linkClick: "linkClick" }, host: { properties: { "attr.data-sui-type": "type()" } }, ngImport: i0, template: "<!-- Slot izquierdo (lo que va antes de los buttons) \u2014 var\u00EDa por type -->\n@switch (type()) {\n @case ('checkbox') {\n <label class=\"sui-drawer-footer__inline\">\n <sui-checkbox\n [checked]=\"checkboxActive()\"\n (checkedChange)=\"checkboxActive.set($event)\"\n />\n <span class=\"sui-drawer-footer__inline-label\">{{ checkboxLabel() }}</span>\n </label>\n }\n\n @case ('toggle') {\n <label class=\"sui-drawer-footer__inline\">\n <sui-switch\n [checked]=\"toggleActive()\"\n (checkedChange)=\"toggleActive.set($event)\"\n />\n <span class=\"sui-drawer-footer__inline-label\">{{ toggleLabel() }}</span>\n </label>\n }\n\n @case ('stepper') {\n <div class=\"sui-drawer-footer__stepper\" role=\"progressbar\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"stepperTotal()\"\n [attr.aria-valuenow]=\"stepperCurrent() + 1\">\n @for (i of stepperIndexes; track i) {\n <span\n class=\"sui-drawer-footer__dot\"\n [class.sui-drawer-footer__dot--active]=\"i === stepperCurrent()\"\n aria-hidden=\"true\"\n ></span>\n }\n </div>\n }\n\n @case ('link-button') {\n @if (linkLabel()) {\n <sui-link-button\n variant=\"gray\"\n size=\"medium\"\n [underline]=\"true\"\n (clicked)=\"onLink($any($event))\"\n >{{ linkLabel() }}</sui-link-button>\n }\n }\n}\n\n<!-- Actions block (buttons) \u2014 siempre presente. En stretch/basic ocupa todo el\n row (con primary y secondary), en otros types va alineado a la derecha\n con flex-1. -->\n<div class=\"sui-drawer-footer__actions\">\n @if (secondaryLabel()) {\n <sui-button\n class=\"sui-drawer-footer__btn sui-drawer-footer__btn--secondary\"\n variant=\"stroke\"\n color=\"neutral\"\n [disabled]=\"secondaryDisabled()\"\n (clicked)=\"onSecondary($event)\"\n >{{ secondaryLabel() }}</sui-button>\n }\n <sui-button\n class=\"sui-drawer-footer__btn sui-drawer-footer__btn--primary\"\n variant=\"filled\"\n color=\"primary\"\n [disabled]=\"primaryDisabled()\"\n (clicked)=\"onPrimary($event)\"\n >{{ primaryLabel() }}</sui-button>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;width:100%;box-sizing:border-box;padding:19px 20px 20px;background:var(--sui-bg-white-0);border-top:1px solid var(--sui-stroke-soft-200);font-family:var(--sui-font-sans, \"Inter\", system-ui, sans-serif);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}:host([data-sui-type=checkbox]),:host([data-sui-type=toggle]),:host([data-sui-type=stepper]),:host([data-sui-type=link-button]){gap:16px}.sui-drawer-footer__inline{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-tap-highlight-color:transparent}.sui-drawer-footer__inline-label{font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950);white-space:nowrap}.sui-drawer-footer__stepper{flex-shrink:0;display:inline-flex;align-items:center;gap:10px}.sui-drawer-footer__dot{width:8px;height:8px;border-radius:var(--sui-radius-full);background:var(--sui-bg-soft-200);transition:background-color .15s ease}.sui-drawer-footer__dot--active{background:var(--sui-primary-base)}.sui-drawer-footer__actions{display:flex;align-items:center;gap:16px}:host([data-sui-type=basic]) .sui-drawer-footer__actions,:host([data-sui-type=checkbox]) .sui-drawer-footer__actions,:host([data-sui-type=toggle]) .sui-drawer-footer__actions,:host([data-sui-type=stepper]) .sui-drawer-footer__actions,:host([data-sui-type=link-button]) .sui-drawer-footer__actions{flex:1 0 0;min-width:0;justify-content:flex-end}:host([data-sui-type=stretch]) .sui-drawer-footer__actions{flex:1 0 0;min-width:0;justify-content:stretch}:host([data-sui-type=stretch]) .sui-drawer-footer__btn{flex:1 0 0;min-width:0}:host([data-sui-type=stretch]) .sui-drawer-footer__btn ::ng-deep button{width:100%}\n"], dependencies: [{ kind: "component", type: SuiButton, selector: "sui-button", inputs: ["variant", "color", "size", "onlyIcon", "disabled", "leftIcon", "rightIcon", "type"] }, { kind: "component", type: SuiCheckbox, selector: "sui-checkbox", inputs: ["size", "checked", "indeterminate", "disabled"], outputs: ["checkedChange"] }, { kind: "component", type: SuiSwitch, selector: "sui-switch", inputs: ["size", "checked", "disabled"], outputs: ["checkedChange"] }, { kind: "component", type: SuiLinkButton, selector: "sui-link-button", inputs: ["variant", "size", "underline", "disabled", "leftIcon", "rightIcon", "href", "target", "rel", "type", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6919
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiDrawerFooter, isStandalone: true, selector: "sui-drawer-footer", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, primaryLabel: { classPropertyName: "primaryLabel", publicName: "primaryLabel", isSignal: true, isRequired: false, transformFunction: null }, secondaryLabel: { classPropertyName: "secondaryLabel", publicName: "secondaryLabel", isSignal: true, isRequired: false, transformFunction: null }, primaryDisabled: { classPropertyName: "primaryDisabled", publicName: "primaryDisabled", isSignal: true, isRequired: false, transformFunction: null }, secondaryDisabled: { classPropertyName: "secondaryDisabled", publicName: "secondaryDisabled", isSignal: true, isRequired: false, transformFunction: null }, checkboxLabel: { classPropertyName: "checkboxLabel", publicName: "checkboxLabel", isSignal: true, isRequired: false, transformFunction: null }, checkboxActive: { classPropertyName: "checkboxActive", publicName: "checkboxActive", isSignal: true, isRequired: false, transformFunction: null }, toggleLabel: { classPropertyName: "toggleLabel", publicName: "toggleLabel", isSignal: true, isRequired: false, transformFunction: null }, toggleActive: { classPropertyName: "toggleActive", publicName: "toggleActive", isSignal: true, isRequired: false, transformFunction: null }, stepperCurrent: { classPropertyName: "stepperCurrent", publicName: "stepperCurrent", isSignal: true, isRequired: false, transformFunction: null }, stepperTotal: { classPropertyName: "stepperTotal", publicName: "stepperTotal", isSignal: true, isRequired: false, transformFunction: null }, linkLabel: { classPropertyName: "linkLabel", publicName: "linkLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkboxActive: "checkboxActiveChange", toggleActive: "toggleActiveChange", primaryClick: "primaryClick", secondaryClick: "secondaryClick", linkClick: "linkClick" }, host: { properties: { "attr.data-sui-type": "type()" } }, ngImport: i0, template: "<!-- Slot izquierdo (lo que va antes de los buttons) \u2014 var\u00EDa por type -->\n@switch (type()) {\n @case ('checkbox') {\n <label class=\"sui-drawer-footer__inline\">\n <sui-checkbox\n [checked]=\"checkboxActive()\"\n (checkedChange)=\"checkboxActive.set($event)\"\n />\n <span class=\"sui-drawer-footer__inline-label\">{{ checkboxLabel() }}</span>\n </label>\n }\n\n @case ('toggle') {\n <label class=\"sui-drawer-footer__inline\">\n <sui-switch\n [checked]=\"toggleActive()\"\n (checkedChange)=\"toggleActive.set($event)\"\n />\n <span class=\"sui-drawer-footer__inline-label\">{{ toggleLabel() }}</span>\n </label>\n }\n\n @case ('stepper') {\n <div class=\"sui-drawer-footer__stepper\" role=\"progressbar\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"stepperTotal()\"\n [attr.aria-valuenow]=\"stepperCurrent() + 1\">\n @for (i of stepperIndexes; track i) {\n <span\n class=\"sui-drawer-footer__dot\"\n [class.sui-drawer-footer__dot--active]=\"i === stepperCurrent()\"\n aria-hidden=\"true\"\n ></span>\n }\n </div>\n }\n\n @case ('link-button') {\n @if (linkLabel()) {\n <sui-link-button\n variant=\"gray\"\n size=\"medium\"\n [underline]=\"true\"\n (clicked)=\"onLink($any($event))\"\n >{{ linkLabel() }}</sui-link-button>\n }\n }\n}\n\n<!-- Actions block (buttons) \u2014 siempre presente. En stretch/basic ocupa todo el\n row (con primary y secondary), en otros types va alineado a la derecha\n con flex-1. -->\n<div class=\"sui-drawer-footer__actions\">\n @if (secondaryLabel()) {\n <sui-button\n class=\"sui-drawer-footer__btn sui-drawer-footer__btn--secondary\"\n variant=\"stroke\"\n color=\"neutral\"\n [disabled]=\"secondaryDisabled()\"\n (clicked)=\"onSecondary($event)\"\n >{{ secondaryLabel() }}</sui-button>\n }\n <sui-button\n class=\"sui-drawer-footer__btn sui-drawer-footer__btn--primary\"\n variant=\"filled\"\n color=\"primary\"\n [disabled]=\"primaryDisabled()\"\n (clicked)=\"onPrimary($event)\"\n >{{ primaryLabel() }}</sui-button>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;width:100%;box-sizing:border-box;padding:19px 20px 20px;background:var(--sui-bg-white-0);border-top:1px solid var(--sui-stroke-soft-200);font-family:var(--sui-font-sans, \"Inter\", system-ui, sans-serif);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}:host([data-sui-type=checkbox]),:host([data-sui-type=toggle]),:host([data-sui-type=stepper]),:host([data-sui-type=link-button]){gap:16px}.sui-drawer-footer__inline{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-tap-highlight-color:transparent}.sui-drawer-footer__inline-label{font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950);white-space:nowrap}.sui-drawer-footer__stepper{flex-shrink:0;display:inline-flex;align-items:center;gap:10px}.sui-drawer-footer__dot{width:8px;height:8px;border-radius:var(--sui-radius-full);background:var(--sui-bg-soft-200);transition:background-color .15s ease}.sui-drawer-footer__dot--active{background:var(--sui-primary-base)}.sui-drawer-footer__actions{display:flex;align-items:center;gap:16px}:host([data-sui-type=basic]) .sui-drawer-footer__actions,:host([data-sui-type=checkbox]) .sui-drawer-footer__actions,:host([data-sui-type=toggle]) .sui-drawer-footer__actions,:host([data-sui-type=stepper]) .sui-drawer-footer__actions,:host([data-sui-type=link-button]) .sui-drawer-footer__actions{flex:1 0 0;min-width:0;justify-content:flex-end}:host([data-sui-type=stretch]) .sui-drawer-footer__actions{flex:1 0 0;min-width:0;justify-content:stretch}:host([data-sui-type=stretch]) .sui-drawer-footer__btn{flex:1 0 0;min-width:0}:host([data-sui-type=stretch]) .sui-drawer-footer__btn ::ng-deep button{width:100%}\n"], dependencies: [{ kind: "component", type: SuiButton, selector: "sui-button", inputs: ["variant", "color", "size", "onlyIcon", "pill", "disabled", "leftIcon", "rightIcon", "type"] }, { kind: "component", type: SuiCheckbox, selector: "sui-checkbox", inputs: ["size", "checked", "indeterminate", "disabled"], outputs: ["checkedChange"] }, { kind: "component", type: SuiSwitch, selector: "sui-switch", inputs: ["size", "checked", "disabled"], outputs: ["checkedChange"] }, { kind: "component", type: SuiLinkButton, selector: "sui-link-button", inputs: ["variant", "size", "underline", "disabled", "leftIcon", "rightIcon", "href", "target", "rel", "type", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6916
6920
|
}
|
|
6917
6921
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiDrawerFooter, decorators: [{
|
|
6918
6922
|
type: Component,
|
|
@@ -7190,7 +7194,7 @@ class SuiEmptyState {
|
|
|
7190
7194
|
return override.length > 0 ? override : EMPTY_STATE_FOX_EMOJI;
|
|
7191
7195
|
}, ...(ngDevMode ? [{ debugName: "resolvedEmojiSrc" }] : /* istanbul ignore next */ []));
|
|
7192
7196
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiEmptyState, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7193
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiEmptyState, isStandalone: true, selector: "sui-empty-state", inputs: { emoji: { classPropertyName: "emoji", publicName: "emoji", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, actionRoute: { classPropertyName: "actionRoute", publicName: "actionRoute", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClicked: "actionClicked" }, host: { properties: { "attr.title": "null" } }, ngImport: i0, template: "<div class=\"sui-empty-state__illustration\">\n <sui-emoji\n class=\"sui-empty-state__emoji\"\n size=\"full\"\n [src]=\"resolvedEmojiSrc()\"\n [ariaLabel]=\"title()\"\n />\n</div>\n\n<h3 class=\"sui-empty-state__title\">{{ title() }}</h3>\n\n@if (subtitle()) {\n <p class=\"sui-empty-state__subtitle\">{{ subtitle() }}</p>\n}\n\n@if (actionLabel()) {\n @if (actionRoute()) {\n <sui-button variant=\"filled\" color=\"primary\" size=\"medium\" [routerLink]=\"actionRoute()\">\n {{ actionLabel() }}\n </sui-button>\n } @else {\n <sui-button variant=\"filled\" color=\"primary\" size=\"medium\" type=\"button\" (click)=\"actionClicked.emit()\">\n {{ actionLabel() }}\n </sui-button>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;max-width:460px;margin:0 auto;text-align:center;font-family:var(--sui-font-sans, var(--font-sans, sans-serif))}.sui-empty-state__illustration{position:relative;width:120px;height:120px;margin-bottom:24px}.sui-empty-state__emoji{width:120px;height:120px}.sui-empty-state__title{margin:0 0 8px;font-size:18px;font-weight:600;line-height:24px;letter-spacing:-.015em;color:var(--sui-text-strong-950, #171717)}.sui-empty-state__subtitle{margin:0 0 24px;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-sub-600, #5c5c5c);max-width:320px}@media(max-width:767px){:host{padding:32px 20px}}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: SuiButton, selector: "sui-button", inputs: ["variant", "color", "size", "onlyIcon", "disabled", "leftIcon", "rightIcon", "type"] }, { kind: "component", type: SuiEmoji, selector: "sui-emoji", inputs: ["name", "src", "size", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7197
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiEmptyState, isStandalone: true, selector: "sui-empty-state", inputs: { emoji: { classPropertyName: "emoji", publicName: "emoji", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, actionRoute: { classPropertyName: "actionRoute", publicName: "actionRoute", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClicked: "actionClicked" }, host: { properties: { "attr.title": "null" } }, ngImport: i0, template: "<div class=\"sui-empty-state__illustration\">\n <sui-emoji\n class=\"sui-empty-state__emoji\"\n size=\"full\"\n [src]=\"resolvedEmojiSrc()\"\n [ariaLabel]=\"title()\"\n />\n</div>\n\n<h3 class=\"sui-empty-state__title\">{{ title() }}</h3>\n\n@if (subtitle()) {\n <p class=\"sui-empty-state__subtitle\">{{ subtitle() }}</p>\n}\n\n@if (actionLabel()) {\n @if (actionRoute()) {\n <sui-button variant=\"filled\" color=\"primary\" size=\"medium\" [routerLink]=\"actionRoute()\">\n {{ actionLabel() }}\n </sui-button>\n } @else {\n <sui-button variant=\"filled\" color=\"primary\" size=\"medium\" type=\"button\" (click)=\"actionClicked.emit()\">\n {{ actionLabel() }}\n </sui-button>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;max-width:460px;margin:0 auto;text-align:center;font-family:var(--sui-font-sans, var(--font-sans, sans-serif))}.sui-empty-state__illustration{position:relative;width:120px;height:120px;margin-bottom:24px}.sui-empty-state__emoji{width:120px;height:120px}.sui-empty-state__title{margin:0 0 8px;font-size:18px;font-weight:600;line-height:24px;letter-spacing:-.015em;color:var(--sui-text-strong-950, #171717)}.sui-empty-state__subtitle{margin:0 0 24px;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-sub-600, #5c5c5c);max-width:320px}@media(max-width:767px){:host{padding:32px 20px}}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: SuiButton, selector: "sui-button", inputs: ["variant", "color", "size", "onlyIcon", "pill", "disabled", "leftIcon", "rightIcon", "type"] }, { kind: "component", type: SuiEmoji, selector: "sui-emoji", inputs: ["name", "src", "size", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7194
7198
|
}
|
|
7195
7199
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiEmptyState, decorators: [{
|
|
7196
7200
|
type: Component,
|
|
@@ -7890,7 +7894,7 @@ class SuiFileUpload {
|
|
|
7890
7894
|
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
|
7891
7895
|
}
|
|
7892
7896
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiFileUpload, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7893
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiFileUpload, isStandalone: true, selector: "sui-file-upload", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, browseLabel: { classPropertyName: "browseLabel", publicName: "browseLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesSelected: "filesSelected", errorEvent: "errorEvent" }, host: { listeners: { "click": "onClick()", "keydown.enter": "onClick()", "keydown.space": "onClick(); $event.preventDefault()", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "attr.title": "null", "attr.data-sui-size": "size()", "attr.data-sui-state": "state()", "attr.data-sui-disabled": "disabled() ? \"\" : null", "attr.role": "\"button\"", "attr.tabindex": "disabled() ? -1 : 0" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Icon: upload-cloud-2-line 24px, sin contenedor circular (Figma node 450:9404). -->\n<sui-icon class=\"sui-file-upload__icon\" name=\"upload-cloud-2-line\" [size]=\"iconSize()\" aria-hidden=\"true\" />\n\n<div class=\"sui-file-upload__text\">\n <p class=\"sui-file-upload__title\">{{ resolvedTitle() }}</p>\n <p class=\"sui-file-upload__subtitle\">{{ resolvedSubtitle() }}</p>\n</div>\n\n<!-- Browse File button (Figma node 450:9384) \u2014 stroke/neutral. -->\n<sui-button\n class=\"sui-file-upload__browse\"\n variant=\"stroke\"\n color=\"neutral\"\n size=\"xsmall\"\n [disabled]=\"disabled()\"\n (click)=\"onBrowseClick($event)\">\n {{ browseLabel() }}\n</sui-button>\n\n@if (resolvedErrorMessage()) {\n <p class=\"sui-file-upload__error\">{{ resolvedErrorMessage() }}</p>\n}\n\n<input\n #fileInput\n type=\"file\"\n class=\"sui-file-upload__input\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [disabled]=\"disabled()\"\n (change)=\"onInputChange($event)\" />\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;width:400px;max-width:100%;box-sizing:border-box;text-align:center;font-family:var(--sui-font-sans, var(--font-sans, sans-serif));border:1px dashed var(--sui-stroke-sub-300, #d1d1d1);border-radius:var(--sui-radius-12, 12px);background:var(--sui-bg-white-0, #fff);cursor:pointer;transition:border-color var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)),background var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1))}:host([data-sui-size=small]){padding:24px;gap:16px}:host([data-sui-size=medium]){padding:32px}:host([data-sui-size=large]){padding:40px;gap:24px}:host([data-sui-size=xlarge]){padding:48px;gap:28px}:host(:hover:not([data-sui-state=disabled])){background:var(--sui-bg-weak-50, #f7f7f7)}:host(:focus-visible){outline:none;border-color:var(--sui-stroke-strong-950, #171717);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px var(--sui-slate-alpha-16, rgba(153, 160, 174, .1607843137))}:host([data-sui-state=dragover]){border-color:var(--sui-primary-base, #fa7319);background:var(--sui-primary-alpha-10, rgba(250, 115, 25, .1019607843))}:host([data-sui-state=error]){border-color:var(--sui-state-error-base, #fb3748);background:var(--sui-state-error-lighter, #ffebec)}:host([data-sui-state=disabled]){cursor:not-allowed;opacity:.5;background:var(--sui-bg-weak-50, #f7f7f7)}.sui-file-upload__icon{color:var(--sui-icon-sub-600, #5c5c5c);flex-shrink:0}:host([data-sui-state=dragover]) .sui-file-upload__icon{color:var(--sui-primary-base, #fa7319)}:host([data-sui-state=error]) .sui-file-upload__icon{color:var(--sui-state-error-base, #fb3748)}.sui-file-upload__text{display:flex;flex-direction:column;gap:6px;align-items:center;width:100%}.sui-file-upload__title{margin:0;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-strong-950, #171717);word-break:break-word}.sui-file-upload__subtitle{margin:0;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600, #5c5c5c);word-break:break-word}.sui-file-upload__browse{flex-shrink:0}:host .sui-file-upload__browse[data-sui-size=xsmall]{padding:6px 8px}.sui-file-upload__error{margin:-8px 0 0;font-size:12px;font-weight:400;line-height:16px;color:var(--sui-state-error-base, #fb3748)}.sui-file-upload__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "component", type: SuiButton, selector: "sui-button", inputs: ["variant", "color", "size", "onlyIcon", "disabled", "leftIcon", "rightIcon", "type"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7897
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiFileUpload, isStandalone: true, selector: "sui-file-upload", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, browseLabel: { classPropertyName: "browseLabel", publicName: "browseLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesSelected: "filesSelected", errorEvent: "errorEvent" }, host: { listeners: { "click": "onClick()", "keydown.enter": "onClick()", "keydown.space": "onClick(); $event.preventDefault()", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "attr.title": "null", "attr.data-sui-size": "size()", "attr.data-sui-state": "state()", "attr.data-sui-disabled": "disabled() ? \"\" : null", "attr.role": "\"button\"", "attr.tabindex": "disabled() ? -1 : 0" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Icon: upload-cloud-2-line 24px, sin contenedor circular (Figma node 450:9404). -->\n<sui-icon class=\"sui-file-upload__icon\" name=\"upload-cloud-2-line\" [size]=\"iconSize()\" aria-hidden=\"true\" />\n\n<div class=\"sui-file-upload__text\">\n <p class=\"sui-file-upload__title\">{{ resolvedTitle() }}</p>\n <p class=\"sui-file-upload__subtitle\">{{ resolvedSubtitle() }}</p>\n</div>\n\n<!-- Browse File button (Figma node 450:9384) \u2014 stroke/neutral. -->\n<sui-button\n class=\"sui-file-upload__browse\"\n variant=\"stroke\"\n color=\"neutral\"\n size=\"xsmall\"\n [disabled]=\"disabled()\"\n (click)=\"onBrowseClick($event)\">\n {{ browseLabel() }}\n</sui-button>\n\n@if (resolvedErrorMessage()) {\n <p class=\"sui-file-upload__error\">{{ resolvedErrorMessage() }}</p>\n}\n\n<input\n #fileInput\n type=\"file\"\n class=\"sui-file-upload__input\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [disabled]=\"disabled()\"\n (change)=\"onInputChange($event)\" />\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;width:400px;max-width:100%;box-sizing:border-box;text-align:center;font-family:var(--sui-font-sans, var(--font-sans, sans-serif));border:1px dashed var(--sui-stroke-sub-300, #d1d1d1);border-radius:var(--sui-radius-12, 12px);background:var(--sui-bg-white-0, #fff);cursor:pointer;transition:border-color var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)),background var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1))}:host([data-sui-size=small]){padding:24px;gap:16px}:host([data-sui-size=medium]){padding:32px}:host([data-sui-size=large]){padding:40px;gap:24px}:host([data-sui-size=xlarge]){padding:48px;gap:28px}:host(:hover:not([data-sui-state=disabled])){background:var(--sui-bg-weak-50, #f7f7f7)}:host(:focus-visible){outline:none;border-color:var(--sui-stroke-strong-950, #171717);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px var(--sui-slate-alpha-16, rgba(153, 160, 174, .1607843137))}:host([data-sui-state=dragover]){border-color:var(--sui-primary-base, #fa7319);background:var(--sui-primary-alpha-10, rgba(250, 115, 25, .1019607843))}:host([data-sui-state=error]){border-color:var(--sui-state-error-base, #fb3748);background:var(--sui-state-error-lighter, #ffebec)}:host([data-sui-state=disabled]){cursor:not-allowed;opacity:.5;background:var(--sui-bg-weak-50, #f7f7f7)}.sui-file-upload__icon{color:var(--sui-icon-sub-600, #5c5c5c);flex-shrink:0}:host([data-sui-state=dragover]) .sui-file-upload__icon{color:var(--sui-primary-base, #fa7319)}:host([data-sui-state=error]) .sui-file-upload__icon{color:var(--sui-state-error-base, #fb3748)}.sui-file-upload__text{display:flex;flex-direction:column;gap:6px;align-items:center;width:100%}.sui-file-upload__title{margin:0;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-strong-950, #171717);word-break:break-word}.sui-file-upload__subtitle{margin:0;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600, #5c5c5c);word-break:break-word}.sui-file-upload__browse{flex-shrink:0}:host .sui-file-upload__browse[data-sui-size=xsmall]{padding:6px 8px}.sui-file-upload__error{margin:-8px 0 0;font-size:12px;font-weight:400;line-height:16px;color:var(--sui-state-error-base, #fb3748)}.sui-file-upload__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "component", type: SuiButton, selector: "sui-button", inputs: ["variant", "color", "size", "onlyIcon", "pill", "disabled", "leftIcon", "rightIcon", "type"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7894
7898
|
}
|
|
7895
7899
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiFileUpload, decorators: [{
|
|
7896
7900
|
type: Component,
|
|
@@ -8157,7 +8161,7 @@ class SuiFilterPanelFooter {
|
|
|
8157
8161
|
clear = output();
|
|
8158
8162
|
apply = output();
|
|
8159
8163
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiFilterPanelFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8160
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: SuiFilterPanelFooter, isStandalone: true, selector: "sui-filter-panel-footer", inputs: { clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, applyLabel: { classPropertyName: "applyLabel", publicName: "applyLabel", isSignal: true, isRequired: false, transformFunction: null }, clearDisabled: { classPropertyName: "clearDisabled", publicName: "clearDisabled", isSignal: true, isRequired: false, transformFunction: null }, applyDisabled: { classPropertyName: "applyDisabled", publicName: "applyDisabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clear: "clear", apply: "apply" }, ngImport: i0, template: "<sui-button\n class=\"sui-filter-panel-footer__btn\"\n variant=\"stroke\"\n color=\"neutral\"\n [size]=\"size()\"\n [disabled]=\"clearDisabled()\"\n (click)=\"!clearDisabled() && clear.emit()\"\n>{{ clearLabel() }}</sui-button>\n<sui-button\n class=\"sui-filter-panel-footer__btn\"\n variant=\"filled\"\n color=\"primary\"\n [size]=\"size()\"\n [disabled]=\"applyDisabled()\"\n (click)=\"!applyDisabled() && apply.emit()\"\n>{{ applyLabel() }}</sui-button>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:16px;width:100%;padding:16px 20px;border-top:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);overflow:hidden;box-sizing:border-box}.sui-filter-panel-footer__btn{flex:1 1 0;display:flex!important;justify-content:center}\n"], dependencies: [{ kind: "component", type: SuiButton, selector: "sui-button", inputs: ["variant", "color", "size", "onlyIcon", "disabled", "leftIcon", "rightIcon", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8164
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: SuiFilterPanelFooter, isStandalone: true, selector: "sui-filter-panel-footer", inputs: { clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, applyLabel: { classPropertyName: "applyLabel", publicName: "applyLabel", isSignal: true, isRequired: false, transformFunction: null }, clearDisabled: { classPropertyName: "clearDisabled", publicName: "clearDisabled", isSignal: true, isRequired: false, transformFunction: null }, applyDisabled: { classPropertyName: "applyDisabled", publicName: "applyDisabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clear: "clear", apply: "apply" }, ngImport: i0, template: "<sui-button\n class=\"sui-filter-panel-footer__btn\"\n variant=\"stroke\"\n color=\"neutral\"\n [size]=\"size()\"\n [disabled]=\"clearDisabled()\"\n (click)=\"!clearDisabled() && clear.emit()\"\n>{{ clearLabel() }}</sui-button>\n<sui-button\n class=\"sui-filter-panel-footer__btn\"\n variant=\"filled\"\n color=\"primary\"\n [size]=\"size()\"\n [disabled]=\"applyDisabled()\"\n (click)=\"!applyDisabled() && apply.emit()\"\n>{{ applyLabel() }}</sui-button>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:16px;width:100%;padding:16px 20px;border-top:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);overflow:hidden;box-sizing:border-box}.sui-filter-panel-footer__btn{flex:1 1 0;display:flex!important;justify-content:center}\n"], dependencies: [{ kind: "component", type: SuiButton, selector: "sui-button", inputs: ["variant", "color", "size", "onlyIcon", "pill", "disabled", "leftIcon", "rightIcon", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8161
8165
|
}
|
|
8162
8166
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiFilterPanelFooter, decorators: [{
|
|
8163
8167
|
type: Component,
|
|
@@ -8348,7 +8352,7 @@ class SuiImageUploadProfile {
|
|
|
8348
8352
|
useExisting: forwardRef(() => SuiImageUploadProfile),
|
|
8349
8353
|
multi: true,
|
|
8350
8354
|
},
|
|
8351
|
-
], ngImport: i0, template: "<!--\n Image Upload Profile \u2014 SUI 2.0 (Figma 452:653).\n Avatar/Company circle + Profile Content (texto + acciones).\n Avatar size: 3xl(64) vertical / 2xl(56) horizontal \u2014 v\u00EDa avatarSize().\n Company \u2192 src = companyLogoSrc (slot `pickCompany`); empty \u2192 glyph edificios.\n Avatar \u2192 src = imageUrl/form value; empty \u2192 silueta humana default.\n Texto SOLO en Vertical (showText()) \u2014 Horizontal es solo botones, en ambos states.\n-->\n<sui-avatar\n class=\"sui-iup__avatar\"\n [size]=\"avatarSize()\"\n color=\"gray\"\n [src]=\"avatarSrc()\"\n [icon]=\"placeholderIcon()\"\n [alt]=\"title()\"\n/>\n\n<div class=\"sui-iup__content\">\n @if (showText()) {\n <div class=\"sui-iup__text\">\n <span class=\"sui-iup__title\">{{ title() }}</span>\n <span class=\"sui-iup__subtitle\">{{ subtitle() }}</span>\n </div>\n }\n\n @if (state() === 'empty') {\n <div class=\"sui-iup__actions\">\n <sui-button\n variant=\"stroke\"\n color=\"neutral\"\n size=\"xsmall\"\n [disabled]=\"isDisabled()\"\n (click)=\"onUpload()\"\n >\n {{ uploadLabel() }}\n </sui-button>\n </div>\n } @else {\n <div class=\"sui-iup__actions\">\n <sui-button\n variant=\"stroke\"\n color=\"error\"\n size=\"xsmall\"\n [disabled]=\"isDisabled()\"\n (click)=\"onRemove()\"\n >\n {{ removeLabel() }}\n </sui-button>\n <sui-button\n variant=\"stroke\"\n color=\"neutral\"\n size=\"xsmall\"\n [disabled]=\"isDisabled()\"\n (click)=\"onChange()\"\n >\n {{ changeLabel() }}\n </sui-button>\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:flex-start;gap:20px}:host([data-sui-alignment=horizontal]){align-items:center}:host([data-sui-disabled]) .sui-iup__avatar{opacity:.5}:host([data-sui-disabled]){cursor:not-allowed}.sui-iup__avatar{flex-shrink:0}.sui-iup__content{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0}.sui-iup__text{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.sui-iup__title{font-size:var(--sui-type-label-md-size);font-weight:var(--sui-type-label-md-weight);line-height:var(--sui-type-label-md-line);letter-spacing:var(--sui-type-label-md-spacing);color:var(--sui-text-strong-950);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-iup__subtitle{font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-sub-600);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-iup__actions{display:flex;flex-direction:row;align-items:center;gap:12px}\n"], dependencies: [{ kind: "component", type: SuiAvatar, selector: "sui-avatar", inputs: ["size", "src", "alt", "initials", "color", "status", "memojiSrc", "illustrationSrc", "icon", "companyLogoSrc", "topBadge", "bgColor"] }, { kind: "component", type: SuiButton, selector: "sui-button", inputs: ["variant", "color", "size", "onlyIcon", "disabled", "leftIcon", "rightIcon", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8355
|
+
], ngImport: i0, template: "<!--\n Image Upload Profile \u2014 SUI 2.0 (Figma 452:653).\n Avatar/Company circle + Profile Content (texto + acciones).\n Avatar size: 3xl(64) vertical / 2xl(56) horizontal \u2014 v\u00EDa avatarSize().\n Company \u2192 src = companyLogoSrc (slot `pickCompany`); empty \u2192 glyph edificios.\n Avatar \u2192 src = imageUrl/form value; empty \u2192 silueta humana default.\n Texto SOLO en Vertical (showText()) \u2014 Horizontal es solo botones, en ambos states.\n-->\n<sui-avatar\n class=\"sui-iup__avatar\"\n [size]=\"avatarSize()\"\n color=\"gray\"\n [src]=\"avatarSrc()\"\n [icon]=\"placeholderIcon()\"\n [alt]=\"title()\"\n/>\n\n<div class=\"sui-iup__content\">\n @if (showText()) {\n <div class=\"sui-iup__text\">\n <span class=\"sui-iup__title\">{{ title() }}</span>\n <span class=\"sui-iup__subtitle\">{{ subtitle() }}</span>\n </div>\n }\n\n @if (state() === 'empty') {\n <div class=\"sui-iup__actions\">\n <sui-button\n variant=\"stroke\"\n color=\"neutral\"\n size=\"xsmall\"\n [disabled]=\"isDisabled()\"\n (click)=\"onUpload()\"\n >\n {{ uploadLabel() }}\n </sui-button>\n </div>\n } @else {\n <div class=\"sui-iup__actions\">\n <sui-button\n variant=\"stroke\"\n color=\"error\"\n size=\"xsmall\"\n [disabled]=\"isDisabled()\"\n (click)=\"onRemove()\"\n >\n {{ removeLabel() }}\n </sui-button>\n <sui-button\n variant=\"stroke\"\n color=\"neutral\"\n size=\"xsmall\"\n [disabled]=\"isDisabled()\"\n (click)=\"onChange()\"\n >\n {{ changeLabel() }}\n </sui-button>\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:flex-start;gap:20px}:host([data-sui-alignment=horizontal]){align-items:center}:host([data-sui-disabled]) .sui-iup__avatar{opacity:.5}:host([data-sui-disabled]){cursor:not-allowed}.sui-iup__avatar{flex-shrink:0}.sui-iup__content{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0}.sui-iup__text{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.sui-iup__title{font-size:var(--sui-type-label-md-size);font-weight:var(--sui-type-label-md-weight);line-height:var(--sui-type-label-md-line);letter-spacing:var(--sui-type-label-md-spacing);color:var(--sui-text-strong-950);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-iup__subtitle{font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-sub-600);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-iup__actions{display:flex;flex-direction:row;align-items:center;gap:12px}\n"], dependencies: [{ kind: "component", type: SuiAvatar, selector: "sui-avatar", inputs: ["size", "src", "alt", "initials", "color", "status", "memojiSrc", "illustrationSrc", "icon", "companyLogoSrc", "topBadge", "bgColor"] }, { kind: "component", type: SuiButton, selector: "sui-button", inputs: ["variant", "color", "size", "onlyIcon", "pill", "disabled", "leftIcon", "rightIcon", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8352
8356
|
}
|
|
8353
8357
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiImageUploadProfile, decorators: [{
|
|
8354
8358
|
type: Component,
|
|
@@ -8588,7 +8592,7 @@ class SuiImageUpload {
|
|
|
8588
8592
|
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
|
8589
8593
|
}
|
|
8590
8594
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiImageUpload, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8591
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiImageUpload, isStandalone: true, selector: "sui-image-upload", inputs: { shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { src: "srcChange", imageSelected: "imageSelected", removed: "removed", editRequested: "editRequested", errorEvent: "errorEvent" }, host: { listeners: { "touchstart": "$event.currentTarget", "touchend": "$any($event.currentTarget).blur()", "click": "onHostClick()", "keydown.enter": "onHostClick()", "keydown.space": "onHostClick(); $event.preventDefault()", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "attr.title": "null", "attr.data-sui-shape": "shape()", "attr.data-sui-size": "size()", "attr.data-sui-state": "state()", "attr.data-sui-disabled": "disabled() ? \"\" : null", "attr.role": "\"button\"", "attr.tabindex": "disabled() ? -1 : 0", "style.width.px": "sizePx()", "style.height.px": "sizePx()" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["imgInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Estado: sin imagen (empty / dragover) -->\n@if (!hasSrc()) {\n <div class=\"sui-image-upload__empty\">\n <!-- Icono c\u00E1mara \u2014 sui-icon (DS), no SVG inline -->\n <div class=\"sui-image-upload__icon\">\n <sui-icon name=\"image-add-line\" [size]=\"iconSize()\" aria-hidden=\"true\" />\n </div>\n\n <div class=\"sui-image-upload__text\">\n <p class=\"sui-image-upload__title\">{{ resolvedTitle() }}</p>\n <p class=\"sui-image-upload__subtitle\">{{ resolvedSubtitle() }}</p>\n </div>\n\n @if (internalError()) {\n <p class=\"sui-image-upload__error\">{{ internalError() }}</p>\n }\n </div>\n}\n\n<!-- Estado: con imagen (filled) -->\n@if (hasSrc()) {\n <div class=\"sui-image-upload__preview\" [class.sui-image-upload__preview--editable]=\"editable()\">\n <img\n class=\"sui-image-upload__img\"\n [src]=\"src()\"\n alt=\"Preview\"\n draggable=\"false\" />\n\n @if (editable()) {\n <!-- Modo editable: controles de \u00EDcono en esquina (editar + tacho). -->\n <div class=\"sui-image-upload__controls\">\n <button\n type=\"button\"\n class=\"sui-image-upload__ctrl\"\n aria-label=\"Editar imagen\"\n [disabled]=\"disabled()\"\n (click)=\"onEditClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\">\n <sui-icon name=\"pencil-line\" [size]=\"16\" aria-hidden=\"true\" />\n </button>\n <button\n type=\"button\"\n class=\"sui-image-upload__ctrl sui-image-upload__ctrl--danger\"\n aria-label=\"Quitar imagen\"\n [disabled]=\"disabled()\"\n (click)=\"onRemoveClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\">\n <sui-icon name=\"delete-bin-line\" [size]=\"16\" aria-hidden=\"true\" />\n </button>\n </div>\n } @else {\n <!-- Overlay hover con icono lapiz (re-subir) -->\n <div class=\"sui-image-upload__overlay\" (click)=\"onChangeClick($event)\">\n <div class=\"sui-image-upload__overlay-icon\">\n <sui-icon name=\"pencil-line\" [size]=\"16\" aria-hidden=\"true\" />\n </div>\n </div>\n }\n </div>\n\n @if (!editable()) {\n <!-- Bot\u00F3n Quitar debajo del preview \u2014 sui-button stroke (DS), no <button> custom.\n Figma node 452:699 \"Remove\" = stroke error; aqu\u00ED usamos color=error para\n que el affordance de borrado sea consistente con el DS. -->\n <sui-button\n class=\"sui-image-upload__remove\"\n variant=\"stroke\"\n color=\"error\"\n size=\"2xsmall\"\n [disabled]=\"disabled()\"\n (click)=\"onRemoveClick($event)\">\n Quitar\n </sui-button>\n }\n}\n\n<!-- Input file oculto (siempre presente para el click) -->\n<input\n #imgInput\n type=\"file\"\n class=\"sui-image-upload__input\"\n accept=\"image/jpeg,image/png,image/webp,image/gif\"\n [disabled]=\"disabled()\"\n (change)=\"onInputChange($event)\" />\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--sui-font-sans, var(--font-sans, sans-serif));cursor:pointer;flex-shrink:0}:host([data-sui-disabled]){cursor:not-allowed;opacity:.5}.sui-image-upload__empty{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px dashed var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #fff);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(0, 0, 0, .06));text-align:center;padding:12px 8px;box-sizing:border-box;transition:border-color var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)),background var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1))}:host([data-sui-shape=circle]) .sui-image-upload__empty{border-radius:999px}:host([data-sui-shape=rect]) .sui-image-upload__empty{border-radius:var(--sui-radius-12, 12px)}:host(:hover:not([data-sui-disabled])) .sui-image-upload__empty{border-color:var(--sui-stroke-sub-300, #d1d1d1);background:var(--sui-bg-weak-50, #f7f7f7)}:host([data-sui-state=dragover]) .sui-image-upload__empty{border-color:var(--sui-primary-base, #fa7319);background:var(--sui-primary-alpha-10, rgba(250, 115, 25, .1019607843))}.sui-image-upload__icon{width:32px;height:32px;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);display:flex;align-items:center;justify-content:center;color:var(--sui-icon-sub-600, #5c5c5c);flex-shrink:0}:host([data-sui-size=xl]) .sui-image-upload__icon{width:40px;height:40px}:host([data-sui-state=dragover]) .sui-image-upload__icon{background:var(--sui-primary-alpha-16, rgba(250, 115, 25, .1607843137));color:var(--sui-primary-base, #fa7319)}.sui-image-upload__text{display:flex;flex-direction:column;gap:2px;align-items:center}.sui-image-upload__title{margin:0;font-size:12px;font-weight:500;line-height:16px;color:var(--sui-text-strong-950, #171717)}:host([data-sui-size=xl]) .sui-image-upload__title{font-size:13px;line-height:18px}.sui-image-upload__subtitle{margin:0;font-size:11px;font-weight:400;line-height:15px;color:var(--sui-text-sub-600, #5c5c5c)}:host([data-sui-size=sm]) .sui-image-upload__subtitle{display:none}:host([data-sui-size=xl]) .sui-image-upload__subtitle{font-size:12px;line-height:16px}.sui-image-upload__error{margin:2px 0 0;font-size:10px;line-height:14px;color:var(--sui-state-error-base, #fb3748);text-align:center}.sui-image-upload__preview{position:relative;width:100%;height:100%;overflow:hidden;box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(0, 0, 0, .06));flex-shrink:0}:host([data-sui-shape=circle]) .sui-image-upload__preview{border-radius:999px}:host([data-sui-shape=rect]) .sui-image-upload__preview{border-radius:var(--sui-radius-12, 12px)}.sui-image-upload__img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-select:none;user-select:none}.sui-image-upload__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0006;opacity:0;transition:opacity var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1));cursor:pointer}:host(:hover:not([data-sui-disabled])) .sui-image-upload__overlay{opacity:1}.sui-image-upload__overlay-icon{width:32px;height:32px;border-radius:999px;background:#fff3;display:flex;align-items:center;justify-content:center;color:var(--sui-static-white, #fff)}.sui-image-upload__preview--editable{cursor:default}.sui-image-upload__controls{position:absolute;top:8px;right:8px;display:flex;gap:6px;z-index:2}.sui-image-upload__ctrl{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:none;background:#0000008c;color:var(--sui-static-white, #fff);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease,transform .12s ease}.sui-image-upload__ctrl:active{transform:scale(.92)}.sui-image-upload__ctrl:disabled{opacity:.5;cursor:not-allowed}.sui-image-upload__ctrl--danger:active{background:var(--sui-state-error-base, #fb3748)}.sui-image-upload__remove{flex-shrink:0}.sui-image-upload__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "component", type: SuiButton, selector: "sui-button", inputs: ["variant", "color", "size", "onlyIcon", "disabled", "leftIcon", "rightIcon", "type"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8595
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiImageUpload, isStandalone: true, selector: "sui-image-upload", inputs: { shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { src: "srcChange", imageSelected: "imageSelected", removed: "removed", editRequested: "editRequested", errorEvent: "errorEvent" }, host: { listeners: { "touchstart": "$event.currentTarget", "touchend": "$any($event.currentTarget).blur()", "click": "onHostClick()", "keydown.enter": "onHostClick()", "keydown.space": "onHostClick(); $event.preventDefault()", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "attr.title": "null", "attr.data-sui-shape": "shape()", "attr.data-sui-size": "size()", "attr.data-sui-state": "state()", "attr.data-sui-disabled": "disabled() ? \"\" : null", "attr.role": "\"button\"", "attr.tabindex": "disabled() ? -1 : 0", "style.width.px": "sizePx()", "style.height.px": "sizePx()" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["imgInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Estado: sin imagen (empty / dragover) -->\n@if (!hasSrc()) {\n <div class=\"sui-image-upload__empty\">\n <!-- Icono c\u00E1mara \u2014 sui-icon (DS), no SVG inline -->\n <div class=\"sui-image-upload__icon\">\n <sui-icon name=\"image-add-line\" [size]=\"iconSize()\" aria-hidden=\"true\" />\n </div>\n\n <div class=\"sui-image-upload__text\">\n <p class=\"sui-image-upload__title\">{{ resolvedTitle() }}</p>\n <p class=\"sui-image-upload__subtitle\">{{ resolvedSubtitle() }}</p>\n </div>\n\n @if (internalError()) {\n <p class=\"sui-image-upload__error\">{{ internalError() }}</p>\n }\n </div>\n}\n\n<!-- Estado: con imagen (filled) -->\n@if (hasSrc()) {\n <div class=\"sui-image-upload__preview\" [class.sui-image-upload__preview--editable]=\"editable()\">\n <img\n class=\"sui-image-upload__img\"\n [src]=\"src()\"\n alt=\"Preview\"\n draggable=\"false\" />\n\n @if (editable()) {\n <!-- Modo editable: controles de \u00EDcono en esquina (editar + tacho). -->\n <div class=\"sui-image-upload__controls\">\n <button\n type=\"button\"\n class=\"sui-image-upload__ctrl\"\n aria-label=\"Editar imagen\"\n [disabled]=\"disabled()\"\n (click)=\"onEditClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\">\n <sui-icon name=\"pencil-line\" [size]=\"16\" aria-hidden=\"true\" />\n </button>\n <button\n type=\"button\"\n class=\"sui-image-upload__ctrl sui-image-upload__ctrl--danger\"\n aria-label=\"Quitar imagen\"\n [disabled]=\"disabled()\"\n (click)=\"onRemoveClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\">\n <sui-icon name=\"delete-bin-line\" [size]=\"16\" aria-hidden=\"true\" />\n </button>\n </div>\n } @else {\n <!-- Overlay hover con icono lapiz (re-subir) -->\n <div class=\"sui-image-upload__overlay\" (click)=\"onChangeClick($event)\">\n <div class=\"sui-image-upload__overlay-icon\">\n <sui-icon name=\"pencil-line\" [size]=\"16\" aria-hidden=\"true\" />\n </div>\n </div>\n }\n </div>\n\n @if (!editable()) {\n <!-- Bot\u00F3n Quitar debajo del preview \u2014 sui-button stroke (DS), no <button> custom.\n Figma node 452:699 \"Remove\" = stroke error; aqu\u00ED usamos color=error para\n que el affordance de borrado sea consistente con el DS. -->\n <sui-button\n class=\"sui-image-upload__remove\"\n variant=\"stroke\"\n color=\"error\"\n size=\"2xsmall\"\n [disabled]=\"disabled()\"\n (click)=\"onRemoveClick($event)\">\n Quitar\n </sui-button>\n }\n}\n\n<!-- Input file oculto (siempre presente para el click) -->\n<input\n #imgInput\n type=\"file\"\n class=\"sui-image-upload__input\"\n accept=\"image/jpeg,image/png,image/webp,image/gif\"\n [disabled]=\"disabled()\"\n (change)=\"onInputChange($event)\" />\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--sui-font-sans, var(--font-sans, sans-serif));cursor:pointer;flex-shrink:0}:host([data-sui-disabled]){cursor:not-allowed;opacity:.5}.sui-image-upload__empty{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px dashed var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #fff);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(0, 0, 0, .06));text-align:center;padding:12px 8px;box-sizing:border-box;transition:border-color var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)),background var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1))}:host([data-sui-shape=circle]) .sui-image-upload__empty{border-radius:999px}:host([data-sui-shape=rect]) .sui-image-upload__empty{border-radius:var(--sui-radius-12, 12px)}:host(:hover:not([data-sui-disabled])) .sui-image-upload__empty{border-color:var(--sui-stroke-sub-300, #d1d1d1);background:var(--sui-bg-weak-50, #f7f7f7)}:host([data-sui-state=dragover]) .sui-image-upload__empty{border-color:var(--sui-primary-base, #fa7319);background:var(--sui-primary-alpha-10, rgba(250, 115, 25, .1019607843))}.sui-image-upload__icon{width:32px;height:32px;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);display:flex;align-items:center;justify-content:center;color:var(--sui-icon-sub-600, #5c5c5c);flex-shrink:0}:host([data-sui-size=xl]) .sui-image-upload__icon{width:40px;height:40px}:host([data-sui-state=dragover]) .sui-image-upload__icon{background:var(--sui-primary-alpha-16, rgba(250, 115, 25, .1607843137));color:var(--sui-primary-base, #fa7319)}.sui-image-upload__text{display:flex;flex-direction:column;gap:2px;align-items:center}.sui-image-upload__title{margin:0;font-size:12px;font-weight:500;line-height:16px;color:var(--sui-text-strong-950, #171717)}:host([data-sui-size=xl]) .sui-image-upload__title{font-size:13px;line-height:18px}.sui-image-upload__subtitle{margin:0;font-size:11px;font-weight:400;line-height:15px;color:var(--sui-text-sub-600, #5c5c5c)}:host([data-sui-size=sm]) .sui-image-upload__subtitle{display:none}:host([data-sui-size=xl]) .sui-image-upload__subtitle{font-size:12px;line-height:16px}.sui-image-upload__error{margin:2px 0 0;font-size:10px;line-height:14px;color:var(--sui-state-error-base, #fb3748);text-align:center}.sui-image-upload__preview{position:relative;width:100%;height:100%;overflow:hidden;box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(0, 0, 0, .06));flex-shrink:0}:host([data-sui-shape=circle]) .sui-image-upload__preview{border-radius:999px}:host([data-sui-shape=rect]) .sui-image-upload__preview{border-radius:var(--sui-radius-12, 12px)}.sui-image-upload__img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-select:none;user-select:none}.sui-image-upload__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0006;opacity:0;transition:opacity var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1));cursor:pointer}:host(:hover:not([data-sui-disabled])) .sui-image-upload__overlay{opacity:1}.sui-image-upload__overlay-icon{width:32px;height:32px;border-radius:999px;background:#fff3;display:flex;align-items:center;justify-content:center;color:var(--sui-static-white, #fff)}.sui-image-upload__preview--editable{cursor:default}.sui-image-upload__controls{position:absolute;top:8px;right:8px;display:flex;gap:6px;z-index:2}.sui-image-upload__ctrl{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:none;background:#0000008c;color:var(--sui-static-white, #fff);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease,transform .12s ease}.sui-image-upload__ctrl:active{transform:scale(.92)}.sui-image-upload__ctrl:disabled{opacity:.5;cursor:not-allowed}.sui-image-upload__ctrl--danger:active{background:var(--sui-state-error-base, #fb3748)}.sui-image-upload__remove{flex-shrink:0}.sui-image-upload__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "component", type: SuiButton, selector: "sui-button", inputs: ["variant", "color", "size", "onlyIcon", "pill", "disabled", "leftIcon", "rightIcon", "type"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8592
8596
|
}
|
|
8593
8597
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiImageUpload, decorators: [{
|
|
8594
8598
|
type: Component,
|
|
@@ -16548,7 +16552,7 @@ class SuiTimePicker {
|
|
|
16548
16552
|
useExisting: forwardRef(() => SuiTimePicker),
|
|
16549
16553
|
multi: true,
|
|
16550
16554
|
},
|
|
16551
|
-
], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "_menu", first: true, predicate: SuiDropdownMenu, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Label (slot superior) \u2014 mismo patr\u00F3n que sui-input/sui-select. -->\n@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n [size]=\"size()\"\n class=\"sui-time-picker__label-host\"\n (click)=\"toggle()\"\n />\n}\n\n<!-- Trigger (input + icono reloj) \u2014 solo si no es inline. -->\n@if (!inline()) {\n <button\n #triggerEl\n type=\"button\"\n class=\"sui-time-picker__trigger\"\n [class.sui-time-picker__trigger--error]=\"error()\"\n [class.sui-time-picker__trigger--open]=\"open()\"\n [class.sui-time-picker__trigger--filled]=\"value() !== null\"\n [disabled]=\"isDisabled()\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"open()\"\n (click)=\"toggle()\"\n >\n <sui-icon class=\"sui-time-picker__trigger-icon\" name=\"time-line\" [size]=\"20\" />\n <span\n class=\"sui-time-picker__trigger-text\"\n [class.sui-time-picker__trigger-text--placeholder]=\"!value()\"\n >\n {{ triggerText() }}\n </span>\n <sui-icon class=\"sui-time-picker__trigger-chevron\" name=\"arrow-down-s-line\" [size]=\"20\" />\n </button>\n}\n\n<!-- Hint / error message \u2014 mismo slot que sui-input/sui-select. -->\n@if (!inline() && (error() ? errorMessage() : hint())) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n [size]=\"size()\"\n class=\"sui-time-picker__hint-host\"\n />\n}\n\n<!--\n Panel (popover) \u2014 el contenido vive en un ng-template reutilizado por:\n \u00B7 inline() \u2192 render directo (sin overlay, sin trigger)\n \u00B7 !inline() \u2192 proyectado al sui-dropdown-menu (CDK Overlay con flip\n arriba/abajo, reposici\u00F3n en scroll, backdrop, Escape, disposeOnNavigation).\n As\u00ED el panel NO se corta abajo y abre donde hay m\u00E1s espacio (igual que sui-select).\n-->\n<ng-template #panelTpl>\n <div\n class=\"sui-time-picker__panel\"\n [class.sui-time-picker__panel--inline]=\"inline()\"\n role=\"dialog\"\n [attr.aria-label]=\"label() || placeholder()\"\n >\n <!-- Columnas scrollables: hora / minuto / (periodo en 12h). -->\n <div class=\"sui-time-picker__columns\">\n <!-- Columna HORA -->\n <div\n class=\"sui-time-picker__column\"\n role=\"listbox\"\n aria-label=\"Hora\"\n >\n @for (item of hourItems(); track trackColumn($index, item)) {\n <sui-time-picker-item\n class=\"sui-time-picker__option\"\n [time]=\"hourLabelOf(item)\"\n [active]=\"isHourActive(item)\"\n (clicked)=\"selectHour(item)\"\n />\n }\n </div>\n\n <!-- Columna MINUTO -->\n <div\n class=\"sui-time-picker__column\"\n role=\"listbox\"\n aria-label=\"Minuto\"\n >\n @for (item of minuteItems(); track trackColumn($index, item)) {\n <sui-time-picker-item\n class=\"sui-time-picker__option\"\n [time]=\"item.label\"\n [active]=\"isMinuteActive(item)\"\n (clicked)=\"selectMinute(item)\"\n />\n }\n </div>\n\n <!-- Columna PERIODO (solo 12h) -->\n @if (showPeriod()) {\n <div\n class=\"sui-time-picker__column sui-time-picker__column--period\"\n role=\"listbox\"\n aria-label=\"AM/PM\"\n >\n @for (p of periods; track p) {\n <sui-time-picker-item\n class=\"sui-time-picker__option\"\n [time]=\"p\"\n [active]=\"isPeriodActive(p)\"\n (clicked)=\"selectPeriod(p)\"\n />\n }\n </div>\n }\n </div>\n\n <!-- Presets de duraci\u00F3n (pills) \u2014 Figma TimePickerSelectDuration. -->\n @if (durationPresets().length) {\n <div class=\"sui-time-picker__presets\" role=\"group\" aria-label=\"Duraci\u00F3n r\u00E1pida\">\n @for (p of durationPresets(); track trackPreset($index, p)) {\n <sui-time-picker-duration\n [label]=\"p.label\"\n [active]=\"isPresetActive($index)\"\n (clicked)=\"selectPreset(p, $index)\"\n />\n }\n </div>\n }\n\n <!-- Footer Cancel/Apply. -->\n @if (showFooter()) {\n <footer class=\"sui-time-picker__footer\">\n <sui-button\n variant=\"stroke\"\n color=\"neutral\"\n size=\"small\"\n type=\"button\"\n (click)=\"cancel()\"\n >\n Cancelar\n </sui-button>\n <sui-button\n variant=\"filled\"\n color=\"primary\"\n size=\"small\"\n type=\"button\"\n (click)=\"apply()\"\n >\n Aplicar\n </sui-button>\n </footer>\n }\n </div>\n</ng-template>\n\n<!-- Inline mode \u2014 render directo del panel (sin overlay ni trigger). -->\n@if (inline()) {\n <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n}\n\n<!--\n Popover mode \u2014 el panel flota v\u00EDa sui-dropdown-menu anclado al trigger\n (igual que sui-select). Hereda flip arriba/abajo, reposici\u00F3n en scroll,\n backdrop transparent (outside-click), Escape y disposeOnNavigation.\n El componente abre/cierra el menu desde openPopover()/cancel()/apply();\n (openedChange) re-sincroniza open() en los closes del overlay.\n-->\n@if (!inline()) {\n <sui-dropdown-menu\n [origin]=\"triggerEl() ?? null\"\n [disabled]=\"isDisabled()\"\n [matchWidth]=\"false\"\n [minWidth]=\"240\"\n panelClass=\"sui-time-picker__overlay-pane\"\n (openedChange)=\"onMenuOpenedChange($event)\"\n >\n <ng-template suiDropdownPanel>\n <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n </ng-template>\n </sui-dropdown-menu>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;font-family:var(--sui-font-sans, var(--font-sans, sans-serif))}.sui-time-picker__trigger{display:inline-flex;align-items:center;gap:8px;width:100%;min-width:180px;height:40px;padding:0 12px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-10, 10px);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));cursor:pointer;outline:none;font:inherit;color:var(--sui-text-strong-950, #171717);transition:border-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)),box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1))}.sui-time-picker__trigger:hover:not(:disabled){border-color:var(--sui-stroke-sub-300, #d1d1d1)}.sui-time-picker__trigger:focus-visible:not(:disabled){border-color:var(--sui-stroke-strong-950, #171717);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px color-mix(in oklab,var(--sui-stroke-strong-950, #171717) 16%,transparent)}.sui-time-picker__trigger--error{border-color:var(--sui-state-error-base, #fb3748)}.sui-time-picker__trigger--open{border-color:var(--sui-stroke-strong-950, #171717)}.sui-time-picker__trigger:disabled{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;border:none}:host([data-sui-size=small]) .sui-time-picker__trigger{height:36px;border-radius:var(--sui-radius-8, 8px)}.sui-time-picker__trigger-icon,.sui-time-picker__trigger-chevron{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-time-picker__trigger-text{flex:1 1 auto;text-align:left;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.084px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-time-picker__trigger-text--placeholder{color:var(--sui-text-soft-400, #a3a3a3);font-weight:400}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiButton, selector: "sui-button", inputs: ["variant", "color", "size", "onlyIcon", "disabled", "leftIcon", "rightIcon", "type"] }, { kind: "component", type: SuiFormLabel, selector: "sui-form-label", inputs: ["label", "sublabel", "required", "tooltip", "linkText", "size", "disabled", "for"], outputs: ["linkClick"] }, { kind: "component", type: SuiFormHint, selector: "sui-form-hint", inputs: ["message", "variant", "icon", "size"] }, { kind: "component", type: SuiDropdownMenu, selector: "sui-dropdown-menu", inputs: ["matchWidth", "minWidth", "position", "viewportMargin", "panelClass", "disabled", "popupRole", "origin"], outputs: ["openedChange"], exportAs: ["suiDropdownMenu"] }, { kind: "directive", type: SuiDropdownPanel, selector: "ng-template[suiDropdownPanel]" }, { kind: "component", type: SuiTimePickerItem, selector: "sui-time-picker-item", inputs: ["time", "meridiem", "rightTime", "rightMeridiem", "direction", "active", "highlighted", "disabled"], outputs: ["clicked"] }, { kind: "component", type: SuiTimePickerDuration, selector: "sui-time-picker-duration", inputs: ["label", "active", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
16555
|
+
], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "_menu", first: true, predicate: SuiDropdownMenu, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Label (slot superior) \u2014 mismo patr\u00F3n que sui-input/sui-select. -->\n@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n [size]=\"size()\"\n class=\"sui-time-picker__label-host\"\n (click)=\"toggle()\"\n />\n}\n\n<!-- Trigger (input + icono reloj) \u2014 solo si no es inline. -->\n@if (!inline()) {\n <button\n #triggerEl\n type=\"button\"\n class=\"sui-time-picker__trigger\"\n [class.sui-time-picker__trigger--error]=\"error()\"\n [class.sui-time-picker__trigger--open]=\"open()\"\n [class.sui-time-picker__trigger--filled]=\"value() !== null\"\n [disabled]=\"isDisabled()\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"open()\"\n (click)=\"toggle()\"\n >\n <sui-icon class=\"sui-time-picker__trigger-icon\" name=\"time-line\" [size]=\"20\" />\n <span\n class=\"sui-time-picker__trigger-text\"\n [class.sui-time-picker__trigger-text--placeholder]=\"!value()\"\n >\n {{ triggerText() }}\n </span>\n <sui-icon class=\"sui-time-picker__trigger-chevron\" name=\"arrow-down-s-line\" [size]=\"20\" />\n </button>\n}\n\n<!-- Hint / error message \u2014 mismo slot que sui-input/sui-select. -->\n@if (!inline() && (error() ? errorMessage() : hint())) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n [size]=\"size()\"\n class=\"sui-time-picker__hint-host\"\n />\n}\n\n<!--\n Panel (popover) \u2014 el contenido vive en un ng-template reutilizado por:\n \u00B7 inline() \u2192 render directo (sin overlay, sin trigger)\n \u00B7 !inline() \u2192 proyectado al sui-dropdown-menu (CDK Overlay con flip\n arriba/abajo, reposici\u00F3n en scroll, backdrop, Escape, disposeOnNavigation).\n As\u00ED el panel NO se corta abajo y abre donde hay m\u00E1s espacio (igual que sui-select).\n-->\n<ng-template #panelTpl>\n <div\n class=\"sui-time-picker__panel\"\n [class.sui-time-picker__panel--inline]=\"inline()\"\n role=\"dialog\"\n [attr.aria-label]=\"label() || placeholder()\"\n >\n <!-- Columnas scrollables: hora / minuto / (periodo en 12h). -->\n <div class=\"sui-time-picker__columns\">\n <!-- Columna HORA -->\n <div\n class=\"sui-time-picker__column\"\n role=\"listbox\"\n aria-label=\"Hora\"\n >\n @for (item of hourItems(); track trackColumn($index, item)) {\n <sui-time-picker-item\n class=\"sui-time-picker__option\"\n [time]=\"hourLabelOf(item)\"\n [active]=\"isHourActive(item)\"\n (clicked)=\"selectHour(item)\"\n />\n }\n </div>\n\n <!-- Columna MINUTO -->\n <div\n class=\"sui-time-picker__column\"\n role=\"listbox\"\n aria-label=\"Minuto\"\n >\n @for (item of minuteItems(); track trackColumn($index, item)) {\n <sui-time-picker-item\n class=\"sui-time-picker__option\"\n [time]=\"item.label\"\n [active]=\"isMinuteActive(item)\"\n (clicked)=\"selectMinute(item)\"\n />\n }\n </div>\n\n <!-- Columna PERIODO (solo 12h) -->\n @if (showPeriod()) {\n <div\n class=\"sui-time-picker__column sui-time-picker__column--period\"\n role=\"listbox\"\n aria-label=\"AM/PM\"\n >\n @for (p of periods; track p) {\n <sui-time-picker-item\n class=\"sui-time-picker__option\"\n [time]=\"p\"\n [active]=\"isPeriodActive(p)\"\n (clicked)=\"selectPeriod(p)\"\n />\n }\n </div>\n }\n </div>\n\n <!-- Presets de duraci\u00F3n (pills) \u2014 Figma TimePickerSelectDuration. -->\n @if (durationPresets().length) {\n <div class=\"sui-time-picker__presets\" role=\"group\" aria-label=\"Duraci\u00F3n r\u00E1pida\">\n @for (p of durationPresets(); track trackPreset($index, p)) {\n <sui-time-picker-duration\n [label]=\"p.label\"\n [active]=\"isPresetActive($index)\"\n (clicked)=\"selectPreset(p, $index)\"\n />\n }\n </div>\n }\n\n <!-- Footer Cancel/Apply. -->\n @if (showFooter()) {\n <footer class=\"sui-time-picker__footer\">\n <sui-button\n variant=\"stroke\"\n color=\"neutral\"\n size=\"small\"\n type=\"button\"\n (click)=\"cancel()\"\n >\n Cancelar\n </sui-button>\n <sui-button\n variant=\"filled\"\n color=\"primary\"\n size=\"small\"\n type=\"button\"\n (click)=\"apply()\"\n >\n Aplicar\n </sui-button>\n </footer>\n }\n </div>\n</ng-template>\n\n<!-- Inline mode \u2014 render directo del panel (sin overlay ni trigger). -->\n@if (inline()) {\n <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n}\n\n<!--\n Popover mode \u2014 el panel flota v\u00EDa sui-dropdown-menu anclado al trigger\n (igual que sui-select). Hereda flip arriba/abajo, reposici\u00F3n en scroll,\n backdrop transparent (outside-click), Escape y disposeOnNavigation.\n El componente abre/cierra el menu desde openPopover()/cancel()/apply();\n (openedChange) re-sincroniza open() en los closes del overlay.\n-->\n@if (!inline()) {\n <sui-dropdown-menu\n [origin]=\"triggerEl() ?? null\"\n [disabled]=\"isDisabled()\"\n [matchWidth]=\"false\"\n [minWidth]=\"240\"\n panelClass=\"sui-time-picker__overlay-pane\"\n (openedChange)=\"onMenuOpenedChange($event)\"\n >\n <ng-template suiDropdownPanel>\n <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n </ng-template>\n </sui-dropdown-menu>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;font-family:var(--sui-font-sans, var(--font-sans, sans-serif))}.sui-time-picker__trigger{display:inline-flex;align-items:center;gap:8px;width:100%;min-width:180px;height:40px;padding:0 12px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-10, 10px);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));cursor:pointer;outline:none;font:inherit;color:var(--sui-text-strong-950, #171717);transition:border-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)),box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1))}.sui-time-picker__trigger:hover:not(:disabled){border-color:var(--sui-stroke-sub-300, #d1d1d1)}.sui-time-picker__trigger:focus-visible:not(:disabled){border-color:var(--sui-stroke-strong-950, #171717);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px color-mix(in oklab,var(--sui-stroke-strong-950, #171717) 16%,transparent)}.sui-time-picker__trigger--error{border-color:var(--sui-state-error-base, #fb3748)}.sui-time-picker__trigger--open{border-color:var(--sui-stroke-strong-950, #171717)}.sui-time-picker__trigger:disabled{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;border:none}:host([data-sui-size=small]) .sui-time-picker__trigger{height:36px;border-radius:var(--sui-radius-8, 8px)}.sui-time-picker__trigger-icon,.sui-time-picker__trigger-chevron{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-time-picker__trigger-text{flex:1 1 auto;text-align:left;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.084px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-time-picker__trigger-text--placeholder{color:var(--sui-text-soft-400, #a3a3a3);font-weight:400}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiButton, selector: "sui-button", inputs: ["variant", "color", "size", "onlyIcon", "pill", "disabled", "leftIcon", "rightIcon", "type"] }, { kind: "component", type: SuiFormLabel, selector: "sui-form-label", inputs: ["label", "sublabel", "required", "tooltip", "linkText", "size", "disabled", "for"], outputs: ["linkClick"] }, { kind: "component", type: SuiFormHint, selector: "sui-form-hint", inputs: ["message", "variant", "icon", "size"] }, { kind: "component", type: SuiDropdownMenu, selector: "sui-dropdown-menu", inputs: ["matchWidth", "minWidth", "position", "viewportMargin", "panelClass", "disabled", "popupRole", "origin"], outputs: ["openedChange"], exportAs: ["suiDropdownMenu"] }, { kind: "directive", type: SuiDropdownPanel, selector: "ng-template[suiDropdownPanel]" }, { kind: "component", type: SuiTimePickerItem, selector: "sui-time-picker-item", inputs: ["time", "meridiem", "rightTime", "rightMeridiem", "direction", "active", "highlighted", "disabled"], outputs: ["clicked"] }, { kind: "component", type: SuiTimePickerDuration, selector: "sui-time-picker-duration", inputs: ["label", "active", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
16552
16556
|
}
|
|
16553
16557
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTimePicker, decorators: [{
|
|
16554
16558
|
type: Component,
|