survey-angular-ui 1.9.52 → 1.9.53

package/esm2020/questions/ranking-item.component.mjs

@@ -9,10 +9,10 @@ export class RankingItemComponent extends BaseAngular {
     }
 }
 RankingItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RankingItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-RankingItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: RankingItemComponent, selector: "sv-ng-ranking-item", inputs: { question: "question", model: "model", index: "index" }, usesInheritance: true, ngImport: i0, template: "\n\n\n<div tabindex=\"0\" [attr.data-sv-drop-target-ranking-item]=\"index\" \n    [class]=\"question.getItemClass(model)\"\n    (keydown)=\"question.handleKeydown($event, model)\"\n    (pointerdown)=\"question.handlePointerDown($event, model, $any($event.currentTarget))\">\n  <div tabindex=\"-1\" style=\"outline: none;\">\n    <div [class]=\"question.cssClasses.itemGhostNode\"></div>\n    <div [class]=\"question.cssClasses.itemContent\">\n      <div [class]=\"question.cssClasses.itemIconContainer\">\n        <svg\n          width=\"10\"\n          height=\"16\"\n          viewBox=\"0 0 10 16\"\n          [class]=\"question.getIconHoverCss()\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M6 2C6 0.9 6.9 0 8 0C9.1 0 10 0.9 10 2C10 3.1 9.1 4 8 4C6.9 4 6 3.1 6 2ZM2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0ZM8 6C6.9 6 6 6.9 6 8C6 9.1 6.9 10 8 10C9.1 10 10 9.1 10 8C10 6.9 9.1 6 8 6ZM2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6ZM8 12C6.9 12 6 12.9 6 14C6 15.1 6.9 16 8 16C9.1 16 10 15.1 10 14C10 12.9 9.1 12 8 12ZM2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12Z\" />\n        </svg>\n        <svg\n          width=\"10\"\n          height=\"24\"\n          viewBox=\"0 0 10 24\"\n          [class]=\"question.getIconFocusCss()\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M10 5L5 0L0 5H4V9H6V5H10Z\" />\n          <path d=\"M6 19V15H4V19H0L5 24L10 19H6Z\" />\n        </svg>\n      </div>\n\n      <div [class]=\"question.cssClasses.itemIndex\">{{ question.getNumberByIndex(index) }}</div>\n      <div [class]=\"question.cssClasses.controlLabel\">\n        <sv-ng-string [model]=\"model.locText\"></sv-ng-string>\n      </div>\n    </div>\n  </div>\n</div>", components: [{ type: i1.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }] });
+RankingItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: RankingItemComponent, selector: "sv-ng-ranking-item", inputs: { question: "question", model: "model", index: "index" }, usesInheritance: true, ngImport: i0, template: "\n\n\n<div [attr.tabindex]=\"question.getItemTabIndex(model)\" [attr.data-sv-drop-target-ranking-item]=\"index\" \n    [class]=\"question.getItemClass(model)\"\n    (keydown)=\"question.handleKeydown($event, model)\"\n    (pointerdown)=\"question.handlePointerDown($event, model, $any($event.currentTarget))\">\n  <div tabindex=\"-1\" style=\"outline: none;\">\n    <div [class]=\"question.cssClasses.itemGhostNode\"></div>\n    <div [class]=\"question.cssClasses.itemContent\">\n      <div [class]=\"question.cssClasses.itemIconContainer\">\n        <svg\n          width=\"10\"\n          height=\"16\"\n          viewBox=\"0 0 10 16\"\n          [class]=\"question.getIconHoverCss()\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M6 2C6 0.9 6.9 0 8 0C9.1 0 10 0.9 10 2C10 3.1 9.1 4 8 4C6.9 4 6 3.1 6 2ZM2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0ZM8 6C6.9 6 6 6.9 6 8C6 9.1 6.9 10 8 10C9.1 10 10 9.1 10 8C10 6.9 9.1 6 8 6ZM2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6ZM8 12C6.9 12 6 12.9 6 14C6 15.1 6.9 16 8 16C9.1 16 10 15.1 10 14C10 12.9 9.1 12 8 12ZM2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12Z\" />\n        </svg>\n        <svg\n          width=\"10\"\n          height=\"24\"\n          viewBox=\"0 0 10 24\"\n          [class]=\"question.getIconFocusCss()\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M10 5L5 0L0 5H4V9H6V5H10Z\" />\n          <path d=\"M6 19V15H4V19H0L5 24L10 19H6Z\" />\n        </svg>\n      </div>\n\n      <div [class]=\"question.cssClasses.itemIndex\">{{ question.getNumberByIndex(index) }}</div>\n      <div [class]=\"question.cssClasses.controlLabel\">\n        <sv-ng-string [model]=\"model.locText\"></sv-ng-string>\n      </div>\n    </div>\n  </div>\n</div>", components: [{ type: i1.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RankingItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: "sv-ng-ranking-item", template: "\n\n\n<div tabindex=\"0\" [attr.data-sv-drop-target-ranking-item]=\"index\" \n    [class]=\"question.getItemClass(model)\"\n    (keydown)=\"question.handleKeydown($event, model)\"\n    (pointerdown)=\"question.handlePointerDown($event, model, $any($event.currentTarget))\">\n  <div tabindex=\"-1\" style=\"outline: none;\">\n    <div [class]=\"question.cssClasses.itemGhostNode\"></div>\n    <div [class]=\"question.cssClasses.itemContent\">\n      <div [class]=\"question.cssClasses.itemIconContainer\">\n        <svg\n          width=\"10\"\n          height=\"16\"\n          viewBox=\"0 0 10 16\"\n          [class]=\"question.getIconHoverCss()\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M6 2C6 0.9 6.9 0 8 0C9.1 0 10 0.9 10 2C10 3.1 9.1 4 8 4C6.9 4 6 3.1 6 2ZM2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0ZM8 6C6.9 6 6 6.9 6 8C6 9.1 6.9 10 8 10C9.1 10 10 9.1 10 8C10 6.9 9.1 6 8 6ZM2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6ZM8 12C6.9 12 6 12.9 6 14C6 15.1 6.9 16 8 16C9.1 16 10 15.1 10 14C10 12.9 9.1 12 8 12ZM2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12Z\" />\n        </svg>\n        <svg\n          width=\"10\"\n          height=\"24\"\n          viewBox=\"0 0 10 24\"\n          [class]=\"question.getIconFocusCss()\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M10 5L5 0L0 5H4V9H6V5H10Z\" />\n          <path d=\"M6 19V15H4V19H0L5 24L10 19H6Z\" />\n        </svg>\n      </div>\n\n      <div [class]=\"question.cssClasses.itemIndex\">{{ question.getNumberByIndex(index) }}</div>\n      <div [class]=\"question.cssClasses.controlLabel\">\n        <sv-ng-string [model]=\"model.locText\"></sv-ng-string>\n      </div>\n    </div>\n  </div>\n</div>" }]
+            args: [{ selector: "sv-ng-ranking-item", template: "\n\n\n<div [attr.tabindex]=\"question.getItemTabIndex(model)\" [attr.data-sv-drop-target-ranking-item]=\"index\" \n    [class]=\"question.getItemClass(model)\"\n    (keydown)=\"question.handleKeydown($event, model)\"\n    (pointerdown)=\"question.handlePointerDown($event, model, $any($event.currentTarget))\">\n  <div tabindex=\"-1\" style=\"outline: none;\">\n    <div [class]=\"question.cssClasses.itemGhostNode\"></div>\n    <div [class]=\"question.cssClasses.itemContent\">\n      <div [class]=\"question.cssClasses.itemIconContainer\">\n        <svg\n          width=\"10\"\n          height=\"16\"\n          viewBox=\"0 0 10 16\"\n          [class]=\"question.getIconHoverCss()\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M6 2C6 0.9 6.9 0 8 0C9.1 0 10 0.9 10 2C10 3.1 9.1 4 8 4C6.9 4 6 3.1 6 2ZM2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0ZM8 6C6.9 6 6 6.9 6 8C6 9.1 6.9 10 8 10C9.1 10 10 9.1 10 8C10 6.9 9.1 6 8 6ZM2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6ZM8 12C6.9 12 6 12.9 6 14C6 15.1 6.9 16 8 16C9.1 16 10 15.1 10 14C10 12.9 9.1 12 8 12ZM2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12Z\" />\n        </svg>\n        <svg\n          width=\"10\"\n          height=\"24\"\n          viewBox=\"0 0 10 24\"\n          [class]=\"question.getIconFocusCss()\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M10 5L5 0L0 5H4V9H6V5H10Z\" />\n          <path d=\"M6 19V15H4V19H0L5 24L10 19H6Z\" />\n        </svg>\n      </div>\n\n      <div [class]=\"question.cssClasses.itemIndex\">{{ question.getNumberByIndex(index) }}</div>\n      <div [class]=\"question.cssClasses.controlLabel\">\n        <sv-ng-string [model]=\"model.locText\"></sv-ng-string>\n      </div>\n    </div>\n  </div>\n</div>" }]
         }], propDecorators: { question: [{
                 type: Input
             }], model: [{
@@ -21,4 +21,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 type: Input
             }] } });
 AngularComponentFactory.Instance.registerComponent("sv-ng-ranking-item", RankingItemComponent);
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmFua2luZy1pdGVtLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3BhY2thZ2VzL3N1cnZleS1hbmd1bGFyLXVpL3NyYy9xdWVzdGlvbnMvcmFua2luZy1pdGVtLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uL3BhY2thZ2VzL3N1cnZleS1hbmd1bGFyLXVpL3NyYy9xdWVzdGlvbnMvcmFua2luZy1pdGVtLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2pELE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUU5QyxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQzs7O0FBTS9ELE1BQU0sT0FBTyxvQkFBcUIsU0FBUSxXQUFzQjtJQUlwRCxRQUFRO1FBQ2hCLE9BQU8sSUFBSSxDQUFDLEtBQUssQ0FBQztJQUNwQixDQUFDOztpSEFOVSxvQkFBb0I7cUdBQXBCLG9CQUFvQixtSkNUakMscXhEQXFDTTsyRkQ1Qk8sb0JBQW9CO2tCQUpoQyxTQUFTOytCQUNFLG9CQUFvQjs4QkFJckIsUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLOztBQUtSLHVCQUF1QixDQUFDLFFBQVEsQ0FBQyxpQkFBaUIsQ0FBQyxvQkFBb0IsRUFBRSxvQkFBb0IsQ0FBQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBCYXNlQW5ndWxhciB9IGZyb20gXCIuLi9iYXNlLWFuZ3VsYXJcIjtcbmltcG9ydCB7IEl0ZW1WYWx1ZSwgUXVlc3Rpb25SYW5raW5nTW9kZWwgfSBmcm9tIFwic3VydmV5LWNvcmVcIjtcbmltcG9ydCB7IEFuZ3VsYXJDb21wb25lbnRGYWN0b3J5IH0gZnJvbSBcIi4uL2NvbXBvbmVudC1mYWN0b3J5XCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJzdi1uZy1yYW5raW5nLWl0ZW1cIixcbiAgdGVtcGxhdGVVcmw6IFwiLi9yYW5raW5nLWl0ZW0uY29tcG9uZW50Lmh0bWxcIlxufSlcbmV4cG9ydCBjbGFzcyBSYW5raW5nSXRlbUNvbXBvbmVudCBleHRlbmRzIEJhc2VBbmd1bGFyPEl0ZW1WYWx1ZT4ge1xuICBASW5wdXQoKSBxdWVzdGlvbiE6IFF1ZXN0aW9uUmFua2luZ01vZGVsO1xuICBASW5wdXQoKSBtb2RlbCE6IEl0ZW1WYWx1ZTtcbiAgQElucHV0KCkgaW5kZXghOiBudW1iZXI7XG4gIHByb3RlY3RlZCBnZXRNb2RlbCgpOiBJdGVtVmFsdWUge1xuICAgIHJldHVybiB0aGlzLm1vZGVsO1xuICB9XG59XG5Bbmd1bGFyQ29tcG9uZW50RmFjdG9yeS5JbnN0YW5jZS5yZWdpc3RlckNvbXBvbmVudChcInN2LW5nLXJhbmtpbmctaXRlbVwiLCBSYW5raW5nSXRlbUNvbXBvbmVudCk7IiwiXG5cblxuPGRpdiB0YWJpbmRleD1cIjBcIiBbYXR0ci5kYXRhLXN2LWRyb3AtdGFyZ2V0LXJhbmtpbmctaXRlbV09XCJpbmRleFwiIFxuICAgIFtjbGFzc109XCJxdWVzdGlvbi5nZXRJdGVtQ2xhc3MobW9kZWwpXCJcbiAgICAoa2V5ZG93bik9XCJxdWVzdGlvbi5oYW5kbGVLZXlkb3duKCRldmVudCwgbW9kZWwpXCJcbiAgICAocG9pbnRlcmRvd24pPVwicXVlc3Rpb24uaGFuZGxlUG9pbnRlckRvd24oJGV2ZW50LCBtb2RlbCwgJGFueSgkZXZlbnQuY3VycmVudFRhcmdldCkpXCI+XG4gIDxkaXYgdGFiaW5kZXg9XCItMVwiIHN0eWxlPVwib3V0bGluZTogbm9uZTtcIj5cbiAgICA8ZGl2IFtjbGFzc109XCJxdWVzdGlvbi5jc3NDbGFzc2VzLml0ZW1HaG9zdE5vZGVcIj48L2Rpdj5cbiAgICA8ZGl2IFtjbGFzc109XCJxdWVzdGlvbi5jc3NDbGFzc2VzLml0ZW1Db250ZW50XCI+XG4gICAgICA8ZGl2IFtjbGFzc109XCJxdWVzdGlvbi5jc3NDbGFzc2VzLml0ZW1JY29uQ29udGFpbmVyXCI+XG4gICAgICAgIDxzdmdcbiAgICAgICAgICB3aWR0aD1cIjEwXCJcbiAgICAgICAgICBoZWlnaHQ9XCIxNlwiXG4gICAgICAgICAgdmlld0JveD1cIjAgMCAxMCAxNlwiXG4gICAgICAgICAgW2NsYXNzXT1cInF1ZXN0aW9uLmdldEljb25Ib3ZlckNzcygpXCJcbiAgICAgICAgICB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCI+XG4gICAgICAgICAgPHBhdGhcbiAgICAgICAgICAgIGQ9XCJNNiAyQzYgMC45IDYuOSAwIDggMEM5LjEgMCAxMCAwLjkgMTAgMkMxMCAzLjEgOS4xIDQgOCA0QzYuOSA0IDYgMy4xIDYgMlpNMiAwQzAuOSAwIDAgMC45IDAgMkMwIDMuMSAwLjkgNCAyIDRDMy4xIDQgNCAzLjEgNCAyQzQgMC45IDMuMSAwIDIgMFpNOCA2QzYuOSA2IDYgNi45IDYgOEM2IDkuMSA2LjkgMTAgOCAxMEM5LjEgMTAgMTAgOS4xIDEwIDhDMTAgNi45IDkuMSA2IDggNlpNMiA2QzAuOSA2IDAgNi45IDAgOEMwIDkuMSAwLjkgMTAgMiAxMEMzLjEgMTAgNCA5LjEgNCA4QzQgNi45IDMuMSA2IDIgNlpNOCAxMkM2LjkgMTIgNiAxMi45IDYgMTRDNiAxNS4xIDYuOSAxNiA4IDE2QzkuMSAxNiAxMCAxNS4xIDEwIDE0QzEwIDEyLjkgOS4xIDEyIDggMTJaTTIgMTJDMC45IDEyIDAgMTIuOSAwIDE0QzAgMTUuMSAwLjkgMTYgMiAxNkMzLjEgMTYgNCAxNS4xIDQgMTRDNCAxMi45IDMuMSAxMiAyIDEyWlwiIC8+XG4gICAgICAgIDwvc3ZnPlxuICAgICAgICA8c3ZnXG4gICAgICAgICAgd2lkdGg9XCIxMFwiXG4gICAgICAgICAgaGVpZ2h0PVwiMjRcIlxuICAgICAgICAgIHZpZXdCb3g9XCIwIDAgMTAgMjRcIlxuICAgICAgICAgIFtjbGFzc109XCJxdWVzdGlvbi5nZXRJY29uRm9jdXNDc3MoKVwiXG4gICAgICAgICAgeG1sbnM9XCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiPlxuICAgICAgICAgIDxwYXRoIGQ9XCJNMTAgNUw1IDBMMCA1SDRWOUg2VjVIMTBaXCIgLz5cbiAgICAgICAgICA8cGF0aCBkPVwiTTYgMTlWMTVINFYxOUgwTDUgMjRMMTAgMTlINlpcIiAvPlxuICAgICAgICA8L3N2Zz5cbiAgICAgIDwvZGl2PlxuXG4gICAgICA8ZGl2IFtjbGFzc109XCJxdWVzdGlvbi5jc3NDbGFzc2VzLml0ZW1JbmRleFwiPnt7IHF1ZXN0aW9uLmdldE51bWJlckJ5SW5kZXgoaW5kZXgpIH19PC9kaXY+XG4gICAgICA8ZGl2IFtjbGFzc109XCJxdWVzdGlvbi5jc3NDbGFzc2VzLmNvbnRyb2xMYWJlbFwiPlxuICAgICAgICA8c3Ytbmctc3RyaW5nIFttb2RlbF09XCJtb2RlbC5sb2NUZXh0XCI+PC9zdi1uZy1zdHJpbmc+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG48L2Rpdj4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmFua2luZy1pdGVtLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3BhY2thZ2VzL3N1cnZleS1hbmd1bGFyLXVpL3NyYy9xdWVzdGlvbnMvcmFua2luZy1pdGVtLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uL3BhY2thZ2VzL3N1cnZleS1hbmd1bGFyLXVpL3NyYy9xdWVzdGlvbnMvcmFua2luZy1pdGVtLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2pELE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUU5QyxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQzs7O0FBTS9ELE1BQU0sT0FBTyxvQkFBcUIsU0FBUSxXQUFzQjtJQUlwRCxRQUFRO1FBQ2hCLE9BQU8sSUFBSSxDQUFDLEtBQUssQ0FBQztJQUNwQixDQUFDOztpSEFOVSxvQkFBb0I7cUdBQXBCLG9CQUFvQixtSkNUakMsMHpEQXFDTTsyRkQ1Qk8sb0JBQW9CO2tCQUpoQyxTQUFTOytCQUNFLG9CQUFvQjs4QkFJckIsUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLOztBQUtSLHVCQUF1QixDQUFDLFFBQVEsQ0FBQyxpQkFBaUIsQ0FBQyxvQkFBb0IsRUFBRSxvQkFBb0IsQ0FBQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBCYXNlQW5ndWxhciB9IGZyb20gXCIuLi9iYXNlLWFuZ3VsYXJcIjtcbmltcG9ydCB7IEl0ZW1WYWx1ZSwgUXVlc3Rpb25SYW5raW5nTW9kZWwgfSBmcm9tIFwic3VydmV5LWNvcmVcIjtcbmltcG9ydCB7IEFuZ3VsYXJDb21wb25lbnRGYWN0b3J5IH0gZnJvbSBcIi4uL2NvbXBvbmVudC1mYWN0b3J5XCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJzdi1uZy1yYW5raW5nLWl0ZW1cIixcbiAgdGVtcGxhdGVVcmw6IFwiLi9yYW5raW5nLWl0ZW0uY29tcG9uZW50Lmh0bWxcIlxufSlcbmV4cG9ydCBjbGFzcyBSYW5raW5nSXRlbUNvbXBvbmVudCBleHRlbmRzIEJhc2VBbmd1bGFyPEl0ZW1WYWx1ZT4ge1xuICBASW5wdXQoKSBxdWVzdGlvbiE6IFF1ZXN0aW9uUmFua2luZ01vZGVsO1xuICBASW5wdXQoKSBtb2RlbCE6IEl0ZW1WYWx1ZTtcbiAgQElucHV0KCkgaW5kZXghOiBudW1iZXI7XG4gIHByb3RlY3RlZCBnZXRNb2RlbCgpOiBJdGVtVmFsdWUge1xuICAgIHJldHVybiB0aGlzLm1vZGVsO1xuICB9XG59XG5Bbmd1bGFyQ29tcG9uZW50RmFjdG9yeS5JbnN0YW5jZS5yZWdpc3RlckNvbXBvbmVudChcInN2LW5nLXJhbmtpbmctaXRlbVwiLCBSYW5raW5nSXRlbUNvbXBvbmVudCk7IiwiXG5cblxuPGRpdiBbYXR0ci50YWJpbmRleF09XCJxdWVzdGlvbi5nZXRJdGVtVGFiSW5kZXgobW9kZWwpXCIgW2F0dHIuZGF0YS1zdi1kcm9wLXRhcmdldC1yYW5raW5nLWl0ZW1dPVwiaW5kZXhcIiBcbiAgICBbY2xhc3NdPVwicXVlc3Rpb24uZ2V0SXRlbUNsYXNzKG1vZGVsKVwiXG4gICAgKGtleWRvd24pPVwicXVlc3Rpb24uaGFuZGxlS2V5ZG93bigkZXZlbnQsIG1vZGVsKVwiXG4gICAgKHBvaW50ZXJkb3duKT1cInF1ZXN0aW9uLmhhbmRsZVBvaW50ZXJEb3duKCRldmVudCwgbW9kZWwsICRhbnkoJGV2ZW50LmN1cnJlbnRUYXJnZXQpKVwiPlxuICA8ZGl2IHRhYmluZGV4PVwiLTFcIiBzdHlsZT1cIm91dGxpbmU6IG5vbmU7XCI+XG4gICAgPGRpdiBbY2xhc3NdPVwicXVlc3Rpb24uY3NzQ2xhc3Nlcy5pdGVtR2hvc3ROb2RlXCI+PC9kaXY+XG4gICAgPGRpdiBbY2xhc3NdPVwicXVlc3Rpb24uY3NzQ2xhc3Nlcy5pdGVtQ29udGVudFwiPlxuICAgICAgPGRpdiBbY2xhc3NdPVwicXVlc3Rpb24uY3NzQ2xhc3Nlcy5pdGVtSWNvbkNvbnRhaW5lclwiPlxuICAgICAgICA8c3ZnXG4gICAgICAgICAgd2lkdGg9XCIxMFwiXG4gICAgICAgICAgaGVpZ2h0PVwiMTZcIlxuICAgICAgICAgIHZpZXdCb3g9XCIwIDAgMTAgMTZcIlxuICAgICAgICAgIFtjbGFzc109XCJxdWVzdGlvbi5nZXRJY29uSG92ZXJDc3MoKVwiXG4gICAgICAgICAgeG1sbnM9XCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiPlxuICAgICAgICAgIDxwYXRoXG4gICAgICAgICAgICBkPVwiTTYgMkM2IDAuOSA2LjkgMCA4IDBDOS4xIDAgMTAgMC45IDEwIDJDMTAgMy4xIDkuMSA0IDggNEM2LjkgNCA2IDMuMSA2IDJaTTIgMEMwLjkgMCAwIDAuOSAwIDJDMCAzLjEgMC45IDQgMiA0QzMuMSA0IDQgMy4xIDQgMkM0IDAuOSAzLjEgMCAyIDBaTTggNkM2LjkgNiA2IDYuOSA2IDhDNiA5LjEgNi45IDEwIDggMTBDOS4xIDEwIDEwIDkuMSAxMCA4QzEwIDYuOSA5LjEgNiA4IDZaTTIgNkMwLjkgNiAwIDYuOSAwIDhDMCA5LjEgMC45IDEwIDIgMTBDMy4xIDEwIDQgOS4xIDQgOEM0IDYuOSAzLjEgNiAyIDZaTTggMTJDNi45IDEyIDYgMTIuOSA2IDE0QzYgMTUuMSA2LjkgMTYgOCAxNkM5LjEgMTYgMTAgMTUuMSAxMCAxNEMxMCAxMi45IDkuMSAxMiA4IDEyWk0yIDEyQzAuOSAxMiAwIDEyLjkgMCAxNEMwIDE1LjEgMC45IDE2IDIgMTZDMy4xIDE2IDQgMTUuMSA0IDE0QzQgMTIuOSAzLjEgMTIgMiAxMlpcIiAvPlxuICAgICAgICA8L3N2Zz5cbiAgICAgICAgPHN2Z1xuICAgICAgICAgIHdpZHRoPVwiMTBcIlxuICAgICAgICAgIGhlaWdodD1cIjI0XCJcbiAgICAgICAgICB2aWV3Qm94PVwiMCAwIDEwIDI0XCJcbiAgICAgICAgICBbY2xhc3NdPVwicXVlc3Rpb24uZ2V0SWNvbkZvY3VzQ3NzKClcIlxuICAgICAgICAgIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIj5cbiAgICAgICAgICA8cGF0aCBkPVwiTTEwIDVMNSAwTDAgNUg0VjlINlY1SDEwWlwiIC8+XG4gICAgICAgICAgPHBhdGggZD1cIk02IDE5VjE1SDRWMTlIMEw1IDI0TDEwIDE5SDZaXCIgLz5cbiAgICAgICAgPC9zdmc+XG4gICAgICA8L2Rpdj5cblxuICAgICAgPGRpdiBbY2xhc3NdPVwicXVlc3Rpb24uY3NzQ2xhc3Nlcy5pdGVtSW5kZXhcIj57eyBxdWVzdGlvbi5nZXROdW1iZXJCeUluZGV4KGluZGV4KSB9fTwvZGl2PlxuICAgICAgPGRpdiBbY2xhc3NdPVwicXVlc3Rpb24uY3NzQ2xhc3Nlcy5jb250cm9sTGFiZWxcIj5cbiAgICAgICAgPHN2LW5nLXN0cmluZyBbbW9kZWxdPVwibW9kZWwubG9jVGV4dFwiPjwvc3Ytbmctc3RyaW5nPlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9kaXY+Il19

