revotech-ui-kit 0.0.4-beta → 0.0.5-beta
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.ts +1 -1
- package/dist/sw.js +1 -1
- package/dist/sw.js.map +1 -1
- package/package.json +1 -1
- package/src/components/atoms/alert/alert.atom.ts +5 -1
- package/src/components/atoms/button/button.atom.ts +6 -0
- package/src/index.ts +1 -1
- package/dist/183c6c38.js +0 -1
- package/dist/public/globals.css +0 -2215
- package/dist/public/tailwind-lib.css +0 -115
- package/dist/src/assets/icons/arrows.icon.js +0 -20
- package/dist/src/assets/icons/arrows.icon.js.map +0 -1
- package/dist/src/assets/icons/index.js +0 -4
- package/dist/src/assets/icons/index.js.map +0 -1
- package/dist/src/assets/icons/search.icon.js +0 -19
- package/dist/src/assets/icons/search.icon.js.map +0 -1
- package/dist/src/assets/icons/tick.icon.js +0 -20
- package/dist/src/assets/icons/tick.icon.js.map +0 -1
- package/dist/src/components/atoms/alert/alert-description.js +0 -18
- package/dist/src/components/atoms/alert/alert-description.js.map +0 -1
- package/dist/src/components/atoms/alert/alert-title.js +0 -20
- package/dist/src/components/atoms/alert/alert-title.js.map +0 -1
- package/dist/src/components/atoms/alert/alert.atom.js +0 -55
- package/dist/src/components/atoms/alert/alert.atom.js.map +0 -1
- package/dist/src/components/atoms/alert/alert.stories.js +0 -62
- package/dist/src/components/atoms/alert/alert.stories.js.map +0 -1
- package/dist/src/components/atoms/alert/alert.styles.js +0 -21
- package/dist/src/components/atoms/alert/alert.styles.js.map +0 -1
- package/dist/src/components/atoms/alert/alert.types.js +0 -2
- package/dist/src/components/atoms/alert/alert.types.js.map +0 -1
- package/dist/src/components/atoms/badge/badge.atom.js +0 -43
- package/dist/src/components/atoms/badge/badge.atom.js.map +0 -1
- package/dist/src/components/atoms/badge/badge.stories.js +0 -110
- package/dist/src/components/atoms/badge/badge.stories.js.map +0 -1
- package/dist/src/components/atoms/badge/badge.style.js +0 -17
- package/dist/src/components/atoms/badge/badge.style.js.map +0 -1
- package/dist/src/components/atoms/badge/badge.type.js +0 -2
- package/dist/src/components/atoms/badge/badge.type.js.map +0 -1
- package/dist/src/components/atoms/button/button.atom.js +0 -67
- package/dist/src/components/atoms/button/button.atom.js.map +0 -1
- package/dist/src/components/atoms/button/button.stories.js +0 -204
- package/dist/src/components/atoms/button/button.stories.js.map +0 -1
- package/dist/src/components/atoms/button/button.style.js +0 -24
- package/dist/src/components/atoms/button/button.style.js.map +0 -1
- package/dist/src/components/atoms/button/button.type.js +0 -2
- package/dist/src/components/atoms/button/button.type.js.map +0 -1
- package/dist/src/components/atoms/card/card-content.js +0 -17
- package/dist/src/components/atoms/card/card-content.js.map +0 -1
- package/dist/src/components/atoms/card/card-description.js +0 -17
- package/dist/src/components/atoms/card/card-description.js.map +0 -1
- package/dist/src/components/atoms/card/card-footer.js +0 -17
- package/dist/src/components/atoms/card/card-footer.js.map +0 -1
- package/dist/src/components/atoms/card/card-header.js +0 -17
- package/dist/src/components/atoms/card/card-header.js.map +0 -1
- package/dist/src/components/atoms/card/card-title.js +0 -17
- package/dist/src/components/atoms/card/card-title.js.map +0 -1
- package/dist/src/components/atoms/card/card.atom.js +0 -25
- package/dist/src/components/atoms/card/card.atom.js.map +0 -1
- package/dist/src/components/atoms/card/card.stories.js +0 -136
- package/dist/src/components/atoms/card/card.stories.js.map +0 -1
- package/dist/src/components/atoms/checkbox/checkbox.atom.js +0 -87
- package/dist/src/components/atoms/checkbox/checkbox.atom.js.map +0 -1
- package/dist/src/components/atoms/checkbox/checkbox.stories.js +0 -244
- package/dist/src/components/atoms/checkbox/checkbox.stories.js.map +0 -1
- package/dist/src/components/atoms/checkbox/checkbox.style.js +0 -3
- package/dist/src/components/atoms/checkbox/checkbox.style.js.map +0 -1
- package/dist/src/components/atoms/checkbox/checkbox.type.js +0 -2
- package/dist/src/components/atoms/checkbox/checkbox.type.js.map +0 -1
- package/dist/src/components/atoms/combo-box/combo-box-input.js +0 -47
- package/dist/src/components/atoms/combo-box/combo-box-input.js.map +0 -1
- package/dist/src/components/atoms/combo-box/combo-box-item.js +0 -85
- package/dist/src/components/atoms/combo-box/combo-box-item.js.map +0 -1
- package/dist/src/components/atoms/combo-box/combo-box-list.js +0 -67
- package/dist/src/components/atoms/combo-box/combo-box-list.js.map +0 -1
- package/dist/src/components/atoms/combo-box/combo-box.atom.js +0 -199
- package/dist/src/components/atoms/combo-box/combo-box.atom.js.map +0 -1
- package/dist/src/components/atoms/combo-box/combo-box.stories.js +0 -86
- package/dist/src/components/atoms/combo-box/combo-box.stories.js.map +0 -1
- package/dist/src/components/atoms/command-empty/command-empty.atom.js +0 -54
- package/dist/src/components/atoms/command-empty/command-empty.atom.js.map +0 -1
- package/dist/src/components/atoms/command-group/command-group.atom.js +0 -71
- package/dist/src/components/atoms/command-group/command-group.atom.js.map +0 -1
- package/dist/src/components/atoms/command-item/command-item.atom.js +0 -80
- package/dist/src/components/atoms/command-item/command-item.atom.js.map +0 -1
- package/dist/src/components/atoms/command-list/command-list.atom.js +0 -36
- package/dist/src/components/atoms/command-list/command-list.atom.js.map +0 -1
- package/dist/src/components/atoms/command-separator/command-separator.atom.js +0 -52
- package/dist/src/components/atoms/command-separator/command-separator.atom.js.map +0 -1
- package/dist/src/components/atoms/dialog/dialog-close.js +0 -47
- package/dist/src/components/atoms/dialog/dialog-close.js.map +0 -1
- package/dist/src/components/atoms/dialog/dialog-content.js +0 -72
- package/dist/src/components/atoms/dialog/dialog-content.js.map +0 -1
- package/dist/src/components/atoms/dialog/dialog-footer.js +0 -22
- package/dist/src/components/atoms/dialog/dialog-footer.js.map +0 -1
- package/dist/src/components/atoms/dialog/dialog-header.js +0 -40
- package/dist/src/components/atoms/dialog/dialog-header.js.map +0 -1
- package/dist/src/components/atoms/dialog/dialog-overly.js +0 -20
- package/dist/src/components/atoms/dialog/dialog-overly.js.map +0 -1
- package/dist/src/components/atoms/dialog/dialog-trigger.js +0 -54
- package/dist/src/components/atoms/dialog/dialog-trigger.js.map +0 -1
- package/dist/src/components/atoms/dialog/dialog.atom.js +0 -79
- package/dist/src/components/atoms/dialog/dialog.atom.js.map +0 -1
- package/dist/src/components/atoms/dialog/dialog.stories.js +0 -88
- package/dist/src/components/atoms/dialog/dialog.stories.js.map +0 -1
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-checkbox-Item.js +0 -117
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-checkbox-Item.js.map +0 -1
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-content.js +0 -81
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-content.js.map +0 -1
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-group.js +0 -71
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-group.js.map +0 -1
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-item.js +0 -80
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-item.js.map +0 -1
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-radio-item.js +0 -118
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-radio-item.js.map +0 -1
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-seperator.js +0 -52
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-seperator.js.map +0 -1
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-shortcut.js +0 -20
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-shortcut.js.map +0 -1
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu.atom.js +0 -79
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu.atom.js.map +0 -1
- package/dist/src/components/atoms/dropdownMenu/dropdownMenu.stories.js +0 -211
- package/dist/src/components/atoms/dropdownMenu/dropdownMenu.stories.js.map +0 -1
- package/dist/src/components/atoms/dropdownMenu/dropdownMenu.style.js +0 -4
- package/dist/src/components/atoms/dropdownMenu/dropdownMenu.style.js.map +0 -1
- package/dist/src/components/atoms/index.js +0 -14
- package/dist/src/components/atoms/index.js.map +0 -1
- package/dist/src/components/atoms/input/input.atom.js +0 -93
- package/dist/src/components/atoms/input/input.atom.js.map +0 -1
- package/dist/src/components/atoms/input/input.stories.js +0 -382
- package/dist/src/components/atoms/input/input.stories.js.map +0 -1
- package/dist/src/components/atoms/input/input.styles.js +0 -2
- package/dist/src/components/atoms/input/input.styles.js.map +0 -1
- package/dist/src/components/atoms/input/input.type.js +0 -2
- package/dist/src/components/atoms/input/input.type.js.map +0 -1
- package/dist/src/components/atoms/label/label.atom.js +0 -68
- package/dist/src/components/atoms/label/label.atom.js.map +0 -1
- package/dist/src/components/atoms/label/label.stories.js +0 -85
- package/dist/src/components/atoms/label/label.stories.js.map +0 -1
- package/dist/src/components/atoms/label/label.style.js +0 -3
- package/dist/src/components/atoms/label/label.style.js.map +0 -1
- package/dist/src/components/atoms/popover/popover-content.js +0 -64
- package/dist/src/components/atoms/popover/popover-content.js.map +0 -1
- package/dist/src/components/atoms/popover/popover-trigger.js +0 -51
- package/dist/src/components/atoms/popover/popover-trigger.js.map +0 -1
- package/dist/src/components/atoms/popover/popover.atom.js +0 -40
- package/dist/src/components/atoms/popover/popover.atom.js.map +0 -1
- package/dist/src/components/atoms/popover/popover.stories.js +0 -69
- package/dist/src/components/atoms/popover/popover.stories.js.map +0 -1
- package/dist/src/components/atoms/popover/popover.style.js +0 -21
- package/dist/src/components/atoms/popover/popover.style.js.map +0 -1
- package/dist/src/components/atoms/popover/popover.types.js +0 -4
- package/dist/src/components/atoms/popover/popover.types.js.map +0 -1
- package/dist/src/components/atoms/toggle/defs.js +0 -30
- package/dist/src/components/atoms/toggle/defs.js.map +0 -1
- package/dist/src/components/atoms/toggle/toggle.atom.js +0 -72
- package/dist/src/components/atoms/toggle/toggle.atom.js.map +0 -1
- package/dist/src/components/atoms/toggle/toggle.stories.js +0 -189
- package/dist/src/components/atoms/toggle/toggle.stories.js.map +0 -1
- package/dist/src/components/atoms/toggle/toggle.style.js +0 -19
- package/dist/src/components/atoms/toggle/toggle.style.js.map +0 -1
- package/dist/src/components/command/command.js +0 -410
- package/dist/src/components/command/command.js.map +0 -1
- package/dist/src/components/command/command.stories.js +0 -153
- package/dist/src/components/command/command.stories.js.map +0 -1
- package/dist/src/components/index.js +0 -3
- package/dist/src/components/index.js.map +0 -1
- package/dist/src/components/molecules/command/command.molecules.js +0 -27
- package/dist/src/components/molecules/command/command.molecules.js.map +0 -1
- package/dist/src/components/molecules/command-input/command-input.atom.js +0 -127
- package/dist/src/components/molecules/command-input/command-input.atom.js.map +0 -1
- package/dist/src/components/molecules/dropdownMenu/dropdownMenu.molecules.js +0 -2
- package/dist/src/components/molecules/dropdownMenu/dropdownMenu.molecules.js.map +0 -1
- package/dist/src/components/molecules/index.js +0 -2
- package/dist/src/components/molecules/index.js.map +0 -1
- package/dist/src/helpers/base-element.js +0 -64
- package/dist/src/helpers/base-element.js.map +0 -1
- package/dist/src/helpers/index.js +0 -4
- package/dist/src/helpers/index.js.map +0 -1
- package/dist/src/helpers/mouse-conroller.helper.js +0 -33
- package/dist/src/helpers/mouse-conroller.helper.js.map +0 -1
- package/dist/src/helpers/style.helpers.js +0 -6
- package/dist/src/helpers/style.helpers.js.map +0 -1
- package/dist/src/index.js +0 -2
- package/dist/src/index.js.map +0 -1
- package/dist/src/interfaces/actionable.interface.js +0 -2
- package/dist/src/interfaces/actionable.interface.js.map +0 -1
- package/dist/src/interfaces/atomic.interface.js +0 -2
- package/dist/src/interfaces/atomic.interface.js.map +0 -1
- package/dist/src/interfaces/changeable.interface.js +0 -2
- package/dist/src/interfaces/changeable.interface.js.map +0 -1
- package/dist/src/interfaces/child-support-atomic.interface.js +0 -2
- package/dist/src/interfaces/child-support-atomic.interface.js.map +0 -1
- package/dist/src/interfaces/index.js +0 -7
- package/dist/src/interfaces/index.js.map +0 -1
- package/dist/src/interfaces/intractable.interface.js +0 -2
- package/dist/src/interfaces/intractable.interface.js.map +0 -1
- package/dist/src/interfaces/variant.interface.js +0 -2
- package/dist/src/interfaces/variant.interface.js.map +0 -1
- package/dist/src/lib/index.js +0 -2
- package/dist/src/lib/index.js.map +0 -1
- package/dist/src/lib/next/next.lib.js +0 -2
- package/dist/src/lib/next/next.lib.js.map +0 -1
- package/dist/src/lib/react/react.lib.js +0 -16
- package/dist/src/lib/react/react.lib.js.map +0 -1
- package/dist/src/lib/tw-styles.js +0 -1956
- package/dist/src/lib/tw-styles.js.map +0 -1
- package/dist/src/styles/index.js +0 -2
- package/dist/src/styles/index.js.map +0 -1
- package/dist/src/styles/tw.styles.js +0 -2218
- package/dist/src/styles/tw.styles.js.map +0 -1
- package/dist/src/wc-ui-app.js +0 -88
- package/dist/src/wc-ui-app.js.map +0 -1
- package/dist/test/wc-ui-app.test.js +0 -18
- package/dist/test/wc-ui-app.test.js.map +0 -1
- package/dist/tsconfig.tsbuildinfo +0 -1
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"command-separator.atom.js","sourceRoot":"","sources":["../../../../../src/components/atoms/command-separator/command-separator.atom.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAGpC,IAAM,gBAAgB,wBAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QACuB,QAAG,GAAG,EAAE,CAAC;QAEiB,YAAO,GAAG,EAAE,CAAC;IAgCrE,CAAC;IA1BC,IAAY,UAAU;;QACpB,IAAI,IAAI,CAAC,GAAG,KAAK,EAAE,EAAE,CAAC;YACpB,OAAO,IAAI,CAAC,GAAG,CAAC;QAClB,CAAC;QACD,MAAM,MAAM,GACV,MAAA,MAAA,IAAI,CAAC,aAAa,0CAAE,UAAU,0CAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;QACpE,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC,GAAG,GAAG,GAAG,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,kBAAgB,CAAC,QAAQ,EAAE,EAAE,CAAC;QAC3E,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,GAAG,GAAG,cAAc,kBAAgB,CAAC,QAAQ,EAAE,EAAE,CAAC;QACzD,CAAC;QACD,OAAO,IAAI,CAAC,GAAG,CAAC;IAClB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,OAAO,KAAK,MAAM;YACnC,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,IAAI,CAAA;;qBAES,EAAE,CAAC,sBAAsB,EAAE,IAAI,CAAC,SAAS,CAAC;;;kBAG7C,IAAI,CAAC,UAAU;;SAExB,EAAE,CAAC;IACV,CAAC;;AA7Bc,yBAAQ,GAAG,CAAC,AAAJ,CAAK;AAErB,uBAAM,GAAG,CAAC,GAAG,CAAA,EAAE,EAAE,QAAQ,CAAC,AAApB,CAAqB;AANN;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAU;AAEiB;IAArD,QAAQ,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAc;AAHxD,gBAAgB;IAD5B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,gBAAgB,CAmC5B","sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { cn } from '../../../helpers';\nimport { TWStyles } from '../../../styles';\n\n@customElement('rtg-command-separator')\nexport class CommandSeparator extends LitElement {\n @property({ type: String }) _id = '';\n\n @property({ attribute: 'aria-hidden', type: String }) _hidden = '';\n\n private static _counter = 0;\n\n static styles = [css``, TWStyles];\n\n private get identifier() {\n if (this._id !== '') {\n return this._id;\n }\n const parent =\n this.parentElement?.shadowRoot?.querySelector('div[rtgcmd-list]');\n if (parent) {\n this._id = `${parent.getAttribute('id')}s${CommandSeparator._counter++}`;\n } else {\n this._id = `rtgcmdrxlxs${CommandSeparator._counter++}`;\n }\n return this._id;\n }\n\n render() {\n return html`${this._hidden === 'true'\n ? nothing\n : html`\n <div\n class=\"${cn('-mx-1 h-px bg-border', this.className)}\"\n rtgcmd-separator\n role=\"separator\"\n id=\"${this.identifier}\"\n ></div>\n `}`;\n }\n}\n"]}
|
@@ -1,47 +0,0 @@
|
|
1
|
-
import { __decorate } from "tslib";
|
2
|
-
import { TWStyles } from '../../../styles';
|
3
|
-
import { css, html, LitElement } from 'lit';
|
4
|
-
import { customElement } from 'lit/decorators.js';
|
5
|
-
import { Dialog } from './dialog.atom';
|
6
|
-
const STATE_OPEN = 'open';
|
7
|
-
const STATE_CLOSED = 'closed';
|
8
|
-
let DialogClose = class DialogClose extends LitElement {
|
9
|
-
get _dialog() {
|
10
|
-
let parent = this.parentElement;
|
11
|
-
while (parent) {
|
12
|
-
if (parent instanceof Dialog) {
|
13
|
-
return parent;
|
14
|
-
}
|
15
|
-
parent = parent.parentElement;
|
16
|
-
}
|
17
|
-
return parent;
|
18
|
-
}
|
19
|
-
firstUpdated(_changedProperties) {
|
20
|
-
var _a;
|
21
|
-
super.firstUpdated(_changedProperties);
|
22
|
-
const slot = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
|
23
|
-
const children = slot === null || slot === void 0 ? void 0 : slot.assignedElements();
|
24
|
-
if (children && children.length > 0) {
|
25
|
-
const button = children[0];
|
26
|
-
button.addEventListener('click', () => {
|
27
|
-
const dialog = this._dialog;
|
28
|
-
if (dialog) {
|
29
|
-
dialog.dataset.state = STATE_CLOSED;
|
30
|
-
}
|
31
|
-
});
|
32
|
-
}
|
33
|
-
}
|
34
|
-
render() {
|
35
|
-
return html `
|
36
|
-
<div>
|
37
|
-
<slot></slot>
|
38
|
-
</div>
|
39
|
-
`;
|
40
|
-
}
|
41
|
-
};
|
42
|
-
DialogClose.styles = [css ``, TWStyles];
|
43
|
-
DialogClose = __decorate([
|
44
|
-
customElement('rtg-dialog-close')
|
45
|
-
], DialogClose);
|
46
|
-
export { DialogClose };
|
47
|
-
//# sourceMappingURL=dialog-close.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"dialog-close.js","sourceRoot":"","sources":["../../../../../src/components/atoms/dialog/dialog-close.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAoB,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEvC,MAAM,UAAU,GAAG,MAAM,CAAC;AAC1B,MAAM,YAAY,GAAG,QAAQ,CAAC;AAGvB,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAGzC,IAAY,OAAO;QACjB,IAAI,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC;QAEhC,OAAO,MAAM,EAAE,CAAC;YACd,IAAI,MAAM,YAAY,MAAM,EAAE,CAAC;gBAC7B,OAAO,MAAM,CAAC;YAChB,CAAC;YACD,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC;QAChC,CAAC;QACD,OAAO,MAAM,CAAC;IAChB,CAAC;IAES,YAAY,CACpB,kBAAqE;;QAErE,KAAK,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;QACvC,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,MAAM,CAAC,CAAC;QACpD,MAAM,QAAQ,GAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,EAAE,CAAC;QAC1C,IAAI,QAAQ,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACpC,MAAM,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;YAE3B,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;gBACpC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;gBAC5B,IAAI,MAAM,EAAE,CAAC;oBACX,MAAM,CAAC,OAAO,CAAC,KAAK,GAAG,YAAY,CAAC;gBACtC,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AAtCM,kBAAM,GAAG,CAAC,GAAG,CAAA,EAAE,EAAE,QAAQ,CAAC,AAApB,CAAqB;AADvB,WAAW;IADvB,aAAa,CAAC,kBAAkB,CAAC;GACrB,WAAW,CAwCvB","sourcesContent":["import { TWStyles } from '../../../styles';\nimport { css, html, LitElement, PropertyValueMap } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { Dialog } from './dialog.atom';\n\nconst STATE_OPEN = 'open';\nconst STATE_CLOSED = 'closed';\n\n@customElement('rtg-dialog-close')\nexport class DialogClose extends LitElement {\n static styles = [css``, TWStyles];\n\n private get _dialog(): Dialog | null {\n let parent = this.parentElement;\n\n while (parent) {\n if (parent instanceof Dialog) {\n return parent;\n }\n parent = parent.parentElement;\n }\n return parent;\n }\n\n protected firstUpdated(\n _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n ): void {\n super.firstUpdated(_changedProperties);\n const slot = this.shadowRoot?.querySelector('slot');\n const children = slot?.assignedElements();\n if (children && children.length > 0) {\n const button = children[0];\n\n button.addEventListener('click', () => {\n const dialog = this._dialog;\n if (dialog) {\n dialog.dataset.state = STATE_CLOSED;\n }\n });\n }\n }\n\n render() {\n return html`\n <div>\n <slot></slot>\n </div>\n `;\n }\n}\n"]}
|
@@ -1,72 +0,0 @@
|
|
1
|
-
import { __decorate } from "tslib";
|
2
|
-
import { TWStyles } from '../../../styles';
|
3
|
-
import { cn } from '../../../helpers';
|
4
|
-
import { css, html, LitElement, nothing } from 'lit';
|
5
|
-
import { customElement, property } from 'lit/decorators.js';
|
6
|
-
import { Dialog } from './dialog.atom';
|
7
|
-
const STATE_OPEN = 'open';
|
8
|
-
const STATE_CLOSED = 'closed';
|
9
|
-
let DialogContent = class DialogContent extends LitElement {
|
10
|
-
constructor() {
|
11
|
-
super(...arguments);
|
12
|
-
this.state = STATE_CLOSED;
|
13
|
-
this.handleCloseButtonClick = () => {
|
14
|
-
const dialog = this._dialog;
|
15
|
-
if (dialog) {
|
16
|
-
dialog.dataset.state = STATE_CLOSED;
|
17
|
-
}
|
18
|
-
};
|
19
|
-
}
|
20
|
-
get _dialog() {
|
21
|
-
let parent = this.parentElement;
|
22
|
-
while (parent) {
|
23
|
-
if (parent instanceof Dialog) {
|
24
|
-
return parent;
|
25
|
-
}
|
26
|
-
parent = parent.parentElement;
|
27
|
-
}
|
28
|
-
return parent;
|
29
|
-
}
|
30
|
-
render() {
|
31
|
-
return html `${this.state === STATE_OPEN
|
32
|
-
? html `
|
33
|
-
<div
|
34
|
-
class="${cn('fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg', this.className)}"
|
35
|
-
rtgdlg-content
|
36
|
-
>
|
37
|
-
<slot></slot>
|
38
|
-
<button
|
39
|
-
type="button"
|
40
|
-
@click="${this.handleCloseButtonClick}"
|
41
|
-
class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
|
42
|
-
>
|
43
|
-
<svg
|
44
|
-
xmlns="http://www.w3.org/2000/svg"
|
45
|
-
width="24"
|
46
|
-
height="24"
|
47
|
-
viewBox="0 0 24 24"
|
48
|
-
fill="none"
|
49
|
-
stroke="currentColor"
|
50
|
-
stroke-width="2"
|
51
|
-
stroke-linecap="round"
|
52
|
-
stroke-linejoin="round"
|
53
|
-
class="h-4 w-4"
|
54
|
-
>
|
55
|
-
<path d="M18 6 6 18"></path>
|
56
|
-
<path d="m6 6 12 12"></path></svg
|
57
|
-
><span class="sr-only">Close</span>
|
58
|
-
</button>
|
59
|
-
</div>
|
60
|
-
`
|
61
|
-
: nothing}`;
|
62
|
-
}
|
63
|
-
};
|
64
|
-
DialogContent.styles = [css ``, TWStyles];
|
65
|
-
__decorate([
|
66
|
-
property({ attribute: 'data-state', type: String })
|
67
|
-
], DialogContent.prototype, "state", void 0);
|
68
|
-
DialogContent = __decorate([
|
69
|
-
customElement('rtg-dialog-content')
|
70
|
-
], DialogContent);
|
71
|
-
export { DialogContent };
|
72
|
-
//# sourceMappingURL=dialog-content.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"dialog-content.js","sourceRoot":"","sources":["../../../../../src/components/atoms/dialog/dialog-content.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEvC,MAAM,UAAU,GAAG,MAAM,CAAC;AAC1B,MAAM,YAAY,GAAG,QAAQ,CAAC;AAGvB,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAGgD,UAAK,GAAG,YAAY,CAAC;QAclE,2BAAsB,GAAG,GAAG,EAAE;YACpC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;YAC5B,IAAI,MAAM,EAAE,CAAC;gBACX,MAAM,CAAC,OAAO,CAAC,KAAK,GAAG,YAAY,CAAC;YACtC,CAAC;QACH,CAAC,CAAC;IAsCJ,CAAC;IAvDC,IAAY,OAAO;QACjB,IAAI,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC;QAEhC,OAAO,MAAM,EAAE,CAAC;YACd,IAAI,MAAM,YAAY,MAAM,EAAE,CAAC;gBAC7B,OAAO,MAAM,CAAC;YAChB,CAAC;YACD,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC;QAChC,CAAC;QACD,OAAO,MAAM,CAAC;IAChB,CAAC;IASD,MAAM;QACJ,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,KAAK,KAAK,UAAU;YACrC,CAAC,CAAC,IAAI,CAAA;;qBAES,EAAE,CACT,6fAA6f,EAC7f,IAAI,CAAC,SAAS,CACf;;;;;;wBAMW,IAAI,CAAC,sBAAsB;;;;;;;;;;;;;;;;;;;;SAoB1C;YACH,CAAC,CAAC,OAAO,EAAE,CAAC;IAChB,CAAC;;AA1DM,oBAAM,GAAG,CAAC,GAAG,CAAA,EAAE,EAAE,QAAQ,CAAC,AAApB,CAAqB;AAEmB;IAApD,QAAQ,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAsB;AAH/D,aAAa;IADzB,aAAa,CAAC,oBAAoB,CAAC;GACvB,aAAa,CA4DzB","sourcesContent":["import { TWStyles } from '../../../styles';\nimport { cn } from '../../../helpers';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { Dialog } from './dialog.atom';\n\nconst STATE_OPEN = 'open';\nconst STATE_CLOSED = 'closed';\n\n@customElement('rtg-dialog-content')\nexport class DialogContent extends LitElement {\n static styles = [css``, TWStyles];\n\n @property({ attribute: 'data-state', type: String }) state = STATE_CLOSED;\n\n private get _dialog(): Dialog | null {\n let parent = this.parentElement;\n\n while (parent) {\n if (parent instanceof Dialog) {\n return parent;\n }\n parent = parent.parentElement;\n }\n return parent;\n }\n\n private handleCloseButtonClick = () => {\n const dialog = this._dialog;\n if (dialog) {\n dialog.dataset.state = STATE_CLOSED;\n }\n };\n\n render() {\n return html`${this.state === STATE_OPEN\n ? html`\n <div\n class=\"${cn(\n 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n this.className\n )}\"\n rtgdlg-content\n >\n <slot></slot>\n <button\n type=\"button\"\n @click=\"${this.handleCloseButtonClick}\"\n class=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class=\"h-4 w-4\"\n >\n <path d=\"M18 6 6 18\"></path>\n <path d=\"m6 6 12 12\"></path></svg\n ><span class=\"sr-only\">Close</span>\n </button>\n </div>\n `\n : nothing}`;\n }\n}\n"]}
|
@@ -1,22 +0,0 @@
|
|
1
|
-
import { __decorate } from "tslib";
|
2
|
-
import { cn } from '../../../helpers';
|
3
|
-
import { TWStyles } from '../../../styles';
|
4
|
-
import { css, html, LitElement } from 'lit';
|
5
|
-
import { customElement } from 'lit/decorators.js';
|
6
|
-
let DialogFooter = class DialogFooter extends LitElement {
|
7
|
-
render() {
|
8
|
-
return html `
|
9
|
-
<div
|
10
|
-
class="${cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', this.className)}"
|
11
|
-
>
|
12
|
-
<slot></slot>
|
13
|
-
</div>
|
14
|
-
`;
|
15
|
-
}
|
16
|
-
};
|
17
|
-
DialogFooter.styles = [css ``, TWStyles];
|
18
|
-
DialogFooter = __decorate([
|
19
|
-
customElement('rtg-dialog-footer')
|
20
|
-
], DialogFooter);
|
21
|
-
export { DialogFooter };
|
22
|
-
//# sourceMappingURL=dialog-footer.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"dialog-footer.js","sourceRoot":"","sources":["../../../../../src/components/atoms/dialog/dialog-footer.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAG3C,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAG1C,MAAM;QACJ,OAAO,IAAI,CAAA;;iBAEE,EAAE,CACT,+DAA+D,EAC/D,IAAI,CAAC,SAAS,CACf;;;;KAIJ,CAAC;IACJ,CAAC;;AAbM,mBAAM,GAAG,CAAC,GAAG,CAAA,EAAE,EAAE,QAAQ,CAAC,AAApB,CAAqB;AADvB,YAAY;IADxB,aAAa,CAAC,mBAAmB,CAAC;GACtB,YAAY,CAexB","sourcesContent":["import { cn } from '../../../helpers';\nimport { TWStyles } from '../../../styles';\nimport { css, html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\n@customElement('rtg-dialog-footer')\nexport class DialogFooter extends LitElement {\n static styles = [css``, TWStyles];\n\n render() {\n return html`\n <div\n class=\"${cn(\n 'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',\n this.className\n )}\"\n >\n <slot></slot>\n </div>\n `;\n }\n}\n"]}
|
@@ -1,40 +0,0 @@
|
|
1
|
-
import { __decorate } from "tslib";
|
2
|
-
import { cn } from '../../../helpers';
|
3
|
-
import { TWStyles } from '../../../styles';
|
4
|
-
import { css, html, LitElement } from 'lit';
|
5
|
-
import { customElement, property } from 'lit/decorators.js';
|
6
|
-
let DialogHeader = class DialogHeader extends LitElement {
|
7
|
-
constructor() {
|
8
|
-
super(...arguments);
|
9
|
-
this._title = '';
|
10
|
-
this.description = '';
|
11
|
-
}
|
12
|
-
render() {
|
13
|
-
return html `
|
14
|
-
<div
|
15
|
-
class="${cn('flex flex-col space-y-1.5 text-center sm:text-left', this.className)}"
|
16
|
-
>
|
17
|
-
<h2
|
18
|
-
class="${cn('text-lg font-semibold leading-none tracking-tight', this.className)}"
|
19
|
-
>
|
20
|
-
${this._title}
|
21
|
-
</h2>
|
22
|
-
<p class="${cn('text-sm text-muted-foreground', this.className)}">
|
23
|
-
${this.description}
|
24
|
-
</p>
|
25
|
-
</div>
|
26
|
-
`;
|
27
|
-
}
|
28
|
-
};
|
29
|
-
DialogHeader.styles = [css ``, TWStyles];
|
30
|
-
__decorate([
|
31
|
-
property({ attribute: 'title', type: String })
|
32
|
-
], DialogHeader.prototype, "_title", void 0);
|
33
|
-
__decorate([
|
34
|
-
property({ type: String })
|
35
|
-
], DialogHeader.prototype, "description", void 0);
|
36
|
-
DialogHeader = __decorate([
|
37
|
-
customElement('rtg-dialog-header')
|
38
|
-
], DialogHeader);
|
39
|
-
export { DialogHeader };
|
40
|
-
//# sourceMappingURL=dialog-header.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"dialog-header.js","sourceRoot":"","sources":["../../../../../src/components/atoms/dialog/dialog-header.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGrD,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QAG2C,WAAM,GAAG,EAAE,CAAC;QAEhC,gBAAW,GAAG,EAAE,CAAC;IAwB/C,CAAC;IAtBC,MAAM;QACJ,OAAO,IAAI,CAAA;;iBAEE,EAAE,CACT,oDAAoD,EACpD,IAAI,CAAC,SAAS,CACf;;;mBAGU,EAAE,CACT,mDAAmD,EACnD,IAAI,CAAC,SAAS,CACf;;YAEC,IAAI,CAAC,MAAM;;oBAEH,EAAE,CAAC,+BAA+B,EAAE,IAAI,CAAC,SAAS,CAAC;YAC3D,IAAI,CAAC,WAAW;;;KAGvB,CAAC;IACJ,CAAC;;AA3BM,mBAAM,GAAG,CAAC,GAAG,CAAA,EAAE,EAAE,QAAQ,CAAC,AAApB,CAAqB;AAEc;IAA/C,QAAQ,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAa;AAEhC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAkB;AALlC,YAAY;IADxB,aAAa,CAAC,mBAAmB,CAAC;GACtB,YAAY,CA6BxB","sourcesContent":["import { cn } from '../../../helpers';\nimport { TWStyles } from '../../../styles';\nimport { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n@customElement('rtg-dialog-header')\nexport class DialogHeader extends LitElement {\n static styles = [css``, TWStyles];\n\n @property({ attribute: 'title', type: String }) _title = '';\n\n @property({ type: String }) description = '';\n\n render() {\n return html`\n <div\n class=\"${cn(\n 'flex flex-col space-y-1.5 text-center sm:text-left',\n this.className\n )}\"\n >\n <h2\n class=\"${cn(\n 'text-lg font-semibold leading-none tracking-tight',\n this.className\n )}\"\n >\n ${this._title}\n </h2>\n <p class=\"${cn('text-sm text-muted-foreground', this.className)}\">\n ${this.description}\n </p>\n </div>\n `;\n }\n}\n"]}
|
@@ -1,20 +0,0 @@
|
|
1
|
-
import { __decorate } from "tslib";
|
2
|
-
import { cn } from '../../../helpers';
|
3
|
-
import { TWStyles } from '../../../styles';
|
4
|
-
import { css, html, LitElement } from 'lit';
|
5
|
-
import { customElement } from 'lit/decorators.js';
|
6
|
-
let DialogOverlay = class DialogOverlay extends LitElement {
|
7
|
-
render() {
|
8
|
-
return html `
|
9
|
-
<div
|
10
|
-
class="${cn('fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', this.className)}"
|
11
|
-
></div>
|
12
|
-
`;
|
13
|
-
}
|
14
|
-
};
|
15
|
-
DialogOverlay.styles = [css ``, TWStyles];
|
16
|
-
DialogOverlay = __decorate([
|
17
|
-
customElement('rtg-dialog-overlay')
|
18
|
-
], DialogOverlay);
|
19
|
-
export { DialogOverlay };
|
20
|
-
//# sourceMappingURL=dialog-overly.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"dialog-overly.js","sourceRoot":"","sources":["../../../../../src/components/atoms/dialog/dialog-overly.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAY,MAAM,mBAAmB,CAAC;AAGrD,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAG3C,MAAM;QACJ,OAAO,IAAI,CAAA;;iBAEE,EAAE,CACT,yJAAyJ,EACzJ,IAAI,CAAC,SAAS,CACf;;KAEJ,CAAC;IACJ,CAAC;;AAXM,oBAAM,GAAG,CAAC,GAAG,CAAA,EAAE,EAAE,QAAQ,CAAC,AAApB,CAAqB;AADvB,aAAa;IADzB,aAAa,CAAC,oBAAoB,CAAC;GACvB,aAAa,CAazB","sourcesContent":["import { cn } from '../../../helpers';\nimport { TWStyles } from '../../../styles';\nimport { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n@customElement('rtg-dialog-overlay')\nexport class DialogOverlay extends LitElement {\n static styles = [css``, TWStyles];\n\n render() {\n return html`\n <div\n class=\"${cn(\n 'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n this.className\n )}\"\n ></div>\n `;\n }\n}\n"]}
|
@@ -1,54 +0,0 @@
|
|
1
|
-
import { __decorate } from "tslib";
|
2
|
-
import { TWStyles } from '../../../styles';
|
3
|
-
import { css, html, LitElement } from 'lit';
|
4
|
-
import { customElement } from 'lit/decorators.js';
|
5
|
-
import { Dialog } from './dialog.atom';
|
6
|
-
const STATE_OPEN = 'open';
|
7
|
-
const STATE_CLOSED = 'closed';
|
8
|
-
let DialogTrigger = class DialogTrigger extends LitElement {
|
9
|
-
constructor() {
|
10
|
-
super(...arguments);
|
11
|
-
this.handleClick = () => {
|
12
|
-
const dialog = this._dialog;
|
13
|
-
if (dialog) {
|
14
|
-
dialog.dataset.state = STATE_OPEN;
|
15
|
-
}
|
16
|
-
};
|
17
|
-
}
|
18
|
-
get _dialog() {
|
19
|
-
let parent = this.parentElement;
|
20
|
-
while (parent) {
|
21
|
-
if (parent instanceof Dialog) {
|
22
|
-
return parent;
|
23
|
-
}
|
24
|
-
parent = parent.parentElement;
|
25
|
-
}
|
26
|
-
return parent;
|
27
|
-
}
|
28
|
-
firstUpdated(_changedProperties) {
|
29
|
-
var _a, _b;
|
30
|
-
super.firstUpdated(_changedProperties);
|
31
|
-
const slots = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
|
32
|
-
const assignedElements = slots === null || slots === void 0 ? void 0 : slots.assignedElements({ flatten: true });
|
33
|
-
if (assignedElements && assignedElements.length > 0) {
|
34
|
-
//@ts-ignore
|
35
|
-
assignedElements[0].click = this.handleClick;
|
36
|
-
}
|
37
|
-
(_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.addEventListener('click', e => {
|
38
|
-
e.stopPropagation();
|
39
|
-
});
|
40
|
-
}
|
41
|
-
render() {
|
42
|
-
return html `
|
43
|
-
<div>
|
44
|
-
<slot></slot>
|
45
|
-
</div>
|
46
|
-
`;
|
47
|
-
}
|
48
|
-
};
|
49
|
-
DialogTrigger.styles = [css ``, TWStyles];
|
50
|
-
DialogTrigger = __decorate([
|
51
|
-
customElement('rtg-dialog-trigger')
|
52
|
-
], DialogTrigger);
|
53
|
-
export { DialogTrigger };
|
54
|
-
//# sourceMappingURL=dialog-trigger.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"dialog-trigger.js","sourceRoot":"","sources":["../../../../../src/components/atoms/dialog/dialog-trigger.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAoB,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEvC,MAAM,UAAU,GAAG,MAAM,CAAC;AAC1B,MAAM,YAAY,GAAG,QAAQ,CAAC;AAGvB,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAeL,gBAAW,GAAG,GAAG,EAAE;YACjB,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;YAC5B,IAAI,MAAM,EAAE,CAAC;gBACX,MAAM,CAAC,OAAO,CAAC,KAAK,GAAG,UAAU,CAAC;YACpC,CAAC;QACH,CAAC,CAAC;IAwBJ,CAAC;IAzCC,IAAY,OAAO;QACjB,IAAI,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC;QAEhC,OAAO,MAAM,EAAE,CAAC;YACd,IAAI,MAAM,YAAY,MAAM,EAAE,CAAC;gBAC7B,OAAO,MAAM,CAAC;YAChB,CAAC;YACD,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC;QAChC,CAAC;QACD,OAAO,MAAM,CAAC;IAChB,CAAC;IAQS,YAAY,CACpB,kBAAqE;;QAErE,KAAK,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;QACvC,MAAM,KAAK,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,MAAM,CAAoB,CAAC;QACxE,MAAM,gBAAgB,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACpE,IAAI,gBAAgB,IAAI,gBAAgB,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACpD,YAAY;YACZ,gBAAgB,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC;QAC/C,CAAC;QAED,MAAA,IAAI,CAAC,UAAU,0CAAE,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE;YAC7C,CAAC,CAAC,eAAe,EAAE,CAAC;QACtB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AA1CM,oBAAM,GAAG,CAAC,GAAG,CAAA,EAAE,EAAE,QAAQ,CAAC,AAApB,CAAqB;AADvB,aAAa;IADzB,aAAa,CAAC,oBAAoB,CAAC;GACvB,aAAa,CA4CzB","sourcesContent":["import { TWStyles } from '../../../styles';\nimport { css, html, LitElement, PropertyValueMap } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { Dialog } from './dialog.atom';\n\nconst STATE_OPEN = 'open';\nconst STATE_CLOSED = 'closed';\n\n@customElement('rtg-dialog-trigger')\nexport class DialogTrigger extends LitElement {\n static styles = [css``, TWStyles];\n\n private get _dialog(): Dialog | null {\n let parent = this.parentElement;\n\n while (parent) {\n if (parent instanceof Dialog) {\n return parent;\n }\n parent = parent.parentElement;\n }\n return parent;\n }\n\n handleClick = () => {\n const dialog = this._dialog;\n if (dialog) {\n dialog.dataset.state = STATE_OPEN;\n }\n };\n protected firstUpdated(\n _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n ): void {\n super.firstUpdated(_changedProperties);\n const slots = this.shadowRoot?.querySelector('slot') as HTMLSlotElement;\n const assignedElements = slots?.assignedElements({ flatten: true });\n if (assignedElements && assignedElements.length > 0) {\n //@ts-ignore\n assignedElements[0].click = this.handleClick;\n }\n\n this.shadowRoot?.addEventListener('click', e => {\n e.stopPropagation();\n });\n }\n\n render() {\n return html`\n <div>\n <slot></slot>\n </div>\n `;\n }\n}\n"]}
|
@@ -1,79 +0,0 @@
|
|
1
|
-
import { __decorate } from "tslib";
|
2
|
-
import { LitElement, html, css, nothing } from 'lit';
|
3
|
-
import { customElement, property } from 'lit/decorators.js';
|
4
|
-
import { TWStyles } from '../../../styles';
|
5
|
-
import { DialogContent } from './dialog-content';
|
6
|
-
const STATE_OPEN = 'open';
|
7
|
-
const STATE_CLOSED = 'closed';
|
8
|
-
let Dialog = class Dialog extends LitElement {
|
9
|
-
constructor() {
|
10
|
-
super(...arguments);
|
11
|
-
this.state = STATE_CLOSED;
|
12
|
-
}
|
13
|
-
get _content() {
|
14
|
-
var _a;
|
15
|
-
const slot = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
|
16
|
-
const children = slot === null || slot === void 0 ? void 0 : slot.assignedElements();
|
17
|
-
if (children) {
|
18
|
-
for (let index = 0; index < children.length; index++) {
|
19
|
-
if (children[index] instanceof DialogContent) {
|
20
|
-
return children[index];
|
21
|
-
}
|
22
|
-
}
|
23
|
-
}
|
24
|
-
return null;
|
25
|
-
}
|
26
|
-
updated(_changedProperties) {
|
27
|
-
super.updated(_changedProperties);
|
28
|
-
const content = this._content;
|
29
|
-
if (content) {
|
30
|
-
content.dataset.state = this.state;
|
31
|
-
}
|
32
|
-
}
|
33
|
-
render() {
|
34
|
-
return html `
|
35
|
-
<div rtgdlg-root>
|
36
|
-
${this.state === STATE_OPEN
|
37
|
-
? html ` <rtg-dialog-overlay></rtg-dialog-overlay>`
|
38
|
-
: nothing}
|
39
|
-
<slot></slot>
|
40
|
-
</div>
|
41
|
-
`;
|
42
|
-
}
|
43
|
-
};
|
44
|
-
Dialog.styles = [css ``, TWStyles];
|
45
|
-
__decorate([
|
46
|
-
property({ attribute: 'data-state', type: String })
|
47
|
-
], Dialog.prototype, "state", void 0);
|
48
|
-
Dialog = __decorate([
|
49
|
-
customElement('rtg-dialog')
|
50
|
-
], Dialog);
|
51
|
-
export { Dialog };
|
52
|
-
// @customElement('rtg-dialog-title')
|
53
|
-
// export class DialogTitle extends LitElement {
|
54
|
-
// static styles = [css``, TWStyles];
|
55
|
-
// render() {
|
56
|
-
// return html`
|
57
|
-
// <h2
|
58
|
-
// class="${cn(
|
59
|
-
// 'text-lg font-semibold leading-none tracking-tight',
|
60
|
-
// this.className
|
61
|
-
// )}"
|
62
|
-
// >
|
63
|
-
// <slot></slot>
|
64
|
-
// </h2>
|
65
|
-
// `;
|
66
|
-
// }
|
67
|
-
// }
|
68
|
-
// @customElement('rtg-dialog-description')
|
69
|
-
// export class DialogDescription extends LitElement {
|
70
|
-
// static styles = [css``, TWStyles];
|
71
|
-
// render() {
|
72
|
-
// return html`
|
73
|
-
// <p class="${cn('text-sm text-muted-foreground', this.className)}">
|
74
|
-
// <slot></slot>
|
75
|
-
// </p>
|
76
|
-
// `;
|
77
|
-
// }
|
78
|
-
// }
|
79
|
-
//# sourceMappingURL=dialog.atom.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"dialog.atom.js","sourceRoot":"","sources":["../../../../../src/components/atoms/dialog/dialog.atom.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,MAAM,UAAU,GAAG,MAAM,CAAC;AAC1B,MAAM,YAAY,GAAG,QAAQ,CAAC;AAGvB,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QAGgD,UAAK,GAAG,YAAY,CAAC;IAkC5E,CAAC;IAhCC,IAAY,QAAQ;;QAClB,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,MAAM,CAAC,CAAC;QACpD,MAAM,QAAQ,GAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,EAAE,CAAC;QAC1C,IAAI,QAAQ,EAAE,CAAC;YACb,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC;gBACrD,IAAI,QAAQ,CAAC,KAAK,CAAC,YAAY,aAAa,EAAE,CAAC;oBAC7C,OAAO,QAAQ,CAAC,KAAK,CAAkB,CAAC;gBAC1C,CAAC;YACH,CAAC;QACH,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAES,OAAO,CAAC,kBAAkC;QAClD,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;QAClC,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC9B,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QACrC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,KAAK,KAAK,UAAU;YACzB,CAAC,CAAC,IAAI,CAAA,4CAA4C;YAClD,CAAC,CAAC,OAAO;;;KAGd,CAAC;IACJ,CAAC;;AAnCM,aAAM,GAAG,CAAC,GAAG,CAAA,EAAE,EAAE,QAAQ,CAAC,AAApB,CAAqB;AAEmB;IAApD,QAAQ,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCAAsB;AAH/D,MAAM;IADlB,aAAa,CAAC,YAAY,CAAC;GACf,MAAM,CAqClB;;AAED,qCAAqC;AACrC,gDAAgD;AAChD,uCAAuC;AAEvC,eAAe;AACf,mBAAmB;AACnB,YAAY;AACZ,uBAAuB;AACvB,iEAAiE;AACjE,2BAA2B;AAC3B,cAAc;AACd,UAAU;AACV,wBAAwB;AACxB,cAAc;AACd,SAAS;AACT,MAAM;AACN,IAAI;AAEJ,2CAA2C;AAC3C,sDAAsD;AACtD,uCAAuC;AAEvC,eAAe;AACf,mBAAmB;AACnB,2EAA2E;AAC3E,wBAAwB;AACxB,aAAa;AACb,SAAS;AACT,MAAM;AACN,IAAI","sourcesContent":["import { LitElement, html, css, nothing, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { TWStyles } from '../../../styles';\nimport { DialogContent } from './dialog-content';\n\nconst STATE_OPEN = 'open';\nconst STATE_CLOSED = 'closed';\n\n@customElement('rtg-dialog')\nexport class Dialog extends LitElement {\n static styles = [css``, TWStyles];\n\n @property({ attribute: 'data-state', type: String }) state = STATE_CLOSED;\n\n private get _content(): DialogContent | null {\n const slot = this.shadowRoot?.querySelector('slot');\n const children = slot?.assignedElements();\n if (children) {\n for (let index = 0; index < children.length; index++) {\n if (children[index] instanceof DialogContent) {\n return children[index] as DialogContent;\n }\n }\n }\n\n return null;\n }\n\n protected updated(_changedProperties: PropertyValues): void {\n super.updated(_changedProperties);\n const content = this._content;\n if (content) {\n content.dataset.state = this.state;\n }\n }\n\n render() {\n return html`\n <div rtgdlg-root>\n ${this.state === STATE_OPEN\n ? html` <rtg-dialog-overlay></rtg-dialog-overlay>`\n : nothing}\n <slot></slot>\n </div>\n `;\n }\n}\n\n// @customElement('rtg-dialog-title')\n// export class DialogTitle extends LitElement {\n// static styles = [css``, TWStyles];\n\n// render() {\n// return html`\n// <h2\n// class=\"${cn(\n// 'text-lg font-semibold leading-none tracking-tight',\n// this.className\n// )}\"\n// >\n// <slot></slot>\n// </h2>\n// `;\n// }\n// }\n\n// @customElement('rtg-dialog-description')\n// export class DialogDescription extends LitElement {\n// static styles = [css``, TWStyles];\n\n// render() {\n// return html`\n// <p class=\"${cn('text-sm text-muted-foreground', this.className)}\">\n// <slot></slot>\n// </p>\n// `;\n// }\n// }\n"]}
|
@@ -1,88 +0,0 @@
|
|
1
|
-
import { html } from 'lit';
|
2
|
-
import '../input/input.atom';
|
3
|
-
import './dialog.atom';
|
4
|
-
import './dialog-close';
|
5
|
-
import './dialog-content';
|
6
|
-
import './dialog-footer';
|
7
|
-
import './dialog-header';
|
8
|
-
import './dialog-overly';
|
9
|
-
import './dialog-trigger';
|
10
|
-
import '../input/input.atom';
|
11
|
-
import '../button/button.atom';
|
12
|
-
const meta = {
|
13
|
-
component: 'components/dialog',
|
14
|
-
};
|
15
|
-
export default meta;
|
16
|
-
export const ConfirmationDialog = {
|
17
|
-
render: () => html `<div class="flex flex-nowrap">
|
18
|
-
<div class="flex flex-wrap space-x-4 gap-5 mx-3">
|
19
|
-
<rtg-dialog>
|
20
|
-
<rtg-dialog-trigger>
|
21
|
-
<rtg-button>Open Dialog</rtg-button>
|
22
|
-
</rtg-dialog-trigger>
|
23
|
-
<rtg-dialog-content>
|
24
|
-
<rtg-dialog-header title="Are you absolutely sure?" description="This action cannot be undone. This will permanently delete your
|
25
|
-
content.">
|
26
|
-
<rtg-dialog-title>Are you absolutely sure?</rtg-dialog-title>
|
27
|
-
<rtg-dialog-description>
|
28
|
-
This action cannot be undone. This will permanently delete your
|
29
|
-
content.</rtg-dialog-description
|
30
|
-
>
|
31
|
-
</rtg-dialog-header>
|
32
|
-
<rtg-dialog-footer>
|
33
|
-
<div class="flex w-full justify-between space-x-1">
|
34
|
-
<rtg-dialog-close><rtg-button variant="secondary">Close</rtg-button></rtg-dialog-close>
|
35
|
-
<div class="justify-end">
|
36
|
-
<rtg-button variant="destructive">Delete</rtg-button>
|
37
|
-
<rtg-button>Cancel</rtg-button>
|
38
|
-
</div>
|
39
|
-
</div>
|
40
|
-
</rtg-dialog-content>
|
41
|
-
</rtg-dialog>
|
42
|
-
</div>
|
43
|
-
</div>`,
|
44
|
-
};
|
45
|
-
export const ModalForm = {
|
46
|
-
render: () => html `
|
47
|
-
<rtg-dialog>
|
48
|
-
<rtg-dialog-trigger>
|
49
|
-
<rtg-button variant="outline">Edit Profile</rtg-button>
|
50
|
-
</rtg-dialog-trigger>
|
51
|
-
<rtg-dialog-content class="sm:max-w-[425px]">
|
52
|
-
<rtg-dialog-header title="Edit Profile" description="Make changes to your profile here. Click save when you're done.">
|
53
|
-
<!-- <rtg-dialog-title>Edit Profile</rtg-dialog-title>
|
54
|
-
<rtg-dialog-description>
|
55
|
-
Make changes to your profile here. Click save when you're done.</rtg-dialog-description
|
56
|
-
> -->
|
57
|
-
</rtg-dialog-header>
|
58
|
-
<div class="grid gap-4 py-4">
|
59
|
-
<div class="grid grid-cols-4 items-center gap-4">
|
60
|
-
<rtg-label for="name" class="text-right">
|
61
|
-
Name
|
62
|
-
</rtg-label>
|
63
|
-
<rtg-input
|
64
|
-
id="name"
|
65
|
-
defaultValue="Pedro Duarte"
|
66
|
-
style="width:280px"
|
67
|
-
>
|
68
|
-
</rtg-input>
|
69
|
-
</div>
|
70
|
-
<div class="grid grid-cols-4 items-center gap-4">
|
71
|
-
<rtg-label for="username" class="text-right">
|
72
|
-
Username
|
73
|
-
</rtg-label>
|
74
|
-
<rtg-input
|
75
|
-
id="username"
|
76
|
-
defaultValue="@peduarte"
|
77
|
-
style="width:280px"
|
78
|
-
>
|
79
|
-
</rtg-input>
|
80
|
-
</div>
|
81
|
-
</div>
|
82
|
-
<rtg-dialog-footer>
|
83
|
-
<rtg-button>Save changes</rtg-button>
|
84
|
-
</rtg-dialog-content>
|
85
|
-
</rtg-dialog>
|
86
|
-
`,
|
87
|
-
};
|
88
|
-
//# sourceMappingURL=dialog.stories.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"dialog.stories.js","sourceRoot":"","sources":["../../../../../src/components/atoms/dialog/dialog.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,eAAe,CAAC;AACvB,OAAO,gBAAgB,CAAC;AACxB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,iBAAiB,CAAC;AACzB,OAAO,iBAAiB,CAAC;AACzB,OAAO,iBAAiB,CAAC;AACzB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,uBAAuB,CAAC;AAC/B,MAAM,IAAI,GAAS;IACjB,SAAS,EAAE,mBAAmB;CAC/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,kBAAkB,GAAU;IACvC,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;SA0BC;CACR,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwCf;CACJ,CAAC","sourcesContent":["import { html } from 'lit';\nimport { Meta, StoryObj } from '@storybook/web-components';\nimport '../input/input.atom';\nimport './dialog.atom';\nimport './dialog-close';\nimport './dialog-content';\nimport './dialog-footer';\nimport './dialog-header';\nimport './dialog-overly';\nimport './dialog-trigger';\nimport '../input/input.atom';\nimport '../button/button.atom';\nconst meta: Meta = {\n component: 'components/dialog',\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const ConfirmationDialog: Story = {\n render: () =>\n html`<div class=\"flex flex-nowrap\">\n <div class=\"flex flex-wrap space-x-4 gap-5 mx-3\">\n <rtg-dialog>\n <rtg-dialog-trigger>\n <rtg-button>Open Dialog</rtg-button>\n </rtg-dialog-trigger>\n <rtg-dialog-content>\n <rtg-dialog-header title=\"Are you absolutely sure?\" description=\"This action cannot be undone. This will permanently delete your\n content.\">\n <rtg-dialog-title>Are you absolutely sure?</rtg-dialog-title>\n <rtg-dialog-description>\n This action cannot be undone. This will permanently delete your\n content.</rtg-dialog-description\n >\n </rtg-dialog-header>\n <rtg-dialog-footer>\n <div class=\"flex w-full justify-between space-x-1\">\n <rtg-dialog-close><rtg-button variant=\"secondary\">Close</rtg-button></rtg-dialog-close>\n <div class=\"justify-end\">\n <rtg-button variant=\"destructive\">Delete</rtg-button>\n <rtg-button>Cancel</rtg-button>\n </div>\n </div>\n </rtg-dialog-content>\n </rtg-dialog>\n </div>\n </div>`,\n};\n\nexport const ModalForm: Story = {\n render: () => html`\n <rtg-dialog>\n <rtg-dialog-trigger>\n <rtg-button variant=\"outline\">Edit Profile</rtg-button>\n </rtg-dialog-trigger>\n <rtg-dialog-content class=\"sm:max-w-[425px]\">\n <rtg-dialog-header title=\"Edit Profile\" description=\"Make changes to your profile here. Click save when you're done.\">\n <!-- <rtg-dialog-title>Edit Profile</rtg-dialog-title>\n <rtg-dialog-description>\n Make changes to your profile here. Click save when you're done.</rtg-dialog-description\n > -->\n </rtg-dialog-header>\n <div class=\"grid gap-4 py-4\">\n <div class=\"grid grid-cols-4 items-center gap-4\">\n <rtg-label for=\"name\" class=\"text-right\">\n Name\n </rtg-label>\n <rtg-input\n id=\"name\"\n defaultValue=\"Pedro Duarte\"\n style=\"width:280px\"\n >\n </rtg-input>\n </div>\n <div class=\"grid grid-cols-4 items-center gap-4\">\n <rtg-label for=\"username\" class=\"text-right\">\n Username\n </rtg-label>\n <rtg-input\n id=\"username\"\n defaultValue=\"@peduarte\"\n style=\"width:280px\"\n >\n </rtg-input>\n </div>\n </div>\n <rtg-dialog-footer>\n <rtg-button>Save changes</rtg-button>\n </rtg-dialog-content>\n </rtg-dialog>\n `,\n};\n"]}
|
@@ -1,117 +0,0 @@
|
|
1
|
-
var DropdownMenuCheckboxItem_1;
|
2
|
-
import { __decorate } from "tslib";
|
3
|
-
import { LitElement, html, css, nothing } from 'lit';
|
4
|
-
import { property, customElement } from 'lit/decorators.js';
|
5
|
-
import { cn } from '../../../helpers';
|
6
|
-
import { TWStyles } from '../../../styles';
|
7
|
-
let DropdownMenuCheckboxItem = DropdownMenuCheckboxItem_1 = class DropdownMenuCheckboxItem extends LitElement {
|
8
|
-
constructor() {
|
9
|
-
super(...arguments);
|
10
|
-
this._id = '';
|
11
|
-
this._hidden = '';
|
12
|
-
this.selected = false;
|
13
|
-
this.checked = false;
|
14
|
-
this.disabled = false;
|
15
|
-
}
|
16
|
-
get identifier() {
|
17
|
-
var _a, _b;
|
18
|
-
if (this._id !== '') {
|
19
|
-
return this._id;
|
20
|
-
}
|
21
|
-
const parent = (_b = (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('div[rtgcmd-group]');
|
22
|
-
if (parent) {
|
23
|
-
this._id = `${parent.getAttribute('id')}li${DropdownMenuCheckboxItem_1._counter++}`;
|
24
|
-
}
|
25
|
-
else {
|
26
|
-
this._id = `rtgcmdrxgxli${DropdownMenuCheckboxItem_1._counter++}`;
|
27
|
-
}
|
28
|
-
return this._id;
|
29
|
-
}
|
30
|
-
get value() {
|
31
|
-
var _a;
|
32
|
-
return ((_a = this.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
|
33
|
-
}
|
34
|
-
handleMouseEvent(e) {
|
35
|
-
if (e.type === 'mouseover' || e.type === 'focus') {
|
36
|
-
this.selected = true;
|
37
|
-
}
|
38
|
-
if (e.type === 'mouseleave') {
|
39
|
-
this.selected = false;
|
40
|
-
}
|
41
|
-
}
|
42
|
-
toggleChecked() {
|
43
|
-
this.checked = !this.checked;
|
44
|
-
}
|
45
|
-
render() {
|
46
|
-
return html `
|
47
|
-
<div
|
48
|
-
class="${cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground', this.disabled ? 'pointer-events-none opacity-50' : '', this.className)}"
|
49
|
-
@click=${this.toggleChecked}
|
50
|
-
@mouseover="${this.handleMouseEvent}"
|
51
|
-
@mouseleave="${this.handleMouseEvent}"
|
52
|
-
@focus="${this.handleMouseEvent}"
|
53
|
-
rtgcmd-item
|
54
|
-
role="option"
|
55
|
-
aria-selected="${this.selected}"
|
56
|
-
data-selected="${this.selected}"
|
57
|
-
data-value="${this.value}"
|
58
|
-
id="${this.identifier}"
|
59
|
-
aria-hidden="${this.hidden}"
|
60
|
-
>
|
61
|
-
<span
|
62
|
-
class="icon-space absolute left-2 flex items-center justify-center"
|
63
|
-
>
|
64
|
-
${this.checked
|
65
|
-
? html `
|
66
|
-
<svg
|
67
|
-
xmlns="http://www.w3.org/2000/svg"
|
68
|
-
viewBox="0 0 24 24"
|
69
|
-
width="16px"
|
70
|
-
height="16px"
|
71
|
-
>
|
72
|
-
<path
|
73
|
-
d="M 19.28125 5.28125 L 9 15.5625 L 4.71875 11.28125 L 3.28125 12.71875 L 8.28125 17.71875 L 9 18.40625 L 9.71875 17.71875 L 20.71875 6.71875 Z"
|
74
|
-
/>
|
75
|
-
</svg>
|
76
|
-
`
|
77
|
-
: nothing}
|
78
|
-
</span>
|
79
|
-
<slot></slot>
|
80
|
-
</div>
|
81
|
-
`;
|
82
|
-
}
|
83
|
-
};
|
84
|
-
DropdownMenuCheckboxItem._counter = 0;
|
85
|
-
DropdownMenuCheckboxItem.styles = [
|
86
|
-
css `
|
87
|
-
.icon-space {
|
88
|
-
width: 16px; /* Fixed width to reserve space for the check icon */
|
89
|
-
height: 16px;
|
90
|
-
display: inline-block;
|
91
|
-
}
|
92
|
-
`,
|
93
|
-
TWStyles,
|
94
|
-
];
|
95
|
-
__decorate([
|
96
|
-
property({ type: String })
|
97
|
-
], DropdownMenuCheckboxItem.prototype, "_id", void 0);
|
98
|
-
__decorate([
|
99
|
-
property({ attribute: 'aria-hidden', type: String })
|
100
|
-
], DropdownMenuCheckboxItem.prototype, "_hidden", void 0);
|
101
|
-
__decorate([
|
102
|
-
property({ attribute: 'data-value', type: String })
|
103
|
-
], DropdownMenuCheckboxItem.prototype, "value", null);
|
104
|
-
__decorate([
|
105
|
-
property({ type: Boolean })
|
106
|
-
], DropdownMenuCheckboxItem.prototype, "selected", void 0);
|
107
|
-
__decorate([
|
108
|
-
property({ type: Boolean })
|
109
|
-
], DropdownMenuCheckboxItem.prototype, "checked", void 0);
|
110
|
-
__decorate([
|
111
|
-
property({ type: Boolean })
|
112
|
-
], DropdownMenuCheckboxItem.prototype, "disabled", void 0);
|
113
|
-
DropdownMenuCheckboxItem = DropdownMenuCheckboxItem_1 = __decorate([
|
114
|
-
customElement('rtg-dropdown-menu-checkbox-item')
|
115
|
-
], DropdownMenuCheckboxItem);
|
116
|
-
export { DropdownMenuCheckboxItem };
|
117
|
-
//# sourceMappingURL=dropdown-menu-checkbox-Item.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"dropdown-menu-checkbox-Item.js","sourceRoot":"","sources":["../../../../../src/components/atoms/dropdownMenu/dropdown-menu-checkbox-Item.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAGpC,IAAM,wBAAwB,gCAA9B,MAAM,wBAAyB,SAAQ,UAAU;IAAjD;;QACuB,QAAG,GAAG,EAAE,CAAC;QAEiB,YAAO,GAAG,EAAE,CAAC;QAoCtC,aAAQ,GAAG,KAAK,CAAC;QAWjB,YAAO,GAAG,KAAK,CAAC;QAChB,aAAQ,GAAG,KAAK,CAAC;IAgDhD,CAAC;IAjFC,IAAY,UAAU;;QACpB,IAAI,IAAI,CAAC,GAAG,KAAK,EAAE,EAAE,CAAC;YACpB,OAAO,IAAI,CAAC,GAAG,CAAC;QAClB,CAAC;QACD,MAAM,MAAM,GACV,MAAA,MAAA,IAAI,CAAC,aAAa,0CAAE,UAAU,0CAAE,aAAa,CAAC,mBAAmB,CAAC,CAAC;QACrE,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC,GAAG,GAAG,GAAG,MAAM,CAAC,YAAY,CAC/B,IAAI,CACL,KAAK,0BAAwB,CAAC,QAAQ,EAAE,EAAE,CAAC;QAC9C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,GAAG,GAAG,eAAe,0BAAwB,CAAC,QAAQ,EAAE,EAAE,CAAC;QAClE,CAAC;QACD,OAAO,IAAI,CAAC,GAAG,CAAC;IAClB,CAAC;IAGD,IAAW,KAAK;;QACd,OAAO,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,EAAE,KAAI,EAAE,CAAC;IACxC,CAAC;IAIO,gBAAgB,CAAC,CAAQ;QAC/B,IAAI,CAAC,CAAC,IAAI,KAAK,WAAW,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YACjD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACvB,CAAC;QACD,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,EAAE,CAAC;YAC5B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACxB,CAAC;IACH,CAAC;IAKD,aAAa;QACX,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;iBAEE,EAAE,CACT,gKAAgK,EAChK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,EAAE,EACrD,IAAI,CAAC,SAAS,CACf;iBACQ,IAAI,CAAC,aAAa;sBACb,IAAI,CAAC,gBAAgB;uBACpB,IAAI,CAAC,gBAAgB;kBAC1B,IAAI,CAAC,gBAAgB;;;yBAGd,IAAI,CAAC,QAAQ;yBACb,IAAI,CAAC,QAAQ;sBAChB,IAAI,CAAC,KAAK;cAClB,IAAI,CAAC,UAAU;uBACN,IAAI,CAAC,MAAM;;;;;YAKtB,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,IAAI,CAAA;;;;;;;;;;;eAWH;YACH,CAAC,CAAC,OAAO;;;;KAIhB,CAAC;IACJ,CAAC;;AA7Fc,iCAAQ,GAAG,CAAC,AAAJ,CAAK;AAErB,+BAAM,GAAG;IACd,GAAG,CAAA;;;;;;KAMF;IACD,QAAQ;CACT,AATY,CASX;AAf0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAU;AAEiB;IAArD,QAAQ,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDAAc;AAgCnE;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAGnD;AAE4B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0DAAkB;AAWjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yDAAiB;AAChB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0DAAkB;AAnDnC,wBAAwB;IADpC,aAAa,CAAC,iCAAiC,CAAC;GACpC,wBAAwB,CAmGpC","sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { cn } from '../../../helpers';\nimport { TWStyles } from '../../../styles';\n\n@customElement('rtg-dropdown-menu-checkbox-item')\nexport class DropdownMenuCheckboxItem extends LitElement {\n @property({ type: String }) _id = '';\n\n @property({ attribute: 'aria-hidden', type: String }) _hidden = '';\n\n private static _counter = 0;\n\n static styles = [\n css`\n .icon-space {\n width: 16px; /* Fixed width to reserve space for the check icon */\n height: 16px;\n display: inline-block;\n }\n `,\n TWStyles,\n ];\n\n private get identifier() {\n if (this._id !== '') {\n return this._id;\n }\n const parent =\n this.parentElement?.shadowRoot?.querySelector('div[rtgcmd-group]');\n if (parent) {\n this._id = `${parent.getAttribute(\n 'id'\n )}li${DropdownMenuCheckboxItem._counter++}`;\n } else {\n this._id = `rtgcmdrxgxli${DropdownMenuCheckboxItem._counter++}`;\n }\n return this._id;\n }\n\n @property({ attribute: 'data-value', type: String })\n public get value() {\n return this.textContent?.trim() || '';\n }\n\n @property({ type: Boolean }) selected = false;\n\n private handleMouseEvent(e: Event) {\n if (e.type === 'mouseover' || e.type === 'focus') {\n this.selected = true;\n }\n if (e.type === 'mouseleave') {\n this.selected = false;\n }\n }\n\n @property({ type: Boolean }) checked = false;\n @property({ type: Boolean }) disabled = false;\n\n toggleChecked() {\n this.checked = !this.checked;\n }\n\n render() {\n return html`\n <div\n class=\"${cn(\n 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground',\n this.disabled ? 'pointer-events-none opacity-50' : '',\n this.className\n )}\"\n @click=${this.toggleChecked}\n @mouseover=\"${this.handleMouseEvent}\"\n @mouseleave=\"${this.handleMouseEvent}\"\n @focus=\"${this.handleMouseEvent}\"\n rtgcmd-item\n role=\"option\"\n aria-selected=\"${this.selected}\"\n data-selected=\"${this.selected}\"\n data-value=\"${this.value}\"\n id=\"${this.identifier}\"\n aria-hidden=\"${this.hidden}\"\n >\n <span\n class=\"icon-space absolute left-2 flex items-center justify-center\"\n >\n ${this.checked\n ? html`\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n width=\"16px\"\n height=\"16px\"\n >\n <path\n d=\"M 19.28125 5.28125 L 9 15.5625 L 4.71875 11.28125 L 3.28125 12.71875 L 8.28125 17.71875 L 9 18.40625 L 9.71875 17.71875 L 20.71875 6.71875 Z\"\n />\n </svg>\n `\n : nothing}\n </span>\n <slot></slot>\n </div>\n `;\n }\n}\n"]}
|