@ajuarezso/sui-design-system 0.11.5 → 0.13.0
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.
|
@@ -9176,6 +9176,17 @@ const ALLOWED_TYPES = ['image/jpeg', 'image/png', 'image/webp', 'image/gif'];
|
|
|
9176
9176
|
* - errorEvent: mensaje de error de validación
|
|
9177
9177
|
*/
|
|
9178
9178
|
class SuiImageUpload {
|
|
9179
|
+
/**
|
|
9180
|
+
* Ocupa el ancho del contenedor en vez del cuadrado fijo de `size`.
|
|
9181
|
+
*
|
|
9182
|
+
* Por defecto el componente es un cuadrado de lado `size` —pensado para
|
|
9183
|
+
* avatares y logos, donde eso es lo correcto—. Pero para subir un documento
|
|
9184
|
+
* (un comprobante de pago, una licencia) el cuadrado desperdicia el ancho
|
|
9185
|
+
* disponible y recorta imágenes verticales, que es la forma natural de una
|
|
9186
|
+
* captura de celular. En fluido el alto lo da el contenido, así que el botón
|
|
9187
|
+
* de quitar deja de desbordarse.
|
|
9188
|
+
*/
|
|
9189
|
+
fluid = input(false, ...(ngDevMode ? [{ debugName: "fluid" }] : /* istanbul ignore next */ []));
|
|
9179
9190
|
shape = input('circle', ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
|
|
9180
9191
|
size = input('lg', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
9181
9192
|
src = model(null, ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
|
|
@@ -9303,7 +9314,7 @@ class SuiImageUpload {
|
|
|
9303
9314
|
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
|
9304
9315
|
}
|
|
9305
9316
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiImageUpload, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9306
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiImageUpload, isStandalone: true, selector: "sui-image-upload", inputs: { shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { src: "srcChange", imageSelected: "imageSelected", removed: "removed", editRequested: "editRequested", errorEvent: "errorEvent" }, host: { listeners: { "touchstart": "$event.currentTarget", "touchend": "$any($event.currentTarget).blur()", "click": "onHostClick()", "keydown.enter": "onHostClick()", "keydown.space": "onHostClick(); $event.preventDefault()", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "attr.title": "null", "attr.data-sui-shape": "shape()", "attr.data-sui-size": "size()", "attr.data-sui-state": "state()", "attr.data-sui-disabled": "disabled() ? \"\" : null", "attr.role": "\"button\"", "attr.tabindex": "disabled() ? -1 : 0", "style.width.px": "sizePx()", "style.height.px": "sizePx()" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["imgInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Estado: sin imagen (empty / dragover) -->\n@if (!hasSrc()) {\n <div class=\"sui-image-upload__empty\">\n <!-- Icono c\u00E1mara \u2014 sui-icon (DS), no SVG inline -->\n <div class=\"sui-image-upload__icon\">\n <sui-icon name=\"image-add-line\" [size]=\"iconSize()\" aria-hidden=\"true\" />\n </div>\n\n <div class=\"sui-image-upload__text\">\n <p class=\"sui-image-upload__title\">{{ resolvedTitle() }}</p>\n <p class=\"sui-image-upload__subtitle\">{{ resolvedSubtitle() }}</p>\n </div>\n\n @if (internalError()) {\n <p class=\"sui-image-upload__error\">{{ internalError() }}</p>\n }\n </div>\n}\n\n<!-- Estado: con imagen (filled) -->\n@if (hasSrc()) {\n <div class=\"sui-image-upload__preview\" [class.sui-image-upload__preview--editable]=\"editable()\">\n <img\n class=\"sui-image-upload__img\"\n [src]=\"src()\"\n alt=\"Preview\"\n draggable=\"false\" />\n\n @if (editable()) {\n <!-- Modo editable: controles de \u00EDcono en esquina (editar + tacho). -->\n <div class=\"sui-image-upload__controls\">\n <button\n type=\"button\"\n class=\"sui-image-upload__ctrl\"\n aria-label=\"Editar imagen\"\n [disabled]=\"disabled()\"\n (click)=\"onEditClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\">\n <sui-icon name=\"pencil-line\" [size]=\"16\" aria-hidden=\"true\" />\n </button>\n <button\n type=\"button\"\n class=\"sui-image-upload__ctrl sui-image-upload__ctrl--danger\"\n aria-label=\"Quitar imagen\"\n [disabled]=\"disabled()\"\n (click)=\"onRemoveClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\">\n <sui-icon name=\"delete-bin-line\" [size]=\"16\" aria-hidden=\"true\" />\n </button>\n </div>\n } @else {\n <!-- Overlay hover con icono lapiz (re-subir) -->\n <div class=\"sui-image-upload__overlay\" (click)=\"onChangeClick($event)\">\n <div class=\"sui-image-upload__overlay-icon\">\n <sui-icon name=\"pencil-line\" [size]=\"16\" aria-hidden=\"true\" />\n </div>\n </div>\n }\n </div>\n\n @if (!editable()) {\n <!-- Bot\u00F3n Quitar debajo del preview \u2014 sui-button stroke (DS), no <button> custom.\n Figma node 452:699 \"Remove\" = stroke error; aqu\u00ED usamos color=error para\n que el affordance de borrado sea consistente con el DS. -->\n <sui-button\n class=\"sui-image-upload__remove\"\n variant=\"stroke\"\n color=\"error\"\n size=\"2xsmall\"\n [disabled]=\"disabled()\"\n (click)=\"onRemoveClick($event)\">\n Quitar\n </sui-button>\n }\n}\n\n<!-- Input file oculto (siempre presente para el click) -->\n<input\n #imgInput\n type=\"file\"\n class=\"sui-image-upload__input\"\n accept=\"image/jpeg,image/png,image/webp,image/gif\"\n [disabled]=\"disabled()\"\n (change)=\"onInputChange($event)\" />\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--sui-font-sans, var(--font-sans, sans-serif));cursor:pointer;flex-shrink:0}:host([data-sui-disabled]){cursor:not-allowed;opacity:.5}.sui-image-upload__empty{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px dashed var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #fff);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(0, 0, 0, .06));text-align:center;padding:12px 8px;box-sizing:border-box;transition:border-color var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)),background var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1))}:host([data-sui-shape=circle]) .sui-image-upload__empty{border-radius:999px}:host([data-sui-shape=rect]) .sui-image-upload__empty{border-radius:var(--sui-radius-12, 12px)}:host(:hover:not([data-sui-disabled])) .sui-image-upload__empty{border-color:var(--sui-stroke-sub-300, #d1d1d1);background:var(--sui-bg-weak-50, #f7f7f7)}:host([data-sui-state=dragover]) .sui-image-upload__empty{border-color:var(--sui-primary-base, #fa7319);background:var(--sui-primary-alpha-10, rgba(250, 115, 25, .1019607843))}.sui-image-upload__icon{width:32px;height:32px;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);display:flex;align-items:center;justify-content:center;color:var(--sui-icon-sub-600, #5c5c5c);flex-shrink:0}:host([data-sui-size=xl]) .sui-image-upload__icon{width:40px;height:40px}:host([data-sui-state=dragover]) .sui-image-upload__icon{background:var(--sui-primary-alpha-16, rgba(250, 115, 25, .1607843137));color:var(--sui-primary-base, #fa7319)}.sui-image-upload__text{display:flex;flex-direction:column;gap:2px;align-items:center}.sui-image-upload__title{margin:0;font-size:12px;font-weight:500;line-height:16px;color:var(--sui-text-strong-950, #171717)}:host([data-sui-size=xl]) .sui-image-upload__title{font-size:13px;line-height:18px}.sui-image-upload__subtitle{margin:0;font-size:11px;font-weight:400;line-height:15px;color:var(--sui-text-sub-600, #5c5c5c)}:host([data-sui-size=sm]) .sui-image-upload__subtitle{display:none}:host([data-sui-size=xl]) .sui-image-upload__subtitle{font-size:12px;line-height:16px}.sui-image-upload__error{margin:2px 0 0;font-size:10px;line-height:14px;color:var(--sui-state-error-base, #fb3748);text-align:center}.sui-image-upload__preview{position:relative;width:100%;height:100%;overflow:hidden;box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(0, 0, 0, .06));flex-shrink:0}:host([data-sui-shape=circle]) .sui-image-upload__preview{border-radius:999px}:host([data-sui-shape=rect]) .sui-image-upload__preview{border-radius:var(--sui-radius-12, 12px)}.sui-image-upload__img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-select:none;user-select:none}.sui-image-upload__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0006;opacity:0;transition:opacity var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1));cursor:pointer}:host(:hover:not([data-sui-disabled])) .sui-image-upload__overlay{opacity:1}.sui-image-upload__overlay-icon{width:32px;height:32px;border-radius:999px;background:#fff3;display:flex;align-items:center;justify-content:center;color:var(--sui-static-white, #fff)}.sui-image-upload__preview--editable{cursor:default}.sui-image-upload__controls{position:absolute;top:8px;right:8px;display:flex;gap:6px;z-index:2}.sui-image-upload__ctrl{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:none;background:#0000008c;color:var(--sui-static-white, #fff);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease,transform .12s ease}.sui-image-upload__ctrl:active{transform:scale(.92)}.sui-image-upload__ctrl:disabled{opacity:.5;cursor:not-allowed}.sui-image-upload__ctrl--danger:active{background:var(--sui-state-error-base, #fb3748)}.sui-image-upload__remove{flex-shrink:0}.sui-image-upload__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "component", type: SuiButton, selector: "sui-button", inputs: ["variant", "color", "size", "onlyIcon", "disabled", "leftIcon", "rightIcon", "type"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9317
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiImageUpload, isStandalone: true, selector: "sui-image-upload", inputs: { fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { src: "srcChange", imageSelected: "imageSelected", removed: "removed", editRequested: "editRequested", errorEvent: "errorEvent" }, host: { listeners: { "touchstart": "$event.currentTarget", "touchend": "$any($event.currentTarget).blur()", "click": "onHostClick()", "keydown.enter": "onHostClick()", "keydown.space": "onHostClick(); $event.preventDefault()", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "attr.title": "null", "attr.data-sui-shape": "shape()", "attr.data-sui-size": "size()", "attr.data-sui-state": "state()", "attr.data-sui-disabled": "disabled() ? \"\" : null", "attr.role": "\"button\"", "attr.tabindex": "disabled() ? -1 : 0", "attr.data-sui-fluid": "fluid() ? \"\" : null", "style.width.px": "fluid() ? null : sizePx()", "style.height.px": "fluid() ? null : sizePx()" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["imgInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Estado: sin imagen (empty / dragover) -->\n@if (!hasSrc()) {\n <div class=\"sui-image-upload__empty\">\n <!-- Icono c\u00E1mara \u2014 sui-icon (DS), no SVG inline -->\n <div class=\"sui-image-upload__icon\">\n <sui-icon name=\"image-add-line\" [size]=\"iconSize()\" aria-hidden=\"true\" />\n </div>\n\n <div class=\"sui-image-upload__text\">\n <p class=\"sui-image-upload__title\">{{ resolvedTitle() }}</p>\n <p class=\"sui-image-upload__subtitle\">{{ resolvedSubtitle() }}</p>\n </div>\n\n @if (internalError()) {\n <p class=\"sui-image-upload__error\">{{ internalError() }}</p>\n }\n </div>\n}\n\n<!-- Estado: con imagen (filled) -->\n@if (hasSrc()) {\n <div class=\"sui-image-upload__preview\" [class.sui-image-upload__preview--editable]=\"editable()\">\n <img\n class=\"sui-image-upload__img\"\n [src]=\"src()\"\n alt=\"Preview\"\n draggable=\"false\" />\n\n @if (editable()) {\n <!-- Modo editable: controles de \u00EDcono en esquina (editar + tacho). -->\n <div class=\"sui-image-upload__controls\">\n <button\n type=\"button\"\n class=\"sui-image-upload__ctrl\"\n aria-label=\"Editar imagen\"\n [disabled]=\"disabled()\"\n (click)=\"onEditClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\">\n <sui-icon name=\"pencil-line\" [size]=\"16\" aria-hidden=\"true\" />\n </button>\n <button\n type=\"button\"\n class=\"sui-image-upload__ctrl sui-image-upload__ctrl--danger\"\n aria-label=\"Quitar imagen\"\n [disabled]=\"disabled()\"\n (click)=\"onRemoveClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\">\n <sui-icon name=\"delete-bin-line\" [size]=\"16\" aria-hidden=\"true\" />\n </button>\n </div>\n } @else {\n <!-- Overlay hover con icono lapiz (re-subir) -->\n <div class=\"sui-image-upload__overlay\" (click)=\"onChangeClick($event)\">\n <div class=\"sui-image-upload__overlay-icon\">\n <sui-icon name=\"pencil-line\" [size]=\"16\" aria-hidden=\"true\" />\n </div>\n </div>\n }\n </div>\n\n @if (!editable()) {\n <!-- Bot\u00F3n Quitar debajo del preview \u2014 sui-button stroke (DS), no <button> custom.\n Figma node 452:699 \"Remove\" = stroke error; aqu\u00ED usamos color=error para\n que el affordance de borrado sea consistente con el DS. -->\n <sui-button\n class=\"sui-image-upload__remove\"\n variant=\"stroke\"\n color=\"error\"\n size=\"2xsmall\"\n [disabled]=\"disabled()\"\n (click)=\"onRemoveClick($event)\">\n Quitar\n </sui-button>\n }\n}\n\n<!-- Input file oculto (siempre presente para el click) -->\n<input\n #imgInput\n type=\"file\"\n class=\"sui-image-upload__input\"\n accept=\"image/jpeg,image/png,image/webp,image/gif\"\n [disabled]=\"disabled()\"\n (change)=\"onInputChange($event)\" />\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--sui-font-sans, var(--font-sans, sans-serif));cursor:pointer;flex-shrink:0}:host([data-sui-fluid]){display:block;width:100%}:host([data-sui-fluid]) .sui-image-upload__empty{height:auto;min-height:132px;padding:20px 16px}:host([data-sui-fluid]) .sui-image-upload__preview{height:auto;max-height:320px}:host([data-sui-fluid]) .sui-image-upload__img{height:auto;max-height:320px;object-fit:contain;background:var(--sui-bg-weak-50, #f7f7f7)}:host([data-sui-fluid]) .sui-image-upload__remove{margin-top:8px}:host([data-sui-disabled]){cursor:not-allowed;opacity:.5}.sui-image-upload__empty{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px dashed var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #fff);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(0, 0, 0, .06));text-align:center;padding:12px 8px;box-sizing:border-box;transition:border-color var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)),background var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1))}:host([data-sui-shape=circle]) .sui-image-upload__empty{border-radius:999px}:host([data-sui-shape=rect]) .sui-image-upload__empty{border-radius:var(--sui-radius-12, 12px)}:host(:hover:not([data-sui-disabled])) .sui-image-upload__empty{border-color:var(--sui-stroke-sub-300, #d1d1d1);background:var(--sui-bg-weak-50, #f7f7f7)}:host([data-sui-state=dragover]) .sui-image-upload__empty{border-color:var(--sui-primary-base, #fa7319);background:var(--sui-primary-alpha-10, rgba(250, 115, 25, .1019607843))}.sui-image-upload__icon{width:32px;height:32px;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);display:flex;align-items:center;justify-content:center;color:var(--sui-icon-sub-600, #5c5c5c);flex-shrink:0}:host([data-sui-size=xl]) .sui-image-upload__icon{width:40px;height:40px}:host([data-sui-state=dragover]) .sui-image-upload__icon{background:var(--sui-primary-alpha-16, rgba(250, 115, 25, .1607843137));color:var(--sui-primary-base, #fa7319)}.sui-image-upload__text{display:flex;flex-direction:column;gap:2px;align-items:center}.sui-image-upload__title{margin:0;font-size:12px;font-weight:500;line-height:16px;color:var(--sui-text-strong-950, #171717)}:host([data-sui-size=xl]) .sui-image-upload__title{font-size:13px;line-height:18px}.sui-image-upload__subtitle{margin:0;font-size:11px;font-weight:400;line-height:15px;color:var(--sui-text-sub-600, #5c5c5c)}:host([data-sui-size=sm]) .sui-image-upload__subtitle{display:none}:host([data-sui-size=xl]) .sui-image-upload__subtitle{font-size:12px;line-height:16px}.sui-image-upload__error{margin:2px 0 0;font-size:10px;line-height:14px;color:var(--sui-state-error-base, #fb3748);text-align:center}.sui-image-upload__preview{position:relative;width:100%;height:100%;overflow:hidden;box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(0, 0, 0, .06));flex-shrink:0}:host([data-sui-shape=circle]) .sui-image-upload__preview{border-radius:999px}:host([data-sui-shape=rect]) .sui-image-upload__preview{border-radius:var(--sui-radius-12, 12px)}.sui-image-upload__img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-select:none;user-select:none}.sui-image-upload__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0006;opacity:0;transition:opacity var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1));cursor:pointer}:host(:hover:not([data-sui-disabled])) .sui-image-upload__overlay{opacity:1}.sui-image-upload__overlay-icon{width:32px;height:32px;border-radius:999px;background:#fff3;display:flex;align-items:center;justify-content:center;color:var(--sui-static-white, #fff)}.sui-image-upload__preview--editable{cursor:default}.sui-image-upload__controls{position:absolute;top:8px;right:8px;display:flex;gap:6px;z-index:2}.sui-image-upload__ctrl{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:none;background:#0000008c;color:var(--sui-static-white, #fff);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease,transform .12s ease}.sui-image-upload__ctrl:active{transform:scale(.92)}.sui-image-upload__ctrl:disabled{opacity:.5;cursor:not-allowed}.sui-image-upload__ctrl--danger:active{background:var(--sui-state-error-base, #fb3748)}.sui-image-upload__remove{flex-shrink:0}.sui-image-upload__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "component", type: SuiButton, selector: "sui-button", inputs: ["variant", "color", "size", "onlyIcon", "disabled", "leftIcon", "rightIcon", "type"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9307
9318
|
}
|
|
9308
9319
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiImageUpload, decorators: [{
|
|
9309
9320
|
type: Component,
|
|
@@ -9316,8 +9327,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
9316
9327
|
'[attr.data-sui-disabled]': 'disabled() ? "" : null',
|
|
9317
9328
|
'[attr.role]': '"button"',
|
|
9318
9329
|
'[attr.tabindex]': 'disabled() ? -1 : 0',
|
|
9319
|
-
'[
|
|
9320
|
-
|
|
9330
|
+
'[attr.data-sui-fluid]': 'fluid() ? "" : null',
|
|
9331
|
+
/* En modo fluido el tamaño lo pone el contenedor, no el `size`. */
|
|
9332
|
+
'[style.width.px]': 'fluid() ? null : sizePx()',
|
|
9333
|
+
'[style.height.px]': 'fluid() ? null : sizePx()',
|
|
9321
9334
|
/* iOS WKWebView :active fix — CRITICO para pages standalone */
|
|
9322
9335
|
'(touchstart)': '$event.currentTarget',
|
|
9323
9336
|
'(touchend)': '$any($event.currentTarget).blur()',
|
|
@@ -9327,8 +9340,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
9327
9340
|
'(dragover)': 'onDragOver($event)',
|
|
9328
9341
|
'(dragleave)': 'onDragLeave($event)',
|
|
9329
9342
|
'(drop)': 'onDrop($event)',
|
|
9330
|
-
}, template: "<!-- Estado: sin imagen (empty / dragover) -->\n@if (!hasSrc()) {\n <div class=\"sui-image-upload__empty\">\n <!-- Icono c\u00E1mara \u2014 sui-icon (DS), no SVG inline -->\n <div class=\"sui-image-upload__icon\">\n <sui-icon name=\"image-add-line\" [size]=\"iconSize()\" aria-hidden=\"true\" />\n </div>\n\n <div class=\"sui-image-upload__text\">\n <p class=\"sui-image-upload__title\">{{ resolvedTitle() }}</p>\n <p class=\"sui-image-upload__subtitle\">{{ resolvedSubtitle() }}</p>\n </div>\n\n @if (internalError()) {\n <p class=\"sui-image-upload__error\">{{ internalError() }}</p>\n }\n </div>\n}\n\n<!-- Estado: con imagen (filled) -->\n@if (hasSrc()) {\n <div class=\"sui-image-upload__preview\" [class.sui-image-upload__preview--editable]=\"editable()\">\n <img\n class=\"sui-image-upload__img\"\n [src]=\"src()\"\n alt=\"Preview\"\n draggable=\"false\" />\n\n @if (editable()) {\n <!-- Modo editable: controles de \u00EDcono en esquina (editar + tacho). -->\n <div class=\"sui-image-upload__controls\">\n <button\n type=\"button\"\n class=\"sui-image-upload__ctrl\"\n aria-label=\"Editar imagen\"\n [disabled]=\"disabled()\"\n (click)=\"onEditClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\">\n <sui-icon name=\"pencil-line\" [size]=\"16\" aria-hidden=\"true\" />\n </button>\n <button\n type=\"button\"\n class=\"sui-image-upload__ctrl sui-image-upload__ctrl--danger\"\n aria-label=\"Quitar imagen\"\n [disabled]=\"disabled()\"\n (click)=\"onRemoveClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\">\n <sui-icon name=\"delete-bin-line\" [size]=\"16\" aria-hidden=\"true\" />\n </button>\n </div>\n } @else {\n <!-- Overlay hover con icono lapiz (re-subir) -->\n <div class=\"sui-image-upload__overlay\" (click)=\"onChangeClick($event)\">\n <div class=\"sui-image-upload__overlay-icon\">\n <sui-icon name=\"pencil-line\" [size]=\"16\" aria-hidden=\"true\" />\n </div>\n </div>\n }\n </div>\n\n @if (!editable()) {\n <!-- Bot\u00F3n Quitar debajo del preview \u2014 sui-button stroke (DS), no <button> custom.\n Figma node 452:699 \"Remove\" = stroke error; aqu\u00ED usamos color=error para\n que el affordance de borrado sea consistente con el DS. -->\n <sui-button\n class=\"sui-image-upload__remove\"\n variant=\"stroke\"\n color=\"error\"\n size=\"2xsmall\"\n [disabled]=\"disabled()\"\n (click)=\"onRemoveClick($event)\">\n Quitar\n </sui-button>\n }\n}\n\n<!-- Input file oculto (siempre presente para el click) -->\n<input\n #imgInput\n type=\"file\"\n class=\"sui-image-upload__input\"\n accept=\"image/jpeg,image/png,image/webp,image/gif\"\n [disabled]=\"disabled()\"\n (change)=\"onInputChange($event)\" />\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--sui-font-sans, var(--font-sans, sans-serif));cursor:pointer;flex-shrink:0}:host([data-sui-disabled]){cursor:not-allowed;opacity:.5}.sui-image-upload__empty{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px dashed var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #fff);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(0, 0, 0, .06));text-align:center;padding:12px 8px;box-sizing:border-box;transition:border-color var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)),background var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1))}:host([data-sui-shape=circle]) .sui-image-upload__empty{border-radius:999px}:host([data-sui-shape=rect]) .sui-image-upload__empty{border-radius:var(--sui-radius-12, 12px)}:host(:hover:not([data-sui-disabled])) .sui-image-upload__empty{border-color:var(--sui-stroke-sub-300, #d1d1d1);background:var(--sui-bg-weak-50, #f7f7f7)}:host([data-sui-state=dragover]) .sui-image-upload__empty{border-color:var(--sui-primary-base, #fa7319);background:var(--sui-primary-alpha-10, rgba(250, 115, 25, .1019607843))}.sui-image-upload__icon{width:32px;height:32px;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);display:flex;align-items:center;justify-content:center;color:var(--sui-icon-sub-600, #5c5c5c);flex-shrink:0}:host([data-sui-size=xl]) .sui-image-upload__icon{width:40px;height:40px}:host([data-sui-state=dragover]) .sui-image-upload__icon{background:var(--sui-primary-alpha-16, rgba(250, 115, 25, .1607843137));color:var(--sui-primary-base, #fa7319)}.sui-image-upload__text{display:flex;flex-direction:column;gap:2px;align-items:center}.sui-image-upload__title{margin:0;font-size:12px;font-weight:500;line-height:16px;color:var(--sui-text-strong-950, #171717)}:host([data-sui-size=xl]) .sui-image-upload__title{font-size:13px;line-height:18px}.sui-image-upload__subtitle{margin:0;font-size:11px;font-weight:400;line-height:15px;color:var(--sui-text-sub-600, #5c5c5c)}:host([data-sui-size=sm]) .sui-image-upload__subtitle{display:none}:host([data-sui-size=xl]) .sui-image-upload__subtitle{font-size:12px;line-height:16px}.sui-image-upload__error{margin:2px 0 0;font-size:10px;line-height:14px;color:var(--sui-state-error-base, #fb3748);text-align:center}.sui-image-upload__preview{position:relative;width:100%;height:100%;overflow:hidden;box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(0, 0, 0, .06));flex-shrink:0}:host([data-sui-shape=circle]) .sui-image-upload__preview{border-radius:999px}:host([data-sui-shape=rect]) .sui-image-upload__preview{border-radius:var(--sui-radius-12, 12px)}.sui-image-upload__img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-select:none;user-select:none}.sui-image-upload__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0006;opacity:0;transition:opacity var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1));cursor:pointer}:host(:hover:not([data-sui-disabled])) .sui-image-upload__overlay{opacity:1}.sui-image-upload__overlay-icon{width:32px;height:32px;border-radius:999px;background:#fff3;display:flex;align-items:center;justify-content:center;color:var(--sui-static-white, #fff)}.sui-image-upload__preview--editable{cursor:default}.sui-image-upload__controls{position:absolute;top:8px;right:8px;display:flex;gap:6px;z-index:2}.sui-image-upload__ctrl{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:none;background:#0000008c;color:var(--sui-static-white, #fff);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease,transform .12s ease}.sui-image-upload__ctrl:active{transform:scale(.92)}.sui-image-upload__ctrl:disabled{opacity:.5;cursor:not-allowed}.sui-image-upload__ctrl--danger:active{background:var(--sui-state-error-base, #fb3748)}.sui-image-upload__remove{flex-shrink:0}.sui-image-upload__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
|
|
9331
|
-
}], propDecorators: { shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }, { type: i0.Output, args: ["srcChange"] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], imageSelected: [{ type: i0.Output, args: ["imageSelected"] }], removed: [{ type: i0.Output, args: ["removed"] }], editRequested: [{ type: i0.Output, args: ["editRequested"] }], errorEvent: [{ type: i0.Output, args: ["errorEvent"] }], inputRef: [{ type: i0.ViewChild, args: ['imgInput', { isSignal: true }] }] } });
|
|
9343
|
+
}, template: "<!-- Estado: sin imagen (empty / dragover) -->\n@if (!hasSrc()) {\n <div class=\"sui-image-upload__empty\">\n <!-- Icono c\u00E1mara \u2014 sui-icon (DS), no SVG inline -->\n <div class=\"sui-image-upload__icon\">\n <sui-icon name=\"image-add-line\" [size]=\"iconSize()\" aria-hidden=\"true\" />\n </div>\n\n <div class=\"sui-image-upload__text\">\n <p class=\"sui-image-upload__title\">{{ resolvedTitle() }}</p>\n <p class=\"sui-image-upload__subtitle\">{{ resolvedSubtitle() }}</p>\n </div>\n\n @if (internalError()) {\n <p class=\"sui-image-upload__error\">{{ internalError() }}</p>\n }\n </div>\n}\n\n<!-- Estado: con imagen (filled) -->\n@if (hasSrc()) {\n <div class=\"sui-image-upload__preview\" [class.sui-image-upload__preview--editable]=\"editable()\">\n <img\n class=\"sui-image-upload__img\"\n [src]=\"src()\"\n alt=\"Preview\"\n draggable=\"false\" />\n\n @if (editable()) {\n <!-- Modo editable: controles de \u00EDcono en esquina (editar + tacho). -->\n <div class=\"sui-image-upload__controls\">\n <button\n type=\"button\"\n class=\"sui-image-upload__ctrl\"\n aria-label=\"Editar imagen\"\n [disabled]=\"disabled()\"\n (click)=\"onEditClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\">\n <sui-icon name=\"pencil-line\" [size]=\"16\" aria-hidden=\"true\" />\n </button>\n <button\n type=\"button\"\n class=\"sui-image-upload__ctrl sui-image-upload__ctrl--danger\"\n aria-label=\"Quitar imagen\"\n [disabled]=\"disabled()\"\n (click)=\"onRemoveClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\">\n <sui-icon name=\"delete-bin-line\" [size]=\"16\" aria-hidden=\"true\" />\n </button>\n </div>\n } @else {\n <!-- Overlay hover con icono lapiz (re-subir) -->\n <div class=\"sui-image-upload__overlay\" (click)=\"onChangeClick($event)\">\n <div class=\"sui-image-upload__overlay-icon\">\n <sui-icon name=\"pencil-line\" [size]=\"16\" aria-hidden=\"true\" />\n </div>\n </div>\n }\n </div>\n\n @if (!editable()) {\n <!-- Bot\u00F3n Quitar debajo del preview \u2014 sui-button stroke (DS), no <button> custom.\n Figma node 452:699 \"Remove\" = stroke error; aqu\u00ED usamos color=error para\n que el affordance de borrado sea consistente con el DS. -->\n <sui-button\n class=\"sui-image-upload__remove\"\n variant=\"stroke\"\n color=\"error\"\n size=\"2xsmall\"\n [disabled]=\"disabled()\"\n (click)=\"onRemoveClick($event)\">\n Quitar\n </sui-button>\n }\n}\n\n<!-- Input file oculto (siempre presente para el click) -->\n<input\n #imgInput\n type=\"file\"\n class=\"sui-image-upload__input\"\n accept=\"image/jpeg,image/png,image/webp,image/gif\"\n [disabled]=\"disabled()\"\n (change)=\"onInputChange($event)\" />\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--sui-font-sans, var(--font-sans, sans-serif));cursor:pointer;flex-shrink:0}:host([data-sui-fluid]){display:block;width:100%}:host([data-sui-fluid]) .sui-image-upload__empty{height:auto;min-height:132px;padding:20px 16px}:host([data-sui-fluid]) .sui-image-upload__preview{height:auto;max-height:320px}:host([data-sui-fluid]) .sui-image-upload__img{height:auto;max-height:320px;object-fit:contain;background:var(--sui-bg-weak-50, #f7f7f7)}:host([data-sui-fluid]) .sui-image-upload__remove{margin-top:8px}:host([data-sui-disabled]){cursor:not-allowed;opacity:.5}.sui-image-upload__empty{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px dashed var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #fff);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(0, 0, 0, .06));text-align:center;padding:12px 8px;box-sizing:border-box;transition:border-color var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)),background var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1))}:host([data-sui-shape=circle]) .sui-image-upload__empty{border-radius:999px}:host([data-sui-shape=rect]) .sui-image-upload__empty{border-radius:var(--sui-radius-12, 12px)}:host(:hover:not([data-sui-disabled])) .sui-image-upload__empty{border-color:var(--sui-stroke-sub-300, #d1d1d1);background:var(--sui-bg-weak-50, #f7f7f7)}:host([data-sui-state=dragover]) .sui-image-upload__empty{border-color:var(--sui-primary-base, #fa7319);background:var(--sui-primary-alpha-10, rgba(250, 115, 25, .1019607843))}.sui-image-upload__icon{width:32px;height:32px;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);display:flex;align-items:center;justify-content:center;color:var(--sui-icon-sub-600, #5c5c5c);flex-shrink:0}:host([data-sui-size=xl]) .sui-image-upload__icon{width:40px;height:40px}:host([data-sui-state=dragover]) .sui-image-upload__icon{background:var(--sui-primary-alpha-16, rgba(250, 115, 25, .1607843137));color:var(--sui-primary-base, #fa7319)}.sui-image-upload__text{display:flex;flex-direction:column;gap:2px;align-items:center}.sui-image-upload__title{margin:0;font-size:12px;font-weight:500;line-height:16px;color:var(--sui-text-strong-950, #171717)}:host([data-sui-size=xl]) .sui-image-upload__title{font-size:13px;line-height:18px}.sui-image-upload__subtitle{margin:0;font-size:11px;font-weight:400;line-height:15px;color:var(--sui-text-sub-600, #5c5c5c)}:host([data-sui-size=sm]) .sui-image-upload__subtitle{display:none}:host([data-sui-size=xl]) .sui-image-upload__subtitle{font-size:12px;line-height:16px}.sui-image-upload__error{margin:2px 0 0;font-size:10px;line-height:14px;color:var(--sui-state-error-base, #fb3748);text-align:center}.sui-image-upload__preview{position:relative;width:100%;height:100%;overflow:hidden;box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(0, 0, 0, .06));flex-shrink:0}:host([data-sui-shape=circle]) .sui-image-upload__preview{border-radius:999px}:host([data-sui-shape=rect]) .sui-image-upload__preview{border-radius:var(--sui-radius-12, 12px)}.sui-image-upload__img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-select:none;user-select:none}.sui-image-upload__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0006;opacity:0;transition:opacity var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1));cursor:pointer}:host(:hover:not([data-sui-disabled])) .sui-image-upload__overlay{opacity:1}.sui-image-upload__overlay-icon{width:32px;height:32px;border-radius:999px;background:#fff3;display:flex;align-items:center;justify-content:center;color:var(--sui-static-white, #fff)}.sui-image-upload__preview--editable{cursor:default}.sui-image-upload__controls{position:absolute;top:8px;right:8px;display:flex;gap:6px;z-index:2}.sui-image-upload__ctrl{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:none;background:#0000008c;color:var(--sui-static-white, #fff);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease,transform .12s ease}.sui-image-upload__ctrl:active{transform:scale(.92)}.sui-image-upload__ctrl:disabled{opacity:.5;cursor:not-allowed}.sui-image-upload__ctrl--danger:active{background:var(--sui-state-error-base, #fb3748)}.sui-image-upload__remove{flex-shrink:0}.sui-image-upload__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
|
|
9344
|
+
}], propDecorators: { fluid: [{ type: i0.Input, args: [{ isSignal: true, alias: "fluid", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }, { type: i0.Output, args: ["srcChange"] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], imageSelected: [{ type: i0.Output, args: ["imageSelected"] }], removed: [{ type: i0.Output, args: ["removed"] }], editRequested: [{ type: i0.Output, args: ["editRequested"] }], errorEvent: [{ type: i0.Output, args: ["errorEvent"] }], inputRef: [{ type: i0.ViewChild, args: ['imgInput', { isSignal: true }] }] } });
|
|
9332
9345
|
|
|
9333
9346
|
/**
|
|
9334
9347
|
* SUI Inline Input — SUI Design System 2.0
|
|
@@ -14502,6 +14515,7 @@ class SuiSidebar {
|
|
|
14502
14515
|
/** Submit del search input (Enter). Emite el valor actual. */
|
|
14503
14516
|
searchSubmitted = output();
|
|
14504
14517
|
destroyRef = inject(DestroyRef);
|
|
14518
|
+
host = inject(ElementRef);
|
|
14505
14519
|
/**
|
|
14506
14520
|
* Viewport móvil (≤767px — canon bp.medium del proyecto). Gatea el backdrop,
|
|
14507
14521
|
* el aria-hidden/inert del drawer cerrado, el Escape y el auto-close por
|
|
@@ -14590,6 +14604,11 @@ class SuiSidebar {
|
|
|
14590
14604
|
ev.stopPropagation();
|
|
14591
14605
|
this.profileClicked.emit();
|
|
14592
14606
|
}
|
|
14607
|
+
/** Limpia el search (X visible solo con texto) y devuelve el foco al input. */
|
|
14608
|
+
clearSearch() {
|
|
14609
|
+
this.searchValue.set('');
|
|
14610
|
+
this.host.nativeElement.querySelector('.sui-sidebar__search-input')?.focus();
|
|
14611
|
+
}
|
|
14593
14612
|
onSearchInput(value) {
|
|
14594
14613
|
this.searchValue.set(value);
|
|
14595
14614
|
}
|
|
@@ -14597,7 +14616,7 @@ class SuiSidebar {
|
|
|
14597
14616
|
this.searchSubmitted.emit(this.searchValue());
|
|
14598
14617
|
}
|
|
14599
14618
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14600
|
-
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 }, brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: false, transformFunction: null }, showHeaderButton: { classPropertyName: "showHeaderButton", publicName: "showHeaderButton", isSignal: true, isRequired: false, transformFunction: null }, headerButtonActive: { classPropertyName: "headerButtonActive", publicName: "headerButtonActive", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", 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 }, mobileOpen: { classPropertyName: "mobileOpen", publicName: "mobileOpen", isSignal: true, isRequired: false, transformFunction: null }, closeOnItemClick: { classPropertyName: "closeOnItemClick", publicName: "closeOnItemClick", 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", mobileOpen: "mobileOpenChange", itemClicked: "itemClicked", logoutClicked: "logoutClicked", backdropClicked: "backdropClicked", headerButtonClicked: "headerButtonClicked", profileClicked: "profileClicked", searchSubmitted: "searchSubmitted" }, host: { listeners: { "document:keydown.escape": "onEscapeKey()" }, properties: { "attr.title": "null", "attr.data-sui-open": "mobileOpen() ? \"\" : null", "attr.data-sui-mobile-mode": "mobileMode()", "attr.data-sui-collapsed": "collapsed() ? \"\" : null", "attr.data-sui-indicator": "indicatorColor()" } }, ngImport: i0, template: "<!-- Backdrop solo en m\u00F3vil: en desktop el sidebar es fijo y mobileOpen es inocuo.\n Color canon = overlay del sui-modal (Figma 480:2474): rgba(51,51,51,0.24). -->\n@if (isMobile() && showBackdrop() && mobileOpen()) {\n <div class=\"sui-sidebar-backdrop\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\n}\n\n<!-- Drawer cerrado en m\u00F3vil: aria-hidden + inert \u2192 invisible para lectores de\n pantalla y el foco no puede entrar al drawer oculto (ni quedar atrapado\n detr\u00E1s del backdrop al cerrarse). En desktop ambos quedan null. -->\n<aside\n class=\"sui-sidebar\"\n [class.sui-sidebar--open]=\"mobileOpen()\"\n [class.sui-sidebar--collapsed]=\"collapsed()\"\n role=\"navigation\"\n [attr.aria-hidden]=\"isMobile() && !mobileOpen() ? 'true' : null\"\n [attr.inert]=\"isMobile() && !mobileOpen() ? '' : 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 (brandCfg().logo) {\n <img [src]=\"brandCfg().logo\" [alt]=\"brandCfg().name\" referrerpolicy=\"no-referrer\" />\n } @else if (brandCfg().fallback) {\n <span class=\"sui-sidebar__brand-fallback\">{{ brandCfg().fallback }}</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\">{{ brandCfg().name }}</span>\n @if (brandCfg().subtitle) {\n @if (brandCfg().subtitleAsBadge) {\n <sui-badge variant=\"filled\" color=\"orange\" size=\"small\">{{ brandCfg().subtitle }}</sui-badge>\n } @else {\n <span class=\"sui-sidebar__header-subtitle\">{{ brandCfg().subtitle }}</span>\n }\n }\n </div>\n @if (showHeaderButton()) {\n <button\n type=\"button\"\n class=\"sui-sidebar__compact-btn\"\n [class.sui-sidebar__compact-btn--active]=\"headerButtonActive()\"\n [attr.aria-expanded]=\"headerButtonActive()\"\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 <!-- Slot libre bajo el header: panel del workspace switcher u overlays\n anclados al header (canon template marketing SUI). -->\n <ng-content select=\"[header-panel]\"></ng-content>\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 (!collapsed() && searchCfg(); as s) {\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]=\"s.placeholder\"\n [value]=\"searchValue()\"\n (input)=\"onSearchInput($any($event.target).value)\"\n (keydown.enter)=\"onSearchSubmit()\"\n />\n @if (s.shortcut) {\n <span class=\"sui-sidebar__shortcut\">{{ s.shortcut }}</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:#3333333d;animation:sui-sidebar-fade-in .2s ease-out}.sui-sidebar{display:flex;flex-direction:column;flex-shrink:0;width:272px;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__compact-btn--active,.sui-sidebar__compact-btn--active:hover,.sui-sidebar__compact-btn--active:active{background:var(--sui-bg-strong-950, #171717);border-color:var(--sui-bg-strong-950, #171717);color:var(--sui-text-white-0, #ffffff)}.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;overflow-x:hidden;min-height:0;scrollbar-width:none}.sui-sidebar__content::-webkit-scrollbar{display:none}.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%;box-sizing:border-box;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;width:36px;height:36px;padding:8px;margin-inline:auto}:host([data-sui-collapsed]) .sui-sidebar__item--active:before{left:-22px}@media(max-width:767px){.sui-sidebar{position:fixed;top:0;left:0;bottom:0;height:100dvh;z-index:300;width:min(86vw,360px);box-sizing:border-box;padding-left:env(safe-area-inset-left,0px);transform:translate(-100%);transition:transform .24s 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}}@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 });
|
|
14619
|
+
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 }, brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: false, transformFunction: null }, showHeaderButton: { classPropertyName: "showHeaderButton", publicName: "showHeaderButton", isSignal: true, isRequired: false, transformFunction: null }, headerButtonActive: { classPropertyName: "headerButtonActive", publicName: "headerButtonActive", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", 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 }, mobileOpen: { classPropertyName: "mobileOpen", publicName: "mobileOpen", isSignal: true, isRequired: false, transformFunction: null }, closeOnItemClick: { classPropertyName: "closeOnItemClick", publicName: "closeOnItemClick", 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", mobileOpen: "mobileOpenChange", itemClicked: "itemClicked", logoutClicked: "logoutClicked", backdropClicked: "backdropClicked", headerButtonClicked: "headerButtonClicked", profileClicked: "profileClicked", searchSubmitted: "searchSubmitted" }, host: { listeners: { "document:keydown.escape": "onEscapeKey()" }, properties: { "attr.title": "null", "attr.data-sui-open": "mobileOpen() ? \"\" : null", "attr.data-sui-mobile-mode": "mobileMode()", "attr.data-sui-collapsed": "collapsed() ? \"\" : null", "attr.data-sui-indicator": "indicatorColor()" } }, ngImport: i0, template: "<!-- Backdrop solo en m\u00F3vil: en desktop el sidebar es fijo y mobileOpen es inocuo.\n Color canon = overlay del sui-modal (Figma 480:2474): rgba(51,51,51,0.24). -->\n@if (isMobile() && showBackdrop() && mobileOpen()) {\n <div class=\"sui-sidebar-backdrop\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\n}\n\n<!-- Drawer cerrado en m\u00F3vil: aria-hidden + inert \u2192 invisible para lectores de\n pantalla y el foco no puede entrar al drawer oculto (ni quedar atrapado\n detr\u00E1s del backdrop al cerrarse). En desktop ambos quedan null. -->\n<aside\n class=\"sui-sidebar\"\n [class.sui-sidebar--open]=\"mobileOpen()\"\n [class.sui-sidebar--collapsed]=\"collapsed()\"\n role=\"navigation\"\n [attr.aria-hidden]=\"isMobile() && !mobileOpen() ? 'true' : null\"\n [attr.inert]=\"isMobile() && !mobileOpen() ? '' : 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 (brandCfg().logo) {\n <img [src]=\"brandCfg().logo\" [alt]=\"brandCfg().name\" referrerpolicy=\"no-referrer\" />\n } @else if (brandCfg().fallback) {\n <span class=\"sui-sidebar__brand-fallback\">{{ brandCfg().fallback }}</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\">{{ brandCfg().name }}</span>\n @if (brandCfg().subtitle) {\n @if (brandCfg().subtitleAsBadge) {\n <sui-badge variant=\"filled\" color=\"orange\" size=\"small\">{{ brandCfg().subtitle }}</sui-badge>\n } @else {\n <span class=\"sui-sidebar__header-subtitle\">{{ brandCfg().subtitle }}</span>\n }\n }\n </div>\n @if (showHeaderButton()) {\n <button\n type=\"button\"\n class=\"sui-sidebar__compact-btn\"\n [class.sui-sidebar__compact-btn--active]=\"headerButtonActive()\"\n [attr.aria-expanded]=\"headerButtonActive()\"\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 <!-- Slot libre bajo el header: panel del workspace switcher u overlays\n anclados al header (canon template marketing SUI). -->\n <ng-content select=\"[header-panel]\"></ng-content>\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 (!collapsed() && searchCfg(); as s) {\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]=\"s.placeholder\"\n [value]=\"searchValue()\"\n (input)=\"onSearchInput($any($event.target).value)\"\n (keydown.enter)=\"onSearchSubmit()\"\n />\n @if (searchValue()) {\n <!-- Con texto: la X de limpiar reemplaza al shortcut pill. -->\n <button\n type=\"button\"\n class=\"sui-sidebar__search-clear\"\n aria-label=\"Limpiar b\u00FAsqueda\"\n (click)=\"clearSearch()\">\n <sui-icon name=\"close-circle-fill\" [size]=\"16\" />\n </button>\n } @else if (s.shortcut) {\n <span class=\"sui-sidebar__shortcut\">{{ s.shortcut }}</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:#3333333d;animation:sui-sidebar-fade-in .2s ease-out}.sui-sidebar{display:flex;flex-direction:column;flex-shrink:0;width:272px;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__compact-btn--active,.sui-sidebar__compact-btn--active:hover,.sui-sidebar__compact-btn--active:active{background:var(--sui-bg-strong-950, #171717);border-color:var(--sui-bg-strong-950, #171717);color:var(--sui-text-white-0, #ffffff)}.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;overflow-x:hidden;min-height:0;scrollbar-width:none}.sui-sidebar__content::-webkit-scrollbar{display:none}.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%;box-sizing:border-box;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;width:36px;height:36px;padding:8px;margin-inline:auto}:host([data-sui-collapsed]) .sui-sidebar__item--active:before{left:-22px}@media(max-width:767px){.sui-sidebar{position:fixed;top:0;left:0;bottom:0;height:100dvh;z-index:300;width:min(86vw,360px);box-sizing:border-box;padding-left:env(safe-area-inset-left,0px);transform:translate(-100%);transition:transform .24s 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}}@keyframes sui-sidebar-fade-in{0%{opacity:0}to{opacity:1}}.sui-sidebar__search-clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:none;cursor:pointer;color:var(--sui-text-soft-400, #99a0ae)}.sui-sidebar__search-clear:hover{color:var(--sui-text-sub-600, #525866)}\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 });
|
|
14601
14620
|
}
|
|
14602
14621
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiSidebar, decorators: [{
|
|
14603
14622
|
type: Component,
|
|
@@ -14610,7 +14629,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
14610
14629
|
'[attr.data-sui-indicator]': 'indicatorColor()',
|
|
14611
14630
|
/* A11y drawer: Escape cierra el drawer móvil (no-op en desktop). */
|
|
14612
14631
|
'(document:keydown.escape)': 'onEscapeKey()',
|
|
14613
|
-
}, template: "<!-- Backdrop solo en m\u00F3vil: en desktop el sidebar es fijo y mobileOpen es inocuo.\n Color canon = overlay del sui-modal (Figma 480:2474): rgba(51,51,51,0.24). -->\n@if (isMobile() && showBackdrop() && mobileOpen()) {\n <div class=\"sui-sidebar-backdrop\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\n}\n\n<!-- Drawer cerrado en m\u00F3vil: aria-hidden + inert \u2192 invisible para lectores de\n pantalla y el foco no puede entrar al drawer oculto (ni quedar atrapado\n detr\u00E1s del backdrop al cerrarse). En desktop ambos quedan null. -->\n<aside\n class=\"sui-sidebar\"\n [class.sui-sidebar--open]=\"mobileOpen()\"\n [class.sui-sidebar--collapsed]=\"collapsed()\"\n role=\"navigation\"\n [attr.aria-hidden]=\"isMobile() && !mobileOpen() ? 'true' : null\"\n [attr.inert]=\"isMobile() && !mobileOpen() ? '' : 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 (brandCfg().logo) {\n <img [src]=\"brandCfg().logo\" [alt]=\"brandCfg().name\" referrerpolicy=\"no-referrer\" />\n } @else if (brandCfg().fallback) {\n <span class=\"sui-sidebar__brand-fallback\">{{ brandCfg().fallback }}</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\">{{ brandCfg().name }}</span>\n @if (brandCfg().subtitle) {\n @if (brandCfg().subtitleAsBadge) {\n <sui-badge variant=\"filled\" color=\"orange\" size=\"small\">{{ brandCfg().subtitle }}</sui-badge>\n } @else {\n <span class=\"sui-sidebar__header-subtitle\">{{ brandCfg().subtitle }}</span>\n }\n }\n </div>\n @if (showHeaderButton()) {\n <button\n type=\"button\"\n class=\"sui-sidebar__compact-btn\"\n [class.sui-sidebar__compact-btn--active]=\"headerButtonActive()\"\n [attr.aria-expanded]=\"headerButtonActive()\"\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 <!-- Slot libre bajo el header: panel del workspace switcher u overlays\n anclados al header (canon template marketing SUI). -->\n <ng-content select=\"[header-panel]\"></ng-content>\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 (!collapsed() && searchCfg(); as s) {\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]=\"s.placeholder\"\n [value]=\"searchValue()\"\n (input)=\"onSearchInput($any($event.target).value)\"\n (keydown.enter)=\"onSearchSubmit()\"\n />\n @if (s.shortcut) {\n <span class=\"sui-sidebar__shortcut\">{{ s.shortcut }}</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:#3333333d;animation:sui-sidebar-fade-in .2s ease-out}.sui-sidebar{display:flex;flex-direction:column;flex-shrink:0;width:272px;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__compact-btn--active,.sui-sidebar__compact-btn--active:hover,.sui-sidebar__compact-btn--active:active{background:var(--sui-bg-strong-950, #171717);border-color:var(--sui-bg-strong-950, #171717);color:var(--sui-text-white-0, #ffffff)}.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;overflow-x:hidden;min-height:0;scrollbar-width:none}.sui-sidebar__content::-webkit-scrollbar{display:none}.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%;box-sizing:border-box;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;width:36px;height:36px;padding:8px;margin-inline:auto}:host([data-sui-collapsed]) .sui-sidebar__item--active:before{left:-22px}@media(max-width:767px){.sui-sidebar{position:fixed;top:0;left:0;bottom:0;height:100dvh;z-index:300;width:min(86vw,360px);box-sizing:border-box;padding-left:env(safe-area-inset-left,0px);transform:translate(-100%);transition:transform .24s 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}}@keyframes sui-sidebar-fade-in{0%{opacity:0}to{opacity:1}}\n"] }]
|
|
14632
|
+
}, template: "<!-- Backdrop solo en m\u00F3vil: en desktop el sidebar es fijo y mobileOpen es inocuo.\n Color canon = overlay del sui-modal (Figma 480:2474): rgba(51,51,51,0.24). -->\n@if (isMobile() && showBackdrop() && mobileOpen()) {\n <div class=\"sui-sidebar-backdrop\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\n}\n\n<!-- Drawer cerrado en m\u00F3vil: aria-hidden + inert \u2192 invisible para lectores de\n pantalla y el foco no puede entrar al drawer oculto (ni quedar atrapado\n detr\u00E1s del backdrop al cerrarse). En desktop ambos quedan null. -->\n<aside\n class=\"sui-sidebar\"\n [class.sui-sidebar--open]=\"mobileOpen()\"\n [class.sui-sidebar--collapsed]=\"collapsed()\"\n role=\"navigation\"\n [attr.aria-hidden]=\"isMobile() && !mobileOpen() ? 'true' : null\"\n [attr.inert]=\"isMobile() && !mobileOpen() ? '' : 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 (brandCfg().logo) {\n <img [src]=\"brandCfg().logo\" [alt]=\"brandCfg().name\" referrerpolicy=\"no-referrer\" />\n } @else if (brandCfg().fallback) {\n <span class=\"sui-sidebar__brand-fallback\">{{ brandCfg().fallback }}</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\">{{ brandCfg().name }}</span>\n @if (brandCfg().subtitle) {\n @if (brandCfg().subtitleAsBadge) {\n <sui-badge variant=\"filled\" color=\"orange\" size=\"small\">{{ brandCfg().subtitle }}</sui-badge>\n } @else {\n <span class=\"sui-sidebar__header-subtitle\">{{ brandCfg().subtitle }}</span>\n }\n }\n </div>\n @if (showHeaderButton()) {\n <button\n type=\"button\"\n class=\"sui-sidebar__compact-btn\"\n [class.sui-sidebar__compact-btn--active]=\"headerButtonActive()\"\n [attr.aria-expanded]=\"headerButtonActive()\"\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 <!-- Slot libre bajo el header: panel del workspace switcher u overlays\n anclados al header (canon template marketing SUI). -->\n <ng-content select=\"[header-panel]\"></ng-content>\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 (!collapsed() && searchCfg(); as s) {\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]=\"s.placeholder\"\n [value]=\"searchValue()\"\n (input)=\"onSearchInput($any($event.target).value)\"\n (keydown.enter)=\"onSearchSubmit()\"\n />\n @if (searchValue()) {\n <!-- Con texto: la X de limpiar reemplaza al shortcut pill. -->\n <button\n type=\"button\"\n class=\"sui-sidebar__search-clear\"\n aria-label=\"Limpiar b\u00FAsqueda\"\n (click)=\"clearSearch()\">\n <sui-icon name=\"close-circle-fill\" [size]=\"16\" />\n </button>\n } @else if (s.shortcut) {\n <span class=\"sui-sidebar__shortcut\">{{ s.shortcut }}</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:#3333333d;animation:sui-sidebar-fade-in .2s ease-out}.sui-sidebar{display:flex;flex-direction:column;flex-shrink:0;width:272px;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__compact-btn--active,.sui-sidebar__compact-btn--active:hover,.sui-sidebar__compact-btn--active:active{background:var(--sui-bg-strong-950, #171717);border-color:var(--sui-bg-strong-950, #171717);color:var(--sui-text-white-0, #ffffff)}.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;overflow-x:hidden;min-height:0;scrollbar-width:none}.sui-sidebar__content::-webkit-scrollbar{display:none}.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%;box-sizing:border-box;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;width:36px;height:36px;padding:8px;margin-inline:auto}:host([data-sui-collapsed]) .sui-sidebar__item--active:before{left:-22px}@media(max-width:767px){.sui-sidebar{position:fixed;top:0;left:0;bottom:0;height:100dvh;z-index:300;width:min(86vw,360px);box-sizing:border-box;padding-left:env(safe-area-inset-left,0px);transform:translate(-100%);transition:transform .24s 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}}@keyframes sui-sidebar-fade-in{0%{opacity:0}to{opacity:1}}.sui-sidebar__search-clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:none;cursor:pointer;color:var(--sui-text-soft-400, #99a0ae)}.sui-sidebar__search-clear:hover{color:var(--sui-text-sub-600, #525866)}\n"] }]
|
|
14614
14633
|
}], ctorParameters: () => [], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], indicatorColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorColor", required: false }] }], brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: false }] }], showHeaderButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeaderButton", required: false }] }], headerButtonActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerButtonActive", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", 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 }] }], mobileOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileOpen", required: false }] }, { type: i0.Output, args: ["mobileOpenChange"] }], closeOnItemClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnItemClick", 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"] }] } });
|
|
14615
14634
|
|
|
14616
14635
|
class SuiSlider {
|