@catarina-ds/angular 0.1.1 → 0.1.3

package/index.d.ts

@@ -1,29 +1,13 @@
 import * as i0 from '@angular/core';
-import { OnDestroy, EventEmitter, ElementRef, QueryList, OnInit, TemplateRef, AfterViewInit, Renderer2, InjectionToken } from '@angular/core';
-import { SafeHtml } from '@angular/platform-browser';
+import { TemplateRef, Type, EventEmitter, ElementRef, QueryList, OnInit, OnDestroy, AfterContentInit, AfterViewChecked, AfterViewInit, Renderer2 } from '@angular/core';
 import * as rxjs from 'rxjs';
-import { Subscription } from 'rxjs';
+import { Subscription, Subject } from 'rxjs';
 import { NgControl, ControlValueAccessor } from '@angular/forms';
 
-declare class Icon implements OnDestroy {
-    private sanitizer;
-    private platformId;
-    private iconProvider;
-    private abortController?;
-    svgContent: i0.WritableSignal<SafeHtml>;
-    isLoading: i0.WritableSignal<boolean>;
-    isVisible: i0.WritableSignal<boolean>;
-    size: string;
-    color: string;
-    ngOnDestroy(): void;
-    set name(iconName: string);
-    set src(path: string);
-    private loadSvg;
-    private isValidSvg;
-    private processSvg;
-    private processSvgWithRegex;
+type IconContent = TemplateRef<unknown> | Type<unknown>;
+declare class Icon {
     static ɵfac: i0.ɵɵFactoryDeclaration<Icon, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<Icon, "cat-icon", never, { "size": { "alias": "size"; "required": false; }; "color": { "alias": "color"; "required": false; }; "name": { "alias": "name"; "required": false; }; "src": { "alias": "src"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Icon, "cat-icon", never, {}, {}, never, ["*"], true, never>;
 }
 
 declare class Button {
@@ -31,13 +15,14 @@ declare class Button {
     size: 'sm' | 'md' | 'lg';
     disabled: boolean;
     type: 'button' | 'submit' | 'reset';
-    iconLeft?: string;
-    iconCenter?: string;
-    iconRight?: string;
+    iconLeft?: IconContent;
+    iconCenter?: IconContent;
+    iconRight?: IconContent;
     customClass: string;
     clicked: EventEmitter<MouseEvent>;
     get buttonClasses(): string;
     get iconSize(): string;
+    isTemplateRef(content: IconContent): content is TemplateRef<unknown>;
     get dataCustomClass(): string;
     handleClick(event: MouseEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<Button, never>;
@@ -65,9 +50,9 @@ declare class Accordion {
     customClass: string;
     buttonVariant: 'primary' | 'secondary' | 'contrast' | 'outline' | 'ghost';
     buttonSize: 'sm' | 'md' | 'lg';
-    iconLeft: boolean;
-    iconCenter: boolean;
-    iconRight: boolean;
+    iconLeft: IconContent | boolean;
+    iconCenter: IconContent | boolean;
+    iconRight: IconContent | boolean;
     scrolleable: boolean;
     variant: 'surface' | 'outlined' | 'elevated';
     updateAccordionGroupStatusOutput: EventEmitter<string>;
@@ -111,10 +96,11 @@ declare class CatInput implements OnInit {
 
 declare class ColorInput implements ControlValueAccessor {
     value: string;
-    icon?: boolean;
+    icon: IconContent | boolean;
     size: string;
     private onChange;
     onTouched: () => void;
+    isTemplateRef(content: IconContent): content is TemplateRef<unknown>;
     onInput(event: Event): void;
     writeValue(value: any): void;
     registerOnChange(fn: any): void;
@@ -157,10 +143,8 @@ declare class Dialog implements OnInit, OnDestroy {
     private viewContainerRef;
     private overlayRef?;
     variant: 'surface' | 'outlined' | 'elevated';
-    size: {
-        width: string;
-        height: string;
-    };
+    width: string;
+    height: string;
     customClass: string;
     closs: EventEmitter<boolean>;
     dialogTemplate: TemplateRef<any>;
@@ -171,7 +155,7 @@ declare class Dialog implements OnInit, OnDestroy {
     ngOnInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<Dialog, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<Dialog, "cat-dialog", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "customClass": { "alias": "customClass"; "required": false; }; }, { "closs": "closs"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Dialog, "cat-dialog", never, { "variant": { "alias": "variant"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "customClass": { "alias": "customClass"; "required": false; }; }, { "closs": "closs"; }, never, ["*"], true, never>;
 }
 
 declare class Drawer implements OnInit, OnDestroy {
@@ -193,26 +177,46 @@ declare class Drawer implements OnInit, OnDestroy {
     static ɵcmp: i0.ɵɵComponentDeclaration<Drawer, "cat-drawer", never, { "side": { "alias": "side"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "customClass": { "alias": "customClass"; "required": false; }; }, { "closs": "closs"; }, never, ["*"], true, never>;
 }
 
-declare class Menu implements AfterViewInit, OnDestroy {
-    menuContainer: ElementRef<HTMLDivElement>;
-    menuContent: ElementRef<HTMLDivElement>;
-    dropdown?: ElementRef<HTMLDivElement>;
-    private platformId;
-    private resizeObserver?;
-    private mutationObserver?;
-    showMoreButton: i0.WritableSignal<boolean>;
-    isDropdownOpen: i0.WritableSignal<boolean>;
-    overflowItems: i0.WritableSignal<HTMLElement[]>;
-    ngAfterViewInit(): void;
-    ngOnDestroy(): void;
-    private setupObservers;
-    private handleOutsideClick;
-    private checkOverflow;
-    private updateDropdownContent;
-    private restoreOverflowItems;
-    toggleDropdown(): void;
+interface MenuDropdownItem {
+    label: any;
+    element: HTMLElement;
+}
+declare class MenuDropdown {
+    items: MenuDropdownItem[];
+    panelContainer: ElementRef<HTMLElement>;
+    activeIndex: number;
+    get isSingle(): boolean;
+    isTemplateRef(value: any): value is TemplateRef<unknown>;
+    setActive(index: number): void;
+    showActivePanel(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MenuDropdown, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MenuDropdown, "cat-menu-dropdown", never, { "items": { "alias": "items"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+declare class MenuPanel {
+    elementRef: ElementRef<HTMLElement>;
+    label: any;
+    constructor(elementRef: ElementRef<HTMLElement>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<MenuPanel, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MenuPanel, "cat-menu-panel", never, { "label": { "alias": "label"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class Menu implements AfterContentInit, AfterViewChecked {
+    panels: QueryList<MenuPanel>;
+    panelsHost: ElementRef<HTMLElement>;
+    dropdownRef?: MenuDropdown;
+    private cdr;
+    isDropdownActive: boolean;
+    isPanelOpen: boolean;
+    private pendingPanelMove;
+    ngAfterContentInit(): void;
+    ngAfterViewChecked(): void;
+    toggleContent(): void;
+    togglePanel(): void;
+    private executePanelMove;
+    private restorePanels;
     static ɵfac: i0.ɵɵFactoryDeclaration<Menu, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<Menu, "cat-menu", never, {}, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Menu, "cat-menu", never, {}, {}, ["panels"], [":not(cat-menu-panel)", "cat-menu-panel"], true, never>;
 }
 
 declare class Drag implements AfterViewInit {
@@ -247,15 +251,40 @@ declare class Theming {
     static ɵprov: i0.ɵɵInjectableDeclaration<Theming>;
 }
 
-interface IconProvider {
-    getPath(name: string): string;
+declare class DynamicBackgroundService {
+    readonly setImages$: Subject<string[]>;
+    readonly setBackgroundImage$: Subject<number>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DynamicBackgroundService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DynamicBackgroundService>;
 }
-declare const ICON_PROVIDER: InjectionToken<IconProvider>;
 
-declare const ICON_BASE_PATH = "safirial-icons";
-declare const iconList: readonly ["academic-cap", "adjustments-horizontal", "adjustments-vertical", "archive-box", "archive-box-arrow-down", "archive-box-x-mark", "arrow-down", "arrow-down-circle", "arrow-down-left", "arrow-down-on-square", "arrow-down-on-square-stack", "arrow-down-right", "arrow-down-tray", "arrow-left", "arrow-left-circle", "arrow-left-end-on-rectangle", "arrow-left-start-on-rectangle", "arrow-long-down", "arrow-long-left", "arrow-long-right", "arrow-long-up", "arrow-path", "arrow-path-rounded-square", "arrow-right", "arrow-right-circle", "arrow-right-end-on-rectangle", "arrow-right-start-on-rectangle", "arrow-top-right-on-square", "arrow-trending-down", "arrow-trending-up", "arrow-turn-down-left", "arrow-turn-down-right", "arrow-turn-left-down", "arrow-turn-left-up", "arrow-turn-right-down", "arrow-turn-right-up", "arrow-turn-up-left", "arrow-turn-up-right", "arrow-up", "arrow-up-circle", "arrow-up-left", "arrow-up-on-square", "arrow-up-on-square-stack", "arrow-up-right", "arrow-up-tray", "arrow-uturn-down", "arrow-uturn-left", "arrow-uturn-right", "arrow-uturn-up", "arrows-pointing-in", "arrows-pointing-out", "arrows-right-left", "arrows-up-down", "at-symbol", "backspace", "backward", "banknotes", "bars-2", "bars-3", "bars-3-bottom-left", "bars-3-bottom-right", "bars-3-center-left", "bars-4", "bars-arrow-down", "bars-arrow-up", "battery-0", "battery-100", "battery-50", "beaker", "bell", "bell-alert", "bell-slash", "bell-snooze", "bold", "bolt", "bolt-slash", "book-open", "bookmark", "bookmark-slash", "bookmark-square", "briefcase", "bug-ant", "building-library", "building-office", "building-office-2", "building-storefront", "cake", "calculator", "calendar", "calendar-date-range", "calendar-days", "camera", "chart-bar", "chart-bar-square", "chart-pie", "chat-bubble-bottom-center", "chat-bubble-bottom-center-text", "chat-bubble-left", "chat-bubble-left-ellipsis", "chat-bubble-left-right", "chat-bubble-oval-left", "chat-bubble-oval-left-ellipsis", "check", "check-badge", "check-circle", "chevron-double-down", "chevron-double-left", "chevron-double-right", "chevron-double-up", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "chevron-up-down", "circle-stack", "clipboard", "clipboard-document", "clipboard-document-check", "clipboard-document-list", "clock", "cloud", "cloud-arrow-down", "cloud-arrow-up", "code-bracket", "code-bracket-square", "cog", "cog-6-tooth", "cog-8-tooth", "command-line", "computer-desktop", "cpu-chip", "credit-card", "cube", "cube-transparent", "currency-bangladeshi", "currency-dollar", "currency-euro", "currency-pound", "currency-rupee", "currency-yen", "cursor-arrow-rays", "cursor-arrow-ripple", "device-phone-mobile", "device-tablet", "divide", "document", "document-arrow-down", "document-arrow-up", "document-chart-bar", "document-check", "document-currency-bangladeshi", "document-currency-dollar", "document-currency-euro", "document-currency-pound", "document-currency-rupee", "document-currency-yen", "document-duplicate", "document-magnifying-glass", "document-minus", "document-plus", "document-text", "ellipsis-horizontal", "ellipsis-horizontal-circle", "ellipsis-vertical", "email", "envelope", "envelope-open", "equals", "exclamation-circle", "exclamation-triangle", "eye", "eye-dropper", "eye-slash", "face-frown", "face-smile", "film", "finger-print", "fire", "flag", "folder", "folder-arrow-down", "folder-minus", "folder-open", "folder-plus", "forward", "funnel", "gif", "gift", "gift-top", "github", "globe-alt", "globe-americas", "globe-asia-australia", "globe-europe-africa", "h1", "h2", "h3", "hand-raised", "hand-thumb-down", "hand-thumb-up", "hashtag", "heart", "home", "home-modern", "identification", "inbox", "inbox-arrow-down", "inbox-stack", "information-circle", "italic", "key", "language", "lifebuoy", "light-bulb", "link", "link-slash", "linkedin", "list-bullet", "lock-closed", "lock-open", "magnifying-glass", "magnifying-glass-circle", "magnifying-glass-minus", "magnifying-glass-plus", "map", "map-pin", "megaphone", "microphone", "minus", "minus-circle", "moon", "musical-note", "newspaper", "no-symbol", "numbered-list", "paint-brush", "palette", "paper-airplane", "paper-clip", "pause", "pause-circle", "pencil", "pencil-square", "percent-badge", "phone", "phone-arrow-down-left", "phone-arrow-up-right", "phone-x-mark", "photo", "play", "play-circle", "play-pause", "plus", "plus-circle", "power", "presentation-chart-bar", "presentation-chart-line", "printer", "puzzle-piece", "qr-code", "question-mark-circle", "queue-list", "radio", "receipt-percent", "receipt-refund", "rectangle-group", "rectangle-stack", "rocket-launch", "rss", "scale", "scissors", "server", "server-stack", "share", "shield-check", "shield-exclamation", "shopping-bag", "shopping-cart", "signal", "signal-slash", "slash", "sparkles", "speaker-wave", "speaker-x-mark", "square-2-stack", "square-3-stack-3d", "squares-2x2", "squares-plus", "star", "stop", "stop-circle", "strikethrough", "sun", "swatch", "table-cells", "tag", "ticket", "trash", "trophy", "truck", "tv", "underline", "user", "user-circle", "user-group", "user-minus", "user-plus", "users", "variable", "video-camera", "video-camera-slash", "view-columns", "viewfinder-circle", "wallet", "wifi", "window", "wrench", "wrench-screwdriver", "x-circle", "x-mark"];
-type IconName = typeof iconList[number];
-declare function getIconPath(name: IconName): string;
+declare class DynamicBackground implements AfterViewInit, OnDestroy {
+    private el;
+    private renderer;
+    private bgService;
+    showControls: i0.InputSignal<boolean>;
+    images: i0.InputSignal<string[] | undefined>;
+    /** Label shown in the navigation controls next to the image counter. */
+    controlsLabel: i0.InputSignal<string>;
+    /** Slideshow interval in milliseconds. 0 = disabled. */
+    slideshowInterval: i0.InputSignal<number>;
+    private backgroundElement?;
+    private resolvedImages;
+    private imageIndex;
+    private slideshowTimer?;
+    private subscriptions;
+    constructor(el: ElementRef, renderer: Renderer2, bgService: DynamicBackgroundService);
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    private applyBackground;
+    private startSlideshow;
+    private stopSlideshow;
+    changeImageIndex(increment: boolean): void;
+    get currentIndex(): number;
+    get totalImages(): number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DynamicBackground, [null, null, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DynamicBackground, "cat-dynamic-background", never, { "showControls": { "alias": "showControls"; "required": false; "isSignal": true; }; "images": { "alias": "images"; "required": false; "isSignal": true; }; "controlsLabel": { "alias": "controlsLabel"; "required": false; "isSignal": true; }; "slideshowInterval": { "alias": "slideshowInterval"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
 
-export { Accordion, AccordionGroup, Button, Card, CatInput, ColorInput, Dialog, Drag, Drawer, ICON_BASE_PATH, ICON_PROVIDER, Icon, Menu, SelectInput, Theming, getIconPath, iconList };
-export type { IconName, IconProvider };
+export { Accordion, AccordionGroup, Button, Card, CatInput, ColorInput, Dialog, Drag, Drawer, DynamicBackground, DynamicBackgroundService, Icon, Menu, MenuDropdown, MenuPanel, SelectInput, Theming };
+export type { IconContent, MenuDropdownItem };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@catarina-ds/angular",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "keywords": [
     "angular",
     "design-system",