UNPKG

@nebular/theme

Version:
173 lines 7.54 kB
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; var __metadata = (this && this.__metadata) || function (k, v) { if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); }; var __param = (this && this.__param) || function (paramIndex, decorator) { return function (target, key) { decorator(target, key, paramIndex); } }; import { Inject, Injectable } from '@angular/core'; import { map } from 'rxjs/operators'; import { NB_DOCUMENT } from '../../../theme.options'; import { NbFlexibleConnectedPositionStrategy, NbOverlayPositionBuilder, NbPlatform, } from './mapping'; import { NbOverlayContainerAdapter } from '../adapter/overlay-container-adapter'; import { NbViewportRulerAdapter } from '../adapter/viewport-ruler-adapter'; import { NbGlobalLogicalPosition } from './position-helper'; import { GlobalPositionStrategy } from '@angular/cdk/overlay'; export var NbAdjustment; (function (NbAdjustment) { NbAdjustment["NOOP"] = "noop"; NbAdjustment["CLOCKWISE"] = "clockwise"; NbAdjustment["COUNTERCLOCKWISE"] = "counterclockwise"; NbAdjustment["VERTICAL"] = "vertical"; NbAdjustment["HORIZONTAL"] = "horizontal"; })(NbAdjustment || (NbAdjustment = {})); export var NbPosition; (function (NbPosition) { NbPosition["TOP"] = "top"; NbPosition["BOTTOM"] = "bottom"; NbPosition["LEFT"] = "left"; NbPosition["RIGHT"] = "right"; NbPosition["START"] = "start"; NbPosition["END"] = "end"; })(NbPosition || (NbPosition = {})); const POSITIONS = { [NbPosition.RIGHT](offset) { return { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: offset }; }, [NbPosition.BOTTOM](offset) { return { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: offset }; }, [NbPosition.LEFT](offset) { return { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -offset }; }, [NbPosition.TOP](offset) { return { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -offset }; }, }; const COUNTER_CLOCKWISE_POSITIONS = [NbPosition.TOP, NbPosition.LEFT, NbPosition.BOTTOM, NbPosition.RIGHT]; const NOOP_POSITIONS = [NbPosition.TOP, NbPosition.BOTTOM, NbPosition.LEFT, NbPosition.RIGHT]; const CLOCKWISE_POSITIONS = [NbPosition.TOP, NbPosition.RIGHT, NbPosition.BOTTOM, NbPosition.LEFT]; const VERTICAL_POSITIONS = [NbPosition.BOTTOM, NbPosition.TOP]; const HORIZONTAL_POSITIONS = [NbPosition.START, NbPosition.END]; function comparePositions(p1, p2) { return p1.originX === p2.originX && p1.originY === p2.originY && p1.overlayX === p2.overlayX && p1.overlayY === p2.overlayY; } /** * The main idea of the adjustable connected strategy is to provide predefined set of positions for your overlay. * You have to provide adjustment and appropriate strategy will be chosen in runtime. * */ export class NbAdjustableConnectedPositionStrategy extends NbFlexibleConnectedPositionStrategy { constructor() { super(...arguments); this._offset = 15; this.positionChange = this.positionChanges.pipe(map((positionChange) => positionChange.connectionPair), map((connectionPair) => { return this.appliedPositions.find(({ connectedPosition }) => { return comparePositions(connectedPosition, connectionPair); }).key; })); } attach(overlayRef) { /** * We have to apply positions before attach because super.attach() validates positions and crashes app * if no positions provided. * */ this.applyPositions(); super.attach(overlayRef); } apply() { this.applyPositions(); super.apply(); } position(position) { this._position = position; return this; } adjustment(adjustment) { this._adjustment = adjustment; return this; } offset(offset) { this._offset = offset; return this; } applyPositions() { const positions = this.createPositions(); this.persistChosenPositions(positions); this.withPositions(this.appliedPositions.map(({ connectedPosition }) => connectedPosition)); } createPositions() { switch (this._adjustment) { case NbAdjustment.NOOP: return NOOP_POSITIONS.filter(position => this._position === position); case NbAdjustment.CLOCKWISE: return this.reorderPreferredPositions(CLOCKWISE_POSITIONS); case NbAdjustment.COUNTERCLOCKWISE: return this.reorderPreferredPositions(COUNTER_CLOCKWISE_POSITIONS); case NbAdjustment.HORIZONTAL: return this.reorderPreferredPositions(HORIZONTAL_POSITIONS); case NbAdjustment.VERTICAL: return this.reorderPreferredPositions(VERTICAL_POSITIONS); } } persistChosenPositions(positions) { this.appliedPositions = positions.map(position => ({ key: position, connectedPosition: POSITIONS[position](this._offset), })); } reorderPreferredPositions(positions) { const cpy = positions.slice(); const startIndex = positions.indexOf(this._position); const start = cpy.splice(startIndex); return start.concat(...cpy); } } export class NbGlobalPositionStrategy extends GlobalPositionStrategy { position(position) { switch (position) { case NbGlobalLogicalPosition.TOP_START: return this.top().left(); case NbGlobalLogicalPosition.TOP_END: return this.top().right(); case NbGlobalLogicalPosition.BOTTOM_START: return this.bottom().left(); case NbGlobalLogicalPosition.BOTTOM_END: return this.bottom().right(); } } } let NbPositionBuilderService = class NbPositionBuilderService { constructor(document, viewportRuler, platform, positionBuilder, overlayContainer) { this.document = document; this.viewportRuler = viewportRuler; this.platform = platform; this.positionBuilder = positionBuilder; this.overlayContainer = overlayContainer; } global() { return new NbGlobalPositionStrategy(); } connectedTo(elementRef) { return new NbAdjustableConnectedPositionStrategy(elementRef, this.viewportRuler, this.document, this.platform, this.overlayContainer) .withFlexibleDimensions(false) .withPush(false); } }; NbPositionBuilderService = __decorate([ Injectable(), __param(0, Inject(NB_DOCUMENT)), __metadata("design:paramtypes", [Object, NbViewportRulerAdapter, NbPlatform, NbOverlayPositionBuilder, NbOverlayContainerAdapter]) ], NbPositionBuilderService); export { NbPositionBuilderService }; //# sourceMappingURL=overlay-position.js.map