ngx-strata 0.1.0

package/assets/styles/components/number-display.scss

@@ -0,0 +1,25 @@
+st-number-display {
+  --st-number-display-color-positive: rgb(89, 204, 89);
+  --st-number-display-color-negatve: red;
+  font-weight: 500;
+  white-space: nowrap;
+
+  .integer-number {
+    font-size: 1rem;
+  }
+
+  .positive {
+    color: var(--st-number-display-color-positive);
+  }
+
+  .negative {
+    color: var(--st-number-display-color-negatve);
+  }
+
+  .decimal-number {
+    &.deemphasize {
+      opacity: 0.8;
+      font-size: 0.8rem;
+    }
+  }
+}

package/assets/styles/components/overlay.scss

@@ -0,0 +1,3 @@
+.full-anchor-width {
+  width: var(--st-overlay-anchor-element-width) !important;
+}

package/assets/styles/components/pagination.scss

@@ -0,0 +1,28 @@
+st-pagination {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  gap: 8px;
+
+  button {
+    padding: 8px 12px;
+    background: none;
+    border: none;
+    border-radius: 8px;
+
+    &.clickable:not(.selected):not(:disabled):hover {
+      background-color: whitesmoke;
+      cursor: pointer;
+    }
+
+    &.selected {
+      background-color: black;
+      color: white;
+      cursor: default;
+    }
+
+    &:disabled.hideOnDisabled {
+      visibility: hidden;
+    }
+  }
+}

package/assets/styles/components/progress.scss

