@lesterarte/sefin-ui 0.0.20-dev.2 → 0.0.20-dev.3

package/fesm2022/lesterarte-sefin-ui.mjs

@@ -2,6 +2,7 @@ import * as i0 from '@angular/core';
 import { Input, ChangeDetectionStrategy, Component, EventEmitter, Output, forwardRef, ViewChild, HostListener } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import * as i1$1 from '@angular/platform-browser';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as LucideIcons from 'lucide';
 import * as i2 from '@angular/forms';
@@ -3360,6 +3361,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 args: ['document:click', ['$event']]
             }] } });
 
+class BreadcrumbsComponent {
+    sanitizer;
+    /** Array of breadcrumb items */
+    items = [];
+    /** Separator style. Options: 'slash' | 'chevron' | 'arrow' */
+    separator = 'slash';
+    /** Breadcrumb size. Options: 'sm' | 'md' | 'lg' */
+    size = 'md';
+    /** Additional CSS classes */
+    class = '';
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    get breadcrumbsClasses() {
+        return [
+            'sefin-breadcrumbs',
+            `sefin-breadcrumbs--${this.size}`,
+            this.class,
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    isLastItem(index) {
+        return index === this.items.length - 1;
+    }
+    getSeparatorIcon() {
+        switch (this.separator) {
+            case 'chevron':
+                return '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+            case 'arrow':
+                return '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+            case 'slash':
+            default:
+                return '/';
+        }
+    }
+    sanitizeHtml(html) {
+        if (!html)
+            return '';
+        // For simple text like '/', return as is
+        if (html.length <= 2 && !html.includes('<')) {
+            return html;
+        }
+        // Use sanitize for user-provided HTML (icons from items)
+        // This sanitizes but allows safe SVG elements
+        return this.sanitizer.sanitize(1, html) || '';
+    }
+    getSeparatorIconSafe() {
+        // For separators generated internally, we can trust the HTML
+        const icon = this.getSeparatorIcon();
+        if (icon.length <= 2 && !icon.includes('<')) {
+            return icon;
+        }
+        return this.sanitizer.bypassSecurityTrustHtml(icon);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BreadcrumbsComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", 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;font-family:var(--sefin-font-family-base)}.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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BreadcrumbsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sefin-breadcrumbs', standalone: true, imports: [CommonModule, LinkComponent], changeDetection: ChangeDetectionStrategy.OnPush, 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;font-family:var(--sefin-font-family-base)}.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"] }]
+        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { items: [{
+                type: Input
+            }], separator: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }] } });
+
 class CardComponent {
     /** Card variant style. Options: 'default' | 'elevated' | 'outlined' */
     variant = 'default';
@@ -4410,5 +4482,5 @@ const STYLES_PATH = './styles/index.scss';
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionItemComponent, AlertComponent, AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, ButtonComponent, COLOR_TOKENS, CardComponent, CheckboxComponent, ChipComponent, ContainerComponent, DARK_THEME, DESIGN_TOKENS, DatepickerComponent, DividerComponent, FabButtonComponent, IconButtonComponent, IconComponent, ImageComponent, LIGHT_THEME, LinkComponent, ProgressBarComponent, RadioComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, SpinnerComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, TabComponent, TagComponent, TextFieldComponent, TextareaComponent, ThemeLoader, ToastComponent, TooltipComponent, TypographyComponent };
+export { AccordionItemComponent, AlertComponent, AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, BreadcrumbsComponent, ButtonComponent, COLOR_TOKENS, CardComponent, CheckboxComponent, ChipComponent, ContainerComponent, DARK_THEME, DESIGN_TOKENS, DatepickerComponent, DividerComponent, FabButtonComponent, IconButtonComponent, IconComponent, ImageComponent, LIGHT_THEME, LinkComponent, ProgressBarComponent, RadioComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, SpinnerComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, TabComponent, TagComponent, TextFieldComponent, TextareaComponent, ThemeLoader, ToastComponent, TooltipComponent, TypographyComponent };
 //# sourceMappingURL=lesterarte-sefin-ui.mjs.map