@agorapulse/ui-components 22.0.3 → 22.0.5-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/agorapulse-ui-components-22.0.5-beta.1.tgz +0 -0
- package/fesm2022/agorapulse-ui-components-action-dropdown.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-action-dropdown.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-badge.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-badge.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-button.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-button.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-checkbox.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-checkbox.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-close-button.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-close-button.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-counter.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-counter.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-filter-chips-list.mjs +4 -4
- package/fesm2022/agorapulse-ui-components-filter-chips-list.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-form-field.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-form-field.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-form-message.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-form-message.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-icon-button.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-icon-button.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-input-group.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-input-group.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-labels.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-labels.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-legacy-textarea.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-legacy-textarea.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-radio-button-card.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-radio-button-card.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-radio.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-radio.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-segmented-control.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-segmented-control.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-select.mjs +8 -8
- package/fesm2022/agorapulse-ui-components-select.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-selection-dropdown.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-selection-dropdown.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-split-button.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-split-button.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-status-card.mjs +3 -3
- package/fesm2022/agorapulse-ui-components-status-card.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-status.mjs +3 -3
- package/fesm2022/agorapulse-ui-components-status.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-tabs.mjs +3 -5
- package/fesm2022/agorapulse-ui-components-tabs.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-tag.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-tag.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-toggle.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-toggle.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-tooltip.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-tooltip.mjs.map +1 -1
- package/package.json +1 -1
- package/types/agorapulse-ui-components-status-card.d.ts +11 -1
- package/types/agorapulse-ui-components-status.d.ts +11 -1
- package/agorapulse-ui-components-22.0.3.tgz +0 -0
|
@@ -98,11 +98,11 @@ class RadioButtonCardComponent {
|
|
|
98
98
|
this.onModelTouched = fn;
|
|
99
99
|
}
|
|
100
100
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RadioButtonCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
101
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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 }, centered: { classPropertyName: "centered", publicName: "centered", 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 [class.radio-button-card__container--centered]=\"centeredLayout()\">\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-background: var(--ref-color-white);--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--centered{display:flex;align-items:center}ap-radio-button-card .radio-button-card__container--centered .radio-button-card__header{align-items:center}ap-radio-button-card .radio-button-card__container--centered .radio-button-card__indicator,ap-radio-button-card .radio-button-card__container--centered .radio-button-card__lock-icon{top:50%;transform:translateY(-50%)}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 });
|
|
101
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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 }, centered: { classPropertyName: "centered", publicName: "centered", 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 [class.radio-button-card__container--centered]=\"centeredLayout()\">\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=\"default\"\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-background: var(--sys-color-surface-default);--radio-border-color: var(--sys-color-border-interactive-default);--radio-border-color-hover: var(--sys-color-border-interactive-hovered);--radio-border-color-focus: var(--sys-color-border-interactive-hovered);--radio-indicator-border: var(--sys-color-border-input-default);--radio-indicator-border-hover: var(--sys-color-border-input-hovered);--radio-indicator-border-focus: var(--sys-color-border-input-hovered);--radio-indicator-fill: var(--sys-color-surface-input-active);--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(--sys-radius-inner);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(--sys-color-border-interactive-active);border-radius:var(--sys-radius-inner)}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--centered{display:flex;align-items:center}ap-radio-button-card .radio-button-card__container--centered .radio-button-card__header{align-items:center}ap-radio-button-card .radio-button-card__container--centered .radio-button-card__indicator,ap-radio-button-card .radio-button-card__container--centered .radio-button-card__lock-icon{top:50%;transform:translateY(-50%)}ap-radio-button-card .radio-button-card__container:has(input:checked){--radio-border-color: var(--sys-color-border-interactive-active);--radio-border-color-hover: var(--sys-color-border-interactive-active);--radio-border-color-focus: var(--sys-color-border-interactive-active);--radio-indicator-border: var(--sys-color-border-input-active);--radio-indicator-border-hover: var(--sys-color-border-input-active);--radio-indicator-border-focus: var(--sys-color-border-input-active)}ap-radio-button-card .radio-button-card__container:has(input:disabled){--radio-border-color: var(--sys-color-border-interactive-disabled);--radio-border-color-hover: var(--sys-color-border-interactive-disabled);--radio-border-color-focus: var(--sys-color-border-interactive-disabled);--radio-indicator-border: var(--sys-color-border-input-disabled);--radio-indicator-border-hover: var(--sys-color-border-input-disabled);--radio-indicator-border-focus: var(--sys-color-border-input-disabled);--radio-indicator-fill: var(--sys-color-surface-input-active-disabled);--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(--sys-color-border-interactive-active-disabled);--radio-indicator-border: var(--sys-color-border-input-active-disabled)}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(--sys-color-border-featurelock);--radio-border-color-hover: var(--sys-color-border-featurelock);--radio-border-color-focus: var(--sys-color-border-featurelock);--radio-background: var(--sys-color-surface-featurelock);--radio-cursor: not-allowed}ap-radio-button-card .radio-button-card__container--error{--radio-border-color: var(--sys-color-border-error);--radio-border-color-hover: var(--sys-color-border-error);--radio-border-color-focus: var(--sys-color-border-error);--radio-indicator-border: var(--sys-color-border-error);--radio-indicator-border-hover: var(--sys-color-border-error);--radio-indicator-border-focus: var(--sys-color-border-error);--radio-indicator-fill: var(--sys-color-icon-error)}ap-radio-button-card .radio-button-card__container--error:has(input:checked){--radio-border-color: var(--sys-color-border-error);--radio-border-color-hover: var(--sys-color-border-error);--radio-border-color-focus: var(--sys-color-border-error);--radio-indicator-border: var(--sys-color-border-error);--radio-indicator-border-hover: var(--sys-color-border-error);--radio-indicator-border-focus: var(--sys-color-border-error)}ap-radio-button-card .radio-button-card__container--error:has(input:disabled){--radio-border-color-hover: var(--sys-color-border-error);--radio-border-color-focus: var(--sys-color-border-error);--radio-indicator-border: var(--sys-color-border-input-disabled);--radio-indicator-border-hover: var(--sys-color-border-input-disabled);--radio-indicator-border-focus: var(--sys-color-border-input-disabled);--radio-indicator-fill: var(--ref-color-grey-40)}ap-radio-button-card .radio-button-card__container--error:has(input:disabled):has(input:checked){--radio-indicator-border: var(--sys-color-border-input-disabled);--radio-indicator-border-hover: var(--sys-color-border-input-disabled);--radio-indicator-border-focus: var(--sys-color-border-input-disabled);--radio-indicator-fill: var(--ref-color-grey-40)}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(--sys-color-icon-featurelock)}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(--sys-color-surface-input-default);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(--sys-color-surface-input-disabled)}ap-radio-button-card .radio-button-card__container:has(input:disabled):has(input:checked) .radio-button-card__indicator-outer{background:var(--sys-color-surface-input-default)}ap-radio-button-card .radio-button-card__container--error:has(input:disabled) .radio-button-card__indicator-outer{background:var(--sys-color-surface-input-disabled)}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(--sys-color-text-interactive-default);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(--sys-color-icon-subtle);flex-shrink:0}ap-radio-button-card .radio-button-card__tooltip-icon:hover{color:var(--sys-color-text-secondary)}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(--sys-color-text-secondary);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(--sys-color-border-error);--radio-border-color-hover: var(--sys-color-border-error);--radio-indicator-border: var(--sys-color-border-error);--radio-indicator-fill: var(--sys-color-icon-error)}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 });
|
|
102
102
|
}
|
|
103
103
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RadioButtonCardComponent, decorators: [{
|
|
104
104
|
type: Component,
|
|
105
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-radio-button-card', standalone: true, imports: [SymbolComponent, StatusComponent, TooltipDirective], providers: [withSymbols(apInfo)], encapsulation: ViewEncapsulation.None, 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 [class.radio-button-card__container--centered]=\"centeredLayout()\">\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-background: var(--ref-color-white);--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--centered{display:flex;align-items:center}ap-radio-button-card .radio-button-card__container--centered .radio-button-card__header{align-items:center}ap-radio-button-card .radio-button-card__container--centered .radio-button-card__indicator,ap-radio-button-card .radio-button-card__container--centered .radio-button-card__lock-icon{top:50%;transform:translateY(-50%)}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"] }]
|
|
105
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-radio-button-card', standalone: true, imports: [SymbolComponent, StatusComponent, TooltipDirective], providers: [withSymbols(apInfo)], encapsulation: ViewEncapsulation.None, 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 [class.radio-button-card__container--centered]=\"centeredLayout()\">\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=\"default\"\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-background: var(--sys-color-surface-default);--radio-border-color: var(--sys-color-border-interactive-default);--radio-border-color-hover: var(--sys-color-border-interactive-hovered);--radio-border-color-focus: var(--sys-color-border-interactive-hovered);--radio-indicator-border: var(--sys-color-border-input-default);--radio-indicator-border-hover: var(--sys-color-border-input-hovered);--radio-indicator-border-focus: var(--sys-color-border-input-hovered);--radio-indicator-fill: var(--sys-color-surface-input-active);--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(--sys-radius-inner);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(--sys-color-border-interactive-active);border-radius:var(--sys-radius-inner)}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--centered{display:flex;align-items:center}ap-radio-button-card .radio-button-card__container--centered .radio-button-card__header{align-items:center}ap-radio-button-card .radio-button-card__container--centered .radio-button-card__indicator,ap-radio-button-card .radio-button-card__container--centered .radio-button-card__lock-icon{top:50%;transform:translateY(-50%)}ap-radio-button-card .radio-button-card__container:has(input:checked){--radio-border-color: var(--sys-color-border-interactive-active);--radio-border-color-hover: var(--sys-color-border-interactive-active);--radio-border-color-focus: var(--sys-color-border-interactive-active);--radio-indicator-border: var(--sys-color-border-input-active);--radio-indicator-border-hover: var(--sys-color-border-input-active);--radio-indicator-border-focus: var(--sys-color-border-input-active)}ap-radio-button-card .radio-button-card__container:has(input:disabled){--radio-border-color: var(--sys-color-border-interactive-disabled);--radio-border-color-hover: var(--sys-color-border-interactive-disabled);--radio-border-color-focus: var(--sys-color-border-interactive-disabled);--radio-indicator-border: var(--sys-color-border-input-disabled);--radio-indicator-border-hover: var(--sys-color-border-input-disabled);--radio-indicator-border-focus: var(--sys-color-border-input-disabled);--radio-indicator-fill: var(--sys-color-surface-input-active-disabled);--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(--sys-color-border-interactive-active-disabled);--radio-indicator-border: var(--sys-color-border-input-active-disabled)}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(--sys-color-border-featurelock);--radio-border-color-hover: var(--sys-color-border-featurelock);--radio-border-color-focus: var(--sys-color-border-featurelock);--radio-background: var(--sys-color-surface-featurelock);--radio-cursor: not-allowed}ap-radio-button-card .radio-button-card__container--error{--radio-border-color: var(--sys-color-border-error);--radio-border-color-hover: var(--sys-color-border-error);--radio-border-color-focus: var(--sys-color-border-error);--radio-indicator-border: var(--sys-color-border-error);--radio-indicator-border-hover: var(--sys-color-border-error);--radio-indicator-border-focus: var(--sys-color-border-error);--radio-indicator-fill: var(--sys-color-icon-error)}ap-radio-button-card .radio-button-card__container--error:has(input:checked){--radio-border-color: var(--sys-color-border-error);--radio-border-color-hover: var(--sys-color-border-error);--radio-border-color-focus: var(--sys-color-border-error);--radio-indicator-border: var(--sys-color-border-error);--radio-indicator-border-hover: var(--sys-color-border-error);--radio-indicator-border-focus: var(--sys-color-border-error)}ap-radio-button-card .radio-button-card__container--error:has(input:disabled){--radio-border-color-hover: var(--sys-color-border-error);--radio-border-color-focus: var(--sys-color-border-error);--radio-indicator-border: var(--sys-color-border-input-disabled);--radio-indicator-border-hover: var(--sys-color-border-input-disabled);--radio-indicator-border-focus: var(--sys-color-border-input-disabled);--radio-indicator-fill: var(--ref-color-grey-40)}ap-radio-button-card .radio-button-card__container--error:has(input:disabled):has(input:checked){--radio-indicator-border: var(--sys-color-border-input-disabled);--radio-indicator-border-hover: var(--sys-color-border-input-disabled);--radio-indicator-border-focus: var(--sys-color-border-input-disabled);--radio-indicator-fill: var(--ref-color-grey-40)}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(--sys-color-icon-featurelock)}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(--sys-color-surface-input-default);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(--sys-color-surface-input-disabled)}ap-radio-button-card .radio-button-card__container:has(input:disabled):has(input:checked) .radio-button-card__indicator-outer{background:var(--sys-color-surface-input-default)}ap-radio-button-card .radio-button-card__container--error:has(input:disabled) .radio-button-card__indicator-outer{background:var(--sys-color-surface-input-disabled)}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(--sys-color-text-interactive-default);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(--sys-color-icon-subtle);flex-shrink:0}ap-radio-button-card .radio-button-card__tooltip-icon:hover{color:var(--sys-color-text-secondary)}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(--sys-color-text-secondary);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(--sys-color-border-error);--radio-border-color-hover: var(--sys-color-border-error);--radio-indicator-border: var(--sys-color-border-error);--radio-indicator-fill: var(--sys-color-icon-error)}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"] }]
|
|
106
106
|
}], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], radioId: [{ type: i0.Input, args: [{ isSignal: true, alias: "radioId", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], linkUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkUrl", required: false }] }], linkTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkTitle", required: false }] }], titleSymbolId: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleSymbolId", required: false }] }], tooltipText: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipText", required: false }] }], statusBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusBadge", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], featureLocked: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureLocked", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], centered: [{ type: i0.Input, args: [{ isSignal: true, alias: "centered", required: false }] }] } });
|
|
107
107
|
|
|
108
108
|
/**
|
|
@@ -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 // Vertically centers the content within the card height.\n readonly centered = 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 // True when the card content should be vertically centered: explicitly opted in via centered,\n // or a structured single-row card (no description or link) that centers automatically.\n readonly centeredLayout = computed(() => {\n return this.centered() || (Boolean(this.customContentEnabled()) && !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 [class.radio-button-card__container--centered]=\"centeredLayout()\">\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 // Vertically centers the content within the card height.\n readonly centered = 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 // True when the card content should be vertically centered: explicitly opted in via centered,\n // or a structured single-row card (no description or link) that centers automatically.\n readonly centeredLayout = computed(() => {\n return this.centered() || (Boolean(this.customContentEnabled()) && !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 [class.radio-button-card__container--centered]=\"centeredLayout()\">\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=\"default\"\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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"}
|
|
@@ -264,11 +264,11 @@ class RadioComponent {
|
|
|
264
264
|
`);
|
|
265
265
|
}
|
|
266
266
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RadioComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
267
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.0.5", type: RadioComponent, isStandalone: true, selector: "ap-radio", inputs: { ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], disabled: ["disabled", "disabled", booleanAttribute], labelPosition: "labelPosition", radioId: "radioId", formControlName: "formControlName", value: "value", required: ["required", "required", booleanAttribute], name: "name" }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur" }, providers: [RADIO_VALUE_ACCESSOR], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, static: true }, { propertyName: "labelElement", first: true, predicate: ["label"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"radio-button-container\"\n [class.required]=\"required\"\n [class.label-left]=\"labelPosition === 'left'\">\n <input\n #input\n type=\"radio\"\n tabindex=\"0\"\n [attr.id]=\"inputId\"\n [attr.name]=\"name + '-radio-' + radioIndex\"\n [attr.value]=\"value\"\n [attr.aria-checked]=\"checked\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.data-test]=\"hostDataTest ?? name\"\n [checked]=\"checked\"\n [required]=\"required\"\n [class.disabled]=\"disabled\"\n (change)=\"onChange($event)\"\n (blur)=\"onInputBlur($event)\"\n (focus)=\"onInputFocus($event)\" />\n <div\n class=\"radio-button\"\n [class.disabled]=\"disabled\"\n (click)=\"select($event)\"></div>\n <label\n [for]=\"inputId\"\n (click)=\"select($event)\">\n <ng-content />\n </label>\n</div>\n", styles: ["ap-radio .radio-button-container{display:flex;align-items:center;gap:var(--
|
|
267
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.0.5", type: RadioComponent, isStandalone: true, selector: "ap-radio", inputs: { ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], disabled: ["disabled", "disabled", booleanAttribute], labelPosition: "labelPosition", radioId: "radioId", formControlName: "formControlName", value: "value", required: ["required", "required", booleanAttribute], name: "name" }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur" }, providers: [RADIO_VALUE_ACCESSOR], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, static: true }, { propertyName: "labelElement", first: true, predicate: ["label"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"radio-button-container\"\n [class.required]=\"required\"\n [class.label-left]=\"labelPosition === 'left'\">\n <input\n #input\n type=\"radio\"\n tabindex=\"0\"\n [attr.id]=\"inputId\"\n [attr.name]=\"name + '-radio-' + radioIndex\"\n [attr.value]=\"value\"\n [attr.aria-checked]=\"checked\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.data-test]=\"hostDataTest ?? name\"\n [checked]=\"checked\"\n [required]=\"required\"\n [class.disabled]=\"disabled\"\n (change)=\"onChange($event)\"\n (blur)=\"onInputBlur($event)\"\n (focus)=\"onInputFocus($event)\" />\n <div\n class=\"radio-button\"\n [class.disabled]=\"disabled\"\n (click)=\"select($event)\"></div>\n <label\n [for]=\"inputId\"\n (click)=\"select($event)\">\n <ng-content />\n </label>\n</div>\n", styles: ["ap-radio .radio-button-container{display:flex;align-items:center;gap:var(--sys-spacing-inline-icon-default)}ap-radio .radio-button-container.label-left{flex-direction:row-reverse}ap-radio .radio-button-container input[type=radio]{transform:scale(0);position:absolute}ap-radio .radio-button-container input[type=radio]:checked~.radio-button{border-color:var(--sys-color-border-input-active);box-shadow:inset 0 0 0 3px var(--sys-color-surface-input-default)}ap-radio .radio-button-container input[type=radio]:checked~.radio-button.disabled{background:var(--sys-color-surface-input-active-disabled);border-color:var(--sys-color-border-input-active-disabled);box-shadow:inset 0 0 0 3px var(--sys-color-surface-input-default)}ap-radio .radio-button-container input[type=radio]:checked:focus~.radio-button{border-color:var(--sys-color-border-input-active)}ap-radio .radio-button-container input[type=radio].disabled~.radio-button{pointer-events:none;cursor:default;box-shadow:inset 0 0 0 16px var(--sys-color-surface-input-disabled);border-color:var(--sys-color-border-input-disabled)}ap-radio .radio-button-container input[type=radio].disabled~label{pointer-events:none;cursor:default;color:var(--sys-color-text-interactive-disabled)}ap-radio .radio-button-container input[type=radio]:focus~.radio-button{outline:3px solid var(--ref-color-electric-blue-100);border-color:var(--sys-color-border-input-hovered);outline-offset:1px}ap-radio .radio-button-container .radio-button{width:16px;height:16px;border-radius:100%;border:1px solid var(--sys-color-border-input-default);background:var(--sys-color-surface-input-active);box-shadow:inset 0 0 0 16px var(--sys-color-surface-input-default);transition:box-shadow var(--comp-radio-transition-duration);flex-shrink:0}ap-radio .radio-button-container .radio-button:hover:not(.disabled){cursor:pointer;border-color:var(--sys-color-border-input-hovered)}ap-radio .radio-button-container label{display:flex;align-items:center;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height);color:var(--sys-color-text-interactive-default)}ap-radio .radio-button-container label:empty{display:none}ap-radio .radio-button-container label.disabled{color:var(--sys-color-text-interactive-disabled)}ap-radio .radio-button-container label:hover:not(.disabled){cursor:pointer}ap-radio.ng-invalid.ng-dirty .radio-button:not(.disabled){border-color:var(--sys-color-border-error);background:var(--sys-color-icon-error)}ap-radio.ng-invalid.ng-dirty .radio-button:not(.disabled):hover{border-color:var(--sys-color-border-error)}ap-radio.ng-invalid.ng-dirty input[type=radio]:focus~.radio-button:not(.disabled){border-color:var(--sys-color-border-error)}ap-radio.ng-invalid.ng-dirty input[type=radio]:checked~.radio-button:not(.disabled){border-color:var(--sys-color-border-error)}ap-radio.ng-invalid.ng-dirty input[type=radio]:checked~.radio-button.disabled{background:var(--ref-color-grey-40);box-shadow:inset 0 0 0 3px var(--sys-color-surface-input-disabled);border-color:var(--sys-color-border-input-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
268
268
|
}
|
|
269
269
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RadioComponent, decorators: [{
|
|
270
270
|
type: Component,
|
|
271
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-radio', standalone: true, providers: [RADIO_VALUE_ACCESSOR], encapsulation: ViewEncapsulation.None, template: "<div\n class=\"radio-button-container\"\n [class.required]=\"required\"\n [class.label-left]=\"labelPosition === 'left'\">\n <input\n #input\n type=\"radio\"\n tabindex=\"0\"\n [attr.id]=\"inputId\"\n [attr.name]=\"name + '-radio-' + radioIndex\"\n [attr.value]=\"value\"\n [attr.aria-checked]=\"checked\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.data-test]=\"hostDataTest ?? name\"\n [checked]=\"checked\"\n [required]=\"required\"\n [class.disabled]=\"disabled\"\n (change)=\"onChange($event)\"\n (blur)=\"onInputBlur($event)\"\n (focus)=\"onInputFocus($event)\" />\n <div\n class=\"radio-button\"\n [class.disabled]=\"disabled\"\n (click)=\"select($event)\"></div>\n <label\n [for]=\"inputId\"\n (click)=\"select($event)\">\n <ng-content />\n </label>\n</div>\n", styles: ["ap-radio .radio-button-container{display:flex;align-items:center;gap:var(--
|
|
271
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-radio', standalone: true, providers: [RADIO_VALUE_ACCESSOR], encapsulation: ViewEncapsulation.None, template: "<div\n class=\"radio-button-container\"\n [class.required]=\"required\"\n [class.label-left]=\"labelPosition === 'left'\">\n <input\n #input\n type=\"radio\"\n tabindex=\"0\"\n [attr.id]=\"inputId\"\n [attr.name]=\"name + '-radio-' + radioIndex\"\n [attr.value]=\"value\"\n [attr.aria-checked]=\"checked\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.data-test]=\"hostDataTest ?? name\"\n [checked]=\"checked\"\n [required]=\"required\"\n [class.disabled]=\"disabled\"\n (change)=\"onChange($event)\"\n (blur)=\"onInputBlur($event)\"\n (focus)=\"onInputFocus($event)\" />\n <div\n class=\"radio-button\"\n [class.disabled]=\"disabled\"\n (click)=\"select($event)\"></div>\n <label\n [for]=\"inputId\"\n (click)=\"select($event)\">\n <ng-content />\n </label>\n</div>\n", styles: ["ap-radio .radio-button-container{display:flex;align-items:center;gap:var(--sys-spacing-inline-icon-default)}ap-radio .radio-button-container.label-left{flex-direction:row-reverse}ap-radio .radio-button-container input[type=radio]{transform:scale(0);position:absolute}ap-radio .radio-button-container input[type=radio]:checked~.radio-button{border-color:var(--sys-color-border-input-active);box-shadow:inset 0 0 0 3px var(--sys-color-surface-input-default)}ap-radio .radio-button-container input[type=radio]:checked~.radio-button.disabled{background:var(--sys-color-surface-input-active-disabled);border-color:var(--sys-color-border-input-active-disabled);box-shadow:inset 0 0 0 3px var(--sys-color-surface-input-default)}ap-radio .radio-button-container input[type=radio]:checked:focus~.radio-button{border-color:var(--sys-color-border-input-active)}ap-radio .radio-button-container input[type=radio].disabled~.radio-button{pointer-events:none;cursor:default;box-shadow:inset 0 0 0 16px var(--sys-color-surface-input-disabled);border-color:var(--sys-color-border-input-disabled)}ap-radio .radio-button-container input[type=radio].disabled~label{pointer-events:none;cursor:default;color:var(--sys-color-text-interactive-disabled)}ap-radio .radio-button-container input[type=radio]:focus~.radio-button{outline:3px solid var(--ref-color-electric-blue-100);border-color:var(--sys-color-border-input-hovered);outline-offset:1px}ap-radio .radio-button-container .radio-button{width:16px;height:16px;border-radius:100%;border:1px solid var(--sys-color-border-input-default);background:var(--sys-color-surface-input-active);box-shadow:inset 0 0 0 16px var(--sys-color-surface-input-default);transition:box-shadow var(--comp-radio-transition-duration);flex-shrink:0}ap-radio .radio-button-container .radio-button:hover:not(.disabled){cursor:pointer;border-color:var(--sys-color-border-input-hovered)}ap-radio .radio-button-container label{display:flex;align-items:center;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height);color:var(--sys-color-text-interactive-default)}ap-radio .radio-button-container label:empty{display:none}ap-radio .radio-button-container label.disabled{color:var(--sys-color-text-interactive-disabled)}ap-radio .radio-button-container label:hover:not(.disabled){cursor:pointer}ap-radio.ng-invalid.ng-dirty .radio-button:not(.disabled){border-color:var(--sys-color-border-error);background:var(--sys-color-icon-error)}ap-radio.ng-invalid.ng-dirty .radio-button:not(.disabled):hover{border-color:var(--sys-color-border-error)}ap-radio.ng-invalid.ng-dirty input[type=radio]:focus~.radio-button:not(.disabled){border-color:var(--sys-color-border-error)}ap-radio.ng-invalid.ng-dirty input[type=radio]:checked~.radio-button:not(.disabled){border-color:var(--sys-color-border-error)}ap-radio.ng-invalid.ng-dirty input[type=radio]:checked~.radio-button.disabled{background:var(--ref-color-grey-40);box-shadow:inset 0 0 0 3px var(--sys-color-surface-input-disabled);border-color:var(--sys-color-border-input-disabled)}\n"] }]
|
|
272
272
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { inputElement: [{
|
|
273
273
|
type: ViewChild,
|
|
274
274
|
args: ['input', { static: true }]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-radio.mjs","sources":["../../../libs/ui-components/radio/src/radio.component.ts","../../../libs/ui-components/radio/src/radio.component.html","../../../libs/ui-components/radio/src/agorapulse-ui-components-radio.ts"],"sourcesContent":["import {\n AfterContentInit,\n booleanAttribute,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n forwardRef,\n inject,\n Injectable,\n Injector,\n Input,\n NgZone,\n OnChanges,\n OnDestroy,\n OnInit,\n Output,\n Provider,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';\nimport { filter, fromEvent, Subject, takeUntil } from 'rxjs';\n\nexport const RADIO_VALUE_ACCESSOR: Provider = {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => RadioComponent),\n multi: true,\n};\n\n@Injectable({\n providedIn: 'root',\n})\nexport class RadioControlRegistry {\n private accessors: [NgControl, RadioComponent][] = [];\n\n add(control: NgControl, accessor: RadioComponent) {\n this.accessors.push([control, accessor]);\n }\n\n remove(accessor: RadioComponent) {\n this.accessors = this.accessors.filter(([, radioComponent]) => {\n return radioComponent !== accessor;\n });\n }\n\n select(accessor: RadioComponent) {\n this.accessors.forEach(([ngControl, radioComponent]) => {\n if (this.isSameGroup(ngControl, radioComponent, accessor) && radioComponent !== accessor) {\n radioComponent.writeValue(accessor.value);\n }\n });\n }\n\n getIndex(accessor: RadioComponent): number {\n return this.accessors.findIndex(([, radioComponent]) => {\n return radioComponent === accessor;\n });\n }\n\n getNextRadio(accessor: RadioComponent): RadioComponent | null {\n const index = this.getIndex(accessor);\n const nextIndex = index + 1;\n if (nextIndex >= this.accessors.length) {\n return this.accessors[0][1];\n }\n const nextRadio = this.accessors[nextIndex];\n return nextRadio ? nextRadio[1] : null;\n }\n\n getPreviousRadio(accessor: RadioComponent): RadioComponent | null {\n const index = this.getIndex(accessor);\n if (index === 0) {\n return this.accessors[this.accessors.length - 1][1];\n }\n const previousIndex = index - 1;\n const previousRadio = this.accessors[previousIndex];\n return previousRadio ? previousRadio[1] : null;\n }\n\n blurAllGroup(accessor: RadioComponent): void {\n this.accessors.forEach(([, radioComponent]) => {\n if (this.isSameGroup(accessor.control, radioComponent, accessor)) {\n radioComponent.inputElement.nativeElement.blur();\n }\n });\n }\n\n setNegativeTabIndexToAllExcept(accessor: RadioComponent): void {\n this.accessors.forEach(([, radioComponent]) => {\n if (this.isSameGroup(accessor.control, radioComponent, accessor)) {\n if (accessor.radioId !== radioComponent.radioId) {\n radioComponent.inputElement.nativeElement.tabIndex = -1;\n } else {\n radioComponent.inputElement.nativeElement.tabIndex = 0;\n }\n }\n });\n }\n\n focusPrevious(accessor: RadioComponent): void {\n const previousRadio = this.getPreviousRadio(accessor);\n if (previousRadio) {\n previousRadio.inputElement.nativeElement.focus();\n }\n }\n\n focusNext(accessor: RadioComponent): void {\n const nextRadio = this.getNextRadio(accessor);\n if (nextRadio) {\n nextRadio.inputElement.nativeElement.focus();\n }\n }\n\n getFirstCheckedRadio(): RadioComponent | null {\n const checkedRadio = this.accessors.find(([, radioComponent]) => {\n return radioComponent.checked;\n });\n return checkedRadio ? checkedRadio[1] : null;\n }\n\n private isSameGroup(ngControl: NgControl, radioComponent: RadioComponent, accessor: RadioComponent): boolean {\n if (!ngControl.control) {\n return false;\n }\n return radioComponent.name === accessor.name;\n }\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-radio',\n styleUrls: ['./radio.component.scss'],\n standalone: true,\n providers: [RADIO_VALUE_ACCESSOR],\n templateUrl: './radio.component.html',\n encapsulation: ViewEncapsulation.None,\n})\nexport class RadioComponent implements ControlValueAccessor, AfterContentInit, OnChanges, OnInit, OnDestroy {\n public readonly injector: Injector = inject(Injector);\n private readonly changeDetectorRef: ChangeDetectorRef = inject(ChangeDetectorRef);\n private readonly radioControlRegistry: RadioControlRegistry = inject(RadioControlRegistry);\n private readonly ngZone: NgZone = inject(NgZone);\n\n @ViewChild('input', { static: true }) inputElement!: ElementRef<HTMLInputElement>;\n @ViewChild('label', { static: true }) labelElement!: ElementRef<HTMLInputElement>;\n @Input('aria-label') ariaLabel = '';\n @Input('aria-labelledby') ariaLabelledby: string | null = null;\n @Input('aria-describedby') ariaDescribedby = '';\n @Input({\n transform: booleanAttribute,\n })\n set disabled(disabled: boolean) {\n this._disabled = disabled;\n }\n\n get disabled(): boolean {\n return this._disabled;\n }\n @Input() labelPosition: 'left' | 'right' = 'right';\n @Input({\n required: true,\n })\n radioId = '';\n @Input() formControlName!: string;\n @Input({\n required: true,\n })\n value: unknown;\n @Input({\n transform: booleanAttribute,\n })\n required = false;\n @Input() name = '';\n\n // eslint-disable-next-line @angular-eslint/no-output-on-prefix\n @Output() onClick: EventEmitter<{\n originalEvent: Event;\n value: unknown;\n }> = new EventEmitter();\n\n // eslint-disable-next-line @angular-eslint/no-output-on-prefix\n @Output() onFocus: EventEmitter<FocusEvent> = new EventEmitter();\n\n // eslint-disable-next-line @angular-eslint/no-output-on-prefix\n @Output() onBlur: EventEmitter<FocusEvent> = new EventEmitter();\n\n inputId = '';\n _disabled = false;\n hasLabel = false;\n hostDataTest: string | undefined;\n control!: NgControl;\n checked = false;\n focused = false;\n radioIndex = 0;\n private readonly destroy$: Subject<void> = new Subject<void>();\n\n public onModelChange: (value: unknown) => void = () => {\n // ignore\n };\n\n public onModelTouched: () => void = () => {\n // ignore\n };\n\n constructor(private elementRef: ElementRef) {\n this.hostDataTest = elementRef.nativeElement.getAttribute('data-test');\n\n this.ngZone.runOutsideAngular(() => {\n fromEvent(window, 'keydown')\n .pipe(\n filter((event): event is KeyboardEvent => 'key' in event),\n takeUntil(this.destroy$)\n )\n .subscribe((event: KeyboardEvent) => {\n // Handle keydown event\n switch (event.key) {\n case 'ArrowDown':\n case 'ArrowRight':\n this.ngZone.run(() => {\n if (this.focused) {\n event.stopImmediatePropagation();\n this.radioControlRegistry.blurAllGroup(this);\n this.radioControlRegistry.focusNext(this);\n }\n });\n break;\n case 'ArrowUp':\n case 'ArrowLeft':\n this.ngZone.run(() => {\n if (this.focused) {\n event.stopImmediatePropagation();\n this.radioControlRegistry.blurAllGroup(this);\n this.radioControlRegistry.focusPrevious(this);\n }\n });\n break;\n default:\n return;\n }\n });\n });\n }\n\n ngOnChanges(): void {\n if (this.labelElement) {\n this.hasLabel = !!this.labelElement.nativeElement.textContent?.trim();\n }\n }\n\n ngOnInit() {\n this.control = this.injector.get(NgControl);\n this.checkName();\n this.radioControlRegistry.add(this.control, this);\n this.radioIndex = this.radioControlRegistry.getIndex(this);\n this.inputId = `${this.radioId}-${this.radioIndex}`;\n }\n\n ngAfterContentInit(): void {\n if (this.labelElement) {\n this.hasLabel = !!this.labelElement.nativeElement.textContent?.trim();\n }\n }\n\n ngOnDestroy() {\n this.radioControlRegistry.remove(this);\n this.destroy$.next();\n this.destroy$.complete();\n }\n\n handleClick(event: MouseEvent, radioButton: HTMLInputElement) {\n event.preventDefault();\n\n if (this.disabled) {\n return;\n }\n this.select(event);\n radioButton.focus();\n }\n\n select(event: Event) {\n if (!this.disabled && !this.checked) {\n this.inputElement.nativeElement.checked = true;\n this.checked = true;\n this.onModelChange(this.value);\n this.radioControlRegistry.select(this);\n this.onClick.emit({ originalEvent: event, value: this.value });\n }\n }\n\n writeValue(value: unknown): void {\n this.checked = value == this.value;\n\n if (this.inputElement?.nativeElement) {\n this.inputElement.nativeElement.checked = this.checked;\n }\n\n this.changeDetectorRef.markForCheck();\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 onInputFocus(event: FocusEvent) {\n this.focused = true;\n if (!this.disabled && !this.checked) {\n this.radioControlRegistry.setNegativeTabIndexToAllExcept(this);\n this.inputElement.nativeElement.checked = true;\n this.checked = true;\n this.onModelChange(this.value);\n this.onFocus.emit(event);\n }\n }\n\n onInputBlur(event: FocusEvent) {\n this.focused = false;\n this.onModelTouched();\n this.onBlur.emit(event);\n }\n\n onChange(event: Event) {\n this.select(event);\n }\n\n private checkName() {\n if (this.name && this.formControlName && this.name !== this.formControlName) {\n this.throwNameError();\n }\n if (!this.name && this.formControlName) {\n this.name = this.formControlName;\n }\n }\n\n private throwNameError() {\n throw new Error(`\n If you define both a name and a formControlName attribute on your radio button, their values\n must match. Ex: <p-radioButton formControlName=\"food\" name=\"food\"></p-radioButton>\n `);\n }\n}\n","<div\n class=\"radio-button-container\"\n [class.required]=\"required\"\n [class.label-left]=\"labelPosition === 'left'\">\n <input\n #input\n type=\"radio\"\n tabindex=\"0\"\n [attr.id]=\"inputId\"\n [attr.name]=\"name + '-radio-' + radioIndex\"\n [attr.value]=\"value\"\n [attr.aria-checked]=\"checked\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.data-test]=\"hostDataTest ?? name\"\n [checked]=\"checked\"\n [required]=\"required\"\n [class.disabled]=\"disabled\"\n (change)=\"onChange($event)\"\n (blur)=\"onInputBlur($event)\"\n (focus)=\"onInputFocus($event)\" />\n <div\n class=\"radio-button\"\n [class.disabled]=\"disabled\"\n (click)=\"select($event)\"></div>\n <label\n [for]=\"inputId\"\n (click)=\"select($event)\">\n <ng-content />\n </label>\n</div>\n","/**\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.mjs","sources":["../../../libs/ui-components/radio/src/radio.component.ts","../../../libs/ui-components/radio/src/radio.component.html","../../../libs/ui-components/radio/src/agorapulse-ui-components-radio.ts"],"sourcesContent":["import {\n AfterContentInit,\n booleanAttribute,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n forwardRef,\n inject,\n Injectable,\n Injector,\n Input,\n NgZone,\n OnChanges,\n OnDestroy,\n OnInit,\n Output,\n Provider,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';\nimport { filter, fromEvent, Subject, takeUntil } from 'rxjs';\n\nexport const RADIO_VALUE_ACCESSOR: Provider = {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => RadioComponent),\n multi: true,\n};\n\n@Injectable({\n providedIn: 'root',\n})\nexport class RadioControlRegistry {\n private accessors: [NgControl, RadioComponent][] = [];\n\n add(control: NgControl, accessor: RadioComponent) {\n this.accessors.push([control, accessor]);\n }\n\n remove(accessor: RadioComponent) {\n this.accessors = this.accessors.filter(([, radioComponent]) => {\n return radioComponent !== accessor;\n });\n }\n\n select(accessor: RadioComponent) {\n this.accessors.forEach(([ngControl, radioComponent]) => {\n if (this.isSameGroup(ngControl, radioComponent, accessor) && radioComponent !== accessor) {\n radioComponent.writeValue(accessor.value);\n }\n });\n }\n\n getIndex(accessor: RadioComponent): number {\n return this.accessors.findIndex(([, radioComponent]) => {\n return radioComponent === accessor;\n });\n }\n\n getNextRadio(accessor: RadioComponent): RadioComponent | null {\n const index = this.getIndex(accessor);\n const nextIndex = index + 1;\n if (nextIndex >= this.accessors.length) {\n return this.accessors[0][1];\n }\n const nextRadio = this.accessors[nextIndex];\n return nextRadio ? nextRadio[1] : null;\n }\n\n getPreviousRadio(accessor: RadioComponent): RadioComponent | null {\n const index = this.getIndex(accessor);\n if (index === 0) {\n return this.accessors[this.accessors.length - 1][1];\n }\n const previousIndex = index - 1;\n const previousRadio = this.accessors[previousIndex];\n return previousRadio ? previousRadio[1] : null;\n }\n\n blurAllGroup(accessor: RadioComponent): void {\n this.accessors.forEach(([, radioComponent]) => {\n if (this.isSameGroup(accessor.control, radioComponent, accessor)) {\n radioComponent.inputElement.nativeElement.blur();\n }\n });\n }\n\n setNegativeTabIndexToAllExcept(accessor: RadioComponent): void {\n this.accessors.forEach(([, radioComponent]) => {\n if (this.isSameGroup(accessor.control, radioComponent, accessor)) {\n if (accessor.radioId !== radioComponent.radioId) {\n radioComponent.inputElement.nativeElement.tabIndex = -1;\n } else {\n radioComponent.inputElement.nativeElement.tabIndex = 0;\n }\n }\n });\n }\n\n focusPrevious(accessor: RadioComponent): void {\n const previousRadio = this.getPreviousRadio(accessor);\n if (previousRadio) {\n previousRadio.inputElement.nativeElement.focus();\n }\n }\n\n focusNext(accessor: RadioComponent): void {\n const nextRadio = this.getNextRadio(accessor);\n if (nextRadio) {\n nextRadio.inputElement.nativeElement.focus();\n }\n }\n\n getFirstCheckedRadio(): RadioComponent | null {\n const checkedRadio = this.accessors.find(([, radioComponent]) => {\n return radioComponent.checked;\n });\n return checkedRadio ? checkedRadio[1] : null;\n }\n\n private isSameGroup(ngControl: NgControl, radioComponent: RadioComponent, accessor: RadioComponent): boolean {\n if (!ngControl.control) {\n return false;\n }\n return radioComponent.name === accessor.name;\n }\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-radio',\n styleUrls: ['./radio.component.scss'],\n standalone: true,\n providers: [RADIO_VALUE_ACCESSOR],\n templateUrl: './radio.component.html',\n encapsulation: ViewEncapsulation.None,\n})\nexport class RadioComponent implements ControlValueAccessor, AfterContentInit, OnChanges, OnInit, OnDestroy {\n public readonly injector: Injector = inject(Injector);\n private readonly changeDetectorRef: ChangeDetectorRef = inject(ChangeDetectorRef);\n private readonly radioControlRegistry: RadioControlRegistry = inject(RadioControlRegistry);\n private readonly ngZone: NgZone = inject(NgZone);\n\n @ViewChild('input', { static: true }) inputElement!: ElementRef<HTMLInputElement>;\n @ViewChild('label', { static: true }) labelElement!: ElementRef<HTMLInputElement>;\n @Input('aria-label') ariaLabel = '';\n @Input('aria-labelledby') ariaLabelledby: string | null = null;\n @Input('aria-describedby') ariaDescribedby = '';\n @Input({\n transform: booleanAttribute,\n })\n set disabled(disabled: boolean) {\n this._disabled = disabled;\n }\n\n get disabled(): boolean {\n return this._disabled;\n }\n @Input() labelPosition: 'left' | 'right' = 'right';\n @Input({\n required: true,\n })\n radioId = '';\n @Input() formControlName!: string;\n @Input({\n required: true,\n })\n value: unknown;\n @Input({\n transform: booleanAttribute,\n })\n required = false;\n @Input() name = '';\n\n // eslint-disable-next-line @angular-eslint/no-output-on-prefix\n @Output() onClick: EventEmitter<{\n originalEvent: Event;\n value: unknown;\n }> = new EventEmitter();\n\n // eslint-disable-next-line @angular-eslint/no-output-on-prefix\n @Output() onFocus: EventEmitter<FocusEvent> = new EventEmitter();\n\n // eslint-disable-next-line @angular-eslint/no-output-on-prefix\n @Output() onBlur: EventEmitter<FocusEvent> = new EventEmitter();\n\n inputId = '';\n _disabled = false;\n hasLabel = false;\n hostDataTest: string | undefined;\n control!: NgControl;\n checked = false;\n focused = false;\n radioIndex = 0;\n private readonly destroy$: Subject<void> = new Subject<void>();\n\n public onModelChange: (value: unknown) => void = () => {\n // ignore\n };\n\n public onModelTouched: () => void = () => {\n // ignore\n };\n\n constructor(private elementRef: ElementRef) {\n this.hostDataTest = elementRef.nativeElement.getAttribute('data-test');\n\n this.ngZone.runOutsideAngular(() => {\n fromEvent(window, 'keydown')\n .pipe(\n filter((event): event is KeyboardEvent => 'key' in event),\n takeUntil(this.destroy$)\n )\n .subscribe((event: KeyboardEvent) => {\n // Handle keydown event\n switch (event.key) {\n case 'ArrowDown':\n case 'ArrowRight':\n this.ngZone.run(() => {\n if (this.focused) {\n event.stopImmediatePropagation();\n this.radioControlRegistry.blurAllGroup(this);\n this.radioControlRegistry.focusNext(this);\n }\n });\n break;\n case 'ArrowUp':\n case 'ArrowLeft':\n this.ngZone.run(() => {\n if (this.focused) {\n event.stopImmediatePropagation();\n this.radioControlRegistry.blurAllGroup(this);\n this.radioControlRegistry.focusPrevious(this);\n }\n });\n break;\n default:\n return;\n }\n });\n });\n }\n\n ngOnChanges(): void {\n if (this.labelElement) {\n this.hasLabel = !!this.labelElement.nativeElement.textContent?.trim();\n }\n }\n\n ngOnInit() {\n this.control = this.injector.get(NgControl);\n this.checkName();\n this.radioControlRegistry.add(this.control, this);\n this.radioIndex = this.radioControlRegistry.getIndex(this);\n this.inputId = `${this.radioId}-${this.radioIndex}`;\n }\n\n ngAfterContentInit(): void {\n if (this.labelElement) {\n this.hasLabel = !!this.labelElement.nativeElement.textContent?.trim();\n }\n }\n\n ngOnDestroy() {\n this.radioControlRegistry.remove(this);\n this.destroy$.next();\n this.destroy$.complete();\n }\n\n handleClick(event: MouseEvent, radioButton: HTMLInputElement) {\n event.preventDefault();\n\n if (this.disabled) {\n return;\n }\n this.select(event);\n radioButton.focus();\n }\n\n select(event: Event) {\n if (!this.disabled && !this.checked) {\n this.inputElement.nativeElement.checked = true;\n this.checked = true;\n this.onModelChange(this.value);\n this.radioControlRegistry.select(this);\n this.onClick.emit({ originalEvent: event, value: this.value });\n }\n }\n\n writeValue(value: unknown): void {\n this.checked = value == this.value;\n\n if (this.inputElement?.nativeElement) {\n this.inputElement.nativeElement.checked = this.checked;\n }\n\n this.changeDetectorRef.markForCheck();\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 onInputFocus(event: FocusEvent) {\n this.focused = true;\n if (!this.disabled && !this.checked) {\n this.radioControlRegistry.setNegativeTabIndexToAllExcept(this);\n this.inputElement.nativeElement.checked = true;\n this.checked = true;\n this.onModelChange(this.value);\n this.onFocus.emit(event);\n }\n }\n\n onInputBlur(event: FocusEvent) {\n this.focused = false;\n this.onModelTouched();\n this.onBlur.emit(event);\n }\n\n onChange(event: Event) {\n this.select(event);\n }\n\n private checkName() {\n if (this.name && this.formControlName && this.name !== this.formControlName) {\n this.throwNameError();\n }\n if (!this.name && this.formControlName) {\n this.name = this.formControlName;\n }\n }\n\n private throwNameError() {\n throw new Error(`\n If you define both a name and a formControlName attribute on your radio button, their values\n must match. Ex: <p-radioButton formControlName=\"food\" name=\"food\"></p-radioButton>\n `);\n }\n}\n","<div\n class=\"radio-button-container\"\n [class.required]=\"required\"\n [class.label-left]=\"labelPosition === 'left'\">\n <input\n #input\n type=\"radio\"\n tabindex=\"0\"\n [attr.id]=\"inputId\"\n [attr.name]=\"name + '-radio-' + radioIndex\"\n [attr.value]=\"value\"\n [attr.aria-checked]=\"checked\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.data-test]=\"hostDataTest ?? name\"\n [checked]=\"checked\"\n [required]=\"required\"\n [class.disabled]=\"disabled\"\n (change)=\"onChange($event)\"\n (blur)=\"onInputBlur($event)\"\n (focus)=\"onInputFocus($event)\" />\n <div\n class=\"radio-button\"\n [class.disabled]=\"disabled\"\n (click)=\"select($event)\"></div>\n <label\n [for]=\"inputId\"\n (click)=\"select($event)\">\n <ng-content />\n </label>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;AAyBO,MAAM,oBAAoB,GAAa;AAC1C,IAAA,OAAO,EAAE,iBAAiB;AAC1B,IAAA,WAAW,EAAE,UAAU,CAAC,MAAM,cAAc,CAAC;AAC7C,IAAA,KAAK,EAAE,IAAI;;MAMF,oBAAoB,CAAA;IACrB,SAAS,GAAkC,EAAE;IAErD,GAAG,CAAC,OAAkB,EAAE,QAAwB,EAAA;QAC5C,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;IAC5C;AAEA,IAAA,MAAM,CAAC,QAAwB,EAAA;AAC3B,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,GAAG,cAAc,CAAC,KAAI;YAC1D,OAAO,cAAc,KAAK,QAAQ;AACtC,QAAA,CAAC,CAAC;IACN;AAEA,IAAA,MAAM,CAAC,QAAwB,EAAA;AAC3B,QAAA,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,cAAc,CAAC,KAAI;AACnD,YAAA,IAAI,IAAI,CAAC,WAAW,CAAC,SAAS,EAAE,cAAc,EAAE,QAAQ,CAAC,IAAI,cAAc,KAAK,QAAQ,EAAE;AACtF,gBAAA,cAAc,CAAC,UAAU,CAAC,QAAQ,CAAC,KAAK,CAAC;YAC7C;AACJ,QAAA,CAAC,CAAC;IACN;AAEA,IAAA,QAAQ,CAAC,QAAwB,EAAA;AAC7B,QAAA,OAAO,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,GAAG,cAAc,CAAC,KAAI;YACnD,OAAO,cAAc,KAAK,QAAQ;AACtC,QAAA,CAAC,CAAC;IACN;AAEA,IAAA,YAAY,CAAC,QAAwB,EAAA;QACjC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC;AACrC,QAAA,MAAM,SAAS,GAAG,KAAK,GAAG,CAAC;QAC3B,IAAI,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE;YACpC,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC/B;QACA,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC;AAC3C,QAAA,OAAO,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC,GAAG,IAAI;IAC1C;AAEA,IAAA,gBAAgB,CAAC,QAAwB,EAAA;QACrC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC;AACrC,QAAA,IAAI,KAAK,KAAK,CAAC,EAAE;AACb,YAAA,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QACvD;AACA,QAAA,MAAM,aAAa,GAAG,KAAK,GAAG,CAAC;QAC/B,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC;AACnD,QAAA,OAAO,aAAa,GAAG,aAAa,CAAC,CAAC,CAAC,GAAG,IAAI;IAClD;AAEA,IAAA,YAAY,CAAC,QAAwB,EAAA;QACjC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,GAAG,cAAc,CAAC,KAAI;AAC1C,YAAA,IAAI,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,OAAO,EAAE,cAAc,EAAE,QAAQ,CAAC,EAAE;AAC9D,gBAAA,cAAc,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,EAAE;YACpD;AACJ,QAAA,CAAC,CAAC;IACN;AAEA,IAAA,8BAA8B,CAAC,QAAwB,EAAA;QACnD,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,GAAG,cAAc,CAAC,KAAI;AAC1C,YAAA,IAAI,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,OAAO,EAAE,cAAc,EAAE,QAAQ,CAAC,EAAE;gBAC9D,IAAI,QAAQ,CAAC,OAAO,KAAK,cAAc,CAAC,OAAO,EAAE;oBAC7C,cAAc,CAAC,YAAY,CAAC,aAAa,CAAC,QAAQ,GAAG,CAAC,CAAC;gBAC3D;qBAAO;oBACH,cAAc,CAAC,YAAY,CAAC,aAAa,CAAC,QAAQ,GAAG,CAAC;gBAC1D;YACJ;AACJ,QAAA,CAAC,CAAC;IACN;AAEA,IAAA,aAAa,CAAC,QAAwB,EAAA;QAClC,MAAM,aAAa,GAAG,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC;QACrD,IAAI,aAAa,EAAE;AACf,YAAA,aAAa,CAAC,YAAY,CAAC,aAAa,CAAC,KAAK,EAAE;QACpD;IACJ;AAEA,IAAA,SAAS,CAAC,QAAwB,EAAA;QAC9B,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;QAC7C,IAAI,SAAS,EAAE;AACX,YAAA,SAAS,CAAC,YAAY,CAAC,aAAa,CAAC,KAAK,EAAE;QAChD;IACJ;IAEA,oBAAoB,GAAA;AAChB,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,GAAG,cAAc,CAAC,KAAI;YAC5D,OAAO,cAAc,CAAC,OAAO;AACjC,QAAA,CAAC,CAAC;AACF,QAAA,OAAO,YAAY,GAAG,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI;IAChD;AAEQ,IAAA,WAAW,CAAC,SAAoB,EAAE,cAA8B,EAAE,QAAwB,EAAA;AAC9F,QAAA,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE;AACpB,YAAA,OAAO,KAAK;QAChB;AACA,QAAA,OAAO,cAAc,CAAC,IAAI,KAAK,QAAQ,CAAC,IAAI;IAChD;uGA7FS,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAApB,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,oBAAoB,cAFjB,MAAM,EAAA,CAAA;;2FAET,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAHhC,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,UAAU,EAAE,MAAM;AACrB,iBAAA;;MA0GY,cAAc,CAAA;AAmEH,IAAA,UAAA;AAlEJ,IAAA,QAAQ,GAAa,MAAM,CAAC,QAAQ,CAAC;AACpC,IAAA,iBAAiB,GAAsB,MAAM,CAAC,iBAAiB,CAAC;AAChE,IAAA,oBAAoB,GAAyB,MAAM,CAAC,oBAAoB,CAAC;AACzE,IAAA,MAAM,GAAW,MAAM,CAAC,MAAM,CAAC;AAEV,IAAA,YAAY;AACZ,IAAA,YAAY;IAC7B,SAAS,GAAG,EAAE;IACT,cAAc,GAAkB,IAAI;IACnC,eAAe,GAAG,EAAE;IAC/C,IAGI,QAAQ,CAAC,QAAiB,EAAA;AAC1B,QAAA,IAAI,CAAC,SAAS,GAAG,QAAQ;IAC7B;AAEA,IAAA,IAAI,QAAQ,GAAA;QACR,OAAO,IAAI,CAAC,SAAS;IACzB;IACS,aAAa,GAAqB,OAAO;IAIlD,OAAO,GAAG,EAAE;AACH,IAAA,eAAe;AAIxB,IAAA,KAAK;IAIL,QAAQ,GAAG,KAAK;IACP,IAAI,GAAG,EAAE;;AAGR,IAAA,OAAO,GAGZ,IAAI,YAAY,EAAE;;AAGb,IAAA,OAAO,GAA6B,IAAI,YAAY,EAAE;;AAGtD,IAAA,MAAM,GAA6B,IAAI,YAAY,EAAE;IAE/D,OAAO,GAAG,EAAE;IACZ,SAAS,GAAG,KAAK;IACjB,QAAQ,GAAG,KAAK;AAChB,IAAA,YAAY;AACZ,IAAA,OAAO;IACP,OAAO,GAAG,KAAK;IACf,OAAO,GAAG,KAAK;IACf,UAAU,GAAG,CAAC;AACG,IAAA,QAAQ,GAAkB,IAAI,OAAO,EAAQ;IAEvD,aAAa,GAA6B,MAAK;;AAEtD,IAAA,CAAC;IAEM,cAAc,GAAe,MAAK;;AAEzC,IAAA,CAAC;AAED,IAAA,WAAA,CAAoB,UAAsB,EAAA;QAAtB,IAAA,CAAA,UAAU,GAAV,UAAU;QAC1B,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC,aAAa,CAAC,YAAY,CAAC,WAAW,CAAC;AAEtE,QAAA,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,MAAK;AAC/B,YAAA,SAAS,CAAC,MAAM,EAAE,SAAS;AACtB,iBAAA,IAAI,CACD,MAAM,CAAC,CAAC,KAAK,KAA6B,KAAK,IAAI,KAAK,CAAC,EACzD,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;AAE3B,iBAAA,SAAS,CAAC,CAAC,KAAoB,KAAI;;AAEhC,gBAAA,QAAQ,KAAK,CAAC,GAAG;AACb,oBAAA,KAAK,WAAW;AAChB,oBAAA,KAAK,YAAY;AACb,wBAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,MAAK;AACjB,4BAAA,IAAI,IAAI,CAAC,OAAO,EAAE;gCACd,KAAK,CAAC,wBAAwB,EAAE;AAChC,gCAAA,IAAI,CAAC,oBAAoB,CAAC,YAAY,CAAC,IAAI,CAAC;AAC5C,gCAAA,IAAI,CAAC,oBAAoB,CAAC,SAAS,CAAC,IAAI,CAAC;4BAC7C;AACJ,wBAAA,CAAC,CAAC;wBACF;AACJ,oBAAA,KAAK,SAAS;AACd,oBAAA,KAAK,WAAW;AACZ,wBAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,MAAK;AACjB,4BAAA,IAAI,IAAI,CAAC,OAAO,EAAE;gCACd,KAAK,CAAC,wBAAwB,EAAE;AAChC,gCAAA,IAAI,CAAC,oBAAoB,CAAC,YAAY,CAAC,IAAI,CAAC;AAC5C,gCAAA,IAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC,IAAI,CAAC;4BACjD;AACJ,wBAAA,CAAC,CAAC;wBACF;AACJ,oBAAA;wBACI;;AAEZ,YAAA,CAAC,CAAC;AACV,QAAA,CAAC,CAAC;IACN;IAEA,WAAW,GAAA;AACP,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AACnB,YAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,WAAW,EAAE,IAAI,EAAE;QACzE;IACJ;IAEA,QAAQ,GAAA;QACJ,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC;QAC3C,IAAI,CAAC,SAAS,EAAE;QAChB,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC;QACjD,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,IAAI,CAAC;AAC1D,QAAA,IAAI,CAAC,OAAO,GAAG,CAAA,EAAG,IAAI,CAAC,OAAO,CAAA,CAAA,EAAI,IAAI,CAAC,UAAU,CAAA,CAAE;IACvD;IAEA,kBAAkB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AACnB,YAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,WAAW,EAAE,IAAI,EAAE;QACzE;IACJ;IAEA,WAAW,GAAA;AACP,QAAA,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,IAAI,CAAC;AACtC,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;AACpB,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE;IAC5B;IAEA,WAAW,CAAC,KAAiB,EAAE,WAA6B,EAAA;QACxD,KAAK,CAAC,cAAc,EAAE;AAEtB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf;QACJ;AACA,QAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;QAClB,WAAW,CAAC,KAAK,EAAE;IACvB;AAEA,IAAA,MAAM,CAAC,KAAY,EAAA;QACf,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACjC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,OAAO,GAAG,IAAI;AAC9C,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI;AACnB,YAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC;AAC9B,YAAA,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,IAAI,CAAC;AACtC,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;QAClE;IACJ;AAEA,IAAA,UAAU,CAAC,KAAc,EAAA;QACrB,IAAI,CAAC,OAAO,GAAG,KAAK,IAAI,IAAI,CAAC,KAAK;AAElC,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE,aAAa,EAAE;YAClC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO;QAC1D;AAEA,QAAA,IAAI,CAAC,iBAAiB,CAAC,YAAY,EAAE;IACzC;AAEA,IAAA,gBAAgB,CAAC,EAAc,EAAA;AAC3B,QAAA,IAAI,CAAC,aAAa,GAAG,EAAE;IAC3B;AAEA,IAAA,iBAAiB,CAAC,EAAc,EAAA;AAC5B,QAAA,IAAI,CAAC,cAAc,GAAG,EAAE;IAC5B;AAEA,IAAA,YAAY,CAAC,KAAiB,EAAA;AAC1B,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI;QACnB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;AACjC,YAAA,IAAI,CAAC,oBAAoB,CAAC,8BAA8B,CAAC,IAAI,CAAC;YAC9D,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,OAAO,GAAG,IAAI;AAC9C,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI;AACnB,YAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC;AAC9B,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;QAC5B;IACJ;AAEA,IAAA,WAAW,CAAC,KAAiB,EAAA;AACzB,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK;QACpB,IAAI,CAAC,cAAc,EAAE;AACrB,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;IAC3B;AAEA,IAAA,QAAQ,CAAC,KAAY,EAAA;AACjB,QAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;IACtB;IAEQ,SAAS,GAAA;AACb,QAAA,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,eAAe,EAAE;YACzE,IAAI,CAAC,cAAc,EAAE;QACzB;QACA,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,eAAe,EAAE;AACpC,YAAA,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,eAAe;QACpC;IACJ;IAEQ,cAAc,GAAA;QAClB,MAAM,IAAI,KAAK,CAAC;;;AAGf,QAAA,CAAA,CAAC;IACN;uGA7MS,cAAc,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAd,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,CAAA,YAAA,EAAA,WAAA,CAAA,EAAA,cAAA,EAAA,CAAA,iBAAA,EAAA,gBAAA,CAAA,EAAA,eAAA,EAAA,CAAA,kBAAA,EAAA,iBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,UAAA,EAAA,UAAA,EAYR,gBAAgB,CAAA,EAAA,aAAA,EAAA,eAAA,EAAA,OAAA,EAAA,SAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,CAAA,UAAA,EAAA,UAAA,EAoBhB,gBAAgB,qGApCpB,CAAC,oBAAoB,CAAC,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,cAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,OAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,OAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,CAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECvIrC,uhCAgCA,EAAA,MAAA,EAAA,CAAA,8lGAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FD2Ga,cAAc,EAAA,UAAA,EAAA,CAAA;kBAT1B,SAAS;AACW,YAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,UAAU,EAAA,UAAA,EAER,IAAI,EAAA,SAAA,EACL,CAAC,oBAAoB,CAAC,EAAA,aAAA,EAElB,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,uhCAAA,EAAA,MAAA,EAAA,CAAA,8lGAAA,CAAA,EAAA;;sBAQpC,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,OAAO,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;;sBACnC,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,OAAO,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;;sBACnC,KAAK;uBAAC,YAAY;;sBAClB,KAAK;uBAAC,iBAAiB;;sBACvB,KAAK;uBAAC,kBAAkB;;sBACxB,KAAK;AAAC,gBAAA,IAAA,EAAA,CAAA;AACH,wBAAA,SAAS,EAAE,gBAAgB;AAC9B,qBAAA;;sBAQA;;sBACA,KAAK;AAAC,gBAAA,IAAA,EAAA,CAAA;AACH,wBAAA,QAAQ,EAAE,IAAI;AACjB,qBAAA;;sBAEA;;sBACA,KAAK;AAAC,gBAAA,IAAA,EAAA,CAAA;AACH,wBAAA,QAAQ,EAAE,IAAI;AACjB,qBAAA;;sBAEA,KAAK;AAAC,gBAAA,IAAA,EAAA,CAAA;AACH,wBAAA,SAAS,EAAE,gBAAgB;AAC9B,qBAAA;;sBAEA;;sBAGA;;sBAMA;;sBAGA;;;AE1LL;;AAEG;;;;"}
|
|
@@ -49,13 +49,13 @@ class SegmentedControlComponent {
|
|
|
49
49
|
this.value.set(option.value);
|
|
50
50
|
}
|
|
51
51
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
52
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SegmentedControlComponent, isStandalone: true, selector: "ap-segmented-control", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.ap-segmented-control--full-width": "fullWidth()" } }, ngImport: i0, template: "<div\n class=\"ap-segmented-control\"\n role=\"group\"\n [attr.aria-label]=\"ariaLabel() || null\">\n @for (option of options(); track option.value) {\n <button\n type=\"button\"\n class=\"ap-segmented-control__segment\"\n [class.ap-segmented-control__segment--selected]=\"value() === option.value\"\n [attr.aria-pressed]=\"value() === option.value\"\n [disabled]=\"disabled() || (option.disabled ?? false)\"\n (click)=\"select(option)\">\n @if (option.symbolId) {\n <ap-symbol\n class=\"ap-segmented-control__icon\"\n [symbolId]=\"option.symbolId\"\n [size]=\"16\"
|
|
52
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SegmentedControlComponent, isStandalone: true, selector: "ap-segmented-control", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.ap-segmented-control--full-width": "fullWidth()" } }, ngImport: i0, template: "<div\n class=\"ap-segmented-control\"\n role=\"group\"\n [attr.aria-label]=\"ariaLabel() || null\">\n @for (option of options(); track option.value) {\n <button\n type=\"button\"\n class=\"ap-segmented-control__segment\"\n [class.ap-segmented-control__segment--selected]=\"value() === option.value\"\n [attr.aria-pressed]=\"value() === option.value\"\n [disabled]=\"disabled() || (option.disabled ?? false)\"\n (click)=\"select(option)\">\n @if (option.symbolId) {\n <!-- No `color`: the symbol falls back to `fill: currentColor`, so the icon\n takes the per-state colour set on `.ap-segmented-control__icon`. -->\n <ap-symbol\n class=\"ap-segmented-control__icon\"\n [symbolId]=\"option.symbolId\"\n [size]=\"16\" />\n }\n <span class=\"ap-segmented-control__label\">{{ option.label }}</span>\n </button>\n }\n</div>\n", styles: ["ap-segmented-control{display:inline-block}ap-segmented-control.ap-segmented-control--full-width{display:block}ap-segmented-control.ap-segmented-control--full-width .ap-segmented-control{display:flex;width:100%}ap-segmented-control.ap-segmented-control--full-width .ap-segmented-control__segment{flex:1 1 0}.ap-segmented-control{display:inline-flex;align-items:center}.ap-segmented-control .ap-segmented-control__segment{display:inline-flex;align-items:center;justify-content:center;gap:var(--sys-spacing-container-sm);box-sizing:border-box;min-height:var(--sys-height-control);margin:0;padding:var(--sys-spacing-container-sm) var(--sys-spacing-container-lg);border:1px solid var(--sys-color-border-interactive-default);background-color:var(--sys-color-surface-default);color:var(--sys-color-text-default);font-family:var(--sys-text-style-h4-font-family);font-size:var(--sys-text-style-h4-size);font-weight:var(--sys-text-style-h4-weight);line-height:var(--sys-text-style-h4-line-height);white-space:nowrap;cursor:pointer;transition:color .15s ease,border-color .15s ease,background-color .15s ease}.ap-segmented-control .ap-segmented-control__segment .ap-segmented-control__icon{color:var(--sys-color-icon-default)}.ap-segmented-control .ap-segmented-control__segment:not(:first-child){margin-left:-1px}.ap-segmented-control .ap-segmented-control__segment:first-child{border-top-left-radius:var(--sys-radius-inner);border-bottom-left-radius:var(--sys-radius-inner)}.ap-segmented-control .ap-segmented-control__segment:last-child{border-top-right-radius:var(--sys-radius-inner);border-bottom-right-radius:var(--sys-radius-inner)}.ap-segmented-control .ap-segmented-control__segment:hover:not(:disabled){z-index:1;border-color:var(--sys-color-border-interactive-hovered)}.ap-segmented-control .ap-segmented-control__segment:active:not(:disabled){z-index:1;border-color:var(--sys-color-border-interactive-clicked)}.ap-segmented-control .ap-segmented-control__segment:focus-visible{z-index:2;outline:none;border-color:var(--ref-color-electric-blue-100);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}.ap-segmented-control .ap-segmented-control__segment.ap-segmented-control__segment--selected{z-index:1;border-color:var(--sys-color-border-interactive-active);color:var(--sys-color-text-interactive-active)}.ap-segmented-control .ap-segmented-control__segment.ap-segmented-control__segment--selected .ap-segmented-control__icon{color:var(--sys-color-icon-interactive-active)}.ap-segmented-control .ap-segmented-control__segment:disabled{border-color:var(--sys-color-border-interactive-disabled);color:var(--sys-color-text-interactive-disabled);cursor:not-allowed}.ap-segmented-control .ap-segmented-control__segment:disabled .ap-segmented-control__icon{color:var(--sys-color-icon-interactive-disabled)}.ap-segmented-control .ap-segmented-control__label{font:inherit;min-width:0;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
53
53
|
}
|
|
54
54
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SegmentedControlComponent, decorators: [{
|
|
55
55
|
type: Component,
|
|
56
56
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-segmented-control', imports: [SymbolComponent], host: {
|
|
57
57
|
'[class.ap-segmented-control--full-width]': 'fullWidth()',
|
|
58
|
-
}, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"ap-segmented-control\"\n role=\"group\"\n [attr.aria-label]=\"ariaLabel() || null\">\n @for (option of options(); track option.value) {\n <button\n type=\"button\"\n class=\"ap-segmented-control__segment\"\n [class.ap-segmented-control__segment--selected]=\"value() === option.value\"\n [attr.aria-pressed]=\"value() === option.value\"\n [disabled]=\"disabled() || (option.disabled ?? false)\"\n (click)=\"select(option)\">\n @if (option.symbolId) {\n <ap-symbol\n class=\"ap-segmented-control__icon\"\n [symbolId]=\"option.symbolId\"\n [size]=\"16\"
|
|
58
|
+
}, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"ap-segmented-control\"\n role=\"group\"\n [attr.aria-label]=\"ariaLabel() || null\">\n @for (option of options(); track option.value) {\n <button\n type=\"button\"\n class=\"ap-segmented-control__segment\"\n [class.ap-segmented-control__segment--selected]=\"value() === option.value\"\n [attr.aria-pressed]=\"value() === option.value\"\n [disabled]=\"disabled() || (option.disabled ?? false)\"\n (click)=\"select(option)\">\n @if (option.symbolId) {\n <!-- No `color`: the symbol falls back to `fill: currentColor`, so the icon\n takes the per-state colour set on `.ap-segmented-control__icon`. -->\n <ap-symbol\n class=\"ap-segmented-control__icon\"\n [symbolId]=\"option.symbolId\"\n [size]=\"16\" />\n }\n <span class=\"ap-segmented-control__label\">{{ option.label }}</span>\n </button>\n }\n</div>\n", styles: ["ap-segmented-control{display:inline-block}ap-segmented-control.ap-segmented-control--full-width{display:block}ap-segmented-control.ap-segmented-control--full-width .ap-segmented-control{display:flex;width:100%}ap-segmented-control.ap-segmented-control--full-width .ap-segmented-control__segment{flex:1 1 0}.ap-segmented-control{display:inline-flex;align-items:center}.ap-segmented-control .ap-segmented-control__segment{display:inline-flex;align-items:center;justify-content:center;gap:var(--sys-spacing-container-sm);box-sizing:border-box;min-height:var(--sys-height-control);margin:0;padding:var(--sys-spacing-container-sm) var(--sys-spacing-container-lg);border:1px solid var(--sys-color-border-interactive-default);background-color:var(--sys-color-surface-default);color:var(--sys-color-text-default);font-family:var(--sys-text-style-h4-font-family);font-size:var(--sys-text-style-h4-size);font-weight:var(--sys-text-style-h4-weight);line-height:var(--sys-text-style-h4-line-height);white-space:nowrap;cursor:pointer;transition:color .15s ease,border-color .15s ease,background-color .15s ease}.ap-segmented-control .ap-segmented-control__segment .ap-segmented-control__icon{color:var(--sys-color-icon-default)}.ap-segmented-control .ap-segmented-control__segment:not(:first-child){margin-left:-1px}.ap-segmented-control .ap-segmented-control__segment:first-child{border-top-left-radius:var(--sys-radius-inner);border-bottom-left-radius:var(--sys-radius-inner)}.ap-segmented-control .ap-segmented-control__segment:last-child{border-top-right-radius:var(--sys-radius-inner);border-bottom-right-radius:var(--sys-radius-inner)}.ap-segmented-control .ap-segmented-control__segment:hover:not(:disabled){z-index:1;border-color:var(--sys-color-border-interactive-hovered)}.ap-segmented-control .ap-segmented-control__segment:active:not(:disabled){z-index:1;border-color:var(--sys-color-border-interactive-clicked)}.ap-segmented-control .ap-segmented-control__segment:focus-visible{z-index:2;outline:none;border-color:var(--ref-color-electric-blue-100);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}.ap-segmented-control .ap-segmented-control__segment.ap-segmented-control__segment--selected{z-index:1;border-color:var(--sys-color-border-interactive-active);color:var(--sys-color-text-interactive-active)}.ap-segmented-control .ap-segmented-control__segment.ap-segmented-control__segment--selected .ap-segmented-control__icon{color:var(--sys-color-icon-interactive-active)}.ap-segmented-control .ap-segmented-control__segment:disabled{border-color:var(--sys-color-border-interactive-disabled);color:var(--sys-color-text-interactive-disabled);cursor:not-allowed}.ap-segmented-control .ap-segmented-control__segment:disabled .ap-segmented-control__icon{color:var(--sys-color-icon-interactive-disabled)}.ap-segmented-control .ap-segmented-control__label{font:inherit;min-width:0;overflow:hidden;text-overflow:ellipsis}\n"] }]
|
|
59
59
|
}], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
60
60
|
|
|
61
61
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-segmented-control.mjs","sources":["../../../libs/ui-components/segmented-control/src/segmented-control.component.ts","../../../libs/ui-components/segmented-control/src/segmented-control.component.html","../../../libs/ui-components/segmented-control/src/agorapulse-ui-components-segmented-control.ts"],"sourcesContent":["import { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';\nimport { agorapulseSymbol, SymbolComponent, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport { ChangeDetectionStrategy, Component, effect, inject, input, model, untracked, ViewEncapsulation } from '@angular/core';\n\nexport interface SegmentedControlOption {\n /** The value bound to the control when this option is selected. */\n value: string;\n /** The text shown on the segment. */\n label: string;\n /** Optional leading icon symbol id. */\n symbolId?: agorapulseSymbol;\n /** Disables this segment only. */\n disabled?: boolean;\n}\n\n/**\n * A single-select control for switching between a small set (2–4) of mutually\n * exclusive options laid out side by side.\n *\n * @example\n * ```html\n * <ap-segmented-control\n * [options]=\"[{ value: 'list', label: 'List' }, { value: 'board', label: 'Board' }]\"\n * [(value)]=\"view\"\n * ariaLabel=\"Choose a view\" />\n * ```\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-segmented-control',\n templateUrl: './segmented-control.component.html',\n styleUrls: ['./segmented-control.component.scss'],\n imports: [SymbolComponent],\n host: {\n '[class.ap-segmented-control--full-width]': 'fullWidth()',\n },\n // Emit plain, global `.ap-segmented-control*` classes (no Angular scoping) so the\n // styling stays framework-agnostic and readable/reusable outside Angular.\n encapsulation: ViewEncapsulation.None,\n})\nexport class SegmentedControlComponent {\n private readonly symbolRegistry = inject(SymbolRegistry);\n\n readonly options = input.required<SegmentedControlOption[]>();\n /** The currently selected value. Supports two-way binding via `[(value)]`. Defaults to the first option's value when unset. */\n readonly value = model<string>('');\n /** Disables the whole control. */\n readonly disabled = input(false);\n /** When true, the control fills its container width and segments share it equally instead of fitting their text. */\n readonly fullWidth = input(false);\n /** Accessible name for the group of segments. */\n readonly ariaLabel = input('');\n\n // Keep `value` defined: fall back to the first option whenever it is unset.\n private readonly defaultValueEffect = effect(() => {\n const [firstOption] = this.options();\n if (!this.value() && firstOption) {\n untracked(() => this.value.set(firstOption.value));\n }\n });\n\n constructor() {\n this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));\n }\n\n protected select(option: SegmentedControlOption): void {\n if (this.disabled() || option.disabled) {\n return;\n }\n this.value.set(option.value);\n }\n}\n","<div\n class=\"ap-segmented-control\"\n role=\"group\"\n [attr.aria-label]=\"ariaLabel() || null\">\n @for (option of options(); track option.value) {\n <button\n type=\"button\"\n class=\"ap-segmented-control__segment\"\n [class.ap-segmented-control__segment--selected]=\"value() === option.value\"\n [attr.aria-pressed]=\"value() === option.value\"\n [disabled]=\"disabled() || (option.disabled ?? false)\"\n (click)=\"select(option)\">\n @if (option.symbolId) {\n <ap-symbol\n class=\"ap-segmented-control__icon\"\n [symbolId]=\"option.symbolId\"\n [size]=\"16\"
|
|
1
|
+
{"version":3,"file":"agorapulse-ui-components-segmented-control.mjs","sources":["../../../libs/ui-components/segmented-control/src/segmented-control.component.ts","../../../libs/ui-components/segmented-control/src/segmented-control.component.html","../../../libs/ui-components/segmented-control/src/agorapulse-ui-components-segmented-control.ts"],"sourcesContent":["import { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';\nimport { agorapulseSymbol, SymbolComponent, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport { ChangeDetectionStrategy, Component, effect, inject, input, model, untracked, ViewEncapsulation } from '@angular/core';\n\nexport interface SegmentedControlOption {\n /** The value bound to the control when this option is selected. */\n value: string;\n /** The text shown on the segment. */\n label: string;\n /** Optional leading icon symbol id. */\n symbolId?: agorapulseSymbol;\n /** Disables this segment only. */\n disabled?: boolean;\n}\n\n/**\n * A single-select control for switching between a small set (2–4) of mutually\n * exclusive options laid out side by side.\n *\n * @example\n * ```html\n * <ap-segmented-control\n * [options]=\"[{ value: 'list', label: 'List' }, { value: 'board', label: 'Board' }]\"\n * [(value)]=\"view\"\n * ariaLabel=\"Choose a view\" />\n * ```\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-segmented-control',\n templateUrl: './segmented-control.component.html',\n styleUrls: ['./segmented-control.component.scss'],\n imports: [SymbolComponent],\n host: {\n '[class.ap-segmented-control--full-width]': 'fullWidth()',\n },\n // Emit plain, global `.ap-segmented-control*` classes (no Angular scoping) so the\n // styling stays framework-agnostic and readable/reusable outside Angular.\n encapsulation: ViewEncapsulation.None,\n})\nexport class SegmentedControlComponent {\n private readonly symbolRegistry = inject(SymbolRegistry);\n\n readonly options = input.required<SegmentedControlOption[]>();\n /** The currently selected value. Supports two-way binding via `[(value)]`. Defaults to the first option's value when unset. */\n readonly value = model<string>('');\n /** Disables the whole control. */\n readonly disabled = input(false);\n /** When true, the control fills its container width and segments share it equally instead of fitting their text. */\n readonly fullWidth = input(false);\n /** Accessible name for the group of segments. */\n readonly ariaLabel = input('');\n\n // Keep `value` defined: fall back to the first option whenever it is unset.\n private readonly defaultValueEffect = effect(() => {\n const [firstOption] = this.options();\n if (!this.value() && firstOption) {\n untracked(() => this.value.set(firstOption.value));\n }\n });\n\n constructor() {\n this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));\n }\n\n protected select(option: SegmentedControlOption): void {\n if (this.disabled() || option.disabled) {\n return;\n }\n this.value.set(option.value);\n }\n}\n","<div\n class=\"ap-segmented-control\"\n role=\"group\"\n [attr.aria-label]=\"ariaLabel() || null\">\n @for (option of options(); track option.value) {\n <button\n type=\"button\"\n class=\"ap-segmented-control__segment\"\n [class.ap-segmented-control__segment--selected]=\"value() === option.value\"\n [attr.aria-pressed]=\"value() === option.value\"\n [disabled]=\"disabled() || (option.disabled ?? false)\"\n (click)=\"select(option)\">\n @if (option.symbolId) {\n <!-- No `color`: the symbol falls back to `fill: currentColor`, so the icon\n takes the per-state colour set on `.ap-segmented-control__icon`. -->\n <ap-symbol\n class=\"ap-segmented-control__icon\"\n [symbolId]=\"option.symbolId\"\n [size]=\"16\" />\n }\n <span class=\"ap-segmented-control__label\">{{ option.label }}</span>\n </button>\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|