materialize-angular/fesm2015/materialize-angular.js

Material UI Angular library

import { EventEmitter, Component, Renderer2, Output, ViewChild, Input, ContentChildren, Directive, ElementRef, HostListener, NgModule, forwardRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { Router } from '@angular/router';
import { DomSanitizer } from '@angular/platform-browser';

/**
 * @fileoverview added by tsickle
 * Generated from: app/config/index.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * @license
 * Copyright Workylab. All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://raw.githubusercontent.com/workylab/materialize-angular/master/LICENSE
 */
/** @type {?} */
const config = {
    components: {
        prefix: 'materialize'
    }
};

/**
 * @fileoverview added by tsickle
 * Generated from: app/completed-components/collapsible/collapsible.component.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class CollapsibleComponent {
    /**
     * @param {?} renderer
     */
    constructor(renderer) {
        this.renderer = renderer;
        this.className = CollapsibleComponent.defaultProps.className;
        this.disabled = CollapsibleComponent.defaultProps.disabled;
        this.isOpen = CollapsibleComponent.defaultProps.isOpen;
        this.showIndicator = CollapsibleComponent.defaultProps.showIndicator;
        this.prefix = config.components.prefix;
        this.onCloseEmitter = new EventEmitter();
        this.onOpenEmitter = new EventEmitter();
        this.onToggle = this.onToggle.bind(this);
        this.update = this.update.bind(this);
        window.addEventListener('resize', this.update);
    }
    /**
     * @return {?}
     */
    ngAfterContentInit() {
        if (this.isOpen) {
            setTimeout((/**
             * @return {?}
             */
            () => {
                this.update();
            }), 300);
        }
    }
    /**
     * @return {?}
     */
    ngOnChanges() {
        this.update();
    }
    /**
     * @return {?}
     */
    onToggle() {
        if (!this.disabled) {
            if (this.isOpen) {
                this.close();
                this.onCloseEmitter.emit();
            }
            else {
                this.open();
                this.onOpenEmitter.emit();
            }
        }
    }
    /**
     * @return {?}
     */
    open() {
        this.isOpen = true;
        this.update();
    }
    /**
     * @return {?}
     */
    close() {
        this.isOpen = false;
        this.update();
    }
    /**
     * @return {?}
     */
    update() {
        /** @type {?} */
        const contentContainer = this.containerRef.nativeElement;
        /** @type {?} */
        const maxHeight = this.isOpen
            ? contentContainer.scrollHeight
            : 0;
        this.renderer.setStyle(contentContainer, 'maxHeight', `${maxHeight}px`);
    }
}
CollapsibleComponent.defaultProps = {
    className: '',
    disabled: false,
    isOpen: false,
    showIndicator: true
};
CollapsibleComponent.decorators = [
    { type: Component, args: [{
                selector: `${config.components.prefix}-collapsible }`,
                template: "<div\n  [ngClass]=\"[prefix + '-collapsible', className]\"\n  [class.disabled]=\"disabled\"\n  [class.open]=\"isOpen\"\n>\n  <div (click)=\"onToggle()\"\n    [isRippleActive]=\"!disabled\"\n    [ngClass]=\"[prefix + '-collapsible-title', className]\"\n\n    materializeRipple\n  >\n    <ng-content select=\"materialize-collapsible-title\"></ng-content>\n\n    <materialize-icon *ngIf=\"showIndicator\" [className]=\"prefix + '-collapsible-title-icon'\">\n      expand_more\n    </materialize-icon>\n  </div>\n\n  <div [ngClass]=\"[prefix + '-collapsible-content-container', className]\" #container>\n    <div [ngClass]=\"prefix + '-collapsible-content'\">\n      <ng-content select=\"materialize-collapsible-content\"></ng-content>\n    </div>\n  </div>\n</div>\n"
            }] }
];
/** @nocollapse */
CollapsibleComponent.ctorParameters = () => [
    { type: Renderer2 }
];
CollapsibleComponent.propDecorators = {
    onCloseEmitter: [{ type: Output, args: ['onClose',] }],
    onOpenEmitter: [{ type: Output, args: ['onOpen',] }],
    containerRef: [{ type: ViewChild, args: ['container', { static: true },] }],
    className: [{ type: Input }],
    disabled: [{ type: Input }],
    isOpen: [{ type: Input }],
    showIndicator: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    CollapsibleComponent.defaultProps;
    /** @type {?} */
    CollapsibleComponent.prototype.onCloseEmitter;
    /** @type {?} */
    CollapsibleComponent.prototype.onOpenEmitter;
    /** @type {?} */
    CollapsibleComponent.prototype.containerRef;
    /** @type {?} */
    CollapsibleComponent.prototype.className;
    /** @type {?} */
    CollapsibleComponent.prototype.disabled;
    /** @type {?} */
    CollapsibleComponent.prototype.isOpen;
    /** @type {?} */
    CollapsibleComponent.prototype.showIndicator;
    /** @type {?} */
    CollapsibleComponent.prototype.prefix;
    /**
     * @type {?}
     * @private
     */
    CollapsibleComponent.prototype.renderer;
}

