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

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

@@ -1,81 +0,0 @@
-// source-copyright.component.scss
-.src-copyright {
-  --srcCopyrightFontSize: 12px;
-  --srcCopyrightFontColor: var(--color-text-default, #1f2937);
-
-  &--collapsible {
-    --srcCopyrightSize: 32px;
-    --srcCopyrightBoxShadow:
-      0px 8px 20px 0px rgba(23, 24, 24, 0.12),
-      0px 3px 6px 0px rgba(23, 24, 24, 0.08);
-    --srcCopyrightExpandedWidth: 176px;
-  }
-}
-
-.src-link {
-  display: flex;
-  align-items: center;
-  font-size: var(--srcCopyrightFontSize);
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1;
-  color: var(--srcCopyrightFontColor);
-  text-decoration: none;
-  transition: all 0.3s ease-in-out;
-
-  &:hover {
-    text-decoration: underline;
-  }
-
-  .src-link__icon {
-    width: 16px;
-    height: 18px;
-  }
-
-  .src-link__text {
-    color: inherit;
-    padding-left: 8px;
-    padding-top: 1px;
-  }
-}
-
-.src-copyright--collapsible {
-  width: var(--srcCopyrightSize);
-  height: var(--srcCopyrightSize);
-
-  .src-link {
-    height: 100%;
-    width: var(--srcCopyrightSize);
-    border-radius: 8px;
-    text-decoration: none;
-    background: #fff;
-    box-shadow: var(--srcCopyrightBoxShadow);
-
-    &:hover {
-      width: var(--srcCopyrightExpandedWidth);
-
-      .src-link__text {
-        width: 100%;
-      }
-    }
-  }
-
-  .src-link__icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    width: var(--srcCopyrightSize);
-    height: var(--srcCopyrightSize);
-    padding: 7px;
-  }
-
-  .src-link__text {
-    flex-shrink: 0;
-    overflow: hidden;
-    white-space: nowrap;
-    padding: 0;
-    width: 0;
-    transition: width 0.3s ease-in-out;
-  }
-}

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