package/esm2020/string-editor.component.mjs

@@ -15,12 +15,12 @@ export class StringEditorComponent {
     }
 }
 StringEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StringEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StringEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: StringEditorComponent, selector: "sv-ng-string-editor", inputs: { model: "model" }, ngImport: i0, template: "<span style=\"position: static\">\n  <span\n    class=\"sv-string-editor\"\n    contenteditable=\"true\"\n    style=\"position: static\"\n    *ngIf=\"model.hasHtml\"\n    [innerHtml]=\"model.renderedHtml\"\n    (blur)=\"onInput($event)\"\n    (click)=\"onClick($event)\"\n  ></span>\n  <span\n    class=\"sv-string-editor\"\n    contenteditable=\"true\"\n    style=\"position: static\"\n    *ngIf=\"!model.hasHtml\"\n    (blur)=\"onInput($event)\"\n    (click)=\"onClick($event)\"\n    >{{ model.renderedHtml }}</span\n  >\n</span>", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+StringEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: StringEditorComponent, selector: "sv-ng-string-editor", inputs: { model: "model" }, ngImport: i0, template: "<span\n  class=\"sv-string-editor\"\n  contenteditable=\"true\"\n  *ngIf=\"model.hasHtml\"\n  [innerHtml]=\"model.renderedHtml\"\n  (blur)=\"onInput($event)\"\n  (click)=\"onClick($event)\"\n></span>\n<span\n  class=\"sv-string-editor\"\n  contenteditable=\"true\"\n  *ngIf=\"!model.hasHtml\"\n  (blur)=\"onInput($event)\"\n  (click)=\"onClick($event)\"\n  >{{ model.renderedHtml }}</span\n>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StringEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: "sv-ng-string-editor", template: "<span style=\"position: static\">\n  <span\n    class=\"sv-string-editor\"\n    contenteditable=\"true\"\n    style=\"position: static\"\n    *ngIf=\"model.hasHtml\"\n    [innerHtml]=\"model.renderedHtml\"\n    (blur)=\"onInput($event)\"\n    (click)=\"onClick($event)\"\n  ></span>\n  <span\n    class=\"sv-string-editor\"\n    contenteditable=\"true\"\n    style=\"position: static\"\n    *ngIf=\"!model.hasHtml\"\n    (blur)=\"onInput($event)\"\n    (click)=\"onClick($event)\"\n    >{{ model.renderedHtml }}</span\n  >\n</span>" }]
