@paperless/core 2.0.1-beta.2 → 2.0.1-beta.21

package/dist/collection/components/molecules/field/field.component.js

@@ -0,0 +1,775 @@
+import { h, Host, } from "@stencil/core";
+import { cva } from "class-variance-authority";
+const field = cva(['flex gap-2', 'w-inherit px-2', 'border border-solid rounded-lg'], {
+    variants: {
+        size: {
+            sm: 'h-6',
+            base: 'h-8',
+        },
+        disabled: {
+            false: 'bg-white',
+            true: 'bg-white-600 cursor-not-allowed',
+        },
+        focused: {
+            false: null,
+            true: null,
+        },
+        error: {
+            false: null,
+            true: null,
+        },
+    },
+    compoundVariants: [
+        {
+            focused: false,
+            error: false,
+            class: 'border-black-teal-100',
+        },
+        {
+            disabled: false,
+            focused: true,
+            error: false,
+            class: 'border-supportive-lilac-800 ring ring-supportive-lilac-100 selection:bg-supportive-lilac',
+        },
+        {
+            disabled: false,
+            error: true,
+            class: 'border-negative-red',
+        },
+        {
+            disabled: false,
+            focused: true,
+            error: true,
+            class: 'ring ring-negative-red-50 selection:bg-negative-red-50',
+        },
+    ],
+});
+const input = cva('text-sm placeholder:text-sm placeholder:text-black-teal-200 text-black-teal border-none outline-none focus:outline-none bg-transparent flex-1 min-w-0 h-full', {
+    variants: {
+        disabled: {
+            false: null,
+            true: 'cursor-not-allowed',
+        },
+    },
+});
+const prefixAndSuffic = cva(['flex flex-shrink-0 justify-center items-center text-center'], {
+    variants: {
+        disabled: {
+            false: null,
+            true: 'text-black-teal-100',
+        },
+        focused: {
+            false: null,
+            true: null,
+        },
+        error: {
+            false: null,
+            true: null,
+        },
+    },
+    compoundVariants: [
+        {
+            disabled: false,
+            focused: false,
+            error: false,
+            class: 'text-black-teal-300',
+        },
+        {
+            disabled: false,
+            focused: true,
+            error: false,
+            class: 'text-black-teal-500',
+        },
+        {
+            disabled: false,
+            focused: false,
+            error: true,
+            class: 'text-negative-red',
+        },
+        {
+            disabled: false,
+            focused: true,
+            error: true,
+            class: 'text-negative-red-800',
+        },
+    ],
+});
+export class Field {
+    constructor() {
+        this.size = 'base';
+        this.type = 'text';
+        this.properties = {};
+        this.prefix = undefined;
+        this.suffix = undefined;
+        this.icon = undefined;
+        this.iconFlip = undefined;
+        this.iconRotate = undefined;
+        this.iconPosition = 'start';
+        this.value = undefined;
+        this.label = undefined;
+        this.placeholder = undefined;
+        this.helper = undefined;
+        this.required = true;
+        this.error = undefined;
+        this.errorPlacement = undefined;
+        this.disabled = false;
+        this.focused = false;
+        this.forceShowTooltip = false;
+        this.selectAllOnFocus = true;
+        this.focusMethod = 'focus';
+        this.optionalTemplate = undefined;
+        this._focused = false;
+    }
+    /**
+     * Event whenever the value changes
+     */
+    valueChange;
+    /**
+     * Event whenever the input ref changes
+     */
+    inputRefChange;
+    /**
+     * The host element
+     */
+    _el;
+    _inputRef;
+    render() {
+        const { prefix, suffix, hasHeaderSlot, hasLabelSlot, hasHelperSlot, hasErrorSlot, } = this._getSlotInfo();
+        return (h(Host, { key: 'b4229a4e7257f7a929cc3208834d95ab97990bcf', class: 'p-field' }, h("p-field-container", { key: '66c1e5bdc10bdc948e1e943fde89355e861135ae', forceShowTooltip: this.forceShowTooltip || this._focused, label: this.label, helper: this.helper, error: this.error, required: this.required }, hasLabelSlot && (h("slot", { key: '045626975fa0861371d2ad830d9bf8ec5b80720d', name: 'label', slot: 'label' })), hasHeaderSlot && (h("slot", { key: '43e613371e67f46a0c8ed5c9201b2b4e5fe91d7e', name: 'header', slot: 'header' })), hasHelperSlot && (h("slot", { key: 'e26723ffb55166d67c50e761410cd62100d70fa1', name: 'helper', slot: 'helper' })), hasErrorSlot && (h("slot", { key: 'b833ce639c3ff30e88ba86cdeb45dcf01ef866ac', name: 'error', slot: 'error' })), h("div", { key: 'd6b045356bca57b02a4ea32096969b5e017e3884', class: field({
+                error: !!this.error?.length,
+                disabled: this.disabled,
+                focused: this.focused || this._focused,
+                size: this.size,
+            }), slot: 'content' }, (prefix || (this.icon && this.iconPosition === 'start')) && (h("div", { key: '6edc4f2c7b1b3bf470f7ab4a390655cdf0cf4d7f', class: prefixAndSuffic({
+                error: !!this.error?.length,
+                disabled: this.disabled,
+                focused: this.focused || this._focused,
+            }), onClick: () => this._focusInput() }, this.icon && this.iconPosition === 'start' ? (h("p-icon", { class: 'flex', variant: this.icon, rotate: this.iconRotate, flip: this.iconFlip })) : (prefix))), this._getInput(), (suffix || (this.icon && this.iconPosition === 'end')) && (h("div", { key: '4b9d7579b8f08fb7fd7b6a2b69d0fb1a8a2bead5', class: prefixAndSuffic({
+                error: !!this.error?.length,
+                disabled: this.disabled,
+                focused: this.focused || this._focused,
+            }), onClick: () => this._focusInput() }, this.icon && this.iconPosition === 'end' ? (h("p-icon", { class: 'flex', variant: this.icon, rotate: this.iconRotate, flip: this.iconFlip })) : (suffix)))))));
+    }
+    handleFocusIn() {
+        if (this.disabled) {
+            return;
+        }
+        this._focused = true;
+        this._selectAll();
+    }
+    handleFocusOut() {
+        if (this.disabled) {
+            return;
+        }
+        this._focused = false;
+    }
+    _getSlotInfo() {
+        const hasHelperSlot = !!this._el.querySelector(':scope > [slot="helper"]');
+        const hasLabelSlot = !!this._el.querySelector(':scope > [slot="label"]');
+        const hasPrefixSlot = !!this._el.querySelector(':scope > [slot="prefix"]');
+        const hasSuffixSlot = !!this._el.querySelector(':scope > [slot="suffix"]');
+        const hasHeaderSlot = !!this._el.querySelector(':scope > [slot="header"]');
+        const hasErrorSlot = !!this._el.querySelector(':scope > [slot="error"]');
+        const prefix = hasPrefixSlot ? h("slot", { name: 'prefix' }) : this.prefix;
+        const suffix = hasSuffixSlot ? h("slot", { name: 'suffix' }) : this.suffix;
+        const errorAndErrorIsNotBoolean = this.error && typeof this.error === 'string' && this.error !== 'true';
+        return {
+            hasHelperSlot,
+            hasLabelSlot,
+            hasPrefixSlot,
+            hasSuffixSlot,
+            hasHeaderSlot,
+            hasErrorSlot,
+            prefix,
+            suffix,
+            errorAndErrorIsNotBoolean,
+        };
+    }
+    _getInput() {
+        if (this.type === 'custom') {
+            return h("slot", { name: 'input' });
+        }
+        const props = {
+            class: input({
+                disabled: this.disabled,
+            }),
+            value: this.value,
+            placeholder: this.placeholder,
+            disabled: this.disabled,
+            onInput: (ev) => this._valueChange(ev),
+        };
+        let properties = this.properties ?? {};
+        if (typeof properties === 'string') {
+            properties = JSON.parse(this.properties);
+        }
+        if (this.type === 'textarea') {
+            h("textarea", { ref: ref => this._setInputRef(ref), ...props, ...properties });
+        }
+        return (h("input", { type: this.type, ref: ref => this._setInputRef(ref), ...props, ...properties }));
+    }
+    _setInputRef(ref) {
+        this._inputRef = ref;
+        this.inputRefChange.emit(ref);
+    }
+    _focusInput() {
+        if (this._inputRef) {
+            this._inputRef.focus();
+            return;
+        }
+        const input = this._el.querySelector(':scope > [slot="input"]');
+        input[this.focusMethod]();
+    }
+    _selectAll() {
+        if (!this._inputRef || !this.selectAllOnFocus) {
+            return;
+        }
+        this._inputRef.select();
+    }
+    _valueChange(ev) {
+        const value = ev.target.value;
+        this.value = value;
+        this.valueChange.emit(value);
+    }
+    static get is() { return "p-field"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./field.component.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["field.component.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'base'",
+                    "resolved": "\"base\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the input group"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'base'"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLInputTypeAttribute | 'textarea' | 'slot'",
+                    "resolved": "\"slot\" | \"textarea\" | HTMLInputTypeAttribute",
+                    "references": {
+                        "HTMLInputTypeAttribute": {
+                            "location": "import",
+                            "path": "react",
+                            "id": "../../node_modules/@types/react/index.d.ts::HTMLInputTypeAttribute"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of the input group"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'text'"
+            },
+            "properties": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any | string",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the input group"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "properties",
+                "reflect": false,
+                "defaultValue": "{}"
+            },
+            "prefix": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The prefix of the input group"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "prefix",
+                "reflect": false
+            },
+            "suffix": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The suffix of the input group"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "suffix",
+                "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconVariant",
+                    "resolved": "\"caret\" | \"double-caret\" | \"arrow\" | \"double-arrow\" | \"bell\" | \"chat\" | \"check-circle\" | \"cross-circle\" | \"error-circle\" | \"info-circle\" | \"phone\" | \"question-circle\" | \"headset\" | \"warning\" | \"attachment\" | \"description\" | \"document\" | \"folder\" | \"pdf\" | \"xls\" | \"bank\" | \"bread\" | \"cake\" | \"calculator\" | \"camera\" | \"car\" | \"certified\" | \"chair\" | \"checkmark\" | \"city\" | \"companies\" | \"company\" | \"credit-card\" | \"cutlery\" | \"department\" | \"diamond\" | \"docter\" | \"download\" | \"envelope\" | \"euro\" | \"exam\" | \"filter\" | \"flower\" | \"globe\" | \"globe-2\" | \"hash\" | \"hat\" | \"home\" | \"integration\" | \"language\" | \"laptop\" | \"location\" | \"mail\" | \"medal\" | \"menu\" | \"menu-arrow\" | \"minus\" | \"more\" | \"negative\" | \"other\" | \"pay\" | \"pencil\" | \"percent\" | \"pie-chart\" | \"placeholder\" | \"plus\" | \"power\" | \"receipt\" | \"reset\" | \"search\" | \"send\" | \"settings\" | \"shuffle\" | \"sick\" | \"signature\" | \"sparkle\" | \"star\" | \"stroller\" | \"tag\" | \"tasks\" | \"tools\" | \"tooth\" | \"train\" | \"trash\" | \"upload\" | \"wave\" | \"zipcode\" | \"eye\" | \"eye-closed\" | \"key\" | \"lock\" | \"unlocked\" | \"alarm\" | \"calendar\" | \"calendar-multi\" | \"calendar-free\" | \"calendar-not-free\" | \"clock\" | \"female\" | \"id\" | \"id-two\" | \"male\" | \"user\" | \"users\"",
+                    "references": {
+                        "IconVariant": {
+                            "location": "import",
+                            "path": "../../atoms/icon/icon.component",
+                            "id": "src/components/atoms/icon/icon.component.tsx::IconVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon of the input group"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon",
+                "reflect": false
+            },
+            "iconFlip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconFlipOptions",
+                    "resolved": "\"horizontal\" | \"none\" | \"vertical\"",
+                    "references": {
+                        "IconFlipOptions": {
+                            "location": "import",
+                            "path": "../../atoms/icon/icon.component",
+                            "id": "src/components/atoms/icon/icon.component.tsx::IconFlipOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon flip"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon-flip",
+                "reflect": false
+            },
+            "iconRotate": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "RotateOptions",
+                    "resolved": "-135 | -180 | -225 | -25 | -270 | -315 | -45 | -90 | 0 | 135 | 180 | 225 | 25 | 270 | 315 | 45 | 90",
+                    "references": {
+                        "RotateOptions": {
+                            "location": "import",
+                            "path": "../../../types/tailwind",
+                            "id": "src/types/tailwind.ts::RotateOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon rotate"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon-rotate",
+                "reflect": false
+            },
+            "iconPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'end'",
+                    "resolved": "\"end\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon position"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon-position",
+                "reflect": false,
+                "defaultValue": "'start'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the input"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label of the input group"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The placeholder of the input"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "placeholder",
+                "reflect": false
+            },
+            "helper": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The helper of the input group"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "helper",
+                "reflect": false
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether the field is required"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "required",
+                "reflect": true,
+                "defaultValue": "true"
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The error to display"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "error",
+                "reflect": true
+            },
+            "errorPlacement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Placement",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "Placement": {
+                            "location": "import",
+                            "path": "@floating-ui/dom",
+                            "id": "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The placement of the error popover"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "error-placement",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether the input group is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "focused": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether the input group is focused"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "focused",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "forceShowTooltip": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Force show the error tooltip"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "force-show-tooltip",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "selectAllOnFocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether to select all text on focus"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "select-all-on-focus",
+                "reflect": true,
+                "defaultValue": "true"
+            },
+            "focusMethod": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'focus' | 'click'",
+                    "resolved": "\"click\" | \"focus\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The method to use when focusing the input"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "focus-method",
+                "reflect": false,
+                "defaultValue": "'focus'"
+            },
+            "optionalTemplate": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "templateFunc",
+                    "resolved": "() => string",
+                    "references": {
+                        "templateFunc": {
+                            "location": "import",
+                            "path": "../field-container/field-container.component",
+                            "id": "src/components/molecules/field-container/field-container.component.tsx::templateFunc"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The template for the optional text"
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_focused": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event whenever the value changes"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "inputRefChange",
+                "name": "inputRefChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event whenever the input ref changes"
+                },
+                "complexType": {
+                    "original": "HTMLInputElement | HTMLTextAreaElement",
+                    "resolved": "HTMLInputElement | HTMLTextAreaElement",
+                    "references": {
+                        "HTMLInputElement": {
+                            "location": "global",
+                            "id": "global::HTMLInputElement"
+                        },
+                        "HTMLTextAreaElement": {
+                            "location": "global",
+                            "id": "global::HTMLTextAreaElement"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "_el"; }
+    static get listeners() {
+        return [{
+                "name": "focusin",
+                "method": "handleFocusIn",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focusout",
+                "method": "handleFocusOut",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=field.component.js.map