feat(core/slider): add slider component (#723)

packages/angular-test-app/src/app/app-routing.module.ts

@@ -86,6 +86,10 @@ import SelectEditable from 'src/preview-examples/select-editable';
 import SelectMultiple from 'src/preview-examples/select-multiple';
 import SelectNgModel from 'src/preview-examples/select-ng-model';
 import Settings from 'src/preview-examples/settings';
+import Slider from 'src/preview-examples/slider';
+import SliderError from 'src/preview-examples/slider-error';
+import SliderMarker from 'src/preview-examples/slider-marker';
+import SliderTrace from 'src/preview-examples/slider-trace';
 import Spinner from 'src/preview-examples/spinner';
 import SpinnerLarge from 'src/preview-examples/spinner-large';
 import SplitButton from 'src/preview-examples/split-button';
@@ -362,6 +366,10 @@ const routes: Routes = [
       { path: 'key-value-list-with-icon', component: KeyValueListWithIcon },
       { path: 'key-value-list-striped', component: KeyValueListStriped },
       { path: 'menu-category', component: MenuCategory },
+      { path: 'slider', component: Slider },
+      { path: 'slider-trace', component: SliderTrace },
+      { path: 'slider-marker', component: SliderMarker },
+      { path: 'slider-error', component: SliderError },
       { path: 'grid', component: Grid },
       { path: 'grid-size', component: GridSize },
       { path: 'grid-padding', component: GridPadding },

packages/angular-test-app/src/app/app.module.ts

@@ -94,6 +94,10 @@ import SelectEditable from 'src/preview-examples/select-editable';
 import SelectMultiple from 'src/preview-examples/select-multiple';
 import SelectNgModel from 'src/preview-examples/select-ng-model';
 import Settings from 'src/preview-examples/settings';
+import Slider from 'src/preview-examples/slider';
+import SliderError from 'src/preview-examples/slider-error';
+import SliderMarker from 'src/preview-examples/slider-marker';
+import SliderTrace from 'src/preview-examples/slider-trace';
 import Spinner from 'src/preview-examples/spinner';
 import SpinnerLarge from 'src/preview-examples/spinner-large';
 import SplitButton from 'src/preview-examples/split-button';
@@ -241,6 +245,10 @@ import { NavigationTestComponent } from './components/navigation-test.component'
     ContentHeader,
     ContentHeaderNoBack,
     MenuCategory,
+    Slider,
+    SliderTrace,
+    SliderMarker,
+    SliderError,
     Grid,
     GridSize,
     GridPadding,

packages/angular-test-app/src/preview-examples/slider-error.html

@@ -0,0 +1,18 @@
+<ix-slider trace trace-reference="50" [marker]="[0, 25, 50, 75, 100]" error>
+  <span slot="label-start">0</span>
+  <span slot="label-end">100</span>
+</ix-slider>
+
+<ix-slider
+  min="0"
+  max="50"
+  step="10"
+  value="20"
+  trace
+  trace-reference="50"
+  [marker]="[0, 10, 20, 30, 40, 50]"
+  error="Error message"
+>
+  <span slot="label-start">0</span>
+  <span slot="label-end">100</span>
+</ix-slider>

packages/angular-test-app/src/preview-examples/slider-error.ts

@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: './slider-error.html',
+})
+export default class SliderError {}

packages/angular-test-app/src/preview-examples/slider-marker.html

@@ -0,0 +1,15 @@
+<ix-slider value="25" [marker]="[0, 25, 50, 75, 100]">
+  <span slot="label-start">0</span>
+  <span slot="label-end">100</span>
+</ix-slider>
+
+<ix-slider
+  min="0"
+  max="50"
+  step="10"
+  value="10"
+  marker="[0, 10, 20, 30, 40, 50]"
+>
+  <span slot="label-start">0</span>
+  <span slot="label-end">100</span>
+</ix-slider>

packages/angular-test-app/src/preview-examples/slider-marker.ts

@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: './slider-marker.html',
+})
+export default class SliderMarker {}

packages/angular-test-app/src/preview-examples/slider-trace.html

@@ -0,0 +1,22 @@
+<ix-slider
+  trace
+  trace-reference="50"
+  [marker]="[0, 25, 50, 75, 100]"
+  value="25"
+>
+  <span slot="label-start">0</span>
+  <span slot="label-end">100</span>
+</ix-slider>
+
+<ix-slider
+  min="0"
+  max="50"
+  value="20"
+  step="10"
+  trace
+  trace-reference="10"
+  [marker]="[0, 10, 20, 30, 40, 50]"
+>
+  <span slot="label-start">0</span>
+  <span slot="label-end">100</span>
+</ix-slider>

packages/angular-test-app/src/preview-examples/slider-trace.ts

@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: './slider-trace.html',
+})
+export default class SliderTrace {}

packages/angular-test-app/src/preview-examples/slider.html

@@ -0,0 +1,9 @@
+<ix-slider value="25">
+  <span slot="label-start">0</span>
+  <span slot="label-end">100</span>
+</ix-slider>
+
+<ix-slider min="0" max="50" step="10" value="10">
+  <span slot="label-start">0</span>
+  <span slot="label-end">100</span>
+</ix-slider>

packages/angular-test-app/src/preview-examples/slider.ts

@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: './slider.html',
+})
+export default class Slider {}

packages/angular/src/components.ts

@@ -1841,6 +1841,32 @@ export declare interface IxSelectItem extends Components.IxSelectItem {
 }
 
 
+@ProxyCmp({
+  inputs: ['disabled', 'error', 'marker', 'max', 'min', 'step', 'trace', 'traceReference', 'value']
+})
+@Component({
+  selector: 'ix-slider',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['disabled', 'error', 'marker', 'max', 'min', 'step', 'trace', 'traceReference', 'value'],
+})
+export class IxSlider {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['valueChange']);
+  }
+}
+
+
+export declare interface IxSlider extends Components.IxSlider {
+
+  valueChange: EventEmitter<CustomEvent<number>>;
+}
+
+
 @ProxyCmp({
   inputs: ['size', 'variant']
 })

packages/angular/src/declare-components.ts

@@ -72,6 +72,7 @@ export const DIRECTIVES = [
   d.IxRow,
   d.IxSelect,
   d.IxSelectItem,
+  d.IxSlider,
   d.IxSpinner,
   d.IxSplitButton,
   d.IxSplitButtonItem,