@paperless/core 1.56.0 → 1.57.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-ec15ee73.entry.js → p-06e1bf69.entry.js} +2 -2
- package/dist/build/{p-ec15ee73.entry.js.map → p-06e1bf69.entry.js.map} +1 -1
- package/dist/build/{p-2cd5062f.entry.js → p-121c24a9.entry.js} +2 -2
- package/dist/{paperless/p-2cd5062f.entry.js.map → build/p-121c24a9.entry.js.map} +1 -1
- package/dist/build/p-4d075970.entry.js +2 -0
- package/dist/{paperless/p-867c00e9.entry.js.map → build/p-4d075970.entry.js.map} +1 -1
- package/dist/build/{p-d408194b.entry.js → p-9b2a5a38.entry.js} +2 -2
- package/dist/build/p-9b2a5a38.entry.js.map +1 -0
- package/dist/build/{p-ef0bfa6c.entry.js → p-b7ba24f7.entry.js} +2 -2
- package/dist/build/{p-ef0bfa6c.entry.js.map → p-b7ba24f7.entry.js.map} +1 -1
- package/dist/build/{p-a2b552f9.entry.js → p-ca61c0f2.entry.js} +2 -2
- package/dist/build/{p-a2b552f9.entry.js.map → p-ca61c0f2.entry.js.map} +1 -1
- package/dist/build/{p-d8641c29.entry.js → p-cab67dea.entry.js} +2 -2
- package/dist/build/{p-d8641c29.entry.js.map → p-cab67dea.entry.js.map} +1 -1
- package/dist/build/{p-2d59a6ce.entry.js → p-ec315c58.entry.js} +2 -2
- package/dist/build/{p-2d59a6ce.entry.js.map → p-ec315c58.entry.js.map} +1 -1
- package/dist/build/{p-f9e9370b.entry.js → p-f37781ca.entry.js} +2 -2
- package/dist/build/{p-f9e9370b.entry.js.map → p-f37781ca.entry.js.map} +1 -1
- package/dist/build/{p-0695e7ef.entry.js → p-f6e3247a.entry.js} +2 -2
- package/dist/{paperless/p-0695e7ef.entry.js.map → build/p-f6e3247a.entry.js.map} +1 -1
- package/dist/build/{p-35c563a7.entry.js → p-f8ed4402.entry.js} +2 -2
- package/dist/build/{p-35c563a7.entry.js.map → p-f8ed4402.entry.js.map} +1 -1
- package/dist/build/{p-46052ca3.entry.js → p-fc021211.entry.js} +2 -2
- package/dist/build/{p-46052ca3.entry.js.map → p-fc021211.entry.js.map} +1 -1
- package/dist/build/paperless.esm.js +1 -1
- package/dist/cjs/p-card-container.cjs.entry.js +1 -1
- package/dist/cjs/p-card-container.cjs.entry.js.map +1 -1
- package/dist/cjs/p-card-header.cjs.entry.js +2 -2
- package/dist/cjs/p-card-header.cjs.entry.js.map +1 -1
- package/dist/cjs/p-divider.cjs.entry.js +1 -1
- package/dist/cjs/p-divider.cjs.entry.js.map +1 -1
- package/dist/cjs/p-dropdown-menu-container.cjs.entry.js +1 -1
- package/dist/cjs/p-dropdown-menu-container.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-helper_3.cjs.entry.js +2 -2
- package/dist/cjs/p-helper_3.cjs.entry.js.map +1 -1
- package/dist/cjs/p-label_3.cjs.entry.js +3 -3
- package/dist/cjs/p-label_3.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-page-size-select_3.cjs.entry.js +1 -1
- package/dist/cjs/p-page-size-select_3.cjs.entry.js.map +1 -1
- package/dist/cjs/p-slider-indicator.cjs.entry.js +1 -1
- package/dist/cjs/p-slider-indicator.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/cjs/p-tooltip.cjs.entry.js +10 -4
- package/dist/cjs/p-tooltip.cjs.entry.js.map +1 -1
- package/dist/collection/components/atoms/card-container/card-container.component.js +1 -1
- package/dist/collection/components/atoms/card-container/card-container.component.js.map +1 -1
- package/dist/collection/components/atoms/card-header/card-header.component.css +1 -1
- package/dist/collection/components/atoms/card-header/card-header.component.js +1 -1
- package/dist/collection/components/atoms/card-header/card-header.component.js.map +1 -1
- package/dist/collection/components/atoms/divider/divider.component.css +1 -1
- package/dist/collection/components/atoms/dropdown-menu-container/dropdown-menu-container.component.css +1 -1
- package/dist/collection/components/atoms/dropdown-menu-item/dropdown-menu-item.component.css +1 -1
- package/dist/collection/components/atoms/helper/helper.component.css +1 -1
- package/dist/collection/components/atoms/label/label.component.css +1 -1
- package/dist/collection/components/atoms/modal-header/modal-header.component.css +1 -1
- package/dist/collection/components/atoms/pagination-item/pagination-item.component.css +1 -1
- package/dist/collection/components/atoms/segment-container/segment-container.component.css +1 -1
- package/dist/collection/components/atoms/segment-item/segment-item.component.css +1 -1
- package/dist/collection/components/atoms/slider-indicator/slider-indicator.component.css +1 -1
- package/dist/collection/components/atoms/stepper-line/stepper-line.component.css +1 -1
- package/dist/collection/components/atoms/tooltip/tooltip.component.css +1 -1
- package/dist/collection/components/atoms/tooltip/tooltip.component.js +9 -3
- package/dist/collection/components/atoms/tooltip/tooltip.component.js.map +1 -1
- package/dist/collection/components/molecules/input-group/input-group.component.css +1 -1
- package/dist/components/divider.component.js +1 -1
- package/dist/components/divider.component.js.map +1 -1
- package/dist/components/dropdown-menu-container.component.js +1 -1
- package/dist/components/dropdown-menu-container.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/helper.component.js +1 -1
- package/dist/components/helper.component.js.map +1 -1
- package/dist/components/input-group.component.js +1 -1
- package/dist/components/input-group.component.js.map +1 -1
- package/dist/components/label.component.js +1 -1
- package/dist/components/label.component.js.map +1 -1
- package/dist/components/modal-header.component.js +1 -1
- package/dist/components/modal-header.component.js.map +1 -1
- package/dist/components/p-card-container.js +1 -1
- package/dist/components/p-card-container.js.map +1 -1
- package/dist/components/p-card-header.js +2 -2
- package/dist/components/p-card-header.js.map +1 -1
- package/dist/components/pagination-item.component.js +1 -1
- package/dist/components/pagination-item.component.js.map +1 -1
- package/dist/components/segment-container.component.js +1 -1
- package/dist/components/segment-container.component.js.map +1 -1
- package/dist/components/segment-item.component.js +1 -1
- package/dist/components/segment-item.component.js.map +1 -1
- package/dist/components/slider-indicator.component.js +1 -1
- package/dist/components/slider-indicator.component.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/components/tooltip.component.js +10 -4
- package/dist/components/tooltip.component.js.map +1 -1
- package/dist/esm/p-card-container.entry.js +1 -1
- package/dist/esm/p-card-container.entry.js.map +1 -1
- package/dist/esm/p-card-header.entry.js +2 -2
- package/dist/esm/p-card-header.entry.js.map +1 -1
- package/dist/esm/p-divider.entry.js +1 -1
- package/dist/esm/p-divider.entry.js.map +1 -1
- package/dist/esm/p-dropdown-menu-container.entry.js +1 -1
- package/dist/esm/p-dropdown-menu-container.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-helper_3.entry.js +2 -2
- package/dist/esm/p-helper_3.entry.js.map +1 -1
- package/dist/esm/p-label_3.entry.js +3 -3
- package/dist/esm/p-label_3.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-page-size-select_3.entry.js +1 -1
- package/dist/esm/p-page-size-select_3.entry.js.map +1 -1
- package/dist/esm/p-slider-indicator.entry.js +1 -1
- package/dist/esm/p-slider-indicator.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/esm/p-tooltip.entry.js +10 -4
- package/dist/esm/p-tooltip.entry.js.map +1 -1
- package/dist/index.html +1 -1
- package/dist/paperless/{p-ec15ee73.entry.js → p-06e1bf69.entry.js} +2 -2
- package/dist/paperless/{p-ec15ee73.entry.js.map → p-06e1bf69.entry.js.map} +1 -1
- package/dist/paperless/{p-2cd5062f.entry.js → p-121c24a9.entry.js} +2 -2
- package/dist/{build/p-2cd5062f.entry.js.map → paperless/p-121c24a9.entry.js.map} +1 -1
- package/dist/paperless/p-4d075970.entry.js +2 -0
- package/dist/{build/p-867c00e9.entry.js.map → paperless/p-4d075970.entry.js.map} +1 -1
- package/dist/paperless/{p-d408194b.entry.js → p-9b2a5a38.entry.js} +2 -2
- package/dist/paperless/p-9b2a5a38.entry.js.map +1 -0
- package/dist/paperless/{p-ef0bfa6c.entry.js → p-b7ba24f7.entry.js} +2 -2
- package/dist/paperless/{p-ef0bfa6c.entry.js.map → p-b7ba24f7.entry.js.map} +1 -1
- package/dist/paperless/{p-a2b552f9.entry.js → p-ca61c0f2.entry.js} +2 -2
- package/dist/paperless/{p-a2b552f9.entry.js.map → p-ca61c0f2.entry.js.map} +1 -1
- package/dist/paperless/{p-d8641c29.entry.js → p-cab67dea.entry.js} +2 -2
- package/dist/paperless/{p-d8641c29.entry.js.map → p-cab67dea.entry.js.map} +1 -1
- package/dist/paperless/{p-2d59a6ce.entry.js → p-ec315c58.entry.js} +2 -2
- package/dist/paperless/{p-2d59a6ce.entry.js.map → p-ec315c58.entry.js.map} +1 -1
- package/dist/paperless/{p-f9e9370b.entry.js → p-f37781ca.entry.js} +2 -2
- package/dist/paperless/{p-f9e9370b.entry.js.map → p-f37781ca.entry.js.map} +1 -1
- package/dist/paperless/{p-0695e7ef.entry.js → p-f6e3247a.entry.js} +2 -2
- package/dist/{build/p-0695e7ef.entry.js.map → paperless/p-f6e3247a.entry.js.map} +1 -1
- package/dist/paperless/{p-35c563a7.entry.js → p-f8ed4402.entry.js} +2 -2
- package/dist/paperless/{p-35c563a7.entry.js.map → p-f8ed4402.entry.js.map} +1 -1
- package/dist/paperless/{p-46052ca3.entry.js → p-fc021211.entry.js} +2 -2
- package/dist/paperless/{p-46052ca3.entry.js.map → p-fc021211.entry.js.map} +1 -1
- 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 +25 -19
- package/package.json +1 -1
- package/dist/build/p-867c00e9.entry.js +0 -2
- package/dist/build/p-d408194b.entry.js.map +0 -1
- package/dist/paperless/p-867c00e9.entry.js +0 -2
- package/dist/paperless/p-d408194b.entry.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"segment-item.component.js","mappings":";;;AAAA,MAAM,uBAAuB,GAAG,
|
|
1
|
+
{"file":"segment-item.component.js","mappings":";;;AAAA,MAAM,uBAAuB,GAAG,mxDAAmxD;;MCStyD,WAAW;;;;;IAoCf,wBAAmB,GAAG,KAAK,CAAC;kBAhCV,KAAK;oBAKH,KAAK;gBAKgB,OAAO;;;;;EAwBxD,iBAAiB;IAChB,IAAI,CAAC,mBAAmB,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAClD,+BAA+B,CAC/B,CAAC;GACF;EAED,MAAM;IACL,QACC,EAAC,IAAI,IACJ,KAAK,EAAE,0BACN,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAC1B,IAAI,IAAI,CAAC,MAAM,IAAI,QAAQ,EAAE,IAE5B,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE,EAC7B,eAAQ,EACP,IAAI,CAAC,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,mBAAmB,KAC/C,YAAM,KAAK,EAAC,aAAa,IACxB,YAAM,IAAI,EAAC,aAAa,GAAG,CACrB,CACP,CACK,EACN;GACF;EAEO,QAAQ;IACf,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACf,OAAO;KACP;IAED,QACC,cACC,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,MAAM,EAAE,IAAI,CAAC,UAAU,GACtB,EACD;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/segment-item/segment-item.component.scss?tag=p-segment-item&encapsulation=shadow","src/components/atoms/segment-item/segment-item.component.tsx"],"sourcesContent":[":host {\n\t@apply flex h-6 items-center gap-2 rounded-large px-2;\n\t@apply whitespace-nowrap text-sm font-semibold text-storm;\n\t@apply cursor-pointer;\n}\n\n:host([size='big']) {\n\t@apply h-auto max-w-[9rem] flex-col whitespace-normal p-4 text-center;\n\n\t.description {\n\t\t@apply -mt-2 text-xxs font-normal text-storm-medium;\n\t}\n}\n\n:host(.variant-icon) {\n\t@apply w-6 justify-center px-0;\n}\n\n:host(:hover) {\n\t@apply bg-indigo-light;\n}\n\n:host(.active) {\n\t@apply bg-indigo-light text-indigo;\n\n\t.description {\n\t\t@apply text-indigo;\n\t}\n}\n","import { Component, h, Host, Prop, Element } from '@stencil/core';\nimport { RotateOptions } from '../../../types/tailwind';\nimport { IconFlipOptions, IconVariant } from '../icon/icon.component';\n\n@Component({\n\ttag: 'p-segment-item',\n\tstyleUrl: 'segment-item.component.scss',\n\tshadow: true,\n})\nexport class SegmentItem {\n\t/**\n\t * Wether the segment item is active\n\t */\n\t@Prop() active: boolean = false;\n\n\t/**\n\t * Wether the segment item is icon only\n\t */\n\t@Prop() iconOnly: boolean = false;\n\n\t/**\n\t * Size of the segment item\n\t */\n\t@Prop({ reflect: true }) size: 'small' | 'big' = 'small';\n\n\t/**\n\t * Icon to show on the segment item\n\t */\n\t@Prop() icon: IconVariant;\n\n\t/**\n\t * Icon flip\n\t */\n\t@Prop() iconFlip: IconFlipOptions;\n\n\t/**\n\t * Icon rotate\n\t */\n\t@Prop() iconRotate: RotateOptions;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\tprivate _hasDescriptionSlot = false;\n\n\tcomponentWillLoad() {\n\t\tthis._hasDescriptionSlot = !!this._el.querySelector(\n\t\t\t':scope > [slot=\"description\"]'\n\t\t);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={`p-segment-item variant-${\n\t\t\t\t\tthis.iconOnly ? 'icon' : 'default'\n\t\t\t\t} ${this.active && 'active'}`}\n\t\t\t>\n\t\t\t\t{this.icon && this._getIcon()}\n\t\t\t\t<slot />\n\t\t\t\t{this.size === 'big' && this._hasDescriptionSlot && (\n\t\t\t\t\t<span class=\"description\">\n\t\t\t\t\t\t<slot name=\"description\" />\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _getIcon() {\n\t\tif (!this.icon) {\n\t\t\treturn;\n\t\t}\n\n\t\treturn (\n\t\t\t<p-icon\n\t\t\t\tclass=\"flex\"\n\t\t\t\tvariant={this.icon}\n\t\t\t\tflip={this.iconFlip}\n\t\t\t\trotate={this.iconRotate}\n\t\t\t/>\n\t\t);\n\t}\n}\n"],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
const sliderIndicatorComponentCss = ".block{display:block!important}.h-2{height:.5rem!important}.w-2{width:.5rem!important}.bg-mystic-dark{--tw-bg-opacity:1!important;background-color:rgb(218 230 240/var(--tw-bg-opacity))!important}*{box-sizing:border-box}:host{--tw-bg-opacity:1;background-color:rgb(218 230 240/var(--tw-bg-opacity));border-radius:100%;display:block;height:.5rem;width:.5rem}:host(.active){--tw-bg-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity))}
|
|
3
|
+
const sliderIndicatorComponentCss = ".block{display:block!important}.h-2{height:.5rem!important}.w-2{width:.5rem!important}.bg-mystic-dark{--tw-bg-opacity:1!important;background-color:rgb(218 230 240/var(--tw-bg-opacity))!important}*{box-sizing:border-box}:host{--tw-bg-opacity:1;background-color:rgb(218 230 240/var(--tw-bg-opacity));border-radius:100%;display:block;height:.5rem;width:.5rem}:host(.active){--tw-bg-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity))}";
|
|
4
4
|
|
|
5
5
|
const SliderIndicator = /*@__PURE__*/ proxyCustomElement(class SliderIndicator extends HTMLElement {
|
|
6
6
|
constructor() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"slider-indicator.component.js","mappings":";;AAAA,MAAM,2BAA2B,GAAG
|
|
1
|
+
{"file":"slider-indicator.component.js","mappings":";;AAAA,MAAM,2BAA2B,GAAG,6bAA6b;;MCOpd,eAAe;;;;;kBAID,KAAK;;EAE/B,MAAM;IACL,QACC,EAAC,IAAI,IACJ,KAAK,EAAE,sBAAsB,IAAI,CAAC,MAAM,IAAI,QAAQ,EAAE,GAC/C,EACP;GACF;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/slider-indicator/slider-indicator.component.scss?tag=p-slider-indicator&encapsulation=shadow","src/components/atoms/slider-indicator/slider-indicator.component.tsx"],"sourcesContent":[":host {\n\t@apply block w-2 h-2 bg-mystic-dark rounded-round;\n}\n\n:host(.active) {\n\t@apply bg-indigo;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n\ttag: 'p-slider-indicator',\n\tstyleUrl: 'slider-indicator.component.scss',\n\tshadow: true,\n})\nexport class SliderIndicator {\n\t/**\n\t * Wether the slider indicator is active\n\t */\n\t@Prop() active: boolean = false;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={`p-slider-indicator ${this.active && 'active'}`}\n\t\t\t></Host>\n\t\t);\n\t}\n}\n"],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
const stepperLineComponentCss = ".mb-\\[calc\\(\\.5rem-1px\\)\\]{margin-bottom:calc(.5rem - 1px)!important}.ml-\\[calc\\(\\.5rem-1px\\)\\]{margin-left:calc(.5rem - 1px)!important}.mr-\\[calc\\(\\.5rem-1px\\)\\]{margin-right:calc(.5rem - 1px)!important}.block{display:block!important}.h-\\[2px\\]{height:2px!important}.min-h-\\[1rem\\]{min-height:1rem!important}.w-\\[2px\\]{width:2px!important}.transition{transition-duration:.15s!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.duration-500{transition-duration:.5s!important}*{box-sizing:border-box}:host{--tw-bg-opacity:1;background-color:rgb(218 230 240/var(--tw-bg-opacity));display:block;flex:1 1 auto;transition-duration:.5s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}:host([direction=horizontal]){height:2px;margin-bottom:calc(.5rem - 1px)}:host([direction=vertical]){margin-left:calc(.5rem - 1px);margin-right:calc(.5rem - 1px);min-height:1rem;width:2px}:host([active]){--tw-bg-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity))}
|
|
3
|
+
const stepperLineComponentCss = ".mb-\\[calc\\(\\.5rem-1px\\)\\]{margin-bottom:calc(.5rem - 1px)!important}.ml-\\[calc\\(\\.5rem-1px\\)\\]{margin-left:calc(.5rem - 1px)!important}.mr-\\[calc\\(\\.5rem-1px\\)\\]{margin-right:calc(.5rem - 1px)!important}.block{display:block!important}.h-\\[2px\\]{height:2px!important}.min-h-\\[1rem\\]{min-height:1rem!important}.w-\\[2px\\]{width:2px!important}.transition{transition-duration:.15s!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.duration-500{transition-duration:.5s!important}*{box-sizing:border-box}:host{--tw-bg-opacity:1;background-color:rgb(218 230 240/var(--tw-bg-opacity));display:block;flex:1 1 auto;transition-duration:.5s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}:host([direction=horizontal]){height:2px;margin-bottom:calc(.5rem - 1px)}:host([direction=vertical]){margin-left:calc(.5rem - 1px);margin-right:calc(.5rem - 1px);min-height:1rem;width:2px}:host([active]){--tw-bg-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity))}";
|
|
4
4
|
|
|
5
5
|
const StepperLine = /*@__PURE__*/ proxyCustomElement(class StepperLine extends HTMLElement {
|
|
6
6
|
constructor() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"stepper-line.component.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG
|
|
1
|
+
{"file":"stepper-line.component.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,+wCAA+wC;;MCOlyC,WAAW;;;;;kBAIoB,KAAK;qBAM/C,YAAY;;EAEb,MAAM;IACL,OAAO,EAAC,IAAI,IAAC,KAAK,EAAC,gBAAgB,GAAQ,CAAC;GAC5C;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/stepper-line/stepper-line.component.scss?tag=p-stepper-line&encapsulation=shadow","src/components/atoms/stepper-line/stepper-line.component.tsx"],"sourcesContent":[":host {\n\t@apply flex-auto;\n\t@apply transition duration-500 ease-in-out;\n\n\t@apply block;\n\n\t@apply bg-mystic-dark;\n}\n\n:host([direction='horizontal']) {\n\t@apply mb-[calc(.5rem-1px)] h-[2px];\n}\n\n:host([direction='vertical']) {\n\t@apply ml-[calc(.5rem-1px)] mr-[calc(.5rem-1px)] min-h-[1rem] w-[2px];\n}\n\n:host([active]) {\n\t@apply bg-indigo;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n\ttag: 'p-stepper-line',\n\tstyleUrl: 'stepper-line.component.scss',\n\tshadow: true,\n})\nexport class StepperLine {\n\t/**\n\t * Wether the line is active\n\t */\n\t@Prop({ reflect: true }) active: boolean = false;\n\n\t/**\n\t * The direction of the stepper line\n\t */\n\t@Prop({ reflect: true }) direction: 'horizontal' | 'vertical' =\n\t\t'horizontal';\n\n\trender() {\n\t\treturn <Host class=\"p-stepper-line\"></Host>;\n\t}\n}\n"],"version":3}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift, b as arrow } from './floating-ui.dom.esm.js';
|
|
3
3
|
|
|
4
|
-
const tooltipComponentCss = ".pointer-events-auto{pointer-events:auto!important}.visible{visibility:visible!important}.fixed{position:fixed!important}.absolute{position:absolute!important}.relative{position:relative!important}.left-0{left:0!important}.top-0{top:0!important}.z-tooltip{z-index:601!important}.inline-block{display:inline-block!important}.flex{display:flex!important}.hidden{display:none!important}.h-0{height:0!important}.h-2{height:.5rem!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.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}.rounded{border-radius:.25rem!important}.bg-negative{background-color:rgb(185 30 40/var(--tw-bg-opacity))!important}.bg-negative,.bg-storm{--tw-bg-opacity:1!important}.bg-storm{background-color:rgb(81 83 107/var(--tw-bg-opacity))!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.px-3{padding-left:.75rem!important;padding-right:.75rem!important}.py-1{padding-bottom:.25rem!important;padding-top:.25rem!important}.py-2{padding-bottom:.5rem!important;padding-top:.5rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.font-medium{font-weight:500!important}.uppercase{text-transform:uppercase!important}.opacity-0{opacity:0!important}.drop-shadow-4{--tw-drop-shadow:drop-shadow(0px 0.3125rem 1rem rgba(0,24,98,.08)) drop-shadow(0px 0.0625rem 0.1875rem rgba(0,24,98,.13))!important;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}*{box-sizing:border-box}:host{cursor:pointer;display:flex}:host .popover-container{height:0;position:relative;width:0}:host .popover-container .popover{--tw-bg-opacity:1;--tw-drop-shadow:drop-shadow(0px 0.3125rem 1rem rgba(0,24,98,.08)) drop-shadow(0px 0.0625rem 0.1875rem rgba(0,24,98,.13));background-color:rgb(255 255 255/var(--tw-bg-opacity));border-radius:.25rem;display:inline-block;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);font-size:.75rem;font-weight:500;left:0;line-height:1rem;max-width:14.5rem;opacity:0;padding:.5rem .75rem;pointer-events:none;top:0;transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);width:-moz-max-content;width:max-content;z-index:601}:host .popover-container .popover.variant-error,:host .popover-container .popover.variant-error-element,:host .popover-container .popover.variant-hover{--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(81 83 107/var(--tw-bg-opacity));color:rgb(255 255 255/var(--tw-text-opacity));padding-bottom:.25rem;padding-top:.25rem}:host .popover-container .popover.variant-error,:host .popover-container .popover.variant-error-element{--tw-bg-opacity:1;background-color:rgb(185 30 40/var(--tw-bg-opacity));letter-spacing:.05em;text-transform:uppercase}:host .popover-container .popover[data-show]{opacity:1;pointer-events:auto}:host .popover-container .popover .arrow,:host .popover-container .popover .arrow:before{background:inherit;height:.5rem;position:absolute;width:.5rem}:host .popover-container .popover .arrow{visibility:hidden}:host .popover-container .popover .arrow:before{--tw-rotate:45deg;content:\"\";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));visibility:visible}:host .popover-container .popover[data-strategy=fixed]{position:fixed}:host .popover-container .popover[data-strategy=absolute]{position:absolute}:host .popover-container .popover[data-placement^=top]>.arrow{bottom:-.25rem}:host .popover-container .popover[data-placement^=bottom]>.arrow{top:-.25rem}:host .popover-container .popover[data-placement^=left]>.arrow{right:-.25rem}:host .popover-container .popover[data-placement^=right]>.arrow{left:-.25rem}.static{position:static!important}
|
|
4
|
+
const tooltipComponentCss = ".pointer-events-auto{pointer-events:auto!important}.visible{visibility:visible!important}.fixed{position:fixed!important}.absolute{position:absolute!important}.relative{position:relative!important}.left-0{left:0!important}.top-0{top:0!important}.z-tooltip{z-index:601!important}.inline-block{display:inline-block!important}.flex{display:flex!important}.hidden{display:none!important}.h-0{height:0!important}.h-2{height:.5rem!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.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}.rounded{border-radius:.25rem!important}.bg-negative{background-color:rgb(185 30 40/var(--tw-bg-opacity))!important}.bg-negative,.bg-storm{--tw-bg-opacity:1!important}.bg-storm{background-color:rgb(81 83 107/var(--tw-bg-opacity))!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.px-3{padding-left:.75rem!important;padding-right:.75rem!important}.py-1{padding-bottom:.25rem!important;padding-top:.25rem!important}.py-2{padding-bottom:.5rem!important;padding-top:.5rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.font-medium{font-weight:500!important}.uppercase{text-transform:uppercase!important}.opacity-0{opacity:0!important}.drop-shadow-4{--tw-drop-shadow:drop-shadow(0px 0.3125rem 1rem rgba(0,24,98,.08)) drop-shadow(0px 0.0625rem 0.1875rem rgba(0,24,98,.13))!important;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}*{box-sizing:border-box}:host{cursor:pointer;display:flex}:host .popover-container{height:0;position:relative;width:0}:host .popover-container .popover{--tw-bg-opacity:1;--tw-drop-shadow:drop-shadow(0px 0.3125rem 1rem rgba(0,24,98,.08)) drop-shadow(0px 0.0625rem 0.1875rem rgba(0,24,98,.13));background-color:rgb(255 255 255/var(--tw-bg-opacity));border-radius:.25rem;display:inline-block;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);font-size:.75rem;font-weight:500;left:0;line-height:1rem;max-width:14.5rem;opacity:0;padding:.5rem .75rem;pointer-events:none;top:0;transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);width:-moz-max-content;width:max-content;z-index:601}:host .popover-container .popover.variant-error,:host .popover-container .popover.variant-error-element,:host .popover-container .popover.variant-hover{--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(81 83 107/var(--tw-bg-opacity));color:rgb(255 255 255/var(--tw-text-opacity));padding-bottom:.25rem;padding-top:.25rem}:host .popover-container .popover.variant-error,:host .popover-container .popover.variant-error-element{--tw-bg-opacity:1;background-color:rgb(185 30 40/var(--tw-bg-opacity));letter-spacing:.05em;text-transform:uppercase}:host .popover-container .popover[data-show]{opacity:1;pointer-events:auto}:host .popover-container .popover .arrow,:host .popover-container .popover .arrow:before{background:inherit;height:.5rem;position:absolute;width:.5rem}:host .popover-container .popover .arrow{visibility:hidden}:host .popover-container .popover .arrow:before{--tw-rotate:45deg;content:\"\";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));visibility:visible}:host .popover-container .popover[data-strategy=fixed]{position:fixed}:host .popover-container .popover[data-strategy=absolute]{position:absolute}:host .popover-container .popover[data-placement^=top]>.arrow{bottom:-.25rem}:host .popover-container .popover[data-placement^=bottom]>.arrow{top:-.25rem}:host .popover-container .popover[data-placement^=left]>.arrow{right:-.25rem}:host .popover-container .popover[data-placement^=right]>.arrow{left:-.25rem}.static{position:static!important}";
|
|
5
5
|
|
|
6
6
|
const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLElement {
|
|
7
7
|
constructor() {
|
|
@@ -29,7 +29,7 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
|
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
render() {
|
|
32
|
-
return (h(Host, { class:
|
|
32
|
+
return (h(Host, { class: 'p-popover' }, h("slot", { name: 'trigger' }), h("div", { class: 'popover-container' }, h("div", { class: `popover variant-${this.variant}`, role: 'popover', "data-placement": this.placement, "data-strategy": this.strategy, ref: el => this._load(el) }, this.content ? this.content : h("slot", { name: 'content' }), h("div", { class: 'arrow' })))));
|
|
33
33
|
}
|
|
34
34
|
clickHandler() {
|
|
35
35
|
if (this.variant === 'hover' || !this.enableUserInput) {
|
|
@@ -68,9 +68,16 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
|
|
|
68
68
|
return this._hide();
|
|
69
69
|
}
|
|
70
70
|
_show() {
|
|
71
|
+
var _a;
|
|
71
72
|
if (!this._loaded) {
|
|
72
73
|
return;
|
|
73
74
|
}
|
|
75
|
+
if (!((_a = this.content) === null || _a === void 0 ? void 0 : _a.length)) {
|
|
76
|
+
if (this._popover.hasAttribute('data-show')) {
|
|
77
|
+
this._hide();
|
|
78
|
+
}
|
|
79
|
+
return;
|
|
80
|
+
}
|
|
74
81
|
this._cleanup = autoUpdate(this._el, this._popover, () => this._update());
|
|
75
82
|
// Make the popover visible
|
|
76
83
|
this._popover.setAttribute('data-show', '');
|
|
@@ -127,8 +134,7 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
|
|
|
127
134
|
if (middlewareData.arrow) {
|
|
128
135
|
const { x, y } = middlewareData.arrow;
|
|
129
136
|
Object.assign(arrowEl.style, {
|
|
130
|
-
left: this.variant === 'error' ||
|
|
131
|
-
this.variant === 'error-element'
|
|
137
|
+
left: this.variant === 'error' || this.variant === 'error-element'
|
|
132
138
|
? placement.indexOf('start') >= 0
|
|
133
139
|
? '1rem'
|
|
134
140
|
: 'calc(100% - 1rem)'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"tooltip.component.js","mappings":"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","names":[],"sources":["src/components/atoms/tooltip/tooltip.component.scss?tag=p-tooltip&encapsulation=shadow","src/components/atoms/tooltip/tooltip.component.tsx"],"sourcesContent":[":host {\n\t@apply flex cursor-pointer;\n\n\t.popover-container {\n\t\t@apply relative h-0 w-0;\n\t\t.popover {\n\t\t\t@apply left-0 top-0 z-tooltip inline-block rounded bg-white px-3 py-2 text-xs font-medium opacity-0 drop-shadow-4 transition-opacity;\n\t\t\t@apply pointer-events-none;\n\t\t\twidth: max-content;\n\t\t\tmax-width: 14.5rem;\n\n\t\t\t&.variant-hover,\n\t\t\t&.variant-error,\n\t\t\t&.variant-error-element {\n\t\t\t\t@apply bg-storm py-1 text-white;\n\t\t\t}\n\n\t\t\t&.variant-error,\n\t\t\t&.variant-error-element {\n\t\t\t\t@apply bg-negative uppercase tracking-wider;\n\t\t\t}\n\n\t\t\t&[data-show] {\n\t\t\t\t@apply pointer-events-auto opacity-100;\n\t\t\t}\n\n\t\t\t.arrow,\n\t\t\t.arrow::before {\n\t\t\t\tbackground: inherit;\n\t\t\t\t@apply absolute h-2 w-2;\n\t\t\t}\n\n\t\t\t.arrow {\n\t\t\t\tvisibility: hidden;\n\n\t\t\t\t&::before {\n\t\t\t\t\t@apply visible rotate-45 transform;\n\t\t\t\t\tcontent: '';\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&[data-strategy='fixed'] {\n\t\t\t\t@apply fixed;\n\t\t\t}\n\n\t\t\t&[data-strategy='absolute'] {\n\t\t\t\t@apply absolute;\n\t\t\t}\n\n\t\t\t&[data-placement^='top'] > .arrow {\n\t\t\t\t@apply -bottom-1;\n\t\t\t}\n\n\t\t\t&[data-placement^='bottom'] > .arrow {\n\t\t\t\t@apply -top-1;\n\t\t\t}\n\n\t\t\t&[data-placement^='left'] > .arrow {\n\t\t\t\t@apply -right-1;\n\t\t\t}\n\n\t\t\t&[data-placement^='right'] > .arrow {\n\t\t\t\t@apply -left-1;\n\t\t\t}\n\t\t}\n\t}\n}\n","import {\n\tarrow,\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';\n\n@Component({\n\ttag: 'p-tooltip',\n\tstyleUrl: 'tooltip.component.scss',\n\tshadow: true,\n})\nexport class Tooltip {\n\t/**\n\t * The variant of the popover\n\t */\n\t@Prop() variant: 'hover' | 'click' | 'error' | 'error-element' = 'hover';\n\n\t/**\n\t * The content of the popover\n\t */\n\t@Prop() content: any = null;\n\n\t/**\n\t * The placement of the popover\n\t */\n\t@Prop() placement: Placement = 'top';\n\n\t/**\n\t * The offset of the popover\n\t */\n\t@Prop() offset: number = 8;\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 the tooltip can be shown by user input\n\t */\n\t@Prop() enableUserInput: boolean = true;\n\n\t/**\n\t * Wether to show the popover\n\t */\n\t@Prop() show: boolean = false;\n\n\t/**\n\t * Wether to someone can manually close the popover\n\t */\n\t@Prop() canManuallyClose: boolean = true;\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\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\tprivate _loaded = false;\n\tprivate _popover: 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-popover\">\n\t\t\t\t<slot name=\"trigger\" />\n\t\t\t\t<div class=\"popover-container\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass={`popover variant-${this.variant}`}\n\t\t\t\t\t\trole=\"popover\"\n\t\t\t\t\t\tdata-placement={this.placement}\n\t\t\t\t\t\tdata-strategy={this.strategy}\n\t\t\t\t\t\tref={(el) => this._load(el)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this.content ? this.content : <slot name=\"content\" />}\n\t\t\t\t\t\t<div class=\"arrow\"></div>\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\t@Listen('click', { capture: true })\n\tprotected clickHandler() {\n\t\tif (this.variant === 'hover' || !this.enableUserInput) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._popover.hasAttribute('data-show')) {\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() {\n\t\tif (this.variant === 'hover' || !this.canManuallyClose || this.show) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this._popover.hasAttribute('data-show')) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._hide();\n\t}\n\n\t@Listen('mouseenter')\n\t@Listen('focus')\n\tprotected mouseEnterHandler() {\n\t\tif (this.variant !== 'hover' || !this.enableUserInput) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._show();\n\t}\n\n\t@Listen('mouseleave')\n\t@Listen('blur')\n\tprotected mouseLeaveHandler() {\n\t\tif (this.show || this.variant !== 'hover' || !this.enableUserInput) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._hide();\n\t}\n\n\t@Watch('show')\n\tonShowChange(show: boolean) {\n\t\tif (show && !this._popover.hasAttribute('data-show')) {\n\t\t\treturn this._show();\n\t\t}\n\n\t\treturn this._hide();\n\t}\n\n\tprivate _show() {\n\t\tif (!this._loaded) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._cleanup = autoUpdate(this._el, this._popover, () =>\n\t\t\tthis._update()\n\t\t);\n\t\t// Make the popover visible\n\t\tthis._popover.setAttribute('data-show', '');\n\n\t\t// Update its position\n\t\tthis.isOpen.emit(true);\n\t}\n\n\tprivate _hide() {\n\t\tif (!this._loaded) {\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._popover.removeAttribute('data-show');\n\t\tthis.isOpen.emit(false);\n\t}\n\n\tprivate _load(popover: HTMLElement) {\n\t\tthis._popover = 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 _update() {\n\t\tif (!this._popover) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst arrowEl = this._popover.querySelector('.arrow') as HTMLElement;\n\t\tif (!arrowEl) {\n\t\t\treturn;\n\t\t}\n\n\t\tcomputePosition(this._el, this._popover, {\n\t\t\tplacement:\n\t\t\t\tthis.variant === 'error' || this.variant === 'error-element'\n\t\t\t\t\t? 'top-end'\n\t\t\t\t\t: this.placement,\n\t\t\tstrategy: this.strategy,\n\n\t\t\tmiddleware: [\n\t\t\t\toffset(this.variant === 'error' ? 14 : this.offset),\n\t\t\t\tflip(),\n\t\t\t\tshift(),\n\t\t\t\tarrow({ element: arrowEl, padding: 8 }),\n\t\t\t],\n\t\t}).then(({ x, y, placement, middlewareData }) => {\n\t\t\tthis._popover.dataset.placement = placement;\n\t\t\tObject.assign(this._popover.style, {\n\t\t\t\ttop: `${y}px`,\n\t\t\t\tleft: `${x}px`,\n\t\t\t});\n\n\t\t\tif (middlewareData.arrow) {\n\t\t\t\tconst { x, y } = middlewareData.arrow;\n\n\t\t\t\tObject.assign(arrowEl.style, {\n\t\t\t\t\tleft:\n\t\t\t\t\t\tthis.variant === 'error' ||\n\t\t\t\t\t\tthis.variant === 'error-element'\n\t\t\t\t\t\t\t? placement.indexOf('start') >= 0\n\t\t\t\t\t\t\t\t? '1rem'\n\t\t\t\t\t\t\t\t: 'calc(100% - 1rem)'\n\t\t\t\t\t\t\t: x != null\n\t\t\t\t\t\t\t\t? `${x}px`\n\t\t\t\t\t\t\t\t: '',\n\t\t\t\t\ttop: y != null ? `${y}px` : '',\n\t\t\t\t});\n\t\t\t}\n\t\t});\n\t}\n}\n"],"version":3}
|
|
1
|
+
{"file":"tooltip.component.js","mappings":"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","names":[],"sources":["src/components/atoms/tooltip/tooltip.component.scss?tag=p-tooltip&encapsulation=shadow","src/components/atoms/tooltip/tooltip.component.tsx"],"sourcesContent":[":host {\n\t@apply flex cursor-pointer;\n\n\t.popover-container {\n\t\t@apply relative h-0 w-0;\n\t\t.popover {\n\t\t\t@apply left-0 top-0 z-tooltip inline-block rounded bg-white px-3 py-2 text-xs font-medium opacity-0 drop-shadow-4 transition-opacity;\n\t\t\t@apply pointer-events-none;\n\t\t\twidth: max-content;\n\t\t\tmax-width: 14.5rem;\n\n\t\t\t&.variant-hover,\n\t\t\t&.variant-error,\n\t\t\t&.variant-error-element {\n\t\t\t\t@apply bg-storm py-1 text-white;\n\t\t\t}\n\n\t\t\t&.variant-error,\n\t\t\t&.variant-error-element {\n\t\t\t\t@apply bg-negative uppercase tracking-wider;\n\t\t\t}\n\n\t\t\t&[data-show] {\n\t\t\t\t@apply pointer-events-auto opacity-100;\n\t\t\t}\n\n\t\t\t.arrow,\n\t\t\t.arrow::before {\n\t\t\t\tbackground: inherit;\n\t\t\t\t@apply absolute h-2 w-2;\n\t\t\t}\n\n\t\t\t.arrow {\n\t\t\t\tvisibility: hidden;\n\n\t\t\t\t&::before {\n\t\t\t\t\t@apply visible rotate-45 transform;\n\t\t\t\t\tcontent: '';\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&[data-strategy='fixed'] {\n\t\t\t\t@apply fixed;\n\t\t\t}\n\n\t\t\t&[data-strategy='absolute'] {\n\t\t\t\t@apply absolute;\n\t\t\t}\n\n\t\t\t&[data-placement^='top'] > .arrow {\n\t\t\t\t@apply -bottom-1;\n\t\t\t}\n\n\t\t\t&[data-placement^='bottom'] > .arrow {\n\t\t\t\t@apply -top-1;\n\t\t\t}\n\n\t\t\t&[data-placement^='left'] > .arrow {\n\t\t\t\t@apply -right-1;\n\t\t\t}\n\n\t\t\t&[data-placement^='right'] > .arrow {\n\t\t\t\t@apply -left-1;\n\t\t\t}\n\t\t}\n\t}\n}\n","import {\n\tarrow,\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';\n\n@Component({\n\ttag: 'p-tooltip',\n\tstyleUrl: 'tooltip.component.scss',\n\tshadow: true,\n})\nexport class Tooltip {\n\t/**\n\t * The variant of the popover\n\t */\n\t@Prop() variant: 'hover' | 'click' | 'error' | 'error-element' = 'hover';\n\n\t/**\n\t * The content of the popover\n\t */\n\t@Prop() content: any = null;\n\n\t/**\n\t * The placement of the popover\n\t */\n\t@Prop() placement: Placement = 'top';\n\n\t/**\n\t * The offset of the popover\n\t */\n\t@Prop() offset: number = 8;\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 the tooltip can be shown by user input\n\t */\n\t@Prop() enableUserInput: boolean = true;\n\n\t/**\n\t * Wether to show the popover\n\t */\n\t@Prop() show: boolean = false;\n\n\t/**\n\t * Wether to someone can manually close the popover\n\t */\n\t@Prop() canManuallyClose: boolean = true;\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\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\tprivate _loaded = false;\n\tprivate _popover: 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-popover'>\n\t\t\t\t<slot name='trigger' />\n\t\t\t\t<div class='popover-container'>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass={`popover variant-${this.variant}`}\n\t\t\t\t\t\trole='popover'\n\t\t\t\t\t\tdata-placement={this.placement}\n\t\t\t\t\t\tdata-strategy={this.strategy}\n\t\t\t\t\t\tref={el => this._load(el)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this.content ? this.content : <slot name='content' />}\n\t\t\t\t\t\t<div class='arrow'></div>\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\t@Listen('click', { capture: true })\n\tprotected clickHandler() {\n\t\tif (this.variant === 'hover' || !this.enableUserInput) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._popover.hasAttribute('data-show')) {\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() {\n\t\tif (this.variant === 'hover' || !this.canManuallyClose || this.show) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this._popover.hasAttribute('data-show')) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._hide();\n\t}\n\n\t@Listen('mouseenter')\n\t@Listen('focus')\n\tprotected mouseEnterHandler() {\n\t\tif (this.variant !== 'hover' || !this.enableUserInput) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._show();\n\t}\n\n\t@Listen('mouseleave')\n\t@Listen('blur')\n\tprotected mouseLeaveHandler() {\n\t\tif (this.show || this.variant !== 'hover' || !this.enableUserInput) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._hide();\n\t}\n\n\t@Watch('show')\n\tonShowChange(show: boolean) {\n\t\tif (show && !this._popover.hasAttribute('data-show')) {\n\t\t\treturn this._show();\n\t\t}\n\n\t\treturn this._hide();\n\t}\n\n\tprivate _show() {\n\t\tif (!this._loaded) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this.content?.length) {\n\t\t\tif (this._popover.hasAttribute('data-show')) {\n\t\t\t\tthis._hide();\n\t\t\t}\n\n\t\t\treturn;\n\t\t}\n\n\t\tthis._cleanup = autoUpdate(this._el, this._popover, () => this._update());\n\t\t// Make the popover visible\n\t\tthis._popover.setAttribute('data-show', '');\n\n\t\t// Update its position\n\t\tthis.isOpen.emit(true);\n\t}\n\n\tprivate _hide() {\n\t\tif (!this._loaded) {\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._popover.removeAttribute('data-show');\n\t\tthis.isOpen.emit(false);\n\t}\n\n\tprivate _load(popover: HTMLElement) {\n\t\tthis._popover = 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 _update() {\n\t\tif (!this._popover) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst arrowEl = this._popover.querySelector('.arrow') as HTMLElement;\n\t\tif (!arrowEl) {\n\t\t\treturn;\n\t\t}\n\n\t\tcomputePosition(this._el, this._popover, {\n\t\t\tplacement:\n\t\t\t\tthis.variant === 'error' || this.variant === 'error-element'\n\t\t\t\t\t? 'top-end'\n\t\t\t\t\t: this.placement,\n\t\t\tstrategy: this.strategy,\n\n\t\t\tmiddleware: [\n\t\t\t\toffset(this.variant === 'error' ? 14 : this.offset),\n\t\t\t\tflip(),\n\t\t\t\tshift(),\n\t\t\t\tarrow({ element: arrowEl, padding: 8 }),\n\t\t\t],\n\t\t}).then(({ x, y, placement, middlewareData }) => {\n\t\t\tthis._popover.dataset.placement = placement;\n\t\t\tObject.assign(this._popover.style, {\n\t\t\t\ttop: `${y}px`,\n\t\t\t\tleft: `${x}px`,\n\t\t\t});\n\n\t\t\tif (middlewareData.arrow) {\n\t\t\t\tconst { x, y } = middlewareData.arrow;\n\n\t\t\t\tObject.assign(arrowEl.style, {\n\t\t\t\t\tleft:\n\t\t\t\t\t\tthis.variant === 'error' || this.variant === 'error-element'\n\t\t\t\t\t\t\t? placement.indexOf('start') >= 0\n\t\t\t\t\t\t\t\t? '1rem'\n\t\t\t\t\t\t\t\t: 'calc(100% - 1rem)'\n\t\t\t\t\t\t\t: x != null\n\t\t\t\t\t\t\t? `${x}px`\n\t\t\t\t\t\t\t: '',\n\t\t\t\t\ttop: y != null ? `${y}px` : '',\n\t\t\t\t});\n\t\t\t}\n\t\t});\n\t}\n}\n"],"version":3}
|
|
@@ -9,7 +9,7 @@ const CardContainer = class {
|
|
|
9
9
|
this.shadow = true;
|
|
10
10
|
}
|
|
11
11
|
render() {
|
|
12
|
-
return (h(Host, { class:
|
|
12
|
+
return (h(Host, { class: 'p-card-container group' }, h("slot", null)));
|
|
13
13
|
}
|
|
14
14
|
};
|
|
15
15
|
CardContainer.style = cardContainerComponentCss;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-card-container.entry.js","mappings":";;AAAA,MAAM,yBAAyB,GAAG,onDAAonD;;MCOzoD,aAAa;;;qBAIqB,KAAK;kBAKR,IAAI;;EAE/C,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAC,
|
|
1
|
+
{"file":"p-card-container.entry.js","mappings":";;AAAA,MAAM,yBAAyB,GAAG,onDAAonD;;MCOzoD,aAAa;;;qBAIqB,KAAK;kBAKR,IAAI;;EAE/C,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAC,wBAAwB,IACnC,eAAQ,CACF,EACN;GACF;;;;;;","names":[],"sources":["src/components/atoms/card-container/card-container.component.scss?tag=p-card-container&encapsulation=shadow","src/components/atoms/card-container/card-container.component.tsx"],"sourcesContent":[":host {\n\t@apply flex w-full flex-col;\n\t@apply rounded-large bg-white;\n}\n\n:host([hoverable]) {\n\t@apply cursor-pointer;\n}\n\n:host([hoverable]:hover) {\n\t@apply drop-shadow-5 #{!important};\n}\n\n:host([shadow='true']),\n:host(:not([shadow='false'])) {\n\t@apply drop-shadow-4 filter #{!important};\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n\ttag: 'p-card-container',\n\tstyleUrl: 'card-container.component.scss',\n\tshadow: true,\n})\nexport class CardContainer {\n\t/**\n\t * Wether the card should be hoverable\n\t */\n\t@Prop({ reflect: true }) hoverable: boolean = false;\n\n\t/**\n\t * Wether the card should have shadow\n\t */\n\t@Prop({ reflect: true }) shadow: boolean = true;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class='p-card-container group'>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host } from './index-7b917f6b.js';
|
|
2
2
|
|
|
3
|
-
const cardHeaderComponentCss = ".mx-4{margin-left:1rem!important;margin-right:1rem!important}.ml-2{margin-left:.5rem!important}.flex{display:flex!important}.h-14{height:3.5rem!important}.flex-1{flex:1 1 0%!important}.items-center{align-items:center!important}.gap-3{gap:.75rem!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.border-b{border-bottom-width:1px!important}.border-b-mystic-medium{--tw-border-opacity:1!important;border-bottom-color:rgb(227 236 243/var(--tw-border-opacity))!important}*{box-sizing:border-box}p-card-header{--tw-text-opacity:1;--tw-border-opacity:1!important;align-items:center;border-bottom-color:rgb(227 236 243/var(--tw-border-opacity))!important;border-bottom-width:1px!important;color:rgb(128 130 158/var(--tw-text-opacity));display:flex;flex-shrink:0;gap:.75rem;height:3.5rem;margin-left:1rem;margin-right:1rem}p-card-header .title{--tw-text-opacity:1;align-items:center;color:rgb(81 83 107/var(--tw-text-opacity));display:flex;flex:1 1 0%;font-weight:600;order:2;overflow:hidden}p-card-header .title>span{flex:1 1 0%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}p-card-header .title>p-icon{--tw-text-opacity:1;color:rgb(218 230 240/var(--tw-text-opacity));margin-left:.5rem}p-card-header [slot=prefix]{order:1}p-card-header [slot=suffix]{order:3}p-card-container.has-hover:hover p-card-header .title>p-icon{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity))}.static{position:static!important}";
|
|
3
|
+
const cardHeaderComponentCss = ".mx-4{margin-left:1rem!important;margin-right:1rem!important}.ml-2{margin-left:.5rem!important}.flex{display:flex!important}.h-14{height:3.5rem!important}.flex-1{flex:1 1 0%!important}.items-center{align-items:center!important}.gap-3{gap:.75rem!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.border-b{border-bottom-width:1px!important}.border-b-mystic-medium{--tw-border-opacity:1!important;border-bottom-color:rgb(227 236 243/var(--tw-border-opacity))!important}*{box-sizing:border-box}p-card-header{--tw-text-opacity:1;--tw-border-opacity:1!important;align-items:center;border-bottom-color:rgb(227 236 243/var(--tw-border-opacity))!important;border-bottom-width:1px!important;color:rgb(128 130 158/var(--tw-text-opacity));display:flex;flex-shrink:0;gap:.75rem;height:3.5rem;margin-left:1rem;margin-right:1rem}p-card-header .title{--tw-text-opacity:1;align-items:center;color:rgb(81 83 107/var(--tw-text-opacity));display:flex;flex:1 1 0%;font-weight:600;order:2;overflow:hidden}p-card-header .title>span{flex:1 1 0%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}p-card-header .title>p-icon{--tw-text-opacity:1;color:rgb(218 230 240/var(--tw-text-opacity));margin-left:.5rem}p-card-header [slot=prefix]{order:1}p-card-header [slot=suffix]{order:3}p-card-container.has-hover:hover p-card-header .title>p-icon{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity))}.static{position:static!important}.group:hover .group-hover\\:text-indigo{--tw-text-opacity:1!important;color:rgb(82 138 250/var(--tw-text-opacity))!important}";
|
|
4
4
|
|
|
5
5
|
const CardHeader = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -10,7 +10,7 @@ const CardHeader = class {
|
|
|
10
10
|
}
|
|
11
11
|
render() {
|
|
12
12
|
var _a, _b;
|
|
13
|
-
return (h(Host, { class:
|
|
13
|
+
return (h(Host, { class: 'p-card-header' }, h("slot", { name: 'prefix' }), (((_a = this.header) === null || _a === void 0 ? void 0 : _a.length) || this.arrow) && (h("div", { class: 'title' }, h("span", null, (_b = this.header) !== null && _b !== void 0 ? _b : ''), this.arrow && (h("p-icon", { variant: 'arrow', class: 'group-hover:text-indigo' })))), h("slot", { name: 'suffix' })));
|
|
14
14
|
}
|
|
15
15
|
};
|
|
16
16
|
CardHeader.style = cardHeaderComponentCss;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-card-header.entry.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,
|
|
1
|
+
{"file":"p-card-header.entry.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,kkDAAkkD;;MCMplD,UAAU;;;;iBASG,KAAK;;EAE9B,MAAM;;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAC,eAAe,IAC1B,YAAM,IAAI,EAAC,QAAQ,GAAG,EAErB,CAAC,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,KAAI,IAAI,CAAC,KAAK,MAClC,WAAK,KAAK,EAAC,OAAO,IACjB,gBAAO,MAAA,IAAI,CAAC,MAAM,mCAAI,EAAE,CAAQ,EAC/B,IAAI,CAAC,KAAK,KACV,cACC,OAAO,EAAC,OAAO,EACf,KAAK,EAAC,yBAAyB,GAC9B,CACF,CACI,CACN,EAED,YAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,EACN;GACF;;;;;;","names":[],"sources":["src/components/atoms/card-header/card-header.component.scss?tag=p-card-header","src/components/atoms/card-header/card-header.component.tsx"],"sourcesContent":["p-card-header {\n\t@apply mx-4 h-14 flex-shrink-0;\n\t@apply flex gap-3 items-center;\n\t@apply text-storm-medium;\n\t@apply border-b border-b-mystic-medium #{!important};\n\n\t.title {\n\t\t@apply order-2;\n\t\t@apply flex-1 overflow-hidden flex items-center text-storm;\n\t\t@apply font-semibold;\n\n\t\t> span {\n\t\t\t@apply flex-1 overflow-hidden text-ellipsis whitespace-nowrap;\n\t\t}\n\n\t\t> p-icon {\n\t\t\t@apply ml-2 text-mystic-dark;\n\t\t}\n\t}\n\n\t[slot='prefix'] {\n\t\t@apply order-1;\n\t}\n\n\t[slot='suffix'] {\n\t\t@apply order-3;\n\t}\n}\n\np-card-container.has-hover:hover {\n\tp-card-header {\n\t\t.title > p-icon {\n\t\t\t@apply text-indigo;\n\t\t}\n\t}\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n\ttag: 'p-card-header',\n\tstyleUrl: 'card-header.component.scss',\n})\nexport class CardHeader {\n\t/**\n\t * Content of the card header\n\t */\n\t@Prop() header: string;\n\n\t/**\n\t * Enable the title arrow\n\t */\n\t@Prop() arrow: boolean = false;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class='p-card-header'>\n\t\t\t\t<slot name='prefix' />\n\n\t\t\t\t{(this.header?.length || this.arrow) && (\n\t\t\t\t\t<div class='title'>\n\t\t\t\t\t\t<span>{this.header ?? ''}</span>\n\t\t\t\t\t\t{this.arrow && (\n\t\t\t\t\t\t\t<p-icon\n\t\t\t\t\t\t\t\tvariant='arrow'\n\t\t\t\t\t\t\t\tclass='group-hover:text-indigo'\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t<slot name='suffix' />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host, g as getElement } from './index-7b917f6b.js';
|
|
2
2
|
|
|
3
|
-
const dividerComponentCss = ".mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.my-0{margin-bottom:0!important;margin-top:0!important}.my-2{margin-bottom:.5rem!important;margin-top:.5rem!important}.block{display:block!important}.flex{display:flex!important}.h-full{height:100%!important}.h-px{height:1px!important}.w-auto{width:auto!important}.w-full{width:100%!important}.w-px{width:1px!important}.flex-1{flex:1 1 0%!important}*{box-sizing:border-box}:host{--tw-text-opacity:1;color:rgb(227 236 243/var(--tw-text-opacity));display:block;margin-bottom:.5rem;margin-top:.5rem;width:100%}:host .content{align-items:center;display:flex;width:100%}:host .content:after,:host .content:before{background-color:currentColor;content:\"\";flex:1 1 0%;height:1px}:host([variant=vertical]){display:block;height:100%;margin:0 .5rem;width:auto}:host([variant=vertical]) .content{flex-direction:column;height:100%;width:auto}:host([variant=vertical]) .content:after,:host([variant=vertical]) .content:before{background-color:currentColor;content:\"\";flex:1 1 0%;width:1px}.
|
|
3
|
+
const dividerComponentCss = ".mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.my-0{margin-bottom:0!important;margin-top:0!important}.my-2{margin-bottom:.5rem!important;margin-top:.5rem!important}.block{display:block!important}.flex{display:flex!important}.h-full{height:100%!important}.h-px{height:1px!important}.w-auto{width:auto!important}.w-full{width:100%!important}.w-px{width:1px!important}.flex-1{flex:1 1 0%!important}*{box-sizing:border-box}:host{--tw-text-opacity:1;color:rgb(227 236 243/var(--tw-text-opacity));display:block;margin-bottom:.5rem;margin-top:.5rem;width:100%}:host .content{align-items:center;display:flex;width:100%}:host .content:after,:host .content:before{background-color:currentColor;content:\"\";flex:1 1 0%;height:1px}:host([variant=vertical]){display:block;height:100%;margin:0 .5rem;width:auto}:host([variant=vertical]) .content{flex-direction:column;height:100%;width:auto}:host([variant=vertical]) .content:after,:host([variant=vertical]) .content:before{background-color:currentColor;content:\"\";flex:1 1 0%;width:1px}.items-center{align-items:center!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.text-xxs{font-size:.6875rem!important}.font-semibold{font-weight:600!important}.uppercase{text-transform:uppercase!important}.text-storm-light{--tw-text-opacity:1!important;color:rgb(176 178 203/var(--tw-text-opacity))!important}";
|
|
4
4
|
|
|
5
5
|
const Divider = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-divider.entry.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,
|
|
1
|
+
{"file":"p-divider.entry.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,u2CAAu2C;;MCOt3C,OAAO;;;mBAI2C,YAAY;;EAO1E,MAAM;;IACL,MAAM,UAAU,GAAG,CAAC,EAAC,MAAA,IAAI,CAAC,GAAG,CAAC,SAAS,0CAAE,MAAM,CAAA,CAAC;IAChD,QACC,EAAC,IAAI,IAAC,KAAK,EAAC,WAAW,IACtB,WAAK,KAAK,EAAC,SAAS,IACnB,WACC,KAAK,EAAE,qBACN,UAAU,IAAI,MACf,oDAAoD,IAEpD,eAAQ,CACH,CACD,CACA,EACN;GACF;;;;;;;","names":[],"sources":["src/components/atoms/divider/divider.component.scss?tag=p-divider&encapsulation=shadow","src/components/atoms/divider/divider.component.tsx"],"sourcesContent":[":host {\n\t@apply my-2 block w-full text-mystic-medium;\n\n\t.content {\n\t\t@apply flex w-full items-center;\n\n\t\t&::before,\n\t\t&::after {\n\t\t\tcontent: '';\n\t\t\t@apply h-px flex-1 bg-current;\n\t\t}\n\t}\n}\n\n:host([variant='vertical']) {\n\t@apply mx-2 my-0 block h-full w-auto;\n\n\t.content {\n\t\t@apply h-full w-auto flex-col;\n\n\t\t&::before,\n\t\t&::after {\n\t\t\tcontent: '';\n\t\t\t@apply w-px flex-1 bg-current;\n\t\t}\n\t}\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n\ttag: 'p-divider',\n\tstyleUrl: 'divider.component.scss',\n\tshadow: true,\n})\nexport class Divider {\n\t/**\n\t * The variant of the modal body\n\t */\n\t@Prop({ reflect: true }) variant: 'horizontal' | 'vertical' = 'horizontal';\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\trender() {\n\t\tconst hasSlotted = !!this._el.innerHTML?.length;\n\t\treturn (\n\t\t\t<Host class=\"p-divider\">\n\t\t\t\t<div class=\"content\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass={`flex items-center ${\n\t\t\t\t\t\t\thasSlotted && 'px-2'\n\t\t\t\t\t\t} text-xxs font-semibold uppercase text-storm-light`}\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot />\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"],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host } from './index-7b917f6b.js';
|
|
2
2
|
|
|
3
|
-
const dropdownMenuContainerComponentCss = ".z-10{z-index:10!important}.flex{display:flex!important}.hidden{display:none!important}.max-h-\\[11\\.5rem\\]{max-height:11.5rem!important}.max-h-\\[13\\.875rem\\]{max-height:13.875rem!important}.max-h-\\[20rem\\]{max-height:20rem!important}.w-full{width:100%!important}.max-w-\\[222px\\]{max-width:222px!important}.flex-col{flex-direction:column!important}.gap-\\[1px\\]{gap:1px!important}.overflow-y-auto{overflow-y:auto!important}.rounded-xxlarge{border-radius:.75rem!important}.drop-shadow-4{--tw-drop-shadow:drop-shadow(0px 0.3125rem 1rem rgba(0,24,98,.08)) drop-shadow(0px 0.0625rem 0.1875rem rgba(0,24,98,.13))!important}.drop-shadow-4,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}*{box-sizing:border-box}p-dropdown-menu-container{--tw-bg-opacity:1;--tw-drop-shadow:drop-shadow(0px 0.3125rem 1rem rgba(0,24,98,.08)) drop-shadow(0px 0.0625rem 0.1875rem rgba(0,24,98,.13));background-color:rgb(255 255 255/var(--tw-bg-opacity));border-radius:.75rem;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);width:auto;z-index:10}p-dropdown-menu-container .content{display:flex;flex-direction:column;gap:1px;padding:.5rem;width:100%}p-dropdown-menu-container.full-width{width:100%}p-dropdown-menu-container.no-overflow{overflow-x:hidden;overflow-y:auto}p-dropdown-menu-container.max-width{max-width:222px}p-dropdown-menu-container.scrollable{max-height:11.5rem;scrollbar-width:none}p-dropdown-menu-container.scrollable::-webkit-scrollbar{display:none}p-dropdown-menu-container.scrollable .content{height:100%}p-dropdown-menu-container.scrollable.scrollable-large{max-height:13.875rem}p-dropdown-menu-container.scrollable.scrollable-xlarge{max-height:20rem}
|
|
3
|
+
const dropdownMenuContainerComponentCss = ".z-10{z-index:10!important}.flex{display:flex!important}.hidden{display:none!important}.max-h-\\[11\\.5rem\\]{max-height:11.5rem!important}.max-h-\\[13\\.875rem\\]{max-height:13.875rem!important}.max-h-\\[20rem\\]{max-height:20rem!important}.w-full{width:100%!important}.max-w-\\[222px\\]{max-width:222px!important}.flex-col{flex-direction:column!important}.gap-\\[1px\\]{gap:1px!important}.overflow-y-auto{overflow-y:auto!important}.rounded-xxlarge{border-radius:.75rem!important}.drop-shadow-4{--tw-drop-shadow:drop-shadow(0px 0.3125rem 1rem rgba(0,24,98,.08)) drop-shadow(0px 0.0625rem 0.1875rem rgba(0,24,98,.13))!important}.drop-shadow-4,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}*{box-sizing:border-box}p-dropdown-menu-container{--tw-bg-opacity:1;--tw-drop-shadow:drop-shadow(0px 0.3125rem 1rem rgba(0,24,98,.08)) drop-shadow(0px 0.0625rem 0.1875rem rgba(0,24,98,.13));background-color:rgb(255 255 255/var(--tw-bg-opacity));border-radius:.75rem;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);width:auto;z-index:10}p-dropdown-menu-container .content{display:flex;flex-direction:column;gap:1px;padding:.5rem;width:100%}p-dropdown-menu-container.full-width{width:100%}p-dropdown-menu-container.no-overflow{overflow-x:hidden;overflow-y:auto}p-dropdown-menu-container.max-width{max-width:222px}p-dropdown-menu-container.scrollable{max-height:11.5rem;scrollbar-width:none}p-dropdown-menu-container.scrollable::-webkit-scrollbar{display:none}p-dropdown-menu-container.scrollable .content{height:100%}p-dropdown-menu-container.scrollable.scrollable-large{max-height:13.875rem}p-dropdown-menu-container.scrollable.scrollable-xlarge{max-height:20rem}";
|
|
4
4
|
|
|
5
5
|
const DropdownMenuContainer = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-dropdown-menu-container.entry.js","mappings":";;AAAA,MAAM,iCAAiC,GAAG,
|
|
1
|
+
{"file":"p-dropdown-menu-container.entry.js","mappings":";;AAAA,MAAM,iCAAiC,GAAG,24DAA24D;;MCOx6D,qBAAqB;;;oBAIL,IAAI;qBAKH,IAAI;yBAKA,KAAK;sBAKyB,KAAK;;EAEpE,MAAM;IACL,QACC,EAAC,IAAI,IACJ,KAAK,EAAE,6BACN,IAAI,CAAC,QAAQ,IAAI,WAClB,IAAI,IAAI,CAAC,SAAS,IAAI,YAAY,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,aAAa,IACzE,CAAC,CAAC,IAAI,CAAC,UAAU,IAAI,YACtB,IAAI,IAAI,CAAC,UAAU,KAAK,OAAO,GAAG,kBAAkB,GAAG,EAAE,IAAI,IAAI,CAAC,UAAU,KAAK,QAAQ,GAAG,mBAAmB,GAAG,EAAE,EAAE,IAEtH,WAAK,KAAK,EAAC,SAAS,IACnB,eAAQ,CACH,CACA,EACN;GACF;;;;;;","names":[],"sources":["src/components/atoms/dropdown-menu-container/dropdown-menu-container.component.scss?tag=p-dropdown-menu-container","src/components/atoms/dropdown-menu-container/dropdown-menu-container.component.tsx"],"sourcesContent":["@import '../../../style/mixins';\n\np-dropdown-menu-container {\n\t@apply w-auto;\n\t@apply rounded-xxlarge bg-white;\n\t@apply z-10 drop-shadow-4 filter;\n\n\t.content {\n\t\t@apply w-full p-2;\n\t\t@apply flex flex-col gap-[1px];\n\t}\n\n\t&.full-width {\n\t\t@apply w-full;\n\t}\n\n\t&.no-overflow {\n\t\t@apply overflow-y-auto overflow-x-hidden;\n\t}\n\n\t&.max-width {\n\t\t@apply max-w-[222px];\n\t}\n\n\t&.scrollable {\n\t\t@apply max-h-[11.5rem];\n\n\t\tscrollbar-width: none;\n\t\t&::-webkit-scrollbar {\n\t\t\t@apply hidden;\n\t\t}\n\n\t\t.content {\n\t\t\t@apply h-full;\n\t\t}\n\n\t\t&.scrollable-large {\n\t\t\t@apply max-h-[13.875rem];\n\t\t}\n\n\t\t&.scrollable-xlarge {\n\t\t\t@apply max-h-[20rem];\n\t\t}\n\t}\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n\ttag: 'p-dropdown-menu-container',\n\tstyleUrl: 'dropdown-menu-container.component.scss',\n\t// shadow: true,\n})\nexport class DropdownMenuContainer {\n\t/**\n\t * Wether the container applies it's max width\n\t */\n\t@Prop() maxWidth: boolean = true;\n\n\t/**\n\t * Wether the container should all available space\n\t */\n\t@Prop() fullWidth: boolean = true;\n\n\t/**\n\t * Wether to allow overflow\n\t */\n\t@Prop() allowOverflow: boolean = false;\n\n\t/**\n\t * Wether the container should be scrollable when the threshold is met.\n\t */\n\t@Prop() scrollable: boolean | 'default' | 'large' | 'xlarge' = false;\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={`p-dropdown-menu-container ${\n\t\t\t\t\tthis.maxWidth && 'max-width'\n\t\t\t\t} ${this.fullWidth && 'full-width'} ${!this.allowOverflow && 'no-overflow'} ${\n\t\t\t\t\t!!this.scrollable && 'scrollable'\n\t\t\t\t} ${this.scrollable === 'large' ? 'scrollable-large' : ''} ${this.scrollable === 'xlarge' ? 'scrollable-xlarge' : ''}`}\n\t\t\t>\n\t\t\t\t<div class=\"content\">\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"],"version":3}
|
|
@@ -145,7 +145,7 @@ const Dropdown = class {
|
|
|
145
145
|
};
|
|
146
146
|
Dropdown.style = dropdownComponentCss;
|
|
147
147
|
|
|
148
|
-
const dropdownMenuItemComponentCss = ".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}.justify-start{justify-content:flex-start!important}.gap-2{gap:.5rem!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.whitespace-nowrap{white-space:nowrap!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;justify-content:flex-start;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-align:start;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}";
|
|
148
|
+
const dropdownMenuItemComponentCss = ".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}.justify-start{justify-content:flex-start!important}.gap-2{gap:.5rem!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.whitespace-nowrap{white-space:nowrap!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;justify-content:flex-start;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-align:start;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))}.flex-shrink-0{flex-shrink:0!important}";
|
|
149
149
|
|
|
150
150
|
const DropdownMenuItem = class {
|
|
151
151
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-dropdown.p-dropdown-menu-item.entry.js","mappings":"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","names":[],"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 offset of the dropdown menu\n\t */\n\t@Prop() offset: number = 8;\n\n\t/**\n\t * The strategy of the dropdown 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 to allow overflow in the container\n\t */\n\t@Prop() allowOverflow: boolean = false;\n\n\t/**\n\t * Wether the dropdown container should be scrollable when the threshold is met.\n\t */\n\t@Prop() scrollable: boolean | 'default' | 'large' = 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\tallowOverflow={this.allowOverflow}\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(this.offset), 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 justify-start 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 text-start;\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\t/**\n\t * wether to use the container for text\n\t */\n\t@Prop() useContainer = true;\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{this.useContainer ? (\n\t\t\t\t\t<div class='text-container'>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<slot />\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}
|
|
1
|
+
{"file":"p-dropdown.p-dropdown-menu-item.entry.js","mappings":"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","names":[],"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 offset of the dropdown menu\n\t */\n\t@Prop() offset: number = 8;\n\n\t/**\n\t * The strategy of the dropdown 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 to allow overflow in the container\n\t */\n\t@Prop() allowOverflow: boolean = false;\n\n\t/**\n\t * Wether the dropdown container should be scrollable when the threshold is met.\n\t */\n\t@Prop() scrollable: boolean | 'default' | 'large' = 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\tallowOverflow={this.allowOverflow}\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(this.offset), 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 justify-start 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 text-start;\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\t/**\n\t * wether to use the container for text\n\t */\n\t@Prop() useContainer = true;\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{this.useContainer ? (\n\t\t\t\t\t<div class='text-container'>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<slot />\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}
|