@fivethree/core/esm2015/lib/app-bar/app-bar.component.js

Fivethree Core Components

/**
 * @fileoverview added by tsickle
 * Generated from: lib/app-bar/app-bar.component.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
import { Component, ContentChild, Input } from '@angular/core';
import { FivAppBarFabDirective } from './app-bar-fab.directive';
export class FivAppBar {
    constructor() {
        this.cutoutVisible = true;
    }
}
FivAppBar.decorators = [
    { type: Component, args: [{
                selector: 'fiv-app-bar',
                template: "<div class=\"appbar\"\n  [ngClass]=\"{'cutout': cutoutVisible, 'left': fivFab.fivAppBarFab === 'left', 'right': fivFab.fivAppBarFab === 'right'}\">\n  <div class=\"appbar-rect left\">\n    <div class=\"tabs\">\n      <ng-content select=\"[left]\"></ng-content>\n    </div>\n  </div>\n  <ng-content select=\"fiv-fab\"></ng-content>\n  <svg  viewBox=\"0 0 100 50\" width=\"100\" height=\"50\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M100 0v50H0V0c.543 27.153 22.72 49 50 49S99.457 27.153 99.99 0h.01z\" fill=\"red\" fill-rule=\"evenodd\"/></svg>\n  <div class=\"rect-filler\"></div>\n  <div class=\"appbar-rect right\">\n    <div class=\"tabs\">\n      <ng-content select=\"[right]\"></ng-content>\n    </div>\n  </div>\n</div>",
                styles: [":host{display:block;position:relative;--fiv-radius:72px;--fiv-appbar-fab-size:56px;--fiv-appbar-height:56px;width:100%;--fiv-border-radius:6px;--fiv-appbar-background-color:var(--ion-color-light);--fiv-side-width:12px;--fiv-fab-icon-color:var(--ion-color-light)}svg{height:calc(var(--fiv-radius)/ 2);width:var(--fiv-radius);left:calc(50% - (var(--fiv-radius)/ 2));position:absolute;bottom:calc(env(safe-area-inset-bottom) + var(--fiv-appbar-height) - var(--fiv-radius)/ 2 - var(--fiv-border-radius))}svg path{fill:var(--fiv-appbar-background-color)}.appbar{width:100%;position:absolute;bottom:0;left:0;height:calc(var(--fiv-appbar-height) + env(safe-area-inset-bottom));background:rgba(0,0,0,0);z-index:5000}.appbar .appbar-rect{overflow:hidden;position:absolute;width:calc(50% - (var(--fiv-radius)/ 2));height:calc(var(--fiv-appbar-height) + env(safe-area-inset-bottom));bottom:0;box-shadow:3px -4px 5px 0 rgba(0,0,0,.1)}.appbar .appbar-rect.left{left:0;background:var(--fiv-appbar-background-color);border-top-right-radius:var(--fiv-border-radius)}.appbar .appbar-rect.right{right:0;background:var(--fiv-appbar-background-color);border-top-left-radius:var(--fiv-border-radius)}.appbar ::ng-deep fiv-fab{position:absolute;left:calc(50% - .5 * var(--fiv-fab-size));top:calc(-.5 * var(--fiv-appbar-fab-size) + var(--fiv-border-radius));display:block;--fiv-fab-size:var(--fiv-appbar-fab-size);z-index:14}.appbar ::ng-deep fiv-fab fiv-icon{--fiv-icon-color:var(--fiv-fab-icon-color)}.appbar .rect-filler{width:var(--fiv-radius);height:calc(env(safe-area-inset-bottom) + var(--fiv-appbar-height) - var(--fiv-radius)/ 2 - var(--fiv-border-radius));position:absolute;overflow:hidden;bottom:0;left:calc(50% - (var(--fiv-radius)/ 2));background:var(--fiv-appbar-background-color)}.appbar:not(.cutout) .appbar-rect.left{border-top-right-radius:0}.appbar:not(.cutout) .appbar-rect.right{border-top-left-radius:0}.appbar.left .appbar-rect.left{width:var(--fiv-side-width)}.appbar.left .appbar-rect.right{width:calc(100% - var(--fiv-radius) - var(--fiv-side-width))}.appbar.left .rect-filler,.appbar.left svg{left:var(--fiv-side-width)}.appbar.left ::ng-deep fiv-fab{transform:translateX(0);left:calc(var(--fiv-side-width) + var(--fiv-radius)/ 2 - var(--fiv-appbar-fab-size)/ 2);position:absolute}.appbar.right .appbar-rect.left{width:calc(100% - var(--fiv-radius) - var(--fiv-side-width))}.appbar.right .appbar-rect.right{width:var(--fiv-side-width)}.appbar.right .rect-filler,.appbar.right svg{left:calc(100% - var(--fiv-radius) - var(--fiv-side-width))}.appbar.right ::ng-deep fiv-fab{transform:translateX(0);left:calc(100% - var(--fiv-side-width) - var(--fiv-radius)/ 2 - var(--fiv-appbar-fab-size)/ 2)}.tabs{display:flex;width:100%;height:100%;position:relative}"]
            }] }
];
/** @nocollapse */
FivAppBar.ctorParameters = () => [];
FivAppBar.propDecorators = {
    titleMode: [{ type: Input }],
    fivFab: [{ type: ContentChild, args: [FivAppBarFabDirective, { static: false },] }]
};
if (false) {
    /** @type {?} */
    FivAppBar.prototype.cutoutVisible;
    /** @type {?} */
    FivAppBar.prototype.titleMode;
    /** @type {?} */
    FivAppBar.prototype.fivFab;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXBwLWJhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AZml2ZXRocmVlL2NvcmUvIiwic291cmNlcyI6WyJsaWIvYXBwLWJhci9hcHAtYmFyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMvRCxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQVFoRSxNQUFNLE9BQU8sU0FBUztJQVFwQjtRQVBBLGtCQUFhLEdBQUcsSUFBSSxDQUFDO0lBT04sQ0FBQzs7O1lBYmpCLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsYUFBYTtnQkFDdkIsd3VCQUF1Qzs7YUFFeEM7Ozs7O3dCQUlFLEtBQUs7cUJBRUwsWUFBWSxTQUFDLHFCQUFxQixFQUFFLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRTs7OztJQUp0RCxrQ0FBcUI7O0lBRXJCLDhCQUFvQzs7SUFFcEMsMkJBQzhCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBDb250ZW50Q2hpbGQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBGaXZBcHBCYXJGYWJEaXJlY3RpdmUgfSBmcm9tICcuL2FwcC1iYXItZmFiLmRpcmVjdGl2ZSc7XG5pbXBvcnQgeyBBcHBCYXJUaXRsZU1vZGUgfSBmcm9tICcuLi9pbnRlcmZhY2VzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnZml2LWFwcC1iYXInLFxuICB0ZW1wbGF0ZVVybDogJy4vYXBwLWJhci5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2FwcC1iYXIuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBGaXZBcHBCYXIge1xuICBjdXRvdXRWaXNpYmxlID0gdHJ1ZTtcblxuICBASW5wdXQoKSB0aXRsZU1vZGU6IEFwcEJhclRpdGxlTW9kZTtcblxuICBAQ29udGVudENoaWxkKEZpdkFwcEJhckZhYkRpcmVjdGl2ZSwgeyBzdGF0aWM6IGZhbHNlIH0pXG4gIGZpdkZhYjogRml2QXBwQmFyRmFiRGlyZWN0aXZlO1xuXG4gIGNvbnN0cnVjdG9yKCkge31cbn1cbiJdfQ==