@paperless/core 1.26.7 → 1.27.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +22 -0
- package/dist/build/p-2786d383.entry.js +2 -0
- package/dist/build/{p-e33a73c2.entry.js.map → p-2786d383.entry.js.map} +1 -1
- package/dist/build/p-3ea2d7a2.entry.js +2 -0
- package/dist/build/{p-f34e08ec.entry.js.map → p-3ea2d7a2.entry.js.map} +1 -1
- package/dist/build/p-57a32088.entry.js +2 -0
- package/dist/build/p-57a32088.entry.js.map +1 -0
- package/dist/build/p-6cbe8dc8.entry.js +2 -0
- package/dist/build/{p-f6c6919a.entry.js.map → p-6cbe8dc8.entry.js.map} +1 -1
- package/dist/{paperless/p-424d5c8a.entry.js → build/p-7bf042c9.entry.js} +2 -2
- package/dist/{paperless/p-424d5c8a.entry.js.map → build/p-7bf042c9.entry.js.map} +1 -1
- package/dist/build/p-b848c222.entry.js +2 -0
- package/dist/{paperless/p-3a6efecd.entry.js.map → build/p-b848c222.entry.js.map} +1 -1
- package/dist/build/p-d8641c29.entry.js +2 -0
- package/dist/build/{p-d23db949.entry.js.map → p-d8641c29.entry.js.map} +1 -1
- package/dist/build/p-fe39443a.entry.js +2 -0
- package/dist/build/{p-b6f43309.entry.js.map → p-fe39443a.entry.js.map} +1 -1
- package/dist/build/paperless.css +1 -1
- package/dist/build/paperless.esm.js +1 -1
- package/dist/cjs/p-avatar.cjs.entry.js +1 -1
- package/dist/cjs/p-avatar.cjs.entry.js.map +1 -1
- package/dist/cjs/p-backdrop.cjs.entry.js +1 -1
- package/dist/cjs/p-backdrop.cjs.entry.js.map +1 -1
- package/dist/cjs/p-cropper.cjs.entry.js +1 -1
- package/dist/cjs/p-cropper.cjs.entry.js.map +1 -1
- package/dist/cjs/p-dropdown_2.cjs.entry.js +1 -1
- package/dist/cjs/p-dropdown_2.cjs.entry.js.map +1 -1
- package/dist/cjs/p-layout.cjs.entry.js +1 -1
- package/dist/cjs/p-layout.cjs.entry.js.map +1 -1
- package/dist/cjs/p-modal-body_4.cjs.entry.js +1 -1
- package/dist/cjs/p-modal-body_4.cjs.entry.js.map +1 -1
- package/dist/cjs/p-stepper-item.cjs.entry.js +1 -1
- package/dist/cjs/p-stepper-item.cjs.entry.js.map +1 -1
- package/dist/cjs/p-stepper-line.cjs.entry.js +1 -1
- package/dist/cjs/p-stepper-line.cjs.entry.js.map +1 -1
- package/dist/collection/components/atoms/avatar/avatar.component.css +1 -1
- package/dist/collection/components/atoms/backdrop/backdrop.component.css +1 -1
- package/dist/collection/components/atoms/dropdown-menu-item/dropdown-menu-item.component.css +1 -1
- package/dist/collection/components/atoms/layout/layout.component.css +1 -1
- package/dist/collection/components/atoms/modal-container/modal-container.component.css +1 -1
- package/dist/collection/components/atoms/stepper-item/stepper-item.component.css +1 -1
- package/dist/collection/components/atoms/stepper-line/stepper-line.component.css +1 -1
- package/dist/collection/components/molecules/cropper/cropper.component.css +1 -1
- package/dist/components/avatar.component.js +1 -1
- package/dist/components/avatar.component.js.map +1 -1
- package/dist/components/backdrop.component.js +1 -1
- package/dist/components/backdrop.component.js.map +1 -1
- package/dist/components/dropdown-menu-item.component.js +1 -1
- package/dist/components/dropdown-menu-item.component.js.map +1 -1
- package/dist/components/modal-container.component.js +1 -1
- package/dist/components/modal-container.component.js.map +1 -1
- package/dist/components/p-cropper.js +1 -1
- package/dist/components/p-cropper.js.map +1 -1
- package/dist/components/p-layout.js +1 -1
- package/dist/components/p-layout.js.map +1 -1
- package/dist/components/p-stepper-item.js +1 -1
- package/dist/components/p-stepper-item.js.map +1 -1
- package/dist/components/stepper-line.component.js +1 -1
- package/dist/components/stepper-line.component.js.map +1 -1
- package/dist/esm/p-avatar.entry.js +1 -1
- package/dist/esm/p-avatar.entry.js.map +1 -1
- package/dist/esm/p-backdrop.entry.js +1 -1
- package/dist/esm/p-backdrop.entry.js.map +1 -1
- package/dist/esm/p-cropper.entry.js +1 -1
- package/dist/esm/p-cropper.entry.js.map +1 -1
- package/dist/esm/p-dropdown_2.entry.js +1 -1
- package/dist/esm/p-dropdown_2.entry.js.map +1 -1
- package/dist/esm/p-layout.entry.js +1 -1
- package/dist/esm/p-layout.entry.js.map +1 -1
- package/dist/esm/p-modal-body_4.entry.js +1 -1
- package/dist/esm/p-modal-body_4.entry.js.map +1 -1
- package/dist/esm/p-stepper-item.entry.js +1 -1
- package/dist/esm/p-stepper-item.entry.js.map +1 -1
- package/dist/esm/p-stepper-line.entry.js +1 -1
- package/dist/esm/p-stepper-line.entry.js.map +1 -1
- package/dist/index.html +1 -1
- package/dist/paperless/p-2786d383.entry.js +2 -0
- package/dist/paperless/{p-e33a73c2.entry.js.map → p-2786d383.entry.js.map} +1 -1
- package/dist/paperless/p-3ea2d7a2.entry.js +2 -0
- package/dist/paperless/{p-f34e08ec.entry.js.map → p-3ea2d7a2.entry.js.map} +1 -1
- package/dist/paperless/p-57a32088.entry.js +2 -0
- package/dist/paperless/p-57a32088.entry.js.map +1 -0
- package/dist/paperless/p-6cbe8dc8.entry.js +2 -0
- package/dist/paperless/{p-f6c6919a.entry.js.map → p-6cbe8dc8.entry.js.map} +1 -1
- package/dist/{build/p-424d5c8a.entry.js → paperless/p-7bf042c9.entry.js} +2 -2
- package/dist/{build/p-424d5c8a.entry.js.map → paperless/p-7bf042c9.entry.js.map} +1 -1
- package/dist/paperless/p-b848c222.entry.js +2 -0
- package/dist/{build/p-3a6efecd.entry.js.map → paperless/p-b848c222.entry.js.map} +1 -1
- package/dist/paperless/p-d8641c29.entry.js +2 -0
- package/dist/paperless/{p-d23db949.entry.js.map → p-d8641c29.entry.js.map} +1 -1
- package/dist/paperless/p-fe39443a.entry.js +2 -0
- package/dist/paperless/{p-b6f43309.entry.js.map → p-fe39443a.entry.js.map} +1 -1
- package/dist/paperless/paperless.css +249 -27
- package/dist/paperless/paperless.esm.js +1 -1
- package/dist/sw.js +1 -1
- package/dist/sw.js.map +1 -1
- package/hydrate/index.js +8 -8
- package/package.json +2 -2
- package/dist/build/p-3a6efecd.entry.js +0 -2
- package/dist/build/p-4cc872f7.entry.js +0 -2
- package/dist/build/p-4cc872f7.entry.js.map +0 -1
- package/dist/build/p-b6f43309.entry.js +0 -2
- package/dist/build/p-d23db949.entry.js +0 -2
- package/dist/build/p-e33a73c2.entry.js +0 -2
- package/dist/build/p-f34e08ec.entry.js +0 -2
- package/dist/build/p-f6c6919a.entry.js +0 -2
- package/dist/paperless/p-3a6efecd.entry.js +0 -2
- package/dist/paperless/p-4cc872f7.entry.js +0 -2
- package/dist/paperless/p-4cc872f7.entry.js.map +0 -1
- package/dist/paperless/p-b6f43309.entry.js +0 -2
- package/dist/paperless/p-d23db949.entry.js +0 -2
- package/dist/paperless/p-e33a73c2.entry.js +0 -2
- package/dist/paperless/p-f34e08ec.entry.js +0 -2
- package/dist/paperless/p-f6c6919a.entry.js +0 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,28 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.27.1](https://github.com/ionic-team/stencil-component-starter/compare/v1.27.0...v1.27.1) (2024-03-19)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **Atoms/Layout:** Remove background color used for debugging ([441d343](https://github.com/ionic-team/stencil-component-starter/commit/441d3433913e58492a34d17e93a626bbabf80e93))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
# [1.27.0](https://github.com/ionic-team/stencil-component-starter/compare/v1.26.7...v1.27.0) (2024-03-18)
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Features
|
|
21
|
+
|
|
22
|
+
* **Atoms/Layout:** Auto height adjustment for content ([4acad57](https://github.com/ionic-team/stencil-component-starter/commit/4acad572331884353a0071e0e673da30ea9cad2b))
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
6
28
|
## [1.26.7](https://github.com/ionic-team/stencil-component-starter/compare/v1.26.5...v1.26.7) (2024-03-07)
|
|
7
29
|
|
|
8
30
|
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,h as r,H as o,c as a}from"./p-e4d5e7a7.js";const i=".rounded-b-none{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.p-0{padding:0!important}.px-6{padding-left:1.5rem!important;padding-right:1.5rem!important}.py-6{padding-bottom:1.5rem!important;padding-top:1.5rem!important}*{box-sizing:border-box}:host{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));padding:1.5rem}@media (min-width:40rem){:host{padding-left:2.5rem;padding-right:2.5rem}}@media (min-width:64rem){:host{padding-left:3.5rem;padding-right:3.5rem}}:host(.variant-table){padding-left:1.5rem;padding-right:1.5rem}:host(.variant-table-flush){padding:0!important}:host(.is-rounded){border-bottom-left-radius:0;border-bottom-right-radius:0}@media (min-width:64rem){:host(.is-rounded){border-bottom-left-radius:.75rem;border-bottom-right-radius:.75rem}}:host(.no-padding){padding:0}@media (min-width:40rem){.tablet\\:px-10{padding-left:2.5rem!important;padding-right:2.5rem!important}}.static{position:static!important}.rounded{border-radius:.25rem!important}";const e=class{constructor(r){t(this,r);this.variant="default";this.rounded=false;this.padding=true}render(){return r(o,{class:`p-modal-body variant-${this.variant} ${this.rounded&&"is-rounded"} ${!this.padding&&"no-padding"}`},r("slot",null))}};e.style=i;const m=".flex{display:flex!important}.w-full{width:100%!important}.animate-slide-in-bottom{animation:slideInBottom .5s ease forwards!important}.animate-slide-out-bottom{animation:slideOutBottom .5s ease forwards!important}.flex-col{flex-direction:column!important}.rounded-b-none{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.rounded-t-xxlarge{border-top-left-radius:.75rem!important;border-top-right-radius:.75rem!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-modal-container{--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:slideInBottom .5s ease forwards!important;border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:.75rem;border-top-right-radius:.75rem;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;width:100%;z-index:600}@media (min-width:40rem){p-modal-container{width:auto}}@media (min-width:64rem){p-modal-container{animation:slideInBottomSmall .5s ease forwards!important;border-bottom-left-radius:.75rem;border-bottom-right-radius:.75rem;margin:auto}}@keyframes slideInBottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideOutBottom{0%{transform:translateY(0)}to{transform:translateY(100%)}}p-modal-container.closing{animation:slideOutBottom .5s ease forwards!important}@media (min-width:64rem){p-modal-container.closing{animation:slideOutBottomSmall .5s ease forwards!important}}@media (min-width:40rem){.tablet\\:w-auto{width:auto!important}}@media (min-width:64rem){@keyframes slideInBottomSmall{0%{transform:translateY(20%)}to{transform:translateY(0)}}.desktop-xs\\:animate-slide-in-bottom-small{animation:slideInBottomSmall .5s ease forwards!important}@keyframes slideOutBottomSmall{0%{transform:translateY(0)}to{transform:translateY(20%)}}.desktop-xs\\:animate-slide-out-bottom-small{animation:slideOutBottomSmall .5s ease forwards!important}}.static{position:static!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}}";const n={xs:"tablet:w-80",sm:"tablet:w-[33.5rem]",md:"tablet:w-[38rem]",lg:"tablet:w-[47.5rem]",xl:"tablet:w-[57.5rem]"};const d=class{constructor(r){t(this,r);this.size="md";this.closing=false}render(){const t=n[this.size];return r(o,{class:`p-modal-container ${this.closing&&"closing"} ${t}`},r("slot",null))}};d.style=m;const s=".flex{display:flex!important}.rounded-b-none{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.pb-6{padding-bottom:1.5rem!important}*{box-sizing:border-box}:host{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-bottom-left-radius:0;border-bottom-right-radius:0;display:flex;flex-direction:column;padding-bottom:1.5rem;padding-left:1.5rem;padding-right:1.5rem}@media (min-width:64rem){:host{border-bottom-left-radius:.75rem;border-bottom-right-radius:.75rem}}.static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.hidden{display:none!important}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}";const l=class{constructor(r){t(this,r)}render(){return r(o,{class:"p-modal-footer"},r("p-divider",{class:"mb-6 mt-0 hidden desktop-xs:flex"}),r("slot",null))}};l.style=s;const p=".flex{display:flex!important}.justify-between{justify-content:space-between!important}.bg-mystic{--tw-bg-opacity:1!important;background-color:rgb(247 250 252/var(--tw-bg-opacity))!important}.p-4{padding:1rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}*{box-sizing:border-box}:host{--tw-bg-opacity:1;--tw-text-opacity:1;align-items:center;background-color:rgb(247 250 252/var(--tw-bg-opacity));border-top-left-radius:.75rem;border-top-right-radius:.75rem;color:rgb(39 40 56/var(--tw-text-opacity));display:flex;font-size:1.25rem;font-weight:600;justify-content:space-between;line-height:1.75rem;padding:1rem}@media (min-width:64rem){:host{font-size:1.875rem;font-weight:700;line-height:2.25rem;padding:1.5rem}}@media (min-width:64rem){.desktop-xs\\:text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}}.static{position:static!important}";const b=class{constructor(r){t(this,r);this.close=a(this,"close",3);this.showClose=true}render(){return r(o,{class:"p-modal-header"},r("span",null,r("slot",null)),this.showClose&&r("p-button",{variant:"secondary",icon:"negative",iconOnly:true,onClick:t=>this.close.emit(t),size:"small"}))}};b.style=p;export{e as p_modal_body,d as p_modal_container,l as p_modal_footer,b as p_modal_header};
|
|
2
|
+
//# sourceMappingURL=p-2786d383.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["modalBodyComponentCss","ModalBody","render","h","Host","class","this","variant","rounded","padding","modalContainerComponentCss","modalSizes","xs","sm","md","lg","xl","ModalContainer","sizeClass","size","closing","modalFooterComponentCss","ModalFooter","modalHeaderComponentCss","ModalHeader","showClose","icon","iconOnly","onClick","ev","close","emit"],"sources":["src/components/atoms/modal-body/modal-body.component.scss?tag=p-modal-body&encapsulation=shadow","src/components/atoms/modal-body/modal-body.component.tsx","src/components/atoms/modal-container/modal-container.component.scss?tag=p-modal-container","src/components/atoms/modal-container/modal-container.component.tsx","src/components/atoms/modal-footer/modal-footer.component.scss?tag=p-modal-footer&encapsulation=shadow","src/components/atoms/modal-footer/modal-footer.component.tsx","src/components/atoms/modal-header/modal-header.component.scss?tag=p-modal-header&encapsulation=shadow","src/components/atoms/modal-header/modal-header.component.tsx"],"sourcesContent":[":host {\n\t@apply bg-white;\n\t@apply px-6 py-6 tablet:px-10 desktop-xs:px-14;\n}\n\n:host(.variant-table) {\n\t@apply px-6;\n}\n\n:host(.variant-table-flush) {\n\t@apply p-0 #{!important};\n}\n\n:host(.is-rounded) {\n\t@apply rounded-b-none desktop-xs:rounded-b-xxlarge;\n}\n\n:host(.no-padding) {\n\t@apply p-0;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n\ttag: 'p-modal-body',\n\tstyleUrl: 'modal-body.component.scss',\n\tshadow: true,\n})\nexport class ModalBody {\n\t/**\n\t * The variant of the modal body\n\t */\n\t@Prop() variant: 'default' | 'table' | 'table-flush' = 'default';\n\n\t/**\n\t * Wether the modal body should be rounded at the bottom\n\t */\n\t@Prop() rounded: boolean = false;\n\n\t/**\n\t * Wether the body should have padding\n\t */\n\t@Prop() padding: boolean = true;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={`p-modal-body variant-${this.variant} ${\n\t\t\t\t\tthis.rounded && 'is-rounded'\n\t\t\t\t} ${!this.padding && 'no-padding'}`}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n","p-modal-container {\n\t@apply flex flex-col w-full tablet:w-auto z-modal;\n\t@apply rounded-b-none rounded-t-xxlarge desktop-xs:rounded-b-xxlarge;\n\n\t@apply desktop-xs:m-auto;\n\n\t@apply animate-slide-in-bottom desktop-xs:animate-slide-in-bottom-small #{!important};\n\n\t@apply shadow-4 #{!important};\n\n\t&.closing {\n\t\t@apply animate-slide-out-bottom desktop-xs:animate-slide-out-bottom-small #{!important};\n\t}\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n// $modal-xs: 20rem;\n// $modal-sm: 33.5rem;\n// $modal-md: 38rem;\n// $modal-lg: 47.5rem;\n// $modal-xl: 57.5rem;\n\nconst modalSizes = {\n\txs: 'tablet:w-80',\n\tsm: 'tablet:w-[33.5rem]',\n\tmd: 'tablet:w-[38rem]',\n\tlg: 'tablet:w-[47.5rem]',\n\txl: 'tablet:w-[57.5rem]',\n};\n@Component({\n\ttag: 'p-modal-container',\n\tstyleUrl: 'modal-container.component.scss',\n})\nexport class ModalContainer {\n\t/**\n\t * The size of the modal container\n\t */\n\t@Prop() size: 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n\t/**\n\t * Wether the container is closing\n\t */\n\t@Prop() closing: boolean = false;\n\n\trender() {\n\t\tconst sizeClass = modalSizes[this.size];\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={`p-modal-container ${\n\t\t\t\t\tthis.closing && 'closing'\n\t\t\t\t} ${sizeClass}`}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n",":host {\n\t@apply bg-white;\n\t@apply flex flex-col;\n\t@apply pb-6 px-6;\n\t@apply rounded-b-none desktop-xs:rounded-b-xxlarge;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n\ttag: 'p-modal-footer',\n\tstyleUrl: 'modal-footer.component.scss',\n\tshadow: true,\n})\nexport class ModalFooter {\n\trender() {\n\t\treturn (\n\t\t\t<Host class=\"p-modal-footer\">\n\t\t\t\t<p-divider class=\"mb-6 mt-0 hidden desktop-xs:flex\" />\n\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n",":host {\n\t@apply bg-mystic rounded-t-xxlarge;\n\t@apply flex justify-between items-center;\n\t@apply p-4 desktop-xs:p-6;\n\n\t@apply text-storm-dark text-xl font-semibold;\n\t@apply desktop-xs:text-3xl desktop-xs:font-bold;\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n@Component({\n\ttag: 'p-modal-header',\n\tstyleUrl: 'modal-header.component.scss',\n\tshadow: true,\n})\nexport class ModalHeader {\n\t/**\n\t * Wether to show the close button on mobile\n\t */\n\t@Prop() showClose = true;\n\n\t/**\n\t * Close click event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tclose: EventEmitter<MouseEvent>;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class=\"p-modal-header\">\n\t\t\t\t<span>\n\t\t\t\t\t<slot />\n\t\t\t\t</span>\n\n\t\t\t\t{this.showClose && (\n\t\t\t\t\t<p-button\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\ticon=\"negative\"\n\t\t\t\t\t\ticonOnly={true}\n\t\t\t\t\t\tonClick={(ev) => this.close.emit(ev)}\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t></p-button>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":"yDAAA,MAAMA,EAAwB,ggC,MCOjBC,EAAS,M,sCAIkC,U,aAK5B,M,aAKA,I,CAE3B,MAAAC,GACC,OACCC,EAACC,EAAI,CACJC,MAAO,wBAAwBC,KAAKC,WACnCD,KAAKE,SAAW,iBACZF,KAAKG,SAAW,gBAErBN,EAAA,a,aC9BJ,MAAMO,EAA6B,
|
|
1
|
+
{"version":3,"names":["modalBodyComponentCss","ModalBody","render","h","Host","class","this","variant","rounded","padding","modalContainerComponentCss","modalSizes","xs","sm","md","lg","xl","ModalContainer","sizeClass","size","closing","modalFooterComponentCss","ModalFooter","modalHeaderComponentCss","ModalHeader","showClose","icon","iconOnly","onClick","ev","close","emit"],"sources":["src/components/atoms/modal-body/modal-body.component.scss?tag=p-modal-body&encapsulation=shadow","src/components/atoms/modal-body/modal-body.component.tsx","src/components/atoms/modal-container/modal-container.component.scss?tag=p-modal-container","src/components/atoms/modal-container/modal-container.component.tsx","src/components/atoms/modal-footer/modal-footer.component.scss?tag=p-modal-footer&encapsulation=shadow","src/components/atoms/modal-footer/modal-footer.component.tsx","src/components/atoms/modal-header/modal-header.component.scss?tag=p-modal-header&encapsulation=shadow","src/components/atoms/modal-header/modal-header.component.tsx"],"sourcesContent":[":host {\n\t@apply bg-white;\n\t@apply px-6 py-6 tablet:px-10 desktop-xs:px-14;\n}\n\n:host(.variant-table) {\n\t@apply px-6;\n}\n\n:host(.variant-table-flush) {\n\t@apply p-0 #{!important};\n}\n\n:host(.is-rounded) {\n\t@apply rounded-b-none desktop-xs:rounded-b-xxlarge;\n}\n\n:host(.no-padding) {\n\t@apply p-0;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n\ttag: 'p-modal-body',\n\tstyleUrl: 'modal-body.component.scss',\n\tshadow: true,\n})\nexport class ModalBody {\n\t/**\n\t * The variant of the modal body\n\t */\n\t@Prop() variant: 'default' | 'table' | 'table-flush' = 'default';\n\n\t/**\n\t * Wether the modal body should be rounded at the bottom\n\t */\n\t@Prop() rounded: boolean = false;\n\n\t/**\n\t * Wether the body should have padding\n\t */\n\t@Prop() padding: boolean = true;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={`p-modal-body variant-${this.variant} ${\n\t\t\t\t\tthis.rounded && 'is-rounded'\n\t\t\t\t} ${!this.padding && 'no-padding'}`}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n","p-modal-container {\n\t@apply flex flex-col w-full tablet:w-auto z-modal;\n\t@apply rounded-b-none rounded-t-xxlarge desktop-xs:rounded-b-xxlarge;\n\n\t@apply desktop-xs:m-auto;\n\n\t@apply animate-slide-in-bottom desktop-xs:animate-slide-in-bottom-small #{!important};\n\n\t@apply shadow-4 #{!important};\n\n\t&.closing {\n\t\t@apply animate-slide-out-bottom desktop-xs:animate-slide-out-bottom-small #{!important};\n\t}\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n// $modal-xs: 20rem;\n// $modal-sm: 33.5rem;\n// $modal-md: 38rem;\n// $modal-lg: 47.5rem;\n// $modal-xl: 57.5rem;\n\nconst modalSizes = {\n\txs: 'tablet:w-80',\n\tsm: 'tablet:w-[33.5rem]',\n\tmd: 'tablet:w-[38rem]',\n\tlg: 'tablet:w-[47.5rem]',\n\txl: 'tablet:w-[57.5rem]',\n};\n@Component({\n\ttag: 'p-modal-container',\n\tstyleUrl: 'modal-container.component.scss',\n})\nexport class ModalContainer {\n\t/**\n\t * The size of the modal container\n\t */\n\t@Prop() size: 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n\t/**\n\t * Wether the container is closing\n\t */\n\t@Prop() closing: boolean = false;\n\n\trender() {\n\t\tconst sizeClass = modalSizes[this.size];\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={`p-modal-container ${\n\t\t\t\t\tthis.closing && 'closing'\n\t\t\t\t} ${sizeClass}`}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n",":host {\n\t@apply bg-white;\n\t@apply flex flex-col;\n\t@apply pb-6 px-6;\n\t@apply rounded-b-none desktop-xs:rounded-b-xxlarge;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n\ttag: 'p-modal-footer',\n\tstyleUrl: 'modal-footer.component.scss',\n\tshadow: true,\n})\nexport class ModalFooter {\n\trender() {\n\t\treturn (\n\t\t\t<Host class=\"p-modal-footer\">\n\t\t\t\t<p-divider class=\"mb-6 mt-0 hidden desktop-xs:flex\" />\n\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n",":host {\n\t@apply bg-mystic rounded-t-xxlarge;\n\t@apply flex justify-between items-center;\n\t@apply p-4 desktop-xs:p-6;\n\n\t@apply text-storm-dark text-xl font-semibold;\n\t@apply desktop-xs:text-3xl desktop-xs:font-bold;\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n@Component({\n\ttag: 'p-modal-header',\n\tstyleUrl: 'modal-header.component.scss',\n\tshadow: true,\n})\nexport class ModalHeader {\n\t/**\n\t * Wether to show the close button on mobile\n\t */\n\t@Prop() showClose = true;\n\n\t/**\n\t * Close click event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tclose: EventEmitter<MouseEvent>;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class=\"p-modal-header\">\n\t\t\t\t<span>\n\t\t\t\t\t<slot />\n\t\t\t\t</span>\n\n\t\t\t\t{this.showClose && (\n\t\t\t\t\t<p-button\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\ticon=\"negative\"\n\t\t\t\t\t\ticonOnly={true}\n\t\t\t\t\t\tonClick={(ev) => this.close.emit(ev)}\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t></p-button>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":"yDAAA,MAAMA,EAAwB,ggC,MCOjBC,EAAS,M,sCAIkC,U,aAK5B,M,aAKA,I,CAE3B,MAAAC,GACC,OACCC,EAACC,EAAI,CACJC,MAAO,wBAAwBC,KAAKC,WACnCD,KAAKE,SAAW,iBACZF,KAAKG,SAAW,gBAErBN,EAAA,a,aC9BJ,MAAMO,EAA6B,6rFCQnC,MAAMC,EAAa,CAClBC,GAAI,cACJC,GAAI,qBACJC,GAAI,mBACJC,GAAI,qBACJC,GAAI,sB,MAMQC,EAAc,M,mCAIgB,K,aAKf,K,CAE3B,MAAAf,GACC,MAAMgB,EAAYP,EAAWL,KAAKa,MAElC,OACChB,EAACC,EAAI,CACJC,MAAO,qBACNC,KAAKc,SAAW,aACbF,KAEJf,EAAA,a,aCvCJ,MAAMkB,EAA0B,+sB,MCOnBC,EAAW,M,yBACvB,MAAApB,GACC,OACCC,EAACC,EAAI,CAACC,MAAM,kBACXF,EAAA,aAAWE,MAAM,qCAEjBF,EAAA,a,aCbJ,MAAMoB,EAA0B,49B,MCOnBC,EAAW,M,qEAIH,I,CAUpB,MAAAtB,GACC,OACCC,EAACC,EAAI,CAACC,MAAM,kBACXF,EAAA,YACCA,EAAA,cAGAG,KAAKmB,WACLtB,EAAA,YACCI,QAAQ,YACRmB,KAAK,WACLC,SAAU,KACVC,QAAUC,GAAOvB,KAAKwB,MAAMC,KAAKF,GACjCV,KAAK,U"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,h as e,H as a}from"./p-e4d5e7a7.js";const i=".inline-flex{display:inline-flex!important}.h-16{height:4rem!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.h-\\[3\\.125rem\\]{height:3.125rem!important}.h-\\[6\\.5rem\\]{height:6.5rem!important}.w-16{width:4rem!important}.w-6{width:1.5rem!important}.w-8{width:2rem!important}.w-\\[3\\.125rem\\]{width:3.125rem!important}.w-\\[6\\.5rem\\]{width:6.5rem!important}.flex-shrink-0{flex-shrink:0!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.overflow-hidden{overflow:hidden!important}.rounded{border-radius:.25rem!important}.object-cover{object-fit:cover!important}.text-\\[0\\.625rem\\]{font-size:.625rem!important}.font-semibold{font-weight:600!important}.uppercase{text-transform:uppercase!important}*{box-sizing:border-box}p-avatar{--tw-bg-opacity:1;--tw-text-opacity:1;align-items:center;background-color:rgb(241 246 255/var(--tw-bg-opacity));color:rgb(176 178 203/var(--tw-text-opacity));display:inline-flex;flex-shrink:0;font-weight:600;justify-content:center;overflow:hidden;text-transform:uppercase}p-avatar>img{object-fit:cover;object-position:center}p-avatar[size=xsmall]{font-size:.625rem}p-avatar[size=xsmall],p-avatar[size=xsmall]>img{height:1.5rem;width:1.5rem}p-avatar[size=small]{font-size:.75rem;line-height:1rem}p-avatar[size=small],p-avatar[size=small]>img{height:2rem;width:2rem}p-avatar[size=medium]{font-size:1rem;line-height:1.5rem}p-avatar[size=medium],p-avatar[size=medium]>img{height:3.125rem;width:3.125rem}p-avatar[size=large]{font-size:1rem;line-height:1.5rem}p-avatar[size=large],p-avatar[size=large]>img{height:4rem;width:4rem}p-avatar[size=xlarge]{font-size:1rem;line-height:1.5rem}p-avatar[size=xlarge],p-avatar[size=xlarge]>img{height:6.5rem;width:6.5rem}p-avatar[variant=company]{border-radius:.25rem}p-avatar[variant=company][size=large],p-avatar[variant=company][size=medium],p-avatar[variant=company][size=xlarge]{border-radius:.375rem}p-avatar[variant=user]{border-radius:100%}.static{position:static!important}";const r=class{constructor(e){t(this,e);this.variant="user";this.size="medium";this.defaultImage=undefined;this.src=undefined;this.letters=undefined;this._src=undefined;this._failed=false}onSrchChange(t){this._failed=false;this._src=t}componentWillLoad(){this.onSrchChange(this.src);if(!this._src){this._setDefaultLink()}}render(){var t;return e(a,{class:"p-avatar"},this._failed&&((t=this.letters)===null||t===void 0?void 0:t.length)?this.letters:e("img",{src:this._src,onError:()=>this._setDefaultLink()}))}_setDefaultLink(){var t;this._failed=true;this._src=(t=this.defaultImage)!==null&&t!==void 0?t:this.variant==="user"?"/assets/images/avatar/user-default.svg":"/assets/images/avatar/company-default.svg"}static get watchers(){return{src:["onSrchChange"]}}};r.style=i;export{r as p_avatar};
|
|
2
|
+
//# sourceMappingURL=p-3ea2d7a2.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["avatarComponentCss","Avatar","onSrchChange","src","this","_failed","_src","componentWillLoad","_setDefaultLink","render","h","Host","class","_a","letters","length","onError","defaultImage","variant"],"sources":["src/components/atoms/avatar/avatar.component.scss?tag=p-avatar","src/components/atoms/avatar/avatar.component.tsx"],"sourcesContent":["p-avatar {\n\t@apply inline-flex flex-shrink-0 items-center justify-center overflow-hidden bg-indigo-light;\n\t@apply font-semibold uppercase text-storm-light;\n\n\t> img {\n\t\t@apply object-cover object-center;\n\t}\n\n\t&[size='xsmall'] {\n\t\t@apply h-6 w-6 text-[0.625rem];\n\n\t\t> img {\n\t\t\t@apply h-6 w-6;\n\t\t}\n\t}\n\n\t&[size='small'] {\n\t\t@apply h-8 w-8 text-xs;\n\n\t\t> img {\n\t\t\t@apply h-8 w-8;\n\t\t}\n\t}\n\n\t&[size='medium'] {\n\t\t@apply h-[3.125rem] w-[3.125rem] text-base;\n\n\t\t> img {\n\t\t\t@apply h-[3.125rem] w-[3.125rem];\n\t\t}\n\t}\n\n\t&[size='large'] {\n\t\t@apply h-16 w-16 text-base;\n\n\t\t> img {\n\t\t\t@apply h-16 w-16;\n\t\t}\n\t}\n\n\t&[size='xlarge'] {\n\t\t@apply h-[6.5rem] w-[6.5rem] text-base;\n\n\t\t> img {\n\t\t\t@apply h-[6.5rem] w-[6.5rem];\n\t\t}\n\t}\n\n\t&[variant='company'] {\n\t\t@apply rounded;\n\n\t\t&[size='medium'],\n\t\t&[size='large'],\n\t\t&[size='xlarge'] {\n\t\t\t@apply rounded-large;\n\t\t}\n\t}\n\n\t&[variant='user'] {\n\t\t@apply rounded-round;\n\t}\n}\n","import { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n\ttag: 'p-avatar',\n\tstyleUrl: 'avatar.component.scss',\n\t// shadow: true,\n})\nexport class Avatar {\n\t/**\n\t * The variant of the avatar\n\t */\n\t@Prop({ reflect: true }) variant: 'user' | 'company' = 'user';\n\n\t/**\n\t * The size of the avatar\n\t */\n\t@Prop({ reflect: true }) size:\n\t\t| 'xsmall'\n\t\t| 'small'\n\t\t| 'medium'\n\t\t| 'large'\n\t\t| 'xlarge' = 'medium';\n\n\t/**\n\t * The default image to show on errors\n\t */\n\t@Prop() defaultImage: string;\n\n\t/**\n\t * The image used for the avatar\n\t */\n\t@Prop() src!: string;\n\n\t/**\n\t * The letters to show on the empty state variant\n\t */\n\t@Prop() letters: string;\n\n\t@State() private _src: string;\n\t@State() private _failed: boolean = false;\n\n\t@Watch('src')\n\tonSrchChange(src: string) {\n\t\tthis._failed = false;\n\t\tthis._src = src;\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.onSrchChange(this.src);\n\t\tif (!this._src) {\n\t\t\tthis._setDefaultLink();\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class=\"p-avatar\">\n\t\t\t\t{this._failed && this.letters?.length ? (\n\t\t\t\t\tthis.letters\n\t\t\t\t) : (\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc={this._src}\n\t\t\t\t\t\tonError={() => this._setDefaultLink()}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _setDefaultLink() {\n\t\tthis._failed = true;\n\t\tthis._src =\n\t\t\tthis.defaultImage ??\n\t\t\t(this.variant === 'user'\n\t\t\t\t? '/assets/images/avatar/user-default.svg'\n\t\t\t\t: '/assets/images/avatar/company-default.svg');\n\t}\n}\n"],"mappings":"kDAAA,MAAMA,EAAqB,
|
|
1
|
+
{"version":3,"names":["avatarComponentCss","Avatar","onSrchChange","src","this","_failed","_src","componentWillLoad","_setDefaultLink","render","h","Host","class","_a","letters","length","onError","defaultImage","variant"],"sources":["src/components/atoms/avatar/avatar.component.scss?tag=p-avatar","src/components/atoms/avatar/avatar.component.tsx"],"sourcesContent":["p-avatar {\n\t@apply inline-flex flex-shrink-0 items-center justify-center overflow-hidden bg-indigo-light;\n\t@apply font-semibold uppercase text-storm-light;\n\n\t> img {\n\t\t@apply object-cover object-center;\n\t}\n\n\t&[size='xsmall'] {\n\t\t@apply h-6 w-6 text-[0.625rem];\n\n\t\t> img {\n\t\t\t@apply h-6 w-6;\n\t\t}\n\t}\n\n\t&[size='small'] {\n\t\t@apply h-8 w-8 text-xs;\n\n\t\t> img {\n\t\t\t@apply h-8 w-8;\n\t\t}\n\t}\n\n\t&[size='medium'] {\n\t\t@apply h-[3.125rem] w-[3.125rem] text-base;\n\n\t\t> img {\n\t\t\t@apply h-[3.125rem] w-[3.125rem];\n\t\t}\n\t}\n\n\t&[size='large'] {\n\t\t@apply h-16 w-16 text-base;\n\n\t\t> img {\n\t\t\t@apply h-16 w-16;\n\t\t}\n\t}\n\n\t&[size='xlarge'] {\n\t\t@apply h-[6.5rem] w-[6.5rem] text-base;\n\n\t\t> img {\n\t\t\t@apply h-[6.5rem] w-[6.5rem];\n\t\t}\n\t}\n\n\t&[variant='company'] {\n\t\t@apply rounded;\n\n\t\t&[size='medium'],\n\t\t&[size='large'],\n\t\t&[size='xlarge'] {\n\t\t\t@apply rounded-large;\n\t\t}\n\t}\n\n\t&[variant='user'] {\n\t\t@apply rounded-round;\n\t}\n}\n","import { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n\ttag: 'p-avatar',\n\tstyleUrl: 'avatar.component.scss',\n\t// shadow: true,\n})\nexport class Avatar {\n\t/**\n\t * The variant of the avatar\n\t */\n\t@Prop({ reflect: true }) variant: 'user' | 'company' = 'user';\n\n\t/**\n\t * The size of the avatar\n\t */\n\t@Prop({ reflect: true }) size:\n\t\t| 'xsmall'\n\t\t| 'small'\n\t\t| 'medium'\n\t\t| 'large'\n\t\t| 'xlarge' = 'medium';\n\n\t/**\n\t * The default image to show on errors\n\t */\n\t@Prop() defaultImage: string;\n\n\t/**\n\t * The image used for the avatar\n\t */\n\t@Prop() src!: string;\n\n\t/**\n\t * The letters to show on the empty state variant\n\t */\n\t@Prop() letters: string;\n\n\t@State() private _src: string;\n\t@State() private _failed: boolean = false;\n\n\t@Watch('src')\n\tonSrchChange(src: string) {\n\t\tthis._failed = false;\n\t\tthis._src = src;\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.onSrchChange(this.src);\n\t\tif (!this._src) {\n\t\t\tthis._setDefaultLink();\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class=\"p-avatar\">\n\t\t\t\t{this._failed && this.letters?.length ? (\n\t\t\t\t\tthis.letters\n\t\t\t\t) : (\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc={this._src}\n\t\t\t\t\t\tonError={() => this._setDefaultLink()}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _setDefaultLink() {\n\t\tthis._failed = true;\n\t\tthis._src =\n\t\t\tthis.defaultImage ??\n\t\t\t(this.variant === 'user'\n\t\t\t\t? '/assets/images/avatar/user-default.svg'\n\t\t\t\t: '/assets/images/avatar/company-default.svg');\n\t}\n}\n"],"mappings":"kDAAA,MAAMA,EAAqB,0+D,MCOdC,EAAM,M,sCAIqC,O,UAUzC,S,uGAkBsB,K,CAGpC,YAAAC,CAAaC,GACZC,KAAKC,QAAU,MACfD,KAAKE,KAAOH,C,CAGb,iBAAAI,GACCH,KAAKF,aAAaE,KAAKD,KACvB,IAAKC,KAAKE,KAAM,CACfF,KAAKI,iB,EAIP,MAAAC,G,MACC,OACCC,EAACC,EAAI,CAACC,MAAM,YACVR,KAAKC,WAAWQ,EAAAT,KAAKU,WAAO,MAAAD,SAAA,SAAAA,EAAEE,QAC9BX,KAAY,QAEZM,EAAA,OACCP,IAAKC,KAAKE,KACVU,QAAS,IAAMZ,KAAKI,oB,CAOjB,eAAAA,G,MACPJ,KAAKC,QAAU,KACfD,KAAKE,MACJO,EAAAT,KAAKa,gBAAY,MAAAJ,SAAA,EAAAA,EAChBT,KAAKc,UAAY,OACf,yCACA,2C"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,h as e,H as i}from"./p-e4d5e7a7.js";const n='.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-dvh{height:100dvh!important}.h-full{height:100%!important}.w-full{width:100%!important}.w-unset{width:unset!important}.flex-1{flex:1 1 0%!important}.flex-col{flex-direction:column!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{display:grid;gap:0;grid-template-areas:"sidebar" "topbar" "content";grid-template-columns:1fr;grid-template-rows:repeat(2,min-content) 1fr;height:100dvh;width:100dvw}@media (min-width:80rem){:host{grid-template-areas:"topbar topbar" "sidebar content";grid-template-columns:auto 1fr;grid-template-rows:min-content 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}}@media (min-width:105rem){:host .sidebar{width:18rem}}:host .content{display:flex;flex-direction:column;grid-area:content;height:100%;order:3;overflow-x:hidden;overflow-y:auto;padding:1.5rem 1rem;position:relative}@media (min-width:40rem){:host .content{padding:2rem}}@media (min-width:80rem){:host .content{padding:2rem 1.5rem 1.5rem}}@media (min-width:90rem){:host .content{padding:2rem}}@media (min-width:120rem){:host .content{padding-bottom:5rem;padding-left:5rem;padding-right:2rem}}@media (min-width:160rem){:host .content{padding-bottom:7.5rem;padding-left:7.5rem;padding-top:4rem}}:host .content .inner-content{flex:1 1 0%;position:relative}@media (min-width:80rem){:host .content .inner-content{width:65rem}}@media (min-width:90rem){:host .content .inner-content{width:75rem}}@media (min-width:96rem){:host .content .inner-content{width:81rem}}@media (min-width:105rem){:host .content .inner-content{width:87rem}}@media (min-width:120rem){:host .content .inner-content{width:90rem}}@media (min-width:160rem){:host .content .inner-content{width:92.5rem}}:host(.variant-default) .content{flex:1 1 0%}:host(.variant-login){grid-template-areas:"topbar topbar" "content content"}@media (min-width:80rem){: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:80rem){:host(.variant-login) .sidebar{display:flex}}:host(.variant-login) .sidebar .inner-content{padding:.5rem}:host(.variant-login) .content{align-items:center;order:3;padding:calc(env(safe-area-inset-top) + 3.5rem) 1rem 1.5rem}@media (min-width:80rem){:host(.variant-login) .content{justify-content:center;order:2;padding:1.5rem 4.5rem 0}}:host(.variant-login) .content .inner-content{box-sizing:border-box;flex:unset;width:100%}@media (min-width:40rem){:host(.variant-login) .content .inner-content{width:30rem}}@media (min-width:80rem){:host(.variant-office) .content .inner-content{width:61rem}}@media (min-width:90rem){:host(.variant-office) .content .inner-content{width:71rem}}@media (min-width:96rem){:host(.variant-office) .content .inner-content{width:77rem}}@media (min-width:105rem){:host(.variant-office) .content .inner-content{width:83rem}}@media (min-width:120rem){:host(.variant-office) .content .inner-content{width:86rem}}@media (min-width:160rem){:host(.variant-office) .content .inner-content{width:88.5rem}}@media (min-width:80rem){:host(.variant-office) .sidebar{width:19rem}}@media (min-width:105rem){:host(.variant-office) .sidebar{width:22rem}}@media (min-width:80rem){.layout-1280\\:flex{display:flex!important}.layout-1280\\:w-60{width:15rem!important}.layout-1280\\:w-\\[19rem\\]{width:19rem!important}.layout-1280\\:w-\\[61rem\\]{width:61rem!important}.layout-1280\\:p-6{padding:1.5rem!important}.layout-1280\\:px-18{padding-left:4.5rem!important;padding-right:4.5rem!important}}@media (min-width:90rem){.layout-1440\\:w-\\[71rem\\]{width:71rem!important}}@media (min-width:96rem){.layout-1536\\:w-\\[77rem\\]{width:77rem!important}}@media (min-width:105rem){.layout-1680\\:w-\\[22rem\\]{width:22rem!important}.layout-1680\\:w-\\[83rem\\]{width:83rem!important}}@media (min-width:120rem){.layout-1920\\:w-\\[86rem\\]{width:86rem!important}.layout-1920\\:pl-20{padding-left:5rem!important}.layout-1920\\:pr-8{padding-right:2rem!important}}@media (min-width:160rem){.layout-2560\\:w-\\[88\\.5rem\\]{width:88.5rem!important}.layout-2560\\:pb-\\[7\\.5rem\\]{padding-bottom:7.5rem!important}.layout-2560\\:pl-\\[7\\.5rem\\]{padding-left:7.5rem!important}.layout-2560\\:pt-16{padding-top:4rem!important}}.static{position:static!important}';const r=class{constructor(e){t(this,e);this.variant="default"}render(){return e(i,{class:`p-layout variant-${this.variant}`},e("div",{class:"topbar"},e("slot",{name:"topbar"})),e("div",{class:"sidebar"},e("slot",{name:"sidebar"})),e("div",{class:"content"},e("div",{class:"inner-content"},e("slot",{name:"content"}))))}};r.style=n;export{r as p_layout};
|
|
2
|
+
//# sourceMappingURL=p-57a32088.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["layoutComponentCss","Layout","render","h","Host","class","this","variant","name"],"sources":["src/components/atoms/layout/layout.component.scss?tag=p-layout&encapsulation=shadow","src/components/atoms/layout/layout.component.tsx"],"sourcesContent":[":host {\n\t@apply grid h-dvh w-dvw;\n\n\tgrid-template-columns: 1fr;\n\tgrid-template-rows: repeat(2, min-content) 1fr;\n\tgap: 0;\n\tgrid-template-areas:\n\t\t'sidebar'\n\t\t'topbar'\n\t\t'content';\n\n\t@screen layout-1280 {\n\t\tgrid-template-columns: auto 1fr;\n\t\tgrid-template-rows: min-content 1fr;\n\t\tgrid-template-areas:\n\t\t\t'topbar topbar'\n\t\t\t'sidebar content';\n\t}\n\n\t.topbar,\n\t.sidebar,\n\t.content {\n\t\t@apply self-start;\n\t}\n\n\t.topbar {\n\t\tgrid-area: topbar;\n\n\t\t@apply sticky w-full;\n\t\t@apply order-2 desktop-sm:order-1;\n\t}\n\n\t.sidebar {\n\t\tgrid-area: sidebar;\n\n\t\t@apply box-border flex h-full;\n\t\t@apply w-full;\n\t\t@apply layout-1280:w-60 layout-1680:w-72;\n\t\t@apply order-1 desktop-sm:order-2;\n\t}\n\n\t.content {\n\t\tgrid-area: content;\n\n\t\t@apply relative flex h-full flex-col overflow-y-auto overflow-x-hidden;\n\t\t@apply order-3 pb-24;\n\n\t\t@apply px-content-mobile-x py-content-mobile-y;\n\t\t@apply tablet:p-8;\n\t\t@apply layout-1280:p-6 layout-1280:pt-8;\n\t\t@apply layout-1440:p-8;\n\t\t@apply layout-1920:pr-8 layout-1920:pl-20 layout-1920:pb-20;\n\t\t@apply layout-2560:pt-16 layout-2560:pl-[7.5rem] layout-2560:pb-[7.5rem];\n\n\t\t.inner-content {\n\t\t\t@apply relative flex-1;\n\n\t\t\t// https://linear.app/employes/issue/PRO-9053/%E2%9A%9B%EF%B8%8F-component-wijzigen-layout\n\t\t\t@apply layout-1280:w-content-1280;\n\t\t\t@apply layout-1440:w-content-1440;\n\t\t\t@apply layout-1536:w-content-1536;\n\t\t\t@apply layout-1680:w-content-1680;\n\t\t\t@apply layout-1920:w-content-1920;\n\t\t\t@apply layout-2560:w-content-2560;\n\t\t}\n\t}\n}\n\n:host(.variant-default) {\n\t.content {\n\t\t@apply flex-1;\n\t}\n}\n\n:host(.variant-login) {\n\tgrid-template-areas:\n\t\t'topbar topbar'\n\t\t'content content';\n\n\t@screen layout-1280 {\n\t\tgrid-template-areas:\n\t\t\t'topbar topbar'\n\t\t\t'content sidebar';\n\t}\n\n\t.sidebar {\n\t\t@apply hidden w-unset layout-1280:flex;\n\t\t@apply order-3 p-2;\n\t\t@apply flex-1 overflow-hidden;\n\n\t\t.inner-content {\n\t\t\t@apply p-2;\n\t\t}\n\t}\n\n\t.content {\n\t\t@apply order-3 layout-1280:order-2;\n\t\t@apply items-center layout-1280:justify-center;\n\n\t\t@apply layout-1280:px-18 layout-1280:py-0;\n\t\t@apply px-content-mobile-x py-content-mobile-y;\n\t\tpadding-top: calc(env(safe-area-inset-top) + 3.5rem);\n\n\t\t@screen layout-1280 {\n\t\t\t@apply pt-content-mobile-y;\n\t\t}\n\n\t\t.inner-content {\n\t\t\t@apply box-border;\n\t\t\t@apply w-full tablet:w-content-desktop-login;\n\t\t\tflex: unset;\n\t\t}\n\t}\n}\n\n:host(.variant-office) {\n\t.content {\n\t\t.inner-content {\n\t\t\t@apply layout-1280:w-[61rem];\n\t\t\t@apply layout-1440:w-[71rem];\n\t\t\t@apply layout-1536:w-[77rem];\n\t\t\t@apply layout-1680:w-[83rem];\n\t\t\t@apply layout-1920:w-[86rem];\n\t\t\t@apply layout-2560:w-[88.5rem];\n\t\t}\n\t}\n\t.sidebar {\n\t\t@apply layout-1280:w-[19rem] layout-1680:w-[22rem];\n\t}\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n\ttag: 'p-layout',\n\tstyleUrl: 'layout.component.scss',\n\tshadow: true,\n})\nexport class Layout {\n\t/**\n\t * Variant of the layout\n\t */\n\t@Prop() variant: 'default' | 'login' | 'office' = 'default';\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={`p-layout variant-${this.variant}`}>\n\t\t\t\t<div class=\"topbar\">\n\t\t\t\t\t<slot name=\"topbar\" />\n\t\t\t\t</div>\n\t\t\t\t<div class=\"sidebar\">\n\t\t\t\t\t<slot name=\"sidebar\" />\n\t\t\t\t</div>\n\t\t\t\t<div class=\"content\">\n\t\t\t\t\t<div class=\"inner-content\">\n\t\t\t\t\t\t<slot name=\"content\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":"kDAAA,MAAMA,EAAqB,g5J,MCOdC,EAAM,M,sCAIgC,S,CAElD,MAAAC,GACC,OACCC,EAACC,EAAI,CAACC,MAAO,oBAAoBC,KAAKC,WACrCJ,EAAA,OAAKE,MAAM,UACVF,EAAA,QAAMK,KAAK,YAEZL,EAAA,OAAKE,MAAM,WACVF,EAAA,QAAMK,KAAK,aAEZL,EAAA,OAAKE,MAAM,WACVF,EAAA,OAAKE,MAAM,iBACVF,EAAA,QAAMK,KAAK,c"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,c as e,h as o,H as r,g as i}from"./p-e4d5e7a7.js";import{a,c as p,o as n,f as s,s as c}from"./p-fef32402.js";import{c as h}from"./p-4d330cfc.js";const l=".fixed{position:fixed!important}.absolute{position:absolute!important}.relative{position:relative!important}.left-0{left:0!important}.top-0{top:0!important}.z-dropdown{z-index:200!important}.block{display:block!important}.flex{display:flex!important}.hidden{display:none!important}.h-auto{height:auto!important}*{box-sizing:border-box}:host{display:block;position:relative}:host .trigger{display:block;height:auto;position:relative;width:auto}:host p-dropdown-menu-container{display:none;left:0;top:0;z-index:200}:host p-dropdown-menu-container[data-show]{display:flex}:host p-dropdown-menu-container[data-strategy=absolute]{position:absolute}:host p-dropdown-menu-container[data-strategy=fixed]{position:fixed}.visible{visibility:visible!important}.static{position:static!important}";const d=class{constructor(o){t(this,o);this.isOpen=e(this,"isOpen",3);this._loaded=false;this.placement="bottom-start";this.strategy="absolute";this.show=false;this.calculateWidth=false;this.applyMaxWidth=true;this.applyFullWidth=true;this.scrollable=false;this.insideClick=false;this.disableTriggerClick=false;this.applyChevron=true;this.chevronPosition="end";this.chevronDirection=undefined}componentShouldUpdate(){this._update()}disconnectedCallback(){if(this._cleanup){this._cleanup();this._cleanup=null}}render(){return o(r,{class:"p-dropdown"},o("div",{class:"trigger",ref:t=>this._trigger=t,onClick:()=>this._triggerClickHandler()},o("slot",{onSlotchange:t=>this._checkButton(t),name:"trigger"})),o("p-dropdown-menu-container",{role:"popover",maxWidth:!this.calculateWidth&&this.applyMaxWidth,fullWidth:this.applyFullWidth&&!this.applyMaxWidth,ref:t=>this._load(t),"data-placement":this.placement,"data-strategy":this.strategy,onClick:()=>this._containerClickHandler(),scrollable:this.scrollable},o("slot",{name:"items"})))}_checkButton({target:t}){if(!this.applyChevron){return}const e=t;const o=e.assignedElements();for(let t of o){if(t.nodeName==="P-BUTTON"){t.chevronPosition=this.chevronPosition;t.chevron=this.chevronDirection?this.chevronDirection:this.placement.indexOf("top")>=0?"up":"down"}}}onShowChange(t){if(!this._loaded){return}if(!t){this._hide();return}this._show()}documentClickHandler({target:t}){if(!this._menu.hasAttribute("data-show")||h(t,this._el)){return}this._hide()}_containerClickHandler(){if(this.insideClick){return}if(this._menu.hasAttribute("data-show")){this._hide()}}_triggerClickHandler(){if(this.disableTriggerClick){return}if(this._menu.hasAttribute("data-show")){this._hide();return}this._show()}_load(t){this._menu=t;if(t){this._update();this._loaded=true;if(this.show){setTimeout((()=>this._show()),100)}}}_show(){if(!this._loaded){return}if(this.calculateWidth){this._menu.style.width=`${this._trigger.clientWidth}px`}this._cleanup=a(this._el,this._menu,(()=>this._update()));this._menu.setAttribute("data-show","");this.isOpen.emit(true)}_hide(){if(!this._loaded||this.show){return}if(this._cleanup){this._cleanup();this._cleanup=null}this._menu.removeAttribute("data-show");this.isOpen.emit(false)}_update(){if(!this._menu){return}p(this._el,this._menu,{placement:this.placement,strategy:this.strategy,middleware:[n(8),s(),c()]}).then((({x:t,y:e,placement:o})=>{this._menu.dataset.placement=o;Object.assign(this._menu.style,{top:`${e}px`,left:`${t}px`})}))}get _el(){return i(this)}static get watchers(){return{show:["onShowChange"]}}};d.style=l;const b=".block{display:block!important}.flex{display:flex!important}.h-4{height:1rem!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.w-4{width:1rem!important}.w-6{width:1.5rem!important}.w-\\[2\\.375rem\\]{width:2.375rem!important}.w-full{width:100%!important}.translate-x-0{--tw-translate-x:0px!important}.translate-x-0,.translate-x-3{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.translate-x-3{--tw-translate-x:0.75rem!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}.appearance-none{appearance:none!important}.items-center{align-items:center!important}.gap-2{gap:.5rem!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.rounded{border-radius:.25rem!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-indigo{--tw-border-opacity:1!important;border-color:rgb(82 138 250/var(--tw-border-opacity))!important}.border-negative{--tw-border-opacity:1!important;border-color:rgb(185 30 40/var(--tw-border-opacity))!important}.bg-indigo-light{--tw-bg-opacity:1!important;background-color:rgb(241 246 255/var(--tw-bg-opacity))!important}.bg-mystic-dark{background-color:rgb(218 230 240/var(--tw-bg-opacity))!important}.bg-mystic-dark,.bg-white{--tw-bg-opacity:1!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.bg-center{background-position:50%!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-semibold{font-weight:600!important}.outline-none{outline:2px solid transparent!important;outline-offset:2px!important}.transition-transform{transition-duration:.15s!important;transition-property:transform!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}*{box-sizing:border-box}:host{--tw-text-opacity:1;align-items:center;border-radius:.25rem;color:rgb(81 83 107/var(--tw-text-opacity));cursor:pointer;display:flex;font-size:.875rem;font-weight:600;gap:.5rem;height:2rem;line-height:1.25rem;padding-left:.5rem;padding-right:.5rem;width:100%}:host input[type=checkbox].p-input{--tw-bg-opacity:1;--tw-border-opacity:1;appearance:none;background-color:rgb(255 255 255/var(--tw-bg-opacity));background-position:50%;background-repeat:no-repeat;background-size:1rem;border-color:rgb(218 230 240/var(--tw-border-opacity));border-radius:.25rem;border-style:solid;border-width:1px;height:1.5rem;outline:2px solid transparent!important;outline-offset:2px!important;width:1.5rem}:host input[type=checkbox].p-input+label{margin-left:.2rem;margin-top:.05rem}:host input[type=checkbox].p-input:hover:not(:disabled):not([disabled]):not(.disabled){cursor:pointer}:host input[type=checkbox].p-input:hover:not(:disabled):not([disabled]):not(.disabled):not(:checked):not([checked]):not(.checked):not(:indeterminate):not([indeterminate]):not(.indeterminate){--tw-border-opacity:1;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.965 11.487 13.53 1.53c.435-.572 1.22-.7 1.8-.292l.108.077c.294.206.492.53.546.895.054.365-.04.737-.26 1.026L7.26 14.38a1.34 1.34 0 0 1-.642.463 1.302 1.302 0 0 1-1.575-.263L.362 9.6a1.356 1.356 0 0 1-.36-.99c.017-.37.181-.713.452-.95l.1-.088a1.302 1.302 0 0 1 1.82.093l3.592 3.82h-.001Z' fill='%23dae6f0' fill-rule='evenodd'/%3E%3C/svg%3E\");border-color:rgb(82 138 250/var(--tw-border-opacity))}:host input[type=checkbox].p-input.checked,:host input[type=checkbox].p-input.indeterminate,:host input[type=checkbox].p-input:checked,:host input[type=checkbox].p-input:indeterminate,:host input[type=checkbox].p-input[checked],:host input[type=checkbox].p-input[indeterminate]{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity));border-color:rgb(82 138 250/var(--tw-border-opacity))}:host input[type=checkbox].p-input.checked,:host input[type=checkbox].p-input:checked,:host input[type=checkbox].p-input[checked]{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.965 11.487 13.53 1.53c.435-.572 1.22-.7 1.8-.292l.108.077c.294.206.492.53.546.895.054.365-.04.737-.26 1.026L7.26 14.38a1.34 1.34 0 0 1-.642.463 1.302 1.302 0 0 1-1.575-.263L.362 9.6a1.356 1.356 0 0 1-.36-.99c.017-.37.181-.713.452-.95l.1-.088a1.302 1.302 0 0 1 1.82.093l3.592 3.82h-.001Z' fill='%23fff' fill-rule='evenodd'/%3E%3C/svg%3E\")}:host input[type=checkbox].p-input.indeterminate,:host input[type=checkbox].p-input:indeterminate,:host input[type=checkbox].p-input[indeterminate]{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7h8a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2Z' fill='%23fff' fill-rule='evenodd'/%3E%3C/svg%3E\")}:host input[type=checkbox].p-input.disabled,:host input[type=checkbox].p-input:disabled,:host input[type=checkbox].p-input[disabled]{opacity:.4}:host input[type=checkbox].p-input.error,:host input[type=checkbox].p-input[error]{--tw-text-opacity:1;--tw-border-opacity:1!important;border-color:rgb(185 30 40/var(--tw-border-opacity))!important;color:rgb(138 15 29/var(--tw-text-opacity))}:host input[type=checkbox].p-input.error::-moz-placeholder,:host input[type=checkbox].p-input[error]::-moz-placeholder{--tw-text-opacity:1;color:rgb(255 204 211/var(--tw-text-opacity))}:host input[type=checkbox].p-input.error::placeholder,:host input[type=checkbox].p-input[error]::placeholder{--tw-text-opacity:1;color:rgb(255 204 211/var(--tw-text-opacity))}:host input[type=checkbox].p-input.error.checked,:host input[type=checkbox].p-input.error:checked,:host input[type=checkbox].p-input.error[checked],:host input[type=checkbox].p-input[error].checked,:host input[type=checkbox].p-input[error]:checked,:host input[type=checkbox].p-input[error][checked]{--tw-bg-opacity:1;background-color:rgb(185 30 40/var(--tw-bg-opacity))}:host input[type=checkbox].p-input.size-small{height:1rem;width:1rem}:host input[type=checkbox].p-input.size-small:hover:not(:disabled):not([disabled]):not(.disabled):not(:checked):not([checked]):not(.checked):not(:indeterminate):not([indeterminate]):not(.indeterminate){background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M2.667 2.667h10.667v10.667H2.667z'/%3E%3Cpath fill='%23DAE6F0' d='m6.644 10.325 5.044-6.638a.87.87 0 0 1 1.2-.194l.072.05a.91.91 0 0 1 .19 1.28l-5.644 7.43a.89.89 0 0 1-.427.31.868.868 0 0 1-1.05-.176l-3.12-3.32a.904.904 0 0 1-.241-.66.897.897 0 0 1 .302-.633l.067-.058a.868.868 0 0 1 1.213.062l2.394 2.547Z'/%3E%3C/g%3E%3C/svg%3E\")}:host input[type=checkbox].p-input.size-small.checked,:host input[type=checkbox].p-input.size-small:checked,:host input[type=checkbox].p-input.size-small[checked]{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M2.667 2.667h10.667v10.667H2.667z'/%3E%3Cpath fill='%23FFF' d='m6.644 10.325 5.044-6.638a.87.87 0 0 1 1.2-.194l.072.05a.91.91 0 0 1 .19 1.28l-5.644 7.43a.89.89 0 0 1-.427.31.868.868 0 0 1-1.05-.176l-3.12-3.32a.904.904 0 0 1-.241-.66.897.897 0 0 1 .302-.633l.067-.058a.868.868 0 0 1 1.213.062l2.394 2.547Z'/%3E%3C/g%3E%3C/svg%3E\")}:host input[type=checkbox].p-toggle{--tw-bg-opacity:1;--tw-border-opacity:1;align-items:center;appearance:none;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(218 230 240/var(--tw-border-opacity));border-radius:1.5625rem;border-style:solid;border-width:1px;display:flex;height:1.5rem;justify-content:flex-start;padding:.25rem;width:2.375rem}:host input[type=checkbox].p-toggle:after{--tw-translate-x:0px;--tw-bg-opacity:1;background-color:rgb(218 230 240/var(--tw-bg-opacity));border-radius:100%;content:\"\";display:block;height:1rem;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));transition-duration:.1s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);width:1rem}:host input[type=checkbox].p-toggle.checked,:host input[type=checkbox].p-toggle:checked,:host input[type=checkbox].p-toggle[checked]{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity));border-color:rgb(82 138 250/var(--tw-border-opacity))}:host input[type=checkbox].p-toggle.checked:after,:host input[type=checkbox].p-toggle:checked:after,:host input[type=checkbox].p-toggle[checked]:after{--tw-translate-x:0.75rem;--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));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))}:host input[type=checkbox].p-toggle.disabled,:host input[type=checkbox].p-toggle:disabled,:host input[type=checkbox].p-toggle[disabled]{opacity:.4}:host input[type=checkbox].p-toggle:hover:not(:disabled):not([disabled]):not(.disabled){cursor:pointer}:host input[type=checkbox].p-toggle:hover:not(:disabled):not([disabled]):not(.disabled):not(:checked):not([checked]):not(.checked){--tw-border-opacity:1;border-color:rgb(82 138 250/var(--tw-border-opacity))}:host input[type=checkbox].p-toggle.error,:host input[type=checkbox].p-toggle[error]{--tw-text-opacity:1;--tw-border-opacity:1!important;border-color:rgb(185 30 40/var(--tw-border-opacity))!important;color:rgb(138 15 29/var(--tw-text-opacity))}:host input[type=checkbox].p-toggle.error::-moz-placeholder,:host input[type=checkbox].p-toggle[error]::-moz-placeholder{--tw-text-opacity:1;color:rgb(255 204 211/var(--tw-text-opacity))}:host input[type=checkbox].p-toggle.error::placeholder,:host input[type=checkbox].p-toggle[error]::placeholder{--tw-text-opacity:1;color:rgb(255 204 211/var(--tw-text-opacity))}:host input[type=checkbox].p-toggle.error.checked,:host input[type=checkbox].p-toggle.error:checked,:host input[type=checkbox].p-toggle.error[checked],:host input[type=checkbox].p-toggle[error].checked,:host input[type=checkbox].p-toggle[error]:checked,:host input[type=checkbox].p-toggle[error][checked]{--tw-bg-opacity:1;background-color:rgb(185 30 40/var(--tw-bg-opacity))}:host .text-container{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}:host(.hover:hover){--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-opacity));color:rgb(81 83 107/var(--tw-text-opacity))}:host(.active){--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-opacity));color:rgb(82 138 250/var(--tw-text-opacity))}.static{position:static!important}.flex-shrink-0{flex-shrink:0!important}";const g=class{constructor(e){t(this,e);this.active=false;this.variant="default";this.enableHover=true;this.icon=undefined}render(){return o(r,{class:`p-dropdown-menu-item ${this.active&&"active"} ${this.enableHover&&"hover"}`},this.icon&&o("p-icon",{variant:this.icon}),this.variant==="checkbox"&&o("input",{type:"checkbox",class:"p-input size-small flex-shrink-0",checked:this.active}),o("div",{class:"text-container"},o("slot",null)))}};g.style=b;export{d as p_dropdown,g as p_dropdown_menu_item};
|
|
2
|
+
//# sourceMappingURL=p-6cbe8dc8.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["dropdownComponentCss","Dropdown","this","_loaded","componentShouldUpdate","_update","disconnectedCallback","_cleanup","render","h","Host","class","ref","_trigger","onClick","_triggerClickHandler","onSlotchange","ev","_checkButton","name","role","maxWidth","calculateWidth","applyMaxWidth","fullWidth","applyFullWidth","el","_load","placement","strategy","_containerClickHandler","scrollable","target","applyChevron","slot","children","assignedElements","child","nodeName","chevronPosition","chevron","chevronDirection","indexOf","onShowChange","show","_hide","_show","documentClickHandler","_menu","hasAttribute","childOf","_el","insideClick","disableTriggerClick","popover","setTimeout","style","width","clientWidth","autoUpdate","setAttribute","isOpen","emit","removeAttribute","computePosition","middleware","offset","flip","shift","then","x","y","dataset","Object","assign","top","left","dropdownMenuItemComponentCss","DropdownMenuItem","active","enableHover","icon","variant","type","checked"],"sources":["src/components/molecules/dropdown/dropdown.component.scss?tag=p-dropdown&encapsulation=shadow","src/components/molecules/dropdown/dropdown.component.tsx","src/components/atoms/dropdown-menu-item/dropdown-menu-item.component.scss?tag=p-dropdown-menu-item&encapsulation=shadow","src/components/atoms/dropdown-menu-item/dropdown-menu-item.component.tsx"],"sourcesContent":[":host {\n\t@apply relative block;\n\n\t.trigger {\n\t\t@apply relative block h-auto w-auto;\n\t}\n\n\tp-dropdown-menu-container {\n\t\t@apply left-0 top-0 z-dropdown hidden;\n\n\t\t&[data-show] {\n\t\t\t@apply flex;\n\t\t}\n\n\t\t&[data-strategy='absolute'] {\n\t\t\t@apply absolute;\n\t\t}\n\n\t\t&[data-strategy='fixed'] {\n\t\t\t@apply fixed;\n\t\t}\n\t}\n}\n","import {\n\tautoUpdate,\n\tcomputePosition,\n\tflip,\n\toffset,\n\tPlacement,\n\tshift,\n\tStrategy,\n} from '@floating-ui/dom';\nimport {\n\tComponent,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tProp,\n\tWatch,\n} from '@stencil/core';\nimport { childOf } from '../../../utils/child-of';\n\n@Component({\n\ttag: 'p-dropdown',\n\tstyleUrl: 'dropdown.component.scss',\n\tshadow: true,\n})\nexport class Dropdown {\n\t/**\n\t * The content of the dropdown menu\n\t */\n\t@Prop({ reflect: true }) placement: Placement = 'bottom-start';\n\n\t/**\n\t * The strategy of the popover placement\n\t */\n\t@Prop() strategy: Strategy = 'absolute';\n\n\t/**\n\t * Wether to show the dropdown menu\n\t */\n\t@Prop() show: boolean = false;\n\n\t/**\n\t * Wether to automatically calculate the width of the menu based on the trigger\n\t */\n\t@Prop() calculateWidth: boolean = false;\n\n\t/**\n\t * Wether to apply the max width\n\t */\n\t@Prop() applyMaxWidth: boolean = true;\n\n\t/**\n\t * Wether to apply the full width\n\t */\n\t@Prop() applyFullWidth: boolean = true;\n\n\t/**\n\t * Wether the dropdown container should be scrollable when the threshold is met.\n\t */\n\t@Prop() scrollable: boolean = false;\n\n\t/**\n\t * Wether to automatically close the dropdown menu after clicking inside\n\t */\n\t@Prop() insideClick: boolean = false;\n\n\t/**\n\t * Wether to automatically close the dropdown menu after clicking inside\n\t */\n\t@Prop() disableTriggerClick: boolean = false;\n\n\t/**\n\t * Wether to apply chevron automatically\n\t */\n\t@Prop() applyChevron: boolean = true;\n\n\t/**\n\t * Chevron position\n\t */\n\t@Prop() chevronPosition: 'start' | 'end' = 'end';\n\n\t/**\n\t * Chevron direction\n\t */\n\t@Prop() chevronDirection: 'up' | 'down';\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\t/**\n\t * Open change event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tisOpen: EventEmitter<boolean>;\n\n\tprivate _loaded = false;\n\tprivate _trigger: HTMLElement;\n\tprivate _menu: HTMLElement;\n\tprivate _cleanup: () => void;\n\n\tcomponentShouldUpdate() {\n\t\tthis._update();\n\t}\n\n\tdisconnectedCallback() {\n\t\tif (this._cleanup) {\n\t\t\tthis._cleanup();\n\t\t\tthis._cleanup = null;\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class=\"p-dropdown\">\n\t\t\t\t<div\n\t\t\t\t\tclass=\"trigger\"\n\t\t\t\t\tref={(ref) => (this._trigger = ref)}\n\t\t\t\t\tonClick={() => this._triggerClickHandler()}\n\t\t\t\t>\n\t\t\t\t\t<slot\n\t\t\t\t\t\tonSlotchange={(ev) => this._checkButton(ev)}\n\t\t\t\t\t\tname=\"trigger\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<p-dropdown-menu-container\n\t\t\t\t\trole=\"popover\"\n\t\t\t\t\tmaxWidth={!this.calculateWidth && this.applyMaxWidth}\n\t\t\t\t\tfullWidth={this.applyFullWidth && !this.applyMaxWidth}\n\t\t\t\t\tref={(el) => this._load(el)}\n\t\t\t\t\tdata-placement={this.placement}\n\t\t\t\t\tdata-strategy={this.strategy}\n\t\t\t\t\tonClick={() => this._containerClickHandler()}\n\t\t\t\t\tscrollable={this.scrollable}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"items\" />\n\t\t\t\t</p-dropdown-menu-container>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _checkButton({ target }: Event) {\n\t\tif (!this.applyChevron) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst slot = target as HTMLSlotElement;\n\t\tconst children = slot.assignedElements();\n\n\t\tfor (let child of children) {\n\t\t\tif (child.nodeName === 'P-BUTTON') {\n\t\t\t\t(child as any).chevronPosition = this.chevronPosition;\n\t\t\t\t(child as any).chevron = this.chevronDirection\n\t\t\t\t\t? this.chevronDirection\n\t\t\t\t\t: this.placement.indexOf('top') >= 0\n\t\t\t\t\t\t? 'up'\n\t\t\t\t\t\t: 'down';\n\t\t\t}\n\t\t}\n\t}\n\n\t@Watch('show')\n\tprotected onShowChange(show) {\n\t\tif (!this._loaded) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!show) {\n\t\t\tthis._hide();\n\t\t\treturn;\n\t\t}\n\n\t\tthis._show();\n\t}\n\n\t@Listen('click', { target: 'document', capture: true })\n\tprotected documentClickHandler({ target }) {\n\t\tif (\n\t\t\t!this._menu.hasAttribute('data-show') ||\n\t\t\tchildOf(target, this._el)\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._hide();\n\t}\n\n\tprivate _containerClickHandler() {\n\t\tif (this.insideClick) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._menu.hasAttribute('data-show')) {\n\t\t\tthis._hide();\n\t\t}\n\t}\n\n\tprivate _triggerClickHandler() {\n\t\tif (this.disableTriggerClick) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._menu.hasAttribute('data-show')) {\n\t\t\tthis._hide();\n\t\t\treturn;\n\t\t}\n\n\t\tthis._show();\n\t}\n\n\tprivate _load(popover: HTMLElement) {\n\t\tthis._menu = popover;\n\t\tif (popover) {\n\t\t\tthis._update();\n\t\t\tthis._loaded = true;\n\n\t\t\tif (this.show) {\n\t\t\t\tsetTimeout(() => this._show(), 100);\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate _show() {\n\t\tif (!this._loaded) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Make the popover visible\n\t\tif (this.calculateWidth) {\n\t\t\tthis._menu.style.width = `${this._trigger.clientWidth}px`;\n\t\t}\n\n\t\tthis._cleanup = autoUpdate(this._el, this._menu, () => this._update());\n\n\t\tthis._menu.setAttribute('data-show', '');\n\t\tthis.isOpen.emit(true);\n\t}\n\n\tprivate _hide() {\n\t\tif (!this._loaded || this.show) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._cleanup) {\n\t\t\tthis._cleanup();\n\t\t\tthis._cleanup = null;\n\t\t}\n\n\t\t// Hide the popover\n\t\tthis._menu.removeAttribute('data-show');\n\t\tthis.isOpen.emit(false);\n\t}\n\n\tprivate _update() {\n\t\tif (!this._menu) {\n\t\t\treturn;\n\t\t}\n\n\t\tcomputePosition(this._el, this._menu, {\n\t\t\tplacement: this.placement,\n\t\t\tstrategy: this.strategy,\n\t\t\tmiddleware: [offset(8), flip(), shift()],\n\t\t}).then(({ x, y, placement }) => {\n\t\t\tthis._menu.dataset.placement = placement;\n\t\t\tObject.assign(this._menu.style, {\n\t\t\t\ttop: `${y}px`,\n\t\t\t\tleft: `${x}px`,\n\t\t\t});\n\t\t});\n\t}\n}\n",":host {\n\t@import '../../../style/form/checkbox';\n\n\t@apply flex h-8 w-full items-center gap-2 rounded px-2;\n\t@apply text-sm font-semibold text-storm;\n\t@apply cursor-pointer;\n\n\t.text-container {\n\t\t@apply block w-full overflow-hidden text-ellipsis whitespace-nowrap;\n\t}\n}\n\n:host(.hover:hover) {\n\t@apply bg-indigo-light text-storm;\n}\n\n:host(.active) {\n\t@apply bg-indigo-light text-indigo;\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { IconVariant } from '../icon/icon.component';\n\n@Component({\n\ttag: 'p-dropdown-menu-item',\n\tstyleUrl: 'dropdown-menu-item.component.scss',\n\tshadow: true,\n})\nexport class DropdownMenuItem {\n\t/**\n\t * Wether the dropdown menu item is active\n\t */\n\t@Prop() active: boolean = false;\n\n\t/**\n\t * The variant of the item\n\t */\n\t@Prop() variant: 'default' | 'checkbox' = 'default';\n\n\t/**\n\t * Wether to enable the hover state\n\t */\n\t@Prop() enableHover: boolean = true;\n\n\t/**\n\t * Icon of the navigation item\n\t */\n\t@Prop() icon: IconVariant;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={`p-dropdown-menu-item ${this.active && 'active'} ${\n\t\t\t\t\tthis.enableHover && 'hover'\n\t\t\t\t}`}\n\t\t\t>\n\t\t\t\t{this.icon && <p-icon variant={this.icon} />}\n\n\t\t\t\t{this.variant === 'checkbox' && (\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\tclass=\"p-input size-small flex-shrink-0\"\n\t\t\t\t\t\tchecked={this.active}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t<div class=\"text-container\">\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":"0JAAA,MAAMA,EAAuB,kxB,MC2BhBC,EAAQ,M,wDA0EZC,KAAAC,QAAU,M,eAtE8B,e,cAKnB,W,UAKL,M,oBAKU,M,mBAKD,K,oBAKC,K,gBAKJ,M,iBAKC,M,yBAKQ,M,kBAKP,K,qBAKW,M,gCAyB3C,qBAAAC,GACCF,KAAKG,S,CAGN,oBAAAC,GACC,GAAIJ,KAAKK,SAAU,CAClBL,KAAKK,WACLL,KAAKK,SAAW,I,EAIlB,MAAAC,GACC,OACCC,EAACC,EAAI,CAACC,MAAM,cACXF,EAAA,OACCE,MAAM,UACNC,IAAMA,GAASV,KAAKW,SAAWD,EAC/BE,QAAS,IAAMZ,KAAKa,wBAEpBN,EAAA,QACCO,aAAeC,GAAOf,KAAKgB,aAAaD,GACxCE,KAAK,aAGPV,EAAA,6BACCW,KAAK,UACLC,UAAWnB,KAAKoB,gBAAkBpB,KAAKqB,cACvCC,UAAWtB,KAAKuB,iBAAmBvB,KAAKqB,cACxCX,IAAMc,GAAOxB,KAAKyB,MAAMD,GAAG,iBACXxB,KAAK0B,UAAS,gBACf1B,KAAK2B,SACpBf,QAAS,IAAMZ,KAAK4B,yBACpBC,WAAY7B,KAAK6B,YAEjBtB,EAAA,QAAMU,KAAK,W,CAMP,YAAAD,EAAac,OAAEA,IACtB,IAAK9B,KAAK+B,aAAc,CACvB,M,CAGD,MAAMC,EAAOF,EACb,MAAMG,EAAWD,EAAKE,mBAEtB,IAAK,IAAIC,KAASF,EAAU,CAC3B,GAAIE,EAAMC,WAAa,WAAY,CACjCD,EAAcE,gBAAkBrC,KAAKqC,gBACrCF,EAAcG,QAAUtC,KAAKuC,iBAC3BvC,KAAKuC,iBACLvC,KAAK0B,UAAUc,QAAQ,QAAU,EAChC,KACA,M,GAMG,YAAAC,CAAaC,GACtB,IAAK1C,KAAKC,QAAS,CAClB,M,CAGD,IAAKyC,EAAM,CACV1C,KAAK2C,QACL,M,CAGD3C,KAAK4C,O,CAII,oBAAAC,EAAqBf,OAAEA,IAChC,IACE9B,KAAK8C,MAAMC,aAAa,cACzBC,EAAQlB,EAAQ9B,KAAKiD,KACpB,CACD,M,CAGDjD,KAAK2C,O,CAGE,sBAAAf,GACP,GAAI5B,KAAKkD,YAAa,CACrB,M,CAGD,GAAIlD,KAAK8C,MAAMC,aAAa,aAAc,CACzC/C,KAAK2C,O,EAIC,oBAAA9B,GACP,GAAIb,KAAKmD,oBAAqB,CAC7B,M,CAGD,GAAInD,KAAK8C,MAAMC,aAAa,aAAc,CACzC/C,KAAK2C,QACL,M,CAGD3C,KAAK4C,O,CAGE,KAAAnB,CAAM2B,GACbpD,KAAK8C,MAAQM,EACb,GAAIA,EAAS,CACZpD,KAAKG,UACLH,KAAKC,QAAU,KAEf,GAAID,KAAK0C,KAAM,CACdW,YAAW,IAAMrD,KAAK4C,SAAS,I,GAK1B,KAAAA,GACP,IAAK5C,KAAKC,QAAS,CAClB,M,CAID,GAAID,KAAKoB,eAAgB,CACxBpB,KAAK8C,MAAMQ,MAAMC,MAAQ,GAAGvD,KAAKW,SAAS6C,e,CAG3CxD,KAAKK,SAAWoD,EAAWzD,KAAKiD,IAAKjD,KAAK8C,OAAO,IAAM9C,KAAKG,YAE5DH,KAAK8C,MAAMY,aAAa,YAAa,IACrC1D,KAAK2D,OAAOC,KAAK,K,CAGV,KAAAjB,GACP,IAAK3C,KAAKC,SAAWD,KAAK0C,KAAM,CAC/B,M,CAGD,GAAI1C,KAAKK,SAAU,CAClBL,KAAKK,WACLL,KAAKK,SAAW,I,CAIjBL,KAAK8C,MAAMe,gBAAgB,aAC3B7D,KAAK2D,OAAOC,KAAK,M,CAGV,OAAAzD,GACP,IAAKH,KAAK8C,MAAO,CAChB,M,CAGDgB,EAAgB9D,KAAKiD,IAAKjD,KAAK8C,MAAO,CACrCpB,UAAW1B,KAAK0B,UAChBC,SAAU3B,KAAK2B,SACfoC,WAAY,CAACC,EAAO,GAAIC,IAAQC,OAC9BC,MAAK,EAAGC,IAAGC,IAAG3C,gBAChB1B,KAAK8C,MAAMwB,QAAQ5C,UAAYA,EAC/B6C,OAAOC,OAAOxE,KAAK8C,MAAMQ,MAAO,CAC/BmB,IAAK,GAAGJ,MACRK,KAAM,GAAGN,OACR,G,0FChRL,MAAMO,EAA+B,kpW,MCQxBC,EAAgB,M,qCAIF,M,aAKgB,U,iBAKX,K,oBAO/B,MAAAtE,GACC,OACCC,EAACC,EAAI,CACJC,MAAO,wBAAwBT,KAAK6E,QAAU,YAC7C7E,KAAK8E,aAAe,WAGpB9E,KAAK+E,MAAQxE,EAAA,UAAQyE,QAAShF,KAAK+E,OAEnC/E,KAAKgF,UAAY,YACjBzE,EAAA,SACC0E,KAAK,WACLxE,MAAM,mCACNyE,QAASlF,KAAK6E,SAIhBtE,EAAA,OAAKE,MAAM,kBACVF,EAAA,c"}
|
|
1
|
+
{"version":3,"names":["dropdownComponentCss","Dropdown","this","_loaded","componentShouldUpdate","_update","disconnectedCallback","_cleanup","render","h","Host","class","ref","_trigger","onClick","_triggerClickHandler","onSlotchange","ev","_checkButton","name","role","maxWidth","calculateWidth","applyMaxWidth","fullWidth","applyFullWidth","el","_load","placement","strategy","_containerClickHandler","scrollable","target","applyChevron","slot","children","assignedElements","child","nodeName","chevronPosition","chevron","chevronDirection","indexOf","onShowChange","show","_hide","_show","documentClickHandler","_menu","hasAttribute","childOf","_el","insideClick","disableTriggerClick","popover","setTimeout","style","width","clientWidth","autoUpdate","setAttribute","isOpen","emit","removeAttribute","computePosition","middleware","offset","flip","shift","then","x","y","dataset","Object","assign","top","left","dropdownMenuItemComponentCss","DropdownMenuItem","active","enableHover","icon","variant","type","checked"],"sources":["src/components/molecules/dropdown/dropdown.component.scss?tag=p-dropdown&encapsulation=shadow","src/components/molecules/dropdown/dropdown.component.tsx","src/components/atoms/dropdown-menu-item/dropdown-menu-item.component.scss?tag=p-dropdown-menu-item&encapsulation=shadow","src/components/atoms/dropdown-menu-item/dropdown-menu-item.component.tsx"],"sourcesContent":[":host {\n\t@apply relative block;\n\n\t.trigger {\n\t\t@apply relative block h-auto w-auto;\n\t}\n\n\tp-dropdown-menu-container {\n\t\t@apply left-0 top-0 z-dropdown hidden;\n\n\t\t&[data-show] {\n\t\t\t@apply flex;\n\t\t}\n\n\t\t&[data-strategy='absolute'] {\n\t\t\t@apply absolute;\n\t\t}\n\n\t\t&[data-strategy='fixed'] {\n\t\t\t@apply fixed;\n\t\t}\n\t}\n}\n","import {\n\tautoUpdate,\n\tcomputePosition,\n\tflip,\n\toffset,\n\tPlacement,\n\tshift,\n\tStrategy,\n} from '@floating-ui/dom';\nimport {\n\tComponent,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tProp,\n\tWatch,\n} from '@stencil/core';\nimport { childOf } from '../../../utils/child-of';\n\n@Component({\n\ttag: 'p-dropdown',\n\tstyleUrl: 'dropdown.component.scss',\n\tshadow: true,\n})\nexport class Dropdown {\n\t/**\n\t * The content of the dropdown menu\n\t */\n\t@Prop({ reflect: true }) placement: Placement = 'bottom-start';\n\n\t/**\n\t * The strategy of the popover placement\n\t */\n\t@Prop() strategy: Strategy = 'absolute';\n\n\t/**\n\t * Wether to show the dropdown menu\n\t */\n\t@Prop() show: boolean = false;\n\n\t/**\n\t * Wether to automatically calculate the width of the menu based on the trigger\n\t */\n\t@Prop() calculateWidth: boolean = false;\n\n\t/**\n\t * Wether to apply the max width\n\t */\n\t@Prop() applyMaxWidth: boolean = true;\n\n\t/**\n\t * Wether to apply the full width\n\t */\n\t@Prop() applyFullWidth: boolean = true;\n\n\t/**\n\t * Wether the dropdown container should be scrollable when the threshold is met.\n\t */\n\t@Prop() scrollable: boolean = false;\n\n\t/**\n\t * Wether to automatically close the dropdown menu after clicking inside\n\t */\n\t@Prop() insideClick: boolean = false;\n\n\t/**\n\t * Wether to automatically close the dropdown menu after clicking inside\n\t */\n\t@Prop() disableTriggerClick: boolean = false;\n\n\t/**\n\t * Wether to apply chevron automatically\n\t */\n\t@Prop() applyChevron: boolean = true;\n\n\t/**\n\t * Chevron position\n\t */\n\t@Prop() chevronPosition: 'start' | 'end' = 'end';\n\n\t/**\n\t * Chevron direction\n\t */\n\t@Prop() chevronDirection: 'up' | 'down';\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\t/**\n\t * Open change event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tisOpen: EventEmitter<boolean>;\n\n\tprivate _loaded = false;\n\tprivate _trigger: HTMLElement;\n\tprivate _menu: HTMLElement;\n\tprivate _cleanup: () => void;\n\n\tcomponentShouldUpdate() {\n\t\tthis._update();\n\t}\n\n\tdisconnectedCallback() {\n\t\tif (this._cleanup) {\n\t\t\tthis._cleanup();\n\t\t\tthis._cleanup = null;\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class=\"p-dropdown\">\n\t\t\t\t<div\n\t\t\t\t\tclass=\"trigger\"\n\t\t\t\t\tref={(ref) => (this._trigger = ref)}\n\t\t\t\t\tonClick={() => this._triggerClickHandler()}\n\t\t\t\t>\n\t\t\t\t\t<slot\n\t\t\t\t\t\tonSlotchange={(ev) => this._checkButton(ev)}\n\t\t\t\t\t\tname=\"trigger\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<p-dropdown-menu-container\n\t\t\t\t\trole=\"popover\"\n\t\t\t\t\tmaxWidth={!this.calculateWidth && this.applyMaxWidth}\n\t\t\t\t\tfullWidth={this.applyFullWidth && !this.applyMaxWidth}\n\t\t\t\t\tref={(el) => this._load(el)}\n\t\t\t\t\tdata-placement={this.placement}\n\t\t\t\t\tdata-strategy={this.strategy}\n\t\t\t\t\tonClick={() => this._containerClickHandler()}\n\t\t\t\t\tscrollable={this.scrollable}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"items\" />\n\t\t\t\t</p-dropdown-menu-container>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _checkButton({ target }: Event) {\n\t\tif (!this.applyChevron) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst slot = target as HTMLSlotElement;\n\t\tconst children = slot.assignedElements();\n\n\t\tfor (let child of children) {\n\t\t\tif (child.nodeName === 'P-BUTTON') {\n\t\t\t\t(child as any).chevronPosition = this.chevronPosition;\n\t\t\t\t(child as any).chevron = this.chevronDirection\n\t\t\t\t\t? this.chevronDirection\n\t\t\t\t\t: this.placement.indexOf('top') >= 0\n\t\t\t\t\t\t? 'up'\n\t\t\t\t\t\t: 'down';\n\t\t\t}\n\t\t}\n\t}\n\n\t@Watch('show')\n\tprotected onShowChange(show) {\n\t\tif (!this._loaded) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!show) {\n\t\t\tthis._hide();\n\t\t\treturn;\n\t\t}\n\n\t\tthis._show();\n\t}\n\n\t@Listen('click', { target: 'document', capture: true })\n\tprotected documentClickHandler({ target }) {\n\t\tif (\n\t\t\t!this._menu.hasAttribute('data-show') ||\n\t\t\tchildOf(target, this._el)\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._hide();\n\t}\n\n\tprivate _containerClickHandler() {\n\t\tif (this.insideClick) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._menu.hasAttribute('data-show')) {\n\t\t\tthis._hide();\n\t\t}\n\t}\n\n\tprivate _triggerClickHandler() {\n\t\tif (this.disableTriggerClick) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._menu.hasAttribute('data-show')) {\n\t\t\tthis._hide();\n\t\t\treturn;\n\t\t}\n\n\t\tthis._show();\n\t}\n\n\tprivate _load(popover: HTMLElement) {\n\t\tthis._menu = popover;\n\t\tif (popover) {\n\t\t\tthis._update();\n\t\t\tthis._loaded = true;\n\n\t\t\tif (this.show) {\n\t\t\t\tsetTimeout(() => this._show(), 100);\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate _show() {\n\t\tif (!this._loaded) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Make the popover visible\n\t\tif (this.calculateWidth) {\n\t\t\tthis._menu.style.width = `${this._trigger.clientWidth}px`;\n\t\t}\n\n\t\tthis._cleanup = autoUpdate(this._el, this._menu, () => this._update());\n\n\t\tthis._menu.setAttribute('data-show', '');\n\t\tthis.isOpen.emit(true);\n\t}\n\n\tprivate _hide() {\n\t\tif (!this._loaded || this.show) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._cleanup) {\n\t\t\tthis._cleanup();\n\t\t\tthis._cleanup = null;\n\t\t}\n\n\t\t// Hide the popover\n\t\tthis._menu.removeAttribute('data-show');\n\t\tthis.isOpen.emit(false);\n\t}\n\n\tprivate _update() {\n\t\tif (!this._menu) {\n\t\t\treturn;\n\t\t}\n\n\t\tcomputePosition(this._el, this._menu, {\n\t\t\tplacement: this.placement,\n\t\t\tstrategy: this.strategy,\n\t\t\tmiddleware: [offset(8), flip(), shift()],\n\t\t}).then(({ x, y, placement }) => {\n\t\t\tthis._menu.dataset.placement = placement;\n\t\t\tObject.assign(this._menu.style, {\n\t\t\t\ttop: `${y}px`,\n\t\t\t\tleft: `${x}px`,\n\t\t\t});\n\t\t});\n\t}\n}\n",":host {\n\t@import '../../../style/form/checkbox';\n\n\t@apply flex h-8 w-full items-center gap-2 rounded px-2;\n\t@apply text-sm font-semibold text-storm;\n\t@apply cursor-pointer;\n\n\t.text-container {\n\t\t@apply block w-full overflow-hidden text-ellipsis whitespace-nowrap;\n\t}\n}\n\n:host(.hover:hover) {\n\t@apply bg-indigo-light text-storm;\n}\n\n:host(.active) {\n\t@apply bg-indigo-light text-indigo;\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { IconVariant } from '../icon/icon.component';\n\n@Component({\n\ttag: 'p-dropdown-menu-item',\n\tstyleUrl: 'dropdown-menu-item.component.scss',\n\tshadow: true,\n})\nexport class DropdownMenuItem {\n\t/**\n\t * Wether the dropdown menu item is active\n\t */\n\t@Prop() active: boolean = false;\n\n\t/**\n\t * The variant of the item\n\t */\n\t@Prop() variant: 'default' | 'checkbox' = 'default';\n\n\t/**\n\t * Wether to enable the hover state\n\t */\n\t@Prop() enableHover: boolean = true;\n\n\t/**\n\t * Icon of the navigation item\n\t */\n\t@Prop() icon: IconVariant;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={`p-dropdown-menu-item ${this.active && 'active'} ${\n\t\t\t\t\tthis.enableHover && 'hover'\n\t\t\t\t}`}\n\t\t\t>\n\t\t\t\t{this.icon && <p-icon variant={this.icon} />}\n\n\t\t\t\t{this.variant === 'checkbox' && (\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\tclass=\"p-input size-small flex-shrink-0\"\n\t\t\t\t\t\tchecked={this.active}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t<div class=\"text-container\">\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":"+JAAA,MAAMA,EAAuB,kxB,MC2BhBC,EAAQ,M,wDA0EZC,KAAAC,QAAU,M,eAtE8B,e,cAKnB,W,UAKL,M,oBAKU,M,mBAKD,K,oBAKC,K,gBAKJ,M,iBAKC,M,yBAKQ,M,kBAKP,K,qBAKW,M,gCAyB3C,qBAAAC,GACCF,KAAKG,S,CAGN,oBAAAC,GACC,GAAIJ,KAAKK,SAAU,CAClBL,KAAKK,WACLL,KAAKK,SAAW,I,EAIlB,MAAAC,GACC,OACCC,EAACC,EAAI,CAACC,MAAM,cACXF,EAAA,OACCE,MAAM,UACNC,IAAMA,GAASV,KAAKW,SAAWD,EAC/BE,QAAS,IAAMZ,KAAKa,wBAEpBN,EAAA,QACCO,aAAeC,GAAOf,KAAKgB,aAAaD,GACxCE,KAAK,aAGPV,EAAA,6BACCW,KAAK,UACLC,UAAWnB,KAAKoB,gBAAkBpB,KAAKqB,cACvCC,UAAWtB,KAAKuB,iBAAmBvB,KAAKqB,cACxCX,IAAMc,GAAOxB,KAAKyB,MAAMD,GAAG,iBACXxB,KAAK0B,UAAS,gBACf1B,KAAK2B,SACpBf,QAAS,IAAMZ,KAAK4B,yBACpBC,WAAY7B,KAAK6B,YAEjBtB,EAAA,QAAMU,KAAK,W,CAMP,YAAAD,EAAac,OAAEA,IACtB,IAAK9B,KAAK+B,aAAc,CACvB,M,CAGD,MAAMC,EAAOF,EACb,MAAMG,EAAWD,EAAKE,mBAEtB,IAAK,IAAIC,KAASF,EAAU,CAC3B,GAAIE,EAAMC,WAAa,WAAY,CACjCD,EAAcE,gBAAkBrC,KAAKqC,gBACrCF,EAAcG,QAAUtC,KAAKuC,iBAC3BvC,KAAKuC,iBACLvC,KAAK0B,UAAUc,QAAQ,QAAU,EAChC,KACA,M,GAMG,YAAAC,CAAaC,GACtB,IAAK1C,KAAKC,QAAS,CAClB,M,CAGD,IAAKyC,EAAM,CACV1C,KAAK2C,QACL,M,CAGD3C,KAAK4C,O,CAII,oBAAAC,EAAqBf,OAAEA,IAChC,IACE9B,KAAK8C,MAAMC,aAAa,cACzBC,EAAQlB,EAAQ9B,KAAKiD,KACpB,CACD,M,CAGDjD,KAAK2C,O,CAGE,sBAAAf,GACP,GAAI5B,KAAKkD,YAAa,CACrB,M,CAGD,GAAIlD,KAAK8C,MAAMC,aAAa,aAAc,CACzC/C,KAAK2C,O,EAIC,oBAAA9B,GACP,GAAIb,KAAKmD,oBAAqB,CAC7B,M,CAGD,GAAInD,KAAK8C,MAAMC,aAAa,aAAc,CACzC/C,KAAK2C,QACL,M,CAGD3C,KAAK4C,O,CAGE,KAAAnB,CAAM2B,GACbpD,KAAK8C,MAAQM,EACb,GAAIA,EAAS,CACZpD,KAAKG,UACLH,KAAKC,QAAU,KAEf,GAAID,KAAK0C,KAAM,CACdW,YAAW,IAAMrD,KAAK4C,SAAS,I,GAK1B,KAAAA,GACP,IAAK5C,KAAKC,QAAS,CAClB,M,CAID,GAAID,KAAKoB,eAAgB,CACxBpB,KAAK8C,MAAMQ,MAAMC,MAAQ,GAAGvD,KAAKW,SAAS6C,e,CAG3CxD,KAAKK,SAAWoD,EAAWzD,KAAKiD,IAAKjD,KAAK8C,OAAO,IAAM9C,KAAKG,YAE5DH,KAAK8C,MAAMY,aAAa,YAAa,IACrC1D,KAAK2D,OAAOC,KAAK,K,CAGV,KAAAjB,GACP,IAAK3C,KAAKC,SAAWD,KAAK0C,KAAM,CAC/B,M,CAGD,GAAI1C,KAAKK,SAAU,CAClBL,KAAKK,WACLL,KAAKK,SAAW,I,CAIjBL,KAAK8C,MAAMe,gBAAgB,aAC3B7D,KAAK2D,OAAOC,KAAK,M,CAGV,OAAAzD,GACP,IAAKH,KAAK8C,MAAO,CAChB,M,CAGDgB,EAAgB9D,KAAKiD,IAAKjD,KAAK8C,MAAO,CACrCpB,UAAW1B,KAAK0B,UAChBC,SAAU3B,KAAK2B,SACfoC,WAAY,CAACC,EAAO,GAAIC,IAAQC,OAC9BC,MAAK,EAAGC,IAAGC,IAAG3C,gBAChB1B,KAAK8C,MAAMwB,QAAQ5C,UAAYA,EAC/B6C,OAAOC,OAAOxE,KAAK8C,MAAMQ,MAAO,CAC/BmB,IAAK,GAAGJ,MACRK,KAAM,GAAGN,OACR,G,0FChRL,MAAMO,EAA+B,u/V,MCQxBC,EAAgB,M,qCAIF,M,aAKgB,U,iBAKX,K,oBAO/B,MAAAtE,GACC,OACCC,EAACC,EAAI,CACJC,MAAO,wBAAwBT,KAAK6E,QAAU,YAC7C7E,KAAK8E,aAAe,WAGpB9E,KAAK+E,MAAQxE,EAAA,UAAQyE,QAAShF,KAAK+E,OAEnC/E,KAAKgF,UAAY,YACjBzE,EAAA,SACC0E,KAAK,WACLxE,MAAM,mCACNyE,QAASlF,KAAK6E,SAIhBtE,EAAA,OAAKE,MAAM,kBACVF,EAAA,c"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import{r as t,c as s,h as i,H as e}from"./p-e4d5e7a7.js";function n(t){var s,i,e="";if("string"==typeof t||"number"==typeof t)e+=t;else if("object"==typeof t)if(Array.isArray(t))for(s=0;s<t.length;s++)t[s]&&(i=n(t[s]))&&(e&&(e+=" "),e+=i);else for(s in t)t[s]&&(e&&(e+=" "),e+=s);return e}function o(){for(var t,s,i=0,e="";i<arguments.length;)(t=arguments[i++])&&(s=n(t))&&(e&&(e+=" "),e+=s);return e}const h=typeof window!=="undefined"&&typeof window.document!=="undefined";const r=h?window:{};const a=h?"ontouchstart"in r.document.documentElement:false;const c=h?"PointerEvent"in r:false;const l="cropper";const u=`${l}-canvas`;const f=`${l}-crosshair`;const p=`${l}-grid`;const d=`${l}-handle`;const b=`${l}-image`;const m=`${l}-selection`;const g=`${l}-shade`;const w=`${l}-viewer`;const v="select";const $="move";const k="scale";const y="rotate";const x="transform";const z="none";const M="n-resize";const C="e-resize";const A="s-resize";const j="w-resize";const O="ne-resize";const S="nw-resize";const T="se-resize";const E="sw-resize";const I="action";const N=a?"touchend touchcancel":"mouseup";const X=a?"touchmove":"mousemove";const Y=a?"touchstart":"mousedown";const R=c?"pointerdown":Y;const W=c?"pointermove":X;const P=c?"pointerup pointercancel":N;const _="error";const D="keydown";const L="load";const H="wheel";const B="action";const F="actionend";const U="actionmove";const K="actionstart";const Z="change";const q="transform";function G(t){return typeof t==="string"}const J=Number.isNaN||r.isNaN;function Q(t){return typeof t==="number"&&!J(t)}function V(t){return Q(t)&&t>0&&t<Infinity}function tt(t){return typeof t==="undefined"}function st(t){return typeof t==="object"&&t!==null}const{hasOwnProperty:it}=Object.prototype;function et(t){if(!st(t)){return false}try{const{constructor:s}=t;const{prototype:i}=s;return s&&i&&it.call(i,"isPrototypeOf")}catch(t){return false}}function nt(t){return typeof t==="function"}function ot(t){return typeof t==="object"&&t!==null&&t.nodeType===1}const ht=/([a-z\d])([A-Z])/g;function rt(t){return String(t).replace(ht,"$1-$2").toLowerCase()}const at=/-[A-z\d]/g;function ct(t){return t.replace(at,(t=>t.slice(1).toUpperCase()))}const lt=/\s\s*/;function ut(t,s,i,e){s.trim().split(lt).forEach((s=>{t.removeEventListener(s,i,e)}))}function ft(t,s,i,e){s.trim().split(lt).forEach((s=>{t.addEventListener(s,i,e)}))}function pt(t,s,i,e){ft(t,s,i,Object.assign(Object.assign({},e),{once:true}))}const dt={bubbles:true,cancelable:true,composed:true};function bt(t,s,i,e){return t.dispatchEvent(new CustomEvent(s,Object.assign(Object.assign(Object.assign({},dt),{detail:i}),e)))}const mt=Promise.resolve();function gt(t,s){return s?mt.then(t?s.bind(t):s):mt}function wt(t){const{documentElement:s}=t.ownerDocument;const i=t.getBoundingClientRect();return{left:i.left+(r.pageXOffset-s.clientLeft),top:i.top+(r.pageYOffset-s.clientTop)}}const vt=/deg|g?rad|turn$/i;function $t(t){const s=parseFloat(t)||0;if(s!==0){const[i="rad"]=String(t).match(vt)||[];switch(i.toLowerCase()){case"deg":return s/360*(Math.PI*2);case"grad":return s/400*(Math.PI*2);case"turn":return s*(Math.PI*2)}}return s}const kt="contain";const yt="cover";function xt(t,s=kt){const{aspectRatio:i}=t;let{width:e,height:n}=t;const o=V(e);const h=V(n);if(o&&h){const t=n*i;if(s===kt&&t>e||s===yt&&t<e){n=e/i}else{e=n*i}}else if(o){n=e/i}else if(h){e=n*i}return{width:e,height:n}}function zt(t,...s){if(s.length===0){return t}const[i,e,n,o,h,r]=t;const[a,c,l,u,f,p]=s[0];t=[i*a+n*c,e*a+o*c,i*l+n*u,e*l+o*u,i*f+n*p+h,e*f+o*p+r];return zt(t,...s.slice(1))}var Mt=`:host([hidden]){display:none!important}`;const Ct=/left|top|width|height/i;const At="open";const jt=new WeakMap;const Ot=new WeakMap;const St=new Map;const Tt=r.document&&Array.isArray(r.document.adoptedStyleSheets)&&"replaceSync"in r.CSSStyleSheet.prototype;class Et extends HTMLElement{get $sharedStyle(){return`${this.themeColor?`:host{--theme-color: ${this.themeColor};}`:""}${Mt}`}constructor(){var t,s;super();this.shadowRootMode=At;this.slottable=true;const i=(s=(t=Object.getPrototypeOf(this))===null||t===void 0?void 0:t.constructor)===null||s===void 0?void 0:s.$name;if(i){St.set(i,this.tagName.toLowerCase())}}static get observedAttributes(){return["shadow-root-mode","slottable","theme-color"]}attributeChangedCallback(t,s,i){if(Object.is(i,s)){return}const e=ct(t);const n=this[e];let o=i;switch(typeof n){case"boolean":o=i!==null&&i!=="false";break;case"number":o=Number(i);break}this[e]=o;switch(t){case"theme-color":{const t=Ot.get(this);const s=this.$sharedStyle;if(t&&s){if(Tt){t.replaceSync(s)}else{t.textContent=s}}break}}}$propertyChangedCallback(t,s,i){if(Object.is(i,s)){return}t=rt(t);switch(typeof i){case"boolean":if(i===true){if(!this.hasAttribute(t)){this.setAttribute(t,"")}}else{this.removeAttribute(t)}break;case"number":if(J(i)){i=""}else{i=String(i)}default:if(i){if(this.getAttribute(t)!==i){this.setAttribute(t,i)}}else{this.removeAttribute(t)}}}connectedCallback(){Object.getPrototypeOf(this).constructor.observedAttributes.forEach((t=>{const s=ct(t);let i=this[s];if(!tt(i)){this.$propertyChangedCallback(s,undefined,i)}Object.defineProperty(this,s,{enumerable:true,configurable:true,get(){return i},set(t){const e=i;i=t;this.$propertyChangedCallback(s,e,t)}})}));const t=this.attachShadow({mode:this.shadowRootMode||At});if(!this.shadowRoot){jt.set(this,t)}Ot.set(this,this.$addStyles(this.$sharedStyle));if(this.$style){this.$addStyles(this.$style)}if(this.$template){const s=document.createElement("template");s.innerHTML=this.$template;t.appendChild(s.content)}if(this.slottable){const s=document.createElement("slot");t.appendChild(s)}}disconnectedCallback(){if(Ot.has(this)){Ot.delete(this)}if(jt.has(this)){jt.delete(this)}}$getTagNameOf(t){var s;return(s=St.get(t))!==null&&s!==void 0?s:t}$setStyles(t){Object.keys(t).forEach((s=>{let i=t[s];if(Q(i)){if(i!==0&&Ct.test(s)){i=`${i}px`}else{i=String(i)}}this.style[s]=i}));return this}$getShadowRoot(){return this.shadowRoot||jt.get(this)}$addStyles(t){let s;const i=this.$getShadowRoot();if(Tt){s=new CSSStyleSheet;s.replaceSync(t);i.adoptedStyleSheets=i.adoptedStyleSheets.concat(s)}else{s=document.createElement("style");s.textContent=t;i.appendChild(s)}return s}$emit(t,s,i){return bt(this,t,s,i)}$nextTick(t){return gt(this,t)}static $define(t,s){if(st(t)){s=t;t=""}if(!t){t=this.$name||this.name}t=rt(t);if(h&&r.customElements&&!r.customElements.get(t)){customElements.define(t,this,s)}}}Et.$version="2.0.0-beta.4";var It=`:host{display:block;min-height:100px;min-width:200px;overflow:hidden;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([background]){background-color:#fff;background-image:repeating-linear-gradient(45deg,#ccc 25%,transparent 0,transparent 75%,#ccc 0,#ccc),repeating-linear-gradient(45deg,#ccc 25%,transparent 0,transparent 75%,#ccc 0,#ccc);background-image:repeating-conic-gradient(#ccc 0 25%,#fff 0 50%);background-position:0 0,.5rem .5rem;background-size:1rem 1rem}:host([disabled]){pointer-events:none}:host([disabled]):after{bottom:0;content:"";cursor:not-allowed;display:block;left:0;pointer-events:none;position:absolute;right:0;top:0}`;class Nt extends Et{constructor(){super(...arguments);this.$onPointerDown=null;this.$onPointerMove=null;this.$onPointerUp=null;this.$onWheel=null;this.$wheeling=false;this.$pointers=new Map;this.$style=It;this.$action=z;this.background=false;this.disabled=false;this.scaleStep=.1;this.themeColor="#39f"}static get observedAttributes(){return super.observedAttributes.concat(["background","disabled","scale-step"])}connectedCallback(){super.connectedCallback();if(!this.disabled){this.$bind()}}disconnectedCallback(){if(!this.disabled){this.$unbind()}super.disconnectedCallback()}$propertyChangedCallback(t,s,i){if(Object.is(i,s)){return}super.$propertyChangedCallback(t,s,i);switch(t){case"disabled":if(i){this.$unbind()}else{this.$bind()}break}}$bind(){if(!this.$onPointerDown){this.$onPointerDown=this.$handlePointerDown.bind(this);ft(this,R,this.$onPointerDown)}if(!this.$onPointerMove){this.$onPointerMove=this.$handlePointerMove.bind(this);ft(this.ownerDocument,W,this.$onPointerMove)}if(!this.$onPointerUp){this.$onPointerUp=this.$handlePointerUp.bind(this);ft(this.ownerDocument,P,this.$onPointerUp)}if(!this.$onWheel){this.$onWheel=this.$handleWheel.bind(this);ft(this,H,this.$onWheel,{passive:false,capture:true})}}$unbind(){if(this.$onPointerDown){ut(this,R,this.$onPointerDown);this.$onPointerDown=null}if(this.$onPointerMove){ut(this.ownerDocument,W,this.$onPointerMove);this.$onPointerMove=null}if(this.$onPointerUp){ut(this.ownerDocument,P,this.$onPointerUp);this.$onPointerUp=null}if(this.$onWheel){ut(this,H,this.$onWheel,{capture:true});this.$onWheel=null}}$handlePointerDown(t){const{buttons:s,button:i,type:e}=t;if(this.disabled||(e==="pointerdown"&&t.pointerType==="mouse"||e==="mousedown")&&(Q(s)&&s!==1||Q(i)&&i!==0||t.ctrlKey)){return}const{$pointers:n}=this;let o="";if(t.changedTouches){Array.from(t.changedTouches).forEach((({identifier:t,pageX:s,pageY:i})=>{n.set(t,{startX:s,startY:i,endX:s,endY:i})}))}else{const{pointerId:s=0,pageX:i,pageY:e}=t;n.set(s,{startX:i,startY:e,endX:i,endY:e})}if(n.size>1){o=x}else if(ot(t.target)){o=t.target.action||t.target.getAttribute(I)||""}if(this.$emit(K,{action:o,relatedEvent:t})===false){return}t.preventDefault();this.$action=o;this.style.willChange="transform"}$handlePointerMove(t){const{$action:s,$pointers:i}=this;if(this.disabled||s===z||i.size===0){return}if(this.$emit(U,{action:s,relatedEvent:t})===false){return}t.preventDefault();if(t.changedTouches){Array.from(t.changedTouches).forEach((({identifier:t,pageX:s,pageY:e})=>{const n=i.get(t);if(n){Object.assign(n,{endX:s,endY:e})}}))}else{const{pointerId:s=0,pageX:e,pageY:n}=t;const o=i.get(s);if(o){Object.assign(o,{endX:e,endY:n})}}const e={action:s,relatedEvent:t};if(s===x){const s=new Map(i);let n=0;let o=0;let h=0;let r=0;let a=t.pageX;let c=t.pageY;i.forEach(((t,i)=>{s.delete(i);s.forEach((s=>{let i=s.startX-t.startX;let e=s.startY-t.startY;let l=s.endX-t.endX;let u=s.endY-t.endY;let f=0;let p=0;let d=0;let b=0;if(i===0){if(e<0){d=Math.PI*2}else if(e>0){d=Math.PI}}else if(i>0){d=Math.PI/2+Math.atan(e/i)}else if(i<0){d=Math.PI*1.5+Math.atan(e/i)}if(l===0){if(u<0){b=Math.PI*2}else if(u>0){b=Math.PI}}else if(l>0){b=Math.PI/2+Math.atan(u/l)}else if(l<0){b=Math.PI*1.5+Math.atan(u/l)}if(b>0||d>0){const i=b-d;const e=Math.abs(i);if(e>n){n=e;h=i;a=(t.startX+s.startX)/2;c=(t.startY+s.startY)/2}}i=Math.abs(i);e=Math.abs(e);l=Math.abs(l);u=Math.abs(u);if(i>0&&e>0){f=Math.sqrt(i*i+e*e)}else if(i>0){f=i}else if(e>0){f=e}if(l>0&&u>0){p=Math.sqrt(l*l+u*u)}else if(l>0){p=l}else if(u>0){p=u}if(f>0&&p>0){const i=(p-f)/f;const e=Math.abs(i);if(e>o){o=e;r=i;a=(t.startX+s.startX)/2;c=(t.startY+s.startY)/2}}}))}));const l=n>0;const u=o>0;if(l&&u){e.rotate=h;e.scale=r;e.centerX=a;e.centerY=c}else if(l){e.action=y;e.rotate=h;e.centerX=a;e.centerY=c}else if(u){e.action=k;e.scale=r;e.centerX=a;e.centerY=c}else{e.action=z}}else{const[t]=Array.from(i.values());Object.assign(e,t)}i.forEach((t=>{t.startX=t.endX;t.startY=t.endY}));if(e.action!==z){this.$emit(B,e,{cancelable:false})}}$handlePointerUp(t){const{$action:s,$pointers:i}=this;if(this.disabled||s===z){return}if(this.$emit(F,{action:s,relatedEvent:t})===false){return}t.preventDefault();if(t.changedTouches){Array.from(t.changedTouches).forEach((({identifier:t})=>{i.delete(t)}))}else{const{pointerId:s=0}=t;i.delete(s)}if(i.size===0){this.style.willChange="";this.$action=z}}$handleWheel(t){if(this.disabled){return}t.preventDefault();if(this.$wheeling){return}this.$wheeling=true;setTimeout((()=>{this.$wheeling=false}),50);const s=t.deltaY>0?-1:1;const i=s*this.scaleStep;this.$emit(B,{action:k,scale:i,relatedEvent:t},{cancelable:false})}$setAction(t){if(G(t)){this.$action=t}return this}$toCanvas(t){return new Promise(((s,i)=>{if(!this.isConnected){i(new Error("The current element is not connected to the DOM."));return}const e=document.createElement("canvas");let n=this.offsetWidth;let o=this.offsetHeight;let h=1;if(et(t)&&(V(t.width)||V(t.height))){({width:n,height:o}=xt({aspectRatio:n/o,width:t.width,height:t.height}));h=n/this.offsetWidth}e.width=n;e.height=o;const r=this.querySelector(this.$getTagNameOf(b));if(!r){s(e);return}r.$ready().then((i=>{const a=e.getContext("2d");if(a){const[s,c,l,u,f,p]=r.$getTransform();let d=f;let b=p;let m=i.naturalWidth;let g=i.naturalHeight;if(h!==1){d*=h;b*=h;m*=h;g*=h}const w=m/2;const v=g/2;a.fillStyle="transparent";a.fillRect(0,0,n,o);if(et(t)&&nt(t.beforeDraw)){t.beforeDraw.call(this,a,e)}a.save();a.translate(w,v);a.transform(s,c,l,u,d,b);a.translate(-w,-v);a.drawImage(i,0,0,m,g);a.restore()}s(e)})).catch(i)}))}}Nt.$name=u;Nt.$version="2.0.0-beta.4";var Xt=`:host{display:inline-block}img{display:block;height:100%;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}`;const Yt=new WeakMap;const Rt=["alt","crossorigin","decoding","importance","loading","referrerpolicy","sizes","src","srcset"];class Wt extends Et{constructor(){super(...arguments);this.$matrix=[1,0,0,1,0,0];this.$onLoad=null;this.$onCanvasAction=null;this.$onCanvasActionEnd=null;this.$onCanvasActionStart=null;this.$actionStartTarget=null;this.$style=Xt;this.$image=new Image;this.rotatable=true;this.scalable=true;this.skewable=true;this.slottable=false;this.translatable=true}set $canvas(t){Yt.set(this,t)}get $canvas(){return Yt.get(this)}static get observedAttributes(){return super.observedAttributes.concat(Rt,["rotatable","scalable","skewable","translatable"])}attributeChangedCallback(t,s,i){if(Object.is(i,s)){return}super.attributeChangedCallback(t,s,i);if(Rt.includes(t)){this.$image.setAttribute(t,i)}}connectedCallback(){super.connectedCallback();const{$image:t}=this;const s=this.closest(this.$getTagNameOf(u));if(s){this.$canvas=s;this.$setStyles({display:"block",position:"absolute"});this.$onCanvasActionStart=t=>{var s,i;this.$actionStartTarget=(i=(s=t.detail)===null||s===void 0?void 0:s.relatedEvent)===null||i===void 0?void 0:i.target};this.$onCanvasActionEnd=()=>{this.$actionStartTarget=null};this.$onCanvasAction=this.$handleAction.bind(this);ft(s,K,this.$onCanvasActionStart);ft(s,F,this.$onCanvasActionEnd);ft(s,B,this.$onCanvasAction)}this.$onLoad=this.$handleLoad.bind(this);ft(t,L,this.$onLoad);this.$getShadowRoot().appendChild(t)}disconnectedCallback(){const{$image:t,$canvas:s}=this;if(s){if(this.$onCanvasActionStart){ut(s,K,this.$onCanvasActionStart);this.$onCanvasActionStart=null}if(this.$onCanvasActionEnd){ut(s,F,this.$onCanvasActionEnd);this.$onCanvasActionEnd=null}if(this.$onCanvasAction){ut(s,B,this.$onCanvasAction);this.$onCanvasAction=null}}if(t&&this.$onLoad){ut(t,L,this.$onLoad);this.$onLoad=null}this.$getShadowRoot().removeChild(t);super.disconnectedCallback()}$handleLoad(){const{$image:t}=this;this.$setStyles({width:t.naturalWidth,height:t.naturalHeight});if(this.$canvas){this.$center("cover")}}$handleAction(t){if(this.hidden||!(this.rotatable||this.scalable||this.translatable)){return}const{$canvas:s}=this;const{detail:i}=t;if(i){const{relatedEvent:t}=i;let{action:e}=i;if(e===x&&(!this.rotatable||!this.scalable)){if(this.rotatable){e=y}else if(this.scalable){e=k}else{e=z}}switch(e){case $:if(this.translatable){const t=this.$getTagNameOf(m);let e=s.querySelector(t);if(e&&e.multiple&&!e.active){e=s.querySelector(`${t}[active]`)}if(!e||e.hidden||!e.movable||!(this.$actionStartTarget&&e.contains(this.$actionStartTarget))){this.$move(i.endX-i.startX,i.endY-i.startY)}}break;case y:if(this.rotatable){if(t){const{x:s,y:e}=this.getBoundingClientRect();this.$rotate(i.rotate,t.clientX-s,t.clientY-e)}else{this.$rotate(i.rotate)}}break;case k:if(this.scalable){if(t){const{x:s,y:e}=this.getBoundingClientRect();this.$zoom(i.scale,t.clientX-s,t.clientY-e)}else{this.$zoom(i.scale)}}break;case x:if(this.rotatable&&this.scalable){const{rotate:s}=i;let{scale:e}=i;if(e<0){e=1/(1-e)}else{e+=1}const n=Math.cos(s);const o=Math.sin(s);const[h,r,a,c]=[n*e,o*e,-o*e,n*e];if(t){const s=this.getBoundingClientRect();const i=t.clientX-s.x;const e=t.clientY-s.y;const[n,o,l,u]=this.$matrix;const f=s.width/2;const p=s.height/2;const d=i-f;const b=e-p;const m=(d*u-l*b)/(n*u-l*o);const g=(b-o*m)/u;this.$transform(h,r,a,c,m*(1-h)+g*a,g*(1-c)+m*r)}else{this.$transform(h,r,a,c,0,0)}}break}}}$ready(t){const{$image:s}=this;const i=new Promise(((t,i)=>{const e=new Error("Failed to load the image source");if(s.complete){if(s.naturalWidth>0&&s.naturalHeight>0){t(s)}else{i(e)}}else{const n=()=>{ut(s,_,o);t(s)};const o=()=>{ut(s,L,n);i(e)};pt(s,L,n);pt(s,_,o)}}));if(nt(t)){i.then((s=>{t(s);return s}))}return i}$center(t){const{parentElement:s}=this;if(!s){return this}const i=s.getBoundingClientRect();const e=i.width;const n=i.height;const{x:o,y:h,width:r,height:a}=this.getBoundingClientRect();const c=o+r/2;const l=h+a/2;const u=i.x+e/2;const f=i.y+n/2;this.$move(u-c,f-l);if(t&&(r!==e||a!==n)){const s=e/r;const i=n/a;switch(t){case"cover":this.$scale(Math.max(s,i));break;case"contain":this.$scale(Math.min(s,i));break}}return this}$move(t,s=t){if(this.translatable&&Q(t)&&Q(s)){const[i,e,n,o]=this.$matrix;const h=(t*o-n*s)/(i*o-n*e);const r=(s-e*h)/o;this.$translate(h,r)}return this}$moveTo(t,s=t){if(this.translatable&&Q(t)&&Q(s)){const[i,e,n,o]=this.$matrix;const h=(t*o-n*s)/(i*o-n*e);const r=(s-e*h)/o;this.$setTransform(i,e,n,o,h,r)}return this}$rotate(t,s,i){if(this.rotatable){const e=$t(t);const n=Math.cos(e);const o=Math.sin(e);const[h,r,a,c]=[n,o,-o,n];if(Q(s)&&Q(i)){const[t,e,n,o]=this.$matrix;const{width:l,height:u}=this.getBoundingClientRect();const f=l/2;const p=u/2;const d=s-f;const b=i-p;const m=(d*o-n*b)/(t*o-n*e);const g=(b-e*m)/o;this.$transform(h,r,a,c,m*(1-h)-g*a,g*(1-c)-m*r)}else{this.$transform(h,r,a,c,0,0)}}return this}$zoom(t,s,i){if(!this.scalable||t===0){return this}if(t<0){t=1/(1-t)}else{t+=1}if(Q(s)&&Q(i)){const[e,n,o,h]=this.$matrix;const{width:r,height:a}=this.getBoundingClientRect();const c=r/2;const l=a/2;const u=s-c;const f=i-l;const p=(u*h-o*f)/(e*h-o*n);const d=(f-n*p)/h;this.$transform(t,0,0,t,p*(1-t),d*(1-t))}else{this.$scale(t)}return this}$scale(t,s=t){if(this.scalable){this.$transform(t,0,0,s,0,0)}return this}$skew(t,s=0){if(this.skewable){const i=$t(t);const e=$t(s);this.$transform(1,Math.tan(e),Math.tan(i),1,0,0)}return this}$translate(t,s=t){if(this.translatable&&Q(t)&&Q(s)){this.$transform(1,0,0,1,t,s)}return this}$transform(t,s,i,e,n,o){if(Q(t)&&Q(s)&&Q(i)&&Q(e)&&Q(n)&&Q(o)){return this.$setTransform(zt(this.$matrix,[t,s,i,e,n,o]))}return this}$setTransform(t,s,i,e,n,o){if(this.rotatable||this.scalable||this.skewable||this.translatable){if(Array.isArray(t)){[t,s,i,e,n,o]=t}if(Q(t)&&Q(s)&&Q(i)&&Q(e)&&Q(n)&&Q(o)){const h=[t,s,i,e,n,o];if(this.$emit(q,{matrix:h,oldMatrix:this.$matrix})===false){return this}this.$matrix=h;this.style.transform=`matrix(${h.join(", ")})`}}return this}$getTransform(){return this.$matrix.slice()}$resetTransform(){return this.$setTransform([1,0,0,1,0,0])}}Wt.$name=b;Wt.$version="2.0.0-beta.4";var Pt=`:host{display:block;height:0;left:0;outline:var(--theme-color) solid 1px;position:relative;top:0;width:0}:host([transparent]){outline-color:transparent}`;const _t=new WeakMap;class Dt extends Et{constructor(){super(...arguments);this.$onCanvasChange=null;this.$onCanvasActionEnd=null;this.$onCanvasActionStart=null;this.$style=Pt;this.x=0;this.y=0;this.width=0;this.height=0;this.slottable=false;this.themeColor="rgba(0, 0, 0, 0.65)"}set $canvas(t){_t.set(this,t)}get $canvas(){return _t.get(this)}static get observedAttributes(){return super.observedAttributes.concat(["height","width","x","y"])}connectedCallback(){super.connectedCallback();const t=this.closest(this.$getTagNameOf(u));if(t){this.$canvas=t;this.style.position="absolute";const s=t.querySelector(this.$getTagNameOf(m));if(s){this.$onCanvasActionStart=t=>{if(s.hidden&&t.detail.action===v){this.hidden=false}};this.$onCanvasActionEnd=t=>{if(s.hidden&&t.detail.action===v){this.hidden=true}};this.$onCanvasChange=t=>{const{x:i,y:e,width:n,height:o}=t.detail;this.$change(i,e,n,o);if(s.hidden||i===0&&e===0&&n===0&&o===0){this.hidden=true}};ft(t,K,this.$onCanvasActionStart);ft(t,F,this.$onCanvasActionEnd);ft(t,Z,this.$onCanvasChange)}}this.$render()}disconnectedCallback(){const{$canvas:t}=this;if(t){if(this.$onCanvasActionStart){ut(t,K,this.$onCanvasActionStart);this.$onCanvasActionStart=null}if(this.$onCanvasActionEnd){ut(t,F,this.$onCanvasActionEnd);this.$onCanvasActionEnd=null}if(this.$onCanvasChange){ut(t,Z,this.$onCanvasChange);this.$onCanvasChange=null}}super.disconnectedCallback()}$change(t,s,i=this.width,e=this.height){if(!Q(t)||!Q(s)||!Q(i)||!Q(e)||t===this.x&&s===this.y&&i===this.width&&e===this.height){return this}if(this.hidden){this.hidden=false}this.x=t;this.y=s;this.width=i;this.height=e;return this.$render()}$reset(){return this.$change(0,0,0,0)}$render(){return this.$setStyles({transform:`translate(${this.x}px, ${this.y}px)`,width:this.width,height:this.height,outlineWidth:r.innerWidth})}}Dt.$name=g;Dt.$version="2.0.0-beta.4";var Lt=`:host{background-color:var(--theme-color);display:block}:host([action=move]),:host([action=select]){height:100%;left:0;position:absolute;top:0;width:100%}:host([action=move]){cursor:move}:host([action=select]){cursor:crosshair}:host([action$=-resize]){background-color:transparent;height:15px;position:absolute;width:15px}:host([action$=-resize]):after{background-color:var(--theme-color);content:"";display:block;height:5px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:5px}:host([action=n-resize]),:host([action=s-resize]){cursor:ns-resize;left:50%;transform:translateX(-50%);width:100%}:host([action=n-resize]){top:-8px}:host([action=s-resize]){bottom:-8px}:host([action=e-resize]),:host([action=w-resize]){cursor:ew-resize;height:100%;top:50%;transform:translateY(-50%)}:host([action=e-resize]){right:-8px}:host([action=w-resize]){left:-8px}:host([action=ne-resize]){cursor:nesw-resize;right:-8px;top:-8px}:host([action=nw-resize]){cursor:nwse-resize;left:-8px;top:-8px}:host([action=se-resize]){bottom:-8px;cursor:nwse-resize;right:-8px}:host([action=se-resize]):after{height:15px;width:15px}@media (pointer:coarse){:host([action=se-resize]):after{height:10px;width:10px}}@media (pointer:fine){:host([action=se-resize]):after{height:5px;width:5px}}:host([action=sw-resize]){bottom:-8px;cursor:nesw-resize;left:-8px}:host([plain]){background-color:transparent}`;class Ht extends Et{constructor(){super(...arguments);this.$onCanvasCropEnd=null;this.$onCanvasCropStart=null;this.$style=Lt;this.action=z;this.plain=false;this.slottable=false;this.themeColor="rgba(51, 153, 255, 0.5)"}static get observedAttributes(){return super.observedAttributes.concat(["action","plain"])}}Ht.$name=d;Ht.$version="2.0.0-beta.4";var Bt=`:host{display:block;left:0;position:relative;right:0}:host([outlined]){outline:1px solid var(--theme-color)}:host([multiple]){outline:1px dashed hsla(0,0%,100%,.5)}:host([multiple]):after{bottom:0;content:"";cursor:pointer;display:block;left:0;position:absolute;right:0;top:0}:host([multiple][active]){outline-color:var(--theme-color);z-index:1}:host([multiple])>*{visibility:hidden}:host([multiple][active])>*{visibility:visible}:host([multiple][active]):after{display:none}`;const Ft=new WeakMap;class Ut extends Et{constructor(){super(...arguments);this.$onCanvasAction=null;this.$onCanvasActionStart=null;this.$onCanvasActionEnd=null;this.$onDocumentKeyDown=null;this.$action="";this.$actionStartTarget=null;this.$style=Bt;this.x=0;this.y=0;this.width=0;this.height=0;this.aspectRatio=NaN;this.initialAspectRatio=NaN;this.initialCoverage=NaN;this.active=false;this.movable=false;this.resizable=false;this.zoomable=false;this.multiple=false;this.keyboard=false;this.outlined=false;this.precise=false}set $canvas(t){Ft.set(this,t)}get $canvas(){return Ft.get(this)}static get observedAttributes(){return super.observedAttributes.concat(["active","aspect-ratio","height","initial-aspect-ratio","initial-coverage","keyboard","movable","multiple","outlined","precise","resizable","width","x","y","zoomable"])}$propertyChangedCallback(t,s,i){if(Object.is(i,s)){return}super.$propertyChangedCallback(t,s,i);switch(t){case"aspectRatio":if(!V(i)){this.aspectRatio=NaN}break;case"initialAspectRatio":if(!V(i)){this.initialAspectRatio=NaN}break;case"initialCoverage":if(!V(i)||i>1){this.initialCoverage=NaN}break;case"keyboard":this.$nextTick((()=>{if(this.$canvas){if(i){if(!this.$onDocumentKeyDown){this.$onDocumentKeyDown=this.$handleKeyDown.bind(this);ft(this.ownerDocument,D,this.$onDocumentKeyDown)}}else if(this.$onDocumentKeyDown){ut(this.ownerDocument,D,this.$onDocumentKeyDown);this.$onDocumentKeyDown=null}}}));break;case"multiple":this.$nextTick((()=>{if(this.$canvas){const t=this.$getSelections();if(i){t.forEach((t=>{t.active=false}));this.active=true;this.$emit(Z,{x:this.x,y:this.y,width:this.width,height:this.height})}else{this.active=false;t.slice(1).forEach((t=>{this.$removeSelection(t)}))}}}));break}}connectedCallback(){super.connectedCallback();const t=this.closest(this.$getTagNameOf(u));if(t){this.$canvas=t;this.$setStyles({position:"absolute",transform:`translate(${this.x}px, ${this.y}px)`});if(!this.hidden){this.$render()}const{initialCoverage:s,parentElement:i}=this;if(V(s)&&i){const t=this.aspectRatio||this.initialAspectRatio;const{offsetWidth:e,offsetHeight:n}=i;let o=e*s;let h=n*s;if(V(t)){({width:o,height:h}=xt({aspectRatio:t,width:o,height:h}))}this.$change(this.x,this.y,o,h);this.$center()}this.$onCanvasActionStart=this.$handleActionStart.bind(this);this.$onCanvasActionEnd=this.$handleActionEnd.bind(this);this.$onCanvasAction=this.$handleAction.bind(this);ft(t,K,this.$onCanvasActionStart);ft(t,F,this.$onCanvasActionStart);ft(t,B,this.$onCanvasAction)}else{this.$render()}}disconnectedCallback(){const{$canvas:t}=this;if(t){if(this.$onCanvasActionStart){ut(t,K,this.$onCanvasActionStart);this.$onCanvasActionStart=null}if(this.$onCanvasActionEnd){ut(t,F,this.$onCanvasActionEnd);this.$onCanvasActionEnd=null}if(this.$onCanvasAction){ut(t,B,this.$onCanvasAction);this.$onCanvasAction=null}}super.disconnectedCallback()}$getSelections(){let t=[];if(this.parentElement){t=Array.from(this.parentElement.querySelectorAll(this.$getTagNameOf(m)))}return t}$createSelection(){const t=this.cloneNode(true);if(this.hasAttribute("id")){t.removeAttribute("id")}this.active=false;if(this.parentElement){this.parentElement.insertBefore(t,this.nextSibling)}return t}$removeSelection(t=this){if(this.parentElement){const s=this.$getSelections();if(s.length>1){const i=s.indexOf(t);const e=s[i+1]||s[i-1];if(e){t.active=false;this.parentElement.removeChild(t);e.active=true;e.$emit(Z,{x:e.x,y:e.y,width:e.width,height:e.height})}}else{this.$reset();this.hidden=true}}}$handleActionStart(t){var s,i;const e=(i=(s=t.detail)===null||s===void 0?void 0:s.relatedEvent)===null||i===void 0?void 0:i.target;this.$action="";this.$actionStartTarget=e;if(!this.hidden&&this.multiple&&!this.active&&e===this&&this.parentElement){this.$getSelections().forEach((t=>{t.active=false}));this.active=true;this.$emit(Z,{x:this.x,y:this.y,width:this.width,height:this.height})}}$handleAction(t){const{currentTarget:s,detail:i}=t;if(s&&i){const{relatedEvent:e}=i;let{action:n}=i;if(!n&&this.multiple){n=this.$action||(e===null||e===void 0?void 0:e.target.action);this.$action=n}if(!n||this.hidden&&n!==v||this.multiple&&!this.active&&n!==k){return}const o=i.endX-i.startX;const h=i.endY-i.startY;const{width:r,height:a}=this;let{aspectRatio:c}=this;if(!V(c)&&t.shiftKey){c=V(r)&&V(a)?r/a:1}switch(n){case v:{const{$canvas:t}=this;const e=wt(s);(this.multiple&&!this.hidden?this.$createSelection():this).$change(i.startX-e.left,i.startY-e.top,o,h,c);n=T;if(o<0){if(h>0){n=E}else if(h<0){n=S}}else if(o>0){if(h<0){n=O}}if(t){t.$action=n}break}case $:if(this.movable&&(this.$actionStartTarget&&this.contains(this.$actionStartTarget))){this.$move(o,h)}break;case k:if(e&&this.zoomable){const t=wt(s);this.$zoom(i.scale,e.pageX-t.left,e.pageY-t.top)}break;default:this.$resize(n,o,h,c)}}}$handleActionEnd(){this.$action="";this.$actionStartTarget=null}$handleKeyDown(t){if(this.hidden||!this.keyboard||this.multiple&&!this.active||t.defaultPrevented){return}switch(t.key){case"Backspace":if(t.metaKey){t.preventDefault();this.$removeSelection()}break;case"Delete":t.preventDefault();this.$removeSelection();break;case"ArrowLeft":t.preventDefault();this.$move(-1,0);break;case"ArrowRight":t.preventDefault();this.$move(1,0);break;case"ArrowUp":t.preventDefault();this.$move(0,-1);break;case"ArrowDown":t.preventDefault();this.$move(0,1);break;case"+":t.preventDefault();this.$zoom(.1);break;case"-":t.preventDefault();this.$zoom(-.1);break}}$center(){const{parentElement:t}=this;if(!t){return this}const s=(t.offsetWidth-this.width)/2;const i=(t.offsetHeight-this.height)/2;return this.$change(s,i)}$move(t,s=t){return this.$moveTo(this.x+t,this.y+s)}$moveTo(t,s=t){if(!this.movable){return this}return this.$change(t,s)}$resize(t,s=0,i=0,e=this.aspectRatio){if(!this.resizable){return this}const n=V(e);const{$canvas:o}=this;let{x:h,y:r,width:a,height:c}=this;switch(t){case M:r+=i;c-=i;if(c<0){t=A;c=-c;r-=c}if(n){s=i*e;h+=s/2;a-=s;if(a<0){a=-a;h-=a}}break;case C:a+=s;if(a<0){t=j;a=-a;h-=a}if(n){i=s/e;r-=i/2;c+=i;if(c<0){c=-c;r-=c}}break;case A:c+=i;if(c<0){t=M;c=-c;r-=c}if(n){s=i*e;h-=s/2;a+=s;if(a<0){a=-a;h-=a}}break;case j:h+=s;a-=s;if(a<0){t=C;a=-a;h-=a}if(n){i=s/e;r+=i/2;c-=i;if(c<0){c=-c;r-=c}}break;case O:if(n){i=-s/e}r+=i;c-=i;a+=s;if(a<0&&c<0){t=E;a=-a;c=-c;h-=a;r-=c}else if(a<0){t=S;a=-a;h-=a}else if(c<0){t=T;c=-c;r-=c}break;case S:if(n){i=s/e}h+=s;r+=i;a-=s;c-=i;if(a<0&&c<0){t=T;a=-a;c=-c;h-=a;r-=c}else if(a<0){t=O;a=-a;h-=a}else if(c<0){t=E;c=-c;r-=c}break;case T:if(n){i=s/e}a+=s;c+=i;if(a<0&&c<0){t=S;a=-a;c=-c;h-=a;r-=c}else if(a<0){t=E;a=-a;h-=a}else if(c<0){t=O;c=-c;r-=c}break;case E:if(n){i=-s/e}h+=s;a-=s;c+=i;if(a<0&&c<0){t=O;a=-a;c=-c;h-=a;r-=c}else if(a<0){t=T;a=-a;h-=a}else if(c<0){t=S;c=-c;r-=c}break}if(o){o.$setAction(t)}return this.$change(h,r,a,c)}$zoom(t,s,i){if(!this.zoomable||t===0){return this}if(t<0){t=1/(1-t)}else{t+=1}const{width:e,height:n}=this;const o=e*t;const h=n*t;let r=this.x;let a=this.y;if(Q(s)&&Q(i)){r-=(o-e)*((s-this.x)/e);a-=(h-n)*((i-this.y)/n)}else{r-=(o-e)/2;a-=(h-n)/2}return this.$change(r,a,o,h)}$change(t,s,i=this.width,e=this.height,n=this.aspectRatio){if(!Q(t)||!Q(s)||!Q(i)||!Q(e)){return this}if(!this.precise){t=Math.round(t);s=Math.round(s);i=Math.round(i);e=Math.round(e)}if(t===this.x&&s===this.y&&i===this.width&&e===this.height){return this}if(this.hidden){this.hidden=false}if(V(n)){({width:i,height:e}=xt({aspectRatio:n,width:i,height:e},"cover"))}if(this.$emit(Z,{x:t,y:s,width:i,height:e})===false){return this}this.x=t;this.y=s;this.width=i;this.height=e;return this.$render()}$reset(){return this.$change(0,0,0,0)}$render(){return this.$setStyles({transform:`translate(${this.x}px, ${this.y}px)`,width:this.width,height:this.height})}$toCanvas(t){return new Promise(((s,i)=>{if(!this.isConnected){i(new Error("The current element is not connected to the DOM."));return}const e=document.createElement("canvas");let{width:n,height:o}=this;let h=1;if(et(t)&&(V(t.width)||V(t.height))){({width:n,height:o}=xt({aspectRatio:n/o,width:t.width,height:t.height}));h=n/this.width}e.width=n;e.height=o;if(!this.$canvas){s(e);return}const r=this.$canvas.querySelector(this.$getTagNameOf(b));if(!r){s(e);return}r.$ready().then((i=>{const a=e.getContext("2d");if(a){const[s,c,l,u,f,p]=r.$getTransform();const d=-this.x;const b=-this.y;const m=(d*u-l*b)/(s*u-l*c);const g=(b-c*m)/u;let w=s*m+l*g+f;let v=c*m+u*g+p;let $=i.naturalWidth;let k=i.naturalHeight;if(h!==1){w*=h;v*=h;$*=h;k*=h}const y=$/2;const x=k/2;a.fillStyle="transparent";a.fillRect(0,0,n,o);if(et(t)&&nt(t.beforeDraw)){t.beforeDraw.call(this,a,e)}a.save();a.translate(y,x);a.transform(s,c,l,u,w,v);a.translate(-y,-x);a.drawImage(i,0,0,$,k);a.restore()}s(e)})).catch(i)}))}}Ut.$name=m;Ut.$version="2.0.0-beta.4";var Kt=`:host{display:flex;flex-direction:column;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([bordered]){border:1px dashed var(--theme-color)}:host([covered]){bottom:0;left:0;position:absolute;right:0;top:0}:host>span{display:flex;flex:1}:host>span+span{border-top:1px dashed var(--theme-color)}:host>span>span{flex:1}:host>span>span+span{border-left:1px dashed var(--theme-color)}`;class Zt extends Et{constructor(){super(...arguments);this.$style=Kt;this.bordered=false;this.columns=3;this.covered=false;this.rows=3;this.slottable=false;this.themeColor="rgba(238, 238, 238, 0.5)"}static get observedAttributes(){return super.observedAttributes.concat(["bordered","columns","covered","rows"])}$propertyChangedCallback(t,s,i){if(Object.is(i,s)){return}super.$propertyChangedCallback(t,s,i);if(t==="rows"||t==="columns"){this.$render()}}connectedCallback(){super.connectedCallback();this.$render()}$render(){const t=this.$getShadowRoot();const s=document.createDocumentFragment();for(let t=0;t<this.rows;t+=1){const t=document.createElement("span");t.setAttribute("role","row");for(let s=0;s<this.columns;s+=1){const s=document.createElement("span");s.setAttribute("role","gridcell");t.appendChild(s)}s.appendChild(t)}if(t){t.innerHTML="";t.appendChild(s)}}}Zt.$name=p;Zt.$version="2.0.0-beta.4";var qt=`:host{display:inline-block;height:1em;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:1em}:host:after,:host:before{background-color:var(--theme-color);content:"";display:block;position:absolute}:host:before{height:1px;left:0;top:50%;transform:translateY(-50%);width:100%}:host:after{height:100%;left:50%;top:0;transform:translateX(-50%);width:1px}:host([centered]){left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}`;class Gt extends Et{constructor(){super(...arguments);this.$style=qt;this.centered=false;this.slottable=false;this.themeColor="rgba(238, 238, 238, 0.5)"}static get observedAttributes(){return super.observedAttributes.concat(["centered"])}}Gt.$name=f;Gt.$version="2.0.0-beta.4";var Jt=`:host{display:block;height:100%;overflow:hidden;position:relative;width:100%}`;const Qt=new WeakMap;const Vt=new WeakMap;const ts=new WeakMap;const ss="both";const is="horizontal";const es="vertical";const ns="none";class os extends Et{constructor(){super(...arguments);this.$onSelectionChange=null;this.$onSourceImageLoad=null;this.$onSourceImageTransform=null;this.$scale=1;this.$style=Jt;this.resize=es;this.selection="";this.slottable=false}set $image(t){Qt.set(this,t)}get $image(){return Qt.get(this)}set $sourceImage(t){ts.set(this,t)}get $sourceImage(){return ts.get(this)}set $selection(t){Vt.set(this,t)}get $selection(){return Vt.get(this)}static get observedAttributes(){return super.observedAttributes.concat(["resize","selection"])}connectedCallback(){super.connectedCallback();let t=null;if(this.selection){t=this.ownerDocument.querySelector(this.selection)}else{t=this.closest(this.$getTagNameOf(m))}if(ot(t)){this.$selection=t;this.$onSelectionChange=this.$handleSelectionChange.bind(this);ft(t,Z,this.$onSelectionChange);const s=t.closest(this.$getTagNameOf(u));if(s){const t=s.querySelector(this.$getTagNameOf(b));if(t){this.$sourceImage=t;this.$image=t.cloneNode(true);this.$getShadowRoot().appendChild(this.$image);this.$onSourceImageLoad=this.$handleSourceImageLoad.bind(this);this.$onSourceImageTransform=this.$handleSourceImageTransform.bind(this);ft(t.$image,L,this.$onSourceImageLoad);ft(t,q,this.$onSourceImageTransform)}}this.$render()}}disconnectedCallback(){const{$selection:t,$sourceImage:s}=this;if(t&&this.$onSelectionChange){ut(t,Z,this.$onSelectionChange);this.$onSelectionChange=null}if(s&&this.$onSourceImageLoad){ut(s.$image,L,this.$onSourceImageLoad);this.$onSourceImageLoad=null}if(s&&this.$onSourceImageTransform){ut(s,q,this.$onSourceImageTransform);this.$onSourceImageTransform=null}super.disconnectedCallback()}$handleSelectionChange(t){this.$render(t.detail)}$handleSourceImageLoad(){const{$image:t,$sourceImage:s}=this;const i=t.getAttribute("src");const e=s.getAttribute("src");if(e&&e!==i){t.setAttribute("src",e);t.$ready((()=>{setTimeout((()=>{const{x:t,y:i}=this.$selection;this.$transformImageByOffset(s.$getTransform(),-t,-i)}))}))}}$handleSourceImageTransform(t){const{x:s,y:i}=this.$selection;this.$transformImageByOffset(t.detail.matrix,-s,-i)}$render(t){const{x:s,y:i,width:e,height:n}=t||this.$selection;const o={};const{clientWidth:h,clientHeight:r}=this;let a=h;let c=r;let l=NaN;switch(this.resize){case ss:l=1;a=e;c=n;o.width=e;o.height=n;break;case is:l=r/n;a=e*l;o.width=a;break;case es:l=h/e;c=n*l;o.height=c;break;case ns:default:if(h>0){l=h/e}else if(r>0){l=r/n}}this.$scale=l;this.$setStyles(o);if(this.$sourceImage){this.$transformImageByOffset(this.$sourceImage.$getTransform(),-s,-i)}}$transformImageByOffset(t,s,i){const{$image:e,$scale:n,$sourceImage:o}=this;if(o&&e&&n>0){const[o,h,r,a,c,l]=t;const u=(s*a-r*i)/(o*a-r*h);const f=(i-h*u)/a;const p=o*u+r*f+c;const d=h*u+a*f+l;e.$ready((t=>{this.$setStyles.call(e,{width:t.naturalWidth*n,height:t.naturalHeight*n})}));e.$setTransform(o,h,r,a,p*n,d*n)}}}os.$name=w;os.$version="2.0.0-beta.4";
|
|
2
|
-
/*! Cropper.js v2.0.0-beta.4 | (c) 2015-present Chen Fengyuan | MIT */Nt.$define();Gt.$define();Zt.$define();Ht.$define();Wt.$define();Ut.$define();Dt.$define();os.$define();const hs=".relative{position:relative!important}.-mt-\\[6px\\]{margin-top:-6px!important}.mb-6{margin-bottom:1.5rem!important}.flex{display:flex!important}.h-4{height:1rem!important}.h-\\[2px\\]{height:2px!important}.w-4{width:1rem!important}.w-full{width:100%!important}.appearance-none{
|
|
3
|
-
//# sourceMappingURL=p-
|
|
2
|
+
/*! Cropper.js v2.0.0-beta.4 | (c) 2015-present Chen Fengyuan | MIT */Nt.$define();Gt.$define();Zt.$define();Ht.$define();Wt.$define();Ut.$define();Dt.$define();os.$define();const hs=".relative{position:relative!important}.-mt-\\[6px\\]{margin-top:-6px!important}.mb-6{margin-bottom:1.5rem!important}.flex{display:flex!important}.h-4{height:1rem!important}.h-\\[2px\\]{height:2px!important}.w-4{width:1rem!important}.w-full{width:100%!important}.appearance-none{appearance:none!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.justify-between{justify-content:space-between!important}.rounded-round{border-radius:100%!important}.border-0{border-width:0!important}*{box-sizing:border-box}:host{align-items:center;display:flex;flex-direction:column;gap:1.5rem;justify-content:space-between;margin-bottom:1.5rem;width:100%}:host .p-input[type=range]{appearance:none;background-color:transparent;position:relative}:host .p-input[type=range]::-webkit-slider-runnable-track{--tw-bg-opacity:1;background-color:rgb(218 230 240/var(--tw-bg-opacity));height:2px}:host .p-input[type=range]::-moz-range-track{--tw-bg-opacity:1;background-color:rgb(218 230 240/var(--tw-bg-opacity));height:2px}:host .p-input[type=range]::-moz-range-thumb,:host .p-input[type=range]::-webkit-slider-thumb{--tw-bg-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity));border-radius:100%;border-width:0;height:1rem;width:1rem}:host .p-input[type=range]::-webkit-slider-thumb{margin-top:-6px}.static{position:static!important}.hidden{display:none!important}.h-\\[17\\.5rem\\]{height:17.5rem!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}.resize{resize:both!important}.gap-2{gap:.5rem!important}.rounded{border-radius:.25rem!important}.border-b{border-bottom-width:1px!important}.border-solid{border-style:solid!important}.border-mystic-medium{--tw-border-opacity:1!important;border-color:rgb(227 236 243/var(--tw-border-opacity))!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.px-14{padding-left:3.5rem!important;padding-right:3.5rem!important}.text-storm-vague{--tw-text-opacity:1!important;color:rgb(152 154 183/var(--tw-text-opacity))!important}@media (min-width:40rem){.tablet\\:max-w-xs{max-width:20rem!important}.tablet\\:px-1{padding-left:.25rem!important;padding-right:.25rem!important}}";const rs=class{constructor(i){t(this,i);this.valueChange=s(this,"valueChange",3);this._maxScale=0;this._minScale=0;this.variant="user";this.value=undefined;this.returnType="base64";this._loaded=false;this._currentScale=0}onResize(){if(this._resizeDebounceTimeout){clearTimeout(this._resizeDebounceTimeout)}this._resizeDebounceTimeout=setTimeout((()=>{this._selectionRef.$center();this._imageRef.$center()}),200)}componentDidLoad(){setTimeout((()=>{this._loaded=true}),200)}render(){return i(e,{class:"p-cropper"},this._loaded&&i("cropper-canvas",{class:"h-[17.5rem] w-full border-0 border-b border-solid border-mystic-medium bg-white",onAction:()=>this._onAction()},i("cropper-image",{src:this.value,alt:"Picture",ref:t=>this._setImageRef(t),scalable:true,crossorigin:"anonymous"}),i("cropper-shade",{class:o({"rounded-round":this.variant==="user",rounded:this.variant==="company"}),"theme-color":"rgba(255, 255, 255, 0.5)",hidden:true}),i("cropper-selection",{"initial-coverage":"0.7","aspect-ratio":"1",ref:t=>this._selectionRef=t}),i("cropper-handle",{action:"move",plain:true})),i("div",{class:"flex w-full items-center gap-2 px-14 text-storm-vague tablet:max-w-xs tablet:px-1"},i("p-icon",{variant:"minus"}),i("input",{class:"p-input w-full",type:"range",min:"0",max:"100",value:this._currentScale,onInput:t=>this._onInput(t.target.value),step:"0.5"}),i("p-icon",{variant:"plus"})))}_setImageRef(t){if(this._imageRef){return}this._imageRef=t;this._imageRef.$ready((t=>setTimeout((()=>this._setInitialState(t)),200)))}_setInitialState(t){let s;if(t.naturalWidth>t.naturalHeight){s=200/t.naturalHeight}if(t.naturalHeight>=t.naturalWidth){s=200/t.naturalWidth}const i=this._imageRef.$getTransform();this._minScale=s;this._maxScale=i[0];this._selectionRef.$resize("nw-resize",200,200,1);this._selectionRef.$center();this._setScale(s);this._toCanvas()}_onAction(){this._setCurrentScale();this._toCanvas()}_setScale(t,s=true,i=true){const e=this._imageRef.$getTransform();this._imageRef.$setTransform([t,0,0,t,e[4],e[5]]);if(s){this._imageRef.$center()}if(i){this._setCurrentScale()}}_setCurrentScale(){const t=this._imageRef.$getTransform();const s=t[0];if(s<this._minScale){this._setScale(this._minScale,true,false);this._currentScale=0;return}if(s>this._maxScale){this._setScale(this._maxScale,true,false);this._currentScale=100;return}if(s===this._minScale){this._currentScale=0;return}if(s===this._maxScale){this._currentScale=100;return}const i=this._maxScale-this._minScale;const e=s-this._minScale;const n=e/i*100;this._currentScale=n}_onInput(t){const s=this._imageRef.$getTransform();const i=s[0];const e=this._maxScale-this._minScale;const n=e*(t/100);if(n===i){return}this._setScale(n+this._minScale,false,false);this._currentScale=t;this._toCanvas()}_toCanvas(){if(this._toCanvasDebounceTimeout){clearTimeout(this._toCanvasDebounceTimeout)}this._toCanvasDebounceTimeout=setTimeout((async()=>{const t=await this._selectionRef.$toCanvas();if(this.returnType==="canvas"){this.valueChange.emit(t);return}const s=t.toDataURL("image/png");this.valueChange.emit(s)}),200)}};rs.style=hs;export{rs as p_cropper};
|
|
3
|
+
//# sourceMappingURL=p-7bf042c9.entry.js.map
|