@iamproperty/components 5.6.1-beta8 → 5.6.1-beta9

package/assets/ts/components/actionbar/actionbar.component.ts

@@ -57,19 +57,19 @@ class iamActionbar extends HTMLElement {
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
     <div class="actionbar__wrapper">
     
-      <div class="actionbar">
+      <div class="actionbar" part="actionbar">
         <slot name="selectall"></slot>
         <div class="safe-area">
           <slot></slot>
           <div class="body">
             <div class="dialog__wrapper dialog__wrapper--right dialog-overflow d-none show">
               <button class="btn btn-secondary btn-compact fa-ellipsis-vertical m-0">More actions</button>
-              <dialog class="dialog--list">
+              <dialog class="dialog--list" part="overflow">
                 <slot name="overflow"></slot>
                 <slot name="menu"></slot>
               </dialog>
             </div>
-            <button class="btn btn-secondary btn-compact btn-sm fa-search" data-search="">Search</button>
+            <button class="btn btn-secondary btn-compact btn-sm fa-search" data-search="" part="search-btn">Search</button>
           </div>
         </div>
       </div>
@@ -79,7 +79,7 @@ class iamActionbar extends HTMLElement {
           <div class="body">
             <div class="dialog__wrapper dialog__wrapper--right dialog-overflow d-none show">
               <button class="btn btn-secondary btn-compact fa-ellipsis-vertical m-0">More actions</button>
-              <dialog class="dialog--list">
+              <dialog class="dialog--list" part="selected-overflow">
                 <slot name="selected-overflow"></slot>
               </dialog>
             </div>
@@ -89,10 +89,10 @@ class iamActionbar extends HTMLElement {
       <div class="actionbar--search">
         <button data-search class="btn btn-compact fa-xmark-large btn-secondary m-0" >Close</button>
 
-        <div class="search-wrapper">
+        <div class="search-wrapper" part="search">
           <label for="search" class="visually-hidden">Input field label</label>
-          <button class="suffix"><i class="fa-regular fa-search"></i></button>
-          <input type="text" id="search" name="search" required="">
+          <button class="suffix" part="search-btn"><i class="fa-regular fa-search"></i></button>
+          <input type="text" id="search" name="search" required="" part="search-input">
         </div>
 
       </div>

package/assets/ts/components/card/card.component.ts

@@ -34,7 +34,7 @@ class iamCard extends HTMLElement {
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
     <div class="card ${classList}" tabindex="0" part="card">
     ${this.hasAttribute('data-image') || this.hasAttribute('data-record') ? `<div class="card__head">${this.hasAttribute('data-image') ? `<img src="${this.getAttribute('data-image')}" alt="" loading="lazy" />` : ``} <div class="card__badges"><slot name="badges"></slot></div></div>` : ''}
-      <div class="card__body">
+      <div class="card__body" part="body">
       ${!this.hasAttribute('data-image') && this.querySelector('[slot="badges"]') && this.querySelector('[slot="checkbox"]') ? `<div class="card__badges card__badges--inline"><slot name="badges"></slot></div>` : ''}
       ${!this.hasAttribute('data-image') && !this.hasAttribute('data-record') && this.querySelector('[slot="badges"]') ? `<div class="card__badges"><slot name="badges"></slot></div>` : ''}
       ${this.hasAttribute('data-illustration') ? `<div class="card__illustration"><img src="${this.getAttribute('data-illustration')}" alt="" loading="lazy" /></div>` : ''}
@@ -43,7 +43,7 @@ class iamCard extends HTMLElement {
       </div>
       ${this.hasAttribute('data-add-link') ? `<button class="btn btn-compact btn-secondary fa-plus">Add property</button>` : ''}
       <slot name="checkbox"></slot>
-      <div class="card__footer">
+      <div class="card__footer" part="footer">
         <slot name="footer"></slot>
         <slot name="btns"></slot>
         ${this.hasAttribute('data-cta') ? `<span class="link d-inline-block pt-0 mb-0">${this.getAttribute('data-cta')}</span>` : ''}

package/assets/ts/components/carousel/carousel.component.ts

@@ -32,12 +32,12 @@ class iamCarousel extends HTMLElement {
           <slot></slot>
         </div>
  
-        <div class="carousel__controls">
+        <div class="carousel__controls" part="controls">
           
         </div>
 
-        <button class="btn btn-prev" data-go="0" disabled>Prev</button>
-        <button class="btn btn-next" data-go="2">Next</button>
+        <button class="btn btn-prev" data-go="0" disabled  part="prev">Prev</button>
+        <button class="btn btn-next" data-go="2" part="next">Next</button>
 
       </div>
     </div>

package/assets/ts/components/fileupload/fileupload.component.ts

@@ -26,13 +26,13 @@ class iamFileupload extends HTMLElement {
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
     <div class="file-upload">
-      <span class="file-upload__title">Upload file</span>
+      <span class="file-upload__title" part="title">Upload file</span>
       <p class="helper-text"><slot name="helper"></slot></p>
-      <button class="btn btn-primary" type="button"><slot name="btn"></slot> Upload ${this.hasAttribute('data-filetype') ? this.getAttribute('data-filetype') : 'file'}</button>
+      <button class="btn btn-primary" type="button" part="button"><slot name="btn"></slot> Upload ${this.hasAttribute('data-filetype') ? this.getAttribute('data-filetype') : 'file'}</button>
       <div class="drop-area"></div>
       <hr/>
       <slot></slot>
-      <div class="files"><slot name="files"></slot></div>
+      <div class="files" part="files"><slot name="files"></slot></div>
     </div>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));

package/assets/ts/components/filterlist/filterlist.component.ts

@@ -40,9 +40,9 @@ class iamFilterlist extends HTMLElement {
     <div class="form-control__wrapper">
       <label for="search" class="visually-hidden">Search</label>
       <span class="suffix" role="presentation"><slot name="icon"></slot></span>
-      <input name="search" id="search" type="text" class="form-control" autocomplete="off" placeholder="Search" />
+      <input name="search" id="search" type="text" class="form-control" autocomplete="off" placeholder="Search" part="search-input" />
     </div>
-    <div class="list__wrapper">
+    <div class="list__wrapper" part="wrapper">
       <slot></slot>
     </div>
     `;

package/assets/ts/components/inline-edit/inline-edit.component.ts

@@ -27,9 +27,9 @@ class iamInlineEdit extends HTMLElement {
     
     <slot></slot>
     <div class="btns">
-      <button class="btn btn-action" id="save"><i class="fa-regular fa-save m-0"></i> Save</button><button class="btn btn-action" id="cancel">Cancel</button>
+      <button class="btn btn-action" id="save" part="save-btn"><i class="fa-regular fa-save m-0"></i> Save</button><button class="btn btn-action" id="cancel">Cancel</button>
     </div>
-    <div class="status pe-none">
+    <div class="status pe-none" part="status">
       <span class="btn btn-action border-0 bg-transparent prevent-invert d-none" id="saving"><i class="fa-regular fa-spinner fa-spin me-1"></i> Saving...</span>
       <span class="btn btn-action border-0 bg-transparent prevent-invert d-none" id="saved"><i class="fa-regular fa-check me-1"></i> Saved</span>
       <span class="btn btn-action border-0 bg-transparent prevent-invert d-none" id="notsaved"><i class="fa-regular fa-circle-info me-1"></i> Not Saved</span>

package/assets/ts/components/multiselect/multiselect.component.ts

@@ -29,9 +29,9 @@ class iamMultiselect extends HTMLElement {
     <div class="wrapper">
       
       <slot name="checked"></slot>
-      <input name="search" id="search" autocomplete="off" required />
+      <input name="search" id="search" autocomplete="off" required part="search-input"/>
       <span class="admin-panel feedback">This field is required</span>
-      <div class="admin-panel dropdown">
+      <div class="admin-panel dropdown" part="dropdown">
         <slot></slot>
       </div>
       <button id="clear"><span class="visually-hidden">Clear</span></button>

package/assets/ts/components/notification/notification.component.ts

@@ -41,7 +41,7 @@ class iamNotification extends HTMLElement {
     <div class="notification">
       <div class="notification__icon"><slot name="icon"></slot></div>
       <div class="notification__inner"><div class="notification__text"><slot></slot></div>${ buttons.length ? `<div class="notification__btns"><slot name="btns"></slot></div>` : '' }</div>
-      ${ this.hasAttribute('data-dismiss') ? `<div class="notification__dismiss"><button data-dismiss-button>Dismiss</button></div>` : ''}
+      ${ this.hasAttribute('data-dismiss') ? `<div class="notification__dismiss"><button data-dismiss-button part="dismiss-btn">Dismiss</button></div>` : ''}
     </div>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));

package/dist/components.es.js

@@ -453,7 +453,7 @@ const N = /* @__PURE__ */ m(ne, [["render", Le]]), Se = {
   },
   created() {
     this.$nextTick(function() {
-      import("./fileupload.component.min-ed94d887.mjs").then((t) => {
+      import("./fileupload.component.min-bd7e3daf.mjs").then((t) => {
         window.customElements.get("iam-fileupload") || window.customElements.define("iam-fileupload", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -483,7 +483,7 @@ const qe = {
   props: {},
   mounted() {
     this.$nextTick(function() {
-      import("./accordion.component.min-6669453f.mjs").then((t) => {
+      import("./accordion.component.min-b6e1e3a4.mjs").then((t) => {
         window.customElements.get("iam-accordion") || window.customElements.define("iam-accordion", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -592,7 +592,7 @@ const Da = /* @__PURE__ */ m(Ne, [["render", Fe]]), ze = {
   name: "Card",
   created() {
     this.$nextTick(function() {
-      import("./card.component-cba2d342.mjs").then((t) => {
+      import("./card.component-9f366742.mjs").then((t) => {
         window.customElements.get("iam-card") || window.customElements.define("iam-card", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -619,7 +619,7 @@ const Va = /* @__PURE__ */ m(ze, [["render", Be]]), Oe = {
   },
   mounted() {
     this.$nextTick(function() {
-      import("./carousel.component.min-c9ef8655.mjs").then((t) => {
+      import("./carousel.component.min-4a93d1d5.mjs").then((t) => {
         window.customElements.get("iam-carousel") || window.customElements.define("iam-carousel", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -646,7 +646,7 @@ const Fa = /* @__PURE__ */ m(Oe, [["render", Ue]]), We = {
   },
   mounted() {
     this.$nextTick(function() {
-      import("./header.component.min-2d982f85.mjs").then((t) => {
+      import("./header.component.min-31d2603a.mjs").then((t) => {
         window.customElements.get("iam-header") || window.customElements.define("iam-header", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1042,7 +1042,7 @@ const Ua = /* @__PURE__ */ m(yt, [["render", Et]]), Ht = {
   name: "Nav",
   mounted() {
     this.$nextTick(function() {
-      import("./nav.component.min-816f0053.mjs").then((t) => {
+      import("./nav.component.min-f2d670e1.mjs").then((t) => {
         window.customElements.get("iam-nav") || window.customElements.define("iam-nav", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1162,7 +1162,7 @@ const Xt = {
   name: "Tabs",
   created() {
     this.$nextTick(function() {
-      import("./tabs.component.min-cbbc5135.mjs").then((t) => {
+      import("./tabs.component.min-1eb5fd48.mjs").then((t) => {
         window.customElements.get("iam-tabs") || window.customElements.define("iam-tabs", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1309,7 +1309,7 @@ function pa(t, a, e, i, r, s) {
 }
 const Za = /* @__PURE__ */ m(ma, [["render", pa]]);
 /*!
-  * iamKey v5.6.1-beta8
+  * iamKey v5.6.1-beta9
   * Copyright 2022-2024 iamproperty
   */
 function ha(t, a) {
@@ -1358,9 +1358,9 @@ class ba extends HTMLElement {
     <div class="form-control__wrapper">
       <label for="search" class="visually-hidden">Search</label>
       <span class="suffix" role="presentation"><slot name="icon"></slot></span>
-      <input name="search" id="search" type="text" class="form-control" autocomplete="off" placeholder="Search" />
+      <input name="search" id="search" type="text" class="form-control" autocomplete="off" placeholder="Search" part="search-input" />
     </div>
-    <div class="list__wrapper">
+    <div class="list__wrapper" part="wrapper">
       <slot></slot>
     </div>
     `, this.shadowRoot.appendChild(i.content.cloneNode(!0));
@@ -1433,7 +1433,7 @@ class wa extends HTMLElement {
     <div class="notification">
       <div class="notification__icon"><slot name="icon"></slot></div>
       <div class="notification__inner"><div class="notification__text"><slot></slot></div>${s.length ? '<div class="notification__btns"><slot name="btns"></slot></div>' : ""}</div>
-      ${this.hasAttribute("data-dismiss") ? '<div class="notification__dismiss"><button data-dismiss-button>Dismiss</button></div>' : ""}
+      ${this.hasAttribute("data-dismiss") ? '<div class="notification__dismiss"><button data-dismiss-button part="dismiss-btn">Dismiss</button></div>' : ""}
     </div>
     `, this.shadowRoot.appendChild(n.content.cloneNode(!0)), document.getElementById("notificationHolder") || document.head.insertAdjacentHTML("beforeend", `<style id="notificationHolder">${r}</style>`);
   }
@@ -1479,7 +1479,7 @@ const ts = /* @__PURE__ */ m($a, [["render", ka]]), Aa = {
   props: {},
   mounted() {
     this.$nextTick(function() {
-      import("./actionbar.component.min-9bf97a1b.mjs").then((t) => {
+      import("./actionbar.component.min-184e6300.mjs").then((t) => {
         window.customElements.get("iam-actionbar") || window.customElements.define("iam-actionbar", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1494,7 +1494,7 @@ function xa(t, a, e, i, r, s) {
 }
 const as = /* @__PURE__ */ m(Aa, [["render", xa]]);
 /*!
-  * iamKey v5.6.1-beta8
+  * iamKey v5.6.1-beta9
   * Copyright 2022-2024 iamproperty
   */
 class R extends HTMLElement {