+            args: [{ selector: "sv-ng-string-editor", template: "<span\n  class=\"sv-string-editor\"\n  contenteditable=\"true\"\n  *ngIf=\"model.hasHtml\"\n  [innerHtml]=\"model.renderedHtml\"\n  (blur)=\"onInput($event)\"\n  (click)=\"onClick($event)\"\n></span>\n<span\n  class=\"sv-string-editor\"\n  contenteditable=\"true\"\n  *ngIf=\"!model.hasHtml\"\n  (blur)=\"onInput($event)\"\n  (click)=\"onClick($event)\"\n  >{{ model.renderedHtml }}</span\n>\n" }]
         }], propDecorators: { model: [{
                 type: Input
             }] } });
 AngularComponentFactory.Instance.registerComponent(LocalizableString.editableRenderer, StringEditorComponent);
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RyaW5nLWVkaXRvci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9wYWNrYWdlcy9zdXJ2ZXktYW5ndWxhci11aS9zcmMvc3RyaW5nLWVkaXRvci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi9wYWNrYWdlcy9zdXJ2ZXktYW5ndWxhci11aS9zcmMvc3RyaW5nLWVkaXRvci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNqRCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFDaEQsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0scUJBQXFCLENBQUM7OztBQU05RCxNQUFNLE9BQU8scUJBQXFCO0lBSmxDO1FBT0UsWUFBTyxHQUFHLENBQUMsS0FBVSxFQUFFLEVBQUU7WUFDdkIsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBQyxTQUFTLENBQUM7UUFDM0MsQ0FBQyxDQUFDO1FBQ0YsWUFBTyxHQUFHLENBQUMsS0FBVSxFQUFFLEVBQUU7WUFDdkIsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1lBQ3ZCLEtBQUssQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUMxQixDQUFDLENBQUM7S0FDSDs7a0hBVlkscUJBQXFCO3NHQUFyQixxQkFBcUIsdUZDUmxDLHFoQkFtQk87MkZEWE0scUJBQXFCO2tCQUpqQyxTQUFTOytCQUNFLHFCQUFxQjs4QkFJdEIsS0FBSztzQkFBYixLQUFLOztBQVVSLHVCQUF1QixDQUFDLFFBQVEsQ0FBQyxpQkFBaUIsQ0FBQyxpQkFBaUIsQ0FBQyxnQkFBZ0IsRUFBRSxxQkFBcUIsQ0FBQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBMb2NhbGl6YWJsZVN0cmluZyB9IGZyb20gXCJzdXJ2ZXktY29yZVwiO1xuaW1wb3J0IHsgQW5ndWxhckNvbXBvbmVudEZhY3RvcnkgfSBmcm9tIFwiLi9jb21wb25lbnQtZmFjdG9yeVwiO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6IFwic3Ytbmctc3RyaW5nLWVkaXRvclwiLFxuICB0ZW1wbGF0ZVVybDogXCIuL3N0cmluZy1lZGl0b3IuY29tcG9uZW50Lmh0bWxcIlxufSlcbmV4cG9ydCBjbGFzcyBTdHJpbmdFZGl0b3JDb21wb25lbnQge1xuICBASW5wdXQoKSBtb2RlbCE6IExvY2FsaXphYmxlU3RyaW5nO1xuXG4gIG9uSW5wdXQgPSAoZXZlbnQ6IGFueSkgPT4ge1xuICAgIHRoaXMubW9kZWwudGV4dCA9IGV2ZW50LnRhcmdldC5pbm5lclRleHQ7XG4gIH07XG4gIG9uQ2xpY2sgPSAoZXZlbnQ6IGFueSkgPT4ge1xuICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG4gIH07XG59XG5Bbmd1bGFyQ29tcG9uZW50RmFjdG9yeS5JbnN0YW5jZS5yZWdpc3RlckNvbXBvbmVudChMb2NhbGl6YWJsZVN0cmluZy5lZGl0YWJsZVJlbmRlcmVyLCBTdHJpbmdFZGl0b3JDb21wb25lbnQpOyIsIjxzcGFuIHN0eWxlPVwicG9zaXRpb246IHN0YXRpY1wiPlxuICA8c3BhblxuICAgIGNsYXNzPVwic3Ytc3RyaW5nLWVkaXRvclwiXG4gICAgY29udGVudGVkaXRhYmxlPVwidHJ1ZVwiXG4gICAgc3R5bGU9XCJwb3NpdGlvbjogc3RhdGljXCJcbiAgICAqbmdJZj1cIm1vZGVsLmhhc0h0bWxcIlxuICAgIFtpbm5lckh0bWxdPVwibW9kZWwucmVuZGVyZWRIdG1sXCJcbiAgICAoYmx1cik9XCJvbklucHV0KCRldmVudClcIlxuICAgIChjbGljayk9XCJvbkNsaWNrKCRldmVudClcIlxuICA+PC9zcGFuPlxuICA8c3BhblxuICAgIGNsYXNzPVwic3Ytc3RyaW5nLWVkaXRvclwiXG4gICAgY29udGVudGVkaXRhYmxlPVwidHJ1ZVwiXG4gICAgc3R5bGU9XCJwb3NpdGlvbjogc3RhdGljXCJcbiAgICAqbmdJZj1cIiFtb2RlbC5oYXNIdG1sXCJcbiAgICAoYmx1cik9XCJvbklucHV0KCRldmVudClcIlxuICAgIChjbGljayk9XCJvbkNsaWNrKCRldmVudClcIlxuICAgID57eyBtb2RlbC5yZW5kZXJlZEh0bWwgfX08L3NwYW5cbiAgPlxuPC9zcGFuPiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RyaW5nLWVkaXRvci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9wYWNrYWdlcy9zdXJ2ZXktYW5ndWxhci11aS9zcmMvc3RyaW5nLWVkaXRvci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi9wYWNrYWdlcy9zdXJ2ZXktYW5ndWxhci11aS9zcmMvc3RyaW5nLWVkaXRvci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNqRCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFDaEQsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0scUJBQXFCLENBQUM7OztBQU05RCxNQUFNLE9BQU8scUJBQXFCO0lBSmxDO1FBT0UsWUFBTyxHQUFHLENBQUMsS0FBVSxFQUFFLEVBQUU7WUFDdkIsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBQyxTQUFTLENBQUM7UUFDM0MsQ0FBQyxDQUFDO1FBQ0YsWUFBTyxHQUFHLENBQUMsS0FBVSxFQUFFLEVBQUU7WUFDdkIsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1lBQ3ZCLEtBQUssQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUMxQixDQUFDLENBQUM7S0FDSDs7a0hBVlkscUJBQXFCO3NHQUFyQixxQkFBcUIsdUZDUmxDLDJZQWdCQTsyRkRSYSxxQkFBcUI7a0JBSmpDLFNBQVM7K0JBQ0UscUJBQXFCOzhCQUl0QixLQUFLO3NCQUFiLEtBQUs7O0FBVVIsdUJBQXVCLENBQUMsUUFBUSxDQUFDLGlCQUFpQixDQUFDLGlCQUFpQixDQUFDLGdCQUFnQixFQUFFLHFCQUFxQixDQUFDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0IH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IExvY2FsaXphYmxlU3RyaW5nIH0gZnJvbSBcInN1cnZleS1jb3JlXCI7XG5pbXBvcnQgeyBBbmd1bGFyQ29tcG9uZW50RmFjdG9yeSB9IGZyb20gXCIuL2NvbXBvbmVudC1mYWN0b3J5XCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJzdi1uZy1zdHJpbmctZWRpdG9yXCIsXG4gIHRlbXBsYXRlVXJsOiBcIi4vc3RyaW5nLWVkaXRvci5jb21wb25lbnQuaHRtbFwiXG59KVxuZXhwb3J0IGNsYXNzIFN0cmluZ0VkaXRvckNvbXBvbmVudCB7XG4gIEBJbnB1dCgpIG1vZGVsITogTG9jYWxpemFibGVTdHJpbmc7XG5cbiAgb25JbnB1dCA9IChldmVudDogYW55KSA9PiB7XG4gICAgdGhpcy5tb2RlbC50ZXh0ID0gZXZlbnQudGFyZ2V0LmlubmVyVGV4dDtcbiAgfTtcbiAgb25DbGljayA9IChldmVudDogYW55KSA9PiB7XG4gICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgICBldmVudC5zdG9wUHJvcGFnYXRpb24oKTtcbiAgfTtcbn1cbkFuZ3VsYXJDb21wb25lbnRGYWN0b3J5Lkluc3RhbmNlLnJlZ2lzdGVyQ29tcG9uZW50KExvY2FsaXphYmxlU3RyaW5nLmVkaXRhYmxlUmVuZGVyZXIsIFN0cmluZ0VkaXRvckNvbXBvbmVudCk7IiwiPHNwYW5cbiAgY2xhc3M9XCJzdi1zdHJpbmctZWRpdG9yXCJcbiAgY29udGVudGVkaXRhYmxlPVwidHJ1ZVwiXG4gICpuZ0lmPVwibW9kZWwuaGFzSHRtbFwiXG4gIFtpbm5lckh0bWxdPVwibW9kZWwucmVuZGVyZWRIdG1sXCJcbiAgKGJsdXIpPVwib25JbnB1dCgkZXZlbnQpXCJcbiAgKGNsaWNrKT1cIm9uQ2xpY2soJGV2ZW50KVwiXG4+PC9zcGFuPlxuPHNwYW5cbiAgY2xhc3M9XCJzdi1zdHJpbmctZWRpdG9yXCJcbiAgY29udGVudGVkaXRhYmxlPVwidHJ1ZVwiXG4gICpuZ0lmPVwiIW1vZGVsLmhhc0h0bWxcIlxuICAoYmx1cik9XCJvbklucHV0KCRldmVudClcIlxuICAoY2xpY2spPVwib25DbGljaygkZXZlbnQpXCJcbiAgPnt7IG1vZGVsLnJlbmRlcmVkSHRtbCB9fTwvc3BhblxuPlxuIl19

