@plusui/library 0.1.0

package/cdn/components/segmented-picker-item/segmented-picker-item.style.js

@@ -0,0 +1,49 @@
+import { c as ce } from '../../index-B9iart53.js';
+
+const segmentedPickerItemStyle = ce({
+    base: 'plus-ui-element p-2 min-w-9 flex flex-row gap-2 items-center cursor-pointer justify-center font-medium relative text-sm text-color-placeholder select-none',
+    variants: {
+        size: {
+            sm: 'h-7 text-sm',
+            md: 'h-9 text-base',
+            lg: 'h-11 text-lg',
+        },
+        status: {
+            default: '',
+            primary: '',
+        },
+        checked: {
+            true: '',
+            false: 'hover:bg-color-default-hovered active:bg-color-default-pressed',
+        },
+        disabled: {
+            true: 'cursor-not-allowed text-color-disabled',
+            false: '',
+        },
+        shape: {
+            square: 'rounded-md',
+            circle: 'rounded-full',
+        },
+    },
+    compoundVariants: [
+        {
+            status: 'default',
+            checked: true,
+            class: 'text-color-default',
+        },
+        {
+            status: 'primary',
+            checked: true,
+            class: 'text-color-base',
+        },
+    ],
+    defaultVariants: {
+        size: 'md',
+        status: 'default',
+        checked: false,
+        disabled: false,
+        shape: 'square',
+    },
+});
+
+export { segmentedPickerItemStyle };

package/cdn/components/select/index.js

@@ -0,0 +1,15 @@
+import PlusSelect from './select.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
+import '../../state-D1d5Sfj8.js';
+import '../../query-assigned-elements-B8Evmg7O.js';
+import '../../base-Cl6v8-BZ.js';
+import '../base/tailwind-base.js';
+import '../../global-Dh9axYQH.js';
+import '../../floating-ui.dom-OBaMlALa.js';
+import './select.style.js';
+import '../../index-B9iart53.js';
+
+customElements.define('plus-select', PlusSelect);
+
+export { PlusSelect };

package/cdn/components/select/select.js

