@3dsource/source-ui-native 1.0.2 → 1.0.5

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

@@ -3,4 +3,4 @@ export declare const SourceIconButtonType: {
     readonly SUBMIT: "submit";
     readonly RESET: "reset";
 };
-export type SourceIconButtonTypeValues = (typeof SourceIconButtonType)[keyof typeof SourceIconButtonType];
+export type SourceIconButtonTypeKeys = (typeof SourceIconButtonType)[keyof typeof SourceIconButtonType];

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

@@ -1,37 +1,18 @@
-import { SourceLoadingLineCapValues } from '../constants/sourceLoadingLineCap';
+import { SourceLoadingLineCapKeys } from '../constants/sourceLoadingLineCap';
 import * as i0 from "@angular/core";
 export declare class SourceLoadingComponent {
-    /**
-     * Size of the loading circle
-     */
-    size: number;
-    /**
-     * If it just an animated circle or circular progressbar
-     */
-    progress?: number | 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.
-     */
-    lineCap: SourceLoadingLineCapValues;
-    /**
-     * Color of the strokes
-     */
-    backgroundStrokeColor: string;
-    progressStrokeColor: string;
-    /**
-     * Width of the line
-     */
-    strokeWidth: number;
-    /**
-     * Test ID for the component. Provide descriptive uniq id in kebab-case.
-     */
+    size: import("@angular/core").InputSignal<number>;
+    progress: import("@angular/core").InputSignal<number | null>;
+    lineCap: import("@angular/core").InputSignal<SourceLoadingLineCapKeys>;
+    backgroundStrokeColor: import("@angular/core").InputSignal<string>;
+    progressStrokeColor: import("@angular/core").InputSignal<string>;
+    strokeWidth: import("@angular/core").InputSignal<number>;
     testID: import("@angular/core").InputSignal<string>;
-    compiledClassesList: string[];
-    get classes(): string[];
-    calculateRadius(): number;
-    getCircumference(): number;
-    getViewBox(): string;
-    getPercentage(): number;
+    classes: import("@angular/core").Signal<string[]>;
+    calculateRadius: import("@angular/core").Signal<number>;
+    circumference: import("@angular/core").Signal<number>;
+    viewBox: import("@angular/core").Signal<string>;
+    percentage: import("@angular/core").Signal<number>;
     static ɵfac: i0.ɵɵFactoryDeclaration<SourceLoadingComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SourceLoadingComponent, "src-loading", never, { "size": { "alias": "size"; "required": false; }; "progress": { "alias": "progress"; "required": false; }; "lineCap": { "alias": "lineCap"; "required": false; }; "backgroundStrokeColor": { "alias": "backgroundStrokeColor"; "required": false; }; "progressStrokeColor": { "alias": "progressStrokeColor"; "required": false; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; }; "testID": { "alias": "data-testid"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SourceLoadingComponent, "src-loading", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "progress": { "alias": "progress"; "required": false; "isSignal": true; }; "lineCap": { "alias": "lineCap"; "required": false; "isSignal": true; }; "backgroundStrokeColor": { "alias": "backgroundStrokeColor"; "required": false; "isSignal": true; }; "progressStrokeColor": { "alias": "progressStrokeColor"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; "testID": { "alias": "data-testid"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

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

@@ -3,4 +3,4 @@ export declare const SourceLoadingLineCap: {
     readonly SQUARE: "square";
     readonly BUTT: "butt";
 };
-export type SourceLoadingLineCapValues = (typeof SourceLoadingLineCap)[keyof typeof SourceLoadingLineCap];
+export type SourceLoadingLineCapKeys = (typeof SourceLoadingLineCap)[keyof typeof SourceLoadingLineCap];

package/lib/components/source-slider/components/source-slider.component.d.ts

@@ -1,63 +1,25 @@
-import { AfterViewInit, EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
-export declare class SourceSliderComponent implements AfterViewInit {
-    /**
-     * id of input to connect label and input[type=range]
-     */
-    id?: string;
-    /**
-     * The minimum value of the slider
-     */
-    min: number;
-    /**
-     * The maximum value of the slider
-     */
-    max: number;
-    /**
-     * The size of the thumb
-     */
-    thumbSize: number;
-    /**
-     * The height of the visual track. Height of the input won't be affected
-     */
-    trackHeight: number;
-    /**
-     * The step length of the slider
-     */
-    step: number;
-    /**
-     * Whether to show the ticks on each step
-     */
-    showTicks: boolean;
-    /**
-     * If slider is disabled
-     */
-    isDisabled: boolean;
-    /**
-     * Slider orientation - WIP
-     */
-    orientation: 'horizontal' | 'vertical';
-    tickPositions: string[];
-    /**
-     * The value of the slider
-     */
-    value: number;
-    /**
-     * Test ID for the component. Provide descriptive uniq id in kebab-case.
-     */
+export declare class SourceSliderComponent {
+    id: import("@angular/core").InputSignal<string | undefined>;
+    value: import("@angular/core").InputSignal<number>;
+    sliderValue: import("@angular/core").WritableSignal<number>;
+    min: import("@angular/core").InputSignal<number>;
+    max: import("@angular/core").InputSignal<number>;
+    thumbSize: import("@angular/core").InputSignal<number>;
+    trackHeight: import("@angular/core").InputSignal<number>;
+    step: import("@angular/core").InputSignal<number>;
+    showTicks: import("@angular/core").InputSignal<boolean>;
+    isDisabled: import("@angular/core").InputSignal<boolean>;
+    orientation: import("@angular/core").InputSignal<"horizontal" | "vertical">;
     testID: import("@angular/core").InputSignal<string>;
-    /**
-     * Emits the value of the slider when it changes
-     */
-    onChange: EventEmitter<number>;
-    onInput: EventEmitter<number>;
-    ngAfterViewInit(): void;
+    onChange: import("@angular/core").OutputEmitterRef<number>;
+    onInput: import("@angular/core").OutputEmitterRef<number>;
+    tickPositions: import("@angular/core").Signal<string[]>;
+    thumbPosition: import("@angular/core").Signal<string>;
+    filledWidth: import("@angular/core").Signal<string>;
     input(valueEvent: Event): void;
     change(valueEvent: Event): void;
-    calculateThumbPosition(): string;
-    calculateFilledWidth(): string;
     private getValue;
-    private calculateTickPositions;
     static ɵfac: i0.ɵɵFactoryDeclaration<SourceSliderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SourceSliderComponent, "src-slider", never, { "id": { "alias": "id"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "thumbSize": { "alias": "thumbSize"; "required": false; }; "trackHeight": { "alias": "trackHeight"; "required": false; }; "step": { "alias": "step"; "required": false; }; "showTicks": { "alias": "showTicks"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "value": { "alias": "value"; "required": false; }; "testID": { "alias": "data-testid"; "required": false; "isSignal": true; }; }, { "onChange": "onChange"; "onInput": "onInput"; }, never, ["[srcIconThumb]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SourceSliderComponent, "src-slider", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "min": { "alias": "min"; "required": true; "isSignal": true; }; "max": { "alias": "max"; "required": true; "isSignal": true; }; "thumbSize": { "alias": "thumbSize"; "required": false; "isSignal": true; }; "trackHeight": { "alias": "trackHeight"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "showTicks": { "alias": "showTicks"; "required": false; "isSignal": true; }; "isDisabled": { "alias": "isDisabled"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "testID": { "alias": "data-testid"; "required": false; "isSignal": true; }; }, { "onChange": "onChange"; "onInput": "onInput"; }, never, ["[srcIconThumb]"], true, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@3dsource/source-ui-native",
-  "version": "1.0.2",
+  "version": "1.0.5",
   "license": "MIT",
   "sideEffects": false,
   "dependencies": {

package/styles/base.scss

@@ -0,0 +1,68 @@
+// SourceUI Global Styles: base.scss
+// TODO: get rid of tags, subscitute them with classes
+
+.section_3dsourcecom,
+.cdk-overlay-container {
+  width: 100%;
+  height: 100%;
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
+    font-family: var(--src-font-family-sans);
+  }
+
+  code {
+    font-family: monospace;
+  }
+
+  // NEVER use user-select: none for ALL page!
+  // * {
+  //   user-select: none;
+  // }
+  button {
+    // safari adds unwanted margin-top and margin-bottom
+    margin: 0;
+    font-family: var(--src-font-family-sans);
+    border: none;
+    cursor: pointer;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  .src-select,
+  select,
+  .src-input,
+  input,
+  .src-textarea,
+  textarea {
+    // safari adds unwanted margin-top and margin-bottom
+    margin: 0;
+
+    &:focus-visible,
+    &:focus {
+      outline: none;
+    }
+  }
+
+  // accent-color property is available only for some inputs and progress
+  input[type='checkbox'],
+  input[type='radio'],
+  input [type='range'],
+  progress {
+    accent-color: var(--src-color-brand-500);
+  }
+
+  table,
+  .src-table {
+    border-spacing: 0;
+  }
+
+  p {
+    margin-top: 0;
+  }
+}

package/styles/elements/_src-button.scss

@@ -0,0 +1,235 @@
+// source-button.component.scss
+.src-button {
+  --srcButtonBgColor: var(--src-color-bg-default, #fff);
+  --srcButtonBgHoverColor: var(--src-color-bg-default-hover, #f1f2f3);
+  --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, 16px);
+  --srcButtonFontWeight: var(--src-fw-medium, 500);
+  --srcButtonLineHeight: var(--src-lh-base, 20px);
+  --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, #fff);
+
+    &: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, #fff);
+
+    &: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%;
+  }
+
+  &--icon-button {
+    --srcButtonIconColor: var(--src-color-icon-default);
+
+    .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;
+    }
+  }
+}

package/styles/elements/_src-checkbox.scss

@@ -0,0 +1,52 @@
+.src-checkbox {
+  --srcCheckboxBorderColor: var(--src-color-border-strong);
+  --srcCheckboxSize: 20px;
+  --srcCheckboxBorderWidth: 2px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+
+  input[type='checkbox'] {
+    position: relative;
+    appearance: none;
+    width: var(--srcCheckboxSize);
+    height: var(--srcCheckboxSize);
+    padding: 2px;
+    border-radius: var(--src-br-small);
+    background-color: #fff;
+    border: var(--srcCheckboxBorderWidth) solid var(--srcCheckboxBorderColor);
+    cursor: pointer;
+
+    &:hover {
+      --srcCheckboxBorderColor: var(--src-color-border-strong-hover);
+    }
+
+    &:checked {
+      background-color: #007bff;
+      --srcCheckboxBorderColor: #007bff;
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: calc(var(--srcCheckboxSize) - 2 * var(--srcCheckboxBorderWidth));
+        height: calc(
+          var(--srcCheckboxSize) - 2 * var(--srcCheckboxBorderWidth)
+        );
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 10 8'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M9.72.24c.35.33.37.9.06 1.27L4.4 7.71A.83.83 0 0 1 3.8 8a.83.83 0 0 1-.62-.26L.25 4.64a.94.94 0 0 1 0-1.28.82.82 0 0 1 1.2 0l2.3 2.43L8.52.3a.82.82 0 0 1 1.2-.05Z' clip-rule='evenodd'/%3E%3C/svg%3E");
+        background-size: 10px 8px;
+        background-position: center;
+        background-repeat: no-repeat;
+      }
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow:
+        0 0 0 1px #fff,
+        0 0 0 3px var(--src-color-border-primary);
+    }
+  }
+}

package/styles/elements/_src-form.scss

@@ -0,0 +1,22 @@
+.src-form {
+  --srcFormRowGap: 16px;
+  --srcFormItemsGap: 12px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--srcFormRowGap);
+}
+
+.src-form__row {
+  display: grid;
+  gap: var(--srcFormItemsGap);
+  grid-template-columns: minmax(0, 1fr);
+
+  &--double {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  &--triple {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}

package/styles/elements/_src-input.scss

@@ -0,0 +1,82 @@
+.src-input {
+  --srcInputFontSize: var(--srcFormElementFontSize);
+  --srcInputLineHeight: var(--srcFormElementLineHeight);
+  --srcInputFontColor: var(--srcFormElementFontColor);
+  --srcInputFieldBg: var(--srcFormElementBg);
+  --srcInputFieldBorderColor: var(--srcFormElementBorderColor);
+  --srcInputHeight: var(--srcFormElementHeight);
+  --srcInputBorderRadius: var(--srcFormElementBorderRadius);
+  --srcInputBoxShadow: var(--srcFormElementBoxShadow);
+  // Focus ring it's a multiple box-shadow
+  --srcInputFocusRing: var(--srcFormElementFocusRing);
+  position: relative;
+
+  height: var(--srcInputHeight);
+  border-radius: var(--srcInputBorderRadius);
+  font-size: var(--srcInputFontSize);
+  line-height: var(--srcInputLineHeight);
+  color: var(--srcInputFontColor);
+  padding: 7px 12px;
+  font-family: var(--src-font-family-sans);
+  font-style: normal;
+  font-weight: var(--src-fw-regular, 400);
+  background-color: var(--srcInputFieldBg);
+  border: 1px solid var(--srcInputFieldBorderColor);
+  box-shadow: var(--srcInputBoxShadow);
+  display: flex;
+  align-items: center;
+
+  width: 100%;
+  &[type='number'] {
+    -moz-appearance: textfield;
+  }
+
+  // Remove default background for autofilled inputs
+  &:-webkit-autofill,
+  &:-webkit-autofill:focus {
+    transition:
+      background-color 0s 600000s,
+      color 0s 600000s;
+  }
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: var(--srcFormElementFocusRing);
+  }
+
+  &[disabled],
+  &:disabled {
+    --srcInputFieldBg: var(--srcFormElementDisabledBg);
+    --srcInputFieldBorderColor: var(--srcFormElementDisabledBorderColor);
+    --srcInputBoxShadow: none;
+    color: var(--src-color-text-default-disabled);
+
+    pointer-events: none;
+  }
+}
+
+.src-input--compact {
+  --srcInputHeight: 32px;
+  --srcInputFontSize: var(--src-fs-small);
+  --srcInputLineHeight: var(--src-lh-small);
+}
+/* Error State */
+.src-input--has-error {
+  --srcInputFieldBg: var(--src-color-bg-critical-subdued);
+  --srcInputFieldBorderColor: var(--src-color-border-critical-strong);
+}
+
+/* Disabled State */
+.src-input--disabled {
+  --srcInputFieldBg: var(--srcFormElementDisabledBg);
+  --srcInputFieldBorderColor: var(--srcFormElementDisabledBorderColor);
+  --srcInputBoxShadow: none;
+
+  pointer-events: none;
+}

package/styles/elements/_src-label.scss

@@ -0,0 +1,23 @@
+.src-label {
+  --srcLabelFontSize: var(--src-fs-base);
+  --srcLabelLineHeight: var(--src-lh-base);
+  --srcLabelFontWeight: 500;
+  --srcLabelColor: var(--src-color-text-default);
+  --srcLabelMarginBottom: 4px;
+  display: block;
+  font-size: var(--srcLabelFontSize);
+  line-height: var(--srcLabelLineHeight);
+  font-family: var(--src-font-family-sans);
+  font-style: normal;
+  font-weight: var(--srcLabelFontWeight);
+  color: var(--srcLabelColor);
+  margin-bottom: var(--srcLabelMarginBottom);
+}
+
+.src-radio,
+.src-checkbox {
+  .src-label {
+    --srcLabelMarginBottom: 0;
+    --srcLabelFontWeight: 400;
+  }
+}