@3dsource/source-ui-native 0.0.1

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

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

@@ -0,0 +1,18 @@
+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-copyright/index.ts

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

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

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

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

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

@@ -0,0 +1,18 @@
+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-divider/index.ts

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

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

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

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

@@ -0,0 +1,18 @@
+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-hint/index.ts

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

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

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

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

@@ -0,0 +1,87 @@
+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/index.ts

@@ -0,0 +1,3 @@
+export * from './sourceIconButtonSize';
+export * from './sourceIconButtonType';
+export * from './sourceIconButtonShape';

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

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

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

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

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

@@ -0,0 +1,2 @@
+export * from './components/source-icon-button.component';
+export * from './constants';

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

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

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

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

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

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

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

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

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