@@ -0,0 +1,376 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { r } from '../../state-D1d5Sfj8.js';
+import { o } from '../../query-assigned-elements-B8Evmg7O.js';
+import Tailwind from '../base/tailwind-base.js';
+import { i, x } from '../../lit-element-ByzbtpGk.js';
+import { c as computePosition, o as offset, s as shift, f as flip, b as autoUpdate } from '../../floating-ui.dom-OBaMlALa.js';
+import { selectStyle } from './select.style.js';
+import '../../base-Cl6v8-BZ.js';
+import '../../global-Dh9axYQH.js';
+import '../../index-B9iart53.js';
+
+/**
+ * A select component that provides a collapsible menu with selectable options.
+ * Uses Floating UI for intelligent positioning of the select menu.
+ *
+ * @tag plus-select
+ * @slot - The default slot for the select trigger button content
+ * @slot suffix - Slot for adding content to the right side of the trigger button
+ * @slot select-item - Slot for select menu items
+ * @csspart base - The component's base wrapper
+ * @csspart select - The select trigger input
+ * @csspart select-box - The select list container
+ * @event plus-select-open - Emitted when the select is opened
+ * @event plus-select-close - Emitted when the select is closed
+ * @event plus-select-selected-item - Emitted when an item is selected, with the selected item in detail
+ */
+class PlusSelect extends Tailwind {
+    constructor() {
+        super(...arguments);
+        /**
+         * Sets the size of the select button.
+         * @values 'sm' | 'md' | 'lg'
+         * @default 'md'
+         */
+        this.size = 'md';
+        /**
+         * Placeholder text for the select trigger input.
+         * @default ''
+         */
+        this.placeholder = '';
+        /**
+         * Label text for the select.
+         * @default ''
+         */
+        this.label = '';
+        /**
+         * Indicates if the select is in an error state.
+         * @default false
+         */
+        this.error = false;
+        /**
+         * Disables the select, preventing interaction.
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * Marks the select as required.
+         * @default false
+         */
+        this.required = false;
+        /**
+         * Makes the select read-only, preventing changes.
+         * @default false
+         */
+        this.readonly = false;
+        /**
+         * Enables a clear button to reset the selection.
+         * @default false
+         */
+        this.clearable = false;
+        /**
+         * Tracks the visibility state of the select menu.
+         * @private
+         */
+        this.isVisible = false;
+        /**
+         * Stores the currently selected select item.
+         * @private
+         */
+        this.selectedItem = null;
+        /**
+         * Reference to the select trigger input element.
+         * @private
+         */
+        this.targetElement = null;
+        /**
+         * Reference to the select menu container.
+         * @private
+         */
+        this.selectBox = null;
+        /**
+         * Unique ID for ARIA relationship between the trigger and select menu.
+         * @private
+         */
+        this.selectId = `select-${Math.random().toString(36).substring(2, 9)}`;
+        /**
+         * Updates the select menu's position using Floating UI.
+         * @private
+         */
+        this.updatePosition = () => {
+            if (!this.selectBox || !this.targetElement)
+                return;
+            requestAnimationFrame(() => {
+                computePosition(this.targetElement, this.selectBox, {
+                    placement: 'bottom-start',
+                    middleware: [
+                        offset(6),
+                        shift({ padding: 4, boundary: document.documentElement }),
+                        flip({
+                            fallbackPlacements: ['top-start', 'bottom-start'],
+                            padding: 4,
+                        }),
+                    ],
+                }).then(({ x, y }) => {
+                    Object.assign(this.selectBox.style, { left: `${x}px`, top: `${y}px` });
+                });
+            });
+        };
+        /**
+         * Handles click events on the select trigger input to toggle the menu.
+         * @private
+         */
+        this.handleClick = () => {
+            if (this.disabled || this.readonly)
+                return;
+            this.isVisible = !this.isVisible;
+            if (this.isVisible) {
+                if (!this.targetElement || !this.selectBox) {
+                    console.error('Target element or select-box is not available');
+                    return;
+                }
+                this.updatePosition();
+                this.cleanup = autoUpdate(this.targetElement, this.selectBox, this.updatePosition);
+                this.emit('plus-select-open');
+            }
+            else {
+                this.cleanupAutoUpdate();
+                this.emit('plus-select-close');
+            }
+        };
+        /**
+         * Handles keyboard navigation for select items.
+         * @param event - The keyboard event
+         * @private
+         */
+        this.handleKeyDown = (event) => {
+            if (this.disabled || this.readonly)
+                return;
+            const items = this.slots.filter((item) => !item.disabled);
+            const currentIndex = items.indexOf(this.selectedItem);
+            let newIndex = currentIndex;
+            switch (event.key) {
+                case 'ArrowDown':
+                    newIndex = (currentIndex + 1) % items.length;
+                    break;
+                case 'ArrowUp':
+                    newIndex = (currentIndex - 1 + items.length) % items.length;
+                    break;
+                case 'Enter':
+                case ' ':
+                    if (this.selectedItem) {
+                        this.handleItemClick(new Event('click'));
+                    }
+                    break;
+                case 'Escape':
+                    this.isVisible = false;
+                    this.cleanupAutoUpdate();
+                    break;
+                case 'Tab':
+                    this.isVisible = false;
+                    this.cleanupAutoUpdate();
+                    break;
+                default:
+                    return;
+            }
+            if (newIndex !== currentIndex) {
+                this.selectedItem = items[newIndex];
+                this.slots.forEach((item) => {
+                    item.selected = item === this.selectedItem;
+                });
+            }
+            event.preventDefault();
+        };
+        /**
+         * Handles click events on select items to select them.
+         * @param event - The click event
+         * @private
+         */
+        this.handleItemClick = (event) => {
+            const target = event.target;
+            const clickedItem = this.slots.find((item) => item.contains(target));
+            if (clickedItem && !clickedItem.disabled) {
+                this.selectedItem = clickedItem;
+                this.slots.forEach((item) => {
+                    item.selected = item === clickedItem;
+                });
+                this.emit('plus-select-selected-item', {
+                    detail: { selectedItem: this.selectedItem },
+                });
+                this.isVisible = false;
+                this.cleanupAutoUpdate();
+            }
+        };
+        /**
+         * Handles changes to the 'select-item' slot to update item properties.
+         * @private
+         */
+        this.handleSlotChange = () => {
+            this.slots.forEach((item) => {
+                item.size = this.size;
+                item.disabled = this.disabled || item.disabled;
+            });
+        };
+        /**
+         * Handles clicks outside the select to close it.
+         * @param event - The click event
+         * @private
+         */
+        this.handleOutsideClick = (event) => {
+            const path = event.composedPath();
+            if (this.selectBox &&
+                this.targetElement &&
+                !path.includes(this.selectBox) &&
+                !path.includes(this.targetElement)) {
+                this.isVisible = false;
+                this.cleanupAutoUpdate();
+            }
+        };
+    }
+    /**
+     * Initializes the component after it is first updated.
+     * @param changedProperties - Map of changed properties
+     * @private
+     */
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.targetElement = this.shadowRoot?.querySelector('plus-input') || null;
+        this.selectBox = this.shadowRoot?.querySelector('.select-box') || null;
+        this.selectedItem = this.slots.find((item) => item.selected) || null;
+        const slot = this.shadowRoot?.querySelector('slot[name="select-item"]');
+        slot?.addEventListener('slotchange', this.handleSlotChange);
+        this.handleSlotChange();
+        if (this.targetElement) {
+            this.targetElement.addEventListener('click', this.handleClick);
+            this.targetElement.addEventListener('keydown', this.handleKeyDown);
+        }
+        else {
+            console.error('Target element (plus-input) not found');
+        }
+        if (this.selectBox) {
+            this.selectBox.addEventListener('click', this.handleItemClick);
+        }
+        else {
+            console.error('Select box not found');
+        }
+        document.addEventListener('click', this.handleOutsideClick, true);
+    }
+    /**
+     * Cleans up the Floating UI autoUpdate subscription.
+     * @private
+     */
+    cleanupAutoUpdate() {
+        if (this.cleanup) {
+            this.cleanup();
+            this.cleanup = undefined;
+        }
+    }
+    /**
+     * Cleans up event listeners and subscriptions when the component is removed from the DOM.
+     * @private
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.cleanupAutoUpdate();
+        if (this.targetElement) {
+            this.targetElement.removeEventListener('click', this.handleClick);
+            this.targetElement.removeEventListener('keydown', this.handleKeyDown);
+        }
+        if (this.selectBox) {
+            this.selectBox.removeEventListener('click', this.handleItemClick);
+        }
+        document.removeEventListener('click', this.handleOutsideClick, true);
+        const slot = this.shadowRoot?.querySelector('slot[name="select-item"]');
+        slot?.removeEventListener('slotchange', this.handleSlotChange);
+    }
+    /**
+     * Renders the select component.
+     * @returns The rendered template
+     */
+    render() {
+        return x `
+      <plus-input
+        .value=${(this.selectedItem?.text || this.selectedItem?.outerText) ??
+            ''}
+        .error=${this.error}
+        .caption=${this.caption}
+        .clearable=${this.clearable}
+        .disabled=${this.disabled}
+        .readonly=${this.readonly}
+        .size=${this.size}
+        .placeholder=${this.placeholder}
+        .label=${this.label}
+        .required=${this.required}
+        .isSelect=${true}
+        aria-expanded=${this.isVisible}
+        aria-haspopup="listbox"
+        aria-autocomplete="none"
+        role="combobox"
+        part="select"
+        suffix-icon=${this.isVisible ? 'chevron-up' : 'chevron-down'}
+      ></plus-input>
+      <div
+        id=${this.selectId}
+        class=${selectStyle({ isOpen: this.isVisible })}
+        role="listbox"
+        aria-label="Select options"
+        ?hidden=${!this.isVisible}
+        part="select-box"
+      >
+        <slot name="select-item"></slot>
+      </div>
+    `;
+    }
+}
+/**
+ * CSS styles for the component, including Tailwind base styles and custom styles.
+ */
+PlusSelect.styles = [
+    ...Tailwind.styles,
+    i `
+      :host {
+        display: block;
+        min-width: 256px;
+        width: fit-content;
+        height: fit-content;
+      }
+    `,
+];
+__decorate([
+    o({ selector: 'plus-select-item', slot: 'select-item' })
+], PlusSelect.prototype, "slots", void 0);
+__decorate([
+    n({ type: String })
+], PlusSelect.prototype, "size", void 0);
+__decorate([
+    n({ type: String })
+], PlusSelect.prototype, "placeholder", void 0);
+__decorate([
+    n({ type: String })
+], PlusSelect.prototype, "label", void 0);
+__decorate([
+    n({ type: Boolean })
+], PlusSelect.prototype, "error", void 0);
+__decorate([
+    n({ type: Boolean })
+], PlusSelect.prototype, "disabled", void 0);
+__decorate([
+    n({ type: Boolean })
+], PlusSelect.prototype, "required", void 0);
+__decorate([
+    n({ type: Boolean })
+], PlusSelect.prototype, "readonly", void 0);
+__decorate([
+    n({ type: String })
+], PlusSelect.prototype, "caption", void 0);
+__decorate([
+    n({ type: Boolean })
+], PlusSelect.prototype, "clearable", void 0);
+__decorate([
+    r()
+], PlusSelect.prototype, "isVisible", void 0);
+__decorate([
+    r()
+], PlusSelect.prototype, "selectedItem", void 0);
+
+export { PlusSelect, PlusSelect as default };

