@paperless/core 0.1.0-alpha.390 → 0.1.0-alpha.392

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 (94) hide show
  1. package/CHANGELOG.md +32 -0
  2. package/dist/build/{p-0a4bbe7e.entry.js → p-24182b62.entry.js} +2 -2
  3. package/dist/build/p-24182b62.entry.js.map +1 -0
  4. package/dist/{paperless/p-106f2976.entry.js → build/p-2b08e371.entry.js} +2 -2
  5. package/dist/build/p-2b08e371.entry.js.map +1 -0
  6. package/dist/build/p-4e66f19d.entry.js +2 -0
  7. package/dist/build/{p-d07afedd.entry.js.map → p-4e66f19d.entry.js.map} +1 -1
  8. package/dist/build/{p-2263ddec.entry.js → p-5f2e2380.entry.js} +2 -2
  9. package/dist/build/{p-2263ddec.entry.js.map → p-5f2e2380.entry.js.map} +1 -1
  10. package/dist/build/p-f8c3fff9.entry.js +2 -0
  11. package/dist/build/p-f8c3fff9.entry.js.map +1 -0
  12. package/dist/build/paperless.css +1 -1
  13. package/dist/build/paperless.esm.js +1 -1
  14. package/dist/cjs/p-backdrop.cjs.entry.js +1 -1
  15. package/dist/cjs/p-backdrop.cjs.entry.js.map +1 -1
  16. package/dist/cjs/p-button_3.cjs.entry.js +1 -1
  17. package/dist/cjs/p-button_3.cjs.entry.js.map +1 -1
  18. package/dist/cjs/p-drawer-body_3.cjs.entry.js +1 -1
  19. package/dist/cjs/p-drawer-body_3.cjs.entry.js.map +1 -1
  20. package/dist/cjs/p-layout.cjs.entry.js +1 -1
  21. package/dist/cjs/p-layout.cjs.entry.js.map +1 -1
  22. package/dist/cjs/p-navbar.cjs.entry.js +1 -1
  23. package/dist/cjs/p-navbar.cjs.entry.js.map +1 -1
  24. package/dist/collection/components/atoms/backdrop/backdrop.component.css +1 -1
  25. package/dist/collection/components/atoms/divider/divider.component.css +1 -1
  26. package/dist/collection/components/atoms/drawer-container/drawer-container.component.css +1 -1
  27. package/dist/collection/components/atoms/dropdown-menu-container/dropdown-menu-container.component.css +1 -1
  28. package/dist/collection/components/atoms/helper/helper.component.css +1 -1
  29. package/dist/collection/components/atoms/icon/icon.component.css +1 -1
  30. package/dist/collection/components/atoms/layout/layout.component.css +1 -1
  31. package/dist/collection/components/atoms/loader/loader.component.css +1 -1
  32. package/dist/collection/components/atoms/modal-body/modal-body.component.css +1 -1
  33. package/dist/collection/components/atoms/modal-container/modal-container.component.css +1 -1
  34. package/dist/collection/components/atoms/modal-footer/modal-footer.component.css +1 -1
  35. package/dist/collection/components/atoms/modal-header/modal-header.component.css +1 -1
  36. package/dist/collection/components/molecules/calendar/calendar.component.css +1 -1
  37. package/dist/collection/components/molecules/datepicker/datepicker.component.css +1 -1
  38. package/dist/collection/components/molecules/dropdown/dropdown.component.css +1 -1
  39. package/dist/collection/components/molecules/input-group/input-group.component.css +1 -1
  40. package/dist/collection/components/organisms/navbar/navbar.component.css +1 -1
  41. package/dist/collection/tailwind/plugins/safe-area.js +100 -0
  42. package/dist/collection/tailwind/width.js +0 -3
  43. package/dist/collection/tailwind.config.js +1 -0
  44. package/dist/components/backdrop.component.js +1 -1
  45. package/dist/components/backdrop.component.js.map +1 -1
  46. package/dist/components/drawer-container.component.js +1 -1
  47. package/dist/components/drawer-container.component.js.map +1 -1
  48. package/dist/components/loader.component.js +1 -1
  49. package/dist/components/loader.component.js.map +1 -1
  50. package/dist/components/p-layout.js +1 -1
  51. package/dist/components/p-layout.js.map +1 -1
  52. package/dist/components/p-navbar.js +1 -1
  53. package/dist/components/p-navbar.js.map +1 -1
  54. package/dist/esm/p-backdrop.entry.js +1 -1
  55. package/dist/esm/p-backdrop.entry.js.map +1 -1
  56. package/dist/esm/p-button_3.entry.js +1 -1
  57. package/dist/esm/p-button_3.entry.js.map +1 -1
  58. package/dist/esm/p-drawer-body_3.entry.js +1 -1
  59. package/dist/esm/p-drawer-body_3.entry.js.map +1 -1
  60. package/dist/esm/p-layout.entry.js +1 -1
  61. package/dist/esm/p-layout.entry.js.map +1 -1
  62. package/dist/esm/p-navbar.entry.js +1 -1
  63. package/dist/esm/p-navbar.entry.js.map +1 -1
  64. package/dist/index.html +1 -1
  65. package/dist/paperless/{p-0a4bbe7e.entry.js → p-24182b62.entry.js} +2 -2
  66. package/dist/paperless/p-24182b62.entry.js.map +1 -0
  67. package/dist/{build/p-106f2976.entry.js → paperless/p-2b08e371.entry.js} +2 -2
  68. package/dist/paperless/p-2b08e371.entry.js.map +1 -0
  69. package/dist/paperless/p-4e66f19d.entry.js +2 -0
  70. package/dist/paperless/{p-d07afedd.entry.js.map → p-4e66f19d.entry.js.map} +1 -1
  71. package/dist/paperless/{p-2263ddec.entry.js → p-5f2e2380.entry.js} +2 -2
  72. package/dist/paperless/{p-2263ddec.entry.js.map → p-5f2e2380.entry.js.map} +1 -1
  73. package/dist/paperless/p-f8c3fff9.entry.js +2 -0
  74. package/dist/paperless/p-f8c3fff9.entry.js.map +1 -0
  75. package/dist/paperless/paperless.css +2 -1
  76. package/dist/paperless/paperless.esm.js +1 -1
  77. package/dist/style/_reset.scss +1 -2
  78. package/dist/sw.js +1 -1
  79. package/dist/sw.js.map +1 -1
  80. package/dist/tailwind/plugins/safe-area.js +100 -0
  81. package/dist/tailwind/width.js +0 -3
  82. package/dist/tailwind.config.js +1 -0
  83. package/hydrate/index.js +13 -13
  84. package/package.json +1 -1
  85. package/dist/build/p-0a4bbe7e.entry.js.map +0 -1
  86. package/dist/build/p-106f2976.entry.js.map +0 -1
  87. package/dist/build/p-84d7332c.entry.js +0 -2
  88. package/dist/build/p-84d7332c.entry.js.map +0 -1
  89. package/dist/build/p-d07afedd.entry.js +0 -2
  90. package/dist/paperless/p-0a4bbe7e.entry.js.map +0 -1
  91. package/dist/paperless/p-106f2976.entry.js.map +0 -1
  92. package/dist/paperless/p-84d7332c.entry.js +0 -2
  93. package/dist/paperless/p-84d7332c.entry.js.map +0 -1
  94. package/dist/paperless/p-d07afedd.entry.js +0 -2
