@3dsource/source-ui 0.0.28 → 0.0.30

package/README.md

@@ -1,6 +1,7 @@
 # @3dsource/source-ui
 
-A comprehensive library of Angular UI components designed specifically for 3D visualization applications. This library extends Angular Material with specialized components for 3D content interaction.
+A comprehensive library of Angular UI components designed specifically for 3D visualization applications. This library
+extends Angular Material with specialized components for 3D content interaction.
 
 ## Overview
 
@@ -9,7 +10,7 @@ The Source UI library provides Angular components that are optimized for 3D appl
 - Specialized UI controls for 3D scene manipulation
 - Integration with Angular Material design system
 - Responsive and accessible components
-- Consistent styling across 3dsource applications
+- Consistent styling across 3D Source applications
 
 ## Installation
 
@@ -31,12 +32,6 @@ This library requires the following peer dependencies:
 }
 ```
 
-Install peer dependencies:
-
-```shell
-  npx install-peerdeps @3dsource/source-ui
-```
-
 ### Library Installation
 
 ```shell
@@ -45,79 +40,79 @@ Install peer dependencies:
 
 ## Usage
 
-### Module Import
+### Style imports
 
-Import the SourceUiModule in your Angular application:
+Import both styles for SourceUI Native and SourceUI in your style.scss
 
-```typescript
-import { SourceUiModule } from '@3dsource/source-ui';
+```scss
+// Source UI Native
+@use '../node_modules/@3dsource/source-ui-native/styles/source.ui.native.scss' as source-ui-native;
+// Source UI
+@use '../node_modules/@3dsource/source-ui/styles/source.ui.scss' as source-ui;
 
-@NgModule({
-  imports: [SourceUiModule],
-})
-export class AppModule {}
+`
+;
 ```
 
-### Using Components
+### Material settings
 
-After importing the module, you can use the components in your templates:
+For correct styling provide neccessary outline option for form elements in your appConfig
 
-```html
-<source-3d-viewer [model]="modelUrl"></source-3d-viewer>
+```typescript
+{
+  provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+    useValue
+:
+  {
+    appearance: 'outline'
+  }
+,
+}
+,
 ```
 
-## Available Components
+### Import
 
-- **3D Viewers** - Components for displaying 3D models
-- **Control Panels** - UI controls for manipulating 3D scenes
-- **Property Editors** - Components for editing 3D object properties
-- **Navigation Controls** - Components for navigating 3D spaces
-- **Material Pickers** - Components for selecting materials and textures
+Import desired component and use it in template as described in components documentation.
 
-## Component Examples
+```typescript
+import { SourceSliderGroupComponent } from '@3dsource/source-ui';
 
-### 3D Viewer
+@NgModule({
+  imports: [SourceSliderGroupComponent],
+})
+export class AppComponent {
+  value = signal(15);
 
-```html
-<source-3d-viewer [model]="'assets/models/example.glb'" [autoRotate]="true" [controls]="true"> </source-3d-viewer>
+  groupValueChange(value: number) {
+    console.log('Group value changed:', value);
+  }
+}
 ```
 
-### Control Panel
-
 ```html
-<source-control-panel>
-  <source-slider label="Zoom" [min]="0.1" [max]="10" [(value)]="zoomLevel"> </source-slider>
-</source-control-panel>
+<src-slider-group label="Slider Group" [min]="0" [max]="100" [step]="1" units="" [showRange]="true" [value]="value()" (groupValueChange)="groupValueChange($event)"></src-slider-group>
 ```
 
-## Theming
+## Available Components and Examples
 
-The library supports Angular Material theming:
+- **[src-colorpicker](https://preview.3dsource.com/front-libraries/master/#/components/SourceBadgeComponent)** - Highly
+  customizable colorpicker
+- **[src-modal](https://preview.3dsource.com/front-libraries/master/#/components/SourceModalComponent)** - Service modal
+  component
+- **[src-popover](https://preview.3dsource.com/front-libraries/master/#/components/SourcePopoverComponent)** - Popover
+  with trigger or Service
+- **[src-slider-group](https://preview.3dsource.com/front-libraries/master/#/components/SourceSliderGroupComponent)** -
+  Advanced variant of slider
+- **[src-tabs](https://preview.3dsource.com/front-libraries/master/#/components/SourceTabsComponent)** - Tabs in two
+  options of usage
+- **[src-tooltip](https://preview.3dsource.com/front-libraries/master/#/components/SourceTooltipComponent)** - Directive
+  for custom tooltips
 
-```scss
-@use '@angular/material' as mat;
-@use '@3dsource/source-ui/theming' as source-ui;
-
-$my-primary: mat.define-palette(mat.$indigo-palette);
-$my-accent: mat.define-palette(mat.$pink-palette);
-
-$my-theme: mat.define-light-theme(
-  (
-    color: (
-      primary: $my-primary,
-      accent: $my-accent,
-    ),
-  )
-);
-
-@include mat.all-component-themes($my-theme);
-@include source-ui.theme($my-theme);
-```
-
-## Examples
+## Customization
 
-Check the demo application for complete usage examples:
+Customization provided in the same way as in SourceUI Native. Whole table of CSS custom properties is available in
+the \* \*[documentation site](https://preview.3dsource.com/front-libraries/master/#/components/design-tokens)\*\*.
 
-```shell
-  npm run demo:start
-```
+You can see all available options and examples
+in \* \*[documentation](https://preview.3dsource.com/front-libraries/master/#/components/getting-started)\*\*