@3dsource/source-ui-native 0.0.1

package/README.md

@@ -0,0 +1,64 @@
+# SourceUiNative
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.0.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the library, run:
+
+```bash
+ng build source-ui-native
+```
+
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+
+### Publishing the Library
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+
+   ```bash
+   cd dist/source-ui-native
+   ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/eslint.config.js

@@ -0,0 +1,37 @@
+// @ts-check
+const tseslint = require('typescript-eslint');
+const rootConfig = require('../../../eslint.config.js');
+
+module.exports = tseslint.config(
+  ...rootConfig,
+  {
+    files: ['**/*.ts'],
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+      },
+    },
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'lib',
+          style: 'camelCase',
+        },
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'lib',
+          style: 'kebab-case',
+        },
+      ],
+    },
+  },
+  {
+    files: ['**/*.html'],
+    rules: {},
+  },
+);

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/3dsource/source-ui-native",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@3dsource/source-ui-native",
+  "version": "0.0.1",
+  "license": "MIT",
+  "sideEffects": false,
+  "dependencies": {
+    "tslib": "^2.8.1"
+  }
+}

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

@@ -0,0 +1,20 @@
+<div
+  class="src-badge"
+  [ngClass]="classes"
+  [ngStyle]="
+    type
+      ? {}
+      : {
+          '--srcBadgeBorderColor': borderColor,
+          '--srcBadgeBackgroundColor': backgroundColor,
+          '--srcBadgeBorderWidth': borderWidth,
+          '--srcBadgeTextColor': textColor,
+        }
+  "
+  [attr.data-testid]="testID"
+>
+  @if (number) {
+    {{ number }}
+  }
+  <ng-content></ng-content>
+</div>

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

@@ -0,0 +1,76 @@
+// source-badge.component.scss
+.src-badge {
+  --srcBadgeHeight: 18px;
+  --srcBadgeBorderWidth: 2px;
+  --srcBadgePadding: 2px 4px;
+  --srcBadgeBackgroundColor: var(--src-color-brand-500, darkgreen);
+  --srcBadgeBorderColor: var(--src-color-bg-default, #fff);
+  --srcBadgeTextColor: var(--src-color-text-inverse, #fff);
+  display: inline-block;
+  width: auto;
+  min-width: var(--srcBadgeHeight);
+  height: var(--srcBadgeHeight);
+  padding: var(--srcBadgePadding);
+  vertical-align: top;
+  text-align: center;
+  border-radius: 99px;
+  border: var(--srcBadgeBorderWidth) solid var(--srcBadgeBorderColor, #fff);
+  background: var(--srcBadgeBackgroundColor);
+  color: var(--srcBadgeTextColor);
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 1;
+
+  &--small {
+    --srcBadgeHeight: 16px;
+    font-size: 8px;
+  }
+
+  &--large {
+    --srcBadgeHeight: 20px;
+    font-size: 10px;
+  }
+
+  &--neutral,
+  &--informational,
+  &--success,
+  &--warning,
+  &--attention,
+  &--critical {
+    --srcBadgeHeight: 20px;
+    --srcBadgeBorderWidth: 0px;
+    --srcBadgePadding: 2px 8px;
+    --srcBadgeBackgroundColor: var(--src-color-bg-strong);
+    --srcBadgeTextColor: var(--src-color-text-default, #1f2937);
+    text-align: center;
+    font-family: var(--src-font-family-sans);
+    font-size: var(--src-fs-small);
+    font-style: normal;
+    font-weight: var(--src-fw-medium, 500);
+    line-height: var(--src-lh-small);
+  }
+
+  &--neutral {
+    --srcBadgeBackgroundColor: var(--src-color-bg-strong);
+  }
+
+  &--informational {
+    --srcBadgeBackgroundColor: #a4e8f2;
+  }
+
+  &--success {
+    --srcBadgeBackgroundColor: #aee9d1;
+  }
+
+  &--warning {
+    --srcBadgeBackgroundColor: #ffd79d;
+  }
+
+  &--attention {
+    --srcBadgeBackgroundColor: #ffea8a;
+  }
+
+  &--critical {
+    --srcBadgeBackgroundColor: #ffb7b7;
+  }
+}

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

@@ -0,0 +1,62 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  input,
+  OnInit,
+  ViewEncapsulation,
+} from '@angular/core';
+import {
+  SourceBadgeSize,
+  SourceBadgeSizeValues,
+  SourceBadgeType,
+} from '../constants';
+import { NgClass, NgStyle } from '@angular/common';
+
+@Component({
+  selector: 'src-badge',
+  templateUrl: './source-badge.component.html',
+  styleUrls: ['./source-badge.component.scss'],
+  imports: [NgStyle, NgClass],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SourceBadgeComponent implements OnInit {
+  @Input() number = 0;
+  @Input() backgroundColor? = 'var(--src-color-icon-critical, #B91C1C)';
+  @Input() type: SourceBadgeType | string | null = null;
+  @Input() size?: SourceBadgeSizeValues | string = SourceBadgeSize.DEFAULT;
+  /**
+   * Custom class to be added to the badge.
+   */
+  @Input() customClass?: string | string[];
+  /**
+   * 2 px border around the badge to increase visibility.
+   */
+  @Input() borderColor? = 'var(--src-color-bg-default, #FFFFFF)';
+  /**
+   * It's not recommended to change the border width. If you're changing the width of the border, you should also change the size of the badge manually through scss.
+   * */
+  @Input() borderWidth? = '2px';
+  @Input() textColor? = 'var(--src-color-text-inverse, #FFFFFF)';
+  testID = input('', { alias: 'data-testid' });
+
+  classes: string[] = [];
+
+  ngOnInit() {
+    this.classes = [
+      this.type ? `src-badge--${this.type}` : '',
+      this.size && !this.type ? `src-badge--${this.size}` : '',
+    ];
+
+    if (this.customClass) {
+      if (Array.isArray(this.customClass)) {
+        this.classes.forEach((customClass) => {
+          this.classes.push(customClass);
+        });
+      } else {
+        this.classes.push(this.customClass);
+      }
+    }
+  }
+}

package/src/lib/components/source-badge/constants/index.ts

@@ -0,0 +1,2 @@
+export * from './sourceBadgeType';
+export * from './sourceBadgeSize';

package/src/lib/components/source-badge/constants/sourceBadgeSize.ts

@@ -0,0 +1,8 @@
+export const SourceBadgeSize = {
+  SMALL: 'small',
+  DEFAULT: 'default',
+  LARGE: 'large',
+} as const;
+
+export type SourceBadgeSizeValues =
+  (typeof SourceBadgeSize)[keyof typeof SourceBadgeSize];

package/src/lib/components/source-badge/constants/sourceBadgeType.ts

@@ -0,0 +1,11 @@
+export const SourceBadgeType = {
+  NEUTRAL: 'neutral',
+  INFORMATIONAL: 'informational',
+  SUCCESS: 'success',
+  WARNING: 'warning',
+  ATTENTION: 'attention',
+  CRITICAL: 'critical',
+} as const;
+
+export type SourceBadgeType =
+  (typeof SourceBadgeType)[keyof typeof SourceBadgeType];

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

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

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

@@ -0,0 +1,10 @@
+<div
+  class="src-banner"
+  [class.src-banner--compact]="isCompact()"
+  [ngClass]="type() !== 'default' ? 'src-banner--' + type() : ''"
+  [attr.data-testid]="testID"
+>
+  <ng-content select="[srcIconPrefix]"></ng-content>
+  <ng-content></ng-content>
+  <ng-content select="[srcIconPostfix]"></ng-content>
+</div>

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

@@ -0,0 +1,75 @@
+// source-banner.component.scss
+.src-banner {
+  --srcBannerPadding: 20px;
+  --srcBannerBackgroundColor: var(--src-color-bg-default-subdued, #f9fafb);
+  --srcBannerBorderWidth: 1px;
+  --srcBannerBorderColor: var(--src-color-border-default, #e5e7eb);
+  --srcBannerTextColor: var(--src-color-text-default, #1f2937);
+  --srcBannerIconColor: var(--src-color-icon-default, #6b7280);
+  --srcBannerBorderRadius: var(--src-br-small, 4px);
+  --srcBannerIconMargin: 16px;
+  display: flex;
+  gap: 8px;
+  width: 100%;
+  padding: var(--srcBannerPadding, 20px);
+  border: var(--srcBannerBorderWidth) solid var(--srcBannerBorderColor, #fff);
+  border-radius: var(--srcBannerBorderRadius);
+  background: var(--srcBannerBackgroundColor);
+  color: var(--srcBannerTextColor);
+  font-size: var(--src-fs-base, 14px);
+  font-weight: normal;
+  line-height: var(--src-lh-base);
+
+  [srcIconPrefix] {
+    color: var(--srcBannerIconColor);
+  }
+
+  p {
+    margin: 0;
+  }
+
+  &--compact {
+    --srcBannerPadding: 16px;
+    --srcBannerIconMargin: 8px;
+  }
+
+  &--info {
+    --srcBannerBackgroundColor: #e8f0fd;
+    --srcBannerBorderColor: transparent;
+    --srcBannerIconColor: #2463bc;
+  }
+
+  &--success {
+    --srcBannerBackgroundColor: var(--src-color-green-50);
+    --srcBannerBorderColor: var(--src-color-green-500);
+    --srcBannerIconColor: var(--src-color-green-500);
+  }
+
+  &--critical {
+    --srcBannerBackgroundColor: var(--src-color-bg-critical-subdued);
+    --srcBannerBorderColor: var(--src-color-border-critical-strong);
+    --srcBannerIconColor: var(--src-color-icon-critical);
+  }
+
+  &--warning {
+    --srcBannerBackgroundColor: var(--src-color-yellow-50);
+    --srcBannerBorderColor: var(--src-color-yellow-700);
+    --srcBannerIconColor: var(--src-color-yellow-700);
+  }
+}
+
+.src-banner__icon {
+  margin-right: var(--srcBannerIconMargin, 8px);
+  color: var(--srcBannerIconColor);
+}
+
+.src-banner__close {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  margin-left: auto;
+
+  button.src-icon-button {
+    --srcButtonBgColor: transparent;
+  }
+}

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

@@ -0,0 +1,25 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { NgClass } from '@angular/common';
+import {
+  SourceBannerType,
+  SourceBannerTypeValues,
+} from '../constants/sourceBannerType';
+
+@Component({
+  selector: 'src-banner',
+  templateUrl: './source-banner.component.html',
+  styleUrls: ['./source-banner.component.scss'],
+  imports: [NgClass],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SourceBannerComponent {
+  type = input<SourceBannerTypeValues>(SourceBannerType.DEFAULT);
+  isCompact = input(false);
+  testID = input('', { alias: 'data-testid' });
+}

package/src/lib/components/source-banner/constants/sourceBannerType.ts

@@ -0,0 +1,10 @@
+export const SourceBannerType = {
+  DEFAULT: 'default',
+  INFO: 'info',
+  SUCCESS: 'success',
+  WARNING: 'warning',
+  CRITICAL: 'critical',
+} as const;
+
+export type SourceBannerTypeValues =
+  (typeof SourceBannerType)[keyof typeof SourceBannerType];

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

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

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

@@ -0,0 +1,44 @@
+<button
+  [type]="type"
+  class="src-button"
+  [ngClass]="classes"
+  [attr.form]="formID"
+  (click)="handleClick($event)"
+  (submit)="handleSubmit($event)"
+  [disabled]="isDisabled"
+  [attr.data-testid]="testID()"
+>
+  <span [style.opacity]="isLoading ? 0 : 1">
+    @if (iconPrefix) {
+      <span class="src-button__icon">
+        <ng-content select="[srcIconPrefix]"></ng-content>
+      </span>
+    }
+
+    <ng-content></ng-content>
+
+    @if (hasDisclosure) {
+      <svg
+        class="disclosure-icon"
+        width="8"
+        height="5"
+        viewBox="0 0 8 5"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M3.40573 4.3L0.805725 1.7C0.489058 1.38333 0.418392 1.021 0.593725 0.613C0.768392 0.204333 1.08073 0 1.53073 0H6.68072C7.13072 0 7.44306 0.204333 7.61772 0.613C7.79306 1.021 7.72239 1.38333 7.40573 1.7L4.80572 4.3C4.70572 4.4 4.59739 4.475 4.48073 4.525C4.36406 4.575 4.23906 4.6 4.10573 4.6C3.97239 4.6 3.84739 4.575 3.73073 4.525C3.61406 4.475 3.50573 4.4 3.40573 4.3Z"
+          fill="currentColor"
+        />
+      </svg>
+    }
+  </span>
+  @if (isLoading) {
+    <src-loading
+      [size]="16"
+      [progressStrokeColor]="'#6B7280'"
+      [strokeWidth]="2"
+      [data-testid]="testID() + '-loading-state'"
+    ></src-loading>
+  }
+</button>