@uex/web-extensions
Version:
Uex extensions for Angular 6+ web projects
1,623 lines (1,609 loc) • 1.39 MB
JavaScript
import { Injectable, Optional, Input, HostListener, Directive, ElementRef, Component, NgModule, CUSTOM_ELEMENTS_SCHEMA, EventEmitter, ViewChild, Host, ViewContainerRef, Output, ReflectiveInjector, ComponentFactoryResolver, InjectionToken, ChangeDetectionStrategy, Inject, ViewEncapsulation, ChangeDetectorRef, NgZone, ContentChildren, TemplateRef, ContentChild, Pipe, SkipSelf } from '@angular/core';
import { forEach, merge, isString, isBoolean, trim, isNumber, concat, isEmpty, isFunction, snakeCase, isPlainObject, each, isArray, set, last, isDate, flatten, has, isUndefined, at, clone, findIndex, isEqual, replace, get, cloneDeep, includes, groupBy, map, orderBy } from 'lodash';
import { CommonModule, DOCUMENT } from '@angular/common';
import { HttpRequest, HttpEventType, HttpHeaders, HttpParams, HttpClientModule, HttpClient } from '@angular/common/http';
import { trigger, state, style, transition, animate } from '@angular/animations';
import { ResizeSensor } from 'css-element-queries';
import { timeout, filter } from 'rxjs/operators';
import { Validators, FormControl, FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
import * as _moment from 'moment';
import createNumberMask from 'text-mask-addons/dist/createNumberMask.js';
import { conformToMask } from 'text-mask-core/dist/textMaskCore';
import { ColorPickerModule } from 'ngx-color-picker';
import { NgPipesModule, OrderByPipe, FilterByPipe } from 'ngx-pipes';
import { TextMaskModule } from 'angular2-text-mask';
import { DomSanitizer } from '@angular/platform-browser';
import { coerceNumberProperty } from '@angular/cdk/coercion';
import { Platform } from '@angular/cdk/platform';
import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
import PopperJS from 'popper.js';
import Cropper from 'cropperjs';
import Quill from 'quill';
import { NavigationEnd, Router, PRIMARY_OUTLET, ActivatedRoute, RouterModule } from '@angular/router';
import { DeviceDetectorService, DeviceDetectorModule } from 'ngx-device-detector';
import { QrScannerComponent, QrScannerModule } from '@uex/ngx-qrscanner';
import { __awaiter } from 'tslib';
/**
* @fileoverview added by tsickle
* Generated from: lib/modules/button/button.enum.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @enum {number} */
const ButtonTheme = {
MATERIAL: 1,
BOOTSTRAP: 2,
};
ButtonTheme[ButtonTheme.MATERIAL] = 'MATERIAL';
ButtonTheme[ButtonTheme.BOOTSTRAP] = 'BOOTSTRAP';
/**
* @fileoverview added by tsickle
* Generated from: lib/modules/template/template.enum.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @enum {number} */
const TemplateTheme = {
DEFAULT: 1,
DARK: 2,
LIGHT: 3,
BLUE: 4,
};
TemplateTheme[TemplateTheme.DEFAULT] = 'DEFAULT';
TemplateTheme[TemplateTheme.DARK] = 'DARK';
TemplateTheme[TemplateTheme.LIGHT] = 'LIGHT';
TemplateTheme[TemplateTheme.BLUE] = 'BLUE';
/** @enum {number} */
const TemplateSize = {
RESPONSIVE: 1,
SMALL: 2,
MEDIUM: 3,
};
TemplateSize[TemplateSize.RESPONSIVE] = 'RESPONSIVE';
TemplateSize[TemplateSize.SMALL] = 'SMALL';
TemplateSize[TemplateSize.MEDIUM] = 'MEDIUM';
/**
* @fileoverview added by tsickle
* Generated from: lib/config.service.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class AppConfig {
}
if (false) {
/** @type {?} */
AppConfig.prototype.button;
/** @type {?} */
AppConfig.prototype.layout;
/** @type {?} */
AppConfig.prototype.template;
}
class ConfigService {
/**
* @param {?} config
*/
constructor(config) {
this.config = config;
this.DEFAULT_BUTTON_CONFIG = {
theme: ButtonTheme.MATERIAL
};
this.DEFAULT_LAYOUT_CONFIG = {
relative: false,
color: {
primary: "#F0F0F0"
}
};
this.DEFAULT_TEMPLATE_CONFIG = {
theme: TemplateTheme.DEFAULT,
header: true,
layout: {
header: true,
sidebar: true
},
background: {
color: "#CCCCCC"
}
};
this._setDefautValues();
}
/**
* @return {?}
*/
get button() {
return this.config && this.config.button ? this.config.button : {};
}
/**
* @return {?}
*/
get layout() {
return this.config && this.config.layout ? this.config.layout : {};
}
/**
* @return {?}
*/
get template() {
return this.config && this.config.template ? this.config.template : {};
}
/**
* @private
* @return {?}
*/
_setDefautValues() {
if (!this.button.theme) {
this.config.button = this.DEFAULT_BUTTON_CONFIG;
}
if (!this.layout.color) {
this.config.layout = this.DEFAULT_LAYOUT_CONFIG;
}
forEach(this.template, (/**
* @param {?} config
* @param {?} type
* @return {?}
*/
(config, type) => {
/** @type {?} */
const default_config = this.DEFAULT_TEMPLATE_CONFIG;
if (config &&
config.background &&
(config.background.image || config.background.color)) {
delete default_config.background.color;
}
this.config.template[type] = merge({}, default_config, config);
}));
}
}
ConfigService.decorators = [
{ type: Injectable }
];
/** @nocollapse */
ConfigService.ctorParameters = () => [
{ type: AppConfig, decorators: [{ type: Optional }] }
];
if (false) {
/**
* @type {?}
* @private
*/
ConfigService.prototype.DEFAULT_BUTTON_CONFIG;
/**
* @type {?}
* @private
*/
ConfigService.prototype.DEFAULT_LAYOUT_CONFIG;
/**
* @type {?}
* @private
*/
ConfigService.prototype.DEFAULT_TEMPLATE_CONFIG;
/**
* @type {?}
* @private
*/
ConfigService.prototype.config;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/modules/button/directives/ripple.directive.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Adiciona o efeito "ripple" ao clicar em um elemento
* @abstract
*/
class RippleDirectiveBase {
/**
* @param {?} elementRef
*/
constructor(elementRef) {
this.elementRef = elementRef;
/**
* @ignore
*/
this._no_ripple = false;
this._default_ripple_opacity = '0.15';
}
/**
* @private
* @param {?} no_ripple
* @return {?}
*/
set set_no_ripple(no_ripple) {
this.no_ripple = isString(no_ripple) && no_ripple == '' ? true : (isBoolean(no_ripple) ? ((/** @type {?} */ (no_ripple))) : true);
}
/**
* @param {?} value
* @return {?}
*/
set no_ripple(value) {
this._no_ripple = value;
}
/**
* @return {?}
*/
get no_ripple() {
return this._no_ripple;
}
/**
* @param {?} e
* @return {?}
*/
_onClick(e) {
if (this.no_ripple) {
return;
}
/** @type {?} */
const targetEl = this.elementRef ? this.elementRef.nativeElement : null;
if (!targetEl) {
return;
}
if (this._animate_timeout) {
clearTimeout(this._animate_timeout);
}
/** @type {?} */
let rippleEl = ((/** @type {?} */ (targetEl.querySelector('.ripple'))));
if (!!rippleEl) {
rippleEl.classList.remove('animate');
}
else {
rippleEl = document.createElement('span');
rippleEl.classList.add('ripple');
targetEl.appendChild(rippleEl);
}
/** @type {?} */
let offset_x = e.offsetX;
/** @type {?} */
let offset_y = e.offsetY;
if (e.target != targetEl) {
/** @type {?} */
const relative_offset = this._relativeOffset((/** @type {?} */ (e.target)), targetEl);
offset_x += relative_offset.left;
offset_y += relative_offset.top;
}
rippleEl.style.width = rippleEl.style.height = Math.max(targetEl.offsetWidth, targetEl.offsetHeight) + 'px';
rippleEl.style.left = (offset_x - rippleEl.offsetWidth / 2) + 'px';
rippleEl.style.top = (offset_y - rippleEl.offsetHeight / 2) + 'px';
// Apply element color and background color to wrapper
/** @type {?} */
const element_style = window.getComputedStyle(targetEl, null);
/** @type {?} */
const color = element_style.color;
/** @type {?} */
const background_contrast_color = this._contrast(this._contrast(color));
rippleEl.style.color = color;
rippleEl.style.background = background_contrast_color;
rippleEl.classList.add('animate');
this._animate_timeout = setTimeout((/**
* @return {?}
*/
() => rippleEl.classList.remove('animate')), 650);
}
/**
* @private
* @param {?} color
* @param {?=} bw
* @return {?}
*/
_contrast(color, bw = true) {
/** @type {?} */
let colorHex = this._toHexadecimal(color);
if (!/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(colorHex)) {
return '#FFFFFF';
}
if (colorHex.length === 4) {
colorHex = colorHex.replace(/^#(.)(.)(.)/i, '#$1$1$2$2$3$3');
}
/** @type {?} */
const r = parseInt(colorHex.substr(1, 2), 16);
/** @type {?} */
const g = parseInt(colorHex.substr(3, 2), 16);
/** @type {?} */
const b = parseInt(colorHex.substr(5, 2), 16);
if (bw) {
// https://github.com/lffg/yiq/blob/master/index.js
/** @type {?} */
const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
return this._toRGBA(yiq >= 128 ? '#000000' : '#FFFFFF');
}
return this._toRGBA(`#${this._padZero(r)}${this._padZero(g)}${this._padZero(b)}`);
}
/**
* @private
* @param {?} color
* @param {?=} allow_alpha
* @return {?}
*/
_toHexadecimal(color, allow_alpha = false) {
if (!color || (color && color.indexOf('(') == -1)) {
return color;
}
/** @type {?} */
const parts = color.replace(/(rgba|rgb)/g, '').replace(/[\(\)]/g, '').split(',').map((/**
* @param {?} part
* @return {?}
*/
(part) => trim(part)));
/** @type {?} */
const r = this._padZero(parseInt(parts[0], 10).toString(16));
/** @type {?} */
const g = this._padZero(parseInt(parts[1], 10).toString(16));
/** @type {?} */
const b = this._padZero(parseInt(parts[2], 10).toString(16));
if (parts[3] && allow_alpha) {
/** @type {?} */
const a = parseFloat(parseFloat(parts[3].substring(0, parts[3].length - 1)).toFixed(2));
return `#${r}${g}${b}${this._padZero((a * 255).toString(16).substring(0, 2))}`;
}
return `#${r}${g}${b}`;
}
/**
* @private
* @param {?} color
* @param {?=} opacity
* @return {?}
*/
_toRGBA(color, opacity = this._default_ripple_opacity) {
/** @type {?} */
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
return result ? `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${opacity})` : color;
}
/**
* @private
* @param {?} str
* @param {?=} len
* @return {?}
*/
_padZero(str, len = 2) {
if (isNumber(str)) {
str = str.toString();
}
/** @type {?} */
const zeros = new Array(len).join('0');
return (zeros + str).slice(-len);
}
/**
* @private
* @param {?} child_element
* @param {?} parent_element
* @return {?}
*/
_relativeOffset(child_element, parent_element) {
/** @type {?} */
const offset_parent_element = ((/** @type {?} */ (child_element.offsetParent)));
/** @type {?} */
const parent_rect = offset_parent_element.getBoundingClientRect();
/** @type {?} */
const child_rect = child_element.getBoundingClientRect();
/** @type {?} */
const offset = {
top: child_rect.top - parent_rect.top,
left: child_rect.left - parent_rect.left
}
// Reached top of document
;
// Reached top of document
if (offset_parent_element.tagName === 'BODY') {
return offset;
}
// Parent element contains the 'top' element we want the offset to be relative to
if (child_element.parentElement === parent_element) {
return offset;
}
// Reached the 'top' element we want the offset to be relative to
if (offset_parent_element === parent_element) {
return offset;
}
// Get parent's relative offset
/** @type {?} */
const parent_offset = this._relativeOffset(offset_parent_element, parent_element);
offset.top += parent_offset.top;
offset.left += parent_offset.left;
return offset;
}
}
RippleDirectiveBase.propDecorators = {
set_no_ripple: [{ type: Input, args: ['no-ripple',] }],
_onClick: [{ type: HostListener, args: ['mousedown', ['$event'],] }]
};
if (false) {
/**
* @ignore
* @type {?}
* @protected
*/
RippleDirectiveBase.prototype._no_ripple;
/**
* @type {?}
* @private
*/
RippleDirectiveBase.prototype._default_ripple_opacity;
/**
* @type {?}
* @private
*/
RippleDirectiveBase.prototype._animate_timeout;
/** @type {?} */
RippleDirectiveBase.prototype.elementRef;
}
class RippleDirective extends RippleDirectiveBase {
/**
* @param {?} elementRef
*/
constructor(elementRef) {
super(elementRef);
this.elementRef = elementRef;
}
}
RippleDirective.decorators = [
{ type: Directive, args: [{
selector: '[with-ripple], .with-ripple'
},] }
];
/** @nocollapse */
RippleDirective.ctorParameters = () => [
{ type: ElementRef }
];
if (false) {
/** @type {?} */
RippleDirective.prototype.elementRef;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/modules/button/button.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Define estilos de botões para elementos. Por razões de acessibilidade, os botões usam um elemento button padrão.
*
* É uma abstração para os [botões do Bootstrap 4]{\@link https://getbootstrap.com/docs/4.1/components/buttons}, com algumas melhorias e estilos personalizados.
*
* Demo: {\@link https://gituex.gitlab.io/extensions/web-extensions#components/button}
*/
class ButtonComponent extends RippleDirective {
/**
* @ignore
* @param {?} elementRef
*/
constructor(elementRef) {
super(elementRef);
this.elementRef = elementRef;
/**
* Define o atributo "title" de layout que será aplicado ao botão
*/
this.type = 'button';
this._color = 'primary';
this._mode = 'raised';
this._size = 'default';
this._rounded = false;
this._block = false;
this._icon_only = false;
this._icon_right = false;
this._icon_left = false;
this._classes = [];
this.is_button = false;
}
/**
* Define o modo de layout que será aplicado ao botão
* @private
* @param {?} mode
* @return {?}
*/
set _setMode(mode) {
this._mode = mode;
this._updateClasses();
}
/**
* Define a cor que será aplicada ao botão
* @private
* @param {?} color
* @return {?}
*/
set _setColor(color) {
this._color = color;
this._updateClasses();
}
/**
* Define o tamanho que será aplicado ao botão
* @private
* @param {?} size
* @return {?}
*/
set _setSize(size) {
this._size = size;
this._updateClasses();
}
/**
* Define se será aplicada borda arredondada ao botão
* @private
* @param {?} rounded
* @return {?}
*/
set _setRounded(rounded) {
this._rounded = this._getAttribute(rounded, true);
this._updateClasses();
}
/**
* Define se será aplicada largura "100%" arredondada ao botão
* @private
* @param {?} block
* @return {?}
*/
set _setBlock(block) {
this._block = this._getAttribute(block, true);
this._updateClasses();
}
/**
* Define se o botão deverá se ajustar para receber apenas um icone
* @private
* @param {?} icon_only
* @return {?}
*/
set _setIconOnly(icon_only) {
this._icon_only = this._getAttribute(icon_only, true);
this._updateClasses();
}
/**
* Define se o botão deverá se ajustar para receber um icone a direita
* @private
* @param {?} icon_right
* @return {?}
*/
set _setIconRight(icon_right) {
this._icon_right = this._getAttribute(icon_right, true);
this._updateClasses();
}
/**
* Define se o botão deverá se ajustar para receber um icone a esquerda
* @private
* @param {?} icon_left
* @return {?}
*/
set _setIconLeft(icon_left) {
this._icon_left = this._getAttribute(icon_left, true);
this._updateClasses();
}
/**
* @return {?}
*/
ngOnInit() {
this.is_button = this.elementRef.nativeElement.tagName == 'BUTTON';
this._updateClasses();
}
/**
* Distância do elemento para o topo do elemento pai mais próximo posicionado com relative
* @return {?}
*/
get offsetTop() {
return this.elementRef.nativeElement.offsetTop;
}
/**
* Dispara o gatilho de focus do botão
*
* @param {?=} has_delay
* @return {?}
*/
focus(has_delay = false) {
if (has_delay) {
setTimeout((/**
* @return {?}
*/
() => this._doFocus()), 300);
}
else {
this._doFocus();
}
}
/**
* \@internal
* @return {?}
*/
hasRipple() {
return !this.no_ripple && !this._isOutline();
}
/**
* \@internal
* @return {?}
*/
isDarkRipple() {
return this.hasRipple() && this._isClear();
}
// Modes
/**
* @private
* @return {?}
*/
_isFab() {
return this._mode == 'fab';
}
/**
* @private
* @return {?}
*/
_isFabFlat() {
return this._mode == 'fab-flat';
}
/**
* @private
* @return {?}
*/
_isClear() {
return this._mode == 'clear';
}
/**
* @private
* @return {?}
*/
_isIcon() {
return this._mode == 'icon';
}
/**
* @private
* @return {?}
*/
_isOutline() {
return this._mode == 'outline';
}
/**
* @private
* @return {?}
*/
_isRaised() {
return this._mode == 'raised';
}
// Sizes
/**
* @private
* @return {?}
*/
_isXSmall() {
return this._size == 'micro' || this._size == 'xsmall' || this._size == 'xs';
}
/**
* @private
* @return {?}
*/
_isSmall() {
return this._size == 'mini' || this._size == 'small' || this._size == 'sm';
}
/**
* @private
* @return {?}
*/
_isLarge() {
return this._size == 'large' || this._size == 'lg';
}
/**
* @private
* @return {?}
*/
_isXLarge() {
return this._size == 'xlarge' || this._size == 'xl';
}
// Miscellaneous
/**
* @private
* @return {?}
*/
_isRounded() {
return this._rounded && !this._isIcon() && !this._isFab() && !this._isFabFlat();
}
/**
* @private
* @return {?}
*/
_isBlock() {
return this._block && !this._isIcon() && !this._isFab() && !this._isFabFlat();
}
/**
* @private
* @return {?}
*/
_isIconOnly() {
return this._icon_only && !this._isIcon() && !this._isFab() && !this._isFabFlat();
}
/**
* @private
* @return {?}
*/
_isIconRight() {
return this._icon_right && !this._isIcon() && !this._isFab() && !this._isFabFlat();
}
/**
* @private
* @return {?}
*/
_isIconLeft() {
return this._icon_left && !this._isIcon() && !this._isFab() && !this._isFabFlat();
}
// Colors
/**
* @private
* @return {?}
*/
_updateClasses() {
this._clearClasses();
this._classes.push('btn');
if (this._isFab()) {
this._classes.push('btn-fab');
}
if (this._isFabFlat()) {
this._classes.push('btn-fab-flat');
}
if (this._isClear()) {
this._classes.push('btn-clear');
}
if (this._isIcon()) {
this._classes.push('btn-icon');
}
if (this._isOutline()) {
this._classes.push('btn-outline');
}
if (this._isRaised()) {
this._classes.push('btn-raised');
}
if (this._isRounded()) {
this._classes.push('btn-rounded');
}
if (this._isBlock()) {
this._classes.push('btn-block');
}
if (this._isIconOnly()) {
this._classes.push('btn-icon-only');
}
if (this._isIconRight()) {
this._classes.push('btn-icon-right');
}
if (this._isIconLeft()) {
this._classes.push('btn-icon-left');
}
if (this._isXSmall()) {
this._classes.push('btn-xs');
}
if (this._isSmall()) {
this._classes.push('btn-sm');
}
if (this._isLarge()) {
this._classes.push('btn-lg');
}
if (this._isXLarge()) {
this._classes.push('btn-xl');
}
if (this._color == 'link') {
this._classes.push(`btn-${this._color}`);
}
else {
this._classes.push(`btn-${this._isOutline() ? 'outline-' : ''}${this._color || 'default'}`);
}
this._setClasses();
}
/**
* @private
* @return {?}
*/
_clearClasses() {
if (this._classes) {
/** @type {?} */
const current_classes = this.elementRef.nativeElement.className.split(' ');
this._classes.forEach((/**
* @param {?} _class
* @return {?}
*/
(_class) => {
/** @type {?} */
const index = current_classes.indexOf(_class);
if (index > -1) {
current_classes.splice(index, 1);
}
}));
this._classes = [];
this.elementRef.nativeElement.className = current_classes.join(' ');
}
}
/**
* @private
* @return {?}
*/
_setClasses() {
/** @type {?} */
const current_classes = this.elementRef.nativeElement.className.split(' ').filter((/**
* @param {?} i
* @return {?}
*/
(i) => !!i));
this.elementRef.nativeElement.className = concat(current_classes, this._classes).join(' ');
}
/**
* @private
* @return {?}
*/
_doFocus() {
this.elementRef.nativeElement.focus();
}
/**
* @private
* @template T
* @param {?} value
* @param {?=} boolean
* @return {?}
*/
_getAttribute(value, boolean = false) {
if (boolean) {
return (isString(value) && value !== 'false') || (isBoolean(value) && !!value);
}
return !!value ? value : null;
}
}
ButtonComponent.decorators = [
{ type: Component, args: [{
selector: '[uex-button]',
template: "<ng-content></ng-content>\r\n",
host: {
'class': 'uex-button',
'[attr.type]': 'is_button ? type : null',
'[class.with-ripple]': 'hasRipple()',
'[class.ripple-dark]': 'isDarkRipple()'
}
}] }
];
/** @nocollapse */
ButtonComponent.ctorParameters = () => [
{ type: ElementRef }
];
ButtonComponent.propDecorators = {
type: [{ type: Input, args: ['type',] }],
_setMode: [{ type: Input, args: ['mode',] }],
_setColor: [{ type: Input, args: ['color',] }],
_setSize: [{ type: Input, args: ['size',] }],
_setRounded: [{ type: Input, args: ['rounded',] }],
_setBlock: [{ type: Input, args: ['block',] }],
_setIconOnly: [{ type: Input, args: ['icon-only',] }],
_setIconRight: [{ type: Input, args: ['icon-right',] }],
_setIconLeft: [{ type: Input, args: ['icon-left',] }]
};
if (false) {
/**
* Define o atributo "title" de layout que será aplicado ao botão
* @type {?}
*/
ButtonComponent.prototype.type;
/**
* @type {?}
* @private
*/
ButtonComponent.prototype._color;
/**
* @type {?}
* @private
*/
ButtonComponent.prototype._mode;
/**
* @type {?}
* @private
*/
ButtonComponent.prototype._size;
/**
* @type {?}
* @private
*/
ButtonComponent.prototype._rounded;
/**
* @type {?}
* @private
*/
ButtonComponent.prototype._block;
/**
* @type {?}
* @private
*/
ButtonComponent.prototype._icon_only;
/**
* @type {?}
* @private
*/
ButtonComponent.prototype._icon_right;
/**
* @type {?}
* @private
*/
ButtonComponent.prototype._icon_left;
/**
* @type {?}
* @private
*/
ButtonComponent.prototype._classes;
/** @type {?} */
ButtonComponent.prototype.is_button;
/** @type {?} */
ButtonComponent.prototype.elementRef;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/modules/button/button.interface.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function ButtonConfig() { }
if (false) {
/** @type {?|undefined} */
ButtonConfig.prototype.theme;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/modules/button/index.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class ButtonModule {
}
ButtonModule.decorators = [
{ type: NgModule, args: [{
declarations: [
ButtonComponent,
RippleDirective
],
imports: [
CommonModule
],
exports: [
ButtonComponent,
RippleDirective
],
schemas: [],
providers: [
ConfigService
]
},] }
];
/**
* @fileoverview added by tsickle
* Generated from: lib/modules/icon/icon.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class IconComponent {
/**
* @param {?} elementRef
*/
constructor(elementRef) {
this.elementRef = elementRef;
this.mode = 'md';
this._classes = [];
}
/**
* @return {?}
*/
ngOnInit() {
this._updateClasses();
}
/**
* @return {?}
*/
ngOnChanges() {
this._updateClasses();
}
/**
* @return {?}
*/
get offsetTop() {
return this.elementRef.nativeElement.offsetTop;
}
/**
* @return {?}
*/
getValue() {
switch (this.mode) {
case 'fa':
case 'fas':
case 'far':
case 'fab':
case 'uex':
return null;
default:
return this.name;
}
}
/**
* @private
* @return {?}
*/
_updateClasses() {
this._clearClasses();
switch (this.mode) {
case 'fa':
case 'fas':
case 'far':
case 'fab':
this._classes.push(this.mode);
this._classes.push('fa-fw');
this._classes.push(`fa-${this.name}`);
break;
case 'uex':
this._classes.push(`uex-custom-icons`);
this._classes.push(`uex-custom-icon-${this.name}`);
break;
default:
this._classes.push('material-icons');
}
/** @type {?} */
const size_class = this._getSizeClass();
if (size_class) {
this._classes.push(size_class);
}
/** @type {?} */
const color_class = this._getColorClass();
if (color_class) {
this._classes.push(color_class);
}
this._setClasses();
}
/**
* @private
* @return {?}
*/
_clearClasses() {
if (this._classes) {
/** @type {?} */
const current_classes = this.elementRef.nativeElement.className.split(' ');
this._classes.forEach((/**
* @param {?} _class
* @return {?}
*/
(_class) => {
/** @type {?} */
const index = current_classes.indexOf(_class);
if (index > -1) {
current_classes.splice(index, 1);
}
}));
this._classes = [];
this.elementRef.nativeElement.className = current_classes.join(' ');
}
}
/**
* @private
* @return {?}
*/
_setClasses() {
/** @type {?} */
const current_classes = this.elementRef.nativeElement.className.split(' ').filter((/**
* @param {?} i
* @return {?}
*/
(i) => !!i));
this.elementRef.nativeElement.className = concat(current_classes, this._classes).join(' ');
}
/**
* @private
* @return {?}
*/
_getSizeClass() {
switch (this.size) {
case '2x':
case 'large':
case 'lg':
return 'size-2x';
case '3x':
case 'xlarge':
case 'xl':
return 'size-3x';
case '4x':
case 'xxlarge':
case 'xxl':
return 'size-4x';
case '5x':
case 'xxxlarge':
case 'xxxl':
return 'size-5x';
default: return null;
}
}
/**
* @private
* @return {?}
*/
_getColorClass() {
if (!this.color) {
return;
}
return `text-${this.color}`;
}
}
IconComponent.decorators = [
{ type: Component, args: [{
selector: 'uex-icon',
template: '{{getValue()}}',
host: {
class: 'uex-icon'
}
}] }
];
/** @nocollapse */
IconComponent.ctorParameters = () => [
{ type: ElementRef }
];
IconComponent.propDecorators = {
mode: [{ type: Input }],
color: [{ type: Input }],
size: [{ type: Input }],
name: [{ type: Input }]
};
if (false) {
/** @type {?} */
IconComponent.prototype.mode;
/** @type {?} */
IconComponent.prototype.color;
/** @type {?} */
IconComponent.prototype.size;
/** @type {?} */
IconComponent.prototype.name;
/**
* @type {?}
* @private
*/
IconComponent.prototype._classes;
/**
* @type {?}
* @private
*/
IconComponent.prototype.elementRef;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/modules/icon/index.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class IconModule {
}
IconModule.decorators = [
{ type: NgModule, args: [{
declarations: [
IconComponent
],
imports: [
CommonModule
],
exports: [
IconComponent
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
},] }
];
/**
* @fileoverview added by tsickle
* Generated from: lib/modules/camera/camera.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Exibe a camera do navegador, verifica o suporte e permissão para utilização da camera e tira fotos.
*
* Demo: {\@link https://gituex.gitlab.io/extensions/web-extensions#components/camera}
*/
class CameraComponent {
/**
* @ignore
* @param {?} elementRef
*/
constructor(elementRef) {
this.elementRef = elementRef;
/**
* Status atual da camera
*/
this.status = {
support: true,
permission: true,
error: false
};
/**
* Evento emitido quando as camera for carregada, com sucesso ou falha
*/
this.onReady = new EventEmitter();
this._navigator = navigator;
}
/**
* @return {?}
*/
ngOnInit() {
this._getStream((/**
* @param {?} stream
* @param {?} err
* @return {?}
*/
(stream, err) => {
if (stream) {
if (this._destroyed) {
this._stop(stream);
}
else {
this._play(stream);
}
}
else if (err) {
console.warn(err);
this._onError(err);
}
else {
this.status.support = false;
this._onError();
}
}));
}
/**
* @return {?}
*/
ngOnDestroy() {
this._destroyed = true;
this._stop();
}
/**
* Retorna a distância do elemento para o topo do elemento pai mais próximo posicionado com relative
* @return {?}
*/
get offsetTop() {
return this.elementRef.nativeElement.offsetTop;
}
/**
* Tira a foto e returna um base64 da imagem
* @return {?}
*/
takePicture() {
if (!this._cameraWrapper && !this.status.error) {
return null;
}
/** @type {?} */
const canvas = this._getCanvas(this._cameraWrapper.nativeElement);
this.picture = canvas.toDataURL("image/jpeg");
return this.picture;
}
/**
* @private
* @param {?} wrapper
* @return {?}
*/
_getCanvas(wrapper) {
/** @type {?} */
const canvas = document.createElement("canvas");
canvas.width = this._cameraWrapper.nativeElement.videoWidth;
canvas.height = this._cameraWrapper.nativeElement.videoHeight;
canvas.getContext("2d").drawImage(wrapper, 0, 0);
return canvas;
}
/**
* @private
* @param {?} stream
* @return {?}
*/
_play(stream) {
if (this._cameraWrapper) {
this._stream = stream;
// this._cameraWrapper.nativeElement.src = window.URL.createObjectURL(stream);
this._cameraWrapper.nativeElement.srcObject = stream;
this._cameraWrapper.nativeElement.play();
this._onSuccess();
}
}
/**
* @private
* @param {?=} stream
* @return {?}
*/
_stop(stream = this._stream) {
if (stream) {
/** @type {?} */
const tracks = stream.getTracks();
if (tracks) {
tracks.forEach((/**
* @param {?} track
* @return {?}
*/
track => track.stop()));
}
}
if (this._cameraWrapper) {
this._cameraWrapper.nativeElement.pause();
}
}
/**
* @private
* @return {?}
*/
_onSuccess() {
this.onReady.emit(this.status);
}
/**
* @private
* @param {?=} err
* @return {?}
*/
_onError(err) {
if (err &&
(err.name == "PermissionDeniedError" || err.name == "NotAllowedError")) {
this.status.permission = false;
}
this.status.error = true;
this.onReady.emit(this.status);
}
/**
* @private
* @param {?} callback
* @return {?}
*/
_getStream(callback) {
// Primary
if (this._navigator.mediaDevices &&
this._navigator.mediaDevices.getUserMedia) {
// Not adding `{ audio: true }` since we only want video now
this._navigator.mediaDevices
.getUserMedia({ video: true })
.then((/**
* @param {?} stream
* @return {?}
*/
(stream) => callback(stream, null)))
.catch((/**
* @param {?} err
* @return {?}
*/
(err) => callback(null, err)));
// Standard
}
else if (this._navigator.getUserMedia) {
this._navigator.getUserMedia({ video: true }, (/**
* @param {?} stream
* @return {?}
*/
(stream) => callback(stream, null)), (/**
* @param {?} err
* @return {?}
*/
(err) => callback(null, err)));
// WebKit-prefixed
}
else if (this._navigator.webkitGetUserMedia) {
this._navigator.webkitGetUserMedia({ video: true }, (/**
* @param {?} stream
* @return {?}
*/
(stream) => callback(stream, null)), (/**
* @param {?} err
* @return {?}
*/
(err) => callback(null, err)));
// Mozilla-prefixed
}
else if (this._navigator.mozGetUserMedia) {
this._navigator.mozGetUserMedia({ video: true }, (/**
* @param {?} stream
* @return {?}
*/
(stream) => callback(stream, null)), (/**
* @param {?} err
* @return {?}
*/
(err) => callback(null, err)));
// Missing Support
}
else {
callback(null, null);
}
}
}
CameraComponent.decorators = [
{ type: Component, args: [{
selector: "uex-camera",
template: "<video #cameraWrapper class=\"uex-camera-wrapper\" [hidden]=\"status.error\"></video>\r\n\r\n<div class=\"d-flex align-items-center justify-content-center p-5\" *ngIf=\"status.error\">\r\n <div class=\"media align-items-center w-50 text-muted\">\r\n <div class=\"media-left p-0\">\r\n <uex-icon name=\"error\" size=\"xlarge\" class=\"align-middle\"></uex-icon>\r\n </div>\r\n <div class=\"media-body\">\r\n <h5 class=\"m-0\">\r\n <ng-container *ngIf=\"!status.support\">Camera n\u00E3o suportada</ng-container>\r\n <ng-container *ngIf=\"!status.permission\">Uso da camera n\u00E3o autorizado</ng-container>\r\n </h5>\r\n </div>\r\n </div>\r\n</div>\r\n",
host: {
class: "uex-camera"
}
}] }
];
/** @nocollapse */
CameraComponent.ctorParameters = () => [
{ type: ElementRef }
];
CameraComponent.propDecorators = {
_cameraWrapper: [{ type: ViewChild, args: ["cameraWrapper", { static: true },] }]
};
if (false) {
/**
* @type {?}
* @private
*/
CameraComponent.prototype._cameraWrapper;
/**
* Status atual da camera
* @type {?}
*/
CameraComponent.prototype.status;
/**
* Última foto registrada com a camera
* @type {?}
*/
CameraComponent.prototype.picture;
/**
* Evento emitido quando as camera for carregada, com sucesso ou falha
* @type {?}
*/
CameraComponent.prototype.onReady;
/**
* @type {?}
* @private
*/
CameraComponent.prototype._stream;
/**
* @type {?}
* @private
*/
CameraComponent.prototype._navigator;
/**
* @type {?}
* @private
*/
CameraComponent.prototype._destroyed;
/** @type {?} */
CameraComponent.prototype.elementRef;
}
/**
* @record
*/
function CameraStatus() { }
if (false) {
/** @type {?} */
CameraStatus.prototype.support;
/** @type {?} */
CameraStatus.prototype.permission;
/** @type {?} */
CameraStatus.prototype.error;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/modules/camera/index.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class CameraModule {
}
CameraModule.decorators = [
{ type: NgModule, args: [{
declarations: [
CameraComponent
],
imports: [
CommonModule,
IconModule
],
exports: [
CameraComponent
]
},] }
];
/**
* @fileoverview added by tsickle
* Generated from: lib/modules/media/media.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class MediaComponent {
/**
* @param {?} elementRef
*/
constructor(elementRef) {
this.elementRef = elementRef;
this.alignSelf = null;
this.alignItems = 'start';
this.alignContent = null;
this.justifyItems = null;
}
}
MediaComponent.decorators = [
{ type: Component, args: [{
selector: 'uex-media, [uex-media]',
template: "<ng-content></ng-content>\r\n",
host: {
class: 'uex-media media',
'[class.align-self-start]': 'alignSelf == \'start\'',
'[class.align-self-center]': 'alignSelf == \'center\'',
'[class.align-self-end]': 'alignSelf == \'end\'',
'[class.align-self-baseline]': 'alignSelf == \'baseline\'',
'[class.align-self-stretch]': 'alignSelf == \'stretch\'',
'[class.align-items-start]': 'alignItems == \'start\'',
'[class.align-items-center]': 'alignItems == \'center\'',
'[class.align-items-end]': 'alignItems == \'end\'',
'[class.align-items-baseline]': 'alignItems == \'baseline\'',
'[class.align-items-stretch]': 'alignItems == \'stretch\'',
'[class.align-content-start]': 'alignContent == \'start\'',
'[class.align-content-center]': 'alignContent == \'center\'',
'[class.align-content-end]': 'alignContent == \'end\'',
'[class.align-content-between]': 'alignContent == \'between\'',
'[class.align-content-around]': 'alignContent == \'around\'',
'[class.align-content-stretch]': 'alignContent == \'stretch\'',
'[class.justify-content-start]': 'justifyItems == \'start\'',
'[class.justify-content-center]': 'justifyItems == \'center\'',
'[class.justify-content-end]': 'justifyItems == \'end\'',
'[class.justify-content-between]': 'justifyItems == \'between\'',
'[class.justify-content-around]': 'justifyItems == \'around\'',
'[class.justify-content-stretch]': 'justifyItems == \'stretch\''
}
}] }
];
/** @nocollapse */
MediaComponent.ctorParameters = () => [
{ type: ElementRef }
];
MediaComponent.propDecorators = {
alignSelf: [{ type: Input, args: ['alignSelf',] }],
alignItems: [{ type: Input, args: ['alignItems',] }],
alignContent: [{ type: Input, args: ['alignContent',] }],
justifyItems: [{ type: Input, args: ['justifyItems',] }]
};
if (false) {
/** @type {?} */
MediaComponent.prototype.alignSelf;
/** @type {?} */
MediaComponent.prototype.alignItems;
/** @type {?} */
MediaComponent.prototype.alignContent;
/** @type {?} */
MediaComponent.prototype.justifyItems;
/** @type {?} */
MediaComponent.prototype.elementRef;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/modules/media/components/body.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class MediaBodyComponent {
constructor() {
this.alignSelf = null;
this.alignItems = 'start';
this.alignContent = null;
this.justifyItems = null;
}
}
MediaBodyComponent.decorators = [
{ type: Component, args: [{
selector: 'uex-media-body',
template: "<ng-content></ng-content>\r\n",
host: {
class: 'uex-media-body media-body',
'[class.align-self-start]': 'alignSelf == \'start\'',
'[class.align-self-center]': 'alignSelf == \'center\'',
'[class.align-self-end]': 'alignSelf == \'end\'',
'[class.align-self-baseline]': 'alignSelf == \'baseline\'',
'[class.align-self-stretch]': 'alignSelf == \'stretch\'',
'[class.align-items-start]': 'alignItems == \'start\'',
'[class.align-items-center]': 'alignItems == \'center\'',
'[class.align-items-end]': 'alignItems == \'end\'',
'[class.align-items-baseline]': 'alignItems == \'baseline\'',
'[class.align-items-stretch]': 'alignItems == \'stretch\'',
'[class.align-content-start]': 'alignContent == \'start\'',
'[class.align-content-center]': 'alignContent == \'center\'',
'[class.align-content-end]': 'alignContent == \'end\'',
'[class.align-content-between]': 'alignContent == \'between\'',
'[class.align-content-around]': 'alignContent == \'around\'',
'[class.align-content-stretch]': 'alignContent == \'stretch\'',
'[class.justify-content-start]': 'justifyItems == \'start\'',
'[class.justify-content-center]': 'justifyItems == \'center\'',
'[class.justify-content-end]': 'justifyItems == \'end\'',
'[class.justify-content-between]': 'justifyItems == \'between\'',
'[class.justify-content-around]': 'justifyItems == \'around\'',
'[class.justify-content-stretch]': 'justifyItems == \'stretch\''
}
}] }
];
/** @nocollapse */
MediaBodyComponent.ctorParameters = () => [];
MediaBodyComponent.propDecorators = {
alignSelf: [{ type: Input, args: ['alignSelf',] }],
alignItems: [{ type: Input, args: ['alignItems',] }],
alignContent: [{ type: Input, args: ['alignContent',] }],
justifyItems: [{ type: Input, args: ['justifyItems',] }]
};
if (false) {
/** @type {?} */
MediaBodyComponent.prototype.alignSelf;
/** @type {?} */
MediaBodyComponent.prototype.alignItems;
/** @type {?} */
MediaBodyComponent.prototype.alignContent;
/** @type {?} */
MediaBodyComponent.prototype.justifyItems;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/modules/media/components/left.component.ts
*