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

Minimal Design, a set of components for Angular

import { __decorate } from 'tslib';
import * as i0 from '@angular/core';
import { Input, Directive, NgModule } from '@angular/core';
import * as i1 from '@alyle/ui';
import { st2c, StyleCollection, mixinStyleUpdater, mixinBg, mixinColor, mixinRaised, mixinDisabled, mixinOutlined, mixinElevation, mixinShadowColor, StyleRenderer, Style, LyCommonModule } from '@alyle/ui';
import { CommonModule } from '@angular/common';

const STYLE_PRIORITY = -2;
const DEFAULT_POSITION = 'fixed';
const DEFAULT_BG = 'background:tertiary';
const STYLES = (theme, ref) => {
    const __ = ref.selectorsOf(STYLES);
    return {
        $priority: STYLE_PRIORITY,
        root: () => (_className) => `${_className}{padding:0 16px;display:flex;box-sizing:border-box;width:100%;flex-direction:row;align-items:center;white-space:nowrap;height:64px;z-index:${theme.zIndex.toolbar};}@media ${theme.breakpoints['XSmall']}{${_className}{height:56px;}}${st2c(((theme.toolbar
            && theme.toolbar.root
            && (theme.toolbar.root instanceof StyleCollection
                ? theme.toolbar.root.setTransformer(fn => fn(__)).css
                : theme.toolbar.root(__)))), `${_className}`)}`
    };
};
/** @docs-private */
class LyToolbarBase {
    constructor(_theme) {
        this._theme = _theme;
    }
}
/** @docs-private */
const LyToolbarMixinBase = mixinStyleUpdater(mixinBg(mixinColor(mixinRaised(mixinDisabled(mixinOutlined(mixinElevation(mixinShadowColor(LyToolbarBase))))))));
/**
 * @dynamic
 */
class LyToolbar extends LyToolbarMixinBase {
    static { this.и = 'LyToolbar'; }
    static { this.$priority = STYLE_PRIORITY; }
    constructor(_renderer, _el, theme, sRenderer) {
        super(theme);
        this._el = _el;
        this.theme = theme;
        this.sRenderer = sRenderer;
        /**
         * Styles
         * @docs-private
         */
        this.classes = this.theme.renderStyleSheet(STYLES);
        this.setAutoContrast();
        _renderer.addClass(this._el.nativeElement, this.classes.root);
    }
    ngOnChanges() {
        this.updateStyle(this._el);
    }
    ngOnInit() {
        if (!this.position) {
            this.position = DEFAULT_POSITION;
        }
        if (!this.bg) {
            this.bg = DEFAULT_BG;
            this.updateStyle(this._el);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyToolbar, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.LyTheme2 }, { token: i1.StyleRenderer }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: LyToolbar, isStandalone: false, selector: "ly-toolbar", inputs: { bg: "bg", color: "color", raised: "raised", outlined: "outlined", elevation: "elevation", shadowColor: "shadowColor", position: "position", appearance: "appearance" }, providers: [
            StyleRenderer
        ], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
}
__decorate([
    Style((val, media) => ({ breakpoints }) => ((_className) => `@media ${(media && breakpoints[media]) || 'all'}{${_className}{position:${val};}}`))
], LyToolbar.prototype, "position", void 0);
__decorate([
    Style((val) => (theme, ref) => {
        const classes = ref.selectorsOf(STYLES);
        if (theme.toolbar && theme.toolbar.appearance) {
            const appearance = theme.toolbar.appearance[val];
            if (appearance) {
                return appearance instanceof StyleCollection
                    ? appearance.setTransformer((_) => _(classes)).css
                    : appearance(classes);
            }
        }
        throw new Error(`${val} not found in theme.field.appearance`);
    })
], LyToolbar.prototype, "appearance", void 0);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyToolbar, decorators: [{
            type: Directive,
            args: [{
                    selector: 'ly-toolbar',
                    inputs: [
                        'bg',
                        'color',
                        'raised',
                        'outlined',
                        'elevation',
                        'shadowColor'
                    ],
                    providers: [
                        StyleRenderer
                    ],
                    standalone: false
                }]
        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.LyTheme2 }, { type: i1.StyleRenderer }], propDecorators: { position: [{
                type: Input
            }], appearance: [{
                type: Input
            }] } });

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

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

export { LyToolbar, LyToolbarBase, LyToolbarMixinBase, LyToolbarModule, STYLES };
//# sourceMappingURL=alyle-ui-toolbar.mjs.map