@lesterarte/sefin-ui 0.0.83 → 0.0.84

package/fesm2022/lesterarte-sefin-ui.mjs

@@ -1532,24 +1532,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
             }] } });
 
 class StackComponent {
+    /** Base flex direction (mobile-first). */
     direction = 'column';
+    /** Direction from 640px (sm). */
+    directionSm;
+    /** Direction from 768px (md). */
+    directionMd;
+    /** Direction from 1024px (lg). */
+    directionLg;
+    /** Direction from 1280px (xl). */
+    directionXl;
     spacing;
     align = 'stretch';
     justify = 'start';
     wrap = false;
     class = '';
     get stackClasses() {
-        return [
+        const classes = [
             'sefin-stack',
             `sefin-stack--${this.direction}`,
             this.spacing ? `sefin-stack--spacing-${this.spacing}` : '',
             `sefin-stack--align-${this.align}`,
             `sefin-stack--justify-${this.justify}`,
             this.wrap ? 'sefin-stack--wrap' : '',
-            this.class,
-        ]
-            .filter(Boolean)
-            .join(' ');
+        ];
+        if (this.directionSm)
+            classes.push(`sefin-stack--${this.directionSm}-sm`);
+        if (this.directionMd)
+            classes.push(`sefin-stack--${this.directionMd}-md`);
+        if (this.directionLg)
+            classes.push(`sefin-stack--${this.directionLg}-lg`);
+        if (this.directionXl)
+            classes.push(`sefin-stack--${this.directionXl}-xl`);
+        if (this.class)
+            classes.push(this.class);
+        return classes.filter(Boolean).join(' ');
     }
     get spacingValue() {
         if (!this.spacing) {
@@ -1571,15 +1588,23 @@ class StackComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: StackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: StackComponent, isStandalone: true, selector: "sefin-stack", inputs: { direction: "direction", spacing: "spacing", align: "align", justify: "justify", wrap: "wrap", class: "class" }, host: { styleAttribute: "display: block; width: 100%;" }, ngImport: i0, template: "<div [class]=\"stackClasses\" [ngStyle]=\"stackStyles\">\n  <ng-content></ng-content>\n</div>\n\n", styles: [".sefin-stack{display:flex!important;gap:0}.sefin-stack--column{flex-direction:column}.sefin-stack--row{flex-direction:row}.sefin-stack--wrap{flex-wrap:wrap}.sefin-stack--spacing-xs{gap:var(--sefin-spacing-xs, 4px)!important}.sefin-stack--spacing-sm{gap:var(--sefin-spacing-sm, 8px)!important}.sefin-stack--spacing-md{gap:var(--sefin-spacing-md, 16px)!important}.sefin-stack--spacing-lg{gap:var(--sefin-spacing-lg, 24px)!important}.sefin-stack--spacing-xl{gap:var(--sefin-spacing-xl, 32px)!important}.sefin-stack--spacing-2xl{gap:var(--sefin-spacing-2xl, 48px)!important}.sefin-stack--align-start{align-items:flex-start}.sefin-stack--align-center{align-items:center}.sefin-stack--align-end{align-items:flex-end}.sefin-stack--align-stretch{align-items:stretch}.sefin-stack--justify-start{justify-content:flex-start}.sefin-stack--justify-center{justify-content:center}.sefin-stack--justify-end{justify-content:flex-end}.sefin-stack--justify-space-between{justify-content:space-between}.sefin-stack--justify-space-around{justify-content:space-around}.sefin-stack--justify-space-evenly{justify-content:space-evenly}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: StackComponent, isStandalone: true, selector: "sefin-stack", inputs: { direction: "direction", directionSm: "directionSm", directionMd: "directionMd", directionLg: "directionLg", directionXl: "directionXl", spacing: "spacing", align: "align", justify: "justify", wrap: "wrap", class: "class" }, host: { styleAttribute: "display: block; width: 100%;" }, ngImport: i0, template: "<div [class]=\"stackClasses\" [ngStyle]=\"stackStyles\">\n  <ng-content></ng-content>\n</div>\n\n", styles: [".sefin-stack{display:flex!important;gap:0}.sefin-stack--column{flex-direction:column}.sefin-stack--row{flex-direction:row}@media(min-width:640px){.sefin-stack--row-sm{flex-direction:row}.sefin-stack--column-sm{flex-direction:column}}@media(min-width:768px){.sefin-stack--row-md{flex-direction:row}.sefin-stack--column-md{flex-direction:column}}@media(min-width:1024px){.sefin-stack--row-lg{flex-direction:row}.sefin-stack--column-lg{flex-direction:column}}@media(min-width:1280px){.sefin-stack--row-xl{flex-direction:row}.sefin-stack--column-xl{flex-direction:column}}.sefin-stack--wrap{flex-wrap:wrap}.sefin-stack--spacing-xs{gap:var(--sefin-spacing-xs, 4px)!important}.sefin-stack--spacing-sm{gap:var(--sefin-spacing-sm, 8px)!important}.sefin-stack--spacing-md{gap:var(--sefin-spacing-md, 16px)!important}.sefin-stack--spacing-lg{gap:var(--sefin-spacing-lg, 24px)!important}.sefin-stack--spacing-xl{gap:var(--sefin-spacing-xl, 32px)!important}.sefin-stack--spacing-2xl{gap:var(--sefin-spacing-2xl, 48px)!important}.sefin-stack--align-start{align-items:flex-start}.sefin-stack--align-center{align-items:center}.sefin-stack--align-end{align-items:flex-end}.sefin-stack--align-stretch{align-items:stretch}.sefin-stack--justify-start{justify-content:flex-start}.sefin-stack--justify-center{justify-content:center}.sefin-stack--justify-end{justify-content:flex-end}.sefin-stack--justify-space-between{justify-content:space-between}.sefin-stack--justify-space-around{justify-content:space-around}.sefin-stack--justify-space-evenly{justify-content:space-evenly}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: StackComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sefin-stack', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.Default, host: {
                         style: 'display: block; width: 100%;',
-                    }, template: "<div [class]=\"stackClasses\" [ngStyle]=\"stackStyles\">\n  <ng-content></ng-content>\n</div>\n\n", styles: [".sefin-stack{display:flex!important;gap:0}.sefin-stack--column{flex-direction:column}.sefin-stack--row{flex-direction:row}.sefin-stack--wrap{flex-wrap:wrap}.sefin-stack--spacing-xs{gap:var(--sefin-spacing-xs, 4px)!important}.sefin-stack--spacing-sm{gap:var(--sefin-spacing-sm, 8px)!important}.sefin-stack--spacing-md{gap:var(--sefin-spacing-md, 16px)!important}.sefin-stack--spacing-lg{gap:var(--sefin-spacing-lg, 24px)!important}.sefin-stack--spacing-xl{gap:var(--sefin-spacing-xl, 32px)!important}.sefin-stack--spacing-2xl{gap:var(--sefin-spacing-2xl, 48px)!important}.sefin-stack--align-start{align-items:flex-start}.sefin-stack--align-center{align-items:center}.sefin-stack--align-end{align-items:flex-end}.sefin-stack--align-stretch{align-items:stretch}.sefin-stack--justify-start{justify-content:flex-start}.sefin-stack--justify-center{justify-content:center}.sefin-stack--justify-end{justify-content:flex-end}.sefin-stack--justify-space-between{justify-content:space-between}.sefin-stack--justify-space-around{justify-content:space-around}.sefin-stack--justify-space-evenly{justify-content:space-evenly}\n"] }]
+                    }, template: "<div [class]=\"stackClasses\" [ngStyle]=\"stackStyles\">\n  <ng-content></ng-content>\n</div>\n\n", styles: [".sefin-stack{display:flex!important;gap:0}.sefin-stack--column{flex-direction:column}.sefin-stack--row{flex-direction:row}@media(min-width:640px){.sefin-stack--row-sm{flex-direction:row}.sefin-stack--column-sm{flex-direction:column}}@media(min-width:768px){.sefin-stack--row-md{flex-direction:row}.sefin-stack--column-md{flex-direction:column}}@media(min-width:1024px){.sefin-stack--row-lg{flex-direction:row}.sefin-stack--column-lg{flex-direction:column}}@media(min-width:1280px){.sefin-stack--row-xl{flex-direction:row}.sefin-stack--column-xl{flex-direction:column}}.sefin-stack--wrap{flex-wrap:wrap}.sefin-stack--spacing-xs{gap:var(--sefin-spacing-xs, 4px)!important}.sefin-stack--spacing-sm{gap:var(--sefin-spacing-sm, 8px)!important}.sefin-stack--spacing-md{gap:var(--sefin-spacing-md, 16px)!important}.sefin-stack--spacing-lg{gap:var(--sefin-spacing-lg, 24px)!important}.sefin-stack--spacing-xl{gap:var(--sefin-spacing-xl, 32px)!important}.sefin-stack--spacing-2xl{gap:var(--sefin-spacing-2xl, 48px)!important}.sefin-stack--align-start{align-items:flex-start}.sefin-stack--align-center{align-items:center}.sefin-stack--align-end{align-items:flex-end}.sefin-stack--align-stretch{align-items:stretch}.sefin-stack--justify-start{justify-content:flex-start}.sefin-stack--justify-center{justify-content:center}.sefin-stack--justify-end{justify-content:flex-end}.sefin-stack--justify-space-between{justify-content:space-between}.sefin-stack--justify-space-around{justify-content:space-around}.sefin-stack--justify-space-evenly{justify-content:space-evenly}\n"] }]
         }], propDecorators: { direction: [{
                 type: Input
+            }], directionSm: [{
+                type: Input
+            }], directionMd: [{
+                type: Input
+            }], directionLg: [{
+                type: Input
+            }], directionXl: [{
+                type: Input
             }], spacing: [{
                 type: Input
             }], align: [{