@lesterarte/sefin-ui 0.0.66 → 0.0.67
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.
|
@@ -1442,6 +1442,20 @@ class LinkComponent {
|
|
|
1442
1442
|
class = '';
|
|
1443
1443
|
/** Whether to show underline */
|
|
1444
1444
|
underline = false;
|
|
1445
|
+
/** Icon name (e.g. 'external-link', 'chevron-right'). When set, an icon is shown at start or end of the link. */
|
|
1446
|
+
icon;
|
|
1447
|
+
/** Position of the icon relative to the link text. Options: 'start' | 'end' */
|
|
1448
|
+
iconPosition = 'start';
|
|
1449
|
+
/** Icon size. If not set, defaults to a size that matches the link size (sm→sm, md→md, lg→md). */
|
|
1450
|
+
iconSize;
|
|
1451
|
+
/** Resolved icon size: uses iconSize input or maps from link size. */
|
|
1452
|
+
get resolvedIconSize() {
|
|
1453
|
+
if (this.iconSize) {
|
|
1454
|
+
return this.iconSize;
|
|
1455
|
+
}
|
|
1456
|
+
const sizeMap = { sm: 'sm', md: 'md', lg: 'md' };
|
|
1457
|
+
return sizeMap[this.size];
|
|
1458
|
+
}
|
|
1445
1459
|
get linkClasses() {
|
|
1446
1460
|
return [
|
|
1447
1461
|
'sefin-link',
|
|
@@ -1461,11 +1475,11 @@ class LinkComponent {
|
|
|
1461
1475
|
}
|
|
1462
1476
|
}
|
|
1463
1477
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1464
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1478
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: LinkComponent, isStandalone: true, selector: "sefin-link", inputs: { variant: "variant", size: "size", disabled: "disabled", href: "href", target: "target", rel: "rel", class: "class", underline: "underline", icon: "icon", iconPosition: "iconPosition", iconSize: "iconSize" }, ngImport: i0, template: "<a\n [class]=\"linkClasses\"\n [href]=\"disabled ? null : (href || '#')\"\n [attr.target]=\"target\"\n [attr.rel]=\"rel\"\n [attr.aria-disabled]=\"disabled ? true : null\"\n (click)=\"onClick($event)\"\n>\n @if (icon && iconPosition === 'start') {\n <span class=\"sefin-link__icon sefin-link__icon--start\">\n <sefin-icon [name]=\"icon\" [size]=\"resolvedIconSize\" color=\"currentColor\"></sefin-icon>\n </span>\n }\n <ng-content></ng-content>\n @if (icon && iconPosition === 'end') {\n <span class=\"sefin-link__icon sefin-link__icon--end\">\n <sefin-icon [name]=\"icon\" [size]=\"resolvedIconSize\" color=\"currentColor\"></sefin-icon>\n </span>\n }\n</a>\n\n", styles: [".sefin-link{display:inline-flex;align-items:center;gap:var(--sefin-spacing-xs, 4px);font-family:var(--sefin-font-family-base)}.sefin-link__icon{display:inline-flex;align-items:center;flex-shrink:0}.sefin-link__icon--start{margin-right:0}.sefin-link__icon--end{margin-left:0}.sefin-link{font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);text-decoration:none;transition:all .2s ease-in-out;cursor:pointer;outline:none;box-sizing:border-box}.sefin-link:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px;border-radius:2px}.sefin-link--sm{font-size:var(--sefin-font-size-sm)}.sefin-link--md{font-size:var(--sefin-font-size-base)}.sefin-link--lg{font-size:var(--sefin-font-size-lg)}.sefin-link--default{color:var(--sefin-color-text);text-decoration:none}.sefin-link--default:hover:not(.sefin-link--default--disabled){color:var(--sefin-color-primary)}.sefin-link--primary{color:var(--sefin-color-primary);text-decoration:none}.sefin-link--primary:hover:not(.sefin-link--primary--disabled){color:var(--sefin-color-primary-dark)}.sefin-link--primary:active:not(.sefin-link--primary--disabled){color:var(--sefin-color-primary-dark)}.sefin-link--secondary{color:var(--sefin-color-text-secondary);text-decoration:none}.sefin-link--secondary:hover:not(.sefin-link--secondary--disabled){color:var(--sefin-color-primary)}.sefin-link--underline{color:var(--sefin-color-primary);text-decoration:underline;text-underline-offset:2px}.sefin-link--underline:hover:not(.sefin-link--underline--disabled){color:var(--sefin-color-primary-dark);text-decoration-thickness:2px}.sefin-link--underline.sefin-link--default{color:var(--sefin-color-text);text-decoration:underline;text-underline-offset:2px}.sefin-link--underline.sefin-link--default:hover:not(.sefin-link--underline.sefin-link--default--disabled){color:var(--sefin-color-primary);text-decoration-thickness:2px}.sefin-link--disabled{opacity:.6;cursor:not-allowed;pointer-events:none;color:var(--sefin-color-text-disabled)}.sefin-link--disabled:hover{color:var(--sefin-color-text-disabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "sefin-icon", inputs: ["name", "size", "color", "rotate", "flipH", "flipV", "class"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
1465
1479
|
}
|
|
1466
1480
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LinkComponent, decorators: [{
|
|
1467
1481
|
type: Component,
|
|
1468
|
-
args: [{ selector: 'sefin-link', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.Default, template: "<a\n [class]=\"linkClasses\"\n [href]=\"disabled ? null : (href || '#')\"\n [attr.target]=\"target\"\n [attr.rel]=\"rel\"\n [attr.aria-disabled]=\"disabled ? true : null\"\n (click)=\"onClick($event)\"\n>\n <ng-content></ng-content>\n</a>\n\n", styles: [".sefin-link{display:flex;align-items:center;
|
|
1482
|
+
args: [{ selector: 'sefin-link', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.Default, template: "<a\n [class]=\"linkClasses\"\n [href]=\"disabled ? null : (href || '#')\"\n [attr.target]=\"target\"\n [attr.rel]=\"rel\"\n [attr.aria-disabled]=\"disabled ? true : null\"\n (click)=\"onClick($event)\"\n>\n @if (icon && iconPosition === 'start') {\n <span class=\"sefin-link__icon sefin-link__icon--start\">\n <sefin-icon [name]=\"icon\" [size]=\"resolvedIconSize\" color=\"currentColor\"></sefin-icon>\n </span>\n }\n <ng-content></ng-content>\n @if (icon && iconPosition === 'end') {\n <span class=\"sefin-link__icon sefin-link__icon--end\">\n <sefin-icon [name]=\"icon\" [size]=\"resolvedIconSize\" color=\"currentColor\"></sefin-icon>\n </span>\n }\n</a>\n\n", styles: [".sefin-link{display:inline-flex;align-items:center;gap:var(--sefin-spacing-xs, 4px);font-family:var(--sefin-font-family-base)}.sefin-link__icon{display:inline-flex;align-items:center;flex-shrink:0}.sefin-link__icon--start{margin-right:0}.sefin-link__icon--end{margin-left:0}.sefin-link{font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);text-decoration:none;transition:all .2s ease-in-out;cursor:pointer;outline:none;box-sizing:border-box}.sefin-link:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px;border-radius:2px}.sefin-link--sm{font-size:var(--sefin-font-size-sm)}.sefin-link--md{font-size:var(--sefin-font-size-base)}.sefin-link--lg{font-size:var(--sefin-font-size-lg)}.sefin-link--default{color:var(--sefin-color-text);text-decoration:none}.sefin-link--default:hover:not(.sefin-link--default--disabled){color:var(--sefin-color-primary)}.sefin-link--primary{color:var(--sefin-color-primary);text-decoration:none}.sefin-link--primary:hover:not(.sefin-link--primary--disabled){color:var(--sefin-color-primary-dark)}.sefin-link--primary:active:not(.sefin-link--primary--disabled){color:var(--sefin-color-primary-dark)}.sefin-link--secondary{color:var(--sefin-color-text-secondary);text-decoration:none}.sefin-link--secondary:hover:not(.sefin-link--secondary--disabled){color:var(--sefin-color-primary)}.sefin-link--underline{color:var(--sefin-color-primary);text-decoration:underline;text-underline-offset:2px}.sefin-link--underline:hover:not(.sefin-link--underline--disabled){color:var(--sefin-color-primary-dark);text-decoration-thickness:2px}.sefin-link--underline.sefin-link--default{color:var(--sefin-color-text);text-decoration:underline;text-underline-offset:2px}.sefin-link--underline.sefin-link--default:hover:not(.sefin-link--underline.sefin-link--default--disabled){color:var(--sefin-color-primary);text-decoration-thickness:2px}.sefin-link--disabled{opacity:.6;cursor:not-allowed;pointer-events:none;color:var(--sefin-color-text-disabled)}.sefin-link--disabled:hover{color:var(--sefin-color-text-disabled)}\n"] }]
|
|
1469
1483
|
}], propDecorators: { variant: [{
|
|
1470
1484
|
type: Input
|
|
1471
1485
|
}], size: [{
|
|
@@ -1482,6 +1496,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
1482
1496
|
type: Input
|
|
1483
1497
|
}], underline: [{
|
|
1484
1498
|
type: Input
|
|
1499
|
+
}], icon: [{
|
|
1500
|
+
type: Input
|
|
1501
|
+
}], iconPosition: [{
|
|
1502
|
+
type: Input
|
|
1503
|
+
}], iconSize: [{
|
|
1504
|
+
type: Input
|
|
1485
1505
|
}] } });
|
|
1486
1506
|
|
|
1487
1507
|
class StackComponent {
|
|
@@ -4062,7 +4082,7 @@ class BreadcrumbsComponent {
|
|
|
4062
4082
|
return this.sanitizer.bypassSecurityTrustHtml(icon);
|
|
4063
4083
|
}
|
|
4064
4084
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: BreadcrumbsComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
4065
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: BreadcrumbsComponent, isStandalone: true, selector: "sefin-breadcrumbs", inputs: { items: "items", separator: "separator", size: "size", class: "class" }, ngImport: i0, template: "<nav [class]=\"breadcrumbsClasses\" aria-label=\"Breadcrumb\">\n <ol class=\"sefin-breadcrumbs__list\">\n <li\n *ngFor=\"let item of items; let i = index; let isLast = last\"\n class=\"sefin-breadcrumbs__item\"\n >\n <ng-container *ngIf=\"isLastItem(i); else linkTemplate\">\n <span class=\"sefin-breadcrumbs__current\" [attr.aria-current]=\"'page'\">\n <span *ngIf=\"item.icon\" class=\"sefin-breadcrumbs__icon\" [innerHTML]=\"sanitizeHtml(item.icon)\"></span>\n {{ item.label }}\n </span>\n </ng-container>\n <ng-template #linkTemplate>\n <sefin-link\n [href]=\"item.href || '#'\"\n variant=\"default\"\n [size]=\"size\"\n class=\"sefin-breadcrumbs__link\"\n >\n <span *ngIf=\"item.icon\" class=\"sefin-breadcrumbs__icon\" [innerHTML]=\"sanitizeHtml(item.icon)\"></span>\n {{ item.label }}\n </sefin-link>\n </ng-template>\n <span\n *ngIf=\"!isLast\"\n class=\"sefin-breadcrumbs__separator\"\n [attr.aria-hidden]=\"true\"\n [innerHTML]=\"getSeparatorIconSafe()\"\n ></span>\n </li>\n </ol>\n</nav>\n\n", styles: [".sefin-breadcrumbs{display:flex;align-items:center;width:100%;font-family:var(--sefin-font-family-base);box-sizing:border-box}.sefin-breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0;gap:var(--sefin-spacing-xs, 4px)}.sefin-breadcrumbs__item{display:inline-flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-breadcrumbs__link{color:var(--sefin-color-text-secondary);text-decoration:none;transition:color .2s ease-in-out}.sefin-breadcrumbs__link:hover{color:var(--sefin-color-primary)}.sefin-breadcrumbs__link:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px;border-radius:var(--sefin-radius-sm)}.sefin-breadcrumbs__current{color:var(--sefin-color-text);font-weight:var(--sefin-font-weight-medium);display:inline-flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-breadcrumbs__separator{display:inline-flex;align-items:center;justify-content:center;color:var(--sefin-color-text-disabled);margin:0 var(--sefin-spacing-xs, 4px);-webkit-user-select:none;user-select:none;flex-shrink:0}.sefin-breadcrumbs__separator svg{display:block;width:12px;height:12px}.sefin-breadcrumbs__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sefin-breadcrumbs__icon svg{display:block;width:14px;height:14px}.sefin-breadcrumbs--sm{font-size:var(--sefin-font-size-sm, 14px)}.sefin-breadcrumbs--sm .sefin-breadcrumbs__separator{margin:0 var(--sefin-spacing-xs, 4px)}.sefin-breadcrumbs--sm .sefin-breadcrumbs__separator svg{width:10px;height:10px}.sefin-breadcrumbs--sm .sefin-breadcrumbs__icon svg{width:12px;height:12px}.sefin-breadcrumbs--md{font-size:var(--sefin-font-size-base, 16px)}.sefin-breadcrumbs--md .sefin-breadcrumbs__separator{margin:0 var(--sefin-spacing-sm, 8px)}.sefin-breadcrumbs--md .sefin-breadcrumbs__separator svg{width:12px;height:12px}.sefin-breadcrumbs--md .sefin-breadcrumbs__icon svg{width:14px;height:14px}.sefin-breadcrumbs--lg{font-size:var(--sefin-font-size-lg, 18px)}.sefin-breadcrumbs--lg .sefin-breadcrumbs__separator{margin:0 var(--sefin-spacing-sm, 8px)}.sefin-breadcrumbs--lg .sefin-breadcrumbs__separator svg{width:14px;height:14px}.sefin-breadcrumbs--lg .sefin-breadcrumbs__icon svg{width:16px;height:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LinkComponent, selector: "sefin-link", inputs: ["variant", "size", "disabled", "href", "target", "rel", "class", "underline"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4085
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: BreadcrumbsComponent, isStandalone: true, selector: "sefin-breadcrumbs", inputs: { items: "items", separator: "separator", size: "size", class: "class" }, ngImport: i0, template: "<nav [class]=\"breadcrumbsClasses\" aria-label=\"Breadcrumb\">\n <ol class=\"sefin-breadcrumbs__list\">\n <li\n *ngFor=\"let item of items; let i = index; let isLast = last\"\n class=\"sefin-breadcrumbs__item\"\n >\n <ng-container *ngIf=\"isLastItem(i); else linkTemplate\">\n <span class=\"sefin-breadcrumbs__current\" [attr.aria-current]=\"'page'\">\n <span *ngIf=\"item.icon\" class=\"sefin-breadcrumbs__icon\" [innerHTML]=\"sanitizeHtml(item.icon)\"></span>\n {{ item.label }}\n </span>\n </ng-container>\n <ng-template #linkTemplate>\n <sefin-link\n [href]=\"item.href || '#'\"\n variant=\"default\"\n [size]=\"size\"\n class=\"sefin-breadcrumbs__link\"\n >\n <span *ngIf=\"item.icon\" class=\"sefin-breadcrumbs__icon\" [innerHTML]=\"sanitizeHtml(item.icon)\"></span>\n {{ item.label }}\n </sefin-link>\n </ng-template>\n <span\n *ngIf=\"!isLast\"\n class=\"sefin-breadcrumbs__separator\"\n [attr.aria-hidden]=\"true\"\n [innerHTML]=\"getSeparatorIconSafe()\"\n ></span>\n </li>\n </ol>\n</nav>\n\n", styles: [".sefin-breadcrumbs{display:flex;align-items:center;width:100%;font-family:var(--sefin-font-family-base);box-sizing:border-box}.sefin-breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0;gap:var(--sefin-spacing-xs, 4px)}.sefin-breadcrumbs__item{display:inline-flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-breadcrumbs__link{color:var(--sefin-color-text-secondary);text-decoration:none;transition:color .2s ease-in-out}.sefin-breadcrumbs__link:hover{color:var(--sefin-color-primary)}.sefin-breadcrumbs__link:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px;border-radius:var(--sefin-radius-sm)}.sefin-breadcrumbs__current{color:var(--sefin-color-text);font-weight:var(--sefin-font-weight-medium);display:inline-flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-breadcrumbs__separator{display:inline-flex;align-items:center;justify-content:center;color:var(--sefin-color-text-disabled);margin:0 var(--sefin-spacing-xs, 4px);-webkit-user-select:none;user-select:none;flex-shrink:0}.sefin-breadcrumbs__separator svg{display:block;width:12px;height:12px}.sefin-breadcrumbs__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sefin-breadcrumbs__icon svg{display:block;width:14px;height:14px}.sefin-breadcrumbs--sm{font-size:var(--sefin-font-size-sm, 14px)}.sefin-breadcrumbs--sm .sefin-breadcrumbs__separator{margin:0 var(--sefin-spacing-xs, 4px)}.sefin-breadcrumbs--sm .sefin-breadcrumbs__separator svg{width:10px;height:10px}.sefin-breadcrumbs--sm .sefin-breadcrumbs__icon svg{width:12px;height:12px}.sefin-breadcrumbs--md{font-size:var(--sefin-font-size-base, 16px)}.sefin-breadcrumbs--md .sefin-breadcrumbs__separator{margin:0 var(--sefin-spacing-sm, 8px)}.sefin-breadcrumbs--md .sefin-breadcrumbs__separator svg{width:12px;height:12px}.sefin-breadcrumbs--md .sefin-breadcrumbs__icon svg{width:14px;height:14px}.sefin-breadcrumbs--lg{font-size:var(--sefin-font-size-lg, 18px)}.sefin-breadcrumbs--lg .sefin-breadcrumbs__separator{margin:0 var(--sefin-spacing-sm, 8px)}.sefin-breadcrumbs--lg .sefin-breadcrumbs__separator svg{width:14px;height:14px}.sefin-breadcrumbs--lg .sefin-breadcrumbs__icon svg{width:16px;height:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LinkComponent, selector: "sefin-link", inputs: ["variant", "size", "disabled", "href", "target", "rel", "class", "underline", "icon", "iconPosition", "iconSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4066
4086
|
}
|
|
4067
4087
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: BreadcrumbsComponent, decorators: [{
|
|
4068
4088
|
type: Component,
|