@agorapulse/ui-components 15.0.15 → 15.0.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/agorapulse-ui-components-15.0.18.tgz +0 -0
  2. package/esm2020/icon-button/icon-button.component.mjs +8 -6
  3. package/fesm2015/agorapulse-ui-components-icon-button.mjs +7 -5
  4. package/fesm2015/agorapulse-ui-components-icon-button.mjs.map +1 -1
  5. package/fesm2020/agorapulse-ui-components-icon-button.mjs +7 -5
  6. package/fesm2020/agorapulse-ui-components-icon-button.mjs.map +1 -1
  7. package/icon-button/icon-button.component.d.ts +4 -2
  8. package/package.json +1 -1
  9. package/agorapulse-ui-components-15.0.15.tgz +0 -0
package/esm2020/icon-button/icon-button.component.mjs CHANGED
@@ -25,8 +25,9 @@ export class IconButtonComponent {
25
25
  get loading() {
26
26
  return this._loading;
27
27
  }
28
- constructor(symbolRegistry) {
28
+ constructor(symbolRegistry, elementRef) {
29
29
  this.symbolRegistry = symbolRegistry;
30
+ this.elementRef = elementRef;
30
31
  this.color = 'none';
31
32
  this.disabled = false;
32
33
  this.type = 'flat';
@@ -41,6 +42,7 @@ export class IconButtonComponent {
41
42
  this.symbolRegistry.registerSymbols([
42
43
  apPremiumStar
43
44
  ]);
45
+ this.hostDataTest = this.elementRef.nativeElement.getAttribute('data-test');
44
46
  }
45
47
  ngAfterContentInit() {
46
48
  if (this.symbolComponent) {
@@ -48,8 +50,8 @@ export class IconButtonComponent {
48
50
  }
49
51
  }
50
52
  }
51
- IconButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: IconButtonComponent, deps: [{ token: i1.SymbolRegistry }], target: i0.ɵɵFactoryTarget.Component });
52
- IconButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: IconButtonComponent, isStandalone: true, selector: "ap-icon-button", inputs: { ariaLabel: "ariaLabel", name: "name", color: "color", disabled: "disabled", locked: "locked", loading: "loading", type: "type" }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur" }, queries: [{ propertyName: "symbolComponent", first: true, predicate: SymbolComponent, descendants: true }], ngImport: i0, template: "<button\n class=\"icon-button\"\n type=\"button\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.data-test]=\"name\"\n [disabled]=\"disabled\"\n [class.blue]=\"color === 'blue'\"\n [class.green]=\"color === 'green'\"\n [class.red]=\"color === 'red'\"\n [class.flat]=\"type === 'flat'\"\n [class.stroked]=\"type === 'stroked' || type === 'stroked-transparent'\"\n [class.transparent]=\"type === 'stroked-transparent'\"\n [class.loading]=\"loading\"\n [class.locked]=\"locked\"\n (click)=\"onClick.emit($event)\"\n (focus)=\"onFocus.emit($event)\"\n (blur)=\"onBlur.emit($event)\"\n>\n <ng-content\n *ngIf=\"!loading\">\n </ng-content>\n <ap-loader\n *ngIf=\"loading\"\n color=\"white\"\n [diameter]=\"16\"\n ></ap-loader>\n <div *ngIf=\"locked\"\n class=\"locked-symbol\">\n <ap-symbol\n symbolId=\"premium-star\"\n size=\"micro\"\n >\n </ap-symbol>\n </div>\n</button>\n", styles: ["ap-icon-button{display:flex;width:var(--comp-icon-button-width);max-width:var(--comp-icon-button-width);height:var(--comp-icon-button-height);max-height:var(--comp-icon-button-height)}ap-icon-button button.icon-button{margin:0;padding:0;width:var(--comp-icon-button-width);max-width:var(--comp-icon-button-width);height:var(--comp-icon-button-height);max-height:var(--comp-icon-button-height);border-radius:var(--comp-icon-button-border-radius);background:transparent;border:none;display:grid;place-content:center;position:relative;transition:border .25s}@media (hover: hover){ap-icon-button button.icon-button:focus:not(.disabled):not(:active){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-icon-button button.icon-button:hover{cursor:pointer}ap-icon-button button.icon-button:hover:not(.stroked):not(.locked){background:var(--ref-color-grey-05)}ap-icon-button button.icon-button:active:not(.stroked):not(.locked){background:var(--ref-color-grey-10)}ap-icon-button button.icon-button ap-symbol{display:flex;justify-content:center;width:16px;align-items:center;height:16px;padding:0;margin:0;color:var(--ref-color-grey-60)}ap-icon-button button.icon-button:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-icon-button button.icon-button.blue:hover{cursor:pointer}ap-icon-button button.icon-button.blue:hover:not(.stroked){background:var(--ref-color-electric-blue-05)}ap-icon-button button.icon-button.blue:active:not(.stroked){background:var(--ref-color-electric-blue-10)}ap-icon-button button.icon-button.blue:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-icon-button button.icon-button.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.green:hover{cursor:pointer}ap-icon-button button.icon-button.green:hover:not(.stroked){background:var(--ref-color-green-10)}ap-icon-button button.icon-button.green:active:not(.stroked){background:var(--ref-color-green-20)}ap-icon-button button.icon-button.green:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.green:disabled ap-symbol{color:var(--ref-color-green-20)}ap-icon-button button.icon-button.green ap-symbol{color:var(--ref-color-green-100)}ap-icon-button button.icon-button.red:hover{cursor:pointer}ap-icon-button button.icon-button.red:hover:not(.stroked){background:var(--ref-color-red-10)}ap-icon-button button.icon-button.red:active:not(.stroked){background:var(--ref-color-red-20)}ap-icon-button button.icon-button.red:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-icon-button button.icon-button.red ap-symbol{color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked{border-width:1px;border-style:solid;background:white}ap-icon-button button.icon-button.stroked:not(.loading):not(.locked){border-color:var(--ref-color-grey-20)}ap-icon-button button.icon-button.stroked:hover:not(.locked){border-color:var(--ref-color-grey-40)}ap-icon-button button.icon-button.stroked:active:not(.locked){border-color:var(--ref-color-grey-60)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked){border-color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-electric-blue-60)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):disabled{border-color:var(--ref-color-electric-blue-20)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked){border-color:var(--ref-color-green-100)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-green-60)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):disabled{border-color:var(--ref-color-green-20)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-green-100)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked){border-color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-red-60)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):disabled{border-color:var(--ref-color-red-20)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked.transparent:not(.loading):not(.locked){background:transparent}ap-icon-button button.icon-button.loading{background:var(--ref-color-grey-20);border:none;pointer-events:none}ap-icon-button button.icon-button.locked{background:var(--ref-color-purple-10);color:var(--ref-color-purple-80);border:1px solid var(--ref-color-purple-20)}ap-icon-button button.icon-button.locked:hover{border-color:var(--ref-color-purple-40)}ap-icon-button button.icon-button.locked:active{border-color:var(--ref-color-purple-60)}ap-icon-button button.icon-button.locked ap-symbol{color:var(--ref-color-purple-100)}ap-icon-button button.icon-button.locked .locked-symbol{position:absolute;top:-6px;right:-6px}ap-icon-button button.icon-button.locked .locked-symbol ap-symbol{border-radius:100%;background:var(--ref-color-white)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol[symbolId]", inputs: ["color", "symbolId", "size", "state"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AgorapulseUiAnimationsModule }, { kind: "component", type: i2.LoaderComponent, selector: "ap-loader", inputs: ["color", "diameter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
53
+ IconButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: IconButtonComponent, deps: [{ token: i1.SymbolRegistry }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
54
+ IconButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: IconButtonComponent, isStandalone: true, selector: "ap-icon-button", inputs: { ariaLabel: "ariaLabel", name: "name", color: "color", disabled: "disabled", locked: "locked", loading: "loading", type: "type" }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur" }, queries: [{ propertyName: "symbolComponent", first: true, predicate: SymbolComponent, descendants: true }], ngImport: i0, template: "<button\n class=\"icon-button\"\n type=\"button\"\n [name]=\"name\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.data-test]=\"hostDataTest ?? name\"\n [disabled]=\"disabled\"\n [class.blue]=\"color === 'blue'\"\n [class.green]=\"color === 'green'\"\n [class.red]=\"color === 'red'\"\n [class.flat]=\"type === 'flat'\"\n [class.stroked]=\"type === 'stroked' || type === 'stroked-transparent'\"\n [class.transparent]=\"type === 'stroked-transparent'\"\n [class.loading]=\"loading\"\n [class.locked]=\"locked\"\n (click)=\"onClick.emit($event)\"\n (focus)=\"onFocus.emit($event)\"\n (blur)=\"onBlur.emit($event)\"\n>\n <ng-content\n *ngIf=\"!loading\">\n </ng-content>\n <ap-loader\n *ngIf=\"loading\"\n color=\"white\"\n [diameter]=\"16\"\n ></ap-loader>\n <div *ngIf=\"locked\"\n class=\"locked-symbol\">\n <ap-symbol\n symbolId=\"premium-star\"\n size=\"micro\"\n >\n </ap-symbol>\n </div>\n</button>\n", styles: ["ap-icon-button{display:flex;width:var(--comp-icon-button-width);max-width:var(--comp-icon-button-width);height:var(--comp-icon-button-height);max-height:var(--comp-icon-button-height)}ap-icon-button button.icon-button{margin:0;padding:0;width:var(--comp-icon-button-width);max-width:var(--comp-icon-button-width);height:var(--comp-icon-button-height);max-height:var(--comp-icon-button-height);border-radius:var(--comp-icon-button-border-radius);background:transparent;border:none;display:grid;place-content:center;position:relative;transition:border .25s}@media (hover: hover){ap-icon-button button.icon-button:focus:not(.disabled):not(:active){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-icon-button button.icon-button:hover{cursor:pointer}ap-icon-button button.icon-button:hover:not(.stroked):not(.locked){background:var(--ref-color-grey-05)}ap-icon-button button.icon-button:active:not(.stroked):not(.locked){background:var(--ref-color-grey-10)}ap-icon-button button.icon-button ap-symbol{display:flex;justify-content:center;width:16px;align-items:center;height:16px;padding:0;margin:0;color:var(--ref-color-grey-60)}ap-icon-button button.icon-button:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-icon-button button.icon-button.blue:hover{cursor:pointer}ap-icon-button button.icon-button.blue:hover:not(.stroked){background:var(--ref-color-electric-blue-05)}ap-icon-button button.icon-button.blue:active:not(.stroked){background:var(--ref-color-electric-blue-10)}ap-icon-button button.icon-button.blue:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-icon-button button.icon-button.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.green:hover{cursor:pointer}ap-icon-button button.icon-button.green:hover:not(.stroked){background:var(--ref-color-green-10)}ap-icon-button button.icon-button.green:active:not(.stroked){background:var(--ref-color-green-20)}ap-icon-button button.icon-button.green:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.green:disabled ap-symbol{color:var(--ref-color-green-20)}ap-icon-button button.icon-button.green ap-symbol{color:var(--ref-color-green-100)}ap-icon-button button.icon-button.red:hover{cursor:pointer}ap-icon-button button.icon-button.red:hover:not(.stroked){background:var(--ref-color-red-10)}ap-icon-button button.icon-button.red:active:not(.stroked){background:var(--ref-color-red-20)}ap-icon-button button.icon-button.red:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-icon-button button.icon-button.red ap-symbol{color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked{border-width:1px;border-style:solid;background:white}ap-icon-button button.icon-button.stroked:not(.loading):not(.locked){border-color:var(--ref-color-grey-20)}ap-icon-button button.icon-button.stroked:hover:not(.locked){border-color:var(--ref-color-grey-40)}ap-icon-button button.icon-button.stroked:active:not(.locked){border-color:var(--ref-color-grey-60)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked){border-color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-electric-blue-60)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):disabled{border-color:var(--ref-color-electric-blue-20)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked){border-color:var(--ref-color-green-100)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-green-60)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):disabled{border-color:var(--ref-color-green-20)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-green-100)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked){border-color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-red-60)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):disabled{border-color:var(--ref-color-red-20)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked.transparent:not(.loading):not(.locked){background:transparent}ap-icon-button button.icon-button.loading{background:var(--ref-color-grey-20);border:none;pointer-events:none}ap-icon-button button.icon-button.locked{background:var(--ref-color-purple-10);color:var(--ref-color-purple-80);border:1px solid var(--ref-color-purple-20)}ap-icon-button button.icon-button.locked:hover{border-color:var(--ref-color-purple-40)}ap-icon-button button.icon-button.locked:active{border-color:var(--ref-color-purple-60)}ap-icon-button button.icon-button.locked ap-symbol{color:var(--ref-color-purple-100)}ap-icon-button button.icon-button.locked .locked-symbol{position:absolute;top:-6px;right:-6px}ap-icon-button button.icon-button.locked .locked-symbol ap-symbol{border-radius:100%;background:var(--ref-color-white)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol[symbolId]", inputs: ["color", "symbolId", "size", "state"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AgorapulseUiAnimationsModule }, { kind: "component", type: i2.LoaderComponent, selector: "ap-loader", inputs: ["color", "diameter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
53
55
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: IconButtonComponent, decorators: [{
54
56
  type: Component,
55
57
  args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-icon-button', standalone: true, imports: [
@@ -57,8 +59,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImpor
57
59
  SymbolComponent,
58
60
  CommonModule,
59
61
  AgorapulseUiAnimationsModule
60
- ], encapsulation: ViewEncapsulation.None, template: "<button\n class=\"icon-button\"\n type=\"button\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.data-test]=\"name\"\n [disabled]=\"disabled\"\n [class.blue]=\"color === 'blue'\"\n [class.green]=\"color === 'green'\"\n [class.red]=\"color === 'red'\"\n [class.flat]=\"type === 'flat'\"\n [class.stroked]=\"type === 'stroked' || type === 'stroked-transparent'\"\n [class.transparent]=\"type === 'stroked-transparent'\"\n [class.loading]=\"loading\"\n [class.locked]=\"locked\"\n (click)=\"onClick.emit($event)\"\n (focus)=\"onFocus.emit($event)\"\n (blur)=\"onBlur.emit($event)\"\n>\n <ng-content\n *ngIf=\"!loading\">\n </ng-content>\n <ap-loader\n *ngIf=\"loading\"\n color=\"white\"\n [diameter]=\"16\"\n ></ap-loader>\n <div *ngIf=\"locked\"\n class=\"locked-symbol\">\n <ap-symbol\n symbolId=\"premium-star\"\n size=\"micro\"\n >\n </ap-symbol>\n </div>\n</button>\n", styles: ["ap-icon-button{display:flex;width:var(--comp-icon-button-width);max-width:var(--comp-icon-button-width);height:var(--comp-icon-button-height);max-height:var(--comp-icon-button-height)}ap-icon-button button.icon-button{margin:0;padding:0;width:var(--comp-icon-button-width);max-width:var(--comp-icon-button-width);height:var(--comp-icon-button-height);max-height:var(--comp-icon-button-height);border-radius:var(--comp-icon-button-border-radius);background:transparent;border:none;display:grid;place-content:center;position:relative;transition:border .25s}@media (hover: hover){ap-icon-button button.icon-button:focus:not(.disabled):not(:active){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-icon-button button.icon-button:hover{cursor:pointer}ap-icon-button button.icon-button:hover:not(.stroked):not(.locked){background:var(--ref-color-grey-05)}ap-icon-button button.icon-button:active:not(.stroked):not(.locked){background:var(--ref-color-grey-10)}ap-icon-button button.icon-button ap-symbol{display:flex;justify-content:center;width:16px;align-items:center;height:16px;padding:0;margin:0;color:var(--ref-color-grey-60)}ap-icon-button button.icon-button:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-icon-button button.icon-button.blue:hover{cursor:pointer}ap-icon-button button.icon-button.blue:hover:not(.stroked){background:var(--ref-color-electric-blue-05)}ap-icon-button button.icon-button.blue:active:not(.stroked){background:var(--ref-color-electric-blue-10)}ap-icon-button button.icon-button.blue:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-icon-button button.icon-button.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.green:hover{cursor:pointer}ap-icon-button button.icon-button.green:hover:not(.stroked){background:var(--ref-color-green-10)}ap-icon-button button.icon-button.green:active:not(.stroked){background:var(--ref-color-green-20)}ap-icon-button button.icon-button.green:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.green:disabled ap-symbol{color:var(--ref-color-green-20)}ap-icon-button button.icon-button.green ap-symbol{color:var(--ref-color-green-100)}ap-icon-button button.icon-button.red:hover{cursor:pointer}ap-icon-button button.icon-button.red:hover:not(.stroked){background:var(--ref-color-red-10)}ap-icon-button button.icon-button.red:active:not(.stroked){background:var(--ref-color-red-20)}ap-icon-button button.icon-button.red:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-icon-button button.icon-button.red ap-symbol{color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked{border-width:1px;border-style:solid;background:white}ap-icon-button button.icon-button.stroked:not(.loading):not(.locked){border-color:var(--ref-color-grey-20)}ap-icon-button button.icon-button.stroked:hover:not(.locked){border-color:var(--ref-color-grey-40)}ap-icon-button button.icon-button.stroked:active:not(.locked){border-color:var(--ref-color-grey-60)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked){border-color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-electric-blue-60)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):disabled{border-color:var(--ref-color-electric-blue-20)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked){border-color:var(--ref-color-green-100)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-green-60)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):disabled{border-color:var(--ref-color-green-20)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-green-100)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked){border-color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-red-60)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):disabled{border-color:var(--ref-color-red-20)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked.transparent:not(.loading):not(.locked){background:transparent}ap-icon-button button.icon-button.loading{background:var(--ref-color-grey-20);border:none;pointer-events:none}ap-icon-button button.icon-button.locked{background:var(--ref-color-purple-10);color:var(--ref-color-purple-80);border:1px solid var(--ref-color-purple-20)}ap-icon-button button.icon-button.locked:hover{border-color:var(--ref-color-purple-40)}ap-icon-button button.icon-button.locked:active{border-color:var(--ref-color-purple-60)}ap-icon-button button.icon-button.locked ap-symbol{color:var(--ref-color-purple-100)}ap-icon-button button.icon-button.locked .locked-symbol{position:absolute;top:-6px;right:-6px}ap-icon-button button.icon-button.locked .locked-symbol ap-symbol{border-radius:100%;background:var(--ref-color-white)}\n"] }]
61
- }], ctorParameters: function () { return [{ type: i1.SymbolRegistry }]; }, propDecorators: { ariaLabel: [{
62
+ ], encapsulation: ViewEncapsulation.None, template: "<button\n class=\"icon-button\"\n type=\"button\"\n [name]=\"name\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.data-test]=\"hostDataTest ?? name\"\n [disabled]=\"disabled\"\n [class.blue]=\"color === 'blue'\"\n [class.green]=\"color === 'green'\"\n [class.red]=\"color === 'red'\"\n [class.flat]=\"type === 'flat'\"\n [class.stroked]=\"type === 'stroked' || type === 'stroked-transparent'\"\n [class.transparent]=\"type === 'stroked-transparent'\"\n [class.loading]=\"loading\"\n [class.locked]=\"locked\"\n (click)=\"onClick.emit($event)\"\n (focus)=\"onFocus.emit($event)\"\n (blur)=\"onBlur.emit($event)\"\n>\n <ng-content\n *ngIf=\"!loading\">\n </ng-content>\n <ap-loader\n *ngIf=\"loading\"\n color=\"white\"\n [diameter]=\"16\"\n ></ap-loader>\n <div *ngIf=\"locked\"\n class=\"locked-symbol\">\n <ap-symbol\n symbolId=\"premium-star\"\n size=\"micro\"\n >\n </ap-symbol>\n </div>\n</button>\n", styles: ["ap-icon-button{display:flex;width:var(--comp-icon-button-width);max-width:var(--comp-icon-button-width);height:var(--comp-icon-button-height);max-height:var(--comp-icon-button-height)}ap-icon-button button.icon-button{margin:0;padding:0;width:var(--comp-icon-button-width);max-width:var(--comp-icon-button-width);height:var(--comp-icon-button-height);max-height:var(--comp-icon-button-height);border-radius:var(--comp-icon-button-border-radius);background:transparent;border:none;display:grid;place-content:center;position:relative;transition:border .25s}@media (hover: hover){ap-icon-button button.icon-button:focus:not(.disabled):not(:active){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-icon-button button.icon-button:hover{cursor:pointer}ap-icon-button button.icon-button:hover:not(.stroked):not(.locked){background:var(--ref-color-grey-05)}ap-icon-button button.icon-button:active:not(.stroked):not(.locked){background:var(--ref-color-grey-10)}ap-icon-button button.icon-button ap-symbol{display:flex;justify-content:center;width:16px;align-items:center;height:16px;padding:0;margin:0;color:var(--ref-color-grey-60)}ap-icon-button button.icon-button:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-icon-button button.icon-button.blue:hover{cursor:pointer}ap-icon-button button.icon-button.blue:hover:not(.stroked){background:var(--ref-color-electric-blue-05)}ap-icon-button button.icon-button.blue:active:not(.stroked){background:var(--ref-color-electric-blue-10)}ap-icon-button button.icon-button.blue:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-icon-button button.icon-button.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.green:hover{cursor:pointer}ap-icon-button button.icon-button.green:hover:not(.stroked){background:var(--ref-color-green-10)}ap-icon-button button.icon-button.green:active:not(.stroked){background:var(--ref-color-green-20)}ap-icon-button button.icon-button.green:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.green:disabled ap-symbol{color:var(--ref-color-green-20)}ap-icon-button button.icon-button.green ap-symbol{color:var(--ref-color-green-100)}ap-icon-button button.icon-button.red:hover{cursor:pointer}ap-icon-button button.icon-button.red:hover:not(.stroked){background:var(--ref-color-red-10)}ap-icon-button button.icon-button.red:active:not(.stroked){background:var(--ref-color-red-20)}ap-icon-button button.icon-button.red:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-icon-button button.icon-button.red ap-symbol{color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked{border-width:1px;border-style:solid;background:white}ap-icon-button button.icon-button.stroked:not(.loading):not(.locked){border-color:var(--ref-color-grey-20)}ap-icon-button button.icon-button.stroked:hover:not(.locked){border-color:var(--ref-color-grey-40)}ap-icon-button button.icon-button.stroked:active:not(.locked){border-color:var(--ref-color-grey-60)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked){border-color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-electric-blue-60)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):disabled{border-color:var(--ref-color-electric-blue-20)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked){border-color:var(--ref-color-green-100)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-green-60)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):disabled{border-color:var(--ref-color-green-20)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-green-100)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked){border-color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-red-60)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):disabled{border-color:var(--ref-color-red-20)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked.transparent:not(.loading):not(.locked){background:transparent}ap-icon-button button.icon-button.loading{background:var(--ref-color-grey-20);border:none;pointer-events:none}ap-icon-button button.icon-button.locked{background:var(--ref-color-purple-10);color:var(--ref-color-purple-80);border:1px solid var(--ref-color-purple-20)}ap-icon-button button.icon-button.locked:hover{border-color:var(--ref-color-purple-40)}ap-icon-button button.icon-button.locked:active{border-color:var(--ref-color-purple-60)}ap-icon-button button.icon-button.locked ap-symbol{color:var(--ref-color-purple-100)}ap-icon-button button.icon-button.locked .locked-symbol{position:absolute;top:-6px;right:-6px}ap-icon-button button.icon-button.locked .locked-symbol ap-symbol{border-radius:100%;background:var(--ref-color-white)}\n"] }]
63
+ }], ctorParameters: function () { return [{ type: i1.SymbolRegistry }, { type: i0.ElementRef }]; }, propDecorators: { ariaLabel: [{
62
64
  type: Input
63
65
  }], name: [{
64
66
  type: Input
@@ -82,4 +84,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImpor
82
84
  type: ContentChild,
83
85
  args: [SymbolComponent]
84
86
  }] } });
85
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWNvbi1idXR0b24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vbGlicy91aS1jb21wb25lbnRzL2ljb24tYnV0dG9uL3NyYy9pY29uLWJ1dHRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9saWJzL3VpLWNvbXBvbmVudHMvaWNvbi1idXR0b24vc3JjL2ljb24tYnV0dG9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFFSCx1QkFBdUIsRUFDdkIsU0FBUyxFQUFFLFlBQVksRUFDdkIsWUFBWSxFQUNaLEtBQUssRUFDTCxNQUFNLEVBQ04saUJBQWlCLEVBQ3BCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBQyxZQUFZLEVBQUUsSUFBSSxFQUFDLE1BQU0saUJBQWlCLENBQUM7QUFDbkQsT0FBTyxFQUFDLGFBQWEsRUFBRSxlQUFlLEVBQWlCLE1BQU0sdUJBQXVCLENBQUM7QUFDckYsT0FBTyxFQUFDLDRCQUE0QixFQUFDLE1BQU0sMkJBQTJCLENBQUM7Ozs7QUFrQnZFLE1BQU0sT0FBTyxtQkFBbUI7SUFNNUIsSUFBYSxNQUFNLENBQUUsTUFBZTtRQUNoQyxJQUFJLENBQUMsT0FBTyxHQUFHLE1BQU0sQ0FBQztRQUN0QixJQUFJLE1BQU0sRUFBRTtZQUNSLElBQUksQ0FBQyxLQUFLLEdBQUcsTUFBTSxDQUFDO1lBQ3BCLElBQUksQ0FBQyxRQUFRLEdBQUcsS0FBSyxDQUFDO1lBQ3RCLElBQUksQ0FBQyxPQUFPLEdBQUcsS0FBSyxDQUFDO1NBQ3hCO0lBQ0wsQ0FBQztJQUVELElBQUksTUFBTTtRQUNOLE9BQU8sSUFBSSxDQUFDLE9BQU8sQ0FBQztJQUN4QixDQUFDO0lBQ0QsSUFBYSxPQUFPLENBQUUsT0FBZ0I7UUFDbEMsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUU7WUFDZCxJQUFJLENBQUMsUUFBUSxHQUFHLE9BQU8sQ0FBQztTQUMzQjtJQUNMLENBQUM7SUFFRCxJQUFJLE9BQU87UUFDUCxPQUFPLElBQUksQ0FBQyxRQUFRLENBQUM7SUFDekIsQ0FBQztJQWlCRCxZQUFvQixjQUE4QjtRQUE5QixtQkFBYyxHQUFkLGNBQWMsQ0FBZ0I7UUF2Q3pDLFVBQUssR0FBZ0IsTUFBTSxDQUFDO1FBQzVCLGFBQVEsR0FBWSxLQUFLLENBQUM7UUFzQjFCLFNBQUksR0FBZSxNQUFNLENBQUM7UUFFbkMsMkJBQTJCO1FBQ2pCLFlBQU8sR0FBNkIsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUVqRSwyQkFBMkI7UUFDakIsWUFBTyxHQUE2QixJQUFJLFlBQVksRUFBRSxDQUFDO1FBRWpFLDJCQUEyQjtRQUNqQixXQUFNLEdBQTZCLElBQUksWUFBWSxFQUFFLENBQUM7UUFJeEQsYUFBUSxHQUFZLEtBQUssQ0FBQztRQUMxQixZQUFPLEdBQVksS0FBSyxDQUFDO1FBRzdCLElBQUksQ0FBQyxjQUFjLENBQUMsZUFBZSxDQUFDO1lBQ2hDLGFBQWE7U0FDaEIsQ0FBQyxDQUFDO0lBQ1AsQ0FBQztJQUVELGtCQUFrQjtRQUNkLElBQUksSUFBSSxDQUFDLGVBQWUsRUFBRTtZQUN0QixJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksR0FBRyxPQUFPLENBQUM7U0FDdkM7SUFDTCxDQUFDOztnSEFyRFEsbUJBQW1CO29HQUFuQixtQkFBbUIsMFVBc0NkLGVBQWUsZ0RDbkVqQywyL0JBbUNBLGdrTERkUSxJQUFJLDZGQUNKLGVBQWUsK0dBQ2YsWUFBWSw4QkFDWiw0QkFBNEI7MkZBS3ZCLG1CQUFtQjtrQkFkL0IsU0FBUztzQ0FDVyx1QkFBdUIsQ0FBQyxNQUFNLFlBQ3JDLGdCQUFnQixjQUVkLElBQUksV0FDUDt3QkFDTCxJQUFJO3dCQUNKLGVBQWU7d0JBQ2YsWUFBWTt3QkFDWiw0QkFBNEI7cUJBQy9CLGlCQUVjLGlCQUFpQixDQUFDLElBQUk7cUdBSTVCLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNPLE1BQU07c0JBQWxCLEtBQUs7Z0JBWU8sT0FBTztzQkFBbkIsS0FBSztnQkFTRyxJQUFJO3NCQUFaLEtBQUs7Z0JBR0ksT0FBTztzQkFBaEIsTUFBTTtnQkFHRyxPQUFPO3NCQUFoQixNQUFNO2dCQUdHLE1BQU07c0JBQWYsTUFBTTtnQkFFd0IsZUFBZTtzQkFBN0MsWUFBWTt1QkFBQyxlQUFlIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgICBBZnRlckNvbnRlbnRJbml0LFxuICAgIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICAgIENvbXBvbmVudCwgQ29udGVudENoaWxkLFxuICAgIEV2ZW50RW1pdHRlcixcbiAgICBJbnB1dCxcbiAgICBPdXRwdXQsXG4gICAgVmlld0VuY2Fwc3VsYXRpb25cbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7Q29tbW9uTW9kdWxlLCBOZ0lmfSBmcm9tIFwiQGFuZ3VsYXIvY29tbW9uXCI7XG5pbXBvcnQge2FwUHJlbWl1bVN0YXIsIFN5bWJvbENvbXBvbmVudCwgU3ltYm9sUmVnaXN0cnl9IGZyb20gXCJAYWdvcmFwdWxzZS91aS1zeW1ib2xcIjtcbmltcG9ydCB7QWdvcmFwdWxzZVVpQW5pbWF0aW9uc01vZHVsZX0gZnJvbSBcIkBhZ29yYXB1bHNlL3VpLWFuaW1hdGlvbnNcIjtcblxuZXhwb3J0IHR5cGUgQnV0dG9uVHlwZSA9ICdmbGF0JyB8ICdzdHJva2VkLXRyYW5zcGFyZW50JyB8ICdzdHJva2VkJztcbmV4cG9ydCB0eXBlIEJ1dHRvbkNvbG9yID0gJ25vbmUnIHwgJ2JsdWUnIHwgJ3JlZCcgfCAnZ3JlZW4nO1xuQENvbXBvbmVudCh7XG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICAgc2VsZWN0b3I6ICdhcC1pY29uLWJ1dHRvbicsXG4gICAgc3R5bGVVcmxzOiBbJy4vaWNvbi1idXR0b24uY29tcG9uZW50LnNjc3MnXSxcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIGltcG9ydHM6IFtcbiAgICAgICAgTmdJZixcbiAgICAgICAgU3ltYm9sQ29tcG9uZW50LFxuICAgICAgICBDb21tb25Nb2R1bGUsXG4gICAgICAgIEFnb3JhcHVsc2VVaUFuaW1hdGlvbnNNb2R1bGVcbiAgICBdLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9pY29uLWJ1dHRvbi5jb21wb25lbnQuaHRtbCcsXG4gICAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZVxufSlcbmV4cG9ydCBjbGFzcyBJY29uQnV0dG9uQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJDb250ZW50SW5pdCB7XG5cbiAgICBASW5wdXQoKSBhcmlhTGFiZWw6IHN0cmluZztcbiAgICBASW5wdXQoKSBuYW1lOiBzdHJpbmc7XG4gICAgQElucHV0KCkgY29sb3I6IEJ1dHRvbkNvbG9yID0gJ25vbmUnO1xuICAgIEBJbnB1dCgpIGRpc2FibGVkOiBib29sZWFuID0gZmFsc2U7XG4gICAgQElucHV0KCkgc2V0IGxvY2tlZCAobG9ja2VkOiBib29sZWFuKSB7XG4gICAgICAgIHRoaXMuX2xvY2tlZCA9IGxvY2tlZDtcbiAgICAgICAgaWYgKGxvY2tlZCkge1xuICAgICAgICAgICAgdGhpcy5jb2xvciA9ICdub25lJztcbiAgICAgICAgICAgIHRoaXMuZGlzYWJsZWQgPSBmYWxzZTtcbiAgICAgICAgICAgIHRoaXMubG9hZGluZyA9IGZhbHNlO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgZ2V0IGxvY2tlZCgpOiBib29sZWFuIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuX2xvY2tlZDtcbiAgICB9XG4gICAgQElucHV0KCkgc2V0IGxvYWRpbmcgKGxvYWRpbmc6IGJvb2xlYW4pIHtcbiAgICAgICAgaWYgKCF0aGlzLmxvY2tlZCkge1xuICAgICAgICAgICAgdGhpcy5fbG9hZGluZyA9IGxvYWRpbmc7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBnZXQgbG9hZGluZygpOiBib29sZWFuIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuX2xvYWRpbmc7XG4gICAgfVxuICAgIEBJbnB1dCgpIHR5cGU6IEJ1dHRvblR5cGUgPSAnZmxhdCc7XG5cbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmVcbiAgICBAT3V0cHV0KCkgb25DbGljazogRXZlbnRFbWl0dGVyPE1vdXNlRXZlbnQ+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lXG4gICAgQE91dHB1dCgpIG9uRm9jdXM6IEV2ZW50RW1pdHRlcjxGb2N1c0V2ZW50PiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZVxuICAgIEBPdXRwdXQoKSBvbkJsdXI6IEV2ZW50RW1pdHRlcjxGb2N1c0V2ZW50PiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuICAgIEBDb250ZW50Q2hpbGQoU3ltYm9sQ29tcG9uZW50KSBzeW1ib2xDb21wb25lbnQ6IFN5bWJvbENvbXBvbmVudDtcblxuICAgIHByaXZhdGUgX2xvYWRpbmc6IGJvb2xlYW4gPSBmYWxzZTtcbiAgICBwcml2YXRlIF9sb2NrZWQ6IGJvb2xlYW4gPSBmYWxzZTtcblxuICAgIGNvbnN0cnVjdG9yKHByaXZhdGUgc3ltYm9sUmVnaXN0cnk6IFN5bWJvbFJlZ2lzdHJ5KSB7XG4gICAgICAgIHRoaXMuc3ltYm9sUmVnaXN0cnkucmVnaXN0ZXJTeW1ib2xzKFtcbiAgICAgICAgICAgIGFwUHJlbWl1bVN0YXJcbiAgICAgICAgXSk7XG4gICAgfVxuXG4gICAgbmdBZnRlckNvbnRlbnRJbml0KCk6IHZvaWQge1xuICAgICAgICBpZiAodGhpcy5zeW1ib2xDb21wb25lbnQpIHtcbiAgICAgICAgICAgIHRoaXMuc3ltYm9sQ29tcG9uZW50LnNpemUgPSAnbWljcm8nO1xuICAgICAgICB9XG4gICAgfVxufVxuIiwiPGJ1dHRvblxuICAgIGNsYXNzPVwiaWNvbi1idXR0b25cIlxuICAgIHR5cGU9XCJidXR0b25cIlxuICAgIFthdHRyLmFyaWEtbGFiZWxdPVwiYXJpYUxhYmVsIHx8IG51bGxcIlxuICAgIFthdHRyLmRhdGEtdGVzdF09XCJuYW1lXCJcbiAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxuICAgIFtjbGFzcy5ibHVlXT1cImNvbG9yID09PSAnYmx1ZSdcIlxuICAgIFtjbGFzcy5ncmVlbl09XCJjb2xvciA9PT0gJ2dyZWVuJ1wiXG4gICAgW2NsYXNzLnJlZF09XCJjb2xvciA9PT0gJ3JlZCdcIlxuICAgIFtjbGFzcy5mbGF0XT1cInR5cGUgPT09ICdmbGF0J1wiXG4gICAgW2NsYXNzLnN0cm9rZWRdPVwidHlwZSA9PT0gJ3N0cm9rZWQnIHx8IHR5cGUgPT09ICdzdHJva2VkLXRyYW5zcGFyZW50J1wiXG4gICAgW2NsYXNzLnRyYW5zcGFyZW50XT1cInR5cGUgPT09ICdzdHJva2VkLXRyYW5zcGFyZW50J1wiXG4gICAgW2NsYXNzLmxvYWRpbmddPVwibG9hZGluZ1wiXG4gICAgW2NsYXNzLmxvY2tlZF09XCJsb2NrZWRcIlxuICAgIChjbGljayk9XCJvbkNsaWNrLmVtaXQoJGV2ZW50KVwiXG4gICAgKGZvY3VzKT1cIm9uRm9jdXMuZW1pdCgkZXZlbnQpXCJcbiAgICAoYmx1cik9XCJvbkJsdXIuZW1pdCgkZXZlbnQpXCJcbj5cbiAgICA8bmctY29udGVudFxuICAgICAgICAqbmdJZj1cIiFsb2FkaW5nXCI+XG4gICAgPC9uZy1jb250ZW50PlxuICAgIDxhcC1sb2FkZXJcbiAgICAgICAgKm5nSWY9XCJsb2FkaW5nXCJcbiAgICAgICAgY29sb3I9XCJ3aGl0ZVwiXG4gICAgICAgIFtkaWFtZXRlcl09XCIxNlwiXG4gICAgPjwvYXAtbG9hZGVyPlxuICAgIDxkaXYgKm5nSWY9XCJsb2NrZWRcIlxuICAgICAgICBjbGFzcz1cImxvY2tlZC1zeW1ib2xcIj5cbiAgICAgICAgPGFwLXN5bWJvbFxuICAgICAgICAgICAgc3ltYm9sSWQ9XCJwcmVtaXVtLXN0YXJcIlxuICAgICAgICAgICAgc2l6ZT1cIm1pY3JvXCJcbiAgICAgICAgPlxuICAgICAgICA8L2FwLXN5bWJvbD5cbiAgICA8L2Rpdj5cbjwvYnV0dG9uPlxuIl19
87
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWNvbi1idXR0b24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vbGlicy91aS1jb21wb25lbnRzL2ljb24tYnV0dG9uL3NyYy9pY29uLWJ1dHRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9saWJzL3VpLWNvbXBvbmVudHMvaWNvbi1idXR0b24vc3JjL2ljb24tYnV0dG9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFFSCx1QkFBdUIsRUFDdkIsU0FBUyxFQUFFLFlBQVksRUFDdkIsWUFBWSxFQUNaLEtBQUssRUFDTCxNQUFNLEVBQ04saUJBQWlCLEVBQ3BCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBQyxZQUFZLEVBQUUsSUFBSSxFQUFDLE1BQU0saUJBQWlCLENBQUM7QUFDbkQsT0FBTyxFQUFDLGFBQWEsRUFBRSxlQUFlLEVBQWlCLE1BQU0sdUJBQXVCLENBQUM7QUFDckYsT0FBTyxFQUFDLDRCQUE0QixFQUFDLE1BQU0sMkJBQTJCLENBQUM7Ozs7QUFrQnZFLE1BQU0sT0FBTyxtQkFBbUI7SUFNNUIsSUFBYSxNQUFNLENBQUUsTUFBZTtRQUNoQyxJQUFJLENBQUMsT0FBTyxHQUFHLE1BQU0sQ0FBQztRQUN0QixJQUFJLE1BQU0sRUFBRTtZQUNSLElBQUksQ0FBQyxLQUFLLEdBQUcsTUFBTSxDQUFDO1lBQ3BCLElBQUksQ0FBQyxRQUFRLEdBQUcsS0FBSyxDQUFDO1lBQ3RCLElBQUksQ0FBQyxPQUFPLEdBQUcsS0FBSyxDQUFDO1NBQ3hCO0lBQ0wsQ0FBQztJQUVELElBQUksTUFBTTtRQUNOLE9BQU8sSUFBSSxDQUFDLE9BQU8sQ0FBQztJQUN4QixDQUFDO0lBQ0QsSUFBYSxPQUFPLENBQUUsT0FBZ0I7UUFDbEMsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUU7WUFDZCxJQUFJLENBQUMsUUFBUSxHQUFHLE9BQU8sQ0FBQztTQUMzQjtJQUNMLENBQUM7SUFFRCxJQUFJLE9BQU87UUFDUCxPQUFPLElBQUksQ0FBQyxRQUFRLENBQUM7SUFDekIsQ0FBQztJQWtCRCxZQUFvQixjQUE4QixFQUM5QixVQUFzQjtRQUR0QixtQkFBYyxHQUFkLGNBQWMsQ0FBZ0I7UUFDOUIsZUFBVSxHQUFWLFVBQVUsQ0FBWTtRQXpDakMsVUFBSyxHQUFnQixNQUFNLENBQUM7UUFDNUIsYUFBUSxHQUFZLEtBQUssQ0FBQztRQXNCMUIsU0FBSSxHQUFlLE1BQU0sQ0FBQztRQUVuQywyQkFBMkI7UUFDakIsWUFBTyxHQUE2QixJQUFJLFlBQVksRUFBRSxDQUFDO1FBRWpFLDJCQUEyQjtRQUNqQixZQUFPLEdBQTZCLElBQUksWUFBWSxFQUFFLENBQUM7UUFFakUsMkJBQTJCO1FBQ2pCLFdBQU0sR0FBNkIsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUl4RCxhQUFRLEdBQVksS0FBSyxDQUFDO1FBQzFCLFlBQU8sR0FBWSxLQUFLLENBQUM7UUFLN0IsSUFBSSxDQUFDLGNBQWMsQ0FBQyxlQUFlLENBQUM7WUFDaEMsYUFBYTtTQUNoQixDQUFDLENBQUM7UUFDSCxJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLFlBQVksQ0FBQyxXQUFXLENBQUMsQ0FBQztJQUNoRixDQUFDO0lBRUQsa0JBQWtCO1FBQ2QsSUFBSSxJQUFJLENBQUMsZUFBZSxFQUFFO1lBQ3RCLElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxHQUFHLE9BQU8sQ0FBQztTQUN2QztJQUNMLENBQUM7O2dIQXhEUSxtQkFBbUI7b0dBQW5CLG1CQUFtQiwwVUFzQ2QsZUFBZSxnRENuRWpDLGdpQ0FvQ0EsZ2tMRGZRLElBQUksNkZBQ0osZUFBZSwrR0FDZixZQUFZLDhCQUNaLDRCQUE0QjsyRkFLdkIsbUJBQW1CO2tCQWQvQixTQUFTO3NDQUNXLHVCQUF1QixDQUFDLE1BQU0sWUFDckMsZ0JBQWdCLGNBRWQsSUFBSSxXQUNQO3dCQUNMLElBQUk7d0JBQ0osZUFBZTt3QkFDZixZQUFZO3dCQUNaLDRCQUE0QjtxQkFDL0IsaUJBRWMsaUJBQWlCLENBQUMsSUFBSTs4SEFJNUIsU0FBUztzQkFBakIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ08sTUFBTTtzQkFBbEIsS0FBSztnQkFZTyxPQUFPO3NCQUFuQixLQUFLO2dCQVNHLElBQUk7c0JBQVosS0FBSztnQkFHSSxPQUFPO3NCQUFoQixNQUFNO2dCQUdHLE9BQU87c0JBQWhCLE1BQU07Z0JBR0csTUFBTTtzQkFBZixNQUFNO2dCQUV3QixlQUFlO3NCQUE3QyxZQUFZO3VCQUFDLGVBQWUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICAgIEFmdGVyQ29udGVudEluaXQsXG4gICAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gICAgQ29tcG9uZW50LCBDb250ZW50Q2hpbGQsIEVsZW1lbnRSZWYsXG4gICAgRXZlbnRFbWl0dGVyLCBIb3N0QmluZGluZyxcbiAgICBJbnB1dCxcbiAgICBPdXRwdXQsXG4gICAgVmlld0VuY2Fwc3VsYXRpb25cbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7Q29tbW9uTW9kdWxlLCBOZ0lmfSBmcm9tIFwiQGFuZ3VsYXIvY29tbW9uXCI7XG5pbXBvcnQge2FwUHJlbWl1bVN0YXIsIFN5bWJvbENvbXBvbmVudCwgU3ltYm9sUmVnaXN0cnl9IGZyb20gXCJAYWdvcmFwdWxzZS91aS1zeW1ib2xcIjtcbmltcG9ydCB7QWdvcmFwdWxzZVVpQW5pbWF0aW9uc01vZHVsZX0gZnJvbSBcIkBhZ29yYXB1bHNlL3VpLWFuaW1hdGlvbnNcIjtcblxuZXhwb3J0IHR5cGUgQnV0dG9uVHlwZSA9ICdmbGF0JyB8ICdzdHJva2VkLXRyYW5zcGFyZW50JyB8ICdzdHJva2VkJztcbmV4cG9ydCB0eXBlIEJ1dHRvbkNvbG9yID0gJ25vbmUnIHwgJ2JsdWUnIHwgJ3JlZCcgfCAnZ3JlZW4nO1xuQENvbXBvbmVudCh7XG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICAgc2VsZWN0b3I6ICdhcC1pY29uLWJ1dHRvbicsXG4gICAgc3R5bGVVcmxzOiBbJy4vaWNvbi1idXR0b24uY29tcG9uZW50LnNjc3MnXSxcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIGltcG9ydHM6IFtcbiAgICAgICAgTmdJZixcbiAgICAgICAgU3ltYm9sQ29tcG9uZW50LFxuICAgICAgICBDb21tb25Nb2R1bGUsXG4gICAgICAgIEFnb3JhcHVsc2VVaUFuaW1hdGlvbnNNb2R1bGVcbiAgICBdLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9pY29uLWJ1dHRvbi5jb21wb25lbnQuaHRtbCcsXG4gICAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZVxufSlcbmV4cG9ydCBjbGFzcyBJY29uQnV0dG9uQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJDb250ZW50SW5pdCB7XG5cbiAgICBASW5wdXQoKSBhcmlhTGFiZWw6IHN0cmluZztcbiAgICBASW5wdXQoKSBuYW1lOiBzdHJpbmc7XG4gICAgQElucHV0KCkgY29sb3I6IEJ1dHRvbkNvbG9yID0gJ25vbmUnO1xuICAgIEBJbnB1dCgpIGRpc2FibGVkOiBib29sZWFuID0gZmFsc2U7XG4gICAgQElucHV0KCkgc2V0IGxvY2tlZCAobG9ja2VkOiBib29sZWFuKSB7XG4gICAgICAgIHRoaXMuX2xvY2tlZCA9IGxvY2tlZDtcbiAgICAgICAgaWYgKGxvY2tlZCkge1xuICAgICAgICAgICAgdGhpcy5jb2xvciA9ICdub25lJztcbiAgICAgICAgICAgIHRoaXMuZGlzYWJsZWQgPSBmYWxzZTtcbiAgICAgICAgICAgIHRoaXMubG9hZGluZyA9IGZhbHNlO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgZ2V0IGxvY2tlZCgpOiBib29sZWFuIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuX2xvY2tlZDtcbiAgICB9XG4gICAgQElucHV0KCkgc2V0IGxvYWRpbmcgKGxvYWRpbmc6IGJvb2xlYW4pIHtcbiAgICAgICAgaWYgKCF0aGlzLmxvY2tlZCkge1xuICAgICAgICAgICAgdGhpcy5fbG9hZGluZyA9IGxvYWRpbmc7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBnZXQgbG9hZGluZygpOiBib29sZWFuIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuX2xvYWRpbmc7XG4gICAgfVxuICAgIEBJbnB1dCgpIHR5cGU6IEJ1dHRvblR5cGUgPSAnZmxhdCc7XG5cbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmVcbiAgICBAT3V0cHV0KCkgb25DbGljazogRXZlbnRFbWl0dGVyPE1vdXNlRXZlbnQ+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lXG4gICAgQE91dHB1dCgpIG9uRm9jdXM6IEV2ZW50RW1pdHRlcjxGb2N1c0V2ZW50PiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZVxuICAgIEBPdXRwdXQoKSBvbkJsdXI6IEV2ZW50RW1pdHRlcjxGb2N1c0V2ZW50PiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuICAgIEBDb250ZW50Q2hpbGQoU3ltYm9sQ29tcG9uZW50KSBzeW1ib2xDb21wb25lbnQ6IFN5bWJvbENvbXBvbmVudDtcblxuICAgIHByaXZhdGUgX2xvYWRpbmc6IGJvb2xlYW4gPSBmYWxzZTtcbiAgICBwcml2YXRlIF9sb2NrZWQ6IGJvb2xlYW4gPSBmYWxzZTtcbiAgICBob3N0RGF0YVRlc3Q6IHN0cmluZztcblxuICAgIGNvbnN0cnVjdG9yKHByaXZhdGUgc3ltYm9sUmVnaXN0cnk6IFN5bWJvbFJlZ2lzdHJ5LFxuICAgICAgICAgICAgICAgIHByaXZhdGUgZWxlbWVudFJlZjogRWxlbWVudFJlZikge1xuICAgICAgICB0aGlzLnN5bWJvbFJlZ2lzdHJ5LnJlZ2lzdGVyU3ltYm9scyhbXG4gICAgICAgICAgICBhcFByZW1pdW1TdGFyXG4gICAgICAgIF0pO1xuICAgICAgICB0aGlzLmhvc3REYXRhVGVzdCA9IHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LmdldEF0dHJpYnV0ZSgnZGF0YS10ZXN0Jyk7XG4gICAgfVxuXG4gICAgbmdBZnRlckNvbnRlbnRJbml0KCk6IHZvaWQge1xuICAgICAgICBpZiAodGhpcy5zeW1ib2xDb21wb25lbnQpIHtcbiAgICAgICAgICAgIHRoaXMuc3ltYm9sQ29tcG9uZW50LnNpemUgPSAnbWljcm8nO1xuICAgICAgICB9XG4gICAgfVxufVxuIiwiPGJ1dHRvblxuICAgIGNsYXNzPVwiaWNvbi1idXR0b25cIlxuICAgIHR5cGU9XCJidXR0b25cIlxuICAgIFtuYW1lXT1cIm5hbWVcIlxuICAgIFthdHRyLmFyaWEtbGFiZWxdPVwiYXJpYUxhYmVsIHx8IG51bGxcIlxuICAgIFthdHRyLmRhdGEtdGVzdF09XCJob3N0RGF0YVRlc3QgPz8gbmFtZVwiXG4gICAgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcbiAgICBbY2xhc3MuYmx1ZV09XCJjb2xvciA9PT0gJ2JsdWUnXCJcbiAgICBbY2xhc3MuZ3JlZW5dPVwiY29sb3IgPT09ICdncmVlbidcIlxuICAgIFtjbGFzcy5yZWRdPVwiY29sb3IgPT09ICdyZWQnXCJcbiAgICBbY2xhc3MuZmxhdF09XCJ0eXBlID09PSAnZmxhdCdcIlxuICAgIFtjbGFzcy5zdHJva2VkXT1cInR5cGUgPT09ICdzdHJva2VkJyB8fCB0eXBlID09PSAnc3Ryb2tlZC10cmFuc3BhcmVudCdcIlxuICAgIFtjbGFzcy50cmFuc3BhcmVudF09XCJ0eXBlID09PSAnc3Ryb2tlZC10cmFuc3BhcmVudCdcIlxuICAgIFtjbGFzcy5sb2FkaW5nXT1cImxvYWRpbmdcIlxuICAgIFtjbGFzcy5sb2NrZWRdPVwibG9ja2VkXCJcbiAgICAoY2xpY2spPVwib25DbGljay5lbWl0KCRldmVudClcIlxuICAgIChmb2N1cyk9XCJvbkZvY3VzLmVtaXQoJGV2ZW50KVwiXG4gICAgKGJsdXIpPVwib25CbHVyLmVtaXQoJGV2ZW50KVwiXG4+XG4gICAgPG5nLWNvbnRlbnRcbiAgICAgICAgKm5nSWY9XCIhbG9hZGluZ1wiPlxuICAgIDwvbmctY29udGVudD5cbiAgICA8YXAtbG9hZGVyXG4gICAgICAgICpuZ0lmPVwibG9hZGluZ1wiXG4gICAgICAgIGNvbG9yPVwid2hpdGVcIlxuICAgICAgICBbZGlhbWV0ZXJdPVwiMTZcIlxuICAgID48L2FwLWxvYWRlcj5cbiAgICA8ZGl2ICpuZ0lmPVwibG9ja2VkXCJcbiAgICAgICAgY2xhc3M9XCJsb2NrZWQtc3ltYm9sXCI+XG4gICAgICAgIDxhcC1zeW1ib2xcbiAgICAgICAgICAgIHN5bWJvbElkPVwicHJlbWl1bS1zdGFyXCJcbiAgICAgICAgICAgIHNpemU9XCJtaWNyb1wiXG4gICAgICAgID5cbiAgICAgICAgPC9hcC1zeW1ib2w+XG4gICAgPC9kaXY+XG48L2J1dHRvbj5cbiJdfQ==
package/fesm2015/agorapulse-ui-components-icon-button.mjs CHANGED
@@ -26,8 +26,9 @@ class IconButtonComponent {
26
26
  get loading() {
27
27
  return this._loading;
28
28
  }
29
- constructor(symbolRegistry) {
29
+ constructor(symbolRegistry, elementRef) {
30
30
  this.symbolRegistry = symbolRegistry;
31
+ this.elementRef = elementRef;
31
32
  this.color = 'none';
32
33
  this.disabled = false;
33
34
  this.type = 'flat';
@@ -42,6 +43,7 @@ class IconButtonComponent {
42
43
  this.symbolRegistry.registerSymbols([
43
44
  apPremiumStar
44
45
  ]);
46
+ this.hostDataTest = this.elementRef.nativeElement.getAttribute('data-test');
45
47
  }
46
48
  ngAfterContentInit() {
47
49
  if (this.symbolComponent) {
@@ -49,8 +51,8 @@ class IconButtonComponent {
49
51
  }
50
52
  }
51
53
  }
52
- IconButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: IconButtonComponent, deps: [{ token: i1.SymbolRegistry }], target: i0.ɵɵFactoryTarget.Component });
53
- IconButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: IconButtonComponent, isStandalone: true, selector: "ap-icon-button", inputs: { ariaLabel: "ariaLabel", name: "name", color: "color", disabled: "disabled", locked: "locked", loading: "loading", type: "type" }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur" }, queries: [{ propertyName: "symbolComponent", first: true, predicate: SymbolComponent, descendants: true }], ngImport: i0, template: "<button\n class=\"icon-button\"\n type=\"button\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.data-test]=\"name\"\n [disabled]=\"disabled\"\n [class.blue]=\"color === 'blue'\"\n [class.green]=\"color === 'green'\"\n [class.red]=\"color === 'red'\"\n [class.flat]=\"type === 'flat'\"\n [class.stroked]=\"type === 'stroked' || type === 'stroked-transparent'\"\n [class.transparent]=\"type === 'stroked-transparent'\"\n [class.loading]=\"loading\"\n [class.locked]=\"locked\"\n (click)=\"onClick.emit($event)\"\n (focus)=\"onFocus.emit($event)\"\n (blur)=\"onBlur.emit($event)\"\n>\n <ng-content\n *ngIf=\"!loading\">\n </ng-content>\n <ap-loader\n *ngIf=\"loading\"\n color=\"white\"\n [diameter]=\"16\"\n ></ap-loader>\n <div *ngIf=\"locked\"\n class=\"locked-symbol\">\n <ap-symbol\n symbolId=\"premium-star\"\n size=\"micro\"\n >\n </ap-symbol>\n </div>\n</button>\n", styles: ["ap-icon-button{display:flex;width:var(--comp-icon-button-width);max-width:var(--comp-icon-button-width);height:var(--comp-icon-button-height);max-height:var(--comp-icon-button-height)}ap-icon-button button.icon-button{margin:0;padding:0;width:var(--comp-icon-button-width);max-width:var(--comp-icon-button-width);height:var(--comp-icon-button-height);max-height:var(--comp-icon-button-height);border-radius:var(--comp-icon-button-border-radius);background:transparent;border:none;display:grid;place-content:center;position:relative;transition:border .25s}@media (hover: hover){ap-icon-button button.icon-button:focus:not(.disabled):not(:active){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-icon-button button.icon-button:hover{cursor:pointer}ap-icon-button button.icon-button:hover:not(.stroked):not(.locked){background:var(--ref-color-grey-05)}ap-icon-button button.icon-button:active:not(.stroked):not(.locked){background:var(--ref-color-grey-10)}ap-icon-button button.icon-button ap-symbol{display:flex;justify-content:center;width:16px;align-items:center;height:16px;padding:0;margin:0;color:var(--ref-color-grey-60)}ap-icon-button button.icon-button:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-icon-button button.icon-button.blue:hover{cursor:pointer}ap-icon-button button.icon-button.blue:hover:not(.stroked){background:var(--ref-color-electric-blue-05)}ap-icon-button button.icon-button.blue:active:not(.stroked){background:var(--ref-color-electric-blue-10)}ap-icon-button button.icon-button.blue:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-icon-button button.icon-button.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.green:hover{cursor:pointer}ap-icon-button button.icon-button.green:hover:not(.stroked){background:var(--ref-color-green-10)}ap-icon-button button.icon-button.green:active:not(.stroked){background:var(--ref-color-green-20)}ap-icon-button button.icon-button.green:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.green:disabled ap-symbol{color:var(--ref-color-green-20)}ap-icon-button button.icon-button.green ap-symbol{color:var(--ref-color-green-100)}ap-icon-button button.icon-button.red:hover{cursor:pointer}ap-icon-button button.icon-button.red:hover:not(.stroked){background:var(--ref-color-red-10)}ap-icon-button button.icon-button.red:active:not(.stroked){background:var(--ref-color-red-20)}ap-icon-button button.icon-button.red:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-icon-button button.icon-button.red ap-symbol{color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked{border-width:1px;border-style:solid;background:white}ap-icon-button button.icon-button.stroked:not(.loading):not(.locked){border-color:var(--ref-color-grey-20)}ap-icon-button button.icon-button.stroked:hover:not(.locked){border-color:var(--ref-color-grey-40)}ap-icon-button button.icon-button.stroked:active:not(.locked){border-color:var(--ref-color-grey-60)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked){border-color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-electric-blue-60)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):disabled{border-color:var(--ref-color-electric-blue-20)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked){border-color:var(--ref-color-green-100)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-green-60)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):disabled{border-color:var(--ref-color-green-20)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-green-100)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked){border-color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-red-60)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):disabled{border-color:var(--ref-color-red-20)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked.transparent:not(.loading):not(.locked){background:transparent}ap-icon-button button.icon-button.loading{background:var(--ref-color-grey-20);border:none;pointer-events:none}ap-icon-button button.icon-button.locked{background:var(--ref-color-purple-10);color:var(--ref-color-purple-80);border:1px solid var(--ref-color-purple-20)}ap-icon-button button.icon-button.locked:hover{border-color:var(--ref-color-purple-40)}ap-icon-button button.icon-button.locked:active{border-color:var(--ref-color-purple-60)}ap-icon-button button.icon-button.locked ap-symbol{color:var(--ref-color-purple-100)}ap-icon-button button.icon-button.locked .locked-symbol{position:absolute;top:-6px;right:-6px}ap-icon-button button.icon-button.locked .locked-symbol ap-symbol{border-radius:100%;background:var(--ref-color-white)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol[symbolId]", inputs: ["color", "symbolId", "size", "state"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AgorapulseUiAnimationsModule }, { kind: "component", type: i2.LoaderComponent, selector: "ap-loader", inputs: ["color", "diameter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
54
+ IconButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: IconButtonComponent, deps: [{ token: i1.SymbolRegistry }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
55
+ IconButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: IconButtonComponent, isStandalone: true, selector: "ap-icon-button", inputs: { ariaLabel: "ariaLabel", name: "name", color: "color", disabled: "disabled", locked: "locked", loading: "loading", type: "type" }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur" }, queries: [{ propertyName: "symbolComponent", first: true, predicate: SymbolComponent, descendants: true }], ngImport: i0, template: "<button\n class=\"icon-button\"\n type=\"button\"\n [name]=\"name\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.data-test]=\"hostDataTest ?? name\"\n [disabled]=\"disabled\"\n [class.blue]=\"color === 'blue'\"\n [class.green]=\"color === 'green'\"\n [class.red]=\"color === 'red'\"\n [class.flat]=\"type === 'flat'\"\n [class.stroked]=\"type === 'stroked' || type === 'stroked-transparent'\"\n [class.transparent]=\"type === 'stroked-transparent'\"\n [class.loading]=\"loading\"\n [class.locked]=\"locked\"\n (click)=\"onClick.emit($event)\"\n (focus)=\"onFocus.emit($event)\"\n (blur)=\"onBlur.emit($event)\"\n>\n <ng-content\n *ngIf=\"!loading\">\n </ng-content>\n <ap-loader\n *ngIf=\"loading\"\n color=\"white\"\n [diameter]=\"16\"\n ></ap-loader>\n <div *ngIf=\"locked\"\n class=\"locked-symbol\">\n <ap-symbol\n symbolId=\"premium-star\"\n size=\"micro\"\n >\n </ap-symbol>\n </div>\n</button>\n", styles: ["ap-icon-button{display:flex;width:var(--comp-icon-button-width);max-width:var(--comp-icon-button-width);height:var(--comp-icon-button-height);max-height:var(--comp-icon-button-height)}ap-icon-button button.icon-button{margin:0;padding:0;width:var(--comp-icon-button-width);max-width:var(--comp-icon-button-width);height:var(--comp-icon-button-height);max-height:var(--comp-icon-button-height);border-radius:var(--comp-icon-button-border-radius);background:transparent;border:none;display:grid;place-content:center;position:relative;transition:border .25s}@media (hover: hover){ap-icon-button button.icon-button:focus:not(.disabled):not(:active){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-icon-button button.icon-button:hover{cursor:pointer}ap-icon-button button.icon-button:hover:not(.stroked):not(.locked){background:var(--ref-color-grey-05)}ap-icon-button button.icon-button:active:not(.stroked):not(.locked){background:var(--ref-color-grey-10)}ap-icon-button button.icon-button ap-symbol{display:flex;justify-content:center;width:16px;align-items:center;height:16px;padding:0;margin:0;color:var(--ref-color-grey-60)}ap-icon-button button.icon-button:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-icon-button button.icon-button.blue:hover{cursor:pointer}ap-icon-button button.icon-button.blue:hover:not(.stroked){background:var(--ref-color-electric-blue-05)}ap-icon-button button.icon-button.blue:active:not(.stroked){background:var(--ref-color-electric-blue-10)}ap-icon-button button.icon-button.blue:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-icon-button button.icon-button.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.green:hover{cursor:pointer}ap-icon-button button.icon-button.green:hover:not(.stroked){background:var(--ref-color-green-10)}ap-icon-button button.icon-button.green:active:not(.stroked){background:var(--ref-color-green-20)}ap-icon-button button.icon-button.green:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.green:disabled ap-symbol{color:var(--ref-color-green-20)}ap-icon-button button.icon-button.green ap-symbol{color:var(--ref-color-green-100)}ap-icon-button button.icon-button.red:hover{cursor:pointer}ap-icon-button button.icon-button.red:hover:not(.stroked){background:var(--ref-color-red-10)}ap-icon-button button.icon-button.red:active:not(.stroked){background:var(--ref-color-red-20)}ap-icon-button button.icon-button.red:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-icon-button button.icon-button.red ap-symbol{color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked{border-width:1px;border-style:solid;background:white}ap-icon-button button.icon-button.stroked:not(.loading):not(.locked){border-color:var(--ref-color-grey-20)}ap-icon-button button.icon-button.stroked:hover:not(.locked){border-color:var(--ref-color-grey-40)}ap-icon-button button.icon-button.stroked:active:not(.locked){border-color:var(--ref-color-grey-60)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked){border-color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-electric-blue-60)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):disabled{border-color:var(--ref-color-electric-blue-20)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked){border-color:var(--ref-color-green-100)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-green-60)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):disabled{border-color:var(--ref-color-green-20)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-green-100)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked){border-color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-red-60)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):disabled{border-color:var(--ref-color-red-20)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked.transparent:not(.loading):not(.locked){background:transparent}ap-icon-button button.icon-button.loading{background:var(--ref-color-grey-20);border:none;pointer-events:none}ap-icon-button button.icon-button.locked{background:var(--ref-color-purple-10);color:var(--ref-color-purple-80);border:1px solid var(--ref-color-purple-20)}ap-icon-button button.icon-button.locked:hover{border-color:var(--ref-color-purple-40)}ap-icon-button button.icon-button.locked:active{border-color:var(--ref-color-purple-60)}ap-icon-button button.icon-button.locked ap-symbol{color:var(--ref-color-purple-100)}ap-icon-button button.icon-button.locked .locked-symbol{position:absolute;top:-6px;right:-6px}ap-icon-button button.icon-button.locked .locked-symbol ap-symbol{border-radius:100%;background:var(--ref-color-white)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol[symbolId]", inputs: ["color", "symbolId", "size", "state"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AgorapulseUiAnimationsModule }, { kind: "component", type: i2.LoaderComponent, selector: "ap-loader", inputs: ["color", "diameter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
54
56
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: IconButtonComponent, decorators: [{
55
57
  type: Component,
56
58
  args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-icon-button', standalone: true, imports: [
@@ -58,8 +60,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImpor
58
60
  SymbolComponent,
59
61
  CommonModule,
60
62
  AgorapulseUiAnimationsModule
61
- ], encapsulation: ViewEncapsulation.None, template: "<button\n class=\"icon-button\"\n type=\"button\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.data-test]=\"name\"\n [disabled]=\"disabled\"\n [class.blue]=\"color === 'blue'\"\n [class.green]=\"color === 'green'\"\n [class.red]=\"color === 'red'\"\n [class.flat]=\"type === 'flat'\"\n [class.stroked]=\"type === 'stroked' || type === 'stroked-transparent'\"\n [class.transparent]=\"type === 'stroked-transparent'\"\n [class.loading]=\"loading\"\n [class.locked]=\"locked\"\n (click)=\"onClick.emit($event)\"\n (focus)=\"onFocus.emit($event)\"\n (blur)=\"onBlur.emit($event)\"\n>\n <ng-content\n *ngIf=\"!loading\">\n </ng-content>\n <ap-loader\n *ngIf=\"loading\"\n color=\"white\"\n [diameter]=\"16\"\n ></ap-loader>\n <div *ngIf=\"locked\"\n class=\"locked-symbol\">\n <ap-symbol\n symbolId=\"premium-star\"\n size=\"micro\"\n >\n </ap-symbol>\n </div>\n</button>\n", styles: ["ap-icon-button{display:flex;width:var(--comp-icon-button-width);max-width:var(--comp-icon-button-width);height:var(--comp-icon-button-height);max-height:var(--comp-icon-button-height)}ap-icon-button button.icon-button{margin:0;padding:0;width:var(--comp-icon-button-width);max-width:var(--comp-icon-button-width);height:var(--comp-icon-button-height);max-height:var(--comp-icon-button-height);border-radius:var(--comp-icon-button-border-radius);background:transparent;border:none;display:grid;place-content:center;position:relative;transition:border .25s}@media (hover: hover){ap-icon-button button.icon-button:focus:not(.disabled):not(:active){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-icon-button button.icon-button:hover{cursor:pointer}ap-icon-button button.icon-button:hover:not(.stroked):not(.locked){background:var(--ref-color-grey-05)}ap-icon-button button.icon-button:active:not(.stroked):not(.locked){background:var(--ref-color-grey-10)}ap-icon-button button.icon-button ap-symbol{display:flex;justify-content:center;width:16px;align-items:center;height:16px;padding:0;margin:0;color:var(--ref-color-grey-60)}ap-icon-button button.icon-button:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-icon-button button.icon-button.blue:hover{cursor:pointer}ap-icon-button button.icon-button.blue:hover:not(.stroked){background:var(--ref-color-electric-blue-05)}ap-icon-button button.icon-button.blue:active:not(.stroked){background:var(--ref-color-electric-blue-10)}ap-icon-button button.icon-button.blue:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-icon-button button.icon-button.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.green:hover{cursor:pointer}ap-icon-button button.icon-button.green:hover:not(.stroked){background:var(--ref-color-green-10)}ap-icon-button button.icon-button.green:active:not(.stroked){background:var(--ref-color-green-20)}ap-icon-button button.icon-button.green:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.green:disabled ap-symbol{color:var(--ref-color-green-20)}ap-icon-button button.icon-button.green ap-symbol{color:var(--ref-color-green-100)}ap-icon-button button.icon-button.red:hover{cursor:pointer}ap-icon-button button.icon-button.red:hover:not(.stroked){background:var(--ref-color-red-10)}ap-icon-button button.icon-button.red:active:not(.stroked){background:var(--ref-color-red-20)}ap-icon-button button.icon-button.red:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-icon-button button.icon-button.red ap-symbol{color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked{border-width:1px;border-style:solid;background:white}ap-icon-button button.icon-button.stroked:not(.loading):not(.locked){border-color:var(--ref-color-grey-20)}ap-icon-button button.icon-button.stroked:hover:not(.locked){border-color:var(--ref-color-grey-40)}ap-icon-button button.icon-button.stroked:active:not(.locked){border-color:var(--ref-color-grey-60)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked){border-color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-electric-blue-60)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):disabled{border-color:var(--ref-color-electric-blue-20)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked){border-color:var(--ref-color-green-100)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-green-60)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):disabled{border-color:var(--ref-color-green-20)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-green-100)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked){border-color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-red-60)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):disabled{border-color:var(--ref-color-red-20)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked.transparent:not(.loading):not(.locked){background:transparent}ap-icon-button button.icon-button.loading{background:var(--ref-color-grey-20);border:none;pointer-events:none}ap-icon-button button.icon-button.locked{background:var(--ref-color-purple-10);color:var(--ref-color-purple-80);border:1px solid var(--ref-color-purple-20)}ap-icon-button button.icon-button.locked:hover{border-color:var(--ref-color-purple-40)}ap-icon-button button.icon-button.locked:active{border-color:var(--ref-color-purple-60)}ap-icon-button button.icon-button.locked ap-symbol{color:var(--ref-color-purple-100)}ap-icon-button button.icon-button.locked .locked-symbol{position:absolute;top:-6px;right:-6px}ap-icon-button button.icon-button.locked .locked-symbol ap-symbol{border-radius:100%;background:var(--ref-color-white)}\n"] }]
62
- }], ctorParameters: function () { return [{ type: i1.SymbolRegistry }]; }, propDecorators: { ariaLabel: [{
63
+ ], encapsulation: ViewEncapsulation.None, template: "<button\n class=\"icon-button\"\n type=\"button\"\n [name]=\"name\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.data-test]=\"hostDataTest ?? name\"\n [disabled]=\"disabled\"\n [class.blue]=\"color === 'blue'\"\n [class.green]=\"color === 'green'\"\n [class.red]=\"color === 'red'\"\n [class.flat]=\"type === 'flat'\"\n [class.stroked]=\"type === 'stroked' || type === 'stroked-transparent'\"\n [class.transparent]=\"type === 'stroked-transparent'\"\n [class.loading]=\"loading\"\n [class.locked]=\"locked\"\n (click)=\"onClick.emit($event)\"\n (focus)=\"onFocus.emit($event)\"\n (blur)=\"onBlur.emit($event)\"\n>\n <ng-content\n *ngIf=\"!loading\">\n </ng-content>\n <ap-loader\n *ngIf=\"loading\"\n color=\"white\"\n [diameter]=\"16\"\n ></ap-loader>\n <div *ngIf=\"locked\"\n class=\"locked-symbol\">\n <ap-symbol\n symbolId=\"premium-star\"\n size=\"micro\"\n >\n </ap-symbol>\n </div>\n</button>\n", styles: ["ap-icon-button{display:flex;width:var(--comp-icon-button-width);max-width:var(--comp-icon-button-width);height:var(--comp-icon-button-height);max-height:var(--comp-icon-button-height)}ap-icon-button button.icon-button{margin:0;padding:0;width:var(--comp-icon-button-width);max-width:var(--comp-icon-button-width);height:var(--comp-icon-button-height);max-height:var(--comp-icon-button-height);border-radius:var(--comp-icon-button-border-radius);background:transparent;border:none;display:grid;place-content:center;position:relative;transition:border .25s}@media (hover: hover){ap-icon-button button.icon-button:focus:not(.disabled):not(:active){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-icon-button button.icon-button:hover{cursor:pointer}ap-icon-button button.icon-button:hover:not(.stroked):not(.locked){background:var(--ref-color-grey-05)}ap-icon-button button.icon-button:active:not(.stroked):not(.locked){background:var(--ref-color-grey-10)}ap-icon-button button.icon-button ap-symbol{display:flex;justify-content:center;width:16px;align-items:center;height:16px;padding:0;margin:0;color:var(--ref-color-grey-60)}ap-icon-button button.icon-button:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-icon-button button.icon-button.blue:hover{cursor:pointer}ap-icon-button button.icon-button.blue:hover:not(.stroked){background:var(--ref-color-electric-blue-05)}ap-icon-button button.icon-button.blue:active:not(.stroked){background:var(--ref-color-electric-blue-10)}ap-icon-button button.icon-button.blue:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-icon-button button.icon-button.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.green:hover{cursor:pointer}ap-icon-button button.icon-button.green:hover:not(.stroked){background:var(--ref-color-green-10)}ap-icon-button button.icon-button.green:active:not(.stroked){background:var(--ref-color-green-20)}ap-icon-button button.icon-button.green:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.green:disabled ap-symbol{color:var(--ref-color-green-20)}ap-icon-button button.icon-button.green ap-symbol{color:var(--ref-color-green-100)}ap-icon-button button.icon-button.red:hover{cursor:pointer}ap-icon-button button.icon-button.red:hover:not(.stroked){background:var(--ref-color-red-10)}ap-icon-button button.icon-button.red:active:not(.stroked){background:var(--ref-color-red-20)}ap-icon-button button.icon-button.red:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-icon-button button.icon-button.red ap-symbol{color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked{border-width:1px;border-style:solid;background:white}ap-icon-button button.icon-button.stroked:not(.loading):not(.locked){border-color:var(--ref-color-grey-20)}ap-icon-button button.icon-button.stroked:hover:not(.locked){border-color:var(--ref-color-grey-40)}ap-icon-button button.icon-button.stroked:active:not(.locked){border-color:var(--ref-color-grey-60)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked){border-color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-electric-blue-60)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):disabled{border-color:var(--ref-color-electric-blue-20)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked){border-color:var(--ref-color-green-100)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-green-60)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):disabled{border-color:var(--ref-color-green-20)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-green-100)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked){border-color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-red-60)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):disabled{border-color:var(--ref-color-red-20)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked.transparent:not(.loading):not(.locked){background:transparent}ap-icon-button button.icon-button.loading{background:var(--ref-color-grey-20);border:none;pointer-events:none}ap-icon-button button.icon-button.locked{background:var(--ref-color-purple-10);color:var(--ref-color-purple-80);border:1px solid var(--ref-color-purple-20)}ap-icon-button button.icon-button.locked:hover{border-color:var(--ref-color-purple-40)}ap-icon-button button.icon-button.locked:active{border-color:var(--ref-color-purple-60)}ap-icon-button button.icon-button.locked ap-symbol{color:var(--ref-color-purple-100)}ap-icon-button button.icon-button.locked .locked-symbol{position:absolute;top:-6px;right:-6px}ap-icon-button button.icon-button.locked .locked-symbol ap-symbol{border-radius:100%;background:var(--ref-color-white)}\n"] }]
64
+ }], ctorParameters: function () { return [{ type: i1.SymbolRegistry }, { type: i0.ElementRef }]; }, propDecorators: { ariaLabel: [{
63
65
  type: Input
64
66
  }], name: [{
65
67
  type: Input
package/fesm2015/agorapulse-ui-components-icon-button.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"agorapulse-ui-components-icon-button.mjs","sources":["../../../libs/ui-components/icon-button/src/icon-button.component.ts","../../../libs/ui-components/icon-button/src/icon-button.component.html","../../../libs/ui-components/icon-button/src/agorapulse-ui-components-icon-button.ts"],"sourcesContent":["import {\n AfterContentInit,\n ChangeDetectionStrategy,\n Component, ContentChild,\n EventEmitter,\n Input,\n Output,\n ViewEncapsulation\n} from \"@angular/core\";\nimport {CommonModule, NgIf} from \"@angular/common\";\nimport {apPremiumStar, SymbolComponent, SymbolRegistry} from \"@agorapulse/ui-symbol\";\nimport {AgorapulseUiAnimationsModule} from \"@agorapulse/ui-animations\";\n\nexport type ButtonType = 'flat' | 'stroked-transparent' | 'stroked';\nexport type ButtonColor = 'none' | 'blue' | 'red' | 'green';\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-icon-button',\n styleUrls: ['./icon-button.component.scss'],\n standalone: true,\n imports: [\n NgIf,\n SymbolComponent,\n CommonModule,\n AgorapulseUiAnimationsModule\n ],\n templateUrl: './icon-button.component.html',\n encapsulation: ViewEncapsulation.None\n})\nexport class IconButtonComponent implements AfterContentInit {\n\n @Input() ariaLabel: string;\n @Input() name: string;\n @Input() color: ButtonColor = 'none';\n @Input() disabled: boolean = false;\n @Input() set locked (locked: boolean) {\n this._locked = locked;\n if (locked) {\n this.color = 'none';\n this.disabled = false;\n this.loading = false;\n }\n }\n\n get locked(): boolean {\n return this._locked;\n }\n @Input() set loading (loading: boolean) {\n if (!this.locked) {\n this._loading = loading;\n }\n }\n\n get loading(): boolean {\n return this._loading;\n }\n @Input() type: ButtonType = 'flat';\n\n // eslint-disable-next-line\n @Output() onClick: EventEmitter<MouseEvent> = new EventEmitter();\n\n // eslint-disable-next-line\n @Output() onFocus: EventEmitter<FocusEvent> = new EventEmitter();\n\n // eslint-disable-next-line\n @Output() onBlur: EventEmitter<FocusEvent> = new EventEmitter();\n\n @ContentChild(SymbolComponent) symbolComponent: SymbolComponent;\n\n private _loading: boolean = false;\n private _locked: boolean = false;\n\n constructor(private symbolRegistry: SymbolRegistry) {\n this.symbolRegistry.registerSymbols([\n apPremiumStar\n ]);\n }\n\n ngAfterContentInit(): void {\n if (this.symbolComponent) {\n this.symbolComponent.size = 'micro';\n }\n }\n}\n","<button\n class=\"icon-button\"\n type=\"button\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.data-test]=\"name\"\n [disabled]=\"disabled\"\n [class.blue]=\"color === 'blue'\"\n [class.green]=\"color === 'green'\"\n [class.red]=\"color === 'red'\"\n [class.flat]=\"type === 'flat'\"\n [class.stroked]=\"type === 'stroked' || type === 'stroked-transparent'\"\n [class.transparent]=\"type === 'stroked-transparent'\"\n [class.loading]=\"loading\"\n [class.locked]=\"locked\"\n (click)=\"onClick.emit($event)\"\n (focus)=\"onFocus.emit($event)\"\n (blur)=\"onBlur.emit($event)\"\n>\n <ng-content\n *ngIf=\"!loading\">\n </ng-content>\n <ap-loader\n *ngIf=\"loading\"\n color=\"white\"\n [diameter]=\"16\"\n ></ap-loader>\n <div *ngIf=\"locked\"\n class=\"locked-symbol\">\n <ap-symbol\n symbolId=\"premium-star\"\n size=\"micro\"\n >\n </ap-symbol>\n </div>\n</button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"agorapulse-ui-components-icon-button.mjs","sources":["../../../libs/ui-components/icon-button/src/icon-button.component.ts","../../../libs/ui-components/icon-button/src/icon-button.component.html","../../../libs/ui-components/icon-button/src/agorapulse-ui-components-icon-button.ts"],"sourcesContent":["import {\n AfterContentInit,\n ChangeDetectionStrategy,\n Component, ContentChild, ElementRef,\n EventEmitter, HostBinding,\n Input,\n Output,\n ViewEncapsulation\n} from \"@angular/core\";\nimport {CommonModule, NgIf} from \"@angular/common\";\nimport {apPremiumStar, SymbolComponent, SymbolRegistry} from \"@agorapulse/ui-symbol\";\nimport {AgorapulseUiAnimationsModule} from \"@agorapulse/ui-animations\";\n\nexport type ButtonType = 'flat' | 'stroked-transparent' | 'stroked';\nexport type ButtonColor = 'none' | 'blue' | 'red' | 'green';\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-icon-button',\n styleUrls: ['./icon-button.component.scss'],\n standalone: true,\n imports: [\n NgIf,\n SymbolComponent,\n CommonModule,\n AgorapulseUiAnimationsModule\n ],\n templateUrl: './icon-button.component.html',\n encapsulation: ViewEncapsulation.None\n})\nexport class IconButtonComponent implements AfterContentInit {\n\n @Input() ariaLabel: string;\n @Input() name: string;\n @Input() color: ButtonColor = 'none';\n @Input() disabled: boolean = false;\n @Input() set locked (locked: boolean) {\n this._locked = locked;\n if (locked) {\n this.color = 'none';\n this.disabled = false;\n this.loading = false;\n }\n }\n\n get locked(): boolean {\n return this._locked;\n }\n @Input() set loading (loading: boolean) {\n if (!this.locked) {\n this._loading = loading;\n }\n }\n\n get loading(): boolean {\n return this._loading;\n }\n @Input() type: ButtonType = 'flat';\n\n // eslint-disable-next-line\n @Output() onClick: EventEmitter<MouseEvent> = new EventEmitter();\n\n // eslint-disable-next-line\n @Output() onFocus: EventEmitter<FocusEvent> = new EventEmitter();\n\n // eslint-disable-next-line\n @Output() onBlur: EventEmitter<FocusEvent> = new EventEmitter();\n\n @ContentChild(SymbolComponent) symbolComponent: SymbolComponent;\n\n private _loading: boolean = false;\n private _locked: boolean = false;\n hostDataTest: string;\n\n constructor(private symbolRegistry: SymbolRegistry,\n private elementRef: ElementRef) {\n this.symbolRegistry.registerSymbols([\n apPremiumStar\n ]);\n this.hostDataTest = this.elementRef.nativeElement.getAttribute('data-test');\n }\n\n ngAfterContentInit(): void {\n if (this.symbolComponent) {\n this.symbolComponent.size = 'micro';\n }\n }\n}\n","<button\n class=\"icon-button\"\n type=\"button\"\n [name]=\"name\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.data-test]=\"hostDataTest ?? name\"\n [disabled]=\"disabled\"\n [class.blue]=\"color === 'blue'\"\n [class.green]=\"color === 'green'\"\n [class.red]=\"color === 'red'\"\n [class.flat]=\"type === 'flat'\"\n [class.stroked]=\"type === 'stroked' || type === 'stroked-transparent'\"\n [class.transparent]=\"type === 'stroked-transparent'\"\n [class.loading]=\"loading\"\n [class.locked]=\"locked\"\n (click)=\"onClick.emit($event)\"\n (focus)=\"onFocus.emit($event)\"\n (blur)=\"onBlur.emit($event)\"\n>\n <ng-content\n *ngIf=\"!loading\">\n </ng-content>\n <ap-loader\n *ngIf=\"loading\"\n color=\"white\"\n [diameter]=\"16\"\n ></ap-loader>\n <div *ngIf=\"locked\"\n class=\"locked-symbol\">\n <ap-symbol\n symbolId=\"premium-star\"\n size=\"micro\"\n >\n </ap-symbol>\n </div>\n</button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
package/fesm2020/agorapulse-ui-components-icon-button.mjs CHANGED
@@ -26,8 +26,9 @@ class IconButtonComponent {
26
26
  get loading() {
27
27
  return this._loading;
28
28
  }
29
- constructor(symbolRegistry) {
29
+ constructor(symbolRegistry, elementRef) {
30
30
  this.symbolRegistry = symbolRegistry;
31
+ this.elementRef = elementRef;
31
32
  this.color = 'none';
32
33
  this.disabled = false;
33
34
  this.type = 'flat';
@@ -42,6 +43,7 @@ class IconButtonComponent {
42
43
  this.symbolRegistry.registerSymbols([
43
44
  apPremiumStar
44
45
  ]);
46
+ this.hostDataTest = this.elementRef.nativeElement.getAttribute('data-test');
45
47
  }
46
48
  ngAfterContentInit() {
47
49
  if (this.symbolComponent) {
@@ -49,8 +51,8 @@ class IconButtonComponent {
49
51
  }
50
52
  }
51
53
  }
52
- IconButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: IconButtonComponent, deps: [{ token: i1.SymbolRegistry }], target: i0.ɵɵFactoryTarget.Component });
53
- IconButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: IconButtonComponent, isStandalone: true, selector: "ap-icon-button", inputs: { ariaLabel: "ariaLabel", name: "name", color: "color", disabled: "disabled", locked: "locked", loading: "loading", type: "type" }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur" }, queries: [{ propertyName: "symbolComponent", first: true, predicate: SymbolComponent, descendants: true }], ngImport: i0, template: "<button\n class=\"icon-button\"\n type=\"button\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.data-test]=\"name\"\n [disabled]=\"disabled\"\n [class.blue]=\"color === 'blue'\"\n [class.green]=\"color === 'green'\"\n [class.red]=\"color === 'red'\"\n [class.flat]=\"type === 'flat'\"\n [class.stroked]=\"type === 'stroked' || type === 'stroked-transparent'\"\n [class.transparent]=\"type === 'stroked-transparent'\"\n [class.loading]=\"loading\"\n [class.locked]=\"locked\"\n (click)=\"onClick.emit($event)\"\n (focus)=\"onFocus.emit($event)\"\n (blur)=\"onBlur.emit($event)\"\n>\n <ng-content\n *ngIf=\"!loading\">\n </ng-content>\n <ap-loader\n *ngIf=\"loading\"\n color=\"white\"\n [diameter]=\"16\"\n ></ap-loader>\n <div *ngIf=\"locked\"\n class=\"locked-symbol\">\n <ap-symbol\n symbolId=\"premium-star\"\n size=\"micro\"\n >\n </ap-symbol>\n </div>\n</button>\n", styles: ["ap-icon-button{display:flex;width:var(--comp-icon-button-width);max-width:var(--comp-icon-button-width);height:var(--comp-icon-button-height);max-height:var(--comp-icon-button-height)}ap-icon-button button.icon-button{margin:0;padding:0;width:var(--comp-icon-button-width);max-width:var(--comp-icon-button-width);height:var(--comp-icon-button-height);max-height:var(--comp-icon-button-height);border-radius:var(--comp-icon-button-border-radius);background:transparent;border:none;display:grid;place-content:center;position:relative;transition:border .25s}@media (hover: hover){ap-icon-button button.icon-button:focus:not(.disabled):not(:active){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-icon-button button.icon-button:hover{cursor:pointer}ap-icon-button button.icon-button:hover:not(.stroked):not(.locked){background:var(--ref-color-grey-05)}ap-icon-button button.icon-button:active:not(.stroked):not(.locked){background:var(--ref-color-grey-10)}ap-icon-button button.icon-button ap-symbol{display:flex;justify-content:center;width:16px;align-items:center;height:16px;padding:0;margin:0;color:var(--ref-color-grey-60)}ap-icon-button button.icon-button:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-icon-button button.icon-button.blue:hover{cursor:pointer}ap-icon-button button.icon-button.blue:hover:not(.stroked){background:var(--ref-color-electric-blue-05)}ap-icon-button button.icon-button.blue:active:not(.stroked){background:var(--ref-color-electric-blue-10)}ap-icon-button button.icon-button.blue:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-icon-button button.icon-button.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.green:hover{cursor:pointer}ap-icon-button button.icon-button.green:hover:not(.stroked){background:var(--ref-color-green-10)}ap-icon-button button.icon-button.green:active:not(.stroked){background:var(--ref-color-green-20)}ap-icon-button button.icon-button.green:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.green:disabled ap-symbol{color:var(--ref-color-green-20)}ap-icon-button button.icon-button.green ap-symbol{color:var(--ref-color-green-100)}ap-icon-button button.icon-button.red:hover{cursor:pointer}ap-icon-button button.icon-button.red:hover:not(.stroked){background:var(--ref-color-red-10)}ap-icon-button button.icon-button.red:active:not(.stroked){background:var(--ref-color-red-20)}ap-icon-button button.icon-button.red:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-icon-button button.icon-button.red ap-symbol{color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked{border-width:1px;border-style:solid;background:white}ap-icon-button button.icon-button.stroked:not(.loading):not(.locked){border-color:var(--ref-color-grey-20)}ap-icon-button button.icon-button.stroked:hover:not(.locked){border-color:var(--ref-color-grey-40)}ap-icon-button button.icon-button.stroked:active:not(.locked){border-color:var(--ref-color-grey-60)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked){border-color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-electric-blue-60)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):disabled{border-color:var(--ref-color-electric-blue-20)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked){border-color:var(--ref-color-green-100)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-green-60)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):disabled{border-color:var(--ref-color-green-20)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-green-100)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked){border-color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-red-60)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):disabled{border-color:var(--ref-color-red-20)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked.transparent:not(.loading):not(.locked){background:transparent}ap-icon-button button.icon-button.loading{background:var(--ref-color-grey-20);border:none;pointer-events:none}ap-icon-button button.icon-button.locked{background:var(--ref-color-purple-10);color:var(--ref-color-purple-80);border:1px solid var(--ref-color-purple-20)}ap-icon-button button.icon-button.locked:hover{border-color:var(--ref-color-purple-40)}ap-icon-button button.icon-button.locked:active{border-color:var(--ref-color-purple-60)}ap-icon-button button.icon-button.locked ap-symbol{color:var(--ref-color-purple-100)}ap-icon-button button.icon-button.locked .locked-symbol{position:absolute;top:-6px;right:-6px}ap-icon-button button.icon-button.locked .locked-symbol ap-symbol{border-radius:100%;background:var(--ref-color-white)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol[symbolId]", inputs: ["color", "symbolId", "size", "state"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AgorapulseUiAnimationsModule }, { kind: "component", type: i2.LoaderComponent, selector: "ap-loader", inputs: ["color", "diameter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
54
+ IconButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: IconButtonComponent, deps: [{ token: i1.SymbolRegistry }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
55
+ IconButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: IconButtonComponent, isStandalone: true, selector: "ap-icon-button", inputs: { ariaLabel: "ariaLabel", name: "name", color: "color", disabled: "disabled", locked: "locked", loading: "loading", type: "type" }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur" }, queries: [{ propertyName: "symbolComponent", first: true, predicate: SymbolComponent, descendants: true }], ngImport: i0, template: "<button\n class=\"icon-button\"\n type=\"button\"\n [name]=\"name\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.data-test]=\"hostDataTest ?? name\"\n [disabled]=\"disabled\"\n [class.blue]=\"color === 'blue'\"\n [class.green]=\"color === 'green'\"\n [class.red]=\"color === 'red'\"\n [class.flat]=\"type === 'flat'\"\n [class.stroked]=\"type === 'stroked' || type === 'stroked-transparent'\"\n [class.transparent]=\"type === 'stroked-transparent'\"\n [class.loading]=\"loading\"\n [class.locked]=\"locked\"\n (click)=\"onClick.emit($event)\"\n (focus)=\"onFocus.emit($event)\"\n (blur)=\"onBlur.emit($event)\"\n>\n <ng-content\n *ngIf=\"!loading\">\n </ng-content>\n <ap-loader\n *ngIf=\"loading\"\n color=\"white\"\n [diameter]=\"16\"\n ></ap-loader>\n <div *ngIf=\"locked\"\n class=\"locked-symbol\">\n <ap-symbol\n symbolId=\"premium-star\"\n size=\"micro\"\n >\n </ap-symbol>\n </div>\n</button>\n", styles: ["ap-icon-button{display:flex;width:var(--comp-icon-button-width);max-width:var(--comp-icon-button-width);height:var(--comp-icon-button-height);max-height:var(--comp-icon-button-height)}ap-icon-button button.icon-button{margin:0;padding:0;width:var(--comp-icon-button-width);max-width:var(--comp-icon-button-width);height:var(--comp-icon-button-height);max-height:var(--comp-icon-button-height);border-radius:var(--comp-icon-button-border-radius);background:transparent;border:none;display:grid;place-content:center;position:relative;transition:border .25s}@media (hover: hover){ap-icon-button button.icon-button:focus:not(.disabled):not(:active){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-icon-button button.icon-button:hover{cursor:pointer}ap-icon-button button.icon-button:hover:not(.stroked):not(.locked){background:var(--ref-color-grey-05)}ap-icon-button button.icon-button:active:not(.stroked):not(.locked){background:var(--ref-color-grey-10)}ap-icon-button button.icon-button ap-symbol{display:flex;justify-content:center;width:16px;align-items:center;height:16px;padding:0;margin:0;color:var(--ref-color-grey-60)}ap-icon-button button.icon-button:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-icon-button button.icon-button.blue:hover{cursor:pointer}ap-icon-button button.icon-button.blue:hover:not(.stroked){background:var(--ref-color-electric-blue-05)}ap-icon-button button.icon-button.blue:active:not(.stroked){background:var(--ref-color-electric-blue-10)}ap-icon-button button.icon-button.blue:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-icon-button button.icon-button.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.green:hover{cursor:pointer}ap-icon-button button.icon-button.green:hover:not(.stroked){background:var(--ref-color-green-10)}ap-icon-button button.icon-button.green:active:not(.stroked){background:var(--ref-color-green-20)}ap-icon-button button.icon-button.green:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.green:disabled ap-symbol{color:var(--ref-color-green-20)}ap-icon-button button.icon-button.green ap-symbol{color:var(--ref-color-green-100)}ap-icon-button button.icon-button.red:hover{cursor:pointer}ap-icon-button button.icon-button.red:hover:not(.stroked){background:var(--ref-color-red-10)}ap-icon-button button.icon-button.red:active:not(.stroked){background:var(--ref-color-red-20)}ap-icon-button button.icon-button.red:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-icon-button button.icon-button.red ap-symbol{color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked{border-width:1px;border-style:solid;background:white}ap-icon-button button.icon-button.stroked:not(.loading):not(.locked){border-color:var(--ref-color-grey-20)}ap-icon-button button.icon-button.stroked:hover:not(.locked){border-color:var(--ref-color-grey-40)}ap-icon-button button.icon-button.stroked:active:not(.locked){border-color:var(--ref-color-grey-60)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked){border-color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-electric-blue-60)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):disabled{border-color:var(--ref-color-electric-blue-20)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked){border-color:var(--ref-color-green-100)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-green-60)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):disabled{border-color:var(--ref-color-green-20)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-green-100)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked){border-color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-red-60)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):disabled{border-color:var(--ref-color-red-20)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked.transparent:not(.loading):not(.locked){background:transparent}ap-icon-button button.icon-button.loading{background:var(--ref-color-grey-20);border:none;pointer-events:none}ap-icon-button button.icon-button.locked{background:var(--ref-color-purple-10);color:var(--ref-color-purple-80);border:1px solid var(--ref-color-purple-20)}ap-icon-button button.icon-button.locked:hover{border-color:var(--ref-color-purple-40)}ap-icon-button button.icon-button.locked:active{border-color:var(--ref-color-purple-60)}ap-icon-button button.icon-button.locked ap-symbol{color:var(--ref-color-purple-100)}ap-icon-button button.icon-button.locked .locked-symbol{position:absolute;top:-6px;right:-6px}ap-icon-button button.icon-button.locked .locked-symbol ap-symbol{border-radius:100%;background:var(--ref-color-white)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol[symbolId]", inputs: ["color", "symbolId", "size", "state"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AgorapulseUiAnimationsModule }, { kind: "component", type: i2.LoaderComponent, selector: "ap-loader", inputs: ["color", "diameter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
54
56
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: IconButtonComponent, decorators: [{
55
57
  type: Component,
56
58
  args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-icon-button', standalone: true, imports: [
@@ -58,8 +60,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImpor
58
60
  SymbolComponent,
59
61
  CommonModule,
60
62
  AgorapulseUiAnimationsModule
61
- ], encapsulation: ViewEncapsulation.None, template: "<button\n class=\"icon-button\"\n type=\"button\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.data-test]=\"name\"\n [disabled]=\"disabled\"\n [class.blue]=\"color === 'blue'\"\n [class.green]=\"color === 'green'\"\n [class.red]=\"color === 'red'\"\n [class.flat]=\"type === 'flat'\"\n [class.stroked]=\"type === 'stroked' || type === 'stroked-transparent'\"\n [class.transparent]=\"type === 'stroked-transparent'\"\n [class.loading]=\"loading\"\n [class.locked]=\"locked\"\n (click)=\"onClick.emit($event)\"\n (focus)=\"onFocus.emit($event)\"\n (blur)=\"onBlur.emit($event)\"\n>\n <ng-content\n *ngIf=\"!loading\">\n </ng-content>\n <ap-loader\n *ngIf=\"loading\"\n color=\"white\"\n [diameter]=\"16\"\n ></ap-loader>\n <div *ngIf=\"locked\"\n class=\"locked-symbol\">\n <ap-symbol\n symbolId=\"premium-star\"\n size=\"micro\"\n >\n </ap-symbol>\n </div>\n</button>\n", styles: ["ap-icon-button{display:flex;width:var(--comp-icon-button-width);max-width:var(--comp-icon-button-width);height:var(--comp-icon-button-height);max-height:var(--comp-icon-button-height)}ap-icon-button button.icon-button{margin:0;padding:0;width:var(--comp-icon-button-width);max-width:var(--comp-icon-button-width);height:var(--comp-icon-button-height);max-height:var(--comp-icon-button-height);border-radius:var(--comp-icon-button-border-radius);background:transparent;border:none;display:grid;place-content:center;position:relative;transition:border .25s}@media (hover: hover){ap-icon-button button.icon-button:focus:not(.disabled):not(:active){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-icon-button button.icon-button:hover{cursor:pointer}ap-icon-button button.icon-button:hover:not(.stroked):not(.locked){background:var(--ref-color-grey-05)}ap-icon-button button.icon-button:active:not(.stroked):not(.locked){background:var(--ref-color-grey-10)}ap-icon-button button.icon-button ap-symbol{display:flex;justify-content:center;width:16px;align-items:center;height:16px;padding:0;margin:0;color:var(--ref-color-grey-60)}ap-icon-button button.icon-button:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-icon-button button.icon-button.blue:hover{cursor:pointer}ap-icon-button button.icon-button.blue:hover:not(.stroked){background:var(--ref-color-electric-blue-05)}ap-icon-button button.icon-button.blue:active:not(.stroked){background:var(--ref-color-electric-blue-10)}ap-icon-button button.icon-button.blue:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-icon-button button.icon-button.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.green:hover{cursor:pointer}ap-icon-button button.icon-button.green:hover:not(.stroked){background:var(--ref-color-green-10)}ap-icon-button button.icon-button.green:active:not(.stroked){background:var(--ref-color-green-20)}ap-icon-button button.icon-button.green:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.green:disabled ap-symbol{color:var(--ref-color-green-20)}ap-icon-button button.icon-button.green ap-symbol{color:var(--ref-color-green-100)}ap-icon-button button.icon-button.red:hover{cursor:pointer}ap-icon-button button.icon-button.red:hover:not(.stroked){background:var(--ref-color-red-10)}ap-icon-button button.icon-button.red:active:not(.stroked){background:var(--ref-color-red-20)}ap-icon-button button.icon-button.red:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-icon-button button.icon-button.red ap-symbol{color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked{border-width:1px;border-style:solid;background:white}ap-icon-button button.icon-button.stroked:not(.loading):not(.locked){border-color:var(--ref-color-grey-20)}ap-icon-button button.icon-button.stroked:hover:not(.locked){border-color:var(--ref-color-grey-40)}ap-icon-button button.icon-button.stroked:active:not(.locked){border-color:var(--ref-color-grey-60)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked){border-color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-electric-blue-60)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):disabled{border-color:var(--ref-color-electric-blue-20)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked){border-color:var(--ref-color-green-100)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-green-60)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):disabled{border-color:var(--ref-color-green-20)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-green-100)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked){border-color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-red-60)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):disabled{border-color:var(--ref-color-red-20)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked.transparent:not(.loading):not(.locked){background:transparent}ap-icon-button button.icon-button.loading{background:var(--ref-color-grey-20);border:none;pointer-events:none}ap-icon-button button.icon-button.locked{background:var(--ref-color-purple-10);color:var(--ref-color-purple-80);border:1px solid var(--ref-color-purple-20)}ap-icon-button button.icon-button.locked:hover{border-color:var(--ref-color-purple-40)}ap-icon-button button.icon-button.locked:active{border-color:var(--ref-color-purple-60)}ap-icon-button button.icon-button.locked ap-symbol{color:var(--ref-color-purple-100)}ap-icon-button button.icon-button.locked .locked-symbol{position:absolute;top:-6px;right:-6px}ap-icon-button button.icon-button.locked .locked-symbol ap-symbol{border-radius:100%;background:var(--ref-color-white)}\n"] }]
62
- }], ctorParameters: function () { return [{ type: i1.SymbolRegistry }]; }, propDecorators: { ariaLabel: [{
63
+ ], encapsulation: ViewEncapsulation.None, template: "<button\n class=\"icon-button\"\n type=\"button\"\n [name]=\"name\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.data-test]=\"hostDataTest ?? name\"\n [disabled]=\"disabled\"\n [class.blue]=\"color === 'blue'\"\n [class.green]=\"color === 'green'\"\n [class.red]=\"color === 'red'\"\n [class.flat]=\"type === 'flat'\"\n [class.stroked]=\"type === 'stroked' || type === 'stroked-transparent'\"\n [class.transparent]=\"type === 'stroked-transparent'\"\n [class.loading]=\"loading\"\n [class.locked]=\"locked\"\n (click)=\"onClick.emit($event)\"\n (focus)=\"onFocus.emit($event)\"\n (blur)=\"onBlur.emit($event)\"\n>\n <ng-content\n *ngIf=\"!loading\">\n </ng-content>\n <ap-loader\n *ngIf=\"loading\"\n color=\"white\"\n [diameter]=\"16\"\n ></ap-loader>\n <div *ngIf=\"locked\"\n class=\"locked-symbol\">\n <ap-symbol\n symbolId=\"premium-star\"\n size=\"micro\"\n >\n </ap-symbol>\n </div>\n</button>\n", styles: ["ap-icon-button{display:flex;width:var(--comp-icon-button-width);max-width:var(--comp-icon-button-width);height:var(--comp-icon-button-height);max-height:var(--comp-icon-button-height)}ap-icon-button button.icon-button{margin:0;padding:0;width:var(--comp-icon-button-width);max-width:var(--comp-icon-button-width);height:var(--comp-icon-button-height);max-height:var(--comp-icon-button-height);border-radius:var(--comp-icon-button-border-radius);background:transparent;border:none;display:grid;place-content:center;position:relative;transition:border .25s}@media (hover: hover){ap-icon-button button.icon-button:focus:not(.disabled):not(:active){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-icon-button button.icon-button:hover{cursor:pointer}ap-icon-button button.icon-button:hover:not(.stroked):not(.locked){background:var(--ref-color-grey-05)}ap-icon-button button.icon-button:active:not(.stroked):not(.locked){background:var(--ref-color-grey-10)}ap-icon-button button.icon-button ap-symbol{display:flex;justify-content:center;width:16px;align-items:center;height:16px;padding:0;margin:0;color:var(--ref-color-grey-60)}ap-icon-button button.icon-button:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-icon-button button.icon-button.blue:hover{cursor:pointer}ap-icon-button button.icon-button.blue:hover:not(.stroked){background:var(--ref-color-electric-blue-05)}ap-icon-button button.icon-button.blue:active:not(.stroked){background:var(--ref-color-electric-blue-10)}ap-icon-button button.icon-button.blue:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-icon-button button.icon-button.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.green:hover{cursor:pointer}ap-icon-button button.icon-button.green:hover:not(.stroked){background:var(--ref-color-green-10)}ap-icon-button button.icon-button.green:active:not(.stroked){background:var(--ref-color-green-20)}ap-icon-button button.icon-button.green:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.green:disabled ap-symbol{color:var(--ref-color-green-20)}ap-icon-button button.icon-button.green ap-symbol{color:var(--ref-color-green-100)}ap-icon-button button.icon-button.red:hover{cursor:pointer}ap-icon-button button.icon-button.red:hover:not(.stroked){background:var(--ref-color-red-10)}ap-icon-button button.icon-button.red:active:not(.stroked){background:var(--ref-color-red-20)}ap-icon-button button.icon-button.red:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-icon-button button.icon-button.red ap-symbol{color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked{border-width:1px;border-style:solid;background:white}ap-icon-button button.icon-button.stroked:not(.loading):not(.locked){border-color:var(--ref-color-grey-20)}ap-icon-button button.icon-button.stroked:hover:not(.locked){border-color:var(--ref-color-grey-40)}ap-icon-button button.icon-button.stroked:active:not(.locked){border-color:var(--ref-color-grey-60)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked){border-color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-electric-blue-60)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):disabled{border-color:var(--ref-color-electric-blue-20)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked){border-color:var(--ref-color-green-100)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-green-60)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):disabled{border-color:var(--ref-color-green-20)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-green-100)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked){border-color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-red-60)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):disabled{border-color:var(--ref-color-red-20)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked.transparent:not(.loading):not(.locked){background:transparent}ap-icon-button button.icon-button.loading{background:var(--ref-color-grey-20);border:none;pointer-events:none}ap-icon-button button.icon-button.locked{background:var(--ref-color-purple-10);color:var(--ref-color-purple-80);border:1px solid var(--ref-color-purple-20)}ap-icon-button button.icon-button.locked:hover{border-color:var(--ref-color-purple-40)}ap-icon-button button.icon-button.locked:active{border-color:var(--ref-color-purple-60)}ap-icon-button button.icon-button.locked ap-symbol{color:var(--ref-color-purple-100)}ap-icon-button button.icon-button.locked .locked-symbol{position:absolute;top:-6px;right:-6px}ap-icon-button button.icon-button.locked .locked-symbol ap-symbol{border-radius:100%;background:var(--ref-color-white)}\n"] }]
64
+ }], ctorParameters: function () { return [{ type: i1.SymbolRegistry }, { type: i0.ElementRef }]; }, propDecorators: { ariaLabel: [{
63
65
  type: Input
64
66
  }], name: [{
65
67
  type: Input
package/fesm2020/agorapulse-ui-components-icon-button.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"agorapulse-ui-components-icon-button.mjs","sources":["../../../libs/ui-components/icon-button/src/icon-button.component.ts","../../../libs/ui-components/icon-button/src/icon-button.component.html","../../../libs/ui-components/icon-button/src/agorapulse-ui-components-icon-button.ts"],"sourcesContent":["import {\n AfterContentInit,\n ChangeDetectionStrategy,\n Component, ContentChild,\n EventEmitter,\n Input,\n Output,\n ViewEncapsulation\n} from \"@angular/core\";\nimport {CommonModule, NgIf} from \"@angular/common\";\nimport {apPremiumStar, SymbolComponent, SymbolRegistry} from \"@agorapulse/ui-symbol\";\nimport {AgorapulseUiAnimationsModule} from \"@agorapulse/ui-animations\";\n\nexport type ButtonType = 'flat' | 'stroked-transparent' | 'stroked';\nexport type ButtonColor = 'none' | 'blue' | 'red' | 'green';\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-icon-button',\n styleUrls: ['./icon-button.component.scss'],\n standalone: true,\n imports: [\n NgIf,\n SymbolComponent,\n CommonModule,\n AgorapulseUiAnimationsModule\n ],\n templateUrl: './icon-button.component.html',\n encapsulation: ViewEncapsulation.None\n})\nexport class IconButtonComponent implements AfterContentInit {\n\n @Input() ariaLabel: string;\n @Input() name: string;\n @Input() color: ButtonColor = 'none';\n @Input() disabled: boolean = false;\n @Input() set locked (locked: boolean) {\n this._locked = locked;\n if (locked) {\n this.color = 'none';\n this.disabled = false;\n this.loading = false;\n }\n }\n\n get locked(): boolean {\n return this._locked;\n }\n @Input() set loading (loading: boolean) {\n if (!this.locked) {\n this._loading = loading;\n }\n }\n\n get loading(): boolean {\n return this._loading;\n }\n @Input() type: ButtonType = 'flat';\n\n // eslint-disable-next-line\n @Output() onClick: EventEmitter<MouseEvent> = new EventEmitter();\n\n // eslint-disable-next-line\n @Output() onFocus: EventEmitter<FocusEvent> = new EventEmitter();\n\n // eslint-disable-next-line\n @Output() onBlur: EventEmitter<FocusEvent> = new EventEmitter();\n\n @ContentChild(SymbolComponent) symbolComponent: SymbolComponent;\n\n private _loading: boolean = false;\n private _locked: boolean = false;\n\n constructor(private symbolRegistry: SymbolRegistry) {\n this.symbolRegistry.registerSymbols([\n apPremiumStar\n ]);\n }\n\n ngAfterContentInit(): void {\n if (this.symbolComponent) {\n this.symbolComponent.size = 'micro';\n }\n }\n}\n","<button\n class=\"icon-button\"\n type=\"button\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.data-test]=\"name\"\n [disabled]=\"disabled\"\n [class.blue]=\"color === 'blue'\"\n [class.green]=\"color === 'green'\"\n [class.red]=\"color === 'red'\"\n [class.flat]=\"type === 'flat'\"\n [class.stroked]=\"type === 'stroked' || type === 'stroked-transparent'\"\n [class.transparent]=\"type === 'stroked-transparent'\"\n [class.loading]=\"loading\"\n [class.locked]=\"locked\"\n (click)=\"onClick.emit($event)\"\n (focus)=\"onFocus.emit($event)\"\n (blur)=\"onBlur.emit($event)\"\n>\n <ng-content\n *ngIf=\"!loading\">\n </ng-content>\n <ap-loader\n *ngIf=\"loading\"\n color=\"white\"\n [diameter]=\"16\"\n ></ap-loader>\n <div *ngIf=\"locked\"\n class=\"locked-symbol\">\n <ap-symbol\n symbolId=\"premium-star\"\n size=\"micro\"\n >\n </ap-symbol>\n </div>\n</button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"agorapulse-ui-components-icon-button.mjs","sources":["../../../libs/ui-components/icon-button/src/icon-button.component.ts","../../../libs/ui-components/icon-button/src/icon-button.component.html","../../../libs/ui-components/icon-button/src/agorapulse-ui-components-icon-button.ts"],"sourcesContent":["import {\n AfterContentInit,\n ChangeDetectionStrategy,\n Component, ContentChild, ElementRef,\n EventEmitter, HostBinding,\n Input,\n Output,\n ViewEncapsulation\n} from \"@angular/core\";\nimport {CommonModule, NgIf} from \"@angular/common\";\nimport {apPremiumStar, SymbolComponent, SymbolRegistry} from \"@agorapulse/ui-symbol\";\nimport {AgorapulseUiAnimationsModule} from \"@agorapulse/ui-animations\";\n\nexport type ButtonType = 'flat' | 'stroked-transparent' | 'stroked';\nexport type ButtonColor = 'none' | 'blue' | 'red' | 'green';\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-icon-button',\n styleUrls: ['./icon-button.component.scss'],\n standalone: true,\n imports: [\n NgIf,\n SymbolComponent,\n CommonModule,\n AgorapulseUiAnimationsModule\n ],\n templateUrl: './icon-button.component.html',\n encapsulation: ViewEncapsulation.None\n})\nexport class IconButtonComponent implements AfterContentInit {\n\n @Input() ariaLabel: string;\n @Input() name: string;\n @Input() color: ButtonColor = 'none';\n @Input() disabled: boolean = false;\n @Input() set locked (locked: boolean) {\n this._locked = locked;\n if (locked) {\n this.color = 'none';\n this.disabled = false;\n this.loading = false;\n }\n }\n\n get locked(): boolean {\n return this._locked;\n }\n @Input() set loading (loading: boolean) {\n if (!this.locked) {\n this._loading = loading;\n }\n }\n\n get loading(): boolean {\n return this._loading;\n }\n @Input() type: ButtonType = 'flat';\n\n // eslint-disable-next-line\n @Output() onClick: EventEmitter<MouseEvent> = new EventEmitter();\n\n // eslint-disable-next-line\n @Output() onFocus: EventEmitter<FocusEvent> = new EventEmitter();\n\n // eslint-disable-next-line\n @Output() onBlur: EventEmitter<FocusEvent> = new EventEmitter();\n\n @ContentChild(SymbolComponent) symbolComponent: SymbolComponent;\n\n private _loading: boolean = false;\n private _locked: boolean = false;\n hostDataTest: string;\n\n constructor(private symbolRegistry: SymbolRegistry,\n private elementRef: ElementRef) {\n this.symbolRegistry.registerSymbols([\n apPremiumStar\n ]);\n this.hostDataTest = this.elementRef.nativeElement.getAttribute('data-test');\n }\n\n ngAfterContentInit(): void {\n if (this.symbolComponent) {\n this.symbolComponent.size = 'micro';\n }\n }\n}\n","<button\n class=\"icon-button\"\n type=\"button\"\n [name]=\"name\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.data-test]=\"hostDataTest ?? name\"\n [disabled]=\"disabled\"\n [class.blue]=\"color === 'blue'\"\n [class.green]=\"color === 'green'\"\n [class.red]=\"color === 'red'\"\n [class.flat]=\"type === 'flat'\"\n [class.stroked]=\"type === 'stroked' || type === 'stroked-transparent'\"\n [class.transparent]=\"type === 'stroked-transparent'\"\n [class.loading]=\"loading\"\n [class.locked]=\"locked\"\n (click)=\"onClick.emit($event)\"\n (focus)=\"onFocus.emit($event)\"\n (blur)=\"onBlur.emit($event)\"\n>\n <ng-content\n *ngIf=\"!loading\">\n </ng-content>\n <ap-loader\n *ngIf=\"loading\"\n color=\"white\"\n [diameter]=\"16\"\n ></ap-loader>\n <div *ngIf=\"locked\"\n class=\"locked-symbol\">\n <ap-symbol\n symbolId=\"premium-star\"\n size=\"micro\"\n >\n </ap-symbol>\n </div>\n</button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
package/icon-button/icon-button.component.d.ts CHANGED
@@ -1,10 +1,11 @@
1
- import { AfterContentInit, EventEmitter } from "@angular/core";
1
+ import { AfterContentInit, ElementRef, EventEmitter } from "@angular/core";
2
2
  import { SymbolComponent, SymbolRegistry } from "@agorapulse/ui-symbol";
3
3
  import * as i0 from "@angular/core";
4
4
  export type ButtonType = 'flat' | 'stroked-transparent' | 'stroked';
5
5
  export type ButtonColor = 'none' | 'blue' | 'red' | 'green';
6
6
  export declare class IconButtonComponent implements AfterContentInit {
7
7
  private symbolRegistry;
8
+ private elementRef;
8
9
  ariaLabel: string;
9
10
  name: string;
10
11
  color: ButtonColor;
@@ -20,7 +21,8 @@ export declare class IconButtonComponent implements AfterContentInit {
20
21
  symbolComponent: SymbolComponent;
21
22
  private _loading;
22
23
  private _locked;
23
- constructor(symbolRegistry: SymbolRegistry);
24
+ hostDataTest: string;
25
+ constructor(symbolRegistry: SymbolRegistry, elementRef: ElementRef);
24
26
  ngAfterContentInit(): void;
25
27
  static ɵfac: i0.ɵɵFactoryDeclaration<IconButtonComponent, never>;
26
28
  static ɵcmp: i0.ɵɵComponentDeclaration<IconButtonComponent, "ap-icon-button", never, { "ariaLabel": "ariaLabel"; "name": "name"; "color": "color"; "disabled": "disabled"; "locked": "locked"; "loading": "loading"; "type": "type"; }, { "onClick": "onClick"; "onFocus": "onFocus"; "onBlur": "onBlur"; }, ["symbolComponent"], ["*"], true, never>;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@agorapulse/ui-components",
3
3
  "description": "Agorapulse UI Components Library",
4
- "version": "15.0.15",
4
+ "version": "15.0.18",
5
5
  "author": "Benoit Hediard",
6
6
  "repository": {
7
7
  "type": "git",