package/esm2020/string-viewer.component.mjs

@@ -7,11 +7,16 @@ export class StringViewerComponent {
     constructor(changeDetectorRef) {
         this.changeDetectorRef = changeDetectorRef;
     }
-    ngOnChanges(changes) {
-        const currentValue = changes["model"].currentValue;
-        const previousValue = changes["model"].previousValue;
-        currentValue.onChanged = () => { this.changeDetectorRef.detectChanges(); };
-        !!previousValue && this.clearOnChanged(previousValue);
+    ngDoCheck() {
+        if (this.model !== this.previousModel) {
+            if (!!this.previousModel) {
+                this.clearOnChanged(this.previousModel);
+            }
+            if (!!this.model) {
+                this.model.onChanged = () => { this.changeDetectorRef.detectChanges(); };
+            }
+            this.previousModel = this.model;
+        }
     }
     clearOnChanged(model) {
         model.onChanged = () => { };
@@ -21,7 +26,7 @@ export class StringViewerComponent {
     }
 }
 StringViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StringViewerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-StringViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: StringViewerComponent, selector: "sv-ng-string-viewer, string-viewer, '[sv-ng-string-viewer]'", inputs: { model: "model" }, usesOnChanges: true, ngImport: i0, template: "<span *ngIf=\"!model.hasHtml\" class=\"sv-string-viewer\">{{model.renderedHtml}}</span>\n<span *ngIf=\"model.hasHtml\" class=\"sv-string-viewer\" [innerHtml]=\"model.renderedHtml\"></span>", styles: [""], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+StringViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: StringViewerComponent, selector: "sv-ng-string-viewer, string-viewer, '[sv-ng-string-viewer]'", inputs: { model: "model" }, ngImport: i0, template: "<span *ngIf=\"!model.hasHtml\" class=\"sv-string-viewer\">{{model.renderedHtml}}</span>\n<span *ngIf=\"model.hasHtml\" class=\"sv-string-viewer\" [innerHtml]=\"model.renderedHtml\"></span>", styles: [""], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StringViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: "sv-ng-string-viewer, string-viewer, '[sv-ng-string-viewer]'", template: "<span *ngIf=\"!model.hasHtml\" class=\"sv-string-viewer\">{{model.renderedHtml}}</span>\n<span *ngIf=\"model.hasHtml\" class=\"sv-string-viewer\" [innerHtml]=\"model.renderedHtml\"></span>", styles: [""] }]
