@naniteninja/dashboard-components-lib 1.0.0 → 1.0.1

package/src/assets/scheduler/accept.svg

@@ -1,3 +1,3 @@
-<svg width="11" height="9" viewBox="0 0 11 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M9.26525 0.21847C9.37332 0.152409 9.50241 0.131394 9.62542 0.159834C9.74843 0.188275 9.85581 0.26396 9.92503 0.371012L10.4082 1.11886C10.4713 1.21661 10.4983 1.33385 10.4844 1.44986C10.4706 1.56587 10.4168 1.67318 10.3325 1.75281L10.331 1.75479L10.3242 1.76123L10.2964 1.78747L10.1866 1.89396C9.57903 2.49204 8.98989 3.10911 8.42003 3.74427C7.34788 4.94084 6.07468 6.50687 5.21775 8.02635C4.97863 8.4503 4.39449 8.54143 4.04801 8.17543L0.883308 4.83832C0.837956 4.79048 0.802544 4.73387 0.779177 4.67186C0.755809 4.60985 0.744965 4.54371 0.747286 4.47737C0.749608 4.41102 0.765049 4.34582 0.792692 4.28566C0.820334 4.22549 0.859614 4.17157 0.908197 4.12711L1.86468 3.25148C1.94874 3.17457 2.05652 3.1297 2.16958 3.12455C2.28263 3.1194 2.39394 3.15429 2.48445 3.22325L4.09925 4.45201C6.62125 1.92763 8.05207 0.958893 9.26525 0.21847Z" fill="#EBEBF5" fill-opacity="0.2"/>
-</svg>
+<svg width="11" height="9" viewBox="0 0 11 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M9.26525 0.21847C9.37332 0.152409 9.50241 0.131394 9.62542 0.159834C9.74843 0.188275 9.85581 0.26396 9.92503 0.371012L10.4082 1.11886C10.4713 1.21661 10.4983 1.33385 10.4844 1.44986C10.4706 1.56587 10.4168 1.67318 10.3325 1.75281L10.331 1.75479L10.3242 1.76123L10.2964 1.78747L10.1866 1.89396C9.57903 2.49204 8.98989 3.10911 8.42003 3.74427C7.34788 4.94084 6.07468 6.50687 5.21775 8.02635C4.97863 8.4503 4.39449 8.54143 4.04801 8.17543L0.883308 4.83832C0.837956 4.79048 0.802544 4.73387 0.779177 4.67186C0.755809 4.60985 0.744965 4.54371 0.747286 4.47737C0.749608 4.41102 0.765049 4.34582 0.792692 4.28566C0.820334 4.22549 0.859614 4.17157 0.908197 4.12711L1.86468 3.25148C1.94874 3.17457 2.05652 3.1297 2.16958 3.12455C2.28263 3.1194 2.39394 3.15429 2.48445 3.22325L4.09925 4.45201C6.62125 1.92763 8.05207 0.958893 9.26525 0.21847Z" fill="#EBEBF5" fill-opacity="0.2"/>
+</svg>

package/src/assets/scheduler/accept_active.svg

