@masmarino/gabarit 0.3.0 → 0.4.0

package/package.json

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

package/src/lib/tokens/_utilities.scss

@@ -86,14 +86,26 @@
 }
 
 .gbt-app-shell__link {
+  position: relative;
   display: flex;
   align-items: center;
   gap: 0.625rem;
+  min-width: 0;
   padding: 0.5rem 0.75rem;
   border-radius: var(--site-border-radius-sm);
   color: var(--text-secondary);
   font-size: 0.875rem;
   text-decoration: none;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  > span {
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
 
   &:hover {
     background: var(--bg-hover);
@@ -111,7 +123,46 @@
   }
 }
 
+@media (min-width: 769px) {
+  .gbt-app-shell__nav--collapsed {
+    .gbt-app-shell__link {
+      > span {
+        display: inline-block;
+        width: 0;
+        overflow: hidden;
+        white-space: nowrap;
+        opacity: 0;
+        transition: opacity 0.15s ease, width 0.2s ease;
+      }
+
+      &:hover > span,
+      &:focus-visible > span {
+        position: absolute;
+        left: 100%;
+        top: 50%;
+        transform: translateY(-50%);
+        width: auto;
+        overflow: visible;
+        opacity: 1;
+        margin-left: 0.625rem;
+        padding: 0.375rem 0.625rem;
+        background: var(--bg-principal);
+        border: 1px solid var(--border-color);
+        border-radius: var(--site-border-radius-sm);
+        box-shadow: var(--site-shadow-md);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        > span {
+          transition: none;
+        }
+      }
+    }
+  }
+}
+
 .gbt-container {
+  box-sizing: border-box;
   width: 100%;
   max-width: 1200px;
   margin-inline: auto;
@@ -119,6 +170,7 @@
 }
 
 .gbt-menu__item {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -143,3 +195,39 @@
     outline-offset: -2px;
   }
 }
