@lesterarte/sefin-ui 0.0.60 → 0.0.62
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Input, ChangeDetectionStrategy, Component, EventEmitter, Output, forwardRef, ViewChild, HostListener, signal, computed, ContentChild, ViewEncapsulation } from '@angular/core';
|
|
2
|
+
import { Input, ChangeDetectionStrategy, Component, EventEmitter, Output, HostBinding, forwardRef, ViewChild, HostListener, signal, computed, ContentChild, ViewEncapsulation } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i1$1 from '@angular/platform-browser';
|
|
@@ -1453,11 +1453,13 @@ class StackComponent {
|
|
|
1453
1453
|
};
|
|
1454
1454
|
}
|
|
1455
1455
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: StackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1456
|
-
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" }, 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 });
|
|
1456
|
+
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 });
|
|
1457
1457
|
}
|
|
1458
1458
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: StackComponent, decorators: [{
|
|
1459
1459
|
type: Component,
|
|
1460
|
-
args: [{ selector: 'sefin-stack', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.Default,
|
|
1460
|
+
args: [{ selector: 'sefin-stack', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.Default, host: {
|
|
1461
|
+
style: 'display: block; width: 100%;',
|
|
1462
|
+
}, 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"] }]
|
|
1461
1463
|
}], propDecorators: { direction: [{
|
|
1462
1464
|
type: Input
|
|
1463
1465
|
}], spacing: [{
|
|
@@ -1472,6 +1474,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
1472
1474
|
type: Input
|
|
1473
1475
|
}] } });
|
|
1474
1476
|
|
|
1477
|
+
const CONTAINER_MAX_WIDTH = {
|
|
1478
|
+
sm: '640px',
|
|
1479
|
+
md: '768px',
|
|
1480
|
+
lg: '1024px',
|
|
1481
|
+
xl: '1280px',
|
|
1482
|
+
full: '100%',
|
|
1483
|
+
};
|
|
1475
1484
|
class ContainerComponent {
|
|
1476
1485
|
/** Container size. Options: 'sm' | 'md' | 'lg' | 'xl' | 'full' */
|
|
1477
1486
|
size = 'md';
|
|
@@ -1479,33 +1488,75 @@ class ContainerComponent {
|
|
|
1479
1488
|
variant = 'default';
|
|
1480
1489
|
/** Whether the container has padding */
|
|
1481
1490
|
padding = true;
|
|
1491
|
+
/** Layout mode. 'centered' = flex center with full viewport height */
|
|
1492
|
+
layout = 'default';
|
|
1493
|
+
/** Optional custom max-width (e.g. '500px', '50rem'). When set, overrides size max-width. */
|
|
1494
|
+
maxWidth;
|
|
1482
1495
|
/** Additional CSS classes */
|
|
1483
1496
|
class = '';
|
|
1497
|
+
/** Forwards the class input to the host so parent styles can target sefin-container */
|
|
1498
|
+
get hostClass() {
|
|
1499
|
+
return this.class;
|
|
1500
|
+
}
|
|
1501
|
+
hostDisplay = 'block';
|
|
1502
|
+
hostWidth = '100%';
|
|
1503
|
+
get hostMaxWidth() {
|
|
1504
|
+
return this.maxWidth ?? CONTAINER_MAX_WIDTH[this.size];
|
|
1505
|
+
}
|
|
1506
|
+
hostMarginLeft = 'auto';
|
|
1507
|
+
hostMarginRight = 'auto';
|
|
1508
|
+
hostBoxSizing = 'border-box';
|
|
1484
1509
|
get containerClasses() {
|
|
1485
1510
|
return [
|
|
1486
1511
|
'sefin-container',
|
|
1487
1512
|
`sefin-container--${this.size}`,
|
|
1488
1513
|
`sefin-container--${this.variant}`,
|
|
1489
1514
|
this.padding ? 'sefin-container--padded' : '',
|
|
1515
|
+
this.layout !== 'default' ? `sefin-container--${this.layout}` : '',
|
|
1490
1516
|
this.class,
|
|
1491
1517
|
]
|
|
1492
1518
|
.filter(Boolean)
|
|
1493
1519
|
.join(' ');
|
|
1494
1520
|
}
|
|
1495
1521
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1496
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: ContainerComponent, isStandalone: true, selector: "sefin-container", inputs: { size: "size", variant: "variant", padding: "padding", class: "class" }, ngImport: i0, template: "<div [class]=\"containerClasses\">\n <ng-content></ng-content>\n</div>\n\n", styles: [".sefin-container{width:100%;margin-left:auto;margin-right:auto;box-sizing:border-box}.sefin-container--fluid{max-width:100%;padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-container--sm{max-width:640px}.sefin-container--md{max-width:768px}.sefin-container--lg{max-width:1024px}.sefin-container--xl{max-width:1280px}.sefin-container--full{max-width:100%}.sefin-container--padded{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}@media(min-width:640px){.sefin-container--padded{padding-left:var(--sefin-spacing-lg, 24px);padding-right:var(--sefin-spacing-lg, 24px)}}@media(min-width:1024px){.sefin-container--padded{padding-left:var(--sefin-spacing-xl, 32px);padding-right:var(--sefin-spacing-xl, 32px)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1522
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: ContainerComponent, isStandalone: true, selector: "sefin-container", inputs: { size: "size", variant: "variant", padding: "padding", layout: "layout", maxWidth: "maxWidth", class: "class" }, host: { properties: { "class": "this.hostClass", "style.display": "this.hostDisplay", "style.width": "this.hostWidth", "style.max-width": "this.hostMaxWidth", "style.margin-left": "this.hostMarginLeft", "style.margin-right": "this.hostMarginRight", "style.box-sizing": "this.hostBoxSizing" } }, ngImport: i0, template: "<div [class]=\"containerClasses\">\n <ng-content></ng-content>\n</div>\n\n", styles: [".sefin-container{width:100%;margin-left:auto;margin-right:auto;box-sizing:border-box}.sefin-container--fluid{max-width:100%;padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-container--sm{max-width:640px}.sefin-container--md{max-width:768px}.sefin-container--lg{max-width:1024px}.sefin-container--xl{max-width:1280px}.sefin-container--full{max-width:100%}.sefin-container--centered{display:flex;justify-content:center;align-items:center;min-height:100vh}.sefin-container--padded{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}@media(min-width:640px){.sefin-container--padded{padding-left:var(--sefin-spacing-lg, 24px);padding-right:var(--sefin-spacing-lg, 24px)}}@media(min-width:1024px){.sefin-container--padded{padding-left:var(--sefin-spacing-xl, 32px);padding-right:var(--sefin-spacing-xl, 32px)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1497
1523
|
}
|
|
1498
1524
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ContainerComponent, decorators: [{
|
|
1499
1525
|
type: Component,
|
|
1500
|
-
args: [{ selector: 'sefin-container', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"containerClasses\">\n <ng-content></ng-content>\n</div>\n\n", styles: [".sefin-container{width:100%;margin-left:auto;margin-right:auto;box-sizing:border-box}.sefin-container--fluid{max-width:100%;padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-container--sm{max-width:640px}.sefin-container--md{max-width:768px}.sefin-container--lg{max-width:1024px}.sefin-container--xl{max-width:1280px}.sefin-container--full{max-width:100%}.sefin-container--padded{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}@media(min-width:640px){.sefin-container--padded{padding-left:var(--sefin-spacing-lg, 24px);padding-right:var(--sefin-spacing-lg, 24px)}}@media(min-width:1024px){.sefin-container--padded{padding-left:var(--sefin-spacing-xl, 32px);padding-right:var(--sefin-spacing-xl, 32px)}}\n"] }]
|
|
1526
|
+
args: [{ selector: 'sefin-container', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"containerClasses\">\n <ng-content></ng-content>\n</div>\n\n", styles: [".sefin-container{width:100%;margin-left:auto;margin-right:auto;box-sizing:border-box}.sefin-container--fluid{max-width:100%;padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-container--sm{max-width:640px}.sefin-container--md{max-width:768px}.sefin-container--lg{max-width:1024px}.sefin-container--xl{max-width:1280px}.sefin-container--full{max-width:100%}.sefin-container--centered{display:flex;justify-content:center;align-items:center;min-height:100vh}.sefin-container--padded{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}@media(min-width:640px){.sefin-container--padded{padding-left:var(--sefin-spacing-lg, 24px);padding-right:var(--sefin-spacing-lg, 24px)}}@media(min-width:1024px){.sefin-container--padded{padding-left:var(--sefin-spacing-xl, 32px);padding-right:var(--sefin-spacing-xl, 32px)}}\n"] }]
|
|
1501
1527
|
}], propDecorators: { size: [{
|
|
1502
1528
|
type: Input
|
|
1503
1529
|
}], variant: [{
|
|
1504
1530
|
type: Input
|
|
1505
1531
|
}], padding: [{
|
|
1506
1532
|
type: Input
|
|
1533
|
+
}], layout: [{
|
|
1534
|
+
type: Input
|
|
1535
|
+
}], maxWidth: [{
|
|
1536
|
+
type: Input
|
|
1507
1537
|
}], class: [{
|
|
1508
1538
|
type: Input
|
|
1539
|
+
}], hostClass: [{
|
|
1540
|
+
type: HostBinding,
|
|
1541
|
+
args: ['class']
|
|
1542
|
+
}], hostDisplay: [{
|
|
1543
|
+
type: HostBinding,
|
|
1544
|
+
args: ['style.display']
|
|
1545
|
+
}], hostWidth: [{
|
|
1546
|
+
type: HostBinding,
|
|
1547
|
+
args: ['style.width']
|
|
1548
|
+
}], hostMaxWidth: [{
|
|
1549
|
+
type: HostBinding,
|
|
1550
|
+
args: ['style.max-width']
|
|
1551
|
+
}], hostMarginLeft: [{
|
|
1552
|
+
type: HostBinding,
|
|
1553
|
+
args: ['style.margin-left']
|
|
1554
|
+
}], hostMarginRight: [{
|
|
1555
|
+
type: HostBinding,
|
|
1556
|
+
args: ['style.margin-right']
|
|
1557
|
+
}], hostBoxSizing: [{
|
|
1558
|
+
type: HostBinding,
|
|
1559
|
+
args: ['style.box-sizing']
|
|
1509
1560
|
}] } });
|
|
1510
1561
|
|
|
1511
1562
|
class CheckboxComponent {
|