/**
 * @fileoverview added by tsickle
 * Generated from: app/completed-components/accordion/accordion.component.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class AccordionComponent {
    constructor() {
        this.className = AccordionComponent.defaultProps.className;
        this.activeIndex = AccordionComponent.defaultProps.activeIndex;
        this.initCollapsibles = this.initCollapsibles.bind(this);
        this.registerCollapsibles = this.registerCollapsibles.bind(this);
        this.onToggleEmitter = new EventEmitter();
    }
    /**
     * @return {?}
     */
    ngAfterContentInit() {
        this.initCollapsibles();
        this.collapsiblesQueryList.changes.subscribe(this.initCollapsibles);
    }
    /**
     * @return {?}
     */
    initCollapsibles() {
        setTimeout(this.registerCollapsibles, 0);
    }
    /**
     * @return {?}
     */
    registerCollapsibles() {
        this.collapsiblesQueryList.forEach((/**
         * @param {?} item
         * @param {?} index
         * @return {?}
         */
        (item, index) => {
            item.onOpenEmitter.subscribe((/**
             * @return {?}
             */
            () => {
                this.toggleCollapsibles(index);
            }));
        }));
    }
    /**
     * @param {?} currentIndex
     * @return {?}
     */
    toggleCollapsibles(currentIndex) {
        this.activeIndex = currentIndex;
        this.onToggleEmitter.emit(this.activeIndex);
        this.collapsiblesQueryList.forEach((/**
         * @param {?} item
         * @param {?} index
         * @return {?}
         */
        (item, index) => {
            if (index === currentIndex) {
                item.open();
            }
            else {
                item.close();
            }
        }));
    }
    /**
     * @return {?}
     */
    showNext() {
        /** @type {?} */
        const nextIndex = this.activeIndex === null || this.activeIndex >= this.collapsiblesQueryList.length
            ? null
            : this.activeIndex + 1;
        this.toggleCollapsibles(nextIndex);
    }
    /**
     * @return {?}
     */
    showPrev() {
        /** @type {?} */
        const prevIndex = this.activeIndex === null || this.activeIndex === 0
            ? null
            : this.activeIndex - 1;
        this.toggleCollapsibles(prevIndex);
    }
}
AccordionComponent.defaultProps = {
    activeIndex: null,
    className: ''
};
AccordionComponent.decorators = [
    { type: Component, args: [{
                selector: `${config.components.prefix}-accordion }`,
                template: "<div [ngClass]=\"className\">\n  <ng-content select=\"materialize-collapsible\"></ng-content>\n</div>\n"
            }] }
];
/** @nocollapse */
AccordionComponent.ctorParameters = () => [];
AccordionComponent.propDecorators = {
    collapsiblesQueryList: [{ type: ContentChildren, args: [CollapsibleComponent,] }],
    onToggleEmitter: [{ type: Output, args: ['onToggle',] }],
    className: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    AccordionComponent.defaultProps;
    /** @type {?} */
    AccordionComponent.prototype.collapsiblesQueryList;
    /** @type {?} */
    AccordionComponent.prototype.onToggleEmitter;
    /** @type {?} */
    AccordionComponent.prototype.className;
    /** @type {?} */
    AccordionComponent.prototype.activeIndex;
}

/**
 * @fileoverview added by tsickle
 * Generated from: app/completed-components/collapsible/collapsible-content/collapsible-content.component.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class CollapsibleContentComponent {
}
CollapsibleContentComponent.decorators = [
    { type: Component, args: [{
                selector: `${config.components.prefix}-collapsible-content }`,
                template: "<ng-content></ng-content>\n"
            }] }
];

/**
 * @fileoverview added by tsickle
 * Generated from: app/completed-components/collapsible/collapsible-title/collapsible-title.component.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class CollapsibleTitleComponent {
}
CollapsibleTitleComponent.decorators = [
    { type: Component, args: [{
                selector: `${config.components.prefix}-collapsible-title }`,
                template: "<ng-content></ng-content>\n"
            }] }
];

/**
 * @fileoverview added by tsickle
 * Generated from: app/completed-components/common/prefix.directive.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class PrefixDirective {
}
PrefixDirective.decorators = [
    { type: Directive, args: [{
                selector: '[materializePrefix]'
            },] }
];

/**
 * @fileoverview added by tsickle
 * Generated from: app/completed-components/common/ripple.directive.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * @record
 */
