npm - @digital-realty/ix-select - Versions diffs - 1.0.1 - Mend

@digital-realty/ix-select 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (44) hide show

package/LICENSE +21 -0
package/README.md +91 -0
package/demo/index.html +58 -0
package/dist/src/IxSelect.d.ts +57 -0
package/dist/src/IxSelect.js +215 -0
package/dist/src/IxSelect.js.map +1 -0
package/dist/src/index.d.ts +2 -0
package/dist/src/index.js +3 -0
package/dist/src/index.js.map +1 -0
package/dist/src/ix-select.d.ts +1 -0
package/dist/src/ix-select.js +3 -0
package/dist/src/ix-select.js.map +1 -0
package/dist/src/react/IxSelect.d.ts +4 -0
package/dist/src/react/IxSelect.js +13 -0
package/dist/src/react/IxSelect.js.map +1 -0
package/dist/src/react/IxSelectOption.d.ts +4 -0
package/dist/src/react/IxSelectOption.js +13 -0
package/dist/src/react/IxSelectOption.js.map +1 -0
package/dist/src/selectoption/IxSelectOption.d.ts +83 -0
package/dist/src/selectoption/IxSelectOption.js +187 -0
package/dist/src/selectoption/IxSelectOption.js.map +1 -0
package/dist/src/selectoption/ix-select-option.d.ts +1 -0
package/dist/src/selectoption/ix-select-option.js +3 -0
package/dist/src/selectoption/ix-select-option.js.map +1 -0
package/dist/src/selectoption/selectOptionController.d.ts +91 -0
package/dist/src/selectoption/selectOptionController.js +118 -0
package/dist/src/selectoption/selectOptionController.js.map +1 -0
package/dist/test/ix-select.test.d.ts +1 -0
package/dist/test/ix-select.test.js +58 -0
package/dist/test/ix-select.test.js.map +1 -0
package/dist/tsconfig.tsbuildinfo +1 -0
package/package.json +97 -0
package/src/IxSelect.ts +218 -0
package/src/index.ts +2 -0
package/src/ix-select.ts +3 -0
package/src/react/IxSelect.ts +14 -0
package/src/react/IxSelectOption.ts +14 -0
package/src/selectoption/IxSelectOption.ts +192 -0
package/src/selectoption/ix-select-option.ts +3 -0
package/src/selectoption/selectOptionController.ts +179 -0
package/test/ix-select.test.ts +79 -0
package/tsconfig.json +21 -0
package/web-dev-server.config.mjs +27 -0
package/web-test-runner.config.mjs +41 -0

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2023 ix-select
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md ADDED Viewed

@@ -0,0 +1,91 @@
+# \<ix-select>
+This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+## Installation
+```bash
+npm i ix-select
+```
+## Usage
+```html
+<script type="module">
+  import 'ix-select/ix-select.js';
+  import 'ix-select/ix-select-option.js';
+</script>
+<ix-select>
+  <ix-select-option>
+    <div value="1">Option label</div>
+  </ix-select-option>
+</ix-select>
+```
+```JS
+import { IxSelect, IxSelectOption } from 'ix-select'
+<IxSelect>
+  <IxSelectOption>
+    <div value="1">Option label</div>
+  </IxSelectOption>
+</IxSelect>
+```
+## Linting and formatting
+To scan the project for linting and formatting errors, run
+```bash
+npm run lint
+```
+To automatically fix linting and formatting errors, run
+```bash
+npm run format
+```
+## Testing with Web Test Runner
+To execute a single test run:
+```bash
+npm run test
+```
+To run the tests in interactive watch mode run:
+```bash
+npm run test:watch
+```
+## Demoing with Storybook
+To run a local instance of Storybook for your component, run
+```bash
+npm run storybook
+```
+To build a production version of Storybook, run
+```bash
+npm run storybook:build
+```
+## Tooling configs
+For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
+If you customize the configuration a lot, you can consider moving them to individual files.
+## Local Demo with `web-dev-server`
+```bash
+npm start
+```
+To run a local development server that serves the basic demo located in `demo/index.html`

