@verbb/plugin-kit-web 2.0.15 → 2.0.16
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 +64 -0
- package/custom-elements.json +39571 -0
- package/dist/base/pk-form-associated-element.d.ts +17 -1
- package/dist/base/pk-form-associated-element.d.ts.map +1 -1
- package/dist/chunks/{animate-with-class-ZJeCOKB3.js → animate-with-class-CsDwYnXL.js} +1 -1
- package/dist/chunks/{animate-with-class-ZJeCOKB3.js.map → animate-with-class-CsDwYnXL.js.map} +1 -1
- package/dist/chunks/{autoloader-DPX9YYZs.js → autoloader-dJO3tYOX.js} +2 -2
- package/dist/chunks/{autoloader-DPX9YYZs.js.map → autoloader-dJO3tYOX.js.map} +1 -1
- package/dist/chunks/{component-registry-CNB8PbP_.js → component-registry-D34fm8xW.js} +5 -1
- package/dist/chunks/component-registry-D34fm8xW.js.map +1 -0
- package/dist/chunks/{field-labels-CoU9dnNq.js → field-labels-CmuAW8Cl.js} +1 -1
- package/dist/chunks/{field-labels-CoU9dnNq.js.map → field-labels-CmuAW8Cl.js.map} +1 -1
- package/dist/chunks/option-filter-BQqr8Z21.js +121 -0
- package/dist/chunks/option-filter-BQqr8Z21.js.map +1 -0
- package/dist/chunks/pk-autocomplete-kOT0Zlld.js +992 -0
- package/dist/chunks/pk-autocomplete-kOT0Zlld.js.map +1 -0
- package/dist/chunks/{pk-button-BWGDkuzc.js → pk-button-BrH4u4Qr.js} +8 -4
- package/dist/chunks/{pk-button-BWGDkuzc.js.map → pk-button-BrH4u4Qr.js.map} +1 -1
- package/dist/chunks/{pk-calendar-enTOUCRD.js → pk-calendar-Z7Y0PjeY.js} +1 -1
- package/dist/chunks/{pk-calendar-enTOUCRD.js.map → pk-calendar-Z7Y0PjeY.js.map} +1 -1
- package/dist/chunks/{pk-checkbox-CvZwJZn_.js → pk-checkbox-CfV1uDdC.js} +2 -2
- package/dist/chunks/{pk-checkbox-CvZwJZn_.js.map → pk-checkbox-CfV1uDdC.js.map} +1 -1
- package/dist/chunks/{pk-checkbox-select-DclPoyDM.js → pk-checkbox-select-DeCaI3a0.js} +2 -2
- package/dist/chunks/{pk-checkbox-select-DclPoyDM.js.map → pk-checkbox-select-DeCaI3a0.js.map} +1 -1
- package/dist/chunks/{pk-code-editor-CrKnJUyi.js → pk-code-editor-BG9sG_Fy.js} +2 -2
- package/dist/chunks/{pk-code-editor-CrKnJUyi.js.map → pk-code-editor-BG9sG_Fy.js.map} +1 -1
- package/dist/chunks/{pk-color-input-DXdqNCK7.js → pk-color-input-CncNce1C.js} +2 -2
- package/dist/chunks/{pk-color-input-DXdqNCK7.js.map → pk-color-input-CncNce1C.js.map} +1 -1
- package/dist/chunks/{pk-combobox-BLft8AXy.js → pk-combobox-Dn7UJ_CV.js} +48 -91
- package/dist/chunks/pk-combobox-Dn7UJ_CV.js.map +1 -0
- package/dist/chunks/{pk-connect.styles-DshgIW2n.js → pk-connect.styles-BhW406jt.js} +1 -1
- package/dist/chunks/{pk-connect.styles-DshgIW2n.js.map → pk-connect.styles-BhW406jt.js.map} +1 -1
- package/dist/chunks/{pk-copy-button-asOLQkqk.js → pk-copy-button-BVaOLtYG.js} +46 -5
- package/dist/chunks/pk-copy-button-BVaOLtYG.js.map +1 -0
- package/dist/chunks/{pk-date-picker-Bri3kZ6x.js → pk-date-picker-DfIvmoZ1.js} +5 -5
- package/dist/chunks/{pk-date-picker-Bri3kZ6x.js.map → pk-date-picker-DfIvmoZ1.js.map} +1 -1
- package/dist/chunks/{pk-dialog-BbEfvb0g.js → pk-dialog-VMQqLW1f.js} +2 -2
- package/dist/chunks/{pk-dialog-BbEfvb0g.js.map → pk-dialog-VMQqLW1f.js.map} +1 -1
- package/dist/chunks/{pk-dropdown-item-BoZTGWMU.js → pk-dropdown-item-BZQS87U0.js} +2 -2
- package/dist/chunks/{pk-dropdown-item-BoZTGWMU.js.map → pk-dropdown-item-BZQS87U0.js.map} +1 -1
- package/dist/chunks/{pk-dropdown-label-Da28F917.js → pk-dropdown-label-CRNWMWQd.js} +1 -1
- package/dist/chunks/{pk-dropdown-label-Da28F917.js.map → pk-dropdown-label-CRNWMWQd.js.map} +1 -1
- package/dist/chunks/{pk-dropdown-menu-CfZc7dIz.js → pk-dropdown-menu-D60p2-9X.js} +3 -3
- package/dist/chunks/{pk-dropdown-menu-CfZc7dIz.js.map → pk-dropdown-menu-D60p2-9X.js.map} +1 -1
- package/dist/chunks/{pk-editable-table-Cn4WXqAo.js → pk-editable-table-BQ47MXpu.js} +17 -19
- package/dist/chunks/pk-editable-table-BQ47MXpu.js.map +1 -0
- package/dist/chunks/{pk-field-NL4KdFZC.js → pk-field-UAlMq6mQ.js} +2 -2
- package/dist/chunks/{pk-field-NL4KdFZC.js.map → pk-field-UAlMq6mQ.js.map} +1 -1
- package/dist/chunks/{pk-form-associated-element-9M2NzOE2.js → pk-form-associated-element-CCQALRGB.js} +14 -2
- package/dist/chunks/pk-form-associated-element-CCQALRGB.js.map +1 -0
- package/dist/chunks/pk-image-browser-BXFDfch3.js +1364 -0
- package/dist/chunks/pk-image-browser-BXFDfch3.js.map +1 -0
- package/dist/chunks/{pk-input-DDkIXOkt.js → pk-input-CF_icEtR.js} +76 -30
- package/dist/chunks/pk-input-CF_icEtR.js.map +1 -0
- package/dist/chunks/{pk-input-group-CRPSBFhX.js → pk-input-group-CWdoVhkH.js} +1 -1
- package/dist/chunks/{pk-input-group-CRPSBFhX.js.map → pk-input-group-CWdoVhkH.js.map} +1 -1
- package/dist/chunks/{pk-input-group-addon-B0StOmTJ.js → pk-input-group-addon-ClBkGmAw.js} +1 -1
- package/dist/chunks/{pk-input-group-addon-B0StOmTJ.js.map → pk-input-group-addon-ClBkGmAw.js.map} +1 -1
- package/dist/chunks/{pk-input-group-button-CnKajvsP.js → pk-input-group-button-CHQHsWd4.js} +1 -1
- package/dist/chunks/{pk-input-group-button-CnKajvsP.js.map → pk-input-group-button-CHQHsWd4.js.map} +1 -1
- package/dist/chunks/{pk-input-group-input-mllffsjQ.js → pk-input-group-input-oNnqMBGU.js} +1 -1
- package/dist/chunks/{pk-input-group-input-mllffsjQ.js.map → pk-input-group-input-oNnqMBGU.js.map} +1 -1
- package/dist/chunks/{pk-input-group-text-DvaPJvh2.js → pk-input-group-text-HUxlXROB.js} +1 -1
- package/dist/chunks/{pk-input-group-text-DvaPJvh2.js.map → pk-input-group-text-HUxlXROB.js.map} +1 -1
- package/dist/chunks/{pk-input-group-textarea-CqYv8tUQ.js → pk-input-group-textarea-Cl2FNuw-.js} +1 -1
- package/dist/chunks/{pk-input-group-textarea-CqYv8tUQ.js.map → pk-input-group-textarea-Cl2FNuw-.js.map} +1 -1
- package/dist/chunks/{pk-lightswitch-DI1BeCmA.js → pk-lightswitch-D1qEFRxK.js} +3 -3
- package/dist/chunks/{pk-lightswitch-DI1BeCmA.js.map → pk-lightswitch-D1qEFRxK.js.map} +1 -1
- package/dist/chunks/{pk-option-MGj9SKOK.js → pk-option-DQZHV9jL.js} +3 -2
- package/dist/chunks/pk-option-DQZHV9jL.js.map +1 -0
- package/dist/chunks/{pk-option-group-Cs6N7mlP.js → pk-option-group-CCzJkBFp.js} +1 -1
- package/dist/chunks/{pk-option-group-Cs6N7mlP.js.map → pk-option-group-CCzJkBFp.js.map} +1 -1
- package/dist/chunks/{pk-popover-duyNosk2.js → pk-popover-KSIOYlbs.js} +3 -3
- package/dist/chunks/{pk-popover-duyNosk2.js.map → pk-popover-KSIOYlbs.js.map} +1 -1
- package/dist/chunks/{pk-radio-BK4D2Htu.js → pk-radio-B5XkMHy3.js} +1 -1
- package/dist/chunks/{pk-radio-BK4D2Htu.js.map → pk-radio-B5XkMHy3.js.map} +1 -1
- package/dist/chunks/{pk-radio-group-BRJIjOsR.js → pk-radio-group-ByrxGLdX.js} +3 -3
- package/dist/chunks/{pk-radio-group-BRJIjOsR.js.map → pk-radio-group-ByrxGLdX.js.map} +1 -1
- package/dist/chunks/{pk-scroll-area-BR6ckorh.js → pk-scroll-area-CdfNxYz8.js} +1 -1
- package/dist/chunks/{pk-scroll-area-BR6ckorh.js.map → pk-scroll-area-CdfNxYz8.js.map} +1 -1
- package/dist/chunks/{pk-select-C1s0OJr0.js → pk-select-DQtORz-v.js} +6 -4
- package/dist/chunks/pk-select-DQtORz-v.js.map +1 -0
- package/dist/chunks/{pk-separator-CHij3vEG.js → pk-separator-N-VyjYE6.js} +1 -1
- package/dist/chunks/{pk-separator-CHij3vEG.js.map → pk-separator-N-VyjYE6.js.map} +1 -1
- package/dist/chunks/{pk-status-D1IzTSI2.js → pk-status-BehQARDv.js} +1 -1
- package/dist/chunks/{pk-status-D1IzTSI2.js.map → pk-status-BehQARDv.js.map} +1 -1
- package/dist/chunks/{pk-tab-2MHunhlF.js → pk-tab-CTloD18e.js} +1 -1
- package/dist/chunks/{pk-tab-2MHunhlF.js.map → pk-tab-CTloD18e.js.map} +1 -1
- package/dist/chunks/{pk-tab-heading-BV6m_sT-.js → pk-tab-heading-Cjcgebxn.js} +1 -1
- package/dist/chunks/{pk-tab-heading-BV6m_sT-.js.map → pk-tab-heading-Cjcgebxn.js.map} +1 -1
- package/dist/chunks/{pk-tab-panel-C6FxQw9q.js → pk-tab-panel-CkKU5-Ah.js} +1 -1
- package/dist/chunks/{pk-tab-panel-C6FxQw9q.js.map → pk-tab-panel-CkKU5-Ah.js.map} +1 -1
- package/dist/chunks/{pk-tabs-BTE63uK9.js → pk-tabs-BgEBki1q.js} +1 -1
- package/dist/chunks/{pk-tabs-BTE63uK9.js.map → pk-tabs-BgEBki1q.js.map} +1 -1
- package/dist/chunks/{pk-textarea-BcAyZYC-.js → pk-textarea-CYM2tK88.js} +3 -3
- package/dist/chunks/{pk-textarea-BcAyZYC-.js.map → pk-textarea-CYM2tK88.js.map} +1 -1
- package/dist/chunks/{pk-time-picker-5D4nmig2.js → pk-time-picker-DLUBYLFo.js} +3 -3
- package/dist/chunks/{pk-time-picker-5D4nmig2.js.map → pk-time-picker-DLUBYLFo.js.map} +1 -1
- package/dist/chunks/{pk-tiptap-content-BPd4GO6c.js → pk-tiptap-content-BwkqYVJb.js} +2 -2
- package/dist/chunks/{pk-tiptap-content-BPd4GO6c.js.map → pk-tiptap-content-BwkqYVJb.js.map} +1 -1
- package/dist/chunks/{pk-tiptap-editor-tG67Vegc.js → pk-tiptap-editor-De8UUTis.js} +12 -12
- package/dist/chunks/pk-tiptap-editor-De8UUTis.js.map +1 -0
- package/dist/chunks/{pk-tiptap-input-CtefNnaK.js → pk-tiptap-input-Y9eog9Zn.js} +3 -3
- package/dist/chunks/{pk-tiptap-input-CtefNnaK.js.map → pk-tiptap-input-Y9eog9Zn.js.map} +1 -1
- package/dist/chunks/{pk-toggle-CW-lflrh.js → pk-toggle-BthhH7vl.js} +1 -1
- package/dist/chunks/{pk-toggle-CW-lflrh.js.map → pk-toggle-BthhH7vl.js.map} +1 -1
- package/dist/chunks/{pk-toggle-group-BKymefo3.js → pk-toggle-group-D2Quux8D.js} +1 -1
- package/dist/chunks/{pk-toggle-group-BKymefo3.js.map → pk-toggle-group-D2Quux8D.js.map} +1 -1
- package/dist/chunks/{pk-tooltip-BoDq8YVe.js → pk-tooltip-Cmmc0916.js} +1 -1
- package/dist/chunks/{pk-tooltip-BoDq8YVe.js.map → pk-tooltip-Cmmc0916.js.map} +1 -1
- package/dist/chunks/{popup-content-animation.styles-Dc6d9quJ.js → popup-content-animation.styles-BnNiguJo.js} +1 -1
- package/dist/chunks/{popup-content-animation.styles-Dc6d9quJ.js.map → popup-content-animation.styles-BnNiguJo.js.map} +1 -1
- package/dist/chunks/{popup-pointer-DMnuZDQl.js → popup-pointer-CuLjk1th.js} +1 -1
- package/dist/chunks/{popup-pointer-DMnuZDQl.js.map → popup-pointer-CuLjk1th.js.map} +1 -1
- package/dist/chunks/{register-components-B-qCPFFh.js → register-components-BT9THgdh.js} +1 -1
- package/dist/chunks/{register-components-B-qCPFFh.js.map → register-components-BT9THgdh.js.map} +1 -1
- package/dist/chunks/{register-CQodpTWT.js → register-posLyX3U.js} +45 -45
- package/dist/chunks/{register-CQodpTWT.js.map → register-posLyX3U.js.map} +1 -1
- package/dist/chunks/{tiptap.styles-ChAfyVi9.js → tiptap.styles-CPRows--.js} +4 -3
- package/dist/chunks/tiptap.styles-CPRows--.js.map +1 -0
- package/dist/component-registry.d.ts.map +1 -1
- package/dist/components/autocomplete/index.d.ts +2 -0
- package/dist/components/autocomplete/index.d.ts.map +1 -0
- package/dist/components/autocomplete/pk-autocomplete.d.ts +150 -0
- package/dist/components/autocomplete/pk-autocomplete.d.ts.map +1 -0
- package/dist/components/autocomplete/pk-autocomplete.js +2 -0
- package/dist/components/autocomplete/pk-autocomplete.styles.d.ts +7 -0
- package/dist/components/autocomplete/pk-autocomplete.styles.d.ts.map +1 -0
- package/dist/components/autocomplete.d.ts +2 -0
- package/dist/components/autocomplete.js +2 -0
- package/dist/components/button/pk-button.d.ts +37 -1
- package/dist/components/button/pk-button.d.ts.map +1 -1
- package/dist/components/button/pk-button.js +1 -1
- package/dist/components/button.js +1 -1
- package/dist/components/calendar/pk-calendar.js +1 -1
- package/dist/components/calendar.js +1 -1
- package/dist/components/checkbox/pk-checkbox.js +1 -1
- package/dist/components/checkbox-select/pk-checkbox-select.js +1 -1
- package/dist/components/checkbox-select.js +1 -1
- package/dist/components/checkbox.js +1 -1
- package/dist/components/code-editor/pk-code-editor.js +1 -1
- package/dist/components/code-editor.js +1 -1
- package/dist/components/color-input/pk-color-input.js +1 -1
- package/dist/components/color-input.js +1 -1
- package/dist/components/combobox/pk-combobox.d.ts +8 -14
- package/dist/components/combobox/pk-combobox.d.ts.map +1 -1
- package/dist/components/combobox/pk-combobox.js +1 -1
- package/dist/components/combobox/pk-combobox.styles.d.ts.map +1 -1
- package/dist/components/combobox.js +1 -1
- package/dist/components/connect/pk-connect-oauth.js +3 -3
- package/dist/components/connect/pk-connect.js +4 -4
- package/dist/components/copy-button/pk-copy-button.d.ts +3 -0
- package/dist/components/copy-button/pk-copy-button.d.ts.map +1 -1
- package/dist/components/copy-button/pk-copy-button.js +1 -1
- package/dist/components/copy-button/pk-copy-button.styles.d.ts.map +1 -1
- package/dist/components/copy-button.js +1 -1
- package/dist/components/date-picker/pk-date-picker.js +1 -1
- package/dist/components/date-picker.js +1 -1
- package/dist/components/dialog/pk-dialog.js +1 -1
- package/dist/components/dialog.js +1 -1
- package/dist/components/dropdown-menu/pk-dropdown-item.js +1 -1
- package/dist/components/dropdown-menu/pk-dropdown-label.js +1 -1
- package/dist/components/dropdown-menu/pk-dropdown-menu.js +1 -1
- package/dist/components/dropdown-menu.js +3 -3
- package/dist/components/editable-table/editable-table-model.d.ts +4 -1
- package/dist/components/editable-table/editable-table-model.d.ts.map +1 -1
- package/dist/components/editable-table/pk-editable-table.d.ts +1 -1
- package/dist/components/editable-table/pk-editable-table.d.ts.map +1 -1
- package/dist/components/editable-table/pk-editable-table.js +1 -1
- package/dist/components/editable-table.js +1 -1
- package/dist/components/field/pk-field.js +1 -1
- package/dist/components/field.js +1 -1
- package/dist/components/icon/pk-icon.d.ts +3 -2
- package/dist/components/icon/pk-icon.d.ts.map +1 -1
- package/dist/components/icon/pk-icon.js.map +1 -1
- package/dist/components/image-browser/index.d.ts +2 -0
- package/dist/components/image-browser/index.d.ts.map +1 -0
- package/dist/components/image-browser/pk-image-browser.d.ts +190 -0
- package/dist/components/image-browser/pk-image-browser.d.ts.map +1 -0
- package/dist/components/image-browser/pk-image-browser.js +2 -0
- package/dist/components/image-browser/pk-image-browser.styles.d.ts +6 -0
- package/dist/components/image-browser/pk-image-browser.styles.d.ts.map +1 -0
- package/dist/components/image-browser.d.ts +2 -0
- package/dist/components/image-browser.js +2 -0
- package/dist/components/input/pk-input.d.ts +2 -1
- package/dist/components/input/pk-input.d.ts.map +1 -1
- package/dist/components/input/pk-input.js +1 -1
- package/dist/components/input/pk-input.styles.d.ts.map +1 -1
- package/dist/components/input-group/pk-input-group-addon.js +1 -1
- package/dist/components/input-group/pk-input-group-button.js +1 -1
- package/dist/components/input-group/pk-input-group-input.js +1 -1
- package/dist/components/input-group/pk-input-group-text.js +1 -1
- package/dist/components/input-group/pk-input-group-textarea.js +1 -1
- package/dist/components/input-group/pk-input-group.js +1 -1
- package/dist/components/input-group.js +6 -6
- package/dist/components/input.js +1 -1
- package/dist/components/lightswitch/pk-lightswitch.js +1 -1
- package/dist/components/lightswitch.js +1 -1
- package/dist/components/popover/pk-popover.js +1 -1
- package/dist/components/popover.js +1 -1
- package/dist/components/radio-group/pk-radio-group.js +1 -1
- package/dist/components/radio-group/pk-radio.js +1 -1
- package/dist/components/radio-group.js +2 -2
- package/dist/components/scroll-area/pk-scroll-area.js +1 -1
- package/dist/components/scroll-area.js +1 -1
- package/dist/components/select/pk-option-group.d.ts +3 -1
- package/dist/components/select/pk-option-group.d.ts.map +1 -1
- package/dist/components/select/pk-option-group.js +1 -1
- package/dist/components/select/pk-option.d.ts +10 -1
- package/dist/components/select/pk-option.d.ts.map +1 -1
- package/dist/components/select/pk-option.js +1 -1
- package/dist/components/select/pk-select.d.ts +42 -3
- package/dist/components/select/pk-select.d.ts.map +1 -1
- package/dist/components/select/pk-select.js +1 -1
- package/dist/components/select.js +3 -3
- package/dist/components/separator/pk-separator.js +1 -1
- package/dist/components/separator.js +1 -1
- package/dist/components/status/pk-status.js +1 -1
- package/dist/components/status.js +1 -1
- package/dist/components/tabs/pk-tab-heading.js +1 -1
- package/dist/components/tabs/pk-tab-panel.js +1 -1
- package/dist/components/tabs/pk-tab.js +1 -1
- package/dist/components/tabs/pk-tabs.js +1 -1
- package/dist/components/tabs.js +4 -4
- package/dist/components/textarea/pk-textarea.js +1 -1
- package/dist/components/textarea.js +1 -1
- package/dist/components/time-picker/pk-time-picker.js +1 -1
- package/dist/components/time-picker.js +1 -1
- package/dist/components/tiptap/pk-tiptap-content.js +1 -1
- package/dist/components/tiptap/pk-tiptap-editor.js +1 -1
- package/dist/components/tiptap/pk-tiptap-input.js +1 -1
- package/dist/components/tiptap/variable-tag-node-view.d.ts.map +1 -1
- package/dist/components/tiptap-content.js +1 -1
- package/dist/components/tiptap-editor.js +1 -1
- package/dist/components/tiptap-input.js +1 -1
- package/dist/components/toggle/pk-toggle.js +1 -1
- package/dist/components/toggle-group/pk-toggle-group.js +1 -1
- package/dist/components/toggle-group.js +1 -1
- package/dist/components/toggle.js +1 -1
- package/dist/components/tooltip/pk-tooltip.js +1 -1
- package/dist/components/tooltip.js +1 -1
- package/dist/connect/register-cp-connect.js +3 -3
- package/dist/index.js +49 -49
- package/dist/internal/sync-filtered-options.d.ts +23 -0
- package/dist/internal/sync-filtered-options.d.ts.map +1 -0
- package/dist/plugin-kit.css +2 -0
- package/dist/plugin-kit.js +2 -2
- package/dist/register-components.js +1 -1
- package/dist/register-pk.generated.d.ts +4 -0
- package/dist/register-pk.generated.d.ts.map +1 -1
- package/dist/register.js +47 -47
- package/dist/utilities/fouce.css +2 -0
- package/dist/utils/async-option-fetch.d.ts +38 -0
- package/dist/utils/async-option-fetch.d.ts.map +1 -0
- package/dist/utils/option-filter.d.ts +11 -0
- package/dist/utils/option-filter.d.ts.map +1 -0
- package/dist/utils/popup-content-exit.d.ts +6 -0
- package/dist/utils/popup-content-exit.d.ts.map +1 -0
- package/dist-loader/chunks/option-filter-Z7bomRrK.js +119 -0
- package/dist-loader/chunks/{pk-base-B21zXxSo.js → pk-base-CyzwylQ7.js} +13 -1
- package/dist-loader/chunks/{pk-button-Dh4gjLHw.js → pk-button-dngp-vOd.js} +10 -6
- package/dist-loader/chunks/{pk-calendar-n1bwSO7X.js → pk-calendar-BE4HRfCq.js} +3 -3
- package/dist-loader/chunks/{pk-checkbox-BrZQB816.js → pk-checkbox-B3d4nkBx.js} +1 -1
- package/dist-loader/chunks/{pk-color-input-sS05YOwT.js → pk-color-input-CD-r_sfG.js} +1 -1
- package/dist-loader/chunks/{pk-combobox-B7q6alzE.js → pk-combobox-DMBKXPLB.js} +48 -91
- package/dist-loader/chunks/{pk-date-picker-Dni5ty79.js → pk-date-picker-wntQmeIM.js} +5 -5
- package/dist-loader/chunks/{pk-dialog-BpPRqFMm.js → pk-dialog-B6lzsRur.js} +3 -3
- package/dist-loader/chunks/{pk-dropdown-item-CHkFNlA9.js → pk-dropdown-item-DJ5TeF1r.js} +3 -3
- package/dist-loader/chunks/{pk-dropdown-menu-BHVOMNV1.js → pk-dropdown-menu-B87bsdlI.js} +3 -3
- package/dist-loader/chunks/{pk-field-CJ09ll1S.js → pk-field-D_SNOJpl.js} +4 -4
- package/dist-loader/chunks/{pk-icon-WHUu7wxk.js → pk-icon-B5ob3JdK.js} +2 -2
- package/dist-loader/chunks/{pk-input-CEw3AdYt.js → pk-input-BhU0PiCk.js} +74 -28
- package/dist-loader/chunks/{pk-lightswitch-DJEUScgo.js → pk-lightswitch-DRxY8511.js} +1 -1
- package/dist-loader/chunks/{pk-option-CunPIei0.js → pk-option-Cc6QWw-0.js} +5 -4
- package/dist-loader/chunks/{pk-popup-FDdBxb4k.js → pk-popup-BooGjXgH.js} +1 -1
- package/dist-loader/chunks/{pk-select-CbAaQ7uE.js → pk-select-BG8qPsBd.js} +6 -4
- package/dist-loader/chunks/{pk-spinner-CIbXjDnp.js → pk-spinner-BKU9Rf2R.js} +1 -1
- package/dist-loader/chunks/{pk-status-BRIVW7EH.js → pk-status-D3ArH2ui.js} +1 -1
- package/dist-loader/chunks/{pk-textarea-C_rOUtFS.js → pk-textarea-CC7rA5A7.js} +1 -1
- package/dist-loader/chunks/{pk-time-picker-Dr3uvbvc.js → pk-time-picker-CDVFNhN7.js} +5 -5
- package/dist-loader/chunks/{pk-tooltip-HwZ0zRd2.js → pk-tooltip-BS2dNLOS.js} +2 -2
- package/dist-loader/chunks/{render-Niz5wYRa.js → render-BKfL_WRl.js} +1 -1
- package/dist-loader/chunks/{svg-_Mtb7CHx.js → svg-BiAlXtCn.js} +5 -3
- package/dist-loader/chunks/{tiptap.styles-BIRIMP7I.js → tiptap.styles-BFGP4eTV.js} +3 -2
- package/dist-loader/components/autocomplete/autocomplete.js +984 -0
- package/dist-loader/components/button/button.js +1 -1
- package/dist-loader/components/button-group/button-group-separator.js +1 -1
- package/dist-loader/components/button-group/button-group-text.js +1 -1
- package/dist-loader/components/button-group/button-group.js +1 -1
- package/dist-loader/components/calendar/calendar.js +1 -1
- package/dist-loader/components/checkbox/checkbox.js +1 -1
- package/dist-loader/components/checkbox-select/checkbox-select.js +2 -2
- package/dist-loader/components/code-editor/code-editor.js +1 -1
- package/dist-loader/components/color-input/color-input.js +1 -1
- package/dist-loader/components/combobox/combobox.js +1 -1
- package/dist-loader/components/connect/connect-oauth.js +3 -3
- package/dist-loader/components/connect/connect.js +5 -5
- package/dist-loader/components/copy-button/copy-button.js +48 -7
- package/dist-loader/components/date-picker/date-picker.js +1 -1
- package/dist-loader/components/dialog/dialog.js +1 -1
- package/dist-loader/components/dropdown-menu/dropdown-item.js +1 -1
- package/dist-loader/components/dropdown-menu/dropdown-label.js +1 -1
- package/dist-loader/components/dropdown-menu/dropdown-menu.js +1 -1
- package/dist-loader/components/dropdown-menu/dropdown-separator.js +1 -1
- package/dist-loader/components/editable-table/editable-table.js +18 -20
- package/dist-loader/components/field/field.js +1 -1
- package/dist-loader/components/icon/icon.js +2 -2
- package/dist-loader/components/image-browser/image-browser.js +1356 -0
- package/dist-loader/components/input/input.js +1 -1
- package/dist-loader/components/input-group/input-group-addon.js +1 -1
- package/dist-loader/components/input-group/input-group-button.js +1 -1
- package/dist-loader/components/input-group/input-group-input.js +1 -1
- package/dist-loader/components/input-group/input-group-text.js +1 -1
- package/dist-loader/components/input-group/input-group-textarea.js +1 -1
- package/dist-loader/components/input-group/input-group.js +1 -1
- package/dist-loader/components/lightswitch/lightswitch.js +1 -1
- package/dist-loader/components/popover/popover.js +2 -2
- package/dist-loader/components/popup/popup.js +1 -1
- package/dist-loader/components/radio-group/radio-group.js +1 -1
- package/dist-loader/components/radio-group/radio.js +1 -1
- package/dist-loader/components/scroll-area/scroll-area.js +1 -1
- package/dist-loader/components/select/option-group.js +1 -1
- package/dist-loader/components/select/option.js +1 -1
- package/dist-loader/components/select/select.js +1 -1
- package/dist-loader/components/separator/separator.js +1 -1
- package/dist-loader/components/spinner/spinner.js +1 -1
- package/dist-loader/components/status/status.js +1 -1
- package/dist-loader/components/tabs/tab-heading.js +1 -1
- package/dist-loader/components/tabs/tab-panel.js +1 -1
- package/dist-loader/components/tabs/tab.js +1 -1
- package/dist-loader/components/tabs/tabs.js +1 -1
- package/dist-loader/components/textarea/textarea.js +1 -1
- package/dist-loader/components/time-picker/time-picker.js +1 -1
- package/dist-loader/components/tiptap/tiptap-content.js +2 -2
- package/dist-loader/components/tiptap/tiptap-editor.js +13 -13
- package/dist-loader/components/tiptap/tiptap-input.js +2 -2
- package/dist-loader/components/toggle/toggle.js +1 -1
- package/dist-loader/components/toggle-group/toggle-group.js +1 -1
- package/dist-loader/components/tooltip/tooltip.js +1 -1
- package/dist-loader/plugin-kit.css +2 -0
- package/dist-loader/plugin-kit.loader.js +4 -0
- package/dist-loader/utilities/fouce.css +2 -0
- package/package.json +53 -9
- package/dist/chunks/component-registry-CNB8PbP_.js.map +0 -1
- package/dist/chunks/pk-combobox-BLft8AXy.js.map +0 -1
- package/dist/chunks/pk-copy-button-asOLQkqk.js.map +0 -1
- package/dist/chunks/pk-editable-table-Cn4WXqAo.js.map +0 -1
- package/dist/chunks/pk-form-associated-element-9M2NzOE2.js.map +0 -1
- package/dist/chunks/pk-input-DDkIXOkt.js.map +0 -1
- package/dist/chunks/pk-option-MGj9SKOK.js.map +0 -1
- package/dist/chunks/pk-select-C1s0OJr0.js.map +0 -1
- package/dist/chunks/pk-tiptap-editor-tG67Vegc.js.map +0 -1
- package/dist/chunks/tiptap.styles-ChAfyVi9.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pk-tabs-BTE63uK9.js","names":[],"sources":["../../src/components/tabs/pk-tabs.styles.ts","../../src/components/tabs/pk-tabs.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * Variant tokens are defined on `pk-tabs` and inherited by slotted\n * `pk-tab` / `pk-tab-panel` shadow roots (custom properties pierce shadow DOM).\n */\nexport const pkTabsStyles = css`\n @layer pk-component {\n :host {\n display: block;\n max-width: 100%;\n font-family: var(--pk-font-family);\n font-size: var(--pk-font-size-base);\n line-height: var(--pk-line-height);\n /* Frame chrome on the host (matches v1 PaneTabs root) so consumer\n * overflow utilities on the host do not clip the pane shadow. */\n border-radius: var(--pk-tabs-root-radius);\n box-shadow: var(--pk-tabs-root-shadow);\n overflow: var(--pk-tabs-root-overflow);\n\n /* Root */\n --pk-tabs-root-gap: 0.75rem;\n --pk-tabs-root-height: auto;\n --pk-tabs-root-radius: 0;\n --pk-tabs-root-shadow: none;\n --pk-tabs-root-overflow: visible;\n\n /* List */\n --pk-tabs-list-display: inline-flex;\n --pk-tabs-list-width: fit-content;\n --pk-tabs-list-align-self: flex-start;\n --pk-tabs-list-align-items: center;\n --pk-tabs-list-padding: 2px;\n --pk-tabs-list-border-width: 1px;\n --pk-tabs-list-border-color: var(--pk-color-gray-150);\n --pk-tabs-list-border-bottom: var(--pk-tabs-list-border-width) solid var(--pk-tabs-list-border-color);\n --pk-tabs-list-radius: var(--pk-radius-md);\n --pk-tabs-list-bg: color-mix(in oklab, var(--pk-color-gray-100) 90%, transparent);\n --pk-tabs-list-shadow: 0 1px 2px rgba(31, 41, 51, 0.06);\n /* Transparent no-op — keyword none in a multi-shadow list invalidates the whole property. */\n --pk-tabs-list-inset-shadow: 0 0 #0000;\n --pk-tabs-list-color: var(--pk-color-gray-500);\n --pk-tabs-list-overflow-x: auto;\n --pk-tabs-list-overflow-y: visible;\n\n /* Trigger (inherited by pk-tab) */\n --pk-tabs-trigger-display: inline-flex;\n --pk-tabs-trigger-justify: center;\n --pk-tabs-trigger-width: auto;\n --pk-tabs-trigger-gap: 0.5rem;\n --pk-tabs-trigger-min-height: 2rem;\n --pk-tabs-trigger-padding-block: 0.375rem;\n --pk-tabs-trigger-padding-inline: 0.75rem;\n --pk-tabs-trigger-radius: var(--pk-radius-sm);\n --pk-tabs-trigger-color: inherit;\n --pk-tabs-trigger-font-size: 13px;\n --pk-tabs-trigger-font-weight: 400;\n --pk-tabs-trigger-text-align: center;\n --pk-tabs-trigger-text-transform: none;\n --pk-tabs-trigger-border-top: 0 solid transparent;\n --pk-tabs-trigger-hover-bg: rgb(255 255 255 / 0.7);\n --pk-tabs-trigger-hover-color: var(--pk-color-gray-700);\n --pk-tabs-trigger-selected-hover-bg: var(--pk-tabs-trigger-selected-bg, var(--pk-color-white));\n --pk-tabs-trigger-selected-hover-color: var(--pk-tabs-trigger-selected-color, var(--pk-color-gray-800));\n --pk-tabs-trigger-selected-bg: var(--pk-color-white);\n --pk-tabs-trigger-selected-color: var(--pk-color-gray-800);\n --pk-tabs-trigger-selected-shadow: 0 1px 2px rgba(31, 41, 51, 0.12);\n --pk-tabs-trigger-selected-radius: var(--pk-radius-sm);\n --pk-tabs-trigger-selected-border-top: 0 solid transparent;\n --pk-tabs-trigger-underline-height: 0;\n --pk-tabs-trigger-underline-inset: 15px;\n --pk-tabs-trigger-label-flex: 0 1 auto;\n --pk-tabs-trigger-icon-size: 1.125rem;\n --pk-tabs-trigger-icon-color: inherit;\n --pk-tabs-trigger-status-margin: 0;\n --pk-tabs-trigger-status-color: inherit;\n\n /* Group headings (pk-tab-heading) */\n --pk-tabs-heading-padding: 0.75rem 0.5rem 0.375rem;\n --pk-tabs-heading-color: var(--pk-color-gray-400);\n --pk-tabs-heading-font-size: 11px;\n --pk-tabs-heading-font-weight: 600;\n --pk-tabs-heading-letter-spacing: 0.04em;\n --pk-tabs-heading-text-transform: uppercase;\n\n /* Panel (inherited by pk-tab-panel) */\n --pk-tabs-panel-flex: none;\n --pk-tabs-panel-min-height: 0;\n --pk-tabs-panel-padding: 0;\n --pk-tabs-panel-bg: transparent;\n --pk-tabs-panel-radius: 0;\n --pk-tabs-panel-font-size: var(--pk-font-size-base);\n }\n\n :host([variant='pane']),\n :host([variant='modal']),\n :host([variant='sidebar']) {\n height: 100%;\n min-height: 0;\n --pk-tabs-root-height: 100%;\n }\n\n .tabs {\n display: flex;\n flex-direction: column;\n gap: var(--pk-tabs-root-gap);\n height: var(--pk-tabs-root-height);\n min-height: 0;\n /* Radius/shadow/overflow live on :host — keep the layout shell fill-only. */\n }\n\n .tabs[data-placement='bottom'] {\n flex-direction: column-reverse;\n }\n\n .tabs[data-placement='start'],\n .tabs[data-placement='end'] {\n flex-direction: row;\n align-items: flex-start;\n gap: 1rem;\n }\n\n .tabs[data-placement='end'] {\n flex-direction: row-reverse;\n }\n\n .tabs[data-placement='start'] .list,\n .tabs[data-placement='end'] .list {\n flex-direction: column;\n align-self: stretch;\n }\n\n .list {\n display: var(--pk-tabs-list-display);\n width: var(--pk-tabs-list-width);\n max-width: 100%;\n align-self: var(--pk-tabs-list-align-self);\n align-items: var(--pk-tabs-list-align-items);\n justify-content: flex-start;\n /* Tab strip must not shrink when panels flex-fill the column — otherwise\n * overflow-y clips trigger padding and the modal active underline. */\n flex-shrink: 0;\n position: relative;\n z-index: var(--pk-tabs-list-z-index, auto);\n isolation: isolate;\n padding: var(--pk-tabs-list-padding);\n border: var(--pk-tabs-list-border-width) solid var(--pk-tabs-list-border-color);\n border-bottom: var(--pk-tabs-list-border-bottom, var(--pk-tabs-list-border-width) solid var(--pk-tabs-list-border-color));\n border-radius: var(--pk-tabs-list-radius);\n background: var(--pk-tabs-list-bg);\n box-shadow: var(--pk-tabs-list-shadow), var(--pk-tabs-list-inset-shadow);\n color: var(--pk-tabs-list-color);\n overflow-x: var(--pk-tabs-list-overflow-x, auto);\n overflow-y: var(--pk-tabs-list-overflow-y, visible);\n }\n\n /* Pane — matches plugin-kit-react PaneTabs */\n :host([variant='pane']) {\n --pk-tabs-root-gap: 0;\n --pk-tabs-root-radius: var(--pk-radius-lg);\n --pk-tabs-root-shadow:\n 0 0 0 1px var(--pk-color-gray-200),\n 0 2px 12px rgb(205 216 228 / 50%);\n --pk-tabs-root-overflow: visible;\n\n --pk-tabs-list-display: flex;\n --pk-tabs-list-width: auto;\n --pk-tabs-list-align-self: stretch;\n --pk-tabs-list-align-items: flex-end;\n --pk-tabs-list-padding: 0;\n --pk-tabs-list-border-width: 0;\n --pk-tabs-list-radius: var(--pk-radius-lg) var(--pk-radius-lg) 0 0;\n --pk-tabs-list-bg: var(--pk-color-gray-50);\n /* Must not use keyword none — box-shadow: none, inset … is invalid and drops the hairline. */\n --pk-tabs-list-shadow: inset 0 -1px 0 0 rgb(154 165 177 / 25%);\n --pk-tabs-list-inset-shadow: 0 0 #0000;\n --pk-tabs-list-overflow-x: auto;\n --pk-tabs-list-overflow-y: visible;\n\n --pk-tabs-trigger-display: flex;\n --pk-tabs-trigger-justify: flex-start;\n --pk-tabs-trigger-min-height: 45px;\n --pk-tabs-trigger-padding-block: 0;\n --pk-tabs-trigger-padding-inline: 24px;\n --pk-tabs-trigger-radius: 0;\n --pk-tabs-trigger-border-top: 0 solid transparent;\n --pk-tabs-trigger-color: var(--pk-color-gray-550);\n --pk-tabs-trigger-font-size: var(--pk-font-size-base);\n --pk-tabs-trigger-font-weight: 400;\n --pk-tabs-trigger-hover-bg: var(--pk-color-slate-100);\n --pk-tabs-trigger-hover-color: var(--pk-color-gray-550);\n --pk-tabs-trigger-selected-bg: var(--pk-color-white);\n --pk-tabs-trigger-selected-color: var(--pk-color-gray-700);\n --pk-tabs-trigger-selected-border-top: 0 solid transparent;\n /* Match Craft .pane-tabs [role=tab].sel — inset top accent + elevation. */\n --pk-tabs-trigger-selected-shadow:\n inset 0 2px 0 var(--pk-color-gray-500),\n 0 0 0 1px rgb(51 64 77 / 10%),\n 0 2px 12px rgb(205 216 228 / 90%);\n --pk-tabs-trigger-selected-radius: 2px 2px 0 0;\n\n /* 0% basis — panel fills leftover height and scrolls; auto basis grew with\n * content and clipped under dialog overflow:hidden (Edit Buttons Appearance). */\n --pk-tabs-panel-flex: 1 1 0%;\n --pk-tabs-panel-min-height: 0;\n /*\n * No built-in panel inset — matches v1 PaneTabsContent (padding came from\n * the consumer: ReportTabPanel / FormBuilderTabContent / DefaultsPanel p-6).\n * A non-zero value here double-pads those surfaces.\n */\n --pk-tabs-panel-padding: 0;\n --pk-tabs-panel-bg: var(--pk-color-white);\n --pk-tabs-panel-radius: 0 0 var(--pk-radius-lg) var(--pk-radius-lg);\n --pk-tabs-panel-font-size: var(--pk-font-size-sm, 14px);\n }\n\n /* Craft bumps the first tab start corner to --radius-lg so the inset\n * accent follows the pane radius instead of reading as clipped at 2px.\n */\n :host([variant='pane']) ::slotted(pk-tab:first-child) {\n --pk-tabs-trigger-selected-radius: var(--pk-radius-lg) 2px 0 0;\n }\n\n /* Modal — matches plugin-kit-react ModalTabs */\n :host([variant='modal']) {\n --pk-tabs-root-gap: 0;\n --pk-tabs-root-height: 100%;\n /* Dialog already rounds the panel — host radius + overflow clips the\n * first tab’s focus ring into a one-corner “rounded border”. */\n --pk-tabs-root-radius: 0;\n /* Clip to the height chain so panels scroll inside, not through the footer. */\n --pk-tabs-root-overflow: hidden;\n\n --pk-tabs-list-display: flex;\n --pk-tabs-list-width: 100%;\n --pk-tabs-list-align-self: stretch;\n --pk-tabs-list-align-items: stretch;\n --pk-tabs-list-padding: 0;\n --pk-tabs-list-border-width: 0;\n --pk-tabs-list-border-bottom: 1px solid var(--pk-color-gray-100);\n --pk-tabs-list-radius: 0;\n --pk-tabs-list-bg: var(--pk-color-white);\n --pk-tabs-list-shadow: 0 1px 5px #cdd8e440;\n /* Transparent no-op — keyword none in a multi-shadow list invalidates the whole property. */\n --pk-tabs-list-inset-shadow: 0 0 #0000;\n --pk-tabs-list-color: inherit;\n --pk-tabs-list-overflow-x: auto;\n /* auto (not hidden): overflow-x:auto + overflow-y:hidden clips ~1 device\n * pixel of the bottom active underline, so the 2px sky bar reads as 1px. */\n --pk-tabs-list-overflow-y: auto;\n /* v1 ModalTabsList z-11 — keep the strip above scrolling panel content\n * (editable-table action columns, etc.) when body/panel scrolls. */\n --pk-tabs-list-z-index: 11;\n\n --pk-tabs-trigger-display: inline-flex;\n --pk-tabs-trigger-justify: center;\n --pk-tabs-trigger-min-height: auto;\n --pk-tabs-trigger-padding-block: 15px;\n --pk-tabs-trigger-padding-inline: 15px;\n --pk-tabs-trigger-radius: 0;\n --pk-tabs-trigger-color: #64788d;\n --pk-tabs-trigger-font-size: 12px;\n --pk-tabs-trigger-font-weight: 500;\n --pk-tabs-trigger-text-transform: uppercase;\n --pk-tabs-trigger-hover-bg: transparent;\n --pk-tabs-trigger-hover-color: var(--pk-color-sky-600);\n --pk-tabs-trigger-selected-bg: transparent;\n --pk-tabs-trigger-selected-color: #64788d;\n --pk-tabs-trigger-selected-hover-bg: transparent;\n --pk-tabs-trigger-selected-hover-color: var(--pk-color-sky-600);\n /* Active (mouse) = 15px-inset underline. Active + :focus-visible = screen3 box. */\n --pk-tabs-trigger-selected-shadow: none;\n --pk-tabs-trigger-selected-radius: 0;\n --pk-tabs-trigger-underline-height: 2px;\n --pk-tabs-trigger-underline-inset: 15px;\n --pk-tabs-trigger-focus-selected-shadow: inset 0 0 0 2px var(--pk-color-sky-600);\n --pk-tabs-trigger-focus-selected-underline-height: 0;\n\n /* 0% basis — panel fills leftover height and scrolls; auto basis grew with\n * content and clipped under dialog overflow:hidden (Edit Buttons Appearance). */\n --pk-tabs-panel-flex: 1 1 0%;\n --pk-tabs-panel-min-height: 0;\n --pk-tabs-panel-padding: 1rem;\n --pk-tabs-panel-bg: transparent;\n --pk-tabs-panel-radius: 0;\n --pk-tabs-panel-font-size: var(--pk-font-size-sm, 14px);\n }\n\n /* Sidebar — vertical nav list with optional icons, status, and headings */\n :host([variant='sidebar']) {\n --pk-tabs-root-gap: 0;\n --pk-tabs-root-radius: 0;\n --pk-tabs-root-shadow: none;\n --pk-tabs-root-overflow: visible;\n\n --pk-tabs-list-display: flex;\n --pk-tabs-list-width: var(--pk-tabs-sidebar-width, 14rem);\n --pk-tabs-list-align-self: stretch;\n --pk-tabs-list-align-items: stretch;\n --pk-tabs-list-padding: 0.5rem;\n --pk-tabs-list-border-width: 0;\n --pk-tabs-list-border-bottom: 0 solid transparent;\n --pk-tabs-list-radius: 0;\n --pk-tabs-list-bg: var(--pk-color-gray-100);\n --pk-tabs-list-shadow: 0 0 #0000;\n --pk-tabs-list-inset-shadow: 0 0 #0000;\n --pk-tabs-list-color: var(--pk-color-gray-600);\n --pk-tabs-list-overflow-x: hidden;\n --pk-tabs-list-overflow-y: auto;\n\n --pk-tabs-trigger-display: flex;\n --pk-tabs-trigger-justify: flex-start;\n --pk-tabs-trigger-width: 100%;\n /* Match Craft/Formie integrations nav: padding 7px 10px, 16px icons, content-sized height. */\n --pk-tabs-trigger-gap: 10px;\n --pk-tabs-trigger-min-height: 0;\n --pk-tabs-trigger-padding-block: 7px;\n --pk-tabs-trigger-padding-inline: 10px;\n --pk-tabs-trigger-radius: var(--pk-radius-md);\n --pk-tabs-trigger-color: var(--pk-color-gray-700);\n --pk-tabs-trigger-font-size: 13px;\n --pk-tabs-trigger-font-weight: 400;\n --pk-tabs-trigger-line-height: 1.2;\n --pk-tabs-trigger-text-align: start;\n --pk-tabs-trigger-text-transform: none;\n --pk-tabs-trigger-border-top: 0 solid transparent;\n --pk-tabs-trigger-hover-bg: color-mix(in oklab, var(--pk-color-gray-200) 70%, transparent);\n --pk-tabs-trigger-hover-color: var(--pk-color-gray-800);\n --pk-tabs-trigger-selected-bg: var(--pk-color-gray-500);\n --pk-tabs-trigger-selected-color: var(--pk-color-white);\n --pk-tabs-trigger-selected-hover-bg: var(--pk-color-gray-500);\n --pk-tabs-trigger-selected-hover-color: var(--pk-color-white);\n --pk-tabs-trigger-selected-shadow: none;\n --pk-tabs-trigger-selected-radius: var(--pk-radius-md);\n --pk-tabs-trigger-selected-border-top: 0 solid transparent;\n --pk-tabs-trigger-underline-height: 0;\n --pk-tabs-trigger-label-flex: 1 1 auto;\n --pk-tabs-trigger-icon-size: 16px;\n --pk-tabs-trigger-status-margin: auto;\n --pk-tabs-trigger-status-color: var(--pk-color-gray-400);\n\n --pk-tabs-heading-padding: 14px 10px 5px;\n --pk-tabs-heading-color: var(--pk-color-gray-400);\n --pk-tabs-heading-font-size: 11px;\n --pk-tabs-heading-font-weight: 600;\n --pk-tabs-heading-letter-spacing: 0.04em;\n --pk-tabs-heading-text-transform: uppercase;\n\n /* 0% basis — panel fills leftover height and scrolls; auto basis grew with\n * content and clipped under dialog overflow:hidden (Edit Buttons Appearance). */\n --pk-tabs-panel-flex: 1 1 0%;\n --pk-tabs-panel-min-height: 0;\n --pk-tabs-panel-padding: 1.25rem;\n --pk-tabs-panel-bg: var(--pk-color-white);\n --pk-tabs-panel-radius: 0;\n --pk-tabs-panel-font-size: var(--pk-font-size-base);\n }\n\n :host([variant='sidebar']) .tabs {\n flex-direction: row;\n align-items: stretch;\n gap: 0;\n }\n\n :host([variant='sidebar']) .tabs[data-placement='end'] {\n flex-direction: row-reverse;\n }\n\n :host([variant='sidebar']) .list {\n flex-direction: column;\n gap: 0.125rem;\n flex: none;\n }\n\n :host([variant='sidebar']) ::slotted(pk-tab) {\n display: block;\n width: 100%;\n }\n\n :host([variant='sidebar']) ::slotted(pk-tab-heading) {\n display: block;\n width: 100%;\n }\n\n /* First group heading sits closer to the list top edge */\n :host([variant='sidebar']) ::slotted(pk-tab-heading:first-child) {\n --pk-tabs-heading-padding: 10px 10px 5px;\n }\n\n /* Hollow inactive dots read better on the selected dark pill */\n :host([variant='sidebar']) ::slotted(pk-tab[selected]) {\n --pk-tabs-trigger-status-color: var(--pk-color-gray-300);\n }\n }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, state } from '../../decorators.js';\nimport type { PropertyValues } from 'lit';\n\nimport { uniqueId } from '../../a11y/focus.js';\nimport { PkElement } from '../../base/pk-element.js';\nimport type { PkTabBase } from './pk-tab-base.js';\nimport type { PkTabPanelBase } from './pk-tab-panel-base.js';\nimport { pkTabsStyles } from './pk-tabs.styles.js';\n\nexport type PkTabsVariant = 'default' | 'pane' | 'modal' | 'sidebar';\nexport type PkTabsOrientation = 'horizontal' | 'vertical';\nexport type PkTabsPlacement = 'top' | 'bottom' | 'start' | 'end';\nexport type PkTabsActivation = 'auto' | 'manual';\n\n/**\n * Tab group — coordinates slotted `pk-tab` (nav) and `pk-tab-panel` children.\n *\n * @slot nav - `pk-tab` triggers and optional `pk-tab-heading` group labels\n * @slot - `pk-tab-panel` content panels\n *\n * @event pk-change - Active tab changed.\n * @event pk-tab-show - A tab panel became visible.\n * @event pk-tab-hide - A tab panel became hidden.\n *\n * @csspart base - Root container\n * @csspart list - Tab list\n */\n@customElement('pk-tabs')\nexport class PkTabs extends PkElement {\n static override styles = pkTabsStyles;\n\n @property()\n value = '';\n\n /** Visual style — `default` (segmented), `pane`, `modal`, or `sidebar` (vertical nav). */\n @property({ reflect: true })\n variant: PkTabsVariant = 'default';\n\n @property({ reflect: true })\n orientation: PkTabsOrientation = 'horizontal';\n\n @property({ reflect: true })\n placement: PkTabsPlacement = 'top';\n\n /**\n * `manual` — arrow keys move focus only; Enter/Space activates (Base UI default).\n * `auto` — arrow keys activate tabs immediately.\n */\n @property({ reflect: true })\n activation: PkTabsActivation = 'manual';\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ attribute: 'aria-label' })\n ariaLabel: string | null = null;\n\n private readonly baseId = uniqueId('pk-tabs');\n\n @state()\n private tabs: PkTabBase[] = [];\n\n @state()\n private panels: PkTabPanelBase[] = [];\n\n @state()\n private focusedValue = '';\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener('pk-tab-select', this.handleTabSelect as EventListener);\n this.addEventListener('pk-tab-keydown', this.handleTabKeyDown as EventListener);\n }\n\n override disconnectedCallback(): void {\n this.removeEventListener('pk-tab-select', this.handleTabSelect as EventListener);\n this.removeEventListener('pk-tab-keydown', this.handleTabKeyDown as EventListener);\n super.disconnectedCallback();\n }\n\n override updated(changed: PropertyValues): void {\n if (changed.has('value') || changed.has('disabled') || changed.has('activation')) {\n if (changed.has('value')) {\n this.focusedValue = this.value;\n }\n\n this.applySelection();\n }\n }\n\n private syncTabs = (): void => {\n const slot = this.shadowRoot?.querySelector('slot[name=\"nav\"]') as HTMLSlotElement | null;\n\n if (!slot) {\n return;\n }\n\n this.tabs = slot.assignedElements({ flatten: true }).filter(\n (element) => element.tagName === 'PK-TAB',\n ) as PkTabBase[];\n\n this.ensureDefaultValue();\n this.applySelection();\n };\n\n private syncPanels = (): void => {\n const slot = this.shadowRoot?.querySelector('slot:not([name])') as HTMLSlotElement | null;\n\n if (!slot) {\n return;\n }\n\n this.panels = slot.assignedElements({ flatten: true }).filter(\n (element) => element.tagName === 'PK-TAB-PANEL',\n ) as PkTabPanelBase[];\n\n this.applySelection();\n };\n\n private ensureDefaultValue(): void {\n if (this.value || this.tabs.length === 0) {\n return;\n }\n\n const firstEnabled = this.tabs.find((tab) => !tab.disabled && !this.disabled);\n\n if (firstEnabled) {\n this.value = firstEnabled.value;\n this.focusedValue = this.value;\n }\n }\n\n private getEnabledTabs(): PkTabBase[] {\n return this.tabs.filter((tab) => !tab.disabled && !this.disabled);\n }\n\n /**\n * Sidebar is inherently a vertical nav list. Layout CSS and keyboard arrows\n * both follow this effective orientation so consumers can omit the attrs.\n */\n private getEffectiveOrientation(): PkTabsOrientation {\n return this.variant === 'sidebar' ? 'vertical' : this.orientation;\n }\n\n private getEffectivePlacement(): PkTabsPlacement {\n if (this.variant === 'sidebar') {\n return this.placement === 'top' || this.placement === 'bottom' ? 'start' : this.placement;\n }\n\n return this.placement;\n }\n\n private applySelection(): void {\n const previousValue = this.getAttribute('data-current-value') ?? '';\n const focusTarget = this.activation === 'manual' ? this.focusedValue : this.value;\n\n for (const tab of this.tabs) {\n const selected = tab.value === this.value;\n const tabId = `${this.baseId}-tab-${tab.value}`;\n const panelId = `${this.baseId}-panel-${tab.value}`;\n\n tab.selected = selected;\n tab.disabled = this.disabled || tab.hasAttribute('disabled');\n tab.focusIndex = tab.value === focusTarget ? 0 : -1;\n tab.panelId = panelId;\n tab.id = tabId;\n }\n\n for (const panel of this.panels) {\n const selected = panel.value === this.value;\n const tabId = `${this.baseId}-tab-${panel.value}`;\n const panelId = `${this.baseId}-panel-${panel.value}`;\n\n if (panel.hidden !== !selected) {\n if (selected) {\n this.dispatchEvent(new CustomEvent('pk-tab-show', {\n detail: { value: panel.value },\n bubbles: true,\n composed: true,\n }));\n } else if (previousValue === panel.value) {\n this.dispatchEvent(new CustomEvent('pk-tab-hide', {\n detail: { value: panel.value },\n bubbles: true,\n composed: true,\n }));\n }\n }\n\n panel.hidden = !selected;\n panel.tabId = tabId;\n panel.id = panelId;\n }\n\n this.setAttribute('data-current-value', this.value);\n }\n\n /**\n * `pk-tab-select` / `pk-tab-keydown` bubble + compose out of nested tab groups\n * (e.g. modal tabs inside a pane). Only own nav-slot tabs may drive this instance.\n */\n private isOwnTabEvent(event: Event): boolean {\n const target = event.target;\n\n return target instanceof HTMLElement\n && target.tagName === 'PK-TAB'\n && this.tabs.includes(target as PkTabBase);\n }\n\n private handleTabSelect = (event: CustomEvent<{ value: string }>): void => {\n if (!this.isOwnTabEvent(event) || this.disabled) {\n return;\n }\n\n // Nested groups stop here so ancestor `pk-tabs` never adopt foreign values.\n event.stopPropagation();\n\n const { value } = event.detail;\n\n if (value === this.value && this.activation === 'manual') {\n this.focusedValue = value;\n this.applySelection();\n return;\n }\n\n if (value === this.value) {\n return;\n }\n\n this.selectTab(value);\n };\n\n private selectTab(value: string): void {\n this.value = value;\n this.focusedValue = value;\n this.applySelection();\n\n this.dispatchEvent(new CustomEvent('pk-change', {\n detail: { value: this.value },\n bubbles: true,\n composed: true,\n }));\n }\n\n private handleTabKeyDown = (event: CustomEvent<{ event: KeyboardEvent; value: string }>): void => {\n if (!this.isOwnTabEvent(event)) {\n return;\n }\n\n event.stopPropagation();\n\n const keyboardEvent = event.detail.event;\n const enabled = this.getEnabledTabs();\n\n if (enabled.length === 0) {\n return;\n }\n\n const currentIndex = enabled.findIndex((tab) => tab.value === event.detail.value);\n\n if (currentIndex < 0) {\n return;\n }\n\n let nextIndex = currentIndex;\n const isHorizontal = this.getEffectiveOrientation() === 'horizontal';\n\n switch (keyboardEvent.key) {\n case 'ArrowDown':\n if (isHorizontal) {\n return;\n }\n keyboardEvent.preventDefault();\n nextIndex = currentIndex >= enabled.length - 1 ? 0 : currentIndex + 1;\n break;\n\n case 'ArrowUp':\n if (isHorizontal) {\n return;\n }\n keyboardEvent.preventDefault();\n nextIndex = currentIndex <= 0 ? enabled.length - 1 : currentIndex - 1;\n break;\n\n case 'ArrowRight':\n if (!isHorizontal) {\n return;\n }\n keyboardEvent.preventDefault();\n nextIndex = currentIndex >= enabled.length - 1 ? 0 : currentIndex + 1;\n break;\n\n case 'ArrowLeft':\n if (!isHorizontal) {\n return;\n }\n keyboardEvent.preventDefault();\n nextIndex = currentIndex <= 0 ? enabled.length - 1 : currentIndex - 1;\n break;\n\n case 'Home':\n keyboardEvent.preventDefault();\n nextIndex = 0;\n break;\n\n case 'End':\n keyboardEvent.preventDefault();\n nextIndex = enabled.length - 1;\n break;\n\n default:\n return;\n }\n\n const next = enabled[nextIndex];\n\n if (!next) {\n return;\n }\n\n if (this.activation === 'auto') {\n if (next.value !== this.value) {\n this.selectTab(next.value);\n } else {\n next.focusControl();\n }\n } else {\n this.focusedValue = next.value;\n this.applySelection();\n next.focusControl();\n }\n };\n\n override render() {\n const orientation = this.getEffectiveOrientation();\n const placement = this.getEffectivePlacement();\n\n return html`\n <div part=\"base\" class=\"tabs pk-tabs\" data-placement=${placement}>\n <div\n part=\"list\"\n class=\"list pk-tabs__list\"\n role=\"tablist\"\n aria-orientation=${orientation}\n aria-label=${this.ariaLabel ?? nothing}\n @slotchange=${this.syncTabs}\n >\n <slot name=\"nav\"></slot>\n </div>\n <slot @slotchange=${this.syncPanels}></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-tabs': PkTabs;\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"pk-tabs-BgEBki1q.js","names":[],"sources":["../../src/components/tabs/pk-tabs.styles.ts","../../src/components/tabs/pk-tabs.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * Variant tokens are defined on `pk-tabs` and inherited by slotted\n * `pk-tab` / `pk-tab-panel` shadow roots (custom properties pierce shadow DOM).\n */\nexport const pkTabsStyles = css`\n @layer pk-component {\n :host {\n display: block;\n max-width: 100%;\n font-family: var(--pk-font-family);\n font-size: var(--pk-font-size-base);\n line-height: var(--pk-line-height);\n /* Frame chrome on the host (matches v1 PaneTabs root) so consumer\n * overflow utilities on the host do not clip the pane shadow. */\n border-radius: var(--pk-tabs-root-radius);\n box-shadow: var(--pk-tabs-root-shadow);\n overflow: var(--pk-tabs-root-overflow);\n\n /* Root */\n --pk-tabs-root-gap: 0.75rem;\n --pk-tabs-root-height: auto;\n --pk-tabs-root-radius: 0;\n --pk-tabs-root-shadow: none;\n --pk-tabs-root-overflow: visible;\n\n /* List */\n --pk-tabs-list-display: inline-flex;\n --pk-tabs-list-width: fit-content;\n --pk-tabs-list-align-self: flex-start;\n --pk-tabs-list-align-items: center;\n --pk-tabs-list-padding: 2px;\n --pk-tabs-list-border-width: 1px;\n --pk-tabs-list-border-color: var(--pk-color-gray-150);\n --pk-tabs-list-border-bottom: var(--pk-tabs-list-border-width) solid var(--pk-tabs-list-border-color);\n --pk-tabs-list-radius: var(--pk-radius-md);\n --pk-tabs-list-bg: color-mix(in oklab, var(--pk-color-gray-100) 90%, transparent);\n --pk-tabs-list-shadow: 0 1px 2px rgba(31, 41, 51, 0.06);\n /* Transparent no-op — keyword none in a multi-shadow list invalidates the whole property. */\n --pk-tabs-list-inset-shadow: 0 0 #0000;\n --pk-tabs-list-color: var(--pk-color-gray-500);\n --pk-tabs-list-overflow-x: auto;\n --pk-tabs-list-overflow-y: visible;\n\n /* Trigger (inherited by pk-tab) */\n --pk-tabs-trigger-display: inline-flex;\n --pk-tabs-trigger-justify: center;\n --pk-tabs-trigger-width: auto;\n --pk-tabs-trigger-gap: 0.5rem;\n --pk-tabs-trigger-min-height: 2rem;\n --pk-tabs-trigger-padding-block: 0.375rem;\n --pk-tabs-trigger-padding-inline: 0.75rem;\n --pk-tabs-trigger-radius: var(--pk-radius-sm);\n --pk-tabs-trigger-color: inherit;\n --pk-tabs-trigger-font-size: 13px;\n --pk-tabs-trigger-font-weight: 400;\n --pk-tabs-trigger-text-align: center;\n --pk-tabs-trigger-text-transform: none;\n --pk-tabs-trigger-border-top: 0 solid transparent;\n --pk-tabs-trigger-hover-bg: rgb(255 255 255 / 0.7);\n --pk-tabs-trigger-hover-color: var(--pk-color-gray-700);\n --pk-tabs-trigger-selected-hover-bg: var(--pk-tabs-trigger-selected-bg, var(--pk-color-white));\n --pk-tabs-trigger-selected-hover-color: var(--pk-tabs-trigger-selected-color, var(--pk-color-gray-800));\n --pk-tabs-trigger-selected-bg: var(--pk-color-white);\n --pk-tabs-trigger-selected-color: var(--pk-color-gray-800);\n --pk-tabs-trigger-selected-shadow: 0 1px 2px rgba(31, 41, 51, 0.12);\n --pk-tabs-trigger-selected-radius: var(--pk-radius-sm);\n --pk-tabs-trigger-selected-border-top: 0 solid transparent;\n --pk-tabs-trigger-underline-height: 0;\n --pk-tabs-trigger-underline-inset: 15px;\n --pk-tabs-trigger-label-flex: 0 1 auto;\n --pk-tabs-trigger-icon-size: 1.125rem;\n --pk-tabs-trigger-icon-color: inherit;\n --pk-tabs-trigger-status-margin: 0;\n --pk-tabs-trigger-status-color: inherit;\n\n /* Group headings (pk-tab-heading) */\n --pk-tabs-heading-padding: 0.75rem 0.5rem 0.375rem;\n --pk-tabs-heading-color: var(--pk-color-gray-400);\n --pk-tabs-heading-font-size: 11px;\n --pk-tabs-heading-font-weight: 600;\n --pk-tabs-heading-letter-spacing: 0.04em;\n --pk-tabs-heading-text-transform: uppercase;\n\n /* Panel (inherited by pk-tab-panel) */\n --pk-tabs-panel-flex: none;\n --pk-tabs-panel-min-height: 0;\n --pk-tabs-panel-padding: 0;\n --pk-tabs-panel-bg: transparent;\n --pk-tabs-panel-radius: 0;\n --pk-tabs-panel-font-size: var(--pk-font-size-base);\n }\n\n :host([variant='pane']),\n :host([variant='modal']),\n :host([variant='sidebar']) {\n height: 100%;\n min-height: 0;\n --pk-tabs-root-height: 100%;\n }\n\n .tabs {\n display: flex;\n flex-direction: column;\n gap: var(--pk-tabs-root-gap);\n height: var(--pk-tabs-root-height);\n min-height: 0;\n /* Radius/shadow/overflow live on :host — keep the layout shell fill-only. */\n }\n\n .tabs[data-placement='bottom'] {\n flex-direction: column-reverse;\n }\n\n .tabs[data-placement='start'],\n .tabs[data-placement='end'] {\n flex-direction: row;\n align-items: flex-start;\n gap: 1rem;\n }\n\n .tabs[data-placement='end'] {\n flex-direction: row-reverse;\n }\n\n .tabs[data-placement='start'] .list,\n .tabs[data-placement='end'] .list {\n flex-direction: column;\n align-self: stretch;\n }\n\n .list {\n display: var(--pk-tabs-list-display);\n width: var(--pk-tabs-list-width);\n max-width: 100%;\n align-self: var(--pk-tabs-list-align-self);\n align-items: var(--pk-tabs-list-align-items);\n justify-content: flex-start;\n /* Tab strip must not shrink when panels flex-fill the column — otherwise\n * overflow-y clips trigger padding and the modal active underline. */\n flex-shrink: 0;\n position: relative;\n z-index: var(--pk-tabs-list-z-index, auto);\n isolation: isolate;\n padding: var(--pk-tabs-list-padding);\n border: var(--pk-tabs-list-border-width) solid var(--pk-tabs-list-border-color);\n border-bottom: var(--pk-tabs-list-border-bottom, var(--pk-tabs-list-border-width) solid var(--pk-tabs-list-border-color));\n border-radius: var(--pk-tabs-list-radius);\n background: var(--pk-tabs-list-bg);\n box-shadow: var(--pk-tabs-list-shadow), var(--pk-tabs-list-inset-shadow);\n color: var(--pk-tabs-list-color);\n overflow-x: var(--pk-tabs-list-overflow-x, auto);\n overflow-y: var(--pk-tabs-list-overflow-y, visible);\n }\n\n /* Pane — matches plugin-kit-react PaneTabs */\n :host([variant='pane']) {\n --pk-tabs-root-gap: 0;\n --pk-tabs-root-radius: var(--pk-radius-lg);\n --pk-tabs-root-shadow:\n 0 0 0 1px var(--pk-color-gray-200),\n 0 2px 12px rgb(205 216 228 / 50%);\n --pk-tabs-root-overflow: visible;\n\n --pk-tabs-list-display: flex;\n --pk-tabs-list-width: auto;\n --pk-tabs-list-align-self: stretch;\n --pk-tabs-list-align-items: flex-end;\n --pk-tabs-list-padding: 0;\n --pk-tabs-list-border-width: 0;\n --pk-tabs-list-radius: var(--pk-radius-lg) var(--pk-radius-lg) 0 0;\n --pk-tabs-list-bg: var(--pk-color-gray-50);\n /* Must not use keyword none — box-shadow: none, inset … is invalid and drops the hairline. */\n --pk-tabs-list-shadow: inset 0 -1px 0 0 rgb(154 165 177 / 25%);\n --pk-tabs-list-inset-shadow: 0 0 #0000;\n --pk-tabs-list-overflow-x: auto;\n --pk-tabs-list-overflow-y: visible;\n\n --pk-tabs-trigger-display: flex;\n --pk-tabs-trigger-justify: flex-start;\n --pk-tabs-trigger-min-height: 45px;\n --pk-tabs-trigger-padding-block: 0;\n --pk-tabs-trigger-padding-inline: 24px;\n --pk-tabs-trigger-radius: 0;\n --pk-tabs-trigger-border-top: 0 solid transparent;\n --pk-tabs-trigger-color: var(--pk-color-gray-550);\n --pk-tabs-trigger-font-size: var(--pk-font-size-base);\n --pk-tabs-trigger-font-weight: 400;\n --pk-tabs-trigger-hover-bg: var(--pk-color-slate-100);\n --pk-tabs-trigger-hover-color: var(--pk-color-gray-550);\n --pk-tabs-trigger-selected-bg: var(--pk-color-white);\n --pk-tabs-trigger-selected-color: var(--pk-color-gray-700);\n --pk-tabs-trigger-selected-border-top: 0 solid transparent;\n /* Match Craft .pane-tabs [role=tab].sel — inset top accent + elevation. */\n --pk-tabs-trigger-selected-shadow:\n inset 0 2px 0 var(--pk-color-gray-500),\n 0 0 0 1px rgb(51 64 77 / 10%),\n 0 2px 12px rgb(205 216 228 / 90%);\n --pk-tabs-trigger-selected-radius: 2px 2px 0 0;\n\n /* 0% basis — panel fills leftover height and scrolls; auto basis grew with\n * content and clipped under dialog overflow:hidden (Edit Buttons Appearance). */\n --pk-tabs-panel-flex: 1 1 0%;\n --pk-tabs-panel-min-height: 0;\n /*\n * No built-in panel inset — matches v1 PaneTabsContent (padding came from\n * the consumer: ReportTabPanel / FormBuilderTabContent / DefaultsPanel p-6).\n * A non-zero value here double-pads those surfaces.\n */\n --pk-tabs-panel-padding: 0;\n --pk-tabs-panel-bg: var(--pk-color-white);\n --pk-tabs-panel-radius: 0 0 var(--pk-radius-lg) var(--pk-radius-lg);\n --pk-tabs-panel-font-size: var(--pk-font-size-sm, 14px);\n }\n\n /* Craft bumps the first tab start corner to --radius-lg so the inset\n * accent follows the pane radius instead of reading as clipped at 2px.\n */\n :host([variant='pane']) ::slotted(pk-tab:first-child) {\n --pk-tabs-trigger-selected-radius: var(--pk-radius-lg) 2px 0 0;\n }\n\n /* Modal — matches plugin-kit-react ModalTabs */\n :host([variant='modal']) {\n --pk-tabs-root-gap: 0;\n --pk-tabs-root-height: 100%;\n /* Dialog already rounds the panel — host radius + overflow clips the\n * first tab’s focus ring into a one-corner “rounded border”. */\n --pk-tabs-root-radius: 0;\n /* Clip to the height chain so panels scroll inside, not through the footer. */\n --pk-tabs-root-overflow: hidden;\n\n --pk-tabs-list-display: flex;\n --pk-tabs-list-width: 100%;\n --pk-tabs-list-align-self: stretch;\n --pk-tabs-list-align-items: stretch;\n --pk-tabs-list-padding: 0;\n --pk-tabs-list-border-width: 0;\n --pk-tabs-list-border-bottom: 1px solid var(--pk-color-gray-100);\n --pk-tabs-list-radius: 0;\n --pk-tabs-list-bg: var(--pk-color-white);\n --pk-tabs-list-shadow: 0 1px 5px #cdd8e440;\n /* Transparent no-op — keyword none in a multi-shadow list invalidates the whole property. */\n --pk-tabs-list-inset-shadow: 0 0 #0000;\n --pk-tabs-list-color: inherit;\n --pk-tabs-list-overflow-x: auto;\n /* auto (not hidden): overflow-x:auto + overflow-y:hidden clips ~1 device\n * pixel of the bottom active underline, so the 2px sky bar reads as 1px. */\n --pk-tabs-list-overflow-y: auto;\n /* v1 ModalTabsList z-11 — keep the strip above scrolling panel content\n * (editable-table action columns, etc.) when body/panel scrolls. */\n --pk-tabs-list-z-index: 11;\n\n --pk-tabs-trigger-display: inline-flex;\n --pk-tabs-trigger-justify: center;\n --pk-tabs-trigger-min-height: auto;\n --pk-tabs-trigger-padding-block: 15px;\n --pk-tabs-trigger-padding-inline: 15px;\n --pk-tabs-trigger-radius: 0;\n --pk-tabs-trigger-color: #64788d;\n --pk-tabs-trigger-font-size: 12px;\n --pk-tabs-trigger-font-weight: 500;\n --pk-tabs-trigger-text-transform: uppercase;\n --pk-tabs-trigger-hover-bg: transparent;\n --pk-tabs-trigger-hover-color: var(--pk-color-sky-600);\n --pk-tabs-trigger-selected-bg: transparent;\n --pk-tabs-trigger-selected-color: #64788d;\n --pk-tabs-trigger-selected-hover-bg: transparent;\n --pk-tabs-trigger-selected-hover-color: var(--pk-color-sky-600);\n /* Active (mouse) = 15px-inset underline. Active + :focus-visible = screen3 box. */\n --pk-tabs-trigger-selected-shadow: none;\n --pk-tabs-trigger-selected-radius: 0;\n --pk-tabs-trigger-underline-height: 2px;\n --pk-tabs-trigger-underline-inset: 15px;\n --pk-tabs-trigger-focus-selected-shadow: inset 0 0 0 2px var(--pk-color-sky-600);\n --pk-tabs-trigger-focus-selected-underline-height: 0;\n\n /* 0% basis — panel fills leftover height and scrolls; auto basis grew with\n * content and clipped under dialog overflow:hidden (Edit Buttons Appearance). */\n --pk-tabs-panel-flex: 1 1 0%;\n --pk-tabs-panel-min-height: 0;\n --pk-tabs-panel-padding: 1rem;\n --pk-tabs-panel-bg: transparent;\n --pk-tabs-panel-radius: 0;\n --pk-tabs-panel-font-size: var(--pk-font-size-sm, 14px);\n }\n\n /* Sidebar — vertical nav list with optional icons, status, and headings */\n :host([variant='sidebar']) {\n --pk-tabs-root-gap: 0;\n --pk-tabs-root-radius: 0;\n --pk-tabs-root-shadow: none;\n --pk-tabs-root-overflow: visible;\n\n --pk-tabs-list-display: flex;\n --pk-tabs-list-width: var(--pk-tabs-sidebar-width, 14rem);\n --pk-tabs-list-align-self: stretch;\n --pk-tabs-list-align-items: stretch;\n --pk-tabs-list-padding: 0.5rem;\n --pk-tabs-list-border-width: 0;\n --pk-tabs-list-border-bottom: 0 solid transparent;\n --pk-tabs-list-radius: 0;\n --pk-tabs-list-bg: var(--pk-color-gray-100);\n --pk-tabs-list-shadow: 0 0 #0000;\n --pk-tabs-list-inset-shadow: 0 0 #0000;\n --pk-tabs-list-color: var(--pk-color-gray-600);\n --pk-tabs-list-overflow-x: hidden;\n --pk-tabs-list-overflow-y: auto;\n\n --pk-tabs-trigger-display: flex;\n --pk-tabs-trigger-justify: flex-start;\n --pk-tabs-trigger-width: 100%;\n /* Match Craft/Formie integrations nav: padding 7px 10px, 16px icons, content-sized height. */\n --pk-tabs-trigger-gap: 10px;\n --pk-tabs-trigger-min-height: 0;\n --pk-tabs-trigger-padding-block: 7px;\n --pk-tabs-trigger-padding-inline: 10px;\n --pk-tabs-trigger-radius: var(--pk-radius-md);\n --pk-tabs-trigger-color: var(--pk-color-gray-700);\n --pk-tabs-trigger-font-size: 13px;\n --pk-tabs-trigger-font-weight: 400;\n --pk-tabs-trigger-line-height: 1.2;\n --pk-tabs-trigger-text-align: start;\n --pk-tabs-trigger-text-transform: none;\n --pk-tabs-trigger-border-top: 0 solid transparent;\n --pk-tabs-trigger-hover-bg: color-mix(in oklab, var(--pk-color-gray-200) 70%, transparent);\n --pk-tabs-trigger-hover-color: var(--pk-color-gray-800);\n --pk-tabs-trigger-selected-bg: var(--pk-color-gray-500);\n --pk-tabs-trigger-selected-color: var(--pk-color-white);\n --pk-tabs-trigger-selected-hover-bg: var(--pk-color-gray-500);\n --pk-tabs-trigger-selected-hover-color: var(--pk-color-white);\n --pk-tabs-trigger-selected-shadow: none;\n --pk-tabs-trigger-selected-radius: var(--pk-radius-md);\n --pk-tabs-trigger-selected-border-top: 0 solid transparent;\n --pk-tabs-trigger-underline-height: 0;\n --pk-tabs-trigger-label-flex: 1 1 auto;\n --pk-tabs-trigger-icon-size: 16px;\n --pk-tabs-trigger-status-margin: auto;\n --pk-tabs-trigger-status-color: var(--pk-color-gray-400);\n\n --pk-tabs-heading-padding: 14px 10px 5px;\n --pk-tabs-heading-color: var(--pk-color-gray-400);\n --pk-tabs-heading-font-size: 11px;\n --pk-tabs-heading-font-weight: 600;\n --pk-tabs-heading-letter-spacing: 0.04em;\n --pk-tabs-heading-text-transform: uppercase;\n\n /* 0% basis — panel fills leftover height and scrolls; auto basis grew with\n * content and clipped under dialog overflow:hidden (Edit Buttons Appearance). */\n --pk-tabs-panel-flex: 1 1 0%;\n --pk-tabs-panel-min-height: 0;\n --pk-tabs-panel-padding: 1.25rem;\n --pk-tabs-panel-bg: var(--pk-color-white);\n --pk-tabs-panel-radius: 0;\n --pk-tabs-panel-font-size: var(--pk-font-size-base);\n }\n\n :host([variant='sidebar']) .tabs {\n flex-direction: row;\n align-items: stretch;\n gap: 0;\n }\n\n :host([variant='sidebar']) .tabs[data-placement='end'] {\n flex-direction: row-reverse;\n }\n\n :host([variant='sidebar']) .list {\n flex-direction: column;\n gap: 0.125rem;\n flex: none;\n }\n\n :host([variant='sidebar']) ::slotted(pk-tab) {\n display: block;\n width: 100%;\n }\n\n :host([variant='sidebar']) ::slotted(pk-tab-heading) {\n display: block;\n width: 100%;\n }\n\n /* First group heading sits closer to the list top edge */\n :host([variant='sidebar']) ::slotted(pk-tab-heading:first-child) {\n --pk-tabs-heading-padding: 10px 10px 5px;\n }\n\n /* Hollow inactive dots read better on the selected dark pill */\n :host([variant='sidebar']) ::slotted(pk-tab[selected]) {\n --pk-tabs-trigger-status-color: var(--pk-color-gray-300);\n }\n }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, state } from '../../decorators.js';\nimport type { PropertyValues } from 'lit';\n\nimport { uniqueId } from '../../a11y/focus.js';\nimport { PkElement } from '../../base/pk-element.js';\nimport type { PkTabBase } from './pk-tab-base.js';\nimport type { PkTabPanelBase } from './pk-tab-panel-base.js';\nimport { pkTabsStyles } from './pk-tabs.styles.js';\n\nexport type PkTabsVariant = 'default' | 'pane' | 'modal' | 'sidebar';\nexport type PkTabsOrientation = 'horizontal' | 'vertical';\nexport type PkTabsPlacement = 'top' | 'bottom' | 'start' | 'end';\nexport type PkTabsActivation = 'auto' | 'manual';\n\n/**\n * Tab group — coordinates slotted `pk-tab` (nav) and `pk-tab-panel` children.\n *\n * @slot nav - `pk-tab` triggers and optional `pk-tab-heading` group labels\n * @slot - `pk-tab-panel` content panels\n *\n * @event pk-change - Active tab changed.\n * @event pk-tab-show - A tab panel became visible.\n * @event pk-tab-hide - A tab panel became hidden.\n *\n * @csspart base - Root container\n * @csspart list - Tab list\n */\n@customElement('pk-tabs')\nexport class PkTabs extends PkElement {\n static override styles = pkTabsStyles;\n\n @property()\n value = '';\n\n /** Visual style — `default` (segmented), `pane`, `modal`, or `sidebar` (vertical nav). */\n @property({ reflect: true })\n variant: PkTabsVariant = 'default';\n\n @property({ reflect: true })\n orientation: PkTabsOrientation = 'horizontal';\n\n @property({ reflect: true })\n placement: PkTabsPlacement = 'top';\n\n /**\n * `manual` — arrow keys move focus only; Enter/Space activates (Base UI default).\n * `auto` — arrow keys activate tabs immediately.\n */\n @property({ reflect: true })\n activation: PkTabsActivation = 'manual';\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ attribute: 'aria-label' })\n ariaLabel: string | null = null;\n\n private readonly baseId = uniqueId('pk-tabs');\n\n @state()\n private tabs: PkTabBase[] = [];\n\n @state()\n private panels: PkTabPanelBase[] = [];\n\n @state()\n private focusedValue = '';\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener('pk-tab-select', this.handleTabSelect as EventListener);\n this.addEventListener('pk-tab-keydown', this.handleTabKeyDown as EventListener);\n }\n\n override disconnectedCallback(): void {\n this.removeEventListener('pk-tab-select', this.handleTabSelect as EventListener);\n this.removeEventListener('pk-tab-keydown', this.handleTabKeyDown as EventListener);\n super.disconnectedCallback();\n }\n\n override updated(changed: PropertyValues): void {\n if (changed.has('value') || changed.has('disabled') || changed.has('activation')) {\n if (changed.has('value')) {\n this.focusedValue = this.value;\n }\n\n this.applySelection();\n }\n }\n\n private syncTabs = (): void => {\n const slot = this.shadowRoot?.querySelector('slot[name=\"nav\"]') as HTMLSlotElement | null;\n\n if (!slot) {\n return;\n }\n\n this.tabs = slot.assignedElements({ flatten: true }).filter(\n (element) => element.tagName === 'PK-TAB',\n ) as PkTabBase[];\n\n this.ensureDefaultValue();\n this.applySelection();\n };\n\n private syncPanels = (): void => {\n const slot = this.shadowRoot?.querySelector('slot:not([name])') as HTMLSlotElement | null;\n\n if (!slot) {\n return;\n }\n\n this.panels = slot.assignedElements({ flatten: true }).filter(\n (element) => element.tagName === 'PK-TAB-PANEL',\n ) as PkTabPanelBase[];\n\n this.applySelection();\n };\n\n private ensureDefaultValue(): void {\n if (this.value || this.tabs.length === 0) {\n return;\n }\n\n const firstEnabled = this.tabs.find((tab) => !tab.disabled && !this.disabled);\n\n if (firstEnabled) {\n this.value = firstEnabled.value;\n this.focusedValue = this.value;\n }\n }\n\n private getEnabledTabs(): PkTabBase[] {\n return this.tabs.filter((tab) => !tab.disabled && !this.disabled);\n }\n\n /**\n * Sidebar is inherently a vertical nav list. Layout CSS and keyboard arrows\n * both follow this effective orientation so consumers can omit the attrs.\n */\n private getEffectiveOrientation(): PkTabsOrientation {\n return this.variant === 'sidebar' ? 'vertical' : this.orientation;\n }\n\n private getEffectivePlacement(): PkTabsPlacement {\n if (this.variant === 'sidebar') {\n return this.placement === 'top' || this.placement === 'bottom' ? 'start' : this.placement;\n }\n\n return this.placement;\n }\n\n private applySelection(): void {\n const previousValue = this.getAttribute('data-current-value') ?? '';\n const focusTarget = this.activation === 'manual' ? this.focusedValue : this.value;\n\n for (const tab of this.tabs) {\n const selected = tab.value === this.value;\n const tabId = `${this.baseId}-tab-${tab.value}`;\n const panelId = `${this.baseId}-panel-${tab.value}`;\n\n tab.selected = selected;\n tab.disabled = this.disabled || tab.hasAttribute('disabled');\n tab.focusIndex = tab.value === focusTarget ? 0 : -1;\n tab.panelId = panelId;\n tab.id = tabId;\n }\n\n for (const panel of this.panels) {\n const selected = panel.value === this.value;\n const tabId = `${this.baseId}-tab-${panel.value}`;\n const panelId = `${this.baseId}-panel-${panel.value}`;\n\n if (panel.hidden !== !selected) {\n if (selected) {\n this.dispatchEvent(new CustomEvent('pk-tab-show', {\n detail: { value: panel.value },\n bubbles: true,\n composed: true,\n }));\n } else if (previousValue === panel.value) {\n this.dispatchEvent(new CustomEvent('pk-tab-hide', {\n detail: { value: panel.value },\n bubbles: true,\n composed: true,\n }));\n }\n }\n\n panel.hidden = !selected;\n panel.tabId = tabId;\n panel.id = panelId;\n }\n\n this.setAttribute('data-current-value', this.value);\n }\n\n /**\n * `pk-tab-select` / `pk-tab-keydown` bubble + compose out of nested tab groups\n * (e.g. modal tabs inside a pane). Only own nav-slot tabs may drive this instance.\n */\n private isOwnTabEvent(event: Event): boolean {\n const target = event.target;\n\n return target instanceof HTMLElement\n && target.tagName === 'PK-TAB'\n && this.tabs.includes(target as PkTabBase);\n }\n\n private handleTabSelect = (event: CustomEvent<{ value: string }>): void => {\n if (!this.isOwnTabEvent(event) || this.disabled) {\n return;\n }\n\n // Nested groups stop here so ancestor `pk-tabs` never adopt foreign values.\n event.stopPropagation();\n\n const { value } = event.detail;\n\n if (value === this.value && this.activation === 'manual') {\n this.focusedValue = value;\n this.applySelection();\n return;\n }\n\n if (value === this.value) {\n return;\n }\n\n this.selectTab(value);\n };\n\n private selectTab(value: string): void {\n this.value = value;\n this.focusedValue = value;\n this.applySelection();\n\n this.dispatchEvent(new CustomEvent('pk-change', {\n detail: { value: this.value },\n bubbles: true,\n composed: true,\n }));\n }\n\n private handleTabKeyDown = (event: CustomEvent<{ event: KeyboardEvent; value: string }>): void => {\n if (!this.isOwnTabEvent(event)) {\n return;\n }\n\n event.stopPropagation();\n\n const keyboardEvent = event.detail.event;\n const enabled = this.getEnabledTabs();\n\n if (enabled.length === 0) {\n return;\n }\n\n const currentIndex = enabled.findIndex((tab) => tab.value === event.detail.value);\n\n if (currentIndex < 0) {\n return;\n }\n\n let nextIndex = currentIndex;\n const isHorizontal = this.getEffectiveOrientation() === 'horizontal';\n\n switch (keyboardEvent.key) {\n case 'ArrowDown':\n if (isHorizontal) {\n return;\n }\n keyboardEvent.preventDefault();\n nextIndex = currentIndex >= enabled.length - 1 ? 0 : currentIndex + 1;\n break;\n\n case 'ArrowUp':\n if (isHorizontal) {\n return;\n }\n keyboardEvent.preventDefault();\n nextIndex = currentIndex <= 0 ? enabled.length - 1 : currentIndex - 1;\n break;\n\n case 'ArrowRight':\n if (!isHorizontal) {\n return;\n }\n keyboardEvent.preventDefault();\n nextIndex = currentIndex >= enabled.length - 1 ? 0 : currentIndex + 1;\n break;\n\n case 'ArrowLeft':\n if (!isHorizontal) {\n return;\n }\n keyboardEvent.preventDefault();\n nextIndex = currentIndex <= 0 ? enabled.length - 1 : currentIndex - 1;\n break;\n\n case 'Home':\n keyboardEvent.preventDefault();\n nextIndex = 0;\n break;\n\n case 'End':\n keyboardEvent.preventDefault();\n nextIndex = enabled.length - 1;\n break;\n\n default:\n return;\n }\n\n const next = enabled[nextIndex];\n\n if (!next) {\n return;\n }\n\n if (this.activation === 'auto') {\n if (next.value !== this.value) {\n this.selectTab(next.value);\n } else {\n next.focusControl();\n }\n } else {\n this.focusedValue = next.value;\n this.applySelection();\n next.focusControl();\n }\n };\n\n override render() {\n const orientation = this.getEffectiveOrientation();\n const placement = this.getEffectivePlacement();\n\n return html`\n <div part=\"base\" class=\"tabs pk-tabs\" data-placement=${placement}>\n <div\n part=\"list\"\n class=\"list pk-tabs__list\"\n role=\"tablist\"\n aria-orientation=${orientation}\n aria-label=${this.ariaLabel ?? nothing}\n @slotchange=${this.syncTabs}\n >\n <slot name=\"nav\"></slot>\n </div>\n <slot @slotchange=${this.syncPanels}></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-tabs': PkTabs;\n }\n}\n"],"mappings":"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"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { a as query, i as property, o as state, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
|
|
2
2
|
import { n as syncStandaloneControlAria } from "./control-aria-B2QMq4ji.js";
|
|
3
|
-
import { t as PkFormAssociatedElement } from "./pk-form-associated-element-
|
|
3
|
+
import { t as PkFormAssociatedElement } from "./pk-form-associated-element-CCQALRGB.js";
|
|
4
4
|
import { t as MirrorValidator } from "./mirror-validator-DCjNYrrx.js";
|
|
5
5
|
import { t as RequiredValidator } from "./required-validator-CEg8dvjS.js";
|
|
6
6
|
import { t as HasSlotController } from "./has-slot-8BvCt_qo.js";
|
|
7
7
|
import { t as formControlStyles } from "./form-control.styles-BQdimE5o.js";
|
|
8
8
|
import { i as uniqueId } from "./focus-aa5dlv8k.js";
|
|
9
|
-
import { n as readLegacyInstructions, t as hasInstructionContent } from "./field-labels-
|
|
9
|
+
import { n as readLegacyInstructions, t as hasInstructionContent } from "./field-labels-CmuAW8Cl.js";
|
|
10
10
|
import { css, html, nothing } from "lit";
|
|
11
11
|
import { ifDefined } from "lit/directives/if-defined.js";
|
|
12
12
|
import { live } from "lit/directives/live.js";
|
|
@@ -338,4 +338,4 @@ PkTextarea = __decorate([customElement("pk-textarea")], PkTextarea);
|
|
|
338
338
|
//#endregion
|
|
339
339
|
export { PkTextarea as t };
|
|
340
340
|
|
|
341
|
-
//# sourceMappingURL=pk-textarea-
|
|
341
|
+
//# sourceMappingURL=pk-textarea-CYM2tK88.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pk-textarea-BcAyZYC-.js","names":[],"sources":["../../src/components/textarea/pk-textarea.styles.ts","../../src/components/textarea/pk-textarea.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkTextareaStyles = css`\n @layer pk-component {\n :host {\n display: block;\n width: 100%;\n font-family: var(--pk-font-family);\n font-size: var(--pk-font-size-base);\n line-height: var(--pk-line-height);\n }\n\n .textarea {\n display: block;\n width: 100%;\n min-height: 5rem;\n margin: 0;\n padding: 7px 10px;\n border: var(--pk-input-border);\n border-radius: var(--pk-textarea-border-radius, var(--pk-radius-md));\n background: var(--pk-input-bg);\n background-clip: padding-box;\n /* Craft CP body / field value text. */\n color: var(--pk-color-gray-700);\n font: inherit;\n line-height: 1.4;\n resize: vertical;\n appearance: none;\n box-sizing: border-box;\n outline: none;\n transition: border-color 0.12s ease, box-shadow 0.12s ease;\n }\n\n .textarea::placeholder {\n color: var(--pk-input-placeholder-color, var(--pk-color-gray-400));\n }\n\n /* Craft: focus is box-shadow only — do not also flip border-color (double ring). */\n :host(:not([invalid]):not(:state(user-invalid))) .textarea:focus,\n :host(:not([invalid]):not(:state(user-invalid))) .textarea:focus-visible,\n :host([data-state='focus-visible']:not([invalid]):not(:state(user-invalid))) .textarea {\n box-shadow: var(--pk-input-focus-shadow);\n }\n\n .textarea:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n background: var(--pk-color-gray-50);\n }\n\n :host([invalid]) .textarea,\n :host(:state(user-invalid)) .textarea {\n border-color: var(--pk-color-rose-600);\n }\n\n :host([invalid]) .textarea:focus,\n :host([invalid]) .textarea:focus-visible,\n :host([invalid][data-state='focus-visible']) .textarea,\n :host(:state(user-invalid)) .textarea:focus,\n :host(:state(user-invalid)) .textarea:focus-visible {\n box-shadow: var(--pk-input-invalid-focus-shadow);\n }\n\n /* Editable-table cells (v1): flush into the row and fill cell height.\n * Chain height through form-control — percentage on .textarea alone\n * doesn't resolve when the wrapper sizes to content (rows / min-height). */\n :host([fit-cell]),\n :host([data-editable-table-input]) {\n display: block;\n height: 100%;\n min-height: 100%;\n box-sizing: border-box;\n overflow: hidden;\n }\n\n :host([fit-cell]) .form-control,\n :host([data-editable-table-input]) .form-control {\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 100%;\n }\n\n :host([fit-cell]) .textarea,\n :host([data-editable-table-input]) .textarea {\n flex: 1 1 auto;\n border: none;\n border-radius: 0;\n background: transparent;\n box-shadow: none;\n height: 100%;\n min-height: 0;\n max-height: 100%;\n /* Match text-cell inset (v1 py-1.5 / px-2). 0.5rem block padding +\n * line-height 1.4 overflows the 34px et cell and shows a scrollbar\n * even for empty / single-line notes. */\n padding: 0.375rem 0.5rem;\n line-height: 1.25;\n overflow-x: hidden;\n overflow-y: auto;\n resize: none;\n }\n\n :host([fit-cell]:not([invalid]):not(:state(user-invalid))) .textarea:focus,\n :host([fit-cell]:not([invalid]):not(:state(user-invalid))) .textarea:focus-visible,\n :host([fit-cell][data-state='focus-visible']:not([invalid]):not(:state(user-invalid))) .textarea,\n :host([data-editable-table-input]:not([invalid]):not(:state(user-invalid))) .textarea:focus,\n :host([data-editable-table-input]:not([invalid]):not(:state(user-invalid))) .textarea:focus-visible,\n :host([data-editable-table-input][data-state='focus-visible']:not([invalid]):not(:state(user-invalid))) .textarea {\n border: none;\n box-shadow: inset 0 0 0 1px var(--pk-color-gray-200);\n }\n\n :host([fit-cell][invalid]) .textarea,\n :host([fit-cell]:state(user-invalid)) .textarea,\n :host([fit-cell][invalid]) .textarea:focus,\n :host([fit-cell][invalid]) .textarea:focus-visible,\n :host([fit-cell]:state(user-invalid)) .textarea:focus,\n :host([fit-cell]:state(user-invalid)) .textarea:focus-visible,\n :host([data-editable-table-input][invalid]) .textarea,\n :host([data-editable-table-input]:state(user-invalid)) .textarea,\n :host([data-editable-table-input][invalid]) .textarea:focus,\n :host([data-editable-table-input][invalid]) .textarea:focus-visible,\n :host([data-editable-table-input]:state(user-invalid)) .textarea:focus,\n :host([data-editable-table-input]:state(user-invalid)) .textarea:focus-visible {\n border: none;\n box-shadow: inset 0 0 0 1px var(--pk-color-rose-600);\n }\n }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, query, state } from '../../decorators.js';\nimport type { PropertyValues } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\n\nimport { formControlStyles } from '../../base/form-control.styles.js';\nimport { PkFormAssociatedElement } from '../../base/pk-form-associated-element.js';\nimport { uniqueId } from '../../a11y/focus.js';\nimport { HasSlotController } from '../../internal/has-slot.js';\nimport { syncStandaloneControlAria } from '../../internal/control-aria.js';\nimport { hasInstructionContent, readLegacyInstructions } from '../../internal/field-labels.js';\nimport { MirrorValidator, RequiredValidator } from '../../validators/index.js';\nimport { pkTextareaStyles } from './pk-textarea.styles.js';\n\nexport type PkTextareaSize = 'default' | 'sm';\n\n/**\n * Multiline text field — API, Craft visuals.\n *\n * @slot label\n * @slot instructions\n * @slot hint - Alias for `instructions`\n *\n * @csspart form-control - Wrapper\n * @csspart label - Label\n * @csspart instructions - Instructions\n * @csspart textarea - Native textarea\n */\n@customElement('pk-textarea')\nexport class PkTextarea extends PkFormAssociatedElement {\n static override styles = [formControlStyles, pkTextareaStyles];\n\n static override get validators() {\n return [...super.validators, MirrorValidator(), RequiredValidator()];\n }\n\n override assumeInteractionOn = ['blur', 'input'];\n\n private readonly hasSlotController = new HasSlotController(this, 'instructions', 'hint', 'label');\n\n private readonly controlId = uniqueId('pk-textarea');\n\n @query('textarea')\n override input!: HTMLTextAreaElement;\n\n @property()\n placeholder = '';\n\n private _value: string | null = null;\n\n get value(): string {\n if (this.valueHasChanged) {\n return this._value ?? '';\n }\n\n return this._value ?? this.defaultValue ?? '';\n }\n\n @state()\n set value(val: string | null) {\n const next = val ?? '';\n\n if (this._value === next) {\n return;\n }\n\n this.valueHasChanged = true;\n this._value = next;\n }\n\n @property({ attribute: 'value', reflect: true })\n defaultValue: string | null = null;\n\n @property({ reflect: true })\n size: PkTextareaSize = 'default';\n\n @property()\n label = '';\n\n @property()\n instructions = '';\n\n @property({ type: Boolean, reflect: true })\n readonly = false;\n\n @property({ type: Boolean, reflect: true })\n invalid = false;\n\n /** Flush + fill parent cell (editable tables). */\n @property({ type: Boolean, reflect: true, attribute: 'fit-cell' })\n fitCell = false;\n\n /** Native `rows` — use `1` in table cells so intrinsic height doesn't overflow. */\n @property({ type: Number })\n rows?: number;\n\n @property({ type: Number, attribute: 'max-length' })\n maxlength?: number;\n\n @property({ attribute: 'with-label', type: Boolean })\n withLabel = false;\n\n @property({ attribute: 'with-instructions', type: Boolean })\n withInstructions = false;\n\n override connectedCallback(): void {\n this.instructions = readLegacyInstructions(this, this.instructions);\n\n if (this.hasAttribute('with-hint')) {\n this.withInstructions = true;\n }\n\n super.connectedCallback();\n }\n\n protected override syncFormValue(): void {\n this.setValue(this.value || '');\n }\n\n protected override resetToDefaultValue(): void {\n this.valueHasChanged = false;\n this._value = null;\n }\n\n protected override restoreFormState(state: string | File | FormData | null): void {\n if (typeof state === 'string') {\n this.value = state;\n }\n }\n\n override formResetCallback(): void {\n this.valueHasChanged = false;\n this._value = null;\n\n if (this.input) {\n this.input.value = this.defaultValue ?? '';\n }\n\n super.formResetCallback();\n }\n\n override updated(changed: PropertyValues): void {\n if (changed.has('value') || changed.has('defaultValue')) {\n this.setState('blank', !this.value);\n }\n\n super.updated(changed);\n }\n\n protected override syncStandaloneAria(): void {\n if (!this.input) {\n return;\n }\n\n const hasLabel = this.hasLabelContent();\n const hasInstructions = this.hasInstructionsContent();\n\n syncStandaloneControlAria({\n control: this.input,\n labelId: `${this.controlId}-label`,\n instructionsId: `${this.controlId}-instructions`,\n hasLabel,\n hasInstructions,\n required: this.required,\n invalid: this.invalid || !this.internals.validity.valid,\n });\n }\n\n private hasLabelContent(): boolean {\n return Boolean(this.label) || this.hasSlotController.test('label', this.withLabel);\n }\n\n private hasInstructionsContent(): boolean {\n return hasInstructionContent(\n (name, flag) => this.hasSlotController.test(name, flag),\n this.instructions,\n this.withInstructions,\n );\n }\n\n focus(options?: FocusOptions): void {\n this.input?.focus(options);\n }\n\n blur(): void {\n this.input?.blur();\n }\n\n private handleInput(): void {\n this.value = this.input.value;\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n }\n\n private handleChange(event: Event): void {\n this.value = this.input.value;\n event.stopPropagation();\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n }\n\n override render() {\n const hasLabel = this.hasLabelContent();\n const hasInstructions = this.hasInstructionsContent();\n\n return html`\n <div part=\"form-control\" class=\"form-control\">\n ${hasLabel\n ? html`\n <label\n part=\"label\"\n class=\"form-control__label\"\n id=${`${this.controlId}-label`}\n for=${`${this.controlId}-control`}\n >\n <slot name=\"label\">${this.label}</slot>\n </label>\n `\n : nothing}\n\n ${hasInstructions\n ? html`\n <p\n part=\"instructions\"\n class=\"form-control__instructions\"\n id=${`${this.controlId}-instructions`}\n >\n <slot name=\"instructions\">${this.instructions}</slot>\n <slot name=\"hint\"></slot>\n </p>\n `\n : nothing}\n\n <textarea\n part=\"textarea\"\n class=\"textarea\"\n id=${hasLabel ? `${this.controlId}-control` : nothing}\n rows=${ifDefined(this.fitCell ? (this.rows ?? 1) : this.rows)}\n .value=${live(this.value)}\n placeholder=${this.placeholder || nothing}\n maxlength=${ifDefined(this.maxlength)}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n @input=${this.handleInput}\n @change=${this.handleChange}\n @focus=${() => this.dispatchEvent(new Event('focus', { bubbles: true, composed: true }))}\n @blur=${() => this.dispatchEvent(new Event('blur', { bubbles: true, composed: true }))}\n ></textarea>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-textarea': PkTextarea;\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"pk-textarea-CYM2tK88.js","names":[],"sources":["../../src/components/textarea/pk-textarea.styles.ts","../../src/components/textarea/pk-textarea.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkTextareaStyles = css`\n @layer pk-component {\n :host {\n display: block;\n width: 100%;\n font-family: var(--pk-font-family);\n font-size: var(--pk-font-size-base);\n line-height: var(--pk-line-height);\n }\n\n .textarea {\n display: block;\n width: 100%;\n min-height: 5rem;\n margin: 0;\n padding: 7px 10px;\n border: var(--pk-input-border);\n border-radius: var(--pk-textarea-border-radius, var(--pk-radius-md));\n background: var(--pk-input-bg);\n background-clip: padding-box;\n /* Craft CP body / field value text. */\n color: var(--pk-color-gray-700);\n font: inherit;\n line-height: 1.4;\n resize: vertical;\n appearance: none;\n box-sizing: border-box;\n outline: none;\n transition: border-color 0.12s ease, box-shadow 0.12s ease;\n }\n\n .textarea::placeholder {\n color: var(--pk-input-placeholder-color, var(--pk-color-gray-400));\n }\n\n /* Craft: focus is box-shadow only — do not also flip border-color (double ring). */\n :host(:not([invalid]):not(:state(user-invalid))) .textarea:focus,\n :host(:not([invalid]):not(:state(user-invalid))) .textarea:focus-visible,\n :host([data-state='focus-visible']:not([invalid]):not(:state(user-invalid))) .textarea {\n box-shadow: var(--pk-input-focus-shadow);\n }\n\n .textarea:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n background: var(--pk-color-gray-50);\n }\n\n :host([invalid]) .textarea,\n :host(:state(user-invalid)) .textarea {\n border-color: var(--pk-color-rose-600);\n }\n\n :host([invalid]) .textarea:focus,\n :host([invalid]) .textarea:focus-visible,\n :host([invalid][data-state='focus-visible']) .textarea,\n :host(:state(user-invalid)) .textarea:focus,\n :host(:state(user-invalid)) .textarea:focus-visible {\n box-shadow: var(--pk-input-invalid-focus-shadow);\n }\n\n /* Editable-table cells (v1): flush into the row and fill cell height.\n * Chain height through form-control — percentage on .textarea alone\n * doesn't resolve when the wrapper sizes to content (rows / min-height). */\n :host([fit-cell]),\n :host([data-editable-table-input]) {\n display: block;\n height: 100%;\n min-height: 100%;\n box-sizing: border-box;\n overflow: hidden;\n }\n\n :host([fit-cell]) .form-control,\n :host([data-editable-table-input]) .form-control {\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 100%;\n }\n\n :host([fit-cell]) .textarea,\n :host([data-editable-table-input]) .textarea {\n flex: 1 1 auto;\n border: none;\n border-radius: 0;\n background: transparent;\n box-shadow: none;\n height: 100%;\n min-height: 0;\n max-height: 100%;\n /* Match text-cell inset (v1 py-1.5 / px-2). 0.5rem block padding +\n * line-height 1.4 overflows the 34px et cell and shows a scrollbar\n * even for empty / single-line notes. */\n padding: 0.375rem 0.5rem;\n line-height: 1.25;\n overflow-x: hidden;\n overflow-y: auto;\n resize: none;\n }\n\n :host([fit-cell]:not([invalid]):not(:state(user-invalid))) .textarea:focus,\n :host([fit-cell]:not([invalid]):not(:state(user-invalid))) .textarea:focus-visible,\n :host([fit-cell][data-state='focus-visible']:not([invalid]):not(:state(user-invalid))) .textarea,\n :host([data-editable-table-input]:not([invalid]):not(:state(user-invalid))) .textarea:focus,\n :host([data-editable-table-input]:not([invalid]):not(:state(user-invalid))) .textarea:focus-visible,\n :host([data-editable-table-input][data-state='focus-visible']:not([invalid]):not(:state(user-invalid))) .textarea {\n border: none;\n box-shadow: inset 0 0 0 1px var(--pk-color-gray-200);\n }\n\n :host([fit-cell][invalid]) .textarea,\n :host([fit-cell]:state(user-invalid)) .textarea,\n :host([fit-cell][invalid]) .textarea:focus,\n :host([fit-cell][invalid]) .textarea:focus-visible,\n :host([fit-cell]:state(user-invalid)) .textarea:focus,\n :host([fit-cell]:state(user-invalid)) .textarea:focus-visible,\n :host([data-editable-table-input][invalid]) .textarea,\n :host([data-editable-table-input]:state(user-invalid)) .textarea,\n :host([data-editable-table-input][invalid]) .textarea:focus,\n :host([data-editable-table-input][invalid]) .textarea:focus-visible,\n :host([data-editable-table-input]:state(user-invalid)) .textarea:focus,\n :host([data-editable-table-input]:state(user-invalid)) .textarea:focus-visible {\n border: none;\n box-shadow: inset 0 0 0 1px var(--pk-color-rose-600);\n }\n }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, query, state } from '../../decorators.js';\nimport type { PropertyValues } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\n\nimport { formControlStyles } from '../../base/form-control.styles.js';\nimport { PkFormAssociatedElement } from '../../base/pk-form-associated-element.js';\nimport { uniqueId } from '../../a11y/focus.js';\nimport { HasSlotController } from '../../internal/has-slot.js';\nimport { syncStandaloneControlAria } from '../../internal/control-aria.js';\nimport { hasInstructionContent, readLegacyInstructions } from '../../internal/field-labels.js';\nimport { MirrorValidator, RequiredValidator } from '../../validators/index.js';\nimport { pkTextareaStyles } from './pk-textarea.styles.js';\n\nexport type PkTextareaSize = 'default' | 'sm';\n\n/**\n * Multiline text field — API, Craft visuals.\n *\n * @slot label\n * @slot instructions\n * @slot hint - Alias for `instructions`\n *\n * @csspart form-control - Wrapper\n * @csspart label - Label\n * @csspart instructions - Instructions\n * @csspart textarea - Native textarea\n */\n@customElement('pk-textarea')\nexport class PkTextarea extends PkFormAssociatedElement {\n static override styles = [formControlStyles, pkTextareaStyles];\n\n static override get validators() {\n return [...super.validators, MirrorValidator(), RequiredValidator()];\n }\n\n override assumeInteractionOn = ['blur', 'input'];\n\n private readonly hasSlotController = new HasSlotController(this, 'instructions', 'hint', 'label');\n\n private readonly controlId = uniqueId('pk-textarea');\n\n @query('textarea')\n override input!: HTMLTextAreaElement;\n\n @property()\n placeholder = '';\n\n private _value: string | null = null;\n\n get value(): string {\n if (this.valueHasChanged) {\n return this._value ?? '';\n }\n\n return this._value ?? this.defaultValue ?? '';\n }\n\n @state()\n set value(val: string | null) {\n const next = val ?? '';\n\n if (this._value === next) {\n return;\n }\n\n this.valueHasChanged = true;\n this._value = next;\n }\n\n @property({ attribute: 'value', reflect: true })\n defaultValue: string | null = null;\n\n @property({ reflect: true })\n size: PkTextareaSize = 'default';\n\n @property()\n label = '';\n\n @property()\n instructions = '';\n\n @property({ type: Boolean, reflect: true })\n readonly = false;\n\n @property({ type: Boolean, reflect: true })\n invalid = false;\n\n /** Flush + fill parent cell (editable tables). */\n @property({ type: Boolean, reflect: true, attribute: 'fit-cell' })\n fitCell = false;\n\n /** Native `rows` — use `1` in table cells so intrinsic height doesn't overflow. */\n @property({ type: Number })\n rows?: number;\n\n @property({ type: Number, attribute: 'max-length' })\n maxlength?: number;\n\n @property({ attribute: 'with-label', type: Boolean })\n withLabel = false;\n\n @property({ attribute: 'with-instructions', type: Boolean })\n withInstructions = false;\n\n override connectedCallback(): void {\n this.instructions = readLegacyInstructions(this, this.instructions);\n\n if (this.hasAttribute('with-hint')) {\n this.withInstructions = true;\n }\n\n super.connectedCallback();\n }\n\n protected override syncFormValue(): void {\n this.setValue(this.value || '');\n }\n\n protected override resetToDefaultValue(): void {\n this.valueHasChanged = false;\n this._value = null;\n }\n\n protected override restoreFormState(state: string | File | FormData | null): void {\n if (typeof state === 'string') {\n this.value = state;\n }\n }\n\n override formResetCallback(): void {\n this.valueHasChanged = false;\n this._value = null;\n\n if (this.input) {\n this.input.value = this.defaultValue ?? '';\n }\n\n super.formResetCallback();\n }\n\n override updated(changed: PropertyValues): void {\n if (changed.has('value') || changed.has('defaultValue')) {\n this.setState('blank', !this.value);\n }\n\n super.updated(changed);\n }\n\n protected override syncStandaloneAria(): void {\n if (!this.input) {\n return;\n }\n\n const hasLabel = this.hasLabelContent();\n const hasInstructions = this.hasInstructionsContent();\n\n syncStandaloneControlAria({\n control: this.input,\n labelId: `${this.controlId}-label`,\n instructionsId: `${this.controlId}-instructions`,\n hasLabel,\n hasInstructions,\n required: this.required,\n invalid: this.invalid || !this.internals.validity.valid,\n });\n }\n\n private hasLabelContent(): boolean {\n return Boolean(this.label) || this.hasSlotController.test('label', this.withLabel);\n }\n\n private hasInstructionsContent(): boolean {\n return hasInstructionContent(\n (name, flag) => this.hasSlotController.test(name, flag),\n this.instructions,\n this.withInstructions,\n );\n }\n\n focus(options?: FocusOptions): void {\n this.input?.focus(options);\n }\n\n blur(): void {\n this.input?.blur();\n }\n\n private handleInput(): void {\n this.value = this.input.value;\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n }\n\n private handleChange(event: Event): void {\n this.value = this.input.value;\n event.stopPropagation();\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n }\n\n override render() {\n const hasLabel = this.hasLabelContent();\n const hasInstructions = this.hasInstructionsContent();\n\n return html`\n <div part=\"form-control\" class=\"form-control\">\n ${hasLabel\n ? html`\n <label\n part=\"label\"\n class=\"form-control__label\"\n id=${`${this.controlId}-label`}\n for=${`${this.controlId}-control`}\n >\n <slot name=\"label\">${this.label}</slot>\n </label>\n `\n : nothing}\n\n ${hasInstructions\n ? html`\n <p\n part=\"instructions\"\n class=\"form-control__instructions\"\n id=${`${this.controlId}-instructions`}\n >\n <slot name=\"instructions\">${this.instructions}</slot>\n <slot name=\"hint\"></slot>\n </p>\n `\n : nothing}\n\n <textarea\n part=\"textarea\"\n class=\"textarea\"\n id=${hasLabel ? `${this.controlId}-control` : nothing}\n rows=${ifDefined(this.fitCell ? (this.rows ?? 1) : this.rows)}\n .value=${live(this.value)}\n placeholder=${this.placeholder || nothing}\n maxlength=${ifDefined(this.maxlength)}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n @input=${this.handleInput}\n @change=${this.handleChange}\n @focus=${() => this.dispatchEvent(new Event('focus', { bubbles: true, composed: true }))}\n @blur=${() => this.dispatchEvent(new Event('blur', { bubbles: true, composed: true }))}\n ></textarea>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-textarea': PkTextarea;\n }\n}\n"],"mappings":"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"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { t as icons_exports } from "./icons-BR8JcQj2.js";
|
|
2
2
|
import { s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
|
|
3
3
|
import { t as createIconElement } from "./render-Dvc3MHQR.js";
|
|
4
|
-
import "./pk-option-
|
|
5
|
-
import { n as pkSelectStyles, t as PkSelect } from "./pk-select-
|
|
4
|
+
import "./pk-option-DQZHV9jL.js";
|
|
5
|
+
import { n as pkSelectStyles, t as PkSelect } from "./pk-select-DQtORz-v.js";
|
|
6
6
|
import { css } from "lit";
|
|
7
7
|
//#region src/utils/time-options.ts
|
|
8
8
|
var timeOptionsCache = null;
|
|
@@ -225,4 +225,4 @@ PkTimePicker = __decorate([customElement("pk-time-picker")], PkTimePicker);
|
|
|
225
225
|
//#endregion
|
|
226
226
|
export { PkTimePicker as t };
|
|
227
227
|
|
|
228
|
-
//# sourceMappingURL=pk-time-picker-
|
|
228
|
+
//# sourceMappingURL=pk-time-picker-DLUBYLFo.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pk-time-picker-5D4nmig2.js","names":[],"sources":["../../src/utils/time-options.ts","../../src/components/time-picker/pk-time-picker.styles.ts","../../src/components/time-picker/pk-time-picker.ts"],"sourcesContent":["export type TimeOption = {\n value: string;\n label: string;\n};\n\nexport type TimepickerFormatOptions = {\n timeFormat?: string;\n lang?: {\n AM?: string;\n PM?: string;\n };\n locale?: string;\n};\n\nlet timeOptionsCache: TimeOption[] | null = null;\n\nfunction resolveTimepickerOptions(): Required<Pick<TimepickerFormatOptions, 'timeFormat' | 'lang'>> & { locale: string } {\n const craft = (globalThis as typeof globalThis & {\n Craft?: { timepicker?: TimepickerFormatOptions };\n }).Craft?.timepicker;\n\n return {\n timeFormat: craft?.timeFormat || 'g:i A',\n lang: {\n AM: craft?.lang?.AM || 'AM',\n PM: craft?.lang?.PM || 'PM',\n },\n locale: craft?.locale || document.documentElement.lang || 'en-US',\n };\n}\n\n/** Generate time options in 30-minute increments — mirrors React `generateTimeOptions`. */\nexport function generateTimeOptions(): TimeOption[] {\n if (timeOptionsCache) {\n return timeOptionsCache;\n }\n\n const options: TimeOption[] = [];\n const { timeFormat, lang, locale } = resolveTimepickerOptions();\n\n for (let hour = 0; hour < 24; hour += 1) {\n for (let minute = 0; minute < 60; minute += 30) {\n const timeString = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;\n\n let displayTime: string;\n\n if (timeFormat === 'g:i A') {\n let displayHour = hour;\n\n if (hour === 0) {\n displayHour = 12;\n } else if (hour > 12) {\n displayHour = hour - 12;\n }\n\n const ampm = hour >= 12 ? lang.PM : lang.AM;\n displayTime = `${displayHour}:${minute.toString().padStart(2, '0')} ${ampm}`;\n } else if (timeFormat === 'G:i') {\n displayTime = timeString;\n } else {\n displayTime = new Date(`2000-01-01T${timeString}:00`).toLocaleTimeString(locale, {\n hour: 'numeric',\n minute: '2-digit',\n hour12: timeFormat.includes('A'),\n });\n }\n\n options.push({\n value: timeString,\n label: displayTime,\n });\n }\n }\n\n timeOptionsCache = options;\n\n return options;\n}\n\nexport function clearTimeOptionsCache(): void {\n timeOptionsCache = null;\n}\n","import { css } from 'lit';\n\nexport const pkTimePickerStyles = css`\n @layer pk-component {\n :host {\n display: inline-block;\n width: 8.125rem;\n min-width: 8.125rem;\n color: var(--pk-color-gray-700);\n --pk-select-trigger-border-width: 1px;\n --pk-select-item-min-height: 2.125rem;\n --pk-select-item-padding-block: 0;\n --pk-select-item-padding-inline: 10px;\n --pk-select-item-font-size: var(--pk-font-size-base);\n }\n\n .control {\n justify-content: flex-start;\n gap: 0.5rem;\n width: 100%;\n height: 2.125rem;\n min-height: 2.125rem;\n border-color: var(--pk-color-slate-400) !important;\n border-radius: var(--pk-radius-lg) !important;\n background: transparent !important;\n background-color: transparent !important;\n text-align: left;\n font-weight: 400;\n line-height: 1.2;\n cursor: default;\n }\n\n :host([open]) .control {\n background: var(--pk-color-slate-150, var(--pk-color-slate-100)) !important;\n background-color: var(--pk-color-slate-150, var(--pk-color-slate-100)) !important;\n border-color: var(--pk-color-slate-400) !important;\n box-shadow: none;\n }\n\n :host(:not([disabled])) .control:hover:not(:disabled) {\n background: var(--pk-color-slate-50) !important;\n background-color: var(--pk-color-slate-50) !important;\n }\n\n :host(:not([disabled])[open]) .control:hover:not(:disabled),\n :host(:not([disabled])) .control:active:not(:disabled) {\n background: var(--pk-color-slate-150, var(--pk-color-slate-100)) !important;\n background-color: var(--pk-color-slate-150, var(--pk-color-slate-100)) !important;\n }\n\n :host(:not([invalid]):not(:state(user-invalid))) .control:focus-visible,\n :host(:not([invalid]):not(:state(user-invalid))[data-state='focus-visible']) .control {\n border-color: var(--pk-color-sky-600) !important;\n box-shadow: var(--pk-input-focus-shadow);\n }\n\n :host(:not([invalid]):not(:state(user-invalid))[open]) .control:focus-visible,\n :host(:not([invalid]):not(:state(user-invalid))[open][data-state='focus-visible']) .control {\n border-color: var(--pk-color-slate-400) !important;\n box-shadow: none;\n }\n\n :host([invalid]) .control,\n :host(:state(user-invalid)) .control {\n border-color: var(--pk-color-rose-600) !important;\n }\n\n :host([invalid]) .control:focus-visible,\n :host([invalid][data-state='focus-visible']) .control,\n :host(:state(user-invalid)) .control:focus-visible,\n :host(:state(user-invalid)[data-state='focus-visible']) .control {\n box-shadow: var(--pk-input-invalid-focus-shadow);\n }\n\n .control-start {\n color: var(--pk-color-gray-400);\n pointer-events: none;\n }\n\n .control-start svg {\n display: block;\n width: 14px;\n height: 14px;\n }\n\n .value {\n flex: 1;\n line-height: 1.2;\n color: inherit;\n }\n\n .value.is-placeholder {\n color: var(--pk-color-gray-400);\n }\n\n .icon {\n margin-inline-start: auto;\n color: var(--pk-color-gray-600);\n }\n\n .panel {\n min-width: 8rem;\n max-height: 15rem;\n }\n\n /* Editable-table cells: flush fill — must live here so !important beats the\n * standalone trigger chrome (external ::part cannot override it). */\n :host(.cell-pk-control) {\n display: block;\n width: 100%;\n min-width: 0;\n height: 100%;\n --pk-select-trigger-border-width: 0;\n --pk-select-item-min-height: 100%;\n --pk-select-item-padding-block: 0;\n }\n\n :host(.cell-pk-control) .control {\n width: 100%;\n height: 100% !important;\n min-height: 100% !important;\n border: 0 !important;\n border-radius: 0 !important;\n background: transparent !important;\n background-color: transparent !important;\n }\n\n :host(.cell-pk-control:not([disabled])) .control:hover:not(:disabled),\n :host(.cell-pk-control[open]) .control,\n :host(.cell-pk-control:not([disabled])[open]) .control:hover:not(:disabled),\n :host(.cell-pk-control:not([disabled])) .control:active:not(:disabled) {\n border-radius: 0 !important;\n }\n\n :host(.cell-pk-control:not([invalid]):not(:state(user-invalid))) .control:focus-visible,\n :host(.cell-pk-control:not([invalid]):not(:state(user-invalid))[data-state='focus-visible']) .control {\n border: 0 !important;\n box-shadow: inset 0 0 0 1px var(--pk-color-gray-200, #e5e7eb);\n }\n }\n`;\n","import { customElement } from '../../decorators.js';\n\nimport { createIconElement, clock } from '../../icons/index.js';\nimport { PkSelect } from '../select/pk-select.js';\n// Time picker seeds light-DOM options at connect — register the CE so getLabel() works.\nimport '../select/pk-option.js';\nimport { pkSelectStyles } from '../select/pk-select.styles.js';\nimport { generateTimeOptions } from '../../utils/time-options.js';\nimport { pkTimePickerStyles } from './pk-time-picker.styles.js';\n\n/**\n * Time picker — select wrapper with 30-minute increments and a clock icon.\n * Mirrors React `TimePicker` (not `pk-time-input`).\n *\n * @slot start - Overrides the default clock icon\n * @slot - Additional `pk-option` items append after the generated list\n *\n * @event input\n * @event change\n * @event pk-change - `detail.value`\n */\n@customElement('pk-time-picker')\nexport class PkTimePicker extends PkSelect {\n // Flatten — `pkSelectStyles` is already a CSSResult[].\n static override styles = [...pkSelectStyles, pkTimePickerStyles];\n\n private optionsSeeded = false;\n\n override connectedCallback(): void {\n this.ensureTimeOptions();\n this.ensureClockIcon();\n super.connectedCallback();\n }\n\n private ensureTimeOptions(): void {\n if (this.optionsSeeded || this.querySelector('pk-option')) {\n this.optionsSeeded = true;\n return;\n }\n\n for (const option of generateTimeOptions()) {\n const element = document.createElement('pk-option');\n element.value = option.value;\n element.textContent = option.label;\n this.append(element);\n }\n\n this.optionsSeeded = true;\n }\n\n private ensureClockIcon(): void {\n if (this.querySelector('[slot=\"start\"]')) {\n return;\n }\n\n const icon = createIconElement(clock);\n icon.setAttribute('slot', 'start');\n this.prepend(icon);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-time-picker': PkTimePicker;\n }\n}\n"],"mappings":";;;;;;;AAcA,IAAI,mBAAwC;AAE5C,SAAS,2BAAgH;CACrH,MAAM,QAAS,WAEZ,OAAO;AAEV,QAAO;EACH,YAAY,OAAO,cAAc;EACjC,MAAM;GACF,IAAI,OAAO,MAAM,MAAM;GACvB,IAAI,OAAO,MAAM,MAAM;GAC1B;EACD,QAAQ,OAAO,UAAU,SAAS,gBAAgB,QAAQ;EAC7D;;;AAIL,SAAgB,sBAAoC;AAChD,KAAI,iBACA,QAAO;CAGX,MAAM,UAAwB,EAAE;CAChC,MAAM,EAAE,YAAY,MAAM,WAAW,0BAA0B;AAE/D,MAAK,IAAI,OAAO,GAAG,OAAO,IAAI,QAAQ,EAClC,MAAK,IAAI,SAAS,GAAG,SAAS,IAAI,UAAU,IAAI;EAC5C,MAAM,aAAa,GAAG,KAAK,UAAU,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,OAAO,UAAU,CAAC,SAAS,GAAG,IAAI;EAE5F,IAAI;AAEJ,MAAI,eAAe,SAAS;GACxB,IAAI,cAAc;AAElB,OAAI,SAAS,EACT,eAAc;YACP,OAAO,GACd,eAAc,OAAO;GAGzB,MAAM,OAAO,QAAQ,KAAK,KAAK,KAAK,KAAK;AACzC,iBAAc,GAAG,YAAY,GAAG,OAAO,UAAU,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG;aAC/D,eAAe,MACtB,eAAc;MAEd,gCAAc,IAAI,KAAK,cAAc,WAAW,KAAK,EAAC,mBAAmB,QAAQ;GAC7E,MAAM;GACN,QAAQ;GACR,QAAQ,WAAW,SAAS,IAAI;GACnC,CAAC;AAGN,UAAQ,KAAK;GACT,OAAO;GACP,OAAO;GACV,CAAC;;AAIV,oBAAmB;AAEnB,QAAO;;;;AC1EX,IAAa,qBAAqB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACoB9B,IAAA,eAAA,MAAM,qBAAqB,SAAS;;;uBAIf;;;gBAFC,CAAC,GAAG,gBAAgB,mBAAmB;;CAIhE,oBAAmC;AAC/B,OAAK,mBAAmB;AACxB,OAAK,iBAAiB;AACtB,QAAM,mBAAmB;;CAG7B,oBAAkC;AAC9B,MAAI,KAAK,iBAAiB,KAAK,cAAc,YAAY,EAAE;AACvD,QAAK,gBAAgB;AACrB;;AAGJ,OAAK,MAAM,UAAU,qBAAqB,EAAE;GACxC,MAAM,UAAU,SAAS,cAAc,YAAY;AACnD,WAAQ,QAAQ,OAAO;AACvB,WAAQ,cAAc,OAAO;AAC7B,QAAK,OAAO,QAAQ;;AAGxB,OAAK,gBAAgB;;CAGzB,kBAAgC;AAC5B,MAAI,KAAK,cAAc,mBAAiB,CACpC;EAGJ,MAAM,OAAO,kBAAkB,cAAA,MAAM;AACrC,OAAK,aAAa,QAAQ,QAAQ;AAClC,OAAK,QAAQ,KAAK;;;2BApCzB,cAAc,iBAAiB,CAAA,EAAA,aAAA"}
|
|
1
|
+
{"version":3,"file":"pk-time-picker-DLUBYLFo.js","names":[],"sources":["../../src/utils/time-options.ts","../../src/components/time-picker/pk-time-picker.styles.ts","../../src/components/time-picker/pk-time-picker.ts"],"sourcesContent":["export type TimeOption = {\n value: string;\n label: string;\n};\n\nexport type TimepickerFormatOptions = {\n timeFormat?: string;\n lang?: {\n AM?: string;\n PM?: string;\n };\n locale?: string;\n};\n\nlet timeOptionsCache: TimeOption[] | null = null;\n\nfunction resolveTimepickerOptions(): Required<Pick<TimepickerFormatOptions, 'timeFormat' | 'lang'>> & { locale: string } {\n const craft = (globalThis as typeof globalThis & {\n Craft?: { timepicker?: TimepickerFormatOptions };\n }).Craft?.timepicker;\n\n return {\n timeFormat: craft?.timeFormat || 'g:i A',\n lang: {\n AM: craft?.lang?.AM || 'AM',\n PM: craft?.lang?.PM || 'PM',\n },\n locale: craft?.locale || document.documentElement.lang || 'en-US',\n };\n}\n\n/** Generate time options in 30-minute increments — mirrors React `generateTimeOptions`. */\nexport function generateTimeOptions(): TimeOption[] {\n if (timeOptionsCache) {\n return timeOptionsCache;\n }\n\n const options: TimeOption[] = [];\n const { timeFormat, lang, locale } = resolveTimepickerOptions();\n\n for (let hour = 0; hour < 24; hour += 1) {\n for (let minute = 0; minute < 60; minute += 30) {\n const timeString = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;\n\n let displayTime: string;\n\n if (timeFormat === 'g:i A') {\n let displayHour = hour;\n\n if (hour === 0) {\n displayHour = 12;\n } else if (hour > 12) {\n displayHour = hour - 12;\n }\n\n const ampm = hour >= 12 ? lang.PM : lang.AM;\n displayTime = `${displayHour}:${minute.toString().padStart(2, '0')} ${ampm}`;\n } else if (timeFormat === 'G:i') {\n displayTime = timeString;\n } else {\n displayTime = new Date(`2000-01-01T${timeString}:00`).toLocaleTimeString(locale, {\n hour: 'numeric',\n minute: '2-digit',\n hour12: timeFormat.includes('A'),\n });\n }\n\n options.push({\n value: timeString,\n label: displayTime,\n });\n }\n }\n\n timeOptionsCache = options;\n\n return options;\n}\n\nexport function clearTimeOptionsCache(): void {\n timeOptionsCache = null;\n}\n","import { css } from 'lit';\n\nexport const pkTimePickerStyles = css`\n @layer pk-component {\n :host {\n display: inline-block;\n width: 8.125rem;\n min-width: 8.125rem;\n color: var(--pk-color-gray-700);\n --pk-select-trigger-border-width: 1px;\n --pk-select-item-min-height: 2.125rem;\n --pk-select-item-padding-block: 0;\n --pk-select-item-padding-inline: 10px;\n --pk-select-item-font-size: var(--pk-font-size-base);\n }\n\n .control {\n justify-content: flex-start;\n gap: 0.5rem;\n width: 100%;\n height: 2.125rem;\n min-height: 2.125rem;\n border-color: var(--pk-color-slate-400) !important;\n border-radius: var(--pk-radius-lg) !important;\n background: transparent !important;\n background-color: transparent !important;\n text-align: left;\n font-weight: 400;\n line-height: 1.2;\n cursor: default;\n }\n\n :host([open]) .control {\n background: var(--pk-color-slate-150, var(--pk-color-slate-100)) !important;\n background-color: var(--pk-color-slate-150, var(--pk-color-slate-100)) !important;\n border-color: var(--pk-color-slate-400) !important;\n box-shadow: none;\n }\n\n :host(:not([disabled])) .control:hover:not(:disabled) {\n background: var(--pk-color-slate-50) !important;\n background-color: var(--pk-color-slate-50) !important;\n }\n\n :host(:not([disabled])[open]) .control:hover:not(:disabled),\n :host(:not([disabled])) .control:active:not(:disabled) {\n background: var(--pk-color-slate-150, var(--pk-color-slate-100)) !important;\n background-color: var(--pk-color-slate-150, var(--pk-color-slate-100)) !important;\n }\n\n :host(:not([invalid]):not(:state(user-invalid))) .control:focus-visible,\n :host(:not([invalid]):not(:state(user-invalid))[data-state='focus-visible']) .control {\n border-color: var(--pk-color-sky-600) !important;\n box-shadow: var(--pk-input-focus-shadow);\n }\n\n :host(:not([invalid]):not(:state(user-invalid))[open]) .control:focus-visible,\n :host(:not([invalid]):not(:state(user-invalid))[open][data-state='focus-visible']) .control {\n border-color: var(--pk-color-slate-400) !important;\n box-shadow: none;\n }\n\n :host([invalid]) .control,\n :host(:state(user-invalid)) .control {\n border-color: var(--pk-color-rose-600) !important;\n }\n\n :host([invalid]) .control:focus-visible,\n :host([invalid][data-state='focus-visible']) .control,\n :host(:state(user-invalid)) .control:focus-visible,\n :host(:state(user-invalid)[data-state='focus-visible']) .control {\n box-shadow: var(--pk-input-invalid-focus-shadow);\n }\n\n .control-start {\n color: var(--pk-color-gray-400);\n pointer-events: none;\n }\n\n .control-start svg {\n display: block;\n width: 14px;\n height: 14px;\n }\n\n .value {\n flex: 1;\n line-height: 1.2;\n color: inherit;\n }\n\n .value.is-placeholder {\n color: var(--pk-color-gray-400);\n }\n\n .icon {\n margin-inline-start: auto;\n color: var(--pk-color-gray-600);\n }\n\n .panel {\n min-width: 8rem;\n max-height: 15rem;\n }\n\n /* Editable-table cells: flush fill — must live here so !important beats the\n * standalone trigger chrome (external ::part cannot override it). */\n :host(.cell-pk-control) {\n display: block;\n width: 100%;\n min-width: 0;\n height: 100%;\n --pk-select-trigger-border-width: 0;\n --pk-select-item-min-height: 100%;\n --pk-select-item-padding-block: 0;\n }\n\n :host(.cell-pk-control) .control {\n width: 100%;\n height: 100% !important;\n min-height: 100% !important;\n border: 0 !important;\n border-radius: 0 !important;\n background: transparent !important;\n background-color: transparent !important;\n }\n\n :host(.cell-pk-control:not([disabled])) .control:hover:not(:disabled),\n :host(.cell-pk-control[open]) .control,\n :host(.cell-pk-control:not([disabled])[open]) .control:hover:not(:disabled),\n :host(.cell-pk-control:not([disabled])) .control:active:not(:disabled) {\n border-radius: 0 !important;\n }\n\n :host(.cell-pk-control:not([invalid]):not(:state(user-invalid))) .control:focus-visible,\n :host(.cell-pk-control:not([invalid]):not(:state(user-invalid))[data-state='focus-visible']) .control {\n border: 0 !important;\n box-shadow: inset 0 0 0 1px var(--pk-color-gray-200, #e5e7eb);\n }\n }\n`;\n","import { customElement } from '../../decorators.js';\n\nimport { createIconElement, clock } from '../../icons/index.js';\nimport { PkSelect } from '../select/pk-select.js';\n// Time picker seeds light-DOM options at connect — register the CE so getLabel() works.\nimport '../select/pk-option.js';\nimport { pkSelectStyles } from '../select/pk-select.styles.js';\nimport { generateTimeOptions } from '../../utils/time-options.js';\nimport { pkTimePickerStyles } from './pk-time-picker.styles.js';\n\n/**\n * Time picker — select wrapper with 30-minute increments and a clock icon.\n * Mirrors React `TimePicker` (not `pk-time-input`).\n *\n * @slot start - Overrides the default clock icon\n * @slot - Additional `pk-option` items append after the generated list\n *\n * @event input\n * @event change\n * @event pk-change - `detail.value`\n */\n@customElement('pk-time-picker')\nexport class PkTimePicker extends PkSelect {\n // Flatten — `pkSelectStyles` is already a CSSResult[].\n static override styles = [...pkSelectStyles, pkTimePickerStyles];\n\n private optionsSeeded = false;\n\n override connectedCallback(): void {\n this.ensureTimeOptions();\n this.ensureClockIcon();\n super.connectedCallback();\n }\n\n private ensureTimeOptions(): void {\n if (this.optionsSeeded || this.querySelector('pk-option')) {\n this.optionsSeeded = true;\n return;\n }\n\n for (const option of generateTimeOptions()) {\n const element = document.createElement('pk-option');\n element.value = option.value;\n element.textContent = option.label;\n this.append(element);\n }\n\n this.optionsSeeded = true;\n }\n\n private ensureClockIcon(): void {\n if (this.querySelector('[slot=\"start\"]')) {\n return;\n }\n\n const icon = createIconElement(clock);\n icon.setAttribute('slot', 'start');\n this.prepend(icon);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-time-picker': PkTimePicker;\n }\n}\n"],"mappings":";;;;;;;AAcA,IAAI,mBAAwC;AAE5C,SAAS,2BAAgH;CACrH,MAAM,QAAS,WAEZ,OAAO;AAEV,QAAO;EACH,YAAY,OAAO,cAAc;EACjC,MAAM;GACF,IAAI,OAAO,MAAM,MAAM;GACvB,IAAI,OAAO,MAAM,MAAM;GAC1B;EACD,QAAQ,OAAO,UAAU,SAAS,gBAAgB,QAAQ;EAC7D;;;AAIL,SAAgB,sBAAoC;AAChD,KAAI,iBACA,QAAO;CAGX,MAAM,UAAwB,EAAE;CAChC,MAAM,EAAE,YAAY,MAAM,WAAW,0BAA0B;AAE/D,MAAK,IAAI,OAAO,GAAG,OAAO,IAAI,QAAQ,EAClC,MAAK,IAAI,SAAS,GAAG,SAAS,IAAI,UAAU,IAAI;EAC5C,MAAM,aAAa,GAAG,KAAK,UAAU,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,OAAO,UAAU,CAAC,SAAS,GAAG,IAAI;EAE5F,IAAI;AAEJ,MAAI,eAAe,SAAS;GACxB,IAAI,cAAc;AAElB,OAAI,SAAS,EACT,eAAc;YACP,OAAO,GACd,eAAc,OAAO;GAGzB,MAAM,OAAO,QAAQ,KAAK,KAAK,KAAK,KAAK;AACzC,iBAAc,GAAG,YAAY,GAAG,OAAO,UAAU,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG;aAC/D,eAAe,MACtB,eAAc;MAEd,gCAAc,IAAI,KAAK,cAAc,WAAW,KAAK,EAAC,mBAAmB,QAAQ;GAC7E,MAAM;GACN,QAAQ;GACR,QAAQ,WAAW,SAAS,IAAI;GACnC,CAAC;AAGN,UAAQ,KAAK;GACT,OAAO;GACP,OAAO;GACV,CAAC;;AAIV,oBAAmB;AAEnB,QAAO;;;;AC1EX,IAAa,qBAAqB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACoB9B,IAAA,eAAA,MAAM,qBAAqB,SAAS;;;uBAIf;;;gBAFC,CAAC,GAAG,gBAAgB,mBAAmB;;CAIhE,oBAAmC;AAC/B,OAAK,mBAAmB;AACxB,OAAK,iBAAiB;AACtB,QAAM,mBAAmB;;CAG7B,oBAAkC;AAC9B,MAAI,KAAK,iBAAiB,KAAK,cAAc,YAAY,EAAE;AACvD,QAAK,gBAAgB;AACrB;;AAGJ,OAAK,MAAM,UAAU,qBAAqB,EAAE;GACxC,MAAM,UAAU,SAAS,cAAc,YAAY;AACnD,WAAQ,QAAQ,OAAO;AACvB,WAAQ,cAAc,OAAO;AAC7B,QAAK,OAAO,QAAQ;;AAGxB,OAAK,gBAAgB;;CAGzB,kBAAgC;AAC5B,MAAI,KAAK,cAAc,mBAAiB,CACpC;EAGJ,MAAM,OAAO,kBAAkB,cAAA,MAAM;AACrC,OAAK,aAAa,QAAQ,QAAQ;AAClC,OAAK,QAAQ,KAAK;;;2BApCzB,cAAc,iBAAiB,CAAA,EAAA,aAAA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { a as query, i as property, n as PkElement, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
|
|
2
|
-
import { i as createVariableTagDomNodeView, t as tiptapContentProseMirrorStyles } from "./tiptap.styles-
|
|
2
|
+
import { i as createVariableTagDomNodeView, t as tiptapContentProseMirrorStyles } from "./tiptap.styles-CPRows--.js";
|
|
3
3
|
import { css, html } from "lit";
|
|
4
4
|
import { Editor } from "@tiptap/core";
|
|
5
5
|
import { createTiptapExtensions, valueToContent } from "@verbb/plugin-kit-tiptap-core";
|
|
@@ -72,4 +72,4 @@ PkTiptapContent = __decorate([customElement("pk-tiptap-content")], PkTiptapConte
|
|
|
72
72
|
//#endregion
|
|
73
73
|
export { PkTiptapContent as t };
|
|
74
74
|
|
|
75
|
-
//# sourceMappingURL=pk-tiptap-content-
|
|
75
|
+
//# sourceMappingURL=pk-tiptap-content-BwkqYVJb.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pk-tiptap-content-
|
|
1
|
+
{"version":3,"file":"pk-tiptap-content-BwkqYVJb.js","names":[],"sources":["../../src/components/tiptap/pk-tiptap-content.styles.ts","../../src/components/tiptap/pk-tiptap-content.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkTiptapContentStyles = css`\n @layer pk-component {\n :host {\n display: block;\n width: 100%;\n /* Inherit light-DOM color/size (warning banners, badges). Tokens override when set. */\n color: var(--pk-tiptap-content-color, inherit);\n font-family: var(--pk-font-family);\n font-size: var(--pk-tiptap-content-font-size, inherit);\n line-height: var(--pk-tiptap-content-line-height, 1.4);\n }\n }\n`;\n","import { html } from 'lit';\nimport { customElement, property, query } from '../../decorators.js';\nimport type { PropertyValues } from 'lit';\nimport { Editor } from '@tiptap/core';\nimport {\n createTiptapExtensions,\n valueToContent,\n} from '@verbb/plugin-kit-tiptap-core';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { createVariableTagDomNodeView } from './variable-tag-node-view.js';\nimport { pkTiptapContentStyles } from './pk-tiptap-content.styles.js';\nimport { tiptapContentProseMirrorStyles } from './tiptap.styles.js';\n\nfunction serializeContent(doc: ReturnType<typeof valueToContent>): string {\n if (!doc) {\n return '[]';\n }\n\n if (Array.isArray(doc.content)) {\n return JSON.stringify(doc.content);\n }\n\n return JSON.stringify(doc);\n}\n\n/**\n * Read-only TipTap / ProseMirror renderer.\n *\n * Pass the same `value` shapes as TiptapEditor: node array, doc object, or JSON string.\n */\n@customElement('pk-tiptap-content')\nexport class PkTiptapContent extends PkElement {\n static override styles = [pkTiptapContentStyles, tiptapContentProseMirrorStyles];\n\n @query('.editor-mount')\n private editorMount!: HTMLDivElement;\n\n private editor: Editor | null = null;\n\n @property({ attribute: 'value' })\n value = '';\n\n override disconnectedCallback(): void {\n this.editor?.destroy();\n this.editor = null;\n super.disconnectedCallback();\n }\n\n override updated(changed: PropertyValues): void {\n if (changed.has('value') && this.editor) {\n this.syncContent();\n }\n\n super.updated(changed);\n }\n\n override firstUpdated(): void {\n this.mountEditor();\n }\n\n private mountEditor(): void {\n this.editor = new Editor({\n element: this.editorMount,\n extensions: createTiptapExtensions({\n variableTagNodeView: createVariableTagDomNodeView(),\n }),\n content: valueToContent(this.value),\n editable: false,\n });\n }\n\n private syncContent(): void {\n if (!this.editor) {\n return;\n }\n\n const doc = valueToContent(this.value) ?? { type: 'doc', content: [] };\n const incoming = serializeContent(valueToContent(this.value));\n const current = serializeContent(this.editor.getJSON() as ReturnType<typeof valueToContent>);\n\n if (incoming === current) {\n return;\n }\n\n this.editor.commands.setContent(doc);\n }\n\n override render() {\n return html`<div class=\"editor-mount\" part=\"content\"></div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-tiptap-content': PkTiptapContent;\n }\n}\n"],"mappings":";;;;;;AAEA,IAAa,wBAAwB,GAAG;;;;;;;;;;;;;;;ACYxC,SAAS,iBAAiB,KAAgD;AACtE,KAAI,CAAC,IACD,QAAO;AAGX,KAAI,MAAM,QAAQ,IAAI,QAAQ,CAC1B,QAAO,KAAK,UAAU,IAAI,QAAQ;AAGtC,QAAO,KAAK,UAAU,IAAI;;AASvB,IAAA,kBAAA,MAAM,wBAAwB,UAAU;;;gBAMX;eAGxB;;;gBARiB,CAAC,uBAAuB,+BAA+B;;CAUhF,uBAAsC;AAClC,OAAK,QAAQ,SAAS;AACtB,OAAK,SAAS;AACd,QAAM,sBAAsB;;CAGhC,QAAiB,SAA+B;AAC5C,MAAI,QAAQ,IAAI,QAAQ,IAAI,KAAK,OAC7B,MAAK,aAAa;AAGtB,QAAM,QAAQ,QAAQ;;CAG1B,eAA8B;AAC1B,OAAK,aAAa;;CAGtB,cAA4B;AACxB,OAAK,SAAS,IAAI,OAAO;GACrB,SAAS,KAAK;GACd,YAAY,uBAAuB,EAC/B,qBAAqB,8BAA8B,EACtD,CAAC;GACF,SAAS,eAAe,KAAK,MAAM;GACnC,UAAU;GACb,CAAC;;CAGN,cAA4B;AACxB,MAAI,CAAC,KAAK,OACN;EAGJ,MAAM,MAAM,eAAe,KAAK,MAAM,IAAI;GAAE,MAAM;GAAO,SAAS,EAAE;GAAE;AAItE,MAHiB,iBAAiB,eAAe,KAAK,MAAM,CAGxD,KAFY,iBAAiB,KAAK,OAAO,SAAS,CAErC,CACb;AAGJ,OAAK,OAAO,SAAS,WAAW,IAAI;;CAGxC,SAAkB;AACd,SAAO,IAAI;;;YAtDd,MAAM,gBAAgB,CAAA,EAAA,gBAAA,WAAA,eAAA,KAAA,EAAA;YAKtB,SAAS,EAAE,WAAW,SAAS,CAAC,CAAA,EAAA,gBAAA,WAAA,SAAA,KAAA,EAAA;8BATpC,cAAc,oBAAoB,CAAA,EAAA,gBAAA"}
|
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
import { t as icons_exports } from "./icons-BR8JcQj2.js";
|
|
2
2
|
import { a as query, i as property, o as state, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
|
|
3
|
-
import "./pk-button-
|
|
4
|
-
import { t as PkFormAssociatedElement } from "./pk-form-associated-element-
|
|
3
|
+
import "./pk-button-BrH4u4Qr.js";
|
|
4
|
+
import { t as PkFormAssociatedElement } from "./pk-form-associated-element-CCQALRGB.js";
|
|
5
5
|
import { t as MirrorValidator } from "./mirror-validator-DCjNYrrx.js";
|
|
6
|
-
import "./pk-checkbox-
|
|
6
|
+
import "./pk-checkbox-CfV1uDdC.js";
|
|
7
7
|
import { t as formControlStyles } from "./form-control.styles-BQdimE5o.js";
|
|
8
8
|
import { n as renderIconHtml } from "./render-Dvc3MHQR.js";
|
|
9
9
|
import { i as uniqueId } from "./focus-aa5dlv8k.js";
|
|
10
|
-
import "./pk-input-
|
|
11
|
-
import "./pk-dialog-
|
|
12
|
-
import "./pk-dropdown-item-
|
|
13
|
-
import "./pk-dropdown-menu-
|
|
10
|
+
import "./pk-input-CF_icEtR.js";
|
|
11
|
+
import "./pk-dialog-VMQqLW1f.js";
|
|
12
|
+
import "./pk-dropdown-item-BZQS87U0.js";
|
|
13
|
+
import "./pk-dropdown-menu-D60p2-9X.js";
|
|
14
14
|
import "../components/dropdown-menu/pk-dropdown-separator.js";
|
|
15
|
-
import "./pk-field-
|
|
16
|
-
import "./pk-tooltip-
|
|
17
|
-
import { i as createVariableTagDomNodeView, r as tiptapProseMirrorStyles } from "./tiptap.styles-
|
|
15
|
+
import "./pk-field-UAlMq6mQ.js";
|
|
16
|
+
import "./pk-tooltip-Cmmc0916.js";
|
|
17
|
+
import { i as createVariableTagDomNodeView, r as tiptapProseMirrorStyles } from "./tiptap.styles-CPRows--.js";
|
|
18
18
|
import { css, html, nothing } from "lit";
|
|
19
19
|
import { unsafeSVG } from "lit/directives/unsafe-svg.js";
|
|
20
20
|
import { Editor, getMarkRange, posToDOMRect } from "@tiptap/core";
|
|
@@ -679,7 +679,7 @@ var PkTiptapEditor = class PkTiptapEditor extends PkFormAssociatedElement {
|
|
|
679
679
|
style=${`top:${this.linkBubbleTop}px;left:${this.linkBubbleLeft}px;transform:translate(-50%, -100%);`}
|
|
680
680
|
>
|
|
681
681
|
<span class="link-bubble__arrow" aria-hidden="true"></span>
|
|
682
|
-
<span class="link-bubble__url"
|
|
682
|
+
<span class="link-bubble__url">${this.linkBubbleHref}</span>
|
|
683
683
|
<span class="link-bubble__divider" aria-hidden="true"></span>
|
|
684
684
|
<button
|
|
685
685
|
type="button"
|
|
@@ -1089,4 +1089,4 @@ PkTiptapEditor = __decorate([customElement("pk-tiptap-editor")], PkTiptapEditor)
|
|
|
1089
1089
|
//#endregion
|
|
1090
1090
|
export { PkTiptapEditor as t };
|
|
1091
1091
|
|
|
1092
|
-
//# sourceMappingURL=pk-tiptap-editor-
|
|
1092
|
+
//# sourceMappingURL=pk-tiptap-editor-De8UUTis.js.map
|