function Coordinate() { }
if (false) {
    /** @type {?} */
    Coordinate.prototype.x;
    /** @type {?} */
    Coordinate.prototype.y;
}
class RippleDirective {
    /**
     * @param {?} elementRef
     * @param {?} renderer
     */
    constructor(elementRef, renderer) {
        this.elementRef = elementRef;
        this.renderer = renderer;
        this.rippleDuration = 500;
        this.isRippleActive = true;
        this.isRippleCenter = false;
        this.prefix = config.components.prefix;
        this.createRipple = this.createRipple.bind(this);
        this.element = this.elementRef.nativeElement;
        this.renderer.addClass(this.element, `${this.prefix}-ripple-element`);
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        if (!this.isRippleActive) {
            this.renderer.addClass(this.element, 'disabled');
        }
    }
    /**
     * @param {?} event
     * @return {?}
     */
    createRipple(event) {
        if (!this.isRippleActive) {
            return;
        }
        /** @type {?} */
        const coordinates = this.isRippleCenter
            ? this.getCoordinatesByCenter()
            : this.getCoordinatesByEvent(event);
        /** @type {?} */
        const radio = this.getRippleRadio(coordinates);
        this.renderRipple(radio, coordinates);
    }
    /**
     * @param {?} radio
     * @param {?} coordinate
     * @return {?}
     */
    renderRipple(radio, coordinate) {
        /** @type {?} */
        const ripple = this.renderer.createElement('div');
        /** @type {?} */
        const centerY = coordinate.y - radio;
        /** @type {?} */
        const centerX = coordinate.x - radio;
        this.renderer.addClass(ripple, 'ripple');
        this.renderer.setStyle(ripple, 'height', `${radio * 2}px`);
        this.renderer.setStyle(ripple, 'width', `${radio * 2}px`);
        this.renderer.setStyle(ripple, 'top', `${centerY}px`);
        this.renderer.setStyle(ripple, 'left', `${centerX}px`);
        this.renderer.insertBefore(this.element, ripple, this.element.firstChild);
        this.scaleRipple(ripple);
    }
    /**
     * @return {?}
     */
    getCoordinatesByCenter() {
        const { offsetHeight, offsetWidth } = this.element;
        /** @type {?} */
        const y = offsetHeight / 2;
        /** @type {?} */
        const x = offsetWidth / 2;
        return { x, y };
    }
    /**
     * @param {?} event
     * @return {?}
     */
    getCoordinatesByEvent(event) {
        /** @type {?} */
        const offset = this.getOffset(this.element);
        /** @type {?} */
        const y = event.pageY - offset.top;
        /** @type {?} */
        const x = event.pageX - offset.left;
        return { x, y };
    }
    /**
     * @param {?} coordinate
     * @return {?}
     */
    getRippleRadio(coordinate) {
        /** @type {?} */
        const height = Math.max(this.element.offsetHeight - coordinate.y, coordinate.y);
        /** @type {?} */
        const width = Math.max(this.element.offsetWidth - coordinate.x, coordinate.x);
        /** @type {?} */
        const radio = Math.hypot(height, width);
        return radio;
    }
    /**
     * @param {?} ripple
     * @return {?}
     */
    scaleRipple(ripple) {
        setTimeout((/**
         * @return {?}
         */
        () => {
            ripple.style.transitionDuration = `${this.rippleDuration}ms`;
            ripple.style.transform = 'scale(1)';
            this.hideRipple(ripple);
        }), 0);
    }
    /**
     * @param {?} ripple
     * @return {?}
     */
    hideRipple(ripple) {
        setTimeout((/**
         * @return {?}
         */
        () => {
            this.renderer.setStyle(ripple, 'transitionDuration', `${this.rippleDuration}ms`);
            this.renderer.setStyle(ripple, 'opacity', '0');
            this.removeRipple(ripple);
        }), this.rippleDuration);
    }
    /**
     * @param {?} ripple
     * @return {?}
     */
    removeRipple(ripple) {
        setTimeout((/**
         * @return {?}
         */
        () => {
            this.renderer.removeChild(this.element, ripple);
        }), this.rippleDuration);
    }
    /**
     * @param {?} element
     * @return {?}
     */
    getOffset(element) {
        /** @type {?} */
        const rect = element.getBoundingClientRect();
        /** @type {?} */
        const top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
        /** @type {?} */
        const left = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
        /** @type {?} */
        const offset = {
            left: rect.left + left,
            top: rect.top + top
        };
        return offset;
    }
}
RippleDirective.decorators = [
    { type: Directive, args: [{
                selector: `[${config.components.prefix}Ripple]`
            },] }
];
/** @nocollapse */
RippleDirective.ctorParameters = () => [
    { type: ElementRef },
    { type: Renderer2 }
];
RippleDirective.propDecorators = {
    rippleDuration: [{ type: Input }],
    isRippleActive: [{ type: Input }],
    isRippleCenter: [{ type: Input }],
    createRipple: [{ type: HostListener, args: ['mousedown', ['$event'],] }]
};
if (false) {
    /** @type {?} */
    RippleDirective.prototype.rippleDuration;
    /** @type {?} */
    RippleDirective.prototype.isRippleActive;
    /** @type {?} */
    RippleDirective.prototype.isRippleCenter;
    /**
     * @type {?}
     * @private
     */
    RippleDirective.prototype.element;
    /**
     * @type {?}
     * @private
     */
    RippleDirective.prototype.prefix;
    /**
     * @type {?}
     * @private
     */
    RippleDirective.prototype.elementRef;
    /**
     * @type {?}
     * @private
     */
    RippleDirective.prototype.renderer;
}

/**
 * @fileoverview added by tsickle
 * Generated from: app/completed-components/common/suffix.directive.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class SuffixDirective {
}
SuffixDirective.decorators = [
    { type: Directive, args: [{
                selector: '[materializeSuffix]'
            },] }
];

/**
 * @fileoverview added by tsickle
 * Generated from: app/completed-components/common/common.module.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class MaterializeCommonModule {
}
MaterializeCommonModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    PrefixDirective,
                    RippleDirective,
                    SuffixDirective
                ],
                exports: [
                    PrefixDirective,
                    RippleDirective,
                    SuffixDirective
                ],
                imports: [CommonModule]
            },] }
];

/**
 * @fileoverview added by tsickle
 * Generated from: app/completed-components/icon/icon.model.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * @license
 * Copyright Workylab. All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://raw.githubusercontent.com/workylab/materialize-angular/master/LICENSE
 */
/**
 * @record
 */
function IconModel() { }
if (false) {
    /** @type {?} */
    IconModel.prototype.className;
    /** @type {?} */
    IconModel.prototype.size;
}
/** @enum {string} */
const ICON_SIZES = {
    NONE: "",
    XS: "xs",
    SM: "sm",
    MD: "md",
    LG: "lg",
    XL: "xl",
};

