@3dsource/source-ui-native 0.0.1

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

@@ -0,0 +1,355 @@
+// source-button.component.scss
+button.src-button {
+  --srcButtonBgColor: var(--src-color-bg-default);
+  --srcButtonBgHoverColor: var(--src-color-bg-default-hover);
+  --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);
+  --srcButtonFontWeight: var(--src-fw-medium, 500);
+  --srcButtonLineHeight: var(--src-lh-base);
+  --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);
+
+    &: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);
+
+    &: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%;
+  }
+
+  &--disclosure {
+    position: relative;
+    --srcButtonDisclosureIconColor: var(--src-color-icon-default);
+
+    span {
+      display: flex;
+      align-items: center;
+    }
+
+    &:disabled,
+    &[disabled] {
+      --srcButtonDisclosureIconColor: var(--src-color-icon-default-disabled);
+    }
+
+    .disclosure-icon {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-shrink: 0;
+      width: 20px;
+      height: 20px;
+      padding: 6px;
+      color: var(--srcButtonDisclosureIconColor);
+    }
+
+    &.src-button--plain {
+      &.src-button--primary {
+        --srcButtonDisclosureIconColor: var(--src-color-icon-primary);
+      }
+
+      &.src-button--destructive {
+        --srcButtonDisclosureIconColor: var(--src-color-icon-critical);
+      }
+      &.src-button--primary,
+      &.src-button--destructive {
+        &:disabled,
+        &[disabled] {
+          --srcButtonDisclosureIconColor: var(
+            --src-color-icon-default-disabled
+          );
+        }
+      }
+    }
+
+    &.src-button--primary,
+    &.src-button--destructive {
+      --srcButtonDisclosureIconColor: var(--src-color-text-inverse);
+
+      &:disabled,
+      &[disabled] {
+        --srcButtonDisclosureIconColor: var(--src-color-text-inverse);
+      }
+    }
+
+    &.src-button--secondary {
+      --srcButtonDisclosureIconColor: var(--src-color-icon-default);
+
+      &:disabled,
+      &[disabled] {
+        --srcButtonDisclosureIconColor: var(--src-color-icon-default-disabled);
+      }
+    }
+  }
+
+  &--icon-prefix {
+    --srcButtonPrefixIconColor: var(--src-color-icon-default);
+
+    .src-button__icon {
+      display: inline-flex;
+      margin-right: 4px;
+      flex-shrink: 0;
+      vertical-align: middle;
+      color: var(--srcButtonPrefixIconColor);
+    }
+
+    &.src-button--plain {
+      &.src-button--primary {
+        --srcButtonPrefixIconColor: var(--src-color-icon-primary);
+
+        &:disabled,
+        &[disabled] {
+          --srcButtonPrefixIconColor: var(--src-color-icon-default-disabled);
+        }
+      }
+      &.src-button--destructive {
+        --srcButtonPrefixIconColor: var(--src-color-icon-critical);
+
+        &:disabled,
+        &[disabled] {
+          --srcButtonPrefixIconColor: var(--src-color-icon-default-disabled);
+        }
+      }
+    }
+
+    &.src-button--primary,
+    &.src-button--destructive {
+      --srcButtonPrefixIconColor: var(--src-color-text-inverse);
+
+      &:disabled,
+      &[disabled] {
+        --srcButtonPrefixIconColor: var(--src-color-icon-default-disabled);
+      }
+    }
+
+    &.src-button--secondary {
+      --srcButtonPrefixIconColor: var(--src-color-icon-default);
+
+      &:disabled,
+      &[disabled] {
+        --srcButtonPrefixIconColor: var(--src-color-icon-default-disabled);
+      }
+    }
+  }
+
+  &--icon-button {
+    --srcButtonIconColor: var(--src-color-icon-default);
+
+    .src-button__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;
+    }
+  }
+
+  &--loading {
+    src-loading {
+      position: absolute;
+    }
+  }
+}

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

