@plitzi/sdk-elements 0.30.19

package/dist/elements/basic/Button/index.mjs

@@ -0,0 +1,106 @@
+import e from "./Button.mjs";
+//#region src/elements/basic/Button/index.ts
+var t = Object.assign(e, {
+	type: "button",
+	content: {
+		attributes: {
+			contentPlacement: "after",
+			content: "Button",
+			subType: "button",
+			disabled: !1
+		},
+		definition: {
+			label: "Button",
+			type: "button",
+			items: [],
+			bindings: {},
+			styleSelectors: { base: "" },
+			initialState: { visibility: !0 }
+		},
+		builder: {
+			canDelete: !0,
+			canSelect: !0,
+			canDragDrop: !0,
+			canMove: !0,
+			canTemplate: !0,
+			itemsAllowed: [],
+			itemsNotAllowed: []
+		},
+		market: {
+			category: "basic",
+			owner: "Plitzi",
+			verified: !0,
+			license: "MIT",
+			website: "https://plitzi.com",
+			backgroundColor: "#4422ee",
+			icon: "fa-solid fa-stop"
+		},
+		defaultStyle: {
+			name: "Button",
+			displayMode: "desktop",
+			style: { base: { default: {} } },
+			subTypes: {
+				button: {
+					name: "Default Button",
+					displayMode: "desktop",
+					style: { base: { default: {
+						"min-height": "30px",
+						"min-width": "30px",
+						"padding-top": "6px",
+						"padding-left": "12px",
+						"padding-right": "12px",
+						"padding-bottom": "6px",
+						cursor: "pointer",
+						"font-size": "16px",
+						"line-height": "24px",
+						"border-top-left-radius": "4px",
+						"border-top-right-radius": "4px",
+						"border-bottom-left-radius": "4px",
+						"border-bottom-right-radius": "4px"
+					} } }
+				},
+				reset: {
+					name: "Reset Button",
+					displayMode: "desktop",
+					style: { base: { default: {
+						"min-height": "30px",
+						"min-width": "30px",
+						"padding-top": "6px",
+						"padding-left": "12px",
+						"padding-right": "12px",
+						"padding-bottom": "6px",
+						cursor: "pointer",
+						"font-size": "16px",
+						"line-height": "24px",
+						"border-top-left-radius": "4px",
+						"border-top-right-radius": "4px",
+						"border-bottom-left-radius": "4px",
+						"border-bottom-right-radius": "4px"
+					} } }
+				},
+				submit: {
+					name: "Submit Button",
+					displayMode: "desktop",
+					style: { base: { default: {
+						"min-height": "30px",
+						"min-width": "30px",
+						"padding-top": "6px",
+						"padding-left": "12px",
+						"padding-right": "12px",
+						"padding-bottom": "6px",
+						cursor: "pointer",
+						"font-size": "16px",
+						"line-height": "24px",
+						"border-top-left-radius": "4px",
+						"border-top-right-radius": "4px",
+						"border-bottom-left-radius": "4px",
+						"border-bottom-right-radius": "4px"
+					} } }
+				}
+			}
+		},
+		settings: {}
+	}
+});
+//#endregion
+export { t as default };

