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

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

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

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

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

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

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

@@ -1,8 +0,0 @@
-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/interfaces/defaultSourceButton.config.ts

@@ -1,24 +0,0 @@
-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/sourceButton.interface.ts

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

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