@dso-toolkit/core 59.0.1 → 61.0.0

package/dist/collection/components/date-picker/date-picker.css

@@ -5,26 +5,6 @@
   border-color: #ce3f51;
 }
 
-.dso-date *,
-.dso-date *::before,
-.dso-date *::after {
-  box-sizing: border-box;
-}
-
-.dso-date {
-  box-sizing: border-box;
-  color: #191919;
-  display: block;
-  font-family: "Asap", sans-serif;
-  margin: 0;
-  position: relative;
-  text-align: left;
-  width: 100%;
-}
-.dso-date:not(.dso-visible) .dso-date__dialog {
-  display: none;
-}
-
 .dso-date__input {
   display: block;
   width: 100%;
@@ -78,410 +58,9 @@
 .dso-date__input[size] {
   width: auto;
 }
-
-.dso-date__toggle {
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  -webkit-user-select: none;
-  align-items: center;
-  appearance: none;
-  background: transparent;
-  border: 0;
-  border-radius: 0;
-  border-bottom-right-radius: 4px;
-  border-top-right-radius: 4px;
-  color: #39870c;
-  cursor: pointer;
-  display: flex;
-  height: 38px;
-  justify-content: center;
-  padding: 0;
-  position: absolute;
-  right: 0;
-  transform: translateY(-50%);
-  top: 50%;
-  user-select: none;
-  width: 38px;
-  z-index: 101;
-}
-.dso-date__toggle:disabled {
-  color: #afcf9d;
-  cursor: default;
-}
-
-.dso-date__dialog {
-  border-width: 1px;
-  display: flex;
-  right: 0;
-  min-width: 320px;
-  opacity: 0;
-  position: absolute;
-  top: 100%;
-  transform: scale(0.96) translateZ(0) translateY(-20px);
-  transform-origin: top right;
-  transition: transform 300ms ease, opacity 300ms ease, visibility 300ms ease;
-  visibility: hidden;
-  will-change: transform, opacity, visibility;
-  z-index: 210;
-}
-@media (max-width: 35.9375em) {
-  .dso-date__dialog {
-    background: rgba(25, 25, 25, 0.5);
-    bottom: 0;
-    position: fixed;
-    left: 0;
-    right: 0;
-    top: 0;
-    transform: translateZ(0);
-    transform-origin: bottom center;
-  }
-}
-.dso-date__dialog.is-left {
-  left: -11px;
-  right: auto;
-  width: auto;
-}
-.dso-date__dialog.is-active {
-  opacity: 1;
-  transform: scale(1.0001) translateZ(0) translateY(0);
-  visibility: visible;
-}
-
-.dso-date__dialog-content {
-  background: #fff;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 4px;
-  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);
-  margin-left: auto;
-  margin-right: -1px;
-  margin-top: 8px;
-  max-width: 310px;
-  min-width: 290px;
-  padding: 16px;
+.dso-date__input::-webkit-calendar-picker-indicator {
   position: relative;
-  transform: none;
-  width: 100%;
-  z-index: 210;
-}
-@media (max-width: 35.9375em) {
-  .dso-date__dialog-content {
-    border: 0;
-    border-radius: 0;
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-    bottom: 0;
-    left: 0;
-    margin: 0;
-    max-width: none;
-    min-height: 26em;
-    opacity: 0;
-    padding: 0 8% 20px;
-    position: absolute;
-    transform: translateZ(0) translateY(100%);
-    transition: transform 400ms ease, opacity 400ms ease, visibility 400ms ease;
-    visibility: hidden;
-    will-change: transform, opacity, visibility;
-  }
-  .is-active .dso-date__dialog-content {
-    opacity: 1;
-    transform: translateZ(0) translateY(0);
-    visibility: visible;
-  }
-}
-
-.dso-date__table {
-  border-collapse: collapse;
-  border-spacing: 0;
-  color: #191919;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.25;
-  min-width: 280px;
-  table-layout: fixed;
-  text-align: center;
-  width: 100%;
-}
-
-.dso-date__table-header {
-  font-size: 0.875em;
-  font-weight: 600;
-  height: 36px;
-  line-height: 36px;
-  text-align: center;
-  text-decoration: none;
-  text-transform: uppercase;
-}
-
-.dso-date__cell {
-  height: 40px;
-  padding: 1px;
-  text-align: center;
-  width: 40px;
-}
-
-.dso-date__day {
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-  background: transparent;
-  border: 0;
-  border-radius: 50%;
-  box-shadow: 0 0 0 1px transparent;
-  color: #191919;
-  cursor: pointer;
-  display: inline-block;
-  font-family: "Asap", sans-serif;
-  font-variant-numeric: tabular-nums;
-  font-weight: 400;
-  height: 38px;
-  line-height: 0;
-  padding: 0;
-  position: relative;
-  text-align: center;
-  vertical-align: middle;
-  width: 38px;
-  z-index: 100;
-}
-.dso-date__day.is-today {
-  background: transparent;
-  height: 36px;
-  box-shadow: 0 0 0 1px #39870c;
-  width: 36px;
-}
-.dso-date__day:hover, .dso-date__day:active {
-  background: #39870c;
-  color: #fff;
-}
-.dso-date__day:focus {
-  background: transparent;
-  box-shadow: 0 0 0 2px #275937;
-  color: #191919;
-  height: 34px;
-  outline: 0;
-  width: 34px;
-}
-[aria-selected=true] .dso-date__day {
-  background: #39870c;
-  color: #fff;
-}
-[aria-selected=true] .dso-date__day:focus {
-  background: transparent;
-}
-[aria-selected=true] .dso-date__day:focus span[aria-hidden=true] {
-  background: #39870c;
-  border: 1px solid #fff;
-  line-height: 32px;
-}
-.dso-date__day:disabled {
-  background: #fff;
-  color: #ccc;
-  cursor: default;
-}
-.dso-date__day span[aria-hidden=true] {
-  border-radius: 50%;
-  display: inline-block;
-  height: 34px;
-  line-height: 34px;
-  width: 34px;
-}
-
-.dso-date__header {
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 16px;
-  width: 100%;
-}
-.dso-date__header span {
-  font-size: 0.875rem;
-}
-
-.dso-date__nav {
-  white-space: nowrap;
-}
-
-.dso-date__prev,
-.dso-date__next {
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  align-items: center;
-  appearance: none;
-  background: transparent;
-  border: 1px solid #39870c;
-  border-radius: 4px;
-  box-sizing: border-box;
-  color: #39870c;
-  cursor: pointer;
-  display: inline-flex;
-  font-size: 1em;
-  height: 32px;
-  justify-content: center;
-  margin-left: 8px;
-  padding: 0;
-  width: 32px;
-}
-@media (max-width: 35.9375em) {
-  .dso-date__prev,
-  .dso-date__next {
-    height: 40px;
-    width: 40px;
-  }
-}
-.dso-date__prev:hover, .dso-date__prev:active,
-.dso-date__next:hover,
-.dso-date__next:active {
-  background-color: #39870c;
-  color: #fff;
-}
-.dso-date__prev:focus,
-.dso-date__next:focus {
-  background: transparent;
-  color: #39870c;
-}
-.dso-date__prev:disabled, .dso-date__prev:disabled:hover,
-.dso-date__next:disabled,
-.dso-date__next:disabled:hover {
-  background-color: #fff;
-  border-color: #afcf9d;
-  color: #afcf9d;
-  opacity: 1;
-}
-.dso-date__prev svg,
-.dso-date__next svg {
-  margin: 0 auto;
-}
-
-.dso-date__select {
-  display: inline-flex;
-  height: 28px;
-  line-height: 28px;
-  position: relative;
-}
-.dso-date__select span {
-  margin-right: 4px;
-}
-.dso-date__select select {
-  color: #275937;
-  cursor: pointer;
-  font-size: 1rem;
-  height: 100%;
-  left: 0;
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  width: 100%;
-  z-index: 101;
-}
-.dso-date__select select:focus + .dso-date__select-label {
-  box-shadow: 0 0 0 2px #275937;
-}
-.dso-date__select select:disabled {
-  color: #afcf9d;
-}
-
-.dso-date__select-label {
-  align-items: center;
-  border-radius: 4px;
-  color: #39870c;
-  display: flex;
-  padding: 0 4px 0 8px;
-  pointer-events: none;
-  position: relative;
-  width: 100%;
-  z-index: 100;
-}
-.dso-date__select-label span {
-  font-size: 1.25rem;
-  font-weight: 600;
-  line-height: 1.25;
-}
-.dso-date__select-label svg {
-  width: 16px;
-  height: 16px;
-}
-
-.dso-date__mobile {
-  align-items: center;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-  display: flex;
-  font-size: 1em;
-  justify-content: space-between;
-  margin-bottom: 20px;
-  margin-left: -10%;
-  overflow: hidden;
-  padding: 12px 20px;
-  position: relative;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 120%;
-}
-@media (min-width: 36em) {
-  .dso-date__mobile {
-    border: 0;
-    margin: 0;
-    overflow: visible;
-    padding: 0;
-    position: absolute;
-    right: -16px;
-    top: -16px;
-    width: auto;
-  }
-}
-
-.dso-date__mobile-heading {
-  display: inline-block;
-  font-weight: 600;
-  max-width: 84%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-@media (min-width: 36em) {
-  .dso-date__mobile-heading {
-    display: none;
-  }
-}
-
-.dso-date__close {
-  -webkit-appearance: none;
-  align-items: center;
-  appearance: none;
-  background-color: #fff;
-  border: 0;
-  border-radius: 50%;
-  color: #39870c;
-  cursor: pointer;
-  display: flex;
-  font-size: 1em;
-  height: 32px;
-  justify-content: center;
-  margin-right: -4px;
-  padding: 0;
-  width: 32px;
-}
-@media (min-width: 36em) {
-  .dso-date__close {
-    margin-right: 0;
-    opacity: 0;
-  }
-}
-.dso-date__close:focus {
-  box-shadow: 0 0 0 2px #275937;
-  outline: none;
-}
-@media (min-width: 36em) {
-  .dso-date__close:focus {
-    opacity: 1;
-  }
-}
-
-.dso-date__vhidden {
-  border: 0;
-  clip: rect(1px, 1px, 1px, 1px);
-  height: 1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  top: 0;
-  width: 1px;
+  inset-inline-end: -8px;
+  font-size: 1.75rem;
+  filter: invert(50%) sepia(66%) saturate(6528%) hue-rotate(71deg) brightness(94%) contrast(91%);
 }

package/dist/collection/components/date-picker/date-picker.interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.interfaces.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["export type DsoDatePickerChangeEvent = {\r\n  component: \"dso-date-picker\";\r\n  valueAsDate: Date | undefined;\r\n  value: string;\r\n  error?: \"invalid\" | \"required\" | \"min-range\" | \"max-range\";\r\n};\r\n\r\nexport type DsoDatePickerFocusEvent = {\r\n  component: \"dso-date-picker\";\r\n};\r\n\r\nexport type DsoDatePickerKeyboardEvent = {\r\n  component: \"dso-date-picker\";\r\n  originalEvent: KeyboardEvent;\r\n};\r\n\r\nexport type DsoDatePickerDirection = \"left\" | \"right\";\r\n"]}
+{"version":3,"file":"date-picker.interfaces.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["export interface DatePickerChangeEvent {\r\n  originalEvent: Event;\r\n  component: \"dso-date-picker\";\r\n  valueAsDate: Date | undefined;\r\n  value: string;\r\n  error?: \"invalid\" | \"required\" | \"min-range\" | \"max-range\";\r\n}\r\n\r\nexport interface DatePickerFocusEvent {\r\n  originalEvent: FocusEvent;\r\n  component: \"dso-date-picker\";\r\n}\r\n\r\nexport interface DatePickerKeyboardEvent {\r\n  originalEvent: KeyboardEvent;\r\n  component: \"dso-date-picker\";\r\n}\r\n"]}