@paperless/core 0.1.0-alpha.21 → 0.1.0-alpha.210

package/dist/collection/components/molecules/input-group/input-group.component.css

@@ -0,0 +1,324 @@
+:host {
+  @apply flex flex-col w-full;
+  @apply outline-none !important;
+}
+:host .input-label {
+  @apply text-xs text-storm-vague font-semibold uppercase tracking-wider;
+}
+:host .input-header {
+  @apply flex gap-2 items-end mb-[2px];
+}
+:host .content {
+  @apply flex;
+}
+:host .content .prefix,
+:host .content .suffix {
+  @apply flex justify-start items-center h-10;
+  @apply text-storm-dark;
+  @apply bg-white px-4 w-full;
+  @apply rounded-large;
+  @apply border border-mystic-dark border-solid !important;
+  @apply outline-none !important;
+  @apply flex-1 text-storm box-border;
+}
+:host .content .prefix::placeholder,
+:host .content .suffix::placeholder {
+  @apply text-storm-medium;
+}
+:host .content .prefix:focus, :host .content .prefix:focus-within, :host .content .prefix:focus-visible, :host .content .prefix.focus, :host .content .prefix[active], :host .content .prefix.active,
+:host .content .suffix:focus,
+:host .content .suffix:focus-within,
+:host .content .suffix:focus-visible,
+:host .content .suffix.focus,
+:host .content .suffix[active],
+:host .content .suffix.active {
+  @apply border-indigo !important;
+  @apply outline-none !important;
+}
+:host .content .prefix.size-small,
+:host .content .suffix.size-small {
+  @apply h-8 text-sm;
+}
+:host .content .prefix {
+  @apply rounded-tr-none rounded-br-none;
+  @apply border-r-0 !important;
+  @apply order-1;
+  @apply pr-2;
+}
+:host .content .suffix {
+  @apply rounded-tl-none rounded-bl-none;
+  @apply border-l-0 !important;
+  @apply order-3;
+  @apply pl-2;
+}
+:host .content ::slotted(input[type=text].p-input),
+:host .content ::slotted(input[type=number].p-input),
+:host .content ::slotted(input[type=date].p-input),
+:host .content ::slotted(input[type=month].p-input),
+:host .content ::slotted(input[type=datetime-local].p-input),
+:host .content ::slotted(input[type=time].p-input),
+:host .content ::slotted(input[type=tel].p-input),
+:host .content ::slotted(input[type=password].p-input),
+:host .content ::slotted(input[type=email].p-input) {
+  @apply flex justify-start items-center h-10;
+  @apply text-storm-dark;
+  @apply bg-white px-4 w-full;
+  @apply rounded-large;
+  @apply border border-mystic-dark border-solid !important;
+  @apply outline-none !important;
+  @apply order-2;
+}
+:host .content ::slotted(input[type=text].p-input)::placeholder,
+:host .content ::slotted(input[type=number].p-input)::placeholder,
+:host .content ::slotted(input[type=date].p-input)::placeholder,
+:host .content ::slotted(input[type=month].p-input)::placeholder,
+:host .content ::slotted(input[type=datetime-local].p-input)::placeholder,
+:host .content ::slotted(input[type=time].p-input)::placeholder,
+:host .content ::slotted(input[type=tel].p-input)::placeholder,
+:host .content ::slotted(input[type=password].p-input)::placeholder,
+:host .content ::slotted(input[type=email].p-input)::placeholder {
+  @apply text-storm-medium;
+}
+:host .content ::slotted(input[type=text].p-input):focus, :host .content ::slotted(input[type=text].p-input):focus-within, :host .content ::slotted(input[type=text].p-input):focus-visible, :host .content ::slotted(input[type=text].p-input).focus, :host .content ::slotted(input[type=text].p-input)[active], :host .content ::slotted(input[type=text].p-input).active,
+:host .content ::slotted(input[type=number].p-input):focus,
+:host .content ::slotted(input[type=number].p-input):focus-within,
+:host .content ::slotted(input[type=number].p-input):focus-visible,
+:host .content ::slotted(input[type=number].p-input).focus,
+:host .content ::slotted(input[type=number].p-input)[active],
+:host .content ::slotted(input[type=number].p-input).active,
+:host .content ::slotted(input[type=date].p-input):focus,
+:host .content ::slotted(input[type=date].p-input):focus-within,
+:host .content ::slotted(input[type=date].p-input):focus-visible,
+:host .content ::slotted(input[type=date].p-input).focus,
+:host .content ::slotted(input[type=date].p-input)[active],
+:host .content ::slotted(input[type=date].p-input).active,
+:host .content ::slotted(input[type=month].p-input):focus,
+:host .content ::slotted(input[type=month].p-input):focus-within,
+:host .content ::slotted(input[type=month].p-input):focus-visible,
+:host .content ::slotted(input[type=month].p-input).focus,
+:host .content ::slotted(input[type=month].p-input)[active],
+:host .content ::slotted(input[type=month].p-input).active,
+:host .content ::slotted(input[type=datetime-local].p-input):focus,
+:host .content ::slotted(input[type=datetime-local].p-input):focus-within,
+:host .content ::slotted(input[type=datetime-local].p-input):focus-visible,
+:host .content ::slotted(input[type=datetime-local].p-input).focus,
+:host .content ::slotted(input[type=datetime-local].p-input)[active],
+:host .content ::slotted(input[type=datetime-local].p-input).active,
+:host .content ::slotted(input[type=time].p-input):focus,
+:host .content ::slotted(input[type=time].p-input):focus-within,
+:host .content ::slotted(input[type=time].p-input):focus-visible,
+:host .content ::slotted(input[type=time].p-input).focus,
+:host .content ::slotted(input[type=time].p-input)[active],
+:host .content ::slotted(input[type=time].p-input).active,
+:host .content ::slotted(input[type=tel].p-input):focus,
+:host .content ::slotted(input[type=tel].p-input):focus-within,
+:host .content ::slotted(input[type=tel].p-input):focus-visible,
+:host .content ::slotted(input[type=tel].p-input).focus,
+:host .content ::slotted(input[type=tel].p-input)[active],
+:host .content ::slotted(input[type=tel].p-input).active,
+:host .content ::slotted(input[type=password].p-input):focus,
+:host .content ::slotted(input[type=password].p-input):focus-within,
+:host .content ::slotted(input[type=password].p-input):focus-visible,
+:host .content ::slotted(input[type=password].p-input).focus,
+:host .content ::slotted(input[type=password].p-input)[active],
+:host .content ::slotted(input[type=password].p-input).active,
+:host .content ::slotted(input[type=email].p-input):focus,
+:host .content ::slotted(input[type=email].p-input):focus-within,
+:host .content ::slotted(input[type=email].p-input):focus-visible,
+:host .content ::slotted(input[type=email].p-input).focus,
+:host .content ::slotted(input[type=email].p-input)[active],
+:host .content ::slotted(input[type=email].p-input).active {
+  @apply border-indigo !important;
+  @apply outline-none !important;
+}
+:host .content ::slotted(input[type=text].p-input).size-small,
+:host .content ::slotted(input[type=number].p-input).size-small,
+:host .content ::slotted(input[type=date].p-input).size-small,
+:host .content ::slotted(input[type=month].p-input).size-small,
+:host .content ::slotted(input[type=datetime-local].p-input).size-small,
+:host .content ::slotted(input[type=time].p-input).size-small,
+:host .content ::slotted(input[type=tel].p-input).size-small,
+:host .content ::slotted(input[type=password].p-input).size-small,
+:host .content ::slotted(input[type=email].p-input).size-small {
+  @apply h-8 text-sm;
+}
+:host .content .prefix + ::slotted(input[type=text].p-input),
+:host .content .prefix + ::slotted(input[type=number].p-input),
+:host .content .prefix + ::slotted(input[type=date].p-input),
+:host .content .prefix + ::slotted(input[type=month].p-input),
+:host .content .prefix + ::slotted(input[type=datetime-local].p-input),
+:host .content .prefix + ::slotted(input[type=time].p-input),
+:host .content .prefix + ::slotted(input[type=tel].p-input),
+:host .content .prefix + ::slotted(input[type=password].p-input),
+:host .content .prefix + ::slotted(input[type=email].p-input) {
+  @apply rounded-tl-none rounded-bl-none !important;
+  @apply flex-auto;
+  @apply border-l-0 pl-0 !important;
+}
+:host .content .suffix + ::slotted(input[type=text].p-input),
+:host .content .suffix + ::slotted(input[type=number].p-input),
+:host .content .suffix + ::slotted(input[type=date].p-input),
+:host .content .suffix + ::slotted(input[type=month].p-input),
+:host .content .suffix + ::slotted(input[type=datetime-local].p-input),
+:host .content .suffix + ::slotted(input[type=time].p-input),
+:host .content .suffix + ::slotted(input[type=tel].p-input),
+:host .content .suffix + ::slotted(input[type=password].p-input),
+:host .content .suffix + ::slotted(input[type=email].p-input) {
+  @apply rounded-tr-none rounded-br-none !important;
+  @apply flex-auto;
+  @apply border-r-0 pr-0 !important;
+}
+
+:host(.focused),
+:host([focused]),
+:host(:focus-within),
+:host(:focus) {
+  @apply outline-none !important;
+}
+:host(.focused) .prefix,
+:host(.focused) .suffix,
+:host([focused]) .prefix,
+:host([focused]) .suffix,
+:host(:focus-within) .prefix,
+:host(:focus-within) .suffix,
+:host(:focus) .prefix,
+:host(:focus) .suffix {
+  @apply border-indigo !important;
+  @apply outline-none !important;
+  @apply text-indigo;
+}
+:host(.focused) ::slotted(input[type=text].p-input),
+:host(.focused) ::slotted(input[type=number].p-input),
+:host(.focused) ::slotted(input[type=date].p-input),
+:host(.focused) ::slotted(input[type=month].p-input),
+:host(.focused) ::slotted(input[type=datetime-local].p-input),
+:host(.focused) ::slotted(input[type=time].p-input),
+:host(.focused) ::slotted(input[type=tel].p-input),
+:host(.focused) ::slotted(input[type=password].p-input),
+:host(.focused) ::slotted(input[type=email].p-input),
+:host([focused]) ::slotted(input[type=text].p-input),
+:host([focused]) ::slotted(input[type=number].p-input),
+:host([focused]) ::slotted(input[type=date].p-input),
+:host([focused]) ::slotted(input[type=month].p-input),
+:host([focused]) ::slotted(input[type=datetime-local].p-input),
+:host([focused]) ::slotted(input[type=time].p-input),
+:host([focused]) ::slotted(input[type=tel].p-input),
+:host([focused]) ::slotted(input[type=password].p-input),
+:host([focused]) ::slotted(input[type=email].p-input),
+:host(:focus-within) ::slotted(input[type=text].p-input),
+:host(:focus-within) ::slotted(input[type=number].p-input),
+:host(:focus-within) ::slotted(input[type=date].p-input),
+:host(:focus-within) ::slotted(input[type=month].p-input),
+:host(:focus-within) ::slotted(input[type=datetime-local].p-input),
+:host(:focus-within) ::slotted(input[type=time].p-input),
+:host(:focus-within) ::slotted(input[type=tel].p-input),
+:host(:focus-within) ::slotted(input[type=password].p-input),
+:host(:focus-within) ::slotted(input[type=email].p-input),
+:host(:focus) ::slotted(input[type=text].p-input),
+:host(:focus) ::slotted(input[type=number].p-input),
+:host(:focus) ::slotted(input[type=date].p-input),
+:host(:focus) ::slotted(input[type=month].p-input),
+:host(:focus) ::slotted(input[type=datetime-local].p-input),
+:host(:focus) ::slotted(input[type=time].p-input),
+:host(:focus) ::slotted(input[type=tel].p-input),
+:host(:focus) ::slotted(input[type=password].p-input),
+:host(:focus) ::slotted(input[type=email].p-input) {
+  @apply border-indigo !important;
+  @apply outline-none !important;
+}
+
+:host(.error) .prefix,
+:host(.error) .suffix,
+:host([error]) .prefix,
+:host([error]) .suffix {
+  @apply text-negative-dark;
+  @apply border-negative !important;
+  @apply text-negative;
+}
+:host(.error) .prefix::placeholder,
+:host(.error) .suffix::placeholder,
+:host([error]) .prefix::placeholder,
+:host([error]) .suffix::placeholder {
+  @apply text-negative-light;
+}
+:host(.error) ::slotted(input[type=text].p-input),
+:host(.error) ::slotted(input[type=number].p-input),
+:host(.error) ::slotted(input[type=date].p-input),
+:host(.error) ::slotted(input[type=month].p-input),
+:host(.error) ::slotted(input[type=datetime-local].p-input),
+:host(.error) ::slotted(input[type=time].p-input),
+:host(.error) ::slotted(input[type=tel].p-input),
+:host(.error) ::slotted(input[type=password].p-input),
+:host(.error) ::slotted(input[type=email].p-input),
+:host([error]) ::slotted(input[type=text].p-input),
+:host([error]) ::slotted(input[type=number].p-input),
+:host([error]) ::slotted(input[type=date].p-input),
+:host([error]) ::slotted(input[type=month].p-input),
+:host([error]) ::slotted(input[type=datetime-local].p-input),
+:host([error]) ::slotted(input[type=time].p-input),
+:host([error]) ::slotted(input[type=tel].p-input),
+:host([error]) ::slotted(input[type=password].p-input),
+:host([error]) ::slotted(input[type=email].p-input) {
+  @apply text-negative-dark;
+  @apply border-negative !important;
+}
+:host(.error) ::slotted(input[type=text].p-input)::placeholder,
+:host(.error) ::slotted(input[type=number].p-input)::placeholder,
+:host(.error) ::slotted(input[type=date].p-input)::placeholder,
+:host(.error) ::slotted(input[type=month].p-input)::placeholder,
+:host(.error) ::slotted(input[type=datetime-local].p-input)::placeholder,
+:host(.error) ::slotted(input[type=time].p-input)::placeholder,
+:host(.error) ::slotted(input[type=tel].p-input)::placeholder,
+:host(.error) ::slotted(input[type=password].p-input)::placeholder,
+:host(.error) ::slotted(input[type=email].p-input)::placeholder,
+:host([error]) ::slotted(input[type=text].p-input)::placeholder,
+:host([error]) ::slotted(input[type=number].p-input)::placeholder,
+:host([error]) ::slotted(input[type=date].p-input)::placeholder,
+:host([error]) ::slotted(input[type=month].p-input)::placeholder,
+:host([error]) ::slotted(input[type=datetime-local].p-input)::placeholder,
+:host([error]) ::slotted(input[type=time].p-input)::placeholder,
+:host([error]) ::slotted(input[type=tel].p-input)::placeholder,
+:host([error]) ::slotted(input[type=password].p-input)::placeholder,
+:host([error]) ::slotted(input[type=email].p-input)::placeholder {
+  @apply text-negative-light;
+}
+
+:host(.disabled) .prefix,
+:host(.disabled) .suffix,
+:host([disabled]) .prefix,
+:host([disabled]) .suffix {
+  @apply opacity-40;
+}
+:host(.disabled) ::slotted(input[type=text].p-input),
+:host(.disabled) ::slotted(input[type=number].p-input),
+:host(.disabled) ::slotted(input[type=date].p-input),
+:host(.disabled) ::slotted(input[type=month].p-input),
+:host(.disabled) ::slotted(input[type=datetime-local].p-input),
+:host(.disabled) ::slotted(input[type=time].p-input),
+:host(.disabled) ::slotted(input[type=tel].p-input),
+:host(.disabled) ::slotted(input[type=password].p-input),
+:host(.disabled) ::slotted(input[type=email].p-input),
+:host([disabled]) ::slotted(input[type=text].p-input),
+:host([disabled]) ::slotted(input[type=number].p-input),
+:host([disabled]) ::slotted(input[type=date].p-input),
+:host([disabled]) ::slotted(input[type=month].p-input),
+:host([disabled]) ::slotted(input[type=datetime-local].p-input),
+:host([disabled]) ::slotted(input[type=time].p-input),
+:host([disabled]) ::slotted(input[type=tel].p-input),
+:host([disabled]) ::slotted(input[type=password].p-input),
+:host([disabled]) ::slotted(input[type=email].p-input) {
+  @apply opacity-40;
+  pointer-events: none;
+}
+
+:host(.size-small) ::slotted(input[type=text].p-input),
+:host(.size-small) ::slotted(input[type=number].p-input),
+:host(.size-small) ::slotted(input[type=date].p-input),
+:host(.size-small) ::slotted(input[type=month].p-input),
+:host(.size-small) ::slotted(input[type=datetime-local].p-input),
+:host(.size-small) ::slotted(input[type=time].p-input),
+:host(.size-small) ::slotted(input[type=tel].p-input),
+:host(.size-small) ::slotted(input[type=password].p-input),
+:host(.size-small) ::slotted(input[type=email].p-input) {
+  @apply h-8 text-sm;
+} .static{position:static!important}.h-6{height:1.5rem!important}.w-full{width:100%!important}.cursor-pointer{cursor:pointer!important}.rounded{border-radius:.25rem!important}.blur{--tw-blur:blur(8px)!important}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}*{box-sizing:border-box}.visible{visibility:visible!important}.static{position:static!important}.fixed{position:fixed!important}.blur{--tw-blur:blur(8px)!important;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}*{box-sizing:border-box}.static{position:static!important}.flex{display:flex!important}.table{display:table!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.w-6{width:1.5rem!important}.flex-col{flex-direction:column!important}.rounded{border-radius:.25rem!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}*{box-sizing:border-box}.static{position:static!important}.flex{display:flex!important}.h-6{height:1.5rem!important}.w-full{width:100%!important}.w-1\/12{width:8.333333%!important}.w-2\/12{width:16.666667%!important}.w-3\/12{width:25%!important}.w-4\/12{width:33.333333%!important}.w-5\/12{width:41.666667%!important}.w-6\/12{width:50%!important}.w-7\/12{width:58.333333%!important}.w-8\/12{width:66.666667%!important}.w-9\/12{width:75%!important}.w-10\/12{width:83.333333%!important}.w-11\/12{width:91.666667%!important}.w-auto{width:auto!important}.flex-1{flex:1 1 0%!important}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.justify-center{justify-content:center!important}.rounded{border-radius:.25rem!important}.font-semibold{font-weight:600!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}*{box-sizing:border-box}@media (min-width:40rem){.tablet\:w-1\/12{width:8.333333%!important}.tablet\:w-2\/12{width:16.666667%!important}.tablet\:w-3\/12{width:25%!important}.tablet\:w-4\/12{width:33.333333%!important}.tablet\:w-5\/12{width:41.666667%!important}.tablet\:w-6\/12{width:50%!important}.tablet\:w-7\/12{width:58.333333%!important}.tablet\:w-8\/12{width:66.666667%!important}.tablet\:w-9\/12{width:75%!important}.tablet\:w-10\/12{width:83.333333%!important}.tablet\:w-11\/12{width:91.666667%!important}}@media (min-width:64rem){.desktop-xs\:w-1\/12{width:8.333333%!important}.desktop-xs\:w-2\/12{width:16.666667%!important}.desktop-xs\:w-3\/12{width:25%!important}.desktop-xs\:w-4\/12{width:33.333333%!important}.desktop-xs\:w-5\/12{width:41.666667%!important}.desktop-xs\:w-6\/12{width:50%!important}.desktop-xs\:w-7\/12{width:58.333333%!important}.desktop-xs\:w-8\/12{width:66.666667%!important}.desktop-xs\:w-9\/12{width:75%!important}.desktop-xs\:w-10\/12{width:83.333333%!important}.desktop-xs\:w-11\/12{width:91.666667%!important}}@media (min-width:80rem){.desktop-sm\:w-1\/12{width:8.333333%!important}.desktop-sm\:w-2\/12{width:16.666667%!important}.desktop-sm\:w-3\/12{width:25%!important}.desktop-sm\:w-4\/12{width:33.333333%!important}.desktop-sm\:w-5\/12{width:41.666667%!important}.desktop-sm\:w-6\/12{width:50%!important}.desktop-sm\:w-7\/12{width:58.333333%!important}.desktop-sm\:w-8\/12{width:66.666667%!important}.desktop-sm\:w-9\/12{width:75%!important}.desktop-sm\:w-10\/12{width:83.333333%!important}.desktop-sm\:w-11\/12{width:91.666667%!important}}@media (min-width:85.375rem){.desktop\:w-1\/12{width:8.333333%!important}.desktop\:w-2\/12{width:16.666667%!important}.desktop\:w-3\/12{width:25%!important}.desktop\:w-4\/12{width:33.333333%!important}.desktop\:w-5\/12{width:41.666667%!important}.desktop\:w-6\/12{width:50%!important}.desktop\:w-7\/12{width:58.333333%!important}.desktop\:w-8\/12{width:66.666667%!important}.desktop\:w-9\/12{width:75%!important}.desktop\:w-10\/12{width:83.333333%!important}.desktop\:w-11\/12{width:91.666667%!important}}@media (min-width:90rem){.desktop-lg\:w-1\/12{width:8.333333%!important}.desktop-lg\:w-2\/12{width:16.666667%!important}.desktop-lg\:w-3\/12{width:25%!important}.desktop-lg\:w-4\/12{width:33.333333%!important}.desktop-lg\:w-5\/12{width:41.666667%!important}.desktop-lg\:w-6\/12{width:50%!important}.desktop-lg\:w-7\/12{width:58.333333%!important}.desktop-lg\:w-8\/12{width:66.666667%!important}.desktop-lg\:w-9\/12{width:75%!important}.desktop-lg\:w-10\/12{width:83.333333%!important}.desktop-lg\:w-11\/12{width:91.666667%!important}}@media (min-width:120rem){.desktop-xl\:w-1\/12{width:8.333333%!important}.desktop-xl\:w-2\/12{width:16.666667%!important}.desktop-xl\:w-3\/12{width:25%!important}.desktop-xl\:w-4\/12{width:33.333333%!important}.desktop-xl\:w-5\/12{width:41.666667%!important}.desktop-xl\:w-6\/12{width:50%!important}.desktop-xl\:w-7\/12{width:58.333333%!important}.desktop-xl\:w-8\/12{width:66.666667%!important}.desktop-xl\:w-9\/12{width:75%!important}.desktop-xl\:w-10\/12{width:83.333333%!important}.desktop-xl\:w-11\/12{width:91.666667%!important}}.static{position:static!important}*{box-sizing:border-box}.static{position:static!important}.hidden{display:none!important}*{box-sizing:border-box}@media (min-width:64rem){.desktop-xs\:flex{display:flex!important}}.static{position:static!important}.fixed{position:fixed!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.ml-1{margin-left:.25rem!important}.block{display:block!important}.flex{display:flex!important}.hidden{display:none!important}.w-full{width:100%!important}.flex-col{flex-direction:column!important}.justify-end{justify-content:flex-end!important}.gap-4{gap:1rem!important}.justify-self-end{justify-self:end!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-transparent{border-color:transparent!important}.border-t-mystic-dark{--tw-border-opacity:1!important;border-top-color:rgb(218 230 240/var(--tw-border-opacity))!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.p-4{padding:1rem!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}*{box-sizing:border-box}@media (min-width:64rem){.desktop-xs\:flex{display:flex!important}.desktop-xs\:hidden{display:none!important}.desktop-xs\:w-auto{width:auto!important}.desktop-xs\:flex-row{flex-direction:row!important}}.static{position:static!important}.m-0{margin:0!important}*{box-sizing:border-box}.visible{visibility:visible!important}.static{position:static!important}.fixed{position:fixed!important}.blur{--tw-blur:blur(8px)!important;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}*{box-sizing:border-box}*{box-sizing:border-box}.static{position:static!important}.fixed{position:fixed!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.ml-1{margin-left:.25rem!important}.block{display:block!important}.flex{display:flex!important}.hidden{display:none!important}.w-full{width:100%!important}.flex-col{flex-direction:column!important}.justify-end{justify-content:flex-end!important}.gap-4{gap:1rem!important}.justify-self-end{justify-self:end!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-transparent{border-color:transparent!important}.border-t-mystic-dark{--tw-border-opacity:1!important;border-top-color:rgb(218 230 240/var(--tw-border-opacity))!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.p-4{padding:1rem!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}*{box-sizing:border-box}@media (min-width:64rem){.desktop-xs\:flex{display:flex!important}.desktop-xs\:hidden{display:none!important}.desktop-xs\:w-auto{width:auto!important}.desktop-xs\:flex-row{flex-direction:row!important}}.visible{visibility:visible!important}.static{position:static!important}.fixed{position:fixed!important}.blur{--tw-blur:blur(8px)!important;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}*{box-sizing:border-box}.static{position:static!important}.ml-2{margin-left:.5rem!important}.flex{display:flex!important}.items-end{align-items:flex-end!important}.justify-between{justify-content:space-between!important}.text-negative{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.text-negative-light{--tw-text-opacity:1!important;color:rgb(255 204 211/var(--tw-text-opacity))!important}*{box-sizing:border-box}.hover\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.visible{visibility:visible!important}.static{position:static!important}.fixed{position:fixed!important}.blur{--tw-blur:blur(8px)!important;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}*{box-sizing:border-box}

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

@@ -0,0 +1,320 @@
+import { Component, Element, h, Host, Listen, Prop, State, } from '@stencil/core';
+export class InputGroup {
+  constructor() {
+    /**
+     * The size of the input group
+     */
+    this.size = 'medium';
+    /**
+     * Icon position
+     */
+    this.iconPosition = 'start';
+    /**
+     * Wether the input group is disabled
+     */
+    this.disabled = false;
+    /**
+     * Wether the input group is focused
+     */
+    this.focused = false;
+    this._showTooltip = false;
+    this._forceShowTooltip = false;
+  }
+  componentWillRender() {
+    this._setInputClasses();
+  }
+  render() {
+    var _a;
+    const hasHelperSlot = !!this._el.querySelector(':scope > [slot="helper"]');
+    const hasLabelSlot = !!this._el.querySelector(':scope > [slot="label"]');
+    const hasPrefixSlot = !!this._el.querySelector(':scope > [slot="prefix"]');
+    const hasSuffixSlot = !!this._el.querySelector(':scope > [slot="suffix"]');
+    const hasHeaderSlot = !!this._el.querySelector(':scope > [slot="header"]');
+    const helper = hasHelperSlot ? h("slot", { name: "helper" }) : this.helper;
+    const label = hasLabelSlot ? h("slot", { name: "label" }) : this.label;
+    const prefix = hasPrefixSlot ? h("slot", { name: "prefix" }) : this.prefix;
+    const suffix = hasSuffixSlot ? h("slot", { name: "suffix" }) : this.suffix;
+    const errorAndErrorIsNotBoolean = this.error &&
+      typeof this.error === 'string' &&
+      this.error !== 'true';
+    return (h(Host, { class: `p-input-group ${((_a = this.error) === null || _a === void 0 ? void 0 : _a.length) && 'error'} ${this.disabled && 'disabled'} ${this.focused && 'focused'} size-${this.size}` },
+      h("div", { class: "flex justify-between items-end" },
+        label && h("div", { class: "input-label" }, label),
+        (helper || hasHeaderSlot) && (h("div", { class: "input-header" },
+          hasHeaderSlot && h("slot", { name: "header" }),
+          helper && (h("p-helper", { class: `flex ${hasHeaderSlot ? 'ml-2' : ''}`, placement: "top-end" }, helper))))),
+      h("div", { class: "content" },
+        (prefix ||
+          (this.icon && this.iconPosition === 'start')) && (h("div", { class: `prefix size-${this.size}` }, this.icon ? (h("p-icon", { class: "flex", variant: this.icon, rotate: this.iconRotate, flip: this.iconFlip })) : (prefix))),
+        (suffix ||
+          errorAndErrorIsNotBoolean ||
+          (this.icon && this.iconPosition === 'end')) && (h("div", { class: `suffix size-${this.size}` }, errorAndErrorIsNotBoolean ? (h("p-tooltip", { variant: "error", popover: this.error, show: this._forceShowTooltip, onIsOpen: (ev) => (this._showTooltip = ev.detail) },
+          h("p-icon", { class: `${this._showTooltip
+              ? 'text-negative'
+              : 'text-negative-light'} hover:text-negative`, slot: "content", variant: "explanation" }))) : this.icon ? (h("p-icon", { class: "flex", variant: this.icon, rotate: this.iconRotate, flip: this.iconFlip })) : (suffix))),
+        h("slot", { name: "input" }))));
+  }
+  handleFocusIn() {
+    this._forceShowTooltip = true;
+  }
+  handleFocusOut() {
+    this._forceShowTooltip = false;
+  }
+  _setInputClasses() {
+    const input = this._el.querySelector(':scope > [slot="input"]');
+    if (!input.classList.contains('p-input')) {
+      input.classList.add('p-input');
+    }
+  }
+  static get is() { return "p-input-group"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["./input-group.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["input-group.component.css"]
+  }; }
+  static get properties() { return {
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'small' | 'medium'",
+        "resolved": "\"medium\" | \"small\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The size of the input group"
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'medium'"
+    },
+    "prefix": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The prefix of the input group"
+      },
+      "attribute": "prefix",
+      "reflect": false
+    },
+    "suffix": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The suffix of the input group"
+      },
+      "attribute": "suffix",
+      "reflect": false
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "IconVariant",
+        "resolved": "\"arrow\" | \"attachment\" | \"bread\" | \"calendar\" | \"camera\" | \"car\" | \"checklist\" | \"checkmark\" | \"chevron\" | \"clock\" | \"cogs\" | \"comment\" | \"document\" | \"download\" | \"envelope\" | \"explanation\" | \"eye\" | \"filter\" | \"folder\" | \"grid\" | \"headset\" | \"integration\" | \"list\" | \"location\" | \"megaphone\" | \"menu\" | \"minus\" | \"more\" | \"negative\" | \"pagination\" | \"payment\" | \"pencil\" | \"person\" | \"plus\" | \"question\" | \"receipt\" | \"report\" | \"search\" | \"settings\" | \"sick\" | \"signout\" | \"switch\" | \"tachometer\" | \"task\" | \"template\" | \"tool\" | \"trash\" | \"turn\" | \"upload\" | \"warning\"",
+        "references": {
+          "IconVariant": {
+            "location": "import",
+            "path": "../../atoms/icon/icon.component"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Icon of the navigation item"
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "iconFlip": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "IconFlipOptions",
+        "resolved": "\"horizontal\" | \"vertical\"",
+        "references": {
+          "IconFlipOptions": {
+            "location": "import",
+            "path": "../../atoms/icon/icon.component"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Icon flip"
+      },
+      "attribute": "icon-flip",
+      "reflect": false
+    },
+    "iconRotate": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "RotateOptions",
+        "resolved": "-135 | -180 | -225 | -25 | -270 | -315 | -45 | -90 | 0 | 135 | 180 | 225 | 25 | 270 | 315 | 45 | 90",
+        "references": {
+          "RotateOptions": {
+            "location": "import",
+            "path": "../../../types/tailwind"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Icon rotate"
+      },
+      "attribute": "icon-rotate",
+      "reflect": false
+    },
+    "iconPosition": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'start' | 'end'",
+        "resolved": "\"end\" | \"start\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Icon position"
+      },
+      "attribute": "icon-position",
+      "reflect": false,
+      "defaultValue": "'start'"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The label of the input group"
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "helper": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The helper of the input group"
+      },
+      "attribute": "helper",
+      "reflect": false
+    },
+    "error": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The helper of the input group"
+      },
+      "attribute": "error",
+      "reflect": true
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether the input group is disabled"
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "focused": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether the input group is focused"
+      },
+      "attribute": "focused",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "_showTooltip": {},
+    "_forceShowTooltip": {}
+  }; }
+  static get elementRef() { return "_el"; }
+  static get listeners() { return [{
+      "name": "focusin",
+      "method": "handleFocusIn",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "focusout",
+      "method": "handleFocusOut",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}