@@ -0,0 +1,118 @@
+st-progress {
+  --st-progress-fill-color: var(--st-text);
+  --st-progress-radial-size: 120px;
+  --st-progress-radial-half-size: calc(var(--st-progress-radial-size) / 2);
+  --st-progress-radial-stroke-width: 10px;
+  --st-progress-radial-radius: calc((var(--st-progress-radial-size) - var(--st-progress-radial-stroke-width)) / 2);
+  --st-progress-radial-circumference: calc(2 * pi * var(--st-progress-radial-radius));
+  --st-progress-radial-dash-offset: calc(
+    var(--st-progress-radial-circumference) * (1 - var(--st-progress-percentage) / 100)
+  );
+
+  &.linear {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+  }
+
+  &.radial {
+    text-align: center;
+    .label {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  &.st-theme-brand {
+    --st-progress-fill-color: var(--st-brand);
+  }
+
+  &.st-theme-info {
+    --st-progress-fill-color: var(--st-info);
+  }
+
+  &.st-theme-success {
+    --st-progress-fill-color: var(--st-success);
+  }
+
+  &.st-theme-warning {
+    --st-progress-fill-color: var(--st-warning);
+  }
+
+  &.st-theme-danger {
+    --st-progress-fill-color: var(--st-danger);
+  }
+
+  .linear-container {
+    position: relative;
+    width: 100%;
+    height: var(--st-size-xxs);
+    background: var(--st-bg-light);
+    border-radius: var(--st-border-radius-sm);
+    overflow: hidden;
+  }
+
+  .linear-bar {
+    height: 100%;
+    background: var(--st-progress-fill-color);
+    border-radius: var(--st-border-radius-sm);
+
+    transition: width 0.2s ease;
+  }
+
+  &.grow-left {
+    .linear-bar {
+      margin-left: auto;
+    }
+
+    .progress {
+      transform-origin: center;
+      transform: scaleY(-1);
+    }
+  }
+
+  .label {
+    font-size: var(--st-font-sm);
+    font-weight: 600;
+  }
+
+  .radial-container {
+    position: relative;
+    display: inline-block;
+    width: var(--st-progress-radial-size);
+    height: var(--st-progress-radial-size);
+  }
+
+  svg {
+    transform: rotate(-90deg);
+  }
+
+  circle {
+    fill: none;
+    cx: var(--st-progress-radial-half-size);
+    cy: var(--st-progress-radial-half-size);
+    r: var(--st-progress-radial-radius);
+  }
+
+  .background {
+    stroke: var(--st-bg-light);
+    stroke-width: var(--st-progress-radial-stroke-width);
+  }
+
+  .progress {
+    stroke: var(--st-progress-fill-color);
+    transition: stroke-dashoffset 0.2s ease;
+    cx: var(--st-progress-radial-half-size);
+    cy: var(--st-progress-radial-half-size);
+    stroke-width: var(--st-progress-radial-stroke-width);
+    r: var(--st-progress-radial-radius);
+    stroke-dasharray: var(--st-progress-radial-circumference);
+    stroke-dashoffset: var(--st-progress-radial-dash-offset);
+  }
+}

package/assets/styles/components/segmented-control.scss

@@ -0,0 +1,49 @@
+st-segmented-control {
+  display: flex;
+  position: relative;
+  border-radius: var(--st-border-radius-sm);
+  box-sizing: border-box;
+  background-color: var(--st-bg-light);
+  width: fit-content;
+  height: var(--st-interactive-element-height-md);
+
+  button,
+  st-segmented-control-item {
+    border: none;
+    color: var(--st-text);
+    background-color: transparent;
+
+    &[disabled] {
+      pointer-events: none;
+      color: var(--st-text-faded);
+      cursor: unset;
+    }
+
+    &:hover:not([disabled]) {
+      cursor: pointer;
+      background-color: var(--st-bg-contrast-dark);
+      color: var(--st-text-contrast);
+    }
+  }
+
+  .selection-item,
+  st-segmented-control-item {
+    height: var(--st-interactive-element-height-md);
+    padding: 8px 16px;
+    border-radius: var(--st-border-radius-sm);
+    font-size: 16px;
+    font-weight: 500;
+    user-select: none;
+  }
+
+  #selection-indicator {
+    cursor: default;
+    position: absolute;
+    background-color: var(--st-bg-contrast-light);
+    color: var(--st-text-contrast);
+    text-wrap: nowrap;
+    transition:
+      0.15s ease-in margin-left,
+      0.15s ease-in width;
+  }
+}

package/assets/styles/components/select.scss

@@ -0,0 +1,127 @@
+st-dropdown {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  &.sm .dropdown-input {
+    height: var(--st-interactive-element-height-sm);
+    font-size: var(--st-font-sm);
+    st-icon {
+      width: var(--st-icon-size-xs);
+      height: var(--st-icon-size-xs);
+    }
+  }
+
+  &.md .dropdown-input {
+    height: var(--st-interactive-element-height-md);
+  }
+
+  &.lg .dropdown-input {
+    height: var(--st-interactive-element-height-lg);
+  }
+
+  .dropdown-input {
+    padding-left: var(--st-size-xs);
+    padding-right: var(--st-size-xs);
+    border: 1px solid var(--st-border);
+    border-radius: var(--st-border-radius-sm);
+    min-width: 128px;
+    width: 100%;
+    user-select: none;
+    position: relative;
+    box-sizing: border-box;
+    display: inline-flex;
+    flex-direction: row;
+    gap: 4px;
+    background-color: var(--st-bg);
+    justify-content: space-between;
+    align-items: center;
+
+    .placeholder-text {
+      color: var(--st-text-faded);
+    }
+
+    st-icon {
+      width: var(--st-icon-size-sm);
+      height: var(--st-icon-size-sm);
+    }
+    &:hover {
+      background-color: var(--st-bg-light);
+    }
+
+    &:has(.dropdown-selector:hover) {
+      background-color: unset;
+    }
+
+    .dropdown-selector[data-show] {
+      height: unset;
+      visibility: visible;
+    }
+
+    .dropdown-selector {
+      border: 1px solid var(--st-border);
+      border-radius: var(--st-border-radius-sm);
+      width: max-content;
+      visibility: hidden;
+      position: absolute;
+      user-select: none;
+      top: 0;
+      left: 0;
+      box-sizing: border-box;
+      overflow: hidden;
+      background-color: var(--st-bg);
+      box-shadow: var(--st-shadow-1);
+      z-index: 1000;
+
+      .dropdown-item {
+        padding: 8px;
+        margin: 4px;
+        border-radius: 4px;
+      }
+
+      .dropdown-item:hover {
+        background-color: var(--st-bg-light);
+      }
+    }
+  }
+}
+
+.dropdown-selector {
+  border: 1px solid var(--st-border);
+  border-radius: var(--st-border-radius-sm);
+  width: max-content;
+  position: absolute;
+  user-select: none;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  overflow: hidden;
+  background-color: var(--st-bg);
+  box-shadow: var(--st-shadow-1);
+  z-index: 1000;
+
+  .dropdown-item {
+    padding: 8px;
+    margin: 4px;
+    border-radius: 4px;
+  }
+
+  .dropdown-item:hover {
+    background-color: var(--st-bg-light);
+  }
+
+  st-input-field {
+    padding: var(--st-size-xxs);
+
+    st-button {
+      visibility: hidden;
+      &.visible {
+        visibility: visible;
+      }
+    }
+  }
+}
+
+.dropdown-selector.full-width {
+  width: var(--st-overlay-anchor-element-width);
+}

package/assets/styles/components/slider.scss

@@ -0,0 +1,127 @@
+st-slider {
+  --st-slider-track-height: var(--st-size-xxs);
+  --st-slider-track-color: var(--st-bg-light);
+  --st-slider-thumb-size: var(--st-size-sm);
+  --st-slider-thumb-color: var(--st-bg-contrast);
+  --st-slider-tick-color: var(--st-border);
+  --st-slider-tick-width: 1px;
+  width: 100%;
+  height: var(--st-slider-thumb-size);
+
+  /* slider track */
+  .range-wrapper input[type='range']::-webkit-slider-runnable-track {
+    -webkit-appearance: none;
+    appearance: none;
+
+    height: var(--st-slider-track-height);
+    border-radius: var(--st-border-radius-sm);
+    background-color: var(--st-slider-track-color);
+  }
+
+  .range-wrapper input[type='range']::-moz-range-track {
+    -webkit-appearance: none;
+    appearance: none;
+
+    height: var(--st-slider-track-height);
+    border-radius: var(--st-border-radius-sm);
+    background-color: var(--st-slider-track-color);
+  }
+
+  .range-wrapper.stepped input[type='range']::-webkit-slider-runnable-track {
+    -webkit-appearance: none;
+    appearance: none;
+    background-image:
+    /* repeating ticks */
+      linear-gradient(
+        to right,
+        var(--st-slider-tick-color) 0,
+        var(--st-slider-tick-color) var(--st-slider-tick-width),
+        transparent var(--st-slider-tick-width)
+      ),
+      /* base track fill */ linear-gradient(var(--st-slider-track-color), var(--st-slider-track-color));
+
+    background-size:
+      var(--st-slider-interval-px) 100%,
+      100% 100%;
+
+    background-position:
+      var(--st-slider-thumb-offset) 0,
+      0 0;
+
+    background-repeat: repeat-x, no-repeat;
+  }
+
+  .range-wrapper.stepped input[type='range']::-moz-range-track {
+    -webkit-appearance: none;
+    appearance: none;
+    background-image:
+         /* repeating ticks */
+      linear-gradient(
+        to right,
+        var(--st-slider-tick-color) 0,
+        var(--st-slider-tick-color) var(--st-slider-tick-width),
+        transparent var(--st-slider-tick-width)
+      ),
+      /* base track fill */ linear-gradient(var(--st-slider-track-color), var(--st-slider-track-color));
+
+    background-size:
+      var(--st-slider-interval-px) 100%,
+      100% 100%;
+
+    background-position:
+      var(--st-slider-thumb-offset) 0,
+      0 0;
+
+    background-repeat: repeat-x, no-repeat;
+  }
+
+  /* slider thumb */
+  input[type='range']::-webkit-slider-thumb {
+    -webkit-appearance: none; /* Override default look */
+    appearance: none;
+    margin-top: calc(var(--st-slider-track-height) * -0.5); /* Centers thumb on the track */
+    background-color: var(--st-slider-thumb-color);
+    border-radius: 50%;
+    height: var(--st-slider-thumb-size);
+    width: var(--st-slider-thumb-size);
+  }
+
+  input[type='range']::-moz-range-thumb {
+    -webkit-appearance: none;
+    /* Override default look */
+    appearance: none;
+    margin-top: calc(var(--st-slider-track-height) * -1);
+    /* Centers thumb on the track */
+    background-color: var(--st-slider-thumb-color);
+    border-radius: 50%;
+    height: var(--st-slider-thumb-size);
+    width: var(--st-slider-thumb-size);
+  }
+
+  input[type='range']:focus::-moz-range-thumb {
+    outline: var(--st-focus-ring-width) var(--st-focus-ring-style) var(--st-focus-ring-color);
+    outline-offset: var(--st-focus-ring-offset);
+  }
+
+  input[type='range']:focus::-webkit-slider-thumb {
+    outline: var(--st-focus-ring-width) var(--st-focus-ring-style) var(--st-focus-ring-color);
+    outline-offset: var(--st-focus-ring-offset);
+  }
+
+  .range-wrapper input[type='range'] {
+    height: var(--st-slider-thumb-size);
+    -webkit-appearance: none;
+    appearance: none;
+    background: transparent;
+    cursor: pointer;
+    width: 100%;
+    margin: 0;
+    position: relative;
+    z-index: 2;
+  }
+
+  /* Removes default focus */
+  input[type='range']:focus {
+    outline: none;
+  }
+}

package/assets/styles/components/spinner.scss

@@ -0,0 +1,93 @@
+st-spinner {
+  --st-spinner-size: var(--st-size-xl);
+  --st-spinner-stroke-width: var(--st-size-xxxxs);
+  --st-spinner-main-color: var(--st-text-faded);
+  --st-spinner-accent-color: var(--st-text);
+  --st-spinner-inner-width: calc(var(--st-spinner-size) - (var(--st-spinner-stroke-width) * 4));
+
+  display: flex;
+  justify-items: center;
+  align-items: center;
+
+  &.xs {
+    --st-spinner-size: var(--st-size-md);
+    --st-spinner-stroke-width: var(--st-size-xxxxs);
+  }
+
+  &.sm {
+    --st-spinner-size: var(--st-size-lg);
+    --st-spinner-stroke-width: var(--st-size-xxxxs);
+  }
+
+  &.lg {
+    --st-spinner-size: var(--st-size-xxl);
+    --st-spinner-stroke-width: var(--st-size-xxxs);
+  }
+
+  &.st-theme-brand {
+    --st-spinner-accent-color: var(--st-brand);
+  }
+
+  &.st-theme-info {
+    --st-spinner-accent-color: var(--st-info);
+  }
+
+  &.st-theme-success {
+    --st-spinner-accent-color: var(--st-success);
+  }
+
+  &.st-theme-warning {
+    --st-spinner-accent-color: var(--st-warning);
+  }
+
+  &.st-theme-danger {
+    --st-spinner-accent-color: var(--st-danger);
+  }
+  .st-spinner {
+    width: var(--st-spinner-size);
+    height: var(--st-spinner-size);
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    border: var(--st-spinner-stroke-width) solid;
+    border-color: var(--st-spinner-main-color) var(--st-spinner-main-color) transparent;
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
+  }
+
+  .st-spinner::after {
+    content: '';
+    box-sizing: border-box;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    border: var(--st-spinner-stroke-width) solid;
+    border-color: transparent var(--st-spinner-accent-color) var(--st-spinner-accent-color);
+    width: var(--st-spinner-inner-width);
+    height: var(--st-spinner-inner-width);
+    border-radius: 50%;
+    animation: rotationBack 0.5s linear infinite;
+    transform-origin: center center;
+  }
+
+  @keyframes rotation {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes rotationBack {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(-360deg);
+    }
+  }
+}

package/assets/styles/components/table.scss

@@ -0,0 +1,66 @@
+table.st-table {
+  --st-table-background-color: var(transparent);
+  --st-table-background-color-even-row: var(--st-bg);
+  --st-table-divider-color: var(--st-border-faded);
+
+  width: 100%;
+  text-align: left;
+  border-collapse: collapse;
+  background-color: var(--st-table-background-color);
+
+  thead tr {
+    background-color: var(--st-table-background-color-even-row);
+    border-bottom: 1px solid var(--st-border-muted);
+
+    th {
+      font-weight: var(--st-font-weight-bold);
+      color: var(--st-text-muted);
+      font-size: var(--st-font-sm);
+      padding: var(--st-size-xxxs);
+      padding-bottom: var(--st-size-xxs);
+      padding-top: var(--st-size-xs);
+
+      &:first-of-type {
+        padding-left: var(--st-size-xs);
+      }
+      &:last-of-type {
+        padding-left: var(--st-size-xs);
+      }
+    }
+  }
+
+  tbody tr {
+    border-bottom: 1px solid var(--st-table-divider-color);
+
+    td {
+      padding: var(--st-size-xxxs);
+      padding-top: var(--st-size-xs);
+      padding-bottom: var(--st-size-xs);
+      font-size: var(--st-font-md);
+
+      &:first-of-type {
+        padding-left: var(--st-size-xs);
+      }
+      &:last-of-type {
+        padding-left: var(--st-size-xs);
+      }
+    }
+  }
+
+  &.tight tbody tr td {
+    padding-top: var(--st-size-xxxs);
+    padding-bottom: var(--st-size-xxxs);
+  }
+}
+
+st-card {
+  &.with-padding table.st-table {
+    margin: calc(var(--st-size-xs) * -1);
+    width: calc(var(--st-size-xs) + var(--st-size-xs) + 100%);
+  }
+
+  &:not(.outline) table.st-table {
+    --st-table-background-color-even-row: var(--st-bg-light);
+    --st-table-divider-color: var(--st-border-muted);
+  }
+}

package/assets/styles/components/tag.scss

@@ -0,0 +1,60 @@
+st-tag {
+  --st-tag-border-color: var(--st-divider);
+  --st-tag-background-color: var(--st-bg-light);
+  --st-tag-text-color: var(--st-text);
+  color: var(--st-tag-text-color);
+  border: 1px solid var(--st-tag-border-color);
+  border-radius: var(--st-border-radius-sm);
+  background-color: var(--st-tag-background-color);
+  width: max-content;
+  height: fit-content;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+
+  &.sm {
+    padding: 0 8px;
+    height: var(--st-size-sm);
+    border-radius: var(--st-size-xxs);
+    font-size: 10px;
+  }
+
+  &.md {
+    padding: 0 10px;
+    font-size: 12px;
+    height: var(--st-size-md);
+    border-radius: var(--st-size-xs);
+  }
+
+  &.lg {
+    padding: 0 12px;
+    font-size: 14px;
+    height: var(--st-size-lg);
+    border-radius: var(--st-size-sm);
+  }
+
+  &.st-theme-brand {
+    --st-tag-background-color: var(--st-brand);
+    --st-tag-text-color: var(--st-text-contrast);
+  }
+
+  &.st-theme-info {
+    --st-tag-background-color: var(--st-info);
+    --st-tag-text-color: var(--st-text-contrast);
+  }
+
+  &.st-theme-success {
+    --st-tag-background-color: var(--st-success);
+    --st-tag-text-color: var(--st-text-contrast);
+  }
+
+  &.st-theme-danger {
+    --st-tag-background-color: var(--st-danger);
+    --st-tag-text-color: var(--st-text-contrast);
+  }
+
+  &.st-theme-warning {
+    --st-tag-background-color: var(--st-warning);
+    --st-tag-text-color: var(--st-text-contrast);
+  }
+}