@agorapulse/ui-components 17.1.7 → 17.2.0
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-17.2.0.tgz +0 -0
- package/esm2022/autocomplete/autocomplete.component.mjs +5 -5
- package/esm2022/button/button.component.mjs +3 -3
- package/esm2022/checkbox/checkbox.component.mjs +5 -5
- package/esm2022/datepicker/datepicker.component.mjs +5 -5
- package/esm2022/form-message/form-message.component.mjs +6 -6
- package/esm2022/icon-button/icon-button.component.mjs +3 -3
- package/esm2022/infobox/infobox.component.mjs +9 -9
- package/esm2022/input-group/input-group.component.mjs +2 -2
- package/esm2022/input-search/input-search.component.mjs +5 -5
- package/esm2022/labels/label.component.mjs +3 -3
- package/esm2022/labels-selector/labels-selector.component.mjs +2 -2
- package/esm2022/legacy/input/input.component.mjs +6 -6
- package/esm2022/legacy/select/select.component.mjs +5 -5
- package/esm2022/legacy/textarea/textarea.component.mjs +5 -5
- package/esm2022/media-display-overlay/media-display-overlay-dialog.component.mjs +5 -5
- package/esm2022/neo-datepicker/neo-datepicker.component.mjs +3 -3
- package/esm2022/paginator/paginator.component.mjs +5 -5
- package/esm2022/password-input/password-input.component.mjs +3 -3
- package/esm2022/select/dropdown-item-multiple-one-line/dropdown-item-multiple-one-line.component.mjs +3 -3
- package/esm2022/select/dropdown-item-multiple-two-lines/dropdown-item-multiple-two-lines.component.mjs +3 -3
- package/esm2022/select/dropdown-item-single-one-line/dropdown-item-single-one-line.component.mjs +3 -3
- package/esm2022/select/dropdown-item-single-two-lines/dropdown-item-single-two-lines.component.mjs +3 -3
- package/esm2022/select/dropdown-search-form/dropdown-search-form.component.mjs +3 -3
- package/esm2022/select/select-base.directive.mjs +3 -3
- package/esm2022/select/select-label-multiple/select-label-multiple.component.mjs +28 -64
- package/esm2022/snackbars-thread/component/snackbars-thread.component.mjs +5 -5
- package/esm2022/snackbars-thread/utils/const/snackbars-thread.const.mjs +4 -4
- package/esm2022/social-button/social-button.component.mjs +3 -3
- package/esm2022/split-button/split-button.component.mjs +6 -6
- package/esm2022/stepper/stepper.component.mjs +3 -3
- package/esm2022/tag/tag.component.mjs +3 -3
- package/esm2022/toggle/toggle.component.mjs +3 -3
- package/fesm2022/agorapulse-ui-components-autocomplete.mjs +4 -4
- package/fesm2022/agorapulse-ui-components-autocomplete.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 +4 -4
- package/fesm2022/agorapulse-ui-components-checkbox.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-datepicker.mjs +4 -4
- package/fesm2022/agorapulse-ui-components-datepicker.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-form-message.mjs +5 -5
- 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-infobox.mjs +8 -8
- package/fesm2022/agorapulse-ui-components-infobox.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-input-search.mjs +4 -4
- package/fesm2022/agorapulse-ui-components-input-search.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-labels-selector.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-labels-selector.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-input.mjs +5 -5
- package/fesm2022/agorapulse-ui-components-legacy-input.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-legacy-select.mjs +4 -4
- package/fesm2022/agorapulse-ui-components-legacy-select.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-legacy-textarea.mjs +4 -4
- package/fesm2022/agorapulse-ui-components-legacy-textarea.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-media-display-overlay.mjs +4 -4
- package/fesm2022/agorapulse-ui-components-media-display-overlay.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-neo-datepicker.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-neo-datepicker.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-paginator.mjs +4 -4
- package/fesm2022/agorapulse-ui-components-paginator.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-password-input.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-password-input.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-select.mjs +38 -75
- package/fesm2022/agorapulse-ui-components-select.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-snackbars-thread.mjs +7 -7
- package/fesm2022/agorapulse-ui-components-snackbars-thread.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-social-button.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-social-button.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-split-button.mjs +5 -5
- package/fesm2022/agorapulse-ui-components-split-button.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-stepper.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-stepper.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/form-message/form-message.component.d.ts +1 -1
- package/package.json +13 -13
- package/select/select-label-multiple/select-label-multiple.component.d.ts +11 -14
- package/snackbars-thread/component/snackbars-thread.component.d.ts +1 -1
- package/agorapulse-ui-components-17.1.7.tgz +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-password-input.mjs","sources":["../../../libs/ui-components/password-input/src/password-input.component.ts","../../../libs/ui-components/password-input/src/password-input.component.html","../../../libs/ui-components/password-input/src/agorapulse-ui-components-password-input.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\nimport { SymbolComponent, SymbolRegistry, apViewOff, apViewOn } from '@agorapulse/ui-symbol';\nimport { NgClass } from '@angular/common';\nimport { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild, forwardRef } from '@angular/core';\nimport { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';\nimport { Subscription } from 'rxjs';\n\nexport const PASSWORD_CONTROL_VALUE_ACCESSOR: any = {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => PasswordInputComponent),\n multi: true,\n};\n\n@Component({\n selector: 'ap-password-input',\n templateUrl: './password-input.component.html',\n styleUrls: ['./password-input.component.scss'],\n providers: [PASSWORD_CONTROL_VALUE_ACCESSOR],\n imports: [SymbolComponent, NgClass, ReactiveFormsModule],\n standalone: true,\n})\nexport class PasswordInputComponent implements OnInit, OnDestroy, ControlValueAccessor {\n static type = ['text', 'password'];\n inputType: (typeof PasswordInputComponent.type)[number] = PasswordInputComponent.type[1];\n\n @Input() name = '';\n @Input() placeholder = '';\n @Input() fullWidth: boolean = false;\n disabled: boolean = false;\n\n @ViewChild('passwordInput') passwordInput!: ElementRef;\n\n controler: FormControl = new FormControl('');\n changes!: Subscription;\n\n constructor(public symbolRegistry: SymbolRegistry) {\n this.symbolRegistry.registerSymbols([apViewOff, apViewOn]);\n }\n /**\n * Change between visible and hidden password\n */\n toggleInputType(): void {\n this.inputType = PasswordInputComponent.type[PasswordInputComponent.type.indexOf(this.inputType) == 0 ? 1 : 0];\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n onChange = (password: string) => {};\n\n onTouch = () => {};\n\n writeValue(obj: string): void {\n this.controler.setValue(obj);\n }\n\n registerOnChange(fn: (password: string) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouch = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.disabled = isDisabled;\n }\n\n ngOnInit(): void {\n this.changes = this.controler.valueChanges.subscribe((val: string) => {\n if (this.onChange) {\n this.onChange(val);\n }\n });\n }\n\n ngOnDestroy(): void {\n if (this.changes) {\n this.changes.unsubscribe();\n }\n }\n}\n","<div\n class=\"input-group\"\n [ngClass]=\"{ disabled: disabled, 'full-width': fullWidth }\">\n <input\n #passwordInput\n autocomplete=\"password\"\n [type]=\"inputType\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [formControl]=\"controler\"\n (blur)=\"onTouch()\" />\n <ap-symbol\n class=\"input-group-append\"\n size=\"
|
|
1
|
+
{"version":3,"file":"agorapulse-ui-components-password-input.mjs","sources":["../../../libs/ui-components/password-input/src/password-input.component.ts","../../../libs/ui-components/password-input/src/password-input.component.html","../../../libs/ui-components/password-input/src/agorapulse-ui-components-password-input.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\nimport { SymbolComponent, SymbolRegistry, apViewOff, apViewOn } from '@agorapulse/ui-symbol';\nimport { NgClass } from '@angular/common';\nimport { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild, forwardRef } from '@angular/core';\nimport { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';\nimport { Subscription } from 'rxjs';\n\nexport const PASSWORD_CONTROL_VALUE_ACCESSOR: any = {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => PasswordInputComponent),\n multi: true,\n};\n\n@Component({\n selector: 'ap-password-input',\n templateUrl: './password-input.component.html',\n styleUrls: ['./password-input.component.scss'],\n providers: [PASSWORD_CONTROL_VALUE_ACCESSOR],\n imports: [SymbolComponent, NgClass, ReactiveFormsModule],\n standalone: true,\n})\nexport class PasswordInputComponent implements OnInit, OnDestroy, ControlValueAccessor {\n static type = ['text', 'password'];\n inputType: (typeof PasswordInputComponent.type)[number] = PasswordInputComponent.type[1];\n\n @Input() name = '';\n @Input() placeholder = '';\n @Input() fullWidth: boolean = false;\n disabled: boolean = false;\n\n @ViewChild('passwordInput') passwordInput!: ElementRef;\n\n controler: FormControl = new FormControl('');\n changes!: Subscription;\n\n constructor(public symbolRegistry: SymbolRegistry) {\n this.symbolRegistry.registerSymbols([apViewOff, apViewOn]);\n }\n /**\n * Change between visible and hidden password\n */\n toggleInputType(): void {\n this.inputType = PasswordInputComponent.type[PasswordInputComponent.type.indexOf(this.inputType) == 0 ? 1 : 0];\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n onChange = (password: string) => {};\n\n onTouch = () => {};\n\n writeValue(obj: string): void {\n this.controler.setValue(obj);\n }\n\n registerOnChange(fn: (password: string) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouch = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.disabled = isDisabled;\n }\n\n ngOnInit(): void {\n this.changes = this.controler.valueChanges.subscribe((val: string) => {\n if (this.onChange) {\n this.onChange(val);\n }\n });\n }\n\n ngOnDestroy(): void {\n if (this.changes) {\n this.changes.unsubscribe();\n }\n }\n}\n","<div\n class=\"input-group\"\n [ngClass]=\"{ disabled: disabled, 'full-width': fullWidth }\">\n <input\n #passwordInput\n autocomplete=\"password\"\n [type]=\"inputType\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [formControl]=\"controler\"\n (blur)=\"onTouch()\" />\n <ap-symbol\n class=\"input-group-append\"\n size=\"sm\"\n state=\"full\"\n [symbolId]=\"inputType === 'text' ? 'view-on' : 'view-off'\"\n (click)=\"toggleInputType()\" />\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, ViewEncapsulation, Input, EventEmitter, ChangeDetectionStrategy, Output, ViewChild, signal, TemplateRef, inject, ElementRef, EnvironmentInjector, computed, runInInjectionContext, effect, Renderer2, ViewContainerRef, Directive, NgModule } from '@angular/core';
|
|
2
|
+
import { Component, ViewEncapsulation, Input, EventEmitter, ChangeDetectionStrategy, Output, ViewChild, signal, TemplateRef, input, output, inject, ElementRef, EnvironmentInjector, computed, runInInjectionContext, effect, Renderer2, ViewContainerRef, Directive, NgModule } from '@angular/core';
|
|
3
3
|
import { NgSelectComponent, NgSelectModule } from '@ng-select/ng-select';
|
|
4
4
|
import { BadgeComponent } from '@agorapulse/ui-components/badge';
|
|
5
5
|
import { CheckboxComponent } from '@agorapulse/ui-components/checkbox';
|
|
6
6
|
import { TooltipDirective } from '@agorapulse/ui-components/tooltip';
|
|
7
7
|
import { AvatarComponent } from '@agorapulse/ui-components/avatar';
|
|
8
|
-
import { SymbolComponent, SymbolRegistry,
|
|
8
|
+
import { SymbolComponent, SymbolRegistry, apCheck, apPlus } from '@agorapulse/ui-symbol';
|
|
9
9
|
import { LoaderComponent } from '@agorapulse/ui-animations';
|
|
10
10
|
import { InputDirective } from '@agorapulse/ui-components/input';
|
|
11
11
|
import { InputGroupComponent } from '@agorapulse/ui-components/input-group';
|
|
@@ -82,11 +82,11 @@ class DropdownItemMultipleOneLineComponent {
|
|
|
82
82
|
this.checkbox.focus();
|
|
83
83
|
}
|
|
84
84
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DropdownItemMultipleOneLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
85
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: DropdownItemMultipleOneLineComponent, isStandalone: true, selector: "ap-dropdown-item-multiple-one-line", inputs: { text: "text", selected: "selected", htmlId: "htmlId", disabled: "disabled", avatarUrl: "avatarUrl", symbolId: "symbolId", disabledTooltip: "disabledTooltip", badgeText: "badgeText", dividerEnabled: "dividerEnabled", onlyEnabled: "onlyEnabled", onlyText: "onlyText" }, outputs: { selectOnly: "selectOnly" }, viewQueries: [{ propertyName: "checkbox", first: true, predicate: CheckboxComponent, descendants: true }], ngImport: i0, template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option multiple\">\n <ap-checkbox\n #checkbox\n [checked]=\"selected\"\n [disabled]=\"disabled\"\n [name]=\"'option-selection-' + htmlId\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [size]=\"24\"\n [profilePicture]=\"avatarUrl\"\n [username]=\"text\"\n [showInitials]=\"true\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"
|
|
85
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: DropdownItemMultipleOneLineComponent, isStandalone: true, selector: "ap-dropdown-item-multiple-one-line", inputs: { text: "text", selected: "selected", htmlId: "htmlId", disabled: "disabled", avatarUrl: "avatarUrl", symbolId: "symbolId", disabledTooltip: "disabledTooltip", badgeText: "badgeText", dividerEnabled: "dividerEnabled", onlyEnabled: "onlyEnabled", onlyText: "onlyText" }, outputs: { selectOnly: "selectOnly" }, viewQueries: [{ propertyName: "checkbox", first: true, predicate: CheckboxComponent, descendants: true }], ngImport: i0, template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option multiple\">\n <ap-checkbox\n #checkbox\n [checked]=\"selected\"\n [disabled]=\"disabled\"\n [name]=\"'option-selection-' + htmlId\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [size]=\"24\"\n [profilePicture]=\"avatarUrl\"\n [username]=\"text\"\n [showInitials]=\"true\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId\" />\n }\n <span\n class=\"option-item\"\n [title]=\"text\">\n {{ text }}\n </span>\n @if (badgeText) {\n <ap-badge color=\"blue\">\n {{ badgeText }}\n </ap-badge>\n }\n\n @if (onlyEnabled && !disabled) {\n <button\n class=\"standalone-link\"\n type=\"button\"\n (click)=\"$event.preventDefault(); $event.stopPropagation(); onSelectOnly()\">\n {{ onlyText }}\n </button>\n }\n </ap-checkbox>\n</div>\n@if (dividerEnabled) {\n <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-multiple-one-line .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-one-line .option ap-checkbox label{display:flex;gap:var(--ref-spacing-xxs);align-items:center}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltipPosition", "apTooltip", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
86
86
|
}
|
|
87
87
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DropdownItemMultipleOneLineComponent, decorators: [{
|
|
88
88
|
type: Component,
|
|
89
|
-
args: [{ selector: 'ap-dropdown-item-multiple-one-line', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, CheckboxComponent, AvatarComponent, BadgeComponent, TooltipDirective], template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option multiple\">\n <ap-checkbox\n #checkbox\n [checked]=\"selected\"\n [disabled]=\"disabled\"\n [name]=\"'option-selection-' + htmlId\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [size]=\"24\"\n [profilePicture]=\"avatarUrl\"\n [username]=\"text\"\n [showInitials]=\"true\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"
|
|
89
|
+
args: [{ selector: 'ap-dropdown-item-multiple-one-line', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, CheckboxComponent, AvatarComponent, BadgeComponent, TooltipDirective], template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option multiple\">\n <ap-checkbox\n #checkbox\n [checked]=\"selected\"\n [disabled]=\"disabled\"\n [name]=\"'option-selection-' + htmlId\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [size]=\"24\"\n [profilePicture]=\"avatarUrl\"\n [username]=\"text\"\n [showInitials]=\"true\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId\" />\n }\n <span\n class=\"option-item\"\n [title]=\"text\">\n {{ text }}\n </span>\n @if (badgeText) {\n <ap-badge color=\"blue\">\n {{ badgeText }}\n </ap-badge>\n }\n\n @if (onlyEnabled && !disabled) {\n <button\n class=\"standalone-link\"\n type=\"button\"\n (click)=\"$event.preventDefault(); $event.stopPropagation(); onSelectOnly()\">\n {{ onlyText }}\n </button>\n }\n </ap-checkbox>\n</div>\n@if (dividerEnabled) {\n <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-multiple-one-line .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-one-line .option ap-checkbox label{display:flex;gap:var(--ref-spacing-xxs);align-items:center}\n"] }]
|
|
90
90
|
}], propDecorators: { text: [{
|
|
91
91
|
type: Input,
|
|
92
92
|
args: [{ required: true }]
|
|
@@ -139,11 +139,11 @@ class DropdownItemMultipleTwoLinesComponent {
|
|
|
139
139
|
this.checkbox.focus();
|
|
140
140
|
}
|
|
141
141
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DropdownItemMultipleTwoLinesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
142
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: DropdownItemMultipleTwoLinesComponent, isStandalone: true, selector: "ap-dropdown-item-multiple-two-lines", inputs: { text: "text", caption: "caption", selected: "selected", htmlId: "htmlId", disabled: "disabled", avatarUrl: "avatarUrl", symbolId: "symbolId", disabledTooltip: "disabledTooltip", badgeText: "badgeText", dividerEnabled: "dividerEnabled", onlyEnabled: "onlyEnabled", onlyText: "onlyText" }, outputs: { selectOnly: "selectOnly" }, viewQueries: [{ propertyName: "checkbox", first: true, predicate: CheckboxComponent, descendants: true }], ngImport: i0, template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option multiple with-caption\">\n <ap-checkbox\n [checked]=\"selected\"\n [disabled]=\"disabled\"\n [name]=\"'option-selection-' + htmlId\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [size]=\"24\"\n [profilePicture]=\"avatarUrl\"\n [username]=\"text\"\n [showInitials]=\"true\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"
|
|
142
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: DropdownItemMultipleTwoLinesComponent, isStandalone: true, selector: "ap-dropdown-item-multiple-two-lines", inputs: { text: "text", caption: "caption", selected: "selected", htmlId: "htmlId", disabled: "disabled", avatarUrl: "avatarUrl", symbolId: "symbolId", disabledTooltip: "disabledTooltip", badgeText: "badgeText", dividerEnabled: "dividerEnabled", onlyEnabled: "onlyEnabled", onlyText: "onlyText" }, outputs: { selectOnly: "selectOnly" }, viewQueries: [{ propertyName: "checkbox", first: true, predicate: CheckboxComponent, descendants: true }], ngImport: i0, template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option multiple with-caption\">\n <ap-checkbox\n [checked]=\"selected\"\n [disabled]=\"disabled\"\n [name]=\"'option-selection-' + htmlId\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [size]=\"24\"\n [profilePicture]=\"avatarUrl\"\n [username]=\"text\"\n [showInitials]=\"true\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId\" />\n }\n <div class=\"texts\">\n <div class=\"first-line\">\n <span\n class=\"label\"\n [title]=\"text\">\n {{ text }}\n </span>\n @if (badgeText) {\n <ap-badge color=\"blue\">\n {{ badgeText }}\n </ap-badge>\n }\n </div>\n <span\n class=\"caption\"\n [title]=\"caption\">\n {{ caption }}\n </span>\n </div>\n @if (onlyEnabled && !disabled) {\n <button\n class=\"standalone-link\"\n type=\"button\"\n (click)=\"$event.preventDefault(); $event.stopPropagation(); onSelectOnly()\">\n {{ onlyText }}\n </button>\n }\n </ap-checkbox>\n</div>\n@if (dividerEnabled) {\n <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-multiple-two-lines .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-two-lines .option ap-checkbox label{display:flex;gap:var(--ref-spacing-xxs);align-items:center}ap-dropdown-item-multiple-two-lines .option .texts{flex:1;overflow:auto;display:flex;flex-direction:column}ap-dropdown-item-multiple-two-lines .option .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-two-lines .option .texts .first-line .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltipPosition", "apTooltip", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
143
143
|
}
|
|
144
144
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DropdownItemMultipleTwoLinesComponent, decorators: [{
|
|
145
145
|
type: Component,
|
|
146
|
-
args: [{ selector: 'ap-dropdown-item-multiple-two-lines', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, CheckboxComponent, AvatarComponent, BadgeComponent, TooltipDirective], template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option multiple with-caption\">\n <ap-checkbox\n [checked]=\"selected\"\n [disabled]=\"disabled\"\n [name]=\"'option-selection-' + htmlId\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [size]=\"24\"\n [profilePicture]=\"avatarUrl\"\n [username]=\"text\"\n [showInitials]=\"true\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"
|
|
146
|
+
args: [{ selector: 'ap-dropdown-item-multiple-two-lines', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, CheckboxComponent, AvatarComponent, BadgeComponent, TooltipDirective], template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option multiple with-caption\">\n <ap-checkbox\n [checked]=\"selected\"\n [disabled]=\"disabled\"\n [name]=\"'option-selection-' + htmlId\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [size]=\"24\"\n [profilePicture]=\"avatarUrl\"\n [username]=\"text\"\n [showInitials]=\"true\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId\" />\n }\n <div class=\"texts\">\n <div class=\"first-line\">\n <span\n class=\"label\"\n [title]=\"text\">\n {{ text }}\n </span>\n @if (badgeText) {\n <ap-badge color=\"blue\">\n {{ badgeText }}\n </ap-badge>\n }\n </div>\n <span\n class=\"caption\"\n [title]=\"caption\">\n {{ caption }}\n </span>\n </div>\n @if (onlyEnabled && !disabled) {\n <button\n class=\"standalone-link\"\n type=\"button\"\n (click)=\"$event.preventDefault(); $event.stopPropagation(); onSelectOnly()\">\n {{ onlyText }}\n </button>\n }\n </ap-checkbox>\n</div>\n@if (dividerEnabled) {\n <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-multiple-two-lines .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-two-lines .option ap-checkbox label{display:flex;gap:var(--ref-spacing-xxs);align-items:center}ap-dropdown-item-multiple-two-lines .option .texts{flex:1;overflow:auto;display:flex;flex-direction:column}ap-dropdown-item-multiple-two-lines .option .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-two-lines .option .texts .first-line .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
|
|
147
147
|
}], propDecorators: { text: [{
|
|
148
148
|
type: Input,
|
|
149
149
|
args: [{ required: true }]
|
|
@@ -190,11 +190,11 @@ class DropdownItemSingleOneLineComponent {
|
|
|
190
190
|
dividerEnabled = false;
|
|
191
191
|
network = undefined;
|
|
192
192
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DropdownItemSingleOneLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
193
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: DropdownItemSingleOneLineComponent, isStandalone: true, selector: "ap-dropdown-item-single-one-line", inputs: { text: "text", selected: "selected", disabled: "disabled", avatarUrl: "avatarUrl", symbolId: "symbolId", disabledTooltip: "disabledTooltip", badgeText: "badgeText", dividerEnabled: "dividerEnabled", network: "network" }, ngImport: i0, template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [size]=\"24\"\n [profilePicture]=\"avatarUrl\"\n [username]=\"text\"\n [showInitials]=\"true\"\n [network]=\"network\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"
|
|
193
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: DropdownItemSingleOneLineComponent, isStandalone: true, selector: "ap-dropdown-item-single-one-line", inputs: { text: "text", selected: "selected", disabled: "disabled", avatarUrl: "avatarUrl", symbolId: "symbolId", disabledTooltip: "disabledTooltip", badgeText: "badgeText", dividerEnabled: "dividerEnabled", network: "network" }, ngImport: i0, template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [size]=\"24\"\n [profilePicture]=\"avatarUrl\"\n [username]=\"text\"\n [showInitials]=\"true\"\n [network]=\"network\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId\" />\n }\n <span\n class=\"option-item\"\n [title]=\"text\">\n {{ text }}\n </span>\n @if (badgeText) {\n <ap-badge color=\"blue\">\n {{ badgeText }}\n </ap-badge>\n }\n @if (selected) {\n <ap-symbol\n class=\"option-selected\"\n symbolId=\"check\"\n color=\"electric-blue\"\n size=\"sm\" />\n }\n</div>\n@if (dividerEnabled) {\n <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-single-one-line .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-one-line .option .option-selected{margin-left:auto}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltipPosition", "apTooltip", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
194
194
|
}
|
|
195
195
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DropdownItemSingleOneLineComponent, decorators: [{
|
|
196
196
|
type: Component,
|
|
197
|
-
args: [{ selector: 'ap-dropdown-item-single-one-line', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, AvatarComponent, BadgeComponent, TooltipDirective], template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [size]=\"24\"\n [profilePicture]=\"avatarUrl\"\n [username]=\"text\"\n [showInitials]=\"true\"\n [network]=\"network\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"
|
|
197
|
+
args: [{ selector: 'ap-dropdown-item-single-one-line', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, AvatarComponent, BadgeComponent, TooltipDirective], template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [size]=\"24\"\n [profilePicture]=\"avatarUrl\"\n [username]=\"text\"\n [showInitials]=\"true\"\n [network]=\"network\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId\" />\n }\n <span\n class=\"option-item\"\n [title]=\"text\">\n {{ text }}\n </span>\n @if (badgeText) {\n <ap-badge color=\"blue\">\n {{ badgeText }}\n </ap-badge>\n }\n @if (selected) {\n <ap-symbol\n class=\"option-selected\"\n symbolId=\"check\"\n color=\"electric-blue\"\n size=\"sm\" />\n }\n</div>\n@if (dividerEnabled) {\n <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-single-one-line .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-one-line .option .option-selected{margin-left:auto}\n"] }]
|
|
198
198
|
}], propDecorators: { text: [{
|
|
199
199
|
type: Input,
|
|
200
200
|
args: [{ required: true }]
|
|
@@ -229,11 +229,11 @@ class DropdownItemSingleTwoLinesComponent {
|
|
|
229
229
|
dividerEnabled = false;
|
|
230
230
|
network = undefined;
|
|
231
231
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DropdownItemSingleTwoLinesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
232
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: DropdownItemSingleTwoLinesComponent, isStandalone: true, selector: "ap-dropdown-item-single-two-lines", inputs: { text: "text", caption: "caption", selected: "selected", disabled: "disabled", avatarUrl: "avatarUrl", symbolId: "symbolId", disabledTooltip: "disabledTooltip", badgeText: "badgeText", dividerEnabled: "dividerEnabled", network: "network" }, ngImport: i0, template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option with-caption\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [size]=\"24\"\n [profilePicture]=\"avatarUrl\"\n [username]=\"text\"\n [showInitials]=\"true\"\n [network]=\"network\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"
|
|
232
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: DropdownItemSingleTwoLinesComponent, isStandalone: true, selector: "ap-dropdown-item-single-two-lines", inputs: { text: "text", caption: "caption", selected: "selected", disabled: "disabled", avatarUrl: "avatarUrl", symbolId: "symbolId", disabledTooltip: "disabledTooltip", badgeText: "badgeText", dividerEnabled: "dividerEnabled", network: "network" }, ngImport: i0, template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option with-caption\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [size]=\"24\"\n [profilePicture]=\"avatarUrl\"\n [username]=\"text\"\n [showInitials]=\"true\"\n [network]=\"network\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId\" />\n }\n <div class=\"texts\">\n <div class=\"first-line\">\n <span\n class=\"label\"\n [title]=\"text\">\n {{ text }}\n </span>\n @if (badgeText) {\n <ap-badge color=\"blue\">\n {{ badgeText }}\n </ap-badge>\n }\n </div>\n <span\n class=\"caption\"\n [title]=\"caption\">\n {{ caption }}\n </span>\n </div>\n @if (selected) {\n <ap-symbol\n class=\"option-selected\"\n symbolId=\"check\"\n color=\"electric-blue\"\n size=\"sm\" />\n }\n</div>\n@if (dividerEnabled) {\n <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-single-two-lines .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-two-lines .option .option-selected{margin-left:auto}ap-dropdown-item-single-two-lines .option .texts{flex:1;overflow:auto;display:flex;flex-direction:column}ap-dropdown-item-single-two-lines .option .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-two-lines .option .texts .first-line .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltipPosition", "apTooltip", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
233
233
|
}
|
|
234
234
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DropdownItemSingleTwoLinesComponent, decorators: [{
|
|
235
235
|
type: Component,
|
|
236
|
-
args: [{ selector: 'ap-dropdown-item-single-two-lines', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, AvatarComponent, BadgeComponent, TooltipDirective], template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option with-caption\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [size]=\"24\"\n [profilePicture]=\"avatarUrl\"\n [username]=\"text\"\n [showInitials]=\"true\"\n [network]=\"network\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"
|
|
236
|
+
args: [{ selector: 'ap-dropdown-item-single-two-lines', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, AvatarComponent, BadgeComponent, TooltipDirective], template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option with-caption\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [size]=\"24\"\n [profilePicture]=\"avatarUrl\"\n [username]=\"text\"\n [showInitials]=\"true\"\n [network]=\"network\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId\" />\n }\n <div class=\"texts\">\n <div class=\"first-line\">\n <span\n class=\"label\"\n [title]=\"text\">\n {{ text }}\n </span>\n @if (badgeText) {\n <ap-badge color=\"blue\">\n {{ badgeText }}\n </ap-badge>\n }\n </div>\n <span\n class=\"caption\"\n [title]=\"caption\">\n {{ caption }}\n </span>\n </div>\n @if (selected) {\n <ap-symbol\n class=\"option-selected\"\n symbolId=\"check\"\n color=\"electric-blue\"\n size=\"sm\" />\n }\n</div>\n@if (dividerEnabled) {\n <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-single-two-lines .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-two-lines .option .option-selected{margin-left:auto}ap-dropdown-item-single-two-lines .option .texts{flex:1;overflow:auto;display:flex;flex-direction:column}ap-dropdown-item-single-two-lines .option .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-two-lines .option .texts .first-line .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
|
|
237
237
|
}], propDecorators: { text: [{
|
|
238
238
|
type: Input,
|
|
239
239
|
args: [{ required: true }]
|
|
@@ -293,11 +293,11 @@ class DropdownSearchFormComponent {
|
|
|
293
293
|
this.createNew.emit(this.searchTermSignal());
|
|
294
294
|
}
|
|
295
295
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DropdownSearchFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
296
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DropdownSearchFormComponent, isStandalone: true, selector: "ap-dropdown-search-form", inputs: { searchPlaceholder: "searchPlaceholder", createNewEnabled: "createNewEnabled", createText: "createText", select: "select" }, outputs: { createNew: "createNew" }, viewQueries: [{ propertyName: "inputSearch", first: true, predicate: InputSearchComponent, descendants: true }, { propertyName: "notFoundTpl", first: true, predicate: ["notFoundTpl"], descendants: true, read: TemplateRef }, { propertyName: "loadingTpl", first: true, predicate: ["loadingTpl"], descendants: true, read: TemplateRef }, { propertyName: "createNewTpl", first: true, predicate: ["createNewTpl"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<ap-input-search\n class=\"dropdown-search-input\"\n [ngModel]=\"searchTermSignal()\"\n [placeholder]=\"searchPlaceholder\"\n (ngModelChange)=\"searchTerm$.next($event)\" />\n\n<ng-template #notFoundTpl>\n <div class=\"option not-found\">\n <span>{{ select.notFoundText ? select.notFoundText : 'Not found text' }}</span>\n </div>\n</ng-template>\n\n<ng-template #loadingTpl>\n <div class=\"loading-state\">\n <ap-loader diameter=\"30\" />\n <span>\n {{ select.loadingText ? select.loadingText : 'Loading Items' }}\n </span>\n </div>\n</ng-template>\n\n<ng-template\n #createNewTpl\n let-searchTerm=\"searchTerm\">\n <button\n class=\"create-new\"\n type=\"button\"\n (click)=\"onCreateNew()\">\n <ap-symbol\n symbolId=\"
|
|
296
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DropdownSearchFormComponent, isStandalone: true, selector: "ap-dropdown-search-form", inputs: { searchPlaceholder: "searchPlaceholder", createNewEnabled: "createNewEnabled", createText: "createText", select: "select" }, outputs: { createNew: "createNew" }, viewQueries: [{ propertyName: "inputSearch", first: true, predicate: InputSearchComponent, descendants: true }, { propertyName: "notFoundTpl", first: true, predicate: ["notFoundTpl"], descendants: true, read: TemplateRef }, { propertyName: "loadingTpl", first: true, predicate: ["loadingTpl"], descendants: true, read: TemplateRef }, { propertyName: "createNewTpl", first: true, predicate: ["createNewTpl"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<ap-input-search\n class=\"dropdown-search-input\"\n [ngModel]=\"searchTermSignal()\"\n [placeholder]=\"searchPlaceholder\"\n (ngModelChange)=\"searchTerm$.next($event)\" />\n\n<ng-template #notFoundTpl>\n <div class=\"option not-found\">\n <span>{{ select.notFoundText ? select.notFoundText : 'Not found text' }}</span>\n </div>\n</ng-template>\n\n<ng-template #loadingTpl>\n <div class=\"loading-state\">\n <ap-loader diameter=\"30\" />\n <span>\n {{ select.loadingText ? select.loadingText : 'Loading Items' }}\n </span>\n </div>\n</ng-template>\n\n<ng-template\n #createNewTpl\n let-searchTerm=\"searchTerm\">\n <button\n class=\"create-new\"\n type=\"button\"\n (click)=\"onCreateNew()\">\n <ap-symbol\n symbolId=\"plus\"\n size=\"sm\" />\n <span>\n {{ createText }}\n {{ searchTerm ? searchTerm : '' }}\n </span>\n </button>\n</ng-template>\n", styles: ["ap-dropdown-search-form .dropdown-search-input .ap-input-group{width:100%}ap-dropdown-search-form .dropdown-search-input .ap-input-group input{width:100%}ap-dropdown-search-form .dropdown-search-input .ap-input-group input:placeholder-shown{text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoaderComponent, selector: "ap-loader", inputs: ["color", "diameter"] }, { kind: "component", type: InputSearchComponent, selector: "ap-input-search", inputs: ["id", "placeholder", "clearable"], outputs: ["focus", "blur", "keyup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
297
297
|
}
|
|
298
298
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DropdownSearchFormComponent, decorators: [{
|
|
299
299
|
type: Component,
|
|
300
|
-
args: [{ selector: 'ap-dropdown-search-form', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [InputGroupComponent, InputDirective, SymbolComponent, FormsModule, LoaderComponent, InputSearchComponent], template: "<ap-input-search\n class=\"dropdown-search-input\"\n [ngModel]=\"searchTermSignal()\"\n [placeholder]=\"searchPlaceholder\"\n (ngModelChange)=\"searchTerm$.next($event)\" />\n\n<ng-template #notFoundTpl>\n <div class=\"option not-found\">\n <span>{{ select.notFoundText ? select.notFoundText : 'Not found text' }}</span>\n </div>\n</ng-template>\n\n<ng-template #loadingTpl>\n <div class=\"loading-state\">\n <ap-loader diameter=\"30\" />\n <span>\n {{ select.loadingText ? select.loadingText : 'Loading Items' }}\n </span>\n </div>\n</ng-template>\n\n<ng-template\n #createNewTpl\n let-searchTerm=\"searchTerm\">\n <button\n class=\"create-new\"\n type=\"button\"\n (click)=\"onCreateNew()\">\n <ap-symbol\n symbolId=\"
|
|
300
|
+
args: [{ selector: 'ap-dropdown-search-form', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [InputGroupComponent, InputDirective, SymbolComponent, FormsModule, LoaderComponent, InputSearchComponent], template: "<ap-input-search\n class=\"dropdown-search-input\"\n [ngModel]=\"searchTermSignal()\"\n [placeholder]=\"searchPlaceholder\"\n (ngModelChange)=\"searchTerm$.next($event)\" />\n\n<ng-template #notFoundTpl>\n <div class=\"option not-found\">\n <span>{{ select.notFoundText ? select.notFoundText : 'Not found text' }}</span>\n </div>\n</ng-template>\n\n<ng-template #loadingTpl>\n <div class=\"loading-state\">\n <ap-loader diameter=\"30\" />\n <span>\n {{ select.loadingText ? select.loadingText : 'Loading Items' }}\n </span>\n </div>\n</ng-template>\n\n<ng-template\n #createNewTpl\n let-searchTerm=\"searchTerm\">\n <button\n class=\"create-new\"\n type=\"button\"\n (click)=\"onCreateNew()\">\n <ap-symbol\n symbolId=\"plus\"\n size=\"sm\" />\n <span>\n {{ createText }}\n {{ searchTerm ? searchTerm : '' }}\n </span>\n </button>\n</ng-template>\n", styles: ["ap-dropdown-search-form .dropdown-search-input .ap-input-group{width:100%}ap-dropdown-search-form .dropdown-search-input .ap-input-group input{width:100%}ap-dropdown-search-form .dropdown-search-input .ap-input-group input:placeholder-shown{text-overflow:ellipsis}\n"] }]
|
|
301
301
|
}], ctorParameters: () => [], propDecorators: { searchPlaceholder: [{
|
|
302
302
|
type: Input
|
|
303
303
|
}], createNewEnabled: [{
|
|
@@ -326,60 +326,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
|
|
|
326
326
|
}] } });
|
|
327
327
|
|
|
328
328
|
class SelectLabelMultipleComponent {
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
}
|
|
337
|
-
}
|
|
338
|
-
set _bindLabel(bindLabel) {
|
|
339
|
-
this.bindLabelSignal.set(bindLabel);
|
|
340
|
-
}
|
|
341
|
-
set _bindValue(bindValue) {
|
|
342
|
-
this.bindValueSignal.set(bindValue);
|
|
343
|
-
}
|
|
344
|
-
set _bindAvatarUrl(bindAvatarUrl) {
|
|
345
|
-
this.bindAvatarUrlSignal.set(bindAvatarUrl);
|
|
346
|
-
}
|
|
347
|
-
removeItem = new EventEmitter();
|
|
329
|
+
displayType = input('label');
|
|
330
|
+
selectedItems = input.required();
|
|
331
|
+
bindLabel = input('');
|
|
332
|
+
bindValue = input('');
|
|
333
|
+
bindAvatarUrl = input('');
|
|
334
|
+
bindSymbolId = input('');
|
|
335
|
+
removeItem = output();
|
|
348
336
|
elementRef = inject(ElementRef);
|
|
349
337
|
injector = inject(EnvironmentInjector);
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
label: this.bindLabelSignal() ? item[this.bindLabelSignal()] : item,
|
|
359
|
-
avatarUrl: this.bindAvatarUrlSignal() ? item[this.bindAvatarUrlSignal()] : '',
|
|
360
|
-
value: item,
|
|
361
|
-
};
|
|
362
|
-
});
|
|
363
|
-
});
|
|
338
|
+
selectedLabels = computed(() => this.selectedItems().map(item => {
|
|
339
|
+
return {
|
|
340
|
+
label: this.bindLabel() ? item[this.bindLabel()] : item,
|
|
341
|
+
avatarUrl: this.bindAvatarUrl() ? item[this.bindAvatarUrl()] : '',
|
|
342
|
+
symbolId: this.bindSymbolId() ? item[this.bindSymbolId()] : null,
|
|
343
|
+
value: item,
|
|
344
|
+
};
|
|
345
|
+
}));
|
|
364
346
|
valueContainerWidth = signal(0);
|
|
365
|
-
|
|
366
|
-
trackByItem = (_, item) => (this.
|
|
347
|
+
hiddenCount = signal(0);
|
|
348
|
+
trackByItem = (_, item) => (this.bindValue() ? item.value[this.bindValue()] : item.value);
|
|
367
349
|
ngAfterViewInit() {
|
|
368
350
|
const parentWidth = this.elementRef.nativeElement.parentElement?.offsetWidth;
|
|
369
351
|
this.valueContainerWidth.set(parentWidth ?? 0);
|
|
370
352
|
runInInjectionContext(this.injector, () => {
|
|
371
353
|
effect(() => {
|
|
372
|
-
const selectedValues = this.
|
|
373
|
-
const
|
|
354
|
+
const selectedValues = this.selectedItems();
|
|
355
|
+
const selectValueContainerWidth = this.valueContainerWidth() - 30;
|
|
374
356
|
const timeout = setTimeout(() => {
|
|
375
|
-
this.calculateResponsiveLabels(
|
|
357
|
+
this.calculateResponsiveLabels(selectValueContainerWidth, selectedValues);
|
|
376
358
|
}, 100);
|
|
377
359
|
return () => {
|
|
378
360
|
clearTimeout(timeout);
|
|
379
361
|
};
|
|
380
|
-
}, {
|
|
381
|
-
allowSignalWrites: true,
|
|
382
|
-
});
|
|
362
|
+
}, { allowSignalWrites: true });
|
|
383
363
|
});
|
|
384
364
|
}
|
|
385
365
|
calculateResponsiveLabels(containerWidth, selectedValues) {
|
|
@@ -403,32 +383,15 @@ class SelectLabelMultipleComponent {
|
|
|
403
383
|
}
|
|
404
384
|
}
|
|
405
385
|
this.elementRef.nativeElement.getElementsByClassName('multiple-item')[0].style.maxWidth = `${totalWidth}px`;
|
|
406
|
-
this.
|
|
386
|
+
this.hiddenCount.set(hiddenCount);
|
|
407
387
|
}
|
|
408
388
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: SelectLabelMultipleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
409
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: SelectLabelMultipleComponent, isStandalone: true, selector: "ap-select-label-multiple", inputs: {
|
|
389
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: SelectLabelMultipleComponent, isStandalone: true, selector: "ap-select-label-multiple", inputs: { displayType: { classPropertyName: "displayType", publicName: "displayType", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: true, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindAvatarUrl: { classPropertyName: "bindAvatarUrl", publicName: "bindAvatarUrl", isSignal: true, isRequired: false, transformFunction: null }, bindSymbolId: { classPropertyName: "bindSymbolId", publicName: "bindSymbolId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removeItem: "removeItem" }, ngImport: i0, template: "<div class=\"multiple-item\">\n @for (item of selectedLabels(); track trackByItem($index, item)) {\n @if (displayType() === 'label') {\n <ap-label\n class=\"item\"\n color=\"blue\"\n removable=\"true\"\n [content]=\"item.label\"\n (remove)=\"removeItem.emit(item.value)\" />\n }\n\n @if (displayType() === 'tag') {\n <ap-tag\n class=\"item text-item\"\n clearable=\"true\"\n color=\"grey\"\n (clear)=\"removeItem.emit(item.value)\">\n @if (item.avatarUrl) {\n <ap-avatar\n [size]=\"16\"\n [profilePicture]=\"item.avatarUrl\"\n [username]=\"item.label\"\n [showInitials]=\"true\" />\n } @else if (item.symbolId) {\n <ap-symbol\n size=\"sm\"\n [attr.symbol-id]=\"item.symbolId\"\n [symbolId]=\"item.symbolId\" />\n }\n {{ item.label }}\n </ap-tag>\n }\n }\n</div>\n\n@if (hiddenCount() > 0) {\n <div class=\"remaining\">\n @if (displayType() === 'tag') {\n <ap-tag\n class=\"text-item\"\n color=\"grey\"\n clearable=\"false\">\n +{{ hiddenCount() }}\n </ap-tag>\n }\n @if (displayType() === 'label') {\n <ap-label\n color=\"blue\"\n removable=\"false\"\n [content]=\"'+' + hiddenCount()\" />\n }\n </div>\n}\n", styles: ["ap-select-label-multiple{display:flex}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "ap-label", inputs: ["content", "selectorWidth", "removable"], outputs: ["remove"] }, { kind: "component", type: TagComponent, selector: "ap-tag", inputs: ["clearable", "color", "mini"], outputs: ["clear"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
410
390
|
}
|
|
411
391
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: SelectLabelMultipleComponent, decorators: [{
|
|
412
392
|
type: Component,
|
|
413
|
-
args: [{ selector: 'ap-select-label-multiple', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LabelComponent, TagComponent, AvatarComponent], template: "<div class=\"multiple-item\">\n @for (item of selectedLabels(); track trackByItem($index, item)) {\n @if (
|
|
414
|
-
}]
|
|
415
|
-
type: Input,
|
|
416
|
-
args: [{ alias: 'displayType' }]
|
|
417
|
-
}], _selectedItems: [{
|
|
418
|
-
type: Input,
|
|
419
|
-
args: [{ required: true, alias: 'selectedItems' }]
|
|
420
|
-
}], _bindLabel: [{
|
|
421
|
-
type: Input,
|
|
422
|
-
args: [{ alias: 'bindLabel' }]
|
|
423
|
-
}], _bindValue: [{
|
|
424
|
-
type: Input,
|
|
425
|
-
args: [{ alias: 'bindValue' }]
|
|
426
|
-
}], _bindAvatarUrl: [{
|
|
427
|
-
type: Input,
|
|
428
|
-
args: [{ alias: 'bindAvatarUrl' }]
|
|
429
|
-
}], removeItem: [{
|
|
430
|
-
type: Output
|
|
431
|
-
}] } });
|
|
393
|
+
args: [{ selector: 'ap-select-label-multiple', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LabelComponent, TagComponent, AvatarComponent, SymbolComponent], template: "<div class=\"multiple-item\">\n @for (item of selectedLabels(); track trackByItem($index, item)) {\n @if (displayType() === 'label') {\n <ap-label\n class=\"item\"\n color=\"blue\"\n removable=\"true\"\n [content]=\"item.label\"\n (remove)=\"removeItem.emit(item.value)\" />\n }\n\n @if (displayType() === 'tag') {\n <ap-tag\n class=\"item text-item\"\n clearable=\"true\"\n color=\"grey\"\n (clear)=\"removeItem.emit(item.value)\">\n @if (item.avatarUrl) {\n <ap-avatar\n [size]=\"16\"\n [profilePicture]=\"item.avatarUrl\"\n [username]=\"item.label\"\n [showInitials]=\"true\" />\n } @else if (item.symbolId) {\n <ap-symbol\n size=\"sm\"\n [attr.symbol-id]=\"item.symbolId\"\n [symbolId]=\"item.symbolId\" />\n }\n {{ item.label }}\n </ap-tag>\n }\n }\n</div>\n\n@if (hiddenCount() > 0) {\n <div class=\"remaining\">\n @if (displayType() === 'tag') {\n <ap-tag\n class=\"text-item\"\n color=\"grey\"\n clearable=\"false\">\n +{{ hiddenCount() }}\n </ap-tag>\n }\n @if (displayType() === 'label') {\n <ap-label\n color=\"blue\"\n removable=\"false\"\n [content]=\"'+' + hiddenCount()\" />\n }\n </div>\n}\n", styles: ["ap-select-label-multiple{display:flex}\n"] }]
|
|
394
|
+
}] });
|
|
432
395
|
|
|
433
396
|
class SelectLabelSingleComponent {
|
|
434
397
|
displayType = 'text';
|
|
@@ -469,7 +432,7 @@ class SelectBaseDirective {
|
|
|
469
432
|
this.selectComponent.markFirst = false;
|
|
470
433
|
this.selectComponent.selectableGroupAsModel = false;
|
|
471
434
|
this.selectComponent.tabIndex = 0;
|
|
472
|
-
this.symbolRegistry.registerSymbols([
|
|
435
|
+
this.symbolRegistry.registerSymbols([apCheck, apPlus]);
|
|
473
436
|
}
|
|
474
437
|
ngOnInit() {
|
|
475
438
|
if (this.symbolId) {
|