@neuravision/ng-construct 0.3.6 → 0.4.2

package/fesm2022/neuravision-ng-construct.mjs

@@ -2964,6 +2964,104 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
   `, styles: [":host{display:block}\n"] }]
         }], propDecorators: { activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }, { type: i0.Output, args: ["activeTabChange"] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AfTabPanelComponent), { isSignal: true }] }], tabButtons: [{ type: i0.ViewChildren, args: ['tabButton', { isSignal: true }] }] } });
 
+/**
+ * Router-based tab navigation component.
+ *
+ * Uses the `ct-tabs` CSS classes from the Construct Design System but renders
+ * `<a routerLink>` elements for navigation. Active state is determined
+ * automatically via `routerLinkActive`.
+ *
+ * For content-panel tabs (show/hide content without routing), use `<af-tabs>` instead.
+ *
+ * @example
+ * <af-nav-tabs
+ *   [tabs]="[
+ *     { id: 'my', label: 'My Documents', routerLink: '/documents/my' },
+ *     { id: 'all', label: 'All Documents', routerLink: '/documents/all' }
+ *   ]">
+ * </af-nav-tabs>
+ */
+class AfNavTabsComponent {
+    /** Tab items to render. */
+    tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : []));
+    /** Visual variant. `'pill'` renders pill-shaped tabs with background. */
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /** Size variant. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Accessible label for the tab navigation. */
+    ariaLabel = input('Sub navigation', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    containerClasses = computed(() => {
+        const classes = ['ct-tabs'];
+        const v = this.variant();
+        if (v === 'pill')
+            classes.push('ct-tabs--pill');
+        const s = this.size();
+        if (s !== 'md')
+            classes.push(`ct-tabs--${s}`);
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfNavTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfNavTabsComponent, isStandalone: true, selector: "af-nav-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <nav [class]="containerClasses()" [attr.aria-label]="ariaLabel()">
+      <ul class="ct-tabs__list">
+        @for (tab of tabs(); track tab.id) {
+          <li>
+            @if (tab.disabled) {
+              <span
+                class="ct-tabs__trigger"
+                aria-disabled="true"
+                [attr.id]="'nav-tab-' + tab.id">
+                {{ tab.label }}
+              </span>
+            } @else {
+              <a
+                class="ct-tabs__trigger"
+                [routerLink]="tab.routerLink"
+                routerLinkActive="ct-tabs__trigger--active"
+                #rla="routerLinkActive"
+                [attr.aria-current]="rla.isActive ? 'page' : null"
+                [attr.id]="'nav-tab-' + tab.id">
+                {{ tab.label }}
+              </a>
+            }
+          </li>
+        }
+      </ul>
+    </nav>
+  `, isInline: true, styles: [":host{display:block}ul{list-style:none;margin:0;padding:0}li{display:contents}.ct-tabs__trigger--active{color:var(--color-text-primary)}.ct-tabs__trigger--active:after{background:var(--ct-tabs-indicator-color, var(--color-brand-primary))}.ct-tabs--pill .ct-tabs__trigger--active{background:var(--color-bg-elevated);box-shadow:var(--shadow-sm)}.ct-tabs--pill .ct-tabs__trigger--active:after{display:none}.ct-tabs__trigger[aria-disabled=true]{color:var(--color-text-muted);opacity:var(--opacity-disabled, .5);cursor:not-allowed;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfNavTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'af-nav-tabs', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink, RouterLinkActive], template: `
+    <nav [class]="containerClasses()" [attr.aria-label]="ariaLabel()">
+      <ul class="ct-tabs__list">
+        @for (tab of tabs(); track tab.id) {
+          <li>
+            @if (tab.disabled) {
+              <span
+                class="ct-tabs__trigger"
+                aria-disabled="true"
+                [attr.id]="'nav-tab-' + tab.id">
+                {{ tab.label }}
+              </span>
+            } @else {
+              <a
+                class="ct-tabs__trigger"
+                [routerLink]="tab.routerLink"
+                routerLinkActive="ct-tabs__trigger--active"
+                #rla="routerLinkActive"
+                [attr.aria-current]="rla.isActive ? 'page' : null"
+                [attr.id]="'nav-tab-' + tab.id">
+                {{ tab.label }}
+              </a>
+            }
+          </li>
+        }
+      </ul>
+    </nav>
+  `, styles: [":host{display:block}ul{list-style:none;margin:0;padding:0}li{display:contents}.ct-tabs__trigger--active{color:var(--color-text-primary)}.ct-tabs__trigger--active:after{background:var(--ct-tabs-indicator-color, var(--color-brand-primary))}.ct-tabs--pill .ct-tabs__trigger--active{background:var(--color-bg-elevated);box-shadow:var(--shadow-sm)}.ct-tabs--pill .ct-tabs__trigger--active:after{display:none}.ct-tabs__trigger[aria-disabled=true]{color:var(--color-text-muted);opacity:var(--opacity-disabled, .5);cursor:not-allowed;pointer-events:none}\n"] }]
+        }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
 /**
  * Dropdown menu component implementing the WAI-ARIA Menu Pattern.
  *
@@ -3407,10 +3505,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
         }], propDecorators: { currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }], totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], maxVisiblePages: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisiblePages", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
 
 /**
- * Breadcrumbs navigation component
+ * Breadcrumbs navigation component with Angular Router support.
+ *
+ * Items with `routerLink` navigate via the Angular Router (no page reload).
+ * Items with `url` render a plain `<a href>` (for external links).
+ * The last item is always rendered as static text (current page).
  *
  * @example
- * <af-breadcrumbs [items]="breadcrumbs"></af-breadcrumbs>
+ * <af-breadcrumbs [items]="[
+ *   { label: 'Home', routerLink: '/' },
+ *   { label: 'Documents', routerLink: '/documents' },
+ *   { label: 'My Documents' }
+ * ]"></af-breadcrumbs>
  */
 class AfBreadcrumbsComponent {
     /** Breadcrumb items */
@@ -3421,34 +3527,50 @@ class AfBreadcrumbsComponent {
       <ol class="ct-breadcrumbs__list">
         @for (item of items(); track $index; let isLast = $last) {
           <li class="ct-breadcrumbs__item">
-            @if (!isLast && item.url) {
+            @if (isLast) {
+              <span class="ct-breadcrumbs__current" aria-current="page">{{ item.label }}</span>
+            } @else if (item.routerLink) {
+              <a class="ct-breadcrumbs__link" [routerLink]="item.routerLink">
+                {{ item.label }}
+              </a>
+              <span class="ct-breadcrumbs__separator" aria-hidden="true">/</span>
+            } @else if (item.url) {
               <a class="ct-breadcrumbs__link" [href]="item.url">
                 {{ item.label }}
               </a>
-              <span class="ct-breadcrumbs__separator">/</span>
+              <span class="ct-breadcrumbs__separator" aria-hidden="true">/</span>
             } @else {
-              <span class="ct-breadcrumbs__current">{{ item.label }}</span>
+              <span class="ct-breadcrumbs__text">{{ item.label }}</span>
+              <span class="ct-breadcrumbs__separator" aria-hidden="true">/</span>
             }
           </li>
         }
       </ol>
     </nav>
-  `, isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfBreadcrumbsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'af-breadcrumbs', changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'af-breadcrumbs', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink], template: `
     <nav class="ct-breadcrumbs" aria-label="Breadcrumb">
       <ol class="ct-breadcrumbs__list">
         @for (item of items(); track $index; let isLast = $last) {
           <li class="ct-breadcrumbs__item">
-            @if (!isLast && item.url) {
+            @if (isLast) {
+              <span class="ct-breadcrumbs__current" aria-current="page">{{ item.label }}</span>
+            } @else if (item.routerLink) {
+              <a class="ct-breadcrumbs__link" [routerLink]="item.routerLink">
+                {{ item.label }}
+              </a>
+              <span class="ct-breadcrumbs__separator" aria-hidden="true">/</span>
+            } @else if (item.url) {
               <a class="ct-breadcrumbs__link" [href]="item.url">
                 {{ item.label }}
               </a>
-              <span class="ct-breadcrumbs__separator">/</span>
+              <span class="ct-breadcrumbs__separator" aria-hidden="true">/</span>
             } @else {
-              <span class="ct-breadcrumbs__current">{{ item.label }}</span>
+              <span class="ct-breadcrumbs__text">{{ item.label }}</span>
+              <span class="ct-breadcrumbs__separator" aria-hidden="true">/</span>
             }
           </li>
         }
@@ -3917,6 +4039,214 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
   `, styles: [":host{display:block}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], inputRef: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], popoverRef: [{ type: i0.ViewChild, args: ['popover', { isSignal: true }] }] } });
 
+/**
+ * Chip component for labels, tags, statuses, and interactive filters.
+ *
+ * @example Static chip
+ * <af-chip variant="success" size="sm">Resolved</af-chip>
+ *
+ * @example Toggle chip with two-way binding
+ * <af-chip selectable [(selected)]="isActive">Filter</af-chip>
+ *
+ * @example Removable chip
+ * <af-chip removable (removed)="onRemove()">Status: Active</af-chip>
+ */
+class AfChipComponent {
+    /** Semantic color variant. */
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /** Visual style: subtle (filled background), outline, or solid. */
+    appearance = input('subtle', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    /** Size of the chip. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Opaque value for identifying this chip in lists or groups. */
+    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+    /** Enables toggle behavior with hover, active, focus styles, and keyboard support. */
+    selectable = input(false, { ...(ngDevMode ? { debugName: "selectable" } : {}), transform: booleanAttribute });
+    /** Selected state for toggle chips. Supports two-way binding via `[(selected)]`. */
+    selected = model(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
+    /** Disables the chip, preventing all interaction. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    /** Shows a remove button inside the chip. */
+    removable = input(false, { ...(ngDevMode ? { debugName: "removable" } : {}), transform: booleanAttribute });
+    /** Shows a dot status indicator instead of an icon. */
+    dot = input(false, { ...(ngDevMode ? { debugName: "dot" } : {}), transform: booleanAttribute });
+    /** Accessible label for icon-only or truncated chips. */
+    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
+    /** Accessible label for the remove button. Should be localized by the consumer. */
+    removeAriaLabel = input('Remove', ...(ngDevMode ? [{ debugName: "removeAriaLabel" }] : []));
+    /** Emits the chip's `value` when the remove button is clicked or Delete/Backspace is pressed. */
+    removed = output();
+    chipRole = computed(() => {
+        if (!this.selectable())
+            return null;
+        return this.removable() ? 'group' : 'button';
+    }, ...(ngDevMode ? [{ debugName: "chipRole" }] : []));
+    iconClasses = computed(() => {
+        const classes = ['ct-chip__icon'];
+        if (this.variant() !== 'default') {
+            classes.push(`ct-chip__icon--${this.variant()}`);
+        }
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "iconClasses" }] : []));
+    chipClasses = computed(() => {
+        const classes = ['ct-chip'];
+        if (this.size() !== 'md') {
+            classes.push(`ct-chip--${this.size()}`);
+        }
+        if (this.appearance() !== 'subtle') {
+            classes.push(`ct-chip--${this.appearance()}`);
+        }
+        if (this.variant() !== 'default') {
+            classes.push(`ct-chip--${this.variant()}`);
+        }
+        if (this.selectable()) {
+            classes.push('ct-chip--interactive');
+        }
+        if (this.selectable() && this.selected()) {
+            classes.push('ct-chip--selected');
+        }
+        if (this.disabled()) {
+            classes.push('ct-chip--disabled');
+        }
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "chipClasses" }] : []));
+    handleClick() {
+        if (!this.selectable() || this.disabled())
+            return;
+        this.selected.update(v => !v);
+    }
+    handleKeydown(event) {
+        if (event.target.closest('.ct-chip__remove'))
+            return;
+        if (!this.selectable() || this.disabled())
+            return;
+        event.preventDefault();
+        this.selected.update(v => !v);
+    }
+    handleRemoveKeydown(event) {
+        if (!this.removable() || this.disabled())
+            return;
+        event.preventDefault();
+        this.removed.emit(this.value());
+    }
+    handleRemove(event) {
+        event.stopPropagation();
+        this.removed.emit(this.value());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfChipComponent, isStandalone: true, selector: "af-chip", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", 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 }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, removeAriaLabel: { classPropertyName: "removeAriaLabel", publicName: "removeAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", removed: "removed" }, host: { listeners: { "click": "handleClick()", "keydown.enter": "handleKeydown($event)", "keydown.space": "handleKeydown($event)", "keydown.delete": "handleRemoveKeydown($event)", "keydown.backspace": "handleRemoveKeydown($event)" }, properties: { "class": "chipClasses()", "attr.role": "chipRole()", "attr.tabindex": "selectable() && !removable() && !disabled() ? \"0\" : null", "attr.aria-pressed": "selectable() && !removable() ? selected() : null", "attr.aria-disabled": "disabled() || null", "attr.aria-label": "ariaLabel() || null" } }, ngImport: i0, template: `
+    <span
+      class="ct-chip__action"
+      [attr.role]="selectable() && removable() ? 'button' : null"
+      [attr.tabindex]="selectable() && removable() && !disabled() ? '0' : null"
+      [attr.aria-pressed]="selectable() && removable() ? selected() : null">
+      @if (dot()) {
+        <span class="ct-chip__dot" aria-hidden="true"></span>
+      } @else {
+        <span class="ct-chip__avatar">
+          <ng-content select="[chipAvatar]" />
+        </span>
+
+        <span [class]="iconClasses()" aria-hidden="true">
+          <ng-content select="af-icon,[chipIcon]" />
+        </span>
+      }
+
+      <span class="ct-chip__label">
+        <ng-content />
+      </span>
+
+      @if (selectable()) {
+        <span class="ct-chip__check" aria-hidden="true"></span>
+      }
+    </span>
+
+    @if (removable() && !disabled()) {
+      <button
+        type="button"
+        class="ct-chip__remove"
+        [attr.aria-label]="removeAriaLabel()"
+        (click)="handleRemove($event)">
+        <svg
+          viewBox="0 0 24 24"
+          width="16"
+          height="16"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          aria-hidden="true">
+          <line x1="18" y1="6" x2="6" y2="18" />
+          <line x1="6" y1="6" x2="18" y2="18" />
+        </svg>
+      </button>
+    }
+  `, isInline: true, styles: [":host{display:inline-flex;align-items:center}.ct-chip__action{display:contents}.ct-chip__action:focus-visible{outline:none}:host:has(.ct-chip__action:focus-visible){outline:2px solid var(--color-focus-ring, Highlight);outline-offset:2px}.ct-chip__icon:not(:has(*)),.ct-chip__avatar:not(:has(*)){display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfChipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'af-chip', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'chipClasses()',
+                        '[attr.role]': 'chipRole()',
+                        '[attr.tabindex]': 'selectable() && !removable() && !disabled() ? "0" : null',
+                        '[attr.aria-pressed]': 'selectable() && !removable() ? selected() : null',
+                        '[attr.aria-disabled]': 'disabled() || null',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '(click)': 'handleClick()',
+                        '(keydown.enter)': 'handleKeydown($event)',
+                        '(keydown.space)': 'handleKeydown($event)',
+                        '(keydown.delete)': 'handleRemoveKeydown($event)',
+                        '(keydown.backspace)': 'handleRemoveKeydown($event)',
+                    }, template: `
+    <span
+      class="ct-chip__action"
+      [attr.role]="selectable() && removable() ? 'button' : null"
+      [attr.tabindex]="selectable() && removable() && !disabled() ? '0' : null"
+      [attr.aria-pressed]="selectable() && removable() ? selected() : null">
+      @if (dot()) {
+        <span class="ct-chip__dot" aria-hidden="true"></span>
+      } @else {
+        <span class="ct-chip__avatar">
+          <ng-content select="[chipAvatar]" />
+        </span>
+
+        <span [class]="iconClasses()" aria-hidden="true">
+          <ng-content select="af-icon,[chipIcon]" />
+        </span>
+      }
+
+      <span class="ct-chip__label">
+        <ng-content />
+      </span>
+
+      @if (selectable()) {
+        <span class="ct-chip__check" aria-hidden="true"></span>
+      }
+    </span>
+
+    @if (removable() && !disabled()) {
+      <button
+        type="button"
+        class="ct-chip__remove"
+        [attr.aria-label]="removeAriaLabel()"
+        (click)="handleRemove($event)">
+        <svg
+          viewBox="0 0 24 24"
+          width="16"
+          height="16"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          aria-hidden="true">
+          <line x1="18" y1="6" x2="6" y2="18" />
+          <line x1="6" y1="6" x2="18" y2="18" />
+        </svg>
+      </button>
+    }
+  `, styles: [":host{display:inline-flex;align-items:center}.ct-chip__action{display:contents}.ct-chip__action:focus-visible{outline:none}:host:has(.ct-chip__action:focus-visible){outline:2px solid var(--color-focus-ring, Highlight);outline-offset:2px}.ct-chip__icon:not(:has(*)),.ct-chip__avatar:not(:has(*)){display:none}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], removeAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeAriaLabel", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
+
 /**
  * Chip input component for managing a list of string values.
  *
@@ -8153,5 +8483,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AfAccordionComponent, AfAccordionItemComponent, AfAlertComponent, AfAppShellComponent, AfAppShellPageHeaderComponent, AfAppShellV2Component, AfAppShellV2ToolbarComponent, AfAvatarComponent, AfBadgeComponent, AfBannerComponent, AfBreadcrumbsComponent, AfButtonComponent, AfCardComponent, AfCellDefDirective, AfCheckboxComponent, AfChipInputComponent, AfComboboxComponent, AfDataTableComponent, AfDatepickerComponent, AfDividerComponent, AfDrawerComponent, AfDropdownComponent, AfEmptyStateComponent, AfFieldComponent, AfFileUploadComponent, AfFormatLabelPipe, AfIconComponent, AfInputComponent, AfModalComponent, AfNavItemComponent, AfNavbarComponent, AfPaginationComponent, AfPopoverComponent, AfPopoverTriggerDirective, AfProgressBarComponent, AfRadioComponent, AfRadioGroupComponent, AfSelectComponent, AfSelectMenuComponent, AfSidebarComponent, AfSkeletonComponent, AfSkipLinkComponent, AfSliderComponent, AfSpinnerComponent, AfSwitchComponent, AfTabPanelComponent, AfTableBodyComponent, AfTableCellComponent, AfTableComponent, AfTableHeaderCellComponent, AfTableHeaderComponent, AfTableRowComponent, AfTabsComponent, AfTextareaComponent, AfToastContainerComponent, AfToastService, AfToggleGroupComponent, AfToolbarComponent, AfTooltipDirective };
+export { AfAccordionComponent, AfAccordionItemComponent, AfAlertComponent, AfAppShellComponent, AfAppShellPageHeaderComponent, AfAppShellV2Component, AfAppShellV2ToolbarComponent, AfAvatarComponent, AfBadgeComponent, AfBannerComponent, AfBreadcrumbsComponent, AfButtonComponent, AfCardComponent, AfCellDefDirective, AfCheckboxComponent, AfChipComponent, AfChipInputComponent, AfComboboxComponent, AfDataTableComponent, AfDatepickerComponent, AfDividerComponent, AfDrawerComponent, AfDropdownComponent, AfEmptyStateComponent, AfFieldComponent, AfFileUploadComponent, AfFormatLabelPipe, AfIconComponent, AfInputComponent, AfModalComponent, AfNavItemComponent, AfNavTabsComponent, AfNavbarComponent, AfPaginationComponent, AfPopoverComponent, AfPopoverTriggerDirective, AfProgressBarComponent, AfRadioComponent, AfRadioGroupComponent, AfSelectComponent, AfSelectMenuComponent, AfSidebarComponent, AfSkeletonComponent, AfSkipLinkComponent, AfSliderComponent, AfSpinnerComponent, AfSwitchComponent, AfTabPanelComponent, AfTableBodyComponent, AfTableCellComponent, AfTableComponent, AfTableHeaderCellComponent, AfTableHeaderComponent, AfTableRowComponent, AfTabsComponent, AfTextareaComponent, AfToastContainerComponent, AfToastService, AfToggleGroupComponent, AfToolbarComponent, AfTooltipDirective };
 //# sourceMappingURL=neuravision-ng-construct.mjs.map