@xplortech/apollo-core 1.0.0-beta.8 → 2.4.2

package/dist/collection/components/xpl-icon/xpl-icon.js

@@ -0,0 +1,101 @@
+import { Host, h } from "@stencil/core";
+import octicons from "@xplortech/apollo-icons";
+export class XplIcon {
+    render() {
+        let options = {};
+        if (this.size !== undefined) {
+            if (typeof this.size === 'number') {
+                const size = this.size <= 32 ? this.size : 32;
+                options = { width: size, height: size };
+            }
+            else {
+                console.warn('[Apollo] xpl-icon: size is not a number, the value passed was ignored. Please change value to a number.');
+            }
+        }
+        let wrapperClasses = 'xpl-icon__wrapper ';
+        if (this.backgroundColor)
+            wrapperClasses += `xpl-icon__wrapper--with-background xpl-icon__wrapper--with-background--${this.backgroundColor}`;
+        return (h(Host, { key: '24576487ab74d82288bd43262d3021f19d12489d' }, h("figure", { key: '1b90df03ca412fd56fd868f934a24712d3a19079', class: wrapperClasses }, h("span", { key: 'e0ebd1ccfb6796190240841035a0a2db8c1bb3f1', "aria-label": this.icon, role: "img", class: "xpl-icon", style: {
+                width: `${options.width}px`,
+                height: `${options.height}px`,
+            }, innerHTML: octicons[this.icon].toSVG(options) }), h("figcaption", { key: 'd3976b8859355ef990e9bffa210b5c005505c308' }, this.icon, " icon"))));
+    }
+    static get is() { return "xpl-icon"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xpl-icon.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xpl-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconName",
+                    "resolved": "\"ai\" | \"alarm-clock\" | \"alert-circle\" | \"alert-hex\" | \"alert-triangle\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"arrow-up-right\" | \"award\" | \"bell\" | \"bell-slash\" | \"bookmark\" | \"bookmark-slash\" | \"briefcase\" | \"calendar\" | \"calendar-month\" | \"calendar-week\" | \"camera\" | \"cash-register\" | \"check\" | \"check-circle\" | \"check-circle-fill\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"chevrons-down\" | \"chevrons-left\" | \"chevrons-right\" | \"chevrons-up\" | \"circle-slash\" | \"clipboard\" | \"clock\" | \"code-square\" | \"comment\" | \"comment-alt\" | \"comment-check\" | \"comment-closed\" | \"comment-discussion\" | \"comment-minus\" | \"comment-plus\" | \"comment-x\" | \"compass\" | \"credit-card\" | \"dash\" | \"dollar-bill\" | \"dollar-sign\" | \"download\" | \"drag\" | \"dumbbells\" | \"duplicate\" | \"edit\" | \"expand\" | \"eye\" | \"eye-closed\" | \"eye-droper\" | \"file\" | \"flag\" | \"folder\" | \"gear\" | \"gift\" | \"globe\" | \"graph\" | \"graph-bar\" | \"grid\" | \"heart\" | \"home\" | \"image\" | \"info\" | \"kebab-horizontal\" | \"kebab-vertical\" | \"key\" | \"law\" | \"layers\" | \"left-align\" | \"light-bulb\" | \"line\" | \"link\" | \"link-external\" | \"list-ordered\" | \"list-unordered\" | \"loader\" | \"location\" | \"lock\" | \"mail\" | \"mail-check\" | \"mail-closed\" | \"mail-minus\" | \"mail-plus\" | \"mail-x\" | \"map\" | \"megaphone\" | \"minus-circle\" | \"moon\" | \"navigation\" | \"organization\" | \"package\" | \"paperclip\" | \"pencil\" | \"people\" | \"percent\" | \"person\" | \"person-add\" | \"person-circle\" | \"phone\" | \"phone-minus\" | \"phone-pause\" | \"phone-plus\" | \"phone-slash\" | \"phone-x\" | \"pie-chart\" | \"pin\" | \"pin-circle\" | \"pin-circle-filled\" | \"pin-filled\" | \"play\" | \"plus\" | \"plus-circle\" | \"printer\" | \"question\" | \"refresh-cw\" | \"repeat\" | \"right-align\" | \"rocket\" | \"rotate-ccw\" | \"rotate-cw\" | \"save\" | \"search\" | \"share\" | \"shopping-bag\" | \"shopping-cart\" | \"sign-in\" | \"sign-out\" | \"signature\" | \"sliders-h\" | \"sliders-v\" | \"sort\" | \"star\" | \"star-fill\" | \"star-half-fill\" | \"sun\" | \"tag\" | \"three-bars\" | \"time-reverse\" | \"tools\" | \"trashcan\" | \"triangle-down\" | \"triangle-left\" | \"triangle-right\" | \"triangle-up\" | \"trophy\" | \"unlock\" | \"upload\" | \"video-camera\" | \"x\" | \"x-circle\" | \"x-circle-fill\" | \"zoom-in\" | \"zoom-out\"",
+                    "references": {
+                        "IconName": {
+                            "location": "local",
+                            "path": "/home/runner/work/apollo/apollo/packages/apollo-core/src/components/components/xpl-icon/xpl-icon.tsx",
+                            "id": "src/components/components/xpl-icon/xpl-icon.tsx::IconName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size"
+            },
+            "backgroundColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon's background color."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "background-color"
+            }
+        };
+    }
+}

