@dso-toolkit/core 49.0.2 → 50.0.0

package/dist/collection/components/list-button/list-button.css

@@ -0,0 +1,563 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.dso-manual-input-button {
+  cursor: text;
+}
+
+.dso-tertiary {
+  display: inline-block;
+  font-size: 1em;
+  font-weight: 500;
+  margin-bottom: 0;
+  text-decoration: none;
+  touch-action: manipulation;
+  text-align: left;
+  user-select: none;
+  vertical-align: middle;
+  border: 0;
+  color: #39870c;
+  line-height: 1;
+  padding: 0;
+  background-color: transparent;
+  cursor: pointer;
+}
+.dso-tertiary:focus, .dso-tertiary:focus-visible {
+  outline-offset: 2px;
+}
+.dso-tertiary:active {
+  outline: 0;
+}
+.dso-tertiary[disabled] {
+  color: #afcf9d;
+}
+.dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {
+  color: #39870c;
+}
+.dso-tertiary:not([disabled]):hover {
+  color: #676cb0;
+  text-decoration: underline;
+  text-underline-position: under;
+}
+.dso-tertiary:not([disabled]):active {
+  color: #676cb0;
+}
+.dso-tertiary.btn-align {
+  line-height: calc(1.5em - 1px);
+  padding: 11px 0;
+  position: relative;
+}
+.dso-tertiary.dso-spinner-left::before {
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  height: 24px;
+  vertical-align: middle;
+  width: 24px;
+  margin-right: 8px;
+}
+.dso-tertiary.dso-spinner-right::after {
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  height: 24px;
+  vertical-align: middle;
+  width: 24px;
+  margin-left: 8px;
+}
+.dso-tertiary dso-icon + span:not(.sr-only),
+.dso-tertiary svg.di + span:not(.sr-only),
+.dso-tertiary span:not(.sr-only) + dso-icon,
+.dso-tertiary span:not(.sr-only) + svg.di {
+  margin-left: 8px;
+}
+.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),
+.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),
+.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,
+.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {
+  margin-left: 4px;
+}
+.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),
+.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),
+.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),
+.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),
+.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,
+.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,
+.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],
+.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {
+  margin-left: 0;
+}
+.dso-tertiary dso-icon,
+.dso-tertiary svg.di,
+.dso-tertiary span {
+  vertical-align: middle;
+}
+
+.dso-input-number:not(.form-group) {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+}
+.dso-input-number label {
+  width: 100%;
+}
+.dso-input-number .dso-input-step-counter {
+  align-self: center;
+  background-color: transparent;
+  border: 0;
+  display: inline-block;
+  height: 1.5rem;
+  text-align: center;
+  width: 1.5rem;
+}
+.dso-input-number .dso-input-step-counter:focus, .dso-input-number .dso-input-step-counter:active {
+  outline: 0;
+}
+.dso-input-number .dso-input-step-counter::-webkit-outer-spin-button, .dso-input-number .dso-input-step-counter::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.dso-input-number .dso-input-step-counter[type=number] {
+  -moz-appearance: textfield;
+}
+
+.dso-btn-group {
+  display: flex;
+  flex-direction: row;
+}
+.dso-btn-group.dso-disabled > * {
+  background-color: #fff;
+  border-color: #e5e5e5;
+  color: #666;
+  pointer-events: none;
+}
+.dso-btn-group > * {
+  border-radius: 0;
+}
+.dso-btn-group > *:first-child {
+  border-radius: 4px 0 0 4px;
+}
+.dso-btn-group > *:not(:first-child) {
+  border-left-style: none !important;
+}
+.dso-btn-group > *:last-child {
+  border-radius: 0 4px 4px 0;
+}
+.dso-btn-group > *:only-child {
+  border-radius: 4px;
+}
+.dso-btn-group > .dso-input-number {
+  background-color: #fff;
+  border-color: #ccc;
+  color: #191919;
+  border-style: solid;
+  border-width: 1px;
+  flex-wrap: nowrap;
+  padding: 0 16px;
+}
+@media screen and (max-width: 767px) {
+  .dso-btn-group > .dso-input-number {
+    justify-content: center;
+  }
+}
+.dso-btn-group > *:hover + .dso-input-number,
+.dso-btn-group > *:focus + .dso-input-number {
+  background-color: #fff;
+  border-color: #39870c;
+  color: #191919;
+}
+.dso-btn-group > *.dso-selected + .dso-input-number {
+  background-color: #fff;
+  border-color: #39870c;
+  color: #191919;
+  border-width: 1px;
+  outline: 1px solid #39870c;
+}
+.dso-btn-group > *:active + .dso-input-number, .dso-btn-group > *:active + .dso-input-number:hover,
+.dso-btn-group > *.active + .dso-input-number,
+.dso-btn-group > *.active + .dso-input-number:hover {
+  background-color: #fff;
+  border-color: #39870c;
+  color: #191919;
+}
+.dso-btn-group > *.disabled + .dso-input-number, .dso-btn-group > *.disabled + .dso-input-number:hover,
+.dso-btn-group > *[disabled] + .dso-input-number,
+.dso-btn-group > *[disabled] + .dso-input-number:hover {
+  background-color: #fff;
+  border-color: #ccc;
+  color: #666;
+  opacity: 1;
+}
+.dso-btn-group .dso-list-button {
+  padding-right: 15px;
+}
+@media screen and (max-width: 767px) {
+  .dso-btn-group {
+    flex-direction: column;
+  }
+  .dso-btn-group > *:first-child {
+    border-radius: 4px 4px 0 0;
+  }
+  .dso-btn-group > *:not(:first-child) {
+    border-left-style: solid !important;
+    border-top-style: none !important;
+  }
+  .dso-btn-group > *:last-child {
+    border-radius: 0 0 4px 4px;
+  }
+  .dso-btn-group > *:only-child {
+    border-radius: 4px;
+  }
+}
+
+.dso-selectable {
+  position: relative;
+  padding: 0 0 0 32px;
+}
+.dso-selectable .dso-selectable-options {
+  list-style: none;
+  margin-top: 8px;
+  padding-left: 0;
+}
+.dso-selectable .dso-selectable-options li + li {
+  margin-top: 8px;
+}
+.dso-selectable label {
+  font-weight: 400;
+  line-height: 24px;
+  margin: 0;
+}
+.dso-selectable input[type=checkbox][disabled] + label::before, .dso-selectable input[type=checkbox][disabled]:active + label::before, .dso-selectable input[type=checkbox][disabled]:focus + label::before,
+.dso-selectable input[type=radio][disabled] + label::before,
+.dso-selectable input[type=radio][disabled]:active + label::before,
+.dso-selectable input[type=radio][disabled]:focus + label::before {
+  background-color: #fff;
+  box-shadow: 0 0 0 2px #e5e5e5;
+}
+.dso-selectable input[type=checkbox],
+.dso-selectable input[type=radio] {
+  height: 24px;
+  left: 0;
+  margin: 0;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  width: 24px;
+  z-index: 100;
+  zoom: 1;
+}
+@media (prefers-contrast: more) {
+  .dso-selectable input[type=checkbox],
+.dso-selectable input[type=radio] {
+    opacity: 1;
+  }
+}
+.dso-selectable input[type=checkbox]:not([disabled]),
+.dso-selectable input[type=radio]:not([disabled]) {
+  cursor: pointer;
+}
+.dso-selectable input[type=checkbox] + label,
+.dso-selectable input[type=radio] + label {
+  display: inline;
+  font-style: normal;
+  padding-left: 0;
+}
+.dso-selectable input[type=checkbox] + label::before,
+.dso-selectable input[type=radio] + label::before {
+  background: #fff;
+  border: 0;
+  box-shadow: 0 0 0 2px var(--dso-selectable-color, #275937);
+  content: "";
+  height: 20px;
+  left: 2px;
+  position: absolute;
+  top: 2px;
+  width: 20px;
+}
+.dso-selectable input[type=checkbox]:focus,
+.dso-selectable input[type=radio]:focus {
+  outline: 0;
+}
+.dso-selectable input[type=checkbox]:focus + label::before,
+.dso-selectable input[type=radio]:focus + label::before {
+  box-shadow: 0 0 0 3px var(--dso-selectable-color, #275937);
+  height: 18px;
+  left: 3px;
+  top: 3px;
+  width: 18px;
+}
+.dso-selectable input[type=checkbox]:active + label::before, .dso-selectable input[type=checkbox].active + label::before,
+.dso-selectable input[type=radio]:active + label::before,
+.dso-selectable input[type=radio].active + label::before {
+  background-color: #ebf3e6;
+  box-shadow: 0 0 0 1px #275937;
+  height: 22px;
+  left: 1px;
+  top: 1px;
+  width: 22px;
+}
+.dso-selectable input[type=checkbox] + label::before {
+  border-radius: 4px;
+}
+.dso-selectable input[type=checkbox] + label::after {
+  background: transparent;
+  content: "";
+  left: 6px;
+  opacity: 0;
+  position: absolute;
+  top: 6px;
+  zoom: 1;
+}
+.dso-selectable input[type=checkbox]:checked + label::after, .dso-selectable input[type=checkbox]:indeterminate + label::after {
+  opacity: 1;
+}
+.dso-selectable input[type=checkbox]:checked + label::after {
+  border: solid;
+  border-color: var(--dso-selectable-color, #39870c);
+  border-top-color: transparent;
+  border-width: 0 0 3px 3px;
+  height: 8px;
+  transform: rotate(-45deg);
+  width: 13px;
+}
+.dso-selectable input[type=checkbox]:indeterminate + label::after {
+  background-color: var(--dso-selectable-color, #39870c);
+  height: 12px;
+  width: 12px;
+}
+.dso-selectable input[type=radio] + label::before {
+  border-radius: 50%;
+}
+.dso-selectable input[type=radio] + label::after {
+  background-color: transparent;
+  border-radius: 50%;
+  content: "";
+  height: 12px;
+  left: 6px;
+  opacity: 0;
+  position: absolute;
+  top: 6px;
+  width: 12px;
+  zoom: 1;
+}
+.dso-selectable input[type=radio]:checked + label::after {
+  background-color: var(--dso-selectable-color, #39870c);
+  opacity: 1;
+}
+.dso-selectable > dso-info {
+  float: none;
+  margin: 8px 16px 0 -32px;
+  width: calc(100% + 32px);
+}
+.dso-selectable label {
+  font-weight: 700;
+}
+
+.dso-list-button {
+  display: inline-block;
+  font-size: 1em;
+  font-weight: 500;
+  margin-bottom: 0;
+  text-decoration: none;
+  touch-action: manipulation;
+  text-align: left;
+  user-select: none;
+  vertical-align: middle;
+  background-color: #fff;
+  border-color: #ccc;
+  color: #191919;
+  border-radius: 4px;
+  border-width: 1px;
+  border-style: solid;
+  font-weight: 600;
+  padding: 15px 47px 15px 15px;
+  position: relative;
+  text-align: left;
+  white-space: normal;
+  width: 100%;
+}
+.dso-list-button:focus, .dso-list-button:focus-visible {
+  outline-offset: 2px;
+}
+.dso-list-button:active {
+  outline: 0;
+}
+.dso-list-button:hover, .dso-list-button:focus {
+  background-color: #fff;
+  border-color: #39870c;
+  color: #191919;
+}
+.dso-list-button:active, .dso-list-button:active:hover, .dso-list-button.active, .dso-list-button.active:hover {
+  background-color: #fff;
+  border-color: #39870c;
+  color: #191919;
+}
+.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {
+  background-color: #fff;
+  border-color: #ccc;
+  color: #666;
+  opacity: 1;
+}
+.dso-list-button.dso-selected {
+  border-color: #39870c;
+  border-width: 1px;
+  outline: 1px solid #39870c;
+}
+.dso-list-button.dso-selected.dso-single-count {
+  position: relative;
+}
+.dso-list-button.dso-selected.dso-single-count::after {
+  background-color: #fff;
+  bottom: 0;
+  content: "";
+  display: inline-block;
+  position: absolute;
+  right: -2px;
+  top: 0;
+  width: 2px;
+}
+.dso-list-button > span {
+  display: block;
+}
+.dso-list-button .dso-sublabel {
+  font-weight: 400;
+  width: 100%;
+}
+.dso-list-button .dso-subcontent {
+  color: #666;
+  font-weight: 400;
+  padding: 16px 0 0 16px;
+}
+.dso-list-button .dso-subcontent mark {
+  background-color: transparent;
+  color: #666;
+  font-weight: 700;
+  padding: 0;
+}
+.dso-list-button dso-icon,
+.dso-list-button svg.di,
+.dso-list-button .dso-count {
+  height: 24px;
+  position: absolute;
+  right: 15px;
+  top: 15px;
+  width: 24px;
+}
+.dso-list-button dso-icon,
+.dso-list-button svg.di {
+  color: #39870c;
+  page-break-before: always;
+}
+.dso-list-button .dso-count {
+  font-weight: 700;
+}
+@media screen and (max-width: 767px) {
+  .dso-list-button.dso-selected.dso-single-count::after {
+    width: 0;
+  }
+}
+.dso-list-button .dso-sublabel {
+  padding-left: 32px;
+}
+.dso-list-button .dso-subcontent {
+  padding-left: 48px;
+  padding-top: 8px;
+}
+
+.dso-list-button + .dso-list-button,
+.dso-list-button + .dso-btn-group,
+.dso-btn-group + .dso-list-button,
+.dso-btn-group + .dso-btn-group {
+  margin-top: 4px;
+}
+
+.dso-input-wrapper {
+  position: relative;
+}
+.dso-input-wrapper .form-control {
+  width: 9ch;
+}
+
+.form-control {
+  display: block;
+  width: 100%;
+  height: 40px;
+  padding: 6px 14px;
+  font-size: 1rem;
+  line-height: 1.5;
+  color: #191919;
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #275937;
+  border-radius: 4px;
+  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+}
+.form-control::-moz-placeholder {
+  color: #666;
+  opacity: 1;
+}
+.form-control:-ms-input-placeholder {
+  color: #666;
+}
+.form-control::-webkit-input-placeholder {
+  color: #666;
+}
+.form-control::-ms-expand {
+  background-color: transparent;
+  border: 0;
+}
+.form-control:focus {
+  border-color: #275937;
+  outline: 0;
+  box-shadow: inset 0 0 0 1px #275937;
+}
+.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
+  background-color: #fff;
+  opacity: 1;
+}
+.form-control[disabled], fieldset[disabled] .form-control {
+  cursor: default;
+}
+.form-control[disabled] {
+  border-color: #e5e5e5;
+  color: #999;
+}
+.form-control[readonly] {
+  border-width: 1px;
+}
+.form-control[type=text] {
+  line-height: 40px;
+}
+.form-control[size] {
+  width: auto;
+}
+
+.dso-manual-input-button[type=button] {
+  background-color: transparent;
+  border: 0;
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.hidden {
+  display: none !important;
+}

package/dist/collection/components/list-button/list-button.interfaces.js

@@ -0,0 +1 @@
+export {};