ngx-aside-ease/fesm2022/ngx-aside-ease.mjs

ngx-aside-ease is an Angular library that offers a lightweight, performant, and responsive aside panel. This library has multiple options and offers a good user experience.

import * as i0 from '@angular/core';
import { Injectable, Directive, Input, HostListener, Component, ChangeDetectionStrategy, ViewChild, ContentChildren, HostBinding, ContentChild, NgModule } from '@angular/core';
import { Subject, takeUntil, fromEvent, debounceTime } from 'rxjs';
import * as i4 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3 from '@angular/router';

class InternalAsideService {
    constructor() {
        this.internalOnSelectionChange = new Subject();
    }
    addInstance(instance) {
        this.asideContainer = instance;
    }
    toggleVisibility() {
        const aside = this.asideContainer.aside;
        if (aside.isResponsiveMode) {
            aside.setAsideFullWidth();
        }
        else {
            aside.onCollapseBtnClick();
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: InternalAsideService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: InternalAsideService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: InternalAsideService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root',
                }]
        }], ctorParameters: () => [] });

class AsideService {
    constructor(internalAsideService) {
        this.internalAsideService = internalAsideService;
        this.onSelectionChange = new Subject();
    }
    /**
     * Toggle the panel visibility.
     * The panel will either open partially or totally, depending on the responsive breakpoint set.
     */
    toggleVisibility() {
        this.internalAsideService.toggleVisibility();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: AsideService, deps: [{ token: InternalAsideService }], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: AsideService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: AsideService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root',
                }]
        }], ctorParameters: () => [{ type: InternalAsideService }] });

class AsideItemDirective {
    constructor(element, internalAsideService, asideService) {
        this.element = element;
        this.internalAsideService = internalAsideService;
        this.asideService = asideService;
        this.defaultActive = false;
        this.disable = false;
    }
    get native() {
        return this.element.nativeElement;
    }
    onItemClick() {
        if (this.disable)
            return;
        this.internalAsideService.internalOnSelectionChange.next({
            element: this.native,
            animate: true,
        });
        this.asideService.onSelectionChange.next(this.native);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: AsideItemDirective, deps: [{ token: i0.ElementRef }, { token: InternalAsideService }, { token: AsideService }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.3", type: AsideItemDirective, isStandalone: true, selector: "[ngxItem]", inputs: { defaultActive: "defaultActive", disable: "disable" }, host: { listeners: { "click": "onItemClick()" }, classAttribute: "ngx-item" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: AsideItemDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngxItem]',
                    standalone: true,
                    host: { class: 'ngx-item' },
                }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: InternalAsideService }, { type: AsideService }], propDecorators: { defaultActive: [{
                type: Input
            }], disable: [{
                type: Input
            }], onItemClick: [{
                type: HostListener,
                args: ['click']
            }] } });

