@malva-ui/core 0.1.12

package/esm2022/chip/lib/chip/chip.js

@@ -0,0 +1,140 @@
+import { ChangeDetectionStrategy, Component, computed, contentChild, ElementRef, inject, input, output, ViewEncapsulation, } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { MlvDensityDirective, MLV_DENSITY_ELEMENT, } from '@malva-ui/cdk/density';
+import { LucideX } from '@lucide/angular';
+import { MlvChipAppend, MlvChipPrepend } from './chip.directives';
+import { MLV_CHIP_I18N } from '@malva-ui/i18n';
+import { MlvButtonClose } from '@malva-ui/core/button';
+import * as i0 from "@angular/core";
+import * as i1 from "@malva-ui/cdk/density";
+/**
+ * Chip component for representing filterable tags, selected items, or categorized attributes.
+ * Similar to badge but with richer interactivity: prepend/append slots, closable mode,
+ * floating (elevated) variant, and full density system integration.
+ *
+ * When `animated` is `true`, enter and leave animations (opacity + scale + width) are enabled.
+ * The leave animation completes before `chipClose` emits.
+ *
+ * @example
+ * ```html
+ * <mlv-chip tone="primary">Angular</mlv-chip>
+ * <mlv-chip tone="success" muted closable animated (chipClose)="removeTag('done')">Done</mlv-chip>
+ * <mlv-chip tone="accent" floating>
+ *   <ng-template mlvChipPrepend><svg lucideStar [size]="12" /></ng-template>
+ *   Featured
+ * </mlv-chip>
+ * ```
+ */
+export class MlvChip {
+    /** @protected The component's i18n strings signal. */
+    _i18n = inject(MLV_CHIP_I18N);
+    /**
+     * The semantic tone of the chip.
+     * Determines the background and text colors.
+     * Defaults to `'default'` (neutral).
+     */
+    tone = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    /**
+     * When `true`, uses muted surface/text tokens instead of solid fill colors.
+     * Muted chips are less visually prominent — suited for inline or secondary contexts.
+     * Supports attribute usage: `<mlv-chip muted>`.
+     */
+    muted = input(false, { ...(ngDevMode ? { debugName: "muted" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * When `true`, renders the chip with fully rounded (pill) corners.
+     * Default shape uses `--mlv-radius-l` (slightly rounded).
+     * Supports attribute usage: `<mlv-chip rounded>`.
+     */
+    rounded = input(false, { ...(ngDevMode ? { debugName: "rounded" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * When `true`, renders the chip with an elevated box-shadow, making it appear
+     * to float above the page surface. Equivalent to the button's `elevated` variant.
+     * Supports attribute usage: `<mlv-chip floating>`.
+     */
+    floating = input(false, { ...(ngDevMode ? { debugName: "floating" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * When `true`, renders a close (×) button after all chip content.
+     * Clicking it triggers the leave animation (if `animated`) before emitting `chipClose`.
+     * Supports attribute usage: `<mlv-chip closable>`.
+     */
+    closable = input(false, { ...(ngDevMode ? { debugName: "closable" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Configurable tabindex for the chip host. Defaults to `0` (focusable).
+     * Set to `-1` when the parent (e.g., tokenizer) manages focus via FocusKeyManager.
+     */
+    chipTabIndex = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chipTabIndex" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional override for the close button's `aria-label`. When `null` (default),
+     * the generic i18n "Remove" label (`MLV_CHIP_I18N.remove`) is used. Set this to
+     * a more descriptive value — e.g. `"Remove: Angular"` — so screen-reader users
+     * know which item the close button removes when the same chip is one of many.
+     */
+    closeAriaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeAriaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Emits after the leave animation completes when the user clicks the close button.
+     * Only relevant when `closable` is `true`.
+     */
+    chipClose = output();
+    /**
+     * @protected Resolved accessible name for the close button. Prefers the
+     * explicit {@link closeAriaLabel} override, falling back to the generic
+     * i18n "Remove" string.
+     */
+    _resolvedCloseAriaLabel = computed(() => this.closeAriaLabel() ?? this._i18n().remove, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resolvedCloseAriaLabel" }] : /* istanbul ignore next */ []));
+    /** @protected Template slot rendered before the chip label. */
+    _prependRef = contentChild(MlvChipPrepend, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_prependRef" }] : /* istanbul ignore next */ []));
+    /** @protected Template slot rendered after the chip label (before the close button). */
+    _appendRef = contentChild(MlvChipAppend, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_appendRef" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Handles the close button click. When `animated` is true, sets `_leaving`
+     * to trigger the CSS leave animation and defers `chipClose` until it completes.
+     * When not animated, emits `chipClose` immediately.
+     * Prevents event propagation so the chip's container doesn't receive the click.
+     */
+    _handleClose(event) {
+        event.stopPropagation();
+        this.chipClose.emit();
+    }
+    /**
+     * @protected Handles Backspace/Delete key to remove a closable chip.
+     * Emits `chipClose` and prevents default to avoid browser back navigation.
+     */
+    _handleKeyRemove(event) {
+        event.preventDefault();
+        this.chipClose.emit();
+    }
+    /** @private Host element reference, exposed publicly via the `element` getter. */
+    _elementRef = inject(ElementRef);
+    get element() {
+        return this._elementRef.nativeElement;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvChip, isStandalone: true, selector: "mlv-chip", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, muted: { classPropertyName: "muted", publicName: "muted", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, floating: { classPropertyName: "floating", publicName: "floating", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, chipTabIndex: { classPropertyName: "chipTabIndex", publicName: "chipTabIndex", isSignal: true, isRequired: false, transformFunction: null }, closeAriaLabel: { classPropertyName: "closeAriaLabel", publicName: "closeAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chipClose: "chipClose" }, host: { listeners: { "keydown.backspace": "closable() && _handleKeyRemove($event)", "keydown.delete": "closable() && _handleKeyRemove($event)" }, properties: { "class": "\"mlv-chip--tone-\" + tone()", "class.mlv-chip--muted": "muted()", "class.mlv-chip--rounded": "rounded()", "class.mlv-chip--floating": "floating()", "class.mlv-chip--closable": "closable()", "attr.tabindex": "closable() ? chipTabIndex() : null" }, classAttribute: "mlv-chip" }, providers: [{ provide: MLV_DENSITY_ELEMENT, useValue: 'chip' }], queries: [{ propertyName: "_prependRef", first: true, predicate: MlvChipPrepend, descendants: true, isSignal: true }, { propertyName: "_appendRef", first: true, predicate: MlvChipAppend, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.MlvDensityDirective, inputs: ["mlvDensity", "mlvDensity"] }], ngImport: i0, template: "@if (_prependRef()) {\n<span class=\"mlv-chip__prepend\">\n  <ng-container [ngTemplateOutlet]=\"_prependRef()!.templateRef\" />\n</span>\n}\n<span class=\"mlv-chip__label\"><ng-content /></span>\n@if (_appendRef()) {\n<span class=\"mlv-chip__append\">\n  <ng-container [ngTemplateOutlet]=\"_appendRef()!.templateRef\" />\n</span>\n} @if (closable()) {\n<button\n  class=\"mlv-chip__close\"\n  type=\"button\"\n  [attr.aria-label]=\"_resolvedCloseAriaLabel()\"\n  tabindex=\"-1\"\n  (click)=\"_handleClose($event)\"\n>\n  <svg lucideX [size]=\"12\" />\n</button>\n}\n", styles: [".mlv-chip{--mlv-chip-bg: var(--mlv-background-neutral-1);--mlv-chip-color: var(--mlv-text-primary);--mlv-chip-border: transparent;--mlv-chip-shadow: none;--mlv-chip-font-size: var(--mlv-font-size-m);display:inline-flex;align-items:center;gap:.25rem;padding:var(--mlv-padding-s);font-size:var(--mlv-chip-font-size);border-radius:var(--mlv-radius-l);border:var(--mlv-stroke-width) solid var(--mlv-chip-border);font-family:var(--mlv-font-family-sans, sans-serif);font-weight:500;line-height:1;white-space:nowrap;vertical-align:middle;background-color:var(--mlv-chip-bg);color:var(--mlv-chip-color);box-shadow:var(--mlv-chip-shadow);box-sizing:border-box}[class*=--tight] .mlv-chip:not([class*=--compact],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-chip[class*=--tight]{--mlv-chip-font-size: var(--mlv-font-size-xs);padding:var(--mlv-padding-xs)}[class*=--compact] .mlv-chip:not([class*=--tight],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-chip[class*=--compact]{--mlv-chip-font-size: var(--mlv-font-size-s);padding:var(--mlv-padding-xs)}[class*=--spacious] .mlv-chip:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--airy]),.mlv-chip[class*=--spacious]{--mlv-chip-font-size: var(--mlv-font-size-l);padding:var(--mlv-padding-m)}[class*=--airy] .mlv-chip:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--spacious]),.mlv-chip[class*=--airy]{--mlv-chip-font-size: var(--mlv-font-size-xl);padding:var(--mlv-padding-l)}.mlv-chip{transition:background-color var(--mlv-duration-normal, .2s) var(--mlv-ease-default, ease),box-shadow var(--mlv-duration-normal, .2s) var(--mlv-ease-default, ease)}.mlv-chip--animated{overflow:hidden;max-width:40rem;animation:mlv-chip-enter var(--mlv-duration-normal, .2s) ease-out backwards}.mlv-chip__prepend,.mlv-chip__append{display:inline-flex;align-items:center;flex-shrink:0;color:inherit;font-size:var(--mlv-chip-font-size)}.mlv-chip__prepend svg,.mlv-chip__append svg{width:1.25em;height:1.25em;display:block}.mlv-chip__label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit;line-height:1.2;font-size:var(--mlv-chip-font-size)}.mlv-chip__close{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:none;background:transparent;padding:0;cursor:pointer;color:inherit;opacity:.7;border-radius:50%;transition:opacity var(--mlv-duration-fast, .1s) var(--mlv-ease-default, ease);font-size:var(--mlv-chip-font-size);margin-right:calc(var(--mlv-spacing-1) * -1)}.mlv-chip__close svg{width:1.25em;height:1.25em;display:block}.mlv-chip__close:hover{opacity:1}.mlv-chip__close:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus, currentColor);outline-offset:.0625rem}.mlv-chip--leaving{overflow:hidden;max-width:40rem;animation:mlv-chip-leave var(--mlv-duration-normal, .2s) ease-in forwards;pointer-events:none}.mlv-chip--tone-default{--mlv-chip-bg: var(--mlv-background-neutral-1);--mlv-chip-color: var(--mlv-text-primary)}.mlv-chip--tone-primary{--mlv-chip-bg: var(--mlv-background-accent-1);--mlv-chip-color: var(--mlv-text-primary-on-accent-1)}.mlv-chip--tone-secondary{--mlv-chip-bg: var(--mlv-background-neutral-1);--mlv-chip-color: var(--mlv-text-action)}.mlv-chip--tone-accent{--mlv-chip-bg: var(--mlv-background-accent-2);--mlv-chip-color: var(--mlv-text-primary-on-accent-2)}.mlv-chip--tone-success{--mlv-chip-bg: var(--mlv-palette-success-500);--mlv-chip-color: var(--mlv-text-inverse)}.mlv-chip--tone-info{--mlv-chip-bg: var(--mlv-palette-info-500);--mlv-chip-color: var(--mlv-text-inverse)}.mlv-chip--tone-warning{--mlv-chip-bg: var(--mlv-background-warning-1);--mlv-chip-color: var(--mlv-text-on-warning)}.mlv-chip--tone-danger{--mlv-chip-bg: var(--mlv-background-danger-1);--mlv-chip-color: var(--mlv-text-on-danger)}.mlv-chip--muted.mlv-chip--tone-default{--mlv-chip-bg: var(--mlv-muted-default-bg-2);--mlv-chip-color: var(--mlv-muted-default-text-2);--mlv-chip-border: var(--mlv-muted-default-border-2)}.mlv-chip--muted.mlv-chip--tone-primary{--mlv-chip-bg: var(--mlv-muted-primary-bg-2);--mlv-chip-color: var(--mlv-muted-primary-text-2);--mlv-chip-border: var(--mlv-muted-primary-border-2)}.mlv-chip--muted.mlv-chip--tone-secondary{--mlv-chip-bg: var(--mlv-muted-secondary-bg-2);--mlv-chip-color: var(--mlv-muted-secondary-text-2);--mlv-chip-border: var(--mlv-muted-secondary-border-2)}.mlv-chip--muted.mlv-chip--tone-accent{--mlv-chip-bg: var(--mlv-muted-accent-bg-2);--mlv-chip-color: var(--mlv-muted-accent-text-2);--mlv-chip-border: var(--mlv-muted-accent-border-2)}.mlv-chip--muted.mlv-chip--tone-success{--mlv-chip-bg: var(--mlv-muted-success-bg-2);--mlv-chip-color: var(--mlv-muted-success-text-2);--mlv-chip-border: var(--mlv-muted-success-border-2)}.mlv-chip--muted.mlv-chip--tone-info{--mlv-chip-bg: var(--mlv-muted-info-bg-2);--mlv-chip-color: var(--mlv-muted-info-text-2);--mlv-chip-border: var(--mlv-muted-info-border-2)}.mlv-chip--muted.mlv-chip--tone-warning{--mlv-chip-bg: var(--mlv-muted-warning-bg-2);--mlv-chip-color: var(--mlv-muted-warning-text-2);--mlv-chip-border: var(--mlv-muted-warning-border-2)}.mlv-chip--muted.mlv-chip--tone-danger{--mlv-chip-bg: var(--mlv-muted-danger-bg-2);--mlv-chip-color: var(--mlv-muted-danger-text-2);--mlv-chip-border: var(--mlv-muted-danger-border-2)}.mlv-chip--rounded{border-radius:var(--mlv-radius-full)}.mlv-chip--floating{--mlv-chip-shadow: var(--mlv-shadow-2)}.mlv-chip--floating:hover{--mlv-chip-shadow: var(--mlv-shadow-3)}.mlv-chip--floating:active{--mlv-chip-shadow: var(--mlv-shadow-1)}@keyframes mlv-chip-enter{0%{opacity:0;transform:scale(.85);max-width:0;padding-inline:0}}@keyframes mlv-chip-leave{70%{opacity:0;transform:scale(.85);padding-inline:0}to{max-width:0}}@media(prefers-reduced-motion:reduce){.mlv-chip--animated,.mlv-chip--leaving{animation-duration:.01ms!important}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvChip, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-chip', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, LucideX, MlvButtonClose], providers: [{ provide: MLV_DENSITY_ELEMENT, useValue: 'chip' }], hostDirectives: [
+                        {
+                            directive: MlvDensityDirective,
+                            inputs: ['mlvDensity'],
+                        },
+                    ], host: {
+                        class: 'mlv-chip',
+                        '[class]': '"mlv-chip--tone-" + tone()',
+                        '[class.mlv-chip--muted]': 'muted()',
+                        '[class.mlv-chip--rounded]': 'rounded()',
+                        '[class.mlv-chip--floating]': 'floating()',
+                        '[class.mlv-chip--closable]': 'closable()',
+                        '[attr.tabindex]': 'closable() ? chipTabIndex() : null',
+                        '(keydown.backspace)': 'closable() && _handleKeyRemove($event)',
+                        '(keydown.delete)': 'closable() && _handleKeyRemove($event)',
+                    }, template: "@if (_prependRef()) {\n<span class=\"mlv-chip__prepend\">\n  <ng-container [ngTemplateOutlet]=\"_prependRef()!.templateRef\" />\n</span>\n}\n<span class=\"mlv-chip__label\"><ng-content /></span>\n@if (_appendRef()) {\n<span class=\"mlv-chip__append\">\n  <ng-container [ngTemplateOutlet]=\"_appendRef()!.templateRef\" />\n</span>\n} @if (closable()) {\n<button\n  class=\"mlv-chip__close\"\n  type=\"button\"\n  [attr.aria-label]=\"_resolvedCloseAriaLabel()\"\n  tabindex=\"-1\"\n  (click)=\"_handleClose($event)\"\n>\n  <svg lucideX [size]=\"12\" />\n</button>\n}\n", styles: [".mlv-chip{--mlv-chip-bg: var(--mlv-background-neutral-1);--mlv-chip-color: var(--mlv-text-primary);--mlv-chip-border: transparent;--mlv-chip-shadow: none;--mlv-chip-font-size: var(--mlv-font-size-m);display:inline-flex;align-items:center;gap:.25rem;padding:var(--mlv-padding-s);font-size:var(--mlv-chip-font-size);border-radius:var(--mlv-radius-l);border:var(--mlv-stroke-width) solid var(--mlv-chip-border);font-family:var(--mlv-font-family-sans, sans-serif);font-weight:500;line-height:1;white-space:nowrap;vertical-align:middle;background-color:var(--mlv-chip-bg);color:var(--mlv-chip-color);box-shadow:var(--mlv-chip-shadow);box-sizing:border-box}[class*=--tight] .mlv-chip:not([class*=--compact],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-chip[class*=--tight]{--mlv-chip-font-size: var(--mlv-font-size-xs);padding:var(--mlv-padding-xs)}[class*=--compact] .mlv-chip:not([class*=--tight],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-chip[class*=--compact]{--mlv-chip-font-size: var(--mlv-font-size-s);padding:var(--mlv-padding-xs)}[class*=--spacious] .mlv-chip:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--airy]),.mlv-chip[class*=--spacious]{--mlv-chip-font-size: var(--mlv-font-size-l);padding:var(--mlv-padding-m)}[class*=--airy] .mlv-chip:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--spacious]),.mlv-chip[class*=--airy]{--mlv-chip-font-size: var(--mlv-font-size-xl);padding:var(--mlv-padding-l)}.mlv-chip{transition:background-color var(--mlv-duration-normal, .2s) var(--mlv-ease-default, ease),box-shadow var(--mlv-duration-normal, .2s) var(--mlv-ease-default, ease)}.mlv-chip--animated{overflow:hidden;max-width:40rem;animation:mlv-chip-enter var(--mlv-duration-normal, .2s) ease-out backwards}.mlv-chip__prepend,.mlv-chip__append{display:inline-flex;align-items:center;flex-shrink:0;color:inherit;font-size:var(--mlv-chip-font-size)}.mlv-chip__prepend svg,.mlv-chip__append svg{width:1.25em;height:1.25em;display:block}.mlv-chip__label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit;line-height:1.2;font-size:var(--mlv-chip-font-size)}.mlv-chip__close{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:none;background:transparent;padding:0;cursor:pointer;color:inherit;opacity:.7;border-radius:50%;transition:opacity var(--mlv-duration-fast, .1s) var(--mlv-ease-default, ease);font-size:var(--mlv-chip-font-size);margin-right:calc(var(--mlv-spacing-1) * -1)}.mlv-chip__close svg{width:1.25em;height:1.25em;display:block}.mlv-chip__close:hover{opacity:1}.mlv-chip__close:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus, currentColor);outline-offset:.0625rem}.mlv-chip--leaving{overflow:hidden;max-width:40rem;animation:mlv-chip-leave var(--mlv-duration-normal, .2s) ease-in forwards;pointer-events:none}.mlv-chip--tone-default{--mlv-chip-bg: var(--mlv-background-neutral-1);--mlv-chip-color: var(--mlv-text-primary)}.mlv-chip--tone-primary{--mlv-chip-bg: var(--mlv-background-accent-1);--mlv-chip-color: var(--mlv-text-primary-on-accent-1)}.mlv-chip--tone-secondary{--mlv-chip-bg: var(--mlv-background-neutral-1);--mlv-chip-color: var(--mlv-text-action)}.mlv-chip--tone-accent{--mlv-chip-bg: var(--mlv-background-accent-2);--mlv-chip-color: var(--mlv-text-primary-on-accent-2)}.mlv-chip--tone-success{--mlv-chip-bg: var(--mlv-palette-success-500);--mlv-chip-color: var(--mlv-text-inverse)}.mlv-chip--tone-info{--mlv-chip-bg: var(--mlv-palette-info-500);--mlv-chip-color: var(--mlv-text-inverse)}.mlv-chip--tone-warning{--mlv-chip-bg: var(--mlv-background-warning-1);--mlv-chip-color: var(--mlv-text-on-warning)}.mlv-chip--tone-danger{--mlv-chip-bg: var(--mlv-background-danger-1);--mlv-chip-color: var(--mlv-text-on-danger)}.mlv-chip--muted.mlv-chip--tone-default{--mlv-chip-bg: var(--mlv-muted-default-bg-2);--mlv-chip-color: var(--mlv-muted-default-text-2);--mlv-chip-border: var(--mlv-muted-default-border-2)}.mlv-chip--muted.mlv-chip--tone-primary{--mlv-chip-bg: var(--mlv-muted-primary-bg-2);--mlv-chip-color: var(--mlv-muted-primary-text-2);--mlv-chip-border: var(--mlv-muted-primary-border-2)}.mlv-chip--muted.mlv-chip--tone-secondary{--mlv-chip-bg: var(--mlv-muted-secondary-bg-2);--mlv-chip-color: var(--mlv-muted-secondary-text-2);--mlv-chip-border: var(--mlv-muted-secondary-border-2)}.mlv-chip--muted.mlv-chip--tone-accent{--mlv-chip-bg: var(--mlv-muted-accent-bg-2);--mlv-chip-color: var(--mlv-muted-accent-text-2);--mlv-chip-border: var(--mlv-muted-accent-border-2)}.mlv-chip--muted.mlv-chip--tone-success{--mlv-chip-bg: var(--mlv-muted-success-bg-2);--mlv-chip-color: var(--mlv-muted-success-text-2);--mlv-chip-border: var(--mlv-muted-success-border-2)}.mlv-chip--muted.mlv-chip--tone-info{--mlv-chip-bg: var(--mlv-muted-info-bg-2);--mlv-chip-color: var(--mlv-muted-info-text-2);--mlv-chip-border: var(--mlv-muted-info-border-2)}.mlv-chip--muted.mlv-chip--tone-warning{--mlv-chip-bg: var(--mlv-muted-warning-bg-2);--mlv-chip-color: var(--mlv-muted-warning-text-2);--mlv-chip-border: var(--mlv-muted-warning-border-2)}.mlv-chip--muted.mlv-chip--tone-danger{--mlv-chip-bg: var(--mlv-muted-danger-bg-2);--mlv-chip-color: var(--mlv-muted-danger-text-2);--mlv-chip-border: var(--mlv-muted-danger-border-2)}.mlv-chip--rounded{border-radius:var(--mlv-radius-full)}.mlv-chip--floating{--mlv-chip-shadow: var(--mlv-shadow-2)}.mlv-chip--floating:hover{--mlv-chip-shadow: var(--mlv-shadow-3)}.mlv-chip--floating:active{--mlv-chip-shadow: var(--mlv-shadow-1)}@keyframes mlv-chip-enter{0%{opacity:0;transform:scale(.85);max-width:0;padding-inline:0}}@keyframes mlv-chip-leave{70%{opacity:0;transform:scale(.85);padding-inline:0}to{max-width:0}}@media(prefers-reduced-motion:reduce){.mlv-chip--animated,.mlv-chip--leaving{animation-duration:.01ms!important}}\n"] }]
+        }], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], muted: [{ type: i0.Input, args: [{ isSignal: true, alias: "muted", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], floating: [{ type: i0.Input, args: [{ isSignal: true, alias: "floating", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], chipTabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "chipTabIndex", required: false }] }], closeAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeAriaLabel", required: false }] }], chipClose: [{ type: i0.Output, args: ["chipClose"] }], _prependRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvChipPrepend), { isSignal: true }] }], _appendRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvChipAppend), { isSignal: true }] }] } });
+//# sourceMappingURL=chip.js.map

package/esm2022/chip/lib/chip/chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../../../../../libs/core/chip/src/lib/chip/chip.ts","../../../../../../../libs/core/chip/src/lib/chip/chip.html"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,MAAM,EACN,KAAK,EACL,MAAM,EACN,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAEnD,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EACL,mBAAmB,EACnB,mBAAmB,GACpB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;;;AAcvD;;;;;;;;;;;;;;;;;GAiBG;AA2BH,MAAM,OAAO,OAAO;IAClB,sDAAsD;IACnC,KAAK,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;IAEjD;;;;OAIG;IACM,IAAI,GAAG,KAAK,CAAc,SAAS;6EAAC,CAAC;IAE9C;;;;OAIG;IACM,KAAK,GAAG,KAAK,CAAwB,KAAK,6EACjD,SAAS,EAAE,qBAAqB,GAChC,CAAC;IAEH;;;;OAIG;IACM,OAAO,GAAG,KAAK,CAAwB,KAAK,+EACnD,SAAS,EAAE,qBAAqB,GAChC,CAAC;IAEH;;;;OAIG;IACM,QAAQ,GAAG,KAAK,CAAwB,KAAK,gFACpD,SAAS,EAAE,qBAAqB,GAChC,CAAC;IAEH;;;;OAIG;IACM,QAAQ,GAAG,KAAK,CAAwB,KAAK,gFACpD,SAAS,EAAE,qBAAqB,GAChC,CAAC;IAEH;;;OAGG;IACM,YAAY,GAAG,KAAK,CAAS,CAAC;qFAAC,CAAC;IAEzC;;;;;OAKG;IACM,cAAc,GAAG,KAAK,CAAgB,IAAI;uFAAC,CAAC;IAErD;;;OAGG;IACM,SAAS,GAAG,MAAM,EAAQ,CAAC;IAEpC;;;;OAIG;IACgB,uBAAuB,GAAG,QAAQ,CACnD,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM;gGACnD,CAAC;IAEF,+DAA+D;IAC5C,WAAW,GAAG,YAAY,CAAC,cAAc;oFAAC,CAAC;IAE9D,wFAAwF;IACrE,UAAU,GAAG,YAAY,CAAC,aAAa;mFAAC,CAAC;IAE5D;;;;;OAKG;IACO,YAAY,CAAC,KAAY;QACjC,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;IACxB,CAAC;IAED;;;OAGG;IACO,gBAAgB,CAAC,KAAY;QACrC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;IACxB,CAAC;IAED,kFAAkF;IACjE,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IAElD,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC;IACxC,CAAC;uGA3GU,OAAO;2FAAP,OAAO,q7CAnBP,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,mEAgGjB,cAAc,6FAGf,aAAa,+JChK5D,wjBAqBA,6xLDuCY,gBAAgB,oJAAE,OAAO;;2FAoBxB,OAAO;kBA1BnB,SAAS;+BACE,UAAU,iBAGL,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM,WACtC,CAAC,gBAAgB,EAAE,OAAO,EAAE,cAAc,CAAC,aACzC,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,kBAC/C;wBACd;4BACE,SAAS,EAAE,mBAAmB;4BAC9B,MAAM,EAAE,CAAC,YAAY,CAAC;yBACvB;qBACF,QACK;wBACJ,KAAK,EAAE,UAAU;wBACjB,SAAS,EAAE,4BAA4B;wBACvC,yBAAyB,EAAE,SAAS;wBACpC,2BAA2B,EAAE,WAAW;wBACxC,4BAA4B,EAAE,YAAY;wBAC1C,4BAA4B,EAAE,YAAY;wBAC1C,iBAAiB,EAAE,oCAAoC;wBACvD,qBAAqB,EAAE,wCAAwC;wBAC/D,kBAAkB,EAAE,wCAAwC;qBAC7D;2zBA+E6C,cAAc,4FAGf,aAAa","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChild,\n  ElementRef,\n  inject,\n  input,\n  output,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport type { BooleanInput } from '@angular/cdk/coercion';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport {\n  MlvDensityDirective,\n  MLV_DENSITY_ELEMENT,\n} from '@malva-ui/cdk/density';\nimport type { MlvTone } from '@malva-ui/cdk/utils';\nimport { LucideX } from '@lucide/angular';\nimport { MlvChipAppend, MlvChipPrepend } from './chip.directives';\nimport { MLV_CHIP_I18N } from '@malva-ui/i18n';\nimport { MlvButtonClose } from '@malva-ui/core/button';\n\n/**\n * Available tone variants for the chip component.\n * Extends the shared {@link MlvTone} semantic vocabulary with neutral and\n * brand options, mapping to color tokens in the design system.\n */\nexport type MlvChipTone =\n  | MlvTone\n  | 'default'\n  | 'primary'\n  | 'secondary'\n  | 'accent';\n\n/**\n * Chip component for representing filterable tags, selected items, or categorized attributes.\n * Similar to badge but with richer interactivity: prepend/append slots, closable mode,\n * floating (elevated) variant, and full density system integration.\n *\n * When `animated` is `true`, enter and leave animations (opacity + scale + width) are enabled.\n * The leave animation completes before `chipClose` emits.\n *\n * @example\n * ```html\n * <mlv-chip tone=\"primary\">Angular</mlv-chip>\n * <mlv-chip tone=\"success\" muted closable animated (chipClose)=\"removeTag('done')\">Done</mlv-chip>\n * <mlv-chip tone=\"accent\" floating>\n *   <ng-template mlvChipPrepend><svg lucideStar [size]=\"12\" /></ng-template>\n *   Featured\n * </mlv-chip>\n * ```\n */\n@Component({\n  selector: 'mlv-chip',\n  templateUrl: './chip.html',\n  styleUrl: './chip.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [NgTemplateOutlet, LucideX, MlvButtonClose],\n  providers: [{ provide: MLV_DENSITY_ELEMENT, useValue: 'chip' }],\n  hostDirectives: [\n    {\n      directive: MlvDensityDirective,\n      inputs: ['mlvDensity'],\n    },\n  ],\n  host: {\n    class: 'mlv-chip',\n    '[class]': '\"mlv-chip--tone-\" + tone()',\n    '[class.mlv-chip--muted]': 'muted()',\n    '[class.mlv-chip--rounded]': 'rounded()',\n    '[class.mlv-chip--floating]': 'floating()',\n    '[class.mlv-chip--closable]': 'closable()',\n    '[attr.tabindex]': 'closable() ? chipTabIndex() : null',\n    '(keydown.backspace)': 'closable() && _handleKeyRemove($event)',\n    '(keydown.delete)': 'closable() && _handleKeyRemove($event)',\n  },\n})\nexport class MlvChip {\n  /** @protected The component's i18n strings signal. */\n  protected readonly _i18n = inject(MLV_CHIP_I18N);\n\n  /**\n   * The semantic tone of the chip.\n   * Determines the background and text colors.\n   * Defaults to `'default'` (neutral).\n   */\n  readonly tone = input<MlvChipTone>('default');\n\n  /**\n   * When `true`, uses muted surface/text tokens instead of solid fill colors.\n   * Muted chips are less visually prominent — suited for inline or secondary contexts.\n   * Supports attribute usage: `<mlv-chip muted>`.\n   */\n  readonly muted = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n\n  /**\n   * When `true`, renders the chip with fully rounded (pill) corners.\n   * Default shape uses `--mlv-radius-l` (slightly rounded).\n   * Supports attribute usage: `<mlv-chip rounded>`.\n   */\n  readonly rounded = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n\n  /**\n   * When `true`, renders the chip with an elevated box-shadow, making it appear\n   * to float above the page surface. Equivalent to the button's `elevated` variant.\n   * Supports attribute usage: `<mlv-chip floating>`.\n   */\n  readonly floating = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n\n  /**\n   * When `true`, renders a close (×) button after all chip content.\n   * Clicking it triggers the leave animation (if `animated`) before emitting `chipClose`.\n   * Supports attribute usage: `<mlv-chip closable>`.\n   */\n  readonly closable = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n\n  /**\n   * Configurable tabindex for the chip host. Defaults to `0` (focusable).\n   * Set to `-1` when the parent (e.g., tokenizer) manages focus via FocusKeyManager.\n   */\n  readonly chipTabIndex = input<number>(0);\n\n  /**\n   * Optional override for the close button's `aria-label`. When `null` (default),\n   * the generic i18n \"Remove\" label (`MLV_CHIP_I18N.remove`) is used. Set this to\n   * a more descriptive value — e.g. `\"Remove: Angular\"` — so screen-reader users\n   * know which item the close button removes when the same chip is one of many.\n   */\n  readonly closeAriaLabel = input<string | null>(null);\n\n  /**\n   * Emits after the leave animation completes when the user clicks the close button.\n   * Only relevant when `closable` is `true`.\n   */\n  readonly chipClose = output<void>();\n\n  /**\n   * @protected Resolved accessible name for the close button. Prefers the\n   * explicit {@link closeAriaLabel} override, falling back to the generic\n   * i18n \"Remove\" string.\n   */\n  protected readonly _resolvedCloseAriaLabel = computed(\n    () => this.closeAriaLabel() ?? this._i18n().remove,\n  );\n\n  /** @protected Template slot rendered before the chip label. */\n  protected readonly _prependRef = contentChild(MlvChipPrepend);\n\n  /** @protected Template slot rendered after the chip label (before the close button). */\n  protected readonly _appendRef = contentChild(MlvChipAppend);\n\n  /**\n   * @protected Handles the close button click. When `animated` is true, sets `_leaving`\n   * to trigger the CSS leave animation and defers `chipClose` until it completes.\n   * When not animated, emits `chipClose` immediately.\n   * Prevents event propagation so the chip's container doesn't receive the click.\n   */\n  protected _handleClose(event: Event): void {\n    event.stopPropagation();\n    this.chipClose.emit();\n  }\n\n  /**\n   * @protected Handles Backspace/Delete key to remove a closable chip.\n   * Emits `chipClose` and prevents default to avoid browser back navigation.\n   */\n  protected _handleKeyRemove(event: Event): void {\n    event.preventDefault();\n    this.chipClose.emit();\n  }\n\n  /** @private Host element reference, exposed publicly via the `element` getter. */\n  private readonly _elementRef = inject(ElementRef);\n\n  get element(): HTMLElement {\n    return this._elementRef.nativeElement;\n  }\n}\n","@if (_prependRef()) {\n<span class=\"mlv-chip__prepend\">\n  <ng-container [ngTemplateOutlet]=\"_prependRef()!.templateRef\" />\n</span>\n}\n<span class=\"mlv-chip__label\"><ng-content /></span>\n@if (_appendRef()) {\n<span class=\"mlv-chip__append\">\n  <ng-container [ngTemplateOutlet]=\"_appendRef()!.templateRef\" />\n</span>\n} @if (closable()) {\n<button\n  class=\"mlv-chip__close\"\n  type=\"button\"\n  [attr.aria-label]=\"_resolvedCloseAriaLabel()\"\n  tabindex=\"-1\"\n  (click)=\"_handleClose($event)\"\n>\n  <svg lucideX [size]=\"12\" />\n</button>\n}\n"]}

package/esm2022/chip/malva-ui-core-chip.js

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+//# sourceMappingURL=malva-ui-core-chip.js.map

package/esm2022/chip/malva-ui-core-chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"malva-ui-core-chip.js","sourceRoot":"","sources":["../../../../../libs/core/chip/src/malva-ui-core-chip.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,SAAS,CAAC","sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"]}

package/esm2022/color-picker/index.js

@@ -0,0 +1,4 @@
+export * from './lib/color-picker/color-picker';
+export * from './lib/color-picker-popup/color-picker-popup';
+export * from './lib/color-utils/color-utils';
+//# sourceMappingURL=index.js.map

package/esm2022/color-picker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/core/color-picker/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iCAAiC,CAAC;AAChD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,+BAA+B,CAAC","sourcesContent":["export * from './lib/color-picker/color-picker';\nexport * from './lib/color-picker-popup/color-picker-popup';\nexport * from './lib/color-utils/color-utils';\n"]}