@sellmate/design-system 0.0.55 → 0.0.56
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/design-system.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/sd-button_24.cjs.entry.js +32 -32
- package/dist/cjs/sd-card.cjs.entry.js +3 -3
- package/dist/cjs/sd-date-picker.cjs.entry.js +1 -1
- package/dist/cjs/sd-date-range-picker.cjs.entry.js +2 -2
- package/dist/cjs/sd-popover.cjs.entry.js +2 -2
- package/dist/cjs/sd-progress.cjs.entry.js +2 -2
- package/dist/cjs/sd-select-multiple.cjs.entry.js +2 -2
- package/dist/cjs/sd-tbody_3.cjs.entry.js +3 -3
- package/dist/cjs/sd-td.cjs.entry.js +2 -2
- package/dist/collection/components/sd-card/sd-card.css +1 -4
- package/dist/collection/components/sd-card/sd-card.js +6 -6
- package/dist/collection/components/sd-card/sd-card.js.map +1 -1
- package/dist/collection/components/sd-date-picker/sd-date-picker.js +1 -1
- package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.js +2 -2
- package/dist/collection/components/sd-file-picker/sd-file-picker.js +3 -3
- package/dist/collection/components/sd-guide/sd-guide.js +2 -2
- package/dist/collection/components/sd-icon/sd-icon.js +1 -1
- package/dist/collection/components/sd-input/sd-input.js +4 -4
- package/dist/collection/components/sd-loading-spinner/sd-loading-spinner.js +1 -1
- package/dist/collection/components/sd-number-input/sd-number-input.js +4 -4
- package/dist/collection/components/sd-pagination/sd-pagination.js +2 -2
- package/dist/collection/components/sd-popover/sd-popover.js +2 -2
- package/dist/collection/components/sd-portal/sd-portal.js +1 -1
- package/dist/collection/components/sd-progress/sd-progress.js +2 -2
- package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js +1 -1
- package/dist/collection/components/sd-select/sd-select-search-input/sd-select-search-input.js +3 -3
- package/dist/collection/components/sd-select-multiple/sd-select-multiple.js +2 -2
- package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js +3 -3
- package/dist/collection/components/sd-table/sd-tbody/sd-tbody.js +1 -1
- package/dist/collection/components/sd-table/sd-td/sd-td.js +2 -2
- package/dist/collection/components/sd-table/sd-th/sd-th.js +1 -1
- package/dist/collection/components/sd-table/sd-tr/sd-tr.js +1 -1
- package/dist/collection/components/sd-toggle/sd-toggle.js +1 -1
- package/dist/collection/components/sd-toggle-button/sd-toggle-button.js +1 -1
- package/dist/collection/components/sd-tooltip/sd-tooltip.js +4 -4
- package/dist/collection/components/sd-tooltip-portal/sd-tooltip-portal.js +1 -1
- package/dist/components/{p-BLidMbc_.js → p-6qJVnQg4.js} +3 -3
- package/dist/components/{p-BLidMbc_.js.map → p-6qJVnQg4.js.map} +1 -1
- package/dist/components/{p-D5BkkT2U.js → p-B8yBkdjE.js} +3 -3
- package/dist/components/{p-D5BkkT2U.js.map → p-B8yBkdjE.js.map} +1 -1
- package/dist/components/{p-vhe6g4Qt.js → p-BHHbLFXg.js} +3 -3
- package/dist/components/{p-vhe6g4Qt.js.map → p-BHHbLFXg.js.map} +1 -1
- package/dist/components/{p-DRGcUx0C.js → p-BREduhZA.js} +5 -5
- package/dist/components/{p-DRGcUx0C.js.map → p-BREduhZA.js.map} +1 -1
- package/dist/components/{p-CKhzpdPk.js → p-Bj4u0G5b.js} +3 -3
- package/dist/components/{p-CKhzpdPk.js.map → p-Bj4u0G5b.js.map} +1 -1
- package/dist/components/{p-CfKJNKMH.js → p-C4kdHNdl.js} +7 -7
- package/dist/components/{p-CfKJNKMH.js.map → p-C4kdHNdl.js.map} +1 -1
- package/dist/components/{p-njRAT-yp.js → p-C5U6Otnl.js} +3 -3
- package/dist/components/{p-njRAT-yp.js.map → p-C5U6Otnl.js.map} +1 -1
- package/dist/components/{p-DD9g6GYA.js → p-CNrsaSqW.js} +3 -3
- package/dist/components/{p-DD9g6GYA.js.map → p-CNrsaSqW.js.map} +1 -1
- package/dist/components/{p-nqDJZ_gy.js → p-CfivfPAO.js} +3 -3
- package/dist/components/{p-nqDJZ_gy.js.map → p-CfivfPAO.js.map} +1 -1
- package/dist/components/{p-DMqinLuj.js → p-D8KGixEs.js} +8 -8
- package/dist/components/{p-DMqinLuj.js.map → p-D8KGixEs.js.map} +1 -1
- package/dist/components/{p-BESbtjDi.js → p-DLrb7Zq3.js} +3 -3
- package/dist/components/{p-BESbtjDi.js.map → p-DLrb7Zq3.js.map} +1 -1
- package/dist/components/{p-DroKiQ6J.js → p-K42WRBPA.js} +9 -9
- package/dist/components/{p-DroKiQ6J.js.map → p-K42WRBPA.js.map} +1 -1
- package/dist/components/{p-CWwMpVqI.js → p-O3tgQfvT.js} +5 -5
- package/dist/components/{p-CWwMpVqI.js.map → p-O3tgQfvT.js.map} +1 -1
- package/dist/components/{p-QNYqIsvU.js → p-QpwY2yqY.js} +7 -7
- package/dist/components/{p-QNYqIsvU.js.map → p-QpwY2yqY.js.map} +1 -1
- package/dist/components/{p-MRYVk6Qh.js → p-w5tohH2H.js} +7 -7
- package/dist/components/{p-MRYVk6Qh.js.map → p-w5tohH2H.js.map} +1 -1
- package/dist/components/{p-DKoWHxRI.js → p-xme-KFvK.js} +3 -3
- package/dist/components/{p-DKoWHxRI.js.map → p-xme-KFvK.js.map} +1 -1
- package/dist/components/sd-button.js +1 -1
- package/dist/components/sd-card.js +4 -4
- package/dist/components/sd-card.js.map +1 -1
- package/dist/components/sd-checkbox.js +1 -1
- package/dist/components/sd-date-picker.js +4 -4
- package/dist/components/sd-date-range-picker.js +5 -5
- package/dist/components/sd-file-picker.js +4 -4
- package/dist/components/sd-guide.js +5 -5
- package/dist/components/sd-icon.js +1 -1
- package/dist/components/sd-input.js +1 -1
- package/dist/components/sd-loading-spinner.js +1 -1
- package/dist/components/sd-modal-card.js +2 -2
- package/dist/components/sd-number-input.js +5 -5
- package/dist/components/sd-pagination.js +1 -1
- package/dist/components/sd-popover.js +5 -5
- package/dist/components/sd-portal.js +1 -1
- package/dist/components/sd-progress.js +2 -2
- package/dist/components/sd-select-multiple-group.js +6 -6
- package/dist/components/sd-select-multiple.js +7 -7
- package/dist/components/sd-select-option-group.js +1 -1
- package/dist/components/sd-select-option.js +1 -1
- package/dist/components/sd-select-search-input.js +1 -1
- package/dist/components/sd-select.js +1 -1
- package/dist/components/sd-table-backup.js +12 -12
- package/dist/components/sd-table.js +14 -14
- package/dist/components/sd-tbody.js +1 -1
- package/dist/components/sd-td.js +2 -2
- package/dist/components/sd-th.js +1 -1
- package/dist/components/sd-toast-message.js +2 -2
- package/dist/components/sd-toggle-button.js +1 -1
- package/dist/components/sd-toggle.js +1 -1
- package/dist/components/sd-tooltip-portal.js +1 -1
- package/dist/components/sd-tooltip.js +1 -1
- package/dist/components/sd-tr.js +1 -1
- package/dist/design-system/design-system.esm.js +1 -1
- package/dist/design-system/p-0893dbd0.entry.js +2 -0
- package/dist/design-system/{p-5acdd14a.entry.js → p-2633690f.entry.js} +2 -2
- package/dist/design-system/p-5576f0f0.entry.js +2 -0
- package/dist/design-system/{p-0d2814dc.entry.js → p-7ca988ab.entry.js} +2 -2
- package/dist/design-system/p-a7bdb6ba.entry.js +2 -0
- package/dist/design-system/{p-7b94b34e.entry.js → p-b5720c60.entry.js} +2 -2
- package/dist/design-system/{p-e5065700.entry.js → p-bdd9afaf.entry.js} +2 -2
- package/dist/design-system/p-ddfe63b8.entry.js +2 -0
- package/dist/design-system/p-ddfe63b8.entry.js.map +1 -0
- package/dist/design-system/{p-665c5c48.entry.js → p-e180c69c.entry.js} +2 -2
- package/dist/esm/design-system.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/sd-button_24.entry.js +32 -32
- package/dist/esm/sd-card.entry.js +3 -3
- package/dist/esm/sd-card.entry.js.map +1 -1
- package/dist/esm/sd-date-picker.entry.js +1 -1
- package/dist/esm/sd-date-range-picker.entry.js +2 -2
- package/dist/esm/sd-popover.entry.js +2 -2
- package/dist/esm/sd-progress.entry.js +2 -2
- package/dist/esm/sd-select-multiple.entry.js +2 -2
- package/dist/esm/sd-tbody_3.entry.js +3 -3
- package/dist/esm/sd-td.entry.js +2 -2
- package/dist/types/components/sd-card/sd-card.d.ts +1 -1
- package/dist/types/components.d.ts +2 -2
- package/hydrate/index.js +50 -50
- package/hydrate/index.mjs +50 -50
- package/package.json +2 -2
- package/dist/design-system/p-2c57bdea.entry.js +0 -2
- package/dist/design-system/p-3bc4effa.entry.js +0 -2
- package/dist/design-system/p-3bc4effa.entry.js.map +0 -1
- package/dist/design-system/p-97b271a7.entry.js +0 -2
- package/dist/design-system/p-fc3580fd.entry.js +0 -2
- /package/dist/design-system/{p-fc3580fd.entry.js.map → p-0893dbd0.entry.js.map} +0 -0
- /package/dist/design-system/{p-5acdd14a.entry.js.map → p-2633690f.entry.js.map} +0 -0
- /package/dist/design-system/{p-2c57bdea.entry.js.map → p-5576f0f0.entry.js.map} +0 -0
- /package/dist/design-system/{p-0d2814dc.entry.js.map → p-7ca988ab.entry.js.map} +0 -0
- /package/dist/design-system/{p-97b271a7.entry.js.map → p-a7bdb6ba.entry.js.map} +0 -0
- /package/dist/design-system/{p-7b94b34e.entry.js.map → p-b5720c60.entry.js.map} +0 -0
- /package/dist/design-system/{p-e5065700.entry.js.map → p-bdd9afaf.entry.js.map} +0 -0
- /package/dist/design-system/{p-665c5c48.entry.js.map → p-e180c69c.entry.js.map} +0 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-CQBrru3e.js';
|
|
2
2
|
import { r as resolveColor } from './p-BYf-ybt2.js';
|
|
3
|
-
import { d as defineCustomElement$1 } from './p-
|
|
3
|
+
import { d as defineCustomElement$1 } from './p-BHHbLFXg.js';
|
|
4
4
|
|
|
5
5
|
const sdButtonCss = () => `sd-button{display:inline-block;width:fit-content;height:fit-content}.sd-button{text-decoration:none;cursor:pointer;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}.sd-button--xs{padding:0 8px;font-size:12px;font-weight:500;line-height:20px;min-height:24px}.sd-button--sm{padding:0 12px;font-size:12px;font-weight:500;line-height:20px;min-height:28px}.sd-button--md{padding:0 20px;font-size:16px;font-weight:500;line-height:26px;min-height:34px}.sd-button--lg{padding:0 28px;font-size:18px;font-weight:500;line-height:30px;min-height:62px}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:"";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:1px solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:1px solid #cccccc;background:#e1e1e1;color:#888888;cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:fit-content;height:fit-content;aspect-ratio:1/1}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:4px;z-index:1;font-weight:500}`;
|
|
6
6
|
|
|
@@ -97,6 +97,6 @@ function defineCustomElement() {
|
|
|
97
97
|
}
|
|
98
98
|
|
|
99
99
|
export { SdButton as S, defineCustomElement as d };
|
|
100
|
-
//# sourceMappingURL=p-
|
|
100
|
+
//# sourceMappingURL=p-DLrb7Zq3.js.map
|
|
101
101
|
|
|
102
|
-
//# sourceMappingURL=p-
|
|
102
|
+
//# sourceMappingURL=p-DLrb7Zq3.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-DLrb7Zq3.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-button/sd-button.scss?tag=sd-button","src/components/sd-button/sd-button.tsx"],"sourcesContent":["@import 'variables';\n\nsd-button {\n display: inline-block;\n width: fit-content;\n height: fit-content;\n}\n\n.sd-button {\n text-decoration: none;\n cursor: pointer;\n border-radius: 4px;\n transition: all 0.2s ease-in-out;\n position: relative;\n overflow: hidden;\n white-space: nowrap;\n -webkit-user-select: none;\n user-select: none;\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n &--xs {\n padding: 0 8px;\n font-size: 12px;\n font-weight: 500;\n line-height: 20px;\n min-height: 24px;\n }\n &--sm {\n padding: 0 12px;\n font-size: 12px;\n font-weight: 500;\n line-height: 20px;\n min-height: 28px;\n }\n &--md {\n padding: 0 20px;\n font-size: 16px;\n font-weight: 500;\n line-height: 26px;\n min-height: 34px;\n }\n &--lg {\n padding: 0 28px;\n font-size: 18px;\n font-weight: 500;\n line-height: 30px;\n min-height: 62px;\n }\n &--primary {\n background-color: var(--button-color);\n color: white;\n transition: filter 0.2s ease;\n\n &::before {\n content: '';\n position: absolute;\n inset: 0;\n background: #000000;\n opacity: 0;\n transition: opacity 0.2s ease;\n z-index: 0;\n }\n\n &:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {\n opacity: 0.25;\n }\n }\n\n &--outline {\n background: white;\n border: 1px solid var(--button-color);\n color: var(--button-color);\n\n &::before {\n content: '';\n position: absolute;\n inset: 0;\n background: var(--button-color);\n opacity: 0;\n transition: opacity 0.2s ease;\n z-index: 0;\n }\n\n &:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {\n opacity: 0.15;\n }\n\n .sd-button__content {\n position: relative;\n z-index: 1;\n }\n }\n &--ghost {\n background-color: transparent;\n color: var(--button-color);\n border-color: transparent;\n\n &::before {\n content: '';\n position: absolute;\n inset: 0;\n background: var(--button-color);\n opacity: 0;\n transition: opacity 0.2s ease;\n z-index: 0;\n }\n\n &:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {\n opacity: 0.15;\n }\n\n .sd-button__content {\n position: relative;\n z-index: 1;\n }\n }\n &--disabled {\n border: 1px solid $grey_45;\n background: $grey_30;\n color: $grey_65;\n cursor: not-allowed !important;\n }\n &--icon-only {\n padding: 0;\n width: fit-content;\n height: fit-content;\n aspect-ratio: 1 / 1;\n }\n &--no-hover {\n &:hover::before {\n opacity: 0 !important;\n }\n }\n\n .sd-button__content {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n\n z-index: 1;\n font-weight: 500;\n }\n}\n\n// /* Focus styles */\n// .sd-button:focus-visible {\n// outline: 2px solid $primary;\n// outline-offset: 2px;\n// }\n\n// /* High contrast mode support */\n// @media (prefers-contrast: high) {\n// .sd-button {\n// border-width: 2px;\n// }\n// }\n","import { Component, Prop, h, Element, Event, EventEmitter, Host } from '@stencil/core';\nimport { resolveColor } from '../../utils/color';\n\nexport type ButtonVariant = 'primary' | 'outline' | 'ghost';\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';\n\nconst ICON_SIZES: { [key in ButtonSize]: number } = {\n xs: 12,\n sm: 16,\n md: 20,\n lg: 24,\n};\n\n@Component({\n tag: 'sd-button',\n styleUrl: 'sd-button.scss',\n})\nexport class SdButton {\n @Element() el!: HTMLElement;\n\n @Prop() variant?: ButtonVariant = 'primary';\n @Prop() size: ButtonSize = 'sm';\n @Prop() color: string = '#025497';\n @Prop() label: string = '';\n @Prop() disabled: boolean = false;\n @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n @Prop() icon?: IconName;\n @Prop() iconColor?: string;\n @Prop() iconSize?: number;\n @Prop() iconRight?: IconName;\n @Prop() noHover: boolean = false;\n @Prop() class: string = '';\n @Event() sdClick!: EventEmitter<MouseEvent>;\n\n private handleClick = (event: MouseEvent) => {\n if (this.disabled) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n this.sdClick.emit(event);\n };\n\n private getButtonClasses(): string {\n const classes = ['sd-button'];\n\n classes.push(`sd-button--${this.variant}`);\n classes.push(`sd-button--${this.size}`);\n classes.push(`sd-button--color-${this.color}`);\n\n if (this.disabled) {\n classes.push('sd-button--disabled');\n }\n\n if (!this.label && (this.icon || this.iconRight)) {\n classes.push('sd-button--icon-only');\n }\n\n if (this.noHover) {\n classes.push('sd-button--no-hover');\n }\n\n return classes.join(' ');\n }\n\n render() {\n const buttonClasses = this.getButtonClasses();\n // 유틸로 색상 키 -> HEX 매핑 (없으면 원본 그대로)\n const resolvedColor = resolveColor(this.color);\n\n return (\n <Host style={{ '--button-color': resolvedColor }} disabled={this.disabled}>\n <button\n class={`${buttonClasses} ${this.class}`}\n type={this.type}\n disabled={this.disabled}\n onClick={this.handleClick}\n >\n <div class=\"sd-button__content\">\n {this.icon && (\n <sd-icon\n class=\"sd-button__icon sd-button__icon--left\"\n name={this.icon}\n size={this.iconSize ?? ICON_SIZES[this.size!]}\n color={\n this.iconColor ?? (this.variant === 'primary' ? '#fff' : resolvedColor)\n }\n ></sd-icon>\n )}\n\n {this.label && <div class=\"sd-button__label\">{this.label}</div>}\n\n {this.iconRight && (\n <sd-icon\n class=\"sd-button__icon sd-button__icon--right\"\n name={this.iconRight}\n size={ICON_SIZES[this.size!]}\n color={this.variant === 'primary' ? '#fff' : resolvedColor}\n ></sd-icon>\n )}\n </div>\n </button>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h, F as Fragment, t as transformTag } from './p-CQBrru3e.js';
|
|
2
2
|
import { T as TooltipArrow } from './p-BDkKpeVz.js';
|
|
3
|
-
import { d as defineCustomElement$3 } from './p-
|
|
4
|
-
import { d as defineCustomElement$2 } from './p-
|
|
5
|
-
import { d as defineCustomElement$1 } from './p-
|
|
3
|
+
import { d as defineCustomElement$3 } from './p-DLrb7Zq3.js';
|
|
4
|
+
import { d as defineCustomElement$2 } from './p-BHHbLFXg.js';
|
|
5
|
+
import { d as defineCustomElement$1 } from './p-C5U6Otnl.js';
|
|
6
6
|
|
|
7
7
|
const sdTooltipCss = () => `sd-tooltip [slot=content]{display:none}sd-tooltip .sd-tooltip{position:relative;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.sd-tooltip-menu{width:fit-content;padding:8px 16px;border-radius:4px;font-size:12px;position:relative;box-sizing:border-box;display:flex;align-items:start;justify-content:center;gap:12px}.sd-tooltip-menu--with-close{padding-right:12px !important}.sd-tooltip-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-tooltip-menu__arrow svg{width:100%;height:100%}.sd-tooltip-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-tooltip-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-tooltip-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-tooltip-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-tooltip-menu__content{line-height:20px;font-weight:500}.sd-tooltip-menu__content p{margin:0}.sd-tooltip-menu__close-button{padding-top:4px;display:flex}.sd-tooltip-menu__close-button button{padding:0;background:none;border:none;cursor:pointer}`;
|
|
8
8
|
|
|
@@ -55,20 +55,20 @@ const SdTooltip = /*@__PURE__*/ proxyCustomElement(class SdTooltip extends H {
|
|
|
55
55
|
: {
|
|
56
56
|
onClick: () => (this.showTooltip = !this.showTooltip),
|
|
57
57
|
};
|
|
58
|
-
return (h(Fragment, { key: '
|
|
58
|
+
return (h(Fragment, { key: '1016ad941100e902068b5a7d7773a2dbf7ab0667' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (h("sd-tooltip-portal", { key: '8370b55d3bafa7a5ca429ee17c7555cfdb9e51a2', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, h("div", { key: '94a8d13f88050792b3e307901c2545995d92fdaf', class: {
|
|
59
59
|
'sd-tooltip-menu': true,
|
|
60
60
|
[`sd-tooltip-menu--${this.type}`]: true,
|
|
61
61
|
[`sd-tooltip-menu--${this.placement}`]: true,
|
|
62
62
|
'sd-tooltip-menu--with-close': this.useClose,
|
|
63
63
|
[`bg-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
|
|
64
64
|
[`text-${SdTooltip.COLOR_OF_TYPE[this.type].text}`]: true,
|
|
65
|
-
} }, h("i", { key: '
|
|
65
|
+
} }, h("i", { key: 'b13f215dc7f51af86e7748a0ac565f62cbd936ef', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'a043ccc525e18baed8c9b4d5cdd7651c4600b4e4', class: {
|
|
66
66
|
[`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
|
|
67
|
-
} })), h("div", { key: '
|
|
67
|
+
} })), h("div", { key: '60e67cc4620b07153a8cef098446e0a292f08230', class: "sd-tooltip-menu__content", ref: el => {
|
|
68
68
|
if (el && this.slotContent && !el.hasChildNodes()) {
|
|
69
69
|
el.appendChild(this.slotContent.cloneNode(true));
|
|
70
70
|
}
|
|
71
|
-
} }, !this.slotContent && h("span", { key: '
|
|
71
|
+
} }, !this.slotContent && h("span", { key: 'e2e2afd2e2607be01d474c9329cd15b280214cd0' }, this.el.textContent)), this.useClose && (h("div", { key: '25962f34a91f8838e32c25529cacf048b2bbcf6b', class: "sd-tooltip-menu__close-button" }, h("button", { key: '5e37a4c9bace03a0c2a26edb0125ac0f25c65784', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, h("sd-icon", { key: 'ed7c97b16a507b8fad10d58f4e5a38061517b88a', name: "close", size: "12", color: "#AAAAAA" })))))))));
|
|
72
72
|
}
|
|
73
73
|
static get style() { return sdTooltipCss(); }
|
|
74
74
|
}, [768, "sd-tooltip", {
|
|
@@ -116,6 +116,6 @@ function defineCustomElement() {
|
|
|
116
116
|
}
|
|
117
117
|
|
|
118
118
|
export { SdTooltip as S, defineCustomElement as d };
|
|
119
|
-
//# sourceMappingURL=p-
|
|
119
|
+
//# sourceMappingURL=p-K42WRBPA.js.map
|
|
120
120
|
|
|
121
|
-
//# sourceMappingURL=p-
|
|
121
|
+
//# sourceMappingURL=p-K42WRBPA.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-K42WRBPA.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-tooltip/sd-tooltip.scss?tag=sd-tooltip","src/components/sd-tooltip/sd-tooltip.tsx"],"sourcesContent":["sd-tooltip {\n [slot='content'] {\n display: none;\n }\n\n .sd-tooltip {\n position: relative;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n}\n\n.sd-tooltip-menu {\n width: fit-content;\n padding: 8px 16px;\n border-radius: 4px;\n font-size: 12px;\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: start;\n justify-content: center;\n gap: 12px;\n\n &--with-close {\n padding-right: 12px !important;\n }\n\n &__arrow {\n position: absolute;\n display: flex;\n width: 9.6px;\n height: 7.2px;\n svg {\n width: 100%;\n height: 100%;\n }\n &--top {\n bottom: -7.2px;\n left: 50%;\n transform: translateX(-50%);\n }\n &--bottom {\n top: -7.2px;\n left: 50%;\n transform: translateX(-50%) rotate(180deg);\n }\n &--left {\n right: -7.2px;\n top: 50%;\n transform: translateY(-50%) rotate(-90deg);\n }\n &--right {\n left: -7.2px;\n top: 50%;\n transform: translateY(-50%) rotate(90deg);\n }\n }\n\n &__content {\n line-height: 20px;\n font-weight: 500;\n\n p {\n margin: 0;\n }\n }\n\n &__close-button {\n padding-top: 4px;\n display: flex;\n button {\n padding: 0;\n background: none;\n border: none;\n cursor: pointer;\n }\n }\n}\n","import { Component, Element, Fragment, Prop, State, h } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\nimport { TooltipArrow } from '../assets/tooltipArrow';\n\n@Component({\n tag: 'sd-tooltip',\n styleUrl: 'sd-tooltip.scss',\n})\nexport class SdTooltip {\n @Element() el!: HTMLElement;\n\n @Prop() trigger: 'hover' | 'click' = 'hover';\n @Prop() placement: 'top' | 'bottom' | 'left' | 'right' = 'top';\n @Prop() color: string = '#01BB4B';\n @Prop() type: 'default' | 'caution' | 'notice' | 'accent' = 'default';\n\n @Prop() icon: IconName = 'helpOutline';\n @Prop() iconSize: number = 12;\n\n @Prop() label: string = '';\n @Prop() buttonSize: ButtonSize = 'sm';\n @Prop() buttonVariant: ButtonVariant = 'primary';\n\n @Prop() noHover: boolean = true;\n\n @Prop() useClose: boolean = false;\n\n @State() showTooltip: boolean = false;\n @State() slotContent: HTMLElement | null = null;\n\n private static readonly COLOR_OF_TYPE = {\n default: { background: 'oceanblue_85', text: 'white' },\n caution: { background: 'red_20', text: 'red_70' },\n notice: { background: 'orange_10', text: 'orange_65' },\n accent: { background: 'brilliantblue_20', text: 'brilliantblue_75' },\n };\n\n private buttonEl?: HTMLStencilElement;\n\n private handleClose = () => {\n this.showTooltip = false;\n };\n\n // 현재 tooltip popover가 조건부 렌더링이여서 초기 slot이 렌더링 되지 않은 시점에\n // 데이터 매핑에 실패 (light dom에 저장된 slot내용을 shadow dom을 찾지못해 매핑 실패)\n // 따라서 slot내용을 받은 후에 복제하여 state에 저장\n componentWillLoad() {\n const contentEl = this.el.querySelector('[slot=\"content\"]');\n if (contentEl) {\n this.slotContent = contentEl.cloneNode(true) as HTMLElement;\n }\n }\n\n render() {\n const handleTrigger =\n this.trigger === 'hover'\n ? {\n onMouseEnter: () => (this.showTooltip = true),\n onMouseLeave: () => (this.showTooltip = false),\n }\n : {\n onClick: () => (this.showTooltip = !this.showTooltip),\n };\n\n return (\n <Fragment>\n {this.label ? (\n <sd-button\n ref={el => (this.buttonEl = el)}\n label={this.label}\n icon={this.icon}\n size={this.buttonSize}\n color={this.color}\n variant={this.buttonVariant}\n class=\"sd-tooltip\"\n {...handleTrigger}\n ></sd-button>\n ) : (\n <sd-icon\n ref={el => (this.buttonEl = el)}\n name={this.icon}\n size={this.iconSize}\n color={this.color}\n class=\"sd-tooltip\"\n {...handleTrigger}\n ></sd-icon>\n )}\n\n {this.showTooltip && (\n <sd-tooltip-portal\n parentRef={this.buttonEl}\n onSdClose={() => this.handleClose()}\n placement={this.placement}\n >\n <div\n class={{\n 'sd-tooltip-menu': true,\n [`sd-tooltip-menu--${this.type}`]: true,\n [`sd-tooltip-menu--${this.placement}`]: true,\n 'sd-tooltip-menu--with-close': this.useClose,\n [`bg-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,\n [`text-${SdTooltip.COLOR_OF_TYPE[this.type].text}`]: true,\n }}\n >\n <i class={`sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}`}>\n <TooltipArrow\n class={{\n [`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,\n }}\n ></TooltipArrow>\n </i>\n\n <div\n class=\"sd-tooltip-menu__content\"\n ref={el => {\n if (el && this.slotContent && !el.hasChildNodes()) {\n el.appendChild(this.slotContent.cloneNode(true));\n }\n }}\n >\n {!this.slotContent && <span>{this.el.textContent}</span>}\n </div>\n\n {this.useClose && (\n <div class=\"sd-tooltip-menu__close-button\">\n <button\n type=\"button\"\n aria-label=\"Close tooltip\"\n title=\"Close tooltip\"\n onClick={() => this.handleClose()}\n >\n <sd-icon name=\"close\" size=\"12\" color=\"#AAAAAA\"></sd-icon>\n </button>\n </div>\n )}\n </div>\n </sd-tooltip-portal>\n )}\n </Fragment>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-CQBrru3e.js';
|
|
2
|
-
import { d as defineCustomElement$2 } from './p-
|
|
3
|
-
import { d as defineCustomElement$1 } from './p-
|
|
2
|
+
import { d as defineCustomElement$2 } from './p-Bj4u0G5b.js';
|
|
3
|
+
import { d as defineCustomElement$1 } from './p-BHHbLFXg.js';
|
|
4
4
|
|
|
5
5
|
const sdSelectOptionCss = () => `sd-select-option{display:block;height:fit-content;line-height:0}sd-select-option .sd-select__option{display:flex;padding:4px 12px;font-size:12px;line-height:20px;cursor:pointer}sd-select-option .sd-select__option__checkbox-wrapper{display:flex;width:100%;column-gap:8px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}sd-select-option .sd-select__option--focused{background-color:#e6f1ff}sd-select-option .sd-select__option--selected:not(:hover):not(.sd-select__option--use-checkbox),sd-select-option .sd-select__option--focused:not(:hover):not(.sd-select__option--use-checkbox){color:#0075ff;font-weight:700}sd-select-option .sd-select__option--disabled{color:#aaaaaa;cursor:not-allowed}sd-select-option .sd-select__option:hover:not(.sd-select__option--disabled){background-color:#0075ff;color:white}`;
|
|
6
6
|
|
|
@@ -36,7 +36,7 @@ const SdSelectOption = /*@__PURE__*/ proxyCustomElement(class SdSelectOption ext
|
|
|
36
36
|
}
|
|
37
37
|
};
|
|
38
38
|
render() {
|
|
39
|
-
return (h(Host, { key: '
|
|
39
|
+
return (h(Host, { key: 'cfb999f7001240e6bd5dc302b24aade477671f74' }, h("div", { key: '053e073fee23e99bd23a9b9fa95cb9ddabf9d6bf', class: {
|
|
40
40
|
'sd-select__option': true,
|
|
41
41
|
'sd-select__option--selected': this.isSelected,
|
|
42
42
|
'sd-select__option--disabled': !!this.option.disabled,
|
|
@@ -92,6 +92,6 @@ function defineCustomElement() {
|
|
|
92
92
|
}
|
|
93
93
|
|
|
94
94
|
export { SdSelectOption as S, defineCustomElement as d };
|
|
95
|
-
//# sourceMappingURL=p-
|
|
95
|
+
//# sourceMappingURL=p-O3tgQfvT.js.map
|
|
96
96
|
|
|
97
|
-
//# sourceMappingURL=p-
|
|
97
|
+
//# sourceMappingURL=p-O3tgQfvT.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-O3tgQfvT.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,8zBAA8zB,CAAC;;MCiBn1B,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;;;;;;;;;AAGlB,IAAA,MAAM;AACN,IAAA,KAAK;IACL,UAAU,GAAY,KAAK;IAC3B,SAAS,GAAY,KAAK;AAC1B,IAAA,WAAW;IACX,QAAQ,GAAY,KAAK;IACzB,WAAW,GAAY,KAAK;IAE3B,SAAS,GAAY,KAAK;AAGnC,IAAA,MAAM,UAAU,GAAA;AACf,QAAA,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ;;AAGrB,IAAA,WAAW;AAMZ,IAAA,WAAW,GAAG,CAAC,KAAiB,KAAI;QAC3C,KAAK,CAAC,eAAe,EAAE;AAEvB,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAC5C,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACrB,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,KAAK;AACL,aAAA,CAAC;;AAEJ,KAAC;IAED,MAAM,GAAA;QACL,QACC,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACJ,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,KAAK,EAAE;AACN,gBAAA,mBAAmB,EAAE,IAAI;gBACzB,6BAA6B,EAAE,IAAI,CAAC,UAAU;AAC9C,gBAAA,6BAA6B,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ;gBACrD,4BAA4B,EAAE,IAAI,CAAC,SAAS;gBAC5C,iCAAiC,EAAE,IAAI,CAAC,WAAW;AACnD,aAAA,EACD,YAAY,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAC3C,YAAY,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,EAC5C,KAAK,EAAE,IAAI,CAAC,WAAW,EACX,YAAA,EAAA,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE,IAAI,CAAC,WAAW,EAExB,EAAA,IAAI,CAAC,WAAW,IAChB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,qCAAqC,EAAA,EAC/C,CAAA,CAAA,aAAA,EAAA,EACC,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ;;;;;;;;YAQ9B,OAAO,EAAE,CAAC,IAAG;gBACZ,CAAC,CAAC,cAAc,EAAE;AAClB,gBAAA,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;AACpB,aAAC,EACa,CAAA,EACf,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,yBAAyB,EAAE,EAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAQ,CAC3D,KAEN,IAAI,CAAC,MAAM,CAAC,KAAK,CACjB,CACI,CACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-select/sd-select-option/sd-select-option.scss?tag=sd-select-option","src/components/sd-select/sd-select-option/sd-select-option.tsx"],"sourcesContent":["@import 'variables';\n\nsd-select-option {\n display: block;\n height: fit-content;\n line-height: 0;\n .sd-select__option {\n display: flex;\n padding: 4px 12px;\n font-size: 12px;\n line-height: 20px;\n cursor: pointer;\n\n &__checkbox-wrapper {\n display: flex;\n width: 100%;\n column-gap: 8px;\n align-items: center;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n &--focused {\n background-color: $brilliantblue_20;\n }\n\n &--selected,\n &--focused {\n &:not(:hover):not(.sd-select__option--use-checkbox) {\n color: $brilliantblue_75;\n font-weight: 700;\n }\n }\n\n &--disabled {\n color: $grey_55;\n cursor: not-allowed;\n }\n\n &:hover {\n &:not(.sd-select__option--disabled) {\n background-color: $brilliantblue_75;\n color: white;\n }\n }\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n} from '@stencil/core';\nimport type { SelectOption } from '../../../types/select';\n\n@Component({\n tag: 'sd-select-option',\n styleUrl: 'sd-select-option.scss',\n})\nexport class SdSelectOption {\n @Element() el!: HTMLElement;\n\n @Prop() option!: SelectOption;\n @Prop() index!: number;\n @Prop() isSelected: boolean = false;\n @Prop() isFocused: boolean = false;\n @Prop() optionStyle?: { [key: string]: string };\n @Prop() disabled: boolean = false;\n @Prop() useCheckbox: boolean = false;\n\n @State() isHovered: boolean = false;\n\n @Method()\n async isDisabled(): Promise<boolean> {\n return !!this.option.disabled;\n }\n\n @Event() optionClick!: EventEmitter<{\n option: SelectOption;\n index: number;\n event: MouseEvent;\n }>;\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n\n if (!this.option.disabled && !this.disabled) {\n this.optionClick.emit({\n option: this.option,\n index: this.index,\n event,\n });\n }\n };\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'sd-select__option': true,\n 'sd-select__option--selected': this.isSelected,\n 'sd-select__option--disabled': !!this.option.disabled,\n 'sd-select__option--focused': this.isFocused,\n 'sd-select__option--use-checkbox': this.useCheckbox,\n }}\n onMouseEnter={() => (this.isHovered = true)}\n onMouseLeave={() => (this.isHovered = false)}\n style={this.optionStyle}\n data-index={this.index}\n onClick={this.handleClick}\n >\n {this.useCheckbox ? (\n <div class=\"sd-select__option__checkbox-wrapper\">\n <sd-checkbox\n checked={this.isSelected}\n disabled={this.option.disabled}\n // checkboxStyle={\n // !this.isSelected\n // ? { borderColor: '#888' }\n // : this.isHovered\n // ? { borderColor: 'white' }\n // : { borderColor: '#0075ff' }\n // }\n onClick={e => {\n e.preventDefault();\n this.handleClick(e);\n }}\n ></sd-checkbox>\n <span class=\"sd-select__option-label\">{this.option.label}</span>\n </div>\n ) : (\n this.option.label\n )}\n </div>\n </Host>\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-CQBrru3e.js';
|
|
2
|
-
import { d as defineCustomElement$2 } from './p-
|
|
3
|
-
import { d as defineCustomElement$1 } from './p-
|
|
2
|
+
import { d as defineCustomElement$2 } from './p-BHHbLFXg.js';
|
|
3
|
+
import { d as defineCustomElement$1 } from './p-C4kdHNdl.js';
|
|
4
4
|
|
|
5
5
|
const sdSelectSearchInputCss = () => `.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-input{width:100%}.sd-select-search-input--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}`;
|
|
6
6
|
|
|
@@ -29,17 +29,17 @@ const SdSelectSearchInput = /*@__PURE__*/ proxyCustomElement(class SdSelectSearc
|
|
|
29
29
|
input?.focus({ preventScroll: true });
|
|
30
30
|
}
|
|
31
31
|
render() {
|
|
32
|
-
return (h("div", { key: '
|
|
32
|
+
return (h("div", { key: '6d05eba9ab9a951d126f703ec9366d8b425581b7', class: {
|
|
33
33
|
'sd-select-search-input': true,
|
|
34
34
|
'sd-select-search-input--scrolled': !!this.isScrolled,
|
|
35
|
-
}, onClick: event => event.stopPropagation() }, h("sd-input", { key: '
|
|
35
|
+
}, onClick: event => event.stopPropagation() }, h("sd-input", { key: 'e00b8cab50be8a096893c4cb4aceff0446cbfde4', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdInput: event => {
|
|
36
36
|
this.sdSearchInput.emit(String(event?.detail));
|
|
37
37
|
}, onSdFocus: () => {
|
|
38
38
|
this.sdSearchFocus.emit();
|
|
39
39
|
}, onKeyDown: event => {
|
|
40
40
|
if (event.code === 'Enter')
|
|
41
41
|
event.stopPropagation();
|
|
42
|
-
} }, h("sd-icon", { key: '
|
|
42
|
+
} }, h("sd-icon", { key: '951178d9cbe80fc944e708207b57949ecd6ed8fc', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
|
|
43
43
|
}
|
|
44
44
|
static get style() { return sdSelectSearchInputCss(); }
|
|
45
45
|
}, [768, "sd-select-search-input", {
|
|
@@ -73,6 +73,6 @@ function defineCustomElement() {
|
|
|
73
73
|
}
|
|
74
74
|
|
|
75
75
|
export { SdSelectSearchInput as S, defineCustomElement as d };
|
|
76
|
-
//# sourceMappingURL=p-
|
|
76
|
+
//# sourceMappingURL=p-QpwY2yqY.js.map
|
|
77
77
|
|
|
78
|
-
//# sourceMappingURL=p-
|
|
78
|
+
//# sourceMappingURL=p-QpwY2yqY.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-QpwY2yqY.js","mappings":";;;;AAAA,MAAM,sBAAsB,GAAG,MAAM,CAAC,4PAA4P,CAAC;;MCMtR,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;;;;;;;;;IACvB,UAAU,GAAa,KAAK;IAC5B,UAAU,GAAkB,EAAE;AAE7B,IAAA,aAAa;AACb,IAAA,aAAa;AAEd,IAAA,SAAS;AAGjB,IAAA,MAAM,gBAAgB,GAAA;AACrB,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AACnB,YAAA,OAAO,IAAI,CAAC,SAAS,CAAC,gBAAgB,EAAE;;AAEzC,QAAA,OAAO,IAAI;;AAIZ,IAAA,MAAM,gBAAgB,GAAA;AACrB,QAAA,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,gBAAgB,EAAE;QAC3C,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,SAAS,EAAE,KAAK,IAAG;AAClB,gBAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;AAC/C,aAAC,EACD,SAAS,EAAE,MAAK;AACf,gBAAA,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE;AAC1B,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\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","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() sdSearchInput!: EventEmitter<string>;\n @Event() sdSearchFocus!: EventEmitter<void>;\n\n private searchRef?: HTMLSdInputElement;\n\n @Method()\n async getNativeElement(): Promise<HTMLInputElement | null> {\n if (this.searchRef) {\n return this.searchRef.getNativeElement();\n }\n return null;\n }\n\n @Method()\n async searchInputFocus() {\n const input = await this.getNativeElement();\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 onSdInput={event => {\n this.sdSearchInput.emit(String(event?.detail));\n }}\n onSdFocus={() => {\n this.sdSearchFocus.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-CQBrru3e.js';
|
|
2
|
-
import { d as defineCustomElement$2 } from './p-
|
|
3
|
-
import { d as defineCustomElement$1 } from './p-
|
|
2
|
+
import { d as defineCustomElement$2 } from './p-Bj4u0G5b.js';
|
|
3
|
+
import { d as defineCustomElement$1 } from './p-BHHbLFXg.js';
|
|
4
4
|
|
|
5
5
|
const sdSelectOptionGroupCss = () => `sd-select-option-group{display:block;height:fit-content}sd-select-option-group .sd-select__option-group{display:flex;padding:4px 12px;padding-left:12px;font-size:12px;line-height:20px;cursor:pointer}sd-select-option-group .sd-select__option-group.sd-select__option-group--group:not(.sd-select__option-group--use-checkbox),sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup:not(.sd-select__option-group--use-checkbox){cursor:default !important}sd-select-option-group .sd-select__option-group.sd-select__option-group--group{background-color:#f5faff !important;color:#333333 !important;font-weight:700}sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup{padding-left:20px;background-color:#f9f9f9 !important;color:#333333 !important;font-weight:500}sd-select-option-group .sd-select__option-group.sd-select__option-group--item{padding-left:28px}sd-select-option-group .sd-select__option-group sd-checkbox__bg{border-color:#888888}sd-select-option-group .sd-select__option-group__label-wrapper{display:flex;width:100%;column-gap:8px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}sd-select-option-group .sd-select__option-group__label-wrapper sd-checkbox{flex-shrink:0}sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__option-group-label{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__option-group__count-indicator{width:fit-content;flex-shrink:0;font-size:12px;font-weight:500;color:#888888}sd-select-option-group .sd-select__option-group--focused{background-color:#e6f1ff}sd-select-option-group .sd-select__option-group--selected.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox),sd-select-option-group .sd-select__option-group--focused.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox){color:#0075ff;font-weight:700}sd-select-option-group .sd-select__option-group--disabled{color:#aaaaaa;cursor:not-allowed}sd-select-option-group .sd-select__option-group:hover:not(.sd-select__option-group--disabled){background-color:#0075ff;color:white}sd-select-option-group .sd-select__option-group:hover.sd-select__option-group--selected:not(.sd-select__option-group--group):not(.sd-select__option-group--subgroup) sd-checkbox .sd-checkbox__bg{border-color:white !important}`;
|
|
6
6
|
|
|
@@ -51,7 +51,7 @@ const SdSelectOptionGroup = /*@__PURE__*/ proxyCustomElement(class SdSelectOptio
|
|
|
51
51
|
}
|
|
52
52
|
};
|
|
53
53
|
render() {
|
|
54
|
-
return (h("div", { key: '
|
|
54
|
+
return (h("div", { key: 'ed43a2fa2ae5b182f1c99b272126fb3629617681', class: {
|
|
55
55
|
'sd-select__option-group': true,
|
|
56
56
|
'sd-select__option-group--selected': !!this.isSelected,
|
|
57
57
|
'sd-select__option-group--disabled': !!this.option.disabled,
|
|
@@ -60,10 +60,10 @@ const SdSelectOptionGroup = /*@__PURE__*/ proxyCustomElement(class SdSelectOptio
|
|
|
60
60
|
'sd-select__option-group--group': this.option.type === 'group',
|
|
61
61
|
'sd-select__option-group--subgroup': this.option.type === 'subgroup',
|
|
62
62
|
'sd-select__option-group--item': this.option.type === 'item',
|
|
63
|
-
}, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: '
|
|
63
|
+
}, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: '97de3f6a855bf737cbaa5f23f7986b2c5ee10c52', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '7d8814dc060dd769f100be09d87edcc440cbf93d', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
|
|
64
64
|
e.preventDefault();
|
|
65
65
|
this.handleClick(this.option, this.isSelected, e);
|
|
66
|
-
} })), h("span", { key: '
|
|
66
|
+
} })), h("span", { key: '8fd8bf56260bf49f42a0cb205868a45912e5a4de', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: 'eaa10fa1f13f4f6bc48b22967b1b31a2e894865c', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
|
|
67
67
|
}
|
|
68
68
|
static get style() { return sdSelectOptionGroupCss(); }
|
|
69
69
|
}, [768, "sd-select-option-group", {
|
|
@@ -104,6 +104,6 @@ function defineCustomElement() {
|
|
|
104
104
|
}
|
|
105
105
|
|
|
106
106
|
export { SdSelectOptionGroup as S, defineCustomElement as d };
|
|
107
|
-
//# sourceMappingURL=p-
|
|
107
|
+
//# sourceMappingURL=p-w5tohH2H.js.map
|
|
108
108
|
|
|
109
|
-
//# sourceMappingURL=p-
|
|
109
|
+
//# sourceMappingURL=p-w5tohH2H.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-w5tohH2H.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.scss?tag=sd-select-option-group","src/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.tsx"],"sourcesContent":["@import 'variables';\n\nsd-select-option-group {\n display: block;\n height: fit-content;\n .sd-select__option-group {\n display: flex;\n padding: 4px 12px;\n padding-left: 12px;\n font-size: 12px;\n line-height: 20px;\n cursor: pointer;\n\n &.sd-select__option-group--group,\n &.sd-select__option-group--subgroup {\n &:not(.sd-select__option-group--use-checkbox) {\n cursor: default !important;\n }\n }\n\n &.sd-select__option-group--group {\n background-color: $brilliantblue_05 !important;\n color: $grey_90 !important;\n font-weight: 700;\n }\n\n &.sd-select__option-group--subgroup {\n padding-left: 20px;\n background-color: $grey_05 !important;\n color: $grey_90 !important;\n font-weight: 500;\n }\n\n &.sd-select__option-group--item {\n padding-left: 28px;\n }\n\n sd-checkbox {\n &__bg {\n border-color: $grey_65;\n }\n }\n\n &__label-wrapper {\n display: flex;\n width: 100%;\n column-gap: 8px;\n align-items: center;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n\n sd-checkbox {\n flex-shrink: 0;\n }\n\n .sd-select__option-group-label {\n flex: 0 1 auto;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .sd-select__option-group__count-indicator {\n width: fit-content;\n flex-shrink: 0;\n font-size: 12px;\n font-weight: 500;\n color: $grey_65;\n }\n }\n\n &--focused {\n background-color: $brilliantblue_20;\n }\n\n &--selected,\n &--focused {\n &.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox) {\n color: $brilliantblue_75;\n font-weight: 700;\n }\n }\n\n &--disabled {\n color: $grey_55;\n cursor: not-allowed;\n }\n\n &:hover {\n &:not(.sd-select__option-group--disabled) {\n background-color: $brilliantblue_75;\n color: white;\n }\n\n &.sd-select__option-group--selected {\n &:not(.sd-select__option-group--group):not(.sd-select__option-group--subgroup) {\n sd-checkbox {\n .sd-checkbox__bg {\n border-color: white !important;\n }\n }\n }\n }\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { SelectOptionGroup } from '../../sd-select/sd-select';\n\n@Component({\n tag: 'sd-select-option-group',\n styleUrl: 'sd-select-option-group.scss',\n})\nexport class SdSelectOptionGroup {\n @Element() el!: HTMLElement;\n\n @Prop() option!: SelectOptionGroup;\n @Prop() index!: number;\n @Prop() isSelected: boolean | null = false;\n @Prop() isFocused: boolean = false;\n @Prop() optionStyle?: { [key: string]: string };\n @Prop() disabled: boolean = false;\n @Prop() useCheckbox: boolean = false;\n @Prop() useIndicator?: boolean = true;\n @Prop() countInfo?: { selectedCount: number; totalCount: number } = {\n selectedCount: 0,\n totalCount: 0,\n };\n\n @State() isHovered: boolean = false;\n\n @Method()\n async isDisabled(): Promise<boolean> {\n return !!this.option.disabled || this.option.type === 'group' || this.option.type === 'subgroup';\n }\n\n @Event() optionClick!: EventEmitter<{\n option: SelectOptionGroup;\n isSelected: boolean | null;\n index: number;\n event: MouseEvent;\n }>;\n\n private handleClick = (\n option: SelectOptionGroup,\n isSelected: boolean | null,\n event: MouseEvent,\n ) => {\n event.stopPropagation();\n\n if (option.type === 'group' || option.type === 'subgroup') {\n this.optionClick.emit({\n option: this.option,\n isSelected,\n index: this.index,\n event,\n });\n return;\n }\n\n if (!this.option.disabled && !this.disabled) {\n this.optionClick.emit({\n option: this.option,\n isSelected,\n index: this.index,\n event,\n });\n }\n };\n\n render() {\n return (\n <div\n class={{\n 'sd-select__option-group': true,\n 'sd-select__option-group--selected': !!this.isSelected,\n 'sd-select__option-group--disabled': !!this.option.disabled,\n 'sd-select__option-group--focused': this.isFocused,\n 'sd-select__option-group--use-checkbox': this.useCheckbox,\n 'sd-select__option-group--group': this.option.type === 'group',\n 'sd-select__option-group--subgroup': this.option.type === 'subgroup',\n 'sd-select__option-group--item': this.option.type === 'item',\n }}\n onMouseEnter={() => (this.isHovered = true)}\n onMouseLeave={() => (this.isHovered = false)}\n style={this.optionStyle}\n data-index={this.index}\n onClick={event => this.handleClick(this.option, this.isSelected, event)}\n >\n <div class=\"sd-select__option-group__label-wrapper\">\n {this.useCheckbox && (\n <sd-checkbox\n checked={this.isSelected}\n disabled={this.option.disabled}\n onClick={e => {\n e.preventDefault();\n this.handleClick(this.option, this.isSelected, e);\n }}\n ></sd-checkbox>\n )}\n <span class=\"sd-select__option-group-label\">{this.option.label}</span>\n {this.useIndicator && this.option.type !== 'item' && (\n <span class=\"sd-select__option-group__count-indicator\">{`(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`}</span>\n )}\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -10,7 +10,7 @@ const SdTbody = /*@__PURE__*/ proxyCustomElement(class SdTbody extends H {
|
|
|
10
10
|
}
|
|
11
11
|
}
|
|
12
12
|
render() {
|
|
13
|
-
return (h(Host, { key: '
|
|
13
|
+
return (h(Host, { key: '5c25fa054aaea539d47625d367adeb18d771f070' }, h("slot", { key: '17e9fd219974d986e154d72c82a3ac145af7e7a8' })));
|
|
14
14
|
}
|
|
15
15
|
static get style() { return sdTbodyCss(); }
|
|
16
16
|
}, [260, "sd-tbody"]);
|
|
@@ -29,6 +29,6 @@ function defineCustomElement() {
|
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
export { SdTbody as S, defineCustomElement as d };
|
|
32
|
-
//# sourceMappingURL=p-
|
|
32
|
+
//# sourceMappingURL=p-xme-KFvK.js.map
|
|
33
33
|
|
|
34
|
-
//# sourceMappingURL=p-
|
|
34
|
+
//# sourceMappingURL=p-xme-KFvK.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-xme-KFvK.js","mappings":";;AAAA,MAAM,UAAU,GAAG,MAAM,CAAC,iCAAiC,CAAC;;MCM/C,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;;;;;;;IACnB,MAAM,GAAA;QACL,QACC,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACJ,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACP;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-table/sd-tbody/sd-tbody.scss?tag=sd-tbody","src/components/sd-table/sd-tbody/sd-tbody.tsx"],"sourcesContent":["sd-tbody {\n display: table-row-group;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'sd-tbody',\n styleUrl: 'sd-tbody.scss',\n})\nexport class SdTbody {\n render() {\n return (\n <Host>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h, c as Host, t as transformTag } from './p-CQBrru3e.js';
|
|
2
2
|
|
|
3
|
-
const sdCardCss = () => `sd-card{display:block;height:fit-content
|
|
3
|
+
const sdCardCss = () => `sd-card{display:block;height:fit-content;border-radius:8px}sd-card.sd-card--bordered{border:1px solid #e1e1e1}`;
|
|
4
4
|
|
|
5
5
|
const SdCard$1 = /*@__PURE__*/ proxyCustomElement(class SdCard extends H {
|
|
6
6
|
constructor(registerHost) {
|
|
@@ -10,14 +10,14 @@ const SdCard$1 = /*@__PURE__*/ proxyCustomElement(class SdCard extends H {
|
|
|
10
10
|
}
|
|
11
11
|
}
|
|
12
12
|
bordered = true;
|
|
13
|
-
|
|
13
|
+
cardClassName = '';
|
|
14
14
|
render() {
|
|
15
|
-
return (h(Host, { key: '
|
|
15
|
+
return (h(Host, { key: '3182001dcfc5347e3995a31d8e333e01f285df5a', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.cardClassName}` }, h("slot", { key: 'e2824b9cd65b9c4ba668f7f3ba933a361405b822' })));
|
|
16
16
|
}
|
|
17
17
|
static get style() { return sdCardCss(); }
|
|
18
18
|
}, [772, "sd-card", {
|
|
19
19
|
"bordered": [4],
|
|
20
|
-
"
|
|
20
|
+
"cardClassName": [1, "card-class-name"]
|
|
21
21
|
}]);
|
|
22
22
|
function defineCustomElement$1() {
|
|
23
23
|
if (typeof customElements === "undefined") {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"sd-card.js","mappings":";;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,
|
|
1
|
+
{"file":"sd-card.js","mappings":";;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,8GAA8G,CAAC;;MCM3HA,QAAM,iBAAAC,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;;;;;;;IACV,QAAQ,GAAY,IAAI;IACxB,aAAa,GAAY,EAAE;IAEnC,MAAM,GAAA;AACL,QAAA,QACC,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,WAAW,IAAI,CAAC,QAAQ,GAAG,mBAAmB,GAAG,EAAE,IAAI,IAAI,CAAC,aAAa,CAAE,CAAA,EAAA,EACvF,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACP;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SdCard","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-card/sd-card.scss?tag=sd-card","src/components/sd-card/sd-card.tsx"],"sourcesContent":["@import 'variables';\n\nsd-card {\n display: block;\n height: fit-content;\n\n border-radius: 8px;\n\n &.sd-card--bordered {\n border: 1px solid $grey_30;\n }\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'sd-card',\n styleUrl: 'sd-card.scss',\n})\nexport class SdCard {\n @Prop() bordered: boolean = true;\n @Prop() cardClassName?: string = '';\n\n render() {\n return (\n <Host class={`sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.cardClassName}`}>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-CQBrru3e.js';
|
|
2
2
|
import { u as useDatePicker, t as today } from './p-QZbqqKSO.js';
|
|
3
3
|
import { d as defineCustomElement$5 } from './p-BxPT3VKO.js';
|
|
4
|
-
import { d as defineCustomElement$4 } from './p-
|
|
5
|
-
import { d as defineCustomElement$3 } from './p-
|
|
6
|
-
import { d as defineCustomElement$2 } from './p-
|
|
4
|
+
import { d as defineCustomElement$4 } from './p-BHHbLFXg.js';
|
|
5
|
+
import { d as defineCustomElement$3 } from './p-C4kdHNdl.js';
|
|
6
|
+
import { d as defineCustomElement$2 } from './p-B8yBkdjE.js';
|
|
7
7
|
|
|
8
8
|
const sdDatePickerCss = () => `.sd-date-picker.sc-sd-date-picker{width:100%;display:inline-block}.sd-date-picker.sc-sd-date-picker .sd-date-picker--disabled.sc-sd-date-picker .date-icon.sc-sd-date-picker{cursor:not-allowed !important;color:#888888 !important}.sd-date-picker.sc-sd-date-picker .sd-date-picker__input.sc-sd-date-picker{text-align:center !important}.sd-date-picker__menu.sc-sd-date-picker{width:304px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker{display:flex;flex-flow:row nowrap;align-items:center;gap:20px;font-size:14px;padding:0 5px;height:24px;line-height:24px}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .year-nav.sc-sd-date-picker,.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .month-nav.sc-sd-date-picker{display:flex;flex-flow:row nowrap;align-items:center;gap:12px}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .year-nav.sc-sd-date-picker button.sc-sd-date-picker,.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .month-nav.sc-sd-date-picker button.sc-sd-date-picker{background:none;border:none;cursor:pointer;margin:0;padding:0}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .year-nav__current.sc-sd-date-picker{width:40px;text-align:center}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .month-nav__current.sc-sd-date-picker{width:100px;text-align:center}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__days.sc-sd-date-picker{margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px;padding:0 5px}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__days.sc-sd-date-picker .day.sc-sd-date-picker{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__body.sc-sd-date-picker{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}`;
|
|
9
9
|
|
|
@@ -89,7 +89,7 @@ const SdDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class SdDatePicker exten
|
|
|
89
89
|
this.isOpen = false;
|
|
90
90
|
};
|
|
91
91
|
render() {
|
|
92
|
-
return (h(Host, { key: '
|
|
92
|
+
return (h(Host, { key: '339b8a2e02592a3a7c28e91b11dc3693b4fcb9db', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, h("sd-input", { key: '5cb7ee0544864681985ba4e2b4cfb4ca7eb88ba7', ref: el => (this.inputEl = el), value: this.value, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: 'e465944f71022a7b7d7b6d719affa31bfc337ff8', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: 'e4af5d3a2c5619d12f0b473b80eed941df1eea06', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: 'a36e286d284f3f2545eb83e60f76bb74db1ee045', class: "sd-date-picker__menu" }, h("div", { key: '95aa3b00666772cdaac5c458226b03ca8d814205', class: "sd-date-picker__header" }, h("div", { key: '92d3553d46fc3b9681050d5cb8b834bf4c661792', class: "year-nav" }, h("button", { key: 'ee0500f7c95bfd54e01a3dacba1f5510d1a6bbe6', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: '16cf42b6e4d43858fc22745339c66ffb03862f00', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '9cd310082f173d1fadc046a0a7f6b1e4b63627e0', class: "year-nav__current" }, this.currentYear), h("button", { key: '51d30f06c43c76226e995af3f3e3812ea48c2aad', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: '08b599372988f2563ccb6a25b64bbacef21e8c0b', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '3561b99251a0cc9ca5d81ed20369eb2d1702f253', class: "month-nav" }, h("button", { key: '952c94808facf642dc219eaced8d58b3c2ceb389', type: "button", name: "prev-month", title: "Previous ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: 'd270c4e5934ebfff500d9a4252b9a4b0b6c24e41', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '3baf83873b332c1a3b340773a952b5f9a1b48bd4', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: 'fe744ca6c9896f8cf7bd2a00cdd4db94915be0e3', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: 'a00637d3bc309b429fd302b72ec940f3cdce8f84', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: '8a4c4fc3bfc55205912368f6d5f1e3acd7eadbdc', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: 'f4eaa43b531640ba7bb7b724cf52144f9870d520', class: "sd-date-picker__body" }, [
|
|
93
93
|
...this.calendar.prevMonthDays,
|
|
94
94
|
...this.calendar.days,
|
|
95
95
|
...this.calendar.afterMonthDays,
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, c as Host, t as transformTag } from './p-CQBrru3e.js';
|
|
2
2
|
import { u as useDatePicker, t as today } from './p-QZbqqKSO.js';
|
|
3
3
|
import { d as defineCustomElement$5 } from './p-BxPT3VKO.js';
|
|
4
|
-
import { d as defineCustomElement$4 } from './p-
|
|
5
|
-
import { d as defineCustomElement$3 } from './p-
|
|
6
|
-
import { d as defineCustomElement$2 } from './p-
|
|
4
|
+
import { d as defineCustomElement$4 } from './p-BHHbLFXg.js';
|
|
5
|
+
import { d as defineCustomElement$3 } from './p-C4kdHNdl.js';
|
|
6
|
+
import { d as defineCustomElement$2 } from './p-B8yBkdjE.js';
|
|
7
7
|
|
|
8
8
|
const addDays = (inputDate, days) => {
|
|
9
9
|
const [year, month, day] = inputDate.split('-').map(Number);
|
|
@@ -180,10 +180,10 @@ const SdDateRangePicker$1 = /*@__PURE__*/ proxyCustomElement(class SdDateRangePi
|
|
|
180
180
|
this.setHoverDate(hoverDate);
|
|
181
181
|
}
|
|
182
182
|
render() {
|
|
183
|
-
return (h(Host, { key: '
|
|
183
|
+
return (h(Host, { key: '5220efe80a57b9591b4238b0f0cd646d76709a4c', class: {
|
|
184
184
|
'sd-date-range-picker': true,
|
|
185
185
|
'sd-date-range-picker--disabled': this.disabled,
|
|
186
|
-
} }, h("sd-input", { key: '
|
|
186
|
+
} }, h("sd-input", { key: '0f7bc52cbe8722e16b3c82dc847b0230149f4e6a', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: 'b21b38e104c2dd840af1670e4bedee84a4db10fa', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '56d74da3b2d783340d21503210eae4b89d540b9a', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, h("div", { key: '89b88b2b16bb6b553ba18b686cfdb41bcdccfb33', class: "sd-date-range-picker__menu" }, h("div", { key: 'b811cdb96de5cd8400ef413fe2537a5e9b36720d', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: '588814d15c2a6c8b8efcad9215ab015366709ee7', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: '330c17fb132b33140fb8cdf72c0bc75eca9814eb', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: 'b2f29d546ac19968045aa3803cea58693c9ac904', class: "header-label" }, this.prevYear), h("button", { key: '183befff37c64110a8dc188b261aaa03330b7c9e', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: 'ea7ab0b1ff97a659b2adf3ab105945127fa5b066', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '13e7484f631f5045a49c1243c93ae211b3f70bec', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
|
|
187
187
|
? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
|
|
188
188
|
: `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), h("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), h("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (h("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date === this.formatDate(index, Number(day))), type: this.getDateBoxType(this.formatDate(index, Number(day))), isToday: today === this.formatDate(index, Number(day)), disabled: !day ? true : this.isDisabledDate(this.formatDate(index, Number(day))), inRange: this.isDateInRange(this.formatDate(index, Number(day))), isStartDate: this.dateRange[0] === this.formatDate(index, Number(day)), isEndDate: this.dateRange[1] === this.formatDate(index, Number(day)), onClick: () => this.handleDateClick(index, Number(day)), onMouseOver: () => this.handleDateHover(index, Number(day)) }))))))))))))));
|
|
189
189
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-CQBrru3e.js';
|
|
2
|
-
import { d as defineCustomElement$2 } from './p-
|
|
2
|
+
import { d as defineCustomElement$2 } from './p-BHHbLFXg.js';
|
|
3
3
|
|
|
4
4
|
const sdFilePickerCss = () => `.sd-file-picker{display:inline-flex;align-items:center;max-width:var(--picker-width, 100%);height:28px;gap:8px;padding:4px 8px;border:1px solid #aaaaaa;border-radius:4px;background-color:#ffffff;cursor:pointer;user-select:none;position:relative;vertical-align:middle}.sd-file-picker__text{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:400;font-size:12px;line-height:20px;color:#aaaaaa}.sd-file-picker__text--active{color:#222222}.sd-file-picker__text--placeholder{color:#aaaaaa}.sd-file-picker__icon{flex-shrink:0}.sd-file-picker__clear-icon{flex-shrink:0;cursor:pointer;transition:opacity 0.2s ease}.sd-file-picker__clear-icon:hover{opacity:0.7}.sd-file-picker__input{display:none}.sd-file-picker__tooltip{position:absolute;top:calc(100% - 4px);left:50%;transform:translate(-50%);z-index:1000;white-space:nowrap;padding:8px 12px;background:rgba(0, 0, 0, 0.8);color:white;font-size:12px;line-height:18px;border-radius:4px;pointer-events:none}.sd-file-picker:hover:not(.sd-file-picker--inline):not(.sd-file-picker--disabled){background-color:#f6f6f6}.sd-file-picker--active:not(.sd-file-picker--inline):not(.sd-file-picker--disabled){background-color:#ffffff}.sd-file-picker--active:not(.sd-file-picker--inline):not(.sd-file-picker--disabled) .sd-file-picker__text{color:#222222}.sd-file-picker--disabled:not(.sd-file-picker--inline){background-color:#eeeeee;border-color:#cccccc}.sd-file-picker--disabled:not(.sd-file-picker--inline) .sd-file-picker__text{color:#888888}.sd-file-picker--inline{border:none;background-color:transparent;padding:0;height:auto}.sd-file-picker--inline .sd-file-picker__text{color:#aaaaaa}.sd-file-picker--inline:hover:not(.sd-file-picker--disabled) .sd-file-picker__text{color:#737373}.sd-file-picker--inline.sd-file-picker--active:not(.sd-file-picker--disabled) .sd-file-picker__text--active{color:#222222}.sd-file-picker--inline.sd-file-picker--disabled .sd-file-picker__text{color:#cccccc}`;
|
|
5
5
|
|
|
@@ -103,15 +103,15 @@ const SdFilePicker$1 = /*@__PURE__*/ proxyCustomElement(class SdFilePicker exten
|
|
|
103
103
|
render() {
|
|
104
104
|
const hasFiles = this.hasFiles();
|
|
105
105
|
const displayText = this.getDisplayText();
|
|
106
|
-
return (h("div", { key: '
|
|
106
|
+
return (h("div", { key: '467ea6ab920e23a8cf98db73f3ba5507e0634bc8', class: {
|
|
107
107
|
'sd-file-picker': true,
|
|
108
108
|
[this.getStatusClass()]: true,
|
|
109
109
|
'sd-file-picker--inline': this.inline,
|
|
110
|
-
}, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("input", { key: '
|
|
110
|
+
}, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("input", { key: '20ff1404f15beaeff2f4f3e0b1772aadbd986934', 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: '59e00f4ba49547aacf99dfab54c391c49895d8df', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: 'be74c5aebcc947aacf6841b15915cc98af5453e6', ref: el => (this.fileNamesRef = el), class: {
|
|
111
111
|
'sd-file-picker__text': true,
|
|
112
112
|
'sd-file-picker__text--placeholder': !hasFiles,
|
|
113
113
|
'sd-file-picker__text--active': hasFiles,
|
|
114
|
-
} }, displayText), !this.disabled && hasFiles && (h("sd-icon", { key: '
|
|
114
|
+
} }, displayText), !this.disabled && hasFiles && (h("sd-icon", { key: '0547537e85b8eb0f2678c3023eeec9241caf0ced', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: '86bf77f26f2aea00c31c9770c2142353d92d239c', class: "sd-file-picker__tooltip" }, displayText))));
|
|
115
115
|
}
|
|
116
116
|
static get watchers() { return {
|
|
117
117
|
"value": ["valueChanged"]
|