@agorapulse/ui-components 16.0.5 → 16.0.7
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.
- package/add-comment/add-comment.component.d.ts +1 -0
- package/agorapulse-ui-components-16.0.7.tgz +0 -0
- package/avatar/avatar.component.d.ts +2 -0
- package/button/button.component.d.ts +1 -0
- package/checkbox/checkbox.component.d.ts +3 -0
- package/dots-stepper/dots-stepper.component.d.ts +1 -0
- package/esm2022/add-comment/add-comment.component.mjs +7 -4
- package/esm2022/avatar/avatar.component.mjs +11 -5
- package/esm2022/button/button.component.mjs +7 -4
- package/esm2022/checkbox/checkbox.component.mjs +15 -6
- package/esm2022/dots-stepper/dots-stepper.component.mjs +7 -4
- package/esm2022/icon-button/icon-button.component.mjs +7 -4
- package/esm2022/infobox/infobox.component.mjs +7 -4
- package/esm2022/radio/radio.component.mjs +11 -5
- package/esm2022/slide-toggle/slide-toggle.component.mjs +7 -4
- package/esm2022/social-button/social-button.component.mjs +7 -4
- package/esm2022/split-button/split-button.component.mjs +7 -4
- package/esm2022/toggle/toggle.component.mjs +11 -5
- package/esm2022/tooltip/tooltip.directive.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-add-comment.mjs +6 -3
- package/fesm2022/agorapulse-ui-components-add-comment.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-avatar.mjs +10 -4
- package/fesm2022/agorapulse-ui-components-avatar.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-button.mjs +6 -3
- package/fesm2022/agorapulse-ui-components-button.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-checkbox.mjs +14 -5
- package/fesm2022/agorapulse-ui-components-checkbox.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-dots-stepper.mjs +6 -3
- package/fesm2022/agorapulse-ui-components-dots-stepper.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-icon-button.mjs +6 -3
- package/fesm2022/agorapulse-ui-components-icon-button.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-infobox.mjs +6 -3
- package/fesm2022/agorapulse-ui-components-infobox.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-radio.mjs +10 -4
- package/fesm2022/agorapulse-ui-components-radio.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-slide-toggle.mjs +6 -3
- package/fesm2022/agorapulse-ui-components-slide-toggle.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-social-button.mjs +6 -3
- package/fesm2022/agorapulse-ui-components-social-button.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-split-button.mjs +6 -3
- package/fesm2022/agorapulse-ui-components-split-button.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-toggle.mjs +10 -4
- package/fesm2022/agorapulse-ui-components-toggle.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-tooltip.mjs.map +1 -1
- package/icon-button/icon-button.component.d.ts +1 -0
- package/infobox/infobox.component.d.ts +1 -0
- package/package.json +2 -2
- package/radio/radio.component.d.ts +2 -0
- package/slide-toggle/slide-toggle.component.d.ts +1 -0
- package/snackbars-thread/component/snackbars-thread.component.d.ts +1 -1
- package/social-button/social-button.component.d.ts +1 -0
- package/split-button/split-button.component.d.ts +2 -1
- package/toggle/toggle.component.d.ts +2 -0
- package/tooltip/tooltip.directive.d.ts +1 -1
- package/agorapulse-ui-components-16.0.5.tgz +0 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { forwardRef, inject, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, Input, Output } from '@angular/core';
|
|
2
|
+
import { forwardRef, inject, EventEmitter, booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, Input, Output } from '@angular/core';
|
|
3
3
|
import { NgIf, CommonModule } from '@angular/common';
|
|
4
4
|
import { SymbolRegistry, apCheck2, SymbolComponent } from '@agorapulse/ui-symbol';
|
|
5
5
|
import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
|
|
@@ -117,7 +117,7 @@ class CheckboxComponent {
|
|
|
117
117
|
}
|
|
118
118
|
}
|
|
119
119
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
120
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
120
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.10", type: CheckboxComponent, isStandalone: true, selector: "ap-checkbox", inputs: { ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], disabled: ["disabled", "disabled", booleanAttribute], indeterminate: ["indeterminate", "indeterminate", booleanAttribute], checked: "checked", required: ["required", "required", booleanAttribute], name: "name" }, outputs: { change: "change" }, providers: [
|
|
121
121
|
AP_CHECKBOX_CONTROL_VALUE_ACCESSOR,
|
|
122
122
|
{
|
|
123
123
|
provide: NG_VALIDATORS,
|
|
@@ -152,13 +152,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImpo
|
|
|
152
152
|
type: Input,
|
|
153
153
|
args: ['aria-describedby']
|
|
154
154
|
}], disabled: [{
|
|
155
|
-
type: Input
|
|
155
|
+
type: Input,
|
|
156
|
+
args: [{
|
|
157
|
+
transform: booleanAttribute,
|
|
158
|
+
}]
|
|
156
159
|
}], indeterminate: [{
|
|
157
|
-
type: Input
|
|
160
|
+
type: Input,
|
|
161
|
+
args: [{
|
|
162
|
+
transform: booleanAttribute,
|
|
163
|
+
}]
|
|
158
164
|
}], checked: [{
|
|
159
165
|
type: Input
|
|
160
166
|
}], required: [{
|
|
161
|
-
type: Input
|
|
167
|
+
type: Input,
|
|
168
|
+
args: [{
|
|
169
|
+
transform: booleanAttribute,
|
|
170
|
+
}]
|
|
162
171
|
}], name: [{
|
|
163
172
|
type: Input,
|
|
164
173
|
args: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-checkbox.mjs","sources":["../../../libs/ui-components/checkbox/src/checkbox.component.ts","../../../libs/ui-components/checkbox/src/checkbox.component.html","../../../libs/ui-components/checkbox/src/agorapulse-ui-components-checkbox.ts"],"sourcesContent":["import {\n AfterContentInit,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n EventEmitter,\n forwardRef,\n inject,\n Input,\n OnChanges,\n OnInit,\n Output,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport { CommonModule, NgIf } from '@angular/common';\nimport { apCheck2, SymbolComponent, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport { ControlValueAccessor, FormControl, NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nexport const AP_CHECKBOX_CONTROL_VALUE_ACCESSOR = {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => CheckboxComponent),\n multi: true,\n};\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-checkbox',\n styleUrls: ['./checkbox.component.scss'],\n standalone: true,\n imports: [NgIf, SymbolComponent, CommonModule],\n providers: [\n AP_CHECKBOX_CONTROL_VALUE_ACCESSOR,\n {\n provide: NG_VALIDATORS,\n useExisting: CheckboxComponent,\n multi: true,\n },\n ],\n templateUrl: './checkbox.component.html',\n encapsulation: ViewEncapsulation.None,\n})\nexport class CheckboxComponent implements ControlValueAccessor, AfterContentInit, OnChanges, OnInit {\n private readonly symbolRegistry = inject(SymbolRegistry);\n @ViewChild('input', { static: true }) inputElement!: ElementRef<HTMLInputElement>;\n @ViewChild('label', { static: true }) labelElement!: ElementRef<HTMLInputElement>;\n @Input('aria-label') ariaLabel = '';\n @Input('aria-labelledby') ariaLabelledby: string | null = null;\n @Input('aria-describedby') ariaDescribedby = '';\n @Input() disabled = false;\n @Input() set indeterminate(indeterminate: boolean) {\n if (indeterminate) {\n this.checked = false;\n }\n this._indeterminate = indeterminate;\n }\n\n get indeterminate(): boolean {\n return this._indeterminate;\n }\n\n @Input() checked = false;\n\n @Input() required = false;\n\n @Input({\n required: true,\n })\n set name(name: string) {\n this._name = name;\n }\n get name(): string {\n return this._name;\n }\n // eslint-disable-next-line\n @Output() readonly change: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n ariaChecked: 'true' | 'false' | 'mixed' = 'false';\n hasLabel = false;\n hovered = false;\n\n private _indeterminate = false;\n private _name = '';\n private _controlValueAccessorChangeFn!: (value: boolean) => void;\n onTouched!: () => void;\n\n ngOnChanges(): void {\n if (this.labelElement) {\n this.hasLabel = !!this.labelElement.nativeElement.textContent?.trim();\n }\n }\n\n ngOnInit() {\n this.symbolRegistry.registerSymbols([apCheck2]);\n }\n\n ngAfterContentInit(): void {\n if (this.labelElement) {\n this.hasLabel = !!this.labelElement.nativeElement.textContent?.trim();\n }\n }\n\n onMouseEnter(): void {\n if (!this.disabled) {\n this.hovered = true;\n }\n }\n\n onMouseLeave(): void {\n if (!this.disabled) {\n this.hovered = false;\n }\n }\n\n onValueChange() {\n if (this.onTouched) {\n this.onTouched();\n }\n if (!this.disabled) {\n if (this.indeterminate) {\n this.checked = false;\n this.indeterminate = false;\n } else {\n this.checked = !this.checked;\n this.focus();\n }\n this.change.emit(this.checked);\n if (this._controlValueAccessorChangeFn) {\n this._controlValueAccessorChangeFn(this.checked);\n }\n\n // Assigning the value again here is redundant, but we have to do it in case it was\n // changed inside the `change` listener which will cause the input to be out of sync.\n if (this.inputElement) {\n this.inputElement.nativeElement.checked = this.checked;\n }\n }\n }\n\n focus() {\n this.inputElement.nativeElement.focus();\n }\n\n writeValue(value: boolean): void {\n this.checked = value;\n }\n registerOnChange(fn: (value: boolean) => void): void {\n this._controlValueAccessorChangeFn = fn;\n }\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n setDisabledState(isDisabled: boolean): void {\n this.disabled = isDisabled;\n }\n\n validate({ value }: FormControl) {\n const isNotValid = !this.checked && this.required;\n return (\n isNotValid && {\n invalid: true,\n }\n );\n }\n\n _preventBubblingFromLabel(event: MouseEvent) {\n if (!!event.target && this.labelElement.nativeElement.contains(event.target as HTMLElement)) {\n event.stopPropagation();\n }\n }\n}\n","<div\n class=\"checkbox\"\n (click)=\"_preventBubblingFromLabel($event)\">\n <div\n class=\"checkbox-container\"\n [class.hover]=\"hovered\"\n [class.checked]=\"checked\"\n [class.indeterminate]=\"indeterminate && !checked\"\n [class.disabled]=\"disabled\"\n [class.has-label]=\"hasLabel\"\n [class.required]=\"required\">\n <input\n #input\n type=\"checkbox\"\n [id]=\"name\"\n [class.disabled]=\"disabled\"\n [attr.aria-checked]=\"ariaChecked\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-hidden]=\"true\"\n [checked]=\"checked\"\n [required]=\"required\"\n [attr.data-test]=\"name\"\n (click)=\"onValueChange()\" />\n <span\n class=\"checkbox\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (click)=\"onValueChange()\">\n <span\n *ngIf=\"checked\"\n class=\"checkmark\">\n <ap-symbol\n symbolId=\"check-2\"\n color=\"white\"\n size=\"10\" />\n </span>\n <span\n *ngIf=\"indeterminate && !checked\"\n class=\"indeterminate\"></span>\n </span>\n </div>\n <label\n #label\n [class.disabled]=\"disabled\"\n [for]=\"name\">\n <ng-content></ng-content>\n </label>\n</div>\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-checkbox.mjs","sources":["../../../libs/ui-components/checkbox/src/checkbox.component.ts","../../../libs/ui-components/checkbox/src/checkbox.component.html","../../../libs/ui-components/checkbox/src/agorapulse-ui-components-checkbox.ts"],"sourcesContent":["import {\n AfterContentInit,\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n EventEmitter,\n forwardRef,\n inject,\n Input,\n OnChanges,\n OnInit,\n Output,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport { CommonModule, NgIf } from '@angular/common';\nimport { apCheck2, SymbolComponent, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport { ControlValueAccessor, FormControl, NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nexport const AP_CHECKBOX_CONTROL_VALUE_ACCESSOR = {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => CheckboxComponent),\n multi: true,\n};\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-checkbox',\n styleUrls: ['./checkbox.component.scss'],\n standalone: true,\n imports: [NgIf, SymbolComponent, CommonModule],\n providers: [\n AP_CHECKBOX_CONTROL_VALUE_ACCESSOR,\n {\n provide: NG_VALIDATORS,\n useExisting: CheckboxComponent,\n multi: true,\n },\n ],\n templateUrl: './checkbox.component.html',\n encapsulation: ViewEncapsulation.None,\n})\nexport class CheckboxComponent implements ControlValueAccessor, AfterContentInit, OnChanges, OnInit {\n private readonly symbolRegistry = inject(SymbolRegistry);\n @ViewChild('input', { static: true }) inputElement!: ElementRef<HTMLInputElement>;\n @ViewChild('label', { static: true }) labelElement!: ElementRef<HTMLInputElement>;\n @Input('aria-label') ariaLabel = '';\n @Input('aria-labelledby') ariaLabelledby: string | null = null;\n @Input('aria-describedby') ariaDescribedby = '';\n @Input({\n transform: booleanAttribute,\n })\n disabled = false;\n @Input({\n transform: booleanAttribute,\n }) set indeterminate(indeterminate: boolean) {\n if (indeterminate) {\n this.checked = false;\n }\n this._indeterminate = indeterminate;\n }\n\n get indeterminate(): boolean {\n return this._indeterminate;\n }\n\n @Input() checked = false;\n\n @Input({\n transform: booleanAttribute,\n }) required = false;\n\n @Input({\n required: true,\n })\n set name(name: string) {\n this._name = name;\n }\n get name(): string {\n return this._name;\n }\n // eslint-disable-next-line\n @Output() readonly change: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n ariaChecked: 'true' | 'false' | 'mixed' = 'false';\n hasLabel = false;\n hovered = false;\n\n private _indeterminate = false;\n private _name = '';\n private _controlValueAccessorChangeFn!: (value: boolean) => void;\n onTouched!: () => void;\n\n ngOnChanges(): void {\n if (this.labelElement) {\n this.hasLabel = !!this.labelElement.nativeElement.textContent?.trim();\n }\n }\n\n ngOnInit() {\n this.symbolRegistry.registerSymbols([apCheck2]);\n }\n\n ngAfterContentInit(): void {\n if (this.labelElement) {\n this.hasLabel = !!this.labelElement.nativeElement.textContent?.trim();\n }\n }\n\n onMouseEnter(): void {\n if (!this.disabled) {\n this.hovered = true;\n }\n }\n\n onMouseLeave(): void {\n if (!this.disabled) {\n this.hovered = false;\n }\n }\n\n onValueChange() {\n if (this.onTouched) {\n this.onTouched();\n }\n if (!this.disabled) {\n if (this.indeterminate) {\n this.checked = false;\n this.indeterminate = false;\n } else {\n this.checked = !this.checked;\n this.focus();\n }\n this.change.emit(this.checked);\n if (this._controlValueAccessorChangeFn) {\n this._controlValueAccessorChangeFn(this.checked);\n }\n\n // Assigning the value again here is redundant, but we have to do it in case it was\n // changed inside the `change` listener which will cause the input to be out of sync.\n if (this.inputElement) {\n this.inputElement.nativeElement.checked = this.checked;\n }\n }\n }\n\n focus() {\n this.inputElement.nativeElement.focus();\n }\n\n writeValue(value: boolean): void {\n this.checked = value;\n }\n registerOnChange(fn: (value: boolean) => void): void {\n this._controlValueAccessorChangeFn = fn;\n }\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n setDisabledState(isDisabled: boolean): void {\n this.disabled = isDisabled;\n }\n\n validate({ value }: FormControl) {\n const isNotValid = !this.checked && this.required;\n return (\n isNotValid && {\n invalid: true,\n }\n );\n }\n\n _preventBubblingFromLabel(event: MouseEvent) {\n if (!!event.target && this.labelElement.nativeElement.contains(event.target as HTMLElement)) {\n event.stopPropagation();\n }\n }\n}\n","<div\n class=\"checkbox\"\n (click)=\"_preventBubblingFromLabel($event)\">\n <div\n class=\"checkbox-container\"\n [class.hover]=\"hovered\"\n [class.checked]=\"checked\"\n [class.indeterminate]=\"indeterminate && !checked\"\n [class.disabled]=\"disabled\"\n [class.has-label]=\"hasLabel\"\n [class.required]=\"required\">\n <input\n #input\n type=\"checkbox\"\n [id]=\"name\"\n [class.disabled]=\"disabled\"\n [attr.aria-checked]=\"ariaChecked\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-hidden]=\"true\"\n [checked]=\"checked\"\n [required]=\"required\"\n [attr.data-test]=\"name\"\n (click)=\"onValueChange()\" />\n <span\n class=\"checkbox\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (click)=\"onValueChange()\">\n <span\n *ngIf=\"checked\"\n class=\"checkmark\">\n <ap-symbol\n symbolId=\"check-2\"\n color=\"white\"\n size=\"10\" />\n </span>\n <span\n *ngIf=\"indeterminate && !checked\"\n class=\"indeterminate\"></span>\n </span>\n </div>\n <label\n #label\n [class.disabled]=\"disabled\"\n [for]=\"name\">\n <ng-content></ng-content>\n </label>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;AAoBa,MAAA,kCAAkC,GAAG;AAC9C,IAAA,OAAO,EAAE,iBAAiB;AAC1B,IAAA,WAAW,EAAE,UAAU,CAAC,MAAM,iBAAiB,CAAC;AAChD,IAAA,KAAK,EAAE,IAAI;EACb;MAmBW,iBAAiB,CAAA;AACT,IAAA,cAAc,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;AACnB,IAAA,YAAY,CAAgC;AAC5C,IAAA,YAAY,CAAgC;IAC7D,SAAS,GAAG,EAAE,CAAC;IACV,cAAc,GAAkB,IAAI,CAAC;IACpC,eAAe,GAAG,EAAE,CAAC;IAIhD,QAAQ,GAAG,KAAK,CAAC;IACjB,IAEO,aAAa,CAAC,aAAsB,EAAA;AACvC,QAAA,IAAI,aAAa,EAAE;AACf,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;AACxB,SAAA;AACD,QAAA,IAAI,CAAC,cAAc,GAAG,aAAa,CAAC;KACvC;AAED,IAAA,IAAI,aAAa,GAAA;QACb,OAAO,IAAI,CAAC,cAAc,CAAC;KAC9B;IAEQ,OAAO,GAAG,KAAK,CAAC;IAItB,QAAQ,GAAG,KAAK,CAAC;IAEpB,IAGI,IAAI,CAAC,IAAY,EAAA;AACjB,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;KACrB;AACD,IAAA,IAAI,IAAI,GAAA;QACJ,OAAO,IAAI,CAAC,KAAK,CAAC;KACrB;;AAEkB,IAAA,MAAM,GAA0B,IAAI,YAAY,EAAW,CAAC;IAE/E,WAAW,GAA+B,OAAO,CAAC;IAClD,QAAQ,GAAG,KAAK,CAAC;IACjB,OAAO,GAAG,KAAK,CAAC;IAER,cAAc,GAAG,KAAK,CAAC;IACvB,KAAK,GAAG,EAAE,CAAC;AACX,IAAA,6BAA6B,CAA4B;AACjE,IAAA,SAAS,CAAc;IAEvB,WAAW,GAAA;QACP,IAAI,IAAI,CAAC,YAAY,EAAE;AACnB,YAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC;AACzE,SAAA;KACJ;IAED,QAAQ,GAAA;QACJ,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC;KACnD;IAED,kBAAkB,GAAA;QACd,IAAI,IAAI,CAAC,YAAY,EAAE;AACnB,YAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC;AACzE,SAAA;KACJ;IAED,YAAY,GAAA;AACR,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAChB,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;AACvB,SAAA;KACJ;IAED,YAAY,GAAA;AACR,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAChB,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;AACxB,SAAA;KACJ;IAED,aAAa,GAAA;QACT,IAAI,IAAI,CAAC,SAAS,EAAE;YAChB,IAAI,CAAC,SAAS,EAAE,CAAC;AACpB,SAAA;AACD,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAChB,IAAI,IAAI,CAAC,aAAa,EAAE;AACpB,gBAAA,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;AACrB,gBAAA,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;AAC9B,aAAA;AAAM,iBAAA;AACH,gBAAA,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;gBAC7B,IAAI,CAAC,KAAK,EAAE,CAAC;AAChB,aAAA;YACD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC/B,IAAI,IAAI,CAAC,6BAA6B,EAAE;AACpC,gBAAA,IAAI,CAAC,6BAA6B,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;AACpD,aAAA;;;YAID,IAAI,IAAI,CAAC,YAAY,EAAE;gBACnB,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;AAC1D,aAAA;AACJ,SAAA;KACJ;IAED,KAAK,GAAA;AACD,QAAA,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;KAC3C;AAED,IAAA,UAAU,CAAC,KAAc,EAAA;AACrB,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;KACxB;AACD,IAAA,gBAAgB,CAAC,EAA4B,EAAA;AACzC,QAAA,IAAI,CAAC,6BAA6B,GAAG,EAAE,CAAC;KAC3C;AACD,IAAA,iBAAiB,CAAC,EAAc,EAAA;AAC5B,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;KACvB;AACD,IAAA,gBAAgB,CAAC,UAAmB,EAAA;AAChC,QAAA,IAAI,CAAC,QAAQ,GAAG,UAAU,CAAC;KAC9B;IAED,QAAQ,CAAC,EAAE,KAAK,EAAe,EAAA;QAC3B,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,CAAC;QAClD,QACI,UAAU,IAAI;AACV,YAAA,OAAO,EAAE,IAAI;AAChB,SAAA,EACH;KACL;AAED,IAAA,yBAAyB,CAAC,KAAiB,EAAA;AACvC,QAAA,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAqB,CAAC,EAAE;YACzF,KAAK,CAAC,eAAe,EAAE,CAAC;AAC3B,SAAA;KACJ;wGAtIQ,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,iBAAiB,qPAQX,gBAAgB,CAAA,EAAA,aAAA,EAAA,CAAA,eAAA,EAAA,eAAA,EAIhB,gBAAgB,CAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,CAAA,UAAA,EAAA,UAAA,EAehB,gBAAgB,CAtCpB,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,SAAA,EAAA;YACP,kCAAkC;AAClC,YAAA;AACI,gBAAA,OAAO,EAAE,aAAa;AACtB,gBAAA,WAAW,EAAE,iBAAiB;AAC9B,gBAAA,KAAK,EAAE,IAAI;AACd,aAAA;AACJ,SAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,cAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,OAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,OAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,CAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECvCL,ioDAkDA,EDnBc,MAAA,EAAA,CAAA,+nIAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAI,EAAE,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,eAAe,4FAAE,YAAY,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;4FAYpC,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAjB7B,SAAS;AACW,YAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,uBAAuB,CAAC,MAAM,EACrC,QAAA,EAAA,aAAa,cAEX,IAAI,EAAA,OAAA,EACP,CAAC,IAAI,EAAE,eAAe,EAAE,YAAY,CAAC,EACnC,SAAA,EAAA;wBACP,kCAAkC;AAClC,wBAAA;AACI,4BAAA,OAAO,EAAE,aAAa;AACtB,4BAAA,WAAW,EAAmB,iBAAA;AAC9B,4BAAA,KAAK,EAAE,IAAI;AACd,yBAAA;qBACJ,EAEc,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,ioDAAA,EAAA,MAAA,EAAA,CAAA,+nIAAA,CAAA,EAAA,CAAA;8BAIC,YAAY,EAAA,CAAA;sBAAjD,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,OAAO,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAA;gBACE,YAAY,EAAA,CAAA;sBAAjD,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,OAAO,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAA;gBACf,SAAS,EAAA,CAAA;sBAA7B,KAAK;uBAAC,YAAY,CAAA;gBACO,cAAc,EAAA,CAAA;sBAAvC,KAAK;uBAAC,iBAAiB,CAAA;gBACG,eAAe,EAAA,CAAA;sBAAzC,KAAK;uBAAC,kBAAkB,CAAA;gBAIzB,QAAQ,EAAA,CAAA;sBAHP,KAAK;AAAC,gBAAA,IAAA,EAAA,CAAA;AACH,wBAAA,SAAS,EAAE,gBAAgB;AAC9B,qBAAA,CAAA;gBAIM,aAAa,EAAA,CAAA;sBAFnB,KAAK;AAAC,gBAAA,IAAA,EAAA,CAAA;AACH,wBAAA,SAAS,EAAE,gBAAgB;AAC9B,qBAAA,CAAA;gBAWQ,OAAO,EAAA,CAAA;sBAAf,KAAK;gBAIH,QAAQ,EAAA,CAAA;sBAFV,KAAK;AAAC,gBAAA,IAAA,EAAA,CAAA;AACH,wBAAA,SAAS,EAAE,gBAAgB;AAC9B,qBAAA,CAAA;gBAKG,IAAI,EAAA,CAAA;sBAHP,KAAK;AAAC,gBAAA,IAAA,EAAA,CAAA;AACH,wBAAA,QAAQ,EAAE,IAAI;AACjB,qBAAA,CAAA;gBAQkB,MAAM,EAAA,CAAA;sBAAxB,MAAM;;;AEnFX;;AAEG;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { NgClass, NgForOf } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output } from '@angular/core';
|
|
3
|
+
import { EventEmitter, booleanAttribute, Component, ChangeDetectionStrategy, Input, Output } from '@angular/core';
|
|
4
4
|
|
|
5
5
|
class DotsStepperComponent {
|
|
6
6
|
disabled = false;
|
|
@@ -23,13 +23,16 @@ class DotsStepperComponent {
|
|
|
23
23
|
this.dotClick.emit(this.index);
|
|
24
24
|
}
|
|
25
25
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: DotsStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
26
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
26
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.10", type: DotsStepperComponent, isStandalone: true, selector: "ap-dots-stepper", inputs: { disabled: ["disabled", "disabled", booleanAttribute], forwardAllowed: "forwardAllowed", index: "index", items: "items", size: "size" }, outputs: { dotClick: "dotClick" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"dots\"\n [ngClass]=\"{ 'small-dots': size === 'small' }\">\n <div\n *ngFor=\"let item of items; let i = index\"\n class=\"dot\"\n [ngClass]=\"{ active: item === currentItem, disabled: disabled || (!forwardAllowed && i > index) }\"\n (click)=\"onDotClick($event, item, i)\"></div>\n</div>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}.dots{align-items:stretch;box-sizing:border-box;display:flex;flex-direction:row;place-content:stretch center;position:absolute;width:100%}.dots .dot{-webkit-transition:all .2s ease-in-out;background:#d6dae0;border-radius:50%;cursor:pointer;height:8px;margin:16px 4px;transition:all .2s ease-in-out;width:8px}.dots .dot.active{background:#178dfe;cursor:initial}.dots .dot.disabled{background:#d6dae0;cursor:initial}.dots.small-dots .dot{height:6px;margin:16px 2px;width:6px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
27
27
|
}
|
|
28
28
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: DotsStepperComponent, decorators: [{
|
|
29
29
|
type: Component,
|
|
30
30
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-dots-stepper', standalone: true, imports: [NgClass, NgForOf], template: "<div\n class=\"dots\"\n [ngClass]=\"{ 'small-dots': size === 'small' }\">\n <div\n *ngFor=\"let item of items; let i = index\"\n class=\"dot\"\n [ngClass]=\"{ active: item === currentItem, disabled: disabled || (!forwardAllowed && i > index) }\"\n (click)=\"onDotClick($event, item, i)\"></div>\n</div>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}.dots{align-items:stretch;box-sizing:border-box;display:flex;flex-direction:row;place-content:stretch center;position:absolute;width:100%}.dots .dot{-webkit-transition:all .2s ease-in-out;background:#d6dae0;border-radius:50%;cursor:pointer;height:8px;margin:16px 4px;transition:all .2s ease-in-out;width:8px}.dots .dot.active{background:#178dfe;cursor:initial}.dots .dot.disabled{background:#d6dae0;cursor:initial}.dots.small-dots .dot{height:6px;margin:16px 2px;width:6px}\n"] }]
|
|
31
31
|
}], propDecorators: { disabled: [{
|
|
32
|
-
type: Input
|
|
32
|
+
type: Input,
|
|
33
|
+
args: [{
|
|
34
|
+
transform: booleanAttribute,
|
|
35
|
+
}]
|
|
33
36
|
}], forwardAllowed: [{
|
|
34
37
|
type: Input
|
|
35
38
|
}], index: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-dots-stepper.mjs","sources":["../../../libs/ui-components/dots-stepper/src/dots-stepper.component.ts","../../../libs/ui-components/dots-stepper/src/dots-stepper.component.html","../../../libs/ui-components/dots-stepper/src/agorapulse-ui-components-dots-stepper.ts"],"sourcesContent":["import { NgClass, NgForOf } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-dots-stepper',\n standalone: true,\n templateUrl: './dots-stepper.component.html',\n imports: [NgClass, NgForOf],\n styleUrls: ['./dots-stepper.component.scss'],\n})\nexport class DotsStepperComponent<T> implements OnChanges {\n @Input() disabled = false;\n @Input() forwardAllowed = true;\n @Input() index = 0;\n @Input() items: T[] = [];\n @Input() size: string = '';\n\n @Output() dotClick: EventEmitter<number> = new EventEmitter<number>();\n\n currentItem: T | undefined = undefined;\n\n ngOnChanges() {\n this.currentItem = this.items[this.index];\n }\n\n onDotClick(event: Event, item: T, index: number) {\n event.stopPropagation();\n if (this.disabled || (!this.forwardAllowed && index > this.index)) {\n return;\n }\n this.currentItem = item;\n this.index = index;\n this.dotClick.emit(this.index);\n }\n}\n","<div\n class=\"dots\"\n [ngClass]=\"{ 'small-dots': size === 'small' }\">\n <div\n *ngFor=\"let item of items; let i = index\"\n class=\"dot\"\n [ngClass]=\"{ active: item === currentItem, disabled: disabled || (!forwardAllowed && i > index) }\"\n (click)=\"onDotClick($event, item, i)\"></div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;MAWa,oBAAoB,CAAA;
|
|
1
|
+
{"version":3,"file":"agorapulse-ui-components-dots-stepper.mjs","sources":["../../../libs/ui-components/dots-stepper/src/dots-stepper.component.ts","../../../libs/ui-components/dots-stepper/src/dots-stepper.component.html","../../../libs/ui-components/dots-stepper/src/agorapulse-ui-components-dots-stepper.ts"],"sourcesContent":["import { NgClass, NgForOf } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, booleanAttribute } from '@angular/core';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-dots-stepper',\n standalone: true,\n templateUrl: './dots-stepper.component.html',\n imports: [NgClass, NgForOf],\n styleUrls: ['./dots-stepper.component.scss'],\n})\nexport class DotsStepperComponent<T> implements OnChanges {\n @Input({\n transform: booleanAttribute,\n }) disabled = false;\n @Input() forwardAllowed = true;\n @Input() index = 0;\n @Input() items: T[] = [];\n @Input() size: string = '';\n\n @Output() dotClick: EventEmitter<number> = new EventEmitter<number>();\n\n currentItem: T | undefined = undefined;\n\n ngOnChanges() {\n this.currentItem = this.items[this.index];\n }\n\n onDotClick(event: Event, item: T, index: number) {\n event.stopPropagation();\n if (this.disabled || (!this.forwardAllowed && index > this.index)) {\n return;\n }\n this.currentItem = item;\n this.index = index;\n this.dotClick.emit(this.index);\n }\n}\n","<div\n class=\"dots\"\n [ngClass]=\"{ 'small-dots': size === 'small' }\">\n <div\n *ngFor=\"let item of items; let i = index\"\n class=\"dot\"\n [ngClass]=\"{ active: item === currentItem, disabled: disabled || (!forwardAllowed && i > index) }\"\n (click)=\"onDotClick($event, item, i)\"></div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;MAWa,oBAAoB,CAAA;IAG1B,QAAQ,GAAG,KAAK,CAAC;IACX,cAAc,GAAG,IAAI,CAAC;IACtB,KAAK,GAAG,CAAC,CAAC;IACV,KAAK,GAAQ,EAAE,CAAC;IAChB,IAAI,GAAW,EAAE,CAAC;AAEjB,IAAA,QAAQ,GAAyB,IAAI,YAAY,EAAU,CAAC;IAEtE,WAAW,GAAkB,SAAS,CAAC;IAEvC,WAAW,GAAA;QACP,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC7C;AAED,IAAA,UAAU,CAAC,KAAY,EAAE,IAAO,EAAE,KAAa,EAAA;QAC3C,KAAK,CAAC,eAAe,EAAE,CAAC;AACxB,QAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,CAAC,IAAI,CAAC,cAAc,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE;YAC/D,OAAO;AACV,SAAA;AACD,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;AACxB,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAClC;wGAzBQ,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAApB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,oBAAoB,gGAEd,gBAAgB,CAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,KAAA,EAAA,OAAA,EAAA,KAAA,EAAA,OAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECbnC,uVASA,EDDc,MAAA,EAAA,CAAA,q4LAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,OAAO,oFAAE,OAAO,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,cAAA,EAAA,eAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAGjB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBARhC,SAAS;sCACW,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,iBAAiB,EAAA,UAAA,EACf,IAAI,EAAA,OAAA,EAEP,CAAC,OAAO,EAAE,OAAO,CAAC,EAAA,QAAA,EAAA,uVAAA,EAAA,MAAA,EAAA,CAAA,q4LAAA,CAAA,EAAA,CAAA;8BAMxB,QAAQ,EAAA,CAAA;sBAFV,KAAK;AAAC,gBAAA,IAAA,EAAA,CAAA;AACH,wBAAA,SAAS,EAAE,gBAAgB;AAC9B,qBAAA,CAAA;gBACQ,cAAc,EAAA,CAAA;sBAAtB,KAAK;gBACG,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBAEI,QAAQ,EAAA,CAAA;sBAAjB,MAAM;;;AEpBX;;AAEG;;;;"}
|
|
@@ -3,7 +3,7 @@ import * as i1 from '@agorapulse/ui-symbol';
|
|
|
3
3
|
import { apPremiumStar, SymbolComponent } from '@agorapulse/ui-symbol';
|
|
4
4
|
import { NgIf, CommonModule } from '@angular/common';
|
|
5
5
|
import * as i0 from '@angular/core';
|
|
6
|
-
import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ContentChild, ViewChild, HostListener } from '@angular/core';
|
|
6
|
+
import { EventEmitter, booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ContentChild, ViewChild, HostListener } from '@angular/core';
|
|
7
7
|
import * as i2 from '@angular/material/menu';
|
|
8
8
|
import { MatMenuModule } from '@angular/material/menu';
|
|
9
9
|
|
|
@@ -75,7 +75,7 @@ class IconButtonComponent {
|
|
|
75
75
|
}
|
|
76
76
|
}
|
|
77
77
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: IconButtonComponent, deps: [{ token: i1.SymbolRegistry }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
78
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
78
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.10", type: IconButtonComponent, isStandalone: true, selector: "ap-icon-button", inputs: { ariaLabel: "ariaLabel", name: "name", color: "color", disabled: ["disabled", "disabled", booleanAttribute], menuTrigger: "menuTrigger", locked: "locked", loading: "loading", type: "type" }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur", menuOpened: "menuOpened", menuClosed: "menuClosed" }, host: { listeners: { "window:keyup.space": "onSpaceKeyUp($event)" } }, queries: [{ propertyName: "symbolComponent", first: true, predicate: SymbolComponent, descendants: true }], viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true }], ngImport: i0, template: "<button\n #button\n #trigger=\"matMenuTrigger\"\n class=\"icon-button\"\n type=\"button\"\n [name]=\"name\"\n [matMenuTriggerFor]=\"menuTrigger\"\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)=\"onClickHandle($event)\"\n (blur)=\"onBlurHandle($event)\"\n (focus)=\"onFocusHandle($event)\"\n (menuOpened)=\"menuOpened.emit()\"\n (menuClosed)=\"menuClosed.emit()\">\n <ng-content *ngIf=\"!loading\" />\n <ap-loader\n *ngIf=\"loading\"\n color=\"white\"\n [diameter]=\"16\" />\n <div\n *ngIf=\"locked\"\n class=\"locked-symbol\">\n <ap-symbol\n symbolId=\"premium-star\"\n size=\"micro\" />\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;display:flex;justify-content:center;align-items:center;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;position:relative;transition:border .25s;padding:var(--comp-icon-button-padding)}@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:inline-flex;justify-content:center;align-items:center;width:100%;height:100%;padding:0;margin:0;color:var(--ref-color-grey-60);min-width:calc(var(--comp-icon-button-height) - var(--comp-icon-button-padding) * 2);min-height:calc(var(--comp-icon-button-height) - var(--comp-icon-button-padding) * 2)}ap-icon-button button.icon-button ap-symbol .svg{display:inline-flex!important;justify-content:center;align-items:center}ap-icon-button button.icon-button ap-symbol .svg svg{height:100%;width:100%}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", inputs: ["color", "symbolId", "size"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: LoaderComponent, selector: "ap-loader", inputs: ["color", "diameter"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
79
79
|
}
|
|
80
80
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: IconButtonComponent, decorators: [{
|
|
81
81
|
type: Component,
|
|
@@ -87,7 +87,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImpo
|
|
|
87
87
|
}], color: [{
|
|
88
88
|
type: Input
|
|
89
89
|
}], disabled: [{
|
|
90
|
-
type: Input
|
|
90
|
+
type: Input,
|
|
91
|
+
args: [{
|
|
92
|
+
transform: booleanAttribute,
|
|
93
|
+
}]
|
|
91
94
|
}], menuTrigger: [{
|
|
92
95
|
type: Input
|
|
93
96
|
}], locked: [{
|
|
@@ -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 { LoaderComponent } from '@agorapulse/ui-animations';\nimport { apPremiumStar, SymbolComponent, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport { CommonModule, NgIf } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n ContentChild,\n ElementRef,\n EventEmitter,\n HostListener,\n Input,\n Output,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport { MatMenuModule, MatMenuPanel } from '@angular/material/menu';\n\nexport type ButtonType = 'flat' | 'stroked-transparent' | 'stroked';\nexport type ButtonColor = 'none' | 'blue' | 'red' | 'green';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-icon-button',\n styleUrls: ['./icon-button.component.scss'],\n standalone: true,\n imports: [NgIf, SymbolComponent, CommonModule, LoaderComponent, MatMenuModule],\n templateUrl: './icon-button.component.html',\n encapsulation: ViewEncapsulation.None,\n})\nexport class IconButtonComponent {\n @Input() ariaLabel = '';\n @Input() name = '';\n @Input() color: ButtonColor = 'none';\n @Input() disabled: boolean = false;\n @Input() menuTrigger: MatMenuPanel | null = null;\n\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\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\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 @Output() menuOpened: EventEmitter<void> = new EventEmitter();\n @Output() menuClosed: EventEmitter<void> = new EventEmitter();\n\n @ContentChild(SymbolComponent) symbolComponent!: SymbolComponent;\n\n @ViewChild('button') buttonElement!: ElementRef<HTMLButtonElement>;\n\n private _loading: boolean = false;\n private _locked: boolean = false;\n hostDataTest: string | undefined = undefined;\n focused: boolean = false;\n\n constructor(private symbolRegistry: SymbolRegistry, private elementRef: ElementRef) {\n this.symbolRegistry.registerSymbols([apPremiumStar]);\n this.hostDataTest = this.elementRef.nativeElement.getAttribute('data-test');\n }\n\n onClickHandle($event: MouseEvent): void {\n this.buttonElement.nativeElement.blur();\n this.onClick.emit($event);\n this.onFocus.emit($event);\n }\n\n onBlurHandle($event: FocusEvent): void {\n this.focused = false;\n this.onBlur.emit($event);\n }\n\n onFocusHandle($event: FocusEvent): void {\n this.focused = true;\n this.onFocus.emit($event);\n }\n\n @HostListener('window:keyup.space', ['$event'])\n onSpaceKeyUp(event: KeyboardEvent) {\n if (this.focused) {\n event.preventDefault();\n this.buttonElement.nativeElement.click();\n }\n }\n}\n","<button\n #button\n #trigger=\"matMenuTrigger\"\n class=\"icon-button\"\n type=\"button\"\n [name]=\"name\"\n [matMenuTriggerFor]=\"menuTrigger\"\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)=\"onClickHandle($event)\"\n (blur)=\"onBlurHandle($event)\"\n (focus)=\"onFocusHandle($event)\"\n (menuOpened)=\"menuOpened.emit()\"\n (menuClosed)=\"menuClosed.emit()\">\n <ng-content *ngIf=\"!loading\" />\n <ap-loader\n *ngIf=\"loading\"\n color=\"white\"\n [diameter]=\"16\" />\n <div\n *ngIf=\"locked\"\n class=\"locked-symbol\">\n <ap-symbol\n symbolId=\"premium-star\"\n size=\"micro\" />\n </div>\n</button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;;;;
|
|
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 { LoaderComponent } from '@agorapulse/ui-animations';\nimport { apPremiumStar, SymbolComponent, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport { CommonModule, NgIf } from '@angular/common';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n ContentChild,\n ElementRef,\n EventEmitter,\n HostListener,\n Input,\n Output,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport { MatMenuModule, MatMenuPanel } from '@angular/material/menu';\n\nexport type ButtonType = 'flat' | 'stroked-transparent' | 'stroked';\nexport type ButtonColor = 'none' | 'blue' | 'red' | 'green';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-icon-button',\n styleUrls: ['./icon-button.component.scss'],\n standalone: true,\n imports: [NgIf, SymbolComponent, CommonModule, LoaderComponent, MatMenuModule],\n templateUrl: './icon-button.component.html',\n encapsulation: ViewEncapsulation.None,\n})\nexport class IconButtonComponent {\n @Input() ariaLabel = '';\n @Input() name = '';\n @Input() color: ButtonColor = 'none';\n @Input({\n transform: booleanAttribute,\n }) disabled: boolean = false;\n @Input() menuTrigger: MatMenuPanel | null = null;\n\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\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\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 @Output() menuOpened: EventEmitter<void> = new EventEmitter();\n @Output() menuClosed: EventEmitter<void> = new EventEmitter();\n\n @ContentChild(SymbolComponent) symbolComponent!: SymbolComponent;\n\n @ViewChild('button') buttonElement!: ElementRef<HTMLButtonElement>;\n\n private _loading: boolean = false;\n private _locked: boolean = false;\n hostDataTest: string | undefined = undefined;\n focused: boolean = false;\n\n constructor(private symbolRegistry: SymbolRegistry, private elementRef: ElementRef) {\n this.symbolRegistry.registerSymbols([apPremiumStar]);\n this.hostDataTest = this.elementRef.nativeElement.getAttribute('data-test');\n }\n\n onClickHandle($event: MouseEvent): void {\n this.buttonElement.nativeElement.blur();\n this.onClick.emit($event);\n this.onFocus.emit($event);\n }\n\n onBlurHandle($event: FocusEvent): void {\n this.focused = false;\n this.onBlur.emit($event);\n }\n\n onFocusHandle($event: FocusEvent): void {\n this.focused = true;\n this.onFocus.emit($event);\n }\n\n @HostListener('window:keyup.space', ['$event'])\n onSpaceKeyUp(event: KeyboardEvent) {\n if (this.focused) {\n event.preventDefault();\n this.buttonElement.nativeElement.click();\n }\n }\n}\n","<button\n #button\n #trigger=\"matMenuTrigger\"\n class=\"icon-button\"\n type=\"button\"\n [name]=\"name\"\n [matMenuTriggerFor]=\"menuTrigger\"\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)=\"onClickHandle($event)\"\n (blur)=\"onBlurHandle($event)\"\n (focus)=\"onFocusHandle($event)\"\n (menuOpened)=\"menuOpened.emit()\"\n (menuClosed)=\"menuClosed.emit()\">\n <ng-content *ngIf=\"!loading\" />\n <ap-loader\n *ngIf=\"loading\"\n color=\"white\"\n [diameter]=\"16\" />\n <div\n *ngIf=\"locked\"\n class=\"locked-symbol\">\n <ap-symbol\n symbolId=\"premium-star\"\n size=\"micro\" />\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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"}
|
|
@@ -2,7 +2,7 @@ import { ButtonComponent } from '@agorapulse/ui-components/button';
|
|
|
2
2
|
import { SymbolRegistry, apInformationCircle, apAlertCircle, apRemoveCircle, apCheckCircle, apClose, SymbolComponent } from '@agorapulse/ui-symbol';
|
|
3
3
|
import { NgIf, NgClass } from '@angular/common';
|
|
4
4
|
import * as i0 from '@angular/core';
|
|
5
|
-
import { inject, ElementRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, Input, Output } from '@angular/core';
|
|
5
|
+
import { inject, ElementRef, EventEmitter, booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, Input, Output } from '@angular/core';
|
|
6
6
|
|
|
7
7
|
class InfoboxComponent {
|
|
8
8
|
symbolRegistry = inject(SymbolRegistry);
|
|
@@ -40,7 +40,7 @@ class InfoboxComponent {
|
|
|
40
40
|
this.closed.emit();
|
|
41
41
|
}
|
|
42
42
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: InfoboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
43
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
43
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.10", type: InfoboxComponent, isStandalone: true, selector: "ap-infobox", inputs: { buttonLabel: "buttonLabel", closable: ["closable", "closable", booleanAttribute], title: "title", type: "type", width: "width" }, outputs: { buttonClicked: "buttonClicked", closed: "closed" }, host: { properties: { "class.full-width": "this.fullWidth" } }, ngImport: i0, template: "<div\n class=\"main\"\n [class.info]=\"type === 'info'\"\n [class.warning]=\"type === 'warning'\"\n [class.error]=\"type === 'error'\"\n [class.success]=\"type === 'success'\"\n [class.has-title]=\"!!title\">\n <div class=\"status-banner\"></div>\n <div class=\"wrapper\">\n <div class=\"symbol-content\">\n <div class=\"symbol-wrapper\">\n <ap-symbol\n class=\"status\"\n size=\"micro\"\n [symbolId]=\"symbolIds[type]\" />\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span\n *ngIf=\"title\"\n class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content />\n </span>\n </div>\n <ng-container *ngIf=\"buttonLabel\">\n <ap-button\n name=\"infobox-button\"\n [config]=\"{\n style: 'stroked',\n color: 'grey'\n }\"\n (click)=\"onClickButton()\">\n {{ buttonLabel }}\n </ap-button>\n </ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"closable\">\n <button\n class=\"closable-button\"\n (click)=\"onCloseInfobox()\">\n <svg\n width=\"8\"\n height=\"8\"\n viewBox=\"0 0 8 8\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.3245 0.673336C7.16518 0.514565 6.94943 0.425415 6.7245 0.425415C6.49958 0.425415 6.28383 0.514565 6.12451 0.673336L4.00651 2.79134L1.88584 0.673336C1.72499 0.519607 1.51036 0.434955 1.28788 0.437501C1.0654 0.440048 0.852756 0.529591 0.695472 0.686962C0.538189 0.844333 0.448763 1.05702 0.44634 1.27951C0.443916 1.50199 0.528687 1.71658 0.682505 1.87734L2.79984 3.99534L0.682505 6.114C0.528687 6.27476 0.443916 6.48935 0.44634 6.71183C0.448763 6.93431 0.538189 7.147 0.695472 7.30438C0.852756 7.46175 1.0654 7.55129 1.28788 7.55384C1.51036 7.55638 1.72499 7.47173 1.88584 7.318L4.00317 5.2L6.12117 7.31867C6.28364 7.46307 6.4952 7.53986 6.71247 7.53329C6.92974 7.52671 7.13627 7.43728 7.28972 7.28332C7.44316 7.12936 7.53191 6.92254 7.53776 6.70525C7.5436 6.48796 7.46611 6.27666 7.32117 6.11467L5.20384 3.996L7.32117 1.878C7.48132 1.71867 7.57164 1.50226 7.57226 1.27636C7.57289 1.05045 7.48377 0.833548 7.3245 0.673336Z\"\n fill=\"currentColor\" />\n </svg>\n </button>\n </ng-container>\n </div>\n</div>\n", styles: ["ap-infobox{--comp-icon-size: 24px;container:infobox/inline-size;display:block;width:100%;max-width:100%}ap-infobox .main{display:flex;font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm);align-items:center;color:var(--ref-color-grey-100);padding:var(--comp-infobox-padding-top) var(--comp-infobox-padding-right) var(--comp-infobox-padding-bottom) var(--comp-infobox-padding-left);border-radius:var(--comp-infobox-border-radius);overflow:hidden;font-family:var(--comp-infobox-text-title-font-family);box-sizing:border-box;position:relative;gap:var(--comp-infobox-button-margin-left)}ap-infobox .main .status-banner{position:absolute;left:0;top:0;width:4px;height:100%}ap-infobox .main ap-symbol{align-self:flex-start}ap-infobox .main .symbol-wrapper{margin-top:1px}ap-infobox .main.has-title .symbol-wrapper{margin-top:var(--ref-spacing-xxxs)}ap-infobox .main button.closable-button{border:none;background-color:transparent;height:var(--comp-icon-size);width:var(--comp-icon-size);border-radius:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}ap-infobox .main button.closable-button svg{margin:0;color:var(--ref-color-grey-60)}ap-infobox .main button.closable-button:hover{background-color:#3445631a}ap-infobox .main button.closable-button:hover svg{color:var(--ref-color-grey-80)}ap-infobox .main button.closable-button:active{background-color:#34456333}ap-infobox .main button.closable-button:active svg{color:var(--ref-color-grey-100)}ap-infobox .main .wrapper{display:flex;justify-content:space-between;width:100%;align-items:flex-start;gap:var(--ref-spacing-xxs)}ap-infobox .main .wrapper .symbol-content{display:flex;gap:var(--ref-spacing-xs);align-items:flex-start;flex:1}ap-infobox .main .wrapper .symbol-content .content{display:flex;flex-direction:column;align-items:flex-start;flex:1;justify-content:space-between;gap:var(--ref-spacing-xxs)}ap-infobox .main .wrapper .symbol-content .content ap-button button{width:unset}ap-infobox .main .wrapper .symbol-content .content .texts{display:flex;flex-direction:column;overflow-wrap:anywhere}ap-infobox .main .wrapper .symbol-content .content .texts .title{font-weight:var(--comp-infobox-text-title-weight);font-family:var(--comp-infobox-text-title-font-family);font-size:var(--comp-infobox-text-title-size);line-height:var(--comp-infobox-text-title-line-height)}ap-infobox .main.info{background-color:var(--comp-infobox-info-background-color)}ap-infobox .main.info ap-symbol.status{align-self:baseline;color:var(--comp-infobox-info-icon-color)}ap-infobox .main.info .status-banner{background-color:var(--comp-infobox-info-border-left-color)}ap-infobox .main.warning{background-color:var(--comp-infobox-warning-background-color)}ap-infobox .main.warning ap-symbol.status{color:var(--comp-infobox-warning-icon-color)}ap-infobox .main.warning .status-banner{background-color:var(--comp-infobox-warning-border-left-color)}ap-infobox .main.error{background-color:var(--comp-infobox-error-background-color)}ap-infobox .main.error ap-symbol.status{color:var(--comp-infobox-error-icon-color)}ap-infobox .main.error .status-banner{background-color:var(--comp-infobox-error-border-left-color)}ap-infobox .main.success{background-color:var(--comp-infobox-success-background-color)}ap-infobox .main.success ap-symbol.status{color:var(--comp-infobox-success-icon-color)}ap-infobox .main.success .status-banner{background-color:var(--comp-infobox-success-border-left-color)}@container infobox (min-width: 588px){.main .wrapper{align-items:center!important}.main .wrapper .symbol-wrapper{margin-top:0!important}.main .wrapper .symbol-content{align-items:center!important}.main .wrapper .symbol-content .content{flex-direction:row!important;align-items:center!important}}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "ap-button", inputs: ["ariaLabel", "disabled", "name", "form", "config", "loading", "locked", "menuTrigger", "symbolPosition", "ionicModalEnabled"], outputs: ["menuOpened", "menuClosed", "click", "focus", "blur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
44
44
|
}
|
|
45
45
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: InfoboxComponent, decorators: [{
|
|
46
46
|
type: Component,
|
|
@@ -51,7 +51,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImpo
|
|
|
51
51
|
}], buttonLabel: [{
|
|
52
52
|
type: Input
|
|
53
53
|
}], closable: [{
|
|
54
|
-
type: Input
|
|
54
|
+
type: Input,
|
|
55
|
+
args: [{
|
|
56
|
+
transform: booleanAttribute,
|
|
57
|
+
}]
|
|
55
58
|
}], title: [{
|
|
56
59
|
type: Input
|
|
57
60
|
}], type: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-infobox.mjs","sources":["../../../libs/ui-components/infobox/src/infobox.component.ts","../../../libs/ui-components/infobox/src/infobox.component.html","../../../libs/ui-components/infobox/src/agorapulse-ui-components-infobox.ts"],"sourcesContent":["import { ButtonComponent } from '@agorapulse/ui-components/button';\nimport {\n SymbolComponent,\n SymbolRegistry,\n agorapulseSymbol,\n apAlertCircle,\n apCheckCircle,\n apClose,\n apInformationCircle,\n apRemoveCircle,\n} from '@agorapulse/ui-symbol';\nimport { NgClass, NgIf } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostBinding, Input, Output, ViewEncapsulation, inject } from '@angular/core';\nexport type InfoboxDirection = 'column' | 'row';\nexport type InfoboxWidth = 'fit' | 'full-width';\n\n@Component({\n selector: 'ap-infobox',\n templateUrl: './infobox.component.html',\n styleUrls: ['./infobox.component.scss'],\n standalone: true,\n imports: [SymbolComponent, NgClass, NgIf, ButtonComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class InfoboxComponent {\n private readonly symbolRegistry = inject(SymbolRegistry);\n private readonly elementRef = inject(ElementRef);\n\n @HostBinding('class.full-width') fullWidth: boolean = false;\n\n @Input() buttonLabel: string | undefined = undefined;\n @Input() closable = false;\n @Input() title?: string;\n @Input() type: 'info' | 'warning' | 'error' | 'success' = 'info';\n\n @Input() set width(width: InfoboxWidth) {\n this._width = width;\n this.fullWidth = width === 'full-width';\n }\n get width(): InfoboxWidth {\n return this._width;\n }\n private _width: InfoboxWidth = 'fit';\n\n @Output() buttonClicked = new EventEmitter<void>();\n @Output() closed = new EventEmitter<void>();\n\n displayDirection: 'horizontal' | 'vertical' = 'horizontal';\n\n readonly symbolIds: { [k: string]: agorapulseSymbol } = {\n info: 'information-circle',\n warning: 'alert-circle',\n error: 'remove-circle',\n success: 'check-circle',\n };\n\n constructor() {\n this.symbolRegistry.registerSymbols([apInformationCircle, apAlertCircle, apRemoveCircle, apCheckCircle, apClose]);\n }\n\n onClickButton(): void {\n this.buttonClicked.emit();\n }\n\n onCloseInfobox(): void {\n this.elementRef.nativeElement.remove();\n this.closed.emit();\n }\n}\n","<div\n class=\"main\"\n [class.info]=\"type === 'info'\"\n [class.warning]=\"type === 'warning'\"\n [class.error]=\"type === 'error'\"\n [class.success]=\"type === 'success'\"\n [class.has-title]=\"!!title\">\n <div class=\"status-banner\"></div>\n <div class=\"wrapper\">\n <div class=\"symbol-content\">\n <div class=\"symbol-wrapper\">\n <ap-symbol\n class=\"status\"\n size=\"micro\"\n [symbolId]=\"symbolIds[type]\" />\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span\n *ngIf=\"title\"\n class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content />\n </span>\n </div>\n <ng-container *ngIf=\"buttonLabel\">\n <ap-button\n name=\"infobox-button\"\n [config]=\"{\n style: 'stroked',\n color: 'grey'\n }\"\n (click)=\"onClickButton()\">\n {{ buttonLabel }}\n </ap-button>\n </ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"closable\">\n <button\n class=\"closable-button\"\n (click)=\"onCloseInfobox()\">\n <svg\n width=\"8\"\n height=\"8\"\n viewBox=\"0 0 8 8\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.3245 0.673336C7.16518 0.514565 6.94943 0.425415 6.7245 0.425415C6.49958 0.425415 6.28383 0.514565 6.12451 0.673336L4.00651 2.79134L1.88584 0.673336C1.72499 0.519607 1.51036 0.434955 1.28788 0.437501C1.0654 0.440048 0.852756 0.529591 0.695472 0.686962C0.538189 0.844333 0.448763 1.05702 0.44634 1.27951C0.443916 1.50199 0.528687 1.71658 0.682505 1.87734L2.79984 3.99534L0.682505 6.114C0.528687 6.27476 0.443916 6.48935 0.44634 6.71183C0.448763 6.93431 0.538189 7.147 0.695472 7.30438C0.852756 7.46175 1.0654 7.55129 1.28788 7.55384C1.51036 7.55638 1.72499 7.47173 1.88584 7.318L4.00317 5.2L6.12117 7.31867C6.28364 7.46307 6.4952 7.53986 6.71247 7.53329C6.92974 7.52671 7.13627 7.43728 7.28972 7.28332C7.44316 7.12936 7.53191 6.92254 7.53776 6.70525C7.5436 6.48796 7.46611 6.27666 7.32117 6.11467L5.20384 3.996L7.32117 1.878C7.48132 1.71867 7.57164 1.50226 7.57226 1.27636C7.57289 1.05045 7.48377 0.833548 7.3245 0.673336Z\"\n fill=\"currentColor\" />\n </svg>\n </button>\n </ng-container>\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;MAyBa,gBAAgB,CAAA;AACR,IAAA,cAAc,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;AACxC,IAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IAEhB,SAAS,GAAY,KAAK,CAAC;IAEnD,WAAW,GAAuB,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"agorapulse-ui-components-infobox.mjs","sources":["../../../libs/ui-components/infobox/src/infobox.component.ts","../../../libs/ui-components/infobox/src/infobox.component.html","../../../libs/ui-components/infobox/src/agorapulse-ui-components-infobox.ts"],"sourcesContent":["import { ButtonComponent } from '@agorapulse/ui-components/button';\nimport {\n SymbolComponent,\n SymbolRegistry,\n agorapulseSymbol,\n apAlertCircle,\n apCheckCircle,\n apClose,\n apInformationCircle,\n apRemoveCircle,\n} from '@agorapulse/ui-symbol';\nimport { NgClass, NgIf } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostBinding, Input, Output, ViewEncapsulation, booleanAttribute, inject } from '@angular/core';\nexport type InfoboxDirection = 'column' | 'row';\nexport type InfoboxWidth = 'fit' | 'full-width';\n\n@Component({\n selector: 'ap-infobox',\n templateUrl: './infobox.component.html',\n styleUrls: ['./infobox.component.scss'],\n standalone: true,\n imports: [SymbolComponent, NgClass, NgIf, ButtonComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class InfoboxComponent {\n private readonly symbolRegistry = inject(SymbolRegistry);\n private readonly elementRef = inject(ElementRef);\n\n @HostBinding('class.full-width') fullWidth: boolean = false;\n\n @Input() buttonLabel: string | undefined = undefined;\n @Input({\n transform: booleanAttribute,\n }) closable = false;\n @Input() title?: string;\n @Input() type: 'info' | 'warning' | 'error' | 'success' = 'info';\n\n @Input() set width(width: InfoboxWidth) {\n this._width = width;\n this.fullWidth = width === 'full-width';\n }\n get width(): InfoboxWidth {\n return this._width;\n }\n private _width: InfoboxWidth = 'fit';\n\n @Output() buttonClicked = new EventEmitter<void>();\n @Output() closed = new EventEmitter<void>();\n\n displayDirection: 'horizontal' | 'vertical' = 'horizontal';\n\n readonly symbolIds: { [k: string]: agorapulseSymbol } = {\n info: 'information-circle',\n warning: 'alert-circle',\n error: 'remove-circle',\n success: 'check-circle',\n };\n\n constructor() {\n this.symbolRegistry.registerSymbols([apInformationCircle, apAlertCircle, apRemoveCircle, apCheckCircle, apClose]);\n }\n\n onClickButton(): void {\n this.buttonClicked.emit();\n }\n\n onCloseInfobox(): void {\n this.elementRef.nativeElement.remove();\n this.closed.emit();\n }\n}\n","<div\n class=\"main\"\n [class.info]=\"type === 'info'\"\n [class.warning]=\"type === 'warning'\"\n [class.error]=\"type === 'error'\"\n [class.success]=\"type === 'success'\"\n [class.has-title]=\"!!title\">\n <div class=\"status-banner\"></div>\n <div class=\"wrapper\">\n <div class=\"symbol-content\">\n <div class=\"symbol-wrapper\">\n <ap-symbol\n class=\"status\"\n size=\"micro\"\n [symbolId]=\"symbolIds[type]\" />\n </div>\n <div class=\"content\">\n <div class=\"texts\">\n <span\n *ngIf=\"title\"\n class=\"title\">\n {{ title }}\n </span>\n <span class=\"text\">\n <ng-content />\n </span>\n </div>\n <ng-container *ngIf=\"buttonLabel\">\n <ap-button\n name=\"infobox-button\"\n [config]=\"{\n style: 'stroked',\n color: 'grey'\n }\"\n (click)=\"onClickButton()\">\n {{ buttonLabel }}\n </ap-button>\n </ng-container>\n </div>\n </div>\n <ng-container *ngIf=\"closable\">\n <button\n class=\"closable-button\"\n (click)=\"onCloseInfobox()\">\n <svg\n width=\"8\"\n height=\"8\"\n viewBox=\"0 0 8 8\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M7.3245 0.673336C7.16518 0.514565 6.94943 0.425415 6.7245 0.425415C6.49958 0.425415 6.28383 0.514565 6.12451 0.673336L4.00651 2.79134L1.88584 0.673336C1.72499 0.519607 1.51036 0.434955 1.28788 0.437501C1.0654 0.440048 0.852756 0.529591 0.695472 0.686962C0.538189 0.844333 0.448763 1.05702 0.44634 1.27951C0.443916 1.50199 0.528687 1.71658 0.682505 1.87734L2.79984 3.99534L0.682505 6.114C0.528687 6.27476 0.443916 6.48935 0.44634 6.71183C0.448763 6.93431 0.538189 7.147 0.695472 7.30438C0.852756 7.46175 1.0654 7.55129 1.28788 7.55384C1.51036 7.55638 1.72499 7.47173 1.88584 7.318L4.00317 5.2L6.12117 7.31867C6.28364 7.46307 6.4952 7.53986 6.71247 7.53329C6.92974 7.52671 7.13627 7.43728 7.28972 7.28332C7.44316 7.12936 7.53191 6.92254 7.53776 6.70525C7.5436 6.48796 7.46611 6.27666 7.32117 6.11467L5.20384 3.996L7.32117 1.878C7.48132 1.71867 7.57164 1.50226 7.57226 1.27636C7.57289 1.05045 7.48377 0.833548 7.3245 0.673336Z\"\n fill=\"currentColor\" />\n </svg>\n </button>\n </ng-container>\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { forwardRef, Injectable, inject, Injector, ChangeDetectorRef, NgZone, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, Input, Output } from '@angular/core';
|
|
2
|
+
import { forwardRef, Injectable, inject, Injector, ChangeDetectorRef, NgZone, EventEmitter, booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, Input, Output } from '@angular/core';
|
|
3
3
|
import { CommonModule, NgIf } from '@angular/common';
|
|
4
4
|
import { SymbolComponent } from '@agorapulse/ui-symbol';
|
|
5
5
|
import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
|
|
@@ -266,7 +266,7 @@ class RadioComponent {
|
|
|
266
266
|
`);
|
|
267
267
|
}
|
|
268
268
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: RadioComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
269
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
269
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.10", type: RadioComponent, isStandalone: true, selector: "ap-radio", inputs: { ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], disabled: ["disabled", "disabled", booleanAttribute], labelPosition: "labelPosition", radioId: "radioId", formControlName: "formControlName", value: "value", required: ["required", "required", booleanAttribute], name: "name" }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur" }, providers: [RADIO_VALUE_ACCESSOR], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, static: true }, { propertyName: "labelElement", first: true, predicate: ["label"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"radio-button-container\"\n [class.label-left]=\"labelPosition === 'left'\">\n <input\n #input\n type=\"radio\"\n tabindex=\"0\"\n [attr.id]=\"inputId\"\n [attr.name]=\"name + '-radio-' + radioIndex\"\n [attr.value]=\"value\"\n [attr.aria-checked]=\"checked\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.data-test]=\"hostDataTest ?? name\"\n [checked]=\"checked\"\n [class.disabled]=\"disabled\"\n (change)=\"onChange($event)\"\n (blur)=\"onInputBlur($event)\"\n (focus)=\"onInputFocus($event)\" />\n <div\n class=\"radio-button\"\n [class.disabled]=\"disabled\"\n (click)=\"select($event)\"></div>\n <label\n [for]=\"inputId\"\n (click)=\"select($event)\">\n <ng-content />\n </label>\n</div>\n", styles: ["ap-radio .radio-button-container{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}ap-radio .radio-button-container.label-left{flex-direction:row-reverse}ap-radio .radio-button-container input[type=radio]{transform:scale(0);position:absolute}ap-radio .radio-button-container input[type=radio]:checked~.radio-button{border-color:var(--ref-color-electric-blue-100);box-shadow:inset 0 0 0 3px var(--ref-color-white)}ap-radio .radio-button-container input[type=radio]:checked~.radio-button.disabled{background:var(--ref-color-grey-40);box-shadow:inset 0 0 0 3px var(--ref-color-grey-10)}ap-radio .radio-button-container input[type=radio]:checked:focus~.radio-button{border-color:var(--ref-color-electric-blue-100)}ap-radio .radio-button-container input[type=radio].disabled~.radio-button{pointer-events:none;cursor:default;box-shadow:inset 0 0 0 16px var(--ref-color-grey-10);border-color:var(--ref-color-grey-20)}ap-radio .radio-button-container input[type=radio].disabled~label{pointer-events:none;cursor:default;color:var(--ref-color-grey-60)}ap-radio .radio-button-container input[type=radio]:focus~.radio-button{outline:3px solid var(--ref-color-electric-blue-100);border-color:var(--ref-color-grey-80);outline-offset:1px}ap-radio .radio-button-container .radio-button{width:16px;height:16px;border-radius:100%;border:1px solid var(--ref-color-grey-60);background:var(--ref-color-electric-blue-100);box-shadow:inset 0 0 0 16px var(--ref-color-white);transition:box-shadow var(--comp-radio-transition-duration);flex-shrink:0}ap-radio .radio-button-container .radio-button:hover:not(.disabled){cursor:pointer;border-color:var(--ref-color-grey-80)}ap-radio .radio-button-container label{display:flex;align-items:center;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height);color:var(--ref-color-grey-100)}ap-radio .radio-button-container label:empty{display:none}ap-radio .radio-button-container label.disabled{color:var(--ref-color-grey-60)}ap-radio .radio-button-container label:hover:not(.disabled){cursor:pointer}ap-radio.ng-invalid.ng-dirty .radio-button{border-color:var(--ref-color-red-100)}ap-radio.ng-invalid.ng-dirty .radio-button:hover{border-color:var(--ref-color-red-60)}ap-radio.ng-invalid.ng-dirty input[type=radio]:focus~.radio-button{border-color:var(--ref-color-red-60)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
270
270
|
}
|
|
271
271
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: RadioComponent, decorators: [{
|
|
272
272
|
type: Component,
|
|
@@ -287,7 +287,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImpo
|
|
|
287
287
|
type: Input,
|
|
288
288
|
args: ['aria-describedby']
|
|
289
289
|
}], disabled: [{
|
|
290
|
-
type: Input
|
|
290
|
+
type: Input,
|
|
291
|
+
args: [{
|
|
292
|
+
transform: booleanAttribute,
|
|
293
|
+
}]
|
|
291
294
|
}], labelPosition: [{
|
|
292
295
|
type: Input
|
|
293
296
|
}], radioId: [{
|
|
@@ -303,7 +306,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImpo
|
|
|
303
306
|
required: true,
|
|
304
307
|
}]
|
|
305
308
|
}], required: [{
|
|
306
|
-
type: Input
|
|
309
|
+
type: Input,
|
|
310
|
+
args: [{
|
|
311
|
+
transform: booleanAttribute,
|
|
312
|
+
}]
|
|
307
313
|
}], name: [{
|
|
308
314
|
type: Input
|
|
309
315
|
}], onClick: [{
|