@ahrowe/ui 0.10.0 → 0.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/common/accordion/accordion.module.mjs.map +1 -1
- package/dist/esm/common/accordion/accordion.plain.module.mjs.map +1 -1
- package/dist/esm/common/accordion/accordion.primary.module.mjs.map +1 -1
- package/dist/esm/common/actionIcon/actionIcon.module.mjs.map +1 -1
- package/dist/esm/common/animatedText/animatedText.mjs +1 -1
- package/dist/esm/common/animatedText/animatedText.mjs.map +1 -1
- package/dist/esm/common/animatedText/animatedText.types.mjs.map +1 -1
- package/dist/esm/common/button/button.module.mjs.map +1 -1
- package/dist/esm/common/card/card.module.mjs.map +1 -1
- package/dist/esm/common/checkbox/checkbox.module.mjs.map +1 -1
- package/dist/esm/common/chip/chip.module.mjs.map +1 -1
- package/dist/esm/common/colorPicker/colorPicker.mjs +1 -1
- package/dist/esm/common/colorPicker/colorPicker.mjs.map +1 -1
- package/dist/esm/common/colorPicker/colorPicker.module.mjs +1 -1
- package/dist/esm/common/colorPicker/colorPicker.module.mjs.map +1 -1
- package/dist/esm/common/datePicker/components/datePickerMonth/datePickerMonth.module.mjs.map +1 -1
- package/dist/esm/common/datePicker/datePicker.module.mjs.map +1 -1
- package/dist/esm/common/dropZone/dropZone.module.mjs.map +1 -1
- package/dist/esm/common/dropdown/dropdown.module.mjs.map +1 -1
- package/dist/esm/common/fab/fab.module.mjs.map +1 -1
- package/dist/esm/common/floatingMenu/floatingMenu.mjs +1 -1
- package/dist/esm/common/floatingMenu/floatingMenu.mjs.map +1 -1
- package/dist/esm/common/floatingMenu/floatingMenu.module.mjs.map +1 -1
- package/dist/esm/common/hooks/useSwipeDismiss.mjs +2 -0
- package/dist/esm/common/hooks/useSwipeDismiss.mjs.map +1 -0
- package/dist/esm/common/iconPicker/iconPicker.module.mjs.map +1 -1
- package/dist/esm/common/input/input.module.mjs.map +1 -1
- package/dist/esm/common/inputDropdown/inputDropdown.module.mjs.map +1 -1
- package/dist/esm/common/klipyPicker/klipyPicker.module.mjs.map +1 -1
- package/dist/esm/common/modal/modal.module.mjs.map +1 -1
- package/dist/esm/common/numberInput/numberInput.module.mjs.map +1 -1
- package/dist/esm/common/optionPicker/optionPicker.module.mjs.map +1 -1
- package/dist/esm/common/radioGroup/radioGroup.module.mjs.map +1 -1
- package/dist/esm/common/roomDrawer/roomDrawer.module.mjs.map +1 -1
- package/dist/esm/common/roomViewer/roomViewer.module.mjs.map +1 -1
- package/dist/esm/common/slider/slider.mjs +2 -0
- package/dist/esm/common/slider/slider.mjs.map +1 -0
- package/dist/esm/common/slider/slider.module.mjs +2 -0
- package/dist/esm/common/slider/slider.module.mjs.map +1 -0
- package/dist/esm/common/stepper/stepper.mjs +1 -1
- package/dist/esm/common/stepper/stepper.mjs.map +1 -1
- package/dist/esm/common/stepper/stepper.module.mjs +1 -1
- package/dist/esm/common/stepper/stepper.module.mjs.map +1 -1
- package/dist/esm/common/stepper/stepper.types.mjs.map +1 -1
- package/dist/esm/common/switch/switch.module.mjs.map +1 -1
- package/dist/esm/common/tabHeader/tabHeader.module.mjs.map +1 -1
- package/dist/esm/common/timeInput/components/clockDial/clockDial.module.mjs.map +1 -1
- package/dist/esm/common/timeInput/timeInput.module.mjs.map +1 -1
- package/dist/esm/common/toast/toast.mjs +1 -1
- package/dist/esm/common/toast/toast.mjs.map +1 -1
- package/dist/esm/common/toast/toast.module.mjs.map +1 -1
- package/dist/esm/common/virtualList/virtualList.module.mjs.map +1 -1
- package/dist/esm/index.mjs +1 -1
- package/dist/index.cjs +4 -4
- package/dist/index.cjs.map +1 -1
- package/dist/style.css +1 -1
- package/dist/types/package/common/animatedText/animatedText.d.ts +1 -1
- package/dist/types/package/common/animatedText/animatedText.types.d.ts +6 -0
- package/dist/types/package/common/hooks/useSwipeDismiss.d.ts +33 -0
- package/dist/types/package/common/slider/index.d.ts +2 -0
- package/dist/types/package/common/slider/slider.d.ts +3 -0
- package/dist/types/package/common/slider/slider.types.d.ts +43 -0
- package/dist/types/package/common/stepper/stepper.types.d.ts +5 -5
- package/dist/types/package/common/themeProvider/theme.types.d.ts +10 -0
- package/dist/types/package/index.d.ts +2 -0
- package/docs/AnimatedText.md +5 -0
- package/docs/CLAUDE.md +1 -0
- package/docs/ColorPicker.md +2 -0
- package/docs/FloatingMenu.md +2 -0
- package/docs/Slider.md +93 -0
- package/docs/Stepper.md +6 -6
- package/docs/Toast.md +2 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.module.mjs","names":[],"sources":["../../../../package/common/input/input.module.pcss"],"sourcesContent":["\n.required-mark {\n padding: 0px 0px 0px 4px;\n color: var(--required-mark-color, var(--error-color));\n}\n\n.input {\n position: relative;\n width: 100%;\n --input-notch-height: 1.75em;\n\n &-placeholder {\n position: absolute;\n top: 50%;\n left: 7px;\n transform: translateY(-50%);\n transition: all 0.2s;\n opacity: 0;\n user-select: none;\n pointer-events: none;\n\n &-shown {\n animation: 0.2s fadeIn 0.3s forwards;\n }\n\n &-multiline {\n top: 14px;\n transform: translateY(0);\n }\n }\n\n &-matLabel {\n position: absolute;\n transition: all 0.3s;\n left: 7px;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n font-size: 1em;\n color: var(--input-label-resting-color, var(--text-light));\n pointer-events: none;\n user-select: none;\n\n &-floating {\n top: 0;\n bottom: auto;\n left: 14px;\n right: 0;\n font-size: 0.8em;\n color: var(--input-label-floating-color, var(--text-color));\n transform: translateY(-50%);\n }\n\n &-multiline {\n top: 14px;\n transform: translateY(0);\n }\n }\n\n &-fieldset {\n position: absolute;\n width: 100%;\n margin: 0;\n padding: 0;\n min-width: 0;\n box-sizing: border-box;\n border-radius: var(--default-border-radius);\n font-size: 0.8em;\n inset: calc(var(--input-notch-height) / -2) 0 0 0;\n padding-left: 8px;\n border-width: 1px;\n border-style: solid;\n border-color: var(--border-color);\n pointer-events: none;\n user-select: none;\n\n &-legend {\n display: block;\n max-width: 0;\n transition: max-width 0.2s;\n white-space: nowrap;\n padding: 0;\n\n &-active {\n max-width: 300px;\n }\n\n span {\n line-height: var(--input-notch-height);\n padding: 0 5px;\n opacity: 0;\n }\n\n span:empty {\n padding: 0.000001px;\n }\n }\n }\n\n &-container {\n display: flex;\n align-items: center;\n border-radius: var(--default-border-radius);\n background-color: var(--input-background);\n transition: border-color;\n cursor: text;\n height: 100%;\n\n &-multiline {\n overflow: hidden;\n padding-top: 10px;\n align-items: flex-start;\n }\n\n &-border {\n outline: 1px solid var(--border-color);\n transition: border-color;\n background-color: var(--input-background);\n outline: none;\n\n &-focused {\n outline-color: var(--primary-color);\n border-color: var(--primary-color);\n }\n\n &-searchFocused {\n outline-color: var(--search-input-color);\n outline-width: 2px;\n border-color: var(--search-input-color);\n }\n\n &-invalid {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n\n &-invalid:hover {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n\n &-error {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n }\n }\n\n &-label {\n display: flex;\n color: var(--text-color);\n height: 100%;\n\n &-column {\n flex-direction: column;\n }\n\n &-text {\n white-space: nowrap;\n margin-right: 5px;\n margin-bottom: 6px;\n display: flex;\n align-items: center;\n color: color(var(--border-color) lightness(40%));\n background-color: transparent;\n font-size: 12px;\n position: absolute;\n top: -15px;\n white-space: nowrap;\n }\n }\n\n &-upper-right-label {\n position: absolute;\n transform: translateY(calc(-100% - 1.5px));\n right: 8px;\n min-height: 12px;\n font-size: 12px;\n color: color(var(--border-color) lightness(40%));\n }\n\n &-field {\n appearance: none;\n -webkit-appearance: none;\n font-family: inherit;\n font-size: inherit;\n box-sizing: border-box;\n resize: none;\n width: 100%;\n border: none;\n border-radius: var(--default-border-radius);\n overflow: hidden;\n line-height: 1.25;\n color: var(--text-color);\n background: transparent;\n\n &:focus {\n outline: none;\n }\n\n &::placeholder {\n color: var(--text-light);\n }\n\n &-withIcon {\n padding-right: 37px !important;\n\n &-left {\n padding-right: 9px !important;\n padding-left: 37px !important;\n }\n }\n\n &-suffix {\n padding-right: 9px;\n }\n\n &-date {\n padding: 6px 9px;\n color-scheme: dark;\n\n svg {\n color: white;\n }\n }\n\n &-default {\n padding: 8px 7.5px 6px;\n }\n\n &[disabled] {\n background-color: var(--disabled-input-color);\n color: var(--disabled-font-color);\n -webkit-text-fill-color: var(--disabled-font-color);\n opacity: 1;\n\n &::placeholder {\n color: var(--disabled-font-color);\n -webkit-text-fill-color: var(--disabled-font-color);\n }\n }\n\n &-readOnly {\n cursor: default;\n color: var(--text-dark);\n -webkit-text-fill-color: var(--text-dark);\n }\n\n &-uppercase {\n text-transform: uppercase;\n }\n\n &-multiline {\n overflow-y: auto;\n resize: vertical;\n padding-top: 4px;\n min-height: 30px;\n\n &-autoResize {\n resize: none;\n overflow: hidden;\n }\n }\n\n &-icon {\n appearance: none;\n -webkit-appearance: none;\n box-sizing: border-box;\n cursor: pointer;\n background-color: transparent;\n border: none;\n position: absolute;\n outline: none;\n right: 10px;\n top: 8px;\n color: var(--input-icon-color);\n width: 19px !important;\n height: 19px !important;\n user-select: none;\n top: 50%;\n transform: translateY(-50%);\n\n &-left {\n left: 10px;\n }\n\n &-notClickable {\n pointer-events: none;\n }\n }\n }\n\n &-error {\n height: 1em;\n padding-top: 3px;\n color: var(--error-font-color);\n font-size: 11px;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 0.5;\n }\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"input.module.mjs","names":[],"sources":["../../../../package/common/input/input.module.pcss"],"sourcesContent":["\n.required-mark {\n padding: 0px 0px 0px 4px;\n color: var(--required-mark-color, var(--error-color));\n}\n\n.input {\n position: relative;\n width: 100%;\n --input-notch-height: 1.75em;\n\n &-placeholder {\n position: absolute;\n top: 50%;\n left: 7px;\n transform: translateY(-50%);\n transition: all 0.2s;\n opacity: 0;\n user-select: none;\n pointer-events: none;\n\n &-shown {\n animation: 0.2s fadeIn 0.3s forwards;\n }\n\n &-multiline {\n top: 14px;\n transform: translateY(0);\n }\n }\n\n &-matLabel {\n position: absolute;\n transition: all 0.3s;\n left: 7px;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n font-size: 1em;\n color: var(--input-label-resting-color, var(--text-light));\n pointer-events: none;\n user-select: none;\n\n &-floating {\n top: 0;\n bottom: auto;\n left: 14px;\n right: 0;\n font-size: 0.8em;\n color: var(--input-label-floating-color, var(--text-color));\n transform: translateY(-50%);\n }\n\n &-multiline {\n top: 14px;\n transform: translateY(0);\n }\n }\n\n &-fieldset {\n position: absolute;\n width: 100%;\n margin: 0;\n padding: 0;\n min-width: 0;\n box-sizing: border-box;\n border-radius: var(--default-border-radius);\n font-size: 0.8em;\n inset: calc(var(--input-notch-height) / -2) 0 0 0;\n padding-left: 8px;\n border-width: 1px;\n border-style: solid;\n border-color: var(--border-color);\n pointer-events: none;\n user-select: none;\n\n &-legend {\n display: block;\n max-width: 0;\n transition: max-width 0.2s;\n white-space: nowrap;\n padding: 0;\n\n &-active {\n max-width: 300px;\n }\n\n span {\n line-height: var(--input-notch-height);\n padding: 0 5px;\n opacity: 0;\n }\n\n span:empty {\n padding: 0.000001px;\n }\n }\n }\n\n &-container {\n display: flex;\n align-items: center;\n border-radius: var(--default-border-radius);\n background-color: var(--input-background);\n transition: border-color;\n cursor: text;\n height: 100%;\n\n &-multiline {\n overflow: hidden;\n padding-top: 10px;\n align-items: flex-start;\n }\n\n &-border {\n outline: 1px solid var(--border-color);\n transition: border-color;\n background-color: var(--input-background);\n outline: none;\n\n &-focused {\n outline-color: var(--primary-color);\n border-color: var(--primary-color);\n }\n\n &-searchFocused {\n outline-color: var(--search-input-color);\n outline-width: 2px;\n border-color: var(--search-input-color);\n }\n\n &-invalid {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n\n &-invalid:hover {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n\n &-error {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n }\n }\n\n &-label {\n display: flex;\n color: var(--text-color);\n height: 100%;\n\n &-column {\n flex-direction: column;\n }\n\n &-text {\n white-space: nowrap;\n margin-right: 5px;\n margin-bottom: 6px;\n display: flex;\n align-items: center;\n color: color(var(--border-color) lightness(40%));\n background-color: transparent;\n font-size: 12px;\n position: absolute;\n top: -15px;\n white-space: nowrap;\n }\n }\n\n &-upper-right-label {\n position: absolute;\n transform: translateY(calc(-100% - 1.5px));\n right: 8px;\n min-height: 12px;\n font-size: 12px;\n color: color(var(--border-color) lightness(40%));\n }\n\n &-field {\n appearance: none;\n -webkit-appearance: none;\n font-family: inherit;\n font-size: inherit;\n box-sizing: border-box;\n resize: none;\n width: 100%;\n border: none;\n border-radius: var(--default-border-radius);\n overflow: hidden;\n line-height: 1.25;\n color: var(--text-color);\n background: transparent;\n\n &:focus {\n outline: none;\n }\n\n &::placeholder {\n color: var(--text-light);\n }\n\n &-withIcon {\n padding-right: 37px !important;\n\n &-left {\n padding-right: 9px !important;\n padding-left: 37px !important;\n }\n }\n\n &-suffix {\n padding-right: 9px;\n }\n\n &-date {\n padding: 6px 9px;\n color-scheme: dark;\n\n svg {\n color: white;\n }\n }\n\n &-default {\n padding: 8px 7.5px 6px;\n }\n\n &[disabled] {\n background-color: var(--disabled-input-color);\n color: var(--disabled-font-color);\n -webkit-text-fill-color: var(--disabled-font-color);\n opacity: 1;\n\n &::placeholder {\n color: var(--disabled-font-color);\n -webkit-text-fill-color: var(--disabled-font-color);\n }\n }\n\n &-readOnly {\n cursor: default;\n color: var(--text-dark);\n -webkit-text-fill-color: var(--text-dark);\n }\n\n &-uppercase {\n text-transform: uppercase;\n }\n\n &-multiline {\n overflow-y: auto;\n resize: vertical;\n padding-top: 4px;\n min-height: 30px;\n\n &-autoResize {\n resize: none;\n overflow: hidden;\n }\n }\n\n &-icon {\n appearance: none;\n -webkit-appearance: none;\n box-sizing: border-box;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n background-color: transparent;\n border: none;\n position: absolute;\n outline: none;\n right: 10px;\n top: 8px;\n color: var(--input-icon-color);\n width: 19px !important;\n height: 19px !important;\n user-select: none;\n top: 50%;\n transform: translateY(-50%);\n\n &-left {\n left: 10px;\n }\n\n &-notClickable {\n pointer-events: none;\n }\n }\n }\n\n &-error {\n height: 1em;\n padding-top: 3px;\n color: var(--error-font-color);\n font-size: 11px;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 0.5;\n }\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"inputDropdown.module.mjs","names":[],"sources":["../../../../package/common/inputDropdown/inputDropdown.module.pcss"],"sourcesContent":[".inputDropdown {\n position: relative;\n}\n\n.dropdown {\n position: fixed;\n width: fit-content;\n max-width: 240px;\n color: var(--text-color);\n border-radius: var(--default-border-radius);\n background: var(--background-modal);\n box-shadow: var(--card-shadow);\n box-sizing: border-box;\n overflow: hidden;\n transition: all 0.1s;\n transform-origin: top left;\n opacity: 0;\n transform: scale(0.95);\n z-index: 1;\n\n &-scroll {\n overflow: auto;\n max-height: 200px;\n }\n\n &-shown {\n transform: scale(1);\n opacity: 1;\n }\n\n &-flip {\n transform-origin: bottom left;\n }\n\n &-item {\n padding: 8px;\n z-index: 0;\n outline: none;\n cursor: pointer;\n\n &:hover,\n &:focus {\n background: var(--background-accent);\n }\n\n &-highlighted {\n background: var(--background-accent);\n }\n }\n\n &-category {\n padding: 16px 8px 4px 8px;\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"inputDropdown.module.mjs","names":[],"sources":["../../../../package/common/inputDropdown/inputDropdown.module.pcss"],"sourcesContent":[".inputDropdown {\n position: relative;\n}\n\n.dropdown {\n position: fixed;\n width: fit-content;\n max-width: 240px;\n color: var(--text-color);\n border-radius: var(--default-border-radius);\n background: var(--background-modal);\n box-shadow: var(--card-shadow);\n box-sizing: border-box;\n overflow: hidden;\n transition: all 0.1s;\n transform-origin: top left;\n opacity: 0;\n transform: scale(0.95);\n z-index: 1;\n\n &-scroll {\n overflow: auto;\n max-height: 200px;\n }\n\n &-shown {\n transform: scale(1);\n opacity: 1;\n }\n\n &-flip {\n transform-origin: bottom left;\n }\n\n &-item {\n padding: 8px;\n z-index: 0;\n outline: none;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n\n &:hover,\n &:focus {\n background: var(--background-accent);\n }\n\n &-highlighted {\n background: var(--background-accent);\n }\n }\n\n &-category {\n padding: 16px 8px 4px 8px;\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"klipyPicker.module.mjs","names":[],"sources":["../../../../package/common/klipyPicker/klipyPicker.module.pcss"],"sourcesContent":[".klipyPicker {\n &-selected {\n margin-top: 8px;\n }\n\n &-modal {\n &-content {\n display: flex;\n flex-flow: column;\n gap: var(--spacing-m);\n }\n }\n\n &-suggestions {\n &-container {\n max-width: 420px;\n }\n\n &-item {\n cursor: pointer;\n }\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"klipyPicker.module.mjs","names":[],"sources":["../../../../package/common/klipyPicker/klipyPicker.module.pcss"],"sourcesContent":[".klipyPicker {\n &-selected {\n margin-top: 8px;\n }\n\n &-modal {\n &-content {\n display: flex;\n flex-flow: column;\n gap: var(--spacing-m);\n }\n }\n\n &-suggestions {\n &-container {\n max-width: 420px;\n }\n\n &-item {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.module.mjs","names":[],"sources":["../../../../package/common/modal/modal.module.pcss"],"sourcesContent":["\n.modal {\n padding: 16px;\n border-radius: var(--default-border-radius);\n background: var(--background-modal);\n color: var(--text-color);\n font-family: var(--default-font);\n box-sizing: border-box;\n position: relative;\n transform-origin: bottom center;\n animation:\n slideIn 0.2s,\n fadeIn 0.3s forwards;\n max-width: 95%;\n max-height: 95%;\n overflow: auto;\n\n @media not (--breakpoint-desktop) {\n max-width: 100%;\n max-height: 100%;\n }\n\n &-container {\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n top: 0;\n left: 0;\n\n @media (--breakpoint-tablet) {\n z-index: 1;\n }\n }\n\n &-header {\n display: flex;\n gap: 8px;\n justify-content: space-between;\n margin-bottom: 16px;\n\n div {\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n svg {\n cursor: pointer;\n }\n }\n\n &-wrapper {\n position: fixed;\n width: 100%;\n height: 100%;\n background: #00000052;\n top: 0;\n left: 0;\n transition: all 0.3s ease-in-out;\n opacity: 0;\n\n &-shown {\n opacity: 1;\n }\n }\n}\n\n@keyframes slideIn {\n from {\n transform: scale(0);\n }\n to {\n transform: scale(0.99);\n }\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"modal.module.mjs","names":[],"sources":["../../../../package/common/modal/modal.module.pcss"],"sourcesContent":["\n.modal {\n padding: 16px;\n border-radius: var(--default-border-radius);\n background: var(--background-modal);\n color: var(--text-color);\n font-family: var(--default-font);\n box-sizing: border-box;\n position: relative;\n transform-origin: bottom center;\n animation:\n slideIn 0.2s,\n fadeIn 0.3s forwards;\n max-width: 95%;\n max-height: 95%;\n overflow: auto;\n\n @media not (--breakpoint-desktop) {\n max-width: 100%;\n max-height: 100%;\n }\n\n &-container {\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n top: 0;\n left: 0;\n\n @media (--breakpoint-tablet) {\n z-index: 1;\n }\n }\n\n &-header {\n display: flex;\n gap: 8px;\n justify-content: space-between;\n margin-bottom: 16px;\n\n div {\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n svg {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n }\n\n &-wrapper {\n position: fixed;\n width: 100%;\n height: 100%;\n background: #00000052;\n top: 0;\n left: 0;\n transition: all 0.3s ease-in-out;\n opacity: 0;\n\n &-shown {\n opacity: 1;\n }\n }\n}\n\n@keyframes slideIn {\n from {\n transform: scale(0);\n }\n to {\n transform: scale(0.99);\n }\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"numberInput.module.mjs","names":[],"sources":["../../../../package/common/numberInput/numberInput.module.pcss"],"sourcesContent":[".numberInput {}\n\n.arrows {\n display: flex;\n flex-direction: column;\n align-self: stretch;\n border-left: 1px solid var(--border-color);\n margin: 4px 0;\n}\n\n.arrowBtn {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n background: none;\n border: none;\n cursor: pointer;\n color: var(--text-dark);\n padding: 0 6px;\n font-size: 0.55rem;\n line-height: 1;\n transition: color 0.15s, background 0.15s;\n\n &:hover {\n color: var(--primary-color);\n background: var(--background-accent-light);\n }\n\n &:active {\n color: var(--primary-lighter);\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"numberInput.module.mjs","names":[],"sources":["../../../../package/common/numberInput/numberInput.module.pcss"],"sourcesContent":[".numberInput {}\n\n.arrows {\n display: flex;\n flex-direction: column;\n align-self: stretch;\n border-left: 1px solid var(--border-color);\n margin: 4px 0;\n}\n\n.arrowBtn {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n background: none;\n border: none;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n color: var(--text-dark);\n padding: 0 6px;\n font-size: 0.55rem;\n line-height: 1;\n transition: color 0.15s, background 0.15s;\n\n &:hover {\n color: var(--primary-color);\n background: var(--background-accent-light);\n }\n\n &:active {\n color: var(--primary-lighter);\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"optionPicker.module.mjs","names":[],"sources":["../../../../package/common/optionPicker/optionPicker.module.pcss"],"sourcesContent":[".optionPicker{\n display: flex;\n width: 100%;\n gap: var(--spacing-m);\n border-radius: var(--default-border-radius);\n border: 1px solid var(--border-color);\n justify-content: space-around;\n position: relative;\n overflow: hidden;\n\n &-chip {\n position: absolute;\n height: 100%;\n top: 0;\n left: 0;\n background: var(--primary-color);\n border-radius: var(--default-border-radius);\n transition: left 0.25s ease-in-out, width 0.25s ease-in-out;\n }\n\n &-option {\n position: relative;\n width: 100%;\n height: 100%;\n display: block;\n text-align: center;\n cursor: pointer;\n padding: var(--spacing-m);\n overflow: hidden;\n text-overflow: ellipsis;\n border-radius: var(--default-border-radius);\n transition: color 0.25s;\n\n &:focus {\n outline: var(--primary-color) solid 2px;\n outline-offset: -2px;\n }\n\n &-active {\n color: var(--text-on-primary);\n }\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"optionPicker.module.mjs","names":[],"sources":["../../../../package/common/optionPicker/optionPicker.module.pcss"],"sourcesContent":[".optionPicker{\n display: flex;\n width: 100%;\n gap: var(--spacing-m);\n border-radius: var(--default-border-radius);\n border: 1px solid var(--border-color);\n justify-content: space-around;\n position: relative;\n overflow: hidden;\n\n &-chip {\n position: absolute;\n height: 100%;\n top: 0;\n left: 0;\n background: var(--primary-color);\n border-radius: var(--default-border-radius);\n transition: left 0.25s ease-in-out, width 0.25s ease-in-out;\n }\n\n &-option {\n position: relative;\n width: 100%;\n height: 100%;\n display: block;\n text-align: center;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n padding: var(--spacing-m);\n overflow: hidden;\n text-overflow: ellipsis;\n border-radius: var(--default-border-radius);\n transition: color 0.25s;\n\n &:focus {\n outline: var(--primary-color) solid 2px;\n outline-offset: -2px;\n }\n\n &-active {\n color: var(--text-on-primary);\n }\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radioGroup.module.mjs","names":[],"sources":["../../../../package/common/radioGroup/radioGroup.module.pcss"],"sourcesContent":[".radioGroup {\n --radio-size: 18px;\n user-select: none;\n display: flex;\n flex-direction: column;\n gap: 12px;\n width: fit-content;\n\n &-horizontal {\n flex-direction: row;\n flex-wrap: wrap;\n gap: 20px;\n }\n\n &-disabled {\n filter: brightness(0.85);\n cursor: not-allowed;\n }\n\n &-error &-radio:not(.radioGroup-radio-checked) {\n border-color: var(--error-color);\n }\n\n &-option {\n display: flex;\n align-items: flex-start;\n column-gap: 10px;\n cursor: pointer;\n border: 1px solid transparent;\n border-radius: var(--default-border-radius);\n margin: -1px;\n color: var(--text-color);\n font-family: var(--default-font);\n font-size: var(--default-font-size);\n\n &:focus-visible {\n outline: none;\n border-color: var(--primary-color);\n }\n\n &-disabled {\n cursor: not-allowed;\n opacity: 0.55;\n }\n }\n\n &-radio {\n flex-shrink: 0;\n width: var(--radio-size);\n height: var(--radio-size);\n border-radius: 50%;\n border: 1.8px solid var(--border-color);\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 1px;\n transition: border-color 0.15s;\n\n &-checked {\n border-color: var(--primary-color);\n }\n }\n\n &-dot {\n width: calc(var(--radio-size) * 0.5);\n height: calc(var(--radio-size) * 0.5);\n border-radius: 50%;\n background-color: var(--primary-color);\n transform: scale(0);\n transition: transform 0.15s ease;\n\n &-checked {\n transform: scale(1);\n }\n }\n\n &-text {\n display: flex;\n flex-direction: column;\n gap: 2px;\n }\n\n &-label {\n line-height: 1.2;\n color: var(--text-color);\n }\n\n &-description {\n font-size: 0.85em;\n line-height: 1.3;\n color: var(--text-dark);\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"radioGroup.module.mjs","names":[],"sources":["../../../../package/common/radioGroup/radioGroup.module.pcss"],"sourcesContent":[".radioGroup {\n --radio-size: 18px;\n user-select: none;\n display: flex;\n flex-direction: column;\n gap: 12px;\n width: fit-content;\n\n &-horizontal {\n flex-direction: row;\n flex-wrap: wrap;\n gap: 20px;\n }\n\n &-disabled {\n filter: brightness(0.85);\n cursor: not-allowed;\n }\n\n &-error &-radio:not(.radioGroup-radio-checked) {\n border-color: var(--error-color);\n }\n\n &-option {\n display: flex;\n align-items: flex-start;\n column-gap: 10px;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n border: 1px solid transparent;\n border-radius: var(--default-border-radius);\n margin: -1px;\n color: var(--text-color);\n font-family: var(--default-font);\n font-size: var(--default-font-size);\n\n &:focus-visible {\n outline: none;\n border-color: var(--primary-color);\n }\n\n &-disabled {\n cursor: not-allowed;\n opacity: 0.55;\n }\n }\n\n &-radio {\n flex-shrink: 0;\n width: var(--radio-size);\n height: var(--radio-size);\n border-radius: 50%;\n border: 1.8px solid var(--border-color);\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 1px;\n transition: border-color 0.15s;\n\n &-checked {\n border-color: var(--primary-color);\n }\n }\n\n &-dot {\n width: calc(var(--radio-size) * 0.5);\n height: calc(var(--radio-size) * 0.5);\n border-radius: 50%;\n background-color: var(--primary-color);\n transform: scale(0);\n transition: transform 0.15s ease;\n\n &-checked {\n transform: scale(1);\n }\n }\n\n &-text {\n display: flex;\n flex-direction: column;\n gap: 2px;\n }\n\n &-label {\n line-height: 1.2;\n color: var(--text-color);\n }\n\n &-description {\n font-size: 0.85em;\n line-height: 1.3;\n color: var(--text-dark);\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"roomDrawer.module.mjs","names":[],"sources":["../../../../package/common/roomDrawer/roomDrawer.module.pcss"],"sourcesContent":[".roomDrawer {\n display: flex;\n flex-direction: column;\n border: 1px solid var(--border-color);\n border-radius: var(--default-border-radius);\n overflow: hidden;\n background: var(--background);\n user-select: none;\n\n &-toolbar {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 6px 8px;\n background: var(--background-accent);\n border-bottom: 1px solid var(--border-color);\n\n &-sep {\n flex: 1;\n }\n\n &-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border: 1px solid transparent;\n border-radius: var(--default-border-radius);\n background: transparent;\n color: var(--text-dark);\n cursor: pointer;\n font-size: 13px;\n transition: background 0.12s, color 0.12s;\n\n &:hover:not(:disabled) {\n background: var(--background-accent-light);\n color: var(--text-color);\n }\n\n &:disabled {\n opacity: 0.35;\n cursor: not-allowed;\n }\n\n &-active {\n background: var(--primary-accent);\n color: var(--primary-color);\n border-color: var(--primary-lighter);\n }\n }\n\n &-zoomLabel {\n padding: 0 4px;\n min-width: 40px;\n height: 32px;\n border: 1px solid transparent;\n border-radius: var(--default-border-radius);\n background: transparent;\n color: var(--text-dark);\n cursor: pointer;\n font-size: 11px;\n text-align: center;\n\n &:hover {\n background: var(--background-accent-light);\n color: var(--text-color);\n }\n }\n }\n\n &-canvas {\n display: block;\n width: 100%;\n cursor: crosshair;\n user-select: none;\n\n &-select {\n cursor: default;\n }\n }\n\n &-info {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 8px;\n background: var(--background-accent);\n border-top: 1px solid var(--border-color);\n\n &-label {\n font-size: 12px;\n color: var(--text-dark);\n white-space: nowrap;\n }\n\n &-input {\n flex: 1;\n max-width: 220px;\n height: 28px;\n padding: 0 8px;\n border: 1px solid var(--border-color);\n border-radius: var(--default-border-radius);\n background: var(--background);\n color: var(--text-color);\n font-size: 13px;\n\n &:focus {\n outline: none;\n border-color: var(--primary-color);\n }\n }\n\n &-spacer {\n flex: 1;\n }\n\n &-delete {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border: 1px solid var(--border-color);\n border-radius: var(--default-border-radius);\n background: transparent;\n color: var(--text-dark);\n cursor: pointer;\n font-size: 12px;\n transition: background 0.12s, color 0.12s, border-color 0.12s;\n\n &:hover {\n background: #e53935;\n color: #fff;\n border-color: #e53935;\n }\n }\n }\n\n &-hint {\n padding: 4px 8px;\n font-size: 11px;\n color: var(--text-dark);\n background: var(--background-accent);\n border-top: 1px solid var(--border-color);\n }\n\n &-info {\n &-doorsBtn {\n display: flex;\n align-items: center;\n gap: 5px;\n height: 28px;\n padding: 0 8px;\n border: 1px solid var(--border-color);\n border-radius: var(--default-border-radius);\n background: transparent;\n color: var(--text-dark);\n cursor: pointer;\n font-size: 12px;\n white-space: nowrap;\n transition: background 0.12s, color 0.12s;\n\n &:hover {\n background: var(--background-accent-light);\n color: var(--text-color);\n }\n }\n }\n\n &-doorPanel {\n display: flex;\n flex-direction: column;\n background: var(--background-accent);\n border-top: 1px solid var(--border-color);\n\n &-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 8px;\n border-bottom: 1px solid var(--border-color);\n }\n\n &-icon {\n color: var(--text-dark);\n font-size: 12px;\n }\n\n &-title {\n flex: 1;\n font-size: 12px;\n color: var(--text-dark);\n }\n\n &-done {\n display: flex;\n align-items: center;\n gap: 5px;\n height: 26px;\n padding: 0 10px;\n border: 1px solid var(--border-color);\n border-radius: var(--default-border-radius);\n background: transparent;\n color: var(--text-dark);\n cursor: pointer;\n font-size: 12px;\n transition: background 0.12s, color 0.12s;\n\n &:hover {\n background: var(--primary-accent);\n color: var(--primary-color);\n border-color: var(--primary-lighter);\n }\n }\n\n &-list {\n display: flex;\n flex-direction: column;\n gap: 4px;\n padding: 6px 8px;\n max-height: 130px;\n overflow-y: auto;\n }\n\n &-item {\n display: flex;\n align-items: center;\n gap: 6px;\n }\n\n &-label {\n font-size: 12px;\n color: var(--text-color);\n min-width: 48px;\n }\n\n &-widthLabel {\n font-size: 11px;\n color: var(--text-dark);\n }\n\n &-empty {\n font-size: 11px;\n color: var(--text-dark);\n font-style: italic;\n padding: 2px 0;\n }\n }\n\n &-canvas {\n &-door {\n cursor: crosshair;\n }\n }\n}\n\n/* ── SVG element classes ── */\n\n.doorGap {\n stroke: var(--background);\n stroke-width: 4;\n stroke-linecap: butt;\n pointer-events: none;\n}\n\n.doorMarker {\n fill: var(--primary-color);\n stroke: var(--background);\n stroke-width: 0.8;\n pointer-events: all;\n cursor: grab;\n\n &:active {\n cursor: grabbing;\n }\n}\n\n.gridLine {\n stroke: var(--text-color);\n stroke-width: 0.3;\n opacity: 0.12;\n}\n\n.roomFill {\n fill: var(--primary-accent);\n fill-opacity: 0.08;\n stroke: none;\n\n &-selected {\n fill-opacity: 0.22;\n }\n}\n\n.roomStroke {\n fill: none;\n stroke: var(--primary-color);\n stroke-width: 1.5;\n stroke-linejoin: round;\n\n &-selected {\n stroke: var(--primary-lighter);\n stroke-width: 2;\n }\n}\n\n.roomText {\n fill: var(--text-color);\n stroke: none;\n font-size: 7px;\n pointer-events: none;\n user-select: none;\n}\n\n.doorPanel {\n stroke: var(--primary-color);\n stroke-width: 1.5;\n stroke-linecap: round;\n\n &-selected {\n stroke: var(--primary-lighter);\n stroke-width: 2;\n }\n}\n\n.doorSwing {\n fill: none;\n stroke: var(--primary-color);\n stroke-width: 0.8;\n stroke-dasharray: 3 2;\n pointer-events: none;\n\n &-selected {\n stroke: var(--primary-lighter);\n }\n}\n\n.preview {\n fill: var(--primary-accent);\n stroke: var(--primary-color);\n stroke-width: 1;\n stroke-dasharray: 4 2;\n pointer-events: none;\n}\n\n.polyCloseTarget {\n fill: var(--primary-color);\n opacity: 0.5;\n pointer-events: none;\n}\n\n.polyVertex {\n fill: var(--primary-color);\n stroke: none;\n pointer-events: none;\n}\n\n.vertexHandle {\n fill: var(--background);\n stroke: var(--primary-color);\n stroke-width: 1.5;\n cursor: grab;\n pointer-events: all;\n\n &:hover {\n fill: var(--primary-accent);\n stroke: var(--primary-lighter);\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"roomDrawer.module.mjs","names":[],"sources":["../../../../package/common/roomDrawer/roomDrawer.module.pcss"],"sourcesContent":[".roomDrawer {\n display: flex;\n flex-direction: column;\n border: 1px solid var(--border-color);\n border-radius: var(--default-border-radius);\n overflow: hidden;\n background: var(--background);\n user-select: none;\n\n &-toolbar {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 6px 8px;\n background: var(--background-accent);\n border-bottom: 1px solid var(--border-color);\n\n &-sep {\n flex: 1;\n }\n\n &-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border: 1px solid transparent;\n border-radius: var(--default-border-radius);\n background: transparent;\n color: var(--text-dark);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n font-size: 13px;\n transition: background 0.12s, color 0.12s;\n\n &:hover:not(:disabled) {\n background: var(--background-accent-light);\n color: var(--text-color);\n }\n\n &:disabled {\n opacity: 0.35;\n cursor: not-allowed;\n }\n\n &-active {\n background: var(--primary-accent);\n color: var(--primary-color);\n border-color: var(--primary-lighter);\n }\n }\n\n &-zoomLabel {\n padding: 0 4px;\n min-width: 40px;\n height: 32px;\n border: 1px solid transparent;\n border-radius: var(--default-border-radius);\n background: transparent;\n color: var(--text-dark);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n font-size: 11px;\n text-align: center;\n\n &:hover {\n background: var(--background-accent-light);\n color: var(--text-color);\n }\n }\n }\n\n &-canvas {\n display: block;\n width: 100%;\n cursor: crosshair;\n user-select: none;\n\n &-select {\n cursor: default;\n }\n }\n\n &-info {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 8px;\n background: var(--background-accent);\n border-top: 1px solid var(--border-color);\n\n &-label {\n font-size: 12px;\n color: var(--text-dark);\n white-space: nowrap;\n }\n\n &-input {\n flex: 1;\n max-width: 220px;\n height: 28px;\n padding: 0 8px;\n border: 1px solid var(--border-color);\n border-radius: var(--default-border-radius);\n background: var(--background);\n color: var(--text-color);\n font-size: 13px;\n\n &:focus {\n outline: none;\n border-color: var(--primary-color);\n }\n }\n\n &-spacer {\n flex: 1;\n }\n\n &-delete {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border: 1px solid var(--border-color);\n border-radius: var(--default-border-radius);\n background: transparent;\n color: var(--text-dark);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n font-size: 12px;\n transition: background 0.12s, color 0.12s, border-color 0.12s;\n\n &:hover {\n background: #e53935;\n color: #fff;\n border-color: #e53935;\n }\n }\n }\n\n &-hint {\n padding: 4px 8px;\n font-size: 11px;\n color: var(--text-dark);\n background: var(--background-accent);\n border-top: 1px solid var(--border-color);\n }\n\n &-info {\n &-doorsBtn {\n display: flex;\n align-items: center;\n gap: 5px;\n height: 28px;\n padding: 0 8px;\n border: 1px solid var(--border-color);\n border-radius: var(--default-border-radius);\n background: transparent;\n color: var(--text-dark);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n font-size: 12px;\n white-space: nowrap;\n transition: background 0.12s, color 0.12s;\n\n &:hover {\n background: var(--background-accent-light);\n color: var(--text-color);\n }\n }\n }\n\n &-doorPanel {\n display: flex;\n flex-direction: column;\n background: var(--background-accent);\n border-top: 1px solid var(--border-color);\n\n &-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 8px;\n border-bottom: 1px solid var(--border-color);\n }\n\n &-icon {\n color: var(--text-dark);\n font-size: 12px;\n }\n\n &-title {\n flex: 1;\n font-size: 12px;\n color: var(--text-dark);\n }\n\n &-done {\n display: flex;\n align-items: center;\n gap: 5px;\n height: 26px;\n padding: 0 10px;\n border: 1px solid var(--border-color);\n border-radius: var(--default-border-radius);\n background: transparent;\n color: var(--text-dark);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n font-size: 12px;\n transition: background 0.12s, color 0.12s;\n\n &:hover {\n background: var(--primary-accent);\n color: var(--primary-color);\n border-color: var(--primary-lighter);\n }\n }\n\n &-list {\n display: flex;\n flex-direction: column;\n gap: 4px;\n padding: 6px 8px;\n max-height: 130px;\n overflow-y: auto;\n }\n\n &-item {\n display: flex;\n align-items: center;\n gap: 6px;\n }\n\n &-label {\n font-size: 12px;\n color: var(--text-color);\n min-width: 48px;\n }\n\n &-widthLabel {\n font-size: 11px;\n color: var(--text-dark);\n }\n\n &-empty {\n font-size: 11px;\n color: var(--text-dark);\n font-style: italic;\n padding: 2px 0;\n }\n }\n\n &-canvas {\n &-door {\n cursor: crosshair;\n }\n }\n}\n\n/* ── SVG element classes ── */\n\n.doorGap {\n stroke: var(--background);\n stroke-width: 4;\n stroke-linecap: butt;\n pointer-events: none;\n}\n\n.doorMarker {\n fill: var(--primary-color);\n stroke: var(--background);\n stroke-width: 0.8;\n pointer-events: all;\n cursor: grab;\n\n &:active {\n cursor: grabbing;\n }\n}\n\n.gridLine {\n stroke: var(--text-color);\n stroke-width: 0.3;\n opacity: 0.12;\n}\n\n.roomFill {\n fill: var(--primary-accent);\n fill-opacity: 0.08;\n stroke: none;\n\n &-selected {\n fill-opacity: 0.22;\n }\n}\n\n.roomStroke {\n fill: none;\n stroke: var(--primary-color);\n stroke-width: 1.5;\n stroke-linejoin: round;\n\n &-selected {\n stroke: var(--primary-lighter);\n stroke-width: 2;\n }\n}\n\n.roomText {\n fill: var(--text-color);\n stroke: none;\n font-size: 7px;\n pointer-events: none;\n user-select: none;\n}\n\n.doorPanel {\n stroke: var(--primary-color);\n stroke-width: 1.5;\n stroke-linecap: round;\n\n &-selected {\n stroke: var(--primary-lighter);\n stroke-width: 2;\n }\n}\n\n.doorSwing {\n fill: none;\n stroke: var(--primary-color);\n stroke-width: 0.8;\n stroke-dasharray: 3 2;\n pointer-events: none;\n\n &-selected {\n stroke: var(--primary-lighter);\n }\n}\n\n.preview {\n fill: var(--primary-accent);\n stroke: var(--primary-color);\n stroke-width: 1;\n stroke-dasharray: 4 2;\n pointer-events: none;\n}\n\n.polyCloseTarget {\n fill: var(--primary-color);\n opacity: 0.5;\n pointer-events: none;\n}\n\n.polyVertex {\n fill: var(--primary-color);\n stroke: none;\n pointer-events: none;\n}\n\n.vertexHandle {\n fill: var(--background);\n stroke: var(--primary-color);\n stroke-width: 1.5;\n cursor: grab;\n pointer-events: all;\n\n &:hover {\n fill: var(--primary-accent);\n stroke: var(--primary-lighter);\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"roomViewer.module.mjs","names":[],"sources":["../../../../package/common/roomViewer/roomViewer.module.pcss"],"sourcesContent":[".roomViewer{\n &-container{\n &Loading {\n opacity: 0.4;\n pointer-events: none;\n }\n\n svg{\n stroke-width: 1px;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-opacity: 1;\n path {\n stroke: var(--primary-color);\n fill: transparent;\n }\n path[id=\"background\"] {\n stroke: none;\n fill: transparent;\n cursor: pointer;\n }\n *[id^=\"room\"] {\n cursor: pointer;\n }\n\n text{\n fill: var(--text-color);\n stroke: none;\n font-size: 5px;\n }\n }\n }\n\n &-active{\n stroke: #18f810 !important;\n fill: #20f81013 !important;\n path {\n stroke: #18f810 !important;\n fill: none !important;\n }\n path[id=\"background\"] {\n stroke: none !important;\n fill: #20f81013 !important;\n }\n }\n\n &-selected {\n stroke: #18f810 !important;\n path {\n stroke: #18f810 !important;\n fill: none !important;\n }\n path[id=\"background\"] {\n stroke: none !important;\n fill: #20f81013 !important;\n }\n\n text{\n stroke: none;\n fill: var(--text-color);\n }\n }\n\n &-tint {\n fill: #20f81013 !important;\n\n path{\n fill: #20f81013 !important;\n }\n\n text{\n stroke: none;\n fill: none;\n }\n }\n\n &-actions{\n display: flex;\n width: 100%;\n justify-content: center;\n gap: 8px;\n font-size: 16px;\n\n svg{\n cursor: pointer;\n }\n }\n\n &-header{\n margin-bottom: 4px;\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"roomViewer.module.mjs","names":[],"sources":["../../../../package/common/roomViewer/roomViewer.module.pcss"],"sourcesContent":[".roomViewer{\n &-container{\n &Loading {\n opacity: 0.4;\n pointer-events: none;\n }\n\n svg{\n stroke-width: 1px;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-opacity: 1;\n path {\n stroke: var(--primary-color);\n fill: transparent;\n }\n path[id=\"background\"] {\n stroke: none;\n fill: transparent;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n *[id^=\"room\"] {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n\n text{\n fill: var(--text-color);\n stroke: none;\n font-size: 5px;\n }\n }\n }\n\n &-active{\n stroke: #18f810 !important;\n fill: #20f81013 !important;\n path {\n stroke: #18f810 !important;\n fill: none !important;\n }\n path[id=\"background\"] {\n stroke: none !important;\n fill: #20f81013 !important;\n }\n }\n\n &-selected {\n stroke: #18f810 !important;\n path {\n stroke: #18f810 !important;\n fill: none !important;\n }\n path[id=\"background\"] {\n stroke: none !important;\n fill: #20f81013 !important;\n }\n\n text{\n stroke: none;\n fill: var(--text-color);\n }\n }\n\n &-tint {\n fill: #20f81013 !important;\n\n path{\n fill: #20f81013 !important;\n }\n\n text{\n stroke: none;\n fill: none;\n }\n }\n\n &-actions{\n display: flex;\n width: 100%;\n justify-content: center;\n gap: 8px;\n font-size: 16px;\n\n svg{\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n }\n\n &-header{\n margin-bottom: 4px;\n }\n}\n"],"mappings":""}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import e from"./slider.module.mjs";import t,{useEffect as n,useRef as r,useState as i}from"react";import a from"classnames";import{jsx as o,jsxs as s}from"react/jsx-runtime";function c(e){let t=String(e),n=t.indexOf(`.`);return n===-1?0:t.length-n-1}function l({value:l,defaultValue:u,onChange:d,onChangeEnd:f,min:p=0,max:m=100,step:h=1,disabled:g=!1,marks:_,showValue:v=!1,formatValue:y,size:b=`18px`,tabIndex:x=0,className:S,style:C,classNames:w,styles:T,"aria-label":E,...D}){let O=r(null),k=r(null),A=r(!1),[j,M]=i(!1),N=l!==void 0,[P,F]=i(u??p),I=c(h);function L(e){return Math.min(m,Math.max(p,e))}function R(e){let t=Math.round((e-p)/h)*h+p;return Number(L(t).toFixed(I))}let z=L(N?l:P),B=r(z);n(()=>{B.current=z},[z]);let V=`${(m>p?(z-p)/(m-p):0)*100}%`;function H(e,t){let n=R(e);n!==B.current&&(B.current=n,N||F(n),d?.(n)),t&&f?.(n)}function U(e){let t=O.current;if(!t)return B.current;let n=t.getBoundingClientRect(),r=n.width?(e-n.left)/n.width:0;return p+Math.min(1,Math.max(0,r))*(m-p)}function W(e){g||(e.preventDefault(),k.current?.focus(),k.current?.setPointerCapture?.(e.pointerId),A.current=!0,M(!0),H(U(e.clientX),!1))}function G(e){A.current&&H(U(e.clientX),!1)}function K(e){A.current&&(A.current=!1,M(!1),k.current?.releasePointerCapture?.(e.pointerId),f?.(B.current))}function q(e){if(g)return;let t=h*10,n=null;switch(e.key){case`ArrowRight`:case`ArrowUp`:n=z+h;break;case`ArrowLeft`:case`ArrowDown`:n=z-h;break;case`PageUp`:n=z+t;break;case`PageDown`:n=z-t;break;case`Home`:n=p;break;case`End`:n=m;break;default:return}e.preventDefault(),H(n,!0)}let J=y?y(z):z,Y=!!_?.some(e=>e.label!=null);return o(`div`,{...D,ref:k,role:`slider`,"aria-label":E,"aria-valuemin":p,"aria-valuemax":m,"aria-valuenow":z,"aria-valuetext":typeof J==`string`||typeof J==`number`?String(J):void 0,"aria-orientation":`horizontal`,"aria-disabled":g||void 0,tabIndex:g?-1:x,className:a(e.slider,g&&e.sliderDisabled,j&&e.sliderDragging,Y&&e.sliderHasMarkLabels,S,w?.root),style:{"--slider-thumb-size":b,...C,...T?.root},onPointerDown:W,onPointerMove:G,onPointerUp:K,onKeyDown:q,children:s(`div`,{ref:O,className:a(e.sliderTrack,w?.track),style:T?.track,children:[o(`div`,{className:a(e.sliderRange,w?.range),style:{width:V,...T?.range}}),_?.map(n=>{let r=`${(m>p?(L(n.value)-p)/(m-p):0)*100}%`;return s(t.Fragment,{children:[o(`span`,{className:a(e.sliderMark,w?.mark),style:{left:r,...T?.mark}}),n.label!=null&&o(`span`,{className:a(e.sliderMarkLabel,w?.markLabel),style:{left:r,...T?.markLabel},children:n.label})]},n.value)}),o(`div`,{className:a(e.sliderThumb,w?.thumb),style:{left:V,...T?.thumb},children:v&&o(`span`,{className:a(e.sliderValue,w?.value),style:T?.value,children:J})})]})})}export{l as default};
|
|
2
|
+
//# sourceMappingURL=slider.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"slider.mjs","names":[],"sources":["../../../../package/common/slider/slider.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState, type ReactElement } from 'react';\nimport cx from 'classnames';\nimport styles from './slider.module.pcss';\nimport type { SliderProps } from './slider.types';\n\n/** Count decimal places in a step so snapped values don't accumulate float error. */\nfunction decimalsOf(step: number): number {\n const s = String(step);\n const dot = s.indexOf('.');\n return dot === -1 ? 0 : s.length - dot - 1;\n}\n\nexport default function Slider({\n value,\n defaultValue,\n onChange,\n onChangeEnd,\n min = 0,\n max = 100,\n step = 1,\n disabled = false,\n marks,\n showValue = false,\n formatValue,\n size = '18px',\n tabIndex = 0,\n className,\n style,\n classNames,\n styles: slotStyles,\n 'aria-label': ariaLabel,\n ...rest\n}: SliderProps): ReactElement {\n const trackRef = useRef<HTMLDivElement>(null);\n const rootRef = useRef<HTMLDivElement>(null);\n const draggingRef = useRef(false);\n const [dragging, setDragging] = useState(false);\n\n const isControlled = value !== undefined;\n const [internal, setInternal] = useState<number>(defaultValue ?? min);\n\n const decimals = decimalsOf(step);\n\n function clamp(v: number): number {\n return Math.min(max, Math.max(min, v));\n }\n\n function snap(v: number): number {\n const snapped = Math.round((v - min) / step) * step + min;\n return Number(clamp(snapped).toFixed(decimals));\n }\n\n const current = clamp(isControlled ? (value as number) : internal);\n // Latest committed value, for reading inside pointer handlers without stale\n // closures. Synced after render (never written during render) and optimistically\n // in commit() so a drag burst dedupes before the next render lands.\n const currentRef = useRef(current);\n useEffect(() => {\n currentRef.current = current;\n }, [current]);\n\n const fraction = max > min ? (current - min) / (max - min) : 0;\n const percent = `${fraction * 100}%`;\n\n function commit(next: number, ended: boolean) {\n const snapped = snap(next);\n if (snapped !== currentRef.current) {\n currentRef.current = snapped;\n if (!isControlled) setInternal(snapped);\n onChange?.(snapped);\n }\n if (ended) onChangeEnd?.(snapped);\n }\n\n function valueFromClientX(clientX: number): number {\n const track = trackRef.current;\n if (!track) return currentRef.current;\n const rect = track.getBoundingClientRect();\n const ratio = rect.width ? (clientX - rect.left) / rect.width : 0;\n return min + Math.min(1, Math.max(0, ratio)) * (max - min);\n }\n\n function handlePointerDown(e: React.PointerEvent<HTMLDivElement>) {\n if (disabled) return;\n e.preventDefault();\n rootRef.current?.focus();\n rootRef.current?.setPointerCapture?.(e.pointerId);\n draggingRef.current = true;\n setDragging(true);\n commit(valueFromClientX(e.clientX), false);\n }\n\n function handlePointerMove(e: React.PointerEvent<HTMLDivElement>) {\n if (!draggingRef.current) return;\n commit(valueFromClientX(e.clientX), false);\n }\n\n function handlePointerUp(e: React.PointerEvent<HTMLDivElement>) {\n if (!draggingRef.current) return;\n draggingRef.current = false;\n setDragging(false);\n rootRef.current?.releasePointerCapture?.(e.pointerId);\n onChangeEnd?.(currentRef.current);\n }\n\n function handleKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {\n if (disabled) return;\n const page = step * 10;\n let next: number | null = null;\n switch (e.key) {\n case 'ArrowRight':\n case 'ArrowUp':\n next = current + step;\n break;\n case 'ArrowLeft':\n case 'ArrowDown':\n next = current - step;\n break;\n case 'PageUp':\n next = current + page;\n break;\n case 'PageDown':\n next = current - page;\n break;\n case 'Home':\n next = min;\n break;\n case 'End':\n next = max;\n break;\n default:\n return;\n }\n e.preventDefault();\n commit(next, true);\n }\n\n const valueText = formatValue ? formatValue(current) : current;\n const hasMarkLabels = !!marks?.some((m) => m.label != null);\n\n return (\n <div\n {...rest}\n ref={rootRef}\n role=\"slider\"\n aria-label={ariaLabel}\n aria-valuemin={min}\n aria-valuemax={max}\n aria-valuenow={current}\n aria-valuetext={typeof valueText === 'string' || typeof valueText === 'number' ? String(valueText) : undefined}\n aria-orientation=\"horizontal\"\n aria-disabled={disabled || undefined}\n tabIndex={disabled ? -1 : tabIndex}\n className={cx(\n styles.slider,\n disabled && styles.sliderDisabled,\n dragging && styles.sliderDragging,\n hasMarkLabels && styles.sliderHasMarkLabels,\n className,\n classNames?.root,\n )}\n style={{ '--slider-thumb-size': size, ...style, ...slotStyles?.root } as React.CSSProperties}\n onPointerDown={handlePointerDown}\n onPointerMove={handlePointerMove}\n onPointerUp={handlePointerUp}\n onKeyDown={handleKeyDown}\n >\n <div ref={trackRef} className={cx(styles.sliderTrack, classNames?.track)} style={slotStyles?.track}>\n <div\n className={cx(styles.sliderRange, classNames?.range)}\n style={{ width: percent, ...slotStyles?.range }}\n />\n {marks?.map((mark) => {\n const markFraction = max > min ? (clamp(mark.value) - min) / (max - min) : 0;\n const left = `${markFraction * 100}%`;\n return (\n <React.Fragment key={mark.value}>\n <span\n className={cx(styles.sliderMark, classNames?.mark)}\n style={{ left, ...slotStyles?.mark }}\n />\n {mark.label != null && (\n <span\n className={cx(styles.sliderMarkLabel, classNames?.markLabel)}\n style={{ left, ...slotStyles?.markLabel }}\n >\n {mark.label}\n </span>\n )}\n </React.Fragment>\n );\n })}\n <div\n className={cx(styles.sliderThumb, classNames?.thumb)}\n style={{ left: percent, ...slotStyles?.thumb }}\n >\n {showValue && (\n <span className={cx(styles.sliderValue, classNames?.value)} style={slotStyles?.value}>\n {valueText}\n </span>\n )}\n </div>\n </div>\n </div>\n );\n}\n"],"mappings":"8KAMA,SAAS,EAAW,EAAsB,CACxC,IAAM,EAAI,OAAO,CAAI,EACf,EAAM,EAAE,QAAQ,GAAG,EACzB,OAAO,IAAQ,GAAK,EAAI,EAAE,OAAS,EAAM,CAC3C,CAEA,SAAwB,EAAO,CAC7B,QACA,eACA,WACA,cACA,MAAM,EACN,MAAM,IACN,OAAO,EACP,WAAW,GACX,QACA,YAAY,GACZ,cACA,OAAO,OACP,WAAW,EACX,YACA,QACA,aACA,OAAQ,EACR,aAAc,EACd,GAAG,GACyB,CAC5B,IAAM,EAAW,EAAuB,IAAI,EACtC,EAAU,EAAuB,IAAI,EACrC,EAAc,EAAO,EAAK,EAC1B,CAAC,EAAU,GAAe,EAAS,EAAK,EAExC,EAAe,IAAU,IAAA,GACzB,CAAC,EAAU,GAAe,EAAiB,GAAgB,CAAG,EAE9D,EAAW,EAAW,CAAI,EAEhC,SAAS,EAAM,EAAmB,CAChC,OAAO,KAAK,IAAI,EAAK,KAAK,IAAI,EAAK,CAAC,CAAC,CACvC,CAEA,SAAS,EAAK,EAAmB,CAC/B,IAAM,EAAU,KAAK,OAAO,EAAI,GAAO,CAAI,EAAI,EAAO,EACtD,OAAO,OAAO,EAAM,CAAO,EAAE,QAAQ,CAAQ,CAAC,CAChD,CAEA,IAAM,EAAU,EAAM,EAAgB,EAAmB,CAAQ,EAI3D,EAAa,EAAO,CAAO,EACjC,MAAgB,CACd,EAAW,QAAU,CACvB,EAAG,CAAC,CAAO,CAAC,EAGZ,IAAM,EAAU,IADC,EAAM,GAAO,EAAU,IAAQ,EAAM,GAAO,GAC/B,IAAI,GAElC,SAAS,EAAO,EAAc,EAAgB,CAC5C,IAAM,EAAU,EAAK,CAAI,EACrB,IAAY,EAAW,UACzB,EAAW,QAAU,EAChB,GAAc,EAAY,CAAO,EACtC,IAAW,CAAO,GAEhB,GAAO,IAAc,CAAO,CAClC,CAEA,SAAS,EAAiB,EAAyB,CACjD,IAAM,EAAQ,EAAS,QACvB,GAAI,CAAC,EAAO,OAAO,EAAW,QAC9B,IAAM,EAAO,EAAM,sBAAsB,EACnC,EAAQ,EAAK,OAAS,EAAU,EAAK,MAAQ,EAAK,MAAQ,EAChE,OAAO,EAAM,KAAK,IAAI,EAAG,KAAK,IAAI,EAAG,CAAK,CAAC,GAAK,EAAM,EACxD,CAEA,SAAS,EAAkB,EAAuC,CAC5D,IACJ,EAAE,eAAe,EACjB,EAAQ,SAAS,MAAM,EACvB,EAAQ,SAAS,oBAAoB,EAAE,SAAS,EAChD,EAAY,QAAU,GACtB,EAAY,EAAI,EAChB,EAAO,EAAiB,EAAE,OAAO,EAAG,EAAK,EAC3C,CAEA,SAAS,EAAkB,EAAuC,CAC3D,EAAY,SACjB,EAAO,EAAiB,EAAE,OAAO,EAAG,EAAK,CAC3C,CAEA,SAAS,EAAgB,EAAuC,CACzD,EAAY,UACjB,EAAY,QAAU,GACtB,EAAY,EAAK,EACjB,EAAQ,SAAS,wBAAwB,EAAE,SAAS,EACpD,IAAc,EAAW,OAAO,EAClC,CAEA,SAAS,EAAc,EAAwC,CAC7D,GAAI,EAAU,OACd,IAAM,EAAO,EAAO,GAChB,EAAsB,KAC1B,OAAQ,EAAE,IAAV,CACE,IAAK,aACL,IAAK,UACH,EAAO,EAAU,EACjB,MACF,IAAK,YACL,IAAK,YACH,EAAO,EAAU,EACjB,MACF,IAAK,SACH,EAAO,EAAU,EACjB,MACF,IAAK,WACH,EAAO,EAAU,EACjB,MACF,IAAK,OACH,EAAO,EACP,MACF,IAAK,MACH,EAAO,EACP,MACF,QACE,MACJ,CACA,EAAE,eAAe,EACjB,EAAO,EAAM,EAAI,CACnB,CAEA,IAAM,EAAY,EAAc,EAAY,CAAO,EAAI,EACjD,EAAgB,CAAC,CAAC,GAAO,KAAM,GAAM,EAAE,OAAS,IAAI,EAE1D,OACE,EAAC,MAAD,CACE,GAAI,EACJ,IAAK,EACL,KAAK,SACL,aAAY,EACZ,gBAAe,EACf,gBAAe,EACf,gBAAe,EACf,iBAAgB,OAAO,GAAc,UAAY,OAAO,GAAc,SAAW,OAAO,CAAS,EAAI,IAAA,GACrG,mBAAiB,aACjB,gBAAe,GAAY,IAAA,GAC3B,SAAU,EAAW,GAAK,EAC1B,UAAW,EACT,EAAO,OACP,GAAY,EAAO,eACnB,GAAY,EAAO,eACnB,GAAiB,EAAO,oBACxB,EACA,GAAY,IACd,EACA,MAAO,CAAE,sBAAuB,EAAM,GAAG,EAAO,GAAG,GAAY,IAAK,EACpE,cAAe,EACf,cAAe,EACf,YAAa,EACb,UAAW,WAEX,EAAC,MAAD,CAAK,IAAK,EAAU,UAAW,EAAG,EAAO,YAAa,GAAY,KAAK,EAAG,MAAO,GAAY,eAA7F,CACE,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,YAAa,GAAY,KAAK,EACnD,MAAO,CAAE,MAAO,EAAS,GAAG,GAAY,KAAM,CAC/C,CAAA,EACA,GAAO,IAAK,GAAS,CAEpB,IAAM,EAAO,IADQ,EAAM,GAAO,EAAM,EAAK,KAAK,EAAI,IAAQ,EAAM,GAAO,GAC5C,IAAI,GACnC,OACE,EAAC,EAAM,SAAP,CAAA,SAAA,CACE,EAAC,OAAD,CACE,UAAW,EAAG,EAAO,WAAY,GAAY,IAAI,EACjD,MAAO,CAAE,OAAM,GAAG,GAAY,IAAK,CACpC,CAAA,EACA,EAAK,OAAS,MACb,EAAC,OAAD,CACE,UAAW,EAAG,EAAO,gBAAiB,GAAY,SAAS,EAC3D,MAAO,CAAE,OAAM,GAAG,GAAY,SAAU,WAEvC,EAAK,KACF,CAAA,CAEM,CAAA,EAbK,EAAK,KAaV,CAEpB,CAAC,EACD,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,YAAa,GAAY,KAAK,EACnD,MAAO,CAAE,KAAM,EAAS,GAAG,GAAY,KAAM,WAE5C,GACC,EAAC,OAAD,CAAM,UAAW,EAAG,EAAO,YAAa,GAAY,KAAK,EAAG,MAAO,GAAY,eAC5E,CACG,CAAA,CAEL,CAAA,CACF,GACF,CAAA,CAET"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
var e={slider:`slider_qmg2W`,"slider-thumb":`slider-thumb_CHuJN`,sliderThumb:`slider-thumb_CHuJN`,"slider-disabled":`slider-disabled_T0o2S`,sliderDisabled:`slider-disabled_T0o2S`,"slider-has-mark-labels":`slider-has-mark-labels_Xw6ZJ`,sliderHasMarkLabels:`slider-has-mark-labels_Xw6ZJ`,"slider-track":`slider-track_UyKYc`,sliderTrack:`slider-track_UyKYc`,"slider-range":`slider-range_exAs9`,sliderRange:`slider-range_exAs9`,"slider-dragging":`slider-dragging_htPFH`,sliderDragging:`slider-dragging_htPFH`,"slider-mark":`slider-mark_fvw-n`,sliderMark:`slider-mark_fvw-n`,"slider-mark-label":`slider-mark-label_iDtU2`,sliderMarkLabel:`slider-mark-label_iDtU2`,"slider-value":`slider-value_3rQgd`,sliderValue:`slider-value_3rQgd`};export{e as default};
|
|
2
|
+
//# sourceMappingURL=slider.module.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"slider.module.mjs","names":[],"sources":["../../../../package/common/slider/slider.module.pcss"],"sourcesContent":[".slider {\n /* Theme tokens resolved once, each with a built-in fallback. Set any of the\n public `--slider-*` variables via ThemeProvider or `style` to override. */\n --custom-slider-track-color: var(--slider-track-color, var(--background-accent-light));\n --custom-slider-range-color: var(--slider-range-color, var(--primary-color));\n --custom-slider-thumb-color: var(--slider-thumb-color, var(--primary-color));\n --custom-slider-thumb-size: var(--slider-thumb-size, 18px);\n --custom-slider-track-height: var(--slider-track-height, 6px);\n\n position: relative;\n display: flex;\n align-items: center;\n box-sizing: border-box;\n /* Fill the container, and allow shrinking when used inside a flex row so the\n track never collapses to nothing next to a sibling (e.g. a value readout). */\n width: 100%;\n min-width: 0;\n height: var(--custom-slider-thumb-size);\n padding: 0 calc(var(--custom-slider-thumb-size) / 2);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n touch-action: none;\n user-select: none;\n\n &:focus-visible {\n outline: none;\n }\n &:focus-visible .slider-thumb {\n box-shadow: 0 0 0 4px color-mix(in srgb, var(--custom-slider-range-color) 30%, transparent);\n }\n\n &-disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n /* Reserve room under the track for mark labels. */\n &-has-mark-labels {\n margin-bottom: 22px;\n }\n\n &-track {\n position: relative;\n flex: 1;\n height: var(--custom-slider-track-height);\n background-color: var(--custom-slider-track-color);\n border-radius: 999px;\n }\n\n &-range {\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n background-color: var(--custom-slider-range-color);\n border-radius: 999px;\n transition: width 0.12s ease;\n }\n\n &-thumb {\n position: absolute;\n top: 50%;\n width: var(--custom-slider-thumb-size);\n height: var(--custom-slider-thumb-size);\n transform: translate(-50%, -50%);\n background-color: var(--custom-slider-thumb-color);\n border-radius: 50%;\n box-shadow: var(--card-shadow);\n transition: left 0.12s ease, box-shadow 0.15s ease;\n }\n\n /* No lag between pointer and thumb/fill while dragging. */\n &-dragging &-range,\n &-dragging &-thumb {\n transition: box-shadow 0.15s ease;\n }\n\n &-mark {\n position: absolute;\n top: 50%;\n width: 3px;\n height: 3px;\n transform: translate(-50%, -50%);\n border-radius: 50%;\n background-color: var(--background);\n pointer-events: none;\n }\n\n &-mark-label {\n position: absolute;\n top: calc(50% + var(--custom-slider-thumb-size));\n transform: translateX(-50%);\n font-size: var(--text-small-font-size, 12px);\n color: var(--text-dark);\n white-space: nowrap;\n pointer-events: none;\n }\n\n &-value {\n position: absolute;\n bottom: calc(100% + 8px);\n left: 50%;\n transform: translateX(-50%);\n padding: 2px 8px;\n border-radius: var(--default-border-radius);\n background-color: var(--background-accent-light);\n color: var(--text-color);\n font-size: var(--text-small-font-size, 12px);\n white-space: nowrap;\n pointer-events: none;\n font-variant-numeric: tabular-nums;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .slider-range,\n .slider-thumb {\n transition: none;\n }\n}\n"],"mappings":""}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from"
|
|
1
|
+
import e from"./stepper.module.mjs";import{StepperAlignment as t,StepperCollapse as n,StepperLabelPlacement as r,StepperStyleType as i}from"./stepper.types.mjs";import a,{useEffect as o,useRef as s,useState as c}from"react";import l from"classnames";import{FontAwesomeIcon as u}from"@fortawesome/react-fontawesome";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";var m={[i.Default]:e.stepperDefault,[i.Outlined]:e.stepperOutlined,[i.Dots]:e.stepperDots},h={[r.Top]:e.stepperLabelTop,[r.Bottom]:e.stepperLabelBottom,[r.Left]:e.stepperLabelLeft,[r.Right]:e.stepperLabelRight};function g(){return f(`svg`,{className:e.stepperCheckmark,strokeLinejoin:`round`,strokeLinecap:`round`,xmlns:`http://www.w3.org/2000/svg`,viewBox:`-0.2 -1.2 3.4 2`,height:`20px`,width:`20px`,children:f(`path`,{d:`M 0 0 l 1 1 l 2 -2`,strokeWidth:`0.4`,fill:`none`})})}function _({open:t,className:n,style:r,children:i}){let a=s(null),[u,d]=c(null);return o(()=>{let e=a.current;if(!e)return;let t=new ResizeObserver(()=>d(e.offsetHeight));return t.observe(e),()=>t.disconnect()},[]),f(`div`,{className:l(e.stepperContent,n),style:{...r,height:t?u??`auto`:0},"aria-hidden":!t,children:f(`div`,{ref:a,className:e.stepperContentInner,children:i})})}function v(e,t){let n=[r.Left,r.Right];return t?e&&n.includes(e)?e:r.Right:e&&!n.includes(e)?e:r.Bottom}function y({steps:r=[],currentStep:o=0,alignment:s=t.Horizontal,onStepClicked:c=null,nonLinear:y=!1,hideLabels:b=!1,styleType:x=i.Default,collapse:S=n.None,labelPlacement:C,className:w,style:T,classNames:E,styles:D,...O}){let k=s===t.Vertical,A=v(C,k);return f(`div`,{...O,className:l(e.stepper,m[x],h[A],{[e.stepperVertical]:k},E?.root,w),style:{...D?.root,...T},children:r.map((t,i)=>{let s=i<o,m=i<=o,h=!!t.error,v=!!c&&!t.disabled&&(y?i!==o:s),x=l(e.stepperEntry,{[e.stepperEntryActive]:m},{[e.stepperEntryDone]:s&&!h},{[e.stepperEntryError]:h},{[e.stepperEntryDisabled]:t.disabled},{[e.stepperClickable]:v},E?.entry),C=t.icon?f(u,{icon:t.icon,className:E?.icon,style:D?.icon}):s&&!h?f(g,{}):i+1,w=f(`div`,{className:l(e.stepperEntryNumber,{[e.stepperEntryNumberDone]:s&&!h},E?.entryNumber),style:D?.entryNumber,children:C}),T=t.optional===!0?`Optional`:t.optional===!1?null:t.optional,O=!b&&p(`div`,{className:e.stepperEntryLabels,children:[f(`div`,{className:l(e.stepperEntryLabel,E?.entryLabel),style:D?.entryLabel,children:t.label}),t.description!=null&&f(`div`,{className:l(e.stepperDescription,E?.description),style:D?.description,children:t.description}),T!=null&&f(`div`,{className:l(e.stepperOptional,E?.optional),style:D?.optional,children:T})]}),A=v?{role:`button`,tabIndex:0,onClick:()=>c?.(i),onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),c?.(i))}}:{},j=e=>f(`div`,{className:x,style:D?.entry,"aria-current":i===o?`step`:void 0,"aria-invalid":h||void 0,...A,children:e}),M=i<r.length-1&&f(`div`,{className:l(e.stepperConnector,{[e.stepperConnectorFilled]:s},E?.connector),style:D?.connector});if(k){let a=i===0,c=i===r.length-1,u=S===n.None?!0:S===n.ActiveOnly?i===o:!s,h=t=>{let n=t===`lead`?a:c,r=t===`lead`?m:s;return f(`div`,{className:l(e.stepperRailSegment,{[e.stepperRailFilled]:!n&&r,[e.stepperRailHidden]:n})})},g=p(`div`,{className:e.stepperMarkerCell,children:[h(`lead`),w,h(`trail`)]});return p(`div`,{className:e.stepperStep,children:[j(p(d,{children:[g,O]})),M,t.content!=null&&!b&&f(_,{open:u,className:E?.content,style:D?.content,children:t.content})]},i)}return p(a.Fragment,{children:[j(p(d,{children:[w,O]})),M]},i)})})}export{y as default};
|
|
2
2
|
//# sourceMappingURL=stepper.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stepper.mjs","names":[],"sources":["../../../../package/common/stepper/stepper.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport styles from './stepper.module.pcss';\nimport InteractableDiv from '../interactableDiv';\nimport {\n StepperAlignment,\n StepperCollapse,\n StepperLabelPlacement,\n StepperStyleType,\n type StepperProps,\n type StepperStep,\n} from './stepper.types';\n\nconst STYLE_CLASS: Record<StepperStyleType, string> = {\n [StepperStyleType.Default]: styles.stepperDefault,\n [StepperStyleType.Outlined]: styles.stepperOutlined,\n [StepperStyleType.Dots]: styles.stepperDots,\n};\n\nconst PLACEMENT_CLASS: Record<StepperLabelPlacement, string> = {\n [StepperLabelPlacement.Top]: styles.stepperLabelTop,\n [StepperLabelPlacement.Bottom]: styles.stepperLabelBottom,\n [StepperLabelPlacement.Left]: styles.stepperLabelLeft,\n [StepperLabelPlacement.Right]: styles.stepperLabelRight,\n};\n\nfunction Checkmark() {\n return (\n <svg\n className={styles.stepperCheckmark}\n strokeLinejoin=\"round\"\n strokeLinecap=\"round\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"-0.2 -1.2 3.4 2\"\n height=\"20px\"\n width=\"20px\"\n >\n <path d=\"M 0 0 l 1 1 l 2 -2\" strokeWidth=\"0.4\" fill=\"none\" />\n </svg>\n );\n}\n\nfunction StepBody({\n open,\n className,\n style,\n children,\n}: {\n open: boolean;\n className?: string;\n style?: React.CSSProperties;\n children: React.ReactNode;\n}) {\n const innerRef = useRef<HTMLDivElement>(null);\n const [height, setHeight] = useState<number | null>(null);\n\n useEffect(() => {\n const el = innerRef.current;\n if (!el) return;\n const observer = new ResizeObserver(() => setHeight(el.offsetHeight));\n observer.observe(el);\n return () => observer.disconnect();\n }, []);\n\n return (\n <div\n className={cx(styles.stepperContent, className)}\n style={{ ...style, height: open ? (height ?? 'auto') : 0 }}\n aria-hidden={!open}\n >\n <div ref={innerRef} className={styles.stepperContentInner}>\n {children}\n </div>\n </div>\n );\n}\n\nfunction resolvePlacement(\n placement: StepperLabelPlacement | undefined,\n isVertical: boolean,\n): StepperLabelPlacement {\n const verticalValues = [StepperLabelPlacement.Left, StepperLabelPlacement.Right];\n if (isVertical) {\n return placement && verticalValues.includes(placement) ? placement : StepperLabelPlacement.Right;\n }\n return placement && !verticalValues.includes(placement) ? placement : StepperLabelPlacement.Bottom;\n}\n\nexport default function Stepper({\n steps = [],\n currentStep = 0,\n alignment = StepperAlignment.Horizontal,\n onStepClicked = null,\n nonLinear = false,\n hideLabels = false,\n styleType = StepperStyleType.Default,\n collapse = StepperCollapse.None,\n labelPlacement,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n}: StepperProps) {\n const isVertical = alignment === StepperAlignment.Vertical;\n const placement = resolvePlacement(labelPlacement, isVertical);\n\n return (\n <div\n {...rest}\n className={cx(\n styles.stepper,\n STYLE_CLASS[styleType],\n PLACEMENT_CLASS[placement],\n { [styles.stepperVertical]: isVertical },\n classNames?.root,\n className,\n )}\n style={{ ...slotStyles?.root, ...style }}\n >\n {steps.map((step: StepperStep, index: number) => {\n const isDone = index < currentStep;\n const isActive = index <= currentStep;\n const hasError = !!step.error;\n // nonLinear: every enabled step except the current one is clickable.\n // linear: only completed steps are clickable.\n const isClickable =\n !!onStepClicked && !step.disabled && (nonLinear ? index !== currentStep : isDone);\n\n const entryClassName = cx(\n styles.stepperEntry,\n { [styles.stepperEntryActive]: isActive },\n { [styles.stepperEntryDone]: isDone && !hasError },\n { [styles.stepperEntryError]: hasError },\n { [styles.stepperEntryDisabled]: step.disabled },\n { [styles.stepperClickable]: isClickable },\n classNames?.entry,\n );\n\n const markerContent = step.icon ? (\n <FontAwesomeIcon\n icon={step.icon}\n className={classNames?.icon}\n style={slotStyles?.icon as React.CSSProperties & Record<`--fa-font-${string}`, string>}\n />\n ) : isDone && !hasError ? (\n <Checkmark />\n ) : (\n index + 1\n );\n\n const marker = (\n <div\n className={cx(\n styles.stepperEntryNumber,\n { [styles.stepperEntryNumberDone]: isDone && !hasError },\n classNames?.entryNumber,\n )}\n style={slotStyles?.entryNumber}\n >\n {markerContent}\n </div>\n );\n\n const optionalNode =\n step.optional === true ? 'Optional' : step.optional !== false ? step.optional : null;\n\n const labels = !hideLabels && (\n <div className={styles.stepperEntryLabels}>\n <div\n className={cx(styles.stepperEntryLabel, classNames?.entryLabel)}\n style={slotStyles?.entryLabel}\n >\n {step.label}\n </div>\n {step.description != null && (\n <div\n className={cx(styles.stepperDescription, classNames?.description)}\n style={slotStyles?.description}\n >\n {step.description}\n </div>\n )}\n {optionalNode != null && (\n <div\n className={cx(styles.stepperOptional, classNames?.optional)}\n style={slotStyles?.optional}\n >\n {optionalNode}\n </div>\n )}\n </div>\n );\n\n const header = isClickable ? (\n <InteractableDiv\n className={entryClassName}\n style={slotStyles?.entry}\n onClick={() => onStepClicked?.(index)}\n aria-current={index === currentStep ? 'step' : undefined}\n aria-invalid={hasError || undefined}\n >\n {marker}\n {labels}\n </InteractableDiv>\n ) : (\n <div\n className={entryClassName}\n style={slotStyles?.entry}\n aria-current={index === currentStep ? 'step' : undefined}\n aria-invalid={hasError || undefined}\n >\n {marker}\n {labels}\n </div>\n );\n\n const connector = index < steps.length - 1 && (\n <div\n className={cx(\n styles.stepperConnector,\n { [styles.stepperConnectorFilled]: isDone },\n classNames?.connector,\n )}\n style={slotStyles?.connector}\n />\n );\n\n if (isVertical) {\n const bodyOpen =\n collapse === StepperCollapse.None\n ? true\n : collapse === StepperCollapse.ActiveOnly\n ? index === currentStep\n : !isDone;\n return (\n <div key={index} className={styles.stepperStep}>\n {header}\n {connector}\n {step.content != null && !hideLabels && (\n <StepBody open={bodyOpen} className={classNames?.content} style={slotStyles?.content}>\n {step.content}\n </StepBody>\n )}\n </div>\n );\n }\n\n return (\n <React.Fragment key={index}>\n {header}\n {connector}\n </React.Fragment>\n );\n })}\n </div>\n );\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"stepper.mjs","names":[],"sources":["../../../../package/common/stepper/stepper.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport styles from './stepper.module.pcss';\nimport {\n StepperAlignment,\n StepperCollapse,\n StepperLabelPlacement,\n StepperStyleType,\n type StepperProps,\n type StepperStep,\n} from './stepper.types';\n\nconst STYLE_CLASS: Record<StepperStyleType, string> = {\n [StepperStyleType.Default]: styles.stepperDefault,\n [StepperStyleType.Outlined]: styles.stepperOutlined,\n [StepperStyleType.Dots]: styles.stepperDots,\n};\n\nconst PLACEMENT_CLASS: Record<StepperLabelPlacement, string> = {\n [StepperLabelPlacement.Top]: styles.stepperLabelTop,\n [StepperLabelPlacement.Bottom]: styles.stepperLabelBottom,\n [StepperLabelPlacement.Left]: styles.stepperLabelLeft,\n [StepperLabelPlacement.Right]: styles.stepperLabelRight,\n};\n\nfunction Checkmark() {\n return (\n <svg\n className={styles.stepperCheckmark}\n strokeLinejoin=\"round\"\n strokeLinecap=\"round\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"-0.2 -1.2 3.4 2\"\n height=\"20px\"\n width=\"20px\"\n >\n <path d=\"M 0 0 l 1 1 l 2 -2\" strokeWidth=\"0.4\" fill=\"none\" />\n </svg>\n );\n}\n\nfunction StepBody({\n open,\n className,\n style,\n children,\n}: {\n open: boolean;\n className?: string;\n style?: React.CSSProperties;\n children: React.ReactNode;\n}) {\n const innerRef = useRef<HTMLDivElement>(null);\n const [height, setHeight] = useState<number | null>(null);\n\n useEffect(() => {\n const el = innerRef.current;\n if (!el) return;\n const observer = new ResizeObserver(() => setHeight(el.offsetHeight));\n observer.observe(el);\n return () => observer.disconnect();\n }, []);\n\n return (\n <div\n className={cx(styles.stepperContent, className)}\n style={{ ...style, height: open ? (height ?? 'auto') : 0 }}\n aria-hidden={!open}\n >\n <div ref={innerRef} className={styles.stepperContentInner}>\n {children}\n </div>\n </div>\n );\n}\n\nfunction resolvePlacement(\n placement: StepperLabelPlacement | undefined,\n isVertical: boolean,\n): StepperLabelPlacement {\n const verticalValues = [StepperLabelPlacement.Left, StepperLabelPlacement.Right];\n if (isVertical) {\n return placement && verticalValues.includes(placement) ? placement : StepperLabelPlacement.Right;\n }\n return placement && !verticalValues.includes(placement) ? placement : StepperLabelPlacement.Bottom;\n}\n\nexport default function Stepper({\n steps = [],\n currentStep = 0,\n alignment = StepperAlignment.Horizontal,\n onStepClicked = null,\n nonLinear = false,\n hideLabels = false,\n styleType = StepperStyleType.Default,\n collapse = StepperCollapse.None,\n labelPlacement,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n}: StepperProps) {\n const isVertical = alignment === StepperAlignment.Vertical;\n const placement = resolvePlacement(labelPlacement, isVertical);\n\n return (\n <div\n {...rest}\n className={cx(\n styles.stepper,\n STYLE_CLASS[styleType],\n PLACEMENT_CLASS[placement],\n { [styles.stepperVertical]: isVertical },\n classNames?.root,\n className,\n )}\n style={{ ...slotStyles?.root, ...style }}\n >\n {steps.map((step: StepperStep, index: number) => {\n const isDone = index < currentStep;\n const isActive = index <= currentStep;\n const hasError = !!step.error;\n // nonLinear: every enabled step except the current one is clickable.\n // linear: only completed steps are clickable.\n const isClickable =\n !!onStepClicked && !step.disabled && (nonLinear ? index !== currentStep : isDone);\n\n const entryClassName = cx(\n styles.stepperEntry,\n { [styles.stepperEntryActive]: isActive },\n { [styles.stepperEntryDone]: isDone && !hasError },\n { [styles.stepperEntryError]: hasError },\n { [styles.stepperEntryDisabled]: step.disabled },\n { [styles.stepperClickable]: isClickable },\n classNames?.entry,\n );\n\n const markerContent = step.icon ? (\n <FontAwesomeIcon\n icon={step.icon}\n className={classNames?.icon}\n style={slotStyles?.icon as React.CSSProperties & Record<`--fa-font-${string}`, string>}\n />\n ) : isDone && !hasError ? (\n <Checkmark />\n ) : (\n index + 1\n );\n\n const marker = (\n <div\n className={cx(\n styles.stepperEntryNumber,\n { [styles.stepperEntryNumberDone]: isDone && !hasError },\n classNames?.entryNumber,\n )}\n style={slotStyles?.entryNumber}\n >\n {markerContent}\n </div>\n );\n\n const optionalNode =\n step.optional === true ? 'Optional' : step.optional !== false ? step.optional : null;\n\n const labels = !hideLabels && (\n <div className={styles.stepperEntryLabels}>\n <div\n className={cx(styles.stepperEntryLabel, classNames?.entryLabel)}\n style={slotStyles?.entryLabel}\n >\n {step.label}\n </div>\n {step.description != null && (\n <div\n className={cx(styles.stepperDescription, classNames?.description)}\n style={slotStyles?.description}\n >\n {step.description}\n </div>\n )}\n {optionalNode != null && (\n <div\n className={cx(styles.stepperOptional, classNames?.optional)}\n style={slotStyles?.optional}\n >\n {optionalNode}\n </div>\n )}\n </div>\n );\n\n const interactiveProps: React.HTMLAttributes<HTMLDivElement> = isClickable\n ? {\n role: 'button',\n tabIndex: 0,\n onClick: () => onStepClicked?.(index),\n onKeyDown: (e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n onStepClicked?.(index);\n }\n },\n }\n : {};\n\n const wrapHeader = (inner: React.ReactNode) => (\n <div\n className={entryClassName}\n style={slotStyles?.entry}\n aria-current={index === currentStep ? 'step' : undefined}\n aria-invalid={hasError || undefined}\n {...interactiveProps}\n >\n {inner}\n </div>\n );\n\n const connector = index < steps.length - 1 && (\n <div\n className={cx(\n styles.stepperConnector,\n { [styles.stepperConnectorFilled]: isDone },\n classNames?.connector,\n )}\n style={slotStyles?.connector}\n />\n );\n\n if (isVertical) {\n const isFirst = index === 0;\n const isLast = index === steps.length - 1;\n const bodyOpen =\n collapse === StepperCollapse.None\n ? true\n : collapse === StepperCollapse.ActiveOnly\n ? index === currentStep\n : !isDone;\n\n const railSegment = (variant: 'lead' | 'trail') => {\n const hidden = variant === 'lead' ? isFirst : isLast;\n const filled = variant === 'lead' ? isActive : isDone;\n return (\n <div\n className={cx(styles.stepperRailSegment, {\n [styles.stepperRailFilled]: !hidden && filled,\n [styles.stepperRailHidden]: hidden,\n })}\n />\n );\n };\n\n const markerCell = (\n <div className={styles.stepperMarkerCell}>\n {railSegment('lead')}\n {marker}\n {railSegment('trail')}\n </div>\n );\n\n return (\n <div key={index} className={styles.stepperStep}>\n {wrapHeader(\n <>\n {markerCell}\n {labels}\n </>,\n )}\n {connector}\n {step.content != null && !hideLabels && (\n <StepBody open={bodyOpen} className={classNames?.content} style={slotStyles?.content}>\n {step.content}\n </StepBody>\n )}\n </div>\n );\n }\n\n return (\n <React.Fragment key={index}>\n {wrapHeader(\n <>\n {marker}\n {labels}\n </>,\n )}\n {connector}\n </React.Fragment>\n );\n })}\n </div>\n );\n}\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e={stepper:`stepper_kiS2A`,"stepper-vertical":`stepper-vertical_2y9rg`,stepperVertical:`stepper-vertical_2y9rg`,"stepper-label-bottom":`stepper-label-bottom_lDfhy`,stepperLabelBottom:`stepper-label-bottom_lDfhy`,"stepper-label-top":`stepper-label-top_sBw4-`,stepperLabelTop:`stepper-label-top_sBw4-`,"stepper-entry":`stepper-entry_KD4JJ`,stepperEntry:`stepper-entry_KD4JJ`,"stepper-clickable":`stepper-clickable_Nm6fP`,stepperClickable:`stepper-clickable_Nm6fP`,"stepper-entry-disabled":`stepper-entry-disabled_T9S5R`,stepperEntryDisabled:`stepper-entry-disabled_T9S5R`,"stepper-entry-number":`stepper-entry-number_J168Q`,stepperEntryNumber:`stepper-entry-number_J168Q`,"stepper-entry-active":`stepper-entry-active_V1aRt`,stepperEntryActive:`stepper-entry-active_V1aRt`,"stepper-entry-done":`stepper-entry-done_M3wb5`,stepperEntryDone:`stepper-entry-done_M3wb5`,"stepper-entry-error":`stepper-entry-error_xjGSr`,stepperEntryError:`stepper-entry-error_xjGSr`,"stepper-checkmark":`stepper-checkmark_iKCap`,stepperCheckmark:`stepper-checkmark_iKCap`,showCheckmark:`showCheckmark_Rd0oW`,"stepper-entry-labels":`stepper-entry-labels_nQT8D`,stepperEntryLabels:`stepper-entry-labels_nQT8D`,"stepper-entry-label":`stepper-entry-label_b94eg`,stepperEntryLabel:`stepper-entry-label_b94eg`,"stepper-description":`stepper-description_5Q0YP`,stepperDescription:`stepper-description_5Q0YP`,"stepper-optional":`stepper-optional_N8mkW`,stepperOptional:`stepper-optional_N8mkW`,"stepper-connector":`stepper-connector_J2FwZ`,stepperConnector:`stepper-connector_J2FwZ`,"stepper-connector-filled":`stepper-connector-filled_W8UZS`,stepperConnectorFilled:`stepper-connector-filled_W8UZS`,"stepper-step":`stepper-step_nUfsV`,stepperStep:`stepper-step_nUfsV`,"stepper-content":`stepper-content_yjlFH`,stepperContent:`stepper-content_yjlFH`,"stepper-label-left":`stepper-label-left_yGbjC`,stepperLabelLeft:`stepper-label-left_yGbjC`,"stepper-content-inner":`stepper-content-inner_0w2wP`,stepperContentInner:`stepper-content-inner_0w2wP`,"stepper-outlined":`stepper-outlined_V7UjP`,stepperOutlined:`stepper-outlined_V7UjP`,"stepper-dots":`stepper-dots_s4cgN`,stepperDots:`stepper-dots_s4cgN`};export{e as default};
|
|
1
|
+
var e={stepper:`stepper_kiS2A`,"stepper-vertical":`stepper-vertical_2y9rg`,stepperVertical:`stepper-vertical_2y9rg`,"stepper-label-bottom":`stepper-label-bottom_lDfhy`,stepperLabelBottom:`stepper-label-bottom_lDfhy`,"stepper-label-top":`stepper-label-top_sBw4-`,stepperLabelTop:`stepper-label-top_sBw4-`,"stepper-entry":`stepper-entry_KD4JJ`,stepperEntry:`stepper-entry_KD4JJ`,"stepper-clickable":`stepper-clickable_Nm6fP`,stepperClickable:`stepper-clickable_Nm6fP`,"stepper-entry-disabled":`stepper-entry-disabled_T9S5R`,stepperEntryDisabled:`stepper-entry-disabled_T9S5R`,"stepper-entry-number":`stepper-entry-number_J168Q`,stepperEntryNumber:`stepper-entry-number_J168Q`,"stepper-entry-active":`stepper-entry-active_V1aRt`,stepperEntryActive:`stepper-entry-active_V1aRt`,"stepper-entry-done":`stepper-entry-done_M3wb5`,stepperEntryDone:`stepper-entry-done_M3wb5`,"stepper-entry-error":`stepper-entry-error_xjGSr`,stepperEntryError:`stepper-entry-error_xjGSr`,"stepper-checkmark":`stepper-checkmark_iKCap`,stepperCheckmark:`stepper-checkmark_iKCap`,showCheckmark:`showCheckmark_Rd0oW`,"stepper-marker-cell":`stepper-marker-cell_reOS7`,stepperMarkerCell:`stepper-marker-cell_reOS7`,"stepper-rail-segment":`stepper-rail-segment_U-ZgF`,stepperRailSegment:`stepper-rail-segment_U-ZgF`,"stepper-rail-filled":`stepper-rail-filled_wCImi`,stepperRailFilled:`stepper-rail-filled_wCImi`,"stepper-rail-hidden":`stepper-rail-hidden_l17t6`,stepperRailHidden:`stepper-rail-hidden_l17t6`,"stepper-entry-labels":`stepper-entry-labels_nQT8D`,stepperEntryLabels:`stepper-entry-labels_nQT8D`,"stepper-entry-label":`stepper-entry-label_b94eg`,stepperEntryLabel:`stepper-entry-label_b94eg`,"stepper-description":`stepper-description_5Q0YP`,stepperDescription:`stepper-description_5Q0YP`,"stepper-optional":`stepper-optional_N8mkW`,stepperOptional:`stepper-optional_N8mkW`,"stepper-connector":`stepper-connector_J2FwZ`,stepperConnector:`stepper-connector_J2FwZ`,"stepper-connector-filled":`stepper-connector-filled_W8UZS`,stepperConnectorFilled:`stepper-connector-filled_W8UZS`,"stepper-step":`stepper-step_nUfsV`,stepperStep:`stepper-step_nUfsV`,"stepper-content":`stepper-content_yjlFH`,stepperContent:`stepper-content_yjlFH`,"stepper-label-left":`stepper-label-left_yGbjC`,stepperLabelLeft:`stepper-label-left_yGbjC`,"stepper-content-inner":`stepper-content-inner_0w2wP`,stepperContentInner:`stepper-content-inner_0w2wP`,"stepper-outlined":`stepper-outlined_V7UjP`,stepperOutlined:`stepper-outlined_V7UjP`,"stepper-dots":`stepper-dots_s4cgN`,stepperDots:`stepper-dots_s4cgN`};export{e as default};
|
|
2
2
|
//# sourceMappingURL=stepper.module.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stepper.module.mjs","names":[],"sources":["../../../../package/common/stepper/stepper.module.pcss"],"sourcesContent":[".stepper {\n /* Theme tokens resolved once, each with a built-in fallback. Set any of the\n public `--stepper-*` variables via ThemeProvider (theme-wide) or `style`\n (per instance) to override; unset ones fall back to the values below. */\n --custom-stepper-marker-size: var(--stepper-marker-size, 40px);\n --custom-stepper-marker-radius: var(--stepper-marker-radius, var(--default-border-radius));\n --custom-stepper-idle-color: var(--stepper-idle-color, var(--primary-lighter));\n --custom-stepper-active-color: var(--stepper-active-color, var(--primary-color));\n --custom-stepper-done-color: var(--stepper-done-color, var(--primary-color));\n --custom-stepper-error-color: var(--stepper-error-color, var(--error-color));\n --custom-stepper-connector-color: var(--stepper-connector-color, var(--primary-color));\n --custom-stepper-connector-thickness: var(--stepper-connector-thickness, 3px);\n --custom-stepper-connector-idle-thickness: var(--stepper-connector-idle-thickness, 1px);\n --custom-stepper-gap: var(--stepper-gap, 12px);\n --custom-stepper-text-on-marker: var(--stepper-text-on-marker, var(--text-on-primary));\n\n user-select: none;\n color: var(--text-color);\n\n &-vertical {\n display: flex;\n flex-flow: column;\n }\n\n &:not(.stepper-vertical) {\n display: flex;\n align-items: center;\n }\n &-label-bottom:not(.stepper-vertical) {\n padding-bottom: 46px;\n }\n &-label-top:not(.stepper-vertical) {\n padding-top: 46px;\n }\n\n /* Entry --------------------------------------------------------------- */\n &-entry {\n display: flex;\n align-items: flex-start;\n gap: var(--custom-stepper-gap);\n box-sizing: border-box;\n }\n &:not(.stepper-vertical) &-entry {\n position: relative;\n flex: 0 0 auto;\n align-items: center;\n gap: 0;\n }\n &-clickable {\n cursor: pointer;\n }\n &-entry-disabled {\n opacity: 0.5;\n }\n\n &-entry-number {\n width: var(--custom-stepper-marker-size);\n height: var(--custom-stepper-marker-size);\n box-sizing: border-box;\n flex-shrink: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid var(--custom-stepper-idle-color);\n color: var(--custom-stepper-idle-color);\n border-radius: var(--custom-stepper-marker-radius);\n font-weight: 600;\n font-size: calc(var(--custom-stepper-marker-size) * 0.4);\n box-shadow: inset 0px 0px 0px var(--custom-stepper-done-color);\n transition: all 0.4s;\n }\n &-entry-active &-entry-number {\n border: 2px solid var(--custom-stepper-active-color);\n color: var(--custom-stepper-active-color);\n transform: scale3d(1.1, 1.1, 1);\n }\n &-entry-done &-entry-number {\n border-color: var(--custom-stepper-done-color);\n color: var(--custom-stepper-text-on-marker);\n box-shadow: inset 0px 0px 0px 30px var(--custom-stepper-done-color);\n transform: none;\n }\n &-entry-error &-entry-number {\n border: 2px solid var(--custom-stepper-error-color);\n color: var(--custom-stepper-error-color);\n box-shadow: inset 0px 0px 0px var(--custom-stepper-error-color);\n transform: none;\n }\n\n &-checkmark path {\n stroke: var(--custom-stepper-text-on-marker);\n stroke-dasharray: 5;\n stroke-dashoffset: 5;\n animation: showCheckmark 0.4s 0.2s forwards;\n }\n\n &-entry-labels {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n }\n &-entry-label {\n color: var(--text-color);\n }\n &-description {\n color: var(--text-dark);\n font-size: var(--text-small-font-size, 0.85em);\n }\n &-optional {\n color: var(--text-light);\n font-size: var(--text-small-font-size, 0.85em);\n font-style: italic;\n }\n\n &:not(.stepper-vertical) &-entry-labels {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n width: max-content;\n max-width: 160px;\n text-align: center;\n align-items: center;\n }\n &-label-bottom:not(.stepper-vertical) &-entry-labels {\n top: calc(var(--custom-stepper-marker-size) + 6px);\n }\n &-label-top:not(.stepper-vertical) &-entry-labels {\n bottom: calc(var(--custom-stepper-marker-size) + 6px);\n }\n\n &-connector {\n flex: 1 1 auto;\n min-width: 24px;\n height: var(--custom-stepper-connector-idle-thickness);\n
|
|
1
|
+
{"version":3,"file":"stepper.module.mjs","names":[],"sources":["../../../../package/common/stepper/stepper.module.pcss"],"sourcesContent":[".stepper {\n /* Theme tokens resolved once, each with a built-in fallback. Set any of the\n public `--stepper-*` variables via ThemeProvider (theme-wide) or `style`\n (per instance) to override; unset ones fall back to the values below. */\n --custom-stepper-marker-size: var(--stepper-marker-size, 40px);\n --custom-stepper-marker-radius: var(--stepper-marker-radius, var(--default-border-radius));\n --custom-stepper-idle-color: var(--stepper-idle-color, var(--primary-lighter));\n --custom-stepper-active-color: var(--stepper-active-color, var(--primary-color));\n --custom-stepper-done-color: var(--stepper-done-color, var(--primary-color));\n --custom-stepper-error-color: var(--stepper-error-color, var(--error-color));\n --custom-stepper-connector-color: var(--stepper-connector-color, var(--primary-color));\n --custom-stepper-connector-thickness: var(--stepper-connector-thickness, 3px);\n --custom-stepper-connector-idle-thickness: var(--stepper-connector-idle-thickness, 1px);\n --custom-stepper-gap: var(--stepper-gap, 12px);\n --custom-stepper-text-on-marker: var(--stepper-text-on-marker, var(--text-on-primary));\n\n user-select: none;\n color: var(--text-color);\n\n &-vertical {\n display: flex;\n flex-flow: column;\n }\n\n &:not(.stepper-vertical) {\n display: flex;\n align-items: center;\n }\n &-label-bottom:not(.stepper-vertical) {\n padding-bottom: 46px;\n }\n &-label-top:not(.stepper-vertical) {\n padding-top: 46px;\n }\n\n /* Entry --------------------------------------------------------------- */\n &-entry {\n display: flex;\n align-items: flex-start;\n gap: var(--custom-stepper-gap);\n box-sizing: border-box;\n }\n &:not(.stepper-vertical) &-entry {\n position: relative;\n flex: 0 0 auto;\n align-items: center;\n gap: 0;\n }\n &-clickable {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n &-entry-disabled {\n opacity: 0.5;\n }\n\n &-entry-number {\n width: var(--custom-stepper-marker-size);\n height: var(--custom-stepper-marker-size);\n box-sizing: border-box;\n flex-shrink: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid var(--custom-stepper-idle-color);\n color: var(--custom-stepper-idle-color);\n border-radius: var(--custom-stepper-marker-radius);\n font-weight: 600;\n font-size: calc(var(--custom-stepper-marker-size) * 0.4);\n box-shadow: inset 0px 0px 0px var(--custom-stepper-done-color);\n transition: all 0.4s;\n }\n &-entry-active &-entry-number {\n border: 2px solid var(--custom-stepper-active-color);\n color: var(--custom-stepper-active-color);\n transform: scale3d(1.1, 1.1, 1);\n }\n &-entry-done &-entry-number {\n border-color: var(--custom-stepper-done-color);\n color: var(--custom-stepper-text-on-marker);\n background-color: var(--custom-stepper-done-color);\n box-shadow: inset 0px 0px 0px 30px var(--custom-stepper-done-color);\n transform: none;\n }\n &-entry-error &-entry-number {\n border: 2px solid var(--custom-stepper-error-color);\n color: var(--custom-stepper-error-color);\n box-shadow: inset 0px 0px 0px var(--custom-stepper-error-color);\n transform: none;\n }\n\n &-checkmark path {\n stroke: var(--custom-stepper-text-on-marker);\n stroke-dasharray: 5;\n stroke-dashoffset: 5;\n animation: showCheckmark 0.4s 0.2s forwards;\n }\n\n &-marker-cell {\n display: flex;\n flex-direction: column;\n align-items: center;\n flex-shrink: 0;\n width: var(--custom-stepper-marker-size);\n }\n &-rail-segment {\n flex: 1 1 0;\n min-height: 0;\n width: var(--custom-stepper-connector-idle-thickness);\n background-size: 100% 200%;\n background-image: linear-gradient(\n 180deg,\n var(--custom-stepper-connector-color) 0 50%,\n var(--custom-stepper-idle-color) 50% 100%\n );\n background-position: 0 100%;\n transition: background-position 0.4s, width 0.4s;\n }\n &-rail-filled {\n width: var(--custom-stepper-connector-thickness);\n background-position: 0 0;\n }\n &-rail-hidden {\n background-image: none;\n background-color: transparent;\n }\n\n &-entry-labels {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n align-self: center;\n }\n &-entry-label {\n color: var(--text-color);\n }\n &-description {\n color: var(--text-dark);\n font-size: var(--text-small-font-size, 0.85em);\n }\n &-optional {\n color: var(--text-light);\n font-size: var(--text-small-font-size, 0.85em);\n font-style: italic;\n }\n\n &:not(.stepper-vertical) &-entry-labels {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n width: max-content;\n max-width: 160px;\n text-align: center;\n align-items: center;\n }\n &-label-bottom:not(.stepper-vertical) &-entry-labels {\n top: calc(var(--custom-stepper-marker-size) + 6px);\n }\n &-label-top:not(.stepper-vertical) &-entry-labels {\n bottom: calc(var(--custom-stepper-marker-size) + 6px);\n }\n\n &-connector {\n flex: 1 1 auto;\n min-width: 24px;\n height: var(--custom-stepper-connector-idle-thickness);\n background-size: 200% 100%;\n background-image: linear-gradient(\n 90deg,\n var(--custom-stepper-connector-color) 0 50%,\n var(--custom-stepper-idle-color) 50% 100%\n );\n background-position: 100% 0;\n transition: background-position 0.6s, height 0.4s, width 0.4s;\n\n &-filled {\n height: var(--custom-stepper-connector-thickness);\n background-position: 0 0;\n }\n }\n\n &-step {\n display: grid;\n grid-template-columns: var(--custom-stepper-marker-size) 1fr;\n column-gap: var(--custom-stepper-gap);\n }\n &-vertical &-entry {\n grid-column: 1 / -1;\n align-items: stretch;\n }\n &-vertical &-connector {\n grid-column: 1;\n justify-self: center;\n flex: none;\n width: var(--custom-stepper-connector-idle-thickness);\n min-width: 0;\n height: 100%;\n min-height: 24px;\n background-size: 100% 200%;\n background-image: linear-gradient(\n 180deg,\n var(--custom-stepper-connector-color) 0 50%,\n var(--custom-stepper-idle-color) 50% 100%\n );\n background-position: 0 100%;\n transition: background-position 0.4s, width 0.4s;\n\n &-filled {\n width: var(--custom-stepper-connector-thickness);\n background-position: 0 0;\n }\n }\n &-vertical &-content {\n grid-column: 2;\n }\n\n &-vertical.stepper-label-left &-step {\n grid-template-columns: 1fr var(--custom-stepper-marker-size);\n }\n &-vertical.stepper-label-left &-entry {\n flex-direction: row-reverse;\n }\n &-vertical.stepper-label-left &-connector {\n grid-column: 2;\n }\n &-vertical.stepper-label-left &-content {\n grid-column: 1;\n text-align: right;\n }\n\n &-content {\n overflow: hidden;\n transition: height 0.25s ease;\n }\n &-content-inner {\n padding: 4px 0 12px;\n }\n\n /* Outlined: completed markers stay ringed (a coloured check, no solid fill) */\n &-outlined {\n --stepper-text-on-marker: var(--custom-stepper-done-color);\n\n & .stepper-entry-done .stepper-entry-number {\n box-shadow: none;\n background-color: transparent;\n color: var(--custom-stepper-done-color);\n }\n }\n &-dots {\n --stepper-marker-size: 16px;\n --stepper-marker-radius: 50%;\n --stepper-gap: 10px;\n\n & .stepper-entry-number {\n font-size: 0;\n border-width: 2px;\n }\n & .stepper-entry-number svg {\n display: none;\n }\n }\n}\n\n@keyframes showCheckmark {\n to {\n stroke-dashoffset: 0;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .stepper-content {\n transition: none;\n }\n .stepper-entry-number,\n .stepper-connector,\n .stepper-rail-segment {\n transition: none;\n }\n .stepper-checkmark path {\n animation: none;\n stroke-dashoffset: 0;\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stepper.types.mjs","names":[],"sources":["../../../../package/common/stepper/stepper.types.ts"],"sourcesContent":["import type React from 'react';\nimport type { IconDefinition } from '@fortawesome/fontawesome-svg-core';\nimport type { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';\n\n/** Layout direction of the stepper. */\nexport enum StepperAlignment {\n Horizontal = 'horizontal',\n Vertical = 'vertical',\n}\n\n/** Visual preset for the step markers and connectors. */\nexport enum StepperStyleType {\n /** Numbered markers, filled solid on completion (the default look). */\n Default = 'default',\n /** Numbered markers that stay ringed when completed
|
|
1
|
+
{"version":3,"file":"stepper.types.mjs","names":[],"sources":["../../../../package/common/stepper/stepper.types.ts"],"sourcesContent":["import type React from 'react';\nimport type { IconDefinition } from '@fortawesome/fontawesome-svg-core';\nimport type { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';\n\n/** Layout direction of the stepper. */\nexport enum StepperAlignment {\n Horizontal = 'horizontal',\n Vertical = 'vertical',\n}\n\n/** Visual preset for the step markers and connectors. */\nexport enum StepperStyleType {\n /** Numbered markers, filled solid on completion (the default look). */\n Default = 'default',\n /** Numbered markers that stay ringed when completed (a coloured check, no solid fill). */\n Outlined = 'outlined',\n /** Minimal dots without numbers, for a compact onboarding or carousel style. */\n Dots = 'dots',\n}\n\n/**\n * Which step bodies (`step.content`) are expanded. Only affects vertical\n * steppers with per-step `content`; ignored otherwise.\n */\nexport enum StepperCollapse {\n /** Every step body stays expanded. */\n None = 'none',\n /** Only the current step's body is expanded (classic vertical wizard). */\n ActiveOnly = 'activeOnly',\n /** Completed (past) step bodies collapse; current and upcoming stay expanded. */\n Completed = 'completed',\n}\n\n/**\n * Where the label block sits relative to the marker. Horizontal steppers use\n * `Top`/`Bottom`; vertical steppers use `Left`/`Right`. An out-of-orientation\n * value falls back to that orientation's default.\n */\nexport enum StepperLabelPlacement {\n Top = 'top',\n Bottom = 'bottom',\n Left = 'left',\n Right = 'right',\n}\n\nexport type StepperSlots =\n | 'root'\n | 'entry'\n | 'entryNumber'\n | 'entryLabel'\n | 'connector'\n | 'description'\n | 'content'\n | 'optional'\n | 'icon';\n\nexport interface StepperStep {\n /** Primary label for the step. */\n label: React.ReactNode;\n /** Secondary line shown under the label. */\n description?: React.ReactNode;\n /** Collapsible body content, rendered under the label (vertical only). */\n content?: React.ReactNode;\n /** FontAwesome icon shown in the marker instead of the step number. */\n icon?: IconDefinition;\n /** Marks the step as errored, recolouring the marker with `--stepper-error-color`. */\n error?: boolean;\n /** `true` renders an \"Optional\" hint; a node renders custom hint text. */\n optional?: boolean | React.ReactNode;\n /** Disables this step: never clickable, dimmed. */\n disabled?: boolean;\n}\n\nexport interface StepperProps extends HtmlProps {\n steps?: StepperStep[];\n currentStep?: number;\n alignment?: StepperAlignment | 'horizontal' | 'vertical';\n onStepClicked?: ((index: number) => void) | null;\n /** Allow clicking any step, not just completed ones. */\n nonLinear?: boolean;\n /** Hide the label text (and description) beneath each step entry. */\n hideLabels?: boolean;\n /** Visual preset for markers and connectors (default `Default`). */\n styleType?: StepperStyleType;\n /** Which step bodies are expanded. Vertical `content` only (default `None`). */\n collapse?: StepperCollapse;\n /** Label position relative to the marker (default: horizontal `Bottom`, vertical `Right`). */\n labelPlacement?: StepperLabelPlacement;\n className?: string;\n style?: React.CSSProperties;\n classNames?: SlotClassNames<StepperSlots>;\n styles?: SlotStyles<StepperSlots>;\n}\n"],"mappings":"AAKA,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,WAAA,aACA,EAAA,SAAA,YACF,EAAA,CAAA,CAAA,EAGY,EAAL,SAAA,EAAA,OAEL,GAAA,QAAA,UAEA,EAAA,SAAA,WAEA,EAAA,KAAA,QACF,EAAA,CAAA,CAAA,EAMY,EAAL,SAAA,EAAA,OAEL,GAAA,KAAA,OAEA,EAAA,WAAA,aAEA,EAAA,UAAA,aACF,EAAA,CAAA,CAAA,EAOY,EAAL,SAAA,EAAA,OACL,GAAA,IAAA,MACA,EAAA,OAAA,SACA,EAAA,KAAA,OACA,EAAA,MAAA,SACF,EAAA,CAAA,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.module.mjs","names":[],"sources":["../../../../package/common/switch/switch.module.pcss"],"sourcesContent":[".switch {\n user-select: none;\n display: flex;\n align-items: center;\n column-gap: 0.625em;\n width: fit-content;\n cursor: pointer;\n border: 1px solid transparent;\n margin: -1px;\n\n &:focus-visible {\n outline: none;\n border: 1px solid var(--primary-color);\n border-radius: var(--default-border-radius);\n }\n\n &-disabled {\n filter: brightness(0.8);\n cursor: not-allowed;\n }\n\n &-track {\n width: 2.25em;\n height: 1.25em;\n flex-shrink: 0;\n border-radius: var(--default-border-radius);\n background-color: var(--border-color);\n position: relative;\n transition: background-color 0.2s;\n box-sizing: border-box;\n padding: 0.125em;\n\n &-checked {\n background-color: var(--primary-color);\n }\n }\n\n &-thumb {\n width: 1em;\n height: 1em;\n border-radius: var(--default-border-radius);\n background-color: var(--background);\n box-shadow: var(--card-shadow);\n transform: translateX(0);\n transition: transform 0.2s;\n\n &-checked {\n transform: translateX(1em);\n }\n }\n\n &-label {\n line-height: 100%;\n color: var(--text-color);\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"switch.module.mjs","names":[],"sources":["../../../../package/common/switch/switch.module.pcss"],"sourcesContent":[".switch {\n user-select: none;\n display: flex;\n align-items: center;\n column-gap: 0.625em;\n width: fit-content;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n border: 1px solid transparent;\n margin: -1px;\n\n &:focus-visible {\n outline: none;\n border: 1px solid var(--primary-color);\n border-radius: var(--default-border-radius);\n }\n\n &-disabled {\n filter: brightness(0.8);\n cursor: not-allowed;\n }\n\n &-track {\n width: 2.25em;\n height: 1.25em;\n flex-shrink: 0;\n border-radius: var(--default-border-radius);\n background-color: var(--border-color);\n position: relative;\n transition: background-color 0.2s;\n box-sizing: border-box;\n padding: 0.125em;\n\n &-checked {\n background-color: var(--primary-color);\n }\n }\n\n &-thumb {\n width: 1em;\n height: 1em;\n border-radius: var(--default-border-radius);\n background-color: var(--background);\n box-shadow: var(--card-shadow);\n transform: translateX(0);\n transition: transform 0.2s;\n\n &-checked {\n transform: translateX(1em);\n }\n }\n\n &-label {\n line-height: 100%;\n color: var(--text-color);\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabHeader.module.mjs","names":[],"sources":["../../../../package/common/tabHeader/tabHeader.module.pcss"],"sourcesContent":[".tabHeader {\n display: flex;\n align-items: stretch;\n gap: 4px;\n border-bottom: 1px solid var(--border-color);\n user-select: none;\n overflow-x: auto;\n\n &-tab {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 16px;\n cursor: pointer;\n color: var(--text-dark);\n border-bottom: 2px solid transparent;\n border-radius: var(--default-border-radius) var(--default-border-radius) 0 0;\n transition: color 0.2s, background 0.2s, border-color 0.2s;\n white-space: nowrap;\n\n &:hover {\n background: var(--background-accent-light);\n color: var(--text-color);\n }\n\n &-active {\n color: var(--primary-color);\n border-bottom-color: var(--primary-color);\n\n &:hover {\n color: var(--primary-color);\n }\n }\n\n &-disabled {\n opacity: 0.5;\n pointer-events: none;\n cursor: default;\n }\n }\n\n &-icon {\n font-size: 18px;\n flex-shrink: 0;\n }\n\n &-labels {\n display: flex;\n flex-direction: column;\n text-align: left;\n line-height: 1.25;\n }\n\n &-title {\n font-weight: var(--header-font-weight, 600);\n font-size: var(--default-font-size);\n }\n\n &-subtitle {\n font-size: var(--text-small-font-size);\n color: var(--text-dark);\n }\n}\n\n@media (max-width: 640px) {\n .tabHeader-tab:not(.tabHeader-tab-active) .tabHeader-labels {\n display: none;\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"tabHeader.module.mjs","names":[],"sources":["../../../../package/common/tabHeader/tabHeader.module.pcss"],"sourcesContent":[".tabHeader {\n display: flex;\n align-items: stretch;\n gap: 4px;\n border-bottom: 1px solid var(--border-color);\n user-select: none;\n overflow-x: auto;\n\n &-tab {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 16px;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n color: var(--text-dark);\n border-bottom: 2px solid transparent;\n border-radius: var(--default-border-radius) var(--default-border-radius) 0 0;\n transition: color 0.2s, background 0.2s, border-color 0.2s;\n white-space: nowrap;\n\n &:hover {\n background: var(--background-accent-light);\n color: var(--text-color);\n }\n\n &-active {\n color: var(--primary-color);\n border-bottom-color: var(--primary-color);\n\n &:hover {\n color: var(--primary-color);\n }\n }\n\n &-disabled {\n opacity: 0.5;\n pointer-events: none;\n cursor: default;\n }\n }\n\n &-icon {\n font-size: 18px;\n flex-shrink: 0;\n }\n\n &-labels {\n display: flex;\n flex-direction: column;\n text-align: left;\n line-height: 1.25;\n }\n\n &-title {\n font-weight: var(--header-font-weight, 600);\n font-size: var(--default-font-size);\n }\n\n &-subtitle {\n font-size: var(--text-small-font-size);\n color: var(--text-dark);\n }\n}\n\n@media (max-width: 640px) {\n .tabHeader-tab:not(.tabHeader-tab-active) .tabHeader-labels {\n display: none;\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"clockDial.module.mjs","names":[],"sources":["../../../../../../package/common/timeInput/components/clockDial/clockDial.module.pcss"],"sourcesContent":[".clockFace {\n position: relative;\n width: var(--clock-size, 256px);\n height: var(--clock-size, 256px);\n margin: 4px auto;\n border-radius: 50%;\n background: var(--background-accent-light, var(--background-accent));\n touch-action: none;\n user-select: none;\n cursor: pointer;\n}\n\n.clockHand {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n overflow: visible;\n\n &-line {\n stroke: var(--primary-color);\n stroke-width: 0.7;\n }\n\n &-center {\n fill: var(--primary-color);\n }\n\n &-knob {\n fill: var(--primary-color);\n }\n}\n\n.clockNumber {\n position: absolute;\n transform: translate(-50%, -50%);\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n color: var(--text-color);\n font-size: 15px;\n font-weight: 500;\n line-height: 1;\n /* Visual only — the face handles all pointer interaction. */\n pointer-events: none;\n z-index: 1;\n\n &-inner {\n font-size: 12px;\n color: var(--text-dark);\n }\n\n &-selected {\n color: var(--text-on-primary);\n font-weight: 600;\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"clockDial.module.mjs","names":[],"sources":["../../../../../../package/common/timeInput/components/clockDial/clockDial.module.pcss"],"sourcesContent":[".clockFace {\n position: relative;\n width: var(--clock-size, 256px);\n height: var(--clock-size, 256px);\n margin: 4px auto;\n border-radius: 50%;\n background: var(--background-accent-light, var(--background-accent));\n touch-action: none;\n user-select: none;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n}\n\n.clockHand {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n overflow: visible;\n\n &-line {\n stroke: var(--primary-color);\n stroke-width: 0.7;\n }\n\n &-center {\n fill: var(--primary-color);\n }\n\n &-knob {\n fill: var(--primary-color);\n }\n}\n\n.clockNumber {\n position: absolute;\n transform: translate(-50%, -50%);\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n color: var(--text-color);\n font-size: 15px;\n font-weight: 500;\n line-height: 1;\n /* Visual only — the face handles all pointer interaction. */\n pointer-events: none;\n z-index: 1;\n\n &-inner {\n font-size: 12px;\n color: var(--text-dark);\n }\n\n &-selected {\n color: var(--text-on-primary);\n font-weight: 600;\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"timeInput.module.mjs","names":[],"sources":["../../../../package/common/timeInput/timeInput.module.pcss"],"sourcesContent":[".timeInput {\n position: relative;\n width: 100%;\n flex: 1;\n min-width: 105px;\n\n &-clock {\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 12px;\n min-width: 280px;\n }\n\n &-clockHeader {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n margin-bottom: 4px;\n }\n\n &-headerSegment {\n border: none;\n background: var(--background-accent);\n color: var(--text-dark);\n font-size: 32px;\n font-weight: 600;\n line-height: 1;\n padding: 6px 10px;\n border-radius: var(--default-border-radius);\n cursor: pointer;\n\n &-active {\n background: var(--primary-color);\n color: var(--text-on-primary);\n }\n }\n\n &-headerColon {\n font-size: 32px;\n font-weight: 600;\n color: var(--text-dark);\n }\n\n &-meridiem {\n display: flex;\n flex-direction: column;\n gap: 2px;\n margin-left: 8px;\n\n & button {\n border: 1px solid var(--border-color);\n background: var(--background-accent);\n color: var(--text-dark);\n font-size: 12px;\n font-weight: 600;\n padding: 3px 8px;\n cursor: pointer;\n\n &:first-child { border-radius: var(--default-border-radius) var(--default-border-radius) 0 0; }\n &:last-child { border-radius: 0 0 var(--default-border-radius) var(--default-border-radius); }\n }\n\n &-active {\n background: var(--primary-color) !important;\n color: var(--text-on-primary) !important;\n }\n }\n\n &-footer {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n margin-top: 4px;\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"timeInput.module.mjs","names":[],"sources":["../../../../package/common/timeInput/timeInput.module.pcss"],"sourcesContent":[".timeInput {\n position: relative;\n width: 100%;\n flex: 1;\n min-width: 105px;\n\n &-clock {\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 12px;\n min-width: 280px;\n }\n\n &-clockHeader {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n margin-bottom: 4px;\n }\n\n &-headerSegment {\n border: none;\n background: var(--background-accent);\n color: var(--text-dark);\n font-size: 32px;\n font-weight: 600;\n line-height: 1;\n padding: 6px 10px;\n border-radius: var(--default-border-radius);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n\n &-active {\n background: var(--primary-color);\n color: var(--text-on-primary);\n }\n }\n\n &-headerColon {\n font-size: 32px;\n font-weight: 600;\n color: var(--text-dark);\n }\n\n &-meridiem {\n display: flex;\n flex-direction: column;\n gap: 2px;\n margin-left: 8px;\n\n & button {\n border: 1px solid var(--border-color);\n background: var(--background-accent);\n color: var(--text-dark);\n font-size: 12px;\n font-weight: 600;\n padding: 3px 8px;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n\n &:first-child { border-radius: var(--default-border-radius) var(--default-border-radius) 0 0; }\n &:last-child { border-radius: 0 0 var(--default-border-radius) var(--default-border-radius); }\n }\n\n &-active {\n background: var(--primary-color) !important;\n color: var(--text-on-primary) !important;\n }\n }\n\n &-footer {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n margin-top: 4px;\n }\n}\n"],"mappings":""}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from"../actionIcon/actionIcon.mjs";import t from"./toast.module.mjs";import{useEffect as
|
|
1
|
+
import e from"../actionIcon/actionIcon.mjs";import t from"./toast.module.mjs";import{useSwipeDismiss as n}from"../hooks/useSwipeDismiss.mjs";import{useEffect as r,useRef as i,useState as a}from"react";import o from"classnames";import{FontAwesomeIcon as s}from"@fortawesome/react-fontawesome";import{faBell as c,faCircleCheck as l,faCircleInfo as u,faCircleXmark as d,faTriangleExclamation as f,faXmark as p}from"@fortawesome/free-solid-svg-icons";import{jsx as m,jsxs as h}from"react/jsx-runtime";var g={info:u,success:l,error:d,warn:f,default:c};function _({item:c,isBottom:l,onDismiss:u}){let{id:d,content:f,options:_,dismissing:v}=c,{duration:y,showRemainingTime:b,showCloseButton:x,pauseOnHover:S,type:C,classNames:w,styles:T}=_,[E,D]=a(!1),[O,k]=a(!1),[A,j]=a(!1),{ref:M,isDragging:N}=n({onDismiss:()=>{j(!0),u(d)}}),P=S&&(E||O)||N,F=i(y);return r(()=>{if(y===0||P)return;let e=Date.now(),t=setTimeout(()=>u(d),F.current);return()=>{clearTimeout(t),F.current-=Date.now()-e}},[d,y,u,P]),h(`div`,{ref:M,className:o(t.toast,l?t.toastBottom:null,t[`toast-${C}`],v&&!A&&t.toastDismissing,P&&t.toastPaused,w?.root),style:T?.root,onMouseEnter:S?()=>D(!0):void 0,onMouseLeave:S?()=>D(!1):void 0,onFocus:S?()=>k(!0):void 0,onBlur:S?()=>k(!1):void 0,children:[m(s,{icon:g[C],className:o(t.toastIcon,w?.icon),style:T?.icon}),m(`div`,{className:o(t.toastContent,w?.content),style:T?.content,children:f}),x&&m(e,{icon:p,onClick:()=>u(d),className:o(t.toastCloseButton,w?.closeButton),style:T?.closeButton,"aria-label":`Close`}),b&&y>0&&m(`div`,{className:o(t.toastProgressBar,w?.progressBar),style:{"--toast-duration":`${y}ms`,...T?.progressBar}})]})}export{_ as default};
|
|
2
2
|
//# sourceMappingURL=toast.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toast.mjs","names":[],"sources":["../../../../package/common/toast/toast.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport {\n faCircleInfo,\n faCircleCheck,\n faCircleXmark,\n faTriangleExclamation,\n faBell,\n faXmark,\n} from '@fortawesome/free-solid-svg-icons';\n\nimport styles from './toast.module.pcss';\nimport type { ToastItem } from './toast.types';\nimport ActionIcon from '../actionIcon';\n\ninterface ToastProps {\n item: ToastItem;\n isBottom: boolean;\n onDismiss: (id: string) => void;\n}\n\nconst typeIcons = {\n info: faCircleInfo,\n success: faCircleCheck,\n error: faCircleXmark,\n warn: faTriangleExclamation,\n default: faBell,\n};\n\nfunction Toast({ item, isBottom, onDismiss }: ToastProps) {\n const { id, content, options, dismissing } = item;\n const { duration, showRemainingTime, showCloseButton, pauseOnHover, type, classNames, styles: slotStyles } = options;\n\n const [hovered, setHovered] = useState(false);\n const [focused, setFocused] = useState(false);\n const paused = pauseOnHover && (hovered || focused);\n\n // Remaining time is carried across pause/resume cycles so the timer continues\n // where it left off instead of restarting on every hover.\n const remainingRef = useRef(duration);\n\n useEffect(() => {\n if (duration === 0 || paused) return;\n const start = Date.now();\n const timer = setTimeout(() => onDismiss(id), remainingRef.current);\n return () => {\n clearTimeout(timer);\n remainingRef.current -= Date.now() - start;\n };\n }, [id, duration, onDismiss, paused]);\n\n return (\n <div\n className={cx(\n styles.toast,\n isBottom ? styles.toastBottom : null,\n styles[`toast-${type}`],\n dismissing && styles.toastDismissing,\n paused && styles.toastPaused,\n classNames?.root,\n )}\n style={slotStyles?.root}\n onMouseEnter={pauseOnHover ? () => setHovered(true) : undefined}\n onMouseLeave={pauseOnHover ? () => setHovered(false) : undefined}\n onFocus={pauseOnHover ? () => setFocused(true) : undefined}\n onBlur={pauseOnHover ? () => setFocused(false) : undefined}\n >\n <FontAwesomeIcon\n icon={typeIcons[type]}\n className={cx(styles.toastIcon, classNames?.icon)}\n style={slotStyles?.icon as React.CSSProperties & Record<`--fa-font-${string}`, string>}\n />\n\n <div className={cx(styles.toastContent, classNames?.content)} style={slotStyles?.content}>\n {content}\n </div>\n\n {showCloseButton && (\n <ActionIcon\n icon={faXmark}\n onClick={() => onDismiss(id)}\n className={cx(styles.toastCloseButton, classNames?.closeButton)}\n style={slotStyles?.closeButton}\n aria-label=\"Close\"\n />\n )}\n\n {showRemainingTime && duration > 0 && (\n <div\n className={cx(styles.toastProgressBar, classNames?.progressBar)}\n style={{ '--toast-duration': `${duration}ms`, ...slotStyles?.progressBar } as React.CSSProperties}\n />\n )}\n </div>\n );\n}\n\nexport default Toast;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"toast.mjs","names":[],"sources":["../../../../package/common/toast/toast.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport {\n faCircleInfo,\n faCircleCheck,\n faCircleXmark,\n faTriangleExclamation,\n faBell,\n faXmark,\n} from '@fortawesome/free-solid-svg-icons';\n\nimport styles from './toast.module.pcss';\nimport type { ToastItem } from './toast.types';\nimport ActionIcon from '../actionIcon';\nimport { useSwipeDismiss } from '../hooks/useSwipeDismiss';\n\ninterface ToastProps {\n item: ToastItem;\n isBottom: boolean;\n onDismiss: (id: string) => void;\n}\n\nconst typeIcons = {\n info: faCircleInfo,\n success: faCircleCheck,\n error: faCircleXmark,\n warn: faTriangleExclamation,\n default: faBell,\n};\n\nfunction Toast({ item, isBottom, onDismiss }: ToastProps) {\n const { id, content, options, dismissing } = item;\n const { duration, showRemainingTime, showCloseButton, pauseOnHover, type, classNames, styles: slotStyles } = options;\n\n const [hovered, setHovered] = useState(false);\n const [focused, setFocused] = useState(false);\n\n const [swiped, setSwiped] = useState(false);\n const { ref: swipeRef, isDragging } = useSwipeDismiss<HTMLDivElement>({\n onDismiss: () => {\n setSwiped(true);\n onDismiss(id);\n },\n });\n\n const paused = (pauseOnHover && (hovered || focused)) || isDragging;\n\n // Remaining time is carried across pause/resume cycles so the timer continues\n // where it left off instead of restarting on every hover.\n const remainingRef = useRef(duration);\n\n useEffect(() => {\n if (duration === 0 || paused) return;\n const start = Date.now();\n const timer = setTimeout(() => onDismiss(id), remainingRef.current);\n return () => {\n clearTimeout(timer);\n remainingRef.current -= Date.now() - start;\n };\n }, [id, duration, onDismiss, paused]);\n\n return (\n <div\n ref={swipeRef}\n className={cx(\n styles.toast,\n isBottom ? styles.toastBottom : null,\n styles[`toast-${type}`],\n dismissing && !swiped && styles.toastDismissing,\n paused && styles.toastPaused,\n classNames?.root,\n )}\n style={slotStyles?.root}\n onMouseEnter={pauseOnHover ? () => setHovered(true) : undefined}\n onMouseLeave={pauseOnHover ? () => setHovered(false) : undefined}\n onFocus={pauseOnHover ? () => setFocused(true) : undefined}\n onBlur={pauseOnHover ? () => setFocused(false) : undefined}\n >\n <FontAwesomeIcon\n icon={typeIcons[type]}\n className={cx(styles.toastIcon, classNames?.icon)}\n style={slotStyles?.icon as React.CSSProperties & Record<`--fa-font-${string}`, string>}\n />\n\n <div className={cx(styles.toastContent, classNames?.content)} style={slotStyles?.content}>\n {content}\n </div>\n\n {showCloseButton && (\n <ActionIcon\n icon={faXmark}\n onClick={() => onDismiss(id)}\n className={cx(styles.toastCloseButton, classNames?.closeButton)}\n style={slotStyles?.closeButton}\n aria-label=\"Close\"\n />\n )}\n\n {showRemainingTime && duration > 0 && (\n <div\n className={cx(styles.toastProgressBar, classNames?.progressBar)}\n style={{ '--toast-duration': `${duration}ms`, ...slotStyles?.progressBar } as React.CSSProperties}\n />\n )}\n </div>\n );\n}\n\nexport default Toast;\n"],"mappings":"ifAuBA,IAAM,EAAY,CAChB,KAAM,EACN,QAAS,EACT,MAAO,EACP,KAAM,EACN,QAAS,CACX,EAEA,SAAS,EAAM,CAAE,OAAM,WAAU,aAAyB,CACxD,GAAM,CAAE,KAAI,UAAS,UAAS,cAAe,EACvC,CAAE,WAAU,oBAAmB,kBAAiB,eAAc,OAAM,aAAY,OAAQ,GAAe,EAEvG,CAAC,EAAS,GAAc,EAAS,EAAK,EACtC,CAAC,EAAS,GAAc,EAAS,EAAK,EAEtC,CAAC,EAAQ,GAAa,EAAS,EAAK,EACpC,CAAE,IAAK,EAAU,cAAe,EAAgC,CACpE,cAAiB,CACf,EAAU,EAAI,EACd,EAAU,CAAE,CACd,CACF,CAAC,EAEK,EAAU,IAAiB,GAAW,IAAa,EAInD,EAAe,EAAO,CAAQ,EAYpC,OAVA,MAAgB,CACd,GAAI,IAAa,GAAK,EAAQ,OAC9B,IAAM,EAAQ,KAAK,IAAI,EACjB,EAAQ,eAAiB,EAAU,CAAE,EAAG,EAAa,OAAO,EAClE,UAAa,CACX,aAAa,CAAK,EAClB,EAAa,SAAW,KAAK,IAAI,EAAI,CACvC,CACF,EAAG,CAAC,EAAI,EAAU,EAAW,CAAM,CAAC,EAGlC,EAAC,MAAD,CACE,IAAK,EACL,UAAW,EACT,EAAO,MACP,EAAW,EAAO,YAAc,KAChC,EAAO,SAAS,KAChB,GAAc,CAAC,GAAU,EAAO,gBAChC,GAAU,EAAO,YACjB,GAAY,IACd,EACA,MAAO,GAAY,KACnB,aAAc,MAAqB,EAAW,EAAI,EAAI,IAAA,GACtD,aAAc,MAAqB,EAAW,EAAK,EAAI,IAAA,GACvD,QAAS,MAAqB,EAAW,EAAI,EAAI,IAAA,GACjD,OAAQ,MAAqB,EAAW,EAAK,EAAI,IAAA,YAdnD,CAgBE,EAAC,EAAD,CACE,KAAM,EAAU,GAChB,UAAW,EAAG,EAAO,UAAW,GAAY,IAAI,EAChD,MAAO,GAAY,IACpB,CAAA,EAED,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,aAAc,GAAY,OAAO,EAAG,MAAO,GAAY,iBAC9E,CACE,CAAA,EAEJ,GACC,EAAC,EAAD,CACE,KAAM,EACN,YAAe,EAAU,CAAE,EAC3B,UAAW,EAAG,EAAO,iBAAkB,GAAY,WAAW,EAC9D,MAAO,GAAY,YACnB,aAAW,OACZ,CAAA,EAGF,GAAqB,EAAW,GAC/B,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,iBAAkB,GAAY,WAAW,EAC9D,MAAO,CAAE,mBAAoB,GAAG,EAAS,IAAK,GAAG,GAAY,WAAY,CAC1E,CAAA,CAEA,GAET"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toast.module.mjs","names":[],"sources":["../../../../package/common/toast/toast.module.pcss"],"sourcesContent":[".container {\n position: fixed;\n z-index: 9999;\n display: flex;\n flex-direction: column;\n gap: 8px;\n pointer-events: none;\n padding: 16px;\n box-sizing: border-box;\n\n &-top-left {\n top: 0;\n left: 0;\n align-items: flex-start;\n }\n\n &-top-center {\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n align-items: center;\n }\n\n &-top-right {\n top: 0;\n right: 0;\n align-items: flex-end;\n }\n\n &-bottom-left {\n bottom: 0;\n left: 0;\n align-items: flex-start;\n flex-direction: column-reverse;\n }\n\n &-bottom-center {\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n align-items: center;\n flex-direction: column-reverse;\n }\n\n &-bottom-right {\n bottom: 0;\n right: 0;\n align-items: flex-end;\n flex-direction: column-reverse;\n }\n}\n\n.toast {\n pointer-events: all;\n display: flex;\n align-items: flex-start;\n gap: 10px;\n padding: 12px 14px;\n border-radius: var(--default-border-radius);\n background: var(--background-modal);\n color: var(--text-color);\n font-family: var(--default-font);\n box-shadow: var(--card-shadow);\n min-width: 240px;\n max-width: 380px;\n box-sizing: border-box;\n position: relative;\n overflow: hidden;\n animation: toastSlideDown 0.25s ease forwards;\n\n &-bottom {\n animation: toastSlideUp 0.25s ease forwards;\n }\n\n &-dismissing {\n animation: toastFadeOut 0.2s ease forwards;\n }\n\n &-paused .toastProgressBar {\n animation-play-state: paused;\n }\n\n &-info {\n border-left: 3px solid var(--info-color, #3b82f6);\n\n .toastIcon {\n color: var(--info-color, #3b82f6);\n }\n }\n\n &-success {\n border-left: 3px solid var(--success-color);\n\n .toastIcon {\n color: var(--success-color);\n }\n }\n\n &-error {\n border-left: 3px solid var(--error-color, #ef4444);\n\n .toastIcon {\n color: var(--error-color, #ef4444);\n }\n }\n\n &-warn {\n border-left: 3px solid var(--warn-color);\n\n .toastIcon {\n color: var(--warn-color);\n }\n }\n\n &-default {\n border-left: 3px solid var(--primary-color);\n\n .toastIcon {\n color: var(--primary-color);\n }\n }\n}\n\n.toastIcon {\n flex-shrink: 0;\n margin-top: 1px;\n font-size: 15px;\n}\n\n.toastContent {\n flex: 1;\n font-size: 14px;\n line-height: 1.4;\n}\n\n.toastCloseButton {\n flex-shrink: 0;\n background: none;\n border: none;\n cursor: pointer;\n padding: 0;\n color: var(--text-dark);\n font-size: 13px;\n opacity: 0.6;\n transition: opacity 0.15s;\n margin-top: 1px;\n\n &:hover {\n opacity: 1;\n }\n}\n\n.toastProgressBar {\n position: absolute;\n bottom: 0;\n left: 0;\n height: 3px;\n width: 100%;\n background: currentColor;\n opacity: 0.35;\n transform-origin: left;\n animation: toastShrink var(--toast-duration) linear forwards;\n}\n\n@keyframes toastSlideDown {\n from {\n opacity: 0;\n transform: translateY(-12px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes toastSlideUp {\n from {\n opacity: 0;\n transform: translateY(12px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes toastFadeOut {\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0;\n transform: scale(0.92);\n }\n}\n\n@keyframes toastShrink {\n from {\n transform: scaleX(1);\n }\n to {\n transform: scaleX(0);\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"toast.module.mjs","names":[],"sources":["../../../../package/common/toast/toast.module.pcss"],"sourcesContent":[".container {\n position: fixed;\n z-index: 9999;\n display: flex;\n flex-direction: column;\n gap: 8px;\n pointer-events: none;\n padding: 16px;\n box-sizing: border-box;\n\n &-top-left {\n top: 0;\n left: 0;\n align-items: flex-start;\n }\n\n &-top-center {\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n align-items: center;\n }\n\n &-top-right {\n top: 0;\n right: 0;\n align-items: flex-end;\n }\n\n &-bottom-left {\n bottom: 0;\n left: 0;\n align-items: flex-start;\n flex-direction: column-reverse;\n }\n\n &-bottom-center {\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n align-items: center;\n flex-direction: column-reverse;\n }\n\n &-bottom-right {\n bottom: 0;\n right: 0;\n align-items: flex-end;\n flex-direction: column-reverse;\n }\n}\n\n.toast {\n pointer-events: all;\n display: flex;\n align-items: flex-start;\n gap: 10px;\n padding: 12px 14px;\n border-radius: var(--default-border-radius);\n background: var(--background-modal);\n color: var(--text-color);\n font-family: var(--default-font);\n box-shadow: var(--card-shadow);\n min-width: 240px;\n max-width: 380px;\n box-sizing: border-box;\n position: relative;\n /* Tells the browser vertical panning is native (so the page can still scroll behind the toast)\n while horizontal movement is left for useSwipeDismiss's own pointer handling to decide. */\n touch-action: pan-y;\n overflow: hidden;\n animation: toastSlideDown 0.25s ease forwards;\n\n &-bottom {\n animation: toastSlideUp 0.25s ease forwards;\n }\n\n &-dismissing {\n animation: toastFadeOut 0.2s ease forwards;\n }\n\n &-paused .toastProgressBar {\n animation-play-state: paused;\n }\n\n &-info {\n border-left: 3px solid var(--info-color, #3b82f6);\n\n .toastIcon {\n color: var(--info-color, #3b82f6);\n }\n }\n\n &-success {\n border-left: 3px solid var(--success-color);\n\n .toastIcon {\n color: var(--success-color);\n }\n }\n\n &-error {\n border-left: 3px solid var(--error-color, #ef4444);\n\n .toastIcon {\n color: var(--error-color, #ef4444);\n }\n }\n\n &-warn {\n border-left: 3px solid var(--warn-color);\n\n .toastIcon {\n color: var(--warn-color);\n }\n }\n\n &-default {\n border-left: 3px solid var(--primary-color);\n\n .toastIcon {\n color: var(--primary-color);\n }\n }\n}\n\n.toastIcon {\n flex-shrink: 0;\n margin-top: 1px;\n font-size: 15px;\n}\n\n.toastContent {\n flex: 1;\n font-size: 14px;\n line-height: 1.4;\n}\n\n.toastCloseButton {\n flex-shrink: 0;\n background: none;\n border: none;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n padding: 0;\n color: var(--text-dark);\n font-size: 13px;\n opacity: 0.6;\n transition: opacity 0.15s;\n margin-top: 1px;\n\n &:hover {\n opacity: 1;\n }\n}\n\n.toastProgressBar {\n position: absolute;\n bottom: 0;\n left: 0;\n height: 3px;\n width: 100%;\n background: currentColor;\n opacity: 0.35;\n transform-origin: left;\n animation: toastShrink var(--toast-duration) linear forwards;\n}\n\n@keyframes toastSlideDown {\n from {\n opacity: 0;\n transform: translateY(-12px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes toastSlideUp {\n from {\n opacity: 0;\n transform: translateY(12px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes toastFadeOut {\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0;\n transform: scale(0.92);\n }\n}\n\n@keyframes toastShrink {\n from {\n transform: scaleX(1);\n }\n to {\n transform: scaleX(0);\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"virtualList.module.mjs","names":[],"sources":["../../../../package/common/virtualList/virtualList.module.pcss"],"sourcesContent":[".virtualList {\n overflow-y: auto;\n box-sizing: border-box;\n color: var(--text-color);\n font-family: var(--default-font);\n /* Disable the browser's own scroll anchoring — the component does its own\n scroll-position correction when row heights change, and the two fighting\n each other causes the thumb to desync while dragging. */\n overflow-anchor: none;\n /* Reserve the scrollbar gutter so rows don't re-wrap (and re-measure) when the\n vertical scrollbar appears/disappears as content grows. */\n scrollbar-gutter: stable;\n /* Establish a stacking context so every z-index inside the list (sticky\n header, toggle popover, drag clone) stays scoped to this component and\n can't paint over outside content like a modal. */\n isolation: isolate;\n\n &-drag-clone {\n box-sizing: border-box;\n contain: layout paint style;\n cursor: grabbing;\n /* It tracks the finger via transform — never animate that. */\n transition: none;\n }\n\n &-header {\n display: grid;\n position: sticky;\n top: 0;\n /* Above focused rows (z-index 1) so a focused row scrolled under the header\n never paints over it; the drag clone (z-index 3) still floats above both. */\n z-index: 2;\n background: var(--background-accent);\n border-bottom: 1px solid var(--border-color);\n box-sizing: border-box;\n\n &-cell {\n padding: 8px 12px;\n font-weight: 600;\n font-size: 13px;\n color: var(--text-dark);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n box-sizing: border-box;\n }\n\n &-toggle {\n background: none;\n border: none;\n cursor: pointer;\n padding: 4px 8px;\n color: var(--text-dark);\n display: flex;\n align-items: center;\n border-radius: var(--default-border-radius);\n transition: background 0.15s;\n\n &:hover {\n background: var(--background-accent-light);\n color: var(--text-color);\n }\n }\n }\n\n &-toggle {\n &-wrapper {\n position: absolute;\n right: 0;\n top: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n padding: 0 4px;\n }\n\n /* Chrome (background, shadow, radius, positioning) is provided by the\n FloatingMenu container this renders inside — keep only sizing here. */\n &-popover {\n display: flex;\n flex-direction: column;\n min-width: 160px;\n }\n\n &-item {\n padding: 4px 12px;\n white-space: nowrap;\n transition: background 0.1s;\n font-size: 14px;\n\n &:hover {\n background: var(--background-accent-light);\n }\n }\n }\n\n /* Count badge on the column-toggle cog: how many columns the user has hidden.\n Positioned at the cog's upper-right corner; non-interactive. */\n &-column-chip {\n position: absolute;\n top: 0;\n right: 0;\n min-width: 16px;\n height: 16px;\n padding: 0 4px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--primary-color);\n color: var(--text-on-primary);\n font-size: 10px;\n font-weight: 600;\n line-height: 1;\n border-radius: 8px;\n pointer-events: none;\n }\n\n &-select-cell {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 4px;\n box-sizing: border-box;\n }\n\n &-body {\n position: relative;\n box-sizing: border-box;\n }\n\n &-row {\n border-bottom: 1px solid var(--border-color);\n box-sizing: border-box;\n cursor: pointer;\n transition: background 0.1s;\n /* Isolate each row's layout/style so measuring or restyling one row can't force\n the whole list to re-layout — keeps fast scrolling smooth. */\n contain: layout style;\n\n &-no-divider {\n border-bottom: none;\n }\n\n &:hover {\n background: var(--background-accent-light);\n }\n\n /* Opt out of the hover highlight (e.g. when each row is a Card that handles\n its own hover). Declared before the `-selected` rule below, so a selected\n row's highlight still wins on hover. */\n &-no-hover:hover {\n background: transparent;\n }\n\n &-selected {\n background: var(--primary-lighter);\n\n &:hover {\n background: var(--primary-lighter);\n }\n }\n\n &-draggable {\n cursor: grab;\n /* Stop the mobile long-press from selecting text or showing the callout. */\n user-select: none;\n -webkit-touch-callout: none;\n\n &:active {\n cursor: grabbing;\n }\n }\n\n &-dragging {\n opacity: 0.4;\n }\n\n /* Tree-reorder `inside` drop: the dragged node becomes a child of this row,\n so highlight the whole row instead of drawing a between-rows line. */\n &-drop-inside {\n background: var(--primary-lighter);\n box-shadow: inset 0 0 0 2px var(--primary-color);\n }\n }\n\n /* Tree-reorder `before`/`after` drop line. Positioned inside the (relatively\n positioned absolute) row; `left` is set inline to the target's indent so it\n starts where the dropped content will. */\n &-drop-line {\n position: absolute;\n right: 0;\n height: 2px;\n background: var(--primary-color);\n pointer-events: none;\n z-index: 1;\n\n /* A small knob at the line's start, the usual tree drop-indicator look. */\n &::before {\n content: '';\n position: absolute;\n left: 0;\n top: 50%;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--primary-color);\n transform: translate(-50%, -50%);\n }\n\n &-before { top: -1px; }\n &-after { bottom: -1px; }\n }\n\n /* While a row is being dragged, suppress hover backgrounds so the pointer\n moving across rows doesn't light up the wrong one, and stop text selection.\n `touch-action: none` stops the touch drag from also scrolling the list\n (only active once the long-press has armed the drag). */\n &-reordering {\n touch-action: none;\n\n .virtualList-row {\n user-select: none;\n\n &:hover {\n background: transparent;\n }\n\n &.virtualList-row-selected:hover {\n background: var(--primary-lighter);\n }\n\n &.virtualList-row-dragging {\n background: transparent;\n }\n }\n }\n\n &-cell {\n padding: 8px 12px;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: 14px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n min-width: 0;\n\n /* `fit` columns are content-sized — keep their cells on a single line so the\n content can't wrap, and so the width measurement reads the true intrinsic\n width. (Other cells are free to wrap for variable-height rows.) */\n &[data-fit-key] {\n white-space: nowrap;\n }\n }\n\n &-loading {\n &-full {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n }\n\n &-indicator {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 8px 0;\n }\n }\n\n &-spinner {\n width: 32px;\n height: 32px;\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"virtualList.module.mjs","names":[],"sources":["../../../../package/common/virtualList/virtualList.module.pcss"],"sourcesContent":[".virtualList {\n overflow-y: auto;\n box-sizing: border-box;\n color: var(--text-color);\n font-family: var(--default-font);\n /* Disable the browser's own scroll anchoring — the component does its own\n scroll-position correction when row heights change, and the two fighting\n each other causes the thumb to desync while dragging. */\n overflow-anchor: none;\n /* Reserve the scrollbar gutter so rows don't re-wrap (and re-measure) when the\n vertical scrollbar appears/disappears as content grows. */\n scrollbar-gutter: stable;\n /* Establish a stacking context so every z-index inside the list (sticky\n header, toggle popover, drag clone) stays scoped to this component and\n can't paint over outside content like a modal. */\n isolation: isolate;\n\n &-drag-clone {\n box-sizing: border-box;\n contain: layout paint style;\n cursor: grabbing;\n /* It tracks the finger via transform — never animate that. */\n transition: none;\n }\n\n &-header {\n display: grid;\n position: sticky;\n top: 0;\n /* Above focused rows (z-index 1) so a focused row scrolled under the header\n never paints over it; the drag clone (z-index 3) still floats above both. */\n z-index: 2;\n background: var(--background-accent);\n border-bottom: 1px solid var(--border-color);\n box-sizing: border-box;\n\n &-cell {\n padding: 8px 12px;\n font-weight: 600;\n font-size: 13px;\n color: var(--text-dark);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n box-sizing: border-box;\n }\n\n &-toggle {\n background: none;\n border: none;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n padding: 4px 8px;\n color: var(--text-dark);\n display: flex;\n align-items: center;\n border-radius: var(--default-border-radius);\n transition: background 0.15s;\n\n &:hover {\n background: var(--background-accent-light);\n color: var(--text-color);\n }\n }\n }\n\n &-toggle {\n &-wrapper {\n position: absolute;\n right: 0;\n top: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n padding: 0 4px;\n }\n\n /* Chrome (background, shadow, radius, positioning) is provided by the\n FloatingMenu container this renders inside — keep only sizing here. */\n &-popover {\n display: flex;\n flex-direction: column;\n min-width: 160px;\n }\n\n &-item {\n padding: 4px 12px;\n white-space: nowrap;\n transition: background 0.1s;\n font-size: 14px;\n\n &:hover {\n background: var(--background-accent-light);\n }\n }\n }\n\n /* Count badge on the column-toggle cog: how many columns the user has hidden.\n Positioned at the cog's upper-right corner; non-interactive. */\n &-column-chip {\n position: absolute;\n top: 0;\n right: 0;\n min-width: 16px;\n height: 16px;\n padding: 0 4px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--primary-color);\n color: var(--text-on-primary);\n font-size: 10px;\n font-weight: 600;\n line-height: 1;\n border-radius: 8px;\n pointer-events: none;\n }\n\n &-select-cell {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 4px;\n box-sizing: border-box;\n }\n\n &-body {\n position: relative;\n box-sizing: border-box;\n }\n\n &-row {\n border-bottom: 1px solid var(--border-color);\n box-sizing: border-box;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transition: background 0.1s;\n /* Isolate each row's layout/style so measuring or restyling one row can't force\n the whole list to re-layout — keeps fast scrolling smooth. */\n contain: layout style;\n\n &-no-divider {\n border-bottom: none;\n }\n\n &:hover {\n background: var(--background-accent-light);\n }\n\n /* Opt out of the hover highlight (e.g. when each row is a Card that handles\n its own hover). Declared before the `-selected` rule below, so a selected\n row's highlight still wins on hover. */\n &-no-hover:hover {\n background: transparent;\n }\n\n &-selected {\n background: var(--primary-lighter);\n\n &:hover {\n background: var(--primary-lighter);\n }\n }\n\n &-draggable {\n cursor: grab;\n /* Stop the mobile long-press from selecting text or showing the callout. */\n user-select: none;\n -webkit-touch-callout: none;\n\n &:active {\n cursor: grabbing;\n }\n }\n\n &-dragging {\n opacity: 0.4;\n }\n\n /* Tree-reorder `inside` drop: the dragged node becomes a child of this row,\n so highlight the whole row instead of drawing a between-rows line. */\n &-drop-inside {\n background: var(--primary-lighter);\n box-shadow: inset 0 0 0 2px var(--primary-color);\n }\n }\n\n /* Tree-reorder `before`/`after` drop line. Positioned inside the (relatively\n positioned absolute) row; `left` is set inline to the target's indent so it\n starts where the dropped content will. */\n &-drop-line {\n position: absolute;\n right: 0;\n height: 2px;\n background: var(--primary-color);\n pointer-events: none;\n z-index: 1;\n\n /* A small knob at the line's start, the usual tree drop-indicator look. */\n &::before {\n content: '';\n position: absolute;\n left: 0;\n top: 50%;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--primary-color);\n transform: translate(-50%, -50%);\n }\n\n &-before { top: -1px; }\n &-after { bottom: -1px; }\n }\n\n /* While a row is being dragged, suppress hover backgrounds so the pointer\n moving across rows doesn't light up the wrong one, and stop text selection.\n `touch-action: none` stops the touch drag from also scrolling the list\n (only active once the long-press has armed the drag). */\n &-reordering {\n touch-action: none;\n\n .virtualList-row {\n user-select: none;\n\n &:hover {\n background: transparent;\n }\n\n &.virtualList-row-selected:hover {\n background: var(--primary-lighter);\n }\n\n &.virtualList-row-dragging {\n background: transparent;\n }\n }\n }\n\n &-cell {\n padding: 8px 12px;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: 14px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n min-width: 0;\n\n /* `fit` columns are content-sized — keep their cells on a single line so the\n content can't wrap, and so the width measurement reads the true intrinsic\n width. (Other cells are free to wrap for variable-height rows.) */\n &[data-fit-key] {\n white-space: nowrap;\n }\n }\n\n &-loading {\n &-full {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n }\n\n &-indicator {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 8px 0;\n }\n }\n\n &-spinner {\n width: 32px;\n height: 32px;\n }\n}\n"],"mappings":""}
|