+
+.gbt-breadcrumb__list {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: 0.875rem;
+}
+
+.gbt-breadcrumb__list > li {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.gbt-breadcrumb__list > li:not(:last-child)::after {
+  content: '/';
+  color: var(--text-secondary);
+}
+
+.gbt-breadcrumb__item {
+  color: var(--text-secondary);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.gbt-breadcrumb__current {
+  color: var(--text-primary);
+  font-weight: 600;
+}

package/types/masmarino-gabarit.d.ts

@@ -2,8 +2,9 @@ import * as _angular_platform_browser from '@angular/platform-browser';
 import * as _angular_core from '@angular/core';
 import { OnDestroy, TemplateRef, ElementRef, InjectionToken, Signal } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
+import { Observable } from 'rxjs';
 
-declare const GABARIT_VERSION = "0.3.0";
+declare const GABARIT_VERSION = "0.4.0";
 
 declare class Icon {
     private readonly sanitizer;
@@ -28,6 +29,11 @@ declare class AppShell {
     skipLabel: _angular_core.InputSignal<string>;
     openMenuLabel: _angular_core.InputSignal<string>;
     closeMenuLabel: _angular_core.InputSignal<string>;
+    collapseLabel: _angular_core.InputSignal<string>;
+    expandLabel: _angular_core.InputSignal<string>;
+    collapsed: _angular_core.InputSignal<boolean>;
+    collapsible: _angular_core.InputSignal<boolean>;
+    collapsedChange: _angular_core.OutputEmitterRef<boolean>;
     private readonly id;
     protected readonly mainId: string;
     protected readonly navId: string;
@@ -37,10 +43,11 @@ declare class AppShell {
     private readonly nav;
     protected toggleMenu(): void;
     protected close(): void;
+    protected toggleCollapsed(): void;
     protected onEscape(): void;
     protected onNavKeydown(event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppShell, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppShell, "gbt-app-shell", never, { "navLabel": { "alias": "navLabel"; "required": true; "isSignal": true; }; "skipLabel": { "alias": "skipLabel"; "required": true; "isSignal": true; }; "openMenuLabel": { "alias": "openMenuLabel"; "required": true; "isSignal": true; }; "closeMenuLabel": { "alias": "closeMenuLabel"; "required": true; "isSignal": true; }; }, {}, never, ["[shell-brand]", "[shell-nav]", "[shell-header]", "*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppShell, "gbt-app-shell", never, { "navLabel": { "alias": "navLabel"; "required": true; "isSignal": true; }; "skipLabel": { "alias": "skipLabel"; "required": true; "isSignal": true; }; "openMenuLabel": { "alias": "openMenuLabel"; "required": true; "isSignal": true; }; "closeMenuLabel": { "alias": "closeMenuLabel"; "required": true; "isSignal": true; }; "collapseLabel": { "alias": "collapseLabel"; "required": false; "isSignal": true; }; "expandLabel": { "alias": "expandLabel"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; }, { "collapsedChange": "collapsedChange"; }, never, ["[shell-brand]", "[shell-nav]", "[shell-header]", "*"], true, never>;
 }
 
 declare class Button {
@@ -765,6 +772,8 @@ declare class Menu {
     private readonly injector;
     label: _angular_core.InputSignal<string>;
     align: _angular_core.InputSignal<"start" | "end">;
+    triggerIcon: _angular_core.InputSignal<string | null>;
+    opened: _angular_core.OutputEmitterRef<void>;
     protected readonly open: _angular_core.WritableSignal<boolean>;
     protected readonly position: _angular_core.WritableSignal<PopupPosition | null>;
     private readonly trigger;
@@ -781,7 +790,33 @@ declare class Menu {
     private focus;
     private focusAfterRender;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Menu, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Menu, "gbt-menu", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Menu, "gbt-menu", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "triggerIcon": { "alias": "triggerIcon"; "required": false; "isSignal": true; }; }, { "opened": "opened"; }, never, ["*"], true, never>;
+}
+
+declare class Breadcrumb {
+    ariaLabel: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Breadcrumb, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Breadcrumb, "gbt-breadcrumb", never, { "ariaLabel": { "alias": "ariaLabel"; "required": true; "isSignal": true; }; }, {}, never, ["[breadcrumb-ancestor]", "*"], true, never>;
+}
+
+declare class ConfirmDangerModal {
+    isOpen: _angular_core.InputSignal<boolean>;
+    heading: _angular_core.InputSignal<string>;
+    message: _angular_core.InputSignal<string>;
+    confirmText: _angular_core.InputSignal<string>;
+    confirmInputLabel: _angular_core.InputSignal<string>;
+    confirmLabel: _angular_core.InputSignal<string>;
+    cancelLabel: _angular_core.InputSignal<string>;
+    closeLabel: _angular_core.InputSignal<string>;
+    confirmed: _angular_core.OutputEmitterRef<void>;
+    closed: _angular_core.OutputEmitterRef<void>;
+    protected readonly typed: _angular_core.WritableSignal<string>;
+    protected readonly canConfirm: _angular_core.Signal<boolean>;
+    constructor();
+    protected confirm(): void;
+    protected cancel(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ConfirmDangerModal, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ConfirmDangerModal, "gbt-confirm-danger-modal", never, { "isOpen": { "alias": "isOpen"; "required": true; "isSignal": true; }; "heading": { "alias": "heading"; "required": true; "isSignal": true; }; "message": { "alias": "message"; "required": true; "isSignal": true; }; "confirmText": { "alias": "confirmText"; "required": true; "isSignal": true; }; "confirmInputLabel": { "alias": "confirmInputLabel"; "required": false; "isSignal": true; }; "confirmLabel": { "alias": "confirmLabel"; "required": false; "isSignal": true; }; "cancelLabel": { "alias": "cancelLabel"; "required": false; "isSignal": true; }; "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; }, { "confirmed": "confirmed"; "closed": "closed"; }, never, never, true, never>;
 }
 
 type ToastVariant = 'success' | 'error' | 'warning' | 'info';
@@ -901,5 +936,62 @@ declare class Textarea implements ControlValueAccessor {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Textarea, "gbt-textarea", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; }, { "committed": "committed"; }, never, never, true, never>;
 }
 
-export { AppShell, BarChart, BarSeries, Button, CHART_CONTEXT, Card, ChartAxis, ChartEmpty, ChartFrame, ChartLegend, ChartTable, ChartTooltip, Checkbox, DimensionCard, FunnelChart, GABARIT_VERSION, GaugeBar, GbtInput, Icon, IconRegistry, LineChart, LineSeries, Menu, Modal, 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 type { AxisSpec, BandScale, ChartBox, ChartInterval, ChartMargin, ChartPoint, ChartReader, ChartSeries, DimensionRow, FunnelStep, LegendEntry, LinearAxisSpec, Point, PointValue, RadioOption, Scale, SearchResultCategory, SelectOption, TableColumn, TimeTicks, TimeUnit, ToastItem, ToastVariant, ToasterPosition, TooltipPoint, TooltipPosition, TooltipRow };
+type AutocompleteSearchFn<T> = (query: string) => Observable<T[]> | Promise<T[]>;
+declare class Autocomplete<T = unknown> implements ControlValueAccessor, OnDestroy {
+    private readonly elementRef;
+    id: _angular_core.InputSignal<string>;
+    label: _angular_core.InputSignal<string>;
+    placeholder: _angular_core.InputSignal<string>;
+    disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    errorMessage: _angular_core.InputSignal<string | null>;
+    search: _angular_core.InputSignal<AutocompleteSearchFn<T>>;
+    displayFn: _angular_core.InputSignal<(item: T) => string>;
+    itemTemplate: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
+    debounceMs: _angular_core.InputSignal<number>;
+    minLength: _angular_core.InputSignal<number>;
+    loadingMessage: _angular_core.InputSignal<string>;
+    noResultsMessage: _angular_core.InputSignal<string>;
+    searchErrorMessage: _angular_core.InputSignal<string>;
+    resultsAnnouncement: _angular_core.InputSignal<(count: number) => string>;
+    itemSelected: _angular_core.OutputEmitterRef<T>;
+    protected readonly query: _angular_core.WritableSignal<string>;
+    protected readonly open: _angular_core.WritableSignal<boolean>;
+    protected readonly results: _angular_core.WritableSignal<T[]>;
+    protected readonly loading: _angular_core.WritableSignal<boolean>;
+    protected readonly searchFailed: _angular_core.WritableSignal<boolean>;
+    protected readonly activeIndex: _angular_core.WritableSignal<number>;
+    protected readonly selectedItem: _angular_core.WritableSignal<T | null>;
+    protected readonly panelStyle: _angular_core.WritableSignal<{
+        top: string;
+        left: string;
+        width: string;
+    } | null>;
+    private readonly formDisabled;
+    protected readonly isDisabled: _angular_core.Signal<boolean>;
+    protected readonly hasNoResults: _angular_core.Signal<boolean>;
+    protected readonly activeOptionId: _angular_core.Signal<string | null>;
+    private onChange;
+    private onTouched;
+    private requestSeq;
+    private debounceHandle?;
+    private subscription?;
+    setDisabledState(isDisabled: boolean): void;
+    writeValue(value: T | null): void;
+    registerOnChange(fn: (value: T | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    protected onInput(event: Event): void;
+    protected onFocus(): void;
+    protected onBlur(): void;
+    private scheduleSearch;
+    private runSearch;
+    protected updatePanelPosition(): void;
+    protected selectOption(item: T): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Autocomplete<any>, never>;
+    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, BarChart, BarSeries, Breadcrumb, Button, CHART_CONTEXT, Card, ChartAxis, ChartEmpty, ChartFrame, ChartLegend, ChartTable, ChartTooltip, Checkbox, ConfirmDangerModal, DimensionCard, FunnelChart, GABARIT_VERSION, GaugeBar, GbtInput, Icon, IconRegistry, LineChart, LineSeries, Menu, Modal, 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 type { AutocompleteSearchFn, AxisSpec, BandScale, ChartBox, ChartInterval, ChartMargin, ChartPoint, ChartReader, ChartSeries, DimensionRow, FunnelStep, LegendEntry, LinearAxisSpec, Point, PointValue, RadioOption, Scale, SearchResultCategory, SelectOption, TableColumn, TimeTicks, TimeUnit, ToastItem, ToastVariant, ToasterPosition, TooltipPoint, TooltipPosition, TooltipRow };