udp-stencil-component-library 1.0.0

package/dist/collection/components/my-component/UI/forms/dynamic-form/udp-dynamic-form.js

@@ -0,0 +1,295 @@
+import { h } from "@stencil/core";
+/**
+ * @deprecated This component is deprecated and will be removed in a future version.
+ * Please use Please use <stencil-form> and <stencil-field> components or udp-forms-renderer instead.
+ */
+export class UdpDynamicForm {
+    constructor() {
+        this.formData = {};
+        this.exampleList = [
+            {
+                name: 'Tom Hanks',
+                age: 65,
+                gender: 'male',
+                nationality: 'American',
+                bestMovies: ['Forrest Gump', 'Saving Private Ryan', 'Cast Away'],
+            },
+            {
+                name: 'Meryl Streep',
+                age: 72,
+                gender: 'female',
+                nationality: 'American',
+                bestMovies: ['The Devil Wears Prada', "Sophie's Choice", 'The Iron Lady'],
+            },
+            {
+                name: 'Leonardo DiCaprio',
+                age: 47,
+                gender: 'male',
+                nationality: 'American',
+                bestMovies: ['Titanic', 'The Revenant', 'Inception'],
+            },
+            {
+                name: 'Scarlett Johansson',
+                age: 37,
+                gender: 'female',
+                nationality: 'American',
+                bestMovies: ['Lost in Translation', 'Marriage Story', 'Avengers: Endgame'],
+            },
+            {
+                name: 'Robert Downey Jr.',
+                age: 56,
+                gender: 'male',
+                nationality: 'American',
+                bestMovies: ['Iron Man', 'The Avengers', 'Chaplin'],
+            },
+        ];
+        this.formConfigArray = [
+            {
+                'field-name': 'ClientContact',
+                'search-operator': 'IN',
+                'label': 'Client Contact',
+                'width': 'half',
+                'groupId': 2,
+            },
+            {
+                'field-name': 'phoneNumber',
+                'search-operator': 'IN',
+                'label': 'Phone Number',
+                'width': 'half',
+                'groupId': 2,
+            },
+            {
+                'field-name': 'title',
+                'search-operator': 'IN',
+                'label': 'Title',
+                'operator-selector': true,
+                'groupId': 2,
+            },
+            {
+                'field-name': 'defaultClient',
+                'search-operator': 'IN',
+                'label': 'Default Client',
+                'groupId': 2,
+            },
+            {
+                'field-name': 'contactStatus',
+                'search-operator': 'IN',
+                'label': 'Contact Status',
+                'width': 'half',
+                'groupId': 2,
+            },
+            {
+                'field-name': 'languageID',
+                'search-operator': 'IN',
+                'label': 'Language ID',
+                'width': 'half',
+                'type': 'select',
+                'options': [
+                    { label: 'English', value: '1' },
+                    { label: 'French', value: '2' },
+                ],
+            },
+            {
+                'field-name': 'file',
+                'label': 'File',
+                'width': 'half',
+                'type': 'file',
+            },
+            {
+                'field-name': 'list',
+                'label': 'list',
+                displayKey: 'name',
+                multiSelect: true,
+                useCheckbox: false,
+                disableSelection: false,
+                valueKey: 'id',
+                type: 'list',
+                items: [
+                    {
+                        id: 0,
+                        name: 'Tom Hanks',
+                        age: 65,
+                        gender: 'male',
+                        nationality: 'American',
+                        bestMovies: ['Forrest Gump', 'Saving Private Ryan', 'Cast Away'],
+                        selected: true
+                    },
+                    {
+                        id: 1,
+                        name: 'Meryl Streep',
+                        age: 72,
+                        gender: 'female',
+                        nationality: 'American',
+                        bestMovies: ['The Devil Wears Prada', "Sophie's Choice", 'The Iron Lady'],
+                    },
+                    {
+                        id: 2,
+                        name: 'Leonardo DiCaprio',
+                        age: 47,
+                        gender: 'male',
+                        nationality: 'American',
+                        bestMovies: ['Titanic', 'The Revenant', 'Inception'],
+                    },
+                    {
+                        id: 3,
+                        name: 'Scarlett Johansson',
+                        age: 37,
+                        gender: 'female',
+                        nationality: 'American',
+                        bestMovies: ['Lost in Translation', 'Marriage Story', 'Avengers: Endgame'],
+                    },
+                    {
+                        id: 4,
+                        name: 'Robert Downey Jr.',
+                        age: 56,
+                        gender: 'male',
+                        nationality: 'American',
+                        bestMovies: ['Iron Man', 'The Avengers', 'Chaplin'],
+                    },
+                ]
+            },
+        ];
+        this.selectorOptions = [
+            {
+                value: '=',
+                label: 'Equals',
+            },
+            {
+                value: 'IN',
+                label: 'Contains',
+            },
+            {
+                value: '<>',
+                label: 'Does not Equal',
+            },
+            {
+                value: '>',
+                label: 'Greater Than',
+            },
+            {
+                value: '<',
+                label: 'Less Than',
+            },
+            {
+                value: '>=',
+                label: 'Greater Than or Equal To',
+            },
+            {
+                value: '<=',
+                label: 'Less Than or Equal To',
+            },
+            {
+                value: 'LIKE',
+                label: 'Like',
+            },
+            {
+                value: 'STARTSWITH',
+                label: 'Starts With',
+            },
+            {
+                value: 'BETWEEN',
+                label: 'Between',
+            },
+        ];
+        this.handleInputChange = (event, fieldName) => {
+            // If fieldName is provided, it's a text field input
+            if (fieldName) {
+                this.formData[fieldName] = event.target.value;
+            }
+            else {
+                // Handle udp-selector events
+                const detail = event.detail;
+                if (detail && detail.fieldName) {
+                    if (detail.fieldName.endsWith('_operator')) {
+                        const actualFieldName = detail.fieldName.replace('_operator', '');
+                        this.formData[actualFieldName + '_operator'] = detail.value;
+                    }
+                    else {
+                        this.formData[detail.fieldName] = detail.value;
+                    }
+                }
+            }
+        };
+    }
+    componentWillLoad() {
+        console.warn('The "udp-dynamic-form" component is deprecated and will be removed in a future version. Please use <stencil-form> and <stencil-field> components instead.');
+    }
+    componentDidLoad() {
+        // Component ready
+    }
+    async getFormData() {
+        return this.formConfigArray
+            .filter(config => this.formData[config['field-name']])
+            .map(config => ({
+            searchField: config['field-name'],
+            searchOperator: this.formData[config['field-name'] + '_operator'] || config['search-operator'],
+            searchValue: this.formData[config['field-name']],
+            groupId: config['groupId'], // Add groupId here
+        }));
+    }
+    getField(fieldConfig) {
+        switch (fieldConfig.type) {
+            case 'select':
+                return (h("udp-selector", { label: fieldConfig.label, name: fieldConfig['field-name'], options: fieldConfig.options, onChange: this.handleInputChange }));
+            case 'file':
+                return h("file-upload", { allowMultiple: true, disallowedFileTypes: ['image/png', 'image/jpeg'] });
+            case 'list':
+                return h("selectable-list", Object.assign({}, fieldConfig));
+            default:
+                return (h("text-field", { label: fieldConfig.label, placeholder: `Enter ${fieldConfig.label}`, value: this.formData[fieldConfig['field-name']] || '', onInput: (event) => this.handleInputChange(event, fieldConfig['field-name']) }));
+        }
+    }
+    renderFormFields() {
+        return this.formConfigArray.map(fieldConfig => {
+            const fieldGroupStyle = fieldConfig['operator-selector']
+                ? { display: 'flex', flexDirection: 'row', background: '#ccc', padding: '10px', borderRadius: '8px', marginBottom: '20px', gap: '24px' }
+                : { display: 'flex', flexDirection: 'column', marginBottom: '20px', marginRight: '24px' };
+            const fieldElement = this.getField(fieldConfig);
+            const operatorSelector = fieldConfig['operator-selector'] ? (h("udp-selector", { label: "Search Condition", name: fieldConfig['field-name'] + '_operator', options: this.selectorOptions, onChange: this.handleInputChange })) : null;
+            return (h("div", { style: fieldGroupStyle }, fieldElement, operatorSelector));
+        });
+    }
+    render() {
+        return h("div", { key: '7b179ad1815843850858da9ab88eabca05257abc', class: "form-root" }, this.renderFormFields());
+    }
+    static get is() { return "udp-dynamic-form"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["udp-dynamic-form.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["udp-dynamic-form.css"]
+        };
+    }
+    static get states() {
+        return {
+            "formData": {}
+        };
+    }
+    static get methods() {
+        return {
+            "getFormData": {
+                "complexType": {
+                    "signature": "() => Promise<{ searchField: string; searchOperator: any; searchValue: any; groupId: number; }[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<{ searchField: string; searchOperator: any; searchValue: any; groupId: number; }[]>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=udp-dynamic-form.js.map

package/dist/collection/components/my-component/UI/forms/dynamic-form/udp-dynamic-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"udp-dynamic-form.js","sourceRoot":"","sources":["../../../../../../src/components/my-component/UI/forms/dynamic-form/udp-dynamic-form.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, State, Method, Element } from '@stencil/core';\n\n/**\n * @deprecated This component is deprecated and will be removed in a future version.\n * Please use Please use <stencil-form> and <stencil-field> components or udp-forms-renderer instead.\n */\n@Component({\n  tag: 'udp-dynamic-form',\n  styleUrl: 'udp-dynamic-form.css',\n  shadow: true,\n})\nexport class UdpDynamicForm {\n  @Element() el: HTMLElement;\n\n  @State() formData: any = {};\n\n  componentWillLoad() {\n    console.warn('The \"udp-dynamic-form\" component is deprecated and will be removed in a future version. Please use <stencil-form> and <stencil-field> components instead.');\n  }\n\n  componentDidLoad() {\n    // Component ready\n  }\n\n  exampleList = [\n    {\n      name: 'Tom Hanks',\n      age: 65,\n      gender: 'male',\n      nationality: 'American',\n      bestMovies: ['Forrest Gump', 'Saving Private Ryan', 'Cast Away'],\n    },\n    {\n      name: 'Meryl Streep',\n      age: 72,\n      gender: 'female',\n      nationality: 'American',\n      bestMovies: ['The Devil Wears Prada', \"Sophie's Choice\", 'The Iron Lady'],\n    },\n    {\n      name: 'Leonardo DiCaprio',\n      age: 47,\n      gender: 'male',\n      nationality: 'American',\n      bestMovies: ['Titanic', 'The Revenant', 'Inception'],\n    },\n    {\n      name: 'Scarlett Johansson',\n      age: 37,\n      gender: 'female',\n      nationality: 'American',\n      bestMovies: ['Lost in Translation', 'Marriage Story', 'Avengers: Endgame'],\n    },\n    {\n      name: 'Robert Downey Jr.',\n      age: 56,\n      gender: 'male',\n      nationality: 'American',\n      bestMovies: ['Iron Man', 'The Avengers', 'Chaplin'],\n    },\n  ];\n\n  formConfigArray = [\n    {\n      'field-name': 'ClientContact',\n      'search-operator': 'IN',\n      'label': 'Client Contact',\n      'width': 'half',\n      'groupId': 2,\n    },\n    {\n      'field-name': 'phoneNumber',\n      'search-operator': 'IN',\n      'label': 'Phone Number',\n      'width': 'half',\n      'groupId': 2,\n    },\n    {\n      'field-name': 'title',\n      'search-operator': 'IN',\n      'label': 'Title',\n      'operator-selector': true,\n      'groupId': 2,\n    },\n    {\n      'field-name': 'defaultClient',\n      'search-operator': 'IN',\n      'label': 'Default Client',\n      'groupId': 2,\n    },\n    {\n      'field-name': 'contactStatus',\n      'search-operator': 'IN',\n      'label': 'Contact Status',\n      'width': 'half',\n      'groupId': 2,\n    },\n    {\n      'field-name': 'languageID',\n      'search-operator': 'IN',\n      'label': 'Language ID',\n      'width': 'half',\n      'type': 'select',\n      'options': [\n        { label: 'English', value: '1' },\n        { label: 'French', value: '2' },\n      ],\n    },\n    {\n      'field-name': 'file',\n      'label': 'File',\n      'width': 'half',\n      'type': 'file',\n    },\n    {\n      'field-name': 'list',\n      'label': 'list',\n      displayKey: 'name',\n      multiSelect: true,\n      useCheckbox: false,\n      disableSelection: false,\n      valueKey: 'id',\n      type: 'list',\n      items: [\n        {\n          id: 0,\n          name: 'Tom Hanks',\n          age: 65,\n          gender: 'male',\n          nationality: 'American',\n          bestMovies: ['Forrest Gump', 'Saving Private Ryan', 'Cast Away'],\n          selected: true\n        },\n        {\n          id: 1,\n          name: 'Meryl Streep',\n          age: 72,\n          gender: 'female',\n          nationality: 'American',\n          bestMovies: ['The Devil Wears Prada', \"Sophie's Choice\", 'The Iron Lady'],\n        },\n        {\n          id: 2,\n          name: 'Leonardo DiCaprio',\n          age: 47,\n          gender: 'male',\n          nationality: 'American',\n          bestMovies: ['Titanic', 'The Revenant', 'Inception'],\n        },\n        {\n          id: 3,\n          name: 'Scarlett Johansson',\n          age: 37,\n          gender: 'female',\n          nationality: 'American',\n          bestMovies: ['Lost in Translation', 'Marriage Story', 'Avengers: Endgame'],\n        },\n        {\n          id: 4,\n          name: 'Robert Downey Jr.',\n          age: 56,\n          gender: 'male',\n          nationality: 'American',\n          bestMovies: ['Iron Man', 'The Avengers', 'Chaplin'],\n        },\n      ]\n    },\n  ];\n\n  private selectorOptions = [\n    {\n      value: '=',\n      label: 'Equals',\n    },\n    {\n      value: 'IN',\n      label: 'Contains',\n    },\n    {\n      value: '<>',\n      label: 'Does not Equal',\n    },\n    {\n      value: '>',\n      label: 'Greater Than',\n    },\n    {\n      value: '<',\n      label: 'Less Than',\n    },\n    {\n      value: '>=',\n      label: 'Greater Than or Equal To',\n    },\n    {\n      value: '<=',\n      label: 'Less Than or Equal To',\n    },\n    {\n      value: 'LIKE',\n      label: 'Like',\n    },\n    {\n      value: 'STARTSWITH',\n      label: 'Starts With',\n    },\n    {\n      value: 'BETWEEN',\n      label: 'Between',\n    },\n  ];\n\n  handleInputChange = (event: any, fieldName?: string) => {\n    // If fieldName is provided, it's a text field input\n    if (fieldName) {\n      this.formData[fieldName] = event.target.value;\n    } else {\n      // Handle udp-selector events\n      const detail = event.detail;\n      if (detail && detail.fieldName) {\n        if (detail.fieldName.endsWith('_operator')) {\n          const actualFieldName = detail.fieldName.replace('_operator', '');\n          this.formData[actualFieldName + '_operator'] = detail.value;\n        } else {\n          this.formData[detail.fieldName] = detail.value;\n        }\n      }\n    }\n  };\n\n  @Method()\n  async getFormData() {\n    return this.formConfigArray\n      .filter(config => this.formData[config['field-name']])\n      .map(config => ({\n        searchField: config['field-name'],\n        searchOperator: this.formData[config['field-name'] + '_operator'] || config['search-operator'],\n        searchValue: this.formData[config['field-name']],\n        groupId: config['groupId'], // Add groupId here\n      }));\n  }\n  getField(fieldConfig) {\n    switch (fieldConfig.type) {\n      case 'select':\n        return (\n          <udp-selector label={fieldConfig.label} name={fieldConfig['field-name']} options={fieldConfig.options} onChange={this.handleInputChange}></udp-selector>\n        );\n      case 'file':\n        return <file-upload allowMultiple disallowedFileTypes={['image/png', 'image/jpeg']} />;\n      case 'list':\n        return <selectable-list {...fieldConfig}/>;\n      default:\n        return (\n          <text-field\n            label={fieldConfig.label}\n            placeholder={`Enter ${fieldConfig.label}`}\n            value={this.formData[fieldConfig['field-name']] || ''}\n            onInput={(event) => this.handleInputChange(event, fieldConfig['field-name'])}\n          ></text-field>\n        );\n    }\n  }\n\n  renderFormFields() {\n    return this.formConfigArray.map(fieldConfig => {\n      const fieldGroupStyle = fieldConfig['operator-selector']\n        ? { display: 'flex', flexDirection: 'row', background: '#ccc', padding: '10px', borderRadius: '8px', marginBottom: '20px', gap: '24px' }\n        : { display: 'flex', flexDirection: 'column', marginBottom: '20px', marginRight: '24px' };\n\n      const fieldElement = this.getField(fieldConfig);\n\n      const operatorSelector = fieldConfig['operator-selector'] ? (\n        <udp-selector\n          label=\"Search Condition\"\n          name={fieldConfig['field-name'] + '_operator'}\n          options={this.selectorOptions}\n          onChange={this.handleInputChange}\n        ></udp-selector>\n      ) : null;\n\n      return (\n        <div style={fieldGroupStyle}>\n          {fieldElement}\n          {operatorSelector}\n        </div>\n      );\n    });\n  }\n\n  render() {\n    return <div class=\"form-root\">{this.renderFormFields()}</div>;\n  }\n}\n"]}

package/dist/collection/components/my-component/UI/forms/edit-view-form/edit-view-form-dialog.css

@@ -0,0 +1,14 @@
+.info-columns{
+    display: flex;
+}
+
+.column{
+    width: 100px
+}
+
+.toggle-options {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    margin-bottom: 16px;
+}