/**
 * @fileoverview added by tsickle
 * Generated from: app/completed-components/icon/icon.component.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class IconComponent {
    constructor() {
        this.className = IconComponent.defaultProps.className;
        this.size = IconComponent.defaultProps.size;
        this.prefix = config.components.prefix;
        this.onClickEmitter = new EventEmitter();
        this.onBlurEmitter = new EventEmitter();
    }
    /**
     * @return {?}
     */
    onClick() {
        this.onClickEmitter.emit();
    }
    /**
     * @return {?}
     */
    onBlur() {
        this.onBlurEmitter.emit();
    }
}
IconComponent.defaultProps = {
    className: '',
    size: ICON_SIZES.NONE
};
IconComponent.decorators = [
    { type: Component, args: [{
                selector: `${config.components.prefix}-icon }`,
                template: "<span class=\"icon\" [ngClass]=\"[prefix + '-icon', size, className]\" (click)=\"onClick()\" (blur)=\"onBlur()\">\n  <ng-content></ng-content>\n</span>\n"
            }] }
];
/** @nocollapse */
IconComponent.ctorParameters = () => [];
IconComponent.propDecorators = {
    onClickEmitter: [{ type: Output, args: ['onClick',] }],
    onBlurEmitter: [{ type: Output, args: ['onBlur',] }],
    className: [{ type: Input }],
    size: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    IconComponent.defaultProps;
    /** @type {?} */
    IconComponent.prototype.onClickEmitter;
    /** @type {?} */
    IconComponent.prototype.onBlurEmitter;
    /** @type {?} */
    IconComponent.prototype.className;
    /** @type {?} */
    IconComponent.prototype.size;
    /** @type {?} */
    IconComponent.prototype.prefix;
}

/**
 * @fileoverview added by tsickle
 * Generated from: app/completed-components/icon/icon.module.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class MaterializeIconModule {
}
MaterializeIconModule.decorators = [
    { type: NgModule, args: [{
                declarations: [IconComponent],
                exports: [IconComponent],
                imports: [CommonModule]
            },] }
];

/**
 * @fileoverview added by tsickle
 * Generated from: app/completed-components/collapsible/collapsible.module.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class MaterializeCollapsibleModule {
}
MaterializeCollapsibleModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    CollapsibleComponent,
                    CollapsibleContentComponent,
                    CollapsibleTitleComponent
                ],
                exports: [
                    CollapsibleComponent,
                    CollapsibleContentComponent,
                    CollapsibleTitleComponent
                ],
                imports: [
                    CommonModule,
                    MaterializeIconModule,
                    MaterializeCommonModule
                ]
            },] }
];

/**
 * @fileoverview added by tsickle
 * Generated from: app/completed-components/accordion/accordion.module.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class MaterializeAccordionModule {
}
MaterializeAccordionModule.decorators = [
    { type: NgModule, args: [{
                declarations: [AccordionComponent],
                exports: [AccordionComponent],
                imports: [
                    MaterializeCollapsibleModule,
                    CommonModule,
                    MaterializeCommonModule
                ]
            },] }
];

/**
 * @fileoverview added by tsickle
 * Generated from: app/completed-components/accordion/accordion.model.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * @license
 * Copyright Workylab. All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://raw.githubusercontent.com/workylab/materialize-angular/master/LICENSE
 */
/**
 * @record
 */
function AccordionModel() { }
if (false) {
    /** @type {?} */
    AccordionModel.prototype.activeIndex;
    /** @type {?} */
    AccordionModel.prototype.className;
}

/**
 * @fileoverview added by tsickle
 * Generated from: app/completed-components/button/button.model.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * @license
 * Copyright Workylab. All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://raw.githubusercontent.com/workylab/materialize-angular/master/LICENSE
 */
/**
 * @record
 */
function ButtonModel() { }
if (false) {
    /** @type {?} */
    ButtonModel.prototype.className;
    /** @type {?} */
    ButtonModel.prototype.disabled;
    /** @type {?} */
    ButtonModel.prototype.level;
    /** @type {?} */
    ButtonModel.prototype.rippleDuration;
    /** @type {?} */
    ButtonModel.prototype.type;
}
/** @enum {string} */
const BUTTON_LEVELS = {
    TEXT: "text",
    ACCENT: "accent",
    OUTLINE: "outline",
};
/** @enum {string} */
const BUTTON_TYPES = {
    BUTTON: "button",
    SUBMIT: "submit",
    RESET: "reset",
};

