@flywheel-io/vision 19.0.0 → 19.1.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,13 +1,13 @@
1
1
  import * as i0 from "@angular/core";
2
+ type ColorOption = 'primary' | 'secondary' | 'red' | 'error' | 'warning' | 'orange' | 'success' | 'green' | 'light-slate' | 'slate' | 'overlay' | 'info';
2
3
  export declare class FwIconButtonComponent {
3
- get classes(): string;
4
- tabindex: string;
5
- color?: 'primary' | 'secondary' | 'red' | 'error' | 'warning' | 'orange' | 'success' | 'green' | 'light-slate' | 'slate' | 'overlay' | 'info';
6
- icon: string;
7
- size?: 'large' | 'medium' | 'small';
8
- disabled?: boolean;
9
- selected?: boolean;
4
+ color: import("@angular/core").InputSignal<ColorOption>;
5
+ 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">;
6
+ size: import("@angular/core").InputSignal<"large" | "medium" | "small">;
7
+ disabled: import("@angular/core").InputSignal<boolean>;
8
+ selected: import("@angular/core").InputSignal<boolean>;
10
9
  border: import("@angular/core").InputSignal<boolean>;
11
10
  static ɵfac: i0.ɵɵFactoryDeclaration<FwIconButtonComponent, never>;
12
- static ɵcmp: i0.ɵɵComponentDeclaration<FwIconButtonComponent, "fw-icon-button", never, { "color": { "alias": "color"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "border": { "alias": "border"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
11
+ static ɵcmp: i0.ɵɵComponentDeclaration<FwIconButtonComponent, "fw-icon-button", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "border": { "alias": "border"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
13
12
  }
13
+ export {};
@@ -14,5 +14,5 @@ export declare class FwLayoutContextComponent {
14
14
  description?: string;
15
15
  get classes(): string;
16
16
  static ɵfac: i0.ɵɵFactoryDeclaration<FwLayoutContextComponent, never>;
17
- static ɵcmp: i0.ɵɵComponentDeclaration<FwLayoutContextComponent, "fw-layout-context", never, { "width": { "alias": "width"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "title": { "alias": "title"; "required": false; }; "description": { "alias": "description"; "required": false; }; }, {}, never, ["fw-button"], true, never>;
17
+ static ɵcmp: i0.ɵɵComponentDeclaration<FwLayoutContextComponent, "fw-layout-context", never, { "width": { "alias": "width"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "title": { "alias": "title"; "required": false; }; "description": { "alias": "description"; "required": false; }; }, {}, never, ["[slot='description']", "fw-button"], true, never>;
18
18
  }
@@ -92,40 +92,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
92
92
 
93
93
  class FwIconButtonComponent {
94
94
  constructor() {
95
- this.color = 'primary';
96
- this.icon = '';
97
- this.size = 'medium';
98
- this.disabled = false;
99
- this.selected = false;
95
+ this.color = input('primary');
96
+ this.icon = input('icon-placeholder');
97
+ this.size = input('medium');
98
+ this.disabled = input(false);
99
+ this.selected = input(false);
100
100
  this.border = input(false);
101
101
  }
102
- get classes() {
103
- return this.size;
104
- }
105
- ;
106
102
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
107
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: FwIconButtonComponent, isStandalone: true, selector: "fw-icon-button", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.class": "this.classes", "tabindex": "this.tabindex" } }, ngImport: i0, template: "<button [disabled]=\"disabled\"\n [class]=\"color + '-button'\"\n [class.selected-button]=\"selected\"\n [class.border]=\"border()\"\n [tabindex]=\"tabindex\">\n <fw-icon>{{ icon }}</fw-icon>\n</button>\n", styles: [":host{display:inline-block;position:relative}:host button{border:none;min-height:inherit;min-width:inherit;border-radius:8px;background:none;padding:0;display:flex;align-items:center;justify-content:center}:host button:hover{border:none;cursor:pointer}:host button.border{border-radius:8px;border:1px solid var(--separations-divider)}:host .primary-button:hover,:host .info-button:hover{background:var(--primary-hover)}:host .primary-button:focus,:host .info-button:focus{background:var(--primary-focus)}:host .primary-button.selected-button,:host .info-button.selected-button{background-color:var(--primary-base)}:host .primary-button fw-icon,:host .info-button fw-icon{color:var(--primary-base)}:host .secondary-button:hover{background:var(--secondary-hover)}:host .secondary-button:focus{background:var(--secondary-focus)}:host .secondary-button.selected-button{background-color:var(--secondary-base)}:host .secondary-button fw-icon{color:var(--secondary-base)}:host .slate-button:hover{background:var(--slate-hover)}:host .slate-button:focus{background:var(--slate-focus)}:host .slate-button.selected-button{background-color:var(--typography-muted)}:host .slate-button fw-icon{color:var(--typography-muted)}:host .light-slate-button:hover{background:var(--slate-hover)}:host .light-slate-button:focus{background:var(--slate-focus)}:host .light-slate-button.selected-button{background-color:var(--typography-muted)}:host .light-slate-button fw-icon{color:var(--typography-light)}:host .overlay-button:hover{background:var(--slate-hover)}:host .overlay-button:focus{background:var(--slate-focus)}:host .overlay-button.selected-button{background-color:var(--typography-muted)}:host .overlay-button fw-icon{color:var(--typography-contrast)}:host .red-button:hover,:host .error-button:hover{background:var(--red-hover)}:host .red-button:focus,:host .error-button:focus{background:var(--red-focus)}:host .red-button.selected-button,:host .error-button.selected-button{background-color:var(--red-base)}:host .red-button fw-icon,:host .error-button fw-icon{color:var(--red-base)}:host .orange-button:hover,:host .warning-button:hover{background:var(--orange-hover)}:host .orange-button:focus,:host .warning-button:focus{background:var(--orange-focus)}:host .orange-button.selected-button,:host .warning-button.selected-button{background-color:var(--orange-base)}:host .orange-button fw-icon,:host .warning-button fw-icon{color:var(--orange-base)}:host .green-button:hover,:host .success-button:hover{background:var(--green-hover)}:host .green-button:focus,:host .success-button:focus{background:var(--green-focus)}:host .green-button.selected-button,:host .success-button.selected-button{background-color:var(--green-base)}:host .green-button fw-icon,:host .success-button fw-icon{color:var(--green-base)}:host .selected-button fw-icon{color:var(--typography-contrast)}:host button:disabled{cursor:not-allowed}:host button:disabled:hover{background:none}:host button:disabled:focus{background:none}:host button:disabled fw-icon{color:var(--typography-muted);opacity:.2}:host button:disabled.selected-button{background-color:var(--typography-light)!important}:host button:disabled.selected-button fw-icon{color:var(--typography-contrast)!important}:host.small{min-height:30px;min-width:30px}:host.small fw-icon{font-size:22px;min-width:22px;width:22px}:host.medium{min-height:36px;min-width:36px}:host.medium fw-icon{font-size:24px;min-width:24px;width:24px}:host.large{min-height:40px;min-width:40px}:host.large fw-icon{font-size:28px;min-width:28px;width:28px}\n"], dependencies: [{ kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }] }); }
103
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: FwIconButtonComponent, isStandalone: true, selector: "fw-icon-button", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button [disabled]=\"disabled()\"\n [class]=\"[color() + '-button', size()]\"\n [class.selected-button]=\"selected()\"\n [class.border]=\"border()\">\n <fw-icon>{{ icon() }}</fw-icon>\n</button>\n", styles: [":host{display:inline-block;position:relative}:host button{border:none;min-height:inherit;min-width:inherit;border-radius:8px;background:none;padding:0;display:flex;align-items:center;justify-content:center}:host button:hover{border:none;cursor:pointer}:host button.border{border-radius:8px;border:1px solid var(--separations-divider)}:host .primary-button:hover,:host .info-button:hover{background:var(--primary-hover)}:host .primary-button:focus,:host .info-button:focus{background:var(--primary-focus)}:host .primary-button.selected-button,:host .info-button.selected-button{background-color:var(--primary-base)}:host .primary-button fw-icon,:host .info-button fw-icon{color:var(--primary-base)}:host .secondary-button:hover{background:var(--secondary-hover)}:host .secondary-button:focus{background:var(--secondary-focus)}:host .secondary-button.selected-button{background-color:var(--secondary-base)}:host .secondary-button fw-icon{color:var(--secondary-base)}:host .slate-button:hover{background:var(--slate-hover)}:host .slate-button:focus{background:var(--slate-focus)}:host .slate-button.selected-button{background-color:var(--typography-muted)}:host .slate-button fw-icon{color:var(--typography-muted)}:host .light-slate-button:hover{background:var(--slate-hover)}:host .light-slate-button:focus{background:var(--slate-focus)}:host .light-slate-button.selected-button{background-color:var(--typography-muted)}:host .light-slate-button fw-icon{color:var(--typography-light)}:host .overlay-button:hover{background:var(--slate-hover)}:host .overlay-button:focus{background:var(--slate-focus)}:host .overlay-button.selected-button{background-color:var(--typography-muted)}:host .overlay-button fw-icon{color:var(--typography-contrast)}:host .red-button:hover,:host .error-button:hover{background:var(--red-hover)}:host .red-button:focus,:host .error-button:focus{background:var(--red-focus)}:host .red-button.selected-button,:host .error-button.selected-button{background-color:var(--red-base)}:host .red-button fw-icon,:host .error-button fw-icon{color:var(--red-base)}:host .orange-button:hover,:host .warning-button:hover{background:var(--orange-hover)}:host .orange-button:focus,:host .warning-button:focus{background:var(--orange-focus)}:host .orange-button.selected-button,:host .warning-button.selected-button{background-color:var(--orange-base)}:host .orange-button fw-icon,:host .warning-button fw-icon{color:var(--orange-base)}:host .green-button:hover,:host .success-button:hover{background:var(--green-hover)}:host .green-button:focus,:host .success-button:focus{background:var(--green-focus)}:host .green-button.selected-button,:host .success-button.selected-button{background-color:var(--green-base)}:host .green-button fw-icon,:host .success-button fw-icon{color:var(--green-base)}:host .selected-button fw-icon{color:var(--typography-contrast)}:host button:disabled{cursor:not-allowed}:host button:disabled:hover{background:none}:host button:disabled:focus{background:none}:host button:disabled fw-icon{color:var(--typography-muted);opacity:.2}:host button:disabled.selected-button{background-color:var(--typography-light)!important}:host button:disabled.selected-button fw-icon{color:var(--typography-contrast)!important}:host .small{min-height:30px;min-width:30px}:host .small fw-icon{font-size:22px;min-width:22px;width:22px}:host .medium{min-height:36px;min-width:36px}:host .medium fw-icon{font-size:24px;min-width:24px;width:24px}:host .large{min-height:40px;min-width:40px}:host .large fw-icon{font-size:28px;min-width:28px;width:28px}\n"], dependencies: [{ kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
108
104
  }
109
105
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwIconButtonComponent, decorators: [{
110
106
  type: Component,
111
- args: [{ selector: 'fw-icon-button', imports: [FwIconComponent], template: "<button [disabled]=\"disabled\"\n [class]=\"color + '-button'\"\n [class.selected-button]=\"selected\"\n [class.border]=\"border()\"\n [tabindex]=\"tabindex\">\n <fw-icon>{{ icon }}</fw-icon>\n</button>\n", styles: [":host{display:inline-block;position:relative}:host button{border:none;min-height:inherit;min-width:inherit;border-radius:8px;background:none;padding:0;display:flex;align-items:center;justify-content:center}:host button:hover{border:none;cursor:pointer}:host button.border{border-radius:8px;border:1px solid var(--separations-divider)}:host .primary-button:hover,:host .info-button:hover{background:var(--primary-hover)}:host .primary-button:focus,:host .info-button:focus{background:var(--primary-focus)}:host .primary-button.selected-button,:host .info-button.selected-button{background-color:var(--primary-base)}:host .primary-button fw-icon,:host .info-button fw-icon{color:var(--primary-base)}:host .secondary-button:hover{background:var(--secondary-hover)}:host .secondary-button:focus{background:var(--secondary-focus)}:host .secondary-button.selected-button{background-color:var(--secondary-base)}:host .secondary-button fw-icon{color:var(--secondary-base)}:host .slate-button:hover{background:var(--slate-hover)}:host .slate-button:focus{background:var(--slate-focus)}:host .slate-button.selected-button{background-color:var(--typography-muted)}:host .slate-button fw-icon{color:var(--typography-muted)}:host .light-slate-button:hover{background:var(--slate-hover)}:host .light-slate-button:focus{background:var(--slate-focus)}:host .light-slate-button.selected-button{background-color:var(--typography-muted)}:host .light-slate-button fw-icon{color:var(--typography-light)}:host .overlay-button:hover{background:var(--slate-hover)}:host .overlay-button:focus{background:var(--slate-focus)}:host .overlay-button.selected-button{background-color:var(--typography-muted)}:host .overlay-button fw-icon{color:var(--typography-contrast)}:host .red-button:hover,:host .error-button:hover{background:var(--red-hover)}:host .red-button:focus,:host .error-button:focus{background:var(--red-focus)}:host .red-button.selected-button,:host .error-button.selected-button{background-color:var(--red-base)}:host .red-button fw-icon,:host .error-button fw-icon{color:var(--red-base)}:host .orange-button:hover,:host .warning-button:hover{background:var(--orange-hover)}:host .orange-button:focus,:host .warning-button:focus{background:var(--orange-focus)}:host .orange-button.selected-button,:host .warning-button.selected-button{background-color:var(--orange-base)}:host .orange-button fw-icon,:host .warning-button fw-icon{color:var(--orange-base)}:host .green-button:hover,:host .success-button:hover{background:var(--green-hover)}:host .green-button:focus,:host .success-button:focus{background:var(--green-focus)}:host .green-button.selected-button,:host .success-button.selected-button{background-color:var(--green-base)}:host .green-button fw-icon,:host .success-button fw-icon{color:var(--green-base)}:host .selected-button fw-icon{color:var(--typography-contrast)}:host button:disabled{cursor:not-allowed}:host button:disabled:hover{background:none}:host button:disabled:focus{background:none}:host button:disabled fw-icon{color:var(--typography-muted);opacity:.2}:host button:disabled.selected-button{background-color:var(--typography-light)!important}:host button:disabled.selected-button fw-icon{color:var(--typography-contrast)!important}:host.small{min-height:30px;min-width:30px}:host.small fw-icon{font-size:22px;min-width:22px;width:22px}:host.medium{min-height:36px;min-width:36px}:host.medium fw-icon{font-size:24px;min-width:24px;width:24px}:host.large{min-height:40px;min-width:40px}:host.large fw-icon{font-size:28px;min-width:28px;width:28px}\n"] }]
112
- }], propDecorators: { classes: [{
113
- type: HostBinding,
114
- args: ['attr.class']
115
- }], tabindex: [{
116
- type: HostBinding,
117
- args: ['tabindex']
118
- }], color: [{
119
- type: Input
120
- }], icon: [{
121
- type: Input
122
- }], size: [{
123
- type: Input
124
- }], disabled: [{
125
- type: Input
126
- }], selected: [{
127
- type: Input
128
- }] } });
107
+ args: [{ selector: 'fw-icon-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FwIconComponent], template: "<button [disabled]=\"disabled()\"\n [class]=\"[color() + '-button', size()]\"\n [class.selected-button]=\"selected()\"\n [class.border]=\"border()\">\n <fw-icon>{{ icon() }}</fw-icon>\n</button>\n", styles: [":host{display:inline-block;position:relative}:host button{border:none;min-height:inherit;min-width:inherit;border-radius:8px;background:none;padding:0;display:flex;align-items:center;justify-content:center}:host button:hover{border:none;cursor:pointer}:host button.border{border-radius:8px;border:1px solid var(--separations-divider)}:host .primary-button:hover,:host .info-button:hover{background:var(--primary-hover)}:host .primary-button:focus,:host .info-button:focus{background:var(--primary-focus)}:host .primary-button.selected-button,:host .info-button.selected-button{background-color:var(--primary-base)}:host .primary-button fw-icon,:host .info-button fw-icon{color:var(--primary-base)}:host .secondary-button:hover{background:var(--secondary-hover)}:host .secondary-button:focus{background:var(--secondary-focus)}:host .secondary-button.selected-button{background-color:var(--secondary-base)}:host .secondary-button fw-icon{color:var(--secondary-base)}:host .slate-button:hover{background:var(--slate-hover)}:host .slate-button:focus{background:var(--slate-focus)}:host .slate-button.selected-button{background-color:var(--typography-muted)}:host .slate-button fw-icon{color:var(--typography-muted)}:host .light-slate-button:hover{background:var(--slate-hover)}:host .light-slate-button:focus{background:var(--slate-focus)}:host .light-slate-button.selected-button{background-color:var(--typography-muted)}:host .light-slate-button fw-icon{color:var(--typography-light)}:host .overlay-button:hover{background:var(--slate-hover)}:host .overlay-button:focus{background:var(--slate-focus)}:host .overlay-button.selected-button{background-color:var(--typography-muted)}:host .overlay-button fw-icon{color:var(--typography-contrast)}:host .red-button:hover,:host .error-button:hover{background:var(--red-hover)}:host .red-button:focus,:host .error-button:focus{background:var(--red-focus)}:host .red-button.selected-button,:host .error-button.selected-button{background-color:var(--red-base)}:host .red-button fw-icon,:host .error-button fw-icon{color:var(--red-base)}:host .orange-button:hover,:host .warning-button:hover{background:var(--orange-hover)}:host .orange-button:focus,:host .warning-button:focus{background:var(--orange-focus)}:host .orange-button.selected-button,:host .warning-button.selected-button{background-color:var(--orange-base)}:host .orange-button fw-icon,:host .warning-button fw-icon{color:var(--orange-base)}:host .green-button:hover,:host .success-button:hover{background:var(--green-hover)}:host .green-button:focus,:host .success-button:focus{background:var(--green-focus)}:host .green-button.selected-button,:host .success-button.selected-button{background-color:var(--green-base)}:host .green-button fw-icon,:host .success-button fw-icon{color:var(--green-base)}:host .selected-button fw-icon{color:var(--typography-contrast)}:host button:disabled{cursor:not-allowed}:host button:disabled:hover{background:none}:host button:disabled:focus{background:none}:host button:disabled fw-icon{color:var(--typography-muted);opacity:.2}:host button:disabled.selected-button{background-color:var(--typography-light)!important}:host button:disabled.selected-button fw-icon{color:var(--typography-contrast)!important}:host .small{min-height:30px;min-width:30px}:host .small fw-icon{font-size:22px;min-width:22px;width:22px}:host .medium{min-height:36px;min-width:36px}:host .medium fw-icon{font-size:24px;min-width:24px;width:24px}:host .large{min-height:40px;min-width:40px}:host .large fw-icon{font-size:28px;min-width:28px;width:28px}\n"] }]
108
+ }] });
129
109
 
130
110
  class FwAlertComponent {
131
111
  constructor() {
@@ -481,7 +461,7 @@ class FwLayoutContextComponent {
481
461
  }
482
462
  ;
483
463
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwLayoutContextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
484
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: FwLayoutContextComponent, isStandalone: true, selector: "fw-layout-context", inputs: { width: "width", icon: "icon", iconColor: "iconColor", title: "title", description: "description" }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "<fw-icon *ngIf=\"icon\" [ngClass]=\"iconColor\">{{ icon }}</fw-icon>\n<h3 *ngIf=\"title\">{{ title }}</h3>\n<p class=\"vision-p3\" *ngIf=\"description\">{{ description }}</p>\n<div class=\"context-actions\">\n <ng-content select=\"fw-button\"></ng-content>\n</div>\n", styles: [":host{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:50px;max-width:100%}:host fw-icon{font-size:50px;width:50px;max-width:50px}:host fw-icon.primary{color:var(--primary-base)}:host fw-icon.secondary{color:var(--secondary-base)}:host fw-icon.slate{color:var(--slate-base)}:host fw-icon.danger{color:var(--red-base)}:host fw-icon.warning{color:var(--orange-base)}:host fw-icon.success{color:var(--green-base)}:host h3{margin:0}:host p{margin:0;text-align:center;color:var(--typography-muted)}:host .context-actions{display:flex;gap:8px}:host.context-width-small{width:444px}:host.context-width-medium{width:600px}:host.context-width-large{width:900px}:host.context-width-extra-large{width:1200px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
464
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: FwLayoutContextComponent, isStandalone: true, selector: "fw-layout-context", inputs: { width: "width", icon: "icon", iconColor: "iconColor", title: "title", description: "description" }, host: { properties: { "attr.class": "this.classes" } }, ngImport: i0, template: "@if (icon) {\n <fw-icon [ngClass]=\"iconColor\">{{ icon }}</fw-icon>\n}\n\n@if (title) {\n <h3>{{ title }}</h3>\n}\n\n@if (description) {\n <p class=\"vision-p3\">{{ description }}</p>\n} @else {\n <ng-content select=\"[slot='description']\"></ng-content>\n}\n\n<div class=\"context-actions\">\n <ng-content select=\"fw-button\"></ng-content>\n</div>\n", styles: [":host{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:50px;max-width:100%}:host fw-icon{font-size:50px;width:50px;max-width:50px}:host fw-icon.primary{color:var(--primary-base)}:host fw-icon.secondary{color:var(--secondary-base)}:host fw-icon.slate{color:var(--slate-base)}:host fw-icon.danger{color:var(--red-base)}:host fw-icon.warning{color:var(--orange-base)}:host fw-icon.success{color:var(--green-base)}:host h3{margin:0}:host p{margin:0;text-align:center;color:var(--typography-muted)}:host .context-actions{display:flex;gap:8px}:host.context-width-small{width:444px}:host.context-width-medium{width:600px}:host.context-width-large{width:900px}:host.context-width-extra-large{width:1200px}\n"], dependencies: [{ kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
485
465
  }
486
466
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FwLayoutContextComponent, decorators: [{
487
467
  type: Component,
@@ -489,7 +469,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
489
469
  NgIf,
490
470
  FwIconComponent,
491
471
  NgClass,
492
- ], template: "<fw-icon *ngIf=\"icon\" [ngClass]=\"iconColor\">{{ icon }}</fw-icon>\n<h3 *ngIf=\"title\">{{ title }}</h3>\n<p class=\"vision-p3\" *ngIf=\"description\">{{ description }}</p>\n<div class=\"context-actions\">\n <ng-content select=\"fw-button\"></ng-content>\n</div>\n", styles: [":host{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:50px;max-width:100%}:host fw-icon{font-size:50px;width:50px;max-width:50px}:host fw-icon.primary{color:var(--primary-base)}:host fw-icon.secondary{color:var(--secondary-base)}:host fw-icon.slate{color:var(--slate-base)}:host fw-icon.danger{color:var(--red-base)}:host fw-icon.warning{color:var(--orange-base)}:host fw-icon.success{color:var(--green-base)}:host h3{margin:0}:host p{margin:0;text-align:center;color:var(--typography-muted)}:host .context-actions{display:flex;gap:8px}:host.context-width-small{width:444px}:host.context-width-medium{width:600px}:host.context-width-large{width:900px}:host.context-width-extra-large{width:1200px}\n"] }]
472
+ ], template: "@if (icon) {\n <fw-icon [ngClass]=\"iconColor\">{{ icon }}</fw-icon>\n}\n\n@if (title) {\n <h3>{{ title }}</h3>\n}\n\n@if (description) {\n <p class=\"vision-p3\">{{ description }}</p>\n} @else {\n <ng-content select=\"[slot='description']\"></ng-content>\n}\n\n<div class=\"context-actions\">\n <ng-content select=\"fw-button\"></ng-content>\n</div>\n", styles: [":host{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:50px;max-width:100%}:host fw-icon{font-size:50px;width:50px;max-width:50px}:host fw-icon.primary{color:var(--primary-base)}:host fw-icon.secondary{color:var(--secondary-base)}:host fw-icon.slate{color:var(--slate-base)}:host fw-icon.danger{color:var(--red-base)}:host fw-icon.warning{color:var(--orange-base)}:host fw-icon.success{color:var(--green-base)}:host h3{margin:0}:host p{margin:0;text-align:center;color:var(--typography-muted)}:host .context-actions{display:flex;gap:8px}:host.context-width-small{width:444px}:host.context-width-medium{width:600px}:host.context-width-large{width:900px}:host.context-width-extra-large{width:1200px}\n"] }]
493
473
  }], propDecorators: { width: [{
494
474
  type: Input
495
475
  }], icon: [{