feature(elements): implement ino-selection

.github/semantic.yml

@@ -52,6 +52,7 @@ scopes:
   - elements|ino-segment-button
   - elements|ino-segment-group
   - elements|ino-select
+  - elements|ino-selection
   - elements|ino-snackbar
   - elements|ino-spinner
   - elements|ino-switch
@@ -100,6 +101,7 @@ scopes:
   - elements-angular|ino-segment-button
   - elements-angular|ino-segment-group
   - elements-angular|ino-select
+  - elements-angular|ino-selection
   - elements-angular|ino-snackbar
   - elements-angular|ino-spinner
   - elements-angular|ino-switch
@@ -148,6 +150,7 @@ scopes:
   - elements-react|ino-segment-button
   - elements-react|ino-segment-group
   - elements-react|ino-select
+  - elements-react|ino-selection
   - elements-react|ino-snackbar
   - elements-react|ino-spinner
   - elements-react|ino-switch
@@ -196,6 +199,7 @@ scopes:
   - elements-vue|ino-segment-button
   - elements-vue|ino-segment-group
   - elements-vue|ino-select
+  - elements-vue|ino-selection
   - elements-vue|ino-snackbar
   - elements-vue|ino-spinner
   - elements-vue|ino-switch
@@ -244,6 +248,7 @@ scopes:
   - storybook|ino-segment-button
   - storybook|ino-segment-group
   - storybook|ino-select
+  - storybook|ino-selection
   - storybook|ino-snackbar
   - storybook|ino-spinner
   - storybook|ino-switch
@@ -256,10 +261,12 @@ scopes:
   - storybook|ino-tooltip
   - elements
   - elements-angular
+  - elements-angular-example
   - elements-react
+  - elements-react-example
   - elements-vue
+  - elements-vue-example
   - storybook
   - landingpage
-  - elements-vue-example
   - '*'
   - deps

packages/elements-angular/src/control-value-accesors/text-value-accessor.directive.ts

