@sellmate/design-system 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/sd-field_3.cjs.entry.js +8 -8
- package/dist/collection/components/sd-field/sd-field.css +1 -1
- package/dist/collection/components/sd-field/sd-field.js +7 -7
- package/dist/collection/components/sd-field/sd-field.js.map +1 -1
- package/dist/components/{p-BfHejNRG.js → p-9E-u4GN-.js} +4 -4
- package/dist/components/{p-BfHejNRG.js.map → p-9E-u4GN-.js.map} +1 -1
- package/dist/components/{p-Cp2TqeFd.js → p-B9qGa5dx.js} +3 -3
- package/dist/components/{p-Cp2TqeFd.js.map → p-B9qGa5dx.js.map} +1 -1
- package/dist/components/{p-FVxa2OYe.js → p-COJpIimp.js} +10 -10
- package/dist/components/p-COJpIimp.js.map +1 -0
- package/dist/components/{p-DD16YjVA.js → p-CZ0RizvY.js} +5 -5
- package/dist/components/{p-DD16YjVA.js.map → p-CZ0RizvY.js.map} +1 -1
- package/dist/components/{p-iBNSlotR.js → p-DYLnDz12.js} +6 -6
- package/dist/components/{p-iBNSlotR.js.map → p-DYLnDz12.js.map} +1 -1
- package/dist/components/sd-date-picker.js +2 -2
- package/dist/components/sd-date-range-picker.js +2 -2
- package/dist/components/sd-field.js +1 -1
- package/dist/components/sd-input.js +1 -1
- package/dist/components/sd-select-dropdown.js +1 -1
- package/dist/components/sd-select-multiple-group.js +3 -3
- package/dist/components/sd-select-multiple.js +4 -4
- package/dist/components/sd-select-search-input.js +1 -1
- package/dist/components/sd-select.js +1 -1
- package/dist/components/sd-table.js +5 -5
- package/dist/design-system/design-system.esm.js +1 -1
- package/dist/design-system/p-694c9cc9.entry.js +2 -0
- package/dist/design-system/p-694c9cc9.entry.js.map +1 -0
- package/dist/esm/sd-field_3.entry.js +8 -8
- package/hydrate/index.js +8 -8
- package/hydrate/index.mjs +8 -8
- package/package.json +2 -2
- package/dist/components/p-FVxa2OYe.js.map +0 -1
- package/dist/design-system/p-2023e24a.entry.js +0 -2
- package/dist/design-system/p-2023e24a.entry.js.map +0 -1
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-D_J8ScR5.js');
|
|
4
4
|
|
|
5
|
-
const sdFieldCss = () => `.sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:
|
|
5
|
+
const sdFieldCss = () => `.sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}.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}`;
|
|
6
6
|
|
|
7
7
|
const FORM_PARENT_TAGS = [
|
|
8
8
|
'sd-select',
|
|
@@ -69,10 +69,10 @@ const SdField = class {
|
|
|
69
69
|
return null;
|
|
70
70
|
}
|
|
71
71
|
registerToForm() {
|
|
72
|
-
if (!this.rules || this.rules.length === 0) {
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
}
|
|
72
|
+
// if (!this.rules || this.rules.length === 0) {
|
|
73
|
+
// console.warn('[sd-form-field] rules prop is required for sd-form integration');
|
|
74
|
+
// return;
|
|
75
|
+
// }
|
|
76
76
|
const formEl = this.el.closest('sd-form');
|
|
77
77
|
if (!formEl)
|
|
78
78
|
return;
|
|
@@ -121,15 +121,15 @@ const SdField = class {
|
|
|
121
121
|
}
|
|
122
122
|
}
|
|
123
123
|
render() {
|
|
124
|
-
return (index.h(index.Host, { key: '
|
|
124
|
+
return (index.h(index.Host, { key: '8d4368c9802a01a58872ae1467d6183bb6a1d1d3', class: {
|
|
125
125
|
'sd-field': true,
|
|
126
126
|
'sd-field--has-label': !!this.label,
|
|
127
127
|
'sd-field--has-label-inside': !!this.label && this.insideLabel,
|
|
128
128
|
[this.fieldStatus]: !!this.fieldStatus,
|
|
129
|
-
} }, index.h("div", { key: '
|
|
129
|
+
} }, index.h("div", { key: '86a8ae1ee6f2b56bbff2a0dda2f4c87e8cec74bd', class: "sd-field__wrapper" }, this.renderLabel(this.label), index.h("div", { key: 'c32b068f6459d326af29e2666a3ff17882c02c11', class: {
|
|
130
130
|
'sd-field__control': true,
|
|
131
131
|
'sd-field__control--label-inside ': !!this.label && this.insideLabel,
|
|
132
|
-
} }, index.h("slot", { key: '
|
|
132
|
+
} }, index.h("slot", { key: 'a636756df1b20b4fa0b785cba57e96a7695ff103' }))), this.errorMsg && index.h("div", { key: 'da410dd97d83a910d6819410878349144ed1af0e', class: "sd-field__error-message" }, this.errorMsg)));
|
|
133
133
|
}
|
|
134
134
|
renderLabel(label) {
|
|
135
135
|
if (!label)
|
|
@@ -61,10 +61,10 @@ export class SdField {
|
|
|
61
61
|
return null;
|
|
62
62
|
}
|
|
63
63
|
registerToForm() {
|
|
64
|
-
if (!this.rules || this.rules.length === 0) {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
}
|
|
64
|
+
// if (!this.rules || this.rules.length === 0) {
|
|
65
|
+
// console.warn('[sd-form-field] rules prop is required for sd-form integration');
|
|
66
|
+
// return;
|
|
67
|
+
// }
|
|
68
68
|
const formEl = this.el.closest('sd-form');
|
|
69
69
|
if (!formEl)
|
|
70
70
|
return;
|
|
@@ -113,15 +113,15 @@ export class SdField {
|
|
|
113
113
|
}
|
|
114
114
|
}
|
|
115
115
|
render() {
|
|
116
|
-
return (h(Host, { key: '
|
|
116
|
+
return (h(Host, { key: '8d4368c9802a01a58872ae1467d6183bb6a1d1d3', class: {
|
|
117
117
|
'sd-field': true,
|
|
118
118
|
'sd-field--has-label': !!this.label,
|
|
119
119
|
'sd-field--has-label-inside': !!this.label && this.insideLabel,
|
|
120
120
|
[this.fieldStatus]: !!this.fieldStatus,
|
|
121
|
-
} }, h("div", { key: '
|
|
121
|
+
} }, h("div", { key: '86a8ae1ee6f2b56bbff2a0dda2f4c87e8cec74bd', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: 'c32b068f6459d326af29e2666a3ff17882c02c11', class: {
|
|
122
122
|
'sd-field__control': true,
|
|
123
123
|
'sd-field__control--label-inside ': !!this.label && this.insideLabel,
|
|
124
|
-
} }, h("slot", { key: '
|
|
124
|
+
} }, h("slot", { key: 'a636756df1b20b4fa0b785cba57e96a7695ff103' }))), this.errorMsg && h("div", { key: 'da410dd97d83a910d6819410878349144ed1af0e', class: "sd-field__error-message" }, this.errorMsg)));
|
|
125
125
|
}
|
|
126
126
|
renderLabel(label) {
|
|
127
127
|
if (!label)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-field.js","sourceRoot":"","sources":["../../../src/components/sd-field/sd-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAKjF,MAAM,gBAAgB,GAAG;IACxB,WAAW;IACX,oBAAoB;IACpB,0BAA0B;IAC1B,UAAU;IACV,aAAa;CACb,CAAC;AASF,MAAM,OAAO,OAAO;IACR,EAAE,CAAe;IAEpB,IAAI,GAAW,EAAE,CAAC;IAClB,KAAK,GAAY,EAAE,CAAC;IAEH,KAAK,GAAa,KAAK,CAAC;IACxB,QAAQ,GAAa,KAAK,CAAC;IAC3B,OAAO,GAAa,KAAK,CAAC;IAC1B,OAAO,GAAa,KAAK,CAAC;IAC3C,MAAM,CAAgC;IAE9C,gBAAgB;IACR,KAAK,GAAW,EAAE,CAAC;IACnB,WAAW,GAAY,KAAK,CAAC;IAC7B,gBAAgB,GAAY,KAAK,CAAC;IAClC,YAAY,GAAW,EAAE,CAAC;IAC1B,iBAAiB,GAA0B,IAAI,CAAC;IAE/C,QAAQ,GAAW,EAAE,CAAC;IAEvB,WAAW,GAA2B,IAAI,CAAC;IAEnD,IAAI,KAAK;QACR,OAAO,IAAI,CAAC,WAAW,EAAE,KAAK,IAAI,IAAI,CAAC;IACxC,CAAC;IAED,IAAI,WAAW;QACd,IAAI,MAAM,GAAG,EAAE,CAAC;QAEhB,IAAI,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACrB,MAAM,GAAG,UAAU,CAAC;YACpB,OAAO,aAAa,MAAM,EAAE,CAAC;QAC9B,CAAC;QAED,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YACpB,MAAM,GAAG,OAAO,CAAC;YACjB,OAAO,aAAa,MAAM,EAAE,CAAC;QAC9B,CAAC;QAED,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO;YAAE,MAAM,GAAG,OAAO,CAAC;QACrC,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM;YAAE,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QACxC,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK;YAAE,MAAM,GAAG,OAAO,CAAC;QACnC,OAAO,MAAM,CAAC,CAAC,CAAC,aAAa,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5C,CAAC;IAED,gBAAgB;QACf,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QAC1C,IAAI,CAAC,cAAc,EAAE,CAAC;IACvB,CAAC;IAED,oBAAoB;QACnB,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC3B,CAAC;IAEO,eAAe;QACtB,KAAK,MAAM,GAAG,IAAI,gBAAgB,EAAE,CAAC;YACpC,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAkB,GAAG,CAAC,CAAC;YACrD,IAAI,MAAM,IAAI,OAAO,IAAI,MAAM,EAAE,CAAC;gBACjC,OAAO,MAAM,CAAC;YACf,CAAC;QACF,CAAC;QACD,OAAO,IAAI,CAAC;IACb,CAAC;IAEO,cAAc;QACrB,
|
|
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"]}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-YLoygqPr.js';
|
|
2
2
|
import { d as defineCustomElement$6 } from './p-B-HVIIWo.js';
|
|
3
|
-
import { d as defineCustomElement$5 } from './p-
|
|
3
|
+
import { d as defineCustomElement$5 } from './p-COJpIimp.js';
|
|
4
4
|
import { d as defineCustomElement$4 } from './p-CmghyzXg.js';
|
|
5
5
|
import { d as defineCustomElement$3 } from './p-Sw7TJWkF.js';
|
|
6
|
-
import { d as defineCustomElement$2 } from './p-
|
|
6
|
+
import { d as defineCustomElement$2 } from './p-B9qGa5dx.js';
|
|
7
7
|
import { d as defineCustomElement$1 } from './p-Dtljyq_t.js';
|
|
8
8
|
|
|
9
9
|
const sdSelectSearchInputCss = () => `sd-select-search-input{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center}sd-select-search-input .sd-select-search-input{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px}sd-select-search-input .sd-select-search-input sd-input{width:100%}sd-select-search-input .sd-select-search-input--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}`;
|
|
@@ -97,6 +97,6 @@ function defineCustomElement() {
|
|
|
97
97
|
}
|
|
98
98
|
|
|
99
99
|
export { SdSelectSearchInput as S, defineCustomElement as d };
|
|
100
|
-
//# sourceMappingURL=p-
|
|
100
|
+
//# sourceMappingURL=p-9E-u4GN-.js.map
|
|
101
101
|
|
|
102
|
-
//# sourceMappingURL=p-
|
|
102
|
+
//# sourceMappingURL=p-9E-u4GN-.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-9E-u4GN-.js","mappings":";;;;;;;;AAAA,MAAM,sBAAsB,GAAG,MAAM,CAAC,gbAAgb,CAAC;;MCM1c,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;;;;;;;;;IACvB,UAAU,GAAa,KAAK;IAC5B,UAAU,GAAkB,EAAE;AAEC,IAAA,WAAW;AACX,IAAA,WAAW;AAE1C,IAAA,SAAS;AAGjB,IAAA,MAAM,kBAAkB,GAAA;AACvB,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AACnB,YAAA,OAAO,IAAI,CAAC,SAAS,CAAC,kBAAkB,EAAE;;AAE3C,QAAA,OAAO,IAAI;;AAIZ,IAAA,MAAM,kBAAkB,GAAA;AACvB,QAAA,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,kBAAkB,EAAE;QAC7C,KAAK,EAAE,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC;;IAGtC,MAAM,GAAA;QACL,QACC,CACC,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACN,gBAAA,wBAAwB,EAAE,IAAI;AAC9B,gBAAA,kCAAkC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU;AACrD,aAAA,EACD,OAAO,EAAE,KAAK,IAAI,KAAK,CAAC,eAAe,EAAE,EAAA,EAEzC,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EAChC,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,WAAW,EAAC,cAAI,EAChB,SAAS,QACT,UAAU,EAAE,EAAE,cAAc,EAAE,KAAK,EAAE,EACrC,SAAS,EAAA,IAAA,EACT,UAAU,EAAE,KAAK,IAAG;AACnB,gBAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;AAC7C,aAAC,EACD,SAAS,EAAE,MAAK;AACf,gBAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;AACxB,aAAC,EACD,SAAS,EAAE,KAAK,IAAG;AAClB,gBAAA,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO;oBAAE,KAAK,CAAC,eAAe,EAAE;AACpD,aAAC,EAAA,EAED,CACC,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,EAAE,EACR,KAAK,EAAC,SAAS,EACf,KAAK,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,EAC7B,IAAI,EAAC,QAAQ,EACH,CAAA,CACD,CACN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-select/sd-select-search-input/sd-select-search-input.scss?tag=sd-select-search-input","src/components/sd-select/sd-select-search-input/sd-select-search-input.tsx"],"sourcesContent":["@import 'variables';\n\nsd-select-search-input {\n position: sticky;\n top: 0;\n display: flex;\n width: 100%;\n background-color: white;\n align-items: center;\n .sd-select-search-input {\n position: sticky;\n top: 0;\n display: flex;\n width: 100%;\n background-color: white;\n align-items: center;\n padding: 4px 8px;\n\n sd-input {\n width: 100%;\n }\n\n &--scrolled {\n box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.2);\n }\n }\n}\n","import { h, Component, Prop, Method, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'sd-select-search-input',\n styleUrl: 'sd-select-search-input.scss',\n})\nexport class SdSelectSearchInput {\n @Prop() isScrolled?: boolean = false;\n @Prop() searchText: string | null = '';\n\n @Event({ eventName: 'sdSearchInput' }) searchInput!: EventEmitter<string>;\n @Event({ eventName: 'sdSearchFocus' }) searchFocus!: EventEmitter<void>;\n\n private searchRef?: HTMLSdInputElement;\n\n @Method()\n async sdGetNativeElement(): Promise<HTMLInputElement | null> {\n if (this.searchRef) {\n return this.searchRef.sdGetNativeElement();\n }\n return null;\n }\n\n @Method()\n async sdSearchInputFocus() {\n const input = await this.sdGetNativeElement();\n input?.focus({ preventScroll: true });\n }\n\n render() {\n return (\n <div\n class={{\n 'sd-select-search-input': true,\n 'sd-select-search-input--scrolled': !!this.isScrolled,\n }}\n onClick={event => event.stopPropagation()}\n >\n <sd-input\n ref={el => (this.searchRef = el)}\n value={this.searchText}\n placeholder=\"검색\"\n clearable\n inputStyle={{ 'padding-left': '8px' }}\n autofocus\n onSdUpdate={event => {\n this.searchInput.emit(String(event?.detail));\n }}\n onSdFocus={() => {\n this.searchFocus.emit();\n }}\n onKeyDown={event => {\n if (event.code === 'Enter') event.stopPropagation();\n }}\n >\n <sd-icon\n name=\"search\"\n size={16}\n color=\"#737373\"\n style={{ marginRight: '4px' }}\n slot=\"prefix\"\n ></sd-icon>\n </sd-input>\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-YLoygqPr.js';
|
|
2
2
|
import { d as defineCustomElement$5 } from './p-B-HVIIWo.js';
|
|
3
|
-
import { d as defineCustomElement$4 } from './p-
|
|
3
|
+
import { d as defineCustomElement$4 } from './p-COJpIimp.js';
|
|
4
4
|
import { d as defineCustomElement$3 } from './p-CmghyzXg.js';
|
|
5
5
|
import { d as defineCustomElement$2 } from './p-Sw7TJWkF.js';
|
|
6
6
|
import { d as defineCustomElement$1 } from './p-Dtljyq_t.js';
|
|
@@ -233,6 +233,6 @@ function defineCustomElement() {
|
|
|
233
233
|
}
|
|
234
234
|
|
|
235
235
|
export { SdInput as S, defineCustomElement as d };
|
|
236
|
-
//# sourceMappingURL=p-
|
|
236
|
+
//# sourceMappingURL=p-B9qGa5dx.js.map
|
|
237
237
|
|
|
238
|
-
//# sourceMappingURL=p-
|
|
238
|
+
//# sourceMappingURL=p-B9qGa5dx.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-Cp2TqeFd.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","nanoid"],"sources":["../../node_modules/nanoid/non-secure/index.cjs","src/components/sd-input/sd-input.scss?tag=sd-input","src/components/sd-input/sd-input.tsx"],"sourcesContent":["// This alphabet uses `A-Za-z0-9_-` symbols.\n// The order of characters is optimized for better gzip and brotli compression.\n// References to the same file (works both for gzip and brotli):\n// `'use`, `andom`, and `rict'`\n// References to the brotli default dictionary:\n// `-26T`, `1983`, `40px`, `75px`, `bush`, `jack`, `mind`, `very`, and `wolf`\nlet urlAlphabet =\n 'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict'\n\nlet customAlphabet = (alphabet, defaultSize = 21) => {\n return (size = defaultSize) => {\n let id = ''\n // A compact alternative for `for (var i = 0; i < step; i++)`.\n let i = size | 0\n while (i--) {\n // `| 0` is more compact and faster than `Math.floor()`.\n id += alphabet[(Math.random() * alphabet.length) | 0]\n }\n return id\n }\n}\n\nlet nanoid = (size = 21) => {\n let id = ''\n // A compact alternative for `for (var i = 0; i < step; i++)`.\n let i = size | 0\n while (i--) {\n // `| 0` is more compact and faster than `Math.floor()`.\n id += urlAlphabet[(Math.random() * 64) | 0]\n }\n return id\n}\n\nmodule.exports = { nanoid, customAlphabet }\n","@import 'variables';\n@import '../sd-icon/sd-icon.scss';\n@import '../sd-date-picker/sd-date-picker.scss';\n@import '../sd-date-range-picker/sd-date-range-picker.scss';\n\ninput:-webkit-autofill,\ninput:-webkit-autofill:hover,\ninput:-webkit-autofill:focus,\ninput:-webkit-autofill:active {\n -webkit-text-fill-color: #000;\n -webkit-box-shadow: 0 0 0px 1000px #fff inset;\n box-shadow: 0 0 0px 1000px #fff inset;\n transition: background-color 5000s ease-in-out 0s;\n}\n\ninput:autofill,\ninput:autofill:hover,\ninput:autofill:focus,\ninput:autofill:active {\n -webkit-text-fill-color: #000;\n -webkit-box-shadow: 0 0 0px 1000px #fff inset;\n box-shadow: 0 0 0px 1000px #fff inset;\n transition: background-color 5000s ease-in-out 0s;\n}\n\nsd-input {\n display: inline-flex;\n\n .sd-input__content {\n width: 100%;\n height: 100%;\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n color: $grey_90;\n font-size: 12px;\n line-height: 20px;\n padding: 0 8px;\n .sd-input__native {\n width: 100%;\n height: 100%;\n border: none;\n outline: none;\n background: transparent;\n\n &[disabled] {\n cursor: not-allowed;\n color: $grey_65;\n }\n\n &::placeholder {\n color: $grey_55;\n }\n }\n }\n}\n","import {\n Component,\n Element,\n Prop,\n State,\n Watch,\n Event,\n EventEmitter,\n h,\n Method,\n} from '@stencil/core';\nimport { Rule } from '../../types/form';\nimport { SdTooltipProps } from '../sd-tooltip/sd-tooltip';\nimport { nanoid } from 'nanoid/non-secure';\n\n@Component({\n tag: 'sd-input',\n styleUrl: 'sd-input.scss',\n})\nexport class SdInput {\n @Element() host!: HTMLElement;\n\n @Prop({ mutable: true }) value?: string | number | null = null;\n // @Prop() name?: string;\n @Prop() type: 'text' | 'password' | 'email' = 'text';\n @Prop() insideLabel: boolean = false;\n @Prop() placeholder: string = '입력해 주세요.';\n @Prop() disabled: boolean = false;\n @Prop() clearable: boolean = false;\n @Prop() width?: number | string;\n @Prop() barcode?: boolean = false;\n @Prop() rules?: Rule[] = [];\n @Prop() autoFocus: boolean = false;\n @Prop() status?: 'default' | 'pass' | 'error';\n @Prop() inputClass: string = '';\n @Prop() readonly: boolean = false;\n @Prop({ mutable: true }) error: boolean = false;\n @Prop({ mutable: true }) focused: boolean = false;\n @Prop({ mutable: true }) hovered: boolean = false;\n\n // props - label\n @Prop() label?: string = '';\n @Prop() useLabelRequired: boolean = false;\n @Prop() labelTooltip: string = '';\n @Prop() labelTooltipProps: SdTooltipProps | null = null;\n\n // props - custom styles\n @Prop() inputStyle: { [key: string]: string } = {};\n\n @State() private internalValue: string | number | null = null;\n\n private nativeEl: HTMLInputElement | undefined = undefined;\n private formField?: HTMLSdFieldElement;\n name = nanoid();\n\n @Event({ eventName: 'sdUpdate' }) input?: EventEmitter<string | number | null>;\n @Event({ eventName: 'sdFocus' }) focus?: EventEmitter<Event>;\n @Event({ eventName: 'sdBlur' }) blur?: EventEmitter<Event>;\n\n @Watch('value')\n valueChanged(newValue: string | number | null) {\n this.internalValue = newValue;\n }\n\n @Watch('internalValue')\n internalValueChanged(newValue: string | number | null) {\n if (newValue !== this.value) {\n this.value = newValue;\n this.input?.emit(this.value);\n }\n }\n\n @Method()\n async sdGetNativeElement(): Promise<HTMLInputElement | null> {\n return this.nativeEl || null;\n }\n\n @Method()\n async sdValidate() {\n this.formField?.sdValidate();\n }\n\n @Method()\n async sdReset() {\n this.formField?.sdReset();\n }\n\n @Method()\n async sdResetValidate() {\n this.formField?.sdResetValidation();\n }\n\n @Method()\n async sdFocus() {\n this.formField?.sdFocus();\n }\n\n componentWillLoad() {\n if (this.value) {\n this.internalValue = this.value;\n }\n }\n\n componentDidLoad() {\n if (this.autoFocus) {\n this.nativeEl?.focus();\n }\n }\n\n private handleInput = (event: Event) => {\n const target = event.target as HTMLInputElement;\n this.internalValue = target.value;\n };\n\n private handleFocus = async (type: 'focus' | 'blur', event: Event) => {\n this.focused = type === 'focus';\n\n if (type === 'blur') {\n // Auto-validate on blur if rules exist\n if (this.rules && this.rules.length > 0) {\n await this.formField?.sdValidate();\n }\n this.blur?.emit(event);\n } else {\n this.focus?.emit(event);\n }\n };\n\n render() {\n const inputWidth = this.width\n ? {\n '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,\n }\n : {};\n\n return (\n <sd-field\n name={this.name}\n label={this.label}\n insideLabel={this.insideLabel}\n rules={this.rules}\n error={this.error}\n disabled={this.disabled}\n focused={this.focused}\n hovered={this.hovered}\n status={this.status}\n useLabelRequired={this.useLabelRequired}\n labelTooltip={this.labelTooltip}\n labelTooltipProps={this.labelTooltipProps}\n ref={el => (this.formField = el)}\n style={inputWidth}\n onMouseEnter={() => (this.hovered = true)}\n onMouseLeave={() => (this.hovered = false)}\n >\n <label class=\"sd-input__content\" style={{ width: '100%' }}>\n <slot name=\"prefix\"></slot>\n <input\n name={this.name}\n ref={el => (this.nativeEl = el)}\n class={`sd-input__native ${this.inputClass}`}\n type={this.type}\n value={this.internalValue || ''}\n placeholder={this.placeholder}\n disabled={this.disabled}\n readonly={this.readonly}\n autofocus={this.autoFocus}\n onInput={this.handleInput}\n onFocus={event => this.handleFocus('focus', event)}\n onBlur={event => this.handleFocus('blur', event)}\n style={this.inputStyle}\n />\n <slot name=\"suffix\"></slot>\n {this.clearable && this.internalValue && (\n <sd-icon\n name=\"close\"\n color=\"grey_65\"\n size=\"16\"\n class=\"sd-input__clear-icon\"\n onClick={async () => {\n this.internalValue = '';\n await this.formField?.sdValidate();\n }}\n />\n )}\n </label>\n </sd-field>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"p-B9qGa5dx.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","nanoid"],"sources":["../../node_modules/nanoid/non-secure/index.cjs","src/components/sd-input/sd-input.scss?tag=sd-input","src/components/sd-input/sd-input.tsx"],"sourcesContent":["// This alphabet uses `A-Za-z0-9_-` symbols.\n// The order of characters is optimized for better gzip and brotli compression.\n// References to the same file (works both for gzip and brotli):\n// `'use`, `andom`, and `rict'`\n// References to the brotli default dictionary:\n// `-26T`, `1983`, `40px`, `75px`, `bush`, `jack`, `mind`, `very`, and `wolf`\nlet urlAlphabet =\n 'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict'\n\nlet customAlphabet = (alphabet, defaultSize = 21) => {\n return (size = defaultSize) => {\n let id = ''\n // A compact alternative for `for (var i = 0; i < step; i++)`.\n let i = size | 0\n while (i--) {\n // `| 0` is more compact and faster than `Math.floor()`.\n id += alphabet[(Math.random() * alphabet.length) | 0]\n }\n return id\n }\n}\n\nlet nanoid = (size = 21) => {\n let id = ''\n // A compact alternative for `for (var i = 0; i < step; i++)`.\n let i = size | 0\n while (i--) {\n // `| 0` is more compact and faster than `Math.floor()`.\n id += urlAlphabet[(Math.random() * 64) | 0]\n }\n return id\n}\n\nmodule.exports = { nanoid, customAlphabet }\n","@import 'variables';\n@import '../sd-icon/sd-icon.scss';\n@import '../sd-date-picker/sd-date-picker.scss';\n@import '../sd-date-range-picker/sd-date-range-picker.scss';\n\ninput:-webkit-autofill,\ninput:-webkit-autofill:hover,\ninput:-webkit-autofill:focus,\ninput:-webkit-autofill:active {\n -webkit-text-fill-color: #000;\n -webkit-box-shadow: 0 0 0px 1000px #fff inset;\n box-shadow: 0 0 0px 1000px #fff inset;\n transition: background-color 5000s ease-in-out 0s;\n}\n\ninput:autofill,\ninput:autofill:hover,\ninput:autofill:focus,\ninput:autofill:active {\n -webkit-text-fill-color: #000;\n -webkit-box-shadow: 0 0 0px 1000px #fff inset;\n box-shadow: 0 0 0px 1000px #fff inset;\n transition: background-color 5000s ease-in-out 0s;\n}\n\nsd-input {\n display: inline-flex;\n\n .sd-input__content {\n width: 100%;\n height: 100%;\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n color: $grey_90;\n font-size: 12px;\n line-height: 20px;\n padding: 0 8px;\n .sd-input__native {\n width: 100%;\n height: 100%;\n border: none;\n outline: none;\n background: transparent;\n\n &[disabled] {\n cursor: not-allowed;\n color: $grey_65;\n }\n\n &::placeholder {\n color: $grey_55;\n }\n }\n }\n}\n","import {\n Component,\n Element,\n Prop,\n State,\n Watch,\n Event,\n EventEmitter,\n h,\n Method,\n} from '@stencil/core';\nimport { Rule } from '../../types/form';\nimport { SdTooltipProps } from '../sd-tooltip/sd-tooltip';\nimport { nanoid } from 'nanoid/non-secure';\n\n@Component({\n tag: 'sd-input',\n styleUrl: 'sd-input.scss',\n})\nexport class SdInput {\n @Element() host!: HTMLElement;\n\n @Prop({ mutable: true }) value?: string | number | null = null;\n // @Prop() name?: string;\n @Prop() type: 'text' | 'password' | 'email' = 'text';\n @Prop() insideLabel: boolean = false;\n @Prop() placeholder: string = '입력해 주세요.';\n @Prop() disabled: boolean = false;\n @Prop() clearable: boolean = false;\n @Prop() width?: number | string;\n @Prop() barcode?: boolean = false;\n @Prop() rules?: Rule[] = [];\n @Prop() autoFocus: boolean = false;\n @Prop() status?: 'default' | 'pass' | 'error';\n @Prop() inputClass: string = '';\n @Prop() readonly: boolean = false;\n @Prop({ mutable: true }) error: boolean = false;\n @Prop({ mutable: true }) focused: boolean = false;\n @Prop({ mutable: true }) hovered: boolean = false;\n\n // props - label\n @Prop() label?: string = '';\n @Prop() useLabelRequired: boolean = false;\n @Prop() labelTooltip: string = '';\n @Prop() labelTooltipProps: SdTooltipProps | null = null;\n\n // props - custom styles\n @Prop() inputStyle: { [key: string]: string } = {};\n\n @State() private internalValue: string | number | null = null;\n\n private nativeEl: HTMLInputElement | undefined = undefined;\n private formField?: HTMLSdFieldElement;\n name = nanoid();\n\n @Event({ eventName: 'sdUpdate' }) input?: EventEmitter<string | number | null>;\n @Event({ eventName: 'sdFocus' }) focus?: EventEmitter<Event>;\n @Event({ eventName: 'sdBlur' }) blur?: EventEmitter<Event>;\n\n @Watch('value')\n valueChanged(newValue: string | number | null) {\n this.internalValue = newValue;\n }\n\n @Watch('internalValue')\n internalValueChanged(newValue: string | number | null) {\n if (newValue !== this.value) {\n this.value = newValue;\n this.input?.emit(this.value);\n }\n }\n\n @Method()\n async sdGetNativeElement(): Promise<HTMLInputElement | null> {\n return this.nativeEl || null;\n }\n\n @Method()\n async sdValidate() {\n this.formField?.sdValidate();\n }\n\n @Method()\n async sdReset() {\n this.formField?.sdReset();\n }\n\n @Method()\n async sdResetValidate() {\n this.formField?.sdResetValidation();\n }\n\n @Method()\n async sdFocus() {\n this.formField?.sdFocus();\n }\n\n componentWillLoad() {\n if (this.value) {\n this.internalValue = this.value;\n }\n }\n\n componentDidLoad() {\n if (this.autoFocus) {\n this.nativeEl?.focus();\n }\n }\n\n private handleInput = (event: Event) => {\n const target = event.target as HTMLInputElement;\n this.internalValue = target.value;\n };\n\n private handleFocus = async (type: 'focus' | 'blur', event: Event) => {\n this.focused = type === 'focus';\n\n if (type === 'blur') {\n // Auto-validate on blur if rules exist\n if (this.rules && this.rules.length > 0) {\n await this.formField?.sdValidate();\n }\n this.blur?.emit(event);\n } else {\n this.focus?.emit(event);\n }\n };\n\n render() {\n const inputWidth = this.width\n ? {\n '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,\n }\n : {};\n\n return (\n <sd-field\n name={this.name}\n label={this.label}\n insideLabel={this.insideLabel}\n rules={this.rules}\n error={this.error}\n disabled={this.disabled}\n focused={this.focused}\n hovered={this.hovered}\n status={this.status}\n useLabelRequired={this.useLabelRequired}\n labelTooltip={this.labelTooltip}\n labelTooltipProps={this.labelTooltipProps}\n ref={el => (this.formField = el)}\n style={inputWidth}\n onMouseEnter={() => (this.hovered = true)}\n onMouseLeave={() => (this.hovered = false)}\n >\n <label class=\"sd-input__content\" style={{ width: '100%' }}>\n <slot name=\"prefix\"></slot>\n <input\n name={this.name}\n ref={el => (this.nativeEl = el)}\n class={`sd-input__native ${this.inputClass}`}\n type={this.type}\n value={this.internalValue || ''}\n placeholder={this.placeholder}\n disabled={this.disabled}\n readonly={this.readonly}\n autofocus={this.autoFocus}\n onInput={this.handleInput}\n onFocus={event => this.handleFocus('focus', event)}\n onBlur={event => this.handleFocus('blur', event)}\n style={this.inputStyle}\n />\n <slot name=\"suffix\"></slot>\n {this.clearable && this.internalValue && (\n <sd-icon\n name=\"close\"\n color=\"grey_65\"\n size=\"16\"\n class=\"sd-input__clear-icon\"\n onClick={async () => {\n this.internalValue = '';\n await this.formField?.sdValidate();\n }}\n />\n )}\n </label>\n </sd-field>\n );\n }\n}\n"],"version":3}
|
|
@@ -4,7 +4,7 @@ import { d as defineCustomElement$3 } from './p-CmghyzXg.js';
|
|
|
4
4
|
import { d as defineCustomElement$2 } from './p-Sw7TJWkF.js';
|
|
5
5
|
import { d as defineCustomElement$1 } from './p-Dtljyq_t.js';
|
|
6
6
|
|
|
7
|
-
const sdFieldCss = () => `.sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:
|
|
7
|
+
const sdFieldCss = () => `.sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}.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}`;
|
|
8
8
|
|
|
9
9
|
const FORM_PARENT_TAGS = [
|
|
10
10
|
'sd-select',
|
|
@@ -74,10 +74,10 @@ const SdField = /*@__PURE__*/ proxyCustomElement(class SdField extends H {
|
|
|
74
74
|
return null;
|
|
75
75
|
}
|
|
76
76
|
registerToForm() {
|
|
77
|
-
if (!this.rules || this.rules.length === 0) {
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
}
|
|
77
|
+
// if (!this.rules || this.rules.length === 0) {
|
|
78
|
+
// console.warn('[sd-form-field] rules prop is required for sd-form integration');
|
|
79
|
+
// return;
|
|
80
|
+
// }
|
|
81
81
|
const formEl = this.el.closest('sd-form');
|
|
82
82
|
if (!formEl)
|
|
83
83
|
return;
|
|
@@ -126,15 +126,15 @@ const SdField = /*@__PURE__*/ proxyCustomElement(class SdField extends H {
|
|
|
126
126
|
}
|
|
127
127
|
}
|
|
128
128
|
render() {
|
|
129
|
-
return (h(Host, { key: '
|
|
129
|
+
return (h(Host, { key: '8d4368c9802a01a58872ae1467d6183bb6a1d1d3', class: {
|
|
130
130
|
'sd-field': true,
|
|
131
131
|
'sd-field--has-label': !!this.label,
|
|
132
132
|
'sd-field--has-label-inside': !!this.label && this.insideLabel,
|
|
133
133
|
[this.fieldStatus]: !!this.fieldStatus,
|
|
134
|
-
} }, h("div", { key: '
|
|
134
|
+
} }, h("div", { key: '86a8ae1ee6f2b56bbff2a0dda2f4c87e8cec74bd', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: 'c32b068f6459d326af29e2666a3ff17882c02c11', class: {
|
|
135
135
|
'sd-field__control': true,
|
|
136
136
|
'sd-field__control--label-inside ': !!this.label && this.insideLabel,
|
|
137
|
-
} }, h("slot", { key: '
|
|
137
|
+
} }, h("slot", { key: 'a636756df1b20b4fa0b785cba57e96a7695ff103' }))), this.errorMsg && h("div", { key: 'da410dd97d83a910d6819410878349144ed1af0e', class: "sd-field__error-message" }, this.errorMsg)));
|
|
138
138
|
}
|
|
139
139
|
renderLabel(label) {
|
|
140
140
|
if (!label)
|
|
@@ -196,6 +196,6 @@ function defineCustomElement() {
|
|
|
196
196
|
}
|
|
197
197
|
|
|
198
198
|
export { SdField as S, defineCustomElement as d };
|
|
199
|
-
//# sourceMappingURL=p-
|
|
199
|
+
//# sourceMappingURL=p-COJpIimp.js.map
|
|
200
200
|
|
|
201
|
-
//# sourceMappingURL=p-
|
|
201
|
+
//# sourceMappingURL=p-COJpIimp.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"p-COJpIimp.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-field/sd-field.scss?tag=sd-field","src/components/sd-field/sd-field.tsx"],"sourcesContent":["@import 'variables';\n\n.sd-field {\n display: inline-flex;\n flex-flow: column nowrap;\n height: fit-content;\n width: 100%;\n\n *:focus,\n *:focus-visible,\n *:focus-within {\n outline: none !important;\n }\n\n &:not(.sd-field--disabled) {\n &:hover {\n .sd-field__control {\n border: 1px solid $brilliantblue_75 !important;\n box-shadow: 0px 0px 4px 0px #0071ff66;\n }\n }\n }\n\n &.sd-field--disabled {\n cursor: not-allowed;\n\n .sd-field__wrapper {\n cursor: not-allowed !important;\n .sd-field__label-inside {\n border-color: $grey_45;\n color: $grey_65;\n cursor: not-allowed !important;\n }\n\n .sd-field__control {\n background-color: $grey_20;\n border-color: $grey_45;\n color: $grey_65;\n cursor: not-allowed !important;\n }\n }\n }\n\n &--has-label {\n .sd-field__wrapper {\n .sd-field__label {\n display: flex;\n align-items: center;\n margin-right: 12px;\n\n &__required-icon {\n margin-right: 4px;\n }\n\n &__text {\n font-size: 12px;\n line-height: 20px;\n // font-weight: 500;\n color: $grey_90;\n white-space: nowrap;\n }\n\n &__tooltip {\n margin-left: 2px;\n }\n }\n }\n }\n\n &--has-label-inside {\n .sd-field__wrapper {\n .sd-field__label {\n margin-right: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 3px 12px;\n border: 1px solid $grey_45;\n border-right: none;\n border-radius: 4px 0 0 4px;\n border-color: $grey_55;\n background-color: $grey_10;\n }\n }\n }\n\n &__wrapper {\n width: var(--field-width, 200px);\n height: 28px;\n display: flex;\n align-items: center;\n flex-flow: row nowrap;\n position: relative;\n color: $grey_90;\n cursor: pointer;\n -webkit-user-select: none;\n user-select: none;\n\n .sd-field__control {\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n flex: 1;\n border: 1px solid $grey_55;\n border-radius: 4px;\n background: white;\n\n &--label-inside {\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n }\n }\n\n &--error:not(:hover) {\n .sd-field__wrapper .sd-field__control {\n border: 1px solid $red_70 !important;\n }\n }\n\n &.sd-field--focus,\n &.sd-field--hover {\n .sd-field__wrapper .sd-field__control {\n border: 1px solid $brilliantblue_75 !important;\n box-shadow: 0px 0px 4px 0px #0071ff66;\n }\n }\n\n .sd-field__error-message {\n color: $red_70;\n font-size: 12px;\n line-height: 20px;\n margin-top: 4px;\n }\n}\n","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"],"version":3}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-YLoygqPr.js';
|
|
2
2
|
import { d as defineCustomElement$9 } from './p-B-HVIIWo.js';
|
|
3
3
|
import { d as defineCustomElement$8 } from './p-ldcuoYNT.js';
|
|
4
|
-
import { d as defineCustomElement$7 } from './p-
|
|
4
|
+
import { d as defineCustomElement$7 } from './p-COJpIimp.js';
|
|
5
5
|
import { d as defineCustomElement$6 } from './p-CmghyzXg.js';
|
|
6
6
|
import { d as defineCustomElement$5 } from './p-Sw7TJWkF.js';
|
|
7
|
-
import { d as defineCustomElement$4 } from './p-
|
|
7
|
+
import { d as defineCustomElement$4 } from './p-B9qGa5dx.js';
|
|
8
8
|
import { d as defineCustomElement$3 } from './p-BsBjOh8u.js';
|
|
9
|
-
import { d as defineCustomElement$2 } from './p-
|
|
9
|
+
import { d as defineCustomElement$2 } from './p-9E-u4GN-.js';
|
|
10
10
|
import { d as defineCustomElement$1 } from './p-Dtljyq_t.js';
|
|
11
11
|
|
|
12
12
|
const sdSelectDropdownCss = () => `.sd-select-dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select-dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select-dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select-dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select-dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select-dropdown::-webkit-scrollbar-track{background-color:transparent}.sd-select-dropdown .sd-select-option-placeholder{height:48px;display:flex;align-items:center;padding:8px 16px;font-size:12px;line-height:0;text-align:left;color:#888888}.sd-select-dropdown{width:var(--select-dropdown-width, 200px);max-height:var(--select-dropdown-height, 260px);padding-bottom:2px;background-color:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);border-radius:4px;overflow-y:auto;color:#333333;display:flex;flex-direction:column;opacity:0.5;transition:opacity 0.15s ease-in}.sd-select-dropdown--ready{opacity:1}`;
|
|
@@ -255,6 +255,6 @@ function defineCustomElement() {
|
|
|
255
255
|
}
|
|
256
256
|
|
|
257
257
|
export { SdSelectDropdown as S, defineCustomElement as d };
|
|
258
|
-
//# sourceMappingURL=p-
|
|
258
|
+
//# sourceMappingURL=p-CZ0RizvY.js.map
|
|
259
259
|
|
|
260
|
-
//# sourceMappingURL=p-
|
|
260
|
+
//# sourceMappingURL=p-CZ0RizvY.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-DD16YjVA.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-select/sd-select-dropdown/sd-select-dropdown.scss?tag=sd-select-dropdown","src/components/sd-select/sd-select-dropdown/sd-select-dropdown.tsx"],"sourcesContent":["@import 'variables';\n@import 'extend';\n\n.sd-select-dropdown {\n @extend %scrollBar;\n width: var(--select-dropdown-width, 200px);\n max-height: var(--select-dropdown-height, 260px);\n padding-bottom: 2px;\n background-color: white;\n box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.1);\n border-radius: 4px;\n overflow-y: auto;\n color: $grey_90;\n display: flex;\n flex-direction: column;\n opacity: 0.5;\n transition: opacity 0.15s ease-in;\n\n &--ready {\n opacity: 1;\n }\n\n .sd-select-option-placeholder {\n @extend %selectOptionPlaceholder;\n }\n}\n","import { Component, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { SelectOption } from '../sd-select';\n\ntype SelectValue = SelectOption[] | string | number | null;\n\n@Component({\n tag: 'sd-select-dropdown',\n styleUrl: 'sd-select-dropdown.scss',\n})\nexport class SdSelectDropdown {\n @Prop({ mutable: true }) itemIndex!: number;\n @Prop() value: SelectValue = null;\n @Prop() options!: SelectOption[];\n @Prop() width!: string;\n @Prop() dropdownHeight!: string;\n @Prop() searchable!: boolean;\n @Prop() optionPlaceholder!: string;\n @Prop() useCheckbox: boolean = false;\n @Prop() useAll?: boolean = false;\n\n @State() filteredOptions = this.options;\n @State() searchText: string | null = null;\n @State() isScrolled: boolean = false;\n @State() isDropdownReady: boolean = false;\n\n @Event({ eventName: 'sdOptionClick' }) optionClick!: EventEmitter<{\n option: SelectOption;\n index: number;\n event: MouseEvent;\n }>;\n @Event({ eventName: 'sdOptionFiltered' }) optionFiltered!: EventEmitter<SelectOption[]>;\n @Event({ eventName: 'sdScroll' }) scroll!: EventEmitter<Event>;\n\n @Watch('filteredOptions')\n filteredOptionsChanged(newValue: SelectOption[]) {\n this.optionFiltered.emit(newValue);\n }\n\n @Watch('searchText')\n searchTextChanged() {\n this.filterOptions();\n }\n\n @Watch('itemIndex')\n async itemIndexChanged(newIndex: number, oldIndex: number) {\n if (this.searchable) {\n const searchInput = await this.getNativeInputElement();\n if (this.itemIndex === -1) {\n searchInput?.focus({ preventScroll: true });\n return;\n } else if (searchInput?.matches(':focus')) {\n searchInput?.blur();\n }\n }\n\n const optionElements =\n this.dropdownRef?.querySelectorAll('.sd-select-dropdown sd-select-option') || [];\n const currentItem = optionElements?.[this.itemIndex];\n\n if (!currentItem) return;\n\n this.optionRef = currentItem as HTMLSdSelectOptionElement;\n const isOptionDisabled = await this.optionRef.sdIsDisabled();\n\n if (isOptionDisabled) {\n newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;\n return;\n }\n\n this.scrollToOption(currentItem as HTMLElement);\n }\n\n componentWillLoad() {\n this.filteredOptions = this.options;\n\n // DOM 렌더링을 기다리기 위해 이중 requestAnimationFrame 사용 - (레이아웃/스타일 계산 - 페인트 이후)\n requestAnimationFrame(() => {\n requestAnimationFrame(async () => {\n const selectedOptions = this.getSelectedOption();\n\n // 선택된 옵션이 있으면 첫 번째 선택된 항목으로 스크롤\n if (selectedOptions) {\n const selectedIndex = Array.isArray(selectedOptions)\n ? this.options.indexOf(selectedOptions[0])\n : this.options.indexOf(selectedOptions);\n const optionElements = Array.from(\n this.dropdownRef?.querySelectorAll('sd-select-option') || [],\n );\n\n // useAll 사용시 \"전체\" 옵션 포함한 인덱스 사용\n const actualIndex = this.useAll ? selectedIndex + 1 : selectedIndex;\n\n // 선택된 옵션이 화면 가운데에 오도록 index 조정\n const targetIndex = Math.min(actualIndex + 4, optionElements.length - 1);\n const currentItem = optionElements?.[targetIndex];\n\n if (currentItem) {\n this.scrollToOption(currentItem as HTMLElement, 'instant');\n }\n }\n\n this.isDropdownReady = true;\n\n if (this.searchable) {\n const searchInput = await this.getNativeInputElement();\n\n if (searchInput) {\n requestAnimationFrame(() => {\n searchInput.focus({ preventScroll: true });\n });\n }\n }\n });\n });\n }\n\n private dropdownRef?: HTMLElement;\n private searchRef?: HTMLSdSelectSearchInputElement;\n private optionRef?: HTMLSdSelectOptionElement;\n\n private get dropdownSize() {\n return {\n '--select-dropdown-width': this.width || '200px',\n '--select-dropdown-height': this.dropdownHeight || '260px',\n };\n }\n\n private filterOptions() {\n if (!this.searchText || this.searchText.trim() === '') {\n // 검색어가 없으면 전체 옵션 표시\n this.filteredOptions = this.options;\n } else {\n // 검색어가 있으면 필터링\n this.filteredOptions = this.options.filter(option =>\n option.label.toLowerCase().includes(this.searchText!.toLowerCase()),\n );\n }\n }\n\n private getSelectedOption(): SelectOption | SelectOption[] | undefined {\n if (typeof this.value !== 'object') {\n return this.options.find(option => option.value === this.value);\n }\n\n return this.options.filter(option => (this.value as SelectOption[])?.includes(option));\n }\n\n private isOptionSelected(value: SelectValue) {\n if (Array.isArray(this.value)) {\n return this.value.some(selected => selected.value === value);\n }\n return value === this.value;\n }\n\n private async getNativeInputElement(): Promise<HTMLInputElement | null> {\n if (this.searchRef) {\n return this.searchRef.sdGetNativeElement();\n }\n return null;\n }\n\n private scrollToOption(optionElement: HTMLElement, scrollBehavior: ScrollBehavior = 'smooth') {\n if (!this.dropdownRef || !optionElement) return;\n\n const dropdown = this.dropdownRef;\n const optionTop = optionElement.offsetTop;\n const optionHeight = optionElement.offsetHeight;\n const dropdownScrollTop = dropdown.scrollTop;\n const dropdownHeight = dropdown.clientHeight;\n\n const searchContainer = dropdown.querySelector('.sd-select-search-input');\n const searchOffset = searchContainer ? (searchContainer as HTMLElement).offsetHeight : 0;\n\n const visibleTop = dropdownScrollTop + searchOffset;\n const visibleBottom = dropdownScrollTop + dropdownHeight;\n\n if (optionTop < visibleTop) {\n dropdown.scrollTo({ top: optionTop - searchOffset, behavior: scrollBehavior });\n } else if (optionTop + optionHeight > visibleBottom) {\n dropdown.scrollTo({\n top: optionTop + optionHeight - dropdownHeight + searchOffset,\n behavior: scrollBehavior,\n });\n }\n }\n\n private handleDropdownScroll = (event: Event) => {\n const target = event.target as HTMLElement;\n const scrollTop = target.scrollTop;\n\n // 스크롤이 조금이라도 되면 그림자 표시\n this.isScrolled = scrollTop > 0;\n };\n\n render() {\n return (\n <Host style={this.dropdownSize}>\n <div\n class={{\n 'sd-select-dropdown': true,\n 'sd-select-dropdown--ready': this.isDropdownReady,\n }}\n onScroll={this.handleDropdownScroll}\n ref={el => (this.dropdownRef = el)}\n >\n {this.searchable && (\n <sd-select-search-input\n ref={el => (this.searchRef = el)}\n isScrolled={this.isScrolled}\n searchText={this.searchText}\n onSdSearchInput={(event: CustomEvent<string>) => (this.searchText = event.detail || '')}\n onSdSearchFocus={() => (this.itemIndex = -1)}\n ></sd-select-search-input>\n )}\n {this.filteredOptions.length > 0 ? (\n this.filteredOptions.map((option, index) => (\n <slot name={`option-${option.value}`}>\n <sd-select-option\n option={option}\n index={index}\n isSelected={this.isOptionSelected(option.value)}\n isFocused={index === this.itemIndex}\n onOptionClick={({ detail }) => this.optionClick.emit(detail)}\n useCheckbox={this.useCheckbox}\n ></sd-select-option>\n </slot>\n ))\n ) : (\n <slot name=\"option-placeholder\">\n <div class={'sd-select-option-placeholder'}>{this.optionPlaceholder}</div>\n </slot>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"p-CZ0RizvY.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-select/sd-select-dropdown/sd-select-dropdown.scss?tag=sd-select-dropdown","src/components/sd-select/sd-select-dropdown/sd-select-dropdown.tsx"],"sourcesContent":["@import 'variables';\n@import 'extend';\n\n.sd-select-dropdown {\n @extend %scrollBar;\n width: var(--select-dropdown-width, 200px);\n max-height: var(--select-dropdown-height, 260px);\n padding-bottom: 2px;\n background-color: white;\n box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.1);\n border-radius: 4px;\n overflow-y: auto;\n color: $grey_90;\n display: flex;\n flex-direction: column;\n opacity: 0.5;\n transition: opacity 0.15s ease-in;\n\n &--ready {\n opacity: 1;\n }\n\n .sd-select-option-placeholder {\n @extend %selectOptionPlaceholder;\n }\n}\n","import { Component, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { SelectOption } from '../sd-select';\n\ntype SelectValue = SelectOption[] | string | number | null;\n\n@Component({\n tag: 'sd-select-dropdown',\n styleUrl: 'sd-select-dropdown.scss',\n})\nexport class SdSelectDropdown {\n @Prop({ mutable: true }) itemIndex!: number;\n @Prop() value: SelectValue = null;\n @Prop() options!: SelectOption[];\n @Prop() width!: string;\n @Prop() dropdownHeight!: string;\n @Prop() searchable!: boolean;\n @Prop() optionPlaceholder!: string;\n @Prop() useCheckbox: boolean = false;\n @Prop() useAll?: boolean = false;\n\n @State() filteredOptions = this.options;\n @State() searchText: string | null = null;\n @State() isScrolled: boolean = false;\n @State() isDropdownReady: boolean = false;\n\n @Event({ eventName: 'sdOptionClick' }) optionClick!: EventEmitter<{\n option: SelectOption;\n index: number;\n event: MouseEvent;\n }>;\n @Event({ eventName: 'sdOptionFiltered' }) optionFiltered!: EventEmitter<SelectOption[]>;\n @Event({ eventName: 'sdScroll' }) scroll!: EventEmitter<Event>;\n\n @Watch('filteredOptions')\n filteredOptionsChanged(newValue: SelectOption[]) {\n this.optionFiltered.emit(newValue);\n }\n\n @Watch('searchText')\n searchTextChanged() {\n this.filterOptions();\n }\n\n @Watch('itemIndex')\n async itemIndexChanged(newIndex: number, oldIndex: number) {\n if (this.searchable) {\n const searchInput = await this.getNativeInputElement();\n if (this.itemIndex === -1) {\n searchInput?.focus({ preventScroll: true });\n return;\n } else if (searchInput?.matches(':focus')) {\n searchInput?.blur();\n }\n }\n\n const optionElements =\n this.dropdownRef?.querySelectorAll('.sd-select-dropdown sd-select-option') || [];\n const currentItem = optionElements?.[this.itemIndex];\n\n if (!currentItem) return;\n\n this.optionRef = currentItem as HTMLSdSelectOptionElement;\n const isOptionDisabled = await this.optionRef.sdIsDisabled();\n\n if (isOptionDisabled) {\n newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;\n return;\n }\n\n this.scrollToOption(currentItem as HTMLElement);\n }\n\n componentWillLoad() {\n this.filteredOptions = this.options;\n\n // DOM 렌더링을 기다리기 위해 이중 requestAnimationFrame 사용 - (레이아웃/스타일 계산 - 페인트 이후)\n requestAnimationFrame(() => {\n requestAnimationFrame(async () => {\n const selectedOptions = this.getSelectedOption();\n\n // 선택된 옵션이 있으면 첫 번째 선택된 항목으로 스크롤\n if (selectedOptions) {\n const selectedIndex = Array.isArray(selectedOptions)\n ? this.options.indexOf(selectedOptions[0])\n : this.options.indexOf(selectedOptions);\n const optionElements = Array.from(\n this.dropdownRef?.querySelectorAll('sd-select-option') || [],\n );\n\n // useAll 사용시 \"전체\" 옵션 포함한 인덱스 사용\n const actualIndex = this.useAll ? selectedIndex + 1 : selectedIndex;\n\n // 선택된 옵션이 화면 가운데에 오도록 index 조정\n const targetIndex = Math.min(actualIndex + 4, optionElements.length - 1);\n const currentItem = optionElements?.[targetIndex];\n\n if (currentItem) {\n this.scrollToOption(currentItem as HTMLElement, 'instant');\n }\n }\n\n this.isDropdownReady = true;\n\n if (this.searchable) {\n const searchInput = await this.getNativeInputElement();\n\n if (searchInput) {\n requestAnimationFrame(() => {\n searchInput.focus({ preventScroll: true });\n });\n }\n }\n });\n });\n }\n\n private dropdownRef?: HTMLElement;\n private searchRef?: HTMLSdSelectSearchInputElement;\n private optionRef?: HTMLSdSelectOptionElement;\n\n private get dropdownSize() {\n return {\n '--select-dropdown-width': this.width || '200px',\n '--select-dropdown-height': this.dropdownHeight || '260px',\n };\n }\n\n private filterOptions() {\n if (!this.searchText || this.searchText.trim() === '') {\n // 검색어가 없으면 전체 옵션 표시\n this.filteredOptions = this.options;\n } else {\n // 검색어가 있으면 필터링\n this.filteredOptions = this.options.filter(option =>\n option.label.toLowerCase().includes(this.searchText!.toLowerCase()),\n );\n }\n }\n\n private getSelectedOption(): SelectOption | SelectOption[] | undefined {\n if (typeof this.value !== 'object') {\n return this.options.find(option => option.value === this.value);\n }\n\n return this.options.filter(option => (this.value as SelectOption[])?.includes(option));\n }\n\n private isOptionSelected(value: SelectValue) {\n if (Array.isArray(this.value)) {\n return this.value.some(selected => selected.value === value);\n }\n return value === this.value;\n }\n\n private async getNativeInputElement(): Promise<HTMLInputElement | null> {\n if (this.searchRef) {\n return this.searchRef.sdGetNativeElement();\n }\n return null;\n }\n\n private scrollToOption(optionElement: HTMLElement, scrollBehavior: ScrollBehavior = 'smooth') {\n if (!this.dropdownRef || !optionElement) return;\n\n const dropdown = this.dropdownRef;\n const optionTop = optionElement.offsetTop;\n const optionHeight = optionElement.offsetHeight;\n const dropdownScrollTop = dropdown.scrollTop;\n const dropdownHeight = dropdown.clientHeight;\n\n const searchContainer = dropdown.querySelector('.sd-select-search-input');\n const searchOffset = searchContainer ? (searchContainer as HTMLElement).offsetHeight : 0;\n\n const visibleTop = dropdownScrollTop + searchOffset;\n const visibleBottom = dropdownScrollTop + dropdownHeight;\n\n if (optionTop < visibleTop) {\n dropdown.scrollTo({ top: optionTop - searchOffset, behavior: scrollBehavior });\n } else if (optionTop + optionHeight > visibleBottom) {\n dropdown.scrollTo({\n top: optionTop + optionHeight - dropdownHeight + searchOffset,\n behavior: scrollBehavior,\n });\n }\n }\n\n private handleDropdownScroll = (event: Event) => {\n const target = event.target as HTMLElement;\n const scrollTop = target.scrollTop;\n\n // 스크롤이 조금이라도 되면 그림자 표시\n this.isScrolled = scrollTop > 0;\n };\n\n render() {\n return (\n <Host style={this.dropdownSize}>\n <div\n class={{\n 'sd-select-dropdown': true,\n 'sd-select-dropdown--ready': this.isDropdownReady,\n }}\n onScroll={this.handleDropdownScroll}\n ref={el => (this.dropdownRef = el)}\n >\n {this.searchable && (\n <sd-select-search-input\n ref={el => (this.searchRef = el)}\n isScrolled={this.isScrolled}\n searchText={this.searchText}\n onSdSearchInput={(event: CustomEvent<string>) => (this.searchText = event.detail || '')}\n onSdSearchFocus={() => (this.itemIndex = -1)}\n ></sd-select-search-input>\n )}\n {this.filteredOptions.length > 0 ? (\n this.filteredOptions.map((option, index) => (\n <slot name={`option-${option.value}`}>\n <sd-select-option\n option={option}\n index={index}\n isSelected={this.isOptionSelected(option.value)}\n isFocused={index === this.itemIndex}\n onOptionClick={({ detail }) => this.optionClick.emit(detail)}\n useCheckbox={this.useCheckbox}\n ></sd-select-option>\n </slot>\n ))\n ) : (\n <slot name=\"option-placeholder\">\n <div class={'sd-select-option-placeholder'}>{this.optionPlaceholder}</div>\n </slot>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -2,14 +2,14 @@ import { p as proxyCustomElement, d as createEvent, h, t as transformTag } from
|
|
|
2
2
|
import { B as BaseDropdownEvent, S as SelectKeyboardNavigation } from './p-Dt-KAeBx.js';
|
|
3
3
|
import { d as defineCustomElement$b } from './p-B-HVIIWo.js';
|
|
4
4
|
import { d as defineCustomElement$a } from './p-ldcuoYNT.js';
|
|
5
|
-
import { d as defineCustomElement$9 } from './p-
|
|
5
|
+
import { d as defineCustomElement$9 } from './p-COJpIimp.js';
|
|
6
6
|
import { d as defineCustomElement$8 } from './p-CmghyzXg.js';
|
|
7
7
|
import { d as defineCustomElement$7 } from './p-Sw7TJWkF.js';
|
|
8
|
-
import { d as defineCustomElement$6 } from './p-
|
|
8
|
+
import { d as defineCustomElement$6 } from './p-B9qGa5dx.js';
|
|
9
9
|
import { d as defineCustomElement$5 } from './p-o-oFeHDX.js';
|
|
10
|
-
import { d as defineCustomElement$4 } from './p-
|
|
10
|
+
import { d as defineCustomElement$4 } from './p-CZ0RizvY.js';
|
|
11
11
|
import { d as defineCustomElement$3 } from './p-BsBjOh8u.js';
|
|
12
|
-
import { d as defineCustomElement$2 } from './p-
|
|
12
|
+
import { d as defineCustomElement$2 } from './p-9E-u4GN-.js';
|
|
13
13
|
import { d as defineCustomElement$1 } from './p-Dtljyq_t.js';
|
|
14
14
|
|
|
15
15
|
const sdSelectCss = () => `sd-select{display:inline-flex;flex-flow:column nowrap;width:fit-content;height:fit-content}sd-select *:focus,sd-select *:focus-visible,sd-select *:focus-within{outline:none !important}sd-select .sd-select{width:100%}sd-select .sd-select .sd-select__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;height:100%;align-items:center}sd-select .sd-select .sd-select__trigger .sd-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select .sd-select .sd-select__trigger .sd-select__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select .sd-select .sd-select__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease;margin-left:8px}sd-select .sd-select .sd-select__arrow--open{transform:rotate(180deg)}`;
|
|
@@ -284,6 +284,6 @@ function defineCustomElement() {
|
|
|
284
284
|
}
|
|
285
285
|
|
|
286
286
|
export { SdSelect as S, defineCustomElement as d };
|
|
287
|
-
//# sourceMappingURL=p-
|
|
287
|
+
//# sourceMappingURL=p-DYLnDz12.js.map
|
|
288
288
|
|
|
289
|
-
//# sourceMappingURL=p-
|
|
289
|
+
//# sourceMappingURL=p-DYLnDz12.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-iBNSlotR.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/sd-select/sd-select.scss?tag=sd-select","src/components/sd-select/sd-select.tsx"],"sourcesContent":["@import 'variables';\n@import 'extend';\n\nsd-select {\n display: inline-flex;\n flex-flow: column nowrap;\n width: fit-content;\n height: fit-content;\n\n *:focus,\n *:focus-visible,\n *:focus-within {\n outline: none !important;\n }\n\n .sd-select {\n width: 100%;\n\n .sd-select__trigger {\n padding: 4px 28px 4px 12px;\n display: flex;\n width: 100%;\n height: 100%;\n align-items: center;\n\n .sd-select__value {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n line-height: 20px;\n font-size: 12px;\n font-weight: 400;\n text-align: left;\n }\n\n .sd-select__clear {\n margin: 0 4px;\n width: 8px;\n height: 8px;\n background-color: transparent;\n outline: none;\n border: none;\n }\n }\n\n .sd-select__arrow {\n position: absolute;\n top: 8px;\n right: 8px;\n width: 12px;\n height: 12px;\n color: $grey_65;\n transition: transform 0.3s ease;\n margin-left: 8px;\n\n &--open {\n transform: rotate(180deg);\n }\n }\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n Prop,\n State,\n h,\n Element,\n Watch,\n Method,\n} from '@stencil/core';\nimport { BaseDropdownEvent } from '../../utils/base-dropdown-event';\nimport { SelectKeyboardNavigation } from '../../utils/select-keyboard-navigation';\nimport { SdTooltipProps } from '../sd-tooltip/sd-tooltip';\nimport { Rule } from '../../components';\n\nexport interface SelectOption {\n value: string | number;\n label: string;\n disabled?: boolean;\n}\n\nexport type SelectGroupOptionType = 'group' | 'subgroup' | 'item' | 'all';\n\nexport interface SelectOptionGroup extends SelectOption {\n type: SelectGroupOptionType;\n parent?: string;\n}\n\nexport interface SelectStyleProps {\n containerStyle?: { [key: string]: string };\n triggerStyle?: { [key: string]: string };\n dropdownStyle?: { [key: string]: string };\n optionStyle?: { [key: string]: string };\n labelStyle?: { [key: string]: string };\n}\n\nexport interface SelectEvents {\n sdUpdate: {\n value: string | number | null;\n option: SelectOption | null;\n };\n dropDownShow: { isOpen: boolean };\n}\n\nexport interface SelectMultipleEvents extends Pick<SelectEvents, 'dropDownShow' | 'dropDownShow'> {\n sdUpdate: SelectOption[] | null;\n}\n\n@Component({\n tag: 'sd-select',\n styleUrl: 'sd-select.scss',\n})\nexport class SdSelect extends BaseDropdownEvent {\n @Element() el!: HTMLElement;\n\n // props\n @Prop({ mutable: true }) value: string | number | null = null;\n @Prop({ mutable: true }) options: SelectOption[] = [];\n @Prop() placeholder: string = '선택';\n @Prop() optionPlaceholder: string = '옵션이 없습니다.';\n @Prop() width: string = '200px';\n @Prop() dropdownHeight: string = '260px';\n @Prop() autoFocus: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() clearable: boolean = false;\n @Prop() searchable: boolean = false;\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 // props - form\n @Prop() name?: string;\n @Prop() rules?: Rule[] = [];\n @Prop() error?: boolean = false;\n\n // props - custom slots\n @Prop() optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;\n\n // states\n @State() isOpen: boolean = false;\n @State() itemIndex: number = -1;\n @State() isScrolled: boolean = false;\n\n // events\n @Event({ eventName: 'sdUpdate' }) update?: EventEmitter<SelectEvents['sdUpdate']>;\n @Event({ eventName: 'sdDropDownShow' }) dropDownShow?: EventEmitter<SelectEvents['dropDownShow']>;\n\n private selectRef?: HTMLElement;\n private triggerRef?: HTMLElement;\n private formField?: HTMLSdFieldElement;\n private filteredOptions = this.options;\n private dropDownWidth: string = this.width;\n\n @Method()\n async sdOpen() {\n this.isOpen = true;\n }\n\n @Method()\n async sdValidate() {\n this.formField?.sdValidate();\n }\n\n @Method()\n async sdReset() {\n this.formField?.sdReset();\n }\n\n @Method()\n async sdResetValidate() {\n this.formField?.sdResetValidation();\n }\n\n @Method()\n async sdFocus() {\n this.formField?.sdFocus();\n }\n\n @Watch('value')\n async valueChanged() {\n const selectedOption = this.getSelectedOption();\n this.update?.emit({ value: selectedOption?.value || null, option: selectedOption || null });\n }\n\n @Watch('isOpen')\n async isOpenChanged() {\n // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지\n this.onDropdownToggle(this.isOpen);\n this.dropDownShow?.emit({ isOpen: this.isOpen });\n\n if (this.isOpen === false) {\n await this.formField?.sdValidate();\n }\n }\n\n componentWillLoad() {\n this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화\n }\n\n componentDidLoad() {\n if (this.autoFocus) {\n this.selectRef?.focus();\n }\n }\n\n // render 이후 label을 제외한 trigger의 너비를 기준으로 dropdown 너비 설정\n componentDidRender() {\n const trigger = this.triggerRef;\n const rect = trigger?.getBoundingClientRect();\n this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;\n }\n\n disconnectedCallback() {\n this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리\n }\n\n protected handleDocumentClick(event: Event): void {\n if (!this.selectRef?.contains(event.target as Node)) {\n this.isOpen = false;\n }\n }\n\n protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void {\n keyboardEvent.stopPropagation();\n const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];\n if (!targetKey.includes(keyboardEvent.key)) return;\n\n keyboardEvent.preventDefault();\n switch (keyboardEvent.key) {\n case 'ArrowDown':\n case 'ArrowUp':\n const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);\n const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);\n this.itemIndex = nextIndex;\n break;\n case 'Enter':\n const selectedOption = this.filteredOptions[this.itemIndex];\n if (selectedOption && !selectedOption.disabled) {\n this.value = selectedOption.value;\n this.isOpen = false;\n }\n break;\n case 'Escape':\n this.isOpen = false;\n break;\n }\n }\n\n private getSelectedOption(): SelectOption | undefined {\n return this.options.find(option => option.value === this.value);\n }\n\n closeDropdown() {\n this.isOpen = false;\n }\n\n handleTriggerClick = (event: Event) => {\n event.stopPropagation();\n\n if (!this.disabled) {\n this.isOpen = !this.isOpen;\n this.dropDownShow?.emit({ isOpen: this.isOpen });\n }\n };\n\n handleOptionClick = (detail: { option: SelectOption; event: Event }) => {\n const { option, event } = detail;\n event.stopPropagation();\n\n if (!option.disabled) {\n this.value = option.value;\n this.isOpen = false;\n }\n };\n\n render() {\n return (\n <sd-field\n label={this.label}\n name={this.name}\n rules={this.rules}\n error={this.error}\n disabled={this.disabled}\n useLabelRequired={this.useLabelRequired}\n insideLabel={this.insideLabel}\n labelTooltip={this.labelTooltip}\n labelTooltipProps={this.labelTooltipProps}\n ref={el => (this.formField = el)}\n style={{ '--field-width': this.width || '200px' }}\n >\n <div\n class={{\n 'sd-select': true,\n 'sd-select--disabled': this.disabled,\n 'sd-select--error': !!this.error,\n 'sd-select--label': !!this.label,\n }}\n ref={el => (this.selectRef = el)}\n >\n {this.renderTrigger()}\n {this.renderDropdown()}\n </div>\n </sd-field>\n );\n }\n\n private renderTrigger() {\n const selectedOption = this.getSelectedOption();\n return (\n <div\n class=\"sd-select__trigger\"\n tabindex={this.disabled ? -1 : 0}\n onClick={this.handleTriggerClick}\n ref={el => (this.triggerRef = el)}\n >\n <span class=\"sd-select__value\">{selectedOption ? selectedOption.label : this.placeholder}</span>\n {this.clearable && selectedOption && !this.disabled && (\n <sd-icon\n key=\"clear-icon\"\n name=\"close\"\n size={10}\n color=\"#888\"\n class=\"sd-select__clear\"\n onClick={async event => {\n event.stopPropagation();\n this.value = null;\n await this.formField?.sdValidate();\n }}\n ></sd-icon>\n )}\n\n <sd-icon\n key=\"arrow-icon\"\n name=\"arrowDown\"\n color=\"#888\"\n class={{ 'sd-select__arrow': true, 'sd-select__arrow--open': this.isOpen }}\n ></sd-icon>\n </div>\n );\n }\n\n private renderDropdown() {\n if (this.isOpen === false) return null;\n\n const parentRef = (this.selectRef?.querySelector('.sd-select__trigger') ||\n this.selectRef) as HTMLElement;\n\n return (\n <sd-portal open={this.isOpen} parentRef={parentRef} onSdClose={this.closeDropdown}>\n <sd-select-dropdown\n value={this.value}\n options={this.options}\n itemIndex={this.itemIndex}\n width={this.dropDownWidth}\n dropdownHeight={this.dropdownHeight}\n searchable={this.searchable}\n optionPlaceholder={this.optionPlaceholder}\n onSdOptionClick={({ detail }) => this.handleOptionClick(detail)}\n onSdOptionFiltered={({ detail }) => (this.filteredOptions = detail)}\n ></sd-select-dropdown>\n </sd-portal>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"p-DYLnDz12.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/sd-select/sd-select.scss?tag=sd-select","src/components/sd-select/sd-select.tsx"],"sourcesContent":["@import 'variables';\n@import 'extend';\n\nsd-select {\n display: inline-flex;\n flex-flow: column nowrap;\n width: fit-content;\n height: fit-content;\n\n *:focus,\n *:focus-visible,\n *:focus-within {\n outline: none !important;\n }\n\n .sd-select {\n width: 100%;\n\n .sd-select__trigger {\n padding: 4px 28px 4px 12px;\n display: flex;\n width: 100%;\n height: 100%;\n align-items: center;\n\n .sd-select__value {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n line-height: 20px;\n font-size: 12px;\n font-weight: 400;\n text-align: left;\n }\n\n .sd-select__clear {\n margin: 0 4px;\n width: 8px;\n height: 8px;\n background-color: transparent;\n outline: none;\n border: none;\n }\n }\n\n .sd-select__arrow {\n position: absolute;\n top: 8px;\n right: 8px;\n width: 12px;\n height: 12px;\n color: $grey_65;\n transition: transform 0.3s ease;\n margin-left: 8px;\n\n &--open {\n transform: rotate(180deg);\n }\n }\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n Prop,\n State,\n h,\n Element,\n Watch,\n Method,\n} from '@stencil/core';\nimport { BaseDropdownEvent } from '../../utils/base-dropdown-event';\nimport { SelectKeyboardNavigation } from '../../utils/select-keyboard-navigation';\nimport { SdTooltipProps } from '../sd-tooltip/sd-tooltip';\nimport { Rule } from '../../components';\n\nexport interface SelectOption {\n value: string | number;\n label: string;\n disabled?: boolean;\n}\n\nexport type SelectGroupOptionType = 'group' | 'subgroup' | 'item' | 'all';\n\nexport interface SelectOptionGroup extends SelectOption {\n type: SelectGroupOptionType;\n parent?: string;\n}\n\nexport interface SelectStyleProps {\n containerStyle?: { [key: string]: string };\n triggerStyle?: { [key: string]: string };\n dropdownStyle?: { [key: string]: string };\n optionStyle?: { [key: string]: string };\n labelStyle?: { [key: string]: string };\n}\n\nexport interface SelectEvents {\n sdUpdate: {\n value: string | number | null;\n option: SelectOption | null;\n };\n dropDownShow: { isOpen: boolean };\n}\n\nexport interface SelectMultipleEvents extends Pick<SelectEvents, 'dropDownShow' | 'dropDownShow'> {\n sdUpdate: SelectOption[] | null;\n}\n\n@Component({\n tag: 'sd-select',\n styleUrl: 'sd-select.scss',\n})\nexport class SdSelect extends BaseDropdownEvent {\n @Element() el!: HTMLElement;\n\n // props\n @Prop({ mutable: true }) value: string | number | null = null;\n @Prop({ mutable: true }) options: SelectOption[] = [];\n @Prop() placeholder: string = '선택';\n @Prop() optionPlaceholder: string = '옵션이 없습니다.';\n @Prop() width: string = '200px';\n @Prop() dropdownHeight: string = '260px';\n @Prop() autoFocus: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() clearable: boolean = false;\n @Prop() searchable: boolean = false;\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 // props - form\n @Prop() name?: string;\n @Prop() rules?: Rule[] = [];\n @Prop() error?: boolean = false;\n\n // props - custom slots\n @Prop() optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;\n\n // states\n @State() isOpen: boolean = false;\n @State() itemIndex: number = -1;\n @State() isScrolled: boolean = false;\n\n // events\n @Event({ eventName: 'sdUpdate' }) update?: EventEmitter<SelectEvents['sdUpdate']>;\n @Event({ eventName: 'sdDropDownShow' }) dropDownShow?: EventEmitter<SelectEvents['dropDownShow']>;\n\n private selectRef?: HTMLElement;\n private triggerRef?: HTMLElement;\n private formField?: HTMLSdFieldElement;\n private filteredOptions = this.options;\n private dropDownWidth: string = this.width;\n\n @Method()\n async sdOpen() {\n this.isOpen = true;\n }\n\n @Method()\n async sdValidate() {\n this.formField?.sdValidate();\n }\n\n @Method()\n async sdReset() {\n this.formField?.sdReset();\n }\n\n @Method()\n async sdResetValidate() {\n this.formField?.sdResetValidation();\n }\n\n @Method()\n async sdFocus() {\n this.formField?.sdFocus();\n }\n\n @Watch('value')\n async valueChanged() {\n const selectedOption = this.getSelectedOption();\n this.update?.emit({ value: selectedOption?.value || null, option: selectedOption || null });\n }\n\n @Watch('isOpen')\n async isOpenChanged() {\n // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지\n this.onDropdownToggle(this.isOpen);\n this.dropDownShow?.emit({ isOpen: this.isOpen });\n\n if (this.isOpen === false) {\n await this.formField?.sdValidate();\n }\n }\n\n componentWillLoad() {\n this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화\n }\n\n componentDidLoad() {\n if (this.autoFocus) {\n this.selectRef?.focus();\n }\n }\n\n // render 이후 label을 제외한 trigger의 너비를 기준으로 dropdown 너비 설정\n componentDidRender() {\n const trigger = this.triggerRef;\n const rect = trigger?.getBoundingClientRect();\n this.dropDownWidth = rect?.width ? `${rect.width}px` : this.width;\n }\n\n disconnectedCallback() {\n this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리\n }\n\n protected handleDocumentClick(event: Event): void {\n if (!this.selectRef?.contains(event.target as Node)) {\n this.isOpen = false;\n }\n }\n\n protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void {\n keyboardEvent.stopPropagation();\n const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];\n if (!targetKey.includes(keyboardEvent.key)) return;\n\n keyboardEvent.preventDefault();\n switch (keyboardEvent.key) {\n case 'ArrowDown':\n case 'ArrowUp':\n const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);\n const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);\n this.itemIndex = nextIndex;\n break;\n case 'Enter':\n const selectedOption = this.filteredOptions[this.itemIndex];\n if (selectedOption && !selectedOption.disabled) {\n this.value = selectedOption.value;\n this.isOpen = false;\n }\n break;\n case 'Escape':\n this.isOpen = false;\n break;\n }\n }\n\n private getSelectedOption(): SelectOption | undefined {\n return this.options.find(option => option.value === this.value);\n }\n\n closeDropdown() {\n this.isOpen = false;\n }\n\n handleTriggerClick = (event: Event) => {\n event.stopPropagation();\n\n if (!this.disabled) {\n this.isOpen = !this.isOpen;\n this.dropDownShow?.emit({ isOpen: this.isOpen });\n }\n };\n\n handleOptionClick = (detail: { option: SelectOption; event: Event }) => {\n const { option, event } = detail;\n event.stopPropagation();\n\n if (!option.disabled) {\n this.value = option.value;\n this.isOpen = false;\n }\n };\n\n render() {\n return (\n <sd-field\n label={this.label}\n name={this.name}\n rules={this.rules}\n error={this.error}\n disabled={this.disabled}\n useLabelRequired={this.useLabelRequired}\n insideLabel={this.insideLabel}\n labelTooltip={this.labelTooltip}\n labelTooltipProps={this.labelTooltipProps}\n ref={el => (this.formField = el)}\n style={{ '--field-width': this.width || '200px' }}\n >\n <div\n class={{\n 'sd-select': true,\n 'sd-select--disabled': this.disabled,\n 'sd-select--error': !!this.error,\n 'sd-select--label': !!this.label,\n }}\n ref={el => (this.selectRef = el)}\n >\n {this.renderTrigger()}\n {this.renderDropdown()}\n </div>\n </sd-field>\n );\n }\n\n private renderTrigger() {\n const selectedOption = this.getSelectedOption();\n return (\n <div\n class=\"sd-select__trigger\"\n tabindex={this.disabled ? -1 : 0}\n onClick={this.handleTriggerClick}\n ref={el => (this.triggerRef = el)}\n >\n <span class=\"sd-select__value\">{selectedOption ? selectedOption.label : this.placeholder}</span>\n {this.clearable && selectedOption && !this.disabled && (\n <sd-icon\n key=\"clear-icon\"\n name=\"close\"\n size={10}\n color=\"#888\"\n class=\"sd-select__clear\"\n onClick={async event => {\n event.stopPropagation();\n this.value = null;\n await this.formField?.sdValidate();\n }}\n ></sd-icon>\n )}\n\n <sd-icon\n key=\"arrow-icon\"\n name=\"arrowDown\"\n color=\"#888\"\n class={{ 'sd-select__arrow': true, 'sd-select__arrow--open': this.isOpen }}\n ></sd-icon>\n </div>\n );\n }\n\n private renderDropdown() {\n if (this.isOpen === false) return null;\n\n const parentRef = (this.selectRef?.querySelector('.sd-select__trigger') ||\n this.selectRef) as HTMLElement;\n\n return (\n <sd-portal open={this.isOpen} parentRef={parentRef} onSdClose={this.closeDropdown}>\n <sd-select-dropdown\n value={this.value}\n options={this.options}\n itemIndex={this.itemIndex}\n width={this.dropDownWidth}\n dropdownHeight={this.dropdownHeight}\n searchable={this.searchable}\n optionPlaceholder={this.optionPlaceholder}\n onSdOptionClick={({ detail }) => this.handleOptionClick(detail)}\n onSdOptionFiltered={({ detail }) => (this.filteredOptions = detail)}\n ></sd-select-dropdown>\n </sd-portal>\n );\n }\n}\n"],"version":3}
|
|
@@ -2,10 +2,10 @@ import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transf
|
|
|
2
2
|
import { u as useDatePicker, t as today } from './p-QZbqqKSO.js';
|
|
3
3
|
import { d as defineCustomElement$9 } from './p-B-HVIIWo.js';
|
|
4
4
|
import { d as defineCustomElement$8 } from './p-DlJtPR_C.js';
|
|
5
|
-
import { d as defineCustomElement$7 } from './p-
|
|
5
|
+
import { d as defineCustomElement$7 } from './p-COJpIimp.js';
|
|
6
6
|
import { d as defineCustomElement$6 } from './p-CmghyzXg.js';
|
|
7
7
|
import { d as defineCustomElement$5 } from './p-Sw7TJWkF.js';
|
|
8
|
-
import { d as defineCustomElement$4 } from './p-
|
|
8
|
+
import { d as defineCustomElement$4 } from './p-B9qGa5dx.js';
|
|
9
9
|
import { d as defineCustomElement$3 } from './p-o-oFeHDX.js';
|
|
10
10
|
import { d as defineCustomElement$2 } from './p-Dtljyq_t.js';
|
|
11
11
|
|