@flywheel-io/vision 21.4.0 → 21.5.0

package/global.scss

@@ -1,5 +1,6 @@
 @use './public-api' as vision;
 
+@include vision.colors;
 @include vision.global-typography;
 @include vision.icons;
 @include vision.overlay;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flywheel-io/vision",
-  "version": "21.4.0",
+  "version": "21.5.0",
   "description": "Flywheel UI elements provided as Angular components and native web components",
   "author": "Flywheel",
   "license": "MIT",

package/styles.css

@@ -288,6 +288,66 @@ Color Palettes for use with vision's theming system
 
 /* stylelint-disable */
 /* stylelint-disable */
+html {
+  --card-background: #ffffffff;
+  --card-header: #f9f9f9ff;
+  --green-base: #14ae5cff;
+  --green-border: #14ae5c66;
+  --green-dark: #076d37ff;
+  --green-focus: #14ae5c1a;
+  --green-hover: #14ae5c0d;
+  --green-light: #e9f9efff;
+  --green-medium: #0c924bff;
+  --orange-base: #c47e09ff;
+  --orange-border: #f59e0b66;
+  --orange-dark: #935f07ff;
+  --orange-focus: #f59e0b1a;
+  --orange-hover: #f59e0b0d;
+  --orange-light: #fef5e7ff;
+  --orange-medium: #ac6f08ff;
+  --page-light: #ffffffff;
+  --page-shaded: #f1f3f4ff;
+  --primary-base: #1b68faff;
+  --primary-border: #1b69fa66;
+  --primary-dark: #103e96ff;
+  --primary-focus: #1b69fa1a;
+  --primary-hover: #1b69fa0d;
+  --primary-light: #e8f0ffff;
+  --primary-medium: #1653c8ff;
+  --red-base: #d73d3dff;
+  --red-border: #f0434366;
+  --red-dark: #782222ff;
+  --red-focus: #f043431a;
+  --red-hover: #f043430d;
+  --red-light: #fdececff;
+  --red-medium: #a73030ff;
+  --secondary-base: #b080fcff;
+  --secondary-border: #b081fc66;
+  --secondary-dark: #6a4d97ff;
+  --secondary-focus: #b081fc1a;
+  --secondary-hover: #b081fc0d;
+  --secondary-light: #f7f2ffff;
+  --secondary-medium: #8d66caff;
+  --separations-base: #e3e6eaff;
+  --separations-divider: #00000026;
+  --separations-input: #00000040;
+  --separations-overlay: #00000040;
+  --separations-border: #e6e6eaff;
+  --sidebar-base: #0a1936ff;
+  --slate-base: #748295ff;
+  --slate-border: #74829566;
+  --slate-dark: #464e59ff;
+  --slate-focus: #7482951a;
+  --slate-hover: #7482950d;
+  --slate-light: #f1f3f4ff;
+  --slate-medium: #5d6877ff;
+  --typography-base: #000000ff;
+  --typography-contrast: #ffffffff;
+  --typography-disabled: #c4c4c4ff;
+  --typography-light: #8996a9ff;
+  --typography-muted: #5d6877ff;
+}
+
 h1 {
   font-family: Inter, sans-serif;
   color: var(--typography-base);

package/types/flywheel-io-vision.d.ts

@@ -4,7 +4,7 @@ import * as i1 from '@angular/common';
 import { Location } from '@angular/common';
 import { SafeStyle } from '@angular/platform-browser';
 import * as i2 from '@angular/forms';
-import { ControlValueAccessor, FormControl, FormControlStatus, FormGroup, ValidatorFn, AbstractControl, NgControl } from '@angular/forms';
+import { ControlValueAccessor, FormControl, FormControlStatus, FormGroup, AsyncValidatorFn, ValidatorFn, AbstractControl, NgControl } from '@angular/forms';
 import * as i2$1 from '@angular/cdk/dialog';
 import { DialogRef, DialogConfig, Dialog } from '@angular/cdk/dialog';
 import * as i3 from '@angular/cdk/overlay';
@@ -694,6 +694,149 @@ declare class FwChipModule {
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<FwChipModule>;
 }
 
+interface RgbaColor {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
+interface HslaColor {
+    h: number;
+    s: number;
+    l: number;
+    a: number;
+}
+interface HsvaColor {
+    h: number;
+    s: number;
+    v: number;
+    a: number;
+}
+/**
+ * PROTOTYPE-ONLY color math. In fw-ohif-v3's CustomColorPicker this is delegated
+ * entirely to tinycolor2. Whether Vision takes a small color-conversion dependency
+ * or keeps a hand-rolled util like this is an open decision for the real port
+ * (see the color-picker spike doc).
+ */
+declare function clamp(value: number, min: number, max: number): number;
+declare function rgbaToHsva({ r, g, b, a }: RgbaColor): HsvaColor;
+declare function hsvaToRgba({ h, s, v, a }: HsvaColor): RgbaColor;
+declare function hsvaToHsla({ h, s, v, a }: HsvaColor): HslaColor;
+declare function hslaToHsva({ h, s, l, a }: HslaColor): HsvaColor;
+declare function rgbaToHex8(rgba: RgbaColor): string;
+declare function rgbaToHex(rgba: RgbaColor): string;
+/** Accepts #rgb, #rrggbb, or #rrggbbaa (with or without leading #). Returns null if unparseable. */
+declare function hexToRgba(hex: string): RgbaColor | null;
+declare const DEFAULT_RGBA: RgbaColor;
+declare const MAX_PRESET_COLORS = 12;
+declare const DEFAULT_PRESET_COLORS: string[];
+
+type ColorFormat = 'hex' | 'rgb' | 'hsl' | 'hsv';
+/**
+ * Form control component for picking an RGBA color via saturation/hue/alpha pickers, hex/RGB/HSL/HSV
+ * text inputs, and preset swatches, with Angular forms integration. Ported from fw-ohif-v3's
+ * CustomColorPicker (React/react-color).
+ * @see [Vision storybook](https://cdn.flywheel.io/docs/vision/master/?path=/docs/components-color-picker--docs)
+ * @see [[extensions/flywheel-ui/src/components/CustomColorPicker/CustomColorPicker.tsx]] (source)
+ */
+declare class FwColorPickerComponent implements ControlValueAccessor {
+    /** Bound color value, RGBA. Mirrors the source's `rgbCode` prop. */
+    readonly rgba: _angular_core.ModelSignal<RgbaColor>;
+    /** Preset swatch colors as hex/hex8 strings. Mirrors the source's `colors` prop. Capped at {@link MAX_PRESET_COLORS}. */
+    readonly presetColors: _angular_core.ModelSignal<string[]>;
+    protected readonly cappedPresetColors: _angular_core.Signal<string[]>;
+    /** Hides the alpha slider + opacity input, e.g. for label colors. */
+    readonly showAlpha: _angular_core.ModelSignal<boolean>;
+    /** Adds a drop shadow, for when the picker is shown in a popout/overlay so it stands out from what's behind it. */
+    readonly showShadow: _angular_core.InputSignal<boolean>;
+    /** Emits the current color as a 6-digit hex string whenever it changes. */
+    readonly hexChange: _angular_core.OutputEmitterRef<string>;
+    /** Emits the currently selected color when the Save button is clicked. */
+    readonly save: _angular_core.OutputEmitterRef<RgbaColor>;
+    /** Emits when the Cancel button is clicked. Does not revert `rgba` — the consumer decides what "cancel" means. */
+    readonly cancel: _angular_core.OutputEmitterRef<void>;
+    private readonly saturationEl;
+    private readonly hueEl;
+    private readonly alphaEl;
+    private readonly formatSelectEl;
+    /**
+     * The format dropdown mirrors fw-select's look (fw-text-input trigger + fw-menu-container /
+     * fw-menu / fw-menu-item options) but is driven by this plain signal instead of fw-select
+     * itself. fw-select opens its own CdkMenuTrigger overlay; when this component is shown inside
+     * a CdkMenuTrigger-based popout (see the "As Popout" story), CDK's outside-click handling
+     * doesn't recognize fw-select's overlay as part of the popout's menu stack and closes the
+     * popout the instant it's clicked. Revisit using fw-select directly once that's fixed upstream.
+     */
+    protected readonly formatMenuOpen: _angular_core.WritableSignal<boolean>;
+    protected readonly formatMenuId: string;
+    protected readonly colorFormat: _angular_core.WritableSignal<ColorFormat>;
+    protected readonly hsva: _angular_core.Signal<HsvaColor>;
+    protected readonly hsla: _angular_core.Signal<HslaColor>;
+    protected readonly hex: _angular_core.Signal<string>;
+    /**
+     * Hue and saturation become mathematically undetermined at s=0 (gray: r===g===b, so
+     * rgbaToHsva's delta is 0 and it always reports hue 0) and at v=0 (black: saturation is
+     * likewise unrecoverable from RGB alone). Since `hsva` is fully re-derived from `rgba` on every
+     * read, dragging the saturation pointer to the far left (or down to the bottom) would otherwise
+     * silently reset whatever hue/saturation was previously selected, snapping the hue track back
+     * to red and leaving it unresponsive. These two signals hold onto the last determinate
+     * hue/saturation so the hue track and saturation-area background stay put through a trip
+     * across the undetermined edge; `displayHsva` is what every read site (drag handlers, pointer
+     * positions, saturation-area background) should use instead of raw `hsva()`.
+     */
+    private readonly stickyHue;
+    private readonly stickySaturation;
+    protected readonly displayHsva: _angular_core.Signal<HsvaColor>;
+    protected readonly displayHsla: _angular_core.Signal<HslaColor>;
+    protected readonly saturationBackground: _angular_core.Signal<string>;
+    protected readonly saturationPointerStyle: _angular_core.Signal<{
+        left: string;
+        top: string;
+    }>;
+    protected readonly huePointerStyle: _angular_core.Signal<{
+        left: string;
+    }>;
+    protected readonly alphaPointerStyle: _angular_core.Signal<{
+        left: string;
+    }>;
+    protected readonly alphaTrackBackground: _angular_core.Signal<string>;
+    protected readonly draggingTrack: _angular_core.WritableSignal<"hue" | "alpha">;
+    protected readonly formatOptions: {
+        value: ColorFormat;
+        label: string;
+    }[];
+    protected readonly colorFormatLabel: _angular_core.Signal<string>;
+    private onChange;
+    private onTouched;
+    constructor();
+    writeValue(value: RgbaColor): void;
+    registerOnChange(fn: (value: RgbaColor) => void): void;
+    registerOnTouched(fn: () => void): void;
+    private commit;
+    private commitFromHsva;
+    protected onSaturationPointerDown(event: PointerEvent): void;
+    private dragSaturation;
+    protected onHuePointerDown(event: PointerEvent): void;
+    private dragHue;
+    protected onAlphaPointerDown(event: PointerEvent): void;
+    private dragAlpha;
+    protected toggleFormatMenu(): void;
+    protected onFormatChange(format: string | string[]): void;
+    protected onDocumentClick(event: MouseEvent): void;
+    protected onHexInput(value: string): void;
+    protected onRgbChannelInput(channel: 'r' | 'g' | 'b', value: string): void;
+    protected onHslChannelInput(channel: 'h' | 's' | 'l', value: string): void;
+    protected onHsvChannelInput(channel: 'h' | 's' | 'v', value: string): void;
+    protected onOpacityInput(value: string): void;
+    protected onSwatchClick(color: string): void;
+    protected isSwatchSelected(color: string): boolean;
+    protected readonly hex8: _angular_core.Signal<string>;
+    protected onSave(): void;
+    protected onCancel(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FwColorPickerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FwColorPickerComponent, "fw-color-picker", never, { "rgba": { "alias": "rgba"; "required": false; "isSignal": true; }; "presetColors": { "alias": "presetColors"; "required": false; "isSignal": true; }; "showAlpha": { "alias": "showAlpha"; "required": false; "isSignal": true; }; "showShadow": { "alias": "showShadow"; "required": false; "isSignal": true; }; }, { "rgba": "rgbaChange"; "presetColors": "presetColorsChange"; "showAlpha": "showAlphaChange"; "hexChange": "hexChange"; "save": "save"; "cancel": "cancel"; }, never, never, true, never>;
+}
+
 /**
  * Form control component for a labeled row containing a switch or checkbox, toggled by clicking anywhere on the row
  * @see [Vision storybook](https://cdn.flywheel.io/docs/vision/master/?path=/docs/form-controls-contained-input--docs)
@@ -1181,7 +1324,7 @@ declare class FwFormRendererComponent {
 }
 
 declare class FwValidators {
-    static phone: ValidatorFn;
+    static phone: AsyncValidatorFn;
     static email: ValidatorFn;
     static url: ValidatorFn;
 }
@@ -1828,6 +1971,7 @@ declare class FwMenuContainerComponent implements AfterViewInit {
     childSeparators: _angular_core.Signal<readonly FwMenuSeparatorComponent[]>;
     childGroups: _angular_core.Signal<readonly FwMenuItemGroupComponent[]>;
     private combinedMenuItems;
+    noResults: _angular_core.Signal<boolean>;
     readonly keyHandler: _angular_core.InputSignal<(event: KeyboardEvent) => void>;
     get classes(): string;
     get style(): SafeStyle;
@@ -1836,7 +1980,6 @@ declare class FwMenuContainerComponent implements AfterViewInit {
     updateScrollState(): void;
     startScroll(direction: 'up' | 'down'): void;
     stopScroll(): void;
-    noResults: _angular_core.WritableSignal<boolean>;
     handleFilterClick(event: Event): void;
     handleFilterInput(event: Event): void;
     onFilterChange(filter: string): void;
@@ -2424,7 +2567,7 @@ declare class FwPhoneInputComponent implements OnInit, OnChanges, ControlValueAc
     get format(): PhoneNumberFormat;
     set format(value: PhoneNumberFormat);
     countryChanged: EventEmitter<Country>;
-    trigger: CdkMenuTrigger;
+    readonly trigger: _angular_core.Signal<CdkMenuTrigger>;
     phoneFormattedNational: string | undefined;
     allCountryList: Array<Country>;
     preferredCountryList: Array<Country>;
@@ -2436,7 +2579,11 @@ declare class FwPhoneInputComponent implements OnInit, OnChanges, ControlValueAc
     private _format;
     private _numberObject;
     private _previousFormattedNumber;
-    static getPhoneNumberPlaceHolder(countryISOCode: CountryCode): string | undefined;
+    private _phoneLib;
+    private _pendingValue;
+    protected readonly libraryReady: _angular_core.WritableSignal<boolean>;
+    private readonly _libraryReadyPromise;
+    static getPhoneNumberPlaceHolder(countryISOCode: CountryCode): Promise<string | undefined>;
     onTouched: () => void;
     onChange: any;
     constructor();
@@ -2453,6 +2600,7 @@ declare class FwPhoneInputComponent implements OnInit, OnChanges, ControlValueAc
     registerOnTouched(fn: any): void;
     setDisabledState(isDisabled: boolean): void;
     writeValue(value: any): void;
+    private applyWriteValue;
     private get formattedPhoneNumber();
     private formatAsYouTypeIfEnabled;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FwPhoneInputComponent, never>;
@@ -3128,5 +3276,5 @@ declare class FwWrappedInputModule {
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<FwWrappedInputModule>;
 }
 
-export { DialogWidth, FieldType, 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, FwCheckboxGroupComponent, FwCheckboxModule, FwChipComponent, FwChipModule, FwColumnDef, FwContainedInputComponent, FwContainedInputModule, FwCrumbComponent, FwDateInputComponent, FwDateInputModule, FwDialogActionsComponent, FwDialogComponent, FwDialogConfirmComponent, FwDialogContentComponent, FwDialogHeaderComponent, FwDialogService, FwDialogSimpleComponent, FwDialogsModule, FwFooterCell, FwFooterCellDef, FwFooterRow, FwFooterRowDef, FwFormHeadingComponent, FwFormHeadingModule, FwFormRendererComponent, 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, FwTagComponent, FwTagModule, FwTextAreaInputComponent, FwTextAreaInputModule, FwTextComponent, FwTextInputComponent, FwTextInputModule, FwTimeZoneSelectComponent, FwTooltipComponent, FwTooltipDirective, FwTooltipModule, FwTooltipPanelComponent, FwTypeaheadComponent, FwValidators, FwWrappedInputComponent, FwWrappedInputModule, LayoutWidth, MenuManagerService, MenuRegisterDirective, MinimalTranslationService, NoopValueAccessorDirective, TranslationService, allIcons, genMessageId, notBeforeDate, notFutureDate };
-export type { CustomField, CustomForm, CustomSection, DelayLength$3 as DelayLength, FwButtonColorOption, FwDialogConfig, FwDialogRef, FwPaginatorEvent, FwSnackbarMessage, IconSize, IconType, LogicRule, MenuFilterFn, PaginationPage, PopoverPosition, SimplePosition };
+export { DEFAULT_PRESET_COLORS, DEFAULT_RGBA, DialogWidth, FieldType, 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, FwCheckboxGroupComponent, FwCheckboxModule, FwChipComponent, FwChipModule, FwColorPickerComponent, FwColumnDef, FwContainedInputComponent, FwContainedInputModule, FwCrumbComponent, FwDateInputComponent, FwDateInputModule, FwDialogActionsComponent, FwDialogComponent, FwDialogConfirmComponent, FwDialogContentComponent, FwDialogHeaderComponent, FwDialogService, FwDialogSimpleComponent, FwDialogsModule, FwFooterCell, FwFooterCellDef, FwFooterRow, FwFooterRowDef, FwFormHeadingComponent, FwFormHeadingModule, FwFormRendererComponent, 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, FwTagComponent, FwTagModule, FwTextAreaInputComponent, FwTextAreaInputModule, FwTextComponent, FwTextInputComponent, FwTextInputModule, FwTimeZoneSelectComponent, FwTooltipComponent, FwTooltipDirective, FwTooltipModule, FwTooltipPanelComponent, FwTypeaheadComponent, FwValidators, FwWrappedInputComponent, FwWrappedInputModule, LayoutWidth, MAX_PRESET_COLORS, MenuManagerService, MenuRegisterDirective, MinimalTranslationService, NoopValueAccessorDirective, TranslationService, allIcons, clamp, genMessageId, hexToRgba, hslaToHsva, hsvaToHsla, hsvaToRgba, notBeforeDate, notFutureDate, rgbaToHex, rgbaToHex8, rgbaToHsva };
+export type { CustomField, CustomForm, CustomSection, DelayLength$3 as DelayLength, FwButtonColorOption, FwDialogConfig, FwDialogRef, FwPaginatorEvent, FwSnackbarMessage, HslaColor, HsvaColor, IconSize, IconType, LogicRule, MenuFilterFn, PaginationPage, PopoverPosition, RgbaColor, SimplePosition };