@@ -5,7 +5,7 @@ import { ValueAccessorDirective } from './value-accessor.directive';
 
 @Directive({
   selector:
-    'ino-autocomplete,ino-currency-input,ino-input,ino-markdown-editor,ino-textarea,ino-range,ino-select,ino-datepicker,ino-segment-group',
+    'ino-autocomplete,ino-currency-input,ino-input,ino-markdown-editor,ino-textarea,ino-range,ino-select,ino-datepicker,ino-segment-group, ino-selection',
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,

packages/elements-angular/src/directives/proxies-list.ts

@@ -40,6 +40,7 @@ export const DIRECTIVES = [
   d.InoSegmentButton,
   d.InoSegmentGroup,
   d.InoSelect,
+  d.InoSelection,
   d.InoSnackbar,
   d.InoSpinner,
   d.InoSwitch,

packages/elements-angular/src/directives/proxies.ts

@@ -1036,6 +1036,49 @@ export class InoSelect {
 }
 
 
+export declare interface InoSelection extends Components.InoSelection {
+  /**
+   * Emits string of the added option. Contains new value in `event.detail`. 
+   */
+  optionCreated: EventEmitter<CustomEvent<string | { key: string; value: string }>>;
+  /**
+   * Emits when the ino-selection wants to show (`true`) or hide (`false`) itself.
+This is depended on the `trigger` property.
+Use this event in controlled-mode (see `controlled`).
+
+e.g.: `trigger = 'click'` - This events emits with `true`
+when the user clicks on the target (slot/`for`/parent-element)
+and emits with `false` when the target or the outside is clicked. 
+   */
+  selectionVisibleChanged: EventEmitter<CustomEvent<boolean>>;
+  /**
+   * Emits the list item the user clicked on either as a string or
+a `{key: string; value: string}` object depending on the provided options. 
+   */
+  valueChange: EventEmitter<CustomEvent<string | { key: string; value: string }>>;
+
+}
+
+@ProxyCmp({
+  defineCustomElementFn: undefined,
+  inputs: ['controlled', 'createOptionLabel', 'debounce', 'distance', 'error', 'for', 'hideCreateOption', 'label', 'noOptionsText', 'options', 'placement', 'stayOpen', 'value', 'visible']
+})
+@Component({
+  selector: 'ino-selection',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  inputs: ['controlled', 'createOptionLabel', 'debounce', 'distance', 'error', 'for', 'hideCreateOption', 'label', 'noOptionsText', 'options', 'placement', 'stayOpen', 'value', 'visible']
+})
+export class InoSelection {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['optionCreated', 'selectionVisibleChanged', 'valueChange']);
+  }
+}
+
+
 export declare interface InoSnackbar extends Components.InoSnackbar {
   /**
    * Event that emits as soon as the action button is clicked. 

packages/elements-react/src/components/index.ts

@@ -46,6 +46,7 @@ export const InoRange = /*@__PURE__*/createReactComponent<JSX.InoRange, HTMLInoR
 export const InoSegmentButton = /*@__PURE__*/createReactComponent<JSX.InoSegmentButton, HTMLInoSegmentButtonElement>('ino-segment-button');
 export const InoSegmentGroup = /*@__PURE__*/createReactComponent<JSX.InoSegmentGroup, HTMLInoSegmentGroupElement>('ino-segment-group');
 export const InoSelect = /*@__PURE__*/createReactComponent<JSX.InoSelect, HTMLInoSelectElement>('ino-select');
+export const InoSelection = /*@__PURE__*/createReactComponent<JSX.InoSelection, HTMLInoSelectionElement>('ino-selection');
 export const InoSnackbar = /*@__PURE__*/createReactComponent<JSX.InoSnackbar, HTMLInoSnackbarElement>('ino-snackbar');
 export const InoSpinner = /*@__PURE__*/createReactComponent<JSX.InoSpinner, HTMLInoSpinnerElement>('ino-spinner');
 export const InoSwitch = /*@__PURE__*/createReactComponent<JSX.InoSwitch, HTMLInoSwitchElement>('ino-switch');

packages/elements-vue/src/proxies.ts

@@ -451,6 +451,28 @@ export const InoSelect = /*@__PURE__*/ defineContainer<JSX.InoSelect>('ino-selec
 'value', 'v-value-change', 'valueChange');
 
 
+export const InoSelection = /*@__PURE__*/ defineContainer<JSX.InoSelection>('ino-selection', undefined, [
+  'debounce',
+  'noOptionsText',
+  'placement',
+  'distance',
+  'for',
+  'label',
+  'stayOpen',
+  'options',
+  'hideCreateOption',
+  'createOptionLabel',
+  'value',
+  'controlled',
+  'visible',
+  'error',
+  'optionCreated',
+  'selectionVisibleChanged',
+  'valueChange'
+],
+'value', 'v-value-change', 'valueChange');
+
+
 export const InoSnackbar = /*@__PURE__*/ defineContainer<JSX.InoSnackbar>('ino-snackbar', undefined, [
   'message',
   'actionText',

packages/elements/project.json

@@ -23,7 +23,7 @@
       "executor": "nx:run-commands",
       "options": {
         "cwd": "packages/elements",
-        "command": "stencil test --e2e --no-build"
+        "command": "stencil test --spec --e2e --no-build"
       },
       "configurations": {
         "ci": {

packages/elements/src/components.d.ts

@@ -1119,6 +1119,64 @@ export namespace Components {
          */
         "value"?: string;
     }
+    interface InoSelection {
+        /**
+          * Used to indicate if the visibility of the ino-selection should be controlled by itself (`false`) or manually by the `visible` property (`true`) of the popover
+         */
+        "controlled": boolean;
+        /**
+          * The label for creating a new option button
+         */
+        "createOptionLabel": string;
+        /**
+          * Number of ms the search function should be delayed after the user typed something.
+         */
+        "debounce": number;
+        /**
+          * Displaces the ino-selection away from, or toward, the anchor element in the direction of its placement. A positive number displaces it further away, while a negative number lets it overlap the anchor.
+         */
+        "distance"?: number;
+        /**
+          * Displays the select as invalid if set to true. If the property is not set or set to false, the validation is handled by the default validation.
+         */
+        "error"?: boolean;
+        /**
+          * The target id the popover belongs to. If not given, the popover is attached to the element provided in the named slot (`popover-trigger`) or the parent component if a slot element does not exist.
+         */
+        "for"?: string;
+        /**
+          * Hides the footer with the "add new Option" button
+         */
+        "hideCreateOption": boolean;
+        /**
+          * The placeholder text of the input.
+         */
+        "label"?: string;
+        /**
+          * Text to display when there are no options found, where `$` is the placeholder for the input of the user.
+         */
+        "noOptionsText": string;
+        /**
+          * All options either as string array or as array of `{key: string; value: string}` objects.
+         */
+        "options": string[] | KeyValue[];
+        /**
+          * The placement of this popover. Accepted values: `top(-start, -end)`, `right(-start, -end)`, `bottom(-start, -end)`, `left(-start, -end)`
+         */
+        "placement"?: Placement;
+        /**
+          * If true, keeps selection open, after selecting a option  default `stayOpen = false`
+         */
+        "stayOpen"?: boolean;
+        /**
+          * List of selected items. (**unmanaged**)
+         */
+        "value": string[] | KeyValue[] | null;
+        /**
+          * Shows visibility of ino-selection.   Use with controlled mode (see property `controlled`) to programmatically show or hide ino-selection- Use the `selectionVisibleChanged` to sync the ino-selections' visibility state with yours.
+         */
+        "visible"?: boolean;
+    }
     interface InoSnackbar {
         /**
           * The text to display for the action button. If no text is defined, the snack bar is displayed in an alternative feedback style.
@@ -1471,6 +1529,10 @@ export interface InoSelectCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLInoSelectElement;
 }
+export interface InoSelectionCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLInoSelectionElement;
+}
 export interface InoSnackbarCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLInoSnackbarElement;
@@ -1728,6 +1790,12 @@ declare global {
         prototype: HTMLInoSelectElement;
         new (): HTMLInoSelectElement;
     };
+    interface HTMLInoSelectionElement extends Components.InoSelection, HTMLStencilElement {
+    }
+    var HTMLInoSelectionElement: {
+        prototype: HTMLInoSelectionElement;
+        new (): HTMLInoSelectionElement;
+    };
     interface HTMLInoSnackbarElement extends Components.InoSnackbar, HTMLStencilElement {
     }
     var HTMLInoSnackbarElement: {
@@ -1821,6 +1889,7 @@ declare global {
         "ino-segment-button": HTMLInoSegmentButtonElement;
         "ino-segment-group": HTMLInoSegmentGroupElement;
         "ino-select": HTMLInoSelectElement;
+        "ino-selection": HTMLInoSelectionElement;
         "ino-snackbar": HTMLInoSnackbarElement;
         "ino-spinner": HTMLInoSpinnerElement;
         "ino-switch": HTMLInoSwitchElement;
@@ -3034,6 +3103,76 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface InoSelection {
+        /**
+          * Used to indicate if the visibility of the ino-selection should be controlled by itself (`false`) or manually by the `visible` property (`true`) of the popover
+         */
+        "controlled"?: boolean;
+        /**
+          * The label for creating a new option button
+         */
+        "createOptionLabel"?: string;
+        /**
+          * Number of ms the search function should be delayed after the user typed something.
+         */
+        "debounce"?: number;
+        /**
+          * Displaces the ino-selection away from, or toward, the anchor element in the direction of its placement. A positive number displaces it further away, while a negative number lets it overlap the anchor.
+         */
+        "distance"?: number;
+        /**
+          * Displays the select as invalid if set to true. If the property is not set or set to false, the validation is handled by the default validation.
+         */
+        "error"?: boolean;
+        /**
+          * The target id the popover belongs to. If not given, the popover is attached to the element provided in the named slot (`popover-trigger`) or the parent component if a slot element does not exist.
+         */
+        "for"?: string;
+        /**
+          * Hides the footer with the "add new Option" button
+         */
+        "hideCreateOption"?: boolean;
+        /**
+          * The placeholder text of the input.
+         */
+        "label"?: string;
+        /**
+          * Text to display when there are no options found, where `$` is the placeholder for the input of the user.
+         */
+        "noOptionsText"?: string;
+        /**
+          * Emits string of the added option. Contains new value in `event.detail`.
+         */
+        "onOptionCreated"?: (event: InoSelectionCustomEvent<string | { key: string; value: string }>) => void;
+        /**
+          * Emits when the ino-selection wants to show (`true`) or hide (`false`) itself. This is depended on the `trigger` property. Use this event in controlled-mode (see `controlled`).  e.g.: `trigger = 'click'` - This events emits with `true` when the user clicks on the target (slot/`for`/parent-element) and emits with `false` when the target or the outside is clicked.
+         */
+        "onSelectionVisibleChanged"?: (event: InoSelectionCustomEvent<boolean>) => void;
+        /**
+          * Emits the list item the user clicked on either as a string or a `{key: string; value: string}` object depending on the provided options.
+         */
+        "onValueChange"?: (event: InoSelectionCustomEvent<string | { key: string; value: string }>) => void;
+        /**
+          * All options either as string array or as array of `{key: string; value: string}` objects.
+         */
+        "options": string[] | KeyValue[];
+        /**
+          * The placement of this popover. Accepted values: `top(-start, -end)`, `right(-start, -end)`, `bottom(-start, -end)`, `left(-start, -end)`
+         */
+        "placement"?: Placement;
+        /**
+          * If true, keeps selection open, after selecting a option  default `stayOpen = false`
+         */
+        "stayOpen"?: boolean;
+        /**
+          * List of selected items. (**unmanaged**)
+         */
+        "value"?: string[] | KeyValue[] | null;
+        /**
+          * Shows visibility of ino-selection.   Use with controlled mode (see property `controlled`) to programmatically show or hide ino-selection- Use the `selectionVisibleChanged` to sync the ino-selections' visibility state with yours.
+         */
+        "visible"?: boolean;
+    }
     interface InoSnackbar {
         /**
           * The text to display for the action button. If no text is defined, the snack bar is displayed in an alternative feedback style.
@@ -3343,6 +3482,7 @@ declare namespace LocalJSX {
         "ino-segment-button": InoSegmentButton;
         "ino-segment-group": InoSegmentGroup;
         "ino-select": InoSelect;
+        "ino-selection": InoSelection;
         "ino-snackbar": InoSnackbar;
         "ino-spinner": InoSpinner;
         "ino-switch": InoSwitch;
@@ -3396,6 +3536,7 @@ declare module "@stencil/core" {
             "ino-segment-button": LocalJSX.InoSegmentButton & JSXBase.HTMLAttributes<HTMLInoSegmentButtonElement>;
             "ino-segment-group": LocalJSX.InoSegmentGroup & JSXBase.HTMLAttributes<HTMLInoSegmentGroupElement>;
             "ino-select": LocalJSX.InoSelect & JSXBase.HTMLAttributes<HTMLInoSelectElement>;
+            "ino-selection": LocalJSX.InoSelection & JSXBase.HTMLAttributes<HTMLInoSelectionElement>;
             "ino-snackbar": LocalJSX.InoSnackbar & JSXBase.HTMLAttributes<HTMLInoSnackbarElement>;
             "ino-spinner": LocalJSX.InoSpinner & JSXBase.HTMLAttributes<HTMLInoSpinnerElement>;
             "ino-switch": LocalJSX.InoSwitch & JSXBase.HTMLAttributes<HTMLInoSwitchElement>;

packages/elements/src/components/base/_tooltip-base.scss

@@ -28,6 +28,7 @@ $shadow-color: rgba(93, 91, 105, 0.3);
 // global styles
 .tippy-box {
     @include font(sans-serif, m, regular);
+    overflow: hidden;
     border-radius: $border-radius;
     z-index: 9999;
 }

packages/elements/src/components/ino-autocomplete/ino-autocomplete.tsx

@@ -63,13 +63,8 @@ export class Autocomplete implements ComponentInterface {
       this.styleInputUnselected();
       return;
     }
-
-
     const val = Autocomplete.isKeyValue(value) ? value.value : value;
 
-    // checken ob val mit einer der optionen übereinstimmt
-    // grayInputText true setzen wenn nicht gleich
-
     if(this.inoInputEl) this.inoInputEl.value = val;
     if(this.inputEl) this.inputEl.selectionStart = this.inputEl.selectionEnd = val.length; // move cursor to end
     this.styleInputSelected();

packages/elements/src/components/ino-button/readme.md

@@ -118,6 +118,7 @@ class MyComponent extends Component {
 
  - [ino-dialog](../ino-dialog)
  - [ino-input-file](../ino-input-file)
+ - [ino-selection](../ino-selection)
 
 ### Depends on
 
@@ -129,6 +130,7 @@ graph TD;
   ino-button --> ino-spinner
   ino-dialog --> ino-button
   ino-input-file --> ino-button
+  ino-selection --> ino-button
   style ino-button fill:#f9f,stroke:#333,stroke-width:4px
 ```