package/demo/index.html ADDED Viewed

@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="en-GB">
+<head>
+  <meta charset="utf-8">
+  <style>
+    body {
+      background: #fafafa;
+    }
+  </style>
+</head>
+<body>
+  <div id="demo"></div>
+  <script type="module">
+    import { html, render } from 'lit';
+    import '../dist/src/ix-select.js';
+    const handleSubmit = (e) => {
+      e.preventDefault();
+    }
+    render(
+      html`
+      <form @submit=${handleSubmit}>
+        <ix-select appearance="outlined" name="name" label="test" error error-text="There was an error!">
+          <ix-select-option aria-label="blank"></ix-select-option>
+          <ix-select-option value="1">
+            <div slot="headline">
+                Bye World
+            </div>
+          </ix-select-option>
+          <ix-select-option value="2">
+            <div slot="headline">
+                Hello World
+            </div>
+          </ix-select-option>
+        </ix-select>
+        <ix-select required appearance="outlined" name="name2" label="test" supporting-text="This is supporting text.">
+          <ix-select-option aria-label="blank"></ix-select-option>
+          <ix-select-option value="1">
+            <div slot="headline">
+                Bye World
+            </div>
+          </ix-select-option>
+          <ix-select-option value="2">
+            <div slot="headline">
+                Hello World
+            </div>
+          </ix-select-option>
+        </ix-select>
+        <button type="submit">Submit</button>
+      </form>
+      `,
+      document.querySelector('#demo')
+    );
+  </script>
+</body>
+</html>

package/dist/src/IxSelect.d.ts ADDED Viewed

@@ -0,0 +1,57 @@
+import { LitElement, PropertyValues } from 'lit';
+import { Select } from '@material/web/select/internal/select.js';
+import '@material/web/select/filled-select.js';
+import '@material/web/select/outlined-select.js';
+import './selectoption/ix-select-option.js';
+export declare const DEFAULT_TYPEAHEAD_BUFFER_TIME = 200;
+export declare class IxSelect extends LitElement {
+    /** @nocollapse */
+    static readonly formAssociated = true;
+    private readonly field;
+    slotEl: HTMLSlotElement;
+    default: Select;
+    appearance: 'filled' | 'outlined';
+    label: String;
+    quick: boolean;
+    required: boolean;
+    disabled: boolean;
+    errorText: string;
+    supportingText: string;
+    error: boolean;
+    displayText: string;
+    /**
+     * Whether or not the underlying md-menu should be position: fixed to display
+     * in a top-level manner, or position: absolute.
+     *
+     * position:fixed is useful for cases where select is inside of another
+     * element with stacking context and hidden overflows such as `md-dialog`.
+     */
+    menuPositioning: 'absolute' | 'fixed';
+    /**
+     * The max time between the keystrokes of the typeahead select / menu behavior
+     * before it clears the typeahead buffer.
+     */
+    typeaheadDelay: number;
+    private nativeError;
+    private nativeErrorText;
+    private get hasError();
+    private readonly internals;
+    private customValidationMessage;
+    get form(): HTMLFormElement | null;
+    get labels(): NodeList;
+    get name(): string;
+    set name(name: string);
+    get validity(): ValidityState;
+    get value(): string;
+    get validationMessage(): string;
+    get materialRoot(): Select;
+    firstUpdated(): void;
+    protected updated(changed: PropertyValues<Select>): void;
+    render(): import("lit-html").TemplateResult<1> | undefined;
+    private getErrorText;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    setCustomValidity(error: string): void;
+    private syncValidity;
+    private getRequiredValidationMessage;
+}

package/dist/src/IxSelect.js ADDED Viewed

