From 4c0b933549ae7e53009b2a2f3e64f38811770c40 Mon Sep 17 00:00:00 2001 From: "Suwart, Jan" Date: Wed, 26 Aug 2020 15:11:30 +0200 Subject: [PATCH] Fix code-preview bug of demo app, add multicolor style example, improve docs --- README.md | 20 ++-- docs/assets/sprites/image-sprite.svg | 2 +- docs/assets/sprites/sprite.svg | 2 +- docs/assets/svg-images/multicolor-image.svg | 31 +++--- docs/index.html | 4 +- ...751be2.js => main.205eceb8513fa8a26c98.js} | 2 +- ...b5.css => styles.7c0c7247ddd4bbf7f35d.css} | 2 +- package.json | 2 +- projects/icon-sprite/README.md | 20 ++-- projects/icon-sprite/package.json | 2 +- src/app/app.component.html | 100 ++++++++++-------- src/app/app.component.scss | 9 -- .../manipulator/manipulator.component.html | 25 ++--- .../manipulator/manipulator.component.scss | 9 +- src/app/manipulator/manipulator.component.ts | 43 +++++--- src/assets/sprites/image-sprite.svg | 2 +- src/assets/sprites/sprite.svg | 2 +- src/assets/svg-images/multicolor-image.svg | 31 +++--- src/styles.scss | 4 +- 19 files changed, 171 insertions(+), 141 deletions(-) rename docs/{main.b4ccd746f2283d751be2.js => main.205eceb8513fa8a26c98.js} (72%) rename docs/{styles.9d57022c59f26ab256b5.css => styles.7c0c7247ddd4bbf7f35d.css} (90%) diff --git a/README.md b/README.md index d14a466..cd92cb0 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ This library provides both a solution for generating SVG sprites and a [module]( ## Installation After installing the package as dependency you can import it into -any application’s app.module.ts by simply including it in its `@NgModule` imports array: +any application’s `app.module.ts` by simply including it in its `@NgModule` imports array: ```javascript import { IconSpriteModule } from 'ng-svg-icon-sprite'; // <-- here @@ -40,7 +40,7 @@ export class AppModule { } To use your SVGs from a sprite you need to: 1. Convert your SVG icons into a sprite using a script -2. Include the `svg-icon-sprite` component with the sprite path and the icon name +2. Include the `svg-icon-sprite` component with the sprite path, and the icon name ### Step 1: Generate the sprite @@ -66,7 +66,7 @@ now execute the script: npm run generate:svg-sprite ``` -__Note: the fill and stroke properties are removed so the SVG can be filled via CSS. If don't need to apply color changes on your icons, +__Note: only if the fill and stroke attributes are removed, the SVG can be styled via CSS. If don't need to apply color changes on your icons, go for the multi-color pattern [described below](#user-content-dealing-with-multi-color-svgs-containing-inline-styles)__ The script will take all SVG icons under `src/app/assets/icons` and create a sprite SVG into @@ -115,7 +115,7 @@ the name of the sprite and `icon` is the filename of the svg icon. ## Styling -To change the sprite color add a CSS `color` property to the component invoking svg-icon-sprite. The SVG component uses +In order to change the icon color, add a CSS `color` property to the component invoking svg-icon-sprite. The SVG component uses the `currentColor` value to [pass the ancestor's color](https://css-tricks.com/cascading-svg-fill-color) through to the SVG shapes: ```css @@ -136,8 +136,8 @@ svg2sprite sourcefolder destination/filename.svg ### Scaling and Sizing If your SVG does not scale like expected (i.e. it is cropped or larger than desired) it might be lacking a `viewBox`. -You need to set the `viewBox` property manually to match the size of the exported shape. A combination of the correct -`viewBox` and width is required. Add the `viewBox` property and decrease/increase the last 2 values: +You need to set the `viewBox` attributes manually to match the size of the exported shape. A combination of the correct +`viewBox` and width is required. Add the `viewBox` attribute and decrease/increase the last 2 values: ```html @@ -154,7 +154,7 @@ Still having trouble with scaling or sizing? Read [this article](https://css-tri ### Dealing with multi color SVGs containing inline styles If you wish use SVGs that contain inline styles (multi-color) that do not need to be overridden by CSS, -you will have to provide a separate sprite file that keeps the stroke and fill attributes: +provide a separate sprite file that keeps the stroke and fill attributes: ```json "scripts": { @@ -162,11 +162,11 @@ you will have to provide a separate sprite file that keeps the stroke and fill a } ``` -The generated sprite will preserve it's original styles, but you won't be able to style it via CSS ([demo](https://jannicz.github.io/ng-svg-icon-sprite/#multicolor)). +The generated sprite will preserve its original styles, but you won't be able to style it via CSS that easily ([demo](https://jannicz.github.io/ng-svg-icon-sprite/#multicolor)). ### Setting a default sprite path for all icons -If your app uses one sprite source, you can set it's path in your `@NgModule` imports array: +If your app uses one sprite source, you can set its path in your `@NgModule` imports array: ```javascript imports: [ @@ -180,7 +180,7 @@ You can now leave out the path and just provide the icon name ([demo](https://ja ``` -Doing so you will still be able override the default path by using the full syntax for particular icons that should use a different sprite file. +Doing so you will still be able to override the default path by using the full syntax for particular icons that should use a different sprite file. ## Browser Support - Chrome (63) diff --git a/docs/assets/sprites/image-sprite.svg b/docs/assets/sprites/image-sprite.svg index 5aec42e..3468741 100644 --- a/docs/assets/sprites/image-sprite.svg +++ b/docs/assets/sprites/image-sprite.svg @@ -1 +1 @@ -backgroundLayer 1 \ No newline at end of file + \ No newline at end of file diff --git a/docs/assets/sprites/sprite.svg b/docs/assets/sprites/sprite.svg index 0bd2d80..6b5b688 100644 --- a/docs/assets/sprites/sprite.svg +++ b/docs/assets/sprites/sprite.svg @@ -1 +1 @@ -CircleDeleteStar Star \ No newline at end of file + \ No newline at end of file diff --git a/docs/assets/svg-images/multicolor-image.svg b/docs/assets/svg-images/multicolor-image.svg index 4ce6516..9163adc 100644 --- a/docs/assets/svg-images/multicolor-image.svg +++ b/docs/assets/svg-images/multicolor-image.svg @@ -1,15 +1,22 @@ - - background - - - + + + + + + + + + + + + + - - - Layer 1 - - - - diff --git a/docs/index.html b/docs/index.html index 8dd81b0..4003838 100644 --- a/docs/index.html +++ b/docs/index.html @@ -6,8 +6,8 @@ - + - + diff --git a/docs/main.b4ccd746f2283d751be2.js b/docs/main.205eceb8513fa8a26c98.js similarity index 72% rename from docs/main.b4ccd746f2283d751be2.js rename to docs/main.205eceb8513fa8a26c98.js index dd6ab5c..078d597 100644 --- a/docs/main.b4ccd746f2283d751be2.js +++ b/docs/main.205eceb8513fa8a26c98.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{0:function(e,n,t){e.exports=t("zUnb")},crnd:function(e,n){function t(e){return Promise.resolve().then((function(){var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}))}t.keys=function(){return[]},t.resolve=t,e.exports=t,t.id="crnd"},zUnb:function(e,n,t){"use strict";function r(e){return(r=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function i(e,n,t){return(i="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(e,n,t){var i=function(e,n){for(;!Object.prototype.hasOwnProperty.call(e,n)&&null!==(e=r(e)););return e}(e,n);if(i){var l=Object.getOwnPropertyDescriptor(i,n);return l.get?l.get.call(t):l.value}})(e,n,t||e)}function l(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function o(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t=e.length?{done:!0}:{done:!1,value:e[n++]}},e:function(e){throw e},f:t}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var r,i,l=!0,o=!1;return{s:function(){r=e[Symbol.iterator]()},n:function(){var e=r.next();return l=e.done,e},e:function(e){o=!0,i=e},f:function(){try{l||null==r.return||r.return()}finally{if(o)throw i}}}}function d(e,n){return(d=Object.setPrototypeOf||function(e,n){return e.__proto__=n,e})(e,n)}function h(e,n){if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(n&&n.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),n&&d(e,n)}function f(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}function v(e){return(v="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function p(e,n){return!n||"object"!==v(n)&&"function"!=typeof n?l(e):n}function g(e){var n=f();return function(){var t,i=r(e);if(n){var l=r(this).constructor;t=Reflect.construct(i,arguments,l)}else t=i.apply(this,arguments);return p(this,t)}}function y(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}function m(e,n){for(var t=0;t2&&void 0!==arguments[2]?arguments[2]:Number.POSITIVE_INFINITY;return"function"==typeof n?function(r){return r.pipe(ie((function(t,r){return ne(e(t,r)).pipe(Z((function(e,i){return n(t,e,r,i)})))}),t))}:("number"==typeof n&&(t=n),function(n){return n.lift(new le(e,t))})}var le=function(){function e(n){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:Number.POSITIVE_INFINITY;y(this,e),this.project=n,this.concurrent=t}return _(e,[{key:"call",value:function(e,n){return n.subscribe(new oe(e,this.project,this.concurrent))}}]),e}(),oe=function(e){h(t,e);var n=g(t);function t(e,r){var i,l=arguments.length>2&&void 0!==arguments[2]?arguments[2]:Number.POSITIVE_INFINITY;return y(this,t),(i=n.call(this,e)).project=r,i.concurrent=l,i.hasCompleted=!1,i.buffer=[],i.active=0,i.index=0,i}return _(t,[{key:"_next",value:function(e){this.active0?this._next(e.shift()):0===this.active&&this.hasCompleted&&this.destination.complete()}}]),t}(re);function ue(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:Number.POSITIVE_INFINITY;return ie(P,e)}function ae(e,n){return n?ee(e,n):new F(W(e))}function se(){return function(e){return e.lift(new ce(e))}}var ce=function(){function e(n){y(this,e),this.connectable=n}return _(e,[{key:"call",value:function(e,n){var t=this.connectable;t._refCount++;var r=new de(e,t),i=n.subscribe(r);return r.closed||(r.connection=t.connect()),i}}]),e}(),de=function(e){h(t,e);var n=g(t);function t(e,r){var i;return y(this,t),(i=n.call(this,e)).connectable=r,i}return _(t,[{key:"_unsubscribe",value:function(){var e=this.connectable;if(e){this.connectable=null;var n=e._refCount;if(n<=0)this.connection=null;else if(e._refCount=n-1,n>1)this.connection=null;else{var t=this.connection,r=e._connection;this.connection=null,!r||t&&r!==t||r.unsubscribe()}}else this.connection=null}}]),t}(D),he=function(e){h(t,e);var n=g(t);function t(e,r){var i;return y(this,t),(i=n.call(this)).source=e,i.subjectFactory=r,i._refCount=0,i._isComplete=!1,i}return _(t,[{key:"_subscribe",value:function(e){return this.getSubject().subscribe(e)}},{key:"getSubject",value:function(){var e=this._subject;return e&&!e.isStopped||(this._subject=this.subjectFactory()),this._subject}},{key:"connect",value:function(){var e=this._connection;return e||(this._isComplete=!1,(e=this._connection=new E).add(this.source.subscribe(new ve(this.getSubject(),this))),e.closed&&(this._connection=null,e=E.EMPTY)),e}},{key:"refCount",value:function(){return se()(this)}}]),t}(F),fe=function(){var e=he.prototype;return{operator:{value:null},_refCount:{value:0,writable:!0},_subject:{value:null,writable:!0},_connection:{value:null,writable:!0},_subscribe:{value:e._subscribe},_isComplete:{value:e._isComplete,writable:!0},getSubject:{value:e.getSubject},connect:{value:e.connect},refCount:{value:e.refCount}}}(),ve=function(e){h(t,e);var n=g(t);function t(e,r){var i;return y(this,t),(i=n.call(this,e)).connectable=r,i}return _(t,[{key:"_error",value:function(e){this._unsubscribe(),i(r(t.prototype),"_error",this).call(this,e)}},{key:"_complete",value:function(){this.connectable._isComplete=!0,this._unsubscribe(),i(r(t.prototype),"_complete",this).call(this)}},{key:"_unsubscribe",value:function(){var e=this.connectable;if(e){this.connectable=null;var n=e._connection;e._refCount=0,e._subject=null,e._connection=null,n&&n.unsubscribe()}}}]),t}(U);function pe(){return new B}var ge="__parameters__";function ye(e,n,t){return function(){var r=function(e){return function(){if(e){var n=e.apply(void 0,arguments);for(var t in n)this[t]=n[t]}}}(n);function i(){for(var e=arguments.length,n=new Array(e),t=0;t1&&void 0!==arguments[1]?arguments[1]:ke.Default;if(void 0===ze)throw new Error("inject() must be called from an injection context");return null===ze?Qe(e,void 0,n):ze.get(e,n&ke.Optional?null:void 0,n)}function qe(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:ke.Default;return Ze(De(e),n)}function Qe(e,n,t){var r=Ee(e);if(r&&"root"==r.providedIn)return void 0===r.value?r.value=r.factory():r.value;if(t&ke.Optional)return null;if(void 0!==n)return n;throw new Error("Injector: NOT_FOUND [".concat(Oe(e),"]"))}var We=function(){function e(){y(this,e)}return _(e,[{key:"get",value:function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:Le;if(n===Le){var t=new Error("NullInjectorError: No provider for ".concat(Oe(e),"!"));throw t.name="NullInjectorError",t}return n}}]),e}();function Ke(e,n,t,r){var i=e.ngTempTokenPath;throw n.__source&&i.unshift(n.__source),e.message=Ye("\n"+e.message,i,t,r),e.ngTokenPath=i,e.ngTempTokenPath=null,e}function Ye(e,n,t){var r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null;e=e&&"\n"===e.charAt(0)&&"\u0275"==e.charAt(1)?e.substr(2):e;var i=Oe(n);if(Array.isArray(n))i=n.map(Oe).join(" -> ");else if("object"==typeof n){var l=[];for(var o in n)if(n.hasOwnProperty(o)){var u=n[o];l.push(o+":"+("string"==typeof u?JSON.stringify(u):Oe(u)))}i="{".concat(l.join(", "),"}")}return"".concat(t).concat(r?"("+r+")":"","[").concat(i,"]: ").concat(e.replace(Ue,"\n "))}var $e=function e(){y(this,e)},Je=function e(){y(this,e)};function Xe(e,n,t){n>=e.length?e.push(t):e.splice(n,0,t)}function en(e,n){return n>=e.length-1?e.pop():e.splice(n,1)[0]}function nn(e,n){for(var t=[],r=0;r1?n-1:0),r=1;r";try{var n=(new window.DOMParser).parseFromString(e,"text/html").body;return n.removeChild(n.firstChild),n}catch(t){return null}}}]),e}(),Cn=function(){function e(n){if(y(this,e),this.defaultDoc=n,this.inertDocument=this.defaultDoc.implementation.createHTMLDocument("sanitization-inert"),null==this.inertDocument.body){var t=this.inertDocument.createElement("html");this.inertDocument.appendChild(t);var r=this.inertDocument.createElement("body");t.appendChild(r)}}return _(e,[{key:"getInertBodyElement",value:function(e){var n=this.inertDocument.createElement("template");if("content"in n)return n.innerHTML=e,n;var t=this.inertDocument.createElement("body");return t.innerHTML=e,this.defaultDoc.documentMode&&this.stripCustomNsAttrs(t),t}},{key:"stripCustomNsAttrs",value:function(e){for(var n=e.attributes,t=n.length-1;0"),!0}},{key:"endElement",value:function(e){var n=e.nodeName.toLowerCase();Nn.hasOwnProperty(n)&&!Vn.hasOwnProperty(n)&&(this.buf.push(""))}},{key:"chars",value:function(e){this.buf.push(Bn(e))}},{key:"checkClobberedElement",value:function(e,n){if(n&&(e.compareDocumentPosition(n)&Node.DOCUMENT_POSITION_CONTAINED_BY)===Node.DOCUMENT_POSITION_CONTAINED_BY)throw new Error("Failed to sanitize html because the element is clobbered: ".concat(e.outerHTML));return n}}]),e}(),Ln=/[\uD800-\uDBFF][\uDC00-\uDFFF]/g,Un=/([^\#-~ |!])/g;function Bn(e){return e.replace(/&/g,"&").replace(Ln,(function(e){return"&#"+(1024*(e.charCodeAt(0)-55296)+(e.charCodeAt(1)-56320)+65536)+";"})).replace(Un,(function(e){return"&#"+e.charCodeAt(0)+";"})).replace(//g,">")}function zn(e){return"content"in e&&function(e){return e.nodeType===Node.ELEMENT_NODE&&"TEMPLATE"===e.nodeName}(e)?e.content:null}var Gn=function(e){return e[e.NONE=0]="NONE",e[e.HTML=1]="HTML",e[e.STYLE=2]="STYLE",e[e.SCRIPT=3]="SCRIPT",e[e.URL=4]="URL",e[e.RESOURCE_URL=5]="RESOURCE_URL",e}({}),Zn=/([A-Z])/g;function qn(e){try{return null!=e?e.toString().slice(0,30):e}catch(n){return"[ERROR] Exception while trying to serialize the value"}}var Qn=function(){var e=function e(){y(this,e)};return e.__NG_ELEMENT_ID__=function(){return Wn()},e}(),Wn=function(){},Kn=new je("Set Injector scope."),Yn=function(e,n,t){return new tt(e,n,t)},$n=function(){var e=function(){function e(){y(this,e)}return _(e,null,[{key:"create",value:function(e,n){return Array.isArray(e)?Yn(e,n,""):Yn(e.providers,e.parent,e.name||"")}}]),e}();return e.THROW_IF_NOT_FOUND=Le,e.NULL=new We,e.\u0275prov=xe({token:e,providedIn:"any",factory:function(){return qe(He)}}),e.__NG_ELEMENT_ID__=-1,e}(),Jn=function(e){return e},Xn=[],et=Jn,nt=function(){return Array.prototype.slice.call(arguments)},tt=function(){function e(n){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:$n.NULL,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;y(this,e),this.parent=t,this.source=r;var i=this._records=new Map;i.set($n,{token:$n,fn:Jn,deps:Xn,value:this,useNew:!1}),i.set(He,{token:He,fn:Jn,deps:Xn,value:this,useNew:!1}),this.scope=lt(i,n)}return _(e,[{key:"get",value:function(e,n){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:ke.Default,r=this._records,i=r.get(e);if(void 0===i){var l=Ee(e);if(l){var o=l&&l.providedIn;("any"===o||null!=o&&o===this.scope)&&r.set(e,i=rt({provide:e,useFactory:l.factory,deps:Xn}))}void 0===i&&r.set(e,null)}var u=Ge(this);try{return ot(e,i,r,this.parent,n,t)}catch(a){return Ke(a,e,"StaticInjectorError",this.source)}finally{Ge(u)}}},{key:"toString",value:function(){var e=[];return this._records.forEach((function(n,t){return e.push(Oe(t))})),"StaticInjector[".concat(e.join(", "),"]")}}]),e}();function rt(e){var n=function(e){var n=Xn,t=e.deps;if(t&&t.length){n=[];for(var r=0;r2&&void 0!==arguments[2]?arguments[2]:$n.THROW_IF_NOT_FOUND,r=Ge(e);try{if(8&n.flags)return n.token;if(2&n.flags&&(t=null),1&n.flags)return e._parent.get(n.token,t);var i=n.tokenKey;switch(i){case Lr:case Ur:case Br:return e}var l,o=e._def.providersByKey[i];if(o){var u=e._providers[o.index];return void 0===u&&(u=e._providers[o.index]=qr(e,o)),u===Hr?void 0:u}if((l=Ee(n.token))&&Zr(e,l)){var a=e._providers.length;return e._def.providers[a]=e._def.providersByKey[n.tokenKey]={flags:5120,value:l.factory,deps:[],index:a,token:n.token},e._providers[a]=Hr,e._providers[a]=qr(e,e._def.providersByKey[n.tokenKey])}return 4&n.flags?t:e._parent.get(n.token,t)}finally{Ge(r)}}function Zr(e,n){var t=n.providedIn;return null!=t&&("any"===t||t===e._def.scope||function(e,n){return e._def.modules.indexOf(n)>-1}(e,t))}function qr(e,n){var t;switch(201347067&n.flags){case 512:t=function(e,n,t){var r=t.length;switch(r){case 0:return new n;case 1:return new n(Gr(e,t[0]));case 2:return new n(Gr(e,t[0]),Gr(e,t[1]));case 3:return new n(Gr(e,t[0]),Gr(e,t[1]),Gr(e,t[2]));default:for(var i=[],l=0;l=t.length)&&(n=t.length-1),n<0)return null;var r=t[n];return r.viewContainerParent=null,en(t,n),ar.dirtyParentQueries(r),Kr(r),r}function Wr(e,n,t){var r=n?Cr(n,n.def.lastRenderRootNode):e.renderElement,i=t.renderer.parentNode(r),l=t.renderer.nextSibling(r);Ar(t,2,i,l,void 0)}function Kr(e){Ar(e,3,null,null,void 0)}var Yr={};function $r(e,n,t,r,i,l){return new Jr(e,n,t,r,i,l)}var Jr=function(e){h(t,e);var n=g(t);function t(e,r,i,l,o,u){var a;return y(this,t),(a=n.call(this)).selector=e,a.componentType=r,a._inputs=l,a._outputs=o,a.ngContentSelectors=u,a.viewDefFactory=i,a}return _(t,[{key:"create",value:function(e,n,t,r){if(!r)throw new Error("ngModule should be provided");var i=Vr(this.viewDefFactory),l=i.nodes[0].element.componentProvider.nodeIndex,o=ar.createRootView(e,n||[],t,i,r,Yr),u=lr(o,l).instance;return t&&o.renderer.setAttribute(ir(o,0).renderElement,"ng-version",Dt.full),new Xr(o,new ri(o),u)}},{key:"inputs",get:function(){var e=[],n=this._inputs;for(var t in n)e.push({propName:t,templateName:n[t]});return e}},{key:"outputs",get:function(){var e=[];for(var n in this._outputs)e.push({propName:n,templateName:this._outputs[n]});return e}}]),t}(yt),Xr=function(e){h(t,e);var n=g(t);function t(e,r,i){var l;return y(this,t),(l=n.call(this))._view=e,l._viewRef=r,l._component=i,l._elDef=l._view.def.nodes[0],l.hostView=r,l.changeDetectorRef=r,l.instance=i,l}return _(t,[{key:"destroy",value:function(){this._viewRef.destroy()}},{key:"onDestroy",value:function(e){this._viewRef.onDestroy(e)}},{key:"location",get:function(){return new Et(ir(this._view,this._elDef.nodeIndex).renderElement)}},{key:"injector",get:function(){return new ui(this._view,this._elDef)}},{key:"componentType",get:function(){return this._component.constructor}}]),t}(gt);function ei(e,n,t){return new ni(e,n,t)}var ni=function(){function e(n,t,r){y(this,e),this._view=n,this._elDef=t,this._data=r,this._embeddedViews=[]}return _(e,[{key:"clear",value:function(){for(var e=this._embeddedViews.length-1;e>=0;e--){var n=Qr(this._data,e);ar.destroyView(n)}}},{key:"get",value:function(e){var n=this._embeddedViews[e];if(n){var t=new ri(n);return t.attachToViewContainerRef(this),t}return null}},{key:"createEmbeddedView",value:function(e,n,t){var r=e.createEmbeddedView(n||{});return this.insert(r,t),r}},{key:"createComponent",value:function(e,n,t,r,i){var l=t||this.parentInjector;i||e instanceof Ct||(i=l.get($e));var o=e.create(l,r,void 0,i);return this.insert(o.hostView,n),o}},{key:"insert",value:function(e,n){if(e.destroyed)throw new Error("Cannot insert a destroyed View in a ViewContainer!");var t,r,i,l,o=e;return l=(t=this._data).viewContainer._embeddedViews,null==(r=n)&&(r=l.length),(i=o._view).viewContainerParent=this._view,Xe(l,r,i),function(e,n){var t=br(n);if(t&&t!==e&&!(16&n.state)){n.state|=16;var r=t.template._projectedViews;r||(r=t.template._projectedViews=[]),r.push(n),function(e,n){if(!(4&n.flags)){e.nodeFlags|=4,n.flags|=4;for(var t=n.parent;t;)t.childFlags|=4,t=t.parent}}(n.parent.def,n.parentNodeDef)}}(t,i),ar.dirtyParentQueries(i),Wr(t,r>0?l[r-1]:null,i),o.attachToViewContainerRef(this),e}},{key:"move",value:function(e,n){if(e.destroyed)throw new Error("Cannot move a destroyed View in a ViewContainer!");var t,r,i,l,o,u=this._embeddedViews.indexOf(e._view);return i=n,o=(l=(t=this._data).viewContainer._embeddedViews)[r=u],en(l,r),null==i&&(i=l.length),Xe(l,i,o),ar.dirtyParentQueries(o),Kr(o),Wr(t,i>0?l[i-1]:null,o),e}},{key:"indexOf",value:function(e){return this._embeddedViews.indexOf(e._view)}},{key:"remove",value:function(e){var n=Qr(this._data,e);n&&ar.destroyView(n)}},{key:"detach",value:function(e){var n=Qr(this._data,e);return n?new ri(n):null}},{key:"element",get:function(){return new Et(this._data.renderElement)}},{key:"injector",get:function(){return new ui(this._view,this._elDef)}},{key:"parentInjector",get:function(){for(var e=this._view,n=this._elDef.parent;!n&&e;)n=kr(e),e=e.parent;return e?new ui(e,n):new ui(this._view,null)}},{key:"length",get:function(){return this._embeddedViews.length}}]),e}();function ti(e){return new ri(e)}var ri=function(){function e(n){y(this,e),this._view=n,this._viewContainerRef=null,this._appRef=null}return _(e,[{key:"markForCheck",value:function(){mr(this._view)}},{key:"detach",value:function(){this._view.state&=-5}},{key:"detectChanges",value:function(){var e=this._view.root.rendererFactory;e.begin&&e.begin();try{ar.checkAndUpdateView(this._view)}finally{e.end&&e.end()}}},{key:"checkNoChanges",value:function(){ar.checkNoChangesView(this._view)}},{key:"reattach",value:function(){this._view.state|=4}},{key:"onDestroy",value:function(e){this._view.disposables||(this._view.disposables=[]),this._view.disposables.push(e)}},{key:"destroy",value:function(){this._appRef?this._appRef.detachView(this):this._viewContainerRef&&this._viewContainerRef.detach(this._viewContainerRef.indexOf(this)),ar.destroyView(this._view)}},{key:"detachFromAppRef",value:function(){this._appRef=null,Kr(this._view),ar.dirtyParentQueries(this._view)}},{key:"attachToAppRef",value:function(e){if(this._viewContainerRef)throw new Error("This view is already attached to a ViewContainer!");this._appRef=e}},{key:"attachToViewContainerRef",value:function(e){if(this._appRef)throw new Error("This view is already attached directly to the ApplicationRef!");this._viewContainerRef=e}},{key:"rootNodes",get:function(){return Ar(this._view,0,void 0,void 0,e=[]),e;var e}},{key:"context",get:function(){return this._view.context}},{key:"destroyed",get:function(){return 0!=(128&this._view.state)}}]),e}();function ii(e,n){return new li(e,n)}var li=function(e){h(t,e);var n=g(t);function t(e,r){var i;return y(this,t),(i=n.call(this))._parentView=e,i._def=r,i}return _(t,[{key:"createEmbeddedView",value:function(e){return new ri(ar.createEmbeddedView(this._parentView,this._def,this._def.element.template,e))}},{key:"elementRef",get:function(){return new Et(ir(this._parentView,this._def.nodeIndex).renderElement)}}]),t}(Wt);function oi(e,n){return new ui(e,n)}var ui=function(){function e(n,t){y(this,e),this.view=n,this.elDef=t}return _(e,[{key:"get",value:function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:$n.THROW_IF_NOT_FOUND,t=!!this.elDef&&0!=(33554432&this.elDef.flags);return ar.resolveDep(this.view,this.elDef,t,{flags:0,token:e,tokenKey:dr(e)},n)}}]),e}();function ai(e,n){var t=e.def.nodes[n];if(1&t.flags){var r=ir(e,t.nodeIndex);return t.element.template?r.template:r.renderElement}if(2&t.flags)return rr(e,t.nodeIndex).renderText;if(20240&t.flags)return lr(e,t.nodeIndex).instance;throw new Error("Illegal state: read nodeValue for node index ".concat(n))}function si(e,n,t,r){return new ci(e,n,t,r)}var ci=function(){function e(n,t,r,i){y(this,e),this._moduleType=n,this._parent=t,this._bootstrapComponents=r,this._def=i,this._destroyListeners=[],this._destroyed=!1,this.injector=this,function(e){for(var n=e._def,t=e._providers=nn(n.providers.length),r=0;r1&&void 0!==arguments[1]?arguments[1]:$n.THROW_IF_NOT_FOUND,t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:ke.Default,r=0;return t&ke.SkipSelf?r|=1:t&ke.Self&&(r|=4),Gr(this,{token:e,tokenKey:dr(e),flags:r},n)}},{key:"destroy",value:function(){if(this._destroyed)throw new Error("The ng module ".concat(Oe(this.instance.constructor)," has already been destroyed."));this._destroyed=!0,function(e,n){for(var t=e._def,r=new Set,i=0;i0,n.provider.value,n.provider.deps);if(n.outputs.length)for(var r=0;r0,r=n.provider;switch(201347067&n.flags){case 512:return Ti(e,n.parent,t,r.value,r.deps);case 1024:return function(e,n,t,r,i){var l=i.length;switch(l){case 0:return r();case 1:return r(Si(e,n,t,i[0]));case 2:return r(Si(e,n,t,i[0]),Si(e,n,t,i[1]));case 3:return r(Si(e,n,t,i[0]),Si(e,n,t,i[1]),Si(e,n,t,i[2]));default:for(var o=[],u=0;u4&&void 0!==arguments[4]?arguments[4]:$n.THROW_IF_NOT_FOUND;if(8&r.flags)return r.token;var l=e;2&r.flags&&(i=null);var o=r.tokenKey;o===pi&&(t=!(!n||!n.element.componentView)),n&&1&r.flags&&(t=!1,n=n.parent);for(var u=e;u;){if(n)switch(o){case di:var a=Oi(u,n,t);return a.renderer;case hi:return new Et(ir(u,n.nodeIndex).renderElement);case fi:return ir(u,n.nodeIndex).viewContainer;case vi:if(n.element.template)return ir(u,n.nodeIndex).template;break;case pi:var s=Oi(u,n,t);return ti(s);case gi:case yi:return oi(u,n);default:var c=(t?n.element.allProviders:n.element.publicProviders)[o];if(c){var d=lr(u,c.nodeIndex);return d||(d={instance:Ei(u,c)},u.nodes[c.nodeIndex]=d),d.instance}}t=xr(u),n=kr(u),u=u.parent,4&r.flags&&(u=null)}var h=l.root.injector.get(r.token,Ii);return h!==Ii||i===Ii?h:l.root.ngModule.injector.get(r.token,i)}function Oi(e,n,t){var r;if(t)r=ir(e,n.nodeIndex).componentView;else for(r=e;r.parent&&!xr(r);)r=r.parent;return r}function Vi(e,n,t,r,i,l){if(32768&t.flags){var o=ir(e,t.parent.nodeIndex).componentView;2&o.def.flags&&(o.state|=8)}if(n.instance[t.bindings[r].name]=i,524288&t.flags){l=l||{};var u=dt.unwrap(e.oldValues[t.bindingIndex+r]);l[t.bindings[r].nonMinifiedName]=new rn(u,i,0!=(2&e.state))}return e.oldValues[t.bindingIndex+r]=i,l}function Ai(e,n){if(e.def.nodeFlags&n)for(var t=e.def.nodes,r=0,i=0;i0&&void 0!==arguments[0]&&arguments[0];return y(this,t),(e=n.call(this)).__isAsync=r,e}return _(t,[{key:"emit",value:function(e){i(r(t.prototype),"next",this).call(this,e)}},{key:"subscribe",value:function(e,n,l){var o,u=function(e){return null},a=function(){return null};e&&"object"==typeof e?(o=this.__isAsync?function(n){setTimeout((function(){return e.next(n)}))}:function(n){e.next(n)},e.error&&(u=this.__isAsync?function(n){setTimeout((function(){return e.error(n)}))}:function(n){e.error(n)}),e.complete&&(a=this.__isAsync?function(){setTimeout((function(){return e.complete()}))}:function(){e.complete()})):(o=this.__isAsync?function(n){setTimeout((function(){return e(n)}))}:function(n){e(n)},n&&(u=this.__isAsync?function(e){setTimeout((function(){return n(e)}))}:function(e){n(e)}),l&&(a=this.__isAsync?function(){setTimeout((function(){return l()}))}:function(){l()}));var s=i(r(t.prototype),"subscribe",this).call(this,o,u,a);return e instanceof E&&e.add(s),s}}]),t}(B);function Ui(){return this._results[st()]()}var Bi=function(){function e(){y(this,e),this.dirty=!0,this._results=[],this.changes=new Li,this.length=0;var n=st(),t=e.prototype;t[n]||(t[n]=Ui)}return _(e,[{key:"map",value:function(e){return this._results.map(e)}},{key:"filter",value:function(e){return this._results.filter(e)}},{key:"find",value:function(e){return this._results.find(e)}},{key:"reduce",value:function(e,n){return this._results.reduce(e,n)}},{key:"forEach",value:function(e){this._results.forEach(e)}},{key:"some",value:function(e){return this._results.some(e)}},{key:"toArray",value:function(){return this._results.slice()}},{key:"toString",value:function(){return this._results.toString()}},{key:"reset",value:function(e){this._results=function e(n,t){void 0===t&&(t=n);for(var r=0;r0&&(i=setTimeout((function(){r._callbacks=r._callbacks.filter((function(e){return e.timeoutId!==i})),e(r._didWork,r.getPendingTasks())}),n)),this._callbacks.push({doneCb:e,timeoutId:i,updateCb:t})}},{key:"whenStable",value:function(e,n,t){if(t&&!this.taskTrackingZone)throw new Error('Task tracking zone is required when passing an update callback to whenStable(). Is "zone.js/dist/task-tracking.js" loaded?');this.addCallback(e,n,t),this._runCallbacksIfReady()}},{key:"getPendingRequestCount",value:function(){return this._pendingCount}},{key:"findProviders",value:function(e,n,t){return[]}}]),e}(),_l=function(){function e(){y(this,e),this._applications=new Map,wl.addToWindow(this)}return _(e,[{key:"registerApplication",value:function(e,n){this._applications.set(e,n)}},{key:"unregisterApplication",value:function(e){this._applications.delete(e)}},{key:"unregisterAllApplications",value:function(){this._applications.clear()}},{key:"getTestability",value:function(e){return this._applications.get(e)||null}},{key:"getAllTestabilities",value:function(){return Array.from(this._applications.values())}},{key:"getAllRootElements",value:function(){return Array.from(this._applications.keys())}},{key:"findTestabilityInTree",value:function(e){var n=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];return wl.findTestabilityInTree(this,e,n)}}]),e}(),wl=new(function(){function e(){y(this,e)}return _(e,[{key:"addToWindow",value:function(e){}},{key:"findTestabilityInTree",value:function(e,n,t){return null}}]),e}()),bl=function(e,n,t){return e.get(ol).createCompiler([n]).compileModuleAsync(t)},kl=new je("AllowMultipleToken"),Cl=function e(n,t){y(this,e),this.name=n,this.token=t};function xl(e){if(gl&&!gl.destroyed&&!gl.injector.get(kl,!1))throw new Error("There can be only one platform. Destroy the previous one to create a new one.");gl=e.get(Sl);var n=e.get(Wi,null);return n&&n.forEach((function(e){return e()})),gl}function El(e,n){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[],r="Platform: ".concat(n),i=new je(r);return function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],l=Il();if(!l||l.injector.get(kl,!1))if(e)e(t.concat(n).concat({provide:i,useValue:!0}));else{var o=t.concat(n).concat({provide:i,useValue:!0},{provide:Kn,useValue:"platform"});xl($n.create({providers:o,name:r}))}return Tl(i)}}function Tl(e){var n=Il();if(!n)throw new Error("No platform exists!");if(!n.injector.get(e,null))throw new Error("A platform with a different configuration has been created. Please destroy it first.");return n}function Il(){return gl&&!gl.destroyed?gl:null}var Sl=function(){function e(n){y(this,e),this._injector=n,this._modules=[],this._destroyListeners=[],this._destroyed=!1}return _(e,[{key:"bootstrapModuleFactory",value:function(e,n){var t,r,i=this,l=(r=n&&n.ngZoneEventCoalescing||!1,"noop"===(t=n?n.ngZone:void 0)?new yl:("zone.js"===t?void 0:t)||new sl({enableLongStackTrace:bn(),shouldCoalesceEventChangeDetection:r})),o=[{provide:sl,useValue:l}];return l.run((function(){var n=$n.create({providers:o,parent:i.injector,name:e.moduleType.name}),t=e.create(n),r=t.injector.get(sn,null);if(!r)throw new Error("No ErrorHandler. Is platform module (BrowserModule) included?");return t.onDestroy((function(){return Al(i._modules,t)})),l.runOutsideAngular((function(){return l.onError.subscribe({next:function(e){r.handleError(e)}})})),function(e,n,r){try{var l=((o=t.injector.get(Gi)).runInitializers(),o.donePromise.then((function(){return i._moduleDoBootstrap(t),t})));return vt(l)?l.catch((function(t){throw n.runOutsideAngular((function(){return e.handleError(t)})),t})):l}catch(u){throw n.runOutsideAngular((function(){return e.handleError(u)})),u}var o}(r,l)}))}},{key:"bootstrapModule",value:function(e){var n=this,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],r=Ol({},t);return bl(this.injector,r,e).then((function(e){return n.bootstrapModuleFactory(e,r)}))}},{key:"_moduleDoBootstrap",value:function(e){var n=e.injector.get(Vl);if(e._bootstrapComponents.length>0)e._bootstrapComponents.forEach((function(e){return n.bootstrap(e)}));else{if(!e.instance.ngDoBootstrap)throw new Error("The module ".concat(Oe(e.instance.constructor),' was bootstrapped, but it does not declare "@NgModule.bootstrap" components nor a "ngDoBootstrap" method. ')+"Please define one of these.");e.instance.ngDoBootstrap(n)}this._modules.push(e)}},{key:"onDestroy",value:function(e){this._destroyListeners.push(e)}},{key:"destroy",value:function(){if(this._destroyed)throw new Error("The platform has already been destroyed!");this._modules.slice().forEach((function(e){return e.destroy()})),this._destroyListeners.forEach((function(e){return e()})),this._destroyed=!0}},{key:"injector",get:function(){return this._injector}},{key:"destroyed",get:function(){return this._destroyed}}]),e}();function Ol(e,n){return Array.isArray(n)?n.reduce(Ol,e):Object.assign(Object.assign({},e),n)}var Vl=function(){function e(n,t,r,i,l,o){var u=this;y(this,e),this._zone=n,this._console=t,this._injector=r,this._exceptionHandler=i,this._componentFactoryResolver=l,this._initStatus=o,this._bootstrapListeners=[],this._views=[],this._runningTick=!1,this._enforceNoNewChanges=!1,this._stable=!0,this.componentTypes=[],this.components=[],this._enforceNoNewChanges=bn(),this._zone.onMicrotaskEmpty.subscribe({next:function(){u._zone.run((function(){u.tick()}))}});var a=new F((function(e){u._stable=u._zone.isStable&&!u._zone.hasPendingMacrotasks&&!u._zone.hasPendingMicrotasks,u._zone.runOutsideAngular((function(){e.next(u._stable),e.complete()}))})),s=new F((function(e){var n;u._zone.runOutsideAngular((function(){n=u._zone.onStable.subscribe((function(){sl.assertNotInAngularZone(),al((function(){u._stable||u._zone.hasPendingMacrotasks||u._zone.hasPendingMicrotasks||(u._stable=!0,e.next(!0))}))}))}));var t=u._zone.onUnstable.subscribe((function(){sl.assertInAngularZone(),u._stable&&(u._stable=!1,u._zone.runOutsideAngular((function(){e.next(!1)})))}));return function(){n.unsubscribe(),t.unsubscribe()}}));this.isStable=function(){for(var e=Number.POSITIVE_INFINITY,n=null,t=arguments.length,r=new Array(t),i=0;i1&&"number"==typeof r[r.length-1]&&(e=r.pop())):"number"==typeof l&&(e=r.pop()),null===n&&1===r.length&&r[0]instanceof F?r[0]:ue(e)(ae(r,n))}(a,s.pipe((function(e){return se()((n=pe,function(e){var t;t="function"==typeof n?n:function(){return n};var r=Object.create(e,fe);return r.source=e,r.subjectFactory=t,r})(e));var n})))}return _(e,[{key:"bootstrap",value:function(e,n){var t,r=this;if(!this._initStatus.done)throw new Error("Cannot bootstrap as there are still asynchronous initializers running. Bootstrap components in the `ngDoBootstrap` method of the root module.");t=e instanceof yt?e:this._componentFactoryResolver.resolveComponentFactory(e),this.componentTypes.push(t.componentType);var i=t instanceof Ct?void 0:this._injector.get($e),l=t.create($n.NULL,[],n||t.selector,i);l.onDestroy((function(){r._unloadComponent(l)}));var o=l.injector.get(ml,null);return o&&l.injector.get(_l).registerApplication(l.location.nativeElement,o),this._loadComponent(l),bn()&&this._console.log("Angular is running in development mode. Call enableProdMode() to enable production mode."),l}},{key:"tick",value:function(){var e=this;if(this._runningTick)throw new Error("ApplicationRef.tick is called recursively");try{this._runningTick=!0;var n,t=c(this._views);try{for(t.s();!(n=t.n()).done;)n.value.detectChanges()}catch(l){t.e(l)}finally{t.f()}if(this._enforceNoNewChanges){var r,i=c(this._views);try{for(i.s();!(r=i.n()).done;)r.value.checkNoChanges()}catch(l){i.e(l)}finally{i.f()}}}catch(o){this._zone.runOutsideAngular((function(){return e._exceptionHandler.handleError(o)}))}finally{this._runningTick=!1}}},{key:"attachView",value:function(e){var n=e;this._views.push(n),n.attachToAppRef(this)}},{key:"detachView",value:function(e){var n=e;Al(this._views,n),n.detachFromAppRef()}},{key:"_loadComponent",value:function(e){this.attachView(e.hostView),this.tick(),this.components.push(e),this._injector.get(Yi,[]).concat(this._bootstrapListeners).forEach((function(n){return n(e)}))}},{key:"_unloadComponent",value:function(e){this.detachView(e.hostView),Al(this.components,e)}},{key:"ngOnDestroy",value:function(){this._views.slice().forEach((function(e){return e.destroy()}))}},{key:"viewCount",get:function(){return this._views.length}}]),e}();function Al(e,n){var t=e.indexOf(n);t>-1&&e.splice(t,1)}var Dl=function e(n,t){y(this,e),this.name=n,this.callback=t},Ml=function(){function e(n,t,r){y(this,e),this.listeners=[],this.parent=null,this._debugContext=r,this.nativeNode=n,t&&t instanceof Nl&&t.addChild(this)}return _(e,[{key:"injector",get:function(){return this._debugContext.injector}},{key:"componentInstance",get:function(){return this._debugContext.component}},{key:"context",get:function(){return this._debugContext.context}},{key:"references",get:function(){return this._debugContext.references}},{key:"providerTokens",get:function(){return this._debugContext.providerTokens}}]),e}(),Nl=function(e){h(t,e);var n=g(t);function t(e,r,i){var l;return y(this,t),(l=n.call(this,e,r,i)).properties={},l.attributes={},l.classes={},l.styles={},l.childNodes=[],l.nativeElement=e,l}return _(t,[{key:"addChild",value:function(e){e&&(this.childNodes.push(e),e.parent=this)}},{key:"removeChild",value:function(e){var n=this.childNodes.indexOf(e);-1!==n&&(e.parent=null,this.childNodes.splice(n,1))}},{key:"insertChildrenAfter",value:function(e,n){var t,r=this,i=this.childNodes.indexOf(e);-1!==i&&((t=this.childNodes).splice.apply(t,[i+1,0].concat(s(n))),n.forEach((function(n){n.parent&&n.parent.removeChild(n),e.parent=r})))}},{key:"insertBefore",value:function(e,n){var t=this.childNodes.indexOf(e);-1===t?this.addChild(n):(n.parent&&n.parent.removeChild(n),n.parent=this,this.childNodes.splice(t,0,n))}},{key:"query",value:function(e){return this.queryAll(e)[0]||null}},{key:"queryAll",value:function(e){var n=[];return function e(n,t,r){n.childNodes.forEach((function(n){n instanceof Nl&&(t(n)&&r.push(n),e(n,t,r))}))}(this,e,n),n}},{key:"queryAllNodes",value:function(e){var n=[];return function e(n,t,r){n instanceof Nl&&n.childNodes.forEach((function(n){t(n)&&r.push(n),n instanceof Nl&&e(n,t,r)}))}(this,e,n),n}},{key:"triggerEventHandler",value:function(e,n){this.listeners.forEach((function(t){t.name==e&&t.callback(n)}))}},{key:"children",get:function(){return this.childNodes.filter((function(e){return e instanceof t}))}}]),t}(Ml),Pl=new Map;function Rl(e){return Pl.get(e)||null}var Fl=Rl;function jl(e){Pl.set(e.nativeNode,e)}var Hl=El(null,"core",[{provide:Ki,useValue:"unknown"},{provide:Sl,deps:[$n]},{provide:_l,deps:[]},{provide:$i,deps:[]}]);function Ll(){return qt}function Ul(){return Qt}function Bl(e){return e||"en-US"}function zl(e){var n=[];return e.onStable.subscribe((function(){for(;n.length;)n.pop()()})),function(e){n.push(e)}}var Gl=function e(n){y(this,e)};function Zl(e,n,t,r,i,l){e|=1;var o=Tr(n);return{nodeIndex:-1,parent:null,renderParent:null,bindingIndex:-1,outputIndex:-1,flags:e,checkIndex:-1,childFlags:0,directChildFlags:0,childMatchedQueries:0,matchedQueries:o.matchedQueries,matchedQueryIds:o.matchedQueryIds,references:o.references,ngContentIndex:t,childCount:r,bindings:[],bindingFlags:0,outputs:[],element:{ns:null,name:null,attrs:null,template:l?Vr(l):null,componentProvider:null,componentView:null,componentRendererType:null,publicProviders:null,allProviders:null,handleEvent:i||sr},provider:null,text:null,query:null,ngContent:null}}function ql(e,n,t,r,i,l){var o=arguments.length>6&&void 0!==arguments[6]?arguments[6]:[],u=arguments.length>7?arguments[7]:void 0,s=arguments.length>8?arguments[8]:void 0,c=arguments.length>9?arguments[9]:void 0,d=arguments.length>10?arguments[10]:void 0,h=arguments.length>11?arguments[11]:void 0;c||(c=sr);var f=Tr(t),v=f.matchedQueries,p=f.references,g=f.matchedQueryIds,y=null,m=null;if(l){var _=Fr(l),w=a(_,2);y=w[0],m=w[1]}u=u||[];for(var b=[],k=0;k0)s=p,uo(p)||(c=p);else for(;s&&v===s.nodeIndex+s.childCount;){var m=s.parent;m&&(m.childFlags|=s.childFlags,m.childMatchedQueries|=s.childMatchedQueries),c=(s=m)&&uo(s)?s.renderParent:s}}return{factory:null,nodeFlags:o,rootNodeFlags:u,nodeMatchedQueries:a,flags:e,nodes:n,updateDirectives:t||sr,updateRenderer:r||sr,handleEvent:function(e,t,r,i){return n[t].element.handleEvent(e,r,i)},bindingCount:i,outputCount:l,lastRenderRootNode:f}}function uo(e){return 0!=(1&e.flags)&&null===e.element.name}function ao(e,n,t){var r=n.element&&n.element.template;if(r){if(!r.lastRenderRootNode)throw new Error("Illegal State: Embedded templates without nodes are not allowed!");if(r.lastRenderRootNode&&16777216&r.lastRenderRootNode.flags)throw new Error("Illegal State: Last root node of a template can't have embedded views, at index ".concat(n.nodeIndex,"!"))}if(20224&n.flags&&0==(1&(e?e.flags:0)))throw new Error("Illegal State: StaticProvider/Directive nodes need to be children of elements or anchors, at index ".concat(n.nodeIndex,"!"));if(n.query){if(67108864&n.flags&&(!e||0==(16384&e.flags)))throw new Error("Illegal State: Content Query nodes need to be children of directives, at index ".concat(n.nodeIndex,"!"));if(134217728&n.flags&&e)throw new Error("Illegal State: View Query nodes have to be top level nodes, at index ".concat(n.nodeIndex,"!"))}if(n.childCount){var i=e?e.nodeIndex+e.childCount:t-1;if(n.nodeIndex<=i&&n.nodeIndex+n.childCount>i)throw new Error("Illegal State: childCount of node leads outside of parent, at index ".concat(n.nodeIndex,"!"))}}function so(e,n,t,r){var i=fo(e.root,e.renderer,e,n,t);return vo(i,e.component,r),po(i),i}function co(e,n,t){var r=fo(e,e.renderer,null,null,n);return vo(r,t,t),po(r),r}function ho(e,n,t,r){var i,l=n.element.componentRendererType;return i=l?e.root.rendererFactory.createRenderer(r,l):e.root.renderer,fo(e.root,i,e,n.element.componentProvider,t)}function fo(e,n,t,r,i){var l=new Array(i.nodes.length),o=i.outputCount?new Array(i.outputCount):null;return{def:i,parent:t,viewContainerParent:null,parentNodeDef:r,context:null,component:null,nodes:l,state:13,root:e,renderer:n,oldValues:new Array(i.bindingCount),disposables:o,initIndex:-1}}function vo(e,n,t){e.component=n,e.context=t}function po(e){var n;xr(e)&&(n=ir(e.parent,e.parentNodeDef.parent.nodeIndex).renderElement);for(var t=e.def,r=e.nodes,i=0;i0&&Yl(e,n,0,t)&&(f=!0),h>1&&Yl(e,n,1,r)&&(f=!0),h>2&&Yl(e,n,2,i)&&(f=!0),h>3&&Yl(e,n,3,l)&&(f=!0),h>4&&Yl(e,n,4,o)&&(f=!0),h>5&&Yl(e,n,5,u)&&(f=!0),h>6&&Yl(e,n,6,a)&&(f=!0),h>7&&Yl(e,n,7,s)&&(f=!0),h>8&&Yl(e,n,8,c)&&(f=!0),h>9&&Yl(e,n,9,d)&&(f=!0),f}(e,n,t,r,i,l,o,u,a,s,c,d);case 2:return function(e,n,t,r,i,l,o,u,a,s,c,d){var h=!1,f=n.bindings,v=f.length;if(v>0&&gr(e,n,0,t)&&(h=!0),v>1&&gr(e,n,1,r)&&(h=!0),v>2&&gr(e,n,2,i)&&(h=!0),v>3&&gr(e,n,3,l)&&(h=!0),v>4&&gr(e,n,4,o)&&(h=!0),v>5&&gr(e,n,5,u)&&(h=!0),v>6&&gr(e,n,6,a)&&(h=!0),v>7&&gr(e,n,7,s)&&(h=!0),v>8&&gr(e,n,8,c)&&(h=!0),v>9&&gr(e,n,9,d)&&(h=!0),h){var p=n.text.prefix;v>0&&(p+=lo(t,f[0])),v>1&&(p+=lo(r,f[1])),v>2&&(p+=lo(i,f[2])),v>3&&(p+=lo(l,f[3])),v>4&&(p+=lo(o,f[4])),v>5&&(p+=lo(u,f[5])),v>6&&(p+=lo(a,f[6])),v>7&&(p+=lo(s,f[7])),v>8&&(p+=lo(c,f[8])),v>9&&(p+=lo(d,f[9]));var g=rr(e,n.nodeIndex).renderText;e.renderer.setValue(g,p)}return h}(e,n,t,r,i,l,o,u,a,s,c,d);case 16384:return function(e,n,t,r,i,l,o,u,a,s,c,d){var h=lr(e,n.nodeIndex),f=h.instance,v=!1,p=void 0,g=n.bindings.length;return g>0&&pr(e,n,0,t)&&(v=!0,p=Vi(e,h,n,0,t,p)),g>1&&pr(e,n,1,r)&&(v=!0,p=Vi(e,h,n,1,r,p)),g>2&&pr(e,n,2,i)&&(v=!0,p=Vi(e,h,n,2,i,p)),g>3&&pr(e,n,3,l)&&(v=!0,p=Vi(e,h,n,3,l,p)),g>4&&pr(e,n,4,o)&&(v=!0,p=Vi(e,h,n,4,o,p)),g>5&&pr(e,n,5,u)&&(v=!0,p=Vi(e,h,n,5,u,p)),g>6&&pr(e,n,6,a)&&(v=!0,p=Vi(e,h,n,6,a,p)),g>7&&pr(e,n,7,s)&&(v=!0,p=Vi(e,h,n,7,s,p)),g>8&&pr(e,n,8,c)&&(v=!0,p=Vi(e,h,n,8,c,p)),g>9&&pr(e,n,9,d)&&(v=!0,p=Vi(e,h,n,9,d,p)),p&&f.ngOnChanges(p),65536&n.flags&&tr(e,256,n.nodeIndex)&&f.ngOnInit(),262144&n.flags&&f.ngDoCheck(),v}(e,n,t,r,i,l,o,u,a,s,c,d);case 32:case 64:case 128:return function(e,n,t,r,i,l,o,u,a,s,c,d){var h=n.bindings,f=!1,v=h.length;if(v>0&&gr(e,n,0,t)&&(f=!0),v>1&&gr(e,n,1,r)&&(f=!0),v>2&&gr(e,n,2,i)&&(f=!0),v>3&&gr(e,n,3,l)&&(f=!0),v>4&&gr(e,n,4,o)&&(f=!0),v>5&&gr(e,n,5,u)&&(f=!0),v>6&&gr(e,n,6,a)&&(f=!0),v>7&&gr(e,n,7,s)&&(f=!0),v>8&&gr(e,n,8,c)&&(f=!0),v>9&&gr(e,n,9,d)&&(f=!0),f){var p,g=or(e,n.nodeIndex);switch(201347067&n.flags){case 32:p=[],v>0&&p.push(t),v>1&&p.push(r),v>2&&p.push(i),v>3&&p.push(l),v>4&&p.push(o),v>5&&p.push(u),v>6&&p.push(a),v>7&&p.push(s),v>8&&p.push(c),v>9&&p.push(d);break;case 64:p={},v>0&&(p[h[0].name]=t),v>1&&(p[h[1].name]=r),v>2&&(p[h[2].name]=i),v>3&&(p[h[3].name]=l),v>4&&(p[h[4].name]=o),v>5&&(p[h[5].name]=u),v>6&&(p[h[6].name]=a),v>7&&(p[h[7].name]=s),v>8&&(p[h[8].name]=c),v>9&&(p[h[9].name]=d);break;case 128:var y=t;switch(v){case 1:p=y.transform(t);break;case 2:p=y.transform(r);break;case 3:p=y.transform(r,i);break;case 4:p=y.transform(r,i,l);break;case 5:p=y.transform(r,i,l,o);break;case 6:p=y.transform(r,i,l,o,u);break;case 7:p=y.transform(r,i,l,o,u,a);break;case 8:p=y.transform(r,i,l,o,u,a,s);break;case 9:p=y.transform(r,i,l,o,u,a,s,c);break;case 10:p=y.transform(r,i,l,o,u,a,s,c,d)}}g.value=p}return f}(e,n,t,r,i,l,o,u,a,s,c,d);default:throw"unreachable"}}(e,n,r,i,l,o,u,a,c,d,h,f):function(e,n,t){switch(201347067&n.flags){case 1:return function(e,n,t){for(var r=!1,i=0;i0&&yr(e,n,0,t),h>1&&yr(e,n,1,r),h>2&&yr(e,n,2,i),h>3&&yr(e,n,3,l),h>4&&yr(e,n,4,o),h>5&&yr(e,n,5,u),h>6&&yr(e,n,6,a),h>7&&yr(e,n,7,s),h>8&&yr(e,n,8,c),h>9&&yr(e,n,9,d)}(e,n,r,i,l,o,u,a,s,c,d,h):function(e,n,t){for(var r=0;r0){var l=new Set(e.modules);Fo.forEach((function(n,r){if(l.has(Ee(r).providedIn)){var i={token:r,flags:n.flags|(t?4096:0),deps:Ir(n.deps),value:n.value,index:e.providers.length};e.providers.push(i),e.providersByKey[dr(r)]=i}}))}}(e=e.factory((function(){return sr}))),e):e}(r))}var Ro=new Map,Fo=new Map,jo=new Map;function Ho(e){var n;Ro.set(e.token,e),"function"==typeof e.token&&(n=Ee(e.token))&&"function"==typeof n.providedIn&&Fo.set(e.token,e)}function Lo(e,n){var t=Vr(n.viewDefFactory),r=Vr(t.nodes[0].element.componentView);jo.set(e,r)}function Uo(){Ro.clear(),Fo.clear(),jo.clear()}function Bo(e){if(0===Ro.size)return e;var n=function(e){for(var n=[],t=null,r=0;r3?l-3:0),u=3;u3?l-3:0),u=3;u1?n-1:0),r=1;r0&&void 0!==arguments[0]?arguments[0]:void 0;this.control&&this.control.reset(e)}},{key:"hasError",value:function(e,n){return!!this.control&&this.control.hasError(e,n)}},{key:"getError",value:function(e,n){return this.control?this.control.getError(e,n):null}},{key:"value",get:function(){return this.control?this.control.value:null}},{key:"valid",get:function(){return this.control?this.control.valid:null}},{key:"invalid",get:function(){return this.control?this.control.invalid:null}},{key:"pending",get:function(){return this.control?this.control.pending:null}},{key:"disabled",get:function(){return this.control?this.control.disabled:null}},{key:"enabled",get:function(){return this.control?this.control.enabled:null}},{key:"errors",get:function(){return this.control?this.control.errors:null}},{key:"pristine",get:function(){return this.control?this.control.pristine:null}},{key:"dirty",get:function(){return this.control?this.control.dirty:null}},{key:"touched",get:function(){return this.control?this.control.touched:null}},{key:"status",get:function(){return this.control?this.control.status:null}},{key:"untouched",get:function(){return this.control?this.control.untouched:null}},{key:"statusChanges",get:function(){return this.control?this.control.statusChanges:null}},{key:"valueChanges",get:function(){return this.control?this.control.valueChanges:null}},{key:"path",get:function(){return null}}]),e}(),Fu=function(e){h(t,e);var n=g(t);function t(){return y(this,t),n.apply(this,arguments)}return _(t,[{key:"formDirective",get:function(){return null}},{key:"path",get:function(){return null}}]),t}(Ru);function ju(){throw new Error("unimplemented")}var Hu=function(e){h(t,e);var n=g(t);function t(){var e;return y(this,t),(e=n.apply(this,arguments))._parent=null,e.name=null,e.valueAccessor=null,e._rawValidators=[],e._rawAsyncValidators=[],e}return _(t,[{key:"validator",get:function(){return ju()}},{key:"asyncValidator",get:function(){return ju()}}]),t}(Ru),Lu=function(e){h(t,e);var n=g(t);function t(e){return y(this,t),n.call(this,e)}return t}(function(){function e(n){y(this,e),this._cd=n}return _(e,[{key:"ngClassUntouched",get:function(){return!!this._cd.control&&this._cd.control.untouched}},{key:"ngClassTouched",get:function(){return!!this._cd.control&&this._cd.control.touched}},{key:"ngClassPristine",get:function(){return!!this._cd.control&&this._cd.control.pristine}},{key:"ngClassDirty",get:function(){return!!this._cd.control&&this._cd.control.dirty}},{key:"ngClassValid",get:function(){return!!this._cd.control&&this._cd.control.valid}},{key:"ngClassInvalid",get:function(){return!!this._cd.control&&this._cd.control.invalid}},{key:"ngClassPending",get:function(){return!!this._cd.control&&this._cd.control.pending}}]),e}());function Uu(e){return null==e||0===e.length}function Bu(e){return null!=e&&"number"==typeof e.length}var zu=new je("NgValidators"),Gu=/^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,Zu=function(){function e(){y(this,e)}return _(e,null,[{key:"min",value:function(e){return function(n){if(Uu(n.value)||Uu(e))return null;var t=parseFloat(n.value);return!isNaN(t)&&te?{max:{max:e,actual:n.value}}:null}}},{key:"required",value:function(e){return Uu(e.value)?{required:!0}:null}},{key:"requiredTrue",value:function(e){return!0===e.value?null:{required:!0}}},{key:"email",value:function(e){return Uu(e.value)||Gu.test(e.value)?null:{email:!0}}},{key:"minLength",value:function(e){return function(n){return Uu(n.value)||!Bu(n.value)?null:n.value.lengthe?{maxlength:{requiredLength:e,actualLength:n.value.length}}:null}}},{key:"pattern",value:function(n){return n?("string"==typeof n?(r="","^"!==n.charAt(0)&&(r+="^"),r+=n,"$"!==n.charAt(n.length-1)&&(r+="$"),t=new RegExp(r)):(r=n.toString(),t=n),function(e){if(Uu(e.value))return null;var n=e.value;return t.test(n)?null:{pattern:{requiredPattern:r,actualValue:n}}}):e.nullValidator;var t,r}},{key:"nullValidator",value:function(e){return null}},{key:"compose",value:function(e){if(!e)return null;var n=e.filter(qu);return 0==n.length?null:function(e){return Wu(Ku(e,n))}}},{key:"composeAsync",value:function(e){if(!e)return null;var n=e.filter(qu);return 0==n.length?null:function(e){return function(){for(var e=arguments.length,n=new Array(e),t=0;t=0;--n)if(this._accessors[n][1]===e)return void this._accessors.splice(n,1)}},{key:"select",value:function(e){var n=this;this._accessors.forEach((function(t){n._isSameGroup(t,e)&&t[1]!==e&&t[1].fireUncheck(e.value)}))}},{key:"_isSameGroup",value:function(e,n){return!!e[0].control&&e[0]._parent===n._control._parent&&e[1].name===n.name}}]),e}(),Xu=function(){function e(n,t,r,i){y(this,e),this._renderer=n,this._elementRef=t,this._registry=r,this._injector=i,this.onChange=function(){},this.onTouched=function(){}}return _(e,[{key:"ngOnInit",value:function(){this._control=this._injector.get(Hu),this._checkName(),this._registry.add(this._control,this)}},{key:"ngOnDestroy",value:function(){this._registry.remove(this)}},{key:"writeValue",value:function(e){this._state=e===this.value,this._renderer.setProperty(this._elementRef.nativeElement,"checked",this._state)}},{key:"registerOnChange",value:function(e){var n=this;this._fn=e,this.onChange=function(){e(n.value),n._registry.select(n)}}},{key:"fireUncheck",value:function(e){this.writeValue(e)}},{key:"registerOnTouched",value:function(e){this.onTouched=e}},{key:"setDisabledState",value:function(e){this._renderer.setProperty(this._elementRef.nativeElement,"disabled",e)}},{key:"_checkName",value:function(){this.name&&this.formControlName&&this.name!==this.formControlName&&this._throwNameError(),!this.name&&this.formControlName&&(this.name=this.formControlName)}},{key:"_throwNameError",value:function(){throw new Error('\n If you define both a name and a formControlName attribute on your radio button, their values\n must match. Ex: \n ')}}]),e}(),ea=function(){function e(n,t){y(this,e),this._renderer=n,this._elementRef=t,this.onChange=function(e){},this.onTouched=function(){}}return _(e,[{key:"writeValue",value:function(e){this._renderer.setProperty(this._elementRef.nativeElement,"value",parseFloat(e))}},{key:"registerOnChange",value:function(e){this.onChange=function(n){e(""==n?null:parseFloat(n))}}},{key:"registerOnTouched",value:function(e){this.onTouched=e}},{key:"setDisabledState",value:function(e){this._renderer.setProperty(this._elementRef.nativeElement,"disabled",e)}}]),e}(),na='\n
\n
\n \n
\n
\n\n In your class:\n\n this.myGroup = new FormGroup({\n person: new FormGroup({ firstName: new FormControl() })\n });',ta='\n
\n
\n \n
\n
';function ra(e,n){return null==e?"".concat(n):(n&&"object"==typeof n&&(n="Object"),"".concat(e,": ").concat(n).slice(0,50))}var ia=function(){function e(n,t){y(this,e),this._renderer=n,this._elementRef=t,this._optionMap=new Map,this._idCounter=0,this.onChange=function(e){},this.onTouched=function(){},this._compareWith=Object.is}return _(e,[{key:"writeValue",value:function(e){this.value=e;var n=this._getOptionId(e);null==n&&this._renderer.setProperty(this._elementRef.nativeElement,"selectedIndex",-1);var t=ra(n,e);this._renderer.setProperty(this._elementRef.nativeElement,"value",t)}},{key:"registerOnChange",value:function(e){var n=this;this.onChange=function(t){n.value=n._getOptionValue(t),e(n.value)}}},{key:"registerOnTouched",value:function(e){this.onTouched=e}},{key:"setDisabledState",value:function(e){this._renderer.setProperty(this._elementRef.nativeElement,"disabled",e)}},{key:"_registerOption",value:function(){return(this._idCounter++).toString()}},{key:"_getOptionId",value:function(e){for(var n=0,t=Array.from(this._optionMap.keys());n-1)}}else n=function(e,n){e._setSelected(!1)};this._optionMap.forEach(n)}},{key:"registerOnChange",value:function(e){var n=this;this.onChange=function(t){var r=[];if(void 0!==t.selectedOptions)for(var i=t.selectedOptions,l=0;l1?"path: '".concat(e.path.join(" -> "),"'"):e.path[0]?"name: '".concat(e.path,"'"):"unspecified name attribute",new Error("".concat(n," ").concat(t))}function fa(e){return null!=e?Zu.compose(Yu(e)):null}function va(e){return null!=e?Zu.composeAsync(Yu(e)):null}var pa=[Mu,ea,$u,ia,ua,Xu];function ga(e){var n=ma(e)?e.validators:e;return Array.isArray(n)?fa(n):n||null}function ya(e,n){var t=ma(n)?n.asyncValidators:e;return Array.isArray(t)?va(t):t||null}function ma(e){return null!=e&&!Array.isArray(e)&&"object"==typeof e}var _a=function(){function e(n,t){y(this,e),this.validator=n,this.asyncValidator=t,this._onCollectionChange=function(){},this.pristine=!0,this.touched=!1,this._onDisabledChange=[]}return _(e,[{key:"setValidators",value:function(e){this.validator=ga(e)}},{key:"setAsyncValidators",value:function(e){this.asyncValidator=ya(e)}},{key:"clearValidators",value:function(){this.validator=null}},{key:"clearAsyncValidators",value:function(){this.asyncValidator=null}},{key:"markAsTouched",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.touched=!0,this._parent&&!e.onlySelf&&this._parent.markAsTouched(e)}},{key:"markAllAsTouched",value:function(){this.markAsTouched({onlySelf:!0}),this._forEachChild((function(e){return e.markAllAsTouched()}))}},{key:"markAsUntouched",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.touched=!1,this._pendingTouched=!1,this._forEachChild((function(e){e.markAsUntouched({onlySelf:!0})})),this._parent&&!e.onlySelf&&this._parent._updateTouched(e)}},{key:"markAsDirty",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.pristine=!1,this._parent&&!e.onlySelf&&this._parent.markAsDirty(e)}},{key:"markAsPristine",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.pristine=!0,this._pendingDirty=!1,this._forEachChild((function(e){e.markAsPristine({onlySelf:!0})})),this._parent&&!e.onlySelf&&this._parent._updatePristine(e)}},{key:"markAsPending",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.status="PENDING",!1!==e.emitEvent&&this.statusChanges.emit(this.status),this._parent&&!e.onlySelf&&this._parent.markAsPending(e)}},{key:"disable",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=this._parentMarkedDirty(e.onlySelf);this.status="DISABLED",this.errors=null,this._forEachChild((function(n){n.disable(Object.assign(Object.assign({},e),{onlySelf:!0}))})),this._updateValue(),!1!==e.emitEvent&&(this.valueChanges.emit(this.value),this.statusChanges.emit(this.status)),this._updateAncestors(Object.assign(Object.assign({},e),{skipPristineCheck:n})),this._onDisabledChange.forEach((function(e){return e(!0)}))}},{key:"enable",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=this._parentMarkedDirty(e.onlySelf);this.status="VALID",this._forEachChild((function(n){n.enable(Object.assign(Object.assign({},e),{onlySelf:!0}))})),this.updateValueAndValidity({onlySelf:!0,emitEvent:e.emitEvent}),this._updateAncestors(Object.assign(Object.assign({},e),{skipPristineCheck:n})),this._onDisabledChange.forEach((function(e){return e(!1)}))}},{key:"_updateAncestors",value:function(e){this._parent&&!e.onlySelf&&(this._parent.updateValueAndValidity(e),e.skipPristineCheck||this._parent._updatePristine(),this._parent._updateTouched())}},{key:"setParent",value:function(e){this._parent=e}},{key:"updateValueAndValidity",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this._setInitialStatus(),this._updateValue(),this.enabled&&(this._cancelExistingSubscription(),this.errors=this._runValidator(),this.status=this._calculateStatus(),"VALID"!==this.status&&"PENDING"!==this.status||this._runAsyncValidator(e.emitEvent)),!1!==e.emitEvent&&(this.valueChanges.emit(this.value),this.statusChanges.emit(this.status)),this._parent&&!e.onlySelf&&this._parent.updateValueAndValidity(e)}},{key:"_updateTreeValidity",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{emitEvent:!0};this._forEachChild((function(n){return n._updateTreeValidity(e)})),this.updateValueAndValidity({onlySelf:!0,emitEvent:e.emitEvent})}},{key:"_setInitialStatus",value:function(){this.status=this._allControlsDisabled()?"DISABLED":"VALID"}},{key:"_runValidator",value:function(){return this.validator?this.validator(this):null}},{key:"_runAsyncValidator",value:function(e){var n=this;if(this.asyncValidator){this.status="PENDING";var t=Qu(this.asyncValidator(this));this._asyncValidationSubscription=t.subscribe((function(t){return n.setErrors(t,{emitEvent:e})}))}}},{key:"_cancelExistingSubscription",value:function(){this._asyncValidationSubscription&&this._asyncValidationSubscription.unsubscribe()}},{key:"setErrors",value:function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this.errors=e,this._updateControlsErrors(!1!==n.emitEvent)}},{key:"get",value:function(e){return function(e,n,t){if(null==n)return null;if(Array.isArray(n)||(n=n.split(".")),Array.isArray(n)&&0===n.length)return null;var r=e;return n.forEach((function(e){r=r instanceof ba?r.controls.hasOwnProperty(e)?r.controls[e]:null:r instanceof ka&&r.at(e)||null})),r}(this,e)}},{key:"getError",value:function(e,n){var t=n?this.get(n):this;return t&&t.errors?t.errors[e]:null}},{key:"hasError",value:function(e,n){return!!this.getError(e,n)}},{key:"_updateControlsErrors",value:function(e){this.status=this._calculateStatus(),e&&this.statusChanges.emit(this.status),this._parent&&this._parent._updateControlsErrors(e)}},{key:"_initObservables",value:function(){this.valueChanges=new Li,this.statusChanges=new Li}},{key:"_calculateStatus",value:function(){return this._allControlsDisabled()?"DISABLED":this.errors?"INVALID":this._anyControlsHaveStatus("PENDING")?"PENDING":this._anyControlsHaveStatus("INVALID")?"INVALID":"VALID"}},{key:"_anyControlsHaveStatus",value:function(e){return this._anyControls((function(n){return n.status===e}))}},{key:"_anyControlsDirty",value:function(){return this._anyControls((function(e){return e.dirty}))}},{key:"_anyControlsTouched",value:function(){return this._anyControls((function(e){return e.touched}))}},{key:"_updatePristine",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.pristine=!this._anyControlsDirty(),this._parent&&!e.onlySelf&&this._parent._updatePristine(e)}},{key:"_updateTouched",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.touched=this._anyControlsTouched(),this._parent&&!e.onlySelf&&this._parent._updateTouched(e)}},{key:"_isBoxedValue",value:function(e){return"object"==typeof e&&null!==e&&2===Object.keys(e).length&&"value"in e&&"disabled"in e}},{key:"_registerOnCollectionChange",value:function(e){this._onCollectionChange=e}},{key:"_setUpdateStrategy",value:function(e){ma(e)&&null!=e.updateOn&&(this._updateOn=e.updateOn)}},{key:"_parentMarkedDirty",value:function(e){return!e&&this._parent&&this._parent.dirty&&!this._parent._anyControlsDirty()}},{key:"parent",get:function(){return this._parent}},{key:"valid",get:function(){return"VALID"===this.status}},{key:"invalid",get:function(){return"INVALID"===this.status}},{key:"pending",get:function(){return"PENDING"==this.status}},{key:"disabled",get:function(){return"DISABLED"===this.status}},{key:"enabled",get:function(){return"DISABLED"!==this.status}},{key:"dirty",get:function(){return!this.pristine}},{key:"untouched",get:function(){return!this.touched}},{key:"updateOn",get:function(){return this._updateOn?this._updateOn:this.parent?this.parent.updateOn:"change"}},{key:"root",get:function(){for(var e=this;e._parent;)e=e._parent;return e}}]),e}(),wa=function(e){h(t,e);var n=g(t);function t(){var e,r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,i=arguments.length>1?arguments[1]:void 0,l=arguments.length>2?arguments[2]:void 0;return y(this,t),(e=n.call(this,ga(i),ya(l,i)))._onChange=[],e._applyFormState(r),e._setUpdateStrategy(i),e.updateValueAndValidity({onlySelf:!0,emitEvent:!1}),e._initObservables(),e}return _(t,[{key:"setValue",value:function(e){var n=this,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this.value=this._pendingValue=e,this._onChange.length&&!1!==t.emitModelToViewChange&&this._onChange.forEach((function(e){return e(n.value,!1!==t.emitViewToModelChange)})),this.updateValueAndValidity(t)}},{key:"patchValue",value:function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this.setValue(e,n)}},{key:"reset",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this._applyFormState(e),this.markAsPristine(n),this.markAsUntouched(n),this.setValue(this.value,n),this._pendingChange=!1}},{key:"_updateValue",value:function(){}},{key:"_anyControls",value:function(e){return!1}},{key:"_allControlsDisabled",value:function(){return this.disabled}},{key:"registerOnChange",value:function(e){this._onChange.push(e)}},{key:"_clearChangeFns",value:function(){this._onChange=[],this._onDisabledChange=[],this._onCollectionChange=function(){}}},{key:"registerOnDisabledChange",value:function(e){this._onDisabledChange.push(e)}},{key:"_forEachChild",value:function(e){}},{key:"_syncPendingControls",value:function(){return!("submit"!==this.updateOn||(this._pendingDirty&&this.markAsDirty(),this._pendingTouched&&this.markAsTouched(),!this._pendingChange)||(this.setValue(this._pendingValue,{onlySelf:!0,emitModelToViewChange:!1}),0))}},{key:"_applyFormState",value:function(e){this._isBoxedValue(e)?(this.value=this._pendingValue=e.value,e.disabled?this.disable({onlySelf:!0,emitEvent:!1}):this.enable({onlySelf:!0,emitEvent:!1})):this.value=this._pendingValue=e}}]),t}(_a),ba=function(e){h(t,e);var n=g(t);function t(e,r,i){var l;return y(this,t),(l=n.call(this,ga(r),ya(i,r))).controls=e,l._initObservables(),l._setUpdateStrategy(r),l._setUpControls(),l.updateValueAndValidity({onlySelf:!0,emitEvent:!1}),l}return _(t,[{key:"registerControl",value:function(e,n){return this.controls[e]?this.controls[e]:(this.controls[e]=n,n.setParent(this),n._registerOnCollectionChange(this._onCollectionChange),n)}},{key:"addControl",value:function(e,n){this.registerControl(e,n),this.updateValueAndValidity(),this._onCollectionChange()}},{key:"removeControl",value:function(e){this.controls[e]&&this.controls[e]._registerOnCollectionChange((function(){})),delete this.controls[e],this.updateValueAndValidity(),this._onCollectionChange()}},{key:"setControl",value:function(e,n){this.controls[e]&&this.controls[e]._registerOnCollectionChange((function(){})),delete this.controls[e],n&&this.registerControl(e,n),this.updateValueAndValidity(),this._onCollectionChange()}},{key:"contains",value:function(e){return this.controls.hasOwnProperty(e)&&this.controls[e].enabled}},{key:"setValue",value:function(e){var n=this,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this._checkAllValuesPresent(e),Object.keys(e).forEach((function(r){n._throwIfControlMissing(r),n.controls[r].setValue(e[r],{onlySelf:!0,emitEvent:t.emitEvent})})),this.updateValueAndValidity(t)}},{key:"patchValue",value:function(e){var n=this,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};Object.keys(e).forEach((function(r){n.controls[r]&&n.controls[r].patchValue(e[r],{onlySelf:!0,emitEvent:t.emitEvent})})),this.updateValueAndValidity(t)}},{key:"reset",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this._forEachChild((function(t,r){t.reset(e[r],{onlySelf:!0,emitEvent:n.emitEvent})})),this._updatePristine(n),this._updateTouched(n),this.updateValueAndValidity(n)}},{key:"getRawValue",value:function(){return this._reduceChildren({},(function(e,n,t){return e[t]=n instanceof wa?n.value:n.getRawValue(),e}))}},{key:"_syncPendingControls",value:function(){var e=this._reduceChildren(!1,(function(e,n){return!!n._syncPendingControls()||e}));return e&&this.updateValueAndValidity({onlySelf:!0}),e}},{key:"_throwIfControlMissing",value:function(e){if(!Object.keys(this.controls).length)throw new Error("\n There are no form controls registered with this group yet. If you're using ngModel,\n you may want to check next tick (e.g. use setTimeout).\n ");if(!this.controls[e])throw new Error("Cannot find form control with name: ".concat(e,"."))}},{key:"_forEachChild",value:function(e){var n=this;Object.keys(this.controls).forEach((function(t){return e(n.controls[t],t)}))}},{key:"_setUpControls",value:function(){var e=this;this._forEachChild((function(n){n.setParent(e),n._registerOnCollectionChange(e._onCollectionChange)}))}},{key:"_updateValue",value:function(){this.value=this._reduceValue()}},{key:"_anyControls",value:function(e){for(var n=0,t=Object.keys(this.controls);n0||this.disabled}},{key:"_checkAllValuesPresent",value:function(e){this._forEachChild((function(n,t){if(void 0===e[t])throw new Error("Must supply a value for form control with name: '".concat(t,"'."))}))}}]),t}(_a),ka=function(e){h(t,e);var n=g(t);function t(e,r,i){var l;return y(this,t),(l=n.call(this,ga(r),ya(i,r))).controls=e,l._initObservables(),l._setUpdateStrategy(r),l._setUpControls(),l.updateValueAndValidity({onlySelf:!0,emitEvent:!1}),l}return _(t,[{key:"at",value:function(e){return this.controls[e]}},{key:"push",value:function(e){this.controls.push(e),this._registerControl(e),this.updateValueAndValidity(),this._onCollectionChange()}},{key:"insert",value:function(e,n){this.controls.splice(e,0,n),this._registerControl(n),this.updateValueAndValidity()}},{key:"removeAt",value:function(e){this.controls[e]&&this.controls[e]._registerOnCollectionChange((function(){})),this.controls.splice(e,1),this.updateValueAndValidity()}},{key:"setControl",value:function(e,n){this.controls[e]&&this.controls[e]._registerOnCollectionChange((function(){})),this.controls.splice(e,1),n&&(this.controls.splice(e,0,n),this._registerControl(n)),this.updateValueAndValidity(),this._onCollectionChange()}},{key:"setValue",value:function(e){var n=this,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this._checkAllValuesPresent(e),e.forEach((function(e,r){n._throwIfControlMissing(r),n.at(r).setValue(e,{onlySelf:!0,emitEvent:t.emitEvent})})),this.updateValueAndValidity(t)}},{key:"patchValue",value:function(e){var n=this,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};e.forEach((function(e,r){n.at(r)&&n.at(r).patchValue(e,{onlySelf:!0,emitEvent:t.emitEvent})})),this.updateValueAndValidity(t)}},{key:"reset",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this._forEachChild((function(t,r){t.reset(e[r],{onlySelf:!0,emitEvent:n.emitEvent})})),this._updatePristine(n),this._updateTouched(n),this.updateValueAndValidity(n)}},{key:"getRawValue",value:function(){return this.controls.map((function(e){return e instanceof wa?e.value:e.getRawValue()}))}},{key:"clear",value:function(){this.controls.length<1||(this._forEachChild((function(e){return e._registerOnCollectionChange((function(){}))})),this.controls.splice(0),this.updateValueAndValidity())}},{key:"_syncPendingControls",value:function(){var e=this.controls.reduce((function(e,n){return!!n._syncPendingControls()||e}),!1);return e&&this.updateValueAndValidity({onlySelf:!0}),e}},{key:"_throwIfControlMissing",value:function(e){if(!this.controls.length)throw new Error("\n There are no form controls registered with this array yet. If you're using ngModel,\n you may want to check next tick (e.g. use setTimeout).\n ");if(!this.at(e))throw new Error("Cannot find form control at index ".concat(e))}},{key:"_forEachChild",value:function(e){this.controls.forEach((function(n,t){e(n,t)}))}},{key:"_updateValue",value:function(){var e=this;this.value=this.controls.filter((function(n){return n.enabled||e.disabled})).map((function(e){return e.value}))}},{key:"_anyControls",value:function(e){return this.controls.some((function(n){return n.enabled&&e(n)}))}},{key:"_setUpControls",value:function(){var e=this;this._forEachChild((function(n){return e._registerControl(n)}))}},{key:"_checkAllValuesPresent",value:function(e){this._forEachChild((function(n,t){if(void 0===e[t])throw new Error("Must supply a value for form control at index: ".concat(t,"."))}))}},{key:"_allControlsDisabled",value:function(){var e,n=c(this.controls);try{for(n.s();!(e=n.n()).done;)if(e.value.enabled)return!1}catch(t){n.e(t)}finally{n.f()}return this.controls.length>0||this.disabled}},{key:"_registerControl",value:function(e){e.setParent(this),e._registerOnCollectionChange(this._onCollectionChange)}},{key:"length",get:function(){return this.controls.length}}]),t}(_a),Ca=function(){return Promise.resolve(null)}(),xa=function(e){h(t,e);var n=g(t);function t(e,r){var i;return y(this,t),(i=n.call(this)).submitted=!1,i._directives=[],i.ngSubmit=new Li,i.form=new ba({},fa(e),va(r)),i}return _(t,[{key:"ngAfterViewInit",value:function(){this._setUpdateStrategy()}},{key:"addControl",value:function(e){var n=this;Ca.then((function(){var t=n._findContainer(e.path);e.control=t.registerControl(e.name,e.control),ca(e.control,e),e.control.updateValueAndValidity({emitEvent:!1}),n._directives.push(e)}))}},{key:"getControl",value:function(e){return this.form.get(e.path)}},{key:"removeControl",value:function(e){var n=this;Ca.then((function(){var t,r,i=n._findContainer(e.path);i&&i.removeControl(e.name),(r=(t=n._directives).indexOf(e))>-1&&t.splice(r,1)}))}},{key:"addFormGroup",value:function(e){var n=this;Ca.then((function(){var t=n._findContainer(e.path),r=new ba({});(function(e,n){null==e&&ha(n,"Cannot find control with"),e.validator=Zu.compose([e.validator,n.validator]),e.asyncValidator=Zu.composeAsync([e.asyncValidator,n.asyncValidator])})(r,e),t.registerControl(e.name,r),r.updateValueAndValidity({emitEvent:!1})}))}},{key:"removeFormGroup",value:function(e){var n=this;Ca.then((function(){var t=n._findContainer(e.path);t&&t.removeControl(e.name)}))}},{key:"getFormGroup",value:function(e){return this.form.get(e.path)}},{key:"updateModel",value:function(e,n){var t=this;Ca.then((function(){t.form.get(e.path).setValue(n)}))}},{key:"setValue",value:function(e){this.control.setValue(e)}},{key:"onSubmit",value:function(e){return this.submitted=!0,n=this._directives,this.form._syncPendingControls(),n.forEach((function(e){var n=e.control;"submit"===n.updateOn&&n._pendingChange&&(e.viewToModelUpdate(n._pendingValue),n._pendingChange=!1)})),this.ngSubmit.emit(e),!1;var n}},{key:"onReset",value:function(){this.resetForm()}},{key:"resetForm",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:void 0;this.form.reset(e),this.submitted=!1}},{key:"_setUpdateStrategy",value:function(){this.options&&null!=this.options.updateOn&&(this.form._updateOn=this.options.updateOn)}},{key:"_findContainer",value:function(e){return e.pop(),e.length?this.form.get(e):this.form}},{key:"formDirective",get:function(){return this}},{key:"control",get:function(){return this.form}},{key:"path",get:function(){return[]}},{key:"controls",get:function(){return this.form.controls}}]),t}(Fu),Ea=function(e){h(t,e);var n=g(t);function t(){return y(this,t),n.apply(this,arguments)}return _(t,[{key:"ngOnInit",value:function(){this._checkParentType(),this.formDirective.addFormGroup(this)}},{key:"ngOnDestroy",value:function(){this.formDirective&&this.formDirective.removeFormGroup(this)}},{key:"_checkParentType",value:function(){}},{key:"control",get:function(){return this.formDirective.getFormGroup(this)}},{key:"path",get:function(){return sa(null==this.name?this.name:this.name.toString(),this._parent)}},{key:"formDirective",get:function(){return this._parent?this._parent.formDirective:null}},{key:"validator",get:function(){return fa(this._validators)}},{key:"asyncValidator",get:function(){return va(this._asyncValidators)}}]),t}(Fu),Ta=function(){function e(){y(this,e)}return _(e,null,[{key:"modelParentException",value:function(){throw new Error('\n ngModel cannot be used to register form controls with a parent formGroup directive. Try using\n formGroup\'s partner directive "formControlName" instead. Example:\n\n '.concat('\n
\n \n
\n\n In your class:\n\n this.myGroup = new FormGroup({\n firstName: new FormControl()\n });',"\n\n Or, if you'd like to avoid registering this form control, indicate that it's standalone in ngModelOptions:\n\n Example:\n\n ").concat('\n
\n \n \n
\n '))}},{key:"formGroupNameException",value:function(){throw new Error("\n ngModel cannot be used to register form controls with a parent formGroupName or formArrayName directive.\n\n Option 1: Use formControlName instead of ngModel (reactive strategy):\n\n ".concat(na,"\n\n Option 2: Update ngModel's parent be ngModelGroup (template-driven strategy):\n\n ").concat(ta))}},{key:"missingNameException",value:function(){throw new Error('If ngModel is used within a form tag, either the name attribute must be set or the form\n control must be defined as \'standalone\' in ngModelOptions.\n\n Example 1: \n Example 2: ')}},{key:"modelGroupParentException",value:function(){throw new Error("\n ngModelGroup cannot be used with a parent formGroup directive.\n\n Option 1: Use formGroupName instead of ngModelGroup (reactive strategy):\n\n ".concat(na,"\n\n Option 2: Use a regular form tag instead of the formGroup directive (template-driven strategy):\n\n ").concat(ta))}}]),e}(),Ia=function(e){h(t,e);var n=g(t);function t(e,r,i){var l;return y(this,t),(l=n.call(this))._parent=e,l._validators=r,l._asyncValidators=i,l}return _(t,[{key:"_checkParentType",value:function(){this._parent instanceof t||this._parent instanceof xa||Ta.modelGroupParentException()}}]),t}(Ea),Sa=function(){return Promise.resolve(null)}(),Oa=function(e){h(t,e);var n=g(t);function t(e,r,i,o){var u;return y(this,t),(u=n.call(this)).control=new wa,u._registered=!1,u.update=new Li,u._parent=e,u._rawValidators=r||[],u._rawAsyncValidators=i||[],u.valueAccessor=function(e,n){if(!n)return null;Array.isArray(n)||ha(e,"Value accessor was not provided as an array for form control with");var t=void 0,r=void 0,i=void 0;return n.forEach((function(n){var l;n.constructor===Pu?t=n:(l=n,pa.some((function(e){return l.constructor===e}))?(r&&ha(e,"More than one built-in value accessor matches form control with"),r=n):(i&&ha(e,"More than one custom value accessor matches form control with"),i=n))})),i||r||t||(ha(e,"No valid value accessor for form control with"),null)}(l(u),o),u}return _(t,[{key:"ngOnChanges",value:function(e){this._checkForErrors(),this._registered||this._setUpControl(),"isDisabled"in e&&this._updateDisabled(e),function(e,n){if(!e.hasOwnProperty("model"))return!1;var t=e.model;return!!t.isFirstChange()||!Object.is(n,t.currentValue)}(e,this.viewModel)&&(this._updateValue(this.model),this.viewModel=this.model)}},{key:"ngOnDestroy",value:function(){this.formDirective&&this.formDirective.removeControl(this)}},{key:"viewToModelUpdate",value:function(e){this.viewModel=e,this.update.emit(e)}},{key:"_setUpControl",value:function(){this._setUpdateStrategy(),this._isStandalone()?this._setUpStandalone():this.formDirective.addControl(this),this._registered=!0}},{key:"_setUpdateStrategy",value:function(){this.options&&null!=this.options.updateOn&&(this.control._updateOn=this.options.updateOn)}},{key:"_isStandalone",value:function(){return!this._parent||!(!this.options||!this.options.standalone)}},{key:"_setUpStandalone",value:function(){ca(this.control,this),this.control.updateValueAndValidity({emitEvent:!1})}},{key:"_checkForErrors",value:function(){this._isStandalone()||this._checkParentType(),this._checkName()}},{key:"_checkParentType",value:function(){!(this._parent instanceof Ia)&&this._parent instanceof Ea?Ta.formGroupNameException():this._parent instanceof Ia||this._parent instanceof xa||Ta.modelParentException()}},{key:"_checkName",value:function(){this.options&&this.options.name&&(this.name=this.options.name),this._isStandalone()||this.name||Ta.missingNameException()}},{key:"_updateValue",value:function(e){var n=this;Sa.then((function(){n.control.setValue(e,{emitViewToModelChange:!1})}))}},{key:"_updateDisabled",value:function(e){var n=this,t=e.isDisabled.currentValue,r=""===t||t&&"false"!==t;Sa.then((function(){r&&!n.control.disabled?n.control.disable():!r&&n.control.disabled&&n.control.enable()}))}},{key:"path",get:function(){return this._parent?sa(this.name,this._parent):[this.name]}},{key:"formDirective",get:function(){return this._parent?this._parent.formDirective:null}},{key:"validator",get:function(){return fa(this._rawValidators)}},{key:"asyncValidator",get:function(){return va(this._rawAsyncValidators)}}]),t}(Hu),Va=function(){function e(){y(this,e),this._required=!1}return _(e,[{key:"validate",value:function(e){return this.required?Zu.required(e):null}},{key:"registerOnValidatorChange",value:function(e){this._onChange=e}},{key:"required",get:function(){return this._required},set:function(e){this._required=null!=e&&!1!==e&&"false"!=="".concat(e),this._onChange&&this._onChange()}}]),e}(),Aa=function e(){y(this,e)},Da=function e(){y(this,e)},Ma=function e(){y(this,e)},Na=function(){var e=function(){function e(n){y(this,e),n&&this.setPath(n.path)}return _(e,[{key:"setPath",value:function(e){this.spritePath=e}},{key:"getPath",value:function(){return this.spritePath}}]),e}();return e.\u0275prov=xe({factory:function(){return new e(qe(Ma,8))},token:e,providedIn:"root"}),e}(),Pa=function(){function e(n){y(this,e),this.iconSpriteService=n,this.classes="icon",this.width="100%",this.preserveAspectRatio="xMinYMax meet"}return _(e,[{key:"ngOnChanges",value:function(e){this.src&&!this.src.includes("#")&&this.iconSpriteService.spritePath&&(this.src="".concat(this.iconSpriteService.getPath(),"#").concat(this.src))}}]),e}(),Ra=function(){function e(n,t){y(this,e),this.renderer=n,this.el=t}return _(e,[{key:"ngOnInit",value:function(){var e=this;if(Array.isArray(this.attribute[0]))this.attribute.forEach((function(n){e.renderer.setAttribute(e.el.nativeElement,n[0],n[1]?n[1]:"")}));else{var n=this.attribute;n[0]&&this.renderer.setAttribute(this.el.nativeElement,n[0],n[1]?n[1]:"")}}}]),e}(),Fa=function(){function e(){y(this,e)}return _(e,null,[{key:"forRoot",value:function(n){return{ngModule:e,providers:[{provide:Ma,useValue:n}]}}}]),e}(),ja=hr({encapsulation:0,styles:["[_nghost-%COMP%] svg[_ngcontent-%COMP%], [_nghost-%COMP%] use[_ngcontent-%COMP%]{fill:currentColor}"],data:{}});function Ha(e){return oo(0,[(e()(),ql(0,0,null,null,1,":svg:title",[],[[1,"id",0]],null,null,null,null)),(e()(),ro(1,null,["",""]))],null,(function(e,n){var t=n.component;e(n,0,0,t.src.split("#")[1]+"-title"),e(n,1,0,t.title)}))}function La(e){return oo(0,[(e()(),ql(0,0,null,null,4,null,null,null,null,null,null,null)),(e()(),ql(1,0,null,null,3,":svg:svg",[],[[1,"class",0],[1,"width",0],[1,"height",0]],null,null,null,null)),(e()(),Zl(16777216,null,null,1,null,Ha)),mi(3,16384,null,0,Iu,[Yt,Wt],{ngIf:[0,"ngIf"]},null),(e()(),ql(4,0,null,null,0,":svg:use",[],[[1,":xlink:href",0]],null,null,null,null))],(function(e,n){var t=n.component;e(n,3,0,t.title&&t.src)}),(function(e,n){var t=n.component;e(n,1,0,t.classes,t.width,t.height||t.width),e(n,4,0,t.src)}))}function Ua(e){return oo(0,[(e()(),ql(0,0,null,null,1,":svg:title",[],[[1,"id",0]],null,null,null,null)),(e()(),ro(1,null,["",""]))],null,(function(e,n){var t=n.component;e(n,0,0,t.src.split("#")[1]+"-title"),e(n,1,0,t.title)}))}function Ba(e){return oo(0,[(e()(),ql(0,0,null,null,5,null,null,null,null,null,null,null)),(e()(),ql(1,0,null,null,4,":svg:svg",[["svgIconSpriteAttr",""]],[[1,"class",0],[1,"width",0],[1,"height",0]],null,null,null,null)),mi(2,81920,null,0,Ra,[Ot,Et],{attribute:[0,"attribute"]},null),(e()(),Zl(16777216,null,null,1,null,Ua)),mi(4,16384,null,0,Iu,[Yt,Wt],{ngIf:[0,"ngIf"]},null),(e()(),ql(5,0,null,null,0,":svg:use",[],[[1,":xlink:href",0]],null,null,null,null))],(function(e,n){var t=n.component;e(n,2,0,t.attribute),e(n,4,0,t.title&&t.src)}),(function(e,n){var t=n.component;e(n,1,0,t.classes,t.width,t.height||t.width),e(n,5,0,t.src)}))}function za(e){return oo(0,[(e()(),ql(0,0,null,null,1,":svg:title",[],[[1,"id",0]],null,null,null,null)),(e()(),ro(1,null,["",""]))],null,(function(e,n){var t=n.component;e(n,0,0,t.src.split("#")[1]+"-title"),e(n,1,0,t.title)}))}function Ga(e){return oo(0,[(e()(),ql(0,0,null,null,4,null,null,null,null,null,null,null)),(e()(),ql(1,0,null,null,3,":svg:svg",[],[[1,"class",0],[1,"width",0],[1,"height",0],[1,"viewBox",0],[1,"preserveAspectRatio",0]],null,null,null,null)),(e()(),Zl(16777216,null,null,1,null,za)),mi(3,16384,null,0,Iu,[Yt,Wt],{ngIf:[0,"ngIf"]},null),(e()(),ql(4,0,null,null,0,":svg:use",[],[[1,":xlink:href",0]],null,null,null,null))],(function(e,n){var t=n.component;e(n,3,0,t.title&&t.src)}),(function(e,n){var t=n.component;e(n,1,0,t.classes,t.width,t.height||t.width,t.viewBox,t.preserveAspectRatio),e(n,4,0,t.src)}))}function Za(e){return oo(0,[(e()(),ql(0,0,null,null,1,":svg:title",[],[[1,"id",0]],null,null,null,null)),(e()(),ro(1,null,["",""]))],null,(function(e,n){var t=n.component;e(n,0,0,t.src.split("#")[1]+"-title"),e(n,1,0,t.title)}))}function qa(e){return oo(0,[(e()(),ql(0,0,null,null,5,null,null,null,null,null,null,null)),(e()(),ql(1,0,null,null,4,":svg:svg",[["svgIconSpriteAttr",""]],[[1,"class",0],[1,"width",0],[1,"height",0],[1,"viewBox",0],[1,"preserveAspectRatio",0]],null,null,null,null)),mi(2,81920,null,0,Ra,[Ot,Et],{attribute:[0,"attribute"]},null),(e()(),Zl(16777216,null,null,1,null,Za)),mi(4,16384,null,0,Iu,[Yt,Wt],{ngIf:[0,"ngIf"]},null),(e()(),ql(5,0,null,null,0,":svg:use",[],[[1,":xlink:href",0]],null,null,null,null))],(function(e,n){var t=n.component;e(n,2,0,t.attribute),e(n,4,0,t.title&&t.src)}),(function(e,n){var t=n.component;e(n,1,0,t.classes,t.width,t.height||t.width,t.viewBox,t.preserveAspectRatio),e(n,5,0,t.src)}))}function Qa(e){return oo(0,[(e()(),Zl(16777216,null,null,1,null,La)),mi(1,16384,null,0,Iu,[Yt,Wt],{ngIf:[0,"ngIf"]},null),(e()(),Zl(16777216,null,null,1,null,Ba)),mi(3,16384,null,0,Iu,[Yt,Wt],{ngIf:[0,"ngIf"]},null),(e()(),Zl(16777216,null,null,1,null,Ga)),mi(5,16384,null,0,Iu,[Yt,Wt],{ngIf:[0,"ngIf"]},null),(e()(),Zl(16777216,null,null,1,null,qa)),mi(7,16384,null,0,Iu,[Yt,Wt],{ngIf:[0,"ngIf"]},null)],(function(e,n){var t=n.component;e(n,1,0,!t.viewBox&&!t.attribute),e(n,3,0,!t.viewBox&&t.attribute),e(n,5,0,t.viewBox&&!t.attribute),e(n,7,0,t.viewBox&&t.attribute)}),null)}var Wa=function(){return function(e,n,t,r,i,l,o,u,a,s){this.source=e,this.name=n,this.size=t,this.hasViewBox=r,this.viewboxX1=i,this.viewboxY1=l,this.viewboxX2=o,this.viewboxY2=u,this.color=a,this.classes=s}}(),Ka=function(){function e(){this.icons=[{src:"assets/sprites/sprite.svg#star_100x100_viewbox",name:"Star (100 x 100px)"},{src:"assets/sprites/sprite.svg#delete_70x70",name:"Trash (70 x 70px)"},{src:"assets/sprites/sprite.svg#circle_24x24-viewbox",name:"Circle (24 x 24px)"},{src:"assets/sprites/image-sprite.svg#multicolor-image",name:"Multicolor Image"}],this.color="color: #ab3030"}return e.prototype.ngOnInit=function(){this.initialize(),this.calculateViewBox()},e.prototype.initialize=function(){this.model=new Wa(this.icons[0].src,this.icons[0].name,240,!0,0,0,100,100,"#ab3030","some-class-name")},e.prototype.reset=function(){this.initialize(),this.calculateViewBox()},e.prototype.applyChange=function(){var e=this,n=this.icons.find((function(n){return n.name===e.model.name}));console.log("icon model =>",n),this.model.source=n.src,this.model.source.includes("multicolor-image")&&(this.model.hasViewBox=!1)},e.prototype.calculateViewBox=function(){this.viewBox=this.model.viewboxX1+" "+this.model.viewboxY1+" "+this.model.viewboxX2+" "+this.model.viewboxY2},e}(),Ya=hr({encapsulation:0,styles:[["[_nghost-%COMP%] svg{border:1px dashed grey;box-shadow:2px 2px 2px #a9a9a9}.row[_ngcontent-%COMP%]{display:grid;grid-template-columns:repeat(12,1fr);grid-gap:10px}.col-symbol[_ngcontent-%COMP%]{grid-column:8/13}.col-symbol[_ngcontent-%COMP%] svg-icon-sprite:hover{color:#00008b!important}.col-symbol[_ngcontent-%COMP%] svg-icon-sprite:hover svg{box-shadow:3px 3px 2px #a9a9a9}.col-controls[_ngcontent-%COMP%]{grid-column:1/8}.col-preview[_ngcontent-%COMP%]{grid-column:4/13}@media screen and (max-width:1200px){.col-symbol[_ngcontent-%COMP%]{grid-column:7/13}.col-controls[_ngcontent-%COMP%]{grid-column:1/6}}@media screen and (max-width:768px){.col-controls[_ngcontent-%COMP%], .col-symbol[_ngcontent-%COMP%]{grid-column:1/13}}.controls[_ngcontent-%COMP%]{margin:10px 0}.controls[_ngcontent-%COMP%]:first-of-type{margin-top:-3px}.controls[_ngcontent-%COMP%] input[_ngcontent-%COMP%]{margin-right:10px}.controls[_ngcontent-%COMP%] select[_ngcontent-%COMP%]{padding:3px}.controls[_ngcontent-%COMP%] label[_ngcontent-%COMP%]:not(.inline){display:block}.controls[_ngcontent-%COMP%] .small[_ngcontent-%COMP%]{color:#555;font-size:90%}.controls[_ngcontent-%COMP%] .warning[_ngcontent-%COMP%]{color:#b22222;display:block;margin-left:0}.controls[_ngcontent-%COMP%] .reset[_ngcontent-%COMP%]{padding-left:40px;padding-right:40px}.controls[_ngcontent-%COMP%] .viewbox-inputs[_ngcontent-%COMP%] input[_ngcontent-%COMP%]{width:40px;margin-right:2px}.tooltip[_ngcontent-%COMP%]{opacity:0;height:0;width:0;position:absolute;background-color:#555;color:#fff;padding:2px;border-radius:4px;font-size:90%;margin-left:3px;pointer-events:none;transition:opacity .1s ease-in-out}i[_ngcontent-%COMP%]{display:inline-block;background-color:#efefef;width:24px;height:24px;border-radius:50%;border:1px solid #767676;margin-left:5px;cursor:help;text-align:center;font-weight:bolder;font-style:normal}i[_ngcontent-%COMP%]:focus + .tooltip[_ngcontent-%COMP%], i[_ngcontent-%COMP%]:hover + .tooltip[_ngcontent-%COMP%]{opacity:.8;height:auto;width:auto}"]],data:{}});function $a(e){return oo(0,[(e()(),ql(0,0,null,null,3,"option",[],null,null,null,null,null)),mi(1,147456,null,0,la,[Et,Ot,[2,ia]],{value:[0,"value"]},null),mi(2,147456,null,0,aa,[Et,Ot,[8,null]],{value:[0,"value"]},null),(e()(),ro(3,null,["",""]))],(function(e,n){e(n,1,0,n.context.$implicit.name),e(n,2,0,n.context.$implicit.name)}),(function(e,n){e(n,3,0,n.context.$implicit.name)}))}function Ja(e){return oo(0,[(e()(),ql(0,0,null,null,1,"span",[["class","small warning"]],null,null,null,null,null)),(e()(),ro(-1,null,[" Fill & stroke rules will not apply on multi-color icons! "]))],null,null)}function Xa(e){return oo(0,[(e()(),ql(0,0,null,null,2,null,null,null,null,null,null,null)),(e()(),ql(1,0,null,null,1,"svg-icon-sprite",[],[[1,"style",2]],null,null,Qa,ja)),mi(2,573440,null,0,Pa,[Na],{src:[0,"src"],classes:[1,"classes"],width:[2,"width"],viewBox:[3,"viewBox"]},null)],(function(e,n){var t=n.component;e(n,2,0,t.model.source,t.model.classes,t.model.size+"px",t.viewBox)}),(function(e,n){e(n,1,0,"color: "+n.component.model.color)}))}function es(e){return oo(0,[(e()(),ql(0,0,null,null,2,null,null,null,null,null,null,null)),(e()(),ql(1,0,null,null,1,"svg-icon-sprite",[],[[1,"style",2]],null,null,Qa,ja)),mi(2,573440,null,0,Pa,[Na],{src:[0,"src"],classes:[1,"classes"],width:[2,"width"]},null)],(function(e,n){var t=n.component;e(n,2,0,t.model.source,t.model.classes,t.model.size+"px")}),(function(e,n){e(n,1,0,"color: "+n.component.model.color)}))}function ns(e){return oo(0,[(e()(),ql(0,0,null,null,1,"pre",[],null,null,null,null,null)),(e()(),ro(1,null,["']))],null,(function(e,n){var t=n.component;e(n,1,0,t.model.source,t.model.size,t.model.hasViewBox?"[viewBox]=\"'"+t.viewBox+"'\"":"",t.model.color)}))}function ts(e){return oo(0,[(e()(),ql(0,0,null,null,1,"pre",[],null,null,null,null,null)),(e()(),ro(1,null,["']))],null,(function(e,n){var t=n.component;e(n,1,0,t.model.source,t.model.size,t.model.color)}))}function rs(e){return oo(0,[(e()(),ql(0,0,null,null,3,"h2",[],null,null,null,null,null)),(e()(),ro(-1,null,["Manipulation "])),(e()(),ql(2,0,null,null,1,"small",[],null,null,null,null,null)),(e()(),ro(-1,null,["(scaling and attributes)"])),(e()(),ql(4,0,null,null,106,"div",[["class","row"]],null,null,null,null,null)),(e()(),ql(5,0,null,null,95,"div",[["class","col-controls"]],null,null,null,null,null)),(e()(),ql(6,0,null,null,15,"div",[["class","controls"]],null,null,null,null,null)),(e()(),ql(7,0,null,null,1,"label",[["for","name"]],null,null,null,null,null)),(e()(),ro(-1,null,["Icon"])),(e()(),ql(9,0,null,null,9,"select",[["class","form-control"],["id","name"],["name","power"],["required",""]],[[1,"required",0],[2,"ng-untouched",null],[2,"ng-touched",null],[2,"ng-pristine",null],[2,"ng-dirty",null],[2,"ng-valid",null],[2,"ng-invalid",null],[2,"ng-pending",null]],[[null,"change"],[null,"ngModelChange"],[null,"blur"]],(function(e,n,t){var r=!0,i=e.component;return"change"===n&&(r=!1!==ai(e,10).onChange(t.target.value)&&r),"blur"===n&&(r=!1!==ai(e,10).onTouched()&&r),"change"===n&&(r=!1!==i.applyChange()&&r),"ngModelChange"===n&&(r=!1!==(i.model.name=t)&&r),r}),null,null)),mi(10,16384,null,0,ia,[Ot,Et],null,null),mi(11,16384,null,0,Va,[],{required:[0,"required"]},null),_i(1024,null,zu,(function(e){return[e]}),[Va]),_i(1024,null,Du,(function(e){return[e]}),[ia]),mi(14,671744,null,0,Oa,[[8,null],[6,zu],[8,null],[6,Du]],{name:[0,"name"],model:[1,"model"]},{update:"ngModelChange"}),_i(2048,null,Hu,null,[Oa]),mi(16,16384,null,0,Lu,[[4,Hu]],null,null),(e()(),Zl(16777216,null,null,1,null,$a)),mi(18,278528,null,0,Eu,[Yt,Wt,zt],{ngForOf:[0,"ngForOf"]},null),(e()(),ql(19,0,null,null,0,"br",[],null,null,null,null,null)),(e()(),ql(20,0,null,null,1,"span",[["class","small"]],null,null,null,null,null)),(e()(),ro(21,null,["",""])),(e()(),ql(22,0,null,null,11,"div",[["class","controls"]],null,null,null,null,null)),(e()(),ql(23,0,null,null,1,"label",[["for","size"]],null,null,null,null,null)),(e()(),ro(-1,null,["Width"])),(e()(),ql(25,0,null,null,6,"input",[["id","size"],["max","300"],["min","40"],["name","icon-size"],["type","range"]],[[2,"ng-untouched",null],[2,"ng-touched",null],[2,"ng-pristine",null],[2,"ng-dirty",null],[2,"ng-valid",null],[2,"ng-invalid",null],[2,"ng-pending",null]],[[null,"ngModelChange"],[null,"input"],[null,"blur"],[null,"compositionstart"],[null,"compositionend"],[null,"change"]],(function(e,n,t){var r=!0,i=e.component;return"input"===n&&(r=!1!==ai(e,26)._handleInput(t.target.value)&&r),"blur"===n&&(r=!1!==ai(e,26).onTouched()&&r),"compositionstart"===n&&(r=!1!==ai(e,26)._compositionStart()&&r),"compositionend"===n&&(r=!1!==ai(e,26)._compositionEnd(t.target.value)&&r),"change"===n&&(r=!1!==ai(e,27).onChange(t.target.value)&&r),"input"===n&&(r=!1!==ai(e,27).onChange(t.target.value)&&r),"blur"===n&&(r=!1!==ai(e,27).onTouched()&&r),"ngModelChange"===n&&(r=!1!==(i.model.size=t)&&r),r}),null,null)),mi(26,16384,null,0,Pu,[Ot,Et,[2,Nu]],null,null),mi(27,16384,null,0,ea,[Ot,Et],null,null),_i(1024,null,Du,(function(e,n){return[e,n]}),[Pu,ea]),mi(29,671744,null,0,Oa,[[8,null],[8,null],[8,null],[6,Du]],{name:[0,"name"],model:[1,"model"]},{update:"ngModelChange"}),_i(2048,null,Hu,null,[Oa]),mi(31,16384,null,0,Lu,[[4,Hu]],null,null),(e()(),ql(32,0,null,null,1,"span",[["class","small"]],null,null,null,null,null)),(e()(),ro(33,null,["","px"])),(e()(),ql(34,0,null,null,14,"div",[["class","controls inline"]],null,null,null,null,null)),(e()(),ql(35,0,null,null,1,"label",[["class","inline"],["for","viewbox-on"]],null,null,null,null,null)),(e()(),ro(-1,null,["Viewbox"])),(e()(),ql(37,0,null,null,5,"input",[["id","viewbox-on"],["type","checkbox"]],[[2,"ng-untouched",null],[2,"ng-touched",null],[2,"ng-pristine",null],[2,"ng-dirty",null],[2,"ng-valid",null],[2,"ng-invalid",null],[2,"ng-pending",null]],[[null,"ngModelChange"],[null,"change"],[null,"blur"]],(function(e,n,t){var r=!0,i=e.component;return"change"===n&&(r=!1!==ai(e,38).onChange(t.target.checked)&&r),"blur"===n&&(r=!1!==ai(e,38).onTouched()&&r),"ngModelChange"===n&&(r=!1!==(i.model.hasViewBox=t)&&r),r}),null,null)),mi(38,16384,null,0,Mu,[Ot,Et],null,null),_i(1024,null,Du,(function(e){return[e]}),[Mu]),mi(40,671744,null,0,Oa,[[8,null],[8,null],[8,null],[6,Du]],{model:[0,"model"]},{update:"ngModelChange"}),_i(2048,null,Hu,null,[Oa]),mi(42,16384,null,0,Lu,[[4,Hu]],null,null),(e()(),ql(43,0,null,null,1,"span",[["class","small"]],null,null,null,null,null)),(e()(),ro(44,null,["",""])),(e()(),ql(45,0,null,null,1,"i",[["aria-labelledby","tooltip02"],["tabindex","0"]],null,null,null,null,null)),(e()(),ro(-1,null,["i"])),(e()(),ql(47,0,null,null,1,"span",[["class","tooltip"],["id","tooltip02"]],null,null,null,null,null)),(e()(),ro(-1,null,["Browsers might scale icons without a viewBox differently"])),(e()(),ql(49,0,null,null,35,"div",[["class","controls"]],null,null,null,null,null)),(e()(),ql(50,0,null,null,1,"label",[["for","viewbox1"]],null,null,null,null,null)),(e()(),ro(-1,null,["Viewbox values"])),(e()(),ql(52,0,null,null,32,"div",[["class","viewbox-inputs"]],null,null,null,null,null)),(e()(),ql(53,0,null,null,6,"input",[["id","viewbox1"],["type","number"]],[[2,"ng-untouched",null],[2,"ng-touched",null],[2,"ng-pristine",null],[2,"ng-dirty",null],[2,"ng-valid",null],[2,"ng-invalid",null],[2,"ng-pending",null]],[[null,"ngModelChange"],[null,"change"],[null,"keyup"],[null,"input"],[null,"blur"],[null,"compositionstart"],[null,"compositionend"]],(function(e,n,t){var r=!0,i=e.component;return"input"===n&&(r=!1!==ai(e,54)._handleInput(t.target.value)&&r),"blur"===n&&(r=!1!==ai(e,54).onTouched()&&r),"compositionstart"===n&&(r=!1!==ai(e,54)._compositionStart()&&r),"compositionend"===n&&(r=!1!==ai(e,54)._compositionEnd(t.target.value)&&r),"input"===n&&(r=!1!==ai(e,55).onChange(t.target.value)&&r),"blur"===n&&(r=!1!==ai(e,55).onTouched()&&r),"ngModelChange"===n&&(r=!1!==(i.model.viewboxX1=t)&&r),"change"===n&&(r=!1!==i.calculateViewBox()&&r),"keyup"===n&&(r=!1!==i.calculateViewBox()&&r),r}),null,null)),mi(54,16384,null,0,Pu,[Ot,Et,[2,Nu]],null,null),mi(55,16384,null,0,$u,[Ot,Et],null,null),_i(1024,null,Du,(function(e,n){return[e,n]}),[Pu,$u]),mi(57,671744,null,0,Oa,[[8,null],[8,null],[8,null],[6,Du]],{isDisabled:[0,"isDisabled"],model:[1,"model"]},{update:"ngModelChange"}),_i(2048,null,Hu,null,[Oa]),mi(59,16384,null,0,Lu,[[4,Hu]],null,null),(e()(),ql(60,0,null,null,6,"input",[["id","viewbox2"],["type","number"]],[[2,"ng-untouched",null],[2,"ng-touched",null],[2,"ng-pristine",null],[2,"ng-dirty",null],[2,"ng-valid",null],[2,"ng-invalid",null],[2,"ng-pending",null]],[[null,"ngModelChange"],[null,"change"],[null,"keyup"],[null,"input"],[null,"blur"],[null,"compositionstart"],[null,"compositionend"]],(function(e,n,t){var r=!0,i=e.component;return"input"===n&&(r=!1!==ai(e,61)._handleInput(t.target.value)&&r),"blur"===n&&(r=!1!==ai(e,61).onTouched()&&r),"compositionstart"===n&&(r=!1!==ai(e,61)._compositionStart()&&r),"compositionend"===n&&(r=!1!==ai(e,61)._compositionEnd(t.target.value)&&r),"input"===n&&(r=!1!==ai(e,62).onChange(t.target.value)&&r),"blur"===n&&(r=!1!==ai(e,62).onTouched()&&r),"ngModelChange"===n&&(r=!1!==(i.model.viewboxY1=t)&&r),"change"===n&&(r=!1!==i.calculateViewBox()&&r),"keyup"===n&&(r=!1!==i.calculateViewBox()&&r),r}),null,null)),mi(61,16384,null,0,Pu,[Ot,Et,[2,Nu]],null,null),mi(62,16384,null,0,$u,[Ot,Et],null,null),_i(1024,null,Du,(function(e,n){return[e,n]}),[Pu,$u]),mi(64,671744,null,0,Oa,[[8,null],[8,null],[8,null],[6,Du]],{isDisabled:[0,"isDisabled"],model:[1,"model"]},{update:"ngModelChange"}),_i(2048,null,Hu,null,[Oa]),mi(66,16384,null,0,Lu,[[4,Hu]],null,null),(e()(),ql(67,0,null,null,6,"input",[["id","viewbox3"],["type","number"]],[[2,"ng-untouched",null],[2,"ng-touched",null],[2,"ng-pristine",null],[2,"ng-dirty",null],[2,"ng-valid",null],[2,"ng-invalid",null],[2,"ng-pending",null]],[[null,"ngModelChange"],[null,"change"],[null,"keyup"],[null,"input"],[null,"blur"],[null,"compositionstart"],[null,"compositionend"]],(function(e,n,t){var r=!0,i=e.component;return"input"===n&&(r=!1!==ai(e,68)._handleInput(t.target.value)&&r),"blur"===n&&(r=!1!==ai(e,68).onTouched()&&r),"compositionstart"===n&&(r=!1!==ai(e,68)._compositionStart()&&r),"compositionend"===n&&(r=!1!==ai(e,68)._compositionEnd(t.target.value)&&r),"input"===n&&(r=!1!==ai(e,69).onChange(t.target.value)&&r),"blur"===n&&(r=!1!==ai(e,69).onTouched()&&r),"ngModelChange"===n&&(r=!1!==(i.model.viewboxX2=t)&&r),"change"===n&&(r=!1!==i.calculateViewBox()&&r),"keyup"===n&&(r=!1!==i.calculateViewBox()&&r),r}),null,null)),mi(68,16384,null,0,Pu,[Ot,Et,[2,Nu]],null,null),mi(69,16384,null,0,$u,[Ot,Et],null,null),_i(1024,null,Du,(function(e,n){return[e,n]}),[Pu,$u]),mi(71,671744,null,0,Oa,[[8,null],[8,null],[8,null],[6,Du]],{isDisabled:[0,"isDisabled"],model:[1,"model"]},{update:"ngModelChange"}),_i(2048,null,Hu,null,[Oa]),mi(73,16384,null,0,Lu,[[4,Hu]],null,null),(e()(),ql(74,0,null,null,6,"input",[["id","viewbox4"],["type","number"]],[[2,"ng-untouched",null],[2,"ng-touched",null],[2,"ng-pristine",null],[2,"ng-dirty",null],[2,"ng-valid",null],[2,"ng-invalid",null],[2,"ng-pending",null]],[[null,"ngModelChange"],[null,"change"],[null,"keyup"],[null,"input"],[null,"blur"],[null,"compositionstart"],[null,"compositionend"]],(function(e,n,t){var r=!0,i=e.component;return"input"===n&&(r=!1!==ai(e,75)._handleInput(t.target.value)&&r),"blur"===n&&(r=!1!==ai(e,75).onTouched()&&r),"compositionstart"===n&&(r=!1!==ai(e,75)._compositionStart()&&r),"compositionend"===n&&(r=!1!==ai(e,75)._compositionEnd(t.target.value)&&r),"input"===n&&(r=!1!==ai(e,76).onChange(t.target.value)&&r),"blur"===n&&(r=!1!==ai(e,76).onTouched()&&r),"ngModelChange"===n&&(r=!1!==(i.model.viewboxY2=t)&&r),"change"===n&&(r=!1!==i.calculateViewBox()&&r),"keyup"===n&&(r=!1!==i.calculateViewBox()&&r),r}),null,null)),mi(75,16384,null,0,Pu,[Ot,Et,[2,Nu]],null,null),mi(76,16384,null,0,$u,[Ot,Et],null,null),_i(1024,null,Du,(function(e,n){return[e,n]}),[Pu,$u]),mi(78,671744,null,0,Oa,[[8,null],[8,null],[8,null],[6,Du]],{isDisabled:[0,"isDisabled"],model:[1,"model"]},{update:"ngModelChange"}),_i(2048,null,Hu,null,[Oa]),mi(80,16384,null,0,Lu,[[4,Hu]],null,null),(e()(),ql(81,0,null,null,1,"i",[["aria-labelledby","tooltip01"],["tabindex","0"]],null,null,null,null,null)),(e()(),ro(-1,null,["i"])),(e()(),ql(83,0,null,null,1,"span",[["class","tooltip"],["id","tooltip01"]],null,null,null,null,null)),(e()(),ro(-1,null,["Decrease the last two values equally to scale up"])),(e()(),ql(85,0,null,null,12,"div",[["class","controls"]],null,null,null,null,null)),(e()(),ql(86,0,null,null,1,"label",[["for","color"]],null,null,null,null,null)),(e()(),ro(-1,null,["Color"])),(e()(),ql(88,0,null,null,5,"input",[["id","color"],["name","color"],["type","color"]],[[2,"ng-untouched",null],[2,"ng-touched",null],[2,"ng-pristine",null],[2,"ng-dirty",null],[2,"ng-valid",null],[2,"ng-invalid",null],[2,"ng-pending",null]],[[null,"ngModelChange"],[null,"input"],[null,"blur"],[null,"compositionstart"],[null,"compositionend"]],(function(e,n,t){var r=!0,i=e.component;return"input"===n&&(r=!1!==ai(e,89)._handleInput(t.target.value)&&r),"blur"===n&&(r=!1!==ai(e,89).onTouched()&&r),"compositionstart"===n&&(r=!1!==ai(e,89)._compositionStart()&&r),"compositionend"===n&&(r=!1!==ai(e,89)._compositionEnd(t.target.value)&&r),"ngModelChange"===n&&(r=!1!==(i.model.color=t)&&r),r}),null,null)),mi(89,16384,null,0,Pu,[Ot,Et,[2,Nu]],null,null),_i(1024,null,Du,(function(e){return[e]}),[Pu]),mi(91,671744,null,0,Oa,[[8,null],[8,null],[8,null],[6,Du]],{name:[0,"name"],model:[1,"model"]},{update:"ngModelChange"}),_i(2048,null,Hu,null,[Oa]),mi(93,16384,null,0,Lu,[[4,Hu]],null,null),(e()(),ql(94,0,null,null,1,"span",[["class","small"]],null,null,null,null,null)),(e()(),ro(95,null,["",""])),(e()(),Zl(16777216,null,null,1,null,Ja)),mi(97,16384,null,0,Iu,[Yt,Wt],{ngIf:[0,"ngIf"]},null),(e()(),ql(98,0,null,null,2,"div",[["class","controls"]],null,null,null,null,null)),(e()(),ql(99,0,null,null,1,"button",[["class","reset"]],null,[[null,"click"]],(function(e,n,t){var r=!0;return"click"===n&&(r=!1!==e.component.reset()&&r),r}),null,null)),(e()(),ro(-1,null,["Reset"])),(e()(),ql(101,0,null,null,4,"div",[["class","col-symbol"]],null,null,null,null,null)),(e()(),Zl(16777216,null,null,1,null,Xa)),mi(103,16384,null,0,Iu,[Yt,Wt],{ngIf:[0,"ngIf"]},null),(e()(),Zl(16777216,null,null,1,null,es)),mi(105,16384,null,0,Iu,[Yt,Wt],{ngIf:[0,"ngIf"]},null),(e()(),ql(106,0,null,null,4,"div",[["class","col-preview"]],null,null,null,null,null)),(e()(),Zl(16777216,null,null,1,null,ns)),mi(108,16384,null,0,Iu,[Yt,Wt],{ngIf:[0,"ngIf"]},null),(e()(),Zl(16777216,null,null,1,null,ts)),mi(110,16384,null,0,Iu,[Yt,Wt],{ngIf:[0,"ngIf"]},null)],(function(e,n){var t=n.component;e(n,11,0,""),e(n,14,0,"power",t.model.name),e(n,18,0,t.icons),e(n,29,0,"icon-size",t.model.size),e(n,40,0,t.model.hasViewBox),e(n,57,0,!t.model.hasViewBox,t.model.viewboxX1),e(n,64,0,!t.model.hasViewBox,t.model.viewboxY1),e(n,71,0,!t.model.hasViewBox,t.model.viewboxX2),e(n,78,0,!t.model.hasViewBox,t.model.viewboxY2),e(n,91,0,"color",t.model.color),e(n,97,0,t.model.source.includes("multicolor-image")),e(n,103,0,t.model.hasViewBox),e(n,105,0,!t.model.hasViewBox),e(n,108,0,t.model.hasViewBox),e(n,110,0,!t.model.hasViewBox)}),(function(e,n){var t=n.component;e(n,9,0,ai(n,11).required?"":null,ai(n,16).ngClassUntouched,ai(n,16).ngClassTouched,ai(n,16).ngClassPristine,ai(n,16).ngClassDirty,ai(n,16).ngClassValid,ai(n,16).ngClassInvalid,ai(n,16).ngClassPending),e(n,21,0,t.model.source),e(n,25,0,ai(n,31).ngClassUntouched,ai(n,31).ngClassTouched,ai(n,31).ngClassPristine,ai(n,31).ngClassDirty,ai(n,31).ngClassValid,ai(n,31).ngClassInvalid,ai(n,31).ngClassPending),e(n,33,0,t.model.size),e(n,37,0,ai(n,42).ngClassUntouched,ai(n,42).ngClassTouched,ai(n,42).ngClassPristine,ai(n,42).ngClassDirty,ai(n,42).ngClassValid,ai(n,42).ngClassInvalid,ai(n,42).ngClassPending),e(n,44,0,t.model.hasViewBox?"enabled":"disabled"),e(n,53,0,ai(n,59).ngClassUntouched,ai(n,59).ngClassTouched,ai(n,59).ngClassPristine,ai(n,59).ngClassDirty,ai(n,59).ngClassValid,ai(n,59).ngClassInvalid,ai(n,59).ngClassPending),e(n,60,0,ai(n,66).ngClassUntouched,ai(n,66).ngClassTouched,ai(n,66).ngClassPristine,ai(n,66).ngClassDirty,ai(n,66).ngClassValid,ai(n,66).ngClassInvalid,ai(n,66).ngClassPending),e(n,67,0,ai(n,73).ngClassUntouched,ai(n,73).ngClassTouched,ai(n,73).ngClassPristine,ai(n,73).ngClassDirty,ai(n,73).ngClassValid,ai(n,73).ngClassInvalid,ai(n,73).ngClassPending),e(n,74,0,ai(n,80).ngClassUntouched,ai(n,80).ngClassTouched,ai(n,80).ngClassPristine,ai(n,80).ngClassDirty,ai(n,80).ngClassValid,ai(n,80).ngClassInvalid,ai(n,80).ngClassPending),e(n,88,0,ai(n,93).ngClassUntouched,ai(n,93).ngClassTouched,ai(n,93).ngClassPristine,ai(n,93).ngClassDirty,ai(n,93).ngClassValid,ai(n,93).ngClassInvalid,ai(n,93).ngClassPending),e(n,95,0,t.model.color)}))}var is=hr({encapsulation:0,styles:[["@-webkit-keyframes mymove{0%{transform:translateX(0)}50%{transform:translateX(2px)}75%{transform:translateX(0)}to{transform:translateX(-2px)}}@keyframes mymove{0%{transform:translateX(0)}50%{transform:translateX(2px)}75%{transform:translateX(0)}to{transform:translateX(-2px)}}@-webkit-keyframes pulse{0%{color:#24292e}50%{color:#b03a2e}to{color:#24292e}}@keyframes pulse{0%{color:#24292e}50%{color:#b03a2e}to{color:#24292e}}.icon-examples-1[_ngcontent-%COMP%]{color:#8b0000;transition:transform .2s ease-in-out;-ms-transform-origin:center center;transform-origin:center center}.icon-examples-1[_ngcontent-%COMP%]:focus, .icon-examples-1[_ngcontent-%COMP%]:hover{color:red;-ms-transform:rotate(12deg);transform:rotate(12deg)}.icon-examples-2[_ngcontent-%COMP%]{color:#006400;transition:color .4s ease-in-out}.icon-examples-2[_ngcontent-%COMP%]:focus, .icon-examples-2[_ngcontent-%COMP%]:hover{color:#32cd32}.icon-examples-3[_ngcontent-%COMP%]{transition:transform .2s ease-in-out;-ms-transform-origin:center center;transform-origin:center center}.icon-examples-3[_ngcontent-%COMP%]:focus, .icon-examples-3[_ngcontent-%COMP%]:hover{-ms-transform:scale(1.1);transform:scale(1.1)}.icon-examples-4[_ngcontent-%COMP%]{color:#8b0000}.icon-examples-4[_ngcontent-%COMP%]:focus, .icon-examples-4[_ngcontent-%COMP%]:hover{color:brown}.icon-examples-5[_ngcontent-%COMP%]{color:#ff8c00;transition:color .1s ease-in-out}.icon-examples-5[_ngcontent-%COMP%]:focus, .icon-examples-5[_ngcontent-%COMP%]:hover{color:#b8860b}.icon-examples-6[_ngcontent-%COMP%]{transition:transform .1s ease-in-out;-ms-transform-origin:center center;transform-origin:center center}.icon-examples-6[_ngcontent-%COMP%]:focus, .icon-examples-6[_ngcontent-%COMP%]:hover{transform:rotateY(30deg)}.icon-scale-down[_ngcontent-%COMP%]{-ms-transform:scale(.5);transform:scale(.5)}.icon-scale-up[_ngcontent-%COMP%]{-ms-transform:scale(5);transform:scale(5)}.container[_ngcontent-%COMP%] .styled-icon use{fill:orange;stroke:#000}.icon-change-size[_ngcontent-%COMP%] svg{transition:all .2s linear;-ms-transform-origin:top center;transform-origin:top center}.headline-green[_ngcontent-%COMP%]{color:#1e8449;-webkit-animation:pulse 5s infinite;animation:pulse 5s infinite}"]],data:{}});function ls(e){return oo(0,[(e()(),ql(0,0,null,null,175,"div",[["class","container"]],null,null,null,null,null)),(e()(),ql(1,0,null,null,3,"h1",[],null,null,null,null,null)),(e()(),ro(-1,null,["SVG-Icon-Sprite "])),(e()(),ql(3,0,null,null,1,"small",[],null,null,null,null,null)),(e()(),ro(-1,null,["Demo"])),(e()(),ql(5,0,null,null,1,"app-manipulator",[],null,null,null,rs,Ya)),mi(6,114688,null,0,Ka,[],null,null),(e()(),ql(7,0,null,null,3,"h2",[["id","manipulation"]],null,null,null,null,null)),(e()(),ro(-1,null,["The Basics "])),(e()(),ql(9,0,null,null,1,"small",[],null,null,null,null,null)),(e()(),ro(-1,null,["(reference, width and styling)"])),(e()(),ql(11,0,null,null,7,"p",[],null,null,null,null,null)),(e()(),ro(-1,null,["To display the icons in original size match the "])),(e()(),ql(13,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(-1,null,["[width]"])),(e()(),ro(-1,null,[" and "])),(e()(),ql(16,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(-1,null,["[height]"])),(e()(),ro(-1,null,[" with the width/height of the equivalent SVG."])),(e()(),ql(19,0,null,null,12,"ul",[["class","vertical"]],null,null,null,null,null)),(e()(),ql(20,0,null,null,5,"li",[],null,null,null,null,null)),(e()(),ql(21,0,null,null,2,"div",[["class","icon-row icon-examples-1"]],null,null,null,null,null)),(e()(),ql(22,0,null,null,1,"svg-icon-sprite",[["src","star_100x100"]],null,null,null,Qa,ja)),mi(23,573440,null,0,Pa,[Na],{src:[0,"src"],width:[1,"width"]},null),(e()(),ql(24,0,null,null,1,"pre",[],null,null,null,null,null)),(e()(),ro(25,null,["\n\n.icon-example ","\n color: darkred;\n",""])),(e()(),ql(26,0,null,null,5,"li",[],null,null,null,null,null)),(e()(),ql(27,0,null,null,2,"div",[["class","icon-row icon-examples-2"]],null,null,null,null,null)),(e()(),ql(28,0,null,null,1,"svg-icon-sprite",[],null,null,null,Qa,ja)),mi(29,573440,null,0,Pa,[Na],{src:[0,"src"],width:[1,"width"],height:[2,"height"]},null),(e()(),ql(30,0,null,null,1,"pre",[],null,null,null,null,null)),(e()(),ro(-1,null,[""])),(e()(),ql(32,0,null,null,9,"p",[],null,null,null,null,null)),(e()(),ro(-1,null,["To access the inner SVG properties like "])),(e()(),ql(34,0,null,null,1,"strong",[],null,null,null,null,null)),(e()(),ro(-1,null,["fill"])),(e()(),ro(-1,null,[" or "])),(e()(),ql(37,0,null,null,1,"strong",[],null,null,null,null,null)),(e()(),ro(-1,null,["stroke"])),(e()(),ro(-1,null,[" via CSS use "])),(e()(),ql(40,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(-1,null,["::ng-deep"])),(e()(),ql(42,0,null,null,6,"ul",[["class","vertical"]],null,null,null,null,null)),(e()(),ql(43,0,null,null,5,"li",[],null,null,null,null,null)),(e()(),ql(44,0,null,null,2,"div",[["class","icon-row icon-examples-3"],["style","padding-top: 20px;"]],null,null,null,null,null)),(e()(),ql(45,0,null,null,1,"svg-icon-sprite",[],null,null,null,Qa,ja)),mi(46,573440,null,0,Pa,[Na],{src:[0,"src"],classes:[1,"classes"],width:[2,"width"]},null),(e()(),ql(47,0,null,null,1,"pre",[],null,null,null,null,null)),(e()(),ro(48,null,[".container ","\n ::ng-deep ","\n .styled-icon ","\n use ","\n fill: orange;\n stroke: black;"])),(e()(),ql(49,0,null,null,3,"h2",[["id","scaling"]],null,null,null,null,null)),(e()(),ro(-1,null,["Alternative Scaling "])),(e()(),ql(51,0,null,null,1,"small",[],null,null,null,null,null)),(e()(),ro(-1,null,["(using CSS transform)"])),(e()(),ql(53,0,null,null,4,"p",[],null,null,null,null,null)),(e()(),ro(-1,null,["As scaling via "])),(e()(),ql(55,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(-1,null,["viewBox"])),(e()(),ro(-1,null,[" might differ across browsers, you can also use this pattern. Apply rules as below: wrap the SVG into a div and size it using CSS transforms."])),(e()(),ql(58,0,null,null,14,"ul",[["class","vertical"]],null,null,null,null,null)),(e()(),ql(59,0,null,null,6,"li",[],null,null,null,null,null)),(e()(),ql(60,0,null,null,3,"div",[["class","icon-row icon-examples-2"]],null,null,null,null,null)),(e()(),ql(61,0,null,null,2,"div",[["class","icon-scale-down"],["style","padding-bottom: 20px;"]],null,null,null,null,null)),(e()(),ql(62,0,null,null,1,"svg-icon-sprite",[],null,null,null,Qa,ja)),mi(63,573440,null,0,Pa,[Na],{src:[0,"src"],width:[1,"width"]},null),(e()(),ql(64,0,null,null,1,"pre",[],null,null,null,null,null)),(e()(),ro(65,null,[".icon-scale-down ","\n // Scale down by 50%\n transform: scale(0.5);\n",""])),(e()(),ql(66,0,null,null,6,"li",[],null,null,null,null,null)),(e()(),ql(67,0,null,null,3,"div",[["class","icon-row icon-examples-4"],["style","height: 0;"]],null,null,null,null,null)),(e()(),ql(68,0,null,null,2,"div",[["class","icon-scale-up"]],null,null,null,null,null)),(e()(),ql(69,0,null,null,1,"svg-icon-sprite",[],null,null,null,Qa,ja)),mi(70,573440,null,0,Pa,[Na],{src:[0,"src"],width:[1,"width"]},null),(e()(),ql(71,0,null,null,1,"pre",[],null,null,null,null,null)),(e()(),ro(72,null,[".icon-scale-up ","\n // Scale up by 500%\n transform: scale(5);\n","\n "])),(e()(),ql(73,0,null,null,1,"h2",[["id","defaultpath"]],null,null,null,null,null)),(e()(),ro(-1,null,["Default sprite path"])),(e()(),ro(-1,null,[" Set the sprite path in your "])),(e()(),ql(76,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(-1,null,["environment.ts"])),(e()(),ro(-1,null,[" and set the default path using "])),(e()(),ql(79,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(-1,null,["forRoot()"])),(e()(),ro(-1,null,[". Now you can invoke the component and simply pass the plain icon name as "])),(e()(),ql(82,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(-1,null,["[src]"])),(e()(),ro(-1,null,[". "])),(e()(),ql(85,0,null,null,9,"ul",[["class","vertical"]],null,null,null,null,null)),(e()(),ql(86,0,null,null,8,"li",[],null,null,null,null,null)),(e()(),ql(87,0,null,null,2,"div",[["class","icon-row"],["style","padding-top: 30px"]],null,null,null,null,null)),(e()(),ql(88,0,null,null,1,"svg-icon-sprite",[],null,null,null,Qa,ja)),mi(89,573440,null,0,Pa,[Na],{src:[0,"src"],width:[1,"width"]},null),(e()(),ql(90,0,null,null,4,"div",[["class","pre-vertical"]],null,null,null,null,null)),(e()(),ql(91,0,null,null,1,"pre",[],null,null,null,null,null)),(e()(),ro(92,null,["import "," IconSpriteModule "," from 'ng-svg-icon-sprite';\nimport "," environment "," from '../environments/environment';\n\n@NgModule(","\n imports: [\n IconSpriteModule.forRoot("," path: environment.spritePath ",")\n"])),(e()(),ql(93,0,null,null,1,"pre",[["style","height: 25px;"]],null,null,null,null,null)),(e()(),ro(-1,null,[''])),(e()(),ql(95,0,null,null,11,"p",[["style","padding-left: 25%;"]],null,null,null,null,null)),(e()(),ql(96,0,null,null,1,"strong",[],null,null,null,null,null)),(e()(),ro(-1,null,["Advanced Tip:"])),(e()(),ro(-1,null,[" to change the sprite path during runtime, inject the "])),(e()(),ql(99,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(-1,null,["iconSpriteService"])),(e()(),ro(-1,null,[" anywhere and execute "])),(e()(),ql(102,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(-1,null,["this.iconSpriteService.setPath('new-path.svg')"])),(e()(),ro(-1,null,[" Re-render all icon-components afterwards! \xa0 "])),(e()(),ql(105,0,null,null,1,"button",[],[[8,"disabled",0]],[[null,"click"]],(function(e,n,t){var r=!0,i=e.component;return"click"===n&&(i.changeDefaultSpritePath(),r=0!=(i.changeDone=!0)&&r),r}),null,null)),(e()(),ro(-1,null,["Change and render"])),(e()(),ql(107,0,null,null,3,"h2",[["id","a11y"]],null,null,null,null,null)),(e()(),ro(-1,null,["Accessible example "])),(e()(),ql(109,0,null,null,1,"small",[],null,null,null,null,null)),(e()(),ro(-1,null,["(meaningful icon pattern)"])),(e()(),ql(111,0,null,null,9,"ul",[["class","vertical"]],null,null,null,null,null)),(e()(),ql(112,0,null,null,8,"li",[],null,null,null,null,null)),(e()(),ql(113,0,null,null,5,"div",[["class","icon-row icon-examples-5"]],null,null,null,null,null)),(e()(),ql(114,0,null,null,4,"svg-icon-sprite",[],null,null,null,Qa,ja)),mi(115,573440,null,0,Pa,[Na],{src:[0,"src"],width:[1,"width"],attribute:[2,"attribute"],title:[3,"title"]},null),to(116,2),to(117,2),to(118,2),(e()(),ql(119,0,null,null,1,"pre",[],null,null,null,null,null)),(e()(),ro(-1,null,["\n "])),(e()(),ro(-1,null,[" Adding "])),(e()(),ql(122,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(-1,null,["[title]=\"'Orange star'\""])),(e()(),ro(-1,null,[" will render "])),(e()(),ql(125,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(-1,null,['Orange star'])),(e()(),ro(-1,null,[" as the first child of the SVG node and serve as alternative text for screen readers. To improve support, you can additionally reference the title's node via "])),(e()(),ql(128,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(-1,null,["'aria-labelledby'"])),(e()(),ro(-1,null,[" using the title's generated id "])),(e()(),ql(131,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(-1,null,["star_100x100-title"])),(e()(),ro(-1,null,[" and set the "])),(e()(),ql(134,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(-1,null,["role"])),(e()(),ro(-1,null,[" to "])),(e()(),ql(137,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(-1,null,["img"])),(e()(),ro(-1,null,[". "])),(e()(),ql(140,0,null,null,3,"h2",[["id","multicolor"]],null,null,null,null,null)),(e()(),ro(-1,null,["Multicolor Icons "])),(e()(),ql(142,0,null,null,1,"small",[],null,null,null,null,null)),(e()(),ro(-1,null,["(preserving svg properties)"])),(e()(),ro(-1,null,[" If you want to include an multicolor icon, you will have to provide it form a separate sprite file (where the fill and stroke attributes are not stripped). Remember that you will not be able to overwrite styles it's via CSS. "])),(e()(),ql(145,0,null,null,6,"ul",[["class","vertical"]],null,null,null,null,null)),(e()(),ql(146,0,null,null,5,"li",[],null,null,null,null,null)),(e()(),ql(147,0,null,null,2,"div",[["class","icon-row icon-examples-6"],["style","width: 33%;"]],null,null,null,null,null)),(e()(),ql(148,0,null,null,1,"svg-icon-sprite",[],null,null,null,Qa,ja)),mi(149,573440,null,0,Pa,[Na],{src:[0,"src"],width:[1,"width"]},null),(e()(),ql(150,0,null,null,1,"pre",[["style","height: 70px;"]],null,null,null,null,null)),(e()(),ro(-1,null,["\n"])),(e()(),ql(152,0,null,null,1,"h2",[["class","headline-green"]],null,null,null,null,null)),(e()(),ro(-1,null,["Why not a Web Component?"])),(e()(),ro(-1,null,[" You are using Web Components in your Angular app? Try "])),(e()(),ql(155,0,null,null,1,"a",[["href","https://jannicz.github.io/svg-icon-sprite/"]],null,null,null,null,null)),(e()(),ro(-1,null,["this simpler but similar library"])),(e()(),ro(-1,null,[", realized as web component! "])),(e()(),ql(158,0,null,null,1,"h2",[],null,null,null,null,null)),(e()(),ro(-1,null,["Bugs"])),(e()(),ql(160,0,null,null,3,"p",[],null,null,null,null,null)),(e()(),ro(-1,null,[" Report bugs or feature requests on "])),(e()(),ql(162,0,null,null,1,"a",[["href","https://github.com/jannicz/ng-svg-icon-sprite/issues"]],null,null,null,null,null)),(e()(),ro(-1,null,["Github Issues"])),(e()(),ql(164,0,null,null,8,"ul",[],null,null,null,null,null)),(e()(),ql(165,0,null,null,3,"li",[],null,null,null,null,null)),(e()(),ql(166,0,null,null,2,"a",[["href","https://github.com/jannicz/ng-svg-icon-sprite"]],null,null,null,null,null)),(e()(),ql(167,0,null,null,1,"strong",[],null,null,null,null,null)),(e()(),ro(-1,null,["ng-svg-icon-sprite sources on Github"])),(e()(),ql(169,0,null,null,3,"li",[],null,null,null,null,null)),(e()(),ql(170,0,null,null,2,"a",[["href","https://www.npmjs.com/package/ng-svg-icon-sprite"]],null,null,null,null,null)),(e()(),ql(171,0,null,null,1,"strong",[],null,null,null,null,null)),(e()(),ro(-1,null,["ng-svg-icon-sprite package on npm"])),(e()(),ql(173,0,null,null,2,"p",[],null,null,null,null,null)),(e()(),ql(174,0,null,null,1,"small",[],null,null,null,null,null)),(e()(),ro(-1,null,["Copyright Jan Suwart, MIT license"]))],(function(e,n){e(n,6,0),e(n,23,0,"star_100x100","100px"),e(n,29,0,"assets/sprites/sprite.svg#delete_70x70","70px","65px"),e(n,46,0,"star_100x100_viewbox","styled-icon","100px"),e(n,63,0,"assets/sprites/sprite.svg#delete_70x70","70px"),e(n,70,0,"assets/sprites/sprite.svg#circle_24x24-viewbox","24px"),e(n,89,0,"delete_70x70","100px");var t=e(n,118,0,e(n,116,0,"aria-labelledby","star_100x100-title"),e(n,117,0,"role","img"));e(n,115,0,"star_100x100","100px",t,"Orange star"),e(n,149,0,"assets/sprites/image-sprite.svg#multicolor-image","250px")}),(function(e,n){var t=n.component;e(n,25,0,"{","}"),e(n,48,0,"{","{","{","{"),e(n,65,0,"{","}"),e(n,72,0,"{","}"),e(n,92,0,"{","}","{","}","{","{","}"),e(n,105,0,t.changeDone)}))}function os(e){return oo(0,[(e()(),Zl(16777216,null,null,1,null,ls)),mi(1,16384,null,0,Iu,[Yt,Wt],{ngIf:[0,"ngIf"]},null)],(function(e,n){e(n,1,0,!n.component.changed)}),null)}function us(e){return oo(0,[(e()(),ql(0,0,null,null,1,"app-root",[],null,null,null,os,is)),mi(1,114688,null,0,gu,[Na],null,null)],(function(e,n){e(n,1,0)}),null)}var as,ss=$r("app-root",gu,us,{},{},[]),cs=function(e){h(t,e);var n=g(t);function t(){return y(this,t),n.apply(this,arguments)}return _(t,[{key:"getProperty",value:function(e,n){return e[n]}},{key:"log",value:function(e){window.console&&window.console.log&&window.console.log(e)}},{key:"logGroup",value:function(e){window.console&&window.console.group&&window.console.group(e)}},{key:"logGroupEnd",value:function(){window.console&&window.console.groupEnd&&window.console.groupEnd()}},{key:"onAndCancel",value:function(e,n,t){return e.addEventListener(n,t,!1),function(){e.removeEventListener(n,t,!1)}}},{key:"dispatchEvent",value:function(e,n){e.dispatchEvent(n)}},{key:"remove",value:function(e){return e.parentNode&&e.parentNode.removeChild(e),e}},{key:"getValue",value:function(e){return e.value}},{key:"createElement",value:function(e,n){return(n=n||this.getDefaultDocument()).createElement(e)}},{key:"createHtmlDocument",value:function(){return document.implementation.createHTMLDocument("fakeTitle")}},{key:"getDefaultDocument",value:function(){return document}},{key:"isElementNode",value:function(e){return e.nodeType===Node.ELEMENT_NODE}},{key:"isShadowRoot",value:function(e){return e instanceof DocumentFragment}},{key:"getGlobalEventTarget",value:function(e,n){return"window"===n?window:"document"===n?e:"body"===n?e.body:null}},{key:"getHistory",value:function(){return window.history}},{key:"getLocation",value:function(){return window.location}},{key:"getBaseHref",value:function(e){var n,t=ds||(ds=document.querySelector("base"))?ds.getAttribute("href"):null;return null==t?null:(n=t,as||(as=document.createElement("a")),as.setAttribute("href",n),"/"===as.pathname.charAt(0)?as.pathname:"/"+as.pathname)}},{key:"resetBaseElement",value:function(){ds=null}},{key:"getUserAgent",value:function(){return window.navigator.userAgent}},{key:"performanceNow",value:function(){return window.performance&&window.performance.now?window.performance.now():(new Date).getTime()}},{key:"supportsCookies",value:function(){return!0}},{key:"getCookie",value:function(e){return function(e,n){n=encodeURIComponent(n);var t,r=c(e.split(";"));try{for(r.s();!(t=r.n()).done;){var i=t.value,l=i.indexOf("="),o=a(-1==l?[i,""]:[i.slice(0,l),i.slice(l+1)],2),u=o[1];if(o[0].trim()===n)return decodeURIComponent(u)}}catch(s){r.e(s)}finally{r.f()}return null}(document.cookie,e)}}],[{key:"makeCurrent",value:function(){var e;e=new t,yu||(yu=e)}}]),t}(function(e){h(t,e);var n=g(t);function t(){return y(this,t),n.call(this)}return _(t,[{key:"supportsDOMEvents",value:function(){return!0}}]),t}(_u)),ds=null,hs=new je("TRANSITION_ID"),fs=[{provide:zi,useFactory:function(e,n,t){return function(){t.get(Gi).donePromise.then((function(){var t=mu();Array.prototype.slice.apply(n.querySelectorAll("style[ng-transition]")).filter((function(n){return n.getAttribute("ng-transition")===e})).forEach((function(e){return t.remove(e)}))}))}},deps:[hs,wu,$n],multi:!0}],vs=function(){function e(){y(this,e)}return _(e,[{key:"addToWindow",value:function(e){Fe.getAngularTestability=function(n){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],r=e.findTestabilityInTree(n,t);if(null==r)throw new Error("Could not find testability for element.");return r},Fe.getAllAngularTestabilities=function(){return e.getAllTestabilities()},Fe.getAllAngularRootElements=function(){return e.getAllRootElements()},Fe.frameworkStabilizers||(Fe.frameworkStabilizers=[]),Fe.frameworkStabilizers.push((function(e){var n=Fe.getAllAngularTestabilities(),t=n.length,r=!1,i=function(n){r=r||n,0==--t&&e(r)};n.forEach((function(e){e.whenStable(i)}))}))}},{key:"findTestabilityInTree",value:function(e,n,t){if(null==n)return null;var r=e.getTestability(n);return null!=r?r:t?mu().isShadowRoot(n)?this.findTestabilityInTree(e,n.host,!0):this.findTestabilityInTree(e,n.parentElement,!0):null}}],[{key:"init",value:function(){var n;n=new e,wl=n}}]),e}();function ps(e,n){"undefined"!=typeof COMPILED&&COMPILED||((Fe.ng=Fe.ng||{})[e]=n)}var gs=function(){return{ApplicationRef:Vl,NgZone:sl}}();function ys(e){return Rl(e)}var ms=new je("EventManagerPlugins"),_s=function(){function e(n,t){var r=this;y(this,e),this._zone=t,this._eventNameToPlugin=new Map,n.forEach((function(e){return e.manager=r})),this._plugins=n.slice().reverse()}return _(e,[{key:"addEventListener",value:function(e,n,t){return this._findPluginFor(n).addEventListener(e,n,t)}},{key:"addGlobalEventListener",value:function(e,n,t){return this._findPluginFor(n).addGlobalEventListener(e,n,t)}},{key:"getZone",value:function(){return this._zone}},{key:"_findPluginFor",value:function(e){var n=this._eventNameToPlugin.get(e);if(n)return n;for(var t=this._plugins,r=0;r-1}}]),t}(ws),Hs=["alt","control","meta","shift"],Ls={"\b":"Backspace","\t":"Tab","\x7f":"Delete","\x1b":"Escape",Del:"Delete",Esc:"Escape",Left:"ArrowLeft",Right:"ArrowRight",Up:"ArrowUp",Down:"ArrowDown",Menu:"ContextMenu",Scroll:"ScrollLock",Win:"OS"},Us={A:"1",B:"2",C:"3",D:"4",E:"5",F:"6",G:"7",H:"8",I:"9",J:"*",K:"+",M:"-",N:".",O:"/","`":"0","\x90":"NumLock"},Bs={alt:function(e){return e.altKey},control:function(e){return e.ctrlKey},meta:function(e){return e.metaKey},shift:function(e){return e.shiftKey}},zs=function(e){h(t,e);var n=g(t);function t(e){return y(this,t),n.call(this,e)}return _(t,[{key:"supports",value:function(e){return null!=t.parseEventName(e)}},{key:"addEventListener",value:function(e,n,r){var i=t.parseEventName(n),l=t.eventCallback(i.fullKey,r,this.manager.getZone());return this.manager.getZone().runOutsideAngular((function(){return mu().onAndCancel(e,i.domEventName,l)}))}}],[{key:"parseEventName",value:function(e){var n=e.toLowerCase().split("."),r=n.shift();if(0===n.length||"keydown"!==r&&"keyup"!==r)return null;var i=t._normalizeKey(n.pop()),l="";if(Hs.forEach((function(e){var t=n.indexOf(e);t>-1&&(n.splice(t,1),l+=e+".")})),l+=i,0!=n.length||0===i.length)return null;var o={};return o.domEventName=r,o.fullKey=l,o}},{key:"getEventFullKey",value:function(e){var n="",t=function(e){var n=e.key;if(null==n){if(null==(n=e.keyIdentifier))return"Unidentified";n.startsWith("U+")&&(n=String.fromCharCode(parseInt(n.substring(2),16)),3===e.location&&Us.hasOwnProperty(n)&&(n=Us[n]))}return Ls[n]||n}(e);return" "===(t=t.toLowerCase())?t="space":"."===t&&(t="dot"),Hs.forEach((function(r){r!=t&&(0,Bs[r])(e)&&(n+=r+".")})),n+=t}},{key:"eventCallback",value:function(e,n,r){return function(i){t.getEventFullKey(i)===e&&r.runGuarded((function(){return n(i)}))}}},{key:"_normalizeKey",value:function(e){switch(e){case"esc":return"escape";default:return e}}}]),t}(ws),Gs=function(){var e=function e(){y(this,e)};return e.\u0275prov=xe({factory:function(){return qe(Zs)},token:e,providedIn:"root"}),e}(),Zs=function(){var e=function(e){h(t,e);var n=g(t);function t(e){var r;return y(this,t),(r=n.call(this))._doc=e,r}return _(t,[{key:"sanitize",value:function(e,n){if(null==n)return null;switch(e){case Gn.NONE:return n;case Gn.HTML:return yn(n,"HTML")?gn(n):function(e,n){var t=null;try{On=On||function(e){return function(){try{return!!(new window.DOMParser).parseFromString("","text/html")}catch(e){return!1}}()?new kn:new Cn(e)}(e);var r=n?String(n):"";t=On.getInertBodyElement(r);var i=5,l=r;do{if(0===i)throw new Error("Failed to sanitize html because the input is unstable");i--,r=l,l=t.innerHTML,t=On.getInertBodyElement(r)}while(r!==l);var o=new Hn,u=o.sanitizeChildren(zn(t)||t);return bn()&&o.sanitizedSomething&&console.warn("WARNING: sanitizing HTML stripped some content, see http://g.co/ng/security#xss"),u}finally{if(t)for(var a=zn(t)||t;a.firstChild;)a.removeChild(a.firstChild)}}(this._doc,String(n));case Gn.STYLE:return yn(n,"Style")?gn(n):n;case Gn.SCRIPT:if(yn(n,"Script"))return gn(n);throw new Error("unsafe value used in a script context");case Gn.URL:return mn(n),yn(n,"URL")?gn(n):Tn(String(n));case Gn.RESOURCE_URL:if(yn(n,"ResourceURL"))return gn(n);throw new Error("unsafe value used in a resource URL context (see http://g.co/ng/security#xss)");default:throw new Error("Unexpected SecurityContext ".concat(e," (see http://g.co/ng/security#xss)"))}}},{key:"bypassSecurityTrustHtml",value:function(e){return new dn(e)}},{key:"bypassSecurityTrustStyle",value:function(e){return new hn(e)}},{key:"bypassSecurityTrustScript",value:function(e){return new fn(e)}},{key:"bypassSecurityTrustUrl",value:function(e){return new vn(e)}},{key:"bypassSecurityTrustResourceUrl",value:function(e){return new pn(e)}}]),t}(Gs);return e.\u0275prov=xe({factory:function(){return e=qe(He),new Zs(e.get(wu));var e},token:e,providedIn:"root"}),e}();function qs(){return new sn}var Qs=El(Hl,"browser",[{provide:Ki,useValue:"browser"},{provide:Wi,useValue:function(){cs.makeCurrent(),vs.init()},multi:!0},{provide:wu,useFactory:function(){return document,document},deps:[]}]),Ws=function(){function e(n){if(y(this,e),n)throw new Error("BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.")}return _(e,null,[{key:"withServerTransition",value:function(n){return{ngModule:e,providers:[{provide:Zi,useValue:n.appId},{provide:hs,useExisting:Zi},fs]}}}]),e}();"undefined"!=typeof window&&window;var Ks=fu(pu,[gu],(function(e){return function(e){for(var n={},t=[],r=null,i=0;ie.length)&&(n=e.length);for(var t=0,r=new Array(n);t=e.length?{done:!0}:{done:!1,value:e[n++]}},e:function(e){throw e},f:t}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var r,i,l=!0,o=!1;return{s:function(){r=e[Symbol.iterator]()},n:function(){var e=r.next();return l=e.done,e},e:function(e){o=!0,i=e},f:function(){try{l||null==r.return||r.return()}finally{if(o)throw i}}}}function d(e,n){return(d=Object.setPrototypeOf||function(e,n){return e.__proto__=n,e})(e,n)}function h(e,n){if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(n&&n.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),n&&d(e,n)}function f(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}function v(e){return(v="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function p(e,n){return!n||"object"!==v(n)&&"function"!=typeof n?l(e):n}function g(e){var n=f();return function(){var t,i=r(e);if(n){var l=r(this).constructor;t=Reflect.construct(i,arguments,l)}else t=i.apply(this,arguments);return p(this,t)}}function y(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}function m(e,n){for(var t=0;t2&&void 0!==arguments[2]?arguments[2]:Number.POSITIVE_INFINITY;return"function"==typeof n?function(r){return r.pipe(ie((function(t,r){return ne(e(t,r)).pipe(Z((function(e,i){return n(t,e,r,i)})))}),t))}:("number"==typeof n&&(t=n),function(n){return n.lift(new le(e,t))})}var le=function(){function e(n){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:Number.POSITIVE_INFINITY;y(this,e),this.project=n,this.concurrent=t}return _(e,[{key:"call",value:function(e,n){return n.subscribe(new oe(e,this.project,this.concurrent))}}]),e}(),oe=function(e){h(t,e);var n=g(t);function t(e,r){var i,l=arguments.length>2&&void 0!==arguments[2]?arguments[2]:Number.POSITIVE_INFINITY;return y(this,t),(i=n.call(this,e)).project=r,i.concurrent=l,i.hasCompleted=!1,i.buffer=[],i.active=0,i.index=0,i}return _(t,[{key:"_next",value:function(e){this.active0?this._next(e.shift()):0===this.active&&this.hasCompleted&&this.destination.complete()}}]),t}(re);function ue(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:Number.POSITIVE_INFINITY;return ie(P,e)}function ae(e,n){return n?ee(e,n):new F(W(e))}function se(){return function(e){return e.lift(new ce(e))}}var ce=function(){function e(n){y(this,e),this.connectable=n}return _(e,[{key:"call",value:function(e,n){var t=this.connectable;t._refCount++;var r=new de(e,t),i=n.subscribe(r);return r.closed||(r.connection=t.connect()),i}}]),e}(),de=function(e){h(t,e);var n=g(t);function t(e,r){var i;return y(this,t),(i=n.call(this,e)).connectable=r,i}return _(t,[{key:"_unsubscribe",value:function(){var e=this.connectable;if(e){this.connectable=null;var n=e._refCount;if(n<=0)this.connection=null;else if(e._refCount=n-1,n>1)this.connection=null;else{var t=this.connection,r=e._connection;this.connection=null,!r||t&&r!==t||r.unsubscribe()}}else this.connection=null}}]),t}(D),he=function(e){h(t,e);var n=g(t);function t(e,r){var i;return y(this,t),(i=n.call(this)).source=e,i.subjectFactory=r,i._refCount=0,i._isComplete=!1,i}return _(t,[{key:"_subscribe",value:function(e){return this.getSubject().subscribe(e)}},{key:"getSubject",value:function(){var e=this._subject;return e&&!e.isStopped||(this._subject=this.subjectFactory()),this._subject}},{key:"connect",value:function(){var e=this._connection;return e||(this._isComplete=!1,(e=this._connection=new E).add(this.source.subscribe(new ve(this.getSubject(),this))),e.closed&&(this._connection=null,e=E.EMPTY)),e}},{key:"refCount",value:function(){return se()(this)}}]),t}(F),fe=function(){var e=he.prototype;return{operator:{value:null},_refCount:{value:0,writable:!0},_subject:{value:null,writable:!0},_connection:{value:null,writable:!0},_subscribe:{value:e._subscribe},_isComplete:{value:e._isComplete,writable:!0},getSubject:{value:e.getSubject},connect:{value:e.connect},refCount:{value:e.refCount}}}(),ve=function(e){h(t,e);var n=g(t);function t(e,r){var i;return y(this,t),(i=n.call(this,e)).connectable=r,i}return _(t,[{key:"_error",value:function(e){this._unsubscribe(),i(r(t.prototype),"_error",this).call(this,e)}},{key:"_complete",value:function(){this.connectable._isComplete=!0,this._unsubscribe(),i(r(t.prototype),"_complete",this).call(this)}},{key:"_unsubscribe",value:function(){var e=this.connectable;if(e){this.connectable=null;var n=e._connection;e._refCount=0,e._subject=null,e._connection=null,n&&n.unsubscribe()}}}]),t}(B);function pe(){return new U}var ge="__parameters__";function ye(e,n,t){return function(){var r=function(e){return function(){if(e){var n=e.apply(void 0,arguments);for(var t in n)this[t]=n[t]}}}(n);function i(){for(var e=arguments.length,n=new Array(e),t=0;t1&&void 0!==arguments[1]?arguments[1]:ke.Default;if(void 0===ze)throw new Error("inject() must be called from an injection context");return null===ze?Qe(e,void 0,n):ze.get(e,n&ke.Optional?null:void 0,n)}function qe(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:ke.Default;return Ze(De(e),n)}function Qe(e,n,t){var r=Ee(e);if(r&&"root"==r.providedIn)return void 0===r.value?r.value=r.factory():r.value;if(t&ke.Optional)return null;if(void 0!==n)return n;throw new Error("Injector: NOT_FOUND [".concat(Oe(e),"]"))}var We=function(){function e(){y(this,e)}return _(e,[{key:"get",value:function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:Le;if(n===Le){var t=new Error("NullInjectorError: No provider for ".concat(Oe(e),"!"));throw t.name="NullInjectorError",t}return n}}]),e}();function Ye(e,n,t,r){var i=e.ngTempTokenPath;throw n.__source&&i.unshift(n.__source),e.message=Xe("\n"+e.message,i,t,r),e.ngTokenPath=i,e.ngTempTokenPath=null,e}function Xe(e,n,t){var r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null;e=e&&"\n"===e.charAt(0)&&"\u0275"==e.charAt(1)?e.substr(2):e;var i=Oe(n);if(Array.isArray(n))i=n.map(Oe).join(" -> ");else if("object"==typeof n){var l=[];for(var o in n)if(n.hasOwnProperty(o)){var u=n[o];l.push(o+":"+("string"==typeof u?JSON.stringify(u):Oe(u)))}i="{".concat(l.join(", "),"}")}return"".concat(t).concat(r?"("+r+")":"","[").concat(i,"]: ").concat(e.replace(Be,"\n "))}var Ke=function e(){y(this,e)},$e=function e(){y(this,e)};function Je(e,n,t){n>=e.length?e.push(t):e.splice(n,0,t)}function en(e,n){return n>=e.length-1?e.pop():e.splice(n,1)[0]}function nn(e,n){for(var t=[],r=0;r1?n-1:0),r=1;r";try{var n=(new window.DOMParser).parseFromString(e,"text/html").body;return n.removeChild(n.firstChild),n}catch(t){return null}}}]),e}(),Cn=function(){function e(n){if(y(this,e),this.defaultDoc=n,this.inertDocument=this.defaultDoc.implementation.createHTMLDocument("sanitization-inert"),null==this.inertDocument.body){var t=this.inertDocument.createElement("html");this.inertDocument.appendChild(t);var r=this.inertDocument.createElement("body");t.appendChild(r)}}return _(e,[{key:"getInertBodyElement",value:function(e){var n=this.inertDocument.createElement("template");if("content"in n)return n.innerHTML=e,n;var t=this.inertDocument.createElement("body");return t.innerHTML=e,this.defaultDoc.documentMode&&this.stripCustomNsAttrs(t),t}},{key:"stripCustomNsAttrs",value:function(e){for(var n=e.attributes,t=n.length-1;0"),!0}},{key:"endElement",value:function(e){var n=e.nodeName.toLowerCase();Nn.hasOwnProperty(n)&&!Vn.hasOwnProperty(n)&&(this.buf.push(""))}},{key:"chars",value:function(e){this.buf.push(Un(e))}},{key:"checkClobberedElement",value:function(e,n){if(n&&(e.compareDocumentPosition(n)&Node.DOCUMENT_POSITION_CONTAINED_BY)===Node.DOCUMENT_POSITION_CONTAINED_BY)throw new Error("Failed to sanitize html because the element is clobbered: ".concat(e.outerHTML));return n}}]),e}(),Ln=/[\uD800-\uDBFF][\uDC00-\uDFFF]/g,Bn=/([^\#-~ |!])/g;function Un(e){return e.replace(/&/g,"&").replace(Ln,(function(e){return"&#"+(1024*(e.charCodeAt(0)-55296)+(e.charCodeAt(1)-56320)+65536)+";"})).replace(Bn,(function(e){return"&#"+e.charCodeAt(0)+";"})).replace(//g,">")}function zn(e){return"content"in e&&function(e){return e.nodeType===Node.ELEMENT_NODE&&"TEMPLATE"===e.nodeName}(e)?e.content:null}var Gn=function(e){return e[e.NONE=0]="NONE",e[e.HTML=1]="HTML",e[e.STYLE=2]="STYLE",e[e.SCRIPT=3]="SCRIPT",e[e.URL=4]="URL",e[e.RESOURCE_URL=5]="RESOURCE_URL",e}({}),Zn=/([A-Z])/g;function qn(e){try{return null!=e?e.toString().slice(0,30):e}catch(n){return"[ERROR] Exception while trying to serialize the value"}}var Qn=function(){var e=function e(){y(this,e)};return e.__NG_ELEMENT_ID__=function(){return Wn()},e}(),Wn=function(){},Yn=new je("Set Injector scope."),Xn=function(e,n,t){return new tt(e,n,t)},Kn=function(){var e=function(){function e(){y(this,e)}return _(e,null,[{key:"create",value:function(e,n){return Array.isArray(e)?Xn(e,n,""):Xn(e.providers,e.parent,e.name||"")}}]),e}();return e.THROW_IF_NOT_FOUND=Le,e.NULL=new We,e.\u0275prov=xe({token:e,providedIn:"any",factory:function(){return qe(He)}}),e.__NG_ELEMENT_ID__=-1,e}(),$n=function(e){return e},Jn=[],et=$n,nt=function(){return Array.prototype.slice.call(arguments)},tt=function(){function e(n){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:Kn.NULL,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;y(this,e),this.parent=t,this.source=r;var i=this._records=new Map;i.set(Kn,{token:Kn,fn:$n,deps:Jn,value:this,useNew:!1}),i.set(He,{token:He,fn:$n,deps:Jn,value:this,useNew:!1}),this.scope=lt(i,n)}return _(e,[{key:"get",value:function(e,n){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:ke.Default,r=this._records,i=r.get(e);if(void 0===i){var l=Ee(e);if(l){var o=l&&l.providedIn;("any"===o||null!=o&&o===this.scope)&&r.set(e,i=rt({provide:e,useFactory:l.factory,deps:Jn}))}void 0===i&&r.set(e,null)}var u=Ge(this);try{return ot(e,i,r,this.parent,n,t)}catch(a){return Ye(a,e,"StaticInjectorError",this.source)}finally{Ge(u)}}},{key:"toString",value:function(){var e=[];return this._records.forEach((function(n,t){return e.push(Oe(t))})),"StaticInjector[".concat(e.join(", "),"]")}}]),e}();function rt(e){var n=function(e){var n=Jn,t=e.deps;if(t&&t.length){n=[];for(var r=0;r2&&void 0!==arguments[2]?arguments[2]:Kn.THROW_IF_NOT_FOUND,r=Ge(e);try{if(8&n.flags)return n.token;if(2&n.flags&&(t=null),1&n.flags)return e._parent.get(n.token,t);var i=n.tokenKey;switch(i){case Lr:case Br:case Ur:return e}var l,o=e._def.providersByKey[i];if(o){var u=e._providers[o.index];return void 0===u&&(u=e._providers[o.index]=qr(e,o)),u===Hr?void 0:u}if((l=Ee(n.token))&&Zr(e,l)){var a=e._providers.length;return e._def.providers[a]=e._def.providersByKey[n.tokenKey]={flags:5120,value:l.factory,deps:[],index:a,token:n.token},e._providers[a]=Hr,e._providers[a]=qr(e,e._def.providersByKey[n.tokenKey])}return 4&n.flags?t:e._parent.get(n.token,t)}finally{Ge(r)}}function Zr(e,n){var t=n.providedIn;return null!=t&&("any"===t||t===e._def.scope||function(e,n){return e._def.modules.indexOf(n)>-1}(e,t))}function qr(e,n){var t;switch(201347067&n.flags){case 512:t=function(e,n,t){var r=t.length;switch(r){case 0:return new n;case 1:return new n(Gr(e,t[0]));case 2:return new n(Gr(e,t[0]),Gr(e,t[1]));case 3:return new n(Gr(e,t[0]),Gr(e,t[1]),Gr(e,t[2]));default:for(var i=[],l=0;l=t.length)&&(n=t.length-1),n<0)return null;var r=t[n];return r.viewContainerParent=null,en(t,n),ar.dirtyParentQueries(r),Yr(r),r}function Wr(e,n,t){var r=n?Cr(n,n.def.lastRenderRootNode):e.renderElement,i=t.renderer.parentNode(r),l=t.renderer.nextSibling(r);Ar(t,2,i,l,void 0)}function Yr(e){Ar(e,3,null,null,void 0)}var Xr={};function Kr(e,n,t,r,i,l){return new $r(e,n,t,r,i,l)}var $r=function(e){h(t,e);var n=g(t);function t(e,r,i,l,o,u){var a;return y(this,t),(a=n.call(this)).selector=e,a.componentType=r,a._inputs=l,a._outputs=o,a.ngContentSelectors=u,a.viewDefFactory=i,a}return _(t,[{key:"create",value:function(e,n,t,r){if(!r)throw new Error("ngModule should be provided");var i=Vr(this.viewDefFactory),l=i.nodes[0].element.componentProvider.nodeIndex,o=ar.createRootView(e,n||[],t,i,r,Xr),u=lr(o,l).instance;return t&&o.renderer.setAttribute(ir(o,0).renderElement,"ng-version",Dt.full),new Jr(o,new ri(o),u)}},{key:"inputs",get:function(){var e=[],n=this._inputs;for(var t in n)e.push({propName:t,templateName:n[t]});return e}},{key:"outputs",get:function(){var e=[];for(var n in this._outputs)e.push({propName:n,templateName:this._outputs[n]});return e}}]),t}(yt),Jr=function(e){h(t,e);var n=g(t);function t(e,r,i){var l;return y(this,t),(l=n.call(this))._view=e,l._viewRef=r,l._component=i,l._elDef=l._view.def.nodes[0],l.hostView=r,l.changeDetectorRef=r,l.instance=i,l}return _(t,[{key:"destroy",value:function(){this._viewRef.destroy()}},{key:"onDestroy",value:function(e){this._viewRef.onDestroy(e)}},{key:"location",get:function(){return new Et(ir(this._view,this._elDef.nodeIndex).renderElement)}},{key:"injector",get:function(){return new ui(this._view,this._elDef)}},{key:"componentType",get:function(){return this._component.constructor}}]),t}(gt);function ei(e,n,t){return new ni(e,n,t)}var ni=function(){function e(n,t,r){y(this,e),this._view=n,this._elDef=t,this._data=r,this._embeddedViews=[]}return _(e,[{key:"clear",value:function(){for(var e=this._embeddedViews.length-1;e>=0;e--){var n=Qr(this._data,e);ar.destroyView(n)}}},{key:"get",value:function(e){var n=this._embeddedViews[e];if(n){var t=new ri(n);return t.attachToViewContainerRef(this),t}return null}},{key:"createEmbeddedView",value:function(e,n,t){var r=e.createEmbeddedView(n||{});return this.insert(r,t),r}},{key:"createComponent",value:function(e,n,t,r,i){var l=t||this.parentInjector;i||e instanceof Ct||(i=l.get(Ke));var o=e.create(l,r,void 0,i);return this.insert(o.hostView,n),o}},{key:"insert",value:function(e,n){if(e.destroyed)throw new Error("Cannot insert a destroyed View in a ViewContainer!");var t,r,i,l,o=e;return l=(t=this._data).viewContainer._embeddedViews,null==(r=n)&&(r=l.length),(i=o._view).viewContainerParent=this._view,Je(l,r,i),function(e,n){var t=br(n);if(t&&t!==e&&!(16&n.state)){n.state|=16;var r=t.template._projectedViews;r||(r=t.template._projectedViews=[]),r.push(n),function(e,n){if(!(4&n.flags)){e.nodeFlags|=4,n.flags|=4;for(var t=n.parent;t;)t.childFlags|=4,t=t.parent}}(n.parent.def,n.parentNodeDef)}}(t,i),ar.dirtyParentQueries(i),Wr(t,r>0?l[r-1]:null,i),o.attachToViewContainerRef(this),e}},{key:"move",value:function(e,n){if(e.destroyed)throw new Error("Cannot move a destroyed View in a ViewContainer!");var t,r,i,l,o,u=this._embeddedViews.indexOf(e._view);return i=n,o=(l=(t=this._data).viewContainer._embeddedViews)[r=u],en(l,r),null==i&&(i=l.length),Je(l,i,o),ar.dirtyParentQueries(o),Yr(o),Wr(t,i>0?l[i-1]:null,o),e}},{key:"indexOf",value:function(e){return this._embeddedViews.indexOf(e._view)}},{key:"remove",value:function(e){var n=Qr(this._data,e);n&&ar.destroyView(n)}},{key:"detach",value:function(e){var n=Qr(this._data,e);return n?new ri(n):null}},{key:"element",get:function(){return new Et(this._data.renderElement)}},{key:"injector",get:function(){return new ui(this._view,this._elDef)}},{key:"parentInjector",get:function(){for(var e=this._view,n=this._elDef.parent;!n&&e;)n=kr(e),e=e.parent;return e?new ui(e,n):new ui(this._view,null)}},{key:"length",get:function(){return this._embeddedViews.length}}]),e}();function ti(e){return new ri(e)}var ri=function(){function e(n){y(this,e),this._view=n,this._viewContainerRef=null,this._appRef=null}return _(e,[{key:"markForCheck",value:function(){mr(this._view)}},{key:"detach",value:function(){this._view.state&=-5}},{key:"detectChanges",value:function(){var e=this._view.root.rendererFactory;e.begin&&e.begin();try{ar.checkAndUpdateView(this._view)}finally{e.end&&e.end()}}},{key:"checkNoChanges",value:function(){ar.checkNoChangesView(this._view)}},{key:"reattach",value:function(){this._view.state|=4}},{key:"onDestroy",value:function(e){this._view.disposables||(this._view.disposables=[]),this._view.disposables.push(e)}},{key:"destroy",value:function(){this._appRef?this._appRef.detachView(this):this._viewContainerRef&&this._viewContainerRef.detach(this._viewContainerRef.indexOf(this)),ar.destroyView(this._view)}},{key:"detachFromAppRef",value:function(){this._appRef=null,Yr(this._view),ar.dirtyParentQueries(this._view)}},{key:"attachToAppRef",value:function(e){if(this._viewContainerRef)throw new Error("This view is already attached to a ViewContainer!");this._appRef=e}},{key:"attachToViewContainerRef",value:function(e){if(this._appRef)throw new Error("This view is already attached directly to the ApplicationRef!");this._viewContainerRef=e}},{key:"rootNodes",get:function(){return Ar(this._view,0,void 0,void 0,e=[]),e;var e}},{key:"context",get:function(){return this._view.context}},{key:"destroyed",get:function(){return 0!=(128&this._view.state)}}]),e}();function ii(e,n){return new li(e,n)}var li=function(e){h(t,e);var n=g(t);function t(e,r){var i;return y(this,t),(i=n.call(this))._parentView=e,i._def=r,i}return _(t,[{key:"createEmbeddedView",value:function(e){return new ri(ar.createEmbeddedView(this._parentView,this._def,this._def.element.template,e))}},{key:"elementRef",get:function(){return new Et(ir(this._parentView,this._def.nodeIndex).renderElement)}}]),t}(Wt);function oi(e,n){return new ui(e,n)}var ui=function(){function e(n,t){y(this,e),this.view=n,this.elDef=t}return _(e,[{key:"get",value:function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:Kn.THROW_IF_NOT_FOUND,t=!!this.elDef&&0!=(33554432&this.elDef.flags);return ar.resolveDep(this.view,this.elDef,t,{flags:0,token:e,tokenKey:dr(e)},n)}}]),e}();function ai(e,n){var t=e.def.nodes[n];if(1&t.flags){var r=ir(e,t.nodeIndex);return t.element.template?r.template:r.renderElement}if(2&t.flags)return rr(e,t.nodeIndex).renderText;if(20240&t.flags)return lr(e,t.nodeIndex).instance;throw new Error("Illegal state: read nodeValue for node index ".concat(n))}function si(e,n,t,r){return new ci(e,n,t,r)}var ci=function(){function e(n,t,r,i){y(this,e),this._moduleType=n,this._parent=t,this._bootstrapComponents=r,this._def=i,this._destroyListeners=[],this._destroyed=!1,this.injector=this,function(e){for(var n=e._def,t=e._providers=nn(n.providers.length),r=0;r1&&void 0!==arguments[1]?arguments[1]:Kn.THROW_IF_NOT_FOUND,t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:ke.Default,r=0;return t&ke.SkipSelf?r|=1:t&ke.Self&&(r|=4),Gr(this,{token:e,tokenKey:dr(e),flags:r},n)}},{key:"destroy",value:function(){if(this._destroyed)throw new Error("The ng module ".concat(Oe(this.instance.constructor)," has already been destroyed."));this._destroyed=!0,function(e,n){for(var t=e._def,r=new Set,i=0;i0,n.provider.value,n.provider.deps);if(n.outputs.length)for(var r=0;r0,r=n.provider;switch(201347067&n.flags){case 512:return Ti(e,n.parent,t,r.value,r.deps);case 1024:return function(e,n,t,r,i){var l=i.length;switch(l){case 0:return r();case 1:return r(Si(e,n,t,i[0]));case 2:return r(Si(e,n,t,i[0]),Si(e,n,t,i[1]));case 3:return r(Si(e,n,t,i[0]),Si(e,n,t,i[1]),Si(e,n,t,i[2]));default:for(var o=[],u=0;u4&&void 0!==arguments[4]?arguments[4]:Kn.THROW_IF_NOT_FOUND;if(8&r.flags)return r.token;var l=e;2&r.flags&&(i=null);var o=r.tokenKey;o===pi&&(t=!(!n||!n.element.componentView)),n&&1&r.flags&&(t=!1,n=n.parent);for(var u=e;u;){if(n)switch(o){case di:var a=Oi(u,n,t);return a.renderer;case hi:return new Et(ir(u,n.nodeIndex).renderElement);case fi:return ir(u,n.nodeIndex).viewContainer;case vi:if(n.element.template)return ir(u,n.nodeIndex).template;break;case pi:var s=Oi(u,n,t);return ti(s);case gi:case yi:return oi(u,n);default:var c=(t?n.element.allProviders:n.element.publicProviders)[o];if(c){var d=lr(u,c.nodeIndex);return d||(d={instance:Ei(u,c)},u.nodes[c.nodeIndex]=d),d.instance}}t=xr(u),n=kr(u),u=u.parent,4&r.flags&&(u=null)}var h=l.root.injector.get(r.token,Ii);return h!==Ii||i===Ii?h:l.root.ngModule.injector.get(r.token,i)}function Oi(e,n,t){var r;if(t)r=ir(e,n.nodeIndex).componentView;else for(r=e;r.parent&&!xr(r);)r=r.parent;return r}function Vi(e,n,t,r,i,l){if(32768&t.flags){var o=ir(e,t.parent.nodeIndex).componentView;2&o.def.flags&&(o.state|=8)}if(n.instance[t.bindings[r].name]=i,524288&t.flags){l=l||{};var u=dt.unwrap(e.oldValues[t.bindingIndex+r]);l[t.bindings[r].nonMinifiedName]=new rn(u,i,0!=(2&e.state))}return e.oldValues[t.bindingIndex+r]=i,l}function Ai(e,n){if(e.def.nodeFlags&n)for(var t=e.def.nodes,r=0,i=0;i0&&void 0!==arguments[0]&&arguments[0];return y(this,t),(e=n.call(this)).__isAsync=r,e}return _(t,[{key:"emit",value:function(e){i(r(t.prototype),"next",this).call(this,e)}},{key:"subscribe",value:function(e,n,l){var o,u=function(e){return null},a=function(){return null};e&&"object"==typeof e?(o=this.__isAsync?function(n){setTimeout((function(){return e.next(n)}))}:function(n){e.next(n)},e.error&&(u=this.__isAsync?function(n){setTimeout((function(){return e.error(n)}))}:function(n){e.error(n)}),e.complete&&(a=this.__isAsync?function(){setTimeout((function(){return e.complete()}))}:function(){e.complete()})):(o=this.__isAsync?function(n){setTimeout((function(){return e(n)}))}:function(n){e(n)},n&&(u=this.__isAsync?function(e){setTimeout((function(){return n(e)}))}:function(e){n(e)}),l&&(a=this.__isAsync?function(){setTimeout((function(){return l()}))}:function(){l()}));var s=i(r(t.prototype),"subscribe",this).call(this,o,u,a);return e instanceof E&&e.add(s),s}}]),t}(U);function Bi(){return this._results[st()]()}var Ui=function(){function e(){y(this,e),this.dirty=!0,this._results=[],this.changes=new Li,this.length=0;var n=st(),t=e.prototype;t[n]||(t[n]=Bi)}return _(e,[{key:"map",value:function(e){return this._results.map(e)}},{key:"filter",value:function(e){return this._results.filter(e)}},{key:"find",value:function(e){return this._results.find(e)}},{key:"reduce",value:function(e,n){return this._results.reduce(e,n)}},{key:"forEach",value:function(e){this._results.forEach(e)}},{key:"some",value:function(e){return this._results.some(e)}},{key:"toArray",value:function(){return this._results.slice()}},{key:"toString",value:function(){return this._results.toString()}},{key:"reset",value:function(e){this._results=function e(n,t){void 0===t&&(t=n);for(var r=0;r0&&(i=setTimeout((function(){r._callbacks=r._callbacks.filter((function(e){return e.timeoutId!==i})),e(r._didWork,r.getPendingTasks())}),n)),this._callbacks.push({doneCb:e,timeoutId:i,updateCb:t})}},{key:"whenStable",value:function(e,n,t){if(t&&!this.taskTrackingZone)throw new Error('Task tracking zone is required when passing an update callback to whenStable(). Is "zone.js/dist/task-tracking.js" loaded?');this.addCallback(e,n,t),this._runCallbacksIfReady()}},{key:"getPendingRequestCount",value:function(){return this._pendingCount}},{key:"findProviders",value:function(e,n,t){return[]}}]),e}(),_l=function(){function e(){y(this,e),this._applications=new Map,wl.addToWindow(this)}return _(e,[{key:"registerApplication",value:function(e,n){this._applications.set(e,n)}},{key:"unregisterApplication",value:function(e){this._applications.delete(e)}},{key:"unregisterAllApplications",value:function(){this._applications.clear()}},{key:"getTestability",value:function(e){return this._applications.get(e)||null}},{key:"getAllTestabilities",value:function(){return Array.from(this._applications.values())}},{key:"getAllRootElements",value:function(){return Array.from(this._applications.keys())}},{key:"findTestabilityInTree",value:function(e){var n=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];return wl.findTestabilityInTree(this,e,n)}}]),e}(),wl=new(function(){function e(){y(this,e)}return _(e,[{key:"addToWindow",value:function(e){}},{key:"findTestabilityInTree",value:function(e,n,t){return null}}]),e}()),bl=function(e,n,t){return e.get(ol).createCompiler([n]).compileModuleAsync(t)},kl=new je("AllowMultipleToken"),Cl=function e(n,t){y(this,e),this.name=n,this.token=t};function xl(e){if(gl&&!gl.destroyed&&!gl.injector.get(kl,!1))throw new Error("There can be only one platform. Destroy the previous one to create a new one.");gl=e.get(Sl);var n=e.get(Wi,null);return n&&n.forEach((function(e){return e()})),gl}function El(e,n){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[],r="Platform: ".concat(n),i=new je(r);return function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],l=Il();if(!l||l.injector.get(kl,!1))if(e)e(t.concat(n).concat({provide:i,useValue:!0}));else{var o=t.concat(n).concat({provide:i,useValue:!0},{provide:Yn,useValue:"platform"});xl(Kn.create({providers:o,name:r}))}return Tl(i)}}function Tl(e){var n=Il();if(!n)throw new Error("No platform exists!");if(!n.injector.get(e,null))throw new Error("A platform with a different configuration has been created. Please destroy it first.");return n}function Il(){return gl&&!gl.destroyed?gl:null}var Sl=function(){function e(n){y(this,e),this._injector=n,this._modules=[],this._destroyListeners=[],this._destroyed=!1}return _(e,[{key:"bootstrapModuleFactory",value:function(e,n){var t,r,i=this,l=(r=n&&n.ngZoneEventCoalescing||!1,"noop"===(t=n?n.ngZone:void 0)?new yl:("zone.js"===t?void 0:t)||new sl({enableLongStackTrace:bn(),shouldCoalesceEventChangeDetection:r})),o=[{provide:sl,useValue:l}];return l.run((function(){var n=Kn.create({providers:o,parent:i.injector,name:e.moduleType.name}),t=e.create(n),r=t.injector.get(sn,null);if(!r)throw new Error("No ErrorHandler. Is platform module (BrowserModule) included?");return t.onDestroy((function(){return Al(i._modules,t)})),l.runOutsideAngular((function(){return l.onError.subscribe({next:function(e){r.handleError(e)}})})),function(e,n,r){try{var l=((o=t.injector.get(Gi)).runInitializers(),o.donePromise.then((function(){return i._moduleDoBootstrap(t),t})));return vt(l)?l.catch((function(t){throw n.runOutsideAngular((function(){return e.handleError(t)})),t})):l}catch(u){throw n.runOutsideAngular((function(){return e.handleError(u)})),u}var o}(r,l)}))}},{key:"bootstrapModule",value:function(e){var n=this,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],r=Ol({},t);return bl(this.injector,r,e).then((function(e){return n.bootstrapModuleFactory(e,r)}))}},{key:"_moduleDoBootstrap",value:function(e){var n=e.injector.get(Vl);if(e._bootstrapComponents.length>0)e._bootstrapComponents.forEach((function(e){return n.bootstrap(e)}));else{if(!e.instance.ngDoBootstrap)throw new Error("The module ".concat(Oe(e.instance.constructor),' was bootstrapped, but it does not declare "@NgModule.bootstrap" components nor a "ngDoBootstrap" method. ')+"Please define one of these.");e.instance.ngDoBootstrap(n)}this._modules.push(e)}},{key:"onDestroy",value:function(e){this._destroyListeners.push(e)}},{key:"destroy",value:function(){if(this._destroyed)throw new Error("The platform has already been destroyed!");this._modules.slice().forEach((function(e){return e.destroy()})),this._destroyListeners.forEach((function(e){return e()})),this._destroyed=!0}},{key:"injector",get:function(){return this._injector}},{key:"destroyed",get:function(){return this._destroyed}}]),e}();function Ol(e,n){return Array.isArray(n)?n.reduce(Ol,e):Object.assign(Object.assign({},e),n)}var Vl=function(){function e(n,t,r,i,l,o){var u=this;y(this,e),this._zone=n,this._console=t,this._injector=r,this._exceptionHandler=i,this._componentFactoryResolver=l,this._initStatus=o,this._bootstrapListeners=[],this._views=[],this._runningTick=!1,this._enforceNoNewChanges=!1,this._stable=!0,this.componentTypes=[],this.components=[],this._enforceNoNewChanges=bn(),this._zone.onMicrotaskEmpty.subscribe({next:function(){u._zone.run((function(){u.tick()}))}});var a=new F((function(e){u._stable=u._zone.isStable&&!u._zone.hasPendingMacrotasks&&!u._zone.hasPendingMicrotasks,u._zone.runOutsideAngular((function(){e.next(u._stable),e.complete()}))})),s=new F((function(e){var n;u._zone.runOutsideAngular((function(){n=u._zone.onStable.subscribe((function(){sl.assertNotInAngularZone(),al((function(){u._stable||u._zone.hasPendingMacrotasks||u._zone.hasPendingMicrotasks||(u._stable=!0,e.next(!0))}))}))}));var t=u._zone.onUnstable.subscribe((function(){sl.assertInAngularZone(),u._stable&&(u._stable=!1,u._zone.runOutsideAngular((function(){e.next(!1)})))}));return function(){n.unsubscribe(),t.unsubscribe()}}));this.isStable=function(){for(var e=Number.POSITIVE_INFINITY,n=null,t=arguments.length,r=new Array(t),i=0;i1&&"number"==typeof r[r.length-1]&&(e=r.pop())):"number"==typeof l&&(e=r.pop()),null===n&&1===r.length&&r[0]instanceof F?r[0]:ue(e)(ae(r,n))}(a,s.pipe((function(e){return se()((n=pe,function(e){var t;t="function"==typeof n?n:function(){return n};var r=Object.create(e,fe);return r.source=e,r.subjectFactory=t,r})(e));var n})))}return _(e,[{key:"bootstrap",value:function(e,n){var t,r=this;if(!this._initStatus.done)throw new Error("Cannot bootstrap as there are still asynchronous initializers running. Bootstrap components in the `ngDoBootstrap` method of the root module.");t=e instanceof yt?e:this._componentFactoryResolver.resolveComponentFactory(e),this.componentTypes.push(t.componentType);var i=t instanceof Ct?void 0:this._injector.get(Ke),l=t.create(Kn.NULL,[],n||t.selector,i);l.onDestroy((function(){r._unloadComponent(l)}));var o=l.injector.get(ml,null);return o&&l.injector.get(_l).registerApplication(l.location.nativeElement,o),this._loadComponent(l),bn()&&this._console.log("Angular is running in development mode. Call enableProdMode() to enable production mode."),l}},{key:"tick",value:function(){var e=this;if(this._runningTick)throw new Error("ApplicationRef.tick is called recursively");try{this._runningTick=!0;var n,t=c(this._views);try{for(t.s();!(n=t.n()).done;)n.value.detectChanges()}catch(l){t.e(l)}finally{t.f()}if(this._enforceNoNewChanges){var r,i=c(this._views);try{for(i.s();!(r=i.n()).done;)r.value.checkNoChanges()}catch(l){i.e(l)}finally{i.f()}}}catch(o){this._zone.runOutsideAngular((function(){return e._exceptionHandler.handleError(o)}))}finally{this._runningTick=!1}}},{key:"attachView",value:function(e){var n=e;this._views.push(n),n.attachToAppRef(this)}},{key:"detachView",value:function(e){var n=e;Al(this._views,n),n.detachFromAppRef()}},{key:"_loadComponent",value:function(e){this.attachView(e.hostView),this.tick(),this.components.push(e),this._injector.get(Xi,[]).concat(this._bootstrapListeners).forEach((function(n){return n(e)}))}},{key:"_unloadComponent",value:function(e){this.detachView(e.hostView),Al(this.components,e)}},{key:"ngOnDestroy",value:function(){this._views.slice().forEach((function(e){return e.destroy()}))}},{key:"viewCount",get:function(){return this._views.length}}]),e}();function Al(e,n){var t=e.indexOf(n);t>-1&&e.splice(t,1)}var Dl=function e(n,t){y(this,e),this.name=n,this.callback=t},Ml=function(){function e(n,t,r){y(this,e),this.listeners=[],this.parent=null,this._debugContext=r,this.nativeNode=n,t&&t instanceof Nl&&t.addChild(this)}return _(e,[{key:"injector",get:function(){return this._debugContext.injector}},{key:"componentInstance",get:function(){return this._debugContext.component}},{key:"context",get:function(){return this._debugContext.context}},{key:"references",get:function(){return this._debugContext.references}},{key:"providerTokens",get:function(){return this._debugContext.providerTokens}}]),e}(),Nl=function(e){h(t,e);var n=g(t);function t(e,r,i){var l;return y(this,t),(l=n.call(this,e,r,i)).properties={},l.attributes={},l.classes={},l.styles={},l.childNodes=[],l.nativeElement=e,l}return _(t,[{key:"addChild",value:function(e){e&&(this.childNodes.push(e),e.parent=this)}},{key:"removeChild",value:function(e){var n=this.childNodes.indexOf(e);-1!==n&&(e.parent=null,this.childNodes.splice(n,1))}},{key:"insertChildrenAfter",value:function(e,n){var t,r=this,i=this.childNodes.indexOf(e);-1!==i&&((t=this.childNodes).splice.apply(t,[i+1,0].concat(s(n))),n.forEach((function(n){n.parent&&n.parent.removeChild(n),e.parent=r})))}},{key:"insertBefore",value:function(e,n){var t=this.childNodes.indexOf(e);-1===t?this.addChild(n):(n.parent&&n.parent.removeChild(n),n.parent=this,this.childNodes.splice(t,0,n))}},{key:"query",value:function(e){return this.queryAll(e)[0]||null}},{key:"queryAll",value:function(e){var n=[];return function e(n,t,r){n.childNodes.forEach((function(n){n instanceof Nl&&(t(n)&&r.push(n),e(n,t,r))}))}(this,e,n),n}},{key:"queryAllNodes",value:function(e){var n=[];return function e(n,t,r){n instanceof Nl&&n.childNodes.forEach((function(n){t(n)&&r.push(n),n instanceof Nl&&e(n,t,r)}))}(this,e,n),n}},{key:"triggerEventHandler",value:function(e,n){this.listeners.forEach((function(t){t.name==e&&t.callback(n)}))}},{key:"children",get:function(){return this.childNodes.filter((function(e){return e instanceof t}))}}]),t}(Ml),Pl=new Map;function Rl(e){return Pl.get(e)||null}var Fl=Rl;function jl(e){Pl.set(e.nativeNode,e)}var Hl=El(null,"core",[{provide:Yi,useValue:"unknown"},{provide:Sl,deps:[Kn]},{provide:_l,deps:[]},{provide:Ki,deps:[]}]);function Ll(){return qt}function Bl(){return Qt}function Ul(e){return e||"en-US"}function zl(e){var n=[];return e.onStable.subscribe((function(){for(;n.length;)n.pop()()})),function(e){n.push(e)}}var Gl=function e(n){y(this,e)};function Zl(e,n,t,r,i,l){e|=1;var o=Tr(n);return{nodeIndex:-1,parent:null,renderParent:null,bindingIndex:-1,outputIndex:-1,flags:e,checkIndex:-1,childFlags:0,directChildFlags:0,childMatchedQueries:0,matchedQueries:o.matchedQueries,matchedQueryIds:o.matchedQueryIds,references:o.references,ngContentIndex:t,childCount:r,bindings:[],bindingFlags:0,outputs:[],element:{ns:null,name:null,attrs:null,template:l?Vr(l):null,componentProvider:null,componentView:null,componentRendererType:null,publicProviders:null,allProviders:null,handleEvent:i||sr},provider:null,text:null,query:null,ngContent:null}}function ql(e,n,t,r,i,l){var o=arguments.length>6&&void 0!==arguments[6]?arguments[6]:[],u=arguments.length>7?arguments[7]:void 0,s=arguments.length>8?arguments[8]:void 0,c=arguments.length>9?arguments[9]:void 0,d=arguments.length>10?arguments[10]:void 0,h=arguments.length>11?arguments[11]:void 0;c||(c=sr);var f=Tr(t),v=f.matchedQueries,p=f.references,g=f.matchedQueryIds,y=null,m=null;if(l){var _=Fr(l),w=a(_,2);y=w[0],m=w[1]}u=u||[];for(var b=[],k=0;k0)s=p,uo(p)||(c=p);else for(;s&&v===s.nodeIndex+s.childCount;){var m=s.parent;m&&(m.childFlags|=s.childFlags,m.childMatchedQueries|=s.childMatchedQueries),c=(s=m)&&uo(s)?s.renderParent:s}}return{factory:null,nodeFlags:o,rootNodeFlags:u,nodeMatchedQueries:a,flags:e,nodes:n,updateDirectives:t||sr,updateRenderer:r||sr,handleEvent:function(e,t,r,i){return n[t].element.handleEvent(e,r,i)},bindingCount:i,outputCount:l,lastRenderRootNode:f}}function uo(e){return 0!=(1&e.flags)&&null===e.element.name}function ao(e,n,t){var r=n.element&&n.element.template;if(r){if(!r.lastRenderRootNode)throw new Error("Illegal State: Embedded templates without nodes are not allowed!");if(r.lastRenderRootNode&&16777216&r.lastRenderRootNode.flags)throw new Error("Illegal State: Last root node of a template can't have embedded views, at index ".concat(n.nodeIndex,"!"))}if(20224&n.flags&&0==(1&(e?e.flags:0)))throw new Error("Illegal State: StaticProvider/Directive nodes need to be children of elements or anchors, at index ".concat(n.nodeIndex,"!"));if(n.query){if(67108864&n.flags&&(!e||0==(16384&e.flags)))throw new Error("Illegal State: Content Query nodes need to be children of directives, at index ".concat(n.nodeIndex,"!"));if(134217728&n.flags&&e)throw new Error("Illegal State: View Query nodes have to be top level nodes, at index ".concat(n.nodeIndex,"!"))}if(n.childCount){var i=e?e.nodeIndex+e.childCount:t-1;if(n.nodeIndex<=i&&n.nodeIndex+n.childCount>i)throw new Error("Illegal State: childCount of node leads outside of parent, at index ".concat(n.nodeIndex,"!"))}}function so(e,n,t,r){var i=fo(e.root,e.renderer,e,n,t);return vo(i,e.component,r),po(i),i}function co(e,n,t){var r=fo(e,e.renderer,null,null,n);return vo(r,t,t),po(r),r}function ho(e,n,t,r){var i,l=n.element.componentRendererType;return i=l?e.root.rendererFactory.createRenderer(r,l):e.root.renderer,fo(e.root,i,e,n.element.componentProvider,t)}function fo(e,n,t,r,i){var l=new Array(i.nodes.length),o=i.outputCount?new Array(i.outputCount):null;return{def:i,parent:t,viewContainerParent:null,parentNodeDef:r,context:null,component:null,nodes:l,state:13,root:e,renderer:n,oldValues:new Array(i.bindingCount),disposables:o,initIndex:-1}}function vo(e,n,t){e.component=n,e.context=t}function po(e){var n;xr(e)&&(n=ir(e.parent,e.parentNodeDef.parent.nodeIndex).renderElement);for(var t=e.def,r=e.nodes,i=0;i0&&Xl(e,n,0,t)&&(f=!0),h>1&&Xl(e,n,1,r)&&(f=!0),h>2&&Xl(e,n,2,i)&&(f=!0),h>3&&Xl(e,n,3,l)&&(f=!0),h>4&&Xl(e,n,4,o)&&(f=!0),h>5&&Xl(e,n,5,u)&&(f=!0),h>6&&Xl(e,n,6,a)&&(f=!0),h>7&&Xl(e,n,7,s)&&(f=!0),h>8&&Xl(e,n,8,c)&&(f=!0),h>9&&Xl(e,n,9,d)&&(f=!0),f}(e,n,t,r,i,l,o,u,a,s,c,d);case 2:return function(e,n,t,r,i,l,o,u,a,s,c,d){var h=!1,f=n.bindings,v=f.length;if(v>0&&gr(e,n,0,t)&&(h=!0),v>1&&gr(e,n,1,r)&&(h=!0),v>2&&gr(e,n,2,i)&&(h=!0),v>3&&gr(e,n,3,l)&&(h=!0),v>4&&gr(e,n,4,o)&&(h=!0),v>5&&gr(e,n,5,u)&&(h=!0),v>6&&gr(e,n,6,a)&&(h=!0),v>7&&gr(e,n,7,s)&&(h=!0),v>8&&gr(e,n,8,c)&&(h=!0),v>9&&gr(e,n,9,d)&&(h=!0),h){var p=n.text.prefix;v>0&&(p+=lo(t,f[0])),v>1&&(p+=lo(r,f[1])),v>2&&(p+=lo(i,f[2])),v>3&&(p+=lo(l,f[3])),v>4&&(p+=lo(o,f[4])),v>5&&(p+=lo(u,f[5])),v>6&&(p+=lo(a,f[6])),v>7&&(p+=lo(s,f[7])),v>8&&(p+=lo(c,f[8])),v>9&&(p+=lo(d,f[9]));var g=rr(e,n.nodeIndex).renderText;e.renderer.setValue(g,p)}return h}(e,n,t,r,i,l,o,u,a,s,c,d);case 16384:return function(e,n,t,r,i,l,o,u,a,s,c,d){var h=lr(e,n.nodeIndex),f=h.instance,v=!1,p=void 0,g=n.bindings.length;return g>0&&pr(e,n,0,t)&&(v=!0,p=Vi(e,h,n,0,t,p)),g>1&&pr(e,n,1,r)&&(v=!0,p=Vi(e,h,n,1,r,p)),g>2&&pr(e,n,2,i)&&(v=!0,p=Vi(e,h,n,2,i,p)),g>3&&pr(e,n,3,l)&&(v=!0,p=Vi(e,h,n,3,l,p)),g>4&&pr(e,n,4,o)&&(v=!0,p=Vi(e,h,n,4,o,p)),g>5&&pr(e,n,5,u)&&(v=!0,p=Vi(e,h,n,5,u,p)),g>6&&pr(e,n,6,a)&&(v=!0,p=Vi(e,h,n,6,a,p)),g>7&&pr(e,n,7,s)&&(v=!0,p=Vi(e,h,n,7,s,p)),g>8&&pr(e,n,8,c)&&(v=!0,p=Vi(e,h,n,8,c,p)),g>9&&pr(e,n,9,d)&&(v=!0,p=Vi(e,h,n,9,d,p)),p&&f.ngOnChanges(p),65536&n.flags&&tr(e,256,n.nodeIndex)&&f.ngOnInit(),262144&n.flags&&f.ngDoCheck(),v}(e,n,t,r,i,l,o,u,a,s,c,d);case 32:case 64:case 128:return function(e,n,t,r,i,l,o,u,a,s,c,d){var h=n.bindings,f=!1,v=h.length;if(v>0&&gr(e,n,0,t)&&(f=!0),v>1&&gr(e,n,1,r)&&(f=!0),v>2&&gr(e,n,2,i)&&(f=!0),v>3&&gr(e,n,3,l)&&(f=!0),v>4&&gr(e,n,4,o)&&(f=!0),v>5&&gr(e,n,5,u)&&(f=!0),v>6&&gr(e,n,6,a)&&(f=!0),v>7&&gr(e,n,7,s)&&(f=!0),v>8&&gr(e,n,8,c)&&(f=!0),v>9&&gr(e,n,9,d)&&(f=!0),f){var p,g=or(e,n.nodeIndex);switch(201347067&n.flags){case 32:p=[],v>0&&p.push(t),v>1&&p.push(r),v>2&&p.push(i),v>3&&p.push(l),v>4&&p.push(o),v>5&&p.push(u),v>6&&p.push(a),v>7&&p.push(s),v>8&&p.push(c),v>9&&p.push(d);break;case 64:p={},v>0&&(p[h[0].name]=t),v>1&&(p[h[1].name]=r),v>2&&(p[h[2].name]=i),v>3&&(p[h[3].name]=l),v>4&&(p[h[4].name]=o),v>5&&(p[h[5].name]=u),v>6&&(p[h[6].name]=a),v>7&&(p[h[7].name]=s),v>8&&(p[h[8].name]=c),v>9&&(p[h[9].name]=d);break;case 128:var y=t;switch(v){case 1:p=y.transform(t);break;case 2:p=y.transform(r);break;case 3:p=y.transform(r,i);break;case 4:p=y.transform(r,i,l);break;case 5:p=y.transform(r,i,l,o);break;case 6:p=y.transform(r,i,l,o,u);break;case 7:p=y.transform(r,i,l,o,u,a);break;case 8:p=y.transform(r,i,l,o,u,a,s);break;case 9:p=y.transform(r,i,l,o,u,a,s,c);break;case 10:p=y.transform(r,i,l,o,u,a,s,c,d)}}g.value=p}return f}(e,n,t,r,i,l,o,u,a,s,c,d);default:throw"unreachable"}}(e,n,r,i,l,o,u,a,c,d,h,f):function(e,n,t){switch(201347067&n.flags){case 1:return function(e,n,t){for(var r=!1,i=0;i0&&yr(e,n,0,t),h>1&&yr(e,n,1,r),h>2&&yr(e,n,2,i),h>3&&yr(e,n,3,l),h>4&&yr(e,n,4,o),h>5&&yr(e,n,5,u),h>6&&yr(e,n,6,a),h>7&&yr(e,n,7,s),h>8&&yr(e,n,8,c),h>9&&yr(e,n,9,d)}(e,n,r,i,l,o,u,a,s,c,d,h):function(e,n,t){for(var r=0;r0){var l=new Set(e.modules);Fo.forEach((function(n,r){if(l.has(Ee(r).providedIn)){var i={token:r,flags:n.flags|(t?4096:0),deps:Ir(n.deps),value:n.value,index:e.providers.length};e.providers.push(i),e.providersByKey[dr(r)]=i}}))}}(e=e.factory((function(){return sr}))),e):e}(r))}var Ro=new Map,Fo=new Map,jo=new Map;function Ho(e){var n;Ro.set(e.token,e),"function"==typeof e.token&&(n=Ee(e.token))&&"function"==typeof n.providedIn&&Fo.set(e.token,e)}function Lo(e,n){var t=Vr(n.viewDefFactory),r=Vr(t.nodes[0].element.componentView);jo.set(e,r)}function Bo(){Ro.clear(),Fo.clear(),jo.clear()}function Uo(e){if(0===Ro.size)return e;var n=function(e){for(var n=[],t=null,r=0;r3?l-3:0),u=3;u3?l-3:0),u=3;u1?n-1:0),r=1;r0&&void 0!==arguments[0]?arguments[0]:void 0;this.control&&this.control.reset(e)}},{key:"hasError",value:function(e,n){return!!this.control&&this.control.hasError(e,n)}},{key:"getError",value:function(e,n){return this.control?this.control.getError(e,n):null}},{key:"value",get:function(){return this.control?this.control.value:null}},{key:"valid",get:function(){return this.control?this.control.valid:null}},{key:"invalid",get:function(){return this.control?this.control.invalid:null}},{key:"pending",get:function(){return this.control?this.control.pending:null}},{key:"disabled",get:function(){return this.control?this.control.disabled:null}},{key:"enabled",get:function(){return this.control?this.control.enabled:null}},{key:"errors",get:function(){return this.control?this.control.errors:null}},{key:"pristine",get:function(){return this.control?this.control.pristine:null}},{key:"dirty",get:function(){return this.control?this.control.dirty:null}},{key:"touched",get:function(){return this.control?this.control.touched:null}},{key:"status",get:function(){return this.control?this.control.status:null}},{key:"untouched",get:function(){return this.control?this.control.untouched:null}},{key:"statusChanges",get:function(){return this.control?this.control.statusChanges:null}},{key:"valueChanges",get:function(){return this.control?this.control.valueChanges:null}},{key:"path",get:function(){return null}}]),e}(),Fu=function(e){h(t,e);var n=g(t);function t(){return y(this,t),n.apply(this,arguments)}return _(t,[{key:"formDirective",get:function(){return null}},{key:"path",get:function(){return null}}]),t}(Ru);function ju(){throw new Error("unimplemented")}var Hu=function(e){h(t,e);var n=g(t);function t(){var e;return y(this,t),(e=n.apply(this,arguments))._parent=null,e.name=null,e.valueAccessor=null,e._rawValidators=[],e._rawAsyncValidators=[],e}return _(t,[{key:"validator",get:function(){return ju()}},{key:"asyncValidator",get:function(){return ju()}}]),t}(Ru),Lu=function(e){h(t,e);var n=g(t);function t(e){return y(this,t),n.call(this,e)}return t}(function(){function e(n){y(this,e),this._cd=n}return _(e,[{key:"ngClassUntouched",get:function(){return!!this._cd.control&&this._cd.control.untouched}},{key:"ngClassTouched",get:function(){return!!this._cd.control&&this._cd.control.touched}},{key:"ngClassPristine",get:function(){return!!this._cd.control&&this._cd.control.pristine}},{key:"ngClassDirty",get:function(){return!!this._cd.control&&this._cd.control.dirty}},{key:"ngClassValid",get:function(){return!!this._cd.control&&this._cd.control.valid}},{key:"ngClassInvalid",get:function(){return!!this._cd.control&&this._cd.control.invalid}},{key:"ngClassPending",get:function(){return!!this._cd.control&&this._cd.control.pending}}]),e}());function Bu(e){return null==e||0===e.length}function Uu(e){return null!=e&&"number"==typeof e.length}var zu=new je("NgValidators"),Gu=/^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,Zu=function(){function e(){y(this,e)}return _(e,null,[{key:"min",value:function(e){return function(n){if(Bu(n.value)||Bu(e))return null;var t=parseFloat(n.value);return!isNaN(t)&&te?{max:{max:e,actual:n.value}}:null}}},{key:"required",value:function(e){return Bu(e.value)?{required:!0}:null}},{key:"requiredTrue",value:function(e){return!0===e.value?null:{required:!0}}},{key:"email",value:function(e){return Bu(e.value)||Gu.test(e.value)?null:{email:!0}}},{key:"minLength",value:function(e){return function(n){return Bu(n.value)||!Uu(n.value)?null:n.value.lengthe?{maxlength:{requiredLength:e,actualLength:n.value.length}}:null}}},{key:"pattern",value:function(n){return n?("string"==typeof n?(r="","^"!==n.charAt(0)&&(r+="^"),r+=n,"$"!==n.charAt(n.length-1)&&(r+="$"),t=new RegExp(r)):(r=n.toString(),t=n),function(e){if(Bu(e.value))return null;var n=e.value;return t.test(n)?null:{pattern:{requiredPattern:r,actualValue:n}}}):e.nullValidator;var t,r}},{key:"nullValidator",value:function(e){return null}},{key:"compose",value:function(e){if(!e)return null;var n=e.filter(qu);return 0==n.length?null:function(e){return Wu(Yu(e,n))}}},{key:"composeAsync",value:function(e){if(!e)return null;var n=e.filter(qu);return 0==n.length?null:function(e){return function(){for(var e=arguments.length,n=new Array(e),t=0;t=0;--n)if(this._accessors[n][1]===e)return void this._accessors.splice(n,1)}},{key:"select",value:function(e){var n=this;this._accessors.forEach((function(t){n._isSameGroup(t,e)&&t[1]!==e&&t[1].fireUncheck(e.value)}))}},{key:"_isSameGroup",value:function(e,n){return!!e[0].control&&e[0]._parent===n._control._parent&&e[1].name===n.name}}]),e}(),Ju=function(){function e(n,t,r,i){y(this,e),this._renderer=n,this._elementRef=t,this._registry=r,this._injector=i,this.onChange=function(){},this.onTouched=function(){}}return _(e,[{key:"ngOnInit",value:function(){this._control=this._injector.get(Hu),this._checkName(),this._registry.add(this._control,this)}},{key:"ngOnDestroy",value:function(){this._registry.remove(this)}},{key:"writeValue",value:function(e){this._state=e===this.value,this._renderer.setProperty(this._elementRef.nativeElement,"checked",this._state)}},{key:"registerOnChange",value:function(e){var n=this;this._fn=e,this.onChange=function(){e(n.value),n._registry.select(n)}}},{key:"fireUncheck",value:function(e){this.writeValue(e)}},{key:"registerOnTouched",value:function(e){this.onTouched=e}},{key:"setDisabledState",value:function(e){this._renderer.setProperty(this._elementRef.nativeElement,"disabled",e)}},{key:"_checkName",value:function(){this.name&&this.formControlName&&this.name!==this.formControlName&&this._throwNameError(),!this.name&&this.formControlName&&(this.name=this.formControlName)}},{key:"_throwNameError",value:function(){throw new Error('\n If you define both a name and a formControlName attribute on your radio button, their values\n must match. Ex: \n ')}}]),e}(),ea=function(){function e(n,t){y(this,e),this._renderer=n,this._elementRef=t,this.onChange=function(e){},this.onTouched=function(){}}return _(e,[{key:"writeValue",value:function(e){this._renderer.setProperty(this._elementRef.nativeElement,"value",parseFloat(e))}},{key:"registerOnChange",value:function(e){this.onChange=function(n){e(""==n?null:parseFloat(n))}}},{key:"registerOnTouched",value:function(e){this.onTouched=e}},{key:"setDisabledState",value:function(e){this._renderer.setProperty(this._elementRef.nativeElement,"disabled",e)}}]),e}(),na='\n
\n
\n \n
\n
\n\n In your class:\n\n this.myGroup = new FormGroup({\n person: new FormGroup({ firstName: new FormControl() })\n });',ta='\n
\n
\n \n
\n
';function ra(e,n){return null==e?"".concat(n):(n&&"object"==typeof n&&(n="Object"),"".concat(e,": ").concat(n).slice(0,50))}var ia=function(){function e(n,t){y(this,e),this._renderer=n,this._elementRef=t,this._optionMap=new Map,this._idCounter=0,this.onChange=function(e){},this.onTouched=function(){},this._compareWith=Object.is}return _(e,[{key:"writeValue",value:function(e){this.value=e;var n=this._getOptionId(e);null==n&&this._renderer.setProperty(this._elementRef.nativeElement,"selectedIndex",-1);var t=ra(n,e);this._renderer.setProperty(this._elementRef.nativeElement,"value",t)}},{key:"registerOnChange",value:function(e){var n=this;this.onChange=function(t){n.value=n._getOptionValue(t),e(n.value)}}},{key:"registerOnTouched",value:function(e){this.onTouched=e}},{key:"setDisabledState",value:function(e){this._renderer.setProperty(this._elementRef.nativeElement,"disabled",e)}},{key:"_registerOption",value:function(){return(this._idCounter++).toString()}},{key:"_getOptionId",value:function(e){for(var n=0,t=Array.from(this._optionMap.keys());n-1)}}else n=function(e,n){e._setSelected(!1)};this._optionMap.forEach(n)}},{key:"registerOnChange",value:function(e){var n=this;this.onChange=function(t){var r=[];if(void 0!==t.selectedOptions)for(var i=t.selectedOptions,l=0;l1?"path: '".concat(e.path.join(" -> "),"'"):e.path[0]?"name: '".concat(e.path,"'"):"unspecified name attribute",new Error("".concat(n," ").concat(t))}function fa(e){return null!=e?Zu.compose(Xu(e)):null}function va(e){return null!=e?Zu.composeAsync(Xu(e)):null}var pa=[Mu,ea,Ku,ia,ua,Ju];function ga(e){var n=ma(e)?e.validators:e;return Array.isArray(n)?fa(n):n||null}function ya(e,n){var t=ma(n)?n.asyncValidators:e;return Array.isArray(t)?va(t):t||null}function ma(e){return null!=e&&!Array.isArray(e)&&"object"==typeof e}var _a=function(){function e(n,t){y(this,e),this.validator=n,this.asyncValidator=t,this._onCollectionChange=function(){},this.pristine=!0,this.touched=!1,this._onDisabledChange=[]}return _(e,[{key:"setValidators",value:function(e){this.validator=ga(e)}},{key:"setAsyncValidators",value:function(e){this.asyncValidator=ya(e)}},{key:"clearValidators",value:function(){this.validator=null}},{key:"clearAsyncValidators",value:function(){this.asyncValidator=null}},{key:"markAsTouched",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.touched=!0,this._parent&&!e.onlySelf&&this._parent.markAsTouched(e)}},{key:"markAllAsTouched",value:function(){this.markAsTouched({onlySelf:!0}),this._forEachChild((function(e){return e.markAllAsTouched()}))}},{key:"markAsUntouched",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.touched=!1,this._pendingTouched=!1,this._forEachChild((function(e){e.markAsUntouched({onlySelf:!0})})),this._parent&&!e.onlySelf&&this._parent._updateTouched(e)}},{key:"markAsDirty",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.pristine=!1,this._parent&&!e.onlySelf&&this._parent.markAsDirty(e)}},{key:"markAsPristine",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.pristine=!0,this._pendingDirty=!1,this._forEachChild((function(e){e.markAsPristine({onlySelf:!0})})),this._parent&&!e.onlySelf&&this._parent._updatePristine(e)}},{key:"markAsPending",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.status="PENDING",!1!==e.emitEvent&&this.statusChanges.emit(this.status),this._parent&&!e.onlySelf&&this._parent.markAsPending(e)}},{key:"disable",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=this._parentMarkedDirty(e.onlySelf);this.status="DISABLED",this.errors=null,this._forEachChild((function(n){n.disable(Object.assign(Object.assign({},e),{onlySelf:!0}))})),this._updateValue(),!1!==e.emitEvent&&(this.valueChanges.emit(this.value),this.statusChanges.emit(this.status)),this._updateAncestors(Object.assign(Object.assign({},e),{skipPristineCheck:n})),this._onDisabledChange.forEach((function(e){return e(!0)}))}},{key:"enable",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=this._parentMarkedDirty(e.onlySelf);this.status="VALID",this._forEachChild((function(n){n.enable(Object.assign(Object.assign({},e),{onlySelf:!0}))})),this.updateValueAndValidity({onlySelf:!0,emitEvent:e.emitEvent}),this._updateAncestors(Object.assign(Object.assign({},e),{skipPristineCheck:n})),this._onDisabledChange.forEach((function(e){return e(!1)}))}},{key:"_updateAncestors",value:function(e){this._parent&&!e.onlySelf&&(this._parent.updateValueAndValidity(e),e.skipPristineCheck||this._parent._updatePristine(),this._parent._updateTouched())}},{key:"setParent",value:function(e){this._parent=e}},{key:"updateValueAndValidity",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this._setInitialStatus(),this._updateValue(),this.enabled&&(this._cancelExistingSubscription(),this.errors=this._runValidator(),this.status=this._calculateStatus(),"VALID"!==this.status&&"PENDING"!==this.status||this._runAsyncValidator(e.emitEvent)),!1!==e.emitEvent&&(this.valueChanges.emit(this.value),this.statusChanges.emit(this.status)),this._parent&&!e.onlySelf&&this._parent.updateValueAndValidity(e)}},{key:"_updateTreeValidity",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{emitEvent:!0};this._forEachChild((function(n){return n._updateTreeValidity(e)})),this.updateValueAndValidity({onlySelf:!0,emitEvent:e.emitEvent})}},{key:"_setInitialStatus",value:function(){this.status=this._allControlsDisabled()?"DISABLED":"VALID"}},{key:"_runValidator",value:function(){return this.validator?this.validator(this):null}},{key:"_runAsyncValidator",value:function(e){var n=this;if(this.asyncValidator){this.status="PENDING";var t=Qu(this.asyncValidator(this));this._asyncValidationSubscription=t.subscribe((function(t){return n.setErrors(t,{emitEvent:e})}))}}},{key:"_cancelExistingSubscription",value:function(){this._asyncValidationSubscription&&this._asyncValidationSubscription.unsubscribe()}},{key:"setErrors",value:function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this.errors=e,this._updateControlsErrors(!1!==n.emitEvent)}},{key:"get",value:function(e){return function(e,n,t){if(null==n)return null;if(Array.isArray(n)||(n=n.split(".")),Array.isArray(n)&&0===n.length)return null;var r=e;return n.forEach((function(e){r=r instanceof ba?r.controls.hasOwnProperty(e)?r.controls[e]:null:r instanceof ka&&r.at(e)||null})),r}(this,e)}},{key:"getError",value:function(e,n){var t=n?this.get(n):this;return t&&t.errors?t.errors[e]:null}},{key:"hasError",value:function(e,n){return!!this.getError(e,n)}},{key:"_updateControlsErrors",value:function(e){this.status=this._calculateStatus(),e&&this.statusChanges.emit(this.status),this._parent&&this._parent._updateControlsErrors(e)}},{key:"_initObservables",value:function(){this.valueChanges=new Li,this.statusChanges=new Li}},{key:"_calculateStatus",value:function(){return this._allControlsDisabled()?"DISABLED":this.errors?"INVALID":this._anyControlsHaveStatus("PENDING")?"PENDING":this._anyControlsHaveStatus("INVALID")?"INVALID":"VALID"}},{key:"_anyControlsHaveStatus",value:function(e){return this._anyControls((function(n){return n.status===e}))}},{key:"_anyControlsDirty",value:function(){return this._anyControls((function(e){return e.dirty}))}},{key:"_anyControlsTouched",value:function(){return this._anyControls((function(e){return e.touched}))}},{key:"_updatePristine",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.pristine=!this._anyControlsDirty(),this._parent&&!e.onlySelf&&this._parent._updatePristine(e)}},{key:"_updateTouched",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.touched=this._anyControlsTouched(),this._parent&&!e.onlySelf&&this._parent._updateTouched(e)}},{key:"_isBoxedValue",value:function(e){return"object"==typeof e&&null!==e&&2===Object.keys(e).length&&"value"in e&&"disabled"in e}},{key:"_registerOnCollectionChange",value:function(e){this._onCollectionChange=e}},{key:"_setUpdateStrategy",value:function(e){ma(e)&&null!=e.updateOn&&(this._updateOn=e.updateOn)}},{key:"_parentMarkedDirty",value:function(e){return!e&&this._parent&&this._parent.dirty&&!this._parent._anyControlsDirty()}},{key:"parent",get:function(){return this._parent}},{key:"valid",get:function(){return"VALID"===this.status}},{key:"invalid",get:function(){return"INVALID"===this.status}},{key:"pending",get:function(){return"PENDING"==this.status}},{key:"disabled",get:function(){return"DISABLED"===this.status}},{key:"enabled",get:function(){return"DISABLED"!==this.status}},{key:"dirty",get:function(){return!this.pristine}},{key:"untouched",get:function(){return!this.touched}},{key:"updateOn",get:function(){return this._updateOn?this._updateOn:this.parent?this.parent.updateOn:"change"}},{key:"root",get:function(){for(var e=this;e._parent;)e=e._parent;return e}}]),e}(),wa=function(e){h(t,e);var n=g(t);function t(){var e,r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,i=arguments.length>1?arguments[1]:void 0,l=arguments.length>2?arguments[2]:void 0;return y(this,t),(e=n.call(this,ga(i),ya(l,i)))._onChange=[],e._applyFormState(r),e._setUpdateStrategy(i),e.updateValueAndValidity({onlySelf:!0,emitEvent:!1}),e._initObservables(),e}return _(t,[{key:"setValue",value:function(e){var n=this,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this.value=this._pendingValue=e,this._onChange.length&&!1!==t.emitModelToViewChange&&this._onChange.forEach((function(e){return e(n.value,!1!==t.emitViewToModelChange)})),this.updateValueAndValidity(t)}},{key:"patchValue",value:function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this.setValue(e,n)}},{key:"reset",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this._applyFormState(e),this.markAsPristine(n),this.markAsUntouched(n),this.setValue(this.value,n),this._pendingChange=!1}},{key:"_updateValue",value:function(){}},{key:"_anyControls",value:function(e){return!1}},{key:"_allControlsDisabled",value:function(){return this.disabled}},{key:"registerOnChange",value:function(e){this._onChange.push(e)}},{key:"_clearChangeFns",value:function(){this._onChange=[],this._onDisabledChange=[],this._onCollectionChange=function(){}}},{key:"registerOnDisabledChange",value:function(e){this._onDisabledChange.push(e)}},{key:"_forEachChild",value:function(e){}},{key:"_syncPendingControls",value:function(){return!("submit"!==this.updateOn||(this._pendingDirty&&this.markAsDirty(),this._pendingTouched&&this.markAsTouched(),!this._pendingChange)||(this.setValue(this._pendingValue,{onlySelf:!0,emitModelToViewChange:!1}),0))}},{key:"_applyFormState",value:function(e){this._isBoxedValue(e)?(this.value=this._pendingValue=e.value,e.disabled?this.disable({onlySelf:!0,emitEvent:!1}):this.enable({onlySelf:!0,emitEvent:!1})):this.value=this._pendingValue=e}}]),t}(_a),ba=function(e){h(t,e);var n=g(t);function t(e,r,i){var l;return y(this,t),(l=n.call(this,ga(r),ya(i,r))).controls=e,l._initObservables(),l._setUpdateStrategy(r),l._setUpControls(),l.updateValueAndValidity({onlySelf:!0,emitEvent:!1}),l}return _(t,[{key:"registerControl",value:function(e,n){return this.controls[e]?this.controls[e]:(this.controls[e]=n,n.setParent(this),n._registerOnCollectionChange(this._onCollectionChange),n)}},{key:"addControl",value:function(e,n){this.registerControl(e,n),this.updateValueAndValidity(),this._onCollectionChange()}},{key:"removeControl",value:function(e){this.controls[e]&&this.controls[e]._registerOnCollectionChange((function(){})),delete this.controls[e],this.updateValueAndValidity(),this._onCollectionChange()}},{key:"setControl",value:function(e,n){this.controls[e]&&this.controls[e]._registerOnCollectionChange((function(){})),delete this.controls[e],n&&this.registerControl(e,n),this.updateValueAndValidity(),this._onCollectionChange()}},{key:"contains",value:function(e){return this.controls.hasOwnProperty(e)&&this.controls[e].enabled}},{key:"setValue",value:function(e){var n=this,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this._checkAllValuesPresent(e),Object.keys(e).forEach((function(r){n._throwIfControlMissing(r),n.controls[r].setValue(e[r],{onlySelf:!0,emitEvent:t.emitEvent})})),this.updateValueAndValidity(t)}},{key:"patchValue",value:function(e){var n=this,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};Object.keys(e).forEach((function(r){n.controls[r]&&n.controls[r].patchValue(e[r],{onlySelf:!0,emitEvent:t.emitEvent})})),this.updateValueAndValidity(t)}},{key:"reset",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this._forEachChild((function(t,r){t.reset(e[r],{onlySelf:!0,emitEvent:n.emitEvent})})),this._updatePristine(n),this._updateTouched(n),this.updateValueAndValidity(n)}},{key:"getRawValue",value:function(){return this._reduceChildren({},(function(e,n,t){return e[t]=n instanceof wa?n.value:n.getRawValue(),e}))}},{key:"_syncPendingControls",value:function(){var e=this._reduceChildren(!1,(function(e,n){return!!n._syncPendingControls()||e}));return e&&this.updateValueAndValidity({onlySelf:!0}),e}},{key:"_throwIfControlMissing",value:function(e){if(!Object.keys(this.controls).length)throw new Error("\n There are no form controls registered with this group yet. If you're using ngModel,\n you may want to check next tick (e.g. use setTimeout).\n ");if(!this.controls[e])throw new Error("Cannot find form control with name: ".concat(e,"."))}},{key:"_forEachChild",value:function(e){var n=this;Object.keys(this.controls).forEach((function(t){return e(n.controls[t],t)}))}},{key:"_setUpControls",value:function(){var e=this;this._forEachChild((function(n){n.setParent(e),n._registerOnCollectionChange(e._onCollectionChange)}))}},{key:"_updateValue",value:function(){this.value=this._reduceValue()}},{key:"_anyControls",value:function(e){for(var n=0,t=Object.keys(this.controls);n0||this.disabled}},{key:"_checkAllValuesPresent",value:function(e){this._forEachChild((function(n,t){if(void 0===e[t])throw new Error("Must supply a value for form control with name: '".concat(t,"'."))}))}}]),t}(_a),ka=function(e){h(t,e);var n=g(t);function t(e,r,i){var l;return y(this,t),(l=n.call(this,ga(r),ya(i,r))).controls=e,l._initObservables(),l._setUpdateStrategy(r),l._setUpControls(),l.updateValueAndValidity({onlySelf:!0,emitEvent:!1}),l}return _(t,[{key:"at",value:function(e){return this.controls[e]}},{key:"push",value:function(e){this.controls.push(e),this._registerControl(e),this.updateValueAndValidity(),this._onCollectionChange()}},{key:"insert",value:function(e,n){this.controls.splice(e,0,n),this._registerControl(n),this.updateValueAndValidity()}},{key:"removeAt",value:function(e){this.controls[e]&&this.controls[e]._registerOnCollectionChange((function(){})),this.controls.splice(e,1),this.updateValueAndValidity()}},{key:"setControl",value:function(e,n){this.controls[e]&&this.controls[e]._registerOnCollectionChange((function(){})),this.controls.splice(e,1),n&&(this.controls.splice(e,0,n),this._registerControl(n)),this.updateValueAndValidity(),this._onCollectionChange()}},{key:"setValue",value:function(e){var n=this,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this._checkAllValuesPresent(e),e.forEach((function(e,r){n._throwIfControlMissing(r),n.at(r).setValue(e,{onlySelf:!0,emitEvent:t.emitEvent})})),this.updateValueAndValidity(t)}},{key:"patchValue",value:function(e){var n=this,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};e.forEach((function(e,r){n.at(r)&&n.at(r).patchValue(e,{onlySelf:!0,emitEvent:t.emitEvent})})),this.updateValueAndValidity(t)}},{key:"reset",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this._forEachChild((function(t,r){t.reset(e[r],{onlySelf:!0,emitEvent:n.emitEvent})})),this._updatePristine(n),this._updateTouched(n),this.updateValueAndValidity(n)}},{key:"getRawValue",value:function(){return this.controls.map((function(e){return e instanceof wa?e.value:e.getRawValue()}))}},{key:"clear",value:function(){this.controls.length<1||(this._forEachChild((function(e){return e._registerOnCollectionChange((function(){}))})),this.controls.splice(0),this.updateValueAndValidity())}},{key:"_syncPendingControls",value:function(){var e=this.controls.reduce((function(e,n){return!!n._syncPendingControls()||e}),!1);return e&&this.updateValueAndValidity({onlySelf:!0}),e}},{key:"_throwIfControlMissing",value:function(e){if(!this.controls.length)throw new Error("\n There are no form controls registered with this array yet. If you're using ngModel,\n you may want to check next tick (e.g. use setTimeout).\n ");if(!this.at(e))throw new Error("Cannot find form control at index ".concat(e))}},{key:"_forEachChild",value:function(e){this.controls.forEach((function(n,t){e(n,t)}))}},{key:"_updateValue",value:function(){var e=this;this.value=this.controls.filter((function(n){return n.enabled||e.disabled})).map((function(e){return e.value}))}},{key:"_anyControls",value:function(e){return this.controls.some((function(n){return n.enabled&&e(n)}))}},{key:"_setUpControls",value:function(){var e=this;this._forEachChild((function(n){return e._registerControl(n)}))}},{key:"_checkAllValuesPresent",value:function(e){this._forEachChild((function(n,t){if(void 0===e[t])throw new Error("Must supply a value for form control at index: ".concat(t,"."))}))}},{key:"_allControlsDisabled",value:function(){var e,n=c(this.controls);try{for(n.s();!(e=n.n()).done;)if(e.value.enabled)return!1}catch(t){n.e(t)}finally{n.f()}return this.controls.length>0||this.disabled}},{key:"_registerControl",value:function(e){e.setParent(this),e._registerOnCollectionChange(this._onCollectionChange)}},{key:"length",get:function(){return this.controls.length}}]),t}(_a),Ca=function(){return Promise.resolve(null)}(),xa=function(e){h(t,e);var n=g(t);function t(e,r){var i;return y(this,t),(i=n.call(this)).submitted=!1,i._directives=[],i.ngSubmit=new Li,i.form=new ba({},fa(e),va(r)),i}return _(t,[{key:"ngAfterViewInit",value:function(){this._setUpdateStrategy()}},{key:"addControl",value:function(e){var n=this;Ca.then((function(){var t=n._findContainer(e.path);e.control=t.registerControl(e.name,e.control),ca(e.control,e),e.control.updateValueAndValidity({emitEvent:!1}),n._directives.push(e)}))}},{key:"getControl",value:function(e){return this.form.get(e.path)}},{key:"removeControl",value:function(e){var n=this;Ca.then((function(){var t,r,i=n._findContainer(e.path);i&&i.removeControl(e.name),(r=(t=n._directives).indexOf(e))>-1&&t.splice(r,1)}))}},{key:"addFormGroup",value:function(e){var n=this;Ca.then((function(){var t=n._findContainer(e.path),r=new ba({});(function(e,n){null==e&&ha(n,"Cannot find control with"),e.validator=Zu.compose([e.validator,n.validator]),e.asyncValidator=Zu.composeAsync([e.asyncValidator,n.asyncValidator])})(r,e),t.registerControl(e.name,r),r.updateValueAndValidity({emitEvent:!1})}))}},{key:"removeFormGroup",value:function(e){var n=this;Ca.then((function(){var t=n._findContainer(e.path);t&&t.removeControl(e.name)}))}},{key:"getFormGroup",value:function(e){return this.form.get(e.path)}},{key:"updateModel",value:function(e,n){var t=this;Ca.then((function(){t.form.get(e.path).setValue(n)}))}},{key:"setValue",value:function(e){this.control.setValue(e)}},{key:"onSubmit",value:function(e){return this.submitted=!0,n=this._directives,this.form._syncPendingControls(),n.forEach((function(e){var n=e.control;"submit"===n.updateOn&&n._pendingChange&&(e.viewToModelUpdate(n._pendingValue),n._pendingChange=!1)})),this.ngSubmit.emit(e),!1;var n}},{key:"onReset",value:function(){this.resetForm()}},{key:"resetForm",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:void 0;this.form.reset(e),this.submitted=!1}},{key:"_setUpdateStrategy",value:function(){this.options&&null!=this.options.updateOn&&(this.form._updateOn=this.options.updateOn)}},{key:"_findContainer",value:function(e){return e.pop(),e.length?this.form.get(e):this.form}},{key:"formDirective",get:function(){return this}},{key:"control",get:function(){return this.form}},{key:"path",get:function(){return[]}},{key:"controls",get:function(){return this.form.controls}}]),t}(Fu),Ea=function(e){h(t,e);var n=g(t);function t(){return y(this,t),n.apply(this,arguments)}return _(t,[{key:"ngOnInit",value:function(){this._checkParentType(),this.formDirective.addFormGroup(this)}},{key:"ngOnDestroy",value:function(){this.formDirective&&this.formDirective.removeFormGroup(this)}},{key:"_checkParentType",value:function(){}},{key:"control",get:function(){return this.formDirective.getFormGroup(this)}},{key:"path",get:function(){return sa(null==this.name?this.name:this.name.toString(),this._parent)}},{key:"formDirective",get:function(){return this._parent?this._parent.formDirective:null}},{key:"validator",get:function(){return fa(this._validators)}},{key:"asyncValidator",get:function(){return va(this._asyncValidators)}}]),t}(Fu),Ta=function(){function e(){y(this,e)}return _(e,null,[{key:"modelParentException",value:function(){throw new Error('\n ngModel cannot be used to register form controls with a parent formGroup directive. Try using\n formGroup\'s partner directive "formControlName" instead. Example:\n\n '.concat('\n
\n \n
\n\n In your class:\n\n this.myGroup = new FormGroup({\n firstName: new FormControl()\n });',"\n\n Or, if you'd like to avoid registering this form control, indicate that it's standalone in ngModelOptions:\n\n Example:\n\n ").concat('\n
\n \n \n
\n '))}},{key:"formGroupNameException",value:function(){throw new Error("\n ngModel cannot be used to register form controls with a parent formGroupName or formArrayName directive.\n\n Option 1: Use formControlName instead of ngModel (reactive strategy):\n\n ".concat(na,"\n\n Option 2: Update ngModel's parent be ngModelGroup (template-driven strategy):\n\n ").concat(ta))}},{key:"missingNameException",value:function(){throw new Error('If ngModel is used within a form tag, either the name attribute must be set or the form\n control must be defined as \'standalone\' in ngModelOptions.\n\n Example 1: \n Example 2: ')}},{key:"modelGroupParentException",value:function(){throw new Error("\n ngModelGroup cannot be used with a parent formGroup directive.\n\n Option 1: Use formGroupName instead of ngModelGroup (reactive strategy):\n\n ".concat(na,"\n\n Option 2: Use a regular form tag instead of the formGroup directive (template-driven strategy):\n\n ").concat(ta))}}]),e}(),Ia=function(e){h(t,e);var n=g(t);function t(e,r,i){var l;return y(this,t),(l=n.call(this))._parent=e,l._validators=r,l._asyncValidators=i,l}return _(t,[{key:"_checkParentType",value:function(){this._parent instanceof t||this._parent instanceof xa||Ta.modelGroupParentException()}}]),t}(Ea),Sa=function(){return Promise.resolve(null)}(),Oa=function(e){h(t,e);var n=g(t);function t(e,r,i,o){var u;return y(this,t),(u=n.call(this)).control=new wa,u._registered=!1,u.update=new Li,u._parent=e,u._rawValidators=r||[],u._rawAsyncValidators=i||[],u.valueAccessor=function(e,n){if(!n)return null;Array.isArray(n)||ha(e,"Value accessor was not provided as an array for form control with");var t=void 0,r=void 0,i=void 0;return n.forEach((function(n){var l;n.constructor===Pu?t=n:(l=n,pa.some((function(e){return l.constructor===e}))?(r&&ha(e,"More than one built-in value accessor matches form control with"),r=n):(i&&ha(e,"More than one custom value accessor matches form control with"),i=n))})),i||r||t||(ha(e,"No valid value accessor for form control with"),null)}(l(u),o),u}return _(t,[{key:"ngOnChanges",value:function(e){this._checkForErrors(),this._registered||this._setUpControl(),"isDisabled"in e&&this._updateDisabled(e),function(e,n){if(!e.hasOwnProperty("model"))return!1;var t=e.model;return!!t.isFirstChange()||!Object.is(n,t.currentValue)}(e,this.viewModel)&&(this._updateValue(this.model),this.viewModel=this.model)}},{key:"ngOnDestroy",value:function(){this.formDirective&&this.formDirective.removeControl(this)}},{key:"viewToModelUpdate",value:function(e){this.viewModel=e,this.update.emit(e)}},{key:"_setUpControl",value:function(){this._setUpdateStrategy(),this._isStandalone()?this._setUpStandalone():this.formDirective.addControl(this),this._registered=!0}},{key:"_setUpdateStrategy",value:function(){this.options&&null!=this.options.updateOn&&(this.control._updateOn=this.options.updateOn)}},{key:"_isStandalone",value:function(){return!this._parent||!(!this.options||!this.options.standalone)}},{key:"_setUpStandalone",value:function(){ca(this.control,this),this.control.updateValueAndValidity({emitEvent:!1})}},{key:"_checkForErrors",value:function(){this._isStandalone()||this._checkParentType(),this._checkName()}},{key:"_checkParentType",value:function(){!(this._parent instanceof Ia)&&this._parent instanceof Ea?Ta.formGroupNameException():this._parent instanceof Ia||this._parent instanceof xa||Ta.modelParentException()}},{key:"_checkName",value:function(){this.options&&this.options.name&&(this.name=this.options.name),this._isStandalone()||this.name||Ta.missingNameException()}},{key:"_updateValue",value:function(e){var n=this;Sa.then((function(){n.control.setValue(e,{emitViewToModelChange:!1})}))}},{key:"_updateDisabled",value:function(e){var n=this,t=e.isDisabled.currentValue,r=""===t||t&&"false"!==t;Sa.then((function(){r&&!n.control.disabled?n.control.disable():!r&&n.control.disabled&&n.control.enable()}))}},{key:"path",get:function(){return this._parent?sa(this.name,this._parent):[this.name]}},{key:"formDirective",get:function(){return this._parent?this._parent.formDirective:null}},{key:"validator",get:function(){return fa(this._rawValidators)}},{key:"asyncValidator",get:function(){return va(this._rawAsyncValidators)}}]),t}(Hu),Va=function(){function e(){y(this,e),this._required=!1}return _(e,[{key:"validate",value:function(e){return this.required?Zu.required(e):null}},{key:"registerOnValidatorChange",value:function(e){this._onChange=e}},{key:"required",get:function(){return this._required},set:function(e){this._required=null!=e&&!1!==e&&"false"!=="".concat(e),this._onChange&&this._onChange()}}]),e}(),Aa=function e(){y(this,e)},Da=function e(){y(this,e)},Ma=function e(){y(this,e)},Na=function(){var e=function(){function e(n){y(this,e),n&&this.setPath(n.path)}return _(e,[{key:"setPath",value:function(e){this.spritePath=e}},{key:"getPath",value:function(){return this.spritePath}}]),e}();return e.\u0275prov=xe({factory:function(){return new e(qe(Ma,8))},token:e,providedIn:"root"}),e}(),Pa=function(){function e(n){y(this,e),this.iconSpriteService=n,this.classes="icon",this.width="100%",this.preserveAspectRatio="xMinYMax meet"}return _(e,[{key:"ngOnChanges",value:function(e){this.src&&!this.src.includes("#")&&this.iconSpriteService.spritePath&&(this.src="".concat(this.iconSpriteService.getPath(),"#").concat(this.src))}}]),e}(),Ra=function(){function e(n,t){y(this,e),this.renderer=n,this.el=t}return _(e,[{key:"ngOnInit",value:function(){var e=this;if(Array.isArray(this.attribute[0]))this.attribute.forEach((function(n){e.renderer.setAttribute(e.el.nativeElement,n[0],n[1]?n[1]:"")}));else{var n=this.attribute;n[0]&&this.renderer.setAttribute(this.el.nativeElement,n[0],n[1]?n[1]:"")}}}]),e}(),Fa=function(){function e(){y(this,e)}return _(e,null,[{key:"forRoot",value:function(n){return{ngModule:e,providers:[{provide:Ma,useValue:n}]}}}]),e}(),ja=hr({encapsulation:0,styles:["[_nghost-%COMP%] svg[_ngcontent-%COMP%], [_nghost-%COMP%] use[_ngcontent-%COMP%]{fill:currentColor}"],data:{}});function Ha(e){return oo(0,[(e()(),ql(0,0,null,null,1,":svg:title",[],[[1,"id",0]],null,null,null,null)),(e()(),ro(1,null,["",""]))],null,(function(e,n){var t=n.component;e(n,0,0,t.src.split("#")[1]+"-title"),e(n,1,0,t.title)}))}function La(e){return oo(0,[(e()(),ql(0,0,null,null,4,null,null,null,null,null,null,null)),(e()(),ql(1,0,null,null,3,":svg:svg",[],[[1,"class",0],[1,"width",0],[1,"height",0]],null,null,null,null)),(e()(),Zl(16777216,null,null,1,null,Ha)),mi(3,16384,null,0,Iu,[Xt,Wt],{ngIf:[0,"ngIf"]},null),(e()(),ql(4,0,null,null,0,":svg:use",[],[[1,":xlink:href",0]],null,null,null,null))],(function(e,n){var t=n.component;e(n,3,0,t.title&&t.src)}),(function(e,n){var t=n.component;e(n,1,0,t.classes,t.width,t.height||t.width),e(n,4,0,t.src)}))}function Ba(e){return oo(0,[(e()(),ql(0,0,null,null,1,":svg:title",[],[[1,"id",0]],null,null,null,null)),(e()(),ro(1,null,["",""]))],null,(function(e,n){var t=n.component;e(n,0,0,t.src.split("#")[1]+"-title"),e(n,1,0,t.title)}))}function Ua(e){return oo(0,[(e()(),ql(0,0,null,null,5,null,null,null,null,null,null,null)),(e()(),ql(1,0,null,null,4,":svg:svg",[["svgIconSpriteAttr",""]],[[1,"class",0],[1,"width",0],[1,"height",0]],null,null,null,null)),mi(2,81920,null,0,Ra,[Ot,Et],{attribute:[0,"attribute"]},null),(e()(),Zl(16777216,null,null,1,null,Ba)),mi(4,16384,null,0,Iu,[Xt,Wt],{ngIf:[0,"ngIf"]},null),(e()(),ql(5,0,null,null,0,":svg:use",[],[[1,":xlink:href",0]],null,null,null,null))],(function(e,n){var t=n.component;e(n,2,0,t.attribute),e(n,4,0,t.title&&t.src)}),(function(e,n){var t=n.component;e(n,1,0,t.classes,t.width,t.height||t.width),e(n,5,0,t.src)}))}function za(e){return oo(0,[(e()(),ql(0,0,null,null,1,":svg:title",[],[[1,"id",0]],null,null,null,null)),(e()(),ro(1,null,["",""]))],null,(function(e,n){var t=n.component;e(n,0,0,t.src.split("#")[1]+"-title"),e(n,1,0,t.title)}))}function Ga(e){return oo(0,[(e()(),ql(0,0,null,null,4,null,null,null,null,null,null,null)),(e()(),ql(1,0,null,null,3,":svg:svg",[],[[1,"class",0],[1,"width",0],[1,"height",0],[1,"viewBox",0],[1,"preserveAspectRatio",0]],null,null,null,null)),(e()(),Zl(16777216,null,null,1,null,za)),mi(3,16384,null,0,Iu,[Xt,Wt],{ngIf:[0,"ngIf"]},null),(e()(),ql(4,0,null,null,0,":svg:use",[],[[1,":xlink:href",0]],null,null,null,null))],(function(e,n){var t=n.component;e(n,3,0,t.title&&t.src)}),(function(e,n){var t=n.component;e(n,1,0,t.classes,t.width,t.height||t.width,t.viewBox,t.preserveAspectRatio),e(n,4,0,t.src)}))}function Za(e){return oo(0,[(e()(),ql(0,0,null,null,1,":svg:title",[],[[1,"id",0]],null,null,null,null)),(e()(),ro(1,null,["",""]))],null,(function(e,n){var t=n.component;e(n,0,0,t.src.split("#")[1]+"-title"),e(n,1,0,t.title)}))}function qa(e){return oo(0,[(e()(),ql(0,0,null,null,5,null,null,null,null,null,null,null)),(e()(),ql(1,0,null,null,4,":svg:svg",[["svgIconSpriteAttr",""]],[[1,"class",0],[1,"width",0],[1,"height",0],[1,"viewBox",0],[1,"preserveAspectRatio",0]],null,null,null,null)),mi(2,81920,null,0,Ra,[Ot,Et],{attribute:[0,"attribute"]},null),(e()(),Zl(16777216,null,null,1,null,Za)),mi(4,16384,null,0,Iu,[Xt,Wt],{ngIf:[0,"ngIf"]},null),(e()(),ql(5,0,null,null,0,":svg:use",[],[[1,":xlink:href",0]],null,null,null,null))],(function(e,n){var t=n.component;e(n,2,0,t.attribute),e(n,4,0,t.title&&t.src)}),(function(e,n){var t=n.component;e(n,1,0,t.classes,t.width,t.height||t.width,t.viewBox,t.preserveAspectRatio),e(n,5,0,t.src)}))}function Qa(e){return oo(0,[(e()(),Zl(16777216,null,null,1,null,La)),mi(1,16384,null,0,Iu,[Xt,Wt],{ngIf:[0,"ngIf"]},null),(e()(),Zl(16777216,null,null,1,null,Ua)),mi(3,16384,null,0,Iu,[Xt,Wt],{ngIf:[0,"ngIf"]},null),(e()(),Zl(16777216,null,null,1,null,Ga)),mi(5,16384,null,0,Iu,[Xt,Wt],{ngIf:[0,"ngIf"]},null),(e()(),Zl(16777216,null,null,1,null,qa)),mi(7,16384,null,0,Iu,[Xt,Wt],{ngIf:[0,"ngIf"]},null)],(function(e,n){var t=n.component;e(n,1,0,!t.viewBox&&!t.attribute),e(n,3,0,!t.viewBox&&t.attribute),e(n,5,0,t.viewBox&&!t.attribute),e(n,7,0,t.viewBox&&t.attribute)}),null)}var Wa=function(){return function(e,n,t,r,i,l,o,u,a,s){this.source=e,this.name=n,this.size=t,this.hasViewBox=r,this.viewboxX1=i,this.viewboxY1=l,this.viewboxX2=o,this.viewboxY2=u,this.color=a,this.classes=s}}(),Ya=function(){function e(){this.initialSize=240,this.initialColor="#ab3030",this.icons=[{src:"assets/sprites/sprite.svg#star_100x100_viewbox",name:"Star (100 x 100px)",viewBoxX2:100},{src:"assets/sprites/sprite.svg#delete_70x70",name:"Trash (70 x 70px)",viewBoxX2:70},{src:"assets/sprites/sprite.svg#circle_24x24-viewbox",name:"Circle (24 x 24px)",viewBoxX2:24},{src:"assets/sprites/image-sprite.svg#multicolor-image",name:"Multicolor (250 x 250px)",viewBoxX2:250}],this.color="color: #ab3030"}return e.prototype.ngOnInit=function(){this.initialize(),this.calculateViewBox()},e.prototype.initialize=function(){this.model=new Wa(this.icons[0].src,this.icons[0].name,this.initialSize,!0,0,0,this.icons[0].viewBoxX2,this.icons[0].viewBoxX2,this.initialColor,"some-class-name")},e.prototype.reset=function(){this.initialize(),this.calculateViewBox()},e.prototype.applyChange=function(){var e=this,n=this.icons.find((function(n){return n.name===e.model.name}));if(console.log("icon model =>",n.src),this.model.source=n.src,this.model.hasViewBox){switch(this.model.source){case this.icons[0].src:this.model.viewboxY2=this.model.viewboxX2=this.icons[0].viewBoxX2;break;case this.icons[1].src:this.model.viewboxY2=this.model.viewboxX2=this.icons[1].viewBoxX2;break;case this.icons[2].src:this.model.viewboxY2=this.model.viewboxX2=this.icons[2].viewBoxX2;break;case this.icons[3].src:this.model.viewboxY2=this.model.viewboxX2=this.icons[3].viewBoxX2}this.calculateViewBox()}},e.prototype.calculateViewBox=function(){this.viewBox=this.model.viewboxX1+" "+this.model.viewboxY1+" "+this.model.viewboxX2+" "+this.model.viewboxY2},e}(),Xa=hr({encapsulation:0,styles:[["[_nghost-%COMP%] svg{border:1px dashed grey}.row[_ngcontent-%COMP%]{display:grid;grid-template-columns:repeat(12,1fr);grid-gap:10px}.col-symbol[_ngcontent-%COMP%]{grid-column:8/13}.col-symbol[_ngcontent-%COMP%] svg-icon-sprite{transition:color .05s ease-in-out}.col-symbol[_ngcontent-%COMP%] svg-icon-sprite:hover{color:#ff8c00!important}.col-symbol[_ngcontent-%COMP%] svg-icon-sprite:hover svg{box-shadow:2px 2px 2px #d3d3d3}.col-controls[_ngcontent-%COMP%]{grid-column:1/8}.col-preview[_ngcontent-%COMP%]{grid-column:4/13}@media screen and (max-width:1200px){.col-symbol[_ngcontent-%COMP%]{grid-column:7/13}.col-controls[_ngcontent-%COMP%]{grid-column:1/6}}@media screen and (max-width:768px){.col-controls[_ngcontent-%COMP%], .col-symbol[_ngcontent-%COMP%]{grid-column:1/13}}.controls[_ngcontent-%COMP%]{margin:10px 0}.controls[_ngcontent-%COMP%]:first-of-type{margin-top:-3px}.controls[_ngcontent-%COMP%] input[_ngcontent-%COMP%]{margin-right:10px}.controls[_ngcontent-%COMP%] select[_ngcontent-%COMP%]{padding:3px}.controls[_ngcontent-%COMP%] label[_ngcontent-%COMP%]:not(.inline){display:block}.controls[_ngcontent-%COMP%] .small[_ngcontent-%COMP%]{color:#555;font-size:90%}.controls[_ngcontent-%COMP%] .warning[_ngcontent-%COMP%]{color:#dc143c;display:block;margin-left:0}.controls[_ngcontent-%COMP%] .reset[_ngcontent-%COMP%]{padding-left:40px;padding-right:40px}.controls[_ngcontent-%COMP%] .viewbox-inputs[_ngcontent-%COMP%] input[_ngcontent-%COMP%]{width:40px;margin-right:2px}.tooltip[_ngcontent-%COMP%]{opacity:0;height:0;width:0;position:absolute;background-color:#555;color:#fff;padding:2px;border-radius:4px;font-size:90%;margin-left:3px;pointer-events:none;transition:opacity .1s ease-in-out}i[_ngcontent-%COMP%]{display:inline-block;background-color:#efefef;width:24px;height:24px;border-radius:50%;border:1px solid #767676;margin-left:5px;cursor:help;text-align:center;font-weight:bolder;font-style:normal}i[_ngcontent-%COMP%]:focus + .tooltip[_ngcontent-%COMP%], i[_ngcontent-%COMP%]:hover + .tooltip[_ngcontent-%COMP%]{opacity:.8;height:auto;width:auto}"]],data:{}});function Ka(e){return oo(0,[(e()(),ql(0,0,null,null,3,"option",[],null,null,null,null,null)),mi(1,147456,null,0,la,[Et,Ot,[2,ia]],{value:[0,"value"]},null),mi(2,147456,null,0,aa,[Et,Ot,[8,null]],{value:[0,"value"]},null),(e()(),ro(3,null,["",""]))],(function(e,n){e(n,1,0,n.context.$implicit.name),e(n,2,0,n.context.$implicit.name)}),(function(e,n){e(n,3,0,n.context.$implicit.name)}))}function $a(e){return oo(0,[(e()(),ql(0,0,null,null,1,"span",[["class","small warning"]],null,null,null,null,null)),(e()(),ro(-1,null,[" CSS only affects paths without fill or stroke attribute "]))],null,null)}function Ja(e){return oo(0,[(e()(),ql(0,0,null,null,2,null,null,null,null,null,null,null)),(e()(),ql(1,0,null,null,1,"svg-icon-sprite",[],[[1,"style",2]],null,null,Qa,ja)),mi(2,573440,null,0,Pa,[Na],{src:[0,"src"],classes:[1,"classes"],width:[2,"width"],viewBox:[3,"viewBox"]},null)],(function(e,n){var t=n.component;e(n,2,0,t.model.source,t.model.classes,t.model.size+"px",t.viewBox)}),(function(e,n){e(n,1,0,"color: "+n.component.model.color)}))}function es(e){return oo(0,[(e()(),ql(0,0,null,null,2,null,null,null,null,null,null,null)),(e()(),ql(1,0,null,null,1,"svg-icon-sprite",[],[[1,"style",2]],null,null,Qa,ja)),mi(2,573440,null,0,Pa,[Na],{src:[0,"src"],classes:[1,"classes"],width:[2,"width"]},null)],(function(e,n){var t=n.component;e(n,2,0,t.model.source,t.model.classes,t.model.size+"px")}),(function(e,n){e(n,1,0,"color: "+n.component.model.color)}))}function ns(e){return oo(0,[(e()(),ql(0,0,null,null,2,"pre",[],null,null,null,null,null)),(e()(),ql(1,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(2,null,[""]))],null,(function(e,n){var t=n.component;e(n,2,0,t.model.source,t.model.size,t.model.hasViewBox?"[viewBox]=\"'"+t.viewBox+"'\"":"",t.model.color)}))}function ts(e){return oo(0,[(e()(),ql(0,0,null,null,2,"pre",[],null,null,null,null,null)),(e()(),ql(1,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(2,null,[""]))],null,(function(e,n){var t=n.component;e(n,2,0,t.model.source,t.model.size,t.model.color)}))}function rs(e){return oo(0,[(e()(),ql(0,0,null,null,3,"h2",[],null,null,null,null,null)),(e()(),ro(-1,null,["Manipulation "])),(e()(),ql(2,0,null,null,1,"small",[],null,null,null,null,null)),(e()(),ro(-1,null,["(scaling and attributes)"])),(e()(),ql(4,0,null,null,110,"div",[["class","row"]],null,null,null,null,null)),(e()(),ql(5,0,null,null,95,"div",[["class","col-controls"]],null,null,null,null,null)),(e()(),ql(6,0,null,null,15,"div",[["class","controls"]],null,null,null,null,null)),(e()(),ql(7,0,null,null,1,"label",[["for","name"]],null,null,null,null,null)),(e()(),ro(-1,null,["Icon"])),(e()(),ql(9,0,null,null,9,"select",[["class","form-control"],["id","name"],["name","power"],["required",""]],[[1,"required",0],[2,"ng-untouched",null],[2,"ng-touched",null],[2,"ng-pristine",null],[2,"ng-dirty",null],[2,"ng-valid",null],[2,"ng-invalid",null],[2,"ng-pending",null]],[[null,"change"],[null,"ngModelChange"],[null,"blur"]],(function(e,n,t){var r=!0,i=e.component;return"change"===n&&(r=!1!==ai(e,10).onChange(t.target.value)&&r),"blur"===n&&(r=!1!==ai(e,10).onTouched()&&r),"change"===n&&(r=!1!==i.applyChange()&&r),"ngModelChange"===n&&(r=!1!==(i.model.name=t)&&r),r}),null,null)),mi(10,16384,null,0,ia,[Ot,Et],null,null),mi(11,16384,null,0,Va,[],{required:[0,"required"]},null),_i(1024,null,zu,(function(e){return[e]}),[Va]),_i(1024,null,Du,(function(e){return[e]}),[ia]),mi(14,671744,null,0,Oa,[[8,null],[6,zu],[8,null],[6,Du]],{name:[0,"name"],model:[1,"model"]},{update:"ngModelChange"}),_i(2048,null,Hu,null,[Oa]),mi(16,16384,null,0,Lu,[[4,Hu]],null,null),(e()(),Zl(16777216,null,null,1,null,Ka)),mi(18,278528,null,0,Eu,[Xt,Wt,zt],{ngForOf:[0,"ngForOf"]},null),(e()(),ql(19,0,null,null,0,"br",[],null,null,null,null,null)),(e()(),ql(20,0,null,null,1,"span",[["class","small"]],null,null,null,null,null)),(e()(),ro(21,null,["",""])),(e()(),ql(22,0,null,null,11,"div",[["class","controls"]],null,null,null,null,null)),(e()(),ql(23,0,null,null,1,"label",[["for","size"]],null,null,null,null,null)),(e()(),ro(-1,null,["Width"])),(e()(),ql(25,0,null,null,6,"input",[["id","size"],["max","300"],["min","24"],["name","icon-size"],["type","range"]],[[2,"ng-untouched",null],[2,"ng-touched",null],[2,"ng-pristine",null],[2,"ng-dirty",null],[2,"ng-valid",null],[2,"ng-invalid",null],[2,"ng-pending",null]],[[null,"ngModelChange"],[null,"input"],[null,"blur"],[null,"compositionstart"],[null,"compositionend"],[null,"change"]],(function(e,n,t){var r=!0,i=e.component;return"input"===n&&(r=!1!==ai(e,26)._handleInput(t.target.value)&&r),"blur"===n&&(r=!1!==ai(e,26).onTouched()&&r),"compositionstart"===n&&(r=!1!==ai(e,26)._compositionStart()&&r),"compositionend"===n&&(r=!1!==ai(e,26)._compositionEnd(t.target.value)&&r),"change"===n&&(r=!1!==ai(e,27).onChange(t.target.value)&&r),"input"===n&&(r=!1!==ai(e,27).onChange(t.target.value)&&r),"blur"===n&&(r=!1!==ai(e,27).onTouched()&&r),"ngModelChange"===n&&(r=!1!==(i.model.size=t)&&r),r}),null,null)),mi(26,16384,null,0,Pu,[Ot,Et,[2,Nu]],null,null),mi(27,16384,null,0,ea,[Ot,Et],null,null),_i(1024,null,Du,(function(e,n){return[e,n]}),[Pu,ea]),mi(29,671744,null,0,Oa,[[8,null],[8,null],[8,null],[6,Du]],{name:[0,"name"],model:[1,"model"]},{update:"ngModelChange"}),_i(2048,null,Hu,null,[Oa]),mi(31,16384,null,0,Lu,[[4,Hu]],null,null),(e()(),ql(32,0,null,null,1,"span",[["class","small"]],null,null,null,null,null)),(e()(),ro(33,null,["","px"])),(e()(),ql(34,0,null,null,14,"div",[["class","controls inline"]],null,null,null,null,null)),(e()(),ql(35,0,null,null,1,"label",[["class","inline"],["for","viewbox-on"]],null,null,null,null,null)),(e()(),ro(-1,null,["Viewbox"])),(e()(),ql(37,0,null,null,5,"input",[["id","viewbox-on"],["type","checkbox"]],[[2,"ng-untouched",null],[2,"ng-touched",null],[2,"ng-pristine",null],[2,"ng-dirty",null],[2,"ng-valid",null],[2,"ng-invalid",null],[2,"ng-pending",null]],[[null,"ngModelChange"],[null,"change"],[null,"blur"]],(function(e,n,t){var r=!0,i=e.component;return"change"===n&&(r=!1!==ai(e,38).onChange(t.target.checked)&&r),"blur"===n&&(r=!1!==ai(e,38).onTouched()&&r),"ngModelChange"===n&&(r=!1!==(i.model.hasViewBox=t)&&r),"change"===n&&(r=!1!==i.calculateViewBox()&&r),r}),null,null)),mi(38,16384,null,0,Mu,[Ot,Et],null,null),_i(1024,null,Du,(function(e){return[e]}),[Mu]),mi(40,671744,null,0,Oa,[[8,null],[8,null],[8,null],[6,Du]],{model:[0,"model"]},{update:"ngModelChange"}),_i(2048,null,Hu,null,[Oa]),mi(42,16384,null,0,Lu,[[4,Hu]],null,null),(e()(),ql(43,0,null,null,1,"span",[["class","small"]],null,null,null,null,null)),(e()(),ro(44,null,["",""])),(e()(),ql(45,0,null,null,1,"i",[["aria-labelledby","tooltip02"],["tabindex","0"]],null,null,null,null,null)),(e()(),ro(-1,null,["i"])),(e()(),ql(47,0,null,null,1,"span",[["class","tooltip"],["id","tooltip02"]],null,null,null,null,null)),(e()(),ro(-1,null,["Browsers might scale icons without a viewBox differently"])),(e()(),ql(49,0,null,null,35,"div",[["class","controls"]],null,null,null,null,null)),(e()(),ql(50,0,null,null,1,"label",[["for","viewbox1"]],null,null,null,null,null)),(e()(),ro(-1,null,["Viewbox values"])),(e()(),ql(52,0,null,null,32,"div",[["class","viewbox-inputs"]],null,null,null,null,null)),(e()(),ql(53,0,null,null,6,"input",[["id","viewbox1"],["type","number"]],[[2,"ng-untouched",null],[2,"ng-touched",null],[2,"ng-pristine",null],[2,"ng-dirty",null],[2,"ng-valid",null],[2,"ng-invalid",null],[2,"ng-pending",null]],[[null,"ngModelChange"],[null,"change"],[null,"keyup"],[null,"input"],[null,"blur"],[null,"compositionstart"],[null,"compositionend"]],(function(e,n,t){var r=!0,i=e.component;return"input"===n&&(r=!1!==ai(e,54)._handleInput(t.target.value)&&r),"blur"===n&&(r=!1!==ai(e,54).onTouched()&&r),"compositionstart"===n&&(r=!1!==ai(e,54)._compositionStart()&&r),"compositionend"===n&&(r=!1!==ai(e,54)._compositionEnd(t.target.value)&&r),"input"===n&&(r=!1!==ai(e,55).onChange(t.target.value)&&r),"blur"===n&&(r=!1!==ai(e,55).onTouched()&&r),"ngModelChange"===n&&(r=!1!==(i.model.viewboxX1=t)&&r),"change"===n&&(r=!1!==i.calculateViewBox()&&r),"keyup"===n&&(r=!1!==i.calculateViewBox()&&r),r}),null,null)),mi(54,16384,null,0,Pu,[Ot,Et,[2,Nu]],null,null),mi(55,16384,null,0,Ku,[Ot,Et],null,null),_i(1024,null,Du,(function(e,n){return[e,n]}),[Pu,Ku]),mi(57,671744,null,0,Oa,[[8,null],[8,null],[8,null],[6,Du]],{isDisabled:[0,"isDisabled"],model:[1,"model"]},{update:"ngModelChange"}),_i(2048,null,Hu,null,[Oa]),mi(59,16384,null,0,Lu,[[4,Hu]],null,null),(e()(),ql(60,0,null,null,6,"input",[["id","viewbox2"],["type","number"]],[[2,"ng-untouched",null],[2,"ng-touched",null],[2,"ng-pristine",null],[2,"ng-dirty",null],[2,"ng-valid",null],[2,"ng-invalid",null],[2,"ng-pending",null]],[[null,"ngModelChange"],[null,"change"],[null,"keyup"],[null,"input"],[null,"blur"],[null,"compositionstart"],[null,"compositionend"]],(function(e,n,t){var r=!0,i=e.component;return"input"===n&&(r=!1!==ai(e,61)._handleInput(t.target.value)&&r),"blur"===n&&(r=!1!==ai(e,61).onTouched()&&r),"compositionstart"===n&&(r=!1!==ai(e,61)._compositionStart()&&r),"compositionend"===n&&(r=!1!==ai(e,61)._compositionEnd(t.target.value)&&r),"input"===n&&(r=!1!==ai(e,62).onChange(t.target.value)&&r),"blur"===n&&(r=!1!==ai(e,62).onTouched()&&r),"ngModelChange"===n&&(r=!1!==(i.model.viewboxY1=t)&&r),"change"===n&&(r=!1!==i.calculateViewBox()&&r),"keyup"===n&&(r=!1!==i.calculateViewBox()&&r),r}),null,null)),mi(61,16384,null,0,Pu,[Ot,Et,[2,Nu]],null,null),mi(62,16384,null,0,Ku,[Ot,Et],null,null),_i(1024,null,Du,(function(e,n){return[e,n]}),[Pu,Ku]),mi(64,671744,null,0,Oa,[[8,null],[8,null],[8,null],[6,Du]],{isDisabled:[0,"isDisabled"],model:[1,"model"]},{update:"ngModelChange"}),_i(2048,null,Hu,null,[Oa]),mi(66,16384,null,0,Lu,[[4,Hu]],null,null),(e()(),ql(67,0,null,null,6,"input",[["id","viewbox3"],["type","number"]],[[2,"ng-untouched",null],[2,"ng-touched",null],[2,"ng-pristine",null],[2,"ng-dirty",null],[2,"ng-valid",null],[2,"ng-invalid",null],[2,"ng-pending",null]],[[null,"ngModelChange"],[null,"change"],[null,"keyup"],[null,"input"],[null,"blur"],[null,"compositionstart"],[null,"compositionend"]],(function(e,n,t){var r=!0,i=e.component;return"input"===n&&(r=!1!==ai(e,68)._handleInput(t.target.value)&&r),"blur"===n&&(r=!1!==ai(e,68).onTouched()&&r),"compositionstart"===n&&(r=!1!==ai(e,68)._compositionStart()&&r),"compositionend"===n&&(r=!1!==ai(e,68)._compositionEnd(t.target.value)&&r),"input"===n&&(r=!1!==ai(e,69).onChange(t.target.value)&&r),"blur"===n&&(r=!1!==ai(e,69).onTouched()&&r),"ngModelChange"===n&&(r=!1!==(i.model.viewboxX2=t)&&r),"change"===n&&(r=!1!==i.calculateViewBox()&&r),"keyup"===n&&(r=!1!==i.calculateViewBox()&&r),r}),null,null)),mi(68,16384,null,0,Pu,[Ot,Et,[2,Nu]],null,null),mi(69,16384,null,0,Ku,[Ot,Et],null,null),_i(1024,null,Du,(function(e,n){return[e,n]}),[Pu,Ku]),mi(71,671744,null,0,Oa,[[8,null],[8,null],[8,null],[6,Du]],{isDisabled:[0,"isDisabled"],model:[1,"model"]},{update:"ngModelChange"}),_i(2048,null,Hu,null,[Oa]),mi(73,16384,null,0,Lu,[[4,Hu]],null,null),(e()(),ql(74,0,null,null,6,"input",[["id","viewbox4"],["type","number"]],[[2,"ng-untouched",null],[2,"ng-touched",null],[2,"ng-pristine",null],[2,"ng-dirty",null],[2,"ng-valid",null],[2,"ng-invalid",null],[2,"ng-pending",null]],[[null,"ngModelChange"],[null,"change"],[null,"keyup"],[null,"input"],[null,"blur"],[null,"compositionstart"],[null,"compositionend"]],(function(e,n,t){var r=!0,i=e.component;return"input"===n&&(r=!1!==ai(e,75)._handleInput(t.target.value)&&r),"blur"===n&&(r=!1!==ai(e,75).onTouched()&&r),"compositionstart"===n&&(r=!1!==ai(e,75)._compositionStart()&&r),"compositionend"===n&&(r=!1!==ai(e,75)._compositionEnd(t.target.value)&&r),"input"===n&&(r=!1!==ai(e,76).onChange(t.target.value)&&r),"blur"===n&&(r=!1!==ai(e,76).onTouched()&&r),"ngModelChange"===n&&(r=!1!==(i.model.viewboxY2=t)&&r),"change"===n&&(r=!1!==i.calculateViewBox()&&r),"keyup"===n&&(r=!1!==i.calculateViewBox()&&r),r}),null,null)),mi(75,16384,null,0,Pu,[Ot,Et,[2,Nu]],null,null),mi(76,16384,null,0,Ku,[Ot,Et],null,null),_i(1024,null,Du,(function(e,n){return[e,n]}),[Pu,Ku]),mi(78,671744,null,0,Oa,[[8,null],[8,null],[8,null],[6,Du]],{isDisabled:[0,"isDisabled"],model:[1,"model"]},{update:"ngModelChange"}),_i(2048,null,Hu,null,[Oa]),mi(80,16384,null,0,Lu,[[4,Hu]],null,null),(e()(),ql(81,0,null,null,1,"i",[["aria-labelledby","tooltip01"],["tabindex","0"]],null,null,null,null,null)),(e()(),ro(-1,null,["i"])),(e()(),ql(83,0,null,null,1,"span",[["class","tooltip"],["id","tooltip01"]],null,null,null,null,null)),(e()(),ro(-1,null,["Decrease the last two values (x2, y2) equally to scale up"])),(e()(),ql(85,0,null,null,12,"div",[["class","controls"]],null,null,null,null,null)),(e()(),ql(86,0,null,null,1,"label",[["for","color"]],null,null,null,null,null)),(e()(),ro(-1,null,["Color"])),(e()(),ql(88,0,null,null,5,"input",[["id","color"],["name","color"],["type","color"]],[[2,"ng-untouched",null],[2,"ng-touched",null],[2,"ng-pristine",null],[2,"ng-dirty",null],[2,"ng-valid",null],[2,"ng-invalid",null],[2,"ng-pending",null]],[[null,"ngModelChange"],[null,"input"],[null,"blur"],[null,"compositionstart"],[null,"compositionend"]],(function(e,n,t){var r=!0,i=e.component;return"input"===n&&(r=!1!==ai(e,89)._handleInput(t.target.value)&&r),"blur"===n&&(r=!1!==ai(e,89).onTouched()&&r),"compositionstart"===n&&(r=!1!==ai(e,89)._compositionStart()&&r),"compositionend"===n&&(r=!1!==ai(e,89)._compositionEnd(t.target.value)&&r),"ngModelChange"===n&&(r=!1!==(i.model.color=t)&&r),r}),null,null)),mi(89,16384,null,0,Pu,[Ot,Et,[2,Nu]],null,null),_i(1024,null,Du,(function(e){return[e]}),[Pu]),mi(91,671744,null,0,Oa,[[8,null],[8,null],[8,null],[6,Du]],{name:[0,"name"],model:[1,"model"]},{update:"ngModelChange"}),_i(2048,null,Hu,null,[Oa]),mi(93,16384,null,0,Lu,[[4,Hu]],null,null),(e()(),ql(94,0,null,null,1,"span",[["class","small"]],null,null,null,null,null)),(e()(),ro(95,null,["",""])),(e()(),Zl(16777216,null,null,1,null,$a)),mi(97,16384,null,0,Iu,[Xt,Wt],{ngIf:[0,"ngIf"]},null),(e()(),ql(98,0,null,null,2,"div",[["class","controls"]],null,null,null,null,null)),(e()(),ql(99,0,null,null,1,"button",[["class","reset"]],null,[[null,"click"]],(function(e,n,t){var r=!0;return"click"===n&&(r=!1!==e.component.reset()&&r),r}),null,null)),(e()(),ro(-1,null,["Reset"])),(e()(),ql(101,0,null,null,4,"div",[["class","col-symbol"]],null,null,null,null,null)),(e()(),Zl(16777216,null,null,1,null,Ja)),mi(103,16384,null,0,Iu,[Xt,Wt],{ngIf:[0,"ngIf"]},null),(e()(),Zl(16777216,null,null,1,null,es)),mi(105,16384,null,0,Iu,[Xt,Wt],{ngIf:[0,"ngIf"]},null),(e()(),ql(106,0,null,null,8,"div",[["class","col-preview"]],null,null,null,null,null)),(e()(),Zl(16777216,null,null,1,null,ns)),mi(108,16384,null,0,Iu,[Xt,Wt],{ngIf:[0,"ngIf"]},null),(e()(),Zl(16777216,null,null,1,null,ts)),mi(110,16384,null,0,Iu,[Xt,Wt],{ngIf:[0,"ngIf"]},null),(e()(),ql(111,0,null,null,3,"small",[],null,null,null,null,null)),(e()(),ql(112,0,null,null,1,"em",[],null,null,null,null,null)),(e()(),ro(-1,null,["Tip:"])),(e()(),ro(-1,null,[" Put the color property directly into the CSS file "]))],(function(e,n){var t=n.component;e(n,11,0,""),e(n,14,0,"power",t.model.name),e(n,18,0,t.icons),e(n,29,0,"icon-size",t.model.size),e(n,40,0,t.model.hasViewBox),e(n,57,0,!t.model.hasViewBox,t.model.viewboxX1),e(n,64,0,!t.model.hasViewBox,t.model.viewboxY1),e(n,71,0,!t.model.hasViewBox,t.model.viewboxX2),e(n,78,0,!t.model.hasViewBox,t.model.viewboxY2),e(n,91,0,"color",t.model.color),e(n,97,0,t.model.source.includes("multicolor-image")),e(n,103,0,t.model.hasViewBox),e(n,105,0,!t.model.hasViewBox),e(n,108,0,t.model.hasViewBox),e(n,110,0,!t.model.hasViewBox)}),(function(e,n){var t=n.component;e(n,9,0,ai(n,11).required?"":null,ai(n,16).ngClassUntouched,ai(n,16).ngClassTouched,ai(n,16).ngClassPristine,ai(n,16).ngClassDirty,ai(n,16).ngClassValid,ai(n,16).ngClassInvalid,ai(n,16).ngClassPending),e(n,21,0,t.model.source),e(n,25,0,ai(n,31).ngClassUntouched,ai(n,31).ngClassTouched,ai(n,31).ngClassPristine,ai(n,31).ngClassDirty,ai(n,31).ngClassValid,ai(n,31).ngClassInvalid,ai(n,31).ngClassPending),e(n,33,0,t.model.size),e(n,37,0,ai(n,42).ngClassUntouched,ai(n,42).ngClassTouched,ai(n,42).ngClassPristine,ai(n,42).ngClassDirty,ai(n,42).ngClassValid,ai(n,42).ngClassInvalid,ai(n,42).ngClassPending),e(n,44,0,t.model.hasViewBox?"enabled":"disabled"),e(n,53,0,ai(n,59).ngClassUntouched,ai(n,59).ngClassTouched,ai(n,59).ngClassPristine,ai(n,59).ngClassDirty,ai(n,59).ngClassValid,ai(n,59).ngClassInvalid,ai(n,59).ngClassPending),e(n,60,0,ai(n,66).ngClassUntouched,ai(n,66).ngClassTouched,ai(n,66).ngClassPristine,ai(n,66).ngClassDirty,ai(n,66).ngClassValid,ai(n,66).ngClassInvalid,ai(n,66).ngClassPending),e(n,67,0,ai(n,73).ngClassUntouched,ai(n,73).ngClassTouched,ai(n,73).ngClassPristine,ai(n,73).ngClassDirty,ai(n,73).ngClassValid,ai(n,73).ngClassInvalid,ai(n,73).ngClassPending),e(n,74,0,ai(n,80).ngClassUntouched,ai(n,80).ngClassTouched,ai(n,80).ngClassPristine,ai(n,80).ngClassDirty,ai(n,80).ngClassValid,ai(n,80).ngClassInvalid,ai(n,80).ngClassPending),e(n,88,0,ai(n,93).ngClassUntouched,ai(n,93).ngClassTouched,ai(n,93).ngClassPristine,ai(n,93).ngClassDirty,ai(n,93).ngClassValid,ai(n,93).ngClassInvalid,ai(n,93).ngClassPending),e(n,95,0,t.model.color)}))}var is=hr({encapsulation:0,styles:[["@-webkit-keyframes mymove{0%{transform:translateX(0)}50%{transform:translateX(2px)}75%{transform:translateX(0)}to{transform:translateX(-2px)}}@keyframes mymove{0%{transform:translateX(0)}50%{transform:translateX(2px)}75%{transform:translateX(0)}to{transform:translateX(-2px)}}@-webkit-keyframes pulse{0%{color:#24292e}50%{color:#b03a2e}to{color:#24292e}}@keyframes pulse{0%{color:#24292e}50%{color:#b03a2e}to{color:#24292e}}.icon-examples-1[_ngcontent-%COMP%]{color:#8b0000;transition:transform .2s ease-in-out;-ms-transform-origin:center center;transform-origin:center center}.icon-examples-1[_ngcontent-%COMP%]:focus, .icon-examples-1[_ngcontent-%COMP%]:hover{color:red;-ms-transform:rotate(12deg);transform:rotate(12deg)}.icon-examples-2[_ngcontent-%COMP%]{color:#006400;transition:color .4s ease-in-out}.icon-examples-2[_ngcontent-%COMP%]:focus, .icon-examples-2[_ngcontent-%COMP%]:hover{color:#32cd32}.icon-examples-3[_ngcontent-%COMP%]{transition:transform .2s ease-in-out;-ms-transform-origin:center center;transform-origin:center center}.icon-examples-3[_ngcontent-%COMP%]:focus, .icon-examples-3[_ngcontent-%COMP%]:hover{-ms-transform:scale(1.1);transform:scale(1.1)}.icon-examples-4[_ngcontent-%COMP%]{color:#8b0000}.icon-examples-4[_ngcontent-%COMP%]:focus, .icon-examples-4[_ngcontent-%COMP%]:hover{color:brown}.icon-examples-5[_ngcontent-%COMP%]{color:#ff8c00;transition:color .1s ease-in-out}.icon-examples-5[_ngcontent-%COMP%]:focus, .icon-examples-5[_ngcontent-%COMP%]:hover{color:#b8860b}.icon-examples-6[_ngcontent-%COMP%]{transition:transform .1s ease-in-out;-ms-transform-origin:center center;transform-origin:center center}.icon-examples-6[_ngcontent-%COMP%]:focus, .icon-examples-6[_ngcontent-%COMP%]:hover{transform:rotateY(30deg)}.icon-scale-down[_ngcontent-%COMP%]{-ms-transform:scale(.5);transform:scale(.5)}.icon-scale-up[_ngcontent-%COMP%]{-ms-transform:scale(5);transform:scale(5)}.container[_ngcontent-%COMP%] .styled-icon use{fill:orange;stroke:#000}.headline-green[_ngcontent-%COMP%]{color:#1e8449;-webkit-animation:pulse 5s infinite;animation:pulse 5s infinite}"]],data:{}});function ls(e){return oo(0,[(e()(),ql(0,0,null,null,194,"div",[["class","container"]],null,null,null,null,null)),(e()(),ql(1,0,null,null,3,"h1",[],null,null,null,null,null)),(e()(),ro(-1,null,["SVG-Icon-Sprite "])),(e()(),ql(3,0,null,null,1,"small",[],null,null,null,null,null)),(e()(),ro(-1,null,["Demo"])),(e()(),ql(5,0,null,null,1,"app-manipulator",[],null,null,null,rs,Xa)),mi(6,114688,null,0,Ya,[],null,null),(e()(),ql(7,0,null,null,3,"h2",[["id","manipulation"]],null,null,null,null,null)),(e()(),ro(-1,null,["The Basics "])),(e()(),ql(9,0,null,null,1,"small",[],null,null,null,null,null)),(e()(),ro(-1,null,["(reference, width and styling)"])),(e()(),ql(11,0,null,null,7,"p",[],null,null,null,null,null)),(e()(),ro(-1,null,["To display the icons in original size match the "])),(e()(),ql(13,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(-1,null,["[width]"])),(e()(),ro(-1,null,[" and "])),(e()(),ql(16,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(-1,null,["[height]"])),(e()(),ro(-1,null,[" with the width/height of the equivalent SVG."])),(e()(),ql(19,0,null,null,17,"ul",[["class","vertical"]],null,null,null,null,null)),(e()(),ql(20,0,null,null,9,"li",[],null,null,null,null,null)),(e()(),ql(21,0,null,null,2,"div",[["class","icon-row icon-examples-1"]],null,null,null,null,null)),(e()(),ql(22,0,null,null,1,"svg-icon-sprite",[["src","star_100x100"]],null,null,null,Qa,ja)),mi(23,573440,null,0,Pa,[Na],{src:[0,"src"],width:[1,"width"]},null),(e()(),ql(24,0,null,null,5,"pre",[],null,null,null,null,null)),(e()(),ql(25,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(-1,null,[""])),(e()(),ro(-1,null,["\n\n"])),(e()(),ql(28,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(29,null,[".icon-example ","\n color: darkred;\n",""])),(e()(),ql(30,0,null,null,6,"li",[],null,null,null,null,null)),(e()(),ql(31,0,null,null,2,"div",[["class","icon-row icon-examples-2"]],null,null,null,null,null)),(e()(),ql(32,0,null,null,1,"svg-icon-sprite",[],null,null,null,Qa,ja)),mi(33,573440,null,0,Pa,[Na],{src:[0,"src"],width:[1,"width"],height:[2,"height"]},null),(e()(),ql(34,0,null,null,2,"pre",[],null,null,null,null,null)),(e()(),ql(35,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(-1,null,[""])),(e()(),ql(37,0,null,null,13,"p",[],null,null,null,null,null)),(e()(),ro(-1,null,[" To access the inner SVG attributes like "])),(e()(),ql(39,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(-1,null,["fill"])),(e()(),ro(-1,null,[" or "])),(e()(),ql(42,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(-1,null,["stroke"])),(e()(),ro(-1,null,[" via CSS use "])),(e()(),ql(45,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(-1,null,["::ng-deep"])),(e()(),ro(-1,null,[" - this works only when these attributes were either "])),(e()(),ql(48,0,null,null,1,"strong",[],null,null,null,null,null)),(e()(),ro(-1,null,["stripped or lacking"])),(e()(),ro(-1,null,[" after export. "])),(e()(),ql(51,0,null,null,7,"ul",[["class","vertical"]],null,null,null,null,null)),(e()(),ql(52,0,null,null,6,"li",[],null,null,null,null,null)),(e()(),ql(53,0,null,null,2,"div",[["class","icon-row icon-examples-3"],["style","padding-top: 20px;"]],null,null,null,null,null)),(e()(),ql(54,0,null,null,1,"svg-icon-sprite",[],null,null,null,Qa,ja)),mi(55,573440,null,0,Pa,[Na],{src:[0,"src"],classes:[1,"classes"],width:[2,"width"]},null),(e()(),ql(56,0,null,null,2,"pre",[],null,null,null,null,null)),(e()(),ql(57,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(58,null,["::ng-deep ","\n .styled-icon ","\n use ","\n fill: orange;\n stroke: black;\n ","\n ","\n",""])),(e()(),ql(59,0,null,null,3,"h2",[["id","scaling"]],null,null,null,null,null)),(e()(),ro(-1,null,["Alternative Scaling "])),(e()(),ql(61,0,null,null,1,"small",[],null,null,null,null,null)),(e()(),ro(-1,null,["(using CSS transform)"])),(e()(),ql(63,0,null,null,7,"p",[],null,null,null,null,null)),(e()(),ro(-1,null,["Scaling via "])),(e()(),ql(65,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(-1,null,["viewBox"])),(e()(),ro(-1,null,[" might differ across browsers. It might be easier to use CSS transforms. Wrap the SVG into a "])),(e()(),ql(68,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(-1,null,["div"])),(e()(),ro(-1,null,[" and transform its size."])),(e()(),ql(71,0,null,null,16,"ul",[["class","vertical"]],null,null,null,null,null)),(e()(),ql(72,0,null,null,7,"li",[],null,null,null,null,null)),(e()(),ql(73,0,null,null,3,"div",[["class","icon-row icon-examples-4"],["style","height: 0;"]],null,null,null,null,null)),(e()(),ql(74,0,null,null,2,"div",[["class","icon-scale-up"]],null,null,null,null,null)),(e()(),ql(75,0,null,null,1,"svg-icon-sprite",[],null,null,null,Qa,ja)),mi(76,573440,null,0,Pa,[Na],{src:[0,"src"],width:[1,"width"]},null),(e()(),ql(77,0,null,null,2,"pre",[],null,null,null,null,null)),(e()(),ql(78,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(79,null,["// Scale up by 500%\n.icon-scale-up ","\n transform: scale(5);\n",""])),(e()(),ql(80,0,null,null,7,"li",[],null,null,null,null,null)),(e()(),ql(81,0,null,null,3,"div",[["class","icon-row icon-examples-2"]],null,null,null,null,null)),(e()(),ql(82,0,null,null,2,"div",[["class","icon-scale-down"],["style","padding-bottom: 20px;"]],null,null,null,null,null)),(e()(),ql(83,0,null,null,1,"svg-icon-sprite",[],null,null,null,Qa,ja)),mi(84,573440,null,0,Pa,[Na],{src:[0,"src"],width:[1,"width"]},null),(e()(),ql(85,0,null,null,2,"pre",[],null,null,null,null,null)),(e()(),ql(86,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(87,null,["// Scale down by 50%\n.icon-scale-down ","\n transform: scale(0.5);\n",""])),(e()(),ql(88,0,null,null,1,"h2",[["id","defaultpath"]],null,null,null,null,null)),(e()(),ro(-1,null,["Default sprite path"])),(e()(),ro(-1,null,[" Set the sprite path in your "])),(e()(),ql(91,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(-1,null,["environment.ts"])),(e()(),ro(-1,null,[" and set the default path using "])),(e()(),ql(94,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(-1,null,["forRoot()"])),(e()(),ro(-1,null,[". Now you can invoke the component and simply pass the plain icon name as "])),(e()(),ql(97,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(-1,null,["[src]"])),(e()(),ro(-1,null,[". "])),(e()(),ql(100,0,null,null,11,"ul",[["class","vertical"]],null,null,null,null,null)),(e()(),ql(101,0,null,null,10,"li",[],null,null,null,null,null)),(e()(),ql(102,0,null,null,2,"div",[["class","icon-row"],["style","padding-top: 30px"]],null,null,null,null,null)),(e()(),ql(103,0,null,null,1,"svg-icon-sprite",[],null,null,null,Qa,ja)),mi(104,573440,null,0,Pa,[Na],{src:[0,"src"],width:[1,"width"]},null),(e()(),ql(105,0,null,null,6,"div",[["class","pre-vertical"]],null,null,null,null,null)),(e()(),ql(106,0,null,null,2,"pre",[],null,null,null,null,null)),(e()(),ql(107,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(108,null,["import "," IconSpriteModule "," from 'ng-svg-icon-sprite';\nimport "," environment "," from '../environments/environment';\n\n@NgModule(","\n imports: [\n IconSpriteModule.forRoot("," path: environment.spritePath ",")\n"])),(e()(),ql(109,0,null,null,2,"pre",[],null,null,null,null,null)),(e()(),ql(110,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(-1,null,[""])),(e()(),ql(112,0,null,null,11,"p",[["style","padding-left: 25%;"]],null,null,null,null,null)),(e()(),ql(113,0,null,null,1,"strong",[],null,null,null,null,null)),(e()(),ro(-1,null,["Advanced Tip:"])),(e()(),ro(-1,null,[" to change the sprite path during runtime, inject the "])),(e()(),ql(116,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(-1,null,["iconSpriteService"])),(e()(),ro(-1,null,[" anywhere and execute "])),(e()(),ql(119,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(-1,null,["this.iconSpriteService.setPath('new-path.svg')"])),(e()(),ro(-1,null,[" Re-render all icon-components afterwards!   "])),(e()(),ql(122,0,null,null,1,"button",[],[[8,"disabled",0]],[[null,"click"]],(function(e,n,t){var r=!0,i=e.component;return"click"===n&&(i.changeDefaultSpritePath(),r=0!=(i.changeDone=!0)&&r),r}),null,null)),(e()(),ro(-1,null,["Change and render"])),(e()(),ql(124,0,null,null,3,"h2",[["id","a11y"]],null,null,null,null,null)),(e()(),ro(-1,null,["Accessible example "])),(e()(),ql(126,0,null,null,1,"small",[],null,null,null,null,null)),(e()(),ro(-1,null,["(meaningful icon pattern)"])),(e()(),ql(128,0,null,null,10,"ul",[["class","vertical"]],null,null,null,null,null)),(e()(),ql(129,0,null,null,9,"li",[],null,null,null,null,null)),(e()(),ql(130,0,null,null,5,"div",[["class","icon-row icon-examples-5"]],null,null,null,null,null)),(e()(),ql(131,0,null,null,4,"svg-icon-sprite",[],null,null,null,Qa,ja)),mi(132,573440,null,0,Pa,[Na],{src:[0,"src"],width:[1,"width"],attribute:[2,"attribute"],title:[3,"title"]},null),to(133,2),to(134,2),to(135,2),(e()(),ql(136,0,null,null,2,"pre",[],null,null,null,null,null)),(e()(),ql(137,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(-1,null,[""])),(e()(),ro(-1,null,[" Adding "])),(e()(),ql(140,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(-1,null,["[title]=\"'Orange star'\""])),(e()(),ro(-1,null,[" will render "])),(e()(),ql(143,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(-1,null,['Orange star'])),(e()(),ro(-1,null,[" as the first child of the SVG node and serve as alternative text for screen readers. To improve support, you can additionally reference the title's node via "])),(e()(),ql(146,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(-1,null,["'aria-labelledby'"])),(e()(),ro(-1,null,[" using the title's generated id "])),(e()(),ql(149,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(-1,null,["star_100x100-title"])),(e()(),ro(-1,null,[" and set the "])),(e()(),ql(152,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(-1,null,["role"])),(e()(),ro(-1,null,[" to "])),(e()(),ql(155,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(-1,null,["img"])),(e()(),ro(-1,null,[". "])),(e()(),ql(158,0,null,null,3,"h2",[["id","multicolor"]],null,null,null,null,null)),(e()(),ro(-1,null,["Multicolor Icons "])),(e()(),ql(160,0,null,null,1,"small",[],null,null,null,null,null)),(e()(),ro(-1,null,["(preserving svg attributes)"])),(e()(),ro(-1,null,[" If you want to include an additional multicolor icon in your app, provide it form a separate sprite file (where the fill and stroke attributes are not stripped). Remember that you will not be able to overwrite it's styles via CSS, unless a path lacks the fill/stroke attribute. "])),(e()(),ql(163,0,null,null,7,"ul",[["class","vertical"]],null,null,null,null,null)),(e()(),ql(164,0,null,null,6,"li",[],null,null,null,null,null)),(e()(),ql(165,0,null,null,2,"div",[["class","icon-row icon-examples-6"],["style","width: 33%;"]],null,null,null,null,null)),(e()(),ql(166,0,null,null,1,"svg-icon-sprite",[],null,null,null,Qa,ja)),mi(167,573440,null,0,Pa,[Na],{src:[0,"src"],width:[1,"width"]},null),(e()(),ql(168,0,null,null,2,"pre",[["style","height: 70px;"]],null,null,null,null,null)),(e()(),ql(169,0,null,null,1,"code",[],null,null,null,null,null)),(e()(),ro(-1,null,["\n"])),(e()(),ql(171,0,null,null,1,"h2",[["class","headline-green"]],null,null,null,null,null)),(e()(),ro(-1,null,["Why not a Web Component?"])),(e()(),ro(-1,null,[" You are using Web Components in your Angular app? Try "])),(e()(),ql(174,0,null,null,1,"a",[["href","https://jannicz.github.io/svg-icon-sprite/"]],null,null,null,null,null)),(e()(),ro(-1,null,["this simpler but similar library"])),(e()(),ro(-1,null,[", realized as web component! "])),(e()(),ql(177,0,null,null,1,"h2",[],null,null,null,null,null)),(e()(),ro(-1,null,["Bugs"])),(e()(),ql(179,0,null,null,3,"p",[],null,null,null,null,null)),(e()(),ro(-1,null,[" Report bugs or feature requests on "])),(e()(),ql(181,0,null,null,1,"a",[["href","https://github.com/jannicz/ng-svg-icon-sprite/issues"]],null,null,null,null,null)),(e()(),ro(-1,null,["Github Issues"])),(e()(),ql(183,0,null,null,8,"ul",[],null,null,null,null,null)),(e()(),ql(184,0,null,null,3,"li",[],null,null,null,null,null)),(e()(),ql(185,0,null,null,2,"a",[["href","https://github.com/jannicz/ng-svg-icon-sprite"]],null,null,null,null,null)),(e()(),ql(186,0,null,null,1,"strong",[],null,null,null,null,null)),(e()(),ro(-1,null,["ng-svg-icon-sprite sources on Github"])),(e()(),ql(188,0,null,null,3,"li",[],null,null,null,null,null)),(e()(),ql(189,0,null,null,2,"a",[["href","https://www.npmjs.com/package/ng-svg-icon-sprite"]],null,null,null,null,null)),(e()(),ql(190,0,null,null,1,"strong",[],null,null,null,null,null)),(e()(),ro(-1,null,["ng-svg-icon-sprite package on npm"])),(e()(),ql(192,0,null,null,2,"p",[],null,null,null,null,null)),(e()(),ql(193,0,null,null,1,"small",[],null,null,null,null,null)),(e()(),ro(-1,null,["Copyright Jan Suwart, MIT license"]))],(function(e,n){e(n,6,0),e(n,23,0,"star_100x100","100px"),e(n,33,0,"assets/sprites/sprite.svg#delete_70x70","70px","65px"),e(n,55,0,"star_100x100_viewbox","styled-icon","100px"),e(n,76,0,"assets/sprites/sprite.svg#circle_24x24-viewbox","24px"),e(n,84,0,"assets/sprites/sprite.svg#delete_70x70","70px"),e(n,104,0,"delete_70x70","100px");var t=e(n,135,0,e(n,133,0,"aria-labelledby","star_100x100-title"),e(n,134,0,"role","img"));e(n,132,0,"star_100x100","100px",t,"Orange star"),e(n,167,0,"assets/sprites/image-sprite.svg#multicolor-image","250px")}),(function(e,n){var t=n.component;e(n,29,0,"{","}"),e(n,58,0,"{","{","{","}","}","}"),e(n,79,0,"{","}"),e(n,87,0,"{","}"),e(n,108,0,"{","}","{","}","{","{","}"),e(n,122,0,t.changeDone)}))}function os(e){return oo(0,[(e()(),Zl(16777216,null,null,1,null,ls)),mi(1,16384,null,0,Iu,[Xt,Wt],{ngIf:[0,"ngIf"]},null)],(function(e,n){e(n,1,0,!n.component.changed)}),null)}function us(e){return oo(0,[(e()(),ql(0,0,null,null,1,"app-root",[],null,null,null,os,is)),mi(1,114688,null,0,gu,[Na],null,null)],(function(e,n){e(n,1,0)}),null)}var as,ss=Kr("app-root",gu,us,{},{},[]),cs=function(e){h(t,e);var n=g(t);function t(){return y(this,t),n.apply(this,arguments)}return _(t,[{key:"getProperty",value:function(e,n){return e[n]}},{key:"log",value:function(e){window.console&&window.console.log&&window.console.log(e)}},{key:"logGroup",value:function(e){window.console&&window.console.group&&window.console.group(e)}},{key:"logGroupEnd",value:function(){window.console&&window.console.groupEnd&&window.console.groupEnd()}},{key:"onAndCancel",value:function(e,n,t){return e.addEventListener(n,t,!1),function(){e.removeEventListener(n,t,!1)}}},{key:"dispatchEvent",value:function(e,n){e.dispatchEvent(n)}},{key:"remove",value:function(e){return e.parentNode&&e.parentNode.removeChild(e),e}},{key:"getValue",value:function(e){return e.value}},{key:"createElement",value:function(e,n){return(n=n||this.getDefaultDocument()).createElement(e)}},{key:"createHtmlDocument",value:function(){return document.implementation.createHTMLDocument("fakeTitle")}},{key:"getDefaultDocument",value:function(){return document}},{key:"isElementNode",value:function(e){return e.nodeType===Node.ELEMENT_NODE}},{key:"isShadowRoot",value:function(e){return e instanceof DocumentFragment}},{key:"getGlobalEventTarget",value:function(e,n){return"window"===n?window:"document"===n?e:"body"===n?e.body:null}},{key:"getHistory",value:function(){return window.history}},{key:"getLocation",value:function(){return window.location}},{key:"getBaseHref",value:function(e){var n,t=ds||(ds=document.querySelector("base"))?ds.getAttribute("href"):null;return null==t?null:(n=t,as||(as=document.createElement("a")),as.setAttribute("href",n),"/"===as.pathname.charAt(0)?as.pathname:"/"+as.pathname)}},{key:"resetBaseElement",value:function(){ds=null}},{key:"getUserAgent",value:function(){return window.navigator.userAgent}},{key:"performanceNow",value:function(){return window.performance&&window.performance.now?window.performance.now():(new Date).getTime()}},{key:"supportsCookies",value:function(){return!0}},{key:"getCookie",value:function(e){return function(e,n){n=encodeURIComponent(n);var t,r=c(e.split(";"));try{for(r.s();!(t=r.n()).done;){var i=t.value,l=i.indexOf("="),o=a(-1==l?[i,""]:[i.slice(0,l),i.slice(l+1)],2),u=o[1];if(o[0].trim()===n)return decodeURIComponent(u)}}catch(s){r.e(s)}finally{r.f()}return null}(document.cookie,e)}}],[{key:"makeCurrent",value:function(){var e;e=new t,yu||(yu=e)}}]),t}(function(e){h(t,e);var n=g(t);function t(){return y(this,t),n.call(this)}return _(t,[{key:"supportsDOMEvents",value:function(){return!0}}]),t}(_u)),ds=null,hs=new je("TRANSITION_ID"),fs=[{provide:zi,useFactory:function(e,n,t){return function(){t.get(Gi).donePromise.then((function(){var t=mu();Array.prototype.slice.apply(n.querySelectorAll("style[ng-transition]")).filter((function(n){return n.getAttribute("ng-transition")===e})).forEach((function(e){return t.remove(e)}))}))}},deps:[hs,wu,Kn],multi:!0}],vs=function(){function e(){y(this,e)}return _(e,[{key:"addToWindow",value:function(e){Fe.getAngularTestability=function(n){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],r=e.findTestabilityInTree(n,t);if(null==r)throw new Error("Could not find testability for element.");return r},Fe.getAllAngularTestabilities=function(){return e.getAllTestabilities()},Fe.getAllAngularRootElements=function(){return e.getAllRootElements()},Fe.frameworkStabilizers||(Fe.frameworkStabilizers=[]),Fe.frameworkStabilizers.push((function(e){var n=Fe.getAllAngularTestabilities(),t=n.length,r=!1,i=function(n){r=r||n,0==--t&&e(r)};n.forEach((function(e){e.whenStable(i)}))}))}},{key:"findTestabilityInTree",value:function(e,n,t){if(null==n)return null;var r=e.getTestability(n);return null!=r?r:t?mu().isShadowRoot(n)?this.findTestabilityInTree(e,n.host,!0):this.findTestabilityInTree(e,n.parentElement,!0):null}}],[{key:"init",value:function(){var n;n=new e,wl=n}}]),e}();function ps(e,n){"undefined"!=typeof COMPILED&&COMPILED||((Fe.ng=Fe.ng||{})[e]=n)}var gs=function(){return{ApplicationRef:Vl,NgZone:sl}}();function ys(e){return Rl(e)}var ms=new je("EventManagerPlugins"),_s=function(){function e(n,t){var r=this;y(this,e),this._zone=t,this._eventNameToPlugin=new Map,n.forEach((function(e){return e.manager=r})),this._plugins=n.slice().reverse()}return _(e,[{key:"addEventListener",value:function(e,n,t){return this._findPluginFor(n).addEventListener(e,n,t)}},{key:"addGlobalEventListener",value:function(e,n,t){return this._findPluginFor(n).addGlobalEventListener(e,n,t)}},{key:"getZone",value:function(){return this._zone}},{key:"_findPluginFor",value:function(e){var n=this._eventNameToPlugin.get(e);if(n)return n;for(var t=this._plugins,r=0;r-1}}]),t}(ws),Hs=["alt","control","meta","shift"],Ls={"\b":"Backspace","\t":"Tab","\x7f":"Delete","\x1b":"Escape",Del:"Delete",Esc:"Escape",Left:"ArrowLeft",Right:"ArrowRight",Up:"ArrowUp",Down:"ArrowDown",Menu:"ContextMenu",Scroll:"ScrollLock",Win:"OS"},Bs={A:"1",B:"2",C:"3",D:"4",E:"5",F:"6",G:"7",H:"8",I:"9",J:"*",K:"+",M:"-",N:".",O:"/","`":"0","\x90":"NumLock"},Us={alt:function(e){return e.altKey},control:function(e){return e.ctrlKey},meta:function(e){return e.metaKey},shift:function(e){return e.shiftKey}},zs=function(e){h(t,e);var n=g(t);function t(e){return y(this,t),n.call(this,e)}return _(t,[{key:"supports",value:function(e){return null!=t.parseEventName(e)}},{key:"addEventListener",value:function(e,n,r){var i=t.parseEventName(n),l=t.eventCallback(i.fullKey,r,this.manager.getZone());return this.manager.getZone().runOutsideAngular((function(){return mu().onAndCancel(e,i.domEventName,l)}))}}],[{key:"parseEventName",value:function(e){var n=e.toLowerCase().split("."),r=n.shift();if(0===n.length||"keydown"!==r&&"keyup"!==r)return null;var i=t._normalizeKey(n.pop()),l="";if(Hs.forEach((function(e){var t=n.indexOf(e);t>-1&&(n.splice(t,1),l+=e+".")})),l+=i,0!=n.length||0===i.length)return null;var o={};return o.domEventName=r,o.fullKey=l,o}},{key:"getEventFullKey",value:function(e){var n="",t=function(e){var n=e.key;if(null==n){if(null==(n=e.keyIdentifier))return"Unidentified";n.startsWith("U+")&&(n=String.fromCharCode(parseInt(n.substring(2),16)),3===e.location&&Bs.hasOwnProperty(n)&&(n=Bs[n]))}return Ls[n]||n}(e);return" "===(t=t.toLowerCase())?t="space":"."===t&&(t="dot"),Hs.forEach((function(r){r!=t&&(0,Us[r])(e)&&(n+=r+".")})),n+=t}},{key:"eventCallback",value:function(e,n,r){return function(i){t.getEventFullKey(i)===e&&r.runGuarded((function(){return n(i)}))}}},{key:"_normalizeKey",value:function(e){switch(e){case"esc":return"escape";default:return e}}}]),t}(ws),Gs=function(){var e=function e(){y(this,e)};return e.\u0275prov=xe({factory:function(){return qe(Zs)},token:e,providedIn:"root"}),e}(),Zs=function(){var e=function(e){h(t,e);var n=g(t);function t(e){var r;return y(this,t),(r=n.call(this))._doc=e,r}return _(t,[{key:"sanitize",value:function(e,n){if(null==n)return null;switch(e){case Gn.NONE:return n;case Gn.HTML:return yn(n,"HTML")?gn(n):function(e,n){var t=null;try{On=On||function(e){return function(){try{return!!(new window.DOMParser).parseFromString("","text/html")}catch(e){return!1}}()?new kn:new Cn(e)}(e);var r=n?String(n):"";t=On.getInertBodyElement(r);var i=5,l=r;do{if(0===i)throw new Error("Failed to sanitize html because the input is unstable");i--,r=l,l=t.innerHTML,t=On.getInertBodyElement(r)}while(r!==l);var o=new Hn,u=o.sanitizeChildren(zn(t)||t);return bn()&&o.sanitizedSomething&&console.warn("WARNING: sanitizing HTML stripped some content, see http://g.co/ng/security#xss"),u}finally{if(t)for(var a=zn(t)||t;a.firstChild;)a.removeChild(a.firstChild)}}(this._doc,String(n));case Gn.STYLE:return yn(n,"Style")?gn(n):n;case Gn.SCRIPT:if(yn(n,"Script"))return gn(n);throw new Error("unsafe value used in a script context");case Gn.URL:return mn(n),yn(n,"URL")?gn(n):Tn(String(n));case Gn.RESOURCE_URL:if(yn(n,"ResourceURL"))return gn(n);throw new Error("unsafe value used in a resource URL context (see http://g.co/ng/security#xss)");default:throw new Error("Unexpected SecurityContext ".concat(e," (see http://g.co/ng/security#xss)"))}}},{key:"bypassSecurityTrustHtml",value:function(e){return new dn(e)}},{key:"bypassSecurityTrustStyle",value:function(e){return new hn(e)}},{key:"bypassSecurityTrustScript",value:function(e){return new fn(e)}},{key:"bypassSecurityTrustUrl",value:function(e){return new vn(e)}},{key:"bypassSecurityTrustResourceUrl",value:function(e){return new pn(e)}}]),t}(Gs);return e.\u0275prov=xe({factory:function(){return e=qe(He),new Zs(e.get(wu));var e},token:e,providedIn:"root"}),e}();function qs(){return new sn}var Qs=El(Hl,"browser",[{provide:Yi,useValue:"browser"},{provide:Wi,useValue:function(){cs.makeCurrent(),vs.init()},multi:!0},{provide:wu,useFactory:function(){return document,document},deps:[]}]),Ws=function(){function e(n){if(y(this,e),n)throw new Error("BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.")}return _(e,null,[{key:"withServerTransition",value:function(n){return{ngModule:e,providers:[{provide:Zi,useValue:n.appId},{provide:hs,useExisting:Zi},fs]}}}]),e}();"undefined"!=typeof window&&window;var Ys=fu(pu,[gu],(function(e){return function(e){for(var n={},t=[],r=null,i=0;i @@ -154,7 +154,7 @@ Still having trouble with scaling or sizing? Read [this article](https://css-tri ### Dealing with multi color SVGs containing inline styles If you wish use SVGs that contain inline styles (multi-color) that do not need to be overridden by CSS, -you will have to provide a separate sprite file that keeps the stroke and fill attributes: +provide a separate sprite file that keeps the stroke and fill attributes: ```json "scripts": { @@ -162,11 +162,11 @@ you will have to provide a separate sprite file that keeps the stroke and fill a } ``` -The generated sprite will preserve it's original styles, but you won't be able to style it via CSS ([demo](https://jannicz.github.io/ng-svg-icon-sprite/#multicolor)). +The generated sprite will preserve its original styles, but you won't be able to style it via CSS that easily ([demo](https://jannicz.github.io/ng-svg-icon-sprite/#multicolor)). ### Setting a default sprite path for all icons -If your app uses one sprite source, you can set it's path in your `@NgModule` imports array: +If your app uses one sprite source, you can set its path in your `@NgModule` imports array: ```javascript imports: [ @@ -180,7 +180,7 @@ You can now leave out the path and just provide the icon name ([demo](https://ja ``` -Doing so you will still be able override the default path by using the full syntax for particular icons that should use a different sprite file. +Doing so you will still be able to override the default path by using the full syntax for particular icons that should use a different sprite file. ## Browser Support - Chrome (63) diff --git a/projects/icon-sprite/package.json b/projects/icon-sprite/package.json index 46e02d9..03e8a02 100644 --- a/projects/icon-sprite/package.json +++ b/projects/icon-sprite/package.json @@ -1,6 +1,6 @@ { "name": "ng-svg-icon-sprite", - "version": "1.9.0", + "version": "1.9.1", "license": "MIT", "author": "Jan Suwart", "description": "Angular 10+ package for generating and using inline SVG icons in your project", diff --git a/src/app/app.component.html b/src/app/app.component.html index 4b7484c..87c2efa 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -12,65 +12,73 @@

The Basics (reference, width and styling) - 
<svg-icon-sprite [src]="'assets/sprites/sprite.svg#star_100x100'" [width]="'100px'"></svg-icon>
+      
<svg-icon-sprite
+  [src]="'assets/sprites/sprite.svg#star_100x100'"
+  [width]="'100px'"
+></svg-icon>
 
-.icon-example {{ '{' }}
+.icon-example {{ '{' }}
   color: darkred;
-{{ '}' }}

+{{ '}' }}
  • - 
    <svg-icon-sprite [src]="'assets/sprites/sprite.svg#delete_70x70'" [width]="'70px'" [height]="'65px'"></svg-icon>
    + 
    <svg-icon-sprite
+  [src]="'assets/sprites/sprite.svg#delete_70x70'"
+  [width]="'70px'"
+  [height]="'65px'"
+></svg-icon>
    • -

    To access the inner SVG properties like fill or stroke via CSS use ::ng-deep

    +

    + To access the inner SVG attributes like fill or stroke via CSS use ::ng-deep + - this works only when these attributes were either stripped or lacking after export. +

    • - 
      -.container {{ '{' }}
-  ::ng-deep {{ '{' }}
-    .styled-icon {{ '{' }}
-      use {{ '{' }}
-        fill: orange;
-        stroke: black;
      + 
      ::ng-deep {{ '{' }}
+  .styled-icon {{ '{' }}
+    use {{ '{' }}
+      fill: orange;
+      stroke: black;
+    {{ '}' }}
+  {{ '}' }}
+{{ '}' }}

    Alternative Scaling (using CSS transform)

    -

    As scaling via viewBox might differ across browsers, you can also use this pattern. Apply rules as below: wrap the SVG into a div and size it using CSS transforms.

    +

    Scaling via viewBox might differ across browsers. It might be easier to use CSS transforms. Wrap the SVG into a div and transform its size.

      -
    • -
      -
      - -
      -
      - 
      -.icon-scale-down {{ '{' }}
-  // Scale down by 50%
-  transform: scale(0.5);
-{{ '}' }}
      -
    • - 
      +      
      // Scale up by 500%
 .icon-scale-up {{ '{' }}
-  // Scale up by 500%
   transform: scale(5);
-{{ '}' }}
-      
      
+{{ '}' }}
      +
      • +
    • +
      +
      + +
      +
      + 
      // Scale down by 50%
+.icon-scale-down {{ '{' }}
+  transform: scale(0.5);
+{{ '}' }}
    @@ -85,15 +93,16 @@

    Default sprite path

    - 
    -import {{ '{' }} IconSpriteModule {{ '}' }} from 'ng-svg-icon-sprite';
+        
    import {{ '{' }} IconSpriteModule {{ '}' }} from 'ng-svg-icon-sprite';
 import {{ '{' }} environment {{ '}' }} from '../environments/environment';
 
 @NgModule({{ '{' }}
   imports: [
     IconSpriteModule.forRoot({{ '{' }} path: environment.spritePath {{ '}' }})
-
    
-        
    <svg-icon-sprite [src]="'star_100x100'" [width]="width"></svg-icon>
    
+
    + 
    <svg-icon-sprite
+  [src]="'star_100x100'"
+></svg-icon>
    @@ -101,7 +110,7 @@

    Default sprite path

    Advanced Tip: to change the sprite path during runtime, inject the iconSpriteService anywhere and execute this.iconSpriteService.setPath('new-path.svg') Re-render all icon-components afterwards! -   +  

    @@ -116,33 +125,30 @@

    Accessible example (meaningful icon pattern)

    [title]="'Orange star'" [attribute]="[['aria-labelledby', 'star_100x100-title'], ['role', 'img']]">     - 
    -<svg-icon-sprite
-      [src]="'star_100x100'"
-      [title]="'Orange star'"
-      [attribute]="[['aria-labelledby', 'star_100x100-title'], ['role', 'img']]"
-></svg-icon>
-
    + 
    <svg-icon-sprite
+  [src]="'star_100x100'"
+  [title]="'Orange star'"
+  [attribute]="[['aria-labelledby', 'star_100x100-title'], ['role', 'img']]"
+></svg-icon>
    Adding [title]="'Orange star'" will render <title id="star_100x100-title">Orange star</title> as the first child of the SVG node and serve as alternative text for screen readers. To improve support, you can additionally reference the title's node via 'aria-labelledby' using the title's generated id star_100x100-title and set the role to img. -

    Multicolor Icons (preserving svg properties)

    +

    Multicolor Icons (preserving svg attributes)

    - If you want to include an multicolor icon, you will have to provide it form a separate sprite file (where the fill and stroke attributes are not stripped). - Remember that you will not be able to overwrite styles it's via CSS. + If you want to include an additional multicolor icon in your app, provide it form a separate sprite file (where the fill and stroke attributes are not stripped). + Remember that you will not be able to overwrite it's styles via CSS, unless a path lacks the fill/stroke attribute.
    • - 
      -<svg-icon-sprite
+      
      <svg-icon-sprite
   [src]="'assets/sprites/image-sprite.svg#multicolor-image'">
-</svg-icon>
      
+</svg-icon>
    diff --git a/src/app/app.component.scss b/src/app/app.component.scss index a130a6a..e51976d 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -95,15 +95,6 @@ } } -.icon-change-size { - ::ng-deep { - svg { - transition: all linear 0.2s; - transform-origin: top center; - } - } -} - .headline-green { color: #1E8449; animation: pulse 5s infinite; diff --git a/src/app/manipulator/manipulator.component.html b/src/app/manipulator/manipulator.component.html index 2ca8214..03f04ad 100644 --- a/src/app/manipulator/manipulator.component.html +++ b/src/app/manipulator/manipulator.component.html @@ -16,13 +16,13 @@

    Manipulation (scaling and attributes)

    - + {{model.size}}px
    - + {{model.hasViewBox ? 'enabled' : 'disabled'}} i Browsers might scale icons without a viewBox differently @@ -35,7 +35,7 @@

    Manipulation (scaling and attributes)

    i - Decrease the last two values equally to scale up + Decrease the last two values (x2, y2) equally to scale up
    @@ -47,7 +47,7 @@

    Manipulation (scaling and attributes)

    [(ngModel)]="model.color"> {{model.color}} - Fill & stroke rules will not apply on multi-color icons! + CSS only affects paths without fill or stroke attribute @@ -77,18 +77,19 @@

    Manipulation (scaling and attributes)

    - 
    -<svg-icon
+    
    <svg-icon-sprite
   [src]="'{{model.source}}'"
   [width]="'{{model.size}}px'"
   {{model.hasViewBox ? '[viewBox]="\'' + viewBox + '\'"' : ''}}
-  style="color: {{model.color}};"
-></svg-icon>
    
-    
    -<svg-icon
+  [attr.style]="'color: {{model.color}}'"
+></svg-icon-sprite>
    
+    
    <svg-icon-sprite
   [src]="'{{model.source}}'"
   [width]="'{{model.size}}px'"
-  style="color: {{model.color}};"
-></svg-icon>
    
+  [attr.style]="'color: {{model.color}}'"
+></svg-icon-sprite>
    + + Tip: Put the color property directly into the CSS file +
    diff --git a/src/app/manipulator/manipulator.component.scss b/src/app/manipulator/manipulator.component.scss index 974bb82..af985d8 100644 --- a/src/app/manipulator/manipulator.component.scss +++ b/src/app/manipulator/manipulator.component.scss @@ -1,6 +1,5 @@ :host ::ng-deep svg { border: 1px dashed grey; - box-shadow: 2px 2px 2px darkgray; } .row { @@ -13,13 +12,13 @@ grid-column: 8 / 13; ::ng-deep svg-icon-sprite { - //transition: color 0.1s ease-in-out; + transition: color 0.05s ease-in-out; &:hover { - color: darkblue !important; + color: darkorange !important; svg { - box-shadow: 3px 3px 2px darkgray; + box-shadow: 2px 2px 2px lightgrey; } } } @@ -78,7 +77,7 @@ } .warning { - color: firebrick; + color: crimson; display: block; margin-left: 0; } diff --git a/src/app/manipulator/manipulator.component.ts b/src/app/manipulator/manipulator.component.ts index 0bb52b9..151110e 100644 --- a/src/app/manipulator/manipulator.component.ts +++ b/src/app/manipulator/manipulator.component.ts @@ -8,11 +8,15 @@ import { IconForm } from './IconForm.model'; }) export class ManipulatorComponent implements OnInit { + private initialSize = 240; + + private initialColor = '#ab3030'; + public icons = [ - { src: 'assets/sprites/sprite.svg#star_100x100_viewbox', name: 'Star (100 x 100px)'}, - { src: 'assets/sprites/sprite.svg#delete_70x70', name: 'Trash (70 x 70px)'}, - { src: 'assets/sprites/sprite.svg#circle_24x24-viewbox', name: 'Circle (24 x 24px)'}, - { src: 'assets/sprites/image-sprite.svg#multicolor-image', name: 'Multicolor Image'} + { src: 'assets/sprites/sprite.svg#star_100x100_viewbox', name: 'Star (100 x 100px)', viewBoxX2: 100 }, + { src: 'assets/sprites/sprite.svg#delete_70x70', name: 'Trash (70 x 70px)', viewBoxX2: 70 }, + { src: 'assets/sprites/sprite.svg#circle_24x24-viewbox', name: 'Circle (24 x 24px)', viewBoxX2: 24 }, + { src: 'assets/sprites/image-sprite.svg#multicolor-image', name: 'Multicolor (250 x 250px)', viewBoxX2: 250 } ]; public model: IconForm; @@ -32,13 +36,13 @@ export class ManipulatorComponent implements OnInit { this.model = new IconForm( this.icons[0].src, this.icons[0].name, - 240, + this.initialSize, true, 0, 0, - 100, - 100, - '#ab3030', + this.icons[0].viewBoxX2, + this.icons[0].viewBoxX2, + this.initialColor, // styled-icon 'some-class-name' ); @@ -51,12 +55,27 @@ export class ManipulatorComponent implements OnInit { applyChange(): void { const model = this.icons.find(i => i.name === this.model.name); - console.log('icon model =>', model); + console.log('icon model =>', model.src); this.model.source = model.src; - if (this.model.source.includes('multicolor-image')) { - // Disable the viewBox for this particular icon - this.model.hasViewBox = false; + if (this.model.hasViewBox) { + // Apply viewBox for each particular icon + switch (this.model.source) { + case this.icons[0].src: + this.model.viewboxY2 = this.model.viewboxX2 = this.icons[0].viewBoxX2; + break; + case this.icons[1].src: + this.model.viewboxY2 = this.model.viewboxX2 = this.icons[1].viewBoxX2; + break; + case this.icons[2].src: + this.model.viewboxY2 = this.model.viewboxX2 = this.icons[2].viewBoxX2; + break; + case this.icons[3].src: + this.model.viewboxY2 = this.model.viewboxX2 = this.icons[3].viewBoxX2; + break; + } + + this.calculateViewBox(); } } diff --git a/src/assets/sprites/image-sprite.svg b/src/assets/sprites/image-sprite.svg index 5aec42e..3468741 100644 --- a/src/assets/sprites/image-sprite.svg +++ b/src/assets/sprites/image-sprite.svg @@ -1 +1 @@ -backgroundLayer 1 \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/sprites/sprite.svg b/src/assets/sprites/sprite.svg index 0bd2d80..6b5b688 100644 --- a/src/assets/sprites/sprite.svg +++ b/src/assets/sprites/sprite.svg @@ -1 +1 @@ -CircleDeleteStar Star \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/svg-images/multicolor-image.svg b/src/assets/svg-images/multicolor-image.svg index 4ce6516..9163adc 100644 --- a/src/assets/svg-images/multicolor-image.svg +++ b/src/assets/svg-images/multicolor-image.svg @@ -1,15 +1,22 @@ - - background - - - + + + + + + + + + + + + + - - - Layer 1 - - - - diff --git a/src/styles.scss b/src/styles.scss index aea2676..e84fd0f 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -60,8 +60,8 @@ pre { font-size: 85%; font-weight: bold; line-height: 1.45; - background-color: lightgoldenrodyellow; - color: darkslategrey; + background-color: #fff6c3; + color: #264040; font-family: Courier, monospace; overflow: auto; }