@3dsource/source-ui 2.0.0 → 2.1.0

package/index.d.ts

@@ -1,6 +1,8 @@
 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';
@@ -11,14 +13,29 @@ declare const SourceModalSize: {
 };
 type SourceModalSizeKeys = (typeof SourceModalSize)[keyof typeof SourceModalSize];
 
+declare const sourceModalIcon: {
+    name: string;
+    svg: string;
+}[];
+
+declare const SourceModalType: {
+    readonly DEFAULT: "default";
+    readonly INFO: "info";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly ERROR: "error";
+};
+type SourceModalTypeKeys = (typeof SourceModalType)[keyof typeof SourceModalType];
+
 interface SourceModalData {
     headerTitle?: string;
     size?: SourceModalSizeKeys;
     backButton?: boolean;
+    type?: SourceModalTypeKeys;
     closeButton?: boolean;
     content?: string;
     componentData?: unknown;
-    footerButtons?: DialogButtonsData;
+    footerButtons?: DialogButtonsData | DialogButtonsData[];
     testID?: string;
     [key: string]: unknown;
 }
@@ -32,12 +49,19 @@ type DialogButtonsData = DialogButtonData[];
 declare class SourceModalComponent {
     #private;
     readonly data: SourceModalData;
+    http: HttpClient;
+    sanitizer: DomSanitizer;
     size: _angular_core.WritableSignal<string>;
+    type: _angular_core.WritableSignal<SourceModalTypeKeys>;
     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 +144,11 @@ declare class SourceTabLineComponent {
     tabs: _angular_core.InputSignal<any[]>;
     label: _angular_core.InputSignal<string>;
     selectedIndex: _angular_core.InputSignal<number>;
+    tabStyle: _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 +162,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; }; "tabStyle": { "alias": "tabStyle"; "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 SourceTabStyle: {
+    DEFAULT: string;
+    BUTTON: string;
+};
+type SourceTabStyleKeys = (typeof SourceTabStyle)[keyof typeof SourceTabStyle];
+
 interface SourceTabData {
     title: string;
     data: any;
@@ -333,5 +364,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, SourceModalSize, SourceModalType, SourcePopoverComponent, SourcePopoverService, SourcePopoverTriggerComponent, SourceSliderGroupComponent, SourceTabComponent, SourceTabLineComponent, SourceTabStyle, SourceTabsComponent, SourceTooltipComponent, SourceTooltipDirective, SourceTooltipPosition, defaultSourcePopoverConfig, sourceModalIcon };
+export type { DialogButtonData, DialogButtonsData, SourceColorPickerOrientationKeys, SourceModalData, SourceModalSizeKeys, SourceModalTypeKeys, SourcePopoverData, SourceTabData, SourceTabStyleKeys, SourceTooltipData, SourceTooltipPositionKeys };

package/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sources":["../../../projects/3dsource/source-ui/src/lib/components/source-modal/constants/sourceModalSize.const.ts","../../../projects/3dsource/source-ui/src/lib/components/source-modal/constants/sourceModalIcon.const.ts","../../../projects/3dsource/source-ui/src/lib/components/source-modal/constants/sourceModalType.const.ts","../../../projects/3dsource/source-ui/src/lib/components/source-modal/interfaces/sourceModalData.interface.ts","../../../projects/3dsource/source-ui/src/lib/components/source-modal/components/source-modal.component.ts","../../../projects/3dsource/source-ui/src/lib/components/source-popover/components/source-popover.component.ts","../../../projects/3dsource/source-ui/src/lib/components/source-popover/components/source-popover-trigger.component.ts","../../../projects/3dsource/source-ui/src/lib/components/source-popover/interfaces/sourcePopoverData.interface.ts","../../../projects/3dsource/source-ui/src/lib/components/source-popover/interfaces/defaultSourcePopover.config.ts","../../../projects/3dsource/source-ui/src/lib/components/source-popover/services/sourcePopover.service.ts","../../../projects/3dsource/source-ui/src/lib/components/source-tab-line/components/source-tab-line.component.ts","../../../projects/3dsource/source-ui/src/lib/components/source-tab-line/constants/sourceTabStyle.const.ts","../../../projects/3dsource/source-ui/src/lib/components/source-tabs/interfaces/sourceTabData.interface.ts","../../../projects/3dsource/source-ui/src/lib/components/source-tabs/components/source-tabs/source-tabs.component.ts","../../../projects/3dsource/source-ui/src/lib/components/source-tabs/components/source-tab/source-tab.component.ts","../../../projects/3dsource/source-ui/src/lib/components/source-tooltip/components/source-tooltip.component.ts","../../../projects/3dsource/source-ui/src/lib/components/source-tooltip/interfaces/source-tooltip.interface.ts","../../../projects/3dsource/source-ui/src/lib/components/source-tooltip/directives/source-tooltip.directive.ts","../../../projects/3dsource/source-ui/src/lib/components/source-tooltip/tokens/sourceTooltipDataToken.ts","../../../projects/3dsource/source-ui/src/lib/components/source-color-picker/interfaces/source-color-picker.interface.ts","../../../projects/3dsource/source-ui/src/lib/components/source-color-picker/components/container/source-color-picker.component.ts","../../../projects/3dsource/source-ui/src/lib/components/source-color-picker/components/color-slider/color-slider.component.ts","../../../projects/3dsource/source-ui/src/lib/components/source-color-picker/components/color-palette/color-palette.component.ts","../../../projects/3dsource/source-ui/src/lib/components/source-slider-group/components/source-slider-group.component.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],"names":[],"mappings":";;;;;;;;;AAAA;;;;AAIM;;ACIN;;;;;ACRA;;;;;;;AAQM;;;;;;;;;;ACGJ;;AAGA;AACD;;AAGC;;;AAGD;AAEK;;ACCN;;AAcE;AACA;AACA;AACA;AACA;AAEA;AACA;AAKA;;;;;AAiCA;AAMA;;;AAMD;;AClFD;;;AAUE;AAKA;;;;;AAUD;;AChBD;;AASE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAiBA;AACA;AACA;AACA;AAIA;;;;AA6CD;;;ACvGC;;;;;;;;;;;;;;AAgBM;;AAED;;;;;AAKL;AACD;;AC3BD;;ACgBA;;;AASE;;;;;AAoGD;;AC9GD;AAUE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAOA;AAIA;AAGA;AAGA;AAEA;;;;AAoBD;;ACrFD;;;;AAIM;;;;;;ACAJ;AACD;;ACSD;AAQE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;AAKD;;AC7BD;AAQE;;;AACD;;ACND;;AAWE;AAIA;;;AAGD;;AC1BD;;;;;;AAOM;;;;;;;AASL;;ACOD;AAIE;AACA;AACA;AACA;AACA;AACA;;;;;;;;AAWA;;;;;;AAyDA;AAaA;AAiBA;AAwBA;AASA;;;AAOD;;ACzKD;;ACHA;;;;AAKM;;ACWN;AASE;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;;;;;;;AAyBD;;AC1CD;;AAQE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;AAC0C;AAC1C;AACA;AACA;AAEA;AAoBA;;;;;AAgCA;AAcA;AAmBA;AAcA;AASA;;;AAWD;;AC7ID;;AAQE;AAEA;AACA;AACA;AACA;AACA;;;;AAC0C;AAC1C;AACA;AACA;AAEA;AAYA;;;;;AAgCA;AASA;AAaA;AAeA;AASA;;;AAWD;;AC9HD;AASE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;;;;;;;AA8BD;;;"}