@@ -0,0 +1,215 @@
+import { __decorate } from "tslib";
+import { html, LitElement, nothing } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import '@material/web/select/filled-select.js';
+import '@material/web/select/outlined-select.js';
+import './selectoption/ix-select-option.js';
+export const DEFAULT_TYPEAHEAD_BUFFER_TIME = 200;
+export class IxSelect extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.appearance = 'outlined';
+        this.label = '';
+        this.quick = false;
+        this.required = false;
+        this.disabled = false;
+        this.errorText = '';
+        this.supportingText = '';
+        this.error = false;
+        this.displayText = '';
+        /**
+         * Whether or not the underlying md-menu should be position: fixed to display
+         * in a top-level manner, or position: absolute.
+         *
+         * position:fixed is useful for cases where select is inside of another
+         * element with stacking context and hidden overflows such as `md-dialog`.
+         */
+        this.menuPositioning = 'absolute';
+        /**
+         * The max time between the keystrokes of the typeahead select / menu behavior
+         * before it clears the typeahead buffer.
+         */
+        this.typeaheadDelay = DEFAULT_TYPEAHEAD_BUFFER_TIME;
+        this.nativeError = false;
+        this.nativeErrorText = '';
+        this.internals = this /* needed for closure */
+            .attachInternals();
+        this.customValidationMessage = '';
+    }
+    get hasError() {
+        return this.error || this.nativeError;
+    }
+    get form() {
+        return this.internals.form;
+    }
+    get labels() {
+        return this.internals.labels;
+    }
+    get name() {
+        var _a;
+        return (_a = this.getAttribute('name')) !== null && _a !== void 0 ? _a : '';
+    }
+    set name(name) {
+        this.setAttribute('name', name);
+    }
+    get validity() {
+        this.syncValidity();
+        return this.internals.validity;
+    }
+    get value() {
+        return this.materialRoot.value;
+    }
+    get validationMessage() {
+        this.syncValidity();
+        return this.internals.validationMessage;
+    }
+    get materialRoot() {
+        var _a, _b;
+        return (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('md-filled-select')) !== null && _b !== void 0 ? _b : this.default;
+    }
+    firstUpdated() {
+        this.addEventListener('request-selection', () => {
+            this.internals.setFormValue(this.materialRoot.value);
+        });
+    }
+    updated(changed) {
+        if (changed.has('required')) {
+            this.syncValidity();
+        }
+    }
+    // eslint-disable-next-line consistent-return
+    render() {
+        if (this.appearance === 'outlined') {
+            return html ` <md-outlined-select
+        .aria-label=${this.ariaLabel || nothing}
+        .tabindex=${this.disabled ? '-1' : '0'}
+        .label=${this.label}
+        .populated=${!!this.displayText}
+        .disabled=${this.disabled}
+        .quick=${this.quick}
+        .menu-positioning=${this.menuPositioning}
+        .typeaheadDelay=${this.typeaheadDelay}
+        .error=${this.hasError}
+        .name=${this.name}
+        .required=${this.required}
+        supporting-text=${this.supportingText}
+        error-text=${this.getErrorText()}
+      >
+        <slot></slot>
+      </md-outlined-select>`;
+        }
+        if (this.appearance === 'filled') {
+            return html `
+        <md-filled-select
+          .aria-label=${this.ariaLabel || nothing}
+          .tabindex=${this.disabled ? '-1' : '0'}
+          .label=${this.label}
+          .populated=${!!this.displayText}
+          .disabled=${this.disabled}
+          .quick=${this.quick}
+          .positioning=${this.menuPositioning}
+          .typeaheadDelay=${this.typeaheadDelay}
+          .required=${this.required}
+          .error=${this.hasError}
+          supporting-text=${this.supportingText}
+          error-text=${this.getErrorText()}
+        >
+          <slot></slot>
+      </md-outlined-select>`;
+        }
+    }
+    getErrorText() {
+        return this.error ? this.errorText : this.nativeErrorText;
+    }
+    checkValidity() {
+        this.syncValidity();
+        return this.internals.checkValidity();
+    }
+    reportValidity() {
+        var _a;
+        let invalidEvent;
+        this.addEventListener('invalid', event => {
+            invalidEvent = event;
+        }, { once: true });
+        const valid = this.checkValidity();
+        if (invalidEvent === null || invalidEvent === void 0 ? void 0 : invalidEvent.defaultPrevented) {
+            return valid;
+        }
+        const prevMessage = this.getErrorText();
+        this.nativeError = !valid;
+        this.nativeErrorText = this.validationMessage;
+        if (prevMessage === this.getErrorText()) {
+            (_a = this.field) === null || _a === void 0 ? void 0 : _a.reannounceError();
+        }
+        return valid;
+    }
+    setCustomValidity(error) {
+        this.customValidationMessage = error;
+        this.syncValidity();
+    }
+    syncValidity() {
+        const valueMissing = this.required && !this.materialRoot.value;
+        const customError = !!this.customValidationMessage;
+        const validationMessage = this.customValidationMessage ||
+            (valueMissing && this.getRequiredValidationMessage()) ||
+            '';
+        this.internals.setValidity({ valueMissing, customError }, validationMessage);
+    }
+    // eslint-disable-next-line class-methods-use-this
+    getRequiredValidationMessage() {
+        const select = document.createElement('select');
+        select.required = true;
+        return select.validationMessage;
+    }
+}
+/** @nocollapse */
+IxSelect.formAssociated = true;
+__decorate([
+    query('.field')
+], IxSelect.prototype, "field", void 0);
+__decorate([
+    query('slot')
+], IxSelect.prototype, "slotEl", void 0);
+__decorate([
+    query('md-outlined-select')
+], IxSelect.prototype, "default", void 0);
+__decorate([
+    property()
+], IxSelect.prototype, "appearance", void 0);
+__decorate([
+    property()
+], IxSelect.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxSelect.prototype, "quick", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxSelect.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IxSelect.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, attribute: 'error-text' })
+], IxSelect.prototype, "errorText", void 0);
+__decorate([
+    property({ type: String, attribute: 'supporting-text' })
+], IxSelect.prototype, "supportingText", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IxSelect.prototype, "error", void 0);
+__decorate([
+    property({ type: String, attribute: 'display-text' })
+], IxSelect.prototype, "displayText", void 0);
+__decorate([
+    property({ attribute: 'menu-positioning' })
+], IxSelect.prototype, "menuPositioning", void 0);
+__decorate([
+    property({ type: Number, attribute: 'typeahead-delay' })
+], IxSelect.prototype, "typeaheadDelay", void 0);
+__decorate([
+    state()
+], IxSelect.prototype, "nativeError", void 0);
+__decorate([
+    state()
+], IxSelect.prototype, "nativeErrorText", void 0);
+//# sourceMappingURL=IxSelect.js.map

