@3dsource/source-ui 2.0.1 → 3.0.0

package/index.d.ts

@@ -1,24 +1,33 @@
 import * as _angular_core from '@angular/core';
 import { TemplateRef, ViewContainerRef, ElementRef, OnInit, OnDestroy, InjectionToken } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { SourceButton } from '@3dsource/source-ui-native';
+import { HttpClient } from '@angular/common/http';
 import * as _3dsource_source_ui from '@3dsource/source-ui';
 import { CdkOverlayOrigin, ConnectedPosition, OverlayRef, HorizontalConnectionPos, VerticalConnectionPos } from '@angular/cdk/overlay';
 import { SwiperOptions } from 'swiper/types';
 
-declare const SourceModalSize: {
-    SMALL: string;
-    DEFAULT: string;
+declare const sourceModalIcon: {
+    name: string;
+    svg: string;
+}[];
+
+declare const SourceModalContext: {
+    readonly DEFAULT: "default";
+    readonly INFO: "info";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly ERROR: "error";
 };
-type SourceModalSizeKeys = (typeof SourceModalSize)[keyof typeof SourceModalSize];
+type SourceModalContextKeys = (typeof SourceModalContext)[keyof typeof SourceModalContext];
 
 interface SourceModalData {
     headerTitle?: string;
-    size?: SourceModalSizeKeys;
-    backButton?: boolean;
+    context?: SourceModalContextKeys;
     closeButton?: boolean;
     content?: string;
     componentData?: unknown;
-    footerButtons?: DialogButtonsData;
+    footerButtons?: DialogButtonsData | DialogButtonsData[];
     testID?: string;
     [key: string]: unknown;
 }
@@ -32,12 +41,18 @@ type DialogButtonsData = DialogButtonData[];
 declare class SourceModalComponent {
     #private;
     readonly data: SourceModalData;
-    size: _angular_core.WritableSignal<string>;
+    http: HttpClient;
+    sanitizer: DomSanitizer;
+    context: _angular_core.WritableSignal<SourceModalContextKeys>;
     testID: _angular_core.WritableSignal<string>;
     stringContent: _angular_core.WritableSignal<string | null>;
     close(result?: any): void;
     goBack(): void;
+    isArrayOfArrays(footerButtons: DialogButtonsData | DialogButtonsData[]): footerButtons is DialogButtonsData[];
     getButtonConfig(externalConfig: Partial<SourceButton> | undefined): SourceButton;
+    getSingleButtonArray(footerButtons: DialogButtonsData | DialogButtonsData[]): DialogButtonsData;
+    getIconSvg(iconName: string): SafeHtml;
+    hasIcon(): boolean;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SourceModalComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SourceModalComponent, "src-modal", never, {}, {}, never, never, true, never>;
 }
@@ -120,10 +135,11 @@ declare class SourceTabLineComponent {
     tabs: _angular_core.InputSignal<any[]>;
     label: _angular_core.InputSignal<string>;
     selectedIndex: _angular_core.InputSignal<number>;
+    appearance: _angular_core.InputSignal<string>;
     isCompact: _angular_core.InputSignal<boolean>;
-    offsetBefore: _angular_core.InputSignal<number>;
-    offsetAfter: _angular_core.InputSignal<number>;
-    spaceBetween: _angular_core.InputSignal<number>;
+    offsetBefore: _angular_core.InputSignal<number | undefined>;
+    offsetAfter: _angular_core.InputSignal<number | undefined>;
+    spaceBetween: _angular_core.InputSignal<number | undefined>;
     isFullWidth: _angular_core.InputSignal<boolean>;
     isSwiper: _angular_core.InputSignal<boolean>;
     testID: _angular_core.InputSignal<string>;
@@ -137,9 +153,15 @@ declare class SourceTabLineComponent {
     _: _angular_core.EffectRef;
     selectTab(tabIndex: number): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SourceTabLineComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SourceTabLineComponent, "src-tab-line", never, { "tabs": { "alias": "tabs"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; "isSignal": true; }; "isCompact": { "alias": "isCompact"; "required": false; "isSignal": true; }; "offsetBefore": { "alias": "offsetBefore"; "required": false; "isSignal": true; }; "offsetAfter": { "alias": "offsetAfter"; "required": false; "isSignal": true; }; "spaceBetween": { "alias": "spaceBetween"; "required": false; "isSignal": true; }; "isFullWidth": { "alias": "isFullWidth"; "required": false; "isSignal": true; }; "isSwiper": { "alias": "isSwiper"; "required": false; "isSignal": true; }; "testID": { "alias": "data-testid"; "required": false; "isSignal": true; }; }, { "onSelectTab": "onSelectTab"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SourceTabLineComponent, "src-tab-line", never, { "tabs": { "alias": "tabs"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "isCompact": { "alias": "isCompact"; "required": false; "isSignal": true; }; "offsetBefore": { "alias": "offsetBefore"; "required": false; "isSignal": true; }; "offsetAfter": { "alias": "offsetAfter"; "required": false; "isSignal": true; }; "spaceBetween": { "alias": "spaceBetween"; "required": false; "isSignal": true; }; "isFullWidth": { "alias": "isFullWidth"; "required": false; "isSignal": true; }; "isSwiper": { "alias": "isSwiper"; "required": false; "isSignal": true; }; "testID": { "alias": "data-testid"; "required": false; "isSignal": true; }; }, { "onSelectTab": "onSelectTab"; }, never, never, true, never>;
 }
 
+declare const SourceTabAppearance: {
+    DEFAULT: string;
+    BUTTON: string;
+};
+type SourceTabAppearanceKeys = (typeof SourceTabAppearance)[keyof typeof SourceTabAppearance];
+
 interface SourceTabData {
     title: string;
     data: any;
@@ -333,5 +355,5 @@ declare class SourceSliderGroupComponent implements OnInit {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SourceSliderGroupComponent, "src-slider-group", never, { "min": { "alias": "min"; "required": true; "isSignal": true; }; "max": { "alias": "max"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "units": { "alias": "units"; "required": false; "isSignal": true; }; "showTicks": { "alias": "showTicks"; "required": false; "isSignal": true; }; "showRange": { "alias": "showRange"; "required": false; "isSignal": true; }; "isDisabled": { "alias": "isDisabled"; "required": false; "isSignal": true; }; "testID": { "alias": "data-testid"; "required": false; "isSignal": true; }; }, { "groupValueChange": "groupValueChange"; }, never, never, true, never>;
 }
 
-export { ColorPaletteComponent, ColorSliderComponent, SOURCE_TOOLTIP_DATA, SourceColorPickerComponent, SourceColorPickerOrientation, SourceModalComponent, SourceModalSize, SourcePopoverComponent, SourcePopoverService, SourcePopoverTriggerComponent, SourceSliderGroupComponent, SourceTabComponent, SourceTabLineComponent, SourceTabsComponent, SourceTooltipComponent, SourceTooltipDirective, SourceTooltipPosition, defaultSourcePopoverConfig };
-export type { DialogButtonData, DialogButtonsData, SourceColorPickerOrientationKeys, SourceModalData, SourceModalSizeKeys, SourcePopoverData, SourceTabData, SourceTooltipData, SourceTooltipPositionKeys };
+export { ColorPaletteComponent, ColorSliderComponent, SOURCE_TOOLTIP_DATA, SourceColorPickerComponent, SourceColorPickerOrientation, SourceModalComponent, SourceModalContext, SourcePopoverComponent, SourcePopoverService, SourcePopoverTriggerComponent, SourceSliderGroupComponent, SourceTabAppearance, SourceTabComponent, SourceTabLineComponent, SourceTabsComponent, SourceTooltipComponent, SourceTooltipDirective, SourceTooltipPosition, defaultSourcePopoverConfig, sourceModalIcon };
+export type { DialogButtonData, DialogButtonsData, SourceColorPickerOrientationKeys, SourceModalContextKeys, SourceModalData, SourcePopoverData, SourceTabAppearanceKeys, SourceTabData, SourceTooltipData, SourceTooltipPositionKeys };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@3dsource/source-ui",
-  "version": "2.0.1",
+  "version": "3.0.0",
   "description": "A bunch of ui elements with angular",
   "keywords": [
     "3dsource",

package/styles/material/form-field.scss

@@ -4,8 +4,8 @@
 // - General outline overrides
 // - mat-form-field-appearance-outline background overrides
 // - mat-form-field-appearance-outline text and outline overrides
-// - overrides for secondary colorScheme
-// - overrides for ghost colorScheme
+// - overrides for weight=secondary
+// - overrides for weight=ghost
 // - mat hint - disabled, use SourceHint instead
 // - slots inside input field
 // -----NOTE-----
@@ -178,9 +178,15 @@
     font-weight: 500;
     line-height: var(--src-text-lineHeight, var(--src-font-line-sm));
     letter-spacing: 0;
+
+    .mdc-text-field__input {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
   }
 
   .mat-mdc-form-field-infix {
+    width: auto;
     --mat-form-field-container-vertical-padding: var(
       --src-padding-xs,
       var(--src-space-2)
@@ -191,7 +197,7 @@
     );
   }
 }
-// Secondary colorScheme
+// weight=secondary
 .src-input--secondary {
   @include mat.form-field-overrides(
     (
@@ -204,7 +210,7 @@
     )
   );
 }
-// Ghost colorScheme
+// weight=ghost
 .src-input--ghost {
   @include mat.form-field-overrides(
     (
@@ -239,17 +245,31 @@
 
 // Slot for label inside form field
 .mat-mdc-form-field-text-prefix {
+  display: flex;
+  align-items: center;
   label {
     padding-right: var(--src-gap-md, 6px);
     white-space: nowrap;
+    display: flex;
+    color: var(--src-text-body-lable, #6b7280);
+
+    /* label/basic/base */
+    font-family: var(--src-font-family-header, Inter);
+    font-size: var(--src-text-fontSize, 12px);
+    font-style: normal;
+    font-weight: 500;
+    line-height: var(--src-text-lineHeight, 16px); /* 133.333% */
   }
 }
 // Slots for icons and buttons
-
+.mat-mdc-form-field-flex {
+  align-items: center;
+}
 .mat-mdc-form-field-has-icon-prefix,
 .mat-mdc-form-field-has-icon-suffix {
   .mat-mdc-form-field-flex {
     display: grid;
+    align-items: center;
     grid-template-columns: var(--formFieldWithIconsGrid);
     gap: 0;
     color: var(--src-icon-grey);
@@ -271,15 +291,15 @@
     justify-content: center;
   }
 }
-
-.mat-mdc-form-field-has-icon-prefix {
-  --formFieldWithIconsGrid: auto minmax(0, 1fr);
-}
-
-.mat-mdc-form-field-has-icon-suffix {
-  --formFieldWithIconsGrid: minmax(0, 1fr) auto;
-}
-
-.mat-mdc-form-field-has-icon-prefix.mat-mdc-form-field-has-icon-suffix {
-  --formFieldWithIconsGrid: auto minmax(0, 1fr) auto;
+// Align both prefix and suffix for textPrefix and icon slots
+.mat-mdc-form-field-flex {
+  &:has([class*='-prefix']) {
+    --formFieldWithIconsGrid: auto minmax(0, 1fr);
+  }
+  &:has([class*='-suffix']) {
+    --formFieldWithIconsGrid: minmax(0, 1fr) auto;
+  }
+  &:has([class*='-prefix']):has([class*='-suffix']) {
+    --formFieldWithIconsGrid: auto minmax(0, 1fr) auto;
+  }
 }

package/styles/material/select.scss

@@ -53,18 +53,39 @@
       #c5280c
     );
   }
-}
 
-.mat-mdc-select-trigger .mat-mdc-select-arrow-wrapper {
-  height: initial;
+  .mat-mdc-select-trigger {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    .mat-mdc-select-arrow-wrapper {
+      height: initial;
+    }
+  }
 }
 
 // Custom additional styling for select panel
+
 .src-select-panel {
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+
+  scrollbar-color: rgba(148, 163, 184, 0.16) transparent;
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(148, 163, 184, 0.16);
+    outline: none;
+  }
 }
 .src-select-panel__header,
 .src-panel__footer {
@@ -76,6 +97,7 @@
   max-height: 100%;
   width: 100%;
   overflow-y: auto;
+  scrollbar-gutter: stable;
   scrollbar-color: var(--src-color-border-strong)
     var(--src-color-border-default);
   scrollbar-width: thin;