package/cdn/components/select/select.style.js

@@ -0,0 +1,15 @@
+import { c as ce } from '../../index-B9iart53.js';
+
+const selectStyle = ce({
+    base: [
+        'select-box antialiased flex flex-col max-w-80 max-h-80 absolute z-10 w-full shadow-lg overflow-y-auto',
+    ],
+    variants: {
+        isOpen: {
+            true: '',
+            false: 'hidden',
+        },
+    },
+});
+
+export { selectStyle };

package/cdn/components/select-item/index.js

@@ -0,0 +1,12 @@
+import PlusSelectItem from './select-item.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
+import '../base/tailwind-base.js';
+import '../../global-Dh9axYQH.js';
+import '../../if-defined-D-m3dgRf.js';
+import '../../live-BOAtKRUN.js';
+import '../../directive-DZCF8pFJ.js';
+
+customElements.define('plus-select-item', PlusSelectItem);
+
+export { PlusSelectItem };

package/cdn/components/select-item/select-item.js

@@ -0,0 +1,92 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import Tailwind from '../base/tailwind-base.js';
+import { x } from '../../lit-element-ByzbtpGk.js';
+import { o } from '../../if-defined-D-m3dgRf.js';
+import { l } from '../../live-BOAtKRUN.js';
+import '../../global-Dh9axYQH.js';
+import '../../directive-DZCF8pFJ.js';
+
+/**
+ * A select item component that represents a selectable option within a select menu.
+ * Automatically registers itself as a select-item slot in the parent PlusSelect component.
+ *
+ * @tag plus-select-item
+ * @slot - The default slot for select item content
+ * @csspart base - The component's base wrapper
+ * @csspart item - The listbox item element
+ * @event click - Emitted when the select item is clicked, handled by the parent PlusSelect component
+ * @cssproperty --i-bg-default - Controls the default background color
+ * @cssproperty --i-bg-hovered - Controls the background color when hovered
+ * @cssproperty --i-bg-pressed - Controls the background color when pressed
+ * @cssproperty --i-text-color - Controls the text color
+ * @cssproperty --i-selected-bg - Controls the background color when selected
+ */
+class PlusSelectItem extends Tailwind {
+    constructor() {
+        super(...arguments);
+        /**
+         * Sets the size of the select item.
+         * @values 'sm' | 'md' | 'lg'
+         * @default 'md'
+         */
+        this.size = 'md';
+        /**
+         * Disables the select item, preventing interaction.
+         * When disabled, the item cannot be clicked or selected.
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * Indicates whether the select item is currently selected.
+         * The selected state is managed by the parent PlusSelect component.
+         * @default false
+         */
+        this.selected = false;
+    }
+    /**
+     * Initializes the component when it is added to the DOM.
+     * Automatically assigns the component to the 'select-item' slot of the parent PlusSelect.
+     * @private
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.slot = 'select-item';
+    }
+    /**
+     * Renders the select item using a plus-list-box-item component.
+     * Includes ARIA attributes for accessibility and proper styling.
+     * @returns The rendered template
+     */
+    render() {
+        return x `
+      <plus-list-box-item
+        role="option"
+        aria-selected=${this.selected}
+        aria-disabled=${this.disabled}
+        aria-label=${o(this.text || this.textContent || undefined)}
+        size=${this.size}
+        text=${o(this.text)}
+        ?disabled=${this.disabled}
+        .selected=${l(this.selected)}
+        part="item"
+        tabindex=${this.disabled ? '-1' : '0'}
+      >
+        <slot></slot>
+      </plus-list-box-item>
+    `;
+    }
+}
+__decorate([
+    n({ type: String })
+], PlusSelectItem.prototype, "size", void 0);
+__decorate([
+    n({ type: Boolean })
+], PlusSelectItem.prototype, "disabled", void 0);
+__decorate([
+    n({ type: Boolean })
+], PlusSelectItem.prototype, "selected", void 0);
+__decorate([
+    n({ attribute: 'text' })
+], PlusSelectItem.prototype, "text", void 0);
+
+export { PlusSelectItem, PlusSelectItem as default };

