carriera-intern 0.0.0

package/projects/carriera-intern-components/src/app/components/input-datetime-picker/cai-input-datetime-picker.component.scss

@@ -0,0 +1,862 @@
+//@use 'scss/styles.scss';
+
+//@use 'scss/custompickers.scss';
+
+@use "../../../styles/variables" as *;
+
+$bezier: cubic-bezier(0.46, 0.03, 0.51, 0.95);
+
+// New Styles
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  transition: background-color 5000s ease-in-out 0s !important;
+}
+
+input:-webkit-autofill:focus {
+  -webkit-text-fill-color: #ffffff !important;
+}
+
+input:-moz-autofill,
+input:-moz-autofill-preview {
+  filter: none;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: #e5e7eb;
+}
+
+p,
+ul,
+ol,
+dl,
+blockquote,
+figure,
+pre {
+  margin: 0;
+}
+
+button,
+input,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+}
+
+button {
+  background: none;
+  border: none;
+  padding: 0;
+}
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  vertical-align: middle;
+  max-width: 100%;
+  height: auto;
+}
+
+/* Remove default list styles on ul, ol */
+ul,
+ol {
+  padding-left: 1.5rem;
+  list-style-position: outside;
+}
+
+/* Link styles */
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/* Tables */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* Remove outline for focus on mouse users, but keep it for keyboard */
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
+.datetime-input-container {
+  // Text Colors
+  --color-text: #{$color-text-base-content};
+  --color-text-negative: #{$color-text-base-negative};
+  --color-text-heading: #{$color-text-base-heading};
+  --color-text-subtle: #{$color-text-base-content-subtle};
+  --color-text-inverse: #{$color-text-base-inverse};
+
+  // Icon Colors
+  --color-icon-neutral: #{$color-icon-base-neutral};
+  --color-icon-negative: #{$color-icon-base-negative};
+  --color-icon-positive: #{$color-icon-base-positive};
+  --color-icon-inverse: #{$color-icon-base-inverse};
+  --color-icon-disable: #{$color-icon-base-disable};
+
+  // Surface Input Colors - Neutral
+  --color-surface-neutral: #{$color-surface-input-neutral};
+  --color-surface-neutral-hover: #{$color-surface-input-neutral-hover};
+  --color-surface-neutral-focus: #{$color-surface-input-neutral-focus};
+
+  // Surface Input Colors - Positive
+  --color-surface-positive: #{$color-surface-input-positive};
+  --color-surface-positive-hover: #{$color-surface-input-positive-hover};
+  --color-surface-positive-focus: #{$color-surface-input-positive-focus};
+
+  // Surface Input Colors - Negative
+  --color-surface-negative: #{$color-surface-input-negative};
+  --color-surface-negative-hover: #{$color-surface-input-negative-hover};
+  --color-surface-negative-focus: #{$color-surface-input-negative-focus};
+
+  // Surface Input Colors - Disable
+  --color-surface-disable: #{$color-surface-input-disable};
+
+  &.datetime-inverse {
+    // Text Colors
+    --color-text: #{$color-text-base-inverse};
+    --color-text-negative: #{$color-inverse-text-base-negative};
+    --color-text-heading: #{$color-text-base-inverse};
+    --color-text-inverse: #{$color-text-base-content};
+
+    // Icon Colors
+    --color-icon-neutral: #{$color-inverse-icon-base-neutral};
+    --color-icon-negative: #{$color-inverse-icon-base-negative};
+    --color-icon-positive: #{$color-inverse-icon-base-positive};
+    --color-icon-disable: #{$color-inverse-icon-base-disable};
+
+    // Surface Input Colors - Neutral
+    --color-surface-neutral: #{$color-inverse-surface-input-neutral};
+    --color-surface-neutral-hover: #{$color-inverse-surface-input-neutral-hover};
+    --color-surface-neutral-focus: #{$color-inverse-surface-input-neutral-focus};
+
+    // Surface Input Colors - Positive
+    --color-surface-positive: #{$color-inverse-surface-input-positive};
+    --color-surface-positive-hover: #{$color-inverse-surface-input-positive-hover};
+    --color-surface-positive-focus: #{$color-surface-input-positive-focus};
+
+    // Surface Input Colors - Negative
+    --color-surface-negative: #{$color-inverse-surface-input-negative};
+    --color-surface-negative-hover: #{$color-inverse-surface-input-negative-hover};
+    --color-surface-negative-focus: #{$color-surface-input-negative-focus};
+
+    // Surface Input Colors - Disable
+    --color-surface-disable: #{$color-inverse-surface-input-disable};
+
+    &:not(.datetime-has-text) {
+      .datetime-input {
+        color: var(--color-text-inverse) !important;
+      }
+      .main::selection {
+        color: var(--color-text-inverse) !important;
+      }
+      &.datetime-focus {
+        .datetime-icon {
+          color: var(--color-icon-neutral) !important;
+        }
+        .datetime-separator {
+          background-color: var(--color-icon-neutral) !important;
+        }
+      }
+    }
+    &.datetime-valid,
+    &.datetime-invalid {
+      &.datetime-focus {
+        .datetime-input {
+          color: var(--color-text);
+        }
+      }
+      &:hover {
+        .datetime-bg-icon {
+          &:hover {
+            background-color: $color-white-50 !important;
+          }
+        }
+        .datetime-dropdown-icon,
+        .datetime-icon {
+          &:hover {
+            color: $color-white-50 !important;
+          }
+        }
+      }
+    }
+  }
+
+  &.datetime-in-table {
+    --color-surface-neutral: transparent;
+    --color-surface-negative: transparent;
+    --color-surface-positive: transparent;
+
+    .datetime-dropdown-icon {
+      opacity: 0;
+    }
+
+    &.datetime-invalid:not(.datetime-focus):not(:hover) {
+      .datetime-input,
+      .datetime-label {
+        color: var(--color-text-negative);
+      }
+    }
+
+    &:hover,
+    &.datetime-focus {
+      .datetime-dropdown-icon {
+        opacity: 1;
+      }
+    }
+  }
+
+  padding: 4px 4px 4px 6px;
+  border-radius: 2px;
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  background-color: var(--color-surface-neutral);
+
+  transition: background-color 0.1s $bezier;
+
+  &:hover {
+    background-color: var(--color-surface-neutral-hover);
+
+    .datetime-bg-icon {
+      color: var(--color-surface-neutral-hover);
+    }
+  }
+
+  &.datetime-focus {
+    background-color: var(--color-surface-neutral-focus);
+
+    &.datetime-in-table:not(.datetime-billing) {
+      .datetime-label {
+        opacity: 0;
+      }
+    }
+
+    &:not(.datetime-in-table):not(.datetime-billing) {
+      .datetime-label {
+        transform: translateY(-20px);
+        font-weight: 600;
+        font-size: 11px;
+        color: var(--color-text-heading) !important;
+      }
+    }
+
+    &.datetime-billing {
+      .datetime-label {
+        color: white !important;
+      }
+    }
+
+    .datetime-bg-icon {
+      background-color: var(--color-icon-inverse);
+      color: var(--color-surface-neutral-focus);
+
+      &:hover {
+        background-color: $color-white-50;
+      }
+    }
+
+    .datetime-icon {
+      color: var(--color-icon-inverse);
+
+      &:hover {
+        color: $color-white-50;
+      }
+    }
+
+    .datetime-separator {
+      background-color: var(--color-icon-inverse);
+    }
+
+    .datetime-input {
+      color: var(--color-text-inverse);
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+
+  &.datetime-popover-open {
+    .datetime-dropdown-icon {
+      transform: rotate3d(1, 0, 0, 180deg);
+    }
+  }
+
+  &.datetime-has-text {
+    .datetime-input {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    &.datetime-disabled {
+      .datetime-input {
+        pointer-events: none !important;
+      }
+    }
+
+    &:not(.datetime-in-table):not(.datetime-billing) {
+      .datetime-label {
+        transform: translateY(-20px);
+        font-weight: 600;
+        font-size: 11px;
+        color: var(--color-text-heading) !important;
+      }
+    }
+
+    &.datetime-in-table:not(.datetime-billing) {
+      .datetime-label {
+        opacity: 0;
+      }
+    }
+  }
+
+  &.datetime-valid:not(.datetime-disabled) {
+    background-color: var(--color-surface-positive);
+
+    &:hover {
+      background-color: var(--color-surface-positive-hover);
+      .datetime-bg-icon {
+        background-color: var(--color-icon-positive);
+        color: var(--color-surface-positive-hover);
+
+        &:hover {
+          background-color: $color-blue-700;
+        }
+      }
+
+      .datetime-cancel-button {
+        opacity: 1;
+        pointer-events: auto;
+      }
+    }
+
+    &.datetime-focus {
+      background-color: var(--color-surface-positive-focus);
+
+      .datetime-bg-icon {
+        background-color: var(--color-icon-inverse);
+        color: var(--color-surface-positive-focus);
+
+        &:hover {
+          background-color: $color-white-50;
+        }
+      }
+
+      .datetime-icon {
+        color: var(--color-icon-inverse);
+        &:hover {
+          color: $color-white-50;
+        }
+      }
+
+      .datetime-separator {
+        background-color: var(--color-icon-inverse);
+      }
+
+      .datetime-cancel-button {
+        opacity: 1;
+        pointer-events: auto;
+      }
+    }
+    .datetime-separator {
+      background-color: var(--color-icon-positive);
+    }
+
+    .datetime-dropdown-icon,
+    .datetime-icon {
+      color: var(--color-icon-positive);
+
+      &:hover {
+        color: $color-blue-700;
+      }
+    }
+  }
+
+  &.datetime-invalid:not(.datetime-disabled) {
+    .datetime-error-message {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    background-color: var(--color-surface-negative);
+
+    &:hover {
+      background-color: var(--color-surface-negative-hover);
+
+      .datetime-bg-icon {
+        background-color: var(--color-icon-negative);
+        color: var(--color-surface-negative-hover);
+
+        &:hover {
+          background-color: $color-red-700;
+        }
+      }
+
+      &.datetime-has-text {
+        .datetime-cancel-button {
+          opacity: 1;
+          pointer-events: auto;
+        }
+      }
+    }
+
+    &.datetime-focus {
+      &.datetime-has-text {
+        background-color: var(--color-surface-negative-focus);
+
+        .datetime-bg-icon {
+          background-color: var(--color-icon-inverse);
+          color: var(--color-surface-negative-focus);
+
+          &:hover {
+            background-color: $color-white-50;
+          }
+        }
+
+        .datetime-icon {
+          color: var(--color-icon-inverse);
+
+          &:hover {
+            color: $color-white-50;
+          }
+        }
+
+        .datetime-separator {
+          background-color: var(--color-icon-inverse);
+        }
+
+        .datetime-cancel-button {
+          opacity: 1;
+          pointer-events: auto;
+        }
+      }
+
+      &:not(.datetime-has-text) {
+        background-color: var(--color-surface-neutral-focus);
+
+        .datetime-bg-icon {
+          background-color: var(--color-icon-inverse);
+          color: var(--color-surface-neutral-focus);
+          &:hover {
+            background-color: $color-white-50;
+          }
+        }
+
+        .datetime-separator {
+          background-color: var(--color-icon-inverse);
+        }
+
+        .datetime-icon {
+          color: var(--color-icon-inverse);
+
+          &:hover {
+            color: $color-white-50;
+          }
+        }
+      }
+    }
+
+    .datetime-separator {
+      background-color: var(--color-icon-negative);
+    }
+
+    .datetime-dropdown-icon,
+    .datetime-icon {
+      color: var(--color-icon-negative);
+
+      &:hover {
+        color: $color-red-700;
+      }
+    }
+  }
+
+  &.datetime-disabled {
+    cursor: default;
+    &:not(.datetime-in-table) {
+      background-color: var(--color-surface-disable);
+    }
+
+    &.datetime-in-table {
+      background-color: transparent;
+    }
+
+    pointer-events: none;
+
+    .datetime-label {
+      color: var(--color-text-subtle) !important;
+    }
+
+    .datetime-icon {
+      color: var(--color-icon-disable);
+    }
+
+    &.datetime-has-text {
+      .datetime-icon {
+        color: var(--color-icon-neutral);
+      }
+    }
+
+    .datetime-separator {
+      background-color: var(--color-icon-neutral);
+    }
+
+    .datetime-input {
+      color: var(--color-text) !important;
+    }
+  }
+
+  &.datetime-required {
+    .datetime-label {
+      &::after {
+        content: " *";
+        color: var(--color-text-negative);
+      }
+    }
+  }
+
+  cursor: pointer;
+  width: 100%;
+}
+
+.datetime-icon-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  width: max-content;
+
+  &.hidden {
+    display: none;
+  }
+
+  .datetime-icon {
+    order: 1;
+  }
+
+  .datetime-separator {
+    height: 14px;
+    width: 1px;
+    border-radius: 2px;
+    background-color: var(--color-icon-neutral);
+    transition: background-color 0.2s ease-in-out;
+    opacity: 40%;
+    order: 2;
+    margin-right: 4px;
+  }
+}
+
+.datetime-icon {
+  width: 18px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-icon-neutral);
+  transition:
+    color 0.2s ease-in-out,
+    opacity 0.2s ease-in-out,
+    transform 0.2s ease-in-out;
+
+  &:hover {
+    color: $color-black-300;
+  }
+}
+
+.datetime-label {
+  position: absolute;
+  display: flex;
+  gap: 4px;
+  left: 27px;
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 400;
+  pointer-events: none;
+  padding: 0.25rem 6px;
+  color: var(--color-text);
+  transition:
+    transform 0.1s ease-in-out,
+    font-weight 0.1s ease-in-out,
+    color 0.1s ease-in-out,
+    font-size 0.1s ease-in-out,
+    opacity 0.1s ease-in-out;
+  transform: translateY(0);
+  user-select: none;
+}
+
+.datetime-icon-hidden {
+  .datetime-label {
+    left: 0;
+  }
+}
+
+.datetime-bg-icon {
+  background-color: var(--color-icon-neutral);
+  color: var(--color-surface-neutral);
+  border-radius: 1px;
+  height: 18px;
+  width: 18px;
+  padding: 0;
+  display: grid;
+  place-items: center;
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  transition:
+    background-color 0.2s ease-in-out,
+    color 0.2s ease-in-out,
+    opacity 0.2s ease-in-out,
+    transform 0.1s ease-in-out;
+
+  transform-box: border-box;
+  transform-origin: center;
+  will-change: transform;
+
+  svg {
+    transition: transform 0.1s ease-in-out;
+  }
+
+  &:hover {
+    transform: scale(calc(22 / 18));
+    svg {
+      transform: scale(calc(18 / 22));
+    }
+  }
+
+  &:active {
+    transform: scale(1);
+  }
+}
+
+.datetime-cancel-button {
+  position: absolute;
+  right: 26px;
+  top: 4px;
+
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+  pointer-events: none;
+}
+
+.datetime-dropdown-icon {
+  position: absolute;
+  right: 4px;
+  top: 4px;
+  transform: rotate3d(1, 0, 0, 0deg);
+
+  &:hover {
+    color: $color-black-300;
+  }
+}
+
+.datetime-input {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  overflow: hidden;
+  color: var(--color-text);
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+  font-family: Montserrat;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 18px;
+
+  opacity: 0;
+  pointer-events: none;
+  cursor: text;
+
+  transition:
+    opacity 0.2s ease-in-out,
+    color 0.2s ease-in-out;
+
+  .main {
+    border-radius: 1px;
+
+    &.time-am-pm {
+      margin-left: 4px;
+    }
+  }
+}
+
+.datetime-size-22 {
+  height: 22px;
+  padding-left: 0;
+
+  .datetime-icon {
+    height: 14px !important;
+    width: 14px !important;
+  }
+
+  .datetime-bg-icon {
+    height: 14px !important;
+    width: 14px !important;
+
+    padding: 2px !important;
+    right: 22px !important;
+  }
+
+  .datetime-icon-container {
+    height: 22px !important;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    padding-left: 4px !important;
+  }
+
+  .datetime-input {
+    padding-top: 2px;
+    padding-bottom: 2px;
+  }
+
+  .datetime-label {
+    padding-top: 2px;
+    padding-bottom: 2px;
+    padding-left: 0 !important;
+  }
+
+  .datetime-icon {
+    height: 14px !important;
+    width: 14px !important;
+  }
+
+  &.datetime-has-text,
+  &.datetime-focus {
+    .datetime-label {
+      transform: translateY(-18px) !important;
+    }
+  }
+}
+
+.datetime-error-message {
+  position: absolute;
+  bottom: -16px;
+  right: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  opacity: 0;
+  pointer-events: none;
+  user-select: none;
+  transition:
+    opacity 0.2s ease-in-out,
+    transform 0.2s ease-in-out;
+  color: var(--color-text-negative);
+  transform: translateY(-10px);
+  pointer-events: none;
+}
+
+.datetime-in-table {
+  .datetime-input-listener {
+    width: 100%;
+    height: 100% !important;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    opacity: 0;
+  }
+}
+
+.datetime-input-listener {
+  caret-color: transparent;
+  height: 12px !important;
+}
+
+.main {
+  &::selection {
+    background-color: #ffffff4d;
+    border-radius: 1px;
+  }
+}
+
+.datetime-billing {
+  .datetime-separator {
+    order: 0;
+    margin-right: 0;
+    margin-left: 4px;
+  }
+
+  .datetime-cancel-button {
+    right: 4px;
+  }
+
+  .datetime-label {
+    left: 0;
+    font-weight: 600;
+    font-size: 11px;
+    color: var(--color-text-heading) !important;
+  }
+
+  .datetime-icon-container {
+    order: 2;
+  }
+
+  .datetime-input {
+    margin-left: auto;
+  }
+
+  .datetime-error-message {
+    bottom: 4px !important;
+    right: 32px !important;
+    transform: translateY(0) !important;
+  }
+
+  &.datetime-focus,
+  &.datetime-has-text {
+    .datetime-error-message {
+      opacity: 0 !important;
+    }
+  }
+
+  .datetime-dropdown-icon {
+    opacity: 0;
+  }
+
+  &:hover,
+  &.datetime-focus {
+    .datetime-icon {
+      opacity: 0;
+    }
+
+    .datetime-dropdown-icon {
+      opacity: 1;
+    }
+  }
+
+  &.datetime-has-text {
+    .datetime-dropdown-icon {
+      opacity: 0 !important;
+      pointer-events: none !important;
+    }
+
+    &:hover,
+    &.datetime-focus {
+      .datetime-icon-container {
+        pointer-events: none !important;
+        .datetime-icon {
+          opacity: 0 !important;
+        }
+      }
+    }
+  }
+}