@kushki/ng-suka
Version:
<p align="center"> <h1 align="center">Suka Components Angular</h1> <p align="center"> An Angular implementation of the Suka Design System </p> </p>
18,974 lines • 976 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@angular/platform-browser'), require('rxjs'), require('rxjs/operators'), require('@angular/animations'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/cdk/table'), require('@angular/cdk/coercion'), require('@angular/router'), require('@angular/cdk/layout'), require('flatpickr'), require('flatpickr/dist/l10n/es.js'), require('prismjs'), require('prismjs/components/prism-markup-templating.js'), require('prismjs/components/prism-typescript'), require('prismjs/components/prism-php'), require('prismjs/components/prism-ruby'), require('prismjs/components/prism-json'), require('prismjs/components/prism-java'), require('prismjs/components/prism-markdown'), require('prismjs/components/prism-scss'), require('prismjs/components/prism-swift')) :
typeof define === 'function' && define.amd ? define('@kushki/ng-suka', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@angular/platform-browser', 'rxjs', 'rxjs/operators', '@angular/animations', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/cdk/table', '@angular/cdk/coercion', '@angular/router', '@angular/cdk/layout', 'flatpickr', 'flatpickr/dist/l10n/es.js', 'prismjs', 'prismjs/components/prism-markup-templating.js', 'prismjs/components/prism-typescript', 'prismjs/components/prism-php', 'prismjs/components/prism-ruby', 'prismjs/components/prism-json', 'prismjs/components/prism-java', 'prismjs/components/prism-markdown', 'prismjs/components/prism-scss', 'prismjs/components/prism-swift'], factory) :
(global = global || self, factory((global.kushki = global.kushki || {}, global.kushki['ng-suka'] = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.platformBrowser, global.rxjs, global.rxjs.operators, global.ng.animations, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.cdk.table, global.ng.cdk.coercion, global.ng.router, global.ng.cdk.layout, global.flatpickr, global.es_js, global.prismjs));
}(this, (function (exports, core, common, forms, platformBrowser, rxjs, operators, animations, overlay, portal, table, coercion, router, layout, flatpickr, es_js, prismjs) { 'use strict';
flatpickr = flatpickr && flatpickr.hasOwnProperty('default') ? flatpickr['default'] : flatpickr;
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function(d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
function __param(paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); }
}
function __metadata(metadataKey, metadataValue) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
}
function __awaiter(thisArg, _arguments, P, generator) {
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
}
function __exportStar(m, exports) {
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
function __values(o) {
var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
if (m) return m.call(o);
return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
}
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
function __await(v) {
return this instanceof __await ? (this.v = v, this) : new __await(v);
}
function __asyncGenerator(thisArg, _arguments, generator) {
if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
var g = generator.apply(thisArg, _arguments || []), i, q = [];
return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }
function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
function fulfill(value) { resume("next", value); }
function reject(value) { resume("throw", value); }
function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }
}
function __asyncDelegator(o) {
var i, p;
return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
}
function __asyncValues(o) {
if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
var m = o[Symbol.asyncIterator], i;
return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
}
function __makeTemplateObject(cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
function __importStar(mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result.default = mod;
return result;
}
function __importDefault(mod) {
return (mod && mod.__esModule) ? mod : { default: mod };
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var Loading = /** @class */ (function () {
function Loading(elementRef) {
this.elementRef = elementRef;
this.title = 'Loading';
/**
* set to `false` to stop the loading animation
*/
this.isActive = true;
/**
* Specify the size of the button
*/
this.size = 'normal';
/**
* Set to `true` to make loader with an overlay.
*/
this.overlay = false;
}
Loading.decorators = [
{ type: core.Component, args: [{
selector: 'suka-loading',
template: "\n <div\n [ngClass]=\"{\n 'loading--small': size === 'sm',\n 'loading--stop': !isActive && !overlay,\n 'loading-overlay--stop': !isActive && overlay\n }\"\n class=\"loading\">\n <svg class=\"loading__svg\" viewBox=\"-75 -75 150 150\">\n <title>{{title}}</title>\n <circle class=\"loading__stroke\" cx=\"0\" cy=\"0\" r=\"37.5\" />\n </svg>\n </div>\n "
}] }
];
/** @nocollapse */
Loading.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
Loading.propDecorators = {
title: [{ type: core.Input }],
isActive: [{ type: core.Input }],
size: [{ type: core.Input }],
overlay: [{ type: core.Input }, { type: core.HostBinding, args: ['class.loading-overlay',] }]
};
return Loading;
}());
if (false) {
/** @type {?} */
Loading.prototype.title;
/**
* set to `false` to stop the loading animation
* @type {?}
*/
Loading.prototype.isActive;
/**
* Specify the size of the button
* @type {?}
*/
Loading.prototype.size;
/**
* Set to `true` to make loader with an overlay.
* @type {?}
*/
Loading.prototype.overlay;
/** @type {?} */
Loading.prototype.elementRef;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var LoadingModule = /** @class */ (function () {
function LoadingModule() {
}
LoadingModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
Loading
],
exports: [
Loading
],
imports: [
common.CommonModule
]
},] }
];
return LoadingModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Buttons are used primarily for actions, such as “Add”, “Close”, “Cancel”, or “Save”.
* Plain buttons, which look similar to links, are used for less important or less commonly used actions, such as “view shipping settings”.
*
* For navigational actions that appear within or directly following a sentence, use the link component.
*/
var Button = /** @class */ (function () {
function Button(ref, el, renderer, viewContainerRef, componentFactoryResolver) {
this.ref = ref;
this.el = el;
this.renderer = renderer;
this.viewContainerRef = viewContainerRef;
this.componentFactoryResolver = componentFactoryResolver;
/**
* Sets the button type. Can be `primary`, `basic`, `plain`, `destructive` or `outline_white`.
*/
this.sukaButton = 'basic';
/**
* Button size. Can be `md` (Medium), `sm` (Small) or `lg` (Large).
*/
this.size = 'md';
/**
* Set to `true` for a skeleton state button.
*/
this.skeleton = false;
/**
* Set to `true` to display the outline version of the button.
*/
this.outline = false;
/**
* Set to `true` for a hover effect.
*/
this.hover = false;
/**
* Set to `true` for a button that uses the full horizontal width;
*/
this.fullWidth = false;
/**
* Sets to `true` when the button is on a button group.
*/
this.inGroup = false;
/**
* Set to `true` for a loading button.
*/
this.loading = false;
}
Object.defineProperty(Button.prototype, "basic", {
get: /**
* @return {?}
*/
function () {
return this.getType('basic');
},
enumerable: true,
configurable: true
});
Object.defineProperty(Button.prototype, "primary", {
get: /**
* @return {?}
*/
function () {
return this.getType('primary');
},
enumerable: true,
configurable: true
});
Object.defineProperty(Button.prototype, "plain", {
get: /**
* @return {?}
*/
function () {
return this.getType('plain');
},
enumerable: true,
configurable: true
});
Object.defineProperty(Button.prototype, "destructive", {
get: /**
* @return {?}
*/
function () {
return this.getType('destructive');
},
enumerable: true,
configurable: true
});
Object.defineProperty(Button.prototype, "outline_white", {
get: /**
* @return {?}
*/
function () {
return this.getType('outline_white');
},
enumerable: true,
configurable: true
});
Object.defineProperty(Button.prototype, "buttonSmall", {
get: /**
* @return {?}
*/
function () {
return this.size === 'sm';
},
enumerable: true,
configurable: true
});
Object.defineProperty(Button.prototype, "buttonLarge", {
get: /**
* @return {?}
*/
function () {
return this.size === 'lg';
},
enumerable: true,
configurable: true
});
/**
* @private
* @param {?} type
* @return {?}
*/
Button.prototype.getType = /**
* @private
* @param {?} type
* @return {?}
*/
function (type) {
return this.sukaButton === type;
};
/**
* @return {?}
*/
Button.prototype.ngOnInit = /**
* @return {?}
*/
function () {
if (!this.sukaButton) {
this.sukaButton = 'basic';
}
// Create the spinner
/** @type {?} */
var factory = this.componentFactoryResolver.resolveComponentFactory(Loading);
/** @type {?} */
var componentRef = this.viewContainerRef.createComponent(factory);
this.loadingSpinner = componentRef.instance;
this.loadingSpinner.size = 'sm';
this.renderer.setStyle(this.loadingSpinner.elementRef.nativeElement, 'display', 'none');
this.renderer.appendChild(this.el.nativeElement, this.loadingSpinner.elementRef.nativeElement);
if (this.loading) {
this.renderer.setStyle(this.loadingSpinner.elementRef.nativeElement, 'display', 'inherit');
this.el.nativeElement.disabled = true;
}
};
/**
* @param {?} changes
* @return {?}
*/
Button.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
if (changes.loading && this.loadingSpinner) {
if (this.loading) {
this.renderer.setStyle(this.loadingSpinner.elementRef.nativeElement, 'display', 'inherit');
}
else {
this.renderer.setStyle(this.loadingSpinner.elementRef.nativeElement, 'display', 'none');
}
this.el.nativeElement.disabled = changes.loading.currentValue;
}
};
/**
* @return {?}
*/
Button.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
this.ref.detectChanges();
};
Button.decorators = [
{ type: core.Directive, args: [{
selector: '[sukaButton]'
},] }
];
/** @nocollapse */
Button.ctorParameters = function () { return [
{ type: core.ChangeDetectorRef },
{ type: core.ElementRef },
{ type: core.Renderer2 },
{ type: core.ViewContainerRef },
{ type: core.ComponentFactoryResolver }
]; };
Button.propDecorators = {
sukaButton: [{ type: core.Input }],
size: [{ type: core.Input }],
basic: [{ type: core.HostBinding, args: ['class.btn--basic',] }],
primary: [{ type: core.HostBinding, args: ['class.btn--primary',] }],
plain: [{ type: core.HostBinding, args: ['class.btn--plain',] }],
destructive: [{ type: core.HostBinding, args: ['class.btn--destructive',] }],
outline_white: [{ type: core.HostBinding, args: ['class.btn--outline_white',] }],
skeleton: [{ type: core.HostBinding, args: ['class.skeleton',] }, { type: core.Input }],
outline: [{ type: core.HostBinding, args: ['class.btn--outline',] }, { type: core.Input }],
hover: [{ type: core.HostBinding, args: ['class.btn--hover',] }, { type: core.Input }],
fullWidth: [{ type: core.HostBinding, args: ['class.btn--full_width',] }, { type: core.Input }],
inGroup: [{ type: core.HostBinding, args: ['class.btn--group_item',] }, { type: core.Input }],
loading: [{ type: core.HostBinding, args: ['class.btn--loading',] }, { type: core.Input }],
buttonSmall: [{ type: core.HostBinding, args: ['class.btn--sm',] }],
buttonLarge: [{ type: core.HostBinding, args: ['class.btn--lg',] }]
};
return Button;
}());
if (false) {
/**
* Sets the button type. Can be `primary`, `basic`, `plain`, `destructive` or `outline_white`.
* @type {?}
*/
Button.prototype.sukaButton;
/**
* Button size. Can be `md` (Medium), `sm` (Small) or `lg` (Large).
* @type {?}
*/
Button.prototype.size;
/**
* Set to `true` for a skeleton state button.
* @type {?}
*/
Button.prototype.skeleton;
/**
* Set to `true` to display the outline version of the button.
* @type {?}
*/
Button.prototype.outline;
/**
* Set to `true` for a hover effect.
* @type {?}
*/
Button.prototype.hover;
/**
* Set to `true` for a button that uses the full horizontal width;
* @type {?}
*/
Button.prototype.fullWidth;
/**
* Sets to `true` when the button is on a button group.
* @type {?}
*/
Button.prototype.inGroup;
/**
* Set to `true` for a loading button.
* @type {?}
*/
Button.prototype.loading;
/**
* @ignore
* @type {?}
*/
Button.prototype.loadingSpinner;
/**
* @type {?}
* @private
*/
Button.prototype.ref;
/**
* @type {?}
* @private
*/
Button.prototype.el;
/**
* @type {?}
* @private
*/
Button.prototype.renderer;
/**
* @type {?}
* @private
*/
Button.prototype.viewContainerRef;
/**
* @type {?}
* @private
*/
Button.prototype.componentFactoryResolver;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ButtonGroup = /** @class */ (function () {
function ButtonGroup() {
this.baseClass = true;
}
/**
* @return {?}
*/
ButtonGroup.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
this.buttons.toArray().forEach((/**
* @param {?} button
* @return {?}
*/
function (button) {
button.inGroup = true;
}));
};
ButtonGroup.decorators = [
{ type: core.Component, args: [{
selector: 'suka-button-group',
template: "<div class=\"btn-group__wrapper\"><ng-content></ng-content></div>"
}] }
];
ButtonGroup.propDecorators = {
baseClass: [{ type: core.HostBinding, args: ['class.btn-group',] }],
segmented: [{ type: core.HostBinding, args: ['class.btn-group--segmented',] }, { type: core.Input }],
buttons: [{ type: core.ContentChildren, args: [Button,] }]
};
return ButtonGroup;
}());
if (false) {
/** @type {?} */
ButtonGroup.prototype.baseClass;
/**
* Join buttons as segmented group
* @type {?}
*/
ButtonGroup.prototype.segmented;
/** @type {?} */
ButtonGroup.prototype.buttons;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ButtonModule = /** @class */ (function () {
function ButtonModule() {
}
ButtonModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [Button, ButtonGroup],
exports: [Button, ButtonGroup],
imports: [common.CommonModule, LoadingModule],
entryComponents: [Loading],
},] }
];
return ButtonModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @enum {number} */
var CheckboxState = {
Init: 0,
Indeterminate: 1,
Checked: 2,
Unchecked: 3,
};
CheckboxState[CheckboxState.Init] = 'Init';
CheckboxState[CheckboxState.Indeterminate] = 'Indeterminate';
CheckboxState[CheckboxState.Checked] = 'Checked';
CheckboxState[CheckboxState.Unchecked] = 'Unchecked';
/**
* Used to emit changes performed on checkbox components.
*/
var /**
* Used to emit changes performed on checkbox components.
*/
CheckboxChange = /** @class */ (function () {
function CheckboxChange() {
}
return CheckboxChange;
}());
if (false) {
/** @type {?} */
CheckboxChange.prototype.source;
/** @type {?} */
CheckboxChange.prototype.checked;
}
var Checkbox = /** @class */ (function () {
/**
* Creates an instance of `Checkbox`.
*/
function Checkbox(changeDetectorRef) {
this.changeDetectorRef = changeDetectorRef;
/**
* Size of the checkbox.
*/
this.size = 'md';
/**
* Set to `true` for checkbox to be rendered without any classes on the host element.
*/
this.inline = false;
/**
* Set to `true` for a disabled checkbox.
*/
this.disabled = false;
/**
* Set to `true` for a loading checkbox.
*/
this.skeleton = false;
/**
* Set to `true` to hide the checkbox labels.
*/
this.hideLabel = false;
/**
* The unique id for the checkbox component.
*/
this.id = "checkbox-" + Checkbox.checkboxCount;
/**
* Used to set the `aria-label` attribute on the input element.
*/
// tslint:disable-next-line:no-input-rename
this.ariaLabel = '';
/**
* Emits event notifying other classes when a change in state occurs on a checkbox after a
* click.
*/
// tslint:disable-next-line: no-output-native
this.change = new core.EventEmitter();
/**
* Emits event notifying other classes when a change in state occurs specifically
* on an indeterminate checkbox.
*/
this.indeterminateChange = new core.EventEmitter();
/**
* Set to `true` if the input checkbox is selected (or checked).
*/
// tslint:disable-next-line: variable-name
this._checked = false;
/**
* Set to `true` if the input checkbox is in state indeterminate.
*/
// tslint:disable-next-line: variable-name
this._indeterminate = false;
this.currentCheckboxState = CheckboxState.Init;
/**
* Called when checkbox is blurred. Needed to properly implement `ControlValueAccessor`.
*/
this.onTouched = (/**
* @return {?}
*/
function () { });
/**
* Method set in `registerOnChange` to propagate changes back to the form.
*/
this.propagateChange = (/**
* @param {?} _
* @return {?}
*/
function (_) { });
Checkbox.checkboxCount++;
}
Object.defineProperty(Checkbox.prototype, "indeterminate", {
/**
* Reflects whether the checkbox state is indeterminate.
*/
get: /**
* Reflects whether the checkbox state is indeterminate.
* @return {?}
*/
function () {
return this._indeterminate;
},
/**
* Set the checkbox's indeterminate state to match the parameter and transition the view to reflect the change.
*/
set: /**
* Set the checkbox's indeterminate state to match the parameter and transition the view to reflect the change.
* @param {?} indeterminate
* @return {?}
*/
function (indeterminate) {
/** @type {?} */
var changed = this._indeterminate !== indeterminate;
this._indeterminate = indeterminate;
if (changed) {
this.transitionCheckboxState(CheckboxState.Indeterminate);
}
else {
this.transitionCheckboxState(this.checked ? CheckboxState.Checked : CheckboxState.Unchecked);
}
this.indeterminateChange.emit(this._indeterminate);
},
enumerable: true,
configurable: true
});
Object.defineProperty(Checkbox.prototype, "checked", {
/**
* Returns value `true` if state is selected for the checkbox.
*/
get: /**
* Returns value `true` if state is selected for the checkbox.
* @return {?}
*/
function () {
return this._checked;
},
/**
* Updating the state of a checkbox to match the state of the parameter passed in.
*/
set: /**
* Updating the state of a checkbox to match the state of the parameter passed in.
* @param {?} checked
* @return {?}
*/
function (checked) {
var _this = this;
if (checked !== this.checked) {
if (this._indeterminate) {
Promise.resolve().then((/**
* @return {?}
*/
function () {
_this._indeterminate = false;
_this.indeterminateChange.emit(_this._indeterminate);
}));
}
this._checked = checked;
this.changeDetectorRef.markForCheck();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(Checkbox.prototype, "checkboxWrapperClass", {
get: /**
* @return {?}
*/
function () {
return !this.inline;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Checkbox.prototype, "formItemClass", {
get: /**
* @return {?}
*/
function () {
return !this.inline;
},
enumerable: true,
configurable: true
});
/**
* Toggle the selected state of the checkbox.
*/
/**
* Toggle the selected state of the checkbox.
* @return {?}
*/
Checkbox.prototype.toggle = /**
* Toggle the selected state of the checkbox.
* @return {?}
*/
function () {
this.checked = !this.checked;
};
// this is the initial value set to the component
// this is the initial value set to the component
/**
* @param {?} value
* @return {?}
*/
Checkbox.prototype.writeValue =
// this is the initial value set to the component
/**
* @param {?} value
* @return {?}
*/
function (value) {
this.checked = !!value;
};
/**
* Sets a method in order to propagate changes back to the form.
*/
/**
* Sets a method in order to propagate changes back to the form.
* @param {?} fn
* @return {?}
*/
Checkbox.prototype.registerOnChange = /**
* Sets a method in order to propagate changes back to the form.
* @param {?} fn
* @return {?}
*/
function (fn) {
this.propagateChange = fn;
};
/**
* Registers a callback to be triggered when the control has been touched.
* @param fn Callback to be triggered when the checkbox is touched.
*/
/**
* Registers a callback to be triggered when the control has been touched.
* @param {?} fn Callback to be triggered when the checkbox is touched.
* @return {?}
*/
Checkbox.prototype.registerOnTouched = /**
* Registers a callback to be triggered when the control has been touched.
* @param {?} fn Callback to be triggered when the checkbox is touched.
* @return {?}
*/
function (fn) {
this.onTouched = fn;
};
/**
* Executes on the event of a change within `Checkbox` to block propagation.
*/
/**
* Executes on the event of a change within `Checkbox` to block propagation.
* @param {?} event
* @return {?}
*/
Checkbox.prototype.onChange = /**
* Executes on the event of a change within `Checkbox` to block propagation.
* @param {?} event
* @return {?}
*/
function (event) {
event.stopPropagation();
};
/**
* Handles click events on the `Checkbox` and emits changes to other classes.
*/
/**
* Handles click events on the `Checkbox` and emits changes to other classes.
* @param {?} event
* @return {?}
*/
Checkbox.prototype.onClick = /**
* Handles click events on the `Checkbox` and emits changes to other classes.
* @param {?} event
* @return {?}
*/
function (event) {
if (!this.disabled) {
this.toggle();
this.transitionCheckboxState(this._checked ? CheckboxState.Checked : CheckboxState.Unchecked);
this.emitChangeEvent();
}
};
/**
* Handles changes between checkbox states.
*/
/**
* Handles changes between checkbox states.
* @param {?} newState
* @return {?}
*/
Checkbox.prototype.transitionCheckboxState = /**
* Handles changes between checkbox states.
* @param {?} newState
* @return {?}
*/
function (newState) {
/** @type {?} */
var oldState = this.currentCheckboxState;
// Indeterminate has to be set always if it's transitioned to
// checked has to be set before indeterminate or it overrides
// indeterminate's dash
if (newState === CheckboxState.Indeterminate) {
this.checked = false;
this.inputCheckbox.nativeElement.indeterminate = true;
}
if (oldState === newState) {
return;
}
this.currentCheckboxState = newState;
};
/**
* Creates instance of `CheckboxChange` used to propagate the change event.
*/
/**
* Creates instance of `CheckboxChange` used to propagate the change event.
* @return {?}
*/
Checkbox.prototype.emitChangeEvent = /**
* Creates instance of `CheckboxChange` used to propagate the change event.
* @return {?}
*/
function () {
/** @type {?} */
var event = new CheckboxChange();
event.source = this;
event.checked = this.checked;
this.propagateChange(this.checked);
this.change.emit(event);
};
/**
* Updates the checkbox if it is in the indeterminate state.
*/
/**
* Updates the checkbox if it is in the indeterminate state.
* @return {?}
*/
Checkbox.prototype.ngAfterViewInit = /**
* Updates the checkbox if it is in the indeterminate state.
* @return {?}
*/
function () {
if (this.indeterminate) {
this.inputCheckbox.nativeElement.indeterminate = true;
this.checked = false;
}
};
/**
* Variable used for creating unique ids for checkbox components.
*/
Checkbox.checkboxCount = 0;
Checkbox.decorators = [
{ type: core.Component, args: [{
selector: 'suka-checkbox',
template: "\n <input\n #inputCheckbox\n class=\"checkbox\"\n type=\"checkbox\"\n [id]=\"id\"\n [value]=\"value\"\n [name]=\"name\"\n [required]=\"required\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [indeterminate]=\"indeterminate\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-checked]=\"(indeterminate ? 'mixed' : checked)\"\n (change)=\"onChange($event)\"\n (click)=\"onClick($event)\">\n <label\n [for]=\"id\"\n class=\"checkbox-label\"\n [ngClass]=\"{\n 'skeleton' : skeleton\n }\">\n <span [ngClass]=\"{'visually-hidden' : hideLabel}\">\n <ng-content></ng-content>\n </span>\n </label>\n ",
providers: [
{
provide: forms.NG_VALUE_ACCESSOR,
useExisting: Checkbox,
multi: true
}
],
changeDetection: core.ChangeDetectionStrategy.OnPush
}] }
];
/** @nocollapse */
Checkbox.ctorParameters = function () { return [
{ type: core.ChangeDetectorRef }
]; };
Checkbox.propDecorators = {
size: [{ type: core.Input }],
nested: [{ type: core.Input }],
inline: [{ type: core.Input }],
disabled: [{ type: core.Input }],
skeleton: [{ type: core.Input }],
hideLabel: [{ type: core.Input }],
name: [{ type: core.Input }],
id: [{ type: core.Input }],
required: [{ type: core.Input }],
value: [{ type: core.Input }],
ariaLabel: [{ type: core.Input, args: ['aria-label',] }],
ariaLabelledby: [{ type: core.Input, args: ['aria-labelledby',] }],
indeterminate: [{ type: core.Input }],
checked: [{ type: core.Input }],
checkboxWrapperClass: [{ type: core.HostBinding, args: ['class.checkbox-wrapper',] }],
formItemClass: [{ type: core.HostBinding, args: ['class.form-item',] }],
change: [{ type: core.Output }],
indeterminateChange: [{ type: core.Output }],
inputCheckbox: [{ type: core.ViewChild, args: ['inputCheckbox', { static: true },] }]
};
return Checkbox;
}());
if (false) {
/**
* Variable used for creating unique ids for checkbox components.
* @type {?}
*/
Checkbox.checkboxCount;
/**
* Size of the checkbox.
* @type {?}
*/
Checkbox.prototype.size;
/**
* Set to `true` for checkbox to be rendered with nested styles.
* @type {?}
*/
Checkbox.prototype.nested;
/**
* Set to `true` for checkbox to be rendered without any classes on the host element.
* @type {?}
*/
Checkbox.prototype.inline;
/**
* Set to `true` for a disabled checkbox.
* @type {?}
*/
Checkbox.prototype.disabled;
/**
* Set to `true` for a loading checkbox.
* @type {?}
*/
Checkbox.prototype.skeleton;
/**
* Set to `true` to hide the checkbox labels.
* @type {?}
*/
Checkbox.prototype.hideLabel;
/**
* Sets the name attribute on the `input` element.
* @type {?}
*/
Checkbox.prototype.name;
/**
* The unique id for the checkbox component.
* @type {?}
*/
Checkbox.prototype.id;
/**
* Reflects the required attribute of the `input` element.
* @type {?}
*/
Checkbox.prototype.required;
/**
* Sets the value attribute on the `input` element.
* @type {?}
*/
Checkbox.prototype.value;
/**
* Used to set the `aria-label` attribute on the input element.
* @type {?}
*/
Checkbox.prototype.ariaLabel;
/**
* Used to set the `aria-labelledby` attribute on the input element.
* @type {?}
*/
Checkbox.prototype.ariaLabelledby;
/**
* Emits event notifying other classes when a change in state occurs on a checkbox after a
* click.
* @type {?}
*/
Checkbox.prototype.change;
/**
* Emits event notifying other classes when a change in state occurs specifically
* on an indeterminate checkbox.
* @type {?}
*/
Checkbox.prototype.indeterminateChange;
/**
* Set to `true` if the input checkbox is selected (or checked).
* @type {?}
*/
Checkbox.prototype._checked;
/**
* Set to `true` if the input checkbox is in state indeterminate.
* @type {?}
*/
Checkbox.prototype._indeterminate;
/** @type {?} */
Checkbox.prototype.currentCheckboxState;
/**
* Maintains a reference to the view DOM element of the `Checkbox`.
* @type {?}
*/
Checkbox.prototype.inputCheckbox;
/**
* Called when checkbox is blurred. Needed to properly implement `ControlValueAccessor`.
* @type {?}
*/
Checkbox.prototype.onTouched;
/**
* Method set in `registerOnChange` to propagate changes back to the form.
* @type {?}
*/
Checkbox.prototype.propagateChange;
/**
* @type {?}
* @protected
*/
Checkbox.prototype.changeDetectorRef;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var CheckboxModule = /** @class */ (function () {
function CheckboxModule() {
}
CheckboxModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
Checkbox
],
exports: [
Checkbox
],
imports: [
common.CommonModule,
forms.FormsModule
]
},] }
];
return CheckboxModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
// tslint:disable: max-line-length
/**
* @record
*/
function IconDef() { }
if (false) {
/** @type {?} */
IconDef.prototype.name;
/** @type {?} */
IconDef.prototype.template;
}
/** @type {?} */
var iconDefs = [
{
name: 'activity',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>activity</title>\n <path d=\"M14.667 7.333h-2.667c-0.293 0-0.541 0.189-0.633 0.456l-1.367 4.103-3.367-10.103c-0.117-0.349-0.494-0.538-0.843-0.422-0.207 0.069-0.357 0.229-0.422 0.422l-1.848 5.544h-2.186c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h2.667c0.282-0.002 0.54-0.178 0.633-0.456l1.367-4.103 3.367 10.103c0.065 0.193 0.215 0.353 0.421 0.421 0.349 0.117 0.727-0.073 0.843-0.421l1.849-5.544h2.186c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'airplay',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>airplay</title>\n <path d=\"M3.333 10.667h-0.667c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-6.667c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195h10.667c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v6.667c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-0.667c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h0.667c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-6.667c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586h-10.667c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v6.667c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h0.667c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM8.512 9.573c-0.023-0.029-0.053-0.058-0.085-0.085-0.283-0.236-0.703-0.197-0.939 0.085l-3.333 4c-0.096 0.115-0.155 0.264-0.155 0.427 0 0.368 0.299 0.667 0.667 0.667h6.667c0.15 0.001 0.302-0.050 0.427-0.155 0.283-0.236 0.321-0.656 0.085-0.939zM8 11.041l1.91 2.292h-3.82z\"></path>\n </svg>\n "
},
{
name: 'alert-circle',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>alert-circle</title>\n <path d=\"M15.333 8c0-2.025-0.821-3.859-2.148-5.185s-3.161-2.148-5.185-2.148-3.859 0.821-5.185 2.148-2.148 3.161-2.148 5.185 0.821 3.859 2.148 5.185 3.161 2.148 5.185 2.148 3.859-0.821 5.185-2.148 2.148-3.161 2.148-5.185zM14 8c0 1.657-0.671 3.156-1.757 4.243s-2.585 1.757-4.243 1.757-3.156-0.671-4.243-1.757-1.757-2.585-1.757-4.243 0.671-3.156 1.757-4.243 2.585-1.757 4.243-1.757 3.156 0.671 4.243 1.757 1.757 2.585 1.757 4.243zM7.333 5.333v2.667c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-2.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667zM8.667 10.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667 0.299 0.667 0.667 0.667 0.667-0.299 0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'alert-octagon',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>alert-octagon</title>\n <path d=\"M5.24 0.667c-0.171 0-0.341 0.065-0.471 0.195l-3.907 3.907c-0.121 0.121-0.195 0.287-0.195 0.471v5.52c0 0.171 0.065 0.341 0.195 0.471l3.907 3.907c0.121 0.121 0.287 0.195 0.471 0.195h5.52c0.171 0 0.341-0.065 0.471-0.195l3.907-3.907c0.121-0.121 0.195-0.287 0.195-0.471v-5.52c0-0.171-0.065-0.341-0.195-0.471l-3.907-3.907c-0.121-0.121-0.287-0.195-0.471-0.195zM5.516 2h4.968l3.516 3.516v4.968l-3.516 3.516h-4.968l-3.516-3.516v-4.968zM7.333 5.333v2.667c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-2.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667zM8.667 10.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667 0.299 0.667 0.667 0.667 0.667-0.299 0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'alert-triangle',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>alert-triangle</title>\n <path d=\"M7.432 2.916c0.049-0.082 0.123-0.161 0.223-0.221 0.157-0.095 0.337-0.119 0.504-0.077s0.316 0.144 0.409 0.299l5.644 9.422c0.051 0.087 0.085 0.199 0.087 0.321 0.002 0.184-0.070 0.351-0.19 0.473s-0.285 0.199-0.462 0.201h-11.291c-0.101-0.001-0.214-0.027-0.321-0.089-0.159-0.092-0.266-0.239-0.311-0.405s-0.025-0.346 0.061-0.497zM6.288 2.231l-5.647 9.427c-0.281 0.487-0.337 1.033-0.205 1.527s0.453 0.939 0.932 1.215c0.309 0.179 0.651 0.267 0.983 0.268h11.295c0.559-0.006 1.058-0.236 1.415-0.601s0.576-0.869 0.57-1.421c-0.004-0.357-0.102-0.696-0.271-0.983l-5.649-9.431c-0.288-0.475-0.74-0.787-1.236-0.909s-1.041-0.054-1.513 0.233c-0.286 0.173-0.517 0.41-0.675 0.676zM7.333 6v2.667c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-2.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667zM8.667 11.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667 0.299 0.667 0.667 0.667 0.667-0.299 0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'align-center',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>align-center</title>\n <path d=\"M12 6h-8c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h8c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM14 3.333h-12c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h12c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM14 8.667h-12c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h12c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM12 11.333h-8c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h8c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'align-justify',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>align-justify</title>\n <path d=\"M14 6h-12c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h12c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM14 3.333h-12c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h12c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM14 8.667h-12c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h12c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM14 11.333h-12c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h12c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'align-left',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>align-left</title>\n <path d=\"M11.333 6h-9.333c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h9.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM14 3.333h-12c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h12c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM14 8.667h-12c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h12c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM11.333 11.333h-9.333c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h9.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'align-right',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>align-right</title>\n <path d=\"M14 6h-9.333c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h9.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM14 3.333h-12c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h12c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM14 8.667h-12c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h12c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM14 11.333h-9.333c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h9.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'anchor',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>anchor</title>\n <path d=\"M9.333 3.333c0 0.369-0.149 0.701-0.391 0.943s-0.574 0.391-0.943 0.391-0.701-0.149-0.943-0.391-0.391-0.574-0.391-0.943 0.149-0.701 0.391-0.943 0.574-0.391 0.943-0.391 0.701 0.149 0.943 0.391 0.391 0.574 0.391 0.943zM3.333 7.333h-2c-0.368 0-0.667 0.299-0.667 0.667 0 2.025 0.821 3.859 2.148 5.185s3.161 2.148 5.185 2.148 3.859-0.821 5.185-2.148 2.148-3.161 2.148-5.185c0-0.368-0.299-0.667-0.667-0.667h-2c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h1.297c-0.153 1.391-0.782 2.637-1.721 3.576s-2.185 1.567-3.576 1.721v-8.047c0.469-0.121 0.888-0.366 1.219-0.697 0.482-0.482 0.781-1.15 0.781-1.886s-0.299-1.404-0.781-1.885-1.149-0.781-1.885-0.781-1.404 0.299-1.885 0.781-0.781 1.149-0.781 1.885 0.299 1.404 0.781 1.885c0.331 0.331 0.75 0.577 1.219 0.697v8.047c-1.391-0.153-2.637-0.782-3.576-1.721s-1.567-2.185-1.721-3.576h1.297c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'aperture',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>aperture</title>\n <path d=\"M7.615 4.667l1.482-2.567c1.217 0.225 2.305 0.817 3.146 1.657 0.277 0.277 0.528 0.582 0.747 0.909h-3.463zM4.92 6.667l-1.481-2.565c0.102-0.119 0.208-0.234 0.319-0.345 1-1 2.35-1.648 3.85-1.745l-1.728 2.993zM5.305 10h-2.964c-0.221-0.625-0.341-1.299-0.341-2 0-0.953 0.222-1.854 0.617-2.655l1.733 3.003zM11.649 7.652l-0.954-1.652h2.964c0.221 0.625 0.341 1.299 0.341 2 0 0.953-0.222 1.854-0.617 2.655l-1.717-2.975zM8.392 13.987l2.688-4.654 1.481 2.565c-0.102 0.119-0.208 0.234-0.319 0.344-1 1-2.35 1.648-3.85 1.745zM7.133 15.283c0.031 0.005 0.061 0.009 0.093 0.010 0.254 0.027 0.513 0.041 0.774 0.041 2.025 0 3.859-0.821 5.185-2.148 0.244-0.244 0.471-0.505 0.678-0.781 0.028-0.031 0.053-0.065 0.073-0.099 0.879-1.209 1.397-2.697 1.397-4.305 0-1.026-0.211-2.003-0.592-2.891-0.011-0.029-0.023-0.057-0.037-0.084-0.369-0.829-0.887-1.578-1.519-2.211-1.134-1.134-2.64-1.899-4.319-2.097-0.031-0.005-0.061-0.009-0.093-0.010-0.254-0.027-0.513-0.041-0.774-0.041-2.025 0-3.859 0.821-5.185 2.148-0.244 0.243-0.471 0.505-0.678 0.781-0.028 0.031-0.053 0.065-0.074 0.099-0.878 1.209-1.396 2.697-1.396 4.305 0 1.026 0.211 2.003 0.592 2.891 0.011 0.029 0.023 0.057 0.037 0.084 0.369 0.829 0.887 1.578 1.519 2.211 1.134 1.134 2.64 1.899 4.319 2.097zM8.385 11.333l-1.482 2.567c-1.217-0.225-2.305-0.817-3.146-1.657-0.277-0.277-0.528-0.582-0.747-0.909h3.463zM10.31 8l-1.155 2h-2.311l-1.155-2 1.155-2h2.311z\"></path>\n </svg>\n "
},
{
name: 'archive',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>archive</title>\n <path d=\"M2.667 6h10.667v7.333h-10.667zM0.667 1.333c-0.368 0-0.667 0.299-0.667 0.667v3.333c0 0.368 0.299 0.667 0.667 0.667h0.667v8c0 0.368 0.299 0.667 0.667 0.667h12c0.368 0 0.667-0.299 0.667-0.667v-8h0.667c0.368 0 0.667-0.299 0.667-0.667v-3.333c0-0.368-0.299-0.667-0.667-0.667zM1.333 2.667h13.333v2h-13.333zM6.667 8.667h2.667c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-2.667c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'arrow-down-circle',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>arrow-down-circle</title>\n <path d=\"M15.333 8c0-2.025-0.821-3.859-2.148-5.185s-3.161-2.148-5.185-2.148-3.859 0.821-5.185 2.148-2.148 3.161-2.148 5.185 0.821 3.859 2.148 5.185 3.161 2.148 5.185 2.148 3.859-0.821 5.185-2.148 2.148-3.161 2.148-5.185zM14 8c0 1.657-0.671 3.156-1.757 4.243s-2.585 1.757-4.243 1.757-3.156-0.671-4.243-1.757-1.757-2.585-1.757-4.243 0.671-3.156 1.757-4.243 2.585-1.757 4.243-1.757 3.156 0.671 4.243 1.757 1.757 2.585 1.757 4.243zM7.333 5.333v3.724l-1.529-1.529c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943l2.667 2.667c0.064 0.064 0.137 0.112 0.216 0.145s0.165 0.051 0.255 0.051 0.177-0.018 0.255-0.051c0.079-0.033 0.152-0.081 0.216-0.145l2.667-2.667c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-1.529 1.529v-3.724c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'arrow-down-left',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>arrow-down-left</title>\n <path d=\"M11.333 10.667h-5.057l5.529-5.529c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-5.529 5.529v-5.057c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v6.667c0 0.091 0.018 0.177 0.051 0.255s0.081 0.152 0.144 0.215c0.001 0.001 0.001 0.001 0.001 0.001 0.061 0.061 0.135 0.111 0.215 0.144 0.079 0.033 0.165 0.051 0.255 0.051h6.667c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'arrow-down-right',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>arrow-down-right</title>\n <path d=\"M10.667 4.667v5.057l-5.529-5.529c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943l5.529 5.529h-5.057c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h6.667c0.091 0 0.177-0.018 0.255-0.051s0.152-0.081 0.216-0.145c0.061-0.061 0.111-0.135 0.145-0.216 0.033-0.079 0.051-0.165 0.051-0.255v-6.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'arrow-down',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>arrow-down</title>\n <path d=\"M12.195 7.529l-3.529 3.529v-7.724c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v7.724l-3.529-3.529c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943l4.667 4.667c0.064 0.064 0.137 0.112 0.216 0.145s0.165 0.051 0.255 0.051c0.087 0 0.174-0.017 0.255-0.051 0.079-0.033 0.152-0.081 0.216-0.145l4.667-4.667c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0z\"></path>\n </svg>\n "
},
{
name: 'arrow-left-circle',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>arrow-left-circle</title>\n <path d=\"M15.333 8c0-2.025-0.821-3.859-2.148-5.185s-3.161-2.148-5.185-2.148-3.859 0.821-5.185 2.148-2.148 3.161-2.148 5.185 0.821 3.859 2.148 5.185 3.161 2.148 5.185 2.148 3.859-0.821 5.185-2.148 2.148-3.161 2.148-5.185zM14 8c0 1.657-0.671 3.156-1.757 4.243s-2.585 1.757-4.243 1.757-3.156-0.671-4.243-1.757-1.757-2.585-1.757-4.243 0.671-3.156 1.757-4.243 2.585-1.757 4.243-1.757 3.156 0.671 4.243 1.757 1.757 2.585 1.757 4.243zM10.667 7.333h-3.724l1.529-1.529c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-2.667 2.667c-0.064 0.064-0.112 0.137-0.145 0.216s-0.051 0.165-0.051 0.255c0 0.087 0.017 0.174 0.051 0.255 0.033 0.079 0.081 0.152 0.145 0.216l2.667 2.667c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-1.529-1.529h3.724c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'arrow-left',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>arrow-left</title>\n <path d=\"M8.471 12.195l-3.529-3.529h7.724c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-7.724l3.529-3.529c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-4.667 4.667c-0.064 0.064-0.112 0.137-0.145 0.216-0.034 0.081-0.051 0.169-0.051 0.255 0 0.171 0.065 0.341 0.195 0.471l4.667 4.667c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943z\"></path>\n </svg>\n "
},
{
name: 'arrow-right-circle',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>arrow-right-circle</title>\n <path d=\"M15.333 8c0-2.025-0.821-3.859-2.148-5.185s-3.161-2.148-5.185-2.148-3.859 0.821-5.185 2.148-2.148 3.161-2.148 5.185 0.821 3.859 2.148 5.185 3.161 2.148 5.185 2.148 3.859-0.821 5.185-2.148 2.148-3.161 2.148-5.185zM14 8c0 1.657-0.671 3.156-1.757 4.243s-2.585 1.757-4.243 1.757-3.156-0.671-4.243-1.757-1.757-2.585-1.757-4.243 0.671-3.156 1.757-4.243 2.585-1.757 4.243-1.757 3.156 0.671 4.243 1.757 1.757 2.585 1.757 4.243zM5.333 8.667h3.724l-1.529 1.529c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0l2.667-2.667c0.061-0.061 0.111-0.135 0.145-0.216 0.067-0.163 0.067-0.347 0-0.511-0.033-0.079-0.081-0.152-0.145-0.216l-2.667-2.667c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943l1.529 1.529h-3.724c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'arrow-right',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>arrow-right</title>\n <path d=\"M7.529 3.805l3.529 3.529h-7.724c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h7.724l-3.529 3.529c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0l4.667-4.667c0.061-0.061 0.111-0.135 0.145-0.216 0.067-0.163 0.067-0.347 0-0.511-0.033-0.079-0.081-0.152-0.145-0.216l-4.667-4.667c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943z\"></path>\n </svg>\n "
},
{
name: 'arrow-up-circle',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>arrow-up-circle</title>\n <path d=\"M15.333 8c0-2.025-0.821-3.859-2.148-5.185s-3.161-2.148-5.185-2.148-3.859 0.821-5.185 2.148-2.148 3.161-2.148 5.185 0.821 3.859 2.148 5.185 3.161 2.148 5.185 2.148 3.859-0.821 5.185-2.148 2.148-3.161 2.148-5.185zM14 8c0 1.657-0.671 3.156-1.757 4.243s-2.585 1.757-4.243 1.757-3.156-0.671-4.243-1.757-1.757-2.585-1.757-4.243 0.671-3.156 1.757-4.243 2.585-1.757 4.243-1.757 3.156 0.671 4.243 1.757 1.757 2.585 1.757 4.243zM8.667 10.667v-3.724l1.529 1.529c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-2.667-2.667c-0.064-0.064-0.137-0.112-0.216-0.145s-0.165-0.051-0.255-0.051c-0.087 0-0.174 0.017-0.255 0.051-0.079 0.033-0.152 0.081-0.216 0.145l-2.667 2.667c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0l1.529-1.529v3.724c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'arrow-up-left',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>arrow-up-left</title>\n <path d=\"M5.333 11.333v-5.057l5.529 5.529c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-5.529-5.529h5.057c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-6.667c-0.091 0-0.177 0.018-0.255 0.051s-0.151 0.081-0.215 0.144c-0.001 0.001-0.001 0.001-0.001 0.001-0.061 0.061-0.111 0.134-0.144 0.215-0.033 0.079-0.051 0.165-0.051 0.255v6.667c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'arrow-up-right',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>arrow-up-right</title>\n <path d=\"M4.667 5.333h5.057l-5.529 5.529c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0l5.529-5.529v5.057c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-6.667c0-0.091-0.018-0.177-0.051-0.255s-0.081-0.152-0.144-0.215c-0.001-0.001-0.001-0.001-0.001-0.001-0.061-0.061-0.135-0.111-0.215-0.144-0.079-0.033-0.165-0.051-0.255-0.051h-6.667c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'arrow-up',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>arrow-up</title>\n <path d=\"M3.805 8.471l3.529-3.529v7.724c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-7.724l3.529 3.529c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-4.667-4.667c-0.064-0.064-0.137-0.112-0.216-0.145-0.081-0.034-0.169-0.051-0.255-0.051-0.171 0-0.341 0.065-0.471 0.195l-4.667 4.667c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0z\"></path>\n </svg>\n "
},
{
name: 'at-sign',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>at-sign</title>\n <path d=\"M10 8c0 0.553-0.223 1.051-0.586 1.414s-0.861 0.586-1.414 0.586-1.051-0.223-1.414-0.586-0.586-0.861-0.586-1.414 0.223-1.051 0.586-1.414 0.861-0.586 1.414-0.586 1.051 0.223 1.414 0.586 0.586 0.861 0.586 1.414zM10.493 10.212c0.087 0.121 0.183 0.235 0.287 0.34 0.482 0.482 1.15 0.781 1.886 0.781s1.404-0.299 1.885-0.781 0.781-1.149 0.781-1.885v-0.667c0-2.025-0.822-3.859-2.148-5.185s-3.161-2.148-5.186-2.147-3.859 0.821-5.185 2.148-2.147 3.161-2.147 5.185 0.822 3.859 2.148 5.185 3.161 2.148 5.185 2.147c1.683 0 3.237-0.568 4.46-1.513 0.291-0.225 0.345-0.643 0.121-0.935s-0.643-0.345-0.935-0.121c-0.997 0.769-2.265 1.235-3.645 1.235-1.657 0-3.156-0.671-4.243-1.757s-1.757-2.584-1.757-4.241 0.671-3.156 1.757-4.243 2.585-1.757 4.242-1.757 3.156 0.671 4.243 1.757 1.758 2.585 1.758 4.242v0.667c0 0.369-0.149 0.701-0.391 0.943s-0.574 0.391-0.943 0.391-0.701-0.149-0.943-0.391-0.391-0.574-0.391-0.943v-3.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667c-0.557-0.418-1.25-0.667-2-0.667-0.92 0-1.755 0.374-2.357 0.976s-0.976 1.437-0.976 2.357 0.374 1.755 0.976 2.357 1.437 0.976 2.357 0.976 1.755-0.374 2.357-0.976c0.047-0.047 0.093-0.095 0.137-0.145z\"></path>\n </svg>\n "
},
{
name: 'award',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>award</title>\n <path d=\"M9.991 10.283l0.5 3.768-2.147-1.289c-0.207-0.123-0.469-0.131-0.686 0l-2.147 1.289 0.501-3.767c0.614 0.247 1.286 0.383 1.989 0.383s1.375-0.137 1.991-0.384zM10.221 8.661c-0.039 0.020-0.075 0.043-0.109 0.070-0.613 0.382-1.337 0.603-2.113 0.603-1.105 0-2.104-0.447-2.829-1.171s-1.171-1.724-1.171-2.829 0.447-2.104 1.171-2.829 1.724-1.171 2.829-1.171 2.104 0.447 2.829 1.171 1.171 1.724 1.171 2.829-0.447 2.104-1.171 2.829c-0.185 0.185-0.389 0.353-0.607 0.499zM4.76 9.57l-0.754 5.675c-0.049 0.365 0.208 0.7 0.573 0.749 0.156 0.021 0.307-0.015 0.431-0.089l2.99-1.794 2.991 1.794c0.316 0.189 0.725 0.087 0.915-0.229 0.081-0.135 0.109-0.287 0.089-0.431l-0.753-5.677c0.187-0.143 0.364-0.299 0.53-0.465 0.964-0.964 1.562-2.298 1.562-3.771s-0.598-2.807-1.562-3.771-2.299-1.562-3.771-1.562-2.807 0.598-3.771 1.562-1.562 2.299-1.562 3.771 0.598 2.807 1.562 3.771c0.167 0.167 0.344 0.322 0.531 0.465z\"></path>\n </svg>\n "
},
{
name: 'bar-chart-2',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>bar-chart-2</title>\n <path d=\"M12.667 13.333v-6.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v6.667c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667zM8.667 13.333v-10.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v10.667c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667zM4.667 13.333v-4c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v4c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'bar-chart',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>bar-chart</title>\n <path d=\"M8.667 13.333v-6.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v6.667c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667zM12.667 13.333v-10.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v10.667c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667zM4.667 13.333v-2.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v2.667c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'battery-charging',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>battery-charging</title>\n <path d=\"M3.333 11.333h-1.333c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-5.333c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195h2.127c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-2.127c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v5.333c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h1.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM10 4.667h1.333c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v5.333c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-2.127c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h2.127c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-5.333c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586h-1.333c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667zM16 8.667v-1.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v1.333c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667zM6.779 3.63l-2.667 4c-0.204 0.307-0.121 0.72 0.185 0.925 0.115 0.077 0.245 0.113 0.37 0.112h2.754l-1.976 2.963c-0.204 0.307-0.121 0.72 0.185 0.925s0.72 0.121 0.925-0.185l2.667-4c0.071-0.104 0.113-0.232 0.113-0.37 0-0.368-0.299-0.667-0.667-0.667h-2.754l1.976-2.963c0.204-0.307 0.121-0.72-0.185-0.925s-0.72-0.121-0.925 0.185z\"></path>\n </svg>\n "
},
{
name: 'battery',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>battery</title>\n <path d=\"M2 3.333c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v5.333c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h9.333c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-5.333c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586zM2 4.667h9.333c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v5.333c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-9.333c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-5.333c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195zM16 8.667v-1.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v1.333c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'bell-off',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>bell-off</title>\n <path d=\"M8.577 13.665c-0.093 0.159-0.239 0.266-0.405 0.31s-0.347 0.025-0.506-0.067c-0.108-0.063-0.189-0.148-0.239-0.238-0.183-0.32-0.589-0.431-0.909-0.249s-0.431 0.589-0.249 0.909c0.167 0.293 0.415 0.549 0.729 0.731 0.477 0.277 1.023 0.334 1.517 0.203s0.939-0.452 1.216-0.929c0.185-0.319 0.076-0.727-0.242-0.911s-0.727-0.076-0.911 0.242zM12.667 5.331c0.001-1.287-0.52-2.455-1.362-3.299-0.843-0.845-2.009-1.37-3.298-1.372-0.965-0.001-1.866 0.291-2.6 0.787-0.305 0.206-0.385 0.621-0.179 0.926s0.621 0.385 0.926 0.179c0.517-0.349 1.158-0.559 1.852-0.559 0.921 0.001 1.753 0.375 2.355 0.98 0.601 0.603 0.972 1.433 0.973 2.351-0.028 1.105 0.115 2.317 0.443 3.518 0.097 0.355 0.463 0.565 0.819 0.467s0.565-0.463 0.467-0.819c-0.295-1.083-0.421-2.166-0.396-3.138 0-0.003 0-0.007 0-0.011s0-0.005 0-0.008c0-0.001 0-0.002 0-0.003zM4.664 5.607l5.060 5.059h-6.291c0.581-0.952 1.189-2.541 1.231-5.059zM0.195 1.138l3.237 3.237c-0.071 0.329-0.103 0.656-0.099 0.967 0 4.076-1.595 5.356-1.709 5.441-0.302 0.205-0.382 0.616-0.179 0.921 0.128 0.191 0.337 0.295 0.555 0.297h9.057l3.805 3.805c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-14.667-14.667c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943z\"></path>\n </svg>\n "
},
{
name: 'bell',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>bell</title>\n <path d=\"M11.333 5.333c0 2.674 0.631 4.347 1.234 5.333h-9.135c0.603-0.987 1.234-2.659 1.234-5.333 0-0.921 0.373-1.753 0.976-2.357s1.437-0.976 2.357-0.976 1.753 0.373 2.357 0.976 0.976 1.437 0.976 2.357zM12.667 5.333c0-1.289-0.523-2.456-1.367-3.3s-2.011-1.367-3.3-1.367-2.456 0.523-3.3 1.367-1.367 2.011-1.367 3.3c0 4.085-1.595 5.365-1.709 5.449-0.302 0.205-0.382 0.616-0.179 0.921 0.128 0.191 0.337 0.295 0.555 0.297h12c0.368 0 0.667-0.299 0.667-0.667 0-0.226-0.112-0.425-0.286-0.547-0.117-0.087-1.714-1.367-1.714-5.453zM8.577 13.665c-0.093 0.159-0.239 0.266-0.405 0.31s-0.347 0.025-0.506-0.067c-0.108-0.063-0.189-0.148-0.239-0.238-0.183-0.32-0.589-0.431-0.909-0.249s-0.431 0.589-0.249 0.909c0.167 0.293 0.415 0.549 0.729 0.731 0.477 0.277 1.023 0.334 1.517 0.203s0.939-0.452 1.216-0.929c0.185-0.319 0.076-0.727-0.242-0.911s-0.727-0.076-0.911 0.242z\"></path>\n </svg>\n "
},
{
name: 'bluetooth',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>bluetooth</title>\n <path d=\"M8.667 6.391v-4.115l2.057 2.057zM8.667 9.609l2.057 2.057-2.057 2.057zM3.862 4.805l3.195 3.195-3.195 3.195c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0l2.529-2.529v5.724c0 0.171 0.065 0.341 0.195 0.471 0.261 0.261 0.683 0.261 0.943 0l3.667-3.667c0.261-0.261 0.261-0.683 0-0.943l-3.195-3.195 3.195-3.195c0.261-0.261 0.261-0.683 0-0.943l-3.667-3.667c-0.121-0.121-0.287-0.195-0.471-0.195-0.368 0-0.667 0.299-0.667 0.667v5.724l-2.529-2.529c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943z\"></path>\n </svg>\n "
},
{
name: 'bold',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>bold</title>\n <path d=\"M4.667 7.333v-4h4.667c0.553 0 1.051 0.223 1.414 0.586s0.586 0.861 0.586 1.414-0.223 1.051-0.586 1.414-0.861 0.586-1.414 0.586zM3.333 8v5.333c0 0.368 0.299 0.667 0.667 0.667h6c0.92 0 1.755-0.374 2.357-0.976s0.976-1.437 0.976-2.357-0.374-1.755-0.976-2.357c-0.217-0.217-0.463-0.404-0.733-0.555 0.023-0.021 0.045-0.043 0.067-0.065 0.602-0.602 0.976-1.437 0.976-2.357s-0.374-1.755-0.976-2.357-1.437-0.976-2.357-0.976h-5.333c-0.368 0-0.667 0.299-0.667 0.667zM4.667 8.667h5.333c0.553 0 1.051 0.223 1.414 0.586s0.586 0.861 0.586 1.414-0.223 1.051-0.586 1.414-0.861 0.586-1.414 0.586h-5.333z\"></path>\n </svg>\n "
},
{
name: 'book-open',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>book-open</title>\n <path d=\"M14 2.667v8.667h-4c-0.485 0-0.941 0.13-1.333 0.357v-7.023c0-0.553 0.223-1.051 0.586-1.414s0.861-0.586 1.414-0.586zM7.333 11.69c-0.392-0.227-0.848-0.357-1.333-0.357h-4v-8.667h3.333c0.553 0 1.051 0.223 1.414 0.586s0.586 0.861 0.586 1.414zM14.667 1.333h-4c-0.92 0-1.755 0.374-2.357 0.976-0.111 0.111-0.215 0.231-0.309 0.357-0.095-0.127-0.198-0.246-0.309-0.357-0.603-0.602-1.437-0.976-2.357-0.976h-4c-0.368 0-0.667 0.299-0.667 0.667v10c0 0.368 0.299 0.667 0.667 0.667h4.667c0.369 0 0.701 0.149 0.943 0.391s0.391 0.574 0.391 0.943c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667c0-0.369 0.149-0.701 0.391-0.943s0.574-0.391 0.943-0.391h4.667c0.368 0 0.667-0.299 0.667-0.667v-10c0-0.368-0.299-0.667-0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'book',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>book</title>\n <path d=\"M4.333 0.667c-0.644 0-1.229 0.262-1.65 0.683s-0.683 1.006-0.683 1.65v10c0 0.644 0.262 1.229 0.683 1.65s1.006 0.683 1.65 0.683h9c0.368 0 0.667-0.299 0.667-0.667v-13.333c0-0.368-0.299-0.667-0.667-0.667zM12.667 12v2h-8.333c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707 0.111-0.525 0.293-0.707 0.431-0.293 0.707-0.293zM4.333 2h8.333v8.667h-8.333c-0.358 0-0.697 0.081-1 0.225v-7.891c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293z\"></path>\n </svg>\n "
},
{
name: 'bookmark',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>bookmark</title>\n <path d=\"M12.279 14.543c0.107 0.077 0.242 0.124 0.387 0.124 0.368 0 0.667-0.299 0.667-0.667v-10.667c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586h-6.667c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v10.667c-0.001 0.133 0.040 0.269 0.124 0.387 0.214 0.299 0.631 0.369 0.93 0.155l4.279-3.056zM12 12.705l-3.613-2.581c-0.237-0.169-0.546-0.161-0.775 0l-3.613 2.581v-9.371c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195h6.667c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471z\"></path>\n </svg>\n "
},
{
name: 'box',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>box</title>\n <path d=\"M12.641 4.552l-4.641 2.685-4.641-2.685 4.304-2.459c0.075-0.043 0.155-0.070 0.237-0.083 0.145-0.023 0.297 0.002 0.436 0.083zM7.684 15.307c0.094 0.051 0.202 0.079 0.316 0.079 0.115 0 0.224-0.029 0.319-0.081 0.237-0.039 0.467-0.12 0.678-0.24l4.667-2.667c0.412-0.238 0.707-0.599 0.866-1.009 0.089-0.228 0.135-0.471 0.137-0.723v-5.333c0-0.319-0.075-0.621-0.209-0.889-0.015-0.047-0.035-0.093-0.061-0.138-0.031-0.053-0.067-0.099-0.108-0.14-0.021-0.029-0.043-0.057-0.065-0.085-0.153-0.191-0.341-0.352-0.554-0.477l-4.673-2.67c-0.407-0.235-0.867-0.31-1.302-0.243-0.243 0.038-0.477 0.119-0.692 0.242l-4.667 2.667c-0.255 0.147-0.466 0.342-0.627 0.567-0.040 0.040-0.076 0.087-0.106 0.138-0.026 0.045-0.047 0.092-0.061 0.14-0.027 0.054-0.051 0.109-0.072 0.164-0.088 0.229-0.134 0.472-0.136 0.719v5.338c0.001 0.473 0.165 0.909 0.443 1.252 0.153 0.191 0.341 0.352 0.554 0.477l4.673 2.67c0.216 0.125 0.447 0.205 0.681 0.241zM7.333 8.391v5.327l-4.33-2.474c-0.074-0.043-0.138-0.099-0.19-0.163-0.093-0.115-0.147-0.258-0.147-0.415v-4.975zM8.667 13.719v-5.327l4.667-2.699v4.975c-0.001 0.081-0.017 0.164-0.047 0.241-0.053 0.137-0.15 0.256-0.284 0.333z\"></path>\n </svg>\n "
},
{
name: 'briefcase',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>briefcase</title>\n <path d=\"M6 4v-0.667c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195h2.667c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v0.667zM6 13.333v-8h4v8zM4.667 5.333v8h-2c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-6.667c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195zM11.333 4v-0.667c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586h-2.667c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v0.667h-2c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v6.667c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h10.667c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-6.667c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586zM11.333 13.333v-8h2c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v6.667c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195z\"></path>\n </svg>\n "
},
{
name: 'calendar',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>calendar</title>\n <path d=\"M4.667 1.333v0.667h-1.333c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v9.333c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h9.333c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-9.333c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586h-1.333v-0.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v0.667h-4v-0.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667zM13.333 6h-10.667v-2c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195h1.333v0.667c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-0.667h4v0.667c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-0.667h1.333c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471zM2.667 7.333h10.667v6c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-9.333c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471z\"></path>\n </svg>\n "
},
{
name: 'camera-off',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>camera-off</title>\n <path d=\"M6 2.667h3.643l1.135 1.703c0.128 0.191 0.337 0.295 0.555 0.297h2.667c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v6.227c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-6.227c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586h-2.31l-1.135-1.703c-0.121-0.18-0.324-0.297-0.555-0.297h-4c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667zM5.508 6.451c-0.097 0.109-0.189 0.225-0.273 0.348-0.52 0.759-0.682 1.659-0.525 2.497s0.635 1.617 1.394 2.137 1.659 0.682 2.497 0.525c0.591-0.111 1.153-0.381 1.616-0.798l2.174 2.174h-10.391c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-7.333c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195h1.724zM6.942 5.999l-5.804-5.803c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943l2.195 2.195h-0.391c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v7.333c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h11.724l1.138 1.138c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-8.845-8.845zM9.271 10.214c-0.267 0.224-0.583 0.37-0.917 0.433-0.504 0.095-1.042-0.003-1.498-0.315s-0.742-0.778-0.837-1.282 0.003-1.042 0.315-1.498c0.037-0.055 0.077-0.107 0.117-0.155z\"></path>\n </svg>\n "
},
{
name: 'camera',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>camera</title>\n <path d=\"M16 12.667v-7.333c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586h-2.31l-1.135-1.703c-0.121-0.18-0.324-0.297-0.555-0.297h-4c-0.217 0.001-0.427 0.105-0.555 0.297l-1.135 1.703h-2.31c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v7.333c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h12c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414zM14.667 12.667c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-12c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-7.333c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195h2.667c0.231 0 0.433-0.117 0.555-0.297l1.135-1.703h3.287l1.135 1.703c0.128 0.191 0.337 0.295 0.555 0.297h2.667c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471zM11.333 8.667c0-0.92-0.374-1.755-0.976-2.357s-1.437-0.976-2.357-0.976-1.755 0.374-2.357 0.976-0.976 1.437-0.976 2.357 0.374 1.755 0.976 2.357 1.437 0.976 2.357 0.976 1.755-0.374 2.357-0.976 0.976-1.437 0.976-2.357zM10 8.667c0 0.553-0.223 1.051-0.586 1.414s-0.861 0.586-1.414 0.586-1.051-0.223-1.414-0.586-0.586-0.861-0.586-1.414 0.223-1.051 0.586-1.414 0.861-0.586 1.414-0.586 1.051 0.223 1.414 0.586 0.586 0.861 0.586 1.414z\"></path>\n </svg>\n "
},
{
name: 'cast',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>cast</title>\n <path d=\"M1.2 11.387c0.625 0.127 1.153 0.463 1.528 0.924 0.27 0.331 0.462 0.729 0.553 1.16 0.076 0.36 0.429 0.591 0.79 0.515s0.591-0.429 0.515-0.79c-0.135-0.64-0.42-1.231-0.823-1.727-0.563-0.692-1.359-1.197-2.295-1.389-0.361-0.073-0.713 0.159-0.787 0.52s0.159 0.713 0.52 0.787zM1.259 8.696c1.334 0.149 2.496 0.775 3.337 1.697 0.746 0.817 1.239 1.866 1.374 3.017 0.043 0.366 0.374 0.627 0.739 0.585s0.627-0.374 0.585-0.739c-0.167-1.433-0.783-2.741-1.713-3.761-1.052-1.153-2.509-1.939-4.175-2.124-0.366-0.041-0.695 0.223-0.736 0.589s0.223 0.695 0.589 0.736zM2 5.333v-1.333c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195h10.667c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v8c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-4c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h4c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-8c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586h-10.667c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v1.333c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667zM2 13.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667 0.299 0.667 0.667 0.667 0.667-0.299 0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'check-circle',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>check-circle</title>\n <path d=\"M14 7.387v0.613c-0.001 1.657-0.673 3.155-1.76 4.241s-2.587 1.756-4.243 1.755-3.156-0.673-4.241-1.76-1.756-2.586-1.755-4.243 0.673-3.155 1.76-4.241 2.587-1.756 4.243-1.755c0.887 0.001 1.724 0.193 2.433 0.517 0.335 0.153 0.731 0.005 0.883-0.329s0.005-0.731-0.329-0.883c-0.885-0.404-1.911-0.637-2.986-0.637-2.025-0.001-3.859 0.819-5.187 2.145s-2.149 3.16-2.151 5.185 0.819 3.859 2.145 5.187 3.159 2.15 5.184 2.151 3.859-0.819 5.187-2.145 2.15-3.159 2.151-5.185v-0.613c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667zM14.195 2.195l-6.195 6.201-1.529-1.528c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943l2 2c0.261 0.261 0.683 0.26 0.943 0l6.667-6.673c0.26-0.261 0.26-0.683-0.001-0.943s-0.683-0.26-0.943 0.001z\"></path>\n </svg>\n "
},
{
name: 'check-square',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>check-square</title>\n <path d=\"M5.529 7.805l2 2c0.261 0.261 0.683 0.261 0.943 0l6.667-6.667c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-6.195 6.195-1.529-1.529c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943zM13.333 8v4.667c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-9.333c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-9.333c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195h7.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-7.333c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v9.333c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h9.333c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-4.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'check',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>check</title>\n <path d=\"M12.862 3.529l-6.862 6.862-2.862-2.862c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943l3.333 3.333c0.261 0.261 0.683 0.261 0.943 0l7.333-7.333c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0z\"></path>\n </svg>\n "
},
{
name: 'chevron-down',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>chevron-down</title>\n <path d=\"M3.529 6.471l4 4c0.261 0.261 0.683 0.261 0.943 0l4-4c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-3.529 3.529-3.529-3.529c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943z\"></path>\n </svg>\n "
},
{
name: 'chevron-left',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>chevron-left</title>\n <path d=\"M10.471 11.529l-3.529-3.529 3.529-3.529c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-4 4c-0.261 0.261-0.261 0.683 0 0.943l4 4c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943z\"></path>\n </svg>\n "
},
{
name: 'chevron-right',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>chevron-right</title>\n <path d=\"M6.471 12.471l4-4c0.261-0.261 0.261-0.683 0-0.943l-4-4c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943l3.529 3.529-3.529 3.529c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0z\"></path>\n </svg>\n "
},
{
name: 'chevron-up',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>chevron-up</title>\n <path d=\"M12.471 9.529l-4-4c-0.261-0.261-0.683-0.261-0.943 0l-4 4c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0l3.529-3.529 3.529 3.529c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943z\"></path>\n </svg>\n "
},
{
name: 'chevrons-down',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>chevrons-down</title>\n <path d=\"M4.195 9.138l3.333 3.333c0.261 0.261 0.683 0.261 0.943 0l3.333-3.333c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-2.862 2.862-2.862-2.862c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943zM4.195 4.471l3.333 3.333c0.261 0.261 0.683 0.261 0.943 0l3.333-3.333c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-2.862 2.862-2.862-2.862c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943z\"></path>\n </svg>\n "
},
{
name: 'chevrons-left',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>chevrons-left</title>\n <path d=\"M7.805 10.862l-2.862-2.862 2.862-2.862c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-3.333 3.333c-0.261 0.261-0.261 0.683 0 0.943l3.333 3.333c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943zM12.471 10.862l-2.862-2.862 2.862-2.862c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-3.333 3.333c-0.261 0.261-0.261 0.683 0 0.943l3.333 3.333c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943z\"></path>\n </svg>\n "
},
{
name: 'chevrons-right',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>chevrons-right</title>\n <path d=\"M9.138 11.805l3.333-3.333c0.261-0.261 0.261-0.683 0-0.943l-3.333-3.333c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943l2.862 2.862-2.862 2.862c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0zM4.471 11.805l3.333-3.333c0.261-0.261 0.261-0.683 0-0.943l-3.333-3.333c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943l2.862 2.862-2.862 2.862c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0z\"></path>\n </svg>\n "
},
{
name: 'chevrons-up',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>chevrons-up</title>\n <path d=\"M11.805 6.862l-3.333-3.333c-0.261-0.261-0.683-0.261-0.943 0l-3.333 3.333c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0l2.862-2.862 2.862 2.862c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943zM11.805 11.529l-3.333-3.333c-0.261-0.261-0.683-0.261-0.943 0l-3.333 3.333c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0l2.862-2.862 2.862 2.862c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943z\"></path>\n </svg>\n "
},
{
name: 'chrome',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>chrome</title>\n <path d=\"M4.935 6.689l-1.496-2.587c0.101-0.119 0.208-0.233 0.319-0.344 1.087-1.087 2.585-1.757 4.243-1.757s3.156 0.671 4.243 1.757c0.277 0.277 0.528 0.582 0.747 0.909h-4.99c-0.92 0-1.755 0.374-2.357 0.976-0.298 0.298-0.54 0.652-0.709 1.046zM7.133 15.283c0.031 0.005 0.061 0.009 0.093 0.010 0.254 0.027 0.513 0.041 0.774 0.041 2.025 0 3.859-0.821 5.185-2.148s2.148-3.161 2.148-5.185c0-1.026-0.211-2.003-0.592-2.891-0.011-0.029-0.023-0.057-0.037-0.084-0.369-0.829-0.887-1.578-1.519-2.211-1.326-1.327-3.161-2.148-5.185-2.148s-3.859 0.821-5.185 2.148c-0.244 0.243-0.471 0.505-0.678 0.781-0.028 0.031-0.053 0.065-0.074 0.099-0.878 1.209-1.396 2.697-1.396 4.305 0 2.025 0.821 3.859 2.148 5.185 1.134 1.134 2.64 1.899 4.319 2.097zM8.397 11.31l-1.494 2.59c-1.217-0.225-2.305-0.817-3.145-1.657-1.087-1.087-1.757-2.585-1.757-4.243 0-0.953 0.222-1.855 0.618-2.655l2.429 4.201c0.157 0.3 0.359 0.573 0.596 0.81 0.603 0.603 1.437 0.977 2.357 0.977 0.134 0 0.267-0.008 0.397-0.023zM9.759 8.954c-0.010 0.015-0.020 0.031-0.029 0.046l-0.051 0.088c-0.077 0.117-0.165 0.227-0.264 0.326-0.363 0.363-0.862 0.586-1.415 0.586s-1.051-0.223-1.414-0.586c-0.111-0.111-0.208-0.234-0.291-0.367-0.007-0.016-0.016-0.031-0.025-0.047l-0.055-0.094c-0.138-0.272-0.216-0.58-0.216-0.906 0-0.553 0.223-1.051 0.586-1.414s0.861-0.586 1.414-0.586 1.051 0.223 1.414 0.586 0.586 0.861 0.586 1.414c0 0.345-0.087 0.671-0.241 0.954zM8.392 13.987l2.427-4.207c0.326-0.515 0.515-1.125 0.515-1.78 0-0.75-0.249-1.443-0.667-2h2.992c0.221 0.625 0.341 1.299 0.341 2 0 1.657-0.671 3.156-1.757 4.243-1 1-2.35 1.648-3.851 1.745z\"></path>\n </svg>\n "
},
{
name: 'circle',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>circle</title>\n <path d=\"M15.333 8c0-2.025-0.821-3.859-2.148-5.185s-3.161-2.148-5.185-2.148-3.859 0.821-5.185 2.148-2.148 3.161-2.148 5.185 0.821 3.859 2.148 5.185 3.161 2.148 5.185 2.148 3.859-0.821 5.185-2.148 2.148-3.161 2.148-5.185zM14 8c0 1.657-0.671 3.156-1.757 4.243s-2.585 1.757-4.243 1.757-3.156-0.671-4.243-1.757-1.757-2.585-1.757-4.243 0.671-3.156 1.757-4.243 2.585-1.757 4.243-1.757 3.156 0.671 4.243 1.757 1.757 2.585 1.757 4.243z\"></path>\n </svg>\n "
},
{
name: 'clipboard',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>clipboard</title>\n <path d=\"M4.667 3.333c0 0.368 0.15 0.702 0.391 0.943s0.575 0.391 0.943 0.391h4c0.368 0 0.702-0.15 0.943-0.391s0.391-0.575 0.391-0.943h0.667c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v9.333c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-8c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-9.333c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195zM6 0.667c-0.368 0-0.702 0.15-0.943 0.391s-0.391 0.575-0.391 0.943h-0.667c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v9.333c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h8c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-9.333c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586h-0.667c0-0.368-0.15-0.702-0.391-0.943s-0.575-0.391-0.943-0.391zM6 2h4v1.333h-4z\"></path>\n </svg>\n "
},
{
name: 'clock',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>clock</title>\n <path d=\"M15.333 8c0-2.025-0.821-3.859-2.148-5.185s-3.161-2.148-5.185-2.148-3.859 0.821-5.185 2.148-2.148 3.161-2.148 5.185 0.821 3.859 2.148 5.185 3.161 2.148 5.185 2.148 3.859-0.821 5.185-2.148 2.148-3.161 2.148-5.185zM14 8c0 1.657-0.671 3.156-1.757 4.243s-2.585 1.757-4.243 1.757-3.156-0.671-4.243-1.757-1.757-2.585-1.757-4.243 0.671-3.156 1.757-4.243 2.585-1.757 4.243-1.757 3.156 0.671 4.243 1.757 1.757 2.585 1.757 4.243zM7.333 4v4c0 0.259 0.148 0.485 0.369 0.596l2.667 1.333c0.329 0.165 0.73 0.031 0.895-0.298s0.031-0.73-0.298-0.895l-2.299-1.149v-3.588c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'cloud-drizzle',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>cloud-drizzle</title>\n <path d=\"M4.667 12.667v1.333c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-1.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667zM4.667 8.667v1.333c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-1.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667zM10 12.667v1.333c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-1.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667zM10 8.667v1.333c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-1.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667zM7.333 14v1.333c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-1.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667zM7.333 10v1.333c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-1.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667zM13.601 11.664c1.011-0.443 1.749-1.255 2.121-2.208s0.381-2.049-0.061-3.061c-0.383-0.874-1.042-1.545-1.835-1.95-0.557-0.285-1.18-0.44-1.82-0.445h-0.352c-0.483-1.371-1.429-2.472-2.61-3.169-1.322-0.779-2.943-1.055-4.547-0.641s-2.889 1.441-3.669 2.763-1.055 2.943-0.641 4.547c0.339 1.313 1.089 2.415 2.066 3.189 0.289 0.229 0.708 0.18 0.937-0.109s0.18-0.708-0.109-0.937c-0.755-0.598-1.339-1.453-1.603-2.477-0.322-1.247-0.109-2.507 0.499-3.537s1.605-1.826 2.853-2.149 2.507-0.109 3.537 0.499 1.826 1.605 2.149 2.853c0.077 0.29 0.337 0.5 0.645 0.5h0.835c0.431 0.003 0.85 0.108 1.223 0.299 0.529 0.271 0.966 0.715 1.221 1.298 0.295 0.675 0.29 1.404 0.041 2.041s-0.739 1.177-1.414 1.472c-0.337 0.148-0.491 0.541-0.343 0.878s0.541 0.491 0.878 0.343z\"></path>\n </svg>\n "
},
{
name: 'cloud-lightning',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>cloud-lightning</title>\n <path d=\"M12.799 11.92c1.082-0.22 1.974-0.859 2.539-1.711s0.805-1.923 0.585-3.005c-0.202-0.994-0.757-1.828-1.511-2.395-0.679-0.511-1.519-0.807-2.409-0.81h-0.349c-0.483-1.371-1.429-2.472-2.61-3.169-1.322-0.779-2.943-1.055-4.547-0.641s-2.889 1.441-3.669 2.763-1.055 2.943-0.641 4.547c0.398 1.542 1.362 2.789 2.612 3.577 0.095 0.060 0.193 0.117 0.291 0.172 0.322 0.179 0.728 0.062 0.906-0.26s0.062-0.728-0.26-0.906c-0.077-0.043-0.153-0.087-0.227-0.134-0.974-0.614-1.722-1.583-2.032-2.782-0.322-1.248-0.109-2.507 0.498-3.537s1.605-1.826 2.853-2.149 2.507-0.109 3.537 0.498 1.826 1.605 2.149 2.853c0.078 0.29 0.338 0.5 0.647 0.5h0.837c0.597 0.003 1.159 0.2 1.613 0.541 0.503 0.378 0.871 0.931 1.006 1.595 0.147 0.722-0.013 1.433-0.39 2.003s-0.971 0.994-1.693 1.141c-0.361 0.073-0.594 0.425-0.521 0.786s0.425 0.594 0.786 0.521zM8.112 6.963l-2.667 4c-0.204 0.307-0.121 0.72 0.185 0.925 0.115 0.077 0.245 0.113 0.37 0.112h2.754l-1.976 2.963c-0.204 0.307-0.121 0.72 0.185 0.925s0.72 0.121 0.925-0.185l2.667-4c0.071-0.104 0.113-0.232 0.113-0.37 0-0.368-0.299-0.667-0.667-0.667h-2.754l1.976-2.963c0.204-0.307 0.121-0.72-0.185-0.925s-0.72-0.121-0.925 0.185z\"></path>\n </svg>\n "
},
{
name: 'cloud-off',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>cloud-off</title>\n <path d=\"M15.687 11.56c0.431-1.017 0.408-2.113 0.024-3.061s-1.131-1.751-2.147-2.182c-0.517-0.219-1.059-0.322-1.571-0.317h-0.337c-0.413-1.187-1.174-2.173-2.141-2.873-0.865-0.625-1.896-1.021-2.991-1.125-0.367-0.035-0.692 0.234-0.727 0.601s0.234 0.692 0.601 0.727c0.857 0.081 1.662 0.391 2.337 0.878 0.855 0.619 1.501 1.524 1.781 2.623 0.075 0.291 0.335 0.503 0.645 0.503h0.847c0.327-0.003 0.687 0.063 1.037 0.211 0.678 0.287 1.175 0.821 1.432 1.455s0.271 1.363-0.016 2.041c-0.143 0.339 0.015 0.73 0.354 0.874s0.73-0.015 0.874-0.354zM3.236 4.179l8.488 8.488h-5.731c-0.64 0.007-1.269-0.115-1.85-0.351-0.954-0.389-1.779-1.090-2.313-2.056-0.623-1.128-0.731-2.401-0.401-3.549 0.288-1 0.907-1.903 1.806-2.531zM0.195 1.138l2.086 2.087c-1.054 0.8-1.784 1.904-2.133 3.117-0.425 1.475-0.287 3.113 0.515 4.563 0.687 1.242 1.751 2.146 2.977 2.646 0.745 0.303 1.55 0.457 2.367 0.449h5.993c0.326-0.001 0.645-0.040 0.945-0.113l1.917 1.917c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-14.667-14.667c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943z\"></path>\n </svg>\n "
},
{
name: 'cloud-rain',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>cloud-rain</title>\n <path d=\"M10 8.667v5.333c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-5.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667zM4.667 8.667v5.333c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-5.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667zM7.333 10v5.333c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-5.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667zM13.601 11.664c1.011-0.443 1.749-1.255 2.121-2.208s0.381-2.049-0.061-3.061c-0.383-0.874-1.042-1.545-1.835-1.95-0.557-0.285-1.18-0.44-1.82-0.445h-0.352c-0.483-1.371-1.429-2.472-2.61-3.169-1.322-0.779-2.943-1.055-4.547-0.641s-2.889 1.441-3.669 2.763-1.055 2.943-0.641 4.547c0.339 1.313 1.089 2.415 2.066 3.189 0.289 0.229 0.708 0.18 0.937-0.109s0.18-0.708-0.109-0.937c-0.755-0.598-1.339-1.453-1.603-2.477-0.322-1.247-0.109-2.507 0.499-3.537s1.605-1.826 2.853-2.149 2.507-0.109 3.537 0.499 1.826 1.605 2.149 2.853c0.077 0.29 0.337 0.5 0.645 0.5h0.835c0.431 0.003 0.85 0.108 1.223 0.299 0.529 0.271 0.966 0.715 1.221 1.298 0.295 0.675 0.29 1.404 0.041 2.041s-0.739 1.177-1.414 1.472c-0.337 0.148-0.491 0.541-0.343 0.878s0.541 0.491 0.878 0.343z\"></path>\n </svg>\n "
},
{
name: 'cloud-snow',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>cloud-snow</title>\n <path d=\"M13.601 12.331c1.011-0.443 1.749-1.255 2.121-2.208s0.381-2.049-0.061-3.061c-0.383-0.874-1.042-1.545-1.835-1.95-0.557-0.285-1.18-0.44-1.82-0.445h-0.352c-0.483-1.371-1.429-2.472-2.61-3.169-1.322-0.779-2.943-1.055-4.547-0.641s-2.889 1.441-3.669 2.763-1.055 2.943-0.641 4.547c0.339 1.313 1.089 2.415 2.066 3.189 0.289 0.229 0.708 0.18 0.937-0.109s0.18-0.708-0.109-0.937c-0.755-0.598-1.339-1.453-1.603-2.477-0.322-1.247-0.109-2.507 0.499-3.537s1.605-1.826 2.853-2.149 2.507-0.109 3.537 0.499 1.826 1.605 2.149 2.853c0.077 0.29 0.337 0.5 0.645 0.5h0.835c0.431 0.003 0.85 0.108 1.223 0.299 0.529 0.271 0.966 0.715 1.221 1.298 0.295 0.675 0.29 1.404 0.041 2.041s-0.739 1.177-1.414 1.472c-0.337 0.148-0.491 0.541-0.343 0.878s0.541 0.491 0.878 0.343zM6 10.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667 0.299 0.667 0.667 0.667 0.667-0.299 0.667-0.667zM6 13.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667 0.299 0.667 0.667 0.667 0.667-0.299 0.667-0.667zM8.667 12c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667 0.299 0.667 0.667 0.667 0.667-0.299 0.667-0.667zM8.667 14.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667 0.299 0.667 0.667 0.667 0.667-0.299 0.667-0.667zM11.333 10.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667 0.299 0.667 0.667 0.667 0.667-0.299 0.667-0.667zM11.333 13.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667 0.299 0.667 0.667 0.667 0.667-0.299 0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'cloud',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>cloud</title>\n <path d=\"M12 7.333c0.737 0 1.402 0.298 1.885 0.781s0.781 1.149 0.781 1.885-0.298 1.402-0.781 1.885-1.149 0.781-1.885 0.781h-5.997c-0.975-0.005-1.902-0.307-2.67-0.838-0.889-0.615-1.565-1.537-1.856-2.662-0.322-1.248-0.109-2.507 0.499-3.537s1.605-1.826 2.853-2.149 2.507-0.109 3.537 0.499 1.826 1.605 2.149 2.853c0.077 0.29 0.337 0.5 0.645 0.5zM12 6h-0.347c-0.483-1.371-1.429-2.472-2.61-3.169-1.322-0.779-2.943-1.055-4.547-0.641s-2.889 1.44-3.669 2.762-1.055 2.943-0.641 4.547c0.373 1.446 1.245 2.634 2.389 3.425 0.985 0.681 2.174 1.068 3.421 1.075h6.003c1.105 0 2.105-0.449 2.829-1.171s1.171-1.724 1.171-2.829-0.449-2.105-1.171-2.829-1.724-1.171-2.829-1.171z\"></path>\n </svg>\n "
},
{
name: 'code',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>code</title>\n <path d=\"M11.138 12.471l4-4c0.261-0.261 0.261-0.683 0-0.943l-4-4c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943l3.529 3.529-3.529 3.529c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0zM4.862 3.529l-4 4c-0.261 0.261-0.261 0.683 0 0.943l4 4c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-3.529-3.529 3.529-3.529c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0z\"></path>\n </svg>\n "
},
{
name: 'codepen',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>codepen</title>\n <path d=\"M3.504 8l-1.504 1.053v-2.106zM14 9.053l-1.504-1.053 1.504-1.053zM11.333 8.814l2.141 1.499-4.808 3.125v-2.758zM5.829 8l2.171-1.519 2.171 1.519-2.171 1.519zM2.525 10.313l2.141-1.499 2.667 1.867v2.758zM8.371 0.779c-0.106-0.071-0.234-0.113-0.371-0.113s-0.265 0.041-0.371 0.113l-6.646 4.32c-0.075 0.047-0.142 0.109-0.195 0.185-0.083 0.119-0.123 0.255-0.121 0.39v4.651c-0.001 0.123 0.031 0.247 0.099 0.357 0.027 0.045 0.061 0.087 0.099 0.125 0.031 0.031 0.067 0.059 0.105 0.085l0.013 0.008 6.646 4.32c0.106 0.072 0.234 0.113 0.371 0.113s0.265-0.041 0.371-0.113l6.646-4.32c0.075-0.046 0.142-0.108 0.195-0.185 0.083-0.119 0.122-0.255 0.121-0.391v-4.651c0.001-0.123-0.031-0.247-0.099-0.357-0.027-0.045-0.061-0.087-0.099-0.125-0.031-0.031-0.067-0.059-0.105-0.085l-0.013-0.008zM8.667 5.319v-2.757l4.808 3.125-2.141 1.499zM7.333 2.562v2.758l-2.667 1.867-2.141-1.499z\"></path>\n </svg>\n "
},
{
name: 'codesandbox',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>codesandbox</title>\n <path d=\"M9.627 2.83l-1.627 0.94-1.627-0.94 1.291-0.737c0.075-0.043 0.155-0.070 0.237-0.083 0.145-0.023 0.297 0.002 0.436 0.083zM2.667 9.155l1.667 0.963v1.887l-1.33-0.76c-0.074-0.043-0.138-0.099-0.19-0.163-0.093-0.115-0.147-0.258-0.147-0.415zM11.667 12.005v-1.887l1.667-0.963v1.511c-0.001 0.081-0.017 0.164-0.047 0.241-0.053 0.137-0.15 0.256-0.284 0.333zM12.641 4.552l-4.641 2.685-4.641-2.685 1.673-0.957 2.634 1.522c0.213 0.123 0.465 0.115 0.667 0l2.633-1.521zM7.684 15.307c0.094 0.051 0.202 0.079 0.316 0.079 0.115 0 0.224-0.029 0.319-0.081 0.237-0.039 0.467-0.12 0.678-0.24l2.132-1.219c0.145-0.029 0.274-0.105 0.369-0.211l2.166-1.238c0.412-0.238 0.707-0.599 0.866-1.009 0.089-0.228 0.135-0.471 0.137-0.723v-5.333c0-0.319-0.075-0.621-0.209-0.889-0.015-0.047-0.035-0.093-0.061-0.138-0.031-0.053-0.067-0.099-0.108-0.14-0.021-0.029-0.043-0.057-0.065-0.085-0.153-0.191-0.341-0.352-0.554-0.477l-2.172-1.241c-0.098-0.111-0.229-0.184-0.369-0.211l-2.131-1.218c-0.407-0.235-0.867-0.31-1.302-0.243-0.243 0.038-0.477 0.119-0.692 0.242l-2.133 1.219c-0.14 0.027-0.271 0.1-0.369 0.211l-2.166 1.238c-0.255 0.147-0.466 0.342-0.627 0.567-0.040 0.040-0.076 0.087-0.106 0.138-0.026 0.045-0.047 0.092-0.061 0.14-0.027 0.054-0.051 0.109-0.072 0.164-0.088 0.229-0.134 0.472-0.136 0.719v5.338c0.001 0.473 0.165 0.909 0.443 1.252 0.153 0.191 0.341 0.352 0.554 0.477l2.172 1.241c0.095 0.107 0.223 0.183 0.369 0.211l2.131 1.218c0.216 0.125 0.447 0.205 0.681 0.241zM7.333 8.391v5.327l-1.667-0.952v-3.033c0-0.245-0.133-0.46-0.333-0.577l-2.667-1.541v-1.923zM8.667 13.719v-5.327l4.667-2.699v1.923l-2.667 1.541c-0.213 0.123-0.332 0.345-0.333 0.577v3.033z\"></path>\n </svg>\n "
},
{
name: 'coffee',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>coffee</title>\n <path d=\"M12.667 10v-4c0.553 0 1.051 0.223 1.414 0.586s0.586 0.861 0.586 1.414-0.223 1.051-0.586 1.414-0.861 0.586-1.414 0.586zM1.333 4.667c-0.368 0-0.667 0.299-0.667 0.667v6c0 0.92 0.374 1.755 0.976 2.357s1.437 0.976 2.357 0.976h5.333c0.92 0 1.755-0.374 2.357-0.976s0.976-1.437 0.976-2.357c0.92 0 1.755-0.374 2.357-0.976s0.976-1.437 0.976-2.357-0.374-1.755-0.976-2.357-1.437-0.976-2.357-0.976h-0.667zM2 6h9.333v5.333c0 0.553-0.223 1.051-0.586 1.414s-0.861 0.586-1.414 0.586h-5.333c-0.553 0-1.051-0.223-1.414-0.586s-0.586-0.861-0.586-1.414zM3.333 0.667v2c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-2c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667zM6 0.667v2c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-2c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667zM8.667 0.667v2c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-2c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'columns',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>columns</title>\n <path d=\"M7.333 13.333h-4c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-9.333c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195h4zM8 1.333c-0.368 0-0.667 0.299-0.667 0.667v0.667h1.333v-0.667c0-0.368-0.299-0.667-0.667-0.667zM8.667 2.667h4c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v9.333c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-4zM8 1.333c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667 0.667-0.299 0.667-0.667-0.299-0.667-0.667-0.667h-4.667c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v9.333c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h4.667c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667-0.667 0.299-0.667 0.667 0.299 0.667 0.667 0.667h4.667c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-9.333c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586z\"></path>\n </svg>\n "
},
{
name: 'command',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>command</title>\n <path d=\"M9.333 6.667v2.667h-2.667v-2.667zM12 2.667c0.369 0 0.701 0.149 0.943 0.391s0.391 0.574 0.391 0.943-0.149 0.701-0.391 0.943-0.574 0.391-0.943 0.391h-1.333v-1.333c0-0.369 0.149-0.701 0.391-0.943s0.574-0.391 0.943-0.391zM9.333 5.333h-2.667v-1.333c0-0.736-0.299-1.404-0.781-1.885s-1.149-0.781-1.885-0.781-1.404 0.299-1.885 0.781-0.781 1.149-0.781 1.885 0.299 1.404 0.781 1.885 1.149 0.781 1.885 0.781h1.333v2.667h-1.333c-0.736 0-1.404 0.299-1.885 0.781s-0.781 1.149-0.781 1.885 0.299 1.404 0.781 1.885 1.149 0.781 1.885 0.781 1.404-0.299 1.885-0.781 0.781-1.149 0.781-1.885v-1.333h2.667v1.333c0 0.736 0.299 1.404 0.781 1.885s1.149 0.781 1.885 0.781 1.404-0.299 1.885-0.781 0.781-1.149 0.781-1.885-0.299-1.404-0.781-1.885-1.149-0.781-1.885-0.781h-1.333v-2.667h1.333c0.736 0 1.404-0.299 1.885-0.781s0.781-1.149 0.781-1.885-0.299-1.404-0.781-1.885-1.149-0.781-1.885-0.781-1.404 0.299-1.885 0.781-0.781 1.149-0.781 1.885zM5.333 5.333h-1.333c-0.369 0-0.701-0.149-0.943-0.391s-0.391-0.574-0.391-0.943 0.149-0.701 0.391-0.943 0.574-0.391 0.943-0.391 0.701 0.149 0.943 0.391 0.391 0.574 0.391 0.943zM5.333 10.667v1.333c0 0.369-0.149 0.701-0.391 0.943s-0.574 0.391-0.943 0.391-0.701-0.149-0.943-0.391-0.391-0.574-0.391-0.943 0.149-0.701 0.391-0.943 0.574-0.391 0.943-0.391zM10.667 10.667h1.333c0.369 0 0.701 0.149 0.943 0.391s0.391 0.574 0.391 0.943-0.149 0.701-0.391 0.943-0.574 0.391-0.943 0.391-0.701-0.149-0.943-0.391-0.391-0.574-0.391-0.943z\"></path>\n </svg>\n "
},
{
name: 'compass',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>compass</title>\n <path d=\"M15.333 8c0-2.025-0.821-3.859-2.148-5.185s-3.161-2.148-5.185-2.148-3.859 0.821-5.185 2.148-2.148 3.161-2.148 5.185 0.821 3.859 2.148 5.185 3.161 2.148 5.185 2.148 3.859-0.821 5.185-2.148 2.148-3.161 2.148-5.185zM14 8c0 1.657-0.671 3.156-1.757 4.243s-2.585 1.757-4.243 1.757-3.156-0.671-4.243-1.757-1.757-2.585-1.757-4.243 0.671-3.156 1.757-4.243 2.585-1.757 4.243-1.757 3.156 0.671 4.243 1.757 1.757 2.585 1.757 4.243zM11.459 5.384c0.044-0.131 0.048-0.279 0-0.421-0.117-0.349-0.494-0.538-0.843-0.421l-4.24 1.413c-0.193 0.065-0.353 0.215-0.421 0.421l-1.413 4.24c-0.044 0.131-0.048 0.279 0 0.421 0.117 0.349 0.494 0.538 0.843 0.421l4.24-1.413c0.193-0.065 0.353-0.215 0.421-0.421zM9.773 6.227l-0.887 2.659-2.659 0.887 0.886-2.659z\"></path>\n </svg>\n "
},
{
name: 'copy',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>copy</title>\n <path d=\"M7.333 5.333c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v6c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h6c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-6c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586zM7.333 6.667h6c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v6c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-6c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-6c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195zM3.333 9.333h-0.667c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-6c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195h6c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v0.667c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-0.667c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586h-6c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v6c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h0.667c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'corner-down-left',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>corner-down-left</title>\n <path d=\"M12.667 2.667v4.667c0 0.553-0.223 1.051-0.586 1.414s-0.861 0.586-1.414 0.586h-6.391l2.195-2.195c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-3.333 3.333c-0.064 0.064-0.112 0.137-0.145 0.216-0.1 0.241-0.052 0.53 0.145 0.727l3.333 3.333c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-2.195-2.195h6.391c0.92 0 1.755-0.374 2.357-0.976s0.976-1.437 0.976-2.357v-4.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'corner-down-right',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>corner-down-right</title>\n <path d=\"M2 2.667v4.667c0 0.92 0.374 1.755 0.976 2.357s1.437 0.976 2.357 0.976h6.391l-2.195 2.195c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0l3.333-3.333c0.061-0.061 0.111-0.135 0.145-0.216s0.051-0.169 0.051-0.255c0-0.171-0.065-0.341-0.195-0.471l-3.333-3.333c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943l2.195 2.195h-6.391c-0.553 0-1.051-0.223-1.414-0.586s-0.586-0.861-0.586-1.414v-4.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'corner-left-down',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>corner-left-down</title>\n <path d=\"M13.333 2h-4.667c-0.92 0-1.755 0.374-2.357 0.976s-0.976 1.437-0.976 2.357v6.391l-2.195-2.195c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943l3.333 3.333c0.064 0.064 0.137 0.112 0.216 0.145s0.165 0.051 0.255 0.051 0.177-0.018 0.255-0.051c0.079-0.033 0.152-0.081 0.216-0.145l3.333-3.333c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-2.195 2.195v-6.391c0-0.553 0.223-1.051 0.586-1.414s0.861-0.586 1.414-0.586h4.667c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'corner-left-up',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>corner-left-up</title>\n <path d=\"M13.333 12.667h-4.667c-0.553 0-1.051-0.223-1.414-0.586s-0.586-0.861-0.586-1.414v-6.391l2.195 2.195c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-3.333-3.333c-0.064-0.064-0.137-0.112-0.216-0.145s-0.165-0.051-0.255-0.051-0.177 0.018-0.255 0.051c-0.079 0.033-0.152 0.081-0.216 0.145l-3.333 3.333c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0l2.195-2.195v6.391c0 0.92 0.374 1.755 0.976 2.357s1.437 0.976 2.357 0.976h4.667c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'corner-right-down',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>corner-right-down</title>\n <path d=\"M2.667 3.333h4.667c0.553 0 1.051 0.223 1.414 0.586s0.586 0.861 0.586 1.414v6.391l-2.195-2.195c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943l3.333 3.333c0.064 0.064 0.137 0.112 0.216 0.145s0.165 0.051 0.255 0.051c0.087 0 0.174-0.017 0.255-0.051 0.079-0.033 0.152-0.081 0.216-0.145l3.333-3.333c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-2.195 2.195v-6.391c0-0.92-0.374-1.755-0.976-2.357s-1.437-0.976-2.357-0.976h-4.667c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'corner-right-up',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>corner-right-up</title>\n <path d=\"M2.667 14h4.667c0.92 0 1.755-0.374 2.357-0.976s0.976-1.437 0.976-2.357v-6.391l2.195 2.195c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-3.333-3.333c-0.064-0.064-0.137-0.112-0.216-0.145-0.241-0.1-0.53-0.052-0.727 0.145l-3.333 3.333c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0l2.195-2.195v6.391c0 0.553-0.223 1.051-0.586 1.414s-0.861 0.586-1.414 0.586h-4.667c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'corner-up-left',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>corner-up-left</title>\n <path d=\"M14 13.333v-4.667c0-0.92-0.374-1.755-0.976-2.357s-1.437-0.976-2.357-0.976h-6.391l2.195-2.195c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-3.333 3.333c-0.064 0.064-0.112 0.137-0.145 0.216s-0.051 0.165-0.051 0.255 0.018 0.177 0.051 0.255c0.033 0.079 0.081 0.152 0.145 0.216l3.333 3.333c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-2.195-2.195h6.391c0.553 0 1.051 0.223 1.414 0.586s0.586 0.861 0.586 1.414v4.667c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'corner-up-right',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>corner-up-right</title>\n <path d=\"M3.333 13.333v-4.667c0-0.553 0.223-1.051 0.586-1.414s0.861-0.586 1.414-0.586h6.391l-2.195 2.195c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0l3.333-3.333c0.064-0.064 0.112-0.137 0.145-0.216s0.051-0.165 0.051-0.255-0.018-0.177-0.051-0.255c-0.033-0.079-0.081-0.152-0.145-0.216l-3.333-3.333c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943l2.195 2.195h-6.391c-0.92 0-1.755 0.374-2.357 0.976s-0.976 1.437-0.976 2.357v4.667c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'cpu',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>cpu</title>\n <path d=\"M4 3.333h8c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v8c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-8c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-8c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195zM6 5.333c-0.368 0-0.667 0.299-0.667 0.667v4c0 0.368 0.299 0.667 0.667 0.667h4c0.368 0 0.667-0.299 0.667-0.667v-4c0-0.368-0.299-0.667-0.667-0.667zM6.667 6.667h2.667v2.667h-2.667zM0.667 10h1.333v2c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h1.333v1.333c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-1.333h2.667v1.333c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-1.333h1.333c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-2h1.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-1.333v-2h1.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-1.333v-1.333c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586h-1.333v-1.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v1.333h-2.667v-1.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v1.333h-1.333c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v1.333h-1.333c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h1.333v2h-1.333c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'credit-card',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>credit-card</title>\n <path d=\"M2 2c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v8c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h12c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-8c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586zM14.667 6h-13.333v-2c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195h12c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471zM1.333 7.333h13.333v4.667c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-12c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471z\"></path>\n </svg>\n "
},
{
name: 'crop',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>crop</title>\n <path d=\"M4.718 4.718l5.955-0.051c0.179 0 0.344 0.074 0.465 0.195s0.195 0.287 0.195 0.471v6h-6c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.465zM0.673 4.753l2.712-0.023-0.051 5.931c0 0.558 0.225 1.059 0.586 1.42s0.862 0.586 1.414 0.586h6v2.667c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-2.667h2.667c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-2.667v-6c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.42-0.586l-5.931 0.051 0.023-2.712c0.003-0.369-0.293-0.669-0.661-0.673s-0.669 0.293-0.673 0.661l-0.024 2.735-2.735 0.024c-0.368 0.003-0.664 0.304-0.661 0.673s0.304 0.664 0.673 0.661z\"></path>\n </svg>\n "
},
{
name: 'crosshair',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>crosshair</title>\n <path d=\"M15.333 8c0-2.025-0.821-3.859-2.148-5.185s-3.161-2.148-5.185-2.148-3.859 0.821-5.185 2.148-2.148 3.161-2.148 5.185 0.821 3.859 2.148 5.185 3.161 2.148 5.185 2.148 3.859-0.821 5.185-2.148 2.148-3.161 2.148-5.185zM8.667 13.963v-1.963c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v1.963c-1.391-0.153-2.637-0.782-3.576-1.721s-1.567-2.185-1.721-3.576h1.963c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-1.963c0.153-1.391 0.782-2.637 1.721-3.576s2.185-1.567 3.576-1.721v1.963c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-1.963c1.391 0.153 2.637 0.782 3.576 1.721s1.567 2.185 1.721 3.576h-1.963c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h1.963c-0.153 1.391-0.782 2.637-1.721 3.576s-2.185 1.567-3.576 1.721z\"></path>\n </svg>\n "
},
{
name: 'database',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>database</title>\n <path d=\"M2.667 3.335c0 0 0.002-0.063 0.142-0.192 0.163-0.15 0.447-0.322 0.871-0.487 0.999-0.39 2.547-0.656 4.321-0.656s3.321 0.266 4.321 0.656c0.423 0.165 0.707 0.337 0.871 0.487 0.139 0.128 0.141 0.189 0.141 0.192 0 0-0.002 0.061-0.142 0.189-0.163 0.15-0.447 0.322-0.871 0.487-0.999 0.39-2.547 0.656-4.321 0.656s-3.321-0.266-4.321-0.656c-0.423-0.165-0.707-0.337-0.871-0.487-0.139-0.128-0.141-0.189-0.141-0.189zM13.333 9.688v2.981l-0.011 0.033c-0.016 0.032-0.053 0.088-0.133 0.161-0.163 0.15-0.447 0.321-0.869 0.485-0.997 0.388-2.54 0.652-4.321 0.652s-3.323-0.264-4.32-0.652c-0.422-0.164-0.705-0.335-0.869-0.485-0.080-0.073-0.117-0.129-0.133-0.161l-0.012-0.035v-2.979c0.167 0.085 0.345 0.164 0.529 0.236 1.198 0.466 2.918 0.743 4.804 0.743s3.606-0.277 4.804-0.743c0.185-0.072 0.362-0.15 0.529-0.236zM13.333 5.018v2.975c0 0.003 0 0.005 0 0.009l-0.011 0.033c-0.016 0.032-0.053 0.088-0.133 0.161-0.163 0.15-0.447 0.321-0.869 0.485-0.997 0.388-2.54 0.652-4.321 0.652s-3.323-0.264-4.32-0.652c-0.422-0.164-0.705-0.335-0.869-0.485-0.080-0.073-0.117-0.129-0.133-0.161l-0.012-0.033v-2.984c0.167 0.085 0.344 0.163 0.528 0.235 1.201 0.468 2.925 0.747 4.805 0.747s3.605-0.279 4.805-0.747c0.184-0.072 0.361-0.15 0.528-0.235zM1.333 3.333v9.333c0 0.039 0.001 0.077 0.005 0.116 0.038 0.443 0.283 0.798 0.571 1.063 0.332 0.305 0.783 0.549 1.287 0.745 1.198 0.466 2.918 0.743 4.804 0.743s3.606-0.277 4.804-0.743c0.503-0.196 0.955-0.441 1.287-0.745 0.288-0.265 0.533-0.619 0.571-1.063 0.003-0.039 0.005-0.077 0.005-0.116v-9.333c0-0.037-0.001-0.075-0.005-0.112-0.037-0.443-0.281-0.797-0.568-1.060-0.332-0.306-0.785-0.551-1.289-0.748-1.201-0.468-2.925-0.747-4.805-0.747s-3.605 0.279-4.805 0.747c-0.504 0.197-0.957 0.443-1.289 0.748-0.287 0.263-0.531 0.618-0.568 1.060-0.003 0.037-0.005 0.075-0.005 0.112z\"></path>\n </svg>\n "
},
{
name: 'delete',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>delete</title>\n <path d=\"M14 3.333c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v8c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-8.364l-4.083-4.667 4.083-4.667zM14 2h-8.667c-0.2 0-0.379 0.088-0.502 0.227l-4.667 5.333c-0.222 0.253-0.217 0.628 0 0.878l4.667 5.333c0.132 0.151 0.316 0.227 0.502 0.228h8.667c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-8c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586zM7.529 6.471l1.529 1.529-1.529 1.529c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0l1.529-1.529 1.529 1.529c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-1.529-1.529 1.529-1.529c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-1.529 1.529-1.529-1.529c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943z\"></path>\n </svg>\n "
},
{
name: 'disc',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>disc</title>\n <path d=\"M15.333 8c0-2.025-0.821-3.859-2.148-5.185s-3.161-2.148-5.185-2.148-3.859 0.821-5.185 2.148-2.148 3.161-2.148 5.185 0.821 3.859 2.148 5.185 3.161 2.148 5.185 2.148 3.859-0.821 5.185-2.148 2.148-3.161 2.148-5.185zM14 8c0 1.657-0.671 3.156-1.757 4.243s-2.585 1.757-4.243 1.757-3.156-0.671-4.243-1.757-1.757-2.585-1.757-4.243 0.671-3.156 1.757-4.243 2.585-1.757 4.243-1.757 3.156 0.671 4.243 1.757 1.757 2.585 1.757 4.243zM10.667 8c0-0.736-0.299-1.404-0.781-1.885s-1.149-0.781-1.885-0.781-1.404 0.299-1.885 0.781-0.781 1.149-0.781 1.885 0.299 1.404 0.781 1.885 1.149 0.781 1.885 0.781 1.404-0.299 1.885-0.781 0.781-1.149 0.781-1.885zM9.333 8c0 0.369-0.149 0.701-0.391 0.943s-0.574 0.391-0.943 0.391-0.701-0.149-0.943-0.391-0.391-0.574-0.391-0.943 0.149-0.701 0.391-0.943 0.574-0.391 0.943-0.391 0.701 0.149 0.943 0.391 0.391 0.574 0.391 0.943z\"></path>\n </svg>\n "
},
{
name: 'dollar-sign',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>dollar-sign</title>\n <path d=\"M7.333 7.333h-1c-0.461 0-0.876-0.186-1.179-0.488s-0.488-0.718-0.488-1.179 0.186-0.876 0.488-1.179 0.718-0.488 1.179-0.488h1zM8.667 8.667h1c0.461 0 0.876 0.186 1.179 0.488s0.488 0.718 0.488 1.179-0.186 0.876-0.488 1.179-0.718 0.488-1.179 0.488h-1zM11.333 2.667h-2.667v-2c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v2h-1c-0.828 0-1.579 0.337-2.121 0.879s-0.879 1.293-0.879 2.121 0.337 1.579 0.879 2.121 1.293 0.879 2.121 0.879h1v3.333h-3.333c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h3.333v2c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-2h1c0.828 0 1.579-0.337 2.121-0.879s0.879-1.293 0.879-2.121-0.337-1.579-0.879-2.121-1.293-0.879-2.121-0.879h-1v-3.333h2.667c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'download-cloud',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>download-cloud</title>\n <path d=\"M7.333 8v4.391l-1.529-1.529c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943l2.667 2.667c0.061 0.061 0.135 0.111 0.216 0.145 0.163 0.067 0.347 0.067 0.511 0 0.079-0.033 0.152-0.081 0.216-0.145l2.667-2.667c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-1.529 1.529v-4.391c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667zM14.303 12.605c0.903-0.635 1.464-1.578 1.64-2.585s-0.033-2.084-0.669-2.987c-0.551-0.783-1.332-1.309-2.191-1.549-0.351-0.098-0.715-0.149-1.081-0.15h-0.349c-0.481-1.372-1.425-2.473-2.605-3.172-1.321-0.781-2.941-1.059-4.546-0.648s-2.892 1.437-3.673 2.757-1.059 2.941-0.648 4.546c0.247 0.964 0.717 1.817 1.322 2.489 0.247 0.273 0.668 0.296 0.941 0.049s0.296-0.668 0.049-0.941c-0.461-0.513-0.828-1.173-1.022-1.929-0.321-1.249-0.105-2.507 0.504-3.536s1.608-1.824 2.857-2.144 2.507-0.105 3.536 0.504 1.824 1.608 2.144 2.857c0.077 0.29 0.337 0.501 0.647 0.501h0.837c0.247 0.001 0.491 0.035 0.727 0.101 0.574 0.161 1.093 0.51 1.46 1.032 0.424 0.603 0.563 1.319 0.446 1.992s-0.491 1.3-1.093 1.723c-0.301 0.212-0.373 0.627-0.162 0.929s0.627 0.373 0.929 0.162z\"></path>\n </svg>\n "
},
{
name: 'download',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>download</title>\n <path d=\"M13.333 10v2.667c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-9.333c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-2.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v2.667c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h9.333c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-2.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667zM8.667 8.391v-6.391c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v6.391l-2.195-2.195c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943l3.333 3.333c0.061 0.061 0.135 0.111 0.216 0.145s0.169 0.051 0.255 0.051c0.171 0 0.341-0.065 0.471-0.195l3.333-3.333c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0z\"></path>\n </svg>\n "
},
{
name: 'droplet',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>droplet</title>\n <path d=\"M8.471 1.322c-0.261-0.261-0.683-0.26-0.943 0.001l-3.769 3.775c-1.171 1.172-1.757 2.709-1.756 4.243s0.587 3.071 1.759 4.242 2.709 1.757 4.243 1.756 3.071-0.587 4.242-1.759 1.757-2.709 1.756-4.243-0.587-3.071-1.759-4.242zM8.001 2.737l3.301 3.301c0.912 0.911 1.368 2.104 1.368 3.299s-0.455 2.389-1.366 3.3-2.104 1.367-3.299 1.368-2.389-0.455-3.3-1.366-1.367-2.104-1.368-3.299 0.455-2.389 1.366-3.3z\"></path>\n </svg>\n "
},
{
name: 'edit-2',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>edit-2</title>\n <path d=\"M10.862 1.529l-9 9c-0.078 0.077-0.14 0.179-0.172 0.296l-1 3.667c-0.031 0.109-0.033 0.231 0 0.351 0.097 0.355 0.463 0.565 0.819 0.468l3.667-1c0.106-0.028 0.21-0.086 0.296-0.172l9-9c0.498-0.498 0.747-1.153 0.747-1.805s-0.249-1.307-0.747-1.805-1.153-0.747-1.805-0.747-1.307 0.249-1.805 0.747zM11.805 2.471c0.238-0.238 0.549-0.357 0.862-0.357s0.624 0.119 0.862 0.357 0.357 0.549 0.357 0.861-0.119 0.624-0.357 0.862l-8.875 8.875-2.371 0.647 0.647-2.37z\"></path>\n </svg>\n "
},
{
name: 'edit-3',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>edit-3</title>\n <path d=\"M8 14h6c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-6c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667zM10.529 1.862l-8.333 8.333c-0.081 0.081-0.145 0.187-0.175 0.31l-0.667 2.667c-0.026 0.1-0.028 0.212 0 0.323 0.089 0.357 0.451 0.575 0.809 0.485l2.667-0.667c0.111-0.027 0.22-0.086 0.31-0.175l8.333-8.333c0.406-0.406 0.609-0.94 0.609-1.471s-0.203-1.065-0.609-1.471-0.941-0.61-1.472-0.61-1.065 0.203-1.471 0.609zM11.471 2.805c0.146-0.146 0.336-0.219 0.529-0.219s0.383 0.073 0.529 0.219 0.219 0.336 0.219 0.529-0.073 0.383-0.219 0.529l-8.203 8.203-1.41 0.353 0.353-1.41z\"></path>\n </svg>\n "
},
{
name: 'edit',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>edit</title>\n <path d=\"M7.333 2h-4.667c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v9.333c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h9.333c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-4.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v4.667c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-9.333c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-9.333c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195h4.667c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM11.862 1.195l-6.333 6.333c-0.081 0.081-0.145 0.187-0.175 0.31l-0.667 2.667c-0.026 0.1-0.028 0.212 0 0.323 0.089 0.357 0.451 0.575 0.809 0.485l2.667-0.667c0.111-0.027 0.22-0.086 0.31-0.175l6.333-6.333c0.406-0.406 0.609-0.94 0.609-1.471s-0.203-1.065-0.609-1.471-0.941-0.61-1.472-0.61-1.065 0.203-1.471 0.609zM12.805 2.138c0.146-0.146 0.336-0.219 0.529-0.219s0.383 0.073 0.529 0.219 0.219 0.336 0.219 0.529-0.073 0.383-0.219 0.529l-6.203 6.203-1.409 0.353 0.353-1.409z\"></path>\n </svg>\n "
},
{
name: 'external-link',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>external-link</title>\n <path d=\"M11.333 8.667v4c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-7.333c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-7.333c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195h4c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-4c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v7.333c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h7.333c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-4c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667zM7.138 9.805l6.195-6.195v2.391c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-4c0-0.091-0.018-0.177-0.051-0.255s-0.081-0.152-0.144-0.215c-0.001-0.001-0.001-0.001-0.001-0.001-0.061-0.061-0.135-0.111-0.215-0.144-0.079-0.033-0.165-0.051-0.255-0.051h-4c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h2.391l-6.195 6.195c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0z\"></path>\n </svg>\n "
},
{
name: 'eye-off',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>eye-off</title>\n <path d=\"M6.752 3.476c0.434-0.101 0.863-0.147 1.24-0.143 1.172 0 2.206 0.373 3.105 0.929 0.746 0.461 1.393 1.045 1.929 1.632 0.429 0.47 0.783 0.937 1.057 1.334 0.218 0.317 0.38 0.583 0.489 0.77-0.364 0.635-0.773 1.214-1.185 1.695-0.239 0.279-0.207 0.701 0.072 0.94s0.701 0.207 0.94-0.072c0.545-0.636 1.074-1.408 1.522-2.247 0.099-0.186 0.109-0.412 0.009-0.613 0 0-0.264-0.526-0.747-1.229-0.301-0.437-0.692-0.955-1.171-1.479-0.596-0.653-1.336-1.325-2.213-1.867-1.063-0.657-2.337-1.127-3.791-1.127-0.489-0.006-1.027 0.053-1.56 0.177-0.359 0.084-0.581 0.443-0.497 0.801s0.443 0.581 0.801 0.497zM6.685 7.628l1.687 1.687c-0.121 0.041-0.248 0.063-0.375 0.067-0.342 0.012-0.687-0.106-0.956-0.357s-0.411-0.587-0.423-0.929c-0.005-0.159 0.017-0.317 0.067-0.469zM3.989 4.931l1.702 1.702c-0.289 0.461-0.424 0.989-0.405 1.511 0.024 0.681 0.309 1.355 0.847 1.857s1.231 0.738 1.912 0.714c0.461-0.016 0.919-0.152 1.323-0.405l1.548 1.548c-0.919 0.533-1.93 0.797-2.923 0.809-1.156 0-2.19-0.373-3.089-0.929-0.746-0.461-1.393-1.045-1.929-1.632-0.429-0.47-0.783-0.937-1.057-1.334-0.217-0.317-0.38-0.582-0.488-0.769 0.7-1.215 1.584-2.253 2.561-3.071zM0.195 1.138l2.847 2.847c-1.154 0.986-2.179 2.239-2.963 3.699-0.099 0.186-0.109 0.413-0.009 0.613 0 0 0.264 0.526 0.747 1.229 0.301 0.437 0.692 0.955 1.171 1.479 0.596 0.653 1.336 1.325 2.213 1.867 1.063 0.657 2.337 1.128 3.807 1.128 1.329-0.016 2.679-0.401 3.877-1.173l2.977 2.977c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-5.917-5.917c-0.001-0.001-0.003-0.003-0.005-0.005l-2.806-2.807c-0.005-0.005-0.011-0.011-0.016-0.016l-5.923-5.922c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943z\"></path>\n </svg>\n "
},
{
name: 'eye',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>eye</title>\n <path d=\"M0.071 7.702c-0.091 0.183-0.097 0.402 0 0.596 0 0 0.264 0.526 0.747 1.229 0.301 0.437 0.692 0.955 1.171 1.479 0.596 0.653 1.336 1.325 2.213 1.867 1.063 0.657 2.337 1.128 3.799 1.128s2.735-0.471 3.799-1.128c0.877-0.542 1.617-1.214 2.213-1.867 0.479-0.524 0.871-1.041 1.171-1.479 0.483-0.703 0.747-1.229 0.747-1.229 0.091-0.183 0.097-0.402 0-0.596 0 0-0.264-0.526-0.747-1.229-0.301-0.437-0.692-0.955-1.171-1.479-0.596-0.653-1.336-1.325-2.213-1.867-1.063-0.657-2.337-1.128-3.799-1.128s-2.735 0.471-3.799 1.128c-0.877 0.542-1.617 1.214-2.213 1.867-0.479 0.524-0.871 1.041-1.171 1.479-0.483 0.703-0.747 1.229-0.747 1.229zM1.427 8c0.109-0.187 0.271-0.454 0.489-0.772 0.273-0.397 0.627-0.864 1.057-1.334 0.537-0.587 1.183-1.171 1.929-1.632 0.9-0.556 1.934-0.929 3.098-0.929s2.198 0.373 3.097 0.929c0.746 0.461 1.393 1.045 1.929 1.632 0.429 0.47 0.783 0.937 1.057 1.334 0.219 0.318 0.381 0.584 0.489 0.772-0.109 0.187-0.271 0.454-0.489 0.772-0.273 0.397-0.627 0.864-1.057 1.334-0.537 0.587-1.183 1.171-1.929 1.632-0.899 0.556-1.933 0.929-3.097 0.929s-2.198-0.373-3.097-0.929c-0.746-0.461-1.393-1.045-1.929-1.632-0.429-0.47-0.783-0.937-1.057-1.334-0.219-0.318-0.381-0.585-0.49-0.772zM10.667 8c0-0.736-0.299-1.404-0.781-1.885s-1.149-0.781-1.885-0.781-1.404 0.299-1.885 0.781-0.781 1.149-0.781 1.885 0.299 1.404 0.781 1.885 1.149 0.781 1.885 0.781 1.404-0.299 1.885-0.781 0.781-1.149 0.781-1.885zM9.333 8c0 0.369-0.149 0.701-0.391 0.943s-0.574 0.391-0.943 0.391-0.701-0.149-0.943-0.391-0.391-0.574-0.391-0.943 0.149-0.701 0.391-0.943 0.574-0.391 0.943-0.391 0.701 0.149 0.943 0.391 0.391 0.574 0.391 0.943z\"></path>\n </svg>\n "
},
{
name: 'facebook',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>facebook</title>\n <path d=\"M11.333 2v1.333h-1.333c-0.368 0-0.702 0.15-0.943 0.391s-0.391 0.575-0.391 0.943v2c0 0.368 0.299 0.667 0.667 0.667h1.813l-0.333 1.333h-1.479c-0.368 0-0.667 0.299-0.667 0.667v4.667h-1.333v-4.667c0-0.368-0.299-0.667-0.667-0.667h-1.333v-1.333h1.333c0.368 0 0.667-0.299 0.667-0.667v-2c0-0.737 0.298-1.402 0.781-1.885s1.149-0.781 1.885-0.781zM12 0.667h-2c-1.105 0-2.105 0.449-2.829 1.171s-1.171 1.724-1.171 2.829v1.333h-1.333c-0.368 0-0.667 0.299-0.667 0.667v2.667c0 0.368 0.299 0.667 0.667 0.667h1.333v4.667c0 0.368 0.299 0.667 0.667 0.667h2.667c0.368 0 0.667-0.299 0.667-0.667v-4.667h1.333c0.311 0 0.572-0.213 0.647-0.505l0.667-2.667c0.089-0.357-0.128-0.719-0.485-0.809-0.055-0.014-0.111-0.021-0.161-0.020h-2v-1.333h2c0.368 0 0.667-0.299 0.667-0.667v-2.667c0-0.368-0.299-0.667-0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'fast-forward',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>fast-forward</title>\n <path d=\"M9.333 11.303v-6.607l4.247 3.303zM2 11.303v-6.607l4.247 3.303zM1.743 13.193l6-4.667c0.167-0.13 0.255-0.324 0.257-0.52v4.661c0 0.368 0.299 0.667 0.667 0.667 0.155 0 0.297-0.053 0.409-0.141l6-4.667c0.291-0.226 0.343-0.645 0.117-0.935-0.036-0.046-0.077-0.086-0.117-0.117l-6-4.667c-0.291-0.226-0.709-0.174-0.935 0.117-0.095 0.123-0.141 0.267-0.141 0.409v4.66c-0.001-0.141-0.047-0.283-0.141-0.403-0.036-0.046-0.077-0.086-0.117-0.117l-6-4.667c-0.291-0.226-0.709-0.174-0.935 0.117-0.095 0.123-0.141 0.267-0.141 0.409v9.333c0 0.368 0.299 0.667 0.667 0.667 0.155 0 0.297-0.053 0.409-0.141z\"></path>\n </svg>\n "
},
{
name: 'feather',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>feather</title>\n <path d=\"M12.074 10.528c0.046-0.035 0.087-0.077 0.122-0.123l1.769-1.774c0.911-0.911 1.367-2.107 1.367-3.301s-0.456-2.39-1.367-3.301-2.107-1.367-3.301-1.367-2.39 0.456-3.301 1.367l-4.5 4.5c-0.13 0.13-0.195 0.301-0.195 0.471v5.391l-1.805 1.805c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0l1.805-1.805h5.391c0.185 0 0.351-0.075 0.472-0.196zM6.276 10.667h3.777l-1.329 1.333h-3.781zM11.382 9.333h-3.773l3.529-3.529c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-6.195 6.195v-3.781l4.305-4.305c0.651-0.651 1.504-0.977 2.359-0.977s1.707 0.325 2.359 0.977 0.977 1.504 0.977 2.359-0.325 1.707-0.977 2.359z\"></path>\n </svg>\n "
},
{
name: 'figma',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>figma</title>\n <path d=\"M8.667 8.333c0-0.461 0.186-0.876 0.488-1.179s0.718-0.488 1.179-0.488 0.876 0.186 1.179 0.488 0.488 0.718 0.488 1.179-0.186 0.876-0.488 1.179-0.718 0.488-1.179 0.488-0.876-0.186-1.179-0.488-0.488-0.718-0.488-1.179zM5.667 5.333c-0.461 0-0.876-0.186-1.179-0.488s-0.488-0.718-0.488-1.179 0.186-0.876 0.488-1.179 0.718-0.488 1.179-0.488h1.667v3.333zM8.667 5.333v-3.333h1.667c0.461 0 0.876 0.186 1.179 0.488s0.488 0.718 0.488 1.179-0.186 0.876-0.488 1.179-0.718 0.488-1.179 0.488zM7.333 11.333v1.667c0 0.461-0.186 0.876-0.488 1.179s-0.718 0.488-1.179 0.488-0.876-0.186-1.179-0.488-0.488-0.718-0.488-1.179 0.186-0.876 0.488-1.179 0.718-0.488 1.179-0.488zM2.667 8.333c0 0.828 0.337 1.579 0.879 2.121 0.075 0.075 0.153 0.145 0.235 0.212-0.082 0.067-0.161 0.137-0.235 0.212-0.542 0.542-0.879 1.293-0.879 2.121s0.337 1.579 0.879 2.121 1.293 0.879 2.121 0.879 1.579-0.337 2.121-0.879 0.879-1.293 0.879-2.121v-2.172c0.477 0.319 1.050 0.505 1.667 0.505 0.828 0 1.579-0.337 2.121-0.879s0.879-1.293 0.879-2.121-0.337-1.579-0.879-2.121c-0.075-0.075-0.153-0.145-0.235-0.212 0.082-0.067 0.161-0.137 0.235-0.212 0.542-0.542 0.879-1.293 0.879-2.121s-0.337-1.579-0.879-2.121-1.293-0.879-2.121-0.879h-4.667c-0.828 0-1.579 0.337-2.121 0.879s-0.879 1.293-0.879 2.121 0.337 1.579 0.879 2.121c0.075 0.075 0.153 0.145 0.235 0.212-0.082 0.067-0.161 0.137-0.235 0.212-0.542 0.542-0.879 1.293-0.879 2.121zM4 8.333c0-0.461 0.186-0.876 0.488-1.179s0.718-0.488 1.179-0.488h1.667v3.333h-1.667c-0.461 0-0.876-0.186-1.179-0.488s-0.488-0.718-0.488-1.179z\"></path>\n </svg>\n "
},
{
name: 'file-minus',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>file-minus</title>\n <path d=\"M9.333 0.667h-5.333c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v10.667c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h8c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-8c0-0.184-0.075-0.351-0.195-0.471l-4-4c-0.064-0.064-0.137-0.112-0.216-0.145-0.081-0.034-0.169-0.051-0.255-0.051zM11.724 4.667h-1.724v-1.724zM8.667 2v3.333c0 0.368 0.299 0.667 0.667 0.667h3.333v7.333c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-8c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-10.667c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195zM6 10.667h4c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-4c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'file-plus',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>file-plus</title>\n <path d=\"M9.333 0.667h-5.333c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v10.667c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h8c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-8c0-0.184-0.075-0.351-0.195-0.471l-4-4c-0.064-0.064-0.137-0.112-0.216-0.145-0.081-0.034-0.169-0.051-0.255-0.051zM11.724 4.667h-1.724v-1.724zM8.667 2v3.333c0 0.368 0.299 0.667 0.667 0.667h3.333v7.333c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-8c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-10.667c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195zM6 10.667h1.333v1.333c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-1.333h1.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-1.333v-1.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v1.333h-1.333c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'file-text',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>file-text</title>\n <path d=\"M9.333 0.667h-5.333c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v10.667c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h8c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-8c0-0.184-0.075-0.351-0.195-0.471l-4-4c-0.064-0.064-0.137-0.112-0.216-0.145-0.081-0.034-0.169-0.051-0.255-0.051zM11.724 4.667h-1.724v-1.724zM8.667 2v3.333c0 0.368 0.299 0.667 0.667 0.667h3.333v7.333c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-8c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-10.667c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195zM10.667 8h-5.333c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h5.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM10.667 10.667h-5.333c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h5.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM6.667 5.333h-1.333c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h1.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'file',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>file</title>\n <path d=\"M8.667 0.667h-4.667c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v10.667c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h8c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-7.333c0-0.184-0.075-0.351-0.195-0.471l-4.667-4.667c-0.064-0.064-0.137-0.112-0.216-0.145-0.081-0.034-0.169-0.051-0.255-0.051zM11.724 5.333h-2.391v-2.391zM8 2v4c0 0.368 0.299 0.667 0.667 0.667h4v6.667c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-8c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-10.667c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195z\"></path>\n </svg>\n "
},
{
name: 'film',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>film</title>\n <path d=\"M10.667 7.333h-5.333v-5.333h5.333zM5.333 8.667h5.333v5.333h-5.333zM4 4h-2v-1.213c0-0.217 0.087-0.413 0.231-0.556s0.339-0.231 0.556-0.231h1.213zM2 5.333h2v2h-2zM4 10.667h-2v-2h2zM2 12h2v2h-1.213c-0.217 0-0.413-0.087-0.556-0.231s-0.231-0.339-0.231-0.556zM14 10.667h-2v-2h2zM12 12h2v1.213c0 0.217-0.087 0.413-0.231 0.556s-0.339 0.231-0.556 0.231h-1.213zM14 4h-2v-2h1.213c0.217 0 0.413 0.087 0.556 0.231s0.231 0.339 0.231 0.556zM15.333 4.667v-1.88c0-0.585-0.238-1.116-0.621-1.499s-0.914-0.621-1.499-0.621h-10.427c-0.585 0-1.116 0.238-1.499 0.621s-0.621 0.914-0.621 1.499v10.427c0 0.585 0.238 1.116 0.621 1.499s0.914 0.621 1.499 0.621h10.427c0.585 0 1.116-0.238 1.499-0.621s0.621-0.914 0.621-1.499zM12 5.333h2v2h-2z\"></path>\n </svg>\n "
},
{
name: 'filter',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>filter</title>\n <path d=\"M13.23 2.667l-4.406 5.209c-0.098 0.115-0.157 0.266-0.157 0.431v4.615l-1.333-0.667v-3.948c0.001-0.151-0.051-0.305-0.157-0.431l-4.406-5.209zM14.667 1.333h-13.333c-0.368 0-0.667 0.299-0.667 0.667 0 0.165 0.059 0.315 0.157 0.431l5.176 6.12v4.116c0 0.259 0.148 0.485 0.369 0.596l2.667 1.333c0.329 0.165 0.73 0.031 0.895-0.298 0.048-0.097 0.071-0.201 0.070-0.298v-5.449l5.176-6.12c0.238-0.281 0.203-0.702-0.079-0.939-0.126-0.107-0.279-0.159-0.431-0.158z\"></path>\n </svg>\n "
},
{
name: 'flag',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>flag</title>\n <path d=\"M3.333 8.931v-6.573c0.293-0.145 0.91-0.359 2-0.359 0.854 0 1.574 0.281 2.419 0.619 0.821 0.329 1.768 0.715 2.914 0.715 0.865 0 1.519-0.117 2-0.265v6.573c-0.293 0.145-0.91 0.359-2 0.359-0.854 0-1.574-0.281-2.419-0.619-0.821-0.329-1.768-0.715-2.914-0.715-0.865 0-1.519 0.117-2 0.265zM3.333 14.667v-4.308c0.293-0.145 0.91-0.359 2-0.359 0.854 0 1.574 0.281 2.419 0.619 0.821 0.329 1.768 0.715 2.914 0.715 2.165 0 3.005-0.729 3.138-0.862 0.13-0.13 0.195-0.301 0.195-0.471v-8c0-0.368-0.299-0.667-0.667-0.667-0.177 0-0.337 0.069-0.457 0.181-0.064 0.052-0.656 0.485-2.21 0.485-0.854 0-1.574-0.281-2.419-0.619-0.821-0.329-1.768-0.715-2.914-0.715-2.165 0-3.005 0.729-3.138 0.862-0.13 0.13-0.195 0.301-0.195 0.471v12.667c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'folder-minus',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>folder-minus</title>\n <path d=\"M15.333 12.667v-7.333c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586h-5.643l-1.135-1.703c-0.121-0.18-0.324-0.297-0.555-0.297h-3.333c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v9.333c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h10.667c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414zM14 12.667c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-10.667c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-9.333c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195h2.977l1.135 1.703c0.128 0.191 0.337 0.295 0.555 0.297h6c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471zM6 10h4c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-4c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'folder-plus',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>folder-plus</title>\n <path d=\"M15.333 12.667v-7.333c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586h-5.643l-1.135-1.703c-0.121-0.18-0.324-0.297-0.555-0.297h-3.333c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v9.333c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h10.667c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414zM14 12.667c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-10.667c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-9.333c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195h2.977l1.135 1.703c0.128 0.191 0.337 0.295 0.555 0.297h6c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471zM6 10h1.333v1.333c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-1.333h1.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-1.333v-1.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v1.333h-1.333c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'folder',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>folder</title>\n <path d=\"M15.333 12.667v-7.333c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586h-5.643l-1.135-1.703c-0.121-0.18-0.324-0.297-0.555-0.297h-3.333c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v9.333c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h10.667c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414zM14 12.667c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-10.667c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-9.333c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195h2.977l1.135 1.703c0.128 0.191 0.337 0.295 0.555 0.297h6c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471z\"></path>\n </svg>\n "
},
{
name: 'framer',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>framer</title>\n <path d=\"M7.333 11.333v2.391l-2.391-2.391zM8 11.333h0.667v-0.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667 0.299 0.667 0.667 0.667 0.667-0.299 0.667-0.667-0.299-0.667-0.667-0.667-0.667 0.299-0.667 0.667v0.667zM4 10.391v-0.391h-0.667c-0.091 0-0.177 0.018-0.255 0.051s-0.152 0.081-0.216 0.145-0.112 0.137-0.145 0.216c-0.033 0.079-0.051 0.165-0.051 0.255 0 0.368 0.299 0.667 0.667 0.667h1.609zM8.276 5.333l-3.333-3.333h7.057v3.333z\"></path>\n </svg>\n "
},
{
name: 'frown',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>frown</title>\n <path d=\"M15.333 8c0-2.025-0.821-3.859-2.148-5.185s-3.161-2.148-5.185-2.148-3.859 0.821-5.185 2.148-2.148 3.161-2.148 5.185 0.821 3.859 2.148 5.185 3.161 2.148 5.185 2.148 3.859-0.821 5.185-2.148 2.148-3.161 2.148-5.185zM14 8c0 1.657-0.671 3.156-1.757 4.243s-2.585 1.757-4.243 1.757-3.156-0.671-4.243-1.757-1.757-2.585-1.757-4.243 0.671-3.156 1.757-4.243 2.585-1.757 4.243-1.757 3.156 0.671 4.243 1.757 1.757 2.585 1.757 4.243zM11.2 10.267c0 0-0.087-0.115-0.221-0.255-0.097-0.102-0.225-0.227-0.385-0.36-0.225-0.187-0.515-0.393-0.865-0.569-0.47-0.235-1.053-0.416-1.73-0.416s-1.26 0.181-1.73 0.416c-0.35 0.175-0.64 0.381-0.865 0.569-0.159 0.133-0.288 0.258-0.385 0.36-0.133 0.14-0.221 0.255-0.221 0.255-0.221 0.295-0.161 0.713 0.133 0.933s0.713 0.161 0.933-0.133l0.121-0.137c0.067-0.070 0.158-0.159 0.272-0.255 0.162-0.135 0.366-0.279 0.607-0.4 0.32-0.159 0.7-0.275 1.134-0.275s0.814 0.115 1.134 0.275c0.24 0.12 0.445 0.265 0.607 0.4 0.114 0.095 0.205 0.185 0.272 0.255l0.121 0.137c0.221 0.295 0.639 0.354 0.933 0.133s0.354-0.639 0.133-0.933z\"></path>\n </svg>\n "
},
{
name: 'gift',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>gift</title>\n <path d=\"M7.333 8.667v5.333h-4v-5.333zM8.667 14v-5.333h4v5.333zM5 4c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707 0.111-0.525 0.293-0.707 0.431-0.293 0.707-0.293c0.419 0 0.761 0.149 1.056 0.391 0.251 0.205 0.467 0.479 0.651 0.785 0.161 0.267 0.289 0.547 0.387 0.802zM8.897 4c0.107-0.277 0.235-0.557 0.395-0.825 0.183-0.306 0.401-0.579 0.651-0.785 0.295-0.242 0.637-0.391 1.057-0.391 0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707-0.111 0.525-0.293 0.707-0.431 0.293-0.707 0.293zM7.333 5.333v2h-5.333v-2h3zM13.109 4c0.144-0.303 0.225-0.642 0.225-1 0-0.644-0.262-1.229-0.683-1.65s-1.006-0.683-1.65-0.683c-0.773 0-1.406 0.287-1.901 0.693-0.402 0.329-0.712 0.735-0.949 1.129-0.053 0.089-0.103 0.177-0.15 0.265-0.047-0.088-0.097-0.177-0.15-0.265-0.237-0.394-0.547-0.8-0.949-1.129-0.495-0.406-1.128-0.693-1.901-0.693-0.644 0-1.229 0.262-1.65 0.683s-0.683 1.006-0.683 1.65c0 0.358 0.081 0.697 0.225 1h-1.558c-0.368 0-0.667 0.299-0.667 0.667v3.333c0 0.368 0.299 0.667 0.667 0.667h0.667v6c0 0.368 0.299 0.667 0.667 0.667h10.667c0.368 0 0.667-0.299 0.667-0.667v-6h0.667c0.368 0 0.667-0.299 0.667-0.667v-3.333c0-0.368-0.299-0.667-0.667-0.667zM8.667 5.333h5.333v2h-5.333z\"></path>\n </svg>\n "
},
{
name: 'git-branch',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>git-branch</title>\n <path d=\"M13.333 4c0 0.369-0.149 0.701-0.391 0.943s-0.574 0.391-0.943 0.391-0.701-0.149-0.943-0.391-0.391-0.574-0.391-0.943 0.149-0.701 0.391-0.943 0.574-0.391 0.943-0.391 0.701 0.149 0.943 0.391 0.391 0.574 0.391 0.943zM5.333 12c0 0.369-0.149 0.701-0.391 0.943s-0.574 0.391-0.943 0.391-0.701-0.149-0.943-0.391-0.391-0.574-0.391-0.943 0.149-0.701 0.391-0.943 0.574-0.391 0.943-0.391 0.701 0.149 0.943 0.391 0.391 0.574 0.391 0.943zM11.303 6.575c-0.133 1.243-0.693 2.358-1.531 3.197s-1.953 1.399-3.197 1.531c-0.123-0.457-0.365-0.865-0.689-1.189-0.331-0.331-0.751-0.576-1.219-0.697v-7.417c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v7.417c-0.469 0.121-0.888 0.366-1.219 0.697-0.482 0.482-0.781 1.15-0.781 1.886s0.299 1.404 0.781 1.885 1.149 0.781 1.885 0.781 1.404-0.299 1.885-0.781c0.337-0.337 0.585-0.765 0.703-1.245 1.606-0.141 3.049-0.851 4.125-1.927s1.786-2.519 1.927-4.125c0.479-0.118 0.907-0.366 1.245-0.703 0.482-0.481 0.781-1.149 0.781-1.885s-0.299-1.404-0.781-1.885-1.149-0.781-1.885-0.781-1.404 0.299-1.885 0.781-0.781 1.149-0.781 1.885 0.299 1.404 0.781 1.885c0.324 0.324 0.732 0.565 1.189 0.689z\"></path>\n </svg>\n "
},
{
name: 'git-commit',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>git-commit</title>\n <path d=\"M10 8c0 0.553-0.223 1.051-0.586 1.414s-0.861 0.586-1.414 0.586-1.051-0.223-1.414-0.586-0.586-0.861-0.586-1.414 0.223-1.051 0.586-1.414 0.861-0.586 1.414-0.586 1.051 0.223 1.414 0.586 0.586 0.861 0.586 1.414zM11.34 8.667h3.967c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-3.967c-0.025 0-0.049 0.001-0.073 0.004-0.132-0.655-0.457-1.24-0.91-1.694-0.603-0.603-1.437-0.977-2.357-0.977s-1.755 0.374-2.357 0.976c-0.454 0.454-0.778 1.039-0.91 1.693-0.021-0.001-0.044-0.003-0.066-0.003h-3.967c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h3.967c0.022 0 0.045-0.001 0.066-0.003 0.132 0.655 0.457 1.24 0.91 1.693 0.603 0.603 1.437 0.977 2.357 0.977s1.755-0.374 2.357-0.976c0.454-0.454 0.778-1.039 0.91-1.694 0.024 0.003 0.048 0.004 0.073 0.004z\"></path>\n </svg>\n "
},
{
name: 'git-merge',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>git-merge</title>\n <path d=\"M13.333 12c0 0.369-0.149 0.701-0.391 0.943s-0.574 0.391-0.943 0.391-0.701-0.149-0.943-0.391-0.391-0.574-0.391-0.943 0.149-0.701 0.391-0.943 0.574-0.391 0.943-0.391 0.701 0.149 0.943 0.391 0.391 0.574 0.391 0.943zM5.333 4c0 0.369-0.149 0.701-0.391 0.943s-0.574 0.391-0.943 0.391-0.701-0.149-0.943-0.391-0.391-0.574-0.391-0.943 0.149-0.701 0.391-0.943 0.574-0.391 0.943-0.391 0.701 0.149 0.943 0.391 0.391 0.574 0.391 0.943zM4.667 14v-3.999c0.189 0.253 0.397 0.491 0.619 0.713 1.076 1.076 2.519 1.786 4.125 1.927 0.118 0.479 0.366 0.907 0.703 1.245 0.481 0.482 1.149 0.781 1.885 0.781s1.404-0.299 1.885-0.781 0.781-1.149 0.781-1.885-0.299-1.404-0.781-1.885-1.149-0.781-1.885-0.781-1.404 0.299-1.885 0.781c-0.324 0.324-0.565 0.732-0.689 1.189-1.243-0.133-2.358-0.693-3.197-1.531s-1.399-1.953-1.531-3.197c0.455-0.124 0.863-0.366 1.187-0.69 0.482-0.481 0.781-1.149 0.781-1.885s-0.299-1.404-0.781-1.885-1.149-0.781-1.885-0.781-1.404 0.299-1.885 0.781-0.781 1.149-0.781 1.885 0.299 1.404 0.781 1.885c0.331 0.331 0.75 0.577 1.219 0.697v7.417c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'git-pull-request',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>git-pull-request</title>\n <path d=\"M13.333 12c0 0.369-0.149 0.701-0.391 0.943s-0.574 0.391-0.943 0.391-0.701-0.149-0.943-0.391-0.391-0.574-0.391-0.943 0.149-0.701 0.391-0.943 0.574-0.391 0.943-0.391 0.701 0.149 0.943 0.391 0.391 0.574 0.391 0.943zM5.333 4c0 0.369-0.149 0.701-0.391 0.943s-0.574 0.391-0.943 0.391-0.701-0.149-0.943-0.391-0.391-0.574-0.391-0.943 0.149-0.701 0.391-0.943 0.574-0.391 0.943-0.391 0.701 0.149 0.943 0.391 0.391 0.574 0.391 0.943zM8.667 4.667h2c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v4.084c-0.469 0.121-0.888 0.366-1.219 0.697-0.482 0.482-0.781 1.15-0.781 1.886s0.299 1.404 0.781 1.885 1.149 0.781 1.885 0.781 1.404-0.299 1.885-0.781 0.781-1.149 0.781-1.885-0.299-1.404-0.781-1.885c-0.331-0.331-0.75-0.576-1.219-0.697v-4.085c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586h-2c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667zM3.333 6.583v7.417c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-7.417c0.469-0.121 0.888-0.366 1.219-0.697 0.482-0.482 0.781-1.15 0.781-1.886s-0.299-1.404-0.781-1.885-1.149-0.781-1.885-0.781-1.404 0.299-1.885 0.781-0.781 1.149-0.781 1.885 0.299 1.404 0.781 1.885c0.331 0.331 0.75 0.577 1.219 0.697z\"></path>\n </svg>\n "
},
{
name: 'github',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>github</title>\n <path d=\"M5.333 12.149c-0.577 0.117-0.969 0.081-1.247-0.007-0.154-0.049-0.287-0.117-0.409-0.201-0.274-0.189-0.485-0.45-0.746-0.781-0.237-0.301-0.567-0.738-1.034-0.984-0.123-0.065-0.257-0.118-0.403-0.155-0.357-0.089-0.719 0.128-0.809 0.485s0.128 0.719 0.485 0.809l0.103 0.040c0.168 0.089 0.325 0.269 0.609 0.631 0.244 0.309 0.571 0.732 1.035 1.053 0.221 0.153 0.474 0.284 0.766 0.376 0.475 0.15 1.017 0.187 1.649 0.090l-0.001 1.163c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-2.58c0-0.014-0.001-0.030-0.001-0.046-0.004-0.056-0.005-0.112-0.003-0.167 0.013-0.379 0.161-0.751 0.443-1.043 0.097-0.099 0.164-0.231 0.183-0.381 0.045-0.365-0.214-0.699-0.579-0.744-0.227-0.028-0.451-0.063-0.671-0.106-0.527-0.104-1.012-0.257-1.431-0.489-0.879-0.486-1.607-1.396-1.607-3.414-0.005-0.738 0.266-1.479 0.816-2.056 0.171-0.183 0.233-0.448 0.142-0.693-0.187-0.499-0.227-1.053-0.094-1.595 0.327 0.071 0.903 0.277 1.765 0.855 0.157 0.105 0.355 0.143 0.551 0.088 1.331-0.371 2.828-0.401 4.313 0.001 0.181 0.049 0.379 0.022 0.545-0.090 0.862-0.577 1.437-0.783 1.765-0.855 0.126 0.511 0.105 1.063-0.094 1.595-0.086 0.235-0.039 0.503 0.142 0.693 0.505 0.53 0.816 1.248 0.816 2.040 0 2.050-0.743 2.963-1.63 3.442-0.415 0.224-0.895 0.37-1.415 0.467-0.215 0.040-0.434 0.071-0.655 0.095-0.14 0.015-0.279 0.076-0.389 0.183-0.265 0.256-0.272 0.678-0.016 0.943 0.045 0.046 0.087 0.095 0.125 0.146 0.227 0.299 0.348 0.677 0.317 1.079 0 0.016-0.001 0.034-0.002 0.052v2.58c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-2.528c0.035-0.456-0.037-0.895-0.195-1.295 0.518-0.114 1.042-0.285 1.531-0.549 1.389-0.749 2.331-2.161 2.331-4.615 0-1.002-0.344-1.925-0.919-2.654 0.237-0.897 0.151-1.817-0.195-2.622-0.081-0.189-0.239-0.321-0.423-0.376-0.238-0.071-1.155-0.206-2.915 0.908-1.515-0.361-3.038-0.339-4.431-0.001-1.759-1.113-2.675-0.977-2.913-0.907-0.197 0.059-0.347 0.2-0.423 0.377-0.369 0.861-0.416 1.781-0.195 2.621-0.62 0.785-0.925 1.734-0.919 2.678 0 2.415 0.926 3.815 2.294 4.573 0.501 0.277 1.040 0.457 1.571 0.578-0.123 0.312-0.191 0.641-0.203 0.971-0.003 0.094-0.002 0.188 0.003 0.282z\"></path>\n </svg>\n "
},
{
name: 'gitlab',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>gitlab</title>\n <path d=\"M15.492 10.133c0.174-0.113 0.328-0.297 0.423-0.509 0.115-0.257 0.143-0.554 0.050-0.87l-0.844-2.499-1.621-4.989c-0.045-0.153-0.13-0.295-0.265-0.425-0.177-0.161-0.402-0.245-0.627-0.248-0.234-0.004-0.471 0.079-0.651 0.243-0.11 0.098-0.197 0.223-0.252 0.365-0.004 0.010-0.008 0.022-0.012 0.035l-1.478 4.545h-4.431l-1.471-4.515c-0.045-0.153-0.13-0.295-0.265-0.425-0.177-0.161-0.401-0.245-0.627-0.248-0.234-0.004-0.471 0.079-0.651 0.243-0.111 0.097-0.197 0.223-0.253 0.364-0.004 0.011-0.008 0.023-0.012 0.035l-1.627 5.008-0.813 2.52c-0.071 0.219-0.078 0.451-0.025 0.669 0.065 0.271 0.224 0.522 0.468 0.701l7.1 5.16c0.231 0.165 0.545 0.173 0.784 0zM14.669 9.083l-6.669 4.847-6.643-4.828 2.048-6.32 1.261 3.872c0.091 0.28 0.35 0.458 0.634 0.46h5.4c0.295 0 0.545-0.191 0.634-0.461l1.257-3.869 1.261 3.883z\"></path>\n </svg>\n "
},
{
name: 'globe',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>globe</title>\n <path d=\"M11.301 7.333c-0.143-1.793-0.735-3.569-1.783-5.14 1.047 0.273 1.982 0.821 2.725 1.564 0.939 0.939 1.567 2.185 1.721 3.576zM9.519 13.806c0.989-1.484 1.624-3.235 1.779-5.139h2.665c-0.153 1.391-0.782 2.637-1.721 3.576-0.742 0.742-1.677 1.291-2.723 1.563zM4.699 8.667c0.143 1.793 0.735 3.569 1.783 5.14-1.047-0.273-1.982-0.821-2.725-1.564-0.939-0.939-1.567-2.185-1.721-3.576zM6.481 2.194c-0.988 1.484-1.624 3.235-1.779 5.139h-2.665c0.153-1.391 0.782-2.637 1.721-3.576 0.743-0.742 1.677-1.291 2.723-1.563zM7.998 0.667c-2.024 0.001-3.857 0.822-5.183 2.148s-2.148 3.161-2.148 5.185 0.821 3.859 2.148 5.185c1.325 1.326 3.159 2.147 5.183 2.148 0.001 0 0.002 0 0.003 0s0.001 0 0.002 0c2.024-0.001 3.857-0.822 5.183-2.148s2.148-3.161 2.148-5.185-0.821-3.859-2.148-5.185c-1.325-1.326-3.159-2.147-5.183-2.148-0.001 0-0.002 0-0.003 0s-0.001 0-0.002 0zM9.964 8.667c-0.168 1.859-0.877 3.573-1.963 4.967-1.153-1.481-1.804-3.212-1.963-4.967zM7.999 2.366c1.153 1.481 1.804 3.212 1.963 4.967h-3.927c0.168-1.859 0.877-3.573 1.963-4.967z\"></path>\n </svg>\n "
},
{
name: 'grid',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>grid</title>\n <path d=\"M2 1.333c-0.368 0-0.667 0.299-0.667 0.667v4.667c0 0.368 0.299 0.667 0.667 0.667h4.667c0.368 0 0.667-0.299 0.667-0.667v-4.667c0-0.368-0.299-0.667-0.667-0.667zM2.667 2.667h3.333v3.333h-3.333zM9.333 1.333c-0.368 0-0.667 0.299-0.667 0.667v4.667c0 0.368 0.299 0.667 0.667 0.667h4.667c0.368 0 0.667-0.299 0.667-0.667v-4.667c0-0.368-0.299-0.667-0.667-0.667zM10 2.667h3.333v3.333h-3.333zM9.333 8.667c-0.368 0-0.667 0.299-0.667 0.667v4.667c0 0.368 0.299 0.667 0.667 0.667h4.667c0.368 0 0.667-0.299 0.667-0.667v-4.667c0-0.368-0.299-0.667-0.667-0.667zM10 10h3.333v3.333h-3.333zM2 8.667c-0.368 0-0.667 0.299-0.667 0.667v4.667c0 0.368 0.299 0.667 0.667 0.667h4.667c0.368 0 0.667-0.299 0.667-0.667v-4.667c0-0.368-0.299-0.667-0.667-0.667zM2.667 10h3.333v3.333h-3.333z\"></path>\n </svg>\n "
},
{
name: 'hard-drive',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>hard-drive</title>\n <path d=\"M14 8.667v3.333c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-10.667c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-3.333zM4.229 3.705c0.044-0.087 0.107-0.164 0.181-0.225 0.115-0.093 0.258-0.147 0.416-0.147h6.342c0.1 0.001 0.197 0.023 0.284 0.063 0.134 0.061 0.247 0.166 0.318 0.309l1.817 3.628h-11.175zM3.037 3.108l-2.294 4.581c-0.021 0.039-0.037 0.081-0.050 0.125-0.019 0.063-0.027 0.125-0.027 0.186v4c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h10.667c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-4c0-0.101-0.022-0.195-0.061-0.278-0.003-0.007-0.007-0.014-0.010-0.021l-0.006-0.012-2.294-4.581c-0.21-0.423-0.553-0.741-0.955-0.925-0.259-0.118-0.541-0.181-0.829-0.183h-6.351c-0.474 0-0.911 0.166-1.255 0.445-0.221 0.179-0.403 0.404-0.534 0.663zM4.667 10.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667 0.299 0.667 0.667 0.667 0.667-0.299 0.667-0.667zM7.333 10.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667 0.299 0.667 0.667 0.667 0.667-0.299 0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'hash',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>hash</title>\n <path d=\"M9.477 6.667l-0.296 2.667h-2.659l0.296-2.667zM10.004 1.927l-0.379 3.407h-2.659l0.362-3.26c0.041-0.366-0.223-0.695-0.589-0.736s-0.695 0.223-0.736 0.589l-0.379 3.407h-2.959c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h2.811l-0.296 2.667h-2.515c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h2.366l-0.362 3.26c-0.041 0.366 0.223 0.695 0.589 0.736s0.695-0.223 0.736-0.589l0.379-3.407h2.659l-0.362 3.26c-0.041 0.366 0.223 0.695 0.589 0.736s0.695-0.223 0.736-0.589l0.379-3.407h2.959c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-2.811l0.296-2.667h2.515c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-2.366l0.362-3.26c0.041-0.366-0.223-0.695-0.589-0.736s-0.695 0.223-0.736 0.589z\"></path>\n </svg>\n "
},
{
name: 'headphones',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>headphones</title>\n <path d=\"M13.333 12.667c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-0.667c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-2c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195h1.333v2zM2.667 12.667v-2.667h1.333c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v2c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-0.667c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471zM1.333 12.667c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h0.667c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-2c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586h-1.333v-0.667c0-1.473 0.596-2.805 1.562-3.771s2.299-1.562 3.771-1.562 2.805 0.596 3.771 1.562 1.562 2.299 1.562 3.771v0.667h-1.333c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v2c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h0.667c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-4.667c0-1.841-0.747-3.509-1.953-4.714s-2.873-1.953-4.714-1.953-3.509 0.747-4.714 1.953-1.953 2.873-1.953 4.714v4z\"></path>\n </svg>\n "
},
{
name: 'heart',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>heart</title>\n <path d=\"M13.422 3.545c0.587 0.587 0.879 1.354 0.879 2.123s-0.293 1.535-0.879 2.121l-5.422 5.422-5.422-5.422c-0.586-0.586-0.879-1.353-0.879-2.122s0.293-1.536 0.879-2.122 1.353-0.879 2.122-0.879 1.536 0.293 2.122 0.879l0.707 0.707c0.261 0.261 0.683 0.261 0.943 0l0.708-0.708c0.586-0.586 1.353-0.879 2.121-0.878s1.535 0.293 2.121 0.879zM14.365 2.602c-0.846-0.846-1.956-1.269-3.064-1.27s-2.218 0.423-3.065 1.269l-0.236 0.237-0.235-0.235c-0.846-0.846-1.957-1.269-3.065-1.269s-2.219 0.423-3.065 1.269-1.269 1.957-1.269 3.065 0.423 2.219 1.269 3.065l5.893 5.893c0.261 0.261 0.683 0.261 0.943 0l5.893-5.893c0.846-0.846 1.269-1.956 1.27-3.064s-0.423-2.218-1.27-3.065z\"></path>\n </svg>\n "
},
{
name: 'help-circle',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>help-circle</title>\n <path d=\"M15.333 8c0-2.025-0.821-3.859-2.148-5.185s-3.161-2.148-5.185-2.148-3.859 0.821-5.185 2.148-2.148 3.161-2.148 5.185 0.821 3.859 2.148 5.185 3.161 2.148 5.185 2.148 3.859-0.821 5.185-2.148 2.148-3.161 2.148-5.185zM14 8c0 1.657-0.671 3.156-1.757 4.243s-2.585 1.757-4.243 1.757-3.156-0.671-4.243-1.757-1.757-2.585-1.757-4.243 0.671-3.156 1.757-4.243 2.585-1.757 4.243-1.757 3.156 0.671 4.243 1.757 1.757 2.585 1.757 4.243zM6.689 6.221c0.122-0.347 0.373-0.612 0.681-0.76s0.671-0.178 1.019-0.055c0.305 0.107 0.546 0.313 0.7 0.573 0.122 0.205 0.19 0.443 0.191 0.691 0 0.103-0.026 0.206-0.078 0.309-0.053 0.107-0.135 0.217-0.245 0.327-0.473 0.473-1.221 0.728-1.221 0.728-0.349 0.117-0.538 0.494-0.421 0.843s0.494 0.538 0.843 0.421c0 0 1.029-0.337 1.742-1.050 0.186-0.186 0.363-0.409 0.495-0.673 0.133-0.267 0.219-0.572 0.219-0.913-0.003-0.487-0.136-0.958-0.378-1.366-0.309-0.519-0.793-0.935-1.403-1.149-0.695-0.244-1.423-0.183-2.038 0.111s-1.119 0.825-1.363 1.52c-0.123 0.347 0.060 0.728 0.407 0.85s0.728-0.061 0.85-0.407zM8.667 11.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667 0.299 0.667 0.667 0.667 0.667-0.299 0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'hexagon',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>hexagon</title>\n <path d=\"M13.333 10.667c-0.001 0.081-0.017 0.164-0.047 0.241-0.053 0.137-0.15 0.256-0.284 0.333l-4.666 2.666c-0.075 0.043-0.155 0.070-0.237 0.083-0.145 0.023-0.297-0.002-0.436-0.083l-4.661-2.663c-0.074-0.043-0.138-0.099-0.19-0.163-0.093-0.115-0.147-0.258-0.147-0.415v-5.329c0.001-0.085 0.017-0.169 0.047-0.246 0.053-0.137 0.15-0.256 0.284-0.333l4.666-2.666c0.075-0.043 0.155-0.070 0.237-0.083 0.145-0.023 0.297 0.002 0.436 0.083l4.661 2.663c0.074 0.043 0.138 0.099 0.19 0.163 0.093 0.115 0.147 0.258 0.147 0.415zM14.667 10.667v-5.333c-0.001-0.473-0.165-0.909-0.443-1.252-0.153-0.191-0.341-0.352-0.554-0.477l-4.673-2.67c-0.407-0.235-0.867-0.31-1.302-0.243-0.243 0.038-0.477 0.119-0.692 0.242l-4.667 2.667c-0.412 0.237-0.707 0.598-0.866 1.009-0.089 0.228-0.135 0.471-0.137 0.718v5.338c0.001 0.473 0.165 0.909 0.443 1.252 0.153 0.191 0.341 0.352 0.554 0.477l4.673 2.67c0.407 0.235 0.867 0.31 1.302 0.243 0.243-0.038 0.477-0.119 0.692-0.242l4.667-2.667c0.412-0.238 0.707-0.599 0.866-1.009 0.089-0.228 0.135-0.471 0.137-0.723z\"></path>\n </svg>\n "
},
{
name: 'home',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>home</title>\n <path d=\"M1.591 5.474c-0.157 0.123-0.257 0.313-0.257 0.526v7.333c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h9.333c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-7.333c-0.001-0.2-0.089-0.395-0.257-0.526l-6-4.667c-0.239-0.183-0.574-0.19-0.819 0zM10.667 14v-6c0-0.368-0.299-0.667-0.667-0.667h-4c-0.368 0-0.667 0.299-0.667 0.667v6h-2c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-7.007l5.333-4.148 5.333 4.148v7.007c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195zM6.667 14v-5.333h2.667v5.333z\"></path>\n </svg>\n "
},
{
name: 'image',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>image</title>\n <path d=\"M3.333 1.333c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v9.333c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h9.333c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-9.333c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586zM7.333 5.667c0-0.46-0.187-0.877-0.488-1.179s-0.719-0.488-1.179-0.488-0.877 0.187-1.179 0.488-0.488 0.719-0.488 1.179 0.187 0.877 0.488 1.179 0.719 0.488 1.179 0.488 0.877-0.187 1.179-0.488 0.488-0.719 0.488-1.179zM6 5.667c0 0.092-0.037 0.175-0.097 0.236s-0.144 0.097-0.236 0.097-0.175-0.037-0.236-0.097-0.097-0.144-0.097-0.236 0.037-0.175 0.097-0.236 0.144-0.097 0.236-0.097 0.175 0.037 0.236 0.097 0.097 0.144 0.097 0.236zM4.943 13.333l5.724-5.724 2.667 2.667v2.391c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195zM13.333 8.391l-2.195-2.195c-0.261-0.261-0.683-0.261-0.943 0l-7.096 7.096c-0.090-0.033-0.17-0.086-0.237-0.153-0.121-0.121-0.195-0.287-0.195-0.471v-9.333c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195h9.333c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471z\"></path>\n </svg>\n "
},
{
name: 'inbox',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>inbox</title>\n <path d=\"M14 8.667v3.333c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-10.667c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-3.333h2.977l1.135 1.703c0.121 0.18 0.324 0.297 0.555 0.297h2.667c0.217-0.001 0.427-0.105 0.555-0.297l1.135-1.703zM4.229 3.705c0.044-0.087 0.107-0.164 0.181-0.225 0.115-0.093 0.258-0.147 0.416-0.147h6.342c0.1 0.001 0.197 0.023 0.284 0.063 0.134 0.061 0.247 0.166 0.318 0.309l1.817 3.628h-2.921c-0.231 0-0.433 0.117-0.555 0.297l-1.135 1.703h-1.953l-1.135-1.703c-0.128-0.191-0.337-0.295-0.555-0.297h-2.921zM3.037 3.108l-2.294 4.581c-0.021 0.039-0.037 0.081-0.050 0.125-0.019 0.063-0.027 0.125-0.027 0.186v4c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h10.667c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-4c0-0.101-0.022-0.195-0.061-0.278-0.003-0.007-0.007-0.014-0.010-0.021l-0.006-0.012-2.294-4.581c-0.21-0.423-0.553-0.741-0.955-0.925-0.259-0.118-0.541-0.181-0.829-0.183h-6.351c-0.474 0-0.911 0.166-1.255 0.445-0.221 0.179-0.403 0.404-0.534 0.663z\"></path>\n </svg>\n "
},
{
name: 'info',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>info</title>\n <path d=\"M15.333 8c0-2.025-0.821-3.859-2.148-5.185s-3.161-2.148-5.185-2.148-3.859 0.821-5.185 2.148-2.148 3.161-2.148 5.185 0.821 3.859 2.148 5.185 3.161 2.148 5.185 2.148 3.859-0.821 5.185-2.148 2.148-3.161 2.148-5.185zM14 8c0 1.657-0.671 3.156-1.757 4.243s-2.585 1.757-4.243 1.757-3.156-0.671-4.243-1.757-1.757-2.585-1.757-4.243 0.671-3.156 1.757-4.243 2.585-1.757 4.243-1.757 3.156 0.671 4.243 1.757 1.757 2.585 1.757 4.243zM8.667 10.667v-2.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v2.667c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667zM8.667 5.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667 0.299 0.667 0.667 0.667 0.667-0.299 0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'instagram',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>instagram</title>\n <path d=\"M4.667 0.667c-1.105 0-2.105 0.449-2.829 1.171s-1.171 1.724-1.171 2.829v6.667c0 1.105 0.449 2.105 1.171 2.829s1.724 1.171 2.829 1.171h6.667c1.105 0 2.105-0.449 2.829-1.171s1.171-1.724 1.171-2.829v-6.667c0-1.105-0.449-2.105-1.171-2.829s-1.724-1.171-2.829-1.171zM4.667 2h6.667c0.737 0 1.402 0.298 1.885 0.781s0.781 1.149 0.781 1.885v6.667c0 0.737-0.298 1.402-0.781 1.885s-1.149 0.781-1.885 0.781h-6.667c-0.737 0-1.402-0.298-1.885-0.781s-0.781-1.149-0.781-1.885v-6.667c0-0.737 0.298-1.402 0.781-1.885s1.149-0.781 1.885-0.781zM11.326 7.482c-0.1-0.648-0.381-1.238-0.796-1.711-0.503-0.574-1.203-0.977-2.006-1.096-0.309-0.049-0.647-0.051-0.985-0.001-0.911 0.135-1.681 0.627-2.188 1.311s-0.755 1.565-0.62 2.475 0.627 1.681 1.311 2.188 1.565 0.755 2.475 0.62 1.681-0.627 2.188-1.311 0.755-1.565 0.62-2.475zM10.007 7.678c0.081 0.547-0.067 1.073-0.372 1.485s-0.767 0.706-1.313 0.787-1.073-0.067-1.485-0.372-0.706-0.767-0.787-1.313 0.067-1.073 0.372-1.485 0.767-0.706 1.313-0.787c0.209-0.031 0.41-0.028 0.58-0.001 0.493 0.073 0.911 0.313 1.212 0.657 0.25 0.285 0.42 0.642 0.48 1.029zM12.333 4.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667 0.299 0.667 0.667 0.667 0.667-0.299 0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'italic',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>italic</title>\n <path d=\"M9.038 3.333l-3.5 9.333h-2.205c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h6c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-2.371l3.5-9.333h2.205c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-6c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'key',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>key</title>\n <path d=\"M12.667 3.609l1.057 1.057-1.391 1.391-1.057-1.057zM7.125 8.215c0.589 0.582 0.887 1.347 0.893 2.115s-0.283 1.537-0.865 2.127-1.347 0.888-2.115 0.893-1.537-0.283-2.127-0.865l-0.028-0.028c-0.583-0.59-0.87-1.359-0.865-2.127s0.303-1.533 0.893-2.115c0.586-0.578 1.349-0.866 2.113-0.864 0.761 0.001 1.519 0.29 2.101 0.864zM12.195 2.195c-0.261 0.261-0.261 0.683 0 0.943l0.471 0.471 0.943-0.943-0.471-0.471c-0.261-0.261-0.683-0.261-0.943 0zM12.195 2.195c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0 0.261-0.683 0-0.943-0.683-0.261-0.943 0l-2.333 2.333c-0.261 0.261-0.261 0.683 0 0.943l0.471 0.471 0.943-0.943-0.471-0.471c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943 0.683 0.261 0.943 0 0.261-0.683 0-0.943-0.683-0.261-0.943 0l-2.307 2.307c-0.753-0.544-1.641-0.817-2.529-0.819-1.101-0.002-2.205 0.413-3.051 1.249-0.851 0.84-1.282 1.947-1.29 3.055s0.409 2.221 1.249 3.073l0.041 0.041c0.851 0.84 1.965 1.256 3.073 1.249s2.215-0.438 3.055-1.29 1.256-1.965 1.249-3.073c-0.006-0.897-0.289-1.793-0.849-2.547l1.831-1.831 1.529 1.529c0.261 0.261 0.683 0.261 0.943 0l2.333-2.333c0.261-0.261 0.261-0.683 0-0.943l-1.529-1.529 0.862-0.862c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0z\"></path>\n </svg>\n "
},
{
name: 'layers',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>layers</title>\n <path d=\"M8 2.079l5.176 2.588-5.176 2.588-5.176-2.588zM7.702 0.737l-6.667 3.333c-0.329 0.165-0.463 0.565-0.298 0.894 0.067 0.135 0.174 0.237 0.298 0.298l6.667 3.333c0.195 0.097 0.413 0.091 0.596 0l6.667-3.333c0.329-0.165 0.463-0.565 0.298-0.895-0.067-0.135-0.175-0.237-0.298-0.298l-6.667-3.333c-0.195-0.097-0.413-0.091-0.596 0zM1.035 11.929l6.667 3.333c0.195 0.097 0.413 0.091 0.596 0l6.667-3.333c0.329-0.165 0.463-0.565 0.298-0.895s-0.565-0.463-0.895-0.298l-6.368 3.185-6.369-3.184c-0.329-0.165-0.73-0.031-0.895 0.298s-0.031 0.73 0.298 0.895zM1.035 8.596l6.667 3.333c0.195 0.097 0.413 0.091 0.596 0l6.667-3.333c0.329-0.165 0.463-0.565 0.298-0.895s-0.565-0.463-0.895-0.298l-6.368 3.185-6.369-3.184c-0.329-0.165-0.73-0.031-0.895 0.298s-0.031 0.73 0.298 0.895z\"></path>\n </svg>\n "
},
{
name: 'layout',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>layout</title>\n <path d=\"M3.333 1.333c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v9.333c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h9.333c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-9.333c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586zM13.333 5.333h-10.667v-2c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195h9.333c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471zM5.333 6.667v6.667h-2c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-6zM6.667 13.333v-6.667h6.667v6c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195z\"></path>\n </svg>\n "
},
{
name: 'life-buoy',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>life-buoy</title>\n <path d=\"M15.333 8c0-2.025-0.821-3.859-2.148-5.185s-3.161-2.148-5.185-2.148-3.859 0.821-5.185 2.148-2.148 3.161-2.148 5.185 0.821 3.859 2.148 5.185 3.161 2.148 5.185 2.148 3.859-0.821 5.185-2.148 2.148-3.161 2.148-5.185zM10 8c0 0.553-0.223 1.051-0.586 1.414s-0.861 0.586-1.414 0.586-1.051-0.223-1.414-0.586-0.586-0.861-0.586-1.414 0.223-1.051 0.586-1.414 0.861-0.586 1.414-0.586 1.051 0.223 1.414 0.586 0.586 0.861 0.586 1.414zM11.745 3.312l-1.907 1.907c0 0 0 0 0 0-0.527-0.349-1.159-0.552-1.839-0.552s-1.311 0.203-1.838 0.553l-1.907-1.907c1.026-0.822 2.328-1.313 3.745-1.313s2.719 0.491 3.745 1.312zM12.688 4.255c0.821 1.027 1.312 2.329 1.312 3.745s-0.491 2.719-1.312 3.745l-1.907-1.907c0.349-0.527 0.552-1.159 0.552-1.839s-0.203-1.311-0.553-1.838zM5.219 9.838l-1.907 1.907c-0.822-1.026-1.313-2.328-1.313-3.745s0.491-2.719 1.312-3.745l1.907 1.907c-0.349 0.527-0.552 1.159-0.552 1.839s0.203 1.311 0.553 1.838zM4.255 12.688l1.907-1.907c0.527 0.349 1.159 0.552 1.839 0.552s1.311-0.203 1.838-0.553l1.907 1.907c-1.026 0.822-2.328 1.313-3.745 1.313s-2.719-0.491-3.745-1.312z\"></path>\n </svg>\n "
},
{
name: 'link-2',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>link-2</title>\n <path d=\"M10 5.333h2c0.737 0 1.402 0.298 1.885 0.781s0.781 1.149 0.781 1.885-0.298 1.402-0.781 1.885-1.149 0.781-1.885 0.781h-2c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h2c1.105 0 2.105-0.449 2.829-1.171s1.171-1.724 1.171-2.829-0.449-2.105-1.171-2.829-1.724-1.171-2.829-1.171h-2c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667zM6 10.667h-2c-0.737 0-1.402-0.298-1.885-0.781s-0.781-1.149-0.781-1.885 0.298-1.402 0.781-1.885 1.149-0.781 1.885-0.781h2c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-2c-1.105 0-2.105 0.449-2.829 1.171s-1.171 1.724-1.171 2.829 0.449 2.105 1.171 2.829 1.724 1.171 2.829 1.171h2c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM5.333 8.667h5.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-5.333c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'link',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>link</title>\n <path d=\"M6.133 9.066c0.661 0.885 1.62 1.417 2.632 1.563s2.082-0.095 2.967-0.756c0.159-0.119 0.31-0.25 0.437-0.379l1.997-1.996c0.775-0.803 1.148-1.834 1.131-2.857s-0.426-2.041-1.221-2.807c-0.781-0.755-1.793-1.128-2.799-1.122-0.995 0.005-1.989 0.381-2.758 1.122l-1.154 1.147c-0.261 0.259-0.263 0.682-0.003 0.943s0.682 0.263 0.943 0.003l1.139-1.133c0.513-0.495 1.175-0.745 1.84-0.749 0.673-0.004 1.345 0.245 1.865 0.748 0.53 0.512 0.802 1.189 0.814 1.872s-0.237 1.369-0.74 1.891l-2.003 2.004c-0.076 0.077-0.175 0.165-0.285 0.247-0.59 0.441-1.301 0.601-1.978 0.504s-1.314-0.452-1.755-1.042c-0.221-0.295-0.638-0.355-0.933-0.135s-0.355 0.638-0.135 0.933zM9.867 6.934c-0.661-0.885-1.62-1.417-2.632-1.563s-2.083 0.095-2.967 0.756c-0.159 0.119-0.309 0.25-0.437 0.379l-1.997 1.996c-0.775 0.803-1.148 1.834-1.131 2.857s0.426 2.041 1.221 2.807c0.781 0.755 1.793 1.128 2.799 1.122 0.995-0.005 1.989-0.381 2.758-1.122l1.149-1.149c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-1.131 1.133c-0.513 0.495-1.175 0.745-1.84 0.749-0.673 0.004-1.345-0.245-1.865-0.748-0.53-0.512-0.802-1.189-0.814-1.872s0.237-1.369 0.74-1.891l2.003-2.004c0.076-0.077 0.175-0.165 0.285-0.247 0.59-0.441 1.301-0.601 1.978-0.504s1.314 0.452 1.755 1.042c0.221 0.295 0.638 0.355 0.933 0.135s0.355-0.638 0.135-0.933z\"></path>\n </svg>\n "
},
{
name: 'linkedin',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>linkedin</title>\n <path d=\"M10.667 4.667c-1.289 0-2.456 0.523-3.3 1.367s-1.367 2.011-1.367 3.3v4.667c0 0.368 0.299 0.667 0.667 0.667h2.667c0.368 0 0.667-0.299 0.667-0.667v-4.667c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195 0.35 0.074 0.471 0.195 0.195 0.287 0.195 0.471v4.667c0 0.368 0.299 0.667 0.667 0.667h2.667c0.368 0 0.667-0.299 0.667-0.667v-4.667c0-1.289-0.523-2.456-1.367-3.3s-2.011-1.367-3.3-1.367zM10.667 6c0.921 0 1.753 0.373 2.357 0.976s0.976 1.437 0.976 2.357v4h-1.333v-4c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414v4h-1.333v-4c0-0.921 0.373-1.753 0.976-2.357s1.437-0.976 2.357-0.976zM1.333 5.333c-0.368 0-0.667 0.299-0.667 0.667v8c0 0.368 0.299 0.667 0.667 0.667h2.667c0.368 0 0.667-0.299 0.667-0.667v-8c0-0.368-0.299-0.667-0.667-0.667zM2 6.667h1.333v6.667h-1.333zM4.667 2.667c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414zM3.333 2.667c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195-0.35-0.074-0.471-0.195-0.195-0.287-0.195-0.471 0.074-0.35 0.195-0.471 0.287-0.195 0.471-0.195 0.35 0.074 0.471 0.195 0.195 0.287 0.195 0.471z\"></path>\n </svg>\n "
},
{
name: 'list',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>list</title>\n <path d=\"M5.333 4.667h8.667c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-8.667c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667zM5.333 8.667h8.667c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-8.667c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667zM5.333 12.667h8.667c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-8.667c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667zM2.667 4c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667 0.299 0.667 0.667 0.667 0.667-0.299 0.667-0.667zM2.667 8c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667 0.299 0.667 0.667 0.667 0.667-0.299 0.667-0.667zM2.667 12c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667 0.299 0.667 0.667 0.667 0.667-0.299 0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'loader',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>loader</title>\n <path d=\"M7.333 1.333v2.667c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-2.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667zM7.333 12v2.667c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-2.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667zM2.815 3.758l1.887 1.887c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-1.887-1.887c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943zM10.355 11.298l1.887 1.887c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-1.887-1.887c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943zM1.333 8.667h2.667c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-2.667c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667zM12 8.667h2.667c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-2.667c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667zM3.758 13.185l1.887-1.887c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-1.887 1.887c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0zM11.298 5.645l1.887-1.887c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-1.887 1.887c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0z\"></path>\n </svg>\n "
},
{
name: 'lock',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>lock</title>\n <path d=\"M3.333 8h9.333c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v4.667c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-9.333c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-4.667c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195zM12 6.667v-2c0-1.105-0.449-2.105-1.171-2.829s-1.724-1.171-2.829-1.171-2.105 0.449-2.829 1.171-1.171 1.724-1.171 2.829v2h-0.667c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v4.667c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h9.333c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-4.667c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586zM5.333 6.667v-2c0-0.737 0.298-1.402 0.781-1.885s1.149-0.781 1.885-0.781 1.402 0.298 1.885 0.781 0.781 1.149 0.781 1.885v2z\"></path>\n </svg>\n "
},
{
name: 'log-in',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>log-in</title>\n <path d=\"M10 2.667h2.667c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v9.333c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-2.667c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h2.667c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-9.333c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586h-2.667c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667zM8.391 7.333h-6.391c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h6.391l-2.195 2.195c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0l3.333-3.333c0.064-0.064 0.112-0.137 0.145-0.216s0.051-0.165 0.051-0.255c0-0.087-0.017-0.174-0.051-0.255-0.033-0.079-0.081-0.152-0.145-0.216l-3.333-3.333c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943z\"></path>\n </svg>\n "
},
{
name: 'log-out',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>log-out</title>\n <path d=\"M6 13.333h-2.667c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-9.333c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195h2.667c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-2.667c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v9.333c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h2.667c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM12.391 7.333h-6.391c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h6.391l-2.195 2.195c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0l3.333-3.333c0.064-0.064 0.112-0.137 0.145-0.216 0.1-0.241 0.052-0.53-0.145-0.727l-3.333-3.333c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943z\"></path>\n </svg>\n "
},
{
name: 'mail',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>mail</title>\n <path d=\"M2 5.281l5.618 3.933c0.227 0.157 0.53 0.164 0.765 0l5.617-3.933v6.719c0 0.181-0.073 0.347-0.197 0.47s-0.289 0.197-0.47 0.197h-10.667c-0.181 0-0.347-0.073-0.47-0.197s-0.197-0.289-0.197-0.47zM0.667 4.008v7.992c0 0.552 0.227 1.053 0.587 1.413s0.861 0.587 1.413 0.587h10.667c0.552 0 1.053-0.227 1.413-0.587s0.587-0.861 0.587-1.413v-7.992c0-0.007 0-0.013 0-0.020-0.003-0.547-0.229-1.043-0.587-1.401-0.361-0.36-0.861-0.587-1.413-0.587h-10.667c-0.552 0-1.053 0.227-1.413 0.587-0.358 0.358-0.583 0.854-0.587 1.402 0 0.003 0 0.007 0 0.011zM13.929 3.703l-5.929 4.15-5.929-4.15c0.032-0.064 0.075-0.122 0.125-0.173 0.123-0.123 0.289-0.197 0.471-0.197h10.667c0.181 0 0.347 0.073 0.47 0.197 0.051 0.051 0.093 0.109 0.125 0.173z\"></path>\n </svg>\n "
},
{
name: 'map-pin',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>map-pin</title>\n <path d=\"M14.667 6.667c0-1.841-0.747-3.509-1.953-4.714s-2.873-1.953-4.714-1.953-3.509 0.747-4.714 1.953-1.953 2.873-1.953 4.714c0 0.379 0.035 0.752 0.1 1.117 0.183 1.032 0.599 2.003 1.121 2.88 1.821 3.061 5.075 5.224 5.075 5.224 0.221 0.145 0.51 0.153 0.739 0 0 0 3.255-2.163 5.075-5.224 0.522-0.877 0.939-1.848 1.121-2.88 0.065-0.365 0.101-0.738 0.101-1.117zM13.333 6.667c0 0.296-0.027 0.591-0.079 0.885-0.147 0.833-0.491 1.652-0.955 2.431-1.301 2.187-3.444 3.901-4.299 4.533-0.856-0.632-2.998-2.346-4.299-4.533-0.463-0.779-0.807-1.597-0.955-2.431-0.052-0.294-0.079-0.589-0.079-0.885 0-1.473 0.596-2.805 1.562-3.771s2.299-1.562 3.771-1.562 2.805 0.596 3.771 1.562 1.562 2.299 1.562 3.771zM10.667 6.667c0-0.736-0.299-1.404-0.781-1.885s-1.149-0.781-1.885-0.781-1.404 0.299-1.885 0.781-0.781 1.149-0.781 1.885 0.299 1.404 0.781 1.885 1.149 0.781 1.885 0.781 1.404-0.299 1.885-0.781 0.781-1.149 0.781-1.885zM9.333 6.667c0 0.369-0.149 0.701-0.391 0.943s-0.574 0.391-0.943 0.391-0.701-0.149-0.943-0.391-0.391-0.574-0.391-0.943 0.149-0.701 0.391-0.943 0.574-0.391 0.943-0.391 0.701 0.149 0.943 0.391 0.391 0.574 0.391 0.943z\"></path>\n </svg>\n "
},
{
name: 'map',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>map</title>\n <path d=\"M4.667 2.482v9.131l-3.333 1.905v-9.131zM11.333 13.518v-9.131l3.333-1.905v9.131zM10.357 15.257c0.055 0.029 0.113 0.050 0.176 0.063 0.044 0.009 0.089 0.014 0.134 0.014 0.115 0 0.229-0.031 0.331-0.088l0.010-0.006 4.657-2.661c0.214-0.122 0.335-0.345 0.336-0.579v-10.667c0-0.368-0.299-0.667-0.667-0.667-0.122 0-0.236 0.033-0.331 0.088l-4.357 2.489-5.002-2.501c-0.055-0.028-0.114-0.050-0.176-0.063-0.045-0.009-0.090-0.013-0.135-0.013-0.116 0-0.23 0.031-0.331 0.088l-0.010 0.005-4.657 2.661c-0.214 0.122-0.335 0.345-0.336 0.579v10.667c0 0.368 0.299 0.667 0.667 0.667 0.122 0 0.236-0.033 0.331-0.088l4.357-2.489zM10 4.412v9.176l-4-2v-9.176z\"></path>\n </svg>\n "
},
{
name: 'maximize-2',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>maximize-2</title>\n <path d=\"M12.391 2.667l-3.529 3.529c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0l3.529-3.529v2.391c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-4c0-0.091-0.018-0.177-0.051-0.255s-0.081-0.152-0.144-0.215c-0.001-0.001-0.001-0.001-0.001-0.001-0.061-0.061-0.135-0.111-0.215-0.144-0.079-0.033-0.165-0.051-0.255-0.051h-4c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667zM3.609 13.333l3.529-3.529c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-3.529 3.529v-2.391c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v4c0 0.091 0.018 0.177 0.051 0.255s0.081 0.152 0.144 0.215c0.001 0.001 0.001 0.001 0.001 0.001 0.061 0.061 0.135 0.111 0.215 0.144 0.079 0.033 0.165 0.051 0.255 0.051h4c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'maximize',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>maximize</title>\n <path d=\"M5.333 1.333h-2c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v2c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-2c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195h2c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM14.667 5.333v-2c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586h-2c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h2c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v2c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667zM10.667 14.667h2c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-2c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v2c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-2c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667zM1.333 10.667v2c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h2c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-2c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-2c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'meh',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>meh</title>\n <path d=\"M15.333 8c0-2.025-0.821-3.859-2.148-5.185s-3.161-2.148-5.185-2.148-3.859 0.821-5.185 2.148-2.148 3.161-2.148 5.185 0.821 3.859 2.148 5.185 3.161 2.148 5.185 2.148 3.859-0.821 5.185-2.148 2.148-3.161 2.148-5.185zM14 8c0 1.657-0.671 3.156-1.757 4.243s-2.585 1.757-4.243 1.757-3.156-0.671-4.243-1.757-1.757-2.585-1.757-4.243 0.671-3.156 1.757-4.243 2.585-1.757 4.243-1.757 3.156 0.671 4.243 1.757 1.757 2.585 1.757 4.243zM5.333 10.667h5.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-5.333c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'menu',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>menu</title>\n <path d=\"M2 8.667h12c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-12c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667zM2 4.667h12c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-12c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667zM2 12.667h12c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-12c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'message-circle',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>message-circle</title>\n <path d=\"M14.667 7.665v-0.331c0-0.011-0.001-0.025-0.001-0.039-0.091-1.559-0.742-2.974-1.762-4.034-1.068-1.111-2.543-1.835-4.201-1.926-0.010-0.001-0.023-0.001-0.036-0.001h-0.326c-0.937-0.011-1.921 0.207-2.843 0.672-0.815 0.415-1.527 0.993-2.093 1.691-0.881 1.089-1.405 2.469-1.405 3.963-0.009 0.85 0.169 1.74 0.549 2.585l-1.181 3.545c-0.044 0.131-0.048 0.279 0 0.421 0.117 0.349 0.494 0.538 0.843 0.421l3.543-1.181c0.773 0.351 1.656 0.551 2.584 0.549 0.915-0.006 1.81-0.205 2.627-0.577 1.275-0.581 2.36-1.582 3.027-2.917 0.429-0.833 0.677-1.81 0.674-2.841zM13.333 7.669c0.002 0.817-0.195 1.583-0.526 2.226-0.534 1.068-1.388 1.856-2.395 2.315-0.647 0.295-1.357 0.453-2.084 0.458-0.814 0.002-1.581-0.195-2.223-0.526-0.166-0.086-0.352-0.095-0.517-0.040l-2.535 0.845 0.845-2.535c0.059-0.175 0.040-0.358-0.037-0.511-0.368-0.73-0.536-1.503-0.528-2.226 0.001-1.193 0.413-2.279 1.108-3.139 0.447-0.552 1.012-1.011 1.661-1.34 0.728-0.368 1.501-0.536 2.224-0.528h0.304c1.308 0.071 2.469 0.641 3.313 1.517 0.801 0.834 1.315 1.944 1.391 3.169z\"></path>\n </svg>\n "
},
{
name: 'message-square',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>message-square</title>\n <path d=\"M14.667 10v-6.667c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586h-9.333c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v10.667c0 0.171 0.065 0.341 0.195 0.471 0.261 0.261 0.683 0.261 0.943 0l2.471-2.471h7.724c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414zM13.333 10c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-8c-0.184 0-0.351 0.075-0.471 0.195l-1.529 1.529v-9.057c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195h9.333c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471z\"></path>\n </svg>\n "
},
{
name: 'mic-off',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>mic-off</title>\n <path d=\"M8.344 9.287c-0.109 0.029-0.224 0.045-0.343 0.045-0.369 0-0.701-0.148-0.943-0.39s-0.391-0.573-0.391-0.941v-0.391zM10.667 6.227v-3.56c0.001-0.735-0.298-1.403-0.779-1.886s-1.149-0.782-1.885-0.783c-0.676-0.001-1.295 0.251-1.766 0.668-0.424 0.375-0.728 0.885-0.849 1.465-0.075 0.361 0.156 0.713 0.517 0.789s0.713-0.156 0.789-0.517c0.061-0.293 0.215-0.55 0.427-0.738 0.235-0.209 0.543-0.333 0.881-0.333 0.369 0.001 0.701 0.149 0.943 0.391s0.39 0.575 0.389 0.944v3.56c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667zM12 6.667v1.333c0 0.251-0.023 0.493-0.062 0.697-0.068 0.362 0.17 0.711 0.532 0.779s0.711-0.17 0.779-0.532c0.055-0.29 0.085-0.615 0.085-0.943v-1.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667zM5.333 16h5.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-2v-1.341c0.935-0.117 1.845-0.482 2.623-1.093l3.572 3.572c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-3.892-3.892c-0.030-0.053-0.067-0.102-0.113-0.146-0.042-0.041-0.088-0.075-0.137-0.103l-10.525-10.525c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943l5.138 5.138v1.724c0.001 0.737 0.301 1.404 0.783 1.885s1.15 0.78 1.886 0.779c0.493-0.001 0.955-0.135 1.351-0.369l0.985 0.985c-0.639 0.462-1.385 0.712-2.141 0.749-0.063-0.019-0.129-0.029-0.197-0.029s-0.134 0.010-0.197 0.029c-0.945-0.046-1.875-0.425-2.603-1.138-0.769-0.753-1.169-1.738-1.199-2.737l-0.001-1.488c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667l0.003 1.528c0.040 1.329 0.574 2.645 1.599 3.649 0.865 0.849 1.949 1.342 3.065 1.482v1.341h-2c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'mic',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>mic</title>\n <path d=\"M8 1.333c0.369 0 0.701 0.149 0.943 0.391s0.391 0.574 0.391 0.943v5.333c0 0.369-0.149 0.701-0.391 0.943s-0.574 0.391-0.943 0.391-0.701-0.149-0.943-0.391-0.391-0.574-0.391-0.943v-5.333c0-0.369 0.149-0.701 0.391-0.943s0.574-0.391 0.943-0.391zM8 0c-0.736 0-1.404 0.299-1.885 0.781s-0.781 1.149-0.781 1.885v5.333c0 0.736 0.299 1.404 0.781 1.885s1.149 0.781 1.885 0.781 1.404-0.299 1.885-0.781 0.781-1.149 0.781-1.885v-5.333c0-0.736-0.299-1.404-0.781-1.885s-1.149-0.781-1.885-0.781zM5.333 16h5.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-2v-1.375c1.206-0.151 2.288-0.704 3.105-1.521 0.964-0.965 1.562-2.299 1.562-3.771v-1.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v1.333c0 1.105-0.447 2.104-1.171 2.829s-1.724 1.171-2.829 1.171-2.104-0.447-2.829-1.171-1.171-1.724-1.171-2.829v-1.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v1.333c0 1.473 0.598 2.807 1.562 3.771 0.817 0.817 1.898 1.37 3.105 1.521v1.375h-2c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'minimize-2',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>minimize-2</title>\n <path d=\"M10.943 6l3.529-3.529c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-3.529 3.529v-2.391c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v4c0 0.091 0.018 0.177 0.051 0.255s0.081 0.152 0.144 0.215c0.001 0.001 0.001 0.001 0.001 0.001 0.061 0.061 0.135 0.111 0.215 0.144 0.079 0.033 0.165 0.051 0.255 0.051h4c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM2.471 14.471l3.529-3.529v2.391c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-4c0-0.091-0.018-0.177-0.051-0.255s-0.081-0.152-0.144-0.215c-0.001-0.001-0.001-0.001-0.001-0.001-0.061-0.061-0.135-0.111-0.215-0.144-0.079-0.033-0.165-0.051-0.255-0.051h-4c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h2.391l-3.529 3.529c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0z\"></path>\n </svg>\n "
},
{
name: 'minimize',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>minimize</title>\n <path d=\"M4.667 2v2c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-2c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h2c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-2c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667zM14 4.667h-2c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-2c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v2c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h2c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM11.333 14v-2c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195h2c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-2c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v2c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667zM2 11.333h2c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v2c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-2c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586h-2c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'minus-circle',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>minus-circle</title>\n <path d=\"M15.333 8c0-2.025-0.821-3.859-2.148-5.185s-3.161-2.148-5.185-2.148-3.859 0.821-5.185 2.148-2.148 3.161-2.148 5.185 0.821 3.859 2.148 5.185 3.161 2.148 5.185 2.148 3.859-0.821 5.185-2.148 2.148-3.161 2.148-5.185zM14 8c0 1.657-0.671 3.156-1.757 4.243s-2.585 1.757-4.243 1.757-3.156-0.671-4.243-1.757-1.757-2.585-1.757-4.243 0.671-3.156 1.757-4.243 2.585-1.757 4.243-1.757 3.156 0.671 4.243 1.757 1.757 2.585 1.757 4.243zM5.333 8.667h5.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-5.333c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'minus-square',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>minus-square</title>\n <path d=\"M3.333 1.333c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v9.333c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h9.333c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-9.333c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586zM3.333 2.667h9.333c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v9.333c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-9.333c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-9.333c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195zM5.333 8.667h5.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-5.333c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'minus',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>minus</title>\n <path d=\"M3.333 8.667h9.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-9.333c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'monitor',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>monitor</title>\n <path d=\"M8 10.667h-5.333c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-6.667c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195h10.667c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v6.667c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195zM7.333 12v1.333h-2c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h5.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-2v-1.333h4.667c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-6.667c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586h-10.667c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v6.667c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586z\"></path>\n </svg>\n "
},
{
name: 'moon',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>moon</title>\n <path d=\"M14.664 8.588c0.015-0.155-0.025-0.317-0.125-0.454-0.217-0.297-0.634-0.363-0.931-0.146-0.633 0.462-1.373 0.724-2.125 0.775-0.912 0.061-1.844-0.189-2.633-0.772-0.889-0.657-1.426-1.61-1.578-2.623s0.083-2.083 0.739-2.971c0.095-0.127 0.144-0.29 0.127-0.461-0.035-0.367-0.361-0.635-0.728-0.599-1.505 0.147-2.876 0.787-3.93 1.767-1.157 1.077-1.935 2.565-2.091 4.257-0.169 1.833 0.421 3.562 1.511 4.874s2.681 2.209 4.515 2.378 3.562-0.421 4.874-1.511 2.209-2.681 2.378-4.515zM13.045 9.783c-0.327 0.909-0.89 1.695-1.611 2.294-1.051 0.873-2.432 1.344-3.899 1.209s-2.739-0.852-3.611-1.903-1.344-2.432-1.209-3.899c0.125-1.355 0.745-2.543 1.671-3.404 0.521-0.485 1.14-0.867 1.821-1.115-0.304 0.843-0.385 1.737-0.256 2.599 0.202 1.349 0.92 2.623 2.104 3.498 1.053 0.778 2.299 1.112 3.515 1.030 0.501-0.033 0.997-0.138 1.473-0.31z\"></path>\n </svg>\n "
},
{
name: 'more-horizontal',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>more-horizontal</title>\n <path d=\"M9.333 8c0-0.368-0.15-0.702-0.391-0.943s-0.575-0.391-0.943-0.391-0.702 0.15-0.943 0.391-0.391 0.575-0.391 0.943 0.15 0.702 0.391 0.943 0.575 0.391 0.943 0.391 0.702-0.15 0.943-0.391 0.391-0.575 0.391-0.943zM14 8c0-0.368-0.15-0.702-0.391-0.943s-0.575-0.391-0.943-0.391-0.702 0.15-0.943 0.391-0.391 0.575-0.391 0.943 0.15 0.702 0.391 0.943 0.575 0.391 0.943 0.391 0.702-0.15 0.943-0.391 0.391-0.575 0.391-0.943zM4.667 8c0-0.368-0.15-0.702-0.391-0.943s-0.575-0.391-0.943-0.391-0.702 0.15-0.943 0.391-0.391 0.575-0.391 0.943 0.15 0.702 0.391 0.943 0.575 0.391 0.943 0.391 0.702-0.15 0.943-0.391 0.391-0.575 0.391-0.943z\"></path>\n </svg>\n "
},
{
name: 'more-vertical',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>more-vertical</title>\n <path d=\"M9.333 8c0-0.368-0.15-0.702-0.391-0.943s-0.575-0.391-0.943-0.391-0.702 0.15-0.943 0.391-0.391 0.575-0.391 0.943 0.15 0.702 0.391 0.943 0.575 0.391 0.943 0.391 0.702-0.15 0.943-0.391 0.391-0.575 0.391-0.943zM9.333 3.333c0-0.368-0.15-0.702-0.391-0.943s-0.575-0.391-0.943-0.391-0.702 0.15-0.943 0.391-0.391 0.575-0.391 0.943 0.15 0.702 0.391 0.943 0.575 0.391 0.943 0.391 0.702-0.15 0.943-0.391 0.391-0.575 0.391-0.943zM9.333 12.667c0-0.368-0.15-0.702-0.391-0.943s-0.575-0.391-0.943-0.391-0.702 0.15-0.943 0.391-0.391 0.575-0.391 0.943 0.15 0.702 0.391 0.943 0.575 0.391 0.943 0.391 0.702-0.15 0.943-0.391 0.391-0.575 0.391-0.943z\"></path>\n </svg>\n "
},
{
name: 'mouse-pointer',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>mouse-pointer</title>\n <path d=\"M3.238 3.238l8.189 3.412-3.255 1.105c-0.19 0.065-0.348 0.213-0.417 0.417l-1.105 3.255zM8.673 9.616l3.522 3.522c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-3.522-3.522 3.912-1.329c0.349-0.119 0.535-0.497 0.417-0.845-0.064-0.189-0.204-0.329-0.375-0.401l-11.313-4.713c-0.34-0.141-0.73 0.019-0.872 0.359-0.071 0.171-0.066 0.355 0 0.513l4.713 11.313c0.141 0.34 0.532 0.501 0.872 0.359 0.183-0.077 0.315-0.225 0.375-0.401z\"></path>\n </svg>\n "
},
{
name: 'move',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>move</title>\n <path d=\"M7.333 2.943v4.391h-4.391l0.862-0.862c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-2 2c-0.064 0.064-0.112 0.137-0.145 0.216-0.034 0.081-0.051 0.169-0.051 0.255 0 0.171 0.065 0.341 0.195 0.471l2 2c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-0.862-0.862h4.391v4.391l-0.862-0.862c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943l2 2c0.064 0.064 0.137 0.112 0.216 0.145s0.165 0.051 0.255 0.051c0.087 0 0.174-0.017 0.255-0.051 0.079-0.033 0.152-0.081 0.216-0.145l2-2c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-0.862 0.862v-4.391h4.391l-0.862 0.862c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0l2-2c0.064-0.064 0.112-0.137 0.145-0.216 0.1-0.241 0.052-0.53-0.145-0.727l-2-2c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943l0.862 0.862h-4.391v-4.391l0.862 0.862c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-2-2c-0.064-0.064-0.137-0.112-0.216-0.145s-0.165-0.051-0.255-0.051c-0.087 0-0.174 0.017-0.255 0.051-0.079 0.033-0.152 0.081-0.216 0.145l-2 2c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0z\"></path>\n </svg>\n "
},
{
name: 'music',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>music</title>\n <path d=\"M5.333 12c0 0.369-0.149 0.701-0.391 0.943s-0.574 0.391-0.943 0.391-0.701-0.149-0.943-0.391-0.391-0.574-0.391-0.943 0.149-0.701 0.391-0.943 0.574-0.391 0.943-0.391 0.701 0.149 0.943 0.391 0.391 0.574 0.391 0.943zM14.667 10.667v-8.667c0-0.033-0.003-0.071-0.009-0.109-0.061-0.363-0.404-0.609-0.767-0.548l-8 1.333c-0.317 0.054-0.557 0.328-0.557 0.657v6.357c-0.392-0.227-0.848-0.357-1.333-0.357-0.736 0-1.404 0.299-1.885 0.781s-0.781 1.149-0.781 1.885 0.299 1.404 0.781 1.885 1.149 0.781 1.885 0.781 1.404-0.299 1.885-0.781 0.781-1.149 0.781-1.885v-8.102l6.667-1.111v5.57c-0.392-0.227-0.848-0.357-1.333-0.357-0.736 0-1.404 0.299-1.885 0.781s-0.781 1.149-0.781 1.885 0.299 1.404 0.781 1.885 1.149 0.781 1.885 0.781 1.404-0.299 1.885-0.781 0.781-1.149 0.781-1.885zM13.333 10.667c0 0.369-0.149 0.701-0.391 0.943s-0.574 0.391-0.943 0.391-0.701-0.149-0.943-0.391-0.391-0.574-0.391-0.943 0.149-0.701 0.391-0.943 0.574-0.391 0.943-0.391 0.701 0.149 0.943 0.391 0.391 0.574 0.391 0.943z\"></path>\n </svg>\n "
},
{
name: 'navigation-2',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>navigation-2</title>\n <path d=\"M8.625 1.103c-0.066-0.177-0.205-0.325-0.395-0.395-0.345-0.127-0.729 0.049-0.856 0.395l-4.667 12.667c-0.065 0.179-0.055 0.384 0.047 0.561 0.183 0.32 0.59 0.431 0.909 0.248l4.337-2.477 4.336 2.477c0.166 0.094 0.369 0.117 0.561 0.047 0.345-0.127 0.523-0.511 0.395-0.856zM8 3.262l3.409 9.251-3.078-1.759c-0.211-0.121-0.461-0.113-0.661 0l-3.078 1.759z\"></path>\n </svg>\n "
},
{
name: 'navigation',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>navigation</title>\n <path d=\"M1.715 6.731c-0.175 0.083-0.311 0.24-0.361 0.441-0.089 0.357 0.128 0.719 0.485 0.809l4.945 1.236 1.236 4.945c0.047 0.187 0.174 0.352 0.361 0.441 0.333 0.157 0.73 0.015 0.888-0.317l6-12.667c0.083-0.175 0.089-0.383 0-0.571-0.157-0.333-0.555-0.475-0.888-0.317zM3.969 7.139l9.297-4.404-4.404 9.297-0.881-3.527c-0.061-0.246-0.252-0.425-0.485-0.485z\"></path>\n </svg>\n "
},
{
name: 'octagon',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>octagon</title>\n <path d=\"M5.24 0.667c-0.171 0-0.341 0.065-0.471 0.195l-3.907 3.907c-0.121 0.121-0.195 0.287-0.195 0.471v5.52c0 0.171 0.065 0.341 0.195 0.471l3.907 3.907c0.121 0.121 0.287 0.195 0.471 0.195h5.52c0.171 0 0.341-0.065 0.471-0.195l3.907-3.907c0.121-0.121 0.195-0.287 0.195-0.471v-5.52c0-0.171-0.065-0.341-0.195-0.471l-3.907-3.907c-0.121-0.121-0.287-0.195-0.471-0.195zM5.516 2h4.968l3.516 3.516v4.968l-3.516 3.516h-4.968l-3.516-3.516v-4.968z\"></path>\n </svg>\n "
},
{
name: 'package',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>package</title>\n <path d=\"M9.671 6.27l-1.671 0.967-4.641-2.685 1.674-0.957zM12.641 4.552l-1.637 0.947-4.629-2.67 1.289-0.737c0.075-0.043 0.155-0.070 0.237-0.083 0.145-0.023 0.297 0.002 0.436 0.083zM7.684 15.307c0.094 0.051 0.202 0.079 0.316 0.079 0.115 0 0.224-0.029 0.319-0.081 0.237-0.039 0.467-0.12 0.678-0.24l4.667-2.667c0.412-0.238 0.707-0.599 0.866-1.009 0.089-0.228 0.135-0.471 0.137-0.723v-5.333c0-0.319-0.075-0.621-0.209-0.889-0.015-0.047-0.035-0.093-0.061-0.138-0.031-0.053-0.067-0.099-0.108-0.14-0.021-0.029-0.043-0.057-0.065-0.085-0.153-0.191-0.341-0.352-0.554-0.477l-4.673-2.67c-0.407-0.235-0.867-0.31-1.302-0.243-0.243 0.038-0.477 0.119-0.692 0.242l-2.133 1.219c-0.14 0.027-0.271 0.1-0.369 0.211l-2.166 1.238c-0.255 0.147-0.466 0.342-0.627 0.567-0.040 0.040-0.076 0.087-0.106 0.138-0.026 0.045-0.047 0.092-0.061 0.14-0.027 0.054-0.051 0.109-0.072 0.164-0.088 0.229-0.134 0.472-0.136 0.719v5.338c0.001 0.473 0.165 0.909 0.443 1.252 0.153 0.191 0.341 0.352 0.554 0.477l4.673 2.67c0.216 0.125 0.447 0.205 0.681 0.241zM7.333 8.391v5.327l-4.33-2.474c-0.074-0.043-0.138-0.099-0.19-0.163-0.093-0.115-0.147-0.258-0.147-0.415v-4.975zM8.667 13.719v-5.327l4.667-2.699v4.975c-0.001 0.081-0.017 0.164-0.047 0.241-0.053 0.137-0.15 0.256-0.284 0.333z\"></path>\n </svg>\n "
},
{
name: 'paperclip',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>paperclip</title>\n <path d=\"M13.822 6.895l-6.127 6.127c-0.651 0.651-1.504 0.977-2.359 0.977s-1.707-0.325-2.359-0.977-0.977-1.504-0.977-2.359 0.325-1.707 0.977-2.359l6.127-6.127c0.391-0.391 0.902-0.586 1.415-0.586s1.024 0.195 1.415 0.586 0.586 0.902 0.586 1.415-0.195 1.024-0.586 1.415l-6.133 6.127c-0.131 0.131-0.301 0.196-0.472 0.196s-0.341-0.065-0.472-0.195-0.195-0.3-0.195-0.472 0.065-0.341 0.195-0.472l5.66-5.653c0.261-0.26 0.261-0.682 0.001-0.943s-0.682-0.261-0.943-0.001l-5.66 5.653c-0.391 0.391-0.586 0.904-0.586 1.415s0.195 1.024 0.586 1.415 0.904 0.586 1.415 0.586 1.024-0.195 1.415-0.586l6.133-6.127c0.651-0.651 0.977-1.505 0.977-2.358s-0.326-1.707-0.977-2.358-1.505-0.977-2.358-0.977-1.707 0.326-2.358 0.977l-6.127 6.127c-0.911 0.911-1.367 2.107-1.367 3.301s0.456 2.39 1.367 3.301 2.107 1.367 3.301 1.367 2.39-0.456 3.301-1.367l6.127-6.127c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0z\"></path>\n </svg>\n "
},
{
name: 'pause-circle',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>pause-circle</title>\n <path d=\"M15.333 8c0-2.025-0.821-3.859-2.148-5.185s-3.161-2.148-5.185-2.148-3.859 0.821-5.185 2.148-2.148 3.161-2.148 5.185 0.821 3.859 2.148 5.185 3.161 2.148 5.185 2.148 3.859-0.821 5.185-2.148 2.148-3.161 2.148-5.185zM14 8c0 1.657-0.671 3.156-1.757 4.243s-2.585 1.757-4.243 1.757-3.156-0.671-4.243-1.757-1.757-2.585-1.757-4.243 0.671-3.156 1.757-4.243 2.585-1.757 4.243-1.757 3.156 0.671 4.243 1.757 1.757 2.585 1.757 4.243zM7.333 10v-4c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v4c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667zM10 10v-4c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v4c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'pause',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>pause</title>\n <path d=\"M4 2c-0.368 0-0.667 0.299-0.667 0.667v10.667c0 0.368 0.299 0.667 0.667 0.667h2.667c0.368 0 0.667-0.299 0.667-0.667v-10.667c0-0.368-0.299-0.667-0.667-0.667zM4.667 3.333h1.333v9.333h-1.333zM9.333 2c-0.368 0-0.667 0.299-0.667 0.667v10.667c0 0.368 0.299 0.667 0.667 0.667h2.667c0.368 0 0.667-0.299 0.667-0.667v-10.667c0-0.368-0.299-0.667-0.667-0.667zM10 3.333h1.333v9.333h-1.333z\"></path>\n </svg>\n "
},
{
name: 'pen-tool',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>pen-tool</title>\n <path d=\"M12.471 9.138l0.195-0.195 1.057 1.057-3.724 3.724-1.057-1.057 0.195-0.195zM1.501 0.688c-0.023-0.006-0.047-0.011-0.071-0.014-0.095-0.015-0.189-0.007-0.278 0.017s-0.173 0.068-0.247 0.13c-0.061 0.051-0.114 0.114-0.154 0.186-0.040 0.071-0.066 0.147-0.077 0.225-0.013 0.085-0.010 0.17 0.008 0.247 0.001 0.003 0.002 0.007 0.003 0.011l0.003 0.011 2.331 9.655c0.063 0.259 0.269 0.446 0.517 0.497l3.843 0.769c-0.094 0.239-0.045 0.522 0.149 0.715l2 2c0.261 0.261 0.683 0.261 0.943 0l4.667-4.667c0.261-0.261 0.261-0.683 0-0.943l-2-2c-0.193-0.193-0.476-0.243-0.715-0.149l-0.769-3.843c-0.052-0.261-0.251-0.456-0.497-0.517zM9.333 7.333c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586c-0.309 0-0.601 0.070-0.862 0.195l-2.991-2.991 6.95 1.677 0.847 4.233-2.829 2.829-4.233-0.847-1.678-6.949 2.991 2.991c-0.125 0.261-0.195 0.553-0.195 0.862 0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414zM8 7.333c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195-0.35-0.074-0.471-0.195-0.195-0.287-0.195-0.471c0-0.18 0.071-0.343 0.187-0.463 0.003-0.003 0.005-0.005 0.009-0.008s0.005-0.005 0.008-0.009c0.12-0.116 0.283-0.187 0.463-0.187 0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471z\"></path>\n </svg>\n "
},
{
name: 'percent',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>percent</title>\n <path d=\"M12.195 2.862l-9.333 9.333c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0l9.333-9.333c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0zM6.667 4.333c0-0.644-0.262-1.229-0.683-1.65s-1.006-0.683-1.65-0.683-1.229 0.262-1.65 0.683-0.683 1.006-0.683 1.65 0.262 1.229 0.683 1.65 1.006 0.683 1.65 0.683 1.229-0.262 1.65-0.683 0.683-1.006 0.683-1.65zM5.333 4.333c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293-0.525-0.111-0.707-0.293-0.293-0.431-0.293-0.707 0.111-0.525 0.293-0.707 0.431-0.293 0.707-0.293 0.525 0.111 0.707 0.293 0.293 0.431 0.293 0.707zM14 11.667c0-0.644-0.262-1.229-0.683-1.65s-1.006-0.683-1.65-0.683-1.229 0.262-1.65 0.683-0.683 1.006-0.683 1.65 0.262 1.229 0.683 1.65 1.006 0.683 1.65 0.683 1.229-0.262 1.65-0.683 0.683-1.006 0.683-1.65zM12.667 11.667c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293-0.525-0.111-0.707-0.293-0.293-0.431-0.293-0.707 0.111-0.525 0.293-0.707 0.431-0.293 0.707-0.293 0.525 0.111 0.707 0.293 0.293 0.431 0.293 0.707z\"></path>\n </svg>\n "
},
{
name: 'phone-call',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>phone-call</title>\n <path d=\"M9.906 3.987c0.629 0.123 1.16 0.455 1.54 0.916 0.28 0.34 0.478 0.749 0.568 1.195 0.073 0.361 0.425 0.594 0.785 0.521s0.594-0.425 0.521-0.785c-0.133-0.661-0.427-1.271-0.846-1.779-0.569-0.691-1.371-1.193-2.313-1.376-0.361-0.071-0.711 0.165-0.782 0.527s0.165 0.711 0.527 0.782zM9.96 1.329c1.333 0.148 2.495 0.775 3.337 1.696 0.745 0.816 1.239 1.863 1.375 3.013 0.043 0.365 0.375 0.627 0.74 0.584s0.627-0.375 0.584-0.74c-0.169-1.431-0.784-2.737-1.714-3.756-1.052-1.152-2.508-1.937-4.174-2.122-0.366-0.041-0.695 0.223-0.736 0.589s0.223 0.695 0.589 0.736zM15.333 11.28c0.011-0.476-0.157-0.936-0.449-1.295-0.307-0.377-0.753-0.645-1.283-0.72-0.533-0.065-1.13-0.209-1.724-0.431-0.289-0.106-0.595-0.145-0.896-0.116-0.442 0.043-0.871 0.233-1.213 0.57l-0.48 0.48c-1.18-0.745-2.24-1.778-3.055-3.059l0.484-0.484c0.215-0.22 0.375-0.484 0.471-0.771 0.141-0.421 0.143-0.891-0.026-1.341-0.193-0.502-0.345-1.096-0.429-1.73-0.069-0.477-0.303-0.898-0.642-1.203-0.359-0.323-0.837-0.519-1.351-0.513h-1.997c-0.059 0-0.121 0.003-0.182 0.008-0.549 0.050-1.028 0.319-1.355 0.711s-0.505 0.911-0.455 1.466c0.2 2.051 0.91 4.162 2.144 6.068 1.001 1.609 2.432 3.082 4.199 4.204 1.712 1.131 3.789 1.908 6.057 2.154 0.061 0.006 0.127 0.009 0.192 0.009 0.552-0.002 1.052-0.229 1.412-0.591s0.582-0.865 0.58-1.414zM14 11.28v2c0.001 0.187-0.073 0.353-0.193 0.475s-0.286 0.197-0.471 0.197l-0.059-0.003c-2.040-0.222-3.915-0.925-5.449-1.939-1.619-1.029-2.906-2.359-3.801-3.796-1.131-1.747-1.77-3.654-1.949-5.492-0.016-0.179 0.043-0.351 0.153-0.483s0.269-0.22 0.452-0.237l2.058-0.003c0.181-0.002 0.338 0.063 0.458 0.171 0.113 0.103 0.192 0.244 0.215 0.405 0.095 0.715 0.272 1.411 0.505 2.017 0.054 0.144 0.053 0.298 0.007 0.439-0.033 0.097-0.087 0.187-0.161 0.263l-0.841 0.841c-0.216 0.216-0.253 0.543-0.108 0.801 1.056 1.857 2.559 3.305 4.254 4.252 0.265 0.148 0.588 0.096 0.797-0.111l0.847-0.847c0.111-0.109 0.251-0.171 0.399-0.186 0.101-0.010 0.207 0.003 0.306 0.040 0.681 0.254 1.38 0.424 2.023 0.503 0.161 0.023 0.308 0.111 0.41 0.237 0.098 0.121 0.154 0.275 0.151 0.455z\"></path>\n </svg>\n "
},
{
name: 'phone-forwarded',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>phone-forwarded</title>\n <path d=\"M10 4h3.724l-1.529 1.529c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0l2.667-2.667c0.064-0.064 0.112-0.137 0.145-0.216s0.051-0.165 0.051-0.255-0.018-0.177-0.051-0.255c-0.033-0.079-0.081-0.152-0.145-0.216l-2.667-2.667c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943l1.529 1.529h-3.724c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667zM15.333 11.28c0.011-0.476-0.157-0.936-0.449-1.295-0.307-0.377-0.753-0.645-1.283-0.72-0.533-0.065-1.13-0.209-1.724-0.431-0.289-0.106-0.595-0.145-0.896-0.116-0.442 0.043-0.871 0.233-1.213 0.57l-0.48 0.48c-1.18-0.745-2.24-1.778-3.055-3.059l0.484-0.484c0.215-0.22 0.375-0.484 0.471-0.771 0.141-0.421 0.143-0.891-0.026-1.341-0.193-0.502-0.345-1.096-0.429-1.73-0.069-0.477-0.303-0.898-0.642-1.203-0.359-0.323-0.837-0.519-1.351-0.513h-1.997c-0.059 0-0.121 0.003-0.182 0.008-0.549 0.050-1.028 0.319-1.355 0.711s-0.505 0.911-0.455 1.466c0.2 2.051 0.91 4.162 2.144 6.068 1.001 1.609 2.432 3.082 4.199 4.204 1.712 1.131 3.789 1.908 6.057 2.154 0.061 0.006 0.127 0.009 0.192 0.009 0.552-0.002 1.052-0.229 1.412-0.591s0.582-0.865 0.58-1.414zM14 11.28v2c0.001 0.187-0.073 0.353-0.193 0.475s-0.286 0.197-0.471 0.197l-0.059-0.003c-2.040-0.222-3.915-0.925-5.449-1.939-1.619-1.029-2.906-2.359-3.801-3.796-1.131-1.747-1.77-3.654-1.949-5.492-0.016-0.179 0.043-0.351 0.153-0.483s0.269-0.22 0.452-0.237l2.058-0.003c0.181-0.002 0.338 0.063 0.458 0.171 0.113 0.103 0.192 0.244 0.215 0.405 0.095 0.715 0.272 1.411 0.505 2.017 0.054 0.144 0.053 0.298 0.007 0.439-0.033 0.097-0.087 0.187-0.161 0.263l-0.841 0.841c-0.216 0.216-0.253 0.543-0.108 0.801 1.056 1.857 2.559 3.305 4.254 4.252 0.265 0.148 0.588 0.096 0.797-0.111l0.847-0.847c0.111-0.109 0.251-0.171 0.399-0.186 0.101-0.010 0.207 0.003 0.306 0.040 0.681 0.254 1.38 0.424 2.023 0.503 0.161 0.023 0.308 0.111 0.41 0.237 0.098 0.121 0.154 0.275 0.151 0.455z\"></path>\n </svg>\n "
},
{
name: 'phone-incoming',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>phone-incoming</title>\n <path d=\"M14.862 0.195l-3.529 3.529v-2.391c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v4c0 0.278 0.17 0.516 0.411 0.616 0.079 0.033 0.165 0.051 0.255 0.051h4c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-2.391l3.529-3.529c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0zM15.333 11.28c0.011-0.476-0.157-0.936-0.449-1.295-0.307-0.377-0.753-0.645-1.283-0.72-0.533-0.065-1.13-0.209-1.724-0.431-0.289-0.106-0.595-0.145-0.896-0.116-0.442 0.043-0.871 0.233-1.213 0.57l-0.48 0.48c-1.18-0.745-2.24-1.778-3.055-3.059l0.484-0.484c0.215-0.22 0.375-0.484 0.471-0.771 0.141-0.421 0.143-0.891-0.026-1.341-0.193-0.502-0.345-1.096-0.429-1.73-0.069-0.477-0.303-0.898-0.642-1.203-0.359-0.323-0.837-0.519-1.351-0.513h-1.997c-0.059 0-0.121 0.003-0.182 0.008-0.549 0.050-1.028 0.319-1.355 0.711s-0.505 0.911-0.455 1.466c0.2 2.051 0.91 4.162 2.144 6.068 1.001 1.609 2.432 3.082 4.199 4.204 1.712 1.131 3.789 1.908 6.057 2.154 0.061 0.006 0.127 0.009 0.192 0.009 0.552-0.002 1.052-0.229 1.412-0.591s0.582-0.865 0.58-1.414zM14 11.28v2c0.001 0.187-0.073 0.353-0.193 0.475s-0.286 0.197-0.471 0.197l-0.059-0.003c-2.040-0.222-3.915-0.925-5.449-1.939-1.619-1.029-2.906-2.359-3.801-3.796-1.131-1.747-1.77-3.654-1.949-5.492-0.016-0.179 0.043-0.351 0.153-0.483s0.269-0.22 0.452-0.237l2.058-0.003c0.181-0.002 0.338 0.063 0.458 0.171 0.113 0.103 0.192 0.244 0.215 0.405 0.095 0.715 0.272 1.411 0.505 2.017 0.054 0.144 0.053 0.298 0.007 0.439-0.033 0.097-0.087 0.187-0.161 0.263l-0.841 0.841c-0.216 0.216-0.253 0.543-0.108 0.801 1.056 1.857 2.559 3.305 4.254 4.252 0.265 0.148 0.588 0.096 0.797-0.111l0.847-0.847c0.111-0.109 0.251-0.171 0.399-0.186 0.101-0.010 0.207 0.003 0.306 0.040 0.681 0.254 1.38 0.424 2.023 0.503 0.161 0.023 0.308 0.111 0.41 0.237 0.098 0.121 0.154 0.275 0.151 0.455z\"></path>\n </svg>\n "
},
{
name: 'phone-missed',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>phone-missed</title>\n <path d=\"M10.862 1.138l1.529 1.529-1.529 1.529c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0l1.529-1.529 1.529 1.529c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-1.529-1.529 1.529-1.529c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-1.529 1.529-1.529-1.529c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943zM15.333 11.28c0.011-0.476-0.157-0.936-0.449-1.295-0.307-0.377-0.753-0.645-1.283-0.72-0.533-0.065-1.13-0.209-1.724-0.431-0.289-0.106-0.595-0.145-0.896-0.116-0.442 0.043-0.871 0.233-1.213 0.57l-0.48 0.48c-1.18-0.745-2.24-1.778-3.055-3.059l0.484-0.484c0.215-0.22 0.375-0.484 0.471-0.771 0.141-0.421 0.143-0.891-0.026-1.341-0.193-0.502-0.345-1.096-0.429-1.73-0.069-0.477-0.303-0.898-0.642-1.203-0.359-0.323-0.837-0.519-1.351-0.513h-1.997c-0.059 0-0.121 0.003-0.182 0.008-0.549 0.050-1.028 0.319-1.355 0.711s-0.505 0.911-0.455 1.466c0.2 2.051 0.91 4.162 2.144 6.068 1.001 1.609 2.432 3.082 4.199 4.204 1.712 1.131 3.789 1.908 6.057 2.154 0.061 0.006 0.127 0.009 0.192 0.009 0.552-0.002 1.052-0.229 1.412-0.591s0.582-0.865 0.58-1.414zM14 11.28v2c0.001 0.187-0.073 0.353-0.193 0.475s-0.286 0.197-0.471 0.197l-0.059-0.003c-2.040-0.222-3.915-0.925-5.449-1.939-1.619-1.029-2.906-2.359-3.801-3.796-1.131-1.747-1.77-3.654-1.949-5.492-0.016-0.179 0.043-0.351 0.153-0.483s0.269-0.22 0.452-0.237l2.058-0.003c0.181-0.002 0.338 0.063 0.458 0.171 0.113 0.103 0.192 0.244 0.215 0.405 0.095 0.715 0.272 1.411 0.505 2.017 0.054 0.144 0.053 0.298 0.007 0.439-0.033 0.097-0.087 0.187-0.161 0.263l-0.841 0.841c-0.216 0.216-0.253 0.543-0.108 0.801 1.056 1.857 2.559 3.305 4.254 4.252 0.265 0.148 0.588 0.096 0.797-0.111l0.847-0.847c0.111-0.109 0.251-0.171 0.399-0.186 0.101-0.010 0.207 0.003 0.306 0.040 0.681 0.254 1.38 0.424 2.023 0.503 0.161 0.023 0.308 0.111 0.41 0.237 0.098 0.121 0.154 0.275 0.151 0.455z\"></path>\n </svg>\n "
},
{
name: 'phone-off',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>phone-off</title>\n <path d=\"M4.019 8.177c-1.121-1.729-1.76-3.627-1.943-5.457-0.016-0.177 0.043-0.349 0.153-0.481s0.269-0.22 0.452-0.237l2.059-0.003c0.181-0.002 0.338 0.063 0.458 0.171 0.113 0.103 0.192 0.244 0.215 0.405 0.095 0.715 0.272 1.411 0.505 2.017 0.054 0.144 0.053 0.298 0.007 0.439-0.033 0.097-0.087 0.187-0.161 0.263l-0.841 0.841c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0l0.853-0.853c0.215-0.22 0.375-0.484 0.471-0.771 0.141-0.421 0.143-0.891-0.026-1.341-0.193-0.502-0.345-1.096-0.429-1.73-0.069-0.477-0.303-0.898-0.642-1.203-0.359-0.324-0.837-0.519-1.351-0.514h-1.997c-0.059 0-0.121 0.003-0.182 0.008-0.549 0.050-1.028 0.319-1.355 0.711s-0.505 0.911-0.455 1.467c0.204 2.041 0.914 4.143 2.151 6.050 0.2 0.309 0.613 0.397 0.922 0.197s0.397-0.613 0.197-0.922zM6.19 10.753l0.947-0.947c0.619 0.552 1.279 1.021 1.933 1.383 0.265 0.147 0.587 0.095 0.795-0.111l0.847-0.847c0.111-0.109 0.251-0.171 0.399-0.186 0.101-0.010 0.207 0.003 0.306 0.040 0.681 0.254 1.38 0.424 2.023 0.503 0.16 0.023 0.305 0.109 0.408 0.235 0.097 0.119 0.154 0.27 0.153 0.433v2.004c0.001 0.187-0.073 0.353-0.193 0.475s-0.286 0.197-0.471 0.197l-0.059-0.003c-2.040-0.222-3.915-0.925-5.449-1.939-0.605-0.384-1.159-0.807-1.638-1.237zM14.862 0.195l-8.154 8.153c-0.021 0.016-0.041 0.034-0.059 0.053s-0.037 0.039-0.053 0.060l-6.4 6.4c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0l4.108-4.108c0.549 0.499 1.176 0.98 1.847 1.406 1.712 1.131 3.789 1.908 6.057 2.154 0.061 0.006 0.127 0.009 0.192 0.009 0.552-0.002 1.052-0.229 1.412-0.591s0.582-0.865 0.58-1.414v-1.996c0.003-0.482-0.166-0.933-0.455-1.286-0.307-0.374-0.75-0.639-1.278-0.713-0.533-0.065-1.13-0.209-1.724-0.431-0.289-0.106-0.595-0.145-0.896-0.116-0.442 0.043-0.871 0.233-1.213 0.57l-0.48 0.48c-0.406-0.258-0.814-0.563-1.207-0.907l7.723-7.722c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0z\"></path>\n </svg>\n "
},
{
name: 'phone-outgoing',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>phone-outgoing</title>\n <path d=\"M11.138 5.805l3.529-3.529v2.391c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-4c0-0.091-0.018-0.177-0.051-0.255s-0.081-0.152-0.144-0.215c-0.001-0.001-0.001-0.001-0.001-0.001-0.061-0.061-0.135-0.111-0.215-0.144-0.079-0.033-0.165-0.051-0.255-0.051h-4c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h2.391l-3.529 3.529c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0zM15.333 11.28c0.011-0.476-0.157-0.936-0.449-1.295-0.307-0.377-0.753-0.645-1.283-0.72-0.533-0.065-1.13-0.209-1.724-0.431-0.289-0.106-0.595-0.145-0.896-0.116-0.442 0.043-0.871 0.233-1.213 0.57l-0.48 0.48c-1.18-0.745-2.24-1.778-3.055-3.059l0.484-0.484c0.215-0.22 0.375-0.484 0.471-0.771 0.141-0.421 0.143-0.891-0.026-1.341-0.193-0.502-0.345-1.096-0.429-1.73-0.069-0.477-0.303-0.898-0.642-1.203-0.359-0.323-0.837-0.519-1.351-0.513h-1.997c-0.059 0-0.121 0.003-0.182 0.008-0.549 0.050-1.028 0.319-1.355 0.711s-0.505 0.911-0.455 1.466c0.2 2.051 0.91 4.162 2.144 6.068 1.001 1.609 2.432 3.082 4.199 4.204 1.712 1.131 3.789 1.908 6.057 2.154 0.061 0.006 0.127 0.009 0.192 0.009 0.552-0.002 1.052-0.229 1.412-0.591s0.582-0.865 0.58-1.414zM14 11.28v2c0.001 0.187-0.073 0.353-0.193 0.475s-0.286 0.197-0.471 0.197l-0.059-0.003c-2.040-0.222-3.915-0.925-5.449-1.939-1.619-1.029-2.906-2.359-3.801-3.796-1.131-1.747-1.77-3.654-1.949-5.492-0.016-0.179 0.043-0.351 0.153-0.483s0.269-0.22 0.452-0.237l2.058-0.003c0.181-0.002 0.338 0.063 0.458 0.171 0.113 0.103 0.192 0.244 0.215 0.405 0.095 0.715 0.272 1.411 0.505 2.017 0.054 0.144 0.053 0.298 0.007 0.439-0.033 0.097-0.087 0.187-0.161 0.263l-0.841 0.841c-0.216 0.216-0.253 0.543-0.108 0.801 1.056 1.857 2.559 3.305 4.254 4.252 0.265 0.148 0.588 0.096 0.797-0.111l0.847-0.847c0.111-0.109 0.251-0.171 0.399-0.186 0.101-0.010 0.207 0.003 0.306 0.040 0.681 0.254 1.38 0.424 2.023 0.503 0.161 0.023 0.308 0.111 0.41 0.237 0.098 0.121 0.154 0.275 0.151 0.455z\"></path>\n </svg>\n "
},
{
name: 'phone',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>phone</title>\n <path d=\"M15.333 11.28c0.011-0.476-0.157-0.936-0.449-1.295-0.307-0.377-0.753-0.645-1.283-0.72-0.533-0.065-1.13-0.209-1.724-0.431-0.289-0.106-0.595-0.145-0.896-0.116-0.442 0.043-0.871 0.233-1.213 0.57l-0.48 0.48c-1.18-0.745-2.24-1.778-3.055-3.059l0.484-0.484c0.215-0.22 0.375-0.484 0.471-0.771 0.141-0.421 0.143-0.891-0.026-1.341-0.193-0.502-0.345-1.096-0.429-1.73-0.069-0.477-0.303-0.898-0.642-1.203-0.359-0.323-0.837-0.519-1.351-0.513h-1.997c-0.059 0-0.121 0.003-0.182 0.008-0.549 0.050-1.028 0.319-1.355 0.711s-0.505 0.911-0.455 1.466c0.2 2.051 0.91 4.162 2.144 6.068 1.001 1.609 2.432 3.082 4.199 4.204 1.712 1.131 3.789 1.908 6.057 2.154 0.061 0.006 0.127 0.009 0.192 0.009 0.552-0.002 1.052-0.229 1.412-0.591s0.582-0.865 0.58-1.414zM14 11.28v2c0.001 0.187-0.073 0.353-0.193 0.475s-0.286 0.197-0.471 0.197l-0.059-0.003c-2.040-0.222-3.915-0.925-5.449-1.939-1.619-1.029-2.906-2.359-3.801-3.796-1.131-1.747-1.77-3.654-1.949-5.492-0.016-0.179 0.043-0.351 0.153-0.483s0.269-0.22 0.452-0.237l2.058-0.003c0.181-0.002 0.338 0.063 0.458 0.171 0.113 0.103 0.192 0.244 0.215 0.405 0.095 0.715 0.272 1.411 0.505 2.017 0.054 0.144 0.053 0.298 0.007 0.439-0.033 0.097-0.087 0.187-0.161 0.263l-0.841 0.841c-0.216 0.216-0.253 0.543-0.108 0.801 1.056 1.857 2.559 3.305 4.254 4.252 0.265 0.148 0.588 0.096 0.797-0.111l0.847-0.847c0.111-0.109 0.251-0.171 0.399-0.186 0.101-0.010 0.207 0.003 0.306 0.040 0.681 0.254 1.38 0.424 2.023 0.503 0.161 0.023 0.308 0.111 0.41 0.237 0.098 0.121 0.154 0.275 0.151 0.455z\"></path>\n </svg>\n "
},
{
name: 'pie-chart',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>pie-chart</title>\n <path d=\"M13.526 10.334c-0.645 1.526-1.847 2.645-3.271 3.223s-3.066 0.611-4.592-0.034-2.645-1.847-3.223-3.271-0.612-3.067 0.033-4.593c0.624-1.476 1.768-2.571 3.126-3.162 0.337-0.147 0.492-0.54 0.345-0.877s-0.54-0.492-0.877-0.345c-1.659 0.723-3.059 2.063-3.822 3.865-0.789 1.865-0.746 3.875-0.041 5.613s2.075 3.209 3.939 3.998 3.875 0.746 5.613 0.041 3.209-2.075 3.998-3.939c0.143-0.339-0.015-0.73-0.355-0.874s-0.73 0.015-0.874 0.355zM13.963 7.333h-5.297v-5.297c1.391 0.153 2.637 0.782 3.576 1.721s1.567 2.185 1.721 3.576zM15.333 8c0-2.025-0.821-3.859-2.148-5.185s-3.161-2.148-5.185-2.148c-0.368 0-0.667 0.299-0.667 0.667v6.667c0 0.368 0.299 0.667 0.667 0.667h6.667c0.368 0 0.667-0.299 0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'play-circle',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>play-circle</title>\n <path d=\"M15.333 8c0-2.025-0.821-3.859-2.148-5.185s-3.161-2.148-5.185-2.148-3.859 0.821-5.185 2.148-2.148 3.161-2.148 5.185 0.821 3.859 2.148 5.185 3.161 2.148 5.185 2.148 3.859-0.821 5.185-2.148 2.148-3.161 2.148-5.185zM14 8c0 1.657-0.671 3.156-1.757 4.243s-2.585 1.757-4.243 1.757-3.156-0.671-4.243-1.757-1.757-2.585-1.757-4.243 0.671-3.156 1.757-4.243 2.585-1.757 4.243-1.757 3.156 0.671 4.243 1.757 1.757 2.585 1.757 4.243zM7.037 4.779c-0.104-0.070-0.232-0.112-0.37-0.112-0.368 0-0.667 0.299-0.667 0.667v5.333c-0.001 0.125 0.035 0.255 0.112 0.37 0.204 0.307 0.618 0.389 0.925 0.185l4-2.667c0.069-0.045 0.133-0.108 0.185-0.185 0.204-0.307 0.121-0.72-0.185-0.925zM7.333 6.579l2.131 1.421-2.131 1.421z\"></path>\n </svg>\n "
},
{
name: 'play',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>play</title>\n <path d=\"M3.694 1.439c-0.102-0.067-0.227-0.106-0.361-0.106-0.368 0-0.667 0.299-0.667 0.667v12c-0.001 0.121 0.033 0.248 0.106 0.361 0.199 0.31 0.611 0.399 0.921 0.2l9.333-6c0.076-0.048 0.146-0.116 0.2-0.2 0.199-0.31 0.109-0.722-0.2-0.921zM4 3.221l7.434 4.779-7.434 4.779z\"></path>\n </svg>\n "
},
{
name: 'plus-circle',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>plus-circle</title>\n <path d=\"M15.333 8c0-2.025-0.821-3.859-2.148-5.185s-3.161-2.148-5.185-2.148-3.859 0.821-5.185 2.148-2.148 3.161-2.148 5.185 0.821 3.859 2.148 5.185 3.161 2.148 5.185 2.148 3.859-0.821 5.185-2.148 2.148-3.161 2.148-5.185zM14 8c0 1.657-0.671 3.156-1.757 4.243s-2.585 1.757-4.243 1.757-3.156-0.671-4.243-1.757-1.757-2.585-1.757-4.243 0.671-3.156 1.757-4.243 2.585-1.757 4.243-1.757 3.156 0.671 4.243 1.757 1.757 2.585 1.757 4.243zM5.333 8.667h2v2c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-2h2c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-2v-2c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v2h-2c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'plus-square',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>plus-square</title>\n <path d=\"M3.333 1.333c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v9.333c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h9.333c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-9.333c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586zM3.333 2.667h9.333c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v9.333c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-9.333c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-9.333c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195zM5.333 8.667h2v2c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-2h2c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-2v-2c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v2h-2c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'plus',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>plus</title>\n <path d=\"M3.333 8.667h4v4c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-4h4c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-4v-4c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v4h-4c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'pocket',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>pocket</title>\n <path d=\"M2.667 1.333c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v4c0 2.025 0.821 3.859 2.148 5.185s3.161 2.148 5.185 2.148 3.859-0.821 5.185-2.148 2.148-3.161 2.148-5.185v-4c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586zM2.667 2.667h10.667c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v4c0 1.657-0.671 3.156-1.757 4.243s-2.585 1.757-4.243 1.757-3.156-0.671-4.243-1.757-1.757-2.585-1.757-4.243v-4c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195zM4.862 7.138l2.667 2.667c0.261 0.261 0.683 0.261 0.943 0l2.667-2.667c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-2.195 2.195-2.195-2.195c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943z\"></path>\n </svg>\n "
},
{
name: 'power',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>power</title>\n <path d=\"M11.769 4.898c1.041 1.042 1.562 2.405 1.561 3.771s-0.521 2.729-1.563 3.771-2.405 1.562-3.771 1.561-2.729-0.521-3.771-1.563c-1.041-1.041-1.561-2.405-1.561-3.771s0.521-2.729 1.561-3.771c0.26-0.261 0.26-0.683 0-0.943s-0.683-0.26-0.943 0c-1.301 1.301-1.952 3.008-1.952 4.713s0.651 3.412 1.952 4.713c1.301 1.302 3.009 1.953 4.714 1.953s3.413-0.651 4.715-1.952 1.953-3.009 1.953-4.714-0.651-3.413-1.952-4.715c-0.26-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943zM7.333 1.333v6.667c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-6.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'printer',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>printer</title>\n <path d=\"M11.333 5.333h-6.667v-3.333h6.667zM3.333 12.667v2c0 0.368 0.299 0.667 0.667 0.667h8c0.368 0 0.667-0.299 0.667-0.667v-2h0.667c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-3.333c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586h-0.667v-4c0-0.368-0.299-0.667-0.667-0.667h-8c-0.368 0-0.667 0.299-0.667 0.667v4h-0.667c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v3.333c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586zM4 8.667c-0.368 0-0.667 0.299-0.667 0.667v2h-0.667c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-3.333c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195h10.667c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v3.333c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-0.667v-2c0-0.368-0.299-0.667-0.667-0.667zM4.667 10h6.667v4h-6.667z\"></path>\n </svg>\n "
},
{
name: 'radio',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>radio</title>\n <path d=\"M10 8c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414zM8.667 8c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195-0.35-0.074-0.471-0.195-0.195-0.287-0.195-0.471 0.074-0.35 0.195-0.471 0.287-0.195 0.471-0.195 0.35 0.074 0.471 0.195 0.195 0.287 0.195 0.471zM10.355 5.645c0.651 0.651 0.977 1.503 0.977 2.357s-0.325 1.706-0.975 2.357c-0.26 0.261-0.26 0.683 0.001 0.943s0.683 0.26 0.943-0.001c0.911-0.911 1.365-2.107 1.365-3.301s-0.457-2.389-1.369-3.299c-0.261-0.26-0.683-0.26-0.943 0.001s-0.26 0.683 0.001 0.943zM5.645 10.355c-0.651-0.65-0.977-1.502-0.978-2.356s0.325-1.706 0.975-2.357c0.26-0.261 0.26-0.683-0.001-0.943s-0.683-0.26-0.943 0.001c-0.91 0.911-1.365 2.107-1.365 3.3s0.457 2.389 1.369 3.299c0.261 0.26 0.683 0.26 0.943-0.001s0.26-0.683-0.001-0.943zM12.242 3.758c1.171 1.172 1.757 2.706 1.757 4.242s-0.585 3.070-1.757 4.242c-0.26 0.261-0.26 0.683 0 0.943s0.683 0.26 0.943 0c1.431-1.431 2.147-3.309 2.147-5.185s-0.716-3.753-2.147-5.185c-0.26-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943zM3.758 12.242c-1.171-1.172-1.757-2.706-1.757-4.242s0.585-3.070 1.757-4.242c0.26-0.261 0.26-0.683 0-0.943s-0.683-0.26-0.943 0c-1.431 1.431-2.147 3.309-2.147 5.185s0.716 3.753 2.147 5.185c0.26 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943z\"></path>\n </svg>\n "
},
{
name: 'refresh-ccw',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>refresh-ccw</title>\n <path d=\"M14.289 5.777c-0.614-1.735-1.875-3.058-3.413-3.793s-3.36-0.882-5.095-0.268c-0.981 0.347-1.835 0.903-2.496 1.576l-1.951 1.833v-2.459c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v3.999c0 0.010 0 0.020 0.001 0.029 0.003 0.077 0.019 0.15 0.046 0.217s0.065 0.132 0.115 0.19c0.008 0.009 0.016 0.018 0.024 0.026 0.061 0.063 0.134 0.115 0.216 0.15 0.079 0.034 0.166 0.053 0.257 0.055 0.003 0 0.005 0 0.007 0h4c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.666-0.667-0.666h-2.317l1.887-1.773c0.518-0.528 1.198-0.973 1.989-1.253 1.389-0.491 2.843-0.374 4.076 0.215s2.239 1.645 2.731 3.034c0.123 0.347 0.504 0.529 0.851 0.406s0.529-0.504 0.406-0.851zM13.65 10l-1.867 1.754c-1.056 1.057-2.42 1.577-3.786 1.577s-2.73-0.52-3.771-1.561c-0.593-0.593-1.015-1.287-1.255-1.987-0.12-0.348-0.499-0.533-0.847-0.414s-0.533 0.499-0.414 0.847c0.307 0.893 0.838 1.761 1.574 2.497 1.302 1.301 3.009 1.952 4.715 1.951s3.412-0.652 4.699-1.939l1.97-1.85v2.459c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-3.999c0-0.010 0-0.020-0.001-0.029-0.003-0.077-0.019-0.15-0.046-0.217s-0.065-0.132-0.115-0.19c-0.008-0.009-0.016-0.018-0.024-0.026-0.061-0.063-0.134-0.115-0.216-0.15-0.079-0.034-0.166-0.053-0.257-0.055-0.003 0-0.005 0-0.007 0h-4c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'refresh-cw',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>refresh-cw</title>\n <path d=\"M2.969 6.223c0.491-1.389 1.498-2.446 2.731-3.035s2.688-0.706 4.076-0.215c0.791 0.28 1.471 0.725 1.989 1.253l1.887 1.773h-2.317c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h3.998c0.003 0 0.006 0 0.009 0 0.091-0.001 0.179-0.021 0.257-0.055s0.153-0.084 0.216-0.15c0.008-0.009 0.016-0.017 0.024-0.026 0.050-0.058 0.089-0.122 0.115-0.19s0.043-0.141 0.046-0.217c0.001-0.010 0.001-0.019 0.001-0.029v-4c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v2.459l-1.951-1.833c-0.661-0.673-1.514-1.229-2.495-1.576-1.735-0.614-3.557-0.466-5.095 0.268s-2.799 2.057-3.413 3.793c-0.123 0.347 0.059 0.727 0.405 0.851s0.728-0.059 0.851-0.406zM1.333 10.875l1.97 1.851c1.286 1.287 2.993 1.939 4.699 1.939s3.413-0.65 4.715-1.951c0.736-0.736 1.267-1.605 1.574-2.497 0.12-0.348-0.065-0.727-0.414-0.847s-0.727 0.065-0.847 0.414c-0.241 0.7-0.662 1.394-1.255 1.987-1.042 1.041-2.406 1.561-3.771 1.561s-2.729-0.521-3.786-1.577l-1.867-1.755h2.317c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-3.998c-0.003 0-0.006 0-0.009 0-0.091 0.001-0.179 0.021-0.257 0.055s-0.153 0.084-0.216 0.15c-0.008 0.009-0.016 0.017-0.024 0.026-0.050 0.058-0.089 0.122-0.115 0.19s-0.043 0.141-0.046 0.217c-0.001 0.010-0.001 0.019-0.001 0.029v4c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'repeat',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>repeat</title>\n <path d=\"M2.667 7.333v-1.333c0-0.553 0.223-1.051 0.586-1.414s0.861-0.586 1.414-0.586h7.724l-1.529 1.529c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0l2.667-2.667c0.064-0.064 0.112-0.137 0.145-0.216s0.051-0.165 0.051-0.255c0-0.087-0.017-0.174-0.051-0.255-0.033-0.079-0.081-0.152-0.145-0.216l-2.667-2.667c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943l1.529 1.529h-7.724c-0.92 0-1.755 0.374-2.357 0.976s-0.976 1.437-0.976 2.357v1.333c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667zM13.333 8.667v1.333c0 0.553-0.223 1.051-0.586 1.414s-0.861 0.586-1.414 0.586h-7.724l1.529-1.529c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-2.667 2.667c-0.064 0.064-0.112 0.137-0.145 0.216-0.1 0.241-0.052 0.53 0.145 0.727l2.667 2.667c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-1.529-1.529h7.724c0.92 0 1.755-0.374 2.357-0.976s0.976-1.437 0.976-2.357v-1.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'rewind',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>rewind</title>\n <path d=\"M6.667 11.303l-4.247-3.303 4.247-3.303zM14.257 13.193c0.112 0.088 0.255 0.141 0.409 0.141 0.368 0 0.667-0.299 0.667-0.667v-9.333c0.001-0.142-0.045-0.287-0.141-0.409-0.226-0.291-0.645-0.343-0.935-0.117l-6 4.667c-0.041 0.031-0.081 0.071-0.117 0.117-0.093 0.12-0.139 0.261-0.141 0.403v-4.66c0.001-0.142-0.045-0.287-0.141-0.409-0.226-0.291-0.645-0.343-0.935-0.117l-6 4.667c-0.041 0.031-0.081 0.071-0.117 0.117-0.226 0.291-0.174 0.709 0.117 0.935l6 4.667c0.112 0.088 0.255 0.141 0.409 0.141 0.368 0 0.667-0.299 0.667-0.667v-4.661c0.002 0.197 0.090 0.39 0.257 0.52zM14 11.303l-4.247-3.303 4.247-3.303z\"></path>\n </svg>\n "
},
{
name: 'rotate-ccw',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>rotate-ccw</title>\n <path d=\"M1.711 10.221c0.612 1.736 1.87 3.061 3.408 3.797s3.359 0.887 5.095 0.275 3.061-1.87 3.797-3.408 0.887-3.359 0.275-5.095-1.87-3.061-3.408-3.797-3.359-0.887-5.095-0.275c-0.983 0.347-1.837 0.901-2.499 1.575l-1.951 1.833v-2.459c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v3.999c0 0.010 0 0.020 0.001 0.029 0.003 0.077 0.019 0.15 0.046 0.217s0.065 0.132 0.115 0.19c0.008 0.009 0.016 0.018 0.024 0.026 0.061 0.063 0.134 0.115 0.216 0.15 0.079 0.034 0.166 0.053 0.257 0.055 0.003 0 0.005 0 0.007 0h4c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.666-0.667-0.666h-2.317l1.886-1.773c0.519-0.528 1.2-0.973 1.991-1.251 1.389-0.489 2.844-0.37 4.076 0.22s2.237 1.649 2.727 3.038 0.37 2.844-0.22 4.076-1.649 2.237-3.038 2.727-2.844 0.37-4.076-0.22-2.237-1.649-2.727-3.038c-0.123-0.347-0.503-0.529-0.85-0.407s-0.529 0.503-0.407 0.85z\"></path>\n </svg>\n "
},
{
name: 'rotate-cw',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>rotate-cw</title>\n <path d=\"M13.031 9.778c-0.491 1.389-1.497 2.447-2.729 3.035s-2.687 0.707-4.076 0.217-2.447-1.497-3.035-2.729-0.707-2.687-0.217-4.076 1.497-2.447 2.729-3.035 2.687-0.707 4.076-0.217c0.792 0.28 1.473 0.725 1.991 1.255l1.883 1.773h-2.32c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h3.998c0.003 0 0.006 0 0.009 0 0.091-0.001 0.178-0.020 0.257-0.055s0.153-0.084 0.216-0.15c0.008-0.008 0.015-0.017 0.023-0.025 0.051-0.058 0.089-0.123 0.117-0.191s0.043-0.142 0.046-0.219c0.001-0.009 0.001-0.017 0.001-0.027v-4c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v2.457l-1.944-1.83c-0.662-0.675-1.516-1.231-2.499-1.577-1.736-0.614-3.557-0.465-5.096 0.27s-2.798 2.059-3.411 3.795-0.464 3.557 0.271 5.095 2.059 2.798 3.795 3.411 3.557 0.465 5.095-0.271 2.798-2.059 3.411-3.795c0.123-0.347-0.059-0.728-0.407-0.851s-0.728 0.059-0.851 0.407z\"></path>\n </svg>\n "
},
{
name: 'rss',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>rss</title>\n <path d=\"M2.667 8c1.473 0 2.805 0.596 3.771 1.562s1.562 2.299 1.562 3.771c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667c0-1.841-0.747-3.509-1.953-4.714s-2.873-1.953-4.714-1.953c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667zM2.667 3.333c2.761 0 5.261 1.119 7.071 2.929s2.929 4.31 2.929 7.071c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667c0-3.129-1.269-5.964-3.319-8.014s-4.885-3.319-8.014-3.319c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667zM4.667 12.667c0-0.368-0.15-0.702-0.391-0.943s-0.575-0.391-0.943-0.391-0.702 0.15-0.943 0.391-0.391 0.575-0.391 0.943 0.15 0.702 0.391 0.943 0.575 0.391 0.943 0.391 0.702-0.15 0.943-0.391 0.391-0.575 0.391-0.943z\"></path>\n </svg>\n "
},
{
name: 'save',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>save</title>\n <path d=\"M12.667 14.667c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-7.333c0-0.171-0.065-0.341-0.195-0.471l-3.333-3.333c-0.121-0.121-0.287-0.195-0.471-0.195h-7.333c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v9.333c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586zM5.333 13.333v-4h5.333v4zM4 2.667v2.667c0 0.368 0.299 0.667 0.667 0.667h5.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-4.667v-2h5.057l2.943 2.943v7.057c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-0.667v-4.667c0-0.368-0.299-0.667-0.667-0.667h-6.667c-0.368 0-0.667 0.299-0.667 0.667v4.667h-0.667c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-9.333c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195z\"></path>\n </svg>\n "
},
{
name: 'scissors',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>scissors</title>\n <path d=\"M4.919 11.034c0.007 0.008 0.015 0.017 0.023 0.024s0.016 0.015 0.024 0.023c0.229 0.239 0.367 0.562 0.367 0.919 0 0.369-0.149 0.701-0.391 0.943s-0.574 0.391-0.943 0.391-0.701-0.149-0.943-0.391-0.391-0.574-0.391-0.943 0.149-0.701 0.391-0.943 0.574-0.391 0.943-0.391c0.357 0 0.679 0.139 0.919 0.367zM9.176 10.125l3.687 3.68c0.261 0.26 0.683 0.26 0.943-0.001s0.26-0.683-0.001-0.943l-3.687-3.68c-0.261-0.26-0.683-0.26-0.943 0.001s-0.26 0.683 0.001 0.943zM4.966 4.919c-0.008 0.007-0.016 0.015-0.024 0.023s-0.016 0.016-0.023 0.024c-0.239 0.229-0.562 0.367-0.919 0.367-0.369 0-0.701-0.149-0.943-0.391s-0.391-0.574-0.391-0.943 0.149-0.701 0.391-0.943 0.574-0.391 0.943-0.391 0.701 0.149 0.943 0.391 0.391 0.574 0.391 0.943c0 0.357-0.139 0.679-0.367 0.919zM5.355 6.297l1.703 1.703-1.703 1.703c-0.397-0.235-0.861-0.369-1.355-0.369-0.736 0-1.404 0.299-1.885 0.781s-0.781 1.149-0.781 1.885 0.299 1.404 0.781 1.885 1.149 0.781 1.885 0.781 1.404-0.299 1.885-0.781 0.781-1.149 0.781-1.885c0-0.494-0.135-0.957-0.369-1.355l7.507-7.507c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-4.862 4.862-1.703-1.703c0.235-0.397 0.369-0.861 0.369-1.355 0-0.736-0.299-1.404-0.781-1.885s-1.149-0.781-1.885-0.781-1.404 0.299-1.885 0.781-0.781 1.149-0.781 1.885 0.299 1.404 0.781 1.885 1.149 0.781 1.885 0.781c0.494 0 0.957-0.135 1.355-0.369z\"></path>\n </svg>\n "
},
{
name: 'search',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>search</title>\n <path d=\"M10.694 10.571c-0.023 0.017-0.045 0.037-0.066 0.058s-0.040 0.043-0.058 0.066c-0.839 0.809-1.979 1.305-3.237 1.305-1.289 0-2.455-0.521-3.3-1.367s-1.367-2.011-1.367-3.3 0.521-2.455 1.367-3.3 2.011-1.367 3.3-1.367 2.455 0.521 3.3 1.367 1.367 2.011 1.367 3.3c0 1.257-0.497 2.398-1.306 3.237zM14.471 13.529l-2.45-2.45c0.821-1.027 1.312-2.329 1.312-3.745 0-1.657-0.672-3.157-1.757-4.243s-2.586-1.757-4.243-1.757-3.157 0.672-4.243 1.757-1.757 2.586-1.757 4.243 0.672 3.157 1.757 4.243 2.586 1.757 4.243 1.757c1.417 0 2.719-0.491 3.745-1.312l2.45 2.45c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943z\"></path>\n </svg>\n "
},
{
name: 'send',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>send</title>\n <path d=\"M15.309 1.513c0.029-0.101 0.033-0.209 0.010-0.317-0.016-0.075-0.045-0.149-0.087-0.217s-0.097-0.127-0.159-0.175c-0.078-0.060-0.166-0.1-0.257-0.121s-0.188-0.023-0.284-0.003c-0.028 0.006-0.057 0.014-0.084 0.023l-0.014 0.005-13.32 4.662c-0.168 0.059-0.311 0.184-0.389 0.359-0.149 0.337 0.002 0.731 0.339 0.88l5.766 2.563 2.563 5.766c0.072 0.162 0.209 0.295 0.389 0.359 0.347 0.121 0.728-0.061 0.849-0.409l4.662-13.319c0.007-0.018 0.013-0.036 0.018-0.055zM7.186 7.871l-4.045-1.797 8.989-3.147zM13.073 3.871l-3.147 8.989-1.797-4.045z\"></path>\n </svg>\n "
},
{
name: 'server',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>server</title>\n <path d=\"M2.667 0.667c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v2.667c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h10.667c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-2.667c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586zM2.667 2h10.667c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v2.667c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-10.667c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-2.667c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195zM2.667 8.667c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v2.667c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h10.667c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-2.667c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586zM2.667 10h10.667c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v2.667c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-10.667c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-2.667c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195zM4.667 4c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667 0.299 0.667 0.667 0.667 0.667-0.299 0.667-0.667zM4.667 12c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667 0.299 0.667 0.667 0.667 0.667-0.299 0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'settings',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>settings</title>\n <path d=\"M10.667 8c0-0.736-0.299-1.404-0.781-1.885s-1.149-0.781-1.885-0.781-1.404 0.299-1.885 0.781-0.781 1.149-0.781 1.885 0.299 1.404 0.781 1.885 1.149 0.781 1.885 0.781 1.404-0.299 1.885-0.781 0.781-1.149 0.781-1.885zM9.333 8c0 0.369-0.149 0.701-0.391 0.943s-0.574 0.391-0.943 0.391-0.701-0.149-0.943-0.391-0.391-0.574-0.391-0.943 0.149-0.701 0.391-0.943 0.574-0.391 0.943-0.391 0.701 0.149 0.943 0.391 0.391 0.574 0.391 0.943zM13.543 10.269c0.031-0.070 0.075-0.127 0.128-0.171 0.075-0.061 0.167-0.097 0.269-0.098h0.060c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414-0.225-1.053-0.586-1.414-0.862-0.586-1.414-0.586h-0.106c-0.073-0.001-0.143-0.019-0.205-0.051-0.085-0.044-0.153-0.115-0.195-0.208-0.002-0.019-0.003-0.039-0.003-0.059-0.031-0.071-0.043-0.146-0.036-0.219 0.008-0.097 0.048-0.189 0.116-0.258l0.041-0.041c0.39-0.391 0.585-0.904 0.585-1.415s-0.196-1.024-0.587-1.415c-0.391-0.39-0.904-0.585-1.415-0.585s-1.024 0.196-1.413 0.586l-0.031 0.031c-0.055 0.053-0.122 0.091-0.192 0.111-0.093 0.026-0.194 0.021-0.291-0.022-0.067-0.029-0.125-0.073-0.169-0.127-0.062-0.075-0.098-0.167-0.099-0.269v-0.060c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414v0.106c-0.001 0.073-0.019 0.143-0.051 0.205-0.044 0.085-0.115 0.153-0.208 0.195-0.019 0.002-0.039 0.003-0.059 0.003-0.071 0.031-0.146 0.043-0.219 0.036-0.097-0.009-0.189-0.048-0.259-0.116l-0.041-0.041c-0.391-0.39-0.903-0.585-1.415-0.585s-1.023 0.196-1.415 0.588c-0.39 0.391-0.585 0.903-0.585 1.415s0.196 1.024 0.586 1.413l0.032 0.031c0.053 0.055 0.091 0.122 0.111 0.192 0.026 0.093 0.021 0.194-0.021 0.289-0.004 0.011-0.009 0.023-0.014 0.035-0.027 0.073-0.072 0.135-0.127 0.183-0.073 0.063-0.167 0.102-0.255 0.104h-0.060c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.863-0.586 1.415 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586h0.106c0.073 0.001 0.143 0.019 0.205 0.051 0.085 0.045 0.155 0.116 0.197 0.214 0.031 0.071 0.043 0.146 0.036 0.219-0.008 0.097-0.048 0.189-0.116 0.258l-0.041 0.041c-0.39 0.391-0.585 0.904-0.585 1.415s0.196 1.024 0.587 1.415c0.391 0.39 0.904 0.585 1.415 0.585s1.024-0.196 1.413-0.586l0.031-0.032c0.055-0.053 0.122-0.091 0.192-0.111 0.093-0.026 0.194-0.021 0.289 0.021 0.011 0.004 0.023 0.009 0.035 0.014 0.073 0.027 0.135 0.072 0.183 0.127 0.063 0.073 0.102 0.167 0.104 0.255v0.061c0 0.552 0.225 1.053 0.586 1.414s0.863 0.586 1.415 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414v-0.106c0.001-0.073 0.019-0.143 0.051-0.205 0.045-0.085 0.116-0.155 0.214-0.197 0.071-0.031 0.146-0.043 0.219-0.036 0.097 0.008 0.189 0.048 0.258 0.116l0.041 0.041c0.391 0.39 0.904 0.585 1.415 0.585s1.024-0.196 1.415-0.587c0.39-0.391 0.585-0.904 0.585-1.415s-0.196-1.024-0.586-1.413l-0.032-0.031c-0.053-0.055-0.091-0.122-0.111-0.192-0.026-0.093-0.021-0.194 0.021-0.289zM12.323 9.731c-0.171 0.388-0.192 0.807-0.085 1.188 0.079 0.282 0.227 0.543 0.435 0.758l0.048 0.049c0.131 0.131 0.196 0.3 0.196 0.471s-0.065 0.341-0.195 0.471c-0.131 0.131-0.301 0.197-0.473 0.197s-0.341-0.065-0.471-0.195l-0.041-0.041c-0.309-0.302-0.693-0.468-1.087-0.501-0.291-0.025-0.588 0.023-0.862 0.141-0.385 0.165-0.685 0.455-0.867 0.804-0.129 0.247-0.199 0.523-0.202 0.807v0.121c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.194-0.471 0.194-0.35-0.074-0.471-0.195-0.195-0.287-0.195-0.471v-0.060c-0.010-0.44-0.17-0.828-0.429-1.128-0.189-0.219-0.431-0.39-0.705-0.497-0.383-0.164-0.795-0.183-1.171-0.077-0.282 0.079-0.543 0.227-0.758 0.435l-0.049 0.048c-0.131 0.131-0.3 0.196-0.471 0.196s-0.341-0.065-0.471-0.195c-0.131-0.131-0.197-0.301-0.197-0.473s0.065-0.341 0.195-0.471l0.041-0.041c0.302-0.309 0.468-0.693 0.501-1.087 0.025-0.291-0.023-0.588-0.141-0.862-0.165-0.385-0.455-0.685-0.804-0.867-0.247-0.129-0.523-0.199-0.807-0.202l-0.119 0.001c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471 0.074-0.35 0.195-0.471 0.287-0.195 0.471-0.195h0.060c0.44-0.010 0.828-0.17 1.128-0.429 0.219-0.189 0.39-0.431 0.497-0.705 0.164-0.383 0.182-0.795 0.077-1.171-0.079-0.282-0.227-0.543-0.435-0.757l-0.049-0.049c-0.131-0.131-0.196-0.3-0.196-0.471s0.065-0.341 0.195-0.471c0.131-0.131 0.301-0.197 0.473-0.197s0.341 0.065 0.471 0.195l0.041 0.041c0.309 0.302 0.693 0.468 1.087 0.501 0.247 0.021 0.497-0.009 0.734-0.091 0.064-0.008 0.125-0.025 0.179-0.049 0.388-0.166 0.687-0.456 0.869-0.805 0.129-0.247 0.199-0.523 0.203-0.807v-0.121c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195 0.35 0.074 0.471 0.195 0.195 0.287 0.195 0.471v0.060c0.002 0.425 0.152 0.813 0.402 1.117 0.177 0.215 0.405 0.387 0.664 0.501 0.385 0.17 0.804 0.191 1.185 0.084 0.282-0.079 0.543-0.227 0.758-0.435l0.049-0.048c0.131-0.131 0.3-0.196 0.471-0.196s0.341 0.065 0.471 0.195c0.131 0.131 0.197 0.301 0.197 0.473s-0.065 0.341-0.195 0.471l-0.041 0.041c-0.302 0.309-0.468 0.693-0.501 1.087-0.021 0.247 0.009 0.497 0.091 0.734 0.008 0.064 0.025 0.125 0.049 0.179 0.166 0.388 0.456 0.687 0.805 0.869 0.247 0.129 0.523 0.199 0.807 0.202h0.12c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471-0.074 0.35-0.195 0.471-0.287 0.195-0.471 0.195h-0.060c-0.425 0.002-0.813 0.152-1.117 0.402-0.215 0.177-0.387 0.405-0.5 0.662z\"></path>\n </svg>\n "
},
{
name: 'share-2',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>share-2</title>\n <path d=\"M10.809 12.065c0.017-0.022 0.032-0.045 0.047-0.069 0.013-0.023 0.025-0.047 0.036-0.071 0.049-0.072 0.104-0.139 0.165-0.201 0.242-0.242 0.574-0.391 0.943-0.391s0.701 0.149 0.943 0.391 0.391 0.574 0.391 0.943-0.149 0.701-0.391 0.943-0.574 0.391-0.943 0.391-0.701-0.149-0.943-0.391-0.391-0.574-0.391-0.943c0-0.217 0.051-0.421 0.143-0.601zM10.867 4.037c-0.006-0.011-0.012-0.023-0.019-0.034s-0.013-0.023-0.021-0.033c-0.103-0.189-0.161-0.405-0.161-0.637 0-0.369 0.149-0.701 0.391-0.943s0.574-0.391 0.943-0.391 0.701 0.149 0.943 0.391 0.391 0.574 0.391 0.943-0.149 0.701-0.391 0.943-0.574 0.391-0.943 0.391-0.701-0.149-0.943-0.391c-0.072-0.072-0.136-0.152-0.19-0.239zM5.133 7.296c0.006 0.011 0.012 0.023 0.019 0.034s0.013 0.023 0.021 0.033c0.103 0.189 0.161 0.405 0.161 0.637s-0.059 0.448-0.162 0.637c-0.007 0.011-0.014 0.022-0.021 0.033s-0.013 0.022-0.018 0.033c-0.054 0.087-0.118 0.167-0.19 0.239-0.242 0.242-0.574 0.391-0.943 0.391s-0.701-0.149-0.943-0.391-0.391-0.574-0.391-0.943 0.149-0.701 0.391-0.943 0.574-0.391 0.943-0.391 0.701 0.149 0.943 0.391c0.072 0.072 0.136 0.152 0.19 0.239zM9.433 4.059l-3.539 2.065c-0.003-0.003-0.006-0.006-0.009-0.009-0.481-0.481-1.149-0.781-1.885-0.781s-1.404 0.299-1.885 0.781-0.781 1.149-0.781 1.885 0.299 1.404 0.781 1.885 1.149 0.781 1.885 0.781 1.404-0.299 1.885-0.781c0.003-0.003 0.006-0.006 0.009-0.009l3.539 2.063c-0.065 0.231-0.101 0.476-0.101 0.728 0 0.736 0.299 1.404 0.781 1.885s1.149 0.781 1.885 0.781 1.404-0.299 1.885-0.781 0.781-1.149 0.781-1.885-0.299-1.404-0.781-1.885-1.149-0.781-1.885-0.781-1.404 0.299-1.885 0.781c-0.002 0.002-0.005 0.005-0.007 0.007l-3.541-2.063c0.065-0.231 0.1-0.473 0.1-0.725s-0.035-0.495-0.1-0.725l3.539-2.065c0.003 0.003 0.006 0.006 0.009 0.009 0.481 0.482 1.149 0.781 1.885 0.781s1.404-0.299 1.885-0.781 0.781-1.149 0.781-1.885-0.299-1.404-0.781-1.885-1.149-0.781-1.885-0.781-1.404 0.299-1.885 0.781-0.781 1.149-0.781 1.885c0 0.251 0.035 0.495 0.1 0.725z\"></path>\n </svg>\n "
},
{
name: 'share',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>share</title>\n <path d=\"M2 8v5.333c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h8c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-5.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v5.333c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-8c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-5.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667zM7.333 2.943v7.057c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-7.057l1.529 1.529c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-2.667-2.667c-0.261-0.261-0.683-0.261-0.943 0l-2.667 2.667c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0z\"></path>\n </svg>\n "
},
{
name: 'shield-off',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>shield-off</title>\n <path d=\"M13.763 9.531c0.161-0.517 0.239-1.045 0.237-1.533v-4.664c0-0.284-0.178-0.527-0.433-0.624l-5.333-2c-0.157-0.059-0.323-0.055-0.467 0l-2.107 0.787c-0.345 0.128-0.52 0.512-0.391 0.857s0.513 0.52 0.858 0.391l1.873-0.699 4.667 1.75v4.207c0.001 0.348-0.055 0.741-0.177 1.133-0.109 0.351 0.087 0.725 0.439 0.834s0.725-0.087 0.834-0.439zM3.333 4.276l7.487 7.487c-0.787 0.8-1.741 1.537-2.821 2.145-0.789-0.449-2.946-1.797-4.033-3.699-0.053-0.092-0.102-0.184-0.149-0.278-0.305-0.608-0.485-1.253-0.485-1.931zM0.195 1.138l1.883 1.883c-0.050 0.095-0.077 0.201-0.078 0.312v4.667c0 0.921 0.246 1.77 0.625 2.527 0.058 0.117 0.119 0.231 0.184 0.343 1.567 2.743 4.893 4.393 4.893 4.393 0.199 0.099 0.424 0.090 0.609-0.007 1.323-0.698 2.493-1.577 3.452-2.55l3.099 3.099c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-14.667-14.667c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943z\"></path>\n </svg>\n "
},
{
name: 'shield',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>shield</title>\n <path d=\"M8 13.908c-0.789-0.448-2.947-1.797-4.033-3.699-0.053-0.092-0.102-0.184-0.149-0.278-0.304-0.607-0.485-1.252-0.485-1.931v-4.205l4.667-1.75 4.667 1.75v4.205c0 0.679-0.181 1.323-0.484 1.931-0.047 0.093-0.097 0.186-0.149 0.278-1.087 1.903-3.245 3.251-4.033 3.699zM8.298 15.263c0 0 3.326-1.65 4.893-4.393 0.064-0.112 0.125-0.227 0.184-0.343 0.379-0.757 0.625-1.605 0.625-2.527v-4.667c0-0.284-0.178-0.527-0.433-0.624l-5.333-2c-0.157-0.059-0.323-0.055-0.468 0l-5.333 2c-0.266 0.099-0.431 0.351-0.433 0.624v4.667c0 0.921 0.246 1.77 0.625 2.527 0.058 0.117 0.119 0.231 0.184 0.343 1.567 2.743 4.893 4.393 4.893 4.393 0.195 0.097 0.413 0.091 0.596 0z\"></path>\n </svg>\n "
},
{
name: 'shopping-bag',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>shopping-bag</title>\n <path d=\"M12.667 3.333h-9.333l1-1.333h7.333zM14.529 3.595l-1.996-2.661c-0.131-0.174-0.329-0.266-0.533-0.267h-8c-0.217 0-0.411 0.104-0.533 0.267l-1.996 2.661c-0.029 0.037-0.054 0.079-0.074 0.122-0.043 0.091-0.064 0.188-0.063 0.283v9.333c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h9.333c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-9.333c0-0.146-0.047-0.281-0.126-0.39-0.003-0.003-0.005-0.007-0.007-0.010zM2.667 4.667h10.667v8.667c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-9.333c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471zM10 6.667c0 0.553-0.223 1.051-0.586 1.414s-0.861 0.586-1.414 0.586-1.051-0.223-1.414-0.586-0.586-0.861-0.586-1.414c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667c0 0.92 0.374 1.755 0.976 2.357s1.437 0.976 2.357 0.976 1.755-0.374 2.357-0.976 0.976-1.437 0.976-2.357c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'shopping-cart',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>shopping-cart</title>\n <path d=\"M7.333 14c0-0.368-0.15-0.702-0.391-0.943s-0.575-0.391-0.943-0.391-0.702 0.15-0.943 0.391-0.391 0.575-0.391 0.943 0.15 0.702 0.391 0.943 0.575 0.391 0.943 0.391 0.702-0.15 0.943-0.391 0.391-0.575 0.391-0.943zM14.667 14c0-0.368-0.15-0.702-0.391-0.943s-0.575-0.391-0.943-0.391-0.702 0.15-0.943 0.391-0.391 0.575-0.391 0.943 0.15 0.702 0.391 0.943 0.575 0.391 0.943 0.391 0.702-0.15 0.943-0.391 0.391-0.575 0.391-0.943zM4.814 4.667h9.713l-0.914 4.794c-0.031 0.152-0.111 0.283-0.221 0.379-0.12 0.104-0.275 0.164-0.459 0.161h-6.489c-0.155 0.002-0.301-0.047-0.417-0.135-0.127-0.095-0.219-0.234-0.253-0.402zM0.667 1.333h2.12l0.565 2.826c0.072 0.291 0.335 0.507 0.648 0.507h0.814l-0.267-1.333h-0.547c-0.368 0-0.667 0.299-0.667 0.667 0 0.035 0.003 0.070 0.008 0.103 0.003 0.019 0.007 0.038 0.011 0.056l1.114 5.565c0.099 0.501 0.379 0.922 0.76 1.207 0.347 0.261 0.78 0.409 1.236 0.402h6.471c0.499 0.010 0.97-0.174 1.33-0.485 0.329-0.284 0.565-0.675 0.657-1.122l1.068-5.601c0.069-0.362-0.168-0.711-0.53-0.78-0.043-0.009-0.087-0.013-0.125-0.012h-10.787l-0.56-2.797c-0.063-0.308-0.331-0.536-0.653-0.536h-2.667c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'shuffle',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>shuffle</title>\n <path d=\"M3.138 13.805l10.195-10.195v1.724c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-3.333c0-0.091-0.018-0.177-0.051-0.255s-0.081-0.152-0.144-0.215c-0.001-0.001-0.001-0.001-0.001-0.001-0.061-0.061-0.135-0.111-0.215-0.144-0.079-0.033-0.165-0.051-0.255-0.051h-3.333c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h1.724l-10.195 10.195c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0zM9.529 10.471l2.862 2.862h-1.724c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h3.333c0.087 0 0.174-0.017 0.255-0.051s0.155-0.083 0.216-0.145c0.064-0.064 0.112-0.137 0.145-0.216s0.051-0.165 0.051-0.255v-3.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v1.724l-2.862-2.862c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943zM2.195 3.138l3.333 3.333c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-3.333-3.333c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943z\"></path>\n </svg>\n "
},
{
name: 'sidebar',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>sidebar</title>\n <path d=\"M3.333 1.333c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v9.333c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h9.333c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-9.333c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586zM6.667 13.333v-10.667h6c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v9.333c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195zM5.333 2.667v10.667h-2c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-9.333c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195z\"></path>\n </svg>\n "
},
{
name: 'skip-back',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>skip-back</title>\n <path d=\"M12.25 13.854c0.113 0.091 0.259 0.146 0.417 0.146 0.368 0 0.667-0.299 0.667-0.667v-10.667c0.001-0.145-0.047-0.293-0.146-0.417-0.23-0.287-0.649-0.334-0.937-0.104l-6.667 5.333c-0.035 0.028-0.072 0.063-0.104 0.104-0.23 0.287-0.183 0.707 0.104 0.937zM12 11.946l-4.933-3.946 4.933-3.946zM4 12.667v-9.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v9.333c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'skip-forward',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>skip-forward</title>\n <path d=\"M3.75 2.146c-0.113-0.091-0.259-0.146-0.417-0.146-0.368 0-0.667 0.299-0.667 0.667v10.667c-0.001 0.145 0.047 0.293 0.146 0.417 0.23 0.287 0.649 0.334 0.937 0.104l6.667-5.333c0.035-0.028 0.072-0.063 0.104-0.104 0.23-0.287 0.183-0.707-0.104-0.937zM4 4.054l4.933 3.946-4.933 3.946zM12 3.333v9.333c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-9.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'slack',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>slack</title>\n <path d=\"M9.667 7.333c0.46 0 0.877-0.187 1.179-0.488s0.488-0.719 0.488-1.179v-3.333c0-0.46-0.187-0.877-0.488-1.179s-0.719-0.488-1.179-0.488-0.877 0.187-1.179 0.488-0.488 0.719-0.488 1.179v3.333c0 0.46 0.187 0.877 0.488 1.179s0.719 0.488 1.179 0.488zM9.667 6c-0.093 0-0.176-0.037-0.236-0.097s-0.097-0.143-0.097-0.236v-3.333c0-0.093 0.037-0.176 0.097-0.236s0.143-0.097 0.236-0.097 0.176 0.037 0.236 0.097 0.097 0.143 0.097 0.236v3.333c0 0.093-0.037 0.176-0.097 0.236s-0.143 0.097-0.236 0.097zM13.667 7.333c0.46 0 0.877-0.187 1.179-0.488s0.488-0.719 0.488-1.179-0.187-0.877-0.488-1.179-0.719-0.488-1.179-0.488-0.877 0.187-1.179 0.488-0.488 0.719-0.488 1.179v1c0 0.368 0.299 0.667 0.667 0.667zM13.667 6h-0.333v-0.333c0-0.093 0.037-0.176 0.097-0.236s0.143-0.097 0.236-0.097 0.176 0.037 0.236 0.097 0.097 0.143 0.097 0.236-0.037 0.176-0.097 0.236-0.143 0.097-0.236 0.097zM6.333 8.667c-0.46 0-0.877 0.187-1.179 0.488s-0.488 0.719-0.488 1.179v3.333c0 0.46 0.187 0.877 0.488 1.179s0.719 0.488 1.179 0.488 0.877-0.187 1.179-0.488 0.488-0.719 0.488-1.179v-3.333c0-0.46-0.187-0.877-0.488-1.179s-0.719-0.488-1.179-0.488zM6.333 10c0.093 0 0.176 0.037 0.236 0.097s0.097 0.143 0.097 0.236v3.333c0 0.093-0.037 0.176-0.097 0.236s-0.143 0.097-0.236 0.097-0.176-0.037-0.236-0.097-0.097-0.143-0.097-0.236v-3.333c0-0.093 0.037-0.176 0.097-0.236s0.143-0.097 0.236-0.097zM2.333 8.667c-0.46 0-0.877 0.187-1.179 0.488s-0.488 0.719-0.488 1.179 0.187 0.877 0.488 1.179 0.719 0.488 1.179 0.488 0.877-0.187 1.179-0.488 0.488-0.719 0.488-1.179v-1c0-0.368-0.299-0.667-0.667-0.667zM2.333 10h0.333v0.333c0 0.093-0.037 0.176-0.097 0.236s-0.143 0.097-0.236 0.097-0.176-0.037-0.236-0.097-0.097-0.143-0.097-0.236 0.037-0.176 0.097-0.236 0.143-0.097 0.236-0.097zM8.667 9.667c0 0.46 0.187 0.877 0.488 1.179s0.719 0.488 1.179 0.488h3.333c0.46 0 0.877-0.187 1.179-0.488s0.488-0.719 0.488-1.179-0.187-0.877-0.488-1.179-0.719-0.488-1.179-0.488h-3.333c-0.46 0-0.877 0.187-1.179 0.488s-0.488 0.719-0.488 1.179zM10 9.667c0-0.093 0.037-0.176 0.097-0.236s0.143-0.097 0.236-0.097h3.333c0.093 0 0.176 0.037 0.236 0.097s0.097 0.143 0.097 0.236-0.037 0.176-0.097 0.236-0.143 0.097-0.236 0.097h-3.333c-0.093 0-0.176-0.037-0.236-0.097s-0.097-0.143-0.097-0.236zM10.333 13.333c0.093 0 0.176 0.037 0.236 0.097s0.097 0.143 0.097 0.236-0.037 0.176-0.097 0.236-0.143 0.097-0.236 0.097-0.176-0.037-0.236-0.097-0.097-0.143-0.097-0.236v-0.333zM10.333 12h-1c-0.368 0-0.667 0.299-0.667 0.667v1c0 0.46 0.187 0.877 0.488 1.179s0.719 0.488 1.179 0.488 0.877-0.187 1.179-0.488 0.488-0.719 0.488-1.179-0.187-0.877-0.488-1.179-0.719-0.488-1.179-0.488zM6 6.333c0 0.093-0.037 0.176-0.097 0.236s-0.143 0.097-0.236 0.097h-3.333c-0.093 0-0.176-0.037-0.236-0.097s-0.097-0.143-0.097-0.236 0.037-0.176 0.097-0.236 0.143-0.097 0.236-0.097h3.333c0.093 0 0.176 0.037 0.236 0.097s0.097 0.143 0.097 0.236zM7.333 6.333c0-0.46-0.187-0.877-0.488-1.179s-0.719-0.488-1.179-0.488h-3.333c-0.46 0-0.877 0.187-1.179 0.488s-0.488 0.719-0.488 1.179 0.187 0.877 0.488 1.179 0.719 0.488 1.179 0.488h3.333c0.46 0 0.877-0.187 1.179-0.488s0.488-0.719 0.488-1.179zM5.667 2.667c-0.093 0-0.176-0.037-0.236-0.097s-0.097-0.143-0.097-0.236 0.037-0.176 0.097-0.236 0.143-0.097 0.236-0.097 0.176 0.037 0.236 0.097 0.097 0.143 0.097 0.236v0.333zM5.667 4h1c0.368 0 0.667-0.299 0.667-0.667v-1c0-0.46-0.187-0.877-0.488-1.179s-0.719-0.488-1.179-0.488-0.877 0.187-1.179 0.488-0.488 0.719-0.488 1.179 0.187 0.877 0.488 1.179 0.719 0.488 1.179 0.488z\"></path>\n </svg>\n "
},
{
name: 'slash',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>slash</title>\n <path d=\"M15.333 8c0-2.025-0.821-3.859-2.148-5.185s-3.161-2.148-5.185-2.148-3.859 0.821-5.185 2.148-2.148 3.161-2.148 5.185 0.821 3.859 2.148 5.185 3.161 2.148 5.185 2.148 3.859-0.821 5.185-2.148 2.148-3.161 2.148-5.185zM12.688 11.745l-8.433-8.433c1.027-0.821 2.329-1.312 3.745-1.312 1.657 0 3.156 0.671 4.243 1.757s1.757 2.585 1.757 4.243c0 1.417-0.491 2.719-1.312 3.745zM3.312 4.255l8.433 8.433c-1.027 0.821-2.329 1.312-3.745 1.312-1.657 0-3.156-0.671-4.243-1.757s-1.757-2.585-1.757-4.243c0-1.417 0.491-2.719 1.312-3.745z\"></path>\n </svg>\n "
},
{
name: 'sliders',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>sliders</title>\n <path d=\"M3.333 6.667v-4.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v4.667c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667zM8.667 14v-6c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v6c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667zM14 8v-6c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v6c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667zM0.667 10h1.333v4c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-4h1.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-4c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667zM6 6h4c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-1.333v-2.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v2.667h-1.333c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667zM11.333 11.333h1.333v2.667c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-2.667h1.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-4c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'smartphone',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>smartphone</title>\n <path d=\"M4.667 0.667c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v10.667c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h6.667c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-10.667c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586zM4.667 2h6.667c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v10.667c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-6.667c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-10.667c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195zM8.667 12c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667 0.299 0.667 0.667 0.667 0.667-0.299 0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'smile',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>smile</title>\n <path d=\"M15.333 8c0-2.025-0.821-3.859-2.148-5.185s-3.161-2.148-5.185-2.148-3.859 0.821-5.185 2.148-2.148 3.161-2.148 5.185 0.821 3.859 2.148 5.185 3.161 2.148 5.185 2.148 3.859-0.821 5.185-2.148 2.148-3.161 2.148-5.185zM14 8c0 1.657-0.671 3.156-1.757 4.243s-2.585 1.757-4.243 1.757-3.156-0.671-4.243-1.757-1.757-2.585-1.757-4.243 0.671-3.156 1.757-4.243 2.585-1.757 4.243-1.757 3.156 0.671 4.243 1.757 1.757 2.585 1.757 4.243zM4.8 9.733c0 0 0.087 0.115 0.221 0.255 0.097 0.102 0.225 0.227 0.385 0.36 0.225 0.187 0.515 0.393 0.865 0.569 0.47 0.235 1.053 0.416 1.73 0.416s1.26-0.181 1.73-0.416c0.35-0.175 0.64-0.381 0.865-0.569 0.159-0.133 0.288-0.258 0.385-0.36 0.133-0.14 0.221-0.255 0.221-0.255 0.221-0.295 0.161-0.713-0.133-0.933s-0.713-0.161-0.933 0.133l-0.121 0.137c-0.067 0.070-0.158 0.159-0.272 0.255-0.162 0.135-0.366 0.279-0.607 0.4-0.32 0.159-0.7 0.275-1.134 0.275s-0.814-0.115-1.134-0.275c-0.24-0.12-0.445-0.265-0.607-0.4-0.114-0.095-0.205-0.185-0.272-0.255l-0.121-0.137c-0.221-0.295-0.639-0.354-0.933-0.133s-0.354 0.639-0.133 0.933z\"></path>\n </svg>\n "
},
{
name: 'speaker',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>speaker</title>\n <path d=\"M4 0.667c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v10.667c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h8c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-10.667c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586zM4 2h8c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v10.667c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-8c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-10.667c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195zM11.333 9.333c0-0.92-0.374-1.755-0.976-2.357s-1.437-0.976-2.357-0.976-1.755 0.374-2.357 0.976-0.976 1.437-0.976 2.357 0.374 1.755 0.976 2.357 1.437 0.976 2.357 0.976 1.755-0.374 2.357-0.976 0.976-1.437 0.976-2.357zM10 9.333c0 0.553-0.223 1.051-0.586 1.414s-0.861 0.586-1.414 0.586-1.051-0.223-1.414-0.586-0.586-0.861-0.586-1.414 0.223-1.051 0.586-1.414 0.861-0.586 1.414-0.586 1.051 0.223 1.414 0.586 0.586 0.861 0.586 1.414zM8.667 4c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667 0.299 0.667 0.667 0.667 0.667-0.299 0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'square',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>square</title>\n <path d=\"M3.333 1.333c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v9.333c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h9.333c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-9.333c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586zM3.333 2.667h9.333c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v9.333c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-9.333c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-9.333c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195z\"></path>\n </svg>\n "
},
{
name: 'star',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>star</title>\n <path d=\"M8.598 1.038c-0.061-0.126-0.165-0.235-0.303-0.303-0.33-0.163-0.73-0.027-0.893 0.303l-1.905 3.859-4.261 0.623c-0.139 0.019-0.274 0.085-0.381 0.194-0.257 0.264-0.251 0.686 0.012 0.943l3.082 3.002-0.727 4.241c-0.024 0.138-0.004 0.287 0.067 0.423 0.171 0.326 0.575 0.451 0.901 0.28l3.809-2.003 3.81 2.003c0.124 0.066 0.272 0.093 0.423 0.067 0.363-0.062 0.607-0.407 0.545-0.77l-0.727-4.241 3.082-3.002c0.101-0.097 0.173-0.229 0.195-0.381 0.053-0.364-0.199-0.703-0.563-0.756l-4.26-0.623zM8 2.839l1.462 2.963c0.101 0.203 0.291 0.333 0.501 0.365l3.271 0.478-2.366 2.305c-0.163 0.159-0.227 0.379-0.192 0.59l0.558 3.255-2.924-1.538c-0.201-0.105-0.431-0.099-0.621 0l-2.924 1.538 0.558-3.255c0.039-0.224-0.039-0.441-0.192-0.59l-2.366-2.305 3.271-0.479c0.224-0.033 0.406-0.173 0.501-0.364z\"></path>\n </svg>\n "
},
{
name: 'stop-circle',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>stop-circle</title>\n <path d=\"M15.333 8c0-2.025-0.821-3.859-2.148-5.185s-3.161-2.148-5.185-2.148-3.859 0.821-5.185 2.148-2.148 3.161-2.148 5.185 0.821 3.859 2.148 5.185 3.161 2.148 5.185 2.148 3.859-0.821 5.185-2.148 2.148-3.161 2.148-5.185zM14 8c0 1.657-0.671 3.156-1.757 4.243s-2.585 1.757-4.243 1.757-3.156-0.671-4.243-1.757-1.757-2.585-1.757-4.243 0.671-3.156 1.757-4.243 2.585-1.757 4.243-1.757 3.156 0.671 4.243 1.757 1.757 2.585 1.757 4.243zM6 5.333c-0.368 0-0.667 0.299-0.667 0.667v4c0 0.368 0.299 0.667 0.667 0.667h4c0.368 0 0.667-0.299 0.667-0.667v-4c0-0.368-0.299-0.667-0.667-0.667zM6.667 6.667h2.667v2.667h-2.667z\"></path>\n </svg>\n "
},
{
name: 'sun',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>sun</title>\n <path d=\"M12 8c0-1.105-0.449-2.105-1.171-2.829s-1.724-1.171-2.829-1.171-2.105 0.449-2.829 1.171-1.171 1.724-1.171 2.829 0.449 2.105 1.171 2.829 1.724 1.171 2.829 1.171 2.105-0.449 2.829-1.171 1.171-1.724 1.171-2.829zM10.667 8c0 0.737-0.298 1.402-0.781 1.885s-1.149 0.781-1.885 0.781-1.402-0.298-1.885-0.781-0.781-1.149-0.781-1.885 0.298-1.402 0.781-1.885 1.149-0.781 1.885-0.781 1.402 0.298 1.885 0.781 0.781 1.149 0.781 1.885zM7.333 0.667v1.333c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-1.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667zM7.333 14v1.333c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-1.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667zM2.342 3.285l0.947 0.947c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-0.947-0.947c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943zM11.769 12.711l0.947 0.947c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-0.947-0.947c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943zM0.667 8.667h1.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-1.333c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667zM14 8.667h1.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-1.333c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667zM3.285 13.658l0.947-0.947c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-0.947 0.947c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0zM12.711 4.231l0.947-0.947c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-0.947 0.947c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0z\"></path>\n </svg>\n "
},
{
name: 'sunrise',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>sunrise</title>\n <path d=\"M12 12c0-1.105-0.449-2.105-1.171-2.829s-1.724-1.171-2.829-1.171-2.105 0.449-2.829 1.171-1.171 1.724-1.171 2.829c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667c0-0.737 0.298-1.402 0.781-1.885s1.149-0.781 1.885-0.781 1.402 0.298 1.885 0.781 0.781 1.149 0.781 1.885c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667zM2.342 7.285l0.947 0.947c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-0.947-0.947c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943zM0.667 12.667h1.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-1.333c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667zM14 12.667h1.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-1.333c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667zM12.711 8.231l0.947-0.947c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-0.947 0.947c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0zM15.333 14h-14.667c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h14.667c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM5.805 4.471l1.529-1.529v3.057c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-3.057l1.529 1.529c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-2.667-2.667c-0.064-0.064-0.137-0.112-0.216-0.145s-0.165-0.051-0.255-0.051c-0.087 0-0.174 0.017-0.255 0.051-0.079 0.033-0.152 0.081-0.216 0.145l-2.667 2.667c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0z\"></path>\n </svg>\n "
},
{
name: 'sunset',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>sunset</title>\n <path d=\"M12 12c0-1.105-0.449-2.105-1.171-2.829s-1.724-1.171-2.829-1.171-2.105 0.449-2.829 1.171-1.171 1.724-1.171 2.829c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667c0-0.737 0.298-1.402 0.781-1.885s1.149-0.781 1.885-0.781 1.402 0.298 1.885 0.781 0.781 1.149 0.781 1.885c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667zM2.342 7.285l0.947 0.947c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-0.947-0.947c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943zM0.667 12.667h1.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-1.333c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667zM14 12.667h1.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-1.333c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667zM12.711 8.231l0.947-0.947c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-0.947 0.947c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0zM15.333 14h-14.667c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h14.667c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM10.195 2.862l-1.529 1.529v-3.057c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v3.057l-1.529-1.529c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943l2.667 2.667c0.064 0.064 0.137 0.112 0.216 0.145s0.165 0.051 0.255 0.051c0.087 0 0.174-0.017 0.255-0.051 0.079-0.033 0.152-0.081 0.216-0.145l2.667-2.667c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0z\"></path>\n </svg>\n "
},
{
name: 'tablet',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>tablet</title>\n <path d=\"M12 15.333c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-10.667c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586h-8c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v10.667c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586zM12 14h-8c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-10.667c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195h8c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v10.667c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195zM8.667 12c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667 0.299 0.667 0.667 0.667 0.667-0.299 0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'tag',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>tag</title>\n <path d=\"M14.198 9.411c0.389-0.391 0.583-0.901 0.583-1.41s-0.193-1.021-0.583-1.413l-5.727-5.727c-0.121-0.12-0.287-0.195-0.471-0.195h-6.667c-0.368 0-0.667 0.299-0.667 0.667v6.667c0 0.171 0.065 0.341 0.195 0.472l5.728 5.721c0.391 0.39 0.904 0.585 1.415 0.585s1.024-0.196 1.413-0.586zM13.255 8.469l-4.78 4.78c-0.131 0.131-0.3 0.196-0.471 0.196s-0.341-0.065-0.471-0.195l-5.533-5.527v-5.723h5.724l5.531 5.531c0.128 0.129 0.193 0.298 0.193 0.469s-0.065 0.339-0.193 0.468zM5.333 4.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667 0.299 0.667 0.667 0.667 0.667-0.299 0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'target',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>target</title>\n <path d=\"M15.333 8c0-2.025-0.821-3.859-2.148-5.185s-3.161-2.148-5.185-2.148-3.859 0.821-5.185 2.148-2.148 3.161-2.148 5.185 0.821 3.859 2.148 5.185 3.161 2.148 5.185 2.148 3.859-0.821 5.185-2.148 2.148-3.161 2.148-5.185zM14 8c0 1.657-0.671 3.156-1.757 4.243s-2.585 1.757-4.243 1.757-3.156-0.671-4.243-1.757-1.757-2.585-1.757-4.243 0.671-3.156 1.757-4.243 2.585-1.757 4.243-1.757 3.156 0.671 4.243 1.757 1.757 2.585 1.757 4.243zM12.667 8c0-1.289-0.523-2.456-1.367-3.3s-2.011-1.367-3.3-1.367-2.456 0.523-3.3 1.367-1.367 2.011-1.367 3.3 0.523 2.456 1.367 3.3 2.011 1.367 3.3 1.367 2.456-0.523 3.3-1.367 1.367-2.011 1.367-3.3zM11.333 8c0 0.921-0.373 1.753-0.976 2.357s-1.437 0.976-2.357 0.976-1.753-0.373-2.357-0.976-0.976-1.437-0.976-2.357 0.373-1.753 0.976-2.357 1.437-0.976 2.357-0.976 1.753 0.373 2.357 0.976 0.976 1.437 0.976 2.357zM10 8c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414zM8.667 8c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195-0.35-0.074-0.471-0.195-0.195-0.287-0.195-0.471 0.074-0.35 0.195-0.471 0.287-0.195 0.471-0.195 0.35 0.074 0.471 0.195 0.195 0.287 0.195 0.471z\"></path>\n </svg>\n "
},
{
name: 'terminal',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>terminal</title>\n <path d=\"M3.138 11.805l4-4c0.261-0.261 0.261-0.683 0-0.943l-4-4c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943l3.529 3.529-3.529 3.529c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0zM8 13.333h5.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-5.333c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'thermometer',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>thermometer</title>\n <path d=\"M8.667 9.84c0.001 0.219 0.107 0.431 0.302 0.558 0.233 0.152 0.457 0.369 0.639 0.64 0.358 0.536 0.465 1.165 0.349 1.751s-0.456 1.127-0.992 1.485-1.165 0.465-1.751 0.349-1.127-0.456-1.485-0.992-0.465-1.165-0.349-1.751 0.456-1.127 0.992-1.485c0.179-0.121 0.295-0.325 0.295-0.555v-7.507c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293 0.525 0.111 0.707 0.293 0.293 0.431 0.293 0.707zM10 9.504v-7.171c0-0.644-0.262-1.229-0.683-1.65s-1.006-0.683-1.65-0.683-1.229 0.262-1.65 0.683-0.683 1.006-0.683 1.65v7.173c-0.671 0.553-1.103 1.307-1.263 2.113-0.183 0.919-0.015 1.911 0.547 2.753s1.414 1.376 2.333 1.559 1.911 0.015 2.753-0.547 1.376-1.414 1.559-2.333 0.015-1.911-0.547-2.753c-0.205-0.306-0.449-0.573-0.715-0.793z\"></path>\n </svg>\n "
},
{
name: 'thumbs-down',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>thumbs-down</title>\n <path d=\"M12 8v-6h1.113c0.241-0.004 0.449 0.079 0.607 0.221 0.142 0.127 0.243 0.3 0.279 0.497v4.525c-0.025 0.227-0.139 0.42-0.303 0.555-0.157 0.129-0.358 0.204-0.574 0.201zM6 10.667v2c0 0.736 0.299 1.404 0.781 1.885s1.149 0.781 1.885 0.781c0.27 0 0.503-0.161 0.609-0.396l2.491-5.604h1.337c0.54 0.008 1.046-0.18 1.44-0.504 0.415-0.341 0.706-0.834 0.783-1.407 0.004-0.027 0.006-0.058 0.006-0.089v-4.667c0-0.028-0.002-0.059-0.006-0.091-0.074-0.535-0.337-1.007-0.717-1.347-0.4-0.358-0.931-0.571-1.497-0.561h-9.3c-0.511-0.006-0.988 0.187-1.347 0.509-0.337 0.301-0.571 0.717-0.645 1.189l-0.92 6.001c-0.083 0.547 0.064 1.076 0.367 1.487s0.765 0.709 1.31 0.791c0.11 0.016 0.222 0.024 0.328 0.022zM7.333 10c0-0.368-0.299-0.667-0.667-0.667l-3.83-0.001-0.059-0.007c-0.182-0.027-0.335-0.125-0.437-0.264s-0.15-0.313-0.123-0.495l0.92-5.999c0.025-0.159 0.104-0.299 0.217-0.4 0.12-0.107 0.277-0.17 0.458-0.168h6.853v6.525l-2.405 5.412c-0.205-0.065-0.388-0.179-0.537-0.328-0.242-0.242-0.391-0.574-0.391-0.943z\"></path>\n </svg>\n "
},
{
name: 'thumbs-up',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>thumbs-up</title>\n <path d=\"M4 8v6h-1.333c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-4.667c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195zM10 5.333v-2c0-0.736-0.299-1.404-0.781-1.885s-1.149-0.781-1.885-0.781c-0.27 0-0.503 0.161-0.609 0.396l-2.491 5.604h-1.567c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v4.667c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h9.52c0.511 0.006 0.988-0.187 1.347-0.509 0.337-0.301 0.571-0.717 0.645-1.189l0.92-6.001c0.083-0.547-0.064-1.076-0.367-1.487s-0.765-0.709-1.31-0.791c-0.11-0.017-0.222-0.025-0.328-0.023zM8.667 6c0 0.368 0.299 0.667 0.667 0.667l3.83 0.001 0.059 0.007c0.182 0.027 0.335 0.125 0.437 0.264s0.15 0.313 0.123 0.495l-0.92 5.999c-0.025 0.159-0.104 0.299-0.217 0.4-0.12 0.107-0.277 0.171-0.457 0.169l-6.854-0.001v-6.525l2.405-5.412c0.205 0.065 0.388 0.179 0.537 0.328 0.242 0.242 0.391 0.574 0.391 0.943z\"></path>\n </svg>\n "
},
{
name: 'toggle-left',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>toggle-left</title>\n <path d=\"M5.333 2.667c-1.473 0-2.807 0.598-3.771 1.562s-1.562 2.299-1.562 3.771 0.598 2.807 1.562 3.771 2.299 1.562 3.771 1.562h5.333c1.473 0 2.807-0.598 3.771-1.562s1.562-2.299 1.562-3.771-0.598-2.807-1.562-3.771-2.299-1.562-3.771-1.562zM5.333 4h5.333c1.105 0 2.104 0.447 2.829 1.171s1.171 1.724 1.171 2.829-0.447 2.104-1.171 2.829-1.724 1.171-2.829 1.171h-5.333c-1.105 0-2.104-0.447-2.829-1.171s-1.171-1.724-1.171-2.829 0.447-2.104 1.171-2.829 1.724-1.171 2.829-1.171zM8 8c0-0.736-0.299-1.404-0.781-1.885s-1.149-0.781-1.885-0.781-1.404 0.299-1.885 0.781-0.781 1.149-0.781 1.885 0.299 1.404 0.781 1.885 1.149 0.781 1.885 0.781 1.404-0.299 1.885-0.781 0.781-1.149 0.781-1.885zM6.667 8c0 0.369-0.149 0.701-0.391 0.943s-0.574 0.391-0.943 0.391-0.701-0.149-0.943-0.391-0.391-0.574-0.391-0.943 0.149-0.701 0.391-0.943 0.574-0.391 0.943-0.391 0.701 0.149 0.943 0.391 0.391 0.574 0.391 0.943z\"></path>\n </svg>\n "
},
{
name: 'toggle-right',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>toggle-right</title>\n <path d=\"M5.333 2.667c-1.473 0-2.807 0.598-3.771 1.562s-1.562 2.299-1.562 3.771 0.598 2.807 1.562 3.771 2.299 1.562 3.771 1.562h5.333c1.473 0 2.807-0.598 3.771-1.562s1.562-2.299 1.562-3.771-0.598-2.807-1.562-3.771-2.299-1.562-3.771-1.562zM5.333 4h5.333c1.105 0 2.104 0.447 2.829 1.171s1.171 1.724 1.171 2.829-0.447 2.104-1.171 2.829-1.724 1.171-2.829 1.171h-5.333c-1.105 0-2.104-0.447-2.829-1.171s-1.171-1.724-1.171-2.829 0.447-2.104 1.171-2.829 1.724-1.171 2.829-1.171zM13.333 8c0-0.736-0.299-1.404-0.781-1.885s-1.149-0.781-1.885-0.781-1.404 0.299-1.885 0.781-0.781 1.149-0.781 1.885 0.299 1.404 0.781 1.885 1.149 0.781 1.885 0.781 1.404-0.299 1.885-0.781 0.781-1.149 0.781-1.885zM12 8c0 0.369-0.149 0.701-0.391 0.943s-0.574 0.391-0.943 0.391-0.701-0.149-0.943-0.391-0.391-0.574-0.391-0.943 0.149-0.701 0.391-0.943 0.574-0.391 0.943-0.391 0.701 0.149 0.943 0.391 0.391 0.574 0.391 0.943z\"></path>\n </svg>\n "
},
{
name: 'trash-2',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>trash-2</title>\n <path d=\"M12 4.667v8.667c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-6.667c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-8.667zM11.333 3.333v-0.667c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586h-2.667c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v0.667h-2.667c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h0.667v8.667c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h6.667c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-8.667h0.667c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM6 3.333v-0.667c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195h2.667c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v0.667zM6 7.333v4c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-4c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667zM8.667 7.333v4c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-4c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'trash',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>trash</title>\n <path d=\"M12 4.667v8.667c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-6.667c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-8.667zM11.333 3.333v-0.667c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586h-2.667c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v0.667h-2.667c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h0.667v8.667c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h6.667c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-8.667h0.667c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM6 3.333v-0.667c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195h2.667c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v0.667z\"></path>\n </svg>\n "
},
{
name: 'trello',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>trello</title>\n <path d=\"M3.333 1.333c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v9.333c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h9.333c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-9.333c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586zM3.333 2.667h9.333c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v9.333c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-9.333c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-9.333c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195zM4.667 4c-0.368 0-0.667 0.299-0.667 0.667v6c0 0.368 0.299 0.667 0.667 0.667h2c0.368 0 0.667-0.299 0.667-0.667v-6c0-0.368-0.299-0.667-0.667-0.667zM5.333 5.333h0.667v4.667h-0.667zM9.333 4c-0.368 0-0.667 0.299-0.667 0.667v3.333c0 0.368 0.299 0.667 0.667 0.667h2c0.368 0 0.667-0.299 0.667-0.667v-3.333c0-0.368-0.299-0.667-0.667-0.667zM10 5.333h0.667v2h-0.667z\"></path>\n </svg>\n "
},
{
name: 'trending-down',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>trending-down</title>\n <path d=\"M11.333 12.667h4c0.091 0 0.177-0.018 0.255-0.051s0.152-0.081 0.216-0.145 0.112-0.137 0.145-0.216c0.033-0.079 0.051-0.165 0.051-0.255v-4c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v2.391l-5.195-5.195c-0.261-0.261-0.683-0.261-0.943 0l-2.862 2.862-4.529-4.529c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943l5 5c0.261 0.261 0.683 0.261 0.943 0l2.862-2.862 4.724 4.724h-2.391c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'trending-up',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>trending-up</title>\n <path d=\"M11.333 4.667h2.391l-4.724 4.724-2.862-2.862c-0.261-0.261-0.683-0.261-0.943 0l-5 5c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0l4.529-4.529 2.862 2.862c0.261 0.261 0.683 0.261 0.943 0l5.195-5.195v2.391c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-4c0-0.091-0.018-0.177-0.051-0.255s-0.081-0.152-0.144-0.215c-0.001-0.001-0.001-0.001-0.001-0.001-0.061-0.061-0.135-0.111-0.215-0.144-0.079-0.033-0.165-0.051-0.255-0.051h-4c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'triangle',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>triangle</title>\n <path d=\"M7.432 2.916c0.049-0.082 0.123-0.161 0.223-0.221 0.157-0.095 0.337-0.119 0.504-0.077s0.316 0.144 0.409 0.299l5.644 9.422c0.051 0.087 0.085 0.199 0.087 0.321 0.002 0.184-0.070 0.351-0.19 0.473s-0.285 0.199-0.462 0.201h-11.291c-0.101-0.001-0.214-0.027-0.321-0.089-0.159-0.092-0.266-0.239-0.311-0.405s-0.025-0.346 0.061-0.497zM6.288 2.231l-5.647 9.427c-0.281 0.487-0.337 1.033-0.205 1.527s0.453 0.939 0.932 1.215c0.309 0.179 0.651 0.267 0.983 0.268h11.295c0.559-0.006 1.058-0.236 1.415-0.601s0.576-0.869 0.57-1.421c-0.004-0.357-0.102-0.696-0.271-0.983l-5.649-9.431c-0.288-0.475-0.74-0.787-1.236-0.909s-1.041-0.054-1.513 0.233c-0.286 0.173-0.517 0.41-0.675 0.676z\"></path>\n </svg>\n "
},
{
name: 'truck',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>truck</title>\n <path d=\"M10 10h-8.667v-7.333h8.667v2.667zM11.333 6h1.724l1.609 1.609v2.391h-3.333zM4.667 12.333c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293-0.525-0.111-0.707-0.293-0.293-0.431-0.293-0.707 0.111-0.525 0.293-0.707 0.431-0.293 0.707-0.293 0.525 0.111 0.707 0.293 0.293 0.431 0.293 0.707zM14.667 12.333c0-0.358-0.081-0.697-0.225-1h0.891c0.368 0 0.667-0.299 0.667-0.667v-3.333c0-0.171-0.065-0.341-0.195-0.471l-2-2c-0.121-0.121-0.287-0.195-0.471-0.195h-2v-2.667c0-0.368-0.299-0.667-0.667-0.667h-10c-0.368 0-0.667 0.299-0.667 0.667v8.667c0 0.368 0.299 0.667 0.667 0.667h0.891c-0.144 0.303-0.225 0.642-0.225 1 0 0.644 0.262 1.229 0.683 1.65s1.006 0.683 1.65 0.683 1.229-0.262 1.65-0.683 0.683-1.006 0.683-1.65c0-0.358-0.081-0.697-0.225-1h4.449c-0.144 0.303-0.225 0.642-0.225 1 0 0.644 0.262 1.229 0.683 1.65s1.006 0.683 1.65 0.683 1.229-0.262 1.65-0.683 0.683-1.006 0.683-1.65zM13.333 12.333c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293-0.525-0.111-0.707-0.293-0.293-0.431-0.293-0.707 0.111-0.525 0.293-0.707 0.431-0.293 0.707-0.293 0.525 0.111 0.707 0.293 0.293 0.431 0.293 0.707z\"></path>\n </svg>\n "
},
{
name: 'tv',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>tv</title>\n <path d=\"M2.667 5.333h10.667c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v7.333c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-10.667c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-7.333c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195zM10.862 0.862l-2.862 2.862-2.862-2.862c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943l2.195 2.195h-3.724c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v7.333c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h10.667c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-7.333c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586h-3.724l2.195-2.195c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0z\"></path>\n </svg>\n "
},
{
name: 'twitter',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>twitter</title>\n <path d=\"M13.889 3.508c-0.124 0.161-0.261 0.317-0.411 0.464-0.155 0.155-0.231 0.378-0.185 0.605 0.025 0.121 0.040 0.269 0.041 0.423 0 3.504-1.619 5.981-3.873 7.265-1.765 1.006-3.959 1.303-6.148 0.747 0.83-0.241 1.64-0.614 2.395-1.127 0.098-0.066 0.182-0.162 0.235-0.281 0.149-0.337-0.002-0.731-0.339-0.88-1.849-0.822-2.753-1.954-3.179-3.062-0.278-0.723-0.364-1.465-0.347-2.151 0.014-0.541 0.092-1.040 0.185-1.455 0.263 0.228 0.536 0.47 0.824 0.691 1.367 1.051 3.083 1.653 4.931 1.605 0.361-0.010 0.649-0.305 0.649-0.667v-0.674c-0.001-0.119 0.006-0.238 0.023-0.356 0.075-0.537 0.336-1.046 0.775-1.427 0.483-0.421 1.091-0.605 1.684-0.564s1.169 0.309 1.589 0.792c0.168 0.191 0.433 0.277 0.689 0.203 0.154-0.045 0.309-0.095 0.463-0.152zM14.949 1.455c-0.493 0.348-1.015 0.617-1.525 0.803-0.621-0.557-1.394-0.868-2.184-0.923-0.932-0.065-1.891 0.226-2.651 0.888-0.691 0.601-1.101 1.405-1.22 2.248-0.025 0.177-0.037 0.355-0.036 0.533-1.281-0.095-2.463-0.567-3.434-1.314-0.517-0.397-0.974-0.873-1.356-1.41-0.213-0.3-0.629-0.371-0.929-0.158-0.103 0.073-0.178 0.169-0.223 0.273 0 0-0.088 0.199-0.19 0.507-0.075 0.225-0.161 0.517-0.238 0.86-0.109 0.481-0.201 1.068-0.217 1.714-0.021 0.818 0.080 1.741 0.435 2.664 0.455 1.183 1.311 2.319 2.765 3.215-1.046 0.484-2.163 0.693-3.249 0.645-0.368-0.016-0.679 0.269-0.695 0.637-0.011 0.259 0.127 0.491 0.342 0.612 3.27 1.817 6.951 1.785 9.777 0.174 2.694-1.534 4.547-4.467 4.547-8.423-0.001-0.111-0.005-0.22-0.015-0.326 0.671-0.743 1.117-1.619 1.331-2.521 0.085-0.358-0.137-0.717-0.495-0.802-0.193-0.046-0.387-0.002-0.538 0.104z\"></path>\n </svg>\n "
},
{
name: 'type',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>type</title>\n <path d=\"M7.333 3.333v9.333h-1.333c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h4c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-1.333v-9.333h4v1.333c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-2c0-0.368-0.299-0.667-0.667-0.667h-10.667c-0.368 0-0.667 0.299-0.667 0.667v2c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-1.333z\"></path>\n </svg>\n "
},
{
name: 'umbrella',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>umbrella</title>\n <path d=\"M15.997 7.937c-0.211-2.208-1.297-4.123-2.882-5.431s-3.67-2.013-5.878-1.803c-2.035 0.194-3.821 1.133-5.113 2.526-1.173 1.265-1.939 2.905-2.12 4.705-0.037 0.367 0.231 0.693 0.597 0.73 0.023 0.003 0.047 0.003 0.067 0.003h6.667v4c0 0.736 0.299 1.404 0.781 1.885s1.149 0.781 1.885 0.781 1.404-0.299 1.885-0.781 0.781-1.149 0.781-1.885c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667c0 0.369-0.149 0.701-0.391 0.943s-0.574 0.391-0.943 0.391-0.701-0.149-0.943-0.391-0.391-0.574-0.391-0.943v-4h6.667c0.368 0 0.667-0.299 0.667-0.667 0-0.022-0.001-0.045-0.003-0.063zM14.56 7.333h-13.116c0.258-1.216 0.839-2.316 1.657-3.197 1.078-1.163 2.565-1.943 4.263-2.105 1.842-0.176 3.579 0.411 4.903 1.503 1.145 0.945 1.977 2.267 2.294 3.8z\"></path>\n </svg>\n "
},
{
name: 'underline',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>underline</title>\n <path d=\"M3.333 2v4.667c0 1.289 0.523 2.456 1.367 3.3s2.011 1.367 3.3 1.367 2.456-0.523 3.3-1.367 1.367-2.011 1.367-3.3v-4.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v4.667c0 0.921-0.373 1.753-0.976 2.357s-1.437 0.976-2.357 0.976-1.753-0.373-2.357-0.976-0.976-1.437-0.976-2.357v-4.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667zM2.667 14.667h10.667c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-10.667c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'unlock',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>unlock</title>\n <path d=\"M3.333 8h9.333c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v4.667c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-9.333c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-4.667c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195zM5.333 6.667v-2c-0.001-0.737 0.297-1.403 0.779-1.887s1.148-0.782 1.885-0.783c0.677-0.001 1.293 0.25 1.763 0.667 0.425 0.377 0.731 0.888 0.853 1.473 0.075 0.361 0.428 0.592 0.789 0.517s0.592-0.428 0.517-0.789c-0.181-0.871-0.639-1.636-1.275-2.199-0.707-0.625-1.635-1.003-2.649-1.002-1.105 0.001-2.105 0.451-2.827 1.175s-1.17 1.725-1.169 2.829v2h-0.667c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v4.667c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h9.333c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-4.667c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586z\"></path>\n </svg>\n "
},
{
name: 'upload-cloud',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>upload-cloud</title>\n <path d=\"M7.333 9.609v4.391c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-4.391l1.529 1.529c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-2.667-2.667c-0.064-0.064-0.137-0.112-0.216-0.145-0.081-0.034-0.169-0.051-0.255-0.051-0.171 0-0.341 0.065-0.471 0.195l-2.667 2.667c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0zM13.913 12.845c0.969-0.529 1.634-1.401 1.923-2.383s0.203-2.075-0.325-3.044c-0.453-0.83-1.158-1.437-1.973-1.775-0.483-0.2-1.003-0.306-1.532-0.31h-0.351c-0.483-1.371-1.429-2.472-2.611-3.168-1.322-0.779-2.943-1.054-4.547-0.639s-2.889 1.441-3.668 2.763-1.054 2.943-0.639 4.547c0.248 0.958 0.715 1.807 1.317 2.475 0.246 0.274 0.668 0.296 0.941 0.050s0.296-0.668 0.050-0.941c-0.459-0.51-0.823-1.167-1.017-1.918-0.323-1.248-0.109-2.507 0.497-3.537s1.605-1.827 2.853-2.149 2.507-0.109 3.537 0.497 1.827 1.605 2.149 2.853c0.077 0.29 0.337 0.5 0.646 0.5h0.835c0.357 0.003 0.707 0.074 1.030 0.208 0.543 0.225 1.012 0.629 1.313 1.182 0.353 0.647 0.41 1.374 0.217 2.029s-0.635 1.236-1.282 1.588c-0.323 0.176-0.443 0.581-0.266 0.905s0.581 0.443 0.905 0.266z\"></path>\n </svg>\n "
},
{
name: 'upload',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>upload</title>\n <path d=\"M13.333 10v2.667c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-9.333c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-2.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v2.667c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h9.333c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-2.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667zM7.333 3.609v6.391c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-6.391l2.195 2.195c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-3.333-3.333c-0.064-0.064-0.137-0.112-0.216-0.145s-0.165-0.051-0.255-0.051c-0.087 0-0.174 0.017-0.255 0.051-0.079 0.033-0.152 0.081-0.216 0.145l-3.333 3.333c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0z\"></path>\n </svg>\n "
},
{
name: 'user-check',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>user-check</title>\n <path d=\"M11.333 14v-1.333c0-0.92-0.374-1.755-0.976-2.357s-1.437-0.976-2.357-0.976h-4.667c-0.92 0-1.755 0.374-2.357 0.976s-0.976 1.437-0.976 2.357v1.333c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-1.333c0-0.553 0.223-1.051 0.586-1.414s0.861-0.586 1.414-0.586h4.667c0.553 0 1.051 0.223 1.414 0.586s0.586 0.861 0.586 1.414v1.333c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667zM9 4.667c0-0.92-0.374-1.755-0.976-2.357s-1.437-0.976-2.357-0.976-1.755 0.374-2.357 0.976-0.976 1.437-0.976 2.357 0.374 1.755 0.976 2.357 1.437 0.976 2.357 0.976 1.755-0.374 2.357-0.976 0.976-1.437 0.976-2.357zM7.667 4.667c0 0.553-0.223 1.051-0.586 1.414s-0.861 0.586-1.414 0.586-1.051-0.223-1.414-0.586-0.586-0.861-0.586-1.414 0.223-1.051 0.586-1.414 0.861-0.586 1.414-0.586 1.051 0.223 1.414 0.586 0.586 0.861 0.586 1.414zM10.862 7.805l1.333 1.333c0.261 0.261 0.683 0.261 0.943 0l2.667-2.667c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-2.195 2.195-0.862-0.862c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943z\"></path>\n </svg>\n "
},
{
name: 'user-minus',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>user-minus</title>\n <path d=\"M11.333 14v-1.333c0-0.92-0.374-1.755-0.976-2.357s-1.437-0.976-2.357-0.976h-4.667c-0.92 0-1.755 0.374-2.357 0.976s-0.976 1.437-0.976 2.357v1.333c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-1.333c0-0.553 0.223-1.051 0.586-1.414s0.861-0.586 1.414-0.586h4.667c0.553 0 1.051 0.223 1.414 0.586s0.586 0.861 0.586 1.414v1.333c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667zM9 4.667c0-0.92-0.374-1.755-0.976-2.357s-1.437-0.976-2.357-0.976-1.755 0.374-2.357 0.976-0.976 1.437-0.976 2.357 0.374 1.755 0.976 2.357 1.437 0.976 2.357 0.976 1.755-0.374 2.357-0.976 0.976-1.437 0.976-2.357zM7.667 4.667c0 0.553-0.223 1.051-0.586 1.414s-0.861 0.586-1.414 0.586-1.051-0.223-1.414-0.586-0.586-0.861-0.586-1.414 0.223-1.051 0.586-1.414 0.861-0.586 1.414-0.586 1.051 0.223 1.414 0.586 0.586 0.861 0.586 1.414zM15.333 6.667h-4c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h4c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'user-plus',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>user-plus</title>\n <path d=\"M11.333 14v-1.333c0-0.92-0.374-1.755-0.976-2.357s-1.437-0.976-2.357-0.976h-4.667c-0.92 0-1.755 0.374-2.357 0.976s-0.976 1.437-0.976 2.357v1.333c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-1.333c0-0.553 0.223-1.051 0.586-1.414s0.861-0.586 1.414-0.586h4.667c0.553 0 1.051 0.223 1.414 0.586s0.586 0.861 0.586 1.414v1.333c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667zM9 4.667c0-0.92-0.374-1.755-0.976-2.357s-1.437-0.976-2.357-0.976-1.755 0.374-2.357 0.976-0.976 1.437-0.976 2.357 0.374 1.755 0.976 2.357 1.437 0.976 2.357 0.976 1.755-0.374 2.357-0.976 0.976-1.437 0.976-2.357zM7.667 4.667c0 0.553-0.223 1.051-0.586 1.414s-0.861 0.586-1.414 0.586-1.051-0.223-1.414-0.586-0.586-0.861-0.586-1.414 0.223-1.051 0.586-1.414 0.861-0.586 1.414-0.586 1.051 0.223 1.414 0.586 0.586 0.861 0.586 1.414zM15.333 6.667h-1.333v-1.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v1.333h-1.333c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h1.333v1.333c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-1.333h1.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'user-x',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>user-x</title>\n <path d=\"M11.333 14v-1.333c0-0.92-0.374-1.755-0.976-2.357s-1.437-0.976-2.357-0.976h-4.667c-0.92 0-1.755 0.374-2.357 0.976s-0.976 1.437-0.976 2.357v1.333c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-1.333c0-0.553 0.223-1.051 0.586-1.414s0.861-0.586 1.414-0.586h4.667c0.553 0 1.051 0.223 1.414 0.586s0.586 0.861 0.586 1.414v1.333c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667zM9 4.667c0-0.92-0.374-1.755-0.976-2.357s-1.437-0.976-2.357-0.976-1.755 0.374-2.357 0.976-0.976 1.437-0.976 2.357 0.374 1.755 0.976 2.357 1.437 0.976 2.357 0.976 1.755-0.374 2.357-0.976 0.976-1.437 0.976-2.357zM7.667 4.667c0 0.553-0.223 1.051-0.586 1.414s-0.861 0.586-1.414 0.586-1.051-0.223-1.414-0.586-0.586-0.861-0.586-1.414 0.223-1.051 0.586-1.414 0.861-0.586 1.414-0.586 1.051 0.223 1.414 0.586 0.586 0.861 0.586 1.414zM14.862 4.862l-1.195 1.195-1.195-1.195c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943l1.195 1.195-1.195 1.195c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0l1.195-1.195 1.195 1.195c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-1.195-1.195 1.195-1.195c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0z\"></path>\n </svg>\n "
},
{
name: 'user',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>user</title>\n <path d=\"M14 14v-1.333c0-0.92-0.374-1.755-0.976-2.357s-1.437-0.976-2.357-0.976h-5.333c-0.92 0-1.755 0.374-2.357 0.976s-0.976 1.437-0.976 2.357v1.333c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-1.333c0-0.553 0.223-1.051 0.586-1.414s0.861-0.586 1.414-0.586h5.333c0.553 0 1.051 0.223 1.414 0.586s0.586 0.861 0.586 1.414v1.333c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667zM11.333 4.667c0-0.92-0.374-1.755-0.976-2.357s-1.437-0.976-2.357-0.976-1.755 0.374-2.357 0.976-0.976 1.437-0.976 2.357 0.374 1.755 0.976 2.357 1.437 0.976 2.357 0.976 1.755-0.374 2.357-0.976 0.976-1.437 0.976-2.357zM10 4.667c0 0.553-0.223 1.051-0.586 1.414s-0.861 0.586-1.414 0.586-1.051-0.223-1.414-0.586-0.586-0.861-0.586-1.414 0.223-1.051 0.586-1.414 0.861-0.586 1.414-0.586 1.051 0.223 1.414 0.586 0.586 0.861 0.586 1.414z\"></path>\n </svg>\n "
},
{
name: 'users',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>users</title>\n <path d=\"M12 14v-1.333c0-0.92-0.374-1.755-0.976-2.357s-1.437-0.976-2.357-0.976h-5.333c-0.92 0-1.755 0.374-2.357 0.976s-0.976 1.437-0.976 2.357v1.333c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-1.333c0-0.553 0.223-1.051 0.586-1.414s0.861-0.586 1.414-0.586h5.333c0.553 0 1.051 0.223 1.414 0.586s0.586 0.861 0.586 1.414v1.333c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667zM9.333 4.667c0-0.92-0.374-1.755-0.976-2.357s-1.437-0.976-2.357-0.976-1.755 0.374-2.357 0.976-0.976 1.437-0.976 2.357 0.374 1.755 0.976 2.357 1.437 0.976 2.357 0.976 1.755-0.374 2.357-0.976 0.976-1.437 0.976-2.357zM8 4.667c0 0.553-0.223 1.051-0.586 1.414s-0.861 0.586-1.414 0.586-1.051-0.223-1.414-0.586-0.586-0.861-0.586-1.414 0.223-1.051 0.586-1.414 0.861-0.586 1.414-0.586 1.051 0.223 1.414 0.586 0.586 0.861 0.586 1.414zM16 14v-1.333c-0.001-0.83-0.305-1.59-0.811-2.174-0.435-0.502-1.019-0.874-1.686-1.051-0.356-0.094-0.721 0.118-0.815 0.474s0.118 0.721 0.474 0.815c0.405 0.107 0.757 0.332 1.019 0.635 0.303 0.351 0.485 0.804 0.485 1.301v1.333c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667zM10.501 2.733c0.535 0.137 0.963 0.477 1.225 0.918s0.354 0.98 0.217 1.515c-0.117 0.458-0.383 0.837-0.737 1.101-0.209 0.157-0.45 0.273-0.709 0.341-0.356 0.093-0.569 0.458-0.475 0.814s0.458 0.569 0.814 0.475c0.425-0.111 0.821-0.303 1.169-0.563 0.589-0.44 1.035-1.075 1.23-1.839 0.228-0.891 0.073-1.793-0.361-2.525s-1.15-1.302-2.041-1.531c-0.357-0.091-0.72 0.124-0.811 0.481s0.124 0.72 0.481 0.811z\"></path>\n </svg>\n "
},
{
name: 'video-off',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>video-off</title>\n <path d=\"M7.107 4h2.227c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v2.227c0 0.184 0.075 0.351 0.195 0.471l0.667 0.667c0.234 0.234 0.599 0.258 0.862 0.069l2.943-2.128v5.361c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-6.667c0.001-0.134-0.041-0.272-0.127-0.391-0.216-0.298-0.633-0.365-0.931-0.149l-3.539 2.561-0.070-0.070v-1.951c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586h-2.227c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667zM3.057 4l6.943 6.943v0.391c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-7.333c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-6.667c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195zM0.195 1.138l1.545 1.545c-0.449 0.058-0.851 0.265-1.155 0.569-0.361 0.361-0.586 0.862-0.586 1.414v6.667c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h7.333c0.552 0 1.053-0.225 1.414-0.586 0.179-0.179 0.325-0.393 0.427-0.631l3.688 3.688c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-14.667-14.667c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943z\"></path>\n </svg>\n "
},
{
name: 'video',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>video</title>\n <path d=\"M14.667 5.962v4.076l-2.853-2.038zM2 2.667c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v6.667c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h7.333c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-2.038l3.613 2.581c0.299 0.214 0.716 0.145 0.93-0.155 0.084-0.119 0.125-0.255 0.124-0.388v-6.667c0-0.368-0.299-0.667-0.667-0.667-0.145 0-0.28 0.047-0.387 0.124l-3.613 2.581v-2.038c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586zM2 4h7.333c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v6.667c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-7.333c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-6.667c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195z\"></path>\n </svg>\n "
},
{
name: 'voicemail',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>voicemail</title>\n <path d=\"M6 7.667c0 0.645-0.261 1.227-0.683 1.65s-1.005 0.683-1.65 0.683-1.227-0.261-1.65-0.683-0.683-1.005-0.683-1.65 0.261-1.227 0.683-1.65 1.005-0.683 1.65-0.683 1.227 0.261 1.65 0.683 0.683 1.005 0.683 1.65zM14.667 7.667c0 0.645-0.261 1.227-0.683 1.65s-1.005 0.683-1.65 0.683-1.227-0.261-1.65-0.683-0.683-1.005-0.683-1.65 0.261-1.227 0.683-1.65 1.005-0.683 1.65-0.683 1.227 0.261 1.65 0.683 0.683 1.005 0.683 1.65zM3.667 11.333h8.667c1.013 0 1.93-0.411 2.593-1.074s1.074-1.58 1.074-2.593-0.411-1.93-1.074-2.593-1.58-1.074-2.593-1.074-1.93 0.411-2.593 1.074-1.074 1.58-1.074 2.593c0 0.886 0.315 1.7 0.838 2.333h-3.009c0.523-0.633 0.838-1.447 0.838-2.333 0-1.013-0.411-1.93-1.074-2.593s-1.58-1.074-2.593-1.074-1.93 0.411-2.593 1.074-1.074 1.58-1.074 2.593 0.411 1.93 1.074 2.593 1.58 1.074 2.593 1.074z\"></path>\n </svg>\n "
},
{
name: 'volume-1',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>volume-1</title>\n <path d=\"M6.667 4.721v6.559l-2.25-1.8c-0.113-0.091-0.259-0.147-0.417-0.147h-2v-2.667h2c0.145 0.001 0.293-0.047 0.417-0.146zM6.917 2.813l-3.151 2.521h-2.433c-0.368 0-0.667 0.299-0.667 0.667v4c0 0.368 0.299 0.667 0.667 0.667h2.433l3.151 2.521c0.287 0.23 0.707 0.183 0.937-0.104 0.099-0.123 0.147-0.271 0.146-0.417v-9.333c0-0.368-0.299-0.667-0.667-0.667-0.158 0-0.303 0.055-0.417 0.146zM9.889 6.111c0.521 0.521 0.781 1.202 0.781 1.885s-0.26 1.365-0.781 1.885c-0.26 0.261-0.26 0.683 0 0.943s0.683 0.26 0.943 0c0.781-0.781 1.171-1.805 1.171-2.828s-0.391-2.047-1.171-2.828c-0.26-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943z\"></path>\n </svg>\n "
},
{
name: 'volume-2',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>volume-2</title>\n <path d=\"M6.667 4.721v6.559l-2.25-1.8c-0.113-0.091-0.259-0.147-0.417-0.147h-2v-2.667h2c0.145 0.001 0.293-0.047 0.417-0.146zM6.917 2.813l-3.151 2.521h-2.433c-0.368 0-0.667 0.299-0.667 0.667v4c0 0.368 0.299 0.667 0.667 0.667h2.433l3.151 2.521c0.287 0.23 0.707 0.183 0.937-0.104 0.099-0.123 0.147-0.271 0.146-0.417v-9.333c0-0.368-0.299-0.667-0.667-0.667-0.158 0-0.303 0.055-0.417 0.146zM12.242 3.758c1.171 1.172 1.757 2.706 1.757 4.242s-0.585 3.070-1.757 4.242c-0.26 0.261-0.26 0.683 0 0.943s0.683 0.26 0.943 0c1.431-1.431 2.147-3.309 2.147-5.185s-0.716-3.753-2.147-5.185c-0.26-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943zM9.889 6.111c0.521 0.521 0.781 1.202 0.781 1.885s-0.26 1.365-0.781 1.885c-0.26 0.261-0.26 0.683 0 0.943s0.683 0.26 0.943 0c0.781-0.781 1.171-1.805 1.171-2.828s-0.391-2.047-1.171-2.828c-0.26-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943z\"></path>\n </svg>\n "
},
{
name: 'volume-x',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>volume-x</title>\n <path d=\"M6.667 4.721v6.559l-2.25-1.8c-0.113-0.091-0.259-0.147-0.417-0.147h-2v-2.667h2c0.145 0.001 0.293-0.047 0.417-0.146zM6.917 2.813l-3.151 2.521h-2.433c-0.368 0-0.667 0.299-0.667 0.667v4c0 0.368 0.299 0.667 0.667 0.667h2.433l3.151 2.521c0.287 0.23 0.707 0.183 0.937-0.104 0.099-0.123 0.147-0.271 0.146-0.417v-9.333c0-0.368-0.299-0.667-0.667-0.667-0.158 0-0.303 0.055-0.417 0.146zM10.862 6.471l1.529 1.529-1.529 1.529c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0l1.529-1.529 1.529 1.529c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-1.529-1.529 1.529-1.529c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-1.529 1.529-1.529-1.529c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943z\"></path>\n </svg>\n "
},
{
name: 'volume',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>volume</title>\n <path d=\"M6.667 4.721v6.559l-2.25-1.8c-0.113-0.091-0.259-0.147-0.417-0.147h-2v-2.667h2c0.145 0.001 0.293-0.047 0.417-0.146zM6.917 2.813l-3.151 2.521h-2.433c-0.368 0-0.667 0.299-0.667 0.667v4c0 0.368 0.299 0.667 0.667 0.667h2.433l3.151 2.521c0.287 0.23 0.707 0.183 0.937-0.104 0.099-0.123 0.147-0.271 0.146-0.417v-9.333c0-0.368-0.299-0.667-0.667-0.667-0.158 0-0.303 0.055-0.417 0.146z\"></path>\n </svg>\n "
},
{
name: 'watch',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>watch</title>\n <path d=\"M7.333 6v2c0 0.184 0.075 0.351 0.195 0.471l1 1c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-0.805-0.805v-1.724c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667zM10.22 12.851l-0.111 1.209c-0.016 0.177-0.098 0.33-0.222 0.439-0.12 0.106-0.277 0.169-0.447 0.169h-2.887c-0.18 0.001-0.34-0.067-0.46-0.179-0.117-0.109-0.194-0.259-0.209-0.429l-0.111-1.211c0.677 0.312 1.432 0.486 2.227 0.486 0.792 0 1.544-0.173 2.22-0.483zM5.458 4.911c0.691-0.57 1.576-0.911 2.542-0.911 1.105 0 2.104 0.447 2.829 1.171s1.171 1.724 1.171 2.829-0.447 2.104-1.171 2.829c-0.069 0.069-0.141 0.136-0.215 0.2-0.023 0.021-0.047 0.041-0.071 0.060-0.691 0.57-1.576 0.911-2.542 0.911-1.105 0-2.104-0.447-2.829-1.171s-1.171-1.724-1.171-2.829 0.447-2.104 1.171-2.829c0.069-0.069 0.141-0.136 0.215-0.2 0.023-0.021 0.047-0.041 0.071-0.060zM11.661 4.121l-0.21-2.303c-0.047-0.504-0.279-0.953-0.625-1.278-0.359-0.337-0.844-0.542-1.372-0.54h-2.903c-0.503 0.002-0.969 0.191-1.323 0.505-0.368 0.325-0.617 0.788-0.665 1.315l-0.209 2.289c-0.042 0.039-0.084 0.080-0.125 0.121-0.964 0.965-1.562 2.299-1.562 3.771s0.598 2.807 1.562 3.771c0.039 0.039 0.078 0.077 0.117 0.114l0.21 2.297c0.047 0.504 0.279 0.953 0.625 1.278 0.359 0.337 0.844 0.542 1.372 0.54h2.885c0.506 0.001 0.975-0.188 1.331-0.503 0.369-0.326 0.619-0.789 0.667-1.317l0.209-2.289c0.042-0.039 0.084-0.080 0.125-0.121 0.965-0.965 1.563-2.299 1.563-3.771s-0.598-2.807-1.562-3.771c-0.036-0.036-0.073-0.072-0.11-0.107zM5.78 3.149l0.111-1.209c0.016-0.177 0.098-0.329 0.221-0.438 0.119-0.106 0.275-0.169 0.445-0.169h2.897c0.18-0.001 0.34 0.067 0.46 0.179 0.117 0.109 0.194 0.259 0.209 0.429l0.111 1.214c-0.679-0.313-1.436-0.489-2.233-0.489-0.792 0-1.544 0.173-2.22 0.483z\"></path>\n </svg>\n "
},
{
name: 'wifi-off',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>wifi-off</title>\n <path d=\"M10.854 7.973c0.526 0.257 0.999 0.571 1.376 0.898 0.279 0.241 0.699 0.211 0.941-0.068s0.211-0.699-0.068-0.941c-0.469-0.406-1.039-0.783-1.664-1.089-0.331-0.161-0.73-0.024-0.891 0.307s-0.024 0.73 0.307 0.891zM7.193 4.031c2.679-0.216 5.195 0.644 7.128 2.222 0.099 0.081 0.195 0.163 0.291 0.247 0.276 0.243 0.697 0.217 0.941-0.059s0.217-0.697-0.059-0.941c-0.108-0.095-0.218-0.188-0.329-0.279-2.189-1.787-5.043-2.763-8.079-2.519-0.366 0.030-0.639 0.351-0.61 0.718s0.351 0.641 0.718 0.611zM6.073 11.283c0.66-0.469 1.431-0.663 2.183-0.604 0.594 0.047 1.177 0.252 1.682 0.606 0.155 0.109 0.341 0.142 0.513 0.108l4.411 4.411c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-8.5-8.5c-0.033-0.042-0.071-0.080-0.113-0.113l-6.054-6.054c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943l2.725 2.725c-0.838 0.419-1.66 0.969-2.415 1.637-0.276 0.244-0.302 0.665-0.058 0.941s0.665 0.302 0.941 0.058c0.794-0.702 1.666-1.251 2.535-1.634l1.549 1.549c-0.905 0.305-1.781 0.785-2.566 1.441-0.283 0.236-0.32 0.657-0.084 0.939s0.657 0.32 0.939 0.084c0.847-0.708 1.816-1.167 2.792-1.383l1.859 1.859c-0.017-0.001-0.035-0.003-0.052-0.005-1.053-0.083-2.136 0.19-3.059 0.846-0.3 0.213-0.371 0.629-0.157 0.929s0.629 0.371 0.929 0.157zM8.667 13.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667 0.299 0.667 0.667 0.667 0.667-0.299 0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'wifi',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>wifi</title>\n <path d=\"M3.76 8.879c1.308-1.089 2.907-1.593 4.489-1.537 1.445 0.051 2.873 0.571 4.047 1.539 0.284 0.234 0.704 0.194 0.939-0.090s0.194-0.704-0.090-0.939c-1.405-1.159-3.116-1.781-4.848-1.842-1.897-0.067-3.821 0.537-5.39 1.845-0.283 0.235-0.321 0.656-0.085 0.939s0.656 0.321 0.939 0.085zM1.387 6.5c1.958-1.726 4.401-2.547 6.825-2.491 2.295 0.053 4.572 0.891 6.403 2.493 0.277 0.243 0.698 0.215 0.941-0.063s0.215-0.698-0.063-0.941c-2.071-1.813-4.651-2.763-7.25-2.823-2.747-0.063-5.518 0.869-7.737 2.825-0.277 0.243-0.303 0.665-0.059 0.941s0.665 0.303 0.941 0.059zM6.073 11.283c0.66-0.469 1.431-0.663 2.183-0.604 0.594 0.047 1.177 0.252 1.682 0.606 0.301 0.211 0.717 0.138 0.929-0.163s0.138-0.717-0.163-0.929c-0.702-0.492-1.513-0.778-2.343-0.843-1.053-0.083-2.136 0.19-3.059 0.846-0.3 0.213-0.371 0.629-0.157 0.929s0.629 0.371 0.929 0.157zM8.667 13.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667 0.299 0.667 0.667 0.667 0.667-0.299 0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'wind',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>wind</title>\n <path d=\"M6.866 3.53c0.13-0.131 0.299-0.196 0.471-0.197s0.341 0.064 0.472 0.194 0.196 0.299 0.197 0.471-0.064 0.341-0.194 0.472c-0.128 0.129-0.295 0.195-0.465 0.197h-6.013c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h6.029c0.505-0.006 1.011-0.203 1.395-0.59 0.389-0.391 0.583-0.905 0.581-1.416s-0.199-1.023-0.59-1.413-0.905-0.583-1.415-0.581-1.023 0.199-1.413 0.59c-0.26 0.261-0.259 0.683 0.003 0.943s0.683 0.258 0.943-0.003zM7.921 13.41c0.389 0.391 0.901 0.589 1.413 0.59s1.025-0.193 1.416-0.581 0.589-0.901 0.59-1.413-0.193-1.025-0.581-1.416c-0.385-0.387-0.89-0.584-1.395-0.59h-8.029c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h8.013c0.17 0.002 0.337 0.067 0.465 0.197 0.13 0.131 0.195 0.301 0.194 0.472s-0.066 0.341-0.197 0.471-0.301 0.195-0.472 0.194-0.341-0.066-0.471-0.197c-0.259-0.261-0.682-0.263-0.943-0.003s-0.263 0.682-0.003 0.943zM12.291 5.625c0.196-0.195 0.451-0.292 0.707-0.292s0.511 0.098 0.707 0.294 0.292 0.451 0.292 0.707-0.098 0.511-0.294 0.707c-0.195 0.195-0.449 0.291-0.705 0.292h-11.665c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h11.668c0.594-0.001 1.189-0.228 1.644-0.681 0.456-0.455 0.685-1.053 0.685-1.649s-0.227-1.195-0.681-1.651-1.053-0.685-1.649-0.685-1.195 0.227-1.651 0.681c-0.261 0.26-0.261 0.682-0.001 0.943s0.682 0.261 0.943 0.001z\"></path>\n </svg>\n "
},
{
name: 'x-circle',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>x-circle</title>\n <path d=\"M15.333 8c0-2.025-0.821-3.859-2.148-5.185s-3.161-2.148-5.185-2.148-3.859 0.821-5.185 2.148-2.148 3.161-2.148 5.185 0.821 3.859 2.148 5.185 3.161 2.148 5.185 2.148 3.859-0.821 5.185-2.148 2.148-3.161 2.148-5.185zM14 8c0 1.657-0.671 3.156-1.757 4.243s-2.585 1.757-4.243 1.757-3.156-0.671-4.243-1.757-1.757-2.585-1.757-4.243 0.671-3.156 1.757-4.243 2.585-1.757 4.243-1.757 3.156 0.671 4.243 1.757 1.757 2.585 1.757 4.243zM5.529 6.471l1.529 1.529-1.529 1.529c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0l1.529-1.529 1.529 1.529c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-1.529-1.529 1.529-1.529c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-1.529 1.529-1.529-1.529c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943z\"></path>\n </svg>\n "
},
{
name: 'x-octagon',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>x-octagon</title>\n <path d=\"M5.24 0.667c-0.171 0-0.341 0.065-0.471 0.195l-3.907 3.907c-0.121 0.121-0.195 0.287-0.195 0.471v5.52c0 0.171 0.065 0.341 0.195 0.471l3.907 3.907c0.121 0.121 0.287 0.195 0.471 0.195h5.52c0.171 0 0.341-0.065 0.471-0.195l3.907-3.907c0.121-0.121 0.195-0.287 0.195-0.471v-5.52c0-0.171-0.065-0.341-0.195-0.471l-3.907-3.907c-0.121-0.121-0.287-0.195-0.471-0.195zM5.516 2h4.968l3.516 3.516v4.968l-3.516 3.516h-4.968l-3.516-3.516v-4.968zM5.529 6.471l1.529 1.529-1.529 1.529c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0l1.529-1.529 1.529 1.529c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-1.529-1.529 1.529-1.529c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-1.529 1.529-1.529-1.529c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943z\"></path>\n </svg>\n "
},
{
name: 'x-square',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>x-square</title>\n <path d=\"M3.333 1.333c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v9.333c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h9.333c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-9.333c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586zM3.333 2.667h9.333c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v9.333c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-9.333c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-9.333c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195zM9.529 5.529l-1.529 1.529-1.529-1.529c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943l1.529 1.529-1.529 1.529c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0l1.529-1.529 1.529 1.529c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-1.529-1.529 1.529-1.529c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0z\"></path>\n </svg>\n "
},
{
name: 'x',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>x</title>\n <path d=\"M3.529 4.471l3.529 3.529-3.529 3.529c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0l3.529-3.529 3.529 3.529c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-3.529-3.529 3.529-3.529c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-3.529 3.529-3.529-3.529c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943z\"></path>\n </svg>\n "
},
{
name: 'youtube',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>youtube</title>\n <path d=\"M14.375 4.425c0.191 1.019 0.299 2.197 0.291 3.417 0.013 1.019-0.082 2.178-0.291 3.347-0.038 0.139-0.1 0.269-0.181 0.383-0.151 0.214-0.372 0.377-0.633 0.45-0.403 0.107-1.437 0.183-2.585 0.227-1.487 0.057-2.977 0.057-2.977 0.057s-1.49 0-2.977-0.057c-1.147-0.044-2.182-0.119-2.577-0.225-0.137-0.038-0.264-0.099-0.377-0.179-0.207-0.147-0.367-0.357-0.447-0.615-0.19-1.017-0.296-2.191-0.289-3.407-0.014-1.027 0.081-2.195 0.291-3.373 0.038-0.139 0.1-0.269 0.181-0.383 0.151-0.214 0.372-0.377 0.633-0.45 0.403-0.107 1.437-0.183 2.585-0.227 1.487-0.057 2.977-0.057 2.977-0.057s1.49 0 2.977 0.052c1.146 0.040 2.188 0.109 2.571 0.202 0.146 0.042 0.281 0.11 0.399 0.199 0.205 0.155 0.359 0.374 0.429 0.639zM15.673 4.118c-0.145-0.577-0.479-1.060-0.922-1.395-0.249-0.188-0.531-0.329-0.833-0.417-0.599-0.147-1.797-0.215-2.895-0.253-1.511-0.053-3.024-0.053-3.024-0.053s-1.515 0-3.027 0.058c-1.095 0.042-2.3 0.117-2.878 0.271-0.583 0.165-1.054 0.513-1.376 0.967-0.18 0.254-0.313 0.541-0.391 0.845-0.004 0.016-0.007 0.033-0.010 0.047-0.229 1.265-0.333 2.529-0.317 3.654-0.008 1.283 0.107 2.554 0.318 3.668 0.004 0.021 0.009 0.041 0.014 0.059 0.163 0.573 0.513 1.045 0.967 1.365 0.238 0.168 0.505 0.295 0.787 0.374 0.586 0.157 1.791 0.231 2.885 0.273 1.513 0.058 3.028 0.058 3.028 0.058s1.515 0 3.027-0.058c1.095-0.042 2.299-0.117 2.878-0.271 0.582-0.165 1.054-0.513 1.375-0.967 0.18-0.254 0.313-0.541 0.391-0.845 0.004-0.017 0.008-0.033 0.010-0.047 0.227-1.256 0.331-2.51 0.317-3.627 0.008-1.283-0.107-2.555-0.318-3.669-0.003-0.013-0.005-0.027-0.008-0.038zM7.167 8.867v-2.068l1.818 1.034zM6.829 10.593l3.833-2.18c0.32-0.182 0.432-0.589 0.25-0.909-0.062-0.109-0.151-0.195-0.25-0.25l-3.833-2.18c-0.32-0.182-0.727-0.070-0.909 0.25-0.060 0.105-0.088 0.22-0.087 0.329v4.36c0 0.368 0.299 0.667 0.667 0.667 0.121 0 0.235-0.033 0.329-0.087z\"></path>\n </svg>\n "
},
{
name: 'zap-off',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>zap-off</title>\n <path d=\"M8.935 4.582l0.393-3.167c0.045-0.365-0.214-0.699-0.579-0.744-0.233-0.029-0.452 0.066-0.595 0.235l-1.62 1.947c-0.235 0.283-0.197 0.703 0.086 0.939s0.703 0.197 0.939-0.086l0.166-0.199-0.113 0.911c-0.045 0.365 0.214 0.699 0.579 0.744s0.699-0.214 0.744-0.579zM12.892 9.034l1.62-1.94c0.236-0.283 0.198-0.703-0.085-0.939-0.125-0.104-0.277-0.155-0.427-0.155h-3.56c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h2.135l-0.707 0.846c-0.236 0.283-0.198 0.703 0.085 0.939s0.703 0.198 0.939-0.085zM8.641 9.583l1.124 1.124-1.488 1.785zM5.378 6.321l2.346 2.346h-4.301zM0.195 1.138l4.236 4.236-2.943 3.533c-0.236 0.283-0.197 0.703 0.085 0.939 0.125 0.105 0.277 0.155 0.427 0.155h5.245l-0.573 4.584c-0.046 0.365 0.213 0.699 0.579 0.744 0.233 0.029 0.452-0.065 0.595-0.235l2.866-3.439 4.151 4.151c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-14.667-14.667c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943z\"></path>\n </svg>\n "
},
{
name: 'zap',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>zap</title>\n <path d=\"M7.723 3.507l-0.385 3.077c-0.003 0.025-0.005 0.053-0.005 0.083 0 0.368 0.299 0.667 0.667 0.667h4.577l-4.3 5.16 0.385-3.077c0.003-0.025 0.005-0.053 0.005-0.083 0-0.368-0.299-0.667-0.667-0.667h-4.577zM8.155 0.907l-6.667 8c-0.236 0.283-0.197 0.703 0.085 0.939 0.125 0.105 0.277 0.155 0.427 0.155h5.245l-0.573 4.584c-0.046 0.365 0.213 0.699 0.579 0.744 0.233 0.029 0.452-0.065 0.595-0.235l6.667-8c0.236-0.283 0.197-0.703-0.085-0.939-0.125-0.105-0.277-0.155-0.427-0.155h-5.245l0.573-4.584c0.046-0.365-0.213-0.699-0.579-0.744-0.233-0.029-0.452 0.065-0.595 0.235z\"></path>\n </svg>\n "
},
{
name: 'zoom-in',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>zoom-in</title>\n <path d=\"M10.694 10.571c-0.023 0.017-0.045 0.037-0.066 0.058s-0.040 0.043-0.058 0.066c-0.839 0.809-1.979 1.305-3.237 1.305-1.289 0-2.455-0.521-3.3-1.367s-1.367-2.011-1.367-3.3 0.521-2.455 1.367-3.3 2.011-1.367 3.3-1.367 2.455 0.521 3.3 1.367 1.367 2.011 1.367 3.3c0 1.257-0.497 2.398-1.306 3.237zM14.471 13.529l-2.45-2.45c0.821-1.027 1.312-2.329 1.312-3.745 0-1.657-0.672-3.157-1.757-4.243s-2.586-1.757-4.243-1.757-3.157 0.672-4.243 1.757-1.757 2.586-1.757 4.243 0.672 3.157 1.757 4.243 2.586 1.757 4.243 1.757c1.417 0 2.719-0.491 3.745-1.312l2.45 2.45c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943zM5.333 8h1.333v1.333c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-1.333h1.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-1.333v-1.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v1.333h-1.333c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'zoom-out',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>zoom-out</title>\n <path d=\"M10.694 10.571c-0.023 0.017-0.045 0.037-0.066 0.058s-0.040 0.043-0.058 0.066c-0.839 0.809-1.979 1.305-3.237 1.305-1.289 0-2.455-0.521-3.3-1.367s-1.367-2.011-1.367-3.3 0.521-2.455 1.367-3.3 2.011-1.367 3.3-1.367 2.455 0.521 3.3 1.367 1.367 2.011 1.367 3.3c0 1.257-0.497 2.398-1.306 3.237zM14.471 13.529l-2.45-2.45c0.821-1.027 1.312-2.329 1.312-3.745 0-1.657-0.672-3.157-1.757-4.243s-2.586-1.757-4.243-1.757-3.157 0.672-4.243 1.757-1.757 2.586-1.757 4.243 0.672 3.157 1.757 4.243 2.586 1.757 4.243 1.757c1.417 0 2.719-0.491 3.745-1.312l2.45 2.45c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943zM5.333 8h4c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-4c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z\"></path>\n </svg>\n "
}
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var Icon = /** @class */ (function () {
function Icon(sanitizer) {
this.sanitizer = sanitizer;
this.baseClass = true;
}
Object.defineProperty(Icon.prototype, "icon", {
get: /**
* @return {?}
*/
function () {
return this._icon;
},
/**
* Sets the icon.
*/
set: /**
* Sets the icon.
* @param {?} value
* @return {?}
*/
function (value) {
this._icon = value;
this.getIconDef();
},
enumerable: true,
configurable: true
});
/**
* @private
* @return {?}
*/
Icon.prototype.getIconDef = /**
* @private
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var iconDefinition = iconDefs.filter((/**
* @param {?} iconDef
* @return {?}
*/
function (iconDef) { return iconDef.name === _this._icon; }))[0];
if (!iconDefinition) {
throw new Error("Cant find '" + this._icon + "' icon.");
}
this.content = this.sanitizer.bypassSecurityTrustHtml(iconDefinition.template);
};
Icon.decorators = [
{ type: core.Component, args: [{
selector: 'suka-icon',
template: "\n <span [innerHTML]=\"content\"></span>\n "
}] }
];
/** @nocollapse */
Icon.ctorParameters = function () { return [
{ type: platformBrowser.DomSanitizer }
]; };
Icon.propDecorators = {
baseClass: [{ type: core.HostBinding, args: ['class.suka-icon',] }],
accessibilityLabel: [{ type: core.HostBinding, args: ['attr.aria-label',] }, { type: core.Input }],
icon: [{ type: core.Input }]
};
return Icon;
}());
if (false) {
/**
* @type {?}
* @protected
*/
Icon.prototype._icon;
/** @type {?} */
Icon.prototype.content;
/** @type {?} */
Icon.prototype.baseClass;
/**
* Label for accesibility applications
* @type {?}
*/
Icon.prototype.accessibilityLabel;
/**
* @type {?}
* @private
*/
Icon.prototype.sanitizer;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var IconModule = /** @class */ (function () {
function IconModule() {
}
IconModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
Icon,
],
exports: [
Icon,
],
imports: [
common.CommonModule,
]
},] }
];
return IconModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var Select = /** @class */ (function () {
function Select() {
this._value = '';
/**
* `inline` or `default` select displays
*/
this.display = 'default';
/**
* Sets the unique ID. Defaults to `select-${total count of selects instantiated}`
*/
this.id = "select-" + Select.selectCount++;
/**
* Set to true to disable component.
*/
this.disabled = false;
/**
* Set to true for a loading select.
*/
this.skeleton = false;
/**
* Set to `true` for an invalid select component.
*/
this.invalid = false;
/**
* Set to `true` for an valid select component.
*/
this.valid = false;
/**
* emits the selected options `value`
*/
this.valueChange = new core.EventEmitter();
/**
* placeholder declarations. Replaced by the functions provided to `registerOnChange` and `registerOnTouched`
*/
this.onChangeHandler = (/**
* @param {?} _
* @return {?}
*/
function (_) { });
this.onTouchedHandler = (/**
* @return {?}
*/
function () { });
}
Object.defineProperty(Select.prototype, "value", {
get: /**
* @return {?}
*/
function () {
// return this._value;
return this.select.nativeElement.value || this._value;
},
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
this._value = v;
this.select.nativeElement.value = v;
},
enumerable: true,
configurable: true
});
/**
* Receives a value from the model.
*/
/**
* Receives a value from the model.
* @param {?} obj
* @return {?}
*/
Select.prototype.writeValue = /**
* Receives a value from the model.
* @param {?} obj
* @return {?}
*/
function (obj) {
this.value = obj;
};
/**
* Registers a listener that notifies the model when the control updates
*/
/**
* Registers a listener that notifies the model when the control updates
* @param {?} fn
* @return {?}
*/
Select.prototype.registerOnChange = /**
* Registers a listener that notifies the model when the control updates
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onChangeHandler = fn;
};
/**
* Registers a listener that notifies the model when the control is blurred
*/
/**
* Registers a listener that notifies the model when the control is blurred
* @param {?} fn
* @return {?}
*/
Select.prototype.registerOnTouched = /**
* Registers a listener that notifies the model when the control is blurred
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onTouchedHandler = fn;
};
/**
* Sets the disabled state through the model
*/
/**
* Sets the disabled state through the model
* @param {?} isDisabled
* @return {?}
*/
Select.prototype.setDisabledState = /**
* Sets the disabled state through the model
* @param {?} isDisabled
* @return {?}
*/
function (isDisabled) {
this.disabled = isDisabled;
};
/**
* Handles the change event from the `select`.
* Sends events to the change handler and emits a `selected` event.
*/
/**
* Handles the change event from the `select`.
* Sends events to the change handler and emits a `selected` event.
* @param {?} event
* @return {?}
*/
Select.prototype.onChange = /**
* Handles the change event from the `select`.
* Sends events to the change handler and emits a `selected` event.
* @param {?} event
* @return {?}
*/
function (event) {
this.onChangeHandler(event.target.value);
this.valueChange.emit(event.target.value);
};
/**
* Listens for the host blurring, and notifies the model
*/
/**
* Listens for the host blurring, and notifies the model
* @param {?} target
* @return {?}
*/
Select.prototype.onBlur = /**
* Listens for the host blurring, and notifies the model
* @param {?} target
* @return {?}
*/
function (target) {
this.onTouchedHandler();
};
/**
* @param {?} value
* @return {?}
*/
Select.prototype.isTemplate = /**
* @param {?} value
* @return {?}
*/
function (value) {
return value instanceof core.TemplateRef;
};
/**
* @return {?}
*/
Select.prototype.ngOnInit = /**
* @return {?}
*/
function () {
// console.log(this.select.nativeElement);
this.value = this.select.nativeElement.value;
};
/**
* Tracks the total number of selects instantiated. Used to generate unique IDs
*/
Select.selectCount = 0;
Select.decorators = [
{ type: core.Component, args: [{
selector: 'suka-select',
template: "\n <div class=\"form-item\">\n <div\n [ngClass]=\"{\n 'select--inline': display === 'inline',\n 'skeleton': skeleton\n }\"\n class=\"select\"\n >\n <label *ngIf=\"skeleton && label\" [for]=\"id\" class=\"label skeleton\"></label>\n <label *ngIf=\"!skeleton && label\" [for]=\"id\" class=\"label\">\n <ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n <ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n </label>\n <div *ngIf=\"helperText\" class=\"form__helper-text\">\n <ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n <ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n </div>\n <div class=\"select-input__wrapper\" [attr.data-invalid]=\"(invalid ? true : null)\" [attr.data-valid]=\"(valid ? true : null)\">\n <select\n #selectInput\n [attr.id]=\"id\"\n [disabled]=\"disabled\"\n (change)=\"onChange($event)\"\n [value]=\"value\"\n (blur)=\"onBlur($event)\"\n class=\"select-input\">\n <ng-content></ng-content>\n </select>\n <suka-icon *ngIf=\"invalid\" icon=\"alert-circle\" class=\"select__invalid-icon\"></suka-icon>\n <suka-icon *ngIf=\"valid\" icon=\"check\" class=\"select__valid-icon\"></suka-icon>\n <suka-icon *ngIf=\"!skeleton\" class=\"select__arrow\" icon=\"chevron-down\"></suka-icon>\n </div>\n <div *ngIf=\"invalid\" class=\"form-requirement\">\n <ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n <ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n </div>\n </div>\n </div>\n ",
providers: [
{
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef((/**
* @return {?}
*/
function () { return Select; })),
multi: true
}
],
styles: ["\n [data-invalid] ~ .select__arrow {\n bottom: 2.25rem;\n }\n "]
}] }
];
Select.propDecorators = {
display: [{ type: core.Input }],
label: [{ type: core.Input }],
helperText: [{ type: core.Input }],
invalidText: [{ type: core.Input }],
id: [{ type: core.Input }],
disabled: [{ type: core.Input }],
skeleton: [{ type: core.Input }],
invalid: [{ type: core.Input }],
valid: [{ type: core.Input }],
valueChange: [{ type: core.Output }],
select: [{ type: core.ViewChild, args: ['selectInput', { static: true },] }],
onBlur: [{ type: core.HostListener, args: ['blur', ['$event.target'],] }]
};
return Select;
}());
if (false) {
/**
* Tracks the total number of selects instantiated. Used to generate unique IDs
* @type {?}
*/
Select.selectCount;
/**
* @type {?}
* @private
*/
Select.prototype._value;
/**
* `inline` or `default` select displays
* @type {?}
*/
Select.prototype.display;
/**
* Label for the select. Appears above the input.
* @type {?}
*/
Select.prototype.label;
/**
* Optional helper text that appears under the label.
* @type {?}
*/
Select.prototype.helperText;
/**
* Sets the invalid text.
* @type {?}
*/
Select.prototype.invalidText;
/**
* Sets the unique ID. Defaults to `select-${total count of selects instantiated}`
* @type {?}
*/
Select.prototype.id;
/**
* Set to true to disable component.
* @type {?}
*/
Select.prototype.disabled;
/**
* Set to true for a loading select.
* @type {?}
*/
Select.prototype.skeleton;
/**
* Set to `true` for an invalid select component.
* @type {?}
*/
Select.prototype.invalid;
/**
* Set to `true` for an valid select component.
* @type {?}
*/
Select.prototype.valid;
/**
* emits the selected options `value`
* @type {?}
*/
Select.prototype.valueChange;
/** @type {?} */
Select.prototype.select;
/**
* placeholder declarations. Replaced by the functions provided to `registerOnChange` and `registerOnTouched`
* @type {?}
* @protected
*/
Select.prototype.onChangeHandler;
/**
* @type {?}
* @protected
*/
Select.prototype.onTouchedHandler;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var Option = /** @class */ (function () {
function Option() {
this.inputClass = 'select-option';
}
Option.decorators = [
{ type: core.Directive, args: [{
// tslint:disable-next-line
selector: "option"
},] }
];
Option.propDecorators = {
inputClass: [{ type: core.HostBinding, args: ['class',] }]
};
return Option;
}());
if (false) {
/** @type {?} */
Option.prototype.inputClass;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var OptGroup = /** @class */ (function () {
function OptGroup() {
this.inputClass = 'select-option';
}
OptGroup.decorators = [
{ type: core.Directive, args: [{
// tslint:disable-next-line
selector: "optgroup"
},] }
];
OptGroup.propDecorators = {
inputClass: [{ type: core.HostBinding, args: ['class',] }]
};
return OptGroup;
}());
if (false) {
/** @type {?} */
OptGroup.prototype.inputClass;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var SelectModule = /** @class */ (function () {
function SelectModule() {
}
SelectModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
Select,
Option,
OptGroup
],
exports: [
Select,
Option,
OptGroup
],
imports: [
common.CommonModule,
forms.FormsModule,
IconModule,
]
},] }
];
return SelectModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var Label = /** @class */ (function () {
function Label() {
/**
* Sets the unique ID. Defaults to `input-${total count of selects instantiated}`
*/
this.id = "input-" + Label.labelCounter++;
/**
* Set to `true` to display a loading label.
*/
this.skeleton = false;
/**
* Set to `true` to display the invalid state.
*/
this.invalid = false;
/**
* Set to `true` to display the valid state.
*/
this.valid = false;
this.labelClass = true;
Label.labelCounter++;
}
/**
* @return {?}
*/
Label.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
this.wrapper.nativeElement.querySelector('input,textarea,div').setAttribute('id', this.id);
};
/**
* @param {?} value
* @return {?}
*/
Label.prototype.isTemplate = /**
* @param {?} value
* @return {?}
*/
function (value) {
return value instanceof core.TemplateRef;
};
/**
* Used to build the id of the input item associated with the `Label`.
*/
Label.labelCounter = 0;
Label.decorators = [
{ type: core.Component, args: [{
selector: 'suka-label',
template: "\n <label\n [for]=\"id\"\n class=\"label\"\n [ngClass]=\"{\n 'skeleton': skeleton\n }\">\n <ng-content></ng-content>\n </label>\n <div *ngIf=\"!skeleton && helperText\" class=\"form__helper-text\">{{helperText}}</div>\n <div class=\"text-input__field-wrapper\" [attr.data-invalid]=\"(invalid ? true : null)\" #wrapper>\n <suka-icon *ngIf=\"invalid\" icon=\"alert-circle\" class=\"text-input__invalid-icon text-area__invalid-icon\"></suka-icon>\n <suka-icon *ngIf=\"valid\" icon=\"check\" class=\"text-input__valid-icon text-area__valid-icon\"></suka-icon>\n <ng-content select=\"input,textarea,div\"></ng-content>\n </div>\n <div *ngIf=\"invalid\" class=\"form-requirement\">\n <ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n <ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n </div>\n "
}] }
];
/** @nocollapse */
Label.ctorParameters = function () { return []; };
Label.propDecorators = {
id: [{ type: core.Input }],
skeleton: [{ type: core.Input }],
helperText: [{ type: core.Input }],
invalidText: [{ type: core.Input }],
invalid: [{ type: core.Input }],
valid: [{ type: core.Input }],
wrapper: [{ type: core.ViewChild, args: ['wrapper', { static: true },] }],
labelClass: [{ type: core.HostBinding, args: ['class.form-item',] }]
};
return Label;
}());
if (false) {
/**
* Used to build the id of the input item associated with the `Label`.
* @type {?}
*/
Label.labelCounter;
/**
* Sets the unique ID. Defaults to `input-${total count of selects instantiated}`
* @type {?}
*/
Label.prototype.id;
/**
* Set to `true` to display a loading label.
* @type {?}
*/
Label.prototype.skeleton;
/**
* Sets the label helper text.
* @type {?}
*/
Label.prototype.helperText;
/**
* Sets the invalid text to display when the label is invalid.
* @type {?}
*/
Label.prototype.invalidText;
/**
* Set to `true` to display the invalid state.
* @type {?}
*/
Label.prototype.invalid;
/**
* Set to `true` to display the valid state.
* @type {?}
*/
Label.prototype.valid;
/** @type {?} */
Label.prototype.wrapper;
/** @type {?} */
Label.prototype.labelClass;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var TextInput = /** @class */ (function () {
function TextInput() {
this.inputClass = true;
/**
* Set to `true` to display the invalid state.
*/
this.invalid = false;
/**
* Set to `true` to display the valid state.
*/
this.valid = false;
/**
* Set to `true` to display a loading text input.
*/
this.skeleton = false;
}
TextInput.decorators = [
{ type: core.Directive, args: [{
selector: '[sukaText]'
},] }
];
TextInput.propDecorators = {
inputClass: [{ type: core.HostBinding, args: ['class.text-input',] }],
invalid: [{ type: core.HostBinding, args: ['class.text-input--invalid',] }, { type: core.Input }],
valid: [{ type: core.HostBinding, args: ['class.text-input--valid',] }, { type: core.Input }],
skeleton: [{ type: core.HostBinding, args: ['class.skeleton',] }, { type: core.Input }]
};
return TextInput;
}());
if (false) {
/** @type {?} */
TextInput.prototype.inputClass;
/**
* Set to `true` to display the invalid state.
* @type {?}
*/
TextInput.prototype.invalid;
/**
* Set to `true` to display the valid state.
* @type {?}
*/
TextInput.prototype.valid;
/**
* Set to `true` to display a loading text input.
* @type {?}
*/
TextInput.prototype.skeleton;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var TextArea = /** @class */ (function () {
function TextArea() {
this.baseClass = true;
/**
* Set to `true` to display the invalid state.
*/
this.invalid = false;
/**
* Set to `true` to display the valid state.
*/
this.valid = false;
/**
* Set to `true` to display a loading text area.
*/
this.skeleton = false;
}
TextArea.decorators = [
{ type: core.Directive, args: [{
selector: '[sukaTextArea]'
},] }
];
TextArea.propDecorators = {
baseClass: [{ type: core.HostBinding, args: ['class.text-area',] }],
invalid: [{ type: core.HostBinding, args: ['class.text-area--invalid',] }, { type: core.Input }],
valid: [{ type: core.HostBinding, args: ['class.text-area--valid',] }, { type: core.Input }],
skeleton: [{ type: core.HostBinding, args: ['class.skeleton',] }, { type: core.Input }]
};
return TextArea;
}());
if (false) {
/** @type {?} */
TextArea.prototype.baseClass;
/**
* Set to `true` to display the invalid state.
* @type {?}
*/
TextArea.prototype.invalid;
/**
* Set to `true` to display the valid state.
* @type {?}
*/
TextArea.prototype.valid;
/**
* Set to `true` to display a loading text area.
* @type {?}
*/
TextArea.prototype.skeleton;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var InputModule = /** @class */ (function () {
function InputModule() {
}
InputModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
Label,
TextInput,
TextArea,
],
exports: [
Label,
TextInput,
TextArea,
],
imports: [
common.CommonModule,
forms.FormsModule,
IconModule,
]
},] }
];
return InputModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var GridDirective = /** @class */ (function () {
function GridDirective() {
this.baseClass = true;
}
GridDirective.decorators = [
{ type: core.Directive, args: [{
selector: '[sukaGrid]'
},] }
];
GridDirective.propDecorators = {
baseClass: [{ type: core.HostBinding, args: ['class.grid',] }]
};
return GridDirective;
}());
if (false) {
/** @type {?} */
GridDirective.prototype.baseClass;
}
var RowDirective = /** @class */ (function () {
function RowDirective() {
this.baseClass = true;
/**
* Set to `true` for no gutters between columns.
*/
this.noGutters = false;
/**
* Set to `true` to make the columns distribute their height accordingly to the row total height.
*/
this.rowDeck = false;
}
RowDirective.decorators = [
{ type: core.Directive, args: [{
selector: '[sukaRow]'
},] }
];
RowDirective.propDecorators = {
baseClass: [{ type: core.HostBinding, args: ['class.row',] }],
noGutters: [{ type: core.HostBinding, args: ['class.no-gutters',] }, { type: core.Input }],
rowDeck: [{ type: core.HostBinding, args: ['class.row-deck',] }, { type: core.Input }]
};
return RowDirective;
}());
if (false) {
/** @type {?} */
RowDirective.prototype.baseClass;
/**
* Set to `true` for no gutters between columns.
* @type {?}
*/
RowDirective.prototype.noGutters;
/**
* Set to `true` to make the columns distribute their height accordingly to the row total height.
* @type {?}
*/
RowDirective.prototype.rowDeck;
}
var ColumnDirective = /** @class */ (function () {
function ColumnDirective() {
/**
* Sets the class
*/
this.class = '';
/**
* Object that sets the column numbers according to the breakpoint.
* Breakpoints can be:<br>
* - xs: From 0px<br>
* - sm: From 576px<br>
* - md: From 768px<br>
* - lg: From 992px<br>
* - xl: From 1200px<br>
* - xxl: From 1600px<br>
* - nobreak: For all viewports.
* <br>
* Example:
* ```{xs: 12, sm: 6, md: 4}```
*/
this.columnNumbers = {};
/**
* Object that sets the column offset according to the breakpoint.
* Breakpoints can be:<br>
* - xs: From 0px<br>
* - sm: From 576px<br>
* - md: From 768px<br>
* - lg: From 992px<br>
* - xl: From 1200px<br>
* - xxl: From 1600px<br>
* - nobreak: For all viewports.
* <br>
* Example:
* ```{xs: 12, sm: 6, md: 4}```
*/
this.offsets = {};
// tslint:disable-next-line: variable-name
this._columnClasses = [];
}
Object.defineProperty(ColumnDirective.prototype, "columnClasses", {
get: /**
* @return {?}
*/
function () {
return this._columnClasses.join(' ');
},
enumerable: true,
configurable: true
});
/**
* @param {?} classes
* @return {?}
*/
ColumnDirective.prototype.set = /**
* @param {?} classes
* @return {?}
*/
function (classes) {
this._columnClasses = classes.split(' ');
};
/**
* @return {?}
*/
ColumnDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
try {
/** @type {?} */
var columnKeys = Object.keys(this.columnNumbers);
if (columnKeys.length <= 0) {
this._columnClasses.push('col');
}
columnKeys.forEach((/**
* @param {?} key
* @return {?}
*/
function (key) {
if (_this.columnNumbers[key] === 'nobreak') {
_this._columnClasses.push("col-" + key);
}
else {
_this._columnClasses.push("col-" + key + "-" + _this.columnNumbers[key]);
}
}));
Object.keys(this.offsets).forEach((/**
* @param {?} key
* @return {?}
*/
function (key) {
_this._columnClasses.push("offset-" + key + "-" + _this.offsets[key]);
}));
}
catch (err) {
throw new Error("Malformed `offsets` or `columnNumbers`: " + err);
}
if (this.class) {
this._columnClasses.push(this.class);
}
};
ColumnDirective.decorators = [
{ type: core.Directive, args: [{
selector: '[sukaCol]'
},] }
];
ColumnDirective.propDecorators = {
class: [{ type: core.Input }],
columnNumbers: [{ type: core.Input }],
offsets: [{ type: core.Input }],
columnClasses: [{ type: core.HostBinding, args: ['class',] }]
};
return ColumnDirective;
}());
if (false) {
/**
* Sets the class
* @type {?}
*/
ColumnDirective.prototype.class;
/**
* Object that sets the column numbers according to the breakpoint.
* Breakpoints can be:<br>
* - xs: From 0px<br>
* - sm: From 576px<br>
* - md: From 768px<br>
* - lg: From 992px<br>
* - xl: From 1200px<br>
* - xxl: From 1600px<br>
* - nobreak: For all viewports.
* <br>
* Example:
* ```{xs: 12, sm: 6, md: 4}```
* @type {?}
*/
ColumnDirective.prototype.columnNumbers;
/**
* Object that sets the column offset according to the breakpoint.
* Breakpoints can be:<br>
* - xs: From 0px<br>
* - sm: From 576px<br>
* - md: From 768px<br>
* - lg: From 992px<br>
* - xl: From 1200px<br>
* - xxl: From 1600px<br>
* - nobreak: For all viewports.
* <br>
* Example:
* ```{xs: 12, sm: 6, md: 4}```
* @type {?}
*/
ColumnDirective.prototype.offsets;
/**
* @type {?}
* @protected
*/
ColumnDirective.prototype._columnClasses;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var GridModule = /** @class */ (function () {
function GridModule() {
}
GridModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
ColumnDirective,
GridDirective,
RowDirective
],
exports: [
ColumnDirective,
GridDirective,
RowDirective
],
imports: [common.CommonModule]
},] }
];
return GridModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @enum {number} */
var ToggleState = {
Init: 0,
Checked: 1,
Unchecked: 2,
};
ToggleState[ToggleState.Init] = 'Init';
ToggleState[ToggleState.Checked] = 'Checked';
ToggleState[ToggleState.Unchecked] = 'Unchecked';
var ToggleChange = /** @class */ (function () {
function ToggleChange() {
}
return ToggleChange;
}());
if (false) {
/** @type {?} */
ToggleChange.prototype.source;
/** @type {?} */
ToggleChange.prototype.checked;
}
var Toggle = /** @class */ (function () {
/**
* Creates an instance of `Toggle`.
*/
function Toggle(changeDetectorRef) {
this.changeDetectorRef = changeDetectorRef;
/**
* Set to `true` for toggle to be rendered without any classes on the host element.
*/
this.inline = false;
/**
* Set to `true` for a disabled toggle.
*/
this.disabled = false;
/**
* Set to `true` for a loading toggle.
*/
this.skeleton = false;
/**
* Set to `true` to hide the toggle labels.
*/
this.hideLabel = false;
/**
* The unique id for the toggle component.
*/
this.id = "toggle-" + Toggle.toggleCount;
/**
* Used to set the `aria-label` attribute on the input element.
*/
// tslint:disable-next-line:no-input-rename
this.ariaLabel = '';
/**
* Horizontal distribution of elements
*/
this.distribution = 'equalSpacing';
/**
* Emits event notifying other classes when a change in state occurs on a toggle after a
* click.
*/
// tslint:disable-next-line: no-output-native
this.change = new core.EventEmitter();
/**
* Set to `true` if the input toggle is selected (or checked).
*/
// tslint:disable-next-line: variable-name
this._checked = false;
this.currentToggleState = ToggleState.Init;
/**
* Called when toggle is blurred. Needed to properly implement `ControlValueAccessor`.
*/
this.onTouched = (/**
* @return {?}
*/
function () { });
/**
* Method set in `registerOnChange` to propagate changes back to the form.
*/
this.propagateChange = (/**
* @param {?} _
* @return {?}
*/
function (_) { });
Toggle.toggleCount++;
}
Object.defineProperty(Toggle.prototype, "checked", {
/**
* Returns value `true` if state is selected for the toggle.
*/
get: /**
* Returns value `true` if state is selected for the toggle.
* @return {?}
*/
function () {
return this._checked;
},
/**
* Updating the state of a toggle to match the state of the parameter passed in.
*/
set: /**
* Updating the state of a toggle to match the state of the parameter passed in.
* @param {?} checked
* @return {?}
*/
function (checked) {
if (checked !== this.checked) {
this._checked = checked;
this.changeDetectorRef.markForCheck();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(Toggle.prototype, "toggleWrapperClass", {
get: /**
* @return {?}
*/
function () {
return !this.inline;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Toggle.prototype, "formItemClass", {
get: /**
* @return {?}
*/
function () {
return !this.inline;
},
enumerable: true,
configurable: true
});
/**
* Toggle the selected state of the toggle.
*/
/**
* Toggle the selected state of the toggle.
* @return {?}
*/
Toggle.prototype.toggle = /**
* Toggle the selected state of the toggle.
* @return {?}
*/
function () {
this.checked = !this.checked;
};
// this is the initial value set to the component
// this is the initial value set to the component
/**
* @param {?} value
* @return {?}
*/
Toggle.prototype.writeValue =
// this is the initial value set to the component
/**
* @param {?} value
* @return {?}
*/
function (value) {
this.checked = !!value;
};
/**
* Sets a method in order to propagate changes back to the form.
*/
/**
* Sets a method in order to propagate changes back to the form.
* @param {?} fn
* @return {?}
*/
Toggle.prototype.registerOnChange = /**
* Sets a method in order to propagate changes back to the form.
* @param {?} fn
* @return {?}
*/
function (fn) {
this.propagateChange = fn;
};
/**
* Registers a callback to be triggered when the control has been touched.
* @param fn Callback to be triggered when the toggle is touched.
*/
/**
* Registers a callback to be triggered when the control has been touched.
* @param {?} fn Callback to be triggered when the toggle is touched.
* @return {?}
*/
Toggle.prototype.registerOnTouched = /**
* Registers a callback to be triggered when the control has been touched.
* @param {?} fn Callback to be triggered when the toggle is touched.
* @return {?}
*/
function (fn) {
this.onTouched = fn;
};
/**
* Executes on the event of a change within `Toggle` to block propagation.
*/
/**
* Executes on the event of a change within `Toggle` to block propagation.
* @param {?} event
* @return {?}
*/
Toggle.prototype.onChange = /**
* Executes on the event of a change within `Toggle` to block propagation.
* @param {?} event
* @return {?}
*/
function (event) {
event.stopPropagation();
};
/**
* Handles click events on the `Toggle` and emits changes to other classes.
*/
/**
* Handles click events on the `Toggle` and emits changes to other classes.
* @param {?} event
* @return {?}
*/
Toggle.prototype.onClick = /**
* Handles click events on the `Toggle` and emits changes to other classes.
* @param {?} event
* @return {?}
*/
function (event) {
if (!this.disabled) {
this.toggle();
this.transitionToggleState(this._checked ? ToggleState.Checked : ToggleState.Unchecked);
this.emitChangeEvent();
}
};
/**
* Handles changes between toggle states.
*/
/**
* Handles changes between toggle states.
* @param {?} newState
* @return {?}
*/
Toggle.prototype.transitionToggleState = /**
* Handles changes between toggle states.
* @param {?} newState
* @return {?}
*/
function (newState) {
this.currentToggleState = newState;
};
/**
* Creates instance of `ToggleChange` used to propagate the change event.
*/
/**
* Creates instance of `ToggleChange` used to propagate the change event.
* @return {?}
*/
Toggle.prototype.emitChangeEvent = /**
* Creates instance of `ToggleChange` used to propagate the change event.
* @return {?}
*/
function () {
/** @type {?} */
var event = new ToggleChange();
event.source = this;
event.checked = this.checked;
this.propagateChange(this.checked);
this.change.emit(event);
};
/**
* Variable used for creating unique ids for toggle components.
*/
Toggle.toggleCount = 0;
Toggle.decorators = [
{ type: core.Component, args: [{
selector: 'suka-toggle',
template: "\n <label\n class=\"\n toggle\n toggle--distribution-{{distribution}}\n \"\n [ngClass]=\"{\n 'skeleton' : skeleton,\n 'disabled': disabled\n }\"\n >\n <ng-content></ng-content>\n <input\n type=\"checkbox\"\n [id]=\"id\"\n [value]=\"value\"\n [name]=\"name\"\n [required]=\"required\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-checked]=\"checked\"\n (change)=\"onChange($event)\"\n (click)=\"onClick($event)\"\n />\n <span class=\"toggle-body\">\n <span class=\"toggle-switch\"></span>\n <span class=\"toggle-track\">\n <span class=\"toggle-bg\"></span>\n <span class=\"toggle-bg toggle-bg_negative\"></span>\n </span>\n </span>\n </label>\n ",
providers: [
{
provide: forms.NG_VALUE_ACCESSOR,
useExisting: Toggle,
multi: true
}
],
changeDetection: core.ChangeDetectionStrategy.OnPush
}] }
];
/** @nocollapse */
Toggle.ctorParameters = function () { return [
{ type: core.ChangeDetectorRef }
]; };
Toggle.propDecorators = {
nested: [{ type: core.Input }],
inline: [{ type: core.Input }],
disabled: [{ type: core.Input }],
skeleton: [{ type: core.Input }],
hideLabel: [{ type: core.Input }],
name: [{ type: core.Input }],
id: [{ type: core.Input }],
required: [{ type: core.Input }],
value: [{ type: core.Input }],
ariaLabel: [{ type: core.Input, args: ['aria-label',] }],
ariaLabelledby: [{ type: core.Input, args: ['aria-labelledby',] }],
distribution: [{ type: core.Input }],
checked: [{ type: core.Input }],
toggleWrapperClass: [{ type: core.HostBinding, args: ['class.toggle-wrapper',] }],
formItemClass: [{ type: core.HostBinding, args: ['class.form-item',] }],
change: [{ type: core.Output }],
inputToggle: [{ type: core.ViewChild, args: ['inputToggle', { static: true },] }]
};
return Toggle;
}());
if (false) {
/**
* Variable used for creating unique ids for toggle components.
* @type {?}
*/
Toggle.toggleCount;
/**
* Set to `true` for toggle to be rendered with nested styles.
* @type {?}
*/
Toggle.prototype.nested;
/**
* Set to `true` for toggle to be rendered without any classes on the host element.
* @type {?}
*/
Toggle.prototype.inline;
/**
* Set to `true` for a disabled toggle.
* @type {?}
*/
Toggle.prototype.disabled;
/**
* Set to `true` for a loading toggle.
* @type {?}
*/
Toggle.prototype.skeleton;
/**
* Set to `true` to hide the toggle labels.
* @type {?}
*/
Toggle.prototype.hideLabel;
/**
* Sets the name attribute on the `input` element.
* @type {?}
*/
Toggle.prototype.name;
/**
* The unique id for the toggle component.
* @type {?}
*/
Toggle.prototype.id;
/**
* Reflects the required attribute of the `input` element.
* @type {?}
*/
Toggle.prototype.required;
/**
* Sets the value attribute on the `input` element.
* @type {?}
*/
Toggle.prototype.value;
/**
* Used to set the `aria-label` attribute on the input element.
* @type {?}
*/
Toggle.prototype.ariaLabel;
/**
* Used to set the `aria-labelledby` attribute on the input element.
* @type {?}
*/
Toggle.prototype.ariaLabelledby;
/**
* Horizontal distribution of elements
* @type {?}
*/
Toggle.prototype.distribution;
/**
* Emits event notifying other classes when a change in state occurs on a toggle after a
* click.
* @type {?}
*/
Toggle.prototype.change;
/**
* Set to `true` if the input toggle is selected (or checked).
* @type {?}
*/
Toggle.prototype._checked;
/** @type {?} */
Toggle.prototype.currentToggleState;
/**
* Maintains a reference to the view DOM element of the `Toggle`.
* @type {?}
*/
Toggle.prototype.inputToggle;
/**
* Called when toggle is blurred. Needed to properly implement `ControlValueAccessor`.
* @type {?}
*/
Toggle.prototype.onTouched;
/**
* Method set in `registerOnChange` to propagate changes back to the form.
* @type {?}
*/
Toggle.prototype.propagateChange;
/**
* @type {?}
* @protected
*/
Toggle.prototype.changeDetectorRef;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ToggleModule = /** @class */ (function () {
function ToggleModule() {
}
ToggleModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
Toggle
],
exports: [
Toggle
],
imports: [
common.CommonModule,
forms.FormsModule,
]
},] }
];
return ToggleModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Used to emit changes performed on a `Radio`.
*/
var /**
* Used to emit changes performed on a `Radio`.
*/
RadioChange = /** @class */ (function () {
function RadioChange(source, value) {
this.source = source;
this.value = value;
}
return RadioChange;
}());
if (false) {
/**
* Contains the `Radio` that has been changed.
* @type {?}
*/
RadioChange.prototype.source;
/**
* The value of the `Radio` encompassed in the `RadioChange` class.
* @type {?}
*/
RadioChange.prototype.value;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var Radio = /** @class */ (function () {
function Radio() {
/**
* Sets the checked status.
*/
this.checked = false;
/**
* Sets the `Radio` `<input>` name.
*/
this.name = '';
/**
* Set to `true` to disable the `Radio`.
*/
this.disabled = false;
/**
* Sets the label placement. Default to `right`.
*/
this.labelPlacement = 'right';
/**
* Sets the HTML required attribute
*/
this.required = false;
/**
* The value of the `Radio`.
*/
this.value = '';
/**
* Set to `true` for a loading radio.
*/
this.skeleton = false;
/**
* The id for the `Radio`.
*/
this.id = "radio-" + Radio.radioCount++;
/**
* emits when the state of the radio changes
*/
// tslint:disable-next-line: no-output-native
this.change = new core.EventEmitter();
/**
* Binds 'radio' value to the role attribute for `Radio`.
*/
this.role = 'radio';
this.hostClass = true;
// tslint:disable-next-line: variable-name
this._labelledby = '';
/**
* Handler provided by the `RadioGroup` to bubble events up
*/
this.radioChangeHandler = (/**
* @param {?} event
* @return {?}
*/
function (event) { });
}
Object.defineProperty(Radio.prototype, "ariaLabelledby", {
get: /**
* @return {?}
*/
function () {
if (this._labelledby) {
return this._labelledby;
}
return "label-" + this.id;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._labelledby = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Radio.prototype, "labelLeft", {
get: /**
* @return {?}
*/
function () {
return this.labelPlacement === 'left';
},
enumerable: true,
configurable: true
});
/**
* Synchronizes with the `RadioGroup` in the event of a changed `Radio`.
* Emits the changes of both the `RadioGroup` and `Radio`.
*/
/**
* Synchronizes with the `RadioGroup` in the event of a changed `Radio`.
* Emits the changes of both the `RadioGroup` and `Radio`.
* @param {?} event
* @return {?}
*/
Radio.prototype.onChange = /**
* Synchronizes with the `RadioGroup` in the event of a changed `Radio`.
* Emits the changes of both the `RadioGroup` and `Radio`.
* @param {?} event
* @return {?}
*/
function (event) {
event.stopPropagation();
this.checked = ((/** @type {?} */ (event.target))).checked;
/** @type {?} */
var radioEvent = new RadioChange(this, this.value);
this.change.emit(radioEvent);
this.radioChangeHandler(radioEvent);
};
/**
* Method called by `RadioGroup` with a callback function to bubble `RadioChange` events
* @param fn callback that expects a `RadioChange` as an argument
*/
/**
* Method called by `RadioGroup` with a callback function to bubble `RadioChange` events
* @param {?} fn callback that expects a `RadioChange` as an argument
* @return {?}
*/
Radio.prototype.registerRadioChangeHandler = /**
* Method called by `RadioGroup` with a callback function to bubble `RadioChange` events
* @param {?} fn callback that expects a `RadioChange` as an argument
* @return {?}
*/
function (fn) {
this.radioChangeHandler = fn;
};
/**
* Used to dynamically create unique ids for the `Radio`.
*/
Radio.radioCount = 0;
Radio.decorators = [
{ type: core.Component, args: [{
selector: 'suka-radio',
template: "\n <input\n *ngIf=\"!skeleton\"\n class=\"radio-button\"\n type=\"radio\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [id]=\"id\"\n [required]=\"required\"\n [value]=\"value\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n (change)=\"onChange($event)\">\n <div *ngIf=\"skeleton\" class=\"radio-button skeleton\"></div>\n <label\n class=\"radio-button__label\"\n [ngClass]=\"{\n 'skeleton': skeleton\n }\"\n [for]=\"id\"\n id=\"label-{{id}}\">\n <span class=\"radio-button__appearance\"></span>\n <ng-content></ng-content>\n </label>\n ",
providers: [
{
provide: forms.NG_VALUE_ACCESSOR,
useExisting: Radio,
multi: true
}
]
}] }
];
Radio.propDecorators = {
checked: [{ type: core.Input }],
name: [{ type: core.Input }],
disabled: [{ type: core.Input }],
labelPlacement: [{ type: core.Input }],
ariaLabelledby: [{ type: core.Input }],
required: [{ type: core.Input }],
value: [{ type: core.Input }],
skeleton: [{ type: core.Input }],
id: [{ type: core.Input }],
change: [{ type: core.Output }],
role: [{ type: core.HostBinding, args: ['attr.role',] }],
hostClass: [{ type: core.HostBinding, args: ['class.radio-button-wrapper',] }],
labelLeft: [{ type: core.HostBinding, args: ['class.radio-button-wrapper--label-left',] }]
};
return Radio;
}());
if (false) {
/**
* Used to dynamically create unique ids for the `Radio`.
* @type {?}
*/
Radio.radioCount;
/**
* Sets the checked status.
* @type {?}
*/
Radio.prototype.checked;
/**
* Sets the `Radio` `<input>` name.
* @type {?}
*/
Radio.prototype.name;
/**
* Set to `true` to disable the `Radio`.
* @type {?}
*/
Radio.prototype.disabled;
/**
* Sets the label placement. Default to `right`.
* @type {?}
*/
Radio.prototype.labelPlacement;
/**
* Sets the HTML required attribute
* @type {?}
*/
Radio.prototype.required;
/**
* The value of the `Radio`.
* @type {?}
*/
Radio.prototype.value;
/**
* Set to `true` for a loading radio.
* @type {?}
*/
Radio.prototype.skeleton;
/**
* The id for the `Radio`.
* @type {?}
*/
Radio.prototype.id;
/**
* emits when the state of the radio changes
* @type {?}
*/
Radio.prototype.change;
/**
* Binds 'radio' value to the role attribute for `Radio`.
* @type {?}
*/
Radio.prototype.role;
/** @type {?} */
Radio.prototype.hostClass;
/**
* @type {?}
* @protected
*/
Radio.prototype._labelledby;
/**
* Handler provided by the `RadioGroup` to bubble events up
* @type {?}
*/
Radio.prototype.radioChangeHandler;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var RadioGroup = /** @class */ (function () {
function RadioGroup() {
this.orientation = 'horizontal';
this.radioLabelPlacement = 'right';
/**
* Emits event notifying other classes of a change using a `RadioChange` class.
*/
// tslint:disable-next-line: no-output-native
this.change = new core.EventEmitter();
/**
* Set to true to disable the whole radio group
*/
this.disabled = false;
/**
* Binds 'form-item' value to the class for `RadioGroup`.
*/
this.radioButtonGroupClass = true;
/**
* To track whether the `RadioGroup` has been initialized.
*/
this.isInitialized = false;
/**
* Reflects whether or not the input is disabled and cannot be selected.
*/
this._disabled = false;
/**
* Reflects whether or not the dropdown is loading.
*/
this._skeleton = false;
/**
* The value of the selected option within the `RadioGroup`.
*/
this._value = null;
/**
* The `Radio` within the `RadioGroup` that is selected.
*/
this._selected = null;
/**
* The name attribute associated with the `RadioGroup`.
*/
this._name = "radio-group-" + RadioGroup.radioGroupCount++;
/**
* Needed to properly implement ControlValueAccessor.
*/
this.onTouched = (/**
* @return {?}
*/
function () { });
/**
* Method set in registerOnChange to propagate changes back to the form.
*/
this.propagateChange = (/**
* @param {?} _
* @return {?}
*/
function (_) { });
}
Object.defineProperty(RadioGroup.prototype, "selected", {
/**
* Returns the `Radio` that is selected within the `RadioGroup`.
*/
get: /**
* Returns the `Radio` that is selected within the `RadioGroup`.
* @return {?}
*/
function () {
return this._selected;
},
/**
* Sets the passed in `Radio` item as the selected input within the `RadioGroup`.
*/
set: /**
* Sets the passed in `Radio` item as the selected input within the `RadioGroup`.
* @param {?} selected
* @return {?}
*/
function (selected) {
this._selected = selected;
this.value = selected ? selected.value : null;
this.checkSelectedRadio();
},
enumerable: true,
configurable: true
});
Object.defineProperty(RadioGroup.prototype, "value", {
/**
* Returns the value/state of the selected `Radio` within the `RadioGroup`.
*/
get: /**
* Returns the value/state of the selected `Radio` within the `RadioGroup`.
* @return {?}
*/
function () {
return this._value;
},
/**
* Sets the value/state of the selected `Radio` within the `RadioGroup` to the passed in value.
*/
set: /**
* Sets the value/state of the selected `Radio` within the `RadioGroup` to the passed in value.
* @param {?} newValue
* @return {?}
*/
function (newValue) {
if (this._value !== newValue) {
this._value = newValue;
this.updateSelectedRadioFromValue();
this.checkSelectedRadio();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(RadioGroup.prototype, "name", {
/**
* Returns the associated name of the `RadioGroup`.
*/
get: /**
* Returns the associated name of the `RadioGroup`.
* @return {?}
*/
function () {
return this._name;
},
/**
* Replaces the name associated with the `RadioGroup` with the provided parameter.
*/
set: /**
* Replaces the name associated with the `RadioGroup` with the provided parameter.
* @param {?} name
* @return {?}
*/
function (name) {
this._name = name;
this.updateRadios();
},
enumerable: true,
configurable: true
});
Object.defineProperty(RadioGroup.prototype, "skeleton", {
/**
* Returns the skeleton value in the `RadioGroup` if there is one.
*/
get: /**
* Returns the skeleton value in the `RadioGroup` if there is one.
* @return {?}
*/
function () {
return this._skeleton;
},
/**
* Sets the skeleton value for all `Radio` to the skeleton value of `RadioGroup`.
*/
set: /**
* Sets the skeleton value for all `Radio` to the skeleton value of `RadioGroup`.
* @param {?} value
* @return {?}
*/
function (value) {
this._skeleton = value;
this.updateChildren();
},
enumerable: true,
configurable: true
});
/**
* Updates the selected `Radio` to be checked (selected).
*/
/**
* Updates the selected `Radio` to be checked (selected).
* @return {?}
*/
RadioGroup.prototype.checkSelectedRadio = /**
* Updates the selected `Radio` to be checked (selected).
* @return {?}
*/
function () {
if (this.selected && !this._selected.checked) {
this.selected.checked = true;
}
};
/**
* Use the value of the `RadioGroup` to update the selected radio to the right state (selected state).
*/
/**
* Use the value of the `RadioGroup` to update the selected radio to the right state (selected state).
* @return {?}
*/
RadioGroup.prototype.updateSelectedRadioFromValue = /**
* Use the value of the `RadioGroup` to update the selected radio to the right state (selected state).
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var alreadySelected = this._selected != null && this._selected.value === this._value;
if (this.radios && !alreadySelected) {
this._selected = null;
this.radios.forEach((/**
* @param {?} radio
* @return {?}
*/
function (radio) {
if (radio.checked) {
_this._selected = radio;
}
}));
}
};
/**
* Creates a class of `RadioChange` to emit the change in the `RadioGroup`.
*/
/**
* Creates a class of `RadioChange` to emit the change in the `RadioGroup`.
* @param {?} event
* @return {?}
*/
RadioGroup.prototype.emitChangeEvent = /**
* Creates a class of `RadioChange` to emit the change in the `RadioGroup`.
* @param {?} event
* @return {?}
*/
function (event) {
this.change.emit(event);
this.propagateChange(event.value);
this.onTouched();
};
/**
* Synchronizes radio properties.
*/
/**
* Synchronizes radio properties.
* @return {?}
*/
RadioGroup.prototype.updateRadios = /**
* Synchronizes radio properties.
* @return {?}
*/
function () {
var _this = this;
if (this.radios) {
setTimeout((/**
* @return {?}
*/
function () {
_this.radios.forEach((/**
* @param {?} radio
* @return {?}
*/
function (radio) { return radio.name = _this.name; }));
if (_this.radioLabelPlacement === 'left') {
_this.radios.forEach((/**
* @param {?} radio
* @return {?}
*/
function (radio) { return radio.labelPlacement = 'left'; }));
}
}));
}
};
/**
* Updates the value of the `RadioGroup` using the provided parameter.
*/
/**
* Updates the value of the `RadioGroup` using the provided parameter.
* @param {?} value
* @return {?}
*/
RadioGroup.prototype.writeValue = /**
* Updates the value of the `RadioGroup` using the provided parameter.
* @param {?} value
* @return {?}
*/
function (value) {
this.value = value;
};
/**
* @return {?}
*/
RadioGroup.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
var _this = this;
this.radios.changes.subscribe((/**
* @return {?}
*/
function () {
_this.updateRadios();
_this.updateRadioChangeHandler();
}));
this.updateChildren();
this.updateRadioChangeHandler();
};
/**
* @return {?}
*/
RadioGroup.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
this.updateRadios();
};
/**
* Used to set method to propagate changes back to the form.
*/
/**
* Used to set method to propagate changes back to the form.
* @param {?} fn
* @return {?}
*/
RadioGroup.prototype.registerOnChange = /**
* Used to set method to propagate changes back to the form.
* @param {?} fn
* @return {?}
*/
function (fn) {
this.propagateChange = fn;
};
/**
* Registers a callback to be triggered when the control has been touched.
* @param fn Callback to be triggered when the checkbox is touched.
*/
/**
* Registers a callback to be triggered when the control has been touched.
* @param {?} fn Callback to be triggered when the checkbox is touched.
* @return {?}
*/
RadioGroup.prototype.registerOnTouched = /**
* Registers a callback to be triggered when the control has been touched.
* @param {?} fn Callback to be triggered when the checkbox is touched.
* @return {?}
*/
function (fn) {
this.onTouched = fn;
};
/**
* @protected
* @return {?}
*/
RadioGroup.prototype.updateChildren = /**
* @protected
* @return {?}
*/
function () {
var _this = this;
if (this.radios) {
this.radios.forEach((/**
* @param {?} child
* @return {?}
*/
function (child) { return child.skeleton = _this.skeleton; }));
}
};
/**
* @protected
* @return {?}
*/
RadioGroup.prototype.updateRadioChangeHandler = /**
* @protected
* @return {?}
*/
function () {
var _this = this;
this.radios.forEach((/**
* @param {?} radio
* @return {?}
*/
function (radio) {
radio.registerRadioChangeHandler((/**
* @param {?} event
* @return {?}
*/
function (event) {
// update selected and value from the event
_this._selected = event.source;
_this._value = event.value;
// bubble the event
_this.emitChangeEvent(event);
}));
}));
};
RadioGroup.radioGroupCount = 0;
RadioGroup.decorators = [
{ type: core.Component, args: [{
selector: 'suka-radio-group',
template: "\n <div\n class=\"radio-button-group\"\n [ngClass]=\"{\n 'radio-button-group--vertical': orientation === 'vertical',\n 'radio-button-group--label-left': orientation === 'vertical' && radioLabelPlacement === 'left'\n }\"\n role=\"radiogroup\">\n <ng-content></ng-content>\n </div>\n ",
providers: [
{
provide: forms.NG_VALUE_ACCESSOR,
useExisting: RadioGroup,
multi: true
}
]
}] }
];
RadioGroup.propDecorators = {
orientation: [{ type: core.Input }],
radioLabelPlacement: [{ type: core.Input }],
change: [{ type: core.Output }],
radios: [{ type: core.ContentChildren, args: [core.forwardRef((/**
* @return {?}
*/
function () { return Radio; })),] }],
selected: [{ type: core.Input }],
value: [{ type: core.Input }],
name: [{ type: core.Input }],
disabled: [{ type: core.Input }],
skeleton: [{ type: core.Input }],
radioButtonGroupClass: [{ type: core.HostBinding, args: ['class.form-item',] }]
};
return RadioGroup;
}());
if (false) {
/** @type {?} */
RadioGroup.radioGroupCount;
/** @type {?} */
RadioGroup.prototype.orientation;
/** @type {?} */
RadioGroup.prototype.radioLabelPlacement;
/**
* Emits event notifying other classes of a change using a `RadioChange` class.
* @type {?}
*/
RadioGroup.prototype.change;
/**
* The `Radio` input items in the `RadioGroup`.
* @type {?}
*/
RadioGroup.prototype.radios;
/**
* Set to true to disable the whole radio group
* @type {?}
*/
RadioGroup.prototype.disabled;
/**
* Binds 'form-item' value to the class for `RadioGroup`.
* @type {?}
*/
RadioGroup.prototype.radioButtonGroupClass;
/**
* To track whether the `RadioGroup` has been initialized.
* @type {?}
* @protected
*/
RadioGroup.prototype.isInitialized;
/**
* Reflects whether or not the input is disabled and cannot be selected.
* @type {?}
* @protected
*/
RadioGroup.prototype._disabled;
/**
* Reflects whether or not the dropdown is loading.
* @type {?}
* @protected
*/
RadioGroup.prototype._skeleton;
/**
* The value of the selected option within the `RadioGroup`.
* @type {?}
* @protected
*/
RadioGroup.prototype._value;
/**
* The `Radio` within the `RadioGroup` that is selected.
* @type {?}
* @protected
*/
RadioGroup.prototype._selected;
/**
* The name attribute associated with the `RadioGroup`.
* @type {?}
* @protected
*/
RadioGroup.prototype._name;
/**
* Needed to properly implement ControlValueAccessor.
* @type {?}
*/
RadioGroup.prototype.onTouched;
/**
* Method set in registerOnChange to propagate changes back to the form.
* @type {?}
*/
RadioGroup.prototype.propagateChange;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var RadioModule = /** @class */ (function () {
function RadioModule() {
}
RadioModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
Radio,
RadioGroup
],
exports: [
Radio,
RadioGroup
],
imports: [
common.CommonModule,
forms.FormsModule
]
},] }
];
return RadioModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Used to emit changes performed on a `ButtonRadio`.
*/
var /**
* Used to emit changes performed on a `ButtonRadio`.
*/
ButtonRadioChange = /** @class */ (function () {
function ButtonRadioChange(source, value) {
this.source = source;
this.value = value;
}
return ButtonRadioChange;
}());
if (false) {
/**
* Contains the `ButtonRadio` that has been changed.
* @type {?}
*/
ButtonRadioChange.prototype.source;
/**
* The value of the `ButtonRadio` encompassed in the `ButtonRadioChange` class.
* @type {?}
*/
ButtonRadioChange.prototype.value;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ButtonRadio = /** @class */ (function () {
function ButtonRadio() {
/**
* Sets the checked status
*/
this.checked = false;
/**
* Sets the name of the `ButtonRadio`
*/
this.name = '';
/**
* Set to `true` to disable it.
*/
this.disabled = false;
/**
* Sets the HTML required attribute
*/
this.required = false;
/**
* The value of the `ButtonRadio`.
*/
this.value = '';
/**
* Set to `true` for a loading state.
*/
this.skeleton = false;
/**
* The id for the `ButtonRadio`.
*/
this.id = "button-radio-" + ButtonRadio.buttonRadioCount++;
/**
* emits when the state of the button radio changes
*/
// tslint:disable-next-line: no-output-native
this.change = new core.EventEmitter();
/**
* Binds 'radio' value to the role attribute for `ButtonRadio`.
*/
this.role = 'radio';
this.hostClass = true;
// tslint:disable-next-line: variable-name
this._labelledby = '';
/**
* Handler provided by the `ButtonRadioGroup` to bubble events up
*/
this.buttonRadioChangeHandler = (/**
* @param {?} event
* @return {?}
*/
function (event) { });
}
Object.defineProperty(ButtonRadio.prototype, "ariaLabelledby", {
get: /**
* @return {?}
*/
function () {
if (this._labelledby) {
return this._labelledby;
}
return "label-" + this.id;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._labelledby = value;
},
enumerable: true,
configurable: true
});
/**
* Synchronizes with the `ButtonRadioGroup` in the event of a changed `ButtonRadio`.
* Emits the changes of both the `ButtonRadioGroup` and `ButtonRadio`.
*/
/**
* Synchronizes with the `ButtonRadioGroup` in the event of a changed `ButtonRadio`.
* Emits the changes of both the `ButtonRadioGroup` and `ButtonRadio`.
* @param {?} event
* @return {?}
*/
ButtonRadio.prototype.onChange = /**
* Synchronizes with the `ButtonRadioGroup` in the event of a changed `ButtonRadio`.
* Emits the changes of both the `ButtonRadioGroup` and `ButtonRadio`.
* @param {?} event
* @return {?}
*/
function (event) {
event.stopPropagation();
this.checked = ((/** @type {?} */ (event.target))).checked;
/** @type {?} */
var ButtonRadioEvent = new ButtonRadioChange(this, this.value);
this.change.emit(ButtonRadioEvent);
this.buttonRadioChangeHandler(ButtonRadioEvent);
};
/**
* Method called by `ButtonRadioGroup` with a callback function to bubble `ButtonRadioChange` events
* @param fn callback that expects a `ButtonRadioChange` as an argument
*/
/**
* Method called by `ButtonRadioGroup` with a callback function to bubble `ButtonRadioChange` events
* @param {?} fn callback that expects a `ButtonRadioChange` as an argument
* @return {?}
*/
ButtonRadio.prototype.registerButtonRadioChangeHandler = /**
* Method called by `ButtonRadioGroup` with a callback function to bubble `ButtonRadioChange` events
* @param {?} fn callback that expects a `ButtonRadioChange` as an argument
* @return {?}
*/
function (fn) {
this.buttonRadioChangeHandler = fn;
};
/**
* Used to dynamically create unique ids for the `ButtonRadio`.
*/
ButtonRadio.buttonRadioCount = 0;
ButtonRadio.decorators = [
{ type: core.Component, args: [{
selector: 'suka-button-radio',
template: "\n <input\n *ngIf=\"!skeleton\"\n class=\"button-radio\"\n type=\"radio\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [id]=\"id\"\n [required]=\"required\"\n [value]=\"value\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n (change)=\"onChange($event)\">\n <div *ngIf=\"skeleton\" class=\"button-radio skeleton\"></div>\n <label\n class=\"button-radio__label\"\n [ngClass]=\"{\n 'skeleton': skeleton\n }\"\n [for]=\"id\"\n id=\"label-{{id}}\">\n <ng-content></ng-content>\n </label>\n ",
providers: [
{
provide: forms.NG_VALUE_ACCESSOR,
useExisting: ButtonRadio,
multi: true
}
]
}] }
];
ButtonRadio.propDecorators = {
checked: [{ type: core.Input }],
name: [{ type: core.Input }],
disabled: [{ type: core.Input }],
ariaLabelledby: [{ type: core.Input }],
required: [{ type: core.Input }],
value: [{ type: core.Input }],
skeleton: [{ type: core.Input }],
id: [{ type: core.Input }],
change: [{ type: core.Output }],
role: [{ type: core.HostBinding, args: ['attr.role',] }],
hostClass: [{ type: core.HostBinding, args: ['class.button-radio-wrapper',] }]
};
return ButtonRadio;
}());
if (false) {
/**
* Used to dynamically create unique ids for the `ButtonRadio`.
* @type {?}
*/
ButtonRadio.buttonRadioCount;
/**
* Sets the checked status
* @type {?}
*/
ButtonRadio.prototype.checked;
/**
* Sets the name of the `ButtonRadio`
* @type {?}
*/
ButtonRadio.prototype.name;
/**
* Set to `true` to disable it.
* @type {?}
*/
ButtonRadio.prototype.disabled;
/**
* Sets the HTML required attribute
* @type {?}
*/
ButtonRadio.prototype.required;
/**
* The value of the `ButtonRadio`.
* @type {?}
*/
ButtonRadio.prototype.value;
/**
* Set to `true` for a loading state.
* @type {?}
*/
ButtonRadio.prototype.skeleton;
/**
* The id for the `ButtonRadio`.
* @type {?}
*/
ButtonRadio.prototype.id;
/**
* emits when the state of the button radio changes
* @type {?}
*/
ButtonRadio.prototype.change;
/**
* Binds 'radio' value to the role attribute for `ButtonRadio`.
* @type {?}
*/
ButtonRadio.prototype.role;
/** @type {?} */
ButtonRadio.prototype.hostClass;
/**
* @type {?}
* @protected
*/
ButtonRadio.prototype._labelledby;
/**
* Handler provided by the `ButtonRadioGroup` to bubble events up
* @type {?}
*/
ButtonRadio.prototype.buttonRadioChangeHandler;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ButtonRadioGroup = /** @class */ (function () {
function ButtonRadioGroup() {
/**
* Emits event notifying other classes of a change using a `ButtonRadioChange` class.
*/
// tslint:disable-next-line: no-output-native
this.change = new core.EventEmitter();
/**
* Set to true to disable the whole buttonRadio group
*/
this.disabled = false;
/**
* Binds 'form-item' value to the class for `ButtonRadioGroup`.
*/
this.buttonRadioButtonGroupClass = true;
/**
* To track whether the `ButtonRadioGroup` has been initialized.
*/
this.isInitialized = false;
/**
* Reflects whether or not the input is disabled and cannot be selected.
*/
this._disabled = false;
/**
* Reflects whether or not the dropdown is loading.
*/
this._skeleton = false;
/**
* The value of the selected option within the `ButtonRadioGroup`.
*/
this._value = null;
/**
* The `ButtonRadio` within the `ButtonRadioGroup` that is selected.
*/
this._selected = null;
/**
* The name attribute associated with the `ButtonRadioGroup`.
*/
this._name = "button-radio-group-" + ButtonRadioGroup.buttonRadioGroupCount++;
/**
* Needed to properly implement ControlValueAccessor.
*/
this.onTouched = (/**
* @return {?}
*/
function () { });
/**
* Method set in registerOnChange to propagate changes back to the form.
*/
this.propagateChange = (/**
* @param {?} _
* @return {?}
*/
function (_) { });
}
Object.defineProperty(ButtonRadioGroup.prototype, "selected", {
/**
* Returns the `ButtonRadio` that is selected within the `ButtonRadioGroup`.
*/
get: /**
* Returns the `ButtonRadio` that is selected within the `ButtonRadioGroup`.
* @return {?}
*/
function () {
return this._selected;
},
/**
* Sets the passed in `ButtonRadio` item as the selected input within the `ButtonRadioGroup`.
*/
set: /**
* Sets the passed in `ButtonRadio` item as the selected input within the `ButtonRadioGroup`.
* @param {?} selected
* @return {?}
*/
function (selected) {
this._selected = selected;
this.value = selected ? selected.value : null;
this.checkSelectedButtonRadio();
},
enumerable: true,
configurable: true
});
Object.defineProperty(ButtonRadioGroup.prototype, "value", {
/**
* Returns the value/state of the selected `ButtonRadio` within the `ButtonRadioGroup`.
*/
get: /**
* Returns the value/state of the selected `ButtonRadio` within the `ButtonRadioGroup`.
* @return {?}
*/
function () {
return this._value;
},
/**
* Sets the value/state of the selected `ButtonRadio` within the `ButtonRadioGroup` to the passed in value.
*/
set: /**
* Sets the value/state of the selected `ButtonRadio` within the `ButtonRadioGroup` to the passed in value.
* @param {?} newValue
* @return {?}
*/
function (newValue) {
if (this._value !== newValue) {
this._value = newValue;
this.updateSelectedButtonRadioFromValue();
this.checkSelectedButtonRadio();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(ButtonRadioGroup.prototype, "name", {
/**
* Returns the associated name of the `ButtonRadioGroup`.
*/
get: /**
* Returns the associated name of the `ButtonRadioGroup`.
* @return {?}
*/
function () {
return this._name;
},
/**
* Replaces the name associated with the `ButtonRadioGroup` with the provided parameter.
*/
set: /**
* Replaces the name associated with the `ButtonRadioGroup` with the provided parameter.
* @param {?} name
* @return {?}
*/
function (name) {
this._name = name;
this.updateButtonRadios();
},
enumerable: true,
configurable: true
});
Object.defineProperty(ButtonRadioGroup.prototype, "skeleton", {
/**
* Returns the skeleton value in the `ButtonRadioGroup` if there is one.
*/
get: /**
* Returns the skeleton value in the `ButtonRadioGroup` if there is one.
* @return {?}
*/
function () {
return this._skeleton;
},
/**
* Sets the skeleton value for all `ButtonRadio` to the skeleton value of `ButtonRadioGroup`.
*/
set: /**
* Sets the skeleton value for all `ButtonRadio` to the skeleton value of `ButtonRadioGroup`.
* @param {?} value
* @return {?}
*/
function (value) {
this._skeleton = value;
this.updateChildren();
},
enumerable: true,
configurable: true
});
/**
* Updates the selected `ButtonRadio` to be checked (selected).
*/
/**
* Updates the selected `ButtonRadio` to be checked (selected).
* @return {?}
*/
ButtonRadioGroup.prototype.checkSelectedButtonRadio = /**
* Updates the selected `ButtonRadio` to be checked (selected).
* @return {?}
*/
function () {
if (this.selected && !this._selected.checked) {
this.selected.checked = true;
}
};
/**
* Use the value of the `ButtonRadioGroup` to update the selected buttonRadio to the right state (selected state).
*/
/**
* Use the value of the `ButtonRadioGroup` to update the selected buttonRadio to the right state (selected state).
* @return {?}
*/
ButtonRadioGroup.prototype.updateSelectedButtonRadioFromValue = /**
* Use the value of the `ButtonRadioGroup` to update the selected buttonRadio to the right state (selected state).
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var alreadySelected = this._selected != null && this._selected.value === this._value;
if (this.buttonRadios && !alreadySelected) {
this._selected = null;
this.buttonRadios.forEach((/**
* @param {?} buttonRadio
* @return {?}
*/
function (buttonRadio) {
if (buttonRadio.checked) {
_this._selected = buttonRadio;
}
}));
}
};
/**
* Creates a class of `ButtonRadioChange` to emit the change in the `ButtonRadioGroup`.
*/
/**
* Creates a class of `ButtonRadioChange` to emit the change in the `ButtonRadioGroup`.
* @param {?} event
* @return {?}
*/
ButtonRadioGroup.prototype.emitChangeEvent = /**
* Creates a class of `ButtonRadioChange` to emit the change in the `ButtonRadioGroup`.
* @param {?} event
* @return {?}
*/
function (event) {
this.change.emit(event);
this.propagateChange(event.value);
this.onTouched();
};
/**
* Synchronizes buttonRadio properties.
*/
/**
* Synchronizes buttonRadio properties.
* @return {?}
*/
ButtonRadioGroup.prototype.updateButtonRadios = /**
* Synchronizes buttonRadio properties.
* @return {?}
*/
function () {
var _this = this;
if (this.buttonRadios) {
setTimeout((/**
* @return {?}
*/
function () {
_this.buttonRadios.forEach((/**
* @param {?} buttonRadio
* @return {?}
*/
function (buttonRadio) { return buttonRadio.name = _this.name; }));
}));
}
};
/**
* Updates the value of the `ButtonRadioGroup` using the provided parameter.
*/
/**
* Updates the value of the `ButtonRadioGroup` using the provided parameter.
* @param {?} value
* @return {?}
*/
ButtonRadioGroup.prototype.writeValue = /**
* Updates the value of the `ButtonRadioGroup` using the provided parameter.
* @param {?} value
* @return {?}
*/
function (value) {
this.value = value;
};
/**
* @return {?}
*/
ButtonRadioGroup.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
var _this = this;
this.buttonRadios.changes.subscribe((/**
* @return {?}
*/
function () {
_this.updateButtonRadios();
_this.updateButtonRadioChangeHandler();
}));
this.updateChildren();
this.updateButtonRadioChangeHandler();
};
/**
* @return {?}
*/
ButtonRadioGroup.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
this.updateButtonRadios();
};
/**
* Used to set method to propagate changes back to the form.
*/
/**
* Used to set method to propagate changes back to the form.
* @param {?} fn
* @return {?}
*/
ButtonRadioGroup.prototype.registerOnChange = /**
* Used to set method to propagate changes back to the form.
* @param {?} fn
* @return {?}
*/
function (fn) {
this.propagateChange = fn;
};
/**
* Registers a callback to be triggered when the control has been touched.
* @param fn Callback to be triggered when the checkbox is touched.
*/
/**
* Registers a callback to be triggered when the control has been touched.
* @param {?} fn Callback to be triggered when the checkbox is touched.
* @return {?}
*/
ButtonRadioGroup.prototype.registerOnTouched = /**
* Registers a callback to be triggered when the control has been touched.
* @param {?} fn Callback to be triggered when the checkbox is touched.
* @return {?}
*/
function (fn) {
this.onTouched = fn;
};
/**
* @protected
* @return {?}
*/
ButtonRadioGroup.prototype.updateChildren = /**
* @protected
* @return {?}
*/
function () {
var _this = this;
if (this.buttonRadios) {
this.buttonRadios.forEach((/**
* @param {?} child
* @return {?}
*/
function (child) { return child.skeleton = _this.skeleton; }));
}
};
/**
* @protected
* @return {?}
*/
ButtonRadioGroup.prototype.updateButtonRadioChangeHandler = /**
* @protected
* @return {?}
*/
function () {
var _this = this;
this.buttonRadios.forEach((/**
* @param {?} buttonRadio
* @return {?}
*/
function (buttonRadio) {
buttonRadio.registerButtonRadioChangeHandler((/**
* @param {?} event
* @return {?}
*/
function (event) {
// update selected and value from the event
_this._selected = event.source;
_this._value = event.value;
// bubble the event
_this.emitChangeEvent(event);
}));
}));
};
ButtonRadioGroup.buttonRadioGroupCount = 0;
ButtonRadioGroup.decorators = [
{ type: core.Component, args: [{
selector: 'suka-button-radio-group',
template: "\n <div\n class=\"button-radio-group\"\n role=\"buttonRadiogroup\">\n <ng-content></ng-content>\n </div>\n ",
providers: [
{
provide: forms.NG_VALUE_ACCESSOR,
useExisting: ButtonRadioGroup,
multi: true
}
]
}] }
];
ButtonRadioGroup.propDecorators = {
change: [{ type: core.Output }],
buttonRadios: [{ type: core.ContentChildren, args: [core.forwardRef((/**
* @return {?}
*/
function () { return ButtonRadio; })),] }],
selected: [{ type: core.Input }],
value: [{ type: core.Input }],
name: [{ type: core.Input }],
disabled: [{ type: core.Input }],
skeleton: [{ type: core.Input }],
buttonRadioButtonGroupClass: [{ type: core.HostBinding, args: ['class.form-item',] }]
};
return ButtonRadioGroup;
}());
if (false) {
/** @type {?} */
ButtonRadioGroup.buttonRadioGroupCount;
/**
* Emits event notifying other classes of a change using a `ButtonRadioChange` class.
* @type {?}
*/
ButtonRadioGroup.prototype.change;
/**
* The `ButtonRadio` input items in the `ButtonRadioGroup`.
* @type {?}
*/
ButtonRadioGroup.prototype.buttonRadios;
/**
* Set to true to disable the whole buttonRadio group
* @type {?}
*/
ButtonRadioGroup.prototype.disabled;
/**
* Binds 'form-item' value to the class for `ButtonRadioGroup`.
* @type {?}
*/
ButtonRadioGroup.prototype.buttonRadioButtonGroupClass;
/**
* To track whether the `ButtonRadioGroup` has been initialized.
* @type {?}
* @protected
*/
ButtonRadioGroup.prototype.isInitialized;
/**
* Reflects whether or not the input is disabled and cannot be selected.
* @type {?}
* @protected
*/
ButtonRadioGroup.prototype._disabled;
/**
* Reflects whether or not the dropdown is loading.
* @type {?}
* @protected
*/
ButtonRadioGroup.prototype._skeleton;
/**
* The value of the selected option within the `ButtonRadioGroup`.
* @type {?}
* @protected
*/
ButtonRadioGroup.prototype._value;
/**
* The `ButtonRadio` within the `ButtonRadioGroup` that is selected.
* @type {?}
* @protected
*/
ButtonRadioGroup.prototype._selected;
/**
* The name attribute associated with the `ButtonRadioGroup`.
* @type {?}
* @protected
*/
ButtonRadioGroup.prototype._name;
/**
* Needed to properly implement ControlValueAccessor.
* @type {?}
*/
ButtonRadioGroup.prototype.onTouched;
/**
* Method set in registerOnChange to propagate changes back to the form.
* @type {?}
*/
ButtonRadioGroup.prototype.propagateChange;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ButtonRadioModule = /** @class */ (function () {
function ButtonRadioModule() {
}
ButtonRadioModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
ButtonRadio,
ButtonRadioGroup
],
exports: [
ButtonRadio,
ButtonRadioGroup
],
imports: [
common.CommonModule,
forms.FormsModule
]
},] }
];
return ButtonRadioModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var Container = /** @class */ (function () {
function Container() {
/**
* Sets the container type. Set to `fluid` for a full width container.
*/
this.sukaContainer = 'default';
this.default = true;
this.fluid = false;
}
/**
* @return {?}
*/
Container.prototype.ngOnInit = /**
* @return {?}
*/
function () {
if (this.sukaContainer === 'fluid') {
this.fluid = true;
this.default = false;
}
};
Container.decorators = [
{ type: core.Directive, args: [{
selector: '[sukaContainer]'
},] }
];
Container.propDecorators = {
sukaContainer: [{ type: core.Input }],
default: [{ type: core.HostBinding, args: ['class.container',] }],
fluid: [{ type: core.HostBinding, args: ['class.container--fluid',] }]
};
return Container;
}());
if (false) {
/**
* Sets the container type. Set to `fluid` for a full width container.
* @type {?}
*/
Container.prototype.sukaContainer;
/** @type {?} */
Container.prototype.default;
/** @type {?} */
Container.prototype.fluid;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ContainerModule = /** @class */ (function () {
function ContainerModule() {
}
ContainerModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
Container,
],
exports: [
Container,
],
imports: [
common.CommonModule,
]
},] }
];
return ContainerModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var MarginDirective = /** @class */ (function () {
function MarginDirective(elementRef) {
this.m = {};
this.elementRef = elementRef;
}
/**
* @return {?}
*/
MarginDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
try {
/** @type {?} */
var marginKeys = Object.keys(this.m);
marginKeys.forEach((/**
* @param {?} key
* @return {?}
*/
function (key) {
if (key === 'all') {
_this.elementRef.nativeElement.classList.add("m-" + _this.m[key]);
}
else {
_this.elementRef.nativeElement.classList.add("m-" + key + "-" + _this.m[key]);
}
}));
}
catch (err) {
console.error("Malformed margins`: " + err);
}
};
MarginDirective.decorators = [
{ type: core.Directive, args: [{
// tslint:disable-next-line: directive-selector
selector: '[m]'
},] }
];
/** @nocollapse */
MarginDirective.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
MarginDirective.propDecorators = {
m: [{ type: core.Input }]
};
return MarginDirective;
}());
if (false) {
/** @type {?} */
MarginDirective.prototype.m;
/**
* @type {?}
* @private
*/
MarginDirective.prototype.elementRef;
}
var MarginTopDirective = /** @class */ (function () {
function MarginTopDirective(elementRef) {
this.mt = {};
this.elementRef = elementRef;
}
/**
* @return {?}
*/
MarginTopDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
try {
/** @type {?} */
var marginKeys = Object.keys(this.mt);
marginKeys.forEach((/**
* @param {?} key
* @return {?}
*/
function (key) {
if (key === 'all') {
_this.elementRef.nativeElement.classList.add("mt-" + _this.mt[key]);
}
else {
_this.elementRef.nativeElement.classList.add("mt-" + key + "-" + _this.mt[key]);
}
}));
}
catch (err) {
console.error("Malformed margins`: " + err);
}
};
MarginTopDirective.decorators = [
{ type: core.Directive, args: [{
selector: '[mt]'
},] }
];
/** @nocollapse */
MarginTopDirective.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
MarginTopDirective.propDecorators = {
mt: [{ type: core.Input }]
};
return MarginTopDirective;
}());
if (false) {
/** @type {?} */
MarginTopDirective.prototype.mt;
/**
* @type {?}
* @private
*/
MarginTopDirective.prototype.elementRef;
}
var MarginBottomDirective = /** @class */ (function () {
function MarginBottomDirective(elementRef) {
this.mb = {};
this.elementRef = elementRef;
}
/**
* @return {?}
*/
MarginBottomDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
try {
/** @type {?} */
var marginKeys = Object.keys(this.mb);
marginKeys.forEach((/**
* @param {?} key
* @return {?}
*/
function (key) {
if (key === 'all') {
_this.elementRef.nativeElement.classList.add("mb-" + _this.mb[key]);
}
else {
_this.elementRef.nativeElement.classList.add("mb-" + key + "-" + _this.mb[key]);
}
}));
}
catch (err) {
console.error("Malformed margins`: " + err);
}
};
MarginBottomDirective.decorators = [
{ type: core.Directive, args: [{
// tslint:disable-next-line: directive-selector
selector: '[mb]'
},] }
];
/** @nocollapse */
MarginBottomDirective.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
MarginBottomDirective.propDecorators = {
mb: [{ type: core.Input }]
};
return MarginBottomDirective;
}());
if (false) {
/** @type {?} */
MarginBottomDirective.prototype.mb;
/**
* @type {?}
* @private
*/
MarginBottomDirective.prototype.elementRef;
}
var MarginLeftDirective = /** @class */ (function () {
function MarginLeftDirective(elementRef) {
this.ml = {};
this.elementRef = elementRef;
}
/**
* @return {?}
*/
MarginLeftDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
try {
/** @type {?} */
var marginKeys = Object.keys(this.ml);
marginKeys.forEach((/**
* @param {?} key
* @return {?}
*/
function (key) {
if (key === 'all') {
_this.elementRef.nativeElement.classList.add("ml-" + _this.ml[key]);
}
else {
_this.elementRef.nativeElement.classList.add("ml-" + key + "-" + _this.ml[key]);
}
}));
}
catch (err) {
console.error("Malformed margins`: " + err);
}
};
MarginLeftDirective.decorators = [
{ type: core.Directive, args: [{
// tslint:disable-next-line: directive-selector
selector: '[ml]'
},] }
];
/** @nocollapse */
MarginLeftDirective.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
MarginLeftDirective.propDecorators = {
ml: [{ type: core.Input }]
};
return MarginLeftDirective;
}());
if (false) {
/** @type {?} */
MarginLeftDirective.prototype.ml;
/**
* @type {?}
* @private
*/
MarginLeftDirective.prototype.elementRef;
}
var MarginRightDirective = /** @class */ (function () {
function MarginRightDirective(elementRef) {
this.mr = {};
this.elementRef = elementRef;
}
/**
* @return {?}
*/
MarginRightDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
try {
/** @type {?} */
var marginKeys = Object.keys(this.mr);
marginKeys.forEach((/**
* @param {?} key
* @return {?}
*/
function (key) {
if (key === 'all') {
_this.elementRef.nativeElement.classList.add("mr-" + _this.mr[key]);
}
else {
_this.elementRef.nativeElement.classList.add("mr-" + key + "-" + _this.mr[key]);
}
}));
}
catch (err) {
console.error("Malformed margins`: " + err);
}
};
MarginRightDirective.decorators = [
{ type: core.Directive, args: [{
// tslint:disable-next-line: directive-selector
selector: '[mr]'
},] }
];
/** @nocollapse */
MarginRightDirective.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
MarginRightDirective.propDecorators = {
mr: [{ type: core.Input }]
};
return MarginRightDirective;
}());
if (false) {
/** @type {?} */
MarginRightDirective.prototype.mr;
/**
* @type {?}
* @private
*/
MarginRightDirective.prototype.elementRef;
}
var MarginHorizontalDirective = /** @class */ (function () {
function MarginHorizontalDirective(elementRef) {
this.mx = {};
this.elementRef = elementRef;
}
/**
* @return {?}
*/
MarginHorizontalDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
try {
/** @type {?} */
var marginKeys = Object.keys(this.mx);
marginKeys.forEach((/**
* @param {?} key
* @return {?}
*/
function (key) {
if (key === 'all') {
_this.elementRef.nativeElement.classList.add("mx-" + _this.mx[key]);
}
else {
_this.elementRef.nativeElement.classList.add("mx-" + key + "-" + _this.mx[key]);
}
}));
}
catch (err) {
console.error("Malformed margins`: " + err);
}
};
MarginHorizontalDirective.decorators = [
{ type: core.Directive, args: [{
// tslint:disable-next-line: directive-selector
selector: '[mx]'
},] }
];
/** @nocollapse */
MarginHorizontalDirective.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
MarginHorizontalDirective.propDecorators = {
mx: [{ type: core.Input }]
};
return MarginHorizontalDirective;
}());
if (false) {
/** @type {?} */
MarginHorizontalDirective.prototype.mx;
/**
* @type {?}
* @private
*/
MarginHorizontalDirective.prototype.elementRef;
}
var MarginVerticalDirective = /** @class */ (function () {
function MarginVerticalDirective(elementRef) {
this.my = {};
this.elementRef = elementRef;
}
/**
* @return {?}
*/
MarginVerticalDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
try {
/** @type {?} */
var marginKeys = Object.keys(this.my);
marginKeys.forEach((/**
* @param {?} key
* @return {?}
*/
function (key) {
if (key === 'all') {
_this.elementRef.nativeElement.classList.add("my-" + _this.my[key]);
}
else {
_this.elementRef.nativeElement.classList.add("my-" + key + "-" + _this.my[key]);
}
}));
}
catch (err) {
console.error("Malformed margins`: " + err);
}
};
MarginVerticalDirective.decorators = [
{ type: core.Directive, args: [{
// tslint:disable-next-line: directive-selector
selector: '[my]'
},] }
];
/** @nocollapse */
MarginVerticalDirective.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
MarginVerticalDirective.propDecorators = {
my: [{ type: core.Input }]
};
return MarginVerticalDirective;
}());
if (false) {
/** @type {?} */
MarginVerticalDirective.prototype.my;
/**
* @type {?}
* @private
*/
MarginVerticalDirective.prototype.elementRef;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var PaddingDirective = /** @class */ (function () {
function PaddingDirective(elementRef) {
this.p = {};
this.elementRef = elementRef;
}
/**
* @return {?}
*/
PaddingDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
try {
/** @type {?} */
var paddingKeys = Object.keys(this.p);
paddingKeys.forEach((/**
* @param {?} key
* @return {?}
*/
function (key) {
if (key === 'all') {
_this.elementRef.nativeElement.classList.add("p-" + _this.p[key]);
}
else {
_this.elementRef.nativeElement.classList.add("p-" + key + "-" + _this.p[key]);
}
}));
}
catch (err) {
console.error("Malformed paddings`: " + err);
}
};
PaddingDirective.decorators = [
{ type: core.Directive, args: [{
// tslint:disable-next-line: directive-selector
selector: '[p]'
},] }
];
/** @nocollapse */
PaddingDirective.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
PaddingDirective.propDecorators = {
p: [{ type: core.Input }]
};
return PaddingDirective;
}());
if (false) {
/** @type {?} */
PaddingDirective.prototype.p;
/**
* @type {?}
* @private
*/
PaddingDirective.prototype.elementRef;
}
var PaddingTopDirective = /** @class */ (function () {
function PaddingTopDirective(elementRef) {
this.pt = {};
this.elementRef = elementRef;
}
/**
* @return {?}
*/
PaddingTopDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
try {
/** @type {?} */
var paddingKeys = Object.keys(this.pt);
paddingKeys.forEach((/**
* @param {?} key
* @return {?}
*/
function (key) {
if (key === 'all') {
_this.elementRef.nativeElement.classList.add("pt-" + _this.pt[key]);
}
else {
_this.elementRef.nativeElement.classList.add("pt-" + key + "-" + _this.pt[key]);
}
}));
}
catch (err) {
console.error("Malformed paddings`: " + err);
}
};
PaddingTopDirective.decorators = [
{ type: core.Directive, args: [{
// tslint:disable-next-line: directive-selector
selector: '[pt]'
},] }
];
/** @nocollapse */
PaddingTopDirective.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
PaddingTopDirective.propDecorators = {
pt: [{ type: core.Input }]
};
return PaddingTopDirective;
}());
if (false) {
/** @type {?} */
PaddingTopDirective.prototype.pt;
/**
* @type {?}
* @private
*/
PaddingTopDirective.prototype.elementRef;
}
var PaddingBottomDirective = /** @class */ (function () {
function PaddingBottomDirective(elementRef) {
this.pb = {};
this.elementRef = elementRef;
}
/**
* @return {?}
*/
PaddingBottomDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
try {
/** @type {?} */
var paddingKeys = Object.keys(this.pb);
paddingKeys.forEach((/**
* @param {?} key
* @return {?}
*/
function (key) {
if (key === 'all') {
_this.elementRef.nativeElement.classList.add("pb-" + _this.pb[key]);
}
else {
_this.elementRef.nativeElement.classList.add("pb-" + key + "-" + _this.pb[key]);
}
}));
}
catch (err) {
console.error("Malformed paddings`: " + err);
}
};
PaddingBottomDirective.decorators = [
{ type: core.Directive, args: [{
// tslint:disable-next-line: directive-selector
selector: '[pb]'
},] }
];
/** @nocollapse */
PaddingBottomDirective.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
PaddingBottomDirective.propDecorators = {
pb: [{ type: core.Input }]
};
return PaddingBottomDirective;
}());
if (false) {
/** @type {?} */
PaddingBottomDirective.prototype.pb;
/**
* @type {?}
* @private
*/
PaddingBottomDirective.prototype.elementRef;
}
var PaddingLeftDirective = /** @class */ (function () {
function PaddingLeftDirective(elementRef) {
this.pl = {};
this.elementRef = elementRef;
}
/**
* @return {?}
*/
PaddingLeftDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
try {
/** @type {?} */
var paddingKeys = Object.keys(this.pl);
paddingKeys.forEach((/**
* @param {?} key
* @return {?}
*/
function (key) {
if (key === 'all') {
_this.elementRef.nativeElement.classList.add("pl-" + _this.pl[key]);
}
else {
_this.elementRef.nativeElement.classList.add("pl-" + key + "-" + _this.pl[key]);
}
}));
}
catch (err) {
console.error("Malformed paddings`: " + err);
}
};
PaddingLeftDirective.decorators = [
{ type: core.Directive, args: [{
// tslint:disable-next-line: directive-selector
selector: '[pl]'
},] }
];
/** @nocollapse */
PaddingLeftDirective.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
PaddingLeftDirective.propDecorators = {
pl: [{ type: core.Input }]
};
return PaddingLeftDirective;
}());
if (false) {
/** @type {?} */
PaddingLeftDirective.prototype.pl;
/**
* @type {?}
* @private
*/
PaddingLeftDirective.prototype.elementRef;
}
var PaddingRightDirective = /** @class */ (function () {
function PaddingRightDirective(elementRef) {
this.pr = {};
this.elementRef = elementRef;
}
/**
* @return {?}
*/
PaddingRightDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
try {
/** @type {?} */
var paddingKeys = Object.keys(this.pr);
paddingKeys.forEach((/**
* @param {?} key
* @return {?}
*/
function (key) {
if (key === 'all') {
_this.elementRef.nativeElement.classList.add("pr-" + _this.pr[key]);
}
else {
_this.elementRef.nativeElement.classList.add("pr-" + key + "-" + _this.pr[key]);
}
}));
}
catch (err) {
console.error("Malformed paddings`: " + err);
}
};
PaddingRightDirective.decorators = [
{ type: core.Directive, args: [{
// tslint:disable-next-line: directive-selector
selector: '[pr]'
},] }
];
/** @nocollapse */
PaddingRightDirective.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
PaddingRightDirective.propDecorators = {
pr: [{ type: core.Input }]
};
return PaddingRightDirective;
}());
if (false) {
/** @type {?} */
PaddingRightDirective.prototype.pr;
/**
* @type {?}
* @private
*/
PaddingRightDirective.prototype.elementRef;
}
var PaddingHorizontalDirective = /** @class */ (function () {
function PaddingHorizontalDirective(elementRef) {
this.px = {};
this.elementRef = elementRef;
}
/**
* @return {?}
*/
PaddingHorizontalDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
try {
/** @type {?} */
var paddingKeys = Object.keys(this.px);
paddingKeys.forEach((/**
* @param {?} key
* @return {?}
*/
function (key) {
if (key === 'all') {
_this.elementRef.nativeElement.classList.add("px-" + _this.px[key]);
}
else {
_this.elementRef.nativeElement.classList.add("px-" + key + "-" + _this.px[key]);
}
}));
}
catch (err) {
console.error("Malformed paddings`: " + err);
}
};
PaddingHorizontalDirective.decorators = [
{ type: core.Directive, args: [{
// tslint:disable-next-line: directive-selector
selector: '[px]'
},] }
];
/** @nocollapse */
PaddingHorizontalDirective.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
PaddingHorizontalDirective.propDecorators = {
px: [{ type: core.Input }]
};
return PaddingHorizontalDirective;
}());
if (false) {
/** @type {?} */
PaddingHorizontalDirective.prototype.px;
/**
* @type {?}
* @private
*/
PaddingHorizontalDirective.prototype.elementRef;
}
var PaddingVerticalDirective = /** @class */ (function () {
function PaddingVerticalDirective(elementRef) {
this.py = {};
this.elementRef = elementRef;
}
/**
* @return {?}
*/
PaddingVerticalDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
try {
/** @type {?} */
var paddingKeys = Object.keys(this.py);
paddingKeys.forEach((/**
* @param {?} key
* @return {?}
*/
function (key) {
if (key === 'all') {
_this.elementRef.nativeElement.classList.add("py-" + _this.py[key]);
}
else {
_this.elementRef.nativeElement.classList.add("py-" + key + "-" + _this.py[key]);
}
}));
}
catch (err) {
console.error("Malformed paddings`: " + err);
}
};
PaddingVerticalDirective.decorators = [
{ type: core.Directive, args: [{
// tslint:disable-next-line: directive-selector
selector: '[py]'
},] }
];
/** @nocollapse */
PaddingVerticalDirective.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
PaddingVerticalDirective.propDecorators = {
py: [{ type: core.Input }]
};
return PaddingVerticalDirective;
}());
if (false) {
/** @type {?} */
PaddingVerticalDirective.prototype.py;
/**
* @type {?}
* @private
*/
PaddingVerticalDirective.prototype.elementRef;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var SpacingModule = /** @class */ (function () {
function SpacingModule() {
}
SpacingModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
MarginDirective,
MarginTopDirective,
MarginBottomDirective,
MarginLeftDirective,
MarginRightDirective,
MarginHorizontalDirective,
MarginVerticalDirective,
PaddingDirective,
PaddingTopDirective,
PaddingBottomDirective,
PaddingLeftDirective,
PaddingRightDirective,
PaddingHorizontalDirective,
PaddingVerticalDirective,
],
exports: [
MarginDirective,
MarginTopDirective,
MarginBottomDirective,
MarginLeftDirective,
MarginRightDirective,
MarginHorizontalDirective,
MarginVerticalDirective,
PaddingDirective,
PaddingTopDirective,
PaddingBottomDirective,
PaddingLeftDirective,
PaddingRightDirective,
PaddingHorizontalDirective,
PaddingVerticalDirective,
],
imports: [common.CommonModule]
},] }
];
return SpacingModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var Card = /** @class */ (function () {
function Card() {
/**
* Callback for the primary action
*/
this.primaryFooterAction = new core.EventEmitter();
/**
* Callback for the secondary action
*/
this.secondaryFooterAction = new core.EventEmitter();
/**
* Callback for the card header action
*/
this.headerAction = new core.EventEmitter();
this.cardClass = true;
/**
* Set to `true` to display a loading card.
*/
this.skeleton = false;
/**
* Display footer state.
*/
this.showFooter = false;
}
/**
* @return {?}
*/
Card.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.showFooter = this.primaryFooterAction.observers.length > 0;
};
/**
* Emits the cards primary footer action callback
*/
/**
* Emits the cards primary footer action callback
* @param {?} $event
* @return {?}
*/
Card.prototype.onPrimaryFooterAction = /**
* Emits the cards primary footer action callback
* @param {?} $event
* @return {?}
*/
function ($event) {
this.primaryFooterAction.emit($event);
};
/**
* Emits the cards secondary footer action callback
*/
/**
* Emits the cards secondary footer action callback
* @param {?} $event
* @return {?}
*/
Card.prototype.onSecondaryFooterAction = /**
* Emits the cards secondary footer action callback
* @param {?} $event
* @return {?}
*/
function ($event) {
this.secondaryFooterAction.emit($event);
};
/**
* Emits the cards header action callback
*/
/**
* Emits the cards header action callback
* @param {?} $event
* @return {?}
*/
Card.prototype.onHeaderAction = /**
* Emits the cards header action callback
* @param {?} $event
* @return {?}
*/
function ($event) {
this.headerAction.emit($event);
};
Card.decorators = [
{ type: core.Component, args: [{
selector: 'suka-card',
template: "\n <suka-card-header\n *ngIf=\"title\"\n (action)=\"onHeaderAction($event)\"\n [actionLabel]=\"headerActionLabel\"\n [skeleton]=\"skeleton\"\n >\n {{title}}\n </suka-card-header>\n\n <suka-card-section\n *ngIf='(sectioned !== false) else elseTpl'\n >\n <ng-container *ngTemplateOutlet=\"elseTpl\"></ng-container>\n </suka-card-section>\n\n <suka-card-footer\n *ngIf='!skeleton && showFooter'\n (primaryAction)=\"onPrimaryFooterAction($event)\"\n [primaryLabel]=\"primaryFooterActionLabel\"\n (secondaryAction)=\"onSecondaryFooterAction($event)\"\n [secondaryLabel]=\"secondaryFooterActionLabel\"\n >\n </suka-card-footer>\n\n <ng-template #elseTpl><ng-content></ng-content></ng-template>\n ",
encapsulation: core.ViewEncapsulation.None
}] }
];
Card.propDecorators = {
title: [{ type: core.Input }],
sectioned: [{ type: core.Input }],
primaryFooterActionLabel: [{ type: core.Input }],
primaryFooterAction: [{ type: core.Output }],
secondaryFooterActionLabel: [{ type: core.Input }],
secondaryFooterAction: [{ type: core.Output }],
headerActionLabel: [{ type: core.Input }],
headerAction: [{ type: core.Output }],
cardClass: [{ type: core.HostBinding, args: ['class.card',] }],
skeleton: [{ type: core.Input }]
};
return Card;
}());
if (false) {
/**
* Title content for the card.
* @type {?}
*/
Card.prototype.title;
/**
* Set to `true` to auto-wrap content in section
* @type {?}
*/
Card.prototype.sectioned;
/**
* Primary action label.
* @type {?}
*/
Card.prototype.primaryFooterActionLabel;
/**
* Callback for the primary action
* @type {?}
*/
Card.prototype.primaryFooterAction;
/**
* Secondary action label.
* @type {?}
*/
Card.prototype.secondaryFooterActionLabel;
/**
* Callback for the secondary action
* @type {?}
*/
Card.prototype.secondaryFooterAction;
/**
* Card header action label
* @type {?}
*/
Card.prototype.headerActionLabel;
/**
* Callback for the card header action
* @type {?}
*/
Card.prototype.headerAction;
/** @type {?} */
Card.prototype.cardClass;
/**
* Set to `true` to display a loading card.
* @type {?}
*/
Card.prototype.skeleton;
/**
* Display footer state.
* @type {?}
*/
Card.prototype.showFooter;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var CardHeader = /** @class */ (function () {
function CardHeader() {
this.showAction = false;
this.cardHeaderClass = true;
this.skeleton = false;
this.action = new core.EventEmitter();
}
/**
* @return {?}
*/
CardHeader.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.showAction = this.action.observers.length > 0;
};
/**
* @param {?} $event
* @return {?}
*/
CardHeader.prototype.onClick = /**
* @param {?} $event
* @return {?}
*/
function ($event) {
this.action.emit($event);
};
CardHeader.decorators = [
{ type: core.Component, args: [{
selector: 'suka-card-header',
template: "\n <h5 *ngIf=\"skeleton\" class=\"skeleton__text skeleton__heading\"></h5>\n <h5 *ngIf=\"!skeleton\"><ng-content></ng-content></h5>\n <button\n *ngIf=\"!skeleton && showAction\"\n sukaButton=\"plain\"\n (click)=\"onClick($event)\"\n >\n {{actionLabel}}\n </button>\n ",
encapsulation: core.ViewEncapsulation.None
}] }
];
CardHeader.propDecorators = {
cardHeaderClass: [{ type: core.HostBinding, args: ['class.card-header',] }],
skeleton: [{ type: core.Input }],
actionLabel: [{ type: core.Input }],
action: [{ type: core.Output }]
};
return CardHeader;
}());
if (false) {
/** @type {?} */
CardHeader.prototype.showAction;
/** @type {?} */
CardHeader.prototype.cardHeaderClass;
/** @type {?} */
CardHeader.prototype.skeleton;
/** @type {?} */
CardHeader.prototype.actionLabel;
/** @type {?} */
CardHeader.prototype.action;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var CardSection = /** @class */ (function () {
function CardSection() {
this.cardSectionClass = true;
}
CardSection.decorators = [
{ type: core.Component, args: [{
selector: 'suka-card-section',
template: "\n <ng-content></ng-content>\n ",
encapsulation: core.ViewEncapsulation.None
}] }
];
CardSection.propDecorators = {
cardSectionClass: [{ type: core.HostBinding, args: ['class.card-section',] }]
};
return CardSection;
}());
if (false) {
/** @type {?} */
CardSection.prototype.cardSectionClass;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var CardFooter = /** @class */ (function () {
function CardFooter() {
this.showSecondaryButton = false;
this.baseClass = true;
this.primaryAction = new core.EventEmitter();
this.secondaryAction = new core.EventEmitter();
}
/**
* @return {?}
*/
CardFooter.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.showSecondaryButton = this.secondaryAction.observers.length > 0;
};
/**
* @param {?} buttonType
* @return {?}
*/
CardFooter.prototype.onButtonClick = /**
* @param {?} buttonType
* @return {?}
*/
function (buttonType) {
if (buttonType === 'primary') {
this.primaryAction.emit();
}
if (buttonType === 'secondary') {
this.secondaryAction.emit();
}
};
CardFooter.decorators = [
{ type: core.Component, args: [{
selector: 'suka-card-footer',
template: "\n <suka-button-group>\n <button\n *ngIf=\"showSecondaryButton\"\n sukaButton=\"plain\"\n (click)=\"onButtonClick('secondary')\"\n >\n {{secondaryLabel}}\n </button>\n <button\n sukaButton=\"primary\"\n (click)=\"onButtonClick('primary')\"\n >\n {{primaryLabel}}\n </button>\n </suka-button-group>\n ",
encapsulation: core.ViewEncapsulation.None
}] }
];
CardFooter.propDecorators = {
baseClass: [{ type: core.HostBinding, args: ['class.card-footer',] }],
primaryLabel: [{ type: core.Input }],
secondaryLabel: [{ type: core.Input }],
primaryAction: [{ type: core.Output }],
secondaryAction: [{ type: core.Output }]
};
return CardFooter;
}());
if (false) {
/** @type {?} */
CardFooter.prototype.showSecondaryButton;
/** @type {?} */
CardFooter.prototype.baseClass;
/** @type {?} */
CardFooter.prototype.primaryLabel;
/** @type {?} */
CardFooter.prototype.secondaryLabel;
/** @type {?} */
CardFooter.prototype.primaryAction;
/** @type {?} */
CardFooter.prototype.secondaryAction;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var CardModule = /** @class */ (function () {
function CardModule() {
}
CardModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
Card,
CardHeader,
CardSection,
CardFooter,
],
exports: [
Card,
CardHeader,
CardSection,
CardFooter,
],
imports: [
common.CommonModule,
ButtonModule,
]
},] }
];
return CardModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var Accordion = /** @class */ (function () {
function Accordion() {
this._skeleton = false;
this.openCloseItems = new rxjs.Subject();
this.skeletons = new rxjs.Subject();
/**
* Set to `true` to allow multiple accordion items to be expanded.
*/
this.multi = false;
this.role = 'list';
this.baseClass = true;
}
Object.defineProperty(Accordion.prototype, "skeleton", {
get: /**
* @return {?}
*/
function () {
return this._skeleton;
},
/**
* Set to `true` to display a loading accordion.
*/
set: /**
* Set to `true` to display a loading accordion.
* @param {?} value
* @return {?}
*/
function (value) {
this._skeleton = value;
this.updateSkeletons();
},
enumerable: true,
configurable: true
});
/**
* @protected
* @return {?}
*/
Accordion.prototype.updateSkeletons = /**
* @protected
* @return {?}
*/
function () {
this.skeletons.next(this._skeleton);
};
Accordion.decorators = [
{ type: core.Component, args: [{
selector: 'suka-accordion',
template: "\n <ng-content select=\"suka-accordion-item\"></ng-content>\n "
}] }
];
Accordion.propDecorators = {
multi: [{ type: core.Input }],
role: [{ type: core.HostBinding, args: ['attr.role',] }],
baseClass: [{ type: core.HostBinding, args: ['class.accordion',] }],
skeleton: [{ type: core.Input }]
};
return Accordion;
}());
if (false) {
/**
* @type {?}
* @protected
*/
Accordion.prototype._skeleton;
/** @type {?} */
Accordion.prototype.openCloseItems;
/** @type {?} */
Accordion.prototype.skeletons;
/**
* Set to `true` to allow multiple accordion items to be expanded.
* @type {?}
*/
Accordion.prototype.multi;
/** @type {?} */
Accordion.prototype.role;
/** @type {?} */
Accordion.prototype.baseClass;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var AccordionItem = /** @class */ (function () {
function AccordionItem(accordion) {
this.accordion = accordion;
/**
* Sets the accordion title. Can be a `string` or a `TemplateRef`. Defaults to Title plus the current accordion item count.
*/
this.title = "Title " + AccordionItem.accordionItemCount;
/**
* Used to set a custom id to the element. Defaults to a counter
*/
this.id = "accordion-item-" + AccordionItem.accordionItemCount;
/**
* Skeleton state. Set to `true` to display a skeleton accordion.
*/
this.skeleton = false;
/**
* Emits an event when the accordion item is opened.
*/
this.opened = new core.EventEmitter();
/**
* Emits an event when the accordion item is closed.
*/
this.closed = new core.EventEmitter();
this.itemClass = true;
/**
* Sets if the item is expanded.
*/
this.expanded = false;
this.itemType = 'list-item';
this.role = 'heading';
this.ariaLevel = 3;
this.alive = true;
AccordionItem.accordionItemCount++;
}
/**
* Toggles the accordion opened state.
*/
/**
* Toggles the accordion opened state.
* @return {?}
*/
AccordionItem.prototype.toggle = /**
* Toggles the accordion opened state.
* @return {?}
*/
function () {
if (!this.skeleton) {
if (!this.expanded) {
if (!this.accordion.multi) {
this.accordion.openCloseItems.next(true);
}
this.open();
}
else {
this.close();
}
}
};
/**
* @protected
* @return {?}
*/
AccordionItem.prototype.open = /**
* @protected
* @return {?}
*/
function () {
if (!this.expanded) {
this.opened.emit({ id: this.id });
}
this.expanded = true;
};
/**
* @protected
* @return {?}
*/
AccordionItem.prototype.close = /**
* @protected
* @return {?}
*/
function () {
if (this.expanded) {
this.closed.emit({ id: this.id });
}
this.expanded = false;
};
/**
* @return {?}
*/
AccordionItem.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
this.openSubscription = this.accordion.openCloseItems
.pipe(operators.takeWhile((/**
* @return {?}
*/
function () { return _this.alive; })))
.subscribe((/**
* @param {?} collapsed
* @return {?}
*/
function (collapsed) {
if (!_this.skeleton) {
collapsed ? _this.close() : _this.open();
}
}));
this.skeletonSubscription = this.accordion.skeletons
.pipe(operators.takeWhile((/**
* @return {?}
*/
function () { return _this.alive; })))
.subscribe((/**
* @param {?} skeletonValue
* @return {?}
*/
function (skeletonValue) { return _this.skeleton = skeletonValue; }));
this.skeleton = this.accordion.skeleton;
};
/**
* @return {?}
*/
AccordionItem.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.alive = false;
this.openSubscription.unsubscribe();
this.skeletonSubscription.unsubscribe();
};
/**
* @param {?} value
* @return {?}
*/
AccordionItem.prototype.isTemplate = /**
* @param {?} value
* @return {?}
*/
function (value) {
return value instanceof core.TemplateRef;
};
AccordionItem.accordionItemCount = 0;
AccordionItem.decorators = [
{ type: core.Component, args: [{
selector: 'suka-accordion-item',
template: "\n <button\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-controls]=\"id\"\n (click)=\"toggle()\"\n class=\"accordion__heading\">\n <suka-icon icon=\"chevron-down\" class=\"accordion__arrow\"></suka-icon>\n\n <div *ngIf=\"isTemplate(title) && !skeleton\" class=\"accordion__title-content\">\n <ng-template [ngTemplateOutlet]=\"title\"></ng-template>\n </div>\n\n <p\n *ngIf=\"!isTemplate(title)\"\n class=\"accordion__title\"\n [ngClass]=\"{\n 'skeleton__text': skeleton\n }\">\n {{!skeleton ? title : null}}\n </p>\n </button>\n <div [id]=\"id\" class=\"accordion__content\">\n <ng-content *ngIf=\"!skeleton; else skeletonTemplate\"></ng-content>\n <ng-template #skeletonTemplate>\n <p class=\"skeleton__text\" style=\"width: 90%\"></p>\n <p class=\"skeleton__text\" style=\"width: 80%\"></p>\n <p class=\"skeleton__text\" style=\"width: 95%\"></p>\n </ng-template>\n </div>\n "
}] }
];
/** @nocollapse */
AccordionItem.ctorParameters = function () { return [
{ type: Accordion, decorators: [{ type: core.Host }] }
]; };
AccordionItem.propDecorators = {
title: [{ type: core.Input }],
id: [{ type: core.Input }],
skeleton: [{ type: core.Input }],
opened: [{ type: core.Output }],
closed: [{ type: core.Output }],
itemClass: [{ type: core.HostBinding, args: ['class.accordion__item',] }],
expanded: [{ type: core.HostBinding, args: ['class.accordion__item--active',] }, { type: core.Input }],
itemType: [{ type: core.HostBinding, args: ['style.display',] }],
role: [{ type: core.HostBinding, args: ['attr.role',] }],
ariaLevel: [{ type: core.HostBinding, args: ['attr.aria-level',] }, { type: core.Input }]
};
return AccordionItem;
}());
if (false) {
/** @type {?} */
AccordionItem.accordionItemCount;
/**
* Sets the accordion title. Can be a `string` or a `TemplateRef`. Defaults to Title plus the current accordion item count.
* @type {?}
*/
AccordionItem.prototype.title;
/**
* Used to set a custom id to the element. Defaults to a counter
* @type {?}
*/
AccordionItem.prototype.id;
/**
* Skeleton state. Set to `true` to display a skeleton accordion.
* @type {?}
*/
AccordionItem.prototype.skeleton;
/**
* Emits an event when the accordion item is opened.
* @type {?}
*/
AccordionItem.prototype.opened;
/**
* Emits an event when the accordion item is closed.
* @type {?}
*/
AccordionItem.prototype.closed;
/** @type {?} */
AccordionItem.prototype.itemClass;
/**
* Sets if the item is expanded.
* @type {?}
*/
AccordionItem.prototype.expanded;
/** @type {?} */
AccordionItem.prototype.itemType;
/** @type {?} */
AccordionItem.prototype.role;
/** @type {?} */
AccordionItem.prototype.ariaLevel;
/**
* @type {?}
* @private
*/
AccordionItem.prototype.alive;
/**
* @type {?}
* @private
*/
AccordionItem.prototype.skeletonSubscription;
/**
* @type {?}
* @private
*/
AccordionItem.prototype.openSubscription;
/**
* @type {?}
* @private
*/
AccordionItem.prototype.accordion;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var AccordionModule = /** @class */ (function () {
function AccordionModule() {
}
AccordionModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
Accordion,
AccordionItem
],
exports: [
Accordion,
AccordionItem
],
imports: [
common.CommonModule,
IconModule,
]
},] }
];
return AccordionModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ListItemDirective = /** @class */ (function () {
function ListItemDirective() {
this.wrapper = true;
}
ListItemDirective.decorators = [
{ type: core.Directive, args: [{
selector: '[sukaListItem]'
},] }
];
ListItemDirective.propDecorators = {
wrapper: [{ type: core.HostBinding, args: ['class.list__item',] }]
};
return ListItemDirective;
}());
if (false) {
/** @type {?} */
ListItemDirective.prototype.wrapper;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var List = /** @class */ (function () {
function List(elementRef) {
this.elementRef = elementRef;
}
Object.defineProperty(List.prototype, "ordered", {
get: /**
* @return {?}
*/
function () {
if (this.nested) {
return false;
}
return this.elementRef.nativeElement.tagName === 'OL';
},
enumerable: true,
configurable: true
});
Object.defineProperty(List.prototype, "unordered", {
get: /**
* @return {?}
*/
function () {
if (this.nested) {
return false;
}
return this.elementRef.nativeElement.tagName === 'UL';
},
enumerable: true,
configurable: true
});
Object.defineProperty(List.prototype, "nested", {
get: /**
* @return {?}
*/
function () {
return this.elementRef.nativeElement.parentElement.tagName === 'LI';
},
enumerable: true,
configurable: true
});
List.decorators = [
{ type: core.Directive, args: [{
selector: '[sukaList]'
},] }
];
/** @nocollapse */
List.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
List.propDecorators = {
ordered: [{ type: core.HostBinding, args: ['class.list--ordered',] }],
unordered: [{ type: core.HostBinding, args: ['class.list--unordered',] }],
nested: [{ type: core.HostBinding, args: ['class.list--nested',] }]
};
return List;
}());
if (false) {
/**
* @type {?}
* @protected
*/
List.prototype.elementRef;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ListModule = /** @class */ (function () {
function ListModule() {
}
ListModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
ListItemDirective,
List
],
exports: [
ListItemDirective,
List
],
imports: [common.CommonModule]
},] }
];
return ListModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Used to emit changes performed on number input components.
*/
var /**
* Used to emit changes performed on number input components.
*/
NumberChange = /** @class */ (function () {
function NumberChange() {
}
return NumberChange;
}());
if (false) {
/**
* Contains the `Number` that has been changed.
* @type {?}
*/
NumberChange.prototype.source;
/**
* The value of the `Number` field encompassed in the `NumberChange` class.
* @type {?}
*/
NumberChange.prototype.value;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var Number = /** @class */ (function () {
/**
* Creates an instance of `Number`.
*/
function Number() {
this.containerClass = true;
/**
* Set to `true` for a disabled number input.
*/
this.disabled = false;
/**
* Set to `true` for a loading number component.
*/
this.skeleton = false;
/**
* Set to `true` for an invalid number component.
*/
this.invalid = false;
/**
* Set to `true` for a valid number component.
*/
this.valid = false;
/**
* The unique id for the number component.
*/
this.id = "number-input-" + Number.numberCount;
/**
* Sets the value attribute on the `input` element.
*/
this.value = 0;
/**
* Sets the min attribute on the `input` element.
*/
this.min = null;
/**
* Sets the max attribute on the `input` element.
*/
this.max = null;
/**
* Emits event notifying other classes when a change in state occurs in the input.
*/
// tslint:disable-next-line: no-output-native
this.change = new core.EventEmitter();
/**
* Called when number input is blurred. Needed to properly implement `ControlValueAccessor`.
*/
this.onTouched = (/**
* @return {?}
*/
function () { });
/**
* Method set in `registerOnChange` to propagate changes back to the form.
*/
this.propagateChange = (/**
* @param {?} _
* @return {?}
*/
function (_) { });
Number.numberCount++;
}
/**
* This is the initial value set to the component
* @param value The input value.
*/
/**
* This is the initial value set to the component
* @param {?} value The input value.
* @return {?}
*/
Number.prototype.writeValue = /**
* This is the initial value set to the component
* @param {?} value The input value.
* @return {?}
*/
function (value) {
this.value = value;
};
/**
* Sets a method in order to propagate changes back to the form.
*/
/**
* Sets a method in order to propagate changes back to the form.
* @param {?} fn
* @return {?}
*/
Number.prototype.registerOnChange = /**
* Sets a method in order to propagate changes back to the form.
* @param {?} fn
* @return {?}
*/
function (fn) {
this.propagateChange = fn;
};
/**
* Registers a callback to be triggered when the control has been touched.
* @param fn Callback to be triggered when the number input is touched.
*/
/**
* Registers a callback to be triggered when the control has been touched.
* @param {?} fn Callback to be triggered when the number input is touched.
* @return {?}
*/
Number.prototype.registerOnTouched = /**
* Registers a callback to be triggered when the control has been touched.
* @param {?} fn Callback to be triggered when the number input is touched.
* @return {?}
*/
function (fn) {
this.onTouched = fn;
};
/**
* Sets the disabled state through the model
*/
/**
* Sets the disabled state through the model
* @param {?} isDisabled
* @return {?}
*/
Number.prototype.setDisabledState = /**
* Sets the disabled state through the model
* @param {?} isDisabled
* @return {?}
*/
function (isDisabled) {
this.disabled = isDisabled;
};
/**
* Adds 1 to the current `value`.
*/
/**
* Adds 1 to the current `value`.
* @return {?}
*/
Number.prototype.onIncrement = /**
* Adds 1 to the current `value`.
* @return {?}
*/
function () {
if (this.max === null || this.value < this.max) {
this.value++;
this.emitChangeEvent();
}
};
/**
* Subtracts 1 to the current `value`.
*/
/**
* Subtracts 1 to the current `value`.
* @return {?}
*/
Number.prototype.onDecrement = /**
* Subtracts 1 to the current `value`.
* @return {?}
*/
function () {
if (this.min === null || this.value > this.min) {
this.value--;
this.emitChangeEvent();
}
};
/**
* Creates a class of `NumberChange` to emit the change in the `Number`.
*/
/**
* Creates a class of `NumberChange` to emit the change in the `Number`.
* @return {?}
*/
Number.prototype.emitChangeEvent = /**
* Creates a class of `NumberChange` to emit the change in the `Number`.
* @return {?}
*/
function () {
/** @type {?} */
var event = new NumberChange();
event.source = this;
event.value = this.value;
this.change.emit(event);
this.propagateChange(this.value);
};
/**
* @param {?} event
* @return {?}
*/
Number.prototype.onNumberInputChange = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.value = event.target.value;
this.emitChangeEvent();
};
/**
* @param {?} value
* @return {?}
*/
Number.prototype.isTemplate = /**
* @param {?} value
* @return {?}
*/
function (value) {
return value instanceof core.TemplateRef;
};
/**
* Variable used for creating unique ids for number input components.
*/
Number.numberCount = 0;
Number.decorators = [
{ type: core.Component, args: [{
selector: 'suka-number',
template: "\n <label *ngIf=\"skeleton && label\" class=\"label skeleton\"></label>\n <label *ngIf=\"!skeleton && label\" [for]=\"id\" class=\"label\">\n <ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n <ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n </label>\n <div *ngIf=\"!skeleton && helperText\" class=\"form__helper-text\">\n <ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n <ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n </div>\n <div\n data-numberinput\n [attr.data-invalid]=\"(invalid ? true : null)\"\n [attr.data-valid]=\"(valid ? true : null)\"\n class=\"number-input\"\n [ngClass]=\"{\n 'number-input--nolabel': !label,\n 'number-input--helpertext': helperText,\n 'skeleton' : skeleton,\n 'number-input--disabled': disabled\n }\">\n <div class=\"number-input__input-wrapper\">\n <span class=\"number-input__prefix\" *ngIf=\"!skeleton && prefix\">\n <ng-container *ngIf=\"!isTemplate(prefix)\">{{prefix}}</ng-container>\n <ng-template *ngIf=\"isTemplate(prefix)\" [ngTemplateOutlet]=\"prefix\"></ng-template>\n </span>\n <input\n type=\"number\"\n [id]=\"id\"\n [value]=\"value\"\n [attr.min]=\"min\"\n [attr.max]=\"max\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n (input)=\"onNumberInputChange($event)\"/>\n <suka-icon *ngIf=\"!skeleton && invalid\" icon=\"alert-circle\" class=\"number-input__invalid\"></suka-icon>\n <suka-icon *ngIf=\"!skeleton && valid\" icon=\"check\" class=\"number-input__valid\"></suka-icon>\n <div *ngIf=\"!skeleton\" class=\"number-input__controls\">\n <button\n class=\"number-input__control-btn up-icon\"\n type=\"button\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n (click)=\"onIncrement()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\" height=\"16\" width=\"16\"><path fill=\"currentColor\" d=\"M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z\"></path></svg>\n </button>\n <button\n class=\"number-input__control-btn down-icon\"\n type=\"button\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n (click)=\"onDecrement()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\" height=\"16\" width=\"16\"><path fill=\"currentColor\" d=\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\"></path></svg>\n </button>\n </div>\n </div>\n <div *ngIf=\"invalid\" class=\"form-requirement\">\n <ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n <ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n </div>\n </div>\n ",
providers: [
{
provide: forms.NG_VALUE_ACCESSOR,
useExisting: Number,
multi: true
}
]
}] }
];
/** @nocollapse */
Number.ctorParameters = function () { return []; };
Number.propDecorators = {
containerClass: [{ type: core.HostBinding, args: ['class.form-item',] }],
disabled: [{ type: core.Input }],
skeleton: [{ type: core.Input }],
invalid: [{ type: core.Input }],
valid: [{ type: core.Input }],
id: [{ type: core.Input }],
required: [{ type: core.Input }],
value: [{ type: core.Input }],
min: [{ type: core.Input }],
max: [{ type: core.Input }],
label: [{ type: core.Input }],
prefix: [{ type: core.Input }],
helperText: [{ type: core.Input }],
invalidText: [{ type: core.Input }],
change: [{ type: core.Output }]
};
return Number;
}());
if (false) {
/**
* Variable used for creating unique ids for number input components.
* @type {?}
*/
Number.numberCount;
/** @type {?} */
Number.prototype.containerClass;
/**
* Set to `true` for a disabled number input.
* @type {?}
*/
Number.prototype.disabled;
/**
* Set to `true` for a loading number component.
* @type {?}
*/
Number.prototype.skeleton;
/**
* Set to `true` for an invalid number component.
* @type {?}
*/
Number.prototype.invalid;
/**
* Set to `true` for a valid number component.
* @type {?}
*/
Number.prototype.valid;
/**
* The unique id for the number component.
* @type {?}
*/
Number.prototype.id;
/**
* Reflects the required attribute of the `input` element.
* @type {?}
*/
Number.prototype.required;
/**
* Sets the value attribute on the `input` element.
* @type {?}
*/
Number.prototype.value;
/**
* Sets the min attribute on the `input` element.
* @type {?}
*/
Number.prototype.min;
/**
* Sets the max attribute on the `input` element.
* @type {?}
*/
Number.prototype.max;
/**
* Sets the text inside the `label` tag.
* @type {?}
*/
Number.prototype.label;
/**
* Sets the a prefix for the input wrapper.
* @type {?}
*/
Number.prototype.prefix;
/**
* Sets the optional helper text.
* @type {?}
*/
Number.prototype.helperText;
/**
* Sets the invalid text.
* @type {?}
*/
Number.prototype.invalidText;
/**
* Emits event notifying other classes when a change in state occurs in the input.
* @type {?}
*/
Number.prototype.change;
/**
* Called when number input is blurred. Needed to properly implement `ControlValueAccessor`.
* @type {?}
*/
Number.prototype.onTouched;
/**
* Method set in `registerOnChange` to propagate changes back to the form.
* @type {?}
*/
Number.prototype.propagateChange;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NumberModule = /** @class */ (function () {
function NumberModule() {
}
NumberModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
Number
],
exports: [
Number
],
imports: [
forms.FormsModule,
common.CommonModule,
IconModule,
]
},] }
];
return NumberModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var Search = /** @class */ (function () {
/**
* Creates an instance of `Search`.
*/
function Search(elementRef) {
this.elementRef = elementRef;
/**
* Set to `true` for a disabled search input.
*/
this.disabled = false;
/**
* Set to `true` for a toolbar search component.
*/
this.toolbar = false;
/**
* Set to `true` for a loading search component.
*/
this.skeleton = false;
/**
* Set to `true` to expand the toolbar search component.
*/
this.active = false;
/**
* Specifies whether the search component is used in the table toolbar.
*/
this.tableSearch = false;
/**
* The unique id for the search component.
*/
this.id = "search-" + Search.searchCount;
/**
* Sets the value attribute on the `input` element.
*/
this.value = '';
/**
* Sets the autocomplete attribute on the `input` element.
* For reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values
*/
this.autocomplete = 'on';
/**
* Sets the text inside the `label` tag.
*/
this.label = 'Búsqueda'; // TODO: i18n
// TODO: i18n
/**
* Sets the placeholder attribute on the `input` element.
*/
this.placeholder = 'Buscar'; // TODO: i18n
// TODO: i18n
/**
* Used to set the `title` attribute of the clear button.
*/
this.clearButtonTitle = 'Limpiar'; // TODO: i18n
// TODO: i18n
/**
* Emits an event when value is changed.
*/
this.valueChange = new core.EventEmitter();
/**
* Emits an event when the clear button is clicked.
*/
this.clear = new core.EventEmitter();
/**
* Called when search input is blurred. Needed to properly implement `ControlValueAccessor`.
*/
this.onTouched = (/**
* @return {?}
*/
function () { });
/**
* Method set in `registerOnChange` to propagate changes back to the form.
*/
this.propagateChange = (/**
* @param {?} _
* @return {?}
*/
function (_) { });
Search.searchCount++;
}
Object.defineProperty(Search.prototype, "containerClass", {
get: /**
* @return {?}
*/
function () { return !this.toolbar; },
enumerable: true,
configurable: true
});
/**
* This is the initial value set to the component
* @param value The input value.
*/
/**
* This is the initial value set to the component
* @param {?} value The input value.
* @return {?}
*/
Search.prototype.writeValue = /**
* This is the initial value set to the component
* @param {?} value The input value.
* @return {?}
*/
function (value) {
this.value = value;
};
/**
* Sets a method in order to propagate changes back to the form.
*/
/**
* Sets a method in order to propagate changes back to the form.
* @param {?} fn
* @return {?}
*/
Search.prototype.registerOnChange = /**
* Sets a method in order to propagate changes back to the form.
* @param {?} fn
* @return {?}
*/
function (fn) {
this.propagateChange = fn;
};
/**
* Registers a callback to be triggered when the control has been touched.
* @param fn Callback to be triggered when the search input is touched.
*/
/**
* Registers a callback to be triggered when the control has been touched.
* @param {?} fn Callback to be triggered when the search input is touched.
* @return {?}
*/
Search.prototype.registerOnTouched = /**
* Registers a callback to be triggered when the control has been touched.
* @param {?} fn Callback to be triggered when the search input is touched.
* @return {?}
*/
function (fn) {
this.onTouched = fn;
};
/**
* Called when text is written in the input.
* @param search The input text.
*/
/**
* Called when text is written in the input.
* @param {?} search The input text.
* @return {?}
*/
Search.prototype.onSearch = /**
* Called when text is written in the input.
* @param {?} search The input text.
* @return {?}
*/
function (search) {
this.value = search;
this.doValueChange();
};
/**
* Called when clear button is clicked.
*/
/**
* Called when clear button is clicked.
* @return {?}
*/
Search.prototype.clearSearch = /**
* Called when clear button is clicked.
* @return {?}
*/
function () {
this.value = '';
this.clear.emit();
this.propagateChange(this.value);
};
/**
* @return {?}
*/
Search.prototype.doValueChange = /**
* @return {?}
*/
function () {
this.valueChange.emit(this.value);
this.propagateChange(this.value);
};
/**
* @return {?}
*/
Search.prototype.openSearch = /**
* @return {?}
*/
function () {
var _this = this;
this.active = true;
setTimeout((/**
* @return {?}
*/
function () { return _this.inputRef.nativeElement.focus(); }));
};
/**
* @param {?} event
* @return {?}
*/
Search.prototype.keyDown = /**
* @param {?} event
* @return {?}
*/
function (event) {
if (this.toolbar) {
if (event.key === 'Escape') {
this.active = false;
}
else if (event.key === 'Enter') {
this.openSearch();
}
}
};
/**
* @param {?} event
* @return {?}
*/
Search.prototype.focusOut = /**
* @param {?} event
* @return {?}
*/
function (event) {
if (this.toolbar &&
this.inputRef.nativeElement.value === '' &&
event.relatedTarget === null) {
this.active = false;
}
};
/**
* Variable used for creating unique ids for search components.
*/
Search.searchCount = 0;
Search.decorators = [
{ type: core.Component, args: [{
selector: 'suka-search',
template: "\n <div\n class=\"search\"\n [ngClass]=\"{\n 'skeleton': skeleton,\n 'toolbar-search': toolbar,\n 'toolbar-search--active': toolbar && active\n }\"\n role=\"search\"\n >\n <label class=\"label\" [for]=\"id\">{{label}}</label>\n\n <div *ngIf=\"skeleton; else enableInput\" class=\"search-input\"></div>\n <ng-template #enableInput>\n <input\n #input\n *ngIf=\"!toolbar || active || value !== ''\"\n class=\"search-input\"\n [type]=\"tableSearch || !toolbar ? 'text' : 'search'\"\n role=\"search\"\n [id]=\"id\"\n [value]=\"value\"\n [autocomplete]=\"autocomplete\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n (input)=\"onSearch($event.target.value)\"/>\n <button *ngIf=\"!tableSearch && toolbar\" class=\"toolbar-search__btn\" (click)=\"openSearch()\">\n <suka-icon icon=\"search\"></suka-icon>\n </button>\n <suka-icon icon=\"search\" *ngIf=\"tableSearch || !toolbar\" (click)=\"openSearch()\" class=\"search-magnifier\"></suka-icon>\n </ng-template>\n\n <button\n *ngIf=\"tableSearch || !toolbar\"\n class=\"search-close\"\n [ngClass]=\"{\n 'search-close--hidden': !value || value.length === 0\n }\"\n [title]=\"clearButtonTitle\"\n [attr.aria-label]=\"clearButtonTitle\"\n (click)=\"clearSearch()\"\n >\n <suka-icon icon=\"x-circle\"></suka-icon>\n </button>\n </div>\n ",
providers: [
{
provide: forms.NG_VALUE_ACCESSOR,
useExisting: Search,
multi: true
}
]
}] }
];
/** @nocollapse */
Search.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
Search.propDecorators = {
containerClass: [{ type: core.HostBinding, args: ['class.form-item',] }],
disabled: [{ type: core.Input }],
toolbar: [{ type: core.Input }],
skeleton: [{ type: core.Input }],
active: [{ type: core.Input }],
tableSearch: [{ type: core.Input }],
name: [{ type: core.Input }],
id: [{ type: core.Input }],
required: [{ type: core.Input }],
value: [{ type: core.Input }],
autocomplete: [{ type: core.Input }],
label: [{ type: core.Input }],
placeholder: [{ type: core.Input }],
clearButtonTitle: [{ type: core.Input }],
valueChange: [{ type: core.Output }],
clear: [{ type: core.Output }],
inputRef: [{ type: core.ViewChild, args: ['input', { static: false },] }],
keyDown: [{ type: core.HostListener, args: ['keydown', ['$event'],] }],
focusOut: [{ type: core.HostListener, args: ['focusout', ['$event'],] }]
};
return Search;
}());
if (false) {
/**
* Variable used for creating unique ids for search components.
* @type {?}
*/
Search.searchCount;
/**
* Set to `true` for a disabled search input.
* @type {?}
*/
Search.prototype.disabled;
/**
* Set to `true` for a toolbar search component.
* @type {?}
*/
Search.prototype.toolbar;
/**
* Set to `true` for a loading search component.
* @type {?}
*/
Search.prototype.skeleton;
/**
* Set to `true` to expand the toolbar search component.
* @type {?}
*/
Search.prototype.active;
/**
* Specifies whether the search component is used in the table toolbar.
* @type {?}
*/
Search.prototype.tableSearch;
/**
* Sets the name attribute on the `input` element.
* @type {?}
*/
Search.prototype.name;
/**
* The unique id for the search component.
* @type {?}
*/
Search.prototype.id;
/**
* Reflects the required attribute of the `input` element.
* @type {?}
*/
Search.prototype.required;
/**
* Sets the value attribute on the `input` element.
* @type {?}
*/
Search.prototype.value;
/**
* Sets the autocomplete attribute on the `input` element.
* For reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values
* @type {?}
*/
Search.prototype.autocomplete;
/**
* Sets the text inside the `label` tag.
* @type {?}
*/
Search.prototype.label;
/**
* Sets the placeholder attribute on the `input` element.
* @type {?}
*/
Search.prototype.placeholder;
/**
* Used to set the `title` attribute of the clear button.
* @type {?}
*/
Search.prototype.clearButtonTitle;
/**
* Emits an event when value is changed.
* @type {?}
*/
Search.prototype.valueChange;
/**
* Emits an event when the clear button is clicked.
* @type {?}
*/
Search.prototype.clear;
/** @type {?} */
Search.prototype.inputRef;
/**
* Called when search input is blurred. Needed to properly implement `ControlValueAccessor`.
* @type {?}
*/
Search.prototype.onTouched;
/**
* Method set in `registerOnChange` to propagate changes back to the form.
* @type {?}
*/
Search.prototype.propagateChange;
/**
* @type {?}
* @protected
*/
Search.prototype.elementRef;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var SearchModule = /** @class */ (function () {
function SearchModule() {
}
SearchModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
Search
],
exports: [
Search
],
imports: [
forms.FormsModule,
common.CommonModule,
IconModule,
]
},] }
];
return SearchModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var TabItem = /** @class */ (function () {
function TabItem(cdRef) {
this.cdRef = cdRef;
/**
* Set to `true` to activate the tab (display it).
*/
this.active = false;
/**
* Callback when the tab is selected.
*/
this.selected = new core.EventEmitter();
}
/**
* Activates tab item
*/
/**
* Activates tab item
* @return {?}
*/
TabItem.prototype.activate = /**
* Activates tab item
* @return {?}
*/
function () {
this.active = true;
this.cdRef.detectChanges();
this.selected.emit(this.title);
};
TabItem.decorators = [
{ type: core.Component, args: [{
selector: 'suka-tab',
template: "\n <div [hidden]=\"!active\" class=\"tabs__tab-item\">\n <ng-content></ng-content>\n </div>\n "
}] }
];
/** @nocollapse */
TabItem.ctorParameters = function () { return [
{ type: core.ChangeDetectorRef }
]; };
TabItem.propDecorators = {
title: [{ type: core.Input }],
active: [{ type: core.Input }],
selected: [{ type: core.Output }]
};
return TabItem;
}());
if (false) {
/**
* Sets the tab title.
* @type {?}
*/
TabItem.prototype.title;
/**
* Set to `true` to activate the tab (display it).
* @type {?}
*/
TabItem.prototype.active;
/**
* Callback when the tab is selected.
* @type {?}
*/
TabItem.prototype.selected;
/**
* @type {?}
* @private
*/
TabItem.prototype.cdRef;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var Tabs = /** @class */ (function () {
function Tabs() {
/**
* Set to `true` to fit tabs to container.
*/
this.fitted = false;
}
/**
* @return {?}
*/
Tabs.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
/** @type {?} */
var activeTabs = this.tabs.filter((/**
* @param {?} tab
* @return {?}
*/
function (tab) { return tab.active; }));
if (activeTabs.length === 0 && this.tabs.length > 0) {
this.selectTab(this.tabs.first);
}
};
/**
* Selects a particular tab and activates it.
*/
/**
* Selects a particular tab and activates it.
* @param {?} tabItem
* @return {?}
*/
Tabs.prototype.selectTab = /**
* Selects a particular tab and activates it.
* @param {?} tabItem
* @return {?}
*/
function (tabItem) {
this.tabs.toArray().forEach((/**
* @param {?} tab
* @return {?}
*/
function (tab) { return tab.active = false; }));
tabItem.activate();
};
/**
* @param {?} value
* @return {?}
*/
Tabs.prototype.isTemplate = /**
* @param {?} value
* @return {?}
*/
function (value) {
return value instanceof core.TemplateRef;
};
Tabs.decorators = [
{ type: core.Component, args: [{
selector: 'suka-tabs',
template: "\n <div class=\"tabs-wrapper\">\n <ul class=\"tabs\">\n <li\n *ngFor=\"let tab of tabs\"\n (click)=\"selectTab(tab)\"\n [class.tabs__tab-container--selected]=\"tab.active\"\n class=\"tabs__tab-container\"\n >\n <button class=\"tabs__tab\" type=\"button\" role=\"tab\">\n <span class=\"tabs__title\">\n <ng-container *ngIf=\"!isTemplate(tab.title)\">{{tab.title}}</ng-container>\n <ng-template *ngIf=\"isTemplate(tab.title)\" [ngTemplateOutlet]=\"tab.title\"></ng-template>\n </span>\n </button>\n </li>\n </ul>\n </div>\n <ng-content></ng-content>\n "
}] }
];
Tabs.propDecorators = {
fitted: [{ type: core.HostBinding, args: ['class.tabs-fitted',] }, { type: core.Input }],
tabs: [{ type: core.ContentChildren, args: [TabItem,] }]
};
return Tabs;
}());
if (false) {
/**
* Set to `true` to fit tabs to container.
* @type {?}
*/
Tabs.prototype.fitted;
/**
* List of tabs associated to the main wrapper.
* @type {?}
*/
Tabs.prototype.tabs;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var TabsModule = /** @class */ (function () {
function TabsModule() {
}
TabsModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
Tabs,
TabItem,
],
exports: [
Tabs,
TabItem,
],
imports: [
common.CommonModule
]
},] }
];
return TabsModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var TooltipContainer = /** @class */ (function () {
function TooltipContainer() {
this.renderMethod = 'component';
this.position = 'bottom';
}
/**
* @return {?}
*/
TooltipContainer.prototype.ngOnInit = /**
* @return {?}
*/
function () {
if (typeof this.content === 'string') {
this.renderMethod = 'text';
}
if (this.content instanceof core.TemplateRef) {
this.renderMethod = 'template';
}
};
TooltipContainer.decorators = [
{ type: core.Component, args: [{
selector: 'suka-tooltip',
template: "\n <div @tooltip class=\"tooltip tooltip-{{position}}\">\n <span class=\"tooltip__caret\"></span>\n <ng-container [ngSwitch]=\"renderMethod\">\n <div *ngSwitchCase=\"'text'\" [innerHTML]=\"content\"></div>\n <ng-container *ngSwitchCase=\"'template'\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'component'\">\n <ng-container *ngComponentOutlet=\"content\"></ng-container>\n </ng-container>\n </ng-container>\n </div>",
animations: [
animations.trigger('tooltip', [
animations.transition(':enter', [
animations.style({ opacity: 0 }),
animations.animate('0.2s ease-in', animations.style({ opacity: 1 })),
]),
animations.transition(':leave', [
animations.animate(200, animations.style({ opacity: 0 })),
]),
]),
]
}] }
];
TooltipContainer.propDecorators = {
content: [{ type: core.Input }],
position: [{ type: core.Input }]
};
return TooltipContainer;
}());
if (false) {
/** @type {?} */
TooltipContainer.prototype.renderMethod;
/** @type {?} */
TooltipContainer.prototype.content;
/** @type {?} */
TooltipContainer.prototype.position;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var positions = {
top: {
originX: 'center',
originY: 'top',
overlayX: 'center',
overlayY: 'bottom',
offsetY: -8,
},
right: {
originX: 'end',
originY: 'center',
overlayX: 'start',
overlayY: 'center',
offsetX: 8,
},
bottom: {
originX: 'center',
originY: 'bottom',
overlayX: 'center',
overlayY: 'top',
offsetY: 8,
},
left: {
originX: 'start',
originY: 'center',
overlayX: 'end',
overlayY: 'center',
offsetX: -8,
}
};
var Tooltip = /** @class */ (function () {
function Tooltip(overlay, overlayPositionBuilder, elementRef) {
this.overlay = overlay;
this.overlayPositionBuilder = overlayPositionBuilder;
this.elementRef = elementRef;
this.open = false;
/**
* The tooltip content
*/
this.content = '';
/**
* Sets the tooltip trigger behaviour. Defaults to `hover`.
*/
this.trigger = 'hover';
/**
* Sets the tooltip position according to the trigger component.
*/
this.position = 'bottom';
}
/**
* @return {?}
*/
Tooltip.prototype.ngOnInit = /**
* @return {?}
*/
function () {
/** @type {?} */
var positionStrategy = this.overlayPositionBuilder
.flexibleConnectedTo(this.elementRef)
.withPositions([(/** @type {?} */ (positions[this.position]))]);
this.overlayRef = this.overlay.create({
positionStrategy: positionStrategy,
scrollStrategy: this.overlay.scrollStrategies.close(),
});
};
/**
* @private
* @return {?}
*/
Tooltip.prototype.show = /**
* @private
* @return {?}
*/
function () {
this.open = true;
/** @type {?} */
var tooltipRef = this.overlayRef.attach(new portal.ComponentPortal(TooltipContainer));
tooltipRef.instance.content = this.content;
tooltipRef.instance.position = this.position;
};
/**
* @private
* @return {?}
*/
Tooltip.prototype.hide = /**
* @private
* @return {?}
*/
function () {
this.open = false;
this.overlayRef.detach();
};
/**
* @return {?}
*/
Tooltip.prototype.onMouseEnter = /**
* @return {?}
*/
function () {
if (this.trigger === 'hover') {
this.show();
}
};
/**
* @return {?}
*/
Tooltip.prototype.onMouseOut = /**
* @return {?}
*/
function () {
if (this.trigger === 'hover') {
this.hide();
}
};
/**
* @return {?}
*/
Tooltip.prototype.onClick = /**
* @return {?}
*/
function () {
var _this = this;
if (this.trigger === 'click') {
this.open ? this.hide() : this.show();
if (this.duration) {
setTimeout((/**
* @return {?}
*/
function () {
_this.hide();
}), this.duration);
}
}
};
Tooltip.decorators = [
{ type: core.Directive, args: [{ selector: '[sukaTooltip]' },] }
];
/** @nocollapse */
Tooltip.ctorParameters = function () { return [
{ type: overlay.Overlay },
{ type: overlay.OverlayPositionBuilder },
{ type: core.ElementRef }
]; };
Tooltip.propDecorators = {
content: [{ type: core.Input, args: ['sukaTooltip',] }],
trigger: [{ type: core.Input, args: ['tooltipTrigger',] }],
position: [{ type: core.Input, args: ['tooltipPosition',] }],
duration: [{ type: core.Input, args: ['tooltipDuration',] }],
onMouseEnter: [{ type: core.HostListener, args: ['mouseenter',] }],
onMouseOut: [{ type: core.HostListener, args: ['mouseout',] }],
onClick: [{ type: core.HostListener, args: ['click',] }]
};
return Tooltip;
}());
if (false) {
/**
* @type {?}
* @private
*/
Tooltip.prototype.overlayRef;
/**
* @type {?}
* @private
*/
Tooltip.prototype.open;
/**
* The tooltip content
* @type {?}
*/
Tooltip.prototype.content;
/**
* Sets the tooltip trigger behaviour. Defaults to `hover`.
* @type {?}
*/
Tooltip.prototype.trigger;
/**
* Sets the tooltip position according to the trigger component.
* @type {?}
*/
Tooltip.prototype.position;
/**
* Sets a duration for the tooltip. If not set, it runs indefinitely.
* @type {?}
*/
Tooltip.prototype.duration;
/**
* @type {?}
* @private
*/
Tooltip.prototype.overlay;
/**
* @type {?}
* @private
*/
Tooltip.prototype.overlayPositionBuilder;
/**
* @type {?}
* @private
*/
Tooltip.prototype.elementRef;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var TooltipModule = /** @class */ (function () {
function TooltipModule() {
}
TooltipModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
TooltipContainer,
Tooltip,
],
exports: [
TooltipContainer,
Tooltip,
],
imports: [
common.CommonModule,
overlay.OverlayModule
],
entryComponents: [
TooltipContainer
]
},] }
];
return TooltipModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ɵ0 = /**
* @param {?} iconDef
* @return {?}
*/
function (iconDef) { return iconDef.name === 'arrow-right'; };
/** @type {?} */
var arrowImg = iconDefs.find((ɵ0)).template;
var ɵ1 = /**
* @param {?} iconDef
* @return {?}
*/
function (iconDef) { return iconDef.name === 'external-link'; };
/** @type {?} */
var externalImg = iconDefs.find((ɵ1)).template;
var Link = /** @class */ (function () {
function Link(elementRef, renderer, document) {
this.elementRef = elementRef;
this.renderer = renderer;
this.document = document;
this.baseClass = true;
/**
* Set to `true` to display an arrow next to the link
*/
this.arrow = false;
}
Object.defineProperty(Link.prototype, "disabled", {
get: /**
* @return {?}
*/
function () {
return this._disabled;
},
/**
* Set to `true` to disable the link.
*/
set: /**
* Set to `true` to disable the link.
* @param {?} disabled
* @return {?}
*/
function (disabled) {
this._disabled = disabled;
this.tabindex = this.disabled ? -1 : null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Link.prototype, "external", {
get: /**
* @return {?}
*/
function () {
return this._external;
},
/**
* Set to `true` to display an icon describing an external link (going to a new page)
*/
set: /**
* Set to `true` to display an icon describing an external link (going to a new page)
* @param {?} external
* @return {?}
*/
function (external) {
this._external = external;
this.target = this.external ? '_blank' : null;
this.ref = this.external ? 'noopener' : null;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
Link.prototype.ngOnInit = /**
* @return {?}
*/
function () {
if (this.arrow || this.external) {
/** @type {?} */
var child = document.createElement('span');
child.className = 'link__icon';
if (this.arrow) {
child.className += ' link__icon--arrow';
child.innerHTML = arrowImg;
}
if (this.external) {
child.innerHTML = externalImg;
}
this.renderer.appendChild(this.elementRef.nativeElement, child);
}
};
Link.decorators = [
{ type: core.Directive, args: [{
selector: '[sukaLink]'
},] }
];
/** @nocollapse */
Link.ctorParameters = function () { return [
{ type: core.ElementRef },
{ type: core.Renderer2 },
{ type: undefined, decorators: [{ type: core.Inject, args: [common.DOCUMENT,] }] }
]; };
Link.propDecorators = {
baseClass: [{ type: core.HostBinding, args: ['class.link',] }],
tabindex: [{ type: core.HostBinding, args: ['attr.tabindex',] }],
target: [{ type: core.HostBinding, args: ['attr.target',] }],
ref: [{ type: core.HostBinding, args: ['attr.ref',] }],
disabled: [{ type: core.Input }, { type: core.HostBinding, args: ['attr.aria-disabled',] }, { type: core.HostBinding, args: ['class.link--disabled',] }],
arrow: [{ type: core.HostBinding, args: ['class.link--arrow',] }, { type: core.Input }],
external: [{ type: core.Input }, { type: core.HostBinding, args: ['class.link--external',] }]
};
return Link;
}());
if (false) {
/** @type {?} */
Link.prototype.baseClass;
/**
* Automatically set to `-1` when link is disabled.
* @type {?}
*/
Link.prototype.tabindex;
/**
* Set target and ref for external links
* @type {?}
*/
Link.prototype.target;
/** @type {?} */
Link.prototype.ref;
/**
* @type {?}
* @private
*/
Link.prototype._disabled;
/**
* Set to `true` to display an arrow next to the link
* @type {?}
*/
Link.prototype.arrow;
/**
* @type {?}
* @private
*/
Link.prototype._external;
/**
* @type {?}
* @private
*/
Link.prototype.elementRef;
/**
* @type {?}
* @private
*/
Link.prototype.renderer;
/**
* @type {?}
* @private
*/
Link.prototype.document;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var LinkModule = /** @class */ (function () {
function LinkModule() {
}
LinkModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
Link
],
exports: [
Link
],
imports: [
common.CommonModule
]
},] }
];
return LinkModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var InputGroup = /** @class */ (function () {
function InputGroup() {
this.containerClass = true;
/**
* Set to `true` for an invalid input group component.
*/
this.invalid = false;
/**
* Set to `true` for a condesned input group component;
*/
this.condensed = false;
}
/**
* @param {?} value
* @return {?}
*/
InputGroup.prototype.isTemplate = /**
* @param {?} value
* @return {?}
*/
function (value) {
return value instanceof core.TemplateRef;
};
InputGroup.decorators = [
{ type: core.Component, args: [{
selector: 'suka-input-group',
template: "\n <label *ngIf=\"label\" class=\"label\">\n <ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n <ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n </label>\n <div *ngIf=\"helperText\" class=\"form__helper-text\">\n <ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n <ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n </div>\n <div class=\"input-group-wrapper\">\n <div\n class=\"input-group-content\"\n [ngClass]=\"{\n 'input-group-content--condensed': condensed\n }\"\n [attr.data-invalid]=\"(invalid ? true : null)\"\n >\n <ng-content></ng-content>\n </div>\n <div *ngIf=\"invalid\" class=\"form-requirement\">\n <ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n <ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n </div>\n </div>\n "
}] }
];
InputGroup.propDecorators = {
containerClass: [{ type: core.HostBinding, args: ['class.form-item',] }],
invalid: [{ type: core.Input }],
label: [{ type: core.Input }],
helperText: [{ type: core.Input }],
invalidText: [{ type: core.Input }],
condensed: [{ type: core.Input }]
};
return InputGroup;
}());
if (false) {
/** @type {?} */
InputGroup.prototype.containerClass;
/**
* Set to `true` for an invalid input group component.
* @type {?}
*/
InputGroup.prototype.invalid;
/**
* Sets the text inside the `label` tag.
* @type {?}
*/
InputGroup.prototype.label;
/**
* Sets the optional helper text.
* @type {?}
*/
InputGroup.prototype.helperText;
/**
* Sets the invalid text.
* @type {?}
*/
InputGroup.prototype.invalidText;
/**
* Set to `true` for a condesned input group component;
* @type {?}
*/
InputGroup.prototype.condensed;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var InputGroupItem = /** @class */ (function () {
function InputGroupItem() {
this.type = 'default';
this.baseClass = true;
this.auto = false;
this.full = false;
}
/**
* @return {?}
*/
InputGroupItem.prototype.ngOnChanges = /**
* @return {?}
*/
function () {
this.auto = this.full = false;
switch (this.type) {
case 'auto':
this.auto = true;
break;
case 'full':
this.full = true;
break;
default: break;
}
};
InputGroupItem.decorators = [
{ type: core.Directive, args: [{
selector: '[sukaInputGroupItem]'
},] }
];
InputGroupItem.propDecorators = {
type: [{ type: core.Input, args: ['sukaInputGroupItem',] }],
baseClass: [{ type: core.HostBinding, args: ['class.input-group__item',] }],
auto: [{ type: core.HostBinding, args: ['class.input-group__item--auto',] }],
full: [{ type: core.HostBinding, args: ['class.input-group__item--full',] }]
};
return InputGroupItem;
}());
if (false) {
/** @type {?} */
InputGroupItem.prototype.type;
/** @type {?} */
InputGroupItem.prototype.baseClass;
/** @type {?} */
InputGroupItem.prototype.auto;
/** @type {?} */
InputGroupItem.prototype.full;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var InputGroupModule = /** @class */ (function () {
function InputGroupModule() {
}
InputGroupModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
InputGroup,
InputGroupItem,
],
exports: [
InputGroup,
InputGroupItem,
],
imports: [
common.CommonModule,
]
},] }
];
return InputGroupModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ModalRef = /** @class */ (function () {
function ModalRef(overlayRef) {
this.overlayRef = overlayRef;
this._beforeClose = new rxjs.Subject();
this._afterClosed = new rxjs.Subject();
}
/**
* @param {?=} data
* @return {?}
*/
ModalRef.prototype.close = /**
* @param {?=} data
* @return {?}
*/
function (data) {
var _this = this;
this._result = data;
// Listen for animation 'start' events
this.componentInstance.animationStateChanged.pipe(operators.filter((/**
* @param {?} event
* @return {?}
*/
function (event) { return event.phaseName === 'start'; })), operators.take(1)).subscribe((/**
* @return {?}
*/
function () {
_this._beforeClose.next(_this._result);
_this._beforeClose.complete();
_this.overlayRef.detachBackdrop();
}));
// Listen for animation 'done' events
this.componentInstance.animationStateChanged.pipe(operators.filter((/**
* @param {?} event
* @return {?}
*/
function (event) { return event.phaseName === 'done' && event.toState === 'leave'; })), operators.take(1)).subscribe((/**
* @return {?}
*/
function () {
_this._afterClosed.next(_this._result);
_this._afterClosed.complete();
_this.overlayRef.dispose();
// Make sure to also clear the reference to the
// component instance to avoid memory leaks
// tslint:disable-next-line: no-non-null-assertion
_this.componentInstance = (/** @type {?} */ (null));
}));
// Start exit animation
this.componentInstance.startExitAnimation();
};
/**
* @return {?}
*/
ModalRef.prototype.afterClosed = /**
* @return {?}
*/
function () {
return this._afterClosed.asObservable();
};
/**
* @return {?}
*/
ModalRef.prototype.beforeClose = /**
* @return {?}
*/
function () {
return this._beforeClose.asObservable();
};
return ModalRef;
}());
if (false) {
/** @type {?} */
ModalRef.prototype.componentInstance;
/**
* @type {?}
* @private
*/
ModalRef.prototype._beforeClose;
/**
* @type {?}
* @private
*/
ModalRef.prototype._afterClosed;
/**
* @type {?}
* @private
*/
ModalRef.prototype._result;
/**
* @type {?}
* @private
*/
ModalRef.prototype.overlayRef;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var MODAL_CONTENT_DATA = new core.InjectionToken('MODAL_CONTENT_DATA');
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var ESCAPE_KEY = 27;
/** @type {?} */
var MODAL_ANIMATION_TIMINGS = '200ms cubic-bezier(0.64, 0, 0.35, 1)';
var ModalContainer = /** @class */ (function () {
function ModalContainer(dialogRef, content) {
this.dialogRef = dialogRef;
this.content = content;
this.animationState = 'enter';
this.animationStateChanged = new core.EventEmitter();
this.showFooter = false;
this.baseClass = true;
}
/**
* @return {?}
*/
ModalContainer.prototype.ngOnInit = /**
* @return {?}
*/
function () {
if (this.content.actions && this.content.actions.length > 0) {
this.showFooter = true;
this.primaryActions = this.content.actions.filter((/**
* @param {?} action
* @return {?}
*/
function (action) { return action.type === 'primary'; }));
this.secondaryActions = this.content.actions.filter((/**
* @param {?} action
* @return {?}
*/
function (action) { return action.type === 'secondary'; }));
}
};
/**
* @param {?} value
* @return {?}
*/
ModalContainer.prototype.isTemplate = /**
* @param {?} value
* @return {?}
*/
function (value) {
return value instanceof core.TemplateRef;
};
/**
* @param {?=} event
* @return {?}
*/
ModalContainer.prototype.onClose = /**
* @param {?=} event
* @return {?}
*/
function (event) {
this.dialogRef.close('cancel');
};
/**
* @param {?} tag
* @return {?}
*/
ModalContainer.prototype.onAction = /**
* @param {?} tag
* @return {?}
*/
function (tag) {
this.dialogRef.close(tag);
};
/**
* @param {?} event
* @return {?}
*/
ModalContainer.prototype.handleKeydown = /**
* @param {?} event
* @return {?}
*/
function (event) {
// tslint:disable-next-line: deprecation
if (event.keyCode === ESCAPE_KEY) {
this.dialogRef.close('cancel');
}
};
/**
* @param {?} event
* @return {?}
*/
ModalContainer.prototype.onAnimationStart = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.animationStateChanged.emit(event);
};
/**
* @param {?} event
* @return {?}
*/
ModalContainer.prototype.onAnimationDone = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.animationStateChanged.emit(event);
};
/**
* @return {?}
*/
ModalContainer.prototype.startExitAnimation = /**
* @return {?}
*/
function () {
this.animationState = 'leave';
};
/**
* @param {?} $event
* @return {?}
*/
ModalContainer.prototype.closeModal = /**
* @param {?} $event
* @return {?}
*/
function ($event) {
this.dialogRef.close($event);
};
ModalContainer.decorators = [
{ type: core.Component, args: [{
selector: 'suka-modal',
template: "\n <div class=\"modal\"\n [@slideContent]=\"animationState\"\n (@slideContent.start)=\"onAnimationStart($event)\"\n (@slideContent.done)=\"onAnimationDone($event)\"\n cdkTrapFocus\n >\n <div class=\"modal__header\">\n <h5>\n <ng-container *ngIf=\"!isTemplate(content.title)\">{{content.title}}</ng-container>\n <ng-template *ngIf=\"isTemplate(content.title)\" [ngTemplateOutlet]=\"content.title\"></ng-template>\n </h5>\n <button\n *ngIf=\"content.closeButton\"\n sukaButton=\"plain\"\n (click)=\"onClose($event)\"\n >\n <suka-icon icon=\"x\"></suka-icon>\n </button>\n </div>\n <div class=\"modal__content\">\n <ng-container *ngIf=\"!isTemplate(content.body)\">{{content.body}}</ng-container>\n <ng-container *ngIf=\"isTemplate(content.body)\">\n <ng-container\n *ngTemplateOutlet=\"content.body; context: {closeModal: closeModal.bind(this)}\"\n ></ng-container>\n </ng-container>\n </div>\n <div class=\"modal__footer\" *ngIf=\"showFooter\">\n <suka-button-group>\n <button\n *ngFor=\"let secondaryAction of secondaryActions\"\n sukaButton=\"plain\"\n (click)=\"onAction(secondaryAction.tag)\"\n >\n {{secondaryAction.label}}\n </button>\n <button\n *ngFor=\"let primaryAction of primaryActions\"\n sukaButton=\"primary\"\n (click)=\"onAction(primaryAction.tag)\"\n >\n {{primaryAction.label}}\n </button>\n </suka-button-group>\n </div>\n </div>\n ",
animations: [
animations.trigger('slideContent', [
animations.state('void', animations.style({ transform: 'translate3d(0, 20rem, 0)', opacity: 0 })),
animations.state('enter', animations.style({ transform: 'none', opacity: 1 })),
animations.state('leave', animations.style({ transform: 'translate3d(0, 20rem, 0)', opacity: 0 })),
animations.transition('* => *', animations.animate(MODAL_ANIMATION_TIMINGS)),
])
]
}] }
];
/** @nocollapse */
ModalContainer.ctorParameters = function () { return [
{ type: ModalRef },
{ type: undefined, decorators: [{ type: core.Inject, args: [MODAL_CONTENT_DATA,] }] }
]; };
ModalContainer.propDecorators = {
baseClass: [{ type: core.HostBinding, args: ['class.modal--default',] }],
handleKeydown: [{ type: core.HostListener, args: ['document:keydown', ['$event'],] }]
};
return ModalContainer;
}());
if (false) {
/** @type {?} */
ModalContainer.prototype.animationState;
/** @type {?} */
ModalContainer.prototype.animationStateChanged;
/** @type {?} */
ModalContainer.prototype.showFooter;
/** @type {?} */
ModalContainer.prototype.primaryActions;
/** @type {?} */
ModalContainer.prototype.secondaryActions;
/** @type {?} */
ModalContainer.prototype.baseClass;
/** @type {?} */
ModalContainer.prototype.dialogRef;
/** @type {?} */
ModalContainer.prototype.content;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function ModalContent() { }
if (false) {
/** @type {?|undefined} */
ModalContent.prototype.title;
/** @type {?|undefined} */
ModalContent.prototype.body;
/** @type {?|undefined} */
ModalContent.prototype.closeButton;
/** @type {?|undefined} */
ModalContent.prototype.actions;
}
/**
* @record
*/
function ModalConfig() { }
if (false) {
/** @type {?|undefined} */
ModalConfig.prototype.closeOnBackdropClick;
/** @type {?|undefined} */
ModalConfig.prototype.panelClass;
/** @type {?|undefined} */
ModalConfig.prototype.hasBackdrop;
/** @type {?|undefined} */
ModalConfig.prototype.backdropClass;
/** @type {?|undefined} */
ModalConfig.prototype.content;
}
/** @type {?} */
var DEFAULT_CONFIG = {
closeOnBackdropClick: true,
hasBackdrop: true,
backdropClass: 'backdrop--dark',
panelClass: 'modal--default',
content: null
};
var ModalService = /** @class */ (function () {
function ModalService(injector, overlay) {
this.injector = injector;
this.overlay = overlay;
}
/**
* @param {?=} config
* @return {?}
*/
ModalService.prototype.open = /**
* @param {?=} config
* @return {?}
*/
function (config) {
if (config === void 0) { config = {}; }
// Override default configuration
/** @type {?} */
var dialogConfig = __assign({}, DEFAULT_CONFIG, config);
// Returns an OverlayRef which is a PortalHost
/** @type {?} */
var overlayRef = this.createOverlay(dialogConfig);
// Instantiate remote control
/** @type {?} */
var modalRef = new ModalRef(overlayRef);
/** @type {?} */
var overlayComponent = this.attachModalContainer(overlayRef, dialogConfig, modalRef);
modalRef.componentInstance = overlayComponent;
if (dialogConfig.closeOnBackdropClick) {
overlayRef.backdropClick().subscribe((/**
* @param {?} _
* @return {?}
*/
function (_) { return modalRef.close('cancel'); }));
}
return modalRef;
};
/**
* @private
* @param {?} config
* @return {?}
*/
ModalService.prototype.createOverlay = /**
* @private
* @param {?} config
* @return {?}
*/
function (config) {
/** @type {?} */
var overlayConfig = this.getOverlayConfig(config);
return this.overlay.create(overlayConfig);
};
/**
* @private
* @param {?} overlayRef
* @param {?} config
* @param {?} modalRef
* @return {?}
*/
ModalService.prototype.attachModalContainer = /**
* @private
* @param {?} overlayRef
* @param {?} config
* @param {?} modalRef
* @return {?}
*/
function (overlayRef, config, modalRef) {
/** @type {?} */
var injector = this.createInjector(config, modalRef);
/** @type {?} */
var containerPortal = new portal.ComponentPortal(ModalContainer, null, injector);
/** @type {?} */
var containerRef = overlayRef.attach(containerPortal);
return containerRef.instance;
};
/**
* @private
* @param {?} config
* @param {?} modalRef
* @return {?}
*/
ModalService.prototype.createInjector = /**
* @private
* @param {?} config
* @param {?} modalRef
* @return {?}
*/
function (config, modalRef) {
/** @type {?} */
var injectionTokens = new WeakMap();
injectionTokens.set(ModalRef, modalRef);
injectionTokens.set(MODAL_CONTENT_DATA, config.content);
return new portal.PortalInjector(this.injector, injectionTokens);
};
/**
* @private
* @param {?} config
* @return {?}
*/
ModalService.prototype.getOverlayConfig = /**
* @private
* @param {?} config
* @return {?}
*/
function (config) {
/** @type {?} */
var positionStrategy = this.overlay.position()
.global()
.centerHorizontally()
.centerVertically();
/** @type {?} */
var overlayConfig = new overlay.OverlayConfig({
hasBackdrop: config.hasBackdrop,
backdropClass: config.backdropClass,
panelClass: config.panelClass,
scrollStrategy: this.overlay.scrollStrategies.noop(),
positionStrategy: positionStrategy
});
return overlayConfig;
};
ModalService.decorators = [
{ type: core.Injectable }
];
/** @nocollapse */
ModalService.ctorParameters = function () { return [
{ type: core.Injector },
{ type: overlay.Overlay }
]; };
return ModalService;
}());
if (false) {
/**
* @type {?}
* @private
*/
ModalService.prototype.injector;
/**
* @type {?}
* @private
*/
ModalService.prototype.overlay;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var PRIMARY_ACTION_TAG = 'primaryAction';
/** @type {?} */
var SECONDARY_ACTION_TAG = 'secondaryAction';
/**
* Modals are overlays that prevent users from interacting with the rest of the application until a specific action is taken. They can be disruptive because they require users to take an action before they can continue interacting with the rest of the application.
* It should be used thoughtfully and sparingly.
*/
var ModalDirective = /** @class */ (function () {
function ModalDirective(modalService) {
this.modalService = modalService;
/**
* Set to `true` to show a close button on the top right corner. Defaults to `false`.
*/
this.closeButton = false;
/**
* Sets to `false` to stop the modal from closing when the user clicks on the backdrop. Defaults to `true`.
*/
this.closeOnBackdropClick = true;
/**
* Callback when the modal closes.
*/
this.close = new core.EventEmitter();
/**
* Callback when the secondary action is triggered.
*/
this.secondaryAction = new core.EventEmitter();
/**
* Callback when the primary action is triggered.
*/
this.primaryAction = new core.EventEmitter();
}
/**
* @return {?}
*/
ModalDirective.prototype.onClick = /**
* @return {?}
*/
function () {
this.openModal();
};
/**
* Opens the modal.
*/
/**
* Opens the modal.
* @private
* @return {?}
*/
ModalDirective.prototype.openModal = /**
* Opens the modal.
* @private
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var modalConfig = {
closeOnBackdropClick: this.closeOnBackdropClick,
content: {
closeButton: this.closeButton,
title: this.title,
body: this.body,
}
};
if (this.primaryActionLabel || this.secondaryActionLabel) {
modalConfig.content.actions = [];
if (this.primaryActionLabel) {
modalConfig.content.actions.push({
label: this.primaryActionLabel,
type: 'primary',
tag: PRIMARY_ACTION_TAG
});
}
if (this.secondaryActionLabel) {
modalConfig.content.actions.push({
label: this.secondaryActionLabel,
type: 'secondary',
tag: SECONDARY_ACTION_TAG
});
}
}
/** @type {?} */
var modalRef = this.modalService.open(modalConfig);
modalRef.afterClosed().subscribe((/**
* @param {?} result
* @return {?}
*/
function (result) {
switch (result) {
case PRIMARY_ACTION_TAG:
if (_this.primaryAction.observers.length > 0) {
_this.primaryAction.emit(result);
}
break;
case SECONDARY_ACTION_TAG:
if (_this.secondaryAction.observers.length > 0) {
_this.secondaryAction.emit(result);
}
break;
default:
if (_this.close.observers.length > 0) {
_this.close.emit();
}
break;
}
}));
};
ModalDirective.decorators = [
{ type: core.Directive, args: [{
selector: '[sukaModal]'
},] }
];
/** @nocollapse */
ModalDirective.ctorParameters = function () { return [
{ type: ModalService }
]; };
ModalDirective.propDecorators = {
closeButton: [{ type: core.Input, args: ['modalCloseButton',] }],
title: [{ type: core.Input, args: ['modalTitle',] }],
body: [{ type: core.Input, args: ['modalBody',] }],
closeOnBackdropClick: [{ type: core.Input, args: ['modalCloseOnBackdropClick',] }],
close: [{ type: core.Output, args: ['modalClose',] }],
secondaryActionLabel: [{ type: core.Input, args: ['modalSecondaryActionLabel',] }],
secondaryAction: [{ type: core.Output, args: ['modalSecondaryAction',] }],
primaryActionLabel: [{ type: core.Input, args: ['modalPrimaryActionLabel',] }],
primaryAction: [{ type: core.Output, args: ['modalPrimaryAction',] }],
onClick: [{ type: core.HostListener, args: ['click',] }]
};
return ModalDirective;
}());
if (false) {
/**
* Set to `true` to show a close button on the top right corner. Defaults to `false`.
* @type {?}
*/
ModalDirective.prototype.closeButton;
/**
* Sets the modal title.
* @type {?}
*/
ModalDirective.prototype.title;
/**
* Sets the body of the modal.
* @type {?}
*/
ModalDirective.prototype.body;
/**
* Sets to `false` to stop the modal from closing when the user clicks on the backdrop. Defaults to `true`.
* @type {?}
*/
ModalDirective.prototype.closeOnBackdropClick;
/**
* Callback when the modal closes.
* @type {?}
*/
ModalDirective.prototype.close;
/**
* Sets the modal secondary action button label.
* @type {?}
*/
ModalDirective.prototype.secondaryActionLabel;
/**
* Callback when the secondary action is triggered.
* @type {?}
*/
ModalDirective.prototype.secondaryAction;
/**
* Sets the modal primary action button label.
* @type {?}
*/
ModalDirective.prototype.primaryActionLabel;
/**
* Callback when the primary action is triggered.
* @type {?}
*/
ModalDirective.prototype.primaryAction;
/**
* @type {?}
* @protected
*/
ModalDirective.prototype.modalService;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ModalModule = /** @class */ (function () {
function ModalModule() {
}
ModalModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
ModalContainer,
ModalDirective,
],
exports: [
ModalContainer,
ModalDirective,
],
imports: [
common.CommonModule,
overlay.OverlayModule,
ButtonModule,
IconModule,
],
entryComponents: [
ModalContainer
],
providers: [
ModalService,
],
},] }
];
return ModalModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var POPOVER_CONTENT_DATA = new core.InjectionToken('POPOVER_CONTENT_DATA');
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var PopoverRef = /** @class */ (function () {
function PopoverRef(overlayRef) {
this.overlayRef = overlayRef;
this._beforeClose = new rxjs.Subject();
this._afterClosed = new rxjs.Subject();
}
/**
* @param {?=} data
* @return {?}
*/
PopoverRef.prototype.close = /**
* @param {?=} data
* @return {?}
*/
function (data) {
var _this = this;
this._result = data;
// Listen for animation 'start' events
this.componentInstance.animationStateChanged.pipe(operators.filter((/**
* @param {?} event
* @return {?}
*/
function (event) { return event.phaseName === 'start'; })), operators.take(1)).subscribe((/**
* @return {?}
*/
function () {
_this._beforeClose.next(_this._result);
_this._beforeClose.complete();
_this.overlayRef.detachBackdrop();
}));
// Listen for animation 'done' events
this.componentInstance.animationStateChanged.pipe(operators.filter((/**
* @param {?} event
* @return {?}
*/
function (event) { return event.phaseName === 'done' && event.toState === 'leave'; })), operators.take(1)).subscribe((/**
* @return {?}
*/
function () {
_this._afterClosed.next(_this._result);
_this._afterClosed.complete();
_this.overlayRef.dispose();
// Make sure to also clear the reference to the
// component instance to avoid memory leaks
// tslint:disable-next-line: no-non-null-assertion
_this.componentInstance = (/** @type {?} */ (null));
}));
// Start exit animation
this.componentInstance.startExitAnimation();
};
/**
* @return {?}
*/
PopoverRef.prototype.afterClosed = /**
* @return {?}
*/
function () {
return this._afterClosed.asObservable();
};
/**
* @return {?}
*/
PopoverRef.prototype.beforeClose = /**
* @return {?}
*/
function () {
return this._beforeClose.asObservable();
};
return PopoverRef;
}());
if (false) {
/** @type {?} */
PopoverRef.prototype.componentInstance;
/**
* @type {?}
* @private
*/
PopoverRef.prototype._beforeClose;
/**
* @type {?}
* @private
*/
PopoverRef.prototype._afterClosed;
/**
* @type {?}
* @private
*/
PopoverRef.prototype._result;
/**
* @type {?}
* @private
*/
PopoverRef.prototype.overlayRef;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var ESCAPE_KEY$1 = 27;
/** @type {?} */
var POPOVER_ANIMATION_TIMINGS = '200ms cubic-bezier(0.64, 0, 0.35, 1)';
var PopoverContainer = /** @class */ (function () {
function PopoverContainer(popoverRef, content) {
this.popoverRef = popoverRef;
this.content = content;
this.animationState = 'enter';
this.animationStateChanged = new core.EventEmitter();
this.renderMethod = 'component';
this.position = 'bottom';
this.sectioned = false;
}
/**
* @return {?}
*/
PopoverContainer.prototype.ngOnInit = /**
* @return {?}
*/
function () {
if (typeof this.content.body === 'string') {
this.renderMethod = 'text';
}
if (this.content.body instanceof core.TemplateRef) {
this.renderMethod = 'template';
}
if (this.content.sectioned) {
this.sectioned = true;
}
};
/**
* @param {?} $event
* @return {?}
*/
PopoverContainer.prototype.closePopover = /**
* @param {?} $event
* @return {?}
*/
function ($event) {
this.popoverRef.close($event);
};
/**
* @param {?} event
* @return {?}
*/
PopoverContainer.prototype.handleKeydown = /**
* @param {?} event
* @return {?}
*/
function (event) {
// tslint:disable-next-line: deprecation
if (event.keyCode === ESCAPE_KEY$1) {
this.popoverRef.close();
}
};
/**
* @param {?} event
* @return {?}
*/
PopoverContainer.prototype.onAnimationStart = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.animationStateChanged.emit(event);
};
/**
* @param {?} event
* @return {?}
*/
PopoverContainer.prototype.onAnimationDone = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.animationStateChanged.emit(event);
};
/**
* @return {?}
*/
PopoverContainer.prototype.startExitAnimation = /**
* @return {?}
*/
function () {
this.animationState = 'leave';
};
PopoverContainer.decorators = [
{ type: core.Component, args: [{
selector: 'suka-popover',
template: "\n <div\n [@popover]=\"animationState\"\n (@popover.start)=\"onAnimationStart($event)\"\n (@popover.done)=\"onAnimationDone($event)\"\n cdkTrapFocus\n class=\"popover popover-{{position}}\"\n role=\"dialog\"\n >\n <suka-popover-section\n *ngIf=\"(sectioned !== false)\n else elseTpl\"\n >\n <ng-container *ngTemplateOutlet=\"elseTpl\"></ng-container>\n </suka-popover-section>\n </div>\n\n <ng-template #elseTpl>\n <ng-container [ngSwitch]=\"renderMethod\">\n <div *ngSwitchCase=\"'text'\" [innerHTML]=\"content.body\"></div>\n <ng-container *ngSwitchCase=\"'template'\">\n <ng-container *ngTemplateOutlet=\"content.body; context: {closePopover: closePopover.bind(this)}\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'component'\">\n <ng-container *ngComponentOutlet=\"content.body\"></ng-container>\n </ng-container>\n </ng-container>\n </ng-template>\n ",
animations: [
animations.trigger('popover', [
animations.state('void', animations.style({ transform: 'scale(.9)', opacity: 0 })),
animations.state('enter', animations.style({ transform: 'none', opacity: 1 })),
animations.state('leave', animations.style({ transform: 'scale(.8)', opacity: 0 })),
animations.transition('* => *', animations.animate(POPOVER_ANIMATION_TIMINGS)),
]),
]
}] }
];
/** @nocollapse */
PopoverContainer.ctorParameters = function () { return [
{ type: PopoverRef },
{ type: undefined, decorators: [{ type: core.Inject, args: [POPOVER_CONTENT_DATA,] }] }
]; };
PopoverContainer.propDecorators = {
position: [{ type: core.Input }],
sectioned: [{ type: core.Input }],
handleKeydown: [{ type: core.HostListener, args: ['document:keydown', ['$event'],] }]
};
return PopoverContainer;
}());
if (false) {
/** @type {?} */
PopoverContainer.prototype.animationState;
/** @type {?} */
PopoverContainer.prototype.animationStateChanged;
/** @type {?} */
PopoverContainer.prototype.renderMethod;
/** @type {?} */
PopoverContainer.prototype.position;
/** @type {?} */
PopoverContainer.prototype.sectioned;
/** @type {?} */
PopoverContainer.prototype.popoverRef;
/** @type {?} */
PopoverContainer.prototype.content;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var positions$1 = {
bottom: {
originY: 'bottom',
overlayY: 'top',
offsetY: 4,
},
top: {
originY: 'top',
overlayY: 'bottom',
offsetY: -4,
}
};
/** @type {?} */
var alignments = {
left: {
originX: 'start',
overlayX: 'start',
},
right: {
originX: 'end',
overlayX: 'end',
},
center: {
originX: 'center',
overlayX: 'center',
}
};
/**
* @record
*/
function PopoverConfig() { }
if (false) {
/** @type {?|undefined} */
PopoverConfig.prototype.content;
/** @type {?} */
PopoverConfig.prototype.position;
/** @type {?} */
PopoverConfig.prototype.alignment;
}
/** @type {?} */
var DEFAULT_CONFIG$1 = {
content: null,
position: 'bottom',
alignment: 'left',
};
var PopoverService = /** @class */ (function () {
function PopoverService(injector, overlay, overlayPositionBuilder) {
this.injector = injector;
this.overlay = overlay;
this.overlayPositionBuilder = overlayPositionBuilder;
}
/**
* @param {?=} config
* @param {?=} target
* @return {?}
*/
PopoverService.prototype.open = /**
* @param {?=} config
* @param {?=} target
* @return {?}
*/
function (config, target) {
if (config === void 0) { config = DEFAULT_CONFIG$1; }
// Override default configuration
/** @type {?} */
var popoverConfig = __assign({}, DEFAULT_CONFIG$1, config);
// Returns an OverlayRef which is a PortalHost
/** @type {?} */
var overlayRef = this.createOverlay(popoverConfig, target);
// Instantiate remote control
/** @type {?} */
var popoverRef = new PopoverRef(overlayRef);
/** @type {?} */
var overlayComponent = this.attachPopoverContainer(overlayRef, popoverConfig, popoverRef);
popoverRef.componentInstance = overlayComponent;
overlayRef.backdropClick().subscribe((/**
* @param {?} _
* @return {?}
*/
function (_) { return popoverRef.close(); }));
return popoverRef;
};
/**
* @private
* @param {?} config
* @param {?} target
* @return {?}
*/
PopoverService.prototype.createOverlay = /**
* @private
* @param {?} config
* @param {?} target
* @return {?}
*/
function (config, target) {
/** @type {?} */
var overlayConfig = this.getOverlayConfig(config, target);
return this.overlay.create(overlayConfig);
};
/**
* @private
* @param {?} overlayRef
* @param {?} config
* @param {?} popoverRef
* @return {?}
*/
PopoverService.prototype.attachPopoverContainer = /**
* @private
* @param {?} overlayRef
* @param {?} config
* @param {?} popoverRef
* @return {?}
*/
function (overlayRef, config, popoverRef) {
/** @type {?} */
var injector = this.createInjector(config, popoverRef);
/** @type {?} */
var containerPortal = new portal.ComponentPortal(PopoverContainer, null, injector);
/** @type {?} */
var containerRef = overlayRef.attach(containerPortal);
return containerRef.instance;
};
/**
* @private
* @param {?} config
* @param {?} popoverRef
* @return {?}
*/
PopoverService.prototype.createInjector = /**
* @private
* @param {?} config
* @param {?} popoverRef
* @return {?}
*/
function (config, popoverRef) {
/** @type {?} */
var injectionTokens = new WeakMap();
injectionTokens.set(PopoverRef, popoverRef);
injectionTokens.set(POPOVER_CONTENT_DATA, config.content);
return new portal.PortalInjector(this.injector, injectionTokens);
};
/**
* @private
* @param {?} config
* @param {?} target
* @return {?}
*/
PopoverService.prototype.getOverlayConfig = /**
* @private
* @param {?} config
* @param {?} target
* @return {?}
*/
function (config, target) {
/** @type {?} */
var positionStrategy = this.overlayPositionBuilder
.flexibleConnectedTo(target)
.withPositions([(/** @type {?} */ (__assign({}, positions$1[config.position], alignments[config.alignment])))]);
/** @type {?} */
var overlayConfig = new overlay.OverlayConfig({
hasBackdrop: true,
backdropClass: 'cdk-overlay-transparent-backdrop',
scrollStrategy: this.overlay.scrollStrategies.reposition(),
positionStrategy: positionStrategy
});
return overlayConfig;
};
PopoverService.decorators = [
{ type: core.Injectable }
];
/** @nocollapse */
PopoverService.ctorParameters = function () { return [
{ type: core.Injector },
{ type: overlay.Overlay },
{ type: overlay.OverlayPositionBuilder }
]; };
return PopoverService;
}());
if (false) {
/**
* @type {?}
* @private
*/
PopoverService.prototype.injector;
/**
* @type {?}
* @private
*/
PopoverService.prototype.overlay;
/**
* @type {?}
* @private
*/
PopoverService.prototype.overlayPositionBuilder;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var Popover = /** @class */ (function () {
function Popover(popoverService, elementRef) {
this.popoverService = popoverService;
this.elementRef = elementRef;
this.open = false;
/**
* The `Popover` body
*/
this.body = '';
/**
* Sets the vertical position of the popover. Defaults to `bottom`.
*/
this.position = 'bottom';
/**
* Sets the horizontal `Popover' alignment. Defaults to `left`.
*/
this.alignment = 'left';
/**
* Set to `true` to auto-wrap content in section
*/
this.sectioned = false;
}
/**
* @private
* @return {?}
*/
Popover.prototype.show = /**
* @private
* @return {?}
*/
function () {
var _this = this;
this.popoverRef = this.popoverService.open({
content: {
body: this.body,
sectioned: this.sectioned,
},
position: this.position,
alignment: this.alignment,
}, this.elementRef);
this.open = true;
this.popoverRef.afterClosed().subscribe((/**
* @param {?} result
* @return {?}
*/
function (result) {
_this.open = false;
}));
};
/**
* @return {?}
*/
Popover.prototype.onClick = /**
* @return {?}
*/
function () {
if (!this.open) {
this.show();
}
};
Popover.decorators = [
{ type: core.Directive, args: [{ selector: '[sukaPopover]' },] }
];
/** @nocollapse */
Popover.ctorParameters = function () { return [
{ type: PopoverService },
{ type: core.ElementRef }
]; };
Popover.propDecorators = {
body: [{ type: core.Input, args: ['sukaPopover',] }],
position: [{ type: core.Input, args: ['popoverPosition',] }],
alignment: [{ type: core.Input, args: ['popoverAlignment',] }],
sectioned: [{ type: core.Input, args: ['popoverSectioned',] }],
onClick: [{ type: core.HostListener, args: ['click',] }]
};
return Popover;
}());
if (false) {
/**
* @type {?}
* @private
*/
Popover.prototype.popoverRef;
/**
* @type {?}
* @private
*/
Popover.prototype.open;
/**
* The `Popover` body
* @type {?}
*/
Popover.prototype.body;
/**
* Sets the vertical position of the popover. Defaults to `bottom`.
* @type {?}
*/
Popover.prototype.position;
/**
* Sets the horizontal `Popover' alignment. Defaults to `left`.
* @type {?}
*/
Popover.prototype.alignment;
/**
* Set to `true` to auto-wrap content in section
* @type {?}
*/
Popover.prototype.sectioned;
/**
* @type {?}
* @protected
*/
Popover.prototype.popoverService;
/**
* @type {?}
* @private
*/
Popover.prototype.elementRef;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var PopoverSection = /** @class */ (function () {
function PopoverSection() {
this.baseClass = true;
}
PopoverSection.decorators = [
{ type: core.Component, args: [{
selector: 'suka-popover-section',
template: "\n <ng-content></ng-content>\n "
}] }
];
PopoverSection.propDecorators = {
baseClass: [{ type: core.HostBinding, args: ['class.popover__section',] }]
};
return PopoverSection;
}());
if (false) {
/** @type {?} */
PopoverSection.prototype.baseClass;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var PopoverActionList = /** @class */ (function () {
function PopoverActionList() {
this.baseClass = true;
}
PopoverActionList.decorators = [
{ type: core.Component, args: [{
selector: 'suka-popover-action-list',
template: "\n <ng-content></ng-content>\n "
}] }
];
PopoverActionList.propDecorators = {
baseClass: [{ type: core.HostBinding, args: ['class.popover__action-list',] }]
};
return PopoverActionList;
}());
if (false) {
/** @type {?} */
PopoverActionList.prototype.baseClass;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var PopoverActionItem = /** @class */ (function () {
function PopoverActionItem() {
this.baseClass = true;
this.destructive = false;
this.selected = new core.EventEmitter();
}
/**
* @param {?} $event
* @return {?}
*/
PopoverActionItem.prototype.onClick = /**
* @param {?} $event
* @return {?}
*/
function ($event) {
this.selected.emit($event);
};
PopoverActionItem.decorators = [
{ type: core.Component, args: [{
selector: 'suka-popover-action-item',
template: "\n <button type=\"button\" (click)=\"onClick($event)\">\n <div class=\"action-list__item__content\">\n <suka-icon *ngIf=\"icon\" [icon]=\"icon\" class=\"popover__icon\"></suka-icon>\n <ng-content></ng-content>\n </div>\n </button>\n "
}] }
];
PopoverActionItem.propDecorators = {
baseClass: [{ type: core.HostBinding, args: ['class.popover__action-list__item',] }],
destructive: [{ type: core.HostBinding, args: ['class.action-list__item--destructive',] }, { type: core.Input }],
icon: [{ type: core.Input }],
selected: [{ type: core.Output }]
};
return PopoverActionItem;
}());
if (false) {
/** @type {?} */
PopoverActionItem.prototype.baseClass;
/** @type {?} */
PopoverActionItem.prototype.destructive;
/** @type {?} */
PopoverActionItem.prototype.icon;
/** @type {?} */
PopoverActionItem.prototype.selected;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var PopoverModule = /** @class */ (function () {
function PopoverModule() {
}
PopoverModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
PopoverContainer,
PopoverSection,
PopoverActionList,
PopoverActionItem,
Popover,
],
exports: [
PopoverContainer,
PopoverSection,
PopoverActionList,
PopoverActionItem,
Popover,
],
imports: [
common.CommonModule,
overlay.OverlayModule,
IconModule,
],
entryComponents: [
PopoverContainer,
],
providers: [
PopoverService,
],
},] }
];
return PopoverModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var Stack = /** @class */ (function () {
function Stack() {
this.baseClass = true;
/**
* Make stack vertical (inverts axis of alignment and distribution inputs)
*/
this.vertical = false;
/**
* Spacing between elements
*/
this.spacing = 'default';
/**
* Horizontal alignment of elements (vertical alignment on vertical stack)
*/
this.distribution = 'leading';
/**
* Vertical alignment of elements (horizontal alignment on vertical stack)
*/
this.alignment = 'leading';
/**
* Wrap stack elements to additional rows as needed on small screens.
*/
this.wrap = true;
}
Stack.decorators = [
{ type: core.Component, args: [{
selector: 'suka-stack',
template: "\n <div\n class=\"\n stack__wrapper\n stack--spacing-{{spacing}}\n stack--distribution-{{distribution}}\n stack--alignment-{{alignment}}\n \"\n [ngClass]=\"{\n 'stack--vertical': vertical,\n 'stack--no-wrap': !wrap\n }\"\n >\n <ng-content></ng-content>\n </div>\n ",
encapsulation: core.ViewEncapsulation.None
}] }
];
Stack.propDecorators = {
baseClass: [{ type: core.HostBinding, args: ['class.stack',] }],
vertical: [{ type: core.HostBinding, args: ['class.stack--vertical',] }, { type: core.Input }],
spacing: [{ type: core.Input }],
distribution: [{ type: core.Input }],
alignment: [{ type: core.Input }],
wrap: [{ type: core.Input }]
};
return Stack;
}());
if (false) {
/** @type {?} */
Stack.prototype.baseClass;
/**
* Make stack vertical (inverts axis of alignment and distribution inputs)
* @type {?}
*/
Stack.prototype.vertical;
/**
* Spacing between elements
* @type {?}
*/
Stack.prototype.spacing;
/**
* Horizontal alignment of elements (vertical alignment on vertical stack)
* @type {?}
*/
Stack.prototype.distribution;
/**
* Vertical alignment of elements (horizontal alignment on vertical stack)
* @type {?}
*/
Stack.prototype.alignment;
/**
* Wrap stack elements to additional rows as needed on small screens.
* @type {?}
*/
Stack.prototype.wrap;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var StackItem = /** @class */ (function () {
function StackItem() {
this.baseClass = true;
/**
* Set to `true` to make the `StackItem` fill the remaining horizontal space on the stack.
*/
this.fill = false;
}
StackItem.decorators = [
{ type: core.Directive, args: [{
selector: '[sukaStackItem]'
},] }
];
StackItem.propDecorators = {
baseClass: [{ type: core.HostBinding, args: ['class.stack__item',] }],
fill: [{ type: core.HostBinding, args: ['class.stack__item--fill',] }, { type: core.Input }]
};
return StackItem;
}());
if (false) {
/** @type {?} */
StackItem.prototype.baseClass;
/**
* Set to `true` to make the `StackItem` fill the remaining horizontal space on the stack.
* @type {?}
*/
StackItem.prototype.fill;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var StackModule = /** @class */ (function () {
function StackModule() {
}
StackModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
Stack,
StackItem,
],
exports: [
Stack,
StackItem,
],
imports: [
common.CommonModule,
]
},] }
];
return StackModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var FormLayout = /** @class */ (function () {
function FormLayout() {
this.baseClass = true;
}
FormLayout.decorators = [
{ type: core.Component, args: [{
selector: 'suka-form-layout',
template: "\n <div class=\"form-layout__wrapper\">\n <ng-content></ng-content>\n </div>\n "
}] }
];
FormLayout.propDecorators = {
baseClass: [{ type: core.HostBinding, args: ['class.form-layout',] }]
};
return FormLayout;
}());
if (false) {
/** @type {?} */
FormLayout.prototype.baseClass;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var FormLayoutModule = /** @class */ (function () {
function FormLayoutModule() {
}
FormLayoutModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
FormLayout,
],
exports: [
FormLayout,
],
imports: [
common.CommonModule,
]
},] }
];
return FormLayoutModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Wrapper for the CdkTable with Suka design styles.
* @template T
*/
var SukaTable = /** @class */ (function (_super) {
__extends(SukaTable, _super);
function SukaTable() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.baseClass = true;
/**
* Set to `true` to make the table full width.
*/
_this.fullWidth = false;
/**
* Set to `true` to apply hover styles to the table rows.
*/
_this.hover = false;
/**
* Overrides the sticky CSS class set by the `CdkTable`.
*/
_this.stickyCssClass = 'suka-table-sticky';
return _this;
}
SukaTable.decorators = [
{ type: core.Component, args: [{
selector: 'suka-table, table[suka-table]',
exportAs: 'sukaTable',
template: table.CDK_TABLE_TEMPLATE,
providers: [{ provide: table.CdkTable, useExisting: SukaTable }],
encapsulation: core.ViewEncapsulation.None,
// See note on CdkTable for explanation on why this uses the default change detection strategy.
changeDetection: core.ChangeDetectionStrategy.Default
}] }
];
SukaTable.propDecorators = {
baseClass: [{ type: core.HostBinding, args: ['class.suka-table',] }],
fullWidth: [{ type: core.HostBinding, args: ['class.suka-table--full-width',] }, { type: core.Input }],
hover: [{ type: core.HostBinding, args: ['class.suka-table--hover',] }, { type: core.Input }]
};
return SukaTable;
}(table.CdkTable));
if (false) {
/** @type {?} */
SukaTable.prototype.baseClass;
/**
* Set to `true` to make the table full width.
* @type {?}
*/
SukaTable.prototype.fullWidth;
/**
* Set to `true` to apply hover styles to the table rows.
* @type {?}
*/
SukaTable.prototype.hover;
/**
* Overrides the sticky CSS class set by the `CdkTable`.
* @type {?}
* @protected
*/
SukaTable.prototype.stickyCssClass;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Cell definition for the suka-table.
* Captures the template of a column's data row cell as well as cell-specific properties.
*/
var SukaCellDef = /** @class */ (function (_super) {
__extends(SukaCellDef, _super);
function SukaCellDef() {
return _super !== null && _super.apply(this, arguments) || this;
}
SukaCellDef.decorators = [
{ type: core.Directive, args: [{
selector: '[sukaCellDef]',
providers: [{ provide: table.CdkCellDef, useExisting: SukaCellDef }]
},] }
];
return SukaCellDef;
}(table.CdkCellDef));
/**
* Header cell definition for the suka-table.
* Captures the template of a column's header cell and as well as cell-specific properties.
*/
var SukaHeaderCellDef = /** @class */ (function (_super) {
__extends(SukaHeaderCellDef, _super);
function SukaHeaderCellDef() {
return _super !== null && _super.apply(this, arguments) || this;
}
SukaHeaderCellDef.decorators = [
{ type: core.Directive, args: [{
selector: '[sukaHeaderCellDef]',
providers: [{ provide: table.CdkHeaderCellDef, useExisting: SukaHeaderCellDef }]
},] }
];
return SukaHeaderCellDef;
}(table.CdkHeaderCellDef));
/**
* Footer cell definition for the suka-table.
* Captures the template of a column's footer cell and as well as cell-specific properties.
*/
var SukaFooterCellDef = /** @class */ (function (_super) {
__extends(SukaFooterCellDef, _super);
function SukaFooterCellDef() {
return _super !== null && _super.apply(this, arguments) || this;
}
SukaFooterCellDef.decorators = [
{ type: core.Directive, args: [{
selector: '[sukaFooterCellDef]',
providers: [{ provide: table.CdkFooterCellDef, useExisting: SukaFooterCellDef }]
},] }
];
return SukaFooterCellDef;
}(table.CdkFooterCellDef));
/**
* Column definition for the suka-table.
* Defines a set of cells available for a table column.
*/
var SukaColumnDef = /** @class */ (function (_super) {
__extends(SukaColumnDef, _super);
function SukaColumnDef() {
return _super !== null && _super.apply(this, arguments) || this;
}
SukaColumnDef.decorators = [
{ type: core.Directive, args: [{
selector: '[sukaColumnDef]',
providers: [
{ provide: table.CdkColumnDef, useExisting: SukaColumnDef },
{ provide: 'SUKA_SORT_HEADER_COLUMN_DEF', useExisting: SukaColumnDef }
],
},] }
];
SukaColumnDef.propDecorators = {
name: [{ type: core.Input, args: ['sukaColumnDef',] }],
sticky: [{ type: core.Input }],
stickyEnd: [{ type: core.Input }]
};
return SukaColumnDef;
}(table.CdkColumnDef));
if (false) {
/**
* Unique name for this column.
* @type {?}
*/
SukaColumnDef.prototype.name;
/**
* Whether this column should be sticky positioned at the start of the row
* @type {?}
*/
SukaColumnDef.prototype.sticky;
/**
* Whether this column should be sticky positioned on the end of the row
* @type {?}
*/
SukaColumnDef.prototype.stickyEnd;
}
/**
* Header cell template container that adds the right classes and role.
*/
var SukaHeaderCell = /** @class */ (function (_super) {
__extends(SukaHeaderCell, _super);
function SukaHeaderCell(columnDef, elementRef) {
var _this = _super.call(this, columnDef, elementRef) || this;
elementRef.nativeElement.classList.add("suka-column-" + columnDef.cssClassFriendlyName);
return _this;
}
SukaHeaderCell.decorators = [
{ type: core.Directive, args: [{
selector: 'suka-header-cell, th[suka-header-cell]',
host: {
class: 'suka-header-cell',
role: 'columnheader',
},
},] }
];
/** @nocollapse */
SukaHeaderCell.ctorParameters = function () { return [
{ type: table.CdkColumnDef },
{ type: core.ElementRef }
]; };
return SukaHeaderCell;
}(table.CdkHeaderCell));
/**
* Footer cell template container that adds the right classes and role.
*/
var SukaFooterCell = /** @class */ (function (_super) {
__extends(SukaFooterCell, _super);
function SukaFooterCell(columnDef, elementRef) {
var _this = _super.call(this, columnDef, elementRef) || this;
elementRef.nativeElement.classList.add("suka-column-" + columnDef.cssClassFriendlyName);
return _this;
}
SukaFooterCell.decorators = [
{ type: core.Directive, args: [{
selector: 'suka-footer-cell, td[suka-footer-cell]',
host: {
class: 'suka-footer-cell',
role: 'gridcell',
},
},] }
];
/** @nocollapse */
SukaFooterCell.ctorParameters = function () { return [
{ type: table.CdkColumnDef },
{ type: core.ElementRef }
]; };
return SukaFooterCell;
}(table.CdkFooterCell));
/**
* Cell template container that adds the right classes and role.
*/
var SukaCell = /** @class */ (function (_super) {
__extends(SukaCell, _super);
function SukaCell(columnDef, elementRef) {
var _this = _super.call(this, columnDef, elementRef) || this;
elementRef.nativeElement.classList.add("suka-column-" + columnDef.cssClassFriendlyName);
return _this;
}
SukaCell.decorators = [
{ type: core.Directive, args: [{
selector: 'suka-cell, td[suka-cell]',
host: {
class: 'suka-cell',
role: 'gridcell',
},
},] }
];
/** @nocollapse */
SukaCell.ctorParameters = function () { return [
{ type: table.CdkColumnDef },
{ type: core.ElementRef }
]; };
return SukaCell;
}(table.CdkCell));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Header row definition for the suka-table.
* Captures the header row's template and other header properties such as the columns to display.
*/
var SukaHeaderRowDef = /** @class */ (function (_super) {
__extends(SukaHeaderRowDef, _super);
function SukaHeaderRowDef() {
return _super !== null && _super.apply(this, arguments) || this;
}
SukaHeaderRowDef.decorators = [
{ type: core.Directive, args: [{
selector: '[sukaHeaderRowDef]',
providers: [{ provide: table.CdkHeaderRowDef, useExisting: SukaHeaderRowDef }],
inputs: ['columns: sukaHeaderRowDef', 'sticky: sukaHeaderRowDefSticky'],
},] }
];
return SukaHeaderRowDef;
}(table.CdkHeaderRowDef));
/**
* Footer row definition for the suka-table.
* Captures the footer row's template and other footer properties such as the columns to display.
*/
var SukaFooterRowDef = /** @class */ (function (_super) {
__extends(SukaFooterRowDef, _super);
function SukaFooterRowDef() {
return _super !== null && _super.apply(this, arguments) || this;
}
SukaFooterRowDef.decorators = [
{ type: core.Directive, args: [{
selector: '[sukaFooterRowDef]',
providers: [{ provide: table.CdkFooterRowDef, useExisting: SukaFooterRowDef }],
inputs: ['columns: sukaFooterRowDef', 'sticky: sukaFooterRowDefSticky'],
},] }
];
return SukaFooterRowDef;
}(table.CdkFooterRowDef));
/**
* Data row definition for the suka-table.
* Captures the data row's template and other properties such as the columns to display and
* a when predicate that describes when this row should be used.
* @template T
*/
var SukaRowDef = /** @class */ (function (_super) {
__extends(SukaRowDef, _super);
function SukaRowDef() {
return _super !== null && _super.apply(this, arguments) || this;
}
SukaRowDef.decorators = [
{ type: core.Directive, args: [{
selector: '[sukaRowDef]',
providers: [{ provide: table.CdkRowDef, useExisting: SukaRowDef }],
inputs: ['columns: sukaRowDefColumns', 'when: sukaRowDefWhen'],
},] }
];
return SukaRowDef;
}(table.CdkRowDef));
/**
* Footer template container that contains the cell outlet. Adds the right class and role.
*/
var SukaHeaderRow = /** @class */ (function (_super) {
__extends(SukaHeaderRow, _super);
function SukaHeaderRow() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.baseClass = true;
_this.role = 'row';
return _this;
}
SukaHeaderRow.decorators = [
{ type: core.Component, args: [{
selector: 'suka-header-row, tr[suka-header-row]',
template: table.CDK_ROW_TEMPLATE,
// See note on CdkTable for explanation on why this uses the default change detection strategy.
// tslint:disable-next-line:validate-decorators
changeDetection: core.ChangeDetectionStrategy.Default,
encapsulation: core.ViewEncapsulation.None,
exportAs: 'sukaHeaderRow',
providers: [{ provide: table.CdkHeaderRow, useExisting: SukaHeaderRow }]
}] }
];
SukaHeaderRow.propDecorators = {
baseClass: [{ type: core.HostBinding, args: ['class.suka-header-row',] }],
role: [{ type: core.HostBinding, args: ['attr.role',] }]
};
return SukaHeaderRow;
}(table.CdkHeaderRow));
if (false) {
/** @type {?} */
SukaHeaderRow.prototype.baseClass;
/** @type {?} */
SukaHeaderRow.prototype.role;
}
/**
* Footer template container that contains the cell outlet. Adds the right class and role.
*/
var SukaFooterRow = /** @class */ (function (_super) {
__extends(SukaFooterRow, _super);
function SukaFooterRow() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.baseClass = true;
_this.role = 'row';
return _this;
}
SukaFooterRow.decorators = [
{ type: core.Component, args: [{
selector: 'suka-footer-row, tr[suka-footer-row]',
template: table.CDK_ROW_TEMPLATE,
// See note on CdkTable for explanation on why this uses the default change detection strategy.
// tslint:disable-next-line:validate-decorators
changeDetection: core.ChangeDetectionStrategy.Default,
encapsulation: core.ViewEncapsulation.None,
exportAs: 'sukaFooterRow',
providers: [{ provide: table.CdkFooterRow, useExisting: SukaFooterRow }]
}] }
];
SukaFooterRow.propDecorators = {
baseClass: [{ type: core.HostBinding, args: ['class.suka-footer-row',] }],
role: [{ type: core.HostBinding, args: ['attr.role',] }]
};
return SukaFooterRow;
}(table.CdkFooterRow));
if (false) {
/** @type {?} */
SukaFooterRow.prototype.baseClass;
/** @type {?} */
SukaFooterRow.prototype.role;
}
/**
* Data row template container that contains the cell outlet. Adds the right class and role.
*/
var SukaRow = /** @class */ (function (_super) {
__extends(SukaRow, _super);
function SukaRow() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.baseClass = true;
_this.role = 'row';
return _this;
}
SukaRow.decorators = [
{ type: core.Component, args: [{
selector: 'suka-row, tr[suka-row]',
template: table.CDK_ROW_TEMPLATE,
// See note on CdkTable for explanation on why this uses the default change detection strategy.
// tslint:disable-next-line:validate-decorators
changeDetection: core.ChangeDetectionStrategy.Default,
encapsulation: core.ViewEncapsulation.None,
exportAs: 'sukaRow',
providers: [{ provide: table.CdkRow, useExisting: SukaRow }]
}] }
];
SukaRow.propDecorators = {
baseClass: [{ type: core.HostBinding, args: ['class.suka-row',] }],
role: [{ type: core.HostBinding, args: ['attr.role',] }]
};
return SukaRow;
}(table.CdkRow));
if (false) {
/** @type {?} */
SukaRow.prototype.baseClass;
/** @type {?} */
SukaRow.prototype.role;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @param {?} pageNumber
* @param {?} currentPage
* @param {?} spacing
* @return {?}
*/
function buildPaginationArray(pageNumber, currentPage, spacing) {
/** @type {?} */
var pageArray = [];
/** @type {?} */
var startingPosition = Math.max(currentPage - spacing, 1);
/** @type {?} */
var endPosition = Math.min(currentPage + spacing, pageNumber);
for (var i = startingPosition; i <= endPosition; i++) {
pageArray.push(i);
}
if (currentPage - spacing > 1) {
appendFirstPages(pageArray);
}
if (currentPage + spacing < pageNumber) {
appendLastPages(pageArray, pageNumber);
}
return pageArray;
}
/**
* @param {?} array
* @return {?}
*/
function appendFirstPages(array) {
/** @type {?} */
var initialValue = array[0];
if (initialValue - 1 > 1) {
array.unshift('...');
}
array.unshift(1);
}
/**
* @param {?} array
* @param {?} lastPageNumber
* @return {?}
*/
function appendLastPages(array, lastPageNumber) {
if (array[array.length - 1] + 1 < lastPageNumber) {
array.push('...');
}
array.push(lastPageNumber);
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* The default page size if there is no page size and there are no provided page size options.
* @type {?}
*/
var DEFAULT_PAGE_SIZE = 50;
/**
* Change event object that is emitted when the user selects a
* different page size or navigates to another page.
*/
var /**
* Change event object that is emitted when the user selects a
* different page size or navigates to another page.
*/
PageEvent = /** @class */ (function () {
function PageEvent() {
}
return PageEvent;
}());
if (false) {
/**
* The current page index.
* @type {?}
*/
PageEvent.prototype.pageIndex;
/**
* Index of the page that was selected previously.
* @type {?}
*/
PageEvent.prototype.previousPageIndex;
/**
* The current page size
* @type {?}
*/
PageEvent.prototype.pageSize;
/**
* The current total number of items being paged
* @type {?}
*/
PageEvent.prototype.length;
}
/**
* Component to provide navigation between paged information. Displays the size of the current
* page, user-selectable options to change that size, what items are being shown, and
* navigational button to go to the previous or next page.
*/
var Pagination = /** @class */ (function () {
function Pagination(_changeDetectorRef) {
this._changeDetectorRef = _changeDetectorRef;
this.initialized = new rxjs.Subject();
/**
* Sets to `true` to disable pagination.
*/
this.disabled = false;
this.baseClass = true;
this._pageIndex = 0;
this._length = 0;
this._pageSizeOptions = [];
this._hidePageSize = false;
this._showFirstLastButtons = false;
/**
* Event emitted when the pagination changes the page size or page index.
*/
this.page = new core.EventEmitter();
/**
* Displayed pages array
*/
this._pagesArray = [];
/**
* Calculate the page range
*/
this.getRangeLabel = (/**
* @param {?} page
* @param {?} pageSize
* @param {?} length
* @return {?}
*/
function (page, pageSize, length) {
if (length === 0 || pageSize === 0) {
return "0 de " + length;
}
length = Math.max(length, 0);
/** @type {?} */
var startIndex = page * pageSize;
// If the start index exceeds the list length, do not try and fix the end index to the end.
/** @type {?} */
var endIndex = startIndex < length ?
Math.min(startIndex + pageSize, length) :
startIndex + pageSize;
return startIndex + 1 + " \u2013 " + endIndex + " de " + length;
});
}
Object.defineProperty(Pagination.prototype, "pageIndex", {
/** The zero-based page index of the displayed list of items. Defaulted to 0. */
get: /**
* The zero-based page index of the displayed list of items. Defaulted to 0.
* @return {?}
*/
function () { return this._pageIndex; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._pageIndex = Math.max(coercion.coerceNumberProperty(value), 0);
this._changeDetectorRef.markForCheck();
},
enumerable: true,
configurable: true
});
Object.defineProperty(Pagination.prototype, "length", {
/** The length of the total number of items that are being paginated. Defaulted to 0. */
get: /**
* The length of the total number of items that are being paginated. Defaulted to 0.
* @return {?}
*/
function () { return this._length; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._length = coercion.coerceNumberProperty(value);
this._changeDetectorRef.markForCheck();
this._updateDisplayedPagesArray();
},
enumerable: true,
configurable: true
});
Object.defineProperty(Pagination.prototype, "pageSize", {
/** Number of items to display on a page. By default set to 20. */
get: /**
* Number of items to display on a page. By default set to 20.
* @return {?}
*/
function () { return this._pageSize; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._pageSize = Math.max(coercion.coerceNumberProperty(value), 0);
this._updateDisplayedPageSizeOptions();
this._updateDisplayedPagesArray();
},
enumerable: true,
configurable: true
});
Object.defineProperty(Pagination.prototype, "pageSizeOptions", {
/** The set of provided page size options to display to the user. */
get: /**
* The set of provided page size options to display to the user.
* @return {?}
*/
function () { return this._pageSizeOptions; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._pageSizeOptions = (value || []).map((/**
* @param {?} p
* @return {?}
*/
function (p) { return coercion.coerceNumberProperty(p); }));
this._updateDisplayedPageSizeOptions();
},
enumerable: true,
configurable: true
});
Object.defineProperty(Pagination.prototype, "hidePageSize", {
/** Whether to hide the page size selection UI from the user. */
get: /**
* Whether to hide the page size selection UI from the user.
* @return {?}
*/
function () { return this._hidePageSize; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._hidePageSize = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(Pagination.prototype, "showFirstLastButtons", {
/** Whether to show the first/last buttons UI to the user. */
get: /**
* Whether to show the first/last buttons UI to the user.
* @return {?}
*/
function () { return this._showFirstLastButtons; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._showFirstLastButtons = coercion.coerceBooleanProperty(value);
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
Pagination.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this._initialized = true;
this.initialized.next(true);
this._updateDisplayedPageSizeOptions();
};
/** Advances to the next page if it exists. */
/**
* Advances to the next page if it exists.
* @return {?}
*/
Pagination.prototype.nextPage = /**
* Advances to the next page if it exists.
* @return {?}
*/
function () {
if (!this.hasNextPage()) {
return;
}
/** @type {?} */
var previousPageIndex = this.pageIndex;
this.pageIndex++;
this._updateDisplayedPagesArray();
this._emitPageEvent(previousPageIndex);
};
/** Move back to the previous page if it exists. */
/**
* Move back to the previous page if it exists.
* @return {?}
*/
Pagination.prototype.previousPage = /**
* Move back to the previous page if it exists.
* @return {?}
*/
function () {
if (!this.hasPreviousPage()) {
return;
}
/** @type {?} */
var previousPageIndex = this.pageIndex;
this.pageIndex--;
this._updateDisplayedPagesArray();
this._emitPageEvent(previousPageIndex);
};
/** Move to the first page if not already there. */
/**
* Move to the first page if not already there.
* @return {?}
*/
Pagination.prototype.firstPage = /**
* Move to the first page if not already there.
* @return {?}
*/
function () {
// hasPreviousPage being false implies at the start
if (!this.hasPreviousPage()) {
return;
}
/** @type {?} */
var previousPageIndex = this.pageIndex;
this.pageIndex = 0;
this._updateDisplayedPagesArray();
this._emitPageEvent(previousPageIndex);
};
/** Move to the last page if not already there. */
/**
* Move to the last page if not already there.
* @return {?}
*/
Pagination.prototype.lastPage = /**
* Move to the last page if not already there.
* @return {?}
*/
function () {
// hasNextPage being false implies at the end
if (!this.hasNextPage()) {
return;
}
/** @type {?} */
var previousPageIndex = this.pageIndex;
this.pageIndex = this.getNumberOfPages() - 1;
this._updateDisplayedPagesArray();
this._emitPageEvent(previousPageIndex);
};
/**
* Move to an specific page.
*/
/**
* Move to an specific page.
* @param {?} page
* @return {?}
*/
Pagination.prototype.goToPage = /**
* Move to an specific page.
* @param {?} page
* @return {?}
*/
function (page) {
/** @type {?} */
var previousPageIndex = this.pageIndex;
this.pageIndex = page - 1;
this._updateDisplayedPagesArray();
this._emitPageEvent(previousPageIndex);
};
/** Whether there is a previous page. */
/**
* Whether there is a previous page.
* @return {?}
*/
Pagination.prototype.hasPreviousPage = /**
* Whether there is a previous page.
* @return {?}
*/
function () {
return this.pageIndex >= 1 && this.pageSize !== 0;
};
/** Whether there is a next page. */
/**
* Whether there is a next page.
* @return {?}
*/
Pagination.prototype.hasNextPage = /**
* Whether there is a next page.
* @return {?}
*/
function () {
/** @type {?} */
var maxPageIndex = this.getNumberOfPages() - 1;
return this.pageIndex < maxPageIndex && this.pageSize !== 0;
};
/** Calculate the number of pages */
/**
* Calculate the number of pages
* @return {?}
*/
Pagination.prototype.getNumberOfPages = /**
* Calculate the number of pages
* @return {?}
*/
function () {
if (!this.pageSize) {
return 0;
}
return Math.ceil(this.length / this.pageSize);
};
/**
* Changes the page size so that the first item displayed on the page will still be
* displayed using the new page size.
*
* For example, if the page size is 10 and on the second page (items indexed 10-19) then
* switching so that the page size is 5 will set the third page as the current page so
* that the 10th item will still be displayed.
*/
/**
* Changes the page size so that the first item displayed on the page will still be
* displayed using the new page size.
*
* For example, if the page size is 10 and on the second page (items indexed 10-19) then
* switching so that the page size is 5 will set the third page as the current page so
* that the 10th item will still be displayed.
* @param {?} pageSize
* @return {?}
*/
Pagination.prototype._changePageSize = /**
* Changes the page size so that the first item displayed on the page will still be
* displayed using the new page size.
*
* For example, if the page size is 10 and on the second page (items indexed 10-19) then
* switching so that the page size is 5 will set the third page as the current page so
* that the 10th item will still be displayed.
* @param {?} pageSize
* @return {?}
*/
function (pageSize) {
// Current page needs to be updated to reflect the new page size. Navigate to the page
// containing the previous page's first item.
/** @type {?} */
var startIndex = this.pageIndex * this.pageSize;
/** @type {?} */
var previousPageIndex = this.pageIndex;
this.pageIndex = Math.floor(startIndex / pageSize) || 0;
this.pageSize = pageSize;
this._emitPageEvent(previousPageIndex);
};
/** Checks whether the buttons for going forwards should be disabled. */
/**
* Checks whether the buttons for going forwards should be disabled.
* @return {?}
*/
Pagination.prototype._nextButtonsDisabled = /**
* Checks whether the buttons for going forwards should be disabled.
* @return {?}
*/
function () {
return this.disabled || !this.hasNextPage();
};
/** Checks whether the buttons for going backwards should be disabled. */
/**
* Checks whether the buttons for going backwards should be disabled.
* @return {?}
*/
Pagination.prototype._previousButtonsDisabled = /**
* Checks whether the buttons for going backwards should be disabled.
* @return {?}
*/
function () {
return this.disabled || !this.hasPreviousPage();
};
/**
* Updates the list of page size options to display to the user. Includes making sure that
* the page size is an option and that the list is sorted.
*/
/**
* Updates the list of page size options to display to the user. Includes making sure that
* the page size is an option and that the list is sorted.
* @private
* @return {?}
*/
Pagination.prototype._updateDisplayedPageSizeOptions = /**
* Updates the list of page size options to display to the user. Includes making sure that
* the page size is an option and that the list is sorted.
* @private
* @return {?}
*/
function () {
if (!this._initialized) {
return;
}
// If no page size is provided, use the first page size option or the default page size.
if (!this.pageSize) {
this._pageSize = this.pageSizeOptions.length !== 0 ?
this.pageSizeOptions[0] :
DEFAULT_PAGE_SIZE;
}
this._displayedPageSizeOptions = this.pageSizeOptions.slice();
if (this._displayedPageSizeOptions.indexOf(this.pageSize) === -1) {
this._displayedPageSizeOptions.push(this.pageSize);
}
// Sort the numbers using a number-specific sort function.
this._displayedPageSizeOptions.sort((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
function (a, b) { return a - b; }));
this._changeDetectorRef.markForCheck();
};
/**
* @private
* @return {?}
*/
Pagination.prototype._updateDisplayedPagesArray = /**
* @private
* @return {?}
*/
function () {
this._pagesArray = buildPaginationArray(this.getNumberOfPages(), this.pageIndex + 1, 3);
};
/** Emits an event notifying that a change of the pagination's properties has been triggered. */
/**
* Emits an event notifying that a change of the pagination's properties has been triggered.
* @private
* @param {?} previousPageIndex
* @return {?}
*/
Pagination.prototype._emitPageEvent = /**
* Emits an event notifying that a change of the pagination's properties has been triggered.
* @private
* @param {?} previousPageIndex
* @return {?}
*/
function (previousPageIndex) {
this.page.emit({
previousPageIndex: previousPageIndex,
pageIndex: this.pageIndex,
pageSize: this.pageSize,
length: this.length
});
};
Pagination.decorators = [
{ type: core.Component, args: [{
selector: 'suka-pagination',
exportAs: 'sukaPagination',
template: "\n <div class=\"suka-pagination-outer-container\">\n <div class=\"suka-pagination-container\">\n <div class=\"suka-pagination-results\">\n Mostrando <span class=\"suka-pagination-result\">{{getRangeLabel(pageIndex, pageSize, length)}}</span>\n </div>\n\n <div class=\"suka-pagination-actions\">\n <button\n type=\"button\" class=\"suka-pagination-navigation-first\"\n (click)=\"firstPage()\"\n [disabled]=\"_previousButtonsDisabled()\"\n *ngIf=\"showFirstLastButtons\"\n sukaButton=\"plain\"\n size=\"sm\"\n >\n <suka-icon icon=\"chevrons-left\" class=\"suka-pagination-icon\"></suka-icon>\n </button>\n <button\n type=\"button\" class=\"suka-pagination-navigation-previous\"\n (click)=\"previousPage()\"\n [disabled]=\"_previousButtonsDisabled()\"\n sukaButton=\"plain\"\n size=\"sm\"\n >\n <suka-icon icon=\"chevron-left\" class=\"suka-pagination-icon\"></suka-icon>\n <span class=\"d-none d-sm-inline-block\">Anterior</span>\n </button>\n <div class=\"suka-pagination-actions__numbers\">\n <button\n *ngFor=\"let pageNumber of _pagesArray\"\n type=\"button\"\n class=\"suka-pagination-navigation-page\"\n (click)=\"goToPage(pageNumber)\"\n [disabled]=\"pageNumber === '...'\"\n sukaButton=\"plain\"\n size=\"sm\"\n [ngClass]=\"{\n 'suka-pagination-navigation-page--selected': pageNumber === pageIndex + 1\n }\"\n >\n {{pageNumber}}\n </button>\n </div>\n <button\n type=\"button\"\n class=\"suka-pagination-navigation-next\"\n (click)=\"nextPage()\"\n [disabled]=\"_nextButtonsDisabled()\"\n sukaButton=\"plain\"\n size=\"sm\"\n >\n <span class=\"d-none d-sm-inline-block\">Siguiente</span>\n <suka-icon icon=\"chevron-right\" class=\"suka-pagination-icon\"></suka-icon>\n </button>\n <button\n type=\"button\" class=\"suka-pagination-navigation-last\"\n (click)=\"lastPage()\"\n [disabled]=\"_nextButtonsDisabled()\"\n *ngIf=\"showFirstLastButtons\"\n sukaButton=\"plain\"\n size=\"sm\"\n >\n <suka-icon icon=\"chevrons-right\" class=\"suka-pagination-icon\"></suka-icon>\n </button>\n </div>\n </div>\n </div>\n\n ",
changeDetection: core.ChangeDetectionStrategy.OnPush,
encapsulation: core.ViewEncapsulation.None
}] }
];
/** @nocollapse */
Pagination.ctorParameters = function () { return [
{ type: core.ChangeDetectorRef }
]; };
Pagination.propDecorators = {
disabled: [{ type: core.Input }],
baseClass: [{ type: core.HostBinding, args: ['class.suka-pagination',] }],
pageIndex: [{ type: core.Input }],
length: [{ type: core.Input }],
pageSize: [{ type: core.Input }],
pageSizeOptions: [{ type: core.Input }],
hidePageSize: [{ type: core.Input }],
showFirstLastButtons: [{ type: core.Input }],
page: [{ type: core.Output }]
};
return Pagination;
}());
if (false) {
/**
* @type {?}
* @private
*/
Pagination.prototype._initialized;
/** @type {?} */
Pagination.prototype.initialized;
/**
* Sets to `true` to disable pagination.
* @type {?}
*/
Pagination.prototype.disabled;
/** @type {?} */
Pagination.prototype.baseClass;
/**
* @type {?}
* @private
*/
Pagination.prototype._pageIndex;
/**
* @type {?}
* @private
*/
Pagination.prototype._length;
/**
* @type {?}
* @private
*/
Pagination.prototype._pageSize;
/**
* @type {?}
* @private
*/
Pagination.prototype._pageSizeOptions;
/**
* @type {?}
* @private
*/
Pagination.prototype._hidePageSize;
/**
* @type {?}
* @private
*/
Pagination.prototype._showFirstLastButtons;
/**
* Event emitted when the pagination changes the page size or page index.
* @type {?}
*/
Pagination.prototype.page;
/**
* Displayed set of page size options. Will be sorted and include current page size.
* @type {?}
*/
Pagination.prototype._displayedPageSizeOptions;
/**
* Displayed pages array
* @type {?}
*/
Pagination.prototype._pagesArray;
/**
* Calculate the page range
* @type {?}
*/
Pagination.prototype.getRangeLabel;
/**
* @type {?}
* @private
*/
Pagination.prototype._changeDetectorRef;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var PaginationModule = /** @class */ (function () {
function PaginationModule() {
}
PaginationModule.decorators = [
{ type: core.NgModule, args: [{
imports: [
common.CommonModule,
ButtonModule,
IconModule,
],
exports: [
Pagination
],
declarations: [
Pagination
],
},] }
];
return PaginationModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Corresponds to `Number.MAX_SAFE_INTEGER`. Moved out into a variable here due to
* flaky browser support and the value not being defined in Closure's typings.
* @type {?}
*/
var MAX_SAFE_INTEGER = 9007199254740991;
/**
* Data source that accepts a client-side data array and includes native support of filtering,
* sorting (using SukaSort), and pagination (using SukaPaginator).
*
* Allows for sort customization by overriding sortingDataAccessor, which defines how data
* properties are accessed. Also allows for filter customization by overriding filterTermAccessor,
* which defines how row data is converted to a string for filter matching.
*
* **Note:** This class is meant to be a simple data source to help you get started. As such
* it isn't equipped to handle some more advanced cases like robust i18n support or server-side
* interactions. If your app needs to support more advanced use cases, consider implementing your
* own `DataSource`.
* @template T
*/
var /**
* Data source that accepts a client-side data array and includes native support of filtering,
* sorting (using SukaSort), and pagination (using SukaPaginator).
*
* Allows for sort customization by overriding sortingDataAccessor, which defines how data
* properties are accessed. Also allows for filter customization by overriding filterTermAccessor,
* which defines how row data is converted to a string for filter matching.
*
* **Note:** This class is meant to be a simple data source to help you get started. As such
* it isn't equipped to handle some more advanced cases like robust i18n support or server-side
* interactions. If your app needs to support more advanced use cases, consider implementing your
* own `DataSource`.
* @template T
*/
SukaTableDataSource = /** @class */ (function (_super) {
__extends(SukaTableDataSource, _super);
function SukaTableDataSource(initialData) {
if (initialData === void 0) { initialData = []; }
var _this = _super.call(this) || this;
/**
* Stream emitting render data to the table (depends on ordered data changes).
*/
_this._renderData = new rxjs.BehaviorSubject([]);
/**
* Stream that emits when a new filter string is set on the data source.
*/
_this._filter = new rxjs.BehaviorSubject('');
/**
* Used to react to internal changes of the paginator that are made by the data source itself.
*/
_this._internalPageChanges = new rxjs.Subject();
/**
* Subscription to the changes that should trigger an update to the table's rendered rows, such
* as filtering, sorting, pagination, or base data changes.
*/
_this._renderChangesSubscription = rxjs.Subscription.EMPTY;
/**
* Data accessor function that is used for accessing data properties for sorting through
* the default sortData function.
* This default function assumes that the sort header IDs (which defaults to the column name)
* matches the data's properties (e.g. column Xyz represents data['Xyz']).
* May be set to a custom function for different behavior.
* @param data Data object that is being accessed.
* @param sortHeaderId The name of the column that represents the data.
*/
// sortingDataAccessor: ((data: T, sortHeaderId: string) => string | number) =
// (data: T, sortHeaderId: string): string | number => {
// const value = (data as { [key: string]: any })[sortHeaderId];
// if (_isNumberValue(value)) {
// const numberValue = Number(value);
// // Numbers beyond `MAX_SAFE_INTEGER` can't be compared reliably so we
// // leave them as strings. For more info: https://goo.gl/y5vbSg
// return numberValue < MAX_SAFE_INTEGER ? numberValue : value;
// }
// return value;
// }
/**
* Gets a sorted copy of the data array based on the state of the SukaSort. Called
* after changes are made to the filtered data or when sort changes are emitted from SukaSort.
* By default, the function retrieves the active sort and its direction and compares data
* by retrieving data using the sortingDataAccessor. May be overridden for a custom implementation
* of data ordering.
* @param data The array of data that should be sorted.
* @param sort The connected SukaSort that holds the current sort state.
*/
// sortData: ((data: T[], sort: SukaSort) => T[]) = (data: T[], sort: SukaSort): T[] => {
// const active = sort.active;
// const direction = sort.direction;
// if (!active || direction == '') { return data; }
// return data.sort((a, b) => {
// let valueA = this.sortingDataAccessor(a, active);
// let valueB = this.sortingDataAccessor(b, active);
// // If both valueA and valueB exist (truthy), then compare the two. Otherwise, check if
// // one value exists while the other doesn't. In this case, existing value should come last.
// // This avoids inconsistent results when comparing values to undefined/null.
// // If neither value exists, return 0 (equal).
// let comparatorResult = 0;
// if (valueA != null && valueB != null) {
// // Check if one value is greater than the other; if equal, comparatorResult should remain 0.
// if (valueA > valueB) {
// comparatorResult = 1;
// } else if (valueA < valueB) {
// comparatorResult = -1;
// }
// } else if (valueA != null) {
// comparatorResult = 1;
// } else if (valueB != null) {
// comparatorResult = -1;
// }
// return comparatorResult * (direction == 'asc' ? 1 : -1);
// });
// }
/**
* Checks if a data object matches the data source's filter string. By default, each data object
* is converted to a string of its properties and returns true if the filter has
* at least one occurrence in that string. By default, the filter string has its whitespace
* trimmed and the match is case-insensitive. May be overridden for a custom implementation of
* filter matching.
* @param data Data object used to check against the filter.
* @param filter Filter string that has been set on the data source.
* @return Whether the filter matches against the data
*/
_this.filterPredicate = (/**
* @param {?} data
* @param {?} filter
* @return {?}
*/
function (data, filter) {
// Transform the data into a lowercase string of all property values.
/** @type {?} */
var dataStr = Object.keys(data).reduce((/**
* @param {?} currentTerm
* @param {?} key
* @return {?}
*/
function (currentTerm, key) {
// Use an obscure Unicode character to delimit the words in the concatenated string.
// This avoids matches where the values of two columns combined will match the user's query
// (e.g. `Flute` and `Stop` will match `Test`). The character is intended to be something
// that has a very low chance of being typed in by somebody in a text field. This one in
// particular is "White up-pointing triangle with dot" from
// https://en.wikipedia.org/wiki/List_of_Unicode_characters
return currentTerm + ((/** @type {?} */ (data)))[key] + '◬';
}), '').toLowerCase();
// Transform the filter by converting it to lowercase and removing whitespace.
/** @type {?} */
var transformedFilter = filter.trim().toLowerCase();
return dataStr.indexOf(transformedFilter) !== -1;
});
_this._data = new rxjs.BehaviorSubject(initialData);
_this._updateChangeSubscription();
return _this;
}
Object.defineProperty(SukaTableDataSource.prototype, "data", {
/** Array of data that should be rendered by the table, where each object represents one row. */
get: /**
* Array of data that should be rendered by the table, where each object represents one row.
* @return {?}
*/
function () { return this._data.value; },
set: /**
* @param {?} data
* @return {?}
*/
function (data) { this._data.next(data); },
enumerable: true,
configurable: true
});
Object.defineProperty(SukaTableDataSource.prototype, "filter", {
/**
* Filter term that should be used to filter out objects from the data array. To override how
* data objects match to this filter string, provide a custom function for filterPredicate.
*/
get: /**
* Filter term that should be used to filter out objects from the data array. To override how
* data objects match to this filter string, provide a custom function for filterPredicate.
* @return {?}
*/
function () { return this._filter.value; },
set: /**
* @param {?} filter
* @return {?}
*/
function (filter) { this._filter.next(filter); },
enumerable: true,
configurable: true
});
Object.defineProperty(SukaTableDataSource.prototype, "paginator", {
/**
* Instance of the SukaSort directive used by the table to control its sorting. Sort changes
* emitted by the SukaSort will trigger an update to the table's rendered data.
*/
// get sort(): SukaSort | null { return this._sort; }
// set sort(sort: SukaSort | null) {
// this._sort = sort;
// this._updateChangeSubscription();
// }
// private _sort: SukaSort | null;
/**
* Instance of the Pagination component used by the table to control what page of the data is
* displayed. Page changes emitted by the Pagination will trigger an update to the
* table's rendered data.
*
* Note that the data source uses the pagination's properties to calculate which page of data
* should be displayed. If the pagination receives its properties as template inputs,
* e.g. `[pageLength]=100` or `[pageIndex]=1`, then be sure that the pagination's view has been
* initialized before assigning it to this data source.
*/
get: /**
* Instance of the SukaSort directive used by the table to control its sorting. Sort changes
* emitted by the SukaSort will trigger an update to the table's rendered data.
*/
// get sort(): SukaSort | null { return this._sort; }
// set sort(sort: SukaSort | null) {
// this._sort = sort;
// this._updateChangeSubscription();
// }
// private _sort: SukaSort | null;
/**
* Instance of the Pagination component used by the table to control what page of the data is
* displayed. Page changes emitted by the Pagination will trigger an update to the
* table's rendered data.
*
* Note that the data source uses the pagination's properties to calculate which page of data
* should be displayed. If the pagination receives its properties as template inputs,
* e.g. `[pageLength]=100` or `[pageIndex]=1`, then be sure that the pagination's view has been
* initialized before assigning it to this data source.
* @return {?}
*/
function () { return this._paginator; },
set: /**
* @param {?} paginator
* @return {?}
*/
function (paginator) {
this._paginator = paginator;
this._updateChangeSubscription();
},
enumerable: true,
configurable: true
});
/**
* Subscribe to changes that should trigger an update to the table's rendered rows. When the
* changes occur, process the current state of the filter, sort, and pagination along with
* the provided base data and send it to the table for rendering.
*/
/**
* Subscribe to changes that should trigger an update to the table's rendered rows. When the
* changes occur, process the current state of the filter, sort, and pagination along with
* the provided base data and send it to the table for rendering.
* @return {?}
*/
SukaTableDataSource.prototype._updateChangeSubscription = /**
* Subscribe to changes that should trigger an update to the table's rendered rows. When the
* changes occur, process the current state of the filter, sort, and pagination along with
* the provided base data and send it to the table for rendering.
* @return {?}
*/
function () {
var _this = this;
// Sorting and/or pagination should be watched if SukaSort and/or SukaPaginator are provided.
// The events should emit whenever the component emits a change or initializes, or if no
// component is provided, a stream with just a null event should be provided.
// The `sortChange` and `pageChange` acts as a signal to the combineLatests below so that the
// pipeline can progress to the next step. Note that the value from these streams are not used,
// they purely act as a signal to progress in the pipeline.
// const sortChange: Observable<Sort | null | void> = this._sort ?
// merge(this._sort.sortChange, this._sort.initialized) as Observable<Sort | void> :
// observableOf(null);
/** @type {?} */
var pageChange = this._paginator ?
(/** @type {?} */ (rxjs.merge(this._paginator.page, this._internalPageChanges, this._paginator.initialized))) :
rxjs.of(null);
/** @type {?} */
var dataStream = this._data;
// Watch for base data or filter changes to provide a filtered set of data.
/** @type {?} */
var filteredData = rxjs.combineLatest([dataStream, this._filter])
.pipe(operators.map((/**
* @param {?} __0
* @return {?}
*/
function (_a) {
var _b = __read(_a, 1), data = _b[0];
return _this._filterData(data);
})));
// Watch for filtered data or sort changes to provide an ordered set of data.
// const orderedData = combineLatest([filteredData, sortChange])
// .pipe(map(([data]) => this._orderData(data)));
// Watch for ordered data or page changes to provide a paged set of data.
// const paginatedData = combineLatest([orderedData, pageChange])
// .pipe(map(([data]) => this._pageData(data)));
/** @type {?} */
var paginatedData = rxjs.combineLatest([filteredData, pageChange])
.pipe(operators.map((/**
* @param {?} __0
* @return {?}
*/
function (_a) {
var _b = __read(_a, 1), data = _b[0];
return _this._pageData(data);
})));
// Watched for paged data changes and send the result to the table to render.
this._renderChangesSubscription.unsubscribe();
this._renderChangesSubscription = paginatedData.subscribe((/**
* @param {?} data
* @return {?}
*/
function (data) { return _this._renderData.next(data); }));
};
/**
* Returns a filtered data array where each filter object contains the filter string within
* the result of the filterTermAccessor function. If no filter is set, returns the data array
* as provided.
*/
/**
* Returns a filtered data array where each filter object contains the filter string within
* the result of the filterTermAccessor function. If no filter is set, returns the data array
* as provided.
* @param {?} data
* @return {?}
*/
SukaTableDataSource.prototype._filterData = /**
* Returns a filtered data array where each filter object contains the filter string within
* the result of the filterTermAccessor function. If no filter is set, returns the data array
* as provided.
* @param {?} data
* @return {?}
*/
function (data) {
var _this = this;
// If there is a filter string, filter out data that does not contain it.
// Each data object is converted to a string using the function defined by filterTermAccessor.
// May be overridden for customization.
this.filteredData =
!this.filter ? data : data.filter((/**
* @param {?} obj
* @return {?}
*/
function (obj) { return _this.filterPredicate(obj, _this.filter); }));
if (this.paginator) {
this._updatePaginator(this.filteredData.length);
}
return this.filteredData;
};
/**
* Returns a sorted copy of the data if SukaSort has a sort applied, otherwise just returns the
* data array as provided. Uses the default data accessor for data lookup, unless a
* sortDataAccessor function is defined.
*/
// _orderData(data: T[]): T[] {
// // If there is no active sort or direction, return the data without trying to sort.
// if (!this.sort) { return data; }
// return this.sortData(data.slice(), this.sort);
// }
/**
* Returns a paged slice of the provided data array according to the provided SukaPaginator's page
* index and length. If there is no paginator provided, returns the data array as provided.
*/
/**
* Returns a sorted copy of the data if SukaSort has a sort applied, otherwise just returns the
* data array as provided. Uses the default data accessor for data lookup, unless a
* sortDataAccessor function is defined.
*/
// _orderData(data: T[]): T[] {
// // If there is no active sort or direction, return the data without trying to sort.
// if (!this.sort) { return data; }
// return this.sortData(data.slice(), this.sort);
// }
/**
* Returns a paged slice of the provided data array according to the provided SukaPaginator's page
* index and length. If there is no paginator provided, returns the data array as provided.
* @param {?} data
* @return {?}
*/
SukaTableDataSource.prototype._pageData = /**
* Returns a sorted copy of the data if SukaSort has a sort applied, otherwise just returns the
* data array as provided. Uses the default data accessor for data lookup, unless a
* sortDataAccessor function is defined.
*/
// _orderData(data: T[]): T[] {
// // If there is no active sort or direction, return the data without trying to sort.
// if (!this.sort) { return data; }
// return this.sortData(data.slice(), this.sort);
// }
/**
* Returns a paged slice of the provided data array according to the provided SukaPaginator's page
* index and length. If there is no paginator provided, returns the data array as provided.
* @param {?} data
* @return {?}
*/
function (data) {
if (!this.paginator) {
return data;
}
/** @type {?} */
var startIndex = this.paginator.pageIndex * this.paginator.pageSize;
return data.slice(startIndex, startIndex + this.paginator.pageSize);
};
/**
* Updates the paginator to reflect the length of the filtered data, and makes sure that the page
* index does not exceed the paginator's last page. Values are changed in a resolved promise to
* guard against making property changes within a round of change detection.
*/
/**
* Updates the paginator to reflect the length of the filtered data, and makes sure that the page
* index does not exceed the paginator's last page. Values are changed in a resolved promise to
* guard against making property changes within a round of change detection.
* @param {?} filteredDataLength
* @return {?}
*/
SukaTableDataSource.prototype._updatePaginator = /**
* Updates the paginator to reflect the length of the filtered data, and makes sure that the page
* index does not exceed the paginator's last page. Values are changed in a resolved promise to
* guard against making property changes within a round of change detection.
* @param {?} filteredDataLength
* @return {?}
*/
function (filteredDataLength) {
var _this = this;
Promise.resolve().then((/**
* @return {?}
*/
function () {
/** @type {?} */
var paginator = _this.paginator;
if (!paginator) {
return;
}
paginator.length = filteredDataLength;
// If the page index is set beyond the page, reduce it to the last page.
if (paginator.pageIndex > 0) {
/** @type {?} */
var lastPageIndex = Math.ceil(paginator.length / paginator.pageSize) - 1 || 0;
/** @type {?} */
var newPageIndex = Math.min(paginator.pageIndex, lastPageIndex);
if (newPageIndex !== paginator.pageIndex) {
paginator.pageIndex = newPageIndex;
// Since the paginator only emits after user-generated changes,
// we need our own stream so we know to should re-render the data.
_this._internalPageChanges.next();
}
}
}));
};
/**
* Used by the SukaTable. Called when it connects to the data source.
* @docs-private
*/
/**
* Used by the SukaTable. Called when it connects to the data source.
* \@docs-private
* @return {?}
*/
SukaTableDataSource.prototype.connect = /**
* Used by the SukaTable. Called when it connects to the data source.
* \@docs-private
* @return {?}
*/
function () { return this._renderData; };
/**
* Used by the SukaTable. Called when it is destroyed. No-op.
* @docs-private
*/
/**
* Used by the SukaTable. Called when it is destroyed. No-op.
* \@docs-private
* @return {?}
*/
SukaTableDataSource.prototype.disconnect = /**
* Used by the SukaTable. Called when it is destroyed. No-op.
* \@docs-private
* @return {?}
*/
function () { };
return SukaTableDataSource;
}(table.DataSource));
if (false) {
/**
* Stream that emits when a new data array is set on the data source.
* @type {?}
* @private
*/
SukaTableDataSource.prototype._data;
/**
* Stream emitting render data to the table (depends on ordered data changes).
* @type {?}
* @private
*/
SukaTableDataSource.prototype._renderData;
/**
* Stream that emits when a new filter string is set on the data source.
* @type {?}
* @private
*/
SukaTableDataSource.prototype._filter;
/**
* Used to react to internal changes of the paginator that are made by the data source itself.
* @type {?}
* @private
*/
SukaTableDataSource.prototype._internalPageChanges;
/**
* Subscription to the changes that should trigger an update to the table's rendered rows, such
* as filtering, sorting, pagination, or base data changes.
* @type {?}
*/
SukaTableDataSource.prototype._renderChangesSubscription;
/**
* The filtered set of data that has been matched by the filter string, or all the data if there
* is no filter. Useful for knowing the set of data the table represents.
* For example, a 'selectAll()' function would likely want to select the set of filtered data
* shown to the user rather than all the data.
* @type {?}
*/
SukaTableDataSource.prototype.filteredData;
/**
* @type {?}
* @private
*/
SukaTableDataSource.prototype._paginator;
/**
* Checks if a data object matches the data source's filter string. By default, each data object
* is converted to a string of its properties and returns true if the filter has
* at least one occurrence in that string. By default, the filter string has its whitespace
* trimmed and the match is case-insensitive. May be overridden for a custom implementation of
* filter matching.
* \@param data Data object used to check against the filter.
* \@param filter Filter string that has been set on the data source.
* \@return Whether the filter matches against the data
* @type {?}
*/
SukaTableDataSource.prototype.filterPredicate;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var SukaTableSkeleton = /** @class */ (function () {
function SukaTableSkeleton() {
this.baseClass = true;
this.fullWidth = false;
this.skeleton = false;
this.columns = [];
this.rowNumber = 5;
this.rows = Array(this.rowNumber).fill(0).map((/**
* @param {?} x
* @param {?} i
* @return {?}
*/
function (x, i) { return i; }));
}
SukaTableSkeleton.decorators = [
{ type: core.Component, args: [{
selector: 'suka-table-skeleton, table[suka-table-skeleton]',
exportAs: 'sukaTableSkeleton',
template: "\n <tr class=\"suka-header-row\">\n <th *ngFor=\"let column of columns\" class=\"suka-header-cell\"><div class=\"skeleton__text\"></div></th>\n </tr>\n <tr class=\"suka-row\" *ngFor=\"let row of rows\">\n <td *ngFor=\"let column of columns\" class=\"suka-cell\"><div class=\"skeleton__text\"></div></td>\n </tr>\n "
}] }
];
SukaTableSkeleton.propDecorators = {
baseClass: [{ type: core.HostBinding, args: ['class.suka-table',] }],
fullWidth: [{ type: core.HostBinding, args: ['class.suka-table--full-width',] }, { type: core.Input }],
skeleton: [{ type: core.Input }],
columns: [{ type: core.Input }],
rowNumber: [{ type: core.Input }]
};
return SukaTableSkeleton;
}());
if (false) {
/** @type {?} */
SukaTableSkeleton.prototype.baseClass;
/** @type {?} */
SukaTableSkeleton.prototype.fullWidth;
/** @type {?} */
SukaTableSkeleton.prototype.skeleton;
/** @type {?} */
SukaTableSkeleton.prototype.columns;
/** @type {?} */
SukaTableSkeleton.prototype.rowNumber;
/** @type {?} */
SukaTableSkeleton.prototype.rows;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var EXPORTED_DECLARATIONS = [
// Table
SukaTable,
SukaTableSkeleton,
// Template defs
SukaHeaderCellDef,
SukaHeaderRowDef,
SukaColumnDef,
SukaCellDef,
SukaRowDef,
SukaFooterCellDef,
SukaFooterRowDef,
// Cell directives
SukaHeaderCell,
SukaCell,
SukaFooterCell,
// Row directives
SukaHeaderRow,
SukaRow,
SukaFooterRow,
];
var TableModule = /** @class */ (function () {
function TableModule() {
}
TableModule.decorators = [
{ type: core.NgModule, args: [{
imports: [
common.CommonModule,
table.CdkTableModule,
PaginationModule,
],
exports: __spread(EXPORTED_DECLARATIONS),
declarations: [EXPORTED_DECLARATIONS],
},] }
];
return TableModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var Navigation = /** @class */ (function () {
function Navigation() {
this.role = 'complementary';
this.hostClass = true;
}
Navigation.decorators = [
{ type: core.Component, args: [{
selector: 'suka-navigation',
template: "\n <nav role=\"navigation__container\">\n <ul class=\"navigation__items\">\n <ng-content></ng-content>\n </ul>\n </nav>\n ",
encapsulation: core.ViewEncapsulation.None
}] }
];
Navigation.propDecorators = {
role: [{ type: core.HostBinding, args: ['attr.role',] }],
hostClass: [{ type: core.HostBinding, args: ['class.navigation',] }]
};
return Navigation;
}());
if (false) {
/** @type {?} */
Navigation.prototype.role;
/** @type {?} */
Navigation.prototype.hostClass;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NavigationItem = /** @class */ (function () {
function NavigationItem(domSanitizer, router$1) {
var _this = this;
this.domSanitizer = domSanitizer;
this.router = router$1;
/**
* Toggles the active (current page) state for the link.
*/
this.active = false;
/**
* Emits the navigation status promise when the link is activated
*/
this.navigation = new core.EventEmitter();
this.isSubMenu = false;
this._href = 'javascript:void(0)';
if (router$1 && this.route) {
this.subscription = router$1.events.subscribe((/**
* @param {?} s
* @return {?}
*/
function (s) {
if (s instanceof router.NavigationEnd) {
_this.update();
}
}));
}
}
Object.defineProperty(NavigationItem.prototype, "href", {
get: /**
* @return {?}
*/
function () {
return (/** @type {?} */ (this.domSanitizer.bypassSecurityTrustUrl(this._href)));
},
/**
* Link for the item. NOTE: *do not* pass unsafe or untrusted values, this has the potential to open you up to XSS attacks
*/
set: /**
* Link for the item. NOTE: *do not* pass unsafe or untrusted values, this has the potential to open you up to XSS attacks
* @param {?} v
* @return {?}
*/
function (v) {
this._href = v;
},
enumerable: true,
configurable: true
});
/**
* @param {?} event
* @return {?}
*/
NavigationItem.prototype.navigate = /**
* @param {?} event
* @return {?}
*/
function (event) {
if (this.router && this.route) {
event.preventDefault();
/** @type {?} */
var status_1 = this.router.navigate(this.route, this.routeExtras);
this.navigation.emit(status_1);
}
};
/**
* @return {?}
*/
NavigationItem.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
if (this.subscription) {
this.subscription.unsubscribe();
}
};
/**
* @private
* @return {?}
*/
NavigationItem.prototype.isActive = /**
* @private
* @return {?}
*/
function () {
if (this.router && this.route) {
/** @type {?} */
var itemUrl = this.router.createUrlTree(this.route, this.routeExtras);
return this.router.isActive(itemUrl, true);
}
return false;
};
/**
* @private
* @return {?}
*/
NavigationItem.prototype.update = /**
* @private
* @return {?}
*/
function () {
if (this.isActive()) {
this.active = true;
}
else {
this.active = false;
}
};
NavigationItem.decorators = [
{ type: core.Component, args: [{
selector: 'suka-navigation-item',
template: "\n <li [ngClass]=\"{\n 'navigation__item': !isSubMenu,\n 'navigation__menu-item': isSubMenu\n }\"\n [attr.role]=\"(isSubMenu ? 'none' : null)\">\n <a\n class=\"navigation__link\"\n [href]=\"href\"\n [attr.role]=\"(isSubMenu ? 'menuitem' : null)\"\n [attr.aria-current]=\"(active ? 'page' : null)\"\n (click)=\"navigate($event)\">\n <div *ngIf=\"!isSubMenu\" class=\"navigation__icon\">\n <ng-content select=\"suka-icon\"></ng-content>\n </div>\n <span class=\"navigation__link-text\">\n <ng-content></ng-content>\n </span>\n </a>\n </li>\n "
}] }
];
/** @nocollapse */
NavigationItem.ctorParameters = function () { return [
{ type: platformBrowser.DomSanitizer },
{ type: router.Router, decorators: [{ type: core.Optional }] }
]; };
NavigationItem.propDecorators = {
href: [{ type: core.Input }],
active: [{ type: core.Input }],
route: [{ type: core.Input }],
routeExtras: [{ type: core.Input }],
navigation: [{ type: core.Output }]
};
return NavigationItem;
}());
if (false) {
/**
* @type {?}
* @private
*/
NavigationItem.prototype.subscription;
/**
* Toggles the active (current page) state for the link.
* @type {?}
*/
NavigationItem.prototype.active;
/**
* Array of commands to send to the router when the link is activated
* See: https://angular.io/api/router/Router#navigate
* @type {?}
*/
NavigationItem.prototype.route;
/**
* Router options. Used in conjunction with `route`
* See: https://angular.io/api/router/Router#navigate
* @type {?}
*/
NavigationItem.prototype.routeExtras;
/**
* Emits the navigation status promise when the link is activated
* @type {?}
*/
NavigationItem.prototype.navigation;
/** @type {?} */
NavigationItem.prototype.isSubMenu;
/**
* @type {?}
* @protected
*/
NavigationItem.prototype._href;
/**
* @type {?}
* @protected
*/
NavigationItem.prototype.domSanitizer;
/**
* @type {?}
* @protected
*/
NavigationItem.prototype.router;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* `SideNavMenu` provides a method to group `SideNavItem`s under a common heading.
*/
var NavigationMenu = /** @class */ (function () {
function NavigationMenu() {
/**
* Controls the visibility of the child `SideNavItem`s
*/
this.expanded = false;
this.childrenHeight = 0;
}
/**
* @return {?}
*/
NavigationMenu.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
var _this = this;
setTimeout((/**
* @return {?}
*/
function () {
_this.navigationItems.forEach((/**
* @param {?} item
* @return {?}
*/
function (item) {
item.isSubMenu = true;
}));
}));
setTimeout((/**
* @return {?}
*/
function () {
_this.navigationNativeItems.forEach((/**
* @param {?} item
* @return {?}
*/
function (item) {
item.nativeElement.children.forEach((/**
* @param {?} children
* @return {?}
*/
function (children) {
_this.childrenHeight += children.offsetHeight;
}));
}));
}));
};
/**
* @return {?}
*/
NavigationMenu.prototype.toggle = /**
* @return {?}
*/
function () {
this.expanded = !this.expanded;
};
NavigationMenu.decorators = [
{ type: core.Component, args: [{
selector: 'suka-navigation-menu',
template: "\n <li class=\"navigation__item navigation__item--icon\">\n <button\n (click)=\"toggle()\"\n class=\"navigation__sub-menu\"\n aria-haspopup=\"true\"\n [attr.aria-expanded]=\"expanded\"\n type=\"button\">\n <div class=\"navigation__icon\">\n <ng-content select=\"suka-icon\"></ng-content>\n </div>\n <span class=\"navigation__sub-menu-title\">{{title}}</span>\n <suka-icon icon=\"chevron-down\" class=\"navigation__sub-menu-icon\"></suka-icon>\n </button>\n <ul class=\"navigation__menu\" role=\"menu\" [ngStyle]=\"{'max-height': expanded ? childrenHeight + 'px' : '0px'}\">\n <ng-content></ng-content>\n </ul>\n </li>\n "
}] }
];
NavigationMenu.propDecorators = {
title: [{ type: core.Input }],
expanded: [{ type: core.Input }],
navigationItems: [{ type: core.ContentChildren, args: [NavigationItem,] }],
navigationNativeItems: [{ type: core.ContentChildren, args: [NavigationItem, { read: core.ElementRef },] }]
};
return NavigationMenu;
}());
if (false) {
/**
* Heading for the group
* @type {?}
*/
NavigationMenu.prototype.title;
/**
* Controls the visibility of the child `SideNavItem`s
* @type {?}
*/
NavigationMenu.prototype.expanded;
/** @type {?} */
NavigationMenu.prototype.navigationItems;
/** @type {?} */
NavigationMenu.prototype.navigationNativeItems;
/** @type {?} */
NavigationMenu.prototype.childrenHeight;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var MobileNavigation = /** @class */ (function () {
function MobileNavigation() {
this.role = 'complementary';
this.hostClass = true;
/**
* Controls the expanded (`true`) or collapsed (`false`) state when on a small screen.
*/
this.expanded = false;
/**
* Controls the hidden (`true`) or visible (`false`) state
*/
this.hidden = false;
}
/**
* @return {?}
*/
MobileNavigation.prototype.toggle = /**
* @return {?}
*/
function () {
this.expanded = !this.expanded;
};
MobileNavigation.decorators = [
{ type: core.Component, args: [{
selector: 'suka-mobile-navigation',
template: "\n <button class=\"nav-toggle\" (click)=\"toggle()\"><suka-icon icon=\"menu\"></suka-icon> Navegaci\u00F3n</button>\n <div class=\"backdrop--dark\"></div>\n <div class=\"mobile-navigation__nav-wrapper\">\n <div class=\"mobile-nav-trigger\" (click)=\"toggle()\"></div>\n <div class=\"mobile-nav\">\n <div class=\"mobile-nav__header\">\n Navegaci\u00F3n\n <button sukaButton=\"plain\" (click)=\"toggle()\" size=\"sm\"><suka-icon icon=\"x\"></suka-icon></button>\n </div>\n <ng-content></ng-content>\n </div>\n </div>\n ",
encapsulation: core.ViewEncapsulation.None
}] }
];
/** @nocollapse */
MobileNavigation.ctorParameters = function () { return []; };
MobileNavigation.propDecorators = {
role: [{ type: core.HostBinding, args: ['attr.role',] }],
hostClass: [{ type: core.HostBinding, args: ['class.mobile-navigation',] }],
expanded: [{ type: core.HostBinding, args: ['class.mobile-navigation--expanded',] }, { type: core.Input }],
hidden: [{ type: core.HostBinding, args: ['class.mobile-navigation--hidden',] }, { type: core.Input }]
};
return MobileNavigation;
}());
if (false) {
/** @type {?} */
MobileNavigation.prototype.role;
/** @type {?} */
MobileNavigation.prototype.hostClass;
/**
* Controls the expanded (`true`) or collapsed (`false`) state when on a small screen.
* @type {?}
*/
MobileNavigation.prototype.expanded;
/**
* Controls the hidden (`true`) or visible (`false`) state
* @type {?}
*/
MobileNavigation.prototype.hidden;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NavigationModule = /** @class */ (function () {
function NavigationModule() {
}
NavigationModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
Navigation,
NavigationItem,
NavigationMenu,
MobileNavigation,
],
imports: [
common.CommonModule,
IconModule,
ButtonModule,
],
exports: [
Navigation,
NavigationItem,
NavigationMenu,
MobileNavigation,
]
},] }
];
return NavigationModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var Badge = /** @class */ (function () {
function Badge() {
/**
* Sets the badge type. Can be `default`, `info`, `success`, `attention`, `alert` or `disabled`. Defaults to `default`.
*/
this.type = 'default';
/**
* Badge size. Defaults to `md`.
*/
this.size = 'md';
this.class = '';
}
Object.defineProperty(Badge.prototype, "attrClass", {
get: /**
* @return {?}
*/
function () {
return "badge badge--" + this.type + " badge--" + this.size + " " + this.class;
},
enumerable: true,
configurable: true
});
Badge.decorators = [
{ type: core.Component, args: [{
selector: 'suka-badge',
template: "<ng-content></ng-content>"
}] }
];
Badge.propDecorators = {
type: [{ type: core.Input }],
size: [{ type: core.Input }],
class: [{ type: core.Input }],
attrClass: [{ type: core.HostBinding, args: ['attr.class',] }]
};
return Badge;
}());
if (false) {
/**
* Sets the badge type. Can be `default`, `info`, `success`, `attention`, `alert` or `disabled`. Defaults to `default`.
* @type {?}
*/
Badge.prototype.type;
/**
* Badge size. Defaults to `md`.
* @type {?}
*/
Badge.prototype.size;
/** @type {?} */
Badge.prototype.class;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var BadgeModule = /** @class */ (function () {
function BadgeModule() {
}
BadgeModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
Badge
],
exports: [
Badge
],
imports: [
common.CommonModule
]
},] }
];
return BadgeModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var Topbar = /** @class */ (function () {
function Topbar(domSanitizer, router) {
this.domSanitizer = domSanitizer;
this.router = router;
/**
* Put topbar contents inside a container. Defaults to `false`
*/
this.insideContainer = false;
/**
* Top level branding. Defaults to "Kushki"
*/
this.brand = 'Kushki';
/**
* Emits the navigation status promise when the link is activated
*/
this.navigation = new core.EventEmitter();
this._href = 'javascript:void(0)';
}
Object.defineProperty(Topbar.prototype, "href", {
get: /**
* @return {?}
*/
function () {
return (/** @type {?} */ (this.domSanitizer.bypassSecurityTrustUrl(this._href)));
},
/**
* Optional link for the header
*/
set: /**
* Optional link for the header
* @param {?} v
* @return {?}
*/
function (v) {
this._href = v;
},
enumerable: true,
configurable: true
});
/**
* @param {?} value
* @return {?}
*/
Topbar.prototype.isTemplate = /**
* @param {?} value
* @return {?}
*/
function (value) {
return value instanceof core.TemplateRef;
};
/**
* @param {?} event
* @return {?}
*/
Topbar.prototype.navigate = /**
* @param {?} event
* @return {?}
*/
function (event) {
if (this.router && this.route) {
event.preventDefault();
/** @type {?} */
var status_1 = this.router.navigate(this.route, this.routeExtras);
this.navigation.emit(status_1);
}
};
Topbar.decorators = [
{ type: core.Component, args: [{
selector: 'suka-topbar',
template: "\n <header\n class=\"topbar\"\n role=\"banner\"\n [attr.aria-label]=\"brand + ' ' + productName\">\n\n <div class=\"container\" *ngIf=\"insideContainer else elseTpl\">\n <ng-container *ngTemplateOutlet=\"elseTpl\"></ng-container>\n </div>\n\n <ng-template #elseTpl>\n <ng-template\n *ngIf=\"isTemplate(brand)\"\n [ngTemplateOutlet]=\"brand\">\n </ng-template>\n <a\n *ngIf=\"!isTemplate(brand)\"\n class=\"topbar__name\"\n [href]=\"href\"\n (click)=\"navigate($event)\">\n <img *ngIf=\"logoSrc\" [src]=\"logoSrc\" class=\"topbar__logo\" [attr.alt]=\"brand\" />\n <span *ngIf=\"!logoSrc\" class=\"topbar__name--prefix\">{{brand}}</span>\n <span *ngIf=\"productName\" class=\"topbar__name--suffix\">{{productName}}</span>\n </a>\n <ng-content></ng-content>\n </ng-template>\n </header>\n "
}] }
];
/** @nocollapse */
Topbar.ctorParameters = function () { return [
{ type: platformBrowser.DomSanitizer },
{ type: router.Router, decorators: [{ type: core.Optional }] }
]; };
Topbar.propDecorators = {
insideContainer: [{ type: core.Input }],
productName: [{ type: core.Input }],
logoSrc: [{ type: core.Input }],
brand: [{ type: core.Input }],
href: [{ type: core.Input }],
route: [{ type: core.Input }],
routeExtras: [{ type: core.Input }],
navigation: [{ type: core.Output }]
};
return Topbar;
}());
if (false) {
/**
* Put topbar contents inside a container. Defaults to `false`
* @type {?}
*/
Topbar.prototype.insideContainer;
/**
* Label that shows to the right of the `brand`.
* @type {?}
*/
Topbar.prototype.productName;
/**
* Source for the header logo.
* @type {?}
*/
Topbar.prototype.logoSrc;
/**
* Top level branding. Defaults to "Kushki"
* @type {?}
*/
Topbar.prototype.brand;
/**
* Array of commands to send to the router when the link is activated
* See: https://angular.io/api/router/Router#navigate
* @type {?}
*/
Topbar.prototype.route;
/**
* Router options. Used in conjunction with `route`
* See: https://angular.io/api/router/Router#navigate
* @type {?}
*/
Topbar.prototype.routeExtras;
/**
* Emits the navigation status promise when the link is activated
* @type {?}
*/
Topbar.prototype.navigation;
/**
* @type {?}
* @protected
*/
Topbar.prototype._href;
/**
* @type {?}
* @protected
*/
Topbar.prototype.domSanitizer;
/**
* @type {?}
* @protected
*/
Topbar.prototype.router;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var TopbarGlobal = /** @class */ (function () {
function TopbarGlobal() {
this.hostClass = true;
}
TopbarGlobal.decorators = [
{ type: core.Component, args: [{
selector: 'suka-topbar-global',
template: "\n <ng-content></ng-content>\n "
}] }
];
TopbarGlobal.propDecorators = {
hostClass: [{ type: core.HostBinding, args: ['class.topbar__global',] }]
};
return TopbarGlobal;
}());
if (false) {
/** @type {?} */
TopbarGlobal.prototype.hostClass;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var TopbarNavigation = /** @class */ (function () {
function TopbarNavigation() {
}
TopbarNavigation.decorators = [
{ type: core.Component, args: [{
selector: 'suka-topbar-navigation',
template: "\n <nav class=\"topbar__nav\" [attr.aria-label]=\"ariaLabel\">\n <ul class=\"topbar__menu-bar\" role=\"menubar\">\n <ng-content></ng-content>\n </ul>\n </nav>\n "
}] }
];
TopbarNavigation.propDecorators = {
ariaLabel: [{ type: core.Input }]
};
return TopbarNavigation;
}());
if (false) {
/** @type {?} */
TopbarNavigation.prototype.ariaLabel;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var TopbarItem = /** @class */ (function () {
function TopbarItem(domSanitizer, router) {
this.domSanitizer = domSanitizer;
this.router = router;
/**
* Emits the navigation status promise when the link is activated
*/
this.navigation = new core.EventEmitter();
this._href = 'javascript:void(0)';
}
Object.defineProperty(TopbarItem.prototype, "href", {
get: /**
* @return {?}
*/
function () {
return (/** @type {?} */ (this.domSanitizer.bypassSecurityTrustUrl(this._href)));
},
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
this._href = v;
},
enumerable: true,
configurable: true
});
/**
* @param {?} event
* @return {?}
*/
TopbarItem.prototype.navigate = /**
* @param {?} event
* @return {?}
*/
function (event) {
if (this.router && this.route) {
event.preventDefault();
/** @type {?} */
var status_1 = this.router.navigate(this.route, this.routeExtras);
this.navigation.emit(status_1);
}
};
TopbarItem.decorators = [
{ type: core.Component, args: [{
selector: 'suka-topbar-item',
template: "\n <li style=\"height: 100%\">\n <a\n class=\"topbar__menu-item\"\n role=\"menuitem\"\n tabindex=\"0\"\n [href]=\"href\"\n (click)=\"navigate($event)\">\n <suka-icon *ngIf=\"icon\" [icon]=\"icon\" class=\"topbar__menu-item__icon\"></suka-icon>\n <ng-content></ng-content>\n </a>\n </li>\n "
}] }
];
/** @nocollapse */
TopbarItem.ctorParameters = function () { return [
{ type: platformBrowser.DomSanitizer },
{ type: router.Router, decorators: [{ type: core.Optional }] }
]; };
TopbarItem.propDecorators = {
href: [{ type: core.Input }],
route: [{ type: core.Input }],
routeExtras: [{ type: core.Input }],
navigation: [{ type: core.Output }],
icon: [{ type: core.Input }]
};
return TopbarItem;
}());
if (false) {
/**
* Array of commands to send to the router when the link is activated
* See: https://angular.io/api/router/Router#navigate
* @type {?}
*/
TopbarItem.prototype.route;
/**
* Router options. Used in conjunction with `route`
* See: https://angular.io/api/router/Router#navigate
* @type {?}
*/
TopbarItem.prototype.routeExtras;
/**
* Emits the navigation status promise when the link is activated
* @type {?}
*/
TopbarItem.prototype.navigation;
/**
* Icon for topbar item.
* @type {?}
*/
TopbarItem.prototype.icon;
/**
* @type {?}
* @protected
*/
TopbarItem.prototype._href;
/**
* @type {?}
* @protected
*/
TopbarItem.prototype.domSanitizer;
/**
* @type {?}
* @protected
*/
TopbarItem.prototype.router;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var TopbarMenu = /** @class */ (function () {
function TopbarMenu(domSanitizer, elementRef) {
this.domSanitizer = domSanitizer;
this.elementRef = elementRef;
this.trigger = 'click';
this.expanded = false;
this._href = 'javascript:void(0)';
}
Object.defineProperty(TopbarMenu.prototype, "href", {
get: /**
* @return {?}
*/
function () {
return (/** @type {?} */ (this.domSanitizer.bypassSecurityTrustUrl(this._href)));
},
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
this._href = v;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
TopbarMenu.prototype.onClick = /**
* @return {?}
*/
function () {
if (this.trigger === 'click') {
this.expanded = !this.expanded;
}
};
/**
* @return {?}
*/
TopbarMenu.prototype.onMouseOver = /**
* @return {?}
*/
function () {
if (this.trigger === 'mouseover') {
this.expanded = true;
}
};
/**
* @return {?}
*/
TopbarMenu.prototype.onMouseOut = /**
* @return {?}
*/
function () {
if (this.trigger === 'mouseover') {
this.expanded = false;
}
};
/**
* @param {?} event
* @return {?}
*/
TopbarMenu.prototype.onFocusOut = /**
* @param {?} event
* @return {?}
*/
function (event) {
if (!this.elementRef.nativeElement.contains(event.relatedTarget)) {
this.expanded = false;
}
};
TopbarMenu.decorators = [
{ type: core.Component, args: [{
selector: 'suka-topbar-menu',
template: "\n <li\n class=\"topbar__sub-menu\"\n style=\"height: 100%\"\n >\n <a\n class=\"topbar__menu-item topbar__menu-title\"\n [href]=\"href\"\n role=\"menuitem\"\n tabindex=\"0\"\n aria-haspopup=\"true\"\n [attr.aria-expanded]=\"expanded\">\n <ng-content></ng-content>\n <suka-icon icon=\"chevron-down\" class=\"topbar__menu-arrow\" aria-hidden=\"true\"></suka-icon>\n </a>\n <ul class=\"topbar__menu\" role=\"menu\">\n <ng-content select=\"suka-topbar-item\"></ng-content>\n </ul>\n </li>\n "
}] }
];
/** @nocollapse */
TopbarMenu.ctorParameters = function () { return [
{ type: platformBrowser.DomSanitizer },
{ type: core.ElementRef }
]; };
TopbarMenu.propDecorators = {
href: [{ type: core.Input }],
trigger: [{ type: core.Input }],
onClick: [{ type: core.HostListener, args: ['click',] }],
onMouseOver: [{ type: core.HostListener, args: ['mouseover',] }],
onMouseOut: [{ type: core.HostListener, args: ['mouseout',] }],
onFocusOut: [{ type: core.HostListener, args: ['focusout', ['$event'],] }]
};
return TopbarMenu;
}());
if (false) {
/** @type {?} */
TopbarMenu.prototype.trigger;
/** @type {?} */
TopbarMenu.prototype.expanded;
/**
* @type {?}
* @protected
*/
TopbarMenu.prototype._href;
/**
* @type {?}
* @protected
*/
TopbarMenu.prototype.domSanitizer;
/**
* @type {?}
* @protected
*/
TopbarMenu.prototype.elementRef;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var TopbarModule = /** @class */ (function () {
function TopbarModule() {
}
TopbarModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
Topbar,
TopbarGlobal,
TopbarNavigation,
TopbarItem,
TopbarMenu,
],
imports: [
common.CommonModule,
IconModule,
],
exports: [
Topbar,
TopbarGlobal,
TopbarNavigation,
TopbarItem,
TopbarMenu,
]
},] }
];
return TopbarModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var Frame = /** @class */ (function () {
function Frame(breakpointObserver) {
var _this = this;
this.baseClass = true;
this.mobile = false;
breakpointObserver.observe('(max-width: 768px)').subscribe((/**
* @param {?} result
* @return {?}
*/
function (result) {
if (result.matches) {
_this.activateHandsetLayout();
}
else {
_this.activateDesktopLayout();
}
}));
}
/**
* Activates handset layout
*/
/**
* Activates handset layout
* @return {?}
*/
Frame.prototype.activateHandsetLayout = /**
* Activates handset layout
* @return {?}
*/
function () {
this.mobile = true;
};
/**
* Activates desktop layout
*/
/**
* Activates desktop layout
* @return {?}
*/
Frame.prototype.activateDesktopLayout = /**
* Activates desktop layout
* @return {?}
*/
function () {
this.mobile = false;
};
Frame.decorators = [
{ type: core.Component, args: [{
selector: 'suka-frame',
template: "\n <div class=\"frame__header\">\n <ng-content select=\"suka-topbar\"></ng-content>\n </div>\n\n <ng-template #navigationTemplate>\n <ng-content select=\"suka-navigation\"></ng-content>\n </ng-template>\n\n <div class=\"frame__nav\" *ngIf=\"!mobile\">\n <ng-container *ngTemplateOutlet=\"navigationTemplate\"></ng-container>\n </div>\n\n <div class=\"frame__main\">\n <ng-content select=\"suka-page\"></ng-content>\n </div>\n\n <div class=\"frame__mobile-nav\" *ngIf=\"mobile\">\n <suka-mobile-navigation>\n <ng-container *ngTemplateOutlet=\"navigationTemplate\"></ng-container>\n </suka-mobile-navigation>\n </div>\n\n <ng-content></ng-content>\n "
}] }
];
/** @nocollapse */
Frame.ctorParameters = function () { return [
{ type: layout.BreakpointObserver }
]; };
Frame.propDecorators = {
baseClass: [{ type: core.HostBinding, args: ['class.frame',] }],
mobile: [{ type: core.HostBinding, args: ['class.frame--mobile',] }]
};
return Frame;
}());
if (false) {
/** @type {?} */
Frame.prototype.baseClass;
/** @type {?} */
Frame.prototype.mobile;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var FrameModule = /** @class */ (function () {
function FrameModule() {
}
FrameModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
Frame,
],
exports: [
Frame,
],
imports: [
common.CommonModule,
layout.LayoutModule,
NavigationModule,
]
},] }
];
return FrameModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var Breadcrumb = /** @class */ (function () {
// Build your breadcrumb starting with the root route of your current activated route
function Breadcrumb(activatedRoute, router) {
this.activatedRoute = activatedRoute;
this.router = router;
}
/**
* @return {?}
*/
Breadcrumb.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
if (this.router) {
this.breadcrumbs$ = this.router.events.pipe(operators.filter((/**
* @param {?} event
* @return {?}
*/
function (event) { return event instanceof router.NavigationEnd; })), operators.distinctUntilChanged(), operators.map((/**
* @param {?} event
* @return {?}
*/
function (event) { return _this.buildBreadcrumb(_this.activatedRoute.root); })));
}
};
/**
* @param {?} route
* @param {?=} url
* @param {?=} breadcrumbs
* @return {?}
*/
Breadcrumb.prototype.buildBreadcrumb = /**
* @param {?} route
* @param {?=} url
* @param {?=} breadcrumbs
* @return {?}
*/
function (route, url, breadcrumbs) {
if (url === void 0) { url = ''; }
if (breadcrumbs === void 0) { breadcrumbs = []; }
// If no routeConfig is avalailable we are on the root path
/** @type {?} */
var label = route.routeConfig ? route.routeConfig.data['breadcrumb'] : 'Inicio';
/** @type {?} */
var path = route.routeConfig ? route.routeConfig.path : '';
// In the routeConfig the complete path is not available,
// so we rebuild it each time
/** @type {?} */
var nextUrl = "" + url + path + "/";
/** @type {?} */
var breadcrumb = {
label: label,
url: nextUrl,
};
/** @type {?} */
var newBreadcrumbs = __spread(breadcrumbs, [breadcrumb]);
if (route.firstChild) {
// If we are not on our current path yet,
// there will be more children to look after, to build our breadcumb
return this.buildBreadcrumb(route.firstChild, nextUrl, newBreadcrumbs);
}
return newBreadcrumbs;
};
Breadcrumb.decorators = [
{ type: core.Component, args: [{
selector: 'suka-breadcrumb',
template: "\n <ol class=\"breadcrumb\" *ngIf=\"router\">\n <li\n *ngFor=\"let breadcrumb of breadcrumbs$ | async; last as isLast;\"\n class=\"breadcrumb-item\"\n [ngClass]=\"{'active': isLast}\" aria-current=\"page\"\n >\n <a\n *ngIf=\"!isLast; else lastRoute\"\n [routerLink]=\"[breadcrumb.url]\"\n routerLinkActive=\"active\"\n >\n <suka-icon icon=\"home\" *ngIf=\"breadcrumb.label === 'Inicio'\"></suka-icon> {{ breadcrumb.label }}\n <suka-icon icon=\"chevron-right\"></suka-icon>\n </a>\n <ng-template #lastRoute>\n <suka-icon icon=\"home\" *ngIf=\"breadcrumb.label === 'Inicio'\"></suka-icon> {{ breadcrumb.label }}\n </ng-template>\n </li>\n </ol>\n ",
encapsulation: core.ViewEncapsulation.None
}] }
];
/** @nocollapse */
Breadcrumb.ctorParameters = function () { return [
{ type: router.ActivatedRoute, decorators: [{ type: core.Optional }] },
{ type: router.Router, decorators: [{ type: core.Optional }] }
]; };
return Breadcrumb;
}());
if (false) {
/**
* @ignore
* @type {?}
*/
Breadcrumb.prototype.breadcrumbs$;
/**
* @type {?}
* @private
*/
Breadcrumb.prototype.activatedRoute;
/** @type {?} */
Breadcrumb.prototype.router;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var BreadcrumbModule = /** @class */ (function () {
function BreadcrumbModule() {
}
BreadcrumbModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
Breadcrumb,
],
exports: [
Breadcrumb,
],
imports: [
common.CommonModule,
router.RouterModule,
IconModule,
]
},] }
];
return BreadcrumbModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var Page = /** @class */ (function () {
function Page() {
this.fluid = false;
this.narrow = false;
this.default = true;
this._fluid = false;
this.breadcrumb = true;
}
/**
* @return {?}
*/
Page.prototype.ngOnInit = /**
* @return {?}
*/
function () {
if (this.fluid) {
this._fluid = true;
this.default = false;
}
};
Page.decorators = [
{ type: core.Component, args: [{
selector: 'suka-page',
template: "\n <suka-page-header\n [breadcrumb]=\"breadcrumb\"\n [title]=\"title\"\n [subtitle]=\"subtitle\"\n [actions]=\"actions\"\n ></suka-page-header>\n\n <ng-content></ng-content>\n "
}] }
];
Page.propDecorators = {
fluid: [{ type: core.Input }],
narrow: [{ type: core.HostBinding, args: ['class.page--narrow',] }, { type: core.Input }],
default: [{ type: core.HostBinding, args: ['class.page',] }],
_fluid: [{ type: core.HostBinding, args: ['class.page--fluid',] }],
title: [{ type: core.Input }],
subtitle: [{ type: core.Input }],
actions: [{ type: core.Input }],
breadcrumb: [{ type: core.Input }]
};
return Page;
}());
if (false) {
/** @type {?} */
Page.prototype.fluid;
/** @type {?} */
Page.prototype.narrow;
/** @type {?} */
Page.prototype.default;
/** @type {?} */
Page.prototype._fluid;
/** @type {?} */
Page.prototype.title;
/** @type {?} */
Page.prototype.subtitle;
/** @type {?} */
Page.prototype.actions;
/** @type {?} */
Page.prototype.breadcrumb;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var PageHeader = /** @class */ (function () {
function PageHeader() {
this.baseClass = true;
this.breadcrumb = true;
}
/**
* @param {?} value
* @return {?}
*/
PageHeader.prototype.isTemplate = /**
* @param {?} value
* @return {?}
*/
function (value) {
return value instanceof core.TemplateRef;
};
PageHeader.decorators = [
{ type: core.Component, args: [{
selector: "suka-page-header",
template: "\n <suka-breadcrumb *ngIf=\"breadcrumb\"></suka-breadcrumb>\n\n <suka-stack\n alignment=\"center\"\n >\n <div sukaStackItem fill=\"true\">\n <ng-container *ngIf=\"!isTemplate(title)\">\n <h3 class=\"page__header__title\">{{title}}</h3>\n <span *ngIf=\"subtitle\" class=\"page__header__subtitle\">{{subtitle}}</span>\n </ng-container>\n\n <ng-template *ngIf=\"isTemplate(title)\" [ngTemplateOutlet]=\"title\"></ng-template>\n </div>\n\n <ng-template [ngTemplateOutlet]=\"actions\"></ng-template>\n </suka-stack>\n "
}] }
];
PageHeader.propDecorators = {
baseClass: [{ type: core.HostBinding, args: ['class.page__header',] }],
title: [{ type: core.Input }],
subtitle: [{ type: core.Input }],
actions: [{ type: core.Input }],
breadcrumb: [{ type: core.Input }]
};
return PageHeader;
}());
if (false) {
/** @type {?} */
PageHeader.prototype.baseClass;
/** @type {?} */
PageHeader.prototype.title;
/** @type {?} */
PageHeader.prototype.subtitle;
/** @type {?} */
PageHeader.prototype.actions;
/** @type {?} */
PageHeader.prototype.breadcrumb;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var PageModule = /** @class */ (function () {
function PageModule() {
}
PageModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
Page,
PageHeader,
],
exports: [
Page,
PageHeader,
],
imports: [
common.CommonModule,
router.RouterModule,
BreadcrumbModule,
StackModule,
]
},] }
];
return PageModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var noop = (/**
* @return {?}
*/
function () { });
var ɵ0$1 = noop;
var FileUploader = /** @class */ (function () {
function FileUploader() {
/**
* Accessible text for the button that opens the upload window.
*/
this.buttonText = 'Agregar archivo(s)';
/**
* Type set for button
*/
this.buttonType = 'basic';
/**
* Specify the types of files that the input should be able to receive
*/
this.accept = [];
/**
* Set to `false` to tell the component to only accept a single file on upload.
*
* Defaults to `true`. Accepts multiple files.
*/
this.multiple = true;
/**
* Set to `true` for a loading file uploader.
*/
this.skeleton = false;
/**
* Provides a unique id for the underlying `<input>` node
*/
this.fileUploaderId = "file-uploader-" + FileUploader.fileUploaderCount;
/**
* The list of files that have been submitted to be uploaded
*/
this.files = new Set();
/**
* Emits an event to other classes when files change
*/
this.filesChange = new core.EventEmitter();
this.baseClass = true;
this.onTouchedCallback = noop;
this.onChangeCallback = noop;
FileUploader.fileUploaderCount++;
}
Object.defineProperty(FileUploader.prototype, "value", {
/**
* Specifies the property to be used as the return value to `ngModel`
*/
get: /**
* Specifies the property to be used as the return value to `ngModel`
* @return {?}
*/
function () {
return this.files;
},
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
if (v !== this.files) {
this.files = v;
this.onChangeCallback(v);
}
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
FileUploader.prototype.onBlur = /**
* @return {?}
*/
function () {
this.onTouchedCallback();
};
/**
* Propagates the injected `value`.
*/
/**
* Propagates the injected `value`.
* @param {?} value
* @return {?}
*/
FileUploader.prototype.writeValue = /**
* Propagates the injected `value`.
* @param {?} value
* @return {?}
*/
function (value) {
if (value !== this.value) {
this.files = value;
}
};
/**
* @return {?}
*/
FileUploader.prototype.onFilesAdded = /**
* @return {?}
*/
function () {
var e_1, _a;
/** @type {?} */
var files = this.fileInput.nativeElement.files;
if (!this.multiple) {
this.files.clear();
}
try {
for (var files_1 = __values(files), files_1_1 = files_1.next(); !files_1_1.done; files_1_1 = files_1.next()) {
var file = files_1_1.value;
/** @type {?} */
var fileItem = {
file: file,
uploaded: false,
state: 'edit',
invalid: false,
invalidText: '',
};
this.files.add(fileItem);
this.filesChange.emit(this.files);
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (files_1_1 && !files_1_1.done && (_a = files_1.return)) _a.call(files_1);
}
finally { if (e_1) throw e_1.error; }
}
this.value = this.files;
};
/**
* @param {?} fileItem
* @return {?}
*/
FileUploader.prototype.removeFile = /**
* @param {?} fileItem
* @return {?}
*/
function (fileItem) {
this.files.delete(fileItem);
this.fileInput.nativeElement.value = '';
this.filesChange.emit(this.files);
};
/**
* Registers the injected function to control the touch use of the `FileUploader`.
*/
/**
* Registers the injected function to control the touch use of the `FileUploader`.
* @param {?} fn
* @return {?}
*/
FileUploader.prototype.registerOnTouched = /**
* Registers the injected function to control the touch use of the `FileUploader`.
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onTouchedCallback = fn;
};
/**
* Sets a method in order to propagate changes back to the form.
*/
/**
* Sets a method in order to propagate changes back to the form.
* @param {?} fn
* @return {?}
*/
FileUploader.prototype.registerOnChange = /**
* Sets a method in order to propagate changes back to the form.
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onChangeCallback = fn;
};
/**
* Counter used to create unique ids for file-uploader components
*/
FileUploader.fileUploaderCount = 0;
FileUploader.decorators = [
{ type: core.Component, args: [{
selector: 'suka-file-uploader',
template: "\n <ng-container *ngIf=\"!skeleton; else skeletonTemplate\">\n <label class=\"label\">{{title}}</label>\n <div *ngIf=\"description\" class=\"form__helper-text\">{{description}}</div>\n <div class=\"file\">\n <button\n type=\"button\"\n [sukaButton]=\"buttonType\"\n (click)=\"fileInput.click()\"\n [attr.for]=\"fileUploaderId\"\n [size]=\"size\">\n {{buttonText}}\n </button>\n <input\n #fileInput\n type=\"file\"\n class=\"file-input\"\n [accept]=\"accept\"\n [id]=\"fileUploaderId\"\n [multiple]=\"multiple\"\n tabindex=\"-1\"\n (change)=\"onFilesAdded()\"/>\n <div class=\"file-container\">\n <div *ngFor=\"let fileItem of files\">\n <suka-file [fileItem]=\"fileItem\" (remove)=\"removeFile(fileItem)\"></suka-file>\n <div *ngIf=\"fileItem.invalid\" class=\"form-requirement\">\n {{fileItem.invalidText}}\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-template #skeletonTemplate>\n <div class=\"skeleton__text\" style=\"width: 100px\"></div>\n <div class=\"skeleton__text\" style=\"width: 225px\"></div>\n <button sukaButton skeleton=\"true\"></button>\n </ng-template>\n ",
providers: [
{
provide: forms.NG_VALUE_ACCESSOR,
useExisting: FileUploader,
multi: true
}
]
}] }
];
/** @nocollapse */
FileUploader.ctorParameters = function () { return []; };
FileUploader.propDecorators = {
buttonText: [{ type: core.Input }],
buttonType: [{ type: core.Input }],
title: [{ type: core.Input }],
description: [{ type: core.Input }],
accept: [{ type: core.Input }],
multiple: [{ type: core.Input }],
skeleton: [{ type: core.Input }],
size: [{ type: core.Input }],
fileUploaderId: [{ type: core.Input }],
fileInput: [{ type: core.ViewChild, args: ['fileInput', { static: false },] }],
files: [{ type: core.Input }],
filesChange: [{ type: core.Output }],
baseClass: [{ type: core.HostBinding, args: ['class.file-uploader',] }]
};
return FileUploader;
}());
if (false) {
/**
* Counter used to create unique ids for file-uploader components
* @type {?}
*/
FileUploader.fileUploaderCount;
/**
* Accessible text for the button that opens the upload window.
* @type {?}
*/
FileUploader.prototype.buttonText;
/**
* Type set for button
* @type {?}
*/
FileUploader.prototype.buttonType;
/**
* Text set to the title
* @type {?}
*/
FileUploader.prototype.title;
/**
* Text set to the description
* @type {?}
*/
FileUploader.prototype.description;
/**
* Specify the types of files that the input should be able to receive
* @type {?}
*/
FileUploader.prototype.accept;
/**
* Set to `false` to tell the component to only accept a single file on upload.
*
* Defaults to `true`. Accepts multiple files.
* @type {?}
*/
FileUploader.prototype.multiple;
/**
* Set to `true` for a loading file uploader.
* @type {?}
*/
FileUploader.prototype.skeleton;
/**
* Sets the size of the button.
* @type {?}
*/
FileUploader.prototype.size;
/**
* Provides a unique id for the underlying `<input>` node
* @type {?}
*/
FileUploader.prototype.fileUploaderId;
/**
* Maintains a reference to the view DOM element of the underlying `<input>` node
* @type {?}
*/
FileUploader.prototype.fileInput;
/**
* The list of files that have been submitted to be uploaded
* @type {?}
*/
FileUploader.prototype.files;
/**
* Emits an event to other classes when files change
* @type {?}
*/
FileUploader.prototype.filesChange;
/** @type {?} */
FileUploader.prototype.baseClass;
/**
* @type {?}
* @protected
*/
FileUploader.prototype.onTouchedCallback;
/**
* @type {?}
* @protected
*/
FileUploader.prototype.onChangeCallback;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var File = /** @class */ (function () {
function File() {
this.remove = new core.EventEmitter();
this.selectedFile = true;
}
Object.defineProperty(File.prototype, "isInvalidText", {
get: /**
* @return {?}
*/
function () {
return this.fileItem.invalidText;
},
enumerable: true,
configurable: true
});
Object.defineProperty(File.prototype, "isValid", {
get: /**
* @return {?}
*/
function () {
return this.fileItem.state === 'complete';
},
enumerable: true,
configurable: true
});
File.decorators = [
{ type: core.Component, args: [{
selector: 'suka-file',
template: "\n <p class=\"file-filename\">{{fileItem.file.name}}</p>\n <span\n *ngIf=\"fileItem.state === 'edit'\"\n class=\"file__state-container\"\n (click)=\"remove.emit()\"\n (keyup.enter)=\"remove.emit()\"\n (keyup.space)=\"remove.emit()\"\n tabindex=\"0\">\n <suka-icon\n *ngIf=\"isInvalidText\"\n icon=\"alert-circle\"\n class=\"file--invalid\">\n </suka-icon>\n <suka-icon\n icon=\"x\"\n class=\"file-close\">\n </suka-icon>\n </span>\n <span *ngIf=\"fileItem.state === 'upload'\">\n <suka-loading size=\"sm\"></suka-loading>\n </span>\n <span\n *ngIf=\"fileItem.state === 'complete'\"\n class=\"file__state-container\"\n tabindex=\"0\">\n <suka-icon\n icon=\"check\"\n class=\"file-complete\">\n </suka-icon>\n </span>\n "
}] }
];
File.propDecorators = {
fileItem: [{ type: core.Input }],
remove: [{ type: core.Output }],
selectedFile: [{ type: core.HostBinding, args: ['class.file__selected-file',] }],
isInvalidText: [{ type: core.HostBinding, args: ['class.file__selected-file--invalid',] }],
isValid: [{ type: core.HostBinding, args: ['class.file__selected-file--valid',] }]
};
return File;
}());
if (false) {
/**
* A single `FileItem` from the set of `FileItem`s
* @type {?}
*/
File.prototype.fileItem;
/** @type {?} */
File.prototype.remove;
/** @type {?} */
File.prototype.selectedFile;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var FileUploaderModule = /** @class */ (function () {
function FileUploaderModule() {
}
FileUploaderModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
FileUploader,
File
],
exports: [
FileUploader
],
imports: [
common.CommonModule,
ButtonModule,
IconModule,
LoadingModule,
]
},] }
];
return FileUploaderModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var Avatar = /** @class */ (function () {
function Avatar() {
/**
* Sets the avatar color.
*/
this.color = 'gray';
/**
* Sets the avatar class
*/
this.class = '';
/**
* Sets the avatar size.
*/
this.size = 'md';
}
Object.defineProperty(Avatar.prototype, "attrClass", {
get: /**
* @return {?}
*/
function () {
return "avatar avatar--" + this.color + " avatar--" + this.size + " " + this.class;
},
enumerable: true,
configurable: true
});
/**
* Sets the avatar initials according to the name input.
*/
/**
* Sets the avatar initials according to the name input.
* @return {?}
*/
Avatar.prototype.getInitials = /**
* Sets the avatar initials according to the name input.
* @return {?}
*/
function () {
if (this.name === '' || !this.name) {
return '';
}
/** @type {?} */
var names = this.name.split(' ');
/** @type {?} */
var initials = names[0].substring(0, 1).toUpperCase();
if (names.length > 1) {
initials += names[names.length - 1].substring(0, 1).toUpperCase();
}
return initials;
};
Avatar.decorators = [
{ type: core.Component, args: [{
selector: "suka-avatar",
template: "\n <ng-container *ngIf=\"!imgSrc\">{{getInitials()}}</ng-container>\n <img *ngIf=\"imgSrc\" [src]=\"imgSrc\" />\n "
}] }
];
Avatar.propDecorators = {
imgSrc: [{ type: core.Input }],
name: [{ type: core.Input }],
color: [{ type: core.Input }],
class: [{ type: core.Input }],
size: [{ type: core.Input }],
attrClass: [{ type: core.HostBinding, args: ['attr.class',] }]
};
return Avatar;
}());
if (false) {
/**
* Sets an image url for the avatar. If it is set, it displays instead of the name initials.
* @type {?}
*/
Avatar.prototype.imgSrc;
/**
* Avatar name. Used to display its initials (Max 2).
* @type {?}
*/
Avatar.prototype.name;
/**
* Sets the avatar color.
* @type {?}
*/
Avatar.prototype.color;
/**
* Sets the avatar class
* @type {?}
*/
Avatar.prototype.class;
/**
* Sets the avatar size.
* @type {?}
*/
Avatar.prototype.size;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var AvatarModule = /** @class */ (function () {
function AvatarModule() {
}
AvatarModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [Avatar],
exports: [Avatar],
imports: [common.CommonModule]
},] }
];
return AvatarModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var DatePickerInput = /** @class */ (function () {
function DatePickerInput(elementRef) {
this.elementRef = elementRef;
/**
* Select a calendar type for the `model`.
*/
this.type = 'simple';
/**
* Sets the id for the `DatePickerInput`.
*/
this.id = "datepicker-" + DatePickerInput.datePickerCount++;
/**
* Set to `true` to display a calendar icon
*/
this.hasIcon = false;
/**
* Sets the input's placeholder.
*/
this.placeholder = 'dd/mm/yyyy';
/**
* Sets the pattern to follow.
*/
this.pattern = '^\\d{1,2}/\\d{1,2}/\\d{4}$';
/**
* Emits event notifying other classes of a value change.
*/
this.valueChange = new core.EventEmitter();
/**
* Set to `true` to disable the input
*/
this.disabled = false;
/**
* Set to `true` to display invalid state.
*/
this.invalid = false;
/**
* Sets a time picker icon for input
*/
this.timePicker = false;
/**
* Skeleton state.
*/
this.skeleton = false;
/**
* Sets the `DatepickerInput` value.
*/
this.value = '';
this.onTouched = (/**
* @return {?}
*/
function () { });
this.propagateChange = (/**
* @param {?} _
* @return {?}
*/
function (_) { });
}
/**
* Sets the value, marks the input as touched and emits a value change event.
*/
/**
* Sets the value, marks the input as touched and emits a value change event.
* @param {?} event
* @return {?}
*/
DatePickerInput.prototype.onChange = /**
* Sets the value, marks the input as touched and emits a value change event.
* @param {?} event
* @return {?}
*/
function (event) {
this.value = event.target.value;
this.valueChange.emit(this.value);
this.propagateChange(this.value);
this.onTouched();
};
/**
* @param {?} value
* @return {?}
*/
DatePickerInput.prototype.writeValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
this.value = value;
};
/**
* @param {?} fn
* @return {?}
*/
DatePickerInput.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.propagateChange = fn;
};
/**
* @param {?} fn
* @return {?}
*/
DatePickerInput.prototype.registerOnTouched = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onTouched = fn;
};
/**
* @param {?} value
* @return {?}
*/
DatePickerInput.prototype.isTemplate = /**
* @param {?} value
* @return {?}
*/
function (value) {
return value instanceof core.TemplateRef;
};
DatePickerInput.datePickerCount = 0;
DatePickerInput.decorators = [
{ type: core.Component, args: [{
selector: 'suka-date-picker-input',
template: "\n <div class=\"date-picker-input\"\n [ngClass]=\"{\n 'date-picker--single' : type === 'single',\n 'date-picker--range' : type === 'range',\n 'skeleton' : skeleton\n }\">\n <div class=\"date-picker-input-container\">\n <label *ngIf=\"label\" [for]=\"id\" class=\"label\">\n <ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n <ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n </label>\n <div class=\"date-picker-input__wrapper\">\n <input\n *ngIf=\"!skeleton\"\n autocomplete=\"off\"\n type=\"text\"\n class=\"date-picker__input\"\n [value]=\"value\"\n [pattern]=\"pattern\"\n [placeholder]=\"placeholder\"\n [id]= \"id\"\n [disabled]=\"disabled\"\n (change)=\"onChange($event)\"/>\n <suka-icon\n icon=\"calendar\"\n class=\"date-picker__icon\"\n *ngIf=\"!timePicker\"\n >\n </suka-icon>\n <suka-icon\n icon=\"clock\"\n class=\"date-picker__icon\"\n *ngIf=\"timePicker\"\n >\n </suka-icon>\n </div>\n <div *ngIf=\"invalid\" class=\"form-requirement\">\n <ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n <ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n </div>\n </div>\n </div>\n ",
providers: [
{
provide: forms.NG_VALUE_ACCESSOR,
useExisting: DatePickerInput,
multi: true
}
]
}] }
];
/** @nocollapse */
DatePickerInput.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
DatePickerInput.propDecorators = {
type: [{ type: core.Input }],
id: [{ type: core.Input }],
hasIcon: [{ type: core.Input }],
label: [{ type: core.Input }],
placeholder: [{ type: core.Input }],
pattern: [{ type: core.Input }],
valueChange: [{ type: core.Output }],
disabled: [{ type: core.Input }],
invalid: [{ type: core.Input }],
invalidText: [{ type: core.Input }],
timePicker: [{ type: core.Input }],
skeleton: [{ type: core.Input }],
value: [{ type: core.Input }]
};
return DatePickerInput;
}());
if (false) {
/**
* @type {?}
* @private
*/
DatePickerInput.datePickerCount;
/**
* Select a calendar type for the `model`.
* @type {?}
*/
DatePickerInput.prototype.type;
/**
* Sets the id for the `DatePickerInput`.
* @type {?}
*/
DatePickerInput.prototype.id;
/**
* Set to `true` to display a calendar icon
* @type {?}
*/
DatePickerInput.prototype.hasIcon;
/**
* label content.
* @type {?}
*/
DatePickerInput.prototype.label;
/**
* Sets the input's placeholder.
* @type {?}
*/
DatePickerInput.prototype.placeholder;
/**
* Sets the pattern to follow.
* @type {?}
*/
DatePickerInput.prototype.pattern;
/**
* Emits event notifying other classes of a value change.
* @type {?}
*/
DatePickerInput.prototype.valueChange;
/**
* Set to `true` to disable the input
* @type {?}
*/
DatePickerInput.prototype.disabled;
/**
* Set to `true` to display invalid state.
* @type {?}
*/
DatePickerInput.prototype.invalid;
/**
* Feedback message to display when `DatepickerInput` is invalid.
* @type {?}
*/
DatePickerInput.prototype.invalidText;
/**
* Sets a time picker icon for input
* @type {?}
*/
DatePickerInput.prototype.timePicker;
/**
* Skeleton state.
* @type {?}
*/
DatePickerInput.prototype.skeleton;
/**
* Sets the `DatepickerInput` value.
* @type {?}
*/
DatePickerInput.prototype.value;
/** @type {?} */
DatePickerInput.prototype.onTouched;
/** @type {?} */
DatePickerInput.prototype.propagateChange;
/**
* @type {?}
* @protected
*/
DatePickerInput.prototype.elementRef;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var DatePickerInputModule = /** @class */ (function () {
function DatePickerInputModule() {
}
DatePickerInputModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
DatePickerInput
],
exports: [
DatePickerInput
],
imports: [
common.CommonModule,
IconModule,
]
},] }
];
return DatePickerInputModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
// tslint:disable: variable-name
/**
* @record
*/
function Config() { }
if (false) {
/** @type {?|undefined} */
Config.prototype.input;
/** @type {?|undefined} */
Config.prototype.position;
}
/**
* @param {?=} config
* @return {?}
*/
function rangePlugin(config) {
if (config === void 0) { config = {}; }
return (/**
* @param {?} fp
* @return {?}
*/
function (fp) {
/** @type {?} */
var dateFormat = '';
/** @type {?} */
var secondInput;
/** @type {?} */
var _secondInputFocused;
/** @type {?} */
var _prevDates;
/** @type {?} */
var createSecondInput = (/**
* @return {?}
*/
function () {
if (config.input) {
secondInput =
config.input instanceof Element
? config.input
: ((/** @type {?} */ (window.document.querySelector(config.input))));
}
else {
secondInput = (/** @type {?} */ (fp._input.cloneNode()));
secondInput.removeAttribute('id');
secondInput._flatpickr = undefined;
}
if (secondInput.value) {
/** @type {?} */
var parsedDate = fp.parseDate(secondInput.value);
if (parsedDate) {
fp.selectedDates.push(parsedDate);
}
}
secondInput.setAttribute('data-fp-omit', '');
fp._bind(secondInput, ['focus', 'click'], (/**
* @return {?}
*/
function () {
if (fp.selectedDates[1]) {
fp.latestSelectedDateObj = fp.selectedDates[1];
fp._setHoursFromDate(fp.selectedDates[1]);
fp.jumpToDate(fp.selectedDates[1]);
}
_secondInputFocused = true;
fp.isOpen = false;
fp.open(undefined, config.position === 'left' ? fp._input : secondInput);
}));
fp._bind(fp._input, ['focus', 'click'], (/**
* @param {?} e
* @return {?}
*/
function (e) {
e.preventDefault();
fp.isOpen = false;
fp.open();
}));
if (fp.config.allowInput) {
fp._bind(secondInput, 'keydown', (/**
* @param {?} e
* @return {?}
*/
function (e) {
if (((/** @type {?} */ (e))).key === 'Enter') {
fp.setDate([fp.selectedDates[0], secondInput.value], true, dateFormat);
secondInput.click();
}
}));
}
if (!config.input) {
fp._input.parentNode &&
fp._input.parentNode.insertBefore(secondInput, fp._input.nextSibling);
}
});
/** @type {?} */
var plugin = {
onParseConfig: /**
* @return {?}
*/
function () {
fp.config.mode = 'range';
dateFormat = fp.config.altInput
? fp.config.altFormat
: fp.config.dateFormat;
},
onReady: /**
* @return {?}
*/
function () {
createSecondInput();
fp.config.ignoredFocusElements.push(secondInput);
if (fp.config.allowInput) {
fp._input.removeAttribute('readonly');
secondInput.removeAttribute('readonly');
}
else {
secondInput.setAttribute('readonly', 'readonly');
}
fp._bind(fp._input, 'focus', (/**
* @return {?}
*/
function () {
fp.latestSelectedDateObj = fp.selectedDates[0];
fp._setHoursFromDate(fp.selectedDates[0]);
_secondInputFocused = false;
fp.jumpToDate(fp.selectedDates[0]);
}));
if (fp.config.allowInput) {
fp._bind(fp._input, 'keydown', (/**
* @param {?} e
* @return {?}
*/
function (e) {
if (((/** @type {?} */ (e))).key === 'Enter') {
fp.setDate([fp._input.value, fp.selectedDates[1]], true, dateFormat);
}
}));
}
fp.setDate(fp.selectedDates, false);
plugin.onValueUpdate(fp.selectedDates);
fp.loadedPlugins.push('range');
},
onPreCalendarPosition: /**
* @return {?}
*/
function () {
if (_secondInputFocused) {
fp._positionElement = secondInput;
setTimeout((/**
* @return {?}
*/
function () {
fp._positionElement = fp._input;
}), 0);
}
},
onChange: /**
* @return {?}
*/
function () {
if (!fp.selectedDates.length) {
setTimeout((/**
* @return {?}
*/
function () {
if (fp.selectedDates.length) {
return;
}
secondInput.value = '';
_prevDates = [];
}), 10);
}
if (_secondInputFocused) {
setTimeout((/**
* @return {?}
*/
function () {
secondInput.focus();
}), 0);
}
},
onDestroy: /**
* @return {?}
*/
function () {
if (!config.input) {
secondInput.parentNode &&
secondInput.parentNode.removeChild(secondInput);
}
},
onValueUpdate: /**
* @param {?} selDates
* @return {?}
*/
function (selDates) {
var _a, _b, _c;
if (!secondInput) {
return;
}
_prevDates =
!_prevDates || selDates.length >= _prevDates.length
? __spread(selDates) : _prevDates;
/** @type {?} */
var newDates;
if (_prevDates.length > selDates.length) {
/** @type {?} */
var newSelectedDate = selDates[0];
newDates = _secondInputFocused
? [_prevDates[0], newSelectedDate]
: [newSelectedDate, _prevDates[1]];
if (newDates[0].getTime() > newDates[1].getTime()) {
if (_secondInputFocused) {
newDates[0] = newDates[1];
}
else {
newDates[1] = newDates[0];
}
}
fp.setDate(newDates, false);
_prevDates = __spread(newDates);
}
else if (selDates.length === 2) {
newDates = selDates;
fp.setDate(newDates, false);
_prevDates = __spread(newDates);
/** @type {?} */
var changeEvent = document.createEvent('HTMLEvents');
changeEvent.initEvent('change', false, true);
fp._input.dispatchEvent(changeEvent);
}
_a = __read(fp.selectedDates.map((/**
* @param {?} d
* @return {?}
*/
function (d) { return fp.formatDate(d, dateFormat); })), 2), _b = _a[0], fp._input.value = _b === void 0 ? '' : _b, _c = _a[1], secondInput.value = _c === void 0 ? '' : _c;
},
};
return plugin;
});
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var monthToStr = (/**
* @param {?} monthNumber
* @param {?} shorthand
* @param {?} locale
* @return {?}
*/
function (monthNumber, shorthand, locale) {
return locale.months[shorthand ? 'shorthand' : 'longhand'][monthNumber];
});
var ɵ0$2 = monthToStr;
/** @type {?} */
var config = {
selectorInit: '[data-date-picker]',
selectorDatePickerInput: '[data-date-picker-input]',
selectorDatePickerInputFrom: '[data-date-picker-input-from]',
selectorDatePickerInputTo: '[data-date-picker-input-to]',
selectorDatePickerIcon: '[data-date-picker-icon]',
selectorFlatpickrMonthYearContainer: '.flatpickr-current-month',
selectorFlatpickrYearContainer: '.numInputWrapper',
selectorFlatpickrCurrentMonth: '.cur-month',
classCalendarContainer: "date-picker__calendar",
classMonth: "date-picker__month",
classWeekdays: "date-picker__weekdays",
classDays: "date-picker__days",
classWeekday: "date-picker__weekday",
classDay: "date-picker__day",
classFocused: "focused",
classVisuallyHidden: "visually-hidden",
classFlatpickrCurrentMonth: 'cur-month',
attribType: 'data-date-picker-type',
dateFormat: 'd/m/Y',
shorthand: false
};
/** @type {?} */
var sukaFlatpickrMonthSelectPlugin = (/**
* @param {?} fp
* @return {?}
*/
function (fp) {
/** @type {?} */
var setupElements = (/**
* @return {?}
*/
function () {
var _a;
if (!fp.monthElements) {
return;
}
fp.monthElements.forEach((/**
* @param {?} elem
* @return {?}
*/
function (elem) {
if (!elem.parentNode) {
return;
}
elem.parentNode.removeChild(elem);
}));
(_a = fp.monthElements).splice.apply(_a, __spread([0,
fp.monthElements.length], fp.monthElements.map((/**
* @return {?}
*/
function () {
/** @type {?} */
var monthElement = fp._createElement('span', config.classFlatpickrCurrentMonth);
monthElement.textContent = monthToStr(fp.currentMonth, config.shorthand === true, fp.l10n);
fp.yearElements[0]
.closest(config.selectorFlatpickrMonthYearContainer)
.insertBefore(monthElement, fp.yearElements[0].closest(config.selectorFlatpickrYearContainer));
return monthElement;
}))));
});
/** @type {?} */
var updateCurrentMonth = (/**
* @return {?}
*/
function () {
/** @type {?} */
var monthStr = monthToStr(fp.currentMonth, config.shorthand === true, fp.l10n);
if (fp.yearElements) {
fp.yearElements.forEach((/**
* @param {?} elem
* @return {?}
*/
function (elem) {
/** @type {?} */
var currentMonthContainer = elem.closest(config.selectorFlatpickrMonthYearContainer);
Array.prototype.forEach.call(currentMonthContainer.querySelectorAll('.cur-month'), (/**
* @param {?} monthElement
* @return {?}
*/
function (monthElement) {
monthElement.textContent = monthStr;
}));
}));
}
});
/** @type {?} */
var register = (/**
* @return {?}
*/
function () {
fp.loadedPlugins.push('sukaFlatpickrMonthSelectPlugin');
});
return {
onMonthChange: updateCurrentMonth,
onOpen: updateCurrentMonth,
onReady: [setupElements, updateCurrentMonth, register]
};
});
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var DatePicker = /** @class */ (function () {
function DatePicker(elementRef) {
var _this = this;
this.elementRef = elementRef;
/**
* Select calendar range mode
*/
this.range = false;
/**
* Format of date
*
* For reference: https://flatpickr.js.org/formatting/
*/
this.dateFormat = 'd/m/Y';
/**
* Defines if time selector should be present. Please define dateFormat accordingly. i.e.: "d/m/Y H:i"
*
* For reference: https://flatpickr.js.org/formatting/
*/
this.hasTime = false;
/**
* Disables calendar input. Useful for time picker functionality. Pair it with a time related format accordingly. i.e.: "H:i"
*/
this.noCalendar = false;
/**
* Sets the placeholder text.
*/
this.placeholder = 'dd/mm/yyyy';
/**
* Sets the pattern to follow.
*/
this.pattern = '^\\d{1,2}/\\d{1,2}/\\d{4}$';
/**
* Date picker id.
*/
this.id = "datepicker-" + DatePicker.datePickerCount++;
/**
* Set to `true` to disable the `Datepicker`
*/
this.disabled = false;
/**
* Set to `true` to display invalid state.
*/
this.invalid = false;
/**
* Skeleton state.
*/
this.skeleton = false;
/**
* Array of date picker plugins.
*/
this.plugins = [];
/**
* Emits event notifying other classes of a change.
*/
this.valueChange = new core.EventEmitter();
this._value = [];
this._flatpickrOptions = {
allowInput: true
};
this.flatpickrBaseOptions = {
mode: 'single',
dateFormat: 'd/m/Y',
locale: es_js.Spanish,
plugins: this.plugins,
onOpen: (/**
* @return {?}
*/
function () { _this.updateClassNames(); }),
value: this.value
};
this.flatpickrInstance = null;
this.onTouched = (/**
* @return {?}
*/
function () { });
this.propagateChange = (/**
* @param {?} _
* @return {?}
*/
function (_) { });
}
Object.defineProperty(DatePicker.prototype, "value", {
get: /**
* @return {?}
*/
function () {
return this._value;
},
/**
* Sets the value.
*/
set: /**
* Sets the value.
* @param {?} v
* @return {?}
*/
function (v) {
if (!v) {
v = [];
}
this._value = v;
},
enumerable: true,
configurable: true
});
Object.defineProperty(DatePicker.prototype, "flatpickrOptions", {
get: /**
* @return {?}
*/
function () {
/** @type {?} */
var plugins = __spread(this.plugins, [sukaFlatpickrMonthSelectPlugin]);
if (this.range) {
plugins.push(rangePlugin({ input: "#" + this.id + "-rangeInput", position: 'left' }));
}
return Object.assign({}, this._flatpickrOptions, this.flatpickrBaseOptions, {
mode: this.range ? 'range' : 'single',
plugins: plugins,
dateFormat: this.dateFormat,
enableTime: this.hasTime,
noCalendar: this.noCalendar,
});
},
/**
* Flatpickr options
*/
set: /**
* Flatpickr options
* @param {?} options
* @return {?}
*/
function (options) {
this._flatpickrOptions = Object.assign({}, this._flatpickrOptions, options);
},
enumerable: true,
configurable: true
});
/**
* @param {?} changes
* @return {?}
*/
DatePicker.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
if (this.isFlatpickrLoaded()) {
/** @type {?} */
var dates = this.flatpickrInstance.selectedDates;
if (changes.value && this.didDateValueChange(changes.value.currentValue, changes.value.previousValue)) {
dates = changes.value.currentValue;
}
// only reset the flatpickr instance on Input changes
this.flatpickrInstance = flatpickr("#" + this.id, this.flatpickrOptions);
this.setDateValues(dates);
}
};
// because the actual view may be delayed in loading (think projection into a tab pane)
// and because we rely on a library that operates outside the Angular view of the world
// we need to keep trying to load the library, until the relevant DOM is actually live
// because the actual view may be delayed in loading (think projection into a tab pane)
// and because we rely on a library that operates outside the Angular view of the world
// we need to keep trying to load the library, until the relevant DOM is actually live
/**
* @return {?}
*/
DatePicker.prototype.ngAfterViewChecked =
// because the actual view may be delayed in loading (think projection into a tab pane)
// and because we rely on a library that operates outside the Angular view of the world
// we need to keep trying to load the library, until the relevant DOM is actually live
/**
* @return {?}
*/
function () {
if (!this.isFlatpickrLoaded()) {
this.flatpickrInstance = flatpickr("#" + this.id, this.flatpickrOptions);
// if (and only if) the initialization succeeded, we can set the date values
if (this.isFlatpickrLoaded()) {
if (this.value.length > 0) {
this.setDateValues(this.value);
}
}
}
};
/**
* @return {?}
*/
DatePicker.prototype.onFocus = /**
* @return {?}
*/
function () {
this.onTouched();
};
/**
* Writes a value from the model to the component. Expects the value to be `null` or `(Date | string)[]`
* @param value value received from the model
*/
/**
* Writes a value from the model to the component. Expects the value to be `null` or `(Date | string)[]`
* @param {?} value value received from the model
* @return {?}
*/
DatePicker.prototype.writeValue = /**
* Writes a value from the model to the component. Expects the value to be `null` or `(Date | string)[]`
* @param {?} value value received from the model
* @return {?}
*/
function (value) {
this.value = value;
if (this.isFlatpickrLoaded() && this.flatpickrInstance.config) {
this.setDateValues(this.value);
}
};
/**
* @param {?} fn
* @return {?}
*/
DatePicker.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.propagateChange = fn;
};
/**
* @param {?} fn
* @return {?}
*/
DatePicker.prototype.registerOnTouched = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onTouched = fn;
};
/**
* Cleans up our flatpickr instance
*/
/**
* Cleans up our flatpickr instance
* @return {?}
*/
DatePicker.prototype.ngOnDestroy = /**
* Cleans up our flatpickr instance
* @return {?}
*/
function () {
if (!this.isFlatpickrLoaded()) {
return;
}
this.flatpickrInstance.destroy();
};
/**
* Handles the `valueChange` event from the primary/single input
*/
/**
* Handles the `valueChange` event from the primary/single input
* @param {?} event
* @return {?}
*/
DatePicker.prototype.onValueChange = /**
* Handles the `valueChange` event from the primary/single input
* @param {?} event
* @return {?}
*/
function (event) {
if (this.isFlatpickrLoaded()) {
/** @type {?} */
var date = this.flatpickrInstance.parseDate(event, this.dateFormat);
if (this.range) {
this.setDateValues([date, this.flatpickrInstance.selectedDates[1]]);
}
else {
this.setDateValues([date]);
}
this.doSelect(this.flatpickrInstance.selectedDates);
}
};
/**
* Handles the `valueChange` event from the range input
*/
/**
* Handles the `valueChange` event from the range input
* @param {?} event
* @return {?}
*/
DatePicker.prototype.onRangeValueChange = /**
* Handles the `valueChange` event from the range input
* @param {?} event
* @return {?}
*/
function (event) {
if (this.isFlatpickrLoaded()) {
/** @type {?} */
var date = this.flatpickrInstance.parseDate(event, this.dateFormat);
this.setDateValues([this.flatpickrInstance.selectedDates[0], date]);
this.doSelect(this.flatpickrInstance.selectedDates);
}
};
/**
* Suka uses a number of specific classnames for parts of the flatpickr - this idempotent method applies them if needed.
*/
/**
* Suka uses a number of specific classnames for parts of the flatpickr - this idempotent method applies them if needed.
* @protected
* @return {?}
*/
DatePicker.prototype.updateClassNames = /**
* Suka uses a number of specific classnames for parts of the flatpickr - this idempotent method applies them if needed.
* @protected
* @return {?}
*/
function () {
var _this = this;
if (!this.elementRef) {
return;
}
// get all the possible flatpickrs in the document - we need to add classes to (potentially) all of them
/** @type {?} */
var calendarContainer = document.querySelectorAll('.flatpickr-calendar');
/** @type {?} */
var monthContainer = document.querySelectorAll('.flatpickr-month');
/** @type {?} */
var weekdaysContainer = document.querySelectorAll('.flatpickr-weekdays');
/** @type {?} */
var weekdayContainer = document.querySelectorAll('.flatpickr-weekday');
/** @type {?} */
var daysContainer = document.querySelectorAll('.flatpickr-days');
/** @type {?} */
var dayContainer = document.querySelectorAll('.flatpickr-day');
// add classes to lists of elements
/** @type {?} */
var addClassIfNotExists = (/**
* @param {?} classname
* @param {?} elementList
* @return {?}
*/
function (classname, elementList) {
Array.from(elementList).forEach((/**
* @param {?} element
* @return {?}
*/
function (element) {
if (!element.classList.contains(classname)) {
element.classList.add(classname);
}
}));
});
// add classes (but only if they don't exist, small perf win)
addClassIfNotExists('date-picker__calendar', calendarContainer);
addClassIfNotExists('date-picker__month', monthContainer);
addClassIfNotExists('date-picker__weekdays', weekdaysContainer);
addClassIfNotExists('date-picker__days', daysContainer);
// add weekday classes and format the text
Array.from(weekdayContainer).forEach((/**
* @param {?} element
* @return {?}
*/
function (element) {
element.innerHTML = element.innerHTML.replace(/\s+/g, '');
element.classList.add('date-picker__weekday');
}));
// add day classes and special case the "today" element based on `this.value`
Array.from(dayContainer).forEach((/**
* @param {?} element
* @return {?}
*/
function (element) {
element.classList.add('date-picker__day');
if (!_this.value) {
return;
}
if (element.classList.contains('today') && _this.value.length > 0) {
element.classList.add('no-border');
}
else if (element.classList.contains('today') && _this.value.length === 0) {
element.classList.remove('no-border');
}
}));
};
/**
* Applies the given date value array to both the flatpickr instance and the `input`(s)
* @param dates the date values to apply
*/
/**
* Applies the given date value array to both the flatpickr instance and the `input`(s)
* @protected
* @param {?} dates the date values to apply
* @return {?}
*/
DatePicker.prototype.setDateValues = /**
* Applies the given date value array to both the flatpickr instance and the `input`(s)
* @protected
* @param {?} dates the date values to apply
* @return {?}
*/
function (dates) {
if (this.isFlatpickrLoaded()) {
/** @type {?} */
var singleInput_1 = this.elementRef.nativeElement.querySelector("#" + this.id);
/** @type {?} */
var rangeInput_1 = this.elementRef.nativeElement.querySelector("#" + this.id + "-rangeInput");
// set the date on the instance
this.flatpickrInstance.setDate(dates);
// we can either set a date value or an empty string, so we start with an empty string
/** @type {?} */
var singleDate_1 = '';
// if date is a string, parse and format
if (typeof this.flatpickrInstance.selectedDates[0] === 'string') {
singleDate_1 = this.flatpickrInstance.parseDate(this.flatpickrInstance.selectedDates[0], this.dateFormat);
singleDate_1 = this.flatpickrInstance.formatDate(singleDate_1, this.dateFormat);
// if date is not a string we can assume it's a Date and we should format
}
else if (!!this.flatpickrInstance.selectedDates[0]) {
singleDate_1 = this.flatpickrInstance.formatDate(this.flatpickrInstance.selectedDates[0], this.dateFormat);
}
if (rangeInput_1) {
// we can either set a date value or an empty string, so we start with an empty string
/** @type {?} */
var rangeDate_1 = '';
// if date is a string, parse and format
if (typeof this.flatpickrInstance.selectedDates[1] === 'string') {
rangeDate_1 = this.flatpickrInstance.parseDate(this.flatpickrInstance.selectedDates[1].toString(), this.dateFormat);
rangeDate_1 = this.flatpickrInstance.formatDate(rangeDate_1, this.dateFormat);
// if date is not a string we can assume it's a Date and we should format
}
else if (!!this.flatpickrInstance.selectedDates[1]) {
rangeDate_1 = this.flatpickrInstance.formatDate(this.flatpickrInstance.selectedDates[1], this.dateFormat);
}
setTimeout((/**
* @return {?}
*/
function () {
// apply the values
rangeInput_1.value = rangeDate_1;
singleInput_1.value = singleDate_1;
}));
}
}
};
/**
* @protected
* @param {?} selectedValue
* @return {?}
*/
DatePicker.prototype.doSelect = /**
* @protected
* @param {?} selectedValue
* @return {?}
*/
function (selectedValue) {
this.valueChange.emit(selectedValue);
this.propagateChange(selectedValue);
};
/**
* @protected
* @param {?} currentValue
* @param {?} previousValue
* @return {?}
*/
DatePicker.prototype.didDateValueChange = /**
* @protected
* @param {?} currentValue
* @param {?} previousValue
* @return {?}
*/
function (currentValue, previousValue) {
return currentValue[0] !== previousValue[0] || currentValue[1] !== previousValue[1];
};
/**
* More advanced checking of the loaded state of flatpickr
*/
/**
* More advanced checking of the loaded state of flatpickr
* @protected
* @return {?}
*/
DatePicker.prototype.isFlatpickrLoaded = /**
* More advanced checking of the loaded state of flatpickr
* @protected
* @return {?}
*/
function () {
// cast the instance to a boolean, and some method that has to exist for the library to be loaded in this case `setDate`
return !!this.flatpickrInstance && !!this.flatpickrInstance.setDate;
};
DatePicker.datePickerCount = 0;
DatePicker.decorators = [
{ type: core.Component, args: [{
selector: 'suka-date-picker',
template: "\n <div class=\"form-item\">\n <div\n class=\"date-picker\"\n [ngClass]=\"{\n 'date-picker--range' : range,\n 'date-picker--single' : !range,\n 'date-picker--range-with-time' : range && hasTime,\n 'skeleton' : skeleton\n }\">\n <div class=\"date-picker-container\">\n <suka-date-picker-input\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [pattern]=\"pattern\"\n [id]=\"id\"\n [type]=\"(range ? 'range' : 'single')\"\n [hasIcon]=\"(range ? false : true)\"\n [disabled]=\"disabled\"\n [invalid]=\"invalid\"\n [invalidText]=\"invalidText\"\n [timePicker]=\"hasTime && noCalendar\"\n [skeleton]=\"skeleton\"\n (valueChange)=\"onValueChange($event)\">\n </suka-date-picker-input>\n </div>\n <div *ngIf=\"range\" class=\"date-picker-container\">\n <suka-date-picker-input\n [label]=\"rangeLabel\"\n [placeholder]=\"placeholder\"\n [pattern]=\"pattern\"\n [id]=\"id + '-rangeInput'\"\n [type]=\"(range ? 'range' : 'single')\"\n [hasIcon]=\"(range ? true : null)\"\n [disabled]=\"disabled\"\n [invalid]=\"invalid\"\n [invalidText]=\"invalidText\"\n [timePicker]=\"hasTime && noCalendar\"\n [skeleton]=\"skeleton\"\n (valueChange)=\"onRangeValueChange($event)\">\n </suka-date-picker-input>\n </div>\n </div>\n </div>\n ",
providers: [
{
provide: forms.NG_VALUE_ACCESSOR,
useExisting: DatePicker,
multi: true
}
],
encapsulation: core.ViewEncapsulation.None
}] }
];
/** @nocollapse */
DatePicker.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
DatePicker.propDecorators = {
range: [{ type: core.Input }],
dateFormat: [{ type: core.Input }],
hasTime: [{ type: core.Input }],
noCalendar: [{ type: core.Input }],
label: [{ type: core.Input }],
rangeLabel: [{ type: core.Input }],
placeholder: [{ type: core.Input }],
pattern: [{ type: core.Input }],
id: [{ type: core.Input }],
value: [{ type: core.Input }],
disabled: [{ type: core.Input }],
invalid: [{ type: core.Input }],
invalidText: [{ type: core.Input }],
skeleton: [{ type: core.Input }],
plugins: [{ type: core.Input }],
flatpickrOptions: [{ type: core.Input }],
valueChange: [{ type: core.Output }],
onFocus: [{ type: core.HostListener, args: ['focusin',] }]
};
return DatePicker;
}());
if (false) {
/**
* @type {?}
* @private
*/
DatePicker.datePickerCount;
/**
* Select calendar range mode
* @type {?}
*/
DatePicker.prototype.range;
/**
* Format of date
*
* For reference: https://flatpickr.js.org/formatting/
* @type {?}
*/
DatePicker.prototype.dateFormat;
/**
* Defines if time selector should be present. Please define dateFormat accordingly. i.e.: "d/m/Y H:i"
*
* For reference: https://flatpickr.js.org/formatting/
* @type {?}
*/
DatePicker.prototype.hasTime;
/**
* Disables calendar input. Useful for time picker functionality. Pair it with a time related format accordingly. i.e.: "H:i"
* @type {?}
*/
DatePicker.prototype.noCalendar;
/**
* Date picker label.
* @type {?}
*/
DatePicker.prototype.label;
/**
* Label for date range selector.
* @type {?}
*/
DatePicker.prototype.rangeLabel;
/**
* Sets the placeholder text.
* @type {?}
*/
DatePicker.prototype.placeholder;
/**
* Sets the pattern to follow.
* @type {?}
*/
DatePicker.prototype.pattern;
/**
* Date picker id.
* @type {?}
*/
DatePicker.prototype.id;
/**
* Set to `true` to disable the `Datepicker`
* @type {?}
*/
DatePicker.prototype.disabled;
/**
* Set to `true` to display invalid state.
* @type {?}
*/
DatePicker.prototype.invalid;
/**
* Feedback message to display when `Datepicker` is invalid.
* @type {?}
*/
DatePicker.prototype.invalidText;
/**
* Skeleton state.
* @type {?}
*/
DatePicker.prototype.skeleton;
/**
* Array of date picker plugins.
* @type {?}
*/
DatePicker.prototype.plugins;
/**
* Emits event notifying other classes of a change.
* @type {?}
*/
DatePicker.prototype.valueChange;
/**
* @type {?}
* @protected
*/
DatePicker.prototype._value;
/**
* @type {?}
* @protected
*/
DatePicker.prototype._flatpickrOptions;
/**
* @type {?}
* @protected
*/
DatePicker.prototype.flatpickrBaseOptions;
/**
* @type {?}
* @protected
*/
DatePicker.prototype.flatpickrInstance;
/** @type {?} */
DatePicker.prototype.onTouched;
/** @type {?} */
DatePicker.prototype.propagateChange;
/**
* @type {?}
* @protected
*/
DatePicker.prototype.elementRef;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var DatePickerModule = /** @class */ (function () {
function DatePickerModule() {
}
DatePickerModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
DatePicker
],
exports: [
DatePicker,
DatePickerInputModule
],
imports: [
common.CommonModule,
DatePickerInputModule
]
},] }
];
return DatePickerModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ToastRef = /** @class */ (function () {
function ToastRef(overlayRef) {
this.overlayRef = overlayRef;
}
/**
* @return {?}
*/
ToastRef.prototype.isVisible = /**
* @return {?}
*/
function () {
return this.overlayRef && this.overlayRef.overlayElement;
};
/**
* @return {?}
*/
ToastRef.prototype.getPosition = /**
* @return {?}
*/
function () {
return this.overlayRef.overlayElement.getBoundingClientRect();
};
/**
* @param {?=} data
* @return {?}
*/
ToastRef.prototype.close = /**
* @param {?=} data
* @return {?}
*/
function (data) {
this.overlayRef.dispose();
// tslint:disable-next-line: no-non-null-assertion
this.componentInstance = (/** @type {?} */ (null));
};
return ToastRef;
}());
if (false) {
/** @type {?} */
ToastRef.prototype.componentInstance;
/**
* @type {?}
* @private
*/
ToastRef.prototype.overlayRef;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var TOAST_CONFIG_DATA = new core.InjectionToken('TOAST_CONFIG_DATA');
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var toastAnimations = {
fadeToast: animations.trigger('fadeAnimation', [
animations.state('default', animations.style({ opacity: 1, transform: '*' })),
animations.transition('void => *', [animations.style({ opacity: 0, transform: 'scale(.9) translate3d(0, -50%, 0)' }), animations.animate('{{ fadeIn }}ms')]),
animations.transition('default => closing', animations.animate('{{ fadeOut }}ms', animations.style({ opacity: 0 }))),
]),
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ToastContainer = /** @class */ (function () {
function ToastContainer(toastRef, toastConfig) {
this.toastRef = toastRef;
this.toastConfig = toastConfig;
this.animationState = 'default';
this.animationStateChanged = new core.EventEmitter();
this.showFooter = false;
this.baseClass = true;
}
/**
* @param {?} value
* @return {?}
*/
ToastContainer.prototype.isTemplate = /**
* @param {?} value
* @return {?}
*/
function (value) {
return value instanceof core.TemplateRef;
};
/**
* @return {?}
*/
ToastContainer.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
this.content = this.toastConfig.content;
this.intervalId = window.setTimeout((/**
* @return {?}
*/
function () { return _this.startExitAnimation(); }), 5000);
};
/**
* @return {?}
*/
ToastContainer.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
clearTimeout(this.intervalId);
};
/**
* @return {?}
*/
ToastContainer.prototype.close = /**
* @return {?}
*/
function () {
this.toastRef.close();
};
/**
* @param {?} event
* @return {?}
*/
ToastContainer.prototype.onAnimationStart = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.animationStateChanged.emit(event);
};
/**
* @param {?} event
* @return {?}
*/
ToastContainer.prototype.onAnimationDone = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.animationStateChanged.emit(event);
};
/**
* @param {?} $event
* @return {?}
*/
ToastContainer.prototype.closeToast = /**
* @param {?} $event
* @return {?}
*/
function ($event) {
this.toastRef.close();
};
/**
* @param {?} event
* @return {?}
*/
ToastContainer.prototype.onFadeFinished = /**
* @param {?} event
* @return {?}
*/
function (event) {
var toState = event.toState;
/** @type {?} */
var isFadeOut = ((/** @type {?} */ (toState))) === 'closing';
/** @type {?} */
var itFinished = this.animationState === 'closing';
if (isFadeOut && itFinished) {
this.close();
}
};
/**
* @return {?}
*/
ToastContainer.prototype.startExitAnimation = /**
* @return {?}
*/
function () {
this.animationState = 'closing';
};
ToastContainer.decorators = [
{ type: core.Component, args: [{
selector: 'suka-toast',
template: "\n <div class=\"toast\"\n [@fadeAnimation]=\"{\n value: animationState,\n params: {\n fadeIn: toastConfig.animation.fadeIn,\n fadeOut: toastConfig.animation.fadeOut\n }\n }\"\n (@fadeAnimation.done)=\"onFadeFinished($event)\"\n [ngClass]=\"{\n 'toast--success': content.type === 'success',\n 'toast--alert': content.type === 'alert',\n 'toast--attention': content.type === 'attention'\n }\"\n >\n <suka-icon icon=\"check\" *ngIf=\"content.type === 'success'\" class=\"toast__icon--success\"></suka-icon>\n <suka-icon icon=\"alert-circle\" *ngIf=\"content.type === 'alert'\" class=\"toast__icon--alert\"></suka-icon>\n <suka-icon icon=\"alert-triangle\" *ngIf=\"content.type === 'attention'\" class=\"toast__icon--attention\"></suka-icon>\n <div>{{ content.body }}</div>\n <suka-icon icon=\"x\" (click)=\"close()\" class=\"toast__close\">close</suka-icon>\n </div>\n ",
animations: [toastAnimations.fadeToast]
}] }
];
/** @nocollapse */
ToastContainer.ctorParameters = function () { return [
{ type: ToastRef },
{ type: undefined, decorators: [{ type: core.Inject, args: [TOAST_CONFIG_DATA,] }] }
]; };
ToastContainer.propDecorators = {
baseClass: [{ type: core.HostBinding, args: ['class.toast--default',] }]
};
return ToastContainer;
}());
if (false) {
/**
* @type {?}
* @private
*/
ToastContainer.prototype.intervalId;
/** @type {?} */
ToastContainer.prototype.animationState;
/** @type {?} */
ToastContainer.prototype.animationStateChanged;
/** @type {?} */
ToastContainer.prototype.showFooter;
/** @type {?} */
ToastContainer.prototype.primaryActions;
/** @type {?} */
ToastContainer.prototype.secondaryActions;
/** @type {?} */
ToastContainer.prototype.content;
/** @type {?} */
ToastContainer.prototype.baseClass;
/** @type {?} */
ToastContainer.prototype.toastRef;
/** @type {?} */
ToastContainer.prototype.toastConfig;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function ToastContent() { }
if (false) {
/** @type {?} */
ToastContent.prototype.type;
/** @type {?|undefined} */
ToastContent.prototype.body;
}
/**
* @record
*/
function ToastConfig() { }
if (false) {
/** @type {?|undefined} */
ToastConfig.prototype.content;
/** @type {?|undefined} */
ToastConfig.prototype.position;
/** @type {?|undefined} */
ToastConfig.prototype.animation;
}
/** @type {?} */
var DEFAULT_CONFIG$2 = {
position: {
top: 20,
},
animation: {
fadeOut: 2500,
fadeIn: 150,
},
content: null,
};
var ToastService = /** @class */ (function () {
function ToastService(injector, overlay) {
this.injector = injector;
this.overlay = overlay;
}
/**
* @param {?=} config
* @return {?}
*/
ToastService.prototype.show = /**
* @param {?=} config
* @return {?}
*/
function (config) {
if (config === void 0) { config = {}; }
// Override default configuration
/** @type {?} */
var dialogConfig = __assign({}, DEFAULT_CONFIG$2, config);
// Returns an OverlayRef which is a PortalHost
/** @type {?} */
var overlayRef = this.createOverlay(dialogConfig);
// Instantiate remote control
/** @type {?} */
var toastRef = new ToastRef(overlayRef);
this.lastToast = toastRef;
/** @type {?} */
var overlayComponent = this.attachToastContainer(overlayRef, dialogConfig, toastRef);
toastRef.componentInstance = overlayComponent;
return toastRef;
};
/**
* @private
* @param {?} config
* @return {?}
*/
ToastService.prototype.createOverlay = /**
* @private
* @param {?} config
* @return {?}
*/
function (config) {
/** @type {?} */
var overlayConfig = this.getOverlayConfig(config);
return this.overlay.create(overlayConfig);
};
/**
* @private
* @param {?} overlayRef
* @param {?} config
* @param {?} toastRef
* @return {?}
*/
ToastService.prototype.attachToastContainer = /**
* @private
* @param {?} overlayRef
* @param {?} config
* @param {?} toastRef
* @return {?}
*/
function (overlayRef, config, toastRef) {
/** @type {?} */
var injector = this.createInjector(config, toastRef);
/** @type {?} */
var containerPortal = new portal.ComponentPortal(ToastContainer, null, injector);
/** @type {?} */
var containerRef = overlayRef.attach(containerPortal);
return containerRef.instance;
};
/**
* @private
* @param {?} config
* @param {?} toastRef
* @return {?}
*/
ToastService.prototype.createInjector = /**
* @private
* @param {?} config
* @param {?} toastRef
* @return {?}
*/
function (config, toastRef) {
/** @type {?} */
var injectionTokens = new WeakMap();
injectionTokens.set(ToastRef, toastRef);
injectionTokens.set(TOAST_CONFIG_DATA, config);
return new portal.PortalInjector(this.injector, injectionTokens);
};
/**
* @private
* @param {?} config
* @return {?}
*/
ToastService.prototype.getOverlayConfig = /**
* @private
* @param {?} config
* @return {?}
*/
function (config) {
/** @type {?} */
var positionStrategy = this.overlay.position()
.global()
.centerHorizontally()
.top(this.getPosition(config));
/** @type {?} */
var overlayConfig = new overlay.OverlayConfig({
positionStrategy: positionStrategy
});
return overlayConfig;
};
/**
* @param {?} config
* @return {?}
*/
ToastService.prototype.getPosition = /**
* @param {?} config
* @return {?}
*/
function (config) {
/** @type {?} */
var lastToastIsVisible = this.lastToast && this.lastToast.isVisible();
/** @type {?} */
var position = lastToastIsVisible
? this.lastToast.getPosition().bottom
: config.position.top;
return position + 'px';
};
ToastService.decorators = [
{ type: core.Injectable }
];
/** @nocollapse */
ToastService.ctorParameters = function () { return [
{ type: core.Injector },
{ type: overlay.Overlay }
]; };
return ToastService;
}());
if (false) {
/**
* @type {?}
* @private
*/
ToastService.prototype.lastToast;
/**
* @type {?}
* @private
*/
ToastService.prototype.injector;
/**
* @type {?}
* @private
*/
ToastService.prototype.overlay;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ToastModule = /** @class */ (function () {
function ToastModule() {
}
ToastModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
ToastContainer,
],
exports: [
ToastContainer,
],
imports: [
common.CommonModule,
overlay.OverlayModule,
ButtonModule,
IconModule,
],
entryComponents: [
ToastContainer
],
providers: [
ToastService,
],
},] }
];
return ToastModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var Progress = /** @class */ (function () {
function Progress() {
this.baseClass = true;
/**
* Set to `true` to make the progress linear. This allows the user to access any of the steps at any time (like tabs).
*/
this.linear = false;
/**
* Set to `true` to allow the user to edit a step after completed.
*/
this.editable = false;
/**
* Emits an event when a index is selected
*/
this.selected = new core.EventEmitter();
/**
* Emits an event when the steps change.
*/
this.stepsChange = new core.EventEmitter();
}
Object.defineProperty(Progress.prototype, "steps", {
/**
* Sets the steps for the `Progress` component.
*/
get: /**
* Sets the steps for the `Progress` component.
* @return {?}
*/
function () {
return this._steps;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._steps = value;
this.stepsChange.emit(this._steps);
},
enumerable: true,
configurable: true
});
/**
* @param {?} newIndex
* @return {?}
*/
Progress.prototype.select = /**
* @param {?} newIndex
* @return {?}
*/
function (newIndex) {
this._steps.forEach((/**
* @param {?} step
* @param {?} index
* @return {?}
*/
function (step, index) {
if (index === newIndex) {
step.current = true;
}
else if (step.current) {
delete step.current;
}
}));
this.selected.emit(newIndex);
this.steps = this._steps;
};
/**
* Step is completed.
*/
/**
* Step is completed.
* @param {?} step
* @return {?}
*/
Progress.prototype.isComplete = /**
* Step is completed.
* @param {?} step
* @return {?}
*/
function (step) {
return step.state === 'complete';
};
/**
* Step is editable.
*/
/**
* Step is editable.
* @param {?} step
* @return {?}
*/
Progress.prototype.isEditable = /**
* Step is editable.
* @param {?} step
* @return {?}
*/
function (step) {
return step.state === 'complete' && this.editable;
};
/**
* Step is unclickable.
*/
/**
* Step is unclickable.
* @param {?} step
* @param {?} index
* @return {?}
*/
Progress.prototype.isUnclickable = /**
* Step is unclickable.
* @param {?} step
* @param {?} index
* @return {?}
*/
function (step, index) {
if (step.state === 'complete' && !this.editable) {
return true;
}
if (step.state === 'incomplete' && !this.linear && index !== this.getNextUncompletedStepIndex()) {
return true;
}
return false;
};
/**
* Returns the index of the next uncompleted step.
*/
/**
* Returns the index of the next uncompleted step.
* @return {?}
*/
Progress.prototype.getNextUncompletedStepIndex = /**
* Returns the index of the next uncompleted step.
* @return {?}
*/
function () {
var e_1, _a;
try {
for (var _b = __values(this.steps.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
var _d = __read(_c.value, 2), index = _d[0], step = _d[1];
if (step.state === 'incomplete') {
return index;
}
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_1) throw e_1.error; }
}
return -1;
};
/**
* Returns the current step.
*/
/**
* Returns the current step.
* @return {?}
*/
Progress.prototype.currentStep = /**
* Returns the current step.
* @return {?}
*/
function () {
var e_2, _a;
try {
for (var _b = __values(this.steps.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
var _d = __read(_c.value, 2), _ = _d[0], step = _d[1];
if (step.current) {
return step;
}
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_2) throw e_2.error; }
}
return null;
};
/**
* Returns the next step.
*/
/**
* Returns the next step.
* @return {?}
*/
Progress.prototype.nextStep = /**
* Returns the next step.
* @return {?}
*/
function () {
var e_3, _a;
/** @type {?} */
var currentIndex = -1;
try {
for (var _b = __values(this.steps.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
var _d = __read(_c.value, 2), index = _d[0], step = _d[1];
if (step.current) {
currentIndex = index;
}
if (currentIndex >= 0 && currentIndex + 1 === index) {
return step;
}
}
}
catch (e_3_1) { e_3 = { error: e_3_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_3) throw e_3.error; }
}
return null;
};
/**
* Returns the current step index.
*/
/**
* Returns the current step index.
* @return {?}
*/
Progress.prototype.getCurrentStepIndex = /**
* Returns the current step index.
* @return {?}
*/
function () {
var e_4, _a;
try {
for (var _b = __values(this.steps.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
var _d = __read(_c.value, 2), index = _d[0], step = _d[1];
if (step.current) {
return index;
}
}
}
catch (e_4_1) { e_4 = { error: e_4_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_4) throw e_4.error; }
}
return -1;
};
Progress.decorators = [
{ type: core.Component, args: [{
selector: 'suka-progress',
template: "\n <div class=\"mobile-progress\">\n <div class=\"mobile-progress__label\">\n <h3 class=\"mobile-progress__label__current-step\">{{currentStep().label}}</h3>\n <p class=\"mobile-progress__label__next-step\" *ngIf=\"getCurrentStepIndex() + 1 < steps.length\">Pr\u00F3ximo paso: {{nextStep().label}}</p>\n <p class=\"mobile-progress__label__next-step\" *ngIf=\"getCurrentStepIndex() + 1 >= steps.length\">\u00DAltimo paso</p>\n </div>\n\n <div\n class=\"mobile-progress__status\"\n [ngClass]=\"[\n 'radial-progress-' + (getCurrentStepIndex() + 1) * 100 / steps.length\n ]\"\n >\n <div class=\"mobile-progress__status-overlay\">\n {{getCurrentStepIndex() + 1}} de {{steps.length}}\n </div>\n </div>\n </div>\n <div class=\"progress__wrapper\">\n <ul class=\"progress-bar\">\n <li\n *ngFor=\"let step of steps; let i = index\"\n class=\"progress-bar__step\"\n [ngClass]=\"{\n 'progress-bar__step--complete': isComplete(step),\n 'progress-bar__step--editable': isEditable(step),\n 'progress-bar__step--error': step.state === 'error',\n 'progress-bar__step--current': step.current,\n 'progress-bar__step--unclickable': isUnclickable(step, i)\n }\"\n >\n <div class=\"step\" role=\"button\" (click)=\"select(i)\">\n <div class=\"step__indicator\">\n <ng-container *ngIf=\"step.state !== 'complete' || step.current\">{{ i + 1 }}</ng-container>\n <suka-icon icon=\"check\" *ngIf=\"isComplete(step) && !isEditable(step) && !step.current\"></suka-icon>\n <suka-icon icon=\"edit-2\" *ngIf=\"isEditable(step) && !step.current\"></suka-icon>\n </div>\n <span class=\"step__label\"> {{ step.label }}</span>\n </div>\n </li>\n </ul>\n </div>\n "
}] }
];
Progress.propDecorators = {
baseClass: [{ type: core.HostBinding, args: ['class.progress',] }],
linear: [{ type: core.Input }],
editable: [{ type: core.Input }],
selected: [{ type: core.Output }],
stepsChange: [{ type: core.Output }],
steps: [{ type: core.Input }]
};
return Progress;
}());
if (false) {
/**
* @type {?}
* @private
*/
Progress.prototype._steps;
/** @type {?} */
Progress.prototype.baseClass;
/**
* Set to `true` to make the progress linear. This allows the user to access any of the steps at any time (like tabs).
* @type {?}
*/
Progress.prototype.linear;
/**
* Set to `true` to allow the user to edit a step after completed.
* @type {?}
*/
Progress.prototype.editable;
/**
* Emits an event when a index is selected
* @type {?}
*/
Progress.prototype.selected;
/**
* Emits an event when the steps change.
* @type {?}
*/
Progress.prototype.stepsChange;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ProgressModule = /** @class */ (function () {
function ProgressModule() {
}
ProgressModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
Progress
],
exports: [
Progress
],
imports: [
common.CommonModule,
IconModule,
]
},] }
];
return ProgressModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var Layout = /** @class */ (function () {
function Layout() {
this.baseClass = true;
}
Layout.decorators = [
{ type: core.Component, args: [{
selector: "suka-layout",
template: "\n <ng-content></ng-content>\n "
}] }
];
Layout.propDecorators = {
baseClass: [{ type: core.HostBinding, args: ['class.layout',] }]
};
return Layout;
}());
if (false) {
/** @type {?} */
Layout.prototype.baseClass;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var LayoutSection = /** @class */ (function () {
function LayoutSection() {
this.baseClass = true;
this.secondary = false;
this.oneHalf = false;
this.oneThird = false;
this.annotated = false;
}
LayoutSection.decorators = [
{ type: core.Component, args: [{
selector: 'suka-layout-section',
template: "\n <div *ngIf=\"annotated else elseTpl\" class=\"annotation__wrapper\">\n <div class=\"annotation\">\n <h5>{{title}}</h5>\n <p>{{description}}</p>\n </div>\n <div class=\"annotation-content\">\n <ng-content *ngTemplateOutlet=\"elseTpl\"></ng-content>\n </div>\n </div>\n\n <ng-template #elseTpl>\n <ng-content></ng-content>\n </ng-template>\n "
}] }
];
LayoutSection.propDecorators = {
baseClass: [{ type: core.HostBinding, args: ['class.layout__section',] }],
secondary: [{ type: core.HostBinding, args: ['class.layout__section--secondary',] }, { type: core.Input }],
oneHalf: [{ type: core.HostBinding, args: ['class.layout__section--one-half',] }, { type: core.Input }],
oneThird: [{ type: core.HostBinding, args: ['class.layout__section--one-third',] }, { type: core.Input }],
annotated: [{ type: core.HostBinding, args: ['class.layout__section--annotated',] }, { type: core.Input }],
title: [{ type: core.Input }],
description: [{ type: core.Input }]
};
return LayoutSection;
}());
if (false) {
/** @type {?} */
LayoutSection.prototype.baseClass;
/** @type {?} */
LayoutSection.prototype.secondary;
/** @type {?} */
LayoutSection.prototype.oneHalf;
/** @type {?} */
LayoutSection.prototype.oneThird;
/** @type {?} */
LayoutSection.prototype.annotated;
/**
* Sets the title for an annotated layout section.
* @type {?}
*/
LayoutSection.prototype.title;
/**
* Sets the description for an annotated layout section.
* @type {?}
*/
LayoutSection.prototype.description;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var LayoutModule = /** @class */ (function () {
function LayoutModule() {
}
LayoutModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
Layout,
LayoutSection,
],
exports: [
Layout,
LayoutSection,
],
imports: [
common.CommonModule,
]
},] }
];
return LayoutModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Informa a los usuarios sobre cambios importantes o condiciones persistentes.
*
* Usa este componente si necesitas comunicar a los usuarios de una manera prominente. Los Banner son ubicados en la parte superior de una página o sección al que aplican, abajo del header de los mismos.
*/
var Banner = /** @class */ (function () {
function Banner() {
this.hide = false;
this.animationState = 'default';
/**
* Sets the status for the banner
*/
this.status = 'default';
/**
* Displays a close button
*/
this.dismissable = true;
/**
* Action label content
*/
this.actionLabel = '';
/**
* Callback when the action
*/
this.action = new core.EventEmitter();
/**
* Callback when the banner is dismissed.
*/
this.dismiss = new core.EventEmitter();
}
/**
* @return {?}
*/
Banner.prototype.ngOnInit = /**
* @return {?}
*/
function () {
switch (this.status) {
case 'info':
this.statusIcon = 'info';
break;
case 'success':
this.statusIcon = 'check';
break;
case 'attention':
this.statusIcon = 'alert-triangle';
break;
case 'alert':
this.statusIcon = 'alert-circle';
break;
}
};
/**
* Emits the action callback.
*/
/**
* Emits the action callback.
* @return {?}
*/
Banner.prototype.onAction = /**
* Emits the action callback.
* @return {?}
*/
function () {
this.action.emit();
};
/**
* Closes the banner.
* Emits the dismiss callback.
*/
/**
* Closes the banner.
* Emits the dismiss callback.
* @param {?=} event
* @return {?}
*/
Banner.prototype.onClose = /**
* Closes the banner.
* Emits the dismiss callback.
* @param {?=} event
* @return {?}
*/
function (event) {
this.animationState = 'closing';
this.dismiss.emit();
};
/**
* @param {?} event
* @return {?}
*/
Banner.prototype.onFadeFinished = /**
* @param {?} event
* @return {?}
*/
function (event) {
/** @type {?} */
var itFinished = this.animationState === 'closing';
if (itFinished) {
this.hide = true;
}
};
Banner.decorators = [
{ type: core.Component, args: [{
selector: 'suka-banner',
template: "\n <div\n [@fadeAnimation]=\"{\n value: animationState,\n params: {\n fadeIn: 200,\n fadeOut: 200\n }\n }\"\n (@fadeAnimation.done)=\"onFadeFinished($event)\"\n class=\"banner banner--{{status}}\"\n [ngClass]=\"{\n 'banner--hidden': hide\n }\"\n >\n <button\n *ngIf=\"dismissable\"\n sukaButton=\"plain\"\n (click)=\"onClose($event)\"\n class=\"banner__close-button\"\n >\n <suka-icon icon=\"x\"></suka-icon>\n </button>\n\n <div class=\"banner__status-icon\" *ngIf=\"status !== 'default'\">\n <div class=\"banner__status-icon__wrapper\">\n <suka-icon [icon]=\"statusIcon\"></suka-icon>\n </div>\n </div>\n\n <div class=\"banner__content\">\n <h5>{{title}}</h5>\n <div class=\"banner__description\">\n <ng-content></ng-content>\n </div>\n <button *ngIf=\"actionLabel\" sukaButton outline=\"true\" (click)=\"onAction()\">{{actionLabel}}</button>\n </div>\n </div>\n ",
animations: [
animations.trigger('fadeAnimation', [
animations.state('default', animations.style({ opacity: 1, transform: '*' })),
animations.transition('void => *', [animations.style({ opacity: 0, transform: 'scale(.9)' }), animations.animate('150ms cubic-bezier(.17,.67,.78,1.21)')]),
animations.transition('default => closing', animations.animate('150ms', animations.style({ opacity: 0, transform: 'scale(.9)' }))),
]),
]
}] }
];
Banner.propDecorators = {
title: [{ type: core.Input }],
status: [{ type: core.Input }],
dismissable: [{ type: core.Input }],
actionLabel: [{ type: core.Input }],
action: [{ type: core.Output }],
dismiss: [{ type: core.Output }]
};
return Banner;
}());
if (false) {
/** @type {?} */
Banner.prototype.statusIcon;
/** @type {?} */
Banner.prototype.hide;
/** @type {?} */
Banner.prototype.animationState;
/**
* Title content for the banner
* @type {?}
*/
Banner.prototype.title;
/**
* Sets the status for the banner
* @type {?}
*/
Banner.prototype.status;
/**
* Displays a close button
* @type {?}
*/
Banner.prototype.dismissable;
/**
* Action label content
* @type {?}
*/
Banner.prototype.actionLabel;
/**
* Callback when the action
* @type {?}
*/
Banner.prototype.action;
/**
* Callback when the banner is dismissed.
* @type {?}
*/
Banner.prototype.dismiss;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var BannerModule = /** @class */ (function () {
function BannerModule() {
}
BannerModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
Banner
],
exports: [
Banner
],
imports: [
common.CommonModule,
IconModule,
ButtonModule,
]
},] }
];
return BannerModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @enum {string} */
var SnippetType = {
single: 'single',
multi: 'multi',
inline: 'inline',
};
/** @enum {string} */
var SnippetLanguage = {
javascript: 'javascript',
json: 'json',
typescript: 'typescript',
markup: 'markup',
markdown: 'markdown',
php: 'php',
ruby: 'ruby',
scss: 'scss',
css: 'css',
html: 'html',
xml: 'xml',
clike: 'clike',
java: 'java',
swift: 'swift',
};
var CodeSnippet = /** @class */ (function () {
/**
* Creates an instance of CodeSnippet.
*/
function CodeSnippet(sanitizer) {
this.sanitizer = sanitizer;
/**
* It can be `"single"`, `"multi"` or `"inline"`
*/
this.display = SnippetType.single;
/**
* Text displayed in the tooltip when user clicks button to copy code.
*
*/
this.feedbackText = 'Copiado'; // TODO: i18n
/**
* Snippet highlight language
*
*/
this.language = SnippetLanguage.javascript;
/**
* Time in miliseconds to keep the feedback tooltip displayed.
*
*/
this.feedbackTimeout = 3000;
/**
* Set to `true` to show an expanded code snippet.
*/
this.expanded = false;
/**
* Set to `true` to show a loading code snippet.
*/
this.skeleton = false;
this.snippetClass = true;
this.showFeedback = false;
CodeSnippet.codeSnippetCount++;
}
Object.defineProperty(CodeSnippet.prototype, "snippetSingleClass", {
get: /**
* @return {?}
*/
function () {
return this.display === SnippetType.single;
},
enumerable: true,
configurable: true
});
Object.defineProperty(CodeSnippet.prototype, "snippetMultiClass", {
get: /**
* @return {?}
*/
function () {
return this.display === SnippetType.multi;
},
enumerable: true,
configurable: true
});
Object.defineProperty(CodeSnippet.prototype, "snippetInlineClass", {
get: /**
* @return {?}
*/
function () {
return this.display === SnippetType.inline;
},
enumerable: true,
configurable: true
});
Object.defineProperty(CodeSnippet.prototype, "btnCopyClass", {
get: /**
* @return {?}
*/
function () {
return this.display === SnippetType.inline;
},
enumerable: true,
configurable: true
});
Object.defineProperty(CodeSnippet.prototype, "displayStyle", {
get: /**
* @return {?}
*/
function () {
return this.display !== SnippetType.inline ? 'block' : null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(CodeSnippet.prototype, "attrType", {
get: /**
* @return {?}
*/
function () {
return this.display === SnippetType.inline ? 'button' : null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(CodeSnippet.prototype, "shouldShowExpandButton", {
get: /**
* @return {?}
*/
function () {
return this.code ? this.code.nativeElement.getBoundingClientRect().height > 255 : false;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
CodeSnippet.prototype.ngOnInit = /**
* @return {?}
*/
function () {
if (this.highlight) {
this.content = prismjs.highlight(this.content, prismjs.languages[this.language], this.language);
}
this.codeHtml = this.sanitizer.sanitize(core.SecurityContext.HTML, this.content);
};
/**
* @return {?}
*/
CodeSnippet.prototype.toggleSnippetExpansion = /**
* @return {?}
*/
function () {
this.expanded = !this.expanded;
};
/**
* Copies the code from the `<code>` block to clipboard.
*/
/**
* Copies the code from the `<code>` block to clipboard.
* @return {?}
*/
CodeSnippet.prototype.copyCode = /**
* Copies the code from the `<code>` block to clipboard.
* @return {?}
*/
function () {
// create invisible, uneditable textarea with our code in it
/** @type {?} */
var textarea = document.createElement('textarea');
textarea.value = this.code.nativeElement.innerText || this.code.nativeElement.textContent;
textarea.setAttribute('readonly', '');
textarea.style.position = 'absolute';
textarea.style.right = '-99999px';
document.body.appendChild(textarea);
// save user selection
/** @type {?} */
var selected = document.getSelection().rangeCount ? document.getSelection().getRangeAt(0) : null;
// copy to clipboard
textarea.select();
document.execCommand('copy');
// remove textarea
document.body.removeChild(textarea);
// restore user selection
if (selected) {
document.getSelection().removeAllRanges();
document.getSelection().addRange(selected);
}
};
/**
* On copy button click, copies the code and shows feedback.
*/
/**
* On copy button click, copies the code and shows feedback.
* @return {?}
*/
CodeSnippet.prototype.onCopyButtonClicked = /**
* On copy button click, copies the code and shows feedback.
* @return {?}
*/
function () {
var _this = this;
this.copyCode();
this.showFeedback = true;
setTimeout((/**
* @return {?}
*/
function () {
_this.showFeedback = false;
}), this.feedbackTimeout);
};
/**
* Inline code snippet acts as button and makes the whole component clickable.
*
* This handles clicks in that case.
*/
/**
* Inline code snippet acts as button and makes the whole component clickable.
*
* This handles clicks in that case.
* @return {?}
*/
CodeSnippet.prototype.hostClick = /**
* Inline code snippet acts as button and makes the whole component clickable.
*
* This handles clicks in that case.
* @return {?}
*/
function () {
if (this.display !== SnippetType.inline) {
return;
}
this.onCopyButtonClicked();
};
/**
* Variable used for creating unique ids for code-snippet components.
*/
CodeSnippet.codeSnippetCount = 0;
CodeSnippet.decorators = [
{ type: core.Component, args: [{
selector: 'suka-code-snippet',
template: "\n <ng-container *ngIf=\"display === 'inline'; else notInline\">\n <span\n sukaTooltip=\"Copiado\"\n tooltipTrigger=\"click\"\n tooltipDuration=\"3000\"\n >\n <ng-container *ngTemplateOutlet=\"codeTemplate\"></ng-container>\n </span>\n </ng-container>\n\n <ng-template #notInline>\n <div class=\"snippet-container\" attr.aria-label=\"Copy code snippet\">\n <ng-container *ngIf=\"skeleton\">\n <span *ngIf=\"display === 'single'; else multiSkeleton\"></span>\n <ng-template #multiSkeleton>\n <span></span>\n <span></span>\n <span></span>\n </ng-template>\n </ng-container>\n <pre *ngIf=\"!skeleton\"><ng-container *ngTemplateOutlet=\"codeTemplate\"></ng-container></pre>\n </div>\n\n <button\n *ngIf=\"!skeleton\"\n class=\"snippet-button\"\n attr.aria-label=\"Copiar\"\n (click)=\"onCopyButtonClicked()\"\n [ngClass]=\"{\n 'snippet-button--copied': showFeedback\n }\"\n sukaTooltip=\"Copiado\"\n tooltipTrigger=\"click\"\n tooltipDuration=\"3000\"\n tabindex=\"0\">\n <suka-icon icon=\"copy\"></suka-icon>\n </button>\n\n <button\n *ngIf=\"display === 'multi' && shouldShowExpandButton\"\n class=\"btn snippet-btn--expand\"\n (click)=\"toggleSnippetExpansion()\"\n type=\"button\">\n <span class=\"snippet-btn--text\">{{expanded ? 'Mostrar menos' : 'Mostrar mas'}}\n <suka-icon icon=\"chevron-down\"></suka-icon>\n </span>\n </button>\n </ng-template>\n <ng-template #codeTemplate>\n <code #code [innerHtml]=\"codeHtml\"></code>\n </ng-template>\n "
}] }
];
/** @nocollapse */
CodeSnippet.ctorParameters = function () { return [
{ type: platformBrowser.DomSanitizer }
]; };
CodeSnippet.propDecorators = {
display: [{ type: core.Input }],
feedbackText: [{ type: core.Input }],
content: [{ type: core.Input }],
highlight: [{ type: core.Input }],
language: [{ type: core.Input }],
feedbackTimeout: [{ type: core.Input }],
expanded: [{ type: core.HostBinding, args: ['class.snippet--expand',] }, { type: core.Input }],
skeleton: [{ type: core.HostBinding, args: ['class.skeleton',] }, { type: core.Input }],
snippetClass: [{ type: core.HostBinding, args: ['class.snippet',] }],
snippetSingleClass: [{ type: core.HostBinding, args: ['class.snippet--single',] }],
snippetMultiClass: [{ type: core.HostBinding, args: ['class.snippet--multi',] }],
snippetInlineClass: [{ type: core.HostBinding, args: ['class.snippet--inline',] }],
btnCopyClass: [{ type: core.HostBinding, args: ['class.btn--copy',] }],
displayStyle: [{ type: core.HostBinding, args: ['style.display',] }],
attrType: [{ type: core.HostBinding, args: ['attr.type',] }],
code: [{ type: core.ViewChild, args: ['code', { static: false },] }],
hostClick: [{ type: core.HostListener, args: ['click',] }]
};
return CodeSnippet;
}());
if (false) {
/**
* Variable used for creating unique ids for code-snippet components.
* @type {?}
*/
CodeSnippet.codeSnippetCount;
/** @type {?} */
CodeSnippet.prototype.codeHtml;
/**
* It can be `"single"`, `"multi"` or `"inline"`
* @type {?}
*/
CodeSnippet.prototype.display;
/**
* Text displayed in the tooltip when user clicks button to copy code.
*
* @type {?}
*/
CodeSnippet.prototype.feedbackText;
/**
* Code content
*
* @type {?}
*/
CodeSnippet.prototype.content;
/**
* Code highlight
*
* @type {?}
*/
CodeSnippet.prototype.highlight;
/**
* Snippet highlight language
*
* @type {?}
*/
CodeSnippet.prototype.language;
/**
* Time in miliseconds to keep the feedback tooltip displayed.
*
* @type {?}
*/
CodeSnippet.prototype.feedbackTimeout;
/**
* Set to `true` to show an expanded code snippet.
* @type {?}
*/
CodeSnippet.prototype.expanded;
/**
* Set to `true` to show a loading code snippet.
* @type {?}
*/
CodeSnippet.prototype.skeleton;
/** @type {?} */
CodeSnippet.prototype.snippetClass;
/** @type {?} */
CodeSnippet.prototype.code;
/** @type {?} */
CodeSnippet.prototype.showFeedback;
/**
* @type {?}
* @private
*/
CodeSnippet.prototype.sanitizer;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var CodeSnippetModule = /** @class */ (function () {
function CodeSnippetModule() {
}
CodeSnippetModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
CodeSnippet,
],
exports: [
CodeSnippet,
],
imports: [
common.CommonModule,
forms.FormsModule,
TooltipModule,
IconModule,
]
},] }
];
return CodeSnippetModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var EmptyState = /** @class */ (function () {
function EmptyState() {
/**
* Heading content.
*/
this.heading = '';
/**
* Emits the primary action event.
*/
this.primaryAction = new core.EventEmitter();
/**
* Emits the secondary action event.
*/
this.secondaryAction = new core.EventEmitter();
}
/**
* On button click, emits a primary o secondary action event accordingly
*/
/**
* On button click, emits a primary o secondary action event accordingly
* @param {?} type
* @return {?}
*/
EmptyState.prototype.onClick = /**
* On button click, emits a primary o secondary action event accordingly
* @param {?} type
* @return {?}
*/
function (type) {
if (type === 'primary') {
this.primaryAction.emit('primary');
}
if (type === 'secondary') {
this.secondaryAction.emit('secondary');
}
};
EmptyState.decorators = [
{ type: core.Component, args: [{
selector: 'suka-empty-state',
template: "\n <div class=\"empty-state\">\n <div class=\"empty-state__description\">\n <h3 class=\"empty-state__heading\">{{heading}}</h3>\n\n <div class=\"empty-state__content\">\n <ng-content></ng-content>\n </div>\n <div\n *ngIf=\"primaryActionLabel\"\n class=\"empty-state__actions\"\n >\n <suka-button-group>\n <button\n sukaButton=\"primary\"\n (click)=\"onClick('primary')\"\n >\n {{primaryActionLabel}}\n </button>\n <button\n *ngIf=\"secondaryActionLabel\"\n sukaButton=\"plain\"\n (click)=\"onClick('secondary')\"\n >\n {{secondaryActionLabel}}\n </button>\n </suka-button-group>\n </div>\n </div>\n\n <div class=\"empty-state__image\">\n <img *ngIf=\"imgSrc\" [src]=\"imgSrc\" />\n <suka-icon *ngIf=\"!imgSrc\" icon=\"inbox\"></suka-icon>\n </div>\n </div>\n "
}] }
];
EmptyState.propDecorators = {
heading: [{ type: core.Input }],
imgSrc: [{ type: core.Input }],
primaryActionLabel: [{ type: core.Input }],
primaryAction: [{ type: core.Output }],
secondaryActionLabel: [{ type: core.Input }],
secondaryAction: [{ type: core.Output }]
};
return EmptyState;
}());
if (false) {
/**
* Heading content.
* @type {?}
*/
EmptyState.prototype.heading;
/**
* Sets an image url for the avatar. If it is set, it displays instead of the empty icon.
* @type {?}
*/
EmptyState.prototype.imgSrc;
/**
* Primary action label content
* @type {?}
*/
EmptyState.prototype.primaryActionLabel;
/**
* Emits the primary action event.
* @type {?}
*/
EmptyState.prototype.primaryAction;
/**
* Secondary action label content
* @type {?}
*/
EmptyState.prototype.secondaryActionLabel;
/**
* Emits the secondary action event.
* @type {?}
*/
EmptyState.prototype.secondaryAction;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var EmptyStateModule = /** @class */ (function () {
function EmptyStateModule() {
}
EmptyStateModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
EmptyState,
],
exports: [
EmptyState,
],
imports: [
common.CommonModule,
IconModule,
ButtonModule,
]
},] }
];
return EmptyStateModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @param {?} r
* @param {?} g
* @param {?} b
* @return {?}
*/
function rgbToHsv(r, g, b) {
/** @type {?} */
var h;
/** @type {?} */
var s;
/** @type {?} */
var rabs = r / 255;
/** @type {?} */
var gabs = g / 255;
/** @type {?} */
var babs = b / 255;
/** @type {?} */
var v = Math.max(rabs, gabs, babs);
/** @type {?} */
var diff = v - Math.min(rabs, gabs, babs);
/** @type {?} */
var diffc = (/**
* @param {?} c
* @return {?}
*/
function (c) { return (v - c) / 6 / diff + 1 / 2; });
/** @type {?} */
var percentRoundFn = (/**
* @param {?} num
* @return {?}
*/
function (num) { return Math.round(num * 100) / 100; });
if (diff === 0) {
h = s = 0;
}
else {
s = diff / v;
/** @type {?} */
var rr = diffc(rabs);
/** @type {?} */
var gg = diffc(gabs);
/** @type {?} */
var bb = diffc(babs);
if (rabs === v) {
h = bb - gg;
}
else if (gabs === v) {
h = (1 / 3) + rr - bb;
}
else if (babs === v) {
h = (2 / 3) + gg - rr;
}
if (h < 0) {
h += 1;
}
else if (h > 1) {
h -= 1;
}
}
return {
h: Math.round(h * 360),
s: percentRoundFn(s * 100),
v: percentRoundFn(v * 100)
};
}
/**
* @param {?} hex
* @return {?}
*/
function hexToRgb(hex) {
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
/** @type {?} */
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, (/**
* @param {?} m
* @param {?} r
* @param {?} g
* @param {?} b
* @return {?}
*/
function (m, r, g, b) {
return r + r + g + g + b + b;
}));
/** @type {?} */
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
/**
* @param {?} r
* @param {?} g
* @param {?} b
* @return {?}
*/
function rgbToHex(r, g, b) {
/**
* @param {?} x
* @return {?}
*/
function hex(x) {
return ('0' + parseInt(x).toString(16)).slice(-2);
}
return '#' + hex(r) + hex(g) + hex(b);
}
/**
* @param {?} hue
* @param {?} saturation
* @param {?} value
* @return {?}
*/
function hsvToRgb(hue, saturation, value) {
/** @type {?} */
var h = hue / 60;
/** @type {?} */
var s = saturation / 100;
/** @type {?} */
var v = value / 100;
/** @type {?} */
var hi = Math.floor(h) % 6;
/** @type {?} */
var f = h - Math.floor(h);
/** @type {?} */
var p = 255 * v * (1 - s);
/** @type {?} */
var q = 255 * v * (1 - (s * f));
/** @type {?} */
var t = 255 * v * (1 - (s * (1 - f)));
v *= 255;
/** @type {?} */
var rgbArray;
switch (hi) {
case 0:
rgbArray = [v, t, p];
break;
case 1:
rgbArray = [q, v, p];
break;
case 2:
rgbArray = [p, v, t];
break;
case 3:
rgbArray = [p, q, v];
break;
case 4:
rgbArray = [t, p, v];
break;
case 5:
rgbArray = [v, p, q];
break;
}
return {
r: rgbArray[0],
g: rgbArray[1],
b: rgbArray[2],
};
}
/**
* @param {?} h
* @param {?} s
* @param {?} v
* @return {?}
*/
function hsvToHex(h, s, v) {
/** @type {?} */
var rgbColor = hsvToRgb(h, s, v);
return rgbToHex(rgbColor.r, rgbColor.g, rgbColor.b);
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ColorPicker = /** @class */ (function () {
function ColorPicker() {
this.baseClass = true;
this.colorChange = new core.EventEmitter();
this.showInput = true;
}
/**
* @return {?}
*/
ColorPicker.prototype.ngOnInit = /**
* @return {?}
*/
function () {
/** @type {?} */
var rgbColor = hexToRgb(this.color);
if (rgbColor) {
/** @type {?} */
var hsv = rgbToHsv(rgbColor.r, rgbColor.g, rgbColor.b);
this.hue = hsvToHex(hsv.h, 100, 100);
}
};
/**
* @param {?} event
* @return {?}
*/
ColorPicker.prototype.onColorChange = /**
* @param {?} event
* @return {?}
*/
function (event) {
/** @type {?} */
var rgbColor = hexToRgb(event);
if (rgbColor) {
/** @type {?} */
var hsv = rgbToHsv(rgbColor.r, rgbColor.g, rgbColor.b);
this.hue = hsvToHex(hsv.h, 100, 100);
this.color = event;
}
this.emitColorChange(this.color);
};
/**
* @param {?} event
* @return {?}
*/
ColorPicker.prototype.onColorSelect = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.color = event;
this.emitColorChange(this.color);
};
/**
* @private
* @param {?} color
* @return {?}
*/
ColorPicker.prototype.emitColorChange = /**
* @private
* @param {?} color
* @return {?}
*/
function (color) {
this.colorChange.emit(color);
};
ColorPicker.decorators = [
{ type: core.Component, args: [{
selector: 'suka-color-picker',
template: "\n <div class=\"input-wrapper\" *ngIf=\"showInput\">\n <input\n [ngModel]=\"color\"\n (ngModelChange)=\"onColorChange($event)\"\n />\n <div\n class=\"color-div\"\n [ngStyle]=\"{'background-color': color || 'white'}\"\n ></div>\n </div>\n <div class=\"color-wrapper\">\n <suka-color-palette\n [hue]=\"hue\"\n [color]=\"color\"\n (colorChange)=\"onColorSelect($event)\"\n ></suka-color-palette>\n <suka-color-slider\n [(hue)]=\"hue\"\n ></suka-color-slider>\n </div>\n "
}] }
];
ColorPicker.propDecorators = {
baseClass: [{ type: core.HostBinding, args: ['class.color-picker',] }],
color: [{ type: core.Input }],
colorChange: [{ type: core.Output }],
showInput: [{ type: core.Input }]
};
return ColorPicker;
}());
if (false) {
/** @type {?} */
ColorPicker.prototype.baseClass;
/** @type {?} */
ColorPicker.prototype.color;
/** @type {?} */
ColorPicker.prototype.colorChange;
/** @type {?} */
ColorPicker.prototype.showInput;
/** @type {?} */
ColorPicker.prototype.hue;
/** @type {?} */
ColorPicker.prototype.globalHue;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ColorSlider = /** @class */ (function () {
function ColorSlider() {
this.baseClass = true;
this.mousedown = false;
this.hueChange = new core.EventEmitter();
}
/**
* @param {?} evt
* @return {?}
*/
ColorSlider.prototype.onMouseUp = /**
* @param {?} evt
* @return {?}
*/
function (evt) {
this.mousedown = false;
};
/**
* @return {?}
*/
ColorSlider.prototype.draw = /**
* @return {?}
*/
function () {
if (!this.ctx) {
this.ctx = this.canvas.nativeElement.getContext('2d');
}
/** @type {?} */
var width = this.canvas.nativeElement.width;
/** @type {?} */
var height = this.canvas.nativeElement.height;
this.ctx.clearRect(0, 0, width, height);
/** @type {?} */
var gradient = this.ctx.createLinearGradient(0, 0, 0, height);
gradient.addColorStop(0, 'rgba(255, 0, 0, 1)');
gradient.addColorStop(0.17, 'rgba(255, 255, 0, 1)');
gradient.addColorStop(0.34, 'rgba(0, 255, 0, 1)');
gradient.addColorStop(0.51, 'rgba(0, 255, 255, 1)');
gradient.addColorStop(0.68, 'rgba(0, 0, 255, 1)');
gradient.addColorStop(0.85, 'rgba(255, 0, 255, 1)');
gradient.addColorStop(1, 'rgba(255, 0, 0, 1)');
this.ctx.beginPath();
this.ctx.rect(0, 0, width, height);
this.ctx.fillStyle = gradient;
this.ctx.fill();
this.ctx.closePath();
if (this.selectedHeight) {
this.ctx.beginPath();
this.ctx.strokeStyle = 'white';
this.ctx.lineWidth = 4;
this.ctx.rect(0, this.selectedHeight - 5, width, 10);
this.ctx.stroke();
this.ctx.closePath();
}
};
/**
* @param {?} evt
* @return {?}
*/
ColorSlider.prototype.onMouseDown = /**
* @param {?} evt
* @return {?}
*/
function (evt) {
this.mousedown = true;
this.selectedHeight = evt.offsetY;
this.draw();
this.emitHue(evt.offsetY);
};
/**
* @param {?} evt
* @return {?}
*/
ColorSlider.prototype.onMouseMove = /**
* @param {?} evt
* @return {?}
*/
function (evt) {
if (this.mousedown) {
this.selectedHeight = evt.offsetY;
this.draw();
this.emitHue(evt.offsetY);
}
};
/**
* @param {?} y
* @return {?}
*/
ColorSlider.prototype.emitHue = /**
* @param {?} y
* @return {?}
*/
function (y) {
if (y < 0) {
y = 0;
}
else if (y >= 250) {
y = 249;
}
/** @type {?} */
var color = this.getColorAtPosition(y);
this.hueChange.emit(rgbToHex(color.r, color.g, color.b));
};
/**
* @param {?} y
* @return {?}
*/
ColorSlider.prototype.getColorAtPosition = /**
* @param {?} y
* @return {?}
*/
function (y) {
/** @type {?} */
var imageData = this.ctx.getImageData(5, y, 1, 1).data;
return {
r: imageData[0],
g: imageData[1],
b: imageData[2],
};
};
/**
* @param {?} changes
* @return {?}
*/
ColorSlider.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
if (changes.hue && !changes.hue.isFirstChange()) {
/** @type {?} */
var rgbColor = hexToRgb(this.hue);
if (rgbColor) {
/** @type {?} */
var hsvColor = rgbToHsv(rgbColor.r, rgbColor.g, rgbColor.b);
/** @type {?} */
var hueFactor = hsvColor.h / 360;
this.selectedHeight = hueFactor * 250;
this.draw();
}
}
};
/**
* @return {?}
*/
ColorSlider.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
if (this.hue) {
/** @type {?} */
var rgbColor = hexToRgb(this.hue);
/** @type {?} */
var hsvColor = rgbToHsv(rgbColor.r, rgbColor.g, rgbColor.b);
/** @type {?} */
var hueFactor = hsvColor.h / 360;
this.selectedHeight = hueFactor * 250;
}
this.draw();
};
ColorSlider.decorators = [
{ type: core.Component, args: [{
selector: 'suka-color-slider',
template: "\n <canvas\n #canvas\n class=\"color-slider\"\n width=\"20\"\n height=\"250\"\n (mousedown)=\"onMouseDown($event)\"\n (mousemove)=\"onMouseMove($event)\"\n >\n </canvas>\n "
}] }
];
ColorSlider.propDecorators = {
baseClass: [{ type: core.HostBinding, args: ['class.color-slider-wrapper',] }],
hue: [{ type: core.Input }],
hueChange: [{ type: core.Output }],
canvas: [{ type: core.ViewChild, args: ['canvas', { static: false },] }],
onMouseUp: [{ type: core.HostListener, args: ['window:mouseup', ['$event'],] }]
};
return ColorSlider;
}());
if (false) {
/** @type {?} */
ColorSlider.prototype.baseClass;
/**
* @type {?}
* @private
*/
ColorSlider.prototype.ctx;
/**
* @type {?}
* @private
*/
ColorSlider.prototype.mousedown;
/**
* @type {?}
* @private
*/
ColorSlider.prototype.selectedHeight;
/** @type {?} */
ColorSlider.prototype.hue;
/** @type {?} */
ColorSlider.prototype.hueChange;
/** @type {?} */
ColorSlider.prototype.canvas;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ColorPalette = /** @class */ (function () {
function ColorPalette() {
this.baseClass = true;
this.colorChange = new core.EventEmitter(true);
this.mousedown = false;
}
/**
* @return {?}
*/
ColorPalette.prototype.draw = /**
* @return {?}
*/
function () {
if (!this.ctx) {
this.ctx = this.canvas.nativeElement.getContext('2d');
}
/** @type {?} */
var width = this.canvas.nativeElement.width;
/** @type {?} */
var height = this.canvas.nativeElement.height;
if (this.hue) {
this.ctx.fillStyle = this.hue;
}
else {
this.ctx.fillStyle = '#ff0000';
}
this.ctx.fillRect(0, 0, width, height);
/** @type {?} */
var whiteGrad = this.ctx.createLinearGradient(0, 0, width, 0);
whiteGrad.addColorStop(0, 'rgba(255,255,255,1)');
whiteGrad.addColorStop(1, 'rgba(255,255,255,0)');
this.ctx.fillStyle = whiteGrad;
this.ctx.fillRect(0, 0, width, height);
/** @type {?} */
var blackGrad = this.ctx.createLinearGradient(0, 0, 0, height);
blackGrad.addColorStop(0, 'rgba(0,0,0,0)');
blackGrad.addColorStop(1, 'rgba(0,0,0,1)');
this.ctx.fillStyle = blackGrad;
this.ctx.fillRect(0, 0, width, height);
if (this.selectedPosition) {
this.ctx.strokeStyle = 'white';
this.ctx.fillStyle = 'white';
this.ctx.beginPath();
this.ctx.arc(this.selectedPosition.x, this.selectedPosition.y, 5, 0, 2 * Math.PI);
this.ctx.lineWidth = 3;
this.ctx.stroke();
this.ctx.closePath();
}
};
/**
* @param {?} changes
* @return {?}
*/
ColorPalette.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
if (changes.color && !changes.color.isFirstChange()) {
/** @type {?} */
var rgbColor = hexToRgb(this.color);
if (rgbColor) {
/** @type {?} */
var hsv = rgbToHsv(rgbColor.r, rgbColor.g, rgbColor.b);
this.selectedPosition = {
x: (hsv.s * 250) / 100,
y: 250 - (hsv.v * 250) / 100
};
this.draw();
}
}
else if (changes.hue && !changes.hue.isFirstChange()) {
this.draw();
/** @type {?} */
var pos = this.selectedPosition;
if (pos) {
this.colorChange.emit(this.getColorAtPosition(pos.x, pos.y));
}
}
};
/**
* @return {?}
*/
ColorPalette.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
if (this.color) {
/** @type {?} */
var rgbColor = hexToRgb(this.color);
if (rgbColor) {
/** @type {?} */
var hsv = rgbToHsv(rgbColor.r, rgbColor.g, rgbColor.b);
this.selectedPosition = {
x: (hsv.s * 250) / 100,
y: 250 - (hsv.v * 250) / 100
};
}
}
this.draw();
};
/**
* @param {?} evt
* @return {?}
*/
ColorPalette.prototype.onMouseUp = /**
* @param {?} evt
* @return {?}
*/
function (evt) {
this.mousedown = false;
};
/**
* @param {?} evt
* @return {?}
*/
ColorPalette.prototype.onMouseDown = /**
* @param {?} evt
* @return {?}
*/
function (evt) {
this.mousedown = true;
/** @type {?} */
var xPos = evt.offsetX < 0 ? 0 : evt.offsetX >= 250 ? 249 : evt.offsetX;
/** @type {?} */
var yPos = evt.offsetY < 0 ? 0 : evt.offsetY >= 250 ? 249 : evt.offsetY;
this.selectedPosition = {
x: xPos,
y: yPos,
};
this.draw();
this.emitColor(xPos, yPos);
};
/**
* @param {?} evt
* @return {?}
*/
ColorPalette.prototype.onMouseMove = /**
* @param {?} evt
* @return {?}
*/
function (evt) {
if (this.mousedown) {
/** @type {?} */
var xPos = evt.offsetX < 0 ? 0 : evt.offsetX >= 250 ? 249 : evt.offsetX;
/** @type {?} */
var yPos = evt.offsetY < 0 ? 0 : evt.offsetY >= 250 ? 249 : evt.offsetY;
this.selectedPosition = {
x: xPos,
y: yPos,
};
this.draw();
this.emitColor(xPos, yPos);
}
};
/**
* @param {?} x
* @param {?} y
* @return {?}
*/
ColorPalette.prototype.emitColor = /**
* @param {?} x
* @param {?} y
* @return {?}
*/
function (x, y) {
/** @type {?} */
var rgbaColor = this.getColorAtPosition(x, y);
this.colorChange.emit(rgbaColor);
};
/**
* @param {?} x
* @param {?} y
* @return {?}
*/
ColorPalette.prototype.getColorAtPosition = /**
* @param {?} x
* @param {?} y
* @return {?}
*/
function (x, y) {
/** @type {?} */
var imageData = this.ctx.getImageData(x, y, 1, 1).data;
return rgbToHex(imageData[0], imageData[1], imageData[2]);
};
ColorPalette.decorators = [
{ type: core.Component, args: [{
selector: 'suka-color-palette',
template: "\n <canvas\n #canvas\n class=\"color-palette\"\n width=\"250\"\n height=\"250\"\n (mousedown)=\"onMouseDown($event)\"\n (mousemove)=\"onMouseMove($event)\"\n >\n </canvas>\n "
}] }
];
ColorPalette.propDecorators = {
baseClass: [{ type: core.HostBinding, args: ['class.color-palette-container',] }],
hue: [{ type: core.Input }],
color: [{ type: core.Input }],
colorChange: [{ type: core.Output }],
canvas: [{ type: core.ViewChild, args: ['canvas', { static: false },] }],
onMouseUp: [{ type: core.HostListener, args: ['window:mouseup', ['$event'],] }]
};
return ColorPalette;
}());
if (false) {
/** @type {?} */
ColorPalette.prototype.baseClass;
/** @type {?} */
ColorPalette.prototype.hue;
/** @type {?} */
ColorPalette.prototype.color;
/** @type {?} */
ColorPalette.prototype.colorChange;
/** @type {?} */
ColorPalette.prototype.canvas;
/**
* @type {?}
* @private
*/
ColorPalette.prototype.ctx;
/**
* @type {?}
* @private
*/
ColorPalette.prototype.mousedown;
/** @type {?} */
ColorPalette.prototype.selectedPosition;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ColorInput = /** @class */ (function () {
/**
* Creates an instance of `ColorInput`.
*/
function ColorInput(_overlay, _viewContainerRef) {
this._overlay = _overlay;
this._viewContainerRef = _viewContainerRef;
this.containerClass = true;
/**
* Set to `true` for a disabled color input.
*/
this.disabled = false;
/**
* Set to `true` for a loading color input component.
*/
this.skeleton = false;
/**
* Set to `true` for an invalid color input component.
*/
this.invalid = false;
/**
* Set to `true` for a valid color input component.
*/
this.valid = false;
/**
* The unique id for the color input component.
*/
this.id = "color-input-" + ColorInput.colorInputCount;
/**
* Sets the value attribute on the `input` element.
*/
this.value = '';
/**
* Sets the placeholder on the `input` element.
*/
this.placeholder = '';
/**
* Emits event notifying other classes when a change in state occurs in the input.
*/
// tslint:disable-next-line: no-output-native
this.change = new core.EventEmitter();
/**
* Called when number input is blurred. Needed to properly implement `ControlValueAccessor`.
*/
this.onTouched = (/**
* @return {?}
*/
function () { });
/**
* Method set in `registerOnChange` to propagate changes back to the form.
*/
this.propagateChange = (/**
* @param {?} _
* @return {?}
*/
function (_) { });
ColorInput.colorInputCount++;
}
/**
* This is the initial value set to the component
* @param value The input value.
*/
/**
* This is the initial value set to the component
* @param {?} value The input value.
* @return {?}
*/
ColorInput.prototype.writeValue = /**
* This is the initial value set to the component
* @param {?} value The input value.
* @return {?}
*/
function (value) {
this.value = value;
};
/**
* Sets a method in order to propagate changes back to the form.
*/
/**
* Sets a method in order to propagate changes back to the form.
* @param {?} fn
* @return {?}
*/
ColorInput.prototype.registerOnChange = /**
* Sets a method in order to propagate changes back to the form.
* @param {?} fn
* @return {?}
*/
function (fn) {
this.propagateChange = fn;
};
/**
* Registers a callback to be triggered when the control has been touched.
* @param fn Callback to be triggered when the number input is touched.
*/
/**
* Registers a callback to be triggered when the control has been touched.
* @param {?} fn Callback to be triggered when the number input is touched.
* @return {?}
*/
ColorInput.prototype.registerOnTouched = /**
* Registers a callback to be triggered when the control has been touched.
* @param {?} fn Callback to be triggered when the number input is touched.
* @return {?}
*/
function (fn) {
this.onTouched = fn;
};
/**
* Sets the disabled state through the model
*/
/**
* Sets the disabled state through the model
* @param {?} isDisabled
* @return {?}
*/
ColorInput.prototype.setDisabledState = /**
* Sets the disabled state through the model
* @param {?} isDisabled
* @return {?}
*/
function (isDisabled) {
this.disabled = isDisabled;
};
/**
* Creates a class of `NumberChange` to emit the change in the `Number`.
*/
/**
* Creates a class of `NumberChange` to emit the change in the `Number`.
* @return {?}
*/
ColorInput.prototype.emitChangeEvent = /**
* Creates a class of `NumberChange` to emit the change in the `Number`.
* @return {?}
*/
function () {
this.change.emit(this.value);
this.propagateChange(this.value);
};
/**
* @param {?} value
* @return {?}
*/
ColorInput.prototype.onColorChange = /**
* @param {?} value
* @return {?}
*/
function (value) {
this.value = value;
this.emitChangeEvent();
};
/**
* @param {?} event
* @return {?}
*/
ColorInput.prototype.onColorInputChange = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.value = event.target.value;
this.emitChangeEvent();
};
/**
* Opens the color picker dialog
*/
/**
* Opens the color picker dialog
* @return {?}
*/
ColorInput.prototype.openColorDialog = /**
* Opens the color picker dialog
* @return {?}
*/
function () {
var _this = this;
if (!this._overlayRef) {
/** @type {?} */
var positionStrategy = this._overlay
.position()
.flexibleConnectedTo(this.origin)
.withPositions([{
originX: 'start',
originY: 'bottom',
overlayX: 'start',
overlayY: 'top',
offsetY: 8,
}]);
this._overlayRef = this._overlay.create({
hasBackdrop: true,
backdropClass: 'cdk-overlay-transparent-backdrop',
positionStrategy: positionStrategy,
});
this._overlayRef.backdropClick().subscribe((/**
* @return {?}
*/
function () { return _this._overlayRef.detach(); }));
this._portal = new portal.TemplatePortal(this.dialog, this._viewContainerRef);
}
this._overlayRef.attach(this._portal);
};
/**
* Closes the color picker dialog
*/
/**
* Closes the color picker dialog
* @return {?}
*/
ColorInput.prototype.closeColorDialog = /**
* Closes the color picker dialog
* @return {?}
*/
function () {
this._overlayRef.detach();
};
/**
* Checks if it is a template
*/
/**
* Checks if it is a template
* @param {?} value
* @return {?}
*/
ColorInput.prototype.isTemplate = /**
* Checks if it is a template
* @param {?} value
* @return {?}
*/
function (value) {
return value instanceof core.TemplateRef;
};
/**
* Variable used for creating unique ids for color input components.
*/
ColorInput.colorInputCount = 0;
ColorInput.decorators = [
{ type: core.Component, args: [{
selector: 'suka-color-input',
template: "\n <label *ngIf=\"skeleton && label\" class=\"label skeleton\"></label>\n <label *ngIf=\"!skeleton && label\" [for]=\"id\" class=\"label\">\n <ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n <ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n </label>\n <div *ngIf=\"!skeleton && helperText\" class=\"form__helper-text\">\n <ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n <ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n </div>\n <div\n data-color-input\n [attr.data-invalid]=\"(invalid ? true : null)\"\n [attr.data-valid]=\"(valid ? true : null)\"\n class=\"color-input\"\n [ngClass]=\"{\n 'color-input--nolabel': !label,\n 'color-input--helpertext': helperText,\n 'skeleton' : skeleton,\n 'color-input--disabled': disabled\n }\">\n <div class=\"color-input__input-wrapper\">\n <div\n class=\"color-input__color-preview\"\n *ngIf=\"value\"\n [ngStyle]=\"{'background-color': value || 'white'}\"\n (click)=\"openColorDialog()\"\n ></div>\n <svg\n class=\"color-input__color-preview-icon\"\n *ngIf=\"!value\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n (click)=\"openColorDialog()\"\n >\n <path d=\"M8 0C3.55556 0 0 3.55556 0 8C0 12.4444 3.55556 16 8 16C8.71111 16 9.33333 15.3778 9.33333 14.6667C9.33333 14.3111 9.24444 14.0444 8.97778 13.7778C8.8 13.5111 8.62222 13.2444 8.62222 12.8889C8.62222 12.1778 9.24448 11.5556 9.95556 11.5556H11.5556C14.0444 11.5556 16 9.6 16 7.11111C16 3.2 12.4444 0 8 0ZM3.11111 8C2.4 8 1.77778 7.37778 1.77778 6.66667C1.77778 5.95556 2.4 5.33333 3.11111 5.33333C3.82222 5.33333 4.44444 5.95556 4.44444 6.66667C4.44444 7.37778 3.82222 8 3.11111 8ZM5.77778 4.44444C5.06667 4.44444 4.44444 3.82222 4.44444 3.11111C4.44444 2.4 5.06667 1.77778 5.77778 1.77778C6.48889 1.77778 7.11111 2.4 7.11111 3.11111C7.11111 3.82222 6.48889 4.44444 5.77778 4.44444ZM10.2222 4.44444C9.51111 4.44444 8.88889 3.82222 8.88889 3.11111C8.88889 2.4 9.51111 1.77778 10.2222 1.77778C10.9333 1.77778 11.5556 2.4 11.5556 3.11111C11.5556 3.82222 10.9333 4.44444 10.2222 4.44444ZM12.8889 8C12.1778 8 11.5556 7.37778 11.5556 6.66667C11.5556 5.95556 12.1778 5.33333 12.8889 5.33333C13.6 5.33333 14.2222 5.95556 14.2222 6.66667C14.2222 7.37778 13.6 8 12.8889 8Z\" fill=\"#677784\"/>\n </svg>\n\n <input\n #origin\n type=\"text\"\n [id]=\"id\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n (focus)=\"openColorDialog()\"\n (change)=\"onColorInputChange($event)\"/>\n\n <suka-icon *ngIf=\"!skeleton && invalid\" icon=\"alert-circle\" class=\"color-input__invalid\"></suka-icon>\n <suka-icon *ngIf=\"!skeleton && valid\" icon=\"check\" class=\"color-input__valid\"></suka-icon>\n </div>\n <div *ngIf=\"invalid\" class=\"form-requirement\">\n <ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n <ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n </div>\n </div>\n\n <ng-template #colorPickerDialog>\n <div class=\"color-picker-dialog\">\n <suka-color-picker [color]=\"value\" (colorChange)=\"onColorChange($event)\">\n </suka-color-picker>\n </div>\n </ng-template>\n ",
providers: [
{
provide: forms.NG_VALUE_ACCESSOR,
useExisting: ColorInput,
multi: true
}
]
}] }
];
/** @nocollapse */
ColorInput.ctorParameters = function () { return [
{ type: overlay.Overlay },
{ type: core.ViewContainerRef }
]; };
ColorInput.propDecorators = {
containerClass: [{ type: core.HostBinding, args: ['class.form-item',] }],
disabled: [{ type: core.Input }],
skeleton: [{ type: core.Input }],
invalid: [{ type: core.Input }],
valid: [{ type: core.Input }],
id: [{ type: core.Input }],
required: [{ type: core.Input }],
value: [{ type: core.Input }],
placeholder: [{ type: core.Input }],
label: [{ type: core.Input }],
helperText: [{ type: core.Input }],
invalidText: [{ type: core.Input }],
change: [{ type: core.Output }],
origin: [{ type: core.ViewChild, args: ['origin', { static: false },] }],
dialog: [{ type: core.ViewChild, args: ['colorPickerDialog', { static: false },] }]
};
return ColorInput;
}());
if (false) {
/**
* Variable used for creating unique ids for color input components.
* @type {?}
*/
ColorInput.colorInputCount;
/**
* @type {?}
* @private
*/
ColorInput.prototype._overlayRef;
/**
* @type {?}
* @private
*/
ColorInput.prototype._portal;
/** @type {?} */
ColorInput.prototype.containerClass;
/**
* Set to `true` for a disabled color input.
* @type {?}
*/
ColorInput.prototype.disabled;
/**
* Set to `true` for a loading color input component.
* @type {?}
*/
ColorInput.prototype.skeleton;
/**
* Set to `true` for an invalid color input component.
* @type {?}
*/
ColorInput.prototype.invalid;
/**
* Set to `true` for a valid color input component.
* @type {?}
*/
ColorInput.prototype.valid;
/**
* The unique id for the color input component.
* @type {?}
*/
ColorInput.prototype.id;
/**
* Reflects the required attribute of the `input` element.
* @type {?}
*/
ColorInput.prototype.required;
/**
* Sets the value attribute on the `input` element.
* @type {?}
*/
ColorInput.prototype.value;
/**
* Sets the placeholder on the `input` element.
* @type {?}
*/
ColorInput.prototype.placeholder;
/**
* Sets the text inside the `label` tag.
* @type {?}
*/
ColorInput.prototype.label;
/**
* Sets the optional helper text.
* @type {?}
*/
ColorInput.prototype.helperText;
/**
* Sets the invalid text.
* @type {?}
*/
ColorInput.prototype.invalidText;
/**
* Emits event notifying other classes when a change in state occurs in the input.
* @type {?}
*/
ColorInput.prototype.change;
/** @type {?} */
ColorInput.prototype.origin;
/** @type {?} */
ColorInput.prototype.dialog;
/**
* Called when number input is blurred. Needed to properly implement `ControlValueAccessor`.
* @type {?}
*/
ColorInput.prototype.onTouched;
/**
* Method set in `registerOnChange` to propagate changes back to the form.
* @type {?}
*/
ColorInput.prototype.propagateChange;
/**
* @type {?}
* @private
*/
ColorInput.prototype._overlay;
/**
* @type {?}
* @private
*/
ColorInput.prototype._viewContainerRef;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ColorPickerModule = /** @class */ (function () {
function ColorPickerModule() {
}
ColorPickerModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
ColorPicker,
ColorSlider,
ColorPalette,
ColorInput,
],
exports: [
ColorPicker,
ColorSlider,
ColorPalette,
ColorInput,
],
imports: [
common.CommonModule,
overlay.OverlayModule,
forms.FormsModule,
IconModule,
],
entryComponents: [
ColorPicker,
],
},] }
];
return ColorPickerModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var SheetRef = /** @class */ (function () {
function SheetRef(overlayRef) {
this.overlayRef = overlayRef;
this._beforeClose = new rxjs.Subject();
this._afterClosed = new rxjs.Subject();
}
/**
* @param {?=} data
* @return {?}
*/
SheetRef.prototype.close = /**
* @param {?=} data
* @return {?}
*/
function (data) {
var _this = this;
this._result = data;
// Listen for animation 'start' events
this.componentInstance.animationStateChanged.pipe(operators.filter((/**
* @param {?} event
* @return {?}
*/
function (event) { return event.phaseName === 'start'; })), operators.take(1)).subscribe((/**
* @return {?}
*/
function () {
_this._beforeClose.next(_this._result);
_this._beforeClose.complete();
_this.overlayRef.detachBackdrop();
}));
// Listen for animation 'done' events
this.componentInstance.animationStateChanged.pipe(operators.filter((/**
* @param {?} event
* @return {?}
*/
function (event) { return event.phaseName === 'done' && event.toState === 'leave'; })), operators.take(1)).subscribe((/**
* @return {?}
*/
function () {
_this._afterClosed.next(_this._result);
_this._afterClosed.complete();
_this.overlayRef.dispose();
// Make sure to also clear the reference to the
// component instance to avoid memory leaks
// tslint:disable-next-line: no-non-null-assertion
_this.componentInstance = (/** @type {?} */ (null));
}));
// Start exit animation
this.componentInstance.startExitAnimation();
};
/**
* @return {?}
*/
SheetRef.prototype.afterClosed = /**
* @return {?}
*/
function () {
return this._afterClosed.asObservable();
};
/**
* @return {?}
*/
SheetRef.prototype.beforeClose = /**
* @return {?}
*/
function () {
return this._beforeClose.asObservable();
};
return SheetRef;
}());
if (false) {
/** @type {?} */
SheetRef.prototype.componentInstance;
/**
* @type {?}
* @private
*/
SheetRef.prototype._beforeClose;
/**
* @type {?}
* @private
*/
SheetRef.prototype._afterClosed;
/**
* @type {?}
* @private
*/
SheetRef.prototype._result;
/**
* @type {?}
* @private
*/
SheetRef.prototype.overlayRef;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var SHEET_CONTENT_DATA = new core.InjectionToken('SHEET_CONTENT_DATA');
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var ESCAPE_KEY$2 = 27;
/** @type {?} */
var SHEET_ANIMATION_TIMINGS = '200ms cubic-bezier(0.64, 0, 0.35, 1)';
var SheetContainer = /** @class */ (function () {
function SheetContainer(dialogRef, content) {
this.dialogRef = dialogRef;
this.content = content;
this.animationState = 'enter';
this.animationStateChanged = new core.EventEmitter();
this.showFooter = false;
this.baseClass = true;
}
/**
* @return {?}
*/
SheetContainer.prototype.ngOnInit = /**
* @return {?}
*/
function () {
if (this.content.actions && this.content.actions.length > 0) {
this.showFooter = true;
this.primaryActions = this.content.actions.filter((/**
* @param {?} action
* @return {?}
*/
function (action) { return action.type === 'primary'; }));
this.secondaryActions = this.content.actions.filter((/**
* @param {?} action
* @return {?}
*/
function (action) { return action.type === 'secondary'; }));
}
};
/**
* @param {?} value
* @return {?}
*/
SheetContainer.prototype.isTemplate = /**
* @param {?} value
* @return {?}
*/
function (value) {
return value instanceof core.TemplateRef;
};
/**
* @param {?=} event
* @return {?}
*/
SheetContainer.prototype.onClose = /**
* @param {?=} event
* @return {?}
*/
function (event) {
this.dialogRef.close('cancel');
};
/**
* @param {?} tag
* @return {?}
*/
SheetContainer.prototype.onAction = /**
* @param {?} tag
* @return {?}
*/
function (tag) {
this.dialogRef.close(tag);
};
/**
* @param {?} event
* @return {?}
*/
SheetContainer.prototype.handleKeydown = /**
* @param {?} event
* @return {?}
*/
function (event) {
// tslint:disable-next-line: deprecation
if (event.keyCode === ESCAPE_KEY$2) {
this.dialogRef.close('cancel');
}
};
/**
* @param {?} event
* @return {?}
*/
SheetContainer.prototype.onAnimationStart = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.animationStateChanged.emit(event);
};
/**
* @param {?} event
* @return {?}
*/
SheetContainer.prototype.onAnimationDone = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.animationStateChanged.emit(event);
};
/**
* @return {?}
*/
SheetContainer.prototype.startExitAnimation = /**
* @return {?}
*/
function () {
this.animationState = 'leave';
};
/**
* @param {?} $event
* @return {?}
*/
SheetContainer.prototype.closeSheet = /**
* @param {?} $event
* @return {?}
*/
function ($event) {
this.dialogRef.close($event);
};
SheetContainer.decorators = [
{ type: core.Component, args: [{
selector: 'suka-sheet',
template: "\n <div class=\"sheet\"\n [@slideContent]=\"animationState\"\n (@slideContent.start)=\"onAnimationStart($event)\"\n (@slideContent.done)=\"onAnimationDone($event)\"\n cdkTrapFocus\n >\n <div class=\"sheet__header\">\n <h5>\n <ng-container *ngIf=\"!isTemplate(content.title)\">{{content.title}}</ng-container>\n <ng-template *ngIf=\"isTemplate(content.title)\" [ngTemplateOutlet]=\"content.title\"></ng-template>\n </h5>\n <button\n sukaButton=\"plain\"\n (click)=\"onClose($event)\"\n >\n <suka-icon icon=\"x\"></suka-icon>\n </button>\n </div>\n <div class=\"sheet__content\">\n <ng-container *ngIf=\"!isTemplate(content.body)\">{{content.body}}</ng-container>\n <ng-container *ngIf=\"isTemplate(content.body)\">\n <ng-container\n *ngTemplateOutlet=\"content.body; context: {closeSheet: closeSheet.bind(this)}\"\n ></ng-container>\n </ng-container>\n </div>\n <div class=\"sheet__footer\" *ngIf=\"showFooter\">\n <button\n *ngFor=\"let secondaryAction of secondaryActions\"\n sukaButton=\"plain\"\n (click)=\"onAction(secondaryAction.tag)\"\n >\n {{secondaryAction.label}}\n </button>\n\n <button\n *ngFor=\"let primaryAction of primaryActions\"\n sukaButton=\"primary\"\n (click)=\"onAction(primaryAction.tag)\"\n >\n {{primaryAction.label}}\n </button>\n </div>\n </div>\n ",
animations: [
animations.trigger('slideContent', [
animations.state('void', animations.style({ transform: 'translate3d(20rem, 0, 0)', opacity: 0 })),
animations.state('enter', animations.style({ transform: 'none', opacity: 1 })),
animations.state('leave', animations.style({ transform: 'translate3d(20rem, 0, 0)', opacity: 0 })),
animations.transition('* => *', animations.animate(SHEET_ANIMATION_TIMINGS)),
])
]
}] }
];
/** @nocollapse */
SheetContainer.ctorParameters = function () { return [
{ type: SheetRef },
{ type: undefined, decorators: [{ type: core.Inject, args: [SHEET_CONTENT_DATA,] }] }
]; };
SheetContainer.propDecorators = {
baseClass: [{ type: core.HostBinding, args: ['class.sheet--default',] }],
handleKeydown: [{ type: core.HostListener, args: ['document:keydown', ['$event'],] }]
};
return SheetContainer;
}());
if (false) {
/** @type {?} */
SheetContainer.prototype.animationState;
/** @type {?} */
SheetContainer.prototype.animationStateChanged;
/** @type {?} */
SheetContainer.prototype.showFooter;
/** @type {?} */
SheetContainer.prototype.primaryActions;
/** @type {?} */
SheetContainer.prototype.secondaryActions;
/** @type {?} */
SheetContainer.prototype.baseClass;
/** @type {?} */
SheetContainer.prototype.dialogRef;
/** @type {?} */
SheetContainer.prototype.content;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function SheetContent() { }
if (false) {
/** @type {?|undefined} */
SheetContent.prototype.title;
/** @type {?|undefined} */
SheetContent.prototype.body;
/** @type {?|undefined} */
SheetContent.prototype.closeButton;
/** @type {?|undefined} */
SheetContent.prototype.actions;
}
/**
* @record
*/
function SheetConfig() { }
if (false) {
/** @type {?|undefined} */
SheetConfig.prototype.closeOnBackdropClick;
/** @type {?|undefined} */
SheetConfig.prototype.panelClass;
/** @type {?|undefined} */
SheetConfig.prototype.hasBackdrop;
/** @type {?|undefined} */
SheetConfig.prototype.backdropClass;
/** @type {?|undefined} */
SheetConfig.prototype.content;
}
/** @type {?} */
var DEFAULT_CONFIG$3 = {
closeOnBackdropClick: true,
hasBackdrop: true,
backdropClass: 'cdk-overlay-transparent-backdrop',
panelClass: 'modal--default',
content: null
};
var SheetService = /** @class */ (function () {
function SheetService(injector, overlay) {
this.injector = injector;
this.overlay = overlay;
}
/**
* @param {?=} config
* @return {?}
*/
SheetService.prototype.open = /**
* @param {?=} config
* @return {?}
*/
function (config) {
if (config === void 0) { config = {}; }
// Override default configuration
/** @type {?} */
var dialogConfig = __assign({}, DEFAULT_CONFIG$3, config);
// Returns an OverlayRef which is a PortalHost
/** @type {?} */
var overlayRef = this.createOverlay(dialogConfig);
// Instantiate remote control
/** @type {?} */
var modalRef = new SheetRef(overlayRef);
/** @type {?} */
var overlayComponent = this.attachSheetContainer(overlayRef, dialogConfig, modalRef);
modalRef.componentInstance = overlayComponent;
if (dialogConfig.closeOnBackdropClick) {
overlayRef.backdropClick().subscribe((/**
* @param {?} _
* @return {?}
*/
function (_) { return modalRef.close('cancel'); }));
}
return modalRef;
};
/**
* @private
* @param {?} config
* @return {?}
*/
SheetService.prototype.createOverlay = /**
* @private
* @param {?} config
* @return {?}
*/
function (config) {
/** @type {?} */
var overlayConfig = this.getOverlayConfig(config);
return this.overlay.create(overlayConfig);
};
/**
* @private
* @param {?} overlayRef
* @param {?} config
* @param {?} modalRef
* @return {?}
*/
SheetService.prototype.attachSheetContainer = /**
* @private
* @param {?} overlayRef
* @param {?} config
* @param {?} modalRef
* @return {?}
*/
function (overlayRef, config, modalRef) {
/** @type {?} */
var injector = this.createInjector(config, modalRef);
/** @type {?} */
var containerPortal = new portal.ComponentPortal(SheetContainer, null, injector);
/** @type {?} */
var containerRef = overlayRef.attach(containerPortal);
return containerRef.instance;
};
/**
* @private
* @param {?} config
* @param {?} modalRef
* @return {?}
*/
SheetService.prototype.createInjector = /**
* @private
* @param {?} config
* @param {?} modalRef
* @return {?}
*/
function (config, modalRef) {
/** @type {?} */
var injectionTokens = new WeakMap();
injectionTokens.set(SheetRef, modalRef);
injectionTokens.set(SHEET_CONTENT_DATA, config.content);
return new portal.PortalInjector(this.injector, injectionTokens);
};
/**
* @private
* @param {?} config
* @return {?}
*/
SheetService.prototype.getOverlayConfig = /**
* @private
* @param {?} config
* @return {?}
*/
function (config) {
/** @type {?} */
var positionStrategy = this.overlay.position()
.global();
/** @type {?} */
var overlayConfig = new overlay.OverlayConfig({
hasBackdrop: config.hasBackdrop,
backdropClass: config.backdropClass,
panelClass: config.panelClass,
scrollStrategy: this.overlay.scrollStrategies.noop(),
positionStrategy: positionStrategy
});
return overlayConfig;
};
SheetService.decorators = [
{ type: core.Injectable }
];
/** @nocollapse */
SheetService.ctorParameters = function () { return [
{ type: core.Injector },
{ type: overlay.Overlay }
]; };
return SheetService;
}());
if (false) {
/**
* @type {?}
* @private
*/
SheetService.prototype.injector;
/**
* @type {?}
* @private
*/
SheetService.prototype.overlay;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var PRIMARY_ACTION_TAG$1 = 'primaryAction';
/** @type {?} */
var SECONDARY_ACTION_TAG$1 = 'secondaryAction';
/**
* Sheets are overlays that prevent users from interacting with the rest of the application until a specific action is taken. They can be disruptive because they require users to take an action before they can continue interacting with the rest of the application.
* It should be used thoughtfully and sparingly.
*/
var SheetDirective = /** @class */ (function () {
function SheetDirective(sheetService) {
this.sheetService = sheetService;
/**
* Set to `true` to show a close button on the top right corner. Defaults to `false`.
*/
this.closeButton = false;
/**
* Sets to `false` to stop the sheet from closing when the user clicks on the backdrop. Defaults to `true`.
*/
this.closeOnBackdropClick = true;
/**
* Callback when the sheet closes.
*/
this.close = new core.EventEmitter();
/**
* Callback when the secondary action is triggered.
*/
this.secondaryAction = new core.EventEmitter();
/**
* Callback when the primary action is triggered.
*/
this.primaryAction = new core.EventEmitter();
}
/**
* @return {?}
*/
SheetDirective.prototype.onClick = /**
* @return {?}
*/
function () {
this.openSheet();
};
/**
* Opens the sheet.
*/
/**
* Opens the sheet.
* @private
* @return {?}
*/
SheetDirective.prototype.openSheet = /**
* Opens the sheet.
* @private
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var sheetConfig = {
closeOnBackdropClick: this.closeOnBackdropClick,
content: {
closeButton: this.closeButton,
title: this.title,
body: this.body,
}
};
if (this.primaryActionLabel || this.secondaryActionLabel) {
sheetConfig.content.actions = [];
if (this.primaryActionLabel) {
sheetConfig.content.actions.push({
label: this.primaryActionLabel,
type: 'primary',
tag: PRIMARY_ACTION_TAG$1
});
}
if (this.secondaryActionLabel) {
sheetConfig.content.actions.push({
label: this.secondaryActionLabel,
type: 'secondary',
tag: SECONDARY_ACTION_TAG$1
});
}
}
/** @type {?} */
var sheetRef = this.sheetService.open(sheetConfig);
sheetRef.afterClosed().subscribe((/**
* @param {?} result
* @return {?}
*/
function (result) {
switch (result) {
case PRIMARY_ACTION_TAG$1:
if (_this.primaryAction.observers.length > 0) {
_this.primaryAction.emit(result);
}
break;
case SECONDARY_ACTION_TAG$1:
if (_this.secondaryAction.observers.length > 0) {
_this.secondaryAction.emit(result);
}
break;
default:
if (_this.close.observers.length > 0) {
_this.close.emit();
}
break;
}
}));
};
SheetDirective.decorators = [
{ type: core.Directive, args: [{
selector: '[sukaSheet]'
},] }
];
/** @nocollapse */
SheetDirective.ctorParameters = function () { return [
{ type: SheetService }
]; };
SheetDirective.propDecorators = {
closeButton: [{ type: core.Input, args: ['sheetCloseButton',] }],
title: [{ type: core.Input, args: ['sheetTitle',] }],
body: [{ type: core.Input, args: ['sheetBody',] }],
closeOnBackdropClick: [{ type: core.Input, args: ['sheetCloseOnBackdropClick',] }],
close: [{ type: core.Output, args: ['sheetClose',] }],
secondaryActionLabel: [{ type: core.Input, args: ['sheetSecondaryActionLabel',] }],
secondaryAction: [{ type: core.Output, args: ['sheetSecondaryAction',] }],
primaryActionLabel: [{ type: core.Input, args: ['sheetPrimaryActionLabel',] }],
primaryAction: [{ type: core.Output, args: ['sheetPrimaryAction',] }],
onClick: [{ type: core.HostListener, args: ['click',] }]
};
return SheetDirective;
}());
if (false) {
/**
* Set to `true` to show a close button on the top right corner. Defaults to `false`.
* @type {?}
*/
SheetDirective.prototype.closeButton;
/**
* Sets the sheet title.
* @type {?}
*/
SheetDirective.prototype.title;
/**
* Sets the body of the sheet.
* @type {?}
*/
SheetDirective.prototype.body;
/**
* Sets to `false` to stop the sheet from closing when the user clicks on the backdrop. Defaults to `true`.
* @type {?}
*/
SheetDirective.prototype.closeOnBackdropClick;
/**
* Callback when the sheet closes.
* @type {?}
*/
SheetDirective.prototype.close;
/**
* Sets the sheet secondary action button label.
* @type {?}
*/
SheetDirective.prototype.secondaryActionLabel;
/**
* Callback when the secondary action is triggered.
* @type {?}
*/
SheetDirective.prototype.secondaryAction;
/**
* Sets the sheet primary action button label.
* @type {?}
*/
SheetDirective.prototype.primaryActionLabel;
/**
* Callback when the primary action is triggered.
* @type {?}
*/
SheetDirective.prototype.primaryAction;
/**
* @type {?}
* @protected
*/
SheetDirective.prototype.sheetService;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var SheetModule = /** @class */ (function () {
function SheetModule() {
}
SheetModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
SheetContainer,
SheetDirective,
],
exports: [
SheetContainer,
SheetDirective,
],
imports: [
common.CommonModule,
overlay.OverlayModule,
ButtonModule,
IconModule,
],
entryComponents: [
SheetContainer
],
providers: [
SheetService,
],
},] }
];
return SheetModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var CalendarDayPicker = /** @class */ (function () {
/**
* Creates an instance of `CalendarDayPicker`.
*/
function CalendarDayPicker(_overlay, _viewContainerRef) {
this._overlay = _overlay;
this._viewContainerRef = _viewContainerRef;
this._selectedDays = [];
this.baseClass = true;
this.containerClass = true;
/**
* Set to `true` for a disabled color input.
*/
this.disabled = false;
/**
* Set to `true` for a loading color input component.
*/
this.skeleton = false;
/**
* Set to `true` for an invalid color input component.
*/
this.invalid = false;
/**
* Set to `true` for a valid color input component.
*/
this.valid = false;
/**
* The unique id for the color input component.
*/
this.id = "calendar-day-picker-" + CalendarDayPicker.calendarDayPickerCount;
/**
* Sets the value attribute on the `input` element.
*/
this.value = '';
/**
* Sets the placeholder on the `input` element.
*/
this.placeholder = '';
/**
* Emits event notifying other classes when a change in state occurs in the input.
*/
// tslint:disable-next-line: no-output-native
this.change = new core.EventEmitter();
/**
* Called when number input is blurred. Needed to properly implement `ControlValueAccessor`.
*/
this.onTouched = (/**
* @return {?}
*/
function () { });
/**
* Method set in `registerOnChange` to propagate changes back to the form.
*/
this.propagateChange = (/**
* @param {?} _
* @return {?}
*/
function (_) { });
CalendarDayPicker.calendarDayPickerCount++;
}
/**
* This is the initial value set to the component
* @param value The input value.
*/
/**
* This is the initial value set to the component
* @param {?} value The input value.
* @return {?}
*/
CalendarDayPicker.prototype.writeValue = /**
* This is the initial value set to the component
* @param {?} value The input value.
* @return {?}
*/
function (value) {
this.value = value || '';
if (value) {
this._selectedDays = JSON.parse('[' + value + ']');
}
};
/**
* Sets a method in order to propagate changes back to the form.
*/
/**
* Sets a method in order to propagate changes back to the form.
* @param {?} fn
* @return {?}
*/
CalendarDayPicker.prototype.registerOnChange = /**
* Sets a method in order to propagate changes back to the form.
* @param {?} fn
* @return {?}
*/
function (fn) {
this.propagateChange = fn;
};
/**
* Registers a callback to be triggered when the control has been touched.
* @param fn Callback to be triggered when the number input is touched.
*/
/**
* Registers a callback to be triggered when the control has been touched.
* @param {?} fn Callback to be triggered when the number input is touched.
* @return {?}
*/
CalendarDayPicker.prototype.registerOnTouched = /**
* Registers a callback to be triggered when the control has been touched.
* @param {?} fn Callback to be triggered when the number input is touched.
* @return {?}
*/
function (fn) {
this.onTouched = fn;
};
/**
* Sets the disabled state through the model
*/
/**
* Sets the disabled state through the model
* @param {?} isDisabled
* @return {?}
*/
CalendarDayPicker.prototype.setDisabledState = /**
* Sets the disabled state through the model
* @param {?} isDisabled
* @return {?}
*/
function (isDisabled) {
this.disabled = isDisabled;
};
/**
* Creates a class of `NumberChange` to emit the change in the `Number`.
*/
/**
* Creates a class of `NumberChange` to emit the change in the `Number`.
* @return {?}
*/
CalendarDayPicker.prototype.emitChangeEvent = /**
* Creates a class of `NumberChange` to emit the change in the `Number`.
* @return {?}
*/
function () {
this.change.emit(this.value);
this.propagateChange(this.value);
};
/**
* @param {?} days
* @return {?}
*/
CalendarDayPicker.prototype.onInputChange = /**
* @param {?} days
* @return {?}
*/
function (days) {
this.value = JSON.parse('[' + days + ']');
this.emitChangeEvent();
};
/**
* @param {?} days
* @return {?}
*/
CalendarDayPicker.prototype.onDaysChange = /**
* @param {?} days
* @return {?}
*/
function (days) {
this.value = days.toString();
this._selectedDays = days;
this.emitChangeEvent();
};
/**
* Opens the color picker dialog
*/
/**
* Opens the color picker dialog
* @return {?}
*/
CalendarDayPicker.prototype.openCalendarDayOverlay = /**
* Opens the color picker dialog
* @return {?}
*/
function () {
var _this = this;
if (!this._overlayRef) {
/** @type {?} */
var positionStrategy = this._overlay
.position()
.flexibleConnectedTo(this.origin)
.withPositions([{
originX: 'start',
originY: 'bottom',
overlayX: 'start',
overlayY: 'top',
offsetY: 8,
}]);
this._overlayRef = this._overlay.create({
hasBackdrop: true,
backdropClass: 'cdk-overlay-transparent-backdrop',
positionStrategy: positionStrategy,
});
this._overlayRef.backdropClick().subscribe((/**
* @return {?}
*/
function () { return _this._overlayRef.detach(); }));
this._portal = new portal.TemplatePortal(this.dialog, this._viewContainerRef);
}
this._overlayRef.attach(this._portal);
};
/**
* Closes the calendar day dialog
*/
/**
* Closes the calendar day dialog
* @return {?}
*/
CalendarDayPicker.prototype.closeCalendarDayOverlay = /**
* Closes the calendar day dialog
* @return {?}
*/
function () {
this._overlayRef.detach();
};
/**
* Checks if it is a template
*/
/**
* Checks if it is a template
* @param {?} value
* @return {?}
*/
CalendarDayPicker.prototype.isTemplate = /**
* Checks if it is a template
* @param {?} value
* @return {?}
*/
function (value) {
return value instanceof core.TemplateRef;
};
/**
* Variable used for creating unique ids for color input components.
*/
CalendarDayPicker.calendarDayPickerCount = 0;
CalendarDayPicker.decorators = [
{ type: core.Component, args: [{
selector: 'suka-calendar-day-picker',
template: "\n <label *ngIf=\"skeleton && label\" class=\"label skeleton\"></label>\n <label *ngIf=\"!skeleton && label\" [for]=\"id\" class=\"label\">\n <ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n <ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n </label>\n <div *ngIf=\"!skeleton && helperText\" class=\"form__helper-text\">\n <ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n <ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n </div>\n <div\n [attr.data-invalid]=\"(invalid ? true : null)\"\n [attr.data-valid]=\"(valid ? true : null)\"\n class=\"calendar-day-picker\"\n [ngClass]=\"{\n 'calendar-day-picker--nolabel': !label,\n 'calendar-day-picker--helpertext': helperText,\n 'skeleton' : skeleton,\n 'calendar-day-picker--disabled': disabled\n }\">\n <div class=\"calendar-day-picker__input-wrapper\">\n <input\n #origin\n type=\"text\"\n [id]=\"id\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n (focus)=\"openCalendarDayOverlay()\"\n (change)=\"onInputChange($event)\"/>\n\n <suka-icon *ngIf=\"!skeleton && invalid\" icon=\"alert-circle\" class=\"calendar-day-picker__invalid\"></suka-icon>\n <suka-icon *ngIf=\"!skeleton && valid\" icon=\"check\" class=\"calendar-day-picker__valid\"></suka-icon>\n </div>\n <div *ngIf=\"invalid\" class=\"form-requirement\">\n <ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n <ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n </div>\n </div>\n\n <ng-template #calendarDayOverlay>\n <suka-calendar-day-overlay\n [days]=\"_selectedDays\"\n (daysChange)=\"onDaysChange($event)\"\n >\n </suka-calendar-day-overlay>\n </ng-template>\n ",
providers: [
{
provide: forms.NG_VALUE_ACCESSOR,
useExisting: CalendarDayPicker,
multi: true
}
]
}] }
];
/** @nocollapse */
CalendarDayPicker.ctorParameters = function () { return [
{ type: overlay.Overlay },
{ type: core.ViewContainerRef }
]; };
CalendarDayPicker.propDecorators = {
baseClass: [{ type: core.HostBinding, args: ['class.calendar-day-picker',] }],
containerClass: [{ type: core.HostBinding, args: ['class.form-item',] }],
disabled: [{ type: core.Input }],
skeleton: [{ type: core.Input }],
invalid: [{ type: core.Input }],
valid: [{ type: core.Input }],
id: [{ type: core.Input }],
required: [{ type: core.Input }],
value: [{ type: core.Input }],
placeholder: [{ type: core.Input }],
label: [{ type: core.Input }],
helperText: [{ type: core.Input }],
invalidText: [{ type: core.Input }],
change: [{ type: core.Output }],
origin: [{ type: core.ViewChild, args: ['origin', { static: false },] }],
dialog: [{ type: core.ViewChild, args: ['calendarDayOverlay', { static: false },] }]
};
return CalendarDayPicker;
}());
if (false) {
/**
* Variable used for creating unique ids for color input components.
* @type {?}
*/
CalendarDayPicker.calendarDayPickerCount;
/**
* @type {?}
* @private
*/
CalendarDayPicker.prototype._overlayRef;
/**
* @type {?}
* @private
*/
CalendarDayPicker.prototype._portal;
/** @type {?} */
CalendarDayPicker.prototype._selectedDays;
/** @type {?} */
CalendarDayPicker.prototype.baseClass;
/** @type {?} */
CalendarDayPicker.prototype.containerClass;
/**
* Set to `true` for a disabled color input.
* @type {?}
*/
CalendarDayPicker.prototype.disabled;
/**
* Set to `true` for a loading color input component.
* @type {?}
*/
CalendarDayPicker.prototype.skeleton;
/**
* Set to `true` for an invalid color input component.
* @type {?}
*/
CalendarDayPicker.prototype.invalid;
/**
* Set to `true` for a valid color input component.
* @type {?}
*/
CalendarDayPicker.prototype.valid;
/**
* The unique id for the color input component.
* @type {?}
*/
CalendarDayPicker.prototype.id;
/**
* Reflects the required attribute of the `input` element.
* @type {?}
*/
CalendarDayPicker.prototype.required;
/**
* Sets the value attribute on the `input` element.
* @type {?}
*/
CalendarDayPicker.prototype.value;
/**
* Sets the placeholder on the `input` element.
* @type {?}
*/
CalendarDayPicker.prototype.placeholder;
/**
* Sets the text inside the `label` tag.
* @type {?}
*/
CalendarDayPicker.prototype.label;
/**
* Sets the optional helper text.
* @type {?}
*/
CalendarDayPicker.prototype.helperText;
/**
* Sets the invalid text.
* @type {?}
*/
CalendarDayPicker.prototype.invalidText;
/**
* Emits event notifying other classes when a change in state occurs in the input.
* @type {?}
*/
CalendarDayPicker.prototype.change;
/** @type {?} */
CalendarDayPicker.prototype.origin;
/** @type {?} */
CalendarDayPicker.prototype.dialog;
/**
* Called when number input is blurred. Needed to properly implement `ControlValueAccessor`.
* @type {?}
*/
CalendarDayPicker.prototype.onTouched;
/**
* Method set in `registerOnChange` to propagate changes back to the form.
* @type {?}
*/
CalendarDayPicker.prototype.propagateChange;
/**
* @type {?}
* @private
*/
CalendarDayPicker.prototype._overlay;
/**
* @type {?}
* @private
*/
CalendarDayPicker.prototype._viewContainerRef;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var CalendarDayOverlay = /** @class */ (function () {
function CalendarDayOverlay() {
this.baseClass = true;
this.days = [];
this.daysChange = new core.EventEmitter();
this.numberOfDays = 31;
}
/**
* @param {?} size
* @param {?=} startAt
* @return {?}
*/
CalendarDayOverlay.prototype.range = /**
* @param {?} size
* @param {?=} startAt
* @return {?}
*/
function (size, startAt) {
if (startAt === void 0) { startAt = 0; }
return __spread(Array(size).keys()).map((/**
* @param {?} i
* @return {?}
*/
function (i) { return i + startAt; }));
};
/**
* @param {?} day
* @return {?}
*/
CalendarDayOverlay.prototype.toggleDay = /**
* @param {?} day
* @return {?}
*/
function (day) {
/** @type {?} */
var indexOfDay = this.days.indexOf(day);
if (indexOfDay < 0) {
this.days.push(day);
}
else {
this.days.splice(indexOfDay, 1);
}
this.days.sort((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
function (a, b) {
return a - b;
}));
this.daysChange.emit(this.days);
};
CalendarDayOverlay.decorators = [
{ type: core.Component, args: [{
selector: 'suka-calendar-day-overlay',
template: "\n <div\n *ngFor=\"let day of range(numberOfDays,1)\"\n class=\"calendar-day\"\n (click)=\"toggleDay(day)\"\n [ngClass]=\"{\n 'calendar-day--selected': days.indexOf(day) >= 0\n }\"\n >\n <span class=\"calendar-day__number\">\n {{day}}\n </span>\n </div>\n "
}] }
];
CalendarDayOverlay.propDecorators = {
baseClass: [{ type: core.HostBinding, args: ['class.calendar-day-picker__overlay',] }],
days: [{ type: core.Input }],
daysChange: [{ type: core.Output }]
};
return CalendarDayOverlay;
}());
if (false) {
/** @type {?} */
CalendarDayOverlay.prototype.baseClass;
/** @type {?} */
CalendarDayOverlay.prototype.days;
/** @type {?} */
CalendarDayOverlay.prototype.daysChange;
/** @type {?} */
CalendarDayOverlay.prototype.numberOfDays;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var CalendarDayPickerModule = /** @class */ (function () {
function CalendarDayPickerModule() {
}
CalendarDayPickerModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [
CalendarDayPicker,
CalendarDayOverlay,
],
exports: [
CalendarDayPicker,
CalendarDayOverlay
],
imports: [
common.CommonModule,
overlay.OverlayModule,
forms.FormsModule,
IconModule,
],
entryComponents: [
CalendarDayOverlay,
],
},] }
];
return CalendarDayPickerModule;
}());
exports.Accordion = Accordion;
exports.AccordionItem = AccordionItem;
exports.AccordionModule = AccordionModule;
exports.Avatar = Avatar;
exports.AvatarModule = AvatarModule;
exports.Badge = Badge;
exports.BadgeModule = BadgeModule;
exports.Banner = Banner;
exports.BannerModule = BannerModule;
exports.Breadcrumb = Breadcrumb;
exports.BreadcrumbModule = BreadcrumbModule;
exports.Button = Button;
exports.ButtonGroup = ButtonGroup;
exports.ButtonModule = ButtonModule;
exports.ButtonRadio = ButtonRadio;
exports.ButtonRadioChange = ButtonRadioChange;
exports.ButtonRadioGroup = ButtonRadioGroup;
exports.ButtonRadioModule = ButtonRadioModule;
exports.CalendarDayOverlay = CalendarDayOverlay;
exports.CalendarDayPicker = CalendarDayPicker;
exports.CalendarDayPickerModule = CalendarDayPickerModule;
exports.Card = Card;
exports.CardFooter = CardFooter;
exports.CardHeader = CardHeader;
exports.CardModule = CardModule;
exports.CardSection = CardSection;
exports.Checkbox = Checkbox;
exports.CheckboxModule = CheckboxModule;
exports.CodeSnippet = CodeSnippet;
exports.CodeSnippetModule = CodeSnippetModule;
exports.ColorInput = ColorInput;
exports.ColorPalette = ColorPalette;
exports.ColorPicker = ColorPicker;
exports.ColorPickerModule = ColorPickerModule;
exports.ColorSlider = ColorSlider;
exports.Container = Container;
exports.ContainerModule = ContainerModule;
exports.DatePickerModule = DatePickerModule;
exports.EmptyState = EmptyState;
exports.EmptyStateModule = EmptyStateModule;
exports.FileUploader = FileUploader;
exports.FileUploaderModule = FileUploaderModule;
exports.FormLayout = FormLayout;
exports.FormLayoutModule = FormLayoutModule;
exports.Frame = Frame;
exports.FrameModule = FrameModule;
exports.GridModule = GridModule;
exports.Icon = Icon;
exports.IconModule = IconModule;
exports.InputGroup = InputGroup;
exports.InputGroupItem = InputGroupItem;
exports.InputGroupModule = InputGroupModule;
exports.InputModule = InputModule;
exports.Label = Label;
exports.Layout = Layout;
exports.LayoutModule = LayoutModule;
exports.LayoutSection = LayoutSection;
exports.Link = Link;
exports.LinkModule = LinkModule;
exports.List = List;
exports.ListItemDirective = ListItemDirective;
exports.ListModule = ListModule;
exports.Loading = Loading;
exports.LoadingModule = LoadingModule;
exports.MobileNavigation = MobileNavigation;
exports.ModalContainer = ModalContainer;
exports.ModalDirective = ModalDirective;
exports.ModalModule = ModalModule;
exports.ModalRef = ModalRef;
exports.ModalService = ModalService;
exports.Navigation = Navigation;
exports.NavigationItem = NavigationItem;
exports.NavigationMenu = NavigationMenu;
exports.NavigationModule = NavigationModule;
exports.Number = Number;
exports.NumberModule = NumberModule;
exports.OptGroup = OptGroup;
exports.Option = Option;
exports.Page = Page;
exports.PageEvent = PageEvent;
exports.PageModule = PageModule;
exports.Pagination = Pagination;
exports.PaginationModule = PaginationModule;
exports.Popover = Popover;
exports.PopoverActionItem = PopoverActionItem;
exports.PopoverActionList = PopoverActionList;
exports.PopoverContainer = PopoverContainer;
exports.PopoverModule = PopoverModule;
exports.PopoverSection = PopoverSection;
exports.Progress = Progress;
exports.ProgressModule = ProgressModule;
exports.Radio = Radio;
exports.RadioChange = RadioChange;
exports.RadioGroup = RadioGroup;
exports.RadioModule = RadioModule;
exports.Search = Search;
exports.SearchModule = SearchModule;
exports.Select = Select;
exports.SelectModule = SelectModule;
exports.SheetContainer = SheetContainer;
exports.SheetDirective = SheetDirective;
exports.SheetModule = SheetModule;
exports.SheetRef = SheetRef;
exports.SheetService = SheetService;
exports.SnippetLanguage = SnippetLanguage;
exports.SnippetType = SnippetType;
exports.SpacingModule = SpacingModule;
exports.Stack = Stack;
exports.StackItem = StackItem;
exports.StackModule = StackModule;
exports.SukaCell = SukaCell;
exports.SukaCellDef = SukaCellDef;
exports.SukaColumnDef = SukaColumnDef;
exports.SukaFooterCell = SukaFooterCell;
exports.SukaFooterCellDef = SukaFooterCellDef;
exports.SukaFooterRow = SukaFooterRow;
exports.SukaFooterRowDef = SukaFooterRowDef;
exports.SukaHeaderCell = SukaHeaderCell;
exports.SukaHeaderCellDef = SukaHeaderCellDef;
exports.SukaHeaderRow = SukaHeaderRow;
exports.SukaHeaderRowDef = SukaHeaderRowDef;
exports.SukaRow = SukaRow;
exports.SukaRowDef = SukaRowDef;
exports.SukaTable = SukaTable;
exports.SukaTableDataSource = SukaTableDataSource;
exports.TabItem = TabItem;
exports.TableModule = TableModule;
exports.Tabs = Tabs;
exports.TabsModule = TabsModule;
exports.TextArea = TextArea;
exports.TextInput = TextInput;
exports.ToastContainer = ToastContainer;
exports.ToastModule = ToastModule;
exports.ToastRef = ToastRef;
exports.ToastService = ToastService;
exports.Toggle = Toggle;
exports.ToggleModule = ToggleModule;
exports.Tooltip = Tooltip;
exports.TooltipContainer = TooltipContainer;
exports.TooltipModule = TooltipModule;
exports.Topbar = Topbar;
exports.TopbarGlobal = TopbarGlobal;
exports.TopbarItem = TopbarItem;
exports.TopbarMenu = TopbarMenu;
exports.TopbarModule = TopbarModule;
exports.TopbarNavigation = TopbarNavigation;
exports.ɵa = GridDirective;
exports.ɵb = RowDirective;
exports.ɵba = DatePickerInputModule;
exports.ɵbb = DatePickerInput;
exports.ɵbc = toastAnimations;
exports.ɵbd = TOAST_CONFIG_DATA;
exports.ɵbe = SHEET_CONTENT_DATA;
exports.ɵc = ColumnDirective;
exports.ɵd = MarginDirective;
exports.ɵe = MarginTopDirective;
exports.ɵf = MarginBottomDirective;
exports.ɵg = MarginLeftDirective;
exports.ɵh = MarginRightDirective;
exports.ɵi = MarginHorizontalDirective;
exports.ɵj = MarginVerticalDirective;
exports.ɵk = PaddingDirective;
exports.ɵl = PaddingTopDirective;
exports.ɵm = PaddingBottomDirective;
exports.ɵn = PaddingLeftDirective;
exports.ɵo = PaddingRightDirective;
exports.ɵp = PaddingHorizontalDirective;
exports.ɵq = PaddingVerticalDirective;
exports.ɵr = MODAL_CONTENT_DATA;
exports.ɵs = POPOVER_CONTENT_DATA;
exports.ɵt = PopoverRef;
exports.ɵv = PopoverService;
exports.ɵw = SukaTableSkeleton;
exports.ɵx = PageHeader;
exports.ɵy = File;
exports.ɵz = DatePicker;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=kushki-ng-suka.umd.js.map