npm - @scion/components - Versions diffs - 22.4.0 → 22.5.0 - Mend

@scion/components 22.4.0 → 22.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/fesm2022/scion-components-common.mjs +48 -2
package/fesm2022/scion-components-common.mjs.map +1 -1
package/fesm2022/scion-components-menu.mjs +3 -9
package/fesm2022/scion-components-menu.mjs.map +1 -1
package/fesm2022/scion-components-splitter.mjs +1 -1
package/fesm2022/scion-components-splitter.mjs.map +1 -1
package/fesm2022/scion-components-table.mjs +260 -51
package/fesm2022/scion-components-table.mjs.map +1 -1
package/package.json +2 -2
package/types/scion-components-common.d.ts +36 -2
package/types/scion-components-table.d.ts +359 -37

package/fesm2022/scion-components-splitter.mjs CHANGED Viewed

@@ -66,7 +66,7 @@ class SciSplitterComponent {
     /**
      * Notifies when start moving the splitter.
      */
-    start = output(); // eslint-disable-line @angular-eslint/no-output-native
+    start = output();
     /**
      * Notifies when moving the splitter. The event is emitted outside the Angular zone.
      */

package/fesm2022/scion-components-splitter.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"scion-components-splitter.mjs","sources":["../../../../projects/scion/components/splitter/src/splitter.component.ts","../../../../projects/scion/components/splitter/src/splitter.component.html","../../../../projects/scion/components/splitter/src/public_api.ts","../../../../projects/scion/components/splitter/src/scion-components-splitter.ts"],"sourcesContent":["/\n Copyright (c) 2018-2019 Swiss Federal Railways\n \n This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n \n SPDX-License-Identifier: EPL-2.0\n /\n\nimport {ChangeDetectorRef, Component, computed, DestroyRef, DOCUMENT, effect, ElementRef, inject, input, NgZone, output, signal, untracked} from '@angular/core';\nimport {audit, fromEvent, merge, Observable, Subscription} from 'rxjs';\nimport {tapFirst} from '@scion/toolkit/operators';\nimport {first, takeUntil} from 'rxjs/operators';\nimport {takeUntilDestroyed} from '@angular/core/rxjs-interop';\n\n/\n Represents a splitter, a visual element that allows the user to control the size of elements next to it.\n \n The splitter has a handle that the user can move depending on the orientation of the splitter.\n \n Note that this control neither does change the size of adjacent elements nor does it (re-)position itself, but emits the distance by\n * which the user has theoretically moved the splitter. You must subscribe to these events and change your layout accordingly.\n \n In the toolkit, {@link SciSashboxComponent} uses this splitter to divide a layout into several resizable sections.\n * Another use case would be a resizable sidebar panel.\n \n ### Usage\n \n ```html\n * <sci-splitter (move)=\"onSplitterMove($event.distance)\"></sci-splitter>\n * ```\n \n ### Styling\n \n To customize the default look of SCION components or support different themes, configure the `@scion/components` SCSS module in `styles.scss`.\n * To style a specific `sci-splitter` component, the following CSS variables can be set directly on the component.\n \n - --sci-splitter-background-color: Sets the background color of the splitter.\n * - --sci-splitter-background-color-hover: Sets the background color of the splitter when hovering it.\n * - --sci-splitter-size: Sets the size of the splitter along the main axis.\n * - --sci-splitter-size-hover: Sets the size of the splitter along the main axis when hovering it.\n * - --sci-splitter-touch-target-size: Sets the touch target size to move the splitter (accessibility).\n * - --sci-splitter-cross-axis-size: Sets the splitter size along the cross-axis. Defaults to `100%`.\n * - --sci-splitter-cross-axis-start: Sets the splitter's start position. Defaults to `auto`.\n * - --sci-splitter-cross-axis-end: Sets the splitter's end position. Defaults to `auto`. Requires `--sci-splitter-cross-axis-size: auto`.\n * - --sci-splitter-border-radius: Sets the border radius of the splitter. Defaults to 0.\n * - --sci-splitter-opacity-active: Sets the opacity of the splitter while the user moves the splitter.\n * - --sci-splitter-opacity-hover: Sets the opacity of the splitter when hovering it.\n \n Example:\n \n ```scss\n * sci-splitter {\n * --sci-splitter-background-color: black;\n * --sci-splitter-background-color-hover: black;\n * }\n * ```\n /\n@Component({\n selector: 'sci-splitter',\n templateUrl: './splitter.component.html',\n styleUrls: ['./splitter.component.scss'],\n host: {\n '[class.moving]': 'moving()',\n '[class.horizontal]': 'isHorizontal()',\n '[class.vertical]': 'isVertical()',\n '[style.cursor]': 'splitterCursor()',\n },\n})\nexport class SciSplitterComponent {\n\n /\n Controls whether to render a vertical or horizontal splitter. By default, if not specified, renders a vertical splitter.\n /\n public readonly orientation = input<'vertical' \| 'horizontal'>('vertical');\n\n /\n Notifies when start moving the splitter.\n /\n public readonly start = output<void>(); // eslint-disable-line @angular-eslint/no-output-native\n\n /\n Notifies when moving the splitter. The event is emitted outside the Angular zone.\n /\n public readonly move = output<SplitterMoveEvent>();\n\n /\n Notifies when end moving the splitter.\n /\n public readonly end = output<void>();\n\n /\n Notifies when resetting the splitter position.\n /\n public readonly reset = output<void>(); // eslint-disable-line @angular-eslint/no-output-native\n\n private readonly _zone = inject(NgZone);\n private readonly _cd = inject(ChangeDetectorRef);\n private readonly _document = inject(DOCUMENT);\n private readonly _destroyRef = inject(DestroyRef);\n\n protected readonly moving = signal(false);\n protected readonly isHorizontal = computed(() => this.orientation() === 'horizontal');\n protected readonly isVertical = computed(() => !this.isHorizontal());\n protected readonly splitterCursor = computed(() => this.isVertical() ? 'ew-resize' : 'ns-resize');\n\n constructor() {\n const host = inject(ElementRef).nativeElement as HTMLElement;\n\n effect(onCleanup => {\n const subscription = new Subscription();\n\n untracked(() => {\n // Install event listeners on the host element instead of the touch target, enabling tests to target `sci-splitter`\n // to perform a mousedown or double-click. The user can still interact with the touch target because events bubble up.\n subscription.add(fromEvent(host, 'dblclick').subscribe(() => this.onReset()));\n subscription.add(fromEvent<TouchEvent>(host, 'touchstart').subscribe((event: TouchEvent) => this.onTouchStart(event)));\n subscription.add(fromEvent<MouseEvent>(host, 'mousedown').subscribe((event: MouseEvent) => this.onMouseDown(event)));\n });\n\n onCleanup(() => subscription.unsubscribe());\n });\n }\n\n private onReset(): void {\n this.reset.emit();\n }\n\n private onTouchStart(startEvent: TouchEvent): void {\n this.installMoveListener({\n startEvent: startEvent,\n moveEventNames: ['touchmove'],\n endEventNames: ['touchend', 'touchcancel'],\n eventPositionFn: (touchEvent: TouchEvent): EventPosition => {\n const touch: Touch = touchEvent.touches[0]!;\n if (this.isVertical()) {\n return {screenPos: touch.screenX, clientPos: touch.clientX, pagePos: touch.pageX};\n }\n else {\n return {screenPos: touch.screenY, clientPos: touch.clientY, pagePos: touch.pageY};\n }\n },\n });\n }\n\n private onMouseDown(startEvent: MouseEvent): void {\n if (startEvent.button !== 0) {\n return;\n }\n\n this.installMoveListener({\n startEvent: startEvent,\n moveEventNames: ['mousemove', 'sci-mousemove'],\n endEventNames: ['mouseup', 'sci-mouseup'],\n eventPositionFn: (mouseEvent: MouseEvent): EventPosition => {\n if (this.isVertical()) {\n return {screenPos: mouseEvent.screenX, clientPos: mouseEvent.clientX, pagePos: mouseEvent.pageX};\n }\n else {\n return {screenPos: mouseEvent.screenY, clientPos: mouseEvent.clientY, pagePos: mouseEvent.pageY};\n }\n },\n });\n }\n\n private installMoveListener<EVENT extends Event>(config: {startEvent: EVENT; moveEventNames: string[]; endEventNames: string[]; eventPositionFn: (event: EVENT) => EventPosition}): void {\n const startEvent = config.startEvent;\n\n startEvent.preventDefault();\n\n this._zone.runOutsideAngular(() => {\n // install listeners on document level to allow fast dragging the splitter.\n const moveEvent$ = merge(...config.moveEventNames.map(eventName => fromEvent<EVENT>(this._document, eventName)));\n const endEvent$ = merge(...config.endEventNames.map(eventName => fromEvent<EVENT>(this._document, eventName)));\n let lastClientPos = config.eventPositionFn(startEvent).clientPos;\n\n // Apply cursor on document level to prevent flickering while moving the splitter\n const oldDocumentCursor = this._document.body.style.cursor;\n this._document.body.style.cursor = this.splitterCursor();\n\n // Listen for 'move' events until stop moving the splitter\n moveEvent$\n .pipe(\n tapFirst(() => this._zone.run(() => {\n this.moving.set(true);\n this.start.emit();\n this._cd.markForCheck();\n })),\n // Throttle emission to a single event per animation frame.\n audit(() => nextAnimationFrame$()),\n takeUntilDestroyed(this._destroyRef),\n takeUntil(endEvent$),\n )\n .subscribe((moveEvent: EVENT) => {\n NgZone.assertNotInAngularZone();\n\n const eventPos = config.eventPositionFn(moveEvent);\n const newClientPos = eventPos.clientPos;\n const distance = newClientPos - lastClientPos;\n lastClientPos = newClientPos;\n\n this.move.emit({distance, position: eventPos});\n });\n\n // Listen for 'end' events; call 'stop propagation' to not close overlays\n endEvent$\n .pipe(\n first(),\n takeUntilDestroyed(this._destroyRef),\n )\n .subscribe((endEvent: EVENT) => {\n endEvent.stopPropagation();\n this._document.body.style.cursor = oldDocumentCursor;\n this.moving() && this._zone.run(() => {\n this.end.emit();\n this.moving.set(false);\n this._cd.markForCheck();\n });\n });\n });\n }\n}\n\nexport interface EventPosition {\n clientPos: number;\n pagePos: number;\n screenPos: number;\n}\n\n/\n Event that is emitted when moving the splitter.\n /\nexport interface SplitterMoveEvent {\n /\n The distance in pixels by which the user has moved the splitter since the last emission.\n /\n distance: number;\n /\n The position where the mouse or touch event has occurred.\n /\n position: EventPosition;\n}\n\n/\n Emits when the next animation frame is executed.\n \n Unlike using `timer(0, animationFrameScheduler)`, this observable emits within the zone where it is subscribed.\n \n Note that the RxJS `animationFrameScheduler` may not necessarily execute in the current execution context, such as inside or outside Angular.\n * The scheduler always executes tasks in the zone where it was first used in the application.\n /\nfunction nextAnimationFrame$(): Observable<void> {\n return new Observable<void>(observer => {\n const animationFrame = requestAnimationFrame(() => observer.next());\n return () => cancelAnimationFrame(animationFrame);\n });\n}\n","<div class=\"touch-target\">\n <div class=\"handle e2e-handle\"></div>\n</div>\n","/\n * Copyright (c) 2018-2019 Swiss Federal Railways\n \n This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n \n SPDX-License-Identifier: EPL-2.0\n /\n\n/\n * Secondary entrypoint: '@scion/components/splitter'\n \n @see https://github.com/ng-packagr/ng-packagr/blob/master/docs/secondary-entrypoints.md\n /\nexport {SciSplitterComponent, type SplitterMoveEvent, type EventPosition} from './splitter.component';\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":";;;;;;;AAAA;;;;;;;;AAQG;AAQH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CG;MAYU,oBAAoB,CAAA;AAE/B;;AAEG;IACa,WAAW,GAAG,KAAK,CAA4B,UAAU;oFAAC;AAE1E;;AAEG;AACa,IAAA,KAAK,GAAG,MAAM,EAAQ,CAAC;AAEvC;;AAEG;IACa,IAAI,GAAG,MAAM,EAAqB;AAElD;;AAEG;IACa,GAAG,GAAG,MAAM,EAAQ;AAEpC;;AAEG;AACa,IAAA,KAAK,GAAG,MAAM,EAAQ,CAAC;AAEtB,IAAA,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC;AACtB,IAAA,GAAG,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAC/B,IAAA,SAAS,GAAG,MAAM,CAAC,QAAQ,CAAC;AAC5B,IAAA,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC;IAE9B,MAAM,GAAG,MAAM,CAAC,KAAK;+EAAC;IACtB,YAAY,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,WAAW,EAAE,KAAK,YAAY;qFAAC;IAClE,UAAU,GAAG,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,EAAE;mFAAC;AACjD,IAAA,cAAc,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,UAAU,EAAE,GAAG,WAAW,GAAG,WAAW;uFAAC;AAEjG,IAAA,WAAA,GAAA;QACE,MAAM,IAAI,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,aAA4B;QAE5D,MAAM,CAAC,SAAS,IAAG;AACjB,YAAA,MAAM,YAAY,GAAG,IAAI,YAAY,EAAE;YAEvC,SAAS,CAAC,MAAK;;;gBAGb,YAAY,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;gBAC7E,YAAY,CAAC,GAAG,CAAC,SAAS,CAAa,IAAI,EAAE,YAAY,CAAC,CAAC,SAAS,CAAC,CAAC,KAAiB,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;gBACtH,YAAY,CAAC,GAAG,CAAC,SAAS,CAAa,IAAI,EAAE,WAAW,CAAC,CAAC,SAAS,CAAC,CAAC,KAAiB,KAAK,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC;AACtH,YAAA,CAAC,CAAC;YAEF,SAAS,CAAC,MAAM,YAAY,CAAC,WAAW,EAAE,CAAC;AAC7C,QAAA,CAAC,CAAC;IACJ;IAEQ,OAAO,GAAA;AACb,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;IACnB;AAEQ,IAAA,YAAY,CAAC,UAAsB,EAAA;QACzC,IAAI,CAAC,mBAAmB,CAAC;AACvB,YAAA,UAAU,EAAE,UAAU;YACtB,cAAc,EAAE,CAAC,WAAW,CAAC;AAC7B,YAAA,aAAa,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC;AAC1C,YAAA,eAAe,EAAE,CAAC,UAAsB,KAAmB;gBACzD,MAAM,KAAK,GAAU,UAAU,CAAC,OAAO,CAAC,CAAC,CAAE;AAC3C,gBAAA,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE;AACrB,oBAAA,OAAO,EAAC,SAAS,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,KAAK,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,KAAK,EAAC;gBACnF;qBACK;AACH,oBAAA,OAAO,EAAC,SAAS,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,KAAK,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,KAAK,EAAC;gBACnF;YACF,CAAC;AACF,SAAA,CAAC;IACJ;AAEQ,IAAA,WAAW,CAAC,UAAsB,EAAA;AACxC,QAAA,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC,EAAE;YAC3B;QACF;QAEA,IAAI,CAAC,mBAAmB,CAAC;AACvB,YAAA,UAAU,EAAE,UAAU;AACtB,YAAA,cAAc,EAAE,CAAC,WAAW,EAAE,eAAe,CAAC;AAC9C,YAAA,aAAa,EAAE,CAAC,SAAS,EAAE,aAAa,CAAC;AACzC,YAAA,eAAe,EAAE,CAAC,UAAsB,KAAmB;AACzD,gBAAA,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE;AACrB,oBAAA,OAAO,EAAC,SAAS,EAAE,UAAU,CAAC,OAAO,EAAE,SAAS,EAAE,UAAU,CAAC,OAAO,EAAE,OAAO,EAAE,UAAU,CAAC,KAAK,EAAC;gBAClG;qBACK;AACH,oBAAA,OAAO,EAAC,SAAS,EAAE,UAAU,CAAC,OAAO,EAAE,SAAS,EAAE,UAAU,CAAC,OAAO,EAAE,OAAO,EAAE,UAAU,CAAC,KAAK,EAAC;gBAClG;YACF,CAAC;AACF,SAAA,CAAC;IACJ;AAEQ,IAAA,mBAAmB,CAAsB,MAAgI,EAAA;AAC/K,QAAA,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU;QAEpC,UAAU,CAAC,cAAc,EAAE;AAE3B,QAAA,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,MAAK;;YAEhC,MAAM,UAAU,GAAG,KAAK,CAAC,GAAG,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,SAAS,IAAI,SAAS,CAAQ,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC;YAChH,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,MAAM,CAAC,aAAa,CAAC,GAAG,CAAC,SAAS,IAAI,SAAS,CAAQ,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC;YAC9G,IAAI,aAAa,GAAG,MAAM,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,SAAS;;YAGhE,MAAM,iBAAiB,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM;AAC1D,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,cAAc,EAAE;;YAGxD;AACG,iBAAA,IAAI,CACH,QAAQ,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,MAAK;AACjC,gBAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC;AACrB,gBAAA,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;AACjB,gBAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;AACzB,YAAA,CAAC,CAAC,CAAC;;AAEH,YAAA,KAAK,CAAC,MAAM,mBAAmB,EAAE,CAAC,EAClC,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC,EACpC,SAAS,CAAC,SAAS,CAAC;AAErB,iBAAA,SAAS,CAAC,CAAC,SAAgB,KAAI;gBAC9B,MAAM,CAAC,sBAAsB,EAAE;gBAE/B,MAAM,QAAQ,GAAG,MAAM,CAAC,eAAe,CAAC,SAAS,CAAC;AAClD,gBAAA,MAAM,YAAY,GAAG,QAAQ,CAAC,SAAS;AACvC,gBAAA,MAAM,QAAQ,GAAG,YAAY,GAAG,aAAa;gBAC7C,aAAa,GAAG,YAAY;AAE5B,gBAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAC,CAAC;AAChD,YAAA,CAAC,CAAC;;YAGJ;iBACG,IAAI,CACH,KAAK,EAAE,EACP,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC;AAErC,iBAAA,SAAS,CAAC,CAAC,QAAe,KAAI;gBAC7B,QAAQ,CAAC,eAAe,EAAE;gBAC1B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,iBAAiB;gBACpD,IAAI,CAAC,MAAM,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,MAAK;AACnC,oBAAA,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE;AACf,oBAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC;AACtB,oBAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;AACzB,gBAAA,CAAC,CAAC;AACJ,YAAA,CAAC,CAAC;AACN,QAAA,CAAC,CAAC;IACJ;uGAvJW,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAApB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,ucCtEjC,mFAGA,EAAA,MAAA,EAAA,CAAA,42DAAA,CAAA,EAAA,CAAA;;2FDmEa,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAXhC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,EAAA,IAAA,EAGlB;AACJ,wBAAA,gBAAgB,EAAE,UAAU;AAC5B,wBAAA,oBAAoB,EAAE,gBAAgB;AACtC,wBAAA,kBAAkB,EAAE,cAAc;AAClC,wBAAA,gBAAgB,EAAE,kBAAkB;AACrC,qBAAA,EAAA,QAAA,EAAA,mFAAA,EAAA,MAAA,EAAA,CAAA,42DAAA,CAAA,EAAA;;AAgLH;;;;;;;AAOG;AACH,SAAS,mBAAmB,GAAA;AAC1B,IAAA,OAAO,IAAI,UAAU,CAAO,QAAQ,IAAG;AACrC,QAAA,MAAM,cAAc,GAAG,qBAAqB,CAAC,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;AACnE,QAAA,OAAO,MAAM,oBAAoB,CAAC,cAAc,CAAC;AACnD,IAAA,CAAC,CAAC;AACJ;;AEjQA;;;;;;;;AAQG;AAEH;;;;AAIG;;ACdH;;AAEG;;"}
1	+ {"version":3,"file":"scion-components-splitter.mjs","sources":["../../../../projects/scion/components/splitter/src/splitter.component.ts","../../../../projects/scion/components/splitter/src/splitter.component.html","../../../../projects/scion/components/splitter/src/public_api.ts","../../../../projects/scion/components/splitter/src/scion-components-splitter.ts"],"sourcesContent":["/\n Copyright (c) 2018-2019 Swiss Federal Railways\n \n This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n \n SPDX-License-Identifier: EPL-2.0\n /\n\nimport {ChangeDetectorRef, Component, computed, DestroyRef, DOCUMENT, effect, ElementRef, inject, input, NgZone, output, signal, untracked} from '@angular/core';\nimport {audit, fromEvent, merge, Observable, Subscription} from 'rxjs';\nimport {tapFirst} from '@scion/toolkit/operators';\nimport {first, takeUntil} from 'rxjs/operators';\nimport {takeUntilDestroyed} from '@angular/core/rxjs-interop';\n\n/\n Represents a splitter, a visual element that allows the user to control the size of elements next to it.\n \n The splitter has a handle that the user can move depending on the orientation of the splitter.\n \n Note that this control neither does change the size of adjacent elements nor does it (re-)position itself, but emits the distance by\n * which the user has theoretically moved the splitter. You must subscribe to these events and change your layout accordingly.\n \n In the toolkit, {@link SciSashboxComponent} uses this splitter to divide a layout into several resizable sections.\n * Another use case would be a resizable sidebar panel.\n \n ### Usage\n \n ```html\n * <sci-splitter (move)=\"onSplitterMove($event.distance)\"></sci-splitter>\n * ```\n \n ### Styling\n \n To customize the default look of SCION components or support different themes, configure the `@scion/components` SCSS module in `styles.scss`.\n * To style a specific `sci-splitter` component, the following CSS variables can be set directly on the component.\n \n - --sci-splitter-background-color: Sets the background color of the splitter.\n * - --sci-splitter-background-color-hover: Sets the background color of the splitter when hovering it.\n * - --sci-splitter-size: Sets the size of the splitter along the main axis.\n * - --sci-splitter-size-hover: Sets the size of the splitter along the main axis when hovering it.\n * - --sci-splitter-touch-target-size: Sets the touch target size to move the splitter (accessibility).\n * - --sci-splitter-cross-axis-size: Sets the splitter size along the cross-axis. Defaults to `100%`.\n * - --sci-splitter-cross-axis-start: Sets the splitter's start position. Defaults to `auto`.\n * - --sci-splitter-cross-axis-end: Sets the splitter's end position. Defaults to `auto`. Requires `--sci-splitter-cross-axis-size: auto`.\n * - --sci-splitter-border-radius: Sets the border radius of the splitter. Defaults to 0.\n * - --sci-splitter-opacity-active: Sets the opacity of the splitter while the user moves the splitter.\n * - --sci-splitter-opacity-hover: Sets the opacity of the splitter when hovering it.\n \n Example:\n \n ```scss\n * sci-splitter {\n * --sci-splitter-background-color: black;\n * --sci-splitter-background-color-hover: black;\n * }\n * ```\n /\n@Component({\n selector: 'sci-splitter',\n templateUrl: './splitter.component.html',\n styleUrls: ['./splitter.component.scss'],\n host: {\n '[class.moving]': 'moving()',\n '[class.horizontal]': 'isHorizontal()',\n '[class.vertical]': 'isVertical()',\n '[style.cursor]': 'splitterCursor()',\n },\n})\nexport class SciSplitterComponent {\n\n /\n Controls whether to render a vertical or horizontal splitter. By default, if not specified, renders a vertical splitter.\n /\n public readonly orientation = input<'vertical' \| 'horizontal'>('vertical');\n\n /\n Notifies when start moving the splitter.\n /\n public readonly start = output<void>();\n\n /\n Notifies when moving the splitter. The event is emitted outside the Angular zone.\n /\n public readonly move = output<SplitterMoveEvent>();\n\n /\n Notifies when end moving the splitter.\n /\n public readonly end = output<void>();\n\n /\n Notifies when resetting the splitter position.\n /\n public readonly reset = output<void>(); // eslint-disable-line @angular-eslint/no-output-native\n\n private readonly _zone = inject(NgZone);\n private readonly _cd = inject(ChangeDetectorRef);\n private readonly _document = inject(DOCUMENT);\n private readonly _destroyRef = inject(DestroyRef);\n\n protected readonly moving = signal(false);\n protected readonly isHorizontal = computed(() => this.orientation() === 'horizontal');\n protected readonly isVertical = computed(() => !this.isHorizontal());\n protected readonly splitterCursor = computed(() => this.isVertical() ? 'ew-resize' : 'ns-resize');\n\n constructor() {\n const host = inject(ElementRef).nativeElement as HTMLElement;\n\n effect(onCleanup => {\n const subscription = new Subscription();\n\n untracked(() => {\n // Install event listeners on the host element instead of the touch target, enabling tests to target `sci-splitter`\n // to perform a mousedown or double-click. The user can still interact with the touch target because events bubble up.\n subscription.add(fromEvent(host, 'dblclick').subscribe(() => this.onReset()));\n subscription.add(fromEvent<TouchEvent>(host, 'touchstart').subscribe((event: TouchEvent) => this.onTouchStart(event)));\n subscription.add(fromEvent<MouseEvent>(host, 'mousedown').subscribe((event: MouseEvent) => this.onMouseDown(event)));\n });\n\n onCleanup(() => subscription.unsubscribe());\n });\n }\n\n private onReset(): void {\n this.reset.emit();\n }\n\n private onTouchStart(startEvent: TouchEvent): void {\n this.installMoveListener({\n startEvent: startEvent,\n moveEventNames: ['touchmove'],\n endEventNames: ['touchend', 'touchcancel'],\n eventPositionFn: (touchEvent: TouchEvent): EventPosition => {\n const touch: Touch = touchEvent.touches[0]!;\n if (this.isVertical()) {\n return {screenPos: touch.screenX, clientPos: touch.clientX, pagePos: touch.pageX};\n }\n else {\n return {screenPos: touch.screenY, clientPos: touch.clientY, pagePos: touch.pageY};\n }\n },\n });\n }\n\n private onMouseDown(startEvent: MouseEvent): void {\n if (startEvent.button !== 0) {\n return;\n }\n\n this.installMoveListener({\n startEvent: startEvent,\n moveEventNames: ['mousemove', 'sci-mousemove'],\n endEventNames: ['mouseup', 'sci-mouseup'],\n eventPositionFn: (mouseEvent: MouseEvent): EventPosition => {\n if (this.isVertical()) {\n return {screenPos: mouseEvent.screenX, clientPos: mouseEvent.clientX, pagePos: mouseEvent.pageX};\n }\n else {\n return {screenPos: mouseEvent.screenY, clientPos: mouseEvent.clientY, pagePos: mouseEvent.pageY};\n }\n },\n });\n }\n\n private installMoveListener<EVENT extends Event>(config: {startEvent: EVENT; moveEventNames: string[]; endEventNames: string[]; eventPositionFn: (event: EVENT) => EventPosition}): void {\n const startEvent = config.startEvent;\n\n startEvent.preventDefault();\n\n this._zone.runOutsideAngular(() => {\n // install listeners on document level to allow fast dragging the splitter.\n const moveEvent$ = merge(...config.moveEventNames.map(eventName => fromEvent<EVENT>(this._document, eventName)));\n const endEvent$ = merge(...config.endEventNames.map(eventName => fromEvent<EVENT>(this._document, eventName)));\n let lastClientPos = config.eventPositionFn(startEvent).clientPos;\n\n // Apply cursor on document level to prevent flickering while moving the splitter\n const oldDocumentCursor = this._document.body.style.cursor;\n this._document.body.style.cursor = this.splitterCursor();\n\n // Listen for 'move' events until stop moving the splitter\n moveEvent$\n .pipe(\n tapFirst(() => this._zone.run(() => {\n this.moving.set(true);\n this.start.emit();\n this._cd.markForCheck();\n })),\n // Throttle emission to a single event per animation frame.\n audit(() => nextAnimationFrame$()),\n takeUntilDestroyed(this._destroyRef),\n takeUntil(endEvent$),\n )\n .subscribe((moveEvent: EVENT) => {\n NgZone.assertNotInAngularZone();\n\n const eventPos = config.eventPositionFn(moveEvent);\n const newClientPos = eventPos.clientPos;\n const distance = newClientPos - lastClientPos;\n lastClientPos = newClientPos;\n\n this.move.emit({distance, position: eventPos});\n });\n\n // Listen for 'end' events; call 'stop propagation' to not close overlays\n endEvent$\n .pipe(\n first(),\n takeUntilDestroyed(this._destroyRef),\n )\n .subscribe((endEvent: EVENT) => {\n endEvent.stopPropagation();\n this._document.body.style.cursor = oldDocumentCursor;\n this.moving() && this._zone.run(() => {\n this.end.emit();\n this.moving.set(false);\n this._cd.markForCheck();\n });\n });\n });\n }\n}\n\nexport interface EventPosition {\n clientPos: number;\n pagePos: number;\n screenPos: number;\n}\n\n/\n Event that is emitted when moving the splitter.\n /\nexport interface SplitterMoveEvent {\n /\n The distance in pixels by which the user has moved the splitter since the last emission.\n /\n distance: number;\n /\n The position where the mouse or touch event has occurred.\n /\n position: EventPosition;\n}\n\n/\n Emits when the next animation frame is executed.\n \n Unlike using `timer(0, animationFrameScheduler)`, this observable emits within the zone where it is subscribed.\n \n Note that the RxJS `animationFrameScheduler` may not necessarily execute in the current execution context, such as inside or outside Angular.\n * The scheduler always executes tasks in the zone where it was first used in the application.\n /\nfunction nextAnimationFrame$(): Observable<void> {\n return new Observable<void>(observer => {\n const animationFrame = requestAnimationFrame(() => observer.next());\n return () => cancelAnimationFrame(animationFrame);\n });\n}\n","<div class=\"touch-target\">\n <div class=\"handle e2e-handle\"></div>\n</div>\n","/\n * Copyright (c) 2018-2019 Swiss Federal Railways\n \n This program and the accompanying materials are made\n * available under the terms of the Eclipse Public License 2.0\n * which is available at https://www.eclipse.org/legal/epl-2.0/\n \n SPDX-License-Identifier: EPL-2.0\n /\n\n/\n * Secondary entrypoint: '@scion/components/splitter'\n \n @see https://github.com/ng-packagr/ng-packagr/blob/master/docs/secondary-entrypoints.md\n /\nexport {SciSplitterComponent, type SplitterMoveEvent, type EventPosition} from './splitter.component';\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}