UNPKG

@mobilelivenpm/fds-angular-qa

Version:

This library was generated with [Nx](https://nx.dev).

1,042 lines (1,029 loc) 366 kB
(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('tippy.js'), require('@angular/platform-browser'), require('@angular/cdk/a11y'), require('@angular/cdk/bidi'), require('@angular/cdk/coercion'), require('@angular/cdk/keycodes'), require('@angular/platform-browser/animations'), require('@angular/cdk/platform'), require('rxjs'), require('@angular/cdk/scrolling'), require('@angular/cdk/collections'), require('@angular/animations'), require('@angular/cdk/stepper'), require('rxjs/operators'), require('@angular/cdk/portal'), require('@angular/cdk/overlay')) : typeof define === 'function' && define.amd ? define('@mobilelivenpm/fds-angular-qa', ['exports', '@angular/core', '@angular/common', '@angular/forms', 'tippy.js', '@angular/platform-browser', '@angular/cdk/a11y', '@angular/cdk/bidi', '@angular/cdk/coercion', '@angular/cdk/keycodes', '@angular/platform-browser/animations', '@angular/cdk/platform', 'rxjs', '@angular/cdk/scrolling', '@angular/cdk/collections', '@angular/animations', '@angular/cdk/stepper', 'rxjs/operators', '@angular/cdk/portal', '@angular/cdk/overlay'], factory) : (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.mobilelivenpm = global.mobilelivenpm || {}, global.mobilelivenpm['fds-angular-qa'] = {}), global.ng.core, global.ng.common, global.ng.forms, global.tippy, global.ng.platformBrowser, global.ng.cdk.a11y, global.ng.cdk.bidi, global.ng.cdk.coercion, global.ng.cdk.keycodes, global.ng.platformBrowser.animations, global.ng.cdk.platform, global.rxjs, global.ng.cdk.scrolling, global.ng.cdk.collections, global.ng.animations, global.ng.cdk.stepper, global.rxjs.operators, global.ng.cdk.portal, global.ng.cdk.overlay)); }(this, (function (exports, i0, common, forms, tippy, platformBrowser, a11y, bidi, coercion, keycodes, animations, platform, rxjs, scrolling, collections, animations$1, stepper, operators, portal, overlay) { 'use strict'; function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } function _interopNamespace(e) { if (e && e.__esModule) return e; var n = Object.create(null); if (e) { Object.keys(e).forEach(function (k) { if (k !== 'default') { var d = Object.getOwnPropertyDescriptor(e, k); Object.defineProperty(n, k, d.get ? d : { enumerable: true, get: function () { return e[k]; } }); } }); } n['default'] = e; return Object.freeze(n); } var i0__namespace = /*#__PURE__*/_interopNamespace(i0); var tippy__default = /*#__PURE__*/_interopDefaultLegacy(tippy); var ButtonComponent = /** @class */ (function () { function ButtonComponent() { this.type = 'button'; this.iconPos = 'left'; // @ContentChildren(PrimeTemplate) templates: QueryList<any>; this.onClick = new i0.EventEmitter(); this.onFocus = new i0.EventEmitter(); this.onBlur = new i0.EventEmitter(); } ButtonComponent.prototype.ngAfterContentInit = function () { // this.templates.forEach((item) => { // switch (item.getType()) { // case 'content': // this.contentTemplate = item.template; // break; // // default: // this.contentTemplate = item.template; // break; // } // }); }; return ButtonComponent; }()); ButtonComponent.decorators = [ { type: i0.Component, args: [{ selector: 'fds-button', template: "<button\n [attr.type]=\"type\"\n [class]=\"className\"\n [ngStyle]=\"style\"\n [attr.aria-disabled]=\"ariaDisabled\"\n [ngClass]=\"{\n btn: true,\n 'p-button-icon-only': icon && !label,\n 'p-button-vertical':\n (iconPos === 'top' || iconPos === 'bottom') && label\n }\"\n (click)=\"onClick.emit($event)\"\n (focus)=\"onFocus.emit($event)\"\n (blur)=\"onBlur.emit($event)\"\n>\n <ng-content></ng-content>\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n <span\n [ngClass]=\"{\n 'p-button-icon': true,\n 'p-button-icon-left': iconPos === 'left' && label,\n 'p-button-icon-right': iconPos === 'right' && label,\n 'p-button-icon-top': iconPos === 'top' && label,\n 'p-button-icon-bottom': iconPos === 'bottom' && label\n }\"\n [class]=\"icon\"\n *ngIf=\"icon\"\n [attr.aria-hidden]=\"true\"\n ></span>\n <span class=\"p-button-label\" [attr.aria-hidden]=\"icon && !label\">{{\n label || '&nbsp;'\n }}</span>\n <span [ngClass]=\"'p-badge'\" *ngIf=\"badge\" [class]=\"badgeClass\">{{\n badge\n }}</span>\n</button>", styles: [""] },] } ]; ButtonComponent.propDecorators = { type: [{ type: i0.Input }], iconPos: [{ type: i0.Input }], icon: [{ type: i0.Input }], badge: [{ type: i0.Input }], label: [{ type: i0.Input }], ariaDisabled: [{ type: i0.Input }], style: [{ type: i0.Input }], className: [{ type: i0.Input }], badgeClass: [{ type: i0.Input }], onClick: [{ type: i0.Output }], onFocus: [{ type: i0.Output }], onBlur: [{ type: i0.Output }] }; /*! ***************************************************************************** Copyright (c) Microsoft Corporation. Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted. THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. ***************************************************************************** */ /* global Reflect, Promise */ var extendStatics = function (d, b) { extendStatics = Object.setPrototypeOf || ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; }; return extendStatics(d, b); }; function __extends(d, b) { if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); extendStatics(d, b); function __() { this.constructor = d; } d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); } var __assign = function () { __assign = Object.assign || function __assign(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { s = arguments[i]; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; } return t; }; return __assign.apply(this, arguments); }; function __rest(s, e) { var t = {}; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p]; if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]]; } return t; } function __decorate(decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; } function __param(paramIndex, decorator) { return function (target, key) { decorator(target, key, paramIndex); }; } function __metadata(metadataKey, metadataValue) { if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue); } function __awaiter(thisArg, _arguments, P, generator) { function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } return new (P || (P = Promise))(function (resolve, reject) { function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } step((generator = generator.apply(thisArg, _arguments || [])).next()); }); } function __generator(thisArg, body) { var _ = { label: 0, sent: function () { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g; function verb(n) { return function (v) { return step([n, v]); }; } function step(op) { if (f) throw new TypeError("Generator is already executing."); while (_) try { if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; if (y = 0, t) op = [op[0] & 2, t.value]; switch (op[0]) { case 0: case 1: t = op; break; case 4: _.label++; return { value: op[1], done: false }; case 5: _.label++; y = op[1]; op = [0]; continue; case 7: op = _.ops.pop(); _.trys.pop(); continue; default: if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } if (t[2]) _.ops.pop(); _.trys.pop(); continue; } op = body.call(thisArg, _); } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; } } var __createBinding = Object.create ? (function (o, m, k, k2) { if (k2 === undefined) k2 = k; Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } }); }) : (function (o, m, k, k2) { if (k2 === undefined) k2 = k; o[k2] = m[k]; }); function __exportStar(m, o) { for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p); } function __values(o) { var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0; if (m) return m.call(o); if (o && typeof o.length === "number") return { next: function () { if (o && i >= o.length) o = void 0; return { value: o && o[i++], done: !o }; } }; throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined."); } function __read(o, n) { var m = typeof Symbol === "function" && o[Symbol.iterator]; if (!m) return o; var i = m.call(o), r, ar = [], e; try { while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value); } catch (error) { e = { error: error }; } finally { try { if (r && !r.done && (m = i["return"])) m.call(i); } finally { if (e) throw e.error; } } return ar; } /** @deprecated */ function __spread() { for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i])); return ar; } /** @deprecated */ function __spreadArrays() { for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length; for (var r = Array(s), k = 0, i = 0; i < il; i++) for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) r[k] = a[j]; return r; } function __spreadArray(to, from, pack) { if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) { if (ar || !(i in from)) { if (!ar) ar = Array.prototype.slice.call(from, 0, i); ar[i] = from[i]; } } return to.concat(ar || from); } function __await(v) { return this instanceof __await ? (this.v = v, this) : new __await(v); } function __asyncGenerator(thisArg, _arguments, generator) { if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined."); var g = generator.apply(thisArg, _arguments || []), i, q = []; return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i; function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; } function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } } function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); } function fulfill(value) { resume("next", value); } function reject(value) { resume("throw", value); } function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); } } function __asyncDelegator(o) { var i, p; return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i; function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; } } function __asyncValues(o) { if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined."); var m = o[Symbol.asyncIterator], i; return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i); function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; } function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); } } function __makeTemplateObject(cooked, raw) { if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } return cooked; } ; var __setModuleDefault = Object.create ? (function (o, v) { Object.defineProperty(o, "default", { enumerable: true, value: v }); }) : function (o, v) { o["default"] = v; }; function __importStar(mod) { if (mod && mod.__esModule) return mod; var result = {}; if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); __setModuleDefault(result, mod); return result; } function __importDefault(mod) { return (mod && mod.__esModule) ? mod : { default: mod }; } function __classPrivateFieldGet(receiver, state, kind, f) { if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter"); if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it"); return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver); } function __classPrivateFieldSet(receiver, state, value, kind, f) { if (kind === "m") throw new TypeError("Private method is not writable"); if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter"); if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it"); return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value; } var CHECKBOX_VALUE_ACCESSOR = { provide: forms.NG_VALUE_ACCESSOR, useExisting: i0.forwardRef(function () { return CheckboxComponent; }), multi: true }; var CheckboxComponent = /** @class */ (function () { function CheckboxComponent(cd) { this.cd = cd; this.checkboxIcon = ''; this.onChange = new i0.EventEmitter(); this.onModelChange = function () { }; this.onModelTouched = function () { }; this.focused = false; this.checked = false; } CheckboxComponent.prototype.onClick = function (event, checkbox, focus) { event.preventDefault(); if (this.disabled || this.readonly) { return; } this.checked = !this.checked; this.updateModel(event); if (focus) { checkbox.focus(); } }; CheckboxComponent.prototype.updateModel = function (event) { if (!this.binary) { if (this.checked) this.addValue(); else this.removeValue(); this.onModelChange(this.model); if (this.formControl) { this.formControl.setValue(this.model); } } else { this.onModelChange(this.checked); } this.onChange.emit({ checked: this.checked, originalEvent: event }); }; CheckboxComponent.prototype.handleChange = function (event) { if (!this.readonly) { this.checked = event.target.checked; this.updateModel(event); } }; CheckboxComponent.prototype.isChecked = function () { if (this.binary) return this.model; else return this.model && this.model.indexOf(this.value) > -1; }; CheckboxComponent.prototype.removeValue = function () { var _this = this; this.model = this.model.filter(function (val) { return val !== _this.value; }); }; CheckboxComponent.prototype.addValue = function () { if (this.model) this.model = __spreadArray(__spreadArray([], __read(this.model)), [this.value]); else this.model = [this.value]; }; CheckboxComponent.prototype.onFocus = function () { this.focused = true; }; CheckboxComponent.prototype.onBlur = function () { this.focused = false; this.onModelTouched(); }; CheckboxComponent.prototype.focus = function () { this.inputViewChild.nativeElement.focus(); }; CheckboxComponent.prototype.writeValue = function (model) { this.model = model; this.checked = this.isChecked(); this.cd.markForCheck(); }; CheckboxComponent.prototype.registerOnChange = function (fn) { this.onModelChange = fn; }; CheckboxComponent.prototype.registerOnTouched = function (fn) { this.onModelTouched = fn; }; CheckboxComponent.prototype.setDisabledState = function (val) { this.disabled = val; this.cd.markForCheck(); }; return CheckboxComponent; }()); CheckboxComponent.decorators = [ { type: i0.Component, args: [{ selector: 'fds-checkbox', template: "<div\n [ngStyle]=\"style\"\n [ngClass]=\"{\n formCheck: true,\n 'fds-checkbox-checked': checked,\n 'fds-checkbox-disabled': disabled,\n 'fds-checkbox-focused': focused\n }\"\n [class]=\"styleClass\"\n>\n <div class=\"checkBox checkBox--curved\">\n <input\n #cb\n type=\"checkbox\"\n class=\"checkBox\"\n [attr.id]=\"inputId\"\n [attr.name]=\"name\"\n [readonly]=\"readonly\"\n [value]=\"value\"\n [checked]=\"checked\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (change)=\"handleChange($event)\"\n [disabled]=\"disabled\"\n [attr.tabindex]=\"tabindex\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.required]=\"required\"\n />\n <span class=\"checkboxFake\"></span>\n </div>\n <!-- TODO this div is not rendered and not read by screen reader -->\n <!-- <div\n class=\"fds-checkbox-box\"\n (click)=\"onClick($event, cb, true)\"\n [ngClass]=\"{\n 'fds-highlight': checked,\n 'fds-disabled': disabled,\n 'fds-focus': focused\n }\"\n role=\"checkbox\"\n [attr.aria-checked]=\"checked\"\n >\n <span\n class=\"fds-checkbox-icon\"\n [ngClass]=\"checked ? checkboxIcon : null\"\n ></span>\n </div> -->\n <label\n (click)=\"onClick($event, cb, true)\"\n [class]=\"labelStyleClass\"\n [ngClass]=\"{\n 'fds-checkbox-label checkLabel': true,\n 'fds-checkbox-label-active': checked,\n 'fds-disabled': disabled,\n 'fds-checkbox-label-focus': focused\n }\"\n *ngIf=\"label\"\n [attr.for]=\"inputId\"\n >{{ label }}</label\n >\n</div>", providers: [CHECKBOX_VALUE_ACCESSOR], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None, styles: [""] },] } ]; CheckboxComponent.ctorParameters = function () { return [ { type: i0.ChangeDetectorRef } ]; }; CheckboxComponent.propDecorators = { value: [{ type: i0.Input }], name: [{ type: i0.Input }], disabled: [{ type: i0.Input }], binary: [{ type: i0.Input }], label: [{ type: i0.Input }], ariaLabelledBy: [{ type: i0.Input }], tabindex: [{ type: i0.Input }], inputId: [{ type: i0.Input }], style: [{ type: i0.Input }], styleClass: [{ type: i0.Input }], labelStyleClass: [{ type: i0.Input }], formControl: [{ type: i0.Input }], checkboxIcon: [{ type: i0.Input }], readonly: [{ type: i0.Input }], required: [{ type: i0.Input }], inputViewChild: [{ type: i0.ViewChild, args: ['cb',] }], onChange: [{ type: i0.Output }] }; var Header = /** @class */ (function () { function Header() { } return Header; }()); Header.decorators = [ { type: i0.Component, args: [{ selector: 'fds-header', template: '<ng-content></ng-content>' },] } ]; var Footer = /** @class */ (function () { function Footer() { } return Footer; }()); Footer.decorators = [ { type: i0.Component, args: [{ selector: 'fds-footer', template: '<ng-content></ng-content>' },] } ]; var Template = /** @class */ (function () { function Template(template) { this.template = template; } Template.prototype.getType = function () { return this.name; }; return Template; }()); Template.decorators = [ { type: i0.Directive, args: [{ selector: '[fdsTemplate]' },] } ]; Template.ctorParameters = function () { return [ { type: i0.TemplateRef } ]; }; Template.propDecorators = { type: [{ type: i0.Input }], name: [{ type: i0.Input, args: ['fdsTemplate',] }] }; var CardComponent = /** @class */ (function () { function CardComponent(el) { this.el = el; } CardComponent.prototype.ngAfterContentInit = function () { var _this = this; this.templates.forEach(function (item) { switch (item.getType()) { case 'header': _this.headerTemplate = item.template; break; case 'content': _this.contentTemplate = item.template; break; case 'footer': _this.footerTemplate = item.template; break; default: _this.contentTemplate = item.template; break; } }); }; return CardComponent; }()); CardComponent.decorators = [ { type: i0.Component, args: [{ selector: 'fds-card', template: "<div class=\"fds-card\" [ngStyle]=\"style\" [class]=\"cardClass\">\n <div\n class=\"fds-card-head\"\n [class]=\"headerClass\"\n *ngIf=\"headerFacet || headerTemplate\"\n >\n <ng-content select=\"fds-header\"></ng-content>\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </div>\n <div class=\"fds-card-body\" [class]=\"bodyClass\">\n <ng-content></ng-content>\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </div>\n <div\n class=\"fds-card-footer\"\n [class]=\"footerClass\"\n *ngIf=\"footerFacet || footerTemplate\"\n >\n <ng-content select=\"fds-footer\"></ng-content>\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </div>\n</div>", styles: [""] },] } ]; CardComponent.ctorParameters = function () { return [ { type: i0.ElementRef } ]; }; CardComponent.propDecorators = { style: [{ type: i0.Input }], cardClass: [{ type: i0.Input }], headerClass: [{ type: i0.Input }], bodyClass: [{ type: i0.Input }], footerClass: [{ type: i0.Input }], headerFacet: [{ type: i0.ContentChild, args: [Header,] }], footerFacet: [{ type: i0.ContentChild, args: [Footer,] }], templates: [{ type: i0.ContentChildren, args: [Template,] }] }; var uidIterator = 0; /** Injection token to be used to override the default options for `matPopover`. */ var FDS_POPOVER_DEFAULT_OPTIONS = new i0.InjectionToken('mat-tooltip-default-options', { providedIn: 'root', factory: FDS_POPOVER_DEFAULT_OPTIONS_FACTORY }); /** @docs-private */ function FDS_POPOVER_DEFAULT_OPTIONS_FACTORY() { return { closeBtnScreenReadersText: 'Close button', placement: 'top', theme: 'dark', animation: 'shift-away' }; } var PopoverDirective = /** @class */ (function () { function PopoverDirective(elementRef, renderer, domSanitizer, platform, _defaultOptions) { this.elementRef = elementRef; this.renderer = renderer; this.domSanitizer = domSanitizer; this.platform = platform; this._defaultOptions = _defaultOptions; this.fdsPopover = {}; this.tabindex = '0'; this.fdsPopoverUID = "fdsPopover" + uidIterator++; this.defProps = { arrow: true, maxWidth: 'auto', allowHTML: true, interactive: true, interactiveBorder: 50, trigger: 'manual' }; this.config = {}; } PopoverDirective.prototype.onClick = function () { if (this.tippyInstance) { if (!this.tippyInstance.state.isVisible) { this.tippyInstance.show(); } else { this.tippyInstance.hide(); } } }; PopoverDirective.prototype.documentClick = function (e) { if (e.dataset && e.dataset.popoverId === this.fdsPopoverUID) { this.tippyInstance.hide(); } }; PopoverDirective.prototype.ngOnInit = function () { if (common.isPlatformServer(this.platform)) return; this.initTippy(); }; PopoverDirective.prototype.ngOnDestroy = function () { this.tippyInstance.destroy(); }; PopoverDirective.prototype.ngOnChanges = function (changes) { if (!this.tippyInstance) return; if (changes['fdsPopover']) { // ReInit when any input was changed this.initTippy(); } else if (changes['fdsPopoverBody'] || changes['fdsPopoverTitle']) { this.updateTippyContent(); } }; /** * Popover initialize */ PopoverDirective.prototype.initTippy = function () { if (this.tippyInstance) { this.tippyInstance.destroy(); } tippy__default['default'](this.elementRef.nativeElement, this.getConfig()); this.setTippyInstance(); }; PopoverDirective.prototype.updateTippyContent = function () { var content = this.getConfig().content; this.tippyInstance.setContent(content); }; PopoverDirective.prototype.getConfig = function () { var config = Object.assign(Object.assign(Object.assign({}, this.defProps), this._defaultOptions), this.fdsPopover); config.content = this.getTemplate(config.theme, config.closeBtnScreenReadersText); return config; }; PopoverDirective.prototype.getTemplate = function (theme, closeBtnText) { if (theme === void 0) { theme = 'dark'; } var classList = [ 'd--flex', 'align--items--start', 'p--3', 'curved', theme ]; return "<div class=\"" + classList.join(' ') + "\"\n data-type=\"popover\" tabindex=\"0\"\n style=\"opacity: 1; visibility: visible; position:static;\">\n <span></span>\n <span tabindex=\"0\">\n " + (this.getTitle() ? "<strong class=\"title\">" + this.getTitle() + "</strong>" : "") + "\n " + this.getBody() + "\n </span>\n <a href=\"javascript:void(0)\" tabindex=\"0\" type=\"button\"\n class=\"btn--close ml--3\" data-popover-id=\"" + this.fdsPopoverUID + "\">\n <span class=\"icon icon-cross-circle\" data-popover-id=\"" + this.fdsPopoverUID + "\">\n <span class=\"sr--only\">" + closeBtnText + "</span>\n </span>\n </a>\n </div>"; }; PopoverDirective.prototype.getTitle = function () { return this.domSanitizer.sanitize(i0.SecurityContext.HTML, this.fdsPopoverTitle); }; PopoverDirective.prototype.getBody = function () { return this.domSanitizer.sanitize(i0.SecurityContext.HTML, this.fdsPopoverBody); }; PopoverDirective.prototype.setTippyInstance = function () { this.tippyInstance = this.elementRef.nativeElement._tippy; }; return PopoverDirective; }()); PopoverDirective.decorators = [ { type: i0.Directive, args: [{ selector: '[fdsPopover],[fdsPopoverBody]' },] } ]; PopoverDirective.ctorParameters = function () { return [ { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: platformBrowser.DomSanitizer }, { type: Object, decorators: [{ type: i0.Inject, args: [i0.PLATFORM_ID,] }] }, { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [FDS_POPOVER_DEFAULT_OPTIONS,] }] } ]; }; PopoverDirective.propDecorators = { fdsPopover: [{ type: i0.Input }], fdsPopoverBody: [{ type: i0.Input }], fdsPopoverTitle: [{ type: i0.Input }], tabindex: [{ type: i0.HostBinding, args: ['attr.tabindex',] }, { type: i0.Input }], onClick: [{ type: i0.HostListener, args: ['click',] }, { type: i0.HostListener, args: ['keydown.space',] }, { type: i0.HostListener, args: ['keydown.enter',] }], documentClick: [{ type: i0.HostListener, args: ['document:click', ['$event.target'],] }] }; var ProgressComponent = /** @class */ (function () { function ProgressComponent() { this.min = 0; this.max = 100; this.value = 0; this.showLabel = false; } ProgressComponent.prototype.ngOnInit = function () { }; ProgressComponent.prototype._getWidth = function () { var widthPercent = Math.floor(((this.value - this.min) / (this.max - this.min)) * 100); return Math.min(100, Math.max(0, widthPercent)); }; ProgressComponent.prototype._getLabelStyle = function () { // Label should not go out of boundaries, add compensation for min/max values if (this.value == this.min) { return { transform: 'none' }; } else if (this.value == this.max) { return { transform: 'translateX(-100%)' }; } return {}; }; ProgressComponent.prototype.formatValue = function (value) { if (this.displayWith) { return this.displayWith(value); } return value || 0; }; return ProgressComponent; }()); ProgressComponent.decorators = [ { type: i0.Component, args: [{ selector: 'fds-progress', template: "<div class=\"progress mb--5\">\n <div\n class=\"progress-bar progress-primary\"\n [style.width.%]=\"_getWidth()\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"value\"\n [attr.aria-valuemin]=\"min\"\n [attr.aria-valuemax]=\"max\"\n >\n <span\n role=\"alert\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n class=\"pt--2 px--2\"\n *ngIf=\"showLabel\"\n [ngStyle]=\"_getLabelStyle()\"\n >{{ formatValue(value) }}</span\n >\n </div>\n</div>", styles: [""] },] } ]; ProgressComponent.ctorParameters = function () { return []; }; ProgressComponent.propDecorators = { min: [{ type: i0.Input }], max: [{ type: i0.Input }], value: [{ type: i0.Input }], showLabel: [{ type: i0.Input }], displayWith: [{ type: i0.Input }] }; var activeEventOptions = platform.normalizePassiveListenerOptions({ passive: false }); /** * Visually, a 30px separation between tick marks looks best. This is very subjective but it is * the default separation we chose. */ var MIN_AUTO_TICK_SEPARATION = 30; /** The thumb gap size for a disabled slider. */ var DISABLED_THUMB_GAP = 7; /** The thumb gap size for a non-active slider at its minimum value. */ var MIN_VALUE_NONACTIVE_THUMB_GAP = 7; /** The thumb gap size for an active slider at its minimum value. */ var MIN_VALUE_ACTIVE_THUMB_GAP = 10; /** * Provider Expression that allows slider to register as a ControlValueAccessor. * This allows it to support [(ngModel)] and [formControl]. * @docs-private */ var MAT_SLIDER_VALUE_ACCESSOR = { provide: forms.NG_VALUE_ACCESSOR, useExisting: i0.forwardRef(function () { return RangeSliderComponent; }), multi: true }; /** A simple change event emitted by the MatSlider component. */ var SliderChange = /** @class */ (function () { function SliderChange() { } return SliderChange; }()); /** * Allows users to select from a range of values by moving the slider thumb. It is similar in * behavior to the native `<input type="range">` element. */ var RangeSliderComponent = /** @class */ (function () { function RangeSliderComponent(_elementRef, _focusMonitor, _changeDetectorRef, _dir, _ngZone, _document, _animationMode) { var _this = this; this._elementRef = _elementRef; this._focusMonitor = _focusMonitor; this._changeDetectorRef = _changeDetectorRef; this._dir = _dir; this._ngZone = _ngZone; this._animationMode = _animationMode; /** * Show min max labels */ this.showMinMaxLabels = false; /** Event emitted when the slider value has changed. */ this.change = new i0.EventEmitter(); /** Event emitted when the slider thumb moves. */ this.input = new i0.EventEmitter(); /** * Emits when the raw value of the slider changes. This is here primarily * to facilitate the two-way binding for the `value` input. * @docs-private */ this.valueChange = new i0.EventEmitter(); /** * Whether or not the thumb is sliding. * Used to determine if there should be a transition for the thumb and fill track. */ this._isSliding = false; /** * Whether or not the slider is active (clicked or sliding). * Used to shrink and grow the thumb as according to the Material Design spec. */ this._isActive = false; /** The size of a tick interval as a percentage of the size of the track. */ this._tickIntervalPercent = 0; /** The dimensions of the slider. */ this._sliderDimensions = null; /** Subscription to the Directionality change EventEmitter. */ this._dirChangeSubscription = rxjs.Subscription.EMPTY; this._disabled = false; this._tabIndex = 0; this._invert = false; this._max = 100; this._min = 0; this._step = 1; this._thumbLabel = false; this._tickInterval = 0; this._value = null; this._percent = 0; /** onTouch function registered via registerOnTouch (ControlValueAccessor). */ this.onTouched = function () { }; this._controlValueAccessorChangeFn = function () { }; /** Called when the user has put their pointer down on the slider. */ this._pointerDown = function (event) { // Don't do anything if the slider is disabled or the // user is using anything other than the main mouse button. if (_this.disabled || _this._isSliding || (!isTouchEvent(event) && event.button !== 0)) { return; } _this._ngZone.run(function () { var oldValue = _this.value; var pointerPosition = getPointerPositionOnPage(event); _this._isSliding = true; _this._lastPointerEvent = event; event.preventDefault(); _this._focusHostElement(); _this._onMouseenter(); // Simulate mouseenter in case this is a mobile device. _this._bindGlobalEvents(event); _this._focusHostElement(); _this._updateValueFromPosition(pointerPosition); _this._valueOnSlideStart = oldValue; // Emit a change and input event if the value changed. if (oldValue != _this.value) { _this._emitInputEvent(); } }); }; /** * Called when the user has moved their pointer after * starting to drag. Bound on the document level. */ this._pointerMove = function (event) { if (_this._isSliding) { // Prevent the slide from selecting anything else. event.preventDefault(); var oldValue = _this.value; _this._lastPointerEvent = event; _this._updateValueFromPosition(getPointerPositionOnPage(event)); // Native range elements always emit `input` events when the value changed while sliding. if (oldValue != _this.value) { _this._emitInputEvent(); } } }; /** Called when the user has lifted their pointer. Bound on the document level. */ this._pointerUp = function (event) { if (_this._isSliding) { event.preventDefault(); _this._removeGlobalEvents(); _this._isSliding = false; if (_this._valueOnSlideStart != _this.value && !_this.disabled) { _this._emitChangeEvent(); } _this._valueOnSlideStart = _this._lastPointerEvent = null; } }; /** Called when the window has lost focus. */ this._windowBlur = function () { // If the window is blurred while dragging we need to stop dragging because the // browser won't dispatch the `mouseup` and `touchend` events anymore. if (_this._lastPointerEvent) { _this._pointerUp(_this._lastPointerEvent); } }; this._document = _document; } Object.defineProperty(RangeSliderComponent.prototype, "disabled", { get: function () { return this._disabled; }, set: function (value) { this._disabled = coercion.coerceBooleanProperty(value); }, enumerable: false, configurable: true }); Object.defineProperty(RangeSliderComponent.prototype, "tabIndex", { get: function () { return this.disabled ? -1 : this._tabIndex; }, set: function (value) { // If the specified tabIndex value is null or undefined, fall back to the default value. this._tabIndex = value != null ? coercion.coerceNumberProperty(value) : 0; }, enumerable: false, configurable: true }); Object.defineProperty(RangeSliderComponent.prototype, "invert", { /** Whether the slider is inverted. */ get: function () { return this._invert; }, set: function (value) { this._invert = coercion.coerceBooleanProperty(value); }, enumerable: false, configurable: true }); Object.defineProperty(RangeSliderComponent.prototype, "max", { /** The maximum value that the slider can have. */ get: function () { return this._max; }, set: function (v) { this._max = coercion.coerceNumberProperty(v, this._max); this._percent = this._calculatePercentage(this._value); // Since this also modifies the percentage, we need to let the change detection know. this._changeDetectorRef.markForCheck(); }, enumerable: false, configurable: true }); Object.defineProperty(RangeSliderComponent.prototype, "min", { /** The minimum value that the slider can have. */ get: function () { return this._min; }, set: function (v) { this._min = coercion.coerceNumberProperty(v, this._min); // If the value wasn't explicitly set by the user, set it to the min. if (this._value === null) { this.value = this._min; } this._percent = this._calculatePercentage(this._value); // Since this also modifies the percentage, we need to let the change detection know. this._changeDetectorRef.markForCheck(); }, enumerable: false, configurable: true }); Object.defineProperty(RangeSliderComponent.prototype, "step", { /** The values at which the thumb will snap. */ get: function () { return this._step; }, set: function (v) { this._step = coercion.coerceNumberProperty(v, this._step); if (this._step % 1 !== 0) { this._roundToDecimal = this._step.toString().split('.').pop().length; } // Since this could modify the label, we need to notify the change detection. this._changeDetectorRef.markForCheck(); }, enumerable: false, configurable: true }); Object.defineProperty(RangeSliderComponent.prototype, "thumbLabel", { /** Whether or not to show the thumb label. */ get: function () { return this._thumbLabel; }, set: function (value) { this._thumbLabel = coercion.coerceBooleanProperty(value); }, enumerable: false, configurable: true }); Object.defineProperty(RangeSliderComponent.prototype, "tickInterval", { /** * How often to show ticks. Relative to the step so that a tick always appears on a step. * Ex: Tick interval of 4 with a step of 3 will draw a tick every 4 steps (every 12 values). */ get: function () { return this._tickInterval; }, set: function (value) { if (value === 'auto') { this._tickInterval = 'auto'; } else i