@ahrowe/ui 0.19.0 → 0.19.2

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.
Files changed (50) hide show
  1. package/dist/esm/common/checkbox/checkbox.module.mjs.map +1 -1
  2. package/dist/esm/common/colorPicker/colorPicker.module.mjs.map +1 -1
  3. package/dist/esm/common/datePicker/components/datePickerMonth/datePickerMonth.mjs +1 -1
  4. package/dist/esm/common/datePicker/components/datePickerMonth/datePickerMonth.mjs.map +1 -1
  5. package/dist/esm/common/datePicker/dateFunctions.mjs +1 -1
  6. package/dist/esm/common/datePicker/dateFunctions.mjs.map +1 -1
  7. package/dist/esm/common/datePicker/datePicker.mjs +1 -1
  8. package/dist/esm/common/datePicker/datePicker.mjs.map +1 -1
  9. package/dist/esm/common/dropdown/dropdown.module.mjs.map +1 -1
  10. package/dist/esm/common/floatingMenu/useFloatingPosition.mjs +1 -1
  11. package/dist/esm/common/floatingMenu/useFloatingPosition.mjs.map +1 -1
  12. package/dist/esm/common/hooks/useVisualViewportSize.mjs +2 -0
  13. package/dist/esm/common/hooks/useVisualViewportSize.mjs.map +1 -0
  14. package/dist/esm/common/iconPicker/iconPicker.mjs +1 -1
  15. package/dist/esm/common/iconPicker/iconPicker.mjs.map +1 -1
  16. package/dist/esm/common/iconPicker/iconPicker.module.mjs.map +1 -1
  17. package/dist/esm/common/infiniteBlock/infiniteBlock.mjs +1 -1
  18. package/dist/esm/common/infiniteBlock/infiniteBlock.mjs.map +1 -1
  19. package/dist/esm/common/infiniteBlock/infiniteBlock.module.mjs +1 -1
  20. package/dist/esm/common/infiniteBlock/infiniteBlock.module.mjs.map +1 -1
  21. package/dist/esm/common/input/input.module.mjs.map +1 -1
  22. package/dist/esm/common/modal/modal.mjs +1 -1
  23. package/dist/esm/common/modal/modal.mjs.map +1 -1
  24. package/dist/esm/common/modal/modal.module.mjs.map +1 -1
  25. package/dist/esm/common/optionPicker/optionPicker.mjs +1 -1
  26. package/dist/esm/common/optionPicker/optionPicker.mjs.map +1 -1
  27. package/dist/esm/common/optionPicker/optionPicker.module.mjs.map +1 -1
  28. package/dist/esm/common/popover/usePopoverPosition.mjs +1 -1
  29. package/dist/esm/common/popover/usePopoverPosition.mjs.map +1 -1
  30. package/dist/esm/common/radioGroup/radioGroup.module.mjs.map +1 -1
  31. package/dist/esm/common/roomDrawer/roomDrawer.module.mjs.map +1 -1
  32. package/dist/esm/common/switch/switch.module.mjs.map +1 -1
  33. package/dist/esm/common/themeProvider/defaultTheme.mjs +1 -1
  34. package/dist/esm/common/themeProvider/defaultTheme.mjs.map +1 -1
  35. package/dist/esm/common/timeline/timeline.module.mjs.map +1 -1
  36. package/dist/esm/common/utils/visualViewport.mjs +2 -0
  37. package/dist/esm/common/utils/visualViewport.mjs.map +1 -0
  38. package/dist/index.cjs +6 -6
  39. package/dist/index.cjs.map +1 -1
  40. package/dist/style.css +1 -1
  41. package/dist/types/package/common/datePicker/components/datePickerMonth/datePickerMonth.d.ts +3 -1
  42. package/dist/types/package/common/datePicker/dateFunctions.d.ts +11 -0
  43. package/dist/types/package/common/hooks/useVisualViewportSize.d.ts +13 -0
  44. package/dist/types/package/common/themeProvider/theme.types.d.ts +2 -0
  45. package/dist/types/package/common/utils/visualViewport.d.ts +7 -0
  46. package/docs/DatePicker.md +2 -0
  47. package/docs/IconPicker.md +2 -0
  48. package/docs/OptionPicker.md +4 -0
  49. package/docs/ThemeProvider.md +1 -0
  50. package/package.json +1 -1