package/dist/elements/basic/Dropdown/Dropdown.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode, RefObject } from 'react';
+export type DropdownProps = {
+    ref?: RefObject<HTMLDivElement | null>;
+    children?: ReactNode;
+    className?: string;
+    popupPlacement?: 'left' | 'right' | 'top' | 'bottom';
+    openPopup?: boolean;
+    backgroundDisabled?: boolean;
+    closeOnClickBackground?: boolean;
+    closeOnClickPopup?: boolean;
+    containerTopOffset?: number;
+    containerLeftOffset?: number;
+    disabled?: boolean;
+};
+declare const Dropdown: ({ ref, children, className, popupPlacement, openPopup, backgroundDisabled, closeOnClickBackground, closeOnClickPopup, containerTopOffset, containerLeftOffset, disabled }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
+declare const _default: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<DropdownProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default _default;
+export { Dropdown };

package/dist/elements/basic/Dropdown/Dropdown.mjs

@@ -0,0 +1,57 @@
+import e from "../../../Element/RootElement.mjs";
+import t from "./DropdownContext.mjs";
+import n from "./useDropdown.mjs";
+import r from "../../../Element/hocs/withElement.mjs";
+import { useCallback as i, useMemo as a, useRef as o } from "react";
+import s from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import u from "clsx";
+import d from "@plitzi/sdk-shared/elements/hooks/useElement";
+var f = r(({ ref: r, children: f, className: p = "", popupPlacement: m = "bottom", openPopup: h = !1, backgroundDisabled: g = !1, closeOnClickBackground: _ = !0, closeOnClickPopup: v = !0, containerTopOffset: y = 5, containerLeftOffset: b = 5, disabled: x = !1 }) => {
+	let { setElementState: S, definition: { styleSelectors: C } } = d(), { settings: { previewMode: w }, utils: { getWindow: T } } = s(), E = o(null), D = o(null), O = a(() => T(), [T]), k = i((e) => {
+		_ && (e.stopPropagation(), e.preventDefault(), S((e) => ({
+			...e,
+			openPopup: !1
+		})));
+	}, [_, S]), A = i((e) => {
+		S((t) => ({
+			...t,
+			openPopup: e
+		}));
+	}, [S]), [, , j, M, , N] = n({
+		ref: r,
+		popupRef: E,
+		open: h,
+		disabled: !w || x,
+		closeOnClickPopup: v,
+		placement: m,
+		offsetX: b,
+		offsetY: y,
+		myWindow: O,
+		onChange: A
+	}), P = a(() => ({
+		popupRef: E,
+		openPopup: h,
+		parameters: N,
+		onClick: M
+	}), [
+		M,
+		h,
+		N
+	]);
+	return /* @__PURE__ */ l(e, {
+		ref: r,
+		className: u("plitzi-component__dropdown", p, { "container--empty--skip": !w && !f }),
+		onClick: j,
+		children: [/* @__PURE__ */ c(t, {
+			value: P,
+			children: f
+		}), h && g && w && /* @__PURE__ */ c("div", {
+			ref: D,
+			className: u("plitzi-component__dropdown__background-container", C.backgroundContainer),
+			onClick: k
+		})]
+	});
+});
+//#endregion
+export { f as default };

package/dist/elements/basic/Dropdown/DropdownContext.d.ts

@@ -0,0 +1,10 @@
+import { FloatingPosition } from './useDropdown';
+import { MouseEvent, RefObject } from 'react';
+export type DropdownContextValue = {
+    popupRef: RefObject<HTMLDivElement | null>;
+    openPopup: boolean;
+    parameters?: FloatingPosition;
+    onClick: (e: MouseEvent) => void;
+};
+declare const DropdownContext: import('react').Context<DropdownContextValue>;
+export default DropdownContext;

package/dist/elements/basic/Dropdown/DropdownContext.mjs

@@ -0,0 +1,6 @@
+import { createContext as e } from "react";
+//#region src/elements/basic/Dropdown/DropdownContext.ts
+var t = e(void 0);
+t.displayName = "DropdownContext";
+//#endregion
+export { t as default };

package/dist/elements/basic/Dropdown/DropdownPopup/DropdownPopup.d.ts

@@ -0,0 +1,13 @@
+import { RefObject, ReactNode } from 'react';
+export type DropdownPopupProps = {
+    ref?: RefObject<HTMLDivElement | null>;
+    className?: string;
+    children?: ReactNode;
+};
+declare const DropdownPopup: ({ ref, className, children }: DropdownPopupProps) => import("react/jsx-runtime").JSX.Element;
+declare const _default: {
+    (props: import('../../../../Element/hocs/withElement').WithElementProps<DropdownPopupProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default _default;
+export { DropdownPopup };

package/dist/elements/basic/Dropdown/DropdownPopup/DropdownPopup.mjs

@@ -0,0 +1,18 @@
+import e from "../../../../Element/RootElement.mjs";
+import t from "../DropdownContext.mjs";
+import n from "../../../../Element/hocs/withElement.mjs";
+import { use as r, useImperativeHandle as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+import o from "clsx";
+var s = n(({ ref: n, className: s = "", children: c }) => {
+	let { popupRef: l, openPopup: u, parameters: d, onClick: f } = r(t);
+	return i(n, () => l.current ?? null, [l]), /* @__PURE__ */ a(e, {
+		ref: l,
+		className: o("plitzi-component__dropdown-popup", s, { "popup-container--no-visible": !u || !d }),
+		style: d,
+		onClick: f,
+		children: c
+	});
+});
+//#endregion
+export { s as default };

package/dist/elements/basic/Dropdown/DropdownPopup/Settings.d.ts

@@ -0,0 +1,2 @@
+declare const Settings: () => import("react/jsx-runtime").JSX.Element;
+export default Settings;

package/dist/elements/basic/Dropdown/DropdownPopup/index.d.ts

@@ -0,0 +1,68 @@
+declare const DropdownPopup: {
+    (props: import('../../../../Element/hocs/withElement').WithElementProps<import('./DropdownPopup').DropdownPopupProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    type: string;
+    content: {
+        attributes: {};
+        definition: {
+            label: string;
+            type: string;
+            description: string;
+            items: never[];
+            bindings: {};
+            styleSelectors: {
+                base: string;
+            };
+            initialState: {};
+        };
+        builder: {
+            canDelete: boolean;
+            canSelect: boolean;
+            canDragDrop: boolean;
+            canMove: boolean;
+            canTemplate: boolean;
+            itemsAllowed: never[];
+            itemsNotAllowed: never[];
+        };
+        market: {
+            category: string;
+            owner: string;
+            verified: boolean;
+            license: string;
+            website: string;
+            backgroundColor: string;
+            icon: string;
+        };
+        defaultStyle: {
+            name: string;
+            displayMode: string;
+            style: {
+                base: {
+                    default: {
+                        'background-color': string;
+                        'min-height': string;
+                        'min-width': string;
+                        'padding-right': string;
+                        'padding-bottom': string;
+                        'padding-left': string;
+                        'padding-top': string;
+                        position: string;
+                        display: string;
+                        'flex-direction': string;
+                        'border-top-right-radius': string;
+                        'border-bottom-right-radius': string;
+                        'border-bottom-left-radius': string;
+                        'border-top-left-radius': string;
+                        'box-shadow': string;
+                        'z-index': number;
+                    };
+                };
+            };
+            subTypes: {};
+        };
+        settings: {};
+    };
+    initialItems: never[];
+};
+export default DropdownPopup;

package/dist/elements/basic/Dropdown/DropdownPopup/index.mjs

@@ -0,0 +1,62 @@
+import e from "./DropdownPopup.mjs";
+//#region src/elements/basic/Dropdown/DropdownPopup/index.ts
+var t = Object.assign(e, {
+	type: "dropdownPopup",
+	content: {
+		attributes: {},
+		definition: {
+			label: "Dropdown Popup",
+			type: "dropdownPopup",
+			description: "",
+			items: [],
+			bindings: {},
+			styleSelectors: { base: "" },
+			initialState: {}
+		},
+		builder: {
+			canDelete: !1,
+			canSelect: !0,
+			canDragDrop: !1,
+			canMove: !1,
+			canTemplate: !1,
+			itemsAllowed: [],
+			itemsNotAllowed: []
+		},
+		market: {
+			category: "basic",
+			owner: "Plitzi",
+			verified: !0,
+			license: "MIT",
+			website: "https://plitzi.com",
+			backgroundColor: "#4422ee",
+			icon: ""
+		},
+		defaultStyle: {
+			name: "Dropdown Popup",
+			displayMode: "desktop",
+			style: { base: { default: {
+				"background-color": "white",
+				"min-height": "50px",
+				"min-width": "50px",
+				"padding-right": "4px",
+				"padding-bottom": "4px",
+				"padding-left": "4px",
+				"padding-top": "4px",
+				position: "fixed",
+				display: "flex",
+				"flex-direction": "column",
+				"border-top-right-radius": "4px",
+				"border-bottom-right-radius": "4px",
+				"border-bottom-left-radius": "4px",
+				"border-top-left-radius": "4px",
+				"box-shadow": "rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 11px",
+				"z-index": 100
+			} } },
+			subTypes: {}
+		},
+		settings: {}
+	},
+	initialItems: []
+});
+//#endregion
+export { t as default };

package/dist/elements/basic/Dropdown/Settings.d.ts

@@ -0,0 +1,13 @@
+type SettingsProps = {
+    popupPlacement?: 'top' | 'bottom' | 'left' | 'right';
+    openPopup?: boolean;
+    backgroundDisabled?: boolean;
+    closeOnClickBackground?: boolean;
+    closeOnClickPopup?: boolean;
+    containerTopOffset?: number;
+    containerLeftOffset?: number;
+    disabled?: boolean;
+    onUpdate?: (key: string, value: string | boolean | number) => void;
+};
+declare const Settings: ({ popupPlacement, openPopup, backgroundDisabled, closeOnClickBackground, closeOnClickPopup, containerTopOffset, containerLeftOffset, disabled, onUpdate }: SettingsProps) => import("react/jsx-runtime").JSX.Element;
+export default Settings;

package/dist/elements/basic/Dropdown/Settings.mjs

@@ -0,0 +1,84 @@
+import { useCallback as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import r from "@plitzi/plitzi-ui/Checkbox";
+import i from "@plitzi/plitzi-ui/Input";
+import a from "@plitzi/plitzi-ui/Select";
+//#region src/elements/basic/Dropdown/Settings.tsx
+var o = ({ popupPlacement: o = "bottom", openPopup: s = !1, backgroundDisabled: c = !1, closeOnClickBackground: l = !0, closeOnClickPopup: u = !0, containerTopOffset: d = 5, containerLeftOffset: f = 5, disabled: p = !1, onUpdate: m }) => {
+	let h = e((e) => m?.("containerTopOffset", parseFloat(e)), [m]), g = e((e) => m?.("containerLeftOffset", parseFloat(e)), [m]), _ = e((e) => m?.("popupPlacement", e), [m]), v = e((e) => m?.("openPopup", e.target.checked), [m]), y = e((e) => m?.("backgroundDisabled", e.target.checked), [m]), b = e((e) => m?.("closeOnClickBackground", e.target.checked), [m]), x = e((e) => m?.("closeOnClickPopup", e.target.checked), [m]), S = e((e) => m?.("disabled", e.target.checked), [m]);
+	return /* @__PURE__ */ n("div", {
+		className: "flex h-full flex-col gap-4 py-2",
+		children: [
+			/* @__PURE__ */ n(a, {
+				value: o,
+				label: "Popup Placement",
+				onChange: _,
+				size: "xs",
+				children: [
+					/* @__PURE__ */ t("option", {
+						value: "top",
+						children: "Top"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "bottom",
+						children: "Bottom"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "left",
+						children: "Left"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "right",
+						children: "Right"
+					})
+				]
+			}),
+			/* @__PURE__ */ t(i, {
+				type: "number",
+				label: "Container Top Offset",
+				value: d,
+				onChange: h,
+				size: "xs"
+			}),
+			/* @__PURE__ */ t(i, {
+				type: "number",
+				label: "Container Left Offset",
+				value: f,
+				onChange: g,
+				size: "xs"
+			}),
+			/* @__PURE__ */ t(r, {
+				label: "Open Popup",
+				checked: s,
+				onChange: v,
+				size: "xs"
+			}),
+			/* @__PURE__ */ t(r, {
+				checked: c,
+				onChange: y,
+				label: " Disable Background",
+				size: "xs"
+			}),
+			/* @__PURE__ */ t(r, {
+				checked: l,
+				onChange: b,
+				label: "Close on click background",
+				size: "xs"
+			}),
+			/* @__PURE__ */ t(r, {
+				checked: u,
+				onChange: x,
+				label: "Close on click popup",
+				size: "xs"
+			}),
+			/* @__PURE__ */ t(r, {
+				checked: p,
+				label: "Disabled",
+				onChange: S,
+				size: "xs"
+			})
+		]
+	});
+};
+//#endregion
+export { o as default };

package/dist/elements/basic/Dropdown/index.d.ts

@@ -0,0 +1,146 @@
+declare const Dropdown: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Dropdown').DropdownProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    type: string;
+    content: {
+        attributes: {
+            popupPlacement: string;
+            openPopup: boolean;
+            backgroundDisabled: boolean;
+            closeOnClickBackground: boolean;
+            closeOnClickPopup: boolean;
+            containerTopOffset: number;
+            containerLeftOffset: number;
+            disabled: boolean;
+        };
+        definition: {
+            label: string;
+            type: string;
+            items: never[];
+            bindings: {};
+            styleSelectors: {
+                base: string;
+                backgroundContainer: string;
+            };
+            initialState: {
+                visibility: boolean;
+            };
+        };
+        builder: {
+            canDelete: boolean;
+            canSelect: boolean;
+            canDragDrop: boolean;
+            canMove: boolean;
+            canTemplate: boolean;
+            itemsAllowed: never[];
+            itemsNotAllowed: never[];
+        };
+        market: {
+            category: string;
+            owner: string;
+            verified: boolean;
+            license: string;
+            website: string;
+            backgroundColor: string;
+            icon: string;
+        };
+        defaultStyle: {
+            name: string;
+            displayMode: string;
+            style: {
+                base: {
+                    default: {
+                        'min-height': string;
+                        'min-width': string;
+                        cursor: string;
+                        'user-select': string;
+                    };
+                };
+                backgroundContainer: {
+                    default: {
+                        top: number;
+                        bottom: number;
+                        left: number;
+                        right: number;
+                        position: string;
+                        cursor: string;
+                        'z-index': number;
+                    };
+                };
+            };
+        };
+        settings: {};
+    };
+    initialItems: string[];
+    plugins: {
+        dropdownPopup: {
+            (props: import('../../../Element/hocs/withElement').WithElementProps<import('./DropdownPopup/DropdownPopup').DropdownPopupProps>): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        } & {
+            type: string;
+            content: {
+                attributes: {};
+                definition: {
+                    label: string;
+                    type: string;
+                    description: string;
+                    items: never[];
+                    bindings: {};
+                    styleSelectors: {
+                        base: string;
+                    };
+                    initialState: {};
+                };
+                builder: {
+                    canDelete: boolean;
+                    canSelect: boolean;
+                    canDragDrop: boolean;
+                    canMove: boolean;
+                    canTemplate: boolean;
+                    itemsAllowed: never[];
+                    itemsNotAllowed: never[];
+                };
+                market: {
+                    category: string;
+                    owner: string;
+                    verified: boolean;
+                    license: string;
+                    website: string;
+                    backgroundColor: string;
+                    icon: string;
+                };
+                defaultStyle: {
+                    name: string;
+                    displayMode: string;
+                    style: {
+                        base: {
+                            default: {
+                                'background-color': string;
+                                'min-height': string;
+                                'min-width': string;
+                                'padding-right': string;
+                                'padding-bottom': string;
+                                'padding-left': string;
+                                'padding-top': string;
+                                position: string;
+                                display: string;
+                                'flex-direction': string;
+                                'border-top-right-radius': string;
+                                'border-bottom-right-radius': string;
+                                'border-bottom-left-radius': string;
+                                'border-top-left-radius': string;
+                                'box-shadow': string;
+                                'z-index': number;
+                            };
+                        };
+                    };
+                    subTypes: {};
+                };
+                settings: {};
+            };
+            initialItems: never[];
+        };
+    };
+};
+export default Dropdown;