@agorapulse/ui-components 22.0.4 → 22.0.6-beta.1
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/agorapulse-ui-components-22.0.6-beta.1.tgz +0 -0
- package/fesm2022/agorapulse-ui-components-action-dropdown.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-action-dropdown.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-badge.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-badge.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-button.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-button.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-checkbox.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-checkbox.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-close-button.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-close-button.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-counter.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-counter.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-filter-chips-list.mjs +4 -4
- package/fesm2022/agorapulse-ui-components-filter-chips-list.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-form-field.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-form-field.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-form-message.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-form-message.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-icon-button.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-icon-button.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-input-group.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-input-group.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-labels.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-labels.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-legacy-textarea.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-legacy-textarea.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-nav-selector.mjs +16 -16
- package/fesm2022/agorapulse-ui-components-nav-selector.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-radio-button-card.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-radio-button-card.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-radio.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-radio.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-segmented-control.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-segmented-control.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-select.mjs +8 -64
- package/fesm2022/agorapulse-ui-components-select.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-selection-dropdown.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-selection-dropdown.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-split-button.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-split-button.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-status-card.mjs +3 -3
- package/fesm2022/agorapulse-ui-components-status-card.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-status.mjs +3 -3
- package/fesm2022/agorapulse-ui-components-status.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-tabs.mjs +3 -5
- package/fesm2022/agorapulse-ui-components-tabs.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-tag.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-tag.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-toggle.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-toggle.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-tooltip.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-tooltip.mjs.map +1 -1
- package/package.json +1 -1
- package/types/agorapulse-ui-components-select.d.ts +1 -10
- package/types/agorapulse-ui-components-status-card.d.ts +11 -1
- package/types/agorapulse-ui-components-status.d.ts +11 -1
- package/agorapulse-ui-components-22.0.4.tgz +0 -0
|
@@ -123,7 +123,7 @@ class CheckboxComponent {
|
|
|
123
123
|
useExisting: CheckboxComponent,
|
|
124
124
|
multi: true,
|
|
125
125
|
},
|
|
126
|
-
], 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=\"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 [disabled]=\"disabled\"\n [checked]=\"checked\"\n [required]=\"required\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.data-test]=\"name\"\n (click)=\"onValueChange()\" />\n <span\n class=\"checkbox\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (click)=\"onValueChange()\">\n @if (checked) {\n <span class=\"checkmark\">\n <ap-symbol\n symbolId=\"check\"\n
|
|
126
|
+
], 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=\"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 [disabled]=\"disabled\"\n [checked]=\"checked\"\n [required]=\"required\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.data-test]=\"name\"\n (click)=\"onValueChange()\" />\n <span\n class=\"checkbox\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (click)=\"onValueChange()\">\n @if (checked) {\n <!-- No `color`: the symbol falls back to `fill: currentColor`, so the\n check takes `--sys-color-icon-on-color` set on `.checkmark`. -->\n <span class=\"checkmark\">\n <ap-symbol\n symbolId=\"check\"\n [size]=\"10\" />\n </span>\n }\n @if (indeterminate && !checked) {\n <span class=\"indeterminate\"></span>\n }\n </span>\n </div>\n <label\n #label\n [class.disabled]=\"disabled\"\n [for]=\"name\">\n <ng-content />\n </label>\n</div>\n", styles: ["ap-checkbox{display:flex;align-items:center}ap-checkbox.ng-invalid.ng-touched .checkbox-container.required span.checkbox{border-color:var(--sys-color-border-error)!important}ap-checkbox.bold label{font-weight:var(--ref-font-weight-bold)}ap-checkbox.full-width .checkbox{justify-content:space-between;align-items:center;width:100%}ap-checkbox .checkbox{display:flex;align-items:center;gap:var(--sys-spacing-inline-icon-default)}ap-checkbox .checkbox .checkbox-container{display:flex;justify-content:center;align-items:center;max-width:36px;height:fit-content;box-sizing:border-box;position:relative}ap-checkbox .checkbox .checkbox-container:not(.has-label){padding:10px}ap-checkbox .checkbox .checkbox-container.hover:not(.disabled):not(.has-label){border-radius:var(--ref-border-radius-md);background:var(--ref-color-grey-05)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled).hover{background:var(--ref-color-electric-blue-10)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled):active:not(.has-label){background:var(--ref-color-electric-blue-20)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled):active:not(.has-label) span.checkbox{background:var(--sys-color-surface-input-active-clicked)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled) span.checkbox{background:var(--sys-color-surface-input-active);border-color:var(--sys-color-surface-input-active)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled) span.checkbox:hover{border:1px solid var(--sys-color-surface-input-active-hovered);background:var(--sys-color-surface-input-active-hovered)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled) span.checkbox:active{border:1px solid var(--sys-color-surface-input-active-clicked);background:var(--sys-color-surface-input-active-clicked)}ap-checkbox .checkbox .checkbox-container.indeterminate:not(.disabled).hover{background:var(--ref-color-electric-blue-10)}ap-checkbox .checkbox .checkbox-container.indeterminate:not(.disabled) span.checkbox{background:var(--sys-color-surface-input-active);border-color:var(--sys-color-surface-input-active)}ap-checkbox .checkbox .checkbox-container.indeterminate:not(.disabled) span.checkbox:hover{border:1px solid var(--sys-color-surface-input-active-hovered);background:var(--sys-color-surface-input-active-hovered)}ap-checkbox .checkbox .checkbox-container.disabled span.checkbox{border:1px solid var(--sys-color-border-input-disabled);background:var(--sys-color-surface-input-disabled)}ap-checkbox .checkbox .checkbox-container.disabled.checked span.checkbox{background:var(--sys-color-surface-input-active-disabled);border-color:var(--sys-color-surface-input-active-disabled)}ap-checkbox .checkbox .checkbox-container.disabled.indeterminate span.checkbox{background:var(--sys-color-surface-input-active-disabled);border-color:var(--sys-color-surface-input-active-disabled)}ap-checkbox .checkbox .checkbox-container.disabled span.checkbox{pointer-events:none}ap-checkbox .checkbox .checkbox-container input[type=checkbox]{position:absolute;clip:rect(0,0,0,0)}@media(hover:hover){ap-checkbox .checkbox .checkbox-container input[type=checkbox]:focus:not(.disabled)~.checkbox{outline:3px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-checkbox .checkbox .checkbox-container span.checkbox{display:flex;justify-content:center;align-items:center;width:16px;height:16px;min-width:16px;min-height:16px;max-height:16px;max-width:16px;border-radius:var(--sys-radius-inner);border:1px solid var(--sys-color-border-input-default);background:var(--sys-color-surface-input-default);box-sizing:border-box}ap-checkbox .checkbox .checkbox-container span.checkbox:hover{cursor:pointer;border-color:var(--sys-color-border-input-hovered)}ap-checkbox .checkbox .checkbox-container span.checkbox:active{border-color:var(--sys-color-border-input-clicked)}ap-checkbox .checkbox .checkbox-container span.checkbox .checkmark{display:flex;justify-content:center;align-items:center;color:var(--sys-color-icon-on-color)}ap-checkbox .checkbox .checkbox-container span.checkbox .indeterminate{height:1.5px;background:var(--sys-color-icon-on-color);width:8px}ap-checkbox .checkbox 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(--sys-color-text-interactive-default)}ap-checkbox .checkbox label:empty{display:none}ap-checkbox .checkbox label.disabled{color:var(--sys-color-text-interactive-disabled)}ap-checkbox .checkbox label:hover:not(.disabled){cursor:pointer}form.ng-submitted ap-checkbox.ng-invalid span.checkbox{border-color:var(--sys-color-border-error)!important}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
127
127
|
}
|
|
128
128
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
129
129
|
type: Component,
|
|
@@ -134,7 +134,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
134
134
|
useExisting: CheckboxComponent,
|
|
135
135
|
multi: true,
|
|
136
136
|
},
|
|
137
|
-
], encapsulation: ViewEncapsulation.None, template: "<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 [disabled]=\"disabled\"\n [checked]=\"checked\"\n [required]=\"required\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.data-test]=\"name\"\n (click)=\"onValueChange()\" />\n <span\n class=\"checkbox\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (click)=\"onValueChange()\">\n @if (checked) {\n <span class=\"checkmark\">\n <ap-symbol\n symbolId=\"check\"\n
|
|
137
|
+
], encapsulation: ViewEncapsulation.None, template: "<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 [disabled]=\"disabled\"\n [checked]=\"checked\"\n [required]=\"required\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.data-test]=\"name\"\n (click)=\"onValueChange()\" />\n <span\n class=\"checkbox\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (click)=\"onValueChange()\">\n @if (checked) {\n <!-- No `color`: the symbol falls back to `fill: currentColor`, so the\n check takes `--sys-color-icon-on-color` set on `.checkmark`. -->\n <span class=\"checkmark\">\n <ap-symbol\n symbolId=\"check\"\n [size]=\"10\" />\n </span>\n }\n @if (indeterminate && !checked) {\n <span class=\"indeterminate\"></span>\n }\n </span>\n </div>\n <label\n #label\n [class.disabled]=\"disabled\"\n [for]=\"name\">\n <ng-content />\n </label>\n</div>\n", styles: ["ap-checkbox{display:flex;align-items:center}ap-checkbox.ng-invalid.ng-touched .checkbox-container.required span.checkbox{border-color:var(--sys-color-border-error)!important}ap-checkbox.bold label{font-weight:var(--ref-font-weight-bold)}ap-checkbox.full-width .checkbox{justify-content:space-between;align-items:center;width:100%}ap-checkbox .checkbox{display:flex;align-items:center;gap:var(--sys-spacing-inline-icon-default)}ap-checkbox .checkbox .checkbox-container{display:flex;justify-content:center;align-items:center;max-width:36px;height:fit-content;box-sizing:border-box;position:relative}ap-checkbox .checkbox .checkbox-container:not(.has-label){padding:10px}ap-checkbox .checkbox .checkbox-container.hover:not(.disabled):not(.has-label){border-radius:var(--ref-border-radius-md);background:var(--ref-color-grey-05)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled).hover{background:var(--ref-color-electric-blue-10)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled):active:not(.has-label){background:var(--ref-color-electric-blue-20)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled):active:not(.has-label) span.checkbox{background:var(--sys-color-surface-input-active-clicked)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled) span.checkbox{background:var(--sys-color-surface-input-active);border-color:var(--sys-color-surface-input-active)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled) span.checkbox:hover{border:1px solid var(--sys-color-surface-input-active-hovered);background:var(--sys-color-surface-input-active-hovered)}ap-checkbox .checkbox .checkbox-container.checked:not(.disabled) span.checkbox:active{border:1px solid var(--sys-color-surface-input-active-clicked);background:var(--sys-color-surface-input-active-clicked)}ap-checkbox .checkbox .checkbox-container.indeterminate:not(.disabled).hover{background:var(--ref-color-electric-blue-10)}ap-checkbox .checkbox .checkbox-container.indeterminate:not(.disabled) span.checkbox{background:var(--sys-color-surface-input-active);border-color:var(--sys-color-surface-input-active)}ap-checkbox .checkbox .checkbox-container.indeterminate:not(.disabled) span.checkbox:hover{border:1px solid var(--sys-color-surface-input-active-hovered);background:var(--sys-color-surface-input-active-hovered)}ap-checkbox .checkbox .checkbox-container.disabled span.checkbox{border:1px solid var(--sys-color-border-input-disabled);background:var(--sys-color-surface-input-disabled)}ap-checkbox .checkbox .checkbox-container.disabled.checked span.checkbox{background:var(--sys-color-surface-input-active-disabled);border-color:var(--sys-color-surface-input-active-disabled)}ap-checkbox .checkbox .checkbox-container.disabled.indeterminate span.checkbox{background:var(--sys-color-surface-input-active-disabled);border-color:var(--sys-color-surface-input-active-disabled)}ap-checkbox .checkbox .checkbox-container.disabled span.checkbox{pointer-events:none}ap-checkbox .checkbox .checkbox-container input[type=checkbox]{position:absolute;clip:rect(0,0,0,0)}@media(hover:hover){ap-checkbox .checkbox .checkbox-container input[type=checkbox]:focus:not(.disabled)~.checkbox{outline:3px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-checkbox .checkbox .checkbox-container span.checkbox{display:flex;justify-content:center;align-items:center;width:16px;height:16px;min-width:16px;min-height:16px;max-height:16px;max-width:16px;border-radius:var(--sys-radius-inner);border:1px solid var(--sys-color-border-input-default);background:var(--sys-color-surface-input-default);box-sizing:border-box}ap-checkbox .checkbox .checkbox-container span.checkbox:hover{cursor:pointer;border-color:var(--sys-color-border-input-hovered)}ap-checkbox .checkbox .checkbox-container span.checkbox:active{border-color:var(--sys-color-border-input-clicked)}ap-checkbox .checkbox .checkbox-container span.checkbox .checkmark{display:flex;justify-content:center;align-items:center;color:var(--sys-color-icon-on-color)}ap-checkbox .checkbox .checkbox-container span.checkbox .indeterminate{height:1.5px;background:var(--sys-color-icon-on-color);width:8px}ap-checkbox .checkbox 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(--sys-color-text-interactive-default)}ap-checkbox .checkbox label:empty{display:none}ap-checkbox .checkbox label.disabled{color:var(--sys-color-text-interactive-disabled)}ap-checkbox .checkbox label:hover:not(.disabled){cursor:pointer}form.ng-submitted ap-checkbox.ng-invalid span.checkbox{border-color:var(--sys-color-border-error)!important}\n"] }]
|
|
138
138
|
}], propDecorators: { inputElement: [{
|
|
139
139
|
type: ViewChild,
|
|
140
140
|
args: ['input', { static: true }]
|
|
@@ -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 { apCheck, SymbolComponent, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport {\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 { ControlValueAccessor, 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 imports: [SymbolComponent],\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?: string;\n @Input('aria-labelledby') ariaLabelledby?: string;\n @Input('aria-describedby') ariaDescribedby?: string;\n @Input({\n transform: booleanAttribute,\n })\n disabled = false;\n @Input({\n transform: booleanAttribute,\n })\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 })\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([apCheck]);\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() {\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 [disabled]=\"disabled\"\n [checked]=\"checked\"\n [required]=\"required\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.data-test]=\"name\"\n (click)=\"onValueChange()\" />\n <span\n class=\"checkbox\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (click)=\"onValueChange()\">\n @if (checked) {\n <span class=\"checkmark\">\n <ap-symbol\n symbolId=\"check\"\n color=\"white\"\n [size]=\"10\" />\n </span>\n }\n @if (indeterminate && !checked) {\n <span class=\"indeterminate\"></span>\n }\n </span>\n </div>\n <label\n #label\n [class.disabled]=\"disabled\"\n [for]=\"name\">\n <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 { apCheck, SymbolComponent, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport {\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 { ControlValueAccessor, 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 imports: [SymbolComponent],\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?: string;\n @Input('aria-labelledby') ariaLabelledby?: string;\n @Input('aria-describedby') ariaDescribedby?: string;\n @Input({\n transform: booleanAttribute,\n })\n disabled = false;\n @Input({\n transform: booleanAttribute,\n })\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 })\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([apCheck]);\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() {\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 [disabled]=\"disabled\"\n [checked]=\"checked\"\n [required]=\"required\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.data-test]=\"name\"\n (click)=\"onValueChange()\" />\n <span\n class=\"checkbox\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (click)=\"onValueChange()\">\n @if (checked) {\n <!-- No `color`: the symbol falls back to `fill: currentColor`, so the\n check takes `--sys-color-icon-on-color` set on `.checkmark`. -->\n <span class=\"checkmark\">\n <ap-symbol\n symbolId=\"check\"\n [size]=\"10\" />\n </span>\n }\n @if (indeterminate && !checked) {\n <span class=\"indeterminate\"></span>\n }\n </span>\n </div>\n <label\n #label\n [class.disabled]=\"disabled\"\n [for]=\"name\">\n <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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"}
|
|
@@ -15,11 +15,11 @@ class CloseButtonComponent {
|
|
|
15
15
|
this.closed.emit(event);
|
|
16
16
|
}
|
|
17
17
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CloseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
18
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CloseButtonComponent, isStandalone: true, selector: "ap-close-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, dataTest: { classPropertyName: "dataTest", publicName: "dataTest", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, providers: [withSymbols(apClose)], ngImport: i0, template: "<button\n class=\"close-button\"\n type=\"button\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.data-test]=\"dataTest()\"\n [disabled]=\"disabled()\"\n (click)=\"onClick($event)\">\n <ap-symbol\n symbolId=\"close\"\n size=\"xs\"
|
|
18
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CloseButtonComponent, isStandalone: true, selector: "ap-close-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, dataTest: { classPropertyName: "dataTest", publicName: "dataTest", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, providers: [withSymbols(apClose)], ngImport: i0, template: "<button\n class=\"close-button\"\n type=\"button\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.data-test]=\"dataTest()\"\n [disabled]=\"disabled()\"\n (click)=\"onClick($event)\">\n <!-- No `color`: the symbol falls back to `fill: currentColor`, so the icon takes the\n CSS colour set on the host below, and callers can override it in context. -->\n <ap-symbol\n symbolId=\"close\"\n size=\"xs\" />\n</button>\n", styles: ["ap-close-button{display:flex;width:var(--comp-close-button-size);max-width:var(--comp-close-button-size);height:var(--comp-close-button-size);max-height:var(--comp-close-button-size);color:var(--sys-color-icon-default)}ap-close-button[disabled]{pointer-events:none}ap-close-button button.close-button{color:inherit;margin:0;display:flex;justify-content:center;align-items:center;width:var(--comp-close-button-size);max-width:var(--comp-close-button-size);height:var(--comp-close-button-size);max-height:var(--comp-close-button-size);border-radius:50%;background:transparent;border:none;position:relative;transition:border .25s;padding:var(--comp-close-button-padding);outline:none}@media(hover:hover){ap-close-button button.close-button:focus:not(.disabled):not(:active){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-close-button button.close-button:hover{cursor:pointer;background:var(--comp-close-button-hover-background)}ap-close-button button.close-button:active{background:var(--comp-close-button-active-background);outline:none}ap-close-button button.close-button:focus:active{outline:none}ap-close-button button.close-button:disabled{cursor:default;pointer-events:none}ap-close-button button.close-button:disabled ap-symbol{color:var(--ref-color-grey-20)}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
19
19
|
}
|
|
20
20
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CloseButtonComponent, decorators: [{
|
|
21
21
|
type: Component,
|
|
22
|
-
args: [{ selector: 'ap-close-button', imports: [SymbolComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [withSymbols(apClose)], template: "<button\n class=\"close-button\"\n type=\"button\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.data-test]=\"dataTest()\"\n [disabled]=\"disabled()\"\n (click)=\"onClick($event)\">\n <ap-symbol\n symbolId=\"close\"\n size=\"xs\"
|
|
22
|
+
args: [{ selector: 'ap-close-button', imports: [SymbolComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [withSymbols(apClose)], template: "<button\n class=\"close-button\"\n type=\"button\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.data-test]=\"dataTest()\"\n [disabled]=\"disabled()\"\n (click)=\"onClick($event)\">\n <!-- No `color`: the symbol falls back to `fill: currentColor`, so the icon takes the\n CSS colour set on the host below, and callers can override it in context. -->\n <ap-symbol\n symbolId=\"close\"\n size=\"xs\" />\n</button>\n", styles: ["ap-close-button{display:flex;width:var(--comp-close-button-size);max-width:var(--comp-close-button-size);height:var(--comp-close-button-size);max-height:var(--comp-close-button-size);color:var(--sys-color-icon-default)}ap-close-button[disabled]{pointer-events:none}ap-close-button button.close-button{color:inherit;margin:0;display:flex;justify-content:center;align-items:center;width:var(--comp-close-button-size);max-width:var(--comp-close-button-size);height:var(--comp-close-button-size);max-height:var(--comp-close-button-size);border-radius:50%;background:transparent;border:none;position:relative;transition:border .25s;padding:var(--comp-close-button-padding);outline:none}@media(hover:hover){ap-close-button button.close-button:focus:not(.disabled):not(:active){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-close-button button.close-button:hover{cursor:pointer;background:var(--comp-close-button-hover-background)}ap-close-button button.close-button:active{background:var(--comp-close-button-active-background);outline:none}ap-close-button button.close-button:focus:active{outline:none}ap-close-button button.close-button:disabled{cursor:default;pointer-events:none}ap-close-button button.close-button:disabled ap-symbol{color:var(--ref-color-grey-20)}\n"] }]
|
|
23
23
|
}], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], dataTest: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataTest", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
24
24
|
|
|
25
25
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-close-button.mjs","sources":["../../../libs/ui-components/close-button/src/close-button.component.ts","../../../libs/ui-components/close-button/src/close-button.component.html","../../../libs/ui-components/close-button/src/agorapulse-ui-components-close-button.ts"],"sourcesContent":["import { apClose, SymbolComponent, withSymbols } from '@agorapulse/ui-symbol';\nimport { ChangeDetectionStrategy, Component, input, output, ViewEncapsulation } from '@angular/core';\n\n@Component({\n selector: 'ap-close-button',\n imports: [SymbolComponent],\n templateUrl: './close-button.component.html',\n styleUrls: ['./close-button.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n providers: [withSymbols(apClose)],\n})\nexport class CloseButtonComponent {\n disabled = input<boolean>(false);\n ariaLabel = input<string>('close');\n /** @deprecated Use ariaLabel instead */\n dataTest = input<string>('close-button');\n\n closed = output<MouseEvent>();\n\n onClick(event: MouseEvent): void {\n this.closed.emit(event);\n }\n}\n","<button\n class=\"close-button\"\n type=\"button\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.data-test]=\"dataTest()\"\n [disabled]=\"disabled()\"\n (click)=\"onClick($event)\">\n <ap-symbol\n symbolId=\"close\"\n size=\"xs\"
|
|
1
|
+
{"version":3,"file":"agorapulse-ui-components-close-button.mjs","sources":["../../../libs/ui-components/close-button/src/close-button.component.ts","../../../libs/ui-components/close-button/src/close-button.component.html","../../../libs/ui-components/close-button/src/agorapulse-ui-components-close-button.ts"],"sourcesContent":["import { apClose, SymbolComponent, withSymbols } from '@agorapulse/ui-symbol';\nimport { ChangeDetectionStrategy, Component, input, output, ViewEncapsulation } from '@angular/core';\n\n@Component({\n selector: 'ap-close-button',\n imports: [SymbolComponent],\n templateUrl: './close-button.component.html',\n styleUrls: ['./close-button.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n providers: [withSymbols(apClose)],\n})\nexport class CloseButtonComponent {\n disabled = input<boolean>(false);\n ariaLabel = input<string>('close');\n /** @deprecated Use ariaLabel instead */\n dataTest = input<string>('close-button');\n\n closed = output<MouseEvent>();\n\n onClick(event: MouseEvent): void {\n this.closed.emit(event);\n }\n}\n","<button\n class=\"close-button\"\n type=\"button\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.data-test]=\"dataTest()\"\n [disabled]=\"disabled()\"\n (click)=\"onClick($event)\">\n <!-- No `color`: the symbol falls back to `fill: currentColor`, so the icon takes the\n CSS colour set on the host below, and callers can override it in context. -->\n <ap-symbol\n symbolId=\"close\"\n size=\"xs\" />\n</button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;MAYa,oBAAoB,CAAA;IAC7B,QAAQ,GAAG,KAAK,CAAU,KAAK;iFAAC;IAChC,SAAS,GAAG,KAAK,CAAS,OAAO;kFAAC;;IAElC,QAAQ,GAAG,KAAK,CAAS,cAAc;iFAAC;IAExC,MAAM,GAAG,MAAM,EAAc;AAE7B,IAAA,OAAO,CAAC,KAAiB,EAAA;AACrB,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;IAC3B;uGAVS,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAApB,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,SAAA,EAFlB,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECVrC,2cAaA,EAAA,MAAA,EAAA,CAAA,gxCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDRc,eAAe,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,OAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAOhB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAThC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,WAClB,CAAC,eAAe,CAAC,EAAA,eAAA,EAGT,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,SAAA,EAC1B,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,EAAA,QAAA,EAAA,2cAAA,EAAA,MAAA,EAAA,CAAA,gxCAAA,CAAA,EAAA;;;AEVrC;;AAEG;;;;"}
|
|
@@ -25,14 +25,14 @@ class CounterComponent {
|
|
|
25
25
|
}, /* @ts-ignore */
|
|
26
26
|
...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
|
|
27
27
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CounterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
28
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CounterComponent, isStandalone: true, selector: "ap-counter", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, notif: { classPropertyName: "notif", publicName: "notif", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.role": "role()" } }, ngImport: i0, template: '<ng-content />', isInline: true, styles: ["ap-counter{display:flex;align-items:center;justify-content:center;width:fit-content;border-radius:
|
|
28
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CounterComponent, isStandalone: true, selector: "ap-counter", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, notif: { classPropertyName: "notif", publicName: "notif", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.role": "role()" } }, ngImport: i0, template: '<ng-content />', isInline: true, styles: ["ap-counter{display:flex;align-items:center;justify-content:center;width:fit-content;border-radius:2px;padding:0 2px;box-sizing:border-box}ap-counter.normal{font-family:var(--sys-text-style-caption-bold-font-family);font-size:var(--sys-text-style-caption-bold-size);font-weight:var(--sys-text-style-caption-bold-weight);line-height:var(--sys-text-style-caption-bold-line-height);height:var(--ref-font-line-height-xs);max-height:var(--ref-font-line-height-xs)}ap-counter.big{font-family:var(--sys-text-style-body-bold-font-family);font-size:var(--sys-text-style-body-bold-size);font-weight:var(--sys-text-style-body-bold-weight);line-height:var(--sys-text-style-body-bold-line-height);height:var(--ref-font-line-height-sm);max-height:var(--ref-font-line-height-sm)}ap-counter.blue{color:var(--sys-color-text-information)}ap-counter.blue.bg{background-color:var(--sys-color-surface-information)}ap-counter.orange{color:var(--sys-color-text-notification)}ap-counter.orange.bg{color:var(--sys-color-text-on-color);background-color:var(--sys-color-surface-notification)}ap-counter.grey{color:var(--sys-color-text-default)}ap-counter.grey.bg{background-color:var(--sys-color-surface-tertiary)}ap-counter.notif{padding:0 4px;border-radius:var(--ref-font-line-height-xs);font-family:var(--sys-text-style-caption-bold-font-family);font-size:var(--sys-text-style-caption-bold-size);font-weight:var(--sys-text-style-caption-bold-weight);line-height:var(--sys-text-style-caption-bold-line-height);min-width:var(--ref-font-line-height-xs);height:var(--ref-font-line-height-xs);color:var(--sys-color-text-on-color);background-color:var(--sys-color-surface-notification)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
29
29
|
}
|
|
30
30
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CounterComponent, decorators: [{
|
|
31
31
|
type: Component,
|
|
32
32
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-counter', standalone: true, template: '<ng-content />', encapsulation: ViewEncapsulation.None, host: {
|
|
33
33
|
'[class]': 'hostClasses()',
|
|
34
34
|
'[attr.role]': 'role()',
|
|
35
|
-
}, styles: ["ap-counter{display:flex;align-items:center;justify-content:center;width:fit-content;border-radius:
|
|
35
|
+
}, styles: ["ap-counter{display:flex;align-items:center;justify-content:center;width:fit-content;border-radius:2px;padding:0 2px;box-sizing:border-box}ap-counter.normal{font-family:var(--sys-text-style-caption-bold-font-family);font-size:var(--sys-text-style-caption-bold-size);font-weight:var(--sys-text-style-caption-bold-weight);line-height:var(--sys-text-style-caption-bold-line-height);height:var(--ref-font-line-height-xs);max-height:var(--ref-font-line-height-xs)}ap-counter.big{font-family:var(--sys-text-style-body-bold-font-family);font-size:var(--sys-text-style-body-bold-size);font-weight:var(--sys-text-style-body-bold-weight);line-height:var(--sys-text-style-body-bold-line-height);height:var(--ref-font-line-height-sm);max-height:var(--ref-font-line-height-sm)}ap-counter.blue{color:var(--sys-color-text-information)}ap-counter.blue.bg{background-color:var(--sys-color-surface-information)}ap-counter.orange{color:var(--sys-color-text-notification)}ap-counter.orange.bg{color:var(--sys-color-text-on-color);background-color:var(--sys-color-surface-notification)}ap-counter.grey{color:var(--sys-color-text-default)}ap-counter.grey.bg{background-color:var(--sys-color-surface-tertiary)}ap-counter.notif{padding:0 4px;border-radius:var(--ref-font-line-height-xs);font-family:var(--sys-text-style-caption-bold-font-family);font-size:var(--sys-text-style-caption-bold-size);font-weight:var(--sys-text-style-caption-bold-weight);line-height:var(--sys-text-style-caption-bold-line-height);min-width:var(--ref-font-line-height-xs);height:var(--ref-font-line-height-xs);color:var(--sys-color-text-on-color);background-color:var(--sys-color-surface-notification)}\n"] }]
|
|
36
36
|
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], notif: [{ type: i0.Input, args: [{ isSignal: true, alias: "notif", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }] } });
|
|
37
37
|
|
|
38
38
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-counter.mjs","sources":["../../../libs/ui-components/counter/src/counter.component.ts","../../../libs/ui-components/counter/src/agorapulse-ui-components-counter.ts"],"sourcesContent":["import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';\n\nexport type CounterColor = 'blue' | 'orange' | 'grey';\nexport type CounterSize = 'big' | 'normal';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-counter',\n standalone: true,\n template: '<ng-content />',\n styleUrls: ['./counter.component.scss'],\n encapsulation: ViewEncapsulation.None,\n host: {\n '[class]': 'hostClasses()',\n '[attr.role]': 'role()',\n },\n})\nexport class CounterComponent {\n color = input<CounterColor>('orange');\n size = input<CounterSize>('normal');\n notif = input(false, { transform: booleanAttribute });\n background = input(true, { transform: booleanAttribute });\n role = input('marquee');\n\n protected hostClasses = computed(() => {\n const classes: string[] = [];\n\n if (!this.notif()) {\n classes.push(this.color(), this.size());\n } else {\n classes.push('notif');\n }\n\n if (this.background()) {\n classes.push('bg');\n }\n\n return classes;\n });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;MAiBa,gBAAgB,CAAA;IACzB,KAAK,GAAG,KAAK,CAAe,QAAQ;8EAAC;IACrC,IAAI,GAAG,KAAK,CAAc,QAAQ;6EAAC;IACnC,KAAK,GAAG,KAAK,CAAC,KAAK,6EAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;IACrD,UAAU,GAAG,KAAK,CAAC,IAAI,kFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;IACzD,IAAI,GAAG,KAAK,CAAC,SAAS;6EAAC;AAEb,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAK;QAClC,MAAM,OAAO,GAAa,EAAE;AAE5B,QAAA,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE;AACf,YAAA,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;QAC3C;aAAO;AACH,YAAA,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;QACzB;AAEA,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE;AACnB,YAAA,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;QACtB;AAEA,QAAA,OAAO,OAAO;IAClB,CAAC;oFAAC;uGArBO,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,8vBARf,gBAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"agorapulse-ui-components-counter.mjs","sources":["../../../libs/ui-components/counter/src/counter.component.ts","../../../libs/ui-components/counter/src/agorapulse-ui-components-counter.ts"],"sourcesContent":["import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';\n\nexport type CounterColor = 'blue' | 'orange' | 'grey';\nexport type CounterSize = 'big' | 'normal';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-counter',\n standalone: true,\n template: '<ng-content />',\n styleUrls: ['./counter.component.scss'],\n encapsulation: ViewEncapsulation.None,\n host: {\n '[class]': 'hostClasses()',\n '[attr.role]': 'role()',\n },\n})\nexport class CounterComponent {\n color = input<CounterColor>('orange');\n size = input<CounterSize>('normal');\n notif = input(false, { transform: booleanAttribute });\n background = input(true, { transform: booleanAttribute });\n role = input('marquee');\n\n protected hostClasses = computed(() => {\n const classes: string[] = [];\n\n if (!this.notif()) {\n classes.push(this.color(), this.size());\n } else {\n classes.push('notif');\n }\n\n if (this.background()) {\n classes.push('bg');\n }\n\n return classes;\n });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;MAiBa,gBAAgB,CAAA;IACzB,KAAK,GAAG,KAAK,CAAe,QAAQ;8EAAC;IACrC,IAAI,GAAG,KAAK,CAAc,QAAQ;6EAAC;IACnC,KAAK,GAAG,KAAK,CAAC,KAAK,6EAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;IACrD,UAAU,GAAG,KAAK,CAAC,IAAI,kFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;IACzD,IAAI,GAAG,KAAK,CAAC,SAAS;6EAAC;AAEb,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAK;QAClC,MAAM,OAAO,GAAa,EAAE;AAE5B,QAAA,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE;AACf,YAAA,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;QAC3C;aAAO;AACH,YAAA,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;QACzB;AAEA,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE;AACnB,YAAA,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;QACtB;AAEA,QAAA,OAAO,OAAO;IAClB,CAAC;oFAAC;uGArBO,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,8vBARf,gBAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,2nDAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAQjB,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAZ5B,SAAS;AACW,YAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,YAAY,EAAA,UAAA,EACV,IAAI,EAAA,QAAA,EACN,gBAAgB,EAAA,aAAA,EAEX,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACF,wBAAA,SAAS,EAAE,eAAe;AAC1B,wBAAA,aAAa,EAAE,QAAQ;AAC1B,qBAAA,EAAA,MAAA,EAAA,CAAA,2nDAAA,CAAA,EAAA;;;ACfL;;AAEG;;;;"}
|
|
@@ -22,7 +22,7 @@ class FilterChipComponent {
|
|
|
22
22
|
avatar = input(/* @ts-ignore */
|
|
23
23
|
...(ngDevMode ? [undefined, { debugName: "avatar" }] : /* istanbul ignore next */ []));
|
|
24
24
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FilterChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
25
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FilterChipComponent, isStandalone: true, selector: "button[ap-filter-chip]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: true, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, properties: { "disabled": "disabled() || null" }, classAttribute: "filter-chip" }, ngImport: i0, template: "@if (symbolId()) {\n <span class=\"filter-chip-icon\">\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId()\" />\n </span>\n}\n@if (avatar(); as avatar) {\n <ap-avatar\n class=\"filter-chip-avatar\"\n [username]=\"avatar.username ?? ''\"\n [profilePicture]=\"avatar.profilePicture\"\n [network]=\"avatar.network\"\n [showInitials]=\"true\"\n [size]=\"16\" />\n}\n<span\n class=\"filter-chip-label\"\n [apTooltip]=\"label()\"\n [apTooltipTruncatedTextOnly]=\"true\"\n [apTooltipDisabled]=\"!!disabledTooltip()\">\n {{ label() }}\n</span>\n", styles: [":host{display:inline-flex;align-items:center;gap:var(--
|
|
25
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FilterChipComponent, isStandalone: true, selector: "button[ap-filter-chip]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: true, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, properties: { "disabled": "disabled() || null" }, classAttribute: "filter-chip" }, ngImport: i0, template: "@if (symbolId()) {\n <span class=\"filter-chip-icon\">\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId()\" />\n </span>\n}\n@if (avatar(); as avatar) {\n <ap-avatar\n class=\"filter-chip-avatar\"\n [username]=\"avatar.username ?? ''\"\n [profilePicture]=\"avatar.profilePicture\"\n [network]=\"avatar.network\"\n [showInitials]=\"true\"\n [size]=\"16\" />\n}\n<span\n class=\"filter-chip-label\"\n [apTooltip]=\"label()\"\n [apTooltipTruncatedTextOnly]=\"true\"\n [apTooltipDisabled]=\"!!disabledTooltip()\">\n {{ label() }}\n</span>\n", styles: [":host{display:inline-flex;align-items:center;gap:var(--sys-spacing-inline-icon-small);height:var(--sys-height-chip);max-width:200px;padding:0 var(--sys-spacing-container-sm);border-radius:var(--sys-height-chip);border:1px solid var(--sys-color-border-interactive-default);background-color:var(--sys-color-surface-default);cursor:pointer;overflow:hidden;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(--sys-color-text-interactive-default);transition:border-color .15s ease}:host .filter-chip-icon{color:var(--sys-color-icon-interactive-default)}:host:hover:not([disabled]){border-color:var(--sys-color-border-interactive-hovered)}:host:active:not([disabled]){border-color:var(--sys-color-border-interactive-clicked)}:host:focus-visible{outline:none;border-color:var(--sys-color-border-interactive-hovered);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host[disabled]{cursor:default;border-color:var(--sys-color-border-interactive-disabled);color:var(--sys-color-text-interactive-disabled)}:host[disabled] .filter-chip-icon{color:var(--sys-color-icon-interactive-disabled)}:host[aria-selected=true]{border-color:var(--sys-color-border-interactive-active);color:var(--sys-color-text-interactive-active);font-weight:var(--sys-text-style-body-bold-weight)}:host[aria-selected=true] .filter-chip-icon{color:var(--sys-color-icon-interactive-active)}:host[aria-selected=true]:hover:not([disabled]){border-color:var(--sys-color-border-interactive-active-hovered)}:host[aria-selected=true]:active:not([disabled]){border-color:var(--sys-color-border-interactive-active-clicked)}:host[aria-selected=true]:focus-visible{border-color:var(--sys-color-border-interactive-active-hovered);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host[aria-selected=true][disabled]{border-color:var(--sys-color-border-interactive-active-disabled);color:var(--sys-color-text-interactive-active-disabled)}:host[aria-selected=true][disabled] .filter-chip-icon{color:var(--sys-color-icon-interactive-active-disabled)}.filter-chip-icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px}.filter-chip-avatar{flex-shrink:0}.filter-chip-label{flex:1 0 0;min-width:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
26
26
|
}
|
|
27
27
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FilterChipComponent, decorators: [{
|
|
28
28
|
type: Component,
|
|
@@ -30,7 +30,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
30
30
|
type: 'button',
|
|
31
31
|
class: 'filter-chip',
|
|
32
32
|
'[disabled]': 'disabled() || null',
|
|
33
|
-
}, template: "@if (symbolId()) {\n <span class=\"filter-chip-icon\">\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId()\" />\n </span>\n}\n@if (avatar(); as avatar) {\n <ap-avatar\n class=\"filter-chip-avatar\"\n [username]=\"avatar.username ?? ''\"\n [profilePicture]=\"avatar.profilePicture\"\n [network]=\"avatar.network\"\n [showInitials]=\"true\"\n [size]=\"16\" />\n}\n<span\n class=\"filter-chip-label\"\n [apTooltip]=\"label()\"\n [apTooltipTruncatedTextOnly]=\"true\"\n [apTooltipDisabled]=\"!!disabledTooltip()\">\n {{ label() }}\n</span>\n", styles: [":host{display:inline-flex;align-items:center;gap:var(--
|
|
33
|
+
}, template: "@if (symbolId()) {\n <span class=\"filter-chip-icon\">\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId()\" />\n </span>\n}\n@if (avatar(); as avatar) {\n <ap-avatar\n class=\"filter-chip-avatar\"\n [username]=\"avatar.username ?? ''\"\n [profilePicture]=\"avatar.profilePicture\"\n [network]=\"avatar.network\"\n [showInitials]=\"true\"\n [size]=\"16\" />\n}\n<span\n class=\"filter-chip-label\"\n [apTooltip]=\"label()\"\n [apTooltipTruncatedTextOnly]=\"true\"\n [apTooltipDisabled]=\"!!disabledTooltip()\">\n {{ label() }}\n</span>\n", styles: [":host{display:inline-flex;align-items:center;gap:var(--sys-spacing-inline-icon-small);height:var(--sys-height-chip);max-width:200px;padding:0 var(--sys-spacing-container-sm);border-radius:var(--sys-height-chip);border:1px solid var(--sys-color-border-interactive-default);background-color:var(--sys-color-surface-default);cursor:pointer;overflow:hidden;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(--sys-color-text-interactive-default);transition:border-color .15s ease}:host .filter-chip-icon{color:var(--sys-color-icon-interactive-default)}:host:hover:not([disabled]){border-color:var(--sys-color-border-interactive-hovered)}:host:active:not([disabled]){border-color:var(--sys-color-border-interactive-clicked)}:host:focus-visible{outline:none;border-color:var(--sys-color-border-interactive-hovered);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host[disabled]{cursor:default;border-color:var(--sys-color-border-interactive-disabled);color:var(--sys-color-text-interactive-disabled)}:host[disabled] .filter-chip-icon{color:var(--sys-color-icon-interactive-disabled)}:host[aria-selected=true]{border-color:var(--sys-color-border-interactive-active);color:var(--sys-color-text-interactive-active);font-weight:var(--sys-text-style-body-bold-weight)}:host[aria-selected=true] .filter-chip-icon{color:var(--sys-color-icon-interactive-active)}:host[aria-selected=true]:hover:not([disabled]){border-color:var(--sys-color-border-interactive-active-hovered)}:host[aria-selected=true]:active:not([disabled]){border-color:var(--sys-color-border-interactive-active-clicked)}:host[aria-selected=true]:focus-visible{border-color:var(--sys-color-border-interactive-active-hovered);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host[aria-selected=true][disabled]{border-color:var(--sys-color-border-interactive-active-disabled);color:var(--sys-color-text-interactive-active-disabled)}:host[aria-selected=true][disabled] .filter-chip-icon{color:var(--sys-color-icon-interactive-active-disabled)}.filter-chip-icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px}.filter-chip-avatar{flex-shrink:0}.filter-chip-label{flex:1 0 0;min-width:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}\n"] }]
|
|
34
34
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], disabledTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledTooltip", required: false }] }], symbolId: [{ type: i0.Input, args: [{ isSignal: true, alias: "symbolId", required: false }] }], avatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatar", required: false }] }] } });
|
|
35
35
|
|
|
36
36
|
const AP_FILTER_CHIPS_LIST_VALIDATOR = {
|
|
@@ -125,11 +125,11 @@ class FilterChipsListComponent {
|
|
|
125
125
|
return typeof item.value === 'object' ? '' : String(item.value);
|
|
126
126
|
}
|
|
127
127
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FilterChipsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
128
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FilterChipsListComponent, isStandalone: true, selector: "ap-filter-chips-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [AP_FILTER_CHIPS_LIST_VALIDATOR], hostDirectives: [{ directive: i1.NgxControlValueAccessor }], ngImport: i0, template: "<div class=\"filter-chips-list\"\n cdkListbox\n cdkListboxOrientation=\"horizontal\"\n [cdkListboxValue]=\"cva.value$()\"\n [cdkListboxMultiple]=\"multiple()\"\n [cdkListboxDisabled]=\"isDisabled()\"\n [cdkListboxCompareWith]=\"compareWith()\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-label]=\"ariaLabel()\"\n (cdkListboxValueChange)=\"onListboxChange($event)\">\n @for (item of viewItems(); track item.source) {\n <button\n ap-filter-chip\n type=\"button\"\n [cdkOption]=\"item.modelValue\"\n [cdkOptionDisabled]=\"item.disabled\"\n [disabled]=\"item.disabled\"\n [apTooltip]=\"item.disabledTooltip ?? null\"\n [apTooltipDisabled]=\"!item.disabled || !item.disabledTooltip\"\n [label]=\"item.label\"\n [symbolId]=\"item.symbolId\"\n [avatar]=\"item.avatar\"\n [disabledTooltip]=\"item.disabledTooltip\"></button>\n }\n</div>\n", styles: [":host{display:block}.filter-chips-list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--
|
|
128
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FilterChipsListComponent, isStandalone: true, selector: "ap-filter-chips-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [AP_FILTER_CHIPS_LIST_VALIDATOR], hostDirectives: [{ directive: i1.NgxControlValueAccessor }], ngImport: i0, template: "<div class=\"filter-chips-list\"\n cdkListbox\n cdkListboxOrientation=\"horizontal\"\n [cdkListboxValue]=\"cva.value$()\"\n [cdkListboxMultiple]=\"multiple()\"\n [cdkListboxDisabled]=\"isDisabled()\"\n [cdkListboxCompareWith]=\"compareWith()\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-label]=\"ariaLabel()\"\n (cdkListboxValueChange)=\"onListboxChange($event)\">\n @for (item of viewItems(); track item.source) {\n <button\n ap-filter-chip\n type=\"button\"\n [cdkOption]=\"item.modelValue\"\n [cdkOptionDisabled]=\"item.disabled\"\n [disabled]=\"item.disabled\"\n [apTooltip]=\"item.disabledTooltip ?? null\"\n [apTooltipDisabled]=\"!item.disabled || !item.disabledTooltip\"\n [label]=\"item.label\"\n [symbolId]=\"item.symbolId\"\n [avatar]=\"item.avatar\"\n [disabledTooltip]=\"item.disabledTooltip\"></button>\n }\n</div>\n", styles: [":host{display:block}.filter-chips-list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sys-spacing-container-sm)}\n"], dependencies: [{ kind: "component", type: FilterChipComponent, selector: "button[ap-filter-chip]", inputs: ["label", "disabled", "disabledTooltip", "symbolId", "avatar"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }, { kind: "directive", type: CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
129
129
|
}
|
|
130
130
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FilterChipsListComponent, decorators: [{
|
|
131
131
|
type: Component,
|
|
132
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-filter-chips-list', imports: [FilterChipComponent, TooltipDirective, CdkListbox, CdkOption], hostDirectives: [NgxControlValueAccessor], providers: [AP_FILTER_CHIPS_LIST_VALIDATOR], template: "<div class=\"filter-chips-list\"\n cdkListbox\n cdkListboxOrientation=\"horizontal\"\n [cdkListboxValue]=\"cva.value$()\"\n [cdkListboxMultiple]=\"multiple()\"\n [cdkListboxDisabled]=\"isDisabled()\"\n [cdkListboxCompareWith]=\"compareWith()\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-label]=\"ariaLabel()\"\n (cdkListboxValueChange)=\"onListboxChange($event)\">\n @for (item of viewItems(); track item.source) {\n <button\n ap-filter-chip\n type=\"button\"\n [cdkOption]=\"item.modelValue\"\n [cdkOptionDisabled]=\"item.disabled\"\n [disabled]=\"item.disabled\"\n [apTooltip]=\"item.disabledTooltip ?? null\"\n [apTooltipDisabled]=\"!item.disabled || !item.disabledTooltip\"\n [label]=\"item.label\"\n [symbolId]=\"item.symbolId\"\n [avatar]=\"item.avatar\"\n [disabledTooltip]=\"item.disabledTooltip\"></button>\n }\n</div>\n", styles: [":host{display:block}.filter-chips-list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--
|
|
132
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-filter-chips-list', imports: [FilterChipComponent, TooltipDirective, CdkListbox, CdkOption], hostDirectives: [NgxControlValueAccessor], providers: [AP_FILTER_CHIPS_LIST_VALIDATOR], template: "<div class=\"filter-chips-list\"\n cdkListbox\n cdkListboxOrientation=\"horizontal\"\n [cdkListboxValue]=\"cva.value$()\"\n [cdkListboxMultiple]=\"multiple()\"\n [cdkListboxDisabled]=\"isDisabled()\"\n [cdkListboxCompareWith]=\"compareWith()\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-label]=\"ariaLabel()\"\n (cdkListboxValueChange)=\"onListboxChange($event)\">\n @for (item of viewItems(); track item.source) {\n <button\n ap-filter-chip\n type=\"button\"\n [cdkOption]=\"item.modelValue\"\n [cdkOptionDisabled]=\"item.disabled\"\n [disabled]=\"item.disabled\"\n [apTooltip]=\"item.disabledTooltip ?? null\"\n [apTooltipDisabled]=\"!item.disabled || !item.disabledTooltip\"\n [label]=\"item.label\"\n [symbolId]=\"item.symbolId\"\n [avatar]=\"item.avatar\"\n [disabledTooltip]=\"item.disabledTooltip\"></button>\n }\n</div>\n", styles: [":host{display:block}.filter-chips-list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sys-spacing-container-sm)}\n"] }]
|
|
133
133
|
}], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
|
|
134
134
|
|
|
135
135
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-filter-chips-list.mjs","sources":["../../../libs/ui-components/filter-chips-list/src/filter-chip/filter-chip.component.ts","../../../libs/ui-components/filter-chips-list/src/filter-chip/filter-chip.component.html","../../../libs/ui-components/filter-chips-list/src/filter-chips-list.component.ts","../../../libs/ui-components/filter-chips-list/src/filter-chips-list.component.html","../../../libs/ui-components/filter-chips-list/src/agorapulse-ui-components-filter-chips-list.ts"],"sourcesContent":["import { AvatarComponent } from '@agorapulse/ui-components/avatar';\nimport { TooltipDirective } from '@agorapulse/ui-components/tooltip';\nimport { agorapulseSymbol, SymbolComponent } from '@agorapulse/ui-symbol';\nimport { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core';\n\nexport interface FilterChipAvatar {\n profilePicture?: string;\n username?: string;\n network?: string;\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'button[ap-filter-chip]',\n templateUrl: './filter-chip.component.html',\n styleUrls: ['./filter-chip.component.scss'],\n imports: [SymbolComponent, AvatarComponent, TooltipDirective],\n host: {\n type: 'button',\n class: 'filter-chip',\n '[disabled]': 'disabled() || null',\n },\n})\nexport class FilterChipComponent {\n label = input('');\n disabled = input(false, { transform: booleanAttribute });\n disabledTooltip = input<string>();\n symbolId = input<agorapulseSymbol>();\n avatar = input<FilterChipAvatar>();\n}\n","@if (symbolId()) {\n <span class=\"filter-chip-icon\">\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId()\" />\n </span>\n}\n@if (avatar(); as avatar) {\n <ap-avatar\n class=\"filter-chip-avatar\"\n [username]=\"avatar.username ?? ''\"\n [profilePicture]=\"avatar.profilePicture\"\n [network]=\"avatar.network\"\n [showInitials]=\"true\"\n [size]=\"16\" />\n}\n<span\n class=\"filter-chip-label\"\n [apTooltip]=\"label()\"\n [apTooltipTruncatedTextOnly]=\"true\"\n [apTooltipDisabled]=\"!!disabledTooltip()\">\n {{ label() }}\n</span>\n","import { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';\nimport { TooltipDirective } from '@agorapulse/ui-components/tooltip';\nimport { agorapulseSymbol, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport { CdkListbox, CdkOption, ListboxValueChangeEvent } from '@angular/cdk/listbox';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n forwardRef,\n inject,\n Injector,\n input,\n OnInit,\n output,\n runInInjectionContext,\n} from '@angular/core';\nimport { AbstractControl, NG_VALIDATORS, ValidationErrors, Validator, ValidatorFn, Validators } from '@angular/forms';\nimport { get } from 'es-toolkit/compat';\nimport { NgxControlValueAccessor } from 'ngxtension/control-value-accessor';\nimport { explicitEffect } from 'ngxtension/explicit-effect';\nimport { FilterChipAvatar, FilterChipComponent } from './filter-chip/filter-chip.component';\n\nexport interface FilterChipItem {\n /**\n * The source object backing the chip — primitive or domain object.\n * The form-model value is extracted via `bindValue` and the displayed text via `bindLabel`.\n */\n value: unknown;\n disabled?: boolean;\n disabledTooltip?: string;\n symbolId?: agorapulseSymbol;\n avatar?: FilterChipAvatar;\n}\n\nexport type FilterChipsListValue = readonly unknown[];\n\nexport type FilterChipsListCompareFn = (a: unknown, b: unknown) => boolean;\n\n/** Emitted on user-initiated selection changes (not on programmatic `writeValue`). */\nexport interface FilterChipsListChange {\n /** New selection after the toggle — always an array (length 0 or 1 in single mode). */\n value: FilterChipsListValue;\n /** The item that was triggered. */\n item: FilterChipItem;\n}\n\nexport const AP_FILTER_CHIPS_LIST_VALIDATOR = {\n provide: NG_VALIDATORS,\n useExisting: forwardRef(() => FilterChipsListComponent),\n multi: true,\n};\n\nconst requiredArrayValidator: ValidatorFn = control => {\n const value = control.value;\n if (Array.isArray(value)) return value.length > 0 ? null : { required: true };\n return Validators.required(control);\n};\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-filter-chips-list',\n templateUrl: './filter-chips-list.component.html',\n styleUrls: ['./filter-chips-list.component.scss'],\n imports: [FilterChipComponent, TooltipDirective, CdkListbox, CdkOption],\n hostDirectives: [NgxControlValueAccessor],\n providers: [AP_FILTER_CHIPS_LIST_VALIDATOR],\n})\nexport class FilterChipsListComponent implements Validator, OnInit {\n private readonly symbolRegistry = inject(SymbolRegistry);\n private readonly injector = inject(Injector);\n\n /**\n * Resolved in `ngOnInit` (not as a field initializer) to avoid a circular dependency:\n * `NgModel` injects `NG_VALIDATORS` (multi) → `FilterChipsListComponent` (validator) →\n * `NgxControlValueAccessor` → `NgControl` (= the same `NgModel` being constructed).\n */\n protected cva!: NgxControlValueAccessor<FilterChipsListValue>;\n\n /** Chips to render. Each item exposes a `value` (extracted via `bindValue`) and a label (via `bindLabel`). */\n items = input<FilterChipItem[]>([]);\n /** When true, multiple chips can be selected at once. When false, only one. */\n multiple = input(false, { transform: booleanAttribute });\n /** Disable every chip in the list. Combined with the FormControl disabled state. */\n disabled = input(false, { transform: booleanAttribute });\n /** Mark the control as required. Surfaces `{ required: true }` on empty selection and `aria-required=\"true\"`. */\n required = input(false, { transform: booleanAttribute });\n /** Key on `item.value` to project as the form-model value. When null (default), the whole `item.value` is used. */\n bindValue = input<string | null>(null);\n /** Key on `item.value` to display as the chip label. When null (default), the value itself is used when primitive. */\n bindLabel = input<string | null>(null);\n /** Equality used to match selected values against items. Defaults to `Object.is` — pass a custom fn for object values. */\n compareWith = input<FilterChipsListCompareFn>(Object.is);\n /** Accessible label for the listbox — relayed to the inner `[role=\"listbox\"]` element via `aria-label`. */\n ariaLabel = input<string | null>(null, { alias: 'aria-label' });\n\n /** User-initiated selection change — payload `{ value, item }`. Not emitted on programmatic `writeValue`. */\n valueChange = output<FilterChipsListChange>();\n\n /** Effective disabled state — `[disabled]` input OR `FormControl.disable()` (mirrored by `cva.disabled$`). */\n protected readonly isDisabled = computed(() => this.disabled() || (this.cva?.disabled$() ?? false));\n\n protected readonly viewItems = computed(() => {\n const listDisabled = this.isDisabled();\n return this.items().map(item => ({\n source: item,\n modelValue: this.modelOf(item),\n label: this.labelOf(item),\n symbolId: item.symbolId,\n avatar: item.avatar,\n disabledTooltip: item.disabledTooltip,\n disabled: listDisabled || (item.disabled ?? false),\n }));\n });\n\n private readonly _validator = computed<ValidatorFn | null>(() => (this.required() ? requiredArrayValidator : null));\n\n private _onValidatorChange!: () => void;\n\n constructor() {\n this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));\n\n explicitEffect([this._validator], () => this._onValidatorChange());\n }\n\n ngOnInit(): void {\n this.cva = runInInjectionContext(this.injector, () =>\n inject<NgxControlValueAccessor<FilterChipsListValue>>(NgxControlValueAccessor)\n );\n }\n\n protected onListboxChange(event: ListboxValueChangeEvent<unknown>): void {\n // Setter on `cva.value` updates the signal AND notifies the parent ngControl via the registered `onChange`.\n this.cva.value = event.value;\n const cmp = this.compareWith();\n const item = this.items().find(i => cmp(this.modelOf(i), event.option?.value)) ?? this.items()[0];\n this.valueChange.emit({ value: event.value, item });\n }\n\n validate(control: AbstractControl): ValidationErrors | null {\n return this._validator()?.(control) ?? null;\n }\n\n registerOnValidatorChange(fn: () => void): void {\n this._onValidatorChange = fn;\n }\n\n private modelOf(item: FilterChipItem): unknown {\n const path = this.bindValue();\n return path ? get(item.value, path) : item.value;\n }\n\n private labelOf(item: FilterChipItem): string {\n const path = this.bindLabel();\n if (path) return String(get(item.value, path) ?? '');\n return typeof item.value === 'object' ? '' : String(item.value);\n }\n}\n","<div class=\"filter-chips-list\"\n cdkListbox\n cdkListboxOrientation=\"horizontal\"\n [cdkListboxValue]=\"cva.value$()\"\n [cdkListboxMultiple]=\"multiple()\"\n [cdkListboxDisabled]=\"isDisabled()\"\n [cdkListboxCompareWith]=\"compareWith()\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-label]=\"ariaLabel()\"\n (cdkListboxValueChange)=\"onListboxChange($event)\">\n @for (item of viewItems(); track item.source) {\n <button\n ap-filter-chip\n type=\"button\"\n [cdkOption]=\"item.modelValue\"\n [cdkOptionDisabled]=\"item.disabled\"\n [disabled]=\"item.disabled\"\n [apTooltip]=\"item.disabledTooltip ?? null\"\n [apTooltipDisabled]=\"!item.disabled || !item.disabledTooltip\"\n [label]=\"item.label\"\n [symbolId]=\"item.symbolId\"\n [avatar]=\"item.avatar\"\n [disabledTooltip]=\"item.disabledTooltip\"></button>\n }\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-filter-chips-list.mjs","sources":["../../../libs/ui-components/filter-chips-list/src/filter-chip/filter-chip.component.ts","../../../libs/ui-components/filter-chips-list/src/filter-chip/filter-chip.component.html","../../../libs/ui-components/filter-chips-list/src/filter-chips-list.component.ts","../../../libs/ui-components/filter-chips-list/src/filter-chips-list.component.html","../../../libs/ui-components/filter-chips-list/src/agorapulse-ui-components-filter-chips-list.ts"],"sourcesContent":["import { AvatarComponent } from '@agorapulse/ui-components/avatar';\nimport { TooltipDirective } from '@agorapulse/ui-components/tooltip';\nimport { agorapulseSymbol, SymbolComponent } from '@agorapulse/ui-symbol';\nimport { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core';\n\nexport interface FilterChipAvatar {\n profilePicture?: string;\n username?: string;\n network?: string;\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'button[ap-filter-chip]',\n templateUrl: './filter-chip.component.html',\n styleUrls: ['./filter-chip.component.scss'],\n imports: [SymbolComponent, AvatarComponent, TooltipDirective],\n host: {\n type: 'button',\n class: 'filter-chip',\n '[disabled]': 'disabled() || null',\n },\n})\nexport class FilterChipComponent {\n label = input('');\n disabled = input(false, { transform: booleanAttribute });\n disabledTooltip = input<string>();\n symbolId = input<agorapulseSymbol>();\n avatar = input<FilterChipAvatar>();\n}\n","@if (symbolId()) {\n <span class=\"filter-chip-icon\">\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId()\" />\n </span>\n}\n@if (avatar(); as avatar) {\n <ap-avatar\n class=\"filter-chip-avatar\"\n [username]=\"avatar.username ?? ''\"\n [profilePicture]=\"avatar.profilePicture\"\n [network]=\"avatar.network\"\n [showInitials]=\"true\"\n [size]=\"16\" />\n}\n<span\n class=\"filter-chip-label\"\n [apTooltip]=\"label()\"\n [apTooltipTruncatedTextOnly]=\"true\"\n [apTooltipDisabled]=\"!!disabledTooltip()\">\n {{ label() }}\n</span>\n","import { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';\nimport { TooltipDirective } from '@agorapulse/ui-components/tooltip';\nimport { agorapulseSymbol, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport { CdkListbox, CdkOption, ListboxValueChangeEvent } from '@angular/cdk/listbox';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n forwardRef,\n inject,\n Injector,\n input,\n OnInit,\n output,\n runInInjectionContext,\n} from '@angular/core';\nimport { AbstractControl, NG_VALIDATORS, ValidationErrors, Validator, ValidatorFn, Validators } from '@angular/forms';\nimport { get } from 'es-toolkit/compat';\nimport { NgxControlValueAccessor } from 'ngxtension/control-value-accessor';\nimport { explicitEffect } from 'ngxtension/explicit-effect';\nimport { FilterChipAvatar, FilterChipComponent } from './filter-chip/filter-chip.component';\n\nexport interface FilterChipItem {\n /**\n * The source object backing the chip — primitive or domain object.\n * The form-model value is extracted via `bindValue` and the displayed text via `bindLabel`.\n */\n value: unknown;\n disabled?: boolean;\n disabledTooltip?: string;\n symbolId?: agorapulseSymbol;\n avatar?: FilterChipAvatar;\n}\n\nexport type FilterChipsListValue = readonly unknown[];\n\nexport type FilterChipsListCompareFn = (a: unknown, b: unknown) => boolean;\n\n/** Emitted on user-initiated selection changes (not on programmatic `writeValue`). */\nexport interface FilterChipsListChange {\n /** New selection after the toggle — always an array (length 0 or 1 in single mode). */\n value: FilterChipsListValue;\n /** The item that was triggered. */\n item: FilterChipItem;\n}\n\nexport const AP_FILTER_CHIPS_LIST_VALIDATOR = {\n provide: NG_VALIDATORS,\n useExisting: forwardRef(() => FilterChipsListComponent),\n multi: true,\n};\n\nconst requiredArrayValidator: ValidatorFn = control => {\n const value = control.value;\n if (Array.isArray(value)) return value.length > 0 ? null : { required: true };\n return Validators.required(control);\n};\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-filter-chips-list',\n templateUrl: './filter-chips-list.component.html',\n styleUrls: ['./filter-chips-list.component.scss'],\n imports: [FilterChipComponent, TooltipDirective, CdkListbox, CdkOption],\n hostDirectives: [NgxControlValueAccessor],\n providers: [AP_FILTER_CHIPS_LIST_VALIDATOR],\n})\nexport class FilterChipsListComponent implements Validator, OnInit {\n private readonly symbolRegistry = inject(SymbolRegistry);\n private readonly injector = inject(Injector);\n\n /**\n * Resolved in `ngOnInit` (not as a field initializer) to avoid a circular dependency:\n * `NgModel` injects `NG_VALIDATORS` (multi) → `FilterChipsListComponent` (validator) →\n * `NgxControlValueAccessor` → `NgControl` (= the same `NgModel` being constructed).\n */\n protected cva!: NgxControlValueAccessor<FilterChipsListValue>;\n\n /** Chips to render. Each item exposes a `value` (extracted via `bindValue`) and a label (via `bindLabel`). */\n items = input<FilterChipItem[]>([]);\n /** When true, multiple chips can be selected at once. When false, only one. */\n multiple = input(false, { transform: booleanAttribute });\n /** Disable every chip in the list. Combined with the FormControl disabled state. */\n disabled = input(false, { transform: booleanAttribute });\n /** Mark the control as required. Surfaces `{ required: true }` on empty selection and `aria-required=\"true\"`. */\n required = input(false, { transform: booleanAttribute });\n /** Key on `item.value` to project as the form-model value. When null (default), the whole `item.value` is used. */\n bindValue = input<string | null>(null);\n /** Key on `item.value` to display as the chip label. When null (default), the value itself is used when primitive. */\n bindLabel = input<string | null>(null);\n /** Equality used to match selected values against items. Defaults to `Object.is` — pass a custom fn for object values. */\n compareWith = input<FilterChipsListCompareFn>(Object.is);\n /** Accessible label for the listbox — relayed to the inner `[role=\"listbox\"]` element via `aria-label`. */\n ariaLabel = input<string | null>(null, { alias: 'aria-label' });\n\n /** User-initiated selection change — payload `{ value, item }`. Not emitted on programmatic `writeValue`. */\n valueChange = output<FilterChipsListChange>();\n\n /** Effective disabled state — `[disabled]` input OR `FormControl.disable()` (mirrored by `cva.disabled$`). */\n protected readonly isDisabled = computed(() => this.disabled() || (this.cva?.disabled$() ?? false));\n\n protected readonly viewItems = computed(() => {\n const listDisabled = this.isDisabled();\n return this.items().map(item => ({\n source: item,\n modelValue: this.modelOf(item),\n label: this.labelOf(item),\n symbolId: item.symbolId,\n avatar: item.avatar,\n disabledTooltip: item.disabledTooltip,\n disabled: listDisabled || (item.disabled ?? false),\n }));\n });\n\n private readonly _validator = computed<ValidatorFn | null>(() => (this.required() ? requiredArrayValidator : null));\n\n private _onValidatorChange!: () => void;\n\n constructor() {\n this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));\n\n explicitEffect([this._validator], () => this._onValidatorChange());\n }\n\n ngOnInit(): void {\n this.cva = runInInjectionContext(this.injector, () =>\n inject<NgxControlValueAccessor<FilterChipsListValue>>(NgxControlValueAccessor)\n );\n }\n\n protected onListboxChange(event: ListboxValueChangeEvent<unknown>): void {\n // Setter on `cva.value` updates the signal AND notifies the parent ngControl via the registered `onChange`.\n this.cva.value = event.value;\n const cmp = this.compareWith();\n const item = this.items().find(i => cmp(this.modelOf(i), event.option?.value)) ?? this.items()[0];\n this.valueChange.emit({ value: event.value, item });\n }\n\n validate(control: AbstractControl): ValidationErrors | null {\n return this._validator()?.(control) ?? null;\n }\n\n registerOnValidatorChange(fn: () => void): void {\n this._onValidatorChange = fn;\n }\n\n private modelOf(item: FilterChipItem): unknown {\n const path = this.bindValue();\n return path ? get(item.value, path) : item.value;\n }\n\n private labelOf(item: FilterChipItem): string {\n const path = this.bindLabel();\n if (path) return String(get(item.value, path) ?? '');\n return typeof item.value === 'object' ? '' : String(item.value);\n }\n}\n","<div class=\"filter-chips-list\"\n cdkListbox\n cdkListboxOrientation=\"horizontal\"\n [cdkListboxValue]=\"cva.value$()\"\n [cdkListboxMultiple]=\"multiple()\"\n [cdkListboxDisabled]=\"isDisabled()\"\n [cdkListboxCompareWith]=\"compareWith()\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-label]=\"ariaLabel()\"\n (cdkListboxValueChange)=\"onListboxChange($event)\">\n @for (item of viewItems(); track item.source) {\n <button\n ap-filter-chip\n type=\"button\"\n [cdkOption]=\"item.modelValue\"\n [cdkOptionDisabled]=\"item.disabled\"\n [disabled]=\"item.disabled\"\n [apTooltip]=\"item.disabledTooltip ?? null\"\n [apTooltipDisabled]=\"!item.disabled || !item.disabledTooltip\"\n [label]=\"item.label\"\n [symbolId]=\"item.symbolId\"\n [avatar]=\"item.avatar\"\n [disabledTooltip]=\"item.disabledTooltip\"></button>\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -3,11 +3,11 @@ import { ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/
|
|
|
3
3
|
|
|
4
4
|
class FormFieldComponent {
|
|
5
5
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: FormFieldComponent, isStandalone: true, selector: "ap-form-field", ngImport: i0, template: "<div class=\"ap-form-field\">\n <ng-content select=\"label\"></ng-content>\n <ng-content></ng-content>\n <ng-content select=\"ap-form-message\"></ng-content>\n</div>\n", styles: ["ap-form-field{display:block}.ap-form-field{display:inline-flex;flex-direction:column;gap:var(--comp-input-spacing-horizontal);width:100%}.ap-form-field label{display:flex;flex-direction:column;gap:var(--comp-forms-label-spacing-vertical);font-size:var(--comp-forms-label-size);font-weight:var(--comp-forms-label-font-weight);line-height:var(--comp-forms-label-line-height);font-family:var(--comp-forms-label-font-family);color:var(--
|
|
6
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: FormFieldComponent, isStandalone: true, selector: "ap-form-field", ngImport: i0, template: "<div class=\"ap-form-field\">\n <ng-content select=\"label\"></ng-content>\n <ng-content></ng-content>\n <ng-content select=\"ap-form-message\"></ng-content>\n</div>\n", styles: ["ap-form-field{display:block}.ap-form-field{display:inline-flex;flex-direction:column;gap:var(--comp-input-spacing-horizontal);width:100%}.ap-form-field label{display:flex;flex-direction:column;gap:var(--comp-forms-label-spacing-vertical);font-size:var(--comp-forms-label-size);font-weight:var(--comp-forms-label-font-weight);line-height:var(--comp-forms-label-line-height);font-family:var(--comp-forms-label-font-family);color:var(--sys-color-text-default)}.ap-form-field label .description{font-size:var(--comp-forms-label-description-text-size);font-weight:var(--comp-forms-label-description-text-font-weight);line-height:var(--comp-forms-label-description-text-line-height);font-family:var(--comp-forms-label-description-text-font-family);color:var(--sys-color-text-secondary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
7
7
|
}
|
|
8
8
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FormFieldComponent, decorators: [{
|
|
9
9
|
type: Component,
|
|
10
|
-
args: [{ selector: 'ap-form-field', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"ap-form-field\">\n <ng-content select=\"label\"></ng-content>\n <ng-content></ng-content>\n <ng-content select=\"ap-form-message\"></ng-content>\n</div>\n", styles: ["ap-form-field{display:block}.ap-form-field{display:inline-flex;flex-direction:column;gap:var(--comp-input-spacing-horizontal);width:100%}.ap-form-field label{display:flex;flex-direction:column;gap:var(--comp-forms-label-spacing-vertical);font-size:var(--comp-forms-label-size);font-weight:var(--comp-forms-label-font-weight);line-height:var(--comp-forms-label-line-height);font-family:var(--comp-forms-label-font-family);color:var(--
|
|
10
|
+
args: [{ selector: 'ap-form-field', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"ap-form-field\">\n <ng-content select=\"label\"></ng-content>\n <ng-content></ng-content>\n <ng-content select=\"ap-form-message\"></ng-content>\n</div>\n", styles: ["ap-form-field{display:block}.ap-form-field{display:inline-flex;flex-direction:column;gap:var(--comp-input-spacing-horizontal);width:100%}.ap-form-field label{display:flex;flex-direction:column;gap:var(--comp-forms-label-spacing-vertical);font-size:var(--comp-forms-label-size);font-weight:var(--comp-forms-label-font-weight);line-height:var(--comp-forms-label-line-height);font-family:var(--comp-forms-label-font-family);color:var(--sys-color-text-default)}.ap-form-field label .description{font-size:var(--comp-forms-label-description-text-size);font-weight:var(--comp-forms-label-description-text-font-weight);line-height:var(--comp-forms-label-description-text-line-height);font-family:var(--comp-forms-label-description-text-font-family);color:var(--sys-color-text-secondary)}\n"] }]
|
|
11
11
|
}] });
|
|
12
12
|
|
|
13
13
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-form-field.mjs","sources":["../../../libs/ui-components/form-field/src/form-field.component.ts","../../../libs/ui-components/form-field/src/form-field.component.html","../../../libs/ui-components/form-field/src/agorapulse-ui-components-form-field.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';\n\n@Component({\n selector: 'ap-form-field',\n templateUrl: './form-field.component.html',\n styleUrls: ['./form-field.component.scss'],\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class FormFieldComponent {}\n","<div class=\"ap-form-field\">\n <ng-content select=\"label\"></ng-content>\n <ng-content></ng-content>\n <ng-content select=\"ap-form-message\"></ng-content>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;MAUa,kBAAkB,CAAA;uGAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,yECV/B,kLAKA,EAAA,MAAA,EAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"agorapulse-ui-components-form-field.mjs","sources":["../../../libs/ui-components/form-field/src/form-field.component.ts","../../../libs/ui-components/form-field/src/form-field.component.html","../../../libs/ui-components/form-field/src/agorapulse-ui-components-form-field.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';\n\n@Component({\n selector: 'ap-form-field',\n templateUrl: './form-field.component.html',\n styleUrls: ['./form-field.component.scss'],\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class FormFieldComponent {}\n","<div class=\"ap-form-field\">\n <ng-content select=\"label\"></ng-content>\n <ng-content></ng-content>\n <ng-content select=\"ap-form-message\"></ng-content>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;MAUa,kBAAkB,CAAA;uGAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,yECV/B,kLAKA,EAAA,MAAA,EAAA,CAAA,gxBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FDKa,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAR9B,SAAS;+BACI,eAAe,EAAA,UAAA,EAGb,IAAI,EAAA,eAAA,EACC,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,kLAAA,EAAA,MAAA,EAAA,CAAA,gxBAAA,CAAA,EAAA;;;AERzC;;AAEG;;;;"}
|
|
@@ -18,7 +18,7 @@ class FormMessageComponent {
|
|
|
18
18
|
this.symbolRegistry.registerSymbols([apErrorFill, apRoundedCheckFill]);
|
|
19
19
|
}
|
|
20
20
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FormMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
21
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: FormMessageComponent, isStandalone: true, selector: "ap-form-message", inputs: { messageType: "messageType", message: "message" }, host: { properties: { "class.error": "messageTypeSignal() === 'error'", "class.success": "messageTypeSignal() === 'success'" }, classAttribute: "ap-form-message" }, ngImport: i0, template: "<ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolIdSignal()\" />\n<span>\n {{ message }}\n</span>\n", styles: [".ap-form-message{font-size:var(--comp-forms-status-text-size);font-weight:var(--comp-forms-status-text-font-weight);line-height:var(--comp-forms-status-text-line-height);font-family:var(--comp-forms-status-text-font-family);margin:0;display:flex;align-items:center;gap:var(--ref-spacing-xxxs)}.ap-form-message.error{color:var(--
|
|
21
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: FormMessageComponent, isStandalone: true, selector: "ap-form-message", inputs: { messageType: "messageType", message: "message" }, host: { properties: { "class.error": "messageTypeSignal() === 'error'", "class.success": "messageTypeSignal() === 'success'" }, classAttribute: "ap-form-message" }, ngImport: i0, template: "<ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolIdSignal()\" />\n<span>\n {{ message }}\n</span>\n", styles: [".ap-form-message{font-size:var(--comp-forms-status-text-size);font-weight:var(--comp-forms-status-text-font-weight);line-height:var(--comp-forms-status-text-line-height);font-family:var(--comp-forms-status-text-font-family);margin:0;display:flex;align-items:center;gap:var(--ref-spacing-xxxs)}.ap-form-message.error{color:var(--sys-color-text-error)}.ap-form-message.error ap-symbol{color:var(--sys-color-icon-error)}.ap-form-message.success{color:var(--sys-color-text-success)}.ap-form-message.success ap-symbol{color:var(--sys-color-icon-success)}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
22
22
|
}
|
|
23
23
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FormMessageComponent, decorators: [{
|
|
24
24
|
type: Component,
|
|
@@ -26,7 +26,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
26
26
|
class: 'ap-form-message',
|
|
27
27
|
'[class.error]': "messageTypeSignal() === 'error'",
|
|
28
28
|
'[class.success]': "messageTypeSignal() === 'success'",
|
|
29
|
-
}, template: "<ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolIdSignal()\" />\n<span>\n {{ message }}\n</span>\n", styles: [".ap-form-message{font-size:var(--comp-forms-status-text-size);font-weight:var(--comp-forms-status-text-font-weight);line-height:var(--comp-forms-status-text-line-height);font-family:var(--comp-forms-status-text-font-family);margin:0;display:flex;align-items:center;gap:var(--ref-spacing-xxxs)}.ap-form-message.error{color:var(--
|
|
29
|
+
}, template: "<ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolIdSignal()\" />\n<span>\n {{ message }}\n</span>\n", styles: [".ap-form-message{font-size:var(--comp-forms-status-text-size);font-weight:var(--comp-forms-status-text-font-weight);line-height:var(--comp-forms-status-text-line-height);font-family:var(--comp-forms-status-text-font-family);margin:0;display:flex;align-items:center;gap:var(--ref-spacing-xxxs)}.ap-form-message.error{color:var(--sys-color-text-error)}.ap-form-message.error ap-symbol{color:var(--sys-color-icon-error)}.ap-form-message.success{color:var(--sys-color-text-success)}.ap-form-message.success ap-symbol{color:var(--sys-color-icon-success)}\n"] }]
|
|
30
30
|
}], ctorParameters: () => [], propDecorators: { messageType: [{
|
|
31
31
|
type: Input,
|
|
32
32
|
args: [{ required: true }]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-form-message.mjs","sources":["../../../libs/ui-components/form-message/src/form-message.component.ts","../../../libs/ui-components/form-message/src/form-message.component.html","../../../libs/ui-components/form-message/src/agorapulse-ui-components-form-message.ts"],"sourcesContent":["import { SymbolComponent, SymbolRegistry, apErrorFill, apRoundedCheckFill } from '@agorapulse/ui-symbol';\nimport { ChangeDetectionStrategy, Component, Input, ViewEncapsulation, computed, inject, signal } from '@angular/core';\n\nexport type MessageType = 'error' | 'success';\n\n@Component({\n selector: 'ap-form-message',\n templateUrl: './form-message.component.html',\n styleUrls: ['./form-message.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n imports: [SymbolComponent],\n host: {\n class: 'ap-form-message',\n '[class.error]': \"messageTypeSignal() === 'error'\",\n '[class.success]': \"messageTypeSignal() === 'success'\",\n },\n})\nexport class FormMessageComponent {\n @Input({ required: true })\n set messageType(messageType: MessageType) {\n this.messageTypeSignal.set(messageType);\n }\n\n @Input({ required: true })\n message!: string;\n\n messageTypeSignal = signal<MessageType>('error');\n\n symbolIdSignal = computed(() => {\n return this.messageTypeSignal() === 'error' ? 'error_fill' : 'rounded-check_fill';\n });\n\n private symbolRegistry = inject(SymbolRegistry);\n\n constructor() {\n this.symbolRegistry.registerSymbols([apErrorFill, apRoundedCheckFill]);\n }\n}\n","<ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolIdSignal()\" />\n<span>\n {{ message }}\n</span>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;MAkBa,oBAAoB,CAAA;IAC7B,IACI,WAAW,CAAC,WAAwB,EAAA;AACpC,QAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,WAAW,CAAC;IAC3C;AAGA,IAAA,OAAO;IAEP,iBAAiB,GAAG,MAAM,CAAc,OAAO;0FAAC;AAEhD,IAAA,cAAc,GAAG,QAAQ,CAAC,MAAK;AAC3B,QAAA,OAAO,IAAI,CAAC,iBAAiB,EAAE,KAAK,OAAO,GAAG,YAAY,GAAG,oBAAoB;IACrF,CAAC;uFAAC;AAEM,IAAA,cAAc,GAAG,MAAM,CAAC,cAAc,CAAC;AAE/C,IAAA,WAAA,GAAA;QACI,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;IAC1E;uGAnBS,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAApB,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,aAAA,EAAA,iCAAA,EAAA,eAAA,EAAA,mCAAA,EAAA,EAAA,cAAA,EAAA,iBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EClBjC,2GAMA,EAAA,MAAA,EAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"agorapulse-ui-components-form-message.mjs","sources":["../../../libs/ui-components/form-message/src/form-message.component.ts","../../../libs/ui-components/form-message/src/form-message.component.html","../../../libs/ui-components/form-message/src/agorapulse-ui-components-form-message.ts"],"sourcesContent":["import { SymbolComponent, SymbolRegistry, apErrorFill, apRoundedCheckFill } from '@agorapulse/ui-symbol';\nimport { ChangeDetectionStrategy, Component, Input, ViewEncapsulation, computed, inject, signal } from '@angular/core';\n\nexport type MessageType = 'error' | 'success';\n\n@Component({\n selector: 'ap-form-message',\n templateUrl: './form-message.component.html',\n styleUrls: ['./form-message.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n imports: [SymbolComponent],\n host: {\n class: 'ap-form-message',\n '[class.error]': \"messageTypeSignal() === 'error'\",\n '[class.success]': \"messageTypeSignal() === 'success'\",\n },\n})\nexport class FormMessageComponent {\n @Input({ required: true })\n set messageType(messageType: MessageType) {\n this.messageTypeSignal.set(messageType);\n }\n\n @Input({ required: true })\n message!: string;\n\n messageTypeSignal = signal<MessageType>('error');\n\n symbolIdSignal = computed(() => {\n return this.messageTypeSignal() === 'error' ? 'error_fill' : 'rounded-check_fill';\n });\n\n private symbolRegistry = inject(SymbolRegistry);\n\n constructor() {\n this.symbolRegistry.registerSymbols([apErrorFill, apRoundedCheckFill]);\n }\n}\n","<ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolIdSignal()\" />\n<span>\n {{ message }}\n</span>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;MAkBa,oBAAoB,CAAA;IAC7B,IACI,WAAW,CAAC,WAAwB,EAAA;AACpC,QAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,WAAW,CAAC;IAC3C;AAGA,IAAA,OAAO;IAEP,iBAAiB,GAAG,MAAM,CAAc,OAAO;0FAAC;AAEhD,IAAA,cAAc,GAAG,QAAQ,CAAC,MAAK;AAC3B,QAAA,OAAO,IAAI,CAAC,iBAAiB,EAAE,KAAK,OAAO,GAAG,YAAY,GAAG,oBAAoB;IACrF,CAAC;uFAAC;AAEM,IAAA,cAAc,GAAG,MAAM,CAAC,cAAc,CAAC;AAE/C,IAAA,WAAA,GAAA;QACI,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;IAC1E;uGAnBS,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAApB,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,aAAA,EAAA,iCAAA,EAAA,eAAA,EAAA,mCAAA,EAAA,EAAA,cAAA,EAAA,iBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EClBjC,2GAMA,EAAA,MAAA,EAAA,CAAA,yiBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDKc,eAAe,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,OAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAOhB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAbhC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EAAA,eAAA,EAGV,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,OAAA,EAC5B,CAAC,eAAe,CAAC,EAAA,IAAA,EACpB;AACF,wBAAA,KAAK,EAAE,iBAAiB;AACxB,wBAAA,eAAe,EAAE,iCAAiC;AAClD,wBAAA,iBAAiB,EAAE,mCAAmC;AACzD,qBAAA,EAAA,QAAA,EAAA,2GAAA,EAAA,MAAA,EAAA,CAAA,yiBAAA,CAAA,EAAA;;sBAGA,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;;sBAKxB,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;;;AExB7B;;AAEG;;;;"}
|