@3dsource/source-ui-native 0.0.1

package/src/lib/components/source-logo-loading/components/source-logo-loading.component.scss

@@ -0,0 +1,33 @@
+// source-logo-loading.component.scss
+.src-logo-loading {
+  --srcLogoLoadingSize: 40px;
+  --srcLogoLoadingStroke: var(--color-brand-500, #016ef8);
+  width: var(--srcLogoLoadingSize);
+  height: var(--srcLogoLoadingSize);
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  path {
+    stroke: var(--srcLogoLoadingStroke);
+    stroke-width: 1;
+    fill: none;
+    stroke-dasharray: 180;
+    stroke-dashoffset: 180;
+    animation: draw 3s linear infinite;
+  }
+}
+
+@keyframes draw {
+  0% {
+    stroke-dashoffset: 180;
+  }
+  50% {
+    stroke-dashoffset: 0;
+  }
+  100% {
+    stroke-dashoffset: 180;
+  }
+}

package/src/lib/components/source-logo-loading/components/source-logo-loading.component.ts

@@ -0,0 +1,21 @@
+import { NgStyle } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+
+@Component({
+  selector: 'src-logo-loading',
+  templateUrl: './source-logo-loading.component.html',
+  styleUrls: ['./source-logo-loading.component.scss'],
+  imports: [NgStyle],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SourceLogoLoadingComponent {
+  size = input(32);
+  strokeColor = input('var(--src-color-brand-500)');
+  testID = input('', { alias: 'data-testid' });
+}

package/src/lib/components/source-logo-loading/index.ts

@@ -0,0 +1 @@
+export * from './components/source-logo-loading.component';

package/src/lib/components/source-slider/components/source-slider.component.html

@@ -0,0 +1,38 @@
+<div
+  class="src-slider"
+  [style.--srcSliderThumbSize.px]="thumbSize"
+  [style.--srcSliderTrackHeight.px]="trackHeight"
+  [class.src-slider--disabled]="isDisabled"
+  [class.src-slider--vertical]="orientation === 'vertical'"
+  [attr.data-testid]="testID()"
+>
+  <input
+    type="range"
+    class="src-slider__input"
+    [id]="id"
+    [min]="min"
+    [max]="max"
+    [step]="step"
+    [disabled]="isDisabled"
+    [value]="value"
+    [attr.data-testid]="testID() + '-input'"
+    (change)="change($event)"
+    (input)="input($event)"
+  />
+  <div
+    class="src-slider__filled-track"
+    [style.width]="calculateFilledWidth()"
+  ></div>
+
+  <div class="src-slider__thumb" [style.left]="calculateThumbPosition()">
+    <ng-content select="[srcIconThumb]"></ng-content>
+  </div>
+
+  @if (showTicks) {
+    <div class="src-slider__ticks-container">
+      @for (tick of tickPositions; track tick) {
+        <div class="tick" [style.left]="tick"></div>
+      }
+    </div>
+  }
+</div>

package/src/lib/components/source-slider/components/source-slider.component.scss

@@ -0,0 +1,132 @@
+// source-slider.component.scss
+.src-slider {
+  position: relative;
+  --srcSliderThumbBackground: #fff;
+  --srcSliderThumbShadow:
+    0 0 0 2px #abb2be, 0 2px 0 2px #e6e7e7, 0 0 0 4px #fff;
+  --srcSliderThumbIconColor: var(--src-color-icon-default);
+  --srcSliderClickableTrackHeight: var(--srcSliderThumbSize);
+  --srcSliderTrackShape: 0px;
+  --srcSliderTrackBg: var(--src-color-border-default, #e5e7eb);
+  --srcSliderTrackFilledBg: transparent;
+  --srcSliderTickBg: var(--src-color-border-default, #e5e7eb);
+  --srcSliderTickWidth: 2px;
+  --srcSliderTickHeight: 10px;
+  --srcSliderTickShape: 50%;
+  display: flex;
+  align-items: center;
+
+  &--vertical {
+    //
+    // transform: rotate(-90deg);
+    // transform-origin: left bottom;
+  }
+
+  &--disabled {
+    pointer-events: none;
+    --srcSliderThumbShadow: 0 0 0 2px #d1d5db, 0 0 0 4px #fff;
+    --srcSliderTrackBg: #f1f2f3;
+  }
+
+  &:hover {
+    --srcSliderThumbShadow:
+      0 0 0 2px #6b7280, 0 2px 0 2px #e6e7e7, 0 0 0 4px #fff;
+  }
+
+  input.src-slider__input {
+    width: 100%;
+    height: var(--srcSliderClickableTrackHeight);
+    appearance: none;
+    background: transparent;
+    cursor: pointer;
+
+    &::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      width: 0;
+      height: 0;
+      border: 0;
+      background: transparent;
+    }
+
+    &::-moz-range-thumb {
+      width: 0;
+      height: 0;
+      border: 0;
+      background: transparent;
+    }
+
+    &::-webkit-slider-runnable-track {
+      width: 100%;
+      height: var(--srcSliderTrackHeight);
+      background: var(--srcSliderTrackBg);
+      border-radius: var(--srcSliderTrackShape);
+    }
+
+    &::-moz-range-track {
+      width: 100%;
+      height: var(--srcSliderTrackHeight);
+      background: var(--srcSliderTrackBg);
+      border-radius: var(--srcSliderTrackShape);
+    }
+
+    &::-ms-fill-lower {
+      background: var(--srcSliderTrackFilledBg);
+      border-radius: var(--srcSliderTrackShape);
+    }
+  }
+}
+
+.src-slider__thumb {
+  position: absolute;
+  top: 50%;
+  border-radius: 50%;
+  background: var(--srcSliderThumbBackground);
+  transform: translate(-50%, -50%);
+  width: var(--srcSliderThumbSize);
+  height: var(--srcSliderThumbSize);
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--srcSliderThumbIconColor);
+  cursor: pointer;
+  box-shadow: var(--srcSliderThumbShadow);
+  z-index: 1;
+  transition: all 0.35s ease;
+
+  & > [srcIconThumb] {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    pointer-events: none;
+  }
+}
+
+.src-slider__filled-track {
+  position: absolute;
+  top: 50%;
+  height: var(--srcSliderTrackHeight);
+  background: var(--srcSliderTrackFilledBg);
+  border-radius: var(--srcSliderTrackShape);
+  left: 0;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+.src-slider__ticks-container {
+  width: 100%;
+  position: absolute;
+  top: 50%;
+  height: 0;
+
+  .tick {
+    width: var(--srcSliderTickWidth);
+    height: var(--srcSliderTickHeight);
+    transform: translate(-50%, -50%);
+    position: absolute;
+    background: var(--srcSliderTickBg);
+    border-radius: var(--srcSliderTickShape);
+    top: 0;
+    pointer-events: none;
+  }
+}

package/src/lib/components/source-slider/components/source-slider.component.ts

@@ -0,0 +1,122 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+
+@Component({
+  selector: 'src-slider',
+  templateUrl: './source-slider.component.html',
+  styleUrls: ['./source-slider.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SourceSliderComponent implements AfterViewInit {
+  /**
+   * id of input to connect label and input[type=range]
+   */
+  @Input() id?: string;
+  /**
+   * The minimum value of the slider
+   */
+  @Input() min!: number;
+  /**
+   * The maximum value of the slider
+   */
+  @Input() max!: number;
+  /**
+   * The size of the thumb
+   */
+  @Input() thumbSize = 12;
+  /**
+   * The height of the visual track. Height of the input won't be affected
+   */
+  @Input() trackHeight = 2;
+  /**
+   * The step length of the slider
+   */
+  @Input() step = 1;
+  /**
+   * Whether to show the ticks on each step
+   */
+  @Input() showTicks = false;
+
+  /**
+   * If slider is disabled
+   */
+  @Input() isDisabled = false;
+  /**
+   * Slider orientation - WIP
+   */
+  @Input() orientation: 'horizontal' | 'vertical' = 'horizontal';
+
+  tickPositions: string[] = [];
+
+  /**
+   * The value of the slider
+   */
+  @Input() value!: number;
+  /**
+   * Test ID for the component. Provide descriptive uniq id in kebab-case.
+   */
+  testID = input('', { alias: 'data-testid' });
+  /**
+   * Emits the value of the slider when it changes
+   */
+  @Output() onChange = new EventEmitter<number>();
+  @Output() onInput = new EventEmitter<number>();
+
+  ngAfterViewInit() {
+    if (this.showTicks) {
+      this.calculateTickPositions();
+    }
+  }
+
+  input(valueEvent: Event) {
+    if (valueEvent.target instanceof HTMLInputElement) {
+      this.onInput.emit(this.getValue(valueEvent.target));
+    }
+  }
+
+  change(valueEvent: Event) {
+    if (valueEvent.target instanceof HTMLInputElement) {
+      this.onChange.emit(this.getValue(valueEvent.target));
+    }
+  }
+
+  calculateThumbPosition(): string {
+    const percent = ((this.value - this.min) * 100) / (this.max - this.min);
+    return isNaN(percent) ? '0%' : `${percent}%`;
+  }
+
+  calculateFilledWidth(): string {
+    const percent = ((this.value - this.min) / (this.max - this.min)) * 100;
+    return isNaN(percent) ? '0%' : `${percent}%`;
+  }
+
+  private getValue(value: HTMLInputElement) {
+    const newValue = value.valueAsNumber;
+    const steppedValue = Math.round(newValue / this.step) * this.step;
+    this.value = Math.min(Math.max(steppedValue, this.min), this.max);
+
+    return newValue;
+  }
+
+  private calculateTickPositions() {
+    const numberOfTicks = (this.max - this.min) / this.step;
+
+    this.tickPositions = Array.from(
+      { length: numberOfTicks + 1 },
+      (_, index) => {
+        const percent = (index / numberOfTicks) * 100;
+
+        return isNaN(percent) ? '0%' : `${percent}%`;
+      },
+    );
+  }
+}

package/src/lib/components/source-slider/index.ts

@@ -0,0 +1 @@
+export * from './components/source-slider.component';

package/src/lib/styles/base.scss

@@ -0,0 +1,68 @@
+// SourceUI Global Styles: base.scss
+// TODO: get rid of tags, subscitute them with classes
+
+.section_3dsourcecom,
+.cdk-overlay-container {
+  width: 100%;
+  height: 100%;
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
+    font-family: var(--src-font-family-sans);
+  }
+
+  code {
+    font-family: monospace;
+  }
+
+  // NEVER use user-select: none for ALL page!
+  // * {
+  //   user-select: none;
+  // }
+  button {
+    // safari adds unwanted margin-top and margin-bottom
+    margin: 0;
+    font-family: var(--src-font-family-sans);
+    border: none;
+    cursor: pointer;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  .src-select,
+  select,
+  .src-input,
+  input,
+  .src-textarea,
+  textarea {
+    // safari adds unwanted margin-top and margin-bottom
+    margin: 0;
+
+    &:focus-visible,
+    &:focus {
+      outline: none;
+    }
+  }
+
+  // accent-color property is available only for some inputs and progress
+  input[type='checkbox'],
+  input[type='radio'],
+  input [type='range'],
+  progress {
+    accent-color: var(--src-color-brand-500);
+  }
+
+  table,
+  .src-table {
+    border-spacing: 0;
+  }
+
+  p {
+    margin-top: 0;
+  }
+}

package/src/lib/styles/elements/_src-button.scss

@@ -0,0 +1,235 @@
+// source-button.component.scss
+.src-button {
+  --srcButtonBgColor: var(--src-color-bg-default, #fff);
+  --srcButtonBgHoverColor: var(--src-color-bg-default-hover, #f1f2f3);
+  --srcButtonBorderRadius: var(--src-br-small, 4px);
+  --srcButtonBoxShadow:
+    0px 0px 0px 1px var(--src-color-border-strong, #abb2be) inset,
+    0px 1px 0px 0px rgba(0, 0, 0, 0.05);
+  --srcButtonFontColor: var(--src-color-text-default);
+  --srcButtonFontSize: var(--src-fs-base, 16px);
+  --srcButtonFontWeight: var(--src-fw-medium, 500);
+  --srcButtonLineHeight: var(--src-lh-base, 20px);
+  --srcButtonPaddings: 8px 16px;
+  --srcButtonTextTransform: default;
+  --srcButtonWidth: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--srcButtonWidth);
+  padding: var(--srcButtonPaddings);
+  font-weight: var(--srcButtonFontWeight);
+  font-size: var(--srcButtonFontSize);
+  font-style: normal;
+  line-height: var(--srcButtonLineHeight);
+  text-align: center;
+  color: var(--srcButtonFontColor);
+  text-transform: var(--srcButtonTextTransform);
+  letter-spacing: 0;
+  white-space: nowrap;
+  background-color: var(--srcButtonBgColor);
+  border: none;
+  border-radius: var(--srcButtonBorderRadius);
+  box-shadow: var(--srcButtonBoxShadow);
+  cursor: pointer;
+
+  & > div,
+  & > span {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: auto;
+  }
+
+  &:active,
+  &--pressed {
+    background-color: var(--srcButtonBgHoverColor);
+  }
+
+  @media (pointer: fine) {
+    &:hover,
+    &:focus-visible {
+      background-color: var(--srcButtonBgHoverColor);
+    }
+  }
+
+  &:disabled,
+  &[disabled],
+  &.disabled {
+    cursor: default;
+    pointer-events: none;
+  }
+
+  // size
+  &--slim {
+    --srcButtonPaddings: 6px 12px;
+
+    &.src-button--icon-prefix {
+      --srcButtonPaddings: 6px 12px 6px 8px;
+    }
+  }
+
+  &--medium {
+    --srcButtonPaddings: 8px 16px;
+
+    &.src-button--icon-prefix {
+      --srcButtonPaddings: 8px 16px 8px 12px;
+    }
+  }
+
+  &--large {
+    --srcButtonPaddings: 12px 24px;
+
+    &.src-button--icon-prefix {
+      --srcButtonPaddings: 12px 24px 12px 20px;
+    }
+  }
+
+  &--primary {
+    --srcButtonBgColor: var(--src-color-bg-primary);
+    --srcButtonBgHoverColor: var(--src-color-bg-primary-hover);
+    --srcButtonBoxShadow:
+      0px 1px 0px 0px rgba(0, 0, 0, 0.08),
+      0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
+    --srcButtonFontColor: var(--src-color-text-inverse, #fff);
+
+    &:disabled,
+    &[disabled] {
+      --srcButtonBgColor: var(--src-color-bg-primary-disabled);
+      --srcButtonBoxShadow: none;
+      --srcButtonFontColor: var(--src-color-text-default-disabled);
+    }
+  }
+
+  &--secondary {
+    --srcButtonFontColor: var(--src-color-text-default);
+
+    &:disabled,
+    &[disabled] {
+      --srcButtonBgColor: var(--src-color-bg-default-disabled);
+      --srcButtonBoxShadow: none;
+      --srcButtonFontColor: var(--src-color-text-default-disabled);
+    }
+  }
+
+  &--destructive {
+    --srcButtonBgColor: var(--src-color-bg-critical);
+    --srcButtonBgHoverColor: var(--src-color-bg-critical-strong);
+    --srcButtonBoxShadow:
+      0px 1px 0px 0px rgba(0, 0, 0, 0.08),
+      0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
+    --srcButtonFontColor: var(--src-color-text-inverse, #fff);
+
+    &:disabled,
+    &[disabled] {
+      --srcButtonBgColor: var(--src-color-bg-primary-disabled);
+      --srcButtonBoxShadow: none;
+      --srcButtonFontColor: var(--src-color-text-default-disabled);
+    }
+  }
+
+  &--plain {
+    padding: 0;
+    --srcButtonBgColor: transparent;
+    --srcButtonBgHoverColor: transparent;
+    --srcButtonBoxShadow: none;
+
+    &:active,
+    &.src-button--pressed {
+      text-decoration: underline;
+    }
+
+    @media (pointer: fine) {
+      &:hover,
+      &:focus {
+        text-decoration: underline;
+      }
+    }
+    &:disabled,
+    &[disabled] {
+      --srcButtonFontColor: var(--src-color-text-default-disabled);
+    }
+
+    //colorScheme
+    &.src-button--primary {
+      --srcButtonFontColor: var(--src-color-text-primary);
+
+      &:active,
+      &--pressed {
+        --srcButtonFontColor: var(--src-color-text-primary);
+      }
+
+      @media (pointer: fine) {
+        &:hover,
+        &:focus {
+          --srcButtonFontColor: var(--src-color-text-primary);
+        }
+      }
+    }
+
+    &.src-button--destructive {
+      --srcButtonFontColor: var(--src-color-text-critical);
+
+      &:active,
+      &--pressed {
+        --srcButtonFontColor: var(--src-color-text-critical);
+      }
+
+      @media (pointer: fine) {
+        &:hover,
+        &:focus {
+          --srcButtonFontColor: var(--src-color-text-critical);
+        }
+      }
+    }
+
+    &.src-button--secondary {
+      --srcButtonFontColor: var(--src-color-text-default);
+    }
+
+    &.src-button--primary,
+    &.src-button--destructive,
+    &.src-button--secondary {
+      &:disabled,
+      &[disabled] {
+        --srcButtonBgColor: transparent;
+        --srcButtonFontColor: var(--src-color-text-default-disabled);
+      }
+    }
+  }
+
+  // full-width
+  &--full-width {
+    --srcButtonWidth: 100%;
+  }
+
+  &--icon-button {
+    --srcButtonIconColor: var(--src-color-icon-default);
+
+    .icon {
+      flex-shrink: 0;
+      color: var(--srcButtonIconColor);
+    }
+
+    &.src-button--primary,
+    &.src-button--destructive {
+      --srcButtonIconColor: var(--src-color-text-inverse);
+    }
+
+    &.src-button--secondary {
+      --srcButtonIconColor: var(--src-color-icon-default);
+    }
+
+    &.src-button--slim {
+      --srcButtonPaddings: 6px;
+    }
+
+    &.src-button--medium {
+      --srcButtonPaddings: 8px;
+    }
+
+    &.src-button--large {
+      --srcButtonPaddings: 12px;
+    }
+  }
+}