package/package.json

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

package/styles/material/form-field.scss

@@ -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)
@@ -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;

package/styles/material/toggle.scss

@@ -13,6 +13,7 @@
       track-outline-width: 1px,
       selected-track-outline-width: 0,
       disabled-unselected-track-outline-width: 0,
+
       track-outline-color: var(--src-border-input-basic, #d1d5db),
       handle-shape: var(--src-border-rounded-full, 9999px),
       track-shape: var(--src-border-rounded-full, 9999px),
@@ -43,7 +44,11 @@
       with-icon-handle-size: 20px,
       pressed-handle-size: 20px,
       selected-handle-size: 20px,
-
+      disabled-track-opacity: 1,
+      disabled-selected-handle-opacity: 1,
+      disabled-unselected-handle-opacity: 1,
+      disabled-unselected-icon-opacity: 1,
+      disabled-selected-icon-opacity: 1,
       selected-handle-color: var(--src-surface-container-main, #fff),
       selected-focus-handle-color: var(--src-surface-container-main, #fff),
       selected-hover-handle-color: var(--src-surface-container-main, #fff),
@@ -56,6 +61,8 @@
           --src-surface-bg,
           rgba(71, 85, 105, 0.24)
         ),
+      disabled-unselected-handle-color: var(--src-surface-container-main, #fff),
+      disabled-selected-handle-color: var(--src-surface-container-main, #fff),
       unselected-with-icon-handle-horizontal-margin: 0 2px,
       selected-with-icon-handle-horizontal-margin: 0 22px,
       handle-elevation-shadow: var(--matToggleShadow),
@@ -76,7 +83,7 @@
     font-weight: 500;
   }
 }
-.mat-internal-form-field {
+.mdc-form-field.mat-internal-form-field {
   & > label {
     padding-left: var(--src-gap-lg, var(--src-space-3));
   }
@@ -103,3 +110,11 @@
 .mdc-switch__ripple::after {
   display: none !important;
 }
+
+.mat-mdc-slide-toggle.src-toggle--size-sm {
+  --mat-slide-toggle-track-width: 36px;
+  --mat-slide-toggle-track-height: 20px;
+  --mat-slide-toggle-with-icon-handle-size: 16px;
+  --mat-slide-toggle-pressed-handle-size: 16px;
+  --mat-slide-toggle-selected-with-icon-handle-horizontal-margin: 0 18px;
+}