ids-enterprise-wc 1.0.0-beta.10 → 1.0.0-beta.11

package/components/ids-popup-menu/ids-popup-menu.css

@@ -1,86 +0,0 @@
-.hide {
-  display: none;
-}
-
-@media all and (max-width: 1440px) {
-  .hide-xxl-down {
-    display: none;
-  }
-}
-
-@media all and (min-width: 1440px) {
-  .hide-xxl-up {
-    display: none;
-  }
-}
-
-@media all and (max-width: 1280px) {
-  .hide-xl-down {
-    display: none;
-  }
-}
-
-@media all and (min-width: 1280px) {
-  .hide-xl-up {
-    display: none;
-  }
-}
-
-@media all and (max-width: 1024px) {
-  .hide-lg-down {
-    display: none;
-  }
-}
-
-@media all and (min-width: 1024px) {
-  .hide-lg-up {
-    display: none;
-  }
-}
-
-@media all and (max-width: 840px) {
-  .hide-md-down {
-    display: none;
-  }
-}
-
-@media all and (min-width: 840px) {
-  .hide-md-up {
-    display: none;
-  }
-}
-
-@media all and (max-width: 600px) {
-  .hide-sm-down {
-    display: none;
-  }
-}
-
-@media all and (min-width: 600px) {
-  .hide-sm-up {
-    display: none;
-  }
-}
-
-@media all and (max-width: 360px) {
-  .hide-xs-down {
-    display: none;
-  }
-}
-
-@media all and (min-width: 360px) {
-  .hide-xs-up {
-    display: none;
-  }
-}
-
-@media all and (max-width: 600px) {
-  :host(.hide-sm-down) {
-    display: none;
-  }
-}
-
-.ids-popup-menu:not([hidden]) {
-  display: block;
-  z-index: var(--ids-z-index-popup);
-}

package/components/ids-process-indicator/ids-process-indicator.css

@@ -1,94 +0,0 @@
-@media (min-width: 360px) {
-  :host(.last) {
-    flex: 0;
-  }
-}
-@media (min-width: 840px) {
-  :host(.last) {
-    flex: 1;
-  }
-}
-
-:root {
-  display: flex;
-  flex: 1;
-  position: relative;
-}
-:host ::slotted(ids-text) {
-  color: var(--ids-process-indicator-label-text-color);
-}
-@media (min-width: 360px) {
-  :host .label {
-    display: none;
-  }
-  :host .details {
-    display: none;
-  }
-  :host .step {
-    margin-top: var(--ids-process-indicator-xs-step-margin-top);
-  }
-}
-@media (min-width: 840px) {
-  :host .details {
-    display: unset;
-  }
-  :host .label {
-    display: unset;
-  }
-  :host .step {
-    margin-top: unset;
-  }
-}
-
-::slotted(*) {
-  display: block;
-  margin: var(--ids-process-indicator-margin);
-}
-
-.ids-process-indicator-step ids-text::part(text) {
-  color: var(--ids-process-indicator-label-text-color);
-  margin: var(--ids-process-indicator-text-margin);
-}
-.ids-process-indicator-step ids-text.label {
-  margin: var(--ids-process-indicator-margin);
-  white-space: nowrap;
-}
-.ids-process-indicator-step .line {
-  position: absolute;
-  transform: var(--ids-process-indicator-line-transform);
-  height: var(--ids-process-indicator-line-height);
-  width: 100%;
-  background-color: var(--ids-process-indicator-line-background-color);
-}
-.ids-process-indicator-step .step {
-  display: flex;
-  transform: var(--ids-process-indicator-step-transform);
-  height: var(--ids-process-indicator-step-height);
-  width: var(--ids-process-indicator-step-width);
-  border-radius: var(--ids-process-indicator-step-border-radius);
-  background-color: var(--ids-process-indicator-bg-color);
-  border: 2px solid var(--ids-process-indicator-base-color);
-}
-
-:host([status=cancelled]) .step {
-  background-color: var(--ids-process-indicator-cancelled-step-background-color);
-  width: 18px;
-  height: 18px;
-  border: 0;
-  justify-content: center;
-}
-:host([status=cancelled]) .step ids-icon {
-  display: flex;
-  justify-content: center;
-  color: var(--ids-process-indicator-cancelled-step-icon-color);
-}
-
-:host([status=done]) .step {
-  border: var(--ids-process-indicator-done-border);
-  background-color: var(--ids-process-indicator-primary-color);
-}
-
-:host([status=started]) .step {
-  border: var(--ids-process-indicator-started-border);
-  background-color: var(--ids-process-indicator-bg-color);
-}

