@3dsource/source-ui-native 0.0.1 → 1.0.1

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

@@ -1,21 +0,0 @@
-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-slider/components/source-slider.component.html

@@ -1,38 +0,0 @@
-<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

@@ -1,132 +0,0 @@
-// 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

@@ -1,122 +0,0 @@
-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/styles/base.scss

@@ -1,68 +0,0 @@
-// 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

@@ -1,235 +0,0 @@
-// 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;
-    }
-  }
-}

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

@@ -1,83 +0,0 @@
-.src-input {
-  --srcInputFontSize: var(--src-fs-base);
-  --srcInputLineHeight: var(--src-lh-base);
-  --srcInputFontColor: var(--src-color-text-default);
-  --srcInputFieldBg: var(--src-color-bg-default);
-  --srcInputFieldBorderColor: var(--src-color-border-strong);
-  --srcInputHeight: 36px;
-  --srcInputBorderRadius: var(--src-br-small);
-  --srcInputBoxShadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
-  // Focus ring it's a multiple box-shadow
-  --srcInputFocusRing:
-    0 0 0 1px #fff, 0 0 0 3px var(--src-color-border-primary);
-  position: relative;
-
-  height: var(--srcInputHeight);
-  border-radius: var(--srcInputBorderRadius);
-  font-size: var(--srcInputFontSize);
-  line-height: var(--srcInputLineHeight);
-  color: var(--srcInputFontColor);
-  padding: 7px 12px;
-  font-family: var(--src-font-family-sans);
-  font-style: normal;
-  font-weight: var(--src-fw-regular, 400);
-  background-color: var(--srcInputFieldBg);
-  border: 1px solid var(--srcInputFieldBorderColor);
-  box-shadow: var(--srcInputBoxShadow);
-  display: flex;
-  align-items: center;
-
-  width: 100%;
-  &[type='number'] {
-    -moz-appearance: textfield;
-  }
-
-  // Remove default background for autofilled inputs
-  &:-webkit-autofill,
-  &:-webkit-autofill:focus {
-    transition:
-      background-color 0s 600000s,
-      color 0s 600000s;
-  }
-
-  &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-
-  &:focus {
-    outline: none;
-    box-shadow: var(--srcInputFocusRing);
-  }
-
-  &[disabled],
-  &:disabled {
-    --srcInputFieldBg: var(--src-color-bg-default-disabled);
-    --srcInputFieldBorderColor: var(--src-color-border-strong-disabled);
-    --srcInputBoxShadow: none;
-    color: var(--src-color-text-default-disabled);
-
-    pointer-events: none;
-  }
-}
-
-.src-input--compact {
-  --srcInputHeight: 32px;
-  --srcInputFontSize: var(--src-fs-small);
-  --srcInputLineHeight: var(--src-lh-small);
-}
-/* Error State */
-.src-input--has-error {
-  --srcInputFieldBg: var(--src-color-bg-critical-subdued);
-  --srcInputFieldBorderColor: var(--src-color-border-critical-strong);
-}
-
-/* Disabled State */
-.src-input--disabled {
-  --srcInputFieldBg: var(--src-color-bg-default-disabled);
-  --srcInputFieldBorderColor: var(--src-color-border-strong-disabled);
-  --srcInputBoxShadow: none;
-
-  pointer-events: none;
-}