package/dist/esm/common/input/input.module.mjs.map CHANGED
@@ -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 --input-icon-size: 1.2em;\n --input-icon-offset: 0.6em;\n --input-icon-gutter: 2.2em;\n /* The visible border lives on `fieldset`/`container` below, not this root — buried inside a\n `<label>`, out of reach of a plain ancestor selector. --group-radius-* are custom properties\n (not defined here) that a wrapping ButtonGroup sets per corner on the position it occupies;\n unlike border-radius itself they inherit through any nesting depth, so they reach these\n descendants and flatten the right corners when this Input sits inside a ButtonGroup. */\n --input-radius: var(--group-radius-tl, var(--default-border-radius)) var(--group-radius-tr, var(--default-border-radius))\n var(--group-radius-br, var(--default-border-radius)) var(--group-radius-bl, var(--default-border-radius));\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(--input-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 &-no-notch {\n /* Only Firefox actually renders the reserved notch space as a visible overlap on\n label-less inputs (e.g. crossing a divider directly above it in a tightly-packed\n layout like the sidebar search box); Chrome's rendering was never broken, just\n consistently sized with every other input. @supports (-moz-appearance: none) is a\n reliable Firefox-only feature query, so this scopes the fix to where it's needed\n instead of changing every browser's sizing. */\n @supports (-moz-appearance: none) {\n inset: 0;\n }\n }\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 &-iconLeft {\n .input-matLabel {\n left: var(--input-icon-gutter);\n\n &-floating {\n left: calc(var(--input-icon-gutter) + 0.5em);\n }\n }\n\n .input-placeholder {\n left: var(--input-icon-gutter);\n }\n\n .input-fieldset {\n padding-left: var(--input-icon-gutter);\n }\n }\n\n &-container {\n display: flex;\n align-items: center;\n border-radius: var(--input-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 /* The browser's own search-cancel decoration doesn't match the theme — Search has its own\n themed clear icon (see isSearchCleared in input.tsx) that replaces it. */\n &::-webkit-search-cancel-button,\n &::-webkit-search-decoration {\n -webkit-appearance: none;\n appearance: none;\n display: none;\n }\n\n &-withIcon {\n padding-right: var(--input-icon-gutter) !important;\n\n &-left {\n padding-right: 0.643em !important;\n padding-left: var(--input-icon-gutter) !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: var(--input-icon-offset);\n color: var(--input-icon-color);\n width: var(--input-icon-size) !important;\n height: var(--input-icon-size) !important;\n user-select: none;\n top: 50%;\n transform: translateY(-50%);\n\n &:focus-visible {\n outline: 1px solid var(--primary-color);\n outline-offset: 2px;\n }\n\n &-left {\n left: var(--input-icon-offset);\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 --input-icon-size: 1.2em;\n --input-icon-offset: 0.6em;\n --input-icon-gutter: 2.2em;\n /* The visible border lives on `fieldset`/`container` below, not this root — buried inside a\n `<label>`, out of reach of a plain ancestor selector. --group-radius-* are custom properties\n (not defined here) that a wrapping ButtonGroup sets per corner on the position it occupies;\n unlike border-radius itself they inherit through any nesting depth, so they reach these\n descendants and flatten the right corners when this Input sits inside a ButtonGroup. */\n --input-radius: var(--group-radius-tl, var(--default-border-radius)) var(--group-radius-tr, var(--default-border-radius))\n var(--group-radius-br, var(--default-border-radius)) var(--group-radius-bl, var(--default-border-radius));\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(--input-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 &-no-notch {\n /* Only Firefox actually renders the reserved notch space as a visible overlap on\n label-less inputs (e.g. crossing a divider directly above it in a tightly-packed\n layout like the sidebar search box); Chrome's rendering was never broken, just\n consistently sized with every other input. @supports (-moz-appearance: none) is a\n reliable Firefox-only feature query, so this scopes the fix to where it's needed\n instead of changing every browser's sizing. */\n @supports (-moz-appearance: none) {\n inset: 0;\n }\n }\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 &-iconLeft {\n .input-matLabel {\n left: var(--input-icon-gutter);\n\n &-floating {\n left: calc(var(--input-icon-gutter) + 0.5em);\n }\n }\n\n .input-placeholder {\n left: var(--input-icon-gutter);\n }\n\n .input-fieldset {\n padding-left: var(--input-icon-gutter);\n }\n }\n\n &-container {\n display: flex;\n align-items: center;\n border-radius: var(--input-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(--focus-border-color, var(--primary-color));\n border-color: var(--focus-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 /* The browser's own search-cancel decoration doesn't match the theme — Search has its own\n themed clear icon (see isSearchCleared in input.tsx) that replaces it. */\n &::-webkit-search-cancel-button,\n &::-webkit-search-decoration {\n -webkit-appearance: none;\n appearance: none;\n display: none;\n }\n\n &-withIcon {\n padding-right: var(--input-icon-gutter) !important;\n\n &-left {\n padding-right: 0.643em !important;\n padding-left: var(--input-icon-gutter) !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: var(--input-icon-offset);\n color: var(--input-icon-color);\n width: var(--input-icon-size) !important;\n height: var(--input-icon-size) !important;\n user-select: none;\n top: 50%;\n transform: translateY(-50%);\n\n &:focus-visible {\n outline: 1px solid var(--focus-border-color, var(--primary-color));\n outline-offset: 2px;\n }\n\n &-left {\n left: var(--input-icon-offset);\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":""}
package/dist/esm/common/modal/modal.mjs CHANGED
@@ -1,2 +1,2 @@
1
- import e from"../bodyEnd/bodyEnd.mjs";import t from"./modal.module.mjs";import{useEffect as n,useState as r}from"react";import i from"classnames";import{FontAwesomeIcon as a}from"@fortawesome/react-fontawesome";import{faXmark as o}from"@fortawesome/free-solid-svg-icons";import{jsx as s,jsxs as c}from"react/jsx-runtime";function l({children:l=null,title:u=``,isOpen:d=!1,onClose:f=()=>null,className:p=``,style:m,hideHeader:h=!1,classNames:g,styles:_}){let[v,y]=r(d),[b,x]=r(d);return n(()=>{d?(y(d),setTimeout(()=>x(!0),1)):(x(!1),setTimeout(()=>y(d),300))},[d]),v?s(e,{children:c(`div`,{className:i(t.modalContainer,g?.container),style:_?.container,children:[s(`div`,{className:i(t.modalWrapper,b&&t.modalWrapperShown,g?.backdrop),style:_?.backdrop,onClick:f}),b&&c(`div`,{className:i(t.modal,b&&t.modalShown,p,g?.modal),style:{...m,..._?.modal},onClick:e=>e.stopPropagation(),children:[!h&&c(`div`,{className:i(t.modalHeader,g?.header),style:_?.header,children:[s(`div`,{className:g?.title,style:_?.title,children:u}),s(a,{onClick:f,icon:o,className:g?.closeButton,style:_?.closeButton})]}),l]})]})}):null}export{l as default};
1
+ import e from"../bodyEnd/bodyEnd.mjs";import t from"./modal.module.mjs";import{useVisualViewportSize as n}from"../hooks/useVisualViewportSize.mjs";import{useEffect as r,useState as i}from"react";import a from"classnames";import{FontAwesomeIcon as o}from"@fortawesome/react-fontawesome";import{faXmark as s}from"@fortawesome/free-solid-svg-icons";import{jsx as c,jsxs as l}from"react/jsx-runtime";function u({children:u=null,title:d=``,isOpen:f=!1,onClose:p=()=>null,className:m=``,style:h,hideHeader:g=!1,classNames:_,styles:v}){let[y,b]=i(f),[x,S]=i(f),{height:C,offsetTop:w}=n();return r(()=>{f?(b(f),setTimeout(()=>S(!0),1)):(S(!1),setTimeout(()=>b(f),300))},[f]),y?c(e,{children:l(`div`,{className:a(t.modalContainer,_?.container),style:{height:C,top:w,...v?.container},children:[c(`div`,{className:a(t.modalWrapper,x&&t.modalWrapperShown,_?.backdrop),style:v?.backdrop,onClick:p}),x&&l(`div`,{className:a(t.modal,x&&t.modalShown,m,_?.modal),style:{...h,...v?.modal},onClick:e=>e.stopPropagation(),children:[!g&&l(`div`,{className:a(t.modalHeader,_?.header),style:v?.header,children:[c(`div`,{className:_?.title,style:v?.title,children:d}),c(o,{onClick:p,icon:s,className:_?.closeButton,style:v?.closeButton})]}),u]})]})}):null}export{u as default};
2
2
  //# sourceMappingURL=modal.mjs.map
package/dist/esm/common/modal/modal.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"modal.mjs","names":[],"sources":["../../../../package/common/modal/modal.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'classnames';\nimport BodyEnd from 'components/common/bodyEnd';\n\nimport styles from './modal.module.pcss';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faXmark as closeIcon } from '@fortawesome/free-solid-svg-icons';\nimport { ModalProps } from './modal.types';\nimport { useEffect, useState } from 'react';\n\nfunction Modal({\n children = null,\n title = '',\n isOpen = false,\n onClose = () => null,\n className = '',\n style,\n hideHeader = false,\n classNames,\n styles: slotStyles,\n}: ModalProps) {\n const [isRendered, setIsRendered] = useState(isOpen);\n const [animateIn, setAnimateIn] = useState(isOpen);\n\n useEffect(() => {\n if (isOpen) {\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setIsRendered(isOpen);\n setTimeout(() => setAnimateIn(true), 1);\n } else {\n setAnimateIn(false);\n setTimeout(() => setIsRendered(isOpen), 300);\n }\n }, [isOpen]);\n\n if (!isRendered) return null;\n\n return (\n <BodyEnd>\n <div className={cx(styles.modalContainer, classNames?.container)} style={slotStyles?.container}>\n <div\n className={cx(styles.modalWrapper, animateIn && styles.modalWrapperShown, classNames?.backdrop)}\n style={slotStyles?.backdrop}\n onClick={onClose}\n />\n {animateIn && (\n <div\n className={cx(styles.modal, animateIn && styles.modalShown, className, classNames?.modal)}\n style={{ ...style, ...slotStyles?.modal }}\n onClick={(e) => e.stopPropagation()}\n >\n {!hideHeader && (\n <div className={cx(styles.modalHeader, classNames?.header)} style={slotStyles?.header}>\n <div className={classNames?.title} style={slotStyles?.title}>{title}</div>\n <FontAwesomeIcon onClick={onClose} icon={closeIcon} className={classNames?.closeButton} style={slotStyles?.closeButton as React.CSSProperties & Record<`--fa-font-${string}`, string>} />\n </div>\n )}\n {children}\n </div>\n )}\n </div>\n </BodyEnd>\n );\n}\n\nexport default Modal;\n"],"mappings":"iUAUA,SAAS,EAAM,CACb,WAAW,KACX,QAAQ,GACR,SAAS,GACT,cAAgB,KAChB,YAAY,GACZ,QACA,aAAa,GACb,aACA,OAAQ,GACK,CACb,GAAM,CAAC,EAAY,GAAiB,EAAS,CAAM,EAC7C,CAAC,EAAW,GAAgB,EAAS,CAAM,EAejD,OAbA,MAAgB,CACV,GAEF,EAAc,CAAM,EACpB,eAAiB,EAAa,EAAI,EAAG,CAAC,IAEtC,EAAa,EAAK,EAClB,eAAiB,EAAc,CAAM,EAAG,GAAG,EAE/C,EAAG,CAAC,CAAM,CAAC,EAEN,EAGH,EAAC,EAAD,CAAA,SACE,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,eAAgB,GAAY,SAAS,EAAG,MAAO,GAAY,mBAArF,CACE,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,aAAc,GAAa,EAAO,kBAAmB,GAAY,QAAQ,EAC9F,MAAO,GAAY,SACnB,QAAS,CACV,CAAA,EACA,GACC,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,MAAO,GAAa,EAAO,WAAY,EAAW,GAAY,KAAK,EACxF,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,KAAM,EACxC,QAAU,GAAM,EAAE,gBAAgB,WAHpC,CAKG,CAAC,GACA,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,YAAa,GAAY,MAAM,EAAG,MAAO,GAAY,gBAA/E,CACE,EAAC,MAAD,CAAK,UAAW,GAAY,MAAO,MAAO,GAAY,eAAQ,CAAW,CAAA,EACzE,EAAC,EAAD,CAAiB,QAAS,EAAS,KAAM,EAAW,UAAW,GAAY,YAAa,MAAO,GAAY,WAA6E,CAAA,CACrL,IAEN,CACE,GAEJ,GACE,CAAA,EA1Ba,IA4B1B"}
1
+ {"version":3,"file":"modal.mjs","names":[],"sources":["../../../../package/common/modal/modal.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'classnames';\nimport BodyEnd from 'components/common/bodyEnd';\n\nimport styles from './modal.module.pcss';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faXmark as closeIcon } from '@fortawesome/free-solid-svg-icons';\nimport { ModalProps } from './modal.types';\nimport { useEffect, useState } from 'react';\nimport { useVisualViewportSize } from 'components/common/hooks/useVisualViewportSize';\n\nfunction Modal({\n children = null,\n title = '',\n isOpen = false,\n onClose = () => null,\n className = '',\n style,\n hideHeader = false,\n classNames,\n styles: slotStyles,\n}: ModalProps) {\n const [isRendered, setIsRendered] = useState(isOpen);\n const [animateIn, setAnimateIn] = useState(isOpen);\n // Centering/sizing against the actually-visible viewport (not the full layout viewport) keeps\n // the modal — and whatever's focused inside it — from ending up under a mobile keyboard.\n const { height: viewportHeight, offsetTop: viewportOffsetTop } = useVisualViewportSize();\n\n useEffect(() => {\n if (isOpen) {\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setIsRendered(isOpen);\n setTimeout(() => setAnimateIn(true), 1);\n } else {\n setAnimateIn(false);\n setTimeout(() => setIsRendered(isOpen), 300);\n }\n }, [isOpen]);\n\n if (!isRendered) return null;\n\n return (\n <BodyEnd>\n <div\n className={cx(styles.modalContainer, classNames?.container)}\n style={{ height: viewportHeight, top: viewportOffsetTop, ...slotStyles?.container }}\n >\n <div\n className={cx(styles.modalWrapper, animateIn && styles.modalWrapperShown, classNames?.backdrop)}\n style={slotStyles?.backdrop}\n onClick={onClose}\n />\n {animateIn && (\n <div\n className={cx(styles.modal, animateIn && styles.modalShown, className, classNames?.modal)}\n style={{ ...style, ...slotStyles?.modal }}\n onClick={(e) => e.stopPropagation()}\n >\n {!hideHeader && (\n <div className={cx(styles.modalHeader, classNames?.header)} style={slotStyles?.header}>\n <div className={classNames?.title} style={slotStyles?.title}>{title}</div>\n <FontAwesomeIcon onClick={onClose} icon={closeIcon} className={classNames?.closeButton} style={slotStyles?.closeButton as React.CSSProperties & Record<`--fa-font-${string}`, string>} />\n </div>\n )}\n {children}\n </div>\n )}\n </div>\n </BodyEnd>\n );\n}\n\nexport default Modal;\n"],"mappings":"4YAWA,SAAS,EAAM,CACb,WAAW,KACX,QAAQ,GACR,SAAS,GACT,cAAgB,KAChB,YAAY,GACZ,QACA,aAAa,GACb,aACA,OAAQ,GACK,CACb,GAAM,CAAC,EAAY,GAAiB,EAAS,CAAM,EAC7C,CAAC,EAAW,GAAgB,EAAS,CAAM,EAG3C,CAAE,OAAQ,EAAgB,UAAW,GAAsB,EAAsB,EAevF,OAbA,MAAgB,CACV,GAEF,EAAc,CAAM,EACpB,eAAiB,EAAa,EAAI,EAAG,CAAC,IAEtC,EAAa,EAAK,EAClB,eAAiB,EAAc,CAAM,EAAG,GAAG,EAE/C,EAAG,CAAC,CAAM,CAAC,EAEN,EAGH,EAAC,EAAD,CAAA,SACE,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,eAAgB,GAAY,SAAS,EAC1D,MAAO,CAAE,OAAQ,EAAgB,IAAK,EAAmB,GAAG,GAAY,SAAU,WAFpF,CAIE,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,aAAc,GAAa,EAAO,kBAAmB,GAAY,QAAQ,EAC9F,MAAO,GAAY,SACnB,QAAS,CACV,CAAA,EACA,GACC,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,MAAO,GAAa,EAAO,WAAY,EAAW,GAAY,KAAK,EACxF,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,KAAM,EACxC,QAAU,GAAM,EAAE,gBAAgB,WAHpC,CAKG,CAAC,GACA,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,YAAa,GAAY,MAAM,EAAG,MAAO,GAAY,gBAA/E,CACE,EAAC,MAAD,CAAK,UAAW,GAAY,MAAO,MAAO,GAAY,eAAQ,CAAW,CAAA,EACzE,EAAC,EAAD,CAAiB,QAAS,EAAS,KAAM,EAAW,UAAW,GAAY,YAAa,MAAO,GAAY,WAA6E,CAAA,CACrL,IAEN,CACE,GAEJ,GACE,CAAA,EA7Ba,IA+B1B"}
package/dist/esm/common/modal/modal.module.mjs.map CHANGED
@@ -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\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
+ {"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: fixed;\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\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":""}
package/dist/esm/common/optionPicker/optionPicker.mjs CHANGED
@@ -1,2 +1,2 @@
1
- import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../interactableDiv/index.mjs";import n from"./optionPicker.module.mjs";import r from"classnames";import{jsx as i,jsxs as a}from"react/jsx-runtime";function o(o){let{className:s=void 0,style:c,classNames:l,styles:u,options:d,onChange:f,value:p,...m}=e(`OptionPicker`,o),h=d.findIndex(e=>e.key===p)*100/d.length;return a(`div`,{...m,className:r(n.optionPicker,s,l?.root),style:{...c,...u?.root},children:[i(`div`,{className:r(n.optionPickerChip,l?.chip),style:{left:`${h}%`,width:`${100/d.length}%`,...u?.chip}}),d.map(e=>i(t,{onClick:t=>f(e.key,t),className:r(n.optionPickerOption,e.key===p&&n.optionPickerOptionActive,l?.option),style:u?.option,tabIndex:e.key===p?-1:0,children:e.label},e.key))]})}export{o as default};
1
+ import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../interactableDiv/index.mjs";import n from"./optionPicker.module.mjs";import{useRef as r}from"react";import i from"classnames";import{jsx as a,jsxs as o}from"react/jsx-runtime";function s(s){let{className:c=void 0,style:l,classNames:u,styles:d,options:f,onChange:p,value:m,...h}=e(`OptionPicker`,s),g=f.findIndex(e=>e.key===m)*100/f.length,_=r([]),v=f.findIndex(e=>e.key===m),y=v>=0?v:0;function b(e,t,n){if(f.length===0)return;let r=(t+e+f.length)%f.length;_.current[r]?.focus(),p(f[r].key,n)}function x(e,t){switch(e.key){case`ArrowRight`:case`ArrowDown`:e.preventDefault(),b(1,t,e);break;case`ArrowLeft`:case`ArrowUp`:e.preventDefault(),b(-1,t,e);break;default:break}}return o(`div`,{...h,role:`radiogroup`,className:i(n.optionPicker,c,u?.root),style:{...l,...d?.root},children:[a(`div`,{className:i(n.optionPickerChip,u?.chip),style:{left:`${g}%`,width:`${100/f.length}%`,...d?.chip}}),f.map((e,r)=>{let o=e.key===m;return a(t,{ref:e=>{_.current[r]=e},onClick:t=>p(e.key,t),onKeyDown:e=>x(e,r),role:`radio`,"aria-checked":o,className:i(n.optionPickerOption,o&&n.optionPickerOptionActive,u?.option),style:d?.option,tabIndex:r===y?0:-1,children:e.label},e.key)})]})}export{s as default};
2
2
  //# sourceMappingURL=optionPicker.mjs.map
package/dist/esm/common/optionPicker/optionPicker.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"optionPicker.mjs","names":[],"sources":["../../../../package/common/optionPicker/optionPicker.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { OptionPickerProps } from './optionPicker.types';\nimport cx from 'classnames';\n\nimport styles from './optionPicker.module.pcss';\nimport InteractableDiv from '../interactableDiv';\nimport { useComponentDefaults } from '../configProvider';\n\n\nfunction OptionPicker(props: OptionPickerProps): ReactElement {\n const {\n className = undefined,\n style,\n classNames,\n styles: slotStyles,\n options,\n onChange,\n value,\n ...rest\n } = useComponentDefaults('OptionPicker', props);\n\n const optionPickerLeft = options.findIndex((option) => option.key === value) * 100 / options.length;\n\n return (\n <div {...rest} className={cx(styles.optionPicker, className, classNames?.root)} style={{ ...style, ...slotStyles?.root }}>\n <div\n className={cx(styles.optionPickerChip, classNames?.chip)}\n style={{ left: `${optionPickerLeft}%`, width: `${100 / options.length}%`, ...slotStyles?.chip }}\n />\n {options.map((option) => (\n <InteractableDiv\n onClick={(e) => onChange(option.key, e)}\n key={option.key}\n className={cx(\n styles.optionPickerOption,\n option.key === value && styles.optionPickerOptionActive,\n classNames?.option\n )}\n style={slotStyles?.option}\n tabIndex={option.key === value ? -1 : 0}\n >\n {option.label}\n </InteractableDiv>\n ))}\n </div>\n );\n}\n\nexport default OptionPicker;\n"],"mappings":"mPASA,SAAS,EAAa,EAAwC,CAC5D,GAAM,CACJ,YAAY,IAAA,GACZ,QACA,aACA,OAAQ,EACR,UACA,WACA,QACA,GAAG,GACD,EAAqB,eAAgB,CAAK,EAExC,EAAmB,EAAQ,UAAW,GAAW,EAAO,MAAQ,CAAK,EAAI,IAAM,EAAQ,OAE7F,OACE,EAAC,MAAD,CAAK,GAAI,EAAM,UAAW,EAAG,EAAO,aAAc,EAAW,GAAY,IAAI,EAAG,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,WAAvH,CACE,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,iBAAkB,GAAY,IAAI,EACvD,MAAO,CAAE,KAAM,GAAG,EAAiB,GAAI,MAAO,GAAG,IAAM,EAAQ,OAAO,GAAI,GAAG,GAAY,IAAK,CAC/F,CAAA,EACA,EAAQ,IAAK,GACZ,EAAC,EAAD,CACE,QAAU,GAAM,EAAS,EAAO,IAAK,CAAC,EAEtC,UAAW,EACT,EAAO,mBACP,EAAO,MAAQ,GAAS,EAAO,yBAC/B,GAAY,MACd,EACA,MAAO,GAAY,OACnB,SAAU,EAAO,MAAQ,EAAQ,GAAK,WAErC,EAAO,KACO,EAVV,EAAO,GAUG,CAClB,CACE,GAET"}
1
+ {"version":3,"file":"optionPicker.mjs","names":[],"sources":["../../../../package/common/optionPicker/optionPicker.tsx"],"sourcesContent":["import { useRef, type ReactElement } from 'react';\nimport { OptionPickerProps } from './optionPicker.types';\nimport cx from 'classnames';\n\nimport styles from './optionPicker.module.pcss';\nimport InteractableDiv from '../interactableDiv';\nimport { useComponentDefaults } from '../configProvider';\n\n\nfunction OptionPicker(props: OptionPickerProps): ReactElement {\n const {\n className = undefined,\n style,\n classNames,\n styles: slotStyles,\n options,\n onChange,\n value,\n ...rest\n } = useComponentDefaults('OptionPicker', props);\n\n const optionPickerLeft = options.findIndex((option) => option.key === value) * 100 / options.length;\n\n const itemRefs = useRef<(HTMLDivElement | null)[]>([]);\n const selectedIndex = options.findIndex((option) => option.key === value);\n const rovingIndex = selectedIndex >= 0 ? selectedIndex : 0;\n\n function moveTo(step: 1 | -1, fromIndex: number, event: React.KeyboardEvent<HTMLDivElement>) {\n if (options.length === 0) return;\n const next = (fromIndex + step + options.length) % options.length;\n itemRefs.current[next]?.focus();\n onChange(options[next].key, event as unknown as React.MouseEvent<HTMLDivElement, MouseEvent>);\n }\n\n function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>, index: number) {\n switch (event.key) {\n case 'ArrowRight':\n case 'ArrowDown':\n event.preventDefault();\n moveTo(1, index, event);\n break;\n case 'ArrowLeft':\n case 'ArrowUp':\n event.preventDefault();\n moveTo(-1, index, event);\n break;\n default:\n break;\n }\n }\n\n return (\n <div\n {...rest}\n role=\"radiogroup\"\n className={cx(styles.optionPicker, className, classNames?.root)}\n style={{ ...style, ...slotStyles?.root }}\n >\n <div\n className={cx(styles.optionPickerChip, classNames?.chip)}\n style={{ left: `${optionPickerLeft}%`, width: `${100 / options.length}%`, ...slotStyles?.chip }}\n />\n {options.map((option, index) => {\n const checked = option.key === value;\n return (\n <InteractableDiv\n ref={(el) => { itemRefs.current[index] = el; }}\n onClick={(e) => onChange(option.key, e)}\n onKeyDown={(e) => handleKeyDown(e, index)}\n key={option.key}\n role=\"radio\"\n aria-checked={checked}\n className={cx(\n styles.optionPickerOption,\n checked && styles.optionPickerOptionActive,\n classNames?.option\n )}\n style={slotStyles?.option}\n tabIndex={index === rovingIndex ? 0 : -1}\n >\n {option.label}\n </InteractableDiv>\n );\n })}\n </div>\n );\n}\n\nexport default OptionPicker;\n"],"mappings":"kRASA,SAAS,EAAa,EAAwC,CAC5D,GAAM,CACJ,YAAY,IAAA,GACZ,QACA,aACA,OAAQ,EACR,UACA,WACA,QACA,GAAG,GACD,EAAqB,eAAgB,CAAK,EAExC,EAAmB,EAAQ,UAAW,GAAW,EAAO,MAAQ,CAAK,EAAI,IAAM,EAAQ,OAEvF,EAAW,EAAkC,CAAC,CAAC,EAC/C,EAAgB,EAAQ,UAAW,GAAW,EAAO,MAAQ,CAAK,EAClE,EAAc,GAAiB,EAAI,EAAgB,EAEzD,SAAS,EAAO,EAAc,EAAmB,EAA4C,CAC3F,GAAI,EAAQ,SAAW,EAAG,OAC1B,IAAM,GAAQ,EAAY,EAAO,EAAQ,QAAU,EAAQ,OAC3D,EAAS,QAAQ,IAAO,MAAM,EAC9B,EAAS,EAAQ,GAAM,IAAK,CAAgE,CAC9F,CAEA,SAAS,EAAc,EAA4C,EAAe,CAChF,OAAQ,EAAM,IAAd,CACE,IAAK,aACL,IAAK,YACH,EAAM,eAAe,EACrB,EAAO,EAAG,EAAO,CAAK,EACtB,MACF,IAAK,YACL,IAAK,UACH,EAAM,eAAe,EACrB,EAAO,GAAI,EAAO,CAAK,EACvB,MACF,QACE,KACJ,CACF,CAEA,OACE,EAAC,MAAD,CACE,GAAI,EACJ,KAAK,aACL,UAAW,EAAG,EAAO,aAAc,EAAW,GAAY,IAAI,EAC9D,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,WAJzC,CAME,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,iBAAkB,GAAY,IAAI,EACvD,MAAO,CAAE,KAAM,GAAG,EAAiB,GAAI,MAAO,GAAG,IAAM,EAAQ,OAAO,GAAI,GAAG,GAAY,IAAK,CAC/F,CAAA,EACA,EAAQ,KAAK,EAAQ,IAAU,CAC9B,IAAM,EAAU,EAAO,MAAQ,EAC/B,OACE,EAAC,EAAD,CACE,IAAM,GAAO,CAAE,EAAS,QAAQ,GAAS,CAAI,EAC7C,QAAU,GAAM,EAAS,EAAO,IAAK,CAAC,EACtC,UAAY,GAAM,EAAc,EAAG,CAAK,EAExC,KAAK,QACL,eAAc,EACd,UAAW,EACT,EAAO,mBACP,GAAW,EAAO,yBAClB,GAAY,MACd,EACA,MAAO,GAAY,OACnB,SAAU,IAAU,EAAc,EAAI,YAErC,EAAO,KACO,EAZV,EAAO,GAYG,CAErB,CAAC,CACE,GAET"}
package/dist/esm/common/optionPicker/optionPicker.module.mjs.map CHANGED
@@ -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 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
+ {"version":3,"file":"optionPicker.module.mjs","names":[],"sources":["../../../../package/common/optionPicker/optionPicker.module.pcss"],"sourcesContent":[".optionPicker{\n display: flex;\n width: 100%;\n border-radius: var(--default-border-radius);\n border: 1px solid var(--border-color);\n transition: border-color 0.15s;\n justify-content: space-around;\n position: relative;\n overflow: hidden;\n\n /* :has(:focus-visible) rather than :focus-within, so this only lights up on\n keyboard focus — same as the per-option ring below, not on a mouse click. */\n &:has(:focus-visible) {\n border-color: var(--focus-border-color, var(--primary-color));\n }\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-visible {\n outline: var(--focus-border-color, var(--primary-color)) solid 2px;\n outline-offset: -2px;\n }\n\n &-active {\n color: var(--text-on-primary);\n\n /* The active option sits on the primary-color chip, so the default\n primary-color outline above is invisible against it — use the\n on-primary color instead, same as the option's own text/icon color. */\n &:focus-visible {\n outline-color: var(--text-on-primary);\n }\n }\n }\n}\n"],"mappings":""}
package/dist/esm/common/popover/usePopoverPosition.mjs CHANGED
@@ -1,2 +1,2 @@
1
- import{getScrollableAncestors as e,isHiddenByAnyAncestor as t}from"../utils/scrollAncestors.mjs";import{PopoverAlign as n,PopoverPlacement as r}from"./popover.types.mjs";import{useLayoutEffect as i}from"react";var a={[r.Top]:`bottom`,[r.Bottom]:`top`,[r.Left]:`right`,[r.Right]:`left`},o=8;function s({isOpen:s,placement:c,align:l,offset:u,triggerRef:d,floatingRef:f,panelRef:p,arrowRef:m}){i(()=>{if(!s)return;let i,h;function g(){let s=d.current,_=f.current,v=p.current;if(!s||!_||!v){i=requestAnimationFrame(g);return}let y=e(s);function b(){let e=s.getBoundingClientRect(),i=v.offsetWidth,d=v.offsetHeight,f=window.innerWidth,p=window.innerHeight,h={top:e.top,bottom:p-e.bottom,left:e.left,right:f-e.right},g=c===r.Top||c===r.Bottom?d:i,b=c,x=a[c];h[b]<g+u&&h[x]>h[b]&&(b=x);let S=b===`top`||b===`bottom`,C,w;b===`bottom`?C=e.bottom+u:b===`top`?C=e.top-u-d:w=b===`right`?e.right+u:e.left-u-i,S?(w=l===n.Start?e.left:l===n.End?e.right-i:e.left+e.width/2-i/2,w=Math.max(o,Math.min(w,f-i-o))):(C=l===n.Start?e.top:l===n.End?e.bottom-d:e.top+e.height/2-d/2,C=Math.max(o,Math.min(C,p-d-o))),_.style.top=`${C}px`,_.style.left=`${w}px`,_.style.visibility=t(e,y)?`hidden`:`visible`,_.dataset.placement=b;let T=m.current;if(T){let t=T.offsetWidth/2||5;if(S){let n=e.left+e.width/2-w;T.style.setProperty(`--arrow-x`,`${Math.max(t+2,Math.min(n,i-t-2))}px`),T.style.removeProperty(`--arrow-y`)}else{let n=e.top+e.height/2-C;T.style.setProperty(`--arrow-y`,`${Math.max(t+2,Math.min(n,d-t-2))}px`),T.style.removeProperty(`--arrow-x`)}}}b();let x=[window,...y];x.forEach(e=>e.addEventListener(`scroll`,b,{passive:!0})),window.addEventListener(`resize`,b),h=()=>{x.forEach(e=>e.removeEventListener(`scroll`,b)),window.removeEventListener(`resize`,b)}}return g(),()=>{i!==void 0&&cancelAnimationFrame(i),h?.()}},[s,c,l,u,d,f,p,m])}export{s as usePopoverPosition};
1
+ import{getScrollableAncestors as e,isHiddenByAnyAncestor as t}from"../utils/scrollAncestors.mjs";import{getVisualViewportRect as n}from"../utils/visualViewport.mjs";import{PopoverAlign as r,PopoverPlacement as i}from"./popover.types.mjs";import{useLayoutEffect as a}from"react";var o={[i.Top]:`bottom`,[i.Bottom]:`top`,[i.Left]:`right`,[i.Right]:`left`},s=8;function c({isOpen:c,placement:l,align:u,offset:d,triggerRef:f,floatingRef:p,panelRef:m,arrowRef:h}){a(()=>{if(!c)return;let a,g;function _(){let c=f.current,v=p.current,y=m.current;if(!c||!v||!y){a=requestAnimationFrame(_);return}let b=e(c);function x(){let e=c.getBoundingClientRect(),a=y.offsetWidth,f=y.offsetHeight,p=n(),m={top:e.top-p.top,bottom:p.top+p.height-e.bottom,left:e.left-p.left,right:p.left+p.width-e.right},g=l===i.Top||l===i.Bottom?f:a,_=l,x=o[l];m[_]<g+d&&m[x]>m[_]&&(_=x);let S=_===`top`||_===`bottom`,C,w;_===`bottom`?C=e.bottom+d:_===`top`?C=e.top-d-f:w=_===`right`?e.right+d:e.left-d-a,S?(w=u===r.Start?e.left:u===r.End?e.right-a:e.left+e.width/2-a/2,w=Math.max(p.left+s,Math.min(w,p.left+p.width-a-s))):(C=u===r.Start?e.top:u===r.End?e.bottom-f:e.top+e.height/2-f/2,C=Math.max(p.top+s,Math.min(C,p.top+p.height-f-s))),v.style.top=`${C}px`,v.style.left=`${w}px`,v.style.visibility=t(e,b)?`hidden`:`visible`,v.dataset.placement=_;let T=h.current;if(T){let t=T.offsetWidth/2||5;if(S){let n=e.left+e.width/2-w;T.style.setProperty(`--arrow-x`,`${Math.max(t+2,Math.min(n,a-t-2))}px`),T.style.removeProperty(`--arrow-y`)}else{let n=e.top+e.height/2-C;T.style.setProperty(`--arrow-y`,`${Math.max(t+2,Math.min(n,f-t-2))}px`),T.style.removeProperty(`--arrow-x`)}}}x();let S=[window,...b];S.forEach(e=>e.addEventListener(`scroll`,x,{passive:!0})),window.addEventListener(`resize`,x),window.visualViewport?.addEventListener(`resize`,x),window.visualViewport?.addEventListener(`scroll`,x),g=()=>{S.forEach(e=>e.removeEventListener(`scroll`,x)),window.removeEventListener(`resize`,x),window.visualViewport?.removeEventListener(`resize`,x),window.visualViewport?.removeEventListener(`scroll`,x)}}return _(),()=>{a!==void 0&&cancelAnimationFrame(a),g?.()}},[c,l,u,d,f,p,m,h])}export{c as usePopoverPosition};
2
2
  //# sourceMappingURL=usePopoverPosition.mjs.map
package/dist/esm/common/popover/usePopoverPosition.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"usePopoverPosition.mjs","names":[],"sources":["../../../../package/common/popover/usePopoverPosition.ts"],"sourcesContent":["import { useLayoutEffect, type RefObject } from 'react';\nimport { getScrollableAncestors, isHiddenByAnyAncestor } from 'components/common/utils/scrollAncestors';\nimport { PopoverPlacement, PopoverAlign } from './popover.types';\n\ntype Axis = 'top' | 'bottom' | 'left' | 'right';\nconst OPPOSITE: Record<PopoverPlacement, Axis> = {\n [PopoverPlacement.Top]: 'bottom',\n [PopoverPlacement.Bottom]: 'top',\n [PopoverPlacement.Left]: 'right',\n [PopoverPlacement.Right]: 'left',\n};\n\nconst MARGIN = 8; // viewport gutter kept clear when shifting a panel back on-screen\n\nexport interface UsePopoverPositionArgs {\n isOpen: boolean;\n placement: PopoverPlacement;\n align: PopoverAlign;\n offset: number;\n triggerRef: RefObject<HTMLElement | null>;\n /** `position: fixed` wrapper that receives top/left/visibility and the resolved-placement data attribute. */\n floatingRef: RefObject<HTMLElement | null>;\n /** Visible panel, measured to decide flip and shift. */\n panelRef: RefObject<HTMLElement | null>;\n /** Arrow element; gets `--arrow-x` / `--arrow-y` written to it. Pass a null ref when `withArrow` is false. */\n arrowRef: RefObject<HTMLElement | null>;\n}\n\n/**\n * Positions a portaled, `position: fixed` popover on any of the four sides of its trigger with\n * start/center/end cross-axis alignment. Flips to the opposite side when the preferred one has no\n * room, shifts back on-screen along the cross axis, points the arrow at the trigger centre, and\n * hides (not closes) the panel once the trigger scrolls behind a clipping ancestor. Position is\n * written straight to the DOM via refs — going through setState lags the browser's scroll paint.\n */\nexport function usePopoverPosition({\n isOpen, placement, align, offset, triggerRef, floatingRef, panelRef, arrowRef,\n}: UsePopoverPositionArgs) {\n useLayoutEffect(() => {\n if (!isOpen) return;\n\n let rafId: number | undefined;\n let teardown: (() => void) | undefined;\n\n // The portal target (BodyEnd's #bodyEnd) can still be missing on the first commit, so the\n // floating ref lands one render later. Refs don't re-fire the effect, so retry each frame.\n function trySetup() {\n const trigger = triggerRef.current;\n const floating = floatingRef.current;\n const panel = panelRef.current;\n if (!trigger || !floating || !panel) {\n rafId = requestAnimationFrame(trySetup);\n return;\n }\n const ancestors = getScrollableAncestors(trigger);\n\n function updatePos() {\n const t = trigger!.getBoundingClientRect();\n const pw = panel!.offsetWidth;\n const ph = panel!.offsetHeight;\n const vw = window.innerWidth;\n const vh = window.innerHeight;\n\n // Resolve the main-axis side, flipping when the preferred side lacks room and the\n // opposite side has more.\n const room: Record<Axis, number> = {\n top: t.top,\n bottom: vh - t.bottom,\n left: t.left,\n right: vw - t.right,\n };\n const need = (placement === PopoverPlacement.Top || placement === PopoverPlacement.Bottom) ? ph : pw;\n let side: Axis = placement as unknown as Axis;\n const opp = OPPOSITE[placement];\n if (room[side] < need + offset && room[opp] > room[side]) side = opp;\n\n const vertical = side === 'top' || side === 'bottom';\n\n // Main axis: place the panel just outside the trigger on the resolved side.\n let top: number;\n let left: number;\n if (side === 'bottom') { top = t.bottom + offset; }\n else if (side === 'top') { top = t.top - offset - ph; }\n else if (side === 'right') { left = t.right + offset; }\n else { left = t.left - offset - pw; }\n\n // Cross axis: align start/center/end against the trigger, then shift on-screen.\n if (vertical) {\n if (align === PopoverAlign.Start) left = t.left;\n else if (align === PopoverAlign.End) left = t.right - pw;\n else left = t.left + t.width / 2 - pw / 2;\n left = Math.max(MARGIN, Math.min(left!, vw - pw - MARGIN));\n } else {\n if (align === PopoverAlign.Start) top = t.top;\n else if (align === PopoverAlign.End) top = t.bottom - ph;\n else top = t.top + t.height / 2 - ph / 2;\n top = Math.max(MARGIN, Math.min(top!, vh - ph - MARGIN));\n }\n\n floating!.style.top = `${top!}px`;\n floating!.style.left = `${left!}px`;\n floating!.style.visibility = isHiddenByAnyAncestor(t, ancestors) ? 'hidden' : 'visible';\n floating!.dataset.placement = side;\n\n // Arrow: centre it on the trigger along the cross axis, clamped inside the panel edges.\n const arrow = arrowRef.current;\n if (arrow) {\n const half = arrow.offsetWidth / 2 || 5;\n if (vertical) {\n const x = t.left + t.width / 2 - left!;\n arrow.style.setProperty('--arrow-x', `${Math.max(half + 2, Math.min(x, pw - half - 2))}px`);\n arrow.style.removeProperty('--arrow-y');\n } else {\n const y = t.top + t.height / 2 - top!;\n arrow.style.setProperty('--arrow-y', `${Math.max(half + 2, Math.min(y, ph - half - 2))}px`);\n arrow.style.removeProperty('--arrow-x');\n }\n }\n }\n\n updatePos();\n\n const scrollTargets: (Window | HTMLElement)[] = [window, ...ancestors];\n scrollTargets.forEach((tt) => tt.addEventListener('scroll', updatePos, { passive: true }));\n window.addEventListener('resize', updatePos);\n teardown = () => {\n scrollTargets.forEach((tt) => tt.removeEventListener('scroll', updatePos));\n window.removeEventListener('resize', updatePos);\n };\n }\n\n trySetup();\n\n return () => {\n if (rafId !== undefined) cancelAnimationFrame(rafId);\n teardown?.();\n };\n }, [isOpen, placement, align, offset, triggerRef, floatingRef, panelRef, arrowRef]);\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"usePopoverPosition.mjs","names":[],"sources":["../../../../package/common/popover/usePopoverPosition.ts"],"sourcesContent":["import { useLayoutEffect, type RefObject } from 'react';\nimport { getScrollableAncestors, isHiddenByAnyAncestor } from 'components/common/utils/scrollAncestors';\nimport { getVisualViewportRect } from 'components/common/utils/visualViewport';\nimport { PopoverPlacement, PopoverAlign } from './popover.types';\n\ntype Axis = 'top' | 'bottom' | 'left' | 'right';\nconst OPPOSITE: Record<PopoverPlacement, Axis> = {\n [PopoverPlacement.Top]: 'bottom',\n [PopoverPlacement.Bottom]: 'top',\n [PopoverPlacement.Left]: 'right',\n [PopoverPlacement.Right]: 'left',\n};\n\nconst MARGIN = 8; // viewport gutter kept clear when shifting a panel back on-screen\n\nexport interface UsePopoverPositionArgs {\n isOpen: boolean;\n placement: PopoverPlacement;\n align: PopoverAlign;\n offset: number;\n triggerRef: RefObject<HTMLElement | null>;\n /** `position: fixed` wrapper that receives top/left/visibility and the resolved-placement data attribute. */\n floatingRef: RefObject<HTMLElement | null>;\n /** Visible panel, measured to decide flip and shift. */\n panelRef: RefObject<HTMLElement | null>;\n /** Arrow element; gets `--arrow-x` / `--arrow-y` written to it. Pass a null ref when `withArrow` is false. */\n arrowRef: RefObject<HTMLElement | null>;\n}\n\n/**\n * Positions a portaled, `position: fixed` popover on any of the four sides of its trigger with\n * start/center/end cross-axis alignment. Flips to the opposite side when the preferred one has no\n * room, shifts back on-screen along the cross axis, points the arrow at the trigger centre, and\n * hides (not closes) the panel once the trigger scrolls behind a clipping ancestor. Position is\n * written straight to the DOM via refs — going through setState lags the browser's scroll paint.\n */\nexport function usePopoverPosition({\n isOpen, placement, align, offset, triggerRef, floatingRef, panelRef, arrowRef,\n}: UsePopoverPositionArgs) {\n useLayoutEffect(() => {\n if (!isOpen) return;\n\n let rafId: number | undefined;\n let teardown: (() => void) | undefined;\n\n // The portal target (BodyEnd's #bodyEnd) can still be missing on the first commit, so the\n // floating ref lands one render later. Refs don't re-fire the effect, so retry each frame.\n function trySetup() {\n const trigger = triggerRef.current;\n const floating = floatingRef.current;\n const panel = panelRef.current;\n if (!trigger || !floating || !panel) {\n rafId = requestAnimationFrame(trySetup);\n return;\n }\n const ancestors = getScrollableAncestors(trigger);\n\n function updatePos() {\n const t = trigger!.getBoundingClientRect();\n const pw = panel!.offsetWidth;\n const ph = panel!.offsetHeight;\n // The visible area, not the full layout viewport — shrinks on mobile when a keyboard is\n // open, so the panel flips/clamps against what's actually on screen instead of ending up\n // hidden behind the keyboard.\n const vv = getVisualViewportRect();\n\n // Resolve the main-axis side, flipping when the preferred side lacks room and the\n // opposite side has more.\n const room: Record<Axis, number> = {\n top: t.top - vv.top,\n bottom: vv.top + vv.height - t.bottom,\n left: t.left - vv.left,\n right: vv.left + vv.width - t.right,\n };\n const need = (placement === PopoverPlacement.Top || placement === PopoverPlacement.Bottom) ? ph : pw;\n let side: Axis = placement as unknown as Axis;\n const opp = OPPOSITE[placement];\n if (room[side] < need + offset && room[opp] > room[side]) side = opp;\n\n const vertical = side === 'top' || side === 'bottom';\n\n // Main axis: place the panel just outside the trigger on the resolved side.\n let top: number;\n let left: number;\n if (side === 'bottom') { top = t.bottom + offset; }\n else if (side === 'top') { top = t.top - offset - ph; }\n else if (side === 'right') { left = t.right + offset; }\n else { left = t.left - offset - pw; }\n\n // Cross axis: align start/center/end against the trigger, then shift on-screen.\n if (vertical) {\n if (align === PopoverAlign.Start) left = t.left;\n else if (align === PopoverAlign.End) left = t.right - pw;\n else left = t.left + t.width / 2 - pw / 2;\n left = Math.max(vv.left + MARGIN, Math.min(left!, vv.left + vv.width - pw - MARGIN));\n } else {\n if (align === PopoverAlign.Start) top = t.top;\n else if (align === PopoverAlign.End) top = t.bottom - ph;\n else top = t.top + t.height / 2 - ph / 2;\n top = Math.max(vv.top + MARGIN, Math.min(top!, vv.top + vv.height - ph - MARGIN));\n }\n\n floating!.style.top = `${top!}px`;\n floating!.style.left = `${left!}px`;\n floating!.style.visibility = isHiddenByAnyAncestor(t, ancestors) ? 'hidden' : 'visible';\n floating!.dataset.placement = side;\n\n // Arrow: centre it on the trigger along the cross axis, clamped inside the panel edges.\n const arrow = arrowRef.current;\n if (arrow) {\n const half = arrow.offsetWidth / 2 || 5;\n if (vertical) {\n const x = t.left + t.width / 2 - left!;\n arrow.style.setProperty('--arrow-x', `${Math.max(half + 2, Math.min(x, pw - half - 2))}px`);\n arrow.style.removeProperty('--arrow-y');\n } else {\n const y = t.top + t.height / 2 - top!;\n arrow.style.setProperty('--arrow-y', `${Math.max(half + 2, Math.min(y, ph - half - 2))}px`);\n arrow.style.removeProperty('--arrow-x');\n }\n }\n }\n\n updatePos();\n\n const scrollTargets: (Window | HTMLElement)[] = [window, ...ancestors];\n scrollTargets.forEach((tt) => tt.addEventListener('scroll', updatePos, { passive: true }));\n window.addEventListener('resize', updatePos);\n // `window.resize` doesn't reliably fire when a mobile keyboard opens/closes — visualViewport\n // does, and is what the room/clamp math above is measured against.\n window.visualViewport?.addEventListener('resize', updatePos);\n window.visualViewport?.addEventListener('scroll', updatePos);\n teardown = () => {\n scrollTargets.forEach((tt) => tt.removeEventListener('scroll', updatePos));\n window.removeEventListener('resize', updatePos);\n window.visualViewport?.removeEventListener('resize', updatePos);\n window.visualViewport?.removeEventListener('scroll', updatePos);\n };\n }\n\n trySetup();\n\n return () => {\n if (rafId !== undefined) cancelAnimationFrame(rafId);\n teardown?.();\n };\n }, [isOpen, placement, align, offset, triggerRef, floatingRef, panelRef, arrowRef]);\n}\n"],"mappings":"sRAMA,IAAM,EAA2C,EAC9C,EAAiB,KAAM,UACvB,EAAiB,QAAS,OAC1B,EAAiB,MAAO,SACxB,EAAiB,OAAQ,MAC5B,EAEM,EAAS,EAuBf,SAAgB,EAAmB,CACjC,SAAQ,YAAW,QAAO,SAAQ,aAAY,cAAa,WAAU,YAC5C,CACzB,MAAsB,CACpB,GAAI,CAAC,EAAQ,OAEb,IAAI,EACA,EAIJ,SAAS,GAAW,CAClB,IAAM,EAAU,EAAW,QACrB,EAAW,EAAY,QACvB,EAAQ,EAAS,QACvB,GAAI,CAAC,GAAW,CAAC,GAAY,CAAC,EAAO,CACnC,EAAQ,sBAAsB,CAAQ,EACtC,MACF,CACA,IAAM,EAAY,EAAuB,CAAO,EAEhD,SAAS,GAAY,CACnB,IAAM,EAAI,EAAS,sBAAsB,EACnC,EAAK,EAAO,YACZ,EAAK,EAAO,aAIZ,EAAK,EAAsB,EAI3B,EAA6B,CACjC,IAAK,EAAE,IAAM,EAAG,IAChB,OAAQ,EAAG,IAAM,EAAG,OAAS,EAAE,OAC/B,KAAM,EAAE,KAAO,EAAG,KAClB,MAAO,EAAG,KAAO,EAAG,MAAQ,EAAE,KAChC,EACM,EAAQ,IAAc,EAAiB,KAAO,IAAc,EAAiB,OAAU,EAAK,EAC9F,EAAa,EACX,EAAM,EAAS,GACjB,EAAK,GAAQ,EAAO,GAAU,EAAK,GAAO,EAAK,KAAO,EAAO,GAEjE,IAAM,EAAW,IAAS,OAAS,IAAS,SAGxC,EACA,EACA,IAAS,SAAY,EAAM,EAAE,OAAS,EACjC,IAAS,MAAS,EAAM,EAAE,IAAM,EAAS,EAC7C,AACE,EADE,IAAS,QAAkB,EAAE,MAAQ,EAChC,EAAE,KAAO,EAAS,EAG5B,GACF,AAEK,EAFD,IAAU,EAAa,MAAc,EAAE,KAClC,IAAU,EAAa,IAAY,EAAE,MAAQ,EAC1C,EAAE,KAAO,EAAE,MAAQ,EAAI,EAAK,EACxC,EAAO,KAAK,IAAI,EAAG,KAAO,EAAQ,KAAK,IAAI,EAAO,EAAG,KAAO,EAAG,MAAQ,EAAK,CAAM,CAAC,IAEnF,AAEK,EAFD,IAAU,EAAa,MAAa,EAAE,IACjC,IAAU,EAAa,IAAW,EAAE,OAAS,EAC3C,EAAE,IAAM,EAAE,OAAS,EAAI,EAAK,EACvC,EAAM,KAAK,IAAI,EAAG,IAAM,EAAQ,KAAK,IAAI,EAAM,EAAG,IAAM,EAAG,OAAS,EAAK,CAAM,CAAC,GAGlF,EAAU,MAAM,IAAM,GAAG,EAAK,IAC9B,EAAU,MAAM,KAAO,GAAG,EAAM,IAChC,EAAU,MAAM,WAAa,EAAsB,EAAG,CAAS,EAAI,SAAW,UAC9E,EAAU,QAAQ,UAAY,EAG9B,IAAM,EAAQ,EAAS,QACvB,GAAI,EAAO,CACT,IAAM,EAAO,EAAM,YAAc,GAAK,EACtC,GAAI,EAAU,CACZ,IAAM,EAAI,EAAE,KAAO,EAAE,MAAQ,EAAI,EACjC,EAAM,MAAM,YAAY,YAAa,GAAG,KAAK,IAAI,EAAO,EAAG,KAAK,IAAI,EAAG,EAAK,EAAO,CAAC,CAAC,EAAE,GAAG,EAC1F,EAAM,MAAM,eAAe,WAAW,CACxC,KAAO,CACL,IAAM,EAAI,EAAE,IAAM,EAAE,OAAS,EAAI,EACjC,EAAM,MAAM,YAAY,YAAa,GAAG,KAAK,IAAI,EAAO,EAAG,KAAK,IAAI,EAAG,EAAK,EAAO,CAAC,CAAC,EAAE,GAAG,EAC1F,EAAM,MAAM,eAAe,WAAW,CACxC,CACF,CACF,CAEA,EAAU,EAEV,IAAM,EAA0C,CAAC,OAAQ,GAAG,CAAS,EACrE,EAAc,QAAS,GAAO,EAAG,iBAAiB,SAAU,EAAW,CAAE,QAAS,EAAK,CAAC,CAAC,EACzF,OAAO,iBAAiB,SAAU,CAAS,EAG3C,OAAO,gBAAgB,iBAAiB,SAAU,CAAS,EAC3D,OAAO,gBAAgB,iBAAiB,SAAU,CAAS,EAC3D,MAAiB,CACf,EAAc,QAAS,GAAO,EAAG,oBAAoB,SAAU,CAAS,CAAC,EACzE,OAAO,oBAAoB,SAAU,CAAS,EAC9C,OAAO,gBAAgB,oBAAoB,SAAU,CAAS,EAC9D,OAAO,gBAAgB,oBAAoB,SAAU,CAAS,CAChE,CACF,CAIA,OAFA,EAAS,MAEI,CACP,IAAU,IAAA,IAAW,qBAAqB,CAAK,EACnD,IAAW,CACb,CACF,EAAG,CAAC,EAAQ,EAAW,EAAO,EAAQ,EAAY,EAAa,EAAU,CAAQ,CAAC,CACpF"}
package/dist/esm/common/radioGroup/radioGroup.module.mjs.map CHANGED
@@ -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 -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
+ {"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(--focus-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":""}
package/dist/esm/common/roomDrawer/roomDrawer.module.mjs.map CHANGED
@@ -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 -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
+ {"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(--focus-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":""}
package/dist/esm/common/switch/switch.module.mjs.map CHANGED
@@ -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 -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
+ {"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(--focus-border-color, 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":""}
package/dist/esm/common/themeProvider/defaultTheme.mjs CHANGED
@@ -1,2 +1,2 @@
1
- var e={id:`default`,variables:{"--grey":`#8A8A8A`,"--lightgrey":`#e0e0e0`,"--lightergrey":`#B1B1B1`,"--white":`#FFFFFF`,"--red":`#D6002A`,"--lighter-red":`#ffeae9`,"--green":`#287626`,"--lighter-green":`#C4FFC9`,"--blue":`#5873d5`,"--lighter-blue":`#C6DBFF`,"--black":`black`,"--orange":`#ff7f50`,"--lighter-orange":`#ffe5d9`,"--primary-color":`#8184d6`,"--primary-accent":`#90CAF9`,"--primary-lighter":`#9a9ce4`,"--accent-color":`var(--grey)`,"--accent-color-light":`var(--lightgrey)`,"--text-color":`var(--white)`,"--text-dark":`var(--lightergrey)`,"--text-light":`var(--lightergrey)`,"--text-on-primary":`var(--white)`,"--text-on-delete":`var(--white)`,"--border-color":`#656574`,"--background":`#393945`,"--background-accent":`#33333c`,"--background-accent-dark":`var(--grey)`,"--background-accent-light":`#484856`,"--background-modal":`#484856`,"--success-color":`var(--green)`,"--success-lighter":`var(--lighter-green)`,"--error-color":`var(--red)`,"--error-lighter":`var(--lighter-red)`,"--required-mark-color":`var(--error-color)`,"--info-color":`var(--blue)`,"--info-lighter":`var(--lighter-blue)`,"--warn-color":`var(--orange)`,"--warn-lighter":`var(--lighter-orange)`,"--default-font-size":`14px`,"--text-small-font-size":`12px`,"--header-font-size":`24px`,"--header-medium-font-size":`18px`,"--header-small-font-size":`16px`,"--default-font-weight":`400`,"--header-font-weight":`600`,"--input-background":`transparent`,"--input-icon-color":`var(--text-color)`,"--error-border-color":`var(--red)`,"--button-default-color":`var(--primary-color)`,"--button-default-border":`1px solid var(--primary-color)`,"--default-border-radius":`8px`,"--padding-sides":`15px`,"--margin-top":`10px`,"--default-font":`'Inter', sans-serif`,"--themed-font":`'Inter', sans-serif`,"--card-shadow":`0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%)`,"--background-card-elevated":`var(--background-accent-light)`,"--background-card-outlined":`transparent`,"--background-card-filled":`var(--background-accent)`,"--spacing-s":`4px`,"--spacing-m":`8px`,"--spacing-l":`16px`}};export{e as defaultTheme};
1
+ var e={id:`default`,variables:{"--grey":`#8A8A8A`,"--lightgrey":`#e0e0e0`,"--lightergrey":`#B1B1B1`,"--white":`#FFFFFF`,"--red":`#D6002A`,"--lighter-red":`#ffeae9`,"--green":`#287626`,"--lighter-green":`#C4FFC9`,"--blue":`#5873d5`,"--lighter-blue":`#C6DBFF`,"--black":`black`,"--orange":`#ff7f50`,"--lighter-orange":`#ffe5d9`,"--primary-color":`#8184d6`,"--primary-accent":`#90CAF9`,"--primary-lighter":`#9a9ce4`,"--accent-color":`var(--grey)`,"--accent-color-light":`var(--lightgrey)`,"--text-color":`var(--white)`,"--text-dark":`var(--lightergrey)`,"--text-light":`var(--lightergrey)`,"--text-on-primary":`var(--white)`,"--text-on-delete":`var(--white)`,"--border-color":`#656574`,"--focus-border-color":`var(--primary-color)`,"--background":`#393945`,"--background-accent":`#33333c`,"--background-accent-dark":`var(--grey)`,"--background-accent-light":`#484856`,"--background-modal":`#484856`,"--success-color":`var(--green)`,"--success-lighter":`var(--lighter-green)`,"--error-color":`var(--red)`,"--error-lighter":`var(--lighter-red)`,"--required-mark-color":`var(--error-color)`,"--info-color":`var(--blue)`,"--info-lighter":`var(--lighter-blue)`,"--warn-color":`var(--orange)`,"--warn-lighter":`var(--lighter-orange)`,"--default-font-size":`16px`,"--text-small-font-size":`14px`,"--header-font-size":`24px`,"--header-medium-font-size":`18px`,"--header-small-font-size":`16px`,"--default-font-weight":`400`,"--header-font-weight":`600`,"--input-background":`transparent`,"--input-icon-color":`var(--text-color)`,"--error-border-color":`var(--red)`,"--button-default-color":`var(--primary-color)`,"--button-default-border":`1px solid var(--primary-color)`,"--default-border-radius":`8px`,"--padding-sides":`15px`,"--margin-top":`10px`,"--default-font":`'Inter', sans-serif`,"--themed-font":`'Inter', sans-serif`,"--card-shadow":`0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%)`,"--background-card-elevated":`var(--background-accent-light)`,"--background-card-outlined":`transparent`,"--background-card-filled":`var(--background-accent)`,"--spacing-s":`4px`,"--spacing-m":`8px`,"--spacing-l":`16px`}};export{e as defaultTheme};
2
2
  //# sourceMappingURL=defaultTheme.mjs.map
package/dist/esm/common/themeProvider/defaultTheme.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"defaultTheme.mjs","names":[],"sources":["../../../../package/common/themeProvider/defaultTheme.ts"],"sourcesContent":["import type { Theme } from './theme.types';\n\n/**\n * Built-in default theme used by ThemeProvider when no `themes` prop is\n * supplied. Provides a complete set of CSS variables so the component\n * library renders correctly out of the box.\n */\nexport const defaultTheme: Theme = {\n id: 'default',\n variables: {\n '--grey': '#8A8A8A',\n '--lightgrey': '#e0e0e0',\n '--lightergrey': '#B1B1B1',\n '--white': '#FFFFFF',\n '--red': '#D6002A',\n '--lighter-red': '#ffeae9',\n '--green': '#287626',\n '--lighter-green': '#C4FFC9',\n '--blue': '#5873d5',\n '--lighter-blue': '#C6DBFF',\n '--black': 'black',\n '--orange': '#ff7f50',\n '--lighter-orange': '#ffe5d9',\n\n '--primary-color': '#8184d6',\n '--primary-accent': '#90CAF9',\n '--primary-lighter': '#9a9ce4',\n '--accent-color': 'var(--grey)',\n '--accent-color-light': 'var(--lightgrey)',\n\n '--text-color': 'var(--white)',\n '--text-dark': 'var(--lightergrey)',\n '--text-light': 'var(--lightergrey)',\n '--text-on-primary': 'var(--white)',\n '--text-on-delete': 'var(--white)',\n '--border-color': '#656574',\n\n '--background': '#393945',\n '--background-accent': '#33333c',\n '--background-accent-dark': 'var(--grey)',\n '--background-accent-light': '#484856',\n '--background-modal': '#484856',\n\n '--success-color': 'var(--green)',\n '--success-lighter': 'var(--lighter-green)',\n '--error-color': 'var(--red)',\n '--error-lighter': 'var(--lighter-red)',\n '--required-mark-color': 'var(--error-color)',\n '--info-color': 'var(--blue)',\n '--info-lighter': 'var(--lighter-blue)',\n '--warn-color': 'var(--orange)',\n '--warn-lighter': 'var(--lighter-orange)',\n\n '--default-font-size': '14px',\n '--text-small-font-size': '12px',\n '--header-font-size': '24px',\n '--header-medium-font-size': '18px',\n '--header-small-font-size': '16px',\n\n '--default-font-weight': '400',\n '--header-font-weight': '600',\n\n '--input-background': 'transparent',\n '--input-icon-color': 'var(--text-color)',\n '--error-border-color': 'var(--red)',\n\n '--button-default-color': 'var(--primary-color)',\n '--button-default-border': '1px solid var(--primary-color)',\n\n '--default-border-radius': '8px',\n '--padding-sides': '15px',\n '--margin-top': '10px',\n\n '--default-font': \"'Inter', sans-serif\",\n '--themed-font': \"'Inter', sans-serif\",\n\n '--card-shadow':\n '0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%)',\n\n '--background-card-elevated': 'var(--background-accent-light)',\n '--background-card-outlined': 'transparent',\n '--background-card-filled': 'var(--background-accent)',\n\n '--spacing-s': '4px',\n '--spacing-m': '8px',\n '--spacing-l': '16px',\n },\n};\n"],"mappings":"AAOA,IAAa,EAAsB,CACjC,GAAI,UACJ,UAAW,CACT,SAAU,UACV,cAAe,UACf,gBAAiB,UACjB,UAAW,UACX,QAAS,UACT,gBAAiB,UACjB,UAAW,UACX,kBAAmB,UACnB,SAAU,UACV,iBAAkB,UAClB,UAAW,QACX,WAAY,UACZ,mBAAoB,UAEpB,kBAAmB,UACnB,mBAAoB,UACpB,oBAAqB,UACrB,iBAAkB,cAClB,uBAAwB,mBAExB,eAAgB,eAChB,cAAe,qBACf,eAAgB,qBAChB,oBAAqB,eACrB,mBAAoB,eACpB,iBAAkB,UAElB,eAAgB,UAChB,sBAAuB,UACvB,2BAA4B,cAC5B,4BAA6B,UAC7B,qBAAsB,UAEtB,kBAAmB,eACnB,oBAAqB,uBACrB,gBAAiB,aACjB,kBAAmB,qBACnB,wBAAyB,qBACzB,eAAgB,cAChB,iBAAkB,sBAClB,eAAgB,gBAChB,iBAAkB,wBAElB,sBAAuB,OACvB,yBAA0B,OAC1B,qBAAsB,OACtB,4BAA6B,OAC7B,2BAA4B,OAE5B,wBAAyB,MACzB,uBAAwB,MAExB,qBAAsB,cACtB,qBAAsB,oBACtB,uBAAwB,aAExB,yBAA0B,uBAC1B,0BAA2B,iCAE3B,0BAA2B,MAC3B,kBAAmB,OACnB,eAAgB,OAEhB,iBAAkB,sBAClB,gBAAiB,sBAEjB,gBACE,8FAEF,6BAA8B,iCAC9B,6BAA8B,cAC9B,2BAA4B,2BAE5B,cAAe,MACf,cAAe,MACf,cAAe,MACjB,CACF"}
1
+ {"version":3,"file":"defaultTheme.mjs","names":[],"sources":["../../../../package/common/themeProvider/defaultTheme.ts"],"sourcesContent":["import type { Theme } from './theme.types';\n\n/**\n * Built-in default theme used by ThemeProvider when no `themes` prop is\n * supplied. Provides a complete set of CSS variables so the component\n * library renders correctly out of the box.\n */\nexport const defaultTheme: Theme = {\n id: 'default',\n variables: {\n '--grey': '#8A8A8A',\n '--lightgrey': '#e0e0e0',\n '--lightergrey': '#B1B1B1',\n '--white': '#FFFFFF',\n '--red': '#D6002A',\n '--lighter-red': '#ffeae9',\n '--green': '#287626',\n '--lighter-green': '#C4FFC9',\n '--blue': '#5873d5',\n '--lighter-blue': '#C6DBFF',\n '--black': 'black',\n '--orange': '#ff7f50',\n '--lighter-orange': '#ffe5d9',\n\n '--primary-color': '#8184d6',\n '--primary-accent': '#90CAF9',\n '--primary-lighter': '#9a9ce4',\n '--accent-color': 'var(--grey)',\n '--accent-color-light': 'var(--lightgrey)',\n\n '--text-color': 'var(--white)',\n '--text-dark': 'var(--lightergrey)',\n '--text-light': 'var(--lightergrey)',\n '--text-on-primary': 'var(--white)',\n '--text-on-delete': 'var(--white)',\n '--border-color': '#656574',\n '--focus-border-color': 'var(--primary-color)',\n\n '--background': '#393945',\n '--background-accent': '#33333c',\n '--background-accent-dark': 'var(--grey)',\n '--background-accent-light': '#484856',\n '--background-modal': '#484856',\n\n '--success-color': 'var(--green)',\n '--success-lighter': 'var(--lighter-green)',\n '--error-color': 'var(--red)',\n '--error-lighter': 'var(--lighter-red)',\n '--required-mark-color': 'var(--error-color)',\n '--info-color': 'var(--blue)',\n '--info-lighter': 'var(--lighter-blue)',\n '--warn-color': 'var(--orange)',\n '--warn-lighter': 'var(--lighter-orange)',\n\n '--default-font-size': '16px',\n '--text-small-font-size': '14px',\n '--header-font-size': '24px',\n '--header-medium-font-size': '18px',\n '--header-small-font-size': '16px',\n\n '--default-font-weight': '400',\n '--header-font-weight': '600',\n\n '--input-background': 'transparent',\n '--input-icon-color': 'var(--text-color)',\n '--error-border-color': 'var(--red)',\n\n '--button-default-color': 'var(--primary-color)',\n '--button-default-border': '1px solid var(--primary-color)',\n\n '--default-border-radius': '8px',\n '--padding-sides': '15px',\n '--margin-top': '10px',\n\n '--default-font': \"'Inter', sans-serif\",\n '--themed-font': \"'Inter', sans-serif\",\n\n '--card-shadow':\n '0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%)',\n\n '--background-card-elevated': 'var(--background-accent-light)',\n '--background-card-outlined': 'transparent',\n '--background-card-filled': 'var(--background-accent)',\n\n '--spacing-s': '4px',\n '--spacing-m': '8px',\n '--spacing-l': '16px',\n },\n};\n"],"mappings":"AAOA,IAAa,EAAsB,CACjC,GAAI,UACJ,UAAW,CACT,SAAU,UACV,cAAe,UACf,gBAAiB,UACjB,UAAW,UACX,QAAS,UACT,gBAAiB,UACjB,UAAW,UACX,kBAAmB,UACnB,SAAU,UACV,iBAAkB,UAClB,UAAW,QACX,WAAY,UACZ,mBAAoB,UAEpB,kBAAmB,UACnB,mBAAoB,UACpB,oBAAqB,UACrB,iBAAkB,cAClB,uBAAwB,mBAExB,eAAgB,eAChB,cAAe,qBACf,eAAgB,qBAChB,oBAAqB,eACrB,mBAAoB,eACpB,iBAAkB,UAClB,uBAAwB,uBAExB,eAAgB,UAChB,sBAAuB,UACvB,2BAA4B,cAC5B,4BAA6B,UAC7B,qBAAsB,UAEtB,kBAAmB,eACnB,oBAAqB,uBACrB,gBAAiB,aACjB,kBAAmB,qBACnB,wBAAyB,qBACzB,eAAgB,cAChB,iBAAkB,sBAClB,eAAgB,gBAChB,iBAAkB,wBAElB,sBAAuB,OACvB,yBAA0B,OAC1B,qBAAsB,OACtB,4BAA6B,OAC7B,2BAA4B,OAE5B,wBAAyB,MACzB,uBAAwB,MAExB,qBAAsB,cACtB,qBAAsB,oBACtB,uBAAwB,aAExB,yBAA0B,uBAC1B,0BAA2B,iCAE3B,0BAA2B,MAC3B,kBAAmB,OACnB,eAAgB,OAEhB,iBAAkB,sBAClB,gBAAiB,sBAEjB,gBACE,8FAEF,6BAA8B,iCAC9B,6BAA8B,cAC9B,2BAA4B,2BAE5B,cAAe,MACf,cAAe,MACf,cAAe,MACjB,CACF"}
package/dist/esm/common/timeline/timeline.module.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"timeline.module.mjs","names":[],"sources":["../../../../package/common/timeline/timeline.module.pcss"],"sourcesContent":[".timeline {\n /* Theme tokens resolved once, each with a built-in fallback. Set any of the\n public `--timeline-*` variables via ThemeProvider (theme-wide) or `style`\n (per instance) to override; unset ones fall back to the values below. */\n --custom-timeline-dot-size: var(--timeline-dot-size, 14px);\n --custom-timeline-dot-color: var(--timeline-dot-color, var(--primary-color));\n --custom-timeline-dot-border: var(--timeline-dot-border, var(--background));\n --custom-timeline-line-color: var(--timeline-line-color, var(--border-color));\n --custom-timeline-line-thickness: var(--timeline-line-thickness, 2px);\n --custom-timeline-gap: var(--timeline-gap, 16px);\n --custom-timeline-item-gap: var(--timeline-item-gap, 20px);\n --custom-timeline-icon-dot-size: var(--timeline-icon-dot-size, 28px);\n\n display: flex;\n flex-direction: column;\n color: var(--text-color);\n\n &-item {\n display: flex;\n gap: var(--custom-timeline-gap);\n border-radius: var(--default-border-radius);\n\n &:last-child &-connector {\n display: none;\n }\n }\n\n &-item-clickable {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transition: background-color 0.15s ease;\n margin: 0px -10px;\n padding: 0px 10px;\n\n &:hover {\n background-color: var(--background-accent-light);\n }\n &:focus-visible {\n outline: 2px solid var(--primary-color);\n outline-offset: -2px;\n }\n }\n\n &-item-disabled {\n opacity: 0.5;\n }\n\n &-marker {\n display: flex;\n flex-direction: column;\n align-items: center;\n flex-shrink: 0;\n }\n\n &-dot {\n width: var(--custom-timeline-dot-size);\n height: var(--custom-timeline-dot-size);\n border-radius: 50%;\n background-color: var(--custom-timeline-dot-color);\n box-shadow: 0 0 0 3px var(--custom-timeline-dot-border);\n flex-shrink: 0;\n\n &:has(svg) {\n width: var(--custom-timeline-icon-dot-size);\n height: var(--custom-timeline-icon-dot-size);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--text-on-primary);\n font-size: calc(var(--custom-timeline-icon-dot-size) * 0.5);\n }\n }\n\n &-dot-primary {\n background-color: var(--primary-color);\n }\n &-dot-success {\n background-color: var(--success-color);\n }\n &-dot-warn {\n background-color: var(--warn-color);\n }\n &-dot-error {\n background-color: var(--error-color);\n }\n\n &-connector {\n flex: 1 1 auto;\n width: var(--custom-timeline-line-thickness);\n min-height: 12px;\n background-color: var(--custom-timeline-line-color);\n margin: 4px 0;\n }\n\n &-content {\n flex: 1 1 auto;\n min-width: 0;\n padding-bottom: var(--custom-timeline-item-gap);\n }\n\n &-header {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: 8px;\n }\n\n &-title {\n font-weight: 600;\n color: var(--text-color);\n }\n\n &-timestamp {\n flex-shrink: 0;\n color: var(--text-dark);\n font-size: var(--text-small-font-size, 0.85em);\n white-space: nowrap;\n }\n\n &-description {\n color: var(--text-dark);\n margin-top: 2px;\n }\n\n /* Right: markers + line on the right, content on the left */\n &-right &-item {\n flex-direction: row-reverse;\n text-align: right;\n }\n &-right &-header {\n flex-direction: row-reverse;\n }\n\n /* Alternate: two-column layout, entries alternating left/right of a centered line */\n &-alternate &-item {\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n align-items: start;\n gap: var(--custom-timeline-gap);\n }\n &-alternate &-marker {\n grid-column: 2;\n grid-row: 1;\n }\n &-alternate &-content {\n grid-column: 1;\n grid-row: 1;\n text-align: right;\n }\n &-alternate &-header {\n flex-direction: row-reverse;\n }\n &-alternate &-item-right &-content {\n grid-column: 3;\n text-align: left;\n }\n &-alternate &-item-right &-header {\n flex-direction: row;\n }\n}\n"],"mappings":""}
1
+ {"version":3,"file":"timeline.module.mjs","names":[],"sources":["../../../../package/common/timeline/timeline.module.pcss"],"sourcesContent":[".timeline {\n /* Theme tokens resolved once, each with a built-in fallback. Set any of the\n public `--timeline-*` variables via ThemeProvider (theme-wide) or `style`\n (per instance) to override; unset ones fall back to the values below. */\n --custom-timeline-dot-size: var(--timeline-dot-size, 14px);\n --custom-timeline-dot-color: var(--timeline-dot-color, var(--primary-color));\n --custom-timeline-dot-border: var(--timeline-dot-border, var(--background));\n --custom-timeline-line-color: var(--timeline-line-color, var(--border-color));\n --custom-timeline-line-thickness: var(--timeline-line-thickness, 2px);\n --custom-timeline-gap: var(--timeline-gap, 16px);\n --custom-timeline-item-gap: var(--timeline-item-gap, 20px);\n --custom-timeline-icon-dot-size: var(--timeline-icon-dot-size, 28px);\n\n display: flex;\n flex-direction: column;\n color: var(--text-color);\n\n &-item {\n display: flex;\n gap: var(--custom-timeline-gap);\n border-radius: var(--default-border-radius);\n\n &:last-child &-connector {\n display: none;\n }\n }\n\n &-item-clickable {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transition: background-color 0.15s ease;\n margin: 0px -10px;\n padding: 0px 10px;\n\n &:hover {\n background-color: var(--background-accent-light);\n }\n &:focus-visible {\n outline: 2px solid var(--focus-border-color, var(--primary-color));\n outline-offset: -2px;\n }\n }\n\n &-item-disabled {\n opacity: 0.5;\n }\n\n &-marker {\n display: flex;\n flex-direction: column;\n align-items: center;\n flex-shrink: 0;\n }\n\n &-dot {\n width: var(--custom-timeline-dot-size);\n height: var(--custom-timeline-dot-size);\n border-radius: 50%;\n background-color: var(--custom-timeline-dot-color);\n box-shadow: 0 0 0 3px var(--custom-timeline-dot-border);\n flex-shrink: 0;\n\n &:has(svg) {\n width: var(--custom-timeline-icon-dot-size);\n height: var(--custom-timeline-icon-dot-size);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--text-on-primary);\n font-size: calc(var(--custom-timeline-icon-dot-size) * 0.5);\n }\n }\n\n &-dot-primary {\n background-color: var(--primary-color);\n }\n &-dot-success {\n background-color: var(--success-color);\n }\n &-dot-warn {\n background-color: var(--warn-color);\n }\n &-dot-error {\n background-color: var(--error-color);\n }\n\n &-connector {\n flex: 1 1 auto;\n width: var(--custom-timeline-line-thickness);\n min-height: 12px;\n background-color: var(--custom-timeline-line-color);\n margin: 4px 0;\n }\n\n &-content {\n flex: 1 1 auto;\n min-width: 0;\n padding-bottom: var(--custom-timeline-item-gap);\n }\n\n &-header {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: 8px;\n }\n\n &-title {\n font-weight: 600;\n color: var(--text-color);\n }\n\n &-timestamp {\n flex-shrink: 0;\n color: var(--text-dark);\n font-size: var(--text-small-font-size, 0.85em);\n white-space: nowrap;\n }\n\n &-description {\n color: var(--text-dark);\n margin-top: 2px;\n }\n\n /* Right: markers + line on the right, content on the left */\n &-right &-item {\n flex-direction: row-reverse;\n text-align: right;\n }\n &-right &-header {\n flex-direction: row-reverse;\n }\n\n /* Alternate: two-column layout, entries alternating left/right of a centered line */\n &-alternate &-item {\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n align-items: start;\n gap: var(--custom-timeline-gap);\n }\n &-alternate &-marker {\n grid-column: 2;\n grid-row: 1;\n }\n &-alternate &-content {\n grid-column: 1;\n grid-row: 1;\n text-align: right;\n }\n &-alternate &-header {\n flex-direction: row-reverse;\n }\n &-alternate &-item-right &-content {\n grid-column: 3;\n text-align: left;\n }\n &-alternate &-item-right &-header {\n flex-direction: row;\n }\n}\n"],"mappings":""}
package/dist/esm/common/utils/visualViewport.mjs ADDED
@@ -0,0 +1,2 @@
1
+ function e(){let e=typeof window<`u`?window.visualViewport:null;return e?{left:e.offsetLeft,top:e.offsetTop,width:e.width,height:e.height}:{left:0,top:0,width:typeof window<`u`?window.innerWidth:0,height:typeof window<`u`?window.innerHeight:0}}export{e as getVisualViewportRect};
2
+ //# sourceMappingURL=visualViewport.mjs.map
package/dist/esm/common/utils/visualViewport.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"visualViewport.mjs","names":[],"sources":["../../../../package/common/utils/visualViewport.ts"],"sourcesContent":["export interface VisualViewportRect {\n left: number;\n top: number;\n width: number;\n height: number;\n}\n\n// `window.visualViewport` reports the actually-visible area, which shrinks (and offsets) when a\n// mobile on-screen keyboard opens — unlike `window.innerWidth`/`innerHeight`, which stay pinned to\n// the full layout viewport. `getBoundingClientRect()` is relative to the layout viewport's origin,\n// so `left`/`top` here let callers translate into the same coordinate space before clamping.\nexport function getVisualViewportRect(): VisualViewportRect {\n const vv = typeof window !== 'undefined' ? window.visualViewport : null;\n if (vv) return { left: vv.offsetLeft, top: vv.offsetTop, width: vv.width, height: vv.height };\n return {\n left: 0,\n top: 0,\n width: typeof window !== 'undefined' ? window.innerWidth : 0,\n height: typeof window !== 'undefined' ? window.innerHeight : 0,\n };\n}\n"],"mappings":"AAWA,SAAgB,GAA4C,CAC1D,IAAM,EAAK,OAAO,OAAW,IAAc,OAAO,eAAiB,KAEnE,OADI,EAAW,CAAE,KAAM,EAAG,WAAY,IAAK,EAAG,UAAW,MAAO,EAAG,MAAO,OAAQ,EAAG,MAAO,EACrF,CACL,KAAM,EACN,IAAK,EACL,MAAO,OAAO,OAAW,IAAc,OAAO,WAAa,EAC3D,OAAQ,OAAO,OAAW,IAAc,OAAO,YAAc,CAC/D,CACF"}