@masmarino/gabarit 0.5.0 → 0.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@masmarino/gabarit",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "description": "Angular design system — UI components and dataviz for self-hosted applications.",
   "license": "MIT",
   "homepage": "https://github.com/Masmarino/Gabarit",

package/types/masmarino-gabarit.d.ts

@@ -4,7 +4,7 @@ import { OnDestroy, TemplateRef, ElementRef, InjectionToken, Signal } from '@ang
 import { ControlValueAccessor, FormControl } from '@angular/forms';
 import { Observable } from 'rxjs';
 
-declare const GABARIT_VERSION = "0.5.0";
+declare const GABARIT_VERSION = "0.6.1";
 
 declare class Icon {
     private readonly sanitizer;
@@ -21,7 +21,7 @@ declare class IconRegistry {
     registerAll(icons: Record<string, string>): void;
     get(name: string): string | null;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<IconRegistry, never>;
-    static ɵprov: _angular_core.ɵɵInjectableDeclaration<IconRegistry>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<any>;
 }
 
 declare class AppShell {
@@ -74,6 +74,17 @@ declare class Badge {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Badge, "gbt-badge", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
+declare class Tag {
+    color: _angular_core.InputSignal<string>;
+    removable: _angular_core.InputSignal<boolean>;
+    removeLabel: _angular_core.InputSignal<string>;
+    removed: _angular_core.OutputEmitterRef<void>;
+    protected readonly textColor: _angular_core.Signal<string>;
+    protected onRemoveClick(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Tag, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Tag, "gbt-tag", never, { "color": { "alias": "color"; "required": true; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "removeLabel": { "alias": "removeLabel"; "required": false; "isSignal": true; }; }, { "removed": "removed"; }, never, ["*"], true, never>;
+}
+
 type EmptyStateIllustration = 'folder' | 'star' | 'checklist' | 'merge' | 'pipeline' | 'tag' | 'book';
 declare class EmptyState {
     illustration: _angular_core.InputSignal<EmptyStateIllustration>;
@@ -87,6 +98,7 @@ interface SelectOption<T = string> {
     value: T;
     label: string;
     icon?: string;
+    color?: string;
 }
 declare class Select<T = string> implements ControlValueAccessor {
     private readonly elementRef;
@@ -95,11 +107,13 @@ declare class Select<T = string> implements ControlValueAccessor {
     size: _angular_core.InputSignal<"md" | "sm">;
     options: _angular_core.InputSignal<SelectOption<T>[]>;
     multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    chips: _angular_core.InputSignalWithTransform<boolean, unknown>;
     placeholder: _angular_core.InputSignal<string>;
     disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     required: _angular_core.InputSignalWithTransform<boolean, unknown>;
     errorMessage: _angular_core.InputSignal<string | null>;
     selectedCountLabel: _angular_core.InputSignal<(count: number) => string>;
+    chipRemoveLabel: _angular_core.InputSignal<(label: string) => string>;
     protected readonly open: _angular_core.WritableSignal<boolean>;
     protected readonly activeIndex: _angular_core.WritableSignal<number>;
     protected readonly selected: _angular_core.WritableSignal<T[]>;
@@ -110,6 +124,7 @@ declare class Select<T = string> implements ControlValueAccessor {
     } | null>;
     private readonly formDisabled;
     protected readonly labelId: _angular_core.Signal<string>;
+    protected readonly chipsId: _angular_core.Signal<string>;
     protected readonly isDisabled: _angular_core.Signal<boolean>;
     private onChange;
     private onTouched;
@@ -119,16 +134,31 @@ declare class Select<T = string> implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     protected readonly selectedOptions: _angular_core.Signal<SelectOption<T>[]>;
     protected readonly triggerLabel: _angular_core.Signal<string>;
+    protected readonly chipsVisible: _angular_core.Signal<boolean>;
+    /**
+     * In chips mode the trigger keeps showing the placeholder, so the selection
+     * is conveyed to assistive technology by describing the trigger with the
+     * chip row itself. The error message keeps its own id in the list.
+     */
+    protected readonly describedBy: _angular_core.Signal<string | null>;
     protected readonly triggerIcon: _angular_core.Signal<string | undefined>;
     protected readonly activeOptionId: _angular_core.Signal<string | null>;
     protected isSelected(value: T): boolean;
     protected toggleOpen(): void;
     protected updatePanelPosition(): void;
+    /**
+     * Removes the chip at `index`. Refuses to mutate anything while the control
+     * is disabled (the remove buttons are not rendered then, but a programmatic
+     * caller must not be able to bypass the disabled state either), and moves
+     * focus off the button it is about to destroy — otherwise focus falls back
+     * to `<body>`.
+     */
+    protected removeChip(value: T, index: number): void;
     protected selectOption(value: T): void;
     protected handleClickOutside(event: MouseEvent): void;
     protected onKeydown(event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Select<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Select<any>, "gbt-select", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "selectedCountLabel": { "alias": "selectedCountLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Select<any>, "gbt-select", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "chips": { "alias": "chips"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "selectedCountLabel": { "alias": "selectedCountLabel"; "required": false; "isSignal": true; }; "chipRemoveLabel": { "alias": "chipRemoveLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 interface ListToolbarSortOption<T extends string = string> {
@@ -160,7 +190,7 @@ declare class Card {
     hoverable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     heading: _angular_core.InputSignal<string>;
     icon: _angular_core.InputSignal<string>;
-    headingLevel: _angular_core.InputSignal<2 | 1 | 6 | 3 | 4 | 5>;
+    headingLevel: _angular_core.InputSignal<2 | 1 | 4 | 6 | 3 | 5>;
     protected readonly cardClass: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Card, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Card, "gbt-card", never, { "hoverable": { "alias": "hoverable"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "headingLevel": { "alias": "headingLevel"; "required": false; "isSignal": true; }; }, {}, never, ["[card-header-actions]", "*"], true, never>;
@@ -217,7 +247,7 @@ declare class Checkbox implements ControlValueAccessor {
 declare class Modal implements OnDestroy {
     isOpen: _angular_core.InputSignal<boolean>;
     heading: _angular_core.InputSignal<string>;
-    headingLevel: _angular_core.InputSignal<2 | 1 | 6 | 3 | 4 | 5>;
+    headingLevel: _angular_core.InputSignal<2 | 1 | 4 | 6 | 3 | 5>;
     closeLabel: _angular_core.InputSignal<string>;
     closed: _angular_core.OutputEmitterRef<void>;
     private readonly dialog;
@@ -422,7 +452,7 @@ declare class ChartFrame {
     private readonly context;
     label: _angular_core.InputSignal<string>;
     heading: _angular_core.InputSignal<string>;
-    headingLevel: _angular_core.InputSignal<2 | 1 | 6 | 3 | 4 | 5>;
+    headingLevel: _angular_core.InputSignal<2 | 1 | 4 | 6 | 3 | 5>;
     headline: _angular_core.InputSignal<string>;
     trend: _angular_core.InputSignal<string>;
     x: _angular_core.InputSignal<AxisSpec>;
@@ -559,7 +589,7 @@ declare class LineChart<X extends number | Date> {
         height: number;
     } | null>;
     heading: _angular_core.InputSignal<string>;
-    headingLevel: _angular_core.InputSignal<2 | 1 | 6 | 3 | 4 | 5>;
+    headingLevel: _angular_core.InputSignal<2 | 1 | 4 | 6 | 3 | 5>;
     headline: _angular_core.InputSignal<string>;
     trend: _angular_core.InputSignal<string>;
     protected readonly activeIndex: _angular_core.WritableSignal<number | null>;
@@ -615,7 +645,7 @@ declare class BarChart {
         height: number;
     } | null>;
     heading: _angular_core.InputSignal<string>;
-    headingLevel: _angular_core.InputSignal<2 | 1 | 6 | 3 | 4 | 5>;
+    headingLevel: _angular_core.InputSignal<2 | 1 | 4 | 6 | 3 | 5>;
     headline: _angular_core.InputSignal<string>;
     trend: _angular_core.InputSignal<string>;
     protected readonly hasData: _angular_core.Signal<boolean>;
@@ -662,7 +692,7 @@ declare class TimelineChart {
         height: number;
     } | null>;
     heading: _angular_core.InputSignal<string>;
-    headingLevel: _angular_core.InputSignal<2 | 1 | 6 | 3 | 4 | 5>;
+    headingLevel: _angular_core.InputSignal<2 | 1 | 4 | 6 | 3 | 5>;
     headline: _angular_core.InputSignal<string>;
     trend: _angular_core.InputSignal<string>;
     protected readonly hasData: _angular_core.Signal<boolean>;
@@ -1068,5 +1098,5 @@ declare class Autocomplete<T = unknown> implements ControlValueAccessor, OnDestr
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Autocomplete<any>, "gbt-autocomplete", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "search": { "alias": "search"; "required": true; "isSignal": true; }; "displayFn": { "alias": "displayFn"; "required": false; "isSignal": true; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; "isSignal": true; }; "debounceMs": { "alias": "debounceMs"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "loadingMessage": { "alias": "loadingMessage"; "required": false; "isSignal": true; }; "noResultsMessage": { "alias": "noResultsMessage"; "required": false; "isSignal": true; }; "searchErrorMessage": { "alias": "searchErrorMessage"; "required": false; "isSignal": true; }; "resultsAnnouncement": { "alias": "resultsAnnouncement"; "required": false; "isSignal": true; }; }, { "itemSelected": "itemSelected"; }, never, never, true, never>;
 }
 
-export { AppShell, Autocomplete, Badge, BarChart, BarSeries, Breadcrumb, Button, CHART_CONTEXT, Card, ChartAxis, ChartEmpty, ChartFrame, ChartLegend, ChartTable, ChartTooltip, Checkbox, ConfirmDangerModal, DimensionCard, EmptyState, FunnelChart, GABARIT_VERSION, GaugeBar, GbtInput, Icon, IconRegistry, LineChart, LineSeries, ListToolbar, Menu, Modal, Pagination, RadioGroup, SearchBar, Select, Sparkline, Switch, Tab, Table, Tabs, Textarea, TimelineChart, TimelineSeries, Toaster, Tooltip, areaPath, bandScale, formatCompact, formatDuration, formatNumber, formatPercent, linePath, linearScale, nearestIndex, niceTicks, niceXDomain, niceYDomain, timeScale, timeTicks };
+export { AppShell, Autocomplete, Badge, BarChart, BarSeries, Breadcrumb, Button, CHART_CONTEXT, Card, ChartAxis, ChartEmpty, ChartFrame, ChartLegend, ChartTable, ChartTooltip, Checkbox, ConfirmDangerModal, DimensionCard, EmptyState, FunnelChart, GABARIT_VERSION, GaugeBar, GbtInput, Icon, IconRegistry, LineChart, LineSeries, ListToolbar, Menu, Modal, Pagination, RadioGroup, SearchBar, Select, Sparkline, Switch, Tab, Table, Tabs, Tag, Textarea, TimelineChart, TimelineSeries, Toaster, Tooltip, areaPath, bandScale, formatCompact, formatDuration, formatNumber, formatPercent, linePath, linearScale, nearestIndex, niceTicks, niceXDomain, niceYDomain, timeScale, timeTicks };
 export type { AutocompleteSearchFn, AxisSpec, BadgeVariant, BandScale, ChartBox, ChartInterval, ChartMargin, ChartPoint, ChartReader, ChartSeries, DimensionRow, EmptyStateIllustration, FunnelStep, LegendEntry, LinearAxisSpec, ListToolbarSortOption, Point, PointValue, RadioOption, Scale, SearchResultCategory, SelectOption, TableColumn, TimeTicks, TimeUnit, ToastItem, ToastVariant, ToasterPosition, TooltipPoint, TooltipPosition, TooltipRow };