package/components/ids-progress-bar/ids-progress-bar.css

@@ -1,50 +0,0 @@
-/* Ids Progress Bar */
-:host-context(ids-data-grid-cell) {
-  margin: var(--ids-progress-bar-grid-cell-margin);
-}
-
-:root {
-  width: 100%;
-}
-
-.ids-progress-bar {
-  contain: content;
-}
-.ids-progress-bar .progress-label {
-  color: var(--ids-progress-bar-label-text-color);
-}
-.ids-progress-bar .progress-bar {
-  background-color: var(--ids-progress-bar-background-color);
-  border-radius: var(--ids-progress-bar-border-radius);
-  border: var(--ids-progress-bar-border);
-  height: var(--ids-progress-bar-height);
-  margin: var(--ids-progress-bar-margin);
-  width: 100%;
-}
-.ids-progress-bar .progress-bar::-webkit-progress-bar {
-  background-color: var(--ids-progress-bar-background-color);
-  border-radius: var(--ids-progress-bar-border-radius);
-}
-.ids-progress-bar .progress-bar::-webkit-progress-value {
-  background-color: var(--ids-progress-bar-fill-background-color);
-  border-radius: var(--ids-progress-bar-border-radius);
-  transition: width var(--ids-transition-length) var(--ids-transition-ease);
-}
-.ids-progress-bar .progress-bar::-moz-progress-bar {
-  background-color: var(--ids-progress-bar-fill-background-color);
-  border-radius: var(--ids-progress-bar-border-radius);
-  transition: width var(--ids-transition-length) var(--ids-transition-ease);
-}
-.ids-progress-bar.label-audible .progress-bar {
-  margin: var(--ids-progress-bar-label-audible-margin);
-}
-.ids-progress-bar.disabled .progress-label {
-  color: var(--ids-progress-bar-disabled-text-color);
-}
-.ids-progress-bar.disabled .progress-bar {
-  border-color: var(--ids-progress-bar-disabled-background-color);
-}
-.ids-progress-bar.disabled .progress-bar::-webkit-progress-value {
-  background-color: var(--ids-progress-bar-disabled-background-color);
-  border-color: var(--ids-progress-bar-disabled-background-color);
-}

package/components/ids-progress-chart/ids-progress-chart.css

@@ -1,75 +0,0 @@
-.ids-progress-chart {
-  contain: content;
-  display: flex;
-  flex-direction: column;
-  font-family: var(--ids-progress-chart-font-family);
-  margin: var(--ids-progress-chart-margin);
-}
-.ids-progress-chart .labels {
-  display: inline-flex;
-  flex-direction: row;
-  align-items: flex-end;
-  color: var(--ids-progress-chart-labels-text-color);
-  font-size: var(--ids-progress-chart-labels-font-size);
-  margin-bottom: var(--ids-progress-chart-labels-margin-bottom);
-  position: relative;
-  width: 100%;
-}
-.ids-progress-chart .labels .label-main {
-  display: inline-flex;
-  margin: var(--ids-progress-chart-labels-main-margin);
-}
-.ids-progress-chart .labels .label-main::part(text) {
-  color: currentColor;
-  font-family: inherit;
-  font-size: inherit;
-}
-.ids-progress-chart .labels .label-progress {
-  display: inline-flex;
-  margin: var(--ids-progress-chart-labels-progress-margin);
-}
-.ids-progress-chart .labels .label-progress::part(text) {
-  color: currentColor;
-  font-family: inherit;
-  font-size: inherit;
-}
-.ids-progress-chart .labels .label-end {
-  display: flex;
-  position: absolute;
-  top: 0;
-  height: 100%;
-  width: 100%;
-  justify-content: flex-end;
-}
-.ids-progress-chart .labels .label-total {
-  position: absolute;
-}
-.ids-progress-chart .labels .label-total::part(text) {
-  color: currentColor;
-  font-family: inherit;
-  font-size: inherit;
-}
-.ids-progress-chart .bar {
-  border-radius: var(--ids-progress-chart-bar-border-radius);
-  min-height: var(--ids-progress-chart-bar-min-height);
-  min-width: var(--ids-progress-chart-bar-min-width);
-  display: flex;
-  position: relative;
-}
-.ids-progress-chart .bar .bar-total {
-  background-color: var(--ids-progress-chart-bar-total-background-color);
-  border-radius: inherit;
-  display: flex;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: inherit;
-}
-.ids-progress-chart .bar .bar-progress {
-  background-color: var(--ids-progress-chart-bar-progress-background-color);
-  border-radius: inherit;
-  display: flex;
-  top: 0;
-  left: 0;
-  height: inherit;
-}

