@sellmate/design-system 0.0.55 → 1.0.0

package/dist/collection/components/sd-field/sd-field.css

@@ -0,0 +1,100 @@
+.sd-field {
+  display: inline-flex;
+  flex-flow: column nowrap;
+  height: fit-content;
+  width: fit-content;
+}
+.sd-field *:focus,
+.sd-field *:focus-visible,
+.sd-field *:focus-within {
+  outline: none !important;
+}
+.sd-field:not(.sd-field--disabled):hover .sd-field__control {
+  border: 1px solid #0075ff !important;
+  box-shadow: 0px 0px 4px 0px rgba(0, 113, 255, 0.4);
+}
+.sd-field.sd-field--disabled {
+  cursor: not-allowed;
+}
+.sd-field.sd-field--disabled .sd-field__wrapper {
+  cursor: not-allowed !important;
+}
+.sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside {
+  border-color: #cccccc;
+  color: #888888;
+  cursor: not-allowed !important;
+}
+.sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control {
+  background-color: #eeeeee;
+  border-color: #cccccc;
+  color: #888888;
+  cursor: not-allowed !important;
+}
+.sd-field--has-label .sd-field__wrapper .sd-field__label {
+  display: flex;
+  align-items: center;
+  margin-right: 12px;
+}
+.sd-field--has-label .sd-field__wrapper .sd-field__label__required-icon {
+  margin-right: 4px;
+}
+.sd-field--has-label .sd-field__wrapper .sd-field__label__text {
+  font-size: 12px;
+  line-height: 20px;
+  color: #333333;
+  white-space: nowrap;
+}
+.sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip {
+  margin-left: 2px;
+}
+.sd-field--has-label-inside .sd-field__wrapper .sd-field__label {
+  margin-right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 3px 12px;
+  border: 1px solid #cccccc;
+  border-right: none;
+  border-radius: 4px 0 0 4px;
+  border-color: #aaaaaa;
+  background-color: #f6f6f6;
+}
+.sd-field__wrapper {
+  width: var(--field-width, 200px);
+  height: 28px;
+  display: flex;
+  align-items: center;
+  flex-flow: row nowrap;
+  position: relative;
+  color: #333333;
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.sd-field__wrapper .sd-field__control {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex: 1;
+  border: 1px solid #aaaaaa;
+  border-radius: 4px;
+  background: white;
+}
+.sd-field__wrapper .sd-field__control--label-inside {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+.sd-field--error:not(:hover) .sd-field__wrapper .sd-field__control {
+  border: 1px solid #fb4444 !important;
+}
+.sd-field.sd-field--focus .sd-field__wrapper .sd-field__control, .sd-field.sd-field--hover .sd-field__wrapper .sd-field__control {
+  border: 1px solid #0075ff !important;
+  box-shadow: 0px 0px 4px 0px rgba(0, 113, 255, 0.4);
+}
+.sd-field .sd-field__error-message {
+  color: #fb4444;
+  font-size: 12px;
+  line-height: 20px;
+  margin-top: 4px;
+}

package/dist/collection/components/sd-field/sd-field.js

@@ -0,0 +1,472 @@
+import { h, Host } from "@stencil/core";
+const FORM_PARENT_TAGS = [
+    'sd-select',
+    'sd-select-multiple',
+    'sd-select-multiple-group',
+    'sd-input',
+    'sd-textarea',
+];
+export class SdField {
+    el;
+    name = '';
+    rules = [];
+    error = false;
+    disabled = false;
+    hovered = false;
+    focused = false;
+    status;
+    // props - label
+    label = '';
+    insideLabel = false;
+    useLabelRequired = false;
+    labelTooltip = '';
+    labelTooltipProps = null;
+    errorMsg = '';
+    hostElement = null;
+    get value() {
+        return this.hostElement?.value ?? null;
+    }
+    get fieldStatus() {
+        let status = '';
+        if (!!this.disabled) {
+            status = 'disabled';
+            return `sd-field--${status}`;
+        }
+        if (!!this.focused) {
+            status = 'focus';
+            return `sd-field--${status}`;
+        }
+        if (!!this.hovered)
+            status = 'hover';
+        if (!!this.status)
+            status = this.status;
+        if (!!this.error)
+            status = 'error';
+        return status ? `sd-field--${status}` : '';
+    }
+    componentDidLoad() {
+        this.hostElement = this.findHostElement();
+        this.registerToForm();
+    }
+    disconnectedCallback() {
+        this.unregisterFromForm();
+    }
+    findHostElement() {
+        for (const tag of FORM_PARENT_TAGS) {
+            const parent = this.el.closest(tag);
+            if (parent && 'value' in parent) {
+                return parent;
+            }
+        }
+        return null;
+    }
+    registerToForm() {
+        if (!this.rules || this.rules.length === 0) {
+            console.warn('[sd-form-field] rules prop is required for sd-form integration');
+            return;
+        }
+        const formEl = this.el.closest('sd-form');
+        if (!formEl)
+            return;
+        formEl.componentOnReady().then(form => {
+            form.sdRegisterField(this);
+        });
+    }
+    unregisterFromForm() {
+        if (!this.name)
+            return;
+        const formEl = this.el.closest('sd-form');
+        formEl?.componentOnReady().then(form => {
+            form.sdUnregisterField(this.name);
+        });
+    }
+    async sdValidate() {
+        if (!this.rules || this.rules.length === 0)
+            return true;
+        for (const rule of this.rules) {
+            const result = rule(this.value ?? '');
+            if (result !== true) {
+                this.setError(true, result);
+                return false;
+            }
+        }
+        this.setError(false, '');
+        return true;
+    }
+    async sdReset() {
+        if (this.hostElement) {
+            this.hostElement.value = null;
+        }
+        this.setError(false, '');
+    }
+    async sdResetValidation() {
+        this.setError(false, '');
+    }
+    async sdFocus() {
+        this.hostElement?.focus?.();
+        this.hostElement?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+    setError(error, errorMsg) {
+        this.errorMsg = errorMsg;
+        if (this.hostElement) {
+            this.hostElement.error = error;
+        }
+    }
+    render() {
+        return (h(Host, { key: '16609b3313318dfc4db917a32bd44e6e2cb2f4e7', class: {
+                'sd-field': true,
+                'sd-field--has-label': !!this.label,
+                'sd-field--has-label-inside': !!this.label && this.insideLabel,
+                [this.fieldStatus]: !!this.fieldStatus,
+            } }, h("div", { key: '5c3056123cb54f8d6c26406ae76b13219d289f9c', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '786bcd6ec3651bb226013474fae112c592ec6890', class: {
+                'sd-field__control': true,
+                'sd-field__control--label-inside ': !!this.label && this.insideLabel,
+            } }, h("slot", { key: '60ae2f97cc7225930df9d17958fe78d3dd8e01e3' }))), this.errorMsg && h("div", { key: '4984f7e64c6c6611063c46b5c7ea21a0ae0b5343', class: "sd-field__error-message" }, this.errorMsg)));
+    }
+    renderLabel(label) {
+        if (!label)
+            return null;
+        return (h("label", { class: { 'sd-field__label': true, 'sd-field__label-inside': this.insideLabel } }, this.useLabelRequired && (h("sd-icon", { name: "star", size: "10", color: "brilliantblue_75", class: "sd-field__label__required-icon" })), h("div", { class: "sd-field__label__text" }, label), this.labelTooltip && (h("sd-tooltip", { class: "sd-field__label__tooltip", ...this.labelTooltipProps }, h("div", { slot: "content" }, this.labelTooltip)))));
+    }
+    static get is() { return "sd-field"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-field.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-field.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "rules": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Rule[]",
+                    "resolved": "Rule[] | undefined",
+                    "references": {
+                        "Rule": {
+                            "location": "import",
+                            "path": "../../types/form",
+                            "id": "src/types/form.d.ts::Rule"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "hovered": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hovered",
+                "defaultValue": "false"
+            },
+            "focused": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "focused",
+                "defaultValue": "false"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'pass' | 'error'",
+                    "resolved": "\"default\" | \"error\" | \"pass\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "insideLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "inside-label",
+                "defaultValue": "false"
+            },
+            "useLabelRequired": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "use-label-required",
+                "defaultValue": "false"
+            },
+            "labelTooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-tooltip",
+                "defaultValue": "''"
+            },
+            "labelTooltipProps": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SdTooltipProps | null",
+                    "resolved": "SdTooltipProps | null",
+                    "references": {
+                        "SdTooltipProps": {
+                            "location": "import",
+                            "path": "../sd-tooltip/sd-tooltip",
+                            "id": "src/components/sd-tooltip/sd-tooltip.tsx::SdTooltipProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "errorMsg": {}
+        };
+    }
+    static get methods() {
+        return {
+            "sdValidate": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "sdReset": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "sdResetValidation": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "sdFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=sd-field.js.map

package/dist/collection/components/sd-field/sd-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-field.js","sourceRoot":"","sources":["../../../src/components/sd-field/sd-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, Host, Element, Prop, State, Method } from '@stencil/core';\nimport { ValidatableField } from '../sd-form/sd-form';\nimport { Rule } from '../../types/form';\nimport { SdTooltipProps } from '../sd-tooltip/sd-tooltip';\n\nconst FORM_PARENT_TAGS = [\n 'sd-select',\n 'sd-select-multiple',\n 'sd-select-multiple-group',\n 'sd-input',\n 'sd-textarea',\n];\n\ninterface FormHostElement extends HTMLElement {\n value: any;\n error?: boolean;\n errorMsg?: string;\n}\n\n@Component({ tag: 'sd-field', styleUrl: 'sd-field.scss' })\nexport class SdField implements ValidatableField {\n @Element() el!: HTMLElement;\n\n @Prop() name: string = '';\n @Prop() rules?: Rule[] = [];\n\n @Prop({ mutable: true }) error?: boolean = false;\n @Prop({ mutable: true }) disabled?: boolean = false;\n @Prop({ mutable: true }) hovered?: boolean = false;\n @Prop({ mutable: true }) focused?: boolean = false;\n @Prop() status?: 'default' | 'pass' | 'error';\n\n // props - label\n @Prop() label: string = '';\n @Prop() insideLabel: boolean = false;\n @Prop() useLabelRequired: boolean = false;\n @Prop() labelTooltip: string = '';\n @Prop() labelTooltipProps: SdTooltipProps | null = null;\n\n @State() errorMsg: string = '';\n\n private hostElement: FormHostElement | null = null;\n\n get value() {\n  return this.hostElement?.value ?? null;\n }\n\n get fieldStatus() {\n  let status = '';\n\n  if (!!this.disabled) {\n   status = 'disabled';\n   return `sd-field--${status}`;\n  }\n\n  if (!!this.focused) {\n   status = 'focus';\n   return `sd-field--${status}`;\n  }\n\n  if (!!this.hovered) status = 'hover';\n  if (!!this.status) status = this.status;\n  if (!!this.error) status = 'error';\n  return status ? `sd-field--${status}` : '';\n }\n\n componentDidLoad() {\n  this.hostElement = this.findHostElement();\n  this.registerToForm();\n }\n\n disconnectedCallback() {\n  this.unregisterFromForm();\n }\n\n private findHostElement(): FormHostElement | null {\n  for (const tag of FORM_PARENT_TAGS) {\n   const parent = this.el.closest<FormHostElement>(tag);\n   if (parent && 'value' in parent) {\n    return parent;\n   }\n  }\n  return null;\n }\n\n private registerToForm() {\n  if (!this.rules || this.rules.length === 0) {\n   console.warn('[sd-form-field] rules prop is required for sd-form integration');\n   return;\n  }\n\n  const formEl = this.el.closest<HTMLSdFormElement>('sd-form');\n  if (!formEl) return;\n\n  formEl.componentOnReady().then(form => {\n   form.sdRegisterField(this);\n  });\n }\n\n private unregisterFromForm() {\n  if (!this.name) return;\n\n  const formEl = this.el.closest<HTMLSdFormElement>('sd-form');\n  formEl?.componentOnReady().then(form => {\n   form.sdUnregisterField(this.name);\n  });\n }\n\n @Method()\n async sdValidate(): Promise<boolean> {\n  if (!this.rules || this.rules.length === 0) return true;\n\n  for (const rule of this.rules) {\n   const result = rule(this.value ?? '');\n   if (result !== true) {\n    this.setError(true, result);\n    return false;\n   }\n  }\n  this.setError(false, '');\n  return true;\n }\n\n @Method()\n async sdReset() {\n  if (this.hostElement) {\n   this.hostElement.value = null;\n  }\n  this.setError(false, '');\n }\n\n @Method()\n async sdResetValidation() {\n  this.setError(false, '');\n }\n\n @Method()\n async sdFocus() {\n  this.hostElement?.focus?.();\n  this.hostElement?.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n\n private setError(error: boolean, errorMsg: string) {\n  this.errorMsg = errorMsg;\n\n  if (this.hostElement) {\n   this.hostElement.error = error;\n  }\n }\n\n render() {\n  return (\n   <Host\n    class={{\n     'sd-field': true,\n     'sd-field--has-label': !!this.label,\n     'sd-field--has-label-inside': !!this.label && this.insideLabel,\n     [this.fieldStatus]: !!this.fieldStatus,\n    }}\n   >\n    <div class=\"sd-field__wrapper\">\n     {this.renderLabel(this.label)}\n     <div\n      class={{\n       'sd-field__control': true,\n       'sd-field__control--label-inside ': !!this.label && this.insideLabel,\n      }}\n     >\n      <slot></slot>\n     </div>\n    </div>\n    {this.errorMsg && <div class=\"sd-field__error-message\">{this.errorMsg}</div>}\n   </Host>\n  );\n }\n\n private renderLabel(label?: string) {\n  if (!label) return null;\n\n  return (\n   <label class={{ 'sd-field__label': true, 'sd-field__label-inside': this.insideLabel }}>\n    {this.useLabelRequired && (\n     <sd-icon\n      name=\"star\"\n      size=\"10\"\n      color=\"brilliantblue_75\"\n      class=\"sd-field__label__required-icon\"\n     ></sd-icon>\n    )}\n    <div class=\"sd-field__label__text\">{label}</div>\n    {this.labelTooltip && (\n     <sd-tooltip class=\"sd-field__label__tooltip\" {...this.labelTooltipProps}>\n      <div slot=\"content\">{this.labelTooltip}</div>\n     </sd-tooltip>\n    )}\n   </label>\n  );\n }\n}\n"]}

package/dist/collection/components/sd-file-picker/sd-file-picker.css

@@ -1,3 +1,7 @@
+sd-file-picker {
+  display: inline-flex;
+}
+
 .sd-file-picker {
   display: inline-flex;
   align-items: center;
@@ -9,6 +13,7 @@
   border-radius: 4px;
   background-color: #ffffff;
   cursor: pointer;
+  -webkit-user-select: none;
   user-select: none;
   position: relative;
   vertical-align: middle;
@@ -71,6 +76,7 @@
 .sd-file-picker--disabled:not(.sd-file-picker--inline) {
   background-color: #eeeeee;
   border-color: #cccccc;
+  cursor: not-allowed !important;
 }
 .sd-file-picker--disabled:not(.sd-file-picker--inline) .sd-file-picker__text {
   color: #888888;

package/dist/collection/components/sd-file-picker/sd-file-picker.js

@@ -13,7 +13,7 @@ export class SdFilePicker {
     showTooltip = false;
     fileInputRef;
     fileNamesRef;
-    sdChange;
+    update;
     valueChanged(newValue) {
         this.internalValue = newValue;
     }
@@ -37,14 +37,14 @@ export class SdFilePicker {
             this.internalValue = fileArray[0];
         }
         this.value = this.internalValue;
-        this.sdChange?.emit(this.value);
+        this.update?.emit(this.value);
     };
     handleClear = (event) => {
         event.stopPropagation();
         const clearedValue = this.multiple ? [] : null;
         this.value = clearedValue;
         this.internalValue = clearedValue;
-        this.sdChange?.emit(clearedValue);
+        this.update?.emit(clearedValue);
         if (this.fileInputRef) {
             this.fileInputRef.value = '';
         }
@@ -92,15 +92,15 @@ export class SdFilePicker {
     render() {
         const hasFiles = this.hasFiles();
         const displayText = this.getDisplayText();
-        return (h("div", { key: '2de0dd9880f816721fb36c3b01bbfdd15d0a4edd', class: {
+        return (h("div", { key: 'dac7726e25ba3bf4afa0da022cb3e472a8891cec', class: {
                 'sd-file-picker': true,
                 [this.getStatusClass()]: true,
                 'sd-file-picker--inline': this.inline,
-            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("input", { key: '8955ad7d1b2f854f21c274972c01092fb4ae8a25', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), h("sd-icon", { key: 'bb376d3ee3264ae590f94d877f5f4d92eb7c2383', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: 'afbfc0ee30274b020e492e36fa7d75285fa908b2', ref: el => (this.fileNamesRef = el), class: {
+            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("input", { key: '1ab733ebf6d98ad792b7b6d06f562b014504a2fe', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), h("sd-icon", { key: 'c82214c83107f01314de1eb380a421fc80af043f', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: '11f5bfca6d50fd4e78c902ddc52995b3ed399b21', ref: el => (this.fileNamesRef = el), class: {
                 'sd-file-picker__text': true,
                 'sd-file-picker__text--placeholder': !hasFiles,
                 'sd-file-picker__text--active': hasFiles,
-            } }, displayText), !this.disabled && hasFiles && (h("sd-icon", { key: '181635bb288d34a3da7d1e368b8feafaddf4c9e7', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: '18adac8d177d2c5e88a35f50a23cd5ce9dbcbe3d', class: "sd-file-picker__tooltip" }, displayText))));
+            } }, displayText), !this.disabled && hasFiles && (h("sd-icon", { key: 'e429e10a285f12e16d1fa362e51903f12119bf3b', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: '1a7c924eed094fdb070ed5711a9b09aeea8f3c56', class: "sd-file-picker__tooltip" }, displayText))));
     }
     static get is() { return "sd-file-picker"; }
     static get originalStyleUrls() {
@@ -267,8 +267,8 @@ export class SdFilePicker {
     }
     static get events() {
         return [{
-                "method": "sdChange",
-                "name": "sdChange",
+                "method": "update",
+                "name": "sdUpdate",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,