kemet-ui 1.3.1 → 2.0.0

package/dist/components/kemet-select/kemet-option.js

@@ -1,45 +1,45 @@
+import { __decorate } from "tslib";
 import { html, LitElement } from 'lit';
-
-export default class KemetOption extends LitElement {
-  static get properties() {
-    return {
-      /**
-       * The label of the option
-       */
-      label: {
-        type: String,
-      },
-      /**
-       * The value of the options
-       */
-      value: {
-        type: String,
-      },
-      /**
-       * Determines whether to disable the option
-       */
-      disabled: {
-        type: Boolean,
-      },
-      /**
-       * Selects the option if true
-       */
-      selected: {
-        type: Boolean,
-      },
-    };
-  }
-
-  constructor() {
-    super();
-
-    this.value = '';
-  }
-
-  render() {
-    return html`<slot></slot>`;
-  }
-}
-
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-option') || customElements.define('kemet-option', KemetOption);
+import { customElement, property } from 'lit/decorators.js';
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-option
+ * @summary An option in a select.
+ *
+ * @prop {string} label - The label of the option
+ * @prop {string} value - The value of the options
+ * @prop {boolean} disabled - Determines whether to disable the option
+ * @prop {boolean} selected - Selects the option if true
+ *
+ * @event kemet-input-focused - Fires when the input receives and loses focus
+ * @event kemet-input-status - Fires when there's a change in status
+ *
+ */
+let KemetOption = class KemetOption extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = '';
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+__decorate([
+    property({ type: String })
+], KemetOption.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], KemetOption.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], KemetOption.prototype, "disable", void 0);
+__decorate([
+    property({ type: Boolean })
+], KemetOption.prototype, "selected", void 0);
+KemetOption = __decorate([
+    customElement('kemet-option')
+], KemetOption);
+export default KemetOption;
+//# sourceMappingURL=kemet-option.js.map

package/dist/components/kemet-select/kemet-option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kemet-option.js","sourceRoot":"","sources":["../../../src/components/kemet-select/kemet-option.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D;;;;;;;;;;;;;;;GAeG;AAGH,IAAqB,WAAW,GAAhC,MAAqB,WAAY,SAAQ,UAAU;IAAnD;;QAKE,UAAK,GAAW,EAAE,CAAC;IAWrB,CAAC;IAHC,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;CACF,CAAA;AAdC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACR;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CACV;AAXC,WAAW;IAD/B,aAAa,CAAC,cAAc,CAAC;GACT,WAAW,CAgB/B;eAhBoB,WAAW","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-option\n * @summary An option in a select.\n *\n * @prop {string} label - The label of the option\n * @prop {string} value - The value of the options\n * @prop {boolean} disabled - Determines whether to disable the option\n * @prop {boolean} selected - Selects the option if true\n *\n * @event kemet-input-focused - Fires when the input receives and loses focus\n * @event kemet-input-status - Fires when there's a change in status\n *\n */\n\n@customElement('kemet-option')\nexport default class KemetOption extends LitElement {\n  @property({ type: String })\n  label: string;\n\n  @property({ type: String })\n  value: string = '';\n\n  @property({ type: Boolean })\n  disable: boolean;\n\n  @property({ type: Boolean })\n  selected: boolean;\n\n  render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-option': KemetOption\n  }\n}\n"]}

package/dist/components/kemet-select/kemet-select.d.ts

@@ -0,0 +1,110 @@
+import { LitElement } from 'lit';
+import { FormSubmitController } from '../../utilities/controllers/forms';
+import { KemetFieldInterface } from '../kemet-field/types';
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-select
+ * @summary An enhanced select element.
+ *
+ * @prop {string} slug - A string the uniquely identifies the select
+ * @prop {string} name - The name of the select
+ * @prop {string} value - The value of the select
+ * @prop {array} options - The options the select contains
+ * @prop {string} status - The status of the select
+ * @prop {boolean} required - Determines whether or not the field is required
+ * @prop {boolean} disabled - Determines whether or not the field is disabled
+ * @prop {boolean} multiple - Support of multiple choice selections
+ * @prop {string} icon - The dropdown icon
+ * @prop {number} iconSize - The dropdown icon size
+ * @prop {boolean} filled - Displays a filled select
+ * @prop {boolean} rounded - Displays rounded corners
+ *
+ * @csspart select
+ *
+ * @cssproperty --kemet-select-padding - The padding on the textarea. Default: 1rem.
+ * @cssproperty --kemet-select-border - The border of the textarea. Default: 1px solid var(--kemet-color-background).
+ * @cssproperty --kemet-select-border-color-error - The border of the error state. Default: 1px solid var(--kemet-color-error).
+ * @cssproperty --kemet-select-border-color-success - The border of the success state. Default: 1px solid var(--kemet-color-success).
+ * @cssproperty --kemet-select-border-color-warning - The border of the warning state. Default: 1px solid var(--kemet-color-warning).
+ * @cssproperty --kemet-select-border-radius-rounded - The border radius on rounded. Default: var(--kemet-border-radius).
+ * @cssproperty --kemet-select-border-filled - The border on filled. Default: none.
+ * @cssproperty --kemet-select-color-filled - The color on filled. Default: var(--kemet-color-white).
+ * @cssproperty --kemet-select-background-color-filled - The background-color on filled. Default: var(--kemet-color-primary).
+ * @cssproperty --kemet-select-background-color-error - The error state background color. Default: var(--kemet-color-error).
+ * @cssproperty --kemet-select-background-color-success - The success state background color. Default: var(--kemet-color-success).
+ * @cssproperty --kemet-select-background-color-warning - The warning state background color. Default: var(--kemet-color-warning).
+ * @cssproperty --kemet-select-icon-right - The space on the right of the icon. Default: 1rem.
+ *
+ * @event kemet-input-focused - Fires when the input receives and loses focus
+ * @event kemet-input-status - Fires when there's a change in status
+ *
+ */
+export default class KemetSelect extends LitElement {
+    formSubmitController: FormSubmitController;
+    static styles: import("lit").CSSResult[];
+    slug: string;
+    name: string;
+    value: string;
+    options: any[];
+    status: string;
+    required: boolean;
+    disabled: boolean;
+    multiple: boolean;
+    icon: string;
+    iconSize: number;
+    filled: boolean;
+    rounded: boolean;
+    invalid: boolean;
+    control: KemetFieldInterface;
+    select: HTMLSelectElement;
+    selectedOption: HTMLOptionElement;
+    optionElements: any;
+    hasFocus: boolean;
+    constructor();
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    /**
+     * Generates the option elements
+     * @private
+     * @returns {TemplateResult} An option element
+     */
+    makeOptions(): import("lit-html").TemplateResult<1>[];
+    /**
+     * Generates an dropdown icon
+     * @private
+     */
+    makeIcon(): import("lit-html").TemplateResult<1>;
+    /**
+     * Handles when the input receives focus
+     * @private
+     */
+    handleFocus(): void;
+    /**
+     * Handles when the input loses focus
+     * @private
+     */
+    handleBlur(): void;
+    /**
+     * Handles when the input changes value
+     * @private
+     */
+    handleChange(): void;
+    /**
+     * Handles when the input has an error
+     * @private
+     */
+    handleInvalid(): void;
+    /**
+     * Checks the validity of the standard select
+     * @public
+     * @returns {boolean}
+     */
+    checkValidity(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-select': KemetSelect;
+    }
+}