/**
 * @fileoverview added by tsickle
 * Generated from: app/completed-components/button/button.component.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class ButtonComponent {
    constructor() {
        this.className = ButtonComponent.defaultProps.className;
        this.disabled = ButtonComponent.defaultProps.disabled;
        this.level = ButtonComponent.defaultProps.level;
        this.rippleDuration = ButtonComponent.defaultProps.rippleDuration;
        this.type = ButtonComponent.defaultProps.type;
        this.prefix = config.components.prefix;
        this.isFocused = false;
        this.onBlurEmitter = new EventEmitter();
        this.onClickEmitter = new EventEmitter();
    }
    /**
     * @return {?}
     */
    onFocus() {
        if (!this.disabled) {
            this.isFocused = true;
        }
    }
    /**
     * @return {?}
     */
    onClick() {
        if (!this.disabled) {
            this.isFocused = false;
            this.onClickEmitter.emit();
        }
    }
    /**
     * @return {?}
     */
    onBlur() {
        this.onBlurEmitter.emit();
        this.isFocused = false;
    }
}
ButtonComponent.defaultProps = {
    className: '',
    disabled: false,
    level: BUTTON_LEVELS.ACCENT,
    rippleDuration: 250,
    type: BUTTON_TYPES.BUTTON
};
ButtonComponent.decorators = [
    { type: Component, args: [{
                selector: `${config.components.prefix}-button }`,
                template: "<button [ngClass]=\"[prefix + '-button', level, className]\"\n  (blur)=\"onBlur()\"\n  (click)=\"onClick()\"\n  (focus)=\"onFocus()\"\n\n  materializeRipple\n  [isRippleActive]=\"!disabled\"\n  [rippleDuration]=\"rippleDuration\"\n  \n  [class.focused]=\"isFocused\"\n  [disabled]=\"disabled\"\n  [type]=\"type\"\n  \n  #element>\n  <ng-content></ng-content>\n</button>\n"
            }] }
];
/** @nocollapse */
ButtonComponent.ctorParameters = () => [];
ButtonComponent.propDecorators = {
    className: [{ type: Input }],
    disabled: [{ type: Input }],
    level: [{ type: Input }],
    rippleDuration: [{ type: Input }],
    type: [{ type: Input }],
    onBlurEmitter: [{ type: Output, args: ['onBlur',] }],
    onClickEmitter: [{ type: Output, args: ['onClick',] }],
    element: [{ type: ViewChild, args: ['element', { static: true },] }]
};
if (false) {
    /** @type {?} */
    ButtonComponent.defaultProps;
    /** @type {?} */
    ButtonComponent.prototype.className;
    /** @type {?} */
    ButtonComponent.prototype.disabled;
    /** @type {?} */
    ButtonComponent.prototype.level;
    /** @type {?} */
    ButtonComponent.prototype.rippleDuration;
    /** @type {?} */
    ButtonComponent.prototype.type;
    /** @type {?} */
    ButtonComponent.prototype.onBlurEmitter;
    /** @type {?} */
    ButtonComponent.prototype.onClickEmitter;
    /** @type {?} */
    ButtonComponent.prototype.element;
    /** @type {?} */
    ButtonComponent.prototype.prefix;
    /** @type {?} */
    ButtonComponent.prototype.isFocused;
}

/**
 * @fileoverview added by tsickle
 * Generated from: app/completed-components/button/button.module.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class MaterializeButtonModule {
}
MaterializeButtonModule.decorators = [
    { type: NgModule, args: [{
                declarations: [ButtonComponent],
                exports: [ButtonComponent],
                imports: [
                    CommonModule,
                    MaterializeCommonModule
                ]
            },] }
];

/**
 * @fileoverview added by tsickle
 * Generated from: app/completed-components/button-toggle-group/button-toggle/button-toggle.component.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class ButtonToggleComponent {
    constructor() {
        this.className = ButtonToggleComponent.defaultProps.className;
        this.disabled = ButtonToggleComponent.defaultProps.disabled;
        this.name = ButtonToggleComponent.defaultProps.name;
        this.value = ButtonToggleComponent.defaultProps.value;
        this.prefix = config.components.prefix;
        this.onClickEmitter = new EventEmitter();
        this.isActive = false;
        this.isFocused = false;
    }
    /**
     * @return {?}
     */
    onClick() {
        if (!this.disabled) {
            this.isActive = !this.isActive;
            this.isFocused = false;
            this.onClickEmitter.emit(this.value);
        }
    }
    /**
     * @return {?}
     */
    onBlur() {
        this.isFocused = false;
    }
    /**
     * @return {?}
     */
    onFocus() {
        if (!this.disabled) {
            this.isFocused = true;
        }
    }
}
ButtonToggleComponent.defaultProps = {
    className: '',
    disabled: false,
    name: '',
    value: ''
};
ButtonToggleComponent.decorators = [
    { type: Component, args: [{
                selector: `${config.components.prefix}-button-toggle }`,
                template: "<div (click)=\"onClick()\" (blur)=\"onBlur()\" (focus)=\"onFocus()\"\n\n  [ngClass]=\"[prefix + '-button-toggle', className]\"\n  [class.active]=\"isActive\"\n  [class.disabled]=\"disabled\"\n  [class.focused]=\"isFocused\"\n  [tabindex]=\"disabled ? '-1': '0'\"\n  [isRippleActive]=\"!disabled\"\n\n  materializeRipple  \n>\n  <ng-content></ng-content>\n</div>\n"
            }] }
];
/** @nocollapse */
ButtonToggleComponent.ctorParameters = () => [];
ButtonToggleComponent.propDecorators = {
    onClickEmitter: [{ type: Output, args: ['onClick',] }],
    className: [{ type: Input }],
    disabled: [{ type: Input }],
    name: [{ type: Input }],
    value: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    ButtonToggleComponent.defaultProps;
    /** @type {?} */
    ButtonToggleComponent.prototype.onClickEmitter;
    /** @type {?} */
    ButtonToggleComponent.prototype.className;
    /** @type {?} */
    ButtonToggleComponent.prototype.disabled;
    /** @type {?} */
    ButtonToggleComponent.prototype.name;
    /** @type {?} */
    ButtonToggleComponent.prototype.value;
    /** @type {?} */
    ButtonToggleComponent.prototype.prefix;
    /** @type {?} */
    ButtonToggleComponent.prototype.isActive;
    /** @type {?} */
    ButtonToggleComponent.prototype.isFocused;
}

