ngx-menu-toggler/fesm2022/ngx-menu-toggler.mjs

An Angular component for toggling menus in a simple and customizable way

import * as i0 from '@angular/core';
import { input, output, ChangeDetectionStrategy, Component } from '@angular/core';

class NgxMenuToggler {
    /** OPEN FEATURES */
    isOpen = input(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
    setIsOpen = output();
    handleIsOpen() {
        this.setIsOpen.emit(!this.isOpen());
    }
    /** STYLES */
    type = input('bars', ...(ngDevMode ? [{ debugName: "type" }] : []));
    invert = input(false, ...(ngDevMode ? [{ debugName: "invert" }] : []));
    thin = input(false, ...(ngDevMode ? [{ debugName: "thin" }] : []));
    rounded = input(false, ...(ngDevMode ? [{ debugName: "rounded" }] : []));
    color = input('black', ...(ngDevMode ? [{ debugName: "color" }] : []));
    animation = input('soft', ...(ngDevMode ? [{ debugName: "animation" }] : []));
    faster = input(false, ...(ngDevMode ? [{ debugName: "faster" }] : []));
    /** ACCESIBILITY */
    tabIndex = input(0, ...(ngDevMode ? [{ debugName: "tabIndex" }] : []));
    ariaLabelOpened = input('Close menu', ...(ngDevMode ? [{ debugName: "ariaLabelOpened" }] : []));
    ariaLabelClosed = input('Open menu', ...(ngDevMode ? [{ debugName: "ariaLabelClosed" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: NgxMenuToggler, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: NgxMenuToggler, isStandalone: true, selector: "ngx-menu-toggler", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, invert: { classPropertyName: "invert", publicName: "invert", isSignal: true, isRequired: false, transformFunction: null }, thin: { classPropertyName: "thin", publicName: "thin", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, faster: { classPropertyName: "faster", publicName: "faster", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelOpened: { classPropertyName: "ariaLabelOpened", publicName: "ariaLabelOpened", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelClosed: { classPropertyName: "ariaLabelClosed", publicName: "ariaLabelClosed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { setIsOpen: "setIsOpen" }, ngImport: i0, template: "<button \r\n    class=\"ngxMenuToggler__button\"\r\n    (click)=\"handleIsOpen()\"\r\n    [class.isOpen]=\"isOpen()\"\r\n    [class.rotateX]=\"animation() === 'rotateX'\"\r\n    [class.rotateY]=\"animation() === 'rotateY'\"\r\n    [class.faster]=\"faster()\"\r\n    [class.rounded]=\"rounded()\"\r\n    [class.invert]=\"invert()\"\r\n    [style.--toggle-color]=\"color()\"\r\n    [tabIndex]=\"tabIndex()\"\r\n    [aria-expanded]=\"isOpen()\"\r\n    [aria-label]=\"isOpen() ? ariaLabelOpened() : ariaLabelClosed()\"\r\n>\r\n    <!-- HORIZONTAL BARS -->\r\n    <span \r\n        class=\"ngxMenuToggler__bar ngxMenuToggler__bar--1\"\r\n        [class.isOpen]=\"isOpen()\"\r\n        [class.thin]=\"thin()\"\r\n        [class.rounded]=\"rounded()\"\r\n        [class.dots]=\"type() === 'dots'\"\r\n        [style.background-color]=\"color()\"\r\n    ></span>\r\n\r\n    <span \r\n        class=\"ngxMenuToggler__bar ngxMenuToggler__bar--2\"\r\n        [class.thin]=\"thin()\"\r\n        [class.dots]=\"type() === 'dots'\"\r\n    ></span>\r\n\r\n    <span \r\n        class=\"ngxMenuToggler__bar ngxMenuToggler__bar--3\"\r\n        [class.isOpen]=\"isOpen()\"\r\n        [class.thin]=\"thin()\"\r\n        [class.rounded]=\"rounded()\"\r\n        [class.dots]=\"type() === 'dots'\"\r\n        [style.background-color]=\"color()\"\r\n        [class.uneven]=\"type() === 'uneven'\"\r\n    ></span>\r\n\r\n    <!-- CROSS BARS -->\r\n    <span \r\n        class=\"ngxMenuToggler__bar ngxMenuToggler__bar--4\"\r\n        [class.isOpen]=\"isOpen()\"\r\n        [class.thin]=\"thin()\"\r\n        [class.rounded]=\"rounded()\"\r\n        [class.dots]=\"type() === 'dots'\"\r\n        [class.uneven]=\"type() === 'uneven'\"\r\n        [class.invert]=\"invert()\"\r\n        [style.background-color]=\"color()\"\r\n    ></span>\r\n\r\n    <span \r\n        class=\"ngxMenuToggler__bar ngxMenuToggler__bar--5\"\r\n        [class.isOpen]=\"isOpen()\"\r\n        [class.thin]=\"thin()\"\r\n        [class.rounded]=\"rounded()\"\r\n        [class.dots]=\"type() === 'dots'\"\r\n        [class.uneven]=\"type() === 'uneven'\"\r\n        [class.invert]=\"invert()\"\r\n        [style.background-color]=\"color()\"\r\n    ></span>\r\n\r\n</button>", styles: [":host{height:var(--menu-toggler-size, 40px);aspect-ratio:1/1;display:block}*{box-sizing:border-box;margin:0;padding:0}.ngxMenuToggler__button{border:none;padding:0;cursor:pointer;background-color:transparent;aspect-ratio:1/1;width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-around;position:relative;transition:transform .3s ease-in-out}.ngxMenuToggler__button.invert{align-items:flex-end}.ngxMenuToggler__button.rounded{border-radius:.2rem}.ngxMenuToggler__button:focus-visible{outline:2px solid var(--toggle-color, black);outline-offset:2px}.ngxMenuToggler__button.isOpen.rotateX{transform:rotate(180deg)}.ngxMenuToggler__button.isOpen.rotateX.faster{transform:rotate(360deg)}.ngxMenuToggler__button.isOpen.rotateY{transform:rotateY(180deg)}.ngxMenuToggler__button.isOpen.rotateY.faster{transform:rotateY(360deg)}.ngxMenuToggler__bar{display:block;background-color:#000;width:100%;height:15%}.ngxMenuToggler__bar.thin{height:9%}.ngxMenuToggler__bar.dots{transform:scale(1.2)}.ngxMenuToggler__bar.rounded.dots{border-radius:50%}.ngxMenuToggler__bar.rounded{border-radius:.3rem}.ngxMenuToggler__bar--1.dots,.ngxMenuToggler__bar--3.dots{transition:transform .3s ease-in-out,width .3s ease-in-out;width:15%;left:42.5%;align-self:center}.ngxMenuToggler__bar--1.dots.thin,.ngxMenuToggler__bar--3.dots.thin{width:9%}.ngxMenuToggler__bar--3.uneven{width:33%}.ngxMenuToggler__bar--4.uneven,.ngxMenuToggler__bar--5.uneven{width:66%}.ngxMenuToggler__bar--4.uneven.invert,.ngxMenuToggler__bar--5.uneven.invert{left:34%}.ngxMenuToggler__bar--4.uneven.invert.isOpen,.ngxMenuToggler__bar--5.uneven.invert.isOpen{left:0}.ngxMenuToggler__bar--4.uneven.isOpen,.ngxMenuToggler__bar--5.uneven.isOpen{width:100%}.ngxMenuToggler__bar--1,.ngxMenuToggler__bar--3{transition:transform .3s ease-in-out}.ngxMenuToggler__bar--1.isOpen,.ngxMenuToggler__bar--3.isOpen{transform:scale(0)}.ngxMenuToggler__bar--2{visibility:hidden}.ngxMenuToggler__bar--4,.ngxMenuToggler__bar--5{position:absolute;width:100%;top:42.5%;left:0;transform-origin:center;transition:transform .3s ease-in-out,width .4s ease-in-out,left .4s ease-in-out,border-radius .4s ease-in-out}.ngxMenuToggler__bar--4.thin,.ngxMenuToggler__bar--5.thin{top:45.5%}.ngxMenuToggler__bar--4.dots,.ngxMenuToggler__bar--5.dots{width:15%;left:42.5%;transition:transform .3s ease-in-out,scale .3s ease-in-out,width .3s ease-in-out,left .3s ease-in-out,border-radius .3s ease-in-out}.ngxMenuToggler__bar--4.dots.thin,.ngxMenuToggler__bar--5.dots.thin{left:45.5%;width:9%}.ngxMenuToggler__bar--4.dots.rounded,.ngxMenuToggler__bar--5.dots.rounded{transition:scale .3s ease-in-out,width .3s ease-in-out,left .3s ease-in-out,border-radius .3s ease-in-out}.ngxMenuToggler__bar--4.dots.rounded{transform:rotate(45deg);scale:1.2}.ngxMenuToggler__bar--5.dots.rounded{transform:rotate(-45deg);scale:1.2}.ngxMenuToggler__bar--4.isOpen.dots{width:100%;transform:rotate(45deg);scale:1;left:0}.ngxMenuToggler__bar--5.isOpen.dots{width:100%;transform:rotate(-45deg);scale:1;left:0}.ngxMenuToggler__bar--4.isOpen.dots.rounded,.ngxMenuToggler__bar--5.isOpen.dots.rounded{border-radius:.3rem}.ngxMenuToggler__bar--4.isOpen{transform:rotate(45deg)}.ngxMenuToggler__bar--5.isOpen{transform:rotate(-45deg)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: NgxMenuToggler, decorators: [{
            type: Component,
            args: [{ selector: 'ngx-menu-toggler', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button \r\n    class=\"ngxMenuToggler__button\"\r\n    (click)=\"handleIsOpen()\"\r\n    [class.isOpen]=\"isOpen()\"\r\n    [class.rotateX]=\"animation() === 'rotateX'\"\r\n    [class.rotateY]=\"animation() === 'rotateY'\"\r\n    [class.faster]=\"faster()\"\r\n    [class.rounded]=\"rounded()\"\r\n    [class.invert]=\"invert()\"\r\n    [style.--toggle-color]=\"color()\"\r\n    [tabIndex]=\"tabIndex()\"\r\n    [aria-expanded]=\"isOpen()\"\r\n    [aria-label]=\"isOpen() ? ariaLabelOpened() : ariaLabelClosed()\"\r\n>\r\n    <!-- HORIZONTAL BARS -->\r\n    <span \r\n        class=\"ngxMenuToggler__bar ngxMenuToggler__bar--1\"\r\n        [class.isOpen]=\"isOpen()\"\r\n        [class.thin]=\"thin()\"\r\n        [class.rounded]=\"rounded()\"\r\n        [class.dots]=\"type() === 'dots'\"\r\n        [style.background-color]=\"color()\"\r\n    ></span>\r\n\r\n    <span \r\n        class=\"ngxMenuToggler__bar ngxMenuToggler__bar--2\"\r\n        [class.thin]=\"thin()\"\r\n        [class.dots]=\"type() === 'dots'\"\r\n    ></span>\r\n\r\n    <span \r\n        class=\"ngxMenuToggler__bar ngxMenuToggler__bar--3\"\r\n        [class.isOpen]=\"isOpen()\"\r\n        [class.thin]=\"thin()\"\r\n        [class.rounded]=\"rounded()\"\r\n        [class.dots]=\"type() === 'dots'\"\r\n        [style.background-color]=\"color()\"\r\n        [class.uneven]=\"type() === 'uneven'\"\r\n    ></span>\r\n\r\n    <!-- CROSS BARS -->\r\n    <span \r\n        class=\"ngxMenuToggler__bar ngxMenuToggler__bar--4\"\r\n        [class.isOpen]=\"isOpen()\"\r\n        [class.thin]=\"thin()\"\r\n        [class.rounded]=\"rounded()\"\r\n        [class.dots]=\"type() === 'dots'\"\r\n        [class.uneven]=\"type() === 'uneven'\"\r\n        [class.invert]=\"invert()\"\r\n        [style.background-color]=\"color()\"\r\n    ></span>\r\n\r\n    <span \r\n        class=\"ngxMenuToggler__bar ngxMenuToggler__bar--5\"\r\n        [class.isOpen]=\"isOpen()\"\r\n        [class.thin]=\"thin()\"\r\n        [class.rounded]=\"rounded()\"\r\n        [class.dots]=\"type() === 'dots'\"\r\n        [class.uneven]=\"type() === 'uneven'\"\r\n        [class.invert]=\"invert()\"\r\n        [style.background-color]=\"color()\"\r\n    ></span>\r\n\r\n</button>", styles: [":host{height:var(--menu-toggler-size, 40px);aspect-ratio:1/1;display:block}*{box-sizing:border-box;margin:0;padding:0}.ngxMenuToggler__button{border:none;padding:0;cursor:pointer;background-color:transparent;aspect-ratio:1/1;width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-around;position:relative;transition:transform .3s ease-in-out}.ngxMenuToggler__button.invert{align-items:flex-end}.ngxMenuToggler__button.rounded{border-radius:.2rem}.ngxMenuToggler__button:focus-visible{outline:2px solid var(--toggle-color, black);outline-offset:2px}.ngxMenuToggler__button.isOpen.rotateX{transform:rotate(180deg)}.ngxMenuToggler__button.isOpen.rotateX.faster{transform:rotate(360deg)}.ngxMenuToggler__button.isOpen.rotateY{transform:rotateY(180deg)}.ngxMenuToggler__button.isOpen.rotateY.faster{transform:rotateY(360deg)}.ngxMenuToggler__bar{display:block;background-color:#000;width:100%;height:15%}.ngxMenuToggler__bar.thin{height:9%}.ngxMenuToggler__bar.dots{transform:scale(1.2)}.ngxMenuToggler__bar.rounded.dots{border-radius:50%}.ngxMenuToggler__bar.rounded{border-radius:.3rem}.ngxMenuToggler__bar--1.dots,.ngxMenuToggler__bar--3.dots{transition:transform .3s ease-in-out,width .3s ease-in-out;width:15%;left:42.5%;align-self:center}.ngxMenuToggler__bar--1.dots.thin,.ngxMenuToggler__bar--3.dots.thin{width:9%}.ngxMenuToggler__bar--3.uneven{width:33%}.ngxMenuToggler__bar--4.uneven,.ngxMenuToggler__bar--5.uneven{width:66%}.ngxMenuToggler__bar--4.uneven.invert,.ngxMenuToggler__bar--5.uneven.invert{left:34%}.ngxMenuToggler__bar--4.uneven.invert.isOpen,.ngxMenuToggler__bar--5.uneven.invert.isOpen{left:0}.ngxMenuToggler__bar--4.uneven.isOpen,.ngxMenuToggler__bar--5.uneven.isOpen{width:100%}.ngxMenuToggler__bar--1,.ngxMenuToggler__bar--3{transition:transform .3s ease-in-out}.ngxMenuToggler__bar--1.isOpen,.ngxMenuToggler__bar--3.isOpen{transform:scale(0)}.ngxMenuToggler__bar--2{visibility:hidden}.ngxMenuToggler__bar--4,.ngxMenuToggler__bar--5{position:absolute;width:100%;top:42.5%;left:0;transform-origin:center;transition:transform .3s ease-in-out,width .4s ease-in-out,left .4s ease-in-out,border-radius .4s ease-in-out}.ngxMenuToggler__bar--4.thin,.ngxMenuToggler__bar--5.thin{top:45.5%}.ngxMenuToggler__bar--4.dots,.ngxMenuToggler__bar--5.dots{width:15%;left:42.5%;transition:transform .3s ease-in-out,scale .3s ease-in-out,width .3s ease-in-out,left .3s ease-in-out,border-radius .3s ease-in-out}.ngxMenuToggler__bar--4.dots.thin,.ngxMenuToggler__bar--5.dots.thin{left:45.5%;width:9%}.ngxMenuToggler__bar--4.dots.rounded,.ngxMenuToggler__bar--5.dots.rounded{transition:scale .3s ease-in-out,width .3s ease-in-out,left .3s ease-in-out,border-radius .3s ease-in-out}.ngxMenuToggler__bar--4.dots.rounded{transform:rotate(45deg);scale:1.2}.ngxMenuToggler__bar--5.dots.rounded{transform:rotate(-45deg);scale:1.2}.ngxMenuToggler__bar--4.isOpen.dots{width:100%;transform:rotate(45deg);scale:1;left:0}.ngxMenuToggler__bar--5.isOpen.dots{width:100%;transform:rotate(-45deg);scale:1;left:0}.ngxMenuToggler__bar--4.isOpen.dots.rounded,.ngxMenuToggler__bar--5.isOpen.dots.rounded{border-radius:.3rem}.ngxMenuToggler__bar--4.isOpen{transform:rotate(45deg)}.ngxMenuToggler__bar--5.isOpen{transform:rotate(-45deg)}\n"] }]
        }] });

/*
 * Public API Surface of ngx-menu-toggler
 */

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

export { NgxMenuToggler };
//# sourceMappingURL=ngx-menu-toggler.mjs.map