@@ -1,18 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-
-@Component({
-  selector: 'src-copyright',
-  templateUrl: './source-copyright.component.html',
-  styleUrls: ['./source-copyright.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class SourceCopyrightComponent {
-  linkText = input('Powered by 3D Source');
-  isCollapsible = input(false);
-}

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

@@ -1,5 +0,0 @@
-<hr
-  class="src-divider"
-  [style.--srcDividerColor]="thickness()"
-  [style.--srcDividerColor]="color()"
-/>

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

@@ -1,15 +0,0 @@
-// source-divider.component.scss
-.src-divider {
-  --srcDividerColor: var(--src-color-border-default, #e5e7eb);
-  --srcDividerHeight: 1px;
-  --srcDividerOffsetTop: 8px;
-  --srcDividerOffsetBottom: var(--srcDividerOffsetTop);
-  display: block;
-  width: 100%;
-  height: var(--srcDividerHeight);
-  margin-top: var(--srcDividerOffsetTop);
-  margin-bottom: var(--srcDividerOffsetBottom);
-  padding: 0;
-  background-color: var(--srcDividerColor);
-  border: none;
-}

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

@@ -1,18 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-
-@Component({
-  selector: 'src-divider',
-  templateUrl: './source-divider.component.html',
-  styleUrls: ['./source-divider.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class SourceDividerComponent {
-  color = input('#E5E7EB');
-  thickness = input('1px');
-}

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

@@ -1,8 +0,0 @@
-<p
-  class="src-hint"
-  [class.src-hint--error]="isError()"
-  [class.src-hint--compact]="isCompact()"
->
-  <ng-content select="[srcIconPrefix]"></ng-content>
-  <ng-content></ng-content>
-</p>

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

@@ -1,31 +0,0 @@
-// source-hint.component.scss
-.src-hint {
-  --srcHintColor: var(--src-color-icon-default, #6b7280);
-  --srcHintFontSize: var(--src-fs-base, 14px);
-  --srcHintLineHeight: var(--src-lh-base, 1.43);
-  --srcHintMargin: 4px 0 0;
-  --srcHintIconSize: 20px;
-  color: var(--srcHintColor);
-  font-size: var(--srcHintFontSize);
-  font-style: normal;
-  display: flex;
-  margin: var(--srcHintMargin);
-  font-weight: var(--src-fw-regular, 400);
-  line-height: var(--srcHintLineHeight);
-
-  & > [srcIconPrefix] {
-    width: var(--srcHintIconSize);
-    height: var(--srcHintIconSize);
-    margin-right: 4px;
-    color: currentColor;
-  }
-
-  &--error {
-    --srcHintColor: var(--src-color-text-critical, #9f200a);
-  }
-
-  &--compact {
-    --srcHintFontSize: var(--src-fs-small, 12px);
-    --srcHintMargin: 2px 0 0;
-  }
-}

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

@@ -1,18 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-
-@Component({
-  selector: 'src-hint',
-  templateUrl: './source-hint.component.html',
-  styleUrls: ['./source-hint.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class SourceHintComponent {
-  isError = input(false);
-  isCompact = input(false);
-}

package/src/lib/components/source-icon-button/components/source-icon-button.component.html

@@ -1,18 +0,0 @@
-<button
-  [type]="type"
-  [name]="name()"
-  class="src-icon-button"
-  [ngClass]="classes"
-  [disabled]="isDisabled()"
-  [attr.data-testid]="testID()"
-  (click)="handleClick($event)"
->
-  <ng-content></ng-content>
-
-  @if (counter()) {
-    <src-badge
-      [number]="counter()!"
-      [data-testid]="testID() + '-counter'"
-    ></src-badge>
-  }
-</button>

package/src/lib/components/source-icon-button/components/source-icon-button.component.scss

@@ -1,89 +0,0 @@
-// source-icon-button.component.scss
-button.src-icon-button {
-  --srcButtonBgColor: transparent;
-  --srcButtonBgHoverColor: var(--src-color-bg-default-hover);
-  --srcButtonIconColor: var(--src-color-icon-default);
-  --srcButtonBorderRadius: var(--src-br-small);
-  --srcButtonPaddings: 6px;
-  --srcButtonIconSize: 20px;
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: auto;
-  padding: var(--srcButtonPaddings);
-  color: var(--srcButtonIconColor);
-  background-color: var(--srcButtonBgColor);
-  border: none;
-  box-shadow: none;
-  border-radius: var(--srcButtonBorderRadius);
-  cursor: pointer;
-
-  & > src-badge {
-    position: absolute;
-    top: -7px;
-    right: -10px;
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    &:hover,
-    &:focus-visible {
-      --srcButtonBgColor: var(--srcButtonBgHoverColor);
-      --srcButtonIconColor: var(--src-color-icon-default-hover);
-    }
-  }
-
-  &:disabled,
-  &[disabled],
-  &.disabled {
-    cursor: default;
-    pointer-events: none;
-    --srcButtonBgColor: var(--src-color-bg-default);
-    --srcButtonIconColor: var(--src-color-icon-default-disabled);
-  }
-
-  &--round {
-    --srcButtonBgColor: var(--src-color-bg-strong-subdued);
-    --srcButtonBgHoverColor: var(--src-color-bg-strong-subdued-hover);
-    --srcButtonBorderRadius: 50%;
-  }
-
-  &--active {
-    --srcButtonBgColor: var(--src-color-bg-default-active);
-    --srcButtonIconColor: var(--src-color-icon-primary);
-
-    @media (hover: hover) and (pointer: fine) {
-      &:hover,
-      &:focus-visible {
-        --srcButtonBgColor: var(--src-color-bg-default-active);
-        --srcButtonIconColor: var(--src-color-icon-primary);
-      }
-    }
-  }
-
-  // size
-  &--xs {
-    --srcButtonPaddings: 1px;
-
-    & > :not(src-badge) {
-      width: 18px;
-      height: 18px;
-    }
-  }
-
-  &--sm {
-    --srcButtonPaddings: 2px;
-  }
-
-  &--default {
-    --srcButtonPaddings: 6px;
-  }
-
-  &--md {
-    --srcButtonPaddings: 8px;
-  }
-
-  &--lg {
-    --srcButtonPaddings: 12px;
-  }
-}

package/src/lib/components/source-icon-button/components/source-icon-button.component.ts

@@ -1,87 +0,0 @@
-import { NgClass } from '@angular/common';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  input,
-  Output,
-  ViewEncapsulation,
-} from '@angular/core';
-import {
-  SourceIconButtonShape,
-  SourceIconButtonShapeValues,
-  SourceIconButtonSize,
-  SourceIconButtonSizeValues,
-  SourceIconButtonType,
-  SourceIconButtonTypeValues,
-} from '../constants';
-import { SourceBadgeComponent } from '../../source-badge';
-
-@Component({
-  selector: 'src-icon-button',
-  templateUrl: './source-icon-button.component.html',
-  styleUrls: ['./source-icon-button.component.scss'],
-  imports: [NgClass, SourceBadgeComponent],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class SourceIconButtonComponent {
-  type = input<SourceIconButtonTypeValues>(SourceIconButtonType.BUTTON);
-  name = input<string | undefined>(undefined);
-  /**
-   * How big should it be?
-   */
-  size = input<SourceIconButtonSizeValues>(SourceIconButtonSize.DEFAULT);
-
-  /**
-   * Shape of a button
-   */
-  shape = input<SourceIconButtonShapeValues>(SourceIconButtonShape.SQUARE);
-  /**
-   * Use counter-attribute to display the counter in the top right corner of the button.
-   */
-  counter = input<number | undefined>(undefined);
-
-  /**
-   * Standard active state for the button
-   */
-  isActive = input(false);
-
-  /**
-   * Standard disabled state for button
-   */
-  isDisabled = input(false);
-  /**
-   * Test ID for the component. Provide descriptive uniq id in kebab-case.
-   */
-  testID = input('', { alias: 'data-testid' });
-  /**
-   * Optional click handler
-   */
-  @Output()
-  onClick = new EventEmitter<Event>();
-
-  compiledClassesList: string[] = [];
-
-  get classes() {
-    this.compiledClassesList = [];
-
-    this.compiledClassesList.push(`src-icon-button--${this.shape()}`);
-    this.compiledClassesList.push(`src-icon-button--${this.size()}`);
-    this.compiledClassesList.push(
-      this.isActive() ? 'src-icon-button--active' : '',
-    );
-
-    return this.compiledClassesList;
-  }
-
-  handleClick(event: Event) {
-    event.preventDefault();
-
-    if (event.currentTarget instanceof HTMLButtonElement) {
-      event.currentTarget.blur();
-    }
-
-    this.onClick.emit(event);
-  }
-}

package/src/lib/components/source-icon-button/constants/sourceIconButtonShape.ts

@@ -1,7 +0,0 @@
-export const SourceIconButtonShape = {
-  SQUARE: 'square',
-  ROUND: 'round',
-} as const;
-
-export type SourceIconButtonShapeValues =
-  (typeof SourceIconButtonShape)[keyof typeof SourceIconButtonShape];

package/src/lib/components/source-icon-button/constants/sourceIconButtonSize.ts

@@ -1,10 +0,0 @@
-export const SourceIconButtonSize = {
-  XSMALL: 'xs',
-  SMALL: 'sm',
-  MEDIUM: 'md',
-  LARGE: 'lg',
-  DEFAULT: 'default',
-} as const;
-
-export type SourceIconButtonSizeValues =
-  (typeof SourceIconButtonSize)[keyof typeof SourceIconButtonSize];

package/src/lib/components/source-icon-button/constants/sourceIconButtonType.ts

@@ -1,8 +0,0 @@
-export const SourceIconButtonType = {
-  BUTTON: 'button',
-  SUBMIT: 'submit',
-  RESET: 'reset',
-} as const;
-
-export type SourceIconButtonTypeValues =
-  (typeof SourceIconButtonType)[keyof typeof SourceIconButtonType];

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

@@ -1,40 +0,0 @@
-<div class="src-loading-container" [attr.data-testid]="testID()">
-  <svg
-    [ngClass]="classes"
-    class="src-loading"
-    [attr.width]="size"
-    [attr.height]="size"
-    [attr.viewBox]="getViewBox()"
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    style="transform: rotate(-90deg)"
-    [style.--srcLoadingSize]="size"
-  >
-    <!-- Background circle -->
-    @if (progress) {
-      <circle
-        [attr.r]="calculateRadius()"
-        [attr.cx]="size / 2"
-        [attr.cy]="size / 2"
-        fill="transparent"
-        [attr.stroke]="backgroundStrokeColor"
-        [attr.stroke-width]="strokeWidth"
-        [attr.stroke-dasharray]="getCircumference()"
-        stroke-dashoffset="0"
-      ></circle>
-    }
-
-    <!-- Filled circle -->
-    <circle
-      [attr.r]="calculateRadius()"
-      [attr.cx]="size / 2"
-      [attr.cy]="size / 2"
-      [attr.stroke]="progressStrokeColor"
-      [attr.stroke-width]="strokeWidth"
-      [attr.stroke-linecap]="lineCap"
-      [attr.stroke-dashoffset]="progress ? getPercentage() : 0"
-      fill="transparent"
-      [attr.stroke-dasharray]="progress ? getCircumference() : ''"
-    ></circle>
-  </svg>
-</div>

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

@@ -1,62 +0,0 @@
-// source-loading.component.scss
-:host {
-  display: block;
-}
-.src-loading-container {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-}
-
-.src-loading {
-  position: relative;
-  display: inline-block;
-}
-
-// Default loader animation
-.src-loading--animation {
-  animation: 1.4s linear 0s infinite normal none running rotate;
-
-  circle {
-    transform-origin: 50% 50%;
-    stroke-dasharray:
-      calc(var(--srcLoadingSize) * 2 * 1px),
-      calc(var(--srcLoadingSize) * 5 * 1px);
-    stroke-dashoffset: 0;
-    animation: 1.6s ease-in-out 0s infinite normal none running spinner;
-  }
-}
-
-@keyframes rotate {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes spinner {
-  0% {
-    stroke-dasharray: 1px, calc(var(--srcLoadingSize) * 5 * 1px);
-    stroke-dashoffset: 0;
-  }
-
-  50% {
-    stroke-dasharray:
-      calc(var(--srcLoadingSize) * 2.5 * 1px),
-      calc(var(--srcLoadingSize) * 5 * 1px);
-    stroke-dashoffset: calc(var(--srcLoadingSize) * 0.4 * -1px);
-  }
-
-  100% {
-    stroke-dasharray:
-      calc(var(--srcLoadingSize) * 2.5 * 1px),
-      calc(var(--srcLoadingSize) * 5 * 1px);
-    stroke-dashoffset: calc(var(--srcLoadingSize) * 3 * -1px);
-  }
-}

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

@@ -1,79 +0,0 @@
-import { NgClass } from '@angular/common';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import {
-  SourceLoadingLineCap,
-  SourceLoadingLineCapValues,
-} from '../constants/sourceLoadingLineCap';
-
-@Component({
-  selector: 'src-loading',
-  templateUrl: './source-loading.component.html',
-  styleUrls: ['./source-loading.component.scss'],
-  imports: [NgClass],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class SourceLoadingComponent {
-  /**
-   * Size of the loading circle
-   */
-  @Input() size = 32;
-  /**
-   * If it just an animated circle or circular progressbar
-   */
-  @Input() progress?: number | null = null;
-
-  /**
-   * The stroke-linecap attribute is a presentation attribute defining the shape to be used at the end of open subpaths when they are stroked.
-   */
-  @Input() lineCap: SourceLoadingLineCapValues = SourceLoadingLineCap.ROUND;
-  /**
-   * Color of the strokes
-   */
-  @Input() backgroundStrokeColor = 'transparent';
-  @Input() progressStrokeColor = 'var(--src-color-brand-500, #017BFF)';
-  /**
-   * Width of the line
-   */
-  @Input() strokeWidth = 3;
-  /**
-   * Test ID for the component. Provide descriptive uniq id in kebab-case.
-   */
-  testID = input('', { alias: 'data-testid' });
-
-  compiledClassesList: string[] = [];
-
-  get classes(): string[] {
-    this.compiledClassesList = [];
-
-    if (this.progress !== null) {
-      this.compiledClassesList.push(`src-loading--progress`);
-    } else {
-      this.compiledClassesList.push(`src-loading--animation`);
-    }
-
-    return this.compiledClassesList;
-  }
-
-  calculateRadius() {
-    return this.size / 2 - this.strokeWidth / 2;
-  }
-
-  getCircumference() {
-    return 2 * Math.PI * this.calculateRadius();
-  }
-
-  getViewBox() {
-    return `0 0 ${this.size} ${this.size}`;
-  }
-
-  getPercentage() {
-    return Math.round(this.getCircumference() * ((100 - this.progress!) / 100));
-  }
-}

package/src/lib/components/source-loading/constants/sourceLoadingLineCap.ts

@@ -1,7 +0,0 @@
-export const SourceLoadingLineCap = {
-  ROUND: 'round',
-  SQUARE: 'square',
-  BUTT: 'butt',
-} as const;
-export type SourceLoadingLineCapValues =
-  (typeof SourceLoadingLineCap)[keyof typeof SourceLoadingLineCap];

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

@@ -1,23 +0,0 @@
-<div
-  class="src-logo-loading"
-  [attr.data-testid]="testID()"
-  [ngStyle]="{
-    '--srcLogoLoadingSize': size() + 'px',
-    '--srcLogoLoadingStroke': strokeColor(),
-  }"
->
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="40"
-    height="40"
-    fill="none"
-    viewBox="0 0 40 40"
-  >
-    <path
-      d="M36.482 12.662v4.466c-1.092-.61-4.316-2.42-7.512-4.213l-5.236-2.938-1.717-.964-.48-.27-.126-.07-.033-.019-.008-.004-.002-.001-.245.435.244-.436a2.552 2.552 0 0 0-.71-.29 2.162 2.162 0 0 0-.758-.015l-.024.003-.024.005c-.49.113-.837.345-1.057.638a1.354 1.354 0 0 0-.275.838c.015.527.4 1.002.988 1.313.643.388 4.642 2.71 8.484 4.937l5.25 3.042 1.703.986.475.275.125.072.032.018.008.005.002.001.25-.432-.25.433.01.005c.477.262.868.868.868 1.673v5.681c-.039 1.216-.675 2.086-1.478 2.553l-.002.001-4.222 2.482v-6.197c.043-.907-.147-1.642-.525-2.236-.375-.589-.909-.998-1.489-1.3l-15.143-8.783c-.324-.195-.572-.42-.74-.689-.167-.266-.272-.6-.272-1.045V5.395a.511.511 0 0 1 .014-.206.122.122 0 0 1 .025-.04.332.332 0 0 1 .087-.064l.006-.004 4.791-2.78.008-.004c.874-.528 1.675-.758 2.433-.762.758-.005 1.512.217 2.293.652l12.45 7.22.003.002c.623.356 1.077.785 1.37 1.301.293.515.445 1.15.41 1.952Z"
-    />
-    <path
-      d="M3.518 27.338v-4.466c1.092.61 4.316 2.42 7.512 4.213l5.236 2.938 1.717.964.48.27.126.07.033.018.008.005.002.001.245-.435-.244.436c.24.134.464.238.71.29.253.055.494.05.758.015l.024-.003.024-.005c.49-.113.837-.345 1.057-.638.213-.286.281-.598.275-.838-.015-.527-.4-1.002-.988-1.313-.643-.388-4.642-2.71-8.484-4.937l-5.25-3.042-1.703-.986-.475-.275-.125-.072-.032-.018-.008-.005-.002-.001-.25.432.25-.433-.01-.005c-.477-.262-.868-.868-.868-1.673v-5.681c.04-1.216.675-2.086 1.478-2.553l.002-.001 4.222-2.482v6.197c-.043.907.147 1.642.525 2.236.375.589.909.998 1.489 1.3l15.143 8.783c.324.195.572.42.74.689.166.266.272.6.272 1.045v7.227a.511.511 0 0 1-.015.206.122.122 0 0 1-.024.04.334.334 0 0 1-.086.064l-.007.004-4.791 2.78-.008.004c-.874.528-1.675.758-2.433.762-.758.005-1.512-.217-2.293-.652L5.3 30.593l-.003-.002c-.623-.356-1.077-.785-1.37-1.301-.293-.515-.445-1.15-.41-1.952Z"
-    />
-  </svg>
-</div>

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

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