package/components/ids-radio/ids-radio.css

@@ -1,214 +0,0 @@
-/**
- * Radio Mixins.
- */
-.ids-radio {
-  outline: none;
-  margin-block-start: 8px;
-  margin-block-end: 8px;
-}
-.ids-radio label {
-  cursor: var(--ids-cursor-pointer);
-  position: relative;
-  padding-inline-start: 24px;
-  display: inline-block;
-  user-select: none;
-}
-.ids-radio.disabled label {
-  cursor: var(--ids-cursor-default);
-}
-.ids-radio.horizontal {
-  display: inline-block;
-  margin-inline-end: 12px;
-}
-.ids-radio input[type=radio] {
-  position: absolute;
-  cursor: var(--ids-cursor-pointer);
-  opacity: 0;
-  height: 0;
-  width: 0;
-}
-.ids-radio input[type=radio] ~ .circle {
-  position: absolute;
-  border: 1px solid var(--ids-radio-unchecked-border-color);
-  border-radius: var(--ids-radio-border-radius);
-  height: 14px;
-  left: 0;
-  top: 3px;
-  transition: border-color var(--ids-transition-length) var(--ids-transition-ease);
-  width: 14px;
-}
-.ids-radio input[type=radio] ~ .circle::after {
-  position: absolute;
-  background-color: var(--ids-radio-unchecked-background-color);
-  border: 1px solid var(--ids-radio-unchecked-background-color);
-  border-radius: var(--ids-radio-border-radius);
-  content: "";
-  height: 0;
-  left: 6px;
-  top: 6px;
-  transition: all var(--ids-transition-length) var(--ids-transition-ease);
-  width: 0;
-}
-.ids-radio input[type=radio].error ~ .circle {
-  border-color: var(--ids-color-error);
-}
-.ids-radio input[type=radio].error ~ .label-text {
-  color: var(--ids-color-error);
-}
-.ids-radio input[type=radio]:checked ~ .circle {
-  background-color: var(--ids-radio-checked-background-color);
-  border-color: var(--ids-radio-checked-border-color);
-}
-.ids-radio input[type=radio]:checked ~ .circle::after {
-  background-color: var(--ids-radio-checked-inner-background-color);
-  border-color: var(--ids-radio-checked-inner-background-color);
-  border-width: 2px;
-  height: 4px;
-  left: 3px;
-  top: 3px;
-  width: 4px;
-}
-.ids-radio input[type=radio]:focus ~ .circle {
-  box-shadow: var(--ids-box-shadow-md);
-}
-.ids-radio input[type=radio]:disabled ~ .circle {
-  border-color: var(--ids-radio-unchecked-disabled-border-color);
-  cursor: var(--ids-cursor-default);
-  box-shadow: none;
-  box-shadow: none;
-}
-.ids-radio input[type=radio]:disabled ~ .label-text {
-  cursor: var(--ids-cursor-default);
-  color: var(--ids-text-color-disabled);
-}
-.ids-radio input[type=radio]:disabled.error ~ .circle {
-  border-color: var(--ids-radio-unchecked-disabled-border-color);
-}
-.ids-radio input[type=radio]:disabled.error ~ .label-text {
-  color: var(--ids-radio-unchecked-disabled-border-color);
-}
-.ids-radio input[type=radio]:disabled:checked ~ .circle {
-  background-color: var(--ids-radio-checked-disabled-background-color);
-  border-color: var(--ids-radio-checked-disabled-border-color);
-}
-.ids-radio:focus input[type=radio] ~ .circle {
-  box-shadow: var(--ids-box-shadow-md);
-}
-.ids-radio[color=emerald] input[type=radio] ~ .circle {
-  border-color: var(--ids-color-emerald-70);
-}
-.ids-radio[color=emerald] input[type=radio]:checked ~ .circle {
-  background-color: var(--ids-color-emerald-70);
-}
-.ids-radio[color=emerald] input[type=radio]:disabled ~ .circle {
-  border-color: var(--ids-radio-unchecked-disabled-border-color);
-  cursor: var(--ids-cursor-default);
-  box-shadow: none;
-}
-.ids-radio[color=emerald] input[type=radio]:disabled:checked ~ .circle {
-  background-color: var(--ids-radio-checked-disabled-background-color);
-  border-color: var(--ids-radio-checked-disabled-border-color);
-}
-.ids-radio[color=emerald] input[type=radio]:focus ~ .circle {
-  box-shadow: 0 0 0 1px var(--ids-input-readonly-background-color), 0 0 0 2px var(--ids-color-emerald-70), 0 0 4px 5px var(--ids-input-readonly-background-color);
-}
-.ids-radio[color=emerald]:focus input[type=radio] ~ .circle {
-  box-shadow: 0 0 0 1px var(--ids-input-readonly-background-color), 0 0 0 2px var(--ids-color-emerald-70), 0 0 4px 5px var(--ids-input-readonly-background-color);
-}
-.ids-radio[color=amethyst] input[type=radio] ~ .circle {
-  border-color: var(--ids-color-amethyst-70);
-}
-.ids-radio[color=amethyst] input[type=radio]:checked ~ .circle {
-  background-color: var(--ids-color-amethyst-70);
-}
-.ids-radio[color=amethyst] input[type=radio]:disabled ~ .circle {
-  border-color: var(--ids-radio-unchecked-disabled-border-color);
-  cursor: var(--ids-cursor-default);
-  box-shadow: none;
-}
-.ids-radio[color=amethyst] input[type=radio]:disabled:checked ~ .circle {
-  background-color: var(--ids-radio-checked-disabled-background-color);
-  border-color: var(--ids-radio-checked-disabled-border-color);
-}
-.ids-radio[color=amethyst] input[type=radio]:focus ~ .circle {
-  box-shadow: 0 0 0 1px var(--ids-input-readonly-background-color), 0 0 0 2px var(--ids-color-amethyst-70), 0 0 4px 5px var(--ids-input-readonly-background-color);
-}
-.ids-radio[color=amethyst]:focus input[type=radio] ~ .circle {
-  box-shadow: 0 0 0 1px var(--ids-input-readonly-background-color), 0 0 0 2px var(--ids-color-amethyst-70), 0 0 4px 5px var(--ids-input-readonly-background-color);
-}
-.ids-radio[color=azure] input[type=radio] ~ .circle {
-  border-color: var(--ids-color-azure-70);
-}
-.ids-radio[color=azure] input[type=radio]:checked ~ .circle {
-  background-color: var(--ids-color-azure-70);
-}
-.ids-radio[color=azure] input[type=radio]:disabled ~ .circle {
-  border-color: var(--ids-radio-unchecked-disabled-border-color);
-  cursor: var(--ids-cursor-default);
-  box-shadow: none;
-}
-.ids-radio[color=azure] input[type=radio]:disabled:checked ~ .circle {
-  background-color: var(--ids-radio-checked-disabled-background-color);
-  border-color: var(--ids-radio-checked-disabled-border-color);
-}
-.ids-radio[color=azure] input[type=radio]:focus ~ .circle {
-  box-shadow: 0 0 0 1px var(--ids-input-readonly-background-color), 0 0 0 2px var(--ids-color-azure-70), 0 0 4px 5px var(--ids-input-readonly-background-color);
-}
-.ids-radio[color=azure]:focus input[type=radio] ~ .circle {
-  box-shadow: 0 0 0 1px var(--ids-input-readonly-background-color), 0 0 0 2px var(--ids-color-azure-70), 0 0 4px 5px var(--ids-input-readonly-background-color);
-}
-.ids-radio[color=amber] input[type=radio] ~ .circle {
-  border-color: var(--ids-color-amber-70);
-}
-.ids-radio[color=amber] input[type=radio]:checked ~ .circle {
-  background-color: var(--ids-color-amber-70);
-}
-.ids-radio[color=amber] input[type=radio]:disabled ~ .circle {
-  border-color: var(--ids-radio-unchecked-disabled-border-color);
-  cursor: var(--ids-cursor-default);
-  box-shadow: none;
-}
-.ids-radio[color=amber] input[type=radio]:disabled:checked ~ .circle {
-  background-color: var(--ids-radio-checked-disabled-background-color);
-  border-color: var(--ids-radio-checked-disabled-border-color);
-}
-.ids-radio[color=amber] input[type=radio]:focus ~ .circle {
-  box-shadow: 0 0 0 1px var(--ids-input-readonly-background-color), 0 0 0 2px var(--ids-color-amber-70), 0 0 4px 5px var(--ids-input-readonly-background-color);
-}
-.ids-radio[color=amber]:focus input[type=radio] ~ .circle {
-  box-shadow: 0 0 0 1px var(--ids-input-readonly-background-color), 0 0 0 2px var(--ids-color-amber-70), 0 0 4px 5px var(--ids-input-readonly-background-color);
-}
-.ids-radio[color=ruby] input[type=radio] ~ .circle {
-  border-color: var(--ids-color-ruby-70);
-}
-.ids-radio[color=ruby] input[type=radio]:checked ~ .circle {
-  background-color: var(--ids-color-ruby-70);
-}
-.ids-radio[color=ruby] input[type=radio]:disabled ~ .circle {
-  border-color: var(--ids-radio-unchecked-disabled-border-color);
-  cursor: var(--ids-cursor-default);
-  box-shadow: none;
-}
-.ids-radio[color=ruby] input[type=radio]:disabled:checked ~ .circle {
-  background-color: var(--ids-radio-checked-disabled-background-color);
-  border-color: var(--ids-radio-checked-disabled-border-color);
-}
-.ids-radio[color=ruby] input[type=radio]:focus ~ .circle {
-  box-shadow: 0 0 0 1px var(--ids-input-readonly-background-color), 0 0 0 2px var(--ids-color-ruby-70), 0 0 4px 5px var(--ids-input-readonly-background-color);
-}
-.ids-radio[color=ruby]:focus input[type=radio] ~ .circle {
-  box-shadow: 0 0 0 1px var(--ids-input-readonly-background-color), 0 0 0 2px var(--ids-color-ruby-70), 0 0 4px 5px var(--ids-input-readonly-background-color);
-}
-
-:host([dir=rtl]) input[type=radio] ~ .circle {
-  left: initial;
-  right: 0;
-}
-:host([dir=rtl]) label {
-  padding-right: 24px;
-  padding-left: 0;
-}
-:host([dir=rtl]) label.required .label-text::after {
-  right: initial;
-  left: -13px;
-}

