kemet-ui 1.3.0 → 1.3.1

package/dist/components/kemet-combo/kemet-combo.js

@@ -78,6 +78,11 @@ export default class KemetCombo extends LitElement {
     };
   }
 
+  constructor() {
+    super();
+    this.options = [];
+  }
+
   firstUpdated() {
     // standard properties
     this.field = this.closest('kemet-field');
@@ -111,7 +116,7 @@ export default class KemetCombo extends LitElement {
   makeOptions() {
     if (this.input) {
       this.filteredOptions = this.options.filter(
-        option => option.toLowerCase().indexOf(this.input.value.toLowerCase()) !== -1,
+        option => option.toLowerCase().indexOf(this.input.value?.toLowerCase()) !== -1,
       );
 
       const options = this.filteredOptions.map(

package/dist/kemet-components.cjs

@@ -463,6 +463,107 @@ class KemetAccordion extends s$1 {
 // eslint-disable-next-line no-unused-expressions
 customElements.get('kemet-accordion') || customElements.define('kemet-accordion', KemetAccordion);
 
+class KemetBadge extends s$1 {
+  static get styles() {
+    return [
+      r$3`
+        :host {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          padding: var(--kemet-badge-padding, 10px);
+          line-height: 1;
+          color: var(--kemet-color-white);
+        }
+
+        :host([status='primary']) {
+          background-color: var(--kemet-color-primary);
+        }
+
+        :host([status='success']) {
+          background-color: var(--kemet-color-success);
+        }
+
+        :host([status='standard']) {
+          background-color: var(--kemet-color-gray6);
+        }
+
+        :host([status='warning']) {
+          background-color: var(--kemet-color-warning);
+        }
+
+        :host([status='error']) {
+          background-color: var(--kemet-color-error);
+        }
+
+        :host([circle]) {
+          border-radius: 50%;
+        }
+
+        :host([pill]) {
+          border-radius: 99rem;
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      /**
+       * The status of the badge
+       */
+      status: {
+        type: String,
+        reflect: true,
+      },
+      /**
+       * Displays the badge in a circle
+       */
+      circle: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Rounds the corners on the badge
+       */
+      pill: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Padding on the badge as a circle
+       */
+      circlePadding: {
+        type: Number,
+        attribute: 'circle-padding',
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    this.status = 'primary';
+    this.pill = false;
+    this.circle = false;
+    this.circlePadding = 0;
+  }
+
+  render() {
+    return $`<slot @slotchange=${() => this.handleSlotChange()}></slot>`;
+  }
+
+  handleSlotChange() {
+    if (this.circle) {
+      this.style.height = `${this.offsetWidth + this.circlePadding}px`;
+      this.style.width = `${this.offsetWidth + this.circlePadding}px`;
+    }
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-badge') || customElements.define('kemet-badge', KemetBadge);
+
 class FormSubmitController {
   host;
   form;
@@ -814,107 +915,6 @@ class KemetButton extends s$1 {
 // eslint-disable-next-line no-unused-expressions
 customElements.get('kemet-button') || customElements.define('kemet-button', KemetButton);
 
-class KemetBadge extends s$1 {
-  static get styles() {
-    return [
-      r$3`
-        :host {
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          padding: var(--kemet-badge-padding, 10px);
-          line-height: 1;
-          color: var(--kemet-color-white);
-        }
-
-        :host([status='primary']) {
-          background-color: var(--kemet-color-primary);
-        }
-
-        :host([status='success']) {
-          background-color: var(--kemet-color-success);
-        }
-
-        :host([status='standard']) {
-          background-color: var(--kemet-color-gray6);
-        }
-
-        :host([status='warning']) {
-          background-color: var(--kemet-color-warning);
-        }
-
-        :host([status='error']) {
-          background-color: var(--kemet-color-error);
-        }
-
-        :host([circle]) {
-          border-radius: 50%;
-        }
-
-        :host([pill]) {
-          border-radius: 99rem;
-        }
-      `,
-    ];
-  }
-
-  static get properties() {
-    return {
-      /**
-       * The status of the badge
-       */
-      status: {
-        type: String,
-        reflect: true,
-      },
-      /**
-       * Displays the badge in a circle
-       */
-      circle: {
-        type: Boolean,
-        reflect: true,
-      },
-      /**
-       * Rounds the corners on the badge
-       */
-      pill: {
-        type: Boolean,
-        reflect: true,
-      },
-      /**
-       * Padding on the badge as a circle
-       */
-      circlePadding: {
-        type: Number,
-        attribute: 'circle-padding',
-      },
-    };
-  }
-
-  constructor() {
-    super();
-
-    this.status = 'primary';
-    this.pill = false;
-    this.circle = false;
-    this.circlePadding = 0;
-  }
-
-  render() {
-    return $`<slot @slotchange=${() => this.handleSlotChange()}></slot>`;
-  }
-
-  handleSlotChange() {
-    if (this.circle) {
-      this.style.height = `${this.offsetWidth + this.circlePadding}px`;
-      this.style.width = `${this.offsetWidth + this.circlePadding}px`;
-    }
-  }
-}
-
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-badge') || customElements.define('kemet-badge', KemetBadge);
-
 /**
  * @license
  * Copyright 2018 Google LLC
@@ -1361,6 +1361,52 @@ class KemetCarouselLast extends s$1 {
 // eslint-disable-next-line no-unused-expressions
 customElements.get('kemet-carousel-last') || customElements.define('kemet-carousel-last', KemetCarouselLast);
 
+class KemetCarouselPrev extends s$1 {
+  static get styles() {
+    return [
+      r$3`
+        :host {
+          cursor: pointer;
+        }
+
+        :host([disabled]) {
+          cursor: not-allowed;
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      disabled: {
+        type: Boolean,
+        reflect: true,
+      },
+    };
+  }
+
+  render() {
+    return $`
+      <span tabindex="0" @keyup=${() => this.prev()} @click=${() => this.prev()}>
+        <slot></slot>
+      </span>
+    `;
+  }
+
+  prev() {
+    if (!this.disabled) {
+      this.dispatchEvent(new CustomEvent('kemet-carousel-prev', {
+        bubbles: true,
+        composed: true,
+        detail: this,
+      }));
+    }
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-carousel-prev') || customElements.define('kemet-carousel-prev', KemetCarouselPrev);
+
 class KemetCarouselLink extends s$1 {
   static get properties() {
     return {
@@ -1465,52 +1511,6 @@ class KemetCarouselNext extends s$1 {
 // eslint-disable-next-line no-unused-expressions
 customElements.get('kemet-carousel-next') || customElements.define('kemet-carousel-next', KemetCarouselNext);
 
-class KemetCarouselPrev extends s$1 {
-  static get styles() {
-    return [
-      r$3`
-        :host {
-          cursor: pointer;
-        }
-
-        :host([disabled]) {
-          cursor: not-allowed;
-        }
-      `,
-    ];
-  }
-
-  static get properties() {
-    return {
-      disabled: {
-        type: Boolean,
-        reflect: true,
-      },
-    };
-  }
-
-  render() {
-    return $`
-      <span tabindex="0" @keyup=${() => this.prev()} @click=${() => this.prev()}>
-        <slot></slot>
-      </span>
-    `;
-  }
-
-  prev() {
-    if (!this.disabled) {
-      this.dispatchEvent(new CustomEvent('kemet-carousel-prev', {
-        bubbles: true,
-        composed: true,
-        detail: this,
-      }));
-    }
-  }
-}
-
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-carousel-prev') || customElements.define('kemet-carousel-prev', KemetCarouselPrev);
-
 class KemetCarouselSlide extends s$1 {
   static get styles() {
     return [
@@ -2165,6 +2165,11 @@ class KemetCombo extends s$1 {
     };
   }
 
+  constructor() {
+    super();
+    this.options = [];
+  }
+
   firstUpdated() {
     // standard properties
     this.field = this.closest('kemet-field');
@@ -2198,7 +2203,7 @@ class KemetCombo extends s$1 {
   makeOptions() {
     if (this.input) {
       this.filteredOptions = this.options.filter(
-        option => option.toLowerCase().indexOf(this.input.value.toLowerCase()) !== -1,
+        option => option.toLowerCase().indexOf(this.input.value?.toLowerCase()) !== -1,
       );
 
       const options = this.filteredOptions.map(

package/dist/kemet-components.js

@@ -459,6 +459,107 @@ class KemetAccordion extends s$1 {
 // eslint-disable-next-line no-unused-expressions
 customElements.get('kemet-accordion') || customElements.define('kemet-accordion', KemetAccordion);
 
+class KemetBadge extends s$1 {
+  static get styles() {
+    return [
+      r$3`
+        :host {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          padding: var(--kemet-badge-padding, 10px);
+          line-height: 1;
+          color: var(--kemet-color-white);
+        }
+
+        :host([status='primary']) {
+          background-color: var(--kemet-color-primary);
+        }
+
+        :host([status='success']) {
+          background-color: var(--kemet-color-success);
+        }
+
+        :host([status='standard']) {
+          background-color: var(--kemet-color-gray6);
+        }
+
+        :host([status='warning']) {
+          background-color: var(--kemet-color-warning);
+        }
+
+        :host([status='error']) {
+          background-color: var(--kemet-color-error);
+        }
+
+        :host([circle]) {
+          border-radius: 50%;
+        }
+
+        :host([pill]) {
+          border-radius: 99rem;
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      /**
+       * The status of the badge
+       */
+      status: {
+        type: String,
+        reflect: true,
+      },
+      /**
+       * Displays the badge in a circle
+       */
+      circle: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Rounds the corners on the badge
+       */
+      pill: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Padding on the badge as a circle
+       */
+      circlePadding: {
+        type: Number,
+        attribute: 'circle-padding',
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    this.status = 'primary';
+    this.pill = false;
+    this.circle = false;
+    this.circlePadding = 0;
+  }
+
+  render() {
+    return $`<slot @slotchange=${() => this.handleSlotChange()}></slot>`;
+  }
+
+  handleSlotChange() {
+    if (this.circle) {
+      this.style.height = `${this.offsetWidth + this.circlePadding}px`;
+      this.style.width = `${this.offsetWidth + this.circlePadding}px`;
+    }
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-badge') || customElements.define('kemet-badge', KemetBadge);
+
 class FormSubmitController {
   host;
   form;
@@ -810,107 +911,6 @@ class KemetButton extends s$1 {
 // eslint-disable-next-line no-unused-expressions
 customElements.get('kemet-button') || customElements.define('kemet-button', KemetButton);
 
-class KemetBadge extends s$1 {
-  static get styles() {
-    return [
-      r$3`
-        :host {
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          padding: var(--kemet-badge-padding, 10px);
-          line-height: 1;
-          color: var(--kemet-color-white);
-        }
-
-        :host([status='primary']) {
-          background-color: var(--kemet-color-primary);
-        }
-
-        :host([status='success']) {
-          background-color: var(--kemet-color-success);
-        }
-
-        :host([status='standard']) {
-          background-color: var(--kemet-color-gray6);
-        }
-
-        :host([status='warning']) {
-          background-color: var(--kemet-color-warning);
-        }
-
-        :host([status='error']) {
-          background-color: var(--kemet-color-error);
-        }
-
-        :host([circle]) {
-          border-radius: 50%;
-        }
-
-        :host([pill]) {
-          border-radius: 99rem;
-        }
-      `,
-    ];
-  }
-
-  static get properties() {
-    return {
-      /**
-       * The status of the badge
-       */
-      status: {
-        type: String,
-        reflect: true,
-      },
-      /**
-       * Displays the badge in a circle
-       */
-      circle: {
-        type: Boolean,
-        reflect: true,
-      },
-      /**
-       * Rounds the corners on the badge
-       */
-      pill: {
-        type: Boolean,
-        reflect: true,
-      },
-      /**
-       * Padding on the badge as a circle
-       */
-      circlePadding: {
-        type: Number,
-        attribute: 'circle-padding',
-      },
-    };
-  }
-
-  constructor() {
-    super();
-
-    this.status = 'primary';
-    this.pill = false;
-    this.circle = false;
-    this.circlePadding = 0;
-  }
-
-  render() {
-    return $`<slot @slotchange=${() => this.handleSlotChange()}></slot>`;
-  }
-
-  handleSlotChange() {
-    if (this.circle) {
-      this.style.height = `${this.offsetWidth + this.circlePadding}px`;
-      this.style.width = `${this.offsetWidth + this.circlePadding}px`;
-    }
-  }
-}
-
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-badge') || customElements.define('kemet-badge', KemetBadge);
-
 /**
  * @license
  * Copyright 2018 Google LLC
@@ -1357,6 +1357,52 @@ class KemetCarouselLast extends s$1 {
 // eslint-disable-next-line no-unused-expressions
 customElements.get('kemet-carousel-last') || customElements.define('kemet-carousel-last', KemetCarouselLast);
 
+class KemetCarouselPrev extends s$1 {
+  static get styles() {
+    return [
+      r$3`
+        :host {
+          cursor: pointer;
+        }
+
+        :host([disabled]) {
+          cursor: not-allowed;
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      disabled: {
+        type: Boolean,
+        reflect: true,
+      },
+    };
+  }
+
+  render() {
+    return $`
+      <span tabindex="0" @keyup=${() => this.prev()} @click=${() => this.prev()}>
+        <slot></slot>
+      </span>
+    `;
+  }
+
+  prev() {
+    if (!this.disabled) {
+      this.dispatchEvent(new CustomEvent('kemet-carousel-prev', {
+        bubbles: true,
+        composed: true,
+        detail: this,
+      }));
+    }
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-carousel-prev') || customElements.define('kemet-carousel-prev', KemetCarouselPrev);
+
 class KemetCarouselLink extends s$1 {
   static get properties() {
     return {
@@ -1461,52 +1507,6 @@ class KemetCarouselNext extends s$1 {
 // eslint-disable-next-line no-unused-expressions
 customElements.get('kemet-carousel-next') || customElements.define('kemet-carousel-next', KemetCarouselNext);
 
-class KemetCarouselPrev extends s$1 {
-  static get styles() {
-    return [
-      r$3`
-        :host {
-          cursor: pointer;
-        }
-
-        :host([disabled]) {
-          cursor: not-allowed;
-        }
-      `,
-    ];
-  }
-
-  static get properties() {
-    return {
-      disabled: {
-        type: Boolean,
-        reflect: true,
-      },
-    };
-  }
-
-  render() {
-    return $`
-      <span tabindex="0" @keyup=${() => this.prev()} @click=${() => this.prev()}>
-        <slot></slot>
-      </span>
-    `;
-  }
-
-  prev() {
-    if (!this.disabled) {
-      this.dispatchEvent(new CustomEvent('kemet-carousel-prev', {
-        bubbles: true,
-        composed: true,
-        detail: this,
-      }));
-    }
-  }
-}
-
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-carousel-prev') || customElements.define('kemet-carousel-prev', KemetCarouselPrev);
-
 class KemetCarouselSlide extends s$1 {
   static get styles() {
     return [
@@ -2161,6 +2161,11 @@ class KemetCombo extends s$1 {
     };
   }
 
+  constructor() {
+    super();
+    this.options = [];
+  }
+
   firstUpdated() {
     // standard properties
     this.field = this.closest('kemet-field');
@@ -2194,7 +2199,7 @@ class KemetCombo extends s$1 {
   makeOptions() {
     if (this.input) {
       this.filteredOptions = this.options.filter(
-        option => option.toLowerCase().indexOf(this.input.value.toLowerCase()) !== -1,
+        option => option.toLowerCase().indexOf(this.input.value?.toLowerCase()) !== -1,
       );
 
       const options = this.filteredOptions.map(