class AsideComponent {
    constructor(element, internalAsideService, asideService, router, route, cd) {
        this.element = element;
        this.internalAsideService = internalAsideService;
        this.asideService = asideService;
        this.router = router;
        this.route = route;
        this.cd = cd;
        this.minVisible = 30;
        this.minWidth = 250;
        this.width = 300;
        this.maxWidth = '50';
        this.responsiveBreakpoint = 800;
        this.displayCollapsableIcon = true;
        this.asideAnimationTiming = '0.3s ease-out';
        this.markerAnimationTiming = '0.3s ease-out';
        this.enableResize = true;
        this.resizerColor = '#0095be';
        this.enableMarker = true;
        this.storePreference = true;
        this.updateUrl = true;
        this.paramUrlName = 'name';
        this.userWidth = 0;
        this.showCollapsableIcon = false;
        this.asideIsOpen = true;
        this.responsiveMode = false;
        this.asideContentTop = 0;
        this.destroy$ = new Subject();
        this.asideFullWidthResponsive = false;
        this.keepUserNavigationChoice = false;
        this.reverse = false;
    }
    get native() {
        return this.element.nativeElement;
    }
    get asideNative() {
        return this.asideWrapper.nativeElement;
    }
    get resizerNative() {
        return this.resizer.nativeElement;
    }
    get isResponsiveMode() {
        return this.responsiveMode;
    }
    ngOnInit() {
        this.internalAsideService.internalOnSelectionChange
            .pipe(takeUntil(this.destroy$))
            .subscribe((item) => {
            const { element, animate } = item;
            this.positionMarker(element, animate);
            this.updateUrlTabs(element.innerText.toLowerCase());
            this.addClassActiveToElement(element);
        });
        fromEvent(window, 'resize')
            .pipe(takeUntil(this.destroy$), debounceTime(300))
            .subscribe(() => {
            this.applyResponsive();
        });
    }
    /**
     * Retrieve the previous stored preference or take the defined width.
     * Initialise CSS variables.
     */
    ngAfterViewInit() {
        this.userWidth = this.width;
        if (this.storePreference) {
            this.userWidth =
                parseFloat(localStorage.getItem('user-width') || '') || this.width;
        }
        this.updateMinWidthPercentDiff();
        this.native.style.setProperty('--min-width', `${this.minWidth}px`);
        this.native.style.setProperty('--min-width-visible', `${this.minVisible}px`);
        this.native.style.setProperty('--width', `${this.userWidth}px`);
        this.native.style.setProperty('--max-width', `${this.maxWidth}vw`);
        this.applyResponsive(false);
        this.activateParamsUrl();
        this.selectDefaultItem();
        if (this.enableResize)
            this.resize();
    }
    /**
     * Navigation by URL.
     * Not through the Angular API for synchronous reason. Give priority to the user choice over the default active item.
     * Apply 100 ms delay, a custom font can be not fully loaded.
     */
    activateParamsUrl() {
        if (!this.updateUrl)
            return;
        const currentUrl = window.location.href;
        const url = new URL(currentUrl);
        const params = new URLSearchParams(url.search);
        const name = params.get(this.paramUrlName)?.toLowerCase().trim() || '';
        const active = this.findTabToActivate(name);
        if (active instanceof HTMLElement) {
            this.timeoutID = window.setTimeout(() => {
                this.internalAsideService.internalOnSelectionChange.next({
                    element: active,
                    animate: false,
                });
            }, 100);
            this.asideService.onSelectionChange.next(active);
            this.keepUserNavigationChoice = true;
        }
    }
    /**
     * Navigation by URL.
     * Find the corresponding item and activate it.
     */
    findTabToActivate(name) {
        if (!name)
            return;
        const cleanedName = name.toLowerCase().trim();
        for (const item of this.items) {
            if (item.disable)
                return null;
            const text = item.native.innerText.toLowerCase();
            if (cleanedName === text) {
                return item.native;
            }
        }
        return null;
    }
    updateUrlTabs(text) {
        if (!this.updateUrl)
            return;
        const newUrl = {
            ...this.route.snapshot.queryParams,
            [this.paramUrlName]: text,
        };
        this.router.navigate([], { relativeTo: this.route, queryParams: newUrl });
    }
    /**
     * Set the default selected item.
     * Apply an delay of 100 ms in case of loading a custom font.
     * Give priority to user choice (URL) over the default item.
     */
    selectDefaultItem() {
        if (this.keepUserNavigationChoice)
            return;
        for (const item of this.items) {
            if (item.defaultActive && !item.disable) {
                this.timeoutID = window.setTimeout(() => {
                    this.internalAsideService.internalOnSelectionChange.next({
                        element: item.native,
                        animate: false,
                    });
                }, 100);
                this.asideService.onSelectionChange.next(item.native);
                break;
            }
        }
    }
    /**
     * Compute the min width in percent based in the provided value for the panel visibility reduction (non responsive mode).
     */
    updateMinWidthPercentDiff() {
        const minWidthPercentDiff = (this.minVisible / this.userWidth - 1) * 100;
        this.native.style.setProperty('--min-width-percent-diff', `${minWidthPercentDiff}%`);
    }
    /**
     * Responsive mode triggered on basis on the breakpoint set.
     */
    applyResponsive(animate = true) {
        this.responsiveMode = window.innerWidth < this.responsiveBreakpoint;
        this.applyAnimations(animate);
        if (this.responsiveMode) {
            this.native.style.setProperty('--width', '0');
            this.native.style.setProperty('--min-width-visible', '0');
        }
        else {
            this.native.style.setProperty('--width', `${this.userWidth}px`);
            this.native.style.setProperty('--min-width-visible', `${this.minVisible}px`);
            this.asideFullWidthResponsive = false;
        }
        this.cd.markForCheck();
    }
    applyAnimations(animate = true) {
        this.native.style.transition = animate
            ? `width ${this.asideAnimationTiming}`
            : 'none';
        this.asideNative.style.transition = animate
            ? this.asideAnimationTiming
            : 'none';
    }
    /**
     * Position the left marker correctly.
     * Inverse it in reverse mode.
     */
    positionMarker(element, animated = true) {
        if (!this.enableMarker)
            return;
        this.asideContentTop =
            this.asideContent.nativeElement.getBoundingClientRect().top;
        const { top } = element.getBoundingClientRect();
        const topMarker = top - this.asideContentTop;
        const leftMarker = this.reverse ? '100' : '0';
        this.asideMarker.nativeElement.style.height = element.clientHeight + 'px';
        this.asideMarker.nativeElement.style.transition = animated
            ? `top ${this.markerAnimationTiming}`
            : 'none';
        this.asideMarker.nativeElement.style.top = `${topMarker}px`;
        this.asideMarker.nativeElement.style.left = `${leftMarker}%`;
    }
    resize() {
        this.resizerNative.style.setProperty('--resizer-color', this.resizerColor);
        this.resizerNative.addEventListener('pointerdown', this.onPointerDown.bind(this));
    }
    /**
     * Triggered on Mouse and Touch event.
     * Prevent text selection, set the CSS variable for width adaptation, add other event listeners.
     */
    onPointerDown(e) {
        e.preventDefault();
        this.asideNative.style.transition = 'none';
        this.native.style.transition = 'none';
        const onPointerMove = (e) => {
            const pageX = this.reverse ? window.innerWidth - e.pageX : e.pageX;
            if (pageX < this.minWidth)
                return;
            this.native.style.setProperty('--width', `${pageX}px`);
        };
        const onPointerUp = () => {
            this.userWidth = parseFloat(this.native.style.getPropertyValue('--width'));
            this.updateMinWidthPercentDiff();
            if (this.storePreference) {
                localStorage.setItem('user-width', `${this.userWidth}px`);
            }
            document.removeEventListener('pointermove', onPointerMove);
        };
        document.addEventListener('pointermove', onPointerMove);
        document.addEventListener('pointerup', onPointerUp, {
            once: true,
        });
    }
    /**
     * In responsive mode, display/hide panel totally.
     */
    setAsideFullWidth() {
        this.asideFullWidthResponsive = !this.asideFullWidthResponsive;
        this.applyAnimations();
        this.cd.markForCheck();
    }
    onCollapseBtnClick() {
        this.asideIsOpen = !this.asideIsOpen;
        this.applyAnimations();
        this.cd.markForCheck();
    }
    /**
     * Reverse the panel position.
     * An overflow hidden has to be applied in reversed mode.
     */
    reverseDisplay() {
        this.reverse = true;
        document.body.style.overflow = 'hidden';
    }
    onMouseEnter() {
        this.showCollapsableIcon = true;
    }
    onMouseLeave() {
        this.showCollapsableIcon = false;
    }
    /**
     * Add active class to the element so the user can overload it with custom styles.
     */
    addClassActiveToElement(element) {
        const prev = this.asideContent.nativeElement.querySelector('.active');
        prev?.classList.remove('active');
        element.classList.add('active');
    }
    get notOpened() {
        return !this.asideIsOpen;
    }
    ngOnDestroy() {
        this.destroy$.next();
        clearTimeout(this.timeoutID);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: AsideComponent, deps: [{ token: i0.ElementRef }, { token: InternalAsideService }, { token: AsideService }, { token: i3.Router }, { token: i3.ActivatedRoute }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.3", type: AsideComponent, isStandalone: true, selector: "ngx-aside", inputs: { minVisible: "minVisible", minWidth: "minWidth", width: "width", maxWidth: "maxWidth", responsiveBreakpoint: "responsiveBreakpoint", displayCollapsableIcon: "displayCollapsableIcon", asideAnimationTiming: "asideAnimationTiming", markerAnimationTiming: "markerAnimationTiming", enableResize: "enableResize", resizerColor: "resizerColor", enableMarker: "enableMarker", storePreference: "storePreference", updateUrl: "updateUrl", paramUrlName: "paramUrlName" }, host: { properties: { "class.not-open": "this.notOpened" } }, queries: [{ propertyName: "items", predicate: AsideItemDirective }], viewQueries: [{ propertyName: "asideWrapper", first: true, predicate: ["asideWrapper"], descendants: true }, { propertyName: "asideContent", first: true, predicate: ["asideContent"], descendants: true }, { propertyName: "resizer", first: true, predicate: ["resizer"], descendants: true }, { propertyName: "asideMarker", first: true, predicate: ["asideMarker"], descendants: true }], ngImport: i0, template: "<aside>\r\n  <div\r\n    class=\"ngx-aside-wrapper\"\r\n    [ngClass]=\"{\r\n      'not-open': !asideIsOpen,\r\n      'responsive-mode': responsiveMode,\r\n      'full-width': asideFullWidthResponsive,\r\n      'reversed': reverse,\r\n    }\"\r\n    (mouseenter)=\"onMouseEnter()\"\r\n    (mouseleave)=\"onMouseLeave()\"\r\n    #asideWrapper\r\n  >\r\n    <div class=\"ngx-aside\">\r\n      <ng-content select=\"[ngxTitle]\"></ng-content>\r\n\r\n      <div class=\"ngx-aside-content\" #asideContent>\r\n        <ng-content select=\"[ngxItem]\"></ng-content>\r\n        @if (enableMarker) {\r\n        <span class=\"ngx-aside-marker\" #asideMarker></span>\r\n        }\r\n      </div>\r\n      <ng-content></ng-content>\r\n    </div>\r\n\r\n    @if (displayCollapsableIcon) {\r\n    <span\r\n      class=\"ngx-collapsable-icon\"\r\n      [ngClass]=\"{\r\n        show: showCollapsableIcon || !asideIsOpen,\r\n        'not-open': !asideIsOpen,\r\n        'responsive-mode': responsiveMode,\r\n        'reversed': reverse,\r\n      }\"\r\n      (click)=\"onCollapseBtnClick()\"\r\n    >\r\n      <svg\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 320 512\"\r\n        aria-label=\"arrow icon\"\r\n      >\r\n        <path\r\n          d=\"M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\r\n        />\r\n      </svg>\r\n    </span>\r\n    } @if (enableResize) {\r\n    <div class=\"ngx-resizer-container\">\r\n      <span\r\n        class=\"ngx-resizer\"\r\n        [ngClass]=\"{\r\n          'full-width': asideFullWidthResponsive,\r\n          'responsive-mode': responsiveMode,\r\n          'reversed': reverse,\r\n        }\"\r\n        #resizer\r\n      ></span>\r\n    </div>\r\n    }\r\n  </div>\r\n</aside>\r\n", styles: [":host{--min-width-percent-diff: 0;--min-width: 0;--min-width-visible: 0;--width: 0;--max-width: 0;width:var(--width)}:host.not-open{width:var(--min-width-visible)}.ngx-aside-wrapper{min-height:100vh;padding:1rem .7rem 0;position:relative;width:clamp(var(--min-width),var(--width),var(--max-width))}.ngx-aside-wrapper.not-open{transform:translate3d(var(--min-width-percent-diff),0,0);padding:1rem 0}.ngx-aside-wrapper.not-open.reversed{transform:translateZ(0)}.ngx-aside-wrapper.responsive-mode{transform:translate3d(-100%,0,0);position:absolute;width:0;overflow:hidden}.ngx-aside-wrapper.full-width{transform:translateZ(0);padding:1rem .7rem 0;width:100%;z-index:10}.ngx-aside-wrapper.responsive-mode.reversed{transform:translate3d(100%,0,0)}.ngx-aside-wrapper.full-width.reversed{transform:translate3d(-100%,0,0)}.ngx-aside{text-wrap:nowrap}.ngx-aside-content{position:relative;display:flex;flex-direction:column;gap:.5rem;margin-top:3rem}.ngx-aside-marker{position:absolute;top:-500px;left:0;display:block;width:2px;background:gold}.ngx-resizer{position:absolute;top:0;right:-10px;width:20px;height:100%;cursor:ew-resize;touch-action:none;--resizer-color: #0095be}.ngx-resizer.reversed{right:auto;left:-10px}.ngx-resizer:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;transform:scaleX(0);opacity:0;transition:.3s}.ngx-resizer.reversed:after{left:auto;right:0}.ngx-resizer:not(.full-width):hover:after{opacity:1;background:var(--resizer-color);transform:scaleX(.3)}.ngx-resizer.responsive-mode{display:none}span.ngx-collapsable-icon{position:absolute;top:40px;right:-12px;display:flex;padding:.5rem;background:#fff;box-shadow:0 0 7px 1px #616161;cursor:pointer;border-radius:50%;transform:rotate(180deg);transition:opacity .3s,right .3s;opacity:0;z-index:2}span.ngx-collapsable-icon.reversed{right:auto;left:-12px;transform:rotate(0)}span.ngx-collapsable-icon.responsive-mode{display:none}span.ngx-collapsable-icon svg{width:10px;height:10px}span.ngx-collapsable-icon.show{opacity:1}span.ngx-collapsable-icon.not-open{transform:rotate(0)}span.ngx-collapsable-icon.not-open.reversed{transform:rotate(180deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: AsideComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngx-aside', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<aside>\r\n  <div\r\n    class=\"ngx-aside-wrapper\"\r\n    [ngClass]=\"{\r\n      'not-open': !asideIsOpen,\r\n      'responsive-mode': responsiveMode,\r\n      'full-width': asideFullWidthResponsive,\r\n      'reversed': reverse,\r\n    }\"\r\n    (mouseenter)=\"onMouseEnter()\"\r\n    (mouseleave)=\"onMouseLeave()\"\r\n    #asideWrapper\r\n  >\r\n    <div class=\"ngx-aside\">\r\n      <ng-content select=\"[ngxTitle]\"></ng-content>\r\n\r\n      <div class=\"ngx-aside-content\" #asideContent>\r\n        <ng-content select=\"[ngxItem]\"></ng-content>\r\n        @if (enableMarker) {\r\n        <span class=\"ngx-aside-marker\" #asideMarker></span>\r\n        }\r\n      </div>\r\n      <ng-content></ng-content>\r\n    </div>\r\n\r\n    @if (displayCollapsableIcon) {\r\n    <span\r\n      class=\"ngx-collapsable-icon\"\r\n      [ngClass]=\"{\r\n        show: showCollapsableIcon || !asideIsOpen,\r\n        'not-open': !asideIsOpen,\r\n        'responsive-mode': responsiveMode,\r\n        'reversed': reverse,\r\n      }\"\r\n      (click)=\"onCollapseBtnClick()\"\r\n    >\r\n      <svg\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 320 512\"\r\n        aria-label=\"arrow icon\"\r\n      >\r\n        <path\r\n          d=\"M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\r\n        />\r\n      </svg>\r\n    </span>\r\n    } @if (enableResize) {\r\n    <div class=\"ngx-resizer-container\">\r\n      <span\r\n        class=\"ngx-resizer\"\r\n        [ngClass]=\"{\r\n          'full-width': asideFullWidthResponsive,\r\n          'responsive-mode': responsiveMode,\r\n          'reversed': reverse,\r\n        }\"\r\n        #resizer\r\n      ></span>\r\n    </div>\r\n    }\r\n  </div>\r\n</aside>\r\n", styles: [":host{--min-width-percent-diff: 0;--min-width: 0;--min-width-visible: 0;--width: 0;--max-width: 0;width:var(--width)}:host.not-open{width:var(--min-width-visible)}.ngx-aside-wrapper{min-height:100vh;padding:1rem .7rem 0;position:relative;width:clamp(var(--min-width),var(--width),var(--max-width))}.ngx-aside-wrapper.not-open{transform:translate3d(var(--min-width-percent-diff),0,0);padding:1rem 0}.ngx-aside-wrapper.not-open.reversed{transform:translateZ(0)}.ngx-aside-wrapper.responsive-mode{transform:translate3d(-100%,0,0);position:absolute;width:0;overflow:hidden}.ngx-aside-wrapper.full-width{transform:translateZ(0);padding:1rem .7rem 0;width:100%;z-index:10}.ngx-aside-wrapper.responsive-mode.reversed{transform:translate3d(100%,0,0)}.ngx-aside-wrapper.full-width.reversed{transform:translate3d(-100%,0,0)}.ngx-aside{text-wrap:nowrap}.ngx-aside-content{position:relative;display:flex;flex-direction:column;gap:.5rem;margin-top:3rem}.ngx-aside-marker{position:absolute;top:-500px;left:0;display:block;width:2px;background:gold}.ngx-resizer{position:absolute;top:0;right:-10px;width:20px;height:100%;cursor:ew-resize;touch-action:none;--resizer-color: #0095be}.ngx-resizer.reversed{right:auto;left:-10px}.ngx-resizer:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;transform:scaleX(0);opacity:0;transition:.3s}.ngx-resizer.reversed:after{left:auto;right:0}.ngx-resizer:not(.full-width):hover:after{opacity:1;background:var(--resizer-color);transform:scaleX(.3)}.ngx-resizer.responsive-mode{display:none}span.ngx-collapsable-icon{position:absolute;top:40px;right:-12px;display:flex;padding:.5rem;background:#fff;box-shadow:0 0 7px 1px #616161;cursor:pointer;border-radius:50%;transform:rotate(180deg);transition:opacity .3s,right .3s;opacity:0;z-index:2}span.ngx-collapsable-icon.reversed{right:auto;left:-12px;transform:rotate(0)}span.ngx-collapsable-icon.responsive-mode{display:none}span.ngx-collapsable-icon svg{width:10px;height:10px}span.ngx-collapsable-icon.show{opacity:1}span.ngx-collapsable-icon.not-open{transform:rotate(0)}span.ngx-collapsable-icon.not-open.reversed{transform:rotate(180deg)}\n"] }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: InternalAsideService }, { type: AsideService }, { type: i3.Router }, { type: i3.ActivatedRoute }, { type: i0.ChangeDetectorRef }], propDecorators: { minVisible: [{
                type: Input
            }], minWidth: [{
                type: Input
            }], width: [{
                type: Input
            }], maxWidth: [{
                type: Input
            }], responsiveBreakpoint: [{
                type: Input
            }], displayCollapsableIcon: [{
                type: Input
            }], asideAnimationTiming: [{
                type: Input
            }], markerAnimationTiming: [{
                type: Input
            }], enableResize: [{
                type: Input
            }], resizerColor: [{
                type: Input
            }], enableMarker: [{
                type: Input
            }], storePreference: [{
                type: Input
            }], updateUrl: [{
                type: Input
            }], paramUrlName: [{
                type: Input
            }], asideWrapper: [{
                type: ViewChild,
                args: ['asideWrapper']
            }], asideContent: [{
                type: ViewChild,
                args: ['asideContent']
            }], resizer: [{
                type: ViewChild,
                args: ['resizer']
            }], asideMarker: [{
                type: ViewChild,
                args: ['asideMarker']
            }], items: [{
                type: ContentChildren,
                args: [AsideItemDirective]
            }], notOpened: [{
                type: HostBinding,
                args: ['class.not-open']
            }] } });

