@energycap/components 0.32.26 → 0.32.27

package/fesm2020/energycap-components.mjs

@@ -4400,10 +4400,10 @@ class TagsComponent {
     }
 }
 TagsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TagsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TagsComponent, selector: "ec-tags", inputs: { id: "id", tags: "tags", wrap: "wrap", isCondensed: "isCondensed" }, outputs: { tagClosed: "tagClosed" }, usesOnChanges: true, ngImport: i0, template: "<ul class=\"tags\" [class.is-wrapped]=\"wrap\">\r\n  <li *ngFor=\"let tag of tagsArray; index as i\"\r\n      id=\"{{id}}_tag_{{i}}\"\r\n      class=\"tag is-{{tag.type}} {{tag.classList}} mr-1\"\r\n      [ngClass]=\"{'text-caption-1': !isCondensed, 'text-caption-2': isCondensed, 'is-condensed': isCondensed, 'pr-0': tag.isDismissable}\"\r\n      title=\"{{tag.tooltip | translate}}\">\r\n    <i *ngIf=\"tag.icon\" class=\"ec-icon {{tag.icon}} font-color-muted ec-icon-sm\"></i>\r\n    {{tag.label | translate}}\r\n    <button id=\"{{id}}_tag_{{i}}_dismissButton\"\r\n            *ngIf=\"tag.isDismissable\"\r\n            (click)=\"closeTag(tag)\">\r\n      <i class=\"ec-icon ec-icon-sm icon-cancel\"></i>\r\n    </button>\r\n  </li>\r\n</ul>", styles: [":host{display:block}.tags{padding:0;margin:0;list-style:none;display:flex}.tags.is-wrapped{flex-wrap:wrap;margin-top:.25rem}.tags.is-wrapped>.tag{margin-bottom:.25rem}.tag{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:#acbcc340;border:2px solid rgb(172,188,195);display:inline-flex;align-items:center;border-radius:calc(var(--ec-border-radius, .25rem) * 3);height:1.5rem;line-height:1.25rem;padding:0 .4375rem;vertical-align:top}.tag>.ec-icon:first-child{margin-right:.1875rem}.tag .ec-icon{display:flex;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;width:auto;height:auto;min-width:1em;justify-content:center}.tag .ec-icon:before,.tag .ec-icon:after{width:auto;height:auto}.tag.is-inverted{background-color:var(--ec-background-color);border-color:var(--ec-background-color)}.tag.is-info{background-color:#acbcc340;border-color:#acbcc3}.tag.is-success{background-color:#c1cd2340;border-color:#c1cd23}.tag.is-warning{background-color:#f5d40040;border-color:#f5d400}.tag.is-danger{background-color:#e3343640;border-color:#e33436}.tag.is-accent{background-color:#906ea840;border-color:#906ea8}.tag.is-chargeback{background-color:#fa7b2e40;border-color:#fa7b2e}.tag.is-accrual{background-color:#23c3cd40;border-color:#23c3cd}button{background-color:transparent;border:0;display:flex;align-items:center;padding:0 .4375rem 0 .1875rem;height:100%;cursor:pointer}button:hover,button:focus{background-color:#1a1a231a;outline:none}.is-condensed{border-radius:var(--ec-border-radius);border:0;padding:0 .25rem;height:1.125rem;line-height:1.125rem;min-width:1.125rem;justify-content:center}.is-condensed>.ec-icon:first-child{margin-right:.125rem}.is-condensed button{padding-right:.25rem;padding-left:.125rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+TagsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TagsComponent, selector: "ec-tags", inputs: { id: "id", tags: "tags", wrap: "wrap", isCondensed: "isCondensed" }, outputs: { tagClosed: "tagClosed" }, usesOnChanges: true, ngImport: i0, template: "<ul class=\"tags\"\r\n    [class.is-wrapped]=\"wrap\">\r\n   <li *ngFor=\"let tag of tagsArray; index as i\"\r\n       id=\"{{id}}_tag_{{i}}\"\r\n       class=\"tag is-{{tag.type}} {{tag.classList}} mr-1\"\r\n       [ngClass]=\"{'text-caption-1': !isCondensed, 'text-caption-2': isCondensed, 'is-condensed': isCondensed, 'pr-0': tag.isDismissable, 'is-link': tag.url}\"\r\n       title=\"{{tag.tooltip | translate}}\">\r\n      <i *ngIf=\"tag.icon\"\r\n         class=\"ec-icon {{tag.icon}} font-color-muted ec-icon-sm\"></i>\r\n      <span *ngIf=\"!tag.url\">{{tag.label | translate}}</span>\r\n\r\n      <a *ngIf=\"tag.url\"\r\n         id=\"{{id}}_tag_{{i}}_link\"\r\n         class=\"font-weight-bold\"\r\n         href=\"{{tag.url}}\"\r\n         target=\"{{tag.target}}\">{{tag.label | translate}}</a>\r\n\r\n      <button id=\"{{id}}_tag_{{i}}_dismissButton\"\r\n              *ngIf=\"tag.isDismissable\"\r\n              (click)=\"closeTag(tag)\">\r\n         <i class=\"ec-icon ec-icon-sm icon-cancel\"></i>\r\n      </button>\r\n   </li>\r\n</ul>", styles: [":root{--ec-font-size-icon: 1rem;--ec-color-icon: rgba(26, 26, 35, .66)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block}.tags{padding:0;margin:0;list-style:none;display:flex}.tags.is-wrapped{flex-wrap:wrap;margin-top:.25rem}.tags.is-wrapped>.tag{margin-bottom:.25rem}.tag{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:#acbcc340;border:2px solid rgb(172,188,195);display:inline-flex;align-items:center;border-radius:calc(var(--ec-border-radius, .25rem) * 3);height:1.5rem;line-height:1.25rem;padding:0 .4375rem;vertical-align:top}.tag>.ec-icon:first-child{margin-right:.1875rem}.tag .ec-icon{display:flex;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;width:auto;height:auto;min-width:1em;justify-content:center}.tag.is-inverted{background-color:var(--ec-background-color);border-color:var(--ec-background-color)}.tag.is-info{background-color:#acbcc340;border-color:#acbcc3}.tag.is-success{background-color:#c1cd2340;border-color:#c1cd23}.tag.is-warning{background-color:#f5d40040;border-color:#f5d400}.tag.is-danger{background-color:#e3343640;border-color:#e33436}.tag.is-accent{background-color:#906ea840;border-color:#906ea8}.tag.is-chargeback{background-color:#fa7b2e40;border-color:#fa7b2e}.tag.is-accrual{background-color:#23c3cd40;border-color:#23c3cd}button{background-color:transparent;border:0;display:flex;align-items:center;padding:0 .4375rem 0 .1875rem;height:100%;cursor:pointer}button:hover,button:focus{background-color:#1a1a231a;outline:none}.is-condensed{border-radius:var(--ec-border-radius);border:0;padding:0 .25rem;height:1.125rem;line-height:1.125rem;min-width:1.125rem;justify-content:center}.is-condensed>.ec-icon:first-child{margin-right:.125rem}.is-condensed button{padding-right:.25rem;padding-left:.125rem}.is-link a:after{opacity:1;margin-left:.1875rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TagsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-tags', template: "<ul class=\"tags\" [class.is-wrapped]=\"wrap\">\r\n  <li *ngFor=\"let tag of tagsArray; index as i\"\r\n      id=\"{{id}}_tag_{{i}}\"\r\n      class=\"tag is-{{tag.type}} {{tag.classList}} mr-1\"\r\n      [ngClass]=\"{'text-caption-1': !isCondensed, 'text-caption-2': isCondensed, 'is-condensed': isCondensed, 'pr-0': tag.isDismissable}\"\r\n      title=\"{{tag.tooltip | translate}}\">\r\n    <i *ngIf=\"tag.icon\" class=\"ec-icon {{tag.icon}} font-color-muted ec-icon-sm\"></i>\r\n    {{tag.label | translate}}\r\n    <button id=\"{{id}}_tag_{{i}}_dismissButton\"\r\n            *ngIf=\"tag.isDismissable\"\r\n            (click)=\"closeTag(tag)\">\r\n      <i class=\"ec-icon ec-icon-sm icon-cancel\"></i>\r\n    </button>\r\n  </li>\r\n</ul>", styles: [":host{display:block}.tags{padding:0;margin:0;list-style:none;display:flex}.tags.is-wrapped{flex-wrap:wrap;margin-top:.25rem}.tags.is-wrapped>.tag{margin-bottom:.25rem}.tag{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:#acbcc340;border:2px solid rgb(172,188,195);display:inline-flex;align-items:center;border-radius:calc(var(--ec-border-radius, .25rem) * 3);height:1.5rem;line-height:1.25rem;padding:0 .4375rem;vertical-align:top}.tag>.ec-icon:first-child{margin-right:.1875rem}.tag .ec-icon{display:flex;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;width:auto;height:auto;min-width:1em;justify-content:center}.tag .ec-icon:before,.tag .ec-icon:after{width:auto;height:auto}.tag.is-inverted{background-color:var(--ec-background-color);border-color:var(--ec-background-color)}.tag.is-info{background-color:#acbcc340;border-color:#acbcc3}.tag.is-success{background-color:#c1cd2340;border-color:#c1cd23}.tag.is-warning{background-color:#f5d40040;border-color:#f5d400}.tag.is-danger{background-color:#e3343640;border-color:#e33436}.tag.is-accent{background-color:#906ea840;border-color:#906ea8}.tag.is-chargeback{background-color:#fa7b2e40;border-color:#fa7b2e}.tag.is-accrual{background-color:#23c3cd40;border-color:#23c3cd}button{background-color:transparent;border:0;display:flex;align-items:center;padding:0 .4375rem 0 .1875rem;height:100%;cursor:pointer}button:hover,button:focus{background-color:#1a1a231a;outline:none}.is-condensed{border-radius:var(--ec-border-radius);border:0;padding:0 .25rem;height:1.125rem;line-height:1.125rem;min-width:1.125rem;justify-content:center}.is-condensed>.ec-icon:first-child{margin-right:.125rem}.is-condensed button{padding-right:.25rem;padding-left:.125rem}\n"] }]
