@ajuarezso/sui-design-system 0.7.21 → 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):
|
|
@@ -6073,7 +6073,7 @@ class SuiCounterInput {
|
|
|
6073
6073
|
useExisting: forwardRef(() => SuiCounterInput),
|
|
6074
6074
|
multi: true,
|
|
6075
6075
|
},
|
|
6076
|
-
], ngImport: i0, template: "@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n [size]=\"labelSize()\"\n class=\"sui-counter-input__label-host\"\n />\n}\n\n<div\n class=\"sui-counter-input__field\"\n [class.sui-counter-input__field--error]=\"error()\"\n [class.sui-counter-input__field--disabled]=\"isDisabled()\"\n>\n <!-- Stepper \u2212 (decrement) -->\n <button\n type=\"button\"\n class=\"sui-counter-input__stepper\"\n [attr.aria-label]=\"decrementLabel()\"\n [disabled]=\"!canDecrement() || null\"\n (click)=\"decrement()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"subtract-line\" [size]=\"20\" />\n </button>\n\n <!-- Valor centrado (spinbutton) -->\n <span\n class=\"sui-counter-input__value\"\n role=\"spinbutton\"\n [attr.aria-valuenow]=\"effectiveValue()\"\n [attr.aria-valuemin]=\"ariaMin()\"\n [attr.aria-valuemax]=\"ariaMax()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n [attr.aria-invalid]=\"error() ? 'true' : null\"\n >\n {{ displayValue() }}\n </span>\n\n <!-- Stepper + (increment) -->\n <button\n type=\"button\"\n class=\"sui-counter-input__stepper\"\n [attr.aria-label]=\"incrementLabel()\"\n [disabled]=\"!canIncrement() || null\"\n (click)=\"increment()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"add-line\" [size]=\"20\" />\n </button>\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n class=\"sui-counter-input__hint-host\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-counter-input__label-host{display:block;margin-bottom:6px}.sui-counter-input__hint-host{display:block;margin-top:6px}.sui-counter-input__field{display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;overflow:hidden;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);transition:background var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=medium]) .sui-counter-input__field,:host(:not([data-sui-size])) .sui-counter-input__field{gap:8px;padding:7px 8px;border-radius:var(--sui-radius-
|
|
6076
|
+
], ngImport: i0, template: "@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n [size]=\"labelSize()\"\n class=\"sui-counter-input__label-host\"\n />\n}\n\n<div\n class=\"sui-counter-input__field\"\n [class.sui-counter-input__field--error]=\"error()\"\n [class.sui-counter-input__field--disabled]=\"isDisabled()\"\n>\n <!-- Stepper \u2212 (decrement) -->\n <button\n type=\"button\"\n class=\"sui-counter-input__stepper\"\n [attr.aria-label]=\"decrementLabel()\"\n [disabled]=\"!canDecrement() || null\"\n (click)=\"decrement()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"subtract-line\" [size]=\"20\" />\n </button>\n\n <!-- Valor centrado (spinbutton) -->\n <span\n class=\"sui-counter-input__value\"\n role=\"spinbutton\"\n [attr.aria-valuenow]=\"effectiveValue()\"\n [attr.aria-valuemin]=\"ariaMin()\"\n [attr.aria-valuemax]=\"ariaMax()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n [attr.aria-invalid]=\"error() ? 'true' : null\"\n >\n {{ displayValue() }}\n </span>\n\n <!-- Stepper + (increment) -->\n <button\n type=\"button\"\n class=\"sui-counter-input__stepper\"\n [attr.aria-label]=\"incrementLabel()\"\n [disabled]=\"!canIncrement() || null\"\n (click)=\"increment()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"add-line\" [size]=\"20\" />\n </button>\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n class=\"sui-counter-input__hint-host\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-counter-input__label-host{display:block;margin-bottom:6px}.sui-counter-input__hint-host{display:block;margin-top:6px}.sui-counter-input__field{display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;overflow:hidden;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);transition:background var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=medium]) .sui-counter-input__field,:host(:not([data-sui-size])) .sui-counter-input__field{gap:8px;padding:7px 8px;border-radius:var(--sui-radius-full, 999px);min-height:40px}:host([data-sui-size=small]) .sui-counter-input__field{gap:6px;padding:5px 6px;border-radius:var(--sui-radius-full, 999px);min-height:36px}:host([data-sui-size=large]) .sui-counter-input__field{gap:10px;padding:11px 12px;border-radius:var(--sui-radius-full, 999px);min-height:48px}:host([data-sui-size=xsmall]) .sui-counter-input__field{gap:4px;padding:3px 4px;border-radius:var(--sui-radius-full, 999px);min-height:32px}:host([data-sui-size=\"2xsmall\"]) .sui-counter-input__field{gap:4px;padding:1px 2px;border-radius:var(--sui-radius-full, 999px);min-height:28px}:host([data-sui-size=xlarge]) .sui-counter-input__field{gap:12px;padding:13px 14px;border-radius:var(--sui-radius-full, 999px);min-height:52px}.sui-counter-input__field:not(.sui-counter-input__field--disabled):not(.sui-counter-input__field--error):hover{background:var(--sui-bg-weak-50);border-color:transparent}.sui-counter-input__field:not(.sui-counter-input__field--disabled):not(.sui-counter-input__field--error):focus-within{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-counter-input__field--error{border-color:var(--sui-state-error-base);box-shadow:var(--sui-regular-shadow-x-small)}.sui-counter-input__field--error:focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 3px var(--sui-red-alpha-10, rgba(251, 55, 72, .1019607843))}.sui-counter-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-counter-input__stepper{appearance:none;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;width:24px;height:24px;min-width:0;min-height:0;margin:0;padding:2px;border:0;border-radius:var(--sui-radius-full, 999px);background:transparent;color:var(--sui-icon-sub-600);line-height:0;cursor:pointer;transition:background .12s,color .12s,transform var(--dur-instant, 80ms) var(--ease-ek, cubic-bezier(.22, 1, .36, 1))}.sui-counter-input__stepper:hover:not(:disabled){background:var(--sui-bg-weak-50);color:var(--sui-icon-strong-950)}.sui-counter-input__stepper:active:not(:disabled){background:var(--sui-bg-surface-800);color:var(--sui-icon-white-0);transform:scale(.92)}.sui-counter-input__stepper:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}.sui-counter-input__stepper:disabled{color:var(--sui-icon-disabled-300);cursor:not-allowed;pointer-events:none;opacity:.5}.sui-counter-input__field:hover .sui-counter-input__stepper:hover:not(:disabled){background:var(--sui-bg-white-0)}:host([data-sui-disabled]) .sui-counter-input__stepper{color:var(--sui-icon-disabled-300);opacity:1}.sui-counter-input__value{flex:1 1 auto;min-width:0;text-align:center;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size, 14px);font-weight:var(--sui-type-paragraph-sm-weight, 400);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-user-select:none;user-select:none;color:var(--sui-text-strong-950)}.sui-counter-input__field--disabled .sui-counter-input__value{color:var(--sui-text-disabled-300)}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiFormLabel, selector: "sui-form-label", inputs: ["label", "sublabel", "required", "tooltip", "link", "size", "disabled", "for"], outputs: ["linkClick"] }, { kind: "component", type: SuiFormHint, selector: "sui-form-hint", inputs: ["message", "variant", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6077
6077
|
}
|
|
6078
6078
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiCounterInput, decorators: [{
|
|
6079
6079
|
type: Component,
|
|
@@ -6089,7 +6089,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
6089
6089
|
'[attr.data-sui-size]': 'size()',
|
|
6090
6090
|
'[attr.data-sui-disabled]': 'isDisabled() ? "" : null',
|
|
6091
6091
|
'[attr.data-sui-error]': 'error() ? "" : null',
|
|
6092
|
-
}, template: "@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n [size]=\"labelSize()\"\n class=\"sui-counter-input__label-host\"\n />\n}\n\n<div\n class=\"sui-counter-input__field\"\n [class.sui-counter-input__field--error]=\"error()\"\n [class.sui-counter-input__field--disabled]=\"isDisabled()\"\n>\n <!-- Stepper \u2212 (decrement) -->\n <button\n type=\"button\"\n class=\"sui-counter-input__stepper\"\n [attr.aria-label]=\"decrementLabel()\"\n [disabled]=\"!canDecrement() || null\"\n (click)=\"decrement()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"subtract-line\" [size]=\"20\" />\n </button>\n\n <!-- Valor centrado (spinbutton) -->\n <span\n class=\"sui-counter-input__value\"\n role=\"spinbutton\"\n [attr.aria-valuenow]=\"effectiveValue()\"\n [attr.aria-valuemin]=\"ariaMin()\"\n [attr.aria-valuemax]=\"ariaMax()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n [attr.aria-invalid]=\"error() ? 'true' : null\"\n >\n {{ displayValue() }}\n </span>\n\n <!-- Stepper + (increment) -->\n <button\n type=\"button\"\n class=\"sui-counter-input__stepper\"\n [attr.aria-label]=\"incrementLabel()\"\n [disabled]=\"!canIncrement() || null\"\n (click)=\"increment()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"add-line\" [size]=\"20\" />\n </button>\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n class=\"sui-counter-input__hint-host\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-counter-input__label-host{display:block;margin-bottom:6px}.sui-counter-input__hint-host{display:block;margin-top:6px}.sui-counter-input__field{display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;overflow:hidden;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);transition:background var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=medium]) .sui-counter-input__field,:host(:not([data-sui-size])) .sui-counter-input__field{gap:8px;padding:7px 8px;border-radius:var(--sui-radius-
|
|
6092
|
+
}, template: "@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n [size]=\"labelSize()\"\n class=\"sui-counter-input__label-host\"\n />\n}\n\n<div\n class=\"sui-counter-input__field\"\n [class.sui-counter-input__field--error]=\"error()\"\n [class.sui-counter-input__field--disabled]=\"isDisabled()\"\n>\n <!-- Stepper \u2212 (decrement) -->\n <button\n type=\"button\"\n class=\"sui-counter-input__stepper\"\n [attr.aria-label]=\"decrementLabel()\"\n [disabled]=\"!canDecrement() || null\"\n (click)=\"decrement()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"subtract-line\" [size]=\"20\" />\n </button>\n\n <!-- Valor centrado (spinbutton) -->\n <span\n class=\"sui-counter-input__value\"\n role=\"spinbutton\"\n [attr.aria-valuenow]=\"effectiveValue()\"\n [attr.aria-valuemin]=\"ariaMin()\"\n [attr.aria-valuemax]=\"ariaMax()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n [attr.aria-invalid]=\"error() ? 'true' : null\"\n >\n {{ displayValue() }}\n </span>\n\n <!-- Stepper + (increment) -->\n <button\n type=\"button\"\n class=\"sui-counter-input__stepper\"\n [attr.aria-label]=\"incrementLabel()\"\n [disabled]=\"!canIncrement() || null\"\n (click)=\"increment()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"add-line\" [size]=\"20\" />\n </button>\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n class=\"sui-counter-input__hint-host\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-counter-input__label-host{display:block;margin-bottom:6px}.sui-counter-input__hint-host{display:block;margin-top:6px}.sui-counter-input__field{display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;overflow:hidden;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);transition:background var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=medium]) .sui-counter-input__field,:host(:not([data-sui-size])) .sui-counter-input__field{gap:8px;padding:7px 8px;border-radius:var(--sui-radius-full, 999px);min-height:40px}:host([data-sui-size=small]) .sui-counter-input__field{gap:6px;padding:5px 6px;border-radius:var(--sui-radius-full, 999px);min-height:36px}:host([data-sui-size=large]) .sui-counter-input__field{gap:10px;padding:11px 12px;border-radius:var(--sui-radius-full, 999px);min-height:48px}:host([data-sui-size=xsmall]) .sui-counter-input__field{gap:4px;padding:3px 4px;border-radius:var(--sui-radius-full, 999px);min-height:32px}:host([data-sui-size=\"2xsmall\"]) .sui-counter-input__field{gap:4px;padding:1px 2px;border-radius:var(--sui-radius-full, 999px);min-height:28px}:host([data-sui-size=xlarge]) .sui-counter-input__field{gap:12px;padding:13px 14px;border-radius:var(--sui-radius-full, 999px);min-height:52px}.sui-counter-input__field:not(.sui-counter-input__field--disabled):not(.sui-counter-input__field--error):hover{background:var(--sui-bg-weak-50);border-color:transparent}.sui-counter-input__field:not(.sui-counter-input__field--disabled):not(.sui-counter-input__field--error):focus-within{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-counter-input__field--error{border-color:var(--sui-state-error-base);box-shadow:var(--sui-regular-shadow-x-small)}.sui-counter-input__field--error:focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 3px var(--sui-red-alpha-10, rgba(251, 55, 72, .1019607843))}.sui-counter-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-counter-input__stepper{appearance:none;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;width:24px;height:24px;min-width:0;min-height:0;margin:0;padding:2px;border:0;border-radius:var(--sui-radius-full, 999px);background:transparent;color:var(--sui-icon-sub-600);line-height:0;cursor:pointer;transition:background .12s,color .12s,transform var(--dur-instant, 80ms) var(--ease-ek, cubic-bezier(.22, 1, .36, 1))}.sui-counter-input__stepper:hover:not(:disabled){background:var(--sui-bg-weak-50);color:var(--sui-icon-strong-950)}.sui-counter-input__stepper:active:not(:disabled){background:var(--sui-bg-surface-800);color:var(--sui-icon-white-0);transform:scale(.92)}.sui-counter-input__stepper:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}.sui-counter-input__stepper:disabled{color:var(--sui-icon-disabled-300);cursor:not-allowed;pointer-events:none;opacity:.5}.sui-counter-input__field:hover .sui-counter-input__stepper:hover:not(:disabled){background:var(--sui-bg-white-0)}:host([data-sui-disabled]) .sui-counter-input__stepper{color:var(--sui-icon-disabled-300);opacity:1}.sui-counter-input__value{flex:1 1 auto;min-width:0;text-align:center;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size, 14px);font-weight:var(--sui-type-paragraph-sm-weight, 400);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-user-select:none;user-select:none;color:var(--sui-text-strong-950)}.sui-counter-input__field--disabled .sui-counter-input__value{color:var(--sui-text-disabled-300)}\n"] }]
|
|
6093
6093
|
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], decrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "decrementLabel", required: false }] }], incrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "incrementLabel", required: false }] }] } });
|
|
6094
6094
|
|
|
6095
6095
|
/**
|
|
@@ -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
|
/**
|