@@ -1,3 +1,3 @@
-<svg width="11" height="10" viewBox="0 0 11 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M9.26525 0.876673C9.37332 0.810612 9.50241 0.789597 9.62542 0.818038C9.74843 0.846478 9.85581 0.922164 9.92503 1.02921L10.4082 1.77707C10.4713 1.87481 10.4983 1.99205 10.4844 2.10806C10.4706 2.22407 10.4168 2.33138 10.3325 2.41101L10.331 2.41299L10.3242 2.41943L10.2964 2.44568L10.1866 2.55216C9.57903 3.15024 8.98989 3.76731 8.42003 4.40248C7.34788 5.59904 6.07468 7.16508 5.21775 8.68455C4.97863 9.1085 4.39449 9.19963 4.04801 8.83363L0.883308 5.49652C0.837956 5.44868 0.802544 5.39207 0.779177 5.33006C0.755809 5.26806 0.744965 5.20191 0.747286 5.13557C0.749608 5.06922 0.765049 5.00403 0.792692 4.94386C0.820334 4.88369 0.859614 4.82977 0.908197 4.78532L1.86468 3.90969C1.94874 3.83278 2.05652 3.78791 2.16958 3.78276C2.28263 3.77761 2.39394 3.8125 2.48445 3.88146L4.09925 5.11021C6.62125 2.58584 8.05207 1.6171 9.26525 0.876673Z" fill="#FE3C72"/>
-</svg>
+<svg width="11" height="10" viewBox="0 0 11 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M9.26525 0.876673C9.37332 0.810612 9.50241 0.789597 9.62542 0.818038C9.74843 0.846478 9.85581 0.922164 9.92503 1.02921L10.4082 1.77707C10.4713 1.87481 10.4983 1.99205 10.4844 2.10806C10.4706 2.22407 10.4168 2.33138 10.3325 2.41101L10.331 2.41299L10.3242 2.41943L10.2964 2.44568L10.1866 2.55216C9.57903 3.15024 8.98989 3.76731 8.42003 4.40248C7.34788 5.59904 6.07468 7.16508 5.21775 8.68455C4.97863 9.1085 4.39449 9.19963 4.04801 8.83363L0.883308 5.49652C0.837956 5.44868 0.802544 5.39207 0.779177 5.33006C0.755809 5.26806 0.744965 5.20191 0.747286 5.13557C0.749608 5.06922 0.765049 5.00403 0.792692 4.94386C0.820334 4.88369 0.859614 4.82977 0.908197 4.78532L1.86468 3.90969C1.94874 3.83278 2.05652 3.78791 2.16958 3.78276C2.28263 3.77761 2.39394 3.8125 2.48445 3.88146L4.09925 5.11021C6.62125 2.58584 8.05207 1.6171 9.26525 0.876673Z" fill="#FE3C72"/>
+</svg>

package/src/assets/scheduler/arrow.svg

