@ajuarezso/sui-design-system 0.7.17 → 0.7.18
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.
|
@@ -11215,9 +11215,15 @@ class SuiModalFooter {
|
|
|
11215
11215
|
secondaryButton = input(null, ...(ngDevMode ? [{ debugName: "secondaryButton" }] : /* istanbul ignore next */ []));
|
|
11216
11216
|
/** Type Stretch de Figma: los botones ocupan todo el ancho (50/50). */
|
|
11217
11217
|
stretch = input(false, ...(ngDevMode ? [{ debugName: "stretch" }] : /* istanbul ignore next */ []));
|
|
11218
|
-
/**
|
|
11219
|
-
|
|
11220
|
-
|
|
11218
|
+
/** Modal padre (por element injector — el footer se declara dentro de
|
|
11219
|
+
<sui-modal> en el template del consumer). Null en uso standalone. */
|
|
11220
|
+
modal = inject(SuiModal, { optional: true });
|
|
11221
|
+
/** Size explícito de los botones. Si no se pasa, el DS legisla solo
|
|
11222
|
+
(fuente única, regla del proyecto): `large` (48px) dentro de un modal
|
|
11223
|
+
fullscreen — touch targets móviles — y `small` (36px, canon Figma
|
|
11224
|
+
472:566) en dialogs normales. */
|
|
11225
|
+
buttonSize = input(null, ...(ngDevMode ? [{ debugName: "buttonSize" }] : /* istanbul ignore next */ []));
|
|
11226
|
+
effectiveButtonSize = computed(() => this.buttonSize() ?? (this.modal?.fullscreen() ? 'large' : 'small'), ...(ngDevMode ? [{ debugName: "effectiveButtonSize" }] : /* istanbul ignore next */ []));
|
|
11221
11227
|
primaryClick = output();
|
|
11222
11228
|
secondaryClick = output();
|
|
11223
11229
|
cfg(v) {
|
|
@@ -11229,13 +11235,13 @@ class SuiModalFooter {
|
|
|
11229
11235
|
primaryCfg = computed(() => this.cfg(this.primaryButton()), ...(ngDevMode ? [{ debugName: "primaryCfg" }] : /* istanbul ignore next */ []));
|
|
11230
11236
|
secondaryCfg = computed(() => this.cfg(this.secondaryButton()), ...(ngDevMode ? [{ debugName: "secondaryCfg" }] : /* istanbul ignore next */ []));
|
|
11231
11237
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiModalFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11232
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiModalFooter, isStandalone: true, selector: "sui-modal-footer", inputs: { primaryButton: { classPropertyName: "primaryButton", publicName: "primaryButton", isSignal: true, isRequired: false, transformFunction: null }, secondaryButton: { classPropertyName: "secondaryButton", publicName: "secondaryButton", isSignal: true, isRequired: false, transformFunction: null }, stretch: { classPropertyName: "stretch", publicName: "stretch", isSignal: true, isRequired: false, transformFunction: null }, buttonSize: { classPropertyName: "buttonSize", publicName: "buttonSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { primaryClick: "primaryClick", secondaryClick: "secondaryClick" }, host: { properties: { "attr.data-sui-stretch": "stretch() ? \"\" : null" } }, ngImport: i0, template: "<!-- Slot izquierdo: los \"types\" de Figma (Checkbox / Toggle / Information /\n Stepper / Link Button) se proyectan ac\u00E1 con los SUI existentes. -->\n<div class=\"sui-modal-footer__aux\">\n <ng-content />\n</div>\n\n<div class=\"sui-modal-footer__actions\">\n @if (secondaryCfg(); as sec) {\n <sui-button\n variant=\"stroke\"\n color=\"neutral\"\n [size]=\"
|
|
11238
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiModalFooter, isStandalone: true, selector: "sui-modal-footer", inputs: { primaryButton: { classPropertyName: "primaryButton", publicName: "primaryButton", isSignal: true, isRequired: false, transformFunction: null }, secondaryButton: { classPropertyName: "secondaryButton", publicName: "secondaryButton", isSignal: true, isRequired: false, transformFunction: null }, stretch: { classPropertyName: "stretch", publicName: "stretch", isSignal: true, isRequired: false, transformFunction: null }, buttonSize: { classPropertyName: "buttonSize", publicName: "buttonSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { primaryClick: "primaryClick", secondaryClick: "secondaryClick" }, host: { properties: { "attr.data-sui-stretch": "stretch() ? \"\" : null" } }, ngImport: i0, template: "<!-- Slot izquierdo: los \"types\" de Figma (Checkbox / Toggle / Information /\n Stepper / Link Button) se proyectan ac\u00E1 con los SUI existentes. -->\n<div class=\"sui-modal-footer__aux\">\n <ng-content />\n</div>\n\n<div class=\"sui-modal-footer__actions\">\n @if (secondaryCfg(); as sec) {\n <sui-button\n variant=\"stroke\"\n color=\"neutral\"\n [size]=\"effectiveButtonSize()\"\n type=\"button\"\n [disabled]=\"sec.disabled ?? false\"\n (click)=\"secondaryClick.emit()\"\n >{{ sec.label }}</sui-button>\n }\n @if (primaryCfg(); as pri) {\n <sui-button\n variant=\"filled\"\n [size]=\"effectiveButtonSize()\"\n type=\"button\"\n [color]=\"pri.color ?? 'primary'\"\n [disabled]=\"pri.disabled ?? false\"\n (click)=\"primaryClick.emit()\"\n >{{ pri.label }}</sui-button>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:12px;padding:16px 20px;background:var(--sui-bg-white-0, #fff);border-top:1px solid var(--sui-stroke-soft-200, #ebebeb)}.sui-modal-footer__aux{flex:1 1 0;min-width:0;display:flex;align-items:center}.sui-modal-footer__actions{display:flex;align-items:center;gap:12px;margin-left:auto;flex-shrink:0}:host([data-sui-stretch]) .sui-modal-footer__aux{display:none}:host([data-sui-stretch]) .sui-modal-footer__actions{width:100%;margin-left:0}:host([data-sui-stretch]) .sui-modal-footer__actions sui-button{flex:1 1 0}\n"], dependencies: [{ kind: "component", type: SuiButton, selector: "sui-button", inputs: ["variant", "color", "size", "onlyIcon", "disabled", "leftIcon", "rightIcon", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11233
11239
|
}
|
|
11234
11240
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiModalFooter, decorators: [{
|
|
11235
11241
|
type: Component,
|
|
11236
11242
|
args: [{ selector: 'sui-modal-footer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiButton], host: {
|
|
11237
11243
|
'[attr.data-sui-stretch]': 'stretch() ? "" : null',
|
|
11238
|
-
}, template: "<!-- Slot izquierdo: los \"types\" de Figma (Checkbox / Toggle / Information /\n Stepper / Link Button) se proyectan ac\u00E1 con los SUI existentes. -->\n<div class=\"sui-modal-footer__aux\">\n <ng-content />\n</div>\n\n<div class=\"sui-modal-footer__actions\">\n @if (secondaryCfg(); as sec) {\n <sui-button\n variant=\"stroke\"\n color=\"neutral\"\n [size]=\"
|
|
11244
|
+
}, template: "<!-- Slot izquierdo: los \"types\" de Figma (Checkbox / Toggle / Information /\n Stepper / Link Button) se proyectan ac\u00E1 con los SUI existentes. -->\n<div class=\"sui-modal-footer__aux\">\n <ng-content />\n</div>\n\n<div class=\"sui-modal-footer__actions\">\n @if (secondaryCfg(); as sec) {\n <sui-button\n variant=\"stroke\"\n color=\"neutral\"\n [size]=\"effectiveButtonSize()\"\n type=\"button\"\n [disabled]=\"sec.disabled ?? false\"\n (click)=\"secondaryClick.emit()\"\n >{{ sec.label }}</sui-button>\n }\n @if (primaryCfg(); as pri) {\n <sui-button\n variant=\"filled\"\n [size]=\"effectiveButtonSize()\"\n type=\"button\"\n [color]=\"pri.color ?? 'primary'\"\n [disabled]=\"pri.disabled ?? false\"\n (click)=\"primaryClick.emit()\"\n >{{ pri.label }}</sui-button>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:12px;padding:16px 20px;background:var(--sui-bg-white-0, #fff);border-top:1px solid var(--sui-stroke-soft-200, #ebebeb)}.sui-modal-footer__aux{flex:1 1 0;min-width:0;display:flex;align-items:center}.sui-modal-footer__actions{display:flex;align-items:center;gap:12px;margin-left:auto;flex-shrink:0}:host([data-sui-stretch]) .sui-modal-footer__aux{display:none}:host([data-sui-stretch]) .sui-modal-footer__actions{width:100%;margin-left:0}:host([data-sui-stretch]) .sui-modal-footer__actions sui-button{flex:1 1 0}\n"] }]
|
|
11239
11245
|
}], propDecorators: { primaryButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryButton", required: false }] }], secondaryButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryButton", required: false }] }], stretch: [{ type: i0.Input, args: [{ isSignal: true, alias: "stretch", required: false }] }], buttonSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonSize", required: false }] }], primaryClick: [{ type: i0.Output, args: ["primaryClick"] }], secondaryClick: [{ type: i0.Output, args: ["secondaryClick"] }] } });
|
|
11240
11246
|
|
|
11241
11247
|
/**
|