class AsideContainerComponent {
    constructor(asideService) {
        this.asideService = asideService;
        this.reverse = false;
    }
    ngAfterViewInit() {
        this.asideService.addInstance(this);
        if (this.reverse)
            this.aside.reverseDisplay();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: AsideContainerComponent, deps: [{ token: InternalAsideService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: AsideContainerComponent, isStandalone: true, selector: "ngx-aside-container", inputs: { reverse: "reverse" }, queries: [{ propertyName: "aside", first: true, predicate: AsideComponent, descendants: true }], ngImport: i0, template: `<section
    class="ngx-aside-content-container"
    [class.reversed]="reverse"
  >
    <ng-content></ng-content>
  </section>`, isInline: true, styles: [".ngx-aside-content-container{display:flex}.ngx-aside-content-container.reversed{flex-direction:row-reverse;overflow-x:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: AsideContainerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngx-aside-container', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: `<section
    class="ngx-aside-content-container"
    [class.reversed]="reverse"
  >
    <ng-content></ng-content>
  </section>`, styles: [".ngx-aside-content-container{display:flex}.ngx-aside-content-container.reversed{flex-direction:row-reverse;overflow-x:hidden}\n"] }]
        }], ctorParameters: () => [{ type: InternalAsideService }], propDecorators: { reverse: [{
                type: Input
            }], aside: [{
                type: ContentChild,
                args: [AsideComponent]
            }] } });

class AsideTitleDirective {
    constructor() { }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: AsideTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.3", type: AsideTitleDirective, isStandalone: true, selector: "[ngxTitle]", host: { classAttribute: "ngx-title" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: AsideTitleDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngxTitle]',
                    standalone: true,
                    host: { class: 'ngx-title' },
                }]
        }], ctorParameters: () => [] });

class AsideModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: AsideModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.3", ngImport: i0, type: AsideModule, imports: [CommonModule,
            AsideContainerComponent,
            AsideComponent,
            AsideItemDirective,
            AsideTitleDirective], exports: [AsideContainerComponent,
            AsideComponent,
            AsideItemDirective,
            AsideTitleDirective] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: AsideModule, imports: [CommonModule,
            AsideComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: AsideModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [],
                    imports: [
                        CommonModule,
                        AsideContainerComponent,
                        AsideComponent,
                        AsideItemDirective,
                        AsideTitleDirective,
                    ],
                    exports: [
                        AsideContainerComponent,
                        AsideComponent,
                        AsideItemDirective,
                        AsideTitleDirective,
                    ],
                }]
        }] });

/*
 * Public API Surface of ngx-aside-ease
 */

/**
 * Generated bundle index. Do not edit.
 */

export { AsideComponent, AsideContainerComponent, AsideItemDirective, AsideModule, AsideService, AsideTitleDirective };
//# sourceMappingURL=ngx-aside-ease.mjs.map