package/dist/src/IxSelect.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"IxSelect.js","sourceRoot":"","sources":["../../src/IxSelect.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, PropertyValues } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { Select } from '@material/web/select/internal/select.js';\nimport { Field } from '@material/web/field/internal/field';\nimport { ARIAMixinStrict } from '@material/web/internal/aria/aria.js';\nimport '@material/web/select/filled-select.js';\nimport '@material/web/select/outlined-select.js';\nimport './selectoption/ix-select-option.js';\n\nexport const DEFAULT_TYPEAHEAD_BUFFER_TIME = 200;\n\nexport class IxSelect extends LitElement {\n /** @nocollapse */\n static readonly formAssociated = true;\n\n @query('.field') private readonly field!: Field | null;\n\n @query('slot') slotEl!: HTMLSlotElement;\n\n @query('md-outlined-select') default!: Select;\n\n @property() appearance: 'filled' | 'outlined' = 'outlined';\n\n @property() label: String = '';\n\n @property({ type: Boolean }) quick = false;\n\n @property({ type: Boolean }) required = false;\n\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n @property({ type: String, attribute: 'error-text' }) errorText = '';\n\n @property({ type: String, attribute: 'supporting-text' }) supportingText = '';\n\n @property({ type: Boolean, reflect: true }) error = false;\n\n @property({ type: String, attribute: 'display-text' }) displayText = '';\n\n /**\n * Whether or not the underlying md-menu should be position: fixed to display\n * in a top-level manner, or position: absolute.\n *\n * position:fixed is useful for cases where select is inside of another\n * element with stacking context and hidden overflows such as `md-dialog`.\n */\n @property({ attribute: 'menu-positioning' })\n menuPositioning: 'absolute' | 'fixed' = 'absolute';\n\n /**\n * The max time between the keystrokes of the typeahead select / menu behavior\n * before it clears the typeahead buffer.\n */\n @property({ type: Number, attribute: 'typeahead-delay' })\n typeaheadDelay = DEFAULT_TYPEAHEAD_BUFFER_TIME;\n\n @state() private nativeError = false;\n\n @state() private nativeErrorText = '';\n\n private get hasError() {\n return this.error || this.nativeError;\n }\n\n private readonly internals = (this as HTMLElement) /* needed for closure */\n .attachInternals();\n\n private customValidationMessage = '';\n\n get form() {\n return this.internals.form;\n }\n\n get labels() {\n return this.internals.labels;\n }\n\n get name() {\n return this.getAttribute('name') ?? '';\n }\n\n set name(name: string) {\n this.setAttribute('name', name);\n }\n\n get validity() {\n this.syncValidity();\n return this.internals.validity;\n }\n\n get value() {\n return this.materialRoot.value;\n }\n\n get validationMessage() {\n this.syncValidity();\n return this.internals.validationMessage;\n }\n\n get materialRoot(): Select {\n return this.shadowRoot?.querySelector('md-filled-select') ?? this.default;\n }\n\n firstUpdated() {\n this.addEventListener('request-selection', () => {\n this.internals.setFormValue(this.materialRoot.value);\n });\n }\n\n protected override updated(changed: PropertyValues<Select>) {\n if (changed.has('required')) {\n this.syncValidity();\n }\n }\n\n // eslint-disable-next-line consistent-return\n render() {\n if (this.appearance === 'outlined') {\n return html` <md-outlined-select\n .aria-label=${(this as ARIAMixinStrict).ariaLabel || nothing}\n .tabindex=${this.disabled ? '-1' : '0'}\n .label=${this.label}\n .populated=${!!this.displayText}\n .disabled=${this.disabled}\n .quick=${this.quick}\n .menu-positioning=${this.menuPositioning}\n .typeaheadDelay=${this.typeaheadDelay}\n .error=${this.hasError}\n .name=${this.name}\n .required=${this.required}\n supporting-text=${this.supportingText}\n error-text=${this.getErrorText()}\n >\n <slot></slot>\n </md-outlined-select>`;\n }\n if (this.appearance === 'filled') {\n return html`\n <md-filled-select \n .aria-label=${(this as ARIAMixinStrict).ariaLabel || nothing}\n .tabindex=${this.disabled ? '-1' : '0'}\n .label=${this.label}\n .populated=${!!this.displayText}\n .disabled=${this.disabled}\n .quick=${this.quick}\n .positioning=${this.menuPositioning}\n .typeaheadDelay=${this.typeaheadDelay}\n .required=${this.required}\n .error=${this.hasError}\n supporting-text=${this.supportingText}\n error-text=${this.getErrorText()}\n >\n <slot></slot>\n </md-outlined-select>`;\n }\n }\n\n private getErrorText() {\n return this.error ? this.errorText : this.nativeErrorText;\n }\n\n checkValidity() {\n this.syncValidity();\n return this.internals.checkValidity();\n }\n\n reportValidity() {\n let invalidEvent: Event | undefined;\n this.addEventListener(\n 'invalid',\n event => {\n invalidEvent = event;\n },\n { once: true }\n );\n\n const valid = this.checkValidity();\n if (invalidEvent?.defaultPrevented) {\n return valid;\n }\n\n const prevMessage = this.getErrorText();\n this.nativeError = !valid;\n this.nativeErrorText = this.validationMessage;\n\n if (prevMessage === this.getErrorText()) {\n this.field?.reannounceError();\n }\n\n return valid;\n }\n\n setCustomValidity(error: string) {\n this.customValidationMessage = error;\n this.syncValidity();\n }\n\n private syncValidity() {\n const valueMissing = this.required && !this.materialRoot.value;\n const customError = !!this.customValidationMessage;\n const validationMessage =\n this.customValidationMessage ||\n (valueMissing && this.getRequiredValidationMessage()) ||\n '';\n\n this.internals.setValidity(\n { valueMissing, customError },\n validationMessage\n );\n }\n\n // eslint-disable-next-line class-methods-use-this\n private getRequiredValidationMessage() {\n const select = document.createElement('select');\n select.required = true;\n return select.validationMessage;\n }\n}\n"]}

