@sellmate/design-system 0.0.41 → 0.0.42
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-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table.sd-tbody.sd-th.sd-tooltip.sd-tooltip-portal.sd-tr.entry.cjs.js.map +1 -1
- package/dist/cjs/sd-button_15.cjs.entry.js +3 -2
- package/dist/collection/components/sd-tooltip-portal/sd-tooltip-portal.js +3 -2
- package/dist/collection/components/sd-tooltip-portal/sd-tooltip-portal.js.map +1 -1
- package/dist/components/{p-CO0qaUid.js → p-4n8y_ubX.js} +5 -4
- package/dist/components/p-4n8y_ubX.js.map +1 -0
- package/dist/components/{p-BiFL1Pnf.js → p-C5VIAyqc.js} +3 -3
- package/dist/components/{p-BiFL1Pnf.js.map → p-C5VIAyqc.js.map} +1 -1
- package/dist/components/sd-popover.js +1 -1
- package/dist/components/sd-table-backup.js +2 -2
- package/dist/components/sd-table.js +2 -2
- package/dist/components/sd-tooltip-portal.js +1 -1
- package/dist/components/sd-tooltip.js +1 -1
- package/dist/design-system/design-system.esm.js +1 -1
- package/dist/design-system/{p-359e882c.entry.js → p-66a3fe4d.entry.js} +2 -2
- package/dist/design-system/{p-359e882c.entry.js.map → p-66a3fe4d.entry.js.map} +1 -1
- package/dist/design-system/sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table.sd-tbody.sd-th.sd-tooltip.sd-tooltip-portal.sd-tr.entry.esm.js.map +1 -1
- package/dist/esm/sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table.sd-tbody.sd-th.sd-tooltip.sd-tooltip-portal.sd-tr.entry.js.map +1 -1
- package/dist/esm/sd-button_15.entry.js +3 -2
- package/hydrate/index.js +3 -2
- package/hydrate/index.mjs +3 -2
- package/package.json +2 -2
- package/dist/components/p-CO0qaUid.js.map +0 -1
|
@@ -3334,7 +3334,8 @@ const SdTooltipPortal = class {
|
|
|
3334
3334
|
}
|
|
3335
3335
|
// 외부 클릭 감지
|
|
3336
3336
|
handleMouseDown(e) {
|
|
3337
|
-
this.isInsideClick = !!(this.wrapper && this.wrapper.contains(e.target))
|
|
3337
|
+
this.isInsideClick = !!((this.wrapper && this.wrapper.contains(e.target)) ||
|
|
3338
|
+
(this.parentRef && this.parentRef.contains(e.target)));
|
|
3338
3339
|
}
|
|
3339
3340
|
handleWindowClick(e) {
|
|
3340
3341
|
if (this.isInsideClick) {
|
|
@@ -3346,7 +3347,7 @@ const SdTooltipPortal = class {
|
|
|
3346
3347
|
this.sdClose.emit();
|
|
3347
3348
|
}
|
|
3348
3349
|
render() {
|
|
3349
|
-
return index.h("slot", { key: '
|
|
3350
|
+
return index.h("slot", { key: '918c09f6f9b248a6ba08e622c375b63adb36d0c3' });
|
|
3350
3351
|
}
|
|
3351
3352
|
};
|
|
3352
3353
|
|
|
@@ -131,7 +131,8 @@ export class SdTooltipPortal {
|
|
|
131
131
|
}
|
|
132
132
|
// 외부 클릭 감지
|
|
133
133
|
handleMouseDown(e) {
|
|
134
|
-
this.isInsideClick = !!(this.wrapper && this.wrapper.contains(e.target))
|
|
134
|
+
this.isInsideClick = !!((this.wrapper && this.wrapper.contains(e.target)) ||
|
|
135
|
+
(this.parentRef && this.parentRef.contains(e.target)));
|
|
135
136
|
}
|
|
136
137
|
handleWindowClick(e) {
|
|
137
138
|
if (this.isInsideClick) {
|
|
@@ -143,7 +144,7 @@ export class SdTooltipPortal {
|
|
|
143
144
|
this.sdClose.emit();
|
|
144
145
|
}
|
|
145
146
|
render() {
|
|
146
|
-
return h("slot", { key: '
|
|
147
|
+
return h("slot", { key: '918c09f6f9b248a6ba08e622c375b63adb36d0c3' });
|
|
147
148
|
}
|
|
148
149
|
static get is() { return "sd-tooltip-portal"; }
|
|
149
150
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-tooltip-portal.js","sourceRoot":"","sources":["../../../src/components/sd-tooltip-portal/sd-tooltip-portal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-tooltip-portal',\r\n shadow: true,\r\n})\r\nexport class SdTooltipPortal {\r\n @Element() el!: HTMLElement;\r\n @Prop() to: HTMLElement | string = 'body';\r\n @Prop() parentRef: HTMLElement | null = null;\r\n @Prop() offset: [number, number] = [0, 0];\r\n @Prop() zIndex: number = 9999;\r\n @Prop() placement: 'top' | 'bottom' | 'left' | 'right' = 'bottom';\r\n @Prop() open: boolean = false;\r\n\r\n @Event() sdClose!: EventEmitter<void>;\r\n\r\n private container?: HTMLElement;\r\n private wrapper?: HTMLElement;\r\n private rafId?: number;\r\n private isInsideClick = false;\r\n\r\n private resizeObserver?: ResizeObserver;\r\n private mutationObserver?: MutationObserver;\r\n\r\n private static readonly ARROW_SIZE = 11.2;\r\n\r\n componentDidLoad() {\r\n this.container = this.resolveContainer();\r\n this.createWrapper();\r\n this.moveSlotContent();\r\n\r\n // DOM이 완전히 렌더링된 후 위치 계산\r\n requestAnimationFrame(() => {\r\n this.updatePosition();\r\n if (this.wrapper) {\r\n this.wrapper.style.visibility = 'visible'; // 위치 계산 후 표시\r\n }\r\n });\r\n\r\n this.observeParent();\r\n }\r\n\r\n componentDidRender() {\r\n if (!this.wrapper) return;\r\n\r\n // this.wrapper.style.display = this.open ? 'block' : 'none';\r\n // if (this.open) this.updatePosition();\r\n\r\n if (this.open) {\r\n this.wrapper.style.display = 'block';\r\n // RAF를 사용해서 다음 프레임에 위치 업데이트\r\n requestAnimationFrame(() => {\r\n this.updatePosition();\r\n if (this.wrapper) {\r\n this.wrapper.style.visibility = 'visible';\r\n }\r\n });\r\n } else {\r\n this.wrapper.style.display = 'none';\r\n this.wrapper.style.visibility = 'hidden';\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n if (this.rafId) cancelAnimationFrame(this.rafId);\r\n this.unobserveParent();\r\n this.wrapper?.remove();\r\n }\r\n\r\n private resolveContainer(): HTMLElement {\r\n const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;\r\n return el instanceof HTMLElement ? el : document.body;\r\n }\r\n\r\n private createWrapper() {\r\n this.wrapper = document.createElement('div');\r\n Object.assign(this.wrapper.style, {\r\n position: 'absolute',\r\n zIndex: this.zIndex.toString(),\r\n transition: 'opacity 0.4s',\r\n top: '-9999px',\r\n left: '-9999px',\r\n });\r\n this.container!.appendChild(this.wrapper);\r\n }\r\n\r\n private moveSlotContent() {\r\n if (!this.wrapper) return;\r\n const nodes = Array.from(this.el.childNodes).filter(n => n.nodeType !== Node.COMMENT_NODE);\r\n nodes.forEach(n => this.wrapper!.appendChild(n));\r\n }\r\n\r\n // 위치 갱신 (scroll / resize)\r\n @Listen('scroll', { target: 'window' })\r\n @Listen('resize', { target: 'window' })\r\n updatePosition() {\r\n if (this.rafId) cancelAnimationFrame(this.rafId);\r\n\r\n this.rafId = requestAnimationFrame(() => {\r\n if (!this.parentRef || !this.wrapper) return;\r\n\r\n const rect = this.parentRef.getBoundingClientRect();\r\n if (!rect.width && !rect.height) return; // 요소가 보이지 않는 경우\r\n\r\n const [offsetX, offsetY] = this.offset;\r\n const ARROW_SIZE = SdTooltipPortal.ARROW_SIZE;\r\n\r\n let top = 0;\r\n let left = 0;\r\n\r\n switch (this.placement) {\r\n case 'top':\r\n top = rect.top + window.scrollY - this.wrapper.offsetHeight + offsetY - ARROW_SIZE;\r\n left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;\r\n break;\r\n\r\n case 'bottom':\r\n top = rect.bottom + window.scrollY + offsetY + ARROW_SIZE;\r\n left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;\r\n break;\r\n\r\n case 'left':\r\n top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;\r\n left = rect.left + window.scrollX - this.wrapper.offsetWidth - offsetX - ARROW_SIZE;\r\n break;\r\n\r\n case 'right':\r\n top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;\r\n left = rect.right + window.scrollX + offsetX + ARROW_SIZE;\r\n break;\r\n }\r\n\r\n Object.assign(this.wrapper!.style, {\r\n top: `${top}px`,\r\n left: `${left}px`,\r\n });\r\n });\r\n }\r\n\r\n // parentRef의 이동 / 크기변경 감지\r\n private observeParent() {\r\n if (!this.parentRef) return;\r\n\r\n this.resizeObserver = new ResizeObserver(() => this.updatePosition());\r\n this.resizeObserver.observe(this.parentRef);\r\n\r\n this.mutationObserver = new MutationObserver(() => this.updatePosition());\r\n this.mutationObserver.observe(document.body, {\r\n childList: true,\r\n subtree: true,\r\n });\r\n }\r\n\r\n private unobserveParent() {\r\n this.resizeObserver?.disconnect();\r\n this.mutationObserver?.disconnect();\r\n }\r\n\r\n // 외부 클릭 감지\r\n @Listen('mousedown', { target: 'window' })\r\n handleMouseDown(e: MouseEvent) {\r\n this.isInsideClick = !!(this.wrapper && this.wrapper.contains(e.target as Node));\r\n }\r\n\r\n @Listen('click', { target: 'window' })\r\n handleWindowClick(e: MouseEvent) {\r\n if (this.isInsideClick) {\r\n this.isInsideClick = false;\r\n return;\r\n }\r\n if (this.wrapper?.contains(e.target as Node)) return;\r\n this.sdClose.emit();\r\n }\r\n\r\n render() {\r\n return <slot></slot>;\r\n }\r\n}\r\n"]}
|
|
1
|
+
{"version":3,"file":"sd-tooltip-portal.js","sourceRoot":"","sources":["../../../src/components/sd-tooltip-portal/sd-tooltip-portal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-tooltip-portal',\r\n shadow: true,\r\n})\r\nexport class SdTooltipPortal {\r\n @Element() el!: HTMLElement;\r\n @Prop() to: HTMLElement | string = 'body';\r\n @Prop() parentRef: HTMLElement | null = null;\r\n @Prop() offset: [number, number] = [0, 0];\r\n @Prop() zIndex: number = 9999;\r\n @Prop() placement: 'top' | 'bottom' | 'left' | 'right' = 'bottom';\r\n @Prop() open: boolean = false;\r\n\r\n @Event() sdClose!: EventEmitter<void>;\r\n\r\n private container?: HTMLElement;\r\n private wrapper?: HTMLElement;\r\n private rafId?: number;\r\n private isInsideClick = false;\r\n\r\n private resizeObserver?: ResizeObserver;\r\n private mutationObserver?: MutationObserver;\r\n\r\n private static readonly ARROW_SIZE = 11.2;\r\n\r\n componentDidLoad() {\r\n this.container = this.resolveContainer();\r\n this.createWrapper();\r\n this.moveSlotContent();\r\n\r\n // DOM이 완전히 렌더링된 후 위치 계산\r\n requestAnimationFrame(() => {\r\n this.updatePosition();\r\n if (this.wrapper) {\r\n this.wrapper.style.visibility = 'visible'; // 위치 계산 후 표시\r\n }\r\n });\r\n\r\n this.observeParent();\r\n }\r\n\r\n componentDidRender() {\r\n if (!this.wrapper) return;\r\n\r\n // this.wrapper.style.display = this.open ? 'block' : 'none';\r\n // if (this.open) this.updatePosition();\r\n\r\n if (this.open) {\r\n this.wrapper.style.display = 'block';\r\n // RAF를 사용해서 다음 프레임에 위치 업데이트\r\n requestAnimationFrame(() => {\r\n this.updatePosition();\r\n if (this.wrapper) {\r\n this.wrapper.style.visibility = 'visible';\r\n }\r\n });\r\n } else {\r\n this.wrapper.style.display = 'none';\r\n this.wrapper.style.visibility = 'hidden';\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n if (this.rafId) cancelAnimationFrame(this.rafId);\r\n this.unobserveParent();\r\n this.wrapper?.remove();\r\n }\r\n\r\n private resolveContainer(): HTMLElement {\r\n const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;\r\n return el instanceof HTMLElement ? el : document.body;\r\n }\r\n\r\n private createWrapper() {\r\n this.wrapper = document.createElement('div');\r\n Object.assign(this.wrapper.style, {\r\n position: 'absolute',\r\n zIndex: this.zIndex.toString(),\r\n transition: 'opacity 0.4s',\r\n top: '-9999px',\r\n left: '-9999px',\r\n });\r\n this.container!.appendChild(this.wrapper);\r\n }\r\n\r\n private moveSlotContent() {\r\n if (!this.wrapper) return;\r\n const nodes = Array.from(this.el.childNodes).filter(n => n.nodeType !== Node.COMMENT_NODE);\r\n nodes.forEach(n => this.wrapper!.appendChild(n));\r\n }\r\n\r\n // 위치 갱신 (scroll / resize)\r\n @Listen('scroll', { target: 'window' })\r\n @Listen('resize', { target: 'window' })\r\n updatePosition() {\r\n if (this.rafId) cancelAnimationFrame(this.rafId);\r\n\r\n this.rafId = requestAnimationFrame(() => {\r\n if (!this.parentRef || !this.wrapper) return;\r\n\r\n const rect = this.parentRef.getBoundingClientRect();\r\n if (!rect.width && !rect.height) return; // 요소가 보이지 않는 경우\r\n\r\n const [offsetX, offsetY] = this.offset;\r\n const ARROW_SIZE = SdTooltipPortal.ARROW_SIZE;\r\n\r\n let top = 0;\r\n let left = 0;\r\n\r\n switch (this.placement) {\r\n case 'top':\r\n top = rect.top + window.scrollY - this.wrapper.offsetHeight + offsetY - ARROW_SIZE;\r\n left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;\r\n break;\r\n\r\n case 'bottom':\r\n top = rect.bottom + window.scrollY + offsetY + ARROW_SIZE;\r\n left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;\r\n break;\r\n\r\n case 'left':\r\n top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;\r\n left = rect.left + window.scrollX - this.wrapper.offsetWidth - offsetX - ARROW_SIZE;\r\n break;\r\n\r\n case 'right':\r\n top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;\r\n left = rect.right + window.scrollX + offsetX + ARROW_SIZE;\r\n break;\r\n }\r\n\r\n Object.assign(this.wrapper!.style, {\r\n top: `${top}px`,\r\n left: `${left}px`,\r\n });\r\n });\r\n }\r\n\r\n // parentRef의 이동 / 크기변경 감지\r\n private observeParent() {\r\n if (!this.parentRef) return;\r\n\r\n this.resizeObserver = new ResizeObserver(() => this.updatePosition());\r\n this.resizeObserver.observe(this.parentRef);\r\n\r\n this.mutationObserver = new MutationObserver(() => this.updatePosition());\r\n this.mutationObserver.observe(document.body, {\r\n childList: true,\r\n subtree: true,\r\n });\r\n }\r\n\r\n private unobserveParent() {\r\n this.resizeObserver?.disconnect();\r\n this.mutationObserver?.disconnect();\r\n }\r\n\r\n // 외부 클릭 감지\r\n @Listen('mousedown', { target: 'window' })\r\n handleMouseDown(e: MouseEvent) {\r\n this.isInsideClick = !!(\r\n (this.wrapper && this.wrapper.contains(e.target as Node)) ||\r\n (this.parentRef && this.parentRef.contains(e.target as Node))\r\n );\r\n }\r\n\r\n @Listen('click', { target: 'window' })\r\n handleWindowClick(e: MouseEvent) {\r\n if (this.isInsideClick) {\r\n this.isInsideClick = false;\r\n return;\r\n }\r\n if (this.wrapper?.contains(e.target as Node)) return;\r\n this.sdClose.emit();\r\n }\r\n\r\n render() {\r\n return <slot></slot>;\r\n }\r\n}\r\n"]}
|
|
@@ -140,7 +140,8 @@ const SdTooltipPortal = /*@__PURE__*/ proxyCustomElement(class SdTooltipPortal e
|
|
|
140
140
|
}
|
|
141
141
|
// 외부 클릭 감지
|
|
142
142
|
handleMouseDown(e) {
|
|
143
|
-
this.isInsideClick = !!(this.wrapper && this.wrapper.contains(e.target))
|
|
143
|
+
this.isInsideClick = !!((this.wrapper && this.wrapper.contains(e.target)) ||
|
|
144
|
+
(this.parentRef && this.parentRef.contains(e.target)));
|
|
144
145
|
}
|
|
145
146
|
handleWindowClick(e) {
|
|
146
147
|
if (this.isInsideClick) {
|
|
@@ -152,7 +153,7 @@ const SdTooltipPortal = /*@__PURE__*/ proxyCustomElement(class SdTooltipPortal e
|
|
|
152
153
|
this.sdClose.emit();
|
|
153
154
|
}
|
|
154
155
|
render() {
|
|
155
|
-
return h("slot", { key: '
|
|
156
|
+
return h("slot", { key: '918c09f6f9b248a6ba08e622c375b63adb36d0c3' });
|
|
156
157
|
}
|
|
157
158
|
}, [769, "sd-tooltip-portal", {
|
|
158
159
|
"to": [1],
|
|
@@ -177,6 +178,6 @@ function defineCustomElement() {
|
|
|
177
178
|
}
|
|
178
179
|
|
|
179
180
|
export { SdTooltipPortal as S, defineCustomElement as d };
|
|
180
|
-
//# sourceMappingURL=p-
|
|
181
|
+
//# sourceMappingURL=p-4n8y_ubX.js.map
|
|
181
182
|
|
|
182
|
-
//# sourceMappingURL=p-
|
|
183
|
+
//# sourceMappingURL=p-4n8y_ubX.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"p-4n8y_ubX.js","mappings":";;MAMa,eAAe,iBAAAA,kBAAA,CAAA,MAAA,eAAA,SAAAC,CAAA,CAAA;;;;;;;;;;IAEnB,EAAE,GAAyB,MAAM;IACjC,SAAS,GAAuB,IAAI;AACpC,IAAA,MAAM,GAAqB,CAAC,CAAC,EAAE,CAAC,CAAC;IACjC,MAAM,GAAW,IAAI;IACrB,SAAS,GAAwC,QAAQ;IACzD,IAAI,GAAY,KAAK;AAEpB,IAAA,OAAO;AAER,IAAA,SAAS;AACT,IAAA,OAAO;AACP,IAAA,KAAK;IACL,aAAa,GAAG,KAAK;AAErB,IAAA,cAAc;AACd,IAAA,gBAAgB;AAEhB,IAAA,OAAgB,UAAU,GAAG,IAAI;IAEzC,gBAAgB,GAAA;AACf,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,gBAAgB,EAAE;QACxC,IAAI,CAAC,aAAa,EAAE;QACpB,IAAI,CAAC,eAAe,EAAE;;QAGtB,qBAAqB,CAAC,MAAK;YAC1B,IAAI,CAAC,cAAc,EAAE;AACrB,YAAA,IAAI,IAAI,CAAC,OAAO,EAAE;gBACjB,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,UAAU,GAAG,SAAS,CAAC;;AAE5C,SAAC,CAAC;QAEF,IAAI,CAAC,aAAa,EAAE;;IAGrB,kBAAkB,GAAA;QACjB,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE;;;AAKnB,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YACd,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO;;YAEpC,qBAAqB,CAAC,MAAK;gBAC1B,IAAI,CAAC,cAAc,EAAE;AACrB,gBAAA,IAAI,IAAI,CAAC,OAAO,EAAE;oBACjB,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,UAAU,GAAG,SAAS;;AAE3C,aAAC,CAAC;;aACI;YACN,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM;YACnC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ;;;IAI1C,oBAAoB,GAAA;QACnB,IAAI,IAAI,CAAC,KAAK;AAAE,YAAA,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC;QAChD,IAAI,CAAC,eAAe,EAAE;AACtB,QAAA,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE;;IAGf,gBAAgB,GAAA;QACvB,MAAM,EAAE,GAAG,OAAO,IAAI,CAAC,EAAE,KAAK,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,EAAE;AAClF,QAAA,OAAO,EAAE,YAAYA,CAAW,GAAG,EAAE,GAAG,QAAQ,CAAC,IAAI;;IAG9C,aAAa,GAAA;QACpB,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;QAC5C,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;AACjC,YAAA,QAAQ,EAAE,UAAU;AACpB,YAAA,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE;AAC9B,YAAA,UAAU,EAAE,cAAc;AAC1B,YAAA,GAAG,EAAE,SAAS;AACd,YAAA,IAAI,EAAE,SAAS;AACf,SAAA,CAAC;QACF,IAAI,CAAC,SAAU,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC;;IAGlC,eAAe,GAAA;QACtB,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE;QACnB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,CAAC;AAC1F,QAAA,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,IAAI,CAAC,OAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;;;IAMjD,cAAc,GAAA;QACb,IAAI,IAAI,CAAC,KAAK;AAAE,YAAA,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC;AAEhD,QAAA,IAAI,CAAC,KAAK,GAAG,qBAAqB,CAAC,MAAK;YACvC,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO;gBAAE;YAEtC,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,qBAAqB,EAAE;YACnD,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,MAAM;AAAE,gBAAA,OAAO;YAExC,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC,MAAM;AACtC,YAAA,MAAM,UAAU,GAAG,eAAe,CAAC,UAAU;YAE7C,IAAI,GAAG,GAAG,CAAC;YACX,IAAI,IAAI,GAAG,CAAC;AAEZ,YAAA,QAAQ,IAAI,CAAC,SAAS;AACrB,gBAAA,KAAK,KAAK;AACT,oBAAA,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,GAAG,OAAO,GAAG,UAAU;oBAClF,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,GAAG,CAAC,GAAG,OAAO;oBAC3F;AAED,gBAAA,KAAK,QAAQ;AACZ,oBAAA,GAAG,GAAG,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,OAAO,GAAG,OAAO,GAAG,UAAU;oBACzD,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,GAAG,CAAC,GAAG,OAAO;oBAC3F;AAED,gBAAA,KAAK,MAAM;oBACV,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,GAAG,CAAC,GAAG,OAAO;AAC3F,oBAAA,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,GAAG,OAAO,GAAG,UAAU;oBACnF;AAED,gBAAA,KAAK,OAAO;oBACX,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,GAAG,CAAC,GAAG,OAAO;AAC3F,oBAAA,IAAI,GAAG,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,OAAO,GAAG,OAAO,GAAG,UAAU;oBACzD;;YAGF,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAQ,CAAC,KAAK,EAAE;gBAClC,GAAG,EAAE,CAAG,EAAA,GAAG,CAAI,EAAA,CAAA;gBACf,IAAI,EAAE,CAAG,EAAA,IAAI,CAAI,EAAA,CAAA;AACjB,aAAA,CAAC;AACH,SAAC,CAAC;;;IAIK,aAAa,GAAA;QACpB,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE;AAErB,QAAA,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QACrE,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC;AAE3C,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QACzE,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE;AAC5C,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,OAAO,EAAE,IAAI;AACb,SAAA,CAAC;;IAGK,eAAe,GAAA;AACtB,QAAA,IAAI,CAAC,cAAc,EAAE,UAAU,EAAE;AACjC,QAAA,IAAI,CAAC,gBAAgB,EAAE,UAAU,EAAE;;;AAKpC,IAAA,eAAe,CAAC,CAAa,EAAA;QAC5B,IAAI,CAAC,aAAa,GAAG,CAAC,EACrB,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC;AACxD,aAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC,CAAC,CAC7D;;AAIF,IAAA,iBAAiB,CAAC,CAAa,EAAA;AAC9B,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;AACvB,YAAA,IAAI,CAAC,aAAa,GAAG,KAAK;YAC1B;;QAED,IAAI,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC;YAAE;AAC9C,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;;IAGpB,MAAM,GAAA;QACL,OAAO,8DAAa;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-tooltip-portal/sd-tooltip-portal.tsx"],"sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-tooltip-portal',\r\n shadow: true,\r\n})\r\nexport class SdTooltipPortal {\r\n @Element() el!: HTMLElement;\r\n @Prop() to: HTMLElement | string = 'body';\r\n @Prop() parentRef: HTMLElement | null = null;\r\n @Prop() offset: [number, number] = [0, 0];\r\n @Prop() zIndex: number = 9999;\r\n @Prop() placement: 'top' | 'bottom' | 'left' | 'right' = 'bottom';\r\n @Prop() open: boolean = false;\r\n\r\n @Event() sdClose!: EventEmitter<void>;\r\n\r\n private container?: HTMLElement;\r\n private wrapper?: HTMLElement;\r\n private rafId?: number;\r\n private isInsideClick = false;\r\n\r\n private resizeObserver?: ResizeObserver;\r\n private mutationObserver?: MutationObserver;\r\n\r\n private static readonly ARROW_SIZE = 11.2;\r\n\r\n componentDidLoad() {\r\n this.container = this.resolveContainer();\r\n this.createWrapper();\r\n this.moveSlotContent();\r\n\r\n // DOM이 완전히 렌더링된 후 위치 계산\r\n requestAnimationFrame(() => {\r\n this.updatePosition();\r\n if (this.wrapper) {\r\n this.wrapper.style.visibility = 'visible'; // 위치 계산 후 표시\r\n }\r\n });\r\n\r\n this.observeParent();\r\n }\r\n\r\n componentDidRender() {\r\n if (!this.wrapper) return;\r\n\r\n // this.wrapper.style.display = this.open ? 'block' : 'none';\r\n // if (this.open) this.updatePosition();\r\n\r\n if (this.open) {\r\n this.wrapper.style.display = 'block';\r\n // RAF를 사용해서 다음 프레임에 위치 업데이트\r\n requestAnimationFrame(() => {\r\n this.updatePosition();\r\n if (this.wrapper) {\r\n this.wrapper.style.visibility = 'visible';\r\n }\r\n });\r\n } else {\r\n this.wrapper.style.display = 'none';\r\n this.wrapper.style.visibility = 'hidden';\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n if (this.rafId) cancelAnimationFrame(this.rafId);\r\n this.unobserveParent();\r\n this.wrapper?.remove();\r\n }\r\n\r\n private resolveContainer(): HTMLElement {\r\n const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;\r\n return el instanceof HTMLElement ? el : document.body;\r\n }\r\n\r\n private createWrapper() {\r\n this.wrapper = document.createElement('div');\r\n Object.assign(this.wrapper.style, {\r\n position: 'absolute',\r\n zIndex: this.zIndex.toString(),\r\n transition: 'opacity 0.4s',\r\n top: '-9999px',\r\n left: '-9999px',\r\n });\r\n this.container!.appendChild(this.wrapper);\r\n }\r\n\r\n private moveSlotContent() {\r\n if (!this.wrapper) return;\r\n const nodes = Array.from(this.el.childNodes).filter(n => n.nodeType !== Node.COMMENT_NODE);\r\n nodes.forEach(n => this.wrapper!.appendChild(n));\r\n }\r\n\r\n // 위치 갱신 (scroll / resize)\r\n @Listen('scroll', { target: 'window' })\r\n @Listen('resize', { target: 'window' })\r\n updatePosition() {\r\n if (this.rafId) cancelAnimationFrame(this.rafId);\r\n\r\n this.rafId = requestAnimationFrame(() => {\r\n if (!this.parentRef || !this.wrapper) return;\r\n\r\n const rect = this.parentRef.getBoundingClientRect();\r\n if (!rect.width && !rect.height) return; // 요소가 보이지 않는 경우\r\n\r\n const [offsetX, offsetY] = this.offset;\r\n const ARROW_SIZE = SdTooltipPortal.ARROW_SIZE;\r\n\r\n let top = 0;\r\n let left = 0;\r\n\r\n switch (this.placement) {\r\n case 'top':\r\n top = rect.top + window.scrollY - this.wrapper.offsetHeight + offsetY - ARROW_SIZE;\r\n left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;\r\n break;\r\n\r\n case 'bottom':\r\n top = rect.bottom + window.scrollY + offsetY + ARROW_SIZE;\r\n left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;\r\n break;\r\n\r\n case 'left':\r\n top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;\r\n left = rect.left + window.scrollX - this.wrapper.offsetWidth - offsetX - ARROW_SIZE;\r\n break;\r\n\r\n case 'right':\r\n top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;\r\n left = rect.right + window.scrollX + offsetX + ARROW_SIZE;\r\n break;\r\n }\r\n\r\n Object.assign(this.wrapper!.style, {\r\n top: `${top}px`,\r\n left: `${left}px`,\r\n });\r\n });\r\n }\r\n\r\n // parentRef의 이동 / 크기변경 감지\r\n private observeParent() {\r\n if (!this.parentRef) return;\r\n\r\n this.resizeObserver = new ResizeObserver(() => this.updatePosition());\r\n this.resizeObserver.observe(this.parentRef);\r\n\r\n this.mutationObserver = new MutationObserver(() => this.updatePosition());\r\n this.mutationObserver.observe(document.body, {\r\n childList: true,\r\n subtree: true,\r\n });\r\n }\r\n\r\n private unobserveParent() {\r\n this.resizeObserver?.disconnect();\r\n this.mutationObserver?.disconnect();\r\n }\r\n\r\n // 외부 클릭 감지\r\n @Listen('mousedown', { target: 'window' })\r\n handleMouseDown(e: MouseEvent) {\r\n this.isInsideClick = !!(\r\n (this.wrapper && this.wrapper.contains(e.target as Node)) ||\r\n (this.parentRef && this.parentRef.contains(e.target as Node))\r\n );\r\n }\r\n\r\n @Listen('click', { target: 'window' })\r\n handleWindowClick(e: MouseEvent) {\r\n if (this.isInsideClick) {\r\n this.isInsideClick = false;\r\n return;\r\n }\r\n if (this.wrapper?.contains(e.target as Node)) return;\r\n this.sdClose.emit();\r\n }\r\n\r\n render() {\r\n return <slot></slot>;\r\n }\r\n}\r\n"],"version":3}
|
|
@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, h, F as Fragment } from './p-CbnL1UUF.js';
|
|
|
2
2
|
import { T as TooltipArrow } from './p-wA4KCOG0.js';
|
|
3
3
|
import { d as defineCustomElement$3 } from './p-CXuU0Q0J.js';
|
|
4
4
|
import { d as defineCustomElement$2 } from './p-DdLgl05o.js';
|
|
5
|
-
import { d as defineCustomElement$1 } from './p-
|
|
5
|
+
import { d as defineCustomElement$1 } from './p-4n8y_ubX.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
|
|
|
@@ -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-C5VIAyqc.js.map
|
|
120
120
|
|
|
121
|
-
//# sourceMappingURL=p-
|
|
121
|
+
//# sourceMappingURL=p-C5VIAyqc.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-C5VIAyqc.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 {\r\n [slot='content'] {\r\n display: none;\r\n }\r\n\r\n .sd-tooltip {\r\n position: relative;\r\n cursor: pointer;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n}\r\n\r\n.sd-tooltip-menu {\r\n width: fit-content;\r\n padding: 8px 16px;\r\n border-radius: 4px;\r\n font-size: 12px;\r\n position: relative;\r\n box-sizing: border-box;\r\n display: flex;\r\n align-items: start;\r\n justify-content: center;\r\n gap: 12px;\r\n\r\n &--with-close {\r\n padding-right: 12px !important;\r\n }\r\n\r\n &__arrow {\r\n position: absolute;\r\n display: flex;\r\n width: 9.6px;\r\n height: 7.2px;\r\n svg {\r\n width: 100%;\r\n height: 100%;\r\n }\r\n &--top {\r\n bottom: -7.2px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n }\r\n &--bottom {\r\n top: -7.2px;\r\n left: 50%;\r\n transform: translateX(-50%) rotate(180deg);\r\n }\r\n &--left {\r\n right: -7.2px;\r\n top: 50%;\r\n transform: translateY(-50%) rotate(-90deg);\r\n }\r\n &--right {\r\n left: -7.2px;\r\n top: 50%;\r\n transform: translateY(-50%) rotate(90deg);\r\n }\r\n }\r\n\r\n &__content {\r\n line-height: 20px;\r\n font-weight: 500;\r\n\r\n p {\r\n margin: 0;\r\n }\r\n }\r\n\r\n &__close-button {\r\n padding-top: 4px;\r\n display: flex;\r\n button {\r\n padding: 0;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n }\r\n }\r\n}\r\n","import { Component, Element, Fragment, Prop, State, h } from '@stencil/core';\r\nimport { HTMLStencilElement } from '@stencil/core/internal';\r\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\r\nimport { TooltipArrow } from '../assets/tooltipArrow';\r\n\r\n@Component({\r\n tag: 'sd-tooltip',\r\n styleUrl: 'sd-tooltip.scss',\r\n})\r\nexport class SdTooltip {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() trigger: 'hover' | 'click' = 'hover';\r\n @Prop() placement: 'top' | 'bottom' | 'left' | 'right' = 'top';\r\n @Prop() color: string = '#01BB4B';\r\n @Prop() type: 'default' | 'caution' | 'notice' | 'accent' = 'default';\r\n\r\n @Prop() icon: IconName = 'helpOutline';\r\n @Prop() iconSize: number = 12;\r\n\r\n @Prop() label: string = '';\r\n @Prop() buttonSize: ButtonSize = 'sm';\r\n @Prop() buttonVariant: ButtonVariant = 'primary';\r\n\r\n @Prop() noHover: boolean = true;\r\n\r\n @Prop() useClose: boolean = false;\r\n\r\n @State() showTooltip: boolean = false;\r\n @State() slotContent: HTMLElement | null = null;\r\n\r\n private static readonly COLOR_OF_TYPE = {\r\n default: { background: 'oceanblue_85', text: 'white' },\r\n caution: { background: 'red_20', text: 'red_70' },\r\n notice: { background: 'orange_10', text: 'orange_65' },\r\n accent: { background: 'brilliantblue_20', text: 'brilliantblue_75' },\r\n };\r\n\r\n private buttonEl?: HTMLStencilElement;\r\n\r\n private handleClose = () => {\r\n this.showTooltip = false;\r\n };\r\n\r\n // 현재 tooltip popover가 조건부 렌더링이여서 초기 slot이 렌더링 되지 않은 시점에\r\n // 데이터 매핑에 실패 (light dom에 저장된 slot내용을 shadow dom을 찾지못해 매핑 실패)\r\n // 따라서 slot내용을 받은 후에 복제하여 state에 저장\r\n componentWillLoad() {\r\n const contentEl = this.el.querySelector('[slot=\"content\"]');\r\n if (contentEl) {\r\n this.slotContent = contentEl.cloneNode(true) as HTMLElement;\r\n }\r\n }\r\n\r\n render() {\r\n const handleTrigger =\r\n this.trigger === 'hover'\r\n ? {\r\n onMouseEnter: () => (this.showTooltip = true),\r\n onMouseLeave: () => (this.showTooltip = false),\r\n }\r\n : {\r\n onClick: () => (this.showTooltip = !this.showTooltip),\r\n };\r\n\r\n return (\r\n <Fragment>\r\n {this.label ? (\r\n <sd-button\r\n ref={el => (this.buttonEl = el)}\r\n label={this.label}\r\n icon={this.icon}\r\n size={this.buttonSize}\r\n color={this.color}\r\n variant={this.buttonVariant}\r\n class=\"sd-tooltip\"\r\n {...handleTrigger}\r\n ></sd-button>\r\n ) : (\r\n <sd-icon\r\n ref={el => (this.buttonEl = el)}\r\n name={this.icon}\r\n size={this.iconSize}\r\n color={this.color}\r\n class=\"sd-tooltip\"\r\n {...handleTrigger}\r\n ></sd-icon>\r\n )}\r\n\r\n {this.showTooltip && (\r\n <sd-tooltip-portal\r\n parentRef={this.buttonEl}\r\n onSdClose={() => this.handleClose()}\r\n placement={this.placement}\r\n >\r\n <div\r\n class={{\r\n 'sd-tooltip-menu': true,\r\n [`sd-tooltip-menu--${this.type}`]: true,\r\n [`sd-tooltip-menu--${this.placement}`]: true,\r\n 'sd-tooltip-menu--with-close': this.useClose,\r\n [`bg-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,\r\n [`text-${SdTooltip.COLOR_OF_TYPE[this.type].text}`]: true,\r\n }}\r\n >\r\n <i class={`sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}`}>\r\n <TooltipArrow\r\n class={{\r\n [`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,\r\n }}\r\n ></TooltipArrow>\r\n </i>\r\n\r\n <div\r\n class=\"sd-tooltip-menu__content\"\r\n ref={el => {\r\n if (el && this.slotContent && !el.hasChildNodes()) {\r\n el.appendChild(this.slotContent.cloneNode(true));\r\n }\r\n }}\r\n >\r\n {!this.slotContent && <span>{this.el.textContent}</span>}\r\n </div>\r\n\r\n {this.useClose && (\r\n <div class=\"sd-tooltip-menu__close-button\">\r\n <button\r\n type=\"button\"\r\n aria-label=\"Close tooltip\"\r\n title=\"Close tooltip\"\r\n onClick={() => this.handleClose()}\r\n >\r\n <sd-icon name=\"close\" size=\"12\" color=\"#AAAAAA\"></sd-icon>\r\n </button>\r\n </div>\r\n )}\r\n </div>\r\n </sd-tooltip-portal>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, h, F as Fragment } from './p-CbnL1UUF.js';
|
|
|
2
2
|
import { T as TooltipArrow } from './p-wA4KCOG0.js';
|
|
3
3
|
import { d as defineCustomElement$4 } from './p-CXuU0Q0J.js';
|
|
4
4
|
import { d as defineCustomElement$3 } from './p-DdLgl05o.js';
|
|
5
|
-
import { d as defineCustomElement$2 } from './p-
|
|
5
|
+
import { d as defineCustomElement$2 } from './p-4n8y_ubX.js';
|
|
6
6
|
|
|
7
7
|
const sdPopoverCss = ".sd-popover{position:relative;cursor:pointer;display:inline-block}";
|
|
8
8
|
|
|
@@ -8,8 +8,8 @@ import { d as defineCustomElement$7 } from './p-DEpODYm6.js';
|
|
|
8
8
|
import { d as defineCustomElement$6 } from './p-DkdbagIN.js';
|
|
9
9
|
import { d as defineCustomElement$5 } from './p-zBDALS_T.js';
|
|
10
10
|
import { d as defineCustomElement$4 } from './p-CgMn3XX-.js';
|
|
11
|
-
import { d as defineCustomElement$3 } from './p-
|
|
12
|
-
import { d as defineCustomElement$2 } from './p-
|
|
11
|
+
import { d as defineCustomElement$3 } from './p-C5VIAyqc.js';
|
|
12
|
+
import { d as defineCustomElement$2 } from './p-4n8y_ubX.js';
|
|
13
13
|
|
|
14
14
|
const sdTableBackupCss = ".sd-table__wrapper .sd-table__container .sd-table__middle{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:horizontal{height:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:vertical{width:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-track{background-color:transparent}.sd-table__wrapper{height:var(--table-height, auto);width:var(--table-width, 100%);color:#222222}.sd-table__wrapper .sd-table__container{width:100%;height:var(--table-height, auto);position:relative;border:1px solid #e1e1e1;border-radius:8px;font-size:12px;overflow:hidden;background:#ffffff}.sd-table__wrapper .sd-table__container .sd-table__middle{overflow:auto;will-change:scroll-position}.sd-table__wrapper .sd-table__container .sd-table__middle--scrollable{height:var(--table-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle--loading{overflow:hidden !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected{width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-header thead{position:sticky;top:0;z-index:120}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-right{position:sticky;background-color:#f5faff;z-index:110 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-right{position:sticky;background-color:white;z-index:100 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-left{left:var(--sticky-left-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-right{right:var(--sticky-right-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-cell{position:sticky;z-index:102;background-color:#f5faff}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-cell{position:sticky;z-index:101;background-color:white}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge:after{content:\"\";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge:after{content:\"\";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead{opacity:0.4}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead tr th.sd-th{border-bottom:1px solid rgba(225, 225, 225, 0.4) !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-td,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-th,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table .sd-th__content--label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead{height:36px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr{width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th{background:#f5faff;height:36px;padding:0 16px;font-weight:500;vertical-align:middle;border-bottom:1px solid #e1e1e1;-webkit-user-select:none;user-select:none;position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:4px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--left{justify-content:flex-start}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--center{justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--right{justify-content:flex-end}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:16px;cursor:col-resize;z-index:3;border-left:1px solid #cccccc;border-right:1px solid #cccccc}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody .sd-table__loading{position:absolute;top:0;left:0;width:100%;height:100%;min-height:100%;background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td{height:44px;padding:0 16px;border-bottom:1px solid #e1e1e1;background:white;vertical-align:middle}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--left{text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--center{text-align:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--right{text-align:right}.sd-table__wrapper .sd-table__container .sd-table__bottom{background:white;text-align:center}.sd-table__wrapper .sd-table__container .sd-table__bottom .sd-table__no-data{padding-top:15%;color:#888888}.sd-table__wrapper .sd-table__pagination{position:relative;background:#f9f9f9;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid #e1e1e1;border-top:none;border-radius:8px}.sd-table__wrapper .sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}";
|
|
15
15
|
|
|
@@ -9,8 +9,8 @@ import { d as defineCustomElement$8 } from './p-zBDALS_T.js';
|
|
|
9
9
|
import { d as defineCustomElement$7 } from './p-CgMn3XX-.js';
|
|
10
10
|
import { d as defineCustomElement$6 } from './p-D1PUeI-N.js';
|
|
11
11
|
import { d as defineCustomElement$5 } from './p-CgvMD0f4.js';
|
|
12
|
-
import { d as defineCustomElement$4 } from './p-
|
|
13
|
-
import { d as defineCustomElement$3 } from './p-
|
|
12
|
+
import { d as defineCustomElement$4 } from './p-C5VIAyqc.js';
|
|
13
|
+
import { d as defineCustomElement$3 } from './p-4n8y_ubX.js';
|
|
14
14
|
import { d as defineCustomElement$2 } from './p-vpG6iign.js';
|
|
15
15
|
|
|
16
16
|
const sdTableCss = ".sd-table__wrapper .sd-table__container .sd-table__middle{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:horizontal{height:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:vertical{width:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-track{background-color:transparent}.sd-table__wrapper{height:var(--table-height, auto);width:var(--table-width, 100%);color:#222222}.sd-table__wrapper .sd-table__container{width:100%;height:auto;border:1px solid #e1e1e1;border-radius:8px;font-size:12px;overflow:hidden}.sd-table__wrapper .sd-table__container .sd-table__middle{overflow:auto;will-change:scroll-position;height:var(--table-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected{width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-header thead{position:sticky;top:0;z-index:120}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-right{position:sticky;background-color:#f5faff;z-index:110 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-right{position:sticky;background-color:white;z-index:100 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-left{left:var(--sticky-left-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-right{right:var(--sticky-right-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-cell{position:sticky;z-index:102;background-color:#f5faff}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-cell{position:sticky;z-index:101;background-color:white}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge:after{content:\"\";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge:after{content:\"\";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead{opacity:0.4}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead tr th.sd-th{border-bottom:1px solid rgba(225, 225, 225, 0.4) !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-td,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-th,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table .sd-th__content--label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead{height:36px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr{width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-th{background:#f5faff;height:36px;padding:0 16px;font-weight:500;vertical-align:middle;border-bottom:1px solid #e1e1e1;-webkit-user-select:none;user-select:none;position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-th.sd-th .sd-th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:4px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-th.sd-th .sd-th__content--left{justify-content:flex-start}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-th.sd-th .sd-th__content--center{justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-th.sd-th .sd-th__content--right{justify-content:flex-end}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-th.sd-th .sd-th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:16px;cursor:col-resize;z-index:3;border-left:1px solid #cccccc;border-right:1px solid #cccccc}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody .sd-table__loading{position:absolute;top:0;left:0;width:100%;height:calc(var(--table-height, auto) - 36px);min-height:calc(100% - 36px);background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody sd-tr:last-of-type sd-td{border-bottom:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody sd-tr sd-td{height:44px;padding:0 16px;border-bottom:1px solid #e1e1e1;background:white;vertical-align:middle}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody sd-tr sd-td.sd-td--left{text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody sd-tr sd-td.sd-td--center{text-align:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody sd-tr sd-td.sd-td--right{text-align:right}.sd-table__wrapper .sd-table__container .sd-table__bottom{background:white;text-align:center}.sd-table__wrapper .sd-table__pagination{position:relative;background:#f9f9f9;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid #e1e1e1;border-top:none;border-radius:8px}.sd-table__wrapper .sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { S as SdTooltipPortal$1, d as defineCustomElement$1 } from './p-
|
|
1
|
+
import { S as SdTooltipPortal$1, d as defineCustomElement$1 } from './p-4n8y_ubX.js';
|
|
2
2
|
|
|
3
3
|
const SdTooltipPortal = SdTooltipPortal$1;
|
|
4
4
|
const defineCustomElement = defineCustomElement$1;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,g as o,b as a}from"./p-B2T3tS5r.js";export{s as setNonce}from"./p-B2T3tS5r.js";var l=()=>{const o=import.meta.url;const a={};if(o!==""){a.resourcesUrl=new URL(".",o).href}return e(a)};l().then((async e=>{await o();return a([["p-874ce442",[[772,"sd-table-backup",{columns:[16],rows:[1040],selected:[1040],rowKey:[1,"row-key"],selectable:[4],resizable:[4],width:[1],height:[1],stickyHeader:[4,"sticky-header"],stickyColumn:[16],noDataLabel:[1,"no-data-label"],isLoading:[4,"is-loading"],pagination:[16],bodyCellRenderer:[16],useInternalPagination:[4,"use-internal-pagination"],useRowsPerPageSelect:[4,"use-rows-per-page-select"],rowsPerPageOption:[16],currentPage:[32],innerRows:[32],innerSelected:[32],columnWidths:[32],scrolledLeft:[32],scrolledRight:[32]},null,{columns:["handleColumnsChange"],rows:["handleRowsChange"],selected:["handleSelectedChange"],pagination:["handlePaginationChange"]}]]],["p-e1eb49de",[[772,"sd-select-multiple",{value:[1040],label:[1],options:[1040],placeholder:[1],optionPlaceholder:[1,"option-placeholder"],width:[1],dropdownHeight:[1,"dropdown-height"],disabled:[4],clearable:[4],searchable:[4],useCheckbox:[4,"use-checkbox"],optionRenderer:[16],filteredOptions:[32],isOpen:[32],searchText:[32],itemIndex:[32],isScrolled:[32]},null,{value:["valueChanged"],options:["optionsChanged"],searchText:["searchTextChanged"],itemIndex:["itemIndexChanged"],isOpen:["isOpenChanged"]}]]],["p-da63329a",[[772,"sd-select-multiple-group",{value:[1040],label:[1],options:[1040],placeholder:[1],optionPlaceholder:[1,"option-placeholder"],width:[1],dropdownHeight:[1,"dropdown-height"],disabled:[4],clearable:[4],searchable:[4],useCheckbox:[4,"use-checkbox"],useAll:[4,"use-all"],allCheckedLabel:[1,"all-checked-label"],allCheckOptionLabel:[1,"all-check-option-label"],containerStyle:[16],triggerStyle:[16],dropdownStyle:[16],optionStyle:[16],labelStyle:[16],optionRenderer:[16],filteredOptions:[32],isOpen:[32],searchText:[32],itemIndex:[32],isScrolled:[32]},null,{value:["valueChanged"],options:["optionsChanged"],searchText:["searchTextChanged"],itemIndex:["itemIndexChanged"],isOpen:["isOpenChanged"]}]]],["p-424caa3a",[[770,"sd-date-picker",{date:[1],label:[1],selectable:[16],disabled:[4],isOpen:[32],currentDate:[32],currentYear:[32],currentMonth:[32]}]]],["p-2d43c3ce",[[770,"sd-date-range-picker",{date:[16],label:[1],selectable:[16],maxRange:[2,"max-range"],disabled:[4],isOpen:[32],dateRange:[32],hoverDate:[32],prevYear:[32],prevMonth:[32]}]]],["p-34d84584",[[769,"sd-popover",{show:[1028],placement:[513],color:[513],icon:[513],iconSize:[514,"icon-size"],label:[1],buttonSize:[513,"button-size"],buttonVariant:[513,"button-variant"],menuTitle:[513,"title"],messages:[16],buttons:[16],menuClass:[1,"menu-class"],noHover:[4,"no-hover"],useClose:[4,"use-close"],showPopover:[32],slotContent:[32]},null,{show:["watchShowHandler"]}]]],["p-e572253b",[[770,"sd-badge",{size:[1],color:[1],label:[1]}]]],["p-5eb63212",[[772,"sd-card",{bordered:[4],class:[1]}]]],["p-90e25920",[[768,"sd-progress",{type:[1],status:[1],percentage:[2],size:[2],strokeWidth:[2,"stroke-width"],label:[1]}]]],["p-c70b5ef1",[[769,"sd-tag",{size:[1],color:[1],rounded:[4],label:[1],bgColor:[1,"bg-color"],textColor:[1,"text-color"]}]]],["p-7dbd4fe6",[[772,"sd-td",{name:[1],align:[1],tdStyle:[16],tdClass:[1,"td-class"]}]]],["p-9e5946b6",[[256,"sd-loading-spinner"]]],["p-
|
|
1
|
+
import{p as e,g as o,b as a}from"./p-B2T3tS5r.js";export{s as setNonce}from"./p-B2T3tS5r.js";var l=()=>{const o=import.meta.url;const a={};if(o!==""){a.resourcesUrl=new URL(".",o).href}return e(a)};l().then((async e=>{await o();return a([["p-874ce442",[[772,"sd-table-backup",{columns:[16],rows:[1040],selected:[1040],rowKey:[1,"row-key"],selectable:[4],resizable:[4],width:[1],height:[1],stickyHeader:[4,"sticky-header"],stickyColumn:[16],noDataLabel:[1,"no-data-label"],isLoading:[4,"is-loading"],pagination:[16],bodyCellRenderer:[16],useInternalPagination:[4,"use-internal-pagination"],useRowsPerPageSelect:[4,"use-rows-per-page-select"],rowsPerPageOption:[16],currentPage:[32],innerRows:[32],innerSelected:[32],columnWidths:[32],scrolledLeft:[32],scrolledRight:[32]},null,{columns:["handleColumnsChange"],rows:["handleRowsChange"],selected:["handleSelectedChange"],pagination:["handlePaginationChange"]}]]],["p-e1eb49de",[[772,"sd-select-multiple",{value:[1040],label:[1],options:[1040],placeholder:[1],optionPlaceholder:[1,"option-placeholder"],width:[1],dropdownHeight:[1,"dropdown-height"],disabled:[4],clearable:[4],searchable:[4],useCheckbox:[4,"use-checkbox"],optionRenderer:[16],filteredOptions:[32],isOpen:[32],searchText:[32],itemIndex:[32],isScrolled:[32]},null,{value:["valueChanged"],options:["optionsChanged"],searchText:["searchTextChanged"],itemIndex:["itemIndexChanged"],isOpen:["isOpenChanged"]}]]],["p-da63329a",[[772,"sd-select-multiple-group",{value:[1040],label:[1],options:[1040],placeholder:[1],optionPlaceholder:[1,"option-placeholder"],width:[1],dropdownHeight:[1,"dropdown-height"],disabled:[4],clearable:[4],searchable:[4],useCheckbox:[4,"use-checkbox"],useAll:[4,"use-all"],allCheckedLabel:[1,"all-checked-label"],allCheckOptionLabel:[1,"all-check-option-label"],containerStyle:[16],triggerStyle:[16],dropdownStyle:[16],optionStyle:[16],labelStyle:[16],optionRenderer:[16],filteredOptions:[32],isOpen:[32],searchText:[32],itemIndex:[32],isScrolled:[32]},null,{value:["valueChanged"],options:["optionsChanged"],searchText:["searchTextChanged"],itemIndex:["itemIndexChanged"],isOpen:["isOpenChanged"]}]]],["p-424caa3a",[[770,"sd-date-picker",{date:[1],label:[1],selectable:[16],disabled:[4],isOpen:[32],currentDate:[32],currentYear:[32],currentMonth:[32]}]]],["p-2d43c3ce",[[770,"sd-date-range-picker",{date:[16],label:[1],selectable:[16],maxRange:[2,"max-range"],disabled:[4],isOpen:[32],dateRange:[32],hoverDate:[32],prevYear:[32],prevMonth:[32]}]]],["p-34d84584",[[769,"sd-popover",{show:[1028],placement:[513],color:[513],icon:[513],iconSize:[514,"icon-size"],label:[1],buttonSize:[513,"button-size"],buttonVariant:[513,"button-variant"],menuTitle:[513,"title"],messages:[16],buttons:[16],menuClass:[1,"menu-class"],noHover:[4,"no-hover"],useClose:[4,"use-close"],showPopover:[32],slotContent:[32]},null,{show:["watchShowHandler"]}]]],["p-e572253b",[[770,"sd-badge",{size:[1],color:[1],label:[1]}]]],["p-5eb63212",[[772,"sd-card",{bordered:[4],class:[1]}]]],["p-90e25920",[[768,"sd-progress",{type:[1],status:[1],percentage:[2],size:[2],strokeWidth:[2,"stroke-width"],label:[1]}]]],["p-c70b5ef1",[[769,"sd-tag",{size:[1],color:[1],rounded:[4],label:[1],bgColor:[1,"bg-color"],textColor:[1,"text-color"]}]]],["p-7dbd4fe6",[[772,"sd-td",{name:[1],align:[1],tdStyle:[16],tdClass:[1,"td-class"]}]]],["p-9e5946b6",[[256,"sd-loading-spinner"]]],["p-66a3fe4d",[[772,"sd-table",{columns:[16],rows:[1040],selected:[1040],rowKey:[1,"row-key"],selectable:[4],resizable:[4],width:[1],height:[1],stickyHeader:[4,"sticky-header"],stickyColumn:[16],noDataLabel:[1,"no-data-label"],isLoading:[4,"is-loading"],pagination:[16],bodyCellRenderer:[16],useInternalPagination:[4,"use-internal-pagination"],useRowsPerPageSelect:[4,"use-rows-per-page-select"],rowsPerPageOption:[16],currentPage:[32],innerRows:[32],innerSelected:[32],columnWidths:[32],scrolledLeft:[32],scrolledRight:[32]},null,{columns:["handleColumnsChange"],rows:["handleRowsChange"],selected:["handleSelectedChange"],pagination:["handlePaginationChange"]}],[768,"sd-guide",{type:[1],label:[1],message:[1],guideUrl:[1,"guide-url"],popupWidth:[2,"popup-width"],popupShow:[32]}],[260,"sd-tbody"],[260,"sd-th"],[260,"sd-tr"],[772,"sd-select",{value:[1032],label:[1],options:[1040],placeholder:[1],optionPlaceholder:[1,"option-placeholder"],width:[1],dropdownHeight:[1,"dropdown-height"],disabled:[4],clearable:[4],searchable:[4],optionRenderer:[16],filteredOptions:[32],isOpen:[32],searchText:[32],itemIndex:[32],isScrolled:[32]},null,{value:["valueChanged"],options:["optionsChanged"],searchText:["searchTextChanged"],itemIndex:["itemIndexChanged"],isOpen:["isOpenChanged"]}],[768,"sd-tooltip",{trigger:[1],placement:[1],color:[1],type:[1],icon:[1],iconSize:[2,"icon-size"],label:[1],buttonSize:[1,"button-size"],buttonVariant:[1,"button-variant"],noHover:[4,"no-hover"],useClose:[4,"use-close"],showTooltip:[32],slotContent:[32]}],[768,"sd-pagination",{currentPage:[2,"current-page"],lastPage:[2,"last-page"],simple:[4]},null,{currentPage:["onPropChange"],lastPage:["onPropChange"]}],[768,"sd-select-option",{option:[16],index:[2],isSelected:[4,"is-selected"],isFocused:[4,"is-focused"],optionStyle:[16],disabled:[4],useCheckbox:[4,"use-checkbox"],isHovered:[32],isDisabled:[64]}],[769,"sd-tooltip-portal",{to:[1],parentRef:[16],offset:[16],zIndex:[2,"z-index"],placement:[1],open:[4]},[[9,"scroll","updatePosition"],[9,"resize","updatePosition"],[9,"mousedown","handleMouseDown"],[8,"click","handleWindowClick"]]],[768,"sd-button",{variant:[1],size:[1],color:[1],label:[1],disabled:[4],type:[1],icon:[1],iconColor:[1,"icon-color"],iconSize:[2,"icon-size"],iconRight:[1,"icon-right"],noHover:[4,"no-hover"],class:[1]}],[768,"sd-checkbox",{checked:[4],val:[8],disabled:[4],label:[1],isChecked:[32]},null,{checked:["watchValueHandler"]}],[772,"sd-input",{value:[1032],label:[1],placeholder:[1],disabled:[4],clearable:[4],width:[8],barcode:[4],rules:[16],autoFocus:[4,"auto-focus"],status:[1],inputClass:[1,"input-class"],readonly:[4],inputStyle:[16],internalValue:[32],error:[32],focused:[32],hovered:[32],getNativeElement:[64]},null,{value:["valueChanged"],internalValue:["internalValueChanged"]}],[772,"sd-portal",{to:[1],parentRef:[16],offset:[16],zIndex:[2,"z-index"],open:[4]},[[9,"scroll","updatePosition"],[9,"resize","updatePosition"],[9,"mousedown","handleMouseDown"],[8,"click","handleWindowClick"]]],[768,"sd-icon",{name:[1],size:[8],color:[1],rotate:[2],label:[1],iconStyle:[16]}]]],["p-e76b69e2",[[768,"sd-select-option-group",{option:[16],index:[2],isSelected:[4,"is-selected"],isFocused:[4,"is-focused"],optionStyle:[16],disabled:[4],useCheckbox:[4,"use-checkbox"],useIndicator:[4,"use-indicator"],countInfo:[16],isHovered:[32],isDisabled:[64]}]]],["p-871c8d66",[[770,"sd-date-box",{date:[8],disabled:[4],selected:[4],isStartDate:[4,"is-start-date"],isEndDate:[4,"is-end-date"],isToday:[4,"is-today"],inRange:[4,"in-range"],type:[1]}]]]],e)}));
|
|
2
2
|
//# sourceMappingURL=design-system.esm.js.map
|