package/components/ids-rating/ids-rating.css

@@ -1,53 +0,0 @@
-/* Ids Rating Component */
-.rating {
-  align-items: center;
-  display: inline-flex;
-  flex-direction: row;
-}
-.rating span {
-  display: none;
-}
-
-.star {
-  cursor: pointer;
-  margin-inline: var(--ids-rating-star-margin-inline);
-}
-
-.star[icon=star-outlined] {
-  color: var(--ids-rating-star-empty-color);
-}
-.star[icon=star-outlined]:hover {
-  color: var(--ids-rating-star-hover-color);
-}
-.star[icon=star-outlined]:focus-visible {
-  outline: none;
-  color: var(--ids-rating-star-focus-color);
-}
-
-.star[icon=star-filled] {
-  color: var(--ids-rating-star-color);
-}
-.star[icon=star-filled]:hover {
-  color: var(--ids-rating-star-hover-color);
-}
-.star[icon=star-filled]:focus-visible {
-  outline: none;
-  color: var(--ids-rating-star-focus-color);
-  color: black;
-}
-
-.star[icon=star-half] {
-  color: var(--ids-rating-star-color);
-}
-.star[icon=star-half]:hover {
-  color: var(--ids-rating-star-hover-color);
-}
-.star[icon=star-half]:focus-visible {
-  outline: none;
-  color: var(--ids-rating-star-focus-color);
-}
-
-:host([readonly]) .star {
-  cursor: default;
-  pointer-events: none;
-}

