Floating toolbar

angular-workspace/projects/trimble-oss/modus-angular-components/src/lib/stencil-generated/components.ts

@@ -90,14 +90,14 @@ export declare interface ModusAlert extends Components.ModusAlert {
 
 
 @ProxyCmp({
-  inputs: ['ariaLabel', 'clearable', 'disabled', 'dropdownMaxHeight', 'dropdownZIndex', 'errorText', 'includeSearchIcon', 'label', 'noResultsFoundSubtext', 'noResultsFoundText', 'options', 'placeholder', 'readOnly', 'required', 'showNoResultsFoundMessage', 'showOptionsOnFocus', 'size', 'value']
+  inputs: ['ariaLabel', 'clearable', 'disableCloseOnSelect', 'disabled', 'dropdownMaxHeight', 'dropdownZIndex', 'errorText', 'includeSearchIcon', 'label', 'noResultsFoundSubtext', 'noResultsFoundText', 'options', 'placeholder', 'readOnly', 'required', 'showNoResultsFoundMessage', 'showOptionsOnFocus', 'size', 'value']
 })
 @Component({
   selector: 'modus-autocomplete',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['ariaLabel', 'clearable', 'disabled', 'dropdownMaxHeight', 'dropdownZIndex', 'errorText', 'includeSearchIcon', 'label', 'noResultsFoundSubtext', 'noResultsFoundText', 'options', 'placeholder', 'readOnly', 'required', 'showNoResultsFoundMessage', 'showOptionsOnFocus', 'size', 'value'],
+  inputs: ['ariaLabel', 'clearable', 'disableCloseOnSelect', 'disabled', 'dropdownMaxHeight', 'dropdownZIndex', 'errorText', 'includeSearchIcon', 'label', 'noResultsFoundSubtext', 'noResultsFoundText', 'options', 'placeholder', 'readOnly', 'required', 'showNoResultsFoundMessage', 'showOptionsOnFocus', 'size', 'value'],
 })
 export class ModusAutocomplete {
   protected el: HTMLElement;
@@ -1530,6 +1530,54 @@ export declare interface ModusToast extends Components.ModusToast {
 }
 
 
+@ProxyCmp({
+  inputs: ['buttons', 'layout', 'toolbarStyle']
+})
+@Component({
+  selector: 'modus-toolbar',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['buttons', 'layout', 'toolbarStyle'],
+})
+export class ModusToolbar {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface ModusToolbar extends Components.ModusToolbar {}
+
+
+@ProxyCmp({
+  inputs: ['active', 'buttonStyle', 'disabled', 'divider', 'dividerLayout', 'iconSrc', 'textButton', 'tooltip']
+})
+@Component({
+  selector: 'modus-toolbar-button',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['active', 'buttonStyle', 'disabled', 'divider', 'dividerLayout', 'iconSrc', 'textButton', 'tooltip'],
+})
+export class ModusToolbarButton {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['buttonClick']);
+  }
+}
+
+
+export declare interface ModusToolbarButton extends Components.ModusToolbarButton {
+
+  buttonClick: EventEmitter<CustomEvent<any>>;
+}
+
+
 @ProxyCmp({
   inputs: ['ariaLabel', 'disabled', 'position', 'text']
 })

angular-workspace/projects/trimble-oss/modus-angular-components/src/lib/stencil-generated/index.ts

@@ -54,6 +54,8 @@ export const DIRECTIVES = [
   d.ModusTextInput,
   d.ModusTimePicker,
   d.ModusToast,
+  d.ModusToolbar,
+  d.ModusToolbarButton,
   d.ModusTooltip,
   d.ModusTreeView,
   d.ModusTreeViewItem

react-workspace/react-17/src/components/stencil-generated/index.ts

@@ -60,6 +60,8 @@ export const ModusTabs = /*@__PURE__*/createReactComponent<JSX.ModusTabs, HTMLMo
 export const ModusTextInput = /*@__PURE__*/createReactComponent<JSX.ModusTextInput, HTMLModusTextInputElement>('modus-text-input');
 export const ModusTimePicker = /*@__PURE__*/createReactComponent<JSX.ModusTimePicker, HTMLModusTimePickerElement>('modus-time-picker');
 export const ModusToast = /*@__PURE__*/createReactComponent<JSX.ModusToast, HTMLModusToastElement>('modus-toast');
+export const ModusToolbar = /*@__PURE__*/createReactComponent<JSX.ModusToolbar, HTMLModusToolbarElement>('modus-toolbar');
+export const ModusToolbarButton = /*@__PURE__*/createReactComponent<JSX.ModusToolbarButton, HTMLModusToolbarButtonElement>('modus-toolbar-button');
 export const ModusTooltip = /*@__PURE__*/createReactComponent<JSX.ModusTooltip, HTMLModusTooltipElement>('modus-tooltip');
 export const ModusTreeView = /*@__PURE__*/createReactComponent<JSX.ModusTreeView, HTMLModusTreeViewElement>('modus-tree-view');
 export const ModusTreeViewItem = /*@__PURE__*/createReactComponent<JSX.ModusTreeViewItem, HTMLModusTreeViewItemElement>('modus-tree-view-item');

react-workspace/react-18/src/components/stencil-generated/index.ts

@@ -60,6 +60,8 @@ export const ModusTabs = /*@__PURE__*/createReactComponent<JSX.ModusTabs, HTMLMo
 export const ModusTextInput = /*@__PURE__*/createReactComponent<JSX.ModusTextInput, HTMLModusTextInputElement>('modus-text-input');
 export const ModusTimePicker = /*@__PURE__*/createReactComponent<JSX.ModusTimePicker, HTMLModusTimePickerElement>('modus-time-picker');
 export const ModusToast = /*@__PURE__*/createReactComponent<JSX.ModusToast, HTMLModusToastElement>('modus-toast');
+export const ModusToolbar = /*@__PURE__*/createReactComponent<JSX.ModusToolbar, HTMLModusToolbarElement>('modus-toolbar');
+export const ModusToolbarButton = /*@__PURE__*/createReactComponent<JSX.ModusToolbarButton, HTMLModusToolbarButtonElement>('modus-toolbar-button');
 export const ModusTooltip = /*@__PURE__*/createReactComponent<JSX.ModusTooltip, HTMLModusTooltipElement>('modus-tooltip');
 export const ModusTreeView = /*@__PURE__*/createReactComponent<JSX.ModusTreeView, HTMLModusTreeViewElement>('modus-tree-view');
 export const ModusTreeViewItem = /*@__PURE__*/createReactComponent<JSX.ModusTreeViewItem, HTMLModusTreeViewItemElement>('modus-tree-view-item');

stencil-workspace/src/components.d.ts

@@ -22,6 +22,7 @@ import { TableCellEdited, TableContext } from "./components/modus-table/models/t
 import { TableRowActionsMenuEvent } from "./components/modus-table/models/table-row-actions.models";
 import { Tab } from "./components/modus-tabs/modus-tabs";
 import { ModusTimePickerEventDetails } from "./components/modus-time-picker/modus-time-picker.models";
+import { ModusToolbarButton, ModusToolbarTooltip } from "./components/modus-toolbar/modus-toolbar.models";
 import { ModusToolTipPlacement } from "./components/modus-tooltip/modus-tooltip.models";
 import { TreeViewItemOptions } from "./components/modus-content-tree/modus-content-tree.types";
 export { ModusAutocompleteOption } from "./components/modus-autocomplete/modus-autocomplete";
@@ -41,6 +42,7 @@ export { TableCellEdited, TableContext } from "./components/modus-table/models/t
 export { TableRowActionsMenuEvent } from "./components/modus-table/models/table-row-actions.models";
 export { Tab } from "./components/modus-tabs/modus-tabs";
 export { ModusTimePickerEventDetails } from "./components/modus-time-picker/modus-time-picker.models";
+export { ModusToolbarButton, ModusToolbarTooltip } from "./components/modus-toolbar/modus-toolbar.models";
 export { ModusToolTipPlacement } from "./components/modus-tooltip/modus-tooltip.models";
 export { TreeViewItemOptions } from "./components/modus-content-tree/modus-content-tree.types";
 export namespace Components {
@@ -1409,6 +1411,30 @@ export namespace Components {
          */
         "type": 'danger' | 'dark' | 'default' | 'primary' | 'secondary' | 'success' | 'warning';
     }
+    interface ModusToolbar {
+        /**
+          * The buttons to render.
+         */
+        "buttons": ModusToolbarButton[];
+        /**
+          * (optional) The toolbar's layout.
+         */
+        "layout": 'horizontal' | 'vertical';
+        /**
+          * (optional) The toolbar's style
+         */
+        "toolbarStyle": 'combined' | 'split';
+    }
+    interface ModusToolbarButton {
+        "active": boolean;
+        "buttonStyle": 'combined' | 'split';
+        "disabled": boolean;
+        "divider": boolean;
+        "dividerLayout": 'horizontal' | 'vertical';
+        "iconSrc": string;
+        "textButton": string;
+        "tooltip": ModusToolbarTooltip;
+    }
     interface ModusTooltip {
         /**
           * (optional) The tooltip's aria-label.
@@ -1634,6 +1660,10 @@ export interface ModusToastCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLModusToastElement;
 }
+export interface ModusToolbarButtonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLModusToolbarButtonElement;
+}
 export interface ModusTreeViewItemCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLModusTreeViewItemElement;
@@ -1954,6 +1984,18 @@ declare global {
         prototype: HTMLModusToastElement;
         new (): HTMLModusToastElement;
     };
+    interface HTMLModusToolbarElement extends Components.ModusToolbar, HTMLStencilElement {
+    }
+    var HTMLModusToolbarElement: {
+        prototype: HTMLModusToolbarElement;
+        new (): HTMLModusToolbarElement;
+    };
+    interface HTMLModusToolbarButtonElement extends Components.ModusToolbarButton, HTMLStencilElement {
+    }
+    var HTMLModusToolbarButtonElement: {
+        prototype: HTMLModusToolbarButtonElement;
+        new (): HTMLModusToolbarButtonElement;
+    };
     interface HTMLModusTooltipElement extends Components.ModusTooltip, HTMLStencilElement {
     }
     var HTMLModusTooltipElement: {
@@ -2025,6 +2067,8 @@ declare global {
         "modus-text-input": HTMLModusTextInputElement;
         "modus-time-picker": HTMLModusTimePickerElement;
         "modus-toast": HTMLModusToastElement;
+        "modus-toolbar": HTMLModusToolbarElement;
+        "modus-toolbar-button": HTMLModusToolbarButtonElement;
         "modus-tooltip": HTMLModusTooltipElement;
         "modus-tree-view": HTMLModusTreeViewElement;
         "modus-tree-view-item": HTMLModusTreeViewItemElement;
@@ -3599,6 +3643,31 @@ declare namespace LocalJSX {
          */
         "type"?: 'danger' | 'dark' | 'default' | 'primary' | 'secondary' | 'success' | 'warning';
     }
+    interface ModusToolbar {
+        /**
+          * The buttons to render.
+         */
+        "buttons"?: ModusToolbarButton[];
+        /**
+          * (optional) The toolbar's layout.
+         */
+        "layout"?: 'horizontal' | 'vertical';
+        /**
+          * (optional) The toolbar's style
+         */
+        "toolbarStyle"?: 'combined' | 'split';
+    }
+    interface ModusToolbarButton {
+        "active"?: boolean;
+        "buttonStyle"?: 'combined' | 'split';
+        "disabled"?: boolean;
+        "divider"?: boolean;
+        "dividerLayout"?: 'horizontal' | 'vertical';
+        "iconSrc"?: string;
+        "onButtonClick"?: (event: ModusToolbarButtonCustomEvent<any>) => void;
+        "textButton"?: string;
+        "tooltip"?: ModusToolbarTooltip;
+    }
     interface ModusTooltip {
         /**
           * (optional) The tooltip's aria-label.
@@ -3747,6 +3816,8 @@ declare namespace LocalJSX {
         "modus-text-input": ModusTextInput;
         "modus-time-picker": ModusTimePicker;
         "modus-toast": ModusToast;
+        "modus-toolbar": ModusToolbar;
+        "modus-toolbar-button": ModusToolbarButton;
         "modus-tooltip": ModusTooltip;
         "modus-tree-view": ModusTreeView;
         "modus-tree-view-item": ModusTreeViewItem;
@@ -3811,6 +3882,8 @@ declare module "@stencil/core" {
             "modus-text-input": LocalJSX.ModusTextInput & JSXBase.HTMLAttributes<HTMLModusTextInputElement>;
             "modus-time-picker": LocalJSX.ModusTimePicker & JSXBase.HTMLAttributes<HTMLModusTimePickerElement>;
             "modus-toast": LocalJSX.ModusToast & JSXBase.HTMLAttributes<HTMLModusToastElement>;
+            "modus-toolbar": LocalJSX.ModusToolbar & JSXBase.HTMLAttributes<HTMLModusToolbarElement>;
+            "modus-toolbar-button": LocalJSX.ModusToolbarButton & JSXBase.HTMLAttributes<HTMLModusToolbarButtonElement>;
             "modus-tooltip": LocalJSX.ModusTooltip & JSXBase.HTMLAttributes<HTMLModusTooltipElement>;
             "modus-tree-view": LocalJSX.ModusTreeView & JSXBase.HTMLAttributes<HTMLModusTreeViewElement>;
             "modus-tree-view-item": LocalJSX.ModusTreeViewItem & JSXBase.HTMLAttributes<HTMLModusTreeViewItemElement>;

stencil-workspace/src/components/modus-switch/modus-switch.scss

@@ -28,6 +28,7 @@
         transform: translateX($rem-14px);
       }
     }
+
     label {
       font-size: $rem-12px;
     }
@@ -95,8 +96,8 @@
 
   label {
     color: $modus-switch-label-color;
-    margin-left: $rem-8px;
     margin-bottom: 0.01rem;
+    margin-left: $rem-8px;
   }
 
   &.disabled {

stencil-workspace/src/components/modus-toolbar/button/modus-toolbar-button.scss

@@ -0,0 +1,111 @@
+@import '../modus-toolbar.vars.scss';
+
+div {
+  background-color: $modus-toolbar-divider-bg;
+
+  &.layout-horizontal {
+    border-left: $rem-4px solid $modus-toolbar-bg;
+    border-right: 0;
+    height: $rem-24px;
+    width: $rem-1px;
+  }
+
+  &.layout-vertical {
+    border-bottom: 0;
+    border-top: $rem-4px solid $modus-toolbar-bg;
+    height: $rem-1px;
+    width: $rem-24px;
+  }
+}
+
+button {
+  align-items: center;
+  background-color: $modus-toolbar-bg;
+  cursor: default;
+  display: inline-flex;
+  font-family: $primary-font;
+  font-weight: $btn-font-weight;
+  height: $rem-24px;
+  justify-content: center;
+  min-width: $rem-24px;
+  padding: 0 $rem-4px 0 $rem-4px;
+  border: 0;
+  position: relative;
+  user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+  width: auto;
+
+  &.style-margin {
+    border-radius: $rem-4px;
+    box-shadow: $box-shadow-lg;
+    height: $rem-32px;
+    min-width: $rem-32px;
+
+    &.layout-horizontal {
+      margin-left: $rem-4px;
+    }
+
+    &.layout-vertical {
+      margin-top: $rem-4px;
+    }
+  }
+
+  &.style-marginless {
+    border-radius: $rem-4px;
+
+    &.layout-horizontal {
+      margin-left: $rem-4px;
+    }
+
+    &.layout-vertical {
+      margin-top: $rem-4px;
+    }
+
+    &:hover {
+      background-color: $modus-toolbar-button-hover-bg;
+      cursor: pointer;
+    }
+
+    &:active {
+      background-color: $modus-toolbar-button-active-bg;
+    }
+
+    &.active-button {
+      background-color: $modus-toolbar-button-active-bg;
+    }
+  }
+
+  div {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: $modus-toolbar-bg;
+    border-radius: $rem-2px;
+
+    &.style-margin {
+      height: $rem-24px;
+      min-width: $rem-24px;
+    }
+
+    &:hover {
+      background-color: $modus-toolbar-button-hover-bg;
+      cursor: pointer;
+    }
+
+    &:active {
+      background-color: $modus-toolbar-button-active-bg;
+    }
+
+    &.active-button {
+      background-color: $modus-toolbar-button-active-bg;
+    }
+  }
+
+  &:disabled {
+    cursor: default;
+    opacity: 0.3;
+    pointer-events: none;
+  }
+}