@pixelated-tech/components 3.7.4 → 3.7.5

package/dist/components/sitebuilder/form/form.css

@@ -123,4 +123,85 @@ form span {
 
 .tooltip-text-item:last-child {
 	margin-bottom: 0;
+}
+
+/* ========================================
+=============    TAG INPUT    ============
+======================================== */
+
+.form-tag-input {
+	margin: 5px 0;
+}
+
+.tag-container {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	min-height: 40px;
+	padding: 5px;
+	border: 1px solid #CCC;
+	border-radius: 5px;
+	background-color: #FFF;
+	gap: 5px;
+}
+
+.tag-container:focus-within {
+	border-color: #0C0;
+	box-shadow: 0 0 5px 2px #CCC;
+}
+
+.tag-chip {
+	display: inline-flex;
+	align-items: center;
+	background-color: #eee;
+	padding: 4px 8px;
+	border-radius: 10px;
+	border: 1px solid #bbb;
+	white-space: nowrap;
+}
+
+.tag-remove {
+	background: none;
+	border: none;
+	color: #1565c0;
+	cursor: pointer;
+	font-size: 1.2em;
+	line-height: 1;
+	padding: 0;
+	margin-left: 4px;
+	border-radius: 50%;
+	width: 16px;
+	height: 16px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: background-color 0.2s;
+}
+
+.tag-remove:hover {
+	background-color: rgba(21, 101, 192, 0.1);
+}
+
+.tag-remove:disabled {
+	cursor: not-allowed;
+	opacity: 0.5;
+}
+
+.tag-input {
+	flex: 1;
+	min-width: 120px;
+	border: none;
+	outline: none;
+	padding: 4px 8px;
+	font-size: 1.1em;
+	font-family: Verdana, Geneva, sans-serif;
+	background: transparent;
+}
+
+.tag-input:focus {
+	outline: none;
+}
+
+.tag-input::placeholder {
+	color: #999;
 }

package/dist/components/sitebuilder/form/formcomponents.js

@@ -372,6 +372,92 @@ export function FormDataList(props) {
     }
     return (_jsx("datalist", { id: props.id, children: options }));
 }
+FormTagInput.propTypes = {
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string,
+    defaultValue: PropTypes.arrayOf(PropTypes.string),
+    value: PropTypes.arrayOf(PropTypes.string),
+    placeholder: PropTypes.string,
+    autoComplete: PropTypes.string,
+    // flag attributes
+    disabled: PropTypes.string,
+    readOnly: PropTypes.string,
+    required: PropTypes.string,
+    // ----- for calculations
+    display: PropTypes.string,
+    label: PropTypes.string,
+    tooltip: PropTypes.string,
+    className: PropTypes.string,
+    validate: PropTypes.string,
+    onChange: PropTypes.func,
+};
+export function FormTagInput(props) {
+    const [inputValue, setInputValue] = useState('');
+    const [internalTags, setInternalTags] = useState(Array.isArray(props.defaultValue) ? props.defaultValue.filter((tag) => tag != null) : []);
+    const { formValidate, handleBlur } = useFormComponent(props);
+    const { validateField } = useFormValidation();
+    // Determine if component is controlled or uncontrolled
+    const isControlled = props.value !== undefined;
+    // Get current tags array - use props.value if controlled, otherwise internal state
+    const currentTags = isControlled
+        ? (Array.isArray(props.value) ? props.value.filter((tag) => tag != null) : [])
+        : internalTags;
+    // Handle adding a new tag
+    const addTag = (tag) => {
+        const trimmedTag = tag.trim();
+        if (trimmedTag && !currentTags.includes(trimmedTag)) {
+            const newTags = [...currentTags, trimmedTag];
+            // Always call onChange if provided (for external updates)
+            if (props.onChange) {
+                props.onChange(newTags);
+            }
+            if (!isControlled) {
+                // Uncontrolled mode: update internal state
+                setInternalTags(newTags);
+            }
+            // Trigger form validation
+            if (props.id) {
+                validateField(props.id, true, []);
+            }
+        }
+        setInputValue('');
+    };
+    // Handle removing a tag
+    const removeTag = (tagToRemove) => {
+        const newTags = currentTags.filter(tag => tag !== tagToRemove);
+        // Always call onChange if provided (for external updates)
+        if (props.onChange) {
+            props.onChange(newTags);
+        }
+        if (!isControlled) {
+            // Uncontrolled mode: update internal state
+            setInternalTags(newTags);
+        }
+        // Trigger form validation
+        if (props.id) {
+            validateField(props.id, true, []);
+        }
+    };
+    // Handle input key events
+    const handleKeyDown = (event) => {
+        if (event.key === 'Enter' || event.key === ',') {
+            event.preventDefault();
+            addTag(inputValue);
+        }
+        else if (event.key === 'Backspace' && inputValue === '' && currentTags.length > 0) {
+            // Remove last tag on backspace when input is empty
+            const lastTag = currentTags[currentTags.length - 1];
+            if (lastTag) {
+                removeTag(lastTag);
+            }
+        }
+    };
+    // Handle input change
+    const handleInputChange = (event) => {
+        setInputValue(event.target.value);
+    };
+    return (_jsxs("div", { className: `form-tag-input ${props.className || ''}`, children: [_jsx(FormLabel, { id: props.id, label: props.label }, "label-" + props.id), props.tooltip ? _jsx(FormTooltip, { id: props.id, text: [props.tooltip] }) : "", props.display === "vertical" ? formValidate : "", _jsxs("div", { className: "tag-container", children: [currentTags.map((tag, index) => (_jsxs("span", { className: "tag-chip", children: [tag, _jsx("button", { type: "button", className: "tag-remove", onClick: () => removeTag(tag), "aria-label": `Remove ${tag}`, disabled: props.disabled === 'disabled', children: "\u00D7" })] }, index))), _jsx("input", { type: "text", id: props.id, name: props.name || undefined, value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: props.placeholder || "Add tag...", autoComplete: props.autoComplete || undefined, disabled: props.disabled === 'disabled', readOnly: props.readOnly === 'readOnly', required: props.required === 'required', className: "tag-input", "aria-label": "Add new tag" })] }), props.display !== "vertical" ? formValidate : ""] }));
+}
 FormFieldset.propTypes = {};
 export function FormFieldset(props) {
     return (_jsx(_Fragment, {}));

package/dist/data/form.json

@@ -358,6 +358,18 @@
 				"tooltip": "Please enter your comments"
 			}
 		},
