@ajuarezso/sui-design-system 0.7.22 → 0.7.23
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.
|
@@ -1210,12 +1210,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
1210
1210
|
* error → error-warning-fill
|
|
1211
1211
|
* feature → sparkling-fill
|
|
1212
1212
|
*
|
|
1213
|
-
*
|
|
1214
|
-
* Figma "🚀 Feature"
|
|
1215
|
-
*
|
|
1216
|
-
*
|
|
1217
|
-
*
|
|
1218
|
-
*
|
|
1213
|
+
* VERIFIED 2026-07-23 (screenshot set 169:2399) — Feature status color:
|
|
1214
|
+
* Figma "🚀 Feature" confirmed = state/faded (gray) + `magic-fill` icon en
|
|
1215
|
+
* las 4 columnas del set (filled/light/lighter/stroke); no existe morado en
|
|
1216
|
+
* el set. The SUI project established `feature` = state/feature (purple
|
|
1217
|
+
* #7d52f4) + `sparkling-fill` across sui-banner + master-preview. Kept
|
|
1218
|
+
* purple here as deliberate brand deviation. If SUI canon must win, remap
|
|
1219
1219
|
* feature → --sui-state-faded-* + magic-fill in BOTH alert and banner.
|
|
1220
1220
|
*
|
|
1221
1221
|
* Sizes (Figma component set 169:2399):
|
|
@@ -10088,7 +10088,7 @@ class SuiIntegrationSwitch {
|
|
|
10088
10088
|
useExisting: forwardRef(() => SuiIntegrationSwitch),
|
|
10089
10089
|
multi: true,
|
|
10090
10090
|
},
|
|
10091
|
-
], ngImport: i0, template: "<!-- Brand logo (circle 40 / 48 seg\u00FAn appearance) -->\n<div class=\"sui-integration-switch__brand\" aria-hidden=\"true\">\n <ng-content select=\"[sui-integration-brand]\">\n @if (brandIconSrc(); as src) {\n <img [src]=\"src\" alt=\"\" class=\"sui-integration-switch__brand-img\" />\n } @else if (brandIcon(); as icon) {\n <sui-icon [name]=\"icon\" [size]=\"appearance() === 'list' ? 32 : 24\" />\n }\n </ng-content>\n</div>\n\n<!-- Title + description block -->\n<div class=\"sui-integration-switch__text\">\n <div class=\"sui-integration-switch__title-row\">\n <span class=\"sui-integration-switch__title\">{{ title() }}</span>\n @if (badgeCfg(); as bcfg) {\n <sui-badge\n class=\"sui-integration-switch__badge\"\n [color]=\"bcfg.color ?? 'orange'\"\n [variant]=\"bcfg.variant ?? 'light'\"\n [size]=\"bcfg.size ?? 'small'\"\n >{{ bcfg.label }}</sui-badge>\n }\n </div>\n @if (description(); as desc) {\n <p class=\"sui-integration-switch__description\">{{ desc }}</p>\n }\n</div>\n\n<!-- Manage button (trailing en horizontal, full-width en vertical) -->\n@if (manageCfg(); as mcfg) {\n <button\n type=\"button\"\n class=\"sui-integration-switch__manage\"\n [attr.aria-label]=\"mcfg.label\"\n [disabled]=\"isDisabled()\"\n (click)=\"onManageClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon [name]=\"mcfg.icon\" [size]=\"20\" />\n <span class=\"sui-integration-switch__manage-label\">{{ mcfg.label }}</span>\n </button>\n}\n\n<!-- Switch (inline en horizontal \u00B7 absolute top-right en vertical) -->\n@if (showToggle()) {\n <sui-switch\n class=\"sui-integration-switch__toggle\"\n [checked]=\"effectiveActive()\"\n [disabled]=\"isDisabled()\"\n (checkedChange)=\"onSwitchChange($event)\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:flex;box-sizing:border-box;width:100%;font-family:var(--sui-font-sans, \"Inter\", system-ui, sans-serif);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}:host([data-sui-type=horizontal]){flex-direction:row;align-items:center;gap:14px}:host([data-sui-type=vertical]){flex-direction:column;align-items:flex-start;gap:14px}:host([data-sui-appearance=card]){padding:16px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:12px;box-shadow:
|
|
10091
|
+
], ngImport: i0, template: "<!-- Brand logo (circle 40 / 48 seg\u00FAn appearance) -->\n<div class=\"sui-integration-switch__brand\" aria-hidden=\"true\">\n <ng-content select=\"[sui-integration-brand]\">\n @if (brandIconSrc(); as src) {\n <img [src]=\"src\" alt=\"\" class=\"sui-integration-switch__brand-img\" />\n } @else if (brandIcon(); as icon) {\n <sui-icon [name]=\"icon\" [size]=\"appearance() === 'list' ? 32 : 24\" />\n }\n </ng-content>\n</div>\n\n<!-- Title + description block -->\n<div class=\"sui-integration-switch__text\">\n <div class=\"sui-integration-switch__title-row\">\n <span class=\"sui-integration-switch__title\">{{ title() }}</span>\n @if (badgeCfg(); as bcfg) {\n <sui-badge\n class=\"sui-integration-switch__badge\"\n [color]=\"bcfg.color ?? 'orange'\"\n [variant]=\"bcfg.variant ?? 'light'\"\n [size]=\"bcfg.size ?? 'small'\"\n >{{ bcfg.label }}</sui-badge>\n }\n </div>\n @if (description(); as desc) {\n <p class=\"sui-integration-switch__description\">{{ desc }}</p>\n }\n</div>\n\n<!-- Manage button (trailing en horizontal, full-width en vertical) -->\n@if (manageCfg(); as mcfg) {\n <button\n type=\"button\"\n class=\"sui-integration-switch__manage\"\n [attr.aria-label]=\"mcfg.label\"\n [disabled]=\"isDisabled()\"\n (click)=\"onManageClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon [name]=\"mcfg.icon\" [size]=\"20\" />\n <span class=\"sui-integration-switch__manage-label\">{{ mcfg.label }}</span>\n </button>\n}\n\n<!-- Switch (inline en horizontal \u00B7 absolute top-right en vertical) -->\n@if (showToggle()) {\n <sui-switch\n class=\"sui-integration-switch__toggle\"\n [checked]=\"effectiveActive()\"\n [disabled]=\"isDisabled()\"\n (checkedChange)=\"onSwitchChange($event)\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:flex;box-sizing:border-box;width:100%;font-family:var(--sui-font-sans, \"Inter\", system-ui, sans-serif);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}:host([data-sui-type=horizontal]){flex-direction:row;align-items:center;gap:14px}:host([data-sui-type=vertical]){flex-direction:column;align-items:flex-start;gap:14px}:host([data-sui-appearance=card]){padding:16px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:12px;box-shadow:var(--sui-shadow-x-small)}:host([data-sui-appearance=list]){padding:0;background:transparent;border:0}.sui-integration-switch__brand{box-sizing:border-box;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:8px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:999px;box-shadow:var(--sui-shadow-x-small);overflow:hidden}:host([data-sui-appearance=card]) .sui-integration-switch__brand{width:40px;height:40px}:host([data-sui-appearance=list]) .sui-integration-switch__brand{width:48px;height:48px}.sui-integration-switch__brand-img{width:100%;height:100%;object-fit:contain;display:block}.sui-integration-switch__text{flex:1 0 0;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px}.sui-integration-switch__title-row{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.sui-integration-switch__title{color:var(--sui-text-strong-950);font-weight:500;word-break:break-word}:host([data-sui-appearance=card]) .sui-integration-switch__title{font-size:14px;line-height:20px;letter-spacing:-.006em}:host([data-sui-appearance=list]) .sui-integration-switch__title{font-size:16px;line-height:24px;letter-spacing:-.011em}.sui-integration-switch__description{margin:0;color:var(--sui-text-sub-600);font-weight:400;word-break:break-word}:host([data-sui-appearance=card]) .sui-integration-switch__description{font-size:12px;line-height:16px}:host([data-sui-appearance=list]) .sui-integration-switch__description{font-size:14px;line-height:20px;letter-spacing:-.006em}.sui-integration-switch__badge{flex-shrink:0}.sui-integration-switch__manage{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:8px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:8px;box-shadow:var(--sui-shadow-x-small);color:var(--sui-text-sub-600);font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease,transform .12s ease}.sui-integration-switch__manage:hover:not(:disabled){background:var(--sui-bg-weak-50)}.sui-integration-switch__manage:active:not(:disabled){transform:scale(.97)}.sui-integration-switch__manage:focus-visible{outline:2px solid var(--sui-primary-base);outline-offset:2px}.sui-integration-switch__manage:disabled{opacity:.4;cursor:not-allowed}.sui-integration-switch__manage-label{padding:0 4px;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em}:host([data-sui-type=vertical]) .sui-integration-switch__manage{width:100%}.sui-integration-switch__toggle{flex-shrink:0}:host([data-sui-type=vertical]) .sui-integration-switch__toggle{position:absolute;top:19px;right:19px}:host([data-sui-type=vertical][data-sui-appearance=list]) .sui-integration-switch__toggle{top:12px;right:12px}:host([data-sui-disabled]){opacity:.5;pointer-events:none}\n"], dependencies: [{ kind: "component", type: SuiSwitch, selector: "sui-switch", inputs: ["size", "checked", "disabled"], outputs: ["checkedChange"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiBadge, selector: "sui-badge", inputs: ["color", "variant", "size", "type", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10092
10092
|
}
|
|
10093
10093
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiIntegrationSwitch, decorators: [{
|
|
10094
10094
|
type: Component,
|
|
@@ -10106,7 +10106,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
10106
10106
|
'[attr.data-sui-type]': 'type()',
|
|
10107
10107
|
'[attr.data-sui-appearance]': 'appearance()',
|
|
10108
10108
|
'[attr.data-sui-disabled]': 'isDisabled() ? "" : null',
|
|
10109
|
-
}, template: "<!-- Brand logo (circle 40 / 48 seg\u00FAn appearance) -->\n<div class=\"sui-integration-switch__brand\" aria-hidden=\"true\">\n <ng-content select=\"[sui-integration-brand]\">\n @if (brandIconSrc(); as src) {\n <img [src]=\"src\" alt=\"\" class=\"sui-integration-switch__brand-img\" />\n } @else if (brandIcon(); as icon) {\n <sui-icon [name]=\"icon\" [size]=\"appearance() === 'list' ? 32 : 24\" />\n }\n </ng-content>\n</div>\n\n<!-- Title + description block -->\n<div class=\"sui-integration-switch__text\">\n <div class=\"sui-integration-switch__title-row\">\n <span class=\"sui-integration-switch__title\">{{ title() }}</span>\n @if (badgeCfg(); as bcfg) {\n <sui-badge\n class=\"sui-integration-switch__badge\"\n [color]=\"bcfg.color ?? 'orange'\"\n [variant]=\"bcfg.variant ?? 'light'\"\n [size]=\"bcfg.size ?? 'small'\"\n >{{ bcfg.label }}</sui-badge>\n }\n </div>\n @if (description(); as desc) {\n <p class=\"sui-integration-switch__description\">{{ desc }}</p>\n }\n</div>\n\n<!-- Manage button (trailing en horizontal, full-width en vertical) -->\n@if (manageCfg(); as mcfg) {\n <button\n type=\"button\"\n class=\"sui-integration-switch__manage\"\n [attr.aria-label]=\"mcfg.label\"\n [disabled]=\"isDisabled()\"\n (click)=\"onManageClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon [name]=\"mcfg.icon\" [size]=\"20\" />\n <span class=\"sui-integration-switch__manage-label\">{{ mcfg.label }}</span>\n </button>\n}\n\n<!-- Switch (inline en horizontal \u00B7 absolute top-right en vertical) -->\n@if (showToggle()) {\n <sui-switch\n class=\"sui-integration-switch__toggle\"\n [checked]=\"effectiveActive()\"\n [disabled]=\"isDisabled()\"\n (checkedChange)=\"onSwitchChange($event)\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:flex;box-sizing:border-box;width:100%;font-family:var(--sui-font-sans, \"Inter\", system-ui, sans-serif);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}:host([data-sui-type=horizontal]){flex-direction:row;align-items:center;gap:14px}:host([data-sui-type=vertical]){flex-direction:column;align-items:flex-start;gap:14px}:host([data-sui-appearance=card]){padding:16px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:12px;box-shadow:
|
|
10109
|
+
}, template: "<!-- Brand logo (circle 40 / 48 seg\u00FAn appearance) -->\n<div class=\"sui-integration-switch__brand\" aria-hidden=\"true\">\n <ng-content select=\"[sui-integration-brand]\">\n @if (brandIconSrc(); as src) {\n <img [src]=\"src\" alt=\"\" class=\"sui-integration-switch__brand-img\" />\n } @else if (brandIcon(); as icon) {\n <sui-icon [name]=\"icon\" [size]=\"appearance() === 'list' ? 32 : 24\" />\n }\n </ng-content>\n</div>\n\n<!-- Title + description block -->\n<div class=\"sui-integration-switch__text\">\n <div class=\"sui-integration-switch__title-row\">\n <span class=\"sui-integration-switch__title\">{{ title() }}</span>\n @if (badgeCfg(); as bcfg) {\n <sui-badge\n class=\"sui-integration-switch__badge\"\n [color]=\"bcfg.color ?? 'orange'\"\n [variant]=\"bcfg.variant ?? 'light'\"\n [size]=\"bcfg.size ?? 'small'\"\n >{{ bcfg.label }}</sui-badge>\n }\n </div>\n @if (description(); as desc) {\n <p class=\"sui-integration-switch__description\">{{ desc }}</p>\n }\n</div>\n\n<!-- Manage button (trailing en horizontal, full-width en vertical) -->\n@if (manageCfg(); as mcfg) {\n <button\n type=\"button\"\n class=\"sui-integration-switch__manage\"\n [attr.aria-label]=\"mcfg.label\"\n [disabled]=\"isDisabled()\"\n (click)=\"onManageClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon [name]=\"mcfg.icon\" [size]=\"20\" />\n <span class=\"sui-integration-switch__manage-label\">{{ mcfg.label }}</span>\n </button>\n}\n\n<!-- Switch (inline en horizontal \u00B7 absolute top-right en vertical) -->\n@if (showToggle()) {\n <sui-switch\n class=\"sui-integration-switch__toggle\"\n [checked]=\"effectiveActive()\"\n [disabled]=\"isDisabled()\"\n (checkedChange)=\"onSwitchChange($event)\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:flex;box-sizing:border-box;width:100%;font-family:var(--sui-font-sans, \"Inter\", system-ui, sans-serif);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}:host([data-sui-type=horizontal]){flex-direction:row;align-items:center;gap:14px}:host([data-sui-type=vertical]){flex-direction:column;align-items:flex-start;gap:14px}:host([data-sui-appearance=card]){padding:16px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:12px;box-shadow:var(--sui-shadow-x-small)}:host([data-sui-appearance=list]){padding:0;background:transparent;border:0}.sui-integration-switch__brand{box-sizing:border-box;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:8px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:999px;box-shadow:var(--sui-shadow-x-small);overflow:hidden}:host([data-sui-appearance=card]) .sui-integration-switch__brand{width:40px;height:40px}:host([data-sui-appearance=list]) .sui-integration-switch__brand{width:48px;height:48px}.sui-integration-switch__brand-img{width:100%;height:100%;object-fit:contain;display:block}.sui-integration-switch__text{flex:1 0 0;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px}.sui-integration-switch__title-row{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.sui-integration-switch__title{color:var(--sui-text-strong-950);font-weight:500;word-break:break-word}:host([data-sui-appearance=card]) .sui-integration-switch__title{font-size:14px;line-height:20px;letter-spacing:-.006em}:host([data-sui-appearance=list]) .sui-integration-switch__title{font-size:16px;line-height:24px;letter-spacing:-.011em}.sui-integration-switch__description{margin:0;color:var(--sui-text-sub-600);font-weight:400;word-break:break-word}:host([data-sui-appearance=card]) .sui-integration-switch__description{font-size:12px;line-height:16px}:host([data-sui-appearance=list]) .sui-integration-switch__description{font-size:14px;line-height:20px;letter-spacing:-.006em}.sui-integration-switch__badge{flex-shrink:0}.sui-integration-switch__manage{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:8px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:8px;box-shadow:var(--sui-shadow-x-small);color:var(--sui-text-sub-600);font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease,transform .12s ease}.sui-integration-switch__manage:hover:not(:disabled){background:var(--sui-bg-weak-50)}.sui-integration-switch__manage:active:not(:disabled){transform:scale(.97)}.sui-integration-switch__manage:focus-visible{outline:2px solid var(--sui-primary-base);outline-offset:2px}.sui-integration-switch__manage:disabled{opacity:.4;cursor:not-allowed}.sui-integration-switch__manage-label{padding:0 4px;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em}:host([data-sui-type=vertical]) .sui-integration-switch__manage{width:100%}.sui-integration-switch__toggle{flex-shrink:0}:host([data-sui-type=vertical]) .sui-integration-switch__toggle{position:absolute;top:19px;right:19px}:host([data-sui-type=vertical][data-sui-appearance=list]) .sui-integration-switch__toggle{top:12px;right:12px}:host([data-sui-disabled]){opacity:.5;pointer-events:none}\n"] }]
|
|
10110
10110
|
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], brandIconSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandIconSrc", required: false }] }], brandIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandIcon", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], manage: [{ type: i0.Input, args: [{ isSignal: true, alias: "manage", required: false }] }], showToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToggle", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], activeChange: [{ type: i0.Output, args: ["activeChange"] }], manageClick: [{ type: i0.Output, args: ["manageClick"] }] } });
|
|
10111
10111
|
|
|
10112
10112
|
/** Set de los 9 colores SUI 2.0 para iterar desde el consumer (previews, demos). */
|
|
@@ -13390,7 +13390,7 @@ class SuiRichEditor {
|
|
|
13390
13390
|
more: 'icon',
|
|
13391
13391
|
};
|
|
13392
13392
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiRichEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13393
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiRichEditor, isStandalone: true, selector: "sui-rich-editor", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, showMore: { classPropertyName: "showMore", publicName: "showMore", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, headingLabel: { classPropertyName: "headingLabel", publicName: "headingLabel", isSignal: true, isRequired: false, transformFunction: null }, fontSizeLabel: { classPropertyName: "fontSizeLabel", publicName: "fontSizeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", action: "action", valueChange: "valueChange" }, host: { properties: { "attr.title": "null", "attr.data-sui-layout": "layout()", "attr.data-sui-show-more": "showMore() ? \"\" : null", "attr.data-sui-editable": "editable() ? \"\" : null" } }, viewQueries: [{ propertyName: "editableRef", first: true, predicate: ["editableEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \u2550\u2550\u2550 Toolbar (pill flotante) \u2014 Figma 166926:17605 \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"sui-rich-editor__toolbar\" role=\"toolbar\" aria-label=\"Formato de texto\">\n\n <!-- \u2500\u2500 Grupo TEXT: Header + 14px (layouts full / compact) \u2500\u2500 -->\n @if (showTextGroup()) {\n <sui-rich-editor-item\n type=\"text\"\n [label]=\"headingLabel()\"\n [state]=\"itemState('heading')\"\n ariaLabel=\"Estilo de encabezado\"\n (clicked)=\"onCommand('heading')\"\n />\n <sui-rich-editor-item\n type=\"text\"\n [label]=\"fontSizeLabel()\"\n [state]=\"itemState('fontSize')\"\n ariaLabel=\"Tama\u00F1o de fuente\"\n (clicked)=\"onCommand('fontSize')\"\n />\n }\n\n <!-- divider entre TEXT y FORMAT (solo si ambos grupos presentes: layout full) -->\n @if (showTextGroup() && showFormatGroup()) {\n <span class=\"sui-rich-editor__divider\" aria-hidden=\"true\"></span>\n }\n\n <!-- \u2500\u2500 Grupo FORMAT: B I U S (layouts full / formatting) \u2500\u2500 -->\n @if (showFormatGroup()) {\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"bold\"\n [state]=\"itemState('bold')\"\n ariaLabel=\"Negrita\"\n (clicked)=\"onCommand('bold')\"\n />\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"italic\"\n [state]=\"itemState('italic')\"\n ariaLabel=\"Cursiva\"\n (clicked)=\"onCommand('italic')\"\n />\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"underline\"\n [state]=\"itemState('underline')\"\n ariaLabel=\"Subrayado\"\n (clicked)=\"onCommand('underline')\"\n />\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"strikethrough\"\n [state]=\"itemState('strikeThrough')\"\n ariaLabel=\"Tachado\"\n (clicked)=\"onCommand('strikeThrough')\"\n />\n }\n\n <!-- divider entre FORMAT y ALIGN (layout full / formatting) -->\n @if (showAlignGroup() && (showFormatGroup())) {\n <span class=\"sui-rich-editor__divider\" aria-hidden=\"true\"></span>\n }\n\n <!-- \u2500\u2500 Grupo ALIGN: align dropdown (layouts full / formatting) \u2500\u2500 -->\n @if (showAlignGroup()) {\n <sui-rich-editor-item\n type=\"dropdown\"\n icon=\"align-left\"\n [state]=\"itemState('align')\"\n ariaLabel=\"Alineaci\u00F3n\"\n (clicked)=\"onCommand('align')\"\n />\n }\n\n <!-- divider antes de SOCIAL (layout full) -->\n @if (showSocialGroup() && (showTextGroup() || showFormatGroup() || showAlignGroup())) {\n <span class=\"sui-rich-editor__divider\" aria-hidden=\"true\"></span>\n }\n\n <!-- \u2500\u2500 Grupo SOCIAL: chat + link + @ (layouts full / social) \u2500\u2500 -->\n @if (showSocialGroup()) {\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"chat-1-line\"\n [state]=\"itemState('comment')\"\n ariaLabel=\"Comentario\"\n (clicked)=\"onCommand('comment')\"\n />\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"link\"\n [state]=\"itemState('link')\"\n ariaLabel=\"Insertar enlace\"\n (clicked)=\"onCommand('link')\"\n />\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"at-line\"\n [state]=\"itemState('mention')\"\n ariaLabel=\"Mencionar\"\n (clicked)=\"onCommand('mention')\"\n />\n }\n\n <!-- \u2500\u2500 More (overflow) \u2014 divider + more-2-line \u2500\u2500 -->\n @if (showMore()) {\n <span class=\"sui-rich-editor__divider sui-rich-editor__divider--more\" aria-hidden=\"true\"></span>\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"more-2-line\"\n [state]=\"itemState('more')\"\n ariaLabel=\"M\u00E1s opciones\"\n (clicked)=\"onCommand('more')\"\n />\n }\n</div>\n\n<!-- \u2550\u2550\u2550 \u00C1rea editable (opcional) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Figma solo muestra la toolbar; el contenteditable es un EXTRA del componente\n para uso real. PENDING VERIFY: edici\u00F3n rica parcial via execCommand. -->\n@if (editable()) {\n <div\n #editableEl\n class=\"sui-rich-editor__editable\"\n contenteditable=\"true\"\n role=\"textbox\"\n aria-multiline=\"true\"\n [attr.aria-label]=\"placeholder()\"\n [attr.data-placeholder]=\"placeholder()\"\n [attr.data-empty]=\"isEmpty() ? '' : null\"\n (input)=\"onEditableInput()\"\n (keyup)=\"onEditableSelect()\"\n (mouseup)=\"onEditableSelect()\"\n ></div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;flex-direction:column;gap:8px;box-sizing:border-box}.sui-rich-editor__toolbar{display:flex;align-items:center;gap:2px;padding:2px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-8);box-shadow:var(--sui-regular-shadow-x-small);overflow:clip;box-sizing:border-box;width:fit-content}.sui-rich-editor__divider{flex-shrink:0;width:4px;height:16px;position:relative}.sui-rich-editor__divider:before{content:\"\";position:absolute;top:0;bottom:0;left:50%;width:1px;transform:translate(-50%);background:var(--sui-stroke-soft-200)}.sui-rich-editor__editable{min-height:120px;padding:12px 14px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-8);box-sizing:border-box;outline:none;font-size:14px;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-strong-950);overflow-y:auto;overflow-wrap:break-word;word-break:break-word}.sui-rich-editor__editable:focus-visible{border-color:var(--sui-primary-base)}.sui-rich-editor__editable[data-empty]:before{content:attr(data-placeholder);color:var(--sui-text-sub-600);pointer-events:none}.sui-rich-editor__editable :is(b,strong){font-weight:700}.sui-rich-editor__editable :is(i,em){font-style:italic}.sui-rich-editor__editable u{text-decoration:underline}.sui-rich-editor__editable s{text-decoration:line-through}@media(max-width:767px){.sui-rich-editor__toolbar{flex-wrap:wrap;width:100%;row-gap:2px}.sui-rich-editor__divider{display:none}.sui-rich-editor__editable{font-size:16px}}\n"], dependencies: [{ kind: "component", type: SuiRichEditorItem, selector: "sui-rich-editor-item", inputs: ["type", "state", "label", "icon", "color", "colorHex", "ariaLabel", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13393
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiRichEditor, isStandalone: true, selector: "sui-rich-editor", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, showMore: { classPropertyName: "showMore", publicName: "showMore", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, headingLabel: { classPropertyName: "headingLabel", publicName: "headingLabel", isSignal: true, isRequired: false, transformFunction: null }, fontSizeLabel: { classPropertyName: "fontSizeLabel", publicName: "fontSizeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", action: "action", valueChange: "valueChange" }, host: { properties: { "attr.title": "null", "attr.data-sui-layout": "layout()", "attr.data-sui-show-more": "showMore() ? \"\" : null", "attr.data-sui-editable": "editable() ? \"\" : null" } }, viewQueries: [{ propertyName: "editableRef", first: true, predicate: ["editableEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \u2550\u2550\u2550 Toolbar (pill flotante) \u2014 Figma 166926:17605 \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"sui-rich-editor__toolbar\" role=\"toolbar\" aria-label=\"Formato de texto\">\n\n <!-- \u2500\u2500 Grupo TEXT: Header + 14px (layouts full / compact) \u2500\u2500 -->\n @if (showTextGroup()) {\n <sui-rich-editor-item\n type=\"text\"\n [label]=\"headingLabel()\"\n [state]=\"itemState('heading')\"\n ariaLabel=\"Estilo de encabezado\"\n (clicked)=\"onCommand('heading')\"\n />\n <!-- divider 4\u00D716 entre Header y 14px \u2014 Figma 166926:17604 / 166926:17601 -->\n <span class=\"sui-rich-editor__divider\" aria-hidden=\"true\"></span>\n <sui-rich-editor-item\n type=\"text\"\n [label]=\"fontSizeLabel()\"\n [state]=\"itemState('fontSize')\"\n ariaLabel=\"Tama\u00F1o de fuente\"\n (clicked)=\"onCommand('fontSize')\"\n />\n }\n\n <!-- divider entre TEXT y FORMAT (solo si ambos grupos presentes: layout full) -->\n @if (showTextGroup() && showFormatGroup()) {\n <span class=\"sui-rich-editor__divider\" aria-hidden=\"true\"></span>\n }\n\n <!-- \u2500\u2500 Grupo FORMAT: B I U S (layouts full / formatting) \u2500\u2500 -->\n @if (showFormatGroup()) {\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"bold\"\n [state]=\"itemState('bold')\"\n ariaLabel=\"Negrita\"\n (clicked)=\"onCommand('bold')\"\n />\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"italic\"\n [state]=\"itemState('italic')\"\n ariaLabel=\"Cursiva\"\n (clicked)=\"onCommand('italic')\"\n />\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"underline\"\n [state]=\"itemState('underline')\"\n ariaLabel=\"Subrayado\"\n (clicked)=\"onCommand('underline')\"\n />\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"strikethrough\"\n [state]=\"itemState('strikeThrough')\"\n ariaLabel=\"Tachado\"\n (clicked)=\"onCommand('strikeThrough')\"\n />\n }\n\n <!-- divider entre FORMAT y ALIGN (layout full / formatting) -->\n @if (showAlignGroup() && (showFormatGroup())) {\n <span class=\"sui-rich-editor__divider\" aria-hidden=\"true\"></span>\n }\n\n <!-- \u2500\u2500 Grupo ALIGN: align dropdown (layouts full / formatting) \u2500\u2500 -->\n @if (showAlignGroup()) {\n <sui-rich-editor-item\n type=\"dropdown\"\n icon=\"align-left\"\n [state]=\"itemState('align')\"\n ariaLabel=\"Alineaci\u00F3n\"\n (clicked)=\"onCommand('align')\"\n />\n }\n\n <!-- divider antes de SOCIAL (layout full) -->\n @if (showSocialGroup() && (showTextGroup() || showFormatGroup() || showAlignGroup())) {\n <span class=\"sui-rich-editor__divider\" aria-hidden=\"true\"></span>\n }\n\n <!-- \u2500\u2500 Grupo SOCIAL: chat + link + @ (layouts full / social) \u2500\u2500 -->\n @if (showSocialGroup()) {\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"chat-1-line\"\n [state]=\"itemState('comment')\"\n ariaLabel=\"Comentario\"\n (clicked)=\"onCommand('comment')\"\n />\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"link\"\n [state]=\"itemState('link')\"\n ariaLabel=\"Insertar enlace\"\n (clicked)=\"onCommand('link')\"\n />\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"at-line\"\n [state]=\"itemState('mention')\"\n ariaLabel=\"Mencionar\"\n (clicked)=\"onCommand('mention')\"\n />\n }\n\n <!-- \u2500\u2500 More (overflow) \u2014 divider + more-2-line \u2500\u2500 -->\n @if (showMore()) {\n <span class=\"sui-rich-editor__divider sui-rich-editor__divider--more\" aria-hidden=\"true\"></span>\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"more-2-line\"\n [state]=\"itemState('more')\"\n ariaLabel=\"M\u00E1s opciones\"\n (clicked)=\"onCommand('more')\"\n />\n }\n</div>\n\n<!-- \u2550\u2550\u2550 \u00C1rea editable (opcional) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Figma solo muestra la toolbar; el contenteditable es un EXTRA del componente\n para uso real. PENDING VERIFY: edici\u00F3n rica parcial via execCommand. -->\n@if (editable()) {\n <div\n #editableEl\n class=\"sui-rich-editor__editable\"\n contenteditable=\"true\"\n role=\"textbox\"\n aria-multiline=\"true\"\n [attr.aria-label]=\"placeholder()\"\n [attr.data-placeholder]=\"placeholder()\"\n [attr.data-empty]=\"isEmpty() ? '' : null\"\n (input)=\"onEditableInput()\"\n (keyup)=\"onEditableSelect()\"\n (mouseup)=\"onEditableSelect()\"\n ></div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;flex-direction:column;gap:8px;box-sizing:border-box}.sui-rich-editor__toolbar{display:flex;align-items:center;gap:2px;padding:2px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-8);box-shadow:var(--sui-regular-shadow-x-small);overflow:clip;box-sizing:border-box;width:fit-content}.sui-rich-editor__divider{flex-shrink:0;width:4px;height:16px;position:relative}.sui-rich-editor__divider:before{content:\"\";position:absolute;top:0;bottom:0;left:50%;width:1px;transform:translate(-50%);background:var(--sui-stroke-soft-200)}.sui-rich-editor__editable{min-height:120px;padding:12px 14px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-8);box-sizing:border-box;outline:none;font-size:14px;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-strong-950);overflow-y:auto;overflow-wrap:break-word;word-break:break-word}.sui-rich-editor__editable:focus-visible{border-color:var(--sui-primary-base)}.sui-rich-editor__editable[data-empty]:before{content:attr(data-placeholder);color:var(--sui-text-sub-600);pointer-events:none}.sui-rich-editor__editable :is(b,strong){font-weight:700}.sui-rich-editor__editable :is(i,em){font-style:italic}.sui-rich-editor__editable u{text-decoration:underline}.sui-rich-editor__editable s{text-decoration:line-through}@media(max-width:767px){.sui-rich-editor__toolbar{flex-wrap:wrap;width:100%;row-gap:2px}.sui-rich-editor__divider{display:none}.sui-rich-editor__editable{font-size:16px}}\n"], dependencies: [{ kind: "component", type: SuiRichEditorItem, selector: "sui-rich-editor-item", inputs: ["type", "state", "label", "icon", "color", "colorHex", "ariaLabel", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13394
13394
|
}
|
|
13395
13395
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiRichEditor, decorators: [{
|
|
13396
13396
|
type: Component,
|
|
@@ -13400,7 +13400,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
13400
13400
|
'[attr.data-sui-layout]': 'layout()',
|
|
13401
13401
|
'[attr.data-sui-show-more]': 'showMore() ? "" : null',
|
|
13402
13402
|
'[attr.data-sui-editable]': 'editable() ? "" : null',
|
|
13403
|
-
}, template: "<!-- \u2550\u2550\u2550 Toolbar (pill flotante) \u2014 Figma 166926:17605 \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"sui-rich-editor__toolbar\" role=\"toolbar\" aria-label=\"Formato de texto\">\n\n <!-- \u2500\u2500 Grupo TEXT: Header + 14px (layouts full / compact) \u2500\u2500 -->\n @if (showTextGroup()) {\n <sui-rich-editor-item\n type=\"text\"\n [label]=\"headingLabel()\"\n [state]=\"itemState('heading')\"\n ariaLabel=\"Estilo de encabezado\"\n (clicked)=\"onCommand('heading')\"\n />\n <sui-rich-editor-item\n type=\"text\"\n [label]=\"fontSizeLabel()\"\n [state]=\"itemState('fontSize')\"\n ariaLabel=\"Tama\u00F1o de fuente\"\n (clicked)=\"onCommand('fontSize')\"\n />\n }\n\n <!-- divider entre TEXT y FORMAT (solo si ambos grupos presentes: layout full) -->\n @if (showTextGroup() && showFormatGroup()) {\n <span class=\"sui-rich-editor__divider\" aria-hidden=\"true\"></span>\n }\n\n <!-- \u2500\u2500 Grupo FORMAT: B I U S (layouts full / formatting) \u2500\u2500 -->\n @if (showFormatGroup()) {\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"bold\"\n [state]=\"itemState('bold')\"\n ariaLabel=\"Negrita\"\n (clicked)=\"onCommand('bold')\"\n />\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"italic\"\n [state]=\"itemState('italic')\"\n ariaLabel=\"Cursiva\"\n (clicked)=\"onCommand('italic')\"\n />\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"underline\"\n [state]=\"itemState('underline')\"\n ariaLabel=\"Subrayado\"\n (clicked)=\"onCommand('underline')\"\n />\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"strikethrough\"\n [state]=\"itemState('strikeThrough')\"\n ariaLabel=\"Tachado\"\n (clicked)=\"onCommand('strikeThrough')\"\n />\n }\n\n <!-- divider entre FORMAT y ALIGN (layout full / formatting) -->\n @if (showAlignGroup() && (showFormatGroup())) {\n <span class=\"sui-rich-editor__divider\" aria-hidden=\"true\"></span>\n }\n\n <!-- \u2500\u2500 Grupo ALIGN: align dropdown (layouts full / formatting) \u2500\u2500 -->\n @if (showAlignGroup()) {\n <sui-rich-editor-item\n type=\"dropdown\"\n icon=\"align-left\"\n [state]=\"itemState('align')\"\n ariaLabel=\"Alineaci\u00F3n\"\n (clicked)=\"onCommand('align')\"\n />\n }\n\n <!-- divider antes de SOCIAL (layout full) -->\n @if (showSocialGroup() && (showTextGroup() || showFormatGroup() || showAlignGroup())) {\n <span class=\"sui-rich-editor__divider\" aria-hidden=\"true\"></span>\n }\n\n <!-- \u2500\u2500 Grupo SOCIAL: chat + link + @ (layouts full / social) \u2500\u2500 -->\n @if (showSocialGroup()) {\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"chat-1-line\"\n [state]=\"itemState('comment')\"\n ariaLabel=\"Comentario\"\n (clicked)=\"onCommand('comment')\"\n />\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"link\"\n [state]=\"itemState('link')\"\n ariaLabel=\"Insertar enlace\"\n (clicked)=\"onCommand('link')\"\n />\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"at-line\"\n [state]=\"itemState('mention')\"\n ariaLabel=\"Mencionar\"\n (clicked)=\"onCommand('mention')\"\n />\n }\n\n <!-- \u2500\u2500 More (overflow) \u2014 divider + more-2-line \u2500\u2500 -->\n @if (showMore()) {\n <span class=\"sui-rich-editor__divider sui-rich-editor__divider--more\" aria-hidden=\"true\"></span>\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"more-2-line\"\n [state]=\"itemState('more')\"\n ariaLabel=\"M\u00E1s opciones\"\n (clicked)=\"onCommand('more')\"\n />\n }\n</div>\n\n<!-- \u2550\u2550\u2550 \u00C1rea editable (opcional) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Figma solo muestra la toolbar; el contenteditable es un EXTRA del componente\n para uso real. PENDING VERIFY: edici\u00F3n rica parcial via execCommand. -->\n@if (editable()) {\n <div\n #editableEl\n class=\"sui-rich-editor__editable\"\n contenteditable=\"true\"\n role=\"textbox\"\n aria-multiline=\"true\"\n [attr.aria-label]=\"placeholder()\"\n [attr.data-placeholder]=\"placeholder()\"\n [attr.data-empty]=\"isEmpty() ? '' : null\"\n (input)=\"onEditableInput()\"\n (keyup)=\"onEditableSelect()\"\n (mouseup)=\"onEditableSelect()\"\n ></div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;flex-direction:column;gap:8px;box-sizing:border-box}.sui-rich-editor__toolbar{display:flex;align-items:center;gap:2px;padding:2px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-8);box-shadow:var(--sui-regular-shadow-x-small);overflow:clip;box-sizing:border-box;width:fit-content}.sui-rich-editor__divider{flex-shrink:0;width:4px;height:16px;position:relative}.sui-rich-editor__divider:before{content:\"\";position:absolute;top:0;bottom:0;left:50%;width:1px;transform:translate(-50%);background:var(--sui-stroke-soft-200)}.sui-rich-editor__editable{min-height:120px;padding:12px 14px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-8);box-sizing:border-box;outline:none;font-size:14px;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-strong-950);overflow-y:auto;overflow-wrap:break-word;word-break:break-word}.sui-rich-editor__editable:focus-visible{border-color:var(--sui-primary-base)}.sui-rich-editor__editable[data-empty]:before{content:attr(data-placeholder);color:var(--sui-text-sub-600);pointer-events:none}.sui-rich-editor__editable :is(b,strong){font-weight:700}.sui-rich-editor__editable :is(i,em){font-style:italic}.sui-rich-editor__editable u{text-decoration:underline}.sui-rich-editor__editable s{text-decoration:line-through}@media(max-width:767px){.sui-rich-editor__toolbar{flex-wrap:wrap;width:100%;row-gap:2px}.sui-rich-editor__divider{display:none}.sui-rich-editor__editable{font-size:16px}}\n"] }]
|
|
13403
|
+
}, template: "<!-- \u2550\u2550\u2550 Toolbar (pill flotante) \u2014 Figma 166926:17605 \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"sui-rich-editor__toolbar\" role=\"toolbar\" aria-label=\"Formato de texto\">\n\n <!-- \u2500\u2500 Grupo TEXT: Header + 14px (layouts full / compact) \u2500\u2500 -->\n @if (showTextGroup()) {\n <sui-rich-editor-item\n type=\"text\"\n [label]=\"headingLabel()\"\n [state]=\"itemState('heading')\"\n ariaLabel=\"Estilo de encabezado\"\n (clicked)=\"onCommand('heading')\"\n />\n <!-- divider 4\u00D716 entre Header y 14px \u2014 Figma 166926:17604 / 166926:17601 -->\n <span class=\"sui-rich-editor__divider\" aria-hidden=\"true\"></span>\n <sui-rich-editor-item\n type=\"text\"\n [label]=\"fontSizeLabel()\"\n [state]=\"itemState('fontSize')\"\n ariaLabel=\"Tama\u00F1o de fuente\"\n (clicked)=\"onCommand('fontSize')\"\n />\n }\n\n <!-- divider entre TEXT y FORMAT (solo si ambos grupos presentes: layout full) -->\n @if (showTextGroup() && showFormatGroup()) {\n <span class=\"sui-rich-editor__divider\" aria-hidden=\"true\"></span>\n }\n\n <!-- \u2500\u2500 Grupo FORMAT: B I U S (layouts full / formatting) \u2500\u2500 -->\n @if (showFormatGroup()) {\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"bold\"\n [state]=\"itemState('bold')\"\n ariaLabel=\"Negrita\"\n (clicked)=\"onCommand('bold')\"\n />\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"italic\"\n [state]=\"itemState('italic')\"\n ariaLabel=\"Cursiva\"\n (clicked)=\"onCommand('italic')\"\n />\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"underline\"\n [state]=\"itemState('underline')\"\n ariaLabel=\"Subrayado\"\n (clicked)=\"onCommand('underline')\"\n />\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"strikethrough\"\n [state]=\"itemState('strikeThrough')\"\n ariaLabel=\"Tachado\"\n (clicked)=\"onCommand('strikeThrough')\"\n />\n }\n\n <!-- divider entre FORMAT y ALIGN (layout full / formatting) -->\n @if (showAlignGroup() && (showFormatGroup())) {\n <span class=\"sui-rich-editor__divider\" aria-hidden=\"true\"></span>\n }\n\n <!-- \u2500\u2500 Grupo ALIGN: align dropdown (layouts full / formatting) \u2500\u2500 -->\n @if (showAlignGroup()) {\n <sui-rich-editor-item\n type=\"dropdown\"\n icon=\"align-left\"\n [state]=\"itemState('align')\"\n ariaLabel=\"Alineaci\u00F3n\"\n (clicked)=\"onCommand('align')\"\n />\n }\n\n <!-- divider antes de SOCIAL (layout full) -->\n @if (showSocialGroup() && (showTextGroup() || showFormatGroup() || showAlignGroup())) {\n <span class=\"sui-rich-editor__divider\" aria-hidden=\"true\"></span>\n }\n\n <!-- \u2500\u2500 Grupo SOCIAL: chat + link + @ (layouts full / social) \u2500\u2500 -->\n @if (showSocialGroup()) {\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"chat-1-line\"\n [state]=\"itemState('comment')\"\n ariaLabel=\"Comentario\"\n (clicked)=\"onCommand('comment')\"\n />\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"link\"\n [state]=\"itemState('link')\"\n ariaLabel=\"Insertar enlace\"\n (clicked)=\"onCommand('link')\"\n />\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"at-line\"\n [state]=\"itemState('mention')\"\n ariaLabel=\"Mencionar\"\n (clicked)=\"onCommand('mention')\"\n />\n }\n\n <!-- \u2500\u2500 More (overflow) \u2014 divider + more-2-line \u2500\u2500 -->\n @if (showMore()) {\n <span class=\"sui-rich-editor__divider sui-rich-editor__divider--more\" aria-hidden=\"true\"></span>\n <sui-rich-editor-item\n type=\"icon\"\n icon=\"more-2-line\"\n [state]=\"itemState('more')\"\n ariaLabel=\"M\u00E1s opciones\"\n (clicked)=\"onCommand('more')\"\n />\n }\n</div>\n\n<!-- \u2550\u2550\u2550 \u00C1rea editable (opcional) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Figma solo muestra la toolbar; el contenteditable es un EXTRA del componente\n para uso real. PENDING VERIFY: edici\u00F3n rica parcial via execCommand. -->\n@if (editable()) {\n <div\n #editableEl\n class=\"sui-rich-editor__editable\"\n contenteditable=\"true\"\n role=\"textbox\"\n aria-multiline=\"true\"\n [attr.aria-label]=\"placeholder()\"\n [attr.data-placeholder]=\"placeholder()\"\n [attr.data-empty]=\"isEmpty() ? '' : null\"\n (input)=\"onEditableInput()\"\n (keyup)=\"onEditableSelect()\"\n (mouseup)=\"onEditableSelect()\"\n ></div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;flex-direction:column;gap:8px;box-sizing:border-box}.sui-rich-editor__toolbar{display:flex;align-items:center;gap:2px;padding:2px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-8);box-shadow:var(--sui-regular-shadow-x-small);overflow:clip;box-sizing:border-box;width:fit-content}.sui-rich-editor__divider{flex-shrink:0;width:4px;height:16px;position:relative}.sui-rich-editor__divider:before{content:\"\";position:absolute;top:0;bottom:0;left:50%;width:1px;transform:translate(-50%);background:var(--sui-stroke-soft-200)}.sui-rich-editor__editable{min-height:120px;padding:12px 14px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-8);box-sizing:border-box;outline:none;font-size:14px;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-strong-950);overflow-y:auto;overflow-wrap:break-word;word-break:break-word}.sui-rich-editor__editable:focus-visible{border-color:var(--sui-primary-base)}.sui-rich-editor__editable[data-empty]:before{content:attr(data-placeholder);color:var(--sui-text-sub-600);pointer-events:none}.sui-rich-editor__editable :is(b,strong){font-weight:700}.sui-rich-editor__editable :is(i,em){font-style:italic}.sui-rich-editor__editable u{text-decoration:underline}.sui-rich-editor__editable s{text-decoration:line-through}@media(max-width:767px){.sui-rich-editor__toolbar{flex-wrap:wrap;width:100%;row-gap:2px}.sui-rich-editor__divider{display:none}.sui-rich-editor__editable{font-size:16px}}\n"] }]
|
|
13404
13404
|
}], ctorParameters: () => [], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], showMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMore", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], headingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLabel", required: false }] }], fontSizeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "fontSizeLabel", required: false }] }], action: [{ type: i0.Output, args: ["action"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], editableRef: [{ type: i0.ViewChild, args: ['editableEl', { isSignal: true }] }] } });
|
|
13405
13405
|
|
|
13406
13406
|
/**
|