legalesign-document-viewer 0.7.1 → 0.7.2

package/dist/collection/components/ls-formfield/inputs/ls-number-input/ls-number-input.css

@@ -0,0 +1,273 @@
+* {
+  box-sizing: border-box;
+  font-family:
+    'IBM Plex Sans',
+    sans-serif;
+  margin: 0;
+}
+
+.host {
+  display: flex;
+  width: 100%;
+  padding: 0.25rem;
+  align-items: flex-start;
+  gap: 0.25rem;
+  border-radius: 0.625rem;
+  border: 1px solid var(--Grey-20, #edeff2);
+  background: var(--Grey-10, #f7f8fa);
+}
+
+.input-container {
+  position: relative;
+  display: flex;
+  width: 100%;
+}
+
+#fieldIcon {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 0.75rem;
+  color: var(--gray-80);
+}
+
+#fieldIconDisabled {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 0.75rem;
+  color: var(--gray-60);
+}
+
+#password-icon {
+  padding-right: 0.25rem;
+}
+
+.icon-input {
+  padding-left: 2.5rem !important;
+}
+
+.button-input {
+  padding-right: 2.5rem !important;
+}
+
+.right-items-input {
+  padding-right: 4rem !important;
+}
+
+.input-basic {
+  display: flex;
+  width: 100%;
+  height: 2.25rem;
+  padding: 0.5rem 0.75rem;
+  align-items: center;
+  gap: 0.5rem;
+  align-self: stretch;
+  border-radius: 0.5rem;
+  /* Shadow/sm */
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  /* text-sm/leading-5/font-regular */
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+}
+
+.input-ls {
+  display: flex;
+  width: 100%;
+  height: 1.75rem;
+  padding: 0 0.5rem;
+  align-items: center;
+  gap: 0.5rem;
+  align-self: stretch;
+  border-radius: 0.375rem;
+  /* Shadow/sm */
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  /* text-sm/leading-5/font-regular */
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+
+
+}
+
+.input-ls::-webkit-outer-spin-button,
+.input-ls::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.input-ls {
+  -moz-appearance: textfield;
+}
+
+input-base:active:not(:disabled) {
+  outline: 1px solid var(--Legalesign-Blue-60, #4456f6);
+  box-shadow:
+    0px 0px 3px 0px rgba(0, 15, 153, 0.25),
+    0px 0px 2px 0px rgba(0, 15, 153, 0.06),
+    0px 0px 0px 4px #9dc3fc;
+}
+
+input:focus:not(:disabled) {
+  outline: 1px solid var(--Legalesign-Blue-60, #4456f6);
+  box-shadow:
+    0px 0px 3px 0px rgba(0, 15, 153, 0.25),
+    0px 0px 2px 0px rgba(0, 15, 153, 0.06),
+    0px 0px 0px 4px #9dc3fc;
+}
+
+.default {
+  border: 1px solid var(--gray-40, #d8d9dc);
+  background: var(--White, #fff);
+  color: var(--gray-100);
+}
+
+.default:hover {
+  border: 1px solid var(--gray-50, #d8d9dc);
+  background: var(--White, #fff);
+  color: var(--gray-110);
+}
+
+.disabled {
+  border: 1px solid var(--gray-40, #d8d9dc);
+  background: var(--gray-10, #f7f8fa);
+  color: var(--gray-60);
+  cursor: not-allowed;
+}
+
+.display-only {
+  border: 1px solid var(--gray-40, #d8d9dc);
+  background: var(--gray-10, #f7f8fa);
+  color: var(--gray-100);
+  cursor: not-allowed;
+}
+
+.invalid {
+  border: 1px solid var(--red-40, #ffa19e);
+  background: var(--White, #fff);
+  color: var(--Red-100, #7a1714);
+}
+
+.invalid:hover {
+  border: 1px solid var(--red-50, #ffa19e);
+  background: var(--White, #fff);
+  color: var(--Red-100, #7a1714);
+}
+
+.valid {
+  border: 1px solid var(--green-40, #72f0c2);
+  background: var(--White, #fff);
+  color: var(--Green-100, #125241);
+}
+
+.valid:hover {
+  border: 1px solid var(--green-50, #72f0c2);
+  background: var(--White, #fff);
+  color: var(--Green-100, #125241);
+}
+
+.right-items {
+  position: absolute;
+  padding: 0.25rem;
+  height: 2.25rem;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+}
+
+#invalidIcon {
+  margin: 0 0.5rem;
+  color: var(--red-70);
+}
+
+#validIcon {
+  margin: 0 0.5rem;
+  color: var(--green-60);
+}
+
+.button {
+  display: flex;
+  height: 1.75rem;
+  width: 1.75rem;
+  padding: 0.25rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.375rem;
+  border: 1px solid var(--gray-50, #c8c9cc);
+  background: var(--White, #fff);
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+
+  #buttonIcon {
+    color: var(--gray-90);
+  }
+}
+
+.button-disabled {
+  display: flex;
+  height: 1.75rem;
+  width: 1.75rem;
+  padding: 0.25rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.375rem;
+  border: 1px solid var(--gray-40, #D8D9DC);
+  background: var(--gray-=10, #F7F8FA);
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+  cursor: not-allowed;
+
+  #buttonIcon {
+    color: var(--gray-70);
+  }
+}
+
+.button:hover {
+  border: 1px solid var(--gray-50, #c8c9cc);
+  background: var(--gray-20, #edeff2);
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+
+  #buttonIcon {
+    color: var(--gray-100);
+  }
+}
+
+.button:active {
+  border: 1px solid var(--Primary-Blue-Light, #4456f6);
+  background: var(--White, #fff);
+  box-shadow:
+    0px 0px 4px 0px #c7ddff inset,
+    0px 0px 0px 4px #9dc3fc;
+
+  #buttonIcon {
+    color: var(--gray-100);
+  }
+}
+
+.button:focus {
+  display: flex;
+  height: 1.75rem;
+  width: 1.75rem;
+  padding: 0.25rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.375rem;
+  border: 1px solid var(--Primary-Blue-Light, #4456f6);
+  background: var(--White, #fff);
+  box-shadow:
+    0px 0px 4px 0px #c7ddff inset,
+    0px 0px 0px 4px #9dc3fc;
+
+  #buttonIcon {
+    color: var(--gray-100);
+  }
+}

package/dist/collection/components/ls-formfield/inputs/ls-number-input/ls-number-input.js

@@ -0,0 +1,336 @@
+import { h } from "@stencil/core";
+import clsx from "clsx";
+export class LsNumberInput {
+    type = 'ls';
+    name;
+    value = 0;
+    placeholder;
+    aria;
+    inputRef;
+    disabled;
+    required;
+    valid;
+    dirty;
+    countMax;
+    buttonClick;
+    buttonIcon;
+    fieldIcon;
+    handleChange = (event) => {
+        this.value = event.target.value;
+    };
+    handlePlus = () => {
+        this.value = this.value + 1;
+    };
+    handleMinus = () => {
+        this.value = this.value - 1;
+    };
+    render() {
+        const { type, name, value, placeholder, aria, disabled, required, valid, dirty, buttonClick, buttonIcon, fieldIcon, handleChange, handleMinus, handlePlus, } = this;
+        const inputClass = clsx(type === 'ls' ? 'input-ls' : 'input-basic', disabled
+            ? 'disabled'
+            : dirty && valid
+                ? 'valid'
+                : dirty && !valid
+                    ? 'invalid'
+                    : 'default', fieldIcon && 'icon-input', dirty && 'button-input', buttonIcon && 'button-input', buttonIcon && dirty && 'right-items-input');
+        const plusMinusClass = clsx(disabled ? 'button-disabled' : 'button');
+        return (h("host", { key: '854a934295c4f06d0a0218bb26df4c2b8347ad8c', class: type === 'ls' && 'host' }, type === 'ls' && (h("button", { key: 'b9b060518ad7934720558bace95664f0d270afd7', class: plusMinusClass, onClick: () => handleMinus(), disabled: disabled }, h("ls-icon", { key: '0c0262976564f452599eca98b4174e5885e86d51', id: 'buttonIcon', name: 'minus-sm' }))), h("div", { key: '118d6e36fe7aa2bd1c63b1ede4d88f90c3e14eae', class: 'input-container' }, fieldIcon && (h("ls-icon", { key: 'a2c613b5ce3fc312c27cf80e9f8c7c709a6ce9eb', id: disabled ? 'fieldIconDisabled' : 'fieldIcon', name: fieldIcon })), h("input", { key: '03c2a74000eeaca0d8abe0f2f95519a863bd1939', type: 'number', class: inputClass, id: name, name: name, value: value, placeholder: placeholder, "aria-label": aria, required: required, disabled: disabled, onInput: (event) => handleChange(event) }), h("div", { key: '7e213c19c8d7ae104325445d4f029c39fb922315', class: 'right-items' }, dirty && !disabled && (h("ls-icon", { key: '66ed47a6912f656722e70f7b0dc6a74c6de01db7', id: valid ? 'validIcon' : 'invalidIcon', name: valid ? 'check-circle' : 'exclamation-circle' })), buttonIcon && type !== 'ls' && (h("button", { key: '584e1ba750a17469773ff1534c01272a7c488730', class: 'button', onClick: buttonClick }, h("ls-icon", { key: '49d03d49316bb601acb06e0517b63d3834300375', id: 'buttonIcon', name: buttonIcon }))))), type === 'ls' && (h("button", { key: 'ceb2b9fb8f2741c91ec5906ac1bc8f058863d8d6', class: plusMinusClass, onClick: handlePlus, disabled: disabled }, h("ls-icon", { key: 'c40ea5faac37c75f9400868c667cc382a0173218', id: 'buttonIcon', name: 'plus-sm' })))));
+    }
+    static get is() { return "ls-number-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ls-number-input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ls-number-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'basic' | 'ls'",
+                    "resolved": "\"basic\" | \"ls\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'ls'"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "value": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "0"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
+            },
+            "aria": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria"
+            },
+            "inputRef": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "input-ref"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required"
+            },
+            "valid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "valid"
+            },
+            "dirty": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dirty"
+            },
+            "countMax": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "count-max"
+            },
+            "buttonClick": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "button-click"
+            },
+            "buttonIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Icon",
+                    "resolved": "\"text\" | \"signature\" | \"initials\" | \"dropdown\" | \"code\" | \"link\" | \"map\" | \"menu\" | \"search\" | \"table\" | \"template\" | \"document\" | \"required\" | \"mail\" | \"auto-sign\" | \"bell\" | \"home\" | \"briefcase\" | \"shield-check\" | \"shield-exclamation\" | \"cog\" | \"check\" | \"translate\" | \"cash\" | \"location-marker\" | \"user\" | \"users\" | \"user-group\" | \"office-building\" | \"scale\" | \"pencil-alt\" | \"pencil\" | \"eye\" | \"bookmark\" | \"color-swatch\" | \"inbox\" | \"inbox-in\" | \"archive\" | \"clock\" | \"photograph\" | \"tag\" | \"phone\" | \"phone-incoming\" | \"phone-outgoing\" | \"menu-alt-1\" | \"menu-alt-2\" | \"menu-alt-3\" | \"menu-alt-4\" | \"switch-vertical\" | \"switch-horizontal\" | \"x\" | \"plus\" | \"refresh\" | \"question-mark-circle\" | \"exclamation\" | \"cloud-upload\" | \"cloud-download\" | \"chart-pie\" | \"document-download\" | \"document-add\" | \"document-remove\" | \"calender\" | \"camera\" | \"globe-alt\" | \"duplicate\" | \"share\" | \"heart\" | \"globe\" | \"volume-up\" | \"volume-off\" | \"adjustments\" | \"mail-open\" | \"document-duplicate\" | \"credit-card\" | \"lock-closed\" | \"trending-up\" | \"trending-down\" | \"filter\" | \"at-symbol\" | \"trash\" | \"information-circle\" | \"arrow-up\" | \"arrow-right\" | \"arrow-down\" | \"arrow-left\" | \"arrow-circle-right\" | \"arrow-circle-down\" | \"arrow-circle-left\" | \"arrow-circle-up\" | \"sort-ascending\" | \"sort-descending\" | \"x-circle\" | \"check-circle\" | \"exclamation-circle\" | \"plus-circle\" | \"minus-circle\" | \"user-circle\" | \"zoom-in\" | \"zoom-out\" | \"user-add\" | \"dots-horizontal\" | \"dots-vertical\" | \"upload\" | \"download\" | \"view-list\" | \"view-boards\" | \"paper-clip\" | \"emoji-happy\" | \"emoji-sad\" | \"printer\" | \"currency-dollar\" | \"currency-yen\" | \"currency-euro\" | \"currency-pound\" | \"currency-rupee\" | \"chevron-down\" | \"chevron-right\" | \"chevron-up\" | \"chevron-left\" | \"selector\" | \"chat\" | \"receipt-refund\" | \"ticket\" | \"lock-open\" | \"dots-circle-horizontal\" | \"hashtag\" | \"qrcode\" | \"clipboard-check\" | \"clipboard-list\" | \"clipboard\" | \"external-link\" | \"sun\" | \"moon\" | \"clipboard-copy\" | \"annotation\" | \"flag\" | \"collection\" | \"book-open\" | \"lightning-bolt\" | \"folder\" | \"sparkles\" | \"user-remove\" | \"arrow-narrow-up\" | \"arrow-narrow-right\" | \"arrow-narrow-down\" | \"arrow-narrow-left\" | \"reply\" | \"light-bulb\" | \"chat-alt\" | \"document-report\" | \"logout\" | \"key\" | \"ban\" | \"shopping-cart\" | \"cursor-click\" | \"microphone\" | \"speakerphone\" | \"badge-check\" | \"desktop-computer\" | \"chat-alt-2\" | \"support\" | \"newspaper\" | \"bookmark-alt\" | \"view-grid-add\" | \"library\" | \"play\" | \"pause\" | \"stop\" | \"star\" | \"terminal\" | \"chart-square-bar\" | \"eye-off\" | \"chart-bar\" | \"fire\" | \"shopping-bag\" | \"thumb-up\" | \"thumb-down\" | \"hand\" | \"arrows-expand\" | \"view-grid\" | \"puzzle\" | \"folder-download\" | \"folder-add\" | \"folder-remove\" | \"identification\" | \"rss\" | \"scissors\" | \"music-note\" | \"film\" | \"database\" | \"server\" | \"login\" | \"wifi\" | \"backspace\" | \"paper-airplane\" | \"device-mobile\" | \"device-tablet\" | \"chevron-double-right\" | \"chevron-double-down\" | \"chevron-double-left\" | \"chevron-double-up\" | \"finger-print\" | \"cube\" | \"folder-open\" | \"save\" | \"save-as\" | \"document-text\" | \"calculator\" | \"beaker\" | \"gift\" | \"truck\" | \"currency-bangladeshi\" | \"video-camera\" | \"cloud\" | \"cube-transparent\" | \"cake\" | \"phone-missed-call\" | \"plus-sm\" | \"minus-sm\" | \"receipt-tax\" | \"status-online\" | \"status-offline\" | \"presentation-chart-line\" | \"presentation-chart-bar\" | \"fast-forward\" | \"rewind\" | \"chip\" | \"academic-cap\" | \"variable\" | \"document-search\" | \"search-circle\" | \"minus\" | \"arrow-sm-up\" | \"arrow-sm-right\" | \"arrow-sm-down\" | \"arrow-sm-left\" | \"base-circle\" | \"drag-vertical\" | \"menu-alt-5\" | \"text-size\" | \"pin\" | \"keyboard\" | \"move-vertical\" | \"move-horizontal\" | \"rotate-left\" | \"rotate-right\" | \"undo\" | \"redo\" | \"drag-horizontal\" | \"side-panel-close-left\" | \"side-panel-close-right\" | \"side-panel-open-left\" | \"side-panel-open-right\" | \"contacts\" | \"arrow-up-link-out\" | \"device-lock\" | \"auto-date\" | \"revert\" | \"guides\" | \"bulk-send\" | \"field-alignment-left\" | \"field-alignment-centre\" | \"field-alignment-right\" | \"accessibility\" | \"arrows-minimise\" | \"document-info\" | \"document-import-fields\" | \"document-merge-alt2\" | \"document-combine\" | \"field-alignment-top\" | \"field-alignment-middle\" | \"field-alignment-bottom\" | \"box-empty\" | \"box-ticked\" | \"box-crossed\" | \"sort-alphabetically-a-z\" | \"sort-alphabetically-z-a\" | \"linked-document\" | \"document-replace\" | \"field-scale\" | \"field-match-width\" | \"field-match-height\" | \"recipient-link\" | \"recipient-link-broken\" | \"witness-arrow\" | \"branch\" | \"variant\" | \"recipient-details-card\" | \"recipient-details\" | \"field-distribute-vertically\" | \"field-distribute-horizontally\" | \"field-duplicate\" | \"pre-filled-content\" | \"typing-input\" | \"table-split\" | \"add-column-left\" | \"add-column-right\" | \"recipient-links\" | \"list-order\" | \"field-scaling-off\" | \"fit-width\" | \"fit-height\" | \"table-quick-edit\" | \"table-columns\" | \"table-rows\" | \"apply-all-rows\" | \"pagescroll-preview\" | \"page-insert-vertical\" | \"page-insert-horizontal\" | \"circle-quarter\" | \"circle-half\" | \"circle-three-quarter\" | \"time-sort-ascending\" | \"time-sort-descending\" | \"date-sort-ascending\" | \"date-sort-descending\" | \"side-panel-closed\" | \"side-panel-open\" | \"date-sent-sort-ascending\" | \"date-sent-sort-descending\" | \"sort-alphabetically-a-z-alt\" | \"sort-alphabetically-z-a-alt\" | \"template-sent\" | \"template-not-sent\" | \"grid\" | \"linked\" | \"link-broken\" | \"user-assign\" | \"x-letter\" | \"y\" | \"field-selected\" | \"designation\" | \"text-alignment\" | \"field-placement\" | \"typeface\" | \"typesize\" | \"page-layout\" | \"field-special\" | \"link-value\" | \"target\" | \"field-order\" | \"send-arrow\" | \"sent-progress\" | \"circle-filled-quarter\" | \"circle-filled-half\" | \"circle-filled-three-quarter\" | \"document-viewed\" | \"collapse\" | \"expand\" | \"logo\"",
+                    "references": {
+                        "Icon": {
+                            "location": "import",
+                            "path": "../../../../types/Icon",
+                            "id": "src/types/Icon.ts::Icon"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "button-icon"
+            },
+            "fieldIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Icon",
+                    "resolved": "\"text\" | \"signature\" | \"initials\" | \"dropdown\" | \"code\" | \"link\" | \"map\" | \"menu\" | \"search\" | \"table\" | \"template\" | \"document\" | \"required\" | \"mail\" | \"auto-sign\" | \"bell\" | \"home\" | \"briefcase\" | \"shield-check\" | \"shield-exclamation\" | \"cog\" | \"check\" | \"translate\" | \"cash\" | \"location-marker\" | \"user\" | \"users\" | \"user-group\" | \"office-building\" | \"scale\" | \"pencil-alt\" | \"pencil\" | \"eye\" | \"bookmark\" | \"color-swatch\" | \"inbox\" | \"inbox-in\" | \"archive\" | \"clock\" | \"photograph\" | \"tag\" | \"phone\" | \"phone-incoming\" | \"phone-outgoing\" | \"menu-alt-1\" | \"menu-alt-2\" | \"menu-alt-3\" | \"menu-alt-4\" | \"switch-vertical\" | \"switch-horizontal\" | \"x\" | \"plus\" | \"refresh\" | \"question-mark-circle\" | \"exclamation\" | \"cloud-upload\" | \"cloud-download\" | \"chart-pie\" | \"document-download\" | \"document-add\" | \"document-remove\" | \"calender\" | \"camera\" | \"globe-alt\" | \"duplicate\" | \"share\" | \"heart\" | \"globe\" | \"volume-up\" | \"volume-off\" | \"adjustments\" | \"mail-open\" | \"document-duplicate\" | \"credit-card\" | \"lock-closed\" | \"trending-up\" | \"trending-down\" | \"filter\" | \"at-symbol\" | \"trash\" | \"information-circle\" | \"arrow-up\" | \"arrow-right\" | \"arrow-down\" | \"arrow-left\" | \"arrow-circle-right\" | \"arrow-circle-down\" | \"arrow-circle-left\" | \"arrow-circle-up\" | \"sort-ascending\" | \"sort-descending\" | \"x-circle\" | \"check-circle\" | \"exclamation-circle\" | \"plus-circle\" | \"minus-circle\" | \"user-circle\" | \"zoom-in\" | \"zoom-out\" | \"user-add\" | \"dots-horizontal\" | \"dots-vertical\" | \"upload\" | \"download\" | \"view-list\" | \"view-boards\" | \"paper-clip\" | \"emoji-happy\" | \"emoji-sad\" | \"printer\" | \"currency-dollar\" | \"currency-yen\" | \"currency-euro\" | \"currency-pound\" | \"currency-rupee\" | \"chevron-down\" | \"chevron-right\" | \"chevron-up\" | \"chevron-left\" | \"selector\" | \"chat\" | \"receipt-refund\" | \"ticket\" | \"lock-open\" | \"dots-circle-horizontal\" | \"hashtag\" | \"qrcode\" | \"clipboard-check\" | \"clipboard-list\" | \"clipboard\" | \"external-link\" | \"sun\" | \"moon\" | \"clipboard-copy\" | \"annotation\" | \"flag\" | \"collection\" | \"book-open\" | \"lightning-bolt\" | \"folder\" | \"sparkles\" | \"user-remove\" | \"arrow-narrow-up\" | \"arrow-narrow-right\" | \"arrow-narrow-down\" | \"arrow-narrow-left\" | \"reply\" | \"light-bulb\" | \"chat-alt\" | \"document-report\" | \"logout\" | \"key\" | \"ban\" | \"shopping-cart\" | \"cursor-click\" | \"microphone\" | \"speakerphone\" | \"badge-check\" | \"desktop-computer\" | \"chat-alt-2\" | \"support\" | \"newspaper\" | \"bookmark-alt\" | \"view-grid-add\" | \"library\" | \"play\" | \"pause\" | \"stop\" | \"star\" | \"terminal\" | \"chart-square-bar\" | \"eye-off\" | \"chart-bar\" | \"fire\" | \"shopping-bag\" | \"thumb-up\" | \"thumb-down\" | \"hand\" | \"arrows-expand\" | \"view-grid\" | \"puzzle\" | \"folder-download\" | \"folder-add\" | \"folder-remove\" | \"identification\" | \"rss\" | \"scissors\" | \"music-note\" | \"film\" | \"database\" | \"server\" | \"login\" | \"wifi\" | \"backspace\" | \"paper-airplane\" | \"device-mobile\" | \"device-tablet\" | \"chevron-double-right\" | \"chevron-double-down\" | \"chevron-double-left\" | \"chevron-double-up\" | \"finger-print\" | \"cube\" | \"folder-open\" | \"save\" | \"save-as\" | \"document-text\" | \"calculator\" | \"beaker\" | \"gift\" | \"truck\" | \"currency-bangladeshi\" | \"video-camera\" | \"cloud\" | \"cube-transparent\" | \"cake\" | \"phone-missed-call\" | \"plus-sm\" | \"minus-sm\" | \"receipt-tax\" | \"status-online\" | \"status-offline\" | \"presentation-chart-line\" | \"presentation-chart-bar\" | \"fast-forward\" | \"rewind\" | \"chip\" | \"academic-cap\" | \"variable\" | \"document-search\" | \"search-circle\" | \"minus\" | \"arrow-sm-up\" | \"arrow-sm-right\" | \"arrow-sm-down\" | \"arrow-sm-left\" | \"base-circle\" | \"drag-vertical\" | \"menu-alt-5\" | \"text-size\" | \"pin\" | \"keyboard\" | \"move-vertical\" | \"move-horizontal\" | \"rotate-left\" | \"rotate-right\" | \"undo\" | \"redo\" | \"drag-horizontal\" | \"side-panel-close-left\" | \"side-panel-close-right\" | \"side-panel-open-left\" | \"side-panel-open-right\" | \"contacts\" | \"arrow-up-link-out\" | \"device-lock\" | \"auto-date\" | \"revert\" | \"guides\" | \"bulk-send\" | \"field-alignment-left\" | \"field-alignment-centre\" | \"field-alignment-right\" | \"accessibility\" | \"arrows-minimise\" | \"document-info\" | \"document-import-fields\" | \"document-merge-alt2\" | \"document-combine\" | \"field-alignment-top\" | \"field-alignment-middle\" | \"field-alignment-bottom\" | \"box-empty\" | \"box-ticked\" | \"box-crossed\" | \"sort-alphabetically-a-z\" | \"sort-alphabetically-z-a\" | \"linked-document\" | \"document-replace\" | \"field-scale\" | \"field-match-width\" | \"field-match-height\" | \"recipient-link\" | \"recipient-link-broken\" | \"witness-arrow\" | \"branch\" | \"variant\" | \"recipient-details-card\" | \"recipient-details\" | \"field-distribute-vertically\" | \"field-distribute-horizontally\" | \"field-duplicate\" | \"pre-filled-content\" | \"typing-input\" | \"table-split\" | \"add-column-left\" | \"add-column-right\" | \"recipient-links\" | \"list-order\" | \"field-scaling-off\" | \"fit-width\" | \"fit-height\" | \"table-quick-edit\" | \"table-columns\" | \"table-rows\" | \"apply-all-rows\" | \"pagescroll-preview\" | \"page-insert-vertical\" | \"page-insert-horizontal\" | \"circle-quarter\" | \"circle-half\" | \"circle-three-quarter\" | \"time-sort-ascending\" | \"time-sort-descending\" | \"date-sort-ascending\" | \"date-sort-descending\" | \"side-panel-closed\" | \"side-panel-open\" | \"date-sent-sort-ascending\" | \"date-sent-sort-descending\" | \"sort-alphabetically-a-z-alt\" | \"sort-alphabetically-z-a-alt\" | \"template-sent\" | \"template-not-sent\" | \"grid\" | \"linked\" | \"link-broken\" | \"user-assign\" | \"x-letter\" | \"y\" | \"field-selected\" | \"designation\" | \"text-alignment\" | \"field-placement\" | \"typeface\" | \"typesize\" | \"page-layout\" | \"field-special\" | \"link-value\" | \"target\" | \"field-order\" | \"send-arrow\" | \"sent-progress\" | \"circle-filled-quarter\" | \"circle-filled-half\" | \"circle-filled-three-quarter\" | \"document-viewed\" | \"collapse\" | \"expand\" | \"logo\"",
+                    "references": {
+                        "Icon": {
+                            "location": "import",
+                            "path": "../../../../types/Icon",
+                            "id": "src/types/Icon.ts::Icon"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "field-icon"
+            }
+        };
+    }
+}
+//# sourceMappingURL=ls-number-input.js.map

package/dist/collection/components/ls-formfield/inputs/ls-number-input/ls-number-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-number-input.js","sourceRoot":"","sources":["../../../../../src/components/ls-formfield/inputs/ls-number-input/ls-number-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop,  h } from '@stencil/core';\nimport { Icon } from '../../../../types/Icon';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'ls-number-input',\n  styleUrl: 'ls-number-input.css',\n  shadow: true,\n})\nexport class LsNumberInput {\n  @Prop() type: 'basic' | 'ls' = 'ls';\n  @Prop() name: string;\n  @Prop({mutable: true}) value: number = 0 ;\n  @Prop() placeholder?: string;\n  @Prop() aria?: string;\n  @Prop() inputRef?: string;\n  @Prop() disabled: boolean;\n  @Prop() required: boolean;\n  @Prop() valid: boolean;\n  @Prop() dirty: boolean;\n  @Prop() countMax: number;\n  @Prop() buttonClick?: any;\n  @Prop() buttonIcon?: Icon;\n  @Prop() fieldIcon?: Icon;\n\n  handleChange = (event) => {\n    this.value = event.target.value;\n  }\n\n  private handlePlus = () => {\n    this.value = this.value + 1;\n  }\n\n  private handleMinus = () => {\n    this.value = this.value - 1;\n  }\n\n  render() {\n    const {\n      type,\n      name,\n      value,\n      placeholder,\n      aria,\n      disabled,\n      required,\n      valid,\n      dirty,\n      buttonClick,\n      buttonIcon,\n      fieldIcon,\n      handleChange,\n      handleMinus,\n      handlePlus,\n    } = this;\n\n    const inputClass = clsx(\n      type === 'ls' ? 'input-ls' : 'input-basic',\n      disabled\n        ? 'disabled'\n        : dirty && valid\n          ? 'valid'\n          : dirty && !valid\n            ? 'invalid'\n            : 'default',\n      fieldIcon && 'icon-input',\n      dirty && 'button-input',\n      buttonIcon && 'button-input',\n      buttonIcon && dirty && 'right-items-input',\n    );\n\n    const plusMinusClass = clsx(\n      disabled ? 'button-disabled' : 'button'\n    )\n\n    return (\n      <host class={type === 'ls' && 'host'}>\n        {type === 'ls' && (\n          <button class={plusMinusClass} onClick={() => handleMinus()} disabled={disabled}>\n            <ls-icon id='buttonIcon' name='minus-sm'></ls-icon>\n          </button>\n        )}\n        <div class='input-container'>\n          {fieldIcon && (\n            <ls-icon\n              id={disabled ? 'fieldIconDisabled' : 'fieldIcon'}\n              name={fieldIcon}\n            ></ls-icon>\n          )}\n          <input\n            type='number'\n            class={inputClass}\n            id={name}\n            name={name}\n            value={value}\n            placeholder={placeholder}\n            aria-label={aria}\n            required={required}\n            disabled={disabled}\n            onInput={(event) => handleChange(event)}\n          />\n          <div class='right-items'>\n            {dirty && !disabled && (\n              <ls-icon\n                id={valid ? 'validIcon' : 'invalidIcon'}\n                name={valid ? 'check-circle' : 'exclamation-circle'}\n              ></ls-icon>\n            )}\n            {buttonIcon && type !== 'ls' && (\n              <button class='button' onClick={buttonClick}>\n                <ls-icon id='buttonIcon' name={buttonIcon}></ls-icon>\n              </button>\n            )}\n          </div>\n        </div>\n        {type === 'ls' && (\n          <button class={plusMinusClass} onClick={handlePlus} disabled={disabled}>\n            <ls-icon id='buttonIcon' name='plus-sm'></ls-icon>\n          </button>\n        )}\n      </host>\n    );\n  }\n}\n"]}