/**
 * @fileoverview added by tsickle
 * Generated from: app/completed-components/button-toggle-group/button-toggle-group.component.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class ButtonToggleGroupComponent {
    constructor() {
        this.canUncheck = ButtonToggleGroupComponent.defaultProps.canUncheck;
        this.className = ButtonToggleGroupComponent.defaultProps.className;
        this.disabled = ButtonToggleGroupComponent.defaultProps.disabled;
        this.value = ButtonToggleGroupComponent.defaultProps.value;
        this.prefix = config.components.prefix;
        this.isFocused = false;
        this.onChangeEmitter = new EventEmitter();
        this.initButtons = this.initButtons.bind(this);
        this.registerButtons = this.registerButtons.bind(this);
        this.toggleButton = this.toggleButton.bind(this);
    }
    /**
     * @return {?}
     */
    ngAfterContentInit() {
        this.initButtons();
        this.buttonsQueryList.changes.subscribe(this.initButtons);
    }
    /**
     * @return {?}
     */
    initButtons() {
        if (this.disabled) {
            this.disableButtons(this.disabled);
        }
        setTimeout(this.registerButtons, 0);
    }
    /**
     * @param {?} disabled
     * @return {?}
     */
    disableButtons(disabled) {
        this.buttonsQueryList.forEach((/**
         * @param {?} item
         * @return {?}
         */
        item => {
            item.disabled = disabled;
        }));
    }
    /**
     * @return {?}
     */
    registerButtons() {
        this.buttonsQueryList.forEach((/**
         * @param {?} button
         * @return {?}
         */
        button => {
            button.isActive = (this.value.lastIndexOf(button.value) >= 0);
            button.onClickEmitter.subscribe(this.toggleButton);
        }));
    }
    /**
     * @param {?} value
     * @return {?}
     */
    toggleButton(value) {
        this.setValueAllButtons(value);
        /** @type {?} */
        const currentButton = this.buttonsQueryList.find((/**
         * @param {?} item
         * @return {?}
         */
        item => item.value === value));
        this.value = currentButton && currentButton.isActive
            ? currentButton.value
            : '';
        this.onTouched();
        this.onChange(this.value);
        this.onChangeEmitter.emit(this.value);
    }
    /**
     * @param {?} value
     * @return {?}
     */
    setValueAllButtons(value) {
        this.buttonsQueryList.forEach((/**
         * @param {?} button
         * @return {?}
         */
        button => {
            if (button.value !== value) {
                button.isActive = false;
            }
            if (button.value === value && !this.canUncheck) {
                button.isActive = true;
            }
        }));
    }
    /**
     * @param {?} isDisabled
     * @return {?}
     */
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
        this.disableButtons(this.disabled);
    }
    /**
     * @param {?} value
     * @return {?}
     */
    writeValue(value) {
        this.value = value;
    }
    /**
     * @param {?} fn
     * @return {?}
     */
    registerOnChange(fn) {
        this.onChange = fn;
    }
    /**
     * @param {?} fn
     * @return {?}
     */
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    /**
     * @param {?} value
     * @return {?}
     */
    onChange(value) { }
    /**
     * @return {?}
     */
    onTouched() { }
}
ButtonToggleGroupComponent.defaultProps = {
    canUncheck: false,
    className: '',
    disabled: false,
    value: ''
};
ButtonToggleGroupComponent.decorators = [
    { type: Component, args: [{
                providers: [{
                        multi: true,
                        provide: NG_VALUE_ACCESSOR,
                        useExisting: forwardRef((/**
                         * @return {?}
                         */
                        () => ButtonToggleGroupComponent))
                    }],
                selector: `${config.components.prefix}-button-toggle-group }`,
                template: "<div \n  [ngClass]=\"[prefix + '-button-toggle-group', className]\"\n  [class.disabled]=\"disabled\"\n>\n  <ng-content select=\"materialize-button-toggle\"></ng-content>\n</div>\n  "
            }] }
];
/** @nocollapse */
ButtonToggleGroupComponent.ctorParameters = () => [];
ButtonToggleGroupComponent.propDecorators = {
    buttonsQueryList: [{ type: ContentChildren, args: [ButtonToggleComponent,] }],
    onChangeEmitter: [{ type: Output, args: ['onChange',] }],
    canUncheck: [{ type: Input }],
    className: [{ type: Input }],
    disabled: [{ type: Input }],
    value: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    ButtonToggleGroupComponent.defaultProps;
    /** @type {?} */
    ButtonToggleGroupComponent.prototype.buttonsQueryList;
    /** @type {?} */
    ButtonToggleGroupComponent.prototype.onChangeEmitter;
    /** @type {?} */
    ButtonToggleGroupComponent.prototype.canUncheck;
    /** @type {?} */
    ButtonToggleGroupComponent.prototype.className;
    /** @type {?} */
    ButtonToggleGroupComponent.prototype.disabled;
    /** @type {?} */
    ButtonToggleGroupComponent.prototype.value;
    /** @type {?} */
    ButtonToggleGroupComponent.prototype.prefix;
    /** @type {?} */
    ButtonToggleGroupComponent.prototype.isFocused;
}

/**
 * @fileoverview added by tsickle
 * Generated from: app/completed-components/button-toggle-group/button-toggle-group.module.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class MaterializeButtonToggleGroupModule {
}
MaterializeButtonToggleGroupModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    ButtonToggleComponent,
                    ButtonToggleGroupComponent
                ],
                exports: [
                    ButtonToggleComponent,
                    ButtonToggleGroupComponent
                ],
                imports: [
                    CommonModule,
                    MaterializeCommonModule
                ]
            },] }
];

/**
 * @fileoverview added by tsickle
 * Generated from: app/completed-components/button-toggle-group/button-toggle-group.model.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * @license
 * Copyright Workylab. All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://raw.githubusercontent.com/workylab/materialize-angular/master/LICENSE
 */
/**
 * @record
 */
function ButtonToggleGroupModel() { }
if (false) {
    /** @type {?} */
    ButtonToggleGroupModel.prototype.canUncheck;
    /** @type {?} */
    ButtonToggleGroupModel.prototype.className;
    /** @type {?} */
    ButtonToggleGroupModel.prototype.disabled;
    /** @type {?} */
    ButtonToggleGroupModel.prototype.value;
}

