@blank-software/core-components 0.0.1

package/fesm2022/blank-software-core-components.mjs

@@ -0,0 +1,862 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, model, inject, forwardRef, computed, Component, contentChildren, output, HostListener, signal, ElementRef, Injectable } from '@angular/core';
+
+class AccordionItem {
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    parent = inject(forwardRef(() => Accordion), { optional: true });
+    itemClasses = computed(() => {
+        const classes = ['accordion-item'];
+        if (this.disabled())
+            classes.push('accordion-item-disabled');
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "itemClasses" }] : []));
+    toggle() {
+        if (this.disabled())
+            return;
+        this.open.set(!this.open());
+        if (this.open() && this.parent) {
+            this.parent.onItemToggle(this);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: AccordionItem, isStandalone: true, selector: "bsc-accordion-item", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, ngImport: i0, template: `
+    <div [class]="itemClasses()">
+      <button class="accordion-header" [disabled]="disabled()" (click)="toggle()">
+        <span class="accordion-title">{{ title() }}</span>
+        <svg
+          class="accordion-chevron"
+          [class.accordion-chevron-open]="open()"
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M6 9l6 6 6-6" />
+        </svg>
+      </button>
+      @if (open()) {
+        <div class="accordion-body">
+          <ng-content />
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block}.accordion-item{border-bottom:1px solid var(--color-ink-200)}.accordion-item:last-child{border-bottom:none}.accordion-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:1rem 1.5rem;background:transparent;border:none;cursor:pointer;font-weight:500;font-size:.875rem;line-height:1.25rem;color:var(--color-ink-900);transition:background-color .15s}.accordion-header:hover:not(:disabled){background-color:var(--color-ink-50)}.accordion-header:disabled{opacity:.5;cursor:not-allowed}.accordion-chevron{flex-shrink:0;color:var(--color-ink-400);transition:transform .2s ease}.accordion-chevron-open{transform:rotate(180deg)}.accordion-body{padding:0 1.5rem 1rem;font-size:.875rem;line-height:1.5;color:var(--color-ink-600)}.accordion-item-disabled{opacity:.5}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AccordionItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsc-accordion-item', imports: [], template: `
+    <div [class]="itemClasses()">
+      <button class="accordion-header" [disabled]="disabled()" (click)="toggle()">
+        <span class="accordion-title">{{ title() }}</span>
+        <svg
+          class="accordion-chevron"
+          [class.accordion-chevron-open]="open()"
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M6 9l6 6 6-6" />
+        </svg>
+      </button>
+      @if (open()) {
+        <div class="accordion-body">
+          <ng-content />
+        </div>
+      }
+    </div>
+  `, styles: [":host{display:block}.accordion-item{border-bottom:1px solid var(--color-ink-200)}.accordion-item:last-child{border-bottom:none}.accordion-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:1rem 1.5rem;background:transparent;border:none;cursor:pointer;font-weight:500;font-size:.875rem;line-height:1.25rem;color:var(--color-ink-900);transition:background-color .15s}.accordion-header:hover:not(:disabled){background-color:var(--color-ink-50)}.accordion-header:disabled{opacity:.5;cursor:not-allowed}.accordion-chevron{flex-shrink:0;color:var(--color-ink-400);transition:transform .2s ease}.accordion-chevron-open{transform:rotate(180deg)}.accordion-body{padding:0 1.5rem 1rem;font-size:.875rem;line-height:1.5;color:var(--color-ink-600)}.accordion-item-disabled{opacity:.5}\n"] }]
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }] } });
+class Accordion {
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : {}), transform: booleanAttribute });
+    items = contentChildren(AccordionItem, ...(ngDevMode ? [{ debugName: "items" }] : []));
+    onItemToggle(openedItem) {
+        if (this.multiple())
+            return;
+        for (const item of this.items()) {
+            if (item !== openedItem) {
+                item.open.set(false);
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Accordion, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: Accordion, isStandalone: true, selector: "bsc-accordion", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "items", predicate: AccordionItem, isSignal: true }], ngImport: i0, template: "<div class=\"accordion\">\n  <ng-content />\n</div>\n", styles: ["@reference \"tailwindcss\";.accordion{@apply bg-surface rounded-2xl border border-ink-200 overflow-hidden;}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Accordion, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsc-accordion', imports: [], template: "<div class=\"accordion\">\n  <ng-content />\n</div>\n", styles: ["@reference \"tailwindcss\";.accordion{@apply bg-surface rounded-2xl border border-ink-200 overflow-hidden;}\n"] }]
+        }], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AccordionItem), { isSignal: true }] }] } });
+
+class Alert {
+    variant = input('info', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    alertClasses = computed(() => {
+        return `alert alert-${this.variant()}`;
+    }, ...(ngDevMode ? [{ debugName: "alertClasses" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Alert, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: Alert, isStandalone: true, selector: "bsc-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"alertClasses()\" role=\"alert\">\n  <ng-content />\n</div>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Alert, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsc-alert', imports: [], template: "<div [class]=\"alertClasses()\" role=\"alert\">\n  <ng-content />\n</div>\n" }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+
+class Avatar {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Avatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: Avatar, isStandalone: true, selector: "bsc-avatar", ngImport: i0, template: "<p>avatar works!</p>\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Avatar, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsc-avatar', imports: [], template: "<p>avatar works!</p>\n" }]
+        }] });
+
+class Badge {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Badge, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: Badge, isStandalone: true, selector: "bsc-badge", ngImport: i0, template: "<p>badge works!</p>\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Badge, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsc-badge', imports: [], template: "<p>badge works!</p>\n" }]
+        }] });
+
+class Breadcrumb {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Breadcrumb, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: Breadcrumb, isStandalone: true, selector: "bsc-breadcrumb", ngImport: i0, template: "<p>breadcrumb works!</p>\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Breadcrumb, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsc-breadcrumb', imports: [], template: "<p>breadcrumb works!</p>\n" }]
+        }] });
+
+function luminance(hex) {
+    const raw = hex.replace('#', '');
+    const r = parseInt(raw.substring(0, 2), 16) / 255;
+    const g = parseInt(raw.substring(2, 4), 16) / 255;
+    const b = parseInt(raw.substring(4, 6), 16) / 255;
+    const toLinear = (c) => (c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4));
+    return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
+}
+class Button {
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    iconOnly = input(false, { ...(ngDevMode ? { debugName: "iconOnly" } : {}), transform: booleanAttribute });
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute });
+    color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : []));
+    shape = input('rounded', ...(ngDevMode ? [{ debugName: "shape" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
+    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    buttonClasses = computed(() => {
+        const io = this.iconOnly();
+        const sizePrefix = io ? 'btn-icon-' : 'btn-';
+        const classes = ['btn', `btn-${this.shape()}`, `${sizePrefix}${this.size()}`];
+        if (this.color()) {
+            classes.push('btn-custom-color');
+        }
+        else {
+            classes.push(`btn-${this.variant()}`);
+        }
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "buttonClasses" }] : []));
+    buttonStyles = computed(() => {
+        const c = this.color();
+        if (!c)
+            return {};
+        const textColor = luminance(c) > 0.4 ? '#0F172A' : '#FFFFFF';
+        return {
+            '--btn-bg': c,
+            '--btn-text': textColor,
+        };
+    }, ...(ngDevMode ? [{ debugName: "buttonStyles" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Button, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: Button, isStandalone: true, selector: "bsc-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n  [type]=\"type()\"\n  [disabled]=\"disabled() || loading()\"\n  [class]=\"buttonClasses()\"\n  [style]=\"buttonStyles()\"\n>\n  @if (loading()) {\n    <svg\n      class=\"animate-spin shrink-0\"\n      width=\"1em\"\n      height=\"1em\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n      <path\n        class=\"opacity-75\"\n        fill=\"currentColor\"\n        d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n      />\n    </svg>\n  }\n  <ng-content select=\"[leftIcon]\" />\n  <ng-content />\n  <ng-content select=\"[rightIcon]\" />\n</button>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Button, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsc-button', imports: [], template: "<button\n  [type]=\"type()\"\n  [disabled]=\"disabled() || loading()\"\n  [class]=\"buttonClasses()\"\n  [style]=\"buttonStyles()\"\n>\n  @if (loading()) {\n    <svg\n      class=\"animate-spin shrink-0\"\n      width=\"1em\"\n      height=\"1em\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n      <path\n        class=\"opacity-75\"\n        fill=\"currentColor\"\n        d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n      />\n    </svg>\n  }\n  <ng-content select=\"[leftIcon]\" />\n  <ng-content />\n  <ng-content select=\"[rightIcon]\" />\n</button>\n" }]
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+
+class Card {
+    padded = input(true, { ...(ngDevMode ? { debugName: "padded" } : {}), transform: booleanAttribute });
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    cardClasses = computed(() => {
+        const classes = ['card', `card-${this.variant()}`];
+        if (this.padded())
+            classes.push('card-padded');
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "cardClasses" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Card, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: Card, isStandalone: true, selector: "bsc-card", inputs: { padded: { classPropertyName: "padded", publicName: "padded", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"cardClasses()\">\n  <ng-content select=\"[cardHeader]\" />\n  <div class=\"card-body\">\n    <ng-content />\n  </div>\n  <ng-content select=\"[cardFooter]\" />\n</div>\n", styles: ["@reference \"tailwindcss\";.card{@apply rounded-2xl overflow-hidden;}.card-default{@apply bg-surface shadow-sm;}.card-outlined{@apply bg-surface border border-ink-200;}.card-padded>.card-body,.card-padded>[cardHeader],.card-padded>[cardFooter]{@apply px-6;}.card-padded>.card-body{@apply py-6;}.card-padded>[cardHeader]{@apply pt-6 pb-4 border-b border-ink-100;}.card-padded>[cardFooter]{@apply pb-6 pt-4 border-t border-ink-100;}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Card, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsc-card', imports: [], template: "<div [class]=\"cardClasses()\">\n  <ng-content select=\"[cardHeader]\" />\n  <div class=\"card-body\">\n    <ng-content />\n  </div>\n  <ng-content select=\"[cardFooter]\" />\n</div>\n", styles: ["@reference \"tailwindcss\";.card{@apply rounded-2xl overflow-hidden;}.card-default{@apply bg-surface shadow-sm;}.card-outlined{@apply bg-surface border border-ink-200;}.card-padded>.card-body,.card-padded>[cardHeader],.card-padded>[cardFooter]{@apply px-6;}.card-padded>.card-body{@apply py-6;}.card-padded>[cardHeader]{@apply pt-6 pb-4 border-b border-ink-100;}.card-padded>[cardFooter]{@apply pb-6 pt-4 border-t border-ink-100;}\n"] }]
+        }], propDecorators: { padded: [{ type: i0.Input, args: [{ isSignal: true, alias: "padded", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+
+class Checkbox {
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    indeterminate = input(false, { ...(ngDevMode ? { debugName: "indeterminate" } : {}), transform: booleanAttribute });
+    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+    toggle() {
+        if (!this.disabled()) {
+            this.checked.set(!this.checked());
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Checkbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: Checkbox, isStandalone: true, selector: "bsc-checkbox", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, ngImport: i0, template: "<label class=\"checkbox\">\n  <input\n    type=\"checkbox\"\n    class=\"checkbox-input\"\n    [checked]=\"checked()\"\n    [disabled]=\"disabled()\"\n    (change)=\"toggle()\"\n  />\n  <span class=\"checkbox-box\" [class.checkbox-indeterminate]=\"indeterminate() && !checked()\">\n    @if (indeterminate() && !checked()) {\n      <svg\n        class=\"checkbox-check\"\n        viewBox=\"0 0 12 12\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n      >\n        <path d=\"M2 6h8\" />\n      </svg>\n    } @else {\n      <svg\n        class=\"checkbox-check\"\n        viewBox=\"0 0 12 12\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n      >\n        <path d=\"M2 6l3 3 5-6\" />\n      </svg>\n    }\n  </span>\n  <span class=\"checkbox-label\">\n    <ng-content />\n  </span>\n</label>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Checkbox, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsc-checkbox', imports: [], template: "<label class=\"checkbox\">\n  <input\n    type=\"checkbox\"\n    class=\"checkbox-input\"\n    [checked]=\"checked()\"\n    [disabled]=\"disabled()\"\n    (change)=\"toggle()\"\n  />\n  <span class=\"checkbox-box\" [class.checkbox-indeterminate]=\"indeterminate() && !checked()\">\n    @if (indeterminate() && !checked()) {\n      <svg\n        class=\"checkbox-check\"\n        viewBox=\"0 0 12 12\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n      >\n        <path d=\"M2 6h8\" />\n      </svg>\n    } @else {\n      <svg\n        class=\"checkbox-check\"\n        viewBox=\"0 0 12 12\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n      >\n        <path d=\"M2 6l3 3 5-6\" />\n      </svg>\n    }\n  </span>\n  <span class=\"checkbox-label\">\n    <ng-content />\n  </span>\n</label>\n" }]
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
+
+class DatePicker {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: DatePicker, isStandalone: true, selector: "bsc-date-picker", ngImport: i0, template: "<p>date-picker works!</p>\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DatePicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsc-date-picker', imports: [], template: "<p>date-picker works!</p>\n" }]
+        }] });
+
+class Dropdown {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Dropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: Dropdown, isStandalone: true, selector: "bsc-dropdown", ngImport: i0, template: "<p>dropdown works!</p>\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Dropdown, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsc-dropdown', imports: [], template: "<p>dropdown works!</p>\n" }]
+        }] });
+
+class FileUpload {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FileUpload, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: FileUpload, isStandalone: true, selector: "bsc-file-upload", ngImport: i0, template: "<p>file-upload works!</p>\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FileUpload, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsc-file-upload', imports: [], template: "<p>file-upload works!</p>\n" }]
+        }] });
+
+class Footer {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Footer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: Footer, isStandalone: true, selector: "bsc-footer", ngImport: i0, template: "<p>footer works!</p>\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Footer, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsc-footer', imports: [], template: "<p>footer works!</p>\n" }]
+        }] });
+
+class FormField {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: FormField, isStandalone: true, selector: "bsc-form-field", ngImport: i0, template: "<p>form-field works!</p>\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormField, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsc-form-field', imports: [], template: "<p>form-field works!</p>\n" }]
+        }] });
+
+class Header {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Header, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: Header, isStandalone: true, selector: "bsc-header", ngImport: i0, template: "<nav class=\"header\" aria-label=\"Top navigation\">\n  <div class=\"header-inner\">\n    <div class=\"header-left\">\n      <ng-content select=\"[headerLeft]\" />\n    </div>\n    <div class=\"header-right\">\n      <ng-content select=\"[headerRight]\" />\n    </div>\n  </div>\n</nav>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Header, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsc-header', imports: [], template: "<nav class=\"header\" aria-label=\"Top navigation\">\n  <div class=\"header-inner\">\n    <div class=\"header-left\">\n      <ng-content select=\"[headerLeft]\" />\n    </div>\n    <div class=\"header-right\">\n      <ng-content select=\"[headerRight]\" />\n    </div>\n  </div>\n</nav>\n" }]
+        }] });
+
+class Icon {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Icon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: Icon, isStandalone: true, selector: "bsc-icon", ngImport: i0, template: "<p>icon works!</p>\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Icon, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsc-icon', imports: [], template: "<p>icon works!</p>\n" }]
+        }] });
+
+class Input {
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : {}), transform: booleanAttribute });
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    state = input('default', ...(ngDevMode ? [{ debugName: "state" }] : []));
+    type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
+    inputClasses = computed(() => {
+        const classes = ['input', `input-${this.size()}`];
+        const s = this.state();
+        if (s !== 'default')
+            classes.push(`input-${s}`);
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "inputClasses" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Input, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: Input, isStandalone: true, selector: "bsc-input", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<input\n  [type]=\"type()\"\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"disabled()\"\n  [readOnly]=\"readonly()\"\n  [class]=\"inputClasses()\"\n/>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Input, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsc-input', imports: [], template: "<input\n  [type]=\"type()\"\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"disabled()\"\n  [readOnly]=\"readonly()\"\n  [class]=\"inputClasses()\"\n/>\n" }]
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }] } });
+
+class Label {
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : {}), transform: booleanAttribute });
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    labelClasses = computed(() => {
+        const classes = ['label', `label-${this.size()}`];
+        if (this.disabled())
+            classes.push('label-disabled');
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "labelClasses" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Label, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: Label, isStandalone: true, selector: "bsc-label", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -->\n<label [class]=\"labelClasses()\">\n  <ng-content />\n  @if (required()) {\n    <span class=\"label-required\">*</span>\n  }\n</label>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Label, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsc-label', imports: [], template: "<!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -->\n<label [class]=\"labelClasses()\">\n  <ng-content />\n  @if (required()) {\n    <span class=\"label-required\">*</span>\n  }\n</label>\n" }]
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+class Modal {
+    closeOnBackdrop = input(true, { ...(ngDevMode ? { debugName: "closeOnBackdrop" } : {}), transform: booleanAttribute });
+    closeOnEsc = input(true, { ...(ngDevMode ? { debugName: "closeOnEsc" } : {}), transform: booleanAttribute });
+    confirmDisabled = input(false, { ...(ngDevMode ? { debugName: "confirmDisabled" } : {}), transform: booleanAttribute });
+    closed = output();
+    confirmed = output();
+    confirmText = input('Conferma', ...(ngDevMode ? [{ debugName: "confirmText" }] : []));
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    panelClasses = computed(() => {
+        return `bsc-modal-panel bsc-modal-${this.size()}`;
+    }, ...(ngDevMode ? [{ debugName: "panelClasses" }] : []));
+    close() {
+        this.open.set(false);
+        this.closed.emit();
+    }
+    onBackdropClick() {
+        if (this.closeOnBackdrop()) {
+            this.close();
+        }
+    }
+    onConfirm() {
+        this.confirmed.emit();
+    }
+    onEscKey() {
+        if (this.open() && this.closeOnEsc()) {
+            this.close();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Modal, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: Modal, isStandalone: true, selector: "bsc-modal", inputs: { closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEsc: { classPropertyName: "closeOnEsc", publicName: "closeOnEsc", isSignal: true, isRequired: false, transformFunction: null }, confirmDisabled: { classPropertyName: "confirmDisabled", publicName: "confirmDisabled", isSignal: true, isRequired: false, transformFunction: null }, confirmText: { classPropertyName: "confirmText", publicName: "confirmText", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", confirmed: "confirmed", open: "openChange" }, host: { listeners: { "document:keydown.escape": "onEscKey()" } }, ngImport: i0, template: "@if (open()) {\n  <!-- Backdrop -->\n  <div\n    class=\"bsc-modal-backdrop\"\n    (click)=\"onBackdropClick()\"\n    (keydown.escape)=\"close()\"\n    tabindex=\"-1\"\n    role=\"button\"\n    aria-label=\"Close modal\"\n  ></div>\n\n  <!-- Modal -->\n  <div class=\"bsc-modal-overlay\">\n    <div [class]=\"panelClasses()\">\n      <!-- Modal content -->\n      <div class=\"bsc-modal-content\" role=\"dialog\" aria-modal=\"true\">\n        <!-- Header -->\n        <div class=\"bsc-modal-header\">\n          <h3 class=\"bsc-modal-title\">{{ title() }}</h3>\n          <button type=\"button\" class=\"bsc-modal-close\" (click)=\"close()\">\n            <svg\n              class=\"w-5 h-5\"\n              aria-hidden=\"true\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"24\"\n              height=\"24\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n            >\n              <path\n                stroke=\"currentColor\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M6 18 17.94 6M18 18 6.06 6\"\n              />\n            </svg>\n            <span class=\"sr-only\">Close modal</span>\n          </button>\n        </div>\n\n        <!-- Body (content projection) -->\n        <div class=\"bsc-modal-body\">\n          <ng-content />\n        </div>\n\n        <!-- Footer -->\n        <div class=\"bsc-modal-footer\">\n          <button\n            type=\"button\"\n            class=\"bsc-modal-confirm-btn\"\n            [disabled]=\"confirmDisabled()\"\n            (click)=\"onConfirm()\"\n          >\n            {{ confirmText() }}\n          </button>\n          <ng-content select=\"[modalFooter]\" />\n        </div>\n      </div>\n    </div>\n  </div>\n}\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Modal, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsc-modal', imports: [], template: "@if (open()) {\n  <!-- Backdrop -->\n  <div\n    class=\"bsc-modal-backdrop\"\n    (click)=\"onBackdropClick()\"\n    (keydown.escape)=\"close()\"\n    tabindex=\"-1\"\n    role=\"button\"\n    aria-label=\"Close modal\"\n  ></div>\n\n  <!-- Modal -->\n  <div class=\"bsc-modal-overlay\">\n    <div [class]=\"panelClasses()\">\n      <!-- Modal content -->\n      <div class=\"bsc-modal-content\" role=\"dialog\" aria-modal=\"true\">\n        <!-- Header -->\n        <div class=\"bsc-modal-header\">\n          <h3 class=\"bsc-modal-title\">{{ title() }}</h3>\n          <button type=\"button\" class=\"bsc-modal-close\" (click)=\"close()\">\n            <svg\n              class=\"w-5 h-5\"\n              aria-hidden=\"true\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"24\"\n              height=\"24\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n            >\n              <path\n                stroke=\"currentColor\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M6 18 17.94 6M18 18 6.06 6\"\n              />\n            </svg>\n            <span class=\"sr-only\">Close modal</span>\n          </button>\n        </div>\n\n        <!-- Body (content projection) -->\n        <div class=\"bsc-modal-body\">\n          <ng-content />\n        </div>\n\n        <!-- Footer -->\n        <div class=\"bsc-modal-footer\">\n          <button\n            type=\"button\"\n            class=\"bsc-modal-confirm-btn\"\n            [disabled]=\"confirmDisabled()\"\n            (click)=\"onConfirm()\"\n          >\n            {{ confirmText() }}\n          </button>\n          <ng-content select=\"[modalFooter]\" />\n        </div>\n      </div>\n    </div>\n  </div>\n}\n" }]
+        }], propDecorators: { closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], closeOnEsc: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEsc", required: false }] }], confirmDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmDisabled", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }], confirmText: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmText", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], onEscKey: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
+class Navigation {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Navigation, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: Navigation, isStandalone: true, selector: "bsc-navigation", ngImport: i0, template: "<p>navigation works!</p>\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Navigation, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsc-navigation', imports: [], template: "<p>navigation works!</p>\n" }]
+        }] });
+
+class Select {
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : {}), transform: booleanAttribute });
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    state = input('default', ...(ngDevMode ? [{ debugName: "state" }] : []));
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    el = inject(ElementRef);
+    displayText = computed(() => {
+        const val = this.value();
+        const opts = this.options();
+        if (val === null || val === undefined)
+            return this.placeholder();
+        if (Array.isArray(val)) {
+            if (val.length === 0)
+                return this.placeholder();
+            const labels = val.map((v) => opts.find((o) => o.value === v)?.label ?? v).join(', ');
+            return labels;
+        }
+        return (opts.find((o) => o.value === val)?.label ?? val) || this.placeholder();
+    }, ...(ngDevMode ? [{ debugName: "displayText" }] : []));
+    triggerClasses = computed(() => {
+        const classes = ['select-trigger', `select-${this.size()}`];
+        const s = this.state();
+        if (s !== 'default')
+            classes.push(`select-${s}`);
+        if (this.disabled())
+            classes.push('select-disabled');
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "triggerClasses" }] : []));
+    isSelected(option) {
+        const val = this.value();
+        if (Array.isArray(val))
+            return val.includes(option.value);
+        return val === option.value;
+    }
+    onDocumentClick(event) {
+        if (!this.el.nativeElement.contains(event.target)) {
+            this.isOpen.set(false);
+        }
+    }
+    selectOption(option) {
+        if (this.multiple()) {
+            const current = this.value() ?? [];
+            const idx = current.indexOf(option.value);
+            if (idx === -1) {
+                this.value.set([...current, option.value]);
+            }
+            else {
+                this.value.set(current.filter((v) => v !== option.value));
+            }
+        }
+        else {
+            this.value.set(option.value);
+            this.isOpen.set(false);
+        }
+    }
+    toggle() {
+        if (this.disabled())
+            return;
+        this.isOpen.update((v) => !v);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Select, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: Select, isStandalone: true, selector: "bsc-select", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"select-wrapper\">\n  <button type=\"button\" [class]=\"triggerClasses()\" [disabled]=\"disabled()\" (click)=\"toggle()\">\n    <span [class.select-placeholder]=\"displayText() === placeholder()\">\n      {{ displayText() }}\n    </span>\n    <svg\n      class=\"select-icon\"\n      [class.select-chevron-open]=\"isOpen()\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    >\n      <path d=\"M6 9l6 6 6-6\" />\n    </svg>\n  </button>\n\n  @if (isOpen()) {\n    <ul class=\"select-panel\" role=\"listbox\">\n      @for (option of options(); track option.value) {\n        <li\n          class=\"select-option\"\n          [class.select-option-selected]=\"isSelected(option)\"\n          role=\"option\"\n          [attr.aria-selected]=\"isSelected(option)\"\n          tabindex=\"0\"\n          (click)=\"selectOption(option)\"\n          (keydown.enter)=\"selectOption(option)\"\n          (keydown.space)=\"selectOption(option)\"\n        >\n          @if (multiple()) {\n            <span class=\"select-checkbox\" [class.select-checkbox-checked]=\"isSelected(option)\">\n              @if (isSelected(option)) {\n                <svg\n                  width=\"12\"\n                  height=\"12\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                >\n                  <path d=\"M20 6L9 17l-5-5\" />\n                </svg>\n              }\n            </span>\n          }\n          {{ option.label }}\n        </li>\n      }\n    </ul>\n  }\n</div>\n", styles: ["@reference \"tailwindcss\";.select-wrapper{@apply relative inline-block w-full;}.select-trigger{@apply w-full appearance-none border border-ink-300 rounded-base bg-surface text-ink-900 pr-10 cursor-pointer text-left relative transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-primary-200 focus:border-primary;}.select-disabled{@apply opacity-50 cursor-not-allowed bg-surface-muted;}.select-placeholder{@apply text-ink-400;}.select-sm{@apply text-sm px-3 py-2;}.select-md{@apply text-sm px-4 py-2.5;}.select-lg{@apply text-base px-5 py-3;}.select-error{@apply border-error-500 focus:ring-error-200 focus:border-error-500;}.select-success{@apply border-success-500 focus:ring-success-200 focus:border-success-500;}.select-icon{@apply absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-ink-400 transition-transform duration-200;}.select-chevron-open{@apply rotate-180;}.select-panel{@apply absolute z-50 mt-1 w-full bg-surface border border-ink-200 rounded-base shadow-lg max-h-60 overflow-y-auto py-1 list-none m-0 p-0;}.select-option{@apply px-4 py-2.5 text-sm text-ink-900 cursor-pointer flex items-center gap-2 transition-colors duration-100 hover:bg-ink-50;}.select-option-selected{@apply bg-primary-50 text-primary-700;}.select-checkbox{@apply inline-flex items-center justify-center w-4 h-4 border border-ink-300 rounded-sm bg-surface flex-shrink-0;}.select-checkbox-checked{@apply bg-primary border-primary text-white;}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Select, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsc-select', imports: [], template: "<div class=\"select-wrapper\">\n  <button type=\"button\" [class]=\"triggerClasses()\" [disabled]=\"disabled()\" (click)=\"toggle()\">\n    <span [class.select-placeholder]=\"displayText() === placeholder()\">\n      {{ displayText() }}\n    </span>\n    <svg\n      class=\"select-icon\"\n      [class.select-chevron-open]=\"isOpen()\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    >\n      <path d=\"M6 9l6 6 6-6\" />\n    </svg>\n  </button>\n\n  @if (isOpen()) {\n    <ul class=\"select-panel\" role=\"listbox\">\n      @for (option of options(); track option.value) {\n        <li\n          class=\"select-option\"\n          [class.select-option-selected]=\"isSelected(option)\"\n          role=\"option\"\n          [attr.aria-selected]=\"isSelected(option)\"\n          tabindex=\"0\"\n          (click)=\"selectOption(option)\"\n          (keydown.enter)=\"selectOption(option)\"\n          (keydown.space)=\"selectOption(option)\"\n        >\n          @if (multiple()) {\n            <span class=\"select-checkbox\" [class.select-checkbox-checked]=\"isSelected(option)\">\n              @if (isSelected(option)) {\n                <svg\n                  width=\"12\"\n                  height=\"12\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                >\n                  <path d=\"M20 6L9 17l-5-5\" />\n                </svg>\n              }\n            </span>\n          }\n          {{ option.label }}\n        </li>\n      }\n    </ul>\n  }\n</div>\n", styles: ["@reference \"tailwindcss\";.select-wrapper{@apply relative inline-block w-full;}.select-trigger{@apply w-full appearance-none border border-ink-300 rounded-base bg-surface text-ink-900 pr-10 cursor-pointer text-left relative transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-primary-200 focus:border-primary;}.select-disabled{@apply opacity-50 cursor-not-allowed bg-surface-muted;}.select-placeholder{@apply text-ink-400;}.select-sm{@apply text-sm px-3 py-2;}.select-md{@apply text-sm px-4 py-2.5;}.select-lg{@apply text-base px-5 py-3;}.select-error{@apply border-error-500 focus:ring-error-200 focus:border-error-500;}.select-success{@apply border-success-500 focus:ring-success-200 focus:border-success-500;}.select-icon{@apply absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-ink-400 transition-transform duration-200;}.select-chevron-open{@apply rotate-180;}.select-panel{@apply absolute z-50 mt-1 w-full bg-surface border border-ink-200 rounded-base shadow-lg max-h-60 overflow-y-auto py-1 list-none m-0 p-0;}.select-option{@apply px-4 py-2.5 text-sm text-ink-900 cursor-pointer flex items-center gap-2 transition-colors duration-100 hover:bg-ink-50;}.select-option-selected{@apply bg-primary-50 text-primary-700;}.select-checkbox{@apply inline-flex items-center justify-center w-4 h-4 border border-ink-300 rounded-sm bg-surface flex-shrink-0;}.select-checkbox-checked{@apply bg-primary border-primary text-white;}\n"] }]
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class Pagination {
+    pageSizeOptions = input([10, 25, 50, 100], ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : []));
+    showPageSize = input(false, { ...(ngDevMode ? { debugName: "showPageSize" } : {}), transform: booleanAttribute });
+    totalItems = input(0, ...(ngDevMode ? [{ debugName: "totalItems" }] : []));
+    currentPage = model(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
+    pageSize = model(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    pageSizeSelectOptions = computed(() => {
+        return this.pageSizeOptions().map((n) => ({ value: String(n), label: `${n} / page` }));
+    }, ...(ngDevMode ? [{ debugName: "pageSizeSelectOptions" }] : []));
+    pageSizeValue = computed(() => String(this.pageSize()), ...(ngDevMode ? [{ debugName: "pageSizeValue" }] : []));
+    totalPages = computed(() => {
+        return Math.max(1, Math.ceil(this.totalItems() / this.pageSize()));
+    }, ...(ngDevMode ? [{ debugName: "totalPages" }] : []));
+    visiblePages = computed(() => {
+        const total = this.totalPages();
+        const current = this.currentPage();
+        if (total <= 7) {
+            return Array.from({ length: total }, (_, i) => i + 1);
+        }
+        // Always 7 slots: 5 numbers + up to 2 ellipsis
+        if (current <= 4) {
+            return [1, 2, 3, 4, 5, '...', total];
+        }
+        if (current >= total - 3) {
+            return [1, '...', total - 4, total - 3, total - 2, total - 1, total];
+        }
+        return [1, '...', current - 1, current, current + 1, '...', total];
+    }, ...(ngDevMode ? [{ debugName: "visiblePages" }] : []));
+    first() {
+        this.goToPage(1);
+    }
+    goToPage(page) {
+        this.currentPage.set(Math.max(1, Math.min(page, this.totalPages())));
+    }
+    last() {
+        this.goToPage(this.totalPages());
+    }
+    next() {
+        this.goToPage(this.currentPage() + 1);
+    }
+    onPageSizeChange(value) {
+        if (value && !Array.isArray(value)) {
+            this.pageSize.set(Number(value));
+            this.currentPage.set(1);
+        }
+    }
+    previous() {
+        this.goToPage(this.currentPage() - 1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Pagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: Pagination, isStandalone: true, selector: "bsc-pagination", inputs: { pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showPageSize: { classPropertyName: "showPageSize", publicName: "showPageSize", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", pageSize: "pageSizeChange" }, ngImport: i0, template: "<nav class=\"pagination\">\n  <ul class=\"pagination-list\">\n    <li>\n      <button\n        class=\"pagination-btn pagination-btn-first\"\n        [class.pagination-btn-disabled]=\"currentPage() === 1\"\n        [disabled]=\"currentPage() === 1\"\n        (click)=\"previous()\"\n      >\n        \u2039\n      </button>\n    </li>\n    @for (page of visiblePages(); track $index) {\n      @if (page === '...') {\n        <li>\n          <span class=\"pagination-btn pagination-btn-page pagination-ellipsis\">\u2026</span>\n        </li>\n      } @else {\n        <li>\n          <button\n            class=\"pagination-btn pagination-btn-page\"\n            [class.pagination-btn-active]=\"page === currentPage()\"\n            (click)=\"goToPage(+page)\"\n          >\n            {{ page }}\n          </button>\n        </li>\n      }\n    }\n    <li>\n      <button\n        class=\"pagination-btn pagination-btn-last\"\n        [class.pagination-btn-disabled]=\"currentPage() === totalPages()\"\n        [disabled]=\"currentPage() === totalPages()\"\n        (click)=\"next()\"\n      >\n        \u203A\n      </button>\n    </li>\n  </ul>\n\n  @if (showPageSize()) {\n    <bsc-select\n      size=\"sm\"\n      [options]=\"pageSizeSelectOptions()\"\n      [value]=\"pageSizeValue()\"\n      (valueChange)=\"onPageSizeChange($event)\"\n    />\n  }\n</nav>\n", styles: [".pagination{display:flex;align-items:center;gap:1rem}.pagination-list{display:flex;list-style:none;margin:0;padding:0;font-size:var(--text-sm)}.pagination-list>li+li>.pagination-btn{margin-left:-1px}.pagination-btn{display:flex;align-items:center;justify-content:center;background:var(--color-surface);border:1px solid var(--color-ink-200);color:var(--color-ink-700);font-weight:500;font-size:var(--text-sm);height:2.25rem;cursor:pointer;box-shadow:var(--shadow-xs);transition:background .15s,color .15s}.pagination-btn:hover:not(:disabled):not(.pagination-ellipsis){background:var(--color-ink-100);color:var(--color-ink-900)}.pagination-btn-first{border-radius:var(--radius-base) 0 0 var(--radius-base);padding:0 .5rem}.pagination-btn-prev,.pagination-btn-next{padding:0 .5rem}.pagination-btn-last{border-radius:0 var(--radius-base) var(--radius-base) 0;padding:0 .5rem}.pagination-btn-page{width:2.25rem}.pagination-btn-active{color:var(--color-primary);background:var(--color-ink-100)}.pagination-btn-disabled{opacity:.5;pointer-events:none}.pagination-ellipsis{cursor:default;pointer-events:none}\n"], dependencies: [{ kind: "component", type: Select, selector: "bsc-select", inputs: ["disabled", "multiple", "placeholder", "options", "size", "state", "value"], outputs: ["valueChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Pagination, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsc-pagination', imports: [Select], template: "<nav class=\"pagination\">\n  <ul class=\"pagination-list\">\n    <li>\n      <button\n        class=\"pagination-btn pagination-btn-first\"\n        [class.pagination-btn-disabled]=\"currentPage() === 1\"\n        [disabled]=\"currentPage() === 1\"\n        (click)=\"previous()\"\n      >\n        \u2039\n      </button>\n    </li>\n    @for (page of visiblePages(); track $index) {\n      @if (page === '...') {\n        <li>\n          <span class=\"pagination-btn pagination-btn-page pagination-ellipsis\">\u2026</span>\n        </li>\n      } @else {\n        <li>\n          <button\n            class=\"pagination-btn pagination-btn-page\"\n            [class.pagination-btn-active]=\"page === currentPage()\"\n            (click)=\"goToPage(+page)\"\n          >\n            {{ page }}\n          </button>\n        </li>\n      }\n    }\n    <li>\n      <button\n        class=\"pagination-btn pagination-btn-last\"\n        [class.pagination-btn-disabled]=\"currentPage() === totalPages()\"\n        [disabled]=\"currentPage() === totalPages()\"\n        (click)=\"next()\"\n      >\n        \u203A\n      </button>\n    </li>\n  </ul>\n\n  @if (showPageSize()) {\n    <bsc-select\n      size=\"sm\"\n      [options]=\"pageSizeSelectOptions()\"\n      [value]=\"pageSizeValue()\"\n      (valueChange)=\"onPageSizeChange($event)\"\n    />\n  }\n</nav>\n", styles: [".pagination{display:flex;align-items:center;gap:1rem}.pagination-list{display:flex;list-style:none;margin:0;padding:0;font-size:var(--text-sm)}.pagination-list>li+li>.pagination-btn{margin-left:-1px}.pagination-btn{display:flex;align-items:center;justify-content:center;background:var(--color-surface);border:1px solid var(--color-ink-200);color:var(--color-ink-700);font-weight:500;font-size:var(--text-sm);height:2.25rem;cursor:pointer;box-shadow:var(--shadow-xs);transition:background .15s,color .15s}.pagination-btn:hover:not(:disabled):not(.pagination-ellipsis){background:var(--color-ink-100);color:var(--color-ink-900)}.pagination-btn-first{border-radius:var(--radius-base) 0 0 var(--radius-base);padding:0 .5rem}.pagination-btn-prev,.pagination-btn-next{padding:0 .5rem}.pagination-btn-last{border-radius:0 var(--radius-base) var(--radius-base) 0;padding:0 .5rem}.pagination-btn-page{width:2.25rem}.pagination-btn-active{color:var(--color-primary);background:var(--color-ink-100)}.pagination-btn-disabled{opacity:.5;pointer-events:none}.pagination-ellipsis{cursor:default;pointer-events:none}\n"] }]
+        }], propDecorators: { pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], showPageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageSize", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }] } });
+
+class ProgressBar {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    labelPosition = input('none', ...(ngDevMode ? [{ debugName: "labelPosition" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    variant = input('brand', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    barClasses = computed(() => {
+        const pos = this.labelPosition();
+        const classes = ['progress-bar', `progress-bar-${this.variant()}`];
+        if (pos === 'inside') {
+            classes.push('progress-bar-inside');
+        }
+        else {
+            classes.push(`progress-bar-${this.size()}`);
+        }
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "barClasses" }] : []));
+    clampedValue = computed(() => {
+        return Math.max(0, Math.min(100, this.value()));
+    }, ...(ngDevMode ? [{ debugName: "clampedValue" }] : []));
+    barWidth = computed(() => {
+        return `${this.clampedValue()}%`;
+    }, ...(ngDevMode ? [{ debugName: "barWidth" }] : []));
+    labelClasses = computed(() => {
+        return `progress-label progress-label-${this.variant()}`;
+    }, ...(ngDevMode ? [{ debugName: "labelClasses" }] : []));
+    trackClasses = computed(() => {
+        return `progress-track progress-track-${this.size()}`;
+    }, ...(ngDevMode ? [{ debugName: "trackClasses" }] : []));
+    valueText = computed(() => {
+        return `${this.clampedValue()}%`;
+    }, ...(ngDevMode ? [{ debugName: "valueText" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProgressBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ProgressBar, isStandalone: true, selector: "bsc-progress-bar", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@switch (labelPosition()) {\n  @case ('outside') {\n    <!-- Outside: label + percentage on top -->\n    <div class=\"progress-outside-header\">\n      <span [class]=\"labelClasses()\">{{ label() }}</span>\n      <span class=\"progress-outside-value\">{{ valueText() }}</span>\n    </div>\n    <div [class]=\"trackClasses()\">\n      <div [class]=\"barClasses()\" [style.width]=\"barWidth()\"></div>\n    </div>\n  }\n  @case ('inside') {\n    <!-- Inside: percentage inside the bar -->\n    <div class=\"progress-track progress-track-inside\">\n      <div [class]=\"barClasses()\" [style.width]=\"barWidth()\">{{ valueText() }}</div>\n    </div>\n  }\n  @default {\n    <!-- None: optional label on top, no percentage -->\n    @if (label()) {\n      <div [class]=\"labelClasses()\">{{ label() }}</div>\n    }\n    <div [class]=\"trackClasses()\">\n      <div [class]=\"barClasses()\" [style.width]=\"barWidth()\"></div>\n    </div>\n  }\n}\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ProgressBar, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsc-progress-bar', imports: [], template: "@switch (labelPosition()) {\n  @case ('outside') {\n    <!-- Outside: label + percentage on top -->\n    <div class=\"progress-outside-header\">\n      <span [class]=\"labelClasses()\">{{ label() }}</span>\n      <span class=\"progress-outside-value\">{{ valueText() }}</span>\n    </div>\n    <div [class]=\"trackClasses()\">\n      <div [class]=\"barClasses()\" [style.width]=\"barWidth()\"></div>\n    </div>\n  }\n  @case ('inside') {\n    <!-- Inside: percentage inside the bar -->\n    <div class=\"progress-track progress-track-inside\">\n      <div [class]=\"barClasses()\" [style.width]=\"barWidth()\">{{ valueText() }}</div>\n    </div>\n  }\n  @default {\n    <!-- None: optional label on top, no percentage -->\n    @if (label()) {\n      <div [class]=\"labelClasses()\">{{ label() }}</div>\n    }\n    <div [class]=\"trackClasses()\">\n      <div [class]=\"barClasses()\" [style.width]=\"barWidth()\"></div>\n    </div>\n  }\n}\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+
+class Radio {
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
+    value = input('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    onSelect() {
+        if (!this.disabled()) {
+            this.checked.set(true);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Radio, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: Radio, isStandalone: true, selector: "bsc-radio", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, ngImport: i0, template: "<label class=\"radio\">\n  <input\n    type=\"radio\"\n    class=\"radio-input\"\n    [name]=\"name()\"\n    [value]=\"value()\"\n    [checked]=\"checked()\"\n    [disabled]=\"disabled()\"\n    (change)=\"onSelect()\"\n  />\n  <span class=\"radio-circle\"></span>\n  <span class=\"radio-label\">\n    <ng-content />\n  </span>\n</label>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Radio, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsc-radio', imports: [], template: "<label class=\"radio\">\n  <input\n    type=\"radio\"\n    class=\"radio-input\"\n    [name]=\"name()\"\n    [value]=\"value()\"\n    [checked]=\"checked()\"\n    [disabled]=\"disabled()\"\n    (change)=\"onSelect()\"\n  />\n  <span class=\"radio-circle\"></span>\n  <span class=\"radio-label\">\n    <ng-content />\n  </span>\n</label>\n" }]
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
+
+class SearchBar {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SearchBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SearchBar, isStandalone: true, selector: "bsc-search-bar", ngImport: i0, template: "<p>search-bar works!</p>\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SearchBar, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsc-search-bar', imports: [], template: "<p>search-bar works!</p>\n" }]
+        }] });
+
+class SidebarService {
+    isPinned = signal(this.loadPinned(), ...(ngDevMode ? [{ debugName: "isPinned" }] : []));
+    isVisible = signal(this.loadPinned(), ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
+    blockShow = false;
+    hideTimeout = null;
+    STORAGE_KEY = 'sidebar-pinned';
+    hide() {
+        if (this.isPinned())
+            return;
+        this.clearHideTimeout();
+        this.hideTimeout = setTimeout(() => {
+            this.isVisible.set(false);
+            this.hideTimeout = null;
+        }, 150);
+    }
+    show() {
+        if (this.blockShow)
+            return;
+        this.clearHideTimeout();
+        if (!this.isPinned()) {
+            this.isVisible.set(true);
+        }
+    }
+    toggle() {
+        this.clearHideTimeout();
+        this.isVisible.update((v) => !v);
+    }
+    togglePin() {
+        const wasPinned = this.isPinned();
+        const pinned = !wasPinned;
+        this.isPinned.set(pinned);
+        this.savePinned(pinned);
+        if (pinned) {
+            this.isVisible.set(true);
+            this.clearHideTimeout();
+        }
+        else {
+            this.isVisible.set(false);
+            this.clearHideTimeout();
+            this.blockShow = true;
+            setTimeout(() => (this.blockShow = false), 300);
+        }
+    }
+    clearHideTimeout() {
+        if (this.hideTimeout) {
+            clearTimeout(this.hideTimeout);
+            this.hideTimeout = null;
+        }
+    }
+    loadPinned() {
+        try {
+            return localStorage.getItem(this.STORAGE_KEY) === 'true';
+        }
+        catch {
+            return false;
+        }
+    }
+    savePinned(pinned) {
+        try {
+            localStorage.setItem(this.STORAGE_KEY, String(pinned));
+        }
+        catch {
+            // ignore (e.g. incognito)
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SidebarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SidebarService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SidebarService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class Sidebar {
+    hasHeader = input(false, { ...(ngDevMode ? { debugName: "hasHeader" } : {}), transform: booleanAttribute });
+    sidebar = inject(SidebarService);
+    sidebarClasses = computed(() => {
+        const visible = this.sidebar.isVisible();
+        const classes = ['sidebar', visible ? 'sidebar-visible' : 'sidebar-hidden'];
+        if (this.hasHeader())
+            classes.push('sidebar-with-header');
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "sidebarClasses" }] : []));
+    onMouseEnter() {
+        this.sidebar.show();
+    }
+    onMouseLeave() {
+        this.sidebar.hide();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Sidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: Sidebar, isStandalone: true, selector: "bsc-sidebar", inputs: { hasHeader: { classPropertyName: "hasHeader", publicName: "hasHeader", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- Invisible hover trigger at left edge (shows sidebar on hover when unpinned) -->\n@if (!sidebar.isVisible()) {\n  <div class=\"sidebar-trigger\" (mouseenter)=\"onMouseEnter()\"></div>\n}\n\n<aside\n  [class]=\"sidebarClasses()\"\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n  aria-label=\"Sidebar\"\n>\n  <!-- Header -->\n  <div class=\"sidebar-header\">\n    <ng-content select=\"[sidebarHeader]\" />\n  </div>\n\n  <!-- Body (scrollable) -->\n  <div class=\"sidebar-body\">\n    <ng-content />\n  </div>\n\n  <!-- Footer (optional) -->\n  <ng-content select=\"[sidebarFooter]\" />\n</aside>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Sidebar, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsc-sidebar', imports: [], template: "<!-- Invisible hover trigger at left edge (shows sidebar on hover when unpinned) -->\n@if (!sidebar.isVisible()) {\n  <div class=\"sidebar-trigger\" (mouseenter)=\"onMouseEnter()\"></div>\n}\n\n<aside\n  [class]=\"sidebarClasses()\"\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n  aria-label=\"Sidebar\"\n>\n  <!-- Header -->\n  <div class=\"sidebar-header\">\n    <ng-content select=\"[sidebarHeader]\" />\n  </div>\n\n  <!-- Body (scrollable) -->\n  <div class=\"sidebar-body\">\n    <ng-content />\n  </div>\n\n  <!-- Footer (optional) -->\n  <ng-content select=\"[sidebarFooter]\" />\n</aside>\n" }]
+        }], propDecorators: { hasHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasHeader", required: false }] }] } });
+
+class Skeleton {
+    animated = input(true, ...(ngDevMode ? [{ debugName: "animated" }] : []));
+    columns = input(3, ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    height = input('', ...(ngDevMode ? [{ debugName: "height" }] : []));
+    lines = input(1, ...(ngDevMode ? [{ debugName: "lines" }] : []));
+    variant = input('text', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : []));
+    animClass = computed(() => {
+        return this.animated() ? 'skeleton-animated' : '';
+    }, ...(ngDevMode ? [{ debugName: "animClass" }] : []));
+    columnsArray = computed(() => {
+        return Array.from({ length: this.columns() });
+    }, ...(ngDevMode ? [{ debugName: "columnsArray" }] : []));
+    linesArray = computed(() => {
+        return Array.from({ length: this.lines() });
+    }, ...(ngDevMode ? [{ debugName: "linesArray" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Skeleton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: Skeleton, isStandalone: true, selector: "bsc-skeleton", inputs: { animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@switch (variant()) {\n  @case ('text') {\n    <div class=\"skeleton-text-container\" [style.width]=\"width()\">\n      @for (line of linesArray(); track $index; let last = $last) {\n        <div\n          class=\"skeleton-base skeleton-text\"\n          [class]=\"animClass()\"\n          [style.width]=\"last && linesArray().length > 1 ? '75%' : '100%'\"\n          [style.height]=\"height() || null\"\n        ></div>\n      }\n    </div>\n  }\n  @case ('circular') {\n    <div\n      class=\"skeleton-base skeleton-circular\"\n      [class]=\"animClass()\"\n      [style.width]=\"width() === '100%' ? '3rem' : width()\"\n      [style.height]=\"height() || (width() === '100%' ? '3rem' : width())\"\n    ></div>\n  }\n  @case ('rectangular') {\n    <div\n      class=\"skeleton-base skeleton-rectangular\"\n      [class]=\"animClass()\"\n      [style.width]=\"width()\"\n      [style.height]=\"height() || '8rem'\"\n    ></div>\n  }\n  @case ('table') {\n    <div class=\"skeleton-table\" [style.width]=\"width()\">\n      <!-- Header row -->\n      <div class=\"skeleton-table-row\">\n        @for (col of columnsArray(); track $index) {\n          <div class=\"skeleton-base skeleton-table-header-cell\" [class]=\"animClass()\"></div>\n        }\n      </div>\n      <!-- Body rows -->\n      @for (row of linesArray(); track $index) {\n        <div class=\"skeleton-table-row\">\n          @for (col of columnsArray(); track $index) {\n            <div class=\"skeleton-base skeleton-table-cell\" [class]=\"animClass()\"></div>\n          }\n        </div>\n      }\n    </div>\n  }\n}\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Skeleton, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsc-skeleton', imports: [], template: "@switch (variant()) {\n  @case ('text') {\n    <div class=\"skeleton-text-container\" [style.width]=\"width()\">\n      @for (line of linesArray(); track $index; let last = $last) {\n        <div\n          class=\"skeleton-base skeleton-text\"\n          [class]=\"animClass()\"\n          [style.width]=\"last && linesArray().length > 1 ? '75%' : '100%'\"\n          [style.height]=\"height() || null\"\n        ></div>\n      }\n    </div>\n  }\n  @case ('circular') {\n    <div\n      class=\"skeleton-base skeleton-circular\"\n      [class]=\"animClass()\"\n      [style.width]=\"width() === '100%' ? '3rem' : width()\"\n      [style.height]=\"height() || (width() === '100%' ? '3rem' : width())\"\n    ></div>\n  }\n  @case ('rectangular') {\n    <div\n      class=\"skeleton-base skeleton-rectangular\"\n      [class]=\"animClass()\"\n      [style.width]=\"width()\"\n      [style.height]=\"height() || '8rem'\"\n    ></div>\n  }\n  @case ('table') {\n    <div class=\"skeleton-table\" [style.width]=\"width()\">\n      <!-- Header row -->\n      <div class=\"skeleton-table-row\">\n        @for (col of columnsArray(); track $index) {\n          <div class=\"skeleton-base skeleton-table-header-cell\" [class]=\"animClass()\"></div>\n        }\n      </div>\n      <!-- Body rows -->\n      @for (row of linesArray(); track $index) {\n        <div class=\"skeleton-table-row\">\n          @for (col of columnsArray(); track $index) {\n            <div class=\"skeleton-base skeleton-table-cell\" [class]=\"animClass()\"></div>\n          }\n        </div>\n      }\n    </div>\n  }\n}\n" }]
+        }], propDecorators: { animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
+
+class Spinner {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Spinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: Spinner, isStandalone: true, selector: "bsc-spinner", ngImport: i0, template: "<p>spinner works!</p>\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Spinner, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsc-spinner', imports: [], template: "<p>spinner works!</p>\n" }]
+        }] });
+
+class Stepper {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Stepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: Stepper, isStandalone: true, selector: "bsc-stepper", ngImport: i0, template: "<p>stepper works!</p>\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Stepper, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsc-stepper', imports: [], template: "<p>stepper works!</p>\n" }]
+        }] });
+
+class Table {
+    hover = input(true, { ...(ngDevMode ? { debugName: "hover" } : {}), transform: booleanAttribute });
+    pageSizeOptions = input([10, 25, 50, 100], ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : []));
+    paginate = input(false, { ...(ngDevMode ? { debugName: "paginate" } : {}), transform: booleanAttribute });
+    showPageSize = input(false, { ...(ngDevMode ? { debugName: "showPageSize" } : {}), transform: booleanAttribute });
+    sortable = input(false, { ...(ngDevMode ? { debugName: "sortable" } : {}), transform: booleanAttribute });
+    tableSearch = input(false, { ...(ngDevMode ? { debugName: "tableSearch" } : {}), transform: booleanAttribute });
+    columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    currentPage = signal(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
+    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
+    pageSize = signal(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
+    sortState = signal({ column: '', direction: 'none' }, ...(ngDevMode ? [{ debugName: "sortState" }] : []));
+    stripedDirection = input('none', ...(ngDevMode ? [{ debugName: "stripedDirection" }] : []));
+    filteredData = computed(() => {
+        const term = this.searchTerm().toLowerCase();
+        const rows = this.data();
+        if (!term)
+            return rows;
+        return rows.filter((row) => this.columns().some((col) => {
+            const val = row[col.key];
+            return val != null && String(val).toLowerCase().includes(term);
+        }));
+    }, ...(ngDevMode ? [{ debugName: "filteredData" }] : []));
+    displayData = computed(() => {
+        const rows = this.filteredData();
+        const sort = this.sortState();
+        if (sort.direction === 'none' || !sort.column)
+            return rows;
+        return [...rows].sort((a, b) => {
+            const aVal = String(a[sort.column] ?? '');
+            const bVal = String(b[sort.column] ?? '');
+            const cmp = aVal.localeCompare(bVal, undefined, { numeric: true });
+            return sort.direction === 'asc' ? cmp : -cmp;
+        });
+    }, ...(ngDevMode ? [{ debugName: "displayData" }] : []));
+    paginatedData = computed(() => {
+        const rows = this.displayData();
+        if (!this.paginate())
+            return rows;
+        const page = this.currentPage();
+        const size = this.pageSize();
+        const start = (page - 1) * size;
+        return rows.slice(start, start + size);
+    }, ...(ngDevMode ? [{ debugName: "paginatedData" }] : []));
+    tableClasses = computed(() => {
+        const classes = ['table'];
+        const dir = this.stripedDirection();
+        if (dir !== 'none')
+            classes.push(`table-striped-${dir}`);
+        if (this.hover())
+            classes.push('table-hover');
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "tableClasses" }] : []));
+    totalItems = computed(() => this.displayData().length, ...(ngDevMode ? [{ debugName: "totalItems" }] : []));
+    getSortDirection(col) {
+        const sort = this.sortState();
+        return sort.column === col.key ? sort.direction : 'none';
+    }
+    isColumnSortable(col) {
+        if (col.sortable !== undefined)
+            return col.sortable;
+        return this.sortable();
+    }
+    onSearchInput(event) {
+        const target = event.target;
+        this.searchTerm.set(target.value);
+        this.currentPage.set(1);
+    }
+    toggleSort(col) {
+        if (!this.isColumnSortable(col))
+            return;
+        const current = this.sortState();
+        if (current.column !== col.key) {
+            this.sortState.set({ column: col.key, direction: 'asc' });
+        }
+        else {
+            const next = current.direction === 'asc' ? 'desc' : current.direction === 'desc' ? 'none' : 'asc';
+            this.sortState.set({ column: col.key, direction: next });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Table, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: Table, isStandalone: true, selector: "bsc-table", inputs: { hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, paginate: { classPropertyName: "paginate", publicName: "paginate", isSignal: true, isRequired: false, transformFunction: null }, showPageSize: { classPropertyName: "showPageSize", publicName: "showPageSize", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, tableSearch: { classPropertyName: "tableSearch", publicName: "tableSearch", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, stripedDirection: { classPropertyName: "stripedDirection", publicName: "stripedDirection", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"table-wrapper\">\n  @if (tableSearch()) {\n    <div class=\"table-search\">\n      <svg\n        class=\"table-search-icon\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      >\n        <circle cx=\"11\" cy=\"11\" r=\"8\" />\n        <path d=\"M21 21l-4.35-4.35\" />\n      </svg>\n      <input\n        class=\"table-search-input\"\n        type=\"text\"\n        placeholder=\"Search...\"\n        [value]=\"searchTerm()\"\n        (input)=\"onSearchInput($event)\"\n      />\n    </div>\n  }\n\n  <div class=\"table-scroll\">\n    <table [class]=\"tableClasses()\">\n      <thead>\n        <tr>\n          @for (col of columns(); track col.key) {\n            <th\n              class=\"table-th\"\n              [class.table-th-sortable]=\"isColumnSortable(col)\"\n              (click)=\"toggleSort(col)\"\n            >\n              <span class=\"table-th-content\">\n                {{ col.label }}\n                @if (isColumnSortable(col)) {\n                  <svg\n                    class=\"table-sort-icon\"\n                    [class.table-sort-asc]=\"getSortDirection(col) === 'asc'\"\n                    [class.table-sort-desc]=\"getSortDirection(col) === 'desc'\"\n                    [class.table-sort-none]=\"getSortDirection(col) === 'none'\"\n                    width=\"14\"\n                    height=\"14\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  >\n                    <path d=\"M6 9l6-6 6 6\" />\n                    <path d=\"M6 15l6 6 6-6\" />\n                  </svg>\n                }\n              </span>\n            </th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @for (row of paginatedData(); track $index) {\n          <tr>\n            @for (col of columns(); track col.key) {\n              <td class=\"table-td\">{{ row[col.key] }}</td>\n            }\n          </tr>\n        } @empty {\n          <tr>\n            <td class=\"table-empty\" [attr.colspan]=\"columns().length\">No data available.</td>\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n\n  @if (paginate()) {\n    <div class=\"table-pagination\">\n      <bsc-pagination\n        [totalItems]=\"totalItems()\"\n        [(currentPage)]=\"currentPage\"\n        [(pageSize)]=\"pageSize\"\n        [showPageSize]=\"showPageSize()\"\n        [pageSizeOptions]=\"pageSizeOptions()\"\n      />\n    </div>\n  }\n</div>\n", styles: ["@reference \"tailwindcss\";.table-wrapper{@apply w-full;}.table-search{@apply relative mb-4;}.table-search-icon{@apply absolute left-3 top-1/2 -translate-y-1/2 text-ink-400 pointer-events-none;}.table-search-input{@apply w-full pl-10 pr-4 py-2.5 text-sm border border-ink-300 rounded-base bg-surface text-ink-900 placeholder:text-ink-400 transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-primary-200 focus:border-primary;}.table-scroll{@apply overflow-x-auto border border-ink-200 rounded-base;}.table{@apply w-full text-sm;}.table-th{@apply px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-ink-500 bg-surface-muted;}.table-th-content{@apply inline-flex items-center gap-1.5;}.table-th-sortable{@apply cursor-pointer select-none transition-colors duration-150 hover:text-ink-700 hover:bg-ink-100;}.table-sort-icon{@apply transition-opacity duration-150;}.table-sort-none{@apply opacity-30;}.table-sort-asc,.table-sort-desc{@apply opacity-100;}.table-td{@apply px-4 py-3 text-ink-900 border-b border-ink-100;}.table-striped-row tbody tr:nth-child(2n){@apply bg-ink-50;}.table-striped-column td:nth-child(2n),.table-striped-column th:nth-child(2n){@apply bg-ink-50;}.table-hover tbody tr{@apply transition-colors duration-150;}.table-hover tbody tr:hover{@apply bg-primary-50;}.table-empty{@apply px-4 py-12 text-center text-ink-400;}.table-pagination{@apply flex justify-end mt-4;}\n"], dependencies: [{ kind: "component", type: Pagination, selector: "bsc-pagination", inputs: ["pageSizeOptions", "showPageSize", "totalItems", "currentPage", "pageSize"], outputs: ["currentPageChange", "pageSizeChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Table, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsc-table', imports: [Pagination], template: "<div class=\"table-wrapper\">\n  @if (tableSearch()) {\n    <div class=\"table-search\">\n      <svg\n        class=\"table-search-icon\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      >\n        <circle cx=\"11\" cy=\"11\" r=\"8\" />\n        <path d=\"M21 21l-4.35-4.35\" />\n      </svg>\n      <input\n        class=\"table-search-input\"\n        type=\"text\"\n        placeholder=\"Search...\"\n        [value]=\"searchTerm()\"\n        (input)=\"onSearchInput($event)\"\n      />\n    </div>\n  }\n\n  <div class=\"table-scroll\">\n    <table [class]=\"tableClasses()\">\n      <thead>\n        <tr>\n          @for (col of columns(); track col.key) {\n            <th\n              class=\"table-th\"\n              [class.table-th-sortable]=\"isColumnSortable(col)\"\n              (click)=\"toggleSort(col)\"\n            >\n              <span class=\"table-th-content\">\n                {{ col.label }}\n                @if (isColumnSortable(col)) {\n                  <svg\n                    class=\"table-sort-icon\"\n                    [class.table-sort-asc]=\"getSortDirection(col) === 'asc'\"\n                    [class.table-sort-desc]=\"getSortDirection(col) === 'desc'\"\n                    [class.table-sort-none]=\"getSortDirection(col) === 'none'\"\n                    width=\"14\"\n                    height=\"14\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  >\n                    <path d=\"M6 9l6-6 6 6\" />\n                    <path d=\"M6 15l6 6 6-6\" />\n                  </svg>\n                }\n              </span>\n            </th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @for (row of paginatedData(); track $index) {\n          <tr>\n            @for (col of columns(); track col.key) {\n              <td class=\"table-td\">{{ row[col.key] }}</td>\n            }\n          </tr>\n        } @empty {\n          <tr>\n            <td class=\"table-empty\" [attr.colspan]=\"columns().length\">No data available.</td>\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n\n  @if (paginate()) {\n    <div class=\"table-pagination\">\n      <bsc-pagination\n        [totalItems]=\"totalItems()\"\n        [(currentPage)]=\"currentPage\"\n        [(pageSize)]=\"pageSize\"\n        [showPageSize]=\"showPageSize()\"\n        [pageSizeOptions]=\"pageSizeOptions()\"\n      />\n    </div>\n  }\n</div>\n", styles: ["@reference \"tailwindcss\";.table-wrapper{@apply w-full;}.table-search{@apply relative mb-4;}.table-search-icon{@apply absolute left-3 top-1/2 -translate-y-1/2 text-ink-400 pointer-events-none;}.table-search-input{@apply w-full pl-10 pr-4 py-2.5 text-sm border border-ink-300 rounded-base bg-surface text-ink-900 placeholder:text-ink-400 transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-primary-200 focus:border-primary;}.table-scroll{@apply overflow-x-auto border border-ink-200 rounded-base;}.table{@apply w-full text-sm;}.table-th{@apply px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-ink-500 bg-surface-muted;}.table-th-content{@apply inline-flex items-center gap-1.5;}.table-th-sortable{@apply cursor-pointer select-none transition-colors duration-150 hover:text-ink-700 hover:bg-ink-100;}.table-sort-icon{@apply transition-opacity duration-150;}.table-sort-none{@apply opacity-30;}.table-sort-asc,.table-sort-desc{@apply opacity-100;}.table-td{@apply px-4 py-3 text-ink-900 border-b border-ink-100;}.table-striped-row tbody tr:nth-child(2n){@apply bg-ink-50;}.table-striped-column td:nth-child(2n),.table-striped-column th:nth-child(2n){@apply bg-ink-50;}.table-hover tbody tr{@apply transition-colors duration-150;}.table-hover tbody tr:hover{@apply bg-primary-50;}.table-empty{@apply px-4 py-12 text-center text-ink-400;}.table-pagination{@apply flex justify-end mt-4;}\n"] }]
+        }], propDecorators: { hover: [{ type: i0.Input, args: [{ isSignal: true, alias: "hover", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], paginate: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginate", required: false }] }], showPageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageSize", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], tableSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableSearch", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], stripedDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "stripedDirection", required: false }] }] } });
+
+class Tabs {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Tabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: Tabs, isStandalone: true, selector: "bsc-tabs", ngImport: i0, template: "<p>tabs works!</p>\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Tabs, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsc-tabs', imports: [], template: "<p>tabs works!</p>\n" }]
+        }] });
+
+class Toggle {
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    thumbClasses = computed(() => {
+        const classes = ['toggle-thumb'];
+        if (this.checked())
+            classes.push('toggle-thumb-checked');
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "thumbClasses" }] : []));
+    trackClasses = computed(() => {
+        const classes = ['toggle-track'];
+        if (this.checked())
+            classes.push('toggle-track-checked');
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "trackClasses" }] : []));
+    wrapperClasses = computed(() => {
+        return `toggle toggle-${this.size()}`;
+    }, ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : []));
+    toggle() {
+        if (!this.disabled()) {
+            this.checked.set(!this.checked());
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Toggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: Toggle, isStandalone: true, selector: "bsc-toggle", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, ngImport: i0, template: "<button\n  type=\"button\"\n  role=\"switch\"\n  [attr.aria-checked]=\"checked()\"\n  [disabled]=\"disabled()\"\n  [class]=\"wrapperClasses()\"\n  (click)=\"toggle()\"\n>\n  <span [class]=\"trackClasses()\">\n    <span [class]=\"thumbClasses()\"></span>\n  </span>\n</button>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Toggle, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsc-toggle', imports: [], template: "<button\n  type=\"button\"\n  role=\"switch\"\n  [attr.aria-checked]=\"checked()\"\n  [disabled]=\"disabled()\"\n  [class]=\"wrapperClasses()\"\n  (click)=\"toggle()\"\n>\n  <span [class]=\"trackClasses()\">\n    <span [class]=\"thumbClasses()\"></span>\n  </span>\n</button>\n" }]
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+class Tooltip {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Tooltip, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: Tooltip, isStandalone: true, selector: "bsc-tooltip", ngImport: i0, template: "<p>tooltip works!</p>\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Tooltip, decorators: [{
+            type: Component,
+            args: [{ selector: 'bsc-tooltip', imports: [], template: "<p>tooltip works!</p>\n" }]
+        }] });
+
+/*
+ * Public API Surface of core-components
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Accordion, AccordionItem, Alert, Avatar, Badge, Breadcrumb, Button, Card, Checkbox, DatePicker, Dropdown, FileUpload, Footer, FormField, Header, Icon, Input, Label, Modal, Navigation, Pagination, ProgressBar, Radio, SearchBar, Select, Sidebar, SidebarService, Skeleton, Spinner, Stepper, Table, Tabs, Toggle, Tooltip };
+//# sourceMappingURL=blank-software-core-components.mjs.map