@@ -1,13 +1,13 @@
-<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1.44344 0.936192C1.72488 0.65427 2.18119 0.65427 2.46263 0.936192L6.99777 5.47907L11.5329 0.936191C11.8144 0.654269 12.2707 0.654269 12.5521 0.936191C12.8335 1.21811 12.8335 1.6752 12.5521 1.95712L7.50737 7.01047C7.22593 7.29239 6.76962 7.29239 6.48818 7.01047L1.44344 1.95712C1.162 1.6752 1.162 1.21811 1.44344 0.936192Z" fill="url(#paint0_linear_1414_489)" fill-opacity="0.6" stroke="url(#paint1_linear_1414_489)" stroke-opacity="0.6" stroke-width="0.721906" stroke-linecap="round" stroke-linejoin="round"/>
-<defs>
-<linearGradient id="paint0_linear_1414_489" x1="1.95304" y1="3.97333" x2="12.0425" y2="3.97333" gradientUnits="userSpaceOnUse">
-<stop offset="0.574653" stop-color="#FE3C72"/>
-<stop offset="1" stop-color="#DEA9FF"/>
-</linearGradient>
-<linearGradient id="paint1_linear_1414_489" x1="1.23236" y1="3.97333" x2="12.7632" y2="3.97333" gradientUnits="userSpaceOnUse">
-<stop offset="0.574653" stop-color="#FE3C72"/>
-<stop offset="1" stop-color="#DEA9FF"/>
-</linearGradient>
-</defs>
-</svg>
+<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.44344 0.936192C1.72488 0.65427 2.18119 0.65427 2.46263 0.936192L6.99777 5.47907L11.5329 0.936191C11.8144 0.654269 12.2707 0.654269 12.5521 0.936191C12.8335 1.21811 12.8335 1.6752 12.5521 1.95712L7.50737 7.01047C7.22593 7.29239 6.76962 7.29239 6.48818 7.01047L1.44344 1.95712C1.162 1.6752 1.162 1.21811 1.44344 0.936192Z" fill="url(#paint0_linear_1414_489)" fill-opacity="0.6" stroke="url(#paint1_linear_1414_489)" stroke-opacity="0.6" stroke-width="0.721906" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_1414_489" x1="1.95304" y1="3.97333" x2="12.0425" y2="3.97333" gradientUnits="userSpaceOnUse">
+<stop offset="0.574653" stop-color="#FE3C72"/>
+<stop offset="1" stop-color="#DEA9FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1414_489" x1="1.23236" y1="3.97333" x2="12.7632" y2="3.97333" gradientUnits="userSpaceOnUse">
+<stop offset="0.574653" stop-color="#FE3C72"/>
+<stop offset="1" stop-color="#DEA9FF"/>
+</linearGradient>
+</defs>
+</svg>

package/src/assets/scheduler/cancel.svg

@@ -1,3 +1,3 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.358 8.6128L8.71702 3.24464M8.81786 8.71513L3.25788 3.14566" stroke="#EBEBF5" stroke-opacity="0.2" stroke-width="1.47229" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.358 8.6128L8.71702 3.24464M8.81786 8.71513L3.25788 3.14566" stroke="#EBEBF5" stroke-opacity="0.2" stroke-width="1.47229" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/scheduler/cancel_active.svg

@@ -1,3 +1,3 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.358 8.6128L8.71702 3.24464M8.81786 8.71513L3.25788 3.14566" stroke="#FE3C72" stroke-width="1.47229" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.358 8.6128L8.71702 3.24464M8.81786 8.71513L3.25788 3.14566" stroke="#FE3C72" stroke-width="1.47229" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/scheduler/heart.svg

@@ -1,18 +1,18 @@
-<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_d_484_10774)">
-<path d="M9.47122 2.15614C9.47122 2.15614 9.47122 2.15614 9.85122 1.65614C10.2912 1.07614 10.9412 0.656136 11.7212 0.656136C12.9662 0.656136 13.9712 1.66114 13.9712 2.90614C13.9712 3.37114 13.8312 3.80114 13.5912 4.15614C13.1862 4.76114 9.47122 8.65614 9.47122 8.65614C9.47122 8.65614 5.75622 4.76114 5.35122 4.15614C5.11122 3.80114 4.97122 3.37114 4.97122 2.90614C4.97122 1.66114 5.97622 0.656136 7.22122 0.656136C8.00122 0.656136 8.65622 1.07614 9.09122 1.65614C9.47122 2.15614 9.47122 2.15614 9.47122 2.15614Z" fill="#F95D84"/>
-<path d="M9.47122 2.15614C9.47122 2.15614 9.47122 2.15614 9.09122 1.65614C8.65122 1.07614 8.00122 0.656136 7.22122 0.656136C5.97622 0.656136 4.97122 1.66114 4.97122 2.90614C4.97122 3.37114 5.11122 3.80114 5.35122 4.15614C5.75622 4.76114 9.47122 8.65614 9.47122 8.65614M9.47122 2.15614C9.47122 2.15614 9.47122 2.15614 9.85122 1.65614C10.2912 1.07614 10.9412 0.656136 11.7212 0.656136C12.9662 0.656136 13.9712 1.66114 13.9712 2.90614C13.9712 3.37114 13.8312 3.80114 13.5912 4.15614C13.1862 4.76114 9.47122 8.65614 9.47122 8.65614" stroke="#F95D84" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-<defs>
-<filter id="filter0_d_484_10774" x="0.471222" y="0.156136" width="18" height="17" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="4"/>
-<feGaussianBlur stdDeviation="2"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_484_10774"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_484_10774" result="shape"/>
-</filter>
-</defs>
-</svg>
+<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_484_10774)">
+<path d="M9.47122 2.15614C9.47122 2.15614 9.47122 2.15614 9.85122 1.65614C10.2912 1.07614 10.9412 0.656136 11.7212 0.656136C12.9662 0.656136 13.9712 1.66114 13.9712 2.90614C13.9712 3.37114 13.8312 3.80114 13.5912 4.15614C13.1862 4.76114 9.47122 8.65614 9.47122 8.65614C9.47122 8.65614 5.75622 4.76114 5.35122 4.15614C5.11122 3.80114 4.97122 3.37114 4.97122 2.90614C4.97122 1.66114 5.97622 0.656136 7.22122 0.656136C8.00122 0.656136 8.65622 1.07614 9.09122 1.65614C9.47122 2.15614 9.47122 2.15614 9.47122 2.15614Z" fill="#F95D84"/>
+<path d="M9.47122 2.15614C9.47122 2.15614 9.47122 2.15614 9.09122 1.65614C8.65122 1.07614 8.00122 0.656136 7.22122 0.656136C5.97622 0.656136 4.97122 1.66114 4.97122 2.90614C4.97122 3.37114 5.11122 3.80114 5.35122 4.15614C5.75622 4.76114 9.47122 8.65614 9.47122 8.65614M9.47122 2.15614C9.47122 2.15614 9.47122 2.15614 9.85122 1.65614C10.2912 1.07614 10.9412 0.656136 11.7212 0.656136C12.9662 0.656136 13.9712 1.66114 13.9712 2.90614C13.9712 3.37114 13.8312 3.80114 13.5912 4.15614C13.1862 4.76114 9.47122 8.65614 9.47122 8.65614" stroke="#F95D84" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<filter id="filter0_d_484_10774" x="0.471222" y="0.156136" width="18" height="17" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_484_10774"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_484_10774" result="shape"/>
+</filter>
+</defs>
+</svg>

