@agorapulse/ui-components 20.4.12 → 20.4.13
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-20.4.13.tgz +0 -0
- package/fesm2022/agorapulse-ui-components-filter-dropdown.mjs +91 -29
- package/fesm2022/agorapulse-ui-components-filter-dropdown.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-nav-selector.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-nav-selector.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-select.mjs +33 -65
- package/fesm2022/agorapulse-ui-components-select.mjs.map +1 -1
- package/filter-dropdown/index.d.ts +20 -9
- package/package.json +1 -1
- package/select/index.d.ts +5 -7
- package/agorapulse-ui-components-20.4.12.tgz +0 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Input, ViewEncapsulation, Component, input, inject, ElementRef, Renderer2, ViewContainerRef, effect, Directive, output, HostListener, ViewChild, ChangeDetectionStrategy, EventEmitter, Output, signal, TemplateRef,
|
|
2
|
+
import { Input, ViewEncapsulation, Component, input, inject, ElementRef, Renderer2, ViewContainerRef, effect, Directive, output, HostListener, ViewChild, ChangeDetectionStrategy, EventEmitter, Output, signal, TemplateRef, computed, viewChild, viewChildren, afterRenderEffect, 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';
|
|
@@ -296,7 +296,7 @@ class DropdownItemMultipleOneLineComponent {
|
|
|
296
296
|
}
|
|
297
297
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DropdownItemMultipleOneLineComponent, decorators: [{
|
|
298
298
|
type: Component,
|
|
299
|
-
args: [{ selector: 'ap-dropdown-item-multiple-one-line', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, CheckboxComponent, AvatarComponent, BadgeComponent, TooltipDirective
|
|
299
|
+
args: [{ selector: 'ap-dropdown-item-multiple-one-line', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, CheckboxComponent, AvatarComponent, BadgeComponent, TooltipDirective], template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip ?? selectMultiple?.maxItemsTooltip()\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div\n class=\"option multiple\"\n [class.feature-locked-option]=\"isFeatureLocked()\">\n <ap-checkbox\n #checkbox\n [checked]=\"selected\"\n [disabled]=\"disabled || isFeatureLocked()\"\n [name]=\"'option-selection-' + htmlId\"\n (change)=\"onCheckboxChange($event)\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [rounded]=\"roundedAvatar()\"\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 [color]=\"symbolColor() ?? ''\"\n [apTooltip]=\"symbolTooltipText() ? symbolTooltipText() : undefined\" />\n }\n <span\n class=\"option-item\"\n [class.feature-locked-label]=\"isFeatureLocked()\"\n [title]=\"text\">\n {{ text }}\n </span>\n @if (badgeText) {\n <ap-badge color=\"blue\">\n {{ badgeText }}\n </ap-badge>\n }\n </ap-checkbox>\n\n @if (isFeatureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n color=\"purple\"\n size=\"sm\" />\n }\n\n @if (onlyEnabled && !disabled && !isFeatureLocked()) {\n <button\n class=\"standalone-link\"\n type=\"button\"\n (click)=\"$event.preventDefault(); $event.stopPropagation(); onSelectOnly()\">\n {{ onlyText }}\n </button>\n }\n</div>\n\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);width:100%}ap-dropdown-item-multiple-one-line .option ap-checkbox{width:100%}ap-dropdown-item-multiple-one-line .option ap-checkbox label{display:flex;flex-direction:row;gap:var(--ref-spacing-xxs);align-items:center}ap-dropdown-item-multiple-one-line .option-item{width:100%;word-break:break-word}\n"] }]
|
|
300
300
|
}], ctorParameters: () => [], propDecorators: { text: [{
|
|
301
301
|
type: Input,
|
|
302
302
|
args: [{ required: true }]
|
|
@@ -625,86 +625,54 @@ class SelectLabelMultipleComponent {
|
|
|
625
625
|
roundedAvatar = input(true, ...(ngDevMode ? [{ debugName: "roundedAvatar" }] : []));
|
|
626
626
|
bindNetwork = input('', ...(ngDevMode ? [{ debugName: "bindNetwork" }] : []));
|
|
627
627
|
removeItem = output();
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
const lowercaseCharCount = label.length - uppercaseCharCount;
|
|
636
|
-
// Approximate upper and lower case characters width (14px font size)
|
|
637
|
-
const approximateUppercaseCharWidth = 14;
|
|
638
|
-
const approximateLowercaseCharWidth = 8;
|
|
639
|
-
// Calculate approximate character width
|
|
640
|
-
const approximateCharWidth = (uppercaseCharCount * approximateUppercaseCharWidth + lowercaseCharCount * approximateLowercaseCharWidth) / label.length;
|
|
641
|
-
// Maximum character length that can fit in the container (substract icons and padding)
|
|
642
|
-
const maxCharLength = (this.valueContainerWidth() - 24 - 8 - 20 - 8) / approximateCharWidth;
|
|
643
|
-
// Last index of the character that can fit in the container
|
|
644
|
-
const ellipsisLastIndex = Math.min(label.length, maxCharLength);
|
|
645
|
-
// Substract the ellipsis characters (...) length if the label is truncated
|
|
646
|
-
const lastIndex = ellipsisLastIndex + 1 < label.length ? ellipsisLastIndex - 2 : ellipsisLastIndex;
|
|
647
|
-
// Get the truncated label
|
|
648
|
-
const truncatedLabel = label.slice(0, lastIndex);
|
|
649
|
-
// Return the label with ellipsis if it's truncated
|
|
650
|
-
const ellipsisLabel = truncatedLabel.length < label.length ? truncatedLabel + '...' : truncatedLabel;
|
|
651
|
-
return {
|
|
652
|
-
label: ellipsisLabel,
|
|
653
|
-
avatarUrl: this.bindAvatarUrl() ? item[this.bindAvatarUrl()] : '',
|
|
654
|
-
symbolId: this.bindSymbolId() ? item[this.bindSymbolId()] : null,
|
|
655
|
-
value: item,
|
|
656
|
-
network: this.bindNetwork() ? item[this.bindNetwork()] : undefined,
|
|
657
|
-
};
|
|
658
|
-
}), ...(ngDevMode ? [{ debugName: "selectedLabels" }] : []));
|
|
659
|
-
valueContainerWidth = signal(0, ...(ngDevMode ? [{ debugName: "valueContainerWidth" }] : []));
|
|
628
|
+
selectedLabels = computed(() => this.selectedItems().map(item => ({
|
|
629
|
+
label: this.bindLabel() ? item[this.bindLabel()] : item,
|
|
630
|
+
avatarUrl: this.bindAvatarUrl() ? item[this.bindAvatarUrl()] : '',
|
|
631
|
+
symbolId: this.bindSymbolId() ? item[this.bindSymbolId()] : null,
|
|
632
|
+
value: item,
|
|
633
|
+
network: this.bindNetwork() ? item[this.bindNetwork()] : undefined,
|
|
634
|
+
})), ...(ngDevMode ? [{ debugName: "selectedLabels" }] : []));
|
|
660
635
|
hiddenCount = signal(0, ...(ngDevMode ? [{ debugName: "hiddenCount" }] : []));
|
|
661
636
|
trackByItem = (_, item) => (this.bindValue() ? item.value[this.bindValue()] : item.value);
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
const selectValueContainerWidth = this.valueContainerWidth() - 30;
|
|
669
|
-
const timeout = setTimeout(() => {
|
|
670
|
-
this.calculateResponsiveLabels(selectValueContainerWidth, selectedValues);
|
|
671
|
-
}, 100);
|
|
672
|
-
return () => {
|
|
673
|
-
clearTimeout(timeout);
|
|
674
|
-
};
|
|
675
|
-
});
|
|
676
|
-
});
|
|
677
|
-
}
|
|
678
|
-
calculateResponsiveLabels(containerWidth, selectedValues) {
|
|
679
|
-
if (containerWidth === 0 || !selectedValues.length) {
|
|
637
|
+
mainContainer = viewChild.required('mainContainer', { read: ElementRef });
|
|
638
|
+
itemsElement = viewChildren('itemElement', ...(ngDevMode ? [{ debugName: "itemsElement", read: ElementRef }] : [{ read: ElementRef }]));
|
|
639
|
+
responsiveLayout = afterRenderEffect(() => {
|
|
640
|
+
const itemRefs = this.itemsElement();
|
|
641
|
+
if (!itemRefs.length) {
|
|
642
|
+
this.hiddenCount.set(0);
|
|
680
643
|
return;
|
|
681
644
|
}
|
|
645
|
+
const containerEl = this.mainContainer().nativeElement;
|
|
646
|
+
const containerWidth = (containerEl.parentElement?.clientWidth ?? 0) - 30;
|
|
647
|
+
if (containerWidth <= 0)
|
|
648
|
+
return;
|
|
649
|
+
// Reset maxWidth so items aren't constrained by a previous pass
|
|
650
|
+
containerEl.style.maxWidth = '';
|
|
682
651
|
let totalWidth = 0;
|
|
683
652
|
let hiddenCount = 0;
|
|
684
653
|
const itemGap = 4;
|
|
685
|
-
const
|
|
686
|
-
|
|
687
|
-
const
|
|
688
|
-
const itemWidth = item.clientWidth + itemGap;
|
|
654
|
+
for (const ref of itemRefs) {
|
|
655
|
+
const el = ref.nativeElement;
|
|
656
|
+
const itemWidth = el.getBoundingClientRect().width + itemGap;
|
|
689
657
|
if (totalWidth + itemWidth < containerWidth && !hiddenCount) {
|
|
690
658
|
totalWidth += itemWidth;
|
|
691
|
-
|
|
659
|
+
el.style.visibility = 'visible';
|
|
692
660
|
}
|
|
693
661
|
else {
|
|
694
|
-
|
|
662
|
+
el.style.visibility = 'hidden';
|
|
695
663
|
hiddenCount++;
|
|
696
664
|
}
|
|
697
665
|
}
|
|
698
|
-
|
|
666
|
+
containerEl.style.maxWidth = `${totalWidth}px`;
|
|
699
667
|
this.hiddenCount.set(hiddenCount);
|
|
700
|
-
}
|
|
668
|
+
});
|
|
701
669
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SelectLabelMultipleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
702
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SelectLabelMultipleComponent, isStandalone: true, selector: "ap-select-label-multiple", inputs: { displayType: { classPropertyName: "displayType", publicName: "displayType", isSignal: true, isRequired: false, transformFunction: null }, tagColor: { classPropertyName: "tagColor", publicName: "tagColor", 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 }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null }, bindNetwork: { classPropertyName: "bindNetwork", publicName: "bindNetwork", 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]=\"!item.value.disabled\"\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]=\"!item.value.disabled\"\n [color]=\"tagColor()\"\n (clear)=\"removeItem.emit(item.value)\">\n @if (item.avatarUrl) {\n <ap-avatar\n [size]=\"16\"\n [rounded]=\"roundedAvatar()\"\n [profilePicture]=\"item.avatarUrl\"\n [username]=\"item.label\"\n [showInitials]=\"true\"\n [network]=\"item.network\"/>\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 clearable=\"false\"\n [color]=\"tagColor()\">\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", "add", "color", "mini"], outputs: ["clear", "added"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
670
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SelectLabelMultipleComponent, isStandalone: true, selector: "ap-select-label-multiple", inputs: { displayType: { classPropertyName: "displayType", publicName: "displayType", isSignal: true, isRequired: false, transformFunction: null }, tagColor: { classPropertyName: "tagColor", publicName: "tagColor", 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 }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null }, bindNetwork: { classPropertyName: "bindNetwork", publicName: "bindNetwork", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removeItem: "removeItem" }, viewQueries: [{ propertyName: "mainContainer", first: true, predicate: ["mainContainer"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "itemsElement", predicate: ["itemElement"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div #mainContainer class=\"multiple-item\">\n @for (item of selectedLabels(); track trackByItem($index, item)) {\n @if (displayType() === 'label') {\n <ap-label\n #itemElement\n class=\"item\"\n color=\"blue\"\n [removable]=\"!item.value.disabled\"\n [content]=\"item.label\"\n (remove)=\"removeItem.emit(item.value)\" />\n }\n\n @if (displayType() === 'tag') {\n <ap-tag\n #itemElement\n class=\"item text-item\"\n [clearable]=\"!item.value.disabled\"\n [color]=\"tagColor()\"\n (clear)=\"removeItem.emit(item.value)\">\n @if (item.avatarUrl) {\n <ap-avatar\n [size]=\"16\"\n [rounded]=\"roundedAvatar()\"\n [profilePicture]=\"item.avatarUrl\"\n [username]=\"item.label\"\n [showInitials]=\"true\"\n [network]=\"item.network\"/>\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 clearable=\"false\"\n [color]=\"tagColor()\">\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;width:100%}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "ap-label", inputs: ["content", "selectorWidth", "removable"], outputs: ["remove"] }, { kind: "component", type: TagComponent, selector: "ap-tag", inputs: ["clearable", "add", "color", "mini"], outputs: ["clear", "added"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
703
671
|
}
|
|
704
672
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SelectLabelMultipleComponent, decorators: [{
|
|
705
673
|
type: Component,
|
|
706
|
-
args: [{ selector: 'ap-select-label-multiple', 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]=\"!item.value.disabled\"\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]=\"!item.value.disabled\"\n [color]=\"tagColor()\"\n (clear)=\"removeItem.emit(item.value)\">\n @if (item.avatarUrl) {\n <ap-avatar\n [size]=\"16\"\n [rounded]=\"roundedAvatar()\"\n [profilePicture]=\"item.avatarUrl\"\n [username]=\"item.label\"\n [showInitials]=\"true\"\n [network]=\"item.network\"/>\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 clearable=\"false\"\n [color]=\"tagColor()\">\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"] }]
|
|
707
|
-
}], propDecorators: { displayType: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayType", required: false }] }], tagColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagColor", required: false }] }], selectedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItems", required: true }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], bindAvatarUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindAvatarUrl", required: false }] }], bindSymbolId: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindSymbolId", required: false }] }], roundedAvatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "roundedAvatar", required: false }] }], bindNetwork: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindNetwork", required: false }] }], removeItem: [{ type: i0.Output, args: ["removeItem"] }] } });
|
|
674
|
+
args: [{ selector: 'ap-select-label-multiple', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LabelComponent, TagComponent, AvatarComponent, SymbolComponent], template: "<div #mainContainer class=\"multiple-item\">\n @for (item of selectedLabels(); track trackByItem($index, item)) {\n @if (displayType() === 'label') {\n <ap-label\n #itemElement\n class=\"item\"\n color=\"blue\"\n [removable]=\"!item.value.disabled\"\n [content]=\"item.label\"\n (remove)=\"removeItem.emit(item.value)\" />\n }\n\n @if (displayType() === 'tag') {\n <ap-tag\n #itemElement\n class=\"item text-item\"\n [clearable]=\"!item.value.disabled\"\n [color]=\"tagColor()\"\n (clear)=\"removeItem.emit(item.value)\">\n @if (item.avatarUrl) {\n <ap-avatar\n [size]=\"16\"\n [rounded]=\"roundedAvatar()\"\n [profilePicture]=\"item.avatarUrl\"\n [username]=\"item.label\"\n [showInitials]=\"true\"\n [network]=\"item.network\"/>\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 clearable=\"false\"\n [color]=\"tagColor()\">\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;width:100%}\n"] }]
|
|
675
|
+
}], propDecorators: { displayType: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayType", required: false }] }], tagColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagColor", required: false }] }], selectedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItems", required: true }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], bindAvatarUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindAvatarUrl", required: false }] }], bindSymbolId: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindSymbolId", required: false }] }], roundedAvatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "roundedAvatar", required: false }] }], bindNetwork: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindNetwork", required: false }] }], removeItem: [{ type: i0.Output, args: ["removeItem"] }], mainContainer: [{ type: i0.ViewChild, args: ['mainContainer', { ...{ read: ElementRef }, isSignal: true }] }], itemsElement: [{ type: i0.ViewChildren, args: ['itemElement', { ...{ read: ElementRef }, isSignal: true }] }] } });
|
|
708
676
|
|
|
709
677
|
class SelectLabelSingleComponent {
|
|
710
678
|
displayType = input('text', ...(ngDevMode ? [{ debugName: "displayType" }] : []));
|
|
@@ -714,11 +682,11 @@ class SelectLabelSingleComponent {
|
|
|
714
682
|
showAvatarInitials = input(true, ...(ngDevMode ? [{ debugName: "showAvatarInitials" }] : []));
|
|
715
683
|
roundedAvatar = input(true, ...(ngDevMode ? [{ debugName: "roundedAvatar" }] : []));
|
|
716
684
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SelectLabelSingleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
717
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SelectLabelSingleComponent, isStandalone: true, selector: "ap-select-label-single", inputs: { displayType: { classPropertyName: "displayType", publicName: "displayType", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: true, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: true, isRequired: false, transformFunction: null }, showAvatarInitials: { classPropertyName: "showAvatarInitials", publicName: "showAvatarInitials", isSignal: true, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@switch (displayType()) {\n @case ('text') {\n <span\n class=\"text-item\"\n [title]=\"label()\">\n {{ label() }}\n </span>\n }\n @case ('label') {\n <ap-label\n color=\"blue\"\n [removable]=\"false\"\n [content]=\"label()\" />\n }\n @case ('tag') {\n <ap-tag\n class=\"text-item\"\n color=\"grey\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [rounded]=\"roundedAvatar()\"\n [size]=\"16\"\n [username]=\"label()\"\n [showInitials]=\"true\"\n [profilePicture]=\"avatarUrl()\" />\n }\n {{ label() }}\n </ap-tag>\n }\n @case ('withAvatar') {\n <ap-avatar\n
|
|
685
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SelectLabelSingleComponent, isStandalone: true, selector: "ap-select-label-single", inputs: { displayType: { classPropertyName: "displayType", publicName: "displayType", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: true, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: true, isRequired: false, transformFunction: null }, showAvatarInitials: { classPropertyName: "showAvatarInitials", publicName: "showAvatarInitials", isSignal: true, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@switch (displayType()) {\n @case ('text') {\n <span\n class=\"text-item\"\n [title]=\"label()\">\n {{ label() }}\n </span>\n }\n @case ('label') {\n <ap-label\n color=\"blue\"\n [removable]=\"false\"\n [content]=\"label()\" />\n }\n @case ('tag') {\n <ap-tag\n class=\"text-item\"\n color=\"grey\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [rounded]=\"roundedAvatar()\"\n [size]=\"16\"\n [username]=\"label()\"\n [showInitials]=\"true\"\n [profilePicture]=\"avatarUrl()\" />\n }\n {{ label() }}\n </ap-tag>\n }\n @case ('withAvatar') {\n @if (avatarUrl()) {\n <ap-avatar\n [rounded]=\"roundedAvatar()\"\n [size]=\"24\"\n [username]=\"label()\"\n [showInitials]=\"showAvatarInitials()\"\n [profilePicture]=\"avatarUrl()\"\n [network]=\"network()\" />\n }\n <span class=\"text-item\">\n {{ label() }}\n </span>\n }\n}\n", styles: ["ap-select-label-single{display:flex;gap:var(--ref-spacing-xxs);width:100%;align-items:center}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "ap-label", inputs: ["content", "selectorWidth", "removable"], outputs: ["remove"] }, { kind: "component", type: TagComponent, selector: "ap-tag", inputs: ["clearable", "add", "color", "mini"], outputs: ["clear", "added"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
718
686
|
}
|
|
719
687
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SelectLabelSingleComponent, decorators: [{
|
|
720
688
|
type: Component,
|
|
721
|
-
args: [{ selector: 'ap-select-label-single', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LabelComponent, TagComponent, AvatarComponent], template: "@switch (displayType()) {\n @case ('text') {\n <span\n class=\"text-item\"\n [title]=\"label()\">\n {{ label() }}\n </span>\n }\n @case ('label') {\n <ap-label\n color=\"blue\"\n [removable]=\"false\"\n [content]=\"label()\" />\n }\n @case ('tag') {\n <ap-tag\n class=\"text-item\"\n color=\"grey\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [rounded]=\"roundedAvatar()\"\n [size]=\"16\"\n [username]=\"label()\"\n [showInitials]=\"true\"\n [profilePicture]=\"avatarUrl()\" />\n }\n {{ label() }}\n </ap-tag>\n }\n @case ('withAvatar') {\n <ap-avatar\n
|
|
689
|
+
args: [{ selector: 'ap-select-label-single', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LabelComponent, TagComponent, AvatarComponent], template: "@switch (displayType()) {\n @case ('text') {\n <span\n class=\"text-item\"\n [title]=\"label()\">\n {{ label() }}\n </span>\n }\n @case ('label') {\n <ap-label\n color=\"blue\"\n [removable]=\"false\"\n [content]=\"label()\" />\n }\n @case ('tag') {\n <ap-tag\n class=\"text-item\"\n color=\"grey\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [rounded]=\"roundedAvatar()\"\n [size]=\"16\"\n [username]=\"label()\"\n [showInitials]=\"true\"\n [profilePicture]=\"avatarUrl()\" />\n }\n {{ label() }}\n </ap-tag>\n }\n @case ('withAvatar') {\n @if (avatarUrl()) {\n <ap-avatar\n [rounded]=\"roundedAvatar()\"\n [size]=\"24\"\n [username]=\"label()\"\n [showInitials]=\"showAvatarInitials()\"\n [profilePicture]=\"avatarUrl()\"\n [network]=\"network()\" />\n }\n <span class=\"text-item\">\n {{ label() }}\n </span>\n }\n}\n", styles: ["ap-select-label-single{display:flex;gap:var(--ref-spacing-xxs);width:100%;align-items:center}\n"] }]
|
|
722
690
|
}], propDecorators: { displayType: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayType", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], avatarUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarUrl", required: false }] }], network: [{ type: i0.Input, args: [{ isSignal: true, alias: "network", required: false }] }], showAvatarInitials: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAvatarInitials", required: false }] }], roundedAvatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "roundedAvatar", required: false }] }] } });
|
|
723
691
|
|
|
724
692
|
class SelectSingleDirective {
|