added carbon slider

package.json

@@ -30,6 +30,7 @@
   "dependencies": {
     "@material/mwc-textfield": "^0.27.0",
     "@nintex/form-plugin-contract": "^1.0.0-beta.2",
+    "carbon-web-components": "^1.21.0",
     "gridjs": "^6.0.6",
     "lit": "^2.3.1"
   },

src/components/carbon-slider/carbon-slider.stories.ts

@@ -0,0 +1,37 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit';
+import './carbon-slider';
+import { SampleCarbonSlider } from './carbon-slider';
+
+export default {
+  title: 'Carbon/Slider',
+  component: 'nintex-sample-carbon-slider',
+  parameters: {
+    actions: {
+      handles: ['nintex-value-change'],
+    },
+  },
+} as Meta;
+
+const Template: Story<SampleCarbonSlider> = ({
+  min,
+  max,
+  step,
+  readOnly,
+  value
+}) => {
+  return html`<nintex-sample-carbon-slider 
+  min=${min} 
+  max=${max}
+  step=${step}
+  value=${value} >
+  </nintex-sample-carbon-slider>`;
+};
+
+export const Base: Story<SampleCarbonSlider> = Template.bind({});
+Base.args = {
+  min: '10',
+  max: '500',
+  step: '10',
+  value: '100'
+};

src/components/carbon-slider/carbon-slider.styles.ts

@@ -0,0 +1,11 @@
+import { css } from 'lit';
+
+const baseStyle = css`
+  :host {
+    height: 100%;
+    width: 100%;
+    display: block;
+  }
+`;
+
+export const styles = [baseStyle];

src/components/carbon-slider/carbon-slider.ts

@@ -0,0 +1,89 @@
+import  'carbon-web-components/es/components/slider/index.js';
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styleMap } from 'lit-html/directives/style-map.js';
+import { PluginContract } from '@nintex/form-plugin-contract';
+import { styles } from './carbon-slider.styles';
+
+
+@customElement('nintex-sample-carbon-slider')
+export class SampleCarbonSlider extends LitElement {
+  static styles = styles;
+
+  @property()
+  min!: string;
+  @property()
+  max!: string;
+  @property()
+  step!: string;
+
+  @property()
+  readOnly: boolean = false;
+
+  @property()
+  value!: string;
+
+  // Render the UI as a function of component state
+  render() {
+    return html`<bx-slider 
+    ?disabled="${this.readOnly}"
+    max="${this.max}" 
+    min="${this.min}" 
+    step="${this.step}" 
+    .value="${this.value}"
+    @change="${(e: any) => this.onChange(e)}">
+    </bx-slider>`;
+  }
+
+  private onChange(e: any) {
+    const value = e.target?.value;
+    const args = {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+      detail: value,
+    };
+    const event = new CustomEvent('ntx-value-change', args);
+    this.dispatchEvent(event);
+  }
+
+  static getMetaConfig(): Promise<PluginContract> | PluginContract {
+    // plugin contract information
+    return {
+      controlName: 'Carbon Slider Component',
+      fallbackDisableSubmit: false,
+      iconUrl: 'one-line-text',
+      version: '1',
+      properties: {
+        min: {
+          type: 'integer',
+          title: 'Min',
+          defaultValue: 0,
+        },
+        max: {
+            type: 'integer',
+            title: 'Max',
+            defaultValue: 100,
+          },
+        step: {
+            type: 'integer',
+            title: 'Step',
+            defaultValue: 1,
+          },
+        value: {
+          type: 'integer',
+          title: 'Value',
+          // this is to mark the field as value field. it should only be defined once in the list of properties
+          isValueField: true,
+        },
+      },
+      standardProperties: {
+        fieldLabel: true,
+        description: true,
+        defaultValue: true,
+        readOnly: true,
+      },
+    };
+  }
+
+}

src/index.ts

@@ -1,3 +1,4 @@
 export * from './components/iframe/iframe';
 export * from './components/material-textfield/material-textfield';
 export * from './components/styled-input/styled-input';
+export * from './components/carbon-slider/carbon-slider';