@ajuarezso/sui-design-system 0.2.0 → 0.2.1
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.
|
@@ -1001,7 +1001,7 @@ class SuiCompactButton {
|
|
|
1001
1001
|
this.clicked.emit(event);
|
|
1002
1002
|
}
|
|
1003
1003
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiCompactButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1004
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiCompactButton, isStandalone: true, selector: "sui-compact-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, variantStyle: { classPropertyName: "variantStyle", publicName: "variantStyle", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullRadius: { classPropertyName: "fullRadius", publicName: "fullRadius", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "attr.data-sui-style": "variantStyle()", "attr.data-sui-size": "size()", "attr.data-sui-full-radius": "fullRadius() ? \"\" : null", "attr.data-sui-disabled": "disabled() ? \"\" : null" } }, ngImport: i0, template: "@if (isAnchor()) {\n <a\n class=\"sui-compact-button__el\"\n [href]=\"href()\"\n [attr.target]=\"target()\"\n [attr.rel]=\"rel()\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"onClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon [name]=\"icon()\" [size]=\"iconSize()\" />\n </a>\n} @else {\n <button\n class=\"sui-compact-button__el\"\n [type]=\"type()\"\n [disabled]=\"disabled() || null\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"onClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon [name]=\"icon()\" [size]=\"iconSize()\" />\n </button>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;vertical-align:middle}.sui-compact-button__el{appearance:none;display:inline-flex;align-items:center;justify-content:center;margin:0;padding:2px;border:0;background:transparent;color:inherit;text-decoration:none;cursor:pointer;box-sizing:border-box;border-radius:var(--sui-radius-6, 6px);transition:background .12s,border-color .12s,color .12s,box-shadow .12s,transform var(--dur-instant, 80ms) var(--ease-ek, cubic-bezier(.22, 1, .36, 1))}.sui-compact-button__el:active:not(:disabled){transform:scale(.92)}.sui-compact-button__el:disabled{cursor:not-allowed}:host .sui-compact-button__el:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-size=xlarge]) .sui-compact-button__el{width:28px;height:28px}:host([data-sui-size=large]) .sui-compact-button__el{width:24px;height:24px}:host([data-sui-size=medium]) .sui-compact-button__el{width:20px;height:20px}:host([data-sui-full-radius]) .sui-compact-button__el{border-radius:var(--sui-radius-full, 999px)}:host([data-sui-style=stroke]) .sui-compact-button__el{background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);color:var(--sui-icon-sub-600);box-shadow:var(--sui-regular-shadow-x-small)}:host([data-sui-style=stroke]) .sui-compact-button__el:hover:not(:disabled){background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-icon-strong-950)}:host([data-sui-style=stroke]) .sui-compact-button__el:active:not(:disabled){background:var(--sui-bg-surface-800);border-color:transparent;color:var(--sui-icon-white-0);box-shadow:none}:host([data-sui-style=ghost]) .sui-compact-button__el{background:transparent;color:var(--sui-icon-sub-600)}:host([data-sui-style=ghost]) .sui-compact-button__el:hover:not(:disabled){background:var(--sui-bg-weak-50);color:var(--sui-icon-strong-950)}:host([data-sui-style=ghost]) .sui-compact-button__el:active:not(:disabled){background:var(--sui-bg-surface-800);color:var(--sui-icon-white-0)}:host([data-sui-style=modifiable]) .sui-compact-button__el{background:transparent;color:currentColor}:host([data-sui-style=modifiable]) .sui-compact-button__el:hover:not(:disabled){background:var(--sui-compact-button-hover-bg, var(--sui-white-alpha-16))}:host([data-sui-style=modifiable]) .sui-compact-button__el:active:not(:disabled){background:var(--sui-compact-button-active-bg, var(--sui-white-alpha-16));border:1px solid var(--sui-static-white)}:host([data-sui-style=white]) .sui-compact-button__el{background:var(--sui-bg-white-0);color:var(--sui-icon-
|
|
1004
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiCompactButton, isStandalone: true, selector: "sui-compact-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, variantStyle: { classPropertyName: "variantStyle", publicName: "variantStyle", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullRadius: { classPropertyName: "fullRadius", publicName: "fullRadius", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "attr.data-sui-style": "variantStyle()", "attr.data-sui-size": "size()", "attr.data-sui-full-radius": "fullRadius() ? \"\" : null", "attr.data-sui-disabled": "disabled() ? \"\" : null" } }, ngImport: i0, template: "@if (isAnchor()) {\n <a\n class=\"sui-compact-button__el\"\n [href]=\"href()\"\n [attr.target]=\"target()\"\n [attr.rel]=\"rel()\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"onClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon [name]=\"icon()\" [size]=\"iconSize()\" />\n </a>\n} @else {\n <button\n class=\"sui-compact-button__el\"\n [type]=\"type()\"\n [disabled]=\"disabled() || null\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"onClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon [name]=\"icon()\" [size]=\"iconSize()\" />\n </button>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;vertical-align:middle}.sui-compact-button__el{appearance:none;display:inline-flex;align-items:center;justify-content:center;margin:0;padding:2px;border:0;background:transparent;color:inherit;text-decoration:none;cursor:pointer;box-sizing:border-box;border-radius:var(--sui-radius-6, 6px);transition:background .12s,border-color .12s,color .12s,box-shadow .12s,transform var(--dur-instant, 80ms) var(--ease-ek, cubic-bezier(.22, 1, .36, 1))}.sui-compact-button__el:active:not(:disabled){transform:scale(.92)}.sui-compact-button__el:disabled{cursor:not-allowed}:host .sui-compact-button__el:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-size=xlarge]) .sui-compact-button__el{width:28px;height:28px}:host([data-sui-size=large]) .sui-compact-button__el{width:24px;height:24px}:host([data-sui-size=medium]) .sui-compact-button__el{width:20px;height:20px}:host([data-sui-full-radius]) .sui-compact-button__el{border-radius:var(--sui-radius-full, 999px)}:host([data-sui-style=stroke]) .sui-compact-button__el{background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);color:var(--sui-icon-sub-600);box-shadow:var(--sui-regular-shadow-x-small)}:host([data-sui-style=stroke]) .sui-compact-button__el:hover:not(:disabled){background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-icon-strong-950)}:host([data-sui-style=stroke]) .sui-compact-button__el:active:not(:disabled){background:var(--sui-bg-surface-800);border-color:transparent;color:var(--sui-icon-white-0);box-shadow:none}:host([data-sui-style=ghost]) .sui-compact-button__el{background:transparent;color:var(--sui-icon-sub-600)}:host([data-sui-style=ghost]) .sui-compact-button__el:hover:not(:disabled){background:var(--sui-bg-weak-50);color:var(--sui-icon-strong-950)}:host([data-sui-style=ghost]) .sui-compact-button__el:active:not(:disabled){background:var(--sui-bg-surface-800);color:var(--sui-icon-white-0)}:host([data-sui-style=modifiable]) .sui-compact-button__el{background:transparent;color:currentColor}:host([data-sui-style=modifiable]) .sui-compact-button__el:hover:not(:disabled){background:var(--sui-compact-button-hover-bg, var(--sui-white-alpha-16))}:host([data-sui-style=modifiable]) .sui-compact-button__el:active:not(:disabled){background:var(--sui-compact-button-active-bg, var(--sui-white-alpha-16));border:1px solid var(--sui-static-white)}:host([data-sui-style=white]) .sui-compact-button__el{background:var(--sui-bg-white-0);color:var(--sui-icon-sub-600);box-shadow:var(--sui-regular-shadow-x-small)}:host([data-sui-style=white]) .sui-compact-button__el:hover:not(:disabled){background:var(--sui-bg-weak-50);color:var(--sui-icon-strong-950)}:host([data-sui-style=white]) .sui-compact-button__el:active:not(:disabled){background:var(--sui-bg-surface-800);color:var(--sui-icon-white-0);box-shadow:none}:host([data-sui-disabled]) .sui-compact-button__el,.sui-compact-button__el:disabled{color:var(--sui-icon-disabled-300);cursor:not-allowed;pointer-events:none;opacity:.5}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1005
1005
|
}
|
|
1006
1006
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiCompactButton, decorators: [{
|
|
1007
1007
|
type: Component,
|
|
@@ -1010,7 +1010,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
1010
1010
|
'[attr.data-sui-size]': 'size()',
|
|
1011
1011
|
'[attr.data-sui-full-radius]': 'fullRadius() ? "" : null',
|
|
1012
1012
|
'[attr.data-sui-disabled]': 'disabled() ? "" : null',
|
|
1013
|
-
}, template: "@if (isAnchor()) {\n <a\n class=\"sui-compact-button__el\"\n [href]=\"href()\"\n [attr.target]=\"target()\"\n [attr.rel]=\"rel()\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"onClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon [name]=\"icon()\" [size]=\"iconSize()\" />\n </a>\n} @else {\n <button\n class=\"sui-compact-button__el\"\n [type]=\"type()\"\n [disabled]=\"disabled() || null\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"onClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon [name]=\"icon()\" [size]=\"iconSize()\" />\n </button>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;vertical-align:middle}.sui-compact-button__el{appearance:none;display:inline-flex;align-items:center;justify-content:center;margin:0;padding:2px;border:0;background:transparent;color:inherit;text-decoration:none;cursor:pointer;box-sizing:border-box;border-radius:var(--sui-radius-6, 6px);transition:background .12s,border-color .12s,color .12s,box-shadow .12s,transform var(--dur-instant, 80ms) var(--ease-ek, cubic-bezier(.22, 1, .36, 1))}.sui-compact-button__el:active:not(:disabled){transform:scale(.92)}.sui-compact-button__el:disabled{cursor:not-allowed}:host .sui-compact-button__el:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-size=xlarge]) .sui-compact-button__el{width:28px;height:28px}:host([data-sui-size=large]) .sui-compact-button__el{width:24px;height:24px}:host([data-sui-size=medium]) .sui-compact-button__el{width:20px;height:20px}:host([data-sui-full-radius]) .sui-compact-button__el{border-radius:var(--sui-radius-full, 999px)}:host([data-sui-style=stroke]) .sui-compact-button__el{background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);color:var(--sui-icon-sub-600);box-shadow:var(--sui-regular-shadow-x-small)}:host([data-sui-style=stroke]) .sui-compact-button__el:hover:not(:disabled){background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-icon-strong-950)}:host([data-sui-style=stroke]) .sui-compact-button__el:active:not(:disabled){background:var(--sui-bg-surface-800);border-color:transparent;color:var(--sui-icon-white-0);box-shadow:none}:host([data-sui-style=ghost]) .sui-compact-button__el{background:transparent;color:var(--sui-icon-sub-600)}:host([data-sui-style=ghost]) .sui-compact-button__el:hover:not(:disabled){background:var(--sui-bg-weak-50);color:var(--sui-icon-strong-950)}:host([data-sui-style=ghost]) .sui-compact-button__el:active:not(:disabled){background:var(--sui-bg-surface-800);color:var(--sui-icon-white-0)}:host([data-sui-style=modifiable]) .sui-compact-button__el{background:transparent;color:currentColor}:host([data-sui-style=modifiable]) .sui-compact-button__el:hover:not(:disabled){background:var(--sui-compact-button-hover-bg, var(--sui-white-alpha-16))}:host([data-sui-style=modifiable]) .sui-compact-button__el:active:not(:disabled){background:var(--sui-compact-button-active-bg, var(--sui-white-alpha-16));border:1px solid var(--sui-static-white)}:host([data-sui-style=white]) .sui-compact-button__el{background:var(--sui-bg-white-0);color:var(--sui-icon-
|
|
1013
|
+
}, template: "@if (isAnchor()) {\n <a\n class=\"sui-compact-button__el\"\n [href]=\"href()\"\n [attr.target]=\"target()\"\n [attr.rel]=\"rel()\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"onClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon [name]=\"icon()\" [size]=\"iconSize()\" />\n </a>\n} @else {\n <button\n class=\"sui-compact-button__el\"\n [type]=\"type()\"\n [disabled]=\"disabled() || null\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"onClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon [name]=\"icon()\" [size]=\"iconSize()\" />\n </button>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;vertical-align:middle}.sui-compact-button__el{appearance:none;display:inline-flex;align-items:center;justify-content:center;margin:0;padding:2px;border:0;background:transparent;color:inherit;text-decoration:none;cursor:pointer;box-sizing:border-box;border-radius:var(--sui-radius-6, 6px);transition:background .12s,border-color .12s,color .12s,box-shadow .12s,transform var(--dur-instant, 80ms) var(--ease-ek, cubic-bezier(.22, 1, .36, 1))}.sui-compact-button__el:active:not(:disabled){transform:scale(.92)}.sui-compact-button__el:disabled{cursor:not-allowed}:host .sui-compact-button__el:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-size=xlarge]) .sui-compact-button__el{width:28px;height:28px}:host([data-sui-size=large]) .sui-compact-button__el{width:24px;height:24px}:host([data-sui-size=medium]) .sui-compact-button__el{width:20px;height:20px}:host([data-sui-full-radius]) .sui-compact-button__el{border-radius:var(--sui-radius-full, 999px)}:host([data-sui-style=stroke]) .sui-compact-button__el{background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);color:var(--sui-icon-sub-600);box-shadow:var(--sui-regular-shadow-x-small)}:host([data-sui-style=stroke]) .sui-compact-button__el:hover:not(:disabled){background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-icon-strong-950)}:host([data-sui-style=stroke]) .sui-compact-button__el:active:not(:disabled){background:var(--sui-bg-surface-800);border-color:transparent;color:var(--sui-icon-white-0);box-shadow:none}:host([data-sui-style=ghost]) .sui-compact-button__el{background:transparent;color:var(--sui-icon-sub-600)}:host([data-sui-style=ghost]) .sui-compact-button__el:hover:not(:disabled){background:var(--sui-bg-weak-50);color:var(--sui-icon-strong-950)}:host([data-sui-style=ghost]) .sui-compact-button__el:active:not(:disabled){background:var(--sui-bg-surface-800);color:var(--sui-icon-white-0)}:host([data-sui-style=modifiable]) .sui-compact-button__el{background:transparent;color:currentColor}:host([data-sui-style=modifiable]) .sui-compact-button__el:hover:not(:disabled){background:var(--sui-compact-button-hover-bg, var(--sui-white-alpha-16))}:host([data-sui-style=modifiable]) .sui-compact-button__el:active:not(:disabled){background:var(--sui-compact-button-active-bg, var(--sui-white-alpha-16));border:1px solid var(--sui-static-white)}:host([data-sui-style=white]) .sui-compact-button__el{background:var(--sui-bg-white-0);color:var(--sui-icon-sub-600);box-shadow:var(--sui-regular-shadow-x-small)}:host([data-sui-style=white]) .sui-compact-button__el:hover:not(:disabled){background:var(--sui-bg-weak-50);color:var(--sui-icon-strong-950)}:host([data-sui-style=white]) .sui-compact-button__el:active:not(:disabled){background:var(--sui-bg-surface-800);color:var(--sui-icon-white-0);box-shadow:none}:host([data-sui-disabled]) .sui-compact-button__el,.sui-compact-button__el:disabled{color:var(--sui-icon-disabled-300);cursor:not-allowed;pointer-events:none;opacity:.5}\n"] }]
|
|
1014
1014
|
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], variantStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "variantStyle", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullRadius", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], rel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rel", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
1015
1015
|
|
|
1016
1016
|
/**
|
|
@@ -2242,7 +2242,7 @@ class SuiCard {
|
|
|
2242
2242
|
size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
2243
2243
|
interactive = input(false, ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
|
|
2244
2244
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2245
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: SuiCard, isStandalone: true, selector: "sui-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "touchstart": "interactive() ? $event.currentTarget : null", "touchend": "interactive() ? $any($event.currentTarget).blur() : null" }, properties: { "attr.data-sui-variant": "variant()", "attr.data-sui-size": "size()", "attr.data-sui-interactive": "interactive() ? \"\" : null", "attr.role": "interactive() ? \"button\" : null", "attr.tabindex": "interactive() ? \"0\" : null" } }, ngImport: i0, template: "<ng-content select=\"[sui-card-header]\" />\n<div class=\"sui-card__body\">\n <ng-content />\n</div>\n<ng-content select=\"[sui-card-media]\" />\n<ng-content select=\"[sui-card-footer]\" />\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;box-sizing:border-box;background:var(--sui-bg-white-0);border-radius:var(--sui-radius-16);border:1px solid transparent;overflow:hidden;outline:none;transition:box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),border-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),transform var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-sui-variant=default]){border-color:var(--sui-stroke-soft-200);box-shadow:var(--sui-shadow-x-small)}:host([data-sui-variant=elevated]){border-color:transparent;box-shadow:var(--sui-shadow-medium)}:host([data-sui-variant=flat]){border-color:var(--sui-stroke-soft-200);box-shadow:none}:host([data-sui-size=small]){--sui-card-padding-x: 16px;padding:16px;gap:12px}:host([data-sui-size=medium]){--sui-card-padding-x: 20px;padding:20px;gap:16px}:host([data-sui-size=large]){--sui-card-padding-x: 24px;padding:24px;gap:20px}:host([data-sui-size=xlarge]){--sui-card-padding-x: 28px;padding:28px;gap:24px}:host([data-sui-interactive]){cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}:host([data-sui-interactive]:hover){transform:translateY(-1px)}:host([data-sui-interactive][data-sui-variant=default]:hover){border-color:var(--sui-stroke-sub-300);box-shadow:var(--sui-shadow-medium)}:host([data-sui-interactive][data-sui-variant=elevated]:hover){box-shadow:var(--sui-custom-shadow-large, var(--sui-shadow-medium))}:host([data-sui-interactive][data-sui-variant=flat]:hover){border-color:var(--sui-stroke-sub-300);background:var(--sui-bg-weak-50, #f7f7f7)}:host([data-sui-interactive]:active:not(:focus-visible)){transform:scale(.99)}:host([data-sui-interactive]:focus-visible){box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-state-information-base, #335cff)}::ng-deep [sui-card-header]{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}::ng-deep [sui-card-footer]{display:flex;align-items:center;gap:12px}::ng-deep [sui-card-media]{display:block;margin-left:calc(-1 * var(--sui-card-padding-x, 20px));margin-right:calc(-1 * var(--sui-card-padding-x, 20px));margin-bottom:calc(-1 * var(--sui-card-padding-x, 20px));overflow:hidden;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}:host:has(::ng-deep [sui-card-footer]) ::ng-deep [sui-card-media]{margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.sui-card__body{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}:host:has(>.sui-card__body:only-child){gap:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2245
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: SuiCard, isStandalone: true, selector: "sui-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "touchstart": "interactive() ? $event.currentTarget : null", "touchend": "interactive() ? $any($event.currentTarget).blur() : null" }, properties: { "attr.data-sui-variant": "variant()", "attr.data-sui-size": "size()", "attr.data-sui-interactive": "interactive() ? \"\" : null", "attr.role": "interactive() ? \"button\" : null", "attr.tabindex": "interactive() ? \"0\" : null" } }, ngImport: i0, template: "<ng-content select=\"[sui-card-header]\" />\n<div class=\"sui-card__body\">\n <ng-content />\n</div>\n<ng-content select=\"[sui-card-media]\" />\n<ng-content select=\"[sui-card-footer]\" />\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;box-sizing:border-box;background:var(--sui-bg-white-0);border-radius:var(--sui-radius-16);border:1px solid transparent;overflow:hidden;outline:none;transition:box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),border-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),transform var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-sui-variant=default]){border-color:var(--sui-stroke-soft-200);box-shadow:var(--sui-shadow-x-small)}:host([data-sui-variant=elevated]){border-color:var(--sui-card-elevated-border, transparent);box-shadow:var(--sui-shadow-medium)}:host([data-sui-variant=flat]){border-color:var(--sui-stroke-soft-200);box-shadow:none}:host([data-sui-size=small]){--sui-card-padding-x: 16px;padding:16px;gap:12px}:host([data-sui-size=medium]){--sui-card-padding-x: 20px;padding:20px;gap:16px}:host([data-sui-size=large]){--sui-card-padding-x: 24px;padding:24px;gap:20px}:host([data-sui-size=xlarge]){--sui-card-padding-x: 28px;padding:28px;gap:24px}:host([data-sui-interactive]){cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}:host([data-sui-interactive]:hover){transform:translateY(-1px)}:host([data-sui-interactive][data-sui-variant=default]:hover){border-color:var(--sui-stroke-sub-300);box-shadow:var(--sui-shadow-medium)}:host([data-sui-interactive][data-sui-variant=elevated]:hover){box-shadow:var(--sui-custom-shadow-large, var(--sui-shadow-medium))}:host([data-sui-interactive][data-sui-variant=flat]:hover){border-color:var(--sui-stroke-sub-300);background:var(--sui-bg-weak-50, #f7f7f7)}:host([data-sui-interactive]:active:not(:focus-visible)){transform:scale(.99)}:host([data-sui-interactive]:focus-visible){box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-state-information-base, #335cff)}::ng-deep [sui-card-header]{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}::ng-deep [sui-card-footer]{display:flex;align-items:center;gap:12px}::ng-deep [sui-card-media]{display:block;margin-left:calc(-1 * var(--sui-card-padding-x, 20px));margin-right:calc(-1 * var(--sui-card-padding-x, 20px));margin-bottom:calc(-1 * var(--sui-card-padding-x, 20px));overflow:hidden;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}:host:has(::ng-deep [sui-card-footer]) ::ng-deep [sui-card-media]{margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.sui-card__body{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}:host:has(>.sui-card__body:only-child){gap:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2246
2246
|
}
|
|
2247
2247
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiCard, decorators: [{
|
|
2248
2248
|
type: Component,
|
|
@@ -2255,7 +2255,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2255
2255
|
/* iOS WKWebView :active fix — solo cuando es interactivo. */
|
|
2256
2256
|
'(touchstart)': 'interactive() ? $event.currentTarget : null',
|
|
2257
2257
|
'(touchend)': 'interactive() ? $any($event.currentTarget).blur() : null',
|
|
2258
|
-
}, template: "<ng-content select=\"[sui-card-header]\" />\n<div class=\"sui-card__body\">\n <ng-content />\n</div>\n<ng-content select=\"[sui-card-media]\" />\n<ng-content select=\"[sui-card-footer]\" />\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;box-sizing:border-box;background:var(--sui-bg-white-0);border-radius:var(--sui-radius-16);border:1px solid transparent;overflow:hidden;outline:none;transition:box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),border-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),transform var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-sui-variant=default]){border-color:var(--sui-stroke-soft-200);box-shadow:var(--sui-shadow-x-small)}:host([data-sui-variant=elevated]){border-color:transparent;box-shadow:var(--sui-shadow-medium)}:host([data-sui-variant=flat]){border-color:var(--sui-stroke-soft-200);box-shadow:none}:host([data-sui-size=small]){--sui-card-padding-x: 16px;padding:16px;gap:12px}:host([data-sui-size=medium]){--sui-card-padding-x: 20px;padding:20px;gap:16px}:host([data-sui-size=large]){--sui-card-padding-x: 24px;padding:24px;gap:20px}:host([data-sui-size=xlarge]){--sui-card-padding-x: 28px;padding:28px;gap:24px}:host([data-sui-interactive]){cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}:host([data-sui-interactive]:hover){transform:translateY(-1px)}:host([data-sui-interactive][data-sui-variant=default]:hover){border-color:var(--sui-stroke-sub-300);box-shadow:var(--sui-shadow-medium)}:host([data-sui-interactive][data-sui-variant=elevated]:hover){box-shadow:var(--sui-custom-shadow-large, var(--sui-shadow-medium))}:host([data-sui-interactive][data-sui-variant=flat]:hover){border-color:var(--sui-stroke-sub-300);background:var(--sui-bg-weak-50, #f7f7f7)}:host([data-sui-interactive]:active:not(:focus-visible)){transform:scale(.99)}:host([data-sui-interactive]:focus-visible){box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-state-information-base, #335cff)}::ng-deep [sui-card-header]{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}::ng-deep [sui-card-footer]{display:flex;align-items:center;gap:12px}::ng-deep [sui-card-media]{display:block;margin-left:calc(-1 * var(--sui-card-padding-x, 20px));margin-right:calc(-1 * var(--sui-card-padding-x, 20px));margin-bottom:calc(-1 * var(--sui-card-padding-x, 20px));overflow:hidden;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}:host:has(::ng-deep [sui-card-footer]) ::ng-deep [sui-card-media]{margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.sui-card__body{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}:host:has(>.sui-card__body:only-child){gap:0}\n"] }]
|
|
2258
|
+
}, template: "<ng-content select=\"[sui-card-header]\" />\n<div class=\"sui-card__body\">\n <ng-content />\n</div>\n<ng-content select=\"[sui-card-media]\" />\n<ng-content select=\"[sui-card-footer]\" />\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;box-sizing:border-box;background:var(--sui-bg-white-0);border-radius:var(--sui-radius-16);border:1px solid transparent;overflow:hidden;outline:none;transition:box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),border-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),transform var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-sui-variant=default]){border-color:var(--sui-stroke-soft-200);box-shadow:var(--sui-shadow-x-small)}:host([data-sui-variant=elevated]){border-color:var(--sui-card-elevated-border, transparent);box-shadow:var(--sui-shadow-medium)}:host([data-sui-variant=flat]){border-color:var(--sui-stroke-soft-200);box-shadow:none}:host([data-sui-size=small]){--sui-card-padding-x: 16px;padding:16px;gap:12px}:host([data-sui-size=medium]){--sui-card-padding-x: 20px;padding:20px;gap:16px}:host([data-sui-size=large]){--sui-card-padding-x: 24px;padding:24px;gap:20px}:host([data-sui-size=xlarge]){--sui-card-padding-x: 28px;padding:28px;gap:24px}:host([data-sui-interactive]){cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}:host([data-sui-interactive]:hover){transform:translateY(-1px)}:host([data-sui-interactive][data-sui-variant=default]:hover){border-color:var(--sui-stroke-sub-300);box-shadow:var(--sui-shadow-medium)}:host([data-sui-interactive][data-sui-variant=elevated]:hover){box-shadow:var(--sui-custom-shadow-large, var(--sui-shadow-medium))}:host([data-sui-interactive][data-sui-variant=flat]:hover){border-color:var(--sui-stroke-sub-300);background:var(--sui-bg-weak-50, #f7f7f7)}:host([data-sui-interactive]:active:not(:focus-visible)){transform:scale(.99)}:host([data-sui-interactive]:focus-visible){box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-state-information-base, #335cff)}::ng-deep [sui-card-header]{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}::ng-deep [sui-card-footer]{display:flex;align-items:center;gap:12px}::ng-deep [sui-card-media]{display:block;margin-left:calc(-1 * var(--sui-card-padding-x, 20px));margin-right:calc(-1 * var(--sui-card-padding-x, 20px));margin-bottom:calc(-1 * var(--sui-card-padding-x, 20px));overflow:hidden;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}:host:has(::ng-deep [sui-card-footer]) ::ng-deep [sui-card-media]{margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.sui-card__body{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}:host:has(>.sui-card__body:only-child){gap:0}\n"] }]
|
|
2259
2259
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }] } });
|
|
2260
2260
|
|
|
2261
2261
|
// large/xlarge: project extension (no-Figma)
|
|
@@ -2321,7 +2321,7 @@ class SuiCheckbox {
|
|
|
2321
2321
|
useExisting: forwardRef(() => SuiCheckbox),
|
|
2322
2322
|
multi: true,
|
|
2323
2323
|
},
|
|
2324
|
-
], ngImport: i0, template: "<span class=\"sui-checkbox__bg\">\n <span class=\"sui-checkbox__box\"></span>\n @if (checked() && !indeterminate()) {\n <svg class=\"sui-checkbox__check\" viewBox=\"0 0 10 8\" aria-hidden=\"true\">\n <path d=\"M1 4.5 L3.7 7 L9 1.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"/>\n </svg>\n }\n @if (indeterminate()) {\n <span class=\"sui-checkbox__dash\" aria-hidden=\"true\"></span>\n }\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=medium]){width:20px;height:20px}:host([data-sui-size=small]){width:16px;height:16px}.sui-checkbox__bg{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);background:var(--sui-bg-soft-200)}:host([data-sui-size=medium]) .sui-checkbox__bg{width:16px;height:16px}:host([data-sui-size=small]) .sui-checkbox__bg{width:14px;height:14px}.sui-checkbox__box{position:absolute;background:var(--sui-bg-white-0);border-radius:2.6px;box-shadow:var(--sui-shadow-form-box)}:host([data-sui-size=medium]) .sui-checkbox__box{width:13px;height:13px}:host([data-sui-size=small]) .sui-checkbox__box{width:11px;height:11px}.sui-checkbox__check{position:absolute;color:var(--sui-
|
|
2324
|
+
], ngImport: i0, template: "<span class=\"sui-checkbox__bg\">\n <span class=\"sui-checkbox__box\"></span>\n @if (checked() && !indeterminate()) {\n <svg class=\"sui-checkbox__check\" viewBox=\"0 0 10 8\" aria-hidden=\"true\">\n <path d=\"M1 4.5 L3.7 7 L9 1.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"/>\n </svg>\n }\n @if (indeterminate()) {\n <span class=\"sui-checkbox__dash\" aria-hidden=\"true\"></span>\n }\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=medium]){width:20px;height:20px}:host([data-sui-size=small]){width:16px;height:16px}.sui-checkbox__bg{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);background:var(--sui-bg-soft-200)}:host([data-sui-size=medium]) .sui-checkbox__bg{width:16px;height:16px}:host([data-sui-size=small]) .sui-checkbox__bg{width:14px;height:14px}.sui-checkbox__box{position:absolute;background:var(--sui-bg-white-0);border-radius:2.6px;box-shadow:var(--sui-shadow-form-box)}:host([data-sui-size=medium]) .sui-checkbox__box{width:13px;height:13px}:host([data-sui-size=small]) .sui-checkbox__box{width:11px;height:11px}.sui-checkbox__check{position:absolute;color:var(--sui-static-white, #ffffff);pointer-events:none;width:9.06px;height:6.59px}.sui-checkbox__dash{position:absolute;width:8px;height:1.5px;background:var(--sui-static-white, #ffffff);border-radius:1px}:host(:hover:not([data-sui-disabled]):not([data-sui-checked]):not([data-sui-indeterminate])) .sui-checkbox__bg{background:var(--sui-bg-sub-300)}:host(:focus-visible:not([data-sui-disabled]):not([data-sui-checked]):not([data-sui-indeterminate])) .sui-checkbox__bg{background:var(--sui-primary-base)}:host([data-sui-checked]) .sui-checkbox__bg,:host([data-sui-indeterminate]) .sui-checkbox__bg{background:var(--sui-primary-base)}:host([data-sui-checked]:hover:not([data-sui-disabled])) .sui-checkbox__bg,:host([data-sui-indeterminate]:hover:not([data-sui-disabled])) .sui-checkbox__bg{background:var(--sui-primary-dark)}:host([data-sui-checked]:focus-visible:not([data-sui-disabled])) .sui-checkbox__bg,:host([data-sui-indeterminate]:focus-visible:not([data-sui-disabled])) .sui-checkbox__bg{background:var(--sui-primary-darkest)}:host([data-sui-checked]) .sui-checkbox__box,:host([data-sui-indeterminate]) .sui-checkbox__box{display:none}:host([data-sui-disabled]){cursor:not-allowed;pointer-events:none;opacity:1}:host([data-sui-disabled]) .sui-checkbox__bg{background:var(--sui-bg-soft-200)}:host([data-sui-disabled]) .sui-checkbox__box{display:none}:host([data-sui-disabled]) .sui-checkbox__check{color:var(--sui-icon-disabled-300)}:host([data-sui-disabled]) .sui-checkbox__dash{background:var(--sui-icon-disabled-300)}:host([data-sui-size=large]){width:24px;height:24px}:host([data-sui-size=large]) .sui-checkbox__bg{width:20px;height:20px}:host([data-sui-size=large]) .sui-checkbox__box{width:17px;height:17px}:host([data-sui-size=large]) .sui-checkbox__check{width:11.33px;height:8.24px}:host([data-sui-size=large]) .sui-checkbox__dash{width:10px;height:2px}:host([data-sui-size=xlarge]){width:28px;height:28px}:host([data-sui-size=xlarge]) .sui-checkbox__bg{width:24px;height:24px}:host([data-sui-size=xlarge]) .sui-checkbox__box{width:21px;height:21px}:host([data-sui-size=xlarge]) .sui-checkbox__check{width:13.6px;height:9.9px}:host([data-sui-size=xlarge]) .sui-checkbox__dash{width:12px;height:2.5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2325
2325
|
}
|
|
2326
2326
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiCheckbox, decorators: [{
|
|
2327
2327
|
type: Component,
|
|
@@ -2346,7 +2346,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2346
2346
|
/* iOS WKWebView fix — ver CLAUDE.md "iOS :active stuck en custom buttons". */
|
|
2347
2347
|
'(touchstart)': '$event.currentTarget',
|
|
2348
2348
|
'(touchend)': '$any($event.currentTarget).blur()',
|
|
2349
|
-
}, template: "<span class=\"sui-checkbox__bg\">\n <span class=\"sui-checkbox__box\"></span>\n @if (checked() && !indeterminate()) {\n <svg class=\"sui-checkbox__check\" viewBox=\"0 0 10 8\" aria-hidden=\"true\">\n <path d=\"M1 4.5 L3.7 7 L9 1.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"/>\n </svg>\n }\n @if (indeterminate()) {\n <span class=\"sui-checkbox__dash\" aria-hidden=\"true\"></span>\n }\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=medium]){width:20px;height:20px}:host([data-sui-size=small]){width:16px;height:16px}.sui-checkbox__bg{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);background:var(--sui-bg-soft-200)}:host([data-sui-size=medium]) .sui-checkbox__bg{width:16px;height:16px}:host([data-sui-size=small]) .sui-checkbox__bg{width:14px;height:14px}.sui-checkbox__box{position:absolute;background:var(--sui-bg-white-0);border-radius:2.6px;box-shadow:var(--sui-shadow-form-box)}:host([data-sui-size=medium]) .sui-checkbox__box{width:13px;height:13px}:host([data-sui-size=small]) .sui-checkbox__box{width:11px;height:11px}.sui-checkbox__check{position:absolute;color:var(--sui-
|
|
2349
|
+
}, template: "<span class=\"sui-checkbox__bg\">\n <span class=\"sui-checkbox__box\"></span>\n @if (checked() && !indeterminate()) {\n <svg class=\"sui-checkbox__check\" viewBox=\"0 0 10 8\" aria-hidden=\"true\">\n <path d=\"M1 4.5 L3.7 7 L9 1.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"/>\n </svg>\n }\n @if (indeterminate()) {\n <span class=\"sui-checkbox__dash\" aria-hidden=\"true\"></span>\n }\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=medium]){width:20px;height:20px}:host([data-sui-size=small]){width:16px;height:16px}.sui-checkbox__bg{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);background:var(--sui-bg-soft-200)}:host([data-sui-size=medium]) .sui-checkbox__bg{width:16px;height:16px}:host([data-sui-size=small]) .sui-checkbox__bg{width:14px;height:14px}.sui-checkbox__box{position:absolute;background:var(--sui-bg-white-0);border-radius:2.6px;box-shadow:var(--sui-shadow-form-box)}:host([data-sui-size=medium]) .sui-checkbox__box{width:13px;height:13px}:host([data-sui-size=small]) .sui-checkbox__box{width:11px;height:11px}.sui-checkbox__check{position:absolute;color:var(--sui-static-white, #ffffff);pointer-events:none;width:9.06px;height:6.59px}.sui-checkbox__dash{position:absolute;width:8px;height:1.5px;background:var(--sui-static-white, #ffffff);border-radius:1px}:host(:hover:not([data-sui-disabled]):not([data-sui-checked]):not([data-sui-indeterminate])) .sui-checkbox__bg{background:var(--sui-bg-sub-300)}:host(:focus-visible:not([data-sui-disabled]):not([data-sui-checked]):not([data-sui-indeterminate])) .sui-checkbox__bg{background:var(--sui-primary-base)}:host([data-sui-checked]) .sui-checkbox__bg,:host([data-sui-indeterminate]) .sui-checkbox__bg{background:var(--sui-primary-base)}:host([data-sui-checked]:hover:not([data-sui-disabled])) .sui-checkbox__bg,:host([data-sui-indeterminate]:hover:not([data-sui-disabled])) .sui-checkbox__bg{background:var(--sui-primary-dark)}:host([data-sui-checked]:focus-visible:not([data-sui-disabled])) .sui-checkbox__bg,:host([data-sui-indeterminate]:focus-visible:not([data-sui-disabled])) .sui-checkbox__bg{background:var(--sui-primary-darkest)}:host([data-sui-checked]) .sui-checkbox__box,:host([data-sui-indeterminate]) .sui-checkbox__box{display:none}:host([data-sui-disabled]){cursor:not-allowed;pointer-events:none;opacity:1}:host([data-sui-disabled]) .sui-checkbox__bg{background:var(--sui-bg-soft-200)}:host([data-sui-disabled]) .sui-checkbox__box{display:none}:host([data-sui-disabled]) .sui-checkbox__check{color:var(--sui-icon-disabled-300)}:host([data-sui-disabled]) .sui-checkbox__dash{background:var(--sui-icon-disabled-300)}:host([data-sui-size=large]){width:24px;height:24px}:host([data-sui-size=large]) .sui-checkbox__bg{width:20px;height:20px}:host([data-sui-size=large]) .sui-checkbox__box{width:17px;height:17px}:host([data-sui-size=large]) .sui-checkbox__check{width:11.33px;height:8.24px}:host([data-sui-size=large]) .sui-checkbox__dash{width:10px;height:2px}:host([data-sui-size=xlarge]){width:28px;height:28px}:host([data-sui-size=xlarge]) .sui-checkbox__bg{width:24px;height:24px}:host([data-sui-size=xlarge]) .sui-checkbox__box{width:21px;height:21px}:host([data-sui-size=xlarge]) .sui-checkbox__check{width:13.6px;height:9.9px}:host([data-sui-size=xlarge]) .sui-checkbox__dash{width:12px;height:2.5px}\n"] }]
|
|
2350
2350
|
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
2351
2351
|
|
|
2352
2352
|
/**
|
|
@@ -2799,7 +2799,7 @@ class SuiCheckboxLabel {
|
|
|
2799
2799
|
(él dispara su propio click). Y evitar toggle cuando es el Link Button. */
|
|
2800
2800
|
if (target.closest('sui-checkbox'))
|
|
2801
2801
|
return;
|
|
2802
|
-
if (target.closest('
|
|
2802
|
+
if (target.closest('sui-link-button'))
|
|
2803
2803
|
return;
|
|
2804
2804
|
const next = !this.active();
|
|
2805
2805
|
this.active.set(next);
|
|
@@ -2841,11 +2841,11 @@ class SuiCheckboxLabel {
|
|
|
2841
2841
|
useExisting: forwardRef(() => SuiCheckboxLabel),
|
|
2842
2842
|
multi: true,
|
|
2843
2843
|
},
|
|
2844
|
-
], ngImport: i0, template: "<!-- Layout flex: el orden visual depende de [flip]. CSS rota via `order` para\n mantener un solo DOM order accesible (checkbox primero). -->\n<sui-checkbox\n class=\"sui-checkbox-label__checkbox\"\n [checked]=\"active()\"\n [indeterminate]=\"indeterminate()\"\n [disabled]=\"isDisabled()\"\n (checkedChange)=\"onCheckboxChange($event)\"\n/>\n\n<div class=\"sui-checkbox-label__content\">\n <!-- Bloque de texto: Title + Description van pegados (gap-4 en Figma). -->\n <div class=\"sui-checkbox-label__text\">\n <div class=\"sui-checkbox-label__title\">\n <span class=\"sui-checkbox-label__label\">{{ label() }}</span>\n @if (sublabel(); as sl) {\n <span class=\"sui-checkbox-label__sublabel\">{{ sl }}</span>\n }\n @if (badge()) {\n <sui-badge\n class=\"sui-checkbox-label__badge\"\n color=\"orange\"\n variant=\"light\"\n size=\"small\"\n >{{ badgeLabel() }}</sui-badge>\n }\n </div>\n\n @if (description(); as desc) {\n <p class=\"sui-checkbox-label__description\">{{ desc }}</p>\n }\n </div>\n\n @if (description() && linkLabel(); as link) {\n <button\n
|
|
2844
|
+
], ngImport: i0, template: "<!-- Layout flex: el orden visual depende de [flip]. CSS rota via `order` para\n mantener un solo DOM order accesible (checkbox primero). -->\n<sui-checkbox\n class=\"sui-checkbox-label__checkbox\"\n [checked]=\"active()\"\n [indeterminate]=\"indeterminate()\"\n [disabled]=\"isDisabled()\"\n (checkedChange)=\"onCheckboxChange($event)\"\n/>\n\n<div class=\"sui-checkbox-label__content\">\n <!-- Bloque de texto: Title + Description van pegados (gap-4 en Figma). -->\n <div class=\"sui-checkbox-label__text\">\n <div class=\"sui-checkbox-label__title\">\n <span class=\"sui-checkbox-label__label\">{{ label() }}</span>\n @if (sublabel(); as sl) {\n <span class=\"sui-checkbox-label__sublabel\">{{ sl }}</span>\n }\n @if (badge()) {\n <sui-badge\n class=\"sui-checkbox-label__badge\"\n color=\"orange\"\n variant=\"light\"\n size=\"small\"\n >{{ badgeLabel() }}</sui-badge>\n }\n </div>\n\n @if (description(); as desc) {\n <p class=\"sui-checkbox-label__description\">{{ desc }}</p>\n }\n </div>\n\n @if (description() && linkLabel(); as link) {\n <sui-link-button\n variant=\"primary\"\n size=\"small\"\n [disabled]=\"isDisabled()\"\n (clicked)=\"onLinkClick($event)\"\n >{{ link }}</sui-link-button>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;font-family:var(--sui-font-sans, \"Inter\", system-ui, sans-serif);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-tap-highlight-color:transparent}:host([data-sui-flip]) .sui-checkbox-label__checkbox{order:2}:host([data-sui-flip]) .sui-checkbox-label__content{order:1}:host([data-sui-disabled]){cursor:not-allowed}:host([data-sui-disabled]) .sui-checkbox-label__content{opacity:.5}.sui-checkbox-label__checkbox{flex-shrink:0}.sui-checkbox-label__content{display:flex;flex:1 0 0;min-width:0;flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-with-description]) .sui-checkbox-label__content{gap:10px}.sui-checkbox-label__text{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%}.sui-checkbox-label__title{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.sui-checkbox-label__label{font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-strong-950)}:host([data-sui-with-description]) .sui-checkbox-label__label{font-weight:500}.sui-checkbox-label__sublabel{font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600)}.sui-checkbox-label__badge{flex-shrink:0}.sui-checkbox-label__description{margin:0;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600);word-break:break-word}\n"], dependencies: [{ kind: "component", type: SuiCheckbox, selector: "sui-checkbox", inputs: ["size", "checked", "indeterminate", "disabled"], outputs: ["checkedChange"] }, { kind: "component", type: SuiBadge, selector: "sui-badge", inputs: ["color", "variant", "size", "type", "disabled"] }, { 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 });
|
|
2845
2845
|
}
|
|
2846
2846
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiCheckboxLabel, decorators: [{
|
|
2847
2847
|
type: Component,
|
|
2848
|
-
args: [{ selector: 'sui-checkbox-label', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiCheckbox, SuiBadge], providers: [
|
|
2848
|
+
args: [{ selector: 'sui-checkbox-label', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiCheckbox, SuiBadge, SuiLinkButton], providers: [
|
|
2849
2849
|
{
|
|
2850
2850
|
provide: NG_VALUE_ACCESSOR,
|
|
2851
2851
|
useExisting: forwardRef(() => SuiCheckboxLabel),
|
|
@@ -2856,7 +2856,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2856
2856
|
'[attr.data-sui-with-description]': 'description() ? "" : null',
|
|
2857
2857
|
'[attr.data-sui-disabled]': 'isDisabled() ? "" : null',
|
|
2858
2858
|
'(click)': 'onLabelClick($event)',
|
|
2859
|
-
}, template: "<!-- Layout flex: el orden visual depende de [flip]. CSS rota via `order` para\n mantener un solo DOM order accesible (checkbox primero). -->\n<sui-checkbox\n class=\"sui-checkbox-label__checkbox\"\n [checked]=\"active()\"\n [indeterminate]=\"indeterminate()\"\n [disabled]=\"isDisabled()\"\n (checkedChange)=\"onCheckboxChange($event)\"\n/>\n\n<div class=\"sui-checkbox-label__content\">\n <!-- Bloque de texto: Title + Description van pegados (gap-4 en Figma). -->\n <div class=\"sui-checkbox-label__text\">\n <div class=\"sui-checkbox-label__title\">\n <span class=\"sui-checkbox-label__label\">{{ label() }}</span>\n @if (sublabel(); as sl) {\n <span class=\"sui-checkbox-label__sublabel\">{{ sl }}</span>\n }\n @if (badge()) {\n <sui-badge\n class=\"sui-checkbox-label__badge\"\n color=\"orange\"\n variant=\"light\"\n size=\"small\"\n >{{ badgeLabel() }}</sui-badge>\n }\n </div>\n\n @if (description(); as desc) {\n <p class=\"sui-checkbox-label__description\">{{ desc }}</p>\n }\n </div>\n\n @if (description() && linkLabel(); as link) {\n <button\n
|
|
2859
|
+
}, template: "<!-- Layout flex: el orden visual depende de [flip]. CSS rota via `order` para\n mantener un solo DOM order accesible (checkbox primero). -->\n<sui-checkbox\n class=\"sui-checkbox-label__checkbox\"\n [checked]=\"active()\"\n [indeterminate]=\"indeterminate()\"\n [disabled]=\"isDisabled()\"\n (checkedChange)=\"onCheckboxChange($event)\"\n/>\n\n<div class=\"sui-checkbox-label__content\">\n <!-- Bloque de texto: Title + Description van pegados (gap-4 en Figma). -->\n <div class=\"sui-checkbox-label__text\">\n <div class=\"sui-checkbox-label__title\">\n <span class=\"sui-checkbox-label__label\">{{ label() }}</span>\n @if (sublabel(); as sl) {\n <span class=\"sui-checkbox-label__sublabel\">{{ sl }}</span>\n }\n @if (badge()) {\n <sui-badge\n class=\"sui-checkbox-label__badge\"\n color=\"orange\"\n variant=\"light\"\n size=\"small\"\n >{{ badgeLabel() }}</sui-badge>\n }\n </div>\n\n @if (description(); as desc) {\n <p class=\"sui-checkbox-label__description\">{{ desc }}</p>\n }\n </div>\n\n @if (description() && linkLabel(); as link) {\n <sui-link-button\n variant=\"primary\"\n size=\"small\"\n [disabled]=\"isDisabled()\"\n (clicked)=\"onLinkClick($event)\"\n >{{ link }}</sui-link-button>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;font-family:var(--sui-font-sans, \"Inter\", system-ui, sans-serif);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-tap-highlight-color:transparent}:host([data-sui-flip]) .sui-checkbox-label__checkbox{order:2}:host([data-sui-flip]) .sui-checkbox-label__content{order:1}:host([data-sui-disabled]){cursor:not-allowed}:host([data-sui-disabled]) .sui-checkbox-label__content{opacity:.5}.sui-checkbox-label__checkbox{flex-shrink:0}.sui-checkbox-label__content{display:flex;flex:1 0 0;min-width:0;flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-with-description]) .sui-checkbox-label__content{gap:10px}.sui-checkbox-label__text{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%}.sui-checkbox-label__title{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.sui-checkbox-label__label{font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-strong-950)}:host([data-sui-with-description]) .sui-checkbox-label__label{font-weight:500}.sui-checkbox-label__sublabel{font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600)}.sui-checkbox-label__badge{flex-shrink:0}.sui-checkbox-label__description{margin:0;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600);word-break:break-word}\n"] }]
|
|
2860
2860
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], badgeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeLabel", required: false }] }], linkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkLabel", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "flip", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], linkClick: [{ type: i0.Output, args: ["linkClick"] }] } });
|
|
2861
2861
|
|
|
2862
2862
|
/**
|
|
@@ -3773,7 +3773,7 @@ class SuiColorPicker {
|
|
|
3773
3773
|
this.close();
|
|
3774
3774
|
}
|
|
3775
3775
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3776
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiColorPicker, isStandalone: true, selector: "sui-color-picker", inputs: { colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, recommendedLabel: { classPropertyName: "recommendedLabel", publicName: "recommendedLabel", isSignal: true, isRequired: false, transformFunction: null }, presetsOnly: { classPropertyName: "presetsOnly", publicName: "presetsOnly", isSignal: true, isRequired: false, transformFunction: null }, alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null }, eyedropper: { classPropertyName: "eyedropper", publicName: "eyedropper", isSignal: true, isRequired: false, transformFunction: null }, showFormatLabel: { classPropertyName: "showFormatLabel", publicName: "showFormatLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", change: "change" }, host: { listeners: { "document:click": "onDocumentClick($event.target)", "document:keydown.escape": "onEscape()" }, properties: { "attr.data-sui-open": "open() ? \"\" : null", "attr.data-sui-disabled": "disabled() ? \"\" : null", "attr.data-sui-presets-only": "presetsOnly() ? \"\" : null" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, isSignal: true }, { propertyName: "hueRef", first: true, predicate: ["hueSlider"], descendants: true, isSignal: true }, { propertyName: "opacityRef", first: true, predicate: ["opacitySlider"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n type=\"button\"\n class=\"sui-color-picker__trigger\"\n [disabled]=\"disabled() || null\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"open() ? 'true' : 'false'\"\n (click)=\"toggle()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n>\n @if (value()) {\n @if (currentPreset()) {\n <sui-color-dot [color]=\"currentPreset()!\" state=\"selected\" class=\"sui-color-picker__preview\" />\n } @else {\n <sui-color-dot [customHex]=\"previewColor()\" state=\"selected\" class=\"sui-color-picker__preview\" />\n }\n } @else {\n <span class=\"sui-color-picker__placeholder-dot\" aria-hidden=\"true\"></span>\n }\n <span class=\"sui-color-picker__label\">{{ currentLabel() }}</span>\n <sui-icon name=\"arrow-down-s-line\" [size]=\"16\" class=\"sui-color-picker__chevron\" />\n</button>\n\n@if (open()) {\n <div\n class=\"sui-color-picker__panel\"\n role=\"dialog\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n @if (!presetsOnly()) {\n <!-- Secci\u00F3n \"Colors\" \u2014 Figma 4456:115716 -->\n <div class=\"sui-color-picker__section sui-color-picker__section--colors\">\n <!-- HSV Color Spectrum \u2014 Figma 4456:115425 -->\n <div\n #canvas\n class=\"sui-color-picker__canvas\"\n role=\"application\"\n aria-label=\"Saturaci\u00F3n y brillo\"\n [style.--hue-color]=\"hueColor()\"\n (pointerdown)=\"onCanvasPointerDown($event)\"\n (pointermove)=\"onCanvasPointerMove($event)\"\n (pointerup)=\"onCanvasPointerUp($event)\"\n (pointercancel)=\"onCanvasPointerUp($event)\"\n >\n <div\n class=\"sui-color-picker__canvas-thumb\"\n [style.left]=\"canvasThumbX()\"\n [style.top]=\"canvasThumbY()\"\n [style.background-color]=\"currentHex()\"\n ></div>\n </div>\n\n <!-- Hue slider \u2014 Figma 4415:53669 -->\n <div\n #hueSlider\n class=\"sui-color-picker__slider sui-color-picker__hue\"\n role=\"slider\"\n aria-label=\"Matiz\"\n aria-valuemin=\"0\"\n aria-valuemax=\"360\"\n [attr.aria-valuenow]=\"hueRounded()\"\n (pointerdown)=\"onHuePointerDown($event)\"\n (pointermove)=\"onHuePointerMove($event)\"\n (pointerup)=\"onHuePointerUp($event)\"\n (pointercancel)=\"onHuePointerUp($event)\"\n >\n <div class=\"sui-color-picker__slider-track\"></div>\n <div\n class=\"sui-color-picker__slider-thumb\"\n [style.left]=\"hueThumbX()\"\n [style.background-color]=\"hueColor()\"\n ></div>\n </div>\n\n <!-- Opacity slider \u2014 Figma 4415:53670. Visible por default (alpha on);\n ocultable con [alpha]=false. -->\n @if (alpha()) {\n <div\n #opacitySlider\n class=\"sui-color-picker__slider sui-color-picker__opacity\"\n role=\"slider\"\n aria-label=\"Opacidad\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-valuenow]=\"alphaPercent()\"\n [style.--opacity-color]=\"opacityColor()\"\n (pointerdown)=\"onOpacityPointerDown($event)\"\n (pointermove)=\"onOpacityPointerMove($event)\"\n (pointerup)=\"onOpacityPointerUp($event)\"\n (pointercancel)=\"onOpacityPointerUp($event)\"\n >\n <div class=\"sui-color-picker__slider-track\"></div>\n <div\n class=\"sui-color-picker__slider-thumb\"\n [style.left]=\"opacityThumbX()\"\n [style.--thumb-color]=\"opacityThumbColor()\"\n ></div>\n </div>\n }\n\n <!-- Color Input \u2014 Figma 4456:115720 -->\n <div class=\"sui-color-picker__color-input\">\n <!-- Format label \"Hex\" + chevron \u2014 Figma 4456:115721.\n Hex-only por ahora (ver PENDING VERIFY en el .ts). -->\n @if (showFormatLabel()) {\n <div class=\"sui-color-picker__format\" aria-hidden=\"true\">\n <span class=\"sui-color-picker__format-label\">Hex</span>\n <sui-icon name=\"arrow-down-s-line\" [size]=\"20\" class=\"sui-color-picker__format-chevron\" />\n </div>\n }\n\n <!-- Input row \u2014 Figma 4456:115724: sip | hex | opacity -->\n <div class=\"sui-color-picker__input-row\">\n <!-- Sip (eyedropper) \u2014 Figma 4456:115796. Solo con EyeDropper API. -->\n @if (showEyedropper()) {\n <button\n type=\"button\"\n class=\"sui-color-picker__sip\"\n aria-label=\"Cuentagotas\"\n (click)=\"onEyedropper()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"sip-line\" [size]=\"20\" />\n </button>\n }\n\n <!-- Hex field \u2014 Figma 4456:115725 / 4456:115726: el texto va SIN\n prefijo '#' (Figma muestra \"335CFF\" pelado dentro de la celda). -->\n <div class=\"sui-color-picker__hex-cell\">\n <input\n class=\"sui-color-picker__hex-field\"\n type=\"text\"\n inputmode=\"text\"\n autocomplete=\"off\"\n spellcheck=\"false\"\n maxlength=\"8\"\n aria-label=\"Valor hexadecimal\"\n [value]=\"hexDisplayValue()\"\n (input)=\"onHexInputChange($event)\"\n (keydown)=\"onHexKeyDown($event)\"\n (blur)=\"onHexCommit()\"\n />\n </div>\n\n <!-- Opacity field \"%\" \u2014 Figma 4456:115727. Visible por default\n (alpha on); ocultable con [alpha]=false. -->\n @if (alpha()) {\n <div class=\"sui-color-picker__opacity-cell\">\n <input\n class=\"sui-color-picker__opacity-field\"\n type=\"text\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n maxlength=\"3\"\n aria-label=\"Opacidad\"\n [value]=\"alphaPercent()\"\n (change)=\"onOpacityFieldCommit($event)\"\n (keydown)=\"onHexKeyDown($event)\"\n />\n <span class=\"sui-color-picker__opacity-suffix\" aria-hidden=\"true\">%</span>\n </div>\n }\n </div>\n </div>\n </div>\n }\n\n <!-- Secci\u00F3n \"Recommended Colors\" \u2014 Figma 4456:115765 -->\n <div class=\"sui-color-picker__section sui-color-picker__section--recommended\">\n <p class=\"sui-color-picker__panel-label\">{{ recommendedLabel() }}</p>\n <div class=\"sui-color-picker__grid\" role=\"radiogroup\">\n @for (c of colors(); track c) {\n <sui-color-dot\n [color]=\"c\"\n [state]=\"currentPreset() === c ? 'selected' : 'default'\"\n (clicked)=\"onPresetClick(c)\"\n />\n }\n </div>\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:inline-block;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-color-picker__trigger{display:inline-flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-8);cursor:pointer;appearance:none;font:inherit;color:var(--sui-text-strong-950);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);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)}.sui-color-picker__trigger:hover{background:var(--sui-bg-weak-50)}:host([data-sui-open]) .sui-color-picker__trigger{border-color:var(--sui-stroke-strong-950, var(--sui-text-strong-950))}.sui-color-picker__trigger:focus-visible{outline:2px solid var(--sui-stroke-strong-950, var(--sui-text-strong-950));outline-offset:2px}.sui-color-picker__trigger:active{transform:none}:host([data-sui-disabled]) .sui-color-picker__trigger{background:var(--sui-bg-weak-50);color:var(--sui-text-disabled-300);cursor:not-allowed;pointer-events:none}.sui-color-picker__placeholder-dot{display:inline-block;width:24px;height:24px;border-radius:50%;background:var(--sui-bg-soft-200)}.sui-color-picker__label{flex:1 0 auto;white-space:nowrap}.sui-color-picker__chevron{flex-shrink:0;color:var(--sui-icon-sub-600);transition:transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-open]) .sui-color-picker__chevron{transform:rotate(180deg)}.sui-color-picker__panel{position:absolute;top:calc(100% + 6px);left:0;z-index:100;width:272px;box-sizing:border-box;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-16);box-shadow:var(--sui-shadow-medium);overflow:hidden;display:flex;flex-direction:column;animation:sui-color-picker__fade var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}@keyframes sui-color-picker__fade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.sui-color-picker__section{box-sizing:border-box;display:flex;flex-direction:column;gap:12px;padding:16px;width:100%}.sui-color-picker__section--colors{border-bottom:1px solid var(--sui-stroke-soft-200)}.sui-color-picker__section--recommended{gap:8px}:host([data-sui-presets-only]) .sui-color-picker__section--recommended{border-bottom:none}.sui-color-picker__canvas{position:relative;width:100%;height:232px;border-radius:var(--sui-radius-8);cursor:crosshair;-webkit-user-select:none;user-select:none;touch-action:none;overflow:hidden;background-color:var(--hue-color, #335cff);background-image:linear-gradient(to top,#000,#0000),linear-gradient(to right,#fff,#fff0)}.sui-color-picker__canvas-thumb{position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid var(--sui-static-white, #fff);box-shadow:0 0 0 1px #00000026,0 1px 2px #0003;transform:translate(-50%,-50%);pointer-events:none}.sui-color-picker__slider{position:relative;width:100%;height:16px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none}.sui-color-picker__slider-track{position:absolute;left:0;right:0;top:4px;height:8px;border-radius:var(--sui-radius-full);overflow:hidden}.sui-color-picker__hue .sui-color-picker__slider-track{background-image:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.sui-color-picker__opacity .sui-color-picker__slider-track{background-color:#fff;background-image:linear-gradient(to right,transparent,var(--opacity-color, #335cff)),conic-gradient(var(--sui-bg-soft-200) 0 25%,transparent 0 50%,var(--sui-bg-soft-200) 0 75%,transparent 0);background-size:auto,10.88px 10.88px}.sui-color-picker__slider-thumb{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;border:2px solid var(--sui-static-white, #fff);box-shadow:0 0 0 1px #00000026,0 1px 2px #0003;transform:translate(-50%,-50%);pointer-events:none}.sui-color-picker__opacity .sui-color-picker__slider-thumb{background-image:linear-gradient(var(--thumb-color, #335cff),var(--thumb-color, #335cff)),conic-gradient(var(--sui-bg-soft-200) 0 25%,#fff 0 50%,var(--sui-bg-soft-200) 0 75%,#fff 0);background-size:auto,6px 6px}.sui-color-picker__color-input{display:flex;flex-direction:column;gap:4px;width:100%}.sui-color-picker__format{display:flex;align-items:center;gap:2px;appearance:none;border:none;background:transparent;padding:0;cursor:default;font:inherit;color:var(--sui-text-strong-950)}.sui-color-picker__format-label{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);white-space:nowrap}.sui-color-picker__format-chevron{flex-shrink:0;color:var(--sui-icon-sub-600)}.sui-color-picker__input-row{box-sizing:border-box;display:flex;align-items:stretch;width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-8);overflow:hidden}.sui-color-picker__sip{display:flex;align-items:center;justify-content:center;padding:6px;border:none;border-right:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);color:var(--sui-icon-sub-600);cursor:pointer;appearance:none;flex-shrink:0;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-color-picker__sip:hover{background:var(--sui-bg-weak-50)}.sui-color-picker__sip:focus-visible{outline:2px solid var(--sui-stroke-strong-950, var(--sui-text-strong-950));outline-offset:-2px}.sui-color-picker__sip:active{transform:none}.sui-color-picker__hex-cell{box-sizing:border-box;display:flex;align-items:center;flex:1 0 0;min-width:0;padding:6px 10px;border-right:1px solid var(--sui-stroke-soft-200)}.sui-color-picker__hex-cell:last-child{border-right:none}.sui-color-picker__hex-field{flex:1 0 0;min-width:0;width:100%;border:none;outline:none;background:transparent;padding:0;appearance:none;color:var(--sui-text-strong-950);font-family:inherit;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);text-transform:uppercase}.sui-color-picker__hex-field::placeholder{color:var(--sui-text-soft-400);text-transform:none}.sui-color-picker__opacity-cell{box-sizing:border-box;display:flex;align-items:center;flex-shrink:0;padding:6px 10px}.sui-color-picker__opacity-field{width:3.5ch;border:none;outline:none;background:transparent;padding:0;appearance:none;text-align:right;color:var(--sui-text-sub-600);font-family:inherit;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)}.sui-color-picker__opacity-suffix{color:var(--sui-text-sub-600);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)}.sui-color-picker__panel-label{margin:0;font-size:var(--sui-type-paragraph-xs-size);font-weight:var(--sui-type-paragraph-xs-weight);line-height:var(--sui-type-paragraph-xs-line);letter-spacing:var(--sui-type-paragraph-xs-spacing);color:var(--sui-text-sub-600)}.sui-color-picker__grid{display:flex;flex-wrap:wrap;gap:4px;width:100%}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiColorDot, selector: "sui-color-dot", inputs: ["color", "customHex", "state", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3776
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiColorPicker, isStandalone: true, selector: "sui-color-picker", inputs: { colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, recommendedLabel: { classPropertyName: "recommendedLabel", publicName: "recommendedLabel", isSignal: true, isRequired: false, transformFunction: null }, presetsOnly: { classPropertyName: "presetsOnly", publicName: "presetsOnly", isSignal: true, isRequired: false, transformFunction: null }, alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null }, eyedropper: { classPropertyName: "eyedropper", publicName: "eyedropper", isSignal: true, isRequired: false, transformFunction: null }, showFormatLabel: { classPropertyName: "showFormatLabel", publicName: "showFormatLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", change: "change" }, host: { listeners: { "document:click": "onDocumentClick($event.target)", "document:keydown.escape": "onEscape()" }, properties: { "attr.data-sui-open": "open() ? \"\" : null", "attr.data-sui-disabled": "disabled() ? \"\" : null", "attr.data-sui-presets-only": "presetsOnly() ? \"\" : null" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, isSignal: true }, { propertyName: "hueRef", first: true, predicate: ["hueSlider"], descendants: true, isSignal: true }, { propertyName: "opacityRef", first: true, predicate: ["opacitySlider"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n type=\"button\"\n class=\"sui-color-picker__trigger\"\n [disabled]=\"disabled() || null\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"open() ? 'true' : 'false'\"\n (click)=\"toggle()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n>\n @if (value()) {\n @if (currentPreset()) {\n <sui-color-dot [color]=\"currentPreset()!\" state=\"selected\" class=\"sui-color-picker__preview\" />\n } @else {\n <sui-color-dot [customHex]=\"previewColor()\" state=\"selected\" class=\"sui-color-picker__preview\" />\n }\n } @else {\n <span class=\"sui-color-picker__placeholder-dot\" aria-hidden=\"true\"></span>\n }\n <span class=\"sui-color-picker__label\">{{ currentLabel() }}</span>\n <sui-icon name=\"arrow-down-s-line\" [size]=\"16\" class=\"sui-color-picker__chevron\" />\n</button>\n\n@if (open()) {\n <div\n class=\"sui-color-picker__panel\"\n role=\"dialog\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n @if (!presetsOnly()) {\n <!-- Secci\u00F3n \"Colors\" \u2014 Figma 4456:115716 -->\n <div class=\"sui-color-picker__section sui-color-picker__section--colors\">\n <!-- HSV Color Spectrum \u2014 Figma 4456:115425 -->\n <div\n #canvas\n class=\"sui-color-picker__canvas\"\n role=\"application\"\n aria-label=\"Saturaci\u00F3n y brillo\"\n [style.--hue-color]=\"hueColor()\"\n (pointerdown)=\"onCanvasPointerDown($event)\"\n (pointermove)=\"onCanvasPointerMove($event)\"\n (pointerup)=\"onCanvasPointerUp($event)\"\n (pointercancel)=\"onCanvasPointerUp($event)\"\n >\n <div\n class=\"sui-color-picker__canvas-thumb\"\n [style.left]=\"canvasThumbX()\"\n [style.top]=\"canvasThumbY()\"\n [style.background-color]=\"currentHex()\"\n ></div>\n </div>\n\n <!-- Hue slider \u2014 Figma 4415:53669 -->\n <div\n #hueSlider\n class=\"sui-color-picker__slider sui-color-picker__hue\"\n role=\"slider\"\n aria-label=\"Matiz\"\n aria-valuemin=\"0\"\n aria-valuemax=\"360\"\n [attr.aria-valuenow]=\"hueRounded()\"\n (pointerdown)=\"onHuePointerDown($event)\"\n (pointermove)=\"onHuePointerMove($event)\"\n (pointerup)=\"onHuePointerUp($event)\"\n (pointercancel)=\"onHuePointerUp($event)\"\n >\n <div class=\"sui-color-picker__slider-track\"></div>\n <div\n class=\"sui-color-picker__slider-thumb\"\n [style.left]=\"hueThumbX()\"\n [style.background-color]=\"hueColor()\"\n ></div>\n </div>\n\n <!-- Opacity slider \u2014 Figma 4415:53670. Visible por default (alpha on);\n ocultable con [alpha]=false. -->\n @if (alpha()) {\n <div\n #opacitySlider\n class=\"sui-color-picker__slider sui-color-picker__opacity\"\n role=\"slider\"\n aria-label=\"Opacidad\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-valuenow]=\"alphaPercent()\"\n [style.--opacity-color]=\"opacityColor()\"\n (pointerdown)=\"onOpacityPointerDown($event)\"\n (pointermove)=\"onOpacityPointerMove($event)\"\n (pointerup)=\"onOpacityPointerUp($event)\"\n (pointercancel)=\"onOpacityPointerUp($event)\"\n >\n <div class=\"sui-color-picker__slider-track\"></div>\n <div\n class=\"sui-color-picker__slider-thumb\"\n [style.left]=\"opacityThumbX()\"\n [style.--thumb-color]=\"opacityThumbColor()\"\n ></div>\n </div>\n }\n\n <!-- Color Input \u2014 Figma 4456:115720 -->\n <div class=\"sui-color-picker__color-input\">\n <!-- Format label \"Hex\" + chevron \u2014 Figma 4456:115721.\n Hex-only por ahora (ver PENDING VERIFY en el .ts). -->\n @if (showFormatLabel()) {\n <div class=\"sui-color-picker__format\" aria-hidden=\"true\">\n <span class=\"sui-color-picker__format-label\">Hex</span>\n <sui-icon name=\"arrow-down-s-line\" [size]=\"20\" class=\"sui-color-picker__format-chevron\" />\n </div>\n }\n\n <!-- Input row \u2014 Figma 4456:115724: sip | hex | opacity -->\n <div class=\"sui-color-picker__input-row\">\n <!-- Sip (eyedropper) \u2014 Figma 4456:115796. Solo con EyeDropper API. -->\n @if (showEyedropper()) {\n <button\n type=\"button\"\n class=\"sui-color-picker__sip\"\n aria-label=\"Cuentagotas\"\n (click)=\"onEyedropper()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"sip-line\" [size]=\"20\" />\n </button>\n }\n\n <!-- Hex field \u2014 Figma 4456:115725 / 4456:115726: el texto va SIN\n prefijo '#' (Figma muestra \"335CFF\" pelado dentro de la celda). -->\n <div class=\"sui-color-picker__hex-cell\">\n <input\n class=\"sui-color-picker__hex-field\"\n type=\"text\"\n inputmode=\"text\"\n autocomplete=\"off\"\n spellcheck=\"false\"\n maxlength=\"8\"\n aria-label=\"Valor hexadecimal\"\n [value]=\"hexDisplayValue()\"\n (input)=\"onHexInputChange($event)\"\n (keydown)=\"onHexKeyDown($event)\"\n (blur)=\"onHexCommit()\"\n />\n </div>\n\n <!-- Opacity field \"%\" \u2014 Figma 4456:115727. Visible por default\n (alpha on); ocultable con [alpha]=false. -->\n @if (alpha()) {\n <div class=\"sui-color-picker__opacity-cell\">\n <input\n class=\"sui-color-picker__opacity-field\"\n type=\"text\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n maxlength=\"3\"\n aria-label=\"Opacidad\"\n [value]=\"alphaPercent()\"\n (change)=\"onOpacityFieldCommit($event)\"\n (keydown)=\"onHexKeyDown($event)\"\n />\n <span class=\"sui-color-picker__opacity-suffix\" aria-hidden=\"true\">%</span>\n </div>\n }\n </div>\n </div>\n </div>\n }\n\n <!-- Secci\u00F3n \"Recommended Colors\" \u2014 Figma 4456:115765 -->\n <div class=\"sui-color-picker__section sui-color-picker__section--recommended\">\n <p class=\"sui-color-picker__panel-label\">{{ recommendedLabel() }}</p>\n <div class=\"sui-color-picker__grid\" role=\"radiogroup\">\n @for (c of colors(); track c) {\n <sui-color-dot\n [color]=\"c\"\n [state]=\"currentPreset() === c ? 'selected' : 'default'\"\n (clicked)=\"onPresetClick(c)\"\n />\n }\n </div>\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:inline-block;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-color-picker__trigger{display:inline-flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-8);cursor:pointer;appearance:none;font:inherit;color:var(--sui-text-strong-950);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);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)}.sui-color-picker__trigger:hover{background:var(--sui-bg-weak-50)}:host([data-sui-open]) .sui-color-picker__trigger{border-color:var(--sui-stroke-strong-950, var(--sui-text-strong-950))}.sui-color-picker__trigger:focus-visible{outline:2px solid var(--sui-stroke-strong-950, var(--sui-text-strong-950));outline-offset:2px}.sui-color-picker__trigger:active{transform:none}:host([data-sui-disabled]) .sui-color-picker__trigger{background:var(--sui-bg-weak-50);color:var(--sui-text-disabled-300);cursor:not-allowed;pointer-events:none}.sui-color-picker__placeholder-dot{display:inline-block;width:24px;height:24px;border-radius:50%;background:var(--sui-bg-soft-200)}.sui-color-picker__label{flex:1 0 auto;white-space:nowrap}.sui-color-picker__chevron{flex-shrink:0;color:var(--sui-icon-sub-600);transition:transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-open]) .sui-color-picker__chevron{transform:rotate(180deg)}.sui-color-picker__panel{position:absolute;top:calc(100% + 6px);left:0;z-index:100;width:272px;box-sizing:border-box;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-16);box-shadow:var(--sui-shadow-medium);overflow:hidden;display:flex;flex-direction:column;animation:sui-color-picker__fade var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}@keyframes sui-color-picker__fade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.sui-color-picker__section{box-sizing:border-box;display:flex;flex-direction:column;gap:12px;padding:16px;width:100%}.sui-color-picker__section--colors{border-bottom:1px solid var(--sui-stroke-soft-200)}.sui-color-picker__section--recommended{gap:8px}:host([data-sui-presets-only]) .sui-color-picker__section--recommended{border-bottom:none}.sui-color-picker__canvas{position:relative;width:100%;height:232px;border-radius:var(--sui-radius-8);cursor:crosshair;-webkit-user-select:none;user-select:none;touch-action:none;overflow:hidden;background-color:var(--hue-color, #335cff);background-image:linear-gradient(to top,#000,#0000),linear-gradient(to right,#fff,#fff0)}.sui-color-picker__canvas-thumb{position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid var(--sui-static-white, #fff);box-shadow:0 0 0 1px #00000026,0 1px 2px #0003;transform:translate(-50%,-50%);pointer-events:none}.sui-color-picker__slider{position:relative;width:100%;height:16px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none}.sui-color-picker__slider-track{position:absolute;left:0;right:0;top:4px;height:8px;border-radius:var(--sui-radius-full);overflow:hidden}.sui-color-picker__hue .sui-color-picker__slider-track{background-image:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.sui-color-picker__opacity .sui-color-picker__slider-track{background-color:#fff;background-image:linear-gradient(to right,transparent,var(--opacity-color, #335cff)),conic-gradient(#ebebeb 0 25%,transparent 0 50%,#ebebeb 0 75%,transparent 0);background-size:auto,10.88px 10.88px}.sui-color-picker__slider-thumb{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;border:2px solid var(--sui-static-white, #fff);box-shadow:0 0 0 1px #00000026,0 1px 2px #0003;transform:translate(-50%,-50%);pointer-events:none}.sui-color-picker__opacity .sui-color-picker__slider-thumb{background-image:linear-gradient(var(--thumb-color, #335cff),var(--thumb-color, #335cff)),conic-gradient(#ebebeb 0 25%,#fff 0 50%,#ebebeb 0 75%,#fff 0);background-size:auto,6px 6px}.sui-color-picker__color-input{display:flex;flex-direction:column;gap:4px;width:100%}.sui-color-picker__format{display:flex;align-items:center;gap:2px;appearance:none;border:none;background:transparent;padding:0;cursor:default;font:inherit;color:var(--sui-text-strong-950)}.sui-color-picker__format-label{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);white-space:nowrap}.sui-color-picker__format-chevron{flex-shrink:0;color:var(--sui-icon-sub-600)}.sui-color-picker__input-row{box-sizing:border-box;display:flex;align-items:stretch;width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-8);overflow:hidden}.sui-color-picker__sip{display:flex;align-items:center;justify-content:center;padding:6px;border:none;border-right:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);color:var(--sui-icon-sub-600);cursor:pointer;appearance:none;flex-shrink:0;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-color-picker__sip:hover{background:var(--sui-bg-weak-50)}.sui-color-picker__sip:focus-visible{outline:2px solid var(--sui-stroke-strong-950, var(--sui-text-strong-950));outline-offset:-2px}.sui-color-picker__sip:active{transform:none}.sui-color-picker__hex-cell{box-sizing:border-box;display:flex;align-items:center;flex:1 0 0;min-width:0;padding:6px 10px;border-right:1px solid var(--sui-stroke-soft-200)}.sui-color-picker__hex-cell:last-child{border-right:none}.sui-color-picker__hex-field{flex:1 0 0;min-width:0;width:100%;border:none;outline:none;background:transparent;padding:0;appearance:none;color:var(--sui-text-strong-950);font-family:inherit;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);text-transform:uppercase}.sui-color-picker__hex-field::placeholder{color:var(--sui-text-soft-400);text-transform:none}.sui-color-picker__opacity-cell{box-sizing:border-box;display:flex;align-items:center;flex-shrink:0;padding:6px 10px}.sui-color-picker__opacity-field{width:3.5ch;border:none;outline:none;background:transparent;padding:0;appearance:none;text-align:right;color:var(--sui-text-sub-600);font-family:inherit;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)}.sui-color-picker__opacity-suffix{color:var(--sui-text-sub-600);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)}.sui-color-picker__panel-label{margin:0;font-size:var(--sui-type-paragraph-xs-size);font-weight:var(--sui-type-paragraph-xs-weight);line-height:var(--sui-type-paragraph-xs-line);letter-spacing:var(--sui-type-paragraph-xs-spacing);color:var(--sui-text-sub-600)}.sui-color-picker__grid{display:flex;flex-wrap:wrap;gap:4px;width:100%}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiColorDot, selector: "sui-color-dot", inputs: ["color", "customHex", "state", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3777
3777
|
}
|
|
3778
3778
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiColorPicker, decorators: [{
|
|
3779
3779
|
type: Component,
|
|
@@ -3781,7 +3781,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
3781
3781
|
'[attr.data-sui-open]': 'open() ? "" : null',
|
|
3782
3782
|
'[attr.data-sui-disabled]': 'disabled() ? "" : null',
|
|
3783
3783
|
'[attr.data-sui-presets-only]': 'presetsOnly() ? "" : null',
|
|
3784
|
-
}, template: "<button\n type=\"button\"\n class=\"sui-color-picker__trigger\"\n [disabled]=\"disabled() || null\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"open() ? 'true' : 'false'\"\n (click)=\"toggle()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n>\n @if (value()) {\n @if (currentPreset()) {\n <sui-color-dot [color]=\"currentPreset()!\" state=\"selected\" class=\"sui-color-picker__preview\" />\n } @else {\n <sui-color-dot [customHex]=\"previewColor()\" state=\"selected\" class=\"sui-color-picker__preview\" />\n }\n } @else {\n <span class=\"sui-color-picker__placeholder-dot\" aria-hidden=\"true\"></span>\n }\n <span class=\"sui-color-picker__label\">{{ currentLabel() }}</span>\n <sui-icon name=\"arrow-down-s-line\" [size]=\"16\" class=\"sui-color-picker__chevron\" />\n</button>\n\n@if (open()) {\n <div\n class=\"sui-color-picker__panel\"\n role=\"dialog\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n @if (!presetsOnly()) {\n <!-- Secci\u00F3n \"Colors\" \u2014 Figma 4456:115716 -->\n <div class=\"sui-color-picker__section sui-color-picker__section--colors\">\n <!-- HSV Color Spectrum \u2014 Figma 4456:115425 -->\n <div\n #canvas\n class=\"sui-color-picker__canvas\"\n role=\"application\"\n aria-label=\"Saturaci\u00F3n y brillo\"\n [style.--hue-color]=\"hueColor()\"\n (pointerdown)=\"onCanvasPointerDown($event)\"\n (pointermove)=\"onCanvasPointerMove($event)\"\n (pointerup)=\"onCanvasPointerUp($event)\"\n (pointercancel)=\"onCanvasPointerUp($event)\"\n >\n <div\n class=\"sui-color-picker__canvas-thumb\"\n [style.left]=\"canvasThumbX()\"\n [style.top]=\"canvasThumbY()\"\n [style.background-color]=\"currentHex()\"\n ></div>\n </div>\n\n <!-- Hue slider \u2014 Figma 4415:53669 -->\n <div\n #hueSlider\n class=\"sui-color-picker__slider sui-color-picker__hue\"\n role=\"slider\"\n aria-label=\"Matiz\"\n aria-valuemin=\"0\"\n aria-valuemax=\"360\"\n [attr.aria-valuenow]=\"hueRounded()\"\n (pointerdown)=\"onHuePointerDown($event)\"\n (pointermove)=\"onHuePointerMove($event)\"\n (pointerup)=\"onHuePointerUp($event)\"\n (pointercancel)=\"onHuePointerUp($event)\"\n >\n <div class=\"sui-color-picker__slider-track\"></div>\n <div\n class=\"sui-color-picker__slider-thumb\"\n [style.left]=\"hueThumbX()\"\n [style.background-color]=\"hueColor()\"\n ></div>\n </div>\n\n <!-- Opacity slider \u2014 Figma 4415:53670. Visible por default (alpha on);\n ocultable con [alpha]=false. -->\n @if (alpha()) {\n <div\n #opacitySlider\n class=\"sui-color-picker__slider sui-color-picker__opacity\"\n role=\"slider\"\n aria-label=\"Opacidad\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-valuenow]=\"alphaPercent()\"\n [style.--opacity-color]=\"opacityColor()\"\n (pointerdown)=\"onOpacityPointerDown($event)\"\n (pointermove)=\"onOpacityPointerMove($event)\"\n (pointerup)=\"onOpacityPointerUp($event)\"\n (pointercancel)=\"onOpacityPointerUp($event)\"\n >\n <div class=\"sui-color-picker__slider-track\"></div>\n <div\n class=\"sui-color-picker__slider-thumb\"\n [style.left]=\"opacityThumbX()\"\n [style.--thumb-color]=\"opacityThumbColor()\"\n ></div>\n </div>\n }\n\n <!-- Color Input \u2014 Figma 4456:115720 -->\n <div class=\"sui-color-picker__color-input\">\n <!-- Format label \"Hex\" + chevron \u2014 Figma 4456:115721.\n Hex-only por ahora (ver PENDING VERIFY en el .ts). -->\n @if (showFormatLabel()) {\n <div class=\"sui-color-picker__format\" aria-hidden=\"true\">\n <span class=\"sui-color-picker__format-label\">Hex</span>\n <sui-icon name=\"arrow-down-s-line\" [size]=\"20\" class=\"sui-color-picker__format-chevron\" />\n </div>\n }\n\n <!-- Input row \u2014 Figma 4456:115724: sip | hex | opacity -->\n <div class=\"sui-color-picker__input-row\">\n <!-- Sip (eyedropper) \u2014 Figma 4456:115796. Solo con EyeDropper API. -->\n @if (showEyedropper()) {\n <button\n type=\"button\"\n class=\"sui-color-picker__sip\"\n aria-label=\"Cuentagotas\"\n (click)=\"onEyedropper()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"sip-line\" [size]=\"20\" />\n </button>\n }\n\n <!-- Hex field \u2014 Figma 4456:115725 / 4456:115726: el texto va SIN\n prefijo '#' (Figma muestra \"335CFF\" pelado dentro de la celda). -->\n <div class=\"sui-color-picker__hex-cell\">\n <input\n class=\"sui-color-picker__hex-field\"\n type=\"text\"\n inputmode=\"text\"\n autocomplete=\"off\"\n spellcheck=\"false\"\n maxlength=\"8\"\n aria-label=\"Valor hexadecimal\"\n [value]=\"hexDisplayValue()\"\n (input)=\"onHexInputChange($event)\"\n (keydown)=\"onHexKeyDown($event)\"\n (blur)=\"onHexCommit()\"\n />\n </div>\n\n <!-- Opacity field \"%\" \u2014 Figma 4456:115727. Visible por default\n (alpha on); ocultable con [alpha]=false. -->\n @if (alpha()) {\n <div class=\"sui-color-picker__opacity-cell\">\n <input\n class=\"sui-color-picker__opacity-field\"\n type=\"text\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n maxlength=\"3\"\n aria-label=\"Opacidad\"\n [value]=\"alphaPercent()\"\n (change)=\"onOpacityFieldCommit($event)\"\n (keydown)=\"onHexKeyDown($event)\"\n />\n <span class=\"sui-color-picker__opacity-suffix\" aria-hidden=\"true\">%</span>\n </div>\n }\n </div>\n </div>\n </div>\n }\n\n <!-- Secci\u00F3n \"Recommended Colors\" \u2014 Figma 4456:115765 -->\n <div class=\"sui-color-picker__section sui-color-picker__section--recommended\">\n <p class=\"sui-color-picker__panel-label\">{{ recommendedLabel() }}</p>\n <div class=\"sui-color-picker__grid\" role=\"radiogroup\">\n @for (c of colors(); track c) {\n <sui-color-dot\n [color]=\"c\"\n [state]=\"currentPreset() === c ? 'selected' : 'default'\"\n (clicked)=\"onPresetClick(c)\"\n />\n }\n </div>\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:inline-block;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-color-picker__trigger{display:inline-flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-8);cursor:pointer;appearance:none;font:inherit;color:var(--sui-text-strong-950);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);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)}.sui-color-picker__trigger:hover{background:var(--sui-bg-weak-50)}:host([data-sui-open]) .sui-color-picker__trigger{border-color:var(--sui-stroke-strong-950, var(--sui-text-strong-950))}.sui-color-picker__trigger:focus-visible{outline:2px solid var(--sui-stroke-strong-950, var(--sui-text-strong-950));outline-offset:2px}.sui-color-picker__trigger:active{transform:none}:host([data-sui-disabled]) .sui-color-picker__trigger{background:var(--sui-bg-weak-50);color:var(--sui-text-disabled-300);cursor:not-allowed;pointer-events:none}.sui-color-picker__placeholder-dot{display:inline-block;width:24px;height:24px;border-radius:50%;background:var(--sui-bg-soft-200)}.sui-color-picker__label{flex:1 0 auto;white-space:nowrap}.sui-color-picker__chevron{flex-shrink:0;color:var(--sui-icon-sub-600);transition:transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-open]) .sui-color-picker__chevron{transform:rotate(180deg)}.sui-color-picker__panel{position:absolute;top:calc(100% + 6px);left:0;z-index:100;width:272px;box-sizing:border-box;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-16);box-shadow:var(--sui-shadow-medium);overflow:hidden;display:flex;flex-direction:column;animation:sui-color-picker__fade var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}@keyframes sui-color-picker__fade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.sui-color-picker__section{box-sizing:border-box;display:flex;flex-direction:column;gap:12px;padding:16px;width:100%}.sui-color-picker__section--colors{border-bottom:1px solid var(--sui-stroke-soft-200)}.sui-color-picker__section--recommended{gap:8px}:host([data-sui-presets-only]) .sui-color-picker__section--recommended{border-bottom:none}.sui-color-picker__canvas{position:relative;width:100%;height:232px;border-radius:var(--sui-radius-8);cursor:crosshair;-webkit-user-select:none;user-select:none;touch-action:none;overflow:hidden;background-color:var(--hue-color, #335cff);background-image:linear-gradient(to top,#000,#0000),linear-gradient(to right,#fff,#fff0)}.sui-color-picker__canvas-thumb{position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid var(--sui-static-white, #fff);box-shadow:0 0 0 1px #00000026,0 1px 2px #0003;transform:translate(-50%,-50%);pointer-events:none}.sui-color-picker__slider{position:relative;width:100%;height:16px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none}.sui-color-picker__slider-track{position:absolute;left:0;right:0;top:4px;height:8px;border-radius:var(--sui-radius-full);overflow:hidden}.sui-color-picker__hue .sui-color-picker__slider-track{background-image:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.sui-color-picker__opacity .sui-color-picker__slider-track{background-color:#fff;background-image:linear-gradient(to right,transparent,var(--opacity-color, #335cff)),conic-gradient(var(--sui-bg-soft-200) 0 25%,transparent 0 50%,var(--sui-bg-soft-200) 0 75%,transparent 0);background-size:auto,10.88px 10.88px}.sui-color-picker__slider-thumb{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;border:2px solid var(--sui-static-white, #fff);box-shadow:0 0 0 1px #00000026,0 1px 2px #0003;transform:translate(-50%,-50%);pointer-events:none}.sui-color-picker__opacity .sui-color-picker__slider-thumb{background-image:linear-gradient(var(--thumb-color, #335cff),var(--thumb-color, #335cff)),conic-gradient(var(--sui-bg-soft-200) 0 25%,#fff 0 50%,var(--sui-bg-soft-200) 0 75%,#fff 0);background-size:auto,6px 6px}.sui-color-picker__color-input{display:flex;flex-direction:column;gap:4px;width:100%}.sui-color-picker__format{display:flex;align-items:center;gap:2px;appearance:none;border:none;background:transparent;padding:0;cursor:default;font:inherit;color:var(--sui-text-strong-950)}.sui-color-picker__format-label{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);white-space:nowrap}.sui-color-picker__format-chevron{flex-shrink:0;color:var(--sui-icon-sub-600)}.sui-color-picker__input-row{box-sizing:border-box;display:flex;align-items:stretch;width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-8);overflow:hidden}.sui-color-picker__sip{display:flex;align-items:center;justify-content:center;padding:6px;border:none;border-right:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);color:var(--sui-icon-sub-600);cursor:pointer;appearance:none;flex-shrink:0;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-color-picker__sip:hover{background:var(--sui-bg-weak-50)}.sui-color-picker__sip:focus-visible{outline:2px solid var(--sui-stroke-strong-950, var(--sui-text-strong-950));outline-offset:-2px}.sui-color-picker__sip:active{transform:none}.sui-color-picker__hex-cell{box-sizing:border-box;display:flex;align-items:center;flex:1 0 0;min-width:0;padding:6px 10px;border-right:1px solid var(--sui-stroke-soft-200)}.sui-color-picker__hex-cell:last-child{border-right:none}.sui-color-picker__hex-field{flex:1 0 0;min-width:0;width:100%;border:none;outline:none;background:transparent;padding:0;appearance:none;color:var(--sui-text-strong-950);font-family:inherit;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);text-transform:uppercase}.sui-color-picker__hex-field::placeholder{color:var(--sui-text-soft-400);text-transform:none}.sui-color-picker__opacity-cell{box-sizing:border-box;display:flex;align-items:center;flex-shrink:0;padding:6px 10px}.sui-color-picker__opacity-field{width:3.5ch;border:none;outline:none;background:transparent;padding:0;appearance:none;text-align:right;color:var(--sui-text-sub-600);font-family:inherit;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)}.sui-color-picker__opacity-suffix{color:var(--sui-text-sub-600);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)}.sui-color-picker__panel-label{margin:0;font-size:var(--sui-type-paragraph-xs-size);font-weight:var(--sui-type-paragraph-xs-weight);line-height:var(--sui-type-paragraph-xs-line);letter-spacing:var(--sui-type-paragraph-xs-spacing);color:var(--sui-text-sub-600)}.sui-color-picker__grid{display:flex;flex-wrap:wrap;gap:4px;width:100%}\n"] }]
|
|
3784
|
+
}, template: "<button\n type=\"button\"\n class=\"sui-color-picker__trigger\"\n [disabled]=\"disabled() || null\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"open() ? 'true' : 'false'\"\n (click)=\"toggle()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n>\n @if (value()) {\n @if (currentPreset()) {\n <sui-color-dot [color]=\"currentPreset()!\" state=\"selected\" class=\"sui-color-picker__preview\" />\n } @else {\n <sui-color-dot [customHex]=\"previewColor()\" state=\"selected\" class=\"sui-color-picker__preview\" />\n }\n } @else {\n <span class=\"sui-color-picker__placeholder-dot\" aria-hidden=\"true\"></span>\n }\n <span class=\"sui-color-picker__label\">{{ currentLabel() }}</span>\n <sui-icon name=\"arrow-down-s-line\" [size]=\"16\" class=\"sui-color-picker__chevron\" />\n</button>\n\n@if (open()) {\n <div\n class=\"sui-color-picker__panel\"\n role=\"dialog\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n @if (!presetsOnly()) {\n <!-- Secci\u00F3n \"Colors\" \u2014 Figma 4456:115716 -->\n <div class=\"sui-color-picker__section sui-color-picker__section--colors\">\n <!-- HSV Color Spectrum \u2014 Figma 4456:115425 -->\n <div\n #canvas\n class=\"sui-color-picker__canvas\"\n role=\"application\"\n aria-label=\"Saturaci\u00F3n y brillo\"\n [style.--hue-color]=\"hueColor()\"\n (pointerdown)=\"onCanvasPointerDown($event)\"\n (pointermove)=\"onCanvasPointerMove($event)\"\n (pointerup)=\"onCanvasPointerUp($event)\"\n (pointercancel)=\"onCanvasPointerUp($event)\"\n >\n <div\n class=\"sui-color-picker__canvas-thumb\"\n [style.left]=\"canvasThumbX()\"\n [style.top]=\"canvasThumbY()\"\n [style.background-color]=\"currentHex()\"\n ></div>\n </div>\n\n <!-- Hue slider \u2014 Figma 4415:53669 -->\n <div\n #hueSlider\n class=\"sui-color-picker__slider sui-color-picker__hue\"\n role=\"slider\"\n aria-label=\"Matiz\"\n aria-valuemin=\"0\"\n aria-valuemax=\"360\"\n [attr.aria-valuenow]=\"hueRounded()\"\n (pointerdown)=\"onHuePointerDown($event)\"\n (pointermove)=\"onHuePointerMove($event)\"\n (pointerup)=\"onHuePointerUp($event)\"\n (pointercancel)=\"onHuePointerUp($event)\"\n >\n <div class=\"sui-color-picker__slider-track\"></div>\n <div\n class=\"sui-color-picker__slider-thumb\"\n [style.left]=\"hueThumbX()\"\n [style.background-color]=\"hueColor()\"\n ></div>\n </div>\n\n <!-- Opacity slider \u2014 Figma 4415:53670. Visible por default (alpha on);\n ocultable con [alpha]=false. -->\n @if (alpha()) {\n <div\n #opacitySlider\n class=\"sui-color-picker__slider sui-color-picker__opacity\"\n role=\"slider\"\n aria-label=\"Opacidad\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-valuenow]=\"alphaPercent()\"\n [style.--opacity-color]=\"opacityColor()\"\n (pointerdown)=\"onOpacityPointerDown($event)\"\n (pointermove)=\"onOpacityPointerMove($event)\"\n (pointerup)=\"onOpacityPointerUp($event)\"\n (pointercancel)=\"onOpacityPointerUp($event)\"\n >\n <div class=\"sui-color-picker__slider-track\"></div>\n <div\n class=\"sui-color-picker__slider-thumb\"\n [style.left]=\"opacityThumbX()\"\n [style.--thumb-color]=\"opacityThumbColor()\"\n ></div>\n </div>\n }\n\n <!-- Color Input \u2014 Figma 4456:115720 -->\n <div class=\"sui-color-picker__color-input\">\n <!-- Format label \"Hex\" + chevron \u2014 Figma 4456:115721.\n Hex-only por ahora (ver PENDING VERIFY en el .ts). -->\n @if (showFormatLabel()) {\n <div class=\"sui-color-picker__format\" aria-hidden=\"true\">\n <span class=\"sui-color-picker__format-label\">Hex</span>\n <sui-icon name=\"arrow-down-s-line\" [size]=\"20\" class=\"sui-color-picker__format-chevron\" />\n </div>\n }\n\n <!-- Input row \u2014 Figma 4456:115724: sip | hex | opacity -->\n <div class=\"sui-color-picker__input-row\">\n <!-- Sip (eyedropper) \u2014 Figma 4456:115796. Solo con EyeDropper API. -->\n @if (showEyedropper()) {\n <button\n type=\"button\"\n class=\"sui-color-picker__sip\"\n aria-label=\"Cuentagotas\"\n (click)=\"onEyedropper()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"sip-line\" [size]=\"20\" />\n </button>\n }\n\n <!-- Hex field \u2014 Figma 4456:115725 / 4456:115726: el texto va SIN\n prefijo '#' (Figma muestra \"335CFF\" pelado dentro de la celda). -->\n <div class=\"sui-color-picker__hex-cell\">\n <input\n class=\"sui-color-picker__hex-field\"\n type=\"text\"\n inputmode=\"text\"\n autocomplete=\"off\"\n spellcheck=\"false\"\n maxlength=\"8\"\n aria-label=\"Valor hexadecimal\"\n [value]=\"hexDisplayValue()\"\n (input)=\"onHexInputChange($event)\"\n (keydown)=\"onHexKeyDown($event)\"\n (blur)=\"onHexCommit()\"\n />\n </div>\n\n <!-- Opacity field \"%\" \u2014 Figma 4456:115727. Visible por default\n (alpha on); ocultable con [alpha]=false. -->\n @if (alpha()) {\n <div class=\"sui-color-picker__opacity-cell\">\n <input\n class=\"sui-color-picker__opacity-field\"\n type=\"text\"\n inputmode=\"numeric\"\n autocomplete=\"off\"\n maxlength=\"3\"\n aria-label=\"Opacidad\"\n [value]=\"alphaPercent()\"\n (change)=\"onOpacityFieldCommit($event)\"\n (keydown)=\"onHexKeyDown($event)\"\n />\n <span class=\"sui-color-picker__opacity-suffix\" aria-hidden=\"true\">%</span>\n </div>\n }\n </div>\n </div>\n </div>\n }\n\n <!-- Secci\u00F3n \"Recommended Colors\" \u2014 Figma 4456:115765 -->\n <div class=\"sui-color-picker__section sui-color-picker__section--recommended\">\n <p class=\"sui-color-picker__panel-label\">{{ recommendedLabel() }}</p>\n <div class=\"sui-color-picker__grid\" role=\"radiogroup\">\n @for (c of colors(); track c) {\n <sui-color-dot\n [color]=\"c\"\n [state]=\"currentPreset() === c ? 'selected' : 'default'\"\n (clicked)=\"onPresetClick(c)\"\n />\n }\n </div>\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:inline-block;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-color-picker__trigger{display:inline-flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-8);cursor:pointer;appearance:none;font:inherit;color:var(--sui-text-strong-950);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);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)}.sui-color-picker__trigger:hover{background:var(--sui-bg-weak-50)}:host([data-sui-open]) .sui-color-picker__trigger{border-color:var(--sui-stroke-strong-950, var(--sui-text-strong-950))}.sui-color-picker__trigger:focus-visible{outline:2px solid var(--sui-stroke-strong-950, var(--sui-text-strong-950));outline-offset:2px}.sui-color-picker__trigger:active{transform:none}:host([data-sui-disabled]) .sui-color-picker__trigger{background:var(--sui-bg-weak-50);color:var(--sui-text-disabled-300);cursor:not-allowed;pointer-events:none}.sui-color-picker__placeholder-dot{display:inline-block;width:24px;height:24px;border-radius:50%;background:var(--sui-bg-soft-200)}.sui-color-picker__label{flex:1 0 auto;white-space:nowrap}.sui-color-picker__chevron{flex-shrink:0;color:var(--sui-icon-sub-600);transition:transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-open]) .sui-color-picker__chevron{transform:rotate(180deg)}.sui-color-picker__panel{position:absolute;top:calc(100% + 6px);left:0;z-index:100;width:272px;box-sizing:border-box;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-16);box-shadow:var(--sui-shadow-medium);overflow:hidden;display:flex;flex-direction:column;animation:sui-color-picker__fade var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}@keyframes sui-color-picker__fade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.sui-color-picker__section{box-sizing:border-box;display:flex;flex-direction:column;gap:12px;padding:16px;width:100%}.sui-color-picker__section--colors{border-bottom:1px solid var(--sui-stroke-soft-200)}.sui-color-picker__section--recommended{gap:8px}:host([data-sui-presets-only]) .sui-color-picker__section--recommended{border-bottom:none}.sui-color-picker__canvas{position:relative;width:100%;height:232px;border-radius:var(--sui-radius-8);cursor:crosshair;-webkit-user-select:none;user-select:none;touch-action:none;overflow:hidden;background-color:var(--hue-color, #335cff);background-image:linear-gradient(to top,#000,#0000),linear-gradient(to right,#fff,#fff0)}.sui-color-picker__canvas-thumb{position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid var(--sui-static-white, #fff);box-shadow:0 0 0 1px #00000026,0 1px 2px #0003;transform:translate(-50%,-50%);pointer-events:none}.sui-color-picker__slider{position:relative;width:100%;height:16px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none}.sui-color-picker__slider-track{position:absolute;left:0;right:0;top:4px;height:8px;border-radius:var(--sui-radius-full);overflow:hidden}.sui-color-picker__hue .sui-color-picker__slider-track{background-image:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.sui-color-picker__opacity .sui-color-picker__slider-track{background-color:#fff;background-image:linear-gradient(to right,transparent,var(--opacity-color, #335cff)),conic-gradient(#ebebeb 0 25%,transparent 0 50%,#ebebeb 0 75%,transparent 0);background-size:auto,10.88px 10.88px}.sui-color-picker__slider-thumb{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;border:2px solid var(--sui-static-white, #fff);box-shadow:0 0 0 1px #00000026,0 1px 2px #0003;transform:translate(-50%,-50%);pointer-events:none}.sui-color-picker__opacity .sui-color-picker__slider-thumb{background-image:linear-gradient(var(--thumb-color, #335cff),var(--thumb-color, #335cff)),conic-gradient(#ebebeb 0 25%,#fff 0 50%,#ebebeb 0 75%,#fff 0);background-size:auto,6px 6px}.sui-color-picker__color-input{display:flex;flex-direction:column;gap:4px;width:100%}.sui-color-picker__format{display:flex;align-items:center;gap:2px;appearance:none;border:none;background:transparent;padding:0;cursor:default;font:inherit;color:var(--sui-text-strong-950)}.sui-color-picker__format-label{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);white-space:nowrap}.sui-color-picker__format-chevron{flex-shrink:0;color:var(--sui-icon-sub-600)}.sui-color-picker__input-row{box-sizing:border-box;display:flex;align-items:stretch;width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-8);overflow:hidden}.sui-color-picker__sip{display:flex;align-items:center;justify-content:center;padding:6px;border:none;border-right:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);color:var(--sui-icon-sub-600);cursor:pointer;appearance:none;flex-shrink:0;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-color-picker__sip:hover{background:var(--sui-bg-weak-50)}.sui-color-picker__sip:focus-visible{outline:2px solid var(--sui-stroke-strong-950, var(--sui-text-strong-950));outline-offset:-2px}.sui-color-picker__sip:active{transform:none}.sui-color-picker__hex-cell{box-sizing:border-box;display:flex;align-items:center;flex:1 0 0;min-width:0;padding:6px 10px;border-right:1px solid var(--sui-stroke-soft-200)}.sui-color-picker__hex-cell:last-child{border-right:none}.sui-color-picker__hex-field{flex:1 0 0;min-width:0;width:100%;border:none;outline:none;background:transparent;padding:0;appearance:none;color:var(--sui-text-strong-950);font-family:inherit;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);text-transform:uppercase}.sui-color-picker__hex-field::placeholder{color:var(--sui-text-soft-400);text-transform:none}.sui-color-picker__opacity-cell{box-sizing:border-box;display:flex;align-items:center;flex-shrink:0;padding:6px 10px}.sui-color-picker__opacity-field{width:3.5ch;border:none;outline:none;background:transparent;padding:0;appearance:none;text-align:right;color:var(--sui-text-sub-600);font-family:inherit;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)}.sui-color-picker__opacity-suffix{color:var(--sui-text-sub-600);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)}.sui-color-picker__panel-label{margin:0;font-size:var(--sui-type-paragraph-xs-size);font-weight:var(--sui-type-paragraph-xs-weight);line-height:var(--sui-type-paragraph-xs-line);letter-spacing:var(--sui-type-paragraph-xs-spacing);color:var(--sui-text-sub-600)}.sui-color-picker__grid{display:flex;flex-wrap:wrap;gap:4px;width:100%}\n"] }]
|
|
3785
3785
|
}], propDecorators: { colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], recommendedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "recommendedLabel", required: false }] }], presetsOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "presetsOnly", required: false }] }], alpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "alpha", required: false }] }], eyedropper: [{ type: i0.Input, args: [{ isSignal: true, alias: "eyedropper", required: false }] }], showFormatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFormatLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], canvasRef: [{ type: i0.ViewChild, args: ['canvas', { isSignal: true }] }], hueRef: [{ type: i0.ViewChild, args: ['hueSlider', { isSignal: true }] }], opacityRef: [{ type: i0.ViewChild, args: ['opacitySlider', { isSignal: true }] }], onDocumentClick: [{
|
|
3786
3786
|
type: HostListener,
|
|
3787
3787
|
args: ['document:click', ['$event.target']]
|
|
@@ -3834,11 +3834,11 @@ class SuiCommandMenuFooter {
|
|
|
3834
3834
|
helpHref = input(null, ...(ngDevMode ? [{ debugName: "helpHref" }] : /* istanbul ignore next */ []));
|
|
3835
3835
|
helpClicked = output();
|
|
3836
3836
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiCommandMenuFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3837
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiCommandMenuFooter, isStandalone: true, selector: "sui-command-menu-footer", inputs: { navigateLabel: { classPropertyName: "navigateLabel", publicName: "navigateLabel", isSignal: true, isRequired: false, transformFunction: null }, selectLabel: { classPropertyName: "selectLabel", publicName: "selectLabel", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, helpLinkLabel: { classPropertyName: "helpLinkLabel", publicName: "helpLinkLabel", isSignal: true, isRequired: false, transformFunction: null }, helpHref: { classPropertyName: "helpHref", publicName: "helpHref", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { helpClicked: "helpClicked" }, ngImport: i0, template: "<div class=\"sui-cmd-footer__group\">\n <sui-kbd variant=\"subtle\">\n <sui-icon name=\"arrow-up-line\" [size]=\"16\" />\n </sui-kbd>\n <sui-kbd variant=\"subtle\">\n <sui-icon name=\"arrow-down-line\" [size]=\"16\" />\n </sui-kbd>\n <span class=\"sui-cmd-footer__label\">{{ navigateLabel() }}</span>\n</div>\n\n<div class=\"sui-cmd-footer__group\">\n <sui-kbd variant=\"subtle\">\n <sui-icon name=\"corner-down-left-line\" [size]=\"16\" />\n </sui-kbd>\n <span class=\"sui-cmd-footer__label\">{{ selectLabel() }}</span>\n</div>\n\n@if (helpText()) {\n <div class=\"sui-cmd-footer__help\">\n <span class=\"sui-cmd-footer__label\">{{ helpText() }}</span>\n <sui-link-button\n variant=\"primary\"\n size=\"small\"\n [href]=\"helpHref()\"\n (clicked)=\"helpClicked.emit($event)\"\n >{{ helpLinkLabel() }}</sui-link-button>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:12px;width:100%;max-width:600px;padding:13px 20px 14px;background:var(--sui-bg-white-0, #fff);border-top:1px solid var(--sui-stroke-soft-200, #ebebeb);box-sizing:border-box;overflow:hidden}.sui-cmd-footer__group{display:flex;align-items:center;gap:8px;flex-shrink:0}.sui-cmd-footer__help{display:flex;align-items:center;gap:4px;flex:1 0 0;min-width:0;justify-content:flex-end;white-space:nowrap}.sui-cmd-footer__label{font-family:var(--sui-font-sans, sans-serif);font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap}.sui-cmd-footer__help .sui-cmd-footer__label{min-width:0;overflow:hidden;text-overflow:ellipsis}@media(max-width:600px){.sui-cmd-footer__help .sui-cmd-footer__label{display:none}}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiKbd, selector: "sui-kbd", inputs: ["variant"] }, { 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 });
|
|
3837
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiCommandMenuFooter, isStandalone: true, selector: "sui-command-menu-footer", inputs: { navigateLabel: { classPropertyName: "navigateLabel", publicName: "navigateLabel", isSignal: true, isRequired: false, transformFunction: null }, selectLabel: { classPropertyName: "selectLabel", publicName: "selectLabel", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, helpLinkLabel: { classPropertyName: "helpLinkLabel", publicName: "helpLinkLabel", isSignal: true, isRequired: false, transformFunction: null }, helpHref: { classPropertyName: "helpHref", publicName: "helpHref", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { helpClicked: "helpClicked" }, ngImport: i0, template: "<div class=\"sui-cmd-footer__group\">\n <sui-kbd variant=\"subtle\">\n <sui-icon name=\"arrow-up-line\" [size]=\"16\" />\n </sui-kbd>\n <sui-kbd variant=\"subtle\">\n <sui-icon name=\"arrow-down-line\" [size]=\"16\" />\n </sui-kbd>\n <span class=\"sui-cmd-footer__label\">{{ navigateLabel() }}</span>\n</div>\n\n<div class=\"sui-cmd-footer__group\">\n <sui-kbd variant=\"subtle\">\n <sui-icon name=\"corner-down-left-line\" [size]=\"16\" />\n </sui-kbd>\n <span class=\"sui-cmd-footer__label\">{{ selectLabel() }}</span>\n</div>\n\n@if (helpText()) {\n <div class=\"sui-cmd-footer__help\">\n <span class=\"sui-cmd-footer__label\">{{ helpText() }}</span>\n <sui-link-button\n variant=\"primary\"\n size=\"small\"\n [href]=\"helpHref()\"\n (clicked)=\"helpClicked.emit($event)\"\n >{{ helpLinkLabel() }}</sui-link-button>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:12px;width:100%;max-width:600px;padding:13px 20px 14px;background:var(--sui-bg-white-0, #fff);border-top:1px solid var(--sui-stroke-soft-200, #ebebeb);box-sizing:border-box;overflow:hidden}.sui-cmd-footer__group{display:flex;align-items:center;gap:8px;flex-shrink:0}.sui-cmd-footer__help{display:flex;align-items:center;gap:4px;flex:1 0 0;min-width:0;justify-content:flex-end;white-space:nowrap}.sui-cmd-footer__label{font-family:var(--sui-font-sans, sans-serif);font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap}.sui-cmd-footer__help .sui-cmd-footer__label{min-width:0;overflow:hidden;text-overflow:ellipsis}@media(max-width:600px){.sui-cmd-footer__help .sui-cmd-footer__label{display:none}}:host ::ng-deep sui-kbd sui-icon{color:var(--sui-icon-sub-600, #5c5c5c)}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiKbd, selector: "sui-kbd", inputs: ["variant"] }, { 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 });
|
|
3838
3838
|
}
|
|
3839
3839
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiCommandMenuFooter, decorators: [{
|
|
3840
3840
|
type: Component,
|
|
3841
|
-
args: [{ selector: 'sui-command-menu-footer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiIcon, SuiKbd, SuiLinkButton], template: "<div class=\"sui-cmd-footer__group\">\n <sui-kbd variant=\"subtle\">\n <sui-icon name=\"arrow-up-line\" [size]=\"16\" />\n </sui-kbd>\n <sui-kbd variant=\"subtle\">\n <sui-icon name=\"arrow-down-line\" [size]=\"16\" />\n </sui-kbd>\n <span class=\"sui-cmd-footer__label\">{{ navigateLabel() }}</span>\n</div>\n\n<div class=\"sui-cmd-footer__group\">\n <sui-kbd variant=\"subtle\">\n <sui-icon name=\"corner-down-left-line\" [size]=\"16\" />\n </sui-kbd>\n <span class=\"sui-cmd-footer__label\">{{ selectLabel() }}</span>\n</div>\n\n@if (helpText()) {\n <div class=\"sui-cmd-footer__help\">\n <span class=\"sui-cmd-footer__label\">{{ helpText() }}</span>\n <sui-link-button\n variant=\"primary\"\n size=\"small\"\n [href]=\"helpHref()\"\n (clicked)=\"helpClicked.emit($event)\"\n >{{ helpLinkLabel() }}</sui-link-button>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:12px;width:100%;max-width:600px;padding:13px 20px 14px;background:var(--sui-bg-white-0, #fff);border-top:1px solid var(--sui-stroke-soft-200, #ebebeb);box-sizing:border-box;overflow:hidden}.sui-cmd-footer__group{display:flex;align-items:center;gap:8px;flex-shrink:0}.sui-cmd-footer__help{display:flex;align-items:center;gap:4px;flex:1 0 0;min-width:0;justify-content:flex-end;white-space:nowrap}.sui-cmd-footer__label{font-family:var(--sui-font-sans, sans-serif);font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap}.sui-cmd-footer__help .sui-cmd-footer__label{min-width:0;overflow:hidden;text-overflow:ellipsis}@media(max-width:600px){.sui-cmd-footer__help .sui-cmd-footer__label{display:none}}\n"] }]
|
|
3841
|
+
args: [{ selector: 'sui-command-menu-footer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiIcon, SuiKbd, SuiLinkButton], template: "<div class=\"sui-cmd-footer__group\">\n <sui-kbd variant=\"subtle\">\n <sui-icon name=\"arrow-up-line\" [size]=\"16\" />\n </sui-kbd>\n <sui-kbd variant=\"subtle\">\n <sui-icon name=\"arrow-down-line\" [size]=\"16\" />\n </sui-kbd>\n <span class=\"sui-cmd-footer__label\">{{ navigateLabel() }}</span>\n</div>\n\n<div class=\"sui-cmd-footer__group\">\n <sui-kbd variant=\"subtle\">\n <sui-icon name=\"corner-down-left-line\" [size]=\"16\" />\n </sui-kbd>\n <span class=\"sui-cmd-footer__label\">{{ selectLabel() }}</span>\n</div>\n\n@if (helpText()) {\n <div class=\"sui-cmd-footer__help\">\n <span class=\"sui-cmd-footer__label\">{{ helpText() }}</span>\n <sui-link-button\n variant=\"primary\"\n size=\"small\"\n [href]=\"helpHref()\"\n (clicked)=\"helpClicked.emit($event)\"\n >{{ helpLinkLabel() }}</sui-link-button>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:12px;width:100%;max-width:600px;padding:13px 20px 14px;background:var(--sui-bg-white-0, #fff);border-top:1px solid var(--sui-stroke-soft-200, #ebebeb);box-sizing:border-box;overflow:hidden}.sui-cmd-footer__group{display:flex;align-items:center;gap:8px;flex-shrink:0}.sui-cmd-footer__help{display:flex;align-items:center;gap:4px;flex:1 0 0;min-width:0;justify-content:flex-end;white-space:nowrap}.sui-cmd-footer__label{font-family:var(--sui-font-sans, sans-serif);font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap}.sui-cmd-footer__help .sui-cmd-footer__label{min-width:0;overflow:hidden;text-overflow:ellipsis}@media(max-width:600px){.sui-cmd-footer__help .sui-cmd-footer__label{display:none}}:host ::ng-deep sui-kbd sui-icon{color:var(--sui-icon-sub-600, #5c5c5c)}\n"] }]
|
|
3842
3842
|
}], propDecorators: { navigateLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigateLabel", required: false }] }], selectLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectLabel", required: false }] }], helpText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpText", required: false }] }], helpLinkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpLinkLabel", required: false }] }], helpHref: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpHref", required: false }] }], helpClicked: [{ type: i0.Output, args: ["helpClicked"] }] } });
|
|
3843
3843
|
|
|
3844
3844
|
/**
|
|
@@ -4210,7 +4210,7 @@ class SuiCommandMenuItem {
|
|
|
4210
4210
|
this.buttonClicked.emit(event);
|
|
4211
4211
|
}
|
|
4212
4212
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiCommandMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4213
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiCommandMenuItem, isStandalone: true, selector: "sui-command-menu-item", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, avatarSrc: { classPropertyName: "avatarSrc", publicName: "avatarSrc", isSignal: true, isRequired: false, transformFunction: null }, avatarInitials: { classPropertyName: "avatarInitials", publicName: "avatarInitials", isSignal: true, isRequired: false, transformFunction: null }, avatarColor: { classPropertyName: "avatarColor", publicName: "avatarColor", isSignal: true, isRequired: false, transformFunction: null }, flagName: { classPropertyName: "flagName", publicName: "flagName", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "shortcut", isSignal: true, isRequired: false, transformFunction: null }, showButton: { classPropertyName: "showButton", publicName: "showButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", buttonClicked: "buttonClicked" }, host: { listeners: { "touchstart": "$event.currentTarget", "touchend": "$any($event.currentTarget).blur()" }, properties: { "attr.title": "null", "attr.data-sui-type": "type()", "attr.data-sui-size": "size()", "attr.role": "\"button\"", "attr.tabindex": "0" } }, ngImport: i0, template: "<!-- Leading element seg\u00FAn type. -->\n@switch (type()) {\n @case ('left-icon') {\n @if (size() === 'medium') {\n <!-- En medium: leading icon dentro de container blanco con border + shadow (look \"lifted\"). -->\n <span class=\"sui-cmd-item__leading sui-cmd-item__leading--icon-box\">\n @if (icon()) {\n <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n }\n </span>\n } @else {\n <!-- En small: solo el icon, sin container. -->\n <sui-icon class=\"sui-cmd-item__leading sui-cmd-item__leading--icon\" [name]=\"icon() ?? 'apps-line'\" [size]=\"20\" />\n }\n }\n @case ('avatar') {\n <sui-avatar\n class=\"sui-cmd-item__leading\"\n [size]=\"avatarSize()\"\n [src]=\"avatarSrc()\"\n [initials]=\"avatarInitials()\"\n [color]=\"avatarColor()\"\n />\n }\n @case ('brand') {\n <!-- Brand: consumer proyecta el SVG/img de marca. -->\n <span class=\"sui-cmd-item__leading sui-cmd-item__leading--brand\">\n <ng-content select=\"[slot=brand]\" />\n </span>\n }\n @case ('company') {\n @if (size() === 'medium') {\n <!-- Medium: logo 24px (sm) dentro de container blanco 40px con border + shadow + rounded-full\n (p-8, content 24 \u2014 id\u00E9ntico a country medium). Figma 4176:17588. -->\n <span class=\"sui-cmd-item__leading sui-cmd-item__leading--company-box\">\n <sui-avatar\n size=\"sm\"\n [initials]=\"avatarInitials()\"\n [color]=\"avatarColor()\"\n [src]=\"avatarSrc()\"\n />\n </span>\n } @else {\n <!-- Small: logo 20px (xs) directo, sin container. Figma 4176:17361. -->\n <sui-avatar\n class=\"sui-cmd-item__leading\"\n size=\"xs\"\n [initials]=\"avatarInitials()\"\n [color]=\"avatarColor()\"\n [src]=\"avatarSrc()\"\n />\n }\n }\n @case ('country') {\n @if (flagName()) {\n @if (size() === 'medium') {\n <!-- Medium: bandera 24px (md) dentro de container blanco 40px con border + shadow + rounded-full. -->\n <span class=\"sui-cmd-item__leading sui-cmd-item__leading--country\">\n <sui-flag [name]=\"flagName()!\" size=\"md\" />\n </span>\n } @else {\n <!-- Small: bandera
|
|
4213
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiCommandMenuItem, isStandalone: true, selector: "sui-command-menu-item", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, avatarSrc: { classPropertyName: "avatarSrc", publicName: "avatarSrc", isSignal: true, isRequired: false, transformFunction: null }, avatarInitials: { classPropertyName: "avatarInitials", publicName: "avatarInitials", isSignal: true, isRequired: false, transformFunction: null }, avatarColor: { classPropertyName: "avatarColor", publicName: "avatarColor", isSignal: true, isRequired: false, transformFunction: null }, flagName: { classPropertyName: "flagName", publicName: "flagName", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "shortcut", isSignal: true, isRequired: false, transformFunction: null }, showButton: { classPropertyName: "showButton", publicName: "showButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", buttonClicked: "buttonClicked" }, host: { listeners: { "touchstart": "$event.currentTarget", "touchend": "$any($event.currentTarget).blur()" }, properties: { "attr.title": "null", "attr.data-sui-type": "type()", "attr.data-sui-size": "size()", "attr.role": "\"button\"", "attr.tabindex": "0" } }, ngImport: i0, template: "<!-- Leading element seg\u00FAn type. -->\n@switch (type()) {\n @case ('left-icon') {\n @if (size() === 'medium') {\n <!-- En medium: leading icon dentro de container blanco con border + shadow (look \"lifted\"). -->\n <span class=\"sui-cmd-item__leading sui-cmd-item__leading--icon-box\">\n @if (icon()) {\n <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n }\n </span>\n } @else {\n <!-- En small: solo el icon, sin container. -->\n <sui-icon class=\"sui-cmd-item__leading sui-cmd-item__leading--icon\" [name]=\"icon() ?? 'apps-line'\" [size]=\"20\" />\n }\n }\n @case ('avatar') {\n <sui-avatar\n class=\"sui-cmd-item__leading\"\n [size]=\"avatarSize()\"\n [src]=\"avatarSrc()\"\n [initials]=\"avatarInitials()\"\n [color]=\"avatarColor()\"\n />\n }\n @case ('brand') {\n <!-- Brand: consumer proyecta el SVG/img de marca. -->\n <span class=\"sui-cmd-item__leading sui-cmd-item__leading--brand\">\n <ng-content select=\"[slot=brand]\" />\n </span>\n }\n @case ('company') {\n @if (size() === 'medium') {\n <!-- Medium: logo 24px (sm) dentro de container blanco 40px con border + shadow + rounded-full\n (p-8, content 24 \u2014 id\u00E9ntico a country medium). Figma 4176:17588. -->\n <span class=\"sui-cmd-item__leading sui-cmd-item__leading--company-box\">\n <sui-avatar\n size=\"sm\"\n [initials]=\"avatarInitials()\"\n [color]=\"avatarColor()\"\n [src]=\"avatarSrc()\"\n />\n </span>\n } @else {\n <!-- Small: logo 20px (xs) directo, sin container. Figma 4176:17361. -->\n <sui-avatar\n class=\"sui-cmd-item__leading\"\n size=\"xs\"\n [initials]=\"avatarInitials()\"\n [color]=\"avatarColor()\"\n [src]=\"avatarSrc()\"\n />\n }\n }\n @case ('country') {\n @if (flagName()) {\n @if (size() === 'medium') {\n <!-- Medium: bandera 24px (md) dentro de container blanco 40px con border + shadow + rounded-full. -->\n <span class=\"sui-cmd-item__leading sui-cmd-item__leading--country\">\n <sui-flag [name]=\"flagName()!\" size=\"md\" />\n </span>\n } @else {\n <!-- Small: bandera 20px (sm) directa, sin container \u2014 Figma 4171:15653:\n todos los leadings small miden 20px (avatar/company/left-icon/flag). -->\n <sui-flag class=\"sui-cmd-item__leading\" [name]=\"flagName()!\" size=\"sm\" />\n }\n }\n }\n}\n\n<!-- Text block: title (+ inline sublabel) + opt description. -->\n<div class=\"sui-cmd-item__text\">\n <div class=\"sui-cmd-item__title-row\">\n <span class=\"sui-cmd-item__title\">{{ title() }}</span>\n @if (sublabel()) {\n <span class=\"sui-cmd-item__sublabel\">{{ sublabel() }}</span>\n }\n </div>\n @if (size() === 'medium' && description()) {\n <span class=\"sui-cmd-item__description\">{{ description() }}</span>\n }\n</div>\n\n<!-- Right-aligned optionals: badge / shortcut / button. -->\n@if (badge()) {\n <sui-badge class=\"sui-cmd-item__badge\" color=\"gray\" variant=\"lighter\" size=\"small\">\n {{ badge() }}\n </sui-badge>\n}\n@if (shortcut()) {\n <sui-kbd class=\"sui-cmd-item__shortcut\">{{ shortcut() }}</sui-kbd>\n}\n@if (showButton()) {\n <sui-compact-button\n class=\"sui-cmd-item__button\"\n icon=\"arrow-right-s-line\"\n variantStyle=\"ghost\"\n size=\"medium\"\n ariaLabel=\"Abrir\"\n (clicked)=\"onButtonClick($event)\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:12px;width:100%;max-width:600px;padding:10px 12px;background:var(--sui-bg-white-0, #fff);border-radius:var(--sui-radius-10, 10px);cursor:pointer;outline:none;box-sizing:border-box;transition:background-color .1s ease}:host:hover,:host:focus-visible{background:var(--sui-bg-weak-50, #f7f7f7)}:host:focus-visible{box-shadow:inset 0 0 0 2px var(--sui-primary-base, #fa7319)}:host([data-sui-size=medium]){padding:12px}.sui-cmd-item__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.sui-cmd-item__leading--icon-box,:host([data-sui-size=medium]) .sui-cmd-item__leading--brand,:host([data-sui-size=medium]) .sui-cmd-item__leading--country,:host([data-sui-size=medium]) .sui-cmd-item__leading--company-box{box-sizing:border-box;width:40px;height:40px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-full, 999px);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));overflow:hidden}.sui-cmd-item__leading--icon-box,.sui-cmd-item__leading--icon{color:var(--sui-text-sub-600, #5c5c5c)}.sui-cmd-item__leading--brand{width:20px;height:20px;overflow:hidden}.sui-cmd-item__leading--country{overflow:hidden}.sui-cmd-item__text{display:flex;flex-direction:column;flex:1 0 0;min-width:0;gap:4px}:host([data-sui-size=small]) .sui-cmd-item__text{flex-direction:row;align-items:center;gap:4px;white-space:nowrap}.sui-cmd-item__title-row{display:flex;align-items:center;gap:4px;min-width:0}.sui-cmd-item__title{font-family:var(--sui-font-sans, sans-serif);font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([data-sui-size=small]) .sui-cmd-item__title{font-weight:400}.sui-cmd-item__sublabel,.sui-cmd-item__description{font-family:var(--sui-font-sans, sans-serif);font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-cmd-item__sublabel{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-cmd-item__description{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-cmd-item__badge,.sui-cmd-item__shortcut,.sui-cmd-item__button{flex-shrink:0}:host(:hover) .sui-cmd-item__button ::ng-deep .sui-compact-button__el,:host(:focus-visible) .sui-cmd-item__button ::ng-deep .sui-compact-button__el{background:var(--sui-bg-white-0, #fff);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));border-radius:var(--sui-radius-6, 6px)}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiBadge, selector: "sui-badge", inputs: ["color", "variant", "size", "type", "disabled"] }, { kind: "component", type: SuiKbd, selector: "sui-kbd", inputs: ["variant"] }, { kind: "component", type: SuiCompactButton, selector: "sui-compact-button", inputs: ["icon", "variantStyle", "size", "fullRadius", "disabled", "href", "target", "rel", "type", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: SuiAvatar, selector: "sui-avatar", inputs: ["size", "src", "alt", "initials", "color", "status", "memojiSrc", "illustrationSrc", "icon", "companyLogoSrc", "topBadge", "bgColor"] }, { kind: "component", type: SuiFlag, selector: "sui-flag", inputs: ["name", "size", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4214
4214
|
}
|
|
4215
4215
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiCommandMenuItem, decorators: [{
|
|
4216
4216
|
type: Component,
|
|
@@ -4223,7 +4223,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
4223
4223
|
'[attr.tabindex]': '0',
|
|
4224
4224
|
'(touchstart)': '$event.currentTarget',
|
|
4225
4225
|
'(touchend)': '$any($event.currentTarget).blur()',
|
|
4226
|
-
}, template: "<!-- Leading element seg\u00FAn type. -->\n@switch (type()) {\n @case ('left-icon') {\n @if (size() === 'medium') {\n <!-- En medium: leading icon dentro de container blanco con border + shadow (look \"lifted\"). -->\n <span class=\"sui-cmd-item__leading sui-cmd-item__leading--icon-box\">\n @if (icon()) {\n <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n }\n </span>\n } @else {\n <!-- En small: solo el icon, sin container. -->\n <sui-icon class=\"sui-cmd-item__leading sui-cmd-item__leading--icon\" [name]=\"icon() ?? 'apps-line'\" [size]=\"20\" />\n }\n }\n @case ('avatar') {\n <sui-avatar\n class=\"sui-cmd-item__leading\"\n [size]=\"avatarSize()\"\n [src]=\"avatarSrc()\"\n [initials]=\"avatarInitials()\"\n [color]=\"avatarColor()\"\n />\n }\n @case ('brand') {\n <!-- Brand: consumer proyecta el SVG/img de marca. -->\n <span class=\"sui-cmd-item__leading sui-cmd-item__leading--brand\">\n <ng-content select=\"[slot=brand]\" />\n </span>\n }\n @case ('company') {\n @if (size() === 'medium') {\n <!-- Medium: logo 24px (sm) dentro de container blanco 40px con border + shadow + rounded-full\n (p-8, content 24 \u2014 id\u00E9ntico a country medium). Figma 4176:17588. -->\n <span class=\"sui-cmd-item__leading sui-cmd-item__leading--company-box\">\n <sui-avatar\n size=\"sm\"\n [initials]=\"avatarInitials()\"\n [color]=\"avatarColor()\"\n [src]=\"avatarSrc()\"\n />\n </span>\n } @else {\n <!-- Small: logo 20px (xs) directo, sin container. Figma 4176:17361. -->\n <sui-avatar\n class=\"sui-cmd-item__leading\"\n size=\"xs\"\n [initials]=\"avatarInitials()\"\n [color]=\"avatarColor()\"\n [src]=\"avatarSrc()\"\n />\n }\n }\n @case ('country') {\n @if (flagName()) {\n @if (size() === 'medium') {\n <!-- Medium: bandera 24px (md) dentro de container blanco 40px con border + shadow + rounded-full. -->\n <span class=\"sui-cmd-item__leading sui-cmd-item__leading--country\">\n <sui-flag [name]=\"flagName()!\" size=\"md\" />\n </span>\n } @else {\n <!-- Small: bandera
|
|
4226
|
+
}, template: "<!-- Leading element seg\u00FAn type. -->\n@switch (type()) {\n @case ('left-icon') {\n @if (size() === 'medium') {\n <!-- En medium: leading icon dentro de container blanco con border + shadow (look \"lifted\"). -->\n <span class=\"sui-cmd-item__leading sui-cmd-item__leading--icon-box\">\n @if (icon()) {\n <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n }\n </span>\n } @else {\n <!-- En small: solo el icon, sin container. -->\n <sui-icon class=\"sui-cmd-item__leading sui-cmd-item__leading--icon\" [name]=\"icon() ?? 'apps-line'\" [size]=\"20\" />\n }\n }\n @case ('avatar') {\n <sui-avatar\n class=\"sui-cmd-item__leading\"\n [size]=\"avatarSize()\"\n [src]=\"avatarSrc()\"\n [initials]=\"avatarInitials()\"\n [color]=\"avatarColor()\"\n />\n }\n @case ('brand') {\n <!-- Brand: consumer proyecta el SVG/img de marca. -->\n <span class=\"sui-cmd-item__leading sui-cmd-item__leading--brand\">\n <ng-content select=\"[slot=brand]\" />\n </span>\n }\n @case ('company') {\n @if (size() === 'medium') {\n <!-- Medium: logo 24px (sm) dentro de container blanco 40px con border + shadow + rounded-full\n (p-8, content 24 \u2014 id\u00E9ntico a country medium). Figma 4176:17588. -->\n <span class=\"sui-cmd-item__leading sui-cmd-item__leading--company-box\">\n <sui-avatar\n size=\"sm\"\n [initials]=\"avatarInitials()\"\n [color]=\"avatarColor()\"\n [src]=\"avatarSrc()\"\n />\n </span>\n } @else {\n <!-- Small: logo 20px (xs) directo, sin container. Figma 4176:17361. -->\n <sui-avatar\n class=\"sui-cmd-item__leading\"\n size=\"xs\"\n [initials]=\"avatarInitials()\"\n [color]=\"avatarColor()\"\n [src]=\"avatarSrc()\"\n />\n }\n }\n @case ('country') {\n @if (flagName()) {\n @if (size() === 'medium') {\n <!-- Medium: bandera 24px (md) dentro de container blanco 40px con border + shadow + rounded-full. -->\n <span class=\"sui-cmd-item__leading sui-cmd-item__leading--country\">\n <sui-flag [name]=\"flagName()!\" size=\"md\" />\n </span>\n } @else {\n <!-- Small: bandera 20px (sm) directa, sin container \u2014 Figma 4171:15653:\n todos los leadings small miden 20px (avatar/company/left-icon/flag). -->\n <sui-flag class=\"sui-cmd-item__leading\" [name]=\"flagName()!\" size=\"sm\" />\n }\n }\n }\n}\n\n<!-- Text block: title (+ inline sublabel) + opt description. -->\n<div class=\"sui-cmd-item__text\">\n <div class=\"sui-cmd-item__title-row\">\n <span class=\"sui-cmd-item__title\">{{ title() }}</span>\n @if (sublabel()) {\n <span class=\"sui-cmd-item__sublabel\">{{ sublabel() }}</span>\n }\n </div>\n @if (size() === 'medium' && description()) {\n <span class=\"sui-cmd-item__description\">{{ description() }}</span>\n }\n</div>\n\n<!-- Right-aligned optionals: badge / shortcut / button. -->\n@if (badge()) {\n <sui-badge class=\"sui-cmd-item__badge\" color=\"gray\" variant=\"lighter\" size=\"small\">\n {{ badge() }}\n </sui-badge>\n}\n@if (shortcut()) {\n <sui-kbd class=\"sui-cmd-item__shortcut\">{{ shortcut() }}</sui-kbd>\n}\n@if (showButton()) {\n <sui-compact-button\n class=\"sui-cmd-item__button\"\n icon=\"arrow-right-s-line\"\n variantStyle=\"ghost\"\n size=\"medium\"\n ariaLabel=\"Abrir\"\n (clicked)=\"onButtonClick($event)\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:12px;width:100%;max-width:600px;padding:10px 12px;background:var(--sui-bg-white-0, #fff);border-radius:var(--sui-radius-10, 10px);cursor:pointer;outline:none;box-sizing:border-box;transition:background-color .1s ease}:host:hover,:host:focus-visible{background:var(--sui-bg-weak-50, #f7f7f7)}:host:focus-visible{box-shadow:inset 0 0 0 2px var(--sui-primary-base, #fa7319)}:host([data-sui-size=medium]){padding:12px}.sui-cmd-item__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.sui-cmd-item__leading--icon-box,:host([data-sui-size=medium]) .sui-cmd-item__leading--brand,:host([data-sui-size=medium]) .sui-cmd-item__leading--country,:host([data-sui-size=medium]) .sui-cmd-item__leading--company-box{box-sizing:border-box;width:40px;height:40px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-full, 999px);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));overflow:hidden}.sui-cmd-item__leading--icon-box,.sui-cmd-item__leading--icon{color:var(--sui-text-sub-600, #5c5c5c)}.sui-cmd-item__leading--brand{width:20px;height:20px;overflow:hidden}.sui-cmd-item__leading--country{overflow:hidden}.sui-cmd-item__text{display:flex;flex-direction:column;flex:1 0 0;min-width:0;gap:4px}:host([data-sui-size=small]) .sui-cmd-item__text{flex-direction:row;align-items:center;gap:4px;white-space:nowrap}.sui-cmd-item__title-row{display:flex;align-items:center;gap:4px;min-width:0}.sui-cmd-item__title{font-family:var(--sui-font-sans, sans-serif);font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([data-sui-size=small]) .sui-cmd-item__title{font-weight:400}.sui-cmd-item__sublabel,.sui-cmd-item__description{font-family:var(--sui-font-sans, sans-serif);font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-cmd-item__sublabel{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-cmd-item__description{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-cmd-item__badge,.sui-cmd-item__shortcut,.sui-cmd-item__button{flex-shrink:0}:host(:hover) .sui-cmd-item__button ::ng-deep .sui-compact-button__el,:host(:focus-visible) .sui-cmd-item__button ::ng-deep .sui-compact-button__el{background:var(--sui-bg-white-0, #fff);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));border-radius:var(--sui-radius-6, 6px)}\n"] }]
|
|
4227
4227
|
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], avatarSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarSrc", required: false }] }], avatarInitials: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarInitials", required: false }] }], avatarColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarColor", required: false }] }], flagName: [{ type: i0.Input, args: [{ isSignal: true, alias: "flagName", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], shortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "shortcut", required: false }] }], showButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButton", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], buttonClicked: [{ type: i0.Output, args: ["buttonClicked"] }] } });
|
|
4228
4228
|
|
|
4229
4229
|
/**
|
|
@@ -4453,7 +4453,7 @@ class SuiDropdownItem {
|
|
|
4453
4453
|
this.clicked.emit(event);
|
|
4454
4454
|
}
|
|
4455
4455
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiDropdownItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4456
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiDropdownItem, isStandalone: true, selector: "sui-dropdown-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, leadingFramed: { classPropertyName: "leadingFramed", publicName: "leadingFramed", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, highlighted: { classPropertyName: "highlighted", publicName: "highlighted", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "shortcut", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { listeners: { "click": "onClick($event)", "keydown.enter": "onClick($event)", "keydown.space": "onClick($event)", "touchstart": "$event.currentTarget", "touchend": "$any($event.currentTarget).blur()" }, properties: { "attr.role": "mode() === \"option\" ? \"option\" : \"menuitem\"", "attr.data-sui-mode": "mode()", "attr.data-sui-size": "size()", "attr.data-sui-framed": "leadingFramed() ? \"\" : null", "attr.data-sui-selected": "selected() ? \"\" : null", "attr.data-sui-highlighted": "highlighted() ? \"\" : null", "attr.data-sui-disabled": "disabled() ? \"\" : null", "attr.aria-selected": "mode() === \"option\" ? (selected() ? \"true\" : \"false\") : null", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.tabindex": "disabled() ? \"-1\" : \"0\"" } }, ngImport: i0, template: "<div class=\"sui-dropdown-item__leading\">\n <ng-content select=\"[slot=leading]\" />\n</div>\n\n<div class=\"sui-dropdown-item__text\">\n <span class=\"sui-dropdown-item__label\">{{ label() }}</span>\n @if (hasSublabel()) {\n <span class=\"sui-dropdown-item__sublabel\">{{ sublabel() }}</span>\n }\n @if (hasDescription()) {\n <span class=\"sui-dropdown-item__description\">{{ description() }}</span>\n }\n</div>\n\n<div class=\"sui-dropdown-item__trailing\">\n <!-- Canon trailing-slot (Figma 405:6432): el consumer proyecta en este orden DOM\n fijo \u2192 badge primero, luego shortcut (provisto por el input shortcut() abajo),\n luego toggle/button al final. El gap del flex (8px) los separa.\n Pill button (variante Large): bg primary-alpha-10, p-6, radius-8, label primary\n Inter Medium 14/20. Link button (variante Small): texto primary sin bg.\n El componente no fija sublots \u2014 el orden lo controla el consumer seg\u00FAn este\n patr\u00F3n para mantener consistencia visual vs Figma. -->\n <ng-content select=\"[slot=trailing]\" />\n @if (shortcut()) {\n <span class=\"sui-dropdown-item__shortcut\">{{ shortcut() }}</span>\n }\n @if (showCheck()) {\n <!-- Check icon autom\u00E1tico en mode='option' cuando selected=true.\n Remixicon check-line (ri-check-line) v\u00EDa sui-icon \u2014 mismo glyph que\n el resto del proyecto, color heredado de .sui-dropdown-item__check. -->\n <sui-icon class=\"sui-dropdown-item__check\" name=\"check-line\" [size]=\"20\" />\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:8px;padding:8px;background:var(--sui-bg-white-0);border-radius:var(--sui-radius-8, 8px);cursor:pointer;outline:none;width:100%;box-sizing:border-box;font-family:var(--sui-font-sans);transition:background .1s ease-out,box-shadow .1s ease-out;-webkit-user-select:none;user-select:none}:host:hover{background:var(--sui-bg-weak-50)}:host:active:not([data-sui-disabled]),:host:focus-visible{box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-size=small]){min-height:36px;padding:8px;gap:8px}:host([data-sui-size=large]){min-height:56px;padding:8px;gap:12px;border-radius:var(--sui-radius-10, 10px)}:host([data-sui-size=large]) .sui-dropdown-item__text{flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-size=large]) .sui-dropdown-item__label{font-weight:var(--sui-type-label-sm-weight, 500)}:host([data-sui-size=xlarge]){min-height:76px;padding:8px;gap:16px;border-radius:var(--sui-radius-12, 12px)}:host([data-sui-size=xlarge]) .sui-dropdown-item__text{flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-size=xlarge]) .sui-dropdown-item__label{font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em);font-weight:var(--sui-type-label-md-weight, 500)}:host([data-sui-size=xlarge]) .sui-dropdown-item__description{font-size:var(--sui-type-paragraph-sm-size, 14px);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em)}.sui-dropdown-item__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.sui-dropdown-item__leading:empty{display:none}:host([data-sui-size=large][data-sui-framed]) .sui-dropdown-item__leading,:host([data-sui-size=xlarge][data-sui-framed]) .sui-dropdown-item__leading{padding:10px;border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-full, 999px);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box}:host([data-sui-size=xlarge][data-sui-framed]) .sui-dropdown-item__leading{padding:12px}.sui-dropdown-item__text{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:4px;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-dropdown-item__label{font-size:var(--sui-type-paragraph-sm-size, 14px);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);font-weight:var(--sui-type-paragraph-sm-weight, 400);color:var(--sui-text-strong-950);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-dropdown-item__sublabel{font-size:var(--sui-type-paragraph-xs-size, 12px);line-height:var(--sui-type-paragraph-xs-line, 16px);letter-spacing:var(--sui-type-paragraph-xs-spacing, 0);font-weight:var(--sui-type-paragraph-xs-weight, 400);color:var(--sui-text-soft-400);flex-shrink:0}.sui-dropdown-item__description{font-size:var(--sui-type-paragraph-xs-size, 12px);line-height:var(--sui-type-paragraph-xs-line, 16px);letter-spacing:var(--sui-type-paragraph-xs-spacing, 0);font-weight:var(--sui-type-paragraph-xs-weight, 400);color:var(--sui-text-sub-600);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-dropdown-item__trailing{flex-shrink:0;display:inline-flex;align-items:center;gap:8px}.sui-dropdown-item__trailing:empty{display:none}.sui-dropdown-item__shortcut{display:inline-flex;align-items:center;padding:2px 6px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-4, 4px);font-family:var(--sui-font-sans);font-size:12px;line-height:16px;font-weight:500;color:var(--sui-text-sub-600);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;flex-shrink:0}:host([data-sui-mode=option][data-sui-selected]){background:var(--sui-primary-alpha-10)}:host([data-sui-mode=option][data-sui-selected]) .sui-dropdown-item__label,:host([data-sui-mode=option][data-sui-selected]) .sui-dropdown-item__sublabel,:host([data-sui-mode=option][data-sui-selected]) .sui-dropdown-item__check{color:var(--sui-primary-base)}:host([data-sui-mode=option][data-sui-selected]):hover{background:var(--sui-primary-alpha-16)}.sui-dropdown-item__check{width:20px;height:20px;flex-shrink:0;color:var(--sui-primary-base)}:host([data-sui-highlighted]:not([data-sui-selected])){background:var(--sui-bg-weak-50)}:host([data-sui-disabled]){cursor:not-allowed;pointer-events:none}:host([data-sui-disabled]) .sui-dropdown-item__label,:host([data-sui-disabled]) .sui-dropdown-item__sublabel,:host([data-sui-disabled]) .sui-dropdown-item__description{color:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-dropdown-item__leading{color:var(--sui-icon-disabled-300, #d1d1d1)}:host([data-sui-disabled]):hover{background:var(--sui-bg-white-0)}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4456
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiDropdownItem, isStandalone: true, selector: "sui-dropdown-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, leadingFramed: { classPropertyName: "leadingFramed", publicName: "leadingFramed", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, highlighted: { classPropertyName: "highlighted", publicName: "highlighted", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "shortcut", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { listeners: { "click": "onClick($event)", "keydown.enter": "onClick($event)", "keydown.space": "onClick($event)", "touchstart": "$event.currentTarget", "touchend": "$any($event.currentTarget).blur()" }, properties: { "attr.role": "mode() === \"option\" ? \"option\" : \"menuitem\"", "attr.data-sui-mode": "mode()", "attr.data-sui-size": "size()", "attr.data-sui-framed": "leadingFramed() ? \"\" : null", "attr.data-sui-selected": "selected() ? \"\" : null", "attr.data-sui-highlighted": "highlighted() ? \"\" : null", "attr.data-sui-disabled": "disabled() ? \"\" : null", "attr.aria-selected": "mode() === \"option\" ? (selected() ? \"true\" : \"false\") : null", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.tabindex": "disabled() ? \"-1\" : \"0\"" } }, ngImport: i0, template: "<div class=\"sui-dropdown-item__leading\">\n <ng-content select=\"[slot=leading]\" />\n</div>\n\n<div class=\"sui-dropdown-item__text\">\n <span class=\"sui-dropdown-item__label\">{{ label() }}</span>\n @if (hasSublabel()) {\n <span class=\"sui-dropdown-item__sublabel\">{{ sublabel() }}</span>\n }\n @if (hasDescription()) {\n <span class=\"sui-dropdown-item__description\">{{ description() }}</span>\n }\n</div>\n\n<div class=\"sui-dropdown-item__trailing\">\n <!-- Canon trailing-slot (Figma 405:6432): el consumer proyecta en este orden DOM\n fijo \u2192 badge primero, luego shortcut (provisto por el input shortcut() abajo),\n luego toggle/button al final. El gap del flex (8px) los separa.\n Pill button (variante Large): bg primary-alpha-10, p-6, radius-8, label primary\n Inter Medium 14/20. Link button (variante Small): texto primary sin bg.\n El componente no fija sublots \u2014 el orden lo controla el consumer seg\u00FAn este\n patr\u00F3n para mantener consistencia visual vs Figma. -->\n <ng-content select=\"[slot=trailing]\" />\n @if (shortcut()) {\n <span class=\"sui-dropdown-item__shortcut\">{{ shortcut() }}</span>\n }\n @if (showCheck()) {\n <!-- Check icon autom\u00E1tico en mode='option' cuando selected=true.\n Remixicon check-line (ri-check-line) v\u00EDa sui-icon \u2014 mismo glyph que\n el resto del proyecto, color heredado de .sui-dropdown-item__check. -->\n <sui-icon class=\"sui-dropdown-item__check\" name=\"check-line\" [size]=\"20\" />\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:8px;padding:8px;background:var(--sui-bg-white-0);border-radius:var(--sui-radius-8, 8px);cursor:pointer;outline:none;width:100%;box-sizing:border-box;font-family:var(--sui-font-sans);transition:background .1s ease-out,box-shadow .1s ease-out;-webkit-user-select:none;user-select:none}:host:hover{background:var(--sui-bg-weak-50)}:host:active:not([data-sui-disabled]),:host:focus-visible{box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-size=small]){min-height:36px;padding:8px;gap:8px}:host([data-sui-size=large]){min-height:56px;padding:8px;gap:12px;border-radius:var(--sui-radius-10, 10px)}:host([data-sui-size=large]) .sui-dropdown-item__text{flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-size=large]) .sui-dropdown-item__label{font-weight:var(--sui-type-label-sm-weight, 500)}:host([data-sui-size=xlarge]){min-height:76px;padding:8px;gap:16px;border-radius:var(--sui-radius-12, 12px)}:host([data-sui-size=xlarge]) .sui-dropdown-item__text{flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-size=xlarge]) .sui-dropdown-item__label{font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em);font-weight:var(--sui-type-label-md-weight, 500)}:host([data-sui-size=xlarge]) .sui-dropdown-item__description{font-size:var(--sui-type-paragraph-sm-size, 14px);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em)}.sui-dropdown-item__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.sui-dropdown-item__leading:empty{display:none}:host([data-sui-size=large][data-sui-framed]) .sui-dropdown-item__leading,:host([data-sui-size=xlarge][data-sui-framed]) .sui-dropdown-item__leading{padding:10px;border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-full, 999px);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box}:host([data-sui-size=xlarge][data-sui-framed]) .sui-dropdown-item__leading{padding:12px}.sui-dropdown-item__text{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:4px;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-dropdown-item__label{font-size:var(--sui-type-paragraph-sm-size, 14px);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);font-weight:var(--sui-type-paragraph-sm-weight, 400);color:var(--sui-text-strong-950);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-dropdown-item__sublabel{font-size:var(--sui-type-paragraph-xs-size, 12px);line-height:var(--sui-type-paragraph-xs-line, 16px);letter-spacing:var(--sui-type-paragraph-xs-spacing, 0);font-weight:var(--sui-type-paragraph-xs-weight, 400);color:var(--sui-text-soft-400);flex-shrink:0}.sui-dropdown-item__description{font-size:var(--sui-type-paragraph-xs-size, 12px);line-height:var(--sui-type-paragraph-xs-line, 16px);letter-spacing:var(--sui-type-paragraph-xs-spacing, 0);font-weight:var(--sui-type-paragraph-xs-weight, 400);color:var(--sui-text-sub-600);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-dropdown-item__trailing{flex-shrink:0;display:inline-flex;align-items:center;gap:8px}.sui-dropdown-item__trailing:empty{display:none}.sui-dropdown-item__shortcut{display:inline-flex;align-items:center;padding:2px 6px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-4, 4px);font-family:var(--sui-font-sans);font-size:12px;line-height:16px;font-weight:500;color:var(--sui-text-sub-600);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;flex-shrink:0}:host([data-sui-mode=option][data-sui-selected]){background:var(--sui-primary-alpha-10)}:host([data-sui-mode=option][data-sui-selected]) .sui-dropdown-item__label,:host([data-sui-mode=option][data-sui-selected]) .sui-dropdown-item__sublabel,:host([data-sui-mode=option][data-sui-selected]) .sui-dropdown-item__check{color:var(--sui-primary-base)}:host([data-sui-mode=option][data-sui-selected]):hover{background:var(--sui-primary-alpha-16)}.sui-dropdown-item__check{width:20px;height:20px;flex-shrink:0;color:var(--sui-primary-base)}:host([data-sui-highlighted]:not([data-sui-selected])){background:var(--sui-bg-weak-50)}:host([data-sui-disabled]){cursor:not-allowed;pointer-events:none}:host([data-sui-disabled]) .sui-dropdown-item__label,:host([data-sui-disabled]) .sui-dropdown-item__sublabel,:host([data-sui-disabled]) .sui-dropdown-item__description{color:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-dropdown-item__leading{color:var(--sui-icon-disabled-300, #d1d1d1)}:host([data-sui-disabled]) .sui-dropdown-item__leading>:not(sui-icon){opacity:.48}:host([data-sui-disabled]):hover{background:var(--sui-bg-white-0)}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4457
4457
|
}
|
|
4458
4458
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiDropdownItem, decorators: [{
|
|
4459
4459
|
type: Component,
|
|
@@ -4473,7 +4473,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
4473
4473
|
'(keydown.space)': 'onClick($event)',
|
|
4474
4474
|
'(touchstart)': '$event.currentTarget',
|
|
4475
4475
|
'(touchend)': '$any($event.currentTarget).blur()',
|
|
4476
|
-
}, template: "<div class=\"sui-dropdown-item__leading\">\n <ng-content select=\"[slot=leading]\" />\n</div>\n\n<div class=\"sui-dropdown-item__text\">\n <span class=\"sui-dropdown-item__label\">{{ label() }}</span>\n @if (hasSublabel()) {\n <span class=\"sui-dropdown-item__sublabel\">{{ sublabel() }}</span>\n }\n @if (hasDescription()) {\n <span class=\"sui-dropdown-item__description\">{{ description() }}</span>\n }\n</div>\n\n<div class=\"sui-dropdown-item__trailing\">\n <!-- Canon trailing-slot (Figma 405:6432): el consumer proyecta en este orden DOM\n fijo \u2192 badge primero, luego shortcut (provisto por el input shortcut() abajo),\n luego toggle/button al final. El gap del flex (8px) los separa.\n Pill button (variante Large): bg primary-alpha-10, p-6, radius-8, label primary\n Inter Medium 14/20. Link button (variante Small): texto primary sin bg.\n El componente no fija sublots \u2014 el orden lo controla el consumer seg\u00FAn este\n patr\u00F3n para mantener consistencia visual vs Figma. -->\n <ng-content select=\"[slot=trailing]\" />\n @if (shortcut()) {\n <span class=\"sui-dropdown-item__shortcut\">{{ shortcut() }}</span>\n }\n @if (showCheck()) {\n <!-- Check icon autom\u00E1tico en mode='option' cuando selected=true.\n Remixicon check-line (ri-check-line) v\u00EDa sui-icon \u2014 mismo glyph que\n el resto del proyecto, color heredado de .sui-dropdown-item__check. -->\n <sui-icon class=\"sui-dropdown-item__check\" name=\"check-line\" [size]=\"20\" />\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:8px;padding:8px;background:var(--sui-bg-white-0);border-radius:var(--sui-radius-8, 8px);cursor:pointer;outline:none;width:100%;box-sizing:border-box;font-family:var(--sui-font-sans);transition:background .1s ease-out,box-shadow .1s ease-out;-webkit-user-select:none;user-select:none}:host:hover{background:var(--sui-bg-weak-50)}:host:active:not([data-sui-disabled]),:host:focus-visible{box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-size=small]){min-height:36px;padding:8px;gap:8px}:host([data-sui-size=large]){min-height:56px;padding:8px;gap:12px;border-radius:var(--sui-radius-10, 10px)}:host([data-sui-size=large]) .sui-dropdown-item__text{flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-size=large]) .sui-dropdown-item__label{font-weight:var(--sui-type-label-sm-weight, 500)}:host([data-sui-size=xlarge]){min-height:76px;padding:8px;gap:16px;border-radius:var(--sui-radius-12, 12px)}:host([data-sui-size=xlarge]) .sui-dropdown-item__text{flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-size=xlarge]) .sui-dropdown-item__label{font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em);font-weight:var(--sui-type-label-md-weight, 500)}:host([data-sui-size=xlarge]) .sui-dropdown-item__description{font-size:var(--sui-type-paragraph-sm-size, 14px);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em)}.sui-dropdown-item__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.sui-dropdown-item__leading:empty{display:none}:host([data-sui-size=large][data-sui-framed]) .sui-dropdown-item__leading,:host([data-sui-size=xlarge][data-sui-framed]) .sui-dropdown-item__leading{padding:10px;border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-full, 999px);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box}:host([data-sui-size=xlarge][data-sui-framed]) .sui-dropdown-item__leading{padding:12px}.sui-dropdown-item__text{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:4px;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-dropdown-item__label{font-size:var(--sui-type-paragraph-sm-size, 14px);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);font-weight:var(--sui-type-paragraph-sm-weight, 400);color:var(--sui-text-strong-950);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-dropdown-item__sublabel{font-size:var(--sui-type-paragraph-xs-size, 12px);line-height:var(--sui-type-paragraph-xs-line, 16px);letter-spacing:var(--sui-type-paragraph-xs-spacing, 0);font-weight:var(--sui-type-paragraph-xs-weight, 400);color:var(--sui-text-soft-400);flex-shrink:0}.sui-dropdown-item__description{font-size:var(--sui-type-paragraph-xs-size, 12px);line-height:var(--sui-type-paragraph-xs-line, 16px);letter-spacing:var(--sui-type-paragraph-xs-spacing, 0);font-weight:var(--sui-type-paragraph-xs-weight, 400);color:var(--sui-text-sub-600);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-dropdown-item__trailing{flex-shrink:0;display:inline-flex;align-items:center;gap:8px}.sui-dropdown-item__trailing:empty{display:none}.sui-dropdown-item__shortcut{display:inline-flex;align-items:center;padding:2px 6px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-4, 4px);font-family:var(--sui-font-sans);font-size:12px;line-height:16px;font-weight:500;color:var(--sui-text-sub-600);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;flex-shrink:0}:host([data-sui-mode=option][data-sui-selected]){background:var(--sui-primary-alpha-10)}:host([data-sui-mode=option][data-sui-selected]) .sui-dropdown-item__label,:host([data-sui-mode=option][data-sui-selected]) .sui-dropdown-item__sublabel,:host([data-sui-mode=option][data-sui-selected]) .sui-dropdown-item__check{color:var(--sui-primary-base)}:host([data-sui-mode=option][data-sui-selected]):hover{background:var(--sui-primary-alpha-16)}.sui-dropdown-item__check{width:20px;height:20px;flex-shrink:0;color:var(--sui-primary-base)}:host([data-sui-highlighted]:not([data-sui-selected])){background:var(--sui-bg-weak-50)}:host([data-sui-disabled]){cursor:not-allowed;pointer-events:none}:host([data-sui-disabled]) .sui-dropdown-item__label,:host([data-sui-disabled]) .sui-dropdown-item__sublabel,:host([data-sui-disabled]) .sui-dropdown-item__description{color:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-dropdown-item__leading{color:var(--sui-icon-disabled-300, #d1d1d1)}:host([data-sui-disabled]):hover{background:var(--sui-bg-white-0)}\n"] }]
|
|
4476
|
+
}, template: "<div class=\"sui-dropdown-item__leading\">\n <ng-content select=\"[slot=leading]\" />\n</div>\n\n<div class=\"sui-dropdown-item__text\">\n <span class=\"sui-dropdown-item__label\">{{ label() }}</span>\n @if (hasSublabel()) {\n <span class=\"sui-dropdown-item__sublabel\">{{ sublabel() }}</span>\n }\n @if (hasDescription()) {\n <span class=\"sui-dropdown-item__description\">{{ description() }}</span>\n }\n</div>\n\n<div class=\"sui-dropdown-item__trailing\">\n <!-- Canon trailing-slot (Figma 405:6432): el consumer proyecta en este orden DOM\n fijo \u2192 badge primero, luego shortcut (provisto por el input shortcut() abajo),\n luego toggle/button al final. El gap del flex (8px) los separa.\n Pill button (variante Large): bg primary-alpha-10, p-6, radius-8, label primary\n Inter Medium 14/20. Link button (variante Small): texto primary sin bg.\n El componente no fija sublots \u2014 el orden lo controla el consumer seg\u00FAn este\n patr\u00F3n para mantener consistencia visual vs Figma. -->\n <ng-content select=\"[slot=trailing]\" />\n @if (shortcut()) {\n <span class=\"sui-dropdown-item__shortcut\">{{ shortcut() }}</span>\n }\n @if (showCheck()) {\n <!-- Check icon autom\u00E1tico en mode='option' cuando selected=true.\n Remixicon check-line (ri-check-line) v\u00EDa sui-icon \u2014 mismo glyph que\n el resto del proyecto, color heredado de .sui-dropdown-item__check. -->\n <sui-icon class=\"sui-dropdown-item__check\" name=\"check-line\" [size]=\"20\" />\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:8px;padding:8px;background:var(--sui-bg-white-0);border-radius:var(--sui-radius-8, 8px);cursor:pointer;outline:none;width:100%;box-sizing:border-box;font-family:var(--sui-font-sans);transition:background .1s ease-out,box-shadow .1s ease-out;-webkit-user-select:none;user-select:none}:host:hover{background:var(--sui-bg-weak-50)}:host:active:not([data-sui-disabled]),:host:focus-visible{box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-size=small]){min-height:36px;padding:8px;gap:8px}:host([data-sui-size=large]){min-height:56px;padding:8px;gap:12px;border-radius:var(--sui-radius-10, 10px)}:host([data-sui-size=large]) .sui-dropdown-item__text{flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-size=large]) .sui-dropdown-item__label{font-weight:var(--sui-type-label-sm-weight, 500)}:host([data-sui-size=xlarge]){min-height:76px;padding:8px;gap:16px;border-radius:var(--sui-radius-12, 12px)}:host([data-sui-size=xlarge]) .sui-dropdown-item__text{flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-size=xlarge]) .sui-dropdown-item__label{font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em);font-weight:var(--sui-type-label-md-weight, 500)}:host([data-sui-size=xlarge]) .sui-dropdown-item__description{font-size:var(--sui-type-paragraph-sm-size, 14px);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em)}.sui-dropdown-item__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.sui-dropdown-item__leading:empty{display:none}:host([data-sui-size=large][data-sui-framed]) .sui-dropdown-item__leading,:host([data-sui-size=xlarge][data-sui-framed]) .sui-dropdown-item__leading{padding:10px;border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-full, 999px);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box}:host([data-sui-size=xlarge][data-sui-framed]) .sui-dropdown-item__leading{padding:12px}.sui-dropdown-item__text{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:4px;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-dropdown-item__label{font-size:var(--sui-type-paragraph-sm-size, 14px);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);font-weight:var(--sui-type-paragraph-sm-weight, 400);color:var(--sui-text-strong-950);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-dropdown-item__sublabel{font-size:var(--sui-type-paragraph-xs-size, 12px);line-height:var(--sui-type-paragraph-xs-line, 16px);letter-spacing:var(--sui-type-paragraph-xs-spacing, 0);font-weight:var(--sui-type-paragraph-xs-weight, 400);color:var(--sui-text-soft-400);flex-shrink:0}.sui-dropdown-item__description{font-size:var(--sui-type-paragraph-xs-size, 12px);line-height:var(--sui-type-paragraph-xs-line, 16px);letter-spacing:var(--sui-type-paragraph-xs-spacing, 0);font-weight:var(--sui-type-paragraph-xs-weight, 400);color:var(--sui-text-sub-600);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-dropdown-item__trailing{flex-shrink:0;display:inline-flex;align-items:center;gap:8px}.sui-dropdown-item__trailing:empty{display:none}.sui-dropdown-item__shortcut{display:inline-flex;align-items:center;padding:2px 6px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-4, 4px);font-family:var(--sui-font-sans);font-size:12px;line-height:16px;font-weight:500;color:var(--sui-text-sub-600);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;flex-shrink:0}:host([data-sui-mode=option][data-sui-selected]){background:var(--sui-primary-alpha-10)}:host([data-sui-mode=option][data-sui-selected]) .sui-dropdown-item__label,:host([data-sui-mode=option][data-sui-selected]) .sui-dropdown-item__sublabel,:host([data-sui-mode=option][data-sui-selected]) .sui-dropdown-item__check{color:var(--sui-primary-base)}:host([data-sui-mode=option][data-sui-selected]):hover{background:var(--sui-primary-alpha-16)}.sui-dropdown-item__check{width:20px;height:20px;flex-shrink:0;color:var(--sui-primary-base)}:host([data-sui-highlighted]:not([data-sui-selected])){background:var(--sui-bg-weak-50)}:host([data-sui-disabled]){cursor:not-allowed;pointer-events:none}:host([data-sui-disabled]) .sui-dropdown-item__label,:host([data-sui-disabled]) .sui-dropdown-item__sublabel,:host([data-sui-disabled]) .sui-dropdown-item__description{color:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-dropdown-item__leading{color:var(--sui-icon-disabled-300, #d1d1d1)}:host([data-sui-disabled]) .sui-dropdown-item__leading>:not(sui-icon){opacity:.48}:host([data-sui-disabled]):hover{background:var(--sui-bg-white-0)}\n"] }]
|
|
4477
4477
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], leadingFramed: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingFramed", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], highlighted: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlighted", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], shortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "shortcut", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
4478
4478
|
|
|
4479
4479
|
/**
|
|
@@ -4929,13 +4929,13 @@ class SuiCompactSelect {
|
|
|
4929
4929
|
this._formDisabled.set(isDisabled);
|
|
4930
4930
|
}
|
|
4931
4931
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiCompactSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4932
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiCompactSelect, isStandalone: true, selector: "sui-compact-select", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, flag: { classPropertyName: "flag", publicName: "flag", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", clicked: "clicked", selectedChange: "selectedChange" }, host: { properties: { "attr.title": "null", "attr.data-sui-type": "type()", "attr.data-sui-size": "size()", "attr.data-sui-error": "error() ? \"\" : null", "attr.data-sui-disabled": "mergedDisabled() ? \"\" : null", "attr.data-sui-open": "isOpen() ? \"\" : null" } }, providers: [
|
|
4932
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiCompactSelect, isStandalone: true, selector: "sui-compact-select", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, flag: { classPropertyName: "flag", publicName: "flag", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", clicked: "clicked", selectedChange: "selectedChange" }, host: { properties: { "attr.title": "null", "attr.data-sui-type": "type()", "attr.data-sui-size": "size()", "attr.data-sui-error": "error() ? \"\" : null", "attr.data-sui-disabled": "mergedDisabled() ? \"\" : null", "attr.data-sui-open": "isOpen() ? \"\" : null", "attr.data-sui-filled": "hasValue() ? \"\" : null" } }, providers: [
|
|
4933
4933
|
{
|
|
4934
4934
|
provide: NG_VALUE_ACCESSOR,
|
|
4935
4935
|
useExisting: forwardRef(() => SuiCompactSelect),
|
|
4936
4936
|
multi: true,
|
|
4937
4937
|
},
|
|
4938
|
-
], viewQueries: [{ propertyName: "_menu", first: true, predicate: SuiDropdownMenu, descendants: true, isSignal: true }, { propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n Trigger DIV interno \u2014 patr\u00F3n canon sui-select. La interacci\u00F3n\n (click/keyboard/role/aria/tabindex) y el anclaje del overlay viven ac\u00E1, NO\n en el host. El host custom-element NO debe colgar (click)+(touchend\u2192blur)\n porque el blur() s\u00EDncrono en touchend cancela el click sint\u00E9tico de iOS\n WebKit y el menu no abre. Moverlo a un div interno sin touch handlers\n elimina la causa ra\u00EDz por equivalencia con sui-select (probado en iOS real).\n-->\n<div\n #triggerEl\n class=\"sui-compact-select__trigger\"\n role=\"button\"\n [attr.tabindex]=\"mergedDisabled() ? null : 0\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-disabled]=\"mergedDisabled() ? '' : null\"\n [class.sui-compact-select__trigger--open]=\"isOpen()\"\n [class.sui-compact-select__trigger--error]=\"error()\"\n [class.sui-compact-select__trigger--disabled]=\"mergedDisabled()\"\n (click)=\"onTriggerClick($event)\"\n (keydown.enter)=\"onTriggerClick($event)\"\n (keydown.space)=\"onTriggerClick($event); $event.preventDefault()\"\n>\n <!-- Leading slot seg\u00FAn type. Prioriza el selected item; sino usa el input est\u00E1tico. -->\n @switch (type()) {\n @case ('icon') {\n @if (displayIcon()) {\n <sui-icon class=\"sui-compact-select__leading\" [name]=\"displayIcon()!\" [size]=\"20\" />\n }\n }\n @case ('country') {\n @if (displayFlag()) {\n <sui-flag class=\"sui-compact-select__leading\" [name]=\"displayFlag()!\" [size]=\"flagSize()\" />\n }\n }\n }\n\n <!-- Value / placeholder text (basic + country muestran texto; icon usualmente sin). -->\n @if (type() !== 'icon') {\n <span class=\"sui-compact-select__value\" [attr.data-sui-placeholder]=\"hasValue() ? null : ''\">\n {{ hasValue() ? displayValue() : placeholder() }}\n </span>\n }\n\n <!-- Trailing arrow. -->\n <sui-icon class=\"sui-compact-select__arrow\" [name]=\"arrowIcon()\" [size]=\"20\" />\n</div>\n\n<!-- Overlay menu \u2014 delegado a sui-dropdown-menu. El trigger DIV interno es el\n [origin]=triggerEl; el menu solo gestiona el panel.\n Solo se renderea cuando hay items (mode 2). -->\n@if (items().length > 0) {\n <sui-dropdown-menu\n [origin]=\"triggerEl\"\n [disabled]=\"mergedDisabled()\"\n [minWidth]=\"200\"\n panelClass=\"sui-compact-select__overlay-pane\"\n (openedChange)=\"onMenuOpenedChange($event)\"\n >\n <ng-template suiDropdownPanel>\n <div class=\"sui-compact-select__menu\">\n @for (item of items(); track item.value) {\n <sui-dropdown-item\n mode=\"option\"\n [label]=\"item.label\"\n [sublabel]=\"item.sublabel ?? ''\"\n [selected]=\"item.value === selected()?.value\"\n [disabled]=\"item.disabled ?? false\"\n (click)=\"selectItem(item)\"\n >\n @if (item.flag) {\n <sui-flag slot=\"leading\" [name]=\"item.flag\" size=\"sm\" />\n } @else if (item.icon) {\n <sui-icon slot=\"leading\" [name]=\"item.icon\" [size]=\"20\" />\n }\n </sui-dropdown-item>\n }\n </div>\n </ng-template>\n </sui-dropdown-menu>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;flex-shrink:0;box-sizing:border-box;vertical-align:middle;font-family:var(--sui-font-sans, sans-serif)}.sui-compact-select__trigger{display:inline-flex;align-items:center;flex-shrink:0;box-sizing:border-box;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);box-shadow:0 1px 2px #0a0d1408;cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;transition:background-color .1s ease,border-color .1s ease,box-shadow .1s ease;font-family:var(--sui-font-sans, sans-serif);font-size:var(--sui-type-paragraph-sm-size, 14px);font-weight:var(--sui-type-paragraph-sm-weight, 400);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}:host([data-sui-size=medium]) .sui-compact-select__trigger{padding:9px 10px;gap:4px;border-radius:var(--sui-radius-10, 10px)}:host([data-sui-size=small]) .sui-compact-select__trigger{padding:7px 8px;gap:4px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-size=xsmall]) .sui-compact-select__trigger{padding:5px 6px;gap:2px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-type=basic][data-sui-size=medium]) .sui-compact-select__trigger{padding:9px 10px 9px 12px}:host([data-sui-type=basic][data-sui-size=small]) .sui-compact-select__trigger{padding:7px 8px 7px 12px}:host([data-sui-type=basic][data-sui-size=xsmall]) .sui-compact-select__trigger{padding:5px 6px 5px 10px}.sui-compact-select__trigger:not(.sui-compact-select__trigger--disabled):not(.sui-compact-select__trigger--error):not(.sui-compact-select__trigger--open):hover{background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent;box-shadow:none}.sui-compact-select__trigger:not(.sui-compact-select__trigger--disabled):focus-visible,.sui-compact-select__trigger--open:not(.sui-compact-select__trigger--disabled){outline:none;background:var(--sui-bg-white-0, #fff);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, .16))}.sui-compact-select__trigger--error:not(.sui-compact-select__trigger--disabled){border-color:var(--sui-state-error-base, #fb3748)}.sui-compact-select__trigger--error:not(.sui-compact-select__trigger--disabled):focus-visible,.sui-compact-select__trigger--error.sui-compact-select__trigger--open:not(.sui-compact-select__trigger--disabled){outline:none;border-color:var(--sui-state-error-base, #fb3748);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px var(--sui-red-alpha-16, rgba(251, 55, 72, .16))}.sui-compact-select__trigger--disabled{background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent;color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;pointer-events:none;box-shadow:none}.sui-compact-select__trigger--disabled .sui-compact-select__leading{opacity:.48}.sui-compact-select__trigger--disabled .sui-compact-select__arrow{color:var(--sui-icon-disabled-300, #d1d1d1)}.sui-compact-select__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:var(--sui-text-sub-600, #5c5c5c)}.sui-compact-select__value{flex:1 0 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.sui-compact-select__value[data-sui-placeholder]{color:var(--sui-text-sub-600, #5c5c5c)}.sui-compact-select__arrow{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c);transition:transform .12s ease}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiFlag, selector: "sui-flag", inputs: ["name", "size", "ariaLabel"] }, { kind: "component", type: SuiDropdownItem, selector: "sui-dropdown-item", inputs: ["label", "sublabel", "description", "size", "leadingFramed", "mode", "selected", "highlighted", "disabled", "shortcut"], outputs: ["clicked"] }, { 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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4938
|
+
], viewQueries: [{ propertyName: "_menu", first: true, predicate: SuiDropdownMenu, descendants: true, isSignal: true }, { propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n Trigger DIV interno \u2014 patr\u00F3n canon sui-select. La interacci\u00F3n\n (click/keyboard/role/aria/tabindex) y el anclaje del overlay viven ac\u00E1, NO\n en el host. El host custom-element NO debe colgar (click)+(touchend\u2192blur)\n porque el blur() s\u00EDncrono en touchend cancela el click sint\u00E9tico de iOS\n WebKit y el menu no abre. Moverlo a un div interno sin touch handlers\n elimina la causa ra\u00EDz por equivalencia con sui-select (probado en iOS real).\n-->\n<div\n #triggerEl\n class=\"sui-compact-select__trigger\"\n role=\"button\"\n [attr.tabindex]=\"mergedDisabled() ? null : 0\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-disabled]=\"mergedDisabled() ? '' : null\"\n [class.sui-compact-select__trigger--open]=\"isOpen()\"\n [class.sui-compact-select__trigger--error]=\"error()\"\n [class.sui-compact-select__trigger--disabled]=\"mergedDisabled()\"\n (click)=\"onTriggerClick($event)\"\n (keydown.enter)=\"onTriggerClick($event)\"\n (keydown.space)=\"onTriggerClick($event); $event.preventDefault()\"\n>\n <!-- Leading slot seg\u00FAn type. Prioriza el selected item; sino usa el input est\u00E1tico. -->\n @switch (type()) {\n @case ('icon') {\n @if (displayIcon()) {\n <sui-icon class=\"sui-compact-select__leading\" [name]=\"displayIcon()!\" [size]=\"20\" />\n }\n }\n @case ('country') {\n @if (displayFlag()) {\n <sui-flag class=\"sui-compact-select__leading\" [name]=\"displayFlag()!\" [size]=\"flagSize()\" />\n }\n }\n }\n\n <!-- Value / placeholder text (basic + country muestran texto; icon usualmente sin). -->\n @if (type() !== 'icon') {\n <span class=\"sui-compact-select__value\" [attr.data-sui-placeholder]=\"hasValue() ? null : ''\">\n {{ hasValue() ? displayValue() : placeholder() }}\n </span>\n }\n\n <!-- Trailing arrow. -->\n <sui-icon class=\"sui-compact-select__arrow\" [name]=\"arrowIcon()\" [size]=\"20\" />\n</div>\n\n<!-- Overlay menu \u2014 delegado a sui-dropdown-menu. El trigger DIV interno es el\n [origin]=triggerEl; el menu solo gestiona el panel.\n Solo se renderea cuando hay items (mode 2). -->\n@if (items().length > 0) {\n <sui-dropdown-menu\n [origin]=\"triggerEl\"\n [disabled]=\"mergedDisabled()\"\n [minWidth]=\"200\"\n panelClass=\"sui-compact-select__overlay-pane\"\n (openedChange)=\"onMenuOpenedChange($event)\"\n >\n <ng-template suiDropdownPanel>\n <div class=\"sui-compact-select__menu\">\n @for (item of items(); track item.value) {\n <sui-dropdown-item\n mode=\"option\"\n [label]=\"item.label\"\n [sublabel]=\"item.sublabel ?? ''\"\n [selected]=\"item.value === selected()?.value\"\n [disabled]=\"item.disabled ?? false\"\n (click)=\"selectItem(item)\"\n >\n @if (item.flag) {\n <sui-flag slot=\"leading\" [name]=\"item.flag\" size=\"sm\" />\n } @else if (item.icon) {\n <sui-icon slot=\"leading\" [name]=\"item.icon\" [size]=\"20\" />\n }\n </sui-dropdown-item>\n }\n </div>\n </ng-template>\n </sui-dropdown-menu>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;flex-shrink:0;box-sizing:border-box;vertical-align:middle;font-family:var(--sui-font-sans, sans-serif)}.sui-compact-select__trigger{display:inline-flex;align-items:center;flex-shrink:0;box-sizing:border-box;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);box-shadow:0 1px 2px #0a0d1408;cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;transition:background-color .1s ease,border-color .1s ease,box-shadow .1s ease;font-family:var(--sui-font-sans, sans-serif);font-size:var(--sui-type-paragraph-sm-size, 14px);font-weight:var(--sui-type-paragraph-sm-weight, 400);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}:host([data-sui-size=medium]) .sui-compact-select__trigger{padding:9px 10px;gap:4px;border-radius:var(--sui-radius-10, 10px)}:host([data-sui-size=small]) .sui-compact-select__trigger{padding:7px 8px;gap:4px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-size=xsmall]) .sui-compact-select__trigger{padding:5px 6px;gap:2px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-type=basic][data-sui-size=medium]) .sui-compact-select__trigger{padding:9px 10px 9px 12px}:host([data-sui-type=basic][data-sui-size=small]) .sui-compact-select__trigger{padding:7px 8px 7px 12px}:host([data-sui-type=basic][data-sui-size=xsmall]) .sui-compact-select__trigger{padding:5px 6px 5px 10px}.sui-compact-select__trigger:not(.sui-compact-select__trigger--disabled):not(.sui-compact-select__trigger--error):not(.sui-compact-select__trigger--open):hover{background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent;box-shadow:none}.sui-compact-select__trigger:not(.sui-compact-select__trigger--disabled):focus-visible,.sui-compact-select__trigger--open:not(.sui-compact-select__trigger--disabled){outline:none;background:var(--sui-bg-white-0, #fff);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, .16))}.sui-compact-select__trigger--error:not(.sui-compact-select__trigger--disabled){border-color:var(--sui-state-error-base, #fb3748)}.sui-compact-select__trigger--error:not(.sui-compact-select__trigger--disabled):focus-visible,.sui-compact-select__trigger--error.sui-compact-select__trigger--open:not(.sui-compact-select__trigger--disabled){outline:none;border-color:var(--sui-state-error-base, #fb3748);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px var(--sui-red-alpha-16, rgba(251, 55, 72, .16))}.sui-compact-select__trigger--disabled{background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent;color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;pointer-events:none;box-shadow:none}.sui-compact-select__trigger--disabled .sui-compact-select__leading{opacity:.48}.sui-compact-select__trigger--disabled .sui-compact-select__arrow{color:var(--sui-icon-disabled-300, #d1d1d1)}.sui-compact-select__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:var(--sui-text-sub-600, #5c5c5c)}:host([data-sui-filled]) .sui-compact-select__leading{color:var(--sui-icon-strong-950, #171717)}.sui-compact-select__value{flex:1 0 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.sui-compact-select__value[data-sui-placeholder]{color:var(--sui-text-sub-600, #5c5c5c)}.sui-compact-select__trigger--disabled .sui-compact-select__value[data-sui-placeholder]{color:var(--sui-text-disabled-300, #d1d1d1)}.sui-compact-select__arrow{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c);transition:transform .12s ease}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiFlag, selector: "sui-flag", inputs: ["name", "size", "ariaLabel"] }, { kind: "component", type: SuiDropdownItem, selector: "sui-dropdown-item", inputs: ["label", "sublabel", "description", "size", "leadingFramed", "mode", "selected", "highlighted", "disabled", "shortcut"], outputs: ["clicked"] }, { 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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4939
4939
|
}
|
|
4940
4940
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiCompactSelect, decorators: [{
|
|
4941
4941
|
type: Component,
|
|
@@ -4959,7 +4959,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
4959
4959
|
'[attr.data-sui-error]': 'error() ? "" : null',
|
|
4960
4960
|
'[attr.data-sui-disabled]': 'mergedDisabled() ? "" : null',
|
|
4961
4961
|
'[attr.data-sui-open]': 'isOpen() ? "" : null',
|
|
4962
|
-
|
|
4962
|
+
'[attr.data-sui-filled]': 'hasValue() ? "" : null',
|
|
4963
|
+
}, template: "<!--\n Trigger DIV interno \u2014 patr\u00F3n canon sui-select. La interacci\u00F3n\n (click/keyboard/role/aria/tabindex) y el anclaje del overlay viven ac\u00E1, NO\n en el host. El host custom-element NO debe colgar (click)+(touchend\u2192blur)\n porque el blur() s\u00EDncrono en touchend cancela el click sint\u00E9tico de iOS\n WebKit y el menu no abre. Moverlo a un div interno sin touch handlers\n elimina la causa ra\u00EDz por equivalencia con sui-select (probado en iOS real).\n-->\n<div\n #triggerEl\n class=\"sui-compact-select__trigger\"\n role=\"button\"\n [attr.tabindex]=\"mergedDisabled() ? null : 0\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-disabled]=\"mergedDisabled() ? '' : null\"\n [class.sui-compact-select__trigger--open]=\"isOpen()\"\n [class.sui-compact-select__trigger--error]=\"error()\"\n [class.sui-compact-select__trigger--disabled]=\"mergedDisabled()\"\n (click)=\"onTriggerClick($event)\"\n (keydown.enter)=\"onTriggerClick($event)\"\n (keydown.space)=\"onTriggerClick($event); $event.preventDefault()\"\n>\n <!-- Leading slot seg\u00FAn type. Prioriza el selected item; sino usa el input est\u00E1tico. -->\n @switch (type()) {\n @case ('icon') {\n @if (displayIcon()) {\n <sui-icon class=\"sui-compact-select__leading\" [name]=\"displayIcon()!\" [size]=\"20\" />\n }\n }\n @case ('country') {\n @if (displayFlag()) {\n <sui-flag class=\"sui-compact-select__leading\" [name]=\"displayFlag()!\" [size]=\"flagSize()\" />\n }\n }\n }\n\n <!-- Value / placeholder text (basic + country muestran texto; icon usualmente sin). -->\n @if (type() !== 'icon') {\n <span class=\"sui-compact-select__value\" [attr.data-sui-placeholder]=\"hasValue() ? null : ''\">\n {{ hasValue() ? displayValue() : placeholder() }}\n </span>\n }\n\n <!-- Trailing arrow. -->\n <sui-icon class=\"sui-compact-select__arrow\" [name]=\"arrowIcon()\" [size]=\"20\" />\n</div>\n\n<!-- Overlay menu \u2014 delegado a sui-dropdown-menu. El trigger DIV interno es el\n [origin]=triggerEl; el menu solo gestiona el panel.\n Solo se renderea cuando hay items (mode 2). -->\n@if (items().length > 0) {\n <sui-dropdown-menu\n [origin]=\"triggerEl\"\n [disabled]=\"mergedDisabled()\"\n [minWidth]=\"200\"\n panelClass=\"sui-compact-select__overlay-pane\"\n (openedChange)=\"onMenuOpenedChange($event)\"\n >\n <ng-template suiDropdownPanel>\n <div class=\"sui-compact-select__menu\">\n @for (item of items(); track item.value) {\n <sui-dropdown-item\n mode=\"option\"\n [label]=\"item.label\"\n [sublabel]=\"item.sublabel ?? ''\"\n [selected]=\"item.value === selected()?.value\"\n [disabled]=\"item.disabled ?? false\"\n (click)=\"selectItem(item)\"\n >\n @if (item.flag) {\n <sui-flag slot=\"leading\" [name]=\"item.flag\" size=\"sm\" />\n } @else if (item.icon) {\n <sui-icon slot=\"leading\" [name]=\"item.icon\" [size]=\"20\" />\n }\n </sui-dropdown-item>\n }\n </div>\n </ng-template>\n </sui-dropdown-menu>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;flex-shrink:0;box-sizing:border-box;vertical-align:middle;font-family:var(--sui-font-sans, sans-serif)}.sui-compact-select__trigger{display:inline-flex;align-items:center;flex-shrink:0;box-sizing:border-box;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);box-shadow:0 1px 2px #0a0d1408;cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;transition:background-color .1s ease,border-color .1s ease,box-shadow .1s ease;font-family:var(--sui-font-sans, sans-serif);font-size:var(--sui-type-paragraph-sm-size, 14px);font-weight:var(--sui-type-paragraph-sm-weight, 400);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}:host([data-sui-size=medium]) .sui-compact-select__trigger{padding:9px 10px;gap:4px;border-radius:var(--sui-radius-10, 10px)}:host([data-sui-size=small]) .sui-compact-select__trigger{padding:7px 8px;gap:4px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-size=xsmall]) .sui-compact-select__trigger{padding:5px 6px;gap:2px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-type=basic][data-sui-size=medium]) .sui-compact-select__trigger{padding:9px 10px 9px 12px}:host([data-sui-type=basic][data-sui-size=small]) .sui-compact-select__trigger{padding:7px 8px 7px 12px}:host([data-sui-type=basic][data-sui-size=xsmall]) .sui-compact-select__trigger{padding:5px 6px 5px 10px}.sui-compact-select__trigger:not(.sui-compact-select__trigger--disabled):not(.sui-compact-select__trigger--error):not(.sui-compact-select__trigger--open):hover{background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent;box-shadow:none}.sui-compact-select__trigger:not(.sui-compact-select__trigger--disabled):focus-visible,.sui-compact-select__trigger--open:not(.sui-compact-select__trigger--disabled){outline:none;background:var(--sui-bg-white-0, #fff);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, .16))}.sui-compact-select__trigger--error:not(.sui-compact-select__trigger--disabled){border-color:var(--sui-state-error-base, #fb3748)}.sui-compact-select__trigger--error:not(.sui-compact-select__trigger--disabled):focus-visible,.sui-compact-select__trigger--error.sui-compact-select__trigger--open:not(.sui-compact-select__trigger--disabled){outline:none;border-color:var(--sui-state-error-base, #fb3748);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px var(--sui-red-alpha-16, rgba(251, 55, 72, .16))}.sui-compact-select__trigger--disabled{background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent;color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;pointer-events:none;box-shadow:none}.sui-compact-select__trigger--disabled .sui-compact-select__leading{opacity:.48}.sui-compact-select__trigger--disabled .sui-compact-select__arrow{color:var(--sui-icon-disabled-300, #d1d1d1)}.sui-compact-select__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:var(--sui-text-sub-600, #5c5c5c)}:host([data-sui-filled]) .sui-compact-select__leading{color:var(--sui-icon-strong-950, #171717)}.sui-compact-select__value{flex:1 0 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.sui-compact-select__value[data-sui-placeholder]{color:var(--sui-text-sub-600, #5c5c5c)}.sui-compact-select__trigger--disabled .sui-compact-select__value[data-sui-placeholder]{color:var(--sui-text-disabled-300, #d1d1d1)}.sui-compact-select__arrow{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c);transition:transform .12s ease}\n"] }]
|
|
4963
4964
|
}], ctorParameters: () => [], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], flag: [{ type: i0.Input, args: [{ isSignal: true, alias: "flag", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], _menu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SuiDropdownMenu), { isSignal: true }] }], triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }] } });
|
|
4964
4965
|
|
|
4965
4966
|
/**
|
|
@@ -5735,7 +5736,9 @@ class SuiFormHint {
|
|
|
5735
5736
|
/** Default icons per variant */
|
|
5736
5737
|
static _defaultIcons = {
|
|
5737
5738
|
neutral: null,
|
|
5738
|
-
|
|
5739
|
+
// Figma 267:1279 (Text Input State=Error, hint I267:1285): information-fill
|
|
5740
|
+
// relleno recoloreado a error-base — mismo glifo que Default, NO outline.
|
|
5741
|
+
error: 'information-fill',
|
|
5739
5742
|
success: 'checkbox-circle-line',
|
|
5740
5743
|
warning: 'alert-line',
|
|
5741
5744
|
// Figma node 266:5284 (Hint Text State=Disabled) SÍ renderiza el icono
|
|
@@ -5918,7 +5921,7 @@ class SuiCounterInput {
|
|
|
5918
5921
|
useExisting: forwardRef(() => SuiCounterInput),
|
|
5919
5922
|
multi: true,
|
|
5920
5923
|
},
|
|
5921
|
-
], ngImport: i0, template: "@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n [size]=\"size()\"\n class=\"sui-counter-input__label-host\"\n />\n}\n\n<div\n class=\"sui-counter-input__field\"\n [class.sui-counter-input__field--error]=\"error()\"\n [class.sui-counter-input__field--disabled]=\"isDisabled()\"\n>\n <!-- Stepper \u2212 (decrement) -->\n <button\n type=\"button\"\n class=\"sui-counter-input__stepper\"\n [attr.aria-label]=\"decrementLabel()\"\n [disabled]=\"!canDecrement() || null\"\n (click)=\"decrement()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"subtract-line\" [size]=\"20\" />\n </button>\n\n <!-- Valor centrado (spinbutton) -->\n <span\n class=\"sui-counter-input__value\"\n role=\"spinbutton\"\n [attr.aria-valuenow]=\"effectiveValue()\"\n [attr.aria-valuemin]=\"ariaMin()\"\n [attr.aria-valuemax]=\"ariaMax()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n [attr.aria-invalid]=\"error() ? 'true' : null\"\n >\n {{ displayValue() }}\n </span>\n\n <!-- Stepper + (increment) -->\n <button\n type=\"button\"\n class=\"sui-counter-input__stepper\"\n [attr.aria-label]=\"incrementLabel()\"\n [disabled]=\"!canIncrement() || null\"\n (click)=\"increment()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"add-line\" [size]=\"20\" />\n </button>\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n [size]=\"size()\"\n class=\"sui-counter-input__hint-host\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-counter-input__label-host{display:block;margin-bottom:6px}.sui-counter-input__hint-host{display:block;margin-top:6px}.sui-counter-input__field{display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;overflow:hidden;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);transition:background var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),border-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)}:host([data-sui-size=medium]) .sui-counter-input__field,:host(:not([data-sui-size])) .sui-counter-input__field{gap:8px;padding:8px;border-radius:var(--sui-radius-10, 10px);min-height:40px}:host([data-sui-size=small]) .sui-counter-input__field{gap:6px;padding:6px;border-radius:var(--sui-radius-8, 8px);min-height:36px}:host([data-sui-size=xsmall]) .sui-counter-input__field{gap:4px;padding:4px;border-radius:var(--sui-radius-8, 8px);min-height:32px}.sui-counter-input__field:not(.sui-counter-input__field--disabled):not(.sui-counter-input__field--error):hover{background:var(--sui-bg-weak-50);border-color:transparent}.sui-counter-input__field:not(.sui-counter-input__field--disabled):not(.sui-counter-input__field--error):focus-within{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-counter-input__field--error{border-color:var(--sui-state-error-base);box-shadow:var(--sui-regular-shadow-x-small)}.sui-counter-input__field--error:focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 3px var(--sui-red-alpha-10, rgba(251, 55, 72, .1019607843))}.sui-counter-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-counter-input__stepper{appearance:none;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;width:24px;height:24px;min-width:0;min-height:0;margin:0;padding:2px;border:0;border-radius:var(--sui-radius-6, 6px);background:transparent;color:var(--sui-icon-sub-600);line-height:0;cursor:pointer;transition:background .12s,color .12s,transform var(--dur-instant, 80ms) var(--ease-ek, cubic-bezier(.22, 1, .36, 1))}.sui-counter-input__stepper:hover:not(:disabled){background:var(--sui-bg-weak-50);color:var(--sui-icon-strong-950)}.sui-counter-input__stepper:active:not(:disabled){background:var(--sui-bg-surface-800);color:var(--sui-icon-white-0);transform:scale(.92)}.sui-counter-input__stepper:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}.sui-counter-input__stepper:disabled{color:var(--sui-icon-disabled-300);cursor:not-allowed;pointer-events:none;opacity:.5}.sui-counter-input__field:hover .sui-counter-input__stepper:hover:not(:disabled){background:var(--sui-bg-white-0)}:host([data-sui-disabled]) .sui-counter-input__stepper{color:var(--sui-icon-disabled-300);opacity:1}.sui-counter-input__value{flex:1 1 auto;min-width:0;text-align:center;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size, 14px);font-weight:var(--sui-type-paragraph-sm-weight, 400);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-user-select:none;user-select:none;color:var(--sui-text-strong-950)}.sui-counter-input__field--disabled .sui-counter-input__value{color:var(--sui-text-disabled-300)}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5924
|
+
], ngImport: i0, template: "@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n [size]=\"size()\"\n class=\"sui-counter-input__label-host\"\n />\n}\n\n<div\n class=\"sui-counter-input__field\"\n [class.sui-counter-input__field--error]=\"error()\"\n [class.sui-counter-input__field--disabled]=\"isDisabled()\"\n>\n <!-- Stepper \u2212 (decrement) -->\n <button\n type=\"button\"\n class=\"sui-counter-input__stepper\"\n [attr.aria-label]=\"decrementLabel()\"\n [disabled]=\"!canDecrement() || null\"\n (click)=\"decrement()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"subtract-line\" [size]=\"20\" />\n </button>\n\n <!-- Valor centrado (spinbutton) -->\n <span\n class=\"sui-counter-input__value\"\n role=\"spinbutton\"\n [attr.aria-valuenow]=\"effectiveValue()\"\n [attr.aria-valuemin]=\"ariaMin()\"\n [attr.aria-valuemax]=\"ariaMax()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n [attr.aria-invalid]=\"error() ? 'true' : null\"\n >\n {{ displayValue() }}\n </span>\n\n <!-- Stepper + (increment) -->\n <button\n type=\"button\"\n class=\"sui-counter-input__stepper\"\n [attr.aria-label]=\"incrementLabel()\"\n [disabled]=\"!canIncrement() || null\"\n (click)=\"increment()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"add-line\" [size]=\"20\" />\n </button>\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n [size]=\"size()\"\n class=\"sui-counter-input__hint-host\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-counter-input__label-host{display:block;margin-bottom:6px}.sui-counter-input__hint-host{display:block;margin-top:6px}.sui-counter-input__field{display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;overflow:hidden;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);transition:background var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),border-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)}:host([data-sui-size=medium]) .sui-counter-input__field,:host(:not([data-sui-size])) .sui-counter-input__field{gap:8px;padding:7px 8px;border-radius:var(--sui-radius-10, 10px);min-height:40px}:host([data-sui-size=small]) .sui-counter-input__field{gap:6px;padding:5px 6px;border-radius:var(--sui-radius-8, 8px);min-height:36px}:host([data-sui-size=xsmall]) .sui-counter-input__field{gap:4px;padding:3px 4px;border-radius:var(--sui-radius-8, 8px);min-height:32px}.sui-counter-input__field:not(.sui-counter-input__field--disabled):not(.sui-counter-input__field--error):hover{background:var(--sui-bg-weak-50);border-color:transparent}.sui-counter-input__field:not(.sui-counter-input__field--disabled):not(.sui-counter-input__field--error):focus-within{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-counter-input__field--error{border-color:var(--sui-state-error-base);box-shadow:var(--sui-regular-shadow-x-small)}.sui-counter-input__field--error:focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 3px var(--sui-red-alpha-10, rgba(251, 55, 72, .1019607843))}.sui-counter-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-counter-input__stepper{appearance:none;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;width:24px;height:24px;min-width:0;min-height:0;margin:0;padding:2px;border:0;border-radius:var(--sui-radius-6, 6px);background:transparent;color:var(--sui-icon-sub-600);line-height:0;cursor:pointer;transition:background .12s,color .12s,transform var(--dur-instant, 80ms) var(--ease-ek, cubic-bezier(.22, 1, .36, 1))}.sui-counter-input__stepper:hover:not(:disabled){background:var(--sui-bg-weak-50);color:var(--sui-icon-strong-950)}.sui-counter-input__stepper:active:not(:disabled){background:var(--sui-bg-surface-800);color:var(--sui-icon-white-0);transform:scale(.92)}.sui-counter-input__stepper:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}.sui-counter-input__stepper:disabled{color:var(--sui-icon-disabled-300);cursor:not-allowed;pointer-events:none;opacity:.5}.sui-counter-input__field:hover .sui-counter-input__stepper:hover:not(:disabled){background:var(--sui-bg-white-0)}:host([data-sui-disabled]) .sui-counter-input__stepper{color:var(--sui-icon-disabled-300);opacity:1}.sui-counter-input__value{flex:1 1 auto;min-width:0;text-align:center;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size, 14px);font-weight:var(--sui-type-paragraph-sm-weight, 400);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-user-select:none;user-select:none;color:var(--sui-text-strong-950)}.sui-counter-input__field--disabled .sui-counter-input__value{color:var(--sui-text-disabled-300)}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5922
5925
|
}
|
|
5923
5926
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiCounterInput, decorators: [{
|
|
5924
5927
|
type: Component,
|
|
@@ -5934,7 +5937,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
5934
5937
|
'[attr.data-sui-size]': 'size()',
|
|
5935
5938
|
'[attr.data-sui-disabled]': 'isDisabled() ? "" : null',
|
|
5936
5939
|
'[attr.data-sui-error]': 'error() ? "" : null',
|
|
5937
|
-
}, template: "@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n [size]=\"size()\"\n class=\"sui-counter-input__label-host\"\n />\n}\n\n<div\n class=\"sui-counter-input__field\"\n [class.sui-counter-input__field--error]=\"error()\"\n [class.sui-counter-input__field--disabled]=\"isDisabled()\"\n>\n <!-- Stepper \u2212 (decrement) -->\n <button\n type=\"button\"\n class=\"sui-counter-input__stepper\"\n [attr.aria-label]=\"decrementLabel()\"\n [disabled]=\"!canDecrement() || null\"\n (click)=\"decrement()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"subtract-line\" [size]=\"20\" />\n </button>\n\n <!-- Valor centrado (spinbutton) -->\n <span\n class=\"sui-counter-input__value\"\n role=\"spinbutton\"\n [attr.aria-valuenow]=\"effectiveValue()\"\n [attr.aria-valuemin]=\"ariaMin()\"\n [attr.aria-valuemax]=\"ariaMax()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n [attr.aria-invalid]=\"error() ? 'true' : null\"\n >\n {{ displayValue() }}\n </span>\n\n <!-- Stepper + (increment) -->\n <button\n type=\"button\"\n class=\"sui-counter-input__stepper\"\n [attr.aria-label]=\"incrementLabel()\"\n [disabled]=\"!canIncrement() || null\"\n (click)=\"increment()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"add-line\" [size]=\"20\" />\n </button>\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n [size]=\"size()\"\n class=\"sui-counter-input__hint-host\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-counter-input__label-host{display:block;margin-bottom:6px}.sui-counter-input__hint-host{display:block;margin-top:6px}.sui-counter-input__field{display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;overflow:hidden;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);transition:background var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),border-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)}:host([data-sui-size=medium]) .sui-counter-input__field,:host(:not([data-sui-size])) .sui-counter-input__field{gap:8px;padding:8px;border-radius:var(--sui-radius-10, 10px);min-height:40px}:host([data-sui-size=small]) .sui-counter-input__field{gap:6px;padding:6px;border-radius:var(--sui-radius-8, 8px);min-height:36px}:host([data-sui-size=xsmall]) .sui-counter-input__field{gap:4px;padding:4px;border-radius:var(--sui-radius-8, 8px);min-height:32px}.sui-counter-input__field:not(.sui-counter-input__field--disabled):not(.sui-counter-input__field--error):hover{background:var(--sui-bg-weak-50);border-color:transparent}.sui-counter-input__field:not(.sui-counter-input__field--disabled):not(.sui-counter-input__field--error):focus-within{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-counter-input__field--error{border-color:var(--sui-state-error-base);box-shadow:var(--sui-regular-shadow-x-small)}.sui-counter-input__field--error:focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 3px var(--sui-red-alpha-10, rgba(251, 55, 72, .1019607843))}.sui-counter-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-counter-input__stepper{appearance:none;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;width:24px;height:24px;min-width:0;min-height:0;margin:0;padding:2px;border:0;border-radius:var(--sui-radius-6, 6px);background:transparent;color:var(--sui-icon-sub-600);line-height:0;cursor:pointer;transition:background .12s,color .12s,transform var(--dur-instant, 80ms) var(--ease-ek, cubic-bezier(.22, 1, .36, 1))}.sui-counter-input__stepper:hover:not(:disabled){background:var(--sui-bg-weak-50);color:var(--sui-icon-strong-950)}.sui-counter-input__stepper:active:not(:disabled){background:var(--sui-bg-surface-800);color:var(--sui-icon-white-0);transform:scale(.92)}.sui-counter-input__stepper:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}.sui-counter-input__stepper:disabled{color:var(--sui-icon-disabled-300);cursor:not-allowed;pointer-events:none;opacity:.5}.sui-counter-input__field:hover .sui-counter-input__stepper:hover:not(:disabled){background:var(--sui-bg-white-0)}:host([data-sui-disabled]) .sui-counter-input__stepper{color:var(--sui-icon-disabled-300);opacity:1}.sui-counter-input__value{flex:1 1 auto;min-width:0;text-align:center;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size, 14px);font-weight:var(--sui-type-paragraph-sm-weight, 400);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-user-select:none;user-select:none;color:var(--sui-text-strong-950)}.sui-counter-input__field--disabled .sui-counter-input__value{color:var(--sui-text-disabled-300)}\n"] }]
|
|
5940
|
+
}, template: "@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n [size]=\"size()\"\n class=\"sui-counter-input__label-host\"\n />\n}\n\n<div\n class=\"sui-counter-input__field\"\n [class.sui-counter-input__field--error]=\"error()\"\n [class.sui-counter-input__field--disabled]=\"isDisabled()\"\n>\n <!-- Stepper \u2212 (decrement) -->\n <button\n type=\"button\"\n class=\"sui-counter-input__stepper\"\n [attr.aria-label]=\"decrementLabel()\"\n [disabled]=\"!canDecrement() || null\"\n (click)=\"decrement()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"subtract-line\" [size]=\"20\" />\n </button>\n\n <!-- Valor centrado (spinbutton) -->\n <span\n class=\"sui-counter-input__value\"\n role=\"spinbutton\"\n [attr.aria-valuenow]=\"effectiveValue()\"\n [attr.aria-valuemin]=\"ariaMin()\"\n [attr.aria-valuemax]=\"ariaMax()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n [attr.aria-invalid]=\"error() ? 'true' : null\"\n >\n {{ displayValue() }}\n </span>\n\n <!-- Stepper + (increment) -->\n <button\n type=\"button\"\n class=\"sui-counter-input__stepper\"\n [attr.aria-label]=\"incrementLabel()\"\n [disabled]=\"!canIncrement() || null\"\n (click)=\"increment()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"add-line\" [size]=\"20\" />\n </button>\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n [size]=\"size()\"\n class=\"sui-counter-input__hint-host\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-counter-input__label-host{display:block;margin-bottom:6px}.sui-counter-input__hint-host{display:block;margin-top:6px}.sui-counter-input__field{display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;overflow:hidden;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);transition:background var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),border-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)}:host([data-sui-size=medium]) .sui-counter-input__field,:host(:not([data-sui-size])) .sui-counter-input__field{gap:8px;padding:7px 8px;border-radius:var(--sui-radius-10, 10px);min-height:40px}:host([data-sui-size=small]) .sui-counter-input__field{gap:6px;padding:5px 6px;border-radius:var(--sui-radius-8, 8px);min-height:36px}:host([data-sui-size=xsmall]) .sui-counter-input__field{gap:4px;padding:3px 4px;border-radius:var(--sui-radius-8, 8px);min-height:32px}.sui-counter-input__field:not(.sui-counter-input__field--disabled):not(.sui-counter-input__field--error):hover{background:var(--sui-bg-weak-50);border-color:transparent}.sui-counter-input__field:not(.sui-counter-input__field--disabled):not(.sui-counter-input__field--error):focus-within{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-counter-input__field--error{border-color:var(--sui-state-error-base);box-shadow:var(--sui-regular-shadow-x-small)}.sui-counter-input__field--error:focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 3px var(--sui-red-alpha-10, rgba(251, 55, 72, .1019607843))}.sui-counter-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-counter-input__stepper{appearance:none;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;width:24px;height:24px;min-width:0;min-height:0;margin:0;padding:2px;border:0;border-radius:var(--sui-radius-6, 6px);background:transparent;color:var(--sui-icon-sub-600);line-height:0;cursor:pointer;transition:background .12s,color .12s,transform var(--dur-instant, 80ms) var(--ease-ek, cubic-bezier(.22, 1, .36, 1))}.sui-counter-input__stepper:hover:not(:disabled){background:var(--sui-bg-weak-50);color:var(--sui-icon-strong-950)}.sui-counter-input__stepper:active:not(:disabled){background:var(--sui-bg-surface-800);color:var(--sui-icon-white-0);transform:scale(.92)}.sui-counter-input__stepper:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}.sui-counter-input__stepper:disabled{color:var(--sui-icon-disabled-300);cursor:not-allowed;pointer-events:none;opacity:.5}.sui-counter-input__field:hover .sui-counter-input__stepper:hover:not(:disabled){background:var(--sui-bg-white-0)}:host([data-sui-disabled]) .sui-counter-input__stepper{color:var(--sui-icon-disabled-300);opacity:1}.sui-counter-input__value{flex:1 1 auto;min-width:0;text-align:center;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size, 14px);font-weight:var(--sui-type-paragraph-sm-weight, 400);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-user-select:none;user-select:none;color:var(--sui-text-strong-950)}.sui-counter-input__field--disabled .sui-counter-input__value{color:var(--sui-text-disabled-300)}\n"] }]
|
|
5938
5941
|
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], decrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "decrementLabel", required: false }] }], incrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "incrementLabel", required: false }] }] } });
|
|
5939
5942
|
|
|
5940
5943
|
/**
|
|
@@ -6674,7 +6677,7 @@ class SuiDatepicker {
|
|
|
6674
6677
|
useExisting: forwardRef(() => SuiDatepicker),
|
|
6675
6678
|
multi: true,
|
|
6676
6679
|
},
|
|
6677
|
-
], 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}: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 });
|
|
6680
|
+
], 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 });
|
|
6678
6681
|
}
|
|
6679
6682
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiDatepicker, decorators: [{
|
|
6680
6683
|
type: Component,
|
|
@@ -6688,7 +6691,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
6688
6691
|
'[attr.data-sui-mode]': 'mode()',
|
|
6689
6692
|
'[attr.data-sui-open]': 'open() ? "" : null',
|
|
6690
6693
|
'[attr.data-sui-calendars]': 'effectiveCalendars()',
|
|
6691
|
-
}, 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}: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"] }]
|
|
6694
|
+
}, 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"] }]
|
|
6692
6695
|
}], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], calendars: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendars", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], markedDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "markedDates", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onDocPointerDown: [{
|
|
6693
6696
|
type: HostListener,
|
|
6694
6697
|
args: ['document:pointerdown', ['$event']]
|
|
@@ -6766,7 +6769,7 @@ class SuiSwitch {
|
|
|
6766
6769
|
useExisting: forwardRef(() => SuiSwitch),
|
|
6767
6770
|
multi: true,
|
|
6768
6771
|
},
|
|
6769
|
-
], ngImport: i0, template: "<span class=\"sui-switch__track\"></span>\n<span class=\"sui-switch__thumb\">\n <span class=\"sui-switch__dot\" aria-hidden=\"true\"></span>\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;width:32px;height:20px;cursor:pointer;outline:none;box-sizing:border-box;-webkit-tap-highlight-color:transparent}.sui-switch__track{position:absolute;top:2px;left:2px;width:28px;height:16px;border-radius:999px;background:var(--sui-bg-soft-200);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-switch__thumb{position:absolute;top:4px;left:4px;width:12px;height:12px;border-radius:999px;background:var(--sui-
|
|
6772
|
+
], ngImport: i0, template: "<span class=\"sui-switch__track\"></span>\n<span class=\"sui-switch__thumb\">\n <span class=\"sui-switch__dot\" aria-hidden=\"true\"></span>\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;width:32px;height:20px;cursor:pointer;outline:none;box-sizing:border-box;-webkit-tap-highlight-color:transparent}.sui-switch__track{position:absolute;top:2px;left:2px;width:28px;height:16px;border-radius:999px;background:var(--sui-bg-soft-200);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-switch__thumb{position:absolute;top:4px;left:4px;width:12px;height:12px;border-radius:999px;background:var(--sui-static-white, #ffffff);box-shadow:var(--sui-shadow-switch-thumb);display:flex;align-items:center;justify-content:center;transition:left var(--sui-motion-duration-fast) var(--sui-motion-ease-out),top var(--sui-motion-duration-fast) var(--sui-motion-ease-out),width var(--sui-motion-duration-fast) var(--sui-motion-ease-out),height var(--sui-motion-duration-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-switch__dot{width:4px;height:4px;border-radius:999px;background:var(--sui-bg-soft-200);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-checked]) .sui-switch__track{background:var(--sui-primary-base)}:host([data-sui-checked]) .sui-switch__thumb{left:16px}:host([data-sui-checked]) .sui-switch__dot{background:var(--sui-primary-base)}:host(:hover:not([data-sui-disabled]):not([data-sui-checked])) .sui-switch__track{background:var(--sui-bg-sub-300)}:host(:hover:not([data-sui-disabled]):not([data-sui-checked])) .sui-switch__dot{background:var(--sui-bg-sub-300)}:host(:hover:not([data-sui-disabled])[data-sui-checked]) .sui-switch__track{background:var(--sui-primary-dark)}:host(:hover:not([data-sui-disabled])[data-sui-checked]) .sui-switch__dot{background:var(--sui-primary-dark)}:host(:active:not([data-sui-disabled])) .sui-switch__thumb{width:10px;height:10px;top:5px}:host(:active:not([data-sui-disabled]):not([data-sui-checked])) .sui-switch__thumb{left:5px}:host(:active:not([data-sui-disabled])[data-sui-checked]) .sui-switch__thumb{left:17px}:host([data-sui-disabled]){cursor:not-allowed;pointer-events:none}:host([data-sui-disabled]) .sui-switch__track{background:var(--sui-bg-white-0);box-shadow:inset 0 0 0 1px var(--sui-stroke-soft-200)}:host([data-sui-disabled]) .sui-switch__thumb{width:10px;height:10px;top:5px;background:var(--sui-bg-soft-200);box-shadow:none}:host([data-sui-disabled]:not([data-sui-checked])) .sui-switch__thumb{left:5px}:host([data-sui-disabled][data-sui-checked]) .sui-switch__thumb{left:17px}:host([data-sui-disabled]) .sui-switch__dot{display:none}:host([data-sui-size=large]){width:40px;height:24px}:host([data-sui-size=large]) .sui-switch__track{width:36px;height:20px}:host([data-sui-size=large]) .sui-switch__thumb{width:16px;height:16px;top:4px;left:4px}:host([data-sui-size=large][data-sui-checked]) .sui-switch__thumb{left:20px}:host([data-sui-size=large]:active:not([data-sui-disabled])) .sui-switch__thumb{width:14px;height:14px;top:5px}:host([data-sui-size=large]:active:not([data-sui-disabled]):not([data-sui-checked])) .sui-switch__thumb{left:5px}:host([data-sui-size=large]:active:not([data-sui-disabled])[data-sui-checked]) .sui-switch__thumb{left:21px}:host([data-sui-size=large][data-sui-disabled]) .sui-switch__thumb{width:14px;height:14px;top:5px}:host([data-sui-size=large][data-sui-disabled]:not([data-sui-checked])) .sui-switch__thumb{left:5px}:host([data-sui-size=large][data-sui-disabled][data-sui-checked]) .sui-switch__thumb{left:21px}:host([data-sui-size=xlarge]){width:48px;height:28px}:host([data-sui-size=xlarge]) .sui-switch__track{width:44px;height:24px}:host([data-sui-size=xlarge]) .sui-switch__thumb{width:20px;height:20px;top:4px;left:4px}:host([data-sui-size=xlarge][data-sui-checked]) .sui-switch__thumb{left:24px}:host([data-sui-size=xlarge]:active:not([data-sui-disabled])) .sui-switch__thumb{width:18px;height:18px;top:5px}:host([data-sui-size=xlarge]:active:not([data-sui-disabled]):not([data-sui-checked])) .sui-switch__thumb{left:5px}:host([data-sui-size=xlarge]:active:not([data-sui-disabled])[data-sui-checked]) .sui-switch__thumb{left:25px}:host([data-sui-size=xlarge][data-sui-disabled]) .sui-switch__thumb{width:18px;height:18px;top:5px}:host([data-sui-size=xlarge][data-sui-disabled]:not([data-sui-checked])) .sui-switch__thumb{left:5px}:host([data-sui-size=xlarge][data-sui-disabled][data-sui-checked]) .sui-switch__thumb{left:25px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6770
6773
|
}
|
|
6771
6774
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiSwitch, decorators: [{
|
|
6772
6775
|
type: Component,
|
|
@@ -6790,7 +6793,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
6790
6793
|
/* iOS WKWebView fix — ver CLAUDE.md "iOS :active stuck en custom buttons". */
|
|
6791
6794
|
'(touchstart)': '$event.currentTarget',
|
|
6792
6795
|
'(touchend)': '$any($event.currentTarget).blur()',
|
|
6793
|
-
}, template: "<span class=\"sui-switch__track\"></span>\n<span class=\"sui-switch__thumb\">\n <span class=\"sui-switch__dot\" aria-hidden=\"true\"></span>\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;width:32px;height:20px;cursor:pointer;outline:none;box-sizing:border-box;-webkit-tap-highlight-color:transparent}.sui-switch__track{position:absolute;top:2px;left:2px;width:28px;height:16px;border-radius:999px;background:var(--sui-bg-soft-200);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-switch__thumb{position:absolute;top:4px;left:4px;width:12px;height:12px;border-radius:999px;background:var(--sui-
|
|
6796
|
+
}, template: "<span class=\"sui-switch__track\"></span>\n<span class=\"sui-switch__thumb\">\n <span class=\"sui-switch__dot\" aria-hidden=\"true\"></span>\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;width:32px;height:20px;cursor:pointer;outline:none;box-sizing:border-box;-webkit-tap-highlight-color:transparent}.sui-switch__track{position:absolute;top:2px;left:2px;width:28px;height:16px;border-radius:999px;background:var(--sui-bg-soft-200);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-switch__thumb{position:absolute;top:4px;left:4px;width:12px;height:12px;border-radius:999px;background:var(--sui-static-white, #ffffff);box-shadow:var(--sui-shadow-switch-thumb);display:flex;align-items:center;justify-content:center;transition:left var(--sui-motion-duration-fast) var(--sui-motion-ease-out),top var(--sui-motion-duration-fast) var(--sui-motion-ease-out),width var(--sui-motion-duration-fast) var(--sui-motion-ease-out),height var(--sui-motion-duration-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-switch__dot{width:4px;height:4px;border-radius:999px;background:var(--sui-bg-soft-200);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-checked]) .sui-switch__track{background:var(--sui-primary-base)}:host([data-sui-checked]) .sui-switch__thumb{left:16px}:host([data-sui-checked]) .sui-switch__dot{background:var(--sui-primary-base)}:host(:hover:not([data-sui-disabled]):not([data-sui-checked])) .sui-switch__track{background:var(--sui-bg-sub-300)}:host(:hover:not([data-sui-disabled]):not([data-sui-checked])) .sui-switch__dot{background:var(--sui-bg-sub-300)}:host(:hover:not([data-sui-disabled])[data-sui-checked]) .sui-switch__track{background:var(--sui-primary-dark)}:host(:hover:not([data-sui-disabled])[data-sui-checked]) .sui-switch__dot{background:var(--sui-primary-dark)}:host(:active:not([data-sui-disabled])) .sui-switch__thumb{width:10px;height:10px;top:5px}:host(:active:not([data-sui-disabled]):not([data-sui-checked])) .sui-switch__thumb{left:5px}:host(:active:not([data-sui-disabled])[data-sui-checked]) .sui-switch__thumb{left:17px}:host([data-sui-disabled]){cursor:not-allowed;pointer-events:none}:host([data-sui-disabled]) .sui-switch__track{background:var(--sui-bg-white-0);box-shadow:inset 0 0 0 1px var(--sui-stroke-soft-200)}:host([data-sui-disabled]) .sui-switch__thumb{width:10px;height:10px;top:5px;background:var(--sui-bg-soft-200);box-shadow:none}:host([data-sui-disabled]:not([data-sui-checked])) .sui-switch__thumb{left:5px}:host([data-sui-disabled][data-sui-checked]) .sui-switch__thumb{left:17px}:host([data-sui-disabled]) .sui-switch__dot{display:none}:host([data-sui-size=large]){width:40px;height:24px}:host([data-sui-size=large]) .sui-switch__track{width:36px;height:20px}:host([data-sui-size=large]) .sui-switch__thumb{width:16px;height:16px;top:4px;left:4px}:host([data-sui-size=large][data-sui-checked]) .sui-switch__thumb{left:20px}:host([data-sui-size=large]:active:not([data-sui-disabled])) .sui-switch__thumb{width:14px;height:14px;top:5px}:host([data-sui-size=large]:active:not([data-sui-disabled]):not([data-sui-checked])) .sui-switch__thumb{left:5px}:host([data-sui-size=large]:active:not([data-sui-disabled])[data-sui-checked]) .sui-switch__thumb{left:21px}:host([data-sui-size=large][data-sui-disabled]) .sui-switch__thumb{width:14px;height:14px;top:5px}:host([data-sui-size=large][data-sui-disabled]:not([data-sui-checked])) .sui-switch__thumb{left:5px}:host([data-sui-size=large][data-sui-disabled][data-sui-checked]) .sui-switch__thumb{left:21px}:host([data-sui-size=xlarge]){width:48px;height:28px}:host([data-sui-size=xlarge]) .sui-switch__track{width:44px;height:24px}:host([data-sui-size=xlarge]) .sui-switch__thumb{width:20px;height:20px;top:4px;left:4px}:host([data-sui-size=xlarge][data-sui-checked]) .sui-switch__thumb{left:24px}:host([data-sui-size=xlarge]:active:not([data-sui-disabled])) .sui-switch__thumb{width:18px;height:18px;top:5px}:host([data-sui-size=xlarge]:active:not([data-sui-disabled]):not([data-sui-checked])) .sui-switch__thumb{left:5px}:host([data-sui-size=xlarge]:active:not([data-sui-disabled])[data-sui-checked]) .sui-switch__thumb{left:25px}:host([data-sui-size=xlarge][data-sui-disabled]) .sui-switch__thumb{width:18px;height:18px;top:5px}:host([data-sui-size=xlarge][data-sui-disabled]:not([data-sui-checked])) .sui-switch__thumb{left:5px}:host([data-sui-size=xlarge][data-sui-disabled][data-sui-checked]) .sui-switch__thumb{left:25px}\n"] }]
|
|
6794
6797
|
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
6795
6798
|
|
|
6796
6799
|
/**
|
|
@@ -7102,7 +7105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
7102
7105
|
* placeholder text "Search..." color text-soft-400
|
|
7103
7106
|
*
|
|
7104
7107
|
* Active (con valor escrito):
|
|
7105
|
-
* search icon:
|
|
7108
|
+
* search icon: icon-sub-600 (oscurece vs el soft-400 de Default)
|
|
7106
7109
|
* text input: color text-strong-950 (el valor escrito en negro)
|
|
7107
7110
|
* close icon 20×20 trailing para clear (text-soft-400)
|
|
7108
7111
|
*
|
|
@@ -7131,14 +7134,14 @@ class SuiDropdownSearch {
|
|
|
7131
7134
|
this.cleared.emit();
|
|
7132
7135
|
}
|
|
7133
7136
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiDropdownSearch, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7134
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiDropdownSearch, isStandalone: true, selector: "sui-dropdown-search", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", cleared: "cleared", valueChanged: "valueChanged" }, host: { properties: { "attr.data-sui-has-value": "hasValue() ? \"\" : null", "attr.data-sui-disabled": "disabled() ? \"\" : null" } }, ngImport: i0, template: "<sui-icon class=\"sui-dropdown-search__icon\" name=\"search-2-line\" [size]=\"20\" />\n\n<input\n class=\"sui-dropdown-search__input\"\n type=\"text\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n (input)=\"onInput($event)\"\n/>\n\n@if (hasValue()) {\n <button\n type=\"button\"\n class=\"sui-dropdown-search__clear\"\n aria-label=\"Limpiar b\u00FAsqueda\"\n (click)=\"onClear($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"close-line\" [size]=\"20\" />\n </button>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:8px;padding:8px;background:var(--sui-bg-white-0);width:100%;box-sizing:border-box;transition:background .1s ease-out}:host:hover:not([data-sui-disabled]){background:var(--sui-bg-weak-50)}:host([data-sui-disabled]){cursor:not-allowed}.sui-dropdown-search__icon{flex-shrink:0;color:var(--sui-icon-soft-400)}.sui-dropdown-search__input{flex:1 0 0;min-width:0;margin:0;padding:0;background:transparent;border:0;outline:none;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size, 14px);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);font-weight:var(--sui-type-paragraph-sm-weight, 400);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-text-strong-950)}.sui-dropdown-search__input::placeholder{color:var(--sui-text-soft-400)}.sui-dropdown-search__input:disabled{cursor:not-allowed;color:var(--sui-text-disabled-300)}.sui-dropdown-search__clear{appearance:none;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;background:transparent;color:var(--sui-icon-soft-400);cursor:pointer;border-radius:var(--sui-radius-4, 4px);transition:color .1s}.sui-dropdown-search__clear:hover{color:var(--sui-icon-strong-950)}.sui-dropdown-search__clear:focus-visible{outline:2px solid var(--sui-primary-base);outline-offset:2px}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7137
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiDropdownSearch, isStandalone: true, selector: "sui-dropdown-search", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", cleared: "cleared", valueChanged: "valueChanged" }, host: { properties: { "attr.data-sui-has-value": "hasValue() ? \"\" : null", "attr.data-sui-disabled": "disabled() ? \"\" : null" } }, ngImport: i0, template: "<sui-icon class=\"sui-dropdown-search__icon\" name=\"search-2-line\" [size]=\"20\" />\n\n<input\n class=\"sui-dropdown-search__input\"\n type=\"text\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n (input)=\"onInput($event)\"\n/>\n\n@if (hasValue()) {\n <button\n type=\"button\"\n class=\"sui-dropdown-search__clear\"\n aria-label=\"Limpiar b\u00FAsqueda\"\n (click)=\"onClear($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"close-line\" [size]=\"20\" />\n </button>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:8px;padding:8px;background:var(--sui-bg-white-0);width:100%;box-sizing:border-box;transition:background .1s ease-out}:host:hover:not([data-sui-disabled]){background:var(--sui-bg-weak-50)}:host([data-sui-disabled]){cursor:not-allowed}.sui-dropdown-search__icon{flex-shrink:0;color:var(--sui-icon-soft-400)}:host(:hover:not([data-sui-disabled])) .sui-dropdown-search__icon,:host([data-sui-has-value]) .sui-dropdown-search__icon{color:var(--sui-icon-sub-600)}.sui-dropdown-search__input{flex:1 0 0;min-width:0;margin:0;padding:0;background:transparent;border:0;outline:none;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size, 14px);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);font-weight:var(--sui-type-paragraph-sm-weight, 400);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-text-strong-950)}.sui-dropdown-search__input::placeholder{color:var(--sui-text-soft-400)}.sui-dropdown-search__input:disabled{cursor:not-allowed;color:var(--sui-text-disabled-300)}.sui-dropdown-search__clear{appearance:none;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;background:transparent;color:var(--sui-icon-soft-400);cursor:pointer;border-radius:var(--sui-radius-4, 4px);transition:color .1s}.sui-dropdown-search__clear:hover{color:var(--sui-icon-strong-950)}.sui-dropdown-search__clear:focus-visible{outline:2px solid var(--sui-primary-base);outline-offset:2px}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7135
7138
|
}
|
|
7136
7139
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiDropdownSearch, decorators: [{
|
|
7137
7140
|
type: Component,
|
|
7138
7141
|
args: [{ selector: 'sui-dropdown-search', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiIcon], host: {
|
|
7139
7142
|
'[attr.data-sui-has-value]': 'hasValue() ? "" : null',
|
|
7140
7143
|
'[attr.data-sui-disabled]': 'disabled() ? "" : null',
|
|
7141
|
-
}, template: "<sui-icon class=\"sui-dropdown-search__icon\" name=\"search-2-line\" [size]=\"20\" />\n\n<input\n class=\"sui-dropdown-search__input\"\n type=\"text\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n (input)=\"onInput($event)\"\n/>\n\n@if (hasValue()) {\n <button\n type=\"button\"\n class=\"sui-dropdown-search__clear\"\n aria-label=\"Limpiar b\u00FAsqueda\"\n (click)=\"onClear($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"close-line\" [size]=\"20\" />\n </button>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:8px;padding:8px;background:var(--sui-bg-white-0);width:100%;box-sizing:border-box;transition:background .1s ease-out}:host:hover:not([data-sui-disabled]){background:var(--sui-bg-weak-50)}:host([data-sui-disabled]){cursor:not-allowed}.sui-dropdown-search__icon{flex-shrink:0;color:var(--sui-icon-soft-400)}.sui-dropdown-search__input{flex:1 0 0;min-width:0;margin:0;padding:0;background:transparent;border:0;outline:none;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size, 14px);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);font-weight:var(--sui-type-paragraph-sm-weight, 400);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-text-strong-950)}.sui-dropdown-search__input::placeholder{color:var(--sui-text-soft-400)}.sui-dropdown-search__input:disabled{cursor:not-allowed;color:var(--sui-text-disabled-300)}.sui-dropdown-search__clear{appearance:none;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;background:transparent;color:var(--sui-icon-soft-400);cursor:pointer;border-radius:var(--sui-radius-4, 4px);transition:color .1s}.sui-dropdown-search__clear:hover{color:var(--sui-icon-strong-950)}.sui-dropdown-search__clear:focus-visible{outline:2px solid var(--sui-primary-base);outline-offset:2px}\n"] }]
|
|
7144
|
+
}, template: "<sui-icon class=\"sui-dropdown-search__icon\" name=\"search-2-line\" [size]=\"20\" />\n\n<input\n class=\"sui-dropdown-search__input\"\n type=\"text\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n (input)=\"onInput($event)\"\n/>\n\n@if (hasValue()) {\n <button\n type=\"button\"\n class=\"sui-dropdown-search__clear\"\n aria-label=\"Limpiar b\u00FAsqueda\"\n (click)=\"onClear($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"close-line\" [size]=\"20\" />\n </button>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:8px;padding:8px;background:var(--sui-bg-white-0);width:100%;box-sizing:border-box;transition:background .1s ease-out}:host:hover:not([data-sui-disabled]){background:var(--sui-bg-weak-50)}:host([data-sui-disabled]){cursor:not-allowed}.sui-dropdown-search__icon{flex-shrink:0;color:var(--sui-icon-soft-400)}:host(:hover:not([data-sui-disabled])) .sui-dropdown-search__icon,:host([data-sui-has-value]) .sui-dropdown-search__icon{color:var(--sui-icon-sub-600)}.sui-dropdown-search__input{flex:1 0 0;min-width:0;margin:0;padding:0;background:transparent;border:0;outline:none;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size, 14px);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);font-weight:var(--sui-type-paragraph-sm-weight, 400);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-text-strong-950)}.sui-dropdown-search__input::placeholder{color:var(--sui-text-soft-400)}.sui-dropdown-search__input:disabled{cursor:not-allowed;color:var(--sui-text-disabled-300)}.sui-dropdown-search__clear{appearance:none;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;background:transparent;color:var(--sui-icon-soft-400);cursor:pointer;border-radius:var(--sui-radius-4, 4px);transition:color .1s}.sui-dropdown-search__clear:hover{color:var(--sui-icon-strong-950)}.sui-dropdown-search__clear:focus-visible{outline:2px solid var(--sui-primary-base);outline-offset:2px}\n"] }]
|
|
7142
7145
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], cleared: [{ type: i0.Output, args: ["cleared"] }], valueChanged: [{ type: i0.Output, args: ["valueChanged"] }] } });
|
|
7143
7146
|
|
|
7144
7147
|
/**
|
|
@@ -8728,6 +8731,16 @@ class SuiInlineInput {
|
|
|
8728
8731
|
this.editing.set(false);
|
|
8729
8732
|
}
|
|
8730
8733
|
});
|
|
8734
|
+
/* Autofocus al entrar en edición: el viewChild signal se actualiza POST-render
|
|
8735
|
+
(zoneless-safe) — un queueMicrotask corría antes de que el @if montara el
|
|
8736
|
+
input y el foco se perdía (hacía falta un segundo click para tipear). */
|
|
8737
|
+
effect(() => {
|
|
8738
|
+
const el = this._fieldRef()?.nativeElement;
|
|
8739
|
+
if (el && this.editing()) {
|
|
8740
|
+
el.focus();
|
|
8741
|
+
el.select();
|
|
8742
|
+
}
|
|
8743
|
+
});
|
|
8731
8744
|
}
|
|
8732
8745
|
/** Texto a mostrar en reposo (value o placeholder). */
|
|
8733
8746
|
displayText = computed(() => this.value() || this.placeholder(), ...(ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []));
|
|
@@ -8745,12 +8758,6 @@ class SuiInlineInput {
|
|
|
8745
8758
|
this.editing.set(true);
|
|
8746
8759
|
this._onTouched();
|
|
8747
8760
|
this.edit.emit();
|
|
8748
|
-
/* Foco al input nativo en el próximo tick (tras render del template). */
|
|
8749
|
-
queueMicrotask(() => {
|
|
8750
|
-
const el = this._fieldRef()?.nativeElement;
|
|
8751
|
-
el?.focus();
|
|
8752
|
-
el?.select();
|
|
8753
|
-
});
|
|
8754
8761
|
}
|
|
8755
8762
|
/** Sincroniza el value con el input nativo durante el typing. */
|
|
8756
8763
|
onInput(event) {
|
|
@@ -10800,7 +10807,7 @@ class SuiModal {
|
|
|
10800
10807
|
container?.focus({ preventScroll: true });
|
|
10801
10808
|
}
|
|
10802
10809
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10803
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiModal, isStandalone: true, selector: "sui-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, iconVariant: { classPropertyName: "iconVariant", publicName: "iconVariant", isSignal: true, isRequired: false, transformFunction: null }, headerIcon: { classPropertyName: "headerIcon", publicName: "headerIcon", isSignal: true, isRequired: false, transformFunction: null }, statusAlignment: { classPropertyName: "statusAlignment", publicName: "statusAlignment", isSignal: true, isRequired: false, transformFunction: null }, backdropBlur: { classPropertyName: "backdropBlur", publicName: "backdropBlur", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, fullBody: { classPropertyName: "fullBody", publicName: "fullBody", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed" }, host: { properties: { "attr.title": "null", "attr.data-sui-modal-open": "open() ? \"\" : null", "attr.data-sui-modal-fullscreen": "fullscreen() ? \"\" : null" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }, { propertyName: "bodyRef", first: true, predicate: ["bodyEl"], descendants: true }], ngImport: i0, template: "@if (open()) {\n <!-- Overlay backdrop -->\n <div\n class=\"sui-modal__backdrop\"\n [class.sui-modal__backdrop--no-blur]=\"!backdropBlur()\"\n (click)=\"onBackdropClick()\"\n role=\"presentation\"\n aria-hidden=\"true\"\n ></div>\n\n <!-- Dialog wrapper (also acts as click-outside target when backdrop is disabled) -->\n <div\n class=\"sui-modal\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"title() ? titleId : null\"\n [attr.aria-describedby]=\"description() ? descId : null\"\n >\n <!-- Container \u2014 click stops propagation so it doesn't close.\n tabindex=-1 hace que el container sea focusable program\u00E1ticamente\n (para a11y al abrir el modal) pero NO entra en el tab order. */ -->\n <div\n #container\n class=\"sui-modal__container\"\n [class.sui-modal__container--scroll-active]=\"scrollActive()\"\n [class.sui-modal__container--fullscreen]=\"fullscreen()\"\n [class.sui-modal__container--status-vertical]=\"isStatusVertical()\"\n [attr.data-sui-size]=\"size()\"\n tabindex=\"-1\"\n (click)=\"onContainerClick($event)\"\n >\n <!-- Header \u2014 modo HORIZONTAL (canon Figma \"Modal Header\").\n En modo Status vertical el icono+texto se mueven al body, as\u00ED que el\n header solo conserva el close button (si aplica). -->\n @if (title() || showClose()) {\n <header\n class=\"sui-modal__header\"\n [class.sui-modal__header--with-icon]=\"hasHeaderIcon() && !isStatusVertical()\"\n [class.sui-modal__header--compact]=\"isCompactHeader()\"\n [class.sui-modal__header--close-only]=\"isStatusVertical()\"\n >\n\n <!-- Icon badge (horizontal): c\u00EDrculo bg lighter + 20px icono.\n En Small (sin description) Figma lo muestra flat 24px sin c\u00EDrculo\n \u2192 la clase --compact del header lo controla v\u00EDa SCSS. -->\n @if (hasHeaderIcon() && !isStatusVertical()) {\n <div class=\"sui-modal__icon\" [attr.data-variant]=\"resolvedIconVariant()\">\n <sui-icon [name]=\"iconName()\" [size]=\"isCompactHeader() ? 24 : 20\" />\n </div>\n }\n\n <!-- Title + Description (horizontal) -->\n @if (!isStatusVertical()) {\n <div class=\"sui-modal__titles\">\n @if (title()) {\n <h2 [id]=\"titleId\" class=\"sui-modal__title\">{{ title() }}</h2>\n }\n @if (description()) {\n <p [id]=\"descId\" class=\"sui-modal__description\">{{ description() }}</p>\n }\n </div>\n }\n\n <!-- Close button \u2014 Figma 466:4778 lo modela como Compact Button [1.1]\n (close-line 20px, ghost). Canon: sui-compact-button (ver CLAUDE.md\n \"close X en modales\"), no un <button> maqueta. -->\n @if (showClose()) {\n <sui-compact-button\n class=\"sui-modal__close\"\n icon=\"close-line\"\n variantStyle=\"ghost\"\n size=\"large\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"close()\"\n />\n }\n </header>\n }\n\n <!-- Body \u2014 default slot (ng-content). El consumer proyecta cualquier markup aqu\u00ED. -->\n <div #bodyEl\n class=\"sui-modal__body\"\n [class.sui-modal__body--full]=\"fullBody()\"\n [class.sui-modal__body--status]=\"isStatusVertical()\">\n\n <!-- Status vertical: icono centrado arriba + texto centrado (Figma 480:1372).\n Tipograf\u00EDa escalada (Label/Medium 16 + Paragraph/Small 14). -->\n @if (isStatusVertical()) {\n <div class=\"sui-modal__status\">\n <div class=\"sui-modal__icon\" [attr.data-variant]=\"resolvedIconVariant()\">\n <sui-icon [name]=\"iconName()\" [size]=\"24\" />\n </div>\n @if (title() || description()) {\n <div class=\"sui-modal__status-text\">\n @if (title()) {\n <h2 [id]=\"titleId\" class=\"sui-modal__status-title\">{{ title() }}</h2>\n }\n @if (description()) {\n <p [id]=\"descId\" class=\"sui-modal__status-description\">{{ description() }}</p>\n }\n </div>\n }\n </div>\n }\n\n <ng-content />\n </div>\n\n <!-- Footer \u2014 named slot via attribute selector -->\n <ng-content select=\"[slot=footer]\" />\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-modal__backdrop{position:fixed;inset:0;z-index:1000;background-color:#3333333d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:sui-modal-backdrop-in var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)) both}.sui-modal__backdrop--no-blur{backdrop-filter:none;-webkit-backdrop-filter:none}.sui-modal{position:fixed;inset:0;z-index:1001;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;pointer-events:none}.sui-modal__container{position:relative;display:flex;flex-direction:column;overflow:hidden;pointer-events:auto;background:var(--sui-bg-white-0, #ffffff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-20, 20px);box-shadow:var(--sui-regular-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, .1));width:100%;margin-inline:auto;max-height:calc(100dvh - 32px);overflow-y:auto;animation:sui-modal-container-in .18s cubic-bezier(.16,1,.3,1) both;will-change:transform,opacity}.sui-modal__container[data-sui-size=small]{max-width:400px}.sui-modal__container[data-sui-size=medium]{max-width:440px}.sui-modal__container[data-sui-size=large]{max-width:560px}.sui-modal__container[data-sui-size=xlarge]{max-width:720px}.sui-modal__header{display:flex;align-items:center;flex-shrink:0;gap:16px;padding:16px 56px 16px 20px;border-bottom:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);position:relative;overflow:hidden;box-sizing:border-box;min-height:80px;height:auto}.sui-modal__header.sui-modal__header--with-icon{gap:14px}.sui-modal__header.sui-modal__header--compact{min-height:56px;gap:12px}.sui-modal__header.sui-modal__header--compact.sui-modal__header--with-icon{gap:14px}.sui-modal__header.sui-modal__header--close-only{min-height:0;padding:0;border-bottom:none;background:transparent}.sui-modal__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:flex-start;padding:10px;border-radius:var(--sui-radius-full, 999px)}.sui-modal__icon[data-variant=error]{background:var(--sui-state-error-lighter, #ffebec);color:var(--sui-state-error-base, #fb3748)}.sui-modal__icon[data-variant=warning]{background:var(--sui-state-warning-lighter, #fff3eb);color:var(--sui-state-warning-base, #fa7319)}.sui-modal__icon[data-variant=success]{background:var(--sui-state-success-lighter, #e3f7ec);color:var(--sui-state-success-base, #1fc16b)}.sui-modal__icon[data-variant=info]{background:var(--sui-state-information-lighter, #ebf1ff);color:var(--sui-state-information-base, #335cff)}.sui-modal__icon[data-variant=neutral]{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c)}.sui-modal__header--compact .sui-modal__icon{padding:0;background:transparent;align-self:center}.sui-modal__titles{display:block;flex:1 1 auto;min-width:0}.sui-modal__title{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size, 14px);font-weight:var(--sui-type-label-sm-weight, 500);line-height:var(--sui-type-label-sm-line, 20px);letter-spacing:var(--sui-type-label-sm-spacing, -.006em);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;word-break:break-word}.sui-modal__description{margin:4px 0 0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-xs-size, 12px);font-weight:var(--sui-type-paragraph-xs-weight, 400);line-height:var(--sui-type-paragraph-xs-line, 16px);letter-spacing:0;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-modal__title+.sui-modal__description{margin-top:4px}.sui-modal__description:first-child{margin-top:0}.sui-modal__close{position:absolute;top:16px;right:16px;flex-shrink:0}.sui-modal__body{display:flex;flex-direction:column;gap:20px;padding:20px;flex:1 1 auto;background:var(--sui-bg-white-0, #ffffff);overflow-y:auto;max-height:calc(100dvh - 200px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.sui-modal__body:empty{display:none}.sui-modal__body--full{padding:0;gap:0}.sui-modal__status{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}.sui-modal__status .sui-modal__icon{align-self:center;padding:8px;border-radius:var(--sui-radius-10, 10px)}.sui-modal__status-text{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}.sui-modal__status-title{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-md-size, 16px);font-weight:var(--sui-type-label-md-weight, 500);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-modal__status-description{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size, 14px);font-weight:var(--sui-type-paragraph-sm-weight, 400);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}::ng-deep [slot=footer],.sui-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:16px 20px;box-sizing:border-box;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);flex-shrink:0;position:relative;transition:box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out)}.sui-modal__container--scroll-active ::ng-deep [slot=footer],.sui-modal__container--scroll-active .sui-modal__footer{box-shadow:0 -4px 8px #0e121b0f}@keyframes sui-modal-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes sui-modal-container-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.sui-modal__container:focus{outline:none}@media(max-width:768px){.sui-modal{align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,16px)) max(16px,env(safe-area-inset-right,16px)) max(16px,env(safe-area-inset-bottom,16px)) max(16px,env(safe-area-inset-left,16px));box-sizing:border-box}.sui-modal__container{width:100%;max-width:100%;max-height:calc(50dvh - 16px);overflow:hidden;display:flex;flex-direction:column}.sui-modal__body{overflow-y:auto;flex:1 1 auto;max-height:calc(50dvh - 100px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}:host-context(html.platform-android) .sui-modal--kb-open .sui-modal__container:not(.sui-modal__container--fullscreen){max-height:calc(100dvh - 16px)}:host-context(html.platform-android) .sui-modal--kb-open .sui-modal__container:not(.sui-modal__container--fullscreen) .sui-modal__body{max-height:calc(100dvh - 200px)}.sui-modal__header,::ng-deep [slot=footer],.sui-modal__footer{flex-shrink:0}.sui-modal:has(.sui-modal__container--fullscreen){align-items:stretch;justify-content:stretch;padding:env(safe-area-inset-top,0px) 0 0}:host-context(html.platform-android) .sui-modal:has(.sui-modal__container--fullscreen){padding-bottom:var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))}.sui-modal__container--fullscreen,.sui-modal__container--fullscreen[data-sui-size=small],.sui-modal__container--fullscreen[data-sui-size=medium],.sui-modal__container--fullscreen[data-sui-size=large],.sui-modal__container--fullscreen[data-sui-size=xlarge]{width:100%;max-width:100%;height:calc(100dvh - env(safe-area-inset-top,0px) - var(--sui-keyboard-h, 0px));max-height:calc(100dvh - env(safe-area-inset-top,0px) - var(--sui-keyboard-h, 0px));border-radius:24px;transition:height .22s ease,max-height .22s ease}:host-context(html.platform-android) .sui-modal__container--fullscreen,:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=small],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=medium],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=large],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=xlarge]{height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));max-height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)))}.sui-modal__container--fullscreen .sui-modal__body{max-height:none;flex:1 1 auto;min-height:0;overflow-y:auto}}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiCompactButton, selector: "sui-compact-button", inputs: ["icon", "variantStyle", "size", "fullRadius", "disabled", "href", "target", "rel", "type", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10810
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiModal, isStandalone: true, selector: "sui-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, iconVariant: { classPropertyName: "iconVariant", publicName: "iconVariant", isSignal: true, isRequired: false, transformFunction: null }, headerIcon: { classPropertyName: "headerIcon", publicName: "headerIcon", isSignal: true, isRequired: false, transformFunction: null }, statusAlignment: { classPropertyName: "statusAlignment", publicName: "statusAlignment", isSignal: true, isRequired: false, transformFunction: null }, backdropBlur: { classPropertyName: "backdropBlur", publicName: "backdropBlur", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, fullBody: { classPropertyName: "fullBody", publicName: "fullBody", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed" }, host: { properties: { "attr.title": "null", "attr.data-sui-modal-open": "open() ? \"\" : null", "attr.data-sui-modal-fullscreen": "fullscreen() ? \"\" : null" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }, { propertyName: "bodyRef", first: true, predicate: ["bodyEl"], descendants: true }], ngImport: i0, template: "@if (open()) {\n <!-- Overlay backdrop -->\n <div\n class=\"sui-modal__backdrop\"\n [class.sui-modal__backdrop--no-blur]=\"!backdropBlur()\"\n (click)=\"onBackdropClick()\"\n role=\"presentation\"\n aria-hidden=\"true\"\n ></div>\n\n <!-- Dialog wrapper (also acts as click-outside target when backdrop is disabled) -->\n <div\n class=\"sui-modal\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"title() ? titleId : null\"\n [attr.aria-describedby]=\"description() ? descId : null\"\n >\n <!-- Container \u2014 click stops propagation so it doesn't close.\n tabindex=-1 hace que el container sea focusable program\u00E1ticamente\n (para a11y al abrir el modal) pero NO entra en el tab order. */ -->\n <div\n #container\n class=\"sui-modal__container\"\n [class.sui-modal__container--scroll-active]=\"scrollActive()\"\n [class.sui-modal__container--fullscreen]=\"fullscreen()\"\n [class.sui-modal__container--status-vertical]=\"isStatusVertical()\"\n [attr.data-sui-size]=\"size()\"\n tabindex=\"-1\"\n (click)=\"onContainerClick($event)\"\n >\n <!-- Header \u2014 modo HORIZONTAL (canon Figma \"Modal Header\").\n En modo Status vertical el icono+texto se mueven al body, as\u00ED que el\n header solo conserva el close button (si aplica). -->\n @if (title() || showClose()) {\n <header\n class=\"sui-modal__header\"\n [class.sui-modal__header--with-icon]=\"hasHeaderIcon() && !isStatusVertical()\"\n [class.sui-modal__header--compact]=\"isCompactHeader()\"\n [class.sui-modal__header--close-only]=\"isStatusVertical()\"\n >\n\n <!-- Icon badge (horizontal): c\u00EDrculo bg lighter + 20px icono.\n En Small (sin description) Figma lo muestra flat 24px sin c\u00EDrculo\n \u2192 la clase --compact del header lo controla v\u00EDa SCSS. -->\n @if (hasHeaderIcon() && !isStatusVertical()) {\n <div class=\"sui-modal__icon\" [attr.data-variant]=\"resolvedIconVariant()\">\n <sui-icon [name]=\"iconName()\" [size]=\"isCompactHeader() ? 24 : 20\" />\n </div>\n }\n\n <!-- Title + Description (horizontal) -->\n @if (!isStatusVertical()) {\n <div class=\"sui-modal__titles\">\n @if (title()) {\n <h2 [id]=\"titleId\" class=\"sui-modal__title\">{{ title() }}</h2>\n }\n @if (description()) {\n <p [id]=\"descId\" class=\"sui-modal__description\">{{ description() }}</p>\n }\n </div>\n }\n\n <!-- Close button \u2014 Figma 466:4778 lo modela como Compact Button [1.1]\n (close-line 20px, ghost). Canon: sui-compact-button (ver CLAUDE.md\n \"close X en modales\"), no un <button> maqueta. -->\n @if (showClose()) {\n <sui-compact-button\n class=\"sui-modal__close\"\n icon=\"close-line\"\n variantStyle=\"ghost\"\n size=\"large\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"close()\"\n />\n }\n </header>\n }\n\n <!-- Body \u2014 default slot (ng-content). El consumer proyecta cualquier markup aqu\u00ED. -->\n <div #bodyEl\n class=\"sui-modal__body\"\n [class.sui-modal__body--full]=\"fullBody()\"\n [class.sui-modal__body--status]=\"isStatusVertical()\">\n\n <!-- Status vertical: icono centrado arriba + texto centrado (Figma 480:1372).\n Tipograf\u00EDa escalada (Label/Medium 16 + Paragraph/Small 14). -->\n @if (isStatusVertical()) {\n <div class=\"sui-modal__status\">\n <div class=\"sui-modal__icon\" [attr.data-variant]=\"resolvedIconVariant()\">\n <sui-icon [name]=\"iconName()\" [size]=\"24\" />\n </div>\n @if (title() || description()) {\n <div class=\"sui-modal__status-text\">\n @if (title()) {\n <h2 [id]=\"titleId\" class=\"sui-modal__status-title\">{{ title() }}</h2>\n }\n @if (description()) {\n <p [id]=\"descId\" class=\"sui-modal__status-description\">{{ description() }}</p>\n }\n </div>\n }\n </div>\n }\n\n <ng-content />\n </div>\n\n <!-- Footer \u2014 named slot via attribute selector -->\n <ng-content select=\"[slot=footer]\" />\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-modal__backdrop{position:fixed;inset:0;z-index:1000;background-color:#3333333d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:sui-modal-backdrop-in var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)) both}.sui-modal__backdrop--no-blur{backdrop-filter:none;-webkit-backdrop-filter:none}.sui-modal{position:fixed;inset:0;z-index:1001;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;pointer-events:none}.sui-modal__container{position:relative;display:flex;flex-direction:column;overflow:hidden;pointer-events:auto;background:var(--sui-bg-white-0, #ffffff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-20, 20px);box-shadow:var(--sui-regular-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, .1));width:100%;margin-inline:auto;max-height:calc(100dvh - 32px);overflow-y:auto;animation:sui-modal-container-in .18s cubic-bezier(.16,1,.3,1) both;will-change:transform,opacity}.sui-modal__container[data-sui-size=small]{max-width:400px}.sui-modal__container[data-sui-size=medium]{max-width:440px}.sui-modal__container[data-sui-size=large]{max-width:560px}.sui-modal__container[data-sui-size=xlarge]{max-width:720px}.sui-modal__header{display:flex;align-items:center;flex-shrink:0;gap:16px;padding:16px 56px 16px 20px;border-bottom:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);position:relative;overflow:hidden;box-sizing:border-box;min-height:80px;height:auto}.sui-modal__header.sui-modal__header--with-icon{gap:14px}.sui-modal__header.sui-modal__header--compact{min-height:56px;gap:12px}.sui-modal__header.sui-modal__header--compact.sui-modal__header--with-icon{gap:14px}.sui-modal__header.sui-modal__header--close-only{min-height:0;padding:0;border-bottom:none;background:transparent;overflow:visible}.sui-modal__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:flex-start;padding:10px;border-radius:var(--sui-radius-full, 999px)}.sui-modal__icon[data-variant=error]{background:var(--sui-state-error-lighter, #ffebec);color:var(--sui-state-error-base, #fb3748)}.sui-modal__icon[data-variant=warning]{background:var(--sui-state-warning-lighter, #fff3eb);color:var(--sui-state-warning-base, #fa7319)}.sui-modal__icon[data-variant=success]{background:var(--sui-state-success-lighter, #e3f7ec);color:var(--sui-state-success-base, #1fc16b)}.sui-modal__icon[data-variant=info]{background:var(--sui-state-information-lighter, #ebf1ff);color:var(--sui-state-information-base, #335cff)}.sui-modal__icon[data-variant=neutral]{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c)}.sui-modal__header--compact .sui-modal__icon{padding:0;background:transparent;align-self:center}.sui-modal__titles{display:block;flex:1 1 auto;min-width:0}.sui-modal__title{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size, 14px);font-weight:var(--sui-type-label-sm-weight, 500);line-height:var(--sui-type-label-sm-line, 20px);letter-spacing:var(--sui-type-label-sm-spacing, -.006em);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;word-break:break-word}.sui-modal__description{margin:4px 0 0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-xs-size, 12px);font-weight:var(--sui-type-paragraph-xs-weight, 400);line-height:var(--sui-type-paragraph-xs-line, 16px);letter-spacing:0;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-modal__title+.sui-modal__description{margin-top:4px}.sui-modal__description:first-child{margin-top:0}.sui-modal__close{position:absolute;top:16px;right:16px;flex-shrink:0}.sui-modal__body{display:flex;flex-direction:column;gap:20px;padding:20px;flex:1 1 auto;background:var(--sui-bg-white-0, #ffffff);overflow-y:auto;max-height:calc(100dvh - 200px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.sui-modal__body:empty{display:none}.sui-modal__body--full{padding:0;gap:0}.sui-modal__status{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}.sui-modal__status .sui-modal__icon{align-self:center;padding:8px;border-radius:var(--sui-radius-10, 10px)}.sui-modal__status-text{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}.sui-modal__status-title{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-md-size, 16px);font-weight:var(--sui-type-label-md-weight, 500);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-modal__status-description{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size, 14px);font-weight:var(--sui-type-paragraph-sm-weight, 400);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}::ng-deep [slot=footer],.sui-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:16px 20px;box-sizing:border-box;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);flex-shrink:0;position:relative;transition:box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out)}.sui-modal__container--scroll-active ::ng-deep [slot=footer],.sui-modal__container--scroll-active .sui-modal__footer{box-shadow:0 -4px 8px #0e121b0f}@keyframes sui-modal-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes sui-modal-container-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.sui-modal__container:focus{outline:none}@media(max-width:768px){.sui-modal{align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,16px)) max(16px,env(safe-area-inset-right,16px)) max(16px,env(safe-area-inset-bottom,16px)) max(16px,env(safe-area-inset-left,16px));box-sizing:border-box}.sui-modal__container{width:100%;max-width:100%;max-height:calc(50dvh - 16px);overflow:hidden;display:flex;flex-direction:column}.sui-modal__body{overflow-y:auto;flex:1 1 auto;max-height:calc(50dvh - 100px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}:host-context(html.platform-android) .sui-modal--kb-open .sui-modal__container:not(.sui-modal__container--fullscreen){max-height:calc(100dvh - 16px)}:host-context(html.platform-android) .sui-modal--kb-open .sui-modal__container:not(.sui-modal__container--fullscreen) .sui-modal__body{max-height:calc(100dvh - 200px)}.sui-modal__header,::ng-deep [slot=footer],.sui-modal__footer{flex-shrink:0}.sui-modal:has(.sui-modal__container--fullscreen){align-items:stretch;justify-content:stretch;padding:env(safe-area-inset-top,0px) 0 0}:host-context(html.platform-android) .sui-modal:has(.sui-modal__container--fullscreen){padding-bottom:var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))}.sui-modal__container--fullscreen,.sui-modal__container--fullscreen[data-sui-size=small],.sui-modal__container--fullscreen[data-sui-size=medium],.sui-modal__container--fullscreen[data-sui-size=large],.sui-modal__container--fullscreen[data-sui-size=xlarge]{width:100%;max-width:100%;height:calc(100dvh - env(safe-area-inset-top,0px) - var(--sui-keyboard-h, 0px));max-height:calc(100dvh - env(safe-area-inset-top,0px) - var(--sui-keyboard-h, 0px));border-radius:24px;transition:height .22s ease,max-height .22s ease}:host-context(html.platform-android) .sui-modal__container--fullscreen,:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=small],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=medium],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=large],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=xlarge]{height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));max-height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)))}.sui-modal__container--fullscreen .sui-modal__body{max-height:none;flex:1 1 auto;min-height:0;overflow-y:auto}}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiCompactButton, selector: "sui-compact-button", inputs: ["icon", "variantStyle", "size", "fullRadius", "disabled", "href", "target", "rel", "type", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10804
10811
|
}
|
|
10805
10812
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiModal, decorators: [{
|
|
10806
10813
|
type: Component,
|
|
@@ -10809,7 +10816,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
10809
10816
|
'[attr.title]': 'null',
|
|
10810
10817
|
'[attr.data-sui-modal-open]': 'open() ? "" : null',
|
|
10811
10818
|
'[attr.data-sui-modal-fullscreen]': 'fullscreen() ? "" : null',
|
|
10812
|
-
}, template: "@if (open()) {\n <!-- Overlay backdrop -->\n <div\n class=\"sui-modal__backdrop\"\n [class.sui-modal__backdrop--no-blur]=\"!backdropBlur()\"\n (click)=\"onBackdropClick()\"\n role=\"presentation\"\n aria-hidden=\"true\"\n ></div>\n\n <!-- Dialog wrapper (also acts as click-outside target when backdrop is disabled) -->\n <div\n class=\"sui-modal\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"title() ? titleId : null\"\n [attr.aria-describedby]=\"description() ? descId : null\"\n >\n <!-- Container \u2014 click stops propagation so it doesn't close.\n tabindex=-1 hace que el container sea focusable program\u00E1ticamente\n (para a11y al abrir el modal) pero NO entra en el tab order. */ -->\n <div\n #container\n class=\"sui-modal__container\"\n [class.sui-modal__container--scroll-active]=\"scrollActive()\"\n [class.sui-modal__container--fullscreen]=\"fullscreen()\"\n [class.sui-modal__container--status-vertical]=\"isStatusVertical()\"\n [attr.data-sui-size]=\"size()\"\n tabindex=\"-1\"\n (click)=\"onContainerClick($event)\"\n >\n <!-- Header \u2014 modo HORIZONTAL (canon Figma \"Modal Header\").\n En modo Status vertical el icono+texto se mueven al body, as\u00ED que el\n header solo conserva el close button (si aplica). -->\n @if (title() || showClose()) {\n <header\n class=\"sui-modal__header\"\n [class.sui-modal__header--with-icon]=\"hasHeaderIcon() && !isStatusVertical()\"\n [class.sui-modal__header--compact]=\"isCompactHeader()\"\n [class.sui-modal__header--close-only]=\"isStatusVertical()\"\n >\n\n <!-- Icon badge (horizontal): c\u00EDrculo bg lighter + 20px icono.\n En Small (sin description) Figma lo muestra flat 24px sin c\u00EDrculo\n \u2192 la clase --compact del header lo controla v\u00EDa SCSS. -->\n @if (hasHeaderIcon() && !isStatusVertical()) {\n <div class=\"sui-modal__icon\" [attr.data-variant]=\"resolvedIconVariant()\">\n <sui-icon [name]=\"iconName()\" [size]=\"isCompactHeader() ? 24 : 20\" />\n </div>\n }\n\n <!-- Title + Description (horizontal) -->\n @if (!isStatusVertical()) {\n <div class=\"sui-modal__titles\">\n @if (title()) {\n <h2 [id]=\"titleId\" class=\"sui-modal__title\">{{ title() }}</h2>\n }\n @if (description()) {\n <p [id]=\"descId\" class=\"sui-modal__description\">{{ description() }}</p>\n }\n </div>\n }\n\n <!-- Close button \u2014 Figma 466:4778 lo modela como Compact Button [1.1]\n (close-line 20px, ghost). Canon: sui-compact-button (ver CLAUDE.md\n \"close X en modales\"), no un <button> maqueta. -->\n @if (showClose()) {\n <sui-compact-button\n class=\"sui-modal__close\"\n icon=\"close-line\"\n variantStyle=\"ghost\"\n size=\"large\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"close()\"\n />\n }\n </header>\n }\n\n <!-- Body \u2014 default slot (ng-content). El consumer proyecta cualquier markup aqu\u00ED. -->\n <div #bodyEl\n class=\"sui-modal__body\"\n [class.sui-modal__body--full]=\"fullBody()\"\n [class.sui-modal__body--status]=\"isStatusVertical()\">\n\n <!-- Status vertical: icono centrado arriba + texto centrado (Figma 480:1372).\n Tipograf\u00EDa escalada (Label/Medium 16 + Paragraph/Small 14). -->\n @if (isStatusVertical()) {\n <div class=\"sui-modal__status\">\n <div class=\"sui-modal__icon\" [attr.data-variant]=\"resolvedIconVariant()\">\n <sui-icon [name]=\"iconName()\" [size]=\"24\" />\n </div>\n @if (title() || description()) {\n <div class=\"sui-modal__status-text\">\n @if (title()) {\n <h2 [id]=\"titleId\" class=\"sui-modal__status-title\">{{ title() }}</h2>\n }\n @if (description()) {\n <p [id]=\"descId\" class=\"sui-modal__status-description\">{{ description() }}</p>\n }\n </div>\n }\n </div>\n }\n\n <ng-content />\n </div>\n\n <!-- Footer \u2014 named slot via attribute selector -->\n <ng-content select=\"[slot=footer]\" />\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-modal__backdrop{position:fixed;inset:0;z-index:1000;background-color:#3333333d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:sui-modal-backdrop-in var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)) both}.sui-modal__backdrop--no-blur{backdrop-filter:none;-webkit-backdrop-filter:none}.sui-modal{position:fixed;inset:0;z-index:1001;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;pointer-events:none}.sui-modal__container{position:relative;display:flex;flex-direction:column;overflow:hidden;pointer-events:auto;background:var(--sui-bg-white-0, #ffffff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-20, 20px);box-shadow:var(--sui-regular-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, .1));width:100%;margin-inline:auto;max-height:calc(100dvh - 32px);overflow-y:auto;animation:sui-modal-container-in .18s cubic-bezier(.16,1,.3,1) both;will-change:transform,opacity}.sui-modal__container[data-sui-size=small]{max-width:400px}.sui-modal__container[data-sui-size=medium]{max-width:440px}.sui-modal__container[data-sui-size=large]{max-width:560px}.sui-modal__container[data-sui-size=xlarge]{max-width:720px}.sui-modal__header{display:flex;align-items:center;flex-shrink:0;gap:16px;padding:16px 56px 16px 20px;border-bottom:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);position:relative;overflow:hidden;box-sizing:border-box;min-height:80px;height:auto}.sui-modal__header.sui-modal__header--with-icon{gap:14px}.sui-modal__header.sui-modal__header--compact{min-height:56px;gap:12px}.sui-modal__header.sui-modal__header--compact.sui-modal__header--with-icon{gap:14px}.sui-modal__header.sui-modal__header--close-only{min-height:0;padding:0;border-bottom:none;background:transparent}.sui-modal__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:flex-start;padding:10px;border-radius:var(--sui-radius-full, 999px)}.sui-modal__icon[data-variant=error]{background:var(--sui-state-error-lighter, #ffebec);color:var(--sui-state-error-base, #fb3748)}.sui-modal__icon[data-variant=warning]{background:var(--sui-state-warning-lighter, #fff3eb);color:var(--sui-state-warning-base, #fa7319)}.sui-modal__icon[data-variant=success]{background:var(--sui-state-success-lighter, #e3f7ec);color:var(--sui-state-success-base, #1fc16b)}.sui-modal__icon[data-variant=info]{background:var(--sui-state-information-lighter, #ebf1ff);color:var(--sui-state-information-base, #335cff)}.sui-modal__icon[data-variant=neutral]{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c)}.sui-modal__header--compact .sui-modal__icon{padding:0;background:transparent;align-self:center}.sui-modal__titles{display:block;flex:1 1 auto;min-width:0}.sui-modal__title{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size, 14px);font-weight:var(--sui-type-label-sm-weight, 500);line-height:var(--sui-type-label-sm-line, 20px);letter-spacing:var(--sui-type-label-sm-spacing, -.006em);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;word-break:break-word}.sui-modal__description{margin:4px 0 0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-xs-size, 12px);font-weight:var(--sui-type-paragraph-xs-weight, 400);line-height:var(--sui-type-paragraph-xs-line, 16px);letter-spacing:0;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-modal__title+.sui-modal__description{margin-top:4px}.sui-modal__description:first-child{margin-top:0}.sui-modal__close{position:absolute;top:16px;right:16px;flex-shrink:0}.sui-modal__body{display:flex;flex-direction:column;gap:20px;padding:20px;flex:1 1 auto;background:var(--sui-bg-white-0, #ffffff);overflow-y:auto;max-height:calc(100dvh - 200px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.sui-modal__body:empty{display:none}.sui-modal__body--full{padding:0;gap:0}.sui-modal__status{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}.sui-modal__status .sui-modal__icon{align-self:center;padding:8px;border-radius:var(--sui-radius-10, 10px)}.sui-modal__status-text{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}.sui-modal__status-title{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-md-size, 16px);font-weight:var(--sui-type-label-md-weight, 500);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-modal__status-description{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size, 14px);font-weight:var(--sui-type-paragraph-sm-weight, 400);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}::ng-deep [slot=footer],.sui-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:16px 20px;box-sizing:border-box;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);flex-shrink:0;position:relative;transition:box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out)}.sui-modal__container--scroll-active ::ng-deep [slot=footer],.sui-modal__container--scroll-active .sui-modal__footer{box-shadow:0 -4px 8px #0e121b0f}@keyframes sui-modal-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes sui-modal-container-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.sui-modal__container:focus{outline:none}@media(max-width:768px){.sui-modal{align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,16px)) max(16px,env(safe-area-inset-right,16px)) max(16px,env(safe-area-inset-bottom,16px)) max(16px,env(safe-area-inset-left,16px));box-sizing:border-box}.sui-modal__container{width:100%;max-width:100%;max-height:calc(50dvh - 16px);overflow:hidden;display:flex;flex-direction:column}.sui-modal__body{overflow-y:auto;flex:1 1 auto;max-height:calc(50dvh - 100px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}:host-context(html.platform-android) .sui-modal--kb-open .sui-modal__container:not(.sui-modal__container--fullscreen){max-height:calc(100dvh - 16px)}:host-context(html.platform-android) .sui-modal--kb-open .sui-modal__container:not(.sui-modal__container--fullscreen) .sui-modal__body{max-height:calc(100dvh - 200px)}.sui-modal__header,::ng-deep [slot=footer],.sui-modal__footer{flex-shrink:0}.sui-modal:has(.sui-modal__container--fullscreen){align-items:stretch;justify-content:stretch;padding:env(safe-area-inset-top,0px) 0 0}:host-context(html.platform-android) .sui-modal:has(.sui-modal__container--fullscreen){padding-bottom:var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))}.sui-modal__container--fullscreen,.sui-modal__container--fullscreen[data-sui-size=small],.sui-modal__container--fullscreen[data-sui-size=medium],.sui-modal__container--fullscreen[data-sui-size=large],.sui-modal__container--fullscreen[data-sui-size=xlarge]{width:100%;max-width:100%;height:calc(100dvh - env(safe-area-inset-top,0px) - var(--sui-keyboard-h, 0px));max-height:calc(100dvh - env(safe-area-inset-top,0px) - var(--sui-keyboard-h, 0px));border-radius:24px;transition:height .22s ease,max-height .22s ease}:host-context(html.platform-android) .sui-modal__container--fullscreen,:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=small],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=medium],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=large],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=xlarge]{height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));max-height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)))}.sui-modal__container--fullscreen .sui-modal__body{max-height:none;flex:1 1 auto;min-height:0;overflow-y:auto}}\n"] }]
|
|
10819
|
+
}, template: "@if (open()) {\n <!-- Overlay backdrop -->\n <div\n class=\"sui-modal__backdrop\"\n [class.sui-modal__backdrop--no-blur]=\"!backdropBlur()\"\n (click)=\"onBackdropClick()\"\n role=\"presentation\"\n aria-hidden=\"true\"\n ></div>\n\n <!-- Dialog wrapper (also acts as click-outside target when backdrop is disabled) -->\n <div\n class=\"sui-modal\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"title() ? titleId : null\"\n [attr.aria-describedby]=\"description() ? descId : null\"\n >\n <!-- Container \u2014 click stops propagation so it doesn't close.\n tabindex=-1 hace que el container sea focusable program\u00E1ticamente\n (para a11y al abrir el modal) pero NO entra en el tab order. */ -->\n <div\n #container\n class=\"sui-modal__container\"\n [class.sui-modal__container--scroll-active]=\"scrollActive()\"\n [class.sui-modal__container--fullscreen]=\"fullscreen()\"\n [class.sui-modal__container--status-vertical]=\"isStatusVertical()\"\n [attr.data-sui-size]=\"size()\"\n tabindex=\"-1\"\n (click)=\"onContainerClick($event)\"\n >\n <!-- Header \u2014 modo HORIZONTAL (canon Figma \"Modal Header\").\n En modo Status vertical el icono+texto se mueven al body, as\u00ED que el\n header solo conserva el close button (si aplica). -->\n @if (title() || showClose()) {\n <header\n class=\"sui-modal__header\"\n [class.sui-modal__header--with-icon]=\"hasHeaderIcon() && !isStatusVertical()\"\n [class.sui-modal__header--compact]=\"isCompactHeader()\"\n [class.sui-modal__header--close-only]=\"isStatusVertical()\"\n >\n\n <!-- Icon badge (horizontal): c\u00EDrculo bg lighter + 20px icono.\n En Small (sin description) Figma lo muestra flat 24px sin c\u00EDrculo\n \u2192 la clase --compact del header lo controla v\u00EDa SCSS. -->\n @if (hasHeaderIcon() && !isStatusVertical()) {\n <div class=\"sui-modal__icon\" [attr.data-variant]=\"resolvedIconVariant()\">\n <sui-icon [name]=\"iconName()\" [size]=\"isCompactHeader() ? 24 : 20\" />\n </div>\n }\n\n <!-- Title + Description (horizontal) -->\n @if (!isStatusVertical()) {\n <div class=\"sui-modal__titles\">\n @if (title()) {\n <h2 [id]=\"titleId\" class=\"sui-modal__title\">{{ title() }}</h2>\n }\n @if (description()) {\n <p [id]=\"descId\" class=\"sui-modal__description\">{{ description() }}</p>\n }\n </div>\n }\n\n <!-- Close button \u2014 Figma 466:4778 lo modela como Compact Button [1.1]\n (close-line 20px, ghost). Canon: sui-compact-button (ver CLAUDE.md\n \"close X en modales\"), no un <button> maqueta. -->\n @if (showClose()) {\n <sui-compact-button\n class=\"sui-modal__close\"\n icon=\"close-line\"\n variantStyle=\"ghost\"\n size=\"large\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"close()\"\n />\n }\n </header>\n }\n\n <!-- Body \u2014 default slot (ng-content). El consumer proyecta cualquier markup aqu\u00ED. -->\n <div #bodyEl\n class=\"sui-modal__body\"\n [class.sui-modal__body--full]=\"fullBody()\"\n [class.sui-modal__body--status]=\"isStatusVertical()\">\n\n <!-- Status vertical: icono centrado arriba + texto centrado (Figma 480:1372).\n Tipograf\u00EDa escalada (Label/Medium 16 + Paragraph/Small 14). -->\n @if (isStatusVertical()) {\n <div class=\"sui-modal__status\">\n <div class=\"sui-modal__icon\" [attr.data-variant]=\"resolvedIconVariant()\">\n <sui-icon [name]=\"iconName()\" [size]=\"24\" />\n </div>\n @if (title() || description()) {\n <div class=\"sui-modal__status-text\">\n @if (title()) {\n <h2 [id]=\"titleId\" class=\"sui-modal__status-title\">{{ title() }}</h2>\n }\n @if (description()) {\n <p [id]=\"descId\" class=\"sui-modal__status-description\">{{ description() }}</p>\n }\n </div>\n }\n </div>\n }\n\n <ng-content />\n </div>\n\n <!-- Footer \u2014 named slot via attribute selector -->\n <ng-content select=\"[slot=footer]\" />\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-modal__backdrop{position:fixed;inset:0;z-index:1000;background-color:#3333333d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:sui-modal-backdrop-in var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)) both}.sui-modal__backdrop--no-blur{backdrop-filter:none;-webkit-backdrop-filter:none}.sui-modal{position:fixed;inset:0;z-index:1001;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;pointer-events:none}.sui-modal__container{position:relative;display:flex;flex-direction:column;overflow:hidden;pointer-events:auto;background:var(--sui-bg-white-0, #ffffff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-20, 20px);box-shadow:var(--sui-regular-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, .1));width:100%;margin-inline:auto;max-height:calc(100dvh - 32px);overflow-y:auto;animation:sui-modal-container-in .18s cubic-bezier(.16,1,.3,1) both;will-change:transform,opacity}.sui-modal__container[data-sui-size=small]{max-width:400px}.sui-modal__container[data-sui-size=medium]{max-width:440px}.sui-modal__container[data-sui-size=large]{max-width:560px}.sui-modal__container[data-sui-size=xlarge]{max-width:720px}.sui-modal__header{display:flex;align-items:center;flex-shrink:0;gap:16px;padding:16px 56px 16px 20px;border-bottom:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);position:relative;overflow:hidden;box-sizing:border-box;min-height:80px;height:auto}.sui-modal__header.sui-modal__header--with-icon{gap:14px}.sui-modal__header.sui-modal__header--compact{min-height:56px;gap:12px}.sui-modal__header.sui-modal__header--compact.sui-modal__header--with-icon{gap:14px}.sui-modal__header.sui-modal__header--close-only{min-height:0;padding:0;border-bottom:none;background:transparent;overflow:visible}.sui-modal__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:flex-start;padding:10px;border-radius:var(--sui-radius-full, 999px)}.sui-modal__icon[data-variant=error]{background:var(--sui-state-error-lighter, #ffebec);color:var(--sui-state-error-base, #fb3748)}.sui-modal__icon[data-variant=warning]{background:var(--sui-state-warning-lighter, #fff3eb);color:var(--sui-state-warning-base, #fa7319)}.sui-modal__icon[data-variant=success]{background:var(--sui-state-success-lighter, #e3f7ec);color:var(--sui-state-success-base, #1fc16b)}.sui-modal__icon[data-variant=info]{background:var(--sui-state-information-lighter, #ebf1ff);color:var(--sui-state-information-base, #335cff)}.sui-modal__icon[data-variant=neutral]{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c)}.sui-modal__header--compact .sui-modal__icon{padding:0;background:transparent;align-self:center}.sui-modal__titles{display:block;flex:1 1 auto;min-width:0}.sui-modal__title{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size, 14px);font-weight:var(--sui-type-label-sm-weight, 500);line-height:var(--sui-type-label-sm-line, 20px);letter-spacing:var(--sui-type-label-sm-spacing, -.006em);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;word-break:break-word}.sui-modal__description{margin:4px 0 0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-xs-size, 12px);font-weight:var(--sui-type-paragraph-xs-weight, 400);line-height:var(--sui-type-paragraph-xs-line, 16px);letter-spacing:0;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-modal__title+.sui-modal__description{margin-top:4px}.sui-modal__description:first-child{margin-top:0}.sui-modal__close{position:absolute;top:16px;right:16px;flex-shrink:0}.sui-modal__body{display:flex;flex-direction:column;gap:20px;padding:20px;flex:1 1 auto;background:var(--sui-bg-white-0, #ffffff);overflow-y:auto;max-height:calc(100dvh - 200px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.sui-modal__body:empty{display:none}.sui-modal__body--full{padding:0;gap:0}.sui-modal__status{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}.sui-modal__status .sui-modal__icon{align-self:center;padding:8px;border-radius:var(--sui-radius-10, 10px)}.sui-modal__status-text{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}.sui-modal__status-title{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-md-size, 16px);font-weight:var(--sui-type-label-md-weight, 500);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-modal__status-description{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size, 14px);font-weight:var(--sui-type-paragraph-sm-weight, 400);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}::ng-deep [slot=footer],.sui-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:16px 20px;box-sizing:border-box;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);flex-shrink:0;position:relative;transition:box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out)}.sui-modal__container--scroll-active ::ng-deep [slot=footer],.sui-modal__container--scroll-active .sui-modal__footer{box-shadow:0 -4px 8px #0e121b0f}@keyframes sui-modal-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes sui-modal-container-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.sui-modal__container:focus{outline:none}@media(max-width:768px){.sui-modal{align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,16px)) max(16px,env(safe-area-inset-right,16px)) max(16px,env(safe-area-inset-bottom,16px)) max(16px,env(safe-area-inset-left,16px));box-sizing:border-box}.sui-modal__container{width:100%;max-width:100%;max-height:calc(50dvh - 16px);overflow:hidden;display:flex;flex-direction:column}.sui-modal__body{overflow-y:auto;flex:1 1 auto;max-height:calc(50dvh - 100px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}:host-context(html.platform-android) .sui-modal--kb-open .sui-modal__container:not(.sui-modal__container--fullscreen){max-height:calc(100dvh - 16px)}:host-context(html.platform-android) .sui-modal--kb-open .sui-modal__container:not(.sui-modal__container--fullscreen) .sui-modal__body{max-height:calc(100dvh - 200px)}.sui-modal__header,::ng-deep [slot=footer],.sui-modal__footer{flex-shrink:0}.sui-modal:has(.sui-modal__container--fullscreen){align-items:stretch;justify-content:stretch;padding:env(safe-area-inset-top,0px) 0 0}:host-context(html.platform-android) .sui-modal:has(.sui-modal__container--fullscreen){padding-bottom:var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))}.sui-modal__container--fullscreen,.sui-modal__container--fullscreen[data-sui-size=small],.sui-modal__container--fullscreen[data-sui-size=medium],.sui-modal__container--fullscreen[data-sui-size=large],.sui-modal__container--fullscreen[data-sui-size=xlarge]{width:100%;max-width:100%;height:calc(100dvh - env(safe-area-inset-top,0px) - var(--sui-keyboard-h, 0px));max-height:calc(100dvh - env(safe-area-inset-top,0px) - var(--sui-keyboard-h, 0px));border-radius:24px;transition:height .22s ease,max-height .22s ease}:host-context(html.platform-android) .sui-modal__container--fullscreen,:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=small],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=medium],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=large],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=xlarge]{height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));max-height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)))}.sui-modal__container--fullscreen .sui-modal__body{max-height:none;flex:1 1 auto;min-height:0;overflow-y:auto}}\n"] }]
|
|
10813
10820
|
}], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], iconVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconVariant", required: false }] }], headerIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerIcon", required: false }] }], statusAlignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusAlignment", required: false }] }], backdropBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropBlur", required: false }] }], fullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreen", required: false }] }], fullBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullBody", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], containerRef: [{
|
|
10814
10821
|
type: ViewChild,
|
|
10815
10822
|
args: ['container']
|
|
@@ -11103,14 +11110,15 @@ class SuiNotification {
|
|
|
11103
11110
|
this.moreClicked.emit(event);
|
|
11104
11111
|
}
|
|
11105
11112
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiNotification, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11106
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiNotification, isStandalone: true, selector: "sui-notification", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, variantStyle: { classPropertyName: "variantStyle", publicName: "variantStyle", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, timestamp: { classPropertyName: "timestamp", publicName: "timestamp", isSignal: true, isRequired: false, transformFunction: null }, avatarSrc: { classPropertyName: "avatarSrc", publicName: "avatarSrc", isSignal: true, isRequired: false, transformFunction: null }, avatarInitials: { classPropertyName: "avatarInitials", publicName: "avatarInitials", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, unread: { classPropertyName: "unread", publicName: "unread", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, showMore: { classPropertyName: "showMore", publicName: "showMore", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed", moreClicked: "moreClicked" }, host: { properties: { "attr.title": "null" } }, ngImport: i0, template: "<div\n class=\"sui-notification\"\n [class.sui-notification--hoverable]=\"showMore()\"\n [class.sui-notification--active]=\"active()\"\n [class.sui-notification--has-avatar]=\"hasAvatar()\"\n [attr.data-sui-variant]=\"variant()\"\n [attr.data-sui-style]=\"variantStyle()\"\n [attr.data-sui-type]=\"type()\"\n [attr.role]=\"role()\"\n [attr.aria-live]=\"ariaLive()\"\n>\n <!-- Leading: avatar OR status icon -->\n @if (hasAvatar()) {\n <div class=\"sui-notification__avatar\" aria-hidden=\"true\">\n @if (avatarSrc()) {\n <img [src]=\"avatarSrc()\" alt=\"\" />\n } @else {\n <span class=\"sui-notification__avatar-initials\">{{ avatarInitials() }}</span>\n }\n </div>\n } @else if (showLeadingIcon()) {\n <div class=\"sui-notification__icon\" aria-hidden=\"true\">\n <sui-icon [name]=\"iconName()\" [size]=\"20\" />\n </div>\n }\n\n <div class=\"sui-notification__content\">\n <!-- Header: title + unread dot + timestamp -->\n <div class=\"sui-notification__header\">\n @if (title()) {\n <p class=\"sui-notification__title\">{{ title() }}</p>\n }\n @if (unread()) {\n <span class=\"sui-notification__dot\" aria-label=\"No le\u00EDdo\"></span>\n }\n @if (timestamp() && type() === 'basic') {\n <span class=\"sui-notification__time\">{{ timestamp() }}</span>\n }\n </div>\n\n <!-- Compound description: timestamp \u2219 company-logo \u2219 text.\n For type=basic the timestamp lives in the header (not here), so the\n description block must only render on real content \u2014 otherwise an\n empty <p> occupies a phantom 4px gap below the title. -->\n @if (description() || (timestamp() && type() !== 'basic') || type() !== 'basic') {\n <p class=\"sui-notification__description\">\n @if (timestamp() && type() !== 'basic') {\n <span class=\"sui-notification__meta-time\">{{ timestamp() }}</span>\n <span class=\"sui-notification__sep\" aria-hidden=\"true\">\u2219</span>\n }\n <span class=\"sui-notification__company-logo\">\n <ng-content select=\"[slot=company-logo]\" />\n </span>\n @if (description()) {\n <span class=\"sui-notification__desc-text\">{{ description() }}</span>\n }\n </p>\n }\n\n <!-- Type=file: attachment card -->\n @if (type() === 'file') {\n <div class=\"sui-notification__file\">\n <ng-content select=\"[slot=file]\" />\n </div>\n }\n\n <!-- Type=message: response bubble -->\n @if (type() === 'message') {\n <div class=\"sui-notification__bubble\">\n <ng-content select=\"[slot=message]\" />\n </div>\n }\n\n <!-- Free custom content -->\n <ng-content />\n\n <!-- Actions slot (also hosts type=button Deny/Approve pair) -->\n <div class=\"sui-notification__actions\">\n <ng-content select=\"[slot=actions]\" />\n </div>\n </div>\n\n <!-- Hover affordance: more-2-line (notification item) = COMPONENTE\n sui-compact-button (variantStyle ghost: transparent + hover bg-weak-50,\n radius-6, icon 20 = size large), NO un <button> maqueta. El posicionamiento\n absoluto y el reveal on-hover (opacity 0\u21921) los aporta `.sui-notification__more`. -->\n @if (showMore()) {\n <sui-compact-button\n class=\"sui-notification__more\"\n icon=\"more-2-line\"\n variantStyle=\"ghost\"\n size=\"large\"\n ariaLabel=\"M\u00E1s opciones\"\n (clicked)=\"onMore($event)\"\n />\n }\n\n @if (dismissible()) {\n <!-- Cierre = COMPONENTE sui-compact-button (variantStyle modifiable \u2192 el icono\n hereda el currentColor del per-style `.sui-notification__close`), NO un\n <button> maqueta. icon 16 = size medium (patr\u00F3n canon sui-alert). -->\n <sui-compact-button\n class=\"sui-notification__close\"\n icon=\"close-line\"\n variantStyle=\"modifiable\"\n size=\"medium\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"onDismiss()\"\n />\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-notification{position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:var(--sui-radius-12);overflow:hidden;border:1px solid transparent;box-sizing:border-box}.sui-notification.sui-notification--has-avatar{padding:12px;gap:15px}.sui-notification[data-sui-style=filled]{border:none;box-shadow:var(--sui-custom-shadow-small)}.sui-notification[data-sui-style=filled] .sui-notification__title,.sui-notification[data-sui-style=filled] .sui-notification__description,.sui-notification[data-sui-style=filled] .sui-notification__icon{color:var(--sui-static-white)}.sui-notification[data-sui-style=filled] .sui-notification__time,.sui-notification[data-sui-style=filled] .sui-notification__close{color:var(--sui-static-white);opacity:.72}.sui-notification[data-sui-style=filled] .sui-notification__dot{background:var(--sui-static-white)}.sui-notification[data-sui-style=filled][data-sui-variant=info]{background:var(--sui-state-information-base)}.sui-notification[data-sui-style=filled][data-sui-variant=success]{background:var(--sui-state-success-base)}.sui-notification[data-sui-style=filled][data-sui-variant=warning]{background:var(--sui-state-warning-base)}.sui-notification[data-sui-style=filled][data-sui-variant=error]{background:var(--sui-state-error-base)}.sui-notification[data-sui-style=filled][data-sui-variant=feature]{background:var(--sui-state-feature-base)}.sui-notification[data-sui-style=filled][data-sui-variant=default]{background:var(--sui-bg-strong-950)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__title,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__description,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__time,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__close{color:var(--sui-text-white-0)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__icon{color:var(--sui-icon-white-0)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__dot{background:var(--sui-text-white-0)}.sui-notification[data-sui-style=light]{border:none}.sui-notification[data-sui-style=light] .sui-notification__title,.sui-notification[data-sui-style=light] .sui-notification__description{color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=light] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=light][data-sui-variant=info]{background:var(--sui-state-information-light)}.sui-notification[data-sui-style=light][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification[data-sui-style=light][data-sui-variant=success]{background:var(--sui-state-success-light)}.sui-notification[data-sui-style=light][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification[data-sui-style=light][data-sui-variant=warning]{background:var(--sui-state-warning-light)}.sui-notification[data-sui-style=light][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification[data-sui-style=light][data-sui-variant=error]{background:var(--sui-state-error-light)}.sui-notification[data-sui-style=light][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification[data-sui-style=light][data-sui-variant=feature]{background:var(--sui-state-feature-light)}.sui-notification[data-sui-style=light][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification[data-sui-style=light][data-sui-variant=default]{background:var(--sui-bg-weak-50)}.sui-notification[data-sui-style=lighter] .sui-notification__title{color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=lighter] .sui-notification__description{color:var(--sui-text-strong-950);opacity:.72}.sui-notification[data-sui-style=lighter] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=lighter][data-sui-variant=info]{background:var(--sui-state-information-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=success]{background:var(--sui-state-success-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=warning]{background:var(--sui-state-warning-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=error]{background:var(--sui-state-error-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=feature]{background:var(--sui-state-feature-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=default]{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200)}.sui-notification:not([data-sui-style]),.sui-notification[data-sui-style=stroke]{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);box-shadow:var(--sui-custom-shadow-small)}.sui-notification:not([data-sui-style]) .sui-notification__title,.sui-notification[data-sui-style=stroke] .sui-notification__title{color:var(--sui-text-strong-950)}.sui-notification:not([data-sui-style]) .sui-notification__description,.sui-notification[data-sui-style=stroke] .sui-notification__description{color:var(--sui-text-sub-600)}.sui-notification:not([data-sui-style]) .sui-notification__close,.sui-notification[data-sui-style=stroke] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification:not([data-sui-style])[data-sui-variant=info] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification:not([data-sui-style])[data-sui-variant=success] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification:not([data-sui-style])[data-sui-variant=warning] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification:not([data-sui-style])[data-sui-variant=error] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification:not([data-sui-style])[data-sui-variant=feature] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification__avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--sui-bg-strong-950)}.sui-notification__avatar img{width:100%;height:100%;object-fit:cover;display:block}.sui-notification__avatar-initials{font-family:var(--sui-font-sans);font-size:14px;font-weight:600;line-height:1;color:var(--sui-text-white-0);text-transform:uppercase;letter-spacing:.02em;-webkit-user-select:none;user-select:none}.sui-notification__icon{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;margin-top:2px}.sui-notification__content{display:flex;flex:1 0 0;flex-direction:column;gap:4px;min-width:0}.sui-notification__header{display:flex;align-items:center;gap:6px;min-width:0}.sui-notification__title{margin:0;flex:1 0 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;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-notification__dot{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--sui-primary-base)}.sui-notification__time{flex-shrink:0;margin-left:auto;font-family:var(--sui-font-sans);font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-soft-400);white-space:nowrap}.sui-notification__description{margin:0;font-family:var(--sui-font-sans);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);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}.sui-notification__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}.sui-notification__actions:empty{display:none}.sui-notification__close{flex-shrink:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification__close:hover{opacity:1!important}.sui-notification--hoverable{cursor:pointer;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification--hoverable .sui-notification__more{opacity:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification--hoverable:hover,.sui-notification--hoverable.sui-notification--active{background:var(--sui-bg-weak-50)}.sui-notification--hoverable:hover .sui-notification__more,.sui-notification--hoverable.sui-notification--active .sui-notification__more{opacity:1}.sui-notification__description{display:flex;align-items:center;flex-wrap:wrap;gap:4px}.sui-notification__meta-time{flex-shrink:0;color:var(--sui-text-soft-400)}.sui-notification__sep{flex-shrink:0;color:var(--sui-text-soft-400);-webkit-user-select:none;user-select:none}.sui-notification__company-logo{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sui-notification__company-logo:empty{display:none}.sui-notification__company-logo ::ng-deep img,.sui-notification__company-logo ::ng-deep svg{width:16px;height:16px;border-radius:var(--sui-radius-full);object-fit:cover;display:block}.sui-notification__desc-text{min-width:0}.sui-notification__file{margin-top:8px;border-radius:var(--sui-radius-8);border:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-shadow:var(--sui-custom-shadow-x-small);overflow:hidden;box-sizing:border-box}.sui-notification__file:empty{display:none}.sui-notification__bubble{margin-top:8px;padding:8px 12px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);border-radius:4px 8px 10px;box-sizing:border-box;font-family:var(--sui-font-sans);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-notification__bubble:empty{display:none}.sui-notification__more{position:absolute;top:12px;right:12px;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiCompactButton, selector: "sui-compact-button", inputs: ["icon", "variantStyle", "size", "fullRadius", "disabled", "href", "target", "rel", "type", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11113
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiNotification, isStandalone: true, selector: "sui-notification", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, variantStyle: { classPropertyName: "variantStyle", publicName: "variantStyle", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, timestamp: { classPropertyName: "timestamp", publicName: "timestamp", isSignal: true, isRequired: false, transformFunction: null }, avatarSrc: { classPropertyName: "avatarSrc", publicName: "avatarSrc", isSignal: true, isRequired: false, transformFunction: null }, avatarInitials: { classPropertyName: "avatarInitials", publicName: "avatarInitials", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, unread: { classPropertyName: "unread", publicName: "unread", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, showMore: { classPropertyName: "showMore", publicName: "showMore", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed", moreClicked: "moreClicked" }, host: { properties: { "attr.title": "null", "attr.data-sui-show-more": "showMore() ? \"\" : null" } }, ngImport: i0, template: "<div\n class=\"sui-notification\"\n [class.sui-notification--hoverable]=\"showMore()\"\n [class.sui-notification--active]=\"active()\"\n [class.sui-notification--has-avatar]=\"hasAvatar()\"\n [attr.data-sui-variant]=\"variant()\"\n [attr.data-sui-style]=\"variantStyle()\"\n [attr.data-sui-type]=\"type()\"\n [attr.role]=\"role()\"\n [attr.aria-live]=\"ariaLive()\"\n>\n <!-- Leading: avatar OR status icon -->\n @if (hasAvatar()) {\n <div class=\"sui-notification__avatar\" aria-hidden=\"true\">\n @if (avatarSrc()) {\n <img [src]=\"avatarSrc()\" alt=\"\" />\n } @else {\n <span class=\"sui-notification__avatar-initials\">{{ avatarInitials() }}</span>\n }\n </div>\n } @else if (showLeadingIcon()) {\n <div class=\"sui-notification__icon\" aria-hidden=\"true\">\n <sui-icon [name]=\"iconName()\" [size]=\"20\" />\n </div>\n }\n\n <div class=\"sui-notification__content\">\n <!-- Header: title + unread dot + timestamp -->\n <div class=\"sui-notification__header\">\n @if (title()) {\n <p class=\"sui-notification__title\">{{ title() }}</p>\n }\n @if (unread()) {\n <span class=\"sui-notification__dot\" aria-label=\"No le\u00EDdo\"></span>\n }\n @if (timestamp() && type() === 'basic' && !hasAvatar()) {\n <span class=\"sui-notification__time\">{{ timestamp() }}</span>\n }\n </div>\n\n <!-- Compound description: timestamp \u2219 company-logo \u2219 text.\n For type=basic the timestamp lives in the header (not here), so the\n description block must only render on real content \u2014 otherwise an\n empty <p> occupies a phantom 4px gap below the title. -->\n @if (description() || (timestamp() && (type() !== 'basic' || hasAvatar())) || type() !== 'basic') {\n <p class=\"sui-notification__description\">\n @if (timestamp() && (type() !== 'basic' || hasAvatar())) {\n <span class=\"sui-notification__meta-time\">{{ timestamp() }}</span>\n <span class=\"sui-notification__sep\" aria-hidden=\"true\">\u2219</span>\n }\n <span class=\"sui-notification__company-logo\">\n <ng-content select=\"[slot=company-logo]\" />\n </span>\n @if (description()) {\n <span class=\"sui-notification__desc-text\">{{ description() }}</span>\n }\n </p>\n }\n\n <!-- Type=file: attachment card -->\n @if (type() === 'file') {\n <div class=\"sui-notification__file\">\n <ng-content select=\"[slot=file]\" />\n </div>\n }\n\n <!-- Type=message: response bubble -->\n @if (type() === 'message') {\n <div class=\"sui-notification__bubble\">\n <ng-content select=\"[slot=message]\" />\n </div>\n }\n\n <!-- Free custom content -->\n <ng-content />\n\n <!-- Actions slot (also hosts type=button Deny/Approve pair) -->\n <div class=\"sui-notification__actions\">\n <ng-content select=\"[slot=actions]\" />\n </div>\n </div>\n\n <!-- Hover affordance: more-2-line (notification item) = COMPONENTE\n sui-compact-button (variantStyle ghost: transparent + hover bg-weak-50,\n radius-6, icon 20 = size large), NO un <button> maqueta. El posicionamiento\n absoluto y el reveal on-hover (opacity 0\u21921) los aporta `.sui-notification__more`. -->\n @if (showMore()) {\n <sui-compact-button\n class=\"sui-notification__more\"\n icon=\"more-2-line\"\n variantStyle=\"ghost\"\n size=\"large\"\n ariaLabel=\"M\u00E1s opciones\"\n (clicked)=\"onMore($event)\"\n />\n }\n\n @if (dismissible()) {\n <!-- Cierre = COMPONENTE sui-compact-button (variantStyle modifiable \u2192 el icono\n hereda el currentColor del per-style `.sui-notification__close`), NO un\n <button> maqueta. icon 16 = size medium (patr\u00F3n canon sui-alert). -->\n <sui-compact-button\n class=\"sui-notification__close\"\n icon=\"close-line\"\n variantStyle=\"modifiable\"\n size=\"medium\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"onDismiss()\"\n />\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-notification{position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:var(--sui-radius-12);overflow:hidden;border:1px solid transparent;box-sizing:border-box}.sui-notification.sui-notification--has-avatar{padding:12px;gap:15px}.sui-notification[data-sui-style=filled]{border:none;box-shadow:var(--sui-custom-shadow-small)}.sui-notification[data-sui-style=filled] .sui-notification__title,.sui-notification[data-sui-style=filled] .sui-notification__description,.sui-notification[data-sui-style=filled] .sui-notification__icon{color:var(--sui-static-white)}.sui-notification[data-sui-style=filled] .sui-notification__time,.sui-notification[data-sui-style=filled] .sui-notification__close{color:var(--sui-static-white);opacity:.72}.sui-notification[data-sui-style=filled] .sui-notification__dot{background:var(--sui-static-white)}.sui-notification[data-sui-style=filled][data-sui-variant=info]{background:var(--sui-state-information-base)}.sui-notification[data-sui-style=filled][data-sui-variant=success]{background:var(--sui-state-success-base)}.sui-notification[data-sui-style=filled][data-sui-variant=warning]{background:var(--sui-state-warning-base)}.sui-notification[data-sui-style=filled][data-sui-variant=error]{background:var(--sui-state-error-base)}.sui-notification[data-sui-style=filled][data-sui-variant=feature]{background:var(--sui-state-feature-base)}.sui-notification[data-sui-style=filled][data-sui-variant=default]{background:var(--sui-bg-strong-950)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__title,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__description,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__time,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__close{color:var(--sui-text-white-0)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__icon{color:var(--sui-icon-white-0)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__dot{background:var(--sui-text-white-0)}.sui-notification[data-sui-style=light]{border:none}.sui-notification[data-sui-style=light] .sui-notification__title,.sui-notification[data-sui-style=light] .sui-notification__description{color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=light] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=light][data-sui-variant=info]{background:var(--sui-state-information-light)}.sui-notification[data-sui-style=light][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification[data-sui-style=light][data-sui-variant=success]{background:var(--sui-state-success-light)}.sui-notification[data-sui-style=light][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification[data-sui-style=light][data-sui-variant=warning]{background:var(--sui-state-warning-light)}.sui-notification[data-sui-style=light][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification[data-sui-style=light][data-sui-variant=error]{background:var(--sui-state-error-light)}.sui-notification[data-sui-style=light][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification[data-sui-style=light][data-sui-variant=feature]{background:var(--sui-state-feature-light)}.sui-notification[data-sui-style=light][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification[data-sui-style=light][data-sui-variant=default]{background:var(--sui-bg-weak-50)}.sui-notification[data-sui-style=lighter] .sui-notification__title{color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=lighter] .sui-notification__description{color:var(--sui-text-strong-950);opacity:.72}.sui-notification[data-sui-style=lighter] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=lighter][data-sui-variant=info]{background:var(--sui-state-information-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=success]{background:var(--sui-state-success-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=warning]{background:var(--sui-state-warning-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=error]{background:var(--sui-state-error-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=feature]{background:var(--sui-state-feature-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=default]{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200)}.sui-notification:not([data-sui-style]),.sui-notification[data-sui-style=stroke]{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);box-shadow:var(--sui-custom-shadow-small)}.sui-notification:not([data-sui-style]) .sui-notification__title,.sui-notification[data-sui-style=stroke] .sui-notification__title{color:var(--sui-text-strong-950)}.sui-notification:not([data-sui-style]) .sui-notification__description,.sui-notification[data-sui-style=stroke] .sui-notification__description{color:var(--sui-text-sub-600)}.sui-notification:not([data-sui-style]) .sui-notification__close,.sui-notification[data-sui-style=stroke] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification:not([data-sui-style])[data-sui-variant=info] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification:not([data-sui-style])[data-sui-variant=success] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification:not([data-sui-style])[data-sui-variant=warning] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification:not([data-sui-style])[data-sui-variant=error] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification:not([data-sui-style])[data-sui-variant=feature] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification__avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--sui-bg-strong-950)}.sui-notification__avatar img{width:100%;height:100%;object-fit:cover;display:block}.sui-notification__avatar-initials{font-family:var(--sui-font-sans);font-size:14px;font-weight:600;line-height:1;color:var(--sui-text-white-0);text-transform:uppercase;letter-spacing:.02em;-webkit-user-select:none;user-select:none}.sui-notification__icon{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;margin-top:2px}.sui-notification__content{display:flex;flex:1 0 0;flex-direction:column;gap:4px;min-width:0}.sui-notification__header{display:flex;align-items:center;gap:6px;min-width:0}.sui-notification__title{margin:0;flex:1 0 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;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-notification__dot{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--sui-primary-base)}:host([data-sui-show-more]) .sui-notification__time{margin-right:32px}.sui-notification__time{flex-shrink:0;margin-left:auto;font-family:var(--sui-font-sans);font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-soft-400);white-space:nowrap}.sui-notification__description{margin:0;font-family:var(--sui-font-sans);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);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}.sui-notification__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}.sui-notification__actions:empty{display:none}.sui-notification__close{flex-shrink:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification__close:hover{opacity:1!important}.sui-notification--hoverable{cursor:pointer;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification--hoverable .sui-notification__more{opacity:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification--hoverable:hover,.sui-notification--hoverable.sui-notification--active{background:var(--sui-bg-weak-50)}.sui-notification--hoverable:hover .sui-notification__more,.sui-notification--hoverable.sui-notification--active .sui-notification__more{opacity:1}.sui-notification__description{display:flex;align-items:center;flex-wrap:wrap;gap:4px}.sui-notification__meta-time{flex-shrink:0;color:var(--sui-text-soft-400)}.sui-notification__sep{flex-shrink:0;color:var(--sui-text-soft-400);-webkit-user-select:none;user-select:none}.sui-notification__company-logo{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sui-notification__company-logo:empty{display:none}.sui-notification__company-logo ::ng-deep img,.sui-notification__company-logo ::ng-deep svg{width:16px;height:16px;border-radius:var(--sui-radius-full);object-fit:cover;display:block}.sui-notification__desc-text{min-width:0}.sui-notification__file{margin-top:8px;border-radius:var(--sui-radius-8);border:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-shadow:var(--sui-regular-shadow-x-small);overflow:hidden;box-sizing:border-box}.sui-notification__file:empty{display:none}.sui-notification__bubble{margin-top:8px;padding:8px 12px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);border-radius:4px 8px 10px;box-sizing:border-box;font-family:var(--sui-font-sans);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-notification__bubble:empty{display:none}.sui-notification__more{position:absolute;top:12px;right:12px;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiCompactButton, selector: "sui-compact-button", inputs: ["icon", "variantStyle", "size", "fullRadius", "disabled", "href", "target", "rel", "type", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11107
11114
|
}
|
|
11108
11115
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiNotification, decorators: [{
|
|
11109
11116
|
type: Component,
|
|
11110
11117
|
args: [{ selector: 'sui-notification', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiIcon, SuiCompactButton], host: {
|
|
11111
11118
|
/* Strip native `title` attr — patrón canon Ontop (ver CLAUDE.md). */
|
|
11112
11119
|
'[attr.title]': 'null',
|
|
11113
|
-
}, template: "<div\n class=\"sui-notification\"\n [class.sui-notification--hoverable]=\"showMore()\"\n [class.sui-notification--active]=\"active()\"\n [class.sui-notification--has-avatar]=\"hasAvatar()\"\n [attr.data-sui-variant]=\"variant()\"\n [attr.data-sui-style]=\"variantStyle()\"\n [attr.data-sui-type]=\"type()\"\n [attr.role]=\"role()\"\n [attr.aria-live]=\"ariaLive()\"\n>\n <!-- Leading: avatar OR status icon -->\n @if (hasAvatar()) {\n <div class=\"sui-notification__avatar\" aria-hidden=\"true\">\n @if (avatarSrc()) {\n <img [src]=\"avatarSrc()\" alt=\"\" />\n } @else {\n <span class=\"sui-notification__avatar-initials\">{{ avatarInitials() }}</span>\n }\n </div>\n } @else if (showLeadingIcon()) {\n <div class=\"sui-notification__icon\" aria-hidden=\"true\">\n <sui-icon [name]=\"iconName()\" [size]=\"20\" />\n </div>\n }\n\n <div class=\"sui-notification__content\">\n <!-- Header: title + unread dot + timestamp -->\n <div class=\"sui-notification__header\">\n @if (title()) {\n <p class=\"sui-notification__title\">{{ title() }}</p>\n }\n @if (unread()) {\n <span class=\"sui-notification__dot\" aria-label=\"No le\u00EDdo\"></span>\n }\n @if (timestamp() && type() === 'basic') {\n <span class=\"sui-notification__time\">{{ timestamp() }}</span>\n }\n </div>\n\n <!-- Compound description: timestamp \u2219 company-logo \u2219 text.\n For type=basic the timestamp lives in the header (not here), so the\n description block must only render on real content \u2014 otherwise an\n empty <p> occupies a phantom 4px gap below the title. -->\n @if (description() || (timestamp() && type() !== 'basic') || type() !== 'basic') {\n <p class=\"sui-notification__description\">\n @if (timestamp() && type() !== 'basic') {\n <span class=\"sui-notification__meta-time\">{{ timestamp() }}</span>\n <span class=\"sui-notification__sep\" aria-hidden=\"true\">\u2219</span>\n }\n <span class=\"sui-notification__company-logo\">\n <ng-content select=\"[slot=company-logo]\" />\n </span>\n @if (description()) {\n <span class=\"sui-notification__desc-text\">{{ description() }}</span>\n }\n </p>\n }\n\n <!-- Type=file: attachment card -->\n @if (type() === 'file') {\n <div class=\"sui-notification__file\">\n <ng-content select=\"[slot=file]\" />\n </div>\n }\n\n <!-- Type=message: response bubble -->\n @if (type() === 'message') {\n <div class=\"sui-notification__bubble\">\n <ng-content select=\"[slot=message]\" />\n </div>\n }\n\n <!-- Free custom content -->\n <ng-content />\n\n <!-- Actions slot (also hosts type=button Deny/Approve pair) -->\n <div class=\"sui-notification__actions\">\n <ng-content select=\"[slot=actions]\" />\n </div>\n </div>\n\n <!-- Hover affordance: more-2-line (notification item) = COMPONENTE\n sui-compact-button (variantStyle ghost: transparent + hover bg-weak-50,\n radius-6, icon 20 = size large), NO un <button> maqueta. El posicionamiento\n absoluto y el reveal on-hover (opacity 0\u21921) los aporta `.sui-notification__more`. -->\n @if (showMore()) {\n <sui-compact-button\n class=\"sui-notification__more\"\n icon=\"more-2-line\"\n variantStyle=\"ghost\"\n size=\"large\"\n ariaLabel=\"M\u00E1s opciones\"\n (clicked)=\"onMore($event)\"\n />\n }\n\n @if (dismissible()) {\n <!-- Cierre = COMPONENTE sui-compact-button (variantStyle modifiable \u2192 el icono\n hereda el currentColor del per-style `.sui-notification__close`), NO un\n <button> maqueta. icon 16 = size medium (patr\u00F3n canon sui-alert). -->\n <sui-compact-button\n class=\"sui-notification__close\"\n icon=\"close-line\"\n variantStyle=\"modifiable\"\n size=\"medium\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"onDismiss()\"\n />\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-notification{position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:var(--sui-radius-12);overflow:hidden;border:1px solid transparent;box-sizing:border-box}.sui-notification.sui-notification--has-avatar{padding:12px;gap:15px}.sui-notification[data-sui-style=filled]{border:none;box-shadow:var(--sui-custom-shadow-small)}.sui-notification[data-sui-style=filled] .sui-notification__title,.sui-notification[data-sui-style=filled] .sui-notification__description,.sui-notification[data-sui-style=filled] .sui-notification__icon{color:var(--sui-static-white)}.sui-notification[data-sui-style=filled] .sui-notification__time,.sui-notification[data-sui-style=filled] .sui-notification__close{color:var(--sui-static-white);opacity:.72}.sui-notification[data-sui-style=filled] .sui-notification__dot{background:var(--sui-static-white)}.sui-notification[data-sui-style=filled][data-sui-variant=info]{background:var(--sui-state-information-base)}.sui-notification[data-sui-style=filled][data-sui-variant=success]{background:var(--sui-state-success-base)}.sui-notification[data-sui-style=filled][data-sui-variant=warning]{background:var(--sui-state-warning-base)}.sui-notification[data-sui-style=filled][data-sui-variant=error]{background:var(--sui-state-error-base)}.sui-notification[data-sui-style=filled][data-sui-variant=feature]{background:var(--sui-state-feature-base)}.sui-notification[data-sui-style=filled][data-sui-variant=default]{background:var(--sui-bg-strong-950)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__title,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__description,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__time,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__close{color:var(--sui-text-white-0)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__icon{color:var(--sui-icon-white-0)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__dot{background:var(--sui-text-white-0)}.sui-notification[data-sui-style=light]{border:none}.sui-notification[data-sui-style=light] .sui-notification__title,.sui-notification[data-sui-style=light] .sui-notification__description{color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=light] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=light][data-sui-variant=info]{background:var(--sui-state-information-light)}.sui-notification[data-sui-style=light][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification[data-sui-style=light][data-sui-variant=success]{background:var(--sui-state-success-light)}.sui-notification[data-sui-style=light][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification[data-sui-style=light][data-sui-variant=warning]{background:var(--sui-state-warning-light)}.sui-notification[data-sui-style=light][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification[data-sui-style=light][data-sui-variant=error]{background:var(--sui-state-error-light)}.sui-notification[data-sui-style=light][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification[data-sui-style=light][data-sui-variant=feature]{background:var(--sui-state-feature-light)}.sui-notification[data-sui-style=light][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification[data-sui-style=light][data-sui-variant=default]{background:var(--sui-bg-weak-50)}.sui-notification[data-sui-style=lighter] .sui-notification__title{color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=lighter] .sui-notification__description{color:var(--sui-text-strong-950);opacity:.72}.sui-notification[data-sui-style=lighter] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=lighter][data-sui-variant=info]{background:var(--sui-state-information-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=success]{background:var(--sui-state-success-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=warning]{background:var(--sui-state-warning-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=error]{background:var(--sui-state-error-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=feature]{background:var(--sui-state-feature-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=default]{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200)}.sui-notification:not([data-sui-style]),.sui-notification[data-sui-style=stroke]{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);box-shadow:var(--sui-custom-shadow-small)}.sui-notification:not([data-sui-style]) .sui-notification__title,.sui-notification[data-sui-style=stroke] .sui-notification__title{color:var(--sui-text-strong-950)}.sui-notification:not([data-sui-style]) .sui-notification__description,.sui-notification[data-sui-style=stroke] .sui-notification__description{color:var(--sui-text-sub-600)}.sui-notification:not([data-sui-style]) .sui-notification__close,.sui-notification[data-sui-style=stroke] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification:not([data-sui-style])[data-sui-variant=info] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification:not([data-sui-style])[data-sui-variant=success] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification:not([data-sui-style])[data-sui-variant=warning] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification:not([data-sui-style])[data-sui-variant=error] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification:not([data-sui-style])[data-sui-variant=feature] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification__avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--sui-bg-strong-950)}.sui-notification__avatar img{width:100%;height:100%;object-fit:cover;display:block}.sui-notification__avatar-initials{font-family:var(--sui-font-sans);font-size:14px;font-weight:600;line-height:1;color:var(--sui-text-white-0);text-transform:uppercase;letter-spacing:.02em;-webkit-user-select:none;user-select:none}.sui-notification__icon{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;margin-top:2px}.sui-notification__content{display:flex;flex:1 0 0;flex-direction:column;gap:4px;min-width:0}.sui-notification__header{display:flex;align-items:center;gap:6px;min-width:0}.sui-notification__title{margin:0;flex:1 0 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;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-notification__dot{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--sui-primary-base)}.sui-notification__time{flex-shrink:0;margin-left:auto;font-family:var(--sui-font-sans);font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-soft-400);white-space:nowrap}.sui-notification__description{margin:0;font-family:var(--sui-font-sans);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);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}.sui-notification__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}.sui-notification__actions:empty{display:none}.sui-notification__close{flex-shrink:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification__close:hover{opacity:1!important}.sui-notification--hoverable{cursor:pointer;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification--hoverable .sui-notification__more{opacity:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification--hoverable:hover,.sui-notification--hoverable.sui-notification--active{background:var(--sui-bg-weak-50)}.sui-notification--hoverable:hover .sui-notification__more,.sui-notification--hoverable.sui-notification--active .sui-notification__more{opacity:1}.sui-notification__description{display:flex;align-items:center;flex-wrap:wrap;gap:4px}.sui-notification__meta-time{flex-shrink:0;color:var(--sui-text-soft-400)}.sui-notification__sep{flex-shrink:0;color:var(--sui-text-soft-400);-webkit-user-select:none;user-select:none}.sui-notification__company-logo{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sui-notification__company-logo:empty{display:none}.sui-notification__company-logo ::ng-deep img,.sui-notification__company-logo ::ng-deep svg{width:16px;height:16px;border-radius:var(--sui-radius-full);object-fit:cover;display:block}.sui-notification__desc-text{min-width:0}.sui-notification__file{margin-top:8px;border-radius:var(--sui-radius-8);border:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-shadow:var(--sui-custom-shadow-x-small);overflow:hidden;box-sizing:border-box}.sui-notification__file:empty{display:none}.sui-notification__bubble{margin-top:8px;padding:8px 12px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);border-radius:4px 8px 10px;box-sizing:border-box;font-family:var(--sui-font-sans);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-notification__bubble:empty{display:none}.sui-notification__more{position:absolute;top:12px;right:12px;flex-shrink:0}\n"] }]
|
|
11120
|
+
'[attr.data-sui-show-more]': 'showMore() ? "" : null',
|
|
11121
|
+
}, template: "<div\n class=\"sui-notification\"\n [class.sui-notification--hoverable]=\"showMore()\"\n [class.sui-notification--active]=\"active()\"\n [class.sui-notification--has-avatar]=\"hasAvatar()\"\n [attr.data-sui-variant]=\"variant()\"\n [attr.data-sui-style]=\"variantStyle()\"\n [attr.data-sui-type]=\"type()\"\n [attr.role]=\"role()\"\n [attr.aria-live]=\"ariaLive()\"\n>\n <!-- Leading: avatar OR status icon -->\n @if (hasAvatar()) {\n <div class=\"sui-notification__avatar\" aria-hidden=\"true\">\n @if (avatarSrc()) {\n <img [src]=\"avatarSrc()\" alt=\"\" />\n } @else {\n <span class=\"sui-notification__avatar-initials\">{{ avatarInitials() }}</span>\n }\n </div>\n } @else if (showLeadingIcon()) {\n <div class=\"sui-notification__icon\" aria-hidden=\"true\">\n <sui-icon [name]=\"iconName()\" [size]=\"20\" />\n </div>\n }\n\n <div class=\"sui-notification__content\">\n <!-- Header: title + unread dot + timestamp -->\n <div class=\"sui-notification__header\">\n @if (title()) {\n <p class=\"sui-notification__title\">{{ title() }}</p>\n }\n @if (unread()) {\n <span class=\"sui-notification__dot\" aria-label=\"No le\u00EDdo\"></span>\n }\n @if (timestamp() && type() === 'basic' && !hasAvatar()) {\n <span class=\"sui-notification__time\">{{ timestamp() }}</span>\n }\n </div>\n\n <!-- Compound description: timestamp \u2219 company-logo \u2219 text.\n For type=basic the timestamp lives in the header (not here), so the\n description block must only render on real content \u2014 otherwise an\n empty <p> occupies a phantom 4px gap below the title. -->\n @if (description() || (timestamp() && (type() !== 'basic' || hasAvatar())) || type() !== 'basic') {\n <p class=\"sui-notification__description\">\n @if (timestamp() && (type() !== 'basic' || hasAvatar())) {\n <span class=\"sui-notification__meta-time\">{{ timestamp() }}</span>\n <span class=\"sui-notification__sep\" aria-hidden=\"true\">\u2219</span>\n }\n <span class=\"sui-notification__company-logo\">\n <ng-content select=\"[slot=company-logo]\" />\n </span>\n @if (description()) {\n <span class=\"sui-notification__desc-text\">{{ description() }}</span>\n }\n </p>\n }\n\n <!-- Type=file: attachment card -->\n @if (type() === 'file') {\n <div class=\"sui-notification__file\">\n <ng-content select=\"[slot=file]\" />\n </div>\n }\n\n <!-- Type=message: response bubble -->\n @if (type() === 'message') {\n <div class=\"sui-notification__bubble\">\n <ng-content select=\"[slot=message]\" />\n </div>\n }\n\n <!-- Free custom content -->\n <ng-content />\n\n <!-- Actions slot (also hosts type=button Deny/Approve pair) -->\n <div class=\"sui-notification__actions\">\n <ng-content select=\"[slot=actions]\" />\n </div>\n </div>\n\n <!-- Hover affordance: more-2-line (notification item) = COMPONENTE\n sui-compact-button (variantStyle ghost: transparent + hover bg-weak-50,\n radius-6, icon 20 = size large), NO un <button> maqueta. El posicionamiento\n absoluto y el reveal on-hover (opacity 0\u21921) los aporta `.sui-notification__more`. -->\n @if (showMore()) {\n <sui-compact-button\n class=\"sui-notification__more\"\n icon=\"more-2-line\"\n variantStyle=\"ghost\"\n size=\"large\"\n ariaLabel=\"M\u00E1s opciones\"\n (clicked)=\"onMore($event)\"\n />\n }\n\n @if (dismissible()) {\n <!-- Cierre = COMPONENTE sui-compact-button (variantStyle modifiable \u2192 el icono\n hereda el currentColor del per-style `.sui-notification__close`), NO un\n <button> maqueta. icon 16 = size medium (patr\u00F3n canon sui-alert). -->\n <sui-compact-button\n class=\"sui-notification__close\"\n icon=\"close-line\"\n variantStyle=\"modifiable\"\n size=\"medium\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"onDismiss()\"\n />\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-notification{position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:var(--sui-radius-12);overflow:hidden;border:1px solid transparent;box-sizing:border-box}.sui-notification.sui-notification--has-avatar{padding:12px;gap:15px}.sui-notification[data-sui-style=filled]{border:none;box-shadow:var(--sui-custom-shadow-small)}.sui-notification[data-sui-style=filled] .sui-notification__title,.sui-notification[data-sui-style=filled] .sui-notification__description,.sui-notification[data-sui-style=filled] .sui-notification__icon{color:var(--sui-static-white)}.sui-notification[data-sui-style=filled] .sui-notification__time,.sui-notification[data-sui-style=filled] .sui-notification__close{color:var(--sui-static-white);opacity:.72}.sui-notification[data-sui-style=filled] .sui-notification__dot{background:var(--sui-static-white)}.sui-notification[data-sui-style=filled][data-sui-variant=info]{background:var(--sui-state-information-base)}.sui-notification[data-sui-style=filled][data-sui-variant=success]{background:var(--sui-state-success-base)}.sui-notification[data-sui-style=filled][data-sui-variant=warning]{background:var(--sui-state-warning-base)}.sui-notification[data-sui-style=filled][data-sui-variant=error]{background:var(--sui-state-error-base)}.sui-notification[data-sui-style=filled][data-sui-variant=feature]{background:var(--sui-state-feature-base)}.sui-notification[data-sui-style=filled][data-sui-variant=default]{background:var(--sui-bg-strong-950)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__title,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__description,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__time,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__close{color:var(--sui-text-white-0)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__icon{color:var(--sui-icon-white-0)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__dot{background:var(--sui-text-white-0)}.sui-notification[data-sui-style=light]{border:none}.sui-notification[data-sui-style=light] .sui-notification__title,.sui-notification[data-sui-style=light] .sui-notification__description{color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=light] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=light][data-sui-variant=info]{background:var(--sui-state-information-light)}.sui-notification[data-sui-style=light][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification[data-sui-style=light][data-sui-variant=success]{background:var(--sui-state-success-light)}.sui-notification[data-sui-style=light][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification[data-sui-style=light][data-sui-variant=warning]{background:var(--sui-state-warning-light)}.sui-notification[data-sui-style=light][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification[data-sui-style=light][data-sui-variant=error]{background:var(--sui-state-error-light)}.sui-notification[data-sui-style=light][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification[data-sui-style=light][data-sui-variant=feature]{background:var(--sui-state-feature-light)}.sui-notification[data-sui-style=light][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification[data-sui-style=light][data-sui-variant=default]{background:var(--sui-bg-weak-50)}.sui-notification[data-sui-style=lighter] .sui-notification__title{color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=lighter] .sui-notification__description{color:var(--sui-text-strong-950);opacity:.72}.sui-notification[data-sui-style=lighter] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=lighter][data-sui-variant=info]{background:var(--sui-state-information-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=success]{background:var(--sui-state-success-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=warning]{background:var(--sui-state-warning-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=error]{background:var(--sui-state-error-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=feature]{background:var(--sui-state-feature-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=default]{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200)}.sui-notification:not([data-sui-style]),.sui-notification[data-sui-style=stroke]{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);box-shadow:var(--sui-custom-shadow-small)}.sui-notification:not([data-sui-style]) .sui-notification__title,.sui-notification[data-sui-style=stroke] .sui-notification__title{color:var(--sui-text-strong-950)}.sui-notification:not([data-sui-style]) .sui-notification__description,.sui-notification[data-sui-style=stroke] .sui-notification__description{color:var(--sui-text-sub-600)}.sui-notification:not([data-sui-style]) .sui-notification__close,.sui-notification[data-sui-style=stroke] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification:not([data-sui-style])[data-sui-variant=info] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification:not([data-sui-style])[data-sui-variant=success] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification:not([data-sui-style])[data-sui-variant=warning] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification:not([data-sui-style])[data-sui-variant=error] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification:not([data-sui-style])[data-sui-variant=feature] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification__avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--sui-bg-strong-950)}.sui-notification__avatar img{width:100%;height:100%;object-fit:cover;display:block}.sui-notification__avatar-initials{font-family:var(--sui-font-sans);font-size:14px;font-weight:600;line-height:1;color:var(--sui-text-white-0);text-transform:uppercase;letter-spacing:.02em;-webkit-user-select:none;user-select:none}.sui-notification__icon{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;margin-top:2px}.sui-notification__content{display:flex;flex:1 0 0;flex-direction:column;gap:4px;min-width:0}.sui-notification__header{display:flex;align-items:center;gap:6px;min-width:0}.sui-notification__title{margin:0;flex:1 0 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;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-notification__dot{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--sui-primary-base)}:host([data-sui-show-more]) .sui-notification__time{margin-right:32px}.sui-notification__time{flex-shrink:0;margin-left:auto;font-family:var(--sui-font-sans);font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-soft-400);white-space:nowrap}.sui-notification__description{margin:0;font-family:var(--sui-font-sans);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);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}.sui-notification__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}.sui-notification__actions:empty{display:none}.sui-notification__close{flex-shrink:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification__close:hover{opacity:1!important}.sui-notification--hoverable{cursor:pointer;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification--hoverable .sui-notification__more{opacity:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification--hoverable:hover,.sui-notification--hoverable.sui-notification--active{background:var(--sui-bg-weak-50)}.sui-notification--hoverable:hover .sui-notification__more,.sui-notification--hoverable.sui-notification--active .sui-notification__more{opacity:1}.sui-notification__description{display:flex;align-items:center;flex-wrap:wrap;gap:4px}.sui-notification__meta-time{flex-shrink:0;color:var(--sui-text-soft-400)}.sui-notification__sep{flex-shrink:0;color:var(--sui-text-soft-400);-webkit-user-select:none;user-select:none}.sui-notification__company-logo{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sui-notification__company-logo:empty{display:none}.sui-notification__company-logo ::ng-deep img,.sui-notification__company-logo ::ng-deep svg{width:16px;height:16px;border-radius:var(--sui-radius-full);object-fit:cover;display:block}.sui-notification__desc-text{min-width:0}.sui-notification__file{margin-top:8px;border-radius:var(--sui-radius-8);border:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-shadow:var(--sui-regular-shadow-x-small);overflow:hidden;box-sizing:border-box}.sui-notification__file:empty{display:none}.sui-notification__bubble{margin-top:8px;padding:8px 12px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);border-radius:4px 8px 10px;box-sizing:border-box;font-family:var(--sui-font-sans);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-notification__bubble:empty{display:none}.sui-notification__more{position:absolute;top:12px;right:12px;flex-shrink:0}\n"] }]
|
|
11114
11122
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], variantStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "variantStyle", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], timestamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "timestamp", required: false }] }], avatarSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarSrc", required: false }] }], avatarInitials: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarInitials", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], unread: [{ type: i0.Input, args: [{ isSignal: true, alias: "unread", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], showMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMore", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], moreClicked: [{ type: i0.Output, args: ["moreClicked"] }] } });
|
|
11115
11123
|
|
|
11116
11124
|
/**
|
|
@@ -11984,7 +11992,7 @@ class SuiRadioCard {
|
|
|
11984
11992
|
useExisting: forwardRef(() => SuiRadioCard),
|
|
11985
11993
|
multi: true,
|
|
11986
11994
|
},
|
|
11987
|
-
], ngImport: i0, template: "<!-- Leading slot \u2014 solo basic / left-icon / avatar (Figma 515:4356/4365) -->\n@if (type() === 'left-icon') {\n <div class=\"sui-radio-card__leading sui-radio-card__leading--icon\" aria-hidden=\"true\">\n @if (icon()) {\n <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n } @else if (emoji()) {\n <sui-emoji [name]=\"emoji()\" size=\"md\" />\n } @else if (iconSrc()) {\n <sui-emoji [src]=\"iconSrc()\" size=\"full\" />\n }\n </div>\n} @else if (type() === 'avatar') {\n <!-- sui-avatar maneja fallback autom\u00E1tico a iniciales si la imagen falla. -->\n <sui-avatar\n class=\"sui-radio-card__leading sui-radio-card__leading--avatar\"\n size=\"lg\"\n [src]=\"imageUrl()\"\n [initials]=\"initialsFromLabel()\" />\n}\n\n<!-- Texto: Title row + description -->\n<div class=\"sui-radio-card__text\">\n <div class=\"sui-radio-card__title\">\n @if (label()) {\n <span class=\"sui-radio-card__label\">{{ label() }}</span>\n }\n @if (sublabel()) {\n <span class=\"sui-radio-card__sublabel\">{{ sublabel() }}</span>\n }\n @if (badge()) {\n <span class=\"sui-radio-card__badge\">{{ badgeLabel() }}</span>\n }\n </div>\n @if (description()) {\n <p class=\"sui-radio-card__description\">{{ description() }}</p>\n }\n</div>\n\n<!-- Radio dot 20\u00D720 (Figma 515:4243 \u2192 515:4244 bg + 515:4245 box) -->\n<span class=\"sui-radio-card__radio\" aria-hidden=\"true\" [style.width.px]=\"radioPx()\" [style.height.px]=\"radioPx()\">\n <span class=\"sui-radio-card__radio-bg\"></span>\n <span class=\"sui-radio-card__radio-box\"></span>\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;box-sizing:border-box;align-items:flex-start;gap:14px;padding:16px;width:100%;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-12, 12px);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));cursor:pointer;outline:none;-webkit-user-select:none;user-select:none;font-family:var(--sui-font-sans, var(--font-sans, sans-serif));touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),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),transform var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}@media(hover:hover)and (pointer:fine){:host(:hover:not([data-sui-disabled]):not([data-sui-checked])){background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent;box-shadow:none}}:host([data-sui-checked]){border-color:var(--sui-primary-base, #fa7319);box-shadow:none;background:var(--sui-bg-white-0, #fff)}@media(hover:hover)and (pointer:fine){:host([data-sui-checked]:hover:not([data-sui-disabled])){background:var(--sui-bg-weak-50, #f7f7f7)}}:host(:focus-visible:not([data-sui-disabled])){border-color:var(--sui-primary-base, #fa7319);box-shadow:0 0 0 3px color-mix(in oklab,var(--sui-primary-base, #fa7319) 16%,transparent)}:host([data-sui-disabled]){cursor:not-allowed;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);box-shadow:none}:host([data-sui-disabled]) .sui-radio-card__label{color:var(--sui-text-sub-600, #5c5c5c)}:host([data-sui-disabled]) .sui-radio-card__sublabel,:host([data-sui-disabled]) .sui-radio-card__description{color:var(--sui-text-soft-400, #a3a3a3)}:host([data-sui-disabled]) .sui-radio-card__badge{background:transparent;border:1px solid var(--sui-stroke-soft-200, #ebebeb);color:var(--sui-text-disabled-300, #d1d1d1)}:host([data-sui-disabled]) .sui-radio-card__radio-bg,:host([data-sui-disabled][data-sui-checked]) .sui-radio-card__radio-bg{background:var(--sui-bg-soft-200, #ebebeb)}:host([data-sui-disabled]:not([data-sui-checked])) .sui-radio-card__radio-box{display:none}:host(:active:not([data-sui-disabled])){transform:scale(.99)}.sui-radio-card__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.sui-radio-card__leading--icon{box-sizing:border-box;width:40px;height:40px;padding:10px;border-radius:var(--sui-radius-full, 999px);background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));color:var(--sui-text-sub-600, #5c5c5c)}:host([data-sui-leading-fill]) .sui-radio-card__leading--icon{padding:0;border:none;background:none;box-shadow:none;border-radius:0;overflow:visible;display:flex;align-items:center;justify-content:center}:host([data-sui-leading-fill]) .sui-radio-card__leading--icon sui-emoji{display:block;width:100%;height:100%}:host([data-sui-type=avatar]) .sui-radio-card__leading--avatar{width:40px;height:40px}.sui-radio-card__text{display:flex;flex-direction:column;gap:4px;align-items:flex-start;flex:1 1 auto;min-width:0;align-self:stretch}.sui-radio-card__text:not(:has(.sui-radio-card__description)){justify-content:center}.sui-radio-card__title{display:flex;gap:4px;align-items:center;flex-wrap:wrap}.sui-radio-card__label{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-radio-card__sublabel{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-radio-card__description{margin:0;font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-radio-card__badge{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border-radius:var(--sui-radius-full, 999px);background:var(--sui-state-information-light, #c0d5ff);color:var(--sui-state-information-dark, #122368);font-size:11px;font-weight:500;line-height:12px;letter-spacing:.22px;text-transform:uppercase;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap}.sui-radio-card__radio{position:relative;flex-shrink:0;width:20px;height:20px;align-self:flex-start}.sui-radio-card__radio-bg{position:absolute;inset:10%;border-radius:var(--sui-radius-full, 999px);background:var(--sui-bg-soft-200, #ebebeb);transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}.sui-radio-card__radio-box{position:absolute;inset:17.5%;border-radius:var(--sui-radius-full, 999px);background:var(--sui-bg-white-0, #fff);box-shadow:0 2px 4px -2px #1b1c1d1f;transition:inset 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)}@media(hover:hover)and (pointer:fine){:host(:hover:not([data-sui-disabled]):not([data-sui-checked])) .sui-radio-card__radio-bg{background:var(--sui-bg-sub-300, #d1d1d1)}}:host([data-sui-checked]) .sui-radio-card__radio-bg{background:var(--sui-primary-base, #fa7319)}:host([data-sui-checked]) .sui-radio-card__radio-box{inset:30%;box-shadow:none}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiEmoji, selector: "sui-emoji", inputs: ["name", "src", "size", "ariaLabel"] }, { kind: "component", type: SuiAvatar, selector: "sui-avatar", inputs: ["size", "src", "alt", "initials", "color", "status", "memojiSrc", "illustrationSrc", "icon", "companyLogoSrc", "topBadge", "bgColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11995
|
+
], ngImport: i0, template: "<!-- Leading slot \u2014 solo basic / left-icon / avatar (Figma 515:4356/4365) -->\n@if (type() === 'left-icon') {\n <div class=\"sui-radio-card__leading sui-radio-card__leading--icon\" aria-hidden=\"true\">\n @if (icon()) {\n <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n } @else if (emoji()) {\n <sui-emoji [name]=\"emoji()\" size=\"md\" />\n } @else if (iconSrc()) {\n <sui-emoji [src]=\"iconSrc()\" size=\"full\" />\n }\n </div>\n} @else if (type() === 'avatar') {\n <!-- sui-avatar maneja fallback autom\u00E1tico a iniciales si la imagen falla. -->\n <sui-avatar\n class=\"sui-radio-card__leading sui-radio-card__leading--avatar\"\n size=\"lg\"\n [src]=\"imageUrl()\"\n [initials]=\"initialsFromLabel()\" />\n}\n\n<!-- Texto: Title row + description -->\n<div class=\"sui-radio-card__text\">\n <div class=\"sui-radio-card__title\">\n @if (label()) {\n <span class=\"sui-radio-card__label\">{{ label() }}</span>\n }\n @if (sublabel()) {\n <span class=\"sui-radio-card__sublabel\">{{ sublabel() }}</span>\n }\n @if (badge()) {\n <span class=\"sui-radio-card__badge\">{{ badgeLabel() }}</span>\n }\n </div>\n @if (description()) {\n <p class=\"sui-radio-card__description\">{{ description() }}</p>\n }\n</div>\n\n<!-- Radio dot 20\u00D720 (Figma 515:4243 \u2192 515:4244 bg + 515:4245 box) -->\n<span class=\"sui-radio-card__radio\" aria-hidden=\"true\" [style.width.px]=\"radioPx()\" [style.height.px]=\"radioPx()\">\n <span class=\"sui-radio-card__radio-bg\"></span>\n <span class=\"sui-radio-card__radio-box\"></span>\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;box-sizing:border-box;align-items:flex-start;gap:14px;padding:16px;width:100%;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-12, 12px);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));cursor:pointer;outline:none;-webkit-user-select:none;user-select:none;font-family:var(--sui-font-sans, var(--font-sans, sans-serif));touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),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),transform var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}@media(hover:hover)and (pointer:fine){:host(:hover:not([data-sui-disabled]):not([data-sui-checked])){background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent;box-shadow:none}}:host([data-sui-checked]){border-color:var(--sui-primary-base, #fa7319);box-shadow:none;background:var(--sui-bg-white-0, #fff)}@media(hover:hover)and (pointer:fine){:host([data-sui-checked]:hover:not([data-sui-disabled])){background:var(--sui-bg-weak-50, #f7f7f7)}}:host(:focus-visible:not([data-sui-disabled])){border-color:var(--sui-primary-base, #fa7319);box-shadow:0 0 0 3px color-mix(in oklab,var(--sui-primary-base, #fa7319) 16%,transparent)}:host([data-sui-disabled]){cursor:not-allowed;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);box-shadow:none}:host([data-sui-disabled]) .sui-radio-card__label{color:var(--sui-text-sub-600, #5c5c5c)}:host([data-sui-disabled]) .sui-radio-card__sublabel,:host([data-sui-disabled]) .sui-radio-card__description{color:var(--sui-text-soft-400, #a3a3a3)}:host([data-sui-disabled]) .sui-radio-card__badge{background:transparent;border:1px solid var(--sui-stroke-soft-200, #ebebeb);color:var(--sui-text-disabled-300, #d1d1d1)}:host([data-sui-disabled]) .sui-radio-card__radio-bg,:host([data-sui-disabled][data-sui-checked]) .sui-radio-card__radio-bg{background:var(--sui-bg-soft-200, #ebebeb)}:host([data-sui-disabled]:not([data-sui-checked])) .sui-radio-card__radio-box{display:none}:host(:active:not([data-sui-disabled])){transform:scale(.99)}.sui-radio-card__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.sui-radio-card__leading--icon{box-sizing:border-box;width:40px;height:40px;padding:10px;border-radius:var(--sui-radius-full, 999px);background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));color:var(--sui-text-sub-600, #5c5c5c)}:host([data-sui-leading-fill]) .sui-radio-card__leading--icon{padding:0;border:none;background:none;box-shadow:none;border-radius:0;overflow:visible;display:flex;align-items:center;justify-content:center}:host([data-sui-leading-fill]) .sui-radio-card__leading--icon sui-emoji{display:block;width:100%;height:100%}:host([data-sui-type=avatar]) .sui-radio-card__leading--avatar{width:40px;height:40px}.sui-radio-card__text{display:flex;flex-direction:column;gap:4px;align-items:flex-start;flex:1 1 auto;min-width:0;align-self:stretch}.sui-radio-card__text:not(:has(.sui-radio-card__description)){justify-content:center}.sui-radio-card__title{display:flex;gap:4px;align-items:center;flex-wrap:wrap}.sui-radio-card__label{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-radio-card__sublabel{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-radio-card__description{margin:0;font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-radio-card__badge{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border-radius:var(--sui-radius-full, 999px);background:var(--sui-state-information-light, #c0d5ff);color:var(--sui-state-information-dark, #122368);font-size:11px;font-weight:500;line-height:12px;letter-spacing:.22px;text-transform:uppercase;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap}.sui-radio-card__radio{position:relative;flex-shrink:0;width:20px;height:20px;align-self:flex-start}.sui-radio-card__radio-bg{position:absolute;inset:10%;border-radius:var(--sui-radius-full, 999px);background:var(--sui-bg-soft-200, #ebebeb);transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}.sui-radio-card__radio-box{position:absolute;inset:17.5%;border-radius:var(--sui-radius-full, 999px);background:var(--sui-bg-white-0, #fff);box-shadow:0 2px 4px -2px #1b1c1d1f;transition:inset 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)}@media(hover:hover)and (pointer:fine){:host(:hover:not([data-sui-disabled]):not([data-sui-checked])) .sui-radio-card__radio-bg{background:var(--sui-bg-sub-300, #d1d1d1)}}:host([data-sui-checked]) .sui-radio-card__radio-bg{background:var(--sui-primary-base, #fa7319)}:host([data-sui-checked]) .sui-radio-card__radio-box{inset:30%;box-shadow:none;background:var(--sui-static-white, #ffffff)}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiEmoji, selector: "sui-emoji", inputs: ["name", "src", "size", "ariaLabel"] }, { kind: "component", type: SuiAvatar, selector: "sui-avatar", inputs: ["size", "src", "alt", "initials", "color", "status", "memojiSrc", "illustrationSrc", "icon", "companyLogoSrc", "topBadge", "bgColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11988
11996
|
}
|
|
11989
11997
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiRadioCard, decorators: [{
|
|
11990
11998
|
type: Component,
|
|
@@ -12014,7 +12022,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
12014
12022
|
/* iOS WKWebView fix — sin esto :active stickea 300-500ms en standalone pages */
|
|
12015
12023
|
'(touchstart)': '$event.currentTarget',
|
|
12016
12024
|
'(touchend)': '$any($event.currentTarget).blur()',
|
|
12017
|
-
}, template: "<!-- Leading slot \u2014 solo basic / left-icon / avatar (Figma 515:4356/4365) -->\n@if (type() === 'left-icon') {\n <div class=\"sui-radio-card__leading sui-radio-card__leading--icon\" aria-hidden=\"true\">\n @if (icon()) {\n <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n } @else if (emoji()) {\n <sui-emoji [name]=\"emoji()\" size=\"md\" />\n } @else if (iconSrc()) {\n <sui-emoji [src]=\"iconSrc()\" size=\"full\" />\n }\n </div>\n} @else if (type() === 'avatar') {\n <!-- sui-avatar maneja fallback autom\u00E1tico a iniciales si la imagen falla. -->\n <sui-avatar\n class=\"sui-radio-card__leading sui-radio-card__leading--avatar\"\n size=\"lg\"\n [src]=\"imageUrl()\"\n [initials]=\"initialsFromLabel()\" />\n}\n\n<!-- Texto: Title row + description -->\n<div class=\"sui-radio-card__text\">\n <div class=\"sui-radio-card__title\">\n @if (label()) {\n <span class=\"sui-radio-card__label\">{{ label() }}</span>\n }\n @if (sublabel()) {\n <span class=\"sui-radio-card__sublabel\">{{ sublabel() }}</span>\n }\n @if (badge()) {\n <span class=\"sui-radio-card__badge\">{{ badgeLabel() }}</span>\n }\n </div>\n @if (description()) {\n <p class=\"sui-radio-card__description\">{{ description() }}</p>\n }\n</div>\n\n<!-- Radio dot 20\u00D720 (Figma 515:4243 \u2192 515:4244 bg + 515:4245 box) -->\n<span class=\"sui-radio-card__radio\" aria-hidden=\"true\" [style.width.px]=\"radioPx()\" [style.height.px]=\"radioPx()\">\n <span class=\"sui-radio-card__radio-bg\"></span>\n <span class=\"sui-radio-card__radio-box\"></span>\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;box-sizing:border-box;align-items:flex-start;gap:14px;padding:16px;width:100%;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-12, 12px);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));cursor:pointer;outline:none;-webkit-user-select:none;user-select:none;font-family:var(--sui-font-sans, var(--font-sans, sans-serif));touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),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),transform var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}@media(hover:hover)and (pointer:fine){:host(:hover:not([data-sui-disabled]):not([data-sui-checked])){background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent;box-shadow:none}}:host([data-sui-checked]){border-color:var(--sui-primary-base, #fa7319);box-shadow:none;background:var(--sui-bg-white-0, #fff)}@media(hover:hover)and (pointer:fine){:host([data-sui-checked]:hover:not([data-sui-disabled])){background:var(--sui-bg-weak-50, #f7f7f7)}}:host(:focus-visible:not([data-sui-disabled])){border-color:var(--sui-primary-base, #fa7319);box-shadow:0 0 0 3px color-mix(in oklab,var(--sui-primary-base, #fa7319) 16%,transparent)}:host([data-sui-disabled]){cursor:not-allowed;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);box-shadow:none}:host([data-sui-disabled]) .sui-radio-card__label{color:var(--sui-text-sub-600, #5c5c5c)}:host([data-sui-disabled]) .sui-radio-card__sublabel,:host([data-sui-disabled]) .sui-radio-card__description{color:var(--sui-text-soft-400, #a3a3a3)}:host([data-sui-disabled]) .sui-radio-card__badge{background:transparent;border:1px solid var(--sui-stroke-soft-200, #ebebeb);color:var(--sui-text-disabled-300, #d1d1d1)}:host([data-sui-disabled]) .sui-radio-card__radio-bg,:host([data-sui-disabled][data-sui-checked]) .sui-radio-card__radio-bg{background:var(--sui-bg-soft-200, #ebebeb)}:host([data-sui-disabled]:not([data-sui-checked])) .sui-radio-card__radio-box{display:none}:host(:active:not([data-sui-disabled])){transform:scale(.99)}.sui-radio-card__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.sui-radio-card__leading--icon{box-sizing:border-box;width:40px;height:40px;padding:10px;border-radius:var(--sui-radius-full, 999px);background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));color:var(--sui-text-sub-600, #5c5c5c)}:host([data-sui-leading-fill]) .sui-radio-card__leading--icon{padding:0;border:none;background:none;box-shadow:none;border-radius:0;overflow:visible;display:flex;align-items:center;justify-content:center}:host([data-sui-leading-fill]) .sui-radio-card__leading--icon sui-emoji{display:block;width:100%;height:100%}:host([data-sui-type=avatar]) .sui-radio-card__leading--avatar{width:40px;height:40px}.sui-radio-card__text{display:flex;flex-direction:column;gap:4px;align-items:flex-start;flex:1 1 auto;min-width:0;align-self:stretch}.sui-radio-card__text:not(:has(.sui-radio-card__description)){justify-content:center}.sui-radio-card__title{display:flex;gap:4px;align-items:center;flex-wrap:wrap}.sui-radio-card__label{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-radio-card__sublabel{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-radio-card__description{margin:0;font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-radio-card__badge{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border-radius:var(--sui-radius-full, 999px);background:var(--sui-state-information-light, #c0d5ff);color:var(--sui-state-information-dark, #122368);font-size:11px;font-weight:500;line-height:12px;letter-spacing:.22px;text-transform:uppercase;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap}.sui-radio-card__radio{position:relative;flex-shrink:0;width:20px;height:20px;align-self:flex-start}.sui-radio-card__radio-bg{position:absolute;inset:10%;border-radius:var(--sui-radius-full, 999px);background:var(--sui-bg-soft-200, #ebebeb);transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}.sui-radio-card__radio-box{position:absolute;inset:17.5%;border-radius:var(--sui-radius-full, 999px);background:var(--sui-bg-white-0, #fff);box-shadow:0 2px 4px -2px #1b1c1d1f;transition:inset 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)}@media(hover:hover)and (pointer:fine){:host(:hover:not([data-sui-disabled]):not([data-sui-checked])) .sui-radio-card__radio-bg{background:var(--sui-bg-sub-300, #d1d1d1)}}:host([data-sui-checked]) .sui-radio-card__radio-bg{background:var(--sui-primary-base, #fa7319)}:host([data-sui-checked]) .sui-radio-card__radio-box{inset:30%;box-shadow:none}\n"] }]
|
|
12025
|
+
}, template: "<!-- Leading slot \u2014 solo basic / left-icon / avatar (Figma 515:4356/4365) -->\n@if (type() === 'left-icon') {\n <div class=\"sui-radio-card__leading sui-radio-card__leading--icon\" aria-hidden=\"true\">\n @if (icon()) {\n <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n } @else if (emoji()) {\n <sui-emoji [name]=\"emoji()\" size=\"md\" />\n } @else if (iconSrc()) {\n <sui-emoji [src]=\"iconSrc()\" size=\"full\" />\n }\n </div>\n} @else if (type() === 'avatar') {\n <!-- sui-avatar maneja fallback autom\u00E1tico a iniciales si la imagen falla. -->\n <sui-avatar\n class=\"sui-radio-card__leading sui-radio-card__leading--avatar\"\n size=\"lg\"\n [src]=\"imageUrl()\"\n [initials]=\"initialsFromLabel()\" />\n}\n\n<!-- Texto: Title row + description -->\n<div class=\"sui-radio-card__text\">\n <div class=\"sui-radio-card__title\">\n @if (label()) {\n <span class=\"sui-radio-card__label\">{{ label() }}</span>\n }\n @if (sublabel()) {\n <span class=\"sui-radio-card__sublabel\">{{ sublabel() }}</span>\n }\n @if (badge()) {\n <span class=\"sui-radio-card__badge\">{{ badgeLabel() }}</span>\n }\n </div>\n @if (description()) {\n <p class=\"sui-radio-card__description\">{{ description() }}</p>\n }\n</div>\n\n<!-- Radio dot 20\u00D720 (Figma 515:4243 \u2192 515:4244 bg + 515:4245 box) -->\n<span class=\"sui-radio-card__radio\" aria-hidden=\"true\" [style.width.px]=\"radioPx()\" [style.height.px]=\"radioPx()\">\n <span class=\"sui-radio-card__radio-bg\"></span>\n <span class=\"sui-radio-card__radio-box\"></span>\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;box-sizing:border-box;align-items:flex-start;gap:14px;padding:16px;width:100%;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-12, 12px);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));cursor:pointer;outline:none;-webkit-user-select:none;user-select:none;font-family:var(--sui-font-sans, var(--font-sans, sans-serif));touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),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),transform var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}@media(hover:hover)and (pointer:fine){:host(:hover:not([data-sui-disabled]):not([data-sui-checked])){background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent;box-shadow:none}}:host([data-sui-checked]){border-color:var(--sui-primary-base, #fa7319);box-shadow:none;background:var(--sui-bg-white-0, #fff)}@media(hover:hover)and (pointer:fine){:host([data-sui-checked]:hover:not([data-sui-disabled])){background:var(--sui-bg-weak-50, #f7f7f7)}}:host(:focus-visible:not([data-sui-disabled])){border-color:var(--sui-primary-base, #fa7319);box-shadow:0 0 0 3px color-mix(in oklab,var(--sui-primary-base, #fa7319) 16%,transparent)}:host([data-sui-disabled]){cursor:not-allowed;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);box-shadow:none}:host([data-sui-disabled]) .sui-radio-card__label{color:var(--sui-text-sub-600, #5c5c5c)}:host([data-sui-disabled]) .sui-radio-card__sublabel,:host([data-sui-disabled]) .sui-radio-card__description{color:var(--sui-text-soft-400, #a3a3a3)}:host([data-sui-disabled]) .sui-radio-card__badge{background:transparent;border:1px solid var(--sui-stroke-soft-200, #ebebeb);color:var(--sui-text-disabled-300, #d1d1d1)}:host([data-sui-disabled]) .sui-radio-card__radio-bg,:host([data-sui-disabled][data-sui-checked]) .sui-radio-card__radio-bg{background:var(--sui-bg-soft-200, #ebebeb)}:host([data-sui-disabled]:not([data-sui-checked])) .sui-radio-card__radio-box{display:none}:host(:active:not([data-sui-disabled])){transform:scale(.99)}.sui-radio-card__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.sui-radio-card__leading--icon{box-sizing:border-box;width:40px;height:40px;padding:10px;border-radius:var(--sui-radius-full, 999px);background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));color:var(--sui-text-sub-600, #5c5c5c)}:host([data-sui-leading-fill]) .sui-radio-card__leading--icon{padding:0;border:none;background:none;box-shadow:none;border-radius:0;overflow:visible;display:flex;align-items:center;justify-content:center}:host([data-sui-leading-fill]) .sui-radio-card__leading--icon sui-emoji{display:block;width:100%;height:100%}:host([data-sui-type=avatar]) .sui-radio-card__leading--avatar{width:40px;height:40px}.sui-radio-card__text{display:flex;flex-direction:column;gap:4px;align-items:flex-start;flex:1 1 auto;min-width:0;align-self:stretch}.sui-radio-card__text:not(:has(.sui-radio-card__description)){justify-content:center}.sui-radio-card__title{display:flex;gap:4px;align-items:center;flex-wrap:wrap}.sui-radio-card__label{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-radio-card__sublabel{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-radio-card__description{margin:0;font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-radio-card__badge{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border-radius:var(--sui-radius-full, 999px);background:var(--sui-state-information-light, #c0d5ff);color:var(--sui-state-information-dark, #122368);font-size:11px;font-weight:500;line-height:12px;letter-spacing:.22px;text-transform:uppercase;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap}.sui-radio-card__radio{position:relative;flex-shrink:0;width:20px;height:20px;align-self:flex-start}.sui-radio-card__radio-bg{position:absolute;inset:10%;border-radius:var(--sui-radius-full, 999px);background:var(--sui-bg-soft-200, #ebebeb);transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}.sui-radio-card__radio-box{position:absolute;inset:17.5%;border-radius:var(--sui-radius-full, 999px);background:var(--sui-bg-white-0, #fff);box-shadow:0 2px 4px -2px #1b1c1d1f;transition:inset 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)}@media(hover:hover)and (pointer:fine){:host(:hover:not([data-sui-disabled]):not([data-sui-checked])) .sui-radio-card__radio-bg{background:var(--sui-bg-sub-300, #d1d1d1)}}:host([data-sui-checked]) .sui-radio-card__radio-bg{background:var(--sui-primary-base, #fa7319)}:host([data-sui-checked]) .sui-radio-card__radio-box{inset:30%;box-shadow:none;background:var(--sui-static-white, #ffffff)}\n"] }]
|
|
12018
12026
|
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], emoji: [{ type: i0.Input, args: [{ isSignal: true, alias: "emoji", required: false }] }], iconSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSrc", required: false }] }], imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], badgeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
|
|
12019
12027
|
|
|
12020
12028
|
// large/xlarge: project extension (no-Figma)
|
|
@@ -12074,7 +12082,7 @@ class SuiRadio {
|
|
|
12074
12082
|
}
|
|
12075
12083
|
}
|
|
12076
12084
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12077
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: SuiRadio, isStandalone: true, selector: "sui-radio", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, standaloneChecked: { classPropertyName: "standaloneChecked", publicName: "standaloneChecked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { standaloneChecked: "standaloneCheckedChange" }, host: { listeners: { "click": "onToggle($event)", "keydown.space": "onToggle($event)", "keydown.enter": "onToggle($event)", "touchstart": "$event.currentTarget", "touchend": "$any($event.currentTarget).blur()" }, properties: { "attr.data-sui-size": "size()", "attr.data-sui-checked": "checked() ? \"\" : null", "attr.data-sui-disabled": "disabled() ? \"\" : null", "attr.role": "\"radio\"", "attr.aria-checked": "checked() ? \"true\" : \"false\"", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.tabindex": "disabled() ? \"-1\" : \"0\"" } }, ngImport: i0, template: "<span class=\"sui-radio__bg\">\n <span class=\"sui-radio__box\"></span>\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;cursor:pointer;outline:none;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host{width:20px;height:20px}.sui-radio__bg{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:999px;background:var(--sui-bg-soft-200);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-radio__box{position:absolute;background:var(--sui-bg-white-0);border-radius:999px;box-shadow:var(--sui-shadow-radio-box);width:13px;height:13px;transition:width var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),height var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-checked]) .sui-radio__box{width:8px;height:8px;box-shadow:none}:host(:hover:not([data-sui-disabled]):not([data-sui-checked])) .sui-radio__bg{background:var(--sui-bg-sub-300)}:host(:focus-visible:not([data-sui-disabled]):not([data-sui-checked])) .sui-radio__bg{background:var(--sui-primary-base)}:host([data-sui-checked]) .sui-radio__bg{background:var(--sui-primary-base)}:host([data-sui-checked]:hover:not([data-sui-disabled])) .sui-radio__bg{background:var(--sui-primary-dark)}:host([data-sui-checked]:focus-visible:not([data-sui-disabled])) .sui-radio__bg{background:var(--sui-primary-darkest)}:host([data-sui-disabled]){cursor:not-allowed;pointer-events:none}:host([data-sui-disabled]) .sui-radio__bg{background:var(--sui-bg-soft-200)}:host([data-sui-disabled]:not([data-sui-checked])) .sui-radio__box{display:none}:host([data-sui-size=large]){width:24px;height:24px}:host([data-sui-size=large]) .sui-radio__bg{width:20px;height:20px}:host([data-sui-size=large]) .sui-radio__box{width:17px;height:17px}:host([data-sui-size=large][data-sui-checked]) .sui-radio__box{width:10px;height:10px}:host([data-sui-size=xlarge]){width:28px;height:28px}:host([data-sui-size=xlarge]) .sui-radio__bg{width:24px;height:24px}:host([data-sui-size=xlarge]) .sui-radio__box{width:21px;height:21px}:host([data-sui-size=xlarge][data-sui-checked]) .sui-radio__box{width:12px;height:12px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12085
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: SuiRadio, isStandalone: true, selector: "sui-radio", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, standaloneChecked: { classPropertyName: "standaloneChecked", publicName: "standaloneChecked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { standaloneChecked: "standaloneCheckedChange" }, host: { listeners: { "click": "onToggle($event)", "keydown.space": "onToggle($event)", "keydown.enter": "onToggle($event)", "touchstart": "$event.currentTarget", "touchend": "$any($event.currentTarget).blur()" }, properties: { "attr.data-sui-size": "size()", "attr.data-sui-checked": "checked() ? \"\" : null", "attr.data-sui-disabled": "disabled() ? \"\" : null", "attr.role": "\"radio\"", "attr.aria-checked": "checked() ? \"true\" : \"false\"", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.tabindex": "disabled() ? \"-1\" : \"0\"" } }, ngImport: i0, template: "<span class=\"sui-radio__bg\">\n <span class=\"sui-radio__box\"></span>\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;cursor:pointer;outline:none;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host{width:20px;height:20px}.sui-radio__bg{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:999px;background:var(--sui-bg-soft-200);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-radio__box{position:absolute;background:var(--sui-bg-white-0);border-radius:999px;box-shadow:var(--sui-shadow-radio-box);width:13px;height:13px;transition:width var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),height var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-checked]) .sui-radio__box{width:8px;height:8px;box-shadow:none;background:var(--sui-static-white, #ffffff)}:host(:hover:not([data-sui-disabled]):not([data-sui-checked])) .sui-radio__bg{background:var(--sui-bg-sub-300)}:host(:focus-visible:not([data-sui-disabled]):not([data-sui-checked])) .sui-radio__bg{background:var(--sui-primary-base)}:host([data-sui-checked]) .sui-radio__bg{background:var(--sui-primary-base)}:host([data-sui-checked]:hover:not([data-sui-disabled])) .sui-radio__bg{background:var(--sui-primary-dark)}:host([data-sui-checked]:focus-visible:not([data-sui-disabled])) .sui-radio__bg{background:var(--sui-primary-darkest)}:host([data-sui-disabled]){cursor:not-allowed;pointer-events:none}:host([data-sui-disabled]) .sui-radio__bg{background:var(--sui-bg-soft-200)}:host([data-sui-disabled]:not([data-sui-checked])) .sui-radio__box{display:none}:host([data-sui-disabled][data-sui-checked]) .sui-radio__box{background:var(--sui-icon-disabled-300)}:host([data-sui-size=large]){width:24px;height:24px}:host([data-sui-size=large]) .sui-radio__bg{width:20px;height:20px}:host([data-sui-size=large]) .sui-radio__box{width:17px;height:17px}:host([data-sui-size=large][data-sui-checked]) .sui-radio__box{width:10px;height:10px}:host([data-sui-size=xlarge]){width:28px;height:28px}:host([data-sui-size=xlarge]) .sui-radio__bg{width:24px;height:24px}:host([data-sui-size=xlarge]) .sui-radio__box{width:21px;height:21px}:host([data-sui-size=xlarge][data-sui-checked]) .sui-radio__box{width:12px;height:12px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12078
12086
|
}
|
|
12079
12087
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiRadio, decorators: [{
|
|
12080
12088
|
type: Component,
|
|
@@ -12093,7 +12101,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
12093
12101
|
Sin estos listeners, :active stickea 300-500ms en pages standalone. */
|
|
12094
12102
|
'(touchstart)': '$event.currentTarget',
|
|
12095
12103
|
'(touchend)': '$any($event.currentTarget).blur()',
|
|
12096
|
-
}, template: "<span class=\"sui-radio__bg\">\n <span class=\"sui-radio__box\"></span>\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;cursor:pointer;outline:none;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host{width:20px;height:20px}.sui-radio__bg{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:999px;background:var(--sui-bg-soft-200);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-radio__box{position:absolute;background:var(--sui-bg-white-0);border-radius:999px;box-shadow:var(--sui-shadow-radio-box);width:13px;height:13px;transition:width var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),height var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-checked]) .sui-radio__box{width:8px;height:8px;box-shadow:none}:host(:hover:not([data-sui-disabled]):not([data-sui-checked])) .sui-radio__bg{background:var(--sui-bg-sub-300)}:host(:focus-visible:not([data-sui-disabled]):not([data-sui-checked])) .sui-radio__bg{background:var(--sui-primary-base)}:host([data-sui-checked]) .sui-radio__bg{background:var(--sui-primary-base)}:host([data-sui-checked]:hover:not([data-sui-disabled])) .sui-radio__bg{background:var(--sui-primary-dark)}:host([data-sui-checked]:focus-visible:not([data-sui-disabled])) .sui-radio__bg{background:var(--sui-primary-darkest)}:host([data-sui-disabled]){cursor:not-allowed;pointer-events:none}:host([data-sui-disabled]) .sui-radio__bg{background:var(--sui-bg-soft-200)}:host([data-sui-disabled]:not([data-sui-checked])) .sui-radio__box{display:none}:host([data-sui-size=large]){width:24px;height:24px}:host([data-sui-size=large]) .sui-radio__bg{width:20px;height:20px}:host([data-sui-size=large]) .sui-radio__box{width:17px;height:17px}:host([data-sui-size=large][data-sui-checked]) .sui-radio__box{width:10px;height:10px}:host([data-sui-size=xlarge]){width:28px;height:28px}:host([data-sui-size=xlarge]) .sui-radio__bg{width:24px;height:24px}:host([data-sui-size=xlarge]) .sui-radio__box{width:21px;height:21px}:host([data-sui-size=xlarge][data-sui-checked]) .sui-radio__box{width:12px;height:12px}\n"] }]
|
|
12104
|
+
}, template: "<span class=\"sui-radio__bg\">\n <span class=\"sui-radio__box\"></span>\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;cursor:pointer;outline:none;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host{width:20px;height:20px}.sui-radio__bg{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:999px;background:var(--sui-bg-soft-200);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-radio__box{position:absolute;background:var(--sui-bg-white-0);border-radius:999px;box-shadow:var(--sui-shadow-radio-box);width:13px;height:13px;transition:width var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),height var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-checked]) .sui-radio__box{width:8px;height:8px;box-shadow:none;background:var(--sui-static-white, #ffffff)}:host(:hover:not([data-sui-disabled]):not([data-sui-checked])) .sui-radio__bg{background:var(--sui-bg-sub-300)}:host(:focus-visible:not([data-sui-disabled]):not([data-sui-checked])) .sui-radio__bg{background:var(--sui-primary-base)}:host([data-sui-checked]) .sui-radio__bg{background:var(--sui-primary-base)}:host([data-sui-checked]:hover:not([data-sui-disabled])) .sui-radio__bg{background:var(--sui-primary-dark)}:host([data-sui-checked]:focus-visible:not([data-sui-disabled])) .sui-radio__bg{background:var(--sui-primary-darkest)}:host([data-sui-disabled]){cursor:not-allowed;pointer-events:none}:host([data-sui-disabled]) .sui-radio__bg{background:var(--sui-bg-soft-200)}:host([data-sui-disabled]:not([data-sui-checked])) .sui-radio__box{display:none}:host([data-sui-disabled][data-sui-checked]) .sui-radio__box{background:var(--sui-icon-disabled-300)}:host([data-sui-size=large]){width:24px;height:24px}:host([data-sui-size=large]) .sui-radio__bg{width:20px;height:20px}:host([data-sui-size=large]) .sui-radio__box{width:17px;height:17px}:host([data-sui-size=large][data-sui-checked]) .sui-radio__box{width:10px;height:10px}:host([data-sui-size=xlarge]){width:28px;height:28px}:host([data-sui-size=xlarge]) .sui-radio__bg{width:24px;height:24px}:host([data-sui-size=xlarge]) .sui-radio__box{width:21px;height:21px}:host([data-sui-size=xlarge][data-sui-checked]) .sui-radio__box{width:12px;height:12px}\n"] }]
|
|
12097
12105
|
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], standaloneChecked: [{ type: i0.Input, args: [{ isSignal: true, alias: "standaloneChecked", required: false }] }, { type: i0.Output, args: ["standaloneCheckedChange"] }] } });
|
|
12098
12106
|
|
|
12099
12107
|
/**
|
|
@@ -13195,7 +13203,7 @@ class SuiSidebar {
|
|
|
13195
13203
|
this.searchSubmitted.emit(this.searchValue());
|
|
13196
13204
|
}
|
|
13197
13205
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13198
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiSidebar, isStandalone: true, selector: "sui-sidebar", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, indicatorColor: { classPropertyName: "indicatorColor", publicName: "indicatorColor", isSignal: true, isRequired: false, transformFunction: null }, brandName: { classPropertyName: "brandName", publicName: "brandName", isSignal: true, isRequired: false, transformFunction: null }, brandSubtitle: { classPropertyName: "brandSubtitle", publicName: "brandSubtitle", isSignal: true, isRequired: false, transformFunction: null }, brandSubtitleAsBadge: { classPropertyName: "brandSubtitleAsBadge", publicName: "brandSubtitleAsBadge", isSignal: true, isRequired: false, transformFunction: null }, brandLogo: { classPropertyName: "brandLogo", publicName: "brandLogo", isSignal: true, isRequired: false, transformFunction: null }, brandFallback: { classPropertyName: "brandFallback", publicName: "brandFallback", isSignal: true, isRequired: false, transformFunction: null }, showHeaderButton: { classPropertyName: "showHeaderButton", publicName: "showHeaderButton", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchShortcut: { classPropertyName: "searchShortcut", publicName: "searchShortcut", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, secondaryItems: { classPropertyName: "secondaryItems", publicName: "secondaryItems", isSignal: true, isRequired: false, transformFunction: null }, supportingItems: { classPropertyName: "supportingItems", publicName: "supportingItems", isSignal: true, isRequired: false, transformFunction: null }, supportingAnchorBottom: { classPropertyName: "supportingAnchorBottom", publicName: "supportingAnchorBottom", isSignal: true, isRequired: false, transformFunction: null }, itemsLabel: { classPropertyName: "itemsLabel", publicName: "itemsLabel", isSignal: true, isRequired: false, transformFunction: null }, secondaryItemsLabel: { classPropertyName: "secondaryItemsLabel", publicName: "secondaryItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, supportingItemsLabel: { classPropertyName: "supportingItemsLabel", publicName: "supportingItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, activeRoute: { classPropertyName: "activeRoute", publicName: "activeRoute", isSignal: true, isRequired: false, transformFunction: null }, profile: { classPropertyName: "profile", publicName: "profile", isSignal: true, isRequired: false, transformFunction: null }, profileDropdown: { classPropertyName: "profileDropdown", publicName: "profileDropdown", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeOnNavigate: { classPropertyName: "closeOnNavigate", publicName: "closeOnNavigate", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null }, mobileMode: { classPropertyName: "mobileMode", publicName: "mobileMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchValue: "searchValueChange", open: "openChange", itemClicked: "itemClicked", logoutClicked: "logoutClicked", backdropClicked: "backdropClicked", headerButtonClicked: "headerButtonClicked", profileClicked: "profileClicked", searchSubmitted: "searchSubmitted" }, host: { properties: { "attr.title": "null", "attr.data-sui-open": "open() ? \"\" : null", "attr.data-sui-mobile-mode": "mobileMode()", "attr.data-sui-collapsed": "collapsed() ? \"\" : null", "attr.data-sui-indicator": "indicatorColor()" } }, ngImport: i0, template: "@if (showBackdrop() && open()) {\n <div class=\"sui-sidebar-backdrop\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\n}\n\n<aside\n class=\"sui-sidebar\"\n [class.sui-sidebar--open]=\"open()\"\n [class.sui-sidebar--collapsed]=\"collapsed()\"\n role=\"navigation\"\n [attr.aria-hidden]=\"!open() ? 'true' : null\"\n>\n <!-- \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <header class=\"sui-sidebar__header\">\n <div class=\"sui-sidebar__header-card\">\n <div class=\"sui-sidebar__brand-logo\">\n @if (brandLogo()) {\n <img [src]=\"brandLogo()\" [alt]=\"brandName()\" referrerpolicy=\"no-referrer\" />\n } @else if (brandFallback()) {\n <span class=\"sui-sidebar__brand-fallback\">{{ brandFallback() }}</span>\n } @else {\n <sui-icon name=\"building-line\" [size]=\"20\" />\n }\n </div>\n @if (!collapsed()) {\n <div class=\"sui-sidebar__header-info\">\n <span class=\"sui-sidebar__header-name\">{{ brandName() }}</span>\n @if (brandSubtitle()) {\n @if (brandSubtitleAsBadge()) {\n <sui-badge variant=\"filled\" color=\"orange\" size=\"small\">{{ brandSubtitle() }}</sui-badge>\n } @else {\n <span class=\"sui-sidebar__header-subtitle\">{{ brandSubtitle() }}</span>\n }\n }\n </div>\n @if (showHeaderButton()) {\n <button\n type=\"button\"\n class=\"sui-sidebar__compact-btn\"\n aria-label=\"Cambiar workspace\"\n (click)=\"onHeaderButtonClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"expand-up-down-line\" [size]=\"20\" />\n </button>\n }\n }\n </div>\n <div class=\"sui-sidebar__divider\" role=\"separator\"></div>\n </header>\n\n <!-- \u2500\u2500 Content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"sui-sidebar__content\">\n <!-- Search slot (Figma prop search=true) -->\n @if (searchable() && !collapsed()) {\n <div class=\"sui-sidebar__search\">\n <sui-icon class=\"sui-sidebar__search-icon\" name=\"search-2-line\" [size]=\"20\" />\n <input\n class=\"sui-sidebar__search-input\"\n type=\"text\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchValue()\"\n (input)=\"onSearchInput($any($event.target).value)\"\n (keydown.enter)=\"onSearchSubmit()\"\n />\n @if (searchShortcut()) {\n <span class=\"sui-sidebar__shortcut\">{{ searchShortcut() }}</span>\n }\n </div>\n }\n\n @if (items().length > 0) {\n <div class=\"sui-sidebar__section\">\n @if (itemsLabel()) {\n <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ itemsLabel() }}</div>\n }\n <nav class=\"sui-sidebar__nav\">\n @for (item of items(); track item.value) {\n <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n }\n </nav>\n </div>\n }\n\n @if (secondaryItems().length > 0) {\n <div class=\"sui-sidebar__section sui-sidebar__section--secondary\">\n @if (secondaryItemsLabel()) {\n <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ secondaryItemsLabel() }}</div>\n }\n <nav class=\"sui-sidebar__nav\">\n @for (item of secondaryItems(); track item.value) {\n <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n }\n </nav>\n </div>\n }\n\n <!-- Supporting Content (Figma supContent) \u2014 ancla al fondo cuando aplica -->\n @if (supportingItems().length > 0) {\n <div\n class=\"sui-sidebar__section sui-sidebar__section--supporting\"\n [class.sui-sidebar__section--anchor-bottom]=\"supportingAnchorBottom()\"\n >\n @if (supportingItemsLabel()) {\n <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ supportingItemsLabel() }}</div>\n }\n <nav class=\"sui-sidebar__nav\">\n @for (item of supportingItems(); track item.value) {\n <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n }\n </nav>\n </div>\n }\n\n <!-- Feature Card slot (Figma FeatureCard=On) \u2014 promo opcional, oculto en collapsed -->\n @if (!collapsed()) {\n <div class=\"sui-sidebar__feature-card\">\n <ng-content select=\"[feature-card]\"></ng-content>\n </div>\n }\n </div>\n\n <!-- \u2500\u2500 Footer (profile) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (profile(); as p) {\n <footer class=\"sui-sidebar__footer\">\n <div class=\"sui-sidebar__divider sui-sidebar__divider--top\" role=\"separator\"></div>\n <div class=\"sui-sidebar__profile\">\n <sui-avatar\n size=\"lg\"\n [src]=\"p.avatarUrl ?? null\"\n [alt]=\"p.name\"\n [initials]=\"p.initials ?? ''\"\n [status]=\"p.status ?? null\"\n color=\"slate\"\n />\n @if (!collapsed()) {\n <div class=\"sui-sidebar__profile-info\">\n <div class=\"sui-sidebar__profile-name-row\">\n <span class=\"sui-sidebar__profile-name\">{{ p.name }}</span>\n @if (p.verified) {\n <!-- Figma usa verified-fill (glyph propio SUI); el match m\u00E1s\n cercano en RemixIcon es verified-badge-fill. -->\n <sui-icon\n class=\"sui-sidebar__profile-verified\"\n name=\"verified-badge-fill\"\n [size]=\"20\"\n aria-label=\"Verificado\"\n />\n }\n </div>\n @if (p.email) {\n <span class=\"sui-sidebar__profile-email\">{{ p.email }}</span>\n }\n </div>\n @if (profileDropdown()) {\n <button\n type=\"button\"\n class=\"sui-sidebar__compact-btn sui-sidebar__compact-btn--ghost\"\n aria-label=\"Opciones de perfil\"\n (click)=\"onProfileButtonClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"arrow-right-s-line\" [size]=\"20\" />\n </button>\n }\n }\n </div>\n </footer>\n }\n</aside>\n\n<!-- \u2500\u2500 Item template (compartido entre todas las secciones) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<ng-template #itemTpl let-item>\n @if (item.route && !item.action) {\n <a\n class=\"sui-sidebar__item\"\n [class.sui-sidebar__item--danger]=\"item.variant === 'danger'\"\n [routerLink]=\"item.route\"\n routerLinkActive=\"sui-sidebar__item--active\"\n [attr.target]=\"item.external ? '_blank' : null\"\n [attr.rel]=\"item.external ? 'noopener noreferrer' : null\"\n [attr.title]=\"collapsed() ? (item.tooltip ?? item.label) : null\"\n [attr.aria-label]=\"collapsed() ? item.label : null\"\n (click)=\"onItemClick(item, $event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <ng-container *ngTemplateOutlet=\"itemBody; context: { $implicit: item }\"></ng-container>\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"sui-sidebar__item\"\n [class.sui-sidebar__item--active]=\"isItemActive(item)\"\n [class.sui-sidebar__item--danger]=\"item.variant === 'danger'\"\n [attr.title]=\"collapsed() ? (item.tooltip ?? item.label) : null\"\n [attr.aria-label]=\"collapsed() ? item.label : null\"\n (click)=\"onItemClick(item, $event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <ng-container *ngTemplateOutlet=\"itemBody; context: { $implicit: item }\"></ng-container>\n </button>\n }\n</ng-template>\n\n<ng-template #itemBody let-item>\n @if (item.colorDot) {\n <span\n class=\"sui-sidebar__item-dot\"\n [style.background-color]=\"item.colorDot\"\n aria-hidden=\"true\"\n ></span>\n } @else if (item.icon) {\n <sui-icon class=\"sui-sidebar__item-icon\" [name]=\"item.icon\" [size]=\"20\" />\n }\n @if (!collapsed()) {\n <span class=\"sui-sidebar__item-label\">{{ item.label }}</span>\n @if (item.badge !== undefined && item.badge !== null && item.badge !== '') {\n <sui-badge\n class=\"sui-sidebar__item-badge\"\n variant=\"filled\"\n [color]=\"item.variant === 'danger' ? 'red' : 'orange'\"\n size=\"small\"\n type=\"number\"\n >{{ item.badge }}</sui-badge>\n }\n @if (item.shortcut) {\n <span class=\"sui-sidebar__shortcut\">{{ item.shortcut }}</span>\n }\n <!-- Chevron del item activo (Figma): visibilidad controlada por CSS via\n .sui-sidebar__item--active (cubre tanto isItemActive como RouterLinkActive). -->\n <sui-icon class=\"sui-sidebar__item-chevron\" name=\"arrow-right-s-line\" [size]=\"20\" />\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:contents;font-family:var(--font-sans, \"Satoshi\", system-ui, sans-serif)}.sui-sidebar-backdrop{position:fixed;inset:0;z-index:299;background:#0006;animation:sui-sidebar-fade-in .2s ease-out}.sui-sidebar{display:flex;flex-direction:column;flex-shrink:0;width:240px;height:100dvh;background:var(--sui-bg-white-0, #ffffff);border-right:1px solid var(--sui-stroke-soft-200, #ebebeb);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-sidebar__header{position:relative;padding:12px;padding-top:calc(12px + env(safe-area-inset-top,0px))}.sui-sidebar__header-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--sui-radius-10, 10px);background:var(--sui-bg-white-0, #ffffff);overflow:hidden}.sui-sidebar__brand-logo{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c);overflow:hidden}.sui-sidebar__brand-logo img{width:100%;height:100%;object-fit:cover;display:block}.sui-sidebar__brand-fallback{font-size:18px;line-height:1}.sui-sidebar__compact-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;padding:1px;border-radius:var(--sui-radius-6, 6px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));color:var(--sui-text-sub-600, #5c5c5c);cursor:pointer;transition:background-color .12s ease-out,color .12s ease-out}@media(hover:hover)and (pointer:fine){.sui-sidebar__compact-btn:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}}.sui-sidebar__compact-btn:focus-visible{outline:2px solid var(--sui-state-information-base, #335cff);outline-offset:-1px}.sui-sidebar__compact-btn:active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__compact-btn--ghost{border-color:transparent;box-shadow:none;background:transparent}.sui-sidebar__header-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;align-items:flex-start}.sui-sidebar__header-name{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-sidebar__header-subtitle{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-sidebar__divider{position:absolute;bottom:0;left:20px;right:20px;height:1px;background:var(--sui-stroke-soft-200, #ebebeb)}.sui-sidebar__divider--top{top:0;bottom:auto}.sui-sidebar__content{flex:1;display:flex;flex-direction:column;gap:20px;padding:20px 20px 16px;overflow-y:auto;min-height:0}.sui-sidebar__section{display:flex;flex-direction:column;gap:8px}.sui-sidebar__section--secondary,.sui-sidebar__section--supporting{gap:6px}.sui-sidebar__section--anchor-bottom{flex:1 0 0;min-height:0;justify-content:flex-end}.sui-sidebar__section-label{padding:4px;font-size:12px;font-weight:500;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__section-label--collapsed{padding:4px 0;text-align:center}.sui-sidebar__search{display:flex;align-items:center;gap:8px;width:100%;padding:8px 8px 8px 10px;border-radius:var(--sui-radius-8, 8px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box}.sui-sidebar__search-icon{flex-shrink:0;display:inline-flex;color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__search-input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717)}.sui-sidebar__search-input::placeholder{color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__shortcut{flex-shrink:0;display:inline-flex;align-items:center;box-sizing:border-box;padding:2px 6px;border-radius:var(--sui-radius-4, 4px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);font-size:12px;font-weight:500;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--sui-text-soft-400, #a3a3a3);white-space:nowrap}.sui-sidebar__nav{display:flex;flex-direction:column;gap:4px}.sui-sidebar__item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--sui-radius-8, 8px);width:100%;background:transparent;border:none;font-family:inherit;text-align:left;text-decoration:none;color:inherit;cursor:pointer;position:relative;transition:background-color .12s ease-out,color .12s ease-out}@media(hover:hover)and (pointer:fine){.sui-sidebar__item:hover{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item:hover .sui-sidebar__item-label,.sui-sidebar__item:hover .sui-sidebar__item-icon{color:var(--sui-text-strong-950, #171717)}}.sui-sidebar__item:focus-visible{outline:2px solid var(--_sui-sidebar-indicator, var(--sui-primary-base, #fa7319));outline-offset:-2px}.sui-sidebar__item:active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item-icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--sui-text-sub-600, #5c5c5c);transition:color .12s ease-out}.sui-sidebar__item-label{flex:1;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .12s ease-out}.sui-sidebar__item-badge{flex-shrink:0}.sui-sidebar__item-dot{flex-shrink:0;width:8px;height:8px;margin:6px;border-radius:999px}.sui-sidebar__item-chevron{flex-shrink:0;display:none;color:var(--sui-text-sub-600, #5c5c5c)}:host{--_sui-sidebar-indicator: var(--sui-primary-base, #fa7319)}:host([data-sui-indicator=information]){--_sui-sidebar-indicator: var(--sui-state-information-base, #335cff)}.sui-sidebar__item--active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item--active .sui-sidebar__item-label{color:var(--sui-text-strong-950, #171717)}.sui-sidebar__item--active .sui-sidebar__item-icon{color:var(--_sui-sidebar-indicator)}.sui-sidebar__item--active .sui-sidebar__item-chevron{display:inline-flex;color:var(--sui-text-sub-600, #5c5c5c)}.sui-sidebar__item--active:before{content:\"\";position:absolute;left:-20px;top:50%;transform:translateY(-50%);width:4px;height:20px;background:var(--_sui-sidebar-indicator);border-radius:0 4px 4px 0}@media(hover:hover)and (pointer:fine){.sui-sidebar__item--active:hover{background:var(--sui-bg-weak-50, #f7f7f7)}}.sui-sidebar__item--danger .sui-sidebar__item-icon,.sui-sidebar__item--danger .sui-sidebar__item-label{color:var(--sui-state-error-base, #fb3748)}@media(hover:hover)and (pointer:fine){.sui-sidebar__item--danger:hover{background:var(--sui-red-alpha-10, rgba(251, 55, 72, .0980392157))}.sui-sidebar__item--danger:hover .sui-sidebar__item-icon,.sui-sidebar__item--danger:hover .sui-sidebar__item-label{color:var(--sui-state-error-base, #fb3748)}}.sui-sidebar__item--danger:active{background:var(--sui-red-alpha-16, rgba(251, 55, 72, .1607843137))}.sui-sidebar__footer{position:relative;padding:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}.sui-sidebar__profile{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--sui-radius-10, 10px);overflow:hidden}.sui-sidebar__profile-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;height:40px;justify-content:center}.sui-sidebar__profile-name-row{display:flex;align-items:center;gap:2px;min-width:0}.sui-sidebar__profile-name{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-sidebar__profile-verified{flex-shrink:0;display:inline-flex;color:var(--sui-state-verified-base, #47c2ff)}.sui-sidebar__profile-email{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-sidebar__feature-card{width:100%}.sui-sidebar__feature-card:not(:has(*)){display:none}:host([data-sui-collapsed]) .sui-sidebar{width:80px}:host([data-sui-collapsed]) .sui-sidebar__header-card,:host([data-sui-collapsed]) .sui-sidebar__profile{justify-content:center}:host([data-sui-collapsed]) .sui-sidebar__content{padding-inline:12px}:host([data-sui-collapsed]) .sui-sidebar__item{justify-content:center;padding:8px}:host([data-sui-collapsed]) .sui-sidebar__item--active:before{left:-12px}@media(max-width:767px){.sui-sidebar{position:fixed;top:0;left:0;bottom:0;height:100dvh;z-index:300;width:min(86vw,360px);transform:translate(-100%);transition:transform .25s cubic-bezier(.23,1,.32,1);border-right:none;border-radius:0 24px 24px 0;overflow:hidden;box-shadow:4px 0 24px #0e121b00}.sui-sidebar--open{transform:translate(0);box-shadow:4px 0 24px #0e121b1a}:host([data-sui-mobile-mode=sheet]) .sui-sidebar{width:calc(100vw - 40px);max-width:none}.sui-sidebar__item{gap:14px;padding:14px 12px;border-radius:var(--sui-radius-10, 10px);transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .16s cubic-bezier(.23,1,.32,1)}.sui-sidebar__item:active{transform:scale(.98);background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item-icon{width:24px;height:24px}.sui-sidebar__item-label{font-size:17px;line-height:24px;letter-spacing:-.01em}.sui-sidebar__item--active{background:var(--sui-orange-alpha-10, rgba(250, 115, 25, .1019607843))}.sui-sidebar__item--active .sui-sidebar__item-label,.sui-sidebar__item--active .sui-sidebar__item-icon{color:var(--sui-primary-base, #fa7319)}.sui-sidebar__item--active:before{display:none}}@keyframes sui-sidebar-fade-in{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiAvatar, selector: "sui-avatar", inputs: ["size", "src", "alt", "initials", "color", "status", "memojiSrc", "illustrationSrc", "icon", "companyLogoSrc", "topBadge", "bgColor"] }, { kind: "component", type: SuiBadge, selector: "sui-badge", inputs: ["color", "variant", "size", "type", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13206
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiSidebar, isStandalone: true, selector: "sui-sidebar", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, indicatorColor: { classPropertyName: "indicatorColor", publicName: "indicatorColor", isSignal: true, isRequired: false, transformFunction: null }, brandName: { classPropertyName: "brandName", publicName: "brandName", isSignal: true, isRequired: false, transformFunction: null }, brandSubtitle: { classPropertyName: "brandSubtitle", publicName: "brandSubtitle", isSignal: true, isRequired: false, transformFunction: null }, brandSubtitleAsBadge: { classPropertyName: "brandSubtitleAsBadge", publicName: "brandSubtitleAsBadge", isSignal: true, isRequired: false, transformFunction: null }, brandLogo: { classPropertyName: "brandLogo", publicName: "brandLogo", isSignal: true, isRequired: false, transformFunction: null }, brandFallback: { classPropertyName: "brandFallback", publicName: "brandFallback", isSignal: true, isRequired: false, transformFunction: null }, showHeaderButton: { classPropertyName: "showHeaderButton", publicName: "showHeaderButton", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchShortcut: { classPropertyName: "searchShortcut", publicName: "searchShortcut", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, secondaryItems: { classPropertyName: "secondaryItems", publicName: "secondaryItems", isSignal: true, isRequired: false, transformFunction: null }, supportingItems: { classPropertyName: "supportingItems", publicName: "supportingItems", isSignal: true, isRequired: false, transformFunction: null }, supportingAnchorBottom: { classPropertyName: "supportingAnchorBottom", publicName: "supportingAnchorBottom", isSignal: true, isRequired: false, transformFunction: null }, itemsLabel: { classPropertyName: "itemsLabel", publicName: "itemsLabel", isSignal: true, isRequired: false, transformFunction: null }, secondaryItemsLabel: { classPropertyName: "secondaryItemsLabel", publicName: "secondaryItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, supportingItemsLabel: { classPropertyName: "supportingItemsLabel", publicName: "supportingItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, activeRoute: { classPropertyName: "activeRoute", publicName: "activeRoute", isSignal: true, isRequired: false, transformFunction: null }, profile: { classPropertyName: "profile", publicName: "profile", isSignal: true, isRequired: false, transformFunction: null }, profileDropdown: { classPropertyName: "profileDropdown", publicName: "profileDropdown", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeOnNavigate: { classPropertyName: "closeOnNavigate", publicName: "closeOnNavigate", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null }, mobileMode: { classPropertyName: "mobileMode", publicName: "mobileMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchValue: "searchValueChange", open: "openChange", itemClicked: "itemClicked", logoutClicked: "logoutClicked", backdropClicked: "backdropClicked", headerButtonClicked: "headerButtonClicked", profileClicked: "profileClicked", searchSubmitted: "searchSubmitted" }, host: { properties: { "attr.title": "null", "attr.data-sui-open": "open() ? \"\" : null", "attr.data-sui-mobile-mode": "mobileMode()", "attr.data-sui-collapsed": "collapsed() ? \"\" : null", "attr.data-sui-indicator": "indicatorColor()" } }, ngImport: i0, template: "@if (showBackdrop() && open()) {\n <div class=\"sui-sidebar-backdrop\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\n}\n\n<aside\n class=\"sui-sidebar\"\n [class.sui-sidebar--open]=\"open()\"\n [class.sui-sidebar--collapsed]=\"collapsed()\"\n role=\"navigation\"\n [attr.aria-hidden]=\"!open() ? 'true' : null\"\n>\n <!-- \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <header class=\"sui-sidebar__header\">\n <div class=\"sui-sidebar__header-card\">\n <div class=\"sui-sidebar__brand-logo\">\n @if (brandLogo()) {\n <img [src]=\"brandLogo()\" [alt]=\"brandName()\" referrerpolicy=\"no-referrer\" />\n } @else if (brandFallback()) {\n <span class=\"sui-sidebar__brand-fallback\">{{ brandFallback() }}</span>\n } @else {\n <sui-icon name=\"building-line\" [size]=\"20\" />\n }\n </div>\n @if (!collapsed()) {\n <div class=\"sui-sidebar__header-info\">\n <span class=\"sui-sidebar__header-name\">{{ brandName() }}</span>\n @if (brandSubtitle()) {\n @if (brandSubtitleAsBadge()) {\n <sui-badge variant=\"filled\" color=\"orange\" size=\"small\">{{ brandSubtitle() }}</sui-badge>\n } @else {\n <span class=\"sui-sidebar__header-subtitle\">{{ brandSubtitle() }}</span>\n }\n }\n </div>\n @if (showHeaderButton()) {\n <button\n type=\"button\"\n class=\"sui-sidebar__compact-btn\"\n aria-label=\"Cambiar workspace\"\n (click)=\"onHeaderButtonClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"expand-up-down-line\" [size]=\"20\" />\n </button>\n }\n }\n </div>\n <div class=\"sui-sidebar__divider\" role=\"separator\"></div>\n </header>\n\n <!-- \u2500\u2500 Content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"sui-sidebar__content\">\n <!-- Search slot (Figma prop search=true) -->\n @if (searchable() && !collapsed()) {\n <div class=\"sui-sidebar__search\">\n <sui-icon class=\"sui-sidebar__search-icon\" name=\"search-2-line\" [size]=\"20\" />\n <input\n class=\"sui-sidebar__search-input\"\n type=\"text\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchValue()\"\n (input)=\"onSearchInput($any($event.target).value)\"\n (keydown.enter)=\"onSearchSubmit()\"\n />\n @if (searchShortcut()) {\n <span class=\"sui-sidebar__shortcut\">{{ searchShortcut() }}</span>\n }\n </div>\n }\n\n @if (items().length > 0) {\n <div class=\"sui-sidebar__section\">\n @if (itemsLabel()) {\n <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ itemsLabel() }}</div>\n }\n <nav class=\"sui-sidebar__nav\">\n @for (item of items(); track item.value) {\n <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n }\n </nav>\n </div>\n }\n\n @if (secondaryItems().length > 0) {\n <div class=\"sui-sidebar__section sui-sidebar__section--secondary\">\n @if (secondaryItemsLabel()) {\n <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ secondaryItemsLabel() }}</div>\n }\n <nav class=\"sui-sidebar__nav\">\n @for (item of secondaryItems(); track item.value) {\n <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n }\n </nav>\n </div>\n }\n\n <!-- Supporting Content (Figma supContent) \u2014 ancla al fondo cuando aplica -->\n @if (supportingItems().length > 0) {\n <div\n class=\"sui-sidebar__section sui-sidebar__section--supporting\"\n [class.sui-sidebar__section--anchor-bottom]=\"supportingAnchorBottom()\"\n >\n @if (supportingItemsLabel()) {\n <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ supportingItemsLabel() }}</div>\n }\n <nav class=\"sui-sidebar__nav\">\n @for (item of supportingItems(); track item.value) {\n <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n }\n </nav>\n </div>\n }\n\n <!-- Feature Card slot (Figma FeatureCard=On) \u2014 promo opcional, oculto en collapsed -->\n @if (!collapsed()) {\n <div class=\"sui-sidebar__feature-card\">\n <ng-content select=\"[feature-card]\"></ng-content>\n </div>\n }\n </div>\n\n <!-- \u2500\u2500 Footer (profile) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (profile(); as p) {\n <footer class=\"sui-sidebar__footer\">\n <div class=\"sui-sidebar__divider sui-sidebar__divider--top\" role=\"separator\"></div>\n <div class=\"sui-sidebar__profile\">\n <sui-avatar\n size=\"lg\"\n [src]=\"p.avatarUrl ?? null\"\n [alt]=\"p.name\"\n [initials]=\"p.initials ?? ''\"\n [status]=\"p.status ?? null\"\n color=\"slate\"\n />\n @if (!collapsed()) {\n <div class=\"sui-sidebar__profile-info\">\n <div class=\"sui-sidebar__profile-name-row\">\n <span class=\"sui-sidebar__profile-name\">{{ p.name }}</span>\n @if (p.verified) {\n <!-- Figma usa verified-fill (glyph propio SUI); el match m\u00E1s\n cercano en RemixIcon es verified-badge-fill. -->\n <sui-icon\n class=\"sui-sidebar__profile-verified\"\n name=\"verified-badge-fill\"\n [size]=\"20\"\n aria-label=\"Verificado\"\n />\n }\n </div>\n @if (p.email) {\n <span class=\"sui-sidebar__profile-email\">{{ p.email }}</span>\n }\n </div>\n @if (profileDropdown()) {\n <button\n type=\"button\"\n class=\"sui-sidebar__compact-btn sui-sidebar__compact-btn--ghost\"\n aria-label=\"Opciones de perfil\"\n (click)=\"onProfileButtonClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"arrow-right-s-line\" [size]=\"20\" />\n </button>\n }\n }\n </div>\n </footer>\n }\n</aside>\n\n<!-- \u2500\u2500 Item template (compartido entre todas las secciones) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<ng-template #itemTpl let-item>\n @if (item.route && !item.action) {\n <a\n class=\"sui-sidebar__item\"\n [class.sui-sidebar__item--danger]=\"item.variant === 'danger'\"\n [routerLink]=\"item.route\"\n routerLinkActive=\"sui-sidebar__item--active\"\n [attr.target]=\"item.external ? '_blank' : null\"\n [attr.rel]=\"item.external ? 'noopener noreferrer' : null\"\n [attr.title]=\"collapsed() ? (item.tooltip ?? item.label) : null\"\n [attr.aria-label]=\"collapsed() ? item.label : null\"\n (click)=\"onItemClick(item, $event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <ng-container *ngTemplateOutlet=\"itemBody; context: { $implicit: item }\"></ng-container>\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"sui-sidebar__item\"\n [class.sui-sidebar__item--active]=\"isItemActive(item)\"\n [class.sui-sidebar__item--danger]=\"item.variant === 'danger'\"\n [attr.title]=\"collapsed() ? (item.tooltip ?? item.label) : null\"\n [attr.aria-label]=\"collapsed() ? item.label : null\"\n (click)=\"onItemClick(item, $event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <ng-container *ngTemplateOutlet=\"itemBody; context: { $implicit: item }\"></ng-container>\n </button>\n }\n</ng-template>\n\n<ng-template #itemBody let-item>\n @if (item.colorDot) {\n <span\n class=\"sui-sidebar__item-dot\"\n [style.background-color]=\"item.colorDot\"\n aria-hidden=\"true\"\n ></span>\n } @else if (item.icon) {\n <sui-icon class=\"sui-sidebar__item-icon\" [name]=\"item.icon\" [size]=\"20\" />\n }\n @if (!collapsed()) {\n <span class=\"sui-sidebar__item-label\">{{ item.label }}</span>\n @if (item.badge !== undefined && item.badge !== null && item.badge !== '') {\n <sui-badge\n class=\"sui-sidebar__item-badge\"\n variant=\"filled\"\n [color]=\"item.variant === 'danger' ? 'red' : 'orange'\"\n size=\"small\"\n type=\"number\"\n >{{ item.badge }}</sui-badge>\n }\n @if (item.shortcut) {\n <span class=\"sui-sidebar__shortcut\">{{ item.shortcut }}</span>\n }\n <!-- Chevron del item activo (Figma): visibilidad controlada por CSS via\n .sui-sidebar__item--active (cubre tanto isItemActive como RouterLinkActive). -->\n <sui-icon class=\"sui-sidebar__item-chevron\" name=\"arrow-right-s-line\" [size]=\"20\" />\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:contents;font-family:var(--font-sans, \"Satoshi\", system-ui, sans-serif)}.sui-sidebar-backdrop{position:fixed;inset:0;z-index:299;background:#0006;animation:sui-sidebar-fade-in .2s ease-out}.sui-sidebar{display:flex;flex-direction:column;flex-shrink:0;width:240px;height:100dvh;background:var(--sui-bg-white-0, #ffffff);border-right:1px solid var(--sui-stroke-soft-200, #ebebeb);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-sidebar__header{position:relative;padding:12px;padding-top:calc(12px + env(safe-area-inset-top,0px))}.sui-sidebar__header-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--sui-radius-10, 10px);background:var(--sui-bg-white-0, #ffffff);overflow:hidden}.sui-sidebar__brand-logo{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c);overflow:hidden}.sui-sidebar__brand-logo img{width:100%;height:100%;object-fit:cover;display:block}.sui-sidebar__brand-fallback{font-size:18px;line-height:1}.sui-sidebar__compact-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;padding:1px;border-radius:var(--sui-radius-6, 6px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));color:var(--sui-text-sub-600, #5c5c5c);cursor:pointer;transition:background-color .12s ease-out,color .12s ease-out}@media(hover:hover)and (pointer:fine){.sui-sidebar__compact-btn:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}}.sui-sidebar__compact-btn:focus-visible{outline:2px solid var(--sui-state-information-base, #335cff);outline-offset:-1px}.sui-sidebar__compact-btn:active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__compact-btn--ghost{border-color:transparent;box-shadow:none;background:transparent}.sui-sidebar__header-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;align-items:flex-start}.sui-sidebar__header-name{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-sidebar__header-subtitle{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-sidebar__divider{position:absolute;bottom:0;left:20px;right:20px;height:1px;background:var(--sui-stroke-soft-200, #ebebeb)}.sui-sidebar__divider--top{top:0;bottom:auto}.sui-sidebar__content{flex:1;display:flex;flex-direction:column;gap:20px;padding:20px 20px 16px;overflow-y:auto;min-height:0}.sui-sidebar__section{display:flex;flex-direction:column;gap:8px;flex-shrink:0}.sui-sidebar__section--secondary,.sui-sidebar__section--supporting{gap:6px}.sui-sidebar__section--anchor-bottom{margin-top:auto}.sui-sidebar__section-label{padding:4px;font-size:12px;font-weight:500;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__section-label--collapsed{padding:4px 0;text-align:center}.sui-sidebar__search{display:flex;align-items:center;gap:8px;width:100%;padding:8px 8px 8px 10px;border-radius:var(--sui-radius-8, 8px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box}.sui-sidebar__search-icon{flex-shrink:0;display:inline-flex;color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__search-input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717)}.sui-sidebar__search-input::placeholder{color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__shortcut{flex-shrink:0;display:inline-flex;align-items:center;box-sizing:border-box;padding:2px 6px;border-radius:var(--sui-radius-4, 4px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);font-size:12px;font-weight:500;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--sui-text-soft-400, #a3a3a3);white-space:nowrap}.sui-sidebar__nav{display:flex;flex-direction:column;gap:4px}.sui-sidebar__item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--sui-radius-8, 8px);width:100%;background:transparent;border:none;font-family:inherit;text-align:left;text-decoration:none;color:inherit;cursor:pointer;position:relative;transition:background-color .12s ease-out,color .12s ease-out}@media(hover:hover)and (pointer:fine){.sui-sidebar__item:hover{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item:hover .sui-sidebar__item-label,.sui-sidebar__item:hover .sui-sidebar__item-icon{color:var(--sui-text-strong-950, #171717)}}.sui-sidebar__item:focus-visible{outline:2px solid var(--_sui-sidebar-indicator, var(--sui-primary-base, #fa7319));outline-offset:-2px}.sui-sidebar__item:active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item-icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--sui-text-sub-600, #5c5c5c);transition:color .12s ease-out}.sui-sidebar__item-label{flex:1;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .12s ease-out}.sui-sidebar__item-badge{flex-shrink:0}.sui-sidebar__item-dot{flex-shrink:0;width:8px;height:8px;margin:6px;border-radius:999px}.sui-sidebar__item-chevron{flex-shrink:0;display:none;color:var(--sui-text-sub-600, #5c5c5c)}:host{--_sui-sidebar-indicator: var(--sui-primary-base, #fa7319)}:host([data-sui-indicator=information]){--_sui-sidebar-indicator: var(--sui-state-information-base, #335cff)}.sui-sidebar__item--active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item--active .sui-sidebar__item-label{color:var(--sui-text-strong-950, #171717)}.sui-sidebar__item--active .sui-sidebar__item-icon{color:var(--_sui-sidebar-indicator)}.sui-sidebar__item--active .sui-sidebar__item-chevron{display:inline-flex;color:var(--sui-text-sub-600, #5c5c5c)}.sui-sidebar__item--active:before{content:\"\";position:absolute;left:-20px;top:50%;transform:translateY(-50%);width:4px;height:20px;background:var(--_sui-sidebar-indicator);border-radius:0 4px 4px 0}@media(hover:hover)and (pointer:fine){.sui-sidebar__item--active:hover{background:var(--sui-bg-weak-50, #f7f7f7)}}.sui-sidebar__item--danger .sui-sidebar__item-icon,.sui-sidebar__item--danger .sui-sidebar__item-label{color:var(--sui-state-error-base, #fb3748)}@media(hover:hover)and (pointer:fine){.sui-sidebar__item--danger:hover{background:var(--sui-red-alpha-10, rgba(251, 55, 72, .0980392157))}.sui-sidebar__item--danger:hover .sui-sidebar__item-icon,.sui-sidebar__item--danger:hover .sui-sidebar__item-label{color:var(--sui-state-error-base, #fb3748)}}.sui-sidebar__item--danger:active{background:var(--sui-red-alpha-16, rgba(251, 55, 72, .1607843137))}.sui-sidebar__footer{position:relative;padding:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}.sui-sidebar__profile{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--sui-radius-10, 10px);overflow:hidden}.sui-sidebar__profile-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;height:40px;justify-content:center}.sui-sidebar__profile-name-row{display:flex;align-items:center;gap:2px;min-width:0}.sui-sidebar__profile-name{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-sidebar__profile-verified{flex-shrink:0;display:inline-flex;color:var(--sui-state-verified-base, #47c2ff)}.sui-sidebar__profile-email{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-sidebar__feature-card{width:100%}.sui-sidebar__feature-card:not(:has(*)){display:none}:host([data-sui-collapsed]) .sui-sidebar{width:80px}:host([data-sui-collapsed]) .sui-sidebar__header-card,:host([data-sui-collapsed]) .sui-sidebar__profile{justify-content:center}:host([data-sui-collapsed]) .sui-sidebar__content{padding-inline:12px}:host([data-sui-collapsed]) .sui-sidebar__item{justify-content:center;padding:8px}:host([data-sui-collapsed]) .sui-sidebar__item--active:before{left:-12px}@media(max-width:767px){.sui-sidebar{position:fixed;top:0;left:0;bottom:0;height:100dvh;z-index:300;width:min(86vw,360px);transform:translate(-100%);transition:transform .25s cubic-bezier(.23,1,.32,1);border-right:none;border-radius:0 24px 24px 0;overflow:hidden;box-shadow:4px 0 24px #0e121b00}.sui-sidebar--open{transform:translate(0);box-shadow:4px 0 24px #0e121b1a}:host([data-sui-mobile-mode=sheet]) .sui-sidebar{width:calc(100vw - 40px);max-width:none}.sui-sidebar__item{gap:14px;padding:14px 12px;border-radius:var(--sui-radius-10, 10px);transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .16s cubic-bezier(.23,1,.32,1)}.sui-sidebar__item:active{transform:scale(.98);background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item-icon{width:24px;height:24px}.sui-sidebar__item-label{font-size:17px;line-height:24px;letter-spacing:-.01em}.sui-sidebar__item--active{background:var(--sui-orange-alpha-10, rgba(250, 115, 25, .1019607843))}.sui-sidebar__item--active .sui-sidebar__item-label,.sui-sidebar__item--active .sui-sidebar__item-icon{color:var(--sui-primary-base, #fa7319)}.sui-sidebar__item--active:before{display:none}}@keyframes sui-sidebar-fade-in{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiAvatar, selector: "sui-avatar", inputs: ["size", "src", "alt", "initials", "color", "status", "memojiSrc", "illustrationSrc", "icon", "companyLogoSrc", "topBadge", "bgColor"] }, { kind: "component", type: SuiBadge, selector: "sui-badge", inputs: ["color", "variant", "size", "type", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13199
13207
|
}
|
|
13200
13208
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiSidebar, decorators: [{
|
|
13201
13209
|
type: Component,
|
|
@@ -13206,7 +13214,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
13206
13214
|
'[attr.data-sui-mobile-mode]': 'mobileMode()',
|
|
13207
13215
|
'[attr.data-sui-collapsed]': 'collapsed() ? "" : null',
|
|
13208
13216
|
'[attr.data-sui-indicator]': 'indicatorColor()',
|
|
13209
|
-
}, template: "@if (showBackdrop() && open()) {\n <div class=\"sui-sidebar-backdrop\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\n}\n\n<aside\n class=\"sui-sidebar\"\n [class.sui-sidebar--open]=\"open()\"\n [class.sui-sidebar--collapsed]=\"collapsed()\"\n role=\"navigation\"\n [attr.aria-hidden]=\"!open() ? 'true' : null\"\n>\n <!-- \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <header class=\"sui-sidebar__header\">\n <div class=\"sui-sidebar__header-card\">\n <div class=\"sui-sidebar__brand-logo\">\n @if (brandLogo()) {\n <img [src]=\"brandLogo()\" [alt]=\"brandName()\" referrerpolicy=\"no-referrer\" />\n } @else if (brandFallback()) {\n <span class=\"sui-sidebar__brand-fallback\">{{ brandFallback() }}</span>\n } @else {\n <sui-icon name=\"building-line\" [size]=\"20\" />\n }\n </div>\n @if (!collapsed()) {\n <div class=\"sui-sidebar__header-info\">\n <span class=\"sui-sidebar__header-name\">{{ brandName() }}</span>\n @if (brandSubtitle()) {\n @if (brandSubtitleAsBadge()) {\n <sui-badge variant=\"filled\" color=\"orange\" size=\"small\">{{ brandSubtitle() }}</sui-badge>\n } @else {\n <span class=\"sui-sidebar__header-subtitle\">{{ brandSubtitle() }}</span>\n }\n }\n </div>\n @if (showHeaderButton()) {\n <button\n type=\"button\"\n class=\"sui-sidebar__compact-btn\"\n aria-label=\"Cambiar workspace\"\n (click)=\"onHeaderButtonClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"expand-up-down-line\" [size]=\"20\" />\n </button>\n }\n }\n </div>\n <div class=\"sui-sidebar__divider\" role=\"separator\"></div>\n </header>\n\n <!-- \u2500\u2500 Content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"sui-sidebar__content\">\n <!-- Search slot (Figma prop search=true) -->\n @if (searchable() && !collapsed()) {\n <div class=\"sui-sidebar__search\">\n <sui-icon class=\"sui-sidebar__search-icon\" name=\"search-2-line\" [size]=\"20\" />\n <input\n class=\"sui-sidebar__search-input\"\n type=\"text\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchValue()\"\n (input)=\"onSearchInput($any($event.target).value)\"\n (keydown.enter)=\"onSearchSubmit()\"\n />\n @if (searchShortcut()) {\n <span class=\"sui-sidebar__shortcut\">{{ searchShortcut() }}</span>\n }\n </div>\n }\n\n @if (items().length > 0) {\n <div class=\"sui-sidebar__section\">\n @if (itemsLabel()) {\n <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ itemsLabel() }}</div>\n }\n <nav class=\"sui-sidebar__nav\">\n @for (item of items(); track item.value) {\n <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n }\n </nav>\n </div>\n }\n\n @if (secondaryItems().length > 0) {\n <div class=\"sui-sidebar__section sui-sidebar__section--secondary\">\n @if (secondaryItemsLabel()) {\n <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ secondaryItemsLabel() }}</div>\n }\n <nav class=\"sui-sidebar__nav\">\n @for (item of secondaryItems(); track item.value) {\n <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n }\n </nav>\n </div>\n }\n\n <!-- Supporting Content (Figma supContent) \u2014 ancla al fondo cuando aplica -->\n @if (supportingItems().length > 0) {\n <div\n class=\"sui-sidebar__section sui-sidebar__section--supporting\"\n [class.sui-sidebar__section--anchor-bottom]=\"supportingAnchorBottom()\"\n >\n @if (supportingItemsLabel()) {\n <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ supportingItemsLabel() }}</div>\n }\n <nav class=\"sui-sidebar__nav\">\n @for (item of supportingItems(); track item.value) {\n <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n }\n </nav>\n </div>\n }\n\n <!-- Feature Card slot (Figma FeatureCard=On) \u2014 promo opcional, oculto en collapsed -->\n @if (!collapsed()) {\n <div class=\"sui-sidebar__feature-card\">\n <ng-content select=\"[feature-card]\"></ng-content>\n </div>\n }\n </div>\n\n <!-- \u2500\u2500 Footer (profile) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (profile(); as p) {\n <footer class=\"sui-sidebar__footer\">\n <div class=\"sui-sidebar__divider sui-sidebar__divider--top\" role=\"separator\"></div>\n <div class=\"sui-sidebar__profile\">\n <sui-avatar\n size=\"lg\"\n [src]=\"p.avatarUrl ?? null\"\n [alt]=\"p.name\"\n [initials]=\"p.initials ?? ''\"\n [status]=\"p.status ?? null\"\n color=\"slate\"\n />\n @if (!collapsed()) {\n <div class=\"sui-sidebar__profile-info\">\n <div class=\"sui-sidebar__profile-name-row\">\n <span class=\"sui-sidebar__profile-name\">{{ p.name }}</span>\n @if (p.verified) {\n <!-- Figma usa verified-fill (glyph propio SUI); el match m\u00E1s\n cercano en RemixIcon es verified-badge-fill. -->\n <sui-icon\n class=\"sui-sidebar__profile-verified\"\n name=\"verified-badge-fill\"\n [size]=\"20\"\n aria-label=\"Verificado\"\n />\n }\n </div>\n @if (p.email) {\n <span class=\"sui-sidebar__profile-email\">{{ p.email }}</span>\n }\n </div>\n @if (profileDropdown()) {\n <button\n type=\"button\"\n class=\"sui-sidebar__compact-btn sui-sidebar__compact-btn--ghost\"\n aria-label=\"Opciones de perfil\"\n (click)=\"onProfileButtonClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"arrow-right-s-line\" [size]=\"20\" />\n </button>\n }\n }\n </div>\n </footer>\n }\n</aside>\n\n<!-- \u2500\u2500 Item template (compartido entre todas las secciones) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<ng-template #itemTpl let-item>\n @if (item.route && !item.action) {\n <a\n class=\"sui-sidebar__item\"\n [class.sui-sidebar__item--danger]=\"item.variant === 'danger'\"\n [routerLink]=\"item.route\"\n routerLinkActive=\"sui-sidebar__item--active\"\n [attr.target]=\"item.external ? '_blank' : null\"\n [attr.rel]=\"item.external ? 'noopener noreferrer' : null\"\n [attr.title]=\"collapsed() ? (item.tooltip ?? item.label) : null\"\n [attr.aria-label]=\"collapsed() ? item.label : null\"\n (click)=\"onItemClick(item, $event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <ng-container *ngTemplateOutlet=\"itemBody; context: { $implicit: item }\"></ng-container>\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"sui-sidebar__item\"\n [class.sui-sidebar__item--active]=\"isItemActive(item)\"\n [class.sui-sidebar__item--danger]=\"item.variant === 'danger'\"\n [attr.title]=\"collapsed() ? (item.tooltip ?? item.label) : null\"\n [attr.aria-label]=\"collapsed() ? item.label : null\"\n (click)=\"onItemClick(item, $event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <ng-container *ngTemplateOutlet=\"itemBody; context: { $implicit: item }\"></ng-container>\n </button>\n }\n</ng-template>\n\n<ng-template #itemBody let-item>\n @if (item.colorDot) {\n <span\n class=\"sui-sidebar__item-dot\"\n [style.background-color]=\"item.colorDot\"\n aria-hidden=\"true\"\n ></span>\n } @else if (item.icon) {\n <sui-icon class=\"sui-sidebar__item-icon\" [name]=\"item.icon\" [size]=\"20\" />\n }\n @if (!collapsed()) {\n <span class=\"sui-sidebar__item-label\">{{ item.label }}</span>\n @if (item.badge !== undefined && item.badge !== null && item.badge !== '') {\n <sui-badge\n class=\"sui-sidebar__item-badge\"\n variant=\"filled\"\n [color]=\"item.variant === 'danger' ? 'red' : 'orange'\"\n size=\"small\"\n type=\"number\"\n >{{ item.badge }}</sui-badge>\n }\n @if (item.shortcut) {\n <span class=\"sui-sidebar__shortcut\">{{ item.shortcut }}</span>\n }\n <!-- Chevron del item activo (Figma): visibilidad controlada por CSS via\n .sui-sidebar__item--active (cubre tanto isItemActive como RouterLinkActive). -->\n <sui-icon class=\"sui-sidebar__item-chevron\" name=\"arrow-right-s-line\" [size]=\"20\" />\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:contents;font-family:var(--font-sans, \"Satoshi\", system-ui, sans-serif)}.sui-sidebar-backdrop{position:fixed;inset:0;z-index:299;background:#0006;animation:sui-sidebar-fade-in .2s ease-out}.sui-sidebar{display:flex;flex-direction:column;flex-shrink:0;width:240px;height:100dvh;background:var(--sui-bg-white-0, #ffffff);border-right:1px solid var(--sui-stroke-soft-200, #ebebeb);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-sidebar__header{position:relative;padding:12px;padding-top:calc(12px + env(safe-area-inset-top,0px))}.sui-sidebar__header-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--sui-radius-10, 10px);background:var(--sui-bg-white-0, #ffffff);overflow:hidden}.sui-sidebar__brand-logo{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c);overflow:hidden}.sui-sidebar__brand-logo img{width:100%;height:100%;object-fit:cover;display:block}.sui-sidebar__brand-fallback{font-size:18px;line-height:1}.sui-sidebar__compact-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;padding:1px;border-radius:var(--sui-radius-6, 6px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));color:var(--sui-text-sub-600, #5c5c5c);cursor:pointer;transition:background-color .12s ease-out,color .12s ease-out}@media(hover:hover)and (pointer:fine){.sui-sidebar__compact-btn:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}}.sui-sidebar__compact-btn:focus-visible{outline:2px solid var(--sui-state-information-base, #335cff);outline-offset:-1px}.sui-sidebar__compact-btn:active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__compact-btn--ghost{border-color:transparent;box-shadow:none;background:transparent}.sui-sidebar__header-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;align-items:flex-start}.sui-sidebar__header-name{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-sidebar__header-subtitle{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-sidebar__divider{position:absolute;bottom:0;left:20px;right:20px;height:1px;background:var(--sui-stroke-soft-200, #ebebeb)}.sui-sidebar__divider--top{top:0;bottom:auto}.sui-sidebar__content{flex:1;display:flex;flex-direction:column;gap:20px;padding:20px 20px 16px;overflow-y:auto;min-height:0}.sui-sidebar__section{display:flex;flex-direction:column;gap:8px}.sui-sidebar__section--secondary,.sui-sidebar__section--supporting{gap:6px}.sui-sidebar__section--anchor-bottom{flex:1 0 0;min-height:0;justify-content:flex-end}.sui-sidebar__section-label{padding:4px;font-size:12px;font-weight:500;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__section-label--collapsed{padding:4px 0;text-align:center}.sui-sidebar__search{display:flex;align-items:center;gap:8px;width:100%;padding:8px 8px 8px 10px;border-radius:var(--sui-radius-8, 8px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box}.sui-sidebar__search-icon{flex-shrink:0;display:inline-flex;color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__search-input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717)}.sui-sidebar__search-input::placeholder{color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__shortcut{flex-shrink:0;display:inline-flex;align-items:center;box-sizing:border-box;padding:2px 6px;border-radius:var(--sui-radius-4, 4px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);font-size:12px;font-weight:500;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--sui-text-soft-400, #a3a3a3);white-space:nowrap}.sui-sidebar__nav{display:flex;flex-direction:column;gap:4px}.sui-sidebar__item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--sui-radius-8, 8px);width:100%;background:transparent;border:none;font-family:inherit;text-align:left;text-decoration:none;color:inherit;cursor:pointer;position:relative;transition:background-color .12s ease-out,color .12s ease-out}@media(hover:hover)and (pointer:fine){.sui-sidebar__item:hover{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item:hover .sui-sidebar__item-label,.sui-sidebar__item:hover .sui-sidebar__item-icon{color:var(--sui-text-strong-950, #171717)}}.sui-sidebar__item:focus-visible{outline:2px solid var(--_sui-sidebar-indicator, var(--sui-primary-base, #fa7319));outline-offset:-2px}.sui-sidebar__item:active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item-icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--sui-text-sub-600, #5c5c5c);transition:color .12s ease-out}.sui-sidebar__item-label{flex:1;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .12s ease-out}.sui-sidebar__item-badge{flex-shrink:0}.sui-sidebar__item-dot{flex-shrink:0;width:8px;height:8px;margin:6px;border-radius:999px}.sui-sidebar__item-chevron{flex-shrink:0;display:none;color:var(--sui-text-sub-600, #5c5c5c)}:host{--_sui-sidebar-indicator: var(--sui-primary-base, #fa7319)}:host([data-sui-indicator=information]){--_sui-sidebar-indicator: var(--sui-state-information-base, #335cff)}.sui-sidebar__item--active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item--active .sui-sidebar__item-label{color:var(--sui-text-strong-950, #171717)}.sui-sidebar__item--active .sui-sidebar__item-icon{color:var(--_sui-sidebar-indicator)}.sui-sidebar__item--active .sui-sidebar__item-chevron{display:inline-flex;color:var(--sui-text-sub-600, #5c5c5c)}.sui-sidebar__item--active:before{content:\"\";position:absolute;left:-20px;top:50%;transform:translateY(-50%);width:4px;height:20px;background:var(--_sui-sidebar-indicator);border-radius:0 4px 4px 0}@media(hover:hover)and (pointer:fine){.sui-sidebar__item--active:hover{background:var(--sui-bg-weak-50, #f7f7f7)}}.sui-sidebar__item--danger .sui-sidebar__item-icon,.sui-sidebar__item--danger .sui-sidebar__item-label{color:var(--sui-state-error-base, #fb3748)}@media(hover:hover)and (pointer:fine){.sui-sidebar__item--danger:hover{background:var(--sui-red-alpha-10, rgba(251, 55, 72, .0980392157))}.sui-sidebar__item--danger:hover .sui-sidebar__item-icon,.sui-sidebar__item--danger:hover .sui-sidebar__item-label{color:var(--sui-state-error-base, #fb3748)}}.sui-sidebar__item--danger:active{background:var(--sui-red-alpha-16, rgba(251, 55, 72, .1607843137))}.sui-sidebar__footer{position:relative;padding:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}.sui-sidebar__profile{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--sui-radius-10, 10px);overflow:hidden}.sui-sidebar__profile-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;height:40px;justify-content:center}.sui-sidebar__profile-name-row{display:flex;align-items:center;gap:2px;min-width:0}.sui-sidebar__profile-name{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-sidebar__profile-verified{flex-shrink:0;display:inline-flex;color:var(--sui-state-verified-base, #47c2ff)}.sui-sidebar__profile-email{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-sidebar__feature-card{width:100%}.sui-sidebar__feature-card:not(:has(*)){display:none}:host([data-sui-collapsed]) .sui-sidebar{width:80px}:host([data-sui-collapsed]) .sui-sidebar__header-card,:host([data-sui-collapsed]) .sui-sidebar__profile{justify-content:center}:host([data-sui-collapsed]) .sui-sidebar__content{padding-inline:12px}:host([data-sui-collapsed]) .sui-sidebar__item{justify-content:center;padding:8px}:host([data-sui-collapsed]) .sui-sidebar__item--active:before{left:-12px}@media(max-width:767px){.sui-sidebar{position:fixed;top:0;left:0;bottom:0;height:100dvh;z-index:300;width:min(86vw,360px);transform:translate(-100%);transition:transform .25s cubic-bezier(.23,1,.32,1);border-right:none;border-radius:0 24px 24px 0;overflow:hidden;box-shadow:4px 0 24px #0e121b00}.sui-sidebar--open{transform:translate(0);box-shadow:4px 0 24px #0e121b1a}:host([data-sui-mobile-mode=sheet]) .sui-sidebar{width:calc(100vw - 40px);max-width:none}.sui-sidebar__item{gap:14px;padding:14px 12px;border-radius:var(--sui-radius-10, 10px);transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .16s cubic-bezier(.23,1,.32,1)}.sui-sidebar__item:active{transform:scale(.98);background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item-icon{width:24px;height:24px}.sui-sidebar__item-label{font-size:17px;line-height:24px;letter-spacing:-.01em}.sui-sidebar__item--active{background:var(--sui-orange-alpha-10, rgba(250, 115, 25, .1019607843))}.sui-sidebar__item--active .sui-sidebar__item-label,.sui-sidebar__item--active .sui-sidebar__item-icon{color:var(--sui-primary-base, #fa7319)}.sui-sidebar__item--active:before{display:none}}@keyframes sui-sidebar-fade-in{0%{opacity:0}to{opacity:1}}\n"] }]
|
|
13217
|
+
}, template: "@if (showBackdrop() && open()) {\n <div class=\"sui-sidebar-backdrop\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\n}\n\n<aside\n class=\"sui-sidebar\"\n [class.sui-sidebar--open]=\"open()\"\n [class.sui-sidebar--collapsed]=\"collapsed()\"\n role=\"navigation\"\n [attr.aria-hidden]=\"!open() ? 'true' : null\"\n>\n <!-- \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <header class=\"sui-sidebar__header\">\n <div class=\"sui-sidebar__header-card\">\n <div class=\"sui-sidebar__brand-logo\">\n @if (brandLogo()) {\n <img [src]=\"brandLogo()\" [alt]=\"brandName()\" referrerpolicy=\"no-referrer\" />\n } @else if (brandFallback()) {\n <span class=\"sui-sidebar__brand-fallback\">{{ brandFallback() }}</span>\n } @else {\n <sui-icon name=\"building-line\" [size]=\"20\" />\n }\n </div>\n @if (!collapsed()) {\n <div class=\"sui-sidebar__header-info\">\n <span class=\"sui-sidebar__header-name\">{{ brandName() }}</span>\n @if (brandSubtitle()) {\n @if (brandSubtitleAsBadge()) {\n <sui-badge variant=\"filled\" color=\"orange\" size=\"small\">{{ brandSubtitle() }}</sui-badge>\n } @else {\n <span class=\"sui-sidebar__header-subtitle\">{{ brandSubtitle() }}</span>\n }\n }\n </div>\n @if (showHeaderButton()) {\n <button\n type=\"button\"\n class=\"sui-sidebar__compact-btn\"\n aria-label=\"Cambiar workspace\"\n (click)=\"onHeaderButtonClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"expand-up-down-line\" [size]=\"20\" />\n </button>\n }\n }\n </div>\n <div class=\"sui-sidebar__divider\" role=\"separator\"></div>\n </header>\n\n <!-- \u2500\u2500 Content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"sui-sidebar__content\">\n <!-- Search slot (Figma prop search=true) -->\n @if (searchable() && !collapsed()) {\n <div class=\"sui-sidebar__search\">\n <sui-icon class=\"sui-sidebar__search-icon\" name=\"search-2-line\" [size]=\"20\" />\n <input\n class=\"sui-sidebar__search-input\"\n type=\"text\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchValue()\"\n (input)=\"onSearchInput($any($event.target).value)\"\n (keydown.enter)=\"onSearchSubmit()\"\n />\n @if (searchShortcut()) {\n <span class=\"sui-sidebar__shortcut\">{{ searchShortcut() }}</span>\n }\n </div>\n }\n\n @if (items().length > 0) {\n <div class=\"sui-sidebar__section\">\n @if (itemsLabel()) {\n <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ itemsLabel() }}</div>\n }\n <nav class=\"sui-sidebar__nav\">\n @for (item of items(); track item.value) {\n <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n }\n </nav>\n </div>\n }\n\n @if (secondaryItems().length > 0) {\n <div class=\"sui-sidebar__section sui-sidebar__section--secondary\">\n @if (secondaryItemsLabel()) {\n <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ secondaryItemsLabel() }}</div>\n }\n <nav class=\"sui-sidebar__nav\">\n @for (item of secondaryItems(); track item.value) {\n <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n }\n </nav>\n </div>\n }\n\n <!-- Supporting Content (Figma supContent) \u2014 ancla al fondo cuando aplica -->\n @if (supportingItems().length > 0) {\n <div\n class=\"sui-sidebar__section sui-sidebar__section--supporting\"\n [class.sui-sidebar__section--anchor-bottom]=\"supportingAnchorBottom()\"\n >\n @if (supportingItemsLabel()) {\n <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ supportingItemsLabel() }}</div>\n }\n <nav class=\"sui-sidebar__nav\">\n @for (item of supportingItems(); track item.value) {\n <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n }\n </nav>\n </div>\n }\n\n <!-- Feature Card slot (Figma FeatureCard=On) \u2014 promo opcional, oculto en collapsed -->\n @if (!collapsed()) {\n <div class=\"sui-sidebar__feature-card\">\n <ng-content select=\"[feature-card]\"></ng-content>\n </div>\n }\n </div>\n\n <!-- \u2500\u2500 Footer (profile) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (profile(); as p) {\n <footer class=\"sui-sidebar__footer\">\n <div class=\"sui-sidebar__divider sui-sidebar__divider--top\" role=\"separator\"></div>\n <div class=\"sui-sidebar__profile\">\n <sui-avatar\n size=\"lg\"\n [src]=\"p.avatarUrl ?? null\"\n [alt]=\"p.name\"\n [initials]=\"p.initials ?? ''\"\n [status]=\"p.status ?? null\"\n color=\"slate\"\n />\n @if (!collapsed()) {\n <div class=\"sui-sidebar__profile-info\">\n <div class=\"sui-sidebar__profile-name-row\">\n <span class=\"sui-sidebar__profile-name\">{{ p.name }}</span>\n @if (p.verified) {\n <!-- Figma usa verified-fill (glyph propio SUI); el match m\u00E1s\n cercano en RemixIcon es verified-badge-fill. -->\n <sui-icon\n class=\"sui-sidebar__profile-verified\"\n name=\"verified-badge-fill\"\n [size]=\"20\"\n aria-label=\"Verificado\"\n />\n }\n </div>\n @if (p.email) {\n <span class=\"sui-sidebar__profile-email\">{{ p.email }}</span>\n }\n </div>\n @if (profileDropdown()) {\n <button\n type=\"button\"\n class=\"sui-sidebar__compact-btn sui-sidebar__compact-btn--ghost\"\n aria-label=\"Opciones de perfil\"\n (click)=\"onProfileButtonClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"arrow-right-s-line\" [size]=\"20\" />\n </button>\n }\n }\n </div>\n </footer>\n }\n</aside>\n\n<!-- \u2500\u2500 Item template (compartido entre todas las secciones) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<ng-template #itemTpl let-item>\n @if (item.route && !item.action) {\n <a\n class=\"sui-sidebar__item\"\n [class.sui-sidebar__item--danger]=\"item.variant === 'danger'\"\n [routerLink]=\"item.route\"\n routerLinkActive=\"sui-sidebar__item--active\"\n [attr.target]=\"item.external ? '_blank' : null\"\n [attr.rel]=\"item.external ? 'noopener noreferrer' : null\"\n [attr.title]=\"collapsed() ? (item.tooltip ?? item.label) : null\"\n [attr.aria-label]=\"collapsed() ? item.label : null\"\n (click)=\"onItemClick(item, $event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <ng-container *ngTemplateOutlet=\"itemBody; context: { $implicit: item }\"></ng-container>\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"sui-sidebar__item\"\n [class.sui-sidebar__item--active]=\"isItemActive(item)\"\n [class.sui-sidebar__item--danger]=\"item.variant === 'danger'\"\n [attr.title]=\"collapsed() ? (item.tooltip ?? item.label) : null\"\n [attr.aria-label]=\"collapsed() ? item.label : null\"\n (click)=\"onItemClick(item, $event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <ng-container *ngTemplateOutlet=\"itemBody; context: { $implicit: item }\"></ng-container>\n </button>\n }\n</ng-template>\n\n<ng-template #itemBody let-item>\n @if (item.colorDot) {\n <span\n class=\"sui-sidebar__item-dot\"\n [style.background-color]=\"item.colorDot\"\n aria-hidden=\"true\"\n ></span>\n } @else if (item.icon) {\n <sui-icon class=\"sui-sidebar__item-icon\" [name]=\"item.icon\" [size]=\"20\" />\n }\n @if (!collapsed()) {\n <span class=\"sui-sidebar__item-label\">{{ item.label }}</span>\n @if (item.badge !== undefined && item.badge !== null && item.badge !== '') {\n <sui-badge\n class=\"sui-sidebar__item-badge\"\n variant=\"filled\"\n [color]=\"item.variant === 'danger' ? 'red' : 'orange'\"\n size=\"small\"\n type=\"number\"\n >{{ item.badge }}</sui-badge>\n }\n @if (item.shortcut) {\n <span class=\"sui-sidebar__shortcut\">{{ item.shortcut }}</span>\n }\n <!-- Chevron del item activo (Figma): visibilidad controlada por CSS via\n .sui-sidebar__item--active (cubre tanto isItemActive como RouterLinkActive). -->\n <sui-icon class=\"sui-sidebar__item-chevron\" name=\"arrow-right-s-line\" [size]=\"20\" />\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:contents;font-family:var(--font-sans, \"Satoshi\", system-ui, sans-serif)}.sui-sidebar-backdrop{position:fixed;inset:0;z-index:299;background:#0006;animation:sui-sidebar-fade-in .2s ease-out}.sui-sidebar{display:flex;flex-direction:column;flex-shrink:0;width:240px;height:100dvh;background:var(--sui-bg-white-0, #ffffff);border-right:1px solid var(--sui-stroke-soft-200, #ebebeb);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-sidebar__header{position:relative;padding:12px;padding-top:calc(12px + env(safe-area-inset-top,0px))}.sui-sidebar__header-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--sui-radius-10, 10px);background:var(--sui-bg-white-0, #ffffff);overflow:hidden}.sui-sidebar__brand-logo{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c);overflow:hidden}.sui-sidebar__brand-logo img{width:100%;height:100%;object-fit:cover;display:block}.sui-sidebar__brand-fallback{font-size:18px;line-height:1}.sui-sidebar__compact-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;padding:1px;border-radius:var(--sui-radius-6, 6px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));color:var(--sui-text-sub-600, #5c5c5c);cursor:pointer;transition:background-color .12s ease-out,color .12s ease-out}@media(hover:hover)and (pointer:fine){.sui-sidebar__compact-btn:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}}.sui-sidebar__compact-btn:focus-visible{outline:2px solid var(--sui-state-information-base, #335cff);outline-offset:-1px}.sui-sidebar__compact-btn:active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__compact-btn--ghost{border-color:transparent;box-shadow:none;background:transparent}.sui-sidebar__header-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;align-items:flex-start}.sui-sidebar__header-name{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-sidebar__header-subtitle{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-sidebar__divider{position:absolute;bottom:0;left:20px;right:20px;height:1px;background:var(--sui-stroke-soft-200, #ebebeb)}.sui-sidebar__divider--top{top:0;bottom:auto}.sui-sidebar__content{flex:1;display:flex;flex-direction:column;gap:20px;padding:20px 20px 16px;overflow-y:auto;min-height:0}.sui-sidebar__section{display:flex;flex-direction:column;gap:8px;flex-shrink:0}.sui-sidebar__section--secondary,.sui-sidebar__section--supporting{gap:6px}.sui-sidebar__section--anchor-bottom{margin-top:auto}.sui-sidebar__section-label{padding:4px;font-size:12px;font-weight:500;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__section-label--collapsed{padding:4px 0;text-align:center}.sui-sidebar__search{display:flex;align-items:center;gap:8px;width:100%;padding:8px 8px 8px 10px;border-radius:var(--sui-radius-8, 8px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box}.sui-sidebar__search-icon{flex-shrink:0;display:inline-flex;color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__search-input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717)}.sui-sidebar__search-input::placeholder{color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__shortcut{flex-shrink:0;display:inline-flex;align-items:center;box-sizing:border-box;padding:2px 6px;border-radius:var(--sui-radius-4, 4px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);font-size:12px;font-weight:500;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--sui-text-soft-400, #a3a3a3);white-space:nowrap}.sui-sidebar__nav{display:flex;flex-direction:column;gap:4px}.sui-sidebar__item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--sui-radius-8, 8px);width:100%;background:transparent;border:none;font-family:inherit;text-align:left;text-decoration:none;color:inherit;cursor:pointer;position:relative;transition:background-color .12s ease-out,color .12s ease-out}@media(hover:hover)and (pointer:fine){.sui-sidebar__item:hover{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item:hover .sui-sidebar__item-label,.sui-sidebar__item:hover .sui-sidebar__item-icon{color:var(--sui-text-strong-950, #171717)}}.sui-sidebar__item:focus-visible{outline:2px solid var(--_sui-sidebar-indicator, var(--sui-primary-base, #fa7319));outline-offset:-2px}.sui-sidebar__item:active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item-icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--sui-text-sub-600, #5c5c5c);transition:color .12s ease-out}.sui-sidebar__item-label{flex:1;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .12s ease-out}.sui-sidebar__item-badge{flex-shrink:0}.sui-sidebar__item-dot{flex-shrink:0;width:8px;height:8px;margin:6px;border-radius:999px}.sui-sidebar__item-chevron{flex-shrink:0;display:none;color:var(--sui-text-sub-600, #5c5c5c)}:host{--_sui-sidebar-indicator: var(--sui-primary-base, #fa7319)}:host([data-sui-indicator=information]){--_sui-sidebar-indicator: var(--sui-state-information-base, #335cff)}.sui-sidebar__item--active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item--active .sui-sidebar__item-label{color:var(--sui-text-strong-950, #171717)}.sui-sidebar__item--active .sui-sidebar__item-icon{color:var(--_sui-sidebar-indicator)}.sui-sidebar__item--active .sui-sidebar__item-chevron{display:inline-flex;color:var(--sui-text-sub-600, #5c5c5c)}.sui-sidebar__item--active:before{content:\"\";position:absolute;left:-20px;top:50%;transform:translateY(-50%);width:4px;height:20px;background:var(--_sui-sidebar-indicator);border-radius:0 4px 4px 0}@media(hover:hover)and (pointer:fine){.sui-sidebar__item--active:hover{background:var(--sui-bg-weak-50, #f7f7f7)}}.sui-sidebar__item--danger .sui-sidebar__item-icon,.sui-sidebar__item--danger .sui-sidebar__item-label{color:var(--sui-state-error-base, #fb3748)}@media(hover:hover)and (pointer:fine){.sui-sidebar__item--danger:hover{background:var(--sui-red-alpha-10, rgba(251, 55, 72, .0980392157))}.sui-sidebar__item--danger:hover .sui-sidebar__item-icon,.sui-sidebar__item--danger:hover .sui-sidebar__item-label{color:var(--sui-state-error-base, #fb3748)}}.sui-sidebar__item--danger:active{background:var(--sui-red-alpha-16, rgba(251, 55, 72, .1607843137))}.sui-sidebar__footer{position:relative;padding:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}.sui-sidebar__profile{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--sui-radius-10, 10px);overflow:hidden}.sui-sidebar__profile-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;height:40px;justify-content:center}.sui-sidebar__profile-name-row{display:flex;align-items:center;gap:2px;min-width:0}.sui-sidebar__profile-name{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-sidebar__profile-verified{flex-shrink:0;display:inline-flex;color:var(--sui-state-verified-base, #47c2ff)}.sui-sidebar__profile-email{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-sidebar__feature-card{width:100%}.sui-sidebar__feature-card:not(:has(*)){display:none}:host([data-sui-collapsed]) .sui-sidebar{width:80px}:host([data-sui-collapsed]) .sui-sidebar__header-card,:host([data-sui-collapsed]) .sui-sidebar__profile{justify-content:center}:host([data-sui-collapsed]) .sui-sidebar__content{padding-inline:12px}:host([data-sui-collapsed]) .sui-sidebar__item{justify-content:center;padding:8px}:host([data-sui-collapsed]) .sui-sidebar__item--active:before{left:-12px}@media(max-width:767px){.sui-sidebar{position:fixed;top:0;left:0;bottom:0;height:100dvh;z-index:300;width:min(86vw,360px);transform:translate(-100%);transition:transform .25s cubic-bezier(.23,1,.32,1);border-right:none;border-radius:0 24px 24px 0;overflow:hidden;box-shadow:4px 0 24px #0e121b00}.sui-sidebar--open{transform:translate(0);box-shadow:4px 0 24px #0e121b1a}:host([data-sui-mobile-mode=sheet]) .sui-sidebar{width:calc(100vw - 40px);max-width:none}.sui-sidebar__item{gap:14px;padding:14px 12px;border-radius:var(--sui-radius-10, 10px);transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .16s cubic-bezier(.23,1,.32,1)}.sui-sidebar__item:active{transform:scale(.98);background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item-icon{width:24px;height:24px}.sui-sidebar__item-label{font-size:17px;line-height:24px;letter-spacing:-.01em}.sui-sidebar__item--active{background:var(--sui-orange-alpha-10, rgba(250, 115, 25, .1019607843))}.sui-sidebar__item--active .sui-sidebar__item-label,.sui-sidebar__item--active .sui-sidebar__item-icon{color:var(--sui-primary-base, #fa7319)}.sui-sidebar__item--active:before{display:none}}@keyframes sui-sidebar-fade-in{0%{opacity:0}to{opacity:1}}\n"] }]
|
|
13210
13218
|
}], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], indicatorColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorColor", required: false }] }], brandName: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandName", required: false }] }], brandSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandSubtitle", required: false }] }], brandSubtitleAsBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandSubtitleAsBadge", required: false }] }], brandLogo: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandLogo", required: false }] }], brandFallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandFallback", required: false }] }], showHeaderButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeaderButton", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], searchShortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchShortcut", required: false }] }], searchValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchValue", required: false }] }, { type: i0.Output, args: ["searchValueChange"] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], secondaryItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryItems", required: false }] }], supportingItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "supportingItems", required: false }] }], supportingAnchorBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "supportingAnchorBottom", required: false }] }], itemsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsLabel", required: false }] }], secondaryItemsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryItemsLabel", required: false }] }], supportingItemsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "supportingItemsLabel", required: false }] }], activeRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeRoute", required: false }] }], profile: [{ type: i0.Input, args: [{ isSignal: true, alias: "profile", required: false }] }], profileDropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileDropdown", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], closeOnNavigate: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnNavigate", required: false }] }], showBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackdrop", required: false }] }], mobileMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileMode", required: false }] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }], logoutClicked: [{ type: i0.Output, args: ["logoutClicked"] }], backdropClicked: [{ type: i0.Output, args: ["backdropClicked"] }], headerButtonClicked: [{ type: i0.Output, args: ["headerButtonClicked"] }], profileClicked: [{ type: i0.Output, args: ["profileClicked"] }], searchSubmitted: [{ type: i0.Output, args: ["searchSubmitted"] }] } });
|
|
13211
13219
|
|
|
13212
13220
|
class SuiSlider {
|
|
@@ -13464,7 +13472,7 @@ class SuiSlider {
|
|
|
13464
13472
|
useExisting: forwardRef(() => SuiSlider),
|
|
13465
13473
|
multi: true,
|
|
13466
13474
|
},
|
|
13467
|
-
], ngImport: i0, template: "@if (label()) {\n <div class=\"sui-slider__label-row\">\n <span class=\"sui-slider__label\">{{ label() }}</span>\n @if (sublabel()) {\n <span class=\"sui-slider__sublabel\">{{ sublabel() }}</span>\n }\n <span class=\"sui-slider__amount\">{{ amountText() }}</span>\n </div>\n}\n\n<div\n class=\"sui-slider__track\"\n (pointerdown)=\"onTrackPointerDown($event)\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerup)=\"onPointerUp()\"\n (pointercancel)=\"onPointerUp()\"\n>\n <!-- BG track -->\n <div class=\"sui-slider__bg\"></div>\n\n @if (type() === 'single') {\n <!-- Progress fill 0 \u2192 value -->\n <div class=\"sui-slider__progress\" [style.width.%]=\"valuePct()\"></div>\n\n <!-- Thumb \u00FAnico -->\n <div\n class=\"sui-slider__thumb\"\n [class.sui-slider__thumb--zero]=\"!singleHasProgress()\"\n [style.left.%]=\"valuePct()\"\n role=\"slider\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"effectiveValue()\"\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n [attr.tabindex]=\"isDisabled() ? '-1' : '0'\"\n (keydown)=\"onThumbKeydown($event, 'single')\"\n (pointerenter)=\"onThumbEnter('single')\"\n (pointerleave)=\"onThumbLeave()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <span class=\"sui-slider__dot\"></span>\n @if (showSingleTooltip()) {\n <div class=\"sui-slider__tooltip\">\n <span class=\"sui-slider__tooltip-text\">{{ effectiveValue() }}</span>\n <span class=\"sui-slider__tooltip-tail\"></span>\n </div>\n }\n </div>\n } @else {\n <!-- Progress fill min \u2192 max -->\n <div\n class=\"sui-slider__progress\"\n [style.left.%]=\"minPct()\"\n [style.width.%]=\"maxPct() - minPct()\"\n ></div>\n\n <!-- Thumb min (izquierdo) -->\n <div\n class=\"sui-slider__thumb sui-slider__thumb--range-min\"\n [class.sui-slider__thumb--zero]=\"!rangeMinColored()\"\n [style.left.%]=\"minPct()\"\n role=\"slider\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"effectiveMax()\"\n [attr.aria-valuenow]=\"effectiveMin()\"\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n [attr.tabindex]=\"isDisabled() ? '-1' : '0'\"\n (keydown)=\"onThumbKeydown($event, 'min')\"\n (pointerenter)=\"onThumbEnter('min')\"\n (pointerleave)=\"onThumbLeave()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <span class=\"sui-slider__dot\"></span>\n @if (showMinTooltip()) {\n <div class=\"sui-slider__tooltip\">\n <span class=\"sui-slider__tooltip-text\">{{ effectiveMin() }}</span>\n <span class=\"sui-slider__tooltip-tail\"></span>\n </div>\n }\n </div>\n\n <!-- Thumb max (derecho) -->\n <div\n class=\"sui-slider__thumb\"\n [class.sui-slider__thumb--zero]=\"!rangeMaxColored()\"\n [style.left.%]=\"maxPct()\"\n role=\"slider\"\n [attr.aria-valuemin]=\"effectiveMin()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"effectiveMax()\"\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n [attr.tabindex]=\"isDisabled() ? '-1' : '0'\"\n (keydown)=\"onThumbKeydown($event, 'max')\"\n (pointerenter)=\"onThumbEnter('max')\"\n (pointerleave)=\"onThumbLeave()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <span class=\"sui-slider__dot\"></span>\n @if (showMaxTooltip()) {\n <div class=\"sui-slider__tooltip\">\n <span class=\"sui-slider__tooltip-text\">{{ effectiveMax() }}</span>\n <span class=\"sui-slider__tooltip-tail\"></span>\n </div>\n }\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;align-items:stretch;gap:4px;width:100%;box-sizing:border-box;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-user-select:none;user-select:none}.sui-slider__label-row{display:flex;align-items:flex-start;gap:2px;width:100%;font-size:12px;line-height:16px;font-weight:400}.sui-slider__label{color:var(--sui-text-sub-600);white-space:nowrap}.sui-slider__sublabel{color:var(--sui-text-soft-400);white-space:nowrap}.sui-slider__amount{flex:1 0 0;min-width:0;text-align:right;color:var(--sui-text-sub-600)}.sui-slider__track{position:relative;width:100%;height:16px;cursor:pointer;touch-action:none}.sui-slider__bg{position:absolute;left:0;right:0;top:5px;height:6px;border-radius:var(--sui-radius-full);background:var(--sui-bg-soft-200)}.sui-slider__progress{position:absolute;left:0;top:5px;height:6px;border-radius:var(--sui-radius-full);background:var(--sui-primary-base)}.sui-slider__thumb{position:absolute;top:50%;width:16px;height:16px;margin-left:-8px;transform:translateY(-50%);border-radius:50%;background:var(--sui-
|
|
13475
|
+
], ngImport: i0, template: "@if (label()) {\n <div class=\"sui-slider__label-row\">\n <span class=\"sui-slider__label\">{{ label() }}</span>\n @if (sublabel()) {\n <span class=\"sui-slider__sublabel\">{{ sublabel() }}</span>\n }\n <span class=\"sui-slider__amount\">{{ amountText() }}</span>\n </div>\n}\n\n<div\n class=\"sui-slider__track\"\n (pointerdown)=\"onTrackPointerDown($event)\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerup)=\"onPointerUp()\"\n (pointercancel)=\"onPointerUp()\"\n>\n <!-- BG track -->\n <div class=\"sui-slider__bg\"></div>\n\n @if (type() === 'single') {\n <!-- Progress fill 0 \u2192 value -->\n <div class=\"sui-slider__progress\" [style.width.%]=\"valuePct()\"></div>\n\n <!-- Thumb \u00FAnico -->\n <div\n class=\"sui-slider__thumb\"\n [class.sui-slider__thumb--zero]=\"!singleHasProgress()\"\n [style.left.%]=\"valuePct()\"\n role=\"slider\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"effectiveValue()\"\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n [attr.tabindex]=\"isDisabled() ? '-1' : '0'\"\n (keydown)=\"onThumbKeydown($event, 'single')\"\n (pointerenter)=\"onThumbEnter('single')\"\n (pointerleave)=\"onThumbLeave()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <span class=\"sui-slider__dot\"></span>\n @if (showSingleTooltip()) {\n <div class=\"sui-slider__tooltip\">\n <span class=\"sui-slider__tooltip-text\">{{ effectiveValue() }}</span>\n <span class=\"sui-slider__tooltip-tail\"></span>\n </div>\n }\n </div>\n } @else {\n <!-- Progress fill min \u2192 max -->\n <div\n class=\"sui-slider__progress\"\n [style.left.%]=\"minPct()\"\n [style.width.%]=\"maxPct() - minPct()\"\n ></div>\n\n <!-- Thumb min (izquierdo) -->\n <div\n class=\"sui-slider__thumb sui-slider__thumb--range-min\"\n [class.sui-slider__thumb--zero]=\"!rangeMinColored()\"\n [style.left.%]=\"minPct()\"\n role=\"slider\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"effectiveMax()\"\n [attr.aria-valuenow]=\"effectiveMin()\"\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n [attr.tabindex]=\"isDisabled() ? '-1' : '0'\"\n (keydown)=\"onThumbKeydown($event, 'min')\"\n (pointerenter)=\"onThumbEnter('min')\"\n (pointerleave)=\"onThumbLeave()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <span class=\"sui-slider__dot\"></span>\n @if (showMinTooltip()) {\n <div class=\"sui-slider__tooltip\">\n <span class=\"sui-slider__tooltip-text\">{{ effectiveMin() }}</span>\n <span class=\"sui-slider__tooltip-tail\"></span>\n </div>\n }\n </div>\n\n <!-- Thumb max (derecho) -->\n <div\n class=\"sui-slider__thumb\"\n [class.sui-slider__thumb--zero]=\"!rangeMaxColored()\"\n [style.left.%]=\"maxPct()\"\n role=\"slider\"\n [attr.aria-valuemin]=\"effectiveMin()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"effectiveMax()\"\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n [attr.tabindex]=\"isDisabled() ? '-1' : '0'\"\n (keydown)=\"onThumbKeydown($event, 'max')\"\n (pointerenter)=\"onThumbEnter('max')\"\n (pointerleave)=\"onThumbLeave()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <span class=\"sui-slider__dot\"></span>\n @if (showMaxTooltip()) {\n <div class=\"sui-slider__tooltip\">\n <span class=\"sui-slider__tooltip-text\">{{ effectiveMax() }}</span>\n <span class=\"sui-slider__tooltip-tail\"></span>\n </div>\n }\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;align-items:stretch;gap:4px;width:100%;box-sizing:border-box;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-user-select:none;user-select:none}.sui-slider__label-row{display:flex;align-items:flex-start;gap:2px;width:100%;font-size:12px;line-height:16px;font-weight:400}.sui-slider__label{color:var(--sui-text-sub-600);white-space:nowrap}.sui-slider__sublabel{color:var(--sui-text-soft-400);white-space:nowrap}.sui-slider__amount{flex:1 0 0;min-width:0;text-align:right;color:var(--sui-text-sub-600)}.sui-slider__track{position:relative;width:100%;height:16px;cursor:pointer;touch-action:none}.sui-slider__bg{position:absolute;left:0;right:0;top:5px;height:6px;border-radius:var(--sui-radius-full);background:var(--sui-bg-soft-200)}.sui-slider__progress{position:absolute;left:0;top:5px;height:6px;border-radius:var(--sui-radius-full);background:var(--sui-primary-base)}.sui-slider__thumb{position:absolute;top:50%;width:16px;height:16px;margin-left:-8px;transform:translateY(-50%);border-radius:50%;background:var(--sui-static-white, #ffffff);filter:drop-shadow(0px 6px 5px rgba(14,18,27,.06)) drop-shadow(0px 2px 2px rgba(14,18,27,.03));display:flex;align-items:center;justify-content:center;cursor:grab;outline:none;box-sizing:border-box}.sui-slider__thumb:active{cursor:grabbing}.sui-slider__thumb--range-min{margin-left:-5px}.sui-slider__thumb:focus-visible{box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-base)}.sui-slider__dot{width:6px;height:6px;border-radius:50%;background:var(--sui-primary-base);box-sizing:border-box}.sui-slider__thumb--zero .sui-slider__dot{background:var(--sui-bg-soft-200)}.sui-slider__tooltip{position:absolute;left:50%;top:-28px;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none;z-index:2}.sui-slider__tooltip-text{display:flex;align-items:center;justify-content:center;padding:2px 6px;border-radius:var(--sui-radius-4);background:var(--sui-bg-strong-950);color:var(--sui-text-white-0);font-size:12px;line-height:16px;font-weight:400;white-space:nowrap;box-shadow:0 12px 24px #0e121b0f,0 1px 2px #0e121b08}.sui-slider__tooltip-tail{width:8px;height:4px;background:var(--sui-bg-strong-950);clip-path:polygon(0 0,100% 0,50% 100%)}:host([data-sui-disabled]){cursor:not-allowed}:host([data-sui-disabled]) .sui-slider__track{cursor:not-allowed}:host([data-sui-disabled]) .sui-slider__thumb{cursor:not-allowed}:host([data-sui-disabled]) .sui-slider__progress{background:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-slider__dot{background:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-slider__label,:host([data-sui-disabled]) .sui-slider__amount{color:var(--sui-text-disabled-300)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13468
13476
|
}
|
|
13469
13477
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiSlider, decorators: [{
|
|
13470
13478
|
type: Component,
|
|
@@ -13480,7 +13488,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
13480
13488
|
'[attr.data-sui-type]': 'type()',
|
|
13481
13489
|
'[attr.data-sui-disabled]': 'isDisabled() ? "" : null',
|
|
13482
13490
|
'[attr.data-sui-dragging]': 'dragging() ? "" : null',
|
|
13483
|
-
}, template: "@if (label()) {\n <div class=\"sui-slider__label-row\">\n <span class=\"sui-slider__label\">{{ label() }}</span>\n @if (sublabel()) {\n <span class=\"sui-slider__sublabel\">{{ sublabel() }}</span>\n }\n <span class=\"sui-slider__amount\">{{ amountText() }}</span>\n </div>\n}\n\n<div\n class=\"sui-slider__track\"\n (pointerdown)=\"onTrackPointerDown($event)\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerup)=\"onPointerUp()\"\n (pointercancel)=\"onPointerUp()\"\n>\n <!-- BG track -->\n <div class=\"sui-slider__bg\"></div>\n\n @if (type() === 'single') {\n <!-- Progress fill 0 \u2192 value -->\n <div class=\"sui-slider__progress\" [style.width.%]=\"valuePct()\"></div>\n\n <!-- Thumb \u00FAnico -->\n <div\n class=\"sui-slider__thumb\"\n [class.sui-slider__thumb--zero]=\"!singleHasProgress()\"\n [style.left.%]=\"valuePct()\"\n role=\"slider\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"effectiveValue()\"\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n [attr.tabindex]=\"isDisabled() ? '-1' : '0'\"\n (keydown)=\"onThumbKeydown($event, 'single')\"\n (pointerenter)=\"onThumbEnter('single')\"\n (pointerleave)=\"onThumbLeave()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <span class=\"sui-slider__dot\"></span>\n @if (showSingleTooltip()) {\n <div class=\"sui-slider__tooltip\">\n <span class=\"sui-slider__tooltip-text\">{{ effectiveValue() }}</span>\n <span class=\"sui-slider__tooltip-tail\"></span>\n </div>\n }\n </div>\n } @else {\n <!-- Progress fill min \u2192 max -->\n <div\n class=\"sui-slider__progress\"\n [style.left.%]=\"minPct()\"\n [style.width.%]=\"maxPct() - minPct()\"\n ></div>\n\n <!-- Thumb min (izquierdo) -->\n <div\n class=\"sui-slider__thumb sui-slider__thumb--range-min\"\n [class.sui-slider__thumb--zero]=\"!rangeMinColored()\"\n [style.left.%]=\"minPct()\"\n role=\"slider\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"effectiveMax()\"\n [attr.aria-valuenow]=\"effectiveMin()\"\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n [attr.tabindex]=\"isDisabled() ? '-1' : '0'\"\n (keydown)=\"onThumbKeydown($event, 'min')\"\n (pointerenter)=\"onThumbEnter('min')\"\n (pointerleave)=\"onThumbLeave()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <span class=\"sui-slider__dot\"></span>\n @if (showMinTooltip()) {\n <div class=\"sui-slider__tooltip\">\n <span class=\"sui-slider__tooltip-text\">{{ effectiveMin() }}</span>\n <span class=\"sui-slider__tooltip-tail\"></span>\n </div>\n }\n </div>\n\n <!-- Thumb max (derecho) -->\n <div\n class=\"sui-slider__thumb\"\n [class.sui-slider__thumb--zero]=\"!rangeMaxColored()\"\n [style.left.%]=\"maxPct()\"\n role=\"slider\"\n [attr.aria-valuemin]=\"effectiveMin()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"effectiveMax()\"\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n [attr.tabindex]=\"isDisabled() ? '-1' : '0'\"\n (keydown)=\"onThumbKeydown($event, 'max')\"\n (pointerenter)=\"onThumbEnter('max')\"\n (pointerleave)=\"onThumbLeave()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <span class=\"sui-slider__dot\"></span>\n @if (showMaxTooltip()) {\n <div class=\"sui-slider__tooltip\">\n <span class=\"sui-slider__tooltip-text\">{{ effectiveMax() }}</span>\n <span class=\"sui-slider__tooltip-tail\"></span>\n </div>\n }\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;align-items:stretch;gap:4px;width:100%;box-sizing:border-box;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-user-select:none;user-select:none}.sui-slider__label-row{display:flex;align-items:flex-start;gap:2px;width:100%;font-size:12px;line-height:16px;font-weight:400}.sui-slider__label{color:var(--sui-text-sub-600);white-space:nowrap}.sui-slider__sublabel{color:var(--sui-text-soft-400);white-space:nowrap}.sui-slider__amount{flex:1 0 0;min-width:0;text-align:right;color:var(--sui-text-sub-600)}.sui-slider__track{position:relative;width:100%;height:16px;cursor:pointer;touch-action:none}.sui-slider__bg{position:absolute;left:0;right:0;top:5px;height:6px;border-radius:var(--sui-radius-full);background:var(--sui-bg-soft-200)}.sui-slider__progress{position:absolute;left:0;top:5px;height:6px;border-radius:var(--sui-radius-full);background:var(--sui-primary-base)}.sui-slider__thumb{position:absolute;top:50%;width:16px;height:16px;margin-left:-8px;transform:translateY(-50%);border-radius:50%;background:var(--sui-
|
|
13491
|
+
}, template: "@if (label()) {\n <div class=\"sui-slider__label-row\">\n <span class=\"sui-slider__label\">{{ label() }}</span>\n @if (sublabel()) {\n <span class=\"sui-slider__sublabel\">{{ sublabel() }}</span>\n }\n <span class=\"sui-slider__amount\">{{ amountText() }}</span>\n </div>\n}\n\n<div\n class=\"sui-slider__track\"\n (pointerdown)=\"onTrackPointerDown($event)\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerup)=\"onPointerUp()\"\n (pointercancel)=\"onPointerUp()\"\n>\n <!-- BG track -->\n <div class=\"sui-slider__bg\"></div>\n\n @if (type() === 'single') {\n <!-- Progress fill 0 \u2192 value -->\n <div class=\"sui-slider__progress\" [style.width.%]=\"valuePct()\"></div>\n\n <!-- Thumb \u00FAnico -->\n <div\n class=\"sui-slider__thumb\"\n [class.sui-slider__thumb--zero]=\"!singleHasProgress()\"\n [style.left.%]=\"valuePct()\"\n role=\"slider\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"effectiveValue()\"\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n [attr.tabindex]=\"isDisabled() ? '-1' : '0'\"\n (keydown)=\"onThumbKeydown($event, 'single')\"\n (pointerenter)=\"onThumbEnter('single')\"\n (pointerleave)=\"onThumbLeave()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <span class=\"sui-slider__dot\"></span>\n @if (showSingleTooltip()) {\n <div class=\"sui-slider__tooltip\">\n <span class=\"sui-slider__tooltip-text\">{{ effectiveValue() }}</span>\n <span class=\"sui-slider__tooltip-tail\"></span>\n </div>\n }\n </div>\n } @else {\n <!-- Progress fill min \u2192 max -->\n <div\n class=\"sui-slider__progress\"\n [style.left.%]=\"minPct()\"\n [style.width.%]=\"maxPct() - minPct()\"\n ></div>\n\n <!-- Thumb min (izquierdo) -->\n <div\n class=\"sui-slider__thumb sui-slider__thumb--range-min\"\n [class.sui-slider__thumb--zero]=\"!rangeMinColored()\"\n [style.left.%]=\"minPct()\"\n role=\"slider\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"effectiveMax()\"\n [attr.aria-valuenow]=\"effectiveMin()\"\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n [attr.tabindex]=\"isDisabled() ? '-1' : '0'\"\n (keydown)=\"onThumbKeydown($event, 'min')\"\n (pointerenter)=\"onThumbEnter('min')\"\n (pointerleave)=\"onThumbLeave()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <span class=\"sui-slider__dot\"></span>\n @if (showMinTooltip()) {\n <div class=\"sui-slider__tooltip\">\n <span class=\"sui-slider__tooltip-text\">{{ effectiveMin() }}</span>\n <span class=\"sui-slider__tooltip-tail\"></span>\n </div>\n }\n </div>\n\n <!-- Thumb max (derecho) -->\n <div\n class=\"sui-slider__thumb\"\n [class.sui-slider__thumb--zero]=\"!rangeMaxColored()\"\n [style.left.%]=\"maxPct()\"\n role=\"slider\"\n [attr.aria-valuemin]=\"effectiveMin()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"effectiveMax()\"\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n [attr.tabindex]=\"isDisabled() ? '-1' : '0'\"\n (keydown)=\"onThumbKeydown($event, 'max')\"\n (pointerenter)=\"onThumbEnter('max')\"\n (pointerleave)=\"onThumbLeave()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <span class=\"sui-slider__dot\"></span>\n @if (showMaxTooltip()) {\n <div class=\"sui-slider__tooltip\">\n <span class=\"sui-slider__tooltip-text\">{{ effectiveMax() }}</span>\n <span class=\"sui-slider__tooltip-tail\"></span>\n </div>\n }\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;align-items:stretch;gap:4px;width:100%;box-sizing:border-box;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-user-select:none;user-select:none}.sui-slider__label-row{display:flex;align-items:flex-start;gap:2px;width:100%;font-size:12px;line-height:16px;font-weight:400}.sui-slider__label{color:var(--sui-text-sub-600);white-space:nowrap}.sui-slider__sublabel{color:var(--sui-text-soft-400);white-space:nowrap}.sui-slider__amount{flex:1 0 0;min-width:0;text-align:right;color:var(--sui-text-sub-600)}.sui-slider__track{position:relative;width:100%;height:16px;cursor:pointer;touch-action:none}.sui-slider__bg{position:absolute;left:0;right:0;top:5px;height:6px;border-radius:var(--sui-radius-full);background:var(--sui-bg-soft-200)}.sui-slider__progress{position:absolute;left:0;top:5px;height:6px;border-radius:var(--sui-radius-full);background:var(--sui-primary-base)}.sui-slider__thumb{position:absolute;top:50%;width:16px;height:16px;margin-left:-8px;transform:translateY(-50%);border-radius:50%;background:var(--sui-static-white, #ffffff);filter:drop-shadow(0px 6px 5px rgba(14,18,27,.06)) drop-shadow(0px 2px 2px rgba(14,18,27,.03));display:flex;align-items:center;justify-content:center;cursor:grab;outline:none;box-sizing:border-box}.sui-slider__thumb:active{cursor:grabbing}.sui-slider__thumb--range-min{margin-left:-5px}.sui-slider__thumb:focus-visible{box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-base)}.sui-slider__dot{width:6px;height:6px;border-radius:50%;background:var(--sui-primary-base);box-sizing:border-box}.sui-slider__thumb--zero .sui-slider__dot{background:var(--sui-bg-soft-200)}.sui-slider__tooltip{position:absolute;left:50%;top:-28px;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none;z-index:2}.sui-slider__tooltip-text{display:flex;align-items:center;justify-content:center;padding:2px 6px;border-radius:var(--sui-radius-4);background:var(--sui-bg-strong-950);color:var(--sui-text-white-0);font-size:12px;line-height:16px;font-weight:400;white-space:nowrap;box-shadow:0 12px 24px #0e121b0f,0 1px 2px #0e121b08}.sui-slider__tooltip-tail{width:8px;height:4px;background:var(--sui-bg-strong-950);clip-path:polygon(0 0,100% 0,50% 100%)}:host([data-sui-disabled]){cursor:not-allowed}:host([data-sui-disabled]) .sui-slider__track{cursor:not-allowed}:host([data-sui-disabled]) .sui-slider__thumb{cursor:not-allowed}:host([data-sui-disabled]) .sui-slider__progress{background:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-slider__dot{background:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-slider__label,:host([data-sui-disabled]) .sui-slider__amount{color:var(--sui-text-disabled-300)}\n"] }]
|
|
13484
13492
|
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], amount: [{ type: i0.Input, args: [{ isSignal: true, alias: "amount", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipAlways: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipAlways", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], minValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "minValue", required: false }] }], minValueChange: [{ type: i0.Output, args: ["minValueChange"] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }], maxValueChange: [{ type: i0.Output, args: ["maxValueChange"] }] } });
|
|
13485
13493
|
|
|
13486
13494
|
/** Brand color map — exact bg-color por brand cuando style=filled. */
|
|
@@ -13587,8 +13595,34 @@ class SuiSocialButton {
|
|
|
13587
13595
|
/** Disabled efectivo: el input disabled O el estado loading. */
|
|
13588
13596
|
isDisabled = computed(() => this.disabled() || this.loading(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
13589
13597
|
isAnchor = computed(() => !!this.href() && !this.isDisabled(), ...(ngDevMode ? [{ debugName: "isAnchor" }] : /* istanbul ignore next */ []));
|
|
13590
|
-
/**
|
|
13591
|
-
|
|
13598
|
+
/** Marcas con logo MONOCROMÁTICO OSCURO: su `original` es negro/gris horneado en
|
|
13599
|
+
* el SVG (no responde a currentColor por ser <img>), así que en stroke + dark
|
|
13600
|
+
* quedaría casi invisible sobre el bg oscuro → se usa el logo `white`. Las marcas
|
|
13601
|
+
* multicolor (google/facebook/linkedin/dropbox) se ven bien y quedan `original`. */
|
|
13602
|
+
static MONO_DARK_BRANDS = new Set(['apple', 'x-twitter', 'github']);
|
|
13603
|
+
/** Dark mode reactivo — leído del `data-theme` del root (mecanismo del DS).
|
|
13604
|
+
* Necesario porque el logo es un asset distinto por tema (no un color CSS). */
|
|
13605
|
+
isDark = signal(this.readDark(), ...(ngDevMode ? [{ debugName: "isDark" }] : /* istanbul ignore next */ []));
|
|
13606
|
+
readDark() {
|
|
13607
|
+
return typeof document !== 'undefined' && document.documentElement.getAttribute('data-theme') === 'dark';
|
|
13608
|
+
}
|
|
13609
|
+
constructor() {
|
|
13610
|
+
if (typeof MutationObserver !== 'undefined' && typeof document !== 'undefined') {
|
|
13611
|
+
const obs = new MutationObserver(() => this.isDark.set(this.readDark()));
|
|
13612
|
+
obs.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
|
|
13613
|
+
inject(DestroyRef).onDestroy(() => obs.disconnect());
|
|
13614
|
+
}
|
|
13615
|
+
}
|
|
13616
|
+
/** Logo style derivado del button style + tema. filled → siempre blanco; stroke →
|
|
13617
|
+
* `original`, salvo dark + marca monocromática oscura, donde usa `white` para no
|
|
13618
|
+
* perder el logo sobre la superficie oscura (ver MONO_DARK_BRANDS). */
|
|
13619
|
+
logoStyle = computed(() => {
|
|
13620
|
+
if (this.variantStyle() === 'filled')
|
|
13621
|
+
return 'white';
|
|
13622
|
+
if (this.isDark() && SuiSocialButton.MONO_DARK_BRANDS.has(this.brand()))
|
|
13623
|
+
return 'white';
|
|
13624
|
+
return 'original';
|
|
13625
|
+
}, ...(ngDevMode ? [{ debugName: "logoStyle" }] : /* istanbul ignore next */ []));
|
|
13592
13626
|
/** Color de fondo brand-specific (solo aplica si style=filled). */
|
|
13593
13627
|
filledBg = computed(() => this.variantStyle() === 'filled' ? BRAND_FILLED_BG[this.brand()] : null, ...(ngDevMode ? [{ debugName: "filledBg" }] : /* istanbul ignore next */ []));
|
|
13594
13628
|
/** Label final: input.label > default por brand. */
|
|
@@ -13621,7 +13655,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
13621
13655
|
'[attr.data-sui-loading]': 'loading() ? "" : null',
|
|
13622
13656
|
'[style.--sui-social-bg]': 'filledBg()',
|
|
13623
13657
|
}, template: "@if (isAnchor()) {\n <a\n class=\"sui-social-button__el\"\n [href]=\"href()\"\n [attr.target]=\"target()\"\n [attr.rel]=\"rel()\"\n [attr.aria-label]=\"resolvedAriaLabel()\"\n (click)=\"onClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n @if (loading()) {\n <sui-icon class=\"sui-social-button__spinner\" name=\"loader-4-line\" [size]=\"20\" />\n } @else {\n <sui-brand-logo [company]=\"brand()\" [variant]=\"logoStyle()\" size=\"sm\" />\n }\n @if (!onlyIcon()) {\n <span class=\"sui-social-button__text\">{{ resolvedLabel() }}</span>\n }\n </a>\n} @else {\n <button\n class=\"sui-social-button__el\"\n [type]=\"type()\"\n [disabled]=\"isDisabled() || null\"\n [attr.aria-label]=\"resolvedAriaLabel()\"\n (click)=\"onClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n @if (loading()) {\n <sui-icon class=\"sui-social-button__spinner\" name=\"loader-4-line\" [size]=\"20\" />\n } @else {\n <sui-brand-logo [company]=\"brand()\" [variant]=\"logoStyle()\" size=\"sm\" />\n }\n @if (!onlyIcon()) {\n <span class=\"sui-social-button__text\">{{ resolvedLabel() }}</span>\n }\n </button>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:stretch;vertical-align:middle}.sui-social-button__el{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:0;padding:10px 16px 10px 10px;border:0;border-radius:var(--sui-radius-10, 10px);background:transparent;color:inherit;text-decoration:none;cursor:pointer;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;min-height:40px;box-sizing:border-box;transition:background .12s,transform var(--dur-instant, 80ms) var(--ease-ek, cubic-bezier(.22, 1, .36, 1))}.sui-social-button__el:active:not(:disabled){transform:scale(.97)}.sui-social-button__el:disabled{cursor:not-allowed}:host .sui-social-button__el:active:not(:disabled),:host .sui-social-button__el:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}.sui-social-button__text{font-size:var(--sui-type-label-sm-size, 14px);line-height:var(--sui-type-label-sm-line, 20px);letter-spacing:var(--sui-type-label-sm-spacing, -.006em);font-weight:var(--sui-type-label-sm-weight, 500);white-space:nowrap}.sui-social-button__spinner{display:inline-flex;animation:sui-social-button-spin .8s linear infinite}@keyframes sui-social-button-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.sui-social-button__spinner{animation:none}}:host([data-sui-only-icon]) .sui-social-button__el{padding:10px;width:40px;height:40px}:host([data-sui-style=filled]) .sui-social-button__el{background:var(--sui-social-bg);color:var(--sui-static-white, #ffffff)}:host([data-sui-style=filled]) .sui-social-button__el:hover:not(:disabled){background:linear-gradient(#00000029,#00000029) padding-box,var(--sui-social-bg)}:host([data-sui-style=filled]) .sui-social-button__el:active:not(:disabled){background:linear-gradient(#0000003d,#0000003d) padding-box,var(--sui-social-bg)}:host([data-sui-style=stroke]) .sui-social-button__el{background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);color:var(--sui-text-strong-950);box-shadow:var(--sui-regular-shadow-x-small)}:host([data-sui-style=stroke]) .sui-social-button__el:hover:not(:disabled){background:var(--sui-bg-weak-50)}:host([data-sui-style=stroke]) .sui-social-button__el:active:not(:disabled){background:var(--sui-bg-soft-200)}:host([data-sui-disabled]) .sui-social-button__el,.sui-social-button__el:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}\n"] }]
|
|
13624
|
-
}], propDecorators: { brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: true }] }], variantStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "variantStyle", required: false }] }], onlyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlyIcon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], rel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rel", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
13658
|
+
}], ctorParameters: () => [], propDecorators: { brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: true }] }], variantStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "variantStyle", required: false }] }], onlyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlyIcon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], rel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rel", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
13625
13659
|
|
|
13626
13660
|
/**
|
|
13627
13661
|
* SUI Status Badge — SUI Design System 2.0
|
|
@@ -14041,6 +14075,16 @@ class SuiSwitchCard {
|
|
|
14041
14075
|
isDisabled = computed(() => this.disabled() || this._disabledByForm(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
14042
14076
|
/** True si type requiere render del slot leading. */
|
|
14043
14077
|
hasLeading = computed(() => this.type() !== 'basic', ...(ngDevMode ? [{ debugName: "hasLeading" }] : /* istanbul ignore next */ []));
|
|
14078
|
+
/** Box del leading según type — usado por el wrapper único del slot proyectado. */
|
|
14079
|
+
leadingBoxClass = computed(() => {
|
|
14080
|
+
switch (this.type()) {
|
|
14081
|
+
case 'left-icon': return 'sui-switch-card__leading-icon';
|
|
14082
|
+
case 'card-provider': return 'sui-switch-card__leading-card-provider';
|
|
14083
|
+
case 'brand': return 'sui-switch-card__leading-brand';
|
|
14084
|
+
case 'company': return 'sui-switch-card__leading-company';
|
|
14085
|
+
default: return '';
|
|
14086
|
+
}
|
|
14087
|
+
}, ...(ngDevMode ? [{ debugName: "leadingBoxClass" }] : /* istanbul ignore next */ []));
|
|
14044
14088
|
/** Iniciales para fallback de sui-avatar cuando la imagen no carga. */
|
|
14045
14089
|
initialsFromLabel = computed(() => {
|
|
14046
14090
|
const l = this.label().trim();
|
|
@@ -14110,7 +14154,7 @@ class SuiSwitchCard {
|
|
|
14110
14154
|
useExisting: forwardRef(() => SuiSwitchCard),
|
|
14111
14155
|
multi: true,
|
|
14112
14156
|
},
|
|
14113
|
-
], ngImport: i0, template: "@if (hasLeading()) {\n <div class=\"sui-switch-card__leading\">\n @
|
|
14157
|
+
], ngImport: i0, template: "@if (hasLeading()) {\n <div class=\"sui-switch-card__leading\">\n @if (type() === 'avatar') {\n <sui-avatar\n class=\"sui-switch-card__leading-avatar\"\n size=\"lg\"\n [src]=\"imageUrl()\"\n [initials]=\"initialsFromLabel()\" />\n } @else if (type() === 'left-icon' && emoji()) {\n <div class=\"sui-switch-card__leading-icon\">\n <sui-emoji class=\"sui-switch-card__leading-emoji\" [name]=\"emoji()!\" size=\"sm\" />\n </div>\n } @else if (imageUrl() && type() !== 'left-icon') {\n <!-- card-provider 32\u00D724 / brand 40\u00D740 bare / company 40\u00D740 circle \u2014 el box lo da la clase. -->\n <div [class]=\"leadingBoxClass()\">\n <img [src]=\"imageUrl()\" alt=\"\" class=\"sui-switch-card__leading-img\" />\n </div>\n } @else {\n <!-- \u00DANICO ng-content del slot: si se duplica por branch, Angular solo proyecta\n en el primero declarado y los dem\u00E1s types quedan vac\u00EDos (bug auditor\u00EDa). -->\n <div [class]=\"leadingBoxClass()\">\n <ng-content select=\"[sui-switch-card-leading]\" />\n </div>\n }\n </div>\n}\n\n<div class=\"sui-switch-card__body\">\n <div class=\"sui-switch-card__title\">\n <span class=\"sui-switch-card__label\">{{ label() }}</span>\n @if (sublabel(); as sub) {\n <span class=\"sui-switch-card__sublabel\">{{ sub }}</span>\n }\n @if (badge()) {\n <span class=\"sui-switch-card__badge\">{{ badgeLabel() }}</span>\n }\n </div>\n @if (description(); as desc) {\n <p class=\"sui-switch-card__description\">{{ desc }}</p>\n }\n</div>\n\n<sui-switch\n class=\"sui-switch-card__switch\"\n [size]=\"size()\"\n [checked]=\"effectiveChecked()\"\n [disabled]=\"isDisabled()\"\n (checkedChange)=\"onSwitchChange($event)\"\n/>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:flex-start;gap:14px;padding:16px;border-radius:var(--sui-radius-12);background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-shadow-x-small);box-sizing:border-box;overflow:hidden;width:100%;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;outline:none;transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),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)}:host(:hover:not([data-sui-disabled]):not([data-sui-checked])){background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}:host([data-sui-checked]:not([data-sui-disabled])){border-color:var(--sui-primary-base);box-shadow:none}:host([data-sui-disabled]){cursor:not-allowed;box-shadow:none}:host(:focus-visible){box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-base)}.sui-switch-card__leading{flex-shrink:0;display:flex;align-items:center;justify-content:center}.sui-switch-card__leading-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;padding:10px;border-radius:999px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-shadow-x-small);box-sizing:border-box}.sui-switch-card__leading-emoji{width:20px;height:20px}:host([data-sui-disabled]) .sui-switch-card__leading-icon{box-shadow:none;opacity:.5}:host([data-sui-type=avatar]) .sui-switch-card__leading-avatar{width:40px;height:40px}.sui-switch-card__leading-card-provider{width:32px;height:24px;border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center}.sui-switch-card__leading-brand{width:40px;height:40px;overflow:hidden;display:flex;align-items:center;justify-content:center}.sui-switch-card__leading-company{width:40px;height:40px;border-radius:999px;overflow:hidden;display:flex;align-items:center;justify-content:center}.sui-switch-card__leading-img{width:100%;height:100%;object-fit:contain;display:block}:host([data-sui-disabled]) .sui-switch-card__leading{opacity:.5}.sui-switch-card__body{display:flex;flex-direction:column;gap:4px;flex:1 1 auto;min-width:0;align-self:stretch}.sui-switch-card__body:not(:has(.sui-switch-card__description)){justify-content:center}.sui-switch-card__title{display:flex;align-items:center;flex-wrap:wrap;gap:4px}.sui-switch-card__label{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950)}:host([data-sui-disabled]) .sui-switch-card__label{color:var(--sui-text-sub-600)}.sui-switch-card__sublabel{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600)}:host([data-sui-disabled]) .sui-switch-card__sublabel{color:var(--sui-text-soft-400)}.sui-switch-card__description{margin:0;font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600)}:host([data-sui-disabled]) .sui-switch-card__description{color:var(--sui-text-soft-400)}.sui-switch-card__badge{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border-radius:999px;background:var(--sui-state-information-light, #c0d5ff);color:var(--sui-state-information-dark, #122368);font-size:11px;font-weight:500;line-height:12px;letter-spacing:.22px;text-transform:uppercase;white-space:nowrap}:host([data-sui-disabled]) .sui-switch-card__badge{background:transparent;border:1px solid var(--sui-stroke-soft-200);color:var(--sui-text-disabled-300)}.sui-switch-card__switch{flex-shrink:0;align-self:flex-start;margin-top:2px}\n"], dependencies: [{ kind: "component", type: SuiSwitch, selector: "sui-switch", inputs: ["size", "checked", "disabled"], outputs: ["checkedChange"] }, { kind: "component", type: SuiEmoji, selector: "sui-emoji", inputs: ["name", "src", "size", "ariaLabel"] }, { kind: "component", type: SuiAvatar, selector: "sui-avatar", inputs: ["size", "src", "alt", "initials", "color", "status", "memojiSrc", "illustrationSrc", "icon", "companyLogoSrc", "topBadge", "bgColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14114
14158
|
}
|
|
14115
14159
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiSwitchCard, decorators: [{
|
|
14116
14160
|
type: Component,
|
|
@@ -14132,7 +14176,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
14132
14176
|
/* iOS WKWebView fix — ver CLAUDE.md "iOS :active stuck en custom buttons". */
|
|
14133
14177
|
'(touchstart)': '$event.currentTarget',
|
|
14134
14178
|
'(touchend)': '$any($event.currentTarget).blur()',
|
|
14135
|
-
}, template: "@if (hasLeading()) {\n <div class=\"sui-switch-card__leading\">\n @
|
|
14179
|
+
}, template: "@if (hasLeading()) {\n <div class=\"sui-switch-card__leading\">\n @if (type() === 'avatar') {\n <sui-avatar\n class=\"sui-switch-card__leading-avatar\"\n size=\"lg\"\n [src]=\"imageUrl()\"\n [initials]=\"initialsFromLabel()\" />\n } @else if (type() === 'left-icon' && emoji()) {\n <div class=\"sui-switch-card__leading-icon\">\n <sui-emoji class=\"sui-switch-card__leading-emoji\" [name]=\"emoji()!\" size=\"sm\" />\n </div>\n } @else if (imageUrl() && type() !== 'left-icon') {\n <!-- card-provider 32\u00D724 / brand 40\u00D740 bare / company 40\u00D740 circle \u2014 el box lo da la clase. -->\n <div [class]=\"leadingBoxClass()\">\n <img [src]=\"imageUrl()\" alt=\"\" class=\"sui-switch-card__leading-img\" />\n </div>\n } @else {\n <!-- \u00DANICO ng-content del slot: si se duplica por branch, Angular solo proyecta\n en el primero declarado y los dem\u00E1s types quedan vac\u00EDos (bug auditor\u00EDa). -->\n <div [class]=\"leadingBoxClass()\">\n <ng-content select=\"[sui-switch-card-leading]\" />\n </div>\n }\n </div>\n}\n\n<div class=\"sui-switch-card__body\">\n <div class=\"sui-switch-card__title\">\n <span class=\"sui-switch-card__label\">{{ label() }}</span>\n @if (sublabel(); as sub) {\n <span class=\"sui-switch-card__sublabel\">{{ sub }}</span>\n }\n @if (badge()) {\n <span class=\"sui-switch-card__badge\">{{ badgeLabel() }}</span>\n }\n </div>\n @if (description(); as desc) {\n <p class=\"sui-switch-card__description\">{{ desc }}</p>\n }\n</div>\n\n<sui-switch\n class=\"sui-switch-card__switch\"\n [size]=\"size()\"\n [checked]=\"effectiveChecked()\"\n [disabled]=\"isDisabled()\"\n (checkedChange)=\"onSwitchChange($event)\"\n/>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:flex-start;gap:14px;padding:16px;border-radius:var(--sui-radius-12);background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-shadow-x-small);box-sizing:border-box;overflow:hidden;width:100%;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;outline:none;transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),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)}:host(:hover:not([data-sui-disabled]):not([data-sui-checked])){background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}:host([data-sui-checked]:not([data-sui-disabled])){border-color:var(--sui-primary-base);box-shadow:none}:host([data-sui-disabled]){cursor:not-allowed;box-shadow:none}:host(:focus-visible){box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-base)}.sui-switch-card__leading{flex-shrink:0;display:flex;align-items:center;justify-content:center}.sui-switch-card__leading-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;padding:10px;border-radius:999px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-shadow-x-small);box-sizing:border-box}.sui-switch-card__leading-emoji{width:20px;height:20px}:host([data-sui-disabled]) .sui-switch-card__leading-icon{box-shadow:none;opacity:.5}:host([data-sui-type=avatar]) .sui-switch-card__leading-avatar{width:40px;height:40px}.sui-switch-card__leading-card-provider{width:32px;height:24px;border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center}.sui-switch-card__leading-brand{width:40px;height:40px;overflow:hidden;display:flex;align-items:center;justify-content:center}.sui-switch-card__leading-company{width:40px;height:40px;border-radius:999px;overflow:hidden;display:flex;align-items:center;justify-content:center}.sui-switch-card__leading-img{width:100%;height:100%;object-fit:contain;display:block}:host([data-sui-disabled]) .sui-switch-card__leading{opacity:.5}.sui-switch-card__body{display:flex;flex-direction:column;gap:4px;flex:1 1 auto;min-width:0;align-self:stretch}.sui-switch-card__body:not(:has(.sui-switch-card__description)){justify-content:center}.sui-switch-card__title{display:flex;align-items:center;flex-wrap:wrap;gap:4px}.sui-switch-card__label{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950)}:host([data-sui-disabled]) .sui-switch-card__label{color:var(--sui-text-sub-600)}.sui-switch-card__sublabel{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600)}:host([data-sui-disabled]) .sui-switch-card__sublabel{color:var(--sui-text-soft-400)}.sui-switch-card__description{margin:0;font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600)}:host([data-sui-disabled]) .sui-switch-card__description{color:var(--sui-text-soft-400)}.sui-switch-card__badge{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border-radius:999px;background:var(--sui-state-information-light, #c0d5ff);color:var(--sui-state-information-dark, #122368);font-size:11px;font-weight:500;line-height:12px;letter-spacing:.22px;text-transform:uppercase;white-space:nowrap}:host([data-sui-disabled]) .sui-switch-card__badge{background:transparent;border:1px solid var(--sui-stroke-soft-200);color:var(--sui-text-disabled-300)}.sui-switch-card__switch{flex-shrink:0;align-self:flex-start;margin-top:2px}\n"] }]
|
|
14136
14180
|
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], emoji: [{ type: i0.Input, args: [{ isSignal: true, alias: "emoji", required: false }] }], imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], badgeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeLabel", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
14137
14181
|
|
|
14138
14182
|
/**
|
|
@@ -15994,9 +16038,11 @@ class SuiTimePicker {
|
|
|
15994
16038
|
_onTouched = () => { };
|
|
15995
16039
|
constructor() {
|
|
15996
16040
|
// Mantener staged sincronizado cuando cambia value desde fuera (estando cerrado).
|
|
16041
|
+
// En inline open() es siempre false → esta misma condición hidrata la selección
|
|
16042
|
+
// desde [value] (antes el panel inline abría vacío y Aplicar borraba el valor).
|
|
15997
16043
|
effect(() => {
|
|
15998
16044
|
const v = this.value();
|
|
15999
|
-
if (!this.open()
|
|
16045
|
+
if (!this.open())
|
|
16000
16046
|
this.staged.set(v);
|
|
16001
16047
|
});
|
|
16002
16048
|
}
|