npm - @paperless/core - Versions diffs - 1.12.2 → 1.12.4 - Mend

@paperless/core 1.12.2 → 1.12.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (46) hide show

package/dist/cjs/p-divider.cjs.entry.js CHANGED Viewed

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-1fde8b14.js');
-const dividerComponentCss = ".my-2{margin-bottom:.5rem!important;margin-top:.5rem!important}.block{display:block!important}.flex{display:flex!important}.h-px{height:1px!important}.w-full{width:100%!important}.bg-mystic-medium{--tw-bg-opacity:1!important;background-color:rgb(227 236 243/var(--tw-bg-opacity))!important}*{box-sizing:border-box}:host{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{--tw-bg-opacity:1;background-color:rgb(227 236 243/var(--tw-bg-opacity));content:\"\";flex:1 1 0%;height:1px}.static{position:static!important}.items-center{align-items:center!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.font-semibold{font-weight:600!important}.uppercase{text-transform:uppercase!important}";
+const dividerComponentCss = ".my-2{margin-bottom:.5rem!important;margin-top:.5rem!important}.block{display:block!important}.flex{display:flex!important}.h-px{height:1px!important}.w-full{width:100%!important}.bg-mystic-medium{--tw-bg-opacity:1!important;background-color:rgb(227 236 243/var(--tw-bg-opacity))!important}*{box-sizing:border-box}:host{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{--tw-bg-opacity:1;background-color:rgb(227 236 243/var(--tw-bg-opacity));content:\"\";flex:1 1 0%;height:1px}.static{position:static!important}.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}";
 const Divider = class {
   constructor(hostRef) {
@@ -13,7 +13,7 @@ const Divider = class {
   render() {
     var _a;
     const hasSlotted = !!((_a = this._el.innerHTML) === null || _a === void 0 ? void 0 : _a.length);
-    return (index.h(index.Host, { class: "p-divider" }, index.h("div", { class: "content" }, index.h("div", { class: `flex items-center ${hasSlotted && 'px-2'} text-xs font-semibold uppercase` }, index.h("slot", null)))));
+    return (index.h(index.Host, { class: "p-divider" }, index.h("div", { class: "content" }, index.h("div", { class: `flex items-center ${hasSlotted && 'px-2'} text-xxs font-semibold uppercase` }, index.h("slot", null)))));
   }
   get _el() { return index.getElement(this); }
 };

package/dist/cjs/p-divider.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"p-divider.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,mBAAmB,GAAG,~~s3BAAs3B~~;;~~MCOr4B~~,OAAO;;;;EAMhB,MAAM;;IACF,MAAM,UAAU,GAAG,CAAC,EAAC,MAAA,IAAI,CAAC,GAAG,CAAC,SAAS,0CAAE,MAAM,CAAA,CAAC;IAChD,QACIA,QAACC,UAAI,IAAC,KAAK,EAAC,WAAW,IACnBD,iBAAK,KAAK,EAAC,SAAS,IAChBA,iBACI,KAAK,EAAE,qBACH,UAAU,IAAI,MAClB,~~kCAAkC~~,~~IAElCA~~,qBAAQ,CACN,CACJ,CACH,EACT;GACL;;;;;;;","names":["h","Host"],"sources":["src/components/atoms/divider/divider.component.scss?tag=p-divider&encapsulation=shadow","src/components/atoms/divider/divider.component.tsx"],"sourcesContent":[":host {\n @apply block my-2 w-full;\n\n .content {\n @apply flex w-full items-center;\n\n &::before,\n &::after {\n content: '';\n @apply h-px bg-mystic-medium flex-1;\n }\n }\n}\n","import { Component, Element, h, Host } from '@stencil/core';\n\n@Component({\n tag: 'p-divider',\n styleUrl: 'divider.component.scss',\n shadow: true,\n})\nexport class Divider {\n /*\n The host element\n */\n @Element() private _el: HTMLElement;\n\n render() {\n const hasSlotted = !!this._el.innerHTML?.length;\n return (\n <Host class=\"p-divider\">\n <div class=\"content\">\n <div\n class={`flex items-center ${\n hasSlotted && 'px-2'\n } text-xs font-semibold uppercase`}\n >\n <slot />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-divider.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,mBAAmB,GAAG,81BAA81B;;MCO72B,OAAO;;;;EAMhB,MAAM;;IACF,MAAM,UAAU,GAAG,CAAC,EAAC,MAAA,IAAI,CAAC,GAAG,CAAC,SAAS,0CAAE,MAAM,CAAA,CAAC;IAChD,QACIA,QAACC,UAAI,IAAC,KAAK,EAAC,WAAW,IACnBD,iBAAK,KAAK,EAAC,SAAS,IAChBA,iBACI,KAAK,EAAE,qBACH,UAAU,IAAI,MAClB,mCAAmC,IAEnCA,qBAAQ,CACN,CACJ,CACH,EACT;GACL;;;;;;;","names":["h","Host"],"sources":["src/components/atoms/divider/divider.component.scss?tag=p-divider&encapsulation=shadow","src/components/atoms/divider/divider.component.tsx"],"sourcesContent":[":host {\n @apply block my-2 w-full;\n\n .content {\n @apply flex w-full items-center;\n\n &::before,\n &::after {\n content: '';\n @apply h-px bg-mystic-medium flex-1;\n }\n }\n}\n","import { Component, Element, h, Host } from '@stencil/core';\n\n@Component({\n tag: 'p-divider',\n styleUrl: 'divider.component.scss',\n shadow: true,\n})\nexport class Divider {\n /*\n The host element\n */\n @Element() private _el: HTMLElement;\n\n render() {\n const hasSlotted = !!this._el.innerHTML?.length;\n return (\n <Host class=\"p-divider\">\n <div class=\"content\">\n <div\n class={`flex items-center ${\n hasSlotted && 'px-2'\n } text-xxs font-semibold uppercase`}\n >\n <slot />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/p-helper_3.cjs.entry.js CHANGED Viewed

@@ -84,7 +84,8 @@ const InputGroup = class {
     if (!input) {
       return;
     }
-    if (this._whitelistedTags.indexOf(input.tagName) === -1) {
+    const tagName = input.tagName.toLowerCase();
+    if (this._whitelistedTags.indexOf(tagName) === -1) {
       return;
     }
     if (!input.classList.contains('p-input')) {

package/dist/cjs/p-helper_3.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"p-helper.p-input-error.p-input-group.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/atoms/helper/helper.component.scss?tag=p-helper&encapsulation=shadow","src/components/atoms/helper/helper.component.tsx","src/components/molecules/input-error/input-error.component.tsx","src/components/molecules/input-group/input-group.component.scss?tag=p-input-group&encapsulation=shadow","src/components/molecules/input-group/input-group.component.tsx"],"sourcesContent":[":host {\n .helper {\n @apply inline-block cursor-pointer bg-no-repeat bg-center w-3 h-3;\n background-image: url(/assets/images/helper/helper.svg);\n\n &:hover {\n background-image: url(/assets/images/helper/helper-hover.svg);\n }\n }\n}\n","import { Placement } from '@floating-ui/dom';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'p-helper',\n styleUrl: 'helper.component.scss',\n shadow: true,\n})\nexport class Helper {\n /*\n The placement of the helper popover\n /\n @Prop() placement: Placement = 'top';\n\n render() {\n return (\n <Host class=\"p-helper\">\n <p-tooltip placement={this.placement}>\n <div slot=\"content\">\n <slot />\n </div>\n\n <div slot=\"trigger\" class=\"helper\"></div>\n </p-tooltip>\n </Host>\n );\n }\n}\n","import { Component, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n tag: 'p-input-error',\n shadow: true,\n})\nexport class InputError {\n /\n The error to show\n /\n @Prop() error: string;\n\n /\n Wether to force show the tooltip\n /\n @Prop() forceShowTooltip = false;\n\n @State() private _showTooltip = false;\n\n render() {\n return (\n <Host class=\"p-input-error\">\n <p-tooltip\n variant=\"error\"\n content={this.error}\n show={this.forceShowTooltip}\n onIsOpen={(ev) => (this._showTooltip = ev.detail)}\n >\n <p-icon\n class={`${\n this._showTooltip\n ? 'text-negative'\n : 'text-negative-light'\n } hover:text-negative`}\n slot=\"trigger\"\n variant=\"explanation\"\n />\n </p-tooltip>\n </Host>\n );\n }\n}\n","@import '../../../style/form/mixins';\n\n@mixin slottedItems($prefix: false) {\n @include inputs($prefix, true) {\n @content;\n }\n}\n\n:host {\n @apply flex w-full flex-col;\n @apply outline-none #{!important};\n\n .input-label {\n @apply mb-[2px] text-xs font-semibold uppercase tracking-wider text-storm-vague;\n }\n\n .input-header {\n @apply mb-[2px] flex items-end gap-2;\n }\n\n .content {\n @apply flex w-full;\n\n .prefix,\n .suffix {\n @include inputDefaultState(false);\n @apply box-border flex-1 text-storm;\n @apply h-full;\n }\n\n .prefix {\n @apply rounded-br-none rounded-tr-none;\n @apply border-r-0 #{!important};\n @apply order-1;\n @apply pr-2;\n }\n\n .suffix {\n @apply rounded-bl-none rounded-tl-none;\n @apply order-3;\n @apply pl-2;\n @apply border-l-0 #{!important};\n }\n\n @include slottedItems() {\n @include inputDefaultState();\n @apply order-2;\n }\n\n @include slottedItems('.prefix') {\n @apply rounded-bl-none rounded-tl-none #{!important};\n @apply flex-auto;\n @apply border-l-0 pl-0 #{!important};\n }\n\n @include slottedItems('.suffix') {\n @apply rounded-br-none rounded-tr-none #{!important};\n @apply flex-auto;\n @apply border-r-0 pr-0 #{!important};\n }\n }\n}\n\n:host(.focused),\n:host([focused]),\n:host(:focus-within),\n:host(:focus) {\n @apply outline-none #{!important};\n\n .prefix,\n .suffix {\n @include inputFocusState();\n @apply text-indigo;\n }\n\n @include slottedItems() {\n @include inputFocusState();\n }\n}\n\n:host(.error),\n:host([error]) {\n .prefix,\n .suffix {\n @include inputErrorState();\n @apply text-negative;\n }\n\n .suffix {\n @apply items-start py-[calc(0.75rem-1px)];\n }\n\n @include slottedItems() {\n @include inputErrorState();\n\n &:focus,\n &:focus-within,\n &:focus-visible,\n &.focus,\n &[active],\n &.active {\n @include inputErrorState();\n }\n }\n}\n\n:host(.disabled),\n:host([disabled]) {\n .prefix,\n .suffix {\n @include inputDisabledState();\n }\n\n @include slottedItems() {\n @include inputDisabledState();\n pointer-events: none;\n }\n}\n\n:host(.size-small) {\n @include slottedItems() {\n @include inputSizeSmall();\n }\n}\n\n:host(.size-small.error),\n:host(.size-small[error]) {\n .suffix {\n @apply py-2;\n }\n}\n","import {\n Component,\n Element,\n h,\n Host,\n Listen,\n Prop,\n State,\n} from '@stencil/core';\nimport { RotateOptions } from '../../../types/tailwind';\nimport { IconFlipOptions, IconVariant } from '../../atoms/icon/icon.component';\n\n@Component({\n tag: 'p-input-group',\n styleUrl: './input-group.component.scss',\n shadow: true,\n})\nexport class InputGroup {\n /\n The size of the input group\n /\n @Prop() size: 'small' \| 'medium' = 'medium';\n\n /\n The prefix of the input group\n /\n @Prop() prefix: string;\n\n /\n The suffix of the input group\n /\n @Prop() suffix: string;\n\n /\n Icon of the input group\n /\n @Prop() icon: IconVariant;\n\n /\n Icon flip\n /\n @Prop() iconFlip: IconFlipOptions;\n\n /\n Icon rotate\n /\n @Prop() iconRotate: RotateOptions;\n\n /\n Icon position\n /\n @Prop() iconPosition: 'start' \| 'end' = 'start';\n\n /\n The label of the input group\n /\n @Prop() label: string;\n\n /\n The helper of the input group\n /\n @Prop() helper: string;\n\n /\n Wether the field is required\n /\n @Prop({ reflect: true }) required: boolean;\n\n /\n The helper of the input group\n /\n @Prop({ reflect: true }) error: string;\n\n /\n Wether the input group is disabled\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n Wether the input group is focused\n /\n @Prop({ reflect: true }) focused: boolean = false;\n\n /\n The method to use when focusing the input\n /\n @Prop() focusMethod: 'focus' \| 'click' = 'focus';\n\n /\n The host element\n /\n @Element() private _el: HTMLElement;\n\n @State() private _forceShowTooltip = false;\n\n private _whitelistedTags = ['input', 'textarea'];\n\n componentWillRender() {\n this._setInputClasses();\n }\n\n render() {\n const {\n hasHeaderSlot,\n helper,\n label,\n prefix,\n suffix,\n errorAndErrorIsNotBoolean,\n errorVariant,\n } = this._getSlotInfo();\n\n return (\n <Host\n class={`p-input-group ${this.error?.length && 'error'} ${\n this.disabled && 'disabled'\n } ${this.focused && 'focused'} size-${this.size}`}\n >\n <div class=\"flex items-end justify-between\">\n {label && (\n <div\n class=\"input-label\"\n onClick={() => this._focusInput()}\n >\n {label}\n {this.required && (\n <span class=\"ml-1 text-negative\"></span>\n )}\n </div>\n )}\n\n {(helper \|\| hasHeaderSlot) && (\n <div class=\"input-header\">\n {hasHeaderSlot && <slot name=\"header\" />}\n {helper && (\n <p-helper\n class={`flex ${\n hasHeaderSlot ? 'ml-2' : ''\n }`}\n placement=\"top-end\"\n >\n {helper}\n </p-helper>\n )}\n </div>\n )}\n </div>\n <p-tooltip\n class=\"w-full\"\n variant=\"error-element\"\n content={this.error}\n show={\n errorAndErrorIsNotBoolean &&\n errorVariant === 'element' &&\n this._forceShowTooltip\n }\n enableUserInput={false}\n >\n <div class=\"content\" slot=\"trigger\">\n {(prefix \|\|\n (this.icon && this.iconPosition === 'start')) && (\n <div\n class={`prefix size-${this.size}`}\n onClick={() => this._focusInput()}\n >\n {this.icon && this.iconPosition === 'start' ? (\n <p-icon\n class=\"flex\"\n variant={this.icon}\n rotate={this.iconRotate}\n flip={this.iconFlip}\n />\n ) : (\n prefix\n )}\n </div>\n )}\n {(suffix \|\|\n (errorAndErrorIsNotBoolean &&\n errorVariant === 'icon') \|\|\n (this.icon && this.iconPosition === 'end')) && (\n <div\n class={`suffix size-${this.size}`}\n onClick={() => this._focusInput()}\n >\n {errorAndErrorIsNotBoolean &&\n errorVariant === 'icon' ? (\n <p-input-error\n error={this.error}\n forceShowTooltip={\n this._forceShowTooltip\n }\n />\n ) : this.icon && this.iconPosition === 'end' ? (\n <p-icon\n class=\"flex\"\n variant={this.icon}\n rotate={this.iconRotate}\n flip={this.iconFlip}\n />\n ) : (\n suffix\n )}\n </div>\n )}\n\n <slot name=\"input\" />\n </div>\n </p-tooltip>\n </Host>\n );\n }\n\n @Listen('focusin')\n handleFocusIn() {\n this._forceShowTooltip = true;\n }\n\n @Listen('focusout')\n handleFocusOut() {\n this._forceShowTooltip = false;\n }\n /* \n With this, we shall hack the system in ways no one would ever have thought.\n \n <div class=\"pl-0 pr-0 border-l-0 border-r-0 rounded-tl-none rounded-bl-none rounded-tr-none rounded-br-none\"></div>\n */\n private _setInputClasses() {\n const input = this._el.querySelector(':scope > [slot=\"input\"]');\n\n if (!input) {\n return;\n }\n\n if (this._whitelistedTags.indexOf(input.tagName) === -1) {\n return;\n }\n\n if (!input.classList.contains('p-input')) {\n input.classList.add('p-input');\n }\n\n const { prefix, suffix, errorAndErrorIsNotBoolean, errorVariant } =\n this._getSlotInfo();\n\n if (\n suffix \|\|\n (errorAndErrorIsNotBoolean && errorVariant === 'icon') \|\|\n (this.icon && this.iconPosition === 'end')\n ) {\n input.classList.add(\n 'border-r-0',\n 'rounded-tr-none',\n 'rounded-br-none',\n 'pr-0'\n );\n } else {\n input.classList.remove(\n 'border-r-0',\n 'rounded-tr-none',\n 'rounded-br-none',\n 'pr-0'\n );\n }\n\n if (prefix \|\| (this.icon && this.iconPosition === 'start')) {\n input.classList.add(\n 'border-l-0',\n 'rounded-tl-none',\n 'rounded-bl-none',\n 'pl-0'\n );\n } else {\n input.classList.remove(\n 'border-l-0',\n 'rounded-tl-none',\n 'rounded-bl-none',\n 'pl-0'\n );\n }\n\n if (this.size === 'small' && !input.classList.contains('size-small')) {\n input.classList.add('size-small');\n }\n\n if (this.size !== 'small' && input.classList.contains('size-small')) {\n input.classList.remove('size-small');\n }\n }\n\n private _getSlotInfo() {\n const hasHelperSlot = !!this._el.querySelector(\n ':scope > [slot=\"helper\"]'\n );\n const hasLabelSlot = !!this._el.querySelector(\n ':scope > [slot=\"label\"]'\n );\n const hasPrefixSlot = !!this._el.querySelector(\n ':scope > [slot=\"prefix\"]'\n );\n const hasSuffixSlot = !!this._el.querySelector(\n ':scope > [slot=\"suffix\"]'\n );\n const hasHeaderSlot = !!this._el.querySelector(\n ':scope > [slot=\"header\"]'\n );\n\n const helper = hasHelperSlot ? <slot name=\"helper\" /> : this.helper;\n const label = hasLabelSlot ? <slot name=\"label\" /> : this.label;\n const prefix = hasPrefixSlot ? <slot name=\"prefix\" /> : this.prefix;\n const suffix = hasSuffixSlot ? <slot name=\"suffix\" /> : this.suffix;\n\n const errorAndErrorIsNotBoolean =\n this.error &&\n typeof this.error === 'string' &&\n this.error !== 'true';\n\n return {\n hasHelperSlot,\n hasLabelSlot,\n hasPrefixSlot,\n hasSuffixSlot,\n hasHeaderSlot,\n helper,\n label,\n prefix,\n suffix,\n errorAndErrorIsNotBoolean,\n errorVariant: this._el.offsetWidth <= 72 ? 'element' : 'icon',\n };\n }\n\n private _focusInput() {\n const input = this._el.querySelector(':scope > [slot=\"input\"]');\n (input as HTMLElement)[this.focusMethod]();\n }\n}\n"],"version":3}
1	+ {"file":"p-helper.p-input-error.p-input-group.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/atoms/helper/helper.component.scss?tag=p-helper&encapsulation=shadow","src/components/atoms/helper/helper.component.tsx","src/components/molecules/input-error/input-error.component.tsx","src/components/molecules/input-group/input-group.component.scss?tag=p-input-group&encapsulation=shadow","src/components/molecules/input-group/input-group.component.tsx"],"sourcesContent":[":host {\n .helper {\n @apply inline-block cursor-pointer bg-no-repeat bg-center w-3 h-3;\n background-image: url(/assets/images/helper/helper.svg);\n\n &:hover {\n background-image: url(/assets/images/helper/helper-hover.svg);\n }\n }\n}\n","import { Placement } from '@floating-ui/dom';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'p-helper',\n styleUrl: 'helper.component.scss',\n shadow: true,\n})\nexport class Helper {\n /*\n The placement of the helper popover\n /\n @Prop() placement: Placement = 'top';\n\n render() {\n return (\n <Host class=\"p-helper\">\n <p-tooltip placement={this.placement}>\n <div slot=\"content\">\n <slot />\n </div>\n\n <div slot=\"trigger\" class=\"helper\"></div>\n </p-tooltip>\n </Host>\n );\n }\n}\n","import { Component, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n tag: 'p-input-error',\n shadow: true,\n})\nexport class InputError {\n /\n The error to show\n /\n @Prop() error: string;\n\n /\n Wether to force show the tooltip\n /\n @Prop() forceShowTooltip = false;\n\n @State() private _showTooltip = false;\n\n render() {\n return (\n <Host class=\"p-input-error\">\n <p-tooltip\n variant=\"error\"\n content={this.error}\n show={this.forceShowTooltip}\n onIsOpen={(ev) => (this._showTooltip = ev.detail)}\n >\n <p-icon\n class={`${\n this._showTooltip\n ? 'text-negative'\n : 'text-negative-light'\n } hover:text-negative`}\n slot=\"trigger\"\n variant=\"explanation\"\n />\n </p-tooltip>\n </Host>\n );\n }\n}\n","@import '../../../style/form/mixins';\n\n@mixin slottedItems($prefix: false) {\n @include inputs($prefix, true) {\n @content;\n }\n}\n\n:host {\n @apply flex w-full flex-col;\n @apply outline-none #{!important};\n\n .input-label {\n @apply mb-[2px] text-xs font-semibold uppercase tracking-wider text-storm-vague;\n }\n\n .input-header {\n @apply mb-[2px] flex items-end gap-2;\n }\n\n .content {\n @apply flex w-full;\n\n .prefix,\n .suffix {\n @include inputDefaultState(false);\n @apply box-border flex-1 text-storm;\n @apply h-full;\n }\n\n .prefix {\n @apply rounded-br-none rounded-tr-none;\n @apply border-r-0 #{!important};\n @apply order-1;\n @apply pr-2;\n }\n\n .suffix {\n @apply rounded-bl-none rounded-tl-none;\n @apply order-3;\n @apply pl-2;\n @apply border-l-0 #{!important};\n }\n\n @include slottedItems() {\n @include inputDefaultState();\n @apply order-2;\n }\n\n @include slottedItems('.prefix') {\n @apply rounded-bl-none rounded-tl-none #{!important};\n @apply flex-auto;\n @apply border-l-0 pl-0 #{!important};\n }\n\n @include slottedItems('.suffix') {\n @apply rounded-br-none rounded-tr-none #{!important};\n @apply flex-auto;\n @apply border-r-0 pr-0 #{!important};\n }\n }\n}\n\n:host(.focused),\n:host([focused]),\n:host(:focus-within),\n:host(:focus) {\n @apply outline-none #{!important};\n\n .prefix,\n .suffix {\n @include inputFocusState();\n @apply text-indigo;\n }\n\n @include slottedItems() {\n @include inputFocusState();\n }\n}\n\n:host(.error),\n:host([error]) {\n .prefix,\n .suffix {\n @include inputErrorState();\n @apply text-negative;\n }\n\n .suffix {\n @apply items-start py-[calc(0.75rem-1px)];\n }\n\n @include slottedItems() {\n @include inputErrorState();\n\n &:focus,\n &:focus-within,\n &:focus-visible,\n &.focus,\n &[active],\n &.active {\n @include inputErrorState();\n }\n }\n}\n\n:host(.disabled),\n:host([disabled]) {\n .prefix,\n .suffix {\n @include inputDisabledState();\n }\n\n @include slottedItems() {\n @include inputDisabledState();\n pointer-events: none;\n }\n}\n\n:host(.size-small) {\n @include slottedItems() {\n @include inputSizeSmall();\n }\n}\n\n:host(.size-small.error),\n:host(.size-small[error]) {\n .suffix {\n @apply py-2;\n }\n}\n","import {\n Component,\n Element,\n h,\n Host,\n Listen,\n Prop,\n State,\n} from '@stencil/core';\nimport { RotateOptions } from '../../../types/tailwind';\nimport { IconFlipOptions, IconVariant } from '../../atoms/icon/icon.component';\n\n@Component({\n tag: 'p-input-group',\n styleUrl: './input-group.component.scss',\n shadow: true,\n})\nexport class InputGroup {\n /\n The size of the input group\n /\n @Prop() size: 'small' \| 'medium' = 'medium';\n\n /\n The prefix of the input group\n /\n @Prop() prefix: string;\n\n /\n The suffix of the input group\n /\n @Prop() suffix: string;\n\n /\n Icon of the input group\n /\n @Prop() icon: IconVariant;\n\n /\n Icon flip\n /\n @Prop() iconFlip: IconFlipOptions;\n\n /\n Icon rotate\n /\n @Prop() iconRotate: RotateOptions;\n\n /\n Icon position\n /\n @Prop() iconPosition: 'start' \| 'end' = 'start';\n\n /\n The label of the input group\n /\n @Prop() label: string;\n\n /\n The helper of the input group\n /\n @Prop() helper: string;\n\n /\n Wether the field is required\n /\n @Prop({ reflect: true }) required: boolean;\n\n /\n The helper of the input group\n /\n @Prop({ reflect: true }) error: string;\n\n /\n Wether the input group is disabled\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n Wether the input group is focused\n /\n @Prop({ reflect: true }) focused: boolean = false;\n\n /\n The method to use when focusing the input\n /\n @Prop() focusMethod: 'focus' \| 'click' = 'focus';\n\n /\n The host element\n /\n @Element() private _el: HTMLElement;\n\n @State() private _forceShowTooltip = false;\n\n private _whitelistedTags = ['input', 'textarea'];\n\n componentWillRender() {\n this._setInputClasses();\n }\n\n render() {\n const {\n hasHeaderSlot,\n helper,\n label,\n prefix,\n suffix,\n errorAndErrorIsNotBoolean,\n errorVariant,\n } = this._getSlotInfo();\n\n return (\n <Host\n class={`p-input-group ${this.error?.length && 'error'} ${\n this.disabled && 'disabled'\n } ${this.focused && 'focused'} size-${this.size}`}\n >\n <div class=\"flex items-end justify-between\">\n {label && (\n <div\n class=\"input-label\"\n onClick={() => this._focusInput()}\n >\n {label}\n {this.required && (\n <span class=\"ml-1 text-negative\"></span>\n )}\n </div>\n )}\n\n {(helper \|\| hasHeaderSlot) && (\n <div class=\"input-header\">\n {hasHeaderSlot && <slot name=\"header\" />}\n {helper && (\n <p-helper\n class={`flex ${\n hasHeaderSlot ? 'ml-2' : ''\n }`}\n placement=\"top-end\"\n >\n {helper}\n </p-helper>\n )}\n </div>\n )}\n </div>\n <p-tooltip\n class=\"w-full\"\n variant=\"error-element\"\n content={this.error}\n show={\n errorAndErrorIsNotBoolean &&\n errorVariant === 'element' &&\n this._forceShowTooltip\n }\n enableUserInput={false}\n >\n <div class=\"content\" slot=\"trigger\">\n {(prefix \|\|\n (this.icon && this.iconPosition === 'start')) && (\n <div\n class={`prefix size-${this.size}`}\n onClick={() => this._focusInput()}\n >\n {this.icon && this.iconPosition === 'start' ? (\n <p-icon\n class=\"flex\"\n variant={this.icon}\n rotate={this.iconRotate}\n flip={this.iconFlip}\n />\n ) : (\n prefix\n )}\n </div>\n )}\n {(suffix \|\|\n (errorAndErrorIsNotBoolean &&\n errorVariant === 'icon') \|\|\n (this.icon && this.iconPosition === 'end')) && (\n <div\n class={`suffix size-${this.size}`}\n onClick={() => this._focusInput()}\n >\n {errorAndErrorIsNotBoolean &&\n errorVariant === 'icon' ? (\n <p-input-error\n error={this.error}\n forceShowTooltip={\n this._forceShowTooltip\n }\n />\n ) : this.icon && this.iconPosition === 'end' ? (\n <p-icon\n class=\"flex\"\n variant={this.icon}\n rotate={this.iconRotate}\n flip={this.iconFlip}\n />\n ) : (\n suffix\n )}\n </div>\n )}\n\n <slot name=\"input\" />\n </div>\n </p-tooltip>\n </Host>\n );\n }\n\n @Listen('focusin')\n handleFocusIn() {\n this._forceShowTooltip = true;\n }\n\n @Listen('focusout')\n handleFocusOut() {\n this._forceShowTooltip = false;\n }\n /* \n With this, we shall hack the system in ways no one would ever have thought.\n \n <div class=\"pl-0 pr-0 border-l-0 border-r-0 rounded-tl-none rounded-bl-none rounded-tr-none rounded-br-none\"></div>\n */\n private _setInputClasses() {\n const input = this._el.querySelector(':scope > [slot=\"input\"]');\n\n if (!input) {\n return;\n }\n\n const tagName = input.tagName.toLowerCase();\n if (this._whitelistedTags.indexOf(tagName) === -1) {\n return;\n }\n\n if (!input.classList.contains('p-input')) {\n input.classList.add('p-input');\n }\n\n const { prefix, suffix, errorAndErrorIsNotBoolean, errorVariant } =\n this._getSlotInfo();\n\n if (\n suffix \|\|\n (errorAndErrorIsNotBoolean && errorVariant === 'icon') \|\|\n (this.icon && this.iconPosition === 'end')\n ) {\n input.classList.add(\n 'border-r-0',\n 'rounded-tr-none',\n 'rounded-br-none',\n 'pr-0'\n );\n } else {\n input.classList.remove(\n 'border-r-0',\n 'rounded-tr-none',\n 'rounded-br-none',\n 'pr-0'\n );\n }\n\n if (prefix \|\| (this.icon && this.iconPosition === 'start')) {\n input.classList.add(\n 'border-l-0',\n 'rounded-tl-none',\n 'rounded-bl-none',\n 'pl-0'\n );\n } else {\n input.classList.remove(\n 'border-l-0',\n 'rounded-tl-none',\n 'rounded-bl-none',\n 'pl-0'\n );\n }\n\n if (this.size === 'small' && !input.classList.contains('size-small')) {\n input.classList.add('size-small');\n }\n\n if (this.size !== 'small' && input.classList.contains('size-small')) {\n input.classList.remove('size-small');\n }\n }\n\n private _getSlotInfo() {\n const hasHelperSlot = !!this._el.querySelector(\n ':scope > [slot=\"helper\"]'\n );\n const hasLabelSlot = !!this._el.querySelector(\n ':scope > [slot=\"label\"]'\n );\n const hasPrefixSlot = !!this._el.querySelector(\n ':scope > [slot=\"prefix\"]'\n );\n const hasSuffixSlot = !!this._el.querySelector(\n ':scope > [slot=\"suffix\"]'\n );\n const hasHeaderSlot = !!this._el.querySelector(\n ':scope > [slot=\"header\"]'\n );\n\n const helper = hasHelperSlot ? <slot name=\"helper\" /> : this.helper;\n const label = hasLabelSlot ? <slot name=\"label\" /> : this.label;\n const prefix = hasPrefixSlot ? <slot name=\"prefix\" /> : this.prefix;\n const suffix = hasSuffixSlot ? <slot name=\"suffix\" /> : this.suffix;\n\n const errorAndErrorIsNotBoolean =\n this.error &&\n typeof this.error === 'string' &&\n this.error !== 'true';\n\n return {\n hasHelperSlot,\n hasLabelSlot,\n hasPrefixSlot,\n hasSuffixSlot,\n hasHeaderSlot,\n helper,\n label,\n prefix,\n suffix,\n errorAndErrorIsNotBoolean,\n errorVariant: this._el.offsetWidth <= 72 ? 'element' : 'icon',\n };\n }\n\n private _focusInput() {\n const input = this._el.querySelector(':scope > [slot=\"input\"]');\n (input as HTMLElement)[this.focusMethod]();\n }\n}\n"],"version":3}

package/dist/cjs/p-label_3.cjs.entry.js CHANGED Viewed

@@ -37,7 +37,7 @@ const SegmentContainer = class {
 };
 SegmentContainer.style = segmentContainerComponentCss;
-const segmentItemComponentCss = ".flex{display:flex!important}.h-6{height:1.5rem!important}.h-auto{height:auto!important}.w-6{width:1.5rem!important}.max-w-\\[9rem\\]{max-width:9rem!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.gap-2{gap:.5rem!important}.whitespace-normal{white-space:normal!important}.p-4{padding:1rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xxs{font-size:.6875rem!important}.font-semibold{font-weight:600!important}.text-indigo{color:rgb(82 138 250/var(--tw-text-opacity))!important}.text-indigo,.text-storm{--tw-text-opacity:1!important}.text-storm{color:rgb(81 83 107/var(--tw-text-opacity))!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!important}*{box-sizing:border-box}:host{--tw-text-opacity:1;align-items:center;border-radius:.375rem;color:rgb(81 83 107/var(--tw-text-opacity));cursor:pointer;display:flex;font-size:.875rem;font-weight:600;gap:.5rem;height:1.5rem;line-height:1.25rem;padding-left:.5rem;padding-right:.5rem;white-space:nowrap}:host([size=big]){flex-direction:column;height:auto;max-width:9rem;padding:1rem;text-align:center;white-space:normal}:host([size=big]) .description{--tw-text-opacity:1;color:rgb(128 130 158/var(--tw-text-opacity));font-size:.6875rem;margin-top:-.5rem}:host(.variant-icon){justify-content:center;padding-left:0;padding-right:0;width:1.5rem}:host(:hover){--tw-bg-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-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))}:host(.active) .description{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity))}.static{position:static!important}";
+const segmentItemComponentCss = ".-mt-2{margin-top:-.5rem!important}.flex{display:flex!important}.h-6{height:1.5rem!important}.h-auto{height:auto!important}.w-6{width:1.5rem!important}.max-w-\\[9rem\\]{max-width:9rem!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.gap-2{gap:.5rem!important}.whitespace-normal{white-space:normal!important}.whitespace-nowrap{white-space:nowrap!important}.rounded-large{border-radius:.375rem!important}.bg-indigo-light{--tw-bg-opacity:1!important;background-color:rgb(241 246 255/var(--tw-bg-opacity))!important}.p-4{padding:1rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xxs{font-size:.6875rem!important}.font-normal{font-weight:400!important}.font-semibold{font-weight:600!important}*{box-sizing:border-box}:host{--tw-text-opacity:1;align-items:center;border-radius:.375rem;color:rgb(81 83 107/var(--tw-text-opacity));cursor:pointer;display:flex;font-size:.875rem;font-weight:600;gap:.5rem;height:1.5rem;line-height:1.25rem;padding-left:.5rem;padding-right:.5rem;white-space:nowrap}:host([size=big]){flex-direction:column;height:auto;max-width:9rem;padding:1rem;text-align:center;white-space:normal}:host([size=big]) .description{--tw-text-opacity:1;color:rgb(128 130 158/var(--tw-text-opacity));font-size:.6875rem;font-weight:400;margin-top:-.5rem}:host(.variant-icon){justify-content:center;padding-left:0;padding-right:0;width:1.5rem}:host(:hover){--tw-bg-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-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))}:host(.active) .description{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity))}.static{position:static!important}";
 const SegmentItem = class {
   constructor(hostRef) {

package/dist/cjs/p-label_3.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"p-label.p-segment-container.p-segment-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,ugKAAugK;;MCSphK,KAAK;;;mBAUC,SAAS;oBAUJ,QAAQ;wBAKY,OAAO;;;;gBAoBM,SAAS;6BAKR,KAAK;;EAE3D,MAAM;IACF,QACIA,QAACC,UAAI,IAAC,KAAK,EAAC,SAAS,IAChB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,KAAK,OAAO,KACvCD,oBACI,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,MAAM,EAAE,IAAI,CAAC,UAAU,GACzB,CACL,EACA,CAAC,IAAI,CAAC,QAAQ,KAAK,QAAQ;MACxB,IAAI,CAAC,QAAQ,KAAK,aAAa,MAC/BA,iBAAK,KAAK,EAAC,QAAQ,GAAO,CAC7B,EACDA,iBAAK,KAAK,EAAC,SAAS,IAChBA,qBAAQ,CACN,EACL,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,KAAK,KAAK,KACrCA,oBACI,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,MAAM,EAAE,IAAI,CAAC,UAAU,GACzB,CACL,CACE,EACT;GACL;;;;ACvFL,MAAM,4BAA4B,GAAG,ulBAAulB;;MCM/mB,gBAAgB;;;;EACzB,MAAM;IACF,QACIA,QAACC,UAAI,IAAC,KAAK,EAAC,qBAAqB,IAC7BD,qBAAQ,CACL,EACT;GACL;;;;ACbL,MAAM,uBAAuB,GAAG,q3DAAq3D;;MCSx4D,WAAW;;;IAoCZ,wBAAmB,GAAG,KAAK,CAAC;kBAhCV,KAAK;oBAKH,KAAK;gBAKgB,OAAO;;;;;EAwBxD,iBAAiB;IACb,IAAI,CAAC,mBAAmB,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAC/C,+BAA+B,CAClC,CAAC;GACL;EAED,MAAM;IACF,QACIA,QAACC,UAAI,IACD,KAAK,EAAE,0BACH,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAC7B,IAAI,IAAI,CAAC,MAAM,IAAI,QAAQ,EAAE,IAE5B,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE,EAC7BD,qBAAQ,EACP,IAAI,CAAC,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,mBAAmB,IAAIA,kBAAM,KAAK,EAAC,aAAa,IAACA,kBAAM,IAAI,EAAC,aAAa,GAAG,CAAO,CAC7G,EACT;GACL;EAEO,QAAQ;IACZ,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACZ,OAAO;KACV;IAED,QACIA,oBACI,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,MAAM,EAAE,IAAI,CAAC,UAAU,GACzB,EACJ;GACL;;;;;;;;;","names":["h","Host"],"sources":["src/components/atoms/label/label.component.scss?tag=p-label&encapsulation=shadow","src/components/atoms/label/label.component.tsx","src/components/atoms/segment-container/segment-container.component.scss?tag=p-segment-container","src/components/atoms/segment-container/segment-container.component.tsx","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 @apply flex items-center justify-center gap-2 rounded px-2 desktop-xs:px-3;\n @apply h-[1.625rem];\n @apply text-sm font-semibold;\n\n .content {\n @apply hidden items-center desktop-xs:flex;\n }\n\n .circle {\n @apply hidden h-[0.625rem] w-[0.625rem] rounded-round;\n }\n\n p-icon {\n @apply hidden text-xs #{!important};\n }\n}\n\n:host([variant='neutral']) {\n @apply bg-mystic;\n @apply text-storm-vague;\n\n .circle {\n @apply bg-storm-vague;\n }\n}\n\n:host([variant='special']) {\n @apply bg-indigo-light;\n @apply text-indigo-dark;\n\n .circle {\n @apply bg-indigo;\n }\n}\n\n:host([variant='info']) {\n @apply bg-sky-light;\n @apply text-sky;\n\n .circle {\n @apply bg-sky;\n }\n}\n\n:host([variant='positive']) {\n @apply bg-positive-light;\n @apply text-positive;\n\n .circle {\n @apply bg-positive;\n }\n}\n\n:host([variant='unbiased']) {\n @apply bg-unbiased-light;\n @apply text-unbiased;\n\n .circle {\n @apply bg-unbiased;\n }\n}\n\n:host([variant='negative']) {\n @apply bg-negative-light;\n @apply text-negative;\n\n .circle {\n @apply bg-negative;\n }\n}\n\n:host([size='small']) {\n @apply h-4 min-w-[1rem] px-1 py-[1px];\n @apply justify-center text-xs;\n @apply leading-3;\n}\n\n:host([behavior='circle']) {\n .circle {\n @apply block desktop-xs:block;\n }\n}\n\n:host([behavior='icon']) {\n p-icon {\n @apply flex desktop-xs:flex #{!important};\n }\n}\n\n:host([behavior='text']) {\n p-icon {\n @apply hidden desktop-xs:hidden #{!important};\n }\n\n .circle {\n @apply hidden desktop-xs:hidden;\n }\n\n .content {\n @apply flex desktop-xs:flex;\n }\n}\n\n:host([behavior='combination']) {\n @apply px-0 desktop-xs:px-3;\n @apply w-[1.625rem] desktop-xs:w-auto;\n\n .circle {\n @apply hidden desktop-xs:block;\n }\n\n p-icon {\n @apply flex desktop-xs:hidden #{!important};\n }\n}\n\n:host([behavior='icon-only']) {\n @apply px-0 desktop-xs:px-0;\n @apply w-[1.625rem];\n\n .content {\n @apply hidden desktop-xs:hidden;\n }\n\n p-icon {\n @apply flex desktop-xs:flex #{!important};\n }\n}\n\n:host([behavior='icon-only'][size='small']) {\n @apply h-4 w-4;\n}\n\n:host([keep-mobile-content]),\n:host([keep-mobile-content='true']) {\n .content {\n @apply flex desktop-xs:flex;\n }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { RotateOptions } from '../../../types';\nimport { IconFlipOptions, IconVariant } from '../icon/icon.component';\n\n@Component({\n tag: 'p-label',\n styleUrl: 'label.component.scss',\n shadow: true,\n})\nexport class Label {\n /*\n Variant of the label\n /\n @Prop({ reflect: true }) variant:\n \| 'neutral'\n \| 'positive'\n \| 'unbiased'\n \| 'negative'\n \| 'special'\n \| 'info' = 'neutral';\n\n /\n Define the behavior of the label\n /\n @Prop({ reflect: true }) behavior:\n \| 'icon'\n \| 'circle'\n \| 'combination'\n \| 'text'\n \| 'icon-only' = 'circle';\n\n /\n Icon position\n /\n @Prop() iconPosition: 'start' \| 'end' = 'start';\n\n /\n Icon to show on the label\n /\n @Prop({ reflect: true }) icon: IconVariant;\n\n /\n Icon flip\n /\n @Prop() iconFlip: IconFlipOptions;\n\n /\n Icon rotate\n /\n @Prop() iconRotate: RotateOptions;\n\n /\n The size of the label\n /\n @Prop({ reflect: true }) size: 'small' \| 'default' = 'default';\n\n /\n Wether to keep the content on mobile\n /\n @Prop({ reflect: true }) keepMobileContent: boolean = false;\n\n render() {\n return (\n <Host class=\"p-label\">\n {this.icon && this.iconPosition === 'start' && (\n <p-icon\n variant={this.icon}\n flip={this.iconFlip}\n rotate={this.iconRotate}\n />\n )}\n {(this.behavior === 'circle' \|\|\n this.behavior === 'combination') && (\n <div class=\"circle\"></div>\n )}\n <div class=\"content\">\n <slot />\n </div>\n {this.icon && this.iconPosition === 'end' && (\n <p-icon\n variant={this.icon}\n flip={this.iconFlip}\n rotate={this.iconRotate}\n />\n )}\n </Host>\n );\n }\n}\n","p-segment-container {\n @apply flex items-center gap-1;\n @apply bg-white rounded-large;\n @apply p-1;\n @apply border border-solid border-mystic-dark;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n tag: 'p-segment-container',\n styleUrl: 'segment-container.component.scss',\n})\nexport class SegmentContainer {\n render() {\n return (\n <Host class=\"p-segment-container\">\n <slot />\n </Host>\n );\n }\n}\n",":host {\n @apply h-6 flex items-center px-2 gap-2 rounded-large;\n @apply text-storm text-sm font-semibold whitespace-nowrap;\n @apply cursor-pointer;\n}\n\n:host([size='big']) {\n @apply h-auto p-4 flex-col max-w-[9rem] whitespace-normal text-center;\n\n .description {\n @apply text-storm-medium text-xxs -mt-2;\n }\n}\n\n:host(.variant-icon) {\n @apply w-6 justify-center px-0;\n}\n\n:host(:hover) {\n @apply bg-indigo-light;\n}\n\n:host(.active) {\n @apply text-indigo bg-indigo-light;\n\n \n .description {\n @apply text-indigo;\n }\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 tag: 'p-segment-item',\n styleUrl: 'segment-item.component.scss',\n shadow: true,\n})\nexport class SegmentItem {\n /\n Wether the segment item is active\n /\n @Prop() active: boolean = false;\n\n /\n Wether the segment item is icon only\n /\n @Prop() iconOnly: boolean = false;\n\n /\n Size of the segment item\n /\n @Prop({ reflect: true }) size: 'small' \| 'big' = 'small';\n\n /\n Icon to show on the segment item\n /\n @Prop() icon: IconVariant;\n\n /\n Icon flip\n /\n @Prop() iconFlip: IconFlipOptions;\n\n /\n Icon rotate\n /\n @Prop() iconRotate: RotateOptions;\n\n /\n The host element\n */\n @Element() private _el: HTMLElement;\n\n private _hasDescriptionSlot = false;\n\n componentWillLoad() {\n this._hasDescriptionSlot = !!this._el.querySelector(\n ':scope > [slot=\"description\"]'\n );\n }\n\n render() {\n return (\n <Host\n class={`p-segment-item variant-${\n this.iconOnly ? 'icon' : 'default'\n } ${this.active && 'active'}`}\n >\n {this.icon && this._getIcon()}\n <slot />\n {this.size === 'big' && this._hasDescriptionSlot && <span class=\"description\"><slot name=\"description\" /></span>}\n </Host>\n );\n }\n\n private _getIcon() {\n if (!this.icon) {\n return;\n }\n\n return (\n <p-icon\n class=\"flex\"\n variant={this.icon}\n flip={this.iconFlip}\n rotate={this.iconRotate}\n />\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-label.p-segment-container.p-segment-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,ugKAAugK;;MCSphK,KAAK;;;mBAUC,SAAS;oBAUJ,QAAQ;wBAKY,OAAO;;;;gBAoBM,SAAS;6BAKR,KAAK;;EAE3D,MAAM;IACF,QACIA,QAACC,UAAI,IAAC,KAAK,EAAC,SAAS,IAChB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,KAAK,OAAO,KACvCD,oBACI,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,MAAM,EAAE,IAAI,CAAC,UAAU,GACzB,CACL,EACA,CAAC,IAAI,CAAC,QAAQ,KAAK,QAAQ;MACxB,IAAI,CAAC,QAAQ,KAAK,aAAa,MAC/BA,iBAAK,KAAK,EAAC,QAAQ,GAAO,CAC7B,EACDA,iBAAK,KAAK,EAAC,SAAS,IAChBA,qBAAQ,CACN,EACL,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,KAAK,KAAK,KACrCA,oBACI,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,MAAM,EAAE,IAAI,CAAC,UAAU,GACzB,CACL,CACE,EACT;GACL;;;;ACvFL,MAAM,4BAA4B,GAAG,ulBAAulB;;MCM/mB,gBAAgB;;;;EACzB,MAAM;IACF,QACIA,QAACC,UAAI,IAAC,KAAK,EAAC,qBAAqB,IAC7BD,qBAAQ,CACL,EACT;GACL;;;;ACbL,MAAM,uBAAuB,GAAG,qzDAAqzD;;MCSx0D,WAAW;;;IAoCZ,wBAAmB,GAAG,KAAK,CAAC;kBAhCV,KAAK;oBAKH,KAAK;gBAKgB,OAAO;;;;;EAwBxD,iBAAiB;IACb,IAAI,CAAC,mBAAmB,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAC/C,+BAA+B,CAClC,CAAC;GACL;EAED,MAAM;IACF,QACIA,QAACC,UAAI,IACD,KAAK,EAAE,0BACH,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAC7B,IAAI,IAAI,CAAC,MAAM,IAAI,QAAQ,EAAE,IAE5B,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE,EAC7BD,qBAAQ,EACP,IAAI,CAAC,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,mBAAmB,IAAIA,kBAAM,KAAK,EAAC,aAAa,IAACA,kBAAM,IAAI,EAAC,aAAa,GAAG,CAAO,CAC7G,EACT;GACL;EAEO,QAAQ;IACZ,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACZ,OAAO;KACV;IAED,QACIA,oBACI,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,MAAM,EAAE,IAAI,CAAC,UAAU,GACzB,EACJ;GACL;;;;;;;;;","names":["h","Host"],"sources":["src/components/atoms/label/label.component.scss?tag=p-label&encapsulation=shadow","src/components/atoms/label/label.component.tsx","src/components/atoms/segment-container/segment-container.component.scss?tag=p-segment-container","src/components/atoms/segment-container/segment-container.component.tsx","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 @apply flex items-center justify-center gap-2 rounded px-2 desktop-xs:px-3;\n @apply h-[1.625rem];\n @apply text-sm font-semibold;\n\n .content {\n @apply hidden items-center desktop-xs:flex;\n }\n\n .circle {\n @apply hidden h-[0.625rem] w-[0.625rem] rounded-round;\n }\n\n p-icon {\n @apply hidden text-xs #{!important};\n }\n}\n\n:host([variant='neutral']) {\n @apply bg-mystic;\n @apply text-storm-vague;\n\n .circle {\n @apply bg-storm-vague;\n }\n}\n\n:host([variant='special']) {\n @apply bg-indigo-light;\n @apply text-indigo-dark;\n\n .circle {\n @apply bg-indigo;\n }\n}\n\n:host([variant='info']) {\n @apply bg-sky-light;\n @apply text-sky;\n\n .circle {\n @apply bg-sky;\n }\n}\n\n:host([variant='positive']) {\n @apply bg-positive-light;\n @apply text-positive;\n\n .circle {\n @apply bg-positive;\n }\n}\n\n:host([variant='unbiased']) {\n @apply bg-unbiased-light;\n @apply text-unbiased;\n\n .circle {\n @apply bg-unbiased;\n }\n}\n\n:host([variant='negative']) {\n @apply bg-negative-light;\n @apply text-negative;\n\n .circle {\n @apply bg-negative;\n }\n}\n\n:host([size='small']) {\n @apply h-4 min-w-[1rem] px-1 py-[1px];\n @apply justify-center text-xs;\n @apply leading-3;\n}\n\n:host([behavior='circle']) {\n .circle {\n @apply block desktop-xs:block;\n }\n}\n\n:host([behavior='icon']) {\n p-icon {\n @apply flex desktop-xs:flex #{!important};\n }\n}\n\n:host([behavior='text']) {\n p-icon {\n @apply hidden desktop-xs:hidden #{!important};\n }\n\n .circle {\n @apply hidden desktop-xs:hidden;\n }\n\n .content {\n @apply flex desktop-xs:flex;\n }\n}\n\n:host([behavior='combination']) {\n @apply px-0 desktop-xs:px-3;\n @apply w-[1.625rem] desktop-xs:w-auto;\n\n .circle {\n @apply hidden desktop-xs:block;\n }\n\n p-icon {\n @apply flex desktop-xs:hidden #{!important};\n }\n}\n\n:host([behavior='icon-only']) {\n @apply px-0 desktop-xs:px-0;\n @apply w-[1.625rem];\n\n .content {\n @apply hidden desktop-xs:hidden;\n }\n\n p-icon {\n @apply flex desktop-xs:flex #{!important};\n }\n}\n\n:host([behavior='icon-only'][size='small']) {\n @apply h-4 w-4;\n}\n\n:host([keep-mobile-content]),\n:host([keep-mobile-content='true']) {\n .content {\n @apply flex desktop-xs:flex;\n }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { RotateOptions } from '../../../types';\nimport { IconFlipOptions, IconVariant } from '../icon/icon.component';\n\n@Component({\n tag: 'p-label',\n styleUrl: 'label.component.scss',\n shadow: true,\n})\nexport class Label {\n /*\n Variant of the label\n /\n @Prop({ reflect: true }) variant:\n \| 'neutral'\n \| 'positive'\n \| 'unbiased'\n \| 'negative'\n \| 'special'\n \| 'info' = 'neutral';\n\n /\n Define the behavior of the label\n /\n @Prop({ reflect: true }) behavior:\n \| 'icon'\n \| 'circle'\n \| 'combination'\n \| 'text'\n \| 'icon-only' = 'circle';\n\n /\n Icon position\n /\n @Prop() iconPosition: 'start' \| 'end' = 'start';\n\n /\n Icon to show on the label\n /\n @Prop({ reflect: true }) icon: IconVariant;\n\n /\n Icon flip\n /\n @Prop() iconFlip: IconFlipOptions;\n\n /\n Icon rotate\n /\n @Prop() iconRotate: RotateOptions;\n\n /\n The size of the label\n /\n @Prop({ reflect: true }) size: 'small' \| 'default' = 'default';\n\n /\n Wether to keep the content on mobile\n /\n @Prop({ reflect: true }) keepMobileContent: boolean = false;\n\n render() {\n return (\n <Host class=\"p-label\">\n {this.icon && this.iconPosition === 'start' && (\n <p-icon\n variant={this.icon}\n flip={this.iconFlip}\n rotate={this.iconRotate}\n />\n )}\n {(this.behavior === 'circle' \|\|\n this.behavior === 'combination') && (\n <div class=\"circle\"></div>\n )}\n <div class=\"content\">\n <slot />\n </div>\n {this.icon && this.iconPosition === 'end' && (\n <p-icon\n variant={this.icon}\n flip={this.iconFlip}\n rotate={this.iconRotate}\n />\n )}\n </Host>\n );\n }\n}\n","p-segment-container {\n @apply flex items-center gap-1;\n @apply bg-white rounded-large;\n @apply p-1;\n @apply border border-solid border-mystic-dark;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n tag: 'p-segment-container',\n styleUrl: 'segment-container.component.scss',\n})\nexport class SegmentContainer {\n render() {\n return (\n <Host class=\"p-segment-container\">\n <slot />\n </Host>\n );\n }\n}\n",":host {\n @apply flex h-6 items-center gap-2 rounded-large px-2;\n @apply whitespace-nowrap text-sm font-semibold text-storm;\n @apply cursor-pointer;\n}\n\n:host([size='big']) {\n @apply h-auto max-w-[9rem] flex-col whitespace-normal p-4 text-center;\n\n .description {\n @apply -mt-2 text-xxs font-normal text-storm-medium;\n }\n}\n\n:host(.variant-icon) {\n @apply w-6 justify-center px-0;\n}\n\n:host(:hover) {\n @apply bg-indigo-light;\n}\n\n:host(.active) {\n @apply bg-indigo-light text-indigo;\n\n .description {\n @apply text-indigo;\n }\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 tag: 'p-segment-item',\n styleUrl: 'segment-item.component.scss',\n shadow: true,\n})\nexport class SegmentItem {\n /\n Wether the segment item is active\n /\n @Prop() active: boolean = false;\n\n /\n Wether the segment item is icon only\n /\n @Prop() iconOnly: boolean = false;\n\n /\n Size of the segment item\n /\n @Prop({ reflect: true }) size: 'small' \| 'big' = 'small';\n\n /\n Icon to show on the segment item\n /\n @Prop() icon: IconVariant;\n\n /\n Icon flip\n /\n @Prop() iconFlip: IconFlipOptions;\n\n /\n Icon rotate\n /\n @Prop() iconRotate: RotateOptions;\n\n /\n The host element\n */\n @Element() private _el: HTMLElement;\n\n private _hasDescriptionSlot = false;\n\n componentWillLoad() {\n this._hasDescriptionSlot = !!this._el.querySelector(\n ':scope > [slot=\"description\"]'\n );\n }\n\n render() {\n return (\n <Host\n class={`p-segment-item variant-${\n this.iconOnly ? 'icon' : 'default'\n } ${this.active && 'active'}`}\n >\n {this.icon && this._getIcon()}\n <slot />\n {this.size === 'big' && this._hasDescriptionSlot && <span class=\"description\"><slot name=\"description\" /></span>}\n </Host>\n );\n }\n\n private _getIcon() {\n if (!this.icon) {\n return;\n }\n\n return (\n <p-icon\n class=\"flex\"\n variant={this.icon}\n flip={this.iconFlip}\n rotate={this.iconRotate}\n />\n );\n }\n}\n"],"version":3}

package/dist/collection/components/atoms/divider/divider.component.css CHANGED Viewed

	@@ -1 +1 @@
1	- .my-2{margin-bottom:.5rem!important;margin-top:.5rem!important}.block{display:block!important}.flex{display:flex!important}.h-px{height:1px!important}.w-full{width:100%!important}.bg-mystic-medium{--tw-bg-opacity:1!important;background-color:rgb(227 236 243/var(--tw-bg-opacity))!important}*{box-sizing:border-box}:host{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{--tw-bg-opacity:1;background-color:rgb(227 236 243/var(--tw-bg-opacity));content:"";flex:1 1 0%;height:1px}.static{position:static!important}.items-center{align-items:center!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.text-xs{font-size:.~~75rem~~!important~~;line-height:1rem!important~~}.font-semibold{font-weight:600!important}.uppercase{text-transform:uppercase!important}
1	+ .my-2{margin-bottom:.5rem!important;margin-top:.5rem!important}.block{display:block!important}.flex{display:flex!important}.h-px{height:1px!important}.w-full{width:100%!important}.bg-mystic-medium{--tw-bg-opacity:1!important;background-color:rgb(227 236 243/var(--tw-bg-opacity))!important}*{box-sizing:border-box}:host{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{--tw-bg-opacity:1;background-color:rgb(227 236 243/var(--tw-bg-opacity));content:"";flex:1 1 0%;height:1px}.static{position:static!important}.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}

package/dist/collection/components/atoms/divider/divider.component.js CHANGED Viewed

@@ -3,7 +3,7 @@ export class Divider {
   render() {
     var _a;
     const hasSlotted = !!((_a = this._el.innerHTML) === null || _a === void 0 ? void 0 : _a.length);
-    return (h(Host, { class: "p-divider" }, h("div", { class: "content" }, h("div", { class: `flex items-center ${hasSlotted && 'px-2'} text-xs font-semibold uppercase` }, h("slot", null)))));
+    return (h(Host, { class: "p-divider" }, h("div", { class: "content" }, h("div", { class: `flex items-center ${hasSlotted && 'px-2'} text-xxs font-semibold uppercase` }, h("slot", null)))));
   }
   static get is() { return "p-divider"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/atoms/divider/divider.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"divider.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/divider/divider.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAO5D,MAAM,OAAO,OAAO;EAMhB,MAAM;;IACF,MAAM,UAAU,GAAG,CAAC,CAAC,CAAA,MAAA,IAAI,CAAC,GAAG,CAAC,SAAS,0CAAE,MAAM,CAAA,CAAC;IAChD,OAAO,CACH,EAAC,IAAI,IAAC,KAAK,EAAC,WAAW;MACnB,WAAK,KAAK,EAAC,SAAS;QAChB,WACI,KAAK,EAAE,qBACH,UAAU,IAAI,MAClB,~~kCAAkC~~;~~UAElC~~,eAAQ,CACN,CACJ,CACH,CACV,CAAC;EACN,CAAC;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Host } from '@stencil/core';\n\n@Component({\n tag: 'p-divider',\n styleUrl: 'divider.component.scss',\n shadow: true,\n})\nexport class Divider {\n /*\n The host element\n */\n @Element() private _el: HTMLElement;\n\n render() {\n const hasSlotted = !!this._el.innerHTML?.length;\n return (\n <Host class=\"p-divider\">\n <div class=\"content\">\n <div\n class={`flex items-center ${\n hasSlotted && 'px-2'\n } text-xs font-semibold uppercase`}\n >\n <slot />\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"divider.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/divider/divider.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAO5D,MAAM,OAAO,OAAO;EAMhB,MAAM;;IACF,MAAM,UAAU,GAAG,CAAC,CAAC,CAAA,MAAA,IAAI,CAAC,GAAG,CAAC,SAAS,0CAAE,MAAM,CAAA,CAAC;IAChD,OAAO,CACH,EAAC,IAAI,IAAC,KAAK,EAAC,WAAW;MACnB,WAAK,KAAK,EAAC,SAAS;QAChB,WACI,KAAK,EAAE,qBACH,UAAU,IAAI,MAClB,mCAAmC;UAEnC,eAAQ,CACN,CACJ,CACH,CACV,CAAC;EACN,CAAC;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Host } from '@stencil/core';\n\n@Component({\n tag: 'p-divider',\n styleUrl: 'divider.component.scss',\n shadow: true,\n})\nexport class Divider {\n /*\n The host element\n */\n @Element() private _el: HTMLElement;\n\n render() {\n const hasSlotted = !!this._el.innerHTML?.length;\n return (\n <Host class=\"p-divider\">\n <div class=\"content\">\n <div\n class={`flex items-center ${\n hasSlotted && 'px-2'\n } text-xxs font-semibold uppercase`}\n >\n <slot />\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/atoms/segment-item/segment-item.component.css CHANGED Viewed

	@@ -1 +1 @@
1	- .flex{display:flex!important}.h-6{height:1.5rem!important}.h-auto{height:auto!important}.w-6{width:1.5rem!important}.max-w-\[9rem\]{max-width:9rem!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.gap-2{gap:.5rem!important}.whitespace-normal{white-space:normal!important}.p-4{~~padding~~:~~1rem~~!important}.px-2{~~padding~~-~~left~~:.~~5rem~~!important~~;padding-right:.5rem!important~~}.~~text~~-sm{~~font~~-~~size:.875rem!important;line~~-~~height~~:1~~.25rem~~!important~~}.text~~-~~xxs{font-size:.6875rem!important}.font-semibold{font-weight:600!important}.text-indigo{~~color:rgb(82 ~~138~~ ~~250~~/var(--tw-~~text~~-opacity))!important}.~~text~~-~~indigo,.~~text-~~storm~~{~~--tw~~-~~text~~-~~opacity~~:1!important}.text-~~storm~~{~~color:rgb(81 83 107/var(--tw~~-~~text-opacity))~~!important}.~~text~~-~~storm-medium~~{~~--tw~~-~~text-opacity~~:1!important~~;color:rgb(128 130 158/var(--tw~~-~~text~~-~~opacity))~~!important}*{box-sizing:border-box}:host{--tw-text-opacity:1;align-items:center;border-radius:.375rem;color:rgb(81 83 107/var(--tw-text-opacity));cursor:pointer;display:flex;font-size:.875rem;font-weight:600;gap:.5rem;height:1.5rem;line-height:1.25rem;padding-left:.5rem;padding-right:.5rem;white-space:nowrap}:host([size=big]){flex-direction:column;height:auto;max-width:9rem;padding:1rem;text-align:center;white-space:normal}:host([size=big]) .description{--tw-text-opacity:1;color:rgb(128 130 158/var(--tw-text-opacity));font-size:.6875rem;margin-top:-.5rem}:host(.variant-icon){justify-content:center;padding-left:0;padding-right:0;width:1.5rem}:host(:hover){--tw-bg-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-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))}:host(.active) .description{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity))}.static{position:static!important}
1	+ .-mt-2{margin-top:-.5rem!important}.flex{display:flex!important}.h-6{height:1.5rem!important}.h-auto{height:auto!important}.w-6{width:1.5rem!important}.max-w-\[9rem\]{max-width:9rem!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.gap-2{gap:.5rem!important}.whitespace-normal{white-space:normal!important}.whitespace-nowrap{white-space:nowrap!important}.rounded-large{border-radius:.375rem!important}.bg-indigo-light{--tw-bg-opacity:1!important;background-color:rgb(241 246 255/var(--tw-bg-opacity))!important}.p-4{padding:1rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xxs{font-size:.6875rem!important}.font-normal{font-weight:400!important}.font-semibold{font-weight:600!important}*{box-sizing:border-box}:host{--tw-text-opacity:1;align-items:center;border-radius:.375rem;color:rgb(81 83 107/var(--tw-text-opacity));cursor:pointer;display:flex;font-size:.875rem;font-weight:600;gap:.5rem;height:1.5rem;line-height:1.25rem;padding-left:.5rem;padding-right:.5rem;white-space:nowrap}:host([size=big]){flex-direction:column;height:auto;max-width:9rem;padding:1rem;text-align:center;white-space:normal}:host([size=big]) .description{--tw-text-opacity:1;color:rgb(128 130 158/var(--tw-text-opacity));font-size:.6875rem;font-weight:400;margin-top:-.5rem}:host(.variant-icon){justify-content:center;padding-left:0;padding-right:0;width:1.5rem}:host(:hover){--tw-bg-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-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))}:host(.active) .description{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity))}.static{position:static!important}

package/dist/collection/components/molecules/input-group/input-group.component.js CHANGED Viewed

@@ -49,7 +49,8 @@ export class InputGroup {
     if (!input) {
       return;
     }
-    if (this._whitelistedTags.indexOf(input.tagName) === -1) {
+    const tagName = input.tagName.toLowerCase();
+    if (this._whitelistedTags.indexOf(tagName) === -1) {
       return;
     }
     if (!input.classList.contains('p-input')) {

package/dist/collection/components/molecules/input-group/input-group.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input-group.component.js","sourceRoot":"","sources":["../../../../src/components/molecules/input-group/input-group.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n h,\n Host,\n Listen,\n Prop,\n State,\n} from '@stencil/core';\nimport { RotateOptions } from '../../../types/tailwind';\nimport { IconFlipOptions, IconVariant } from '../../atoms/icon/icon.component';\n\n@Component({\n tag: 'p-input-group',\n styleUrl: './input-group.component.scss',\n shadow: true,\n})\nexport class InputGroup {\n /*\n The size of the input group\n /\n @Prop() size: 'small' \| 'medium' = 'medium';\n\n /\n The prefix of the input group\n /\n @Prop() prefix: string;\n\n /\n The suffix of the input group\n /\n @Prop() suffix: string;\n\n /\n Icon of the input group\n /\n @Prop() icon: IconVariant;\n\n /\n Icon flip\n /\n @Prop() iconFlip: IconFlipOptions;\n\n /\n Icon rotate\n /\n @Prop() iconRotate: RotateOptions;\n\n /\n Icon position\n /\n @Prop() iconPosition: 'start' \| 'end' = 'start';\n\n /\n The label of the input group\n /\n @Prop() label: string;\n\n /\n The helper of the input group\n /\n @Prop() helper: string;\n\n /\n Wether the field is required\n /\n @Prop({ reflect: true }) required: boolean;\n\n /\n The helper of the input group\n /\n @Prop({ reflect: true }) error: string;\n\n /\n Wether the input group is disabled\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n Wether the input group is focused\n /\n @Prop({ reflect: true }) focused: boolean = false;\n\n /\n The method to use when focusing the input\n /\n @Prop() focusMethod: 'focus' \| 'click' = 'focus';\n\n /\n The host element\n /\n @Element() private _el: HTMLElement;\n\n @State() private _forceShowTooltip = false;\n\n private _whitelistedTags = ['input', 'textarea'];\n\n componentWillRender() {\n this._setInputClasses();\n }\n\n render() {\n const {\n hasHeaderSlot,\n helper,\n label,\n prefix,\n suffix,\n errorAndErrorIsNotBoolean,\n errorVariant,\n } = this._getSlotInfo();\n\n return (\n <Host\n class={`p-input-group ${this.error?.length && 'error'} ${\n this.disabled && 'disabled'\n } ${this.focused && 'focused'} size-${this.size}`}\n >\n <div class=\"flex items-end justify-between\">\n {label && (\n <div\n class=\"input-label\"\n onClick={() => this._focusInput()}\n >\n {label}\n {this.required && (\n <span class=\"ml-1 text-negative\"></span>\n )}\n </div>\n )}\n\n {(helper \|\| hasHeaderSlot) && (\n <div class=\"input-header\">\n {hasHeaderSlot && <slot name=\"header\" />}\n {helper && (\n <p-helper\n class={`flex ${\n hasHeaderSlot ? 'ml-2' : ''\n }`}\n placement=\"top-end\"\n >\n {helper}\n </p-helper>\n )}\n </div>\n )}\n </div>\n <p-tooltip\n class=\"w-full\"\n variant=\"error-element\"\n content={this.error}\n show={\n errorAndErrorIsNotBoolean &&\n errorVariant === 'element' &&\n this._forceShowTooltip\n }\n enableUserInput={false}\n >\n <div class=\"content\" slot=\"trigger\">\n {(prefix \|\|\n (this.icon && this.iconPosition === 'start')) && (\n <div\n class={`prefix size-${this.size}`}\n onClick={() => this._focusInput()}\n >\n {this.icon && this.iconPosition === 'start' ? (\n <p-icon\n class=\"flex\"\n variant={this.icon}\n rotate={this.iconRotate}\n flip={this.iconFlip}\n />\n ) : (\n prefix\n )}\n </div>\n )}\n {(suffix \|\|\n (errorAndErrorIsNotBoolean &&\n errorVariant === 'icon') \|\|\n (this.icon && this.iconPosition === 'end')) && (\n <div\n class={`suffix size-${this.size}`}\n onClick={() => this._focusInput()}\n >\n {errorAndErrorIsNotBoolean &&\n errorVariant === 'icon' ? (\n <p-input-error\n error={this.error}\n forceShowTooltip={\n this._forceShowTooltip\n }\n />\n ) : this.icon && this.iconPosition === 'end' ? (\n <p-icon\n class=\"flex\"\n variant={this.icon}\n rotate={this.iconRotate}\n flip={this.iconFlip}\n />\n ) : (\n suffix\n )}\n </div>\n )}\n\n <slot name=\"input\" />\n </div>\n </p-tooltip>\n </Host>\n );\n }\n\n @Listen('focusin')\n handleFocusIn() {\n this._forceShowTooltip = true;\n }\n\n @Listen('focusout')\n handleFocusOut() {\n this._forceShowTooltip = false;\n }\n /* \n With this, we shall hack the system in ways no one would ever have thought.\n \n <div class=\"pl-0 pr-0 border-l-0 border-r-0 rounded-tl-none rounded-bl-none rounded-tr-none rounded-br-none\"></div>\n */\n private _setInputClasses() {\n const input = this._el.querySelector(':scope > [slot=\"input\"]');\n\n if (!input) {\n return;\n }\n\n if (this._whitelistedTags.indexOf(input.tagName) === -1) {\n return;\n }\n\n if (!input.classList.contains('p-input')) {\n input.classList.add('p-input');\n }\n\n const { prefix, suffix, errorAndErrorIsNotBoolean, errorVariant } =\n this._getSlotInfo();\n\n if (\n suffix \|\|\n (errorAndErrorIsNotBoolean && errorVariant === 'icon') \|\|\n (this.icon && this.iconPosition === 'end')\n ) {\n input.classList.add(\n 'border-r-0',\n 'rounded-tr-none',\n 'rounded-br-none',\n 'pr-0'\n );\n } else {\n input.classList.remove(\n 'border-r-0',\n 'rounded-tr-none',\n 'rounded-br-none',\n 'pr-0'\n );\n }\n\n if (prefix \|\| (this.icon && this.iconPosition === 'start')) {\n input.classList.add(\n 'border-l-0',\n 'rounded-tl-none',\n 'rounded-bl-none',\n 'pl-0'\n );\n } else {\n input.classList.remove(\n 'border-l-0',\n 'rounded-tl-none',\n 'rounded-bl-none',\n 'pl-0'\n );\n }\n\n if (this.size === 'small' && !input.classList.contains('size-small')) {\n input.classList.add('size-small');\n }\n\n if (this.size !== 'small' && input.classList.contains('size-small')) {\n input.classList.remove('size-small');\n }\n }\n\n private _getSlotInfo() {\n const hasHelperSlot = !!this._el.querySelector(\n ':scope > [slot=\"helper\"]'\n );\n const hasLabelSlot = !!this._el.querySelector(\n ':scope > [slot=\"label\"]'\n );\n const hasPrefixSlot = !!this._el.querySelector(\n ':scope > [slot=\"prefix\"]'\n );\n const hasSuffixSlot = !!this._el.querySelector(\n ':scope > [slot=\"suffix\"]'\n );\n const hasHeaderSlot = !!this._el.querySelector(\n ':scope > [slot=\"header\"]'\n );\n\n const helper = hasHelperSlot ? <slot name=\"helper\" /> : this.helper;\n const label = hasLabelSlot ? <slot name=\"label\" /> : this.label;\n const prefix = hasPrefixSlot ? <slot name=\"prefix\" /> : this.prefix;\n const suffix = hasSuffixSlot ? <slot name=\"suffix\" /> : this.suffix;\n\n const errorAndErrorIsNotBoolean =\n this.error &&\n typeof this.error === 'string' &&\n this.error !== 'true';\n\n return {\n hasHelperSlot,\n hasLabelSlot,\n hasPrefixSlot,\n hasSuffixSlot,\n hasHeaderSlot,\n helper,\n label,\n prefix,\n suffix,\n errorAndErrorIsNotBoolean,\n errorVariant: this._el.offsetWidth <= 72 ? 'element' : 'icon',\n };\n }\n\n private _focusInput() {\n const input = this._el.querySelector(':scope > [slot=\"input\"]');\n (input as HTMLElement)[this.focusMethod]();\n }\n}\n"]}
1	+ {"version":3,"file":"input-group.component.js","sourceRoot":"","sources":["../../../../src/components/molecules/input-group/input-group.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n h,\n Host,\n Listen,\n Prop,\n State,\n} from '@stencil/core';\nimport { RotateOptions } from '../../../types/tailwind';\nimport { IconFlipOptions, IconVariant } from '../../atoms/icon/icon.component';\n\n@Component({\n tag: 'p-input-group',\n styleUrl: './input-group.component.scss',\n shadow: true,\n})\nexport class InputGroup {\n /*\n The size of the input group\n /\n @Prop() size: 'small' \| 'medium' = 'medium';\n\n /\n The prefix of the input group\n /\n @Prop() prefix: string;\n\n /\n The suffix of the input group\n /\n @Prop() suffix: string;\n\n /\n Icon of the input group\n /\n @Prop() icon: IconVariant;\n\n /\n Icon flip\n /\n @Prop() iconFlip: IconFlipOptions;\n\n /\n Icon rotate\n /\n @Prop() iconRotate: RotateOptions;\n\n /\n Icon position\n /\n @Prop() iconPosition: 'start' \| 'end' = 'start';\n\n /\n The label of the input group\n /\n @Prop() label: string;\n\n /\n The helper of the input group\n /\n @Prop() helper: string;\n\n /\n Wether the field is required\n /\n @Prop({ reflect: true }) required: boolean;\n\n /\n The helper of the input group\n /\n @Prop({ reflect: true }) error: string;\n\n /\n Wether the input group is disabled\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n Wether the input group is focused\n /\n @Prop({ reflect: true }) focused: boolean = false;\n\n /\n The method to use when focusing the input\n /\n @Prop() focusMethod: 'focus' \| 'click' = 'focus';\n\n /\n The host element\n /\n @Element() private _el: HTMLElement;\n\n @State() private _forceShowTooltip = false;\n\n private _whitelistedTags = ['input', 'textarea'];\n\n componentWillRender() {\n this._setInputClasses();\n }\n\n render() {\n const {\n hasHeaderSlot,\n helper,\n label,\n prefix,\n suffix,\n errorAndErrorIsNotBoolean,\n errorVariant,\n } = this._getSlotInfo();\n\n return (\n <Host\n class={`p-input-group ${this.error?.length && 'error'} ${\n this.disabled && 'disabled'\n } ${this.focused && 'focused'} size-${this.size}`}\n >\n <div class=\"flex items-end justify-between\">\n {label && (\n <div\n class=\"input-label\"\n onClick={() => this._focusInput()}\n >\n {label}\n {this.required && (\n <span class=\"ml-1 text-negative\"></span>\n )}\n </div>\n )}\n\n {(helper \|\| hasHeaderSlot) && (\n <div class=\"input-header\">\n {hasHeaderSlot && <slot name=\"header\" />}\n {helper && (\n <p-helper\n class={`flex ${\n hasHeaderSlot ? 'ml-2' : ''\n }`}\n placement=\"top-end\"\n >\n {helper}\n </p-helper>\n )}\n </div>\n )}\n </div>\n <p-tooltip\n class=\"w-full\"\n variant=\"error-element\"\n content={this.error}\n show={\n errorAndErrorIsNotBoolean &&\n errorVariant === 'element' &&\n this._forceShowTooltip\n }\n enableUserInput={false}\n >\n <div class=\"content\" slot=\"trigger\">\n {(prefix \|\|\n (this.icon && this.iconPosition === 'start')) && (\n <div\n class={`prefix size-${this.size}`}\n onClick={() => this._focusInput()}\n >\n {this.icon && this.iconPosition === 'start' ? (\n <p-icon\n class=\"flex\"\n variant={this.icon}\n rotate={this.iconRotate}\n flip={this.iconFlip}\n />\n ) : (\n prefix\n )}\n </div>\n )}\n {(suffix \|\|\n (errorAndErrorIsNotBoolean &&\n errorVariant === 'icon') \|\|\n (this.icon && this.iconPosition === 'end')) && (\n <div\n class={`suffix size-${this.size}`}\n onClick={() => this._focusInput()}\n >\n {errorAndErrorIsNotBoolean &&\n errorVariant === 'icon' ? (\n <p-input-error\n error={this.error}\n forceShowTooltip={\n this._forceShowTooltip\n }\n />\n ) : this.icon && this.iconPosition === 'end' ? (\n <p-icon\n class=\"flex\"\n variant={this.icon}\n rotate={this.iconRotate}\n flip={this.iconFlip}\n />\n ) : (\n suffix\n )}\n </div>\n )}\n\n <slot name=\"input\" />\n </div>\n </p-tooltip>\n </Host>\n );\n }\n\n @Listen('focusin')\n handleFocusIn() {\n this._forceShowTooltip = true;\n }\n\n @Listen('focusout')\n handleFocusOut() {\n this._forceShowTooltip = false;\n }\n /* \n With this, we shall hack the system in ways no one would ever have thought.\n \n <div class=\"pl-0 pr-0 border-l-0 border-r-0 rounded-tl-none rounded-bl-none rounded-tr-none rounded-br-none\"></div>\n */\n private _setInputClasses() {\n const input = this._el.querySelector(':scope > [slot=\"input\"]');\n\n if (!input) {\n return;\n }\n\n const tagName = input.tagName.toLowerCase();\n if (this._whitelistedTags.indexOf(tagName) === -1) {\n return;\n }\n\n if (!input.classList.contains('p-input')) {\n input.classList.add('p-input');\n }\n\n const { prefix, suffix, errorAndErrorIsNotBoolean, errorVariant } =\n this._getSlotInfo();\n\n if (\n suffix \|\|\n (errorAndErrorIsNotBoolean && errorVariant === 'icon') \|\|\n (this.icon && this.iconPosition === 'end')\n ) {\n input.classList.add(\n 'border-r-0',\n 'rounded-tr-none',\n 'rounded-br-none',\n 'pr-0'\n );\n } else {\n input.classList.remove(\n 'border-r-0',\n 'rounded-tr-none',\n 'rounded-br-none',\n 'pr-0'\n );\n }\n\n if (prefix \|\| (this.icon && this.iconPosition === 'start')) {\n input.classList.add(\n 'border-l-0',\n 'rounded-tl-none',\n 'rounded-bl-none',\n 'pl-0'\n );\n } else {\n input.classList.remove(\n 'border-l-0',\n 'rounded-tl-none',\n 'rounded-bl-none',\n 'pl-0'\n );\n }\n\n if (this.size === 'small' && !input.classList.contains('size-small')) {\n input.classList.add('size-small');\n }\n\n if (this.size !== 'small' && input.classList.contains('size-small')) {\n input.classList.remove('size-small');\n }\n }\n\n private _getSlotInfo() {\n const hasHelperSlot = !!this._el.querySelector(\n ':scope > [slot=\"helper\"]'\n );\n const hasLabelSlot = !!this._el.querySelector(\n ':scope > [slot=\"label\"]'\n );\n const hasPrefixSlot = !!this._el.querySelector(\n ':scope > [slot=\"prefix\"]'\n );\n const hasSuffixSlot = !!this._el.querySelector(\n ':scope > [slot=\"suffix\"]'\n );\n const hasHeaderSlot = !!this._el.querySelector(\n ':scope > [slot=\"header\"]'\n );\n\n const helper = hasHelperSlot ? <slot name=\"helper\" /> : this.helper;\n const label = hasLabelSlot ? <slot name=\"label\" /> : this.label;\n const prefix = hasPrefixSlot ? <slot name=\"prefix\" /> : this.prefix;\n const suffix = hasSuffixSlot ? <slot name=\"suffix\" /> : this.suffix;\n\n const errorAndErrorIsNotBoolean =\n this.error &&\n typeof this.error === 'string' &&\n this.error !== 'true';\n\n return {\n hasHelperSlot,\n hasLabelSlot,\n hasPrefixSlot,\n hasSuffixSlot,\n hasHeaderSlot,\n helper,\n label,\n prefix,\n suffix,\n errorAndErrorIsNotBoolean,\n errorVariant: this._el.offsetWidth <= 72 ? 'element' : 'icon',\n };\n }\n\n private _focusInput() {\n const input = this._el.querySelector(':scope > [slot=\"input\"]');\n (input as HTMLElement)[this.focusMethod]();\n }\n}\n"]}

package/dist/components/divider.component.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-const dividerComponentCss = ".my-2{margin-bottom:.5rem!important;margin-top:.5rem!important}.block{display:block!important}.flex{display:flex!important}.h-px{height:1px!important}.w-full{width:100%!important}.bg-mystic-medium{--tw-bg-opacity:1!important;background-color:rgb(227 236 243/var(--tw-bg-opacity))!important}*{box-sizing:border-box}:host{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{--tw-bg-opacity:1;background-color:rgb(227 236 243/var(--tw-bg-opacity));content:\"\";flex:1 1 0%;height:1px}.static{position:static!important}.items-center{align-items:center!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.font-semibold{font-weight:600!important}.uppercase{text-transform:uppercase!important}";
+const dividerComponentCss = ".my-2{margin-bottom:.5rem!important;margin-top:.5rem!important}.block{display:block!important}.flex{display:flex!important}.h-px{height:1px!important}.w-full{width:100%!important}.bg-mystic-medium{--tw-bg-opacity:1!important;background-color:rgb(227 236 243/var(--tw-bg-opacity))!important}*{box-sizing:border-box}:host{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{--tw-bg-opacity:1;background-color:rgb(227 236 243/var(--tw-bg-opacity));content:\"\";flex:1 1 0%;height:1px}.static{position:static!important}.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}";
 const Divider = /*@__PURE__*/ proxyCustomElement(class Divider extends HTMLElement {
   constructor() {
@@ -11,7 +11,7 @@ const Divider = /*@__PURE__*/ proxyCustomElement(class Divider extends HTMLEleme
   render() {
     var _a;
     const hasSlotted = !!((_a = this._el.innerHTML) === null || _a === void 0 ? void 0 : _a.length);
-    return (h(Host, { class: "p-divider" }, h("div", { class: "content" }, h("div", { class: `flex items-center ${hasSlotted && 'px-2'} text-xs font-semibold uppercase` }, h("slot", null)))));
+    return (h(Host, { class: "p-divider" }, h("div", { class: "content" }, h("div", { class: `flex items-center ${hasSlotted && 'px-2'} text-xxs font-semibold uppercase` }, h("slot", null)))));
   }
   get _el() { return this; }
   static get style() { return dividerComponentCss; }

package/dist/components/divider.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"divider.component.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,~~s3BAAs3B~~;;~~MCOr4B~~,OAAO;;;;;;EAMhB,MAAM;;IACF,MAAM,UAAU,GAAG,CAAC,EAAC,MAAA,IAAI,CAAC,GAAG,CAAC,SAAS,0CAAE,MAAM,CAAA,CAAC;IAChD,QACI,EAAC,IAAI,IAAC,KAAK,EAAC,WAAW,IACnB,WAAK,KAAK,EAAC,SAAS,IAChB,WACI,KAAK,EAAE,qBACH,UAAU,IAAI,MAClB,~~kCAAkC~~,~~IAElC~~,eAAQ,CACN,CACJ,CACH,EACT;GACL;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/divider/divider.component.scss?tag=p-divider&encapsulation=shadow","src/components/atoms/divider/divider.component.tsx"],"sourcesContent":[":host {\n @apply block my-2 w-full;\n\n .content {\n @apply flex w-full items-center;\n\n &::before,\n &::after {\n content: '';\n @apply h-px bg-mystic-medium flex-1;\n }\n }\n}\n","import { Component, Element, h, Host } from '@stencil/core';\n\n@Component({\n tag: 'p-divider',\n styleUrl: 'divider.component.scss',\n shadow: true,\n})\nexport class Divider {\n /*\n The host element\n */\n @Element() private _el: HTMLElement;\n\n render() {\n const hasSlotted = !!this._el.innerHTML?.length;\n return (\n <Host class=\"p-divider\">\n <div class=\"content\">\n <div\n class={`flex items-center ${\n hasSlotted && 'px-2'\n } text-xs font-semibold uppercase`}\n >\n <slot />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"divider.component.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,81BAA81B;;MCO72B,OAAO;;;;;;EAMhB,MAAM;;IACF,MAAM,UAAU,GAAG,CAAC,EAAC,MAAA,IAAI,CAAC,GAAG,CAAC,SAAS,0CAAE,MAAM,CAAA,CAAC;IAChD,QACI,EAAC,IAAI,IAAC,KAAK,EAAC,WAAW,IACnB,WAAK,KAAK,EAAC,SAAS,IAChB,WACI,KAAK,EAAE,qBACH,UAAU,IAAI,MAClB,mCAAmC,IAEnC,eAAQ,CACN,CACJ,CACH,EACT;GACL;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/divider/divider.component.scss?tag=p-divider&encapsulation=shadow","src/components/atoms/divider/divider.component.tsx"],"sourcesContent":[":host {\n @apply block my-2 w-full;\n\n .content {\n @apply flex w-full items-center;\n\n &::before,\n &::after {\n content: '';\n @apply h-px bg-mystic-medium flex-1;\n }\n }\n}\n","import { Component, Element, h, Host } from '@stencil/core';\n\n@Component({\n tag: 'p-divider',\n styleUrl: 'divider.component.scss',\n shadow: true,\n})\nexport class Divider {\n /*\n The host element\n */\n @Element() private _el: HTMLElement;\n\n render() {\n const hasSlotted = !!this._el.innerHTML?.length;\n return (\n <Host class=\"p-divider\">\n <div class=\"content\">\n <div\n class={`flex items-center ${\n hasSlotted && 'px-2'\n } text-xxs font-semibold uppercase`}\n >\n <slot />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/input-group.component.js CHANGED Viewed

@@ -59,7 +59,8 @@ const InputGroup = /*@__PURE__*/ proxyCustomElement(class InputGroup extends HTM
     if (!input) {
       return;
     }
-    if (this._whitelistedTags.indexOf(input.tagName) === -1) {
+    const tagName = input.tagName.toLowerCase();
+    if (this._whitelistedTags.indexOf(tagName) === -1) {
       return;
     }
     if (!input.classList.contains('p-input')) {

package/dist/components/input-group.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"input-group.component.js","mappings":"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","names":[],"sources":["src/components/molecules/input-group/input-group.component.scss?tag=p-input-group&encapsulation=shadow","src/components/molecules/input-group/input-group.component.tsx"],"sourcesContent":["@import '../../../style/form/mixins';\n\n@mixin slottedItems($prefix: false) {\n @include inputs($prefix, true) {\n @content;\n }\n}\n\n:host {\n @apply flex w-full flex-col;\n @apply outline-none #{!important};\n\n .input-label {\n @apply mb-[2px] text-xs font-semibold uppercase tracking-wider text-storm-vague;\n }\n\n .input-header {\n @apply mb-[2px] flex items-end gap-2;\n }\n\n .content {\n @apply flex w-full;\n\n .prefix,\n .suffix {\n @include inputDefaultState(false);\n @apply box-border flex-1 text-storm;\n @apply h-full;\n }\n\n .prefix {\n @apply rounded-br-none rounded-tr-none;\n @apply border-r-0 #{!important};\n @apply order-1;\n @apply pr-2;\n }\n\n .suffix {\n @apply rounded-bl-none rounded-tl-none;\n @apply order-3;\n @apply pl-2;\n @apply border-l-0 #{!important};\n }\n\n @include slottedItems() {\n @include inputDefaultState();\n @apply order-2;\n }\n\n @include slottedItems('.prefix') {\n @apply rounded-bl-none rounded-tl-none #{!important};\n @apply flex-auto;\n @apply border-l-0 pl-0 #{!important};\n }\n\n @include slottedItems('.suffix') {\n @apply rounded-br-none rounded-tr-none #{!important};\n @apply flex-auto;\n @apply border-r-0 pr-0 #{!important};\n }\n }\n}\n\n:host(.focused),\n:host([focused]),\n:host(:focus-within),\n:host(:focus) {\n @apply outline-none #{!important};\n\n .prefix,\n .suffix {\n @include inputFocusState();\n @apply text-indigo;\n }\n\n @include slottedItems() {\n @include inputFocusState();\n }\n}\n\n:host(.error),\n:host([error]) {\n .prefix,\n .suffix {\n @include inputErrorState();\n @apply text-negative;\n }\n\n .suffix {\n @apply items-start py-[calc(0.75rem-1px)];\n }\n\n @include slottedItems() {\n @include inputErrorState();\n\n &:focus,\n &:focus-within,\n &:focus-visible,\n &.focus,\n &[active],\n &.active {\n @include inputErrorState();\n }\n }\n}\n\n:host(.disabled),\n:host([disabled]) {\n .prefix,\n .suffix {\n @include inputDisabledState();\n }\n\n @include slottedItems() {\n @include inputDisabledState();\n pointer-events: none;\n }\n}\n\n:host(.size-small) {\n @include slottedItems() {\n @include inputSizeSmall();\n }\n}\n\n:host(.size-small.error),\n:host(.size-small[error]) {\n .suffix {\n @apply py-2;\n }\n}\n","import {\n Component,\n Element,\n h,\n Host,\n Listen,\n Prop,\n State,\n} from '@stencil/core';\nimport { RotateOptions } from '../../../types/tailwind';\nimport { IconFlipOptions, IconVariant } from '../../atoms/icon/icon.component';\n\n@Component({\n tag: 'p-input-group',\n styleUrl: './input-group.component.scss',\n shadow: true,\n})\nexport class InputGroup {\n /*\n The size of the input group\n /\n @Prop() size: 'small' \| 'medium' = 'medium';\n\n /\n The prefix of the input group\n /\n @Prop() prefix: string;\n\n /\n The suffix of the input group\n /\n @Prop() suffix: string;\n\n /\n Icon of the input group\n /\n @Prop() icon: IconVariant;\n\n /\n Icon flip\n /\n @Prop() iconFlip: IconFlipOptions;\n\n /\n Icon rotate\n /\n @Prop() iconRotate: RotateOptions;\n\n /\n Icon position\n /\n @Prop() iconPosition: 'start' \| 'end' = 'start';\n\n /\n The label of the input group\n /\n @Prop() label: string;\n\n /\n The helper of the input group\n /\n @Prop() helper: string;\n\n /\n Wether the field is required\n /\n @Prop({ reflect: true }) required: boolean;\n\n /\n The helper of the input group\n /\n @Prop({ reflect: true }) error: string;\n\n /\n Wether the input group is disabled\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n Wether the input group is focused\n /\n @Prop({ reflect: true }) focused: boolean = false;\n\n /\n The method to use when focusing the input\n /\n @Prop() focusMethod: 'focus' \| 'click' = 'focus';\n\n /\n The host element\n /\n @Element() private _el: HTMLElement;\n\n @State() private _forceShowTooltip = false;\n\n private _whitelistedTags = ['input', 'textarea'];\n\n componentWillRender() {\n this._setInputClasses();\n }\n\n render() {\n const {\n hasHeaderSlot,\n helper,\n label,\n prefix,\n suffix,\n errorAndErrorIsNotBoolean,\n errorVariant,\n } = this._getSlotInfo();\n\n return (\n <Host\n class={`p-input-group ${this.error?.length && 'error'} ${\n this.disabled && 'disabled'\n } ${this.focused && 'focused'} size-${this.size}`}\n >\n <div class=\"flex items-end justify-between\">\n {label && (\n <div\n class=\"input-label\"\n onClick={() => this._focusInput()}\n >\n {label}\n {this.required && (\n <span class=\"ml-1 text-negative\"></span>\n )}\n </div>\n )}\n\n {(helper \|\| hasHeaderSlot) && (\n <div class=\"input-header\">\n {hasHeaderSlot && <slot name=\"header\" />}\n {helper && (\n <p-helper\n class={`flex ${\n hasHeaderSlot ? 'ml-2' : ''\n }`}\n placement=\"top-end\"\n >\n {helper}\n </p-helper>\n )}\n </div>\n )}\n </div>\n <p-tooltip\n class=\"w-full\"\n variant=\"error-element\"\n content={this.error}\n show={\n errorAndErrorIsNotBoolean &&\n errorVariant === 'element' &&\n this._forceShowTooltip\n }\n enableUserInput={false}\n >\n <div class=\"content\" slot=\"trigger\">\n {(prefix \|\|\n (this.icon && this.iconPosition === 'start')) && (\n <div\n class={`prefix size-${this.size}`}\n onClick={() => this._focusInput()}\n >\n {this.icon && this.iconPosition === 'start' ? (\n <p-icon\n class=\"flex\"\n variant={this.icon}\n rotate={this.iconRotate}\n flip={this.iconFlip}\n />\n ) : (\n prefix\n )}\n </div>\n )}\n {(suffix \|\|\n (errorAndErrorIsNotBoolean &&\n errorVariant === 'icon') \|\|\n (this.icon && this.iconPosition === 'end')) && (\n <div\n class={`suffix size-${this.size}`}\n onClick={() => this._focusInput()}\n >\n {errorAndErrorIsNotBoolean &&\n errorVariant === 'icon' ? (\n <p-input-error\n error={this.error}\n forceShowTooltip={\n this._forceShowTooltip\n }\n />\n ) : this.icon && this.iconPosition === 'end' ? (\n <p-icon\n class=\"flex\"\n variant={this.icon}\n rotate={this.iconRotate}\n flip={this.iconFlip}\n />\n ) : (\n suffix\n )}\n </div>\n )}\n\n <slot name=\"input\" />\n </div>\n </p-tooltip>\n </Host>\n );\n }\n\n @Listen('focusin')\n handleFocusIn() {\n this._forceShowTooltip = true;\n }\n\n @Listen('focusout')\n handleFocusOut() {\n this._forceShowTooltip = false;\n }\n /* \n With this, we shall hack the system in ways no one would ever have thought.\n \n <div class=\"pl-0 pr-0 border-l-0 border-r-0 rounded-tl-none rounded-bl-none rounded-tr-none rounded-br-none\"></div>\n */\n private _setInputClasses() {\n const input = this._el.querySelector(':scope > [slot=\"input\"]');\n\n if (!input) {\n return;\n }\n\n if (this._whitelistedTags.indexOf(input.tagName) === -1) {\n return;\n }\n\n if (!input.classList.contains('p-input')) {\n input.classList.add('p-input');\n }\n\n const { prefix, suffix, errorAndErrorIsNotBoolean, errorVariant } =\n this._getSlotInfo();\n\n if (\n suffix \|\|\n (errorAndErrorIsNotBoolean && errorVariant === 'icon') \|\|\n (this.icon && this.iconPosition === 'end')\n ) {\n input.classList.add(\n 'border-r-0',\n 'rounded-tr-none',\n 'rounded-br-none',\n 'pr-0'\n );\n } else {\n input.classList.remove(\n 'border-r-0',\n 'rounded-tr-none',\n 'rounded-br-none',\n 'pr-0'\n );\n }\n\n if (prefix \|\| (this.icon && this.iconPosition === 'start')) {\n input.classList.add(\n 'border-l-0',\n 'rounded-tl-none',\n 'rounded-bl-none',\n 'pl-0'\n );\n } else {\n input.classList.remove(\n 'border-l-0',\n 'rounded-tl-none',\n 'rounded-bl-none',\n 'pl-0'\n );\n }\n\n if (this.size === 'small' && !input.classList.contains('size-small')) {\n input.classList.add('size-small');\n }\n\n if (this.size !== 'small' && input.classList.contains('size-small')) {\n input.classList.remove('size-small');\n }\n }\n\n private _getSlotInfo() {\n const hasHelperSlot = !!this._el.querySelector(\n ':scope > [slot=\"helper\"]'\n );\n const hasLabelSlot = !!this._el.querySelector(\n ':scope > [slot=\"label\"]'\n );\n const hasPrefixSlot = !!this._el.querySelector(\n ':scope > [slot=\"prefix\"]'\n );\n const hasSuffixSlot = !!this._el.querySelector(\n ':scope > [slot=\"suffix\"]'\n );\n const hasHeaderSlot = !!this._el.querySelector(\n ':scope > [slot=\"header\"]'\n );\n\n const helper = hasHelperSlot ? <slot name=\"helper\" /> : this.helper;\n const label = hasLabelSlot ? <slot name=\"label\" /> : this.label;\n const prefix = hasPrefixSlot ? <slot name=\"prefix\" /> : this.prefix;\n const suffix = hasSuffixSlot ? <slot name=\"suffix\" /> : this.suffix;\n\n const errorAndErrorIsNotBoolean =\n this.error &&\n typeof this.error === 'string' &&\n this.error !== 'true';\n\n return {\n hasHelperSlot,\n hasLabelSlot,\n hasPrefixSlot,\n hasSuffixSlot,\n hasHeaderSlot,\n helper,\n label,\n prefix,\n suffix,\n errorAndErrorIsNotBoolean,\n errorVariant: this._el.offsetWidth <= 72 ? 'element' : 'icon',\n };\n }\n\n private _focusInput() {\n const input = this._el.querySelector(':scope > [slot=\"input\"]');\n (input as HTMLElement)[this.focusMethod]();\n }\n}\n"],"version":3}
1	+ {"file":"input-group.component.js","mappings":"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","names":[],"sources":["src/components/molecules/input-group/input-group.component.scss?tag=p-input-group&encapsulation=shadow","src/components/molecules/input-group/input-group.component.tsx"],"sourcesContent":["@import '../../../style/form/mixins';\n\n@mixin slottedItems($prefix: false) {\n @include inputs($prefix, true) {\n @content;\n }\n}\n\n:host {\n @apply flex w-full flex-col;\n @apply outline-none #{!important};\n\n .input-label {\n @apply mb-[2px] text-xs font-semibold uppercase tracking-wider text-storm-vague;\n }\n\n .input-header {\n @apply mb-[2px] flex items-end gap-2;\n }\n\n .content {\n @apply flex w-full;\n\n .prefix,\n .suffix {\n @include inputDefaultState(false);\n @apply box-border flex-1 text-storm;\n @apply h-full;\n }\n\n .prefix {\n @apply rounded-br-none rounded-tr-none;\n @apply border-r-0 #{!important};\n @apply order-1;\n @apply pr-2;\n }\n\n .suffix {\n @apply rounded-bl-none rounded-tl-none;\n @apply order-3;\n @apply pl-2;\n @apply border-l-0 #{!important};\n }\n\n @include slottedItems() {\n @include inputDefaultState();\n @apply order-2;\n }\n\n @include slottedItems('.prefix') {\n @apply rounded-bl-none rounded-tl-none #{!important};\n @apply flex-auto;\n @apply border-l-0 pl-0 #{!important};\n }\n\n @include slottedItems('.suffix') {\n @apply rounded-br-none rounded-tr-none #{!important};\n @apply flex-auto;\n @apply border-r-0 pr-0 #{!important};\n }\n }\n}\n\n:host(.focused),\n:host([focused]),\n:host(:focus-within),\n:host(:focus) {\n @apply outline-none #{!important};\n\n .prefix,\n .suffix {\n @include inputFocusState();\n @apply text-indigo;\n }\n\n @include slottedItems() {\n @include inputFocusState();\n }\n}\n\n:host(.error),\n:host([error]) {\n .prefix,\n .suffix {\n @include inputErrorState();\n @apply text-negative;\n }\n\n .suffix {\n @apply items-start py-[calc(0.75rem-1px)];\n }\n\n @include slottedItems() {\n @include inputErrorState();\n\n &:focus,\n &:focus-within,\n &:focus-visible,\n &.focus,\n &[active],\n &.active {\n @include inputErrorState();\n }\n }\n}\n\n:host(.disabled),\n:host([disabled]) {\n .prefix,\n .suffix {\n @include inputDisabledState();\n }\n\n @include slottedItems() {\n @include inputDisabledState();\n pointer-events: none;\n }\n}\n\n:host(.size-small) {\n @include slottedItems() {\n @include inputSizeSmall();\n }\n}\n\n:host(.size-small.error),\n:host(.size-small[error]) {\n .suffix {\n @apply py-2;\n }\n}\n","import {\n Component,\n Element,\n h,\n Host,\n Listen,\n Prop,\n State,\n} from '@stencil/core';\nimport { RotateOptions } from '../../../types/tailwind';\nimport { IconFlipOptions, IconVariant } from '../../atoms/icon/icon.component';\n\n@Component({\n tag: 'p-input-group',\n styleUrl: './input-group.component.scss',\n shadow: true,\n})\nexport class InputGroup {\n /*\n The size of the input group\n /\n @Prop() size: 'small' \| 'medium' = 'medium';\n\n /\n The prefix of the input group\n /\n @Prop() prefix: string;\n\n /\n The suffix of the input group\n /\n @Prop() suffix: string;\n\n /\n Icon of the input group\n /\n @Prop() icon: IconVariant;\n\n /\n Icon flip\n /\n @Prop() iconFlip: IconFlipOptions;\n\n /\n Icon rotate\n /\n @Prop() iconRotate: RotateOptions;\n\n /\n Icon position\n /\n @Prop() iconPosition: 'start' \| 'end' = 'start';\n\n /\n The label of the input group\n /\n @Prop() label: string;\n\n /\n The helper of the input group\n /\n @Prop() helper: string;\n\n /\n Wether the field is required\n /\n @Prop({ reflect: true }) required: boolean;\n\n /\n The helper of the input group\n /\n @Prop({ reflect: true }) error: string;\n\n /\n Wether the input group is disabled\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n Wether the input group is focused\n /\n @Prop({ reflect: true }) focused: boolean = false;\n\n /\n The method to use when focusing the input\n /\n @Prop() focusMethod: 'focus' \| 'click' = 'focus';\n\n /\n The host element\n /\n @Element() private _el: HTMLElement;\n\n @State() private _forceShowTooltip = false;\n\n private _whitelistedTags = ['input', 'textarea'];\n\n componentWillRender() {\n this._setInputClasses();\n }\n\n render() {\n const {\n hasHeaderSlot,\n helper,\n label,\n prefix,\n suffix,\n errorAndErrorIsNotBoolean,\n errorVariant,\n } = this._getSlotInfo();\n\n return (\n <Host\n class={`p-input-group ${this.error?.length && 'error'} ${\n this.disabled && 'disabled'\n } ${this.focused && 'focused'} size-${this.size}`}\n >\n <div class=\"flex items-end justify-between\">\n {label && (\n <div\n class=\"input-label\"\n onClick={() => this._focusInput()}\n >\n {label}\n {this.required && (\n <span class=\"ml-1 text-negative\"></span>\n )}\n </div>\n )}\n\n {(helper \|\| hasHeaderSlot) && (\n <div class=\"input-header\">\n {hasHeaderSlot && <slot name=\"header\" />}\n {helper && (\n <p-helper\n class={`flex ${\n hasHeaderSlot ? 'ml-2' : ''\n }`}\n placement=\"top-end\"\n >\n {helper}\n </p-helper>\n )}\n </div>\n )}\n </div>\n <p-tooltip\n class=\"w-full\"\n variant=\"error-element\"\n content={this.error}\n show={\n errorAndErrorIsNotBoolean &&\n errorVariant === 'element' &&\n this._forceShowTooltip\n }\n enableUserInput={false}\n >\n <div class=\"content\" slot=\"trigger\">\n {(prefix \|\|\n (this.icon && this.iconPosition === 'start')) && (\n <div\n class={`prefix size-${this.size}`}\n onClick={() => this._focusInput()}\n >\n {this.icon && this.iconPosition === 'start' ? (\n <p-icon\n class=\"flex\"\n variant={this.icon}\n rotate={this.iconRotate}\n flip={this.iconFlip}\n />\n ) : (\n prefix\n )}\n </div>\n )}\n {(suffix \|\|\n (errorAndErrorIsNotBoolean &&\n errorVariant === 'icon') \|\|\n (this.icon && this.iconPosition === 'end')) && (\n <div\n class={`suffix size-${this.size}`}\n onClick={() => this._focusInput()}\n >\n {errorAndErrorIsNotBoolean &&\n errorVariant === 'icon' ? (\n <p-input-error\n error={this.error}\n forceShowTooltip={\n this._forceShowTooltip\n }\n />\n ) : this.icon && this.iconPosition === 'end' ? (\n <p-icon\n class=\"flex\"\n variant={this.icon}\n rotate={this.iconRotate}\n flip={this.iconFlip}\n />\n ) : (\n suffix\n )}\n </div>\n )}\n\n <slot name=\"input\" />\n </div>\n </p-tooltip>\n </Host>\n );\n }\n\n @Listen('focusin')\n handleFocusIn() {\n this._forceShowTooltip = true;\n }\n\n @Listen('focusout')\n handleFocusOut() {\n this._forceShowTooltip = false;\n }\n /* \n With this, we shall hack the system in ways no one would ever have thought.\n \n <div class=\"pl-0 pr-0 border-l-0 border-r-0 rounded-tl-none rounded-bl-none rounded-tr-none rounded-br-none\"></div>\n */\n private _setInputClasses() {\n const input = this._el.querySelector(':scope > [slot=\"input\"]');\n\n if (!input) {\n return;\n }\n\n const tagName = input.tagName.toLowerCase();\n if (this._whitelistedTags.indexOf(tagName) === -1) {\n return;\n }\n\n if (!input.classList.contains('p-input')) {\n input.classList.add('p-input');\n }\n\n const { prefix, suffix, errorAndErrorIsNotBoolean, errorVariant } =\n this._getSlotInfo();\n\n if (\n suffix \|\|\n (errorAndErrorIsNotBoolean && errorVariant === 'icon') \|\|\n (this.icon && this.iconPosition === 'end')\n ) {\n input.classList.add(\n 'border-r-0',\n 'rounded-tr-none',\n 'rounded-br-none',\n 'pr-0'\n );\n } else {\n input.classList.remove(\n 'border-r-0',\n 'rounded-tr-none',\n 'rounded-br-none',\n 'pr-0'\n );\n }\n\n if (prefix \|\| (this.icon && this.iconPosition === 'start')) {\n input.classList.add(\n 'border-l-0',\n 'rounded-tl-none',\n 'rounded-bl-none',\n 'pl-0'\n );\n } else {\n input.classList.remove(\n 'border-l-0',\n 'rounded-tl-none',\n 'rounded-bl-none',\n 'pl-0'\n );\n }\n\n if (this.size === 'small' && !input.classList.contains('size-small')) {\n input.classList.add('size-small');\n }\n\n if (this.size !== 'small' && input.classList.contains('size-small')) {\n input.classList.remove('size-small');\n }\n }\n\n private _getSlotInfo() {\n const hasHelperSlot = !!this._el.querySelector(\n ':scope > [slot=\"helper\"]'\n );\n const hasLabelSlot = !!this._el.querySelector(\n ':scope > [slot=\"label\"]'\n );\n const hasPrefixSlot = !!this._el.querySelector(\n ':scope > [slot=\"prefix\"]'\n );\n const hasSuffixSlot = !!this._el.querySelector(\n ':scope > [slot=\"suffix\"]'\n );\n const hasHeaderSlot = !!this._el.querySelector(\n ':scope > [slot=\"header\"]'\n );\n\n const helper = hasHelperSlot ? <slot name=\"helper\" /> : this.helper;\n const label = hasLabelSlot ? <slot name=\"label\" /> : this.label;\n const prefix = hasPrefixSlot ? <slot name=\"prefix\" /> : this.prefix;\n const suffix = hasSuffixSlot ? <slot name=\"suffix\" /> : this.suffix;\n\n const errorAndErrorIsNotBoolean =\n this.error &&\n typeof this.error === 'string' &&\n this.error !== 'true';\n\n return {\n hasHelperSlot,\n hasLabelSlot,\n hasPrefixSlot,\n hasSuffixSlot,\n hasHeaderSlot,\n helper,\n label,\n prefix,\n suffix,\n errorAndErrorIsNotBoolean,\n errorVariant: this._el.offsetWidth <= 72 ? 'element' : 'icon',\n };\n }\n\n private _focusInput() {\n const input = this._el.querySelector(':scope > [slot=\"input\"]');\n (input as HTMLElement)[this.focusMethod]();\n }\n}\n"],"version":3}

package/dist/components/segment-item.component.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$1 } from './icon.component.js';
-const segmentItemComponentCss = ".flex{display:flex!important}.h-6{height:1.5rem!important}.h-auto{height:auto!important}.w-6{width:1.5rem!important}.max-w-\\[9rem\\]{max-width:9rem!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.gap-2{gap:.5rem!important}.whitespace-normal{white-space:normal!important}.p-4{padding:1rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xxs{font-size:.6875rem!important}.font-semibold{font-weight:600!important}.text-indigo{color:rgb(82 138 250/var(--tw-text-opacity))!important}.text-indigo,.text-storm{--tw-text-opacity:1!important}.text-storm{color:rgb(81 83 107/var(--tw-text-opacity))!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!important}*{box-sizing:border-box}:host{--tw-text-opacity:1;align-items:center;border-radius:.375rem;color:rgb(81 83 107/var(--tw-text-opacity));cursor:pointer;display:flex;font-size:.875rem;font-weight:600;gap:.5rem;height:1.5rem;line-height:1.25rem;padding-left:.5rem;padding-right:.5rem;white-space:nowrap}:host([size=big]){flex-direction:column;height:auto;max-width:9rem;padding:1rem;text-align:center;white-space:normal}:host([size=big]) .description{--tw-text-opacity:1;color:rgb(128 130 158/var(--tw-text-opacity));font-size:.6875rem;margin-top:-.5rem}:host(.variant-icon){justify-content:center;padding-left:0;padding-right:0;width:1.5rem}:host(:hover){--tw-bg-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-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))}:host(.active) .description{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity))}.static{position:static!important}";
+const segmentItemComponentCss = ".-mt-2{margin-top:-.5rem!important}.flex{display:flex!important}.h-6{height:1.5rem!important}.h-auto{height:auto!important}.w-6{width:1.5rem!important}.max-w-\\[9rem\\]{max-width:9rem!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.gap-2{gap:.5rem!important}.whitespace-normal{white-space:normal!important}.whitespace-nowrap{white-space:nowrap!important}.rounded-large{border-radius:.375rem!important}.bg-indigo-light{--tw-bg-opacity:1!important;background-color:rgb(241 246 255/var(--tw-bg-opacity))!important}.p-4{padding:1rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xxs{font-size:.6875rem!important}.font-normal{font-weight:400!important}.font-semibold{font-weight:600!important}*{box-sizing:border-box}:host{--tw-text-opacity:1;align-items:center;border-radius:.375rem;color:rgb(81 83 107/var(--tw-text-opacity));cursor:pointer;display:flex;font-size:.875rem;font-weight:600;gap:.5rem;height:1.5rem;line-height:1.25rem;padding-left:.5rem;padding-right:.5rem;white-space:nowrap}:host([size=big]){flex-direction:column;height:auto;max-width:9rem;padding:1rem;text-align:center;white-space:normal}:host([size=big]) .description{--tw-text-opacity:1;color:rgb(128 130 158/var(--tw-text-opacity));font-size:.6875rem;font-weight:400;margin-top:-.5rem}:host(.variant-icon){justify-content:center;padding-left:0;padding-right:0;width:1.5rem}:host(:hover){--tw-bg-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-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))}:host(.active) .description{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity))}.static{position:static!important}";
 const SegmentItem = /*@__PURE__*/ proxyCustomElement(class SegmentItem extends HTMLElement {
   constructor() {

package/dist/components/segment-item.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"segment-item.component.js","mappings":";;;AAAA,MAAM,uBAAuB,GAAG,~~q3DAAq3D~~;;~~MCSx4D~~,WAAW;;;;;IAoCZ,wBAAmB,GAAG,KAAK,CAAC;kBAhCV,KAAK;oBAKH,KAAK;gBAKgB,OAAO;;;;;EAwBxD,iBAAiB;IACb,IAAI,CAAC,mBAAmB,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAC/C,+BAA+B,CAClC,CAAC;GACL;EAED,MAAM;IACF,QACI,EAAC,IAAI,IACD,KAAK,EAAE,0BACH,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAC7B,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,IAAI,YAAM,KAAK,EAAC,aAAa,IAAC,YAAM,IAAI,EAAC,aAAa,GAAG,CAAO,CAC7G,EACT;GACL;EAEO,QAAQ;IACZ,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACZ,OAAO;KACV;IAED,QACI,cACI,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,MAAM,EAAE,IAAI,CAAC,UAAU,GACzB,EACJ;GACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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 @apply h-6 ~~flex~~ items-center ~~px-2~~ gap-2 rounded-large;\n @apply ~~text~~-~~storm~~ text-sm font-semibold ~~whitespace~~-~~nowrap~~;\n @apply cursor-pointer;\n}\n\n:host([size='big']) {\n @apply h-auto ~~p-4 flex-col~~ max-w-[9rem] whitespace-normal text-center;\n\n .description {\n @apply ~~text~~-~~storm~~-~~medium~~ text-xxs -mt-2;\n }\n}\n\n:host(.variant-icon) {\n @apply w-6 justify-center px-0;\n}\n\n:host(:hover) {\n @apply bg-indigo-light;\n}\n\n:host(.active) {\n @apply ~~text~~-indigo bg-indigo~~-light~~;\n\n \n .description {\n @apply text-indigo;\n }\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 tag: 'p-segment-item',\n styleUrl: 'segment-item.component.scss',\n shadow: true,\n})\nexport class SegmentItem {\n /*\n Wether the segment item is active\n /\n @Prop() active: boolean = false;\n\n /\n Wether the segment item is icon only\n /\n @Prop() iconOnly: boolean = false;\n\n /\n Size of the segment item\n /\n @Prop({ reflect: true }) size: 'small' \| 'big' = 'small';\n\n /\n Icon to show on the segment item\n /\n @Prop() icon: IconVariant;\n\n /\n Icon flip\n /\n @Prop() iconFlip: IconFlipOptions;\n\n /\n Icon rotate\n /\n @Prop() iconRotate: RotateOptions;\n\n /\n The host element\n */\n @Element() private _el: HTMLElement;\n\n private _hasDescriptionSlot = false;\n\n componentWillLoad() {\n this._hasDescriptionSlot = !!this._el.querySelector(\n ':scope > [slot=\"description\"]'\n );\n }\n\n render() {\n return (\n <Host\n class={`p-segment-item variant-${\n this.iconOnly ? 'icon' : 'default'\n } ${this.active && 'active'}`}\n >\n {this.icon && this._getIcon()}\n <slot />\n {this.size === 'big' && this._hasDescriptionSlot && <span class=\"description\"><slot name=\"description\" /></span>}\n </Host>\n );\n }\n\n private _getIcon() {\n if (!this.icon) {\n return;\n }\n\n return (\n <p-icon\n class=\"flex\"\n variant={this.icon}\n flip={this.iconFlip}\n rotate={this.iconRotate}\n />\n );\n }\n}\n"],"version":3}
1	+ {"file":"segment-item.component.js","mappings":";;;AAAA,MAAM,uBAAuB,GAAG,qzDAAqzD;;MCSx0D,WAAW;;;;;IAoCZ,wBAAmB,GAAG,KAAK,CAAC;kBAhCV,KAAK;oBAKH,KAAK;gBAKgB,OAAO;;;;;EAwBxD,iBAAiB;IACb,IAAI,CAAC,mBAAmB,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAC/C,+BAA+B,CAClC,CAAC;GACL;EAED,MAAM;IACF,QACI,EAAC,IAAI,IACD,KAAK,EAAE,0BACH,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAC7B,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,IAAI,YAAM,KAAK,EAAC,aAAa,IAAC,YAAM,IAAI,EAAC,aAAa,GAAG,CAAO,CAC7G,EACT;GACL;EAEO,QAAQ;IACZ,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACZ,OAAO;KACV;IAED,QACI,cACI,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,MAAM,EAAE,IAAI,CAAC,UAAU,GACzB,EACJ;GACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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 @apply flex h-6 items-center gap-2 rounded-large px-2;\n @apply whitespace-nowrap text-sm font-semibold text-storm;\n @apply cursor-pointer;\n}\n\n:host([size='big']) {\n @apply h-auto max-w-[9rem] flex-col whitespace-normal p-4 text-center;\n\n .description {\n @apply -mt-2 text-xxs font-normal text-storm-medium;\n }\n}\n\n:host(.variant-icon) {\n @apply w-6 justify-center px-0;\n}\n\n:host(:hover) {\n @apply bg-indigo-light;\n}\n\n:host(.active) {\n @apply bg-indigo-light text-indigo;\n\n .description {\n @apply text-indigo;\n }\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 tag: 'p-segment-item',\n styleUrl: 'segment-item.component.scss',\n shadow: true,\n})\nexport class SegmentItem {\n /*\n Wether the segment item is active\n /\n @Prop() active: boolean = false;\n\n /\n Wether the segment item is icon only\n /\n @Prop() iconOnly: boolean = false;\n\n /\n Size of the segment item\n /\n @Prop({ reflect: true }) size: 'small' \| 'big' = 'small';\n\n /\n Icon to show on the segment item\n /\n @Prop() icon: IconVariant;\n\n /\n Icon flip\n /\n @Prop() iconFlip: IconFlipOptions;\n\n /\n Icon rotate\n /\n @Prop() iconRotate: RotateOptions;\n\n /\n The host element\n */\n @Element() private _el: HTMLElement;\n\n private _hasDescriptionSlot = false;\n\n componentWillLoad() {\n this._hasDescriptionSlot = !!this._el.querySelector(\n ':scope > [slot=\"description\"]'\n );\n }\n\n render() {\n return (\n <Host\n class={`p-segment-item variant-${\n this.iconOnly ? 'icon' : 'default'\n } ${this.active && 'active'}`}\n >\n {this.icon && this._getIcon()}\n <slot />\n {this.size === 'big' && this._hasDescriptionSlot && <span class=\"description\"><slot name=\"description\" /></span>}\n </Host>\n );\n }\n\n private _getIcon() {\n if (!this.icon) {\n return;\n }\n\n return (\n <p-icon\n class=\"flex\"\n variant={this.icon}\n flip={this.iconFlip}\n rotate={this.iconRotate}\n />\n );\n }\n}\n"],"version":3}

package/dist/esm/p-divider.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-7b917f6b.js';
-const dividerComponentCss = ".my-2{margin-bottom:.5rem!important;margin-top:.5rem!important}.block{display:block!important}.flex{display:flex!important}.h-px{height:1px!important}.w-full{width:100%!important}.bg-mystic-medium{--tw-bg-opacity:1!important;background-color:rgb(227 236 243/var(--tw-bg-opacity))!important}*{box-sizing:border-box}:host{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{--tw-bg-opacity:1;background-color:rgb(227 236 243/var(--tw-bg-opacity));content:\"\";flex:1 1 0%;height:1px}.static{position:static!important}.items-center{align-items:center!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.font-semibold{font-weight:600!important}.uppercase{text-transform:uppercase!important}";
+const dividerComponentCss = ".my-2{margin-bottom:.5rem!important;margin-top:.5rem!important}.block{display:block!important}.flex{display:flex!important}.h-px{height:1px!important}.w-full{width:100%!important}.bg-mystic-medium{--tw-bg-opacity:1!important;background-color:rgb(227 236 243/var(--tw-bg-opacity))!important}*{box-sizing:border-box}:host{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{--tw-bg-opacity:1;background-color:rgb(227 236 243/var(--tw-bg-opacity));content:\"\";flex:1 1 0%;height:1px}.static{position:static!important}.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}";
 const Divider = class {
   constructor(hostRef) {
@@ -9,7 +9,7 @@ const Divider = class {
   render() {
     var _a;
     const hasSlotted = !!((_a = this._el.innerHTML) === null || _a === void 0 ? void 0 : _a.length);
-    return (h(Host, { class: "p-divider" }, h("div", { class: "content" }, h("div", { class: `flex items-center ${hasSlotted && 'px-2'} text-xs font-semibold uppercase` }, h("slot", null)))));
+    return (h(Host, { class: "p-divider" }, h("div", { class: "content" }, h("div", { class: `flex items-center ${hasSlotted && 'px-2'} text-xxs font-semibold uppercase` }, h("slot", null)))));
   }
   get _el() { return getElement(this); }
 };