package/dist/collection/components/xpl-input/input.stories.js

@@ -0,0 +1,531 @@
+export default {
+    title: 'Components/Input',
+    parameters: {
+        actions: {
+            handles: [
+                'inputChange',
+                'inputEvent',
+                'valueChange',
+                'hasErrorStateChanged',
+                'rangeSelected',
+            ],
+        },
+    },
+    argTypes: {
+        label: {
+            type: { name: 'string', required: true },
+        },
+        description: {
+            type: { name: 'string', required: false },
+        },
+        disabled: {
+            type: {
+                name: 'boolean',
+            },
+        },
+        error: {
+            type: {
+                name: 'boolean',
+            },
+        },
+        errorMessage: {
+            type: { name: 'string', required: false },
+        },
+        type: {
+            options: ['text', 'number', 'file', 'password', 'date', 'time', 'color'],
+            control: {
+                type: 'select',
+            },
+        },
+        timeFormat: {
+            control: {
+                type: 'select',
+            },
+            options: ['12h', '24h'],
+        },
+    },
+};
+export const Input = ({ label, description, disabled, error, errorMessage, pre, post, type }) => {
+    let attrs = '';
+    if (label)
+        attrs += ` label="${label}"`;
+    if (description)
+        attrs += ` description="${description}"`;
+    if (disabled)
+        attrs += ` disabled`;
+    if (error)
+        attrs += ` error${errorMessage ? `="${errorMessage}"` : ''}`;
+    if (pre)
+        attrs += ` pre="${pre}"`;
+    if (post)
+        attrs += ` post="${post}"`;
+    if (type !== 'text')
+        attrs += ` type=${type}`;
+    return `<xpl-input${attrs} name="input-name" placeholder="Placeholder"></xpl-input>`;
+};
+Input.args = {
+    label: 'Input',
+    description: 'A brief description',
+    disabled: false,
+    error: false,
+    errorMessage: '',
+    pre: '',
+    post: '',
+    type: 'text',
+};
+Input.parameters = {
+    layout: 'centered',
+    'web-component': {
+        render: Input(Input.args),
+    },
+    html: {
+        render: (({ label, description, disabled, error, errorMessage, pre, post, type }) => {
+            const output = [];
+            let className = 'xpl-input';
+            if (disabled)
+                className += ' xpl-input--disabled';
+            if (error)
+                className += ' xpl-input--error';
+            output.push(`
+                <div class="${className}">
+                    <label for="id">
+                        ${label}
+                        ${description ? `<small>${description}</small>` : ''}
+                    </label>
+                    <div class="xpl-input-wrapper">
+                        ${pre ? `<label class="xpl-input-pre" for="id">${pre}</label>` : ''}
+        <input ${disabled ? 'disabled ' : ''}id="id" name="input-name" placeholder="Placeholder" type="${type}" />${post
+                ? `
+        <label class="xpl-input-post" for="id">${post}</label>`
+                : ''}
+    </div>${errorMessage
+                ? `
+    <label class="xpl-input-error" for="id">
+        <svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.84375 5.25C9.84375 2.59375 7.65625 0.40625 5 0.40625C2.32422 0.40625 0.15625 2.59375 0.15625 5.25C0.15625 7.92578 2.32422 10.0938 5 10.0938C7.65625 10.0938 9.84375 7.92578 9.84375 5.25ZM5 6.22656C5.48828 6.22656 5.89844 6.63672 5.89844 7.125C5.89844 7.63281 5.48828 8.02344 5 8.02344C4.49219 8.02344 4.10156 7.63281 4.10156 7.125C4.10156 6.63672 4.49219 6.22656 5 6.22656ZM4.14062 3.00391C4.12109 2.86719 4.23828 2.75 4.375 2.75H5.60547C5.74219 2.75 5.85938 2.86719 5.83984 3.00391L5.70312 5.66016C5.68359 5.79688 5.58594 5.875 5.46875 5.875H4.51172C4.39453 5.875 4.29688 5.79688 4.27734 5.66016L4.14062 3.00391Z" /></svg>
+        ${errorMessage}
+    </label>`
+                : ''}
+</div>`);
+            return output;
+        })(Input.args),
+    },
+};
+export const Multiline = ({ label, description, disabled, error, errorMessage, maxCharacterCount, }) => {
+    let attrs = ' multiline';
+    if (label)
+        attrs += ` label="${label}"`;
+    if (description)
+        attrs += ` description="${description}"`;
+    if (disabled)
+        attrs += ` disabled`;
+    if (error)
+        attrs += ` error${errorMessage ? `="${errorMessage}"` : ''}`;
+    if (maxCharacterCount >= 0)
+        attrs += ` max-character-count="${maxCharacterCount}"`;
+    return `<xpl-input${attrs} name="input-name" placeholder="Placeholder"></xpl-input>`;
+};
+Multiline.args = {
+    label: 'Multiline Input',
+    description: 'A brief description',
+    disabled: false,
+    error: false,
+    errorMessage: '',
+    maxCharacterCount: 50,
+};
+Multiline.parameters = {
+    layout: 'centered',
+    'web-component': {
+        render: Multiline(Multiline.args),
+    },
+    html: {
+        render: (({ disabled, error, errorMessage, label, description, maxCharacterCount }) => {
+            const output = [];
+            if (maxCharacterCount > 0)
+                output.push(`WARNING: For multiline inputs with a max. character count,
+there is JS interactivity that is provided only by
+the web component. The code shown below does not
+reflect the additional markup and interactivity.`);
+            let className = 'xpl-input';
+            if (disabled)
+                className += ' xpl-input--disabled';
+            if (error)
+                className += ' xpl-input--error';
+            output.push(`<div class="${className}">
+    <label for="id">
+        ${label}${description
+                ? `
+        <small>${description}</small>`
+                : ''}
+    </label>
+    <div class="xpl-input-wrapper">
+        <textarea ${disabled ? 'disabled ' : ''}id="id" name="input-name" placeholder="Placeholder"></textarea>
+    </div>${errorMessage
+                ? `
+    <label class="xpl-input-error" for="id">
+        <svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.84375 5.25C9.84375 2.59375 7.65625 0.40625 5 0.40625C2.32422 0.40625 0.15625 2.59375 0.15625 5.25C0.15625 7.92578 2.32422 10.0938 5 10.0938C7.65625 10.0938 9.84375 7.92578 9.84375 5.25ZM5 6.22656C5.48828 6.22656 5.89844 6.63672 5.89844 7.125C5.89844 7.63281 5.48828 8.02344 5 8.02344C4.49219 8.02344 4.10156 7.63281 4.10156 7.125C4.10156 6.63672 4.49219 6.22656 5 6.22656ZM4.14062 3.00391C4.12109 2.86719 4.23828 2.75 4.375 2.75H5.60547C5.74219 2.75 5.85938 2.86719 5.83984 3.00391L5.70312 5.66016C5.68359 5.79688 5.58594 5.875 5.46875 5.875H4.51172C4.39453 5.875 4.29688 5.79688 4.27734 5.66016L4.14062 3.00391Z" /></svg>
+        ${errorMessage}
+    </label>`
+                : ''}
+</div>`);
+            return output;
+        })(Multiline.args),
+    },
+};
+export const Datepicker = ({ label, dateFormat, description, disabled, error, errorMessage, min, mode, max, required, type, }) => {
+    let attrs = ` type="${type}"`;
+    if (label)
+        attrs += ` label="${label}"`;
+    if (dateFormat)
+        attrs += ` date-format="${dateFormat}"`;
+    if (description)
+        attrs += ` description="${description}"`;
+    if (disabled)
+        attrs += ` disabled`;
+    if (error)
+        attrs += ` error${errorMessage ? `="${errorMessage}"` : ''}`;
+    if (min)
+        attrs += ` min="${min}"`;
+    if (max)
+        attrs += ` max="${max}"`;
+    if (mode)
+        attrs += ` mode="${mode}"`;
+    if (required)
+        attrs += ` required`;
+    return `<xpl-input${attrs} name="input-name" placeholder="Placeholder"></xpl-input>`;
+};
+Datepicker.argTypes = {
+    mode: {
+        options: ['single', 'range'],
+        control: {
+            type: 'select',
+        },
+    },
+    type: {
+        options: ['date', 'time'],
+        control: {
+            type: 'select',
+        },
+    },
+};
+Datepicker.args = {
+    mode: 'single',
+    label: 'Datepicker',
+    dateFormat: 'm/d/Y',
+    description: 'A brief description',
+    disabled: false,
+    error: false,
+    errorMessage: '',
+    min: '01/01/2000',
+    max: '12/31/2099',
+    required: true,
+    type: 'date',
+};
+Datepicker.parameters = {
+    layout: 'centered',
+    'web-component': {
+        render: Datepicker(Datepicker.args),
+    },
+    html: {
+        render: (({ label, description, disabled, error, errorMessage, min, max, required }) => {
+            const output = [
+                `The full-featured Datepicker Input only supports web component usage. However, a 'lite' version that uses native browser features is included here:`,
+            ];
+            let className = 'xpl-input';
+            if (disabled)
+                className += ' xpl-input--disabled';
+            if (error)
+                className += ' xpl-input--error';
+            output.push(`<div class="${className}">
+    <label for="id">
+        ${label}${description
+                ? `
+        <small>${description}</small>`
+                : ''}
+    </label>
+    <div class="xpl-input-wrapper">
+        <input ${required ? 'required ' : ''}${disabled ? 'disabled ' : ''}id="id"${min ? ` min="${min}"` : ''}${max ? ` max="${max}"` : ''} name="input-name" placeholder="Placeholder" type="date" />
+    </div>${errorMessage
+                ? `
+    <label class="xpl-input-error" for="id">
+        <svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.84375 5.25C9.84375 2.59375 7.65625 0.40625 5 0.40625C2.32422 0.40625 0.15625 2.59375 0.15625 5.25C0.15625 7.92578 2.32422 10.0938 5 10.0938C7.65625 10.0938 9.84375 7.92578 9.84375 5.25ZM5 6.22656C5.48828 6.22656 5.89844 6.63672 5.89844 7.125C5.89844 7.63281 5.48828 8.02344 5 8.02344C4.49219 8.02344 4.10156 7.63281 4.10156 7.125C4.10156 6.63672 4.49219 6.22656 5 6.22656ZM4.14062 3.00391C4.12109 2.86719 4.23828 2.75 4.375 2.75H5.60547C5.74219 2.75 5.85938 2.86719 5.83984 3.00391L5.70312 5.66016C5.68359 5.79688 5.58594 5.875 5.46875 5.875H4.51172C4.39453 5.875 4.29688 5.79688 4.27734 5.66016L4.14062 3.00391Z" /></svg>
+        ${errorMessage}
+    </label>`
+                : ''}
+</div>`);
+            return output;
+        })(Datepicker.args),
+    },
+};
+export const Timepicker = ({ label, description, disabled, error, errorMessage, required, readonly, value, step, timeFormat, allowCustomOption, min, max, type, }) => {
+    let attrs = '';
+    if (label)
+        attrs += `label="${label}"`;
+    if (description)
+        attrs += ` description="${description}"`;
+    if (disabled)
+        attrs += ` disabled`;
+    if (error)
+        attrs += ` error${errorMessage ? `="${errorMessage}"` : ''}`;
+    if (min)
+        attrs += ` min="${min}"`;
+    if (max)
+        attrs += ` max="${max}"`;
+    if (required)
+        attrs += ` required`;
+    if (readonly)
+        attrs += ` readonly`;
+    if (value)
+        attrs += ` value="${value}"`;
+    if (step)
+        attrs += ` step="${step}"`;
+    if (timeFormat)
+        attrs += ` time-format="${timeFormat}"`;
+    if (allowCustomOption)
+        attrs += ` allow-custom-option`;
+    if (type)
+        attrs += ` type="${type}"`;
+    return `<xpl-input ${attrs} name="input-name"></xpl-input>`;
+};
+Timepicker.args = {
+    label: 'Timepicker',
+    description: 'A brief description',
+    disabled: false,
+    error: false,
+    errorMessage: 'This field is required.',
+    required: true,
+    readonly: false,
+    value: '15:30',
+    step: 30,
+    timeFormat: '12h',
+    allowCustomOption: false,
+    min: '10:00',
+    max: '18:00',
+    type: 'time',
+};
+Timepicker.parameters = {
+    layout: 'centered',
+    'web-component': {
+        render: Timepicker(Timepicker.args),
+    },
+    html: {
+        render: (({ label, description, disabled, error, errorMessage, min, max, required, type, timeFormat, }) => {
+            const output = [
+                `The full-featured Timepicker Input only supports web component usage. However, a 'lite' version that uses native browser features is included here:`,
+            ];
+            let className = 'xpl-input';
+            if (disabled)
+                className += ' xpl-input--disabled';
+            if (error)
+                className += ' xpl-input--error';
+            output.push(`<div class="${className}">
+    <label for="id">
+        ${label}${description
+                ? `
+        <small>${description}</small>`
+                : ''}
+    </label>
+    <div class="xpl-input-wrapper">
+        <label class="xpl-input-pre"><xpl-icon icon="clock" size="24"></xpl-icon></label>
+        <input type="${type}" ${required ? 'required ' : ''}${disabled ? 'disabled ' : ''}id="id"${min ? ` min="${min}"` : ''}${max ? ` max="${max}"` : ''} name="input-name" placeholder="Placeholder" />
+        <label class="xpl-input-post">${timeFormat === '12h' ? 'AM' : ''}</label>
+        <xpl-dropdown options={[
+    {
+        "label": "10:00 AM",
+        "value": "10:00"
+    },
+    {
+        "label": "10:30 AM",
+        "value": "10:30"
+    },
+    {
+        "label": "11:00 AM",
+        "value": "11:00"
+    },
+    {
+        "label": "5:30 PM",
+        "value": "17:30"
+    },
+    {
+        "label": "6:00 PM",
+        "value": "18:00"
+    }
+]}></xpl-dropdown>
+    </div>${errorMessage
+                ? `
+    <label class="xpl-input-error" for="id">
+        <svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.84375 5.25C9.84375 2.59375 7.65625 0.40625 5 0.40625C2.32422 0.40625 0.15625 2.59375 0.15625 5.25C0.15625 7.92578 2.32422 10.0938 5 10.0938C7.65625 10.0938 9.84375 7.92578 9.84375 5.25ZM5 6.22656C5.48828 6.22656 5.89844 6.63672 5.89844 7.125C5.89844 7.63281 5.48828 8.02344 5 8.02344C4.49219 8.02344 4.10156 7.63281 4.10156 7.125C4.10156 6.63672 4.49219 6.22656 5 6.22656ZM4.14062 3.00391C4.12109 2.86719 4.23828 2.75 4.375 2.75H5.60547C5.74219 2.75 5.85938 2.86719 5.83984 3.00391L5.70312 5.66016C5.68359 5.79688 5.58594 5.875 5.46875 5.875H4.51172C4.39453 5.875 4.29688 5.79688 4.27734 5.66016L4.14062 3.00391Z" /></svg>
+        ${errorMessage}
+    </label>`
+                : ''}
+</div>`);
+            return output;
+        })(Timepicker.args),
+    },
+};
+export const Password = ({ label, description, disabled, error, errorMessage, pre, post, }) => {
+    let attrs = '';
+    if (label)
+        attrs += ` label="${label}"`;
+    if (description)
+        attrs += ` description="${description}"`;
+    if (disabled)
+        attrs += ` disabled`;
+    if (error)
+        attrs += ` error${errorMessage ? `="${errorMessage}"` : ''}`;
+    if (pre)
+        attrs += ` pre="${pre}"`;
+    if (post)
+        attrs += ` post="${post}"`;
+    return `<xpl-input type="password"${attrs} name="input-name"></xpl-input>`;
+};
+Password.args = {
+    label: 'Password',
+    description: 'Enter a password:',
+    disabled: false,
+    error: false,
+    errorMessage: '',
+};
+Password.parameters = {
+    layout: 'centered',
+    'web-component': {
+        render: Password(Password.args),
+    },
+    html: {
+        render: ((_) => `Sorry, the Password Input only supports web component usage.`)(Password.args),
+    },
+};
+export const File = ({ accept, multiple, hideTriggerOnSelect, hideFileNames, hideAcceptText, label, triggerContent, description, disabled, error, errorMessage, }) => {
+    const renderFileUpload = () => `
+        <xpl-input
+            label="${label}"
+            accept="${accept}"
+            multiple="${multiple}"
+            type="file"
+            name="file-input"
+            hide-trigger-on-select="${hideTriggerOnSelect}"
+            hide-file-names="${hideFileNames}"
+            hide-accept-text="${hideAcceptText}"
+            description="${description}"
+            disabled="${disabled}"
+            ${error ? `error="${errorMessage}"` : ''}
+        >
+            ${triggerContent}
+        </xpl-input>
+    `;
+    return renderFileUpload();
+};
+File.args = {
+    accept: 'image/png, image/jpeg',
+    multiple: false,
+    hideTriggerOnSelect: false,
+    hideFileNames: false,
+    hideAcceptText: false,
+    label: 'Upload File',
+    triggerContent: `<xpl-button slot="trigger"><xpl-icon icon="upload" size="24"></xpl-icon>Upload File</xpl-button>`,
+    description: '',
+    disabled: false,
+    error: false,
+    errorMessage: 'This field is required.',
+    type: 'file',
+};
+File.parameters = {
+    layout: 'centered',
+    'web-component': {
+        render: File(File.args),
+    },
+    html: {
+        render: ((args) => {
+            const output = [];
+            output.push(`<label class="xpl-input-label">${args.label}<small>${args.description}</small></label>`);
+            output.push(`<div class="xpl-input-file" ${args.hideTriggerOnSelect ? 'xpl-input-file--hide-trigger-on-select' : ''} ${args.disabled ? 'xpl-input-file--disabled' : ''} >`);
+            output.push(`<span class="xpl-input-file__trigger-wrapper" role="button" tabindex="0">${args.triggerContent}</span>`);
+            if (args.hideAcceptText !== true && args.accept) {
+                output.push(`<span class="xpl-input-file__accept xpl-text-caption">Accepted file types: ${args.accept}</span>`);
+            }
+            if (!args.hideFileNames) {
+                output.push(`<ul class="xpl-input-file__file-list">
+                        <li class="xpl-input-file__file-item">
+                            <span class="xpl-text-callout">Filename1.png</span>
+                            <xpl-icon icon="x-circle" size="24" class="xpl-input-file__remove-icon"></xpl-icon>
+                        </li>
+                        <li class="xpl-input-file__file-item">
+                            <span class="xpl-text-callout">Filename2.png</span>
+                            <xpl-icon icon="x-circle" size="24" class="xpl-input-file__remove-icon"></xpl-icon>
+                        </li>
+                    </ul>`);
+            }
+            output.push('</div>');
+            return output.join('');
+        })(File.args),
+    },
+};
+export const Color = ({ value, label, placeholder, disabled, required, requiredErrorMessage, hideEyeDropper, }) => {
+    const renderFileUpload = () => `
+        <xpl-input
+            type="color"
+            label="${label}"
+            value="${value}"
+            placeholder="${placeholder}"
+            disabled="${disabled}"
+            required="${required}"
+            required-error-message="${requiredErrorMessage}"
+            hide-eye-dropper="${hideEyeDropper}"
+        >
+        </xpl-input>
+    `;
+    return renderFileUpload();
+};
+Color.args = {
+    label: 'Select Color',
+    placeholder: 'Choose color',
+    value: '#ffff00',
+    disabled: false,
+    required: false,
+    requiredErrorMessage: 'This field is required.',
+    hideEyeDropper: false,
+};
+Color.parameters = {
+    layout: 'centered',
+    'web-component': {
+        render: Color(Color.args),
+    },
+    html: {
+        render: ((args) => {
+            const output = [];
+            output.push(`
+                <div class="xpl-input-color">
+                    <label class="xpl-input-color__label">${args.label}</label>
+                    <xpl-popover disabled="${args.disabled}">
+                        <div class="xpl-input-color__display" ${args.disabled ? 'xpl-input-color__display--disabled' : ''}>
+                            <span class="xpl-input-color__color" style="background: ${args.value}"></span>
+                            <span class="xpl-input-color__value">${args.value}</span>
+                            <xpl-icon class="xpl-input-color__icon" icon="eye-droper"></xpl-icon>
+                        </div>
+                        <div class="xpl-popover__arrow"></div>
+                        <div class="xpl-popover__content">
+                            <div class="xpl-input-color__menu">
+                                <div class="xpl-input-color__sl-grid" style="background: linear-gradient(to right, rgb(128, 128, 128), rgb(81, 0, 255)), linear-gradient(to top, black, transparent);">
+                                    <div class="xpl-input-color__sl-thumb" style="left: 92%; top: 39%;"></div>
+                                    <input type="range" min="0" max="360" value="0" class="xpl-input-color__slider xpl-input-color__hue" name="color-hue-slider" />
+                                </div>
+                                <div class="xpl-input-color__grid">
+                                    <input type="range" min="0" max="360" value="0" class="xpl-input-color__slider xpl-input-color__hue" name="color-hue-slider" />
+                                    <input type="range" min="0" max="1" step="0.01" value="0" class="xpl-input-color__slider xpl-input-color__alpha" name="color-alpha-slider" />
+                                    <div class="xpl-input-color__preview" style="background: rgba(255, 255, 0, 1);"></div>
+                                </div>
+                                <div class="xpl-input-color__inputs">
+                                    <xpl-input label="Hex" name="color-hex-input" placeholder="793EF7" value="${args.value}" />
+                                    <xpl-input label="R" name="color-r-input" placeholder="0" value="${args.value}" />
+                                    <xpl-input label="G" name="color-g-input" placeholder="0" value="${args.value}" />
+                                    <xpl-input label="B" name="color-b-input" placeholder="0" value="${args.value}" />
+                                    <xpl-input label="A" name="color-a-input" placeholder="1" value="${args.value}" />
+                                </div>
+                            </div>
+                        </div>
+                    </xpl-popover>
+                </div>
+            `);
+            return output.join('');
+        })(Color.args),
+    },
+};