@alyle/ui/fesm2022/alyle-ui-responsive.mjs

Minimal Design, a set of components for Angular

import * as i0 from '@angular/core';
import { Input, Directive, NgModule } from '@angular/core';
import * as i1 from '@alyle/ui';
import { LyCommonModule } from '@alyle/ui';

const MEDIA_PRIORITY = 999;
const styles = {
    hide: {
        display: 'none'
    }
};
/**
 * @deprecated use `[lyDisplay]` instead.
 */
class MediaDirective {
    /**
     * Shows the item when the value is resolved as true
     */
    get lyShow() {
        return this._show;
    }
    set lyShow(val) {
        this._show = val;
        this._showClass = this.theme.addStyle(`lyMedia-show:${val}`, (theme) => ({
            [theme.getBreakpoint(val)]: {
                display: 'block'
            }
        }), this._elementRef.nativeElement, this._showClass, MEDIA_PRIORITY);
    }
    /**
     * Hides the item when the value is resolved as true
     */
    set lyHide(val) {
        this._hide = val;
        this._hideClass = this.theme.addStyle(`lyMedia-hide:${val}`, (theme) => ({
            [theme.getBreakpoint(val)]: {
                display: 'none'
            }
        }), this._elementRef.nativeElement, this._hideClass, MEDIA_PRIORITY);
    }
    get lyHide() {
        return this._hide;
    }
    constructor(_renderer, _elementRef, theme) {
        this._renderer = _renderer;
        this._elementRef = _elementRef;
        this.theme = theme;
        /**
         * Styles
         * @ignore
         */
        this.classes = this.theme.addStyleSheet(styles);
    }
    ngOnInit() {
        if (!this.lyHide) {
            this._renderer.addClass(this._elementRef.nativeElement, this.classes.hide);
        }
    }
    ngOnChanges() {
        if (this.lyHide && this.lyShow) {
            throw new Error(`use only \`lyHide\` or \`lyShow\` per element`);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: MediaDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.LyTheme2 }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: MediaDirective, isStandalone: false, selector: "[lyShow], [lyHide]", inputs: { lyShow: "lyShow", lyHide: "lyHide" }, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: MediaDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[lyShow], [lyHide]',
                    standalone: false
                }]
        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.LyTheme2 }], propDecorators: { lyShow: [{
                type: Input
            }], lyHide: [{
                type: Input
            }] } });

/**
 * @deprecated use instead `[lyDisplay]` or `[lyStyle]`
 */
class ResponsiveModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ResponsiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: ResponsiveModule, declarations: [MediaDirective], exports: [MediaDirective, LyCommonModule] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ResponsiveModule, imports: [LyCommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ResponsiveModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [MediaDirective],
                    exports: [MediaDirective, LyCommonModule],
                }]
        }] });

const Breakpoints = {
    XSmall: '(max-width: 599px)',
    Small: '(min-width: 600px) and (max-width: 959px)',
    Medium: '(min-width: 960px) and (max-width: 1279px)',
    Large: '(min-width: 1280px) and (max-width: 1919px)',
    XLarge: '(min-width: 1920px)',
    Handset: '(max-width: 599px) and (orientation: portrait), ' +
        '(max-width: 959px) and (orientation: landscape)',
    Tablet: '(min-width: 600px) and (max-width: 839px) and (orientation: portrait), ' +
        '(min-width: 960px) and (max-width: 1279px) and (orientation: landscape)',
    Web: '(min-width: 840px) and (orientation: portrait), ' +
        '(min-width: 1280px) and (orientation: landscape)',
    HandsetPortrait: '(max-width: 599px) and (orientation: portrait)',
    TabletPortrait: '(min-width: 600px) and (max-width: 839px) and (orientation: portrait)',
    WebPortrait: '(min-width: 840px) and (orientation: portrait)',
    HandsetLandscape: '(max-width: 959px) and (orientation: landscape)',
    TabletLandscape: '(min-width: 960px) and (max-width: 1279px) and (orientation: landscape)',
    WebLandscape: '(min-width: 1280px) and (orientation: landscape)',
};

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

export { Breakpoints, MediaDirective, ResponsiveModule };
//# sourceMappingURL=alyle-ui-responsive.mjs.map