+            args: [{ selector: 'ec-tags', template: "<ul class=\"tags\"\r\n    [class.is-wrapped]=\"wrap\">\r\n   <li *ngFor=\"let tag of tagsArray; index as i\"\r\n       id=\"{{id}}_tag_{{i}}\"\r\n       class=\"tag is-{{tag.type}} {{tag.classList}} mr-1\"\r\n       [ngClass]=\"{'text-caption-1': !isCondensed, 'text-caption-2': isCondensed, 'is-condensed': isCondensed, 'pr-0': tag.isDismissable, 'is-link': tag.url}\"\r\n       title=\"{{tag.tooltip | translate}}\">\r\n      <i *ngIf=\"tag.icon\"\r\n         class=\"ec-icon {{tag.icon}} font-color-muted ec-icon-sm\"></i>\r\n      <span *ngIf=\"!tag.url\">{{tag.label | translate}}</span>\r\n\r\n      <a *ngIf=\"tag.url\"\r\n         id=\"{{id}}_tag_{{i}}_link\"\r\n         class=\"font-weight-bold\"\r\n         href=\"{{tag.url}}\"\r\n         target=\"{{tag.target}}\">{{tag.label | translate}}</a>\r\n\r\n      <button id=\"{{id}}_tag_{{i}}_dismissButton\"\r\n              *ngIf=\"tag.isDismissable\"\r\n              (click)=\"closeTag(tag)\">\r\n         <i class=\"ec-icon ec-icon-sm icon-cancel\"></i>\r\n      </button>\r\n   </li>\r\n</ul>", styles: [":root{--ec-font-size-icon: 1rem;--ec-color-icon: rgba(26, 26, 35, .66)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block}.tags{padding:0;margin:0;list-style:none;display:flex}.tags.is-wrapped{flex-wrap:wrap;margin-top:.25rem}.tags.is-wrapped>.tag{margin-bottom:.25rem}.tag{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:#acbcc340;border:2px solid rgb(172,188,195);display:inline-flex;align-items:center;border-radius:calc(var(--ec-border-radius, .25rem) * 3);height:1.5rem;line-height:1.25rem;padding:0 .4375rem;vertical-align:top}.tag>.ec-icon:first-child{margin-right:.1875rem}.tag .ec-icon{display:flex;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;width:auto;height:auto;min-width:1em;justify-content:center}.tag.is-inverted{background-color:var(--ec-background-color);border-color:var(--ec-background-color)}.tag.is-info{background-color:#acbcc340;border-color:#acbcc3}.tag.is-success{background-color:#c1cd2340;border-color:#c1cd23}.tag.is-warning{background-color:#f5d40040;border-color:#f5d400}.tag.is-danger{background-color:#e3343640;border-color:#e33436}.tag.is-accent{background-color:#906ea840;border-color:#906ea8}.tag.is-chargeback{background-color:#fa7b2e40;border-color:#fa7b2e}.tag.is-accrual{background-color:#23c3cd40;border-color:#23c3cd}button{background-color:transparent;border:0;display:flex;align-items:center;padding:0 .4375rem 0 .1875rem;height:100%;cursor:pointer}button:hover,button:focus{background-color:#1a1a231a;outline:none}.is-condensed{border-radius:var(--ec-border-radius);border:0;padding:0 .25rem;height:1.125rem;line-height:1.125rem;min-width:1.125rem;justify-content:center}.is-condensed>.ec-icon:first-child{margin-right:.125rem}.is-condensed button{padding-right:.25rem;padding-left:.125rem}.is-link a:after{opacity:1;margin-left:.1875rem}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { id: [{
                 type: Input
             }], tags: [{
@@ -10085,12 +10085,15 @@ function safeToLower(item, prop) {
 
 /** Tag contains a label and type. Type is default by default */
 class Tag {
-    constructor(label, type, classList, icon, isDismissable, tooltip) {
+    constructor(label, type, classList, icon, isDismissable, tooltip, url, target) {
+        this.target = '_self';
         this.label = label;
         this.type = type || 'info';
         this.icon = icon;
         this.isDismissable = isDismissable ?? false;
         this.tooltip = tooltip;
+        this.url = url;
+        this.target = target || '_self';
         if (classList) {
             this.classList = classList;
         }