package/dist/src/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { IxSelect } from './IxSelect.js';
2	+ export { IxSelectOption } from './selectoption/IxSelectOption.js';

package/dist/src/index.js ADDED Viewed

@@ -0,0 +1,3 @@
+export { IxSelect } from './IxSelect.js';
+export { IxSelectOption } from './selectoption/IxSelectOption.js';
+//# sourceMappingURL=index.js.map

package/dist/src/index.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC","sourcesContent":["export { IxSelect } from './IxSelect.js';\nexport { IxSelectOption } from './selectoption/IxSelectOption.js';\n"]}

package/dist/src/ix-select.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/dist/src/ix-select.js ADDED Viewed

@@ -0,0 +1,3 @@
+import { IxSelect } from './IxSelect.js';
+window.customElements.define('ix-select', IxSelect);
+//# sourceMappingURL=ix-select.js.map

package/dist/src/ix-select.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"ix-select.js","sourceRoot":"","sources":["../../src/ix-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["import { IxSelect } from './IxSelect.js';\n\nwindow.customElements.define('ix-select', IxSelect);\n"]}

package/dist/src/react/IxSelect.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import { IxSelect as IxSelectLit } from '../IxSelect.js';
+export declare const IxSelect: import("@lit-labs/react").ReactWebComponent<IxSelectLit, {
+    onclick: string;
+}>;

package/dist/src/react/IxSelect.js ADDED Viewed

@@ -0,0 +1,13 @@
+import React from 'react';
+import { createComponent } from '@lit-labs/react';
+import { IxSelect as IxSelectLit } from '../IxSelect.js';
+window.customElements.define('ix-select', IxSelectLit);
+export const IxSelect = createComponent({
+    tagName: 'ix-select',
+    elementClass: IxSelectLit,
+    react: React,
+    events: {
+        onclick: 'onClick',
+    },
+});
+//# sourceMappingURL=IxSelect.js.map

package/dist/src/react/IxSelect.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"IxSelect.js","sourceRoot":"","sources":["../../../src/react/IxSelect.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,QAAQ,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAEzD,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;AAEvD,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC;IACtC,OAAO,EAAE,WAAW;IACpB,YAAY,EAAE,WAAW;IACzB,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,OAAO,EAAE,SAAS;KACnB;CACF,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { createComponent } from '@lit-labs/react';\nimport { IxSelect as IxSelectLit } from '../IxSelect.js';\n\nwindow.customElements.define('ix-select', IxSelectLit);\n\nexport const IxSelect = createComponent({\n tagName: 'ix-select',\n elementClass: IxSelectLit,\n react: React,\n events: {\n onclick: 'onClick',\n },\n});\n"]}