package/dist/collection/components/organisms/navbar/navbar.component.css CHANGED
@@ -1 +1 @@
1
- .fixed{position:fixed!important}.left-0{left:0!important}.top-0{top:0!important}.block{display:block!important}.flex{display:flex!important}.hidden{display:none!important}.h-screen{height:100vh!important}.w-60{width:15rem!important}.w-full{width:100%!important}.-translate-x-full{--tw-translate-x:-100%!important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.transform-gpu{transform:translate3d(var(--tw-translate-x),var(--tw-translate-y),0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.justify-between{justify-content:space-between!important}.border-0{border-width:0!important}.border-b{border-bottom-width:1px!important}.border-r{border-right-width:1px!important}.border-solid{border-style:solid!important}.border-mystic-dark{--tw-border-opacity:1!important;border-color:rgb(218 230 240/var(--tw-border-opacity))!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.px-4{padding-left:1rem!important;padding-right:1rem!important}.py-2{padding-bottom:.5rem!important;padding-top:.5rem!important}*{box-sizing:border-box}:host{width:100%}@media (min-width:64rem){:host{width:15rem}}:host .sidebar,:host .sidebar .company,:host .sidebar .content,:host .sidebar .user,:host .userbar{display:flex;flex-direction:column;width:100%}:host .sidebar,:host .top-bar{--tw-bg-opacity:1;--tw-border-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(218 230 240/var(--tw-border-opacity))!important;border-style:solid!important;border-width:0!important}:host .sidebar{--tw-bg-opacity:1;--tw-translate-x:-100%;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-right-width:1px!important;height:100vh;left:0;padding:calc(env(safe-area-inset-top, 0) + 1rem) 1rem 1rem;position:fixed;top:0;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transform:translate3d(var(--tw-translate-x),var(--tw-translate-y),0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:15rem;will-change:transform;z-index:300}@media (min-width:64rem){:host .sidebar{--tw-translate-x:0px;height:100%;position:relative;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));width:100%}}:host .sidebar .header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1.5rem;width:100%}@media (min-width:64rem){:host .sidebar .header{display:none}}:host .sidebar .content{margin-top:1.5rem}:host .sidebar .user{display:none;margin-top:auto}@media (min-width:64rem){:host .sidebar .user{display:flex}}:host .sidebar.show{--tw-translate-x:env(safe-area-inset-left,0)}:host .top-bar{border-bottom-width:1px!important;display:flex;height:calc(env(safe-area-inset-top, 0) + 3rem);justify-content:space-between;padding:calc(env(safe-area-inset-top, 0) + .5rem) 1rem .5rem;width:100%}@media (min-width:64rem){:host .top-bar{display:none}}:host p-backdrop{display:none}:host p-backdrop.show{display:block}@media (min-width:64rem){.desktop-xs\:relative{position:relative!important}.desktop-xs\:flex{display:flex!important}.desktop-xs\:hidden{display:none!important}.desktop-xs\:h-full{height:100%!important}}.static{position:static!important}.z-navbar-backdrop{z-index:290!important}.m-0{margin:0!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.font-semibold{font-weight:600!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.inline{display:inline!important}.justify-center{justify-content:center!important}
1
+ .fixed{position:fixed!important}.left-0{left:0!important}.top-0{top:0!important}.z-navbar{z-index:300!important}.mb-6{margin-bottom:1.5rem!important}.mt-auto{margin-top:auto!important}.block{display:block!important}.flex{display:flex!important}.hidden{display:none!important}.h-screen{height:100vh!important}.w-60{width:15rem!important}.w-full{width:100%!important}.-translate-x-full{--tw-translate-x:-100%!important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.transform-gpu{transform:translate3d(var(--tw-translate-x),var(--tw-translate-y),0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.items-center{align-items:center!important}.justify-between{justify-content:space-between!important}.border-0{border-width:0!important}.border-b{border-bottom-width:1px!important}.border-r{border-right-width:1px!important}.border-solid{border-style:solid!important}.border-mystic-dark{--tw-border-opacity:1!important;border-color:rgb(218 230 240/var(--tw-border-opacity))!important}.px-4{padding-left:1rem!important;padding-right:1rem!important}*{box-sizing:border-box}:host{width:100%}@media (min-width:64rem){:host{width:15rem}}:host .sidebar,:host .sidebar .company,:host .sidebar .content,:host .sidebar .user,:host .userbar{display:flex;flex-direction:column;width:100%}:host .sidebar,:host .top-bar{--tw-bg-opacity:1;--tw-border-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(218 230 240/var(--tw-border-opacity))!important;border-style:solid!important;border-width:0!important}:host .sidebar{--tw-bg-opacity:1;--tw-translate-x:-100%;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-right-width:1px!important;height:100vh;left:0;padding:calc(env(safe-area-inset-top, 0) + 1rem) 1rem 1rem;position:fixed;top:0;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transform:translate3d(var(--tw-translate-x),var(--tw-translate-y),0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:15rem;will-change:transform;z-index:300}@media (min-width:64rem){:host .sidebar{--tw-translate-x:0px;height:100%;position:relative;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));width:100%}}:host .sidebar .header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1.5rem;width:100%}@media (min-width:64rem){:host .sidebar .header{display:none}}:host .sidebar .content{margin-top:1.5rem}:host .sidebar .user{display:none;margin-top:auto}@media (min-width:64rem){:host .sidebar .user{display:flex}}:host .sidebar.show{--tw-translate-x:env(safe-area-inset-left,0)}:host .top-bar{border-bottom-width:1px!important;display:flex;height:calc(env(safe-area-inset-top, 0) + 3rem);justify-content:space-between;padding:calc(env(safe-area-inset-top, 0) + .5rem) 1rem .5rem;width:100%}@media (min-width:64rem){:host .top-bar{display:none}}:host p-backdrop{display:none}:host p-backdrop.show{display:block}@media (min-width:64rem){.desktop-xs\:relative{position:relative!important}.desktop-xs\:flex{display:flex!important}.desktop-xs\:hidden{display:none!important}.desktop-xs\:h-full{height:100%!important}}.static{position:static!important}.z-navbar-backdrop{z-index:290!important}.m-0{margin:0!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.font-semibold{font-weight:600!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.inline{display:inline!important}.justify-center{justify-content:center!important}
package/dist/collection/tailwind/plugins/safe-area.js ADDED
@@ -0,0 +1,100 @@
1
+ // eslint-disable-next-line unicorn/prefer-module
2
+ const plugin = require('tailwindcss/plugin');
3
+
4
+ const safeArea = plugin(({ addUtilities }) => {
5
+ const utilities = {
6
+ '.m-safe': {
7
+ marginTop: 'env(safe-area-inset-top)',
8
+ marginRight: 'env(safe-area-inset-right)',
9
+ marginBottom: 'env(safe-area-inset-bottom)',
10
+ marginLeft: 'env(safe-area-inset-left)',
11
+ },
12
+ '.mx-safe': {
13
+ marginRight: 'env(safe-area-inset-right)',
14
+ marginLeft: 'env(safe-area-inset-left)',
15
+ },
16
+ '.my-safe': {
17
+ marginTop: 'env(safe-area-inset-top)',
18
+ marginBottom: 'env(safe-area-inset-bottom)',
19
+ },
20
+ '.mt-safe': {
21
+ marginTop: 'env(safe-area-inset-top)',
22
+ },
23
+ '.mr-safe': {
24
+ marginRight: 'env(safe-area-inset-right)',
25
+ },
26
+ '.mb-safe': {
27
+ marginBottom: 'env(safe-area-inset-bottom)',
28
+ },
29
+ '.ml-safe': {
30
+ marginLeft: 'env(safe-area-inset-left)',
31
+ },
32
+ '.p-safe': {
33
+ paddingTop: 'env(safe-area-inset-top)',
34
+ paddingRight: 'env(safe-area-inset-right)',
35
+ paddingBottom: 'env(safe-area-inset-bottom)',
36
+ paddingLeft: 'env(safe-area-inset-left)',
37
+ },
38
+ '.px-safe': {
39
+ paddingRight: 'env(safe-area-inset-right)',
40
+ paddingLeft: 'env(safe-area-inset-left)',
41
+ },
42
+ '.py-safe': {
43
+ paddingTop: 'env(safe-area-inset-top)',
44
+ paddingBottom: 'env(safe-area-inset-bottom)',
45
+ },
46
+ '.pt-safe': {
47
+ paddingTop: 'env(safe-area-inset-top)',
48
+ },
49
+ '.pr-safe': {
50
+ paddingRight: 'env(safe-area-inset-right)',
51
+ },
52
+ '.pb-safe': {
53
+ paddingBottom: 'env(safe-area-inset-bottom)',
54
+ },
55
+ '.pl-safe': {
56
+ paddingLeft: 'env(safe-area-inset-left)',
57
+ },
58
+ '.min-h-screen-safe': {
59
+ minHeight: [
60
+ 'calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)))',
61
+ '-webkit-fill-available',
62
+ ],
63
+ },
64
+ '.max-h-screen-safe': {
65
+ maxHeight: [
66
+ 'calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)))',
67
+ '-webkit-fill-available',
68
+ ],
69
+ },
70
+ '.h-screen-safe': {
71
+ height: [
72
+ 'calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)))',
73
+ '-webkit-fill-available',
74
+ ],
75
+ },
76
+ '.min-w-screen-safe': {
77
+ minWidth: [
78
+ 'calc(100vw - (env(safe-area-inset-left) + env(safe-area-inset-right)))',
79
+ '-webkit-fill-available',
80
+ ],
81
+ },
82
+ '.max-w-screen-safe': {
83
+ maxWidth: [
84
+ 'calc(100vw - (env(safe-area-inset-left) + env(safe-area-inset-right)))',
85
+ '-webkit-fill-available',
86
+ ],
87
+ },
88
+ '.w-screen-safe': {
89
+ width: [
90
+ 'calc(100vw - (env(safe-area-inset-left) + env(safe-area-inset-right)))',
91
+ '-webkit-fill-available',
92
+ ],
93
+ },
94
+ };
95
+
96
+ addUtilities(utilities);
97
+ });
98
+
99
+ // eslint-disable-next-line unicorn/prefer-module
100
+ module.exports = safeArea;
package/dist/collection/tailwind/width.js CHANGED
@@ -17,7 +17,4 @@ module.exports = {
17
17
  'sidebar-desktop-login': '100%',
18
18
  'content-desktop-login': '30rem',
19
19
  },
20
- maxWidth: {
21
- screen: '100vw',
22
- },
23
20
  };
package/dist/collection/tailwind.config.js CHANGED
@@ -37,5 +37,6 @@ module.exports = {
37
37
  plugins: [
38
38
  require('@tailwindcss/aspect-ratio'),
39
39
  require('tailwind-scrollbar-hide'),
40
+ require('./tailwind/plugins/safe-area'),
40
41
  ],
41
42
  };
package/dist/components/backdrop.component.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
2
2
 
3
- const backdropComponentCss = ".static{position:static!important}.fixed{position:fixed!important}.left-0{left:0!important}.top-0{top:0!important}.z-navbar-backdrop{z-index:290!important}.m-0{margin:0!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.inline{display:inline!important}.flex{display:flex!important}.hidden{display:none!important}.h-full{height:100%!important}.w-full{width:100%!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.animate-fade-in{animation:fadeIn .2s ease forwards!important}.items-start{align-items:flex-start!important}.items-end{align-items:flex-end!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.overflow-y-auto{overflow-y:auto!important}.rounded{border-radius:.25rem!important}.p-0{padding:0!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.font-semibold{font-weight:600!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}*{box-sizing:border-box}:host{animation:fadeIn .2s ease forwards;background-color:rgba(39,40,56,.5);display:flex;height:100%;left:0;max-height:calc(100vh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0));max-width:calc(100vw - env(safe-area-inset-left, 0) - env(safe-area-inset-right, 0));overflow:hidden;position:fixed;top:0;width:100%;z-index:490}:host .content-container{align-items:flex-end;display:flex;height:100%;justify-content:center;max-height:calc(100vh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0));max-width:calc(100vw - env(safe-area-inset-left, 0) - env(safe-area-inset-right, 0));overflow-x:hidden;overflow-y:auto;width:100%}@media (min-width:40rem){:host .content-container{padding-left:4rem;padding-right:4rem}}@media (min-width:64rem){:host .content-container{align-items:center;padding:4rem}}:host(.blurred){--tw-backdrop-blur:blur(2px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}:host(.closing){animation:fadeOut .2s ease forwards}:host(.closing) .content-container{overflow:hidden}:host(.variant-drawer) .content-container{align-items:flex-start;justify-content:flex-end;padding:0}@media (min-width:40rem){:host(.variant-drawer) .content-container{padding:0}}@media (min-width:64rem){:host(.variant-drawer) .content-container{padding:0}}@media (min-width:40rem){.tablet\\:p-0{padding:0!important}.tablet\\:px-16{padding-left:4rem!important;padding-right:4rem!important}}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}@media (min-width:40rem){.tablet\\:w-80{width:20rem!important}.tablet\\:w-\\[33\\.5rem\\]{width:33.5rem!important}.tablet\\:w-\\[38rem\\]{width:38rem!important}.tablet\\:w-\\[47\\.5rem\\]{width:47.5rem!important}.tablet\\:w-\\[57\\.5rem\\]{width:57.5rem!important}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}.desktop-xs\\:hidden{display:none!important}}";
3
+ const backdropComponentCss = ".static{position:static!important}.fixed{position:fixed!important}.left-0{left:0!important}.top-0{top:0!important}.z-navbar-backdrop{z-index:290!important}.m-0{margin:0!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.inline{display:inline!important}.flex{display:flex!important}.hidden{display:none!important}.h-full{height:100%!important}.w-full{width:100%!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.animate-fade-in{animation:fadeIn .2s ease forwards!important}.items-start{align-items:flex-start!important}.items-end{align-items:flex-end!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.overflow-y-auto{overflow-y:auto!important}.rounded{border-radius:.25rem!important}.p-0{padding:0!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.font-semibold{font-weight:600!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}.max-h-screen-safe{max-height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;max-height:-webkit-fill-available!important}*{box-sizing:border-box}:host{animation:fadeIn .2s ease forwards;background-color:rgba(39,40,56,.5);display:flex;height:100%;left:0;max-height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-height:-webkit-fill-available;max-width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));max-width:-webkit-fill-available;overflow:hidden;position:fixed;top:0;width:100%;z-index:490}:host .content-container{align-items:flex-end;display:flex;height:100%;justify-content:center;max-height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-height:-webkit-fill-available;max-width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));max-width:-webkit-fill-available;overflow-x:hidden;overflow-y:auto;width:100%}@media (min-width:40rem){:host .content-container{padding-left:4rem;padding-right:4rem}}@media (min-width:64rem){:host .content-container{align-items:center;padding:4rem}}:host(.blurred){--tw-backdrop-blur:blur(2px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}:host(.closing){animation:fadeOut .2s ease forwards}:host(.closing) .content-container{overflow:hidden}:host(.variant-drawer) .content-container{align-items:flex-start;justify-content:flex-end;padding:0}@media (min-width:40rem){:host(.variant-drawer) .content-container{padding:0}}@media (min-width:64rem){:host(.variant-drawer) .content-container{padding:0}}@media (min-width:40rem){.tablet\\:p-0{padding:0!important}.tablet\\:px-16{padding-left:4rem!important;padding-right:4rem!important}}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}@media (min-width:40rem){.tablet\\:w-80{width:20rem!important}.tablet\\:w-\\[33\\.5rem\\]{width:33.5rem!important}.tablet\\:w-\\[38rem\\]{width:38rem!important}.tablet\\:w-\\[47\\.5rem\\]{width:47.5rem!important}.tablet\\:w-\\[57\\.5rem\\]{width:57.5rem!important}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}.desktop-xs\\:hidden{display:none!important}}";
4
4
 
5
5
  const Backdrop = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
6
6
  constructor() {
package/dist/components/backdrop.component.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"backdrop.component.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,yjPAAyjP;;MCgBzkP,QAAQ;;;;;;mBAIqB,OAAO;qBAKhB,KAAK;mBAKP,KAAK;sBAKF,IAAI;;EAYlC,iBAAiB;IACb,IAAI,IAAI,CAAC,UAAU,EAAE;MACjB,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;KAChE;GACJ;EAED,oBAAoB;IAChB,IAAI,IAAI,CAAC,UAAU,EAAE;MACjB,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;KACnE;GACJ;EAED,MAAM;IACF,QACI,EAAC,IAAI,IACD,KAAK,EAAE,sBAAsB,IAAI,CAAC,OAAO,IACrC,IAAI,CAAC,SAAS,IAAI,SACtB,IAAI,IAAI,CAAC,OAAO,IAAI,SAAS,EAAE,IAE/B,WAAK,KAAK,EAAC,mBAAmB,IAC1B,eAAQ,CACN,CACH,EACT;GACL;EAGD,WAAW,CAAC,EAAc;IACtB,IAAI,EAAE,CAAC,MAAM,KAAK,IAAI,CAAC,GAAG,EAAE;MACxB,OAAO;KACV;IAED,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;GACzB;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/atoms/backdrop/backdrop.component.scss?tag=p-backdrop&encapsulation=shadow","./src/components/atoms/backdrop/backdrop.component.tsx"],"sourcesContent":[":host {\n @apply flex;\n @apply fixed top-0 left-0 z-backdrop;\n @apply h-full w-full;\n @apply overflow-hidden;\n @apply animate-fade-in bg-storm-dark/50;\n\n max-height: calc(\n 100vh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0)\n );\n max-width: calc(\n 100vw - env(safe-area-inset-left, 0) - env(safe-area-inset-right, 0)\n );\n\n .content-container {\n @apply h-full w-full overflow-y-auto overflow-x-hidden;\n @apply tablet:px-16 desktop-xs:p-16;\n @apply flex items-end justify-center desktop-xs:items-center;\n\n max-height: calc(\n 100vh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0)\n );\n max-width: calc(\n 100vw - env(safe-area-inset-left, 0) - env(safe-area-inset-right, 0)\n );\n }\n}\n\n:host(.blurred) {\n @apply backdrop-blur-xs;\n}\n\n:host(.closing) {\n @apply animate-fade-out;\n\n .content-container {\n @apply overflow-hidden;\n }\n}\n\n:host(.variant-drawer) {\n .content-container {\n @apply items-start justify-end;\n @apply p-0 tablet:p-0 desktop-xs:p-0;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n} from '@stencil/core';\n\n@Component({\n tag: 'p-backdrop',\n styleUrl: 'backdrop.component.scss',\n shadow: true,\n})\nexport class Backdrop {\n /**\n * The variant of the backdrop\n */\n @Prop() variant: 'modal' | 'drawer' = 'modal';\n\n /**\n * Wether to apply blur on the background of the backdrop\n */\n @Prop() applyBlur: boolean = false;\n\n /**\n * Wether the backdrop is closing\n */\n @Prop() closing: boolean = false;\n\n /**\n * Wether we should scroll lock the body\n */\n @Prop() scrollLock: boolean = true;\n\n /**\n * When the backdrop is clicked\n */\n @Event() clicked: EventEmitter<MouseEvent>;\n\n /**\n * The host element\n */\n @Element() private _el: HTMLElement;\n\n componentWillLoad() {\n if (this.scrollLock) {\n document.querySelector(':root').classList.add('scroll-lock');\n }\n }\n\n disconnectedCallback() {\n if (this.scrollLock) {\n document.querySelector(':root').classList.remove('scroll-lock');\n }\n }\n\n render() {\n return (\n <Host\n class={`p-backdrop variant-${this.variant} ${\n this.applyBlur && 'blurred'\n } ${this.closing && 'closing'}`}\n >\n <div class=\"content-container\">\n <slot />\n </div>\n </Host>\n );\n }\n\n @Listen('click', { capture: true })\n handleClick(ev: MouseEvent) {\n if (ev.target !== this._el) {\n return;\n }\n\n this.clicked.emit(ev);\n }\n}\n"],"version":3}
1
+ {"file":"backdrop.component.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,g0PAAg0P;;MCgBh1P,QAAQ;;;;;;mBAIqB,OAAO;qBAKhB,KAAK;mBAKP,KAAK;sBAKF,IAAI;;EAYlC,iBAAiB;IACb,IAAI,IAAI,CAAC,UAAU,EAAE;MACjB,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;KAChE;GACJ;EAED,oBAAoB;IAChB,IAAI,IAAI,CAAC,UAAU,EAAE;MACjB,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;KACnE;GACJ;EAED,MAAM;IACF,QACI,EAAC,IAAI,IACD,KAAK,EAAE,sBAAsB,IAAI,CAAC,OAAO,IACrC,IAAI,CAAC,SAAS,IAAI,SACtB,IAAI,IAAI,CAAC,OAAO,IAAI,SAAS,EAAE,IAE/B,WAAK,KAAK,EAAC,mBAAmB,IAC1B,eAAQ,CACN,CACH,EACT;GACL;EAGD,WAAW,CAAC,EAAc;IACtB,IAAI,EAAE,CAAC,MAAM,KAAK,IAAI,CAAC,GAAG,EAAE;MACxB,OAAO;KACV;IAED,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;GACzB;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/atoms/backdrop/backdrop.component.scss?tag=p-backdrop&encapsulation=shadow","./src/components/atoms/backdrop/backdrop.component.tsx"],"sourcesContent":[":host {\n @apply flex;\n @apply fixed top-0 left-0 z-backdrop;\n @apply h-full w-full;\n @apply overflow-hidden;\n @apply animate-fade-in bg-storm-dark/50;\n @apply max-h-screen-safe max-w-screen-safe;\n\n .content-container {\n @apply h-full w-full overflow-y-auto overflow-x-hidden;\n @apply tablet:px-16 desktop-xs:p-16;\n @apply flex items-end justify-center desktop-xs:items-center;\n @apply max-h-screen-safe max-w-screen-safe;\n }\n}\n\n:host(.blurred) {\n @apply backdrop-blur-xs;\n}\n\n:host(.closing) {\n @apply animate-fade-out;\n\n .content-container {\n @apply overflow-hidden;\n }\n}\n\n:host(.variant-drawer) {\n .content-container {\n @apply items-start justify-end;\n @apply p-0 tablet:p-0 desktop-xs:p-0;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n} from '@stencil/core';\n\n@Component({\n tag: 'p-backdrop',\n styleUrl: 'backdrop.component.scss',\n shadow: true,\n})\nexport class Backdrop {\n /**\n * The variant of the backdrop\n */\n @Prop() variant: 'modal' | 'drawer' = 'modal';\n\n /**\n * Wether to apply blur on the background of the backdrop\n */\n @Prop() applyBlur: boolean = false;\n\n /**\n * Wether the backdrop is closing\n */\n @Prop() closing: boolean = false;\n\n /**\n * Wether we should scroll lock the body\n */\n @Prop() scrollLock: boolean = true;\n\n /**\n * When the backdrop is clicked\n */\n @Event() clicked: EventEmitter<MouseEvent>;\n\n /**\n * The host element\n */\n @Element() private _el: HTMLElement;\n\n componentWillLoad() {\n if (this.scrollLock) {\n document.querySelector(':root').classList.add('scroll-lock');\n }\n }\n\n disconnectedCallback() {\n if (this.scrollLock) {\n document.querySelector(':root').classList.remove('scroll-lock');\n }\n }\n\n render() {\n return (\n <Host\n class={`p-backdrop variant-${this.variant} ${\n this.applyBlur && 'blurred'\n } ${this.closing && 'closing'}`}\n >\n <div class=\"content-container\">\n <slot />\n </div>\n </Host>\n );\n }\n\n @Listen('click', { capture: true })\n handleClick(ev: MouseEvent) {\n if (ev.target !== this._el) {\n return;\n }\n\n this.clicked.emit(ev);\n }\n}\n"],"version":3}
package/dist/components/drawer-container.component.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
2
2
 
3
- const drawerContainerComponentCss = ".static{position:static!important}.z-drawer{z-index:500!important}.inline{display:inline!important}.flex{display:flex!important}.w-full{width:100%!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.justify-center{justify-content:center!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.shadow-4{--tw-shadow:0px 0.3125rem 1rem rgba(0,24,98,.08),0px 0.0625rem 0.1875rem rgba(0,24,98,.13)!important;--tw-shadow-colored:0px 0.3125rem 1rem var(--tw-shadow-color),0px 0.0625rem 0.1875rem var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}*{box-sizing:border-box}p-drawer-container{--tw-bg-opacity:1;--tw-shadow:0px 0.3125rem 1rem rgba(0,24,98,.08),0px 0.0625rem 0.1875rem rgba(0,24,98,.13)!important;--tw-shadow-colored:0px 0.3125rem 1rem var(--tw-shadow-color),0px 0.0625rem 0.1875rem var(--tw-shadow-color)!important;animation:slideInRight .5s ease forwards;background-color:rgb(255 255 255/var(--tw-bg-opacity));box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important;display:flex;flex-direction:column;min-height:calc(100vh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0));width:100%;z-index:500}@media (min-width:40rem){p-drawer-container{width:22.5rem}}@keyframes slideInRight{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slideOutRight{0%{transform:translateX(0)}to{transform:translateX(100%)}}p-drawer-container.closing{animation:slideOutRight .2s ease forwards}@media (min-width:40rem){.tablet\\:w-\\[22\\.5rem\\]{width:22.5rem!important}}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}";
3
+ const drawerContainerComponentCss = ".static{position:static!important}.z-drawer{z-index:500!important}.inline{display:inline!important}.flex{display:flex!important}.w-full{width:100%!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.justify-center{justify-content:center!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.shadow-4{--tw-shadow:0px 0.3125rem 1rem rgba(0,24,98,.08),0px 0.0625rem 0.1875rem rgba(0,24,98,.13)!important;--tw-shadow-colored:0px 0.3125rem 1rem var(--tw-shadow-color),0px 0.0625rem 0.1875rem var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}*{box-sizing:border-box}p-drawer-container{--tw-bg-opacity:1;--tw-shadow:0px 0.3125rem 1rem rgba(0,24,98,.08),0px 0.0625rem 0.1875rem rgba(0,24,98,.13)!important;--tw-shadow-colored:0px 0.3125rem 1rem var(--tw-shadow-color),0px 0.0625rem 0.1875rem var(--tw-shadow-color)!important;animation:slideInRight .5s ease forwards;background-color:rgb(255 255 255/var(--tw-bg-opacity));box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important;display:flex;flex-direction:column;min-height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:-webkit-fill-available;width:100%;z-index:500}@media (min-width:40rem){p-drawer-container{width:22.5rem}}@keyframes slideInRight{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slideOutRight{0%{transform:translateX(0)}to{transform:translateX(100%)}}p-drawer-container.closing{animation:slideOutRight .2s ease forwards}@media (min-width:40rem){.tablet\\:w-\\[22\\.5rem\\]{width:22.5rem!important}}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}";
4
4
 
5
5
  const ModalContainer = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
6
6
  constructor() {
package/dist/components/drawer-container.component.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"drawer-container.component.js","mappings":";;AAAA,MAAM,2BAA2B,GAAG,2zLAA2zL;;MCYl1L,cAAc;;;;mBAII,KAAK;;EAEhC,MAAM;IACF,QACI,EAAC,IAAI,IAAC,KAAK,EAAE,sBAAsB,IAAI,CAAC,OAAO,IAAI,SAAS,EAAE,IAC1D,eAAQ,CACL,EACT;GACL;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/atoms/drawer-container/drawer-container.component.scss?tag=p-drawer-container","./src/components/atoms/drawer-container/drawer-container.component.tsx"],"sourcesContent":["p-drawer-container {\n @apply z-drawer flex flex-col;\n // tablet:w-[22.5rem]\n @apply w-full tablet:w-[22.5rem];\n @apply bg-white;\n @apply animate-slide-in-right;\n\n min-height: calc(\n 100vh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0)\n );\n\n @apply shadow-4 #{!important};\n\n &.closing {\n @apply animate-slide-out-right;\n }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n// $drawer-xs: 20rem;\n// $drawer-sm: 33.5rem;\n// $drawer-md: 38rem;\n// $drawer-lg: 47.5rem;\n// $drawer-xl: 57.5rem;\n\n@Component({\n tag: 'p-drawer-container',\n styleUrl: 'drawer-container.component.scss',\n})\nexport class ModalContainer {\n /**\n * Wether the container is closing\n */\n @Prop() closing: boolean = false;\n\n render() {\n return (\n <Host class={`p-drawer-container ${this.closing && 'closing'}`}>\n <slot />\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"drawer-container.component.js","mappings":";;AAAA,MAAM,2BAA2B,GAAG,u1LAAu1L;;MCY92L,cAAc;;;;mBAII,KAAK;;EAEhC,MAAM;IACF,QACI,EAAC,IAAI,IAAC,KAAK,EAAE,sBAAsB,IAAI,CAAC,OAAO,IAAI,SAAS,EAAE,IAC1D,eAAQ,CACL,EACT;GACL;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/atoms/drawer-container/drawer-container.component.scss?tag=p-drawer-container","./src/components/atoms/drawer-container/drawer-container.component.tsx"],"sourcesContent":["p-drawer-container {\n @apply z-drawer flex flex-col;\n // tablet:w-[22.5rem]\n @apply w-full tablet:w-[22.5rem];\n @apply bg-white;\n @apply animate-slide-in-right;\n @apply min-h-screen-safe;\n\n @apply shadow-4 #{!important};\n\n &.closing {\n @apply animate-slide-out-right;\n }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n// $drawer-xs: 20rem;\n// $drawer-sm: 33.5rem;\n// $drawer-md: 38rem;\n// $drawer-lg: 47.5rem;\n// $drawer-xl: 57.5rem;\n\n@Component({\n tag: 'p-drawer-container',\n styleUrl: 'drawer-container.component.scss',\n})\nexport class ModalContainer {\n /**\n * Wether the container is closing\n */\n @Prop() closing: boolean = false;\n\n render() {\n return (\n <Host class={`p-drawer-container ${this.closing && 'closing'}`}>\n <slot />\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/components/loader.component.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
2
2
 
3
- const loaderComponentCss = ".visible{visibility:visible!important}.static{position:static!important}.fixed{position:fixed!important}.absolute{position:absolute!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.top-0{top:0!important}.z-navbar-backdrop{z-index:290!important}.m-0{margin:0!important}.mb-14{margin-bottom:3.5rem!important}.mb-6{margin-bottom:1.5rem!important}.ml-1{margin-left:.25rem!important}.ml-2{margin-left:.5rem!important}.mt-0{margin-top:0!important}.block{display:block!important}.inline-block{display:inline-block!important}.inline{display:inline!important}.flex{display:flex!important}.table{display:table!important}.table-cell{display:table-cell!important}.table-row{display:table-row!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.w-1{width:.25rem!important}.w-10{width:2.5rem!important}.w-11{width:2.75rem!important}.w-2{width:.5rem!important}.w-3{width:.75rem!important}.w-4{width:1rem!important}.w-5{width:1.25rem!important}.w-6{width:1.5rem!important}.w-7{width:1.75rem!important}.w-8{width:2rem!important}.w-9{width:2.25rem!important}.w-auto{width:auto!important}.w-full{width:100%!important}.w-screen{width:100vw!important}.min-w-0{min-width:0!important}.flex-1{flex:1 1 0%!important}.flex-shrink-0{flex-shrink:0!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.items-start{align-items:flex-start!important}.items-end{align-items:flex-end!important}.items-center{align-items:center!important}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.justify-center{justify-content:center!important}.justify-between{justify-content:space-between!important}.gap-2{gap:.5rem!important}.gap-4{gap:1rem!important}.self-center{align-self:center!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.whitespace-nowrap{white-space:nowrap!important}.rounded{border-radius:.25rem!important}.rounded-large{border-radius:.375rem!important}.rounded-bl-none{border-bottom-left-radius:0!important}.rounded-br-none{border-bottom-right-radius:0!important}.rounded-tl-none{border-top-left-radius:0!important}.rounded-tr-none{border-top-right-radius:0!important}.border{border-width:1px!important}.border-2{border-width:2px!important}.border-l-0{border-left-width:0!important}.border-r-0{border-right-width:0!important}.border-solid{border-style:solid!important}.border-indigo-light{--tw-border-opacity:1!important;border-color:rgb(241 246 255/var(--tw-border-opacity))!important}.border-storm-light{--tw-border-opacity:1!important;border-color:rgb(176 178 203/var(--tw-border-opacity))!important}.border-transparent{border-color:transparent!important}.border-t-mystic-dark{border-top-color:rgb(218 230 240/var(--tw-border-opacity))!important}.border-t-mystic-dark,.border-t-storm{--tw-border-opacity:1!important}.border-t-storm{border-top-color:rgb(81 83 107/var(--tw-border-opacity))!important}.border-t-white{--tw-border-opacity:1!important;border-top-color:rgb(255 255 255/var(--tw-border-opacity))!important}.bg-mystic{background-color:rgb(247 250 252/var(--tw-bg-opacity))!important}.bg-mystic,.bg-white{--tw-bg-opacity:1!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.p-4{padding:1rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-24{padding-bottom:6rem!important;padding-top:6rem!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.text-center{text-align:center!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.font-semibold{font-weight:600!important}.text-negative{color:rgb(185 30 40/var(--tw-text-opacity))!important}.text-negative,.text-negative-light{--tw-text-opacity:1!important}.text-negative-light{color:rgb(255 204 211/var(--tw-text-opacity))!important}.text-storm{color:rgb(81 83 107/var(--tw-text-opacity))!important}.text-storm,.text-storm-dark{--tw-text-opacity:1!important}.text-storm-dark{color:rgb(39 40 56/var(--tw-text-opacity))!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!important}.blur{--tw-blur:blur(8px)!important}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)!important}*{box-sizing:border-box}.h-\\[1em\\]{height:1em!important}.w-\\[1em\\]{width:1em!important}.border-indigo-light\\/40{border-color:rgba(241,246,255,.4)!important}.border-storm-light\\/40{border-color:rgba(176,178,203,.4)!important}:host .loader{--tw-border-opacity:1;animation:spin .5s linear infinite;border-color:rgb(241 246 255/var(--tw-border-opacity));border-radius:100%;border-style:solid;border-width:medium 2px 2px;border-top:2px solid rgb(82 138 250/var(--tw-border-opacity));display:inline-block;height:1em;width:1em;will-change:transform}:host .loader.color-storm{--tw-border-opacity:1!important;border-color:rgba(176,178,203,.4)!important;border-top-color:rgb(81 83 107/var(--tw-border-opacity))!important}:host .loader.color-white{--tw-border-opacity:1!important;border-color:rgba(241,246,255,.4)!important;border-top-color:rgb(255 255 255/var(--tw-border-opacity))!important}:host .loading-screen{--tw-bg-opacity:1;align-items:center;background-color:rgb(247 250 252/var(--tw-bg-opacity));display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100vw;z-index:1001}:host .loading-screen .content{max-width:20rem}:host .loading-screen .content .loader-wrapper{display:flex;justify-content:center;width:100%}:host .loading-screen .content .loader-wrapper .loader{font-size:2.25rem;line-height:2.5rem}:host(.variant-ghost){--loading-bg:#f7fafc;--loading-stripe:#fcfdfe;animation:loading 1s ease-in-out infinite;background-color:var(--loading-bg);background:linear-gradient(100deg,hsla(0,0%,100%,0) 40%,var(--loading-stripe) 50%,hsla(0,0%,100%,0) 60%) var(--loading-bg);background-position-x:180%;background-size:200% 100%;box-sizing:border-box;display:block;min-height:1em;min-width:1em;will-change:background,background-position-x,background-color}@keyframes loading{to{background-position-x:-20%}}@keyframes spin{to{transform:rotate(1turn)}}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.hover\\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}@media (min-width:40rem){.tablet\\:w-80{width:20rem!important}.tablet\\:w-\\[33\\.5rem\\]{width:33.5rem!important}.tablet\\:w-\\[38rem\\]{width:38rem!important}.tablet\\:w-\\[47\\.5rem\\]{width:47.5rem!important}.tablet\\:w-\\[57\\.5rem\\]{width:57.5rem!important}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}.desktop-xs\\:hidden{display:none!important}}.max-w-\\[20rem\\]{max-width:20rem!important}.w-1\\/12{width:8.333333%!important}.w-10\\/12{width:83.333333%!important}.w-11\\/12{width:91.666667%!important}.w-2\\/12{width:16.666667%!important}.w-3\\/12{width:25%!important}.w-4\\/12{width:33.333333%!important}.w-5\\/12{width:41.666667%!important}.w-6\\/12{width:50%!important}.w-7\\/12{width:58.333333%!important}.w-8\\/12{width:66.666667%!important}.w-9\\/12{width:75%!important}@media (min-width:40rem){.tablet\\:w-1\\/12{width:8.333333%!important}.tablet\\:w-10\\/12{width:83.333333%!important}.tablet\\:w-11\\/12{width:91.666667%!important}.tablet\\:w-2\\/12{width:16.666667%!important}.tablet\\:w-3\\/12{width:25%!important}.tablet\\:w-4\\/12{width:33.333333%!important}.tablet\\:w-5\\/12{width:41.666667%!important}.tablet\\:w-6\\/12{width:50%!important}.tablet\\:w-7\\/12{width:58.333333%!important}.tablet\\:w-8\\/12{width:66.666667%!important}.tablet\\:w-9\\/12{width:75%!important}}@media (min-width:64rem){.desktop-xs\\:w-1\\/12{width:8.333333%!important}.desktop-xs\\:w-10\\/12{width:83.333333%!important}.desktop-xs\\:w-11\\/12{width:91.666667%!important}.desktop-xs\\:w-2\\/12{width:16.666667%!important}.desktop-xs\\:w-3\\/12{width:25%!important}.desktop-xs\\:w-4\\/12{width:33.333333%!important}.desktop-xs\\:w-5\\/12{width:41.666667%!important}.desktop-xs\\:w-6\\/12{width:50%!important}.desktop-xs\\:w-7\\/12{width:58.333333%!important}.desktop-xs\\:w-8\\/12{width:66.666667%!important}.desktop-xs\\:w-9\\/12{width:75%!important}}@media (min-width:80rem){.desktop-sm\\:w-1\\/12{width:8.333333%!important}.desktop-sm\\:w-10\\/12{width:83.333333%!important}.desktop-sm\\:w-11\\/12{width:91.666667%!important}.desktop-sm\\:w-2\\/12{width:16.666667%!important}.desktop-sm\\:w-3\\/12{width:25%!important}.desktop-sm\\:w-4\\/12{width:33.333333%!important}.desktop-sm\\:w-5\\/12{width:41.666667%!important}.desktop-sm\\:w-6\\/12{width:50%!important}.desktop-sm\\:w-7\\/12{width:58.333333%!important}.desktop-sm\\:w-8\\/12{width:66.666667%!important}.desktop-sm\\:w-9\\/12{width:75%!important}}@media (min-width:85.375rem){.desktop\\:w-1\\/12{width:8.333333%!important}.desktop\\:w-10\\/12{width:83.333333%!important}.desktop\\:w-11\\/12{width:91.666667%!important}.desktop\\:w-2\\/12{width:16.666667%!important}.desktop\\:w-3\\/12{width:25%!important}.desktop\\:w-4\\/12{width:33.333333%!important}.desktop\\:w-5\\/12{width:41.666667%!important}.desktop\\:w-6\\/12{width:50%!important}.desktop\\:w-7\\/12{width:58.333333%!important}.desktop\\:w-8\\/12{width:66.666667%!important}.desktop\\:w-9\\/12{width:75%!important}}@media (min-width:90rem){.desktop-lg\\:w-1\\/12{width:8.333333%!important}.desktop-lg\\:w-10\\/12{width:83.333333%!important}.desktop-lg\\:w-11\\/12{width:91.666667%!important}.desktop-lg\\:w-2\\/12{width:16.666667%!important}.desktop-lg\\:w-3\\/12{width:25%!important}.desktop-lg\\:w-4\\/12{width:33.333333%!important}.desktop-lg\\:w-5\\/12{width:41.666667%!important}.desktop-lg\\:w-6\\/12{width:50%!important}.desktop-lg\\:w-7\\/12{width:58.333333%!important}.desktop-lg\\:w-8\\/12{width:66.666667%!important}.desktop-lg\\:w-9\\/12{width:75%!important}}@media (min-width:120rem){.desktop-xl\\:w-1\\/12{width:8.333333%!important}.desktop-xl\\:w-10\\/12{width:83.333333%!important}.desktop-xl\\:w-11\\/12{width:91.666667%!important}.desktop-xl\\:w-2\\/12{width:16.666667%!important}.desktop-xl\\:w-3\\/12{width:25%!important}.desktop-xl\\:w-4\\/12{width:33.333333%!important}.desktop-xl\\:w-5\\/12{width:41.666667%!important}.desktop-xl\\:w-6\\/12{width:50%!important}.desktop-xl\\:w-7\\/12{width:58.333333%!important}.desktop-xl\\:w-8\\/12{width:66.666667%!important}.desktop-xl\\:w-9\\/12{width:75%!important}}.w-3\\/4{width:75%!important}@media (min-width:64rem){.desktop-xs\\:w-48{width:12rem!important}.desktop-xs\\:w-auto{width:auto!important}.desktop-xs\\:flex-row{flex-direction:row!important}}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}";
3
+ const loaderComponentCss = ".visible{visibility:visible!important}.static{position:static!important}.fixed{position:fixed!important}.absolute{position:absolute!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.top-0{top:0!important}.z-navbar-backdrop{z-index:290!important}.m-0{margin:0!important}.mb-14{margin-bottom:3.5rem!important}.mb-6{margin-bottom:1.5rem!important}.ml-1{margin-left:.25rem!important}.ml-2{margin-left:.5rem!important}.mt-0{margin-top:0!important}.box-border{box-sizing:border-box!important}.block{display:block!important}.inline-block{display:inline-block!important}.inline{display:inline!important}.flex{display:flex!important}.table{display:table!important}.table-cell{display:table-cell!important}.table-row{display:table-row!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.w-1{width:.25rem!important}.w-10{width:2.5rem!important}.w-11{width:2.75rem!important}.w-2{width:.5rem!important}.w-3{width:.75rem!important}.w-4{width:1rem!important}.w-5{width:1.25rem!important}.w-6{width:1.5rem!important}.w-7{width:1.75rem!important}.w-8{width:2rem!important}.w-9{width:2.25rem!important}.w-auto{width:auto!important}.w-full{width:100%!important}.min-w-0{min-width:0!important}.flex-1{flex:1 1 0%!important}.flex-shrink-0{flex-shrink:0!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.items-start{align-items:flex-start!important}.items-end{align-items:flex-end!important}.items-center{align-items:center!important}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.justify-center{justify-content:center!important}.justify-between{justify-content:space-between!important}.gap-2{gap:.5rem!important}.gap-4{gap:1rem!important}.self-center{align-self:center!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.whitespace-nowrap{white-space:nowrap!important}.rounded{border-radius:.25rem!important}.rounded-large{border-radius:.375rem!important}.rounded-bl-none{border-bottom-left-radius:0!important}.rounded-br-none{border-bottom-right-radius:0!important}.rounded-tl-none{border-top-left-radius:0!important}.rounded-tr-none{border-top-right-radius:0!important}.border{border-width:1px!important}.border-2{border-width:2px!important}.border-l-0{border-left-width:0!important}.border-r-0{border-right-width:0!important}.border-solid{border-style:solid!important}.border-indigo-light{--tw-border-opacity:1!important;border-color:rgb(241 246 255/var(--tw-border-opacity))!important}.border-storm-light{--tw-border-opacity:1!important;border-color:rgb(176 178 203/var(--tw-border-opacity))!important}.border-transparent{border-color:transparent!important}.border-t-mystic-dark{border-top-color:rgb(218 230 240/var(--tw-border-opacity))!important}.border-t-mystic-dark,.border-t-storm{--tw-border-opacity:1!important}.border-t-storm{border-top-color:rgb(81 83 107/var(--tw-border-opacity))!important}.border-t-white{--tw-border-opacity:1!important;border-top-color:rgb(255 255 255/var(--tw-border-opacity))!important}.bg-mystic{background-color:rgb(247 250 252/var(--tw-bg-opacity))!important}.bg-mystic,.bg-white{--tw-bg-opacity:1!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.p-4{padding:1rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-24{padding-bottom:6rem!important;padding-top:6rem!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.text-center{text-align:center!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.font-semibold{font-weight:600!important}.text-negative{color:rgb(185 30 40/var(--tw-text-opacity))!important}.text-negative,.text-negative-light{--tw-text-opacity:1!important}.text-negative-light{color:rgb(255 204 211/var(--tw-text-opacity))!important}.text-storm{color:rgb(81 83 107/var(--tw-text-opacity))!important}.text-storm,.text-storm-dark{--tw-text-opacity:1!important}.text-storm-dark{color:rgb(39 40 56/var(--tw-text-opacity))!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!important}.blur{--tw-blur:blur(8px)!important}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.h-screen-safe{height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;height:-webkit-fill-available!important}.w-screen-safe{width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right))!important;width:-webkit-fill-available!important}*{box-sizing:border-box}.h-\\[1em\\]{height:1em!important}.w-\\[1em\\]{width:1em!important}.border-indigo-light\\/40{border-color:rgba(241,246,255,.4)!important}.border-storm-light\\/40{border-color:rgba(176,178,203,.4)!important}:host .loader{--tw-border-opacity:1;animation:spin .5s linear infinite;border-color:rgb(241 246 255/var(--tw-border-opacity));border-radius:100%;border-style:solid;border-width:medium 2px 2px;border-top:2px solid rgb(82 138 250/var(--tw-border-opacity));display:inline-block;height:1em;width:1em;will-change:transform}:host .loader.color-storm{--tw-border-opacity:1!important;border-color:rgba(176,178,203,.4)!important;border-top-color:rgb(81 83 107/var(--tw-border-opacity))!important}:host .loader.color-white{--tw-border-opacity:1!important;border-color:rgba(241,246,255,.4)!important;border-top-color:rgb(255 255 255/var(--tw-border-opacity))!important}:host .loading-screen{--tw-bg-opacity:1;align-items:center;background-color:rgb(247 250 252/var(--tw-bg-opacity));display:flex;height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));height:-webkit-fill-available;justify-content:center;left:0;position:fixed;top:0;width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));width:-webkit-fill-available;z-index:1001}:host .loading-screen .content{max-width:20rem}:host .loading-screen .content .loader-wrapper{display:flex;justify-content:center;width:100%}:host .loading-screen .content .loader-wrapper .loader{font-size:2.25rem;line-height:2.5rem}:host(.variant-ghost){--loading-bg:#f7fafc;--loading-stripe:#fcfdfe;animation:loading 1s ease-in-out infinite;background-color:var(--loading-bg);background:linear-gradient(100deg,hsla(0,0%,100%,0) 40%,var(--loading-stripe) 50%,hsla(0,0%,100%,0) 60%) var(--loading-bg);background-position-x:180%;background-size:200% 100%;box-sizing:border-box;display:block;min-height:1em;min-width:1em;will-change:background,background-position-x,background-color}@keyframes loading{to{background-position-x:-20%}}@keyframes spin{to{transform:rotate(1turn)}}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.hover\\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}@media (min-width:40rem){.tablet\\:w-80{width:20rem!important}.tablet\\:w-\\[33\\.5rem\\]{width:33.5rem!important}.tablet\\:w-\\[38rem\\]{width:38rem!important}.tablet\\:w-\\[47\\.5rem\\]{width:47.5rem!important}.tablet\\:w-\\[57\\.5rem\\]{width:57.5rem!important}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}.desktop-xs\\:hidden{display:none!important}}.max-w-\\[20rem\\]{max-width:20rem!important}.w-1\\/12{width:8.333333%!important}.w-10\\/12{width:83.333333%!important}.w-11\\/12{width:91.666667%!important}.w-2\\/12{width:16.666667%!important}.w-3\\/12{width:25%!important}.w-4\\/12{width:33.333333%!important}.w-5\\/12{width:41.666667%!important}.w-6\\/12{width:50%!important}.w-7\\/12{width:58.333333%!important}.w-8\\/12{width:66.666667%!important}.w-9\\/12{width:75%!important}@media (min-width:40rem){.tablet\\:w-1\\/12{width:8.333333%!important}.tablet\\:w-10\\/12{width:83.333333%!important}.tablet\\:w-11\\/12{width:91.666667%!important}.tablet\\:w-2\\/12{width:16.666667%!important}.tablet\\:w-3\\/12{width:25%!important}.tablet\\:w-4\\/12{width:33.333333%!important}.tablet\\:w-5\\/12{width:41.666667%!important}.tablet\\:w-6\\/12{width:50%!important}.tablet\\:w-7\\/12{width:58.333333%!important}.tablet\\:w-8\\/12{width:66.666667%!important}.tablet\\:w-9\\/12{width:75%!important}}@media (min-width:64rem){.desktop-xs\\:w-1\\/12{width:8.333333%!important}.desktop-xs\\:w-10\\/12{width:83.333333%!important}.desktop-xs\\:w-11\\/12{width:91.666667%!important}.desktop-xs\\:w-2\\/12{width:16.666667%!important}.desktop-xs\\:w-3\\/12{width:25%!important}.desktop-xs\\:w-4\\/12{width:33.333333%!important}.desktop-xs\\:w-5\\/12{width:41.666667%!important}.desktop-xs\\:w-6\\/12{width:50%!important}.desktop-xs\\:w-7\\/12{width:58.333333%!important}.desktop-xs\\:w-8\\/12{width:66.666667%!important}.desktop-xs\\:w-9\\/12{width:75%!important}}@media (min-width:80rem){.desktop-sm\\:w-1\\/12{width:8.333333%!important}.desktop-sm\\:w-10\\/12{width:83.333333%!important}.desktop-sm\\:w-11\\/12{width:91.666667%!important}.desktop-sm\\:w-2\\/12{width:16.666667%!important}.desktop-sm\\:w-3\\/12{width:25%!important}.desktop-sm\\:w-4\\/12{width:33.333333%!important}.desktop-sm\\:w-5\\/12{width:41.666667%!important}.desktop-sm\\:w-6\\/12{width:50%!important}.desktop-sm\\:w-7\\/12{width:58.333333%!important}.desktop-sm\\:w-8\\/12{width:66.666667%!important}.desktop-sm\\:w-9\\/12{width:75%!important}}@media (min-width:85.375rem){.desktop\\:w-1\\/12{width:8.333333%!important}.desktop\\:w-10\\/12{width:83.333333%!important}.desktop\\:w-11\\/12{width:91.666667%!important}.desktop\\:w-2\\/12{width:16.666667%!important}.desktop\\:w-3\\/12{width:25%!important}.desktop\\:w-4\\/12{width:33.333333%!important}.desktop\\:w-5\\/12{width:41.666667%!important}.desktop\\:w-6\\/12{width:50%!important}.desktop\\:w-7\\/12{width:58.333333%!important}.desktop\\:w-8\\/12{width:66.666667%!important}.desktop\\:w-9\\/12{width:75%!important}}@media (min-width:90rem){.desktop-lg\\:w-1\\/12{width:8.333333%!important}.desktop-lg\\:w-10\\/12{width:83.333333%!important}.desktop-lg\\:w-11\\/12{width:91.666667%!important}.desktop-lg\\:w-2\\/12{width:16.666667%!important}.desktop-lg\\:w-3\\/12{width:25%!important}.desktop-lg\\:w-4\\/12{width:33.333333%!important}.desktop-lg\\:w-5\\/12{width:41.666667%!important}.desktop-lg\\:w-6\\/12{width:50%!important}.desktop-lg\\:w-7\\/12{width:58.333333%!important}.desktop-lg\\:w-8\\/12{width:66.666667%!important}.desktop-lg\\:w-9\\/12{width:75%!important}}@media (min-width:120rem){.desktop-xl\\:w-1\\/12{width:8.333333%!important}.desktop-xl\\:w-10\\/12{width:83.333333%!important}.desktop-xl\\:w-11\\/12{width:91.666667%!important}.desktop-xl\\:w-2\\/12{width:16.666667%!important}.desktop-xl\\:w-3\\/12{width:25%!important}.desktop-xl\\:w-4\\/12{width:33.333333%!important}.desktop-xl\\:w-5\\/12{width:41.666667%!important}.desktop-xl\\:w-6\\/12{width:50%!important}.desktop-xl\\:w-7\\/12{width:58.333333%!important}.desktop-xl\\:w-8\\/12{width:66.666667%!important}.desktop-xl\\:w-9\\/12{width:75%!important}}.w-3\\/4{width:75%!important}@media (min-width:64rem){.desktop-xs\\:w-48{width:12rem!important}.desktop-xs\\:w-auto{width:auto!important}.desktop-xs\\:flex-row{flex-direction:row!important}}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}";
4
4
 
5
5
  const Loader = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
6
6
  constructor() {
package/dist/components/loader.component.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"loader.component.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,26dAA26d;;MCQz7d,MAAM;;;;;IA+BP,UAAK,GAAG,IAAI,CAAC,IAAI,CAAC;IAGlB,YAAO,IAAI,WAAK,KAAK,EAAE,gBAAgB,IAAI,CAAC,KAAK,EAAE,GAAQ,CAAC,CAAC;gBA9BvB,IAAI;mBAUlC,QAAQ;iBAKsB,QAAQ;;;;EAiBtD,mBAAmB;IACf,IAAI,CAAC,UAAU,EAAE,CAAC;GACrB;EAED,qBAAqB;IACjB,IAAI,CAAC,UAAU,EAAE,CAAC;GACrB;EAED,MAAM;IACF,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACb,OAAO;KACV;IAED,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE;MAC1B,OAAO,EAAC,IAAI,IAAC,KAAK,EAAC,wBAAwB,GAAQ,CAAC;KACvD;IAED,IAAI,IAAI,CAAC,OAAO,KAAK,aAAa,EAAE;MAChC,QACI,EAAC,IAAI,IAAC,KAAK,EAAC,8BAA8B,IACtC,WAAK,KAAK,EAAC,gBAAgB,IACvB,WAAK,KAAK,EAAC,SAAS,IAChB,eAAQ,EAER,WAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,OAAO,CAAO,CAC9C,CACJ,CACH,EACT;KACL;IAED,QACI,EAAC,IAAI,IACD,KAAK,EAAE,iCACH,IAAI,CAAC,OAAO,KAAK,YAAY;QAC7B,qCACJ,EAAE,IAED,IAAI,CAAC,OAAO,CACV,EACT;GACL;EAEO,UAAU;;IACd,IAAI,IAAI,CAAC,eAAe,EAAE;MACtB,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE,CAAC;MACnC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;KAC/B;IAED,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;MAChC,IAAI,CAAC,eAAe,GAAG,MAAA,IAAI,CAAC,IAAI,0CAAE,SAAS,CACvC,CAAC,IAAI,MAAM,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,CAChC,CAAC;MACF,OAAO;KACV;IAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC;GAC1B;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/atoms/loader/loader.component.scss?tag=p-loader&encapsulation=shadow","./src/components/atoms/loader/loader.component.tsx"],"sourcesContent":[":host {\n .loader {\n @apply w-[1em] h-[1em] inline-block rounded-round;\n @apply border-2 border-solid border-indigo-light border-t-indigo;\n animation: 500ms spin linear infinite;\n\n will-change: transform;\n\n &.color-storm {\n @apply border-storm-light/40 border-t-storm #{!important};\n }\n\n &.color-white {\n @apply border-indigo-light/40 border-t-white #{!important};\n }\n }\n\n .loading-screen {\n @apply fixed top-0 left-0 w-screen h-screen;\n @apply flex items-center justify-center;\n @apply bg-mystic;\n\n z-index: 1001;\n\n .content {\n @apply max-w-xs;\n\n .loader-wrapper {\n @apply w-full flex justify-center;\n\n .loader {\n @apply text-4xl;\n }\n }\n }\n }\n}\n\n:host(.variant-ghost) {\n @apply block box-border;\n\n will-change: background, background-position-x, background-color;\n\n min-height: 1em;\n min-width: 1em;\n\n --loading-bg: #f7fafc;\n --loading-stripe: rgba(252, 253, 254, 1);\n\n background-color: var(--loading-bg);\n background: linear-gradient(\n 100deg,\n rgba(255, 255, 255, 0) 40%,\n var(--loading-stripe) 50%,\n rgba(255, 255, 255, 0) 60%\n )\n var(--loading-bg);\n background-size: 200% 100%;\n background-position-x: 180%;\n animation: 1s loading ease-in-out infinite;\n}\n\n@keyframes loading {\n to {\n background-position-x: -20%;\n }\n}\n\n@keyframes spin {\n 100% {\n transform: rotate(1turn);\n }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { Observable, Subscription } from 'rxjs';\n\n@Component({\n tag: 'p-loader',\n styleUrl: 'loader.component.scss',\n shadow: true,\n})\nexport class Loader {\n /**\n * Wether to show or hide the loader\n */\n @Prop() show: boolean | Observable<boolean> = true;\n\n /**\n * Variant of loader\n */\n @Prop() variant:\n | 'inline'\n | 'full-width'\n | 'full-screen'\n | 'modal'\n | 'ghost' = 'inline';\n\n /**\n * Color of the loader\n */\n @Prop() color: 'indigo' | 'white' | 'storm' = 'indigo';\n\n /**\n * !NOT IMPLEMENTED! Modal title for modal variant\n */\n @Prop() modalTitle: string;\n\n /**\n * !NOT IMPLEMENTED! Modal description for modal variant\n */\n @Prop() modalDescription: string;\n\n private _show = this.show;\n private _showSubscriber: Subscription;\n\n private _loader = (<div class={`loader color-${this.color}`}></div>);\n\n componentWillRender() {\n this._checkShow();\n }\n\n componentShouldUpdate() {\n this._checkShow();\n }\n\n render() {\n if (!this._show) {\n return;\n }\n\n if (this.variant === 'ghost') {\n return <Host class=\"p-loader variant-ghost\"></Host>;\n }\n\n if (this.variant === 'full-screen') {\n return (\n <Host class=\"p-loader variant-full-screen\">\n <div class=\"loading-screen\">\n <div class=\"content\">\n <slot />\n\n <div class=\"loader-wrapper\">{this._loader}</div>\n </div>\n </div>\n </Host>\n );\n }\n\n return (\n <Host\n class={`p-loader variant-default flex ${\n this.variant === 'full-width' &&\n 'w-full flex justify-center text-4xl'\n }`}\n >\n {this._loader}\n </Host>\n );\n }\n\n private _checkShow() {\n if (this._showSubscriber) {\n this._showSubscriber.unsubscribe();\n this._showSubscriber = null;\n }\n\n if (typeof this.show !== 'boolean') {\n this._showSubscriber = this.show?.subscribe(\n (show) => (this._show = show)\n );\n return;\n }\n\n this._show = this.show;\n }\n}\n"],"version":3}
1
+ {"file":"loader.component.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,w4eAAw4e;;MCQt5e,MAAM;;;;;IA+BP,UAAK,GAAG,IAAI,CAAC,IAAI,CAAC;IAGlB,YAAO,IAAI,WAAK,KAAK,EAAE,gBAAgB,IAAI,CAAC,KAAK,EAAE,GAAQ,CAAC,CAAC;gBA9BvB,IAAI;mBAUlC,QAAQ;iBAKsB,QAAQ;;;;EAiBtD,mBAAmB;IACf,IAAI,CAAC,UAAU,EAAE,CAAC;GACrB;EAED,qBAAqB;IACjB,IAAI,CAAC,UAAU,EAAE,CAAC;GACrB;EAED,MAAM;IACF,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACb,OAAO;KACV;IAED,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE;MAC1B,OAAO,EAAC,IAAI,IAAC,KAAK,EAAC,wBAAwB,GAAQ,CAAC;KACvD;IAED,IAAI,IAAI,CAAC,OAAO,KAAK,aAAa,EAAE;MAChC,QACI,EAAC,IAAI,IAAC,KAAK,EAAC,8BAA8B,IACtC,WAAK,KAAK,EAAC,gBAAgB,IACvB,WAAK,KAAK,EAAC,SAAS,IAChB,eAAQ,EAER,WAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,OAAO,CAAO,CAC9C,CACJ,CACH,EACT;KACL;IAED,QACI,EAAC,IAAI,IACD,KAAK,EAAE,iCACH,IAAI,CAAC,OAAO,KAAK,YAAY;QAC7B,qCACJ,EAAE,IAED,IAAI,CAAC,OAAO,CACV,EACT;GACL;EAEO,UAAU;;IACd,IAAI,IAAI,CAAC,eAAe,EAAE;MACtB,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE,CAAC;MACnC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;KAC/B;IAED,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;MAChC,IAAI,CAAC,eAAe,GAAG,MAAA,IAAI,CAAC,IAAI,0CAAE,SAAS,CACvC,CAAC,IAAI,MAAM,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,CAChC,CAAC;MACF,OAAO;KACV;IAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC;GAC1B;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/atoms/loader/loader.component.scss?tag=p-loader&encapsulation=shadow","./src/components/atoms/loader/loader.component.tsx"],"sourcesContent":[":host {\n .loader {\n @apply inline-block h-[1em] w-[1em] rounded-round;\n @apply border-2 border-solid border-indigo-light border-t-indigo;\n animation: 500ms spin linear infinite;\n\n will-change: transform;\n\n &.color-storm {\n @apply border-storm-light/40 border-t-storm #{!important};\n }\n\n &.color-white {\n @apply border-indigo-light/40 border-t-white #{!important};\n }\n }\n\n .loading-screen {\n @apply w-screen-safe h-screen-safe fixed top-0 left-0;\n @apply flex items-center justify-center;\n @apply bg-mystic;\n\n z-index: 1001;\n\n .content {\n @apply max-w-xs;\n\n .loader-wrapper {\n @apply flex w-full justify-center;\n\n .loader {\n @apply text-4xl;\n }\n }\n }\n }\n}\n\n:host(.variant-ghost) {\n @apply box-border block;\n\n will-change: background, background-position-x, background-color;\n\n min-height: 1em;\n min-width: 1em;\n\n --loading-bg: #f7fafc;\n --loading-stripe: rgba(252, 253, 254, 1);\n\n background-color: var(--loading-bg);\n background: linear-gradient(\n 100deg,\n rgba(255, 255, 255, 0) 40%,\n var(--loading-stripe) 50%,\n rgba(255, 255, 255, 0) 60%\n )\n var(--loading-bg);\n background-size: 200% 100%;\n background-position-x: 180%;\n animation: 1s loading ease-in-out infinite;\n}\n\n@keyframes loading {\n to {\n background-position-x: -20%;\n }\n}\n\n@keyframes spin {\n 100% {\n transform: rotate(1turn);\n }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { Observable, Subscription } from 'rxjs';\n\n@Component({\n tag: 'p-loader',\n styleUrl: 'loader.component.scss',\n shadow: true,\n})\nexport class Loader {\n /**\n * Wether to show or hide the loader\n */\n @Prop() show: boolean | Observable<boolean> = true;\n\n /**\n * Variant of loader\n */\n @Prop() variant:\n | 'inline'\n | 'full-width'\n | 'full-screen'\n | 'modal'\n | 'ghost' = 'inline';\n\n /**\n * Color of the loader\n */\n @Prop() color: 'indigo' | 'white' | 'storm' = 'indigo';\n\n /**\n * !NOT IMPLEMENTED! Modal title for modal variant\n */\n @Prop() modalTitle: string;\n\n /**\n * !NOT IMPLEMENTED! Modal description for modal variant\n */\n @Prop() modalDescription: string;\n\n private _show = this.show;\n private _showSubscriber: Subscription;\n\n private _loader = (<div class={`loader color-${this.color}`}></div>);\n\n componentWillRender() {\n this._checkShow();\n }\n\n componentShouldUpdate() {\n this._checkShow();\n }\n\n render() {\n if (!this._show) {\n return;\n }\n\n if (this.variant === 'ghost') {\n return <Host class=\"p-loader variant-ghost\"></Host>;\n }\n\n if (this.variant === 'full-screen') {\n return (\n <Host class=\"p-loader variant-full-screen\">\n <div class=\"loading-screen\">\n <div class=\"content\">\n <slot />\n\n <div class=\"loader-wrapper\">{this._loader}</div>\n </div>\n </div>\n </Host>\n );\n }\n\n return (\n <Host\n class={`p-loader variant-default flex ${\n this.variant === 'full-width' &&\n 'w-full flex justify-center text-4xl'\n }`}\n >\n {this._loader}\n </Host>\n );\n }\n\n private _checkShow() {\n if (this._showSubscriber) {\n this._showSubscriber.unsubscribe();\n this._showSubscriber = null;\n }\n\n if (typeof this.show !== 'boolean') {\n this._showSubscriber = this.show?.subscribe(\n (show) => (this._show = show)\n );\n return;\n }\n\n this._show = this.show;\n }\n}\n"],"version":3}
package/dist/components/p-layout.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
2
2
 
3
- const layoutComponentCss = ".static{position:static!important}.relative{position:relative!important}.sticky{position:sticky!important}.order-1{order:1!important}.order-2{order:2!important}.order-3{order:3!important}.flex{display:flex!important}.grid{display:grid!important}.hidden{display:none!important}.h-full{height:100%!important}.h-screen{height:100vh!important}.w-full{width:100%!important}.w-screen{width:100vw!important}.w-sidebar-mobile{width:100%!important}.flex-1{flex:1 1 0%!important}.flex-col{flex-direction:column!important}.content-start{align-content:flex-start!important}.items-center{align-items:center!important}.overflow-y-auto{overflow-y:auto!important}.px-content-mobile-x{padding-left:1rem!important;padding-right:1rem!important}*{box-sizing:border-box}:host{align-content:flex-start;display:grid;gap:0;grid-template-areas:\"sidebar\" \"topbar\" \"content\";grid-template-columns:1fr;grid-template-rows:repeat(1fr,3);height:100vh;overflow:hidden;width:100vw}@media (min-width:64rem){:host{grid-template-areas:\"topbar topbar\" \"sidebar content\";grid-template-columns:auto 1fr;grid-template-rows:auto 1fr}}:host .content,:host .sidebar,:host .topbar{align-self:flex-start}:host .topbar{grid-area:topbar;order:2;position:sticky;width:100%}@media (min-width:80rem){:host .topbar{order:1}}:host .sidebar{box-sizing:border-box;display:flex;grid-area:sidebar;height:100%;order:1;width:100%}@media (min-width:80rem){:host .sidebar{order:2;width:15rem}}:host .content{display:flex;flex-direction:column;grid-area:content;height:100%;order:3;overflow-x:hidden;overflow-y:auto;padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);position:relative}:host .content .inner-content{padding:1.5rem 1rem;position:relative}@media (min-width:64rem){:host .content .inner-content{padding:2rem;width:100%}}@media (min-width:80rem){:host .content .inner-content{width:100%}}@media (min-width:85.375rem){:host .content .inner-content{width:69rem}}@media (min-width:90rem){:host .content .inner-content{width:69rem}}@media (min-width:120rem){:host .content .inner-content{width:69rem}}:host(.variant-default) .content{flex:1 1 0%}:host(.variant-login){grid-template-areas:\"topbar topbar\" \"content content\"}@media (min-width:64rem){:host(.variant-login){grid-template-areas:\"topbar topbar\" \"content sidebar\"}}:host(.variant-login) .sidebar{display:none;flex:1 1 0%;order:3;overflow:hidden;padding:.5rem;width:unset}@media (min-width:64rem){:host(.variant-login) .sidebar{display:flex}}:host(.variant-login) .sidebar .inner-content{padding:.5rem}:host(.variant-login) .content{align-items:center;order:3}@media (min-width:64rem){:host(.variant-login) .content{justify-content:center;order:2}}:host(.variant-login) .content .inner-content{box-sizing:border-box;padding:calc(env(safe-area-inset-top) + 3.5rem) 1rem 1.5rem;width:100%}@media (min-width:64rem){:host(.variant-login) .content .inner-content{padding:1.5rem 4.5rem 0}}@media (min-width:40rem){:host(.variant-login) .content .inner-content{width:30rem}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}.desktop-xs\\:w-content-desktop-xs{width:100%!important}.desktop-xs\\:px-content-desktop-x{padding-left:2rem!important;padding-right:2rem!important}.desktop-xs\\:py-0{padding-bottom:0!important;padding-top:0!important}}@media (min-width:80rem){.desktop-sm\\:w-content-desktop-sm{width:100%!important}}@media (min-width:85.375rem){.desktop\\:w-content-desktop{width:69rem!important}}@media (min-width:90rem){.desktop-lg\\:w-content-desktop-lg{width:69rem!important}}";
3
+ const layoutComponentCss = ".static{position:static!important}.relative{position:relative!important}.sticky{position:sticky!important}.order-1{order:1!important}.order-2{order:2!important}.order-3{order:3!important}.box-border{box-sizing:border-box!important}.flex{display:flex!important}.grid{display:grid!important}.hidden{display:none!important}.h-full{height:100%!important}.w-sidebar-mobile{width:100%!important}.w-unset{width:unset!important}.flex-1{flex:1 1 0%!important}.flex-col{flex-direction:column!important}.content-start{align-content:flex-start!important}.items-center{align-items:center!important}.overflow-y-auto{overflow-y:auto!important}.px-content-mobile-x{padding-left:1rem!important;padding-right:1rem!important}.h-screen-safe{height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;height:-webkit-fill-available!important}.w-screen-safe{width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right))!important;width:-webkit-fill-available!important}*{box-sizing:border-box}.w-full,.w-sidebar-mobile{width:100%!important}:host{align-content:flex-start;display:grid;gap:0;grid-template-areas:\"sidebar\" \"topbar\" \"content\";grid-template-columns:1fr;grid-template-rows:repeat(1fr,3);height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));height:-webkit-fill-available;overflow:hidden;width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));width:-webkit-fill-available}@media (min-width:64rem){:host{grid-template-areas:\"topbar topbar\" \"sidebar content\";grid-template-columns:auto 1fr;grid-template-rows:auto 1fr}}:host .content,:host .sidebar,:host .topbar{align-self:flex-start}:host .topbar{grid-area:topbar;order:2;position:sticky;width:100%}@media (min-width:80rem){:host .topbar{order:1}}:host .sidebar{box-sizing:border-box;display:flex;grid-area:sidebar;height:100%;order:1;width:100%}@media (min-width:80rem){:host .sidebar{order:2;width:15rem}}:host .content{display:flex;flex-direction:column;grid-area:content;height:100%;order:3;overflow-x:hidden;overflow-y:auto;padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);position:relative}:host .content .inner-content{padding:1.5rem 1rem;position:relative}@media (min-width:64rem){:host .content .inner-content{padding:2rem;width:100%}}@media (min-width:80rem){:host .content .inner-content{width:100%}}@media (min-width:85.375rem){:host .content .inner-content{width:69rem}}@media (min-width:90rem){:host .content .inner-content{width:69rem}}@media (min-width:120rem){:host .content .inner-content{width:69rem}}:host(.variant-default) .content{flex:1 1 0%}:host(.variant-login){grid-template-areas:\"topbar topbar\" \"content content\"}@media (min-width:64rem){:host(.variant-login){grid-template-areas:\"topbar topbar\" \"content sidebar\"}}:host(.variant-login) .sidebar{display:none;flex:1 1 0%;order:3;overflow:hidden;padding:.5rem;width:unset}@media (min-width:64rem){:host(.variant-login) .sidebar{display:flex}}:host(.variant-login) .sidebar .inner-content{padding:.5rem}:host(.variant-login) .content{align-items:center;order:3}@media (min-width:64rem){:host(.variant-login) .content{justify-content:center;order:2}}:host(.variant-login) .content .inner-content{box-sizing:border-box;padding:calc(env(safe-area-inset-top) + 3.5rem) 1rem 1.5rem;width:100%}@media (min-width:64rem){:host(.variant-login) .content .inner-content{padding:1.5rem 4.5rem 0}}@media (min-width:40rem){:host(.variant-login) .content .inner-content{width:30rem}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}.desktop-xs\\:w-content-desktop-xs{width:100%!important}.desktop-xs\\:px-content-desktop-x{padding-left:2rem!important;padding-right:2rem!important}.desktop-xs\\:py-0{padding-bottom:0!important;padding-top:0!important}}@media (min-width:80rem){.desktop-sm\\:w-content-desktop-sm{width:100%!important}}@media (min-width:85.375rem){.desktop\\:w-content-desktop{width:69rem!important}}@media (min-width:90rem){.desktop-lg\\:w-content-desktop-lg{width:69rem!important}}";
4
4
 
5
5
  const Layout = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
6
6
  constructor() {
package/dist/components/p-layout.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"p-layout.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,4+GAA4+G;;MCO1/G,MAAM;;;;;mBAIwB,SAAS;;EAEhD,MAAM;IACF,QACI,EAAC,IAAI,IAAC,KAAK,EAAE,oBAAoB,IAAI,CAAC,OAAO,EAAE,IAC3C,WAAK,KAAK,EAAC,QAAQ,IACf,YAAM,IAAI,EAAC,QAAQ,GAAG,CACpB,EACN,WAAK,KAAK,EAAC,SAAS,IAChB,YAAM,IAAI,EAAC,SAAS,GAAG,CACrB,EACN,WAAK,KAAK,EAAC,SAAS,IAChB,WAAK,KAAK,EAAC,eAAe,IACtB,YAAM,IAAI,EAAC,SAAS,GAAG,CACrB,CACJ,CACH,EACT;GACL;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/atoms/layout/layout.component.scss?tag=p-layout&encapsulation=shadow","./src/components/atoms/layout/layout.component.tsx"],"sourcesContent":[":host {\n @apply grid h-screen w-screen content-start overflow-hidden;\n\n grid-template-columns: 1fr;\n grid-template-rows: repeat(1fr, 3);\n gap: 0;\n grid-template-areas:\n 'sidebar'\n 'topbar'\n 'content';\n\n @screen desktop-xs {\n grid-template-columns: auto 1fr;\n grid-template-rows: auto 1fr;\n grid-template-areas:\n 'topbar topbar'\n 'sidebar content';\n }\n\n .topbar,\n .sidebar,\n .content {\n @apply self-start;\n }\n\n .topbar {\n grid-area: topbar;\n\n @apply sticky w-full;\n @apply order-2 desktop-sm:order-1;\n }\n\n .sidebar {\n grid-area: sidebar;\n\n @apply flex h-full box-border;\n @apply w-sidebar-mobile desktop-sm:w-sidebar-desktop;\n @apply order-1 desktop-sm:order-2;\n }\n\n .content {\n grid-area: content;\n\n @apply relative flex flex-col h-full overflow-y-auto overflow-x-hidden;\n @apply order-3;\n\n padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom)\n env(safe-area-inset-left);\n\n .inner-content {\n @apply relative pb-24;\n\n @apply px-content-mobile-x py-content-mobile-y;\n @apply desktop-xs:px-content-desktop-x desktop-xs:py-content-desktop-y;\n\n @apply desktop-xs:w-content-desktop-xs desktop-sm:w-content-desktop-sm desktop:w-content-desktop desktop-lg:w-content-desktop-lg desktop-xl:w-content-desktop-xl;\n }\n }\n}\n\n:host(.variant-default) {\n .content {\n @apply flex-1;\n }\n}\n\n:host(.variant-login) {\n grid-template-areas:\n 'topbar topbar'\n 'content content';\n\n @screen desktop-xs {\n grid-template-areas:\n 'topbar topbar'\n 'content sidebar';\n }\n\n .sidebar {\n @apply hidden desktop-xs:flex w-unset;\n @apply order-3 p-2;\n @apply flex-1 overflow-hidden;\n\n .inner-content {\n @apply p-2;\n }\n }\n\n .content {\n @apply order-3 desktop-xs:order-2;\n @apply items-center desktop-xs:justify-center;\n\n .inner-content {\n @apply box-border;\n @apply desktop-xs:py-0 desktop-xs:px-18;\n @apply w-full tablet:w-content-desktop-login;\n\n @apply px-content-mobile-x py-content-mobile-y;\n padding-top: calc(env(safe-area-inset-top) + 3.5rem);\n\n @screen desktop-xs {\n @apply pt-content-mobile-y;\n }\n }\n }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'p-layout',\n styleUrl: 'layout.component.scss',\n shadow: true,\n})\nexport class Layout {\n /**\n * Variant of the layout\n */\n @Prop() variant: 'default' | 'login' = 'default';\n\n render() {\n return (\n <Host class={`p-layout variant-${this.variant}`}>\n <div class=\"topbar\">\n <slot name=\"topbar\" />\n </div>\n <div class=\"sidebar\">\n <slot name=\"sidebar\" />\n </div>\n <div class=\"content\">\n <div class=\"inner-content\">\n <slot name=\"content\" />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"p-layout.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,y9HAAy9H;;MCOv+H,MAAM;;;;;mBAIwB,SAAS;;EAEhD,MAAM;IACF,QACI,EAAC,IAAI,IAAC,KAAK,EAAE,oBAAoB,IAAI,CAAC,OAAO,EAAE,IAC3C,WAAK,KAAK,EAAC,QAAQ,IACf,YAAM,IAAI,EAAC,QAAQ,GAAG,CACpB,EACN,WAAK,KAAK,EAAC,SAAS,IAChB,YAAM,IAAI,EAAC,SAAS,GAAG,CACrB,EACN,WAAK,KAAK,EAAC,SAAS,IAChB,WAAK,KAAK,EAAC,eAAe,IACtB,YAAM,IAAI,EAAC,SAAS,GAAG,CACrB,CACJ,CACH,EACT;GACL;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/atoms/layout/layout.component.scss?tag=p-layout&encapsulation=shadow","./src/components/atoms/layout/layout.component.tsx"],"sourcesContent":[":host {\n @apply h-screen-safe w-screen-safe grid content-start overflow-hidden;\n\n grid-template-columns: 1fr;\n grid-template-rows: repeat(1fr, 3);\n gap: 0;\n grid-template-areas:\n 'sidebar'\n 'topbar'\n 'content';\n\n @screen desktop-xs {\n grid-template-columns: auto 1fr;\n grid-template-rows: auto 1fr;\n grid-template-areas:\n 'topbar topbar'\n 'sidebar content';\n }\n\n .topbar,\n .sidebar,\n .content {\n @apply self-start;\n }\n\n .topbar {\n grid-area: topbar;\n\n @apply sticky w-full;\n @apply order-2 desktop-sm:order-1;\n }\n\n .sidebar {\n grid-area: sidebar;\n\n @apply box-border flex h-full;\n @apply w-sidebar-mobile desktop-sm:w-sidebar-desktop;\n @apply order-1 desktop-sm:order-2;\n }\n\n .content {\n grid-area: content;\n\n @apply relative flex h-full flex-col overflow-y-auto overflow-x-hidden;\n @apply order-3;\n\n padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom)\n env(safe-area-inset-left);\n\n .inner-content {\n @apply relative pb-24;\n\n @apply px-content-mobile-x py-content-mobile-y;\n @apply desktop-xs:px-content-desktop-x desktop-xs:py-content-desktop-y;\n\n @apply desktop-xs:w-content-desktop-xs desktop-sm:w-content-desktop-sm desktop:w-content-desktop desktop-lg:w-content-desktop-lg desktop-xl:w-content-desktop-xl;\n }\n }\n}\n\n:host(.variant-default) {\n .content {\n @apply flex-1;\n }\n}\n\n:host(.variant-login) {\n grid-template-areas:\n 'topbar topbar'\n 'content content';\n\n @screen desktop-xs {\n grid-template-areas:\n 'topbar topbar'\n 'content sidebar';\n }\n\n .sidebar {\n @apply hidden w-unset desktop-xs:flex;\n @apply order-3 p-2;\n @apply flex-1 overflow-hidden;\n\n .inner-content {\n @apply p-2;\n }\n }\n\n .content {\n @apply order-3 desktop-xs:order-2;\n @apply items-center desktop-xs:justify-center;\n\n .inner-content {\n @apply box-border;\n @apply desktop-xs:py-0 desktop-xs:px-18;\n @apply w-full tablet:w-content-desktop-login;\n\n @apply px-content-mobile-x py-content-mobile-y;\n padding-top: calc(env(safe-area-inset-top) + 3.5rem);\n\n @screen desktop-xs {\n @apply pt-content-mobile-y;\n }\n }\n }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'p-layout',\n styleUrl: 'layout.component.scss',\n shadow: true,\n})\nexport class Layout {\n /**\n * Variant of the layout\n */\n @Prop() variant: 'default' | 'login' = 'default';\n\n render() {\n return (\n <Host class={`p-layout variant-${this.variant}`}>\n <div class=\"topbar\">\n <slot name=\"topbar\" />\n </div>\n <div class=\"sidebar\">\n <slot name=\"sidebar\" />\n </div>\n <div class=\"content\">\n <div class=\"inner-content\">\n <slot name=\"content\" />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/components/p-navbar.js CHANGED
@@ -4,7 +4,7 @@ import { d as defineCustomElement$4 } from './button.component.js';
4
4
  import { d as defineCustomElement$3 } from './icon.component.js';
5
5
  import { d as defineCustomElement$2 } from './loader.component.js';
6
6
 
7
- const navbarComponentCss = ".static{position:static!important}.fixed{position:fixed!important}.left-0{left:0!important}.top-0{top:0!important}.z-navbar-backdrop{z-index:290!important}.m-0{margin:0!important}.block{display:block!important}.inline{display:inline!important}.flex{display:flex!important}.hidden{display:none!important}.h-screen{height:100vh!important}.w-60{width:15rem!important}.w-full{width:100%!important}.-translate-x-full{--tw-translate-x:-100%!important}.-rotate-0,.-translate-x-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-135,.-rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-225,.-rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-270,.-rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-45,.-rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-90{--tw-rotate:-90deg!important}.rotate-0{--tw-rotate:0deg!important}.rotate-0,.rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-135{--tw-rotate:135deg!important}.rotate-180{--tw-rotate:180deg!important}.rotate-180,.rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-225{--tw-rotate:225deg!important}.rotate-25{--tw-rotate:25deg!important}.rotate-25,.rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-270{--tw-rotate:270deg!important}.rotate-315{--tw-rotate:315deg!important}.rotate-315,.rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-45{--tw-rotate:45deg!important}.rotate-90{--tw-rotate:90deg!important}.rotate-90,.scale-x-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-y-flip{--tw-scale-y:-1!important}.scale-y-flip,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.transform-gpu{transform:translate3d(var(--tw-translate-x),var(--tw-translate-y),0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.justify-between{justify-content:space-between!important}.border-0{border-width:0!important}.border-b{border-bottom-width:1px!important}.border-r{border-right-width:1px!important}.border-solid{border-style:solid!important}.border-mystic-dark{--tw-border-opacity:1!important;border-color:rgb(218 230 240/var(--tw-border-opacity))!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.px-4{padding-left:1rem!important;padding-right:1rem!important}.py-2{padding-bottom:.5rem!important;padding-top:.5rem!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.font-semibold{font-weight:600!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}*{box-sizing:border-box}:host{width:100%}@media (min-width:64rem){:host{width:15rem}}:host .sidebar,:host .sidebar .company,:host .sidebar .content,:host .sidebar .user,:host .userbar{display:flex;flex-direction:column;width:100%}:host .sidebar,:host .top-bar{--tw-bg-opacity:1;--tw-border-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(218 230 240/var(--tw-border-opacity))!important;border-style:solid!important;border-width:0!important}:host .sidebar{--tw-bg-opacity:1;--tw-translate-x:-100%;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-right-width:1px!important;height:100vh;left:0;padding:calc(env(safe-area-inset-top, 0) + 1rem) 1rem 1rem;position:fixed;top:0;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transform:translate3d(var(--tw-translate-x),var(--tw-translate-y),0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:15rem;will-change:transform;z-index:300}@media (min-width:64rem){:host .sidebar{--tw-translate-x:0px;height:100%;position:relative;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));width:100%}}:host .sidebar .header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1.5rem;width:100%}@media (min-width:64rem){:host .sidebar .header{display:none}}:host .sidebar .content{margin-top:1.5rem}:host .sidebar .user{display:none;margin-top:auto}@media (min-width:64rem){:host .sidebar .user{display:flex}}:host .sidebar.show{--tw-translate-x:env(safe-area-inset-left,0)}:host .top-bar{border-bottom-width:1px!important;display:flex;height:calc(env(safe-area-inset-top, 0) + 3rem);justify-content:space-between;padding:calc(env(safe-area-inset-top, 0) + .5rem) 1rem .5rem;width:100%}@media (min-width:64rem){:host .top-bar{display:none}}:host p-backdrop{display:none}:host p-backdrop.show{display:block}@media (min-width:64rem){.desktop-xs\\:relative{position:relative!important}.desktop-xs\\:flex{display:flex!important}.desktop-xs\\:hidden{display:none!important}.desktop-xs\\:h-full{height:100%!important}}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.scale-x-flip,.scale-y-flip,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}";
7
+ const navbarComponentCss = ".static{position:static!important}.fixed{position:fixed!important}.left-0{left:0!important}.top-0{top:0!important}.z-navbar{z-index:300!important}.z-navbar-backdrop{z-index:290!important}.m-0{margin:0!important}.mb-6{margin-bottom:1.5rem!important}.mt-auto{margin-top:auto!important}.block{display:block!important}.inline{display:inline!important}.flex{display:flex!important}.hidden{display:none!important}.h-screen{height:100vh!important}.w-60{width:15rem!important}.w-full{width:100%!important}.-translate-x-full{--tw-translate-x:-100%!important}.-rotate-0,.-translate-x-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-135,.-rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-225,.-rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-270,.-rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-45,.-rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-90{--tw-rotate:-90deg!important}.rotate-0{--tw-rotate:0deg!important}.rotate-0,.rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-135{--tw-rotate:135deg!important}.rotate-180{--tw-rotate:180deg!important}.rotate-180,.rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-225{--tw-rotate:225deg!important}.rotate-25{--tw-rotate:25deg!important}.rotate-25,.rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-270{--tw-rotate:270deg!important}.rotate-315{--tw-rotate:315deg!important}.rotate-315,.rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-45{--tw-rotate:45deg!important}.rotate-90{--tw-rotate:90deg!important}.rotate-90,.scale-x-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-y-flip{--tw-scale-y:-1!important}.scale-y-flip,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.transform-gpu{transform:translate3d(var(--tw-translate-x),var(--tw-translate-y),0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.justify-between{justify-content:space-between!important}.border-0{border-width:0!important}.border-b{border-bottom-width:1px!important}.border-r{border-right-width:1px!important}.border-solid{border-style:solid!important}.border-mystic-dark{--tw-border-opacity:1!important;border-color:rgb(218 230 240/var(--tw-border-opacity))!important}.px-4{padding-left:1rem!important;padding-right:1rem!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.font-semibold{font-weight:600!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}*{box-sizing:border-box}:host{width:100%}@media (min-width:64rem){:host{width:15rem}}:host .sidebar,:host .sidebar .company,:host .sidebar .content,:host .sidebar .user,:host .userbar{display:flex;flex-direction:column;width:100%}:host .sidebar,:host .top-bar{--tw-bg-opacity:1;--tw-border-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(218 230 240/var(--tw-border-opacity))!important;border-style:solid!important;border-width:0!important}:host .sidebar{--tw-bg-opacity:1;--tw-translate-x:-100%;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-right-width:1px!important;height:100vh;left:0;padding:calc(env(safe-area-inset-top, 0) + 1rem) 1rem 1rem;position:fixed;top:0;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transform:translate3d(var(--tw-translate-x),var(--tw-translate-y),0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:15rem;will-change:transform;z-index:300}@media (min-width:64rem){:host .sidebar{--tw-translate-x:0px;height:100%;position:relative;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));width:100%}}:host .sidebar .header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1.5rem;width:100%}@media (min-width:64rem){:host .sidebar .header{display:none}}:host .sidebar .content{margin-top:1.5rem}:host .sidebar .user{display:none;margin-top:auto}@media (min-width:64rem){:host .sidebar .user{display:flex}}:host .sidebar.show{--tw-translate-x:env(safe-area-inset-left,0)}:host .top-bar{border-bottom-width:1px!important;display:flex;height:calc(env(safe-area-inset-top, 0) + 3rem);justify-content:space-between;padding:calc(env(safe-area-inset-top, 0) + .5rem) 1rem .5rem;width:100%}@media (min-width:64rem){:host .top-bar{display:none}}:host p-backdrop{display:none}:host p-backdrop.show{display:block}@media (min-width:64rem){.desktop-xs\\:relative{position:relative!important}.desktop-xs\\:flex{display:flex!important}.desktop-xs\\:hidden{display:none!important}.desktop-xs\\:h-full{height:100%!important}}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.scale-x-flip,.scale-y-flip,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}";
8
8
 
9
9
  const Navbar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
10
10
  constructor() {
package/dist/components/p-navbar.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"p-navbar.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,yuQAAyuQ;;MCOvvQ,MAAM;;;;;qBAIK,OAAO;oBAKR,MAAM;qBAEI,KAAK;;EAElC,MAAM;IACF,QACI,EAAC,IAAI,IAAC,KAAK,EAAC,UAAU,IAClB,kBACI,SAAS,EAAE,IAAI,EACf,KAAK,EAAE,uCACH,IAAI,CAAC,SAAS,IAAI,MACtB,EAAE,EACF,SAAS,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,GAC/B,EACd,WAAK,KAAK,EAAE,WAAW,IAAI,CAAC,SAAS,IAAI,MAAM,EAAE,IAC7C,WAAK,KAAK,EAAC,QAAQ,IACf,SAAG,KAAK,EAAC,2CAA2C,IAC/C,IAAI,CAAC,QAAQ,CACd,EAEJ,gBACI,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,UAAU,EACf,YAAY,EAAC,KAAK,EAClB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,IAEtC,IAAI,CAAC,SAAS,CACR,CACT,EACN,WAAK,KAAK,EAAC,SAAS,IAChB,YAAM,IAAI,EAAC,SAAS,GAAG,CACrB,EACN,WAAK,KAAK,EAAC,SAAS,IAChB,YAAM,IAAI,EAAC,SAAS,GAAG,CACrB,EAEN,WAAK,KAAK,EAAC,MAAM,IACb,YAAM,IAAI,EAAC,MAAM,GAAG,CAClB,CACJ,EAEN,WAAK,KAAK,EAAC,SAAS,IAChB,gBACI,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAErC,IAAI,CAAC,QAAQ,CACP,EAEX,YAAM,IAAI,EAAC,QAAQ,GAAG,CACpB,CACH,EACT;GACL;EAGD,iBAAiB;IACb,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;GAC1B;EAGD,gBAAgB;IACZ,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;GACzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/organisms/navbar/navbar.component.scss?tag=p-navbar&encapsulation=shadow","./src/components/organisms/navbar/navbar.component.tsx"],"sourcesContent":[":host {\n @apply w-full;\n @apply desktop-xs:w-60;\n\n .sidebar,\n .sidebar .company,\n .sidebar .content,\n .sidebar .user,\n .userbar {\n @apply flex flex-col w-full;\n }\n\n .sidebar,\n .top-bar {\n @apply bg-white;\n @apply border-0 border-solid border-mystic-dark #{!important};\n }\n\n .sidebar {\n @apply bg-white fixed top-0 left-0 h-screen w-60 z-navbar;\n @apply desktop-xs:relative desktop-xs:h-full desktop-xs:w-full;\n\n @apply will-change-transform;\n @apply transform-gpu -translate-x-full desktop-xs:translate-x-0;\n\n @apply p-4;\n\n padding-top: calc(env(safe-area-inset-top, 0) + 1rem);\n\n @apply border-r #{!important};\n\n @apply transition-all;\n\n .header {\n @apply flex justify-between w-full items-center mb-6;\n @apply desktop-xs:hidden;\n }\n\n .content {\n @apply mt-6;\n }\n\n .user {\n @apply hidden mt-auto;\n @apply desktop-xs:flex;\n }\n\n &.show {\n --tw-translate-x: env(safe-area-inset-left, 0);\n }\n }\n\n .top-bar {\n @apply flex justify-between px-4 py-2 w-full;\n\n padding-top: calc(env(safe-area-inset-top, 0) + 0.5rem);\n height: calc(env(safe-area-inset-top, 0) + 3rem);\n\n @apply border-b #{!important};\n\n @apply desktop-xs:hidden;\n }\n\n p-backdrop {\n @apply hidden;\n\n &.show {\n @apply block;\n }\n }\n}\n","import { Component, h, Host, Listen, Prop, State } from '@stencil/core';\n\n@Component({\n tag: 'p-navbar',\n styleUrl: 'navbar.component.scss',\n shadow: true,\n})\nexport class Navbar {\n /**\n * The text to display for the close button\n */\n @Prop() closeText = 'Close';\n\n /**\n * The text to display for the menu button & sidebar title\n */\n @Prop() menuText = 'Menu';\n\n @State() private _showMenu = false;\n\n render() {\n return (\n <Host class=\"p-navbar\">\n <p-backdrop\n applyBlur={true}\n class={`z-navbar-backdrop desktop-xs:hidden ${\n this._showMenu && 'show'\n }`}\n onClicked={() => (this._showMenu = false)}\n ></p-backdrop>\n <div class={`sidebar ${this._showMenu && 'show'}`}>\n <div class=\"header\">\n <p class=\"text-xl m-0 font-semibold text-storm-dark\">\n {this.menuText}\n </p>\n\n <p-button\n variant=\"secondary\"\n icon=\"negative\"\n iconPosition=\"end\"\n size=\"small\"\n onClick={() => (this._showMenu = false)}\n >\n {this.closeText}\n </p-button>\n </div>\n <div class=\"company\">\n <slot name=\"company\" />\n </div>\n <div class=\"content\">\n <slot name=\"content\" />\n </div>\n\n <div class=\"user\">\n <slot name=\"user\" />\n </div>\n </div>\n\n <div class=\"top-bar\">\n <p-button\n variant=\"secondary\"\n icon=\"menu\"\n size=\"small\"\n onClick={() => (this._showMenu = true)}\n >\n {this.menuText}\n </p-button>\n\n <slot name=\"topbar\" />\n </div>\n </Host>\n );\n }\n\n @Listen('closeNavbar', { target: 'window' })\n handleCloseNavbar() {\n this._showMenu = false;\n }\n\n @Listen('openNavbar', { target: 'window' })\n handleOpenNavbar() {\n this._showMenu = true;\n }\n}\n"],"version":3}
1
+ {"file":"p-navbar.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,+nQAA+nQ;;MCO7oQ,MAAM;;;;;qBAIK,OAAO;oBAKR,MAAM;qBAEI,KAAK;;EAElC,MAAM;IACF,QACI,EAAC,IAAI,IAAC,KAAK,EAAC,UAAU,IAClB,kBACI,SAAS,EAAE,IAAI,EACf,KAAK,EAAE,uCACH,IAAI,CAAC,SAAS,IAAI,MACtB,EAAE,EACF,SAAS,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,GAC/B,EACd,WAAK,KAAK,EAAE,WAAW,IAAI,CAAC,SAAS,IAAI,MAAM,EAAE,IAC7C,WAAK,KAAK,EAAC,QAAQ,IACf,SAAG,KAAK,EAAC,2CAA2C,IAC/C,IAAI,CAAC,QAAQ,CACd,EAEJ,gBACI,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,UAAU,EACf,YAAY,EAAC,KAAK,EAClB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,IAEtC,IAAI,CAAC,SAAS,CACR,CACT,EACN,WAAK,KAAK,EAAC,SAAS,IAChB,YAAM,IAAI,EAAC,SAAS,GAAG,CACrB,EACN,WAAK,KAAK,EAAC,SAAS,IAChB,YAAM,IAAI,EAAC,SAAS,GAAG,CACrB,EAEN,WAAK,KAAK,EAAC,MAAM,IACb,YAAM,IAAI,EAAC,MAAM,GAAG,CAClB,CACJ,EAEN,WAAK,KAAK,EAAC,SAAS,IAChB,gBACI,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAErC,IAAI,CAAC,QAAQ,CACP,EAEX,YAAM,IAAI,EAAC,QAAQ,GAAG,CACpB,CACH,EACT;GACL;EAGD,iBAAiB;IACb,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;GAC1B;EAGD,gBAAgB;IACZ,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;GACzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/organisms/navbar/navbar.component.scss?tag=p-navbar&encapsulation=shadow","./src/components/organisms/navbar/navbar.component.tsx"],"sourcesContent":[":host {\n @apply w-full;\n @apply desktop-xs:w-60;\n\n .sidebar,\n .sidebar .company,\n .sidebar .content,\n .sidebar .user,\n .userbar {\n @apply flex w-full flex-col;\n }\n\n .sidebar,\n .top-bar {\n @apply bg-white;\n @apply border-0 border-solid border-mystic-dark #{!important};\n }\n\n .sidebar {\n @apply fixed top-0 left-0 z-navbar h-screen w-60 bg-white;\n @apply desktop-xs:relative desktop-xs:h-full desktop-xs:w-full;\n\n @apply will-change-transform;\n @apply -translate-x-full transform-gpu desktop-xs:translate-x-0;\n\n @apply p-4;\n\n padding-top: calc(env(safe-area-inset-top, 0) + 1rem);\n\n @apply border-r #{!important};\n\n @apply transition-all;\n\n .header {\n @apply mb-6 flex w-full items-center justify-between;\n @apply desktop-xs:hidden;\n }\n\n .content {\n @apply mt-6;\n }\n\n .user {\n @apply mt-auto hidden;\n @apply desktop-xs:flex;\n }\n\n &.show {\n --tw-translate-x: env(safe-area-inset-left, 0);\n }\n }\n\n .top-bar {\n @apply flex w-full justify-between px-4 py-2;\n\n padding-top: calc(env(safe-area-inset-top, 0) + 0.5rem);\n height: calc(env(safe-area-inset-top, 0) + 3rem);\n\n @apply border-b #{!important};\n\n @apply desktop-xs:hidden;\n }\n\n p-backdrop {\n @apply hidden;\n\n &.show {\n @apply block;\n }\n }\n}\n","import { Component, h, Host, Listen, Prop, State } from '@stencil/core';\n\n@Component({\n tag: 'p-navbar',\n styleUrl: 'navbar.component.scss',\n shadow: true,\n})\nexport class Navbar {\n /**\n * The text to display for the close button\n */\n @Prop() closeText = 'Close';\n\n /**\n * The text to display for the menu button & sidebar title\n */\n @Prop() menuText = 'Menu';\n\n @State() private _showMenu = false;\n\n render() {\n return (\n <Host class=\"p-navbar\">\n <p-backdrop\n applyBlur={true}\n class={`z-navbar-backdrop desktop-xs:hidden ${\n this._showMenu && 'show'\n }`}\n onClicked={() => (this._showMenu = false)}\n ></p-backdrop>\n <div class={`sidebar ${this._showMenu && 'show'}`}>\n <div class=\"header\">\n <p class=\"text-xl m-0 font-semibold text-storm-dark\">\n {this.menuText}\n </p>\n\n <p-button\n variant=\"secondary\"\n icon=\"negative\"\n iconPosition=\"end\"\n size=\"small\"\n onClick={() => (this._showMenu = false)}\n >\n {this.closeText}\n </p-button>\n </div>\n <div class=\"company\">\n <slot name=\"company\" />\n </div>\n <div class=\"content\">\n <slot name=\"content\" />\n </div>\n\n <div class=\"user\">\n <slot name=\"user\" />\n </div>\n </div>\n\n <div class=\"top-bar\">\n <p-button\n variant=\"secondary\"\n icon=\"menu\"\n size=\"small\"\n onClick={() => (this._showMenu = true)}\n >\n {this.menuText}\n </p-button>\n\n <slot name=\"topbar\" />\n </div>\n </Host>\n );\n }\n\n @Listen('closeNavbar', { target: 'window' })\n handleCloseNavbar() {\n this._showMenu = false;\n }\n\n @Listen('openNavbar', { target: 'window' })\n handleOpenNavbar() {\n this._showMenu = true;\n }\n}\n"],"version":3}
package/dist/esm/p-backdrop.entry.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-94339e77.js';
2
2
 
3
- const backdropComponentCss = ".static{position:static!important}.fixed{position:fixed!important}.left-0{left:0!important}.top-0{top:0!important}.z-navbar-backdrop{z-index:290!important}.m-0{margin:0!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.inline{display:inline!important}.flex{display:flex!important}.hidden{display:none!important}.h-full{height:100%!important}.w-full{width:100%!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.animate-fade-in{animation:fadeIn .2s ease forwards!important}.items-start{align-items:flex-start!important}.items-end{align-items:flex-end!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.overflow-y-auto{overflow-y:auto!important}.rounded{border-radius:.25rem!important}.p-0{padding:0!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.font-semibold{font-weight:600!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}*{box-sizing:border-box}:host{animation:fadeIn .2s ease forwards;background-color:rgba(39,40,56,.5);display:flex;height:100%;left:0;max-height:calc(100vh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0));max-width:calc(100vw - env(safe-area-inset-left, 0) - env(safe-area-inset-right, 0));overflow:hidden;position:fixed;top:0;width:100%;z-index:490}:host .content-container{align-items:flex-end;display:flex;height:100%;justify-content:center;max-height:calc(100vh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0));max-width:calc(100vw - env(safe-area-inset-left, 0) - env(safe-area-inset-right, 0));overflow-x:hidden;overflow-y:auto;width:100%}@media (min-width:40rem){:host .content-container{padding-left:4rem;padding-right:4rem}}@media (min-width:64rem){:host .content-container{align-items:center;padding:4rem}}:host(.blurred){--tw-backdrop-blur:blur(2px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}:host(.closing){animation:fadeOut .2s ease forwards}:host(.closing) .content-container{overflow:hidden}:host(.variant-drawer) .content-container{align-items:flex-start;justify-content:flex-end;padding:0}@media (min-width:40rem){:host(.variant-drawer) .content-container{padding:0}}@media (min-width:64rem){:host(.variant-drawer) .content-container{padding:0}}@media (min-width:40rem){.tablet\\:p-0{padding:0!important}.tablet\\:px-16{padding-left:4rem!important;padding-right:4rem!important}}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}@media (min-width:40rem){.tablet\\:w-80{width:20rem!important}.tablet\\:w-\\[33\\.5rem\\]{width:33.5rem!important}.tablet\\:w-\\[38rem\\]{width:38rem!important}.tablet\\:w-\\[47\\.5rem\\]{width:47.5rem!important}.tablet\\:w-\\[57\\.5rem\\]{width:57.5rem!important}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}.desktop-xs\\:hidden{display:none!important}}";
3
+ const backdropComponentCss = ".static{position:static!important}.fixed{position:fixed!important}.left-0{left:0!important}.top-0{top:0!important}.z-navbar-backdrop{z-index:290!important}.m-0{margin:0!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.inline{display:inline!important}.flex{display:flex!important}.hidden{display:none!important}.h-full{height:100%!important}.w-full{width:100%!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.animate-fade-in{animation:fadeIn .2s ease forwards!important}.items-start{align-items:flex-start!important}.items-end{align-items:flex-end!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.overflow-y-auto{overflow-y:auto!important}.rounded{border-radius:.25rem!important}.p-0{padding:0!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.font-semibold{font-weight:600!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}.max-h-screen-safe{max-height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;max-height:-webkit-fill-available!important}*{box-sizing:border-box}:host{animation:fadeIn .2s ease forwards;background-color:rgba(39,40,56,.5);display:flex;height:100%;left:0;max-height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-height:-webkit-fill-available;max-width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));max-width:-webkit-fill-available;overflow:hidden;position:fixed;top:0;width:100%;z-index:490}:host .content-container{align-items:flex-end;display:flex;height:100%;justify-content:center;max-height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-height:-webkit-fill-available;max-width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));max-width:-webkit-fill-available;overflow-x:hidden;overflow-y:auto;width:100%}@media (min-width:40rem){:host .content-container{padding-left:4rem;padding-right:4rem}}@media (min-width:64rem){:host .content-container{align-items:center;padding:4rem}}:host(.blurred){--tw-backdrop-blur:blur(2px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}:host(.closing){animation:fadeOut .2s ease forwards}:host(.closing) .content-container{overflow:hidden}:host(.variant-drawer) .content-container{align-items:flex-start;justify-content:flex-end;padding:0}@media (min-width:40rem){:host(.variant-drawer) .content-container{padding:0}}@media (min-width:64rem){:host(.variant-drawer) .content-container{padding:0}}@media (min-width:40rem){.tablet\\:p-0{padding:0!important}.tablet\\:px-16{padding-left:4rem!important;padding-right:4rem!important}}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}@media (min-width:40rem){.tablet\\:w-80{width:20rem!important}.tablet\\:w-\\[33\\.5rem\\]{width:33.5rem!important}.tablet\\:w-\\[38rem\\]{width:38rem!important}.tablet\\:w-\\[47\\.5rem\\]{width:47.5rem!important}.tablet\\:w-\\[57\\.5rem\\]{width:57.5rem!important}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}.desktop-xs\\:hidden{display:none!important}}";
4
4
 
5
5
  const Backdrop = class {
6
6
  constructor(hostRef) {
package/dist/esm/p-backdrop.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"p-backdrop.entry.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,yjPAAyjP;;MCgBzkP,QAAQ;;;;mBAIqB,OAAO;qBAKhB,KAAK;mBAKP,KAAK;sBAKF,IAAI;;EAYlC,iBAAiB;IACb,IAAI,IAAI,CAAC,UAAU,EAAE;MACjB,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;KAChE;GACJ;EAED,oBAAoB;IAChB,IAAI,IAAI,CAAC,UAAU,EAAE;MACjB,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;KACnE;GACJ;EAED,MAAM;IACF,QACI,EAAC,IAAI,IACD,KAAK,EAAE,sBAAsB,IAAI,CAAC,OAAO,IACrC,IAAI,CAAC,SAAS,IAAI,SACtB,IAAI,IAAI,CAAC,OAAO,IAAI,SAAS,EAAE,IAE/B,WAAK,KAAK,EAAC,mBAAmB,IAC1B,eAAQ,CACN,CACH,EACT;GACL;EAGD,WAAW,CAAC,EAAc;IACtB,IAAI,EAAE,CAAC,MAAM,KAAK,IAAI,CAAC,GAAG,EAAE;MACxB,OAAO;KACV;IAED,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;GACzB;;;;;;;","names":[],"sources":["./src/components/atoms/backdrop/backdrop.component.scss?tag=p-backdrop&encapsulation=shadow","./src/components/atoms/backdrop/backdrop.component.tsx"],"sourcesContent":[":host {\n @apply flex;\n @apply fixed top-0 left-0 z-backdrop;\n @apply h-full w-full;\n @apply overflow-hidden;\n @apply animate-fade-in bg-storm-dark/50;\n\n max-height: calc(\n 100vh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0)\n );\n max-width: calc(\n 100vw - env(safe-area-inset-left, 0) - env(safe-area-inset-right, 0)\n );\n\n .content-container {\n @apply h-full w-full overflow-y-auto overflow-x-hidden;\n @apply tablet:px-16 desktop-xs:p-16;\n @apply flex items-end justify-center desktop-xs:items-center;\n\n max-height: calc(\n 100vh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0)\n );\n max-width: calc(\n 100vw - env(safe-area-inset-left, 0) - env(safe-area-inset-right, 0)\n );\n }\n}\n\n:host(.blurred) {\n @apply backdrop-blur-xs;\n}\n\n:host(.closing) {\n @apply animate-fade-out;\n\n .content-container {\n @apply overflow-hidden;\n }\n}\n\n:host(.variant-drawer) {\n .content-container {\n @apply items-start justify-end;\n @apply p-0 tablet:p-0 desktop-xs:p-0;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n} from '@stencil/core';\n\n@Component({\n tag: 'p-backdrop',\n styleUrl: 'backdrop.component.scss',\n shadow: true,\n})\nexport class Backdrop {\n /**\n * The variant of the backdrop\n */\n @Prop() variant: 'modal' | 'drawer' = 'modal';\n\n /**\n * Wether to apply blur on the background of the backdrop\n */\n @Prop() applyBlur: boolean = false;\n\n /**\n * Wether the backdrop is closing\n */\n @Prop() closing: boolean = false;\n\n /**\n * Wether we should scroll lock the body\n */\n @Prop() scrollLock: boolean = true;\n\n /**\n * When the backdrop is clicked\n */\n @Event() clicked: EventEmitter<MouseEvent>;\n\n /**\n * The host element\n */\n @Element() private _el: HTMLElement;\n\n componentWillLoad() {\n if (this.scrollLock) {\n document.querySelector(':root').classList.add('scroll-lock');\n }\n }\n\n disconnectedCallback() {\n if (this.scrollLock) {\n document.querySelector(':root').classList.remove('scroll-lock');\n }\n }\n\n render() {\n return (\n <Host\n class={`p-backdrop variant-${this.variant} ${\n this.applyBlur && 'blurred'\n } ${this.closing && 'closing'}`}\n >\n <div class=\"content-container\">\n <slot />\n </div>\n </Host>\n );\n }\n\n @Listen('click', { capture: true })\n handleClick(ev: MouseEvent) {\n if (ev.target !== this._el) {\n return;\n }\n\n this.clicked.emit(ev);\n }\n}\n"],"version":3}
1
+ {"file":"p-backdrop.entry.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,g0PAAg0P;;MCgBh1P,QAAQ;;;;mBAIqB,OAAO;qBAKhB,KAAK;mBAKP,KAAK;sBAKF,IAAI;;EAYlC,iBAAiB;IACb,IAAI,IAAI,CAAC,UAAU,EAAE;MACjB,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;KAChE;GACJ;EAED,oBAAoB;IAChB,IAAI,IAAI,CAAC,UAAU,EAAE;MACjB,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;KACnE;GACJ;EAED,MAAM;IACF,QACI,EAAC,IAAI,IACD,KAAK,EAAE,sBAAsB,IAAI,CAAC,OAAO,IACrC,IAAI,CAAC,SAAS,IAAI,SACtB,IAAI,IAAI,CAAC,OAAO,IAAI,SAAS,EAAE,IAE/B,WAAK,KAAK,EAAC,mBAAmB,IAC1B,eAAQ,CACN,CACH,EACT;GACL;EAGD,WAAW,CAAC,EAAc;IACtB,IAAI,EAAE,CAAC,MAAM,KAAK,IAAI,CAAC,GAAG,EAAE;MACxB,OAAO;KACV;IAED,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;GACzB;;;;;;;","names":[],"sources":["./src/components/atoms/backdrop/backdrop.component.scss?tag=p-backdrop&encapsulation=shadow","./src/components/atoms/backdrop/backdrop.component.tsx"],"sourcesContent":[":host {\n @apply flex;\n @apply fixed top-0 left-0 z-backdrop;\n @apply h-full w-full;\n @apply overflow-hidden;\n @apply animate-fade-in bg-storm-dark/50;\n @apply max-h-screen-safe max-w-screen-safe;\n\n .content-container {\n @apply h-full w-full overflow-y-auto overflow-x-hidden;\n @apply tablet:px-16 desktop-xs:p-16;\n @apply flex items-end justify-center desktop-xs:items-center;\n @apply max-h-screen-safe max-w-screen-safe;\n }\n}\n\n:host(.blurred) {\n @apply backdrop-blur-xs;\n}\n\n:host(.closing) {\n @apply animate-fade-out;\n\n .content-container {\n @apply overflow-hidden;\n }\n}\n\n:host(.variant-drawer) {\n .content-container {\n @apply items-start justify-end;\n @apply p-0 tablet:p-0 desktop-xs:p-0;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n} from '@stencil/core';\n\n@Component({\n tag: 'p-backdrop',\n styleUrl: 'backdrop.component.scss',\n shadow: true,\n})\nexport class Backdrop {\n /**\n * The variant of the backdrop\n */\n @Prop() variant: 'modal' | 'drawer' = 'modal';\n\n /**\n * Wether to apply blur on the background of the backdrop\n */\n @Prop() applyBlur: boolean = false;\n\n /**\n * Wether the backdrop is closing\n */\n @Prop() closing: boolean = false;\n\n /**\n * Wether we should scroll lock the body\n */\n @Prop() scrollLock: boolean = true;\n\n /**\n * When the backdrop is clicked\n */\n @Event() clicked: EventEmitter<MouseEvent>;\n\n /**\n * The host element\n */\n @Element() private _el: HTMLElement;\n\n componentWillLoad() {\n if (this.scrollLock) {\n document.querySelector(':root').classList.add('scroll-lock');\n }\n }\n\n disconnectedCallback() {\n if (this.scrollLock) {\n document.querySelector(':root').classList.remove('scroll-lock');\n }\n }\n\n render() {\n return (\n <Host\n class={`p-backdrop variant-${this.variant} ${\n this.applyBlur && 'blurred'\n } ${this.closing && 'closing'}`}\n >\n <div class=\"content-container\">\n <slot />\n </div>\n </Host>\n );\n }\n\n @Listen('click', { capture: true })\n handleClick(ev: MouseEvent) {\n if (ev.target !== this._el) {\n return;\n }\n\n this.clicked.emit(ev);\n }\n}\n"],"version":3}