package/cdn/components/service/index.js

@@ -0,0 +1,17 @@
+export { PlusService } from './service.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
+import '../toast-container/toast-container.js';
+import '../../state-D1d5Sfj8.js';
+import '../toast-container/toast-container.style.js';
+import '../../index-B9iart53.js';
+import '../../services/toast.service.js';
+import '../base/tailwind-base.js';
+import '../../global-Dh9axYQH.js';
+import '../toast/toast.js';
+import '../toast/toast.style.js';
+import '../../controllers/slot-controller.js';
+import '../svg-icon/svg-icon.js';
+import '../../unsafe-html-BhmP6ONc.js';
+import '../../directive-DZCF8pFJ.js';
+import '../svg-icon/icons.js';

package/cdn/components/service/service.js

@@ -0,0 +1,50 @@
+import { _ as __decorate } from '../../property-DiPQx9S3.js';
+import { r, x } from '../../lit-element-ByzbtpGk.js';
+import '../toast-container/toast-container.js';
+import '../../state-D1d5Sfj8.js';
+import '../toast-container/toast-container.style.js';
+import '../../index-B9iart53.js';
+import '../../services/toast.service.js';
+import '../base/tailwind-base.js';
+import '../../global-Dh9axYQH.js';
+import '../toast/toast.js';
+import '../toast/toast.style.js';
+import '../../controllers/slot-controller.js';
+import '../svg-icon/svg-icon.js';
+import '../../unsafe-html-BhmP6ONc.js';
+import '../../directive-DZCF8pFJ.js';
+import '../svg-icon/icons.js';
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t=t=>(e,o)=>{ void 0!==o?o.addInitializer((()=>{customElements.define(t,e);})):customElements.define(t,e);};
+
+/**
+ * @tag plus-service
+ * @summary A utility component to automatically set up the UI infrastructure for global services.
+ * Currently sets up the necessary containers for the ToastService.
+ * Place this component once at the root of your application.
+ * @dependency plus-toast-container
+ */
+let PlusService = class PlusService extends r {
+    // This component doesn't need its own shadow DOM or complex styles
+    createRenderRoot() {
+        return this;
+    }
+    render() {
+        return x `
+      <plus-toast-container position="top-left"></plus-toast-container>
+      <plus-toast-container position="top-right"></plus-toast-container>
+      <plus-toast-container position="bottom-left"></plus-toast-container>
+      <plus-toast-container position="bottom-right"></plus-toast-container>
+    `;
+    }
+};
+PlusService = __decorate([
+    t('plus-service')
+], PlusService);
+
+export { PlusService };