@agorapulse/ui-components 20.3.40 → 20.3.42
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.3.42.tgz +0 -0
- package/avatar/index.d.ts +12 -1
- package/avatar-group/index.d.ts +12 -17
- package/fesm2022/agorapulse-ui-components-action-dropdown.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-action-dropdown.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-avatar-group.mjs +19 -8
- package/fesm2022/agorapulse-ui-components-avatar-group.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-avatar.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-labels.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-labels.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-nav-selector.mjs +4 -4
- package/fesm2022/agorapulse-ui-components-nav-selector.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-radio-button-card.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-radio-button-card.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-select.mjs +9 -9
- package/fesm2022/agorapulse-ui-components-select.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-selection-dropdown.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-selection-dropdown.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-tooltip.mjs +107 -85
- package/fesm2022/agorapulse-ui-components-tooltip.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components.mjs +1 -1
- package/fesm2022/agorapulse-ui-components.mjs.map +1 -1
- package/index.d.ts +2 -2
- package/package.json +1 -1
- package/tooltip/index.d.ts +16 -14
- package/agorapulse-ui-components-20.3.40.tgz +0 -0
|
@@ -69,7 +69,7 @@ class RadioButtonCardComponent {
|
|
|
69
69
|
this.onModelTouched = fn;
|
|
70
70
|
}
|
|
71
71
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: RadioButtonCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
72
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: RadioButtonCardComponent, isStandalone: true, selector: "ap-radio-button-card", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, radioId: { classPropertyName: "radioId", publicName: "radioId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, linkUrl: { classPropertyName: "linkUrl", publicName: "linkUrl", isSignal: true, isRequired: false, transformFunction: null }, linkTitle: { classPropertyName: "linkTitle", publicName: "linkTitle", isSignal: true, isRequired: false, transformFunction: null }, titleSymbolId: { classPropertyName: "titleSymbolId", publicName: "titleSymbolId", isSignal: true, isRequired: false, transformFunction: null }, tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", isSignal: true, isRequired: false, transformFunction: null }, statusBadge: { classPropertyName: "statusBadge", publicName: "statusBadge", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, featureLocked: { classPropertyName: "featureLocked", publicName: "featureLocked", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null } }, providers: [withSymbols(apInfo)], ngImport: i0, template: "<div\n class=\"radio-button-card__container\"\n [class.radio-button-card__container--default]=\"mode() === 'default'\"\n [class.radio-button-card__container--card]=\"mode() === 'card'\"\n [class.radio-button-card__container--locked]=\"featureLocked()\"\n [class.radio-button-card__container--error]=\"hasError()\">\n <input\n type=\"radio\"\n class=\"radio-button-card__input\"\n [attr.id]=\"radioId()\"\n [attr.name]=\"computedName()\"\n [attr.aria-checked]=\"checked()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-labelledby]=\"ariaLabelledby()\"\n [attr.aria-describedby]=\"ariaDescribedby()\"\n [value]=\"value()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled() || featureLocked()\"\n (change)=\"select()\" />\n <label\n class=\"radio-button-card__label\"\n [attr.for]=\"radioId()\">\n @if (featureLocked()) {\n <div class=\"radio-button-card__lock-icon\">\n <ap-symbol symbolId=\"feature-lock\" />\n </div>\n } @else {\n <div class=\"radio-button-card__indicator\">\n <div class=\"radio-button-card__indicator-outer\">\n <div class=\"radio-button-card__indicator-inner\"></div>\n </div>\n </div>\n }\n <div class=\"radio-button-card__content\">\n @if (customContentEnabled()) {\n <div class=\"radio-button-card__structured-content\">\n <div class=\"radio-button-card__header\">\n <div class=\"radio-button-card__header-left\">\n @if (titleSymbolId()) {\n <ap-symbol\n class=\"radio-button-card__title-symbol\"\n color=\"grey-blue\"\n [symbolId]=\"titleSymbolId()\" />\n }\n @if (title()) {\n <div class=\"radio-button-card__title\">{{ title() }}</div>\n }\n </div>\n <div class=\"radio-button-card__header-right\">\n @if (statusBadge()) {\n <ap-status\n class=\"radio-button-card__status\"\n color=\"grey\"\n [dot]=\"false\">\n {{ statusBadge() }}\n </ap-status>\n }\n @if (tooltipText()) {\n <ap-symbol\n apTooltipPosition=\"top\"\n class=\"radio-button-card__tooltip-icon\"\n symbolId=\"info\"\n [apTooltip]=\"tooltipText()\" />\n }\n </div>\n </div>\n @if (description()) {\n <div class=\"radio-button-card__description\">{{ description() }}</div>\n }\n @if (linkUrl()) {\n <a\n class=\"standalone radio-button-card__link\"\n [href]=\"linkUrl()\"\n (click)=\"$event.stopPropagation()\">\n {{ linkTitle() }}\n </a>\n }\n </div>\n } @else {\n <ng-content />\n }\n </div>\n </label>\n</div>\n", styles: ["ap-radio-button-card{display:block}ap-radio-button-card .radio-button-card__container{--radio-border-color: var(--ref-color-grey-20);--radio-border-color-hover: var(--ref-color-grey-80);--radio-border-color-focus: var(--ref-color-grey-100);--radio-indicator-border: var(--ref-color-grey-60);--radio-indicator-border-hover: var(--ref-color-grey-80);--radio-indicator-border-focus: var(--ref-color-grey-100);--radio-indicator-fill: var(--ref-color-electric-blue-100);--radio-content-opacity: 1;--radio-cursor: pointer;position:relative;display:block;width:100%;transition:all .2s ease-in-out;border:1px solid var(--radio-border-color);border-radius:var(--ref-border-radius-md);background:var(--radio-background)}ap-radio-button-card .radio-button-card__container:has(input:not(:disabled)):hover:not(:focus-within){border-color:var(--radio-border-color-hover)}ap-radio-button-card .radio-button-card__container:focus-within:has(input:not(:disabled)){border-color:var(--radio-border-color-focus)}ap-radio-button-card .radio-button-card__container:has(input:focus-visible){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:2px}ap-radio-button-card .radio-button-card__container--default.radio-button-card__container{--radio-border-color: transparent;--radio-border-color-hover: transparent;--radio-border-color-focus: var(--ref-color-electric-blue-100);border-radius:var(--ref-border-radius-md)}ap-radio-button-card .radio-button-card__container--default.radio-button-card__container:has(input:focus-visible){outline:none}ap-radio-button-card .radio-button-card__container--default.radio-button-card__container:has(input:checked){--radio-border-color: transparent;--radio-border-color-hover: transparent;--radio-border-color-focus: transparent}ap-radio-button-card .radio-button-card__container:has(input:checked){--radio-border-color: var(--ref-color-electric-blue-100);--radio-border-color-hover: var(--ref-color-electric-blue-100);--radio-border-color-focus: var(--ref-color-electric-blue-100);--radio-indicator-border: var(--ref-color-electric-blue-100);--radio-indicator-border-hover: var(--ref-color-electric-blue-100);--radio-indicator-border-focus: var(--ref-color-electric-blue-100)}ap-radio-button-card .radio-button-card__container:has(input:disabled){--radio-border-color: var(--ref-color-grey-20);--radio-border-color-hover: var(--ref-color-grey-20);--radio-border-color-focus: var(--ref-color-grey-20);--radio-indicator-border: var(--ref-color-grey-40);--radio-indicator-border-hover: var(--ref-color-grey-40);--radio-indicator-border-focus: var(--ref-color-grey-40);--radio-indicator-fill: var(--ref-color-grey-60);--radio-content-opacity: .6;--radio-cursor: not-allowed}ap-radio-button-card .radio-button-card__container:has(input:disabled):has(input:checked){--radio-border-color: var(--ref-color-grey-40)}ap-radio-button-card .radio-button-card__container--default:has(input:disabled){--radio-border-color: transparent}ap-radio-button-card .radio-button-card__container--locked:has(input:disabled){--radio-border-color: var(--ref-color-purple-20);--radio-border-color-hover: var(--ref-color-purple-20);--radio-border-color-focus: var(--ref-color-purple-20);--radio-background: var(--ref-color-purple-10);--radio-cursor: not-allowed}ap-radio-button-card .radio-button-card__container--error{--radio-border-color: var(--ref-color-red-100);--radio-border-color-hover: var(--ref-color-red-60);--radio-border-color-focus: var(--ref-color-red-100);--radio-indicator-border: var(--ref-color-red-100);--radio-indicator-border-hover: var(--ref-color-red-60);--radio-indicator-border-focus: var(--ref-color-red-100);--radio-indicator-fill: var(--ref-color-red-100)}ap-radio-button-card .radio-button-card__container--error:has(input:checked){--radio-border-color: var(--ref-color-red-100);--radio-border-color-hover: var(--ref-color-red-60);--radio-border-color-focus: var(--ref-color-red-100);--radio-indicator-border: var(--ref-color-red-100);--radio-indicator-border-hover: var(--ref-color-red-60);--radio-indicator-border-focus: var(--ref-color-red-100)}ap-radio-button-card .radio-button-card__container--error:has(input:disabled){--radio-border-color-hover: var(--ref-color-red-100);--radio-border-color-focus: var(--ref-color-red-100)}ap-radio-button-card .radio-button-card__label{display:block;width:100%;padding:var(--ref-spacing-xs);padding-left:36px;cursor:var(--radio-cursor);text-align:left;font-family:inherit;font-size:inherit}ap-radio-button-card .radio-button-card__input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}ap-radio-button-card .radio-button-card__indicator{position:absolute;top:13px;left:12px;opacity:var(--radio-content-opacity)}ap-radio-button-card .radio-button-card__lock-icon{position:absolute;top:13px;left:12px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;color:var(--ref-color-purple-100)}ap-radio-button-card .radio-button-card__lock-icon ap-symbol{width:16px;height:16px}ap-radio-button-card .radio-button-card__indicator-outer{width:16px;height:16px;border:1px solid var(--radio-indicator-border);border-radius:50%;background:var(--ref-color-white);transition:all .2s ease-in-out;display:flex;align-items:center;justify-content:center}ap-radio-button-card .radio-button-card__container:has(input:not(:disabled)):hover:not(:focus-within) .radio-button-card__indicator-outer{border-color:var(--radio-indicator-border-hover)}ap-radio-button-card .radio-button-card__container:focus-within:has(input:not(:disabled)) .radio-button-card__indicator-outer{border-color:var(--radio-indicator-border-focus)}ap-radio-button-card .radio-button-card__container:has(input:disabled) .radio-button-card__indicator-outer{background:var(--ref-color-grey-10)}ap-radio-button-card .radio-button-card__indicator-inner{width:10px;height:10px;border-radius:50%;background:var(--radio-indicator-fill);transform:scale(0);transition:transform .2s ease-in-out}ap-radio-button-card .radio-button-card__container:has(input:checked) .radio-button-card__indicator-inner{transform:scale(1)}ap-radio-button-card .radio-button-card__content{display:block;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);line-height:var(--sys-text-style-body-line-height);color:var(--ref-color-grey-100);cursor:var(--radio-cursor)}ap-radio-button-card .radio-button-card__content:not(:has(.radio-button-card__structured-content)){opacity:var(--radio-content-opacity)}ap-radio-button-card .radio-button-card__structured-content{display:flex;flex-direction:column;gap:var(--ref-spacing-xxxs)}ap-radio-button-card .radio-button-card__header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--ref-spacing-sm)}ap-radio-button-card .radio-button-card__header-left{display:flex;align-items:center;gap:var(--ref-spacing-xxxs);flex:1;min-width:0;opacity:var(--radio-content-opacity)}ap-radio-button-card .radio-button-card__header-right{display:flex;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0}ap-radio-button-card .radio-button-card__title-symbol{flex-shrink:0;width:16px;height:16px}ap-radio-button-card .radio-button-card__title{font-size:var(--ref-font-size-sm);font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-sm);flex:1;min-width:0;opacity:var(--radio-content-opacity)}ap-radio-button-card .radio-button-card__status{flex-shrink:0}ap-radio-button-card .radio-button-card__tooltip-icon{width:16px;height:16px;color:var(--ref-color-grey-60);flex-shrink:0}ap-radio-button-card .radio-button-card__tooltip-icon:hover{color:var(--ref-color-grey-80)}ap-radio-button-card .radio-button-card__description{font-size:var(--ref-font-size-sm);font-style:normal;line-height:var(--ref-font-line-height-sm);color:var(--ref-color-grey-80);opacity:var(--radio-content-opacity)}ap-radio-button-card a{display:block;gap:0}ap-radio-button-card.ng-invalid.ng-dirty .radio-button-card__container{--radio-border-color: var(--ref-color-red-100);--radio-border-color-hover: var(--ref-color-red-60);--radio-indicator-border: var(--ref-color-red-100);--radio-indicator-fill: var(--ref-color-red-100)}ap-radio-button-card.ng-invalid.ng-dirty .radio-button-card__container.radio-button-card__container--default{--radio-border-color: transparent;--radio-border-color-hover: transparent}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: StatusComponent, selector: "ap-status", inputs: ["color", "dot"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
72
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: RadioButtonCardComponent, isStandalone: true, selector: "ap-radio-button-card", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, radioId: { classPropertyName: "radioId", publicName: "radioId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, linkUrl: { classPropertyName: "linkUrl", publicName: "linkUrl", isSignal: true, isRequired: false, transformFunction: null }, linkTitle: { classPropertyName: "linkTitle", publicName: "linkTitle", isSignal: true, isRequired: false, transformFunction: null }, titleSymbolId: { classPropertyName: "titleSymbolId", publicName: "titleSymbolId", isSignal: true, isRequired: false, transformFunction: null }, tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", isSignal: true, isRequired: false, transformFunction: null }, statusBadge: { classPropertyName: "statusBadge", publicName: "statusBadge", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, featureLocked: { classPropertyName: "featureLocked", publicName: "featureLocked", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null } }, providers: [withSymbols(apInfo)], ngImport: i0, template: "<div\n class=\"radio-button-card__container\"\n [class.radio-button-card__container--default]=\"mode() === 'default'\"\n [class.radio-button-card__container--card]=\"mode() === 'card'\"\n [class.radio-button-card__container--locked]=\"featureLocked()\"\n [class.radio-button-card__container--error]=\"hasError()\">\n <input\n type=\"radio\"\n class=\"radio-button-card__input\"\n [attr.id]=\"radioId()\"\n [attr.name]=\"computedName()\"\n [attr.aria-checked]=\"checked()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-labelledby]=\"ariaLabelledby()\"\n [attr.aria-describedby]=\"ariaDescribedby()\"\n [value]=\"value()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled() || featureLocked()\"\n (change)=\"select()\" />\n <label\n class=\"radio-button-card__label\"\n [attr.for]=\"radioId()\">\n @if (featureLocked()) {\n <div class=\"radio-button-card__lock-icon\">\n <ap-symbol symbolId=\"feature-lock\" />\n </div>\n } @else {\n <div class=\"radio-button-card__indicator\">\n <div class=\"radio-button-card__indicator-outer\">\n <div class=\"radio-button-card__indicator-inner\"></div>\n </div>\n </div>\n }\n <div class=\"radio-button-card__content\">\n @if (customContentEnabled()) {\n <div class=\"radio-button-card__structured-content\">\n <div class=\"radio-button-card__header\">\n <div class=\"radio-button-card__header-left\">\n @if (titleSymbolId()) {\n <ap-symbol\n class=\"radio-button-card__title-symbol\"\n color=\"grey-blue\"\n [symbolId]=\"titleSymbolId()\" />\n }\n @if (title()) {\n <div class=\"radio-button-card__title\">{{ title() }}</div>\n }\n </div>\n <div class=\"radio-button-card__header-right\">\n @if (statusBadge()) {\n <ap-status\n class=\"radio-button-card__status\"\n color=\"grey\"\n [dot]=\"false\">\n {{ statusBadge() }}\n </ap-status>\n }\n @if (tooltipText()) {\n <ap-symbol\n apTooltipPosition=\"top\"\n class=\"radio-button-card__tooltip-icon\"\n symbolId=\"info\"\n [apTooltip]=\"tooltipText()\" />\n }\n </div>\n </div>\n @if (description()) {\n <div class=\"radio-button-card__description\">{{ description() }}</div>\n }\n @if (linkUrl()) {\n <a\n class=\"standalone radio-button-card__link\"\n [href]=\"linkUrl()\"\n (click)=\"$event.stopPropagation()\">\n {{ linkTitle() }}\n </a>\n }\n </div>\n } @else {\n <ng-content />\n }\n </div>\n </label>\n</div>\n", styles: ["ap-radio-button-card{display:block}ap-radio-button-card .radio-button-card__container{--radio-border-color: var(--ref-color-grey-20);--radio-border-color-hover: var(--ref-color-grey-80);--radio-border-color-focus: var(--ref-color-grey-100);--radio-indicator-border: var(--ref-color-grey-60);--radio-indicator-border-hover: var(--ref-color-grey-80);--radio-indicator-border-focus: var(--ref-color-grey-100);--radio-indicator-fill: var(--ref-color-electric-blue-100);--radio-content-opacity: 1;--radio-cursor: pointer;position:relative;display:block;width:100%;transition:all .2s ease-in-out;border:1px solid var(--radio-border-color);border-radius:var(--ref-border-radius-md);background:var(--radio-background)}ap-radio-button-card .radio-button-card__container:has(input:not(:disabled)):hover:not(:focus-within){border-color:var(--radio-border-color-hover)}ap-radio-button-card .radio-button-card__container:focus-within:has(input:not(:disabled)){border-color:var(--radio-border-color-focus)}ap-radio-button-card .radio-button-card__container:has(input:focus-visible){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:2px}ap-radio-button-card .radio-button-card__container--default.radio-button-card__container{--radio-border-color: transparent;--radio-border-color-hover: transparent;--radio-border-color-focus: var(--ref-color-electric-blue-100);border-radius:var(--ref-border-radius-md)}ap-radio-button-card .radio-button-card__container--default.radio-button-card__container:has(input:focus-visible){outline:none}ap-radio-button-card .radio-button-card__container--default.radio-button-card__container:has(input:checked){--radio-border-color: transparent;--radio-border-color-hover: transparent;--radio-border-color-focus: transparent}ap-radio-button-card .radio-button-card__container:has(input:checked){--radio-border-color: var(--ref-color-electric-blue-100);--radio-border-color-hover: var(--ref-color-electric-blue-100);--radio-border-color-focus: var(--ref-color-electric-blue-100);--radio-indicator-border: var(--ref-color-electric-blue-100);--radio-indicator-border-hover: var(--ref-color-electric-blue-100);--radio-indicator-border-focus: var(--ref-color-electric-blue-100)}ap-radio-button-card .radio-button-card__container:has(input:disabled){--radio-border-color: var(--ref-color-grey-20);--radio-border-color-hover: var(--ref-color-grey-20);--radio-border-color-focus: var(--ref-color-grey-20);--radio-indicator-border: var(--ref-color-grey-40);--radio-indicator-border-hover: var(--ref-color-grey-40);--radio-indicator-border-focus: var(--ref-color-grey-40);--radio-indicator-fill: var(--ref-color-grey-60);--radio-content-opacity: .6;--radio-cursor: not-allowed}ap-radio-button-card .radio-button-card__container:has(input:disabled):has(input:checked){--radio-border-color: var(--ref-color-grey-40)}ap-radio-button-card .radio-button-card__container--default:has(input:disabled){--radio-border-color: transparent}ap-radio-button-card .radio-button-card__container--locked:has(input:disabled){--radio-border-color: var(--ref-color-purple-20);--radio-border-color-hover: var(--ref-color-purple-20);--radio-border-color-focus: var(--ref-color-purple-20);--radio-background: var(--ref-color-purple-10);--radio-cursor: not-allowed}ap-radio-button-card .radio-button-card__container--error{--radio-border-color: var(--ref-color-red-100);--radio-border-color-hover: var(--ref-color-red-60);--radio-border-color-focus: var(--ref-color-red-100);--radio-indicator-border: var(--ref-color-red-100);--radio-indicator-border-hover: var(--ref-color-red-60);--radio-indicator-border-focus: var(--ref-color-red-100);--radio-indicator-fill: var(--ref-color-red-100)}ap-radio-button-card .radio-button-card__container--error:has(input:checked){--radio-border-color: var(--ref-color-red-100);--radio-border-color-hover: var(--ref-color-red-60);--radio-border-color-focus: var(--ref-color-red-100);--radio-indicator-border: var(--ref-color-red-100);--radio-indicator-border-hover: var(--ref-color-red-60);--radio-indicator-border-focus: var(--ref-color-red-100)}ap-radio-button-card .radio-button-card__container--error:has(input:disabled){--radio-border-color-hover: var(--ref-color-red-100);--radio-border-color-focus: var(--ref-color-red-100)}ap-radio-button-card .radio-button-card__label{display:block;width:100%;padding:var(--ref-spacing-xs);padding-left:36px;cursor:var(--radio-cursor);text-align:left;font-family:inherit;font-size:inherit}ap-radio-button-card .radio-button-card__input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}ap-radio-button-card .radio-button-card__indicator{position:absolute;top:13px;left:12px;opacity:var(--radio-content-opacity)}ap-radio-button-card .radio-button-card__lock-icon{position:absolute;top:13px;left:12px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;color:var(--ref-color-purple-100)}ap-radio-button-card .radio-button-card__lock-icon ap-symbol{width:16px;height:16px}ap-radio-button-card .radio-button-card__indicator-outer{width:16px;height:16px;border:1px solid var(--radio-indicator-border);border-radius:50%;background:var(--ref-color-white);transition:all .2s ease-in-out;display:flex;align-items:center;justify-content:center}ap-radio-button-card .radio-button-card__container:has(input:not(:disabled)):hover:not(:focus-within) .radio-button-card__indicator-outer{border-color:var(--radio-indicator-border-hover)}ap-radio-button-card .radio-button-card__container:focus-within:has(input:not(:disabled)) .radio-button-card__indicator-outer{border-color:var(--radio-indicator-border-focus)}ap-radio-button-card .radio-button-card__container:has(input:disabled) .radio-button-card__indicator-outer{background:var(--ref-color-grey-10)}ap-radio-button-card .radio-button-card__indicator-inner{width:10px;height:10px;border-radius:50%;background:var(--radio-indicator-fill);transform:scale(0);transition:transform .2s ease-in-out}ap-radio-button-card .radio-button-card__container:has(input:checked) .radio-button-card__indicator-inner{transform:scale(1)}ap-radio-button-card .radio-button-card__content{display:block;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);line-height:var(--sys-text-style-body-line-height);color:var(--ref-color-grey-100);cursor:var(--radio-cursor)}ap-radio-button-card .radio-button-card__content:not(:has(.radio-button-card__structured-content)){opacity:var(--radio-content-opacity)}ap-radio-button-card .radio-button-card__structured-content{display:flex;flex-direction:column;gap:var(--ref-spacing-xxxs)}ap-radio-button-card .radio-button-card__header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--ref-spacing-sm)}ap-radio-button-card .radio-button-card__header-left{display:flex;align-items:center;gap:var(--ref-spacing-xxxs);flex:1;min-width:0;opacity:var(--radio-content-opacity)}ap-radio-button-card .radio-button-card__header-right{display:flex;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0}ap-radio-button-card .radio-button-card__title-symbol{flex-shrink:0;width:16px;height:16px}ap-radio-button-card .radio-button-card__title{font-size:var(--ref-font-size-sm);font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-sm);flex:1;min-width:0;opacity:var(--radio-content-opacity)}ap-radio-button-card .radio-button-card__status{flex-shrink:0}ap-radio-button-card .radio-button-card__tooltip-icon{width:16px;height:16px;color:var(--ref-color-grey-60);flex-shrink:0}ap-radio-button-card .radio-button-card__tooltip-icon:hover{color:var(--ref-color-grey-80)}ap-radio-button-card .radio-button-card__description{font-size:var(--ref-font-size-sm);font-style:normal;line-height:var(--ref-font-line-height-sm);color:var(--ref-color-grey-80);opacity:var(--radio-content-opacity)}ap-radio-button-card a{display:block;gap:0}ap-radio-button-card.ng-invalid.ng-dirty .radio-button-card__container{--radio-border-color: var(--ref-color-red-100);--radio-border-color-hover: var(--ref-color-red-60);--radio-indicator-border: var(--ref-color-red-100);--radio-indicator-fill: var(--ref-color-red-100)}ap-radio-button-card.ng-invalid.ng-dirty .radio-button-card__container.radio-button-card__container--default{--radio-border-color: transparent;--radio-border-color-hover: transparent}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: StatusComponent, selector: "ap-status", inputs: ["color", "dot"] }, { 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, encapsulation: i0.ViewEncapsulation.None });
|
|
73
73
|
}
|
|
74
74
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: RadioButtonCardComponent, decorators: [{
|
|
75
75
|
type: Component,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-radio-button-card.mjs","sources":["../../../libs/ui-components/radio-button-card/src/radio-button-card.component.ts","../../../libs/ui-components/radio-button-card/src/radio-button-card.component.html","../../../libs/ui-components/radio-button-card/src/agorapulse-ui-components-radio-button-card.ts"],"sourcesContent":["import { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';\nimport { StatusComponent } from '@agorapulse/ui-components/status';\nimport { TooltipDirective } from '@agorapulse/ui-components/tooltip';\nimport { apInfo, SymbolComponent, SymbolRegistry, withSymbols } from '@agorapulse/ui-symbol';\nimport { ChangeDetectionStrategy, Component, computed, inject, input, signal, ViewEncapsulation } from '@angular/core';\nimport { ControlValueAccessor, NgControl } from '@angular/forms';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-radio-button-card',\n styleUrls: ['./radio-button-card.component.scss'],\n standalone: true,\n imports: [SymbolComponent, StatusComponent, TooltipDirective],\n providers: [withSymbols(apInfo)],\n templateUrl: './radio-button-card.component.html',\n encapsulation: ViewEncapsulation.None,\n})\nexport class RadioButtonCardComponent implements ControlValueAccessor {\n private static nextId = 0;\n private readonly symbolRegistry: SymbolRegistry = inject(SymbolRegistry);\n private readonly ngControl = inject(NgControl, { optional: true, self: true });\n\n // Accessibility inputs\n readonly ariaLabel = input<string>('');\n readonly ariaLabelledby = input<string | null>(null);\n readonly ariaDescribedby = input<string>('');\n\n // Basic configuration inputs\n readonly disabled = input(false);\n readonly radioId = input<string>(`ap-radio-button-${RadioButtonCardComponent.nextId++}`);\n readonly value = input.required<string>();\n readonly name = input<string>('');\n\n // Card mode content inputs\n readonly title = input<string>('');\n readonly description = input<string>('');\n readonly linkUrl = input<string>('');\n readonly linkTitle = input<string>('');\n readonly titleSymbolId = input<string>('');\n readonly tooltipText = input<string>('');\n readonly statusBadge = input<string>('');\n\n // Display and state inputs\n readonly mode = input<'default' | 'card'>('card');\n readonly featureLocked = input(false);\n readonly hasError = input(false);\n\n // Internal state signals\n readonly checked = signal(false);\n readonly computedName = computed(() => {\n return this.name() || this.ngControl?.name || '';\n });\n\n readonly customContentEnabled = computed(() => {\n return this.title() || this.titleSymbolId() || this.statusBadge() || this.tooltipText() || this.description() || this.linkUrl();\n });\n\n constructor() {\n this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));\n\n // Set valueAccessor to avoid Angular error\n if (this.ngControl) {\n this.ngControl.valueAccessor = this;\n }\n }\n\n select() {\n const currentValue = this.value();\n this.checked.set(true);\n this.onModelChange(currentValue);\n }\n\n writeValue(value: unknown): void {\n const currentValue = this.value();\n const shouldBeChecked = value == currentValue;\n this.checked.set(shouldBeChecked);\n }\n\n onModelChange: (value: unknown) => void = () => {\n // No-op until Angular registers the actual callback\n };\n\n onModelTouched: () => void = () => {\n // No-op until Angular registers the actual callback\n };\n\n registerOnChange(fn: () => void): void {\n this.onModelChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onModelTouched = fn;\n }\n}\n","<div\n class=\"radio-button-card__container\"\n [class.radio-button-card__container--default]=\"mode() === 'default'\"\n [class.radio-button-card__container--card]=\"mode() === 'card'\"\n [class.radio-button-card__container--locked]=\"featureLocked()\"\n [class.radio-button-card__container--error]=\"hasError()\">\n <input\n type=\"radio\"\n class=\"radio-button-card__input\"\n [attr.id]=\"radioId()\"\n [attr.name]=\"computedName()\"\n [attr.aria-checked]=\"checked()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-labelledby]=\"ariaLabelledby()\"\n [attr.aria-describedby]=\"ariaDescribedby()\"\n [value]=\"value()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled() || featureLocked()\"\n (change)=\"select()\" />\n <label\n class=\"radio-button-card__label\"\n [attr.for]=\"radioId()\">\n @if (featureLocked()) {\n <div class=\"radio-button-card__lock-icon\">\n <ap-symbol symbolId=\"feature-lock\" />\n </div>\n } @else {\n <div class=\"radio-button-card__indicator\">\n <div class=\"radio-button-card__indicator-outer\">\n <div class=\"radio-button-card__indicator-inner\"></div>\n </div>\n </div>\n }\n <div class=\"radio-button-card__content\">\n @if (customContentEnabled()) {\n <div class=\"radio-button-card__structured-content\">\n <div class=\"radio-button-card__header\">\n <div class=\"radio-button-card__header-left\">\n @if (titleSymbolId()) {\n <ap-symbol\n class=\"radio-button-card__title-symbol\"\n color=\"grey-blue\"\n [symbolId]=\"titleSymbolId()\" />\n }\n @if (title()) {\n <div class=\"radio-button-card__title\">{{ title() }}</div>\n }\n </div>\n <div class=\"radio-button-card__header-right\">\n @if (statusBadge()) {\n <ap-status\n class=\"radio-button-card__status\"\n color=\"grey\"\n [dot]=\"false\">\n {{ statusBadge() }}\n </ap-status>\n }\n @if (tooltipText()) {\n <ap-symbol\n apTooltipPosition=\"top\"\n class=\"radio-button-card__tooltip-icon\"\n symbolId=\"info\"\n [apTooltip]=\"tooltipText()\" />\n }\n </div>\n </div>\n @if (description()) {\n <div class=\"radio-button-card__description\">{{ description() }}</div>\n }\n @if (linkUrl()) {\n <a\n class=\"standalone radio-button-card__link\"\n [href]=\"linkUrl()\"\n (click)=\"$event.stopPropagation()\">\n {{ linkTitle() }}\n </a>\n }\n </div>\n } @else {\n <ng-content />\n }\n </div>\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-radio-button-card.mjs","sources":["../../../libs/ui-components/radio-button-card/src/radio-button-card.component.ts","../../../libs/ui-components/radio-button-card/src/radio-button-card.component.html","../../../libs/ui-components/radio-button-card/src/agorapulse-ui-components-radio-button-card.ts"],"sourcesContent":["import { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';\nimport { StatusComponent } from '@agorapulse/ui-components/status';\nimport { TooltipDirective } from '@agorapulse/ui-components/tooltip';\nimport { apInfo, SymbolComponent, SymbolRegistry, withSymbols } from '@agorapulse/ui-symbol';\nimport { ChangeDetectionStrategy, Component, computed, inject, input, signal, ViewEncapsulation } from '@angular/core';\nimport { ControlValueAccessor, NgControl } from '@angular/forms';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-radio-button-card',\n styleUrls: ['./radio-button-card.component.scss'],\n standalone: true,\n imports: [SymbolComponent, StatusComponent, TooltipDirective],\n providers: [withSymbols(apInfo)],\n templateUrl: './radio-button-card.component.html',\n encapsulation: ViewEncapsulation.None,\n})\nexport class RadioButtonCardComponent implements ControlValueAccessor {\n private static nextId = 0;\n private readonly symbolRegistry: SymbolRegistry = inject(SymbolRegistry);\n private readonly ngControl = inject(NgControl, { optional: true, self: true });\n\n // Accessibility inputs\n readonly ariaLabel = input<string>('');\n readonly ariaLabelledby = input<string | null>(null);\n readonly ariaDescribedby = input<string>('');\n\n // Basic configuration inputs\n readonly disabled = input(false);\n readonly radioId = input<string>(`ap-radio-button-${RadioButtonCardComponent.nextId++}`);\n readonly value = input.required<string>();\n readonly name = input<string>('');\n\n // Card mode content inputs\n readonly title = input<string>('');\n readonly description = input<string>('');\n readonly linkUrl = input<string>('');\n readonly linkTitle = input<string>('');\n readonly titleSymbolId = input<string>('');\n readonly tooltipText = input<string>('');\n readonly statusBadge = input<string>('');\n\n // Display and state inputs\n readonly mode = input<'default' | 'card'>('card');\n readonly featureLocked = input(false);\n readonly hasError = input(false);\n\n // Internal state signals\n readonly checked = signal(false);\n readonly computedName = computed(() => {\n return this.name() || this.ngControl?.name || '';\n });\n\n readonly customContentEnabled = computed(() => {\n return this.title() || this.titleSymbolId() || this.statusBadge() || this.tooltipText() || this.description() || this.linkUrl();\n });\n\n constructor() {\n this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));\n\n // Set valueAccessor to avoid Angular error\n if (this.ngControl) {\n this.ngControl.valueAccessor = this;\n }\n }\n\n select() {\n const currentValue = this.value();\n this.checked.set(true);\n this.onModelChange(currentValue);\n }\n\n writeValue(value: unknown): void {\n const currentValue = this.value();\n const shouldBeChecked = value == currentValue;\n this.checked.set(shouldBeChecked);\n }\n\n onModelChange: (value: unknown) => void = () => {\n // No-op until Angular registers the actual callback\n };\n\n onModelTouched: () => void = () => {\n // No-op until Angular registers the actual callback\n };\n\n registerOnChange(fn: () => void): void {\n this.onModelChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onModelTouched = fn;\n }\n}\n","<div\n class=\"radio-button-card__container\"\n [class.radio-button-card__container--default]=\"mode() === 'default'\"\n [class.radio-button-card__container--card]=\"mode() === 'card'\"\n [class.radio-button-card__container--locked]=\"featureLocked()\"\n [class.radio-button-card__container--error]=\"hasError()\">\n <input\n type=\"radio\"\n class=\"radio-button-card__input\"\n [attr.id]=\"radioId()\"\n [attr.name]=\"computedName()\"\n [attr.aria-checked]=\"checked()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-labelledby]=\"ariaLabelledby()\"\n [attr.aria-describedby]=\"ariaDescribedby()\"\n [value]=\"value()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled() || featureLocked()\"\n (change)=\"select()\" />\n <label\n class=\"radio-button-card__label\"\n [attr.for]=\"radioId()\">\n @if (featureLocked()) {\n <div class=\"radio-button-card__lock-icon\">\n <ap-symbol symbolId=\"feature-lock\" />\n </div>\n } @else {\n <div class=\"radio-button-card__indicator\">\n <div class=\"radio-button-card__indicator-outer\">\n <div class=\"radio-button-card__indicator-inner\"></div>\n </div>\n </div>\n }\n <div class=\"radio-button-card__content\">\n @if (customContentEnabled()) {\n <div class=\"radio-button-card__structured-content\">\n <div class=\"radio-button-card__header\">\n <div class=\"radio-button-card__header-left\">\n @if (titleSymbolId()) {\n <ap-symbol\n class=\"radio-button-card__title-symbol\"\n color=\"grey-blue\"\n [symbolId]=\"titleSymbolId()\" />\n }\n @if (title()) {\n <div class=\"radio-button-card__title\">{{ title() }}</div>\n }\n </div>\n <div class=\"radio-button-card__header-right\">\n @if (statusBadge()) {\n <ap-status\n class=\"radio-button-card__status\"\n color=\"grey\"\n [dot]=\"false\">\n {{ statusBadge() }}\n </ap-status>\n }\n @if (tooltipText()) {\n <ap-symbol\n apTooltipPosition=\"top\"\n class=\"radio-button-card__tooltip-icon\"\n symbolId=\"info\"\n [apTooltip]=\"tooltipText()\" />\n }\n </div>\n </div>\n @if (description()) {\n <div class=\"radio-button-card__description\">{{ description() }}</div>\n }\n @if (linkUrl()) {\n <a\n class=\"standalone radio-button-card__link\"\n [href]=\"linkUrl()\"\n (click)=\"$event.stopPropagation()\">\n {{ linkTitle() }}\n </a>\n }\n </div>\n } @else {\n <ng-content />\n }\n </div>\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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"}
|
|
@@ -36,7 +36,7 @@ class DropdownGroupItemComponent {
|
|
|
36
36
|
return this.children.every((child) => child.disabled);
|
|
37
37
|
}
|
|
38
38
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DropdownGroupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
39
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: DropdownGroupItemComponent, isStandalone: true, selector: "ap-dropdown-group-item", inputs: { groupLabel: "groupLabel", groupTag: "groupTag", selectableGroup: "selectableGroup", children: "children", select: "select", disabled: "disabled", disabledTooltip: "disabledTooltip" }, ngImport: i0, template: "<div\n class=\"group\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\">\n @if (selectableGroup) {\n <ap-checkbox\n [name]=\"'option-group-selection-' + groupLabel\"\n [disabled]=\"isGroupDisabled() || disabled\"\n [indeterminate]=\"isGroupIntermediate()\"\n [checked]=\"isGroupChecked()\">\n <span class=\"group-label\">\n {{ groupLabel }}\n </span>\n @if (groupTag) {\n <ap-badge color=\"blue\">\n {{ groupTag }}\n </ap-badge>\n }\n </ap-checkbox>\n } @else {\n <span\n class=\"group-label\"\n [title]=\"groupLabel\">\n {{ groupLabel }}\n </span>\n @if (groupTag) {\n <ap-badge color=\"blue\">\n {{ groupTag }}\n </ap-badge>\n }\n }\n</div>\n", styles: ["ap-dropdown-group-item{display:block;width:100%}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems"], exportAs: ["apTooltip"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
39
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: DropdownGroupItemComponent, isStandalone: true, selector: "ap-dropdown-group-item", inputs: { groupLabel: "groupLabel", groupTag: "groupTag", selectableGroup: "selectableGroup", children: "children", select: "select", disabled: "disabled", disabledTooltip: "disabledTooltip" }, ngImport: i0, template: "<div\n class=\"group\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\">\n @if (selectableGroup) {\n <ap-checkbox\n [name]=\"'option-group-selection-' + groupLabel\"\n [disabled]=\"isGroupDisabled() || disabled\"\n [indeterminate]=\"isGroupIntermediate()\"\n [checked]=\"isGroupChecked()\">\n <span class=\"group-label\">\n {{ groupLabel }}\n </span>\n @if (groupTag) {\n <ap-badge color=\"blue\">\n {{ groupTag }}\n </ap-badge>\n }\n </ap-checkbox>\n } @else {\n <span\n class=\"group-label\"\n [title]=\"groupLabel\">\n {{ groupLabel }}\n </span>\n @if (groupTag) {\n <ap-badge color=\"blue\">\n {{ groupTag }}\n </ap-badge>\n }\n }\n</div>\n", styles: ["ap-dropdown-group-item{display:block;width:100%}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
40
40
|
}
|
|
41
41
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DropdownGroupItemComponent, decorators: [{
|
|
42
42
|
type: Component,
|
|
@@ -103,11 +103,11 @@ class DropdownItemMultipleOneLineComponent {
|
|
|
103
103
|
}
|
|
104
104
|
}
|
|
105
105
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DropdownItemMultipleOneLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
106
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: DropdownItemMultipleOneLineComponent, isStandalone: true, selector: "ap-dropdown-item-multiple-one-line", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: true, transformFunction: null }, htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: false, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: false, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: false, isRequired: false, transformFunction: null }, dividerEnabled: { classPropertyName: "dividerEnabled", publicName: "dividerEnabled", isSignal: false, isRequired: false, transformFunction: null }, onlyEnabled: { classPropertyName: "onlyEnabled", publicName: "onlyEnabled", isSignal: false, isRequired: false, transformFunction: null }, onlyText: { classPropertyName: "onlyText", publicName: "onlyText", isSignal: false, isRequired: false, transformFunction: null }, isFeatureLocked: { classPropertyName: "isFeatureLocked", publicName: "isFeatureLocked", isSignal: true, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: true, isRequired: false, transformFunction: null }, symbolColor: { classPropertyName: "symbolColor", publicName: "symbolColor", isSignal: true, isRequired: false, transformFunction: null }, symbolTooltipText: { classPropertyName: "symbolTooltipText", publicName: "symbolTooltipText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectOnly: "selectOnly", selectionChange: "selectionChange", lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" } }, 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\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;gap:var(--ref-spacing-xxs);align-items:center}ap-dropdown-item-multiple-one-line .option-item{width:100%;word-break:break-word}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { 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: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
106
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: DropdownItemMultipleOneLineComponent, isStandalone: true, selector: "ap-dropdown-item-multiple-one-line", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: true, transformFunction: null }, htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: false, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: false, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: false, isRequired: false, transformFunction: null }, dividerEnabled: { classPropertyName: "dividerEnabled", publicName: "dividerEnabled", isSignal: false, isRequired: false, transformFunction: null }, onlyEnabled: { classPropertyName: "onlyEnabled", publicName: "onlyEnabled", isSignal: false, isRequired: false, transformFunction: null }, onlyText: { classPropertyName: "onlyText", publicName: "onlyText", isSignal: false, isRequired: false, transformFunction: null }, isFeatureLocked: { classPropertyName: "isFeatureLocked", publicName: "isFeatureLocked", isSignal: true, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: true, isRequired: false, transformFunction: null }, symbolColor: { classPropertyName: "symbolColor", publicName: "symbolColor", isSignal: true, isRequired: false, transformFunction: null }, symbolTooltipText: { classPropertyName: "symbolTooltipText", publicName: "symbolTooltipText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectOnly: "selectOnly", selectionChange: "selectionChange", lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" } }, 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\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;flex-direction:row;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;gap:var(--ref-spacing-xxs);align-items:center}ap-dropdown-item-multiple-one-line .option-item{width:100%;word-break:break-word}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { 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: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { 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, encapsulation: i0.ViewEncapsulation.None });
|
|
107
107
|
}
|
|
108
108
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DropdownItemMultipleOneLineComponent, decorators: [{
|
|
109
109
|
type: Component,
|
|
110
|
-
args: [{ selector: 'ap-dropdown-item-multiple-one-line', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, CheckboxComponent, AvatarComponent, BadgeComponent, TooltipDirective, SymbolComponent, SymbolComponent], template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\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;gap:var(--ref-spacing-xxs);align-items:center}ap-dropdown-item-multiple-one-line .option-item{width:100%;word-break:break-word}\n"] }]
|
|
110
|
+
args: [{ selector: 'ap-dropdown-item-multiple-one-line', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, CheckboxComponent, AvatarComponent, BadgeComponent, TooltipDirective, SymbolComponent, SymbolComponent], template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\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;flex-direction:row;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;gap:var(--ref-spacing-xxs);align-items:center}ap-dropdown-item-multiple-one-line .option-item{width:100%;word-break:break-word}\n"] }]
|
|
111
111
|
}], ctorParameters: () => [], propDecorators: { text: [{
|
|
112
112
|
type: Input,
|
|
113
113
|
args: [{ required: true }]
|
|
@@ -177,11 +177,11 @@ class DropdownItemMultipleTwoLinesComponent {
|
|
|
177
177
|
this.checkbox.focus();
|
|
178
178
|
}
|
|
179
179
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DropdownItemMultipleTwoLinesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
180
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: DropdownItemMultipleTwoLinesComponent, isStandalone: true, selector: "ap-dropdown-item-multiple-two-lines", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: true, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: false, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: true, transformFunction: null }, htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: false, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: false, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: false, isRequired: false, transformFunction: null }, dividerEnabled: { classPropertyName: "dividerEnabled", publicName: "dividerEnabled", isSignal: false, isRequired: false, transformFunction: null }, onlyEnabled: { classPropertyName: "onlyEnabled", publicName: "onlyEnabled", isSignal: false, isRequired: false, transformFunction: null }, onlyText: { classPropertyName: "onlyText", publicName: "onlyText", isSignal: false, isRequired: false, transformFunction: null }, isFeatureLocked: { classPropertyName: "isFeatureLocked", publicName: "isFeatureLocked", isSignal: true, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: true, isRequired: false, transformFunction: null }, symbolColor: { classPropertyName: "symbolColor", publicName: "symbolColor", isSignal: true, isRequired: false, transformFunction: null }, symbolTooltipText: { classPropertyName: "symbolTooltipText", publicName: "symbolTooltipText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectOnly: "selectOnly", lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" } }, 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\" [class.feature-locked-option]=\"isFeatureLocked()\">\n <ap-checkbox\n [checked]=\"selected\"\n [disabled]=\"disabled || isFeatureLocked()\"\n [name]=\"'option-selection-' + htmlId\">\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 <div class=\"texts\" [class.feature-locked-label]=\"isFeatureLocked()\">\n <div class=\"first-line\">\n <span\n class=\"label\"\n\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\n @if (isFeatureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n color=\"purple\"\n size=\"sm\"/>\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-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: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { 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: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
180
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: DropdownItemMultipleTwoLinesComponent, isStandalone: true, selector: "ap-dropdown-item-multiple-two-lines", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: true, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: false, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: true, transformFunction: null }, htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: false, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: false, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: false, isRequired: false, transformFunction: null }, dividerEnabled: { classPropertyName: "dividerEnabled", publicName: "dividerEnabled", isSignal: false, isRequired: false, transformFunction: null }, onlyEnabled: { classPropertyName: "onlyEnabled", publicName: "onlyEnabled", isSignal: false, isRequired: false, transformFunction: null }, onlyText: { classPropertyName: "onlyText", publicName: "onlyText", isSignal: false, isRequired: false, transformFunction: null }, isFeatureLocked: { classPropertyName: "isFeatureLocked", publicName: "isFeatureLocked", isSignal: true, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: true, isRequired: false, transformFunction: null }, symbolColor: { classPropertyName: "symbolColor", publicName: "symbolColor", isSignal: true, isRequired: false, transformFunction: null }, symbolTooltipText: { classPropertyName: "symbolTooltipText", publicName: "symbolTooltipText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectOnly: "selectOnly", lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" } }, 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\" [class.feature-locked-option]=\"isFeatureLocked()\">\n <ap-checkbox\n [checked]=\"selected\"\n [disabled]=\"disabled || isFeatureLocked()\"\n [name]=\"'option-selection-' + htmlId\">\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 <div class=\"texts\" [class.feature-locked-label]=\"isFeatureLocked()\">\n <div class=\"first-line\">\n <span\n class=\"label\"\n\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\n @if (isFeatureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n color=\"purple\"\n size=\"sm\"/>\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-two-lines .option{display:flex;flex-direction:row;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: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { 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: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { 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, encapsulation: i0.ViewEncapsulation.None });
|
|
181
181
|
}
|
|
182
182
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DropdownItemMultipleTwoLinesComponent, decorators: [{
|
|
183
183
|
type: Component,
|
|
184
|
-
args: [{ selector: 'ap-dropdown-item-multiple-two-lines', 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\" [class.feature-locked-option]=\"isFeatureLocked()\">\n <ap-checkbox\n [checked]=\"selected\"\n [disabled]=\"disabled || isFeatureLocked()\"\n [name]=\"'option-selection-' + htmlId\">\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 <div class=\"texts\" [class.feature-locked-label]=\"isFeatureLocked()\">\n <div class=\"first-line\">\n <span\n class=\"label\"\n\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\n @if (isFeatureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n color=\"purple\"\n size=\"sm\"/>\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-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"] }]
|
|
184
|
+
args: [{ selector: 'ap-dropdown-item-multiple-two-lines', 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\" [class.feature-locked-option]=\"isFeatureLocked()\">\n <ap-checkbox\n [checked]=\"selected\"\n [disabled]=\"disabled || isFeatureLocked()\"\n [name]=\"'option-selection-' + htmlId\">\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 <div class=\"texts\" [class.feature-locked-label]=\"isFeatureLocked()\">\n <div class=\"first-line\">\n <span\n class=\"label\"\n\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\n @if (isFeatureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n color=\"purple\"\n size=\"sm\"/>\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-two-lines .option{display:flex;flex-direction:row;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"] }]
|
|
185
185
|
}], ctorParameters: () => [], propDecorators: { text: [{
|
|
186
186
|
type: Input,
|
|
187
187
|
args: [{ required: true }]
|
|
@@ -245,11 +245,11 @@ class DropdownItemSingleOneLineComponent {
|
|
|
245
245
|
}
|
|
246
246
|
}
|
|
247
247
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DropdownItemSingleOneLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
248
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: DropdownItemSingleOneLineComponent, isStandalone: true, selector: "ap-dropdown-item-single-one-line", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, showAvatarInitials: { classPropertyName: "showAvatarInitials", publicName: "showAvatarInitials", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: false, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: false, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: false, isRequired: false, transformFunction: null }, dividerEnabled: { classPropertyName: "dividerEnabled", publicName: "dividerEnabled", isSignal: false, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: false, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null }, isFeatureLocked: { classPropertyName: "isFeatureLocked", publicName: "isFeatureLocked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option\" [class.feature-locked-option]=\"isFeatureLocked()\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [rounded]=\"roundedAvatar()\"\n [size]=\"24\"\n [profilePicture]=\"avatarUrl\"\n [username]=\"text\"\n [showInitials]=\"showAvatarInitials\"\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 (isFeatureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n color=\"purple\"\n size=\"sm\"/>\n } @else 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}ap-dropdown-item-single-one-line .option-item{width:100%}\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: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
248
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: DropdownItemSingleOneLineComponent, isStandalone: true, selector: "ap-dropdown-item-single-one-line", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, showAvatarInitials: { classPropertyName: "showAvatarInitials", publicName: "showAvatarInitials", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: false, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: false, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: false, isRequired: false, transformFunction: null }, dividerEnabled: { classPropertyName: "dividerEnabled", publicName: "dividerEnabled", isSignal: false, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: false, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null }, isFeatureLocked: { classPropertyName: "isFeatureLocked", publicName: "isFeatureLocked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option\" [class.feature-locked-option]=\"isFeatureLocked()\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [rounded]=\"roundedAvatar()\"\n [size]=\"24\"\n [profilePicture]=\"avatarUrl\"\n [username]=\"text\"\n [showInitials]=\"showAvatarInitials\"\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 (isFeatureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n color=\"purple\"\n size=\"sm\"/>\n } @else 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;flex-direction:row;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-one-line .option .option-selected{margin-left:auto}ap-dropdown-item-single-one-line .option-item{width:100%}\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: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { 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, encapsulation: i0.ViewEncapsulation.None });
|
|
249
249
|
}
|
|
250
250
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DropdownItemSingleOneLineComponent, decorators: [{
|
|
251
251
|
type: Component,
|
|
252
|
-
args: [{ selector: 'ap-dropdown-item-single-one-line', 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\" [class.feature-locked-option]=\"isFeatureLocked()\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [rounded]=\"roundedAvatar()\"\n [size]=\"24\"\n [profilePicture]=\"avatarUrl\"\n [username]=\"text\"\n [showInitials]=\"showAvatarInitials\"\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 (isFeatureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n color=\"purple\"\n size=\"sm\"/>\n } @else 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}ap-dropdown-item-single-one-line .option-item{width:100%}\n"] }]
|
|
252
|
+
args: [{ selector: 'ap-dropdown-item-single-one-line', 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\" [class.feature-locked-option]=\"isFeatureLocked()\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [rounded]=\"roundedAvatar()\"\n [size]=\"24\"\n [profilePicture]=\"avatarUrl\"\n [username]=\"text\"\n [showInitials]=\"showAvatarInitials\"\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 (isFeatureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n color=\"purple\"\n size=\"sm\"/>\n } @else 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;flex-direction:row;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-one-line .option .option-selected{margin-left:auto}ap-dropdown-item-single-one-line .option-item{width:100%}\n"] }]
|
|
253
253
|
}], ctorParameters: () => [], propDecorators: { text: [{
|
|
254
254
|
type: Input,
|
|
255
255
|
args: [{ required: true }]
|
|
@@ -302,11 +302,11 @@ class DropdownItemSingleTwoLinesComponent {
|
|
|
302
302
|
}
|
|
303
303
|
}
|
|
304
304
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DropdownItemSingleTwoLinesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
305
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: DropdownItemSingleTwoLinesComponent, isStandalone: true, selector: "ap-dropdown-item-single-two-lines", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: true, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: false, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: false, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: false, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: false, isRequired: false, transformFunction: null }, dividerEnabled: { classPropertyName: "dividerEnabled", publicName: "dividerEnabled", isSignal: false, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: false, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null }, isFeatureLocked: { classPropertyName: "isFeatureLocked", publicName: "isFeatureLocked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option with-caption\" [class.feature-locked-option]=\"isFeatureLocked()\">\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 }\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 (isFeatureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n color=\"purple\"\n size=\"sm\"/>\n } @else 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: ["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: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
305
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: DropdownItemSingleTwoLinesComponent, isStandalone: true, selector: "ap-dropdown-item-single-two-lines", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: true, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: false, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: false, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: false, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: false, isRequired: false, transformFunction: null }, dividerEnabled: { classPropertyName: "dividerEnabled", publicName: "dividerEnabled", isSignal: false, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: false, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null }, isFeatureLocked: { classPropertyName: "isFeatureLocked", publicName: "isFeatureLocked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option with-caption\" [class.feature-locked-option]=\"isFeatureLocked()\">\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 }\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 (isFeatureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n color=\"purple\"\n size=\"sm\"/>\n } @else 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;flex-direction:row;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: ["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: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { 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, encapsulation: i0.ViewEncapsulation.None });
|
|
306
306
|
}
|
|
307
307
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DropdownItemSingleTwoLinesComponent, decorators: [{
|
|
308
308
|
type: Component,
|
|
309
|
-
args: [{ selector: 'ap-dropdown-item-single-two-lines', 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\" [class.feature-locked-option]=\"isFeatureLocked()\">\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 }\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 (isFeatureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n color=\"purple\"\n size=\"sm\"/>\n } @else 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"] }]
|
|
309
|
+
args: [{ selector: 'ap-dropdown-item-single-two-lines', 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\" [class.feature-locked-option]=\"isFeatureLocked()\">\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 }\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 (isFeatureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n color=\"purple\"\n size=\"sm\"/>\n } @else 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;flex-direction:row;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"] }]
|
|
310
310
|
}], ctorParameters: () => [], propDecorators: { text: [{
|
|
311
311
|
type: Input,
|
|
312
312
|
args: [{ required: true }]
|