/**
 * @fileoverview added by tsickle
 * Generated from: app/completed-components/button-toggle-group/button-toggle/button-toggle.model.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * @license
 * Copyright Workylab. All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://raw.githubusercontent.com/workylab/materialize-angular/master/LICENSE
 */
/**
 * @record
 */
function ButtonToggleModel() { }
if (false) {
    /** @type {?} */
    ButtonToggleModel.prototype.className;
    /** @type {?} */
    ButtonToggleModel.prototype.disabled;
    /** @type {?} */
    ButtonToggleModel.prototype.name;
    /** @type {?} */
    ButtonToggleModel.prototype.value;
}

/**
 * @fileoverview added by tsickle
 * Generated from: app/fixtures/calendar-week-days.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * @license
 * Copyright Workylab. All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://raw.githubusercontent.com/workylab/materialize-angular/master/LICENSE
 */
/** @type {?} */
const days = {
    friday: {
        name: 'Friday',
        shortName: 'Fri',
        shortestName: 'Fr'
    },
    monday: {
        name: 'Monday',
        shortName: 'Mon',
        shortestName: 'Mo'
    },
    saturday: {
        name: 'Saturday',
        shortName: 'Sat',
        shortestName: 'Sa'
    },
    sunday: {
        name: 'Sunday',
        shortName: 'Sun',
        shortestName: 'Su'
    },
    thursday: {
        name: 'Thursday',
        shortName: 'Thu',
        shortestName: 'Th'
    },
    tuesday: {
        name: 'Tuesday',
        shortName: 'Tue',
        shortestName: 'Tu'
    },
    wednesday: {
        name: 'Wednesday',
        shortName: 'Wed',
        shortestName: 'We'
    }
};

/**
 * @fileoverview added by tsickle
 * Generated from: app/fixtures/calendar-months.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * @license
 * Copyright Workylab. All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://raw.githubusercontent.com/workylab/materialize-angular/master/LICENSE
 */
/** @type {?} */
const months = {
    april: {
        name: 'April',
        shortName: 'Apr',
        shortestName: 'Ap'
    },
    august: {
        name: 'August',
        shortName: 'Aug',
        shortestName: 'Au'
    },
    december: {
        name: 'December',
        shortName: 'Dec',
        shortestName: 'De'
    },
    february: {
        name: 'February',
        shortName: 'Feb',
        shortestName: 'Fe'
    },
    january: {
        name: 'January',
        shortName: 'Jan',
        shortestName: 'Ja'
    },
    july: {
        name: 'July',
        shortName: 'Jul',
        shortestName: 'Ju'
    },
    june: {
        name: 'June',
        shortName: 'Jun',
        shortestName: 'Ju'
    },
    march: {
        name: 'March',
        shortName: 'Mar',
        shortestName: 'Ma'
    },
    may: {
        name: 'May',
        shortName: 'May',
        shortestName: 'Ma'
    },
    november: {
        name: 'November',
        shortName: 'Nov',
        shortestName: 'No'
    },
    october: {
        name: 'October',
        shortName: 'Oct',
        shortestName: 'Oc'
    },
    september: {
        name: 'September',
        shortName: 'Sep',
        shortestName: 'Se'
    }
};

