@plusui/library 0.1.0

package/dist/components/toast-container/toast-container.js

@@ -0,0 +1,111 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { i, x } from '../../lit-element-ByzbtpGk.js';
+import { r } from '../../state-D1d5Sfj8.js';
+import { toastContainerStyle } from './toast-container.style.js';
+import { ToastService } from '../../services/toast.service.js';
+import Tailwind from '../base/tailwind-base.js';
+import '../toast/toast.js';
+import '../../index-B9iart53.js';
+import '../../styles/global.js';
+import '../../style-inject.es-tgCJW-Cu.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';
+
+/**
+ * @tag plus-toast-container
+ * @summary A container element that listens to the ToastService to display toast notifications.
+ * @dependency plus-toast
+ * @dependency ToastService
+ *
+ * @slot - Toast components are rendered here based on ToastService updates.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --toast-container-gap - Controls the gap between toasts within the container.
+ * @cssproperty --toast-container-z-index - Controls the stack order of the container.
+ */
+class PlusToastContainer extends Tailwind {
+    constructor() {
+        super(...arguments);
+        /**
+         * The position the container is responsible for.
+         * Only toasts targeted for this position via ToastService will be displayed.
+         * @default 'top-right'
+         */
+        this.position = 'top-right';
+        /** The list of active toasts provided by the service. */
+        this._toasts = [];
+        this._unsubscribe = null;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._unsubscribe = ToastService.subscribe((toasts) => {
+            this._toasts = [...toasts];
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._unsubscribe?.();
+        this._unsubscribe = null;
+    }
+    _handleToastEvent(event) {
+        const toastElement = event.target;
+        if (toastElement.tagName.toLowerCase() === 'plus-toast') {
+            const toastId = toastElement.getAttribute('toast-id');
+            if (toastId) {
+                ToastService.close(toastId);
+            }
+        }
+    }
+    render() {
+        const { base } = toastContainerStyle({ position: this.position });
+        const filteredToasts = this._toasts.filter((toast) => toast.position === this.position);
+        return x `
+      <div class="${base()}" part="base" @plus-close=${this._handleToastEvent}>
+        ${filteredToasts.map((toast) => x `
+            <plus-toast
+              toast-id=${toast.id}
+              .message=${toast.message}
+              .header=${toast.header}
+              .status=${toast.status ?? 'default'}
+              .icon=${toast.icon}
+              .kind=${toast.kind ?? 'default'}
+              .size=${toast.size ?? 'md'}
+              ?dismiss=${toast.dismiss ?? true}
+              ?statusIcon=${toast.statusIcon ?? true}
+            ></plus-toast>
+          `)}
+      </div>
+    `;
+    }
+}
+PlusToastContainer.styles = [
+    ...Tailwind.styles,
+    i `
+      :host {
+        display: block;
+        position: fixed;
+        z-index: var(--toast-container-z-index, 9999);
+        pointer-events: none;
+        inset-block-start: var(--plus-spacing-04);
+        inset-inline-end: var(--plus-spacing-04);
+        max-width: calc(100% - 2 * var(--plus-spacing-04));
+        width: fit-content;
+      }
+      :host ::slotted(plus-toast) {
+        pointer-events: auto;
+      }
+    `,
+];
+__decorate([
+    n({ type: String, reflect: true })
+], PlusToastContainer.prototype, "position", void 0);
+__decorate([
+    r()
+], PlusToastContainer.prototype, "_toasts", void 0);
+
+export { PlusToastContainer, PlusToastContainer as default };

package/dist/components/toast-container/toast-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-container.js","sourceRoot":"","sources":["../../../src/components/toast-container/toast-container.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAG5D,OAAO,QAAQ,MAAM,0BAA0B,CAAC;AAChD,OAAO,mBAAmB,CAAC;AAE3B;;;;;;;;;;;;GAYG;AACH,MAAqB,kBAAmB,SAAQ,QAAQ;IAAxD;;QAoBE;;;;WAIG;QACwC,aAAQ,GACjD,WAAW,CAAC;QAEd,yDAAyD;QAEjD,YAAO,GAAkB,EAAE,CAAC;QAE5B,iBAAY,GAAwB,IAAI,CAAC;IAoDnD,CAAC;IAlDU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC,MAAM,EAAE,EAAE;YACpD,IAAI,CAAC,OAAO,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC;QAC7B,CAAC,CAAC,CAAC;IACL,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,YAAY,EAAE,EAAE,CAAC;QACtB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;IAC3B,CAAC;IAEO,iBAAiB,CAAC,KAAY;QACpC,MAAM,YAAY,GAAG,KAAK,CAAC,MAAqB,CAAC;QACjD,IAAI,YAAY,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,YAAY,EAAE,CAAC;YACxD,MAAM,OAAO,GAAG,YAAY,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;YACtD,IAAI,OAAO,EAAE,CAAC;gBACZ,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;YAC9B,CAAC;QACH,CAAC;IACH,CAAC;IAEQ,MAAM;QACb,MAAM,EAAE,IAAI,EAAE,GAAG,mBAAmB,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;QAElE,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CACxC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,KAAK,IAAI,CAAC,QAAQ,CAC5C,CAAC;QAEF,OAAO,IAAI,CAAA;oBACK,IAAI,EAAE,6BAA6B,IAAI,CAAC,iBAAiB;UACnE,cAAc,CAAC,GAAG,CAClB,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;yBAEA,KAAK,CAAC,EAAE;yBACR,KAAK,CAAC,OAAO;wBACd,KAAK,CAAC,MAAM;wBACZ,KAAK,CAAC,MAAM,IAAI,SAAS;sBAC3B,KAAK,CAAC,IAAI;sBACV,KAAK,CAAC,IAAI,IAAI,SAAS;sBACvB,KAAK,CAAC,IAAI,IAAI,IAAI;yBACf,KAAK,CAAC,OAAO,IAAI,IAAI;4BAClB,KAAK,CAAC,UAAU,IAAI,IAAI;;WAEzC,CACF;;KAEJ,CAAC;IACJ,CAAC;;AAlFe,yBAAM,GAAG;IACvB,GAAG,QAAQ,CAAC,MAAM;IAClB,GAAG,CAAA;;;;;;;;;;;;;;KAcF;CACF,AAjBqB,CAiBpB;eAlBiB,kBAAkB;AAyBM;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDAC5B;AAIN;IADP,KAAK,EAAE;mDAC4B;AAwDtC,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/components/toast-container/toast-container.style.d.ts

@@ -0,0 +1,113 @@
+export declare const toastContainerStyle: import("tailwind-variants").TVReturnType<{
+    position: {
+        'top-left': {
+            base: string[];
+        };
+        'top-right': {
+            base: string[];
+        };
+        'bottom-left': {
+            base: string[];
+        };
+        'bottom-right': {
+            base: string[];
+        };
+    };
+}, {
+    base: string[];
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    position: {
+        'top-left': {
+            base: string[];
+        };
+        'top-right': {
+            base: string[];
+        };
+        'bottom-left': {
+            base: string[];
+        };
+        'bottom-right': {
+            base: string[];
+        };
+    };
+}, {
+    position: {
+        'top-left': {
+            base: string[];
+        };
+        'top-right': {
+            base: string[];
+        };
+        'bottom-left': {
+            base: string[];
+        };
+        'bottom-right': {
+            base: string[];
+        };
+    };
+}>, {
+    position: {
+        'top-left': {
+            base: string[];
+        };
+        'top-right': {
+            base: string[];
+        };
+        'bottom-left': {
+            base: string[];
+        };
+        'bottom-right': {
+            base: string[];
+        };
+    };
+}, {
+    base: string[];
+}, import("tailwind-variants").TVReturnType<{
+    position: {
+        'top-left': {
+            base: string[];
+        };
+        'top-right': {
+            base: string[];
+        };
+        'bottom-left': {
+            base: string[];
+        };
+        'bottom-right': {
+            base: string[];
+        };
+    };
+}, {
+    base: string[];
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    position: {
+        'top-left': {
+            base: string[];
+        };
+        'top-right': {
+            base: string[];
+        };
+        'bottom-left': {
+            base: string[];
+        };
+        'bottom-right': {
+            base: string[];
+        };
+    };
+}, {
+    position: {
+        'top-left': {
+            base: string[];
+        };
+        'top-right': {
+            base: string[];
+        };
+        'bottom-left': {
+            base: string[];
+        };
+        'bottom-right': {
+            base: string[];
+        };
+    };
+}>, unknown, unknown, undefined>>;
+//# sourceMappingURL=toast-container.style.d.ts.map

package/dist/components/toast-container/toast-container.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-container.style.d.ts","sourceRoot":"","sources":["../../../src/components/toast-container/toast-container.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCA0B9B,CAAC"}

package/dist/components/toast-container/toast-container.style.js

@@ -0,0 +1,31 @@
+import { c as ce } from '../../index-B9iart53.js';
+
+const toastContainerStyle = ce({
+    slots: {
+        base: [
+            'plus-container fixed w-fit flex flex-col gap-2 z-10',
+        ],
+    },
+    variants: {
+        position: {
+            'top-left': {
+                base: ['top-5 left-5 items-start'],
+            },
+            'top-right': {
+                base: ['top-5 right-5 items-end'],
+            },
+            'bottom-left': {
+                base: ['bottom-5 left-5 items-start'],
+            },
+            'bottom-right': {
+                base: ['bottom-5 right-5 items-end'],
+            },
+        },
+    },
+    compoundVariants: [],
+    defaultVariants: {
+        position: 'top-right',
+    },
+});
+
+export { toastContainerStyle };

package/dist/components/toast-container/toast-container.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-container.style.js","sourceRoot":"","sources":["../../../src/components/toast-container/toast-container.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,MAAM,mBAAmB,GAAG,EAAE,CAAC;IACpC,KAAK,EAAE;QACL,IAAI,EAAE;YACJ,qDAAqD;SACtD;KACF;IACD,QAAQ,EAAE;QACR,QAAQ,EAAE;YACR,UAAU,EAAE;gBACV,IAAI,EAAE,CAAC,0BAA0B,CAAC;aACnC;YACD,WAAW,EAAE;gBACX,IAAI,EAAE,CAAC,yBAAyB,CAAC;aAClC;YACD,aAAa,EAAE;gBACb,IAAI,EAAE,CAAC,6BAA6B,CAAC;aACtC;YACD,cAAc,EAAE;gBACd,IAAI,EAAE,CAAC,4BAA4B,CAAC;aACrC;SACF;KACF;IACD,gBAAgB,EAAE,EAAE;IACpB,eAAe,EAAE;QACf,QAAQ,EAAE,WAAW;KACtB;CACF,CAAC,CAAC"}

package/dist/components/toggle/index.d.ts

@@ -0,0 +1,2 @@
+export * from './toggle.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/toggle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/toggle/index.ts"],"names":[],"mappings":"AAEA,cAAc,aAAa,CAAC"}

package/dist/components/toggle/index.js

@@ -0,0 +1,25 @@
+import { PlusToggle } from './toggle.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
+import '../../state-D1d5Sfj8.js';
+import '../../query-CHb9Ft_d.js';
+import '../../base-Cl6v8-BZ.js';
+import '../../live-BOAtKRUN.js';
+import '../../directive-DZCF8pFJ.js';
+import '../base/tailwind-base.js';
+import '../../styles/global.js';
+import '../../style-inject.es-tgCJW-Cu.js';
+import '../caption/caption.style.js';
+import '../../index-B9iart53.js';
+import '../label/label.style.js';
+import './toggle.style.js';
+import '../svg-icon/index.js';
+import '../svg-icon/svg-icon.js';
+import '../../unsafe-html-BhmP6ONc.js';
+import '../svg-icon/icons.js';
+import '../../if-defined-D-m3dgRf.js';
+import '../../style-map-DC_vNus2.js';
+
+customElements.define('plus-toggle', PlusToggle);
+
+export { PlusToggle };

package/dist/components/toggle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/toggle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC,cAAc,aAAa,CAAC;AAE5B,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC"}

package/dist/components/toggle/toggle.d.ts

@@ -0,0 +1,112 @@
+import Tailwind from '../base/tailwind-base';
+import '../svg-icon/index.js';
+import type { PropertyValues } from 'lit';
+/**
+ * @tag plus-toggle
+ * @summary Toggle component that provides a switch with various styles and states.
+ *
+ * @slot - The default slot for toggle text content when no text property is specified
+ *
+ * @csspart base - The component's base wrapper
+ * @csspart label - The label element
+ * @csspart control - The control element containing the toggle and text
+ * @csspart switch - The switch element
+ * @csspart dot - The dot element inside the switch
+ * @csspart text - The text element
+ * @csspart icon - The icon element when an icon is used
+ * @csspart caption - The caption element
+ *
+ * @cssproperty --text-color - Controls the text color
+ * @cssproperty --border-color - Controls the border color of the toggle
+ * @cssproperty --switch-bg - Controls the background color of the switch
+ * @cssproperty --switch-bg-hover - Controls the background color when hovered
+ * @cssproperty --switch-bg-active - Controls the background color when pressed
+ * @cssproperty --dot-bg - Controls the background color of the dot
+ * @cssproperty --dot-text - Controls the text color of the icon in the dot
+ *
+ * @event plus-change - Emitted when the toggle state changes
+ * @event plus-input - Emitted when the toggle state changes (for input event compatibility)
+ * @event plus-focus - Emitted when the toggle gains focus
+ * @event plus-blur - Emitted when the toggle loses focus
+ * @event plus-invalid - Emitted when the toggle validation fails
+ *
+ * @example
+ * ```html
+ * <plus-toggle label="Dark Mode" size="md">Enable dark mode</plus-toggle>
+ * ```
+ */
+export declare class PlusToggle extends Tailwind {
+    static formAssociated: boolean;
+    private internals;
+    static styles: import("lit").CSSResult[];
+    input: HTMLInputElement;
+    private hasFocus;
+    private validationMessage;
+    name: string;
+    value: string;
+    checked: boolean;
+    size: 'sm' | 'md' | 'lg';
+    label?: string;
+    caption?: string;
+    text?: string;
+    textPosition: 'left' | 'right';
+    toggleIcon?: string;
+    toggleActiveIcon?: string;
+    toggleInActiveIcon?: string;
+    iconSize?: number;
+    error: boolean;
+    errorMessage: string;
+    disabled: boolean;
+    readonly: boolean;
+    required: boolean;
+    fullWidth: boolean;
+    animation: 'default' | 'bounce' | 'smooth';
+    customAriaLabel?: string;
+    constructor();
+    /**
+     * Checks the validity of the toggle input
+     * @returns True if the toggle is valid, false otherwise
+     */
+    checkValidity(): boolean;
+    /**
+     * Reports the validity of the toggle input
+     * @returns True if the toggle is valid, false otherwise
+     */
+    reportValidity(): boolean;
+    /**
+     * Sets a custom validity message for the toggle
+     * @param message The custom validity message
+     */
+    setCustomValidity(message: string): void;
+    private setFormValue;
+    updated(changedProperties: Map<string | symbol, unknown> | PropertyValues<this>): void;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    private handleBlur;
+    private handleFocus;
+    /**
+     * Gets the validation message for the toggle
+     * @returns {string} The validation message
+     * @private
+     */
+    private getValidationMessage;
+    /**
+     * Validates the toggle input
+     * @private
+     */
+    private validate;
+    /**
+     * Called when the input is invalid
+     * @param {Event} event The event object
+     * @private
+     */
+    private handleInvalid;
+    private handleChange;
+    private handleControlClick;
+    click(): void;
+    focus(options?: FocusOptions): void;
+    blur(): void;
+    getToggleIcon(): import("lit-html").TemplateResult<1> | "";
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=toggle.d.ts.map

package/dist/components/toggle/toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../src/components/toggle/toggle.ts"],"names":[],"mappings":"AAGA,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAI7C,OAAO,sBAAsB,CAAC;AAE9B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,qBAAa,UAAW,SAAQ,QAAQ;IACtC,MAAM,CAAC,cAAc,UAAQ;IACpB,OAAO,CAAC,SAAS,CAAoB;IAE9C,OAAgB,MAAM,4BAapB;IAEe,KAAK,EAAG,gBAAgB,CAAC;IAEjC,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,iBAAiB,CAAM;IAEZ,IAAI,SAAM;IACV,KAAK,SAAQ;IACG,OAAO,UAAS;IAC/B,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IAE1C,YAAY,EAAE,MAAM,GAAG,OAAO,CAAW;IACa,UAAU,CAAC,EAAE,MAAM,CAAC;IAE1E,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IACwB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE1B,KAAK,UAAS;IACF,YAAY,SAAM;IAC9B,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACjB,QAAQ,UAAS;IAE7D,SAAS,UAAS;IAElB,SAAS,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAa;IAEvD,eAAe,CAAC,EAAE,MAAM,CAAC;;IAmBzB;;;OAGG;IACI,aAAa,IAAI,OAAO;IAM/B;;;OAGG;IACI,cAAc,IAAI,OAAO;IAiBhC;;;OAGG;IACI,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAO/C,OAAO,CAAC,YAAY;IASX,OAAO,CACd,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,GAAG,cAAc,CAAC,IAAI,CAAC;IAmBzE,iBAAiB;IAMjB,oBAAoB,CAAC,QAAQ,EAAE,OAAO;IAItC,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,WAAW;IAKnB;;;;OAIG;IACH,OAAO,CAAC,oBAAoB;IA8B5B;;;OAGG;IACH,OAAO,CAAC,QAAQ;IAQhB;;;;OAIG;IACH,OAAO,CAAC,aAAa;IAkBrB,OAAO,CAAC,YAAY;IAkBpB,OAAO,CAAC,kBAAkB;IAUjB,KAAK;IAML,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAI5B,IAAI;IAIb,aAAa;IA2BJ,MAAM;CAqLhB"}