@neuravision/ng-construct 0.4.0 → 0.4.2

package/fesm2022/neuravision-ng-construct.mjs

@@ -4039,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.
  *
@@ -8275,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, 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 };
+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