@iamproperty/components 7.5.1--beta6 → 7.5.1--beta7

package/package.json

@@ -5,7 +5,7 @@
     "name": "iamproperty"
   },
   "private": false,
-  "version": "7.5.1--beta6",
+  "version": "7.5.1--beta7",
   "scripts": {
     "temp": "rollup --environment COMPONENT:carousel --config rollup-component.config.cjs --sourcemap",
     "reload": "vite --host",
@@ -53,7 +53,7 @@
     "globals": "^15.14.0",
     "js-cookie": "^3.0.5",
     "prettier": "^3.6.2",
-    "typescript-eslint": "^8.44.0",
+    "typescript-eslint": "^8.44.1",
     "unplugin-vue-markdown": "^28.3.1"
   },
   "devDependencies": {

package/src/components/Input/Input.vue

@@ -1,366 +1,22 @@
-<template>
-  <div :class="wrapperClass()" ref="wrapper">
-    <label
-      v-if="needsLabel()"
-      :class="`form-label${labelclass ? ` ${labelclass}` : ''}`"
-      :for="id"
-      v-html="displayLabel()"
-      :title="title"
-    ></label>
-
-    <!-- Prefix and Suffix -->
-    <span
-      :class="`prefix ${this.prefixClass} ${size ? `prefix-${size}` : ''}`"
-      v-html="prefix"
-      v-if="prefix"
-      role="presentation"
-    ></span>
-    <span
-      :class="`suffix ${this.suffixClass} ${size ? `suffix-${size}` : ''}`"
-      v-html="suffix"
-      v-if="suffix"
-      role="presentation"
-    ></span>
-
-    <!-- Standard input field -->
-    <input
-      v-if="isInput()"
-      v-model="inputVal"
-      :class="`form-control${size ? ` form-control-${size}` : ``}${inputclass ? ` ${inputclass}` : ``}`"
-      :type="type"
-      :name="name ? name : id"
-      :id="id"
-      :pattern="needPattern()"
-      :list="hasOptions()"
-      v-bind="$attrs"
-      v-on:keyup="inputKeyup"
-    />
-
-    <!-- Textarea -->
-    <textarea
-      v-if="type == 'textarea'"
-      v-model="inputVal"
-      :class="`form-control${size ? ` form-control-${size}` : ``}${inputclass ? ` ${inputclass}` : ``}`"
-      :type="type"
-      :name="name ? name : id"
-      :id="id"
-      :pattern="needPattern()"
-      v-bind="$attrs"
-    ></textarea>
-
-    <!-- Range -->
-    <div class="input-group" v-if="type == 'range'">
-      <input
-        v-model="inputVal"
-        :class="`form-range${inputclass ? ` ${inputclass}` : ``}`"
-        :type="type"
-        :name="name ? name : id"
-        :id="id"
-        :pattern="needPattern()"
-        :list="hasOptions()"
-        v-bind="$attrs"
-        oninput="this.nextElementSibling.value=this.value;"
-      />
-      <output class="input-group-text border-0 col-2 col-sm-1 px-0">{{ value }}</output>
-    </div>
-
-    <!-- Color picker -->
-    <div class="input-group" v-if="type == 'color'">
-      <input
-        v-model="inputVal"
-        :class="`form-control form-control-color${inputclass ? ` ${inputclass}` : ``}`"
-        :type="type"
-        :name="name ? name : id"
-        :id="id"
-        :pattern="needPattern()"
-        :list="hasOptions()"
-        v-bind="$attrs"
-        oninput="this.nextElementSibling.value=this.value;"
-      />
-      <output class="input-group-text flex-fill">{{ value ? vale : '#000000' }}</output>
-    </div>
-
-    <!-- Select/dropdown -->
-    <select
-      v-if="type == 'select'"
-      v-model="inputVal"
-      :class="`form-select${size ? ` form-select-${size}` : ``}${inputclass ? ` ${inputclass}` : ``}`"
-      :type="type"
-      :name="id"
-      :id="id"
-      :pattern="needPattern()"
-      v-bind="$attrs"
-    >
-      <option v-for="(value, index) in options" :key="index" :value="value.value">
-        {{ value.display ? value.display : value.value }}
-      </option>
-    </select>
-
-    <!-- Checkbox -->
-    <input
-      v-if="type == 'checkbox' || type == 'radio'"
-      class="form-check-input"
-      :type="type"
-      :name="name ? name : id"
-      :id="id"
-      v-bind="$attrs"
-    />
-    <label
-      v-if="type == 'checkbox' || type == 'radio'"
-      :class="`form-label form-check-label${labelclass ? ` ${labelclass}` : ''}`"
-      :for="id"
-      v-html="label"
-    ></label>
-
-    <!-- Checkbox Button -->
-    <input
-      v-if="type == 'checkbox-btn' || type == 'radio-btn'"
-      :class="`btn-check${inputclass ? ` ${inputclass}` : ``}`"
-      :type="type.replace('-btn', '')"
-      autocomplete="off"
-      :name="name ? name : id"
-      :id="id"
-      v-bind="$attrs"
-    />
-    <label
-      v-if="type == 'checkbox-btn' || type == 'radio-btn'"
-      :class="`btn${labelclass ? ` ${labelclass}` : ''}`"
-      :for="id"
-      v-html="label"
-      @click="clickEvent"
-    ></label>
+<script setup>
+  import { onMounted } from 'vue';
+
+  const component = 'input';
+
+  onMounted(() => {
+    import(`../../../assets/js/components/${component}/${component}.component.min.js`)
+      .then((module) => {
+        if (!window.customElements.get(`iam-${component}`))
+          window.customElements.define(`iam-${component}`, module.default);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+  });
+</script>
 
+<template>
+  <iam-input>
     <slot></slot>
-    <!-- Error message -->
-    <span v-if="errormsg" class="invalid-feedback mb-0" v-html="errormsg"></span>
-
-    <datalist v-if="allowDatalist()" :id="id + '-list'">
-      <option v-for="(value, index) in options" :key="index" :value="value.value">
-        {{ value.value }}
-      </option>
-    </datalist>
-  </div>
+  </iam-input>
 </template>
-
-<script>
-  export default {
-    name: 'Input',
-    props: {
-      value: {
-        type: String,
-        required: false,
-      },
-      id: {
-        type: String,
-        required: true,
-      },
-      name: {
-        type: String,
-        required: false,
-      },
-      list: {
-        type: String,
-        required: false,
-      },
-      label: {
-        type: String,
-        required: false,
-      },
-      labelclass: {
-        type: String,
-        required: false,
-      },
-      inputclass: {
-        type: String,
-        required: false,
-      },
-      type: {
-        type: String,
-        required: false,
-        default: 'text',
-      },
-      size: {
-        type: String,
-        required: false,
-      },
-      errormsg: {
-        type: String,
-        required: false,
-      },
-      options: {
-        type: Array,
-        required: false,
-      },
-      prefix: {
-        type: String,
-        required: false,
-      },
-      prefixClass: {
-        type: String,
-        required: false,
-      },
-      suffix: {
-        type: String,
-        required: false,
-      },
-      pattern: {
-        type: String,
-        required: false,
-      },
-      suffixClass: {
-        type: String,
-        required: false,
-      },
-      title: {
-        type: String,
-        required: false,
-      },
-      hint: {
-        type: String,
-        required: false,
-      },
-      multiple: {
-        type: String,
-        required: false,
-      },
-    },
-    computed: {
-      displayLabel() {
-        return () => {
-          if (this.$attrs.multiple) {
-            return (
-              this.label +
-              `<span class="small d-block text-body font-body fw-normal">Hold down the Ctrl (windows) or Command (Mac) button to select multiple options.</span>`
-            );
-          }
-
-          if (this.hint) {
-            return this.label + `<span class="small d-block text-body font-body fw-normal">${this.hint}</span>`;
-          }
-
-          return this.label;
-        };
-      },
-      wrapperClass() {
-        return () => {
-          switch (this.type) {
-            case 'radio':
-            case 'checkbox':
-              return 'form-check';
-            case 'radio-btn':
-            case 'checkbox-btn':
-              return false;
-            default:
-              return 'form-control__wrapper';
-          }
-        };
-      },
-      needPattern() {
-        return () => {
-          if (this.pattern) return this.pattern;
-
-          // Create fallback patterns for input types
-          switch (this.type) {
-            case 'datetime-local':
-              return '[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}';
-          }
-
-          return '(.*?)';
-        };
-      },
-      needsLabel() {
-        return () => {
-          switch (this.type) {
-            case 'radio':
-            case 'radio-btn':
-            case 'checkbox':
-            case 'checkbox-btn':
-              return false;
-            default:
-              return true;
-          }
-        };
-      },
-      isInput() {
-        return () => {
-          switch (this.type) {
-            case 'textarea':
-            case 'select':
-            case 'radio':
-            case 'radio-btn':
-            case 'checkbox':
-            case 'checkbox-btn':
-            case 'range':
-            case 'color':
-              return false;
-            default:
-              return true;
-          }
-        };
-      },
-      allowDatalist() {
-        return () => {
-          switch (this.type) {
-            case 'select':
-            case 'radio':
-            case 'radio-btn':
-            case 'checkbox':
-            case 'checkbox-btn':
-              return false;
-            default:
-              return true;
-          }
-        };
-      },
-      hasOptions() {
-        return () => {
-          if (this.list) return this.list;
-
-          if (this.options) {
-            return this.id + '-list';
-          }
-        };
-      },
-      inputVal: {
-        get() {
-          // Default to the first options if no value set for select field
-          if (this.value == undefined && this.options != undefined && this.type == 'select') {
-            // Return an empty array if muliple attribute is set
-            if (this.$attrs.multiple) {
-              return [];
-            }
-            return this.options[0].value;
-          }
-
-          return this.value;
-        },
-        set(val) {
-          this.$emit('input', val);
-        },
-      },
-    },
-    mounted() {
-      this.$nextTick(function () {
-        let element = this.$refs.wrapper;
-        // Remove unnecessary divs that may get in the way of our CSS sibling selectors working
-        if (
-          (element.parentNode && element.parentNode.classList.contains('form-check')) ||
-          element.classList.length == 0
-        ) {
-          const fragment = document.createDocumentFragment();
-          Array.from(element.childNodes).forEach((child) => fragment.appendChild(child));
-          element.parentNode.insertBefore(fragment, element);
-          element.parentNode.removeChild(element);
-        }
-      });
-    },
-    methods: {
-      inputKeyup(event) {
-        this.$emit('keyupEvent', event);
-      },
-      clickEvent() {
-        this.$emit('bus');
-      },
-    },
-  };
-</script>

package/src/components/InputRange/InputRange.vue

@@ -0,0 +1,22 @@
+<script setup>
+  import { onMounted } from 'vue';
+
+  const component = 'input-range';
+
+  onMounted(() => {
+    import(`../../../assets/js/components/${component}/${component}.component.min.js`)
+      .then((module) => {
+        if (!window.customElements.get(`iam-${component}`))
+          window.customElements.define(`iam-${component}`, module.default);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+  });
+</script>
+
+<template>
+  <iam-input-range>
+    <slot></slot>
+  </iam-input-range>
+</template>

package/src/components/Modal/Modal.vue

@@ -0,0 +1,22 @@
+<script setup>
+  import { onMounted } from 'vue';
+
+  const component = 'modal';
+
+  onMounted(() => {
+    import(`../../../assets/js/components/${component}/${component}.component.min.js`)
+      .then((module) => {
+        if (!window.customElements.get(`iam-${component}`))
+          window.customElements.define(`iam-${component}`, module.default);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+  });
+</script>
+
+<template>
+  <iam-modal>
+    <slot></slot>
+  </iam-modal>
+</template>

package/src/components/MultiStepModal/MultiStepModal.vue

@@ -0,0 +1,23 @@
+<script setup>
+  import { onMounted } from 'vue';
+
+  onMounted(() => {
+    //this.$nextTick(function () {
+
+    import(`../../../assets/js/components/multi-step-modal/multi-step-modal.component.js`)
+      .then((module) => {
+        if (!window.customElements.get(`iam-multi-step-modal`))
+          window.customElements.define(`iam-multi-step-modal`, module.default);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+    //})
+  });
+</script>
+
+<template>
+  <iam-multi-step-modal>
+    <slot></slot>
+  </iam-multi-step-modal>
+</template>

package/src/components/{PasswordIndicator/PasswordIndicator.vue → Password/Password.vue}

@@ -1,23 +1,23 @@
-<script setup>
-  import { onMounted } from 'vue';
-
-  const component = 'password-indicator';
-
-  onMounted(() => {
-
-    import(`../../../assets/js/components/${component}/${component}.component.min.js`)
-      .then((module) => {
-        if (!window.customElements.get(`iam-${component}`))
-          window.customElements.define(`iam-${component}`, module.default);
-      })
-      .catch((err) => {
-        console.log(err.message);
-      });
-  });
-</script>
-
-<template>
-  <iam-password-indicator>
-    <slot></slot>
-  </iam-password-indicator>
-</template>
+<script setup>
+  import { onMounted } from 'vue';
+
+  const component = 'password';
+
+  onMounted(() => {
+
+    import(`../../../assets/js/components/${component}/${component}.component.min.js`)
+      .then((module) => {
+        if (!window.customElements.get(`iam-${component}`))
+          window.customElements.define(`iam-${component}`, module.default);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+  });
+</script>
+
+<template>
+  <iam-password>
+    <slot></slot>
+  </iam-password>
+</template>

package/assets/js/components/password-indicator/password-indicator.component.js

@@ -1,19 +0,0 @@
-import { trackComponentRegistered } from '../_global.js';
-import passwordIndicator from '../../modules/password-indicator.js';
-trackComponentRegistered('iam-password-indicator');
-class iamPasswordIndicator extends HTMLElement {
-    constructor() {
-        var _a;
-        super();
-        this.attachShadow({ mode: 'open' });
-        const template = document.createElement('template');
-        template.innerHTML = `
-     <slot></slot>
-    `;
-        (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.appendChild(template.content.cloneNode(true));
-    }
-    connectedCallback() {
-        passwordIndicator(this);
-    }
-}
-export default iamPasswordIndicator;

package/assets/js/components/password-indicator/password-indicator.component.min.js

@@ -1,7 +0,0 @@
-/*!
-  * iamKey v7.5.1--beta6
-  * Copyright 2022-2025 iamproperty
-  */const c=t=>{window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:t})},i=function(t){var a;const s=t.querySelector("button"),e=(a=t?.parentNode)===null||a===void 0?void 0:a.querySelector("input");t.addEventListener("click",p=>{const o=e.type,n=o==="password"?"text":"password",d=o==="password";if(e.setAttribute("type",n),e.setAttribute("data-password-type",d),t.hasAttribute("data-alt-class")){const r=t.getAttribute("data-alt-class");t.setAttribute("data-alt-class",s.getAttribute("class")),s.setAttribute("class",r)}})},l=function(t){i(t)};c("iam-password-indicator");class u extends HTMLElement{constructor(){var a;super(),this.attachShadow({mode:"open"});const s=document.createElement("template");s.innerHTML=`
-     <slot></slot>
-    `,(a=this.shadowRoot)===null||a===void 0||a.appendChild(s.content.cloneNode(!0))}connectedCallback(){l(this)}}export{u as default};
-//# sourceMappingURL=password-indicator.component.min.js.map

package/assets/js/components/password-indicator/password-indicator.component.min.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"password-indicator.component.min.js","sources":["../_global.js","../../modules/password-indicator.js","password-indicator.component.js"],"sourcesContent":["export const trackComponentRegistered = (componentName) => {\n    // Data layer Web component created\n    window.dataLayer = window.dataLayer || [];\n    window.dataLayer.push({\n        event: 'customElementRegistered',\n        element: componentName,\n    });\n};\nexport const trackComponent = (component, componentName, trackEvents) => {\n    // Data layer Web component created\n    window.dataLayer = window.dataLayer || [];\n    window.dataLayer.push({\n        event: 'customElementAdded',\n        element: componentName,\n    });\n    trackEvents.forEach((eventName) => {\n        component.addEventListener(eventName, function (event) {\n            const eventDetails = {\n                event: eventName,\n                element: componentName,\n                target: event.target,\n            };\n            Object.keys(event.detail).forEach((eventKey) => {\n                const eventDetail = event.detail[eventKey];\n                eventDetails[eventKey] = eventDetail;\n            });\n            window.dataLayer.push(eventDetails);\n        });\n    });\n    return true;\n};\n","export const changeType = function (element) {\n    var _a;\n    const buttonEle = element.querySelector('button');\n    const associatedInput = (_a = element === null || element === void 0 ? void 0 : element.parentNode) === null || _a === void 0 ? void 0 : _a.querySelector('input');\n    element.addEventListener('click', (event) => {\n        const currentType = associatedInput.type;\n        const newType = currentType === 'password' ? 'text' : 'password';\n        const isPasswordType = currentType === 'password';\n        associatedInput.setAttribute('type', newType);\n        associatedInput.setAttribute('data-password-type', isPasswordType);\n        if (element.hasAttribute('data-alt-class')) {\n            const newClass = element.getAttribute('data-alt-class');\n            element.setAttribute('data-alt-class', buttonEle.getAttribute('class'));\n            buttonEle.setAttribute('class', newClass);\n        }\n    });\n};\nconst passwordIndicator = function (element) {\n    changeType(element);\n};\nexport default passwordIndicator;\n","import { trackComponentRegistered } from '../_global.js';\nimport passwordIndicator from '../../modules/password-indicator.js';\ntrackComponentRegistered('iam-password-indicator');\nclass iamPasswordIndicator extends HTMLElement {\n    constructor() {\n        var _a;\n        super();\n        this.attachShadow({ mode: 'open' });\n        const template = document.createElement('template');\n        template.innerHTML = `\r\n     <slot></slot>\r\n    `;\n        (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        passwordIndicator(this);\n    }\n}\nexport default iamPasswordIndicator;\n"],"names":["trackComponentRegistered","componentName","changeType","element","_a","buttonEle","associatedInput","event","currentType","newType","isPasswordType","newClass","passwordIndicator","iamPasswordIndicator","template"],"mappings":";;;IAAO,MAAMA,EAA4BC,GAAkB,CAEvD,OAAO,UAAY,OAAO,WAAa,CAAA,EACvC,OAAO,UAAU,KAAK,CAClB,MAAO,0BACP,QAASA,CACjB,CAAK,CACL,ECPaC,EAAa,SAAUC,EAAS,CACzC,IAAIC,EACJ,MAAMC,EAAYF,EAAQ,cAAc,QAAQ,EAC1CG,GAAmBF,EAAuDD,GAAQ,cAAgB,MAAQC,IAAO,OAAS,OAASA,EAAG,cAAc,OAAO,EACjKD,EAAQ,iBAAiB,QAAUI,GAAU,CACzC,MAAMC,EAAcF,EAAgB,KAC9BG,EAAUD,IAAgB,WAAa,OAAS,WAChDE,EAAiBF,IAAgB,WAGvC,GAFAF,EAAgB,aAAa,OAAQG,CAAO,EAC5CH,EAAgB,aAAa,qBAAsBI,CAAc,EAC7DP,EAAQ,aAAa,gBAAgB,EAAG,CACxC,MAAMQ,EAAWR,EAAQ,aAAa,gBAAgB,EACtDA,EAAQ,aAAa,iBAAkBE,EAAU,aAAa,OAAO,CAAC,EACtEA,EAAU,aAAa,QAASM,CAAQ,CAC5C,CACJ,CAAC,CACL,EACMC,EAAoB,SAAUT,EAAS,CACzCD,EAAWC,CAAO,CACtB,ECjBAH,EAAyB,wBAAwB,EACjD,MAAMa,UAA6B,WAAY,CAC3C,aAAc,CACV,IAAIT,EACJ,MAAK,EACL,KAAK,aAAa,CAAE,KAAM,MAAM,CAAE,EAClC,MAAMU,EAAW,SAAS,cAAc,UAAU,EAClDA,EAAS,UAAY;AAAA;AAAA,OAGpBV,EAAK,KAAK,cAAgB,MAAQA,IAAO,QAAkBA,EAAG,YAAYU,EAAS,QAAQ,UAAU,EAAI,CAAC,CAC/G,CACA,mBAAoB,CAChBF,EAAkB,IAAI,CAC1B,CACJ"}