@@ -0,0 +1,220 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import type { SourceButton } from '../interfaces';
+import { defaultSourceButtonConfig } from '../interfaces';
+import {
+  SourceButtonAppearance,
+  SourceButtonAppearanceValues,
+  SourceButtonColorScheme,
+  SourceButtonColorSchemeValues,
+  SourceButtonSize,
+  SourceButtonSizeValues,
+  SourceButtonType,
+  SourceButtonTypeValues,
+} from '../constants';
+import { NgClass } from '@angular/common';
+import { SourceLoadingComponent } from '../../source-loading';
+
+@Component({
+  selector: 'src-button',
+  templateUrl: './source-button.component.html',
+  styleUrls: ['./source-button.component.scss'],
+  imports: [NgClass, SourceLoadingComponent],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SourceButtonComponent {
+  /**
+   * Type of button
+   */
+  @Input() type?: SourceButtonTypeValues = SourceButtonType.BUTTON;
+  /**
+   * Is this the principal call to action on the page?
+   */
+  @Input() appearance?: SourceButtonAppearanceValues =
+    SourceButtonAppearance.DEFAULT;
+  /**
+   * Is this the principal call to action on the page?
+   */
+  @Input() colorScheme?: SourceButtonColorSchemeValues =
+    SourceButtonColorScheme.SECONDARY;
+  /**
+   * How big it should be?
+   */
+  @Input() size?: SourceButtonSizeValues = SourceButtonSize.MEDIUM;
+  /**
+   * Add a custom class if you need harder customization.
+   */
+  @Input() customClass?: string | string[];
+  /**
+   * Is this button a trigger for some kind of menu?
+   */
+  @Input() hasDisclosure? = false;
+  /**
+   * Is this button should fill all available width of the container?
+   */
+  @Input() isFullWidth? = false;
+  /**
+   * Is this button having icon before label?
+   */
+  @Input() iconPrefix? = false;
+  /**
+   * Square button with only icon inside
+   */
+  @Input() iconButton? = false;
+  /**
+   * Use it only if you use iconPrefix or iconButton
+   */
+  @Input() icon?: string;
+  /**
+   * Pressed state for button
+   */
+  @Input() isPressed? = false;
+  /**
+   * Standard disabled state for button
+   */
+  @Input() isDisabled? = false;
+  /**
+   * Set true if your button has a show loading process after pressing
+   */
+  @Input() isLoading = false;
+  /**
+   * The form element to associate the button with (its form owner). The value of this attribute must be the id of a form in the same document. (If this attribute is not set, the button is associated with its ancestor form element, if any.)
+   * This attribute lets you associate button elements with forms anywhere in the document, not just inside a form. It can also override an ancestor form element.
+   *
+   */
+  @Input() formID?: string;
+
+  /** Even though it's not recommended, you can set the buttons' configuration using one input. A valid use-case for it is settings for buttons in src-modal. */
+  @Input() srcButtonConfig?: SourceButton;
+  /**
+   * 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>();
+  /**
+   * Optional submit handler
+   */
+  @Output()
+  onSubmit = new EventEmitter<Event>();
+  compiledClassesList: string[] = [];
+  defaultConfig = defaultSourceButtonConfig;
+
+  get classes(): string[] {
+    // Reset the compiledClassesList
+    this.compiledClassesList = [];
+    const config: Partial<SourceButton> = {
+      type: this.type,
+      appearance: this.appearance,
+      colorScheme: this.colorScheme,
+      size: this.size,
+      customClass: this.customClass,
+      hasDisclosure: this.hasDisclosure,
+      isFullWidth: this.isFullWidth,
+      icon: this.icon,
+      iconPrefix: this.iconPrefix,
+      iconButton: this.iconButton,
+      isPressed: this.isPressed,
+      isDisabled: this.isDisabled,
+      isLoading: this.isLoading,
+      testID: this.testID(),
+    };
+
+    // Find a new overridden config object depending on the presence of srcButtonConfig
+    let updatedConfig;
+
+    if (this.srcButtonConfig) {
+      updatedConfig = this.getUpdatedConfig(this.srcButtonConfig);
+    } else {
+      updatedConfig = this.getUpdatedConfig(config);
+    }
+
+    if (updatedConfig.type) {
+      this.type = updatedConfig.type;
+    }
+    if (updatedConfig.formID) {
+      this.formID = updatedConfig.formID;
+    }
+    if (updatedConfig.icon) {
+      this.icon = updatedConfig.icon;
+    }
+    if (updatedConfig.appearance) {
+      this.compiledClassesList.push(`src-button--${updatedConfig.appearance}`);
+    }
+    if (updatedConfig.colorScheme) {
+      this.compiledClassesList.push(`src-button--${updatedConfig.colorScheme}`);
+    }
+    if (updatedConfig.size) {
+      this.compiledClassesList.push(`src-button--${updatedConfig.size}`);
+    }
+    if (updatedConfig.hasDisclosure) {
+      this.compiledClassesList.push(`src-button--disclosure`);
+    }
+    if (updatedConfig.isPressed) {
+      this.compiledClassesList.push(`src-button--pressed`);
+    }
+    if (updatedConfig.isFullWidth) {
+      this.compiledClassesList.push(`src-button--full-width`);
+    }
+    if (updatedConfig.iconPrefix) {
+      this.compiledClassesList.push(`src-button--icon-prefix`);
+    }
+    if (updatedConfig.iconButton) {
+      this.compiledClassesList.push(`src-button--icon-button`);
+    }
+    if (updatedConfig.isLoading) {
+      this.compiledClassesList.push(`src-button--loading`);
+    }
+    if (updatedConfig.customClass) {
+      if (Array.isArray(updatedConfig.customClass)) {
+        updatedConfig.customClass.forEach((customClass) => {
+          this.compiledClassesList.push(customClass);
+        });
+      } else {
+        this.compiledClassesList.push(updatedConfig.customClass);
+      }
+    }
+
+    return this.compiledClassesList;
+  }
+
+  getUpdatedConfig(config: Partial<SourceButton>): SourceButton {
+    return {
+      type: config.type || this.defaultConfig.type,
+      appearance: config.appearance || this.defaultConfig.appearance,
+      colorScheme: config.colorScheme || this.defaultConfig.colorScheme,
+      size: config.size || this.defaultConfig.size,
+      customClass: config.customClass || this.defaultConfig.customClass,
+      hasDisclosure: config.hasDisclosure || this.defaultConfig.hasDisclosure,
+      isFullWidth: config.isFullWidth || this.defaultConfig.isFullWidth,
+      icon: config.icon || this.defaultConfig.icon,
+      iconPrefix: config.iconPrefix || this.defaultConfig.iconPrefix,
+      iconButton: config.iconButton || this.defaultConfig.iconButton,
+      isPressed: config.isPressed || this.defaultConfig.isPressed,
+      isDisabled: config.isDisabled || this.defaultConfig.isDisabled,
+      isLoading: config.isLoading || this.defaultConfig.isLoading,
+      formID: config.formID || this.defaultConfig.formID,
+      testID: config.testID || this.defaultConfig.testID,
+    };
+  }
+
+  handleClick(event: Event) {
+    this.onClick.emit(event);
+  }
+
+  handleSubmit(event: Event) {
+    this.onSubmit.emit(event);
+  }
+}

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

@@ -0,0 +1,4 @@
+export * from './sourceButtonColorScheme';
+export * from './sourceButtonSize';
+export * from './sourceButtonType';
+export * from './sourceButtonAppearance';

package/src/lib/components/source-button/constants/sourceButtonAppearance.ts

@@ -0,0 +1,7 @@
+export const SourceButtonAppearance = {
+  PLAIN: 'plain',
+  DEFAULT: 'default',
+} as const;
+
+export type SourceButtonAppearanceValues =
+  (typeof SourceButtonAppearance)[keyof typeof SourceButtonAppearance];

package/src/lib/components/source-button/constants/sourceButtonColorScheme.ts

@@ -0,0 +1,8 @@
+export const SourceButtonColorScheme = {
+  PRIMARY: 'primary',
+  SECONDARY: 'secondary',
+  DESTRUCTIVE: 'destructive',
+} as const;
+
+export type SourceButtonColorSchemeValues =
+  (typeof SourceButtonColorScheme)[keyof typeof SourceButtonColorScheme];

package/src/lib/components/source-button/constants/sourceButtonSize.ts

@@ -0,0 +1,8 @@
+export const SourceButtonSize = {
+  SLIM: 'slim',
+  SMALL: 'slim',
+  MEDIUM: 'medium',
+  LARGE: 'large',
+} as const;
+export type SourceButtonSizeValues =
+  (typeof SourceButtonSize)[keyof typeof SourceButtonSize];

package/src/lib/components/source-button/constants/sourceButtonType.ts

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

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

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

package/src/lib/components/source-button/interfaces/defaultSourceButton.config.ts

@@ -0,0 +1,24 @@
+import {
+  SourceButtonColorScheme,
+  SourceButtonSize,
+  SourceButtonType,
+} from '../constants';
+import type { SourceButton } from './sourceButton.interface';
+
+export const defaultSourceButtonConfig: SourceButton = {
+  type: SourceButtonType.BUTTON,
+  appearance: 'default',
+  colorScheme: SourceButtonColorScheme.SECONDARY,
+  size: SourceButtonSize.MEDIUM,
+  customClass: '',
+  hasDisclosure: false,
+  isFullWidth: false,
+  icon: undefined,
+  iconPrefix: false,
+  iconButton: false,
+  isPressed: false,
+  isDisabled: false,
+  isLoading: false,
+  formID: undefined,
+  testID: undefined,
+};

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

@@ -0,0 +1,2 @@
+export * from './sourceButton.interface';
+export * from './defaultSourceButton.config';

package/src/lib/components/source-button/interfaces/sourceButton.interface.ts

@@ -0,0 +1,26 @@
+import {
+  SourceButtonAppearanceValues,
+  SourceButtonColorSchemeValues,
+  SourceButtonSizeValues,
+  SourceButtonTypeValues,
+} from '../constants';
+
+export interface SourceButton {
+  type: SourceButtonTypeValues;
+  appearance: SourceButtonAppearanceValues;
+  colorScheme: SourceButtonColorSchemeValues;
+  size: SourceButtonSizeValues;
+  customClass: string | string[];
+  hasDisclosure: boolean;
+  isFullWidth: boolean;
+  iconPrefix: boolean;
+  iconButton: boolean;
+  icon?: string;
+  isPressed: boolean;
+  isDisabled: boolean;
+  isLoading: boolean;
+  formID?: string;
+  testID?: string;
+
+  [key: string]: unknown;
+}

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

@@ -0,0 +1,20 @@
+<div class="src-copyright" [class.src-copyright--collapsible]="isCollapsible()">
+  <a href="https://www.3dsource.com/" target="_blank" class="src-link">
+    <svg
+      class="src-link__icon"
+      fill="none"
+      height="18"
+      viewBox="0 0 17 18"
+      width="17"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill="#016EF8"
+        fill-rule="evenodd"
+        d="M13 13v1.1a61.8 61.8 0 0 1 .2 1.3l2-1.2c.7-.3 1-.9 1-1.6V10c0-.4-.2-.8-.6-1l-4.4-2.5a9414.7 9414.7 0 0 0-2.8-1.7l-.6-.3c-.2-.1-.3-.3-.3-.5 0-.3.2-.4.4-.5l.6.1 3.7 2.2a4320 4320 0 0 1 4 2V5.3c0-.7-.3-1.1-.9-1.5L9.3.3C8.5 0 7.7 0 7 .3L5.7 1l-1.2.7-.2.4v3.3c0 .5.2 1 .7 1.2l4 2.3 3.2 1.8c.6.3.8.8.8 1.4v1ZM3.2 5V4A164.6 164.6 0 0 1 3 2.6l-1.2.7-1 .5c-.5.4-.8.9-.8 1.6V8c0 .4.2.8.6 1l1 .6.5.3 6.2 3.5c.1.1.3.2.3.4.1.2 0 .4-.1.6-.2.2-.4.2-.7 0l-1.8-1-.5-.3-3.3-1.9-2-1C0 10 0 10 0 10.1a914.3 914.3 0 0 1 0 2.4c0 .7.3 1.3 1 1.6L3.8 16l3 1.7c.8.5 1.6.5 2.4 0l1.1-.6 1.3-.7.2-.3v-3.5c0-.5-.2-.8-.6-1a1118.4 1118.4 0 0 1-4-2.4L3.8 7.2c-.4-.2-.7-.7-.7-1.2V5Z"
+        clip-rule="evenodd"
+      />
+    </svg>
+    <span class="src-link__text">{{ linkText() }}</span>
+  </a>
+</div>