package/src/lib/shared-styles/common/animations.scss

@@ -1,48 +1,48 @@
-// --------------- zoom-in & out --------------
-.zoom-in {
-  animation: fadeZoomIn 0.5s ease-in-out;
-}
-
-.zoom-out {
-  animation: fadeZoomOut 0.5s ease-in-out;
-  &.collapse {
-    display: none !important;
-  }
-}
-
-@keyframes fadeZoomOut {
-  from {
-    opacity: 1;
-    transform: scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: scale(0);
-  }
-}
-
-@keyframes fadeZoomIn {
-  from {
-    opacity: 0;
-    transform: scale(0.5);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-
-// --------------- hide & show --------------
-.hide {
-  max-height: 0;
-  overflow: hidden;
-  opacity: 0;
-  transition: max-height 0.8s ease-in-out, opacity 0.8s ease-in-out;
-}
-
-.show {
-  max-height: 200px; /* Adjust this value based on content */
-  opacity: 1;
-  transition: max-height 0.8s ease-in-out, opacity 0.8s ease-in-out;
-}
+// --------------- zoom-in & out --------------
+.zoom-in {
+  animation: fadeZoomIn 0.5s ease-in-out;
+}
+
+.zoom-out {
+  animation: fadeZoomOut 0.5s ease-in-out;
+  &.collapse {
+    display: none !important;
+  }
+}
+
+@keyframes fadeZoomOut {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0);
+  }
+}
+
+@keyframes fadeZoomIn {
+  from {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+
+// --------------- hide & show --------------
+.hide {
+  max-height: 0;
+  overflow: hidden;
+  opacity: 0;
+  transition: max-height 0.8s ease-in-out, opacity 0.8s ease-in-out;
+}
+
+.show {
+  max-height: 200px; /* Adjust this value based on content */
+  opacity: 1;
+  transition: max-height 0.8s ease-in-out, opacity 0.8s ease-in-out;
+}

package/src/lib/shared-styles/common/base-input-field.scss

@@ -1,132 +1,132 @@
-:host {
-  --border-radius: 100px;
-  --input-field-margin: 0;
-  --label-font-size-floated: 11.0084px;
-  --label-color: rgba(255, 255, 255, 0.5);
-  --label-position-left: 7px;
-  --label-position-top: 19px;
-  --label-float-position-top: -3px;
-  --label-padding: 0px 7px;
-  --label-font-family: 'Gilroy-Regular', serif;
-  --label-font-style: normal;
-  --label-font-weight: 400;
-  --label-font-size: 14px;
-  --label-line-height: 160%;
-  --input-font-color: rgba(255, 255, 255, 0.5);
-  --input-font-family: 'Gilroy-Regular', serif;
-  --input-font-size: 16px;
-  --input-icon-color: #fe3c72;
-  --input-height: 48px;
-  --input-width: 100%;
-  --input-border: none;
-  --input-padding: 11px 15px;
-  --input-field-box-shadow: inset 17px 22px 20px 2.5px rgba(17, 16, 20, 0.7), inset -2px -2px 8px rgba(203, 199, 209, 0.5);
-  --border: 3px solid #fe3c72;
-  --input-number-filed-font: 'Open Sans', sans-serif;
-  --dropdown-background: linear-gradient(191.18deg, #27242c 61.33%, #0c0b0e 101.43%);
-  --input-field-color: #fff;
-}
-
-:host {
-  &.ng-touched.ng-invalid > .content-wrapper:not(.isFocused) > .error-outline {
-    display: block;
-  }
-  &.ng-touched.ng-invalid > .content-wrapper:not(.isFocused) > .p-float-label {
-    position: relative;
-    z-index: 1;
-  }
-}
-
-.content-wrapper {
-  position: relative;
-  display: flex;
-  overflow: unset;
-  margin: var(--input-field-margin);
-  border-radius: var(--border-radius);
-  height: var(--input-height);
-  &.isDisabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-}
-
-.input-field-label {
-  color: var(--label-color);
-  position: absolute;
-  pointer-events: none;
-  left: var(--label-position-left, 7px);
-  top: var(--label-position-top, 24px);
-  padding: var(--label-padding, 0px 7px);
-  transition: 0.2s ease all;
-  -moz-transition: 0.2s ease all;
-  -webkit-transition: 0.2s ease all;
-  font-family: var(--label-font-family, 'Gilroy-Regular', serif);
-  font-style: var(--label-font-style);
-  font-weight: var(--label-font-weight);
-  font-size: var(--label-font-size);
-  line-height: var(--label-line-height);
-  z-index: 2;
-}
-
-.p-float-label,
-.input-field,
-.input-field-readonly {
-  position: relative;
-  color: var(--input-field-color);
-  box-sizing: border-box;
-  font-family: var(--input-font-family);
-  font-size: var(--input-font-size);
-  height: var(--input-height);
-  width: var(--input-width);
-  border: var(--input-border);
-  border-radius: var(--border-radius);
-  padding: var(--input-padding);
-  margin: unset;
-  appearance: none;
-  -webkit-appearance: none;
-  box-shadow: var(--input-field-box-shadow);
-  -webkit-box-shadow: var(--input-field-box-shadow);
-}
-
-.input-field,
-.p-calendar .p-inputtext,
-.p-autocomplete .p-inputtext {
-  &:focus {
-    outline: none;
-    ~ .input-field-label {
-      top: var(--label-float-position-top);
-      font-size: var(--label-font-size-floated);
-    }
-  }
-}
-
-.error-outline {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  border: var(--border);
-  border-radius: var(--border-radius);
-  transform: matrix(1, 0, 0, -1, 0, 0);
-  display: none;
-}
-
-.input-field-label-float {
-  top: var(--label-float-position-top);
-  font-size: var(--label-font-size-floated);
-}
-
-.p-float-label input:focus ~ label,
-.p-float-label input.p-filled ~ label,
-.p-float-label textarea:focus ~ label,
-.p-float-label textarea.p-filled ~ label,
-.p-float-label .p-inputwrapper-focus ~ label,
-.p-float-label .p-inputwrapper-filled ~ label {
-  top: -0.1rem;
-}
-
-.spacer {
-  flex: 1 1 auto;
-}
+:host {
+  --border-radius: 100px;
+  --input-field-margin: 0;
+  --label-font-size-floated: 11.0084px;
+  --label-color: rgba(255, 255, 255, 0.5);
+  --label-position-left: 7px;
+  --label-position-top: 19px;
+  --label-float-position-top: -3px;
+  --label-padding: 0px 7px;
+  --label-font-family: 'Gilroy-Regular', serif;
+  --label-font-style: normal;
+  --label-font-weight: 400;
+  --label-font-size: 14px;
+  --label-line-height: 160%;
+  --input-font-color: rgba(255, 255, 255, 0.5);
+  --input-font-family: 'Gilroy-Regular', serif;
+  --input-font-size: 16px;
+  --input-icon-color: #fe3c72;
+  --input-height: 48px;
+  --input-width: 100%;
+  --input-border: none;
+  --input-padding: 11px 15px;
+  --input-field-box-shadow: inset 17px 22px 20px 2.5px rgba(17, 16, 20, 0.7), inset -2px -2px 8px rgba(203, 199, 209, 0.5);
+  --border: 3px solid #fe3c72;
+  --input-number-filed-font: 'Open Sans', sans-serif;
+  --dropdown-background: linear-gradient(191.18deg, #27242c 61.33%, #0c0b0e 101.43%);
+  --input-field-color: #fff;
+}
+
+:host {
+  &.ng-touched.ng-invalid > .content-wrapper:not(.isFocused) > .error-outline {
+    display: block;
+  }
+  &.ng-touched.ng-invalid > .content-wrapper:not(.isFocused) > .p-float-label {
+    position: relative;
+    z-index: 1;
+  }
+}
+
+.content-wrapper {
+  position: relative;
+  display: flex;
+  overflow: unset;
+  margin: var(--input-field-margin);
+  border-radius: var(--border-radius);
+  height: var(--input-height);
+  &.isDisabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.input-field-label {
+  color: var(--label-color);
+  position: absolute;
+  pointer-events: none;
+  left: var(--label-position-left, 7px);
+  top: var(--label-position-top, 24px);
+  padding: var(--label-padding, 0px 7px);
+  transition: 0.2s ease all;
+  -moz-transition: 0.2s ease all;
+  -webkit-transition: 0.2s ease all;
+  font-family: var(--label-font-family, 'Gilroy-Regular', serif);
+  font-style: var(--label-font-style);
+  font-weight: var(--label-font-weight);
+  font-size: var(--label-font-size);
+  line-height: var(--label-line-height);
+  z-index: 2;
+}
+
+.p-float-label,
+.input-field,
+.input-field-readonly {
+  position: relative;
+  color: var(--input-field-color);
+  box-sizing: border-box;
+  font-family: var(--input-font-family);
+  font-size: var(--input-font-size);
+  height: var(--input-height);
+  width: var(--input-width);
+  border: var(--input-border);
+  border-radius: var(--border-radius);
+  padding: var(--input-padding);
+  margin: unset;
+  appearance: none;
+  -webkit-appearance: none;
+  box-shadow: var(--input-field-box-shadow);
+  -webkit-box-shadow: var(--input-field-box-shadow);
+}
+
+.input-field,
+.p-calendar .p-inputtext,
+.p-autocomplete .p-inputtext {
+  &:focus {
+    outline: none;
+    ~ .input-field-label {
+      top: var(--label-float-position-top);
+      font-size: var(--label-font-size-floated);
+    }
+  }
+}
+
+.error-outline {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  border: var(--border);
+  border-radius: var(--border-radius);
+  transform: matrix(1, 0, 0, -1, 0, 0);
+  display: none;
+}
+
+.input-field-label-float {
+  top: var(--label-float-position-top);
+  font-size: var(--label-font-size-floated);
+}
+
+.p-float-label input:focus ~ label,
+.p-float-label input.p-filled ~ label,
+.p-float-label textarea:focus ~ label,
+.p-float-label textarea.p-filled ~ label,
+.p-float-label .p-inputwrapper-focus ~ label,
+.p-float-label .p-inputwrapper-filled ~ label {
+  top: -0.1rem;
+}
+
+.spacer {
+  flex: 1 1 auto;
+}