+		{
+			"component" : "FormTagInput",
+			"props" : {
+				"id" : "tags",
+				"name" : "tags",
+				"defaultValue" : ["react", "javascript"],
+				"display" : "horizontal",
+				"label" : "Tags : ",
+				"placeholder" : "Add tags...",
+				"tooltip" : "Add tags by typing and pressing Enter or comma"
+			}
+		},
 		{
 			"component" : "FormButton",
 			"props" : {

package/dist/types/components/sitebuilder/form/formcomponents.d.ts

@@ -194,6 +194,27 @@ export declare namespace FormDataList {
         items: PropTypes.Requireable<any[]>;
     };
 }
+export type FormTagInputType = InferProps<typeof FormTagInput.propTypes>;
+export declare function FormTagInput(props: FormTagInputType): import("react/jsx-runtime").JSX.Element;
+export declare namespace FormTagInput {
+    var propTypes: {
+        id: PropTypes.Validator<string>;
+        name: PropTypes.Requireable<string>;
+        defaultValue: PropTypes.Requireable<(string | null | undefined)[]>;
+        value: PropTypes.Requireable<(string | null | undefined)[]>;
+        placeholder: PropTypes.Requireable<string>;
+        autoComplete: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<string>;
+        readOnly: PropTypes.Requireable<string>;
+        required: PropTypes.Requireable<string>;
+        display: PropTypes.Requireable<string>;
+        label: PropTypes.Requireable<string>;
+        tooltip: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        validate: PropTypes.Requireable<string>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+}
 export type FormFieldsetType = InferProps<typeof FormFieldset.propTypes>;
 export declare function FormFieldset(props: FormFieldsetType): import("react/jsx-runtime").JSX.Element;
 export declare namespace FormFieldset {

package/dist/types/components/sitebuilder/form/formcomponents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"formcomponents.d.ts","sourceRoot":"","sources":["../../../../../src/components/sitebuilder/form/formcomponents.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"formcomponents.d.ts","sourceRoot":"","sources":["../../../../../src/components/sitebuilder/form/formcomponents.tsx"],"names":[],"mappings":"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"}

package/dist/types/stories/general/splitscroll.stories.d.ts

@@ -4,14 +4,14 @@ declare namespace _default {
     export let decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
 }
 export default _default;
-export namespace BasicSplitScroll {
+export namespace SplitScroll_Basic {
     function render(): import("react/jsx-runtime").JSX.Element;
 }
-export namespace ProductShowcase {
+export namespace SplitScroll_ProductShowcase {
     export function render_1(): import("react/jsx-runtime").JSX.Element;
     export { render_1 as render };
 }
-export namespace MinimalSplitScroll {
+export namespace SplitScroll_Minimal {
     export function render_2(): import("react/jsx-runtime").JSX.Element;
     export { render_2 as render };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pixelated-tech/components",
-	"version": "3.7.4",
+	"version": "3.7.5",
 	"private": false,
 	"author": {
 		"name": "Pixelated Technologies",

package/dist/types/stories/lookbook/lookbook.stories.d.ts

@@ -1,19 +0,0 @@
-declare namespace _default {
-    export let title: string;
-    export { SplitScroll as component };
-    export let decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
-}
-export default _default;
-export namespace BasicSplitScroll {
-    function render(): import("react/jsx-runtime").JSX.Element;
-}
-export namespace ProductShowcase {
-    export function render_1(): import("react/jsx-runtime").JSX.Element;
-    export { render_1 as render };
-}
-export namespace MinimalSplitScroll {
-    export function render_2(): import("react/jsx-runtime").JSX.Element;
-    export { render_2 as render };
-}
-import { SplitScroll } from '@/components/general/splitscroll';
-//# sourceMappingURL=lookbook.stories.d.ts.map

package/dist/types/stories/lookbook/lookbook.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"lookbook.stories.d.ts","sourceRoot":"","sources":["../../../../src/stories/lookbook/lookbook.stories.js"],"names":[],"mappings":";;;;;;;IA4BS,2DAwGP;;;IAIO,oEAyFP;;;;IAIO,oEAuBP;;;4BA3P0B,kCAAkC"}