@flywheel-io/vision 19.1.0 → 19.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,14 +1,12 @@
1
- import { EventEmitter } from '@angular/core';
2
- import { IconType } from '../icon/icon.types';
3
1
  import * as i0 from "@angular/core";
4
2
  export declare class FwAlertComponent {
5
- description?: string;
6
- icon?: IconType;
7
- severity?: 'info' | 'success' | 'warning' | 'error';
8
- title?: string;
9
- variant?: 'standard' | 'outlined' | 'filled';
10
- showClose?: boolean;
11
- close: EventEmitter<void>;
3
+ description: import("@angular/core").InputSignal<string>;
4
+ icon: import("@angular/core").InputSignal<"filter" | "server" | "search" | "link" | "3d-sphere-rotate-arrows" | "add-circle" | "add-new-create" | "add-row-above" | "add-row-below" | "add-server" | "add-server-databases-endpoint" | "add-user" | "ai" | "apple" | "apply-copy-duplicate" | "archive-documents-box-big" | "arrange-filter-sort" | "arrow" | "arrow-annotate" | "arrow-back" | "arrow-back-collapse" | "arrow-down" | "arrow-forward" | "arrow-forward-collapse" | "arrow-redo" | "arrow-rotate" | "arrow-rotate-restore" | "arrow-undo" | "arrow-up" | "arrow-up-high-priority" | "arrow-up-low-priority" | "barcode-serial" | "barcode-stack-scan" | "bell-notification" | "bezier-curve" | "blocks-code-test-checkmark" | "book-lab-flask" | "bookmark" | "bookmark-plus-add" | "brain" | "brightness-photo-edit" | "browser-internet-web-windows" | "brush-edit-create" | "bucket-paint" | "button-form-element" | "calendar-arrow-left-center" | "calendar-schedule" | "camera-photo-capture" | "cash-banknotes" | "certificate" | "chart-square" | "chart-trend-square" | "chat-messages-bubble" | "check-mark-certificate" | "checklist" | "checklist-tasks-chechmark-square" | "chevron-back" | "chevron-down" | "chevron-forward" | "chevron-input-number" | "chevron-up" | "circle" | "circle-ellipses" | "clap-applause-hands" | "clip-attachment" | "clock-history" | "clock-hour-4" | "clock-loading" | "close" | "close-circled" | "closed-freehand-vector-poly" | "cloud-network-add" | "cloud-storage-checkmark" | "cloud-upload" | "code-block-embed" | "code-text" | "color-design-profile" | "color-ven-design-profile-central" | "column-edit" | "computer-chip" | "contract-vertical" | "contrast-photo-edit" | "conversion-exchange" | "copy-item" | "creative-commons" | "crosshair" | "crown-style-circle" | "cursor-click" | "cursor-select" | "curve-object-secet-cursor" | "data-tree" | "delivery-shipment-packages" | "dna-hospital-medical" | "document-file-add-plus-bottom-left" | "document-file-blank" | "document-file-checkmark-bottom-left" | "document-file-deleted-cross-remove-center-cancel" | "document-file-download" | "document-file-list-protocol" | "document-file-tar" | "document-file-upload-bottom-center" | "document-file-zip" | "document-status-done-checkmark" | "document-visible" | "documents-file" | "documents-file-checkmark" | "documents-file-move-arrow-right" | "documents-files" | "done-check" | "done-check-tracked" | "download" | "download-status" | "drag-drop-indicator" | "draw-rectangle" | "earth-globe-fail" | "edit" | "edit-boxed" | "edit-erase" | "email" | "email-mail-checkmark-group" | "embed-circle" | "exchange" | "expand-pathfinder-dot-square-segmentation" | "facebook" | "file-blank-image-load-mask" | "file-blank-search" | "file-download" | "file-text" | "files" | "files-library" | "files-library-content" | "filter-sort-add" | "filter-sort-check-mark" | "filter-sort-delete" | "flag" | "flip-horizontal" | "flip-vertical" | "floppy-save" | "flywheel-mark-logo" | "flywheel-viewer-mark-logo" | "folder-add" | "folder-blank" | "folder-checked" | "folder-copy-expand-arrow-down" | "folder-copy-expand-arrow-up" | "folder-group" | "folder-move" | "folder-open" | "folder-share" | "form-metadata-element" | "free-rights" | "freehand-vector-poly" | "full-screen-zoom" | "git-add-branch" | "git-branch" | "git-merge" | "git-merge-draft" | "git-pull-request-2" | "github-color-login" | "gitlab" | "graduate-hat" | "grid-dot-square" | "grid-layout" | "grid-layout-9-square" | "hammer-legal-square" | "hammer-screwdriver" | "hand-money-currency" | "header-form-element" | "home-modern-door" | "home-modern-option-lines" | "human-artificial-intelligence" | "icon-placeholder" | "image-photo-copy-left-down" | "image-picture-square" | "information-circle" | "invoice" | "invoice-checkmark-paid" | "italic" | "items-group-elements" | "key" | "keyboard" | "keychain" | "label-tag" | "laptop-health-medical-cross" | "layers" | "layout" | "layout-grid" | "line" | "link-unlink" | "linkedin" | "linux" | "list-paragraph" | "list-paragraph-number" | "list-test-lab-flask" | "livewire-tool" | "loading-status-checkmark" | "lock" | "lock-unlock" | "logout" | "lungs" | "markdown" | "measure-angle" | "measure-ruler-calibration" | "media-library-imports-dowload" | "menu-burger-handle" | "menu-horizontal" | "menu-list-form-square" | "menu-vertical" | "message-chat-add-plus" | "message-chat-info" | "message-chat-question-support" | "message-checkmark-sent" | "message-question-checkmark" | "microphone-mic-rec" | "microphone-mic-rec-circle" | "microphone-mic-recording-circle" | "minus" | "modalities" | "molecule" | "money" | "money-coin" | "money-dollar" | "monitor-computer" | "moon-night-mode" | "mouse-big" | "mouse-scroll" | "move" | "music-play-resume" | "music-stop" | "mute" | "network-storage-alert" | "notebook" | "notebook-add-plus" | "notebook-open" | "notebook-pen-edit" | "notes-pen" | "object-search-zoom-plus" | "open" | "paint-roller" | "pause" | "pen-edit-circle" | "pen-edit-compose-new" | "pencil-edit-create" | "photo-edit-brightness-invert" | "pie-chart" | "pie-graph-chart-sample" | "plus-add-rectangle" | "polygon" | "private-mode-protection-circle" | "protection-target" | "protective-mask" | "question-circle" | "quote" | "radiology-scan" | "radiology-scan-circle" | "reader-studies" | "rotate" | "rotate-arrow-manual" | "rotate-item-left" | "rotate-item-right" | "rotate-refresh" | "ruler" | "ruler-bidirectional" | "scanner" | "search-loop" | "search-user-profile-person" | "search-zoom-minus" | "search-zoom-plus" | "section-form-element" | "send-message-share" | "server-checkmark" | "server-database-endpoint" | "server-databases-checkmark-user" | "server-databases-connect" | "server-databases-download" | "server-databases-key-protection" | "server-databases-minimal-download" | "server-databases-sync" | "server-databases-sync-import" | "server-upload" | "servers-database" | "setting-gear" | "settings-adjust" | "settings-gear" | "settings-gear-square" | "settings-select" | "shapes-objects" | "share" | "shield-protect" | "show-visible" | "smiley-emoji-face" | "speed-dashboard" | "square-fill" | "square-fill-outline" | "square-outline" | "star" | "star-ai-artificial-intelligence" | "stars-light-sparkle" | "stomach" | "stop-minus" | "stretch-vertical" | "substract-group" | "switch" | "target" | "target-space-object-select" | "tasklist-to-do-checkmark" | "technology-cube-3d" | "test-lab-flask" | "text-bold" | "text-cross" | "text-h1" | "text-h2" | "text-input-form" | "text-long" | "text-short-form-element" | "text-underline" | "thumbs-down-dislike" | "thumbs-up-like" | "timer-clock-style" | "trash-bin-warning" | "trash-delete" | "twitter" | "undone-uncheck-untracked" | "unlimited-repeat-subscription-circle" | "upload" | "user" | "user-checked" | "user-delete-cross" | "user-document" | "user-group" | "user-key" | "user-lock" | "user-profile-cards-pool" | "user-profile-group-discovery" | "user-setting-gear" | "video-player-controls" | "visible-eye-hidden" | "volume-full" | "warning" | "warning-circle" | "window-finder-resize-arrow-down" | "window-finder-resize-arrow-up" | "window-resize-left" | "window-resize-right" | "window-zoom-plus-loupe" | "windows" | "workspace-mode" | "youtube" | "zendesk-logo">;
5
+ severity: import("@angular/core").InputSignal<"error" | "info" | "warning" | "success">;
6
+ title: import("@angular/core").InputSignal<string>;
7
+ variant: import("@angular/core").InputSignal<"standard" | "outlined" | "filled">;
8
+ showClose: import("@angular/core").InputSignal<boolean>;
9
+ close: import("@angular/core").OutputEmitterRef<void>;
12
10
  static ɵfac: i0.ɵɵFactoryDeclaration<FwAlertComponent, never>;
13
- static ɵcmp: i0.ɵɵComponentDeclaration<FwAlertComponent, "fw-alert", never, { "description": { "alias": "description"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "severity": { "alias": "severity"; "required": false; }; "title": { "alias": "title"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "showClose": { "alias": "showClose"; "required": false; }; }, { "close": "close"; }, never, ["*", "fw-button"], true, never>;
11
+ static ɵcmp: i0.ɵɵComponentDeclaration<FwAlertComponent, "fw-alert", never, { "description": { "alias": "description"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "severity": { "alias": "severity"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "showClose": { "alias": "showClose"; "required": false; "isSignal": true; }; }, { "close": "close"; }, never, ["*", "fw-button"], true, never>;
14
12
  }
@@ -1,27 +1,26 @@
1
- import { IconType } from '../icon/icon.types';
2
1
  import * as i0 from "@angular/core";
3
2
  type AvatarColorOption = 'primary' | 'secondary' | 'red' | 'light-slate' | 'slate' | 'warning' | 'success';
4
3
  export declare class FwAvatarComponent {
5
- get classes(): string;
6
- color?: AvatarColorOption;
7
- variant?: 'circular' | 'rounded' | 'square';
8
- content?: 'image' | 'icon' | 'initial';
9
- size?: 'small' | 'medium' | 'large' | 'x-large';
10
- initial?: string;
11
- imageUrl?: string;
12
- imageAltText?: string;
13
- icon?: IconType;
14
- bordered: boolean;
15
- get borderClass(): boolean;
16
- selected: import("@angular/core").InputSignal<boolean>;
4
+ bordered: import("@angular/core").InputSignal<boolean>;
5
+ color: import("@angular/core").InputSignal<AvatarColorOption>;
17
6
  colorSeed: import("@angular/core").ModelSignal<string>;
18
- get selectedClassApplied(): boolean;
7
+ content: import("@angular/core").InputSignal<"initial" | "image" | "icon">;
8
+ icon: import("@angular/core").InputSignal<"filter" | "server" | "search" | "link" | "3d-sphere-rotate-arrows" | "add-circle" | "add-new-create" | "add-row-above" | "add-row-below" | "add-server" | "add-server-databases-endpoint" | "add-user" | "ai" | "apple" | "apply-copy-duplicate" | "archive-documents-box-big" | "arrange-filter-sort" | "arrow" | "arrow-annotate" | "arrow-back" | "arrow-back-collapse" | "arrow-down" | "arrow-forward" | "arrow-forward-collapse" | "arrow-redo" | "arrow-rotate" | "arrow-rotate-restore" | "arrow-undo" | "arrow-up" | "arrow-up-high-priority" | "arrow-up-low-priority" | "barcode-serial" | "barcode-stack-scan" | "bell-notification" | "bezier-curve" | "blocks-code-test-checkmark" | "book-lab-flask" | "bookmark" | "bookmark-plus-add" | "brain" | "brightness-photo-edit" | "browser-internet-web-windows" | "brush-edit-create" | "bucket-paint" | "button-form-element" | "calendar-arrow-left-center" | "calendar-schedule" | "camera-photo-capture" | "cash-banknotes" | "certificate" | "chart-square" | "chart-trend-square" | "chat-messages-bubble" | "check-mark-certificate" | "checklist" | "checklist-tasks-chechmark-square" | "chevron-back" | "chevron-down" | "chevron-forward" | "chevron-input-number" | "chevron-up" | "circle" | "circle-ellipses" | "clap-applause-hands" | "clip-attachment" | "clock-history" | "clock-hour-4" | "clock-loading" | "close" | "close-circled" | "closed-freehand-vector-poly" | "cloud-network-add" | "cloud-storage-checkmark" | "cloud-upload" | "code-block-embed" | "code-text" | "color-design-profile" | "color-ven-design-profile-central" | "column-edit" | "computer-chip" | "contract-vertical" | "contrast-photo-edit" | "conversion-exchange" | "copy-item" | "creative-commons" | "crosshair" | "crown-style-circle" | "cursor-click" | "cursor-select" | "curve-object-secet-cursor" | "data-tree" | "delivery-shipment-packages" | "dna-hospital-medical" | "document-file-add-plus-bottom-left" | "document-file-blank" | "document-file-checkmark-bottom-left" | "document-file-deleted-cross-remove-center-cancel" | "document-file-download" | "document-file-list-protocol" | "document-file-tar" | "document-file-upload-bottom-center" | "document-file-zip" | "document-status-done-checkmark" | "document-visible" | "documents-file" | "documents-file-checkmark" | "documents-file-move-arrow-right" | "documents-files" | "done-check" | "done-check-tracked" | "download" | "download-status" | "drag-drop-indicator" | "draw-rectangle" | "earth-globe-fail" | "edit" | "edit-boxed" | "edit-erase" | "email" | "email-mail-checkmark-group" | "embed-circle" | "exchange" | "expand-pathfinder-dot-square-segmentation" | "facebook" | "file-blank-image-load-mask" | "file-blank-search" | "file-download" | "file-text" | "files" | "files-library" | "files-library-content" | "filter-sort-add" | "filter-sort-check-mark" | "filter-sort-delete" | "flag" | "flip-horizontal" | "flip-vertical" | "floppy-save" | "flywheel-mark-logo" | "flywheel-viewer-mark-logo" | "folder-add" | "folder-blank" | "folder-checked" | "folder-copy-expand-arrow-down" | "folder-copy-expand-arrow-up" | "folder-group" | "folder-move" | "folder-open" | "folder-share" | "form-metadata-element" | "free-rights" | "freehand-vector-poly" | "full-screen-zoom" | "git-add-branch" | "git-branch" | "git-merge" | "git-merge-draft" | "git-pull-request-2" | "github-color-login" | "gitlab" | "graduate-hat" | "grid-dot-square" | "grid-layout" | "grid-layout-9-square" | "hammer-legal-square" | "hammer-screwdriver" | "hand-money-currency" | "header-form-element" | "home-modern-door" | "home-modern-option-lines" | "human-artificial-intelligence" | "icon-placeholder" | "image-photo-copy-left-down" | "image-picture-square" | "information-circle" | "invoice" | "invoice-checkmark-paid" | "italic" | "items-group-elements" | "key" | "keyboard" | "keychain" | "label-tag" | "laptop-health-medical-cross" | "layers" | "layout" | "layout-grid" | "line" | "link-unlink" | "linkedin" | "linux" | "list-paragraph" | "list-paragraph-number" | "list-test-lab-flask" | "livewire-tool" | "loading-status-checkmark" | "lock" | "lock-unlock" | "logout" | "lungs" | "markdown" | "measure-angle" | "measure-ruler-calibration" | "media-library-imports-dowload" | "menu-burger-handle" | "menu-horizontal" | "menu-list-form-square" | "menu-vertical" | "message-chat-add-plus" | "message-chat-info" | "message-chat-question-support" | "message-checkmark-sent" | "message-question-checkmark" | "microphone-mic-rec" | "microphone-mic-rec-circle" | "microphone-mic-recording-circle" | "minus" | "modalities" | "molecule" | "money" | "money-coin" | "money-dollar" | "monitor-computer" | "moon-night-mode" | "mouse-big" | "mouse-scroll" | "move" | "music-play-resume" | "music-stop" | "mute" | "network-storage-alert" | "notebook" | "notebook-add-plus" | "notebook-open" | "notebook-pen-edit" | "notes-pen" | "object-search-zoom-plus" | "open" | "paint-roller" | "pause" | "pen-edit-circle" | "pen-edit-compose-new" | "pencil-edit-create" | "photo-edit-brightness-invert" | "pie-chart" | "pie-graph-chart-sample" | "plus-add-rectangle" | "polygon" | "private-mode-protection-circle" | "protection-target" | "protective-mask" | "question-circle" | "quote" | "radiology-scan" | "radiology-scan-circle" | "reader-studies" | "rotate" | "rotate-arrow-manual" | "rotate-item-left" | "rotate-item-right" | "rotate-refresh" | "ruler" | "ruler-bidirectional" | "scanner" | "search-loop" | "search-user-profile-person" | "search-zoom-minus" | "search-zoom-plus" | "section-form-element" | "send-message-share" | "server-checkmark" | "server-database-endpoint" | "server-databases-checkmark-user" | "server-databases-connect" | "server-databases-download" | "server-databases-key-protection" | "server-databases-minimal-download" | "server-databases-sync" | "server-databases-sync-import" | "server-upload" | "servers-database" | "setting-gear" | "settings-adjust" | "settings-gear" | "settings-gear-square" | "settings-select" | "shapes-objects" | "share" | "shield-protect" | "show-visible" | "smiley-emoji-face" | "speed-dashboard" | "square-fill" | "square-fill-outline" | "square-outline" | "star" | "star-ai-artificial-intelligence" | "stars-light-sparkle" | "stomach" | "stop-minus" | "stretch-vertical" | "substract-group" | "switch" | "target" | "target-space-object-select" | "tasklist-to-do-checkmark" | "technology-cube-3d" | "test-lab-flask" | "text-bold" | "text-cross" | "text-h1" | "text-h2" | "text-input-form" | "text-long" | "text-short-form-element" | "text-underline" | "thumbs-down-dislike" | "thumbs-up-like" | "timer-clock-style" | "trash-bin-warning" | "trash-delete" | "twitter" | "undone-uncheck-untracked" | "unlimited-repeat-subscription-circle" | "upload" | "user" | "user-checked" | "user-delete-cross" | "user-document" | "user-group" | "user-key" | "user-lock" | "user-profile-cards-pool" | "user-profile-group-discovery" | "user-setting-gear" | "video-player-controls" | "visible-eye-hidden" | "volume-full" | "warning" | "warning-circle" | "window-finder-resize-arrow-down" | "window-finder-resize-arrow-up" | "window-resize-left" | "window-resize-right" | "window-zoom-plus-loupe" | "windows" | "workspace-mode" | "youtube" | "zendesk-logo">;
9
+ imageAltText: import("@angular/core").InputSignal<string>;
10
+ imageUrl: import("@angular/core").InputSignal<string>;
11
+ initial: import("@angular/core").InputSignal<string>;
12
+ selectable: import("@angular/core").InputSignal<boolean>;
13
+ selected: import("@angular/core").ModelSignal<boolean>;
14
+ size: import("@angular/core").InputSignal<"large" | "medium" | "small" | "x-large">;
15
+ variant: import("@angular/core").InputSignal<"circular" | "rounded" | "square">;
16
+ hostClasses: import("@angular/core").Signal<string>;
17
+ onClick(): void;
19
18
  hasedColor: import("@angular/core").Signal<string>;
20
19
  colorToDisplay: import("@angular/core").Signal<string>;
21
- isImageBroken: boolean;
20
+ isImageBroken: import("@angular/core").WritableSignal<boolean>;
22
21
  loadImage(): void;
23
22
  errorImage(): void;
24
23
  static ɵfac: i0.ɵɵFactoryDeclaration<FwAvatarComponent, never>;
25
- static ɵcmp: i0.ɵɵComponentDeclaration<FwAvatarComponent, "fw-avatar", never, { "color": { "alias": "color"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "content": { "alias": "content"; "required": false; }; "size": { "alias": "size"; "required": false; }; "initial": { "alias": "initial"; "required": false; }; "imageUrl": { "alias": "imageUrl"; "required": false; }; "imageAltText": { "alias": "imageAltText"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "bordered": { "alias": "bordered"; "required": false; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "colorSeed": { "alias": "colorSeed"; "required": false; "isSignal": true; }; }, { "colorSeed": "colorSeedChange"; }, never, never, true, never>;
24
+ static ɵcmp: i0.ɵɵComponentDeclaration<FwAvatarComponent, "fw-avatar", never, { "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "colorSeed": { "alias": "colorSeed"; "required": false; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "imageAltText": { "alias": "imageAltText"; "required": false; "isSignal": true; }; "imageUrl": { "alias": "imageUrl"; "required": false; "isSignal": true; }; "initial": { "alias": "initial"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, { "colorSeed": "colorSeedChange"; "selected": "selectedChange"; }, never, never, true, never>;
26
25
  }
27
26
  export {};
@@ -0,0 +1,12 @@
1
+ import * as i0 from "@angular/core";
2
+ export declare class FwTextComponent {
3
+ variant: import("@angular/core").InputSignal<"body" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p1" | "p2" | "p3" | "p4" | "p5">;
4
+ align?: import("@angular/core").InputSignal<"left" | "right" | "center" | "justify" | "inherit">;
5
+ display?: import("@angular/core").InputSignal<"initial" | "block" | "inline" | "flex" | "grow">;
6
+ color?: import("@angular/core").InputSignal<"muted" | "light" | "contrast" | "base" | "inherit" | "disabled">;
7
+ margin?: import("@angular/core").InputSignal<boolean>;
8
+ overflow?: import("@angular/core").InputSignal<boolean>;
9
+ get classes(): string;
10
+ static ɵfac: i0.ɵɵFactoryDeclaration<FwTextComponent, never>;
11
+ static ɵcmp: i0.ɵɵComponentDeclaration<FwTextComponent, "fw-text", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "display": { "alias": "display"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "margin": { "alias": "margin"; "required": false; "isSignal": true; }; "overflow": { "alias": "overflow"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
12
+ }
@@ -1,7 +1,7 @@
1
1
  import * as i1$5 from '@angular/common';
2
- import { NgClass, NgIf, CommonModule, NgSwitch, NgSwitchCase, NgTemplateOutlet, NgStyle, NgFor, SlicePipe } from '@angular/common';
2
+ import { NgClass, CommonModule, NgIf, NgStyle, NgTemplateOutlet, NgFor, SlicePipe } from '@angular/common';
3
3
  import * as i0 from '@angular/core';
4
- import { HostBinding, Input, ChangeDetectionStrategy, Component, input, EventEmitter, Output, NgModule, model, computed, ViewEncapsulation, HostListener, signal, effect, inject, ElementRef, ViewContainerRef, Directive, contentChildren, viewChild, ChangeDetectorRef, ContentChildren, ViewChild, forwardRef, Optional, Inject, SkipSelf, Injectable, Pipe, ContentChild, DestroyRef, output, Host, ViewChildren, Self, TemplateRef, viewChildren } from '@angular/core';
4
+ import { HostBinding, Input, ChangeDetectionStrategy, Component, input, output, NgModule, model, computed, signal, HostListener, ViewEncapsulation, EventEmitter, Output, effect, inject, ElementRef, ViewContainerRef, Directive, contentChildren, viewChild, ChangeDetectorRef, ContentChildren, ViewChild, forwardRef, Optional, Inject, SkipSelf, Injectable, Pipe, ContentChild, DestroyRef, Host, ViewChildren, Self, TemplateRef, viewChildren } from '@angular/core';
5
5
  import * as i1 from '@angular/platform-browser';
6
6
  import { DomSanitizer } from '@angular/platform-browser';
7
7
  import { BehaviorSubject, debounce, timer, distinctUntilChanged, of, Subscription, min, combineLatest, tap, switchMap, map } from 'rxjs';
@@ -109,37 +109,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
109
109
 
110
110
  class FwAlertComponent {
111
111
  constructor() {
112
- this.severity = 'info';
113
- this.variant = 'standard';
112
+ this.description = input();
113
+ this.icon = input();
114
+ this.severity = input('info');
115
+ this.title = input();
116
+ this.variant = input('standard');
117
+ this.showClose = input();
114
118
  // eslint-disable-next-line @angular-eslint/no-output-native
115
- this.close = new EventEmitter();
119
+ this.close = output();
116
120
  }
117
121
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
118
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: FwAlertComponent, isStandalone: true, selector: "fw-alert", inputs: { description: "description", icon: "icon", severity: "severity", title: "title", variant: "variant", showClose: "showClose" }, outputs: { close: "close" }, ngImport: i0, template: "<div [ngClass]=\"['fw-alert', variant, severity]\">\n <fw-icon *ngIf=\"icon\" class=\"fw-alert-icon\">{{ icon }}</fw-icon>\n <div class=\"fw-alert-text\">\n <h4 *ngIf=\"title\" class=\"vision-h4\">{{ title }}</h4>\n <p *ngIf=\"description\" class=\"vision-p2\">{{ description }}</p>\n <p class=\"vision-p2\">\n <ng-content></ng-content>\n </p>\n </div>\n <div class=\"close-icon\">\n <ng-content select=\"fw-button\"></ng-content>\n <fw-icon-button\n *ngIf=\"showClose\"\n icon=\"close\" size=\"small\"\n [color]=\"variant==='filled'?'overlay':severity\"\n (click)=\"close?close.emit():undefined\">\n </fw-icon-button>\n </div>\n</div>\n", styles: [".fw-alert{border-radius:8px;padding:6px 16px;display:flex;box-sizing:border-box;min-height:48px}.fw-alert .fw-alert-icon{padding:7px 12px 7px 0;align-items:flex-start;font-size:22px}.fw-alert .fw-alert-text{padding:6px 0;flex:1;display:flex;flex-direction:column;justify-items:center}.fw-alert h4{margin:3px 0;color:var(--typography-contrast)}.fw-alert p{margin:3px 0 0;color:inherit;font-size:12px;font-weight:400;line-height:16.8px}.fw-alert .close-icon{display:flex;align-items:flex-start;margin-left:16px;gap:16px;margin-top:4px;height:30px}.fw-alert .close-icon:empty{display:none}.fw-alert.standard.info{color:var(--primary-base);background-color:var(--primary-hover);border:1px solid var(--primary-border)}.fw-alert.standard.info h4{color:var(--primary-base)}.fw-alert.standard.warning{color:var(--orange-base);background-color:var(--orange-hover);border:1px solid var(--orange-border)}.fw-alert.standard.warning h4{color:var(--orange-base)}.fw-alert.standard.success{color:var(--green-base);background-color:var(--green-hover);border:1px solid var(--green-border)}.fw-alert.standard.success h4{color:var(--green-base)}.fw-alert.standard.error{color:var(--red-base);background-color:var(--red-hover);border:1px solid var(--red-border)}.fw-alert.standard.error h4{color:var(--red-base)}.fw-alert.outlined.info{color:var(--primary-base);border:1px solid var(--primary-base)}.fw-alert.outlined.info h4{color:var(--primary-base)}.fw-alert.outlined.warning{color:var(--orange-base);border:1px solid var(--orange-base)}.fw-alert.outlined.warning h4{color:var(--orange-base)}.fw-alert.outlined.success{color:var(--green-base);border:1px solid var(--green-base)}.fw-alert.outlined.success h4{color:var(--green-base)}.fw-alert.outlined.error{color:var(--red-base);border:1px solid var(--red-base)}.fw-alert.outlined.error h4{color:var(--red-base)}.fw-alert.filled.info{color:var(--typography-contrast);background-color:var(--primary-base)}.fw-alert.filled.warning{color:var(--typography-contrast);background-color:var(--orange-base)}.fw-alert.filled.success{color:var(--typography-contrast);background-color:var(--green-base)}.fw-alert.filled.error{color:var(--typography-contrast);background-color:var(--red-base)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwIconButtonComponent, selector: "fw-icon-button", inputs: ["color", "icon", "size", "disabled", "selected", "border"] }] }); }
122
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: FwAlertComponent, isStandalone: true, selector: "fw-alert", inputs: { description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, ngImport: i0, template: "<div [ngClass]=\"['fw-alert', variant(), severity()]\">\n @if (icon()) {\n <fw-icon class=\"fw-alert-icon\">{{ icon() }}</fw-icon>\n }\n <div class=\"fw-alert-text\">\n @if (title()) {\n <h4 class=\"vision-h4\">{{ title() }}</h4>\n }\n @if (description()) {\n <p class=\"vision-p2\">{{ description() }}</p>\n }\n <p class=\"vision-p2\">\n <ng-content></ng-content>\n </p>\n </div>\n <div class=\"close-icon\">\n <ng-content select=\"fw-button\"></ng-content>\n @if (showClose()) {\n <fw-icon-button\n icon=\"close\" size=\"small\"\n [color]=\"variant() === 'filled' ? 'overlay' : severity()\"\n (click)=\"close ? close.emit() : undefined\">\n </fw-icon-button>\n }\n </div>\n</div>\n", styles: [".fw-alert{border-radius:8px;padding:6px 16px;display:flex;box-sizing:border-box;min-height:48px}.fw-alert .fw-alert-icon{padding:7px 12px 7px 0;align-items:flex-start;font-size:22px}.fw-alert .fw-alert-text{padding:6px 0;flex:1;display:flex;flex-direction:column;justify-items:center}.fw-alert h4{margin:3px 0;color:var(--typography-contrast)}.fw-alert p{margin:3px 0 0;color:inherit;font-size:12px;font-weight:400;line-height:16.8px}.fw-alert .close-icon{display:flex;align-items:flex-start;margin-left:16px;gap:16px;margin-top:4px;height:30px}.fw-alert .close-icon:empty{display:none}.fw-alert.standard.info{color:var(--primary-base);background-color:var(--primary-hover);border:1px solid var(--primary-border)}.fw-alert.standard.info h4{color:var(--primary-base)}.fw-alert.standard.warning{color:var(--orange-base);background-color:var(--orange-hover);border:1px solid var(--orange-border)}.fw-alert.standard.warning h4{color:var(--orange-base)}.fw-alert.standard.success{color:var(--green-base);background-color:var(--green-hover);border:1px solid var(--green-border)}.fw-alert.standard.success h4{color:var(--green-base)}.fw-alert.standard.error{color:var(--red-base);background-color:var(--red-hover);border:1px solid var(--red-border)}.fw-alert.standard.error h4{color:var(--red-base)}.fw-alert.outlined.info{color:var(--primary-base);border:1px solid var(--primary-base)}.fw-alert.outlined.info h4{color:var(--primary-base)}.fw-alert.outlined.warning{color:var(--orange-base);border:1px solid var(--orange-base)}.fw-alert.outlined.warning h4{color:var(--orange-base)}.fw-alert.outlined.success{color:var(--green-base);border:1px solid var(--green-base)}.fw-alert.outlined.success h4{color:var(--green-base)}.fw-alert.outlined.error{color:var(--red-base);border:1px solid var(--red-base)}.fw-alert.outlined.error h4{color:var(--red-base)}.fw-alert.filled.info{color:var(--typography-contrast);background-color:var(--primary-base)}.fw-alert.filled.warning{color:var(--typography-contrast);background-color:var(--orange-base)}.fw-alert.filled.success{color:var(--typography-contrast);background-color:var(--green-base)}.fw-alert.filled.error{color:var(--typography-contrast);background-color:var(--red-base)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwIconButtonComponent, selector: "fw-icon-button", inputs: ["color", "icon", "size", "disabled", "selected", "border"] }] }); }
119
123
  }
120
124
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwAlertComponent, decorators: [{
121
125
  type: Component,
122
126
  args: [{ selector: 'fw-alert', imports: [
123
127
  NgClass,
124
- NgIf,
125
128
  FwIconComponent,
126
129
  FwIconButtonComponent,
127
- ], template: "<div [ngClass]=\"['fw-alert', variant, severity]\">\n <fw-icon *ngIf=\"icon\" class=\"fw-alert-icon\">{{ icon }}</fw-icon>\n <div class=\"fw-alert-text\">\n <h4 *ngIf=\"title\" class=\"vision-h4\">{{ title }}</h4>\n <p *ngIf=\"description\" class=\"vision-p2\">{{ description }}</p>\n <p class=\"vision-p2\">\n <ng-content></ng-content>\n </p>\n </div>\n <div class=\"close-icon\">\n <ng-content select=\"fw-button\"></ng-content>\n <fw-icon-button\n *ngIf=\"showClose\"\n icon=\"close\" size=\"small\"\n [color]=\"variant==='filled'?'overlay':severity\"\n (click)=\"close?close.emit():undefined\">\n </fw-icon-button>\n </div>\n</div>\n", styles: [".fw-alert{border-radius:8px;padding:6px 16px;display:flex;box-sizing:border-box;min-height:48px}.fw-alert .fw-alert-icon{padding:7px 12px 7px 0;align-items:flex-start;font-size:22px}.fw-alert .fw-alert-text{padding:6px 0;flex:1;display:flex;flex-direction:column;justify-items:center}.fw-alert h4{margin:3px 0;color:var(--typography-contrast)}.fw-alert p{margin:3px 0 0;color:inherit;font-size:12px;font-weight:400;line-height:16.8px}.fw-alert .close-icon{display:flex;align-items:flex-start;margin-left:16px;gap:16px;margin-top:4px;height:30px}.fw-alert .close-icon:empty{display:none}.fw-alert.standard.info{color:var(--primary-base);background-color:var(--primary-hover);border:1px solid var(--primary-border)}.fw-alert.standard.info h4{color:var(--primary-base)}.fw-alert.standard.warning{color:var(--orange-base);background-color:var(--orange-hover);border:1px solid var(--orange-border)}.fw-alert.standard.warning h4{color:var(--orange-base)}.fw-alert.standard.success{color:var(--green-base);background-color:var(--green-hover);border:1px solid var(--green-border)}.fw-alert.standard.success h4{color:var(--green-base)}.fw-alert.standard.error{color:var(--red-base);background-color:var(--red-hover);border:1px solid var(--red-border)}.fw-alert.standard.error h4{color:var(--red-base)}.fw-alert.outlined.info{color:var(--primary-base);border:1px solid var(--primary-base)}.fw-alert.outlined.info h4{color:var(--primary-base)}.fw-alert.outlined.warning{color:var(--orange-base);border:1px solid var(--orange-base)}.fw-alert.outlined.warning h4{color:var(--orange-base)}.fw-alert.outlined.success{color:var(--green-base);border:1px solid var(--green-base)}.fw-alert.outlined.success h4{color:var(--green-base)}.fw-alert.outlined.error{color:var(--red-base);border:1px solid var(--red-base)}.fw-alert.outlined.error h4{color:var(--red-base)}.fw-alert.filled.info{color:var(--typography-contrast);background-color:var(--primary-base)}.fw-alert.filled.warning{color:var(--typography-contrast);background-color:var(--orange-base)}.fw-alert.filled.success{color:var(--typography-contrast);background-color:var(--green-base)}.fw-alert.filled.error{color:var(--typography-contrast);background-color:var(--red-base)}\n"] }]
128
- }], propDecorators: { description: [{
129
- type: Input
130
- }], icon: [{
131
- type: Input
132
- }], severity: [{
133
- type: Input
134
- }], title: [{
135
- type: Input
136
- }], variant: [{
137
- type: Input
138
- }], showClose: [{
139
- type: Input
140
- }], close: [{
141
- type: Output
142
- }] } });
130
+ ], template: "<div [ngClass]=\"['fw-alert', variant(), severity()]\">\n @if (icon()) {\n <fw-icon class=\"fw-alert-icon\">{{ icon() }}</fw-icon>\n }\n <div class=\"fw-alert-text\">\n @if (title()) {\n <h4 class=\"vision-h4\">{{ title() }}</h4>\n }\n @if (description()) {\n <p class=\"vision-p2\">{{ description() }}</p>\n }\n <p class=\"vision-p2\">\n <ng-content></ng-content>\n </p>\n </div>\n <div class=\"close-icon\">\n <ng-content select=\"fw-button\"></ng-content>\n @if (showClose()) {\n <fw-icon-button\n icon=\"close\" size=\"small\"\n [color]=\"variant() === 'filled' ? 'overlay' : severity()\"\n (click)=\"close ? close.emit() : undefined\">\n </fw-icon-button>\n }\n </div>\n</div>\n", styles: [".fw-alert{border-radius:8px;padding:6px 16px;display:flex;box-sizing:border-box;min-height:48px}.fw-alert .fw-alert-icon{padding:7px 12px 7px 0;align-items:flex-start;font-size:22px}.fw-alert .fw-alert-text{padding:6px 0;flex:1;display:flex;flex-direction:column;justify-items:center}.fw-alert h4{margin:3px 0;color:var(--typography-contrast)}.fw-alert p{margin:3px 0 0;color:inherit;font-size:12px;font-weight:400;line-height:16.8px}.fw-alert .close-icon{display:flex;align-items:flex-start;margin-left:16px;gap:16px;margin-top:4px;height:30px}.fw-alert .close-icon:empty{display:none}.fw-alert.standard.info{color:var(--primary-base);background-color:var(--primary-hover);border:1px solid var(--primary-border)}.fw-alert.standard.info h4{color:var(--primary-base)}.fw-alert.standard.warning{color:var(--orange-base);background-color:var(--orange-hover);border:1px solid var(--orange-border)}.fw-alert.standard.warning h4{color:var(--orange-base)}.fw-alert.standard.success{color:var(--green-base);background-color:var(--green-hover);border:1px solid var(--green-border)}.fw-alert.standard.success h4{color:var(--green-base)}.fw-alert.standard.error{color:var(--red-base);background-color:var(--red-hover);border:1px solid var(--red-border)}.fw-alert.standard.error h4{color:var(--red-base)}.fw-alert.outlined.info{color:var(--primary-base);border:1px solid var(--primary-base)}.fw-alert.outlined.info h4{color:var(--primary-base)}.fw-alert.outlined.warning{color:var(--orange-base);border:1px solid var(--orange-base)}.fw-alert.outlined.warning h4{color:var(--orange-base)}.fw-alert.outlined.success{color:var(--green-base);border:1px solid var(--green-base)}.fw-alert.outlined.success h4{color:var(--green-base)}.fw-alert.outlined.error{color:var(--red-base);border:1px solid var(--red-base)}.fw-alert.outlined.error h4{color:var(--red-base)}.fw-alert.filled.info{color:var(--typography-contrast);background-color:var(--primary-base)}.fw-alert.filled.warning{color:var(--typography-contrast);background-color:var(--orange-base)}.fw-alert.filled.success{color:var(--typography-contrast);background-color:var(--green-base)}.fw-alert.filled.error{color:var(--typography-contrast);background-color:var(--red-base)}\n"] }]
131
+ }] });
143
132
 
144
133
  /**
145
134
  * @deprecated import component directly, intent to remove in v20
@@ -342,76 +331,57 @@ const namedColorMap = {
342
331
  };
343
332
  class FwAvatarComponent {
344
333
  constructor() {
345
- this.color = 'primary';
346
- this.variant = 'circular';
347
- this.content = 'icon';
348
- this.size = 'small';
349
- this.initial = '';
350
- this.imageUrl = '';
351
- this.imageAltText = '';
352
- this.icon = 'user';
353
- this.bordered = false;
354
- this.selected = input(false);
334
+ this.bordered = input(false);
335
+ this.color = input('primary');
355
336
  this.colorSeed = model();
337
+ this.content = input('icon');
338
+ this.icon = input('user');
339
+ this.imageAltText = input('');
340
+ this.imageUrl = input('');
341
+ this.initial = input('');
342
+ this.selectable = input(false);
343
+ this.selected = model(false);
344
+ this.size = input('small');
345
+ this.variant = input('circular');
346
+ this.hostClasses = computed(() => {
347
+ const classes = [
348
+ this.size(),
349
+ this.variant(),
350
+ this.content(),
351
+ this.bordered() ? 'bordered' : null,
352
+ this.selected() ? 'selected' : null,
353
+ this.selectable() ? 'selectable' : null,
354
+ ];
355
+ return classes.filter(Boolean).join(' ');
356
+ });
356
357
  this.hasedColor = computed(() => pickColorViaHash(this.colorSeed()));
357
- this.colorToDisplay = computed(() => this.colorSeed() ? this.hasedColor() : namedColorMap[this.color]);
358
- this.isImageBroken = false;
359
- }
360
- get classes() {
361
- return [this.size, this.variant, this.content, 'selected'].filter(Boolean).join(' ');
362
- }
363
- ;
364
- get borderClass() {
365
- return this.bordered;
358
+ this.colorToDisplay = computed(() => this.colorSeed() ? this.hasedColor() : namedColorMap[this.color()]);
359
+ this.isImageBroken = signal(false);
366
360
  }
367
- get selectedClassApplied() {
368
- return this.selected();
361
+ onClick() {
362
+ if (this.selectable()) {
363
+ this.selected.update(v => !v);
364
+ }
369
365
  }
370
366
  loadImage() {
371
- this.isImageBroken = false;
367
+ this.isImageBroken.set(false);
372
368
  }
373
369
  errorImage() {
374
- this.isImageBroken = true;
370
+ this.isImageBroken.set(true);
375
371
  }
376
372
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
377
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: FwAvatarComponent, isStandalone: true, selector: "fw-avatar", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: false, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, initial: { classPropertyName: "initial", publicName: "initial", isSignal: false, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: false, isRequired: false, transformFunction: null }, imageAltText: { classPropertyName: "imageAltText", publicName: "imageAltText", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, colorSeed: { classPropertyName: "colorSeed", publicName: "colorSeed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorSeed: "colorSeedChange" }, host: { properties: { "attr.class": "this.classes", "class.bordered": "this.borderClass", "class.selected": "this.selectedClassApplied" } }, ngImport: i0, template: "<ng-container [ngSwitch]=\"content\">\n <div [style.backgroundColor]=\"colorToDisplay()\" *ngSwitchCase=\"'image'\" class=\"avatar\">\n <img\n *ngIf=\"!isImageBroken else displayInitial\"\n [src]=\"imageUrl\"\n [alt]=\"imageAltText\"\n (load)=\"loadImage()\"\n (error)=\"errorImage()\">\n </div>\n <div *ngSwitchCase=\"'icon'\" [style.backgroundColor]=\"colorToDisplay()\" class=\"avatar\">\n <ng-container *ngTemplateOutlet=\"displayIcon\"></ng-container>\n </div>\n <div *ngSwitchCase=\"'initial'\" [style.backgroundColor]=\"colorToDisplay()\" class=\"avatar\">\n <ng-container *ngTemplateOutlet=\"displayInitial\"></ng-container>\n </div>\n</ng-container>\n<ng-template #displayInitial>\n <span class=\"initial\" *ngIf=\"initial else displayIcon\">{{ initial }}</span>\n</ng-template>\n<ng-template #displayIcon>\n <fw-icon>{{ icon }}</fw-icon>\n</ng-template>\n", styles: [":host-context(.selected):after{content:\"\";position:absolute;width:calc(100% + 6px);height:calc(100% + 6px);border-radius:inherit;top:-6px;left:-6px;border:3px solid var(--primary-base)}:host.bordered:after{content:\"\";position:absolute;width:100%;height:100%;border-radius:inherit;top:-1px;left:-1px;border:1px solid var(--separations-base)}:host{display:block;position:relative;box-sizing:border-box}:host.selected:after{content:\"\";position:absolute;width:calc(100% + 6px);height:calc(100% + 6px);border-radius:inherit;top:-6px;left:-6px;border:3px solid var(--primary-base)}:host .avatar{display:flex;flex-direction:row;justify-content:center;align-items:center;width:inherit;height:inherit;border-radius:inherit;font-size:inherit;overflow:clip}:host .avatar fw-icon{color:var(--typography-contrast);font-size:inherit}:host .avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}:host .avatar .initial{font-family:Inter,sans-serif;font-style:normal;font-weight:500;color:var(--typography-contrast);font-size:inherit}:host.small{width:16px;height:16px;font-size:8px}:host.small .avatar fw-icon{font-size:12px}:host.medium{width:32px;height:32px;font-size:14px}:host.medium .avatar fw-icon{font-size:24px}:host.large{width:48px;height:48px;font-size:22px}:host.large .avatar fw-icon{font-size:32px}:host.x-large{width:96px;height:96px;font-size:36px}:host.x-large .avatar fw-icon{font-size:64px}:host.rounded.small{border-radius:4px}:host.rounded.medium{border-radius:8px}:host.rounded.large{border-radius:12px}:host.rounded.x-large{border-radius:16px}:host.circular{border-radius:64px}\n"], dependencies: [{ kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] }); }
373
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: FwAvatarComponent, isStandalone: true, selector: "fw-avatar", inputs: { bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, colorSeed: { classPropertyName: "colorSeed", publicName: "colorSeed", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, imageAltText: { classPropertyName: "imageAltText", publicName: "imageAltText", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, initial: { classPropertyName: "initial", publicName: "initial", 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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorSeed: "colorSeedChange", selected: "selectedChange" }, host: { listeners: { "click": "onClick()" }, properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<div class=\"avatar\" [style.background]=\"colorToDisplay()\">\n @switch (content()) {\n @case ('image') {\n @if (!isImageBroken()) {\n <img\n [alt]=\"imageAltText()\"\n [src]=\"imageUrl()\"\n (load)=\"loadImage()\"\n (error)=\"errorImage()\">\n } @else {\n @if (initial()) {\n <span class=\"initial\">{{ initial() }}</span>\n } @else {\n <fw-icon>{{ icon() }}</fw-icon>\n }\n }\n }\n @case ('icon') {\n <fw-icon>{{ icon() }}</fw-icon>\n }\n @case ('initial') {\n @if (initial()) {\n <span class=\"initial\">{{ initial() }}</span>\n } @else {\n <fw-icon>{{ icon() }}</fw-icon>\n }\n }\n }\n</div>\n", styles: [":host:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;pointer-events:none}:host-context(.selected):after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.bordered:after{box-shadow:0 0 0 1px var(--separations-base)}:host{display:block;position:relative;box-sizing:border-box}:host.selectable{cursor:pointer}:host:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.small:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.small.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.medium:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.medium.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.large:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.large.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.x-large:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.x-large.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host .avatar{display:flex;flex-direction:row;justify-content:center;align-items:center;width:inherit;height:inherit;border-radius:inherit;font-size:inherit;overflow:clip}:host .avatar fw-icon{color:var(--typography-contrast);font-size:inherit}:host .avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}:host .avatar .initial{font-family:Inter,sans-serif;font-style:normal;font-weight:500;color:var(--typography-contrast);font-size:inherit}:host.small{width:16px;height:16px;font-size:8px}:host.small .avatar fw-icon{font-size:12px}:host.medium{width:32px;height:32px;font-size:14px}:host.medium .avatar fw-icon{font-size:24px}:host.large{width:48px;height:48px;font-size:22px}:host.large .avatar fw-icon{font-size:32px}:host.x-large{width:96px;height:96px;font-size:36px}:host.x-large .avatar fw-icon{font-size:64px}:host.rounded.small{border-radius:4px}:host.rounded.medium{border-radius:8px}:host.rounded.large{border-radius:12px}:host.rounded.x-large{border-radius:16px}:host.circular{border-radius:64px}\n"], dependencies: [{ kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] }); }
378
374
  }
379
375
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwAvatarComponent, decorators: [{
380
376
  type: Component,
381
377
  args: [{ selector: 'fw-avatar', imports: [
382
- NgSwitch,
383
- NgSwitchCase,
384
- NgIf,
385
- NgTemplateOutlet,
386
378
  FwIconComponent,
387
- ], template: "<ng-container [ngSwitch]=\"content\">\n <div [style.backgroundColor]=\"colorToDisplay()\" *ngSwitchCase=\"'image'\" class=\"avatar\">\n <img\n *ngIf=\"!isImageBroken else displayInitial\"\n [src]=\"imageUrl\"\n [alt]=\"imageAltText\"\n (load)=\"loadImage()\"\n (error)=\"errorImage()\">\n </div>\n <div *ngSwitchCase=\"'icon'\" [style.backgroundColor]=\"colorToDisplay()\" class=\"avatar\">\n <ng-container *ngTemplateOutlet=\"displayIcon\"></ng-container>\n </div>\n <div *ngSwitchCase=\"'initial'\" [style.backgroundColor]=\"colorToDisplay()\" class=\"avatar\">\n <ng-container *ngTemplateOutlet=\"displayInitial\"></ng-container>\n </div>\n</ng-container>\n<ng-template #displayInitial>\n <span class=\"initial\" *ngIf=\"initial else displayIcon\">{{ initial }}</span>\n</ng-template>\n<ng-template #displayIcon>\n <fw-icon>{{ icon }}</fw-icon>\n</ng-template>\n", styles: [":host-context(.selected):after{content:\"\";position:absolute;width:calc(100% + 6px);height:calc(100% + 6px);border-radius:inherit;top:-6px;left:-6px;border:3px solid var(--primary-base)}:host.bordered:after{content:\"\";position:absolute;width:100%;height:100%;border-radius:inherit;top:-1px;left:-1px;border:1px solid var(--separations-base)}:host{display:block;position:relative;box-sizing:border-box}:host.selected:after{content:\"\";position:absolute;width:calc(100% + 6px);height:calc(100% + 6px);border-radius:inherit;top:-6px;left:-6px;border:3px solid var(--primary-base)}:host .avatar{display:flex;flex-direction:row;justify-content:center;align-items:center;width:inherit;height:inherit;border-radius:inherit;font-size:inherit;overflow:clip}:host .avatar fw-icon{color:var(--typography-contrast);font-size:inherit}:host .avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}:host .avatar .initial{font-family:Inter,sans-serif;font-style:normal;font-weight:500;color:var(--typography-contrast);font-size:inherit}:host.small{width:16px;height:16px;font-size:8px}:host.small .avatar fw-icon{font-size:12px}:host.medium{width:32px;height:32px;font-size:14px}:host.medium .avatar fw-icon{font-size:24px}:host.large{width:48px;height:48px;font-size:22px}:host.large .avatar fw-icon{font-size:32px}:host.x-large{width:96px;height:96px;font-size:36px}:host.x-large .avatar fw-icon{font-size:64px}:host.rounded.small{border-radius:4px}:host.rounded.medium{border-radius:8px}:host.rounded.large{border-radius:12px}:host.rounded.x-large{border-radius:16px}:host.circular{border-radius:64px}\n"] }]
388
- }], propDecorators: { classes: [{
389
- type: HostBinding,
390
- args: ['attr.class']
391
- }], color: [{
392
- type: Input
393
- }], variant: [{
394
- type: Input
395
- }], content: [{
396
- type: Input
397
- }], size: [{
398
- type: Input
399
- }], initial: [{
400
- type: Input
401
- }], imageUrl: [{
402
- type: Input
403
- }], imageAltText: [{
404
- type: Input
405
- }], icon: [{
406
- type: Input
407
- }], bordered: [{
408
- type: Input
409
- }], borderClass: [{
410
- type: HostBinding,
411
- args: ['class.bordered']
412
- }], selectedClassApplied: [{
413
- type: HostBinding,
414
- args: ['class.selected']
379
+ ], host: {
380
+ '[class]': 'hostClasses()',
381
+ }, template: "<div class=\"avatar\" [style.background]=\"colorToDisplay()\">\n @switch (content()) {\n @case ('image') {\n @if (!isImageBroken()) {\n <img\n [alt]=\"imageAltText()\"\n [src]=\"imageUrl()\"\n (load)=\"loadImage()\"\n (error)=\"errorImage()\">\n } @else {\n @if (initial()) {\n <span class=\"initial\">{{ initial() }}</span>\n } @else {\n <fw-icon>{{ icon() }}</fw-icon>\n }\n }\n }\n @case ('icon') {\n <fw-icon>{{ icon() }}</fw-icon>\n }\n @case ('initial') {\n @if (initial()) {\n <span class=\"initial\">{{ initial() }}</span>\n } @else {\n <fw-icon>{{ icon() }}</fw-icon>\n }\n }\n }\n</div>\n", styles: [":host:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;pointer-events:none}:host-context(.selected):after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.bordered:after{box-shadow:0 0 0 1px var(--separations-base)}:host{display:block;position:relative;box-sizing:border-box}:host.selectable{cursor:pointer}:host:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.small:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.small.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.medium:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.medium.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.large:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.large.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host.rounded.x-large:not(.selected).selectable:hover:after{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--primary-border)}:host.rounded.x-large.selected:after{box-shadow:0 0 0 .05rem #fff,0 0 0 .15rem var(--primary-base)}:host .avatar{display:flex;flex-direction:row;justify-content:center;align-items:center;width:inherit;height:inherit;border-radius:inherit;font-size:inherit;overflow:clip}:host .avatar fw-icon{color:var(--typography-contrast);font-size:inherit}:host .avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}:host .avatar .initial{font-family:Inter,sans-serif;font-style:normal;font-weight:500;color:var(--typography-contrast);font-size:inherit}:host.small{width:16px;height:16px;font-size:8px}:host.small .avatar fw-icon{font-size:12px}:host.medium{width:32px;height:32px;font-size:14px}:host.medium .avatar fw-icon{font-size:24px}:host.large{width:48px;height:48px;font-size:22px}:host.large .avatar fw-icon{font-size:32px}:host.x-large{width:96px;height:96px;font-size:36px}:host.x-large .avatar fw-icon{font-size:64px}:host.rounded.small{border-radius:4px}:host.rounded.medium{border-radius:8px}:host.rounded.large{border-radius:12px}:host.rounded.x-large{border-radius:16px}:host.circular{border-radius:64px}\n"] }]
382
+ }], propDecorators: { onClick: [{
383
+ type: HostListener,
384
+ args: ['click']
415
385
  }] } });
416
386
 
417
387
  /**
@@ -1302,8 +1272,8 @@ class FwAvatarListComponent {
1302
1272
  this.changeDetector = inject(ChangeDetectorRef);
1303
1273
  this.resizeDebounceMs = input(100);
1304
1274
  this.applyBorderToChildAvatars = effect(() => {
1305
- this.avatars().forEach(avatar => {
1306
- avatar.bordered = true;
1275
+ this.avatarElementRefs().forEach(ref => {
1276
+ ref.nativeElement.setAttribute('bordered', 'true');
1307
1277
  });
1308
1278
  });
1309
1279
  this.childrenChanged = effect(() => {
@@ -5148,11 +5118,11 @@ class FwMenuItemGroupComponent {
5148
5118
  this.disabled = false;
5149
5119
  }
5150
5120
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwMenuItemGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
5151
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: FwMenuItemGroupComponent, isStandalone: true, selector: "fw-menu-item-group", inputs: { role: "role", title: "title", icon: "icon", iconColor: "iconColor", disabled: "disabled" }, host: { properties: { "role": "this.role" } }, ngImport: i0, template: "<div class=\"menu-item-group\">\n <label *ngIf=\"title\">\n <fw-icon [color]=\"iconColor\" *ngIf=\"icon\" class=\"menu-icon {{iconColor}}\">{{ icon }}</fw-icon>\n <span>{{ title }}</span>\n </label>\n <div class=\"menu-item-group-items\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4,:host .menu-item-group label{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-h6{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:10px;line-height:120%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p5{font-size:8px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-link{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link:hover{text-decoration:none}.vision-link:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link:visited{color:var(--secondary-base)}.vision-link-inherited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-inherited:hover{text-decoration:none}.vision-link-inherited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-inherited:visited{color:var(--secondary-base)}.vision-link-inherited,.vision-link-inherited:visited{color:inherit}.vision-link-no-visited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-no-visited:hover{text-decoration:none}.vision-link-no-visited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-no-visited:visited{color:var(--secondary-base)}.vision-link-no-visited:visited{color:var(--primary-base)}:host .menu-item-group{box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;flex:1;gap:8px;padding:8px;margin:1px 4px;color:var(--typography-base);width:stretch}:host .menu-item-group label{display:flex;align-items:center;gap:8px}:host .menu-item-group label .menu-icon{font-size:18px;white-space:nowrap}:host .menu-item-group .menu-item-group-items{width:stretch}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] }); }
5121
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: FwMenuItemGroupComponent, isStandalone: true, selector: "fw-menu-item-group", inputs: { role: "role", title: "title", icon: "icon", iconColor: "iconColor", disabled: "disabled" }, host: { properties: { "role": "this.role" } }, ngImport: i0, template: "<div class=\"menu-item-group\">\n <label *ngIf=\"title\">\n <fw-icon [color]=\"iconColor\" *ngIf=\"icon\" class=\"menu-icon {{iconColor}}\">{{ icon }}</fw-icon>\n <span>{{ title }}</span>\n </label>\n <div class=\"menu-item-group-items\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4,:host .menu-item-group label{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-h6{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:10px;line-height:120%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p5{font-size:8px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-link{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link:hover{text-decoration:none}.vision-link:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link:visited{color:var(--secondary-base)}.vision-link-inherited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-inherited:hover{text-decoration:none}.vision-link-inherited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-inherited:visited{color:var(--secondary-base)}.vision-link-inherited,.vision-link-inherited:visited{color:inherit}.vision-link-no-visited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-no-visited:hover{text-decoration:none}.vision-link-no-visited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-no-visited:visited{color:var(--secondary-base)}.vision-link-no-visited:visited{color:var(--primary-base)}:host .menu-item-group{box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;flex:1;gap:8px;padding:8px;margin:1px 4px;color:var(--typography-base);width:stretch}:host .menu-item-group label{display:flex;align-items:center;gap:8px}:host .menu-item-group label .menu-icon{font-size:18px;white-space:nowrap}:host .menu-item-group .menu-item-group-items{width:stretch}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] }); }
5152
5122
  }
5153
5123
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwMenuItemGroupComponent, decorators: [{
5154
5124
  type: Component,
5155
- args: [{ selector: 'fw-menu-item-group', imports: [NgIf, FwIconComponent], template: "<div class=\"menu-item-group\">\n <label *ngIf=\"title\">\n <fw-icon [color]=\"iconColor\" *ngIf=\"icon\" class=\"menu-icon {{iconColor}}\">{{ icon }}</fw-icon>\n <span>{{ title }}</span>\n </label>\n <div class=\"menu-item-group-items\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4,:host .menu-item-group label{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-h6{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:10px;line-height:120%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p5{font-size:8px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-link{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link:hover{text-decoration:none}.vision-link:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link:visited{color:var(--secondary-base)}.vision-link-inherited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-inherited:hover{text-decoration:none}.vision-link-inherited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-inherited:visited{color:var(--secondary-base)}.vision-link-inherited,.vision-link-inherited:visited{color:inherit}.vision-link-no-visited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-no-visited:hover{text-decoration:none}.vision-link-no-visited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-no-visited:visited{color:var(--secondary-base)}.vision-link-no-visited:visited{color:var(--primary-base)}:host .menu-item-group{box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;flex:1;gap:8px;padding:8px;margin:1px 4px;color:var(--typography-base);width:stretch}:host .menu-item-group label{display:flex;align-items:center;gap:8px}:host .menu-item-group label .menu-icon{font-size:18px;white-space:nowrap}:host .menu-item-group .menu-item-group-items{width:stretch}\n"] }]
5125
+ args: [{ selector: 'fw-menu-item-group', imports: [NgIf, FwIconComponent], template: "<div class=\"menu-item-group\">\n <label *ngIf=\"title\">\n <fw-icon [color]=\"iconColor\" *ngIf=\"icon\" class=\"menu-icon {{iconColor}}\">{{ icon }}</fw-icon>\n <span>{{ title }}</span>\n </label>\n <div class=\"menu-item-group-items\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700\";.vision-h1{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:22px}.vision-h2{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:18px}.vision-h3{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:16px}.vision-h4,:host .menu-item-group label{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:14px}.vision-h5{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:12px;line-height:130%}.vision-h6{font-family:Inter,sans-serif;color:var(--typography-base);font-weight:500;font-size:10px;line-height:120%}.vision-p1{font-size:18px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p2{font-size:14px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p3{font-size:12px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p4{font-size:10px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-p5{font-size:8px;font-family:Inter,sans-serif;color:var(--typography-base);font-weight:400}.vision-link{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link:hover{text-decoration:none}.vision-link:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link:visited{color:var(--secondary-base)}.vision-link-inherited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-inherited:hover{text-decoration:none}.vision-link-inherited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-inherited:visited{color:var(--secondary-base)}.vision-link-inherited,.vision-link-inherited:visited{color:inherit}.vision-link-no-visited{text-decoration:underline;color:var(--primary-base);cursor:pointer}.vision-link-no-visited:hover{text-decoration:none}.vision-link-no-visited:active{text-decoration:none;outline:2px solid var(--primary-dark);border-radius:4px}.vision-link-no-visited:visited{color:var(--secondary-base)}.vision-link-no-visited:visited{color:var(--primary-base)}:host .menu-item-group{box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;flex:1;gap:8px;padding:8px;margin:1px 4px;color:var(--typography-base);width:stretch}:host .menu-item-group label{display:flex;align-items:center;gap:8px}:host .menu-item-group label .menu-icon{font-size:18px;white-space:nowrap}:host .menu-item-group .menu-item-group-items{width:stretch}\n"] }]
5156
5126
  }], propDecorators: { role: [{
5157
5127
  type: HostBinding,
5158
5128
  args: ['role']
@@ -8897,6 +8867,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
8897
8867
  }]
8898
8868
  }] });
8899
8869
 
8870
+ class FwTextComponent {
8871
+ constructor() {
8872
+ this.variant = input('body');
8873
+ this.align = input('inherit');
8874
+ this.display = input('block');
8875
+ this.color = input();
8876
+ this.margin = input(false);
8877
+ this.overflow = input(true);
8878
+ }
8879
+ get classes() {
8880
+ const classes = ['fw-text', `text-${this.variant()}`];
8881
+ classes.push(`vision-${this.variant()}`);
8882
+ classes.push(`text-align-${this.align()}`);
8883
+ classes.push(`text-display-${this.display()}`);
8884
+ if (this.color()) {
8885
+ classes.push(`text-color-${this.color()}`);
8886
+ }
8887
+ if (this.margin()) {
8888
+ classes.push('text-margin');
8889
+ }
8890
+ if (!this.overflow()) {
8891
+ classes.push('text-no-overflow');
8892
+ }
8893
+ return classes.join(' ');
8894
+ }
8895
+ ;
8896
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
8897
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: FwTextComponent, isStandalone: true, selector: "fw-text", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, overflow: { classPropertyName: "overflow", publicName: "overflow", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{font-family:Inter,sans-serif;text-align:inherit;line-height:normal;display:block;color:var(--typography-base)}:host.text-p1,:host.text-p2,:host.text-p3,:host.text-p4,:host.text-p5,:host.text-body{color:var(--typography-muted);line-height:140%}:host.text-p4,:host.text-p5{line-height:130%}:host.text-body{font-size:14px}:host.text-align-left{text-align:left}:host.text-align-center{text-align:center}:host.text-align-right{text-align:right}:host.text-align-justify{text-align:justify}:host.text-color-base{color:var(--typography-base)}:host.text-color-muted{color:var(--typography-muted)}:host.text-color-light{color:var(--typography-light)}:host.text-color-contrast{color:var(--typography-contrast)}:host.text-color-disabled{color:var(--typography-disabled)}:host.text-display-initial{display:initial}:host.text-display-block{display:block}:host.text-display-flex{display:flex}:host.text-display-inline{display:inline}:host.text-display-grow{flex-grow:1}:host.text-margin{margin-top:4px;margin-bottom:8px}:host.text-no-overflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
8898
+ }
8899
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwTextComponent, decorators: [{
8900
+ type: Component,
8901
+ args: [{ selector: 'fw-text', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], styles: [":host{font-family:Inter,sans-serif;text-align:inherit;line-height:normal;display:block;color:var(--typography-base)}:host.text-p1,:host.text-p2,:host.text-p3,:host.text-p4,:host.text-p5,:host.text-body{color:var(--typography-muted);line-height:140%}:host.text-p4,:host.text-p5{line-height:130%}:host.text-body{font-size:14px}:host.text-align-left{text-align:left}:host.text-align-center{text-align:center}:host.text-align-right{text-align:right}:host.text-align-justify{text-align:justify}:host.text-color-base{color:var(--typography-base)}:host.text-color-muted{color:var(--typography-muted)}:host.text-color-light{color:var(--typography-light)}:host.text-color-contrast{color:var(--typography-contrast)}:host.text-color-disabled{color:var(--typography-disabled)}:host.text-display-initial{display:initial}:host.text-display-block{display:block}:host.text-display-flex{display:flex}:host.text-display-inline{display:inline}:host.text-display-grow{flex-grow:1}:host.text-margin{margin-top:4px;margin-bottom:8px}:host.text-no-overflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}\n"] }]
8902
+ }], propDecorators: { classes: [{
8903
+ type: HostBinding,
8904
+ args: ['attr.class']
8905
+ }] } });
8906
+
8900
8907
  class FwTextAreaInputComponent {
8901
8908
  constructor() {
8902
8909
  this.minRows = 2;
@@ -9413,5 +9420,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
9413
9420
  * Generated bundle index. Do not edit.
9414
9421
  */
9415
9422
 
9416
- export { DialogWidth, FwAlertComponent, FwAlertModule, FwAppIconComponent, FwAppIconModule, FwAvatarComponent, FwAvatarListComponent, FwAvatarModule, FwBackButtonComponent, FwBadgeComponent, FwBadgeModule, FwBreadcrumbsComponent, FwBreadcrumbsModule, FwButtonComponent, FwButtonDangerDirective, FwButtonDirective, FwButtonGroupComponent, FwButtonGroupModule, FwButtonModule, FwButtonPrimaryDirective, FwButtonSecondaryDirective, FwButtonSuccessDirective, FwButtonToggleComponent, FwButtonToggleItemComponent, FwButtonToggleModule, FwCardAttributeComponent, FwCardAuthorComponent, FwCardComponent, FwCardContentComponent, FwCardFooterComponent, FwCardHeaderComponent, FwCardModule, FwCell, FwCellDef, FwCheckboxComponent, FwCheckboxModule, FwChipComponent, FwChipModule, FwColumnDef, FwContainedInputComponent, FwContainedInputModule, FwCrumbComponent, FwDateInputComponent, FwDateInputModule, FwDialogActionsComponent, FwDialogComponent, FwDialogConfirmComponent, FwDialogContentComponent, FwDialogHeaderComponent, FwDialogService, FwDialogSimpleComponent, FwDialogsModule, FwFooterCell, FwFooterCellDef, FwFooterRow, FwFooterRowDef, FwFormHeadingComponent, FwFormHeadingModule, FwGridComponent, FwGridItemComponent, FwHeaderCell, FwHeaderCellDef, FwHeaderRow, FwHeaderRowDef, FwIconButtonComponent, FwIconButtonModule, FwIconComponent, FwIconModule, FwLayoutContextComponent, FwLayoutGroupComponent, FwLayoutPanelComponent, FwLayoutSidebarComponent, FwLayoutToolbarComponent, FwLayoutsModule, FwMenuCloseTriggersDirective, FwMenuComponent, FwMenuContainerComponent, FwMenuHeaderComponent, FwMenuItemComponent, FwMenuItemGroupComponent, FwMenuModule, FwMenuSeparatorComponent, FwMenuSubItemComponent, FwMultiSelectMenuComponent, FwNavbarComponent, FwNavbarHeaderComponent, FwNavbarItemComponent, FwNavbarModule, FwNavbarSubItemComponent, FwNoDataRow, FwNumberInputComponent, FwNumberInputModule, FwPaginatorAdvancedComponent, FwPaginatorComponent, FwPaginatorModule, FwPhoneInputComponent, FwPhoneInputModule, FwPopoverComponent, FwPopoverModule, FwPopoverPanelComponent, FwProgressBarComponent, FwProgressModule, FwProgressSpinnerComponent, FwRadioComponent, FwRadioGroupComponent, FwRadioModule, FwRow, FwRowDef, FwSectionHeadingComponent, FwSectionHeadingModule, FwSelectMenuComponent, FwSelectMenuModule, FwSnackbarComponent, FwSnackbarContainerComponent, FwSnackbarModule, FwSnackbarService, FwStepComponent, FwStepDecoratorComponent, FwStepperComponent, FwStepperModule, FwSubsectionHeadingComponent, FwSwitchComponent, FwSwitchModule, FwTabComponent, FwTabPanelComponent, FwTableComponent, FwTableDenseComponent, FwTableModule, FwTabsComponent, FwTabsModule, FwTextAreaInputComponent, FwTextAreaInputModule, FwTextInputComponent, FwTextInputModule, FwTooltipComponent, FwTooltipDirective, FwTooltipModule, FwTooltipPanelComponent, FwTypeaheadComponent, FwValidators, FwWrappedInputComponent, FwWrappedInputModule, LayoutWidth, MenuManagerService, MenuRegisterDirective, MinimalTranslationService, TranslationService, allIcons, genMessageId, notBeforeDate, notFutureDate };
9423
+ export { DialogWidth, FwAlertComponent, FwAlertModule, FwAppIconComponent, FwAppIconModule, FwAvatarComponent, FwAvatarListComponent, FwAvatarModule, FwBackButtonComponent, FwBadgeComponent, FwBadgeModule, FwBreadcrumbsComponent, FwBreadcrumbsModule, FwButtonComponent, FwButtonDangerDirective, FwButtonDirective, FwButtonGroupComponent, FwButtonGroupModule, FwButtonModule, FwButtonPrimaryDirective, FwButtonSecondaryDirective, FwButtonSuccessDirective, FwButtonToggleComponent, FwButtonToggleItemComponent, FwButtonToggleModule, FwCardAttributeComponent, FwCardAuthorComponent, FwCardComponent, FwCardContentComponent, FwCardFooterComponent, FwCardHeaderComponent, FwCardModule, FwCell, FwCellDef, FwCheckboxComponent, FwCheckboxModule, FwChipComponent, FwChipModule, FwColumnDef, FwContainedInputComponent, FwContainedInputModule, FwCrumbComponent, FwDateInputComponent, FwDateInputModule, FwDialogActionsComponent, FwDialogComponent, FwDialogConfirmComponent, FwDialogContentComponent, FwDialogHeaderComponent, FwDialogService, FwDialogSimpleComponent, FwDialogsModule, FwFooterCell, FwFooterCellDef, FwFooterRow, FwFooterRowDef, FwFormHeadingComponent, FwFormHeadingModule, FwGridComponent, FwGridItemComponent, FwHeaderCell, FwHeaderCellDef, FwHeaderRow, FwHeaderRowDef, FwIconButtonComponent, FwIconButtonModule, FwIconComponent, FwIconModule, FwLayoutContextComponent, FwLayoutGroupComponent, FwLayoutPanelComponent, FwLayoutSidebarComponent, FwLayoutToolbarComponent, FwLayoutsModule, FwMenuCloseTriggersDirective, FwMenuComponent, FwMenuContainerComponent, FwMenuHeaderComponent, FwMenuItemComponent, FwMenuItemGroupComponent, FwMenuModule, FwMenuSeparatorComponent, FwMenuSubItemComponent, FwMultiSelectMenuComponent, FwNavbarComponent, FwNavbarHeaderComponent, FwNavbarItemComponent, FwNavbarModule, FwNavbarSubItemComponent, FwNoDataRow, FwNumberInputComponent, FwNumberInputModule, FwPaginatorAdvancedComponent, FwPaginatorComponent, FwPaginatorModule, FwPhoneInputComponent, FwPhoneInputModule, FwPopoverComponent, FwPopoverModule, FwPopoverPanelComponent, FwProgressBarComponent, FwProgressModule, FwProgressSpinnerComponent, FwRadioComponent, FwRadioGroupComponent, FwRadioModule, FwRow, FwRowDef, FwSectionHeadingComponent, FwSectionHeadingModule, FwSelectMenuComponent, FwSelectMenuModule, FwSnackbarComponent, FwSnackbarContainerComponent, FwSnackbarModule, FwSnackbarService, FwStepComponent, FwStepDecoratorComponent, FwStepperComponent, FwStepperModule, FwSubsectionHeadingComponent, FwSwitchComponent, FwSwitchModule, FwTabComponent, FwTabPanelComponent, FwTableComponent, FwTableDenseComponent, FwTableModule, FwTabsComponent, FwTabsModule, FwTextAreaInputComponent, FwTextAreaInputModule, FwTextComponent, FwTextInputComponent, FwTextInputModule, FwTooltipComponent, FwTooltipDirective, FwTooltipModule, FwTooltipPanelComponent, FwTypeaheadComponent, FwValidators, FwWrappedInputComponent, FwWrappedInputModule, LayoutWidth, MenuManagerService, MenuRegisterDirective, MinimalTranslationService, TranslationService, allIcons, genMessageId, notBeforeDate, notFutureDate };
9417
9424
  //# sourceMappingURL=flywheel-io-vision.mjs.map