aeico-components 0.1.6 → 0.1.8
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/README.md +0 -0
- package/dist/alert.cjs +637 -4
- package/dist/alert.cjs.map +7 -1
- package/dist/alert.js +575 -3
- package/dist/alert.js.map +7 -1
- package/dist/badge.cjs +573 -4
- package/dist/badge.cjs.map +7 -1
- package/dist/badge.js +510 -3
- package/dist/badge.js.map +7 -1
- package/dist/breadcrumb.cjs +709 -5
- package/dist/breadcrumb.cjs.map +7 -1
- package/dist/breadcrumb.js +644 -4
- package/dist/breadcrumb.js.map +7 -1
- package/dist/button-group.cjs +546 -4
- package/dist/button-group.cjs.map +7 -1
- package/dist/button-group.js +489 -3
- package/dist/button-group.js.map +7 -1
- package/dist/button.cjs +834 -4
- package/dist/button.cjs.map +7 -1
- package/dist/button.js +771 -3
- package/dist/button.js.map +7 -1
- package/dist/card.cjs +574 -4
- package/dist/card.cjs.map +7 -1
- package/dist/card.js +516 -3
- package/dist/card.js.map +7 -1
- package/dist/checkbox.cjs +867 -4
- package/dist/checkbox.cjs.map +7 -1
- package/dist/checkbox.js +794 -3
- package/dist/checkbox.js.map +7 -1
- package/dist/copy-button.cjs +1046 -4
- package/dist/copy-button.cjs.map +7 -1
- package/dist/copy-button.js +969 -3
- package/dist/copy-button.js.map +7 -1
- package/dist/detail-group.cjs +533 -0
- package/dist/detail-group.cjs.map +7 -0
- package/dist/detail-group.js +477 -0
- package/dist/detail-group.js.map +7 -0
- package/dist/detail.cjs +627 -4
- package/dist/detail.cjs.map +7 -1
- package/dist/detail.js +569 -3
- package/dist/detail.js.map +7 -1
- package/dist/dialog.cjs +738 -4
- package/dist/dialog.cjs.map +7 -1
- package/dist/dialog.js +665 -3
- package/dist/dialog.js.map +7 -1
- package/dist/divider.cjs +558 -4
- package/dist/divider.cjs.map +7 -1
- package/dist/divider.js +502 -3
- package/dist/divider.js.map +7 -1
- package/dist/drawer.cjs +818 -4
- package/dist/drawer.cjs.map +7 -1
- package/dist/drawer.js +749 -3
- package/dist/drawer.js.map +7 -1
- package/dist/dropdown.cjs +1396 -5
- package/dist/dropdown.cjs.map +7 -1
- package/dist/dropdown.js +1316 -4
- package/dist/dropdown.js.map +7 -1
- package/dist/icon-button.cjs +999 -4
- package/dist/icon-button.cjs.map +7 -1
- package/dist/icon-button.js +930 -3
- package/dist/icon-button.js.map +7 -1
- package/dist/icon.cjs +613 -4
- package/dist/icon.cjs.map +7 -1
- package/dist/icon.js +547 -3
- package/dist/icon.js.map +7 -1
- package/dist/index.cjs +6484 -188
- package/dist/index.cjs.map +7 -1
- package/dist/index.js +6095 -147
- package/dist/index.js.map +7 -1
- package/dist/menu.cjs +841 -4
- package/dist/menu.cjs.map +7 -1
- package/dist/menu.js +785 -3
- package/dist/menu.js.map +7 -1
- package/dist/navbar.cjs +622 -4
- package/dist/navbar.cjs.map +7 -1
- package/dist/navbar.js +564 -3
- package/dist/navbar.js.map +7 -1
- package/dist/number-input.cjs +887 -0
- package/dist/number-input.cjs.map +7 -0
- package/dist/number-input.js +820 -0
- package/dist/number-input.js.map +7 -0
- package/dist/pagination.cjs +1099 -4
- package/dist/pagination.cjs.map +7 -1
- package/dist/pagination.js +1029 -3
- package/dist/pagination.js.map +7 -1
- package/dist/progress-bar.cjs +581 -4
- package/dist/progress-bar.cjs.map +7 -1
- package/dist/progress-bar.js +525 -3
- package/dist/progress-bar.js.map +7 -1
- package/dist/radio-group.cjs +973 -5
- package/dist/radio-group.cjs.map +7 -1
- package/dist/radio-group.js +899 -4
- package/dist/radio-group.js.map +7 -1
- package/dist/select.cjs +1242 -45
- package/dist/select.cjs.map +7 -1
- package/dist/select.js +1159 -44
- package/dist/select.js.map +7 -1
- package/dist/slider.cjs +1420 -4
- package/dist/slider.cjs.map +7 -1
- package/dist/slider.js +1351 -3
- package/dist/slider.js.map +7 -1
- package/dist/spinner.cjs +587 -4
- package/dist/spinner.cjs.map +7 -1
- package/dist/spinner.js +528 -3
- package/dist/spinner.js.map +7 -1
- package/dist/styles/layout.cjs +1 -0
- package/dist/styles/layout.js +1 -0
- package/dist/styles/radius.cjs +1 -0
- package/dist/styles/radius.js +1 -0
- package/dist/styles/variables.cjs +1 -0
- package/dist/styles/variables.js +1 -0
- package/dist/switch.cjs +1092 -4
- package/dist/switch.cjs.map +7 -1
- package/dist/switch.js +1013 -3
- package/dist/switch.js.map +7 -1
- package/dist/tabs.cjs +660 -6
- package/dist/tabs.cjs.map +7 -1
- package/dist/tabs.js +591 -5
- package/dist/tabs.js.map +7 -1
- package/dist/tag.cjs +591 -3
- package/dist/tag.cjs.map +7 -1
- package/dist/tag.js +532 -2
- package/dist/tag.js.map +7 -1
- package/dist/text-input.cjs +829 -4
- package/dist/text-input.cjs.map +7 -1
- package/dist/text-input.js +761 -3
- package/dist/text-input.js.map +7 -1
- package/dist/textarea.cjs +914 -3
- package/dist/textarea.cjs.map +7 -1
- package/dist/textarea.js +854 -2
- package/dist/textarea.js.map +7 -1
- package/dist/tooltip.cjs +764 -4
- package/dist/tooltip.cjs.map +7 -1
- package/dist/tooltip.js +711 -3
- package/dist/tooltip.js.map +7 -1
- package/dist/tree.cjs +1059 -4
- package/dist/tree.cjs.map +7 -1
- package/dist/tree.js +985 -3
- package/dist/tree.js.map +7 -1
- package/dist/types/card/defines.d.ts +1 -1
- package/dist/types/detail/defines.d.ts +1 -1
- package/dist/types/dialog/dialog.d.ts +1 -0
- package/dist/types/drawer/drawer.d.ts +2 -0
- package/dist/types/icon/defines.d.ts +7 -1
- package/dist/types/icon/index.d.ts +1 -1
- package/dist/types/menu/defines.d.ts +1 -0
- package/dist/types/menu/menu-item.d.ts +1 -0
- package/dist/types/menu/menu.d.ts +1 -0
- package/dist/types/styles/layout.d.ts +2 -0
- package/dist/types/styles/radius.d.ts +2 -0
- package/dist/types/styles/variables.d.ts +2 -0
- package/dist/types/tabs/defines.d.ts +1 -0
- package/dist/types/tabs/tabs.d.ts +3 -0
- package/package.json +31 -7
- package/src/alert/alert.ts +3 -3
- package/src/badge/badge.ts +4 -4
- package/src/breadcrumb/breadcrumb-item.ts +2 -2
- package/src/breadcrumb/breadcrumb.ts +3 -3
- package/src/button/button.ts +4 -4
- package/src/button-group/button-group.ts +8 -9
- package/src/card/card.ts +3 -3
- package/src/card/defines.ts +1 -1
- package/src/checkbox/checkbox.ts +6 -6
- package/src/copy-button/copy-button.ts +13 -9
- package/src/detail/defines.ts +1 -1
- package/src/detail/detail.ts +3 -3
- package/src/detail-group/detail-group.ts +2 -2
- package/src/dialog/dialog.ts +15 -14
- package/src/divider/divider.ts +3 -3
- package/src/drawer/drawer.ts +28 -11
- package/src/dropdown/dropdown-item.ts +2 -2
- package/src/dropdown/dropdown.ts +2 -2
- package/src/icon/defines.ts +8 -1
- package/src/icon/icon.ts +32 -14
- package/src/icon/index.ts +1 -1
- package/src/icon/registry.ts +2 -2
- package/src/menu/defines.ts +1 -0
- package/src/menu/menu-item.ts +14 -4
- package/src/menu/menu.ts +5 -2
- package/src/navbar/navbar.ts +3 -3
- package/src/number-input/number-input.ts +5 -5
- package/src/pagination/pagination.ts +3 -3
- package/src/progress-bar/progress-bar.ts +3 -3
- package/src/radio-group/radio-group.ts +12 -8
- package/src/select/select-option.ts +2 -2
- package/src/select/select.ts +5 -5
- package/src/slider/slider.ts +6 -6
- package/src/spinner/spinner.ts +4 -4
- package/src/styles/color.css +91 -91
- package/src/styles/components/action-button.css +12 -12
- package/src/styles/components/alert.css +22 -28
- package/src/styles/components/badge.css +13 -20
- package/src/styles/components/breadcrumb-item.css +7 -7
- package/src/styles/components/button-group.css +2 -0
- package/src/styles/components/button.css +39 -50
- package/src/styles/components/card.css +69 -30
- package/src/styles/components/checkbox.css +22 -16
- package/src/styles/components/copy-button.css +22 -33
- package/src/styles/components/detail.css +51 -39
- package/src/styles/components/dialog.css +11 -11
- package/src/styles/components/divider.css +3 -3
- package/src/styles/components/drawer.css +59 -27
- package/src/styles/components/dropdown-item.css +7 -8
- package/src/styles/components/dropdown.css +3 -4
- package/src/styles/components/field-label.css +13 -13
- package/src/styles/components/icon-button.css +25 -36
- package/src/styles/components/icon.css +1 -1
- package/src/styles/components/menu-item.css +13 -8
- package/src/styles/components/navbar.css +23 -44
- package/src/styles/components/number-input.css +27 -36
- package/src/styles/components/pagination.css +31 -31
- package/src/styles/components/progress-bar.css +2 -3
- package/src/styles/components/radio-group.css +88 -83
- package/src/styles/components/select-option.css +5 -5
- package/src/styles/components/select.css +21 -33
- package/src/styles/components/slider.css +56 -34
- package/src/styles/components/spinner.css +7 -9
- package/src/styles/components/switch.css +21 -19
- package/src/styles/components/tab.css +4 -5
- package/src/styles/components/tabs.css +48 -1
- package/src/styles/components/tag.css +14 -21
- package/src/styles/components/text-input.css +13 -22
- package/src/styles/components/textarea.css +12 -21
- package/src/styles/components/tooltip.css +4 -5
- package/src/styles/components/tree-item.css +12 -12
- package/src/styles/layout.css +5 -2
- package/src/styles/radius.css +25 -0
- package/src/styles/size.css +7 -7
- package/src/styles/variables.css +271 -247
- package/src/switch/switch.ts +6 -6
- package/src/tabs/defines.ts +1 -0
- package/src/tabs/tab-panel.ts +1 -1
- package/src/tabs/tab.ts +1 -1
- package/src/tabs/tabs.ts +14 -2
- package/src/tag/tag.ts +4 -4
- package/src/text-input/text-input.ts +5 -5
- package/src/textarea/textarea.ts +5 -5
- package/src/tooltip/tooltip.ts +2 -2
- package/src/tree/tree-item.ts +2 -2
- package/src/tree/tree.ts +2 -2
- package/dist/chunks/action-button.cjs +0 -296
- package/dist/chunks/action-button.cjs.map +0 -1
- package/dist/chunks/action-button.js +0 -297
- package/dist/chunks/action-button.js.map +0 -1
- package/dist/chunks/aeico-component.cjs +0 -17
- package/dist/chunks/aeico-component.cjs.map +0 -1
- package/dist/chunks/aeico-component.js +0 -18
- package/dist/chunks/aeico-component.js.map +0 -1
- package/dist/chunks/alert.cjs +0 -170
- package/dist/chunks/alert.cjs.map +0 -1
- package/dist/chunks/alert.js +0 -171
- package/dist/chunks/alert.js.map +0 -1
- package/dist/chunks/badge.cjs +0 -85
- package/dist/chunks/badge.cjs.map +0 -1
- package/dist/chunks/badge.js +0 -86
- package/dist/chunks/badge.js.map +0 -1
- package/dist/chunks/breadcrumb-item.cjs +0 -261
- package/dist/chunks/breadcrumb-item.cjs.map +0 -1
- package/dist/chunks/breadcrumb-item.js +0 -262
- package/dist/chunks/breadcrumb-item.js.map +0 -1
- package/dist/chunks/button-group.cjs +0 -79
- package/dist/chunks/button-group.cjs.map +0 -1
- package/dist/chunks/button-group.js +0 -80
- package/dist/chunks/button-group.js.map +0 -1
- package/dist/chunks/button.cjs +0 -348
- package/dist/chunks/button.cjs.map +0 -1
- package/dist/chunks/button.js +0 -349
- package/dist/chunks/button.js.map +0 -1
- package/dist/chunks/card.cjs +0 -93
- package/dist/chunks/card.cjs.map +0 -1
- package/dist/chunks/card.js +0 -94
- package/dist/chunks/card.js.map +0 -1
- package/dist/chunks/checkbox.cjs +0 -86
- package/dist/chunks/checkbox.cjs.map +0 -1
- package/dist/chunks/checkbox.js +0 -87
- package/dist/chunks/checkbox.js.map +0 -1
- package/dist/chunks/color.cjs +0 -4
- package/dist/chunks/color.cjs.map +0 -1
- package/dist/chunks/color.js +0 -5
- package/dist/chunks/color.js.map +0 -1
- package/dist/chunks/copy-button.cjs +0 -168
- package/dist/chunks/copy-button.cjs.map +0 -1
- package/dist/chunks/copy-button.js +0 -169
- package/dist/chunks/copy-button.js.map +0 -1
- package/dist/chunks/detail.cjs +0 -146
- package/dist/chunks/detail.cjs.map +0 -1
- package/dist/chunks/detail.js +0 -147
- package/dist/chunks/detail.js.map +0 -1
- package/dist/chunks/dialog.cjs +0 -117
- package/dist/chunks/dialog.cjs.map +0 -1
- package/dist/chunks/dialog.js +0 -118
- package/dist/chunks/dialog.js.map +0 -1
- package/dist/chunks/divider.cjs +0 -80
- package/dist/chunks/divider.cjs.map +0 -1
- package/dist/chunks/divider.js +0 -81
- package/dist/chunks/divider.js.map +0 -1
- package/dist/chunks/drawer.cjs +0 -180
- package/dist/chunks/drawer.cjs.map +0 -1
- package/dist/chunks/drawer.js +0 -181
- package/dist/chunks/drawer.js.map +0 -1
- package/dist/chunks/dropdown-button.cjs +0 -534
- package/dist/chunks/dropdown-button.cjs.map +0 -1
- package/dist/chunks/dropdown-button.js +0 -535
- package/dist/chunks/dropdown-button.js.map +0 -1
- package/dist/chunks/icon-button.cjs +0 -35
- package/dist/chunks/icon-button.cjs.map +0 -1
- package/dist/chunks/icon-button.js +0 -36
- package/dist/chunks/icon-button.js.map +0 -1
- package/dist/chunks/icon.cjs +0 -108
- package/dist/chunks/icon.cjs.map +0 -1
- package/dist/chunks/icon.js +0 -109
- package/dist/chunks/icon.js.map +0 -1
- package/dist/chunks/menu.cjs +0 -396
- package/dist/chunks/menu.cjs.map +0 -1
- package/dist/chunks/menu.js +0 -397
- package/dist/chunks/menu.js.map +0 -1
- package/dist/chunks/navbar.cjs +0 -142
- package/dist/chunks/navbar.cjs.map +0 -1
- package/dist/chunks/navbar.js +0 -143
- package/dist/chunks/navbar.js.map +0 -1
- package/dist/chunks/pagination.cjs +0 -475
- package/dist/chunks/pagination.cjs.map +0 -1
- package/dist/chunks/pagination.js +0 -476
- package/dist/chunks/pagination.js.map +0 -1
- package/dist/chunks/progress-bar.cjs +0 -101
- package/dist/chunks/progress-bar.cjs.map +0 -1
- package/dist/chunks/progress-bar.js +0 -102
- package/dist/chunks/progress-bar.js.map +0 -1
- package/dist/chunks/radio.cjs +0 -185
- package/dist/chunks/radio.cjs.map +0 -1
- package/dist/chunks/radio.js +0 -186
- package/dist/chunks/radio.js.map +0 -1
- package/dist/chunks/select.cjs +0 -381
- package/dist/chunks/select.cjs.map +0 -1
- package/dist/chunks/select.js +0 -382
- package/dist/chunks/select.js.map +0 -1
- package/dist/chunks/size.cjs +0 -4
- package/dist/chunks/size.cjs.map +0 -1
- package/dist/chunks/size.js +0 -5
- package/dist/chunks/size.js.map +0 -1
- package/dist/chunks/slider.cjs +0 -611
- package/dist/chunks/slider.cjs.map +0 -1
- package/dist/chunks/slider.js +0 -612
- package/dist/chunks/slider.js.map +0 -1
- package/dist/chunks/spinner.cjs +0 -102
- package/dist/chunks/spinner.cjs.map +0 -1
- package/dist/chunks/spinner.js +0 -103
- package/dist/chunks/spinner.js.map +0 -1
- package/dist/chunks/switch.cjs +0 -167
- package/dist/chunks/switch.cjs.map +0 -1
- package/dist/chunks/switch.js +0 -168
- package/dist/chunks/switch.js.map +0 -1
- package/dist/chunks/tab-panel.cjs +0 -165
- package/dist/chunks/tab-panel.cjs.map +0 -1
- package/dist/chunks/tab-panel.js +0 -166
- package/dist/chunks/tab-panel.js.map +0 -1
- package/dist/chunks/tag.cjs +0 -108
- package/dist/chunks/tag.cjs.map +0 -1
- package/dist/chunks/tag.js +0 -109
- package/dist/chunks/tag.js.map +0 -1
- package/dist/chunks/text-input.cjs +0 -54
- package/dist/chunks/text-input.cjs.map +0 -1
- package/dist/chunks/text-input.js +0 -55
- package/dist/chunks/text-input.js.map +0 -1
- package/dist/chunks/textarea.cjs +0 -137
- package/dist/chunks/textarea.cjs.map +0 -1
- package/dist/chunks/textarea.js +0 -138
- package/dist/chunks/textarea.js.map +0 -1
- package/dist/chunks/tooltip.cjs +0 -293
- package/dist/chunks/tooltip.cjs.map +0 -1
- package/dist/chunks/tooltip.js +0 -294
- package/dist/chunks/tooltip.js.map +0 -1
- package/dist/chunks/tree.cjs +0 -468
- package/dist/chunks/tree.cjs.map +0 -1
- package/dist/chunks/tree.js +0 -469
- package/dist/chunks/tree.js.map +0 -1
- package/dist/chunks/variables.cjs +0 -372
- package/dist/chunks/variables.cjs.map +0 -1
- package/dist/chunks/variables.js +0 -373
- package/dist/chunks/variables.js.map +0 -1
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.cjs","sources":["../../src/checkbox/checkbox.ts"],"sourcesContent":["import AeicoField, { type FieldAction } from '../aeico-field';\nimport type { InferProps, Props } from 'aeico';\nimport { html } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport fieldLabelCSS from '../styles/components/field-label.css?inline';\nimport actionButtonCSS from '../styles/components/action-button.css?inline';\nimport styles from '../styles/components/checkbox.css?inline';\nimport { CheckboxVariant } from './defines';\n\nclass Checkbox extends AeicoField<boolean> {\n protected fieldElement: HTMLInputElement | null = null;\n\n static tagName = 'checkbox';\n\n static props: Props = {\n checked: { type: Boolean },\n defaultChecked: { type: Boolean },\n variant: { type: String },\n };\n\n declare checked?: boolean;\n declare defaultChecked?: boolean;\n declare variant?: CheckboxVariant;\n\n protected static styles = [\n styleVariables,\n sizeCSS,\n colorCSS,\n fieldLabelCSS,\n actionButtonCSS,\n styles,\n ];\n\n protected getValue(): boolean {\n return this.fieldElement?.checked ?? false;\n }\n\n protected writeValue(checked: boolean): void {\n if (this.fieldElement) {\n this.fieldElement.checked = Boolean(checked);\n }\n }\n\n protected getEventPayload(checked: boolean, oldChecked: boolean, action: FieldAction) {\n return { checked, oldChecked, action };\n }\n\n protected setValue(checked: boolean, options?: { silent?: boolean; action?: FieldAction }): void {\n const oldChecked = this.getValue();\n this.checked = checked;\n this.writeValue(checked);\n if (options?.silent === false) {\n this.emit('change', {\n detail: this.getEventPayload(checked, oldChecked, options.action || 'change'),\n });\n }\n }\n\n public reset(checked?: boolean, options?: { silent?: boolean }): void {\n this.setValue(checked !== undefined ? checked : (this.defaultChecked ?? false), {\n ...options,\n action: 'reset',\n });\n }\n\n public clear(options?: { silent?: boolean }): void {\n this.setValue(false, { ...options, action: 'clear' });\n }\n\n render() {\n return html(({ div, input }) => {\n const id = this.getFieldId();\n this.renderLabel(id);\n div({ className: 'checkbox-container field-body', variant: this.variant }, () => {\n div({ className: 'checkbox-wrapper' }, () => {\n this.fieldElement = input({\n id,\n type: 'checkbox',\n className: 'field-input',\n checked: Boolean(this.checked),\n disabled: Boolean(this.disabled),\n required: Boolean(this.required),\n '@change': this.boundOnChange,\n });\n });\n this.renderActionButtons();\n });\n this.renderHelperText();\n this.renderError();\n });\n }\n}\n\nCheckbox.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-checkbox': Checkbox;\n }\n}\n\nexport default Checkbox;\nexport type CheckboxProps = InferProps<typeof Checkbox>;\n"],"names":["AeicoField","html","styleVariables","sizeCSS","colorCSS","fieldLabelCSS","actionButtonCSS"],"mappings":";;;;;;;;;;AAWA,MAAM,iBAAiBA,aAAAA,WAAoB;AAAA,EAA3C;AAAA;AACY,wCAAwC;AAAA;AAAA,EAuBxC,WAAoB;;AAC5B,aAAO,UAAK,iBAAL,mBAAmB,YAAW;AAAA,EACvC;AAAA,EAEU,WAAW,SAAwB;AAC3C,QAAI,KAAK,cAAc;AACrB,WAAK,aAAa,UAAU,QAAQ,OAAO;AAAA,IAC7C;AAAA,EACF;AAAA,EAEU,gBAAgB,SAAkB,YAAqB,QAAqB;AACpF,WAAO,EAAE,SAAS,YAAY,OAAA;AAAA,EAChC;AAAA,EAEU,SAAS,SAAkB,SAA4D;AAC/F,UAAM,aAAa,KAAK,SAAA;AACxB,SAAK,UAAU;AACf,SAAK,WAAW,OAAO;AACvB,SAAI,mCAAS,YAAW,OAAO;AAC7B,WAAK,KAAK,UAAU;AAAA,QAClB,QAAQ,KAAK,gBAAgB,SAAS,YAAY,QAAQ,UAAU,QAAQ;AAAA,MAAA,CAC7E;AAAA,IACH;AAAA,EACF;AAAA,EAEO,MAAM,SAAmB,SAAsC;AACpE,SAAK,SAAS,YAAY,SAAY,UAAW,KAAK,kBAAkB,OAAQ;AAAA,MAC9E,GAAG;AAAA,MACH,QAAQ;AAAA,IAAA,CACT;AAAA,EACH;AAAA,EAEO,MAAM,SAAsC;AACjD,SAAK,SAAS,OAAO,EAAE,GAAG,SAAS,QAAQ,SAAS;AAAA,EACtD;AAAA,EAEA,SAAS;AACP,WAAOC,WAAK,CAAC,EAAE,KAAK,YAAY;AAC9B,YAAM,KAAK,KAAK,WAAA;AAChB,WAAK,YAAY,EAAE;AACnB,UAAI,EAAE,WAAW,iCAAiC,SAAS,KAAK,QAAA,GAAW,MAAM;AAC/E,YAAI,EAAE,WAAW,mBAAA,GAAsB,MAAM;AAC3C,eAAK,eAAe,MAAM;AAAA,YACxB;AAAA,YACA,MAAM;AAAA,YACN,WAAW;AAAA,YACX,SAAS,QAAQ,KAAK,OAAO;AAAA,YAC7B,UAAU,QAAQ,KAAK,QAAQ;AAAA,YAC/B,UAAU,QAAQ,KAAK,QAAQ;AAAA,YAC/B,WAAW,KAAK;AAAA,UAAA,CACjB;AAAA,QACH,CAAC;AACD,aAAK,oBAAA;AAAA,MACP,CAAC;AACD,WAAK,iBAAA;AACL,WAAK,YAAA;AAAA,IACP,CAAC;AAAA,EACH;AACF;AA/EE,cAHI,UAGG,WAAU;AAEjB,cALI,UAKG,SAAe;AAAA,EACpB,SAAS,EAAE,MAAM,QAAA;AAAA,EACjB,gBAAgB,EAAE,MAAM,QAAA;AAAA,EACxB,SAAS,EAAE,MAAM,OAAA;AAAO;AAO1B,cAfI,UAea,UAAS;AAAA,EACxBC,UAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,MAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACA;AAAA;AA+DJ,SAAS,SAAA;;"}
|
package/dist/chunks/checkbox.js
DELETED
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
|
-
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
4
|
-
import { A as AeicoField, f as fieldLabelCSS, a as actionButtonCSS } from "./action-button.js";
|
|
5
|
-
import { html } from "aeico";
|
|
6
|
-
import { v as variables } from "./variables.js";
|
|
7
|
-
import { s as sizeCSS } from "./size.js";
|
|
8
|
-
import { c as colorCSS } from "./color.js";
|
|
9
|
-
const styles = ":host {\n display: block;\n flex: 1;\n min-width: 0;\n font-size: var(--size-base);\n\n /* Layout */\n --checkbox-field-gap: 4px;\n\n /* Checkbox */\n --checkbox-size: 1.167em;\n --checkbox-border-width: 1px;\n --checkbox-border-radius: 2px;\n --checkbox-border-color: var(--border-subtle);\n --checkbox-bg: var(--surface-base);\n --checkbox-accent-color: var(--color-solid);\n\n /* Default color when no [color] attribute — overridden by color.css :host([color=...]) */\n --color-solid: var(--color-primary);\n}\n\n.checkbox-container {\n display: flex;\n align-items: center;\n gap: var(--checkbox-field-gap);\n width: 100%;\n}\n\n.checkbox-wrapper {\n position: relative;\n display: inline-flex;\n align-items: center;\n}\n\n.field-input {\n width: var(--checkbox-size);\n height: var(--checkbox-size);\n cursor: pointer;\n border: var(--checkbox-border-width) solid var(--checkbox-border-color);\n border-radius: var(--checkbox-border-radius);\n background: var(--checkbox-bg);\n accent-color: var(--checkbox-accent-color);\n margin: 0;\n flex-shrink: 0;\n}\n\n.field-input:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* Error state */\n:host([error]) .field-input {\n outline: 2px solid var(--field-error-color, var(--red));\n outline-offset: 1px;\n}\n";
|
|
10
|
-
class Checkbox extends AeicoField {
|
|
11
|
-
constructor() {
|
|
12
|
-
super(...arguments);
|
|
13
|
-
__publicField(this, "fieldElement", null);
|
|
14
|
-
}
|
|
15
|
-
getValue() {
|
|
16
|
-
var _a;
|
|
17
|
-
return ((_a = this.fieldElement) == null ? void 0 : _a.checked) ?? false;
|
|
18
|
-
}
|
|
19
|
-
writeValue(checked) {
|
|
20
|
-
if (this.fieldElement) {
|
|
21
|
-
this.fieldElement.checked = Boolean(checked);
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
getEventPayload(checked, oldChecked, action) {
|
|
25
|
-
return { checked, oldChecked, action };
|
|
26
|
-
}
|
|
27
|
-
setValue(checked, options) {
|
|
28
|
-
const oldChecked = this.getValue();
|
|
29
|
-
this.checked = checked;
|
|
30
|
-
this.writeValue(checked);
|
|
31
|
-
if ((options == null ? void 0 : options.silent) === false) {
|
|
32
|
-
this.emit("change", {
|
|
33
|
-
detail: this.getEventPayload(checked, oldChecked, options.action || "change")
|
|
34
|
-
});
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
reset(checked, options) {
|
|
38
|
-
this.setValue(checked !== void 0 ? checked : this.defaultChecked ?? false, {
|
|
39
|
-
...options,
|
|
40
|
-
action: "reset"
|
|
41
|
-
});
|
|
42
|
-
}
|
|
43
|
-
clear(options) {
|
|
44
|
-
this.setValue(false, { ...options, action: "clear" });
|
|
45
|
-
}
|
|
46
|
-
render() {
|
|
47
|
-
return html(({ div, input }) => {
|
|
48
|
-
const id = this.getFieldId();
|
|
49
|
-
this.renderLabel(id);
|
|
50
|
-
div({ className: "checkbox-container field-body", variant: this.variant }, () => {
|
|
51
|
-
div({ className: "checkbox-wrapper" }, () => {
|
|
52
|
-
this.fieldElement = input({
|
|
53
|
-
id,
|
|
54
|
-
type: "checkbox",
|
|
55
|
-
className: "field-input",
|
|
56
|
-
checked: Boolean(this.checked),
|
|
57
|
-
disabled: Boolean(this.disabled),
|
|
58
|
-
required: Boolean(this.required),
|
|
59
|
-
"@change": this.boundOnChange
|
|
60
|
-
});
|
|
61
|
-
});
|
|
62
|
-
this.renderActionButtons();
|
|
63
|
-
});
|
|
64
|
-
this.renderHelperText();
|
|
65
|
-
this.renderError();
|
|
66
|
-
});
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
__publicField(Checkbox, "tagName", "checkbox");
|
|
70
|
-
__publicField(Checkbox, "props", {
|
|
71
|
-
checked: { type: Boolean },
|
|
72
|
-
defaultChecked: { type: Boolean },
|
|
73
|
-
variant: { type: String }
|
|
74
|
-
});
|
|
75
|
-
__publicField(Checkbox, "styles", [
|
|
76
|
-
variables,
|
|
77
|
-
sizeCSS,
|
|
78
|
-
colorCSS,
|
|
79
|
-
fieldLabelCSS,
|
|
80
|
-
actionButtonCSS,
|
|
81
|
-
styles
|
|
82
|
-
]);
|
|
83
|
-
Checkbox.register();
|
|
84
|
-
export {
|
|
85
|
-
Checkbox as C
|
|
86
|
-
};
|
|
87
|
-
//# sourceMappingURL=checkbox.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.js","sources":["../../src/checkbox/checkbox.ts"],"sourcesContent":["import AeicoField, { type FieldAction } from '../aeico-field';\nimport type { InferProps, Props } from 'aeico';\nimport { html } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport fieldLabelCSS from '../styles/components/field-label.css?inline';\nimport actionButtonCSS from '../styles/components/action-button.css?inline';\nimport styles from '../styles/components/checkbox.css?inline';\nimport { CheckboxVariant } from './defines';\n\nclass Checkbox extends AeicoField<boolean> {\n protected fieldElement: HTMLInputElement | null = null;\n\n static tagName = 'checkbox';\n\n static props: Props = {\n checked: { type: Boolean },\n defaultChecked: { type: Boolean },\n variant: { type: String },\n };\n\n declare checked?: boolean;\n declare defaultChecked?: boolean;\n declare variant?: CheckboxVariant;\n\n protected static styles = [\n styleVariables,\n sizeCSS,\n colorCSS,\n fieldLabelCSS,\n actionButtonCSS,\n styles,\n ];\n\n protected getValue(): boolean {\n return this.fieldElement?.checked ?? false;\n }\n\n protected writeValue(checked: boolean): void {\n if (this.fieldElement) {\n this.fieldElement.checked = Boolean(checked);\n }\n }\n\n protected getEventPayload(checked: boolean, oldChecked: boolean, action: FieldAction) {\n return { checked, oldChecked, action };\n }\n\n protected setValue(checked: boolean, options?: { silent?: boolean; action?: FieldAction }): void {\n const oldChecked = this.getValue();\n this.checked = checked;\n this.writeValue(checked);\n if (options?.silent === false) {\n this.emit('change', {\n detail: this.getEventPayload(checked, oldChecked, options.action || 'change'),\n });\n }\n }\n\n public reset(checked?: boolean, options?: { silent?: boolean }): void {\n this.setValue(checked !== undefined ? checked : (this.defaultChecked ?? false), {\n ...options,\n action: 'reset',\n });\n }\n\n public clear(options?: { silent?: boolean }): void {\n this.setValue(false, { ...options, action: 'clear' });\n }\n\n render() {\n return html(({ div, input }) => {\n const id = this.getFieldId();\n this.renderLabel(id);\n div({ className: 'checkbox-container field-body', variant: this.variant }, () => {\n div({ className: 'checkbox-wrapper' }, () => {\n this.fieldElement = input({\n id,\n type: 'checkbox',\n className: 'field-input',\n checked: Boolean(this.checked),\n disabled: Boolean(this.disabled),\n required: Boolean(this.required),\n '@change': this.boundOnChange,\n });\n });\n this.renderActionButtons();\n });\n this.renderHelperText();\n this.renderError();\n });\n }\n}\n\nCheckbox.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-checkbox': Checkbox;\n }\n}\n\nexport default Checkbox;\nexport type CheckboxProps = InferProps<typeof Checkbox>;\n"],"names":["styleVariables"],"mappings":";;;;;;;;;AAWA,MAAM,iBAAiB,WAAoB;AAAA,EAA3C;AAAA;AACY,wCAAwC;AAAA;AAAA,EAuBxC,WAAoB;;AAC5B,aAAO,UAAK,iBAAL,mBAAmB,YAAW;AAAA,EACvC;AAAA,EAEU,WAAW,SAAwB;AAC3C,QAAI,KAAK,cAAc;AACrB,WAAK,aAAa,UAAU,QAAQ,OAAO;AAAA,IAC7C;AAAA,EACF;AAAA,EAEU,gBAAgB,SAAkB,YAAqB,QAAqB;AACpF,WAAO,EAAE,SAAS,YAAY,OAAA;AAAA,EAChC;AAAA,EAEU,SAAS,SAAkB,SAA4D;AAC/F,UAAM,aAAa,KAAK,SAAA;AACxB,SAAK,UAAU;AACf,SAAK,WAAW,OAAO;AACvB,SAAI,mCAAS,YAAW,OAAO;AAC7B,WAAK,KAAK,UAAU;AAAA,QAClB,QAAQ,KAAK,gBAAgB,SAAS,YAAY,QAAQ,UAAU,QAAQ;AAAA,MAAA,CAC7E;AAAA,IACH;AAAA,EACF;AAAA,EAEO,MAAM,SAAmB,SAAsC;AACpE,SAAK,SAAS,YAAY,SAAY,UAAW,KAAK,kBAAkB,OAAQ;AAAA,MAC9E,GAAG;AAAA,MACH,QAAQ;AAAA,IAAA,CACT;AAAA,EACH;AAAA,EAEO,MAAM,SAAsC;AACjD,SAAK,SAAS,OAAO,EAAE,GAAG,SAAS,QAAQ,SAAS;AAAA,EACtD;AAAA,EAEA,SAAS;AACP,WAAO,KAAK,CAAC,EAAE,KAAK,YAAY;AAC9B,YAAM,KAAK,KAAK,WAAA;AAChB,WAAK,YAAY,EAAE;AACnB,UAAI,EAAE,WAAW,iCAAiC,SAAS,KAAK,QAAA,GAAW,MAAM;AAC/E,YAAI,EAAE,WAAW,mBAAA,GAAsB,MAAM;AAC3C,eAAK,eAAe,MAAM;AAAA,YACxB;AAAA,YACA,MAAM;AAAA,YACN,WAAW;AAAA,YACX,SAAS,QAAQ,KAAK,OAAO;AAAA,YAC7B,UAAU,QAAQ,KAAK,QAAQ;AAAA,YAC/B,UAAU,QAAQ,KAAK,QAAQ;AAAA,YAC/B,WAAW,KAAK;AAAA,UAAA,CACjB;AAAA,QACH,CAAC;AACD,aAAK,oBAAA;AAAA,MACP,CAAC;AACD,WAAK,iBAAA;AACL,WAAK,YAAA;AAAA,IACP,CAAC;AAAA,EACH;AACF;AA/EE,cAHI,UAGG,WAAU;AAEjB,cALI,UAKG,SAAe;AAAA,EACpB,SAAS,EAAE,MAAM,QAAA;AAAA,EACjB,gBAAgB,EAAE,MAAM,QAAA;AAAA,EACxB,SAAS,EAAE,MAAM,OAAA;AAAO;AAO1B,cAfI,UAea,UAAS;AAAA,EACxBA;AAAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AA+DJ,SAAS,SAAA;"}
|
package/dist/chunks/color.cjs
DELETED
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
const colorCSS = ':host {\n --color-solid: var(--color-gray);\n --color-solid-hover: color-mix(in srgb, var(--color-solid), var(--color-mix-hover));\n --color-solid-active: color-mix(in srgb, var(--color-solid), var(--color-mix-active));\n --color-on-solid: var(--color-text-main);\n --color-border: var(--color-gray);\n --color-border-hover: color-mix(in srgb, var(--color-border), var(--color-mix-hover));\n --color-accent: var(--color-text-muted);\n --color-accent-hover: var(--color-text-main);\n --color-subtle: var(--border-subtle);\n --color-subtle-hover: var(--border-default);\n --color-bg-subtle: var(--border-subtle);\n --color-text-subtle: var(--color-text-muted);\n --color-border-subtle: var(--border-default);\n}\n\n:host([color="primary"]) {\n --color-solid: var(--color-primary);\n --color-on-solid: white;\n --color-border: var(--color-primary);\n --color-accent: var(--color-text-link);\n --color-accent-hover: var(--color-text-link-hover);\n --color-subtle: var(--color-primary-bg-subtle);\n --color-subtle-hover: rgb(from var(--blue) r g b / 0.15);\n --color-bg-subtle: var(--color-primary-bg-subtle);\n --color-text-subtle: var(--color-primary-text-emphasis);\n --color-border-subtle: var(--color-primary-border-subtle);\n}\n\n:host([color="secondary"]) {\n --color-solid: var(--color-secondary);\n --color-on-solid: white;\n --color-border: var(--color-secondary-hover);\n --color-accent: var(--color-secondary-text-emphasis);\n --color-accent-hover: var(--color-text-main);\n --color-subtle: rgb(from var(--slate) r g b / 0.06);\n --color-subtle-hover: rgb(from var(--slate) r g b / 0.12);\n --color-bg-subtle: var(--color-secondary-bg-subtle);\n --color-text-subtle: var(--color-secondary-text-emphasis);\n --color-border-subtle: var(--color-secondary-border-subtle);\n}\n\n:host([color="success"]) {\n --color-solid: var(--color-success);\n --color-on-solid: white;\n --color-border: var(--color-success);\n --color-accent: var(--color-success-text-emphasis);\n --color-accent-hover: var(--color-success-hover);\n --color-subtle: var(--color-success-bg-subtle);\n --color-subtle-hover: rgb(from var(--green) r g b / 0.15);\n --color-bg-subtle: var(--color-success-bg-subtle);\n --color-text-subtle: var(--color-success-text-emphasis);\n --color-border-subtle: var(--color-success-border-subtle);\n}\n\n:host([color="danger"]) {\n --color-solid: var(--color-danger);\n --color-on-solid: white;\n --color-border: var(--color-danger);\n --color-accent: var(--color-danger-text-emphasis);\n --color-accent-hover: var(--color-danger-hover);\n --color-subtle: var(--color-danger-bg-subtle);\n --color-subtle-hover: rgb(from var(--red) r g b / 0.15);\n --color-bg-subtle: var(--color-danger-bg-subtle);\n --color-text-subtle: var(--color-danger-text-emphasis);\n --color-border-subtle: var(--color-danger-border-subtle);\n}\n\n:host([color="warning"]) {\n --color-solid: var(--color-warning);\n --color-on-solid: var(--gray-900);\n --color-border: var(--color-warning);\n --color-accent: var(--color-warning-text-emphasis);\n --color-accent-hover: var(--color-warning-hover);\n --color-subtle: var(--color-warning-bg-subtle);\n --color-subtle-hover: rgb(from var(--yellow) r g b / 0.15);\n --color-bg-subtle: var(--color-warning-bg-subtle);\n --color-text-subtle: var(--color-warning-text-emphasis);\n --color-border-subtle: var(--color-warning-border-subtle);\n}\n\n:host([color="info"]) {\n --color-solid: var(--color-info);\n --color-on-solid: white;\n --color-border: var(--color-info);\n --color-accent: var(--color-info-text-emphasis);\n --color-accent-hover: var(--color-info-hover);\n --color-subtle: var(--color-info-bg-subtle);\n --color-subtle-hover: rgb(from var(--cyan) r g b / 0.15);\n --color-bg-subtle: var(--color-info-bg-subtle);\n --color-text-subtle: var(--color-info-text-emphasis);\n --color-border-subtle: var(--color-info-border-subtle);\n}\n\n:host([color="light"]) {\n --color-solid: var(--light);\n --color-on-solid: var(--gray-900);\n --color-border: var(--border-hover);\n --color-subtle: var(--color-light-bg-subtle);\n --color-subtle-hover: var(--color-light-border-subtle);\n --color-bg-subtle: var(--color-light-bg-subtle);\n --color-text-subtle: var(--color-text-muted);\n --color-border-subtle: var(--color-light-border-subtle);\n}\n\n:host([color="dark"]) {\n --color-solid: var(--dark-500);\n --color-on-solid: white;\n --color-border: var(--dark-500);\n --color-accent: var(--color-text-main);\n --color-accent-hover: var(--color-text-main);\n --color-subtle: var(--color-dark-bg-subtle);\n --color-subtle-hover: var(--color-dark-border-subtle);\n --color-bg-subtle: var(--color-dark-bg-subtle);\n --color-text-subtle: var(--color-text-main);\n --color-border-subtle: var(--color-dark-border-subtle);\n}\n';
|
|
3
|
-
exports.colorCSS = colorCSS;
|
|
4
|
-
//# sourceMappingURL=color.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"color.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
|
package/dist/chunks/color.js
DELETED
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
const colorCSS = ':host {\n --color-solid: var(--color-gray);\n --color-solid-hover: color-mix(in srgb, var(--color-solid), var(--color-mix-hover));\n --color-solid-active: color-mix(in srgb, var(--color-solid), var(--color-mix-active));\n --color-on-solid: var(--color-text-main);\n --color-border: var(--color-gray);\n --color-border-hover: color-mix(in srgb, var(--color-border), var(--color-mix-hover));\n --color-accent: var(--color-text-muted);\n --color-accent-hover: var(--color-text-main);\n --color-subtle: var(--border-subtle);\n --color-subtle-hover: var(--border-default);\n --color-bg-subtle: var(--border-subtle);\n --color-text-subtle: var(--color-text-muted);\n --color-border-subtle: var(--border-default);\n}\n\n:host([color="primary"]) {\n --color-solid: var(--color-primary);\n --color-on-solid: white;\n --color-border: var(--color-primary);\n --color-accent: var(--color-text-link);\n --color-accent-hover: var(--color-text-link-hover);\n --color-subtle: var(--color-primary-bg-subtle);\n --color-subtle-hover: rgb(from var(--blue) r g b / 0.15);\n --color-bg-subtle: var(--color-primary-bg-subtle);\n --color-text-subtle: var(--color-primary-text-emphasis);\n --color-border-subtle: var(--color-primary-border-subtle);\n}\n\n:host([color="secondary"]) {\n --color-solid: var(--color-secondary);\n --color-on-solid: white;\n --color-border: var(--color-secondary-hover);\n --color-accent: var(--color-secondary-text-emphasis);\n --color-accent-hover: var(--color-text-main);\n --color-subtle: rgb(from var(--slate) r g b / 0.06);\n --color-subtle-hover: rgb(from var(--slate) r g b / 0.12);\n --color-bg-subtle: var(--color-secondary-bg-subtle);\n --color-text-subtle: var(--color-secondary-text-emphasis);\n --color-border-subtle: var(--color-secondary-border-subtle);\n}\n\n:host([color="success"]) {\n --color-solid: var(--color-success);\n --color-on-solid: white;\n --color-border: var(--color-success);\n --color-accent: var(--color-success-text-emphasis);\n --color-accent-hover: var(--color-success-hover);\n --color-subtle: var(--color-success-bg-subtle);\n --color-subtle-hover: rgb(from var(--green) r g b / 0.15);\n --color-bg-subtle: var(--color-success-bg-subtle);\n --color-text-subtle: var(--color-success-text-emphasis);\n --color-border-subtle: var(--color-success-border-subtle);\n}\n\n:host([color="danger"]) {\n --color-solid: var(--color-danger);\n --color-on-solid: white;\n --color-border: var(--color-danger);\n --color-accent: var(--color-danger-text-emphasis);\n --color-accent-hover: var(--color-danger-hover);\n --color-subtle: var(--color-danger-bg-subtle);\n --color-subtle-hover: rgb(from var(--red) r g b / 0.15);\n --color-bg-subtle: var(--color-danger-bg-subtle);\n --color-text-subtle: var(--color-danger-text-emphasis);\n --color-border-subtle: var(--color-danger-border-subtle);\n}\n\n:host([color="warning"]) {\n --color-solid: var(--color-warning);\n --color-on-solid: var(--gray-900);\n --color-border: var(--color-warning);\n --color-accent: var(--color-warning-text-emphasis);\n --color-accent-hover: var(--color-warning-hover);\n --color-subtle: var(--color-warning-bg-subtle);\n --color-subtle-hover: rgb(from var(--yellow) r g b / 0.15);\n --color-bg-subtle: var(--color-warning-bg-subtle);\n --color-text-subtle: var(--color-warning-text-emphasis);\n --color-border-subtle: var(--color-warning-border-subtle);\n}\n\n:host([color="info"]) {\n --color-solid: var(--color-info);\n --color-on-solid: white;\n --color-border: var(--color-info);\n --color-accent: var(--color-info-text-emphasis);\n --color-accent-hover: var(--color-info-hover);\n --color-subtle: var(--color-info-bg-subtle);\n --color-subtle-hover: rgb(from var(--cyan) r g b / 0.15);\n --color-bg-subtle: var(--color-info-bg-subtle);\n --color-text-subtle: var(--color-info-text-emphasis);\n --color-border-subtle: var(--color-info-border-subtle);\n}\n\n:host([color="light"]) {\n --color-solid: var(--light);\n --color-on-solid: var(--gray-900);\n --color-border: var(--border-hover);\n --color-subtle: var(--color-light-bg-subtle);\n --color-subtle-hover: var(--color-light-border-subtle);\n --color-bg-subtle: var(--color-light-bg-subtle);\n --color-text-subtle: var(--color-text-muted);\n --color-border-subtle: var(--color-light-border-subtle);\n}\n\n:host([color="dark"]) {\n --color-solid: var(--dark-500);\n --color-on-solid: white;\n --color-border: var(--dark-500);\n --color-accent: var(--color-text-main);\n --color-accent-hover: var(--color-text-main);\n --color-subtle: var(--color-dark-bg-subtle);\n --color-subtle-hover: var(--color-dark-border-subtle);\n --color-bg-subtle: var(--color-dark-bg-subtle);\n --color-text-subtle: var(--color-text-main);\n --color-border-subtle: var(--color-dark-border-subtle);\n}\n';
|
|
2
|
-
export {
|
|
3
|
-
colorCSS as c
|
|
4
|
-
};
|
|
5
|
-
//# sourceMappingURL=color.js.map
|
package/dist/chunks/color.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"color.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -1,168 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
const variables = require("./variables.cjs");
|
|
3
|
-
const size = require("./size.cjs");
|
|
4
|
-
const color = require("./color.cjs");
|
|
5
|
-
const aeicoComponent = require("./aeico-component.cjs");
|
|
6
|
-
const aeico = require("aeico");
|
|
7
|
-
const copyButtonStyle = ':host {\n display: inline-block;\n --btn-solid-bg: var(--color-solid);\n --btn-solid-bg-hover: var(--color-solid-hover);\n --btn-solid-bg-active: var(--color-solid-active);\n --btn-solid-color: var(--color-on-solid);\n --btn-solid-color-hover: var(--color-on-solid-hover);\n --btn-border: var(--color-border);\n --btn-border-hover: var(--color-border-hover);\n --btn-accent: var(--color-accent);\n --btn-accent-hover: var(--color-accent-hover);\n --btn-subtle-bg: var(--color-subtle);\n --btn-subtle-bg-hover: var(--color-subtle-hover);\n}\n\nbutton {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n font-family: inherit;\n font-weight: 400;\n text-align: center;\n white-space: nowrap;\n vertical-align: middle;\n user-select: none;\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n outline: none;\n position: relative;\n padding: 0.429em 0.571em;\n font-size: 1em;\n line-height: 1.5;\n border-radius: 4px;\n height: 2.286em;\n width: 2.286em;\n min-width: unset;\n\n background: var(--btn-solid-bg);\n border: 1px solid var(--btn-solid-bg);\n color: var(--btn-solid-color);\n}\n\nbutton:focus { outline: none; }\nbutton:active { transform: translateY(1px); }\n\nbutton:hover:not(:disabled) {\n background: var(--btn-solid-bg-hover);\n border-color: var(--btn-border-hover);\n color: var(--btn-solid-color-hover, var(--btn-solid-color));\n}\n\nbutton:active:not(:disabled) { background: var(--btn-solid-bg-active); }\n\nbutton:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* Hide the fallback-text slot */\nslot { display: none; }\n\n/* Icon visibility */\n.icon-copy,\n.icon-check {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: opacity 0.15s ease, transform 0.15s ease;\n}\n\n.icon-copy { opacity: 1; transform: scale(1); }\n.icon-check { opacity: 0; transform: scale(0.6); }\n\n:host([copied]) .icon-copy { opacity: 0; transform: scale(0.6); }\n:host([copied]) .icon-check { opacity: 1; transform: scale(1); }\n\n/* Variants */\n:host([variant="outlined"]) button {\n background: transparent;\n border-color: var(--btn-border);\n color: var(--btn-accent);\n}\n:host([variant="outlined"]) button:hover:not(:disabled) {\n background: var(--btn-subtle-bg);\n border-color: var(--btn-border-hover);\n color: var(--btn-accent-hover);\n}\n\n:host([variant="faint"]) button {\n background: var(--btn-subtle-bg);\n border-color: transparent;\n color: var(--btn-accent);\n}\n:host([variant="faint"]) button:hover:not(:disabled) {\n background: var(--btn-subtle-bg-hover);\n color: var(--btn-accent-hover);\n}\n\n:host([variant="subtle"]) button {\n background: transparent;\n border-color: transparent;\n color: var(--btn-accent);\n}\n:host([variant="subtle"]) button:hover:not(:disabled) {\n background: var(--btn-subtle-bg);\n color: var(--btn-accent-hover);\n}\n\n:host([variant="text"]) button {\n background: transparent;\n border-color: transparent;\n color: var(--btn-accent);\n}\n:host([variant="text"]) button:hover:not(:disabled) {\n color: var(--btn-accent-hover);\n}\n';
|
|
8
|
-
var __create = Object.create;
|
|
9
|
-
var __defProp = Object.defineProperty;
|
|
10
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
11
|
-
var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
|
|
12
|
-
var __typeError = (msg) => {
|
|
13
|
-
throw TypeError(msg);
|
|
14
|
-
};
|
|
15
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
16
|
-
var __decoratorStart = (base) => [, , , __create((base == null ? void 0 : base[__knownSymbol("metadata")]) ?? null)];
|
|
17
|
-
var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
|
|
18
|
-
var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
|
|
19
|
-
var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
|
|
20
|
-
var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
|
|
21
|
-
var __runInitializers = (array, flags, self, value) => {
|
|
22
|
-
for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
|
|
23
|
-
return value;
|
|
24
|
-
};
|
|
25
|
-
var __decorateElement = (array, flags, name, decorators, target, extra) => {
|
|
26
|
-
var fn, it, done, ctx, access, k = flags & 7, s = false, p = false;
|
|
27
|
-
var j = array.length + 1, key = __decoratorStrings[k + 5];
|
|
28
|
-
var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
|
|
29
|
-
var desc = (target = target.prototype, __getOwnPropDesc({ get [name]() {
|
|
30
|
-
return __privateGet(this, extra);
|
|
31
|
-
}, set [name](x) {
|
|
32
|
-
return __privateSet(this, extra, x);
|
|
33
|
-
} }, name));
|
|
34
|
-
for (var i = decorators.length - 1; i >= 0; i--) {
|
|
35
|
-
ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
|
|
36
|
-
{
|
|
37
|
-
ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
|
|
38
|
-
access.get = (x) => x[name];
|
|
39
|
-
access.set = (x, y) => x[name] = y;
|
|
40
|
-
}
|
|
41
|
-
it = (0, decorators[i])({ get: desc.get, set: desc.set }, ctx), done._ = 1;
|
|
42
|
-
if (it === void 0) __expectFn(it) && (desc[key] = it);
|
|
43
|
-
else if (typeof it !== "object" || it === null) __typeError("Object expected");
|
|
44
|
-
else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
|
|
45
|
-
}
|
|
46
|
-
return desc && __defProp(target, name, desc), target;
|
|
47
|
-
};
|
|
48
|
-
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
49
|
-
var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
|
|
50
|
-
var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), member.get(obj));
|
|
51
|
-
var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
52
|
-
var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
|
|
53
|
-
var _tooltipPlacement_dec, _tooltipCopied_dec, _tooltip_dec, _duration_dec, _disabled_dec, _size_dec, _variant_dec, _color_dec, _text_dec, _a, _init, _text, _color, _variant, _size, _disabled, _duration, _tooltip, _tooltipCopied, _tooltipPlacement;
|
|
54
|
-
class CopyButton extends (_a = aeicoComponent.AeicoComponent, _text_dec = [aeico.prop({ type: String })], _color_dec = [aeico.prop({ type: String })], _variant_dec = [aeico.prop({ type: String })], _size_dec = [aeico.prop({ type: String })], _disabled_dec = [aeico.prop({ type: Boolean })], _duration_dec = [aeico.prop({ type: Number })], _tooltip_dec = [aeico.prop({ type: String })], _tooltipCopied_dec = [aeico.prop({ type: String })], _tooltipPlacement_dec = [aeico.prop({ type: String })], _a) {
|
|
55
|
-
constructor() {
|
|
56
|
-
super(...arguments);
|
|
57
|
-
__privateAdd(this, _text, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
|
|
58
|
-
__privateAdd(this, _color, __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
|
|
59
|
-
__privateAdd(this, _variant, __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
|
|
60
|
-
__privateAdd(this, _size, __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
|
|
61
|
-
__privateAdd(this, _disabled, __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
|
|
62
|
-
__privateAdd(this, _duration, __runInitializers(_init, 28, this)), __runInitializers(_init, 31, this);
|
|
63
|
-
__privateAdd(this, _tooltip, __runInitializers(_init, 32, this, "Copy")), __runInitializers(_init, 35, this);
|
|
64
|
-
__privateAdd(this, _tooltipCopied, __runInitializers(_init, 36, this, "Copied!")), __runInitializers(_init, 39, this);
|
|
65
|
-
__privateAdd(this, _tooltipPlacement, __runInitializers(_init, 40, this, "top")), __runInitializers(_init, 43, this);
|
|
66
|
-
__publicField(this, "_slotElement", null);
|
|
67
|
-
__publicField(this, "_tooltipEl", null);
|
|
68
|
-
__publicField(this, "_resetTimer", null);
|
|
69
|
-
__publicField(this, "_handleClick", () => {
|
|
70
|
-
if (this.disabled) return;
|
|
71
|
-
const textToCopy = this._getTextToCopy();
|
|
72
|
-
void navigator.clipboard.writeText(textToCopy).then(() => {
|
|
73
|
-
this.setAttribute("copied", "");
|
|
74
|
-
if (this._tooltipEl) {
|
|
75
|
-
this._tooltipEl.content = this.tooltipCopied;
|
|
76
|
-
this._tooltipEl.open = true;
|
|
77
|
-
}
|
|
78
|
-
if (this._resetTimer !== null) {
|
|
79
|
-
clearTimeout(this._resetTimer);
|
|
80
|
-
}
|
|
81
|
-
const duration = this.duration ?? 2e3;
|
|
82
|
-
this._resetTimer = setTimeout(() => {
|
|
83
|
-
this.removeAttribute("copied");
|
|
84
|
-
if (this._tooltipEl) {
|
|
85
|
-
this._tooltipEl.content = this.tooltip;
|
|
86
|
-
this._tooltipEl.open = false;
|
|
87
|
-
}
|
|
88
|
-
this._resetTimer = null;
|
|
89
|
-
}, duration);
|
|
90
|
-
this.dispatchEvent(
|
|
91
|
-
new CustomEvent("copy", {
|
|
92
|
-
bubbles: true,
|
|
93
|
-
composed: true,
|
|
94
|
-
detail: { text: textToCopy }
|
|
95
|
-
})
|
|
96
|
-
);
|
|
97
|
-
});
|
|
98
|
-
});
|
|
99
|
-
}
|
|
100
|
-
_getTextToCopy() {
|
|
101
|
-
var _a2;
|
|
102
|
-
if (this.text != null) return this.text;
|
|
103
|
-
const nodes = ((_a2 = this._slotElement) == null ? void 0 : _a2.assignedNodes({ flatten: true })) ?? [];
|
|
104
|
-
return nodes.filter((n) => n.nodeType === Node.TEXT_NODE).map((n) => n.textContent ?? "").join("").trim();
|
|
105
|
-
}
|
|
106
|
-
onUnmounted() {
|
|
107
|
-
if (this._resetTimer !== null) {
|
|
108
|
-
clearTimeout(this._resetTimer);
|
|
109
|
-
this._resetTimer = null;
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
render() {
|
|
113
|
-
return aeico.html(({ aeTooltip, button, span, slot, aeIcon }) => {
|
|
114
|
-
this._tooltipEl = aeTooltip(
|
|
115
|
-
{
|
|
116
|
-
content: this.tooltip,
|
|
117
|
-
placement: this.tooltipPlacement,
|
|
118
|
-
disabled: this.disabled
|
|
119
|
-
},
|
|
120
|
-
() => {
|
|
121
|
-
button(
|
|
122
|
-
{
|
|
123
|
-
type: "button",
|
|
124
|
-
disabled: this.disabled,
|
|
125
|
-
part: "button",
|
|
126
|
-
"aria-label": this.tooltip,
|
|
127
|
-
"aria-disabled": this.disabled,
|
|
128
|
-
"@click": this._handleClick
|
|
129
|
-
},
|
|
130
|
-
() => {
|
|
131
|
-
span({ className: "icon-copy" }, () => {
|
|
132
|
-
aeIcon({ name: "copy" });
|
|
133
|
-
});
|
|
134
|
-
span({ className: "icon-check" }, () => {
|
|
135
|
-
aeIcon({ name: "check" });
|
|
136
|
-
});
|
|
137
|
-
this._slotElement = slot();
|
|
138
|
-
}
|
|
139
|
-
);
|
|
140
|
-
}
|
|
141
|
-
);
|
|
142
|
-
});
|
|
143
|
-
}
|
|
144
|
-
}
|
|
145
|
-
_init = __decoratorStart(_a);
|
|
146
|
-
_text = /* @__PURE__ */ new WeakMap();
|
|
147
|
-
_color = /* @__PURE__ */ new WeakMap();
|
|
148
|
-
_variant = /* @__PURE__ */ new WeakMap();
|
|
149
|
-
_size = /* @__PURE__ */ new WeakMap();
|
|
150
|
-
_disabled = /* @__PURE__ */ new WeakMap();
|
|
151
|
-
_duration = /* @__PURE__ */ new WeakMap();
|
|
152
|
-
_tooltip = /* @__PURE__ */ new WeakMap();
|
|
153
|
-
_tooltipCopied = /* @__PURE__ */ new WeakMap();
|
|
154
|
-
_tooltipPlacement = /* @__PURE__ */ new WeakMap();
|
|
155
|
-
__decorateElement(_init, 4, "text", _text_dec, CopyButton, _text);
|
|
156
|
-
__decorateElement(_init, 4, "color", _color_dec, CopyButton, _color);
|
|
157
|
-
__decorateElement(_init, 4, "variant", _variant_dec, CopyButton, _variant);
|
|
158
|
-
__decorateElement(_init, 4, "size", _size_dec, CopyButton, _size);
|
|
159
|
-
__decorateElement(_init, 4, "disabled", _disabled_dec, CopyButton, _disabled);
|
|
160
|
-
__decorateElement(_init, 4, "duration", _duration_dec, CopyButton, _duration);
|
|
161
|
-
__decorateElement(_init, 4, "tooltip", _tooltip_dec, CopyButton, _tooltip);
|
|
162
|
-
__decorateElement(_init, 4, "tooltipCopied", _tooltipCopied_dec, CopyButton, _tooltipCopied);
|
|
163
|
-
__decorateElement(_init, 4, "tooltipPlacement", _tooltipPlacement_dec, CopyButton, _tooltipPlacement);
|
|
164
|
-
__decoratorMetadata(_init, CopyButton);
|
|
165
|
-
__publicField(CopyButton, "styles", [variables.variables, size.sizeCSS, color.colorCSS, copyButtonStyle]);
|
|
166
|
-
CopyButton.register();
|
|
167
|
-
exports.CopyButton = CopyButton;
|
|
168
|
-
//# sourceMappingURL=copy-button.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"copy-button.cjs","sources":["../../src/copy-button/copy-button.ts"],"sourcesContent":["import type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport copyButtonStyle from '../styles/components/copy-button.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport { prop } from 'aeico';\n// Ensure ae-icon and ae-tooltip are registered\nimport '../icon/icon';\nimport '../tooltip/tooltip';\nimport type Tooltip from '../tooltip/tooltip';\nimport type { TooltipPlacement } from '../tooltip/defines';\nimport type { CopyButtonColor, CopyButtonSize, CopyButtonVariant } from './defines';\n\nclass CopyButton extends AeicoComponent {\n protected static styles = [styleVariables, sizeCSS, colorCSS, copyButtonStyle];\n\n @prop({ type: String })\n accessor text: string | undefined;\n\n @prop({ type: String })\n accessor color: CopyButtonColor | undefined;\n\n @prop({ type: String })\n accessor variant: CopyButtonVariant | undefined;\n\n @prop({ type: String })\n accessor size: CopyButtonSize | undefined;\n\n @prop({ type: Boolean })\n accessor disabled: boolean | undefined;\n\n @prop({ type: Number })\n accessor duration: number | undefined;\n\n @prop({ type: String })\n accessor tooltip: string = 'Copy';\n\n @prop({ type: String })\n accessor tooltipCopied: string = 'Copied!';\n\n @prop({ type: String })\n accessor tooltipPlacement: TooltipPlacement = 'top';\n\n private _slotElement: HTMLSlotElement | null = null;\n private _tooltipEl: Tooltip | null = null;\n private _resetTimer: ReturnType<typeof setTimeout> | null = null;\n\n private _getTextToCopy(): string {\n if (this.text != null) return this.text;\n const nodes = this._slotElement?.assignedNodes({ flatten: true }) ?? [];\n return nodes\n .filter((n) => n.nodeType === Node.TEXT_NODE)\n .map((n) => n.textContent ?? '')\n .join('')\n .trim();\n }\n\n private _handleClick = () => {\n if (this.disabled) return;\n\n const textToCopy = this._getTextToCopy();\n\n void navigator.clipboard.writeText(textToCopy).then(() => {\n this.setAttribute('copied', '');\n\n if (this._tooltipEl) {\n this._tooltipEl.content = this.tooltipCopied;\n this._tooltipEl.open = true;\n }\n\n if (this._resetTimer !== null) {\n clearTimeout(this._resetTimer);\n }\n const duration = this.duration ?? 2000;\n this._resetTimer = setTimeout(() => {\n this.removeAttribute('copied');\n if (this._tooltipEl) {\n this._tooltipEl.content = this.tooltip;\n this._tooltipEl.open = false;\n }\n this._resetTimer = null;\n }, duration);\n\n this.dispatchEvent(\n new CustomEvent('copy', {\n bubbles: true,\n composed: true,\n detail: { text: textToCopy },\n }),\n );\n });\n };\n\n protected onUnmounted() {\n if (this._resetTimer !== null) {\n clearTimeout(this._resetTimer);\n this._resetTimer = null;\n }\n }\n\n protected render() {\n return html(({ aeTooltip, button, span, slot, aeIcon }) => {\n this._tooltipEl = aeTooltip(\n {\n content: this.tooltip,\n placement: this.tooltipPlacement,\n disabled: this.disabled,\n },\n () => {\n button(\n {\n type: 'button',\n disabled: this.disabled,\n part: 'button',\n 'aria-label': this.tooltip,\n 'aria-disabled': this.disabled,\n '@click': this._handleClick,\n },\n () => {\n span({ className: 'icon-copy' }, () => {\n aeIcon({ name: 'copy' });\n });\n span({ className: 'icon-check' }, () => {\n aeIcon({ name: 'check' });\n });\n this._slotElement = slot();\n },\n );\n },\n );\n });\n }\n}\n\nCopyButton.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-copy-button': CopyButton;\n }\n}\n\nexport default CopyButton;\nexport type CopyButtonProps = InferProps<typeof CopyButton>;\n"],"names":["AeicoComponent","prop","_a","html","styleVariables","sizeCSS","colorCSS"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,uBAAA,oBAAA,cAAA,eAAA,eAAA,WAAA,cAAA,YAAA,WAAA,IAAA,OAAA,OAAA,QAAA,UAAA,OAAA,WAAA,WAAA,UAAA,gBAAA;AAeA,MAAM,oBAAmB,KAAAA,eAAAA,gBAGvB,YAAA,CAACC,MAAAA,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,aAAA,CAACA,MAAAA,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,eAAA,CAACA,MAAAA,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,YAAA,CAACA,MAAAA,KAAK,EAAE,MAAM,OAAA,CAAQ,IAGtB,gBAAA,CAACA,MAAAA,KAAK,EAAE,MAAM,QAAA,CAAS,CAAA,GAGvB,gBAAA,CAACA,MAAAA,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,eAAA,CAACA,MAAAA,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,qBAAA,CAACA,MAAAA,KAAK,EAAE,MAAM,QAAQ,CAAA,GAGtB,wBAAA,CAACA,MAAAA,KAAK,EAAE,MAAM,OAAA,CAAQ,IA3BC,IAAe;AAAA,EAAxC,cAAA;AAAA,UAAA,GAAA,SAAA;AAIE,iBAAA,MAAS,OAAT,kBAAA,OAAA,GAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,QAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,UAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,OAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,WAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,WAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,UAAkB,kBAA3B,OAAA,IAAA,MAA2B,MAAA,CAAA,GAA3B,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,gBAAwB,kBAAjC,OAAA,IAAA,MAAiC,SAAA,CAAA,GAAjC,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,mBAAqC,kBAA9C,OAAA,IAAA,MAA8C,KAAA,CAAA,GAA9C,kBAAA,OAAA,IAAA,IAAA;AAEA,kBAAA,MAAQ,gBAAuC,IAAA;AAC/C,kBAAA,MAAQ,cAA6B,IAAA;AACrC,kBAAA,MAAQ,eAAoD,IAAA;AAY5D,kBAAA,MAAQ,gBAAe,MAAM;AAC3B,UAAI,KAAK,SAAU;AAEnB,YAAM,aAAa,KAAK,eAAA;AAExB,WAAK,UAAU,UAAU,UAAU,UAAU,EAAE,KAAK,MAAM;AACxD,aAAK,aAAa,UAAU,EAAE;AAE9B,YAAI,KAAK,YAAY;AACnB,eAAK,WAAW,UAAU,KAAK;AAC/B,eAAK,WAAW,OAAO;AAAA,QACzB;AAEA,YAAI,KAAK,gBAAgB,MAAM;AAC7B,uBAAa,KAAK,WAAW;AAAA,QAC/B;AACA,cAAM,WAAW,KAAK,YAAY;AAClC,aAAK,cAAc,WAAW,MAAM;AAClC,eAAK,gBAAgB,QAAQ;AAC7B,cAAI,KAAK,YAAY;AACnB,iBAAK,WAAW,UAAU,KAAK;AAC/B,iBAAK,WAAW,OAAO;AAAA,UACzB;AACA,eAAK,cAAc;AAAA,QACrB,GAAG,QAAQ;AAEX,aAAK;AAAA,UACH,IAAI,YAAY,QAAQ;AAAA,YACtB,SAAS;AAAA,YACT,UAAU;AAAA,YACV,QAAQ,EAAE,MAAM,WAAA;AAAA,UAAW,CAC5B;AAAA,QAAA;AAAA,MAEL,CAAC;AAAA,IACH,CAAA;AAAA,EAAA;AAAA,EA5CQ,iBAAyB;;AAC/B,QAAI,KAAK,QAAQ,KAAM,QAAO,KAAK;AACnC,UAAM,UAAQC,MAAA,KAAK,iBAAL,gBAAAA,IAAmB,cAAc,EAAE,SAAS,KAAA,OAAW,CAAA;AACrE,WAAO,MACJ,OAAO,CAAC,MAAM,EAAE,aAAa,KAAK,SAAS,EAC3C,IAAI,CAAC,MAAM,EAAE,eAAe,EAAE,EAC9B,KAAK,EAAE,EACP,KAAA;AAAA,EACL;AAAA,EAsCU,cAAc;AACtB,QAAI,KAAK,gBAAgB,MAAM;AAC7B,mBAAa,KAAK,WAAW;AAC7B,WAAK,cAAc;AAAA,IACrB;AAAA,EACF;AAAA,EAEU,SAAS;AACjB,WAAOC,MAAAA,KAAK,CAAC,EAAE,WAAW,QAAQ,MAAM,MAAM,aAAa;AACzD,WAAK,aAAa;AAAA,QAChB;AAAA,UACE,SAAS,KAAK;AAAA,UACd,WAAW,KAAK;AAAA,UAChB,UAAU,KAAK;AAAA,QAAA;AAAA,QAEjB,MAAM;AACJ;AAAA,YACE;AAAA,cACE,MAAM;AAAA,cACN,UAAU,KAAK;AAAA,cACf,MAAM;AAAA,cACN,cAAc,KAAK;AAAA,cACnB,iBAAiB,KAAK;AAAA,cACtB,UAAU,KAAK;AAAA,YAAA;AAAA,YAEjB,MAAM;AACJ,mBAAK,EAAE,WAAW,YAAA,GAAe,MAAM;AACrC,uBAAO,EAAE,MAAM,QAAQ;AAAA,cACzB,CAAC;AACD,mBAAK,EAAE,WAAW,aAAA,GAAgB,MAAM;AACtC,uBAAO,EAAE,MAAM,SAAS;AAAA,cAC1B,CAAC;AACD,mBAAK,eAAe,KAAA;AAAA,YACtB;AAAA,UAAA;AAAA,QAEJ;AAAA,MAAA;AAAA,IAEJ,CAAC;AAAA,EACH;AACF;AAvHA,QAAA,iBAAA,EAAA;AAIW,QAAA,oBAAA,QAAA;AAGA,SAAA,oBAAA,QAAA;AAGA,WAAA,oBAAA,QAAA;AAGA,QAAA,oBAAA,QAAA;AAGA,YAAA,oBAAA,QAAA;AAGA,YAAA,oBAAA,QAAA;AAGA,WAAA,oBAAA,QAAA;AAGA,iBAAA,oBAAA,QAAA;AAGA,oBAAA,oBAAA,QAAA;AAxBT,kBAAA,OAAA,GAAS,QADT,WAHI,YAIK,KAAA;AAGT,kBAAA,OAAA,GAAS,SADT,YANI,YAOK,MAAA;AAGT,kBAAA,OAAA,GAAS,WADT,cATI,YAUK,QAAA;AAGT,kBAAA,OAAA,GAAS,QADT,WAZI,YAaK,KAAA;AAGT,kBAAA,OAAA,GAAS,YADT,eAfI,YAgBK,SAAA;AAGT,kBAAA,OAAA,GAAS,YADT,eAlBI,YAmBK,SAAA;AAGT,kBAAA,OAAA,GAAS,WADT,cArBI,YAsBK,QAAA;AAGT,kBAAA,OAAA,GAAS,iBADT,oBAxBI,YAyBK,cAAA;AAGT,kBAAA,OAAA,GAAS,oBADT,uBA3BI,YA4BK,iBAAA;AA5BX,oBAAA,OAAM,UAAA;AACJ,cADI,YACa,UAAS,CAACC,UAAAA,WAAgBC,KAAAA,SAASC,MAAAA,UAAU,eAAe,CAAA;AAwH/E,WAAW,SAAA;;"}
|
|
@@ -1,169 +0,0 @@
|
|
|
1
|
-
import { v as variables } from "./variables.js";
|
|
2
|
-
import { s as sizeCSS } from "./size.js";
|
|
3
|
-
import { c as colorCSS } from "./color.js";
|
|
4
|
-
import { A as AeicoComponent } from "./aeico-component.js";
|
|
5
|
-
import { prop, html } from "aeico";
|
|
6
|
-
const copyButtonStyle = ':host {\n display: inline-block;\n --btn-solid-bg: var(--color-solid);\n --btn-solid-bg-hover: var(--color-solid-hover);\n --btn-solid-bg-active: var(--color-solid-active);\n --btn-solid-color: var(--color-on-solid);\n --btn-solid-color-hover: var(--color-on-solid-hover);\n --btn-border: var(--color-border);\n --btn-border-hover: var(--color-border-hover);\n --btn-accent: var(--color-accent);\n --btn-accent-hover: var(--color-accent-hover);\n --btn-subtle-bg: var(--color-subtle);\n --btn-subtle-bg-hover: var(--color-subtle-hover);\n}\n\nbutton {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n font-family: inherit;\n font-weight: 400;\n text-align: center;\n white-space: nowrap;\n vertical-align: middle;\n user-select: none;\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n outline: none;\n position: relative;\n padding: 0.429em 0.571em;\n font-size: 1em;\n line-height: 1.5;\n border-radius: 4px;\n height: 2.286em;\n width: 2.286em;\n min-width: unset;\n\n background: var(--btn-solid-bg);\n border: 1px solid var(--btn-solid-bg);\n color: var(--btn-solid-color);\n}\n\nbutton:focus { outline: none; }\nbutton:active { transform: translateY(1px); }\n\nbutton:hover:not(:disabled) {\n background: var(--btn-solid-bg-hover);\n border-color: var(--btn-border-hover);\n color: var(--btn-solid-color-hover, var(--btn-solid-color));\n}\n\nbutton:active:not(:disabled) { background: var(--btn-solid-bg-active); }\n\nbutton:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* Hide the fallback-text slot */\nslot { display: none; }\n\n/* Icon visibility */\n.icon-copy,\n.icon-check {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: opacity 0.15s ease, transform 0.15s ease;\n}\n\n.icon-copy { opacity: 1; transform: scale(1); }\n.icon-check { opacity: 0; transform: scale(0.6); }\n\n:host([copied]) .icon-copy { opacity: 0; transform: scale(0.6); }\n:host([copied]) .icon-check { opacity: 1; transform: scale(1); }\n\n/* Variants */\n:host([variant="outlined"]) button {\n background: transparent;\n border-color: var(--btn-border);\n color: var(--btn-accent);\n}\n:host([variant="outlined"]) button:hover:not(:disabled) {\n background: var(--btn-subtle-bg);\n border-color: var(--btn-border-hover);\n color: var(--btn-accent-hover);\n}\n\n:host([variant="faint"]) button {\n background: var(--btn-subtle-bg);\n border-color: transparent;\n color: var(--btn-accent);\n}\n:host([variant="faint"]) button:hover:not(:disabled) {\n background: var(--btn-subtle-bg-hover);\n color: var(--btn-accent-hover);\n}\n\n:host([variant="subtle"]) button {\n background: transparent;\n border-color: transparent;\n color: var(--btn-accent);\n}\n:host([variant="subtle"]) button:hover:not(:disabled) {\n background: var(--btn-subtle-bg);\n color: var(--btn-accent-hover);\n}\n\n:host([variant="text"]) button {\n background: transparent;\n border-color: transparent;\n color: var(--btn-accent);\n}\n:host([variant="text"]) button:hover:not(:disabled) {\n color: var(--btn-accent-hover);\n}\n';
|
|
7
|
-
var __create = Object.create;
|
|
8
|
-
var __defProp = Object.defineProperty;
|
|
9
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
10
|
-
var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
|
|
11
|
-
var __typeError = (msg) => {
|
|
12
|
-
throw TypeError(msg);
|
|
13
|
-
};
|
|
14
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
15
|
-
var __decoratorStart = (base) => [, , , __create((base == null ? void 0 : base[__knownSymbol("metadata")]) ?? null)];
|
|
16
|
-
var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
|
|
17
|
-
var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
|
|
18
|
-
var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
|
|
19
|
-
var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
|
|
20
|
-
var __runInitializers = (array, flags, self, value) => {
|
|
21
|
-
for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
|
|
22
|
-
return value;
|
|
23
|
-
};
|
|
24
|
-
var __decorateElement = (array, flags, name, decorators, target, extra) => {
|
|
25
|
-
var fn, it, done, ctx, access, k = flags & 7, s = false, p = false;
|
|
26
|
-
var j = array.length + 1, key = __decoratorStrings[k + 5];
|
|
27
|
-
var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
|
|
28
|
-
var desc = (target = target.prototype, __getOwnPropDesc({ get [name]() {
|
|
29
|
-
return __privateGet(this, extra);
|
|
30
|
-
}, set [name](x) {
|
|
31
|
-
return __privateSet(this, extra, x);
|
|
32
|
-
} }, name));
|
|
33
|
-
for (var i = decorators.length - 1; i >= 0; i--) {
|
|
34
|
-
ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
|
|
35
|
-
{
|
|
36
|
-
ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
|
|
37
|
-
access.get = (x) => x[name];
|
|
38
|
-
access.set = (x, y) => x[name] = y;
|
|
39
|
-
}
|
|
40
|
-
it = (0, decorators[i])({ get: desc.get, set: desc.set }, ctx), done._ = 1;
|
|
41
|
-
if (it === void 0) __expectFn(it) && (desc[key] = it);
|
|
42
|
-
else if (typeof it !== "object" || it === null) __typeError("Object expected");
|
|
43
|
-
else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
|
|
44
|
-
}
|
|
45
|
-
return desc && __defProp(target, name, desc), target;
|
|
46
|
-
};
|
|
47
|
-
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
48
|
-
var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
|
|
49
|
-
var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), member.get(obj));
|
|
50
|
-
var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
51
|
-
var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
|
|
52
|
-
var _tooltipPlacement_dec, _tooltipCopied_dec, _tooltip_dec, _duration_dec, _disabled_dec, _size_dec, _variant_dec, _color_dec, _text_dec, _a, _init, _text, _color, _variant, _size, _disabled, _duration, _tooltip, _tooltipCopied, _tooltipPlacement;
|
|
53
|
-
class CopyButton extends (_a = AeicoComponent, _text_dec = [prop({ type: String })], _color_dec = [prop({ type: String })], _variant_dec = [prop({ type: String })], _size_dec = [prop({ type: String })], _disabled_dec = [prop({ type: Boolean })], _duration_dec = [prop({ type: Number })], _tooltip_dec = [prop({ type: String })], _tooltipCopied_dec = [prop({ type: String })], _tooltipPlacement_dec = [prop({ type: String })], _a) {
|
|
54
|
-
constructor() {
|
|
55
|
-
super(...arguments);
|
|
56
|
-
__privateAdd(this, _text, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
|
|
57
|
-
__privateAdd(this, _color, __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
|
|
58
|
-
__privateAdd(this, _variant, __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
|
|
59
|
-
__privateAdd(this, _size, __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
|
|
60
|
-
__privateAdd(this, _disabled, __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
|
|
61
|
-
__privateAdd(this, _duration, __runInitializers(_init, 28, this)), __runInitializers(_init, 31, this);
|
|
62
|
-
__privateAdd(this, _tooltip, __runInitializers(_init, 32, this, "Copy")), __runInitializers(_init, 35, this);
|
|
63
|
-
__privateAdd(this, _tooltipCopied, __runInitializers(_init, 36, this, "Copied!")), __runInitializers(_init, 39, this);
|
|
64
|
-
__privateAdd(this, _tooltipPlacement, __runInitializers(_init, 40, this, "top")), __runInitializers(_init, 43, this);
|
|
65
|
-
__publicField(this, "_slotElement", null);
|
|
66
|
-
__publicField(this, "_tooltipEl", null);
|
|
67
|
-
__publicField(this, "_resetTimer", null);
|
|
68
|
-
__publicField(this, "_handleClick", () => {
|
|
69
|
-
if (this.disabled) return;
|
|
70
|
-
const textToCopy = this._getTextToCopy();
|
|
71
|
-
void navigator.clipboard.writeText(textToCopy).then(() => {
|
|
72
|
-
this.setAttribute("copied", "");
|
|
73
|
-
if (this._tooltipEl) {
|
|
74
|
-
this._tooltipEl.content = this.tooltipCopied;
|
|
75
|
-
this._tooltipEl.open = true;
|
|
76
|
-
}
|
|
77
|
-
if (this._resetTimer !== null) {
|
|
78
|
-
clearTimeout(this._resetTimer);
|
|
79
|
-
}
|
|
80
|
-
const duration = this.duration ?? 2e3;
|
|
81
|
-
this._resetTimer = setTimeout(() => {
|
|
82
|
-
this.removeAttribute("copied");
|
|
83
|
-
if (this._tooltipEl) {
|
|
84
|
-
this._tooltipEl.content = this.tooltip;
|
|
85
|
-
this._tooltipEl.open = false;
|
|
86
|
-
}
|
|
87
|
-
this._resetTimer = null;
|
|
88
|
-
}, duration);
|
|
89
|
-
this.dispatchEvent(
|
|
90
|
-
new CustomEvent("copy", {
|
|
91
|
-
bubbles: true,
|
|
92
|
-
composed: true,
|
|
93
|
-
detail: { text: textToCopy }
|
|
94
|
-
})
|
|
95
|
-
);
|
|
96
|
-
});
|
|
97
|
-
});
|
|
98
|
-
}
|
|
99
|
-
_getTextToCopy() {
|
|
100
|
-
var _a2;
|
|
101
|
-
if (this.text != null) return this.text;
|
|
102
|
-
const nodes = ((_a2 = this._slotElement) == null ? void 0 : _a2.assignedNodes({ flatten: true })) ?? [];
|
|
103
|
-
return nodes.filter((n) => n.nodeType === Node.TEXT_NODE).map((n) => n.textContent ?? "").join("").trim();
|
|
104
|
-
}
|
|
105
|
-
onUnmounted() {
|
|
106
|
-
if (this._resetTimer !== null) {
|
|
107
|
-
clearTimeout(this._resetTimer);
|
|
108
|
-
this._resetTimer = null;
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
|
-
render() {
|
|
112
|
-
return html(({ aeTooltip, button, span, slot, aeIcon }) => {
|
|
113
|
-
this._tooltipEl = aeTooltip(
|
|
114
|
-
{
|
|
115
|
-
content: this.tooltip,
|
|
116
|
-
placement: this.tooltipPlacement,
|
|
117
|
-
disabled: this.disabled
|
|
118
|
-
},
|
|
119
|
-
() => {
|
|
120
|
-
button(
|
|
121
|
-
{
|
|
122
|
-
type: "button",
|
|
123
|
-
disabled: this.disabled,
|
|
124
|
-
part: "button",
|
|
125
|
-
"aria-label": this.tooltip,
|
|
126
|
-
"aria-disabled": this.disabled,
|
|
127
|
-
"@click": this._handleClick
|
|
128
|
-
},
|
|
129
|
-
() => {
|
|
130
|
-
span({ className: "icon-copy" }, () => {
|
|
131
|
-
aeIcon({ name: "copy" });
|
|
132
|
-
});
|
|
133
|
-
span({ className: "icon-check" }, () => {
|
|
134
|
-
aeIcon({ name: "check" });
|
|
135
|
-
});
|
|
136
|
-
this._slotElement = slot();
|
|
137
|
-
}
|
|
138
|
-
);
|
|
139
|
-
}
|
|
140
|
-
);
|
|
141
|
-
});
|
|
142
|
-
}
|
|
143
|
-
}
|
|
144
|
-
_init = __decoratorStart(_a);
|
|
145
|
-
_text = /* @__PURE__ */ new WeakMap();
|
|
146
|
-
_color = /* @__PURE__ */ new WeakMap();
|
|
147
|
-
_variant = /* @__PURE__ */ new WeakMap();
|
|
148
|
-
_size = /* @__PURE__ */ new WeakMap();
|
|
149
|
-
_disabled = /* @__PURE__ */ new WeakMap();
|
|
150
|
-
_duration = /* @__PURE__ */ new WeakMap();
|
|
151
|
-
_tooltip = /* @__PURE__ */ new WeakMap();
|
|
152
|
-
_tooltipCopied = /* @__PURE__ */ new WeakMap();
|
|
153
|
-
_tooltipPlacement = /* @__PURE__ */ new WeakMap();
|
|
154
|
-
__decorateElement(_init, 4, "text", _text_dec, CopyButton, _text);
|
|
155
|
-
__decorateElement(_init, 4, "color", _color_dec, CopyButton, _color);
|
|
156
|
-
__decorateElement(_init, 4, "variant", _variant_dec, CopyButton, _variant);
|
|
157
|
-
__decorateElement(_init, 4, "size", _size_dec, CopyButton, _size);
|
|
158
|
-
__decorateElement(_init, 4, "disabled", _disabled_dec, CopyButton, _disabled);
|
|
159
|
-
__decorateElement(_init, 4, "duration", _duration_dec, CopyButton, _duration);
|
|
160
|
-
__decorateElement(_init, 4, "tooltip", _tooltip_dec, CopyButton, _tooltip);
|
|
161
|
-
__decorateElement(_init, 4, "tooltipCopied", _tooltipCopied_dec, CopyButton, _tooltipCopied);
|
|
162
|
-
__decorateElement(_init, 4, "tooltipPlacement", _tooltipPlacement_dec, CopyButton, _tooltipPlacement);
|
|
163
|
-
__decoratorMetadata(_init, CopyButton);
|
|
164
|
-
__publicField(CopyButton, "styles", [variables, sizeCSS, colorCSS, copyButtonStyle]);
|
|
165
|
-
CopyButton.register();
|
|
166
|
-
export {
|
|
167
|
-
CopyButton as C
|
|
168
|
-
};
|
|
169
|
-
//# sourceMappingURL=copy-button.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"copy-button.js","sources":["../../src/copy-button/copy-button.ts"],"sourcesContent":["import type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport copyButtonStyle from '../styles/components/copy-button.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport { prop } from 'aeico';\n// Ensure ae-icon and ae-tooltip are registered\nimport '../icon/icon';\nimport '../tooltip/tooltip';\nimport type Tooltip from '../tooltip/tooltip';\nimport type { TooltipPlacement } from '../tooltip/defines';\nimport type { CopyButtonColor, CopyButtonSize, CopyButtonVariant } from './defines';\n\nclass CopyButton extends AeicoComponent {\n protected static styles = [styleVariables, sizeCSS, colorCSS, copyButtonStyle];\n\n @prop({ type: String })\n accessor text: string | undefined;\n\n @prop({ type: String })\n accessor color: CopyButtonColor | undefined;\n\n @prop({ type: String })\n accessor variant: CopyButtonVariant | undefined;\n\n @prop({ type: String })\n accessor size: CopyButtonSize | undefined;\n\n @prop({ type: Boolean })\n accessor disabled: boolean | undefined;\n\n @prop({ type: Number })\n accessor duration: number | undefined;\n\n @prop({ type: String })\n accessor tooltip: string = 'Copy';\n\n @prop({ type: String })\n accessor tooltipCopied: string = 'Copied!';\n\n @prop({ type: String })\n accessor tooltipPlacement: TooltipPlacement = 'top';\n\n private _slotElement: HTMLSlotElement | null = null;\n private _tooltipEl: Tooltip | null = null;\n private _resetTimer: ReturnType<typeof setTimeout> | null = null;\n\n private _getTextToCopy(): string {\n if (this.text != null) return this.text;\n const nodes = this._slotElement?.assignedNodes({ flatten: true }) ?? [];\n return nodes\n .filter((n) => n.nodeType === Node.TEXT_NODE)\n .map((n) => n.textContent ?? '')\n .join('')\n .trim();\n }\n\n private _handleClick = () => {\n if (this.disabled) return;\n\n const textToCopy = this._getTextToCopy();\n\n void navigator.clipboard.writeText(textToCopy).then(() => {\n this.setAttribute('copied', '');\n\n if (this._tooltipEl) {\n this._tooltipEl.content = this.tooltipCopied;\n this._tooltipEl.open = true;\n }\n\n if (this._resetTimer !== null) {\n clearTimeout(this._resetTimer);\n }\n const duration = this.duration ?? 2000;\n this._resetTimer = setTimeout(() => {\n this.removeAttribute('copied');\n if (this._tooltipEl) {\n this._tooltipEl.content = this.tooltip;\n this._tooltipEl.open = false;\n }\n this._resetTimer = null;\n }, duration);\n\n this.dispatchEvent(\n new CustomEvent('copy', {\n bubbles: true,\n composed: true,\n detail: { text: textToCopy },\n }),\n );\n });\n };\n\n protected onUnmounted() {\n if (this._resetTimer !== null) {\n clearTimeout(this._resetTimer);\n this._resetTimer = null;\n }\n }\n\n protected render() {\n return html(({ aeTooltip, button, span, slot, aeIcon }) => {\n this._tooltipEl = aeTooltip(\n {\n content: this.tooltip,\n placement: this.tooltipPlacement,\n disabled: this.disabled,\n },\n () => {\n button(\n {\n type: 'button',\n disabled: this.disabled,\n part: 'button',\n 'aria-label': this.tooltip,\n 'aria-disabled': this.disabled,\n '@click': this._handleClick,\n },\n () => {\n span({ className: 'icon-copy' }, () => {\n aeIcon({ name: 'copy' });\n });\n span({ className: 'icon-check' }, () => {\n aeIcon({ name: 'check' });\n });\n this._slotElement = slot();\n },\n );\n },\n );\n });\n }\n}\n\nCopyButton.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-copy-button': CopyButton;\n }\n}\n\nexport default CopyButton;\nexport type CopyButtonProps = InferProps<typeof CopyButton>;\n"],"names":["_a","styleVariables"],"mappings":"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"}
|