angular-split · Jefiozie · Nov 2, 2024 · Oct 29, 2024 · Nov 2, 2024 · Nov 2, 2024
diff --git a/projects/angular-split/src/lib/split/split.component.ts b/projects/angular-split/src/lib/split/split.component.ts
@@ -405,9 +405,11 @@ export class SplitComponent {
     this.ngZone.run(() => {
       this.dragStart.emit(this.createDragInteractionEvent(gutterIndex))
       this.draggedGutterIndex.set(gutterIndex)
+    })
 
-      this.dragMoveToPoint({ x: gutterMidPoint.x + xPointOffset, y: gutterMidPoint.y + yPointOffset }, dragStartContext)
+    this.dragMoveToPoint({ x: gutterMidPoint.x + xPointOffset, y: gutterMidPoint.y + yPointOffset }, dragStartContext)
 
+    this.ngZone.run(() => {
       this.dragEnd.emit(this.createDragInteractionEvent(gutterIndex))
       this.draggedGutterIndex.set(undefined)
     })

diff --git a/src/app/documentation/documentation.component.html b/src/app/documentation/documentation.component.html
@@ -8,7 +8,7 @@ <h4>
   <table class="table table-striped">
     <thead>
       <tr>
-        <th>&#64;Input()</th>
+        <th>Inputs</th>
         <th>Type</th>
         <th>Default</th>
         <th>Details</th>
@@ -28,7 +28,7 @@ <h4>
   <table class="table table-striped">
     <thead>
       <tr>
-        <th>&#64;Output()</th>
+        <th>Outputs</th>
         <th>Value</th>
         <th>Details</th>
       </tr>
@@ -65,7 +65,7 @@ <h4>
 
   <h4>
     <b>SplitAreaDirective</b>&nbsp;<span class="sel"
-      >(selector: '<span class="selContent">as-split-area, [as-split-area]</span>' / exportAs: '<span class="selContent"
+      >(selector: '<span class="selContent">as-split-area</span>' / exportAs: '<span class="selContent"
         >asSplitArea</span
       >')</span
     >
@@ -97,11 +97,11 @@ <h4>
       >(selector: '<span class="selContent">[asSplitGutter]</span> ')</span
     >
   </h4>
-  <p>Used as structural directive (*asSplitGutter) to customize the gutter.</p>
-  <p>Mostly requires width: 100% and height: 100% in order to fill the whole gutter.</p>
+  <p>Used as structural directive (<code>*asSplitGutter</code>) to customize the gutter.</p>
+  <p>Mostly requires <code>width: 100%</code> and <code>height: 100%</code> in order to fill the whole gutter.</p>
   <p>
-    If the custom gutter is wider than the declared gutter size (using gutterSize input) the areas will overflow too. So
-    attention is required to match the size of the gutter.
+    If the custom gutter is wider than the declared gutter size (using <code>gutterSize</code> input) the areas will
+    overflow too. So attention is required to match the size of the gutter.
   </p>
   <table class="table table-striped">
     <thead>
@@ -126,7 +126,7 @@ <h4>
       >(selector: '<span class="selContent">[asSplitGutterDragHandle]</span> ')</span
     >
   </h4>
-  <p>Used to declare an area inside asSplitGutter to be a drag handle</p>
+  <p>Used to declare an area inside <code>asSplitGutter</code> to be a drag handle</p>
   <p>Can be declared on multiple elements which means all of them are drag handles.</p>
   <br /><br />
 
@@ -135,15 +135,15 @@ <h4>
       >(selector: '<span class="selContent">[asSplitGutterExcludeFromDrag]</span> ')</span
     >
   </h4>
-  <p>Used to declare an area inside asSplitGutter to be excluded from drag</p>
+  <p>Used to declare an area inside <code>asSplitGutter</code> to be excluded from drag</p>
   <p>Can be declared on multiple elements which means all of them are excluded from drag.</p>
   <p>
-    asSplitGutterExcludeFromDrag inside asSplitGutterDragHandle works as expected (all of the element is a handle except
-    the excluded area)
+    <code>asSplitGutterExcludeFromDrag</code> inside <code>asSplitGutterDragHandle</code> works as expected (all of the
+    element is a handle except the excluded area)
   </p>
   <p>
-    asSplitGutterDragHandle inside asSplitGutterExcludeFromDrag is ignored and the whole element marked with exclude is
-    excluded.
+    <code>asSplitGutterDragHandle</code> inside <code>asSplitGutterExcludeFromDrag</code> is ignored and the whole
+    element marked with exclude is excluded.
   </p>
   <br /><br />
 

diff --git a/src/app/documentation/documentation.component.ts b/src/app/documentation/documentation.component.ts
@@ -36,14 +36,14 @@ export class DocumentationComponent {
     inputs: [
       {
         name: 'dir',
-        type: 'string',
+        type: 'SplitDir',
         default: '"ltr"',
         details:
           'Indicates the directionality of the areas: <code>"ltr"</code> (left to right) or <code>"rtl"</code> (right to left).',
       },
       {
         name: 'direction',
-        type: 'string',
+        type: 'SplitDirection',
         default: '"horizontal"',
         details: 'Select split direction: <code>"horizontal"</code> or <code>"vertical"</code>.',
       },
@@ -57,9 +57,10 @@ export class DocumentationComponent {
       {
         name: 'gutterAriaLabel',
         type: 'string',
-        default: 'null',
+        default: 'undefined',
         details: 'Aria label for the gutter.',
       },
+      // gutterClickDeltaPx
       {
         name: 'gutterDblClickDuration',
         type: 'number',
@@ -86,7 +87,7 @@ export class DocumentationComponent {
       },
       {
         name: 'unit',
-        type: 'string',
+        type: 'SplitUnit',
         default: '"percent"',
         details: `Selected unit you want to use: <code>"percent"</code> or <code>"pixel"</code> to specify area sizes.`,
       },
@@ -101,47 +102,36 @@ export class DocumentationComponent {
     outputs: [
       {
         name: 'dragEnd',
-        value: '{gutterNum: number, sizes: Array<number>}',
+        value: 'SplitGutterInteractionEvent',
         details: 'Emit when drag ends.',
       },
       {
         name: 'dragStart',
-        value: '{gutterNum: number, sizes: Array<number>}',
+        value: 'SplitGutterInteractionEvent',
         details: 'Emit when drag starts.',
       },
       {
         name: 'gutterDblClick',
-        value: '{gutterNum: number, sizes: Array<number>}',
+        value: 'SplitGutterInteractionEvent',
         details: 'Emit when user double clicks on a gutter. See <code>[gutterDblClickDuration]</code> input.',
       },
       {
         name: 'gutterClick',
-        value: '{gutterNum: number, sizes: Array<number>}',
+        value: 'SplitGutterInteractionEvent',
         details: 'Emit when user clicks on a gutter. See <code>[gutterDblClickDuration]</code> input.',
       },
       {
         name: 'transitionEnd',
-        value: 'Array<number>',
+        value: 'SplitAreaSize[]',
         details:
           'Emit when transition ends (could be triggered from <code>[visible]</code> or <code>[size]</code> changes).<br>Only if <code>[useTransition]="true"</code>.<br><u>Warning: Transitions are not working for <a href="https://github.com/philipwalton/flexbugs#flexbug-16">IE/Edge/Safari</a></u>',
       },
     ],
     class: [
       {
         name: 'dragProgress$',
-        type: 'Observable<{gutterNum: number, sizes: Array<number>}>',
-        details: `Emit when dragging. Replace old <code>(dragProgress)</code> template event for better flexibility about change detection mechanism.<br><u>Warning: Running outside zone by design, if you need to notify angular add</u> <code>this.splitEl.dragProgress$.subscribe(x => this.ngZone.run(() => this.x = x));</code>`,
-      },
-      {
-        name: 'getVisibleAreaSizes()',
-        type: '() => Array<number>',
-        details: 'Get all <b>visible</b> area sizes.',
-      },
-      {
-        name: 'setVisibleAreaSizes()',
-        type: '(Array<number>) => boolean',
-        details:
-          'Set all <b>visible</b> area sizes in one go, return a boolean to know if input values were correct. Useful when combined with <code>dragProgress$</code> to sync multiple splits.',
+        type: 'Observable<SplitGutterInteractionEvent>',
+        details: `Emits when dragging (mouse or keyboard).<br><u>Warning: Running outside zone by design.</u><br/>If you need to notify angular use <code>this.ngZone.run(() => ...));</code>`,
       },
     ],
   }
@@ -156,33 +146,27 @@ export class DocumentationComponent {
       },
       {
         name: 'maxSize',
-        type: 'number',
-        default: 'null',
+        type: 'SplitAreaSize',
+        default: '"*"',
         details: `Maximum pixel or percent size, should be equal to or larger than provided <code>[size]</code>.<br><u>Not working when <code>[size]="'*'"</code></u>`,
       },
       {
         name: 'minSize',
-        type: 'number',
-        default: 'null',
+        type: 'SplitAreaSize',
+        default: '"*"',
         details: `Minimum pixel or percent size, should be equal to or smaller than provided <code>[size]</code>.<br><u>Not working when <code>[size]="'*'"</code></u>`,
       },
-      {
-        name: 'order',
-        type: 'number',
-        default: 'null',
-        details: `Order of the area. Used to maintain the order of areas when toggling their visibility. Toggling area visibility without specifying an <code>order</code> leads to weird behavior`,
-      },
       {
         name: 'size',
-        type: "number|'*'",
-        default: '-',
-        details: `Size of the area in selected unit (<code>percent</code>/<code>pixel</code>).<br><u>Percent mode:</u> All areas sizes should equal to 100, If not, all areas will have the same size.<br><u>Pixel mode:</u> An area with  wildcard size (<code>[size]="'*'"</code>) is mandatory (only one) and can't have <code>[visible]="false"</code> or <code>minSize</code>/<code>maxSize</code>/<code>lockSize</code> properties.`,
+        type: "SplitAreaSize | 'auto'",
+        default: '"auto"',
+        details: `Size of the area in selected unit (<code>percent</code>/<code>pixel</code>).<br><u>Percent mode:</u> All areas sizes should equal to 100 or if there is a wildcard size (<code>[size]="'*'"</code>) should be less than 100. If no size input is declared on all areas - all areas will have the same size.<br><u>Pixel mode:</u> An area with  wildcard size (<code>[size]="'*'"</code>) is mandatory (only one) and can't have <code>[visible]="false"</code> or <code>minSize</code>/<code>maxSize</code>/<code>lockSize</code> properties.`,
       },
       {
         name: 'visible',
         type: 'boolean',
         default: 'true',
-        details: `Hide area visually but still present in the DOM, use <code>ngIf</code> to completely remove it.<br><u>Not working when <code>[size]="'*'"</code></u>`,
+        details: `Hide area visually but still present in the DOM, use <code>ngIf/@if</code> to completely remove it.<br><u>Not working when <code>[size]="'*'"</code></u>`,
       },
     ],
   }
@@ -191,12 +175,12 @@ export class DocumentationComponent {
     templateContext: [
       {
         name: 'areaBefore',
-        type: 'IArea',
+        type: 'SplitAreaComponent',
         details: 'The area before the gutter. In RTL the right area and in LTR the left area',
       },
       {
         name: 'areaAfter',
-        type: 'IArea',
+        type: 'SplitAreaComponent',
         details: 'The area after the gutter. In RTL the left area and in LTR the right area',
       },
       {
@@ -225,7 +209,6 @@ export class DocumentationComponent {
 
   readonly cssClasses = {
     split: [
-      { name: 'as-init', details: 'Added after component initialization.' },
       {
         name: 'as-horizontal / as-vertical',
         details: 'Depends on <code>&lt;as-split [direction]="x"&gt;</code>.',

diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
@@ -56,7 +56,7 @@ import { Component, VERSION } from '@angular/core'
         <h5>Install npm module:</h5>
         <pre [innerText]="code1"></pre>
         <br />
-        <h5>Add angular module to your app:</h5>
+        <h5>Add to your app:</h5>
         <pre [innerText]="code2"></pre>
         <br />
         <h5>Define splits in your template:</h5>
@@ -65,6 +65,12 @@ import { Component, VERSION } from '@angular/core'
         <h5>Add css theme in styles.css/scss for variables type hints (optional):</h5>
         <pre [innerText]="code4"></pre>
         <br />
+        <h5>Override global options (optional):</h5>
+        Global options can be declared on any injector level (root or any other injector). The global options can be
+        partially overridden at a lower level. That means you can declare for root a set of options and override part of
+        them on a route provider keeping the other options the same as in root.
+        <pre [innerText]="code5"></pre>
+        <br />
         <h5>Support:</h5>
         If you have an issue using the library, feel free to join our chat! We are part of the
         <a href="https://discord.gg/Qm9MPCg">Angular Community</a> Discord and you can ask questions in the
@@ -97,7 +103,8 @@ export class HomeComponent {
   version = VERSION.full
   code1 = `npm install angular-split`
 
-  code2 = `import { AngularSplitModule } from 'angular-split';
+  code2 = `// For NgModule based apps:
+import { AngularSplitModule } from 'angular-split';
 
 @NgModule({
   imports: [
@@ -106,7 +113,14 @@ export class HomeComponent {
   ],
   ...
 })
-export class AppModule {}`
+export class AppModule {}
+
+
+// For standalone apps
+@Component({
+  ...
+  imports: [SplitComponent, SplitAreaComponent, ...] // Or use AngularSplitModule
+})`
 
   code3 = `<div style="width: 500px; height: 500px; background: yellow;">
   <as-split direction="horizontal">
@@ -119,4 +133,5 @@ export class AppModule {}`
   </as-split>
 </div>`
   code4 = `@use/@import 'angular-split/theme';`
+  code5 = `provideAngularSplitOptions({...})`
 }