/**
 * @fileoverview added by tsickle
 * Generated from: app/completed-components/calendar/calendar.component.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class CalendarComponent {
    constructor() {
        this.className = CalendarComponent.defaultProps.className;
        this.date = CalendarComponent.defaultProps.date;
        this.displayOtherMonthDays = CalendarComponent.defaultProps.displayOtherMonthDays;
        this.prefix = config.components.prefix;
        this.selectYearAnimationDuration = 150;
        this.scrollToActiveYear = this.scrollToActiveYear.bind(this);
        this.onSelectDayEmitter = new EventEmitter();
        this.dayLabels = this.getDayLabels(days);
        this.monthLabels = this.getMonthLabels(months);
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this.init();
    }
    /**
     * @return {?}
     */
    ngOnChanges() {
        this.init();
    }
    /**
     * @return {?}
     */
    init() {
        /** @type {?} */
        const dateExists = (typeof this.date !== 'undefined' && this.date !== null);
        /** @type {?} */
        const openDate = dateExists ? this.date : new Date();
        /** @type {?} */
        const isToday = this.isTodayDate(openDate);
        /** @type {?} */
        const month = openDate.getMonth();
        /** @type {?} */
        const year = openDate.getFullYear();
        this.weeks = this.fillWeeks(month, year);
        this.years = this.fillYears(year);
        this.selectedDate = this.createDateModel(openDate, false, isToday, dateExists);
    }
    /**
     * @param {?} dayLabels
     * @return {?}
     */
    getDayLabels(dayLabels) {
        return [
            dayLabels.sunday,
            dayLabels.monday,
            dayLabels.tuesday,
            dayLabels.wednesday,
            dayLabels.thursday,
            dayLabels.friday,
            dayLabels.saturday
        ];
    }
    /**
     * @param {?} monthLabels
     * @return {?}
     */
    getMonthLabels(monthLabels) {
        return [
            monthLabels.january,
            monthLabels.february,
            monthLabels.march,
            monthLabels.april,
            monthLabels.may,
            monthLabels.june,
            monthLabels.july,
            monthLabels.august,
            monthLabels.september,
            monthLabels.october,
            monthLabels.november,
            monthLabels.december
        ];
    }
    /**
     * @param {?} date
     * @param {?} isOutOfMonth
     * @param {?} isToday
     * @param {?} showSelected
     * @return {?}
     */
    createDateModel(date, isOutOfMonth, isToday, showSelected) {
        /** @type {?} */
        const weekDay = date.getDay();
        /** @type {?} */
        const month = date.getMonth();
        /** @type {?} */
        const dateModel = {
            ISODate: this.generateISODate(date),
            date: date,
            dayLabel: this.dayLabels[weekDay],
            isOutOfMonth: isOutOfMonth,
            isToday: isToday,
            monthLabel: this.monthLabels[month],
            showSelected: showSelected
        };
        return dateModel;
    }
    /**
     * @param {?} day
     * @param {?} month
     * @param {?} year
     * @return {?}
     */
    createDateObject(day, month, year) {
        /** @type {?} */
        const date = new Date();
        date.setDate(day);
        date.setMonth(month);
        date.setFullYear(year);
        return date;
    }
    /**
     * @param {?} currentYear
     * @return {?}
     */
    fillYears(currentYear) {
        /** @type {?} */
        const firstYear = currentYear - 100;
        /** @type {?} */
        const lastYear = currentYear + 100;
        /** @type {?} */
        const years = [];
        for (let i = firstYear; i <= lastYear; i++) {
            years.push(i);
        }
        return years;
    }
    /**
     * @param {?} month
     * @param {?} year
     * @return {?}
     */
    fillWeeks(month, year) {
        this.selectedMonth = {
            label: this.monthLabels[month],
            number: month,
            year: year
        };
        /** @type {?} */
        const finalMonthDay = this.createDateObject(0, month, year);
        /** @type {?} */
        const weeks = [];
        /** @type {?} */
        let initMonthDate = new Date(year, month, 1);
        /** @type {?} */
        let day = 0 - initMonthDate.getDay();
        /** @type {?} */
        let daysInWeek = [];
        while (initMonthDate.getDay() !== 0 || finalMonthDay >= initMonthDate) {
            ++day;
            initMonthDate = new Date(year, month, day);
            daysInWeek.push(this.createDayDate(initMonthDate, day, finalMonthDay));
            if (daysInWeek.length === 7) {
                weeks.push(daysInWeek);
                daysInWeek = [];
            }
        }
        return weeks;
    }
    /**
     * @param {?} date
     * @return {?}
     */
    isTodayDate(date) {
        /** @type {?} */
        const ISOCurrentDate = this.generateISODate(new Date());
        /** @type {?} */
        const ISODate = this.generateISODate(date);
        /** @type {?} */
        const isToday = (ISODate === ISOCurrentDate);
        return isToday;
    }
    /**
     * @param {?} date
     * @param {?} dayNumber
     * @param {?} finalMonthDay
     * @return {?}
     */
    createDayDate(date, dayNumber, finalMonthDay) {
        /** @type {?} */
        const isToday = this.isTodayDate(date);
        /** @type {?} */
        const isOutOfMonth = (dayNumber <= 0 || date > finalMonthDay);
        return this.createDateModel(date, isOutOfMonth, isToday, true);
    }
    /**
     * @return {?}
     */
    showPrevMonth() {
        /** @type {?} */
        const month = this.selectedMonth.number;
        /** @type {?} */
        const year = this.selectedMonth.year;
        /** @type {?} */
        const prevMonth = month >= 1
            ? month - 1
            : 11;
        /** @type {?} */
        const prevYear = month < 1
            ? year - 1
            : year;
        this.weeks = this.fillWeeks(prevMonth, prevYear);
    }
    /**
     * @return {?}
     */
    showNextMonth() {
        /** @type {?} */
        const month = this.selectedMonth.number;
        /** @type {?} */
        const year = this.selectedMonth.year;
        /** @type {?} */
        const nextMonth = month < 11
            ? month + 1
            : 0;
        /** @type {?} */
        const nextYear = month >= 11
            ? year + 1
            : year;
        this.weeks = this.fillWeeks(nextMonth, nextYear);
    }
    /**
     * @param {?} date
     * @return {?}
     */
    generateISODate(date) {
        /** @type {?} */
        const day = date.getDate();
        /** @type {?} */
        const month = date.getMonth() + 1;
        /** @type {?} */
        const year = date.getFullYear();
        /** @type {?} */
        const dayString = day > 9
            ? day
            : `0${day}`;
        /** @type {?} */
        const monthString = month > 9
            ? month
            : `0${month}`;
        return `${year}-${monthString}-${dayString}`;
    }
    /**
     * @param {?} date
     * @return {?}
     */
    onSelectDay(date) {
        if (date.isOutOfMonth) {
            return;
        }
        this.selectedDate = date;
        this.onSelectDayEmitter.emit(this.selectedDate);
    }
    /**
     * @param {?} year
     * @return {?}
     */
    onSelectYear(year) {
        setTimeout((/**
         * @return {?}
         */
        () => {
            /** @type {?} */
            const day = this.selectedDate.date.getDate();
            /** @type {?} */
            const month = this.selectedDate.date.getMonth();
            this.date = this.createDateObject(day, month, year);
            this.showYears = false;
            this.selectedDate = this.createDateModel(this.date, false, true, true);
            this.weeks = this.fillWeeks(month, year);
        }), this.selectYearAnimationDuration);
    }
    /**
     * @return {?}
     */
    displayYears() {
        this.showYears = true;
        setTimeout(this.scrollToActiveYear, 0);
    }
    /**
     * @return {?}
     */
    scrollToActiveYear() {
        const { nativeElement } = this.yearsContainerRef;
        /** @type {?} */
        const activeYear = nativeElement.querySelector('.selected');
        if (activeYear) {
            /** @type {?} */
            const top = this.getScrollCenter(nativeElement, activeYear);
            nativeElement.scrollTop = top;
        }
    }
    /**
     * @param {?} containe