package/components/ids-scroll-view/ids-scroll-view.css

@@ -1,39 +0,0 @@
-/* Ids Scroll view Component */
-.ids-scroll-view {
-  display: flex;
-  outline: none;
-  overflow-x: scroll;
-  scroll-snap-type: x mandatory;
-  scroll-behavior: smooth;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-.ids-scroll-view::-webkit-scrollbar {
-  display: none;
-}
-.ids-scroll-view ::slotted([slot=scroll-view-item]) {
-  flex-shrink: 0;
-  scroll-snap-align: start;
-  width: 100%;
-}
-.ids-scroll-view ::slotted([slot=scroll-view-item]) > * {
-  display: block;
-  margin: 0;
-}
-
-.ids-scroll-view-controls {
-  display: flex;
-  justify-content: center;
-}
-.ids-scroll-view-controls.suppress-controls {
-  display: none;
-}
-.ids-scroll-view-controls .circle-button [icon] {
-  color: var(--ids-scroll-view-button-icon-color);
-}
-.ids-scroll-view-controls .circle-button.selected [icon] {
-  color: var(--ids-scroll-view-button-selected-icon-color);
-}
-.ids-scroll-view-controls .circle-button.selected [icon]::part(svg) {
-  fill: var(--ids-scroll-view-button-selected-icon-color);
-}