@@ -29,4 +34,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 type: Input
             }] } });
 AngularComponentFactory.Instance.registerComponent(LocalizableString.defaultRenderer, StringViewerComponent);
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RyaW5nLXZpZXdlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9wYWNrYWdlcy9zdXJ2ZXktYW5ndWxhci11aS9zcmMvc3RyaW5nLXZpZXdlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi9wYWNrYWdlcy9zdXJ2ZXktYW5ndWxhci11aS9zcmMvc3RyaW5nLXZpZXdlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQXFCLFNBQVMsRUFBRSxLQUFLLEVBQXVDLE1BQU0sZUFBZSxDQUFDO0FBQ3pHLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGFBQWEsQ0FBQztBQUNoRCxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQzs7O0FBTzlELE1BQU0sT0FBTyxxQkFBcUI7SUFFaEMsWUFBb0IsaUJBQW9DO1FBQXBDLHNCQUFpQixHQUFqQixpQkFBaUIsQ0FBbUI7SUFBRyxDQUFDO0lBQzVELFdBQVcsQ0FBQyxPQUFzQjtRQUNoQyxNQUFNLFlBQVksR0FBRyxPQUFPLENBQUMsT0FBTyxDQUFDLENBQUMsWUFBWSxDQUFDO1FBQ25ELE1BQU0sYUFBYSxHQUFHLE9BQU8sQ0FBQyxPQUFPLENBQUMsQ0FBQyxhQUFhLENBQUM7UUFDckQsWUFBWSxDQUFDLFNBQVMsR0FBRyxHQUFHLEVBQUUsR0FBRyxJQUFJLENBQUMsaUJBQWlCLENBQUMsYUFBYSxFQUFFLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDM0UsQ0FBQyxDQUFDLGFBQWEsSUFBSSxJQUFJLENBQUMsY0FBYyxDQUFDLGFBQWEsQ0FBQyxDQUFDO0lBQ3hELENBQUM7SUFDRCxjQUFjLENBQUMsS0FBd0I7UUFDckMsS0FBSyxDQUFDLFNBQVMsR0FBRyxHQUFHLEVBQUUsR0FBRSxDQUFDLENBQUM7SUFDN0IsQ0FBQztJQUNELFdBQVc7UUFDVCxDQUFDLENBQUMsSUFBSSxDQUFDLEtBQUssSUFBSSxJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNsRCxDQUFDOztrSEFkVSxxQkFBcUI7c0dBQXJCLHFCQUFxQixvSkNUbEMsOExBQzZGOzJGRFFoRixxQkFBcUI7a0JBTGpDLFNBQVM7K0JBQ0UsNkRBQTZEO3dHQUs5RCxLQUFLO3NCQUFiLEtBQUs7O0FBZVIsdUJBQXVCLENBQUMsUUFBUSxDQUFDLGlCQUFpQixDQUFDLGlCQUFpQixDQUFDLGVBQWUsRUFBRSxxQkFBcUIsQ0FBQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0b3JSZWYsIENvbXBvbmVudCwgSW5wdXQsIE9uQ2hhbmdlcywgT25EZXN0cm95LCBTaW1wbGVDaGFuZ2VzIH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IExvY2FsaXphYmxlU3RyaW5nIH0gZnJvbSBcInN1cnZleS1jb3JlXCI7XG5pbXBvcnQgeyBBbmd1bGFyQ29tcG9uZW50RmFjdG9yeSB9IGZyb20gXCIuL2NvbXBvbmVudC1mYWN0b3J5XCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJzdi1uZy1zdHJpbmctdmlld2VyLCBzdHJpbmctdmlld2VyLCAnW3N2LW5nLXN0cmluZy12aWV3ZXJdJ1wiLFxuICB0ZW1wbGF0ZVVybDogXCIuL3N0cmluZy12aWV3ZXIuY29tcG9uZW50Lmh0bWxcIixcbiAgc3R5bGVVcmxzOiBbXCIuL3N0cmluZy12aWV3ZXIuY29tcG9uZW50LnNjc3NcIl1cbn0pXG5leHBvcnQgY2xhc3MgU3RyaW5nVmlld2VyQ29tcG9uZW50IGltcGxlbWVudHMgT25DaGFuZ2VzLCBPbkRlc3Ryb3kge1xuICBASW5wdXQoKSBtb2RlbDogYW55O1xuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGNoYW5nZURldGVjdG9yUmVmOiBDaGFuZ2VEZXRlY3RvclJlZikge31cbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xuICAgIGNvbnN0IGN1cnJlbnRWYWx1ZSA9IGNoYW5nZXNbXCJtb2RlbFwiXS5jdXJyZW50VmFsdWU7XG4gICAgY29uc3QgcHJldmlvdXNWYWx1ZSA9IGNoYW5nZXNbXCJtb2RlbFwiXS5wcmV2aW91c1ZhbHVlO1xuICAgIGN1cnJlbnRWYWx1ZS5vbkNoYW5nZWQgPSAoKSA9PiB7IHRoaXMuY2hhbmdlRGV0ZWN0b3JSZWYuZGV0ZWN0Q2hhbmdlcygpOyB9O1xuICAgICEhcHJldmlvdXNWYWx1ZSAmJiB0aGlzLmNsZWFyT25DaGFuZ2VkKHByZXZpb3VzVmFsdWUpO1xuICB9XG4gIGNsZWFyT25DaGFuZ2VkKG1vZGVsOiBMb2NhbGl6YWJsZVN0cmluZykge1xuICAgIG1vZGVsLm9uQ2hhbmdlZCA9ICgpID0+IHt9O1xuICB9XG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgICEhdGhpcy5tb2RlbCAmJiB0aGlzLmNsZWFyT25DaGFuZ2VkKHRoaXMubW9kZWwpO1xuICB9XG59XG5Bbmd1bGFyQ29tcG9uZW50RmFjdG9yeS5JbnN0YW5jZS5yZWdpc3RlckNvbXBvbmVudChMb2NhbGl6YWJsZVN0cmluZy5kZWZhdWx0UmVuZGVyZXIsIFN0cmluZ1ZpZXdlckNvbXBvbmVudCk7IiwiPHNwYW4gKm5nSWY9XCIhbW9kZWwuaGFzSHRtbFwiIGNsYXNzPVwic3Ytc3RyaW5nLXZpZXdlclwiPnt7bW9kZWwucmVuZGVyZWRIdG1sfX08L3NwYW4+XG48c3BhbiAqbmdJZj1cIm1vZGVsLmhhc0h0bWxcIiBjbGFzcz1cInN2LXN0cmluZy12aWV3ZXJcIiBbaW5uZXJIdG1sXT1cIm1vZGVsLnJlbmRlcmVkSHRtbFwiPjwvc3Bhbj4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RyaW5nLXZpZXdlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9wYWNrYWdlcy9zdXJ2ZXktYW5ndWxhci11aS9zcmMvc3RyaW5nLXZpZXdlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi9wYWNrYWdlcy9zdXJ2ZXktYW5ndWxhci11aS9zcmMvc3RyaW5nLXZpZXdlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQXFCLFNBQVMsRUFBVyxLQUFLLEVBQXVDLE1BQU0sZUFBZSxDQUFDO0FBQ2xILE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGFBQWEsQ0FBQztBQUNoRCxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQzs7O0FBTzlELE1BQU0sT0FBTyxxQkFBcUI7SUFHaEMsWUFBb0IsaUJBQW9DO1FBQXBDLHNCQUFpQixHQUFqQixpQkFBaUIsQ0FBbUI7SUFBRyxDQUFDO0lBQzVELFNBQVM7UUFDUCxJQUFHLElBQUksQ0FBQyxLQUFLLEtBQUssSUFBSSxDQUFDLGFBQWEsRUFBRTtZQUNwQyxJQUFHLENBQUMsQ0FBQyxJQUFJLENBQUMsYUFBYSxFQUFFO2dCQUN2QixJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQzthQUN6QztZQUNELElBQUcsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUU7Z0JBQ2YsSUFBSSxDQUFDLEtBQUssQ0FBQyxTQUFTLEdBQUcsR0FBRyxFQUFFLEdBQUcsSUFBSSxDQUFDLGlCQUFpQixDQUFDLGFBQWEsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDO2FBQzFFO1lBQ0QsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDO1NBQ2pDO0lBQ0gsQ0FBQztJQUNELGNBQWMsQ0FBQyxLQUF3QjtRQUNyQyxLQUFLLENBQUMsU0FBUyxHQUFHLEdBQUcsRUFBRSxHQUFFLENBQUMsQ0FBQztJQUM3QixDQUFDO0lBQ0QsV0FBVztRQUNULENBQUMsQ0FBQyxJQUFJLENBQUMsS0FBSyxJQUFJLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ2xELENBQUM7O2tIQXBCVSxxQkFBcUI7c0dBQXJCLHFCQUFxQiwrSENUbEMsOExBQzZGOzJGRFFoRixxQkFBcUI7a0JBTGpDLFNBQVM7K0JBQ0UsNkRBQTZEO3dHQUs5RCxLQUFLO3NCQUFiLEtBQUs7O0FBcUJSLHVCQUF1QixDQUFDLFFBQVEsQ0FBQyxpQkFBaUIsQ0FBQyxpQkFBaUIsQ0FBQyxlQUFlLEVBQUUscUJBQXFCLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdG9yUmVmLCBDb21wb25lbnQsIERvQ2hlY2ssIElucHV0LCBPbkNoYW5nZXMsIE9uRGVzdHJveSwgU2ltcGxlQ2hhbmdlcyB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBMb2NhbGl6YWJsZVN0cmluZyB9IGZyb20gXCJzdXJ2ZXktY29yZVwiO1xuaW1wb3J0IHsgQW5ndWxhckNvbXBvbmVudEZhY3RvcnkgfSBmcm9tIFwiLi9jb21wb25lbnQtZmFjdG9yeVwiO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6IFwic3Ytbmctc3RyaW5nLXZpZXdlciwgc3RyaW5nLXZpZXdlciwgJ1tzdi1uZy1zdHJpbmctdmlld2VyXSdcIixcbiAgdGVtcGxhdGVVcmw6IFwiLi9zdHJpbmctdmlld2VyLmNvbXBvbmVudC5odG1sXCIsXG4gIHN0eWxlVXJsczogW1wiLi9zdHJpbmctdmlld2VyLmNvbXBvbmVudC5zY3NzXCJdXG59KVxuZXhwb3J0IGNsYXNzIFN0cmluZ1ZpZXdlckNvbXBvbmVudCBpbXBsZW1lbnRzIERvQ2hlY2sge1xuICBASW5wdXQoKSBtb2RlbCE6IExvY2FsaXphYmxlU3RyaW5nO1xuICBwcml2YXRlIHByZXZpb3VzTW9kZWw6IExvY2FsaXphYmxlU3RyaW5nIHwgdW5kZWZpbmVkO1xuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGNoYW5nZURldGVjdG9yUmVmOiBDaGFuZ2VEZXRlY3RvclJlZikge31cbiAgbmdEb0NoZWNrKCk6IHZvaWQge1xuICAgIGlmKHRoaXMubW9kZWwgIT09IHRoaXMucHJldmlvdXNNb2RlbCkge1xuICAgICAgaWYoISF0aGlzLnByZXZpb3VzTW9kZWwpIHtcbiAgICAgICAgdGhpcy5jbGVhck9uQ2hhbmdlZCh0aGlzLnByZXZpb3VzTW9kZWwpO1xuICAgICAgfVxuICAgICAgaWYoISF0aGlzLm1vZGVsKSB7XG4gICAgICAgIHRoaXMubW9kZWwub25DaGFuZ2VkID0gKCkgPT4geyB0aGlzLmNoYW5nZURldGVjdG9yUmVmLmRldGVjdENoYW5nZXMoKTsgfTtcbiAgICAgIH1cbiAgICAgIHRoaXMucHJldmlvdXNNb2RlbCA9IHRoaXMubW9kZWw7XG4gICAgfVxuICB9XG4gIGNsZWFyT25DaGFuZ2VkKG1vZGVsOiBMb2NhbGl6YWJsZVN0cmluZykge1xuICAgIG1vZGVsLm9uQ2hhbmdlZCA9ICgpID0+IHt9O1xuICB9XG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgICEhdGhpcy5tb2RlbCAmJiB0aGlzLmNsZWFyT25DaGFuZ2VkKHRoaXMubW9kZWwpO1xuICB9XG59XG5Bbmd1bGFyQ29tcG9uZW50RmFjdG9yeS5JbnN0YW5jZS5yZWdpc3RlckNvbXBvbmVudChMb2NhbGl6YWJsZVN0cmluZy5kZWZhdWx0UmVuZGVyZXIsIFN0cmluZ1ZpZXdlckNvbXBvbmVudCk7IiwiPHNwYW4gKm5nSWY9XCIhbW9kZWwuaGFzSHRtbFwiIGNsYXNzPVwic3Ytc3RyaW5nLXZpZXdlclwiPnt7bW9kZWwucmVuZGVyZWRIdG1sfX08L3NwYW4+XG48c3BhbiAqbmdJZj1cIm1vZGVsLmhhc0h0bWxcIiBjbGFzcz1cInN2LXN0cmluZy12aWV3ZXJcIiBbaW5uZXJIdG1sXT1cIm1vZGVsLnJlbmRlcmVkSHRtbFwiPjwvc3Bhbj4iXX0=