package/dist/src/react/IxSelectOption.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import { IxSelectOption as IxSelectOptionLit } from '../selectoption/IxSelectOption.js';
+export declare const IxSelectOption: import("@lit-labs/react").ReactWebComponent<IxSelectOptionLit, {
+    onclick: string;
+}>;

package/dist/src/react/IxSelectOption.js ADDED Viewed

@@ -0,0 +1,13 @@
+import React from 'react';
+import { createComponent } from '@lit-labs/react';
+import { IxSelectOption as IxSelectOptionLit } from '../selectoption/IxSelectOption.js';
+window.customElements.define('ix-select', IxSelectOptionLit);
+export const IxSelectOption = createComponent({
+    tagName: 'ix-select',
+    elementClass: IxSelectOptionLit,
+    react: React,
+    events: {
+        onclick: 'onClick',
+    },
+});
+//# sourceMappingURL=IxSelectOption.js.map

package/dist/src/react/IxSelectOption.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"IxSelectOption.js","sourceRoot":"","sources":["../../../src/react/IxSelectOption.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,cAAc,IAAI,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAExF,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAC;AAE7D,MAAM,CAAC,MAAM,cAAc,GAAG,eAAe,CAAC;IAC5C,OAAO,EAAE,WAAW;IACpB,YAAY,EAAE,iBAAiB;IAC/B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,OAAO,EAAE,SAAS;KACnB;CACF,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { createComponent } from '@lit-labs/react';\nimport { IxSelectOption as IxSelectOptionLit } from '../selectoption/IxSelectOption.js';\n\nwindow.customElements.define('ix-select', IxSelectOptionLit);\n\nexport const IxSelectOption = createComponent({\n tagName: 'ix-select',\n elementClass: IxSelectOptionLit,\n react: React,\n events: {\n onclick: 'onClick',\n },\n});\n"]}

package/dist/src/selectoption/IxSelectOption.d.ts ADDED Viewed

@@ -0,0 +1,83 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '@material/web/ripple/ripple.js';
+import '@material/web/focus/md-focus-ring.js';
+import '@material/web/labs/item/item.js';
+import { LitElement } from 'lit';
+import { ClassInfo } from 'lit/directives/class-map.js';
+import { SelectOption } from './selectOptionController.js';
+/**
+ * @fires close-menu Closes the encapsulating menu on
+ * @fires request-selection Requests the parent md-select to select this element
+ * (and deselect others if single-selection) when `selected` changed to `true`.
+ * @fires request-deselection Requests the parent md-select to deselect this
+ * element when `selected` changed to `false`.
+ */
+export declare class IxSelectOption extends LitElement implements SelectOption {
+    /** @nocollapse */
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode | undefined;
+        customElements?: CustomElementRegistry | undefined;
+    };
+    /**
+     * Disables the item and makes it non-selectable and non-interactive.
+     */
+    disabled: boolean;
+    /**
+     * READONLY: self-identifies as a menu item and sets its identifying attribute
+     */
+    isMenuItem: boolean;
+    /**
+     * Sets the item in the selected visual state when a submenu is opened.
+     */
+    selected: boolean;
+    /**
+     * Form value of the option.
+     */
+    value: string;
+    protected readonly listItemRoot: HTMLElement | null;
+    protected readonly headlineElements: HTMLElement[];
+    type: "option";
+    /**
+     * The text that is selectable via typeahead. If not set, defaults to the
+     * innerText of the item slotted into the `"headline"` slot.
+     */
+    get typeaheadText(): string;
+    set typeaheadText(text: string);
+    /**
+     * The text that is displayed in the select field when selected. If not set,
+     * defaults to the textContent of the item slotted into the `"headline"` slot.
+     */
+    get displayText(): string;
+    set displayText(text: string);
+    private readonly selectOptionController;
+    protected render(): import("lit-html").TemplateResult<1>;
+    /**
+     * Renders the root list item.
+     *
+     * @param content the child content of the list item.
+     */
+    protected renderListItem(content: unknown): import("lit-html").TemplateResult<1>;
+    /**
+     * Handles rendering of the ripple element.
+     */
+    protected renderRipple(): import("lit-html").TemplateResult<1>;
+    /**
+     * Handles rendering of the focus ring.
+     */
+    protected renderFocusRing(): import("lit-html").TemplateResult<1>;
+    /**
+     * Classes applied to the list item root.
+     */
+    protected getRenderClasses(): ClassInfo;
+    /**
+     * Handles rendering the headline and supporting text.
+     */
+    protected renderBody(): import("lit-html").TemplateResult<1>;
+    focus(): void;
+}