@testgorilla/tgo-ui 11.5.0 → 11.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@testgorilla/tgo-ui",
-  "version": "11.5.0",
+  "version": "11.6.0",
   "license": "proprietary-license",
   "lint-staged": {
     "{projects,components}/**/*.ts": [
@@ -150,6 +150,10 @@
       "types": "./types/testgorilla-tgo-ui-components-datepicker.d.ts",
       "default": "./fesm2022/testgorilla-tgo-ui-components-datepicker.mjs"
     },
+    "./components/device-control": {
+      "types": "./types/testgorilla-tgo-ui-components-device-control.d.ts",
+      "default": "./fesm2022/testgorilla-tgo-ui-components-device-control.mjs"
+    },
     "./components/dialog": {
       "types": "./types/testgorilla-tgo-ui-components-dialog.d.ts",
       "default": "./fesm2022/testgorilla-tgo-ui-components-dialog.mjs"
@@ -254,6 +258,10 @@
       "types": "./types/testgorilla-tgo-ui-components-popover.d.ts",
       "default": "./fesm2022/testgorilla-tgo-ui-components-popover.mjs"
     },
+    "./components/popup-tip": {
+      "types": "./types/testgorilla-tgo-ui-components-popup-tip.d.ts",
+      "default": "./fesm2022/testgorilla-tgo-ui-components-popup-tip.mjs"
+    },
     "./components/progress-bar": {
       "types": "./types/testgorilla-tgo-ui-components-progress-bar.d.ts",
       "default": "./fesm2022/testgorilla-tgo-ui-components-progress-bar.mjs"

package/projects/tgo-canopy-ui/theme/_arrow.scss

@@ -0,0 +1,43 @@
+@use './variables' as *;
+
+// The rebranded arrow: a rotated square whose two borders facing the anchor stay visible. $side is
+// the edge the arrow sits on; the defaults reproduce the tooltip arrow, popup-tip passes its own.
+@mixin rebranded-arrow(
+  $side,
+  $size: 15px,
+  $offset: -8px,
+  $cross: calc(50% - 7px),
+  $cross-edge: right,
+  $radius: 4px,
+  $background: $black
+) {
+  &::after {
+    content: '';
+    position: absolute;
+    height: $size;
+    width: $size;
+    border-top: 1px solid $tgo-white;
+    border-right: 1px solid $tgo-white;
+    background: $background;
+    z-index: 10;
+    border-top-right-radius: $radius;
+
+    @if $side == left {
+      left: $offset;
+      top: $cross;
+      transform: rotate(-135deg);
+    } @else if $side == right {
+      right: $offset;
+      top: $cross;
+      transform: rotate(45deg);
+    } @else if $side == top {
+      top: $offset;
+      #{$cross-edge}: $cross;
+      transform: rotate(-45deg);
+    } @else {
+      bottom: $offset;
+      #{$cross-edge}: $cross;
+      transform: rotate(135deg);
+    }
+  }
+}

package/projects/tgo-canopy-ui/theme/_tooltip.scss

@@ -1,4 +1,5 @@
 @use './variables' as *;
+@use './arrow' as *;
 
 @mixin rebranded-tooltip {
   background-color: $black;
@@ -12,74 +13,22 @@
 
 @mixin rebranded-tooltip-right {
   margin-left: 5px;
-  &:after {
-    content: '';
-    position: absolute;
-    left: -8px;
-    top: calc(50% - 7px);
-    height: 15px;
-    width: 15px;
-    border-top: 1px solid $tgo-white;
-    border-right: 1px solid $tgo-white;
-    background: $black;
-    z-index: 10;
-    border-top-right-radius: 4px;
-    transform: rotate(-135deg);
-  }
+  @include rebranded-arrow(left);
 }
 
 @mixin rebranded-tooltip-left {
   margin-right: 5px;
-  &:after {
-    content: '';
-    position: absolute;
-    right: -8px;
-    top: calc(50% - 7px);
-    height: 15px;
-    width: 15px;
-    border-top: 1px solid $tgo-white;
-    border-right: 1px solid $tgo-white;
-    background: $black;
-    z-index: 10;
-    border-top-right-radius: 4px;
-    transform: rotate(45deg);
-  }
+  @include rebranded-arrow(right);
 }
 
 @mixin rebranded-tooltip-below {
   margin-top: 5px;
-  &:after {
-    content: '';
-    position: absolute;
-    right: calc(50% - 7px);
-    top: -8px;
-    height: 15px;
-    width: 15px;
-    border-top: 1px solid $tgo-white;
-    border-right: 1px solid $tgo-white;
-    background: $black;
-    z-index: 10;
-    border-top-right-radius: 4px;
-    transform: rotate(-45deg);
-  }
+  @include rebranded-arrow(top);
 }
 
 @mixin rebranded-tooltip-above {
   margin-bottom: 5px;
-  &:after {
-    content: '';
-    position: absolute;
-    right: calc(50% - 7px);
-    bottom: -8px;
-    height: 15px;
-    width: 15px;
-    border-top: 1px solid $tgo-white;
-    border-right: 1px solid $tgo-white;
-    background: $black;
-    z-index: 10;
-    border-top-right-radius: 4px;
-    transform: rotate(135deg);
-  }
+  @include rebranded-arrow(bottom);
 }
 
 .mat-mdc-tooltip {

package/types/testgorilla-tgo-ui-components-device-control.d.ts

@@ -0,0 +1,91 @@
+import * as _angular_core from '@angular/core';
+import { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';
+export { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';
+import { IconName } from '@testgorilla/tgo-ui/components/icon';
+import { MenuConfig, OverflowMenuButtonsType } from '@testgorilla/tgo-ui/components/overflow-menu';
+import { TooltipPositionType } from '@testgorilla/tgo-ui/components/tooltip';
+import * as i1 from '@angular/common';
+
+/** One entry of the device dropdown. */
+interface DeviceControlOption {
+    /** Value handed back when the entry is picked. */
+    value: string;
+    /** Text shown in the dropdown. */
+    label: string;
+}
+/**
+ * Shape of the control.
+ * `toggle` renders a main button that switches the device on and off, plus a chevron that opens the
+ * dropdown. `menu` renders a single control where both halves open the dropdown.
+ */
+type DeviceControlVariant = 'toggle' | 'menu';
+
+/**
+ * Media device control: an on/off button paired with a device dropdown, generic across microphones,
+ * speakers and similar. The dropdown is `ui-overflow-menu`, so it behaves like every other menu.
+ */
+declare class DeviceControlComponent {
+    /**
+     * Shape of the control: `toggle` pairs an on/off button with the dropdown chevron; `menu` is a
+     * single button that opens the dropdown. Default: 'toggle'.
+     */
+    readonly variant: _angular_core.InputSignal<DeviceControlVariant>;
+    readonly iconName: _angular_core.InputSignal<IconName>;
+    /** Icon shown while the device is off. Only used by the toggle variant. */
+    readonly offIconName: _angular_core.InputSignal<IconName>;
+    readonly isOn: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Plays the icon's activity animation, for example while a test sound runs. */
+    readonly isActive: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly options: _angular_core.InputSignal<DeviceControlOption[]>;
+    readonly selectedValue: _angular_core.InputSignal<string>;
+    /** Tooltip and accessible name of the main button while the device is on. Rendered by the toggle variant. */
+    readonly onTooltip: _angular_core.InputSignal<string>;
+    /** Tooltip and accessible name of the main button while the device is off. Rendered by the toggle variant. */
+    readonly offTooltip: _angular_core.InputSignal<string>;
+    /** Tooltip and accessible name of the button that opens the dropdown, which every variant renders. */
+    readonly menuTooltip: _angular_core.InputSignal<string>;
+    /** Shows the error badge, for example when the device cannot be opened. */
+    readonly hasError: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly errorLabel: _angular_core.InputSignal<string>;
+    /**
+     * Defines the application theme. Defaults to dark, the primary use case for this control; the
+     * light variant is available for reuse on light surfaces.
+     */
+    readonly applicationTheme: _angular_core.InputSignal<ApplicationTheme | undefined>;
+    /** Emits when the main button is used to switch the device on or off, with the new state. */
+    readonly toggled: _angular_core.OutputEmitterRef<boolean>;
+    /**
+     * Emits the value of the entry the user picked. An entry with an empty value is a placeholder,
+     * not a selectable option: picking it closes the dropdown without emitting.
+     */
+    readonly optionSelected: _angular_core.OutputEmitterRef<string>;
+    /** Emits when the dropdown opens, so the consumer can refresh the entries. */
+    readonly menuOpened: _angular_core.OutputEmitterRef<void>;
+    readonly menuClosed: _angular_core.OutputEmitterRef<void>;
+    private readonly overflowMenu;
+    private readonly defaultAppTheme;
+    protected readonly theme: _angular_core.Signal<ApplicationTheme>;
+    /** Open state of the dropdown, derived from the overflow menu so there is no mirror to drift. */
+    readonly isMenuOpen: _angular_core.Signal<boolean>;
+    /** Tooltips sit above the control, which is anchored to the bottom of a call surface. */
+    protected readonly tooltipPosition = TooltipPositionType.TOP;
+    /** The dropdown opens upwards, over the call surface the control sits at the bottom of. */
+    protected readonly menuConfig: MenuConfig;
+    protected readonly menuButtons: _angular_core.Signal<OverflowMenuButtonsType[]>;
+    protected readonly mainTooltip: _angular_core.Signal<string>;
+    protected readonly currentIconName: _angular_core.Signal<IconName>;
+    toggleDevice(): void;
+    closeMenu(): void;
+    selectOption(value: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DeviceControlComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DeviceControlComponent, "ui-device-control", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "iconName": { "alias": "iconName"; "required": false; "isSignal": true; }; "offIconName": { "alias": "offIconName"; "required": false; "isSignal": true; }; "isOn": { "alias": "isOn"; "required": false; "isSignal": true; }; "isActive": { "alias": "isActive"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "selectedValue": { "alias": "selectedValue"; "required": false; "isSignal": true; }; "onTooltip": { "alias": "onTooltip"; "required": true; "isSignal": true; }; "offTooltip": { "alias": "offTooltip"; "required": true; "isSignal": true; }; "menuTooltip": { "alias": "menuTooltip"; "required": true; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; "errorLabel": { "alias": "errorLabel"; "required": false; "isSignal": true; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; "isSignal": true; }; }, { "toggled": "toggled"; "optionSelected": "optionSelected"; "menuOpened": "menuOpened"; "menuClosed": "menuClosed"; }, never, ["[uiDeviceControlMenuFooter]"], true, never>;
+}
+
+declare class DeviceControlComponentModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DeviceControlComponentModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<DeviceControlComponentModule, never, [typeof i1.CommonModule, typeof DeviceControlComponent], [typeof DeviceControlComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<DeviceControlComponentModule>;
+}
+
+export { DeviceControlComponent, DeviceControlComponentModule };
+export type { DeviceControlOption, DeviceControlVariant };

package/types/testgorilla-tgo-ui-components-overflow-menu.d.ts

@@ -14,12 +14,14 @@ import * as i1 from '@angular/common';
 import * as i5 from '@angular/material/button';
 import * as i6 from '@angular/material/tooltip';
 
+type OverflowMenuSelectionMode = 'none' | 'single';
 type OverflowMenuButtonsType = {
     icon?: IconName;
     label: string;
     isDestructive?: boolean;
     value: string;
     disabled?: boolean;
+    isSelected?: boolean;
     btnTemplate?: TemplateRef<unknown>;
     subMenu?: OverflowMenuButtonsType[] | number;
     action?: number | string;
@@ -118,6 +120,15 @@ declare class OverflowMenuComponent implements OnInit, OnChanges, AfterViewInit
      */
     buttonSize: ButtonSize;
     menuConfig: MenuConfig;
+    /**
+     * Selection semantics of the menu. 'single' renders every entry as a menuitemradio whose
+     * aria-checked and right-aligned check come from the button's isSelected flag; 'none' keeps
+     * plain menuitem entries.
+     *
+     * @type {OverflowMenuSelectionMode}
+     * @memberof OverflowMenuComponent
+     */
+    readonly selectionMode: i0.InputSignal<OverflowMenuSelectionMode>;
     isDynamicMenu: boolean;
     withRemovableOption: boolean;
     selectItem: EventEmitter<string>;
@@ -137,6 +148,10 @@ declare class OverflowMenuComponent implements OnInit, OnChanges, AfterViewInit
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
+    /** Opens the dropdown programmatically, as if the trigger had been used. */
+    openMenu(): void;
+    /** Closes the dropdown, whichever way it was opened. */
+    closeMenu(): void;
     onSelectItem(event: Event, value: string): void;
     onMenuOpened(): void;
     onMenuClosed(): void;
@@ -151,7 +166,7 @@ declare class OverflowMenuComponent implements OnInit, OnChanges, AfterViewInit
     private resetSubmenus;
     private createSubmenus;
     static ɵfac: i0.ɵɵFactoryDeclaration<OverflowMenuComponent, [{ optional: true; }, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<OverflowMenuComponent, "ui-overflow-menu", never, { "buttons": { "alias": "buttons"; "required": false; }; "iconTrigger": { "alias": "iconTrigger"; "required": false; }; "menuLabel": { "alias": "menuLabel"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaRequired": { "alias": "ariaRequired"; "required": false; }; "describedby": { "alias": "describedby"; "required": false; }; "contentTemplateRef": { "alias": "contentTemplateRef"; "required": false; }; "buttonVariant": { "alias": "buttonVariant"; "required": false; }; "buttonSize": { "alias": "buttonSize"; "required": false; }; "menuConfig": { "alias": "menuConfig"; "required": false; }; "isDynamicMenu": { "alias": "isDynamicMenu"; "required": false; }; "withRemovableOption": { "alias": "withRemovableOption"; "required": false; }; }, { "selectItem": "selectItem"; "menuOpened": "menuOpened"; "menuClosed": "menuClosed"; }, never, ["[menu-content]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OverflowMenuComponent, "ui-overflow-menu", never, { "buttons": { "alias": "buttons"; "required": false; }; "iconTrigger": { "alias": "iconTrigger"; "required": false; }; "menuLabel": { "alias": "menuLabel"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaRequired": { "alias": "ariaRequired"; "required": false; }; "describedby": { "alias": "describedby"; "required": false; }; "contentTemplateRef": { "alias": "contentTemplateRef"; "required": false; }; "buttonVariant": { "alias": "buttonVariant"; "required": false; }; "buttonSize": { "alias": "buttonSize"; "required": false; }; "menuConfig": { "alias": "menuConfig"; "required": false; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "isDynamicMenu": { "alias": "isDynamicMenu"; "required": false; }; "withRemovableOption": { "alias": "withRemovableOption"; "required": false; }; }, { "selectItem": "selectItem"; "menuOpened": "menuOpened"; "menuClosed": "menuClosed"; }, never, ["[menu-content]"], true, never>;
 }
 
 declare class OverflowMenuComponentModule {
@@ -161,4 +176,4 @@ declare class OverflowMenuComponentModule {
 }
 
 export { OverflowMenuComponent, OverflowMenuComponentModule };
-export type { MenuConfig, OverflowMenuButtonModify, OverflowMenuButtonsType };
+export type { MenuConfig, OverflowMenuButtonModify, OverflowMenuButtonsType, OverflowMenuSelectionMode };

package/types/testgorilla-tgo-ui-components-popup-tip.d.ts

@@ -0,0 +1,50 @@
+import * as _angular_core from '@angular/core';
+import { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';
+export { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';
+import * as i1 from '@angular/common';
+
+/** Side of the anchor the tip is rendered on, which is also where its arrow points from. */
+type PopupTipPosition = 'top' | 'bottom' | 'left' | 'right';
+
+/**
+ * Tooltip that stays open until it is dismissed, with an optional inline link and a close button.
+ * Unlike `ui-tooltip` it is not hover driven: the application opens it in response to a system state.
+ */
+declare class PopupTipComponent {
+    readonly message: _angular_core.InputSignal<string>;
+    /** Optional link rendered inline after the message. Needs `linkUrl` to render. */
+    readonly linkText: _angular_core.InputSignal<string>;
+    readonly linkUrl: _angular_core.InputSignal<string>;
+    /** Side of the anchor the tip sits on, which decides where its arrow is drawn. Default: 'top'. */
+    readonly position: _angular_core.InputSignal<PopupTipPosition>;
+    readonly includeCloseButton: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Accessible name of the close button. Pass a localized string: the English default is only a
+     * last-resort fallback so the button is never nameless. Default: 'Close'.
+     */
+    readonly closeButtonLabel: _angular_core.InputSignal<string>;
+    /**
+     * Defines the application theme. Defaults to dark because the design sheet only specifies the
+     * dark tip; the light variant exists for reuse on light surfaces.
+     */
+    readonly applicationTheme: _angular_core.InputSignal<ApplicationTheme | undefined>;
+    /**
+     * Emits when the user dismisses the tip, with the close button or with Escape. Escape only fires
+     * while focus is inside the tip: call `focus()` on it when opening, especially without the button.
+     */
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    private readonly defaultAppTheme;
+    protected readonly theme: _angular_core.Signal<ApplicationTheme>;
+    close(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PopupTipComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PopupTipComponent, "ui-popup-tip", never, { "message": { "alias": "message"; "required": false; "isSignal": true; }; "linkText": { "alias": "linkText"; "required": false; "isSignal": true; }; "linkUrl": { "alias": "linkUrl"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "includeCloseButton": { "alias": "includeCloseButton"; "required": false; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": false; "isSignal": true; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; "isSignal": true; }; }, { "closed": "closed"; }, never, ["*"], true, never>;
+}
+
+declare class PopupTipComponentModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PopupTipComponentModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<PopupTipComponentModule, never, [typeof i1.CommonModule, typeof PopupTipComponent], [typeof PopupTipComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<PopupTipComponentModule>;
+}
+
+export { PopupTipComponent, PopupTipComponentModule };
+export type { PopupTipPosition };