@kushki/ng-suka/fesm2015/kushki-ng-suka.js

import { Component, ElementRef, Input, HostBinding, NgModule, Directive, ChangeDetectorRef, Renderer2, ViewContainerRef, ComponentFactoryResolver, ContentChildren, EventEmitter, ChangeDetectionStrategy, Output, ViewChild, TemplateRef, forwardRef, HostListener, ViewEncapsulation, Host, Inject, InjectionToken, Injectable, Injector, Optional, SecurityContext } from '@angular/core';
import { CommonModule, DOCUMENT } from '@angular/common';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { DomSanitizer } from '@angular/platform-browser';
import { Subject, BehaviorSubject, Subscription, merge, of, combineLatest } from 'rxjs';
import { takeWhile, filter, take, map, distinctUntilChanged } from 'rxjs/operators';
import { trigger, transition, style, animate, state } from '@angular/animations';
import { Overlay, OverlayPositionBuilder, OverlayModule, OverlayConfig } from '@angular/cdk/overlay';
import { ComponentPortal, PortalInjector, TemplatePortal } from '@angular/cdk/portal';
import { CdkTable, CDK_TABLE_TEMPLATE, CdkCellDef, CdkHeaderCellDef, CdkFooterCellDef, CdkColumnDef, CdkHeaderCell, CdkFooterCell, CdkCell, CdkHeaderRowDef, CdkFooterRowDef, CdkRowDef, CdkHeaderRow, CDK_ROW_TEMPLATE, CdkFooterRow, CdkRow, DataSource, CdkTableModule } from '@angular/cdk/table';
import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
import { NavigationEnd, Router, ActivatedRoute, RouterModule } from '@angular/router';
import { BreakpointObserver, LayoutModule as LayoutModule$1 } from '@angular/cdk/layout';
import rangePlugin from 'flatpickr/dist/plugins/rangePlugin';
import flatpickr from 'flatpickr';
import { Spanish } from 'flatpickr/dist/l10n/es.js';
import { highlight, languages } from 'prismjs';
import 'prismjs/components/prism-markup-templating.js';
import 'prismjs/components/prism-typescript';
import 'prismjs/components/prism-php';
import 'prismjs/components/prism-ruby';
import 'prismjs/components/prism-json';
import 'prismjs/components/prism-java';
import 'prismjs/components/prism-markdown';
import 'prismjs/components/prism-scss';
import 'prismjs/components/prism-swift';

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class Loading {
    /**
     * @param {?} elementRef
     */
    constructor(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: Component, args: [{
                selector: 'suka-loading',
                template: `
    <div
      [ngClass]="{
        'loading--small': size === 'sm',
        'loading--stop': !isActive && !overlay,
        'loading-overlay--stop': !isActive && overlay
      }"
      class="loading">
      <svg class="loading__svg" viewBox="-75 -75 150 150">
        <title>{{title}}</title>
        <circle class="loading__stroke" cx="0" cy="0" r="37.5" />
      </svg>
    </div>
  `
            }] }
];
/** @nocollapse */
Loading.ctorParameters = () => [
    { type: ElementRef }
];
Loading.propDecorators = {
    title: [{ type: Input }],
    isActive: [{ type: Input }],
    size: [{ type: Input }],
    overlay: [{ type: Input }, { type: HostBinding, args: ['class.loading-overlay',] }]
};
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
 */
class LoadingModule {
}
LoadingModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    Loading
                ],
                exports: [
                    Loading
                ],
                imports: [
                    CommonModule
                ]
            },] }
];

/**
 * @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.
 */
class Button {
    /**
     * @param {?} ref
     * @param {?} el
     * @param {?} renderer
     * @param {?} viewContainerRef
     * @param {?} componentFactoryResolver
     */
    constructor(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;
    }
    /**
     * @return {?}
     */
    get basic() {
        return this.getType('basic');
    }
    /**
     * @return {?}
     */
    get primary() {
        return this.getType('primary');
    }
    /**
     * @return {?}
     */
    get plain() {
        return this.getType('plain');
    }
    /**
     * @return {?}
     */
    get destructive() {
        return this.getType('destructive');
    }
    /**
     * @return {?}
     */
    get outline_white() {
        return this.getType('outline_white');
    }
    /**
     * @return {?}
     */
    get buttonSmall() {
        return this.size === 'sm';
    }
    /**
     * @return {?}
     */
    get buttonLarge() {
        return this.size === 'lg';
    }
    /**
     * @private
     * @param {?} type
     * @return {?}
     */
    getType(type) {
        return this.sukaButton === type;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        if (!this.sukaButton) {
            this.sukaButton = 'basic';
        }
        // Create the spinner
        /** @type {?} */
        const factory = this.componentFactoryResolver.resolveComponentFactory(Loading);
        /** @type {?} */
        const 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 {?}
     */
    ngOnChanges(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 {?}
     */
    ngAfterViewInit() {
        this.ref.detectChanges();
    }
}
Button.decorators = [
    { type: Directive, args: [{
                selector: '[sukaButton]'
            },] }
];
/** @nocollapse */
Button.ctorParameters = () => [
    { type: ChangeDetectorRef },
    { type: ElementRef },
    { type: Renderer2 },
    { type: ViewContainerRef },
    { type: ComponentFactoryResolver }
];
Button.propDecorators = {
    sukaButton: [{ type: Input }],
    size: [{ type: Input }],
    basic: [{ type: HostBinding, args: ['class.btn--basic',] }],
    primary: [{ type: HostBinding, args: ['class.btn--primary',] }],
    plain: [{ type: HostBinding, args: ['class.btn--plain',] }],
    destructive: [{ type: HostBinding, args: ['class.btn--destructive',] }],
    outline_white: [{ type: HostBinding, args: ['class.btn--outline_white',] }],
    skeleton: [{ type: HostBinding, args: ['class.skeleton',] }, { type: Input }],
    outline: [{ type: HostBinding, args: ['class.btn--outline',] }, { type: Input }],
    hover: [{ type: HostBinding, args: ['class.btn--hover',] }, { type: Input }],
    fullWidth: [{ type: HostBinding, args: ['class.btn--full_width',] }, { type: Input }],
    inGroup: [{ type: HostBinding, args: ['class.btn--group_item',] }, { type: Input }],
    loading: [{ type: HostBinding, args: ['class.btn--loading',] }, { type: Input }],
    buttonSmall: [{ type: HostBinding, args: ['class.btn--sm',] }],
    buttonLarge: [{ type: HostBinding, args: ['class.btn--lg',] }]
};
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
 */
class ButtonGroup {
    constructor() {
        this.baseClass = true;
    }
    /**
     * @return {?}
     */
    ngAfterContentInit() {
        this.buttons.toArray().forEach((/**
         * @param {?} button
         * @return {?}
         */
        (button) => {
            button.inGroup = true;
        }));
    }
}
ButtonGroup.decorators = [
    { type: Component, args: [{
                selector: 'suka-button-group',
                template: `<div class="btn-group__wrapper"><ng-content></ng-content></div>`
            }] }
];
ButtonGroup.propDecorators = {
    baseClass: [{ type: HostBinding, args: ['class.btn-group',] }],
    segmented: [{ type: HostBinding, args: ['class.btn-group--segmented',] }, { type: Input }],
    buttons: [{ type: ContentChildren, args: [Button,] }]
};
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
 */
class ButtonModule {
}
ButtonModule.decorators = [
    { type: NgModule, args: [{
                declarations: [Button, ButtonGroup],
                exports: [Button, ButtonGroup],
                imports: [CommonModule, LoadingModule],
                entryComponents: [Loading],
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/** @enum {number} */
const 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.
 */
class CheckboxChange {
}
if (false) {
    /** @type {?} */
    CheckboxChange.prototype.source;
    /** @type {?} */
    CheckboxChange.prototype.checked;
}
// tslint:disable-next-line: component-class-suffix
class Checkbox {
    /**
     * Creates an instance of `Checkbox`.
     * @param {?} changeDetectorRef
     */
    constructor(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 EventEmitter();
        /**
         * Emits event notifying other classes when a change in state occurs specifically
         * on an indeterminate checkbox.
         */
        this.indeterminateChange = new 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 {?}
         */
        () => { });
        /**
         * Method set in `registerOnChange` to propagate changes back to the form.
         */
        this.propagateChange = (/**
         * @param {?} _
         * @return {?}
         */
        (_) => { });
        Checkbox.checkboxCount++;
    }
    /**
     * Reflects whether the checkbox state is indeterminate.
     * @return {?}
     */
    get indeterminate() {
        return this._indeterminate;
    }
    /**
     * Set the checkbox's indeterminate state to match the parameter and transition the view to reflect the change.
     * @param {?} indeterminate
     * @return {?}
     */
    set indeterminate(indeterminate) {
        /** @type {?} */
        const 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);
    }
    /**
     * Returns value `true` if state is selected for the checkbox.
     * @return {?}
     */
    get checked() {
        return this._checked;
    }
    /**
     * Updating the state of a checkbox to match the state of the parameter passed in.
     * @param {?} checked
     * @return {?}
     */
    set checked(checked) {
        if (checked !== this.checked) {
            if (this._indeterminate) {
                Promise.resolve().then((/**
                 * @return {?}
                 */
                () => {
                    this._indeterminate = false;
                    this.indeterminateChange.emit(this._indeterminate);
                }));
            }
            this._checked = checked;
            this.changeDetectorRef.markForCheck();
        }
    }
    /**
     * @return {?}
     */
    get checkboxWrapperClass() {
        return !this.inline;
    }
    /**
     * @return {?}
     */
    get formItemClass() {
        return !this.inline;
    }
    /**
     * Toggle the selected state of the checkbox.
     * @return {?}
     */
    toggle() {
        this.checked = !this.checked;
    }
    // this is the initial value set to the component
    /**
     * @param {?} value
     * @return {?}
     */
    writeValue(value) {
        this.checked = !!value;
    }
    /**
     * Sets a method in order to propagate changes back to the form.
     * @param {?} fn
     * @return {?}
     */
    registerOnChange(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.
     * @return {?}
     */
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    /**
     * Executes on the event of a change within `Checkbox` to block propagation.
     * @param {?} event
     * @return {?}
     */
    onChange(event) {
        event.stopPropagation();
    }
    /**
     * Handles click events on the `Checkbox` and emits changes to other classes.
     * @param {?} event
     * @return {?}
     */
    onClick(event) {
        if (!this.disabled) {
            this.toggle();
            this.transitionCheckboxState(this._checked ? CheckboxState.Checked : CheckboxState.Unchecked);
            this.emitChangeEvent();
        }
    }
    /**
     * Handles changes between checkbox states.
     * @param {?} newState
     * @return {?}
     */
    transitionCheckboxState(newState) {
        /** @type {?} */
        const 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.
     * @return {?}
     */
    emitChangeEvent() {
        /** @type {?} */
        const 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.
     * @return {?}
     */
    ngAfterViewInit() {
        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: Component, args: [{
                selector: 'suka-checkbox',
                template: `
    <input
      #inputCheckbox
      class="checkbox"
      type="checkbox"
      [id]="id"
      [value]="value"
      [name]="name"
      [required]="required"
      [checked]="checked"
      [disabled]="disabled"
      [indeterminate]="indeterminate"
      [attr.aria-label]="ariaLabel"
      [attr.aria-labelledby]="ariaLabelledby"
      [attr.aria-checked]="(indeterminate ? 'mixed' : checked)"
      (change)="onChange($event)"
      (click)="onClick($event)">
    <label
      [for]="id"
      class="checkbox-label"
      [ngClass]="{
        'skeleton' : skeleton
      }">
      <span [ngClass]="{'visually-hidden' : hideLabel}">
        <ng-content></ng-content>
      </span>
    </label>
  `,
                providers: [
                    {
                        provide: NG_VALUE_ACCESSOR,
                        useExisting: Checkbox,
                        multi: true
                    }
                ],
                changeDetection: ChangeDetectionStrategy.OnPush
            }] }
];
/** @nocollapse */
Checkbox.ctorParameters = () => [
    { type: ChangeDetectorRef }
];
Checkbox.propDecorators = {
    size: [{ type: Input }],
    nested: [{ type: Input }],
    inline: [{ type: Input }],
    disabled: [{ type: Input }],
    skeleton: [{ type: Input }],
    hideLabel: [{ type: Input }],
    name: [{ type: Input }],
    id: [{ type: Input }],
    required: [{ type: Input }],
    value: [{ type: Input }],
    ariaLabel: [{ type: Input, args: ['aria-label',] }],
    ariaLabelledby: [{ type: Input, args: ['aria-labelledby',] }],
    indeterminate: [{ type: Input }],
    checked: [{ type: Input }],
    checkboxWrapperClass: [{ type: HostBinding, args: ['class.checkbox-wrapper',] }],
    formItemClass: [{ type: HostBinding, args: ['class.form-item',] }],
    change: [{ type: Output }],
    indeterminateChange: [{ type: Output }],
    inputCheckbox: [{ type: ViewChild, args: ['inputCheckbox', { static: true },] }]
};
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
 */
class CheckboxModule {
}
CheckboxModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    Checkbox
                ],
                exports: [
                    Checkbox
                ],
                imports: [
                    CommonModule,
                    FormsModule
                ]
            },] }
];

/**
 * @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 {?} */
const iconDefs = [
    {
        name: 'activity',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>activity</title>
    <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>
    </svg>
    `
    },
    {
        name: 'airplay',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>airplay</title>
    <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>
    </svg>
    `
    },
    {
        name: 'alert-circle',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>alert-circle</title>
    <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>
    </svg>
    `
    },
    {
        name: 'alert-octagon',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>alert-octagon</title>
    <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>
    </svg>
    `
    },
    {
        name: 'alert-triangle',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>alert-triangle</title>
    <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>
    </svg>
    `
    },
    {
        name: 'align-center',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>align-center</title>
    <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>
    </svg>
    `
    },
    {
        name: 'align-justify',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>align-justify</title>
    <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>
    </svg>
    `
    },
    {
        name: 'align-left',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>align-left</title>
    <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>
    </svg>
    `
    },
    {
        name: 'align-right',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>align-right</title>
    <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>
    </svg>
    `
    },
    {
        name: 'anchor',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>anchor</title>
    <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>
    </svg>
    `
    },
    {
        name: 'aperture',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>aperture</title>
    <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>
    </svg>
    `
    },
    {
        name: 'archive',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>archive</title>
    <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>
    </svg>
    `
    },
    {
        name: 'arrow-down-circle',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>arrow-down-circle</title>
    <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>
    </svg>
    `
    },
    {
        name: 'arrow-down-left',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>arrow-down-left</title>
    <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>
    </svg>
    `
    },
    {
        name: 'arrow-down-right',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>arrow-down-right</title>
    <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>
    </svg>
    `
    },
    {
        name: 'arrow-down',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>arrow-down</title>
    <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>
    </svg>
    `
    },
    {
        name: 'arrow-left-circle',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>arrow-left-circle</title>
    <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>
    </svg>
    `
    },
    {
        name: 'arrow-left',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>arrow-left</title>
    <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>
    </svg>
    `
    },
    {
        name: 'arrow-right-circle',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>arrow-right-circle</title>
    <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>
    </svg>
    `
    },
    {
        name: 'arrow-right',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>arrow-right</title>
    <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>
    </svg>
    `
    },
    {
        name: 'arrow-up-circle',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>arrow-up-circle</title>
    <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>
    </svg>
    `
    },
    {
        name: 'arrow-up-left',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>arrow-up-left</title>
    <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>
    </svg>
    `
    },
    {
        name: 'arrow-up-right',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>arrow-up-right</title>
    <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>
    </svg>
    `
    },
    {
        name: 'arrow-up',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>arrow-up</title>
    <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>
    </svg>
    `
    },
    {
        name: 'at-sign',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>at-sign</title>
    <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>
    </svg>
    `
    },
    {
        name: 'award',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>award</title>
    <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>
    </svg>
    `
    },
    {
        name: 'bar-chart-2',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>bar-chart-2</title>
    <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>
    </svg>
    `
    },
    {
        name: 'bar-chart',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>bar-chart</title>
    <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>
    </svg>
    `
    },
    {
        name: 'battery-charging',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>battery-charging</title>
    <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>
    </svg>
    `
    },
    {
        name: 'battery',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>battery</title>
    <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>
    </svg>
    `
    },
    {
        name: 'bell-off',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>bell-off</title>
    <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>
    </svg>
    `
    },
    {
        name: 'bell',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>bell</title>
    <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>
    </svg>
    `
    },
    {
        name: 'bluetooth',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>bluetooth</title>
    <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>
    </svg>
    `
    },
    {
        name: 'bold',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>bold</title>
    <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>
    </svg>
    `
    },
    {
        name: 'book-open',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>book-open</title>
    <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>
    </svg>
    `
    },
    {
        name: 'book',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>book</title>
    <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>
    </svg>
    `
    },
    {
        name: 'bookmark',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>bookmark</title>
    <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>
    </svg>
    `
    },
    {
        name: 'box',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>box</title>
    <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>
    </svg>
    `
    },
    {
        name: 'briefcase',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>briefcase</title>
    <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>
    </svg>
    `
    },
    {
        name: 'calendar',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>calendar</title>
    <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>
    </svg>
    `
    },
    {
        name: 'camera-off',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>camera-off</title>
    <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>
    </svg>
    `
    },
    {
        name: 'camera',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>camera</title>
    <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>
    </svg>
    `
    },
    {
        name: 'cast',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>cast</title>
    <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>
    </svg>
    `
    },
    {
        name: 'check-circle',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>check-circle</title>
    <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>
    </svg>
    `
    },
    {
        name: 'check-square',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>check-square</title>
    <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>
    </svg>
    `
    },
    {
        name: 'check',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>check</title>
    <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>
    </svg>
    `
    },
    {
        name: 'chevron-down',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>chevron-down</title>
    <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>
    </svg>
    `
    },
    {
        name: 'chevron-left',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>chevron-left</title>
    <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>
    </svg>
    `
    },
    {
        name: 'chevron-right',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>chevron-right</title>
    <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>
    </svg>
    `
    },
    {
        name: 'chevron-up',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>chevron-up</title>
    <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>
    </svg>
    `
    },
    {
        name: 'chevrons-down',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>chevrons-down</title>
    <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>
    </svg>
    `
    },
    {
        name: 'chevrons-left',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>chevrons-left</title>
    <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>
    </svg>
    `
    },
    {
        name: 'chevrons-right',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>chevrons-right</title>
    <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>
    </svg>
    `
    },
    {
        name: 'chevrons-up',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>chevrons-up</title>
    <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>
    </svg>
    `
    },
    {
        name: 'chrome',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>chrome</title>
    <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>
    </svg>
    `
    },
    {
        name: 'circle',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>circle</title>
    <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>
    </svg>
    `
    },
    {
        name: 'clipboard',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>clipboard</title>
    <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>
    </svg>
    `
    },
    {
        name: 'clock',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>clock</title>
    <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>
    </svg>
    `
    },
    {
        name: 'cloud-drizzle',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>cloud-drizzle</title>
    <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>
    </svg>
    `
    },
    {
        name: 'cloud-lightning',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>cloud-lightning</title>
    <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>
    </svg>
    `
    },
    {
        name: 'cloud-off',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>cloud-off</title>
    <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>
    </svg>
    `
    },
    {
        name: 'cloud-rain',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>cloud-rain</title>
    <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>
    </svg>
    `
    },
    {
        name: 'cloud-snow',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>cloud-snow</title>
    <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>
    </svg>
    `
    },
    {
        name: 'cloud',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>cloud</title>
    <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>
    </svg>
    `
    },
    {
        name: 'code',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>code</title>
    <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>
    </svg>
    `
    },
    {
        name: 'codepen',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>codepen</title>
    <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>
    </svg>
    `
    },
    {
        name: 'codesandbox',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>codesandbox</title>
    <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>
    </svg>
    `
    },
    {
        name: 'coffee',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>coffee</title>
    <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>
    </svg>
    `
    },
    {
        name: 'columns',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>columns</title>
    <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>
    </svg>
    `
    },
    {
        name: 'command',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>command</title>
    <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>
    </svg>
    `
    },
    {
        name: 'compass',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>compass</title>
    <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>
    </svg>
    `
    },
    {
        name: 'copy',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>copy</title>
    <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>
    </svg>
    `
    },
    {
        name: 'corner-down-left',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>corner-down-left</title>
    <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>
    </svg>
    `
    },
    {
        name: 'corner-down-right',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>corner-down-right</title>
    <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>
    </svg>
    `
    },
    {
        name: 'corner-left-down',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>corner-left-down</title>
    <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>
    </svg>
    `
    },
    {
        name: 'corner-left-up',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>corner-left-up</title>
    <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>
    </svg>
    `
    },
    {
        name: 'corner-right-down',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>corner-right-down</title>
    <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>
    </svg>
    `
    },
    {
        name: 'corner-right-up',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>corner-right-up</title>
    <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>
    </svg>
    `
    },
    {
        name: 'corner-up-left',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>corner-up-left</title>
    <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>
    </svg>
    `
    },
    {
        name: 'corner-up-right',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>corner-up-right</title>
    <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>
    </svg>
    `
    },
    {
        name: 'cpu',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>cpu</title>
    <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>
    </svg>
    `
    },
    {
        name: 'credit-card',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>credit-card</title>
    <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>
    </svg>
    `
    },
    {
        name: 'crop',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>crop</title>
    <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>
    </svg>
    `
    },
    {
        name: 'crosshair',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>crosshair</title>
    <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>
    </svg>
    `
    },
    {
        name: 'database',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>database</title>
    <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>
    </svg>
    `
    },
    {
        name: 'delete',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>delete</title>
    <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>
    </svg>
    `
    },
    {
        name: 'disc',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>disc</title>
    <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>
    </svg>
    `
    },
    {
        name: 'dollar-sign',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>dollar-sign</title>
    <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>
    </svg>
    `
    },
    {
        name: 'download-cloud',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>download-cloud</title>
    <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>
    </svg>
    `
    },
    {
        name: 'download',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>download</title>
    <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>
    </svg>
    `
    },
    {
        name: 'droplet',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>droplet</title>
    <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>
    </svg>
    `
    },
    {
        name: 'edit-2',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>edit-2</title>
    <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>
    </svg>
    `
    },
    {
        name: 'edit-3',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>edit-3</title>
    <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>
    </svg>
    `
    },
    {
        name: 'edit',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>edit</title>
    <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>
    </svg>
    `
    },
    {
        name: 'external-link',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>external-link</title>
    <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>
    </svg>
    `
    },
    {
        name: 'eye-off',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>eye-off</title>
    <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>
    </svg>
    `
    },
    {
        name: 'eye',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>eye</title>
    <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>
    </svg>
    `
    },
    {
        name: 'facebook',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>facebook</title>
    <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>
    </svg>
    `
    },
    {
        name: 'fast-forward',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>fast-forward</title>
    <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>
    </svg>
    `
    },
    {
        name: 'feather',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>feather</title>
    <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>
    </svg>
    `
    },
    {
        name: 'figma',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>figma</title>
    <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>
    </svg>
    `
    },
    {
        name: 'file-minus',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>file-minus</title>
    <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>
    </svg>
    `
    },
    {
        name: 'file-plus',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>file-plus</title>
    <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>
    </svg>
    `
    },
    {
        name: 'file-text',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>file-text</title>
    <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>
    </svg>
    `
    },
    {
        name: 'file',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>file</title>
    <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>
    </svg>
    `
    },
    {
        name: 'film',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>film</title>
    <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>
    </svg>
    `
    },
    {
        name: 'filter',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>filter</title>
    <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>
    </svg>
    `
    },
    {
        name: 'flag',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>flag</title>
    <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>
    </svg>
    `
    },
    {
        name: 'folder-minus',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>folder-minus</title>
    <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>
    </svg>
    `
    },
    {
        name: 'folder-plus',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>folder-plus</title>
    <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>
    </svg>
    `
    },
    {
        name: 'folder',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>folder</title>
    <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>
    </svg>
    `
    },
    {
        name: 'framer',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>framer</title>
    <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>
    </svg>
    `
    },
    {
        name: 'frown',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>frown</title>
    <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>
    </svg>
    `
    },
    {
        name: 'gift',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>gift</title>
    <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>
    </svg>
    `
    },
    {
        name: 'git-branch',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>git-branch</title>
    <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>
    </svg>
    `
    },
    {
        name: 'git-commit',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>git-commit</title>
    <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>
    </svg>
    `
    },
    {
        name: 'git-merge',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>git-merge</title>
    <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>
    </svg>
    `
    },
    {
        name: 'git-pull-request',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>git-pull-request</title>
    <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>
    </svg>
    `
    },
    {
        name: 'github',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>github</title>
    <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>
    </svg>
    `
    },
    {
        name: 'gitlab',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>gitlab</title>
    <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>
    </svg>
    `
    },
    {
        name: 'globe',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>globe</title>
    <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>
    </svg>
    `
    },
    {
        name: 'grid',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>grid</title>
    <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>
    </svg>
    `
    },
    {
        name: 'hard-drive',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>hard-drive</title>
    <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>
    </svg>
    `
    },
    {
        name: 'hash',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>hash</title>
    <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>
    </svg>
    `
    },
    {
        name: 'headphones',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>headphones</title>
    <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>
    </svg>
    `
    },
    {
        name: 'heart',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>heart</title>
    <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>
    </svg>
    `
    },
    {
        name: 'help-circle',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>help-circle</title>
    <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>
    </svg>
    `
    },
    {
        name: 'hexagon',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>hexagon</title>
    <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>
    </svg>
    `
    },
    {
        name: 'home',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>home</title>
    <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>
    </svg>
    `
    },
    {
        name: 'image',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>image</title>
    <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>
    </svg>
    `
    },
    {
        name: 'inbox',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>inbox</title>
    <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>
    </svg>
    `
    },
    {
        name: 'info',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>info</title>
    <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>
    </svg>
    `
    },
    {
        name: 'instagram',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>instagram</title>
    <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>
    </svg>
    `
    },
    {
        name: 'italic',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>italic</title>
    <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>
    </svg>
    `
    },
    {
        name: 'key',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>key</title>
    <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>
    </svg>
    `
    },
    {
        name: 'layers',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>layers</title>
    <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>
    </svg>
    `
    },
    {
        name: 'layout',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>layout</title>
    <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>
    </svg>
    `
    },
    {
        name: 'life-buoy',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>life-buoy</title>
    <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>
    </svg>
    `
    },
    {
        name: 'link-2',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>link-2</title>
    <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>
    </svg>
    `
    },
    {
        name: 'link',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>link</title>
    <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>
    </svg>
    `
    },
    {
        name: 'linkedin',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>linkedin</title>
    <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>
    </svg>
    `
    },
    {
        name: 'list',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>list</title>
    <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>
    </svg>
    `
    },
    {
        name: 'loader',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>loader</title>
    <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>
    </svg>
    `
    },
    {
        name: 'lock',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>lock</title>
    <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>
    </svg>
    `
    },
    {
        name: 'log-in',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>log-in</title>
    <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>
    </svg>
    `
    },
    {
        name: 'log-out',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>log-out</title>
    <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>
    </svg>
    `
    },
    {
        name: 'mail',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>mail</title>
    <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>
    </svg>
    `
    },
    {
        name: 'map-pin',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>map-pin</title>
    <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>
    </svg>
    `
    },
    {
        name: 'map',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>map</title>
    <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>
    </svg>
    `
    },
    {
        name: 'maximize-2',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>maximize-2</title>
    <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>
    </svg>
    `
    },
    {
        name: 'maximize',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>maximize</title>
    <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>
    </svg>
    `
    },
    {
        name: 'meh',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>meh</title>
    <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>
    </svg>
    `
    },
    {
        name: 'menu',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>menu</title>
    <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>
    </svg>
    `
    },
    {
        name: 'message-circle',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>message-circle</title>
    <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>
    </svg>
    `
    },
    {
        name: 'message-square',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>message-square</title>
    <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>
    </svg>
    `
    },
    {
        name: 'mic-off',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>mic-off</title>
    <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>
    </svg>
    `
    },
    {
        name: 'mic',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>mic</title>
    <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>
    </svg>
    `
    },
    {
        name: 'minimize-2',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>minimize-2</title>
    <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>
    </svg>
    `
    },
    {
        name: 'minimize',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>minimize</title>
    <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>
    </svg>
    `
    },
    {
        name: 'minus-circle',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>minus-circle</title>
    <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>
    </svg>
    `
    },
    {
        name: 'minus-square',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>minus-square</title>
    <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>
    </svg>
    `
    },
    {
        name: 'minus',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>minus</title>
    <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>
    </svg>
    `
    },
    {
        name: 'monitor',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>monitor</title>
    <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>
    </svg>
    `
    },
    {
        name: 'moon',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>moon</title>
    <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>
    </svg>
    `
    },
    {
        name: 'more-horizontal',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>more-horizontal</title>
    <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>
    </svg>
    `
    },
    {
        name: 'more-vertical',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>more-vertical</title>
    <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>
    </svg>
    `
    },
    {
        name: 'mouse-pointer',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>mouse-pointer</title>
    <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>
    </svg>
    `
    },
    {
        name: 'move',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>move</title>
    <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>
    </svg>
    `
    },
    {
        name: 'music',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>music</title>
    <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>
    </svg>
    `
    },
    {
        name: 'navigation-2',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>navigation-2</title>
    <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>
    </svg>
    `
    },
    {
        name: 'navigation',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>navigation</title>
    <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>
    </svg>
    `
    },
    {
        name: 'octagon',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>octagon</title>
    <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>
    </svg>
    `
    },
    {
        name: 'package',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>package</title>
    <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>
    </svg>
    `
    },
    {
        name: 'paperclip',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>paperclip</title>
    <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>
    </svg>
    `
    },
    {
        name: 'pause-circle',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>pause-circle</title>
    <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>
    </svg>
    `
    },
    {
        name: 'pause',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>pause</title>
    <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>
    </svg>
    `
    },
    {
        name: 'pen-tool',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>pen-tool</title>
    <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>
    </svg>
    `
    },
    {
        name: 'percent',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>percent</title>
    <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>
    </svg>
    `
    },
    {
        name: 'phone-call',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>phone-call</title>
    <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>
    </svg>
    `
    },
    {
        name: 'phone-forwarded',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>phone-forwarded</title>
    <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>
    </svg>
    `
    },
    {
        name: 'phone-incoming',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>phone-incoming</title>
    <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>
    </svg>
    `
    },
    {
        name: 'phone-missed',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>phone-missed</title>
    <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>
    </svg>
    `
    },
    {
        name: 'phone-off',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>phone-off</title>
    <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>
    </svg>
    `
    },
    {
        name: 'phone-outgoing',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>phone-outgoing</title>
    <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>
    </svg>
    `
    },
    {
        name: 'phone',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>phone</title>
    <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>
    </svg>
    `
    },
    {
        name: 'pie-chart',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>pie-chart</title>
    <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>
    </svg>
    `
    },
    {
        name: 'play-circle',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>play-circle</title>
    <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>
    </svg>
    `
    },
    {
        name: 'play',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>play</title>
    <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>
    </svg>
    `
    },
    {
        name: 'plus-circle',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>plus-circle</title>
    <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>
    </svg>
    `
    },
    {
        name: 'plus-square',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>plus-square</title>
    <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>
    </svg>
    `
    },
    {
        name: 'plus',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>plus</title>
    <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>
    </svg>
    `
    },
    {
        name: 'pocket',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>pocket</title>
    <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>
    </svg>
    `
    },
    {
        name: 'power',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>power</title>
    <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>
    </svg>
    `
    },
    {
        name: 'printer',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>printer</title>
    <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>
    </svg>
    `
    },
    {
        name: 'radio',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>radio</title>
    <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>
    </svg>
    `
    },
    {
        name: 'refresh-ccw',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>refresh-ccw</title>
    <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>
    </svg>
    `
    },
    {
        name: 'refresh-cw',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>refresh-cw</title>
    <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>
    </svg>
    `
    },
    {
        name: 'repeat',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>repeat</title>
    <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>
    </svg>
    `
    },
    {
        name: 'rewind',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>rewind</title>
    <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>
    </svg>
    `
    },
    {
        name: 'rotate-ccw',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>rotate-ccw</title>
    <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>
    </svg>
    `
    },
    {
        name: 'rotate-cw',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>rotate-cw</title>
    <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>
    </svg>
    `
    },
    {
        name: 'rss',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>rss</title>
    <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>
    </svg>
    `
    },
    {
        name: 'save',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>save</title>
    <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>
    </svg>
    `
    },
    {
        name: 'scissors',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>scissors</title>
    <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>
    </svg>
    `
    },
    {
        name: 'search',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>search</title>
    <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>
    </svg>
    `
    },
    {
        name: 'send',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>send</title>
    <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>
    </svg>
    `
    },
    {
        name: 'server',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>server</title>
    <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>
    </svg>
    `
    },
    {
        name: 'settings',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>settings</title>
    <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>
    </svg>
    `
    },
    {
        name: 'share-2',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>share-2</title>
    <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>
    </svg>
    `
    },
    {
        name: 'share',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>share</title>
    <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>
    </svg>
    `
    },
    {
        name: 'shield-off',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>shield-off</title>
    <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>
    </svg>
    `
    },
    {
        name: 'shield',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>shield</title>
    <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>
    </svg>
    `
    },
    {
        name: 'shopping-bag',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>shopping-bag</title>
    <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>
    </svg>
    `
    },
    {
        name: 'shopping-cart',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>shopping-cart</title>
    <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>
    </svg>
    `
    },
    {
        name: 'shuffle',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>shuffle</title>
    <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>
    </svg>
    `
    },
    {
        name: 'sidebar',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>sidebar</title>
    <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>
    </svg>
    `
    },
    {
        name: 'skip-back',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>skip-back</title>
    <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>
    </svg>
    `
    },
    {
        name: 'skip-forward',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>skip-forward</title>
    <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>
    </svg>
    `
    },
    {
        name: 'slack',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>slack</title>
    <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>
    </svg>
    `
    },
    {
        name: 'slash',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>slash</title>
    <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>
    </svg>
    `
    },
    {
        name: 'sliders',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>sliders</title>
    <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>
    </svg>
    `
    },
    {
        name: 'smartphone',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>smartphone</title>
    <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>
    </svg>
    `
    },
    {
        name: 'smile',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>smile</title>
    <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>
    </svg>
    `
    },
    {
        name: 'speaker',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>speaker</title>
    <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>
    </svg>
    `
    },
    {
        name: 'square',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>square</title>
    <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>
    </svg>
    `
    },
    {
        name: 'star',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>star</title>
    <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>
    </svg>
    `
    },
    {
        name: 'stop-circle',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>stop-circle</title>
    <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>
    </svg>
    `
    },
    {
        name: 'sun',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>sun</title>
    <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>
    </svg>
    `
    },
    {
        name: 'sunrise',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>sunrise</title>
    <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>
    </svg>
    `
    },
    {
        name: 'sunset',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>sunset</title>
    <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>
    </svg>
    `
    },
    {
        name: 'tablet',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>tablet</title>
    <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>
    </svg>
    `
    },
    {
        name: 'tag',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>tag</title>
    <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>
    </svg>
    `
    },
    {
        name: 'target',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>target</title>
    <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>
    </svg>
    `
    },
    {
        name: 'terminal',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>terminal</title>
    <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>
    </svg>
    `
    },
    {
        name: 'thermometer',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>thermometer</title>
    <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>
    </svg>
    `
    },
    {
        name: 'thumbs-down',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>thumbs-down</title>
    <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>
    </svg>
    `
    },
    {
        name: 'thumbs-up',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>thumbs-up</title>
    <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>
    </svg>
    `
    },
    {
        name: 'toggle-left',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>toggle-left</title>
    <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>
    </svg>
    `
    },
    {
        name: 'toggle-right',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>toggle-right</title>
    <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>
    </svg>
    `
    },
    {
        name: 'trash-2',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>trash-2</title>
    <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>
    </svg>
    `
    },
    {
        name: 'trash',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>trash</title>
    <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>
    </svg>
    `
    },
    {
        name: 'trello',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>trello</title>
    <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>
    </svg>
    `
    },
    {
        name: 'trending-down',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>trending-down</title>
    <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>
    </svg>
    `
    },
    {
        name: 'trending-up',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>trending-up</title>
    <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>
    </svg>
    `
    },
    {
        name: 'triangle',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>triangle</title>
    <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>
    </svg>
    `
    },
    {
        name: 'truck',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>truck</title>
    <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>
    </svg>
    `
    },
    {
        name: 'tv',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>tv</title>
    <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>
    </svg>
    `
    },
    {
        name: 'twitter',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>twitter</title>
    <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>
    </svg>
    `
    },
    {
        name: 'type',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>type</title>
    <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>
    </svg>
    `
    },
    {
        name: 'umbrella',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>umbrella</title>
    <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>
    </svg>
    `
    },
    {
        name: 'underline',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>underline</title>
    <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>
    </svg>
    `
    },
    {
        name: 'unlock',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>unlock</title>
    <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>
    </svg>
    `
    },
    {
        name: 'upload-cloud',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>upload-cloud</title>
    <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>
    </svg>
    `
    },
    {
        name: 'upload',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>upload</title>
    <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>
    </svg>
    `
    },
    {
        name: 'user-check',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>user-check</title>
    <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>
    </svg>
    `
    },
    {
        name: 'user-minus',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>user-minus</title>
    <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>
    </svg>
    `
    },
    {
        name: 'user-plus',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>user-plus</title>
    <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>
    </svg>
    `
    },
    {
        name: 'user-x',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>user-x</title>
    <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>
    </svg>
    `
    },
    {
        name: 'user',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>user</title>
    <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>
    </svg>
    `
    },
    {
        name: 'users',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>users</title>
    <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>
    </svg>
    `
    },
    {
        name: 'video-off',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>video-off</title>
    <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>
    </svg>
    `
    },
    {
        name: 'video',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>video</title>
    <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>
    </svg>
    `
    },
    {
        name: 'voicemail',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>voicemail</title>
    <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>
    </svg>
    `
    },
    {
        name: 'volume-1',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>volume-1</title>
    <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>
    </svg>
    `
    },
    {
        name: 'volume-2',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>volume-2</title>
    <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>
    </svg>
    `
    },
    {
        name: 'volume-x',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>volume-x</title>
    <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>
    </svg>
    `
    },
    {
        name: 'volume',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>volume</title>
    <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>
    </svg>
    `
    },
    {
        name: 'watch',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>watch</title>
    <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>
    </svg>
    `
    },
    {
        name: 'wifi-off',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>wifi-off</title>
    <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>
    </svg>
    `
    },
    {
        name: 'wifi',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>wifi</title>
    <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>
    </svg>
    `
    },
    {
        name: 'wind',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>wind</title>
    <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>
    </svg>
    `
    },
    {
        name: 'x-circle',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>x-circle</title>
    <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>
    </svg>
    `
    },
    {
        name: 'x-octagon',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>x-octagon</title>
    <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>
    </svg>
    `
    },
    {
        name: 'x-square',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>x-square</title>
    <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>
    </svg>
    `
    },
    {
        name: 'x',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>x</title>
    <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>
    </svg>
    `
    },
    {
        name: 'youtube',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>youtube</title>
    <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>
    </svg>
    `
    },
    {
        name: 'zap-off',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>zap-off</title>
    <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>
    </svg>
    `
    },
    {
        name: 'zap',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>zap</title>
    <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>
    </svg>
    `
    },
    {
        name: 'zoom-in',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>zoom-in</title>
    <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>
    </svg>
    `
    },
    {
        name: 'zoom-out',
        template: `
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <title>zoom-out</title>
    <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>
    </svg>
    `
    }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class Icon {
    /**
     * @param {?} sanitizer
     */
    constructor(sanitizer) {
        this.sanitizer = sanitizer;
        this.baseClass = true;
    }
    /**
     * Sets the icon.
     * @param {?} value
     * @return {?}
     */
    set icon(value) {
        this._icon = value;
        this.getIconDef();
    }
    /**
     * @return {?}
     */
    get icon() {
        return this._icon;
    }
    /**
     * @private
     * @return {?}
     */
    getIconDef() {
        /** @type {?} */
        const iconDefinition = iconDefs.filter((/**
         * @param {?} iconDef
         * @return {?}
         */
        iconDef => 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: Component, args: [{
                selector: 'suka-icon',
                template: `
    <span [innerHTML]="content"></span>
  `
            }] }
];
/** @nocollapse */
Icon.ctorParameters = () => [
    { type: DomSanitizer }
];
Icon.propDecorators = {
    baseClass: [{ type: HostBinding, args: ['class.suka-icon',] }],
    accessibilityLabel: [{ type: HostBinding, args: ['attr.aria-label',] }, { type: Input }],
    icon: [{ type: Input }]
};
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
 */
class IconModule {
}
IconModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    Icon,
                ],
                exports: [
                    Icon,
                ],
                imports: [
                    CommonModule,
                ]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class Select {
    constructor() {
        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 EventEmitter();
        /**
         * placeholder declarations. Replaced by the functions provided to `registerOnChange` and `registerOnTouched`
         */
        this.onChangeHandler = (/**
         * @param {?} _
         * @return {?}
         */
        (_) => { });
        this.onTouchedHandler = (/**
         * @return {?}
         */
        () => { });
    }
    /**
     * @return {?}
     */
    get value() {
        // return this._value;
        return this.select.nativeElement.value || this._value;
    }
    /**
     * @param {?} v
     * @return {?}
     */
    set value(v) {
        this._value = v;
        this.select.nativeElement.value = v;
    }
    /**
     * Receives a value from the model.
     * @param {?} obj
     * @return {?}
     */
    writeValue(obj) {
        this.value = obj;
    }
    /**
     * Registers a listener that notifies the model when the control updates
     * @param {?} fn
     * @return {?}
     */
    registerOnChange(fn) {
        this.onChangeHandler = fn;
    }
    /**
     * Registers a listener that notifies the model when the control is blurred
     * @param {?} fn
     * @return {?}
     */
    registerOnTouched(fn) {
        this.onTouchedHandler = fn;
    }
    /**
     * Sets the disabled state through the model
     * @param {?} isDisabled
     * @return {?}
     */
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
    }
    /**
     * Handles the change event from the `select`.
     * Sends events to the change handler and emits a `selected` event.
     * @param {?} event
     * @return {?}
     */
    onChange(event) {
        this.onChangeHandler(event.target.value);
        this.valueChange.emit(event.target.value);
    }
    /**
     * Listens for the host blurring, and notifies the model
     * @param {?} target
     * @return {?}
     */
    onBlur(target) {
        this.onTouchedHandler();
    }
    /**
     * @param {?} value
     * @return {?}
     */
    isTemplate(value) {
        return value instanceof TemplateRef;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        // 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: Component, args: [{
                selector: 'suka-select',
                template: `
    <div class="form-item">
      <div
        [ngClass]="{
          'select--inline': display === 'inline',
          'skeleton': skeleton
        }"
        class="select"
      >
        <label *ngIf="skeleton && label" [for]="id" class="label skeleton"></label>
        <label *ngIf="!skeleton && label" [for]="id" class="label">
          <ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
          <ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
        </label>
        <div *ngIf="helperText" class="form__helper-text">
          <ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
          <ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
        </div>
        <div class="select-input__wrapper" [attr.data-invalid]="(invalid ? true : null)" [attr.data-valid]="(valid ? true : null)">
          <select
            #selectInput
            [attr.id]="id"
            [disabled]="disabled"
            (change)="onChange($event)"
            [value]="value"
            (blur)="onBlur($event)"
            class="select-input">
            <ng-content></ng-content>
          </select>
          <suka-icon *ngIf="invalid" icon="alert-circle" class="select__invalid-icon"></suka-icon>
          <suka-icon *ngIf="valid" icon="check" class="select__valid-icon"></suka-icon>
          <suka-icon *ngIf="!skeleton" class="select__arrow" icon="chevron-down"></suka-icon>
        </div>
        <div *ngIf="invalid" class="form-requirement">
          <ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
          <ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
        </div>
      </div>
    </div>
  `,
                providers: [
                    {
                        provide: NG_VALUE_ACCESSOR,
                        useExisting: forwardRef((/**
                         * @return {?}
                         */
                        () => Select)),
                        multi: true
                    }
                ],
                styles: [`
    [data-invalid] ~ .select__arrow {
      bottom: 2.25rem;
    }
  `]
            }] }
];
Select.propDecorators = {
    display: [{ type: Input }],
    label: [{ type: Input }],
    helperText: [{ type: Input }],
    invalidText: [{ type: Input }],
    id: [{ type: Input }],
    disabled: [{ type: Input }],
    skeleton: [{ type: Input }],
    invalid: [{ type: Input }],
    valid: [{ type: Input }],
    valueChange: [{ type: Output }],
    select: [{ type: ViewChild, args: ['selectInput', { static: true },] }],
    onBlur: [{ type: HostListener, args: ['blur', ['$event.target'],] }]
};
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
 */
class Option {
    constructor() {
        this.inputClass = 'select-option';
    }
}
Option.decorators = [
    { type: Directive, args: [{
                // tslint:disable-next-line
                selector: "option"
            },] }
];
Option.propDecorators = {
    inputClass: [{ type: HostBinding, args: ['class',] }]
};
if (false) {
    /** @type {?} */
    Option.prototype.inputClass;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
// tslint:disable-next-line: directive-class-suffix
class OptGroup {
    constructor() {
        this.inputClass = 'select-option';
    }
}
OptGroup.decorators = [
    { type: Directive, args: [{
                // tslint:disable-next-line
                selector: "optgroup"
            },] }
];
OptGroup.propDecorators = {
    inputClass: [{ type: HostBinding, args: ['class',] }]
};
if (false) {
    /** @type {?} */
    OptGroup.prototype.inputClass;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class SelectModule {
}
SelectModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    Select,
                    Option,
                    OptGroup
                ],
                exports: [
                    Select,
                    Option,
                    OptGroup
                ],
                imports: [
                    CommonModule,
                    FormsModule,
                    IconModule,
                ]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class Label {
    constructor() {
        /**
         * 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 {?}
     */
    ngAfterContentInit() {
        this.wrapper.nativeElement.querySelector('input,textarea,div').setAttribute('id', this.id);
    }
    /**
     * @param {?} value
     * @return {?}
     */
    isTemplate(value) {
        return value instanceof TemplateRef;
    }
}
/**
 * Used to build the id of the input item associated with the `Label`.
 */
Label.labelCounter = 0;
Label.decorators = [
    { type: Component, args: [{
                selector: 'suka-label',
                template: `
    <label
      [for]="id"
      class="label"
      [ngClass]="{
        'skeleton': skeleton
      }">
      <ng-content></ng-content>
    </label>
    <div *ngIf="!skeleton && helperText" class="form__helper-text">{{helperText}}</div>
    <div class="text-input__field-wrapper" [attr.data-invalid]="(invalid ? true : null)" #wrapper>
      <suka-icon *ngIf="invalid" icon="alert-circle" class="text-input__invalid-icon text-area__invalid-icon"></suka-icon>
      <suka-icon *ngIf="valid" icon="check" class="text-input__valid-icon text-area__valid-icon"></suka-icon>
      <ng-content select="input,textarea,div"></ng-content>
    </div>
    <div *ngIf="invalid" class="form-requirement">
      <ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
      <ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
    </div>
  `
            }] }
];
/** @nocollapse */
Label.ctorParameters = () => [];
Label.propDecorators = {
    id: [{ type: Input }],
    skeleton: [{ type: Input }],
    helperText: [{ type: Input }],
    invalidText: [{ type: Input }],
    invalid: [{ type: Input }],
    valid: [{ type: Input }],
    wrapper: [{ type: ViewChild, args: ['wrapper', { static: true },] }],
    labelClass: [{ type: HostBinding, args: ['class.form-item',] }]
};
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
 */
class TextInput {
    constructor() {
        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: Directive, args: [{
                selector: '[sukaText]'
            },] }
];
TextInput.propDecorators = {
    inputClass: [{ type: HostBinding, args: ['class.text-input',] }],
    invalid: [{ type: HostBinding, args: ['class.text-input--invalid',] }, { type: Input }],
    valid: [{ type: HostBinding, args: ['class.text-input--valid',] }, { type: Input }],
    skeleton: [{ type: HostBinding, args: ['class.skeleton',] }, { type: Input }]
};
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
 */
// tslint:disable-next-line: directive-class-suffix
class TextArea {
    constructor() {
        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: Directive, args: [{
                selector: '[sukaTextArea]'
            },] }
];
TextArea.propDecorators = {
    baseClass: [{ type: HostBinding, args: ['class.text-area',] }],
    invalid: [{ type: HostBinding, args: ['class.text-area--invalid',] }, { type: Input }],
    valid: [{ type: HostBinding, args: ['class.text-area--valid',] }, { type: Input }],
    skeleton: [{ type: HostBinding, args: ['class.skeleton',] }, { type: Input }]
};
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
 */
class InputModule {
}
InputModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    Label,
                    TextInput,
                    TextArea,
                ],
                exports: [
                    Label,
                    TextInput,
                    TextArea,
                ],
                imports: [
                    CommonModule,
                    FormsModule,
                    IconModule,
                ]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class GridDirective {
    constructor() {
        this.baseClass = true;
    }
}
GridDirective.decorators = [
    { type: Directive, args: [{
                selector: '[sukaGrid]'
            },] }
];
GridDirective.propDecorators = {
    baseClass: [{ type: HostBinding, args: ['class.grid',] }]
};
if (false) {
    /** @type {?} */
    GridDirective.prototype.baseClass;
}
class RowDirective {
    constructor() {
        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: Directive, args: [{
                selector: '[sukaRow]'
            },] }
];
RowDirective.propDecorators = {
    baseClass: [{ type: HostBinding, args: ['class.row',] }],
    noGutters: [{ type: HostBinding, args: ['class.no-gutters',] }, { type: Input }],
    rowDeck: [{ type: HostBinding, args: ['class.row-deck',] }, { type: Input }]
};
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;
}
class ColumnDirective {
    constructor() {
        /**
         * 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 = [];
    }
    /**
     * @return {?}
     */
    get columnClasses() {
        return this._columnClasses.join(' ');
    }
    /**
     * @param {?} classes
     * @return {?}
     */
    set(classes) {
        this._columnClasses = classes.split(' ');
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        try {
            /** @type {?} */
            const columnKeys = Object.keys(this.columnNumbers);
            if (columnKeys.length <= 0) {
                this._columnClasses.push('col');
            }
            columnKeys.forEach((/**
             * @param {?} key
             * @return {?}
             */
            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 {?}
             */
            key => {
                this._columnClasses.push(`offset-${key}-${this.offsets[key]}`);
            }));
        }
        catch (err) {
            console.error(`Malformed \`offsets\` or \`columnNumbers\`: ${err}`);
        }
        if (this.class) {
            this._columnClasses.push(this.class);
        }
    }
}
ColumnDirective.decorators = [
    { type: Directive, args: [{
                selector: '[sukaCol]'
            },] }
];
ColumnDirective.propDecorators = {
    class: [{ type: Input }],
    columnNumbers: [{ type: Input }],
    offsets: [{ type: Input }],
    columnClasses: [{ type: HostBinding, args: ['class',] }]
};
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
 */
class GridModule {
}
GridModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    ColumnDirective,
                    GridDirective,
                    RowDirective
                ],
                exports: [
                    ColumnDirective,
                    GridDirective,
                    RowDirective
                ],
                imports: [CommonModule]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/** @enum {number} */
const ToggleState = {
    Init: 0,
    Checked: 1,
    Unchecked: 2,
};
ToggleState[ToggleState.Init] = 'Init';
ToggleState[ToggleState.Checked] = 'Checked';
ToggleState[ToggleState.Unchecked] = 'Unchecked';
class ToggleChange {
}
if (false) {
    /** @type {?} */
    ToggleChange.prototype.source;
    /** @type {?} */
    ToggleChange.prototype.checked;
}
// tslint:disable-next-line: component-class-suffix
class Toggle {
    /**
     * Creates an instance of `Toggle`.
     * @param {?} changeDetectorRef
     */
    constructor(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 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 {?}
         */
        () => { });
        /**
         * Method set in `registerOnChange` to propagate changes back to the form.
         */
        this.propagateChange = (/**
         * @param {?} _
         * @return {?}
         */
        (_) => { });
        Toggle.toggleCount++;
    }
    /**
     * Returns value `true` if state is selected for the toggle.
     * @return {?}
     */
    get checked() {
        return this._checked;
    }
    /**
     * Updating the state of a toggle to match the state of the parameter passed in.
     * @param {?} checked
     * @return {?}
     */
    set checked(checked) {
        if (checked !== this.checked) {
            this._checked = checked;
            this.changeDetectorRef.markForCheck();
        }
    }
    /**
     * @return {?}
     */
    get toggleWrapperClass() {
        return !this.inline;
    }
    /**
     * @return {?}
     */
    get formItemClass() {
        return !this.inline;
    }
    /**
     * Toggle the selected state of the toggle.
     * @return {?}
     */
    toggle() {
        this.checked = !this.checked;
    }
    // this is the initial value set to the component
    /**
     * @param {?} value
     * @return {?}
     */
    writeValue(value) {
        this.checked = !!value;
    }
    /**
     * Sets a method in order to propagate changes back to the form.
     * @param {?} fn
     * @return {?}
     */
    registerOnChange(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.
     * @return {?}
     */
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    /**
     * Executes on the event of a change within `Toggle` to block propagation.
     * @param {?} event
     * @return {?}
     */
    onChange(event) {
        event.stopPropagation();
    }
    /**
     * Handles click events on the `Toggle` and emits changes to other classes.
     * @param {?} event
     * @return {?}
     */
    onClick(event) {
        if (!this.disabled) {
            this.toggle();
            this.transitionToggleState(this._checked ? ToggleState.Checked : ToggleState.Unchecked);
            this.emitChangeEvent();
        }
    }
    /**
     * Handles changes between toggle states.
     * @param {?} newState
     * @return {?}
     */
    transitionToggleState(newState) {
        this.currentToggleState = newState;
    }
    /**
     * Creates instance of `ToggleChange` used to propagate the change event.
     * @return {?}
     */
    emitChangeEvent() {
        /** @type {?} */
        const 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: Component, args: [{
                selector: 'suka-toggle',
                template: `
    <label
      class="
        toggle
        toggle--distribution-{{distribution}}
      "
      [ngClass]="{
        'skeleton' : skeleton,
        'disabled': disabled
      }"
    >
      <ng-content></ng-content>
      <input
        type="checkbox"
        [id]="id"
        [value]="value"
        [name]="name"
        [required]="required"
        [checked]="checked"
        [disabled]="disabled"
        [attr.aria-label]="ariaLabel"
        [attr.aria-labelledby]="ariaLabelledby"
        [attr.aria-checked]="checked"
        (change)="onChange($event)"
        (click)="onClick($event)"
      />
      <span class="toggle-body">
        <span class="toggle-switch"></span>
        <span class="toggle-track">
          <span class="toggle-bg"></span>
          <span class="toggle-bg toggle-bg_negative"></span>
        </span>
      </span>
    </label>
  `,
                providers: [
                    {
                        provide: NG_VALUE_ACCESSOR,
                        useExisting: Toggle,
                        multi: true
                    }
                ],
                changeDetection: ChangeDetectionStrategy.OnPush
            }] }
];
/** @nocollapse */
Toggle.ctorParameters = () => [
    { type: ChangeDetectorRef }
];
Toggle.propDecorators = {
    nested: [{ type: Input }],
    inline: [{ type: Input }],
    disabled: [{ type: Input }],
    skeleton: [{ type: Input }],
    hideLabel: [{ type: Input }],
    name: [{ type: Input }],
    id: [{ type: Input }],
    required: [{ type: Input }],
    value: [{ type: Input }],
    ariaLabel: [{ type: Input, args: ['aria-label',] }],
    ariaLabelledby: [{ type: Input, args: ['aria-labelledby',] }],
    distribution: [{ type: Input }],
    checked: [{ type: Input }],
    toggleWrapperClass: [{ type: HostBinding, args: ['class.toggle-wrapper',] }],
    formItemClass: [{ type: HostBinding, args: ['class.form-item',] }],
    change: [{ type: Output }],
    inputToggle: [{ type: ViewChild, args: ['inputToggle', { static: true },] }]
};
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
 */
class ToggleModule {
}
ToggleModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    Toggle
                ],
                exports: [
                    Toggle
                ],
                imports: [
                    CommonModule,
                    FormsModule,
                ]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * Used to emit changes performed on a `Radio`.
 */
class RadioChange {
    /**
     * @param {?} source
     * @param {?} value
     */
    constructor(source, value) {
        this.source = source;
        this.value = value;
    }
}
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
 */
class Radio {
    constructor() {
        /**
         * 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 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 {?}
         */
        (event) => { });
    }
    /**
     * @param {?} value
     * @return {?}
     */
    set ariaLabelledby(value) {
        this._labelledby = value;
    }
    /**
     * @return {?}
     */
    get ariaLabelledby() {
        if (this._labelledby) {
            return this._labelledby;
        }
        return `label-${this.id}`;
    }
    /**
     * @return {?}
     */
    get labelLeft() {
        return this.labelPlacement === 'left';
    }
    /**
     * Synchronizes with the `RadioGroup` in the event of a changed `Radio`.
     * Emits the changes of both the `RadioGroup` and `Radio`.
     * @param {?} event
     * @return {?}
     */
    onChange(event) {
        event.stopPropagation();
        this.checked = ((/** @type {?} */ (event.target))).checked;
        /** @type {?} */
        const 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
     * @return {?}
     */
    registerRadioChangeHandler(fn) {
        this.radioChangeHandler = fn;
    }
}
/**
 * Used to dynamically create unique ids for the `Radio`.
 */
Radio.radioCount = 0;
Radio.decorators = [
    { type: Component, args: [{
                selector: 'suka-radio',
                template: `
    <input
      *ngIf="!skeleton"
      class="radio-button"
      type="radio"
      [checked]="checked"
      [disabled]="disabled"
      [name]="name"
      [id]="id"
      [required]="required"
      [value]="value"
      [attr.aria-labelledby]="ariaLabelledby"
      (change)="onChange($event)">
    <div *ngIf="skeleton" class="radio-button skeleton"></div>
    <label
      class="radio-button__label"
      [ngClass]="{
        'skeleton': skeleton
      }"
      [for]="id"
      id="label-{{id}}">
      <span class="radio-button__appearance"></span>
      <ng-content></ng-content>
    </label>
  `,
                providers: [
                    {
                        provide: NG_VALUE_ACCESSOR,
                        useExisting: Radio,
                        multi: true
                    }
                ]
            }] }
];
Radio.propDecorators = {
    checked: [{ type: Input }],
    name: [{ type: Input }],
    disabled: [{ type: Input }],
    labelPlacement: [{ type: Input }],
    ariaLabelledby: [{ type: Input }],
    required: [{ type: Input }],
    value: [{ type: Input }],
    skeleton: [{ type: Input }],
    id: [{ type: Input }],
    change: [{ type: Output }],
    role: [{ type: HostBinding, args: ['attr.role',] }],
    hostClass: [{ type: HostBinding, args: ['class.radio-button-wrapper',] }],
    labelLeft: [{ type: HostBinding, args: ['class.radio-button-wrapper--label-left',] }]
};
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
 */
// tslint:disable-next-line: component-class-suffix
class RadioGroup {
    constructor() {
        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 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 {?}
         */
        () => { });
        /**
         * Method set in registerOnChange to propagate changes back to the form.
         */
        this.propagateChange = (/**
         * @param {?} _
         * @return {?}
         */
        (_) => { });
    }
    /**
     * Sets the passed in `Radio` item as the selected input within the `RadioGroup`.
     * @param {?} selected
     * @return {?}
     */
    set selected(selected) {
        this._selected = selected;
        this.value = selected ? selected.value : null;
        this.checkSelectedRadio();
    }
    /**
     * Returns the `Radio` that is selected within the `RadioGroup`.
     * @return {?}
     */
    get selected() {
        return this._selected;
    }
    /**
     * Sets the value/state of the selected `Radio` within the `RadioGroup` to the passed in value.
     * @param {?} newValue
     * @return {?}
     */
    set value(newValue) {
        if (this._value !== newValue) {
            this._value = newValue;
            this.updateSelectedRadioFromValue();
            this.checkSelectedRadio();
        }
    }
    /**
     * Returns the value/state of the selected `Radio` within the `RadioGroup`.
     * @return {?}
     */
    get value() {
        return this._value;
    }
    /**
     * Replaces the name associated with the `RadioGroup` with the provided parameter.
     * @param {?} name
     * @return {?}
     */
    set name(name) {
        this._name = name;
        this.updateRadios();
    }
    /**
     * Returns the associated name of the `RadioGroup`.
     * @return {?}
     */
    get name() {
        return this._name;
    }
    /**
     * Returns the skeleton value in the `RadioGroup` if there is one.
     * @return {?}
     */
    get skeleton() {
        return this._skeleton;
    }
    /**
     * Sets the skeleton value for all `Radio` to the skeleton value of `RadioGroup`.
     * @param {?} value
     * @return {?}
     */
    set skeleton(value) {
        this._skeleton = value;
        this.updateChildren();
    }
    /**
     * Updates the selected `Radio` to be checked (selected).
     * @return {?}
     */
    checkSelectedRadio() {
        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).
     * @return {?}
     */
    updateSelectedRadioFromValue() {
        /** @type {?} */
        const alreadySelected = this._selected != null && this._selected.value === this._value;
        if (this.radios && !alreadySelected) {
            this._selected = null;
            this.radios.forEach((/**
             * @param {?} radio
             * @return {?}
             */
            radio => {
                if (radio.checked) {
                    this._selected = radio;
                }
            }));
        }
    }
    /**
     * Creates a class of `RadioChange` to emit the change in the `RadioGroup`.
     * @param {?} event
     * @return {?}
     */
    emitChangeEvent(event) {
        this.change.emit(event);
        this.propagateChange(event.value);
        this.onTouched();
    }
    /**
     * Synchronizes radio properties.
     * @return {?}
     */
    updateRadios() {
        if (this.radios) {
            setTimeout((/**
             * @return {?}
             */
            () => {
                this.radios.forEach((/**
                 * @param {?} radio
                 * @return {?}
                 */
                radio => radio.name = this.name));
                if (this.radioLabelPlacement === 'left') {
                    this.radios.forEach((/**
                     * @param {?} radio
                     * @return {?}
                     */
                    radio => radio.labelPlacement = 'left'));
                }
            }));
        }
    }
    /**
     * Updates the value of the `RadioGroup` using the provided parameter.
     * @param {?} value
     * @return {?}
     */
    writeValue(value) {
        this.value = value;
    }
    /**
     * @return {?}
     */
    ngAfterContentInit() {
        this.radios.changes.subscribe((/**
         * @return {?}
         */
        () => {
            this.updateRadios();
            this.updateRadioChangeHandler();
        }));
        this.updateChildren();
        this.updateRadioChangeHandler();
    }
    /**
     * @return {?}
     */
    ngAfterViewInit() {
        this.updateRadios();
    }
    /**
     * Used to set method to propagate changes back to the form.
     * @param {?} fn
     * @return {?}
     */
    registerOnChange(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.
     * @return {?}
     */
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    /**
     * @protected
     * @return {?}
     */
    updateChildren() {
        if (this.radios) {
            this.radios.forEach((/**
             * @param {?} child
             * @return {?}
             */
            child => child.skeleton = this.skeleton));
        }
    }
    /**
     * @protected
     * @return {?}
     */
    updateRadioChangeHandler() {
        this.radios.forEach((/**
         * @param {?} radio
         * @return {?}
         */
        radio => {
            radio.registerRadioChangeHandler((/**
             * @param {?} event
             * @return {?}
             */
            (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: Component, args: [{
                selector: 'suka-radio-group',
                template: `
    <div
      class="radio-button-group"
      [ngClass]="{
        'radio-button-group--vertical': orientation === 'vertical',
        'radio-button-group--label-left': orientation === 'vertical' && radioLabelPlacement === 'left'
      }"
      role="radiogroup">
      <ng-content></ng-content>
    </div>
  `,
                providers: [
                    {
                        provide: NG_VALUE_ACCESSOR,
                        useExisting: RadioGroup,
                        multi: true
                    }
                ]
            }] }
];
RadioGroup.propDecorators = {
    orientation: [{ type: Input }],
    radioLabelPlacement: [{ type: Input }],
    change: [{ type: Output }],
    radios: [{ type: ContentChildren, args: [forwardRef((/**
                 * @return {?}
                 */
                () => Radio)),] }],
    selected: [{ type: Input }],
    value: [{ type: Input }],
    name: [{ type: Input }],
    disabled: [{ type: Input }],
    skeleton: [{ type: Input }],
    radioButtonGroupClass: [{ type: HostBinding, args: ['class.form-item',] }]
};
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
 */
class RadioModule {
}
RadioModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    Radio,
                    RadioGroup
                ],
                exports: [
                    Radio,
                    RadioGroup
                ],
                imports: [
                    CommonModule,
                    FormsModule
                ]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * Used to emit changes performed on a `ButtonRadio`.
 */
class ButtonRadioChange {
    /**
     * @param {?} source
     * @param {?} value
     */
    constructor(source, value) {
        this.source = source;
        this.value = value;
    }
}
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
 */
// tslint:disable-next-line: component-class-suffix
class ButtonRadio {
    constructor() {
        /**
         * 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 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 {?}
         */
        (event) => { });
    }
    /**
     * @param {?} value
     * @return {?}
     */
    set ariaLabelledby(value) {
        this._labelledby = value;
    }
    /**
     * @return {?}
     */
    get ariaLabelledby() {
        if (this._labelledby) {
            return this._labelledby;
        }
        return `label-${this.id}`;
    }
    /**
     * Synchronizes with the `ButtonRadioGroup` in the event of a changed `ButtonRadio`.
     * Emits the changes of both the `ButtonRadioGroup` and `ButtonRadio`.
     * @param {?} event
     * @return {?}
     */
    onChange(event) {
        event.stopPropagation();
        this.checked = ((/** @type {?} */ (event.target))).checked;
        /** @type {?} */
        const 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
     * @return {?}
     */
    registerButtonRadioChangeHandler(fn) {
        this.buttonRadioChangeHandler = fn;
    }
}
/**
 * Used to dynamically create unique ids for the `ButtonRadio`.
 */
ButtonRadio.buttonRadioCount = 0;
ButtonRadio.decorators = [
    { type: Component, args: [{
                selector: 'suka-button-radio',
                template: `
    <input
      *ngIf="!skeleton"
      class="button-radio"
      type="radio"
      [checked]="checked"
      [disabled]="disabled"
      [name]="name"
      [id]="id"
      [required]="required"
      [value]="value"
      [attr.aria-labelledby]="ariaLabelledby"
      (change)="onChange($event)">
    <div *ngIf="skeleton" class="button-radio skeleton"></div>
    <label
      class="button-radio__label"
      [ngClass]="{
        'skeleton': skeleton
      }"
      [for]="id"
      id="label-{{id}}">
      <ng-content></ng-content>
    </label>
  `,
                providers: [
                    {
                        provide: NG_VALUE_ACCESSOR,
                        useExisting: ButtonRadio,
                        multi: true
                    }
                ]
            }] }
];
ButtonRadio.propDecorators = {
    checked: [{ type: Input }],
    name: [{ type: Input }],
    disabled: [{ type: Input }],
    ariaLabelledby: [{ type: Input }],
    required: [{ type: Input }],
    value: [{ type: Input }],
    skeleton: [{ type: Input }],
    id: [{ type: Input }],
    change: [{ type: Output }],
    role: [{ type: HostBinding, args: ['attr.role',] }],
    hostClass: [{ type: HostBinding, args: ['class.button-radio-wrapper',] }]
};
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
 */
// tslint:disable-next-line: component-class-suffix
class ButtonRadioGroup {
    constructor() {
        /**
         * Emits event notifying other classes of a change using a `ButtonRadioChange` class.
         */
        // tslint:disable-next-line: no-output-native
        this.change = new 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 {?}
         */
        () => { });
        /**
         * Method set in registerOnChange to propagate changes back to the form.
         */
        this.propagateChange = (/**
         * @param {?} _
         * @return {?}
         */
        (_) => { });
    }
    /**
     * Sets the passed in `ButtonRadio` item as the selected input within the `ButtonRadioGroup`.
     * @param {?} selected
     * @return {?}
     */
    set selected(selected) {
        this._selected = selected;
        this.value = selected ? selected.value : null;
        this.checkSelectedButtonRadio();
    }
    /**
     * Returns the `ButtonRadio` that is selected within the `ButtonRadioGroup`.
     * @return {?}
     */
    get selected() {
        return this._selected;
    }
    /**
     * Sets the value/state of the selected `ButtonRadio` within the `ButtonRadioGroup` to the passed in value.
     * @param {?} newValue
     * @return {?}
     */
    set value(newValue) {
        if (this._value !== newValue) {
            this._value = newValue;
            this.updateSelectedButtonRadioFromValue();
            this.checkSelectedButtonRadio();
        }
    }
    /**
     * Returns the value/state of the selected `ButtonRadio` within the `ButtonRadioGroup`.
     * @return {?}
     */
    get value() {
        return this._value;
    }
    /**
     * Replaces the name associated with the `ButtonRadioGroup` with the provided parameter.
     * @param {?} name
     * @return {?}
     */
    set name(name) {
        this._name = name;
        this.updateButtonRadios();
    }
    /**
     * Returns the associated name of the `ButtonRadioGroup`.
     * @return {?}
     */
    get name() {
        return this._name;
    }
    /**
     * Returns the skeleton value in the `ButtonRadioGroup` if there is one.
     * @return {?}
     */
    get skeleton() {
        return this._skeleton;
    }
    /**
     * Sets the skeleton value for all `ButtonRadio` to the skeleton value of `ButtonRadioGroup`.
     * @param {?} value
     * @return {?}
     */
    set skeleton(value) {
        this._skeleton = value;
        this.updateChildren();
    }
    /**
     * Updates the selected `ButtonRadio` to be checked (selected).
     * @return {?}
     */
    checkSelectedButtonRadio() {
        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).
     * @return {?}
     */
    updateSelectedButtonRadioFromValue() {
        /** @type {?} */
        const alreadySelected = this._selected != null && this._selected.value === this._value;
        if (this.buttonRadios && !alreadySelected) {
            this._selected = null;
            this.buttonRadios.forEach((/**
             * @param {?} buttonRadio
             * @return {?}
             */
            buttonRadio => {
                if (buttonRadio.checked) {
                    this._selected = buttonRadio;
                }
            }));
        }
    }
    /**
     * Creates a class of `ButtonRadioChange` to emit the change in the `ButtonRadioGroup`.
     * @param {?} event
     * @return {?}
     */
    emitChangeEvent(event) {
        this.change.emit(event);
        this.propagateChange(event.value);
        this.onTouched();
    }
    /**
     * Synchronizes buttonRadio properties.
     * @return {?}
     */
    updateButtonRadios() {
        if (this.buttonRadios) {
            setTimeout((/**
             * @return {?}
             */
            () => {
                this.buttonRadios.forEach((/**
                 * @param {?} buttonRadio
                 * @return {?}
                 */
                buttonRadio => buttonRadio.name = this.name));
            }));
        }
    }
    /**
     * Updates the value of the `ButtonRadioGroup` using the provided parameter.
     * @param {?} value
     * @return {?}
     */
    writeValue(value) {
        this.value = value;
    }
    /**
     * @return {?}
     */
    ngAfterContentInit() {
        this.buttonRadios.changes.subscribe((/**
         * @return {?}
         */
        () => {
            this.updateButtonRadios();
            this.updateButtonRadioChangeHandler();
        }));
        this.updateChildren();
        this.updateButtonRadioChangeHandler();
    }
    /**
     * @return {?}
     */
    ngAfterViewInit() {
        this.updateButtonRadios();
    }
    /**
     * Used to set method to propagate changes back to the form.
     * @param {?} fn
     * @return {?}
     */
    registerOnChange(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.
     * @return {?}
     */
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    /**
     * @protected
     * @return {?}
     */
    updateChildren() {
        if (this.buttonRadios) {
            this.buttonRadios.forEach((/**
             * @param {?} child
             * @return {?}
             */
            child => child.skeleton = this.skeleton));
        }
    }
    /**
     * @protected
     * @return {?}
     */
    updateButtonRadioChangeHandler() {
        this.buttonRadios.forEach((/**
         * @param {?} buttonRadio
         * @return {?}
         */
        buttonRadio => {
            buttonRadio.registerButtonRadioChangeHandler((/**
             * @param {?} event
             * @return {?}
             */
            (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: Component, args: [{
                selector: 'suka-button-radio-group',
                template: `
    <div
      class="button-radio-group"
      role="buttonRadiogroup">
      <ng-content></ng-content>
    </div>
  `,
                providers: [
                    {
                        provide: NG_VALUE_ACCESSOR,
                        useExisting: ButtonRadioGroup,
                        multi: true
                    }
                ]
            }] }
];
ButtonRadioGroup.propDecorators = {
    change: [{ type: Output }],
    buttonRadios: [{ type: ContentChildren, args: [forwardRef((/**
                 * @return {?}
                 */
                () => ButtonRadio)),] }],
    selected: [{ type: Input }],
    value: [{ type: Input }],
    name: [{ type: Input }],
    disabled: [{ type: Input }],
    skeleton: [{ type: Input }],
    buttonRadioButtonGroupClass: [{ type: HostBinding, args: ['class.form-item',] }]
};
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
 */
class ButtonRadioModule {
}
ButtonRadioModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    ButtonRadio,
                    ButtonRadioGroup
                ],
                exports: [
                    ButtonRadio,
                    ButtonRadioGroup
                ],
                imports: [
                    CommonModule,
                    FormsModule
                ]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class Container {
    constructor() {
        /**
         * Sets the container type. Set to `fluid` for a full width container.
         */
        this.sukaContainer = 'default';
        this.default = true;
        this.fluid = false;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        if (this.sukaContainer === 'fluid') {
            this.fluid = true;
            this.default = false;
        }
    }
}
Container.decorators = [
    { type: Directive, args: [{
                selector: '[sukaContainer]'
            },] }
];
Container.propDecorators = {
    sukaContainer: [{ type: Input }],
    default: [{ type: HostBinding, args: ['class.container',] }],
    fluid: [{ type: HostBinding, args: ['class.container--fluid',] }]
};
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
 */
class ContainerModule {
}
ContainerModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    Container,
                ],
                exports: [
                    Container,
                ],
                imports: [
                    CommonModule,
                ]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class MarginDirective {
    /**
     * @param {?} elementRef
     */
    constructor(elementRef) {
        this.m = {};
        this.elementRef = elementRef;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        try {
            /** @type {?} */
            const marginKeys = Object.keys(this.m);
            marginKeys.forEach((/**
             * @param {?} key
             * @return {?}
             */
            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: Directive, args: [{
                // tslint:disable-next-line: directive-selector
                selector: '[m]'
            },] }
];
/** @nocollapse */
MarginDirective.ctorParameters = () => [
    { type: ElementRef }
];
MarginDirective.propDecorators = {
    m: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    MarginDirective.prototype.m;
    /**
     * @type {?}
     * @private
     */
    MarginDirective.prototype.elementRef;
}
class MarginTopDirective {
    /**
     * @param {?} elementRef
     */
    constructor(elementRef) {
        this.mt = {};
        this.elementRef = elementRef;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        try {
            /** @type {?} */
            const marginKeys = Object.keys(this.mt);
            marginKeys.forEach((/**
             * @param {?} key
             * @return {?}
             */
            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: Directive, args: [{
                selector: '[mt]'
            },] }
];
/** @nocollapse */
MarginTopDirective.ctorParameters = () => [
    { type: ElementRef }
];
MarginTopDirective.propDecorators = {
    mt: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    MarginTopDirective.prototype.mt;
    /**
     * @type {?}
     * @private
     */
    MarginTopDirective.prototype.elementRef;
}
class MarginBottomDirective {
    /**
     * @param {?} elementRef
     */
    constructor(elementRef) {
        this.mb = {};
        this.elementRef = elementRef;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        try {
            /** @type {?} */
            const marginKeys = Object.keys(this.mb);
            marginKeys.forEach((/**
             * @param {?} key
             * @return {?}
             */
            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: Directive, args: [{
                // tslint:disable-next-line: directive-selector
                selector: '[mb]'
            },] }
];
/** @nocollapse */
MarginBottomDirective.ctorParameters = () => [
    { type: ElementRef }
];
MarginBottomDirective.propDecorators = {
    mb: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    MarginBottomDirective.prototype.mb;
    /**
     * @type {?}
     * @private
     */
    MarginBottomDirective.prototype.elementRef;
}
class MarginLeftDirective {
    /**
     * @param {?} elementRef
     */
    constructor(elementRef) {
        this.ml = {};
        this.elementRef = elementRef;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        try {
            /** @type {?} */
            const marginKeys = Object.keys(this.ml);
            marginKeys.forEach((/**
             * @param {?} key
             * @return {?}
             */
            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: Directive, args: [{
                // tslint:disable-next-line: directive-selector
                selector: '[ml]'
            },] }
];
/** @nocollapse */
MarginLeftDirective.ctorParameters = () => [
    { type: ElementRef }
];
MarginLeftDirective.propDecorators = {
    ml: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    MarginLeftDirective.prototype.ml;
    /**
     * @type {?}
     * @private
     */
    MarginLeftDirective.prototype.elementRef;
}
class MarginRightDirective {
    /**
     * @param {?} elementRef
     */
    constructor(elementRef) {
        this.mr = {};
        this.elementRef = elementRef;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        try {
            /** @type {?} */
            const marginKeys = Object.keys(this.mr);
            marginKeys.forEach((/**
             * @param {?} key
             * @return {?}
             */
            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: Directive, args: [{
                // tslint:disable-next-line: directive-selector
                selector: '[mr]'
            },] }
];
/** @nocollapse */
MarginRightDirective.ctorParameters = () => [
    { type: ElementRef }
];
MarginRightDirective.propDecorators = {
    mr: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    MarginRightDirective.prototype.mr;
    /**
     * @type {?}
     * @private
     */
    MarginRightDirective.prototype.elementRef;
}
class MarginHorizontalDirective {
    /**
     * @param {?} elementRef
     */
    constructor(elementRef) {
        this.mx = {};
        this.elementRef = elementRef;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        try {
            /** @type {?} */
            const marginKeys = Object.keys(this.mx);
            marginKeys.forEach((/**
             * @param {?} key
             * @return {?}
             */
            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: Directive, args: [{
                // tslint:disable-next-line: directive-selector
                selector: '[mx]'
            },] }
];
/** @nocollapse */
MarginHorizontalDirective.ctorParameters = () => [
    { type: ElementRef }
];
MarginHorizontalDirective.propDecorators = {
    mx: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    MarginHorizontalDirective.prototype.mx;
    /**
     * @type {?}
     * @private
     */
    MarginHorizontalDirective.prototype.elementRef;
}
class MarginVerticalDirective {
    /**
     * @param {?} elementRef
     */
    constructor(elementRef) {
        this.my = {};
        this.elementRef = elementRef;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        try {
            /** @type {?} */
            const marginKeys = Object.keys(this.my);
            marginKeys.forEach((/**
             * @param {?} key
             * @return {?}
             */
            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: Directive, args: [{
                // tslint:disable-next-line: directive-selector
                selector: '[my]'
            },] }
];
/** @nocollapse */
MarginVerticalDirective.ctorParameters = () => [
    { type: ElementRef }
];
MarginVerticalDirective.propDecorators = {
    my: [{ type: Input }]
};
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
 */
class PaddingDirective {
    /**
     * @param {?} elementRef
     */
    constructor(elementRef) {
        this.p = {};
        this.elementRef = elementRef;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        try {
            /** @type {?} */
            const paddingKeys = Object.keys(this.p);
            paddingKeys.forEach((/**
             * @param {?} key
             * @return {?}
             */
            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: Directive, args: [{
                // tslint:disable-next-line: directive-selector
                selector: '[p]'
            },] }
];
/** @nocollapse */
PaddingDirective.ctorParameters = () => [
    { type: ElementRef }
];
PaddingDirective.propDecorators = {
    p: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    PaddingDirective.prototype.p;
    /**
     * @type {?}
     * @private
     */
    PaddingDirective.prototype.elementRef;
}
class PaddingTopDirective {
    /**
     * @param {?} elementRef
     */
    constructor(elementRef) {
        this.pt = {};
        this.elementRef = elementRef;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        try {
            /** @type {?} */
            const paddingKeys = Object.keys(this.pt);
            paddingKeys.forEach((/**
             * @param {?} key
             * @return {?}
             */
            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: Directive, args: [{
                // tslint:disable-next-line: directive-selector
                selector: '[pt]'
            },] }
];
/** @nocollapse */
PaddingTopDirective.ctorParameters = () => [
    { type: ElementRef }
];
PaddingTopDirective.propDecorators = {
    pt: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    PaddingTopDirective.prototype.pt;
    /**
     * @type {?}
     * @private
     */
    PaddingTopDirective.prototype.elementRef;
}
class PaddingBottomDirective {
    /**
     * @param {?} elementRef
     */
    constructor(elementRef) {
        this.pb = {};
        this.elementRef = elementRef;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        try {
            /** @type {?} */
            const paddingKeys = Object.keys(this.pb);
            paddingKeys.forEach((/**
             * @param {?} key
             * @return {?}
             */
            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: Directive, args: [{
                // tslint:disable-next-line: directive-selector
                selector: '[pb]'
            },] }
];
/** @nocollapse */
PaddingBottomDirective.ctorParameters = () => [
    { type: ElementRef }
];
PaddingBottomDirective.propDecorators = {
    pb: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    PaddingBottomDirective.prototype.pb;
    /**
     * @type {?}
     * @private
     */
    PaddingBottomDirective.prototype.elementRef;
}
class PaddingLeftDirective {
    /**
     * @param {?} elementRef
     */
    constructor(elementRef) {
        this.pl = {};
        this.elementRef = elementRef;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        try {
            /** @type {?} */
            const paddingKeys = Object.keys(this.pl);
            paddingKeys.forEach((/**
             * @param {?} key
             * @return {?}
             */
            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: Directive, args: [{
                // tslint:disable-next-line: directive-selector
                selector: '[pl]'
            },] }
];
/** @nocollapse */
PaddingLeftDirective.ctorParameters = () => [
    { type: ElementRef }
];
PaddingLeftDirective.propDecorators = {
    pl: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    PaddingLeftDirective.prototype.pl;
    /**
     * @type {?}
     * @private
     */
    PaddingLeftDirective.prototype.elementRef;
}
class PaddingRightDirective {
    /**
     * @param {?} elementRef
     */
    constructor(elementRef) {
        this.pr = {};
        this.elementRef = elementRef;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        try {
            /** @type {?} */
            const paddingKeys = Object.keys(this.pr);
            paddingKeys.forEach((/**
             * @param {?} key
             * @return {?}
             */
            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: Directive, args: [{
                // tslint:disable-next-line: directive-selector
                selector: '[pr]'
            },] }
];
/** @nocollapse */
PaddingRightDirective.ctorParameters = () => [
    { type: ElementRef }
];
PaddingRightDirective.propDecorators = {
    pr: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    PaddingRightDirective.prototype.pr;
    /**
     * @type {?}
     * @private
     */
    PaddingRightDirective.prototype.elementRef;
}
class PaddingHorizontalDirective {
    /**
     * @param {?} elementRef
     */
    constructor(elementRef) {
        this.px = {};
        this.elementRef = elementRef;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        try {
            /** @type {?} */
            const paddingKeys = Object.keys(this.px);
            paddingKeys.forEach((/**
             * @param {?} key
             * @return {?}
             */
            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: Directive, args: [{
                // tslint:disable-next-line: directive-selector
                selector: '[px]'
            },] }
];
/** @nocollapse */
PaddingHorizontalDirective.ctorParameters = () => [
    { type: ElementRef }
];
PaddingHorizontalDirective.propDecorators = {
    px: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    PaddingHorizontalDirective.prototype.px;
    /**
     * @type {?}
     * @private
     */
    PaddingHorizontalDirective.prototype.elementRef;
}
class PaddingVerticalDirective {
    /**
     * @param {?} elementRef
     */
    constructor(elementRef) {
        this.py = {};
        this.elementRef = elementRef;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        try {
            /** @type {?} */
            const paddingKeys = Object.keys(this.py);
            paddingKeys.forEach((/**
             * @param {?} key
             * @return {?}
             */
            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: Directive, args: [{
                // tslint:disable-next-line: directive-selector
                selector: '[py]'
            },] }
];
/** @nocollapse */
PaddingVerticalDirective.ctorParameters = () => [
    { type: ElementRef }
];
PaddingVerticalDirective.propDecorators = {
    py: [{ type: Input }]
};
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
 */
class SpacingModule {
}
SpacingModule.decorators = [
    { type: 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: [CommonModule]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class Card {
    constructor() {
        /**
         * Callback for the primary action
         */
        this.primaryFooterAction = new EventEmitter();
        /**
         * Callback for the secondary action
         */
        this.secondaryFooterAction = new EventEmitter();
        /**
         * Callback for the card header action
         */
        this.headerAction = new EventEmitter();
        this.cardClass = true;
        /**
         * Set to `true` to display a loading card.
         */
        this.skeleton = false;
        /**
         * Display footer state.
         */
        this.showFooter = false;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this.showFooter = this.primaryFooterAction.observers.length > 0;
    }
    /**
     * Emits the cards primary footer action callback
     * @param {?} $event
     * @return {?}
     */
    onPrimaryFooterAction($event) {
        this.primaryFooterAction.emit($event);
    }
    /**
     * Emits the cards secondary footer action callback
     * @param {?} $event
     * @return {?}
     */
    onSecondaryFooterAction($event) {
        this.secondaryFooterAction.emit($event);
    }
    /**
     * Emits the cards header action callback
     * @param {?} $event
     * @return {?}
     */
    onHeaderAction($event) {
        this.headerAction.emit($event);
    }
}
Card.decorators = [
    { type: Component, args: [{
                selector: 'suka-card',
                template: `
    <suka-card-header
      *ngIf="title"
      (action)="onHeaderAction($event)"
      [actionLabel]="headerActionLabel"
      [skeleton]="skeleton"
    >
      {{title}}
    </suka-card-header>

    <suka-card-section
      *ngIf='(sectioned !== false) else elseTpl'
    >
      <ng-container *ngTemplateOutlet="elseTpl"></ng-container>
    </suka-card-section>

    <suka-card-footer
      *ngIf='!skeleton && showFooter'
      (primaryAction)="onPrimaryFooterAction($event)"
      [primaryLabel]="primaryFooterActionLabel"
      (secondaryAction)="onSecondaryFooterAction($event)"
      [secondaryLabel]="secondaryFooterActionLabel"
    >
    </suka-card-footer>

    <ng-template #elseTpl><ng-content></ng-content></ng-template>
  `,
                encapsulation: ViewEncapsulation.None
            }] }
];
Card.propDecorators = {
    title: [{ type: Input }],
    sectioned: [{ type: Input }],
    primaryFooterActionLabel: [{ type: Input }],
    primaryFooterAction: [{ type: Output }],
    secondaryFooterActionLabel: [{ type: Input }],
    secondaryFooterAction: [{ type: Output }],
    headerActionLabel: [{ type: Input }],
    headerAction: [{ type: Output }],
    cardClass: [{ type: HostBinding, args: ['class.card',] }],
    skeleton: [{ type: Input }]
};
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
 */
class CardHeader {
    constructor() {
        this.showAction = false;
        this.cardHeaderClass = true;
        this.skeleton = false;
        this.action = new EventEmitter();
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this.showAction = this.action.observers.length > 0;
    }
    /**
     * @param {?} $event
     * @return {?}
     */
    onClick($event) {
        this.action.emit($event);
    }
}
CardHeader.decorators = [
    { type: Component, args: [{
                selector: 'suka-card-header',
                template: `
    <h5 *ngIf="skeleton" class="skeleton__text skeleton__heading"></h5>
    <h5 *ngIf="!skeleton"><ng-content></ng-content></h5>
    <button
      *ngIf="!skeleton && showAction"
      sukaButton="plain"
      (click)="onClick($event)"
    >
      {{actionLabel}}
    </button>
  `,
                encapsulation: ViewEncapsulation.None
            }] }
];
CardHeader.propDecorators = {
    cardHeaderClass: [{ type: HostBinding, args: ['class.card-header',] }],
    skeleton: [{ type: Input }],
    actionLabel: [{ type: Input }],
    action: [{ type: Output }]
};
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
 */
class CardSection {
    constructor() {
        this.cardSectionClass = true;
    }
}
CardSection.decorators = [
    { type: Component, args: [{
                selector: 'suka-card-section',
                template: `
    <ng-content></ng-content>
  `,
                encapsulation: ViewEncapsulation.None
            }] }
];
CardSection.propDecorators = {
    cardSectionClass: [{ type: HostBinding, args: ['class.card-section',] }]
};
if (false) {
    /** @type {?} */
    CardSection.prototype.cardSectionClass;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class CardFooter {
    constructor() {
        this.showSecondaryButton = false;
        this.baseClass = true;
        this.primaryAction = new EventEmitter();
        this.secondaryAction = new EventEmitter();
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this.showSecondaryButton = this.secondaryAction.observers.length > 0;
    }
    /**
     * @param {?} buttonType
     * @return {?}
     */
    onButtonClick(buttonType) {
        if (buttonType === 'primary') {
            this.primaryAction.emit();
        }
        if (buttonType === 'secondary') {
            this.secondaryAction.emit();
        }
    }
}
CardFooter.decorators = [
    { type: Component, args: [{
                selector: 'suka-card-footer',
                template: `
    <suka-button-group>
      <button
        *ngIf="showSecondaryButton"
        sukaButton="plain"
        (click)="onButtonClick('secondary')"
      >
        {{secondaryLabel}}
      </button>
      <button
        sukaButton="primary"
        (click)="onButtonClick('primary')"
      >
        {{primaryLabel}}
      </button>
    </suka-button-group>
  `,
                encapsulation: ViewEncapsulation.None
            }] }
];
CardFooter.propDecorators = {
    baseClass: [{ type: HostBinding, args: ['class.card-footer',] }],
    primaryLabel: [{ type: Input }],
    secondaryLabel: [{ type: Input }],
    primaryAction: [{ type: Output }],
    secondaryAction: [{ type: Output }]
};
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
 */
class CardModule {
}
CardModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    Card,
                    CardHeader,
                    CardSection,
                    CardFooter,
                ],
                exports: [
                    Card,
                    CardHeader,
                    CardSection,
                    CardFooter,
                ],
                imports: [
                    CommonModule,
                    ButtonModule,
                ]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class Accordion {
    constructor() {
        this._skeleton = false;
        this.openCloseItems = new Subject();
        this.skeletons = new Subject();
        /**
         * Set to `true` to allow multiple accordion items to be expanded.
         */
        this.multi = false;
        this.role = 'list';
        this.baseClass = true;
    }
    /**
     * Set to `true` to display a loading accordion.
     * @param {?} value
     * @return {?}
     */
    set skeleton(value) {
        this._skeleton = value;
        this.updateSkeletons();
    }
    /**
     * @return {?}
     */
    get skeleton() {
        return this._skeleton;
    }
    /**
     * @protected
     * @return {?}
     */
    updateSkeletons() {
        this.skeletons.next(this._skeleton);
    }
}
Accordion.decorators = [
    { type: Component, args: [{
                selector: 'suka-accordion',
                template: `
    <ng-content select="suka-accordion-item"></ng-content>
  `
            }] }
];
Accordion.propDecorators = {
    multi: [{ type: Input }],
    role: [{ type: HostBinding, args: ['attr.role',] }],
    baseClass: [{ type: HostBinding, args: ['class.accordion',] }],
    skeleton: [{ type: Input }]
};
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
 */
class AccordionItem {
    /**
     * @param {?} accordion
     */
    constructor(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 EventEmitter();
        /**
         * Emits an event when the accordion item is closed.
         */
        this.closed = new 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.
     * @return {?}
     */
    toggle() {
        if (!this.skeleton) {
            if (!this.expanded) {
                if (!this.accordion.multi) {
                    this.accordion.openCloseItems.next(true);
                }
                this.open();
            }
            else {
                this.close();
            }
        }
    }
    /**
     * @protected
     * @return {?}
     */
    open() {
        if (!this.expanded) {
            this.opened.emit({ id: this.id });
        }
        this.expanded = true;
    }
    /**
     * @protected
     * @return {?}
     */
    close() {
        if (this.expanded) {
            this.closed.emit({ id: this.id });
        }
        this.expanded = false;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this.openSubscription = this.accordion.openCloseItems
            .pipe(takeWhile((/**
         * @return {?}
         */
        () => this.alive)))
            .subscribe((/**
         * @param {?} collapsed
         * @return {?}
         */
        collapsed => {
            if (!this.skeleton) {
                collapsed ? this.close() : this.open();
            }
        }));
        this.skeletonSubscription = this.accordion.skeletons
            .pipe(takeWhile((/**
         * @return {?}
         */
        () => this.alive)))
            .subscribe((/**
         * @param {?} skeletonValue
         * @return {?}
         */
        skeletonValue => this.skeleton = skeletonValue));
        this.skeleton = this.accordion.skeleton;
    }
    /**
     * @return {?}
     */
    ngOnDestroy() {
        this.alive = false;
        this.openSubscription.unsubscribe();
        this.skeletonSubscription.unsubscribe();
    }
    /**
     * @param {?} value
     * @return {?}
     */
    isTemplate(value) {
        return value instanceof TemplateRef;
    }
}
AccordionItem.accordionItemCount = 0;
AccordionItem.decorators = [
    { type: Component, args: [{
                selector: 'suka-accordion-item',
                template: `
    <button
      [attr.aria-expanded]="expanded"
      [attr.aria-controls]="id"
      (click)="toggle()"
      class="accordion__heading">
      <suka-icon icon="chevron-down" class="accordion__arrow"></suka-icon>

      <div *ngIf="isTemplate(title) && !skeleton" class="accordion__title-content">
        <ng-template [ngTemplateOutlet]="title"></ng-template>
      </div>

      <p
        *ngIf="!isTemplate(title)"
        class="accordion__title"
        [ngClass]="{
          'skeleton__text': skeleton
        }">
        {{!skeleton ? title : null}}
      </p>
    </button>
    <div [id]="id" class="accordion__content">
      <ng-content *ngIf="!skeleton; else skeletonTemplate"></ng-content>
      <ng-template #skeletonTemplate>
        <p class="skeleton__text" style="width: 90%"></p>
        <p class="skeleton__text" style="width: 80%"></p>
        <p class="skeleton__text" style="width: 95%"></p>
      </ng-template>
    </div>
  `
            }] }
];
/** @nocollapse */
AccordionItem.ctorParameters = () => [
    { type: Accordion, decorators: [{ type: Host }] }
];
AccordionItem.propDecorators = {
    title: [{ type: Input }],
    id: [{ type: Input }],
    skeleton: [{ type: Input }],
    opened: [{ type: Output }],
    closed: [{ type: Output }],
    itemClass: [{ type: HostBinding, args: ['class.accordion__item',] }],
    expanded: [{ type: HostBinding, args: ['class.accordion__item--active',] }, { type: Input }],
    itemType: [{ type: HostBinding, args: ['style.display',] }],
    role: [{ type: HostBinding, args: ['attr.role',] }],
    ariaLevel: [{ type: HostBinding, args: ['attr.aria-level',] }, { type: Input }]
};
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
 */
class AccordionModule {
}
AccordionModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    Accordion,
                    AccordionItem
                ],
                exports: [
                    Accordion,
                    AccordionItem
                ],
                imports: [
                    CommonModule,
                    IconModule,
                ]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class ListItemDirective {
    constructor() {
        this.wrapper = true;
    }
}
ListItemDirective.decorators = [
    { type: Directive, args: [{
                selector: '[sukaListItem]'
            },] }
];
ListItemDirective.propDecorators = {
    wrapper: [{ type: HostBinding, args: ['class.list__item',] }]
};
if (false) {
    /** @type {?} */
    ListItemDirective.prototype.wrapper;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class List {
    /**
     * @param {?} elementRef
     */
    constructor(elementRef) {
        this.elementRef = elementRef;
    }
    /**
     * @return {?}
     */
    get ordered() {
        if (this.nested) {
            return false;
        }
        return this.elementRef.nativeElement.tagName === 'OL';
    }
    /**
     * @return {?}
     */
    get unordered() {
        if (this.nested) {
            return false;
        }
        return this.elementRef.nativeElement.tagName === 'UL';
    }
    /**
     * @return {?}
     */
    get nested() {
        return this.elementRef.nativeElement.parentElement.tagName === 'LI';
    }
}
List.decorators = [
    { type: Directive, args: [{
                selector: '[sukaList]'
            },] }
];
/** @nocollapse */
List.ctorParameters = () => [
    { type: ElementRef }
];
List.propDecorators = {
    ordered: [{ type: HostBinding, args: ['class.list--ordered',] }],
    unordered: [{ type: HostBinding, args: ['class.list--unordered',] }],
    nested: [{ type: HostBinding, args: ['class.list--nested',] }]
};
if (false) {
    /**
     * @type {?}
     * @protected
     */
    List.prototype.elementRef;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class ListModule {
}
ListModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    ListItemDirective,
                    List
                ],
                exports: [
                    ListItemDirective,
                    List
                ],
                imports: [CommonModule]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * Used to emit changes performed on number input components.
 */
class 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
 */
// tslint:disable-next-line: component-class-suffix
class Number {
    /**
     * Creates an instance of `Number`.
     */
    constructor() {
        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 EventEmitter();
        /**
         * Called when number input is blurred. Needed to properly implement `ControlValueAccessor`.
         */
        this.onTouched = (/**
         * @return {?}
         */
        () => { });
        /**
         * Method set in `registerOnChange` to propagate changes back to the form.
         */
        this.propagateChange = (/**
         * @param {?} _
         * @return {?}
         */
        (_) => { });
        Number.numberCount++;
    }
    /**
     * This is the initial value set to the component
     * @param {?} value The input value.
     * @return {?}
     */
    writeValue(value) {
        this.value = value;
    }
    /**
     * Sets a method in order to propagate changes back to the form.
     * @param {?} fn
     * @return {?}
     */
    registerOnChange(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.
     * @return {?}
     */
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    /**
     * Sets the disabled state through the model
     * @param {?} isDisabled
     * @return {?}
     */
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
    }
    /**
     * Adds 1 to the current `value`.
     * @return {?}
     */
    onIncrement() {
        if (this.max === null || this.value < this.max) {
            this.value++;
            this.emitChangeEvent();
        }
    }
    /**
     * Subtracts 1 to the current `value`.
     * @return {?}
     */
    onDecrement() {
        if (this.min === null || this.value > this.min) {
            this.value--;
            this.emitChangeEvent();
        }
    }
    /**
     * Creates a class of `NumberChange` to emit the change in the `Number`.
     * @return {?}
     */
    emitChangeEvent() {
        /** @type {?} */
        const event = new NumberChange();
        event.source = this;
        event.value = this.value;
        this.change.emit(event);
        this.propagateChange(this.value);
    }
    /**
     * @param {?} event
     * @return {?}
     */
    onNumberInputChange(event) {
        this.value = event.target.value;
        this.emitChangeEvent();
    }
    /**
     * @param {?} value
     * @return {?}
     */
    isTemplate(value) {
        return value instanceof TemplateRef;
    }
}
/**
 * Variable used for creating unique ids for number input components.
 */
Number.numberCount = 0;
Number.decorators = [
    { type: Component, args: [{
                selector: 'suka-number',
                template: `
    <label *ngIf="skeleton && label" class="label skeleton"></label>
    <label *ngIf="!skeleton && label" [for]="id" class="label">
      <ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
      <ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
    </label>
    <div *ngIf="!skeleton && helperText" class="form__helper-text">
      <ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
      <ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
    </div>
    <div
      data-numberinput
      [attr.data-invalid]="(invalid ? true : null)"
      [attr.data-valid]="(valid ? true : null)"
      class="number-input"
      [ngClass]="{
        'number-input--nolabel': !label,
        'number-input--helpertext': helperText,
        'skeleton' : skeleton,
        'number-input--disabled': disabled
      }">
      <div class="number-input__input-wrapper">
        <span class="number-input__prefix" *ngIf="!skeleton && prefix">
          <ng-container *ngIf="!isTemplate(prefix)">{{prefix}}</ng-container>
          <ng-template *ngIf="isTemplate(prefix)" [ngTemplateOutlet]="prefix"></ng-template>
        </span>
        <input
          type="number"
          [id]="id"
          [value]="value"
          [attr.min]="min"
          [attr.max]="max"
          [disabled]="disabled"
          [required]="required"
          (input)="onNumberInputChange($event)"/>
        <suka-icon *ngIf="!skeleton && invalid" icon="alert-circle" class="number-input__invalid"></suka-icon>
        <suka-icon *ngIf="!skeleton && valid" icon="check" class="number-input__valid"></suka-icon>
        <div *ngIf="!skeleton" class="number-input__controls">
          <button
            class="number-input__control-btn up-icon"
            type="button"
            aria-live="polite"
            aria-atomic="true"
            (click)="onIncrement()">
            <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>
          </button>
          <button
            class="number-input__control-btn down-icon"
            type="button"
            aria-live="polite"
            aria-atomic="true"
            (click)="onDecrement()">
            <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>
          </button>
        </div>
      </div>
      <div *ngIf="invalid" class="form-requirement">
        <ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
        <ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
      </div>
    </div>
  `,
                providers: [
                    {
                        provide: NG_VALUE_ACCESSOR,
                        useExisting: Number,
                        multi: true
                    }
                ]
            }] }
];
/** @nocollapse */
Number.ctorParameters = () => [];
Number.propDecorators = {
    containerClass: [{ type: HostBinding, args: ['class.form-item',] }],
    disabled: [{ type: Input }],
    skeleton: [{ type: Input }],
    invalid: [{ type: Input }],
    valid: [{ type: Input }],
    id: [{ type: Input }],
    required: [{ type: Input }],
    value: [{ type: Input }],
    min: [{ type: Input }],
    max: [{ type: Input }],
    label: [{ type: Input }],
    prefix: [{ type: Input }],
    helperText: [{ type: Input }],
    invalidText: [{ type: Input }],
    change: [{ type: Output }]
};
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
 */
class NumberModule {
}
NumberModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    Number
                ],
                exports: [
                    Number
                ],
                imports: [
                    FormsModule,
                    CommonModule,
                    IconModule,
                ]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
// tslint:disable-next-line: component-class-suffix
class Search {
    /**
     * Creates an instance of `Search`.
     * @param {?} elementRef
     */
    constructor(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 EventEmitter();
        /**
         * Emits an event when the clear button is clicked.
         */
        this.clear = new EventEmitter();
        /**
         * Called when search input is blurred. Needed to properly implement `ControlValueAccessor`.
         */
        this.onTouched = (/**
         * @return {?}
         */
        () => { });
        /**
         * Method set in `registerOnChange` to propagate changes back to the form.
         */
        this.propagateChange = (/**
         * @param {?} _
         * @return {?}
         */
        (_) => { });
        Search.searchCount++;
    }
    /**
     * @return {?}
     */
    get containerClass() { return !this.toolbar; }
    /**
     * This is the initial value set to the component
     * @param {?} value The input value.
     * @return {?}
     */
    writeValue(value) {
        this.value = value;
    }
    /**
     * Sets a method in order to propagate changes back to the form.
     * @param {?} fn
     * @return {?}
     */
    registerOnChange(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.
     * @return {?}
     */
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    /**
     * Called when text is written in the input.
     * @param {?} search The input text.
     * @return {?}
     */
    onSearch(search) {
        this.value = search;
        this.doValueChange();
    }
    /**
     * Called when clear button is clicked.
     * @return {?}
     */
    clearSearch() {
        this.value = '';
        this.clear.emit();
        this.propagateChange(this.value);
    }
    /**
     * @return {?}
     */
    doValueChange() {
        this.valueChange.emit(this.value);
        this.propagateChange(this.value);
    }
    /**
     * @return {?}
     */
    openSearch() {
        this.active = true;
        setTimeout((/**
         * @return {?}
         */
        () => this.inputRef.nativeElement.focus()));
    }
    /**
     * @param {?} event
     * @return {?}
     */
    keyDown(event) {
        if (this.toolbar) {
            if (event.key === 'Escape') {
                this.active = false;
            }
            else if (event.key === 'Enter') {
                this.openSearch();
            }
        }
    }
    /**
     * @param {?} event
     * @return {?}
     */
    focusOut(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: Component, args: [{
                selector: 'suka-search',
                template: `
  <div
    class="search"
    [ngClass]="{
      'skeleton': skeleton,
      'toolbar-search': toolbar,
      'toolbar-search--active': toolbar && active
    }"
    role="search"
  >
    <label class="label" [for]="id">{{label}}</label>

    <div *ngIf="skeleton; else enableInput" class="search-input"></div>
    <ng-template #enableInput>
      <input
        #input
        *ngIf="!toolbar || active || value !== ''"
        class="search-input"
        [type]="tableSearch || !toolbar ? 'text' : 'search'"
        role="search"
        [id]="id"
        [value]="value"
        [autocomplete]="autocomplete"
        [placeholder]="placeholder"
        [disabled]="disabled"
        [required]="required"
        (input)="onSearch($event.target.value)"/>
      <button *ngIf="!tableSearch && toolbar" class="toolbar-search__btn" (click)="openSearch()">
        <suka-icon icon="search"></suka-icon>
      </button>
      <suka-icon icon="search"  *ngIf="tableSearch || !toolbar" (click)="openSearch()" class="search-magnifier"></suka-icon>
    </ng-template>

    <button
      *ngIf="tableSearch || !toolbar"
      class="search-close"
      [ngClass]="{
        'search-close--hidden': !value || value.length === 0
      }"
      [title]="clearButtonTitle"
      [attr.aria-label]="clearButtonTitle"
      (click)="clearSearch()"
    >
      <suka-icon icon="x-circle"></suka-icon>
    </button>
  </div>
  `,
                providers: [
                    {
                        provide: NG_VALUE_ACCESSOR,
                        useExisting: Search,
                        multi: true
                    }
                ]
            }] }
];
/** @nocollapse */
Search.ctorParameters = () => [
    { type: ElementRef }
];
Search.propDecorators = {
    containerClass: [{ type: HostBinding, args: ['class.form-item',] }],
    disabled: [{ type: Input }],
    toolbar: [{ type: Input }],
    skeleton: [{ type: Input }],
    active: [{ type: Input }],
    tableSearch: [{ type: Input }],
    name: [{ type: Input }],
    id: [{ type: Input }],
    required: [{ type: Input }],
    value: [{ type: Input }],
    autocomplete: [{ type: Input }],
    label: [{ type: Input }],
    placeholder: [{ type: Input }],
    clearButtonTitle: [{ type: Input }],
    valueChange: [{ type: Output }],
    clear: [{ type: Output }],
    inputRef: [{ type: ViewChild, args: ['input', { static: false },] }],
    keyDown: [{ type: HostListener, args: ['keydown', ['$event'],] }],
    focusOut: [{ type: HostListener, args: ['focusout', ['$event'],] }]
};
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
 */
class SearchModule {
}
SearchModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    Search
                ],
                exports: [
                    Search
                ],
                imports: [
                    FormsModule,
                    CommonModule,
                    IconModule,
                ]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class TabItem {
    constructor() {
        /**
         * Set to `true` to activate the tab (display it).
         */
        this.active = false;
        /**
         * Callback when the tab is selected.
         */
        this.selected = new EventEmitter();
    }
    /**
     * @return {?}
     */
    ngOnChanges() {
        if (this.active === true) {
            this.selected.emit(this.title);
        }
    }
}
TabItem.decorators = [
    { type: Component, args: [{
                selector: 'suka-tab',
                template: `
    <div [hidden]="!active" class="tabs__tab-item">
      <ng-content></ng-content>
    </div>
  `
            }] }
];
TabItem.propDecorators = {
    title: [{ type: Input }],
    active: [{ type: Input }],
    selected: [{ type: Output }]
};
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;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class Tabs {
    constructor() {
        /**
         * Set to `true` to fit tabs to container.
         */
        this.fitted = false;
    }
    /**
     * @return {?}
     */
    ngAfterContentInit() {
        /** @type {?} */
        const activeTabs = this.tabs.filter((/**
         * @param {?} tab
         * @return {?}
         */
        (tab) => tab.active));
        if (activeTabs.length === 0) {
            this.selectTab(this.tabs.first);
        }
    }
    /**
     * Selects a particular tab and activates it.
     * @param {?} tabItem
     * @return {?}
     */
    selectTab(tabItem) {
        this.tabs.toArray().forEach((/**
         * @param {?} tab
         * @return {?}
         */
        tab => tab.active = false));
        tabItem.active = true;
        tabItem.ngOnChanges();
    }
}
Tabs.decorators = [
    { type: Component, args: [{
                selector: 'suka-tabs',
                template: `
    <ul class="tabs">
      <li
        *ngFor="let tab of tabs"
        (click)="selectTab(tab)"
        [class.tabs__tab-container--selected]="tab.active"
        class="tabs__tab-container"
      >
        <button class="tabs__tab" type="button" role="tab">
          <span class="tabs__title">{{tab.title}}</span>
        </button>
      </li>
    </ul>
    <ng-content></ng-content>
  `
            }] }
];
Tabs.propDecorators = {
    fitted: [{ type: HostBinding, args: ['class.tabs-fitted',] }, { type: Input }],
    tabs: [{ type: ContentChildren, args: [TabItem,] }]
};
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
 */
class TabsModule {
}
TabsModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    Tabs,
                    TabItem,
                ],
                exports: [
                    Tabs,
                    TabItem,
                ],
                imports: [
                    CommonModule
                ]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class TooltipContainer {
    constructor() {
        this.renderMethod = 'component';
        this.position = 'bottom';
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        if (typeof this.content === 'string') {
            this.renderMethod = 'text';
        }
        if (this.content instanceof TemplateRef) {
            this.renderMethod = 'template';
        }
    }
}
TooltipContainer.decorators = [
    { type: Component, args: [{
                selector: 'suka-tooltip',
                template: `
    <div @tooltip class="tooltip tooltip-{{position}}">
      <span class="tooltip__caret"></span>
      <ng-container [ngSwitch]="renderMethod">
        <div *ngSwitchCase="'text'" [innerHTML]="content"></div>
        <ng-container *ngSwitchCase="'template'">
          <ng-container *ngTemplateOutlet="content"></ng-container>
        </ng-container>
        <ng-container *ngSwitchCase="'component'">
          <ng-container *ngComponentOutlet="content"></ng-container>
        </ng-container>
      </ng-container>
    </div>`,
                animations: [
                    trigger('tooltip', [
                        transition(':enter', [
                            style({ opacity: 0 }),
                            animate('0.2s ease-in', style({ opacity: 1 })),
                        ]),
                        transition(':leave', [
                            animate(200, style({ opacity: 0 })),
                        ]),
                    ]),
                ]
            }] }
];
TooltipContainer.propDecorators = {
    content: [{ type: Input }],
    position: [{ type: Input }]
};
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 {?} */
const 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,
    }
};
class Tooltip {
    /**
     * @param {?} overlay
     * @param {?} overlayPositionBuilder
     * @param {?} elementRef
     */
    constructor(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 {?}
     */
    ngOnInit() {
        /** @type {?} */
        const positionStrategy = this.overlayPositionBuilder
            .flexibleConnectedTo(this.elementRef)
            .withPositions([(/** @type {?} */ (positions[this.position]))]);
        this.overlayRef = this.overlay.create({
            positionStrategy,
            scrollStrategy: this.overlay.scrollStrategies.close(),
        });
    }
    /**
     * @private
     * @return {?}
     */
    show() {
        this.open = true;
        /** @type {?} */
        const tooltipRef = this.overlayRef.attach(new ComponentPortal(TooltipContainer));
        tooltipRef.instance.content = this.content;
        tooltipRef.instance.position = this.position;
    }
    /**
     * @private
     * @return {?}
     */
    hide() {
        this.open = false;
        this.overlayRef.detach();
    }
    /**
     * @return {?}
     */
    onMouseEnter() {
        if (this.trigger === 'hover') {
            this.show();
        }
    }
    /**
     * @return {?}
     */
    onMouseOut() {
        if (this.trigger === 'hover') {
            this.hide();
        }
    }
    /**
     * @return {?}
     */
    onClick() {
        if (this.trigger === 'click') {
            this.open ? this.hide() : this.show();
            if (this.duration) {
                setTimeout((/**
                 * @return {?}
                 */
                () => {
                    this.hide();
                }), this.duration);
            }
        }
    }
}
Tooltip.decorators = [
    { type: Directive, args: [{ selector: '[sukaTooltip]' },] }
];
/** @nocollapse */
Tooltip.ctorParameters = () => [
    { type: Overlay },
    { type: OverlayPositionBuilder },
    { type: ElementRef }
];
Tooltip.propDecorators = {
    content: [{ type: Input, args: ['sukaTooltip',] }],
    trigger: [{ type: Input, args: ['tooltipTrigger',] }],
    position: [{ type: Input, args: ['tooltipPosition',] }],
    duration: [{ type: Input, args: ['tooltipDuration',] }],
    onMouseEnter: [{ type: HostListener, args: ['mouseenter',] }],
    onMouseOut: [{ type: HostListener, args: ['mouseout',] }],
    onClick: [{ type: HostListener, args: ['click',] }]
};
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
 */
class TooltipModule {
}
TooltipModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    TooltipContainer,
                    Tooltip,
                ],
                exports: [
                    TooltipContainer,
                    Tooltip,
                ],
                imports: [
                    CommonModule,
                    OverlayModule
                ],
                entryComponents: [
                    TooltipContainer
                ]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
const ɵ0 = /**
 * @param {?} iconDef
 * @return {?}
 */
iconDef => iconDef.name === 'arrow-right';
/** @type {?} */
const arrowImg = iconDefs.find((ɵ0)).template;
const ɵ1 = /**
 * @param {?} iconDef
 * @return {?}
 */
iconDef => iconDef.name === 'external-link';
/** @type {?} */
const externalImg = iconDefs.find((ɵ1)).template;
class Link {
    /**
     * @param {?} elementRef
     * @param {?} renderer
     * @param {?} document
     */
    constructor(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;
    }
    /**
     * Set to `true` to disable the link.
     * @param {?} disabled
     * @return {?}
     */
    set disabled(disabled) {
        this._disabled = disabled;
        this.tabindex = this.disabled ? -1 : null;
    }
    /**
     * @return {?}
     */
    get disabled() {
        return this._disabled;
    }
    /**
     * Set to `true` to display an icon describing an external link (going to a new page)
     * @param {?} external
     * @return {?}
     */
    set external(external) {
        this._external = external;
        this.target = this.external ? '_blank' : null;
        this.ref = this.external ? 'noopener' : null;
    }
    /**
     * @return {?}
     */
    get external() {
        return this._external;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        if (this.arrow || this.external) {
            /** @type {?} */
            const 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: Directive, args: [{
                selector: '[sukaLink]'
            },] }
];
/** @nocollapse */
Link.ctorParameters = () => [
    { type: ElementRef },
    { type: Renderer2 },
    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
];
Link.propDecorators = {
    baseClass: [{ type: HostBinding, args: ['class.link',] }],
    tabindex: [{ type: HostBinding, args: ['attr.tabindex',] }],
    target: [{ type: HostBinding, args: ['attr.target',] }],
    ref: [{ type: HostBinding, args: ['attr.ref',] }],
    disabled: [{ type: Input }, { type: HostBinding, args: ['attr.aria-disabled',] }, { type: HostBinding, args: ['class.link--disabled',] }],
    arrow: [{ type: HostBinding, args: ['class.link--arrow',] }, { type: Input }],
    external: [{ type: Input }, { type: HostBinding, args: ['class.link--external',] }]
};
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
 */
class LinkModule {
}
LinkModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    Link
                ],
                exports: [
                    Link
                ],
                imports: [
                    CommonModule
                ]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
// tslint:disable-next-line: component-class-suffix
class InputGroup {
    constructor() {
        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 {?}
     */
    isTemplate(value) {
        return value instanceof TemplateRef;
    }
}
InputGroup.decorators = [
    { type: Component, args: [{
                selector: 'suka-input-group',
                template: `
    <label *ngIf="label" class="label">
      <ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
      <ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
    </label>
    <div *ngIf="helperText" class="form__helper-text">
      <ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
      <ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
    </div>
    <div class="input-group-wrapper">
      <div
        class="input-group-content"
        [ngClass]="{
          'input-group-content--condensed': condensed
        }"
        [attr.data-invalid]="(invalid ? true : null)"
      >
        <ng-content></ng-content>
      </div>
      <div *ngIf="invalid" class="form-requirement">
        <ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
        <ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
      </div>
    </div>
  `
            }] }
];
InputGroup.propDecorators = {
    containerClass: [{ type: HostBinding, args: ['class.form-item',] }],
    invalid: [{ type: Input }],
    label: [{ type: Input }],
    helperText: [{ type: Input }],
    invalidText: [{ type: Input }],
    condensed: [{ type: Input }]
};
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
 */
class InputGroupItem {
    constructor() {
        this.type = 'default';
        this.baseClass = true;
        this.auto = false;
        this.full = false;
    }
    /**
     * @return {?}
     */
    ngOnChanges() {
        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: Directive, args: [{
                selector: '[sukaInputGroupItem]'
            },] }
];
InputGroupItem.propDecorators = {
    type: [{ type: Input, args: ['sukaInputGroupItem',] }],
    baseClass: [{ type: HostBinding, args: ['class.input-group__item',] }],
    auto: [{ type: HostBinding, args: ['class.input-group__item--auto',] }],
    full: [{ type: HostBinding, args: ['class.input-group__item--full',] }]
};
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
 */
class InputGroupModule {
}
InputGroupModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    InputGroup,
                    InputGroupItem,
                ],
                exports: [
                    InputGroup,
                    InputGroupItem,
                ],
                imports: [
                    CommonModule,
                ]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class ModalRef {
    /**
     * @param {?} overlayRef
     */
    constructor(overlayRef) {
        this.overlayRef = overlayRef;
        this._beforeClose = new Subject();
        this._afterClosed = new Subject();
    }
    /**
     * @param {?=} data
     * @return {?}
     */
    close(data) {
        this._result = data;
        // Listen for animation 'start' events
        this.componentInstance.animationStateChanged.pipe(filter((/**
         * @param {?} event
         * @return {?}
         */
        event => event.phaseName === 'start')), take(1)).subscribe((/**
         * @return {?}
         */
        () => {
            this._beforeClose.next(this._result);
            this._beforeClose.complete();
            this.overlayRef.detachBackdrop();
        }));
        // Listen for animation 'done' events
        this.componentInstance.animationStateChanged.pipe(filter((/**
         * @param {?} event
         * @return {?}
         */
        event => event.phaseName === 'done' && event.toState === 'leave')), take(1)).subscribe((/**
         * @return {?}
         */
        () => {
            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 {?}
     */
    afterClosed() {
        return this._afterClosed.asObservable();
    }
    /**
     * @return {?}
     */
    beforeClose() {
        return this._beforeClose.asObservable();
    }
}
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 {?} */
const MODAL_CONTENT_DATA = new InjectionToken('MODAL_CONTENT_DATA');

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/** @type {?} */
const ESCAPE_KEY = 27;
/** @type {?} */
const MODAL_ANIMATION_TIMINGS = '200ms cubic-bezier(0.64, 0, 0.35, 1)';
class ModalContainer {
    /**
     * @param {?} dialogRef
     * @param {?} content
     */
    constructor(dialogRef, content) {
        this.dialogRef = dialogRef;
        this.content = content;
        this.animationState = 'enter';
        this.animationStateChanged = new EventEmitter();
        this.showFooter = false;
        this.baseClass = true;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        if (this.content.actions && this.content.actions.length > 0) {
            this.showFooter = true;
            this.primaryActions = this.content.actions.filter((/**
             * @param {?} action
             * @return {?}
             */
            (action) => action.type === 'primary'));
            this.secondaryActions = this.content.actions.filter((/**
             * @param {?} action
             * @return {?}
             */
            (action) => action.type === 'secondary'));
        }
    }
    /**
     * @param {?} value
     * @return {?}
     */
    isTemplate(value) {
        return value instanceof TemplateRef;
    }
    /**
     * @param {?=} event
     * @return {?}
     */
    onClose(event) {
        this.dialogRef.close('cancel');
    }
    /**
     * @param {?} tag
     * @return {?}
     */
    onAction(tag) {
        this.dialogRef.close(tag);
    }
    /**
     * @param {?} event
     * @return {?}
     */
    handleKeydown(event) {
        // tslint:disable-next-line: deprecation
        if (event.keyCode === ESCAPE_KEY) {
            this.dialogRef.close('cancel');
        }
    }
    /**
     * @param {?} event
     * @return {?}
     */
    onAnimationStart(event) {
        this.animationStateChanged.emit(event);
    }
    /**
     * @param {?} event
     * @return {?}
     */
    onAnimationDone(event) {
        this.animationStateChanged.emit(event);
    }
    /**
     * @return {?}
     */
    startExitAnimation() {
        this.animationState = 'leave';
    }
    /**
     * @param {?} $event
     * @return {?}
     */
    closeModal($event) {
        this.dialogRef.close($event);
    }
}
ModalContainer.decorators = [
    { type: Component, args: [{
                selector: 'suka-modal',
                template: `
    <div class="modal"
      [@slideContent]="animationState"
      (@slideContent.start)="onAnimationStart($event)"
      (@slideContent.done)="onAnimationDone($event)"
      cdkTrapFocus
    >
      <div class="modal__header">
        <h5>
          <ng-container *ngIf="!isTemplate(content.title)">{{content.title}}</ng-container>
          <ng-template *ngIf="isTemplate(content.title)" [ngTemplateOutlet]="content.title"></ng-template>
        </h5>
        <button
          *ngIf="content.closeButton"
          sukaButton="plain"
          (click)="onClose($event)"
        >
          <suka-icon icon="x"></suka-icon>
        </button>
      </div>
      <div class="modal__content">
        <ng-container *ngIf="!isTemplate(content.body)">{{content.body}}</ng-container>
        <ng-container *ngIf="isTemplate(content.body)">
          <ng-container
            *ngTemplateOutlet="content.body; context: {closeModal: closeModal.bind(this)}"
          ></ng-container>
        </ng-container>
      </div>
      <div class="modal__footer" *ngIf="showFooter">
        <suka-button-group>
          <button
            *ngFor="let secondaryAction of secondaryActions"
            sukaButton="plain"
            (click)="onAction(secondaryAction.tag)"
          >
            {{secondaryAction.label}}
          </button>
          <button
            *ngFor="let primaryAction of primaryActions"
            sukaButton="primary"
            (click)="onAction(primaryAction.tag)"
          >
            {{primaryAction.label}}
          </button>
        </suka-button-group>
      </div>
    </div>
  `,
                animations: [
                    trigger('slideContent', [
                        state('void', style({ transform: 'translate3d(0, 20rem, 0)', opacity: 0 })),
                        state('enter', style({ transform: 'none', opacity: 1 })),
                        state('leave', style({ transform: 'translate3d(0, 20rem, 0)', opacity: 0 })),
                        transition('* => *', animate(MODAL_ANIMATION_TIMINGS)),
                    ])
                ]
            }] }
];
/** @nocollapse */
ModalContainer.ctorParameters = () => [
    { type: ModalRef },
    { type: undefined, decorators: [{ type: Inject, args: [MODAL_CONTENT_DATA,] }] }
];
ModalContainer.propDecorators = {
    baseClass: [{ type: HostBinding, args: ['class.modal--default',] }],
    handleKeydown: [{ type: HostListener, args: ['document:keydown', ['$event'],] }]
};
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 {?} */
const DEFAULT_CONFIG = {
    closeOnBackdropClick: true,
    hasBackdrop: true,
    backdropClass: 'backdrop--dark',
    panelClass: 'modal--default',
    content: null
};
class ModalService {
    /**
     * @param {?} injector
     * @param {?} overlay
     */
    constructor(injector, overlay) {
        this.injector = injector;
        this.overlay = overlay;
    }
    /**
     * @param {?=} config
     * @return {?}
     */
    open(config = {}) {
        // Override default configuration
        /** @type {?} */
        const dialogConfig = Object.assign({}, DEFAULT_CONFIG, config);
        // Returns an OverlayRef which is a PortalHost
        /** @type {?} */
        const overlayRef = this.createOverlay(dialogConfig);
        // Instantiate remote control
        /** @type {?} */
        const modalRef = new ModalRef(overlayRef);
        /** @type {?} */
        const overlayComponent = this.attachModalContainer(overlayRef, dialogConfig, modalRef);
        modalRef.componentInstance = overlayComponent;
        if (dialogConfig.closeOnBackdropClick) {
            overlayRef.backdropClick().subscribe((/**
             * @param {?} _
             * @return {?}
             */
            _ => modalRef.close('cancel')));
        }
        return modalRef;
    }
    /**
     * @private
     * @param {?} config
     * @return {?}
     */
    createOverlay(config) {
        /** @type {?} */
        const overlayConfig = this.getOverlayConfig(config);
        return this.overlay.create(overlayConfig);
    }
    /**
     * @private
     * @param {?} overlayRef
     * @param {?} config
     * @param {?} modalRef
     * @return {?}
     */
    attachModalContainer(overlayRef, config, modalRef) {
        /** @type {?} */
        const injector = this.createInjector(config, modalRef);
        /** @type {?} */
        const containerPortal = new ComponentPortal(ModalContainer, null, injector);
        /** @type {?} */
        const containerRef = overlayRef.attach(containerPortal);
        return containerRef.instance;
    }
    /**
     * @private
     * @param {?} config
     * @param {?} modalRef
     * @return {?}
     */
    createInjector(config, modalRef) {
        /** @type {?} */
        const injectionTokens = new WeakMap();
        injectionTokens.set(ModalRef, modalRef);
        injectionTokens.set(MODAL_CONTENT_DATA, config.content);
        return new PortalInjector(this.injector, injectionTokens);
    }
    /**
     * @private
     * @param {?} config
     * @return {?}
     */
    getOverlayConfig(config) {
        /** @type {?} */
        const positionStrategy = this.overlay.position()
            .global()
            .centerHorizontally()
            .centerVertically();
        /** @type {?} */
        const overlayConfig = new OverlayConfig({
            hasBackdrop: config.hasBackdrop,
            backdropClass: config.backdropClass,
            panelClass: config.panelClass,
            scrollStrategy: this.overlay.scrollStrategies.block(),
            positionStrategy
        });
        return overlayConfig;
    }
}
ModalService.decorators = [
    { type: Injectable }
];
/** @nocollapse */
ModalService.ctorParameters = () => [
    { type: Injector },
    { type: Overlay }
];
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 {?} */
const PRIMARY_ACTION_TAG = 'primaryAction';
/** @type {?} */
const 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.
 */
class ModalDirective {
    /**
     * @param {?} modalService
     */
    constructor(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 EventEmitter();
        /**
         * Callback when the secondary action is triggered.
         */
        this.secondaryAction = new EventEmitter();
        /**
         * Callback when the primary action is triggered.
         */
        this.primaryAction = new EventEmitter();
    }
    /**
     * @return {?}
     */
    onClick() {
        this.openModal();
    }
    /**
     * Opens the modal.
     * @private
     * @return {?}
     */
    openModal() {
        /** @type {?} */
        const 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 {?} */
        const modalRef = this.modalService.open(modalConfig);
        modalRef.afterClosed().subscribe((/**
         * @param {?} result
         * @return {?}
         */
        (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: Directive, args: [{
                selector: '[sukaModal]'
            },] }
];
/** @nocollapse */
ModalDirective.ctorParameters = () => [
    { type: ModalService }
];
ModalDirective.propDecorators = {
    closeButton: [{ type: Input, args: ['modalCloseButton',] }],
    title: [{ type: Input, args: ['modalTitle',] }],
    body: [{ type: Input, args: ['modalBody',] }],
    closeOnBackdropClick: [{ type: Input, args: ['modalCloseOnBackdropClick',] }],
    close: [{ type: Output, args: ['modalClose',] }],
    secondaryActionLabel: [{ type: Input, args: ['modalSecondaryActionLabel',] }],
    secondaryAction: [{ type: Output, args: ['modalSecondaryAction',] }],
    primaryActionLabel: [{ type: Input, args: ['modalPrimaryActionLabel',] }],
    primaryAction: [{ type: Output, args: ['modalPrimaryAction',] }],
    onClick: [{ type: HostListener, args: ['click',] }]
};
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
 */
class ModalModule {
}
ModalModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    ModalContainer,
                    ModalDirective,
                ],
                exports: [
                    ModalContainer,
                    ModalDirective,
                ],
                imports: [
                    CommonModule,
                    OverlayModule,
                    ButtonModule,
                    IconModule,
                ],
                entryComponents: [
                    ModalContainer
                ],
                providers: [
                    ModalService,
                ],
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/** @type {?} */
const POPOVER_CONTENT_DATA = new InjectionToken('POPOVER_CONTENT_DATA');

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class PopoverRef {
    /**
     * @param {?} overlayRef
     */
    constructor(overlayRef) {
        this.overlayRef = overlayRef;
        this._beforeClose = new Subject();
        this._afterClosed = new Subject();
    }
    /**
     * @param {?=} data
     * @return {?}
     */
    close(data) {
        this._result = data;
        // Listen for animation 'start' events
        this.componentInstance.animationStateChanged.pipe(filter((/**
         * @param {?} event
         * @return {?}
         */
        event => event.phaseName === 'start')), take(1)).subscribe((/**
         * @return {?}
         */
        () => {
            this._beforeClose.next(this._result);
            this._beforeClose.complete();
            this.overlayRef.detachBackdrop();
        }));
        // Listen for animation 'done' events
        this.componentInstance.animationStateChanged.pipe(filter((/**
         * @param {?} event
         * @return {?}
         */
        event => event.phaseName === 'done' && event.toState === 'leave')), take(1)).subscribe((/**
         * @return {?}
         */
        () => {
            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 {?}
     */
    afterClosed() {
        return this._afterClosed.asObservable();
    }
    /**
     * @return {?}
     */
    beforeClose() {
        return this._beforeClose.asObservable();
    }
}
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 {?} */
const ESCAPE_KEY$1 = 27;
/** @type {?} */
const POPOVER_ANIMATION_TIMINGS = '200ms cubic-bezier(0.64, 0, 0.35, 1)';
class PopoverContainer {
    /**
     * @param {?} popoverRef
     * @param {?} content
     */
    constructor(popoverRef, content) {
        this.popoverRef = popoverRef;
        this.content = content;
        this.animationState = 'enter';
        this.animationStateChanged = new EventEmitter();
        this.renderMethod = 'component';
        this.position = 'bottom';
        this.sectioned = false;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        if (typeof this.content.body === 'string') {
            this.renderMethod = 'text';
        }
        if (this.content.body instanceof TemplateRef) {
            this.renderMethod = 'template';
        }
        if (this.content.sectioned) {
            this.sectioned = true;
        }
    }
    /**
     * @param {?} $event
     * @return {?}
     */
    closePopover($event) {
        this.popoverRef.close($event);
    }
    /**
     * @param {?} event
     * @return {?}
     */
    handleKeydown(event) {
        // tslint:disable-next-line: deprecation
        if (event.keyCode === ESCAPE_KEY$1) {
            this.popoverRef.close();
        }
    }
    /**
     * @param {?} event
     * @return {?}
     */
    onAnimationStart(event) {
        this.animationStateChanged.emit(event);
    }
    /**
     * @param {?} event
     * @return {?}
     */
    onAnimationDone(event) {
        this.animationStateChanged.emit(event);
    }
    /**
     * @return {?}
     */
    startExitAnimation() {
        this.animationState = 'leave';
    }
}
PopoverContainer.decorators = [
    { type: Component, args: [{
                selector: 'suka-popover',
                template: `
    <div
      [@popover]="animationState"
      (@popover.start)="onAnimationStart($event)"
      (@popover.done)="onAnimationDone($event)"
      cdkTrapFocus
      class="popover popover-{{position}}"
      role="dialog"
    >
      <suka-popover-section
        *ngIf="(sectioned !== false)
        else elseTpl"
      >
        <ng-container *ngTemplateOutlet="elseTpl"></ng-container>
      </suka-popover-section>
    </div>

    <ng-template #elseTpl>
      <ng-container [ngSwitch]="renderMethod">
        <div *ngSwitchCase="'text'" [innerHTML]="content.body"></div>
        <ng-container *ngSwitchCase="'template'">
          <ng-container *ngTemplateOutlet="content.body; context: {closePopover: closePopover.bind(this)}"></ng-container>
        </ng-container>
        <ng-container *ngSwitchCase="'component'">
          <ng-container *ngComponentOutlet="content.body"></ng-container>
        </ng-container>
      </ng-container>
    </ng-template>
    `,
                animations: [
                    trigger('popover', [
                        state('void', style({ transform: 'scale(.9)', opacity: 0 })),
                        state('enter', style({ transform: 'none', opacity: 1 })),
                        state('leave', style({ transform: 'scale(.8)', opacity: 0 })),
                        transition('* => *', animate(POPOVER_ANIMATION_TIMINGS)),
                    ]),
                ]
            }] }
];
/** @nocollapse */
PopoverContainer.ctorParameters = () => [
    { type: PopoverRef },
    { type: undefined, decorators: [{ type: Inject, args: [POPOVER_CONTENT_DATA,] }] }
];
PopoverContainer.propDecorators = {
    position: [{ type: Input }],
    sectioned: [{ type: Input }],
    handleKeydown: [{ type: HostListener, args: ['document:keydown', ['$event'],] }]
};
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 {?} */
const positions$1 = {
    bottom: {
        originY: 'bottom',
        overlayY: 'top',
        offsetY: 4,
    },
    top: {
        originY: 'top',
        overlayY: 'bottom',
        offsetY: -4,
    }
};
/** @type {?} */
const 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 {?} */
const DEFAULT_CONFIG$1 = {
    content: null,
    position: 'bottom',
    alignment: 'left',
};
class PopoverService {
    /**
     * @param {?} injector
     * @param {?} overlay
     * @param {?} overlayPositionBuilder
     */
    constructor(injector, overlay, overlayPositionBuilder) {
        this.injector = injector;
        this.overlay = overlay;
        this.overlayPositionBuilder = overlayPositionBuilder;
    }
    /**
     * @param {?=} config
     * @param {?=} target
     * @return {?}
     */
    open(config = DEFAULT_CONFIG$1, target) {
        // Override default configuration
        /** @type {?} */
        const popoverConfig = Object.assign({}, DEFAULT_CONFIG$1, config);
        // Returns an OverlayRef which is a PortalHost
        /** @type {?} */
        const overlayRef = this.createOverlay(popoverConfig, target);
        // Instantiate remote control
        /** @type {?} */
        const popoverRef = new PopoverRef(overlayRef);
        /** @type {?} */
        const overlayComponent = this.attachPopoverContainer(overlayRef, popoverConfig, popoverRef);
        popoverRef.componentInstance = overlayComponent;
        overlayRef.backdropClick().subscribe((/**
         * @param {?} _
         * @return {?}
         */
        _ => popoverRef.close()));
        return popoverRef;
    }
    /**
     * @private
     * @param {?} config
     * @param {?} target
     * @return {?}
     */
    createOverlay(config, target) {
        /** @type {?} */
        const overlayConfig = this.getOverlayConfig(config, target);
        return this.overlay.create(overlayConfig);
    }
    /**
     * @private
     * @param {?} overlayRef
     * @param {?} config
     * @param {?} popoverRef
     * @return {?}
     */
    attachPopoverContainer(overlayRef, config, popoverRef) {
        /** @type {?} */
        const injector = this.createInjector(config, popoverRef);
        /** @type {?} */
        const containerPortal = new ComponentPortal(PopoverContainer, null, injector);
        /** @type {?} */
        const containerRef = overlayRef.attach(containerPortal);
        return containerRef.instance;
    }
    /**
     * @private
     * @param {?} config
     * @param {?} popoverRef
     * @return {?}
     */
    createInjector(config, popoverRef) {
        /** @type {?} */
        const injectionTokens = new WeakMap();
        injectionTokens.set(PopoverRef, popoverRef);
        injectionTokens.set(POPOVER_CONTENT_DATA, config.content);
        return new PortalInjector(this.injector, injectionTokens);
    }
    /**
     * @private
     * @param {?} config
     * @param {?} target
     * @return {?}
     */
    getOverlayConfig(config, target) {
        /** @type {?} */
        const positionStrategy = this.overlayPositionBuilder
            .flexibleConnectedTo(target)
            .withPositions([(/** @type {?} */ (Object.assign({}, positions$1[config.position], alignments[config.alignment])))]);
        /** @type {?} */
        const overlayConfig = new OverlayConfig({
            hasBackdrop: true,
            backdropClass: 'cdk-overlay-transparent-backdrop',
            scrollStrategy: this.overlay.scrollStrategies.reposition(),
            positionStrategy
        });
        return overlayConfig;
    }
}
PopoverService.decorators = [
    { type: Injectable }
];
/** @nocollapse */
PopoverService.ctorParameters = () => [
    { type: Injector },
    { type: Overlay },
    { type: OverlayPositionBuilder }
];
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
 */
class Popover {
    /**
     * @param {?} popoverService
     * @param {?} elementRef
     */
    constructor(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 {?}
     */
    show() {
        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 {?}
         */
        (result) => {
            this.open = false;
        }));
    }
    /**
     * @return {?}
     */
    onClick() {
        if (!this.open) {
            this.show();
        }
    }
}
Popover.decorators = [
    { type: Directive, args: [{ selector: '[sukaPopover]' },] }
];
/** @nocollapse */
Popover.ctorParameters = () => [
    { type: PopoverService },
    { type: ElementRef }
];
Popover.propDecorators = {
    body: [{ type: Input, args: ['sukaPopover',] }],
    position: [{ type: Input, args: ['popoverPosition',] }],
    alignment: [{ type: Input, args: ['popoverAlignment',] }],
    sectioned: [{ type: Input, args: ['popoverSectioned',] }],
    onClick: [{ type: HostListener, args: ['click',] }]
};
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
 */
class PopoverSection {
    constructor() {
        this.baseClass = true;
    }
}
PopoverSection.decorators = [
    { type: Component, args: [{
                selector: 'suka-popover-section',
                template: `
    <ng-content></ng-content>
  `
            }] }
];
PopoverSection.propDecorators = {
    baseClass: [{ type: HostBinding, args: ['class.popover__section',] }]
};
if (false) {
    /** @type {?} */
    PopoverSection.prototype.baseClass;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class PopoverActionList {
    constructor() {
        this.baseClass = true;
    }
}
PopoverActionList.decorators = [
    { type: Component, args: [{
                selector: 'suka-popover-action-list',
                template: `
    <ng-content></ng-content>
  `
            }] }
];
PopoverActionList.propDecorators = {
    baseClass: [{ type: HostBinding, args: ['class.popover__action-list',] }]
};
if (false) {
    /** @type {?} */
    PopoverActionList.prototype.baseClass;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class PopoverActionItem {
    constructor() {
        this.baseClass = true;
        this.destructive = false;
        this.selected = new EventEmitter();
    }
    /**
     * @param {?} $event
     * @return {?}
     */
    onClick($event) {
        this.selected.emit($event);
    }
}
PopoverActionItem.decorators = [
    { type: Component, args: [{
                selector: 'suka-popover-action-item',
                template: `
    <button type="button" (click)="onClick($event)">
      <div class="action-list__item__content">
        <suka-icon *ngIf="icon" [icon]="icon" class="popover__icon"></suka-icon>
        <ng-content></ng-content>
      </div>
    </button>
  `
            }] }
];
PopoverActionItem.propDecorators = {
    baseClass: [{ type: HostBinding, args: ['class.popover__action-list__item',] }],
    destructive: [{ type: HostBinding, args: ['class.action-list__item--destructive',] }, { type: Input }],
    icon: [{ type: Input }],
    selected: [{ type: Output }]
};
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
 */
class PopoverModule {
}
PopoverModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    PopoverContainer,
                    PopoverSection,
                    PopoverActionList,
                    PopoverActionItem,
                    Popover,
                ],
                exports: [
                    PopoverContainer,
                    PopoverSection,
                    PopoverActionList,
                    PopoverActionItem,
                    Popover,
                ],
                imports: [
                    CommonModule,
                    OverlayModule,
                    IconModule,
                ],
                entryComponents: [
                    PopoverContainer,
                ],
                providers: [
                    PopoverService,
                ],
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class Stack {
    constructor() {
        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: Component, args: [{
                selector: 'suka-stack',
                template: `
    <div
      class="
        stack__wrapper
        stack--spacing-{{spacing}}
        stack--distribution-{{distribution}}
        stack--alignment-{{alignment}}
      "
      [ngClass]="{
        'stack--vertical': vertical,
        'stack--no-wrap': !wrap
      }"
    >
      <ng-content></ng-content>
    </div>
  `,
                encapsulation: ViewEncapsulation.None
            }] }
];
Stack.propDecorators = {
    baseClass: [{ type: HostBinding, args: ['class.stack',] }],
    vertical: [{ type: HostBinding, args: ['class.stack--vertical',] }, { type: Input }],
    spacing: [{ type: Input }],
    distribution: [{ type: Input }],
    alignment: [{ type: Input }],
    wrap: [{ type: Input }]
};
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
 */
class StackItem {
    constructor() {
        this.baseClass = true;
        /**
         * Set to `true` to make the `StackItem` fill the remaining horizontal space on the stack.
         */
        this.fill = false;
    }
}
StackItem.decorators = [
    { type: Directive, args: [{
                selector: '[sukaStackItem]'
            },] }
];
StackItem.propDecorators = {
    baseClass: [{ type: HostBinding, args: ['class.stack__item',] }],
    fill: [{ type: HostBinding, args: ['class.stack__item--fill',] }, { type: Input }]
};
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
 */
class StackModule {
}
StackModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    Stack,
                    StackItem,
                ],
                exports: [
                    Stack,
                    StackItem,
                ],
                imports: [
                    CommonModule,
                ]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class FormLayout {
    constructor() {
        this.baseClass = true;
    }
}
FormLayout.decorators = [
    { type: Component, args: [{
                selector: 'suka-form-layout',
                template: `
    <div class="form-layout__wrapper">
      <ng-content></ng-content>
    </div>
  `
            }] }
];
FormLayout.propDecorators = {
    baseClass: [{ type: HostBinding, args: ['class.form-layout',] }]
};
if (false) {
    /** @type {?} */
    FormLayout.prototype.baseClass;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class FormLayoutModule {
}
FormLayoutModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    FormLayout,
                ],
                exports: [
                    FormLayout,
                ],
                imports: [
                    CommonModule,
                ]
            },] }
];

/**
 * @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
 */
class SukaTable extends CdkTable {
    constructor() {
        super(...arguments);
        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';
    }
}
SukaTable.decorators = [
    { type: Component, args: [{
                selector: 'suka-table, table[suka-table]',
                exportAs: 'sukaTable',
                template: CDK_TABLE_TEMPLATE,
                providers: [{ provide: CdkTable, useExisting: SukaTable }],
                encapsulation: ViewEncapsulation.None,
                // See note on CdkTable for explanation on why this uses the default change detection strategy.
                changeDetection: ChangeDetectionStrategy.Default
            }] }
];
SukaTable.propDecorators = {
    baseClass: [{ type: HostBinding, args: ['class.suka-table',] }],
    fullWidth: [{ type: HostBinding, args: ['class.suka-table--full-width',] }, { type: Input }],
    hover: [{ type: HostBinding, args: ['class.suka-table--hover',] }, { type: Input }]
};
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.
 */
class SukaCellDef extends CdkCellDef {
}
SukaCellDef.decorators = [
    { type: Directive, args: [{
                selector: '[sukaCellDef]',
                providers: [{ provide: CdkCellDef, useExisting: SukaCellDef }]
            },] }
];
/**
 * Header cell definition for the suka-table.
 * Captures the template of a column's header cell and as well as cell-specific properties.
 */
class SukaHeaderCellDef extends CdkHeaderCellDef {
}
SukaHeaderCellDef.decorators = [
    { type: Directive, args: [{
                selector: '[sukaHeaderCellDef]',
                providers: [{ provide: CdkHeaderCellDef, useExisting: SukaHeaderCellDef }]
            },] }
];
/**
 * Footer cell definition for the suka-table.
 * Captures the template of a column's footer cell and as well as cell-specific properties.
 */
class SukaFooterCellDef extends CdkFooterCellDef {
}
SukaFooterCellDef.decorators = [
    { type: Directive, args: [{
                selector: '[sukaFooterCellDef]',
                providers: [{ provide: CdkFooterCellDef, useExisting: SukaFooterCellDef }]
            },] }
];
/**
 * Column definition for the suka-table.
 * Defines a set of cells available for a table column.
 */
class SukaColumnDef extends CdkColumnDef {
}
SukaColumnDef.decorators = [
    { type: Directive, args: [{
                selector: '[sukaColumnDef]',
                providers: [
                    { provide: CdkColumnDef, useExisting: SukaColumnDef },
                    { provide: 'SUKA_SORT_HEADER_COLUMN_DEF', useExisting: SukaColumnDef }
                ],
            },] }
];
SukaColumnDef.propDecorators = {
    name: [{ type: Input, args: ['sukaColumnDef',] }],
    sticky: [{ type: Input }],
    stickyEnd: [{ type: Input }]
};
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.
 */
class SukaHeaderCell extends CdkHeaderCell {
    /**
     * @param {?} columnDef
     * @param {?} elementRef
     */
    constructor(columnDef, elementRef) {
        super(columnDef, elementRef);
        elementRef.nativeElement.classList.add(`suka-column-${columnDef.cssClassFriendlyName}`);
    }
}
SukaHeaderCell.decorators = [
    { type: Directive, args: [{
                selector: 'suka-header-cell, th[suka-header-cell]',
                host: {
                    class: 'suka-header-cell',
                    role: 'columnheader',
                },
            },] }
];
/** @nocollapse */
SukaHeaderCell.ctorParameters = () => [
    { type: CdkColumnDef },
    { type: ElementRef }
];
/**
 * Footer cell template container that adds the right classes and role.
 */
class SukaFooterCell extends CdkFooterCell {
    /**
     * @param {?} columnDef
     * @param {?} elementRef
     */
    constructor(columnDef, elementRef) {
        super(columnDef, elementRef);
        elementRef.nativeElement.classList.add(`suka-column-${columnDef.cssClassFriendlyName}`);
    }
}
SukaFooterCell.decorators = [
    { type: Directive, args: [{
                selector: 'suka-footer-cell, td[suka-footer-cell]',
                host: {
                    class: 'suka-footer-cell',
                    role: 'gridcell',
                },
            },] }
];
/** @nocollapse */
SukaFooterCell.ctorParameters = () => [
    { type: CdkColumnDef },
    { type: ElementRef }
];
/**
 * Cell template container that adds the right classes and role.
 */
class SukaCell extends CdkCell {
    /**
     * @param {?} columnDef
     * @param {?} elementRef
     */
    constructor(columnDef, elementRef) {
        super(columnDef, elementRef);
        elementRef.nativeElement.classList.add(`suka-column-${columnDef.cssClassFriendlyName}`);
    }
}
SukaCell.decorators = [
    { type: Directive, args: [{
                selector: 'suka-cell, td[suka-cell]',
                host: {
                    class: 'suka-cell',
                    role: 'gridcell',
                },
            },] }
];
/** @nocollapse */
SukaCell.ctorParameters = () => [
    { type: CdkColumnDef },
    { type: ElementRef }
];

/**
 * @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.
 */
class SukaHeaderRowDef extends CdkHeaderRowDef {
}
SukaHeaderRowDef.decorators = [
    { type: Directive, args: [{
                selector: '[sukaHeaderRowDef]',
                providers: [{ provide: CdkHeaderRowDef, useExisting: SukaHeaderRowDef }],
                inputs: ['columns: sukaHeaderRowDef', 'sticky: sukaHeaderRowDefSticky'],
            },] }
];
/**
 * Footer row definition for the suka-table.
 * Captures the footer row's template and other footer properties such as the columns to display.
 */
class SukaFooterRowDef extends CdkFooterRowDef {
}
SukaFooterRowDef.decorators = [
    { type: Directive, args: [{
                selector: '[sukaFooterRowDef]',
                providers: [{ provide: CdkFooterRowDef, useExisting: SukaFooterRowDef }],
                inputs: ['columns: sukaFooterRowDef', 'sticky: sukaFooterRowDefSticky'],
            },] }
];
/**
 * 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
 */
class SukaRowDef extends CdkRowDef {
}
SukaRowDef.decorators = [
    { type: Directive, args: [{
                selector: '[sukaRowDef]',
                providers: [{ provide: CdkRowDef, useExisting: SukaRowDef }],
                inputs: ['columns: sukaRowDefColumns', 'when: sukaRowDefWhen'],
            },] }
];
/**
 * Footer template container that contains the cell outlet. Adds the right class and role.
 */
class SukaHeaderRow extends CdkHeaderRow {
    constructor() {
        super(...arguments);
        this.baseClass = true;
        this.role = 'row';
    }
}
SukaHeaderRow.decorators = [
    { type: Component, args: [{
                selector: 'suka-header-row, tr[suka-header-row]',
                template: 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: ChangeDetectionStrategy.Default,
                encapsulation: ViewEncapsulation.None,
                exportAs: 'sukaHeaderRow',
                providers: [{ provide: CdkHeaderRow, useExisting: SukaHeaderRow }]
            }] }
];
SukaHeaderRow.propDecorators = {
    baseClass: [{ type: HostBinding, args: ['class.suka-header-row',] }],
    role: [{ type: HostBinding, args: ['attr.role',] }]
};
if (false) {
    /** @type {?} */
    SukaHeaderRow.prototype.baseClass;
    /** @type {?} */
    SukaHeaderRow.prototype.role;
}
/**
 * Footer template container that contains the cell outlet. Adds the right class and role.
 */
class SukaFooterRow extends CdkFooterRow {
    constructor() {
        super(...arguments);
        this.baseClass = true;
        this.role = 'row';
    }
}
SukaFooterRow.decorators = [
    { type: Component, args: [{
                selector: 'suka-footer-row, tr[suka-footer-row]',
                template: 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: ChangeDetectionStrategy.Default,
                encapsulation: ViewEncapsulation.None,
                exportAs: 'sukaFooterRow',
                providers: [{ provide: CdkFooterRow, useExisting: SukaFooterRow }]
            }] }
];
SukaFooterRow.propDecorators = {
    baseClass: [{ type: HostBinding, args: ['class.suka-footer-row',] }],
    role: [{ type: HostBinding, args: ['attr.role',] }]
};
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.
 */
class SukaRow extends CdkRow {
    constructor() {
        super(...arguments);
        this.baseClass = true;
        this.role = 'row';
    }
}
SukaRow.decorators = [
    { type: Component, args: [{
                selector: 'suka-row, tr[suka-row]',
                template: 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: ChangeDetectionStrategy.Default,
                encapsulation: ViewEncapsulation.None,
                exportAs: 'sukaRow',
                providers: [{ provide: CdkRow, useExisting: SukaRow }]
            }] }
];
SukaRow.propDecorators = {
    baseClass: [{ type: HostBinding, args: ['class.suka-row',] }],
    role: [{ type: HostBinding, args: ['attr.role',] }]
};
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 {?} */
    const pageArray = [];
    /** @type {?} */
    const startingPosition = Math.max(currentPage - spacing, 1);
    /** @type {?} */
    const endPosition = Math.min(currentPage + spacing, pageNumber);
    for (let 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 {?} */
    const 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 {?}
 */
const DEFAULT_PAGE_SIZE = 50;
/**
 * Change event object that is emitted when the user selects a
 * different page size or navigates to another page.
 */
class 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.
 */
class Pagination {
    /**
     * @param {?} _changeDetectorRef
     */
    constructor(_changeDetectorRef) {
        this._changeDetectorRef = _changeDetectorRef;
        this.initialized = new 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 EventEmitter();
        /**
         * Displayed pages array
         */
        this._pagesArray = [];
        /**
         * Calculate the page range
         */
        this.getRangeLabel = (/**
         * @param {?} page
         * @param {?} pageSize
         * @param {?} length
         * @return {?}
         */
        (page, pageSize, length) => {
            if (length === 0 || pageSize === 0) {
                return `0 de ${length}`;
            }
            length = Math.max(length, 0);
            /** @type {?} */
            const startIndex = page * pageSize;
            // If the start index exceeds the list length, do not try and fix the end index to the end.
            /** @type {?} */
            const endIndex = startIndex < length ?
                Math.min(startIndex + pageSize, length) :
                startIndex + pageSize;
            return `${startIndex + 1} – ${endIndex} de ${length}`;
        });
    }
    /**
     * The zero-based page index of the displayed list of items. Defaulted to 0.
     * @return {?}
     */
    get pageIndex() { return this._pageIndex; }
    /**
     * @param {?} value
     * @return {?}
     */
    set pageIndex(value) {
        this._pageIndex = Math.max(coerceNumberProperty(value), 0);
        this._changeDetectorRef.markForCheck();
    }
    /**
     * The length of the total number of items that are being paginated. Defaulted to 0.
     * @return {?}
     */
    get length() { return this._length; }
    /**
     * @param {?} value
     * @return {?}
     */
    set length(value) {
        this._length = coerceNumberProperty(value);
        this._changeDetectorRef.markForCheck();
        this._updateDisplayedPagesArray();
    }
    /**
     * Number of items to display on a page. By default set to 20.
     * @return {?}
     */
    get pageSize() { return this._pageSize; }
    /**
     * @param {?} value
     * @return {?}
     */
    set pageSize(value) {
        this._pageSize = Math.max(coerceNumberProperty(value), 0);
        this._updateDisplayedPageSizeOptions();
        this._updateDisplayedPagesArray();
    }
    /**
     * The set of provided page size options to display to the user.
     * @return {?}
     */
    get pageSizeOptions() { return this._pageSizeOptions; }
    /**
     * @param {?} value
     * @return {?}
     */
    set pageSizeOptions(value) {
        this._pageSizeOptions = (value || []).map((/**
         * @param {?} p
         * @return {?}
         */
        p => coerceNumberProperty(p)));
        this._updateDisplayedPageSizeOptions();
    }
    /**
     * Whether to hide the page size selection UI from the user.
     * @return {?}
     */
    get hidePageSize() { return this._hidePageSize; }
    /**
     * @param {?} value
     * @return {?}
     */
    set hidePageSize(value) {
        this._hidePageSize = coerceBooleanProperty(value);
    }
    /**
     * Whether to show the first/last buttons UI to the user.
     * @return {?}
     */
    get showFirstLastButtons() { return this._showFirstLastButtons; }
    /**
     * @param {?} value
     * @return {?}
     */
    set showFirstLastButtons(value) {
        this._showFirstLastButtons = coerceBooleanProperty(value);
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this._initialized = true;
        this.initialized.next(true);
        this._updateDisplayedPageSizeOptions();
    }
    /**
     * Advances to the next page if it exists.
     * @return {?}
     */
    nextPage() {
        if (!this.hasNextPage()) {
            return;
        }
        /** @type {?} */
        const previousPageIndex = this.pageIndex;
        this.pageIndex++;
        this._updateDisplayedPagesArray();
        this._emitPageEvent(previousPageIndex);
    }
    /**
     * Move back to the previous page if it exists.
     * @return {?}
     */
    previousPage() {
        if (!this.hasPreviousPage()) {
            return;
        }
        /** @type {?} */
        const previousPageIndex = this.pageIndex;
        this.pageIndex--;
        this._updateDisplayedPagesArray();
        this._emitPageEvent(previousPageIndex);
    }
    /**
     * Move to the first page if not already there.
     * @return {?}
     */
    firstPage() {
        // hasPreviousPage being false implies at the start
        if (!this.hasPreviousPage()) {
            return;
        }
        /** @type {?} */
        const previousPageIndex = this.pageIndex;
        this.pageIndex = 0;
        this._updateDisplayedPagesArray();
        this._emitPageEvent(previousPageIndex);
    }
    /**
     * Move to the last page if not already there.
     * @return {?}
     */
    lastPage() {
        // hasNextPage being false implies at the end
        if (!this.hasNextPage()) {
            return;
        }
        /** @type {?} */
        const previousPageIndex = this.pageIndex;
        this.pageIndex = this.getNumberOfPages() - 1;
        this._updateDisplayedPagesArray();
        this._emitPageEvent(previousPageIndex);
    }
    /**
     * Move to an specific page.
     * @param {?} page
     * @return {?}
     */
    goToPage(page) {
        /** @type {?} */
        const previousPageIndex = this.pageIndex;
        this.pageIndex = page - 1;
        this._updateDisplayedPagesArray();
        this._emitPageEvent(previousPageIndex);
    }
    /**
     * Whether there is a previous page.
     * @return {?}
     */
    hasPreviousPage() {
        return this.pageIndex >= 1 && this.pageSize !== 0;
    }
    /**
     * Whether there is a next page.
     * @return {?}
     */
    hasNextPage() {
        /** @type {?} */
        const maxPageIndex = this.getNumberOfPages() - 1;
        return this.pageIndex < maxPageIndex && this.pageSize !== 0;
    }
    /**
     * Calculate the number of pages
     * @return {?}
     */
    getNumberOfPages() {
        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.
     * @param {?} pageSize
     * @return {?}
     */
    _changePageSize(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 {?} */
        const startIndex = this.pageIndex * this.pageSize;
        /** @type {?} */
        const 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.
     * @return {?}
     */
    _nextButtonsDisabled() {
        return this.disabled || !this.hasNextPage();
    }
    /**
     * Checks whether the buttons for going backwards should be disabled.
     * @return {?}
     */
    _previousButtonsDisabled() {
        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.
     * @private
     * @return {?}
     */
    _updateDisplayedPageSizeOptions() {
        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 {?}
         */
        (a, b) => a - b));
        this._changeDetectorRef.markForCheck();
    }
    /**
     * @private
     * @return {?}
     */
    _updateDisplayedPagesArray() {
        this._pagesArray = buildPaginationArray(this.getNumberOfPages(), this.pageIndex + 1, 3);
    }
    /**
     * Emits an event notifying that a change of the pagination's properties has been triggered.
     * @private
     * @param {?} previousPageIndex
     * @return {?}
     */
    _emitPageEvent(previousPageIndex) {
        this.page.emit({
            previousPageIndex,
            pageIndex: this.pageIndex,
            pageSize: this.pageSize,
            length: this.length
        });
    }
}
Pagination.decorators = [
    { type: Component, args: [{
                selector: 'suka-pagination',
                exportAs: 'sukaPagination',
                template: `
    <div class="suka-pagination-outer-container">
      <div class="suka-pagination-container">
        <div class="suka-pagination-results">
          Mostrando <span class="suka-pagination-result">{{getRangeLabel(pageIndex, pageSize, length)}}</span>
        </div>

        <div class="suka-pagination-actions">
          <button
            type="button" class="suka-pagination-navigation-first"
            (click)="firstPage()"
            [disabled]="_previousButtonsDisabled()"
            *ngIf="showFirstLastButtons"
            sukaButton="plain"
            size="sm"
          >
            <suka-icon icon="chevrons-left" class="suka-pagination-icon"></suka-icon>
          </button>
          <button
            type="button" class="suka-pagination-navigation-previous"
            (click)="previousPage()"
            [disabled]="_previousButtonsDisabled()"
            sukaButton="plain"
            size="sm"
          >
            <suka-icon icon="chevron-left" class="suka-pagination-icon"></suka-icon>
            Anterior
          </button>
          <button
            *ngFor="let pageNumber of _pagesArray"
            type="button"
            class="suka-pagination-navigation-page"
            (click)="goToPage(pageNumber)"
            [disabled]="pageNumber === '...'"
            sukaButton="plain"
            size="sm"
            [ngClass]="{
              'suka-pagination-navigation-page--selected': pageNumber === pageIndex + 1
            }"
          >
            {{pageNumber}}
          </button>
          <button
            type="button"
            class="suka-pagination-navigation-next"
            (click)="nextPage()"
            [disabled]="_nextButtonsDisabled()"
            sukaButton="plain"
            size="sm"
          >
            Siguiente
            <suka-icon icon="chevron-right" class="suka-pagination-icon"></suka-icon>
          </button>
          <button
            type="button" class="suka-pagination-navigation-last"
            (click)="lastPage()"
            [disabled]="_nextButtonsDisabled()"
            *ngIf="showFirstLastButtons"
            sukaButton="plain"
            size="sm"
          >
            <suka-icon icon="chevrons-right" class="suka-pagination-icon"></suka-icon>
          </button>
        </div>
      </div>
    </div>

  `,
                changeDetection: ChangeDetectionStrategy.OnPush,
                encapsulation: ViewEncapsulation.None
            }] }
];
/** @nocollapse */
Pagination.ctorParameters = () => [
    { type: ChangeDetectorRef }
];
Pagination.propDecorators = {
    disabled: [{ type: Input }],
    baseClass: [{ type: HostBinding, args: ['class.suka-pagination',] }],
    pageIndex: [{ type: Input }],
    length: [{ type: Input }],
    pageSize: [{ type: Input }],
    pageSizeOptions: [{ type: Input }],
    hidePageSize: [{ type: Input }],
    showFirstLastButtons: [{ type: Input }],
    page: [{ type: Output }]
};
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
 */
class PaginationModule {
}
PaginationModule.decorators = [
    { type: NgModule, args: [{
                imports: [
                    CommonModule,
                    ButtonModule,
                    IconModule,
                ],
                exports: [
                    Pagination
                ],
                declarations: [
                    Pagination
                ],
            },] }
];

/**
 * @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 {?}
 */
const 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
 */
class SukaTableDataSource extends DataSource {
    /**
     * @param {?=} initialData
     */
    constructor(initialData = []) {
        super();
        /**
         * Stream emitting render data to the table (depends on ordered data changes).
         */
        this._renderData = new BehaviorSubject([]);
        /**
         * Stream that emits when a new filter string is set on the data source.
         */
        this._filter = new BehaviorSubject('');
        /**
         * Used to react to internal changes of the paginator that are made by the data source itself.
         */
        this._internalPageChanges = new 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 = 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 {?}
         */
        (data, filter) => {
            // Transform the data into a lowercase string of all property values.
            /** @type {?} */
            const dataStr = Object.keys(data).reduce((/**
             * @param {?} currentTerm
             * @param {?} key
             * @return {?}
             */
            (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 {?} */
            const transformedFilter = filter.trim().toLowerCase();
            return dataStr.indexOf(transformedFilter) !== -1;
        });
        this._data = new BehaviorSubject(initialData);
        this._updateChangeSubscription();
    }
    /**
     * Array of data that should be rendered by the table, where each object represents one row.
     * @return {?}
     */
    get data() { return this._data.value; }
    /**
     * @param {?} data
     * @return {?}
     */
    set data(data) { this._data.next(data); }
    /**
     * 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 {?}
     */
    get filter() { return this._filter.value; }
    /**
     * @param {?} filter
     * @return {?}
     */
    set filter(filter) { this._filter.next(filter); }
    /**
       * 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 {?}
     */
    get paginator() { return this._paginator; }
    /**
     * @param {?} paginator
     * @return {?}
     */
    set paginator(paginator) {
        this._paginator = paginator;
        this._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 {?}
     */
    _updateChangeSubscription() {
        // 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 {?} */
        const pageChange = this._paginator ?
            (/** @type {?} */ (merge(this._paginator.page, this._internalPageChanges, this._paginator.initialized))) :
            of(null);
        /** @type {?} */
        const dataStream = this._data;
        // Watch for base data or filter changes to provide a filtered set of data.
        /** @type {?} */
        const filteredData = combineLatest([dataStream, this._filter])
            .pipe(map((/**
         * @param {?} __0
         * @return {?}
         */
        ([data]) => 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 {?} */
        const paginatedData = combineLatest([filteredData, pageChange])
            .pipe(map((/**
         * @param {?} __0
         * @return {?}
         */
        ([data]) => 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 {?}
         */
        data => 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.
     * @param {?} data
     * @return {?}
     */
    _filterData(data) {
        // 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 {?}
             */
            obj => 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.
     * @param {?} data
     * @return {?}
     */
    _pageData(data) {
        if (!this.paginator) {
            return data;
        }
        /** @type {?} */
        const 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.
     * @param {?} filteredDataLength
     * @return {?}
     */
    _updatePaginator(filteredDataLength) {
        Promise.resolve().then((/**
         * @return {?}
         */
        () => {
            /** @type {?} */
            const 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 {?} */
                const lastPageIndex = Math.ceil(paginator.length / paginator.pageSize) - 1 || 0;
                /** @type {?} */
                const 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
     * @return {?}
     */
    connect() { return this._renderData; }
    /**
     * Used by the SukaTable. Called when it is destroyed. No-op.
     * \@docs-private
     * @return {?}
     */
    disconnect() { }
}
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
 */
class SukaTableSkeleton {
    constructor() {
        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 {?}
         */
        (x, i) => i));
    }
}
SukaTableSkeleton.decorators = [
    { type: Component, args: [{
                selector: 'suka-table-skeleton, table[suka-table-skeleton]',
                exportAs: 'sukaTableSkeleton',
                template: `
    <tr class="suka-header-row">
      <th *ngFor="let column of columns" class="suka-header-cell"><div class="skeleton__text"></div></th>
    </tr>
    <tr class="suka-row" *ngFor="let row of rows">
      <td *ngFor="let column of columns" class="suka-cell"><div class="skeleton__text"></div></td>
    </tr>
  `
            }] }
];
SukaTableSkeleton.propDecorators = {
    baseClass: [{ type: HostBinding, args: ['class.suka-table',] }],
    fullWidth: [{ type: HostBinding, args: ['class.suka-table--full-width',] }, { type: Input }],
    skeleton: [{ type: Input }],
    columns: [{ type: Input }],
    rowNumber: [{ type: Input }]
};
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 {?} */
const EXPORTED_DECLARATIONS = [
    // Table
    SukaTable,
    SukaTableSkeleton,
    // Template defs
    SukaHeaderCellDef,
    SukaHeaderRowDef,
    SukaColumnDef,
    SukaCellDef,
    SukaRowDef,
    SukaFooterCellDef,
    SukaFooterRowDef,
    // Cell directives
    SukaHeaderCell,
    SukaCell,
    SukaFooterCell,
    // Row directives
    SukaHeaderRow,
    SukaRow,
    SukaFooterRow,
];
class TableModule {
}
TableModule.decorators = [
    { type: NgModule, args: [{
                imports: [
                    CommonModule,
                    CdkTableModule,
                    PaginationModule,
                ],
                exports: [...EXPORTED_DECLARATIONS],
                declarations: [EXPORTED_DECLARATIONS],
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class Navigation {
    constructor() {
        this.role = 'complementary';
        this.hostClass = true;
        /**
         * Controls the expanded (`true`) or collapsed (`false`) state when on a small screen.
         */
        this.expanded = true;
        /**
         * Controls the hidden (`true`) or visible (`false`) state
         */
        this.hidden = false;
    }
    /**
     * Toggles the `Navigation` expanded state.
     * @return {?}
     */
    toggle() {
        this.expanded = !this.expanded;
    }
}
Navigation.decorators = [
    { type: Component, args: [{
                selector: 'suka-navigation',
                template: `
    <nav role="navigation__container">
      <ul class="navigation__items">
        <ng-content></ng-content>
      </ul>
    </nav>
  `,
                encapsulation: ViewEncapsulation.None
            }] }
];
Navigation.propDecorators = {
    role: [{ type: HostBinding, args: ['attr.role',] }],
    hostClass: [{ type: HostBinding, args: ['class.navigation',] }],
    expanded: [{ type: HostBinding, args: ['class.navigation--expanded',] }, { type: Input }],
    hidden: [{ type: HostBinding, args: ['class.navigation--hidden',] }, { type: Input }]
};
if (false) {
    /** @type {?} */
    Navigation.prototype.role;
    /** @type {?} */
    Navigation.prototype.hostClass;
    /**
     * Controls the expanded (`true`) or collapsed (`false`) state when on a small screen.
     * @type {?}
     */
    Navigation.prototype.expanded;
    /**
     * Controls the hidden (`true`) or visible (`false`) state
     * @type {?}
     */
    Navigation.prototype.hidden;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class NavigationItem {
    /**
     * @param {?} domSanitizer
     * @param {?} router
     */
    constructor(domSanitizer, router) {
        this.domSanitizer = domSanitizer;
        this.router = router;
        /**
         * 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 EventEmitter();
        this.isSubMenu = false;
        this._href = 'javascript:void(0)';
        if (router && this.route) {
            this.subscription = router.events.subscribe((/**
             * @param {?} s
             * @return {?}
             */
            (s) => {
                if (s instanceof NavigationEnd) {
                    this.update();
                }
            }));
        }
    }
    /**
     * 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 {?}
     */
    set href(v) {
        this._href = v;
    }
    /**
     * @return {?}
     */
    get href() {
        return (/** @type {?} */ (this.domSanitizer.bypassSecurityTrustUrl(this._href)));
    }
    /**
     * @param {?} event
     * @return {?}
     */
    navigate(event) {
        if (this.router && this.route) {
            event.preventDefault();
            /** @type {?} */
            const status = this.router.navigate(this.route, this.routeExtras);
            this.navigation.emit(status);
        }
    }
    /**
     * @return {?}
     */
    ngOnDestroy() {
        if (this.subscription) {
            this.subscription.unsubscribe();
        }
    }
    /**
     * @private
     * @return {?}
     */
    isActive() {
        if (this.router && this.route) {
            /** @type {?} */
            const itemUrl = this.router.createUrlTree(this.route, this.routeExtras);
            return this.router.isActive(itemUrl, true);
        }
        return false;
    }
    /**
     * @private
     * @return {?}
     */
    update() {
        if (this.isActive()) {
            this.active = true;
        }
        else {
            this.active = false;
        }
    }
}
NavigationItem.decorators = [
    { type: Component, args: [{
                selector: 'suka-navigation-item',
                template: `
    <li [ngClass]="{
      'navigation__item': !isSubMenu,
      'navigation__menu-item': isSubMenu
    }"
    [attr.role]="(isSubMenu ? 'none' : null)">
      <a
        class="navigation__link"
        [href]="href"
        [attr.role]="(isSubMenu ? 'menuitem' : null)"
        [attr.aria-current]="(active ? 'page' : null)"
        (click)="navigate($event)">
        <div *ngIf="!isSubMenu" class="navigation__icon">
          <ng-content select="suka-icon"></ng-content>
        </div>
        <span class="navigation__link-text">
          <ng-content></ng-content>
        </span>
      </a>
    </li>
  `
            }] }
];
/** @nocollapse */
NavigationItem.ctorParameters = () => [
    { type: DomSanitizer },
    { type: Router, decorators: [{ type: Optional }] }
];
NavigationItem.propDecorators = {
    href: [{ type: Input }],
    active: [{ type: Input }],
    route: [{ type: Input }],
    routeExtras: [{ type: Input }],
    navigation: [{ type: Output }]
};
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.
 */
class NavigationMenu {
    constructor() {
        /**
         * Controls the visibility of the child `SideNavItem`s
         */
        this.expanded = false;
        this.childrenHeight = 0;
    }
    /**
     * @return {?}
     */
    ngAfterContentInit() {
        setTimeout((/**
         * @return {?}
         */
        () => {
            this.navigationItems.forEach((/**
             * @param {?} item
             * @return {?}
             */
            item => {
                item.isSubMenu = true;
            }));
        }));
        setTimeout((/**
         * @return {?}
         */
        () => {
            this.navigationNativeItems.forEach((/**
             * @param {?} item
             * @return {?}
             */
            item => {
                item.nativeElement.children.forEach((/**
                 * @param {?} children
                 * @return {?}
                 */
                children => {
                    this.childrenHeight += children.offsetHeight;
                }));
            }));
        }));
    }
    /**
     * @return {?}
     */
    toggle() {
        this.expanded = !this.expanded;
    }
}
NavigationMenu.decorators = [
    { type: Component, args: [{
                selector: 'suka-navigation-menu',
                template: `
    <li class="navigation__item navigation__item--icon">
      <button
        (click)="toggle()"
        class="navigation__sub-menu"
        aria-haspopup="true"
        [attr.aria-expanded]="expanded"
        type="button">
        <div class="navigation__icon">
          <ng-content select="suka-icon"></ng-content>
        </div>
        <span class="navigation__sub-menu-title">{{title}}</span>
        <suka-icon icon="chevron-down" class="navigation__sub-menu-icon"></suka-icon>
      </button>
      <ul class="navigation__menu" role="menu" [ngStyle]="{'max-height': expanded ? childrenHeight + 'px' : '0px'}">
        <ng-content></ng-content>
      </ul>
    </li>
  `
            }] }
];
NavigationMenu.propDecorators = {
    title: [{ type: Input }],
    expanded: [{ type: Input }],
    navigationItems: [{ type: ContentChildren, args: [NavigationItem,] }],
    navigationNativeItems: [{ type: ContentChildren, args: [NavigationItem, { read: ElementRef },] }]
};
if (false) {
    /**
     * Heading for the gorup
     * @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
 */
class MobileNavigation {
    constructor() {
        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 {?}
     */
    toggle() {
        this.expanded = !this.expanded;
    }
}
MobileNavigation.decorators = [
    { type: Component, args: [{
                selector: 'suka-mobile-navigation',
                template: `
    <button class="nav-toggle" (click)="toggle()"><suka-icon icon="menu"></suka-icon> Navegación</button>
    <div class="backdrop--dark"></div>
    <div class="mobile-navigation__nav-wrapper">
      <div class="mobile-nav-trigger" (click)="toggle()"></div>
      <div class="mobile-nav">
        <div class="mobile-nav__header">
          Navegación
          <button sukaButton="plain" (click)="toggle()" size="sm"><suka-icon icon="x"></suka-icon></button>
        </div>
        <ng-content></ng-content>
      </div>
    </div>
  `,
                encapsulation: ViewEncapsulation.None
            }] }
];
/** @nocollapse */
MobileNavigation.ctorParameters = () => [];
MobileNavigation.propDecorators = {
    role: [{ type: HostBinding, args: ['attr.role',] }],
    hostClass: [{ type: HostBinding, args: ['class.mobile-navigation',] }],
    expanded: [{ type: HostBinding, args: ['class.mobile-navigation--expanded',] }, { type: Input }],
    hidden: [{ type: HostBinding, args: ['class.mobile-navigation--hidden',] }, { type: Input }]
};
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
 */
class NavigationModule {
}
NavigationModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    Navigation,
                    NavigationItem,
                    NavigationMenu,
                    MobileNavigation,
                ],
                imports: [
                    CommonModule,
                    IconModule,
                    ButtonModule,
                ],
                exports: [
                    Navigation,
                    NavigationItem,
                    NavigationMenu,
                    MobileNavigation,
                ]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class Badge {
    constructor() {
        /**
         * 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 = '';
    }
    /**
     * @return {?}
     */
    get attrClass() {
        return `badge badge--${this.type} badge--${this.size} ${this.class}`;
    }
}
Badge.decorators = [
    { type: Component, args: [{
                selector: 'suka-badge',
                template: `<ng-content></ng-content>`
            }] }
];
Badge.propDecorators = {
    type: [{ type: Input }],
    size: [{ type: Input }],
    class: [{ type: Input }],
    attrClass: [{ type: HostBinding, args: ['attr.class',] }]
};
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
 */
class BadgeModule {
}
BadgeModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    Badge
                ],
                exports: [
                    Badge
                ],
                imports: [
                    CommonModule
                ]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class Topbar {
    /**
     * @param {?} domSanitizer
     * @param {?} router
     */
    constructor(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 EventEmitter();
        this._href = 'javascript:void(0)';
    }
    /**
     * Optional link for the header
     * @param {?} v
     * @return {?}
     */
    set href(v) {
        this._href = v;
    }
    /**
     * @return {?}
     */
    get href() {
        return (/** @type {?} */ (this.domSanitizer.bypassSecurityTrustUrl(this._href)));
    }
    /**
     * @param {?} value
     * @return {?}
     */
    isTemplate(value) {
        return value instanceof TemplateRef;
    }
    /**
     * @param {?} event
     * @return {?}
     */
    navigate(event) {
        if (this.router && this.route) {
            event.preventDefault();
            /** @type {?} */
            const status = this.router.navigate(this.route, this.routeExtras);
            this.navigation.emit(status);
        }
    }
}
Topbar.decorators = [
    { type: Component, args: [{
                selector: 'suka-topbar',
                template: `
    <header
      class="topbar"
      role="banner"
      [attr.aria-label]="brand + ' ' + productName">

      <div class="container" *ngIf="insideContainer else elseTpl">
        <ng-container *ngTemplateOutlet="elseTpl"></ng-container>
      </div>

      <ng-template #elseTpl>
        <ng-template
          *ngIf="isTemplate(brand)"
          [ngTemplateOutlet]="brand">
        </ng-template>
        <a
          *ngIf="!isTemplate(brand)"
          class="topbar__name"
          [href]="href"
          (click)="navigate($event)">
          <img *ngIf="logoSrc" [src]="logoSrc" class="topbar__logo" [attr.alt]="brand" />
          <span *ngIf="!logoSrc" class="topbar__name--prefix">{{brand}}</span>
          <span *ngIf="productName" class="topbar__name--suffix">{{productName}}</span>
        </a>
        <ng-content></ng-content>
      </ng-template>
    </header>
  `
            }] }
];
/** @nocollapse */
Topbar.ctorParameters = () => [
    { type: DomSanitizer },
    { type: Router, decorators: [{ type: Optional }] }
];
Topbar.propDecorators = {
    insideContainer: [{ type: Input }],
    productName: [{ type: Input }],
    logoSrc: [{ type: Input }],
    brand: [{ type: Input }],
    href: [{ type: Input }],
    route: [{ type: Input }],
    routeExtras: [{ type: Input }],
    navigation: [{ type: Output }]
};
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
 */
class TopbarGlobal {
    constructor() {
        this.hostClass = true;
    }
}
TopbarGlobal.decorators = [
    { type: Component, args: [{
                selector: 'suka-topbar-global',
                template: `
    <ng-content></ng-content>
  `
            }] }
];
TopbarGlobal.propDecorators = {
    hostClass: [{ type: HostBinding, args: ['class.topbar__global',] }]
};
if (false) {
    /** @type {?} */
    TopbarGlobal.prototype.hostClass;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class TopbarNavigation {
}
TopbarNavigation.decorators = [
    { type: Component, args: [{
                selector: 'suka-topbar-navigation',
                template: `
    <nav class="topbar__nav" [attr.aria-label]="ariaLabel">
      <ul class="topbar__menu-bar" role="menubar">
        <ng-content></ng-content>
      </ul>
    </nav>
  `
            }] }
];
TopbarNavigation.propDecorators = {
    ariaLabel: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    TopbarNavigation.prototype.ariaLabel;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class TopbarItem {
    /**
     * @param {?} domSanitizer
     * @param {?} router
     */
    constructor(domSanitizer, router) {
        this.domSanitizer = domSanitizer;
        this.router = router;
        /**
         * Emits the navigation status promise when the link is activated
         */
        this.navigation = new EventEmitter();
        this._href = 'javascript:void(0)';
    }
    /**
     * @param {?} v
     * @return {?}
     */
    set href(v) {
        this._href = v;
    }
    /**
     * @return {?}
     */
    get href() {
        return (/** @type {?} */ (this.domSanitizer.bypassSecurityTrustUrl(this._href)));
    }
    /**
     * @param {?} event
     * @return {?}
     */
    navigate(event) {
        if (this.router && this.route) {
            event.preventDefault();
            /** @type {?} */
            const status = this.router.navigate(this.route, this.routeExtras);
            this.navigation.emit(status);
        }
    }
}
TopbarItem.decorators = [
    { type: Component, args: [{
                selector: 'suka-topbar-item',
                template: `
    <li style="height: 100%">
      <a
        class="topbar__menu-item"
        role="menuitem"
        tabindex="0"
        [href]="href"
        (click)="navigate($event)">
        <suka-icon *ngIf="icon" [icon]="icon" class="topbar__menu-item__icon"></suka-icon>
        <ng-content></ng-content>
      </a>
    </li>
  `
            }] }
];
/** @nocollapse */
TopbarItem.ctorParameters = () => [
    { type: DomSanitizer },
    { type: Router, decorators: [{ type: Optional }] }
];
TopbarItem.propDecorators = {
    href: [{ type: Input }],
    route: [{ type: Input }],
    routeExtras: [{ type: Input }],
    navigation: [{ type: Output }],
    icon: [{ type: Input }]
};
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
 */
class TopbarMenu {
    /**
     * @param {?} domSanitizer
     * @param {?} elementRef
     */
    constructor(domSanitizer, elementRef) {
        this.domSanitizer = domSanitizer;
        this.elementRef = elementRef;
        this.trigger = 'click';
        this.expanded = false;
        this._href = 'javascript:void(0)';
    }
    /**
     * @param {?} v
     * @return {?}
     */
    set href(v) {
        this._href = v;
    }
    /**
     * @return {?}
     */
    get href() {
        return (/** @type {?} */ (this.domSanitizer.bypassSecurityTrustUrl(this._href)));
    }
    /**
     * @return {?}
     */
    onClick() {
        if (this.trigger === 'click') {
            this.expanded = !this.expanded;
        }
    }
    /**
     * @return {?}
     */
    onMouseOver() {
        if (this.trigger === 'mouseover') {
            this.expanded = true;
        }
    }
    /**
     * @return {?}
     */
    onMouseOut() {
        if (this.trigger === 'mouseover') {
            this.expanded = false;
        }
    }
    /**
     * @param {?} event
     * @return {?}
     */
    onFocusOut(event) {
        if (!this.elementRef.nativeElement.contains(event.relatedTarget)) {
            this.expanded = false;
        }
    }
}
TopbarMenu.decorators = [
    { type: Component, args: [{
                selector: 'suka-topbar-menu',
                template: `
    <li
      class="topbar__sub-menu"
      style="height: 100%"
    >
      <a
        class="topbar__menu-item topbar__menu-title"
        [href]="href"
        role="menuitem"
        tabindex="0"
        aria-haspopup="true"
        [attr.aria-expanded]="expanded">
        <ng-content></ng-content>
        <suka-icon icon="chevron-down" class="topbar__menu-arrow" aria-hidden="true"></suka-icon>
      </a>
      <ul class="topbar__menu" role="menu">
        <ng-content select="suka-topbar-item"></ng-content>
      </ul>
    </li>
  `
            }] }
];
/** @nocollapse */
TopbarMenu.ctorParameters = () => [
    { type: DomSanitizer },
    { type: ElementRef }
];
TopbarMenu.propDecorators = {
    href: [{ type: Input }],
    trigger: [{ type: Input }],
    onClick: [{ type: HostListener, args: ['click',] }],
    onMouseOver: [{ type: HostListener, args: ['mouseover',] }],
    onMouseOut: [{ type: HostListener, args: ['mouseout',] }],
    onFocusOut: [{ type: HostListener, args: ['focusout', ['$event'],] }]
};
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
 */
class TopbarModule {
}
TopbarModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    Topbar,
                    TopbarGlobal,
                    TopbarNavigation,
                    TopbarItem,
                    TopbarMenu,
                ],
                imports: [
                    CommonModule,
                    IconModule,
                ],
                exports: [
                    Topbar,
                    TopbarGlobal,
                    TopbarNavigation,
                    TopbarItem,
                    TopbarMenu,
                ]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class Frame {
    /**
     * @param {?} breakpointObserver
     */
    constructor(breakpointObserver) {
        this.baseClass = true;
        this.mobile = false;
        breakpointObserver.observe('(max-width: 768px)').subscribe((/**
         * @param {?} result
         * @return {?}
         */
        result => {
            if (result.matches) {
                this.activateHandsetLayout();
            }
            else {
                this.activateDesktopLayout();
            }
        }));
    }
    /**
     * Activates handset layout
     * @return {?}
     */
    activateHandsetLayout() {
        this.mobile = true;
    }
    /**
     * Activates desktop layout
     * @return {?}
     */
    activateDesktopLayout() {
        this.mobile = false;
    }
}
Frame.decorators = [
    { type: Component, args: [{
                selector: 'suka-frame',
                template: `
    <div class="frame__header">
      <ng-content select="suka-topbar"></ng-content>
    </div>

    <ng-template #navigationTemplate>
       <ng-content select="suka-navigation"></ng-content>
    </ng-template>

    <div class="frame__nav" *ngIf="!mobile">
      <ng-container *ngTemplateOutlet="navigationTemplate"></ng-container>
    </div>

    <div class="frame__main">
      <ng-content select="suka-page"></ng-content>
    </div>

    <div class="frame__mobile-nav" *ngIf="mobile">
      <suka-mobile-navigation>
        <ng-container *ngTemplateOutlet="navigationTemplate"></ng-container>
      </suka-mobile-navigation>
    </div>

    <ng-content></ng-content>
  `
            }] }
];
/** @nocollapse */
Frame.ctorParameters = () => [
    { type: BreakpointObserver }
];
Frame.propDecorators = {
    baseClass: [{ type: HostBinding, args: ['class.frame',] }],
    mobile: [{ type: HostBinding, args: ['class.frame--mobile',] }]
};
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
 */
class FrameModule {
}
FrameModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    Frame,
                ],
                exports: [
                    Frame,
                ],
                imports: [
                    CommonModule,
                    LayoutModule$1,
                    NavigationModule,
                ]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class Breadcrumb {
    // Build your breadcrumb starting with the root route of your current activated route
    /**
     * @param {?} activatedRoute
     * @param {?} router
     */
    constructor(activatedRoute, router) {
        this.activatedRoute = activatedRoute;
        this.router = router;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        if (this.router) {
            this.breadcrumbs$ = this.router.events.pipe(filter((/**
             * @param {?} event
             * @return {?}
             */
            event => event instanceof NavigationEnd)), distinctUntilChanged(), map((/**
             * @param {?} event
             * @return {?}
             */
            event => this.buildBreadcrumb(this.activatedRoute.root))));
        }
    }
    /**
     * @param {?} route
     * @param {?=} url
     * @param {?=} breadcrumbs
     * @return {?}
     */
    buildBreadcrumb(route, url = '', breadcrumbs = []) {
        // If no routeConfig is avalailable we are on the root path
        /** @type {?} */
        const label = route.routeConfig ? route.routeConfig.data['breadcrumb'] : 'Inicio';
        /** @type {?} */
        const path = route.routeConfig ? route.routeConfig.path : '';
        // In the routeConfig the complete path is not available,
        // so we rebuild it each time
        /** @type {?} */
        const nextUrl = `${url}${path}/`;
        /** @type {?} */
        const breadcrumb = {
            label,
            url: nextUrl,
        };
        /** @type {?} */
        const newBreadcrumbs = [...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: Component, args: [{
                selector: 'suka-breadcrumb',
                template: `
    <ol class="breadcrumb" *ngIf="router">
      <li
      *ngFor="let breadcrumb of breadcrumbs$ | async; last as isLast;"
      class="breadcrumb-item"
      [ngClass]="{'active': isLast}" aria-current="page"
      >
        <a
          *ngIf="!isLast; else lastRoute"
          [routerLink]="[breadcrumb.url]"
          routerLinkActive="active"
        >
          <suka-icon icon="home" *ngIf="breadcrumb.label === 'Inicio'"></suka-icon> {{ breadcrumb.label }}
          <suka-icon icon="chevron-right"></suka-icon>
        </a>
        <ng-template #lastRoute>
          <suka-icon icon="home" *ngIf="breadcrumb.label === 'Inicio'"></suka-icon> {{ breadcrumb.label }}
        </ng-template>
      </li>
    </ol>
  `,
                encapsulation: ViewEncapsulation.None
            }] }
];
/** @nocollapse */
Breadcrumb.ctorParameters = () => [
    { type: ActivatedRoute, decorators: [{ type: Optional }] },
    { type: Router, decorators: [{ type: Optional }] }
];
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
 */
class BreadcrumbModule {
}
BreadcrumbModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    Breadcrumb,
                ],
                exports: [
                    Breadcrumb,
                ],
                imports: [
                    CommonModule,
                    RouterModule,
                    IconModule,
                ]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class Page {
    constructor() {
        this.narrow = false;
        this.default = true;
        this._fluid = false;
        this.breadcrumb = true;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        if (this.fluid) {
            this._fluid = true;
            this.default = false;
        }
    }
}
Page.decorators = [
    { type: Component, args: [{
                selector: 'suka-page',
                template: `
    <suka-page-header [breadcrumb]="breadcrumb" [title]="title" [subtitle]="subtitle" [actions]="actions"></suka-page-header>

    <ng-content></ng-content>
  `
            }] }
];
Page.propDecorators = {
    fluid: [{ type: Input }],
    narrow: [{ type: HostBinding, args: ['class.page--narrow',] }, { type: Input }],
    default: [{ type: HostBinding, args: ['class.page',] }],
    _fluid: [{ type: HostBinding, args: ['class.page--fluid',] }],
    title: [{ type: Input }],
    subtitle: [{ type: Input }],
    actions: [{ type: Input }],
    breadcrumb: [{ type: Input }]
};
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
 */
class PageHeader {
    constructor() {
        this.baseClass = true;
        this.breadcrumb = true;
    }
    /**
     * @param {?} value
     * @return {?}
     */
    isTemplate(value) {
        return value instanceof TemplateRef;
    }
}
PageHeader.decorators = [
    { type: Component, args: [{
                selector: `suka-page-header`,
                template: `
    <suka-breadcrumb *ngIf="breadcrumb"></suka-breadcrumb>

    <suka-stack
      alignment="center"
    >
      <div sukaStackItem fill="true">
        <ng-container *ngIf="!isTemplate(title)">
          <h3 class="page__header__title">{{title}}</h3>
          <span *ngIf="subtitle" class="page__header__subtitle">{{subtitle}}</span>
        </ng-container>

        <ng-template *ngIf="isTemplate(title)" [ngTemplateOutlet]="title"></ng-template>
      </div>

      <ng-template [ngTemplateOutlet]="actions"></ng-template>
    </suka-stack>
  `
            }] }
];
PageHeader.propDecorators = {
    baseClass: [{ type: HostBinding, args: ['class.page__header',] }],
    title: [{ type: Input }],
    subtitle: [{ type: Input }],
    actions: [{ type: Input }],
    breadcrumb: [{ type: Input }]
};
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
 */
class PageModule {
}
PageModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    Page,
                    PageHeader,
                ],
                exports: [
                    Page,
                    PageHeader,
                ],
                imports: [
                    CommonModule,
                    RouterModule,
                    BreadcrumbModule,
                    StackModule,
                ]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/** @type {?} */
const noop = (/**
 * @return {?}
 */
() => { });
const ɵ0$1 = noop;
class FileUploader {
    constructor() {
        /**
         * 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 EventEmitter();
        this.baseClass = true;
        this.onTouchedCallback = noop;
        this.onChangeCallback = noop;
        FileUploader.fileUploaderCount++;
    }
    /**
     * Specifies the property to be used as the return value to `ngModel`
     * @return {?}
     */
    get value() {
        return this.files;
    }
    /**
     * @param {?} v
     * @return {?}
     */
    set value(v) {
        if (v !== this.files) {
            this.files = v;
            this.onChangeCallback(v);
        }
    }
    /**
     * @return {?}
     */
    onBlur() {
        this.onTouchedCallback();
    }
    /**
     * Propagates the injected `value`.
     * @param {?} value
     * @return {?}
     */
    writeValue(value) {
        if (value !== this.value) {
            this.files = value;
        }
    }
    /**
     * @return {?}
     */
    onFilesAdded() {
        /** @type {?} */
        const files = this.fileInput.nativeElement.files;
        if (!this.multiple) {
            this.files.clear();
        }
        for (let file of files) {
            /** @type {?} */
            const fileItem = {
                file,
                uploaded: false,
                state: 'edit',
                invalid: false,
                invalidText: '',
            };
            this.files.add(fileItem);
            this.filesChange.emit(this.files);
        }
        this.value = this.files;
    }
    /**
     * @param {?} fileItem
     * @return {?}
     */
    removeFile(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`.
     * @param {?} fn
     * @return {?}
     */
    registerOnTouched(fn) {
        this.onTouchedCallback = fn;
    }
    /**
     * Sets a method in order to propagate changes back to the form.
     * @param {?} fn
     * @return {?}
     */
    registerOnChange(fn) {
        this.onChangeCallback = fn;
    }
}
/**
 * Counter used to create unique ids for file-uploader components
 */
FileUploader.fileUploaderCount = 0;
FileUploader.decorators = [
    { type: Component, args: [{
                selector: 'suka-file-uploader',
                template: `
    <ng-container *ngIf="!skeleton; else skeletonTemplate">
      <label class="label">{{title}}</label>
      <div *ngIf="description" class="form__helper-text">{{description}}</div>
      <div class="file">
        <button
          type="button"
          [sukaButton]="buttonType"
          (click)="fileInput.click()"
          [attr.for]="fileUploaderId"
          [size]="size">
          {{buttonText}}
        </button>
        <input
          #fileInput
          type="file"
          class="file-input"
          [accept]="accept"
          [id]="fileUploaderId"
          [multiple]="multiple"
          tabindex="-1"
          (change)="onFilesAdded()"/>
        <div class="file-container">
          <div *ngFor="let fileItem of files">
            <suka-file [fileItem]="fileItem" (remove)="removeFile(fileItem)"></suka-file>
            <div *ngIf="fileItem.invalid" class="form-requirement">
              {{fileItem.invalidText}}
            </div>
          </div>
        </div>
      </div>
    </ng-container>
    <ng-template #skeletonTemplate>
      <div class="skeleton__text" style="width: 100px"></div>
      <div class="skeleton__text" style="width: 225px"></div>
      <button sukaButton skeleton="true"></button>
    </ng-template>
  `,
                providers: [
                    {
                        provide: NG_VALUE_ACCESSOR,
                        useExisting: FileUploader,
                        multi: true
                    }
                ]
            }] }
];
/** @nocollapse */
FileUploader.ctorParameters = () => [];
FileUploader.propDecorators = {
    buttonText: [{ type: Input }],
    buttonType: [{ type: Input }],
    title: [{ type: Input }],
    description: [{ type: Input }],
    accept: [{ type: Input }],
    multiple: [{ type: Input }],
    skeleton: [{ type: Input }],
    size: [{ type: Input }],
    fileUploaderId: [{ type: Input }],
    fileInput: [{ type: ViewChild, args: ['fileInput', { static: false },] }],
    files: [{ type: Input }],
    filesChange: [{ type: Output }],
    baseClass: [{ type: HostBinding, args: ['class.file-uploader',] }]
};
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
 */
class File {
    constructor() {
        this.remove = new EventEmitter();
        this.selectedFile = true;
    }
    /**
     * @return {?}
     */
    get isInvalidText() {
        return this.fileItem.invalidText;
    }
    /**
     * @return {?}
     */
    get isValid() {
        return this.fileItem.state === 'complete';
    }
}
File.decorators = [
    { type: Component, args: [{
                selector: 'suka-file',
                template: `
    <p class="file-filename">{{fileItem.file.name}}</p>
    <span
      *ngIf="fileItem.state === 'edit'"
      class="file__state-container"
      (click)="remove.emit()"
      (keyup.enter)="remove.emit()"
      (keyup.space)="remove.emit()"
      tabindex="0">
      <suka-icon
        *ngIf="isInvalidText"
        icon="alert-circle"
        class="file--invalid">
      </suka-icon>
      <suka-icon
        icon="x"
        class="file-close">
      </suka-icon>
    </span>
    <span *ngIf="fileItem.state === 'upload'">
      <suka-loading size="sm"></suka-loading>
    </span>
    <span
      *ngIf="fileItem.state === 'complete'"
      class="file__state-container"
      tabindex="0">
      <suka-icon
        icon="check"
        class="file-complete">
      </suka-icon>
    </span>
  `
            }] }
];
File.propDecorators = {
    fileItem: [{ type: Input }],
    remove: [{ type: Output }],
    selectedFile: [{ type: HostBinding, args: ['class.file__selected-file',] }],
    isInvalidText: [{ type: HostBinding, args: ['class.file__selected-file--invalid',] }],
    isValid: [{ type: HostBinding, args: ['class.file__selected-file--valid',] }]
};
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
 */
class FileUploaderModule {
}
FileUploaderModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    FileUploader,
                    File
                ],
                exports: [
                    FileUploader
                ],
                imports: [
                    CommonModule,
                    ButtonModule,
                    IconModule,
                    LoadingModule,
                ]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class Avatar {
    constructor() {
        /**
         * Sets the avatar color.
         */
        this.color = 'gray';
        /**
         * Sets the avatar class
         */
        this.class = '';
        /**
         * Sets the avatar size.
         */
        this.size = 'md';
    }
    /**
     * @return {?}
     */
    get attrClass() {
        return `avatar avatar--${this.color} avatar--${this.size} ${this.class}`;
    }
    /**
     * Sets the avatar initials according to the name input.
     * @return {?}
     */
    getInitials() {
        if (this.name === '') {
            return '';
        }
        /** @type {?} */
        const names = this.name.split(' ');
        /** @type {?} */
        let 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: Component, args: [{
                selector: `suka-avatar`,
                template: `
    <ng-container *ngIf="!imgSrc">{{getInitials()}}</ng-container>
    <img *ngIf="imgSrc" [src]="imgSrc" />
  `
            }] }
];
Avatar.propDecorators = {
    imgSrc: [{ type: Input }],
    name: [{ type: Input }],
    color: [{ type: Input }],
    class: [{ type: Input }],
    size: [{ type: Input }],
    attrClass: [{ type: HostBinding, args: ['attr.class',] }]
};
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
 */
class AvatarModule {
}
AvatarModule.decorators = [
    { type: NgModule, args: [{
                declarations: [Avatar],
                exports: [Avatar],
                imports: [CommonModule]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class DatePickerInput {
    /**
     * @param {?} elementRef
     */
    constructor(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 EventEmitter();
        /**
         * Set to `true` to disable the input
         */
        this.disabled = false;
        /**
         * Set to `true` to display invalid state.
         */
        this.invalid = false;
        /**
         * Skeleton state.
         */
        this.skeleton = false;
        /**
         * Sets the `DatepickerInput` value.
         */
        this.value = '';
        this.onTouched = (/**
         * @return {?}
         */
        () => { });
        this.propagateChange = (/**
         * @param {?} _
         * @return {?}
         */
        (_) => { });
    }
    /**
     * Sets the value, marks the input as touched and emits a value change event.
     * @param {?} event
     * @return {?}
     */
    onChange(event) {
        this.value = event.target.value;
        this.valueChange.emit(this.value);
        this.propagateChange(this.value);
        this.onTouched();
    }
    /**
     * @param {?} value
     * @return {?}
     */
    writeValue(value) {
        this.value = value;
    }
    /**
     * @param {?} fn
     * @return {?}
     */
    registerOnChange(fn) {
        this.propagateChange = fn;
    }
    /**
     * @param {?} fn
     * @return {?}
     */
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    /**
     * @param {?} value
     * @return {?}
     */
    isTemplate(value) {
        return value instanceof TemplateRef;
    }
}
DatePickerInput.datePickerCount = 0;
DatePickerInput.decorators = [
    { type: Component, args: [{
                selector: 'suka-date-picker-input',
                template: `
    <div class="date-picker-input"
      [ngClass]="{
        'date-picker--single' : type === 'single',
        'date-picker--range' : type === 'range',
        'skeleton' : skeleton
      }">
      <div class="date-picker-input-container">
        <label *ngIf="label" [for]="id" class="label">
          <ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
          <ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
        </label>
        <div class="date-picker-input__wrapper">
          <input
            *ngIf="!skeleton"
            autocomplete="off"
            type="text"
            class="date-picker__input"
            [value]="value"
            [pattern]="pattern"
            [placeholder]="placeholder"
            [id]= "id"
            [disabled]="disabled"
            (change)="onChange($event)"/>
            <suka-icon
              icon="calendar"
              class="date-picker__icon">
            </suka-icon>
        </div>
        <div *ngIf="invalid" class="form-requirement">
          <ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
          <ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
        </div>
      </div>
    </div>
  `,
                providers: [
                    {
                        provide: NG_VALUE_ACCESSOR,
                        useExisting: DatePickerInput,
                        multi: true
                    }
                ]
            }] }
];
/** @nocollapse */
DatePickerInput.ctorParameters = () => [
    { type: ElementRef }
];
DatePickerInput.propDecorators = {
    type: [{ type: Input }],
    id: [{ type: Input }],
    hasIcon: [{ type: Input }],
    label: [{ type: Input }],
    placeholder: [{ type: Input }],
    pattern: [{ type: Input }],
    valueChange: [{ type: Output }],
    disabled: [{ type: Input }],
    invalid: [{ type: Input }],
    invalidText: [{ type: Input }],
    skeleton: [{ type: Input }],
    value: [{ type: Input }]
};
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;
    /**
     * 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
 */
class DatePickerInputModule {
}
DatePickerInputModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    DatePickerInput
                ],
                exports: [
                    DatePickerInput
                ],
                imports: [
                    CommonModule,
                    IconModule,
                ]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/** @type {?} */
const monthToStr = (/**
 * @param {?} monthNumber
 * @param {?} shorthand
 * @param {?} locale
 * @return {?}
 */
(monthNumber, shorthand, locale) => locale.months[shorthand ? 'shorthand' : 'longhand'][monthNumber]);
const ɵ0$2 = monthToStr;
/** @type {?} */
const 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 {?} */
const sukaFlatpickrMonthSelectPlugin = (/**
 * @param {?} fp
 * @return {?}
 */
fp => {
    /** @type {?} */
    const setupElements = (/**
     * @return {?}
     */
    () => {
        if (!fp.monthElements) {
            return;
        }
        fp.monthElements.forEach((/**
         * @param {?} elem
         * @return {?}
         */
        elem => {
            if (!elem.parentNode) {
                return;
            }
            elem.parentNode.removeChild(elem);
        }));
        fp.monthElements.splice(0, fp.monthElements.length, ...fp.monthElements.map((/**
         * @return {?}
         */
        () => {
            /** @type {?} */
            const 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 {?} */
    const updateCurrentMonth = (/**
     * @return {?}
     */
    () => {
        /** @type {?} */
        const monthStr = monthToStr(fp.currentMonth, config.shorthand === true, fp.l10n);
        if (fp.yearElements) {
            fp.yearElements.forEach((/**
             * @param {?} elem
             * @return {?}
             */
            elem => {
                /** @type {?} */
                const currentMonthContainer = elem.closest(config.selectorFlatpickrMonthYearContainer);
                Array.prototype.forEach.call(currentMonthContainer.querySelectorAll('.cur-month'), (/**
                 * @param {?} monthElement
                 * @return {?}
                 */
                monthElement => {
                    monthElement.textContent = monthStr;
                }));
            }));
        }
    });
    /** @type {?} */
    const register = (/**
     * @return {?}
     */
    () => {
        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
 */
class DatePicker {
    /**
     * @param {?} elementRef
     */
    constructor(elementRef) {
        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';
        /**
         * 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 EventEmitter();
        this._value = [];
        this._flatpickrOptions = {
            allowInput: true
        };
        this.flatpickrBaseOptions = {
            mode: 'single',
            dateFormat: 'd/m/Y',
            locale: Spanish,
            plugins: this.plugins,
            onOpen: (/**
             * @return {?}
             */
            () => { this.updateClassNames(); }),
            value: this.value
        };
        this.flatpickrInstance = null;
        this.onTouched = (/**
         * @return {?}
         */
        () => { });
        this.propagateChange = (/**
         * @param {?} _
         * @return {?}
         */
        (_) => { });
    }
    /**
     * Sets the value.
     * @param {?} v
     * @return {?}
     */
    set value(v) {
        if (!v) {
            v = [];
        }
        this._value = v;
    }
    /**
     * @return {?}
     */
    get value() {
        return this._value;
    }
    /**
     * Flatpickr options
     * @param {?} options
     * @return {?}
     */
    set flatpickrOptions(options) {
        this._flatpickrOptions = Object.assign({}, this._flatpickrOptions, options);
    }
    /**
     * @return {?}
     */
    get flatpickrOptions() {
        /** @type {?} */
        const plugins = [...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,
            dateFormat: this.dateFormat
        });
    }
    /**
     * @param {?} changes
     * @return {?}
     */
    ngOnChanges(changes) {
        if (this.isFlatpickrLoaded()) {
            /** @type {?} */
            let 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
    /**
     * @return {?}
     */
    ngAfterViewChecked() {
        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 {?}
     */
    onFocus() {
        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
     * @return {?}
     */
    writeValue(value) {
        this.value = value;
        if (this.isFlatpickrLoaded() && this.flatpickrInstance.config) {
            this.setDateValues(this.value);
        }
    }
    /**
     * @param {?} fn
     * @return {?}
     */
    registerOnChange(fn) {
        this.propagateChange = fn;
    }
    /**
     * @param {?} fn
     * @return {?}
     */
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    /**
     * Cleans up our flatpickr instance
     * @return {?}
     */
    ngOnDestroy() {
        if (!this.isFlatpickrLoaded()) {
            return;
        }
        this.flatpickrInstance.destroy();
    }
    /**
     * Handles the `valueChange` event from the primary/single input
     * @param {?} event
     * @return {?}
     */
    onValueChange(event) {
        if (this.isFlatpickrLoaded()) {
            /** @type {?} */
            const 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
     * @param {?} event
     * @return {?}
     */
    onRangeValueChange(event) {
        if (this.isFlatpickrLoaded()) {
            /** @type {?} */
            const date = this.flatpickrInstance.parseDate(event, this.dateFormat);
            this.setDateValues([this.flatpickrInstance.selectedDates[0], date]);
            this.doSelect(this.flatpickrInstance.selectedDates);
        }
    }
    /**
     * Carbon uses a number of specific classnames for parts of the flatpickr - this idempotent method applies them if needed.
     * @protected
     * @return {?}
     */
    updateClassNames() {
        if (!this.elementRef) {
            return;
        }
        // get all the possible flatpickrs in the document - we need to add classes to (potentially) all of them
        /** @type {?} */
        const calendarContainer = document.querySelectorAll('.flatpickr-calendar');
        /** @type {?} */
        const monthContainer = document.querySelectorAll('.flatpickr-month');
        /** @type {?} */
        const weekdaysContainer = document.querySelectorAll('.flatpickr-weekdays');
        /** @type {?} */
        const weekdayContainer = document.querySelectorAll('.flatpickr-weekday');
        /** @type {?} */
        const daysContainer = document.querySelectorAll('.flatpickr-days');
        /** @type {?} */
        const dayContainer = document.querySelectorAll('.flatpickr-day');
        // add classes to lists of elements
        /** @type {?} */
        const addClassIfNotExists = (/**
         * @param {?} classname
         * @param {?} elementList
         * @return {?}
         */
        (classname, elementList) => {
            Array.from(elementList).forEach((/**
             * @param {?} element
             * @return {?}
             */
            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 {?}
         */
        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 {?}
         */
        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)
     * @protected
     * @param {?} dates the date values to apply
     * @return {?}
     */
    setDateValues(dates) {
        if (this.isFlatpickrLoaded()) {
            /** @type {?} */
            const singleInput = this.elementRef.nativeElement.querySelector(`#${this.id}`);
            /** @type {?} */
            const rangeInput = 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 {?} */
            let singleDate = '';
            // if date is a string, parse and format
            if (typeof this.flatpickrInstance.selectedDates[0] === 'string') {
                singleDate = this.flatpickrInstance.parseDate(this.flatpickrInstance.selectedDates[0], this.dateFormat);
                singleDate = this.flatpickrInstance.formatDate(singleDate, 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 = this.flatpickrInstance.formatDate(this.flatpickrInstance.selectedDates[0], this.dateFormat);
            }
            if (rangeInput) {
                // we can either set a date value or an empty string, so we start with an empty string
                /** @type {?} */
                let rangeDate = '';
                // if date is a string, parse and format
                if (typeof this.flatpickrInstance.selectedDates[1] === 'string') {
                    rangeDate = this.flatpickrInstance.parseDate(this.flatpickrInstance.selectedDates[1].toString(), this.dateFormat);
                    rangeDate = this.flatpickrInstance.formatDate(rangeDate, 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 = this.flatpickrInstance.formatDate(this.flatpickrInstance.selectedDates[1], this.dateFormat);
                }
                setTimeout((/**
                 * @return {?}
                 */
                () => {
                    // apply the values
                    rangeInput.value = rangeDate;
                    singleInput.value = singleDate;
                }));
            }
        }
    }
    /**
     * @protected
     * @param {?} selectedValue
     * @return {?}
     */
    doSelect(selectedValue) {
        this.valueChange.emit(selectedValue);
        this.propagateChange(selectedValue);
    }
    /**
     * @protected
     * @param {?} currentValue
     * @param {?} previousValue
     * @return {?}
     */
    didDateValueChange(currentValue, previousValue) {
        return currentValue[0] !== previousValue[0] || currentValue[1] !== previousValue[1];
    }
    /**
     * More advanced checking of the loaded state of flatpickr
     * @protected
     * @return {?}
     */
    isFlatpickrLoaded() {
        // 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: Component, args: [{
                selector: 'suka-date-picker',
                template: `
    <div class="form-item">
      <div
        class="date-picker"
        [ngClass]="{
          'date-picker--range' : range,
          'date-picker--single' : !range,
          'skeleton' : skeleton
        }">
        <div class="date-picker-container">
          <suka-date-picker-input
            [label]="label"
            [placeholder]="placeholder"
            [pattern]="pattern"
            [id]="id"
            [type]="(range ? 'range' : 'single')"
            [hasIcon]="(range ? false : true)"
            [disabled]="disabled"
            [invalid]="invalid"
            [invalidText]="invalidText"
            [skeleton]="skeleton"
            (valueChange)="onValueChange($event)">
          </suka-date-picker-input>
        </div>
        <div *ngIf="range" class="date-picker-container">
          <suka-date-picker-input
            [label]="rangeLabel"
            [placeholder]="placeholder"
            [pattern]="pattern"
            [id]="id + '-rangeInput'"
            [type]="(range ? 'range' : 'single')"
            [hasIcon]="(range ? true : null)"
            [disabled]="disabled"
            [invalid]="invalid"
            [invalidText]="invalidText"
            [skeleton]="skeleton"
            (valueChange)="onRangeValueChange($event)">
          </suka-date-picker-input>
        </div>
      </div>
    </div>
  `,
                providers: [
                    {
                        provide: NG_VALUE_ACCESSOR,
                        useExisting: DatePicker,
                        multi: true
                    }
                ],
                encapsulation: ViewEncapsulation.None
            }] }
];
/** @nocollapse */
DatePicker.ctorParameters = () => [
    { type: ElementRef }
];
DatePicker.propDecorators = {
    range: [{ type: Input }],
    dateFormat: [{ type: Input }],
    label: [{ type: Input }],
    rangeLabel: [{ type: Input }],
    placeholder: [{ type: Input }],
    pattern: [{ type: Input }],
    id: [{ type: Input }],
    value: [{ type: Input }],
    disabled: [{ type: Input }],
    invalid: [{ type: Input }],
    invalidText: [{ type: Input }],
    skeleton: [{ type: Input }],
    plugins: [{ type: Input }],
    flatpickrOptions: [{ type: Input }],
    valueChange: [{ type: Output }],
    onFocus: [{ type: HostListener, args: ['focusin',] }]
};
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;
    /**
     * 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
 */
class DatePickerModule {
}
DatePickerModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    DatePicker
                ],
                exports: [
                    DatePicker,
                    DatePickerInputModule
                ],
                imports: [
                    CommonModule,
                    DatePickerInputModule
                ]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class ToastRef {
    /**
     * @param {?} overlayRef
     */
    constructor(overlayRef) {
        this.overlayRef = overlayRef;
    }
    /**
     * @return {?}
     */
    isVisible() {
        return this.overlayRef && this.overlayRef.overlayElement;
    }
    /**
     * @return {?}
     */
    getPosition() {
        return this.overlayRef.overlayElement.getBoundingClientRect();
    }
    /**
     * @param {?=} data
     * @return {?}
     */
    close(data) {
        this.overlayRef.dispose();
        // tslint:disable-next-line: no-non-null-assertion
        this.componentInstance = (/** @type {?} */ (null));
    }
}
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 {?} */
const TOAST_CONFIG_DATA = new InjectionToken('TOAST_CONFIG_DATA');

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/** @type {?} */
const toastAnimations = {
    fadeToast: trigger('fadeAnimation', [
        state('default', style({ opacity: 1, transform: '*' })),
        transition('void => *', [style({ opacity: 0, transform: 'scale(.9) translate3d(0, -50%, 0)' }), animate('{{ fadeIn }}ms')]),
        transition('default => closing', animate('{{ fadeOut }}ms', style({ opacity: 0 }))),
    ]),
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class ToastContainer {
    /**
     * @param {?} toastRef
     * @param {?} toastConfig
     */
    constructor(toastRef, toastConfig) {
        this.toastRef = toastRef;
        this.toastConfig = toastConfig;
        this.animationState = 'default';
        this.animationStateChanged = new EventEmitter();
        this.showFooter = false;
        this.baseClass = true;
    }
    /**
     * @param {?} value
     * @return {?}
     */
    isTemplate(value) {
        return value instanceof TemplateRef;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this.content = this.toastConfig.content;
        this.intervalId = window.setTimeout((/**
         * @return {?}
         */
        () => this.startExitAnimation()), 5000);
    }
    /**
     * @return {?}
     */
    ngOnDestroy() {
        clearTimeout(this.intervalId);
    }
    /**
     * @return {?}
     */
    close() {
        this.toastRef.close();
    }
    /**
     * @param {?} event
     * @return {?}
     */
    onAnimationStart(event) {
        this.animationStateChanged.emit(event);
    }
    /**
     * @param {?} event
     * @return {?}
     */
    onAnimationDone(event) {
        this.animationStateChanged.emit(event);
    }
    /**
     * @param {?} $event
     * @return {?}
     */
    closeToast($event) {
        this.toastRef.close();
    }
    /**
     * @param {?} event
     * @return {?}
     */
    onFadeFinished(event) {
        const { toState } = event;
        /** @type {?} */
        const isFadeOut = ((/** @type {?} */ (toState))) === 'closing';
        /** @type {?} */
        const itFinished = this.animationState === 'closing';
        if (isFadeOut && itFinished) {
            this.close();
        }
    }
    /**
     * @return {?}
     */
    startExitAnimation() {
        this.animationState = 'closing';
    }
}
ToastContainer.decorators = [
    { type: Component, args: [{
                selector: 'suka-toast',
                template: `
    <div class="toast"
      [@fadeAnimation]="{
        value: animationState,
        params: {
          fadeIn: toastConfig.animation.fadeIn,
          fadeOut: toastConfig.animation.fadeOut
        }
      }"
      (@fadeAnimation.done)="onFadeFinished($event)"
      [ngClass]="{
        'toast--success': content.type === 'success',
        'toast--alert': content.type === 'alert',
        'toast--attention': content.type === 'attention'
      }"
    >
      <suka-icon icon="check" *ngIf="content.type === 'success'" class="toast__icon--success"></suka-icon>
      <suka-icon icon="alert-circle" *ngIf="content.type === 'alert'" class="toast__icon--alert"></suka-icon>
      <suka-icon icon="alert-triangle" *ngIf="content.type === 'attention'" class="toast__icon--attention"></suka-icon>
      <div>{{ content.body }}</div>
      <suka-icon icon="x" (click)="close()" class="toast__close">close</suka-icon>
    </div>
  `,
                animations: [toastAnimations.fadeToast]
            }] }
];
/** @nocollapse */
ToastContainer.ctorParameters = () => [
    { type: ToastRef },
    { type: undefined, decorators: [{ type: Inject, args: [TOAST_CONFIG_DATA,] }] }
];
ToastContainer.propDecorators = {
    baseClass: [{ type: HostBinding, args: ['class.toast--default',] }]
};
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 {?} */
const DEFAULT_CONFIG$2 = {
    position: {
        top: 20,
    },
    animation: {
        fadeOut: 2500,
        fadeIn: 150,
    },
    content: null,
};
class ToastService {
    /**
     * @param {?} injector
     * @param {?} overlay
     */
    constructor(injector, overlay) {
        this.injector = injector;
        this.overlay = overlay;
    }
    /**
     * @param {?=} config
     * @return {?}
     */
    show(config = {}) {
        // Override default configuration
        /** @type {?} */
        const dialogConfig = Object.assign({}, DEFAULT_CONFIG$2, config);
        // Returns an OverlayRef which is a PortalHost
        /** @type {?} */
        const overlayRef = this.createOverlay(dialogConfig);
        // Instantiate remote control
        /** @type {?} */
        const toastRef = new ToastRef(overlayRef);
        this.lastToast = toastRef;
        /** @type {?} */
        const overlayComponent = this.attachToastContainer(overlayRef, dialogConfig, toastRef);
        toastRef.componentInstance = overlayComponent;
        return toastRef;
    }
    /**
     * @private
     * @param {?} config
     * @return {?}
     */
    createOverlay(config) {
        /** @type {?} */
        const overlayConfig = this.getOverlayConfig(config);
        return this.overlay.create(overlayConfig);
    }
    /**
     * @private
     * @param {?} overlayRef
     * @param {?} config
     * @param {?} toastRef
     * @return {?}
     */
    attachToastContainer(overlayRef, config, toastRef) {
        /** @type {?} */
        const injector = this.createInjector(config, toastRef);
        /** @type {?} */
        const containerPortal = new ComponentPortal(ToastContainer, null, injector);
        /** @type {?} */
        const containerRef = overlayRef.attach(containerPortal);
        return containerRef.instance;
    }
    /**
     * @private
     * @param {?} config
     * @param {?} toastRef
     * @return {?}
     */
    createInjector(config, toastRef) {
        /** @type {?} */
        const injectionTokens = new WeakMap();
        injectionTokens.set(ToastRef, toastRef);
        injectionTokens.set(TOAST_CONFIG_DATA, config);
        return new PortalInjector(this.injector, injectionTokens);
    }
    /**
     * @private
     * @param {?} config
     * @return {?}
     */
    getOverlayConfig(config) {
        /** @type {?} */
        const positionStrategy = this.overlay.position()
            .global()
            .centerHorizontally()
            .top(this.getPosition(config));
        /** @type {?} */
        const overlayConfig = new OverlayConfig({
            positionStrategy
        });
        return overlayConfig;
    }
    /**
     * @param {?} config
     * @return {?}
     */
    getPosition(config) {
        /** @type {?} */
        const lastToastIsVisible = this.lastToast && this.lastToast.isVisible();
        /** @type {?} */
        const position = lastToastIsVisible
            ? this.lastToast.getPosition().bottom
            : config.position.top;
        return position + 'px';
    }
}
ToastService.decorators = [
    { type: Injectable }
];
/** @nocollapse */
ToastService.ctorParameters = () => [
    { type: Injector },
    { type: Overlay }
];
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
 */
class ToastModule {
}
ToastModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    ToastContainer,
                ],
                exports: [
                    ToastContainer,
                ],
                imports: [
                    CommonModule,
                    OverlayModule,
                    ButtonModule,
                    IconModule,
                ],
                entryComponents: [
                    ToastContainer
                ],
                providers: [
                    ToastService,
                ],
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class Progress {
    constructor() {
        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 EventEmitter();
        /**
         * Emits an event when the steps change.
         */
        this.stepsChange = new EventEmitter();
    }
    /**
     * Sets the steps for the `Progress` component.
     * @return {?}
     */
    get steps() {
        return this._steps;
    }
    /**
     * @param {?} value
     * @return {?}
     */
    set steps(value) {
        this._steps = value;
        this.stepsChange.emit(this._steps);
    }
    /**
     * @param {?} newIndex
     * @return {?}
     */
    select(newIndex) {
        this._steps.forEach((/**
         * @param {?} step
         * @param {?} index
         * @return {?}
         */
        (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.
     * @param {?} step
     * @return {?}
     */
    isComplete(step) {
        return step.state === 'complete';
    }
    /**
     * Step is editable.
     * @param {?} step
     * @return {?}
     */
    isEditable(step) {
        return step.state === 'complete' && this.editable;
    }
    /**
     * Step is unclickable.
     * @param {?} step
     * @param {?} index
     * @return {?}
     */
    isUnclickable(step, index) {
        if (step.state === 'complete' && !this.editable) {
            return true;
        }
        if (step.state === 'incomplete' && !this.linear && index !== this.getNextStep()) {
            return true;
        }
        return false;
    }
    /**
     * Returns the next uncompleted step.
     * @return {?}
     */
    getNextStep() {
        for (const [index, step] of this.steps.entries()) {
            if (step.state === 'incomplete') {
                return index;
            }
        }
        return -1;
    }
}
Progress.decorators = [
    { type: Component, args: [{
                selector: 'suka-progress',
                template: `
    <div class="progress__wrapper">
      <ul class="progress-bar">
        <li
          *ngFor="let step of steps; let i = index"
          class="progress-bar__step"
          [ngClass]="{
            'progress-bar__step--complete': isComplete(step),
            'progress-bar__step--editable': isEditable(step),
            'progress-bar__step--error': step.state === 'error',
            'progress-bar__step--current': step.current,
            'progress-bar__step--unclickable': isUnclickable(step, i)
          }"
        >
          <div class="step" role="button" (click)="select(i)">
            <div class="step__indicator">
              <ng-container *ngIf="step.state !== 'complete' || step.current">{{ i + 1 }}</ng-container>
              <suka-icon icon="check" *ngIf="isComplete(step) && !isEditable(step) && !step.current"></suka-icon>
              <suka-icon icon="edit-2" *ngIf="isEditable(step) && !step.current"></suka-icon>
            </div>
            <span class="step__label"> {{ step.label }}</span>
          </div>
        </li>
      </ul>
    </div>
  `
            }] }
];
Progress.propDecorators = {
    baseClass: [{ type: HostBinding, args: ['class.progress',] }],
    linear: [{ type: Input }],
    editable: [{ type: Input }],
    selected: [{ type: Output }],
    stepsChange: [{ type: Output }],
    steps: [{ type: Input }]
};
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
 */
class ProgressModule {
}
ProgressModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    Progress
                ],
                exports: [
                    Progress
                ],
                imports: [
                    CommonModule,
                    IconModule,
                ]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class Layout {
    constructor() {
        this.baseClass = true;
    }
}
Layout.decorators = [
    { type: Component, args: [{
                selector: `suka-layout`,
                template: `
    <ng-content></ng-content>
  `
            }] }
];
Layout.propDecorators = {
    baseClass: [{ type: HostBinding, args: ['class.layout',] }]
};
if (false) {
    /** @type {?} */
    Layout.prototype.baseClass;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class LayoutSection {
    constructor() {
        this.baseClass = true;
        this.secondary = false;
        this.oneHalf = false;
        this.oneThird = false;
        this.annotated = false;
    }
}
LayoutSection.decorators = [
    { type: Component, args: [{
                selector: 'suka-layout-section',
                template: `
    <div *ngIf="annotated else elseTpl" class="annotation__wrapper">
      <div class="annotation">
        <h5>{{title}}</h5>
        <p>{{description}}</p>
      </div>
      <div class="annotation-content">
        <ng-content *ngTemplateOutlet="elseTpl"></ng-content>
      </div>
    </div>

    <ng-template #elseTpl>
      <ng-content></ng-content>
    </ng-template>
  `
            }] }
];
LayoutSection.propDecorators = {
    baseClass: [{ type: HostBinding, args: ['class.layout__section',] }],
    secondary: [{ type: HostBinding, args: ['class.layout__section--secondary',] }, { type: Input }],
    oneHalf: [{ type: HostBinding, args: ['class.layout__section--one-half',] }, { type: Input }],
    oneThird: [{ type: HostBinding, args: ['class.layout__section--one-third',] }, { type: Input }],
    annotated: [{ type: HostBinding, args: ['class.layout__section--annotated',] }, { type: Input }],
    title: [{ type: Input }],
    description: [{ type: Input }]
};
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
 */
class LayoutModule {
}
LayoutModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    Layout,
                    LayoutSection,
                ],
                exports: [
                    Layout,
                    LayoutSection,
                ],
                imports: [
                    CommonModule,
                ]
            },] }
];

/**
 * @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.
 */
class Banner {
    constructor() {
        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 EventEmitter();
        /**
         * Callback when the banner is dismissed.
         */
        this.dismiss = new EventEmitter();
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        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.
     * @return {?}
     */
    onAction() {
        this.action.emit();
    }
    /**
     * Closes the banner.
     * Emits the dismiss callback.
     * @param {?=} event
     * @return {?}
     */
    onClose(event) {
        this.animationState = 'closing';
        this.dismiss.emit();
    }
    /**
     * @param {?} event
     * @return {?}
     */
    onFadeFinished(event) {
        /** @type {?} */
        const itFinished = this.animationState === 'closing';
        if (itFinished) {
            this.hide = true;
        }
    }
}
Banner.decorators = [
    { type: Component, args: [{
                selector: 'suka-banner',
                template: `
    <div
      [@fadeAnimation]="{
        value: animationState,
        params: {
          fadeIn: 200,
          fadeOut: 200
        }
      }"
      (@fadeAnimation.done)="onFadeFinished($event)"
      class="banner banner--{{status}}"
      [ngClass]="{
        'banner--hidden': hide
      }"
    >
      <button
        *ngIf="dismissable"
        sukaButton="plain"
        (click)="onClose($event)"
        class="banner__close-button"
      >
        <suka-icon icon="x"></suka-icon>
      </button>

      <div class="banner__status-icon" *ngIf="status !== 'default'">
        <div class="banner__status-icon__wrapper">
          <suka-icon [icon]="statusIcon"></suka-icon>
        </div>
      </div>

      <div class="banner__content">
        <h5>{{title}}</h5>
        <div class="banner__description">
          <ng-content></ng-content>
        </div>
        <button *ngIf="actionLabel" sukaButton outline="true" (click)="onAction()">{{actionLabel}}</button>
      </div>
    </div>
  `,
                animations: [
                    trigger('fadeAnimation', [
                        state('default', style({ opacity: 1, transform: '*' })),
                        transition('void => *', [style({ opacity: 0, transform: 'scale(.9)' }), animate('150ms cubic-bezier(.17,.67,.78,1.21)')]),
                        transition('default => closing', animate('150ms', style({ opacity: 0, transform: 'scale(.9)' }))),
                    ]),
                ]
            }] }
];
Banner.propDecorators = {
    title: [{ type: Input }],
    status: [{ type: Input }],
    dismissable: [{ type: Input }],
    actionLabel: [{ type: Input }],
    action: [{ type: Output }],
    dismiss: [{ type: Output }]
};
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
 */
class BannerModule {
}
BannerModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    Banner
                ],
                exports: [
                    Banner
                ],
                imports: [
                    CommonModule,
                    IconModule,
                    ButtonModule,
                ]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/** @enum {string} */
const SnippetType = {
    single: 'single',
    multi: 'multi',
    inline: 'inline',
};
/** @enum {string} */
const 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',
};
// tslint:disable-next-line: component-class-suffix
class CodeSnippet {
    /**
     * Creates an instance of CodeSnippet.
     * @param {?} sanitizer
     */
    constructor(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++;
    }
    /**
     * @return {?}
     */
    get snippetSingleClass() {
        return this.display === SnippetType.single;
    }
    /**
     * @return {?}
     */
    get snippetMultiClass() {
        return this.display === SnippetType.multi;
    }
    /**
     * @return {?}
     */
    get snippetInlineClass() {
        return this.display === SnippetType.inline;
    }
    /**
     * @return {?}
     */
    get btnCopyClass() {
        return this.display === SnippetType.inline;
    }
    /**
     * @return {?}
     */
    get displayStyle() {
        return this.display !== SnippetType.inline ? 'block' : null;
    }
    /**
     * @return {?}
     */
    get attrType() {
        return this.display === SnippetType.inline ? 'button' : null;
    }
    /**
     * @return {?}
     */
    get shouldShowExpandButton() {
        return this.code ? this.code.nativeElement.getBoundingClientRect().height > 255 : false;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        if (this.highlight) {
            this.content = highlight(this.content, languages[this.language], this.language);
        }
        this.codeHtml = this.sanitizer.sanitize(SecurityContext.HTML, this.content);
    }
    /**
     * @return {?}
     */
    toggleSnippetExpansion() {
        this.expanded = !this.expanded;
    }
    /**
     * Copies the code from the `<code>` block to clipboard.
     * @return {?}
     */
    copyCode() {
        // create invisible, uneditable textarea with our code in it
        /** @type {?} */
        const 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 {?} */
        const 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.
     * @return {?}
     */
    onCopyButtonClicked() {
        this.copyCode();
        this.showFeedback = true;
        setTimeout((/**
         * @return {?}
         */
        () => {
            this.showFeedback = false;
        }), this.feedbackTimeout);
    }
    /**
     * Inline code snippet acts as button and makes the whole component clickable.
     *
     * This handles clicks in that case.
     * @return {?}
     */
    hostClick() {
        if (this.display !== SnippetType.inline) {
            return;
        }
        this.onCopyButtonClicked();
    }
}
/**
 * Variable used for creating unique ids for code-snippet components.
 */
CodeSnippet.codeSnippetCount = 0;
CodeSnippet.decorators = [
    { type: Component, args: [{
                selector: 'suka-code-snippet',
                template: `
    <ng-container *ngIf="display === 'inline'; else notInline">
      <span
        sukaTooltip="Copiado"
        tooltipTrigger="click"
        tooltipDuration="3000"
      >
        <ng-container *ngTemplateOutlet="codeTemplate"></ng-container>
      </span>
    </ng-container>

    <ng-template #notInline>
      <div class="snippet-container" attr.aria-label="Copy code snippet">
        <ng-container *ngIf="skeleton">
          <span *ngIf="display === 'single'; else multiSkeleton"></span>
          <ng-template #multiSkeleton>
            <span></span>
            <span></span>
            <span></span>
          </ng-template>
        </ng-container>
        <pre *ngIf="!skeleton"><ng-container *ngTemplateOutlet="codeTemplate"></ng-container></pre>
      </div>

      <button
        *ngIf="!skeleton"
        class="snippet-button"
        attr.aria-label="Copiar"
        (click)="onCopyButtonClicked()"
        [ngClass]="{
          'snippet-button--copied': showFeedback
        }"
        sukaTooltip="Copiado"
        tooltipTrigger="click"
        tooltipDuration="3000"
        tabindex="0">
        <suka-icon icon="copy"></suka-icon>
      </button>

      <button
        *ngIf="display === 'multi' && shouldShowExpandButton"
        class="btn snippet-btn--expand"
        (click)="toggleSnippetExpansion()"
        type="button">
        <span class="snippet-btn--text">{{expanded ? 'Mostrar menos' : 'Mostrar mas'}}
          <suka-icon icon="chevron-down"></suka-icon>
        </span>
      </button>
    </ng-template>
    <ng-template #codeTemplate>
      <code #code [innerHtml]="codeHtml"></code>
    </ng-template>
  `
            }] }
];
/** @nocollapse */
CodeSnippet.ctorParameters = () => [
    { type: DomSanitizer }
];
CodeSnippet.propDecorators = {
    display: [{ type: Input }],
    feedbackText: [{ type: Input }],
    content: [{ type: Input }],
    highlight: [{ type: Input }],
    language: [{ type: Input }],
    feedbackTimeout: [{ type: Input }],
    expanded: [{ type: HostBinding, args: ['class.snippet--expand',] }, { type: Input }],
    skeleton: [{ type: HostBinding, args: ['class.skeleton',] }, { type: Input }],
    snippetClass: [{ type: HostBinding, args: ['class.snippet',] }],
    snippetSingleClass: [{ type: HostBinding, args: ['class.snippet--single',] }],
    snippetMultiClass: [{ type: HostBinding, args: ['class.snippet--multi',] }],
    snippetInlineClass: [{ type: HostBinding, args: ['class.snippet--inline',] }],
    btnCopyClass: [{ type: HostBinding, args: ['class.btn--copy',] }],
    displayStyle: [{ type: HostBinding, args: ['style.display',] }],
    attrType: [{ type: HostBinding, args: ['attr.type',] }],
    code: [{ type: ViewChild, args: ['code', { static: false },] }],
    hostClick: [{ type: HostListener, args: ['click',] }]
};
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
 */
class CodeSnippetModule {
}
CodeSnippetModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    CodeSnippet,
                ],
                exports: [
                    CodeSnippet,
                ],
                imports: [
                    CommonModule,
                    FormsModule,
                    TooltipModule,
                    IconModule,
                ]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class EmptyState {
    constructor() {
        /**
         * Heading content.
         */
        this.heading = '';
        /**
         * Emits the primary action event.
         */
        this.primaryAction = new EventEmitter();
        /**
         * Emits the secondary action event.
         */
        this.secondaryAction = new EventEmitter();
    }
    /**
     * On button click, emits a primary o secondary action event accordingly
     * @param {?} type
     * @return {?}
     */
    onClick(type) {
        if (type === 'primary') {
            this.primaryAction.emit('primary');
        }
        if (type === 'secondary') {
            this.secondaryAction.emit('secondary');
        }
    }
}
EmptyState.decorators = [
    { type: Component, args: [{
                selector: 'suka-empty-state',
                template: `
    <div class="empty-state">
      <div class="empty-state__description">
        <h3 class="empty-state__heading">{{heading}}</h3>

        <div class="empty-state__content">
          <ng-content></ng-content>
        </div>
        <div
          *ngIf="primaryActionLabel"
          class="empty-state__actions"
        >
          <suka-button-group>
            <button
              sukaButton="primary"
              (click)="onClick('primary')"
            >
              {{primaryActionLabel}}
            </button>
            <button
              *ngIf="secondaryActionLabel"
              sukaButton="plain"
              (click)="onClick('secondary')"
            >
              {{secondaryActionLabel}}
            </button>
          </suka-button-group>
        </div>
      </div>

      <div class="empty-state__image">
        <img *ngIf="imgSrc" [src]="imgSrc" />
        <suka-icon *ngIf="!imgSrc" icon="inbox"></suka-icon>
      </div>
    </div>
  `
            }] }
];
EmptyState.propDecorators = {
    heading: [{ type: Input }],
    imgSrc: [{ type: Input }],
    primaryActionLabel: [{ type: Input }],
    primaryAction: [{ type: Output }],
    secondaryActionLabel: [{ type: Input }],
    secondaryAction: [{ type: Output }]
};
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
 */
class EmptyStateModule {
}
EmptyStateModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    EmptyState,
                ],
                exports: [
                    EmptyState,
                ],
                imports: [
                    CommonModule,
                    IconModule,
                    ButtonModule,
                ]
            },] }
];

/**
 * @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 {?} */
    let h;
    /** @type {?} */
    let s;
    /** @type {?} */
    const rabs = r / 255;
    /** @type {?} */
    const gabs = g / 255;
    /** @type {?} */
    const babs = b / 255;
    /** @type {?} */
    const v = Math.max(rabs, gabs, babs);
    /** @type {?} */
    const diff = v - Math.min(rabs, gabs, babs);
    /** @type {?} */
    const diffc = (/**
     * @param {?} c
     * @return {?}
     */
    c => (v - c) / 6 / diff + 1 / 2);
    /** @type {?} */
    const percentRoundFn = (/**
     * @param {?} num
     * @return {?}
     */
    num => Math.round(num * 100) / 100);
    if (diff === 0) {
        h = s = 0;
    }
    else {
        s = diff / v;
        /** @type {?} */
        const rr = diffc(rabs);
        /** @type {?} */
        const gg = diffc(gabs);
        /** @type {?} */
        const 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 {?} */
    const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    hex = hex.replace(shorthandRegex, (/**
     * @param {?} m
     * @param {?} r
     * @param {?} g
     * @param {?} b
     * @return {?}
     */
    (m, r, g, b) => {
        return r + r + g + g + b + b;
    }));
    /** @type {?} */
    const 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 {?} */
    const h = hue / 60;
    /** @type {?} */
    const s = saturation / 100;
    /** @type {?} */
    let v = value / 100;
    /** @type {?} */
    const hi = Math.floor(h) % 6;
    /** @type {?} */
    const f = h - Math.floor(h);
    /** @type {?} */
    const p = 255 * v * (1 - s);
    /** @type {?} */
    const q = 255 * v * (1 - (s * f));
    /** @type {?} */
    const t = 255 * v * (1 - (s * (1 - f)));
    v *= 255;
    /** @type {?} */
    let 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 {?} */
    const 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
 */
class ColorPicker {
    constructor() {
        this.baseClass = true;
        this.colorChange = new EventEmitter();
        this.showInput = true;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        /** @type {?} */
        const rgbColor = hexToRgb(this.color);
        if (rgbColor) {
            /** @type {?} */
            const hsv = rgbToHsv(rgbColor.r, rgbColor.g, rgbColor.b);
            this.hue = hsvToHex(hsv.h, 100, 100);
        }
    }
    /**
     * @param {?} event
     * @return {?}
     */
    onColorChange(event) {
        /** @type {?} */
        const rgbColor = hexToRgb(event);
        if (rgbColor) {
            /** @type {?} */
            const 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 {?}
     */
    onColorSelect(event) {
        this.color = event;
        this.emitColorChange(this.color);
    }
    /**
     * @private
     * @param {?} color
     * @return {?}
     */
    emitColorChange(color) {
        this.colorChange.emit(color);
    }
}
ColorPicker.decorators = [
    { type: Component, args: [{
                selector: 'suka-color-picker',
                template: `
  <div class="input-wrapper" *ngIf="showInput">
    <input
      [ngModel]="color"
      (ngModelChange)="onColorChange($event)"
    />
    <div
      class="color-div"
      [ngStyle]="{'background-color': color || 'white'}"
    ></div>
  </div>
  <div class="color-wrapper">
    <suka-color-palette
      [hue]="hue"
      [color]="color"
      (colorChange)="onColorSelect($event)"
    ></suka-color-palette>
    <suka-color-slider
      [(hue)]="hue"
    ></suka-color-slider>
  </div>
  `
            }] }
];
ColorPicker.propDecorators = {
    baseClass: [{ type: HostBinding, args: ['class.color-picker',] }],
    color: [{ type: Input }],
    colorChange: [{ type: Output }],
    showInput: [{ type: Input }]
};
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
 */
class ColorSlider {
    constructor() {
        this.baseClass = true;
        this.mousedown = false;
        this.hueChange = new EventEmitter();
    }
    /**
     * @param {?} evt
     * @return {?}
     */
    onMouseUp(evt) {
        this.mousedown = false;
    }
    /**
     * @return {?}
     */
    draw() {
        if (!this.ctx) {
            this.ctx = this.canvas.nativeElement.getContext('2d');
        }
        /** @type {?} */
        const width = this.canvas.nativeElement.width;
        /** @type {?} */
        const height = this.canvas.nativeElement.height;
        this.ctx.clearRect(0, 0, width, height);
        /** @type {?} */
        const 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 {?}
     */
    onMouseDown(evt) {
        this.mousedown = true;
        this.selectedHeight = evt.offsetY;
        this.draw();
        this.emitHue(evt.offsetY);
    }
    /**
     * @param {?} evt
     * @return {?}
     */
    onMouseMove(evt) {
        if (this.mousedown) {
            this.selectedHeight = evt.offsetY;
            this.draw();
            this.emitHue(evt.offsetY);
        }
    }
    /**
     * @param {?} y
     * @return {?}
     */
    emitHue(y) {
        if (y < 0) {
            y = 0;
        }
        else if (y >= 250) {
            y = 249;
        }
        /** @type {?} */
        const color = this.getColorAtPosition(y);
        this.hueChange.emit(rgbToHex(color.r, color.g, color.b));
    }
    /**
     * @param {?} y
     * @return {?}
     */
    getColorAtPosition(y) {
        /** @type {?} */
        const imageData = this.ctx.getImageData(5, y, 1, 1).data;
        return {
            r: imageData[0],
            g: imageData[1],
            b: imageData[2],
        };
    }
    /**
     * @param {?} changes
     * @return {?}
     */
    ngOnChanges(changes) {
        if (changes.hue && !changes.hue.isFirstChange()) {
            /** @type {?} */
            const rgbColor = hexToRgb(this.hue);
            if (rgbColor) {
                /** @type {?} */
                const hsvColor = rgbToHsv(rgbColor.r, rgbColor.g, rgbColor.b);
                /** @type {?} */
                const hueFactor = hsvColor.h / 360;
                this.selectedHeight = hueFactor * 250;
                this.draw();
            }
        }
    }
    /**
     * @return {?}
     */
    ngAfterViewInit() {
        if (this.hue) {
            /** @type {?} */
            const rgbColor = hexToRgb(this.hue);
            /** @type {?} */
            const hsvColor = rgbToHsv(rgbColor.r, rgbColor.g, rgbColor.b);
            /** @type {?} */
            const hueFactor = hsvColor.h / 360;
            this.selectedHeight = hueFactor * 250;
        }
        this.draw();
    }
}
ColorSlider.decorators = [
    { type: Component, args: [{
                selector: 'suka-color-slider',
                template: `
    <canvas
      #canvas
      class="color-slider"
      width="20"
      height="250"
      (mousedown)="onMouseDown($event)"
      (mousemove)="onMouseMove($event)"
    >
    </canvas>
  `
            }] }
];
ColorSlider.propDecorators = {
    baseClass: [{ type: HostBinding, args: ['class.color-slider-wrapper',] }],
    hue: [{ type: Input }],
    hueChange: [{ type: Output }],
    canvas: [{ type: ViewChild, args: ['canvas', { static: false },] }],
    onMouseUp: [{ type: HostListener, args: ['window:mouseup', ['$event'],] }]
};
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
 */
class ColorPalette {
    constructor() {
        this.baseClass = true;
        this.colorChange = new EventEmitter(true);
        this.mousedown = false;
    }
    /**
     * @return {?}
     */
    draw() {
        if (!this.ctx) {
            this.ctx = this.canvas.nativeElement.getContext('2d');
        }
        /** @type {?} */
        const width = this.canvas.nativeElement.width;
        /** @type {?} */
        const 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 {?} */
        const 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 {?} */
        const 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 {?}
     */
    ngOnChanges(changes) {
        if (changes.color && !changes.color.isFirstChange()) {
            /** @type {?} */
            const rgbColor = hexToRgb(this.color);
            if (rgbColor) {
                /** @type {?} */
                const 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 {?} */
            const pos = this.selectedPosition;
            if (pos) {
                this.colorChange.emit(this.getColorAtPosition(pos.x, pos.y));
            }
        }
    }
    /**
     * @return {?}
     */
    ngAfterViewInit() {
        if (this.color) {
            /** @type {?} */
            const rgbColor = hexToRgb(this.color);
            if (rgbColor) {
                /** @type {?} */
                const 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 {?}
     */
    onMouseUp(evt) {
        this.mousedown = false;
    }
    /**
     * @param {?} evt
     * @return {?}
     */
    onMouseDown(evt) {
        this.mousedown = true;
        /** @type {?} */
        const xPos = evt.offsetX < 0 ? 0 : evt.offsetX >= 250 ? 249 : evt.offsetX;
        /** @type {?} */
        const 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 {?}
     */
    onMouseMove(evt) {
        if (this.mousedown) {
            /** @type {?} */
            const xPos = evt.offsetX < 0 ? 0 : evt.offsetX >= 250 ? 249 : evt.offsetX;
            /** @type {?} */
            const 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 {?}
     */
    emitColor(x, y) {
        /** @type {?} */
        const rgbaColor = this.getColorAtPosition(x, y);
        this.colorChange.emit(rgbaColor);
    }
    /**
     * @param {?} x
     * @param {?} y
     * @return {?}
     */
    getColorAtPosition(x, y) {
        /** @type {?} */
        const imageData = this.ctx.getImageData(x, y, 1, 1).data;
        return rgbToHex(imageData[0], imageData[1], imageData[2]);
    }
}
ColorPalette.decorators = [
    { type: Component, args: [{
                selector: 'suka-color-palette',
                template: `
    <canvas
      #canvas
      class="color-palette"
      width="250"
      height="250"
      (mousedown)="onMouseDown($event)"
      (mousemove)="onMouseMove($event)"
    >
    </canvas>
  `
            }] }
];
ColorPalette.propDecorators = {
    baseClass: [{ type: HostBinding, args: ['class.color-palette-container',] }],
    hue: [{ type: Input }],
    color: [{ type: Input }],
    colorChange: [{ type: Output }],
    canvas: [{ type: ViewChild, args: ['canvas', { static: false },] }],
    onMouseUp: [{ type: HostListener, args: ['window:mouseup', ['$event'],] }]
};
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
 */
class ColorInput {
    /**
     * Creates an instance of `ColorInput`.
     * @param {?} _overlay
     * @param {?} _viewContainerRef
     */
    constructor(_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 EventEmitter();
        /**
         * Called when number input is blurred. Needed to properly implement `ControlValueAccessor`.
         */
        this.onTouched = (/**
         * @return {?}
         */
        () => { });
        /**
         * Method set in `registerOnChange` to propagate changes back to the form.
         */
        this.propagateChange = (/**
         * @param {?} _
         * @return {?}
         */
        (_) => { });
        ColorInput.colorInputCount++;
    }
    /**
     * This is the initial value set to the component
     * @param {?} value The input value.
     * @return {?}
     */
    writeValue(value) {
        this.value = value;
    }
    /**
     * Sets a method in order to propagate changes back to the form.
     * @param {?} fn
     * @return {?}
     */
    registerOnChange(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.
     * @return {?}
     */
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    /**
     * Sets the disabled state through the model
     * @param {?} isDisabled
     * @return {?}
     */
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
    }
    /**
     * Creates a class of `NumberChange` to emit the change in the `Number`.
     * @return {?}
     */
    emitChangeEvent() {
        this.change.emit(this.value);
        this.propagateChange(this.value);
    }
    /**
     * @param {?} value
     * @return {?}
     */
    onColorChange(value) {
        this.value = value;
        this.emitChangeEvent();
    }
    /**
     * @param {?} event
     * @return {?}
     */
    onColorInputChange(event) {
        this.value = event.target.value;
        this.emitChangeEvent();
    }
    /**
     * Opens the color picker dialog
     * @return {?}
     */
    openColorDialog() {
        if (!this._overlayRef) {
            /** @type {?} */
            const 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,
            });
            this._overlayRef.backdropClick().subscribe((/**
             * @return {?}
             */
            () => this._overlayRef.detach()));
            this._portal = new TemplatePortal(this.dialog, this._viewContainerRef);
        }
        this._overlayRef.attach(this._portal);
    }
    /**
     * Closes the color picker dialog
     * @return {?}
     */
    closeColorDialog() {
        this._overlayRef.detach();
    }
    /**
     * Checks if it is a template
     * @param {?} value
     * @return {?}
     */
    isTemplate(value) {
        return value instanceof TemplateRef;
    }
}
/**
 * Variable used for creating unique ids for color input components.
 */
ColorInput.colorInputCount = 0;
ColorInput.decorators = [
    { type: Component, args: [{
                selector: 'suka-color-input',
                template: `
    <label *ngIf="skeleton && label" class="label skeleton"></label>
    <label *ngIf="!skeleton && label" [for]="id" class="label">
      <ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
      <ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
    </label>
    <div *ngIf="!skeleton && helperText" class="form__helper-text">
      <ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
      <ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
    </div>
    <div
      data-color-input
      [attr.data-invalid]="(invalid ? true : null)"
      [attr.data-valid]="(valid ? true : null)"
      class="color-input"
      [ngClass]="{
        'color-input--nolabel': !label,
        'color-input--helpertext': helperText,
        'skeleton' : skeleton,
        'color-input--disabled': disabled
      }">
      <div class="color-input__input-wrapper">
        <div
          class="color-input__color-preview"
          *ngIf="value"
          [ngStyle]="{'background-color': value || 'white'}"
          (click)="openColorDialog()"
        ></div>
        <svg
          class="color-input__color-preview-icon"
          *ngIf="!value"
          width="16"
          height="16"
          viewBox="0 0 16 16"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          (click)="openColorDialog()"
        >
          <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"/>
        </svg>

        <input
          #origin
          type="text"
          [id]="id"
          [placeholder]="placeholder"
          [value]="value"
          [disabled]="disabled"
          [required]="required"
          (focus)="openColorDialog()"
          disabled="true"
          (change)="onColorInputChange($event)"/>

        <suka-icon *ngIf="!skeleton && invalid" icon="alert-circle" class="color-input__invalid"></suka-icon>
        <suka-icon *ngIf="!skeleton && valid" icon="check" class="color-input__valid"></suka-icon>
      </div>
      <div *ngIf="invalid" class="form-requirement">
        <ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
        <ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
      </div>
    </div>

    <ng-template #colorPickerDialog>
      <div class="color-picker-dialog">
        <suka-color-picker [color]="value" (colorChange)="onColorChange($event)">
        </suka-color-picker>
      </div>
    </ng-template>
  `,
                providers: [
                    {
                        provide: NG_VALUE_ACCESSOR,
                        useExisting: ColorInput,
                        multi: true
                    }
                ]
            }] }
];
/** @nocollapse */
ColorInput.ctorParameters = () => [
    { type: Overlay },
    { type: ViewContainerRef }
];
ColorInput.propDecorators = {
    containerClass: [{ type: HostBinding, args: ['class.form-item',] }],
    disabled: [{ type: Input }],
    skeleton: [{ type: Input }],
    invalid: [{ type: Input }],
    valid: [{ type: Input }],
    id: [{ type: Input }],
    required: [{ type: Input }],
    value: [{ type: Input }],
    placeholder: [{ type: Input }],
    label: [{ type: Input }],
    helperText: [{ type: Input }],
    invalidText: [{ type: Input }],
    change: [{ type: Output }],
    origin: [{ type: ViewChild, args: ['origin', { static: false },] }],
    dialog: [{ type: ViewChild, args: ['colorPickerDialog', { static: false },] }]
};
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
 */
class ColorPickerModule {
}
ColorPickerModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    ColorPicker,
                    ColorSlider,
                    ColorPalette,
                    ColorInput,
                ],
                exports: [
                    ColorPicker,
                    ColorSlider,
                    ColorPalette,
                    ColorInput,
                ],
                imports: [
                    CommonModule,
                    OverlayModule,
                    FormsModule,
                    IconModule,
                ],
                entryComponents: [
                    ColorPicker,
                ],
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */

export { Accordion, AccordionItem, AccordionModule, Avatar, AvatarModule, Badge, BadgeModule, Banner, BannerModule, Breadcrumb, BreadcrumbModule, Button, ButtonGroup, ButtonModule, ButtonRadio, ButtonRadioChange, ButtonRadioGroup, ButtonRadioModule, Card, CardFooter, CardHeader, CardModule, CardSection, Checkbox, CheckboxModule, CodeSnippet, CodeSnippetModule, ColorInput, ColorPalette, ColorPicker, ColorPickerModule, ColorSlider, Container, ContainerModule, DatePickerModule, EmptyState, EmptyStateModule, FileUploader, FileUploaderModule, FormLayout, FormLayoutModule, Frame, FrameModule, GridModule, Icon, IconModule, InputGroup, InputGroupItem, InputGroupModule, InputModule, Label, Layout, LayoutModule, LayoutSection, Link, LinkModule, List, ListItemDirective, ListModule, Loading, LoadingModule, MobileNavigation, ModalContainer, ModalDirective, ModalModule, ModalRef, ModalService, Navigation, NavigationItem, NavigationMenu, NavigationModule, Number, NumberModule, OptGroup, Option, Page, PageEvent, PageModule, Pagination, PaginationModule, Popover, PopoverActionItem, PopoverActionList, PopoverContainer, PopoverModule, PopoverSection, Progress, ProgressModule, Radio, RadioChange, RadioGroup, RadioModule, Search, SearchModule, Select, SelectModule, SnippetLanguage, SnippetType, SpacingModule, Stack, StackItem, StackModule, SukaCell, SukaCellDef, SukaColumnDef, SukaFooterCell, SukaFooterCellDef, SukaFooterRow, SukaFooterRowDef, SukaHeaderCell, SukaHeaderCellDef, SukaHeaderRow, SukaHeaderRowDef, SukaRow, SukaRowDef, SukaTable, SukaTableDataSource, TabItem, TableModule, Tabs, TabsModule, TextArea, TextInput, ToastContainer, ToastModule, ToastRef, ToastService, Toggle, ToggleModule, Tooltip, TooltipContainer, TooltipModule, Topbar, TopbarGlobal, TopbarItem, TopbarMenu, TopbarModule, TopbarNavigation, GridDirective as ɵa, RowDirective as ɵb, DatePickerInputModule as ɵba, DatePickerInput as ɵbb, toastAnimations as ɵbc, TOAST_CONFIG_DATA as ɵbd, ColumnDirective as ɵc, MarginDirective as ɵd, MarginTopDirective as ɵe, MarginBottomDirective as ɵf, MarginLeftDirective as ɵg, MarginRightDirective as ɵh, MarginHorizontalDirective as ɵi, MarginVerticalDirective as ɵj, PaddingDirective as ɵk, PaddingTopDirective as ɵl, PaddingBottomDirective as ɵm, PaddingLeftDirective as ɵn, PaddingRightDirective as ɵo, PaddingHorizontalDirective as ɵp, PaddingVerticalDirective as ɵq, MODAL_CONTENT_DATA as ɵr, POPOVER_CONTENT_DATA as ɵs, PopoverRef as ɵt, PopoverService as ɵv, SukaTableSkeleton as ɵw, PageHeader as ɵx, File as ɵy, DatePicker as ɵz };
//# sourceMappingURL=kushki-ng-suka.js.map