@paperless/core 2.2.16 → 2.2.17
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/CHANGELOG.md +13 -0
- package/dist/build/p-0b3af128.entry.js +2 -0
- package/dist/build/p-0b3af128.entry.js.map +1 -0
- package/dist/build/{p-d499bb0c.js → p-5a37143b.js} +1 -1
- package/dist/build/p-8a116c31.entry.js +2 -0
- package/dist/build/p-8a116c31.entry.js.map +1 -0
- package/dist/build/p-93520e8e.entry.js +2 -0
- package/dist/build/p-93520e8e.entry.js.map +1 -0
- package/dist/build/p-button.p-icon.p-loader.entry.esm.js.map +1 -1
- package/dist/build/p-card-container.entry.esm.js.map +1 -1
- package/dist/build/p-checkbox.p-dropdown.p-dropdown-menu-container.p-dropdown-menu-item.entry.esm.js.map +1 -1
- package/dist/build/p-edffb5d1.entry.js +2 -0
- package/dist/build/p-edffb5d1.entry.js.map +1 -0
- package/dist/build/p-radio.entry.esm.js.map +1 -1
- package/dist/build/paperless.esm.js +1 -1
- package/dist/cjs/p-button.p-icon.p-loader.entry.cjs.js.map +1 -1
- package/dist/cjs/p-button_3.cjs.entry.js +6 -6
- package/dist/cjs/p-button_3.cjs.entry.js.map +1 -1
- package/dist/cjs/p-card-container.cjs.entry.js +4 -4
- package/dist/cjs/p-card-container.cjs.entry.js.map +1 -1
- package/dist/cjs/p-card-container.entry.cjs.js.map +1 -1
- package/dist/cjs/p-checkbox.p-dropdown.p-dropdown-menu-container.p-dropdown-menu-item.entry.cjs.js.map +1 -1
- package/dist/cjs/p-checkbox_4.cjs.entry.js +11 -11
- package/dist/cjs/p-checkbox_4.cjs.entry.js.map +1 -1
- package/dist/cjs/p-radio.cjs.entry.js +5 -5
- package/dist/cjs/p-radio.cjs.entry.js.map +1 -1
- package/dist/cjs/p-radio.entry.cjs.js.map +1 -1
- package/dist/collection/components/atoms/card/container/card-container.component.css +1 -1
- package/dist/collection/components/atoms/card/container/card-container.component.js +3 -3
- package/dist/collection/components/atoms/card/container/card-container.component.js.map +1 -1
- package/dist/collection/components/atoms/checkbox/checkbox.component.css +1 -1
- package/dist/collection/components/atoms/checkbox/checkbox.component.js +5 -5
- package/dist/collection/components/atoms/checkbox/checkbox.component.js.map +1 -1
- package/dist/collection/components/atoms/dropdown-menu/item/dropdown-menu-item.component.css +1 -1
- package/dist/collection/components/atoms/dropdown-menu/item/dropdown-menu-item.component.js +4 -4
- package/dist/collection/components/atoms/dropdown-menu/item/dropdown-menu-item.component.js.map +1 -1
- package/dist/collection/components/atoms/radio/radio.component.css +1 -1
- package/dist/collection/components/atoms/radio/radio.component.js +4 -4
- package/dist/collection/components/atoms/radio/radio.component.js.map +1 -1
- package/dist/collection/components/molecules/button/button.component.css +1 -1
- package/dist/collection/components/molecules/button/button.component.js +5 -5
- package/dist/collection/components/molecules/button/button.component.js.map +1 -1
- package/dist/components/{p-BhTjLQdF.js → p-ARBBg7l1.js} +8 -8
- package/dist/components/{p-BhTjLQdF.js.map → p-ARBBg7l1.js.map} +1 -1
- package/dist/components/{p-CY_6PTTc.js → p-Blu0TY1E.js} +3 -3
- package/dist/components/{p-CY_6PTTc.js.map → p-Blu0TY1E.js.map} +1 -1
- package/dist/components/{p-DLARy46p.js → p-CH8aHCfo.js} +6 -6
- package/dist/components/{p-DLARy46p.js.map → p-CH8aHCfo.js.map} +1 -1
- package/dist/components/{p-CKy64zac.js → p-CIlf0SJ-.js} +4 -4
- package/dist/components/{p-CKy64zac.js.map → p-CIlf0SJ-.js.map} +1 -1
- package/dist/components/{p-3TP-UX-Y.js → p-CSjAUB6T.js} +5 -5
- package/dist/components/{p-3TP-UX-Y.js.map → p-CSjAUB6T.js.map} +1 -1
- package/dist/components/{p-CuGtA-02.js → p-CdPwzRXe.js} +8 -8
- package/dist/components/{p-CuGtA-02.js.map → p-CdPwzRXe.js.map} +1 -1
- package/dist/components/{p-DBwmAZb5.js → p-DCTZIgFT.js} +3 -3
- package/dist/components/{p-DBwmAZb5.js.map → p-DCTZIgFT.js.map} +1 -1
- package/dist/components/{p-BfSo1qPy.js → p-DIAX9-r9.js} +8 -8
- package/dist/components/{p-BfSo1qPy.js.map → p-DIAX9-r9.js.map} +1 -1
- package/dist/components/{p-DzLUScwc.js → p-DIUA732y.js} +4 -4
- package/dist/components/{p-DzLUScwc.js.map → p-DIUA732y.js.map} +1 -1
- package/dist/components/{p-B4qiEiNB.js → p-PqgdU5A2.js} +3 -3
- package/dist/components/{p-B4qiEiNB.js.map → p-PqgdU5A2.js.map} +1 -1
- package/dist/components/{p-Be4WHASj.js → p-TDGXG5Qi.js} +3 -3
- package/dist/components/{p-Be4WHASj.js.map → p-TDGXG5Qi.js.map} +1 -1
- package/dist/components/p-attachment.js +1 -1
- package/dist/components/p-button.js +1 -1
- package/dist/components/p-calendar.js +1 -1
- package/dist/components/p-card-container.js +4 -4
- package/dist/components/p-card-container.js.map +1 -1
- package/dist/components/p-checkbox.js +1 -1
- package/dist/components/p-datepicker.js +3 -3
- package/dist/components/p-drawer-header.js +1 -1
- package/dist/components/p-drawer.js +2 -2
- package/dist/components/p-dropdown-menu-item.js +1 -1
- package/dist/components/p-empty-state.js +1 -1
- package/dist/components/p-field.js +1 -1
- package/dist/components/p-modal-header.js +1 -1
- package/dist/components/p-modal.js +2 -2
- package/dist/components/p-navbar.js +1 -1
- package/dist/components/p-pagination-size.js +1 -1
- package/dist/components/p-pagination.js +1 -1
- package/dist/components/p-profile.js +1 -1
- package/dist/components/p-radio.js +5 -5
- package/dist/components/p-radio.js.map +1 -1
- package/dist/components/p-select.js +4 -4
- package/dist/components/{p-giTrVMAJ.js → p-t49-Fgzo.js} +3 -3
- package/dist/components/{p-giTrVMAJ.js.map → p-t49-Fgzo.js.map} +1 -1
- package/dist/components/p-table-footer.js +1 -1
- package/dist/components/p-table-header.js +1 -1
- package/dist/components/p-table.js +9 -9
- package/dist/esm/p-button.p-icon.p-loader.entry.js.map +1 -1
- package/dist/esm/p-button_3.entry.js +6 -6
- package/dist/esm/p-button_3.entry.js.map +1 -1
- package/dist/esm/p-card-container.entry.js +4 -4
- package/dist/esm/p-card-container.entry.js.map +1 -1
- package/dist/esm/p-checkbox.p-dropdown.p-dropdown-menu-container.p-dropdown-menu-item.entry.js.map +1 -1
- package/dist/esm/p-checkbox_4.entry.js +11 -11
- package/dist/esm/p-checkbox_4.entry.js.map +1 -1
- package/dist/esm/p-radio.entry.js +5 -5
- package/dist/esm/p-radio.entry.js.map +1 -1
- package/dist/index.html +1 -1
- package/dist/paperless/p-0b3af128.entry.js +2 -0
- package/dist/paperless/p-0b3af128.entry.js.map +1 -0
- package/dist/paperless/p-8a116c31.entry.js +2 -0
- package/dist/paperless/p-8a116c31.entry.js.map +1 -0
- package/dist/paperless/p-93520e8e.entry.js +2 -0
- package/dist/paperless/p-93520e8e.entry.js.map +1 -0
- package/dist/paperless/p-button.p-icon.p-loader.entry.esm.js.map +1 -1
- package/dist/paperless/p-card-container.entry.esm.js.map +1 -1
- package/dist/paperless/p-checkbox.p-dropdown.p-dropdown-menu-container.p-dropdown-menu-item.entry.esm.js.map +1 -1
- package/dist/paperless/p-edffb5d1.entry.js +2 -0
- package/dist/paperless/p-edffb5d1.entry.js.map +1 -0
- package/dist/paperless/p-radio.entry.esm.js.map +1 -1
- package/dist/paperless/paperless.esm.js +1 -1
- package/dist/sw.js +1 -1
- package/dist/sw.js.map +1 -1
- package/package.json +1 -1
- package/dist/build/p-60a19708.entry.js +0 -2
- package/dist/build/p-60a19708.entry.js.map +0 -1
- package/dist/build/p-8a634916.entry.js +0 -2
- package/dist/build/p-8a634916.entry.js.map +0 -1
- package/dist/build/p-dc8b0ad9.entry.js +0 -2
- package/dist/build/p-dc8b0ad9.entry.js.map +0 -1
- package/dist/build/p-fcb0901e.entry.js +0 -2
- package/dist/build/p-fcb0901e.entry.js.map +0 -1
- package/dist/paperless/p-60a19708.entry.js +0 -2
- package/dist/paperless/p-60a19708.entry.js.map +0 -1
- package/dist/paperless/p-8a634916.entry.js +0 -2
- package/dist/paperless/p-8a634916.entry.js.map +0 -1
- package/dist/paperless/p-dc8b0ad9.entry.js +0 -2
- package/dist/paperless/p-dc8b0ad9.entry.js.map +0 -1
- package/dist/paperless/p-fcb0901e.entry.js +0 -2
- package/dist/paperless/p-fcb0901e.entry.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-radio.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,iBAAiB,GAAG,
|
|
1
|
+
{"file":"p-radio.entry.cjs.js","mappings":"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","names":["cva","nonce","h","asBoolean"],"sources":["src/components/atoms/radio/radio.component.css?tag=p-radio","src/components/atoms/radio/radio.component.tsx"],"sourcesContent":["","import {\n\tAttachInternals,\n\tComponent,\n\tEvent,\n\tEventEmitter,\n\tProp,\n\tState,\n\th,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { asBoolean } from '../../../utils/as-boolean';\nimport { nonce } from '../../../utils/nonce';\n\nconst radio = cva(\n\t[\n\t\t'peer appearance-none m-0 outline-none flex-shrink-0',\n\t\t'rounded-full border border-inset border-solid ',\n\t\t'w-4 h-4',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tdisabled: {\n\t\t\t\tfalse: [\n\t\t\t\t\t'cursor-pointer shadow-1',\n\t\t\t\t\t'bg-white border-storm-100',\n\t\t\t\t\t'hover:bg-indigo-100 hover:border-storm-500/20',\n\t\t\t\t\t'group-hover/radio-label:bg-indigo-100 group-hover/radio-label:border-storm-500/20',\n\t\t\t\t\t'checked:cursor-auto',\n\t\t\t\t\t'checked:bg-indigo-600 checked:border-storm-500/20',\n\t\t\t\t\t'checked:ring-2 checked:ring-indigo-100',\n\t\t\t\t\t'checked:hover:bg-indigo-700 checked:hover:border-storm-500/20',\n\t\t\t\t\t'checked:group-hover/radio-label:bg-indigo-700 checked:group-hover/radio-label:border-storm-500/20',\n\t\t\t\t],\n\t\t\t\ttrue: 'bg-white-600 border-storm-50 cursor-not-allowed ',\n\t\t\t},\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: [\n\t\t\t\t\t'cursor-pointer shadow-1',\n\t\t\t\t\t'bg-white border-storm-100',\n\t\t\t\t\t'hover:bg-indigo-100 hover:border-storm-500/20',\n\t\t\t\t\t'group-hover/radio-label:bg-indigo-100 group-hover/radio-label:border-storm-500/20',\n\t\t\t\t],\n\t\t\t},\n\t\t],\n\t}\n);\n\nconst circle = cva(\n\t[\n\t\t'block',\n\t\t'rounded-full bg-transparent',\n\t\t'absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none',\n\t\t'w-2 h-2',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tdisabled: {\n\t\t\t\tfalse:\n\t\t\t\t\t'peer-checked:bg-white peer-checked:ring-1 peer-checked:ring-storm-500/10',\n\t\t\t\ttrue: 'peer-checked:bg-storm-200',\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-radio',\n\tstyleUrl: 'radio.component.css',\n\tformAssociated: true,\n})\nexport class Radio {\n\t/**\n\t * The value of the radio button\n\t */\n\t@Prop() value: string;\n\n\t/**\n\t * Wether the radio is disabled\n\t */\n\t@Prop({ reflect: true }) disabled: boolean = false;\n\n\t/**\n\t * Wether the radio is required\n\t */\n\t@Prop({ reflect: true }) required: boolean = true;\n\n\t/**\n\t * The id of the radio button\n\t */\n\t@Prop({ reflect: true }) id: string;\n\n\t/**\n\t * The name of the radio button\n\t */\n\t@Prop({ reflect: true }) name: string;\n\n\t/**\n\t * Wether the radio is checked\n\t */\n\t@Prop({ reflect: true }) checked: boolean = false;\n\n\t/**\n\t * Event whenever the checked changes\n\t */\n\t@Event() checkedChange: EventEmitter<boolean>;\n\n\t@State() private _nonce = nonce(5);\n\n\t@AttachInternals() _internals: ElementInternals;\n\n\tformResetCallback() {\n\t\tthis._setValue(false);\n\t}\n\n\tformDisabledCallback(disabled: boolean) {\n\t\tif (!this._internals.form) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.disabled = disabled;\n\t}\n\n\trender() {\n\t\tconst id = this.id?.length ? this.id : this._nonce;\n\n\t\treturn (\n\t\t\t<label\n\t\t\t\thtmlFor={id}\n\t\t\t\tclass='flex items-center justify-start gap-2'\n\t\t\t>\n\t\t\t\t<div class='relative flex flex-shrink-0 items-center'>\n\t\t\t\t\t<input\n\t\t\t\t\t\tclass={radio({\n\t\t\t\t\t\t\tdisabled: asBoolean(this.disabled),\n\t\t\t\t\t\t})}\n\t\t\t\t\t\ttype='radio'\n\t\t\t\t\t\tid={id}\n\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\tchecked={this.checked}\n\t\t\t\t\t\tdisabled={asBoolean(this.disabled)}\n\t\t\t\t\t\tonChange={ev => this._onChange(ev)}\n\t\t\t\t\t/>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass={circle({\n\t\t\t\t\t\t\tdisabled: asBoolean(this.disabled),\n\t\t\t\t\t\t})}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<div class='flex-1 overflow-hidden text-ellipsis'>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</label>\n\t\t);\n\t}\n\n\tprivate _onChange(ev: Event) {\n\t\tif (asBoolean(this.disabled)) {\n\t\t\tev.preventDefault();\n\t\t\treturn;\n\t\t}\n\n\t\tconst checked = (ev.target as HTMLInputElement).checked;\n\t\tthis._setValue(checked);\n\t}\n\n\tprivate _setValue(checked: boolean) {\n\t\tthis.checked = checked;\n\t\tthis.checkedChange.emit(checked);\n\t\tthis._internals.setFormValue(checked ? 'on' : 'off');\n\t}\n}\n"],"version":3}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"p-radio.entry.cjs.js","sources":["src/components/atoms/radio/radio.component.css?tag=p-radio","src/components/atoms/radio/radio.component.tsx"],"sourcesContent":["","import {\n\tAttachInternals,\n\tComponent,\n\tEvent,\n\tEventEmitter,\n\tProp,\n\tState,\n\th,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { asBoolean } from '../../../utils/as-boolean';\nimport { nonce } from '../../../utils/nonce';\n\nconst radio = cva(\n\t[\n\t\t'peer appearance-none m-0 outline-none flex-shrink-0',\n\t\t'rounded-full border border-inset border-solid ',\n\t\t'w-4 h-4',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tdisabled: {\n\t\t\t\tfalse: [\n\t\t\t\t\t'cursor-pointer shadow-1',\n\t\t\t\t\t'bg-white border-storm-100',\n\t\t\t\t\t'hover:bg-indigo-100 hover:border-storm-500/20',\n\t\t\t\t\t'group-hover/radio-label:bg-indigo-100 group-hover/radio-label:border-storm-500/20',\n\t\t\t\t\t'checked:cursor-auto',\n\t\t\t\t\t'checked:bg-indigo-600 checked:border-storm-500/20',\n\t\t\t\t\t'checked:ring-2 checked:ring-indigo-100',\n\t\t\t\t\t'checked:hover:bg-indigo-700 checked:hover:border-storm-500/20',\n\t\t\t\t\t'checked:group-hover/radio-label:bg-indigo-700 checked:group-hover/radio-label:border-storm-500/20',\n\t\t\t\t],\n\t\t\t\ttrue: 'bg-white-600 border-storm-
|
|
1
|
+
{"version":3,"file":"p-radio.entry.cjs.js","sources":["src/components/atoms/radio/radio.component.css?tag=p-radio","src/components/atoms/radio/radio.component.tsx"],"sourcesContent":["","import {\n\tAttachInternals,\n\tComponent,\n\tEvent,\n\tEventEmitter,\n\tProp,\n\tState,\n\th,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { asBoolean } from '../../../utils/as-boolean';\nimport { nonce } from '../../../utils/nonce';\n\nconst radio = cva(\n\t[\n\t\t'peer appearance-none m-0 outline-none flex-shrink-0',\n\t\t'rounded-full border border-inset border-solid ',\n\t\t'w-4 h-4',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tdisabled: {\n\t\t\t\tfalse: [\n\t\t\t\t\t'cursor-pointer shadow-1',\n\t\t\t\t\t'bg-white border-storm-100',\n\t\t\t\t\t'hover:bg-indigo-100 hover:border-storm-500/20',\n\t\t\t\t\t'group-hover/radio-label:bg-indigo-100 group-hover/radio-label:border-storm-500/20',\n\t\t\t\t\t'checked:cursor-auto',\n\t\t\t\t\t'checked:bg-indigo-600 checked:border-storm-500/20',\n\t\t\t\t\t'checked:ring-2 checked:ring-indigo-100',\n\t\t\t\t\t'checked:hover:bg-indigo-700 checked:hover:border-storm-500/20',\n\t\t\t\t\t'checked:group-hover/radio-label:bg-indigo-700 checked:group-hover/radio-label:border-storm-500/20',\n\t\t\t\t],\n\t\t\t\ttrue: 'bg-white-600 border-storm-50 cursor-not-allowed ',\n\t\t\t},\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: [\n\t\t\t\t\t'cursor-pointer shadow-1',\n\t\t\t\t\t'bg-white border-storm-100',\n\t\t\t\t\t'hover:bg-indigo-100 hover:border-storm-500/20',\n\t\t\t\t\t'group-hover/radio-label:bg-indigo-100 group-hover/radio-label:border-storm-500/20',\n\t\t\t\t],\n\t\t\t},\n\t\t],\n\t}\n);\n\nconst circle = cva(\n\t[\n\t\t'block',\n\t\t'rounded-full bg-transparent',\n\t\t'absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none',\n\t\t'w-2 h-2',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tdisabled: {\n\t\t\t\tfalse:\n\t\t\t\t\t'peer-checked:bg-white peer-checked:ring-1 peer-checked:ring-storm-500/10',\n\t\t\t\ttrue: 'peer-checked:bg-storm-200',\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-radio',\n\tstyleUrl: 'radio.component.css',\n\tformAssociated: true,\n})\nexport class Radio {\n\t/**\n\t * The value of the radio button\n\t */\n\t@Prop() value: string;\n\n\t/**\n\t * Wether the radio is disabled\n\t */\n\t@Prop({ reflect: true }) disabled: boolean = false;\n\n\t/**\n\t * Wether the radio is required\n\t */\n\t@Prop({ reflect: true }) required: boolean = true;\n\n\t/**\n\t * The id of the radio button\n\t */\n\t@Prop({ reflect: true }) id: string;\n\n\t/**\n\t * The name of the radio button\n\t */\n\t@Prop({ reflect: true }) name: string;\n\n\t/**\n\t * Wether the radio is checked\n\t */\n\t@Prop({ reflect: true }) checked: boolean = false;\n\n\t/**\n\t * Event whenever the checked changes\n\t */\n\t@Event() checkedChange: EventEmitter<boolean>;\n\n\t@State() private _nonce = nonce(5);\n\n\t@AttachInternals() _internals: ElementInternals;\n\n\tformResetCallback() {\n\t\tthis._setValue(false);\n\t}\n\n\tformDisabledCallback(disabled: boolean) {\n\t\tif (!this._internals.form) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.disabled = disabled;\n\t}\n\n\trender() {\n\t\tconst id = this.id?.length ? this.id : this._nonce;\n\n\t\treturn (\n\t\t\t<label\n\t\t\t\thtmlFor={id}\n\t\t\t\tclass='flex items-center justify-start gap-2'\n\t\t\t>\n\t\t\t\t<div class='relative flex flex-shrink-0 items-center'>\n\t\t\t\t\t<input\n\t\t\t\t\t\tclass={radio({\n\t\t\t\t\t\t\tdisabled: asBoolean(this.disabled),\n\t\t\t\t\t\t})}\n\t\t\t\t\t\ttype='radio'\n\t\t\t\t\t\tid={id}\n\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\tchecked={this.checked}\n\t\t\t\t\t\tdisabled={asBoolean(this.disabled)}\n\t\t\t\t\t\tonChange={ev => this._onChange(ev)}\n\t\t\t\t\t/>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass={circle({\n\t\t\t\t\t\t\tdisabled: asBoolean(this.disabled),\n\t\t\t\t\t\t})}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<div class='flex-1 overflow-hidden text-ellipsis'>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</label>\n\t\t);\n\t}\n\n\tprivate _onChange(ev: Event) {\n\t\tif (asBoolean(this.disabled)) {\n\t\t\tev.preventDefault();\n\t\t\treturn;\n\t\t}\n\n\t\tconst checked = (ev.target as HTMLInputElement).checked;\n\t\tthis._setValue(checked);\n\t}\n\n\tprivate _setValue(checked: boolean) {\n\t\tthis.checked = checked;\n\t\tthis.checkedChange.emit(checked);\n\t\tthis._internals.setFormValue(checked ? 'on' : 'off');\n\t}\n}\n"],"names":["cva","nonce","h","asBoolean"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.inline-block{display:inline-block!important}*{box-sizing:border-box}:host{display:inline-block;width:100%}.static{position:static!important}.flex{display:flex!important}.h-inherit{height:inherit!important}.w-inherit{width:inherit!important}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.rounded-2xl{border-radius:1rem!important}.border{border-width:1px!important}.border-0{border-width:0!important}.border-solid{border-style:solid!important}.border-off-white-700{--tw-border-opacity:1!important;border-color:rgb(222 219 213/var(--tw-border-opacity,1))!important}.bg-amber-100{background-color:rgb(255 246 194/var(--tw-bg-opacity,1))!important}.bg-amber-100,.bg-amber-50{--tw-bg-opacity:1!important}.bg-amber-50{background-color:rgb(255 250 224/var(--tw-bg-opacity,1))!important}.bg-amber-500{--tw-bg-opacity:1!important;background-color:rgb(225 159 35/var(--tw-bg-opacity,1))!important}.bg-amber-800{background-color:rgb(148 77 11/var(--tw-bg-opacity,1))!important}.bg-amber-800,.bg-black{--tw-bg-opacity:1!important}.bg-black{background-color:rgb(0 0 0/var(--tw-bg-opacity,1))!important}.bg-current{background-color:currentColor!important}.bg-indigo-100{--tw-bg-opacity:1!important;background-color:rgb(227 236 254/var(--tw-bg-opacity,1))!important}.bg-indigo-200{--tw-bg-opacity:1!important;background-color:rgb(199 217 253/var(--tw-bg-opacity,1))!important}.bg-indigo-300{--tw-bg-opacity:1!important;background-color:rgb(187 209 253/var(--tw-bg-opacity,1))!important}.bg-indigo-400{--tw-bg-opacity:1!important;background-color:rgb(165 194 252/var(--tw-bg-opacity,1))!important}.bg-indigo-50{--tw-bg-opacity:1!important;background-color:rgb(241 246 255/var(--tw-bg-opacity,1))!important}.bg-indigo-500{--tw-bg-opacity:1!important;background-color:rgb(142 179 251/var(--tw-bg-opacity,1))!important}.bg-indigo-600{--tw-bg-opacity:1!important;background-color:rgb(82 138 250/var(--tw-bg-opacity,1))!important}.bg-indigo-700{--tw-bg-opacity:1!important;background-color:rgb(47 111 240/var(--tw-bg-opacity,1))!important}.bg-indigo-800{--tw-bg-opacity:1!important;background-color:rgb(27 88 210/var(--tw-bg-opacity,1))!important}.bg-indigo-900{--tw-bg-opacity:1!important;background-color:rgb(19 73 182/var(--tw-bg-opacity,1))!important}.bg-inherit{background-color:inherit!important}.bg-negative-red-100{--tw-bg-opacity:1!important;background-color:rgb(255 221 221/var(--tw-bg-opacity,1))!important}.bg-negative-red-50{--tw-bg-opacity:1!important;background-color:rgb(253 237 237/var(--tw-bg-opacity,1))!important}.bg-negative-red-500{--tw-bg-opacity:1!important;background-color:rgb(230 30 30/var(--tw-bg-opacity,1))!important}.bg-negative-red-800{--tw-bg-opacity:1!important;background-color:rgb(141 16 16/var(--tw-bg-opacity,1))!important}.bg-off-white-100{--tw-bg-opacity:1!important;background-color:rgb(253 252 251/var(--tw-bg-opacity,1))!important}.bg-off-white-200{--tw-bg-opacity:1!important;background-color:rgb(250 249 248/var(--tw-bg-opacity,1))!important}.bg-off-white-300{--tw-bg-opacity:1!important;background-color:rgb(248 247 244/var(--tw-bg-opacity,1))!important}.bg-off-white-400{--tw-bg-opacity:1!important;background-color:rgb(245 244 241/var(--tw-bg-opacity,1))!important}.bg-off-white-50{--tw-bg-opacity:1!important;background-color:rgb(254 254 253/var(--tw-bg-opacity,1))!important}.bg-off-white-500{--tw-bg-opacity:1!important;background-color:rgb(243 241 237/var(--tw-bg-opacity,1))!important}.bg-off-white-600{--tw-bg-opacity:1!important;background-color:rgb(236 234 229/var(--tw-bg-opacity,1))!important}.bg-off-white-700{--tw-bg-opacity:1!important;background-color:rgb(222 219 213/var(--tw-bg-opacity,1))!important}.bg-off-white-800{--tw-bg-opacity:1!important;background-color:rgb(213 208 195/var(--tw-bg-opacity,1))!important}.bg-positive-green-100{--tw-bg-opacity:1!important;background-color:rgb(213 251 199/var(--tw-bg-opacity,1))!important}.bg-positive-green-50{--tw-bg-opacity:1!important;background-color:rgb(234 253 227/var(--tw-bg-opacity,1))!important}.bg-positive-green-500{--tw-bg-opacity:1!important;background-color:rgb(92 195 14/var(--tw-bg-opacity,1))!important}.bg-positive-green-800{--tw-bg-opacity:1!important;background-color:rgb(47 100 7/var(--tw-bg-opacity,1))!important}.bg-storm-100{--tw-bg-opacity:1!important;background-color:rgb(209 210 212/var(--tw-bg-opacity,1))!important}.bg-storm-200{--tw-bg-opacity:1!important;background-color:rgb(163 165 169/var(--tw-bg-opacity,1))!important}.bg-storm-300{--tw-bg-opacity:1!important;background-color:rgb(116 120 127/var(--tw-bg-opacity,1))!important}.bg-storm-400{background-color:rgb(70 75 84/var(--tw-bg-opacity,1))!important}.bg-storm-400,.bg-storm-50{--tw-bg-opacity:1!important}.bg-storm-50{background-color:rgb(232 232 234/var(--tw-bg-opacity,1))!important}.bg-storm-500{--tw-bg-opacity:1!important;background-color:rgb(24 30 41/var(--tw-bg-opacity,1))!important}.bg-storm-600{--tw-bg-opacity:1!important;background-color:rgb(15 22 34/var(--tw-bg-opacity,1))!important}.bg-storm-700{--tw-bg-opacity:1!important;background-color:rgb(8 15 28/var(--tw-bg-opacity,1))!important}.bg-storm-800{--tw-bg-opacity:1!important;background-color:rgb(2 8 21/var(--tw-bg-opacity,1))!important}.bg-transparent{background-color:transparent!important}.bg-white,.bg-white-500{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.bg-white-600{--tw-bg-opacity:1!important;background-color:rgb(250 250 250/var(--tw-bg-opacity,1))!important}.bg-white-700{--tw-bg-opacity:1!important;background-color:rgb(242 242 242/var(--tw-bg-opacity,1))!important}.bg-white-800{--tw-bg-opacity:1!important;background-color:rgb(228 227 227/var(--tw-bg-opacity,1))!important}.shadow-1{--tw-shadow:0 1px 1px rgba(0,2,2,.08)!important;--tw-shadow-colored:0 1px 1px var(--tw-shadow-color)!important}.shadow-1,.shadow-2{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}.shadow-2{--tw-shadow:0 1px 1px rgba(0,2,2,.04),0 2px 2px rgba(0,2,2,.04),0 4px 4px rgba(0,2,2,.04)!important;--tw-shadow-colored:0 1px 1px var(--tw-shadow-color),0 2px 2px var(--tw-shadow-color),0 4px 4px var(--tw-shadow-color)!important}.ring-negative-red-50{--tw-ring-opacity:1!important;--tw-ring-color:rgb(253 237 237/var(--tw-ring-opacity,1))!important}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:85.375rem){.container{max-width:85.375rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:96rem){.container{max-width:96rem}}@media (min-width:105rem){.container{max-width:105rem}}@media (min-width:120rem){.container{max-width:120rem}}@media (min-width:160rem){.container{max-width:160rem}}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.hover\:bg-off-white-200:hover{--tw-bg-opacity:1!important;background-color:rgb(250 249 248/var(--tw-bg-opacity,1))!important}
|
|
1
|
+
.inline-block{display:inline-block!important}*{box-sizing:border-box}:host{display:inline-block;width:100%}.static{position:static!important}.flex{display:flex!important}.h-inherit{height:inherit!important}.w-inherit{width:inherit!important}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.rounded-2xl{border-radius:1rem!important}.border{border-width:1px!important}.border-0{border-width:0!important}.border-solid{border-style:solid!important}.border-negative-red-500{--tw-border-opacity:1!important;border-color:rgb(230 30 30/var(--tw-border-opacity,1))!important}.border-off-white-700{--tw-border-opacity:1!important;border-color:rgb(222 219 213/var(--tw-border-opacity,1))!important}.bg-amber-100{background-color:rgb(255 246 194/var(--tw-bg-opacity,1))!important}.bg-amber-100,.bg-amber-50{--tw-bg-opacity:1!important}.bg-amber-50{background-color:rgb(255 250 224/var(--tw-bg-opacity,1))!important}.bg-amber-500{--tw-bg-opacity:1!important;background-color:rgb(225 159 35/var(--tw-bg-opacity,1))!important}.bg-amber-800{background-color:rgb(148 77 11/var(--tw-bg-opacity,1))!important}.bg-amber-800,.bg-black{--tw-bg-opacity:1!important}.bg-black{background-color:rgb(0 0 0/var(--tw-bg-opacity,1))!important}.bg-current{background-color:currentColor!important}.bg-indigo-100{--tw-bg-opacity:1!important;background-color:rgb(227 236 254/var(--tw-bg-opacity,1))!important}.bg-indigo-200{--tw-bg-opacity:1!important;background-color:rgb(199 217 253/var(--tw-bg-opacity,1))!important}.bg-indigo-300{--tw-bg-opacity:1!important;background-color:rgb(187 209 253/var(--tw-bg-opacity,1))!important}.bg-indigo-400{--tw-bg-opacity:1!important;background-color:rgb(165 194 252/var(--tw-bg-opacity,1))!important}.bg-indigo-50{--tw-bg-opacity:1!important;background-color:rgb(241 246 255/var(--tw-bg-opacity,1))!important}.bg-indigo-500{--tw-bg-opacity:1!important;background-color:rgb(142 179 251/var(--tw-bg-opacity,1))!important}.bg-indigo-600{--tw-bg-opacity:1!important;background-color:rgb(82 138 250/var(--tw-bg-opacity,1))!important}.bg-indigo-700{--tw-bg-opacity:1!important;background-color:rgb(47 111 240/var(--tw-bg-opacity,1))!important}.bg-indigo-800{--tw-bg-opacity:1!important;background-color:rgb(27 88 210/var(--tw-bg-opacity,1))!important}.bg-indigo-900{--tw-bg-opacity:1!important;background-color:rgb(19 73 182/var(--tw-bg-opacity,1))!important}.bg-inherit{background-color:inherit!important}.bg-negative-red-100{--tw-bg-opacity:1!important;background-color:rgb(255 221 221/var(--tw-bg-opacity,1))!important}.bg-negative-red-50{--tw-bg-opacity:1!important;background-color:rgb(253 237 237/var(--tw-bg-opacity,1))!important}.bg-negative-red-500{--tw-bg-opacity:1!important;background-color:rgb(230 30 30/var(--tw-bg-opacity,1))!important}.bg-negative-red-800{--tw-bg-opacity:1!important;background-color:rgb(141 16 16/var(--tw-bg-opacity,1))!important}.bg-off-white-100{--tw-bg-opacity:1!important;background-color:rgb(253 252 251/var(--tw-bg-opacity,1))!important}.bg-off-white-200{--tw-bg-opacity:1!important;background-color:rgb(250 249 248/var(--tw-bg-opacity,1))!important}.bg-off-white-300{--tw-bg-opacity:1!important;background-color:rgb(248 247 244/var(--tw-bg-opacity,1))!important}.bg-off-white-400{--tw-bg-opacity:1!important;background-color:rgb(245 244 241/var(--tw-bg-opacity,1))!important}.bg-off-white-50{--tw-bg-opacity:1!important;background-color:rgb(254 254 253/var(--tw-bg-opacity,1))!important}.bg-off-white-500{--tw-bg-opacity:1!important;background-color:rgb(243 241 237/var(--tw-bg-opacity,1))!important}.bg-off-white-600{--tw-bg-opacity:1!important;background-color:rgb(236 234 229/var(--tw-bg-opacity,1))!important}.bg-off-white-700{--tw-bg-opacity:1!important;background-color:rgb(222 219 213/var(--tw-bg-opacity,1))!important}.bg-off-white-800{--tw-bg-opacity:1!important;background-color:rgb(213 208 195/var(--tw-bg-opacity,1))!important}.bg-positive-green-100{--tw-bg-opacity:1!important;background-color:rgb(213 251 199/var(--tw-bg-opacity,1))!important}.bg-positive-green-50{--tw-bg-opacity:1!important;background-color:rgb(234 253 227/var(--tw-bg-opacity,1))!important}.bg-positive-green-500{--tw-bg-opacity:1!important;background-color:rgb(92 195 14/var(--tw-bg-opacity,1))!important}.bg-positive-green-800{--tw-bg-opacity:1!important;background-color:rgb(47 100 7/var(--tw-bg-opacity,1))!important}.bg-storm-100{--tw-bg-opacity:1!important;background-color:rgb(209 210 212/var(--tw-bg-opacity,1))!important}.bg-storm-200{--tw-bg-opacity:1!important;background-color:rgb(163 165 169/var(--tw-bg-opacity,1))!important}.bg-storm-300{--tw-bg-opacity:1!important;background-color:rgb(116 120 127/var(--tw-bg-opacity,1))!important}.bg-storm-400{background-color:rgb(70 75 84/var(--tw-bg-opacity,1))!important}.bg-storm-400,.bg-storm-50{--tw-bg-opacity:1!important}.bg-storm-50{background-color:rgb(232 232 234/var(--tw-bg-opacity,1))!important}.bg-storm-500{--tw-bg-opacity:1!important;background-color:rgb(24 30 41/var(--tw-bg-opacity,1))!important}.bg-storm-600{--tw-bg-opacity:1!important;background-color:rgb(15 22 34/var(--tw-bg-opacity,1))!important}.bg-storm-700{--tw-bg-opacity:1!important;background-color:rgb(8 15 28/var(--tw-bg-opacity,1))!important}.bg-storm-800{--tw-bg-opacity:1!important;background-color:rgb(2 8 21/var(--tw-bg-opacity,1))!important}.bg-transparent{background-color:transparent!important}.bg-white,.bg-white-500{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.bg-white-600{--tw-bg-opacity:1!important;background-color:rgb(250 250 250/var(--tw-bg-opacity,1))!important}.bg-white-700{--tw-bg-opacity:1!important;background-color:rgb(242 242 242/var(--tw-bg-opacity,1))!important}.bg-white-800{--tw-bg-opacity:1!important;background-color:rgb(228 227 227/var(--tw-bg-opacity,1))!important}.shadow-1{--tw-shadow:0 1px 1px rgba(0,2,2,.08)!important;--tw-shadow-colored:0 1px 1px var(--tw-shadow-color)!important}.shadow-1,.shadow-2{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}.shadow-2{--tw-shadow:0 1px 1px rgba(0,2,2,.04),0 2px 2px rgba(0,2,2,.04),0 4px 4px rgba(0,2,2,.04)!important;--tw-shadow-colored:0 1px 1px var(--tw-shadow-color),0 2px 2px var(--tw-shadow-color),0 4px 4px var(--tw-shadow-color)!important}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.ring-negative-red-50{--tw-ring-opacity:1!important;--tw-ring-color:rgb(253 237 237/var(--tw-ring-opacity,1))!important}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:85.375rem){.container{max-width:85.375rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:96rem){.container{max-width:96rem}}@media (min-width:105rem){.container{max-width:105rem}}@media (min-width:120rem){.container{max-width:120rem}}@media (min-width:160rem){.container{max-width:160rem}}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.hover\:bg-off-white-200:hover{--tw-bg-opacity:1!important;background-color:rgb(250 249 248/var(--tw-bg-opacity,1))!important}
|
|
@@ -14,7 +14,7 @@ const container = cva(['flex flex-col w-inherit h-inherit', 'rounded-2xl'], {
|
|
|
14
14
|
variants: {
|
|
15
15
|
variant: {
|
|
16
16
|
default: 'border-off-white-700',
|
|
17
|
-
error: 'border-negative-red-
|
|
17
|
+
error: 'border-negative-red-500 ring-2 ring-negative-red-50',
|
|
18
18
|
},
|
|
19
19
|
hoverable: {
|
|
20
20
|
true: 'cursor-pointer hover:bg-off-white-200',
|
|
@@ -74,13 +74,13 @@ export class CardContainer {
|
|
|
74
74
|
*/
|
|
75
75
|
border = true;
|
|
76
76
|
render() {
|
|
77
|
-
return (h("div", { key: '
|
|
77
|
+
return (h("div", { key: '60c34b4370e2c02933f73132cf23d4756e0c8538', class: cn(container({
|
|
78
78
|
variant: this.variant,
|
|
79
79
|
active: asBoolean(this.active, false),
|
|
80
80
|
hoverable: asBoolean(this.hoverable, false),
|
|
81
81
|
shadow: asBoolean(this.shadow, true),
|
|
82
82
|
border: asBoolean(this.border),
|
|
83
|
-
}), this.bgClass) }, h("slot", { key: '
|
|
83
|
+
}), this.bgClass) }, h("slot", { key: '33eb7acfcf667312d604d356c1f5d1ee40e9ad86' })));
|
|
84
84
|
}
|
|
85
85
|
static get is() { return "p-card-container"; }
|
|
86
86
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card-container.component.js","sourceRoot":"","sources":["../../../../../src/components/atoms/card/container/card-container.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,gDAAgD;AAChD,+DAA+D;AAC/D,iGAAiG;AACjG,2GAA2G;AAC3G,8DAA8D;AAC9D,uKAAuK;AACvK,uJAAuJ;AACvJ,+HAA+H;AAE/H,MAAM,SAAS,GAAG,GAAG,CAAC,CAAC,mCAAmC,EAAE,aAAa,CAAC,EAAE;IAC3E,QAAQ,EAAE;QACT,OAAO,EAAE;YACR,OAAO,EAAE,sBAAsB;YAC/B,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"card-container.component.js","sourceRoot":"","sources":["../../../../../src/components/atoms/card/container/card-container.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,gDAAgD;AAChD,+DAA+D;AAC/D,iGAAiG;AACjG,2GAA2G;AAC3G,8DAA8D;AAC9D,uKAAuK;AACvK,uJAAuJ;AACvJ,+HAA+H;AAE/H,MAAM,SAAS,GAAG,GAAG,CAAC,CAAC,mCAAmC,EAAE,aAAa,CAAC,EAAE;IAC3E,QAAQ,EAAE;QACT,OAAO,EAAE;YACR,OAAO,EAAE,sBAAsB;YAC/B,KAAK,EAAE,qDAAqD;SAC5D;QACD,SAAS,EAAE;YACV,IAAI,EAAE,uCAAuC;YAC7C,KAAK,EAAE,IAAI;SACX;QACD,MAAM,EAAE;YACP,KAAK,EAAE,IAAI;YACX,IAAI,EAAE,IAAI;SACV;QACD,MAAM,EAAE;YACP,KAAK,EAAE,IAAI;YACX,IAAI,EAAE,IAAI;SACV;QACD,MAAM,EAAE;YACP,IAAI,EAAE,qBAAqB;YAC3B,KAAK,EAAE,UAAU;SACjB;KACD;IACD,gBAAgB,EAAE;QACjB;YACC,MAAM,EAAE,IAAI;YACZ,MAAM,EAAE,KAAK;YACb,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE,UAAU;SACjB;QACD;YACC,MAAM,EAAE,IAAI;YACZ,MAAM,EAAE,IAAI;YACZ,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE,UAAU;SACjB;KACD;CACD,CAAC,CAAC;AAOH,MAAM,OAAO,aAAa;IACzB;;OAEG;IACK,OAAO,GAAwB,SAAS,CAAC;IAEjD;;OAEG;IACK,OAAO,GAAW,UAAU,CAAC;IAErC;;OAEG;IACK,MAAM,GAAY,KAAK,CAAC;IAEhC;;OAEG;IACK,SAAS,GAAY,KAAK,CAAC;IAEnC;;OAEG;IACK,MAAM,GAAY,IAAI,CAAC;IAE/B;;OAEG;IACK,MAAM,GAAY,IAAI,CAAC;IAE/B,MAAM;QACL,OAAO,CACN,4DACC,KAAK,EAAE,EAAE,CACR,SAAS,CAAC;gBACT,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC;gBACrC,SAAS,EAAE,SAAS,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC;gBAC3C,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;gBACpC,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC;aAC9B,CAAC,EACF,IAAI,CAAC,OAAO,CACZ;YAED,8DAAQ,CACH,CACN,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { cn } from '../../../../utils';\nimport { asBoolean } from '../../../../utils/as-boolean';\n\n// bg-inherit bg-transparent bg-current bg-black\n// bg-white-500 bg-white-600 bg-white-700 bg-white-800 bg-white\n// bg-negative-red-50 bg-negative-red-100 bg-negative-red-500 bg-negative-red-800 bg-negative-red\n// bg-positive-green-50 bg-positive-green-100 bg-positive-green-500 bg-positive-green-800 bg-positive-green\n// bg-amber-50 bg-amber-100 bg-amber-500 bg-amber-800 bg-amber\n// bg-off-white-50 bg-off-white-100 bg-off-white-200 bg-off-white-300 bg-off-white-400 bg-off-white-500 bg-off-white-600 bg-off-white-700 bg-off-white-800 bg-off-white\n// bg-indigo-50 bg-indigo-100 bg-indigo-200 bg-indigo-300 bg-indigo-400 bg-indigo-500 bg-indigo-600 bg-indigo-700 bg-indigo-800 bg-indigo-900 bg-indigo\n// bg-storm-50 bg-storm-100 bg-storm-200 bg-storm-300 bg-storm-400 bg-storm-500 bg-storm-600 bg-storm-700 bg-storm-800 bg-storm\n\nconst container = cva(['flex flex-col w-inherit h-inherit', 'rounded-2xl'], {\n\tvariants: {\n\t\tvariant: {\n\t\t\tdefault: 'border-off-white-700',\n\t\t\terror: 'border-negative-red-500 ring-2 ring-negative-red-50',\n\t\t},\n\t\thoverable: {\n\t\t\ttrue: 'cursor-pointer hover:bg-off-white-200',\n\t\t\tfalse: null,\n\t\t},\n\t\tshadow: {\n\t\t\tfalse: null,\n\t\t\ttrue: null,\n\t\t},\n\t\tactive: {\n\t\t\tfalse: null,\n\t\t\ttrue: null,\n\t\t},\n\t\tborder: {\n\t\t\ttrue: 'border border-solid',\n\t\t\tfalse: 'border-0',\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\tshadow: true,\n\t\t\tactive: false,\n\t\t\tvariant: 'default',\n\t\t\tclass: 'shadow-1',\n\t\t},\n\t\t{\n\t\t\tshadow: true,\n\t\t\tactive: true,\n\t\t\tvariant: 'default',\n\t\t\tclass: 'shadow-2',\n\t\t},\n\t],\n});\n\n@Component({\n\ttag: 'p-card-container',\n\tstyleUrl: 'card-container.component.css',\n\tshadow: true,\n})\nexport class CardContainer {\n\t/**\n\t * The variant of the container\n\t */\n\t@Prop() variant: 'default' | 'error' = 'default';\n\n\t/**\n\t * A bg class to apply to the container\n\t */\n\t@Prop() bgClass: string = 'bg-white';\n\n\t/**\n\t * Wether the card should be hoverable\n\t */\n\t@Prop() active: boolean = false;\n\n\t/**\n\t * Wether the card should be hoverable\n\t */\n\t@Prop() hoverable: boolean = false;\n\n\t/**\n\t * Wether the card should have shadow\n\t */\n\t@Prop() shadow: boolean = true;\n\n\t/**\n\t * Wether the card should have a border\n\t */\n\t@Prop() border: boolean = true;\n\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={cn(\n\t\t\t\t\tcontainer({\n\t\t\t\t\t\tvariant: this.variant,\n\t\t\t\t\t\tactive: asBoolean(this.active, false),\n\t\t\t\t\t\thoverable: asBoolean(this.hoverable, false),\n\t\t\t\t\t\tshadow: asBoolean(this.shadow, true),\n\t\t\t\t\t\tborder: asBoolean(this.border),\n\t\t\t\t\t}),\n\t\t\t\t\tthis.bgClass\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
*{box-sizing:border-box}.pointer-events-none{pointer-events:none!important}.static{position:static!important}.absolute{position:absolute!important}.relative{position:relative!important}.left-1\/2{left:50%!important}.top-1\/2{top:50%!important}.m-0{margin:0!important}.flex{display:flex!important}.hidden{display:none!important}.h-4{height:1rem!important}.w-4{width:1rem!important}.flex-1{flex:1 1 0%!important}.flex-shrink-0{flex-shrink:0!important}.-translate-x-1\/2{--tw-translate-x:-50%!important}.-translate-x-1\/2,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-translate-y-1\/2{--tw-translate-y:-50%!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.cursor-not-allowed{cursor:not-allowed!important}.cursor-pointer{cursor:pointer!important}.appearance-none{appearance:none!important}.items-center{align-items:center!important}.justify-start{justify-content:flex-start!important}.gap-2{gap:.5rem!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.rounded{border-radius:.25rem!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-storm-100{--tw-border-opacity:1!important;border-color:rgb(209 210 212/var(--tw-border-opacity,1))!important}.border-storm-
|
|
1
|
+
*{box-sizing:border-box}.pointer-events-none{pointer-events:none!important}.static{position:static!important}.absolute{position:absolute!important}.relative{position:relative!important}.left-1\/2{left:50%!important}.top-1\/2{top:50%!important}.m-0{margin:0!important}.flex{display:flex!important}.hidden{display:none!important}.h-4{height:1rem!important}.w-4{width:1rem!important}.flex-1{flex:1 1 0%!important}.flex-shrink-0{flex-shrink:0!important}.-translate-x-1\/2{--tw-translate-x:-50%!important}.-translate-x-1\/2,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-translate-y-1\/2{--tw-translate-y:-50%!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.cursor-not-allowed{cursor:not-allowed!important}.cursor-pointer{cursor:pointer!important}.appearance-none{appearance:none!important}.items-center{align-items:center!important}.justify-start{justify-content:flex-start!important}.gap-2{gap:.5rem!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.rounded{border-radius:.25rem!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-storm-100{--tw-border-opacity:1!important;border-color:rgb(209 210 212/var(--tw-border-opacity,1))!important}.border-storm-50{--tw-border-opacity:1!important;border-color:rgb(232 232 234/var(--tw-border-opacity,1))!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.bg-white,.bg-white-600{--tw-bg-opacity:1!important}.bg-white-600{background-color:rgb(250 250 250/var(--tw-bg-opacity,1))!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-storm-200{color:rgb(163 165 169/var(--tw-text-opacity,1))!important}.text-storm-200,.text-white{--tw-text-opacity:1!important}.text-white{color:rgb(255 255 255/var(--tw-text-opacity,1))!important}.shadow-1{--tw-shadow:0 1px 1px rgba(0,2,2,.08)!important;--tw-shadow-colored:0 1px 1px var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}.outline-none{outline:2px solid transparent!important;outline-offset:2px!important}.drop-shadow-2{--tw-drop-shadow:drop-shadow(0 1px 1px rgba(0,2,2,.04)) drop-shadow(0 2px 2px rgba(0,2,2,.04)) drop-shadow(0 4px 4px rgba(0,2,2,.04))!important;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.checked\:border-storm-500\/20:checked{border-color:rgba(24,30,41,.2)!important}.checked\:bg-indigo-600:checked{--tw-bg-opacity:1!important;background-color:rgb(82 138 250/var(--tw-bg-opacity,1))!important}.checked\:ring-2:checked{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.checked\:ring-indigo-100:checked{--tw-ring-opacity:1!important;--tw-ring-color:rgb(227 236 254/var(--tw-ring-opacity,1))!important}.indeterminate\:border-storm-500\/20:indeterminate{border-color:rgba(24,30,41,.2)!important}.indeterminate\:bg-indigo-600:indeterminate{--tw-bg-opacity:1!important;background-color:rgb(82 138 250/var(--tw-bg-opacity,1))!important}.indeterminate\:ring-2:indeterminate{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.indeterminate\:ring-indigo-100:indeterminate{--tw-ring-opacity:1!important;--tw-ring-color:rgb(227 236 254/var(--tw-ring-opacity,1))!important}.hover\:border-storm-500\/20:hover{border-color:rgba(24,30,41,.2)!important}.hover\:bg-indigo-100:hover{--tw-bg-opacity:1!important;background-color:rgb(227 236 254/var(--tw-bg-opacity,1))!important}.checked\:hover\:border-storm-500\/20:hover:checked{border-color:rgba(24,30,41,.2)!important}.checked\:hover\:bg-indigo-700:hover:checked{--tw-bg-opacity:1!important;background-color:rgb(47 111 240/var(--tw-bg-opacity,1))!important}.indeterminate\:hover\:border-storm-500\/20:hover:indeterminate{border-color:rgba(24,30,41,.2)!important}.indeterminate\:hover\:bg-indigo-700:hover:indeterminate{--tw-bg-opacity:1!important;background-color:rgb(47 111 240/var(--tw-bg-opacity,1))!important}.group\/checkbox-label:hover .group-hover\/checkbox-label\:border-storm-100{--tw-border-opacity:1!important;border-color:rgb(209 210 212/var(--tw-border-opacity,1))!important}.group\/checkbox-label:hover .group-hover\/checkbox-label\:bg-indigo-100{--tw-bg-opacity:1!important;background-color:rgb(227 236 254/var(--tw-bg-opacity,1))!important}.group\/checkbox-label:hover .group-hover\/checkbox-label\:text-sm,.group\/p-checkbox:hover .group-hover\/p-checkbox\:text-sm{font-size:.875rem!important;line-height:1.25rem!important}.group\/checkbox-label:hover .checked\:group-hover\/checkbox-label\:border-storm-500\/20:checked{border-color:rgba(24,30,41,.2)!important}.group\/checkbox-label:hover .checked\:group-hover\/checkbox-label\:bg-indigo-700:checked{--tw-bg-opacity:1!important;background-color:rgb(47 111 240/var(--tw-bg-opacity,1))!important}.group\/checkbox-label:hover .indeterminate\:group-hover\/checkbox-label\:border-storm-500\/20:indeterminate{border-color:rgba(24,30,41,.2)!important}.group\/checkbox-label:hover .indeterminate\:group-hover\/checkbox-label\:bg-indigo-700:indeterminate{--tw-bg-opacity:1!important;background-color:rgb(47 111 240/var(--tw-bg-opacity,1))!important}.peer:checked~.peer-checked\:flex{display:flex!important}.peer:indeterminate~.peer-indeterminate\:flex{display:flex!important}
|
|
@@ -23,7 +23,7 @@ const checkbox = cva([
|
|
|
23
23
|
'indeterminate:hover:bg-indigo-700 indeterminate:hover:border-storm-500/20',
|
|
24
24
|
'indeterminate:group-hover/checkbox-label:bg-indigo-700 indeterminate:group-hover/checkbox-label:border-storm-500/20',
|
|
25
25
|
],
|
|
26
|
-
true: 'bg-white-600 border-storm-
|
|
26
|
+
true: 'bg-white-600 border-storm-50 cursor-not-allowed',
|
|
27
27
|
},
|
|
28
28
|
},
|
|
29
29
|
});
|
|
@@ -93,13 +93,13 @@ export class Checkbox {
|
|
|
93
93
|
}
|
|
94
94
|
render() {
|
|
95
95
|
const id = this.id?.length ? this.id : this._nonce;
|
|
96
|
-
return (h("label", { key: '
|
|
96
|
+
return (h("label", { key: '6c29efe7d55675ca497479c925a9a36249cefdce', htmlFor: id, class: 'group/p-checkbox flex items-center justify-start gap-2 ' }, h("div", { key: '3808c81711a4ce764b114c4f42406f2a3608e6df', class: 'relative flex flex-shrink-0 items-center' }, h("input", { key: '593b20387ad996c1dfba38b6eea8031f15d50f56', class: checkbox({
|
|
97
97
|
disabled: asBoolean(this.disabled),
|
|
98
|
-
}), type: 'checkbox', id: id, name: this.name, required: asBoolean(this.required), checked: asBoolean(this.checked), indeterminate: asBoolean(this.indeterminate), disabled: asBoolean(this.disabled), onChange: ev => this._onChange(ev) }), h("div", { key: '
|
|
98
|
+
}), type: 'checkbox', id: id, name: this.name, required: asBoolean(this.required), checked: asBoolean(this.checked), indeterminate: asBoolean(this.indeterminate), disabled: asBoolean(this.disabled), onChange: ev => this._onChange(ev) }), h("div", { key: 'c5c13d0fbd75b5868f3e8af198da9676bb0f36ae', class: iconContainer({
|
|
99
99
|
disabled: asBoolean(this.disabled),
|
|
100
|
-
}) }, h("p-icon", { key: '
|
|
100
|
+
}) }, h("p-icon", { key: 'd97390afe4e00b7a86e94dc1bd6f6987175eeaa9', class: icon({
|
|
101
101
|
disabled: asBoolean(this.disabled),
|
|
102
|
-
}), size: 'auto', variant: asBoolean(this.indeterminate) ? 'minus' : 'checkmarkThick' }))), h("div", { key: '
|
|
102
|
+
}), size: 'auto', variant: asBoolean(this.indeterminate) ? 'minus' : 'checkmarkThick' }))), h("div", { key: 'a457f85c863377a0098d07478f312594c7e65254', class: 'flex-1 overflow-hidden text-ellipsis' }, h("slot", { key: '66e00ee7b93ab8b821848e98e52af4bf94da24d7' }))));
|
|
103
103
|
}
|
|
104
104
|
_onChange(ev) {
|
|
105
105
|
if (this.disabled) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/checkbox/checkbox.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EACN,eAAe,EACf,SAAS,EACT,KAAK,EAEL,IAAI,EACJ,KAAK,EACL,CAAC,GACD,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAE7C,MAAM,QAAQ,GAAG,GAAG,CACnB;IACC,qDAAqD;IACrD,mCAAmC;IACnC,iBAAiB;CACjB,EACD;IACC,QAAQ,EAAE;QACT,QAAQ,EAAE;YACT,KAAK,EAAE;gBACN,yBAAyB;gBACzB,2BAA2B;gBAC3B,+CAA+C;gBAC/C,sFAAsF;gBACtF,mDAAmD;gBACnD,wCAAwC;gBACxC,+DAA+D;gBAC/D,yGAAyG;gBACzG,+DAA+D;gBAC/D,oDAAoD;gBACpD,2EAA2E;gBAC3E,qHAAqH;aACrH;YACD,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"checkbox.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/checkbox/checkbox.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n\tAttachInternals,\n\tComponent,\n\tEvent,\n\tEventEmitter,\n\tProp,\n\tState,\n\th,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { asBoolean } from '../../../utils/as-boolean';\nimport { nonce } from '../../../utils/nonce';\n\nconst checkbox = cva(\n\t[\n\t\t'peer appearance-none m-0 outline-none flex-shrink-0',\n\t\t'border border-inset border-solid ',\n\t\t'rounded w-4 h-4',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tdisabled: {\n\t\t\t\tfalse: [\n\t\t\t\t\t'cursor-pointer shadow-1',\n\t\t\t\t\t'bg-white border-storm-100',\n\t\t\t\t\t'hover:bg-indigo-100 hover:border-storm-500/20',\n\t\t\t\t\t'group-hover/checkbox-label:bg-indigo-100 group-hover/checkbox-label:border-storm-100',\n\t\t\t\t\t'checked:bg-indigo-600 checked:border-storm-500/20',\n\t\t\t\t\t'checked:ring-2 checked:ring-indigo-100',\n\t\t\t\t\t'checked:hover:bg-indigo-700 checked:hover:border-storm-500/20',\n\t\t\t\t\t'checked:group-hover/checkbox-label:bg-indigo-700 checked:group-hover/checkbox-label:border-storm-500/20',\n\t\t\t\t\t'indeterminate:bg-indigo-600 indeterminate:border-storm-500/20',\n\t\t\t\t\t'indeterminate:ring-2 indeterminate:ring-indigo-100',\n\t\t\t\t\t'indeterminate:hover:bg-indigo-700 indeterminate:hover:border-storm-500/20',\n\t\t\t\t\t'indeterminate:group-hover/checkbox-label:bg-indigo-700 indeterminate:group-hover/checkbox-label:border-storm-500/20',\n\t\t\t\t],\n\t\t\t\ttrue: 'bg-white-600 border-storm-50 cursor-not-allowed',\n\t\t\t},\n\t\t},\n\t}\n);\n\nconst iconContainer = cva(\n\t[\n\t\t'hidden peer-indeterminate:flex peer-checked:flex',\n\t\t'absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tdisabled: {\n\t\t\t\tfalse: 'text-white',\n\t\t\t\ttrue: 'text-storm-200',\n\t\t\t},\n\t\t},\n\t}\n);\n\nconst icon = cva(['drop-shadow-2 text-xs'], {\n\tvariants: {\n\t\tdisabled: {\n\t\t\tfalse:\n\t\t\t\t'group-hover/p-checkbox:text-sm group-hover/checkbox-label:text-sm',\n\t\t\ttrue: null,\n\t\t},\n\t},\n});\n\n@Component({\n\ttag: 'p-checkbox',\n\tstyleUrl: 'checkbox.component.css',\n\tformAssociated: true,\n})\nexport class Checkbox {\n\t/**\n\t * Wether the checkbox is checked\n\t */\n\t@Prop() checked: boolean;\n\n\t/**\n\t * Wether the checkbox is in indeterminate state\n\t */\n\t@Prop() indeterminate: boolean;\n\n\t/**\n\t * Wether the checkbox is disabled\n\t */\n\t@Prop({ reflect: true }) disabled: boolean = false;\n\n\t/**\n\t * Wether the checkbox is required\n\t */\n\t@Prop({ reflect: true }) required: boolean = true;\n\n\t/**\n\t * The id of the checkbox button\n\t */\n\t@Prop({ reflect: true }) id: string;\n\n\t/**\n\t * The name of the checkbox button\n\t */\n\t@Prop({ reflect: true }) name: string;\n\n\t/**\n\t * Event whenever the checked changes\n\t */\n\t@Event() checkedChange: EventEmitter<boolean>;\n\t/**\n\t * Event whenever the indeterminate changes\n\t */\n\t@Event() indeterminateChange: EventEmitter<boolean>;\n\n\t@State() private _nonce = nonce(5);\n\n\t@AttachInternals() _internals: ElementInternals;\n\n\tformResetCallback() {\n\t\tthis.checked = false;\n\t\tthis.indeterminate = false;\n\t}\n\n\tformDisabledCallback(disabled: boolean) {\n\t\tif (!this._internals.form) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.disabled = disabled;\n\t}\n\n\trender() {\n\t\tconst id = this.id?.length ? this.id : this._nonce;\n\n\t\treturn (\n\t\t\t<label\n\t\t\t\thtmlFor={id}\n\t\t\t\tclass='group/p-checkbox flex items-center justify-start gap-2 '\n\t\t\t>\n\t\t\t\t<div class='relative flex flex-shrink-0 items-center'>\n\t\t\t\t\t<input\n\t\t\t\t\t\tclass={checkbox({\n\t\t\t\t\t\t\tdisabled: asBoolean(this.disabled),\n\t\t\t\t\t\t})}\n\t\t\t\t\t\ttype='checkbox'\n\t\t\t\t\t\tid={id}\n\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\trequired={asBoolean(this.required)}\n\t\t\t\t\t\tchecked={asBoolean(this.checked)}\n\t\t\t\t\t\tindeterminate={asBoolean(this.indeterminate)}\n\t\t\t\t\t\tdisabled={asBoolean(this.disabled)}\n\t\t\t\t\t\tonChange={ev => this._onChange(ev)}\n\t\t\t\t\t/>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass={iconContainer({\n\t\t\t\t\t\t\tdisabled: asBoolean(this.disabled),\n\t\t\t\t\t\t})}\n\t\t\t\t\t>\n\t\t\t\t\t\t<p-icon\n\t\t\t\t\t\t\tclass={icon({\n\t\t\t\t\t\t\t\tdisabled: asBoolean(this.disabled),\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\tsize='auto'\n\t\t\t\t\t\t\tvariant={\n\t\t\t\t\t\t\t\tasBoolean(this.indeterminate) ? 'minus' : 'checkmarkThick'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div class='flex-1 overflow-hidden text-ellipsis'>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</label>\n\t\t);\n\t}\n\n\tprivate _onChange(ev: Event) {\n\t\tif (this.disabled) {\n\t\t\tev.preventDefault();\n\t\t\treturn;\n\t\t}\n\n\t\tconst checked = asBoolean((ev.target as HTMLInputElement).checked);\n\t\tconst indeterminate = asBoolean(\n\t\t\t(ev.target as HTMLInputElement).indeterminate\n\t\t);\n\n\t\tif (checked != this.checked) {\n\t\t\tthis.checked = checked;\n\t\t\tthis.checkedChange.emit(checked);\n\t\t}\n\n\t\tif (indeterminate != this.indeterminate) {\n\t\t\tthis.indeterminate = indeterminate;\n\t\t\tthis.indeterminateChange.emit(indeterminate);\n\t\t}\n\n\t\tthis._internals.setFormValue(\n\t\t\tthis.indeterminate ? 'indeterminate' : this.checked ? 'on' : 'off'\n\t\t);\n\t}\n}\n"]}
|
package/dist/collection/components/atoms/dropdown-menu/item/dropdown-menu-item.component.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
*{box-sizing:border-box}.block{display:block!important}.flex{display:flex!important}.h-8{height:2rem!important}.min-h-8{min-height:2rem!important}.w-full{width:100%!important}.max-w-full{max-width:100%!important}.cursor-not-allowed{cursor:not-allowed!important}.cursor-pointer{cursor:pointer!important}.items-center{align-items:center!important}.gap-2{gap:.5rem!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.whitespace-nowrap{white-space:nowrap!important}.rounded-lg{border-radius:.5rem!important}.bg-indigo-100{--tw-bg-opacity:1!important;background-color:rgb(227 236 254/var(--tw-bg-opacity,1))!important}.bg-indigo-50{--tw-bg-opacity:1!important;background-color:rgb(241 246 255/var(--tw-bg-opacity,1))!important}.bg-negative-red-100{--tw-bg-opacity:1!important;background-color:rgb(255 221 221/var(--tw-bg-opacity,1))!important}.bg-negative-red-50{--tw-bg-opacity:1!important;background-color:rgb(253 237 237/var(--tw-bg-opacity,1))!important}.bg-storm-600{--tw-bg-opacity:1!important;background-color:rgb(15 22 34/var(--tw-bg-opacity,1))!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-1{padding-bottom:.25rem!important;padding-top:.25rem!important}.text-start{text-align:start!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-medium{font-weight:500!important}.text-negative-red-100{--tw-text-opacity:1!important;color:rgb(255 221 221/var(--tw-text-opacity,1))!important}.text-negative-red-500{--tw-text-opacity:1!important;color:rgb(230 30 30/var(--tw-text-opacity,1))!important}.text-negative-red-800{--tw-text-opacity:1!important;color:rgb(141 16 16/var(--tw-text-opacity,1))!important}.text-storm-100{--tw-text-opacity:1!important;color:rgb(209 210 212/var(--tw-text-opacity,1))!important}.text-storm-200{--tw-text-opacity:1!important;color:rgb(163 165 169/var(--tw-text-opacity,1))!important}.text-storm-300{--tw-text-opacity:1!important;color:rgb(116 120 127/var(--tw-text-opacity,1))!important}.text-storm-500{color:rgb(24 30 41/var(--tw-text-opacity,1))!important}.text-storm-500,.text-white{--tw-text-opacity:1!important}.text-white{color:rgb(255 255 255/var(--tw-text-opacity,1))!important}.opacity-40{opacity:.4!important}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:85.375rem){.container{max-width:85.375rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:96rem){.container{max-width:96rem}}@media (min-width:105rem){.container{max-width:105rem}}@media (min-width:120rem){.container{max-width:120rem}}@media (min-width:160rem){.container{max-width:160rem}}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.hover\:bg-indigo-50:hover{--tw-bg-opacity:1!important;background-color:rgb(241 246 255/var(--tw-bg-opacity,1))!important}.hover\:bg-negative-red-50:hover{--tw-bg-opacity:1!important;background-color:rgb(253 237 237/var(--tw-bg-opacity,1))!important}.hover\:bg-storm-500:hover{--tw-bg-opacity:1!important;background-color:rgb(24 30 41/var(--tw-bg-opacity,1))!important}@keyframes wave{0%{transform:rotate(0deg)}to{transform:rotate(-15deg)}}.group:hover .group-hover\:animate-wave{animation:wave .5s ease-in-out -.5s infinite alternate forwards!important}.group:hover .group-hover\:text-storm-500{--tw-text-opacity:1!important;color:rgb(24 30 41/var(--tw-text-opacity,1))!important}.group:hover .group-hover\:text-white{--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity,1))!important}
|
|
1
|
+
*{box-sizing:border-box}.block{display:block!important}.flex{display:flex!important}.h-8{height:2rem!important}.min-h-8{min-height:2rem!important}.w-full{width:100%!important}.max-w-full{max-width:100%!important}.cursor-not-allowed{cursor:not-allowed!important}.cursor-pointer{cursor:pointer!important}.items-center{align-items:center!important}.gap-2{gap:.5rem!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.whitespace-nowrap{white-space:nowrap!important}.rounded-lg{border-radius:.5rem!important}.bg-indigo-100{--tw-bg-opacity:1!important;background-color:rgb(227 236 254/var(--tw-bg-opacity,1))!important}.bg-indigo-50{--tw-bg-opacity:1!important;background-color:rgb(241 246 255/var(--tw-bg-opacity,1))!important}.bg-negative-red-100{--tw-bg-opacity:1!important;background-color:rgb(255 221 221/var(--tw-bg-opacity,1))!important}.bg-negative-red-50{--tw-bg-opacity:1!important;background-color:rgb(253 237 237/var(--tw-bg-opacity,1))!important}.bg-storm-600{--tw-bg-opacity:1!important;background-color:rgb(15 22 34/var(--tw-bg-opacity,1))!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-1{padding-bottom:.25rem!important;padding-top:.25rem!important}.text-start{text-align:start!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-medium{font-weight:500!important}.text-negative-red-100{--tw-text-opacity:1!important;color:rgb(255 221 221/var(--tw-text-opacity,1))!important}.text-negative-red-500{--tw-text-opacity:1!important;color:rgb(230 30 30/var(--tw-text-opacity,1))!important}.text-negative-red-800{--tw-text-opacity:1!important;color:rgb(141 16 16/var(--tw-text-opacity,1))!important}.text-storm-100{--tw-text-opacity:1!important;color:rgb(209 210 212/var(--tw-text-opacity,1))!important}.text-storm-200{--tw-text-opacity:1!important;color:rgb(163 165 169/var(--tw-text-opacity,1))!important}.text-storm-300{--tw-text-opacity:1!important;color:rgb(116 120 127/var(--tw-text-opacity,1))!important}.text-storm-500{color:rgb(24 30 41/var(--tw-text-opacity,1))!important}.text-storm-500,.text-white{--tw-text-opacity:1!important}.text-white{color:rgb(255 255 255/var(--tw-text-opacity,1))!important}.opacity-40{opacity:.4!important}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:85.375rem){.container{max-width:85.375rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:96rem){.container{max-width:96rem}}@media (min-width:105rem){.container{max-width:105rem}}@media (min-width:120rem){.container{max-width:120rem}}@media (min-width:160rem){.container{max-width:160rem}}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.hover\:bg-indigo-50:hover{--tw-bg-opacity:1!important;background-color:rgb(241 246 255/var(--tw-bg-opacity,1))!important}.hover\:bg-negative-red-50:hover{--tw-bg-opacity:1!important;background-color:rgb(253 237 237/var(--tw-bg-opacity,1))!important}.hover\:bg-storm-500:hover{--tw-bg-opacity:1!important;background-color:rgb(24 30 41/var(--tw-bg-opacity,1))!important}@keyframes wave{0%{transform:rotate(0deg)}to{transform:rotate(-15deg)}}.group:hover .group-hover\:animate-wave{animation:wave .5s ease-in-out -.5s infinite alternate forwards!important}.group:hover .group-hover\:text-negative-red-800{--tw-text-opacity:1!important;color:rgb(141 16 16/var(--tw-text-opacity,1))!important}.group:hover .group-hover\:text-storm-500{--tw-text-opacity:1!important;color:rgb(24 30 41/var(--tw-text-opacity,1))!important}.group:hover .group-hover\:text-white{--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity,1))!important}
|
|
@@ -149,7 +149,7 @@ const dropdownMenuItemIcon = cva(['text-base'], {
|
|
|
149
149
|
variant: 'negative',
|
|
150
150
|
active: false,
|
|
151
151
|
disabled: false,
|
|
152
|
-
class: 'text-negative-red-
|
|
152
|
+
class: 'text-negative-red-500 group-hover:text-negative-red-800',
|
|
153
153
|
},
|
|
154
154
|
{
|
|
155
155
|
variant: 'negative',
|
|
@@ -197,18 +197,18 @@ export class DropdownMenuItem {
|
|
|
197
197
|
*/
|
|
198
198
|
useContainer = true;
|
|
199
199
|
render() {
|
|
200
|
-
return (h("div", { key: '
|
|
200
|
+
return (h("div", { key: '7d677161d7e09f7b061119434c8c51025404487c', class: dropdownMenuItem({
|
|
201
201
|
variant: this.variant,
|
|
202
202
|
active: asBoolean(this.active),
|
|
203
203
|
enableHover: asBoolean(this.enableHover ?? true, true),
|
|
204
204
|
enableTextWrap: this.enableTextWrap,
|
|
205
205
|
disabled: asBoolean(this.disabled),
|
|
206
|
-
}) }, this.icon && (h("p-icon", { key: '
|
|
206
|
+
}) }, this.icon && (h("p-icon", { key: 'a4a02dab7217caa97ab6497a216bf678d115ed0a', class: dropdownMenuItemIcon({
|
|
207
207
|
variant: this.variant,
|
|
208
208
|
active: asBoolean(this.active),
|
|
209
209
|
disabled: asBoolean(this.disabled),
|
|
210
210
|
wave: asBoolean(this.iconWave),
|
|
211
|
-
}), variant: this.icon })), this.checkbox && (h("p-checkbox", { key: '
|
|
211
|
+
}), variant: this.icon })), this.checkbox && (h("p-checkbox", { key: '2fab0f18e98b926b775b376c8601173c72af9cdd', checked: this.active, disabled: this.disabled })), this.useContainer ? (h("div", { class: cn('block w-full overflow-hidden text-start', {
|
|
212
212
|
'text-ellipsis whitespace-nowrap': !this.enableTextWrap,
|
|
213
213
|
}) }, h("slot", null))) : (h("slot", null))));
|
|
214
214
|
}
|
package/dist/collection/components/atoms/dropdown-menu/item/dropdown-menu-item.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown-menu-item.component.js","sourceRoot":"","sources":["../../../../../src/components/atoms/dropdown-menu/item/dropdown-menu-item.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { asBoolean } from '../../../../utils/as-boolean';\nimport { IconVariant } from '../../icon/icon.component';\nimport { cn } from '../../../../utils';\n\nconst dropdownMenuItem = cva(\n\t[\n\t\t'p-dropdown-menu-item flex px-2 py-1 gap-2 text-sm font-medium group rounded-lg items-center max-w-full',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: null,\n\t\t\t\tstorm: null,\n\t\t\t\tnegative: null,\n\t\t\t},\n\t\t\tactive: {\n\t\t\t\tfalse: null,\n\t\t\t\ttrue: null,\n\t\t\t},\n\t\t\tdisabled: {\n\t\t\t\tfalse: 'cursor-pointer',\n\t\t\t\ttrue: 'cursor-not-allowed',\n\t\t\t},\n\t\t\tenableHover: {\n\t\t\t\tfalse: null,\n\t\t\t\ttrue: null,\n\t\t\t},\n\t\t\tenableTextWrap: {\n\t\t\t\ttrue: 'min-h-8',\n\t\t\t\tfalse: 'h-8',\n\t\t\t},\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tvariant: 'default',\n\t\t\t\tactive: false,\n\t\t\t\tenableHover: true,\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'hover:bg-indigo-50',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'default',\n\t\t\t\tactive: true,\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'bg-indigo-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'default',\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'text-storm-500',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'default',\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'text-storm-200',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'default',\n\t\t\t\tdisabled: true,\n\t\t\t\tactive: true,\n\t\t\t\tclass: 'bg-indigo-50',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\tvariant: 'storm',\n\t\t\t\tactive: false,\n\t\t\t\tenableHover: true,\n\t\t\t\tclass: 'text-white',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'storm',\n\t\t\t\tactive: false,\n\t\t\t\tenableHover: true,\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'hover:bg-storm-500',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'storm',\n\t\t\t\tactive: true,\n\t\t\t\tclass: 'text-white bg-storm-600',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'storm',\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'opacity-40',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\tvariant: 'negative',\n\t\t\t\tactive: false,\n\t\t\t\tenableHover: true,\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'text-negative-red-500 hover:bg-negative-red-50',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'negative',\n\t\t\t\tactive: true,\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'bg-negative-red-100 text-negative-red-500',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'negative',\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'text-negative-red-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'negative',\n\t\t\t\tdisabled: true,\n\t\t\t\tactive: true,\n\t\t\t\tclass: 'bg-negative-red-50',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\tenableHover: true,\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'cursor-pointer',\n\t\t\t},\n\t\t],\n\t}\n);\n\nconst dropdownMenuItemIcon = cva(['text-base'], {\n\tvariants: {\n\t\tvariant: {\n\t\t\tdefault: null,\n\t\t\tstorm: null,\n\t\t\tnegative: null,\n\t\t},\n\t\tactive: {\n\t\t\tfalse: null,\n\t\t\ttrue: null,\n\t\t},\n\t\tdisabled: {\n\t\t\tfalse: null,\n\t\t\ttrue: 'text-storm-100',\n\t\t},\n\t\twave: {\n\t\t\ttrue: 'group-hover:animate-wave',\n\t\t\tfalse: null,\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\tvariant: 'default',\n\t\t\tactive: false,\n\t\t\tdisabled: false,\n\t\t\tclass: 'text-storm-300 group-hover:text-storm-500',\n\t\t},\n\n\t\t{\n\t\t\tvariant: 'storm',\n\t\t\tactive: false,\n\t\t\tdisabled: false,\n\t\t\tclass: 'text-storm-100 group-hover:text-white',\n\t\t},\n\n\t\t{\n\t\t\tvariant: 'negative',\n\t\t\tactive: false,\n\t\t\tdisabled: false,\n\t\t\tclass: 'text-negative-red-500group-hover:text-negative-red-800',\n\t\t},\n\t\t{\n\t\t\tvariant: 'negative',\n\t\t\tactive: true,\n\t\t\tdisabled: false,\n\t\t\tclass: 'text-negative-red-800',\n\t\t},\n\t],\n});\n\n@Component({\n\ttag: 'p-dropdown-menu-item',\n\tstyleUrl: 'dropdown-menu-item.component.css',\n\tshadow: true,\n})\nexport class DropdownMenuItem {\n\t/**\n\t * Wether the dropdown menu item is active\n\t */\n\t@Prop() active: boolean = false;\n\n\t/**\n\t * Wether the dropdown menu item has a checkbox\n\t */\n\t@Prop() checkbox: boolean = false;\n\n\t/**\n\t * The variant of the item\n\t */\n\t@Prop() variant: 'default' | 'storm' | 'negative' = 'default';\n\n\t/**\n\t * Wether to enable the hover state\n\t */\n\t@Prop() enableHover?: boolean = true;\n\n\t/**\n\t * Wether to enable wrapping the text to a new line\n\t */\n\t@Prop() enableTextWrap?: boolean = false;\n\n\t/**\n\t * Wether the item is disabled\n\t */\n\t@Prop() disabled: boolean = false;\n\n\t/**\n\t * Icon of the navigation item\n\t */\n\t@Prop() icon: IconVariant;\n\n\t/**\n\t * Wether to apply wave animation to icon\n\t */\n\t@Prop() iconWave: boolean = false;\n\n\t/**\n\t * wether to use the container for text\n\t */\n\t@Prop() useContainer = true;\n\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={dropdownMenuItem({\n\t\t\t\t\tvariant: this.variant,\n\t\t\t\t\tactive: asBoolean(this.active),\n\t\t\t\t\tenableHover: asBoolean(this.enableHover ?? true, true),\n\t\t\t\t\tenableTextWrap: this.enableTextWrap,\n\t\t\t\t\tdisabled: asBoolean(this.disabled),\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{this.icon && (\n\t\t\t\t\t<p-icon\n\t\t\t\t\t\tclass={dropdownMenuItemIcon({\n\t\t\t\t\t\t\tvariant: this.variant,\n\t\t\t\t\t\t\tactive: asBoolean(this.active),\n\t\t\t\t\t\t\tdisabled: asBoolean(this.disabled),\n\t\t\t\t\t\t\twave: asBoolean(this.iconWave),\n\t\t\t\t\t\t})}\n\t\t\t\t\t\tvariant={this.icon}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{this.checkbox && (\n\t\t\t\t\t<p-checkbox\n\t\t\t\t\t\tchecked={this.active}\n\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{this.useContainer ? (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass={cn('block w-full overflow-hidden text-start', {\n\t\t\t\t\t\t\t'text-ellipsis whitespace-nowrap': !this.enableTextWrap,\n\t\t\t\t\t\t})}\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<slot />\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}
|
|
1
|
+
{"version":3,"file":"dropdown-menu-item.component.js","sourceRoot":"","sources":["../../../../../src/components/atoms/dropdown-menu/item/dropdown-menu-item.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { asBoolean } from '../../../../utils/as-boolean';\nimport { IconVariant } from '../../icon/icon.component';\nimport { cn } from '../../../../utils';\n\nconst dropdownMenuItem = cva(\n\t[\n\t\t'p-dropdown-menu-item flex px-2 py-1 gap-2 text-sm font-medium group rounded-lg items-center max-w-full',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: null,\n\t\t\t\tstorm: null,\n\t\t\t\tnegative: null,\n\t\t\t},\n\t\t\tactive: {\n\t\t\t\tfalse: null,\n\t\t\t\ttrue: null,\n\t\t\t},\n\t\t\tdisabled: {\n\t\t\t\tfalse: 'cursor-pointer',\n\t\t\t\ttrue: 'cursor-not-allowed',\n\t\t\t},\n\t\t\tenableHover: {\n\t\t\t\tfalse: null,\n\t\t\t\ttrue: null,\n\t\t\t},\n\t\t\tenableTextWrap: {\n\t\t\t\ttrue: 'min-h-8',\n\t\t\t\tfalse: 'h-8',\n\t\t\t},\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tvariant: 'default',\n\t\t\t\tactive: false,\n\t\t\t\tenableHover: true,\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'hover:bg-indigo-50',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'default',\n\t\t\t\tactive: true,\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'bg-indigo-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'default',\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'text-storm-500',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'default',\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'text-storm-200',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'default',\n\t\t\t\tdisabled: true,\n\t\t\t\tactive: true,\n\t\t\t\tclass: 'bg-indigo-50',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\tvariant: 'storm',\n\t\t\t\tactive: false,\n\t\t\t\tenableHover: true,\n\t\t\t\tclass: 'text-white',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'storm',\n\t\t\t\tactive: false,\n\t\t\t\tenableHover: true,\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'hover:bg-storm-500',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'storm',\n\t\t\t\tactive: true,\n\t\t\t\tclass: 'text-white bg-storm-600',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'storm',\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'opacity-40',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\tvariant: 'negative',\n\t\t\t\tactive: false,\n\t\t\t\tenableHover: true,\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'text-negative-red-500 hover:bg-negative-red-50',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'negative',\n\t\t\t\tactive: true,\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'bg-negative-red-100 text-negative-red-500',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'negative',\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'text-negative-red-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'negative',\n\t\t\t\tdisabled: true,\n\t\t\t\tactive: true,\n\t\t\t\tclass: 'bg-negative-red-50',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\tenableHover: true,\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'cursor-pointer',\n\t\t\t},\n\t\t],\n\t}\n);\n\nconst dropdownMenuItemIcon = cva(['text-base'], {\n\tvariants: {\n\t\tvariant: {\n\t\t\tdefault: null,\n\t\t\tstorm: null,\n\t\t\tnegative: null,\n\t\t},\n\t\tactive: {\n\t\t\tfalse: null,\n\t\t\ttrue: null,\n\t\t},\n\t\tdisabled: {\n\t\t\tfalse: null,\n\t\t\ttrue: 'text-storm-100',\n\t\t},\n\t\twave: {\n\t\t\ttrue: 'group-hover:animate-wave',\n\t\t\tfalse: null,\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\tvariant: 'default',\n\t\t\tactive: false,\n\t\t\tdisabled: false,\n\t\t\tclass: 'text-storm-300 group-hover:text-storm-500',\n\t\t},\n\n\t\t{\n\t\t\tvariant: 'storm',\n\t\t\tactive: false,\n\t\t\tdisabled: false,\n\t\t\tclass: 'text-storm-100 group-hover:text-white',\n\t\t},\n\n\t\t{\n\t\t\tvariant: 'negative',\n\t\t\tactive: false,\n\t\t\tdisabled: false,\n\t\t\tclass: 'text-negative-red-500 group-hover:text-negative-red-800',\n\t\t},\n\t\t{\n\t\t\tvariant: 'negative',\n\t\t\tactive: true,\n\t\t\tdisabled: false,\n\t\t\tclass: 'text-negative-red-800',\n\t\t},\n\t],\n});\n\n@Component({\n\ttag: 'p-dropdown-menu-item',\n\tstyleUrl: 'dropdown-menu-item.component.css',\n\tshadow: true,\n})\nexport class DropdownMenuItem {\n\t/**\n\t * Wether the dropdown menu item is active\n\t */\n\t@Prop() active: boolean = false;\n\n\t/**\n\t * Wether the dropdown menu item has a checkbox\n\t */\n\t@Prop() checkbox: boolean = false;\n\n\t/**\n\t * The variant of the item\n\t */\n\t@Prop() variant: 'default' | 'storm' | 'negative' = 'default';\n\n\t/**\n\t * Wether to enable the hover state\n\t */\n\t@Prop() enableHover?: boolean = true;\n\n\t/**\n\t * Wether to enable wrapping the text to a new line\n\t */\n\t@Prop() enableTextWrap?: boolean = false;\n\n\t/**\n\t * Wether the item is disabled\n\t */\n\t@Prop() disabled: boolean = false;\n\n\t/**\n\t * Icon of the navigation item\n\t */\n\t@Prop() icon: IconVariant;\n\n\t/**\n\t * Wether to apply wave animation to icon\n\t */\n\t@Prop() iconWave: boolean = false;\n\n\t/**\n\t * wether to use the container for text\n\t */\n\t@Prop() useContainer = true;\n\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={dropdownMenuItem({\n\t\t\t\t\tvariant: this.variant,\n\t\t\t\t\tactive: asBoolean(this.active),\n\t\t\t\t\tenableHover: asBoolean(this.enableHover ?? true, true),\n\t\t\t\t\tenableTextWrap: this.enableTextWrap,\n\t\t\t\t\tdisabled: asBoolean(this.disabled),\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{this.icon && (\n\t\t\t\t\t<p-icon\n\t\t\t\t\t\tclass={dropdownMenuItemIcon({\n\t\t\t\t\t\t\tvariant: this.variant,\n\t\t\t\t\t\t\tactive: asBoolean(this.active),\n\t\t\t\t\t\t\tdisabled: asBoolean(this.disabled),\n\t\t\t\t\t\t\twave: asBoolean(this.iconWave),\n\t\t\t\t\t\t})}\n\t\t\t\t\t\tvariant={this.icon}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{this.checkbox && (\n\t\t\t\t\t<p-checkbox\n\t\t\t\t\t\tchecked={this.active}\n\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{this.useContainer ? (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass={cn('block w-full overflow-hidden text-start', {\n\t\t\t\t\t\t\t'text-ellipsis whitespace-nowrap': !this.enableTextWrap,\n\t\t\t\t\t\t})}\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<slot />\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
*{box-sizing:border-box}.pointer-events-none{pointer-events:none!important}.static{position:static!important}.absolute{position:absolute!important}.relative{position:relative!important}.left-1\/2{left:50%!important}.top-1\/2{top:50%!important}.m-0{margin:0!important}.block{display:block!important}.flex{display:flex!important}.h-2{height:.5rem!important}.h-4{height:1rem!important}.w-2{width:.5rem!important}.w-4{width:1rem!important}.flex-1{flex:1 1 0%!important}.flex-shrink-0{flex-shrink:0!important}.-translate-x-1\/2{--tw-translate-x:-50%!important}.-translate-x-1\/2,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-translate-y-1\/2{--tw-translate-y:-50%!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.cursor-not-allowed{cursor:not-allowed!important}.cursor-pointer{cursor:pointer!important}.appearance-none{appearance:none!important}.items-center{align-items:center!important}.justify-start{justify-content:flex-start!important}.gap-2{gap:.5rem!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.rounded-full{border-radius:9999px!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-storm-100{--tw-border-opacity:1!important;border-color:rgb(209 210 212/var(--tw-border-opacity,1))!important}.border-storm-
|
|
1
|
+
*{box-sizing:border-box}.pointer-events-none{pointer-events:none!important}.static{position:static!important}.absolute{position:absolute!important}.relative{position:relative!important}.left-1\/2{left:50%!important}.top-1\/2{top:50%!important}.m-0{margin:0!important}.block{display:block!important}.flex{display:flex!important}.h-2{height:.5rem!important}.h-4{height:1rem!important}.w-2{width:.5rem!important}.w-4{width:1rem!important}.flex-1{flex:1 1 0%!important}.flex-shrink-0{flex-shrink:0!important}.-translate-x-1\/2{--tw-translate-x:-50%!important}.-translate-x-1\/2,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-translate-y-1\/2{--tw-translate-y:-50%!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.cursor-not-allowed{cursor:not-allowed!important}.cursor-pointer{cursor:pointer!important}.appearance-none{appearance:none!important}.items-center{align-items:center!important}.justify-start{justify-content:flex-start!important}.gap-2{gap:.5rem!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.rounded-full{border-radius:9999px!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-storm-100{--tw-border-opacity:1!important;border-color:rgb(209 210 212/var(--tw-border-opacity,1))!important}.border-storm-50{--tw-border-opacity:1!important;border-color:rgb(232 232 234/var(--tw-border-opacity,1))!important}.bg-transparent{background-color:transparent!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.bg-white,.bg-white-600{--tw-bg-opacity:1!important}.bg-white-600{background-color:rgb(250 250 250/var(--tw-bg-opacity,1))!important}.shadow-1{--tw-shadow:0 1px 1px rgba(0,2,2,.08)!important;--tw-shadow-colored:0 1px 1px var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}.outline-none{outline:2px solid transparent!important;outline-offset:2px!important}.checked\:cursor-auto:checked{cursor:auto!important}.checked\:border-storm-500\/20:checked{border-color:rgba(24,30,41,.2)!important}.checked\:bg-indigo-600:checked{--tw-bg-opacity:1!important;background-color:rgb(82 138 250/var(--tw-bg-opacity,1))!important}.checked\:ring-2:checked{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.checked\:ring-indigo-100:checked{--tw-ring-opacity:1!important;--tw-ring-color:rgb(227 236 254/var(--tw-ring-opacity,1))!important}.hover\:border-storm-500\/20:hover{border-color:rgba(24,30,41,.2)!important}.hover\:bg-indigo-100:hover{--tw-bg-opacity:1!important;background-color:rgb(227 236 254/var(--tw-bg-opacity,1))!important}.checked\:hover\:border-storm-500\/20:hover:checked{border-color:rgba(24,30,41,.2)!important}.checked\:hover\:bg-indigo-700:hover:checked{--tw-bg-opacity:1!important;background-color:rgb(47 111 240/var(--tw-bg-opacity,1))!important}.group\/radio-label:hover .group-hover\/radio-label\:border-storm-500\/20{border-color:rgba(24,30,41,.2)!important}.group\/radio-label:hover .group-hover\/radio-label\:bg-indigo-100{--tw-bg-opacity:1!important;background-color:rgb(227 236 254/var(--tw-bg-opacity,1))!important}.group\/radio-label:hover .checked\:group-hover\/radio-label\:border-storm-500\/20:checked{border-color:rgba(24,30,41,.2)!important}.group\/radio-label:hover .checked\:group-hover\/radio-label\:bg-indigo-700:checked{--tw-bg-opacity:1!important;background-color:rgb(47 111 240/var(--tw-bg-opacity,1))!important}.peer:checked~.peer-checked\:bg-storm-200{--tw-bg-opacity:1!important;background-color:rgb(163 165 169/var(--tw-bg-opacity,1))!important}.peer:checked~.peer-checked\:bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.peer:checked~.peer-checked\:ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.peer:checked~.peer-checked\:ring-storm-500\/10{--tw-ring-color:rgba(24,30,41,.1)!important}
|
|
@@ -20,7 +20,7 @@ const radio = cva([
|
|
|
20
20
|
'checked:hover:bg-indigo-700 checked:hover:border-storm-500/20',
|
|
21
21
|
'checked:group-hover/radio-label:bg-indigo-700 checked:group-hover/radio-label:border-storm-500/20',
|
|
22
22
|
],
|
|
23
|
-
true: 'bg-white-600 border-storm-
|
|
23
|
+
true: 'bg-white-600 border-storm-50 cursor-not-allowed ',
|
|
24
24
|
},
|
|
25
25
|
},
|
|
26
26
|
compoundVariants: [
|
|
@@ -90,11 +90,11 @@ export class Radio {
|
|
|
90
90
|
}
|
|
91
91
|
render() {
|
|
92
92
|
const id = this.id?.length ? this.id : this._nonce;
|
|
93
|
-
return (h("label", { key: '
|
|
93
|
+
return (h("label", { key: '7c852bfadf0bc05381a745011401f9d8cab0dc3d', htmlFor: id, class: 'flex items-center justify-start gap-2' }, h("div", { key: '03d497f5e5a8dd8ce272cf092f4d1e34e5ccded4', class: 'relative flex flex-shrink-0 items-center' }, h("input", { key: '9a8c7f809e17e24007ccb3c2a91e396364b5533c', class: radio({
|
|
94
94
|
disabled: asBoolean(this.disabled),
|
|
95
|
-
}), type: 'radio', id: id, name: this.name, required: this.required, value: this.value, checked: this.checked, disabled: asBoolean(this.disabled), onChange: ev => this._onChange(ev) }), h("div", { key: '
|
|
95
|
+
}), type: 'radio', id: id, name: this.name, required: this.required, value: this.value, checked: this.checked, disabled: asBoolean(this.disabled), onChange: ev => this._onChange(ev) }), h("div", { key: '60d97704c67648b487e02b87a24427bba97bfd11', class: circle({
|
|
96
96
|
disabled: asBoolean(this.disabled),
|
|
97
|
-
}) })), h("div", { key: '
|
|
97
|
+
}) })), h("div", { key: 'c47c8a19e75c3e84d8fdc74a3c7dbad46c24ac96', class: 'flex-1 overflow-hidden text-ellipsis' }, h("slot", { key: '1a8ccfc9e7f2185ea4c877b9d77b35a4a07a6757' }))));
|
|
98
98
|
}
|
|
99
99
|
_onChange(ev) {
|
|
100
100
|
if (asBoolean(this.disabled)) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/radio/radio.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EACN,eAAe,EACf,SAAS,EACT,KAAK,EAEL,IAAI,EACJ,KAAK,EACL,CAAC,GACD,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAE7C,MAAM,KAAK,GAAG,GAAG,CAChB;IACC,qDAAqD;IACrD,gDAAgD;IAChD,SAAS;CACT,EACD;IACC,QAAQ,EAAE;QACT,QAAQ,EAAE;YACT,KAAK,EAAE;gBACN,yBAAyB;gBACzB,2BAA2B;gBAC3B,+CAA+C;gBAC/C,mFAAmF;gBACnF,qBAAqB;gBACrB,mDAAmD;gBACnD,wCAAwC;gBACxC,+DAA+D;gBAC/D,mGAAmG;aACnG;YACD,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"radio.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/radio/radio.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n\tAttachInternals,\n\tComponent,\n\tEvent,\n\tEventEmitter,\n\tProp,\n\tState,\n\th,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { asBoolean } from '../../../utils/as-boolean';\nimport { nonce } from '../../../utils/nonce';\n\nconst radio = cva(\n\t[\n\t\t'peer appearance-none m-0 outline-none flex-shrink-0',\n\t\t'rounded-full border border-inset border-solid ',\n\t\t'w-4 h-4',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tdisabled: {\n\t\t\t\tfalse: [\n\t\t\t\t\t'cursor-pointer shadow-1',\n\t\t\t\t\t'bg-white border-storm-100',\n\t\t\t\t\t'hover:bg-indigo-100 hover:border-storm-500/20',\n\t\t\t\t\t'group-hover/radio-label:bg-indigo-100 group-hover/radio-label:border-storm-500/20',\n\t\t\t\t\t'checked:cursor-auto',\n\t\t\t\t\t'checked:bg-indigo-600 checked:border-storm-500/20',\n\t\t\t\t\t'checked:ring-2 checked:ring-indigo-100',\n\t\t\t\t\t'checked:hover:bg-indigo-700 checked:hover:border-storm-500/20',\n\t\t\t\t\t'checked:group-hover/radio-label:bg-indigo-700 checked:group-hover/radio-label:border-storm-500/20',\n\t\t\t\t],\n\t\t\t\ttrue: 'bg-white-600 border-storm-50 cursor-not-allowed ',\n\t\t\t},\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: [\n\t\t\t\t\t'cursor-pointer shadow-1',\n\t\t\t\t\t'bg-white border-storm-100',\n\t\t\t\t\t'hover:bg-indigo-100 hover:border-storm-500/20',\n\t\t\t\t\t'group-hover/radio-label:bg-indigo-100 group-hover/radio-label:border-storm-500/20',\n\t\t\t\t],\n\t\t\t},\n\t\t],\n\t}\n);\n\nconst circle = cva(\n\t[\n\t\t'block',\n\t\t'rounded-full bg-transparent',\n\t\t'absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none',\n\t\t'w-2 h-2',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tdisabled: {\n\t\t\t\tfalse:\n\t\t\t\t\t'peer-checked:bg-white peer-checked:ring-1 peer-checked:ring-storm-500/10',\n\t\t\t\ttrue: 'peer-checked:bg-storm-200',\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-radio',\n\tstyleUrl: 'radio.component.css',\n\tformAssociated: true,\n})\nexport class Radio {\n\t/**\n\t * The value of the radio button\n\t */\n\t@Prop() value: string;\n\n\t/**\n\t * Wether the radio is disabled\n\t */\n\t@Prop({ reflect: true }) disabled: boolean = false;\n\n\t/**\n\t * Wether the radio is required\n\t */\n\t@Prop({ reflect: true }) required: boolean = true;\n\n\t/**\n\t * The id of the radio button\n\t */\n\t@Prop({ reflect: true }) id: string;\n\n\t/**\n\t * The name of the radio button\n\t */\n\t@Prop({ reflect: true }) name: string;\n\n\t/**\n\t * Wether the radio is checked\n\t */\n\t@Prop({ reflect: true }) checked: boolean = false;\n\n\t/**\n\t * Event whenever the checked changes\n\t */\n\t@Event() checkedChange: EventEmitter<boolean>;\n\n\t@State() private _nonce = nonce(5);\n\n\t@AttachInternals() _internals: ElementInternals;\n\n\tformResetCallback() {\n\t\tthis._setValue(false);\n\t}\n\n\tformDisabledCallback(disabled: boolean) {\n\t\tif (!this._internals.form) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.disabled = disabled;\n\t}\n\n\trender() {\n\t\tconst id = this.id?.length ? this.id : this._nonce;\n\n\t\treturn (\n\t\t\t<label\n\t\t\t\thtmlFor={id}\n\t\t\t\tclass='flex items-center justify-start gap-2'\n\t\t\t>\n\t\t\t\t<div class='relative flex flex-shrink-0 items-center'>\n\t\t\t\t\t<input\n\t\t\t\t\t\tclass={radio({\n\t\t\t\t\t\t\tdisabled: asBoolean(this.disabled),\n\t\t\t\t\t\t})}\n\t\t\t\t\t\ttype='radio'\n\t\t\t\t\t\tid={id}\n\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\tchecked={this.checked}\n\t\t\t\t\t\tdisabled={asBoolean(this.disabled)}\n\t\t\t\t\t\tonChange={ev => this._onChange(ev)}\n\t\t\t\t\t/>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass={circle({\n\t\t\t\t\t\t\tdisabled: asBoolean(this.disabled),\n\t\t\t\t\t\t})}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<div class='flex-1 overflow-hidden text-ellipsis'>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</label>\n\t\t);\n\t}\n\n\tprivate _onChange(ev: Event) {\n\t\tif (asBoolean(this.disabled)) {\n\t\t\tev.preventDefault();\n\t\t\treturn;\n\t\t}\n\n\t\tconst checked = (ev.target as HTMLInputElement).checked;\n\t\tthis._setValue(checked);\n\t}\n\n\tprivate _setValue(checked: boolean) {\n\t\tthis.checked = checked;\n\t\tthis.checkedChange.emit(checked);\n\t\tthis._internals.setFormValue(checked ? 'on' : 'off');\n\t}\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
*{box-sizing:border-box}.static{position:static!important}.inline-block{display:inline-block!important}.flex{display:flex!important}.h-10{height:2.5rem!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.w-10{width:2.5rem!important}.w-6{width:1.5rem!important}.w-8{width:2rem!important}.w-inherit{width:inherit!important}.cursor-not-allowed{cursor:not-allowed!important}.cursor-pointer{cursor:pointer!important}.cursor-wait{cursor:wait!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.gap-1{gap:.25rem!important}.gap-2{gap:.5rem!important}.rounded-lg{border-radius:.5rem!important}.rounded-e-lg{border-end-end-radius:.5rem!important;border-start-end-radius:.5rem!important}.rounded-s-lg{border-end-start-radius:.5rem!important;border-start-start-radius:.5rem!important}.border{border-width:1px!important}.border-indigo-600{--tw-border-opacity:1!important;border-color:rgb(82 138 250/var(--tw-border-opacity,1))!important}.border-storm-500\/20{border-color:rgba(24,30,41,.2)!important}.border-transparent{border-color:transparent!important}.bg-indigo-200{--tw-bg-opacity:1!important;background-color:rgb(199 217 253/var(--tw-bg-opacity,1))!important}.bg-indigo-600{--tw-bg-opacity:1!important;background-color:rgb(82 138 250/var(--tw-bg-opacity,1))!important}.bg-transparent{background-color:transparent!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.bg-white,.bg-white-600{--tw-bg-opacity:1!important}.bg-white-600{background-color:rgb(250 250 250/var(--tw-bg-opacity,1))!important}.p-2{padding:.5rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.px-3{padding-left:.75rem!important;padding-right:.75rem!important}.py-1{padding-bottom:.25rem!important;padding-top:.25rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.font-semibold{font-weight:600!important}.leading-4{line-height:1rem!important}.text-indigo-300{--tw-text-opacity:1!important;color:rgb(187 209 253/var(--tw-text-opacity,1))!important}.text-indigo-500{--tw-text-opacity:1!important;color:rgb(142 179 251/var(--tw-text-opacity,1))!important}.text-indigo-700{--tw-text-opacity:1!important;color:rgb(47 111 240/var(--tw-text-opacity,1))!important}.text-negative-red-800{--tw-text-opacity:1!important;color:rgb(141 16 16/var(--tw-text-opacity,1))!important}.text-storm-100{--tw-text-opacity:1!important;color:rgb(209 210 212/var(--tw-text-opacity,1))!important}.text-storm-300{--tw-text-opacity:1!important;color:rgb(116 120 127/var(--tw-text-opacity,1))!important}.text-storm-500{--tw-text-opacity:1!important;color:rgb(24 30 41/var(--tw-text-opacity,1))!important}.text-storm-500\/60{color:rgba(24,30,41,.6)!important}.text-white{--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity,1))!important}.text-white\/60{color:hsla(0,0%,100%,.6)!important}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important}.ring,.ring-2{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important}.ring-indigo-100{--tw-ring-opacity:1!important;--tw-ring-color:rgb(227 236 254/var(--tw-ring-opacity,1))!important}.ring-negative-red-50{--tw-ring-opacity:1!important;--tw-ring-color:rgb(253 237 237/var(--tw-ring-opacity,1))!important}.drop-shadow-1{--tw-drop-shadow:drop-shadow(0 1px 1px rgba(0,2,2,.08))!important}.drop-shadow-1,.drop-shadow-primary-button{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.drop-shadow-primary-button{--tw-drop-shadow:drop-shadow(0px 1px 1px 0px rgba(24,30 41,0.08))!important}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:85.375rem){.container{max-width:85.375rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:96rem){.container{max-width:96rem}}@media (min-width:105rem){.container{max-width:105rem}}@media (min-width:120rem){.container{max-width:120rem}}@media (min-width:160rem){.container{max-width:160rem}}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.hover\:bg-indigo-700:hover{--tw-bg-opacity:1!important;background-color:rgb(47 111 240/var(--tw-bg-opacity,1))!important}.hover\:bg-white-600:hover{--tw-bg-opacity:1!important;background-color:rgb(250 250 250/var(--tw-bg-opacity,1))!important}.hover\:text-indigo-800:hover{--tw-text-opacity:1!important;color:rgb(27 88 210/var(--tw-text-opacity,1))!important}.hover\:drop-shadow-1:hover{--tw-drop-shadow:drop-shadow(0 1px 1px rgba(0,2,2,.08))!important}.hover\:drop-shadow-1:hover,.hover\:drop-shadow-2:hover{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.hover\:drop-shadow-2:hover{--tw-drop-shadow:drop-shadow(0 1px 1px rgba(0,2,2,.04)) drop-shadow(0 2px 2px rgba(0,2,2,.04)) drop-shadow(0 4px 4px rgba(0,2,2,.04))!important}.active\:border-indigo-600:active{--tw-border-opacity:1!important;border-color:rgb(82 138 250/var(--tw-border-opacity,1))!important}.active\:border-storm-500\/10:active{border-color:rgba(24,30,41,.1)!important}.active\:text-indigo-800:active{--tw-text-opacity:1!important;color:rgb(27 88 210/var(--tw-text-opacity,1))!important}.active\:text-negative-red-800:active{--tw-text-opacity:1!important;color:rgb(141 16 16/var(--tw-text-opacity,1))!important}.active\:text-storm-500\/60:active{color:rgba(24,30,41,.6)!important}.active\:text-white\/60:active{color:hsla(0,0%,100%,.6)!important}.active\:ring:active{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important}.active\:ring-2:active,.active\:ring:active{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.active\:ring-2:active{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important}.active\:ring-indigo-100:active{--tw-ring-opacity:1!important;--tw-ring-color:rgb(227 236 254/var(--tw-ring-opacity,1))!important}.group:hover .group-hover\:text-indigo-700{--tw-text-opacity:1!important;color:rgb(47 111 240/var(--tw-text-opacity,1))!important}.group:hover .group-hover\:text-storm-500{--tw-text-opacity:1!important;color:rgb(24 30 41/var(--tw-text-opacity,1))!important}.group:hover .group-hover\:text-white{--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity,1))!important}.group:active .group-active\:text-indigo-800{--tw-text-opacity:1!important;color:rgb(27 88 210/var(--tw-text-opacity,1))!important}.group:active .group-active\:text-storm-500\/60{color:rgba(24,30,41,.6)!important}.group:active .group-active\:text-white\/60{color:hsla(0,0%,100%,.6)!important}
|
|
1
|
+
*{box-sizing:border-box}.static{position:static!important}.inline-block{display:inline-block!important}.flex{display:flex!important}.h-10{height:2.5rem!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.w-10{width:2.5rem!important}.w-6{width:1.5rem!important}.w-8{width:2rem!important}.w-inherit{width:inherit!important}.cursor-not-allowed{cursor:not-allowed!important}.cursor-pointer{cursor:pointer!important}.cursor-wait{cursor:wait!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.gap-1{gap:.25rem!important}.gap-2{gap:.5rem!important}.rounded-lg{border-radius:.5rem!important}.rounded-e-lg{border-end-end-radius:.5rem!important;border-start-end-radius:.5rem!important}.rounded-s-lg{border-end-start-radius:.5rem!important;border-start-start-radius:.5rem!important}.border{border-width:1px!important}.border-indigo-600{--tw-border-opacity:1!important;border-color:rgb(82 138 250/var(--tw-border-opacity,1))!important}.border-negative-red-500{--tw-border-opacity:1!important;border-color:rgb(230 30 30/var(--tw-border-opacity,1))!important}.border-storm-500\/20{border-color:rgba(24,30,41,.2)!important}.border-transparent{border-color:transparent!important}.bg-indigo-200{--tw-bg-opacity:1!important;background-color:rgb(199 217 253/var(--tw-bg-opacity,1))!important}.bg-indigo-600{--tw-bg-opacity:1!important;background-color:rgb(82 138 250/var(--tw-bg-opacity,1))!important}.bg-transparent{background-color:transparent!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.bg-white,.bg-white-600{--tw-bg-opacity:1!important}.bg-white-600{background-color:rgb(250 250 250/var(--tw-bg-opacity,1))!important}.p-2{padding:.5rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.px-3{padding-left:.75rem!important;padding-right:.75rem!important}.py-1{padding-bottom:.25rem!important;padding-top:.25rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.font-semibold{font-weight:600!important}.leading-4{line-height:1rem!important}.text-indigo-300{--tw-text-opacity:1!important;color:rgb(187 209 253/var(--tw-text-opacity,1))!important}.text-indigo-500{--tw-text-opacity:1!important;color:rgb(142 179 251/var(--tw-text-opacity,1))!important}.text-indigo-700{--tw-text-opacity:1!important;color:rgb(47 111 240/var(--tw-text-opacity,1))!important}.text-negative-red-500{--tw-text-opacity:1!important;color:rgb(230 30 30/var(--tw-text-opacity,1))!important}.text-negative-red-800{--tw-text-opacity:1!important;color:rgb(141 16 16/var(--tw-text-opacity,1))!important}.text-storm-100{--tw-text-opacity:1!important;color:rgb(209 210 212/var(--tw-text-opacity,1))!important}.text-storm-300{--tw-text-opacity:1!important;color:rgb(116 120 127/var(--tw-text-opacity,1))!important}.text-storm-500{--tw-text-opacity:1!important;color:rgb(24 30 41/var(--tw-text-opacity,1))!important}.text-storm-500\/60{color:rgba(24,30,41,.6)!important}.text-white{--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity,1))!important}.text-white\/60{color:hsla(0,0%,100%,.6)!important}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important}.ring,.ring-2{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important}.ring-indigo-100{--tw-ring-opacity:1!important;--tw-ring-color:rgb(227 236 254/var(--tw-ring-opacity,1))!important}.ring-negative-red-50{--tw-ring-opacity:1!important;--tw-ring-color:rgb(253 237 237/var(--tw-ring-opacity,1))!important}.drop-shadow-1{--tw-drop-shadow:drop-shadow(0 1px 1px rgba(0,2,2,.08))!important}.drop-shadow-1,.drop-shadow-primary-button{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.drop-shadow-primary-button{--tw-drop-shadow:drop-shadow(0px 1px 1px 0px rgba(24,30 41,0.08))!important}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:85.375rem){.container{max-width:85.375rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:96rem){.container{max-width:96rem}}@media (min-width:105rem){.container{max-width:105rem}}@media (min-width:120rem){.container{max-width:120rem}}@media (min-width:160rem){.container{max-width:160rem}}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.hover\:bg-indigo-700:hover{--tw-bg-opacity:1!important;background-color:rgb(47 111 240/var(--tw-bg-opacity,1))!important}.hover\:bg-white-600:hover{--tw-bg-opacity:1!important;background-color:rgb(250 250 250/var(--tw-bg-opacity,1))!important}.hover\:text-indigo-800:hover{--tw-text-opacity:1!important;color:rgb(27 88 210/var(--tw-text-opacity,1))!important}.hover\:drop-shadow-1:hover{--tw-drop-shadow:drop-shadow(0 1px 1px rgba(0,2,2,.08))!important}.hover\:drop-shadow-1:hover,.hover\:drop-shadow-2:hover{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.hover\:drop-shadow-2:hover{--tw-drop-shadow:drop-shadow(0 1px 1px rgba(0,2,2,.04)) drop-shadow(0 2px 2px rgba(0,2,2,.04)) drop-shadow(0 4px 4px rgba(0,2,2,.04))!important}.active\:border-indigo-600:active{--tw-border-opacity:1!important;border-color:rgb(82 138 250/var(--tw-border-opacity,1))!important}.active\:border-storm-500\/10:active{border-color:rgba(24,30,41,.1)!important}.active\:text-indigo-800:active{--tw-text-opacity:1!important;color:rgb(27 88 210/var(--tw-text-opacity,1))!important}.active\:text-negative-red-800:active{--tw-text-opacity:1!important;color:rgb(141 16 16/var(--tw-text-opacity,1))!important}.active\:text-storm-500\/60:active{color:rgba(24,30,41,.6)!important}.active\:text-white\/60:active{color:hsla(0,0%,100%,.6)!important}.active\:ring:active{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important}.active\:ring-2:active,.active\:ring:active{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.active\:ring-2:active{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important}.active\:ring-indigo-100:active{--tw-ring-opacity:1!important;--tw-ring-color:rgb(227 236 254/var(--tw-ring-opacity,1))!important}.group:hover .group-hover\:text-indigo-700{--tw-text-opacity:1!important;color:rgb(47 111 240/var(--tw-text-opacity,1))!important}.group:hover .group-hover\:text-negative-red-800{--tw-text-opacity:1!important;color:rgb(141 16 16/var(--tw-text-opacity,1))!important}.group:hover .group-hover\:text-storm-500{--tw-text-opacity:1!important;color:rgb(24 30 41/var(--tw-text-opacity,1))!important}.group:hover .group-hover\:text-white{--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity,1))!important}.group:active .group-active\:text-indigo-800{--tw-text-opacity:1!important;color:rgb(27 88 210/var(--tw-text-opacity,1))!important}.group:active .group-active\:text-storm-500\/60{color:rgba(24,30,41,.6)!important}.group:active .group-active\:text-white\/60{color:hsla(0,0%,100%,.6)!important}
|
|
@@ -153,7 +153,7 @@ const button = cva([
|
|
|
153
153
|
{
|
|
154
154
|
variant: ['secondary', 'dropdown'],
|
|
155
155
|
error: true,
|
|
156
|
-
class: 'border border-negative-red-
|
|
156
|
+
class: 'border border-negative-red-500 text-negative-red-800 ring ring-2 ring-negative-red-50 active:text-negative-red-800',
|
|
157
157
|
},
|
|
158
158
|
{
|
|
159
159
|
variant: ['text', 'transparent'],
|
|
@@ -275,7 +275,7 @@ const icon = cva([], {
|
|
|
275
275
|
variant: ['secondary', 'dropdown'],
|
|
276
276
|
active: false,
|
|
277
277
|
error: true,
|
|
278
|
-
class: 'text-negative-red-
|
|
278
|
+
class: 'text-negative-red-500 group-hover:text-negative-red-800',
|
|
279
279
|
},
|
|
280
280
|
{
|
|
281
281
|
variant: ['secondary', 'dropdown'],
|
|
@@ -391,7 +391,7 @@ export class Button {
|
|
|
391
391
|
: 'button';
|
|
392
392
|
const hostClass = cn('p-button inline-block', this.class);
|
|
393
393
|
const active = asBoolean(this.active) || hostClass?.includes('active');
|
|
394
|
-
return (h(Host, { key: '
|
|
394
|
+
return (h(Host, { key: '2c93e8cdffee26715bd8960ebd62d3aa2a449145', class: hostClass }, h(VariableTag, { key: 'de3431ad362c507e5c8bfdd14fea0a6da965ab5b', disabled: asBoolean(this.disabled), href: this.href, type: this.variant !== 'text' ? this.type : undefined, target: this.target, class: button({
|
|
395
395
|
variant: this.variant,
|
|
396
396
|
size: this.size,
|
|
397
397
|
loading: asBoolean(this.loading),
|
|
@@ -400,14 +400,14 @@ export class Button {
|
|
|
400
400
|
iconOnly: asBoolean(this.iconOnly),
|
|
401
401
|
active,
|
|
402
402
|
error: asBoolean(this.error),
|
|
403
|
-
}) }, this.chevron && this.chevronPosition === 'start' && (h("p-icon", { key: '
|
|
403
|
+
}) }, this.chevron && this.chevronPosition === 'start' && (h("p-icon", { key: '369844e17d906be99864f4c5c75597606cd885e3', variant: 'caret', rotate: this.chevron === 'up' ? 180 : 0 })), this.icon &&
|
|
404
404
|
this.iconPosition === 'start' &&
|
|
405
405
|
!(this.iconOnly && this.loading) &&
|
|
406
406
|
this._getIcon(), this.label ? this.label : h("slot", null), this.icon &&
|
|
407
407
|
this.iconPosition === 'end' &&
|
|
408
408
|
!this.loading &&
|
|
409
409
|
!this.chevron &&
|
|
410
|
-
this._getIcon(), this.chevron && !this.loading && this.chevronPosition === 'end' && (h("p-icon", { key: '
|
|
410
|
+
this._getIcon(), this.chevron && !this.loading && this.chevronPosition === 'end' && (h("p-icon", { key: 'eac0ca9ed5fad8cc19f9ef0f33bbde937808dfef', variant: 'caret', rotate: this.chevron === 'up' ? 180 : 0 })), this.loading && h("p-loader", { key: '2a9c181dcd798a1f89556817b103c475bb5d1497', color: loaderColor }))));
|
|
411
411
|
}
|
|
412
412
|
handleClick(ev) {
|
|
413
413
|
if (this.loading || this.disabled) {
|