@kushki/ng-suka
Version:
<p align="center"> <h1 align="center">Suka Components Angular</h1> <p align="center"> An Angular implementation of the Suka Design System </p> </p>
993 lines (985 loc) • 756 kB
JavaScript
import { Component, ElementRef, Input, HostBinding, NgModule, Directive, ChangeDetectorRef, Renderer2, ViewContainerRef, ComponentFactoryResolver, ContentChildren, EventEmitter, ChangeDetectionStrategy, Output, ViewChild, TemplateRef, HostListener, forwardRef, Host, Inject, InjectionToken, Injectable, Injector, ViewEncapsulation, Optional } 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, fromEvent, BehaviorSubject, Subscription, merge, of, combineLatest } from 'rxjs';
import { takeWhile, filter, take, skip, 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 } from '@angular/cdk/portal';
import { __assign, __extends, __read, __spread, __values } from 'tslib';
import { CDK_TABLE_TEMPLATE, CdkTable, CdkCellDef, CdkHeaderCellDef, CdkFooterCellDef, CdkColumnDef, CdkHeaderCell, CdkFooterCell, CdkCell, CdkHeaderRowDef, CdkFooterRowDef, CdkRowDef, CDK_ROW_TEMPLATE, CdkHeaderRow, 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';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var Loading = /** @class */ (function () {
function Loading(elementRef) {
this.elementRef = elementRef;
this.title = 'Loading';
/**
* set to `false` to stop the loading animation
*/
this.isActive = true;
/**
* Specify the size of the button
*/
this.size = 'normal';
/**
* Set to `true` to make loader with an overlay.
*/
this.overlay = false;
}
Loading.decorators = [
{ type: Component, args: [{
selector: 'suka-loading',
template: "\n <div\n [ngClass]=\"{\n 'loading--small': size === 'sm',\n 'loading--stop': !isActive && !overlay,\n 'loading-overlay--stop': !isActive && overlay\n }\"\n class=\"loading\">\n <svg class=\"loading__svg\" viewBox=\"-75 -75 150 150\">\n <title>{{title}}</title>\n <circle class=\"loading__stroke\" cx=\"0\" cy=\"0\" r=\"37.5\" />\n </svg>\n </div>\n "
}] }
];
/** @nocollapse */
Loading.ctorParameters = function () { return [
{ type: ElementRef }
]; };
Loading.propDecorators = {
title: [{ type: Input }],
isActive: [{ type: Input }],
size: [{ type: Input }],
overlay: [{ type: Input }, { type: HostBinding, args: ['class.loading-overlay',] }]
};
return Loading;
}());
if (false) {
/** @type {?} */
Loading.prototype.title;
/**
* set to `false` to stop the loading animation
* @type {?}
*/
Loading.prototype.isActive;
/**
* Specify the size of the button
* @type {?}
*/
Loading.prototype.size;
/**
* Set to `true` to make loader with an overlay.
* @type {?}
*/
Loading.prototype.overlay;
/** @type {?} */
Loading.prototype.elementRef;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var LoadingModule = /** @class */ (function () {
function LoadingModule() {
}
LoadingModule.decorators = [
{ type: NgModule, args: [{
declarations: [
Loading
],
exports: [
Loading
],
imports: [
CommonModule
]
},] }
];
return LoadingModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var Button = /** @class */ (function () {
function Button(ref, el, renderer, viewContainerRef, componentFactoryResolver) {
this.ref = ref;
this.el = el;
this.renderer = renderer;
this.viewContainerRef = viewContainerRef;
this.componentFactoryResolver = componentFactoryResolver;
this.sukaButton = 'basic';
this.size = 'md';
this.class = '';
this.skeleton = false;
this.outline = false;
this.hover = false;
this.fullWidth = false;
this.inGroup = false;
this.loading = false;
}
Object.defineProperty(Button.prototype, "attrClass", {
get: /**
* @return {?}
*/
function () {
return "btn--" + (this.sukaButton ? this.sukaButton : 'basic') + " " + this.class;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Button.prototype, "buttonSmall", {
get: /**
* @return {?}
*/
function () {
return this.size === 'sm';
},
enumerable: true,
configurable: true
});
Object.defineProperty(Button.prototype, "buttonLarge", {
get: /**
* @return {?}
*/
function () {
return this.size === 'lg';
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
Button.prototype.ngOnInit = /**
* @return {?}
*/
function () {
// Create the spinner
/** @type {?} */
var factory = this.componentFactoryResolver.resolveComponentFactory(Loading);
/** @type {?} */
var componentRef = this.viewContainerRef.createComponent(factory);
this.loadingSpinner = componentRef.instance;
this.loadingSpinner.size = 'sm';
this.renderer.setStyle(this.loadingSpinner.elementRef.nativeElement, 'display', 'none');
this.renderer.appendChild(this.el.nativeElement, this.loadingSpinner.elementRef.nativeElement);
if (this.loading) {
this.renderer.setStyle(this.loadingSpinner.elementRef.nativeElement, 'display', 'inherit');
this.el.nativeElement.disabled = true;
}
};
/**
* @param {?} changes
* @return {?}
*/
Button.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
if (this.loadingSpinner) {
if (this.loading) {
this.renderer.setStyle(this.loadingSpinner.elementRef.nativeElement, 'display', 'inherit');
}
else {
this.renderer.setStyle(this.loadingSpinner.elementRef.nativeElement, 'display', 'none');
}
this.el.nativeElement.disabled = changes.loading.currentValue;
}
};
/**
* @return {?}
*/
Button.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
this.ref.detectChanges();
};
Button.decorators = [
{ type: Directive, args: [{
selector: '[sukaButton]'
},] }
];
/** @nocollapse */
Button.ctorParameters = function () { return [
{ type: ChangeDetectorRef },
{ type: ElementRef },
{ type: Renderer2 },
{ type: ViewContainerRef },
{ type: ComponentFactoryResolver }
]; };
Button.propDecorators = {
sukaButton: [{ type: Input }],
size: [{ type: Input }],
class: [{ type: Input }],
attrClass: [{ type: HostBinding, args: ['attr.class',] }],
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',] }]
};
return Button;
}());
if (false) {
/** @type {?} */
Button.prototype.sukaButton;
/** @type {?} */
Button.prototype.size;
/** @type {?} */
Button.prototype.class;
/** @type {?} */
Button.prototype.skeleton;
/** @type {?} */
Button.prototype.outline;
/** @type {?} */
Button.prototype.hover;
/** @type {?} */
Button.prototype.fullWidth;
/** @type {?} */
Button.prototype.inGroup;
/** @type {?} */
Button.prototype.loading;
/** @type {?} */
Button.prototype.originalInnerText;
/** @type {?} */
Button.prototype.loadingSpinner;
/**
* @type {?}
* @private
*/
Button.prototype.ref;
/**
* @type {?}
* @private
*/
Button.prototype.el;
/**
* @type {?}
* @private
*/
Button.prototype.renderer;
/**
* @type {?}
* @private
*/
Button.prototype.viewContainerRef;
/**
* @type {?}
* @private
*/
Button.prototype.componentFactoryResolver;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ButtonGroup = /** @class */ (function () {
function ButtonGroup() {
this.baseClass = true;
}
/**
* @return {?}
*/
ButtonGroup.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
this.buttons.toArray().forEach((/**
* @param {?} button
* @return {?}
*/
function (button) {
button.inGroup = true;
}));
};
ButtonGroup.decorators = [
{ type: 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,] }]
};
return ButtonGroup;
}());
if (false) {
/** @type {?} */
ButtonGroup.prototype.baseClass;
/**
* Join buttons as segmented group
* @type {?}
*/
ButtonGroup.prototype.segmented;
/** @type {?} */
ButtonGroup.prototype.buttons;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ButtonModule = /** @class */ (function () {
function ButtonModule() {
}
ButtonModule.decorators = [
{ type: NgModule, args: [{
declarations: [Button, ButtonGroup],
exports: [Button, ButtonGroup],
imports: [CommonModule, LoadingModule],
entryComponents: [Loading],
},] }
];
return ButtonModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @enum {number} */
var CheckboxState = {
Init: 0,
Indeterminate: 1,
Checked: 2,
Unchecked: 3,
};
CheckboxState[CheckboxState.Init] = 'Init';
CheckboxState[CheckboxState.Indeterminate] = 'Indeterminate';
CheckboxState[CheckboxState.Checked] = 'Checked';
CheckboxState[CheckboxState.Unchecked] = 'Unchecked';
var CheckboxChange = /** @class */ (function () {
function CheckboxChange() {
}
return CheckboxChange;
}());
if (false) {
/** @type {?} */
CheckboxChange.prototype.source;
/** @type {?} */
CheckboxChange.prototype.checked;
}
var Checkbox = /** @class */ (function () {
/**
* Creates an instance of `Checkbox`.
*/
function Checkbox(changeDetectorRef) {
this.changeDetectorRef = changeDetectorRef;
/**
* Size of the checkbox.
*/
this.size = 'md';
/**
* Set to `true` for checkbox to be rendered without any classes on the host element.
*/
this.inline = false;
/**
* Set to `true` for a disabled checkbox.
*/
this.disabled = false;
/**
* Set to `true` for a loading checkbox.
*/
this.skeleton = false;
/**
* Set to `true` to hide the checkbox labels.
*/
this.hideLabel = false;
/**
* The unique id for the checkbox component.
*/
this.id = "checkbox-" + Checkbox.checkboxCount;
/**
* Used to set the `aria-label` attribute on the input element.
*/
// tslint:disable-next-line:no-input-rename
this.ariaLabel = '';
/**
* Emits event notifying other classes when a change in state occurs on a checkbox after a
* click.
*/
// tslint:disable-next-line: no-output-native
this.change = new 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 {?}
*/
function () { });
/**
* Method set in `registerOnChange` to propagate changes back to the form.
*/
this.propagateChange = (/**
* @param {?} _
* @return {?}
*/
function (_) { });
Checkbox.checkboxCount++;
}
Object.defineProperty(Checkbox.prototype, "indeterminate", {
/**
* Reflects whether the checkbox state is indeterminate.
*/
get: /**
* Reflects whether the checkbox state is indeterminate.
* @return {?}
*/
function () {
return this._indeterminate;
},
/**
* Set the checkbox's indeterminate state to match the parameter and transition the view to reflect the change.
*/
set: /**
* Set the checkbox's indeterminate state to match the parameter and transition the view to reflect the change.
* @param {?} indeterminate
* @return {?}
*/
function (indeterminate) {
/** @type {?} */
var changed = this._indeterminate !== indeterminate;
this._indeterminate = indeterminate;
if (changed) {
this.transitionCheckboxState(CheckboxState.Indeterminate);
}
else {
this.transitionCheckboxState(this.checked ? CheckboxState.Checked : CheckboxState.Unchecked);
}
this.indeterminateChange.emit(this._indeterminate);
},
enumerable: true,
configurable: true
});
Object.defineProperty(Checkbox.prototype, "checked", {
/**
* Returns value `true` if state is selected for the checkbox.
*/
get: /**
* Returns value `true` if state is selected for the checkbox.
* @return {?}
*/
function () {
return this._checked;
},
/**
* Updating the state of a checkbox to match the state of the parameter passed in.
*/
set: /**
* Updating the state of a checkbox to match the state of the parameter passed in.
* @param {?} checked
* @return {?}
*/
function (checked) {
var _this = this;
if (checked !== this.checked) {
if (this._indeterminate) {
Promise.resolve().then((/**
* @return {?}
*/
function () {
_this._indeterminate = false;
_this.indeterminateChange.emit(_this._indeterminate);
}));
}
this._checked = checked;
this.changeDetectorRef.markForCheck();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(Checkbox.prototype, "checkboxWrapperClass", {
get: /**
* @return {?}
*/
function () {
return !this.inline;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Checkbox.prototype, "formItemClass", {
get: /**
* @return {?}
*/
function () {
return !this.inline;
},
enumerable: true,
configurable: true
});
/**
* Toggle the selected state of the checkbox.
*/
/**
* Toggle the selected state of the checkbox.
* @return {?}
*/
Checkbox.prototype.toggle = /**
* Toggle the selected state of the checkbox.
* @return {?}
*/
function () {
this.checked = !this.checked;
};
// this is the initial value set to the component
// this is the initial value set to the component
/**
* @param {?} value
* @return {?}
*/
Checkbox.prototype.writeValue =
// this is the initial value set to the component
/**
* @param {?} value
* @return {?}
*/
function (value) {
this.checked = !!value;
};
/**
* Sets a method in order to propagate changes back to the form.
*/
/**
* Sets a method in order to propagate changes back to the form.
* @param {?} fn
* @return {?}
*/
Checkbox.prototype.registerOnChange = /**
* Sets a method in order to propagate changes back to the form.
* @param {?} fn
* @return {?}
*/
function (fn) {
this.propagateChange = fn;
};
/**
* Registers a callback to be triggered when the control has been touched.
* @param fn Callback to be triggered when the checkbox is touched.
*/
/**
* Registers a callback to be triggered when the control has been touched.
* @param {?} fn Callback to be triggered when the checkbox is touched.
* @return {?}
*/
Checkbox.prototype.registerOnTouched = /**
* Registers a callback to be triggered when the control has been touched.
* @param {?} fn Callback to be triggered when the checkbox is touched.
* @return {?}
*/
function (fn) {
this.onTouched = fn;
};
/**
* Executes on the event of a change within `Checkbox` to block propagation.
*/
/**
* Executes on the event of a change within `Checkbox` to block propagation.
* @param {?} event
* @return {?}
*/
Checkbox.prototype.onChange = /**
* Executes on the event of a change within `Checkbox` to block propagation.
* @param {?} event
* @return {?}
*/
function (event) {
event.stopPropagation();
};
/**
* Handles click events on the `Checkbox` and emits changes to other classes.
*/
/**
* Handles click events on the `Checkbox` and emits changes to other classes.
* @param {?} event
* @return {?}
*/
Checkbox.prototype.onClick = /**
* Handles click events on the `Checkbox` and emits changes to other classes.
* @param {?} event
* @return {?}
*/
function (event) {
if (!this.disabled) {
this.toggle();
this.transitionCheckboxState(this._checked ? CheckboxState.Checked : CheckboxState.Unchecked);
this.emitChangeEvent();
}
};
/**
* Handles changes between checkbox states.
*/
/**
* Handles changes between checkbox states.
* @param {?} newState
* @return {?}
*/
Checkbox.prototype.transitionCheckboxState = /**
* Handles changes between checkbox states.
* @param {?} newState
* @return {?}
*/
function (newState) {
/** @type {?} */
var oldState = this.currentCheckboxState;
// Indeterminate has to be set always if it's transitioned to
// checked has to be set before indeterminate or it overrides
// indeterminate's dash
if (newState === CheckboxState.Indeterminate) {
this.checked = false;
this.inputCheckbox.nativeElement.indeterminate = true;
}
if (oldState === newState) {
return;
}
this.currentCheckboxState = newState;
};
/**
* Creates instance of `CheckboxChange` used to propagate the change event.
*/
/**
* Creates instance of `CheckboxChange` used to propagate the change event.
* @return {?}
*/
Checkbox.prototype.emitChangeEvent = /**
* Creates instance of `CheckboxChange` used to propagate the change event.
* @return {?}
*/
function () {
/** @type {?} */
var event = new CheckboxChange();
event.source = this;
event.checked = this.checked;
this.propagateChange(this.checked);
this.change.emit(event);
};
/**
* Updates the checkbox if it is in the indeterminate state.
*/
/**
* Updates the checkbox if it is in the indeterminate state.
* @return {?}
*/
Checkbox.prototype.ngAfterViewInit = /**
* Updates the checkbox if it is in the indeterminate state.
* @return {?}
*/
function () {
if (this.indeterminate) {
this.inputCheckbox.nativeElement.indeterminate = true;
this.checked = false;
}
};
/**
* Variable used for creating unique ids for checkbox components.
*/
Checkbox.checkboxCount = 0;
Checkbox.decorators = [
{ type: Component, args: [{
selector: 'suka-checkbox',
template: "\n <input\n #inputCheckbox\n class=\"checkbox\"\n type=\"checkbox\"\n [id]=\"id\"\n [value]=\"value\"\n [name]=\"name\"\n [required]=\"required\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [indeterminate]=\"indeterminate\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-checked]=\"(indeterminate ? 'mixed' : checked)\"\n (change)=\"onChange($event)\"\n (click)=\"onClick($event)\">\n <label\n [for]=\"id\"\n class=\"checkbox-label\"\n [ngClass]=\"{\n 'skeleton' : skeleton\n }\">\n <span [ngClass]=\"{'visually-hidden' : hideLabel}\">\n <ng-content></ng-content>\n </span>\n </label>\n ",
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: Checkbox,
multi: true
}
],
changeDetection: ChangeDetectionStrategy.OnPush
}] }
];
/** @nocollapse */
Checkbox.ctorParameters = function () { return [
{ 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 },] }]
};
return Checkbox;
}());
if (false) {
/**
* Variable used for creating unique ids for checkbox components.
* @type {?}
*/
Checkbox.checkboxCount;
/**
* Size of the checkbox.
* @type {?}
*/
Checkbox.prototype.size;
/**
* Set to `true` for checkbox to be rendered with nested styles.
* @type {?}
*/
Checkbox.prototype.nested;
/**
* Set to `true` for checkbox to be rendered without any classes on the host element.
* @type {?}
*/
Checkbox.prototype.inline;
/**
* Set to `true` for a disabled checkbox.
* @type {?}
*/
Checkbox.prototype.disabled;
/**
* Set to `true` for a loading checkbox.
* @type {?}
*/
Checkbox.prototype.skeleton;
/**
* Set to `true` to hide the checkbox labels.
* @type {?}
*/
Checkbox.prototype.hideLabel;
/**
* Sets the name attribute on the `input` element.
* @type {?}
*/
Checkbox.prototype.name;
/**
* The unique id for the checkbox component.
* @type {?}
*/
Checkbox.prototype.id;
/**
* Reflects the required attribute of the `input` element.
* @type {?}
*/
Checkbox.prototype.required;
/**
* Sets the value attribute on the `input` element.
* @type {?}
*/
Checkbox.prototype.value;
/**
* Used to set the `aria-label` attribute on the input element.
* @type {?}
*/
Checkbox.prototype.ariaLabel;
/**
* Used to set the `aria-labelledby` attribute on the input element.
* @type {?}
*/
Checkbox.prototype.ariaLabelledby;
/**
* Emits event notifying other classes when a change in state occurs on a checkbox after a
* click.
* @type {?}
*/
Checkbox.prototype.change;
/**
* Emits event notifying other classes when a change in state occurs specifically
* on an indeterminate checkbox.
* @type {?}
*/
Checkbox.prototype.indeterminateChange;
/**
* Set to `true` if the input checkbox is selected (or checked).
* @type {?}
*/
Checkbox.prototype._checked;
/**
* Set to `true` if the input checkbox is in state indeterminate.
* @type {?}
*/
Checkbox.prototype._indeterminate;
/** @type {?} */
Checkbox.prototype.currentCheckboxState;
/**
* Maintains a reference to the view DOM element of the `Checkbox`.
* @type {?}
*/
Checkbox.prototype.inputCheckbox;
/**
* Called when checkbox is blurred. Needed to properly implement `ControlValueAccessor`.
* @type {?}
*/
Checkbox.prototype.onTouched;
/**
* Method set in `registerOnChange` to propagate changes back to the form.
* @type {?}
*/
Checkbox.prototype.propagateChange;
/**
* @type {?}
* @protected
*/
Checkbox.prototype.changeDetectorRef;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var CheckboxModule = /** @class */ (function () {
function CheckboxModule() {
}
CheckboxModule.decorators = [
{ type: NgModule, args: [{
declarations: [
Checkbox
],
exports: [
Checkbox
],
imports: [
CommonModule,
FormsModule
]
},] }
];
return CheckboxModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
// tslint:disable: max-line-length
/**
* @record
*/
function IconDef() { }
if (false) {
/** @type {?} */
IconDef.prototype.name;
/** @type {?} */
IconDef.prototype.template;
}
/** @type {?} */
var iconDefs = [
{
name: 'activity',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>activity</title>\n <path d=\"M14.667 7.333h-2.667c-0.293 0-0.541 0.189-0.633 0.456l-1.367 4.103-3.367-10.103c-0.117-0.349-0.494-0.538-0.843-0.422-0.207 0.069-0.357 0.229-0.422 0.422l-1.848 5.544h-2.186c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h2.667c0.282-0.002 0.54-0.178 0.633-0.456l1.367-4.103 3.367 10.103c0.065 0.193 0.215 0.353 0.421 0.421 0.349 0.117 0.727-0.073 0.843-0.421l1.849-5.544h2.186c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'airplay',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>airplay</title>\n <path d=\"M3.333 10.667h-0.667c-0.184 0-0.35-0.074-0.471-0.195s-0.195-0.287-0.195-0.471v-6.667c0-0.184 0.074-0.35 0.195-0.471s0.287-0.195 0.471-0.195h10.667c0.184 0 0.35 0.074 0.471 0.195s0.195 0.287 0.195 0.471v6.667c0 0.184-0.074 0.35-0.195 0.471s-0.287 0.195-0.471 0.195h-0.667c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h0.667c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414v-6.667c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586h-10.667c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414v6.667c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h0.667c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM8.512 9.573c-0.023-0.029-0.053-0.058-0.085-0.085-0.283-0.236-0.703-0.197-0.939 0.085l-3.333 4c-0.096 0.115-0.155 0.264-0.155 0.427 0 0.368 0.299 0.667 0.667 0.667h6.667c0.15 0.001 0.302-0.050 0.427-0.155 0.283-0.236 0.321-0.656 0.085-0.939zM8 11.041l1.91 2.292h-3.82z\"></path>\n </svg>\n "
},
{
name: 'alert-circle',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>alert-circle</title>\n <path d=\"M15.333 8c0-2.025-0.821-3.859-2.148-5.185s-3.161-2.148-5.185-2.148-3.859 0.821-5.185 2.148-2.148 3.161-2.148 5.185 0.821 3.859 2.148 5.185 3.161 2.148 5.185 2.148 3.859-0.821 5.185-2.148 2.148-3.161 2.148-5.185zM14 8c0 1.657-0.671 3.156-1.757 4.243s-2.585 1.757-4.243 1.757-3.156-0.671-4.243-1.757-1.757-2.585-1.757-4.243 0.671-3.156 1.757-4.243 2.585-1.757 4.243-1.757 3.156 0.671 4.243 1.757 1.757 2.585 1.757 4.243zM7.333 5.333v2.667c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-2.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667zM8.667 10.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667 0.299 0.667 0.667 0.667 0.667-0.299 0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'alert-octagon',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>alert-octagon</title>\n <path d=\"M5.24 0.667c-0.171 0-0.341 0.065-0.471 0.195l-3.907 3.907c-0.121 0.121-0.195 0.287-0.195 0.471v5.52c0 0.171 0.065 0.341 0.195 0.471l3.907 3.907c0.121 0.121 0.287 0.195 0.471 0.195h5.52c0.171 0 0.341-0.065 0.471-0.195l3.907-3.907c0.121-0.121 0.195-0.287 0.195-0.471v-5.52c0-0.171-0.065-0.341-0.195-0.471l-3.907-3.907c-0.121-0.121-0.287-0.195-0.471-0.195zM5.516 2h4.968l3.516 3.516v4.968l-3.516 3.516h-4.968l-3.516-3.516v-4.968zM7.333 5.333v2.667c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-2.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667zM8.667 10.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667 0.299 0.667 0.667 0.667 0.667-0.299 0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'alert-triangle',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>alert-triangle</title>\n <path d=\"M7.432 2.916c0.049-0.082 0.123-0.161 0.223-0.221 0.157-0.095 0.337-0.119 0.504-0.077s0.316 0.144 0.409 0.299l5.644 9.422c0.051 0.087 0.085 0.199 0.087 0.321 0.002 0.184-0.070 0.351-0.19 0.473s-0.285 0.199-0.462 0.201h-11.291c-0.101-0.001-0.214-0.027-0.321-0.089-0.159-0.092-0.266-0.239-0.311-0.405s-0.025-0.346 0.061-0.497zM6.288 2.231l-5.647 9.427c-0.281 0.487-0.337 1.033-0.205 1.527s0.453 0.939 0.932 1.215c0.309 0.179 0.651 0.267 0.983 0.268h11.295c0.559-0.006 1.058-0.236 1.415-0.601s0.576-0.869 0.57-1.421c-0.004-0.357-0.102-0.696-0.271-0.983l-5.649-9.431c-0.288-0.475-0.74-0.787-1.236-0.909s-1.041-0.054-1.513 0.233c-0.286 0.173-0.517 0.41-0.675 0.676zM7.333 6v2.667c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-2.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667zM8.667 11.333c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667 0.299 0.667 0.667 0.667 0.667-0.299 0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'align-center',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>align-center</title>\n <path d=\"M12 6h-8c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h8c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM14 3.333h-12c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h12c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM14 8.667h-12c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h12c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM12 11.333h-8c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h8c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'align-justify',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>align-justify</title>\n <path d=\"M14 6h-12c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h12c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM14 3.333h-12c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h12c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM14 8.667h-12c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h12c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM14 11.333h-12c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h12c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'align-left',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>align-left</title>\n <path d=\"M11.333 6h-9.333c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h9.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM14 3.333h-12c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h12c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM14 8.667h-12c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h12c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM11.333 11.333h-9.333c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h9.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'align-right',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>align-right</title>\n <path d=\"M14 6h-9.333c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h9.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM14 3.333h-12c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h12c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM14 8.667h-12c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h12c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667zM14 11.333h-9.333c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h9.333c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'anchor',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>anchor</title>\n <path d=\"M9.333 3.333c0 0.369-0.149 0.701-0.391 0.943s-0.574 0.391-0.943 0.391-0.701-0.149-0.943-0.391-0.391-0.574-0.391-0.943 0.149-0.701 0.391-0.943 0.574-0.391 0.943-0.391 0.701 0.149 0.943 0.391 0.391 0.574 0.391 0.943zM3.333 7.333h-2c-0.368 0-0.667 0.299-0.667 0.667 0 2.025 0.821 3.859 2.148 5.185s3.161 2.148 5.185 2.148 3.859-0.821 5.185-2.148 2.148-3.161 2.148-5.185c0-0.368-0.299-0.667-0.667-0.667h-2c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h1.297c-0.153 1.391-0.782 2.637-1.721 3.576s-2.185 1.567-3.576 1.721v-8.047c0.469-0.121 0.888-0.366 1.219-0.697 0.482-0.482 0.781-1.15 0.781-1.886s-0.299-1.404-0.781-1.885-1.149-0.781-1.885-0.781-1.404 0.299-1.885 0.781-0.781 1.149-0.781 1.885 0.299 1.404 0.781 1.885c0.331 0.331 0.75 0.577 1.219 0.697v8.047c-1.391-0.153-2.637-0.782-3.576-1.721s-1.567-2.185-1.721-3.576h1.297c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'aperture',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>aperture</title>\n <path d=\"M7.615 4.667l1.482-2.567c1.217 0.225 2.305 0.817 3.146 1.657 0.277 0.277 0.528 0.582 0.747 0.909h-3.463zM4.92 6.667l-1.481-2.565c0.102-0.119 0.208-0.234 0.319-0.345 1-1 2.35-1.648 3.85-1.745l-1.728 2.993zM5.305 10h-2.964c-0.221-0.625-0.341-1.299-0.341-2 0-0.953 0.222-1.854 0.617-2.655l1.733 3.003zM11.649 7.652l-0.954-1.652h2.964c0.221 0.625 0.341 1.299 0.341 2 0 0.953-0.222 1.854-0.617 2.655l-1.717-2.975zM8.392 13.987l2.688-4.654 1.481 2.565c-0.102 0.119-0.208 0.234-0.319 0.344-1 1-2.35 1.648-3.85 1.745zM7.133 15.283c0.031 0.005 0.061 0.009 0.093 0.010 0.254 0.027 0.513 0.041 0.774 0.041 2.025 0 3.859-0.821 5.185-2.148 0.244-0.244 0.471-0.505 0.678-0.781 0.028-0.031 0.053-0.065 0.073-0.099 0.879-1.209 1.397-2.697 1.397-4.305 0-1.026-0.211-2.003-0.592-2.891-0.011-0.029-0.023-0.057-0.037-0.084-0.369-0.829-0.887-1.578-1.519-2.211-1.134-1.134-2.64-1.899-4.319-2.097-0.031-0.005-0.061-0.009-0.093-0.010-0.254-0.027-0.513-0.041-0.774-0.041-2.025 0-3.859 0.821-5.185 2.148-0.244 0.243-0.471 0.505-0.678 0.781-0.028 0.031-0.053 0.065-0.074 0.099-0.878 1.209-1.396 2.697-1.396 4.305 0 1.026 0.211 2.003 0.592 2.891 0.011 0.029 0.023 0.057 0.037 0.084 0.369 0.829 0.887 1.578 1.519 2.211 1.134 1.134 2.64 1.899 4.319 2.097zM8.385 11.333l-1.482 2.567c-1.217-0.225-2.305-0.817-3.146-1.657-0.277-0.277-0.528-0.582-0.747-0.909h3.463zM10.31 8l-1.155 2h-2.311l-1.155-2 1.155-2h2.311z\"></path>\n </svg>\n "
},
{
name: 'archive',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>archive</title>\n <path d=\"M2.667 6h10.667v7.333h-10.667zM0.667 1.333c-0.368 0-0.667 0.299-0.667 0.667v3.333c0 0.368 0.299 0.667 0.667 0.667h0.667v8c0 0.368 0.299 0.667 0.667 0.667h12c0.368 0 0.667-0.299 0.667-0.667v-8h0.667c0.368 0 0.667-0.299 0.667-0.667v-3.333c0-0.368-0.299-0.667-0.667-0.667zM1.333 2.667h13.333v2h-13.333zM6.667 8.667h2.667c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-2.667c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'arrow-down-circle',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>arrow-down-circle</title>\n <path d=\"M15.333 8c0-2.025-0.821-3.859-2.148-5.185s-3.161-2.148-5.185-2.148-3.859 0.821-5.185 2.148-2.148 3.161-2.148 5.185 0.821 3.859 2.148 5.185 3.161 2.148 5.185 2.148 3.859-0.821 5.185-2.148 2.148-3.161 2.148-5.185zM14 8c0 1.657-0.671 3.156-1.757 4.243s-2.585 1.757-4.243 1.757-3.156-0.671-4.243-1.757-1.757-2.585-1.757-4.243 0.671-3.156 1.757-4.243 2.585-1.757 4.243-1.757 3.156 0.671 4.243 1.757 1.757 2.585 1.757 4.243zM7.333 5.333v3.724l-1.529-1.529c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943l2.667 2.667c0.064 0.064 0.137 0.112 0.216 0.145s0.165 0.051 0.255 0.051 0.177-0.018 0.255-0.051c0.079-0.033 0.152-0.081 0.216-0.145l2.667-2.667c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-1.529 1.529v-3.724c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'arrow-down-left',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>arrow-down-left</title>\n <path d=\"M11.333 10.667h-5.057l5.529-5.529c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-5.529 5.529v-5.057c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v6.667c0 0.091 0.018 0.177 0.051 0.255s0.081 0.152 0.144 0.215c0.001 0.001 0.001 0.001 0.001 0.001 0.061 0.061 0.135 0.111 0.215 0.144 0.079 0.033 0.165 0.051 0.255 0.051h6.667c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'arrow-down-right',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>arrow-down-right</title>\n <path d=\"M10.667 4.667v5.057l-5.529-5.529c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943l5.529 5.529h-5.057c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h6.667c0.091 0 0.177-0.018 0.255-0.051s0.152-0.081 0.216-0.145c0.061-0.061 0.111-0.135 0.145-0.216 0.033-0.079 0.051-0.165 0.051-0.255v-6.667c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'arrow-down',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>arrow-down</title>\n <path d=\"M12.195 7.529l-3.529 3.529v-7.724c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v7.724l-3.529-3.529c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943l4.667 4.667c0.064 0.064 0.137 0.112 0.216 0.145s0.165 0.051 0.255 0.051c0.087 0 0.174-0.017 0.255-0.051 0.079-0.033 0.152-0.081 0.216-0.145l4.667-4.667c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0z\"></path>\n </svg>\n "
},
{
name: 'arrow-left-circle',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>arrow-left-circle</title>\n <path d=\"M15.333 8c0-2.025-0.821-3.859-2.148-5.185s-3.161-2.148-5.185-2.148-3.859 0.821-5.185 2.148-2.148 3.161-2.148 5.185 0.821 3.859 2.148 5.185 3.161 2.148 5.185 2.148 3.859-0.821 5.185-2.148 2.148-3.161 2.148-5.185zM14 8c0 1.657-0.671 3.156-1.757 4.243s-2.585 1.757-4.243 1.757-3.156-0.671-4.243-1.757-1.757-2.585-1.757-4.243 0.671-3.156 1.757-4.243 2.585-1.757 4.243-1.757 3.156 0.671 4.243 1.757 1.757 2.585 1.757 4.243zM10.667 7.333h-3.724l1.529-1.529c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-2.667 2.667c-0.064 0.064-0.112 0.137-0.145 0.216s-0.051 0.165-0.051 0.255c0 0.087 0.017 0.174 0.051 0.255 0.033 0.079 0.081 0.152 0.145 0.216l2.667 2.667c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-1.529-1.529h3.724c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'arrow-left',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>arrow-left</title>\n <path d=\"M8.471 12.195l-3.529-3.529h7.724c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-7.724l3.529-3.529c0.261-0.261 0.261-0.683 0-0.943s-0.683-0.261-0.943 0l-4.667 4.667c-0.064 0.064-0.112 0.137-0.145 0.216-0.034 0.081-0.051 0.169-0.051 0.255 0 0.171 0.065 0.341 0.195 0.471l4.667 4.667c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943z\"></path>\n </svg>\n "
},
{
name: 'arrow-right-circle',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>arrow-right-circle</title>\n <path d=\"M15.333 8c0-2.025-0.821-3.859-2.148-5.185s-3.161-2.148-5.185-2.148-3.859 0.821-5.185 2.148-2.148 3.161-2.148 5.185 0.821 3.859 2.148 5.185 3.161 2.148 5.185 2.148 3.859-0.821 5.185-2.148 2.148-3.161 2.148-5.185zM14 8c0 1.657-0.671 3.156-1.757 4.243s-2.585 1.757-4.243 1.757-3.156-0.671-4.243-1.757-1.757-2.585-1.757-4.243 0.671-3.156 1.757-4.243 2.585-1.757 4.243-1.757 3.156 0.671 4.243 1.757 1.757 2.585 1.757 4.243zM5.333 8.667h3.724l-1.529 1.529c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0l2.667-2.667c0.061-0.061 0.111-0.135 0.145-0.216 0.067-0.163 0.067-0.347 0-0.511-0.033-0.079-0.081-0.152-0.145-0.216l-2.667-2.667c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943l1.529 1.529h-3.724c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'arrow-right',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>arrow-right</title>\n <path d=\"M7.529 3.805l3.529 3.529h-7.724c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h7.724l-3.529 3.529c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0l4.667-4.667c0.061-0.061 0.111-0.135 0.145-0.216 0.067-0.163 0.067-0.347 0-0.511-0.033-0.079-0.081-0.152-0.145-0.216l-4.667-4.667c-0.261-0.261-0.683-0.261-0.943 0s-0.261 0.683 0 0.943z\"></path>\n </svg>\n "
},
{
name: 'arrow-up-circle',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>arrow-up-circle</title>\n <path d=\"M15.333 8c0-2.025-0.821-3.859-2.148-5.185s-3.161-2.148-5.185-2.148-3.859 0.821-5.185 2.148-2.148 3.161-2.148 5.185 0.821 3.859 2.148 5.185 3.161 2.148 5.185 2.148 3.859-0.821 5.185-2.148 2.148-3.161 2.148-5.185zM14 8c0 1.657-0.671 3.156-1.757 4.243s-2.585 1.757-4.243 1.757-3.156-0.671-4.243-1.757-1.757-2.585-1.757-4.243 0.671-3.156 1.757-4.243 2.585-1.757 4.243-1.757 3.156 0.671 4.243 1.757 1.757 2.585 1.757 4.243zM8.667 10.667v-3.724l1.529 1.529c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-2.667-2.667c-0.064-0.064-0.137-0.112-0.216-0.145s-0.165-0.051-0.255-0.051c-0.087 0-0.174 0.017-0.255 0.051-0.079 0.033-0.152 0.081-0.216 0.145l-2.667 2.667c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0l1.529-1.529v3.724c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'arrow-up-left',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>arrow-up-left</title>\n <path d=\"M5.333 11.333v-5.057l5.529 5.529c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-5.529-5.529h5.057c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-6.667c-0.091 0-0.177 0.018-0.255 0.051s-0.151 0.081-0.215 0.144c-0.001 0.001-0.001 0.001-0.001 0.001-0.061 0.061-0.111 0.134-0.144 0.215-0.033 0.079-0.051 0.165-0.051 0.255v6.667c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667z\"></path>\n </svg>\n "
},
{
name: 'arrow-up-right',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>arrow-up-right</title>\n <path d=\"M4.667 5.333h5.057l-5.529 5.529c-0.261 0.261-0.261 0.683 0 0.943s0.683 0.261 0.943 0l5.529-5.529v5.057c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-6.667c0-0.091-0.018-0.177-0.051-0.255s-0.081-0.152-0.144-0.215c-0.001-0.001-0.001-0.001-0.001-0.001-0.061-0.061-0.135-0.111-0.215-0.144-0.079-0.033-0.165-0.051-0.255-0.051h-6.667c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z\"></path>\n </svg>\n "
},
{
name: 'arrow-up',
template: "\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <title>arrow-up</title>\n <path d=\"M3.805 8.471l3.529-3.529v7.724c0 0.368 0.299 0.667 0.667 0.667s0.667-0.299 0.667-0.667v-7.724l3.529 3.529c0.261 0.261 0.683 0.261 0.943 0s0.261-0.683 0-0.943l-4.667-4.667c-0.064-0.064-0.137-0.112-0.216-0.145-0.081-0.034-0.169-0.051-0.255-0.051-0.171 0-0.341 0.065-0.471 0.195l-4.667 4.667c-0.2