@agorapulse/ui-components 20.4.32 → 21.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/agorapulse-ui-components-21.0.0.tgz +0 -0
- package/fesm2022/agorapulse-ui-components-action-dropdown.mjs +17 -18
- package/fesm2022/agorapulse-ui-components-action-dropdown.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-add-comment.mjs +3 -3
- package/fesm2022/agorapulse-ui-components-autocomplete.mjs +7 -7
- package/fesm2022/agorapulse-ui-components-autocomplete.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-avatar-group.mjs +11 -13
- package/fesm2022/agorapulse-ui-components-avatar-group.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-avatar.mjs +21 -23
- package/fesm2022/agorapulse-ui-components-avatar.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-badge.mjs +3 -3
- package/fesm2022/agorapulse-ui-components-button.mjs +15 -15
- package/fesm2022/agorapulse-ui-components-button.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-checkbox.mjs +5 -5
- package/fesm2022/agorapulse-ui-components-checkbox.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-close-button.mjs +7 -7
- package/fesm2022/agorapulse-ui-components-close-button.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-confirm-modal.mjs +3 -3
- package/fesm2022/agorapulse-ui-components-counter.mjs +9 -9
- package/fesm2022/agorapulse-ui-components-counter.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-datepicker.mjs +50 -50
- package/fesm2022/agorapulse-ui-components-datepicker.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-directives.mjs +26 -26
- package/fesm2022/agorapulse-ui-components-directives.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-dot-stepper.mjs +3 -3
- package/fesm2022/agorapulse-ui-components-dropdown-base.mjs +5 -5
- package/fesm2022/agorapulse-ui-components-dropdown-base.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-filter-chips-list.mjs +22 -22
- package/fesm2022/agorapulse-ui-components-filter-chips-list.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-filter-dropdown.mjs +78 -78
- package/fesm2022/agorapulse-ui-components-filter-dropdown.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-form-field.mjs +3 -3
- package/fesm2022/agorapulse-ui-components-form-message.mjs +5 -5
- package/fesm2022/agorapulse-ui-components-form-message.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-icon-button.mjs +5 -5
- package/fesm2022/agorapulse-ui-components-icon-button.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-infobox.mjs +4 -4
- package/fesm2022/agorapulse-ui-components-infobox.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-input-group.mjs +6 -6
- package/fesm2022/agorapulse-ui-components-input-search.mjs +9 -9
- package/fesm2022/agorapulse-ui-components-input-search.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-input.mjs +3 -3
- package/fesm2022/agorapulse-ui-components-labels-selector.mjs +3 -3
- package/fesm2022/agorapulse-ui-components-labels.mjs +6 -6
- package/fesm2022/agorapulse-ui-components-legacy-input.mjs +4 -4
- package/fesm2022/agorapulse-ui-components-legacy-input.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-legacy-select.mjs +16 -16
- package/fesm2022/agorapulse-ui-components-legacy-select.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-legacy-textarea.mjs +4 -4
- package/fesm2022/agorapulse-ui-components-legacy-textarea.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-media-display-overlay.mjs +3 -3
- package/fesm2022/agorapulse-ui-components-modal.mjs +3 -3
- package/fesm2022/agorapulse-ui-components-nav-selector.mjs +148 -148
- package/fesm2022/agorapulse-ui-components-nav-selector.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-neo-datepicker.mjs +6 -6
- package/fesm2022/agorapulse-ui-components-notification.mjs +3 -3
- package/fesm2022/agorapulse-ui-components-paginator.mjs +8 -8
- package/fesm2022/agorapulse-ui-components-paginator.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-password-input.mjs +3 -3
- package/fesm2022/agorapulse-ui-components-phone-number-input.mjs +5 -6
- package/fesm2022/agorapulse-ui-components-phone-number-input.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-popmenu.mjs +10 -10
- package/fesm2022/agorapulse-ui-components-radio-button-card.mjs +25 -25
- package/fesm2022/agorapulse-ui-components-radio-button-card.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-radio.mjs +6 -6
- package/fesm2022/agorapulse-ui-components-range-slider.mjs +4 -4
- package/fesm2022/agorapulse-ui-components-range-slider.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-segmented-control.mjs +17 -10
- package/fesm2022/agorapulse-ui-components-segmented-control.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-select.mjs +74 -74
- package/fesm2022/agorapulse-ui-components-select.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-selection-dropdown.mjs +33 -33
- package/fesm2022/agorapulse-ui-components-selection-dropdown.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-slide-toggle.mjs +3 -3
- package/fesm2022/agorapulse-ui-components-snackbars-thread.mjs +6 -6
- package/fesm2022/agorapulse-ui-components-social-button.mjs +6 -6
- package/fesm2022/agorapulse-ui-components-social-button.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-split-button.mjs +14 -14
- 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.mjs +3 -3
- package/fesm2022/agorapulse-ui-components-stepper.mjs +3 -3
- package/fesm2022/agorapulse-ui-components-tabs.mjs +25 -24
- package/fesm2022/agorapulse-ui-components-tabs.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-tag.mjs +9 -9
- package/fesm2022/agorapulse-ui-components-tag.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-text-measurement.mjs +3 -3
- package/fesm2022/agorapulse-ui-components-textarea.mjs +3 -3
- package/fesm2022/agorapulse-ui-components-toggle.mjs +5 -5
- package/fesm2022/agorapulse-ui-components-toggle.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-tooltip.mjs +34 -34
- package/fesm2022/agorapulse-ui-components-tooltip.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components.mjs +4 -4
- package/package.json +71 -70
- package/{button/index.d.ts → types/agorapulse-ui-components-button.d.ts} +1 -1
- package/{icon-button/index.d.ts → types/agorapulse-ui-components-icon-button.d.ts} +1 -1
- package/{paginator/index.d.ts → types/agorapulse-ui-components-paginator.d.ts} +1 -1
- package/{segmented-control/index.d.ts → types/agorapulse-ui-components-segmented-control.d.ts} +3 -2
- package/{social-button/index.d.ts → types/agorapulse-ui-components-social-button.d.ts} +1 -1
- package/{split-button/index.d.ts → types/agorapulse-ui-components-split-button.d.ts} +1 -1
- package/agorapulse-ui-components-20.4.32.tgz +0 -0
- /package/{action-dropdown/index.d.ts → types/agorapulse-ui-components-action-dropdown.d.ts} +0 -0
- /package/{add-comment/index.d.ts → types/agorapulse-ui-components-add-comment.d.ts} +0 -0
- /package/{autocomplete/index.d.ts → types/agorapulse-ui-components-autocomplete.d.ts} +0 -0
- /package/{avatar-group/index.d.ts → types/agorapulse-ui-components-avatar-group.d.ts} +0 -0
- /package/{avatar/index.d.ts → types/agorapulse-ui-components-avatar.d.ts} +0 -0
- /package/{badge/index.d.ts → types/agorapulse-ui-components-badge.d.ts} +0 -0
- /package/{checkbox/index.d.ts → types/agorapulse-ui-components-checkbox.d.ts} +0 -0
- /package/{close-button/index.d.ts → types/agorapulse-ui-components-close-button.d.ts} +0 -0
- /package/{confirm-modal/index.d.ts → types/agorapulse-ui-components-confirm-modal.d.ts} +0 -0
- /package/{counter/index.d.ts → types/agorapulse-ui-components-counter.d.ts} +0 -0
- /package/{datepicker/index.d.ts → types/agorapulse-ui-components-datepicker.d.ts} +0 -0
- /package/{directives/index.d.ts → types/agorapulse-ui-components-directives.d.ts} +0 -0
- /package/{dot-stepper/index.d.ts → types/agorapulse-ui-components-dot-stepper.d.ts} +0 -0
- /package/{dropdown-base/index.d.ts → types/agorapulse-ui-components-dropdown-base.d.ts} +0 -0
- /package/{filter-chips-list/index.d.ts → types/agorapulse-ui-components-filter-chips-list.d.ts} +0 -0
- /package/{filter-dropdown/index.d.ts → types/agorapulse-ui-components-filter-dropdown.d.ts} +0 -0
- /package/{form-field/index.d.ts → types/agorapulse-ui-components-form-field.d.ts} +0 -0
- /package/{form-message/index.d.ts → types/agorapulse-ui-components-form-message.d.ts} +0 -0
- /package/{infobox/index.d.ts → types/agorapulse-ui-components-infobox.d.ts} +0 -0
- /package/{input-group/index.d.ts → types/agorapulse-ui-components-input-group.d.ts} +0 -0
- /package/{input-search/index.d.ts → types/agorapulse-ui-components-input-search.d.ts} +0 -0
- /package/{input/index.d.ts → types/agorapulse-ui-components-input.d.ts} +0 -0
- /package/{labels-selector/index.d.ts → types/agorapulse-ui-components-labels-selector.d.ts} +0 -0
- /package/{labels/index.d.ts → types/agorapulse-ui-components-labels.d.ts} +0 -0
- /package/{legacy/input/index.d.ts → types/agorapulse-ui-components-legacy-input.d.ts} +0 -0
- /package/{legacy/select/index.d.ts → types/agorapulse-ui-components-legacy-select.d.ts} +0 -0
- /package/{legacy/textarea/index.d.ts → types/agorapulse-ui-components-legacy-textarea.d.ts} +0 -0
- /package/{media-display-overlay/index.d.ts → types/agorapulse-ui-components-media-display-overlay.d.ts} +0 -0
- /package/{modal/index.d.ts → types/agorapulse-ui-components-modal.d.ts} +0 -0
- /package/{nav-selector/testing/index.d.ts → types/agorapulse-ui-components-nav-selector-testing.d.ts} +0 -0
- /package/{nav-selector/index.d.ts → types/agorapulse-ui-components-nav-selector.d.ts} +0 -0
- /package/{neo-datepicker/index.d.ts → types/agorapulse-ui-components-neo-datepicker.d.ts} +0 -0
- /package/{notification/index.d.ts → types/agorapulse-ui-components-notification.d.ts} +0 -0
- /package/{password-input/index.d.ts → types/agorapulse-ui-components-password-input.d.ts} +0 -0
- /package/{phone-number-input/index.d.ts → types/agorapulse-ui-components-phone-number-input.d.ts} +0 -0
- /package/{popmenu/index.d.ts → types/agorapulse-ui-components-popmenu.d.ts} +0 -0
- /package/{providers/index.d.ts → types/agorapulse-ui-components-providers.d.ts} +0 -0
- /package/{radio-button-card/index.d.ts → types/agorapulse-ui-components-radio-button-card.d.ts} +0 -0
- /package/{radio/index.d.ts → types/agorapulse-ui-components-radio.d.ts} +0 -0
- /package/{range-slider/index.d.ts → types/agorapulse-ui-components-range-slider.d.ts} +0 -0
- /package/{select/index.d.ts → types/agorapulse-ui-components-select.d.ts} +0 -0
- /package/{selection-dropdown/index.d.ts → types/agorapulse-ui-components-selection-dropdown.d.ts} +0 -0
- /package/{slide-toggle/index.d.ts → types/agorapulse-ui-components-slide-toggle.d.ts} +0 -0
- /package/{snackbars-thread/index.d.ts → types/agorapulse-ui-components-snackbars-thread.d.ts} +0 -0
- /package/{status-card/index.d.ts → types/agorapulse-ui-components-status-card.d.ts} +0 -0
- /package/{status/index.d.ts → types/agorapulse-ui-components-status.d.ts} +0 -0
- /package/{stepper/index.d.ts → types/agorapulse-ui-components-stepper.d.ts} +0 -0
- /package/{tabs/index.d.ts → types/agorapulse-ui-components-tabs.d.ts} +0 -0
- /package/{tag/index.d.ts → types/agorapulse-ui-components-tag.d.ts} +0 -0
- /package/{text-measurement/index.d.ts → types/agorapulse-ui-components-text-measurement.d.ts} +0 -0
- /package/{textarea/index.d.ts → types/agorapulse-ui-components-textarea.d.ts} +0 -0
- /package/{toggle/index.d.ts → types/agorapulse-ui-components-toggle.d.ts} +0 -0
- /package/{tooltip/index.d.ts → types/agorapulse-ui-components-tooltip.d.ts} +0 -0
- /package/{index.d.ts → types/agorapulse-ui-components.d.ts} +0 -0
|
@@ -20,10 +20,10 @@ class StepperComponent {
|
|
|
20
20
|
clickCurrentStep(step) {
|
|
21
21
|
this.stepClicked.emit(step);
|
|
22
22
|
}
|
|
23
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
24
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
23
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
24
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StepperComponent, isStandalone: true, selector: "ap-stepper", inputs: { currentStepId: "currentStepId", steps: "steps" }, outputs: { stepClicked: "stepClicked" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"main\">\n @for (step of steps; track step; let index = $index; let last = $last) {\n <span class=\"item\">\n <span\n [ngClass]=\"{\n number: true,\n active: index === currentIndex,\n 'no-more-active': currentIndex > index || (index !== currentIndex && step.visited),\n 'not-yet-active': currentIndex < index && !step.visited\n }\">\n {{ index + 1 }}\n </span>\n <span\n class=\"text\"\n [ngClass]=\"{ clickable: step.clickable }\"\n (click)=\"step.clickable ? clickCurrentStep(step) : false\">\n {{ step.name }}\n </span>\n @if (!last) {\n <ap-symbol\n symbolId=\"chevron-right\"\n size=\"sm\" />\n }\n </span>\n }\n</div>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}.active{font-weight:700}.main{display:flex}.main .item{height:fit-content}.main .item .number{border-radius:24px;width:24px;height:24px;display:inline-block;text-align:center;vertical-align:middle;line-height:24px;box-sizing:border-box}.main .item .number.active{box-shadow:0 0 0 1.5px #e8f4ff;border:1.5px solid #e8f4ff;line-height:21px;background-color:#178dfe;color:#fff}.main .item .number.no-more-active{background-color:#e8f4ff;color:#178dfe}.main .item .number.not-yet-active{border:1px solid #e8f4ff;line-height:22px;background-color:transparent;color:#178dfe}.main .item .text{padding-left:8px;height:fit-content;margin:auto;line-height:24px;vertical-align:middle}.main .item .text.clickable:hover{color:#178dfe;cursor:pointer}.main .item ap-symbol{color:#858fa1;margin:auto 10px;vertical-align:middle;display:inline-block}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
25
25
|
}
|
|
26
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
26
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StepperComponent, decorators: [{
|
|
27
27
|
type: Component,
|
|
28
28
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-stepper', imports: [SymbolComponent, NgClass], template: "<div class=\"main\">\n @for (step of steps; track step; let index = $index; let last = $last) {\n <span class=\"item\">\n <span\n [ngClass]=\"{\n number: true,\n active: index === currentIndex,\n 'no-more-active': currentIndex > index || (index !== currentIndex && step.visited),\n 'not-yet-active': currentIndex < index && !step.visited\n }\">\n {{ index + 1 }}\n </span>\n <span\n class=\"text\"\n [ngClass]=\"{ clickable: step.clickable }\"\n (click)=\"step.clickable ? clickCurrentStep(step) : false\">\n {{ step.name }}\n </span>\n @if (!last) {\n <ap-symbol\n symbolId=\"chevron-right\"\n size=\"sm\" />\n }\n </span>\n }\n</div>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}.active{font-weight:700}.main{display:flex}.main .item{height:fit-content}.main .item .number{border-radius:24px;width:24px;height:24px;display:inline-block;text-align:center;vertical-align:middle;line-height:24px;box-sizing:border-box}.main .item .number.active{box-shadow:0 0 0 1.5px #e8f4ff;border:1.5px solid #e8f4ff;line-height:21px;background-color:#178dfe;color:#fff}.main .item .number.no-more-active{background-color:#e8f4ff;color:#178dfe}.main .item .number.not-yet-active{border:1px solid #e8f4ff;line-height:22px;background-color:transparent;color:#178dfe}.main .item .text{padding-left:8px;height:fit-content;margin:auto;line-height:24px;vertical-align:middle}.main .item .text.clickable:hover{color:#178dfe;cursor:pointer}.main .item ap-symbol{color:#858fa1;margin:auto 10px;vertical-align:middle;display:inline-block}\n"] }]
|
|
29
29
|
}], propDecorators: { currentStepId: [{
|
|
@@ -4,40 +4,39 @@ import * as i0 from '@angular/core';
|
|
|
4
4
|
import { inject, input, signal, ChangeDetectionStrategy, Component, contentChildren, viewChild, output, linkedSignal, effect } from '@angular/core';
|
|
5
5
|
import { CounterComponent } from '@agorapulse/ui-components/counter';
|
|
6
6
|
import { apFeatureLock } from '@agorapulse/ui-symbol/icons';
|
|
7
|
-
import { CommonModule } from '@angular/common';
|
|
8
7
|
|
|
9
8
|
class TabComponent {
|
|
10
9
|
symbolRegistry = inject(SymbolRegistry);
|
|
11
|
-
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
12
|
-
counter = input(...(ngDevMode ? [undefined, { debugName: "counter" }] : []));
|
|
13
|
-
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
14
|
-
featureLocked = input(false, ...(ngDevMode ? [{ debugName: "featureLocked" }] : []));
|
|
15
|
-
symbolId = input(...(ngDevMode ? [undefined, { debugName: "symbolId" }] : []));
|
|
16
|
-
isActive = signal(false, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
|
|
17
|
-
tabIndex = signal(0, ...(ngDevMode ? [{ debugName: "tabIndex" }] : []));
|
|
10
|
+
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
11
|
+
counter = input(...(ngDevMode ? [undefined, { debugName: "counter" }] : /* istanbul ignore next */ []));
|
|
12
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
13
|
+
featureLocked = input(false, ...(ngDevMode ? [{ debugName: "featureLocked" }] : /* istanbul ignore next */ []));
|
|
14
|
+
symbolId = input(...(ngDevMode ? [undefined, { debugName: "symbolId" }] : /* istanbul ignore next */ []));
|
|
15
|
+
isActive = signal(false, ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
|
|
16
|
+
tabIndex = signal(0, ...(ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []));
|
|
18
17
|
constructor() {
|
|
19
18
|
this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));
|
|
20
19
|
}
|
|
21
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
22
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
20
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
21
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: TabComponent, isStandalone: true, selector: "ap-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, counter: { classPropertyName: "counter", publicName: "counter", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, featureLocked: { classPropertyName: "featureLocked", publicName: "featureLocked", isSignal: true, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isActive()) {\n <div\n role=\"tabpanel\"\n class=\"ap-tab__panel\"\n [attr.id]=\"'ap-tab-panel-' + tabIndex()\"\n [attr.aria-labelledby]=\"'ap-tab-' + tabIndex()\">\n <ng-content />\n </div>\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
23
22
|
}
|
|
24
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
23
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: TabComponent, decorators: [{
|
|
25
24
|
type: Component,
|
|
26
25
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-tab', template: "@if (isActive()) {\n <div\n role=\"tabpanel\"\n class=\"ap-tab__panel\"\n [attr.id]=\"'ap-tab-panel-' + tabIndex()\"\n [attr.aria-labelledby]=\"'ap-tab-' + tabIndex()\">\n <ng-content />\n </div>\n}\n" }]
|
|
27
26
|
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], counter: [{ type: i0.Input, args: [{ isSignal: true, alias: "counter", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], featureLocked: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureLocked", required: false }] }], symbolId: [{ type: i0.Input, args: [{ isSignal: true, alias: "symbolId", required: false }] }] } });
|
|
28
27
|
|
|
29
28
|
class TabsComponent {
|
|
30
29
|
symbolRegistry = inject(SymbolRegistry);
|
|
31
|
-
tabs = contentChildren(TabComponent, ...(ngDevMode ? [{ debugName: "tabs" }] : []));
|
|
32
|
-
indicator = viewChild('indicator', ...(ngDevMode ? [{ debugName: "indicator" }] : []));
|
|
33
|
-
tabNav = viewChild('tabNav', ...(ngDevMode ? [{ debugName: "tabNav" }] : []));
|
|
34
|
-
selectedIndex = input(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
|
|
35
|
-
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
30
|
+
tabs = contentChildren(TabComponent, ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
|
|
31
|
+
indicator = viewChild('indicator', ...(ngDevMode ? [{ debugName: "indicator" }] : /* istanbul ignore next */ []));
|
|
32
|
+
tabNav = viewChild('tabNav', ...(ngDevMode ? [{ debugName: "tabNav" }] : /* istanbul ignore next */ []));
|
|
33
|
+
selectedIndex = input(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
|
|
34
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
36
35
|
tabChange = output();
|
|
37
36
|
// Unique ID per component instance to prevent DOM ID conflicts
|
|
38
37
|
static nextId = 0;
|
|
39
|
-
componentId = signal(`ap-tabs-${TabsComponent.nextId++}`, ...(ngDevMode ? [{ debugName: "componentId" }] : []));
|
|
40
|
-
activeTabIndex = linkedSignal(() => this.selectedIndex(), ...(ngDevMode ? [{ debugName: "activeTabIndex" }] : []));
|
|
38
|
+
componentId = signal(`ap-tabs-${TabsComponent.nextId++}`, ...(ngDevMode ? [{ debugName: "componentId" }] : /* istanbul ignore next */ []));
|
|
39
|
+
activeTabIndex = linkedSignal(() => this.selectedIndex(), ...(ngDevMode ? [{ debugName: "activeTabIndex" }] : /* istanbul ignore next */ []));
|
|
41
40
|
updateIndicatorPositionEffect = effect(() => {
|
|
42
41
|
const activeIndex = this.activeTabIndex();
|
|
43
42
|
const tabs = this.tabs();
|
|
@@ -45,12 +44,14 @@ class TabsComponent {
|
|
|
45
44
|
try {
|
|
46
45
|
tab.label();
|
|
47
46
|
}
|
|
48
|
-
catch {
|
|
47
|
+
catch {
|
|
48
|
+
/* required input not yet bound */
|
|
49
|
+
}
|
|
49
50
|
tab.isActive.set(index === activeIndex);
|
|
50
51
|
tab.tabIndex.set(index);
|
|
51
52
|
});
|
|
52
53
|
this.updateIndicatorPosition(activeIndex);
|
|
53
|
-
}, ...(ngDevMode ? [{ debugName: "updateIndicatorPositionEffect" }] : []));
|
|
54
|
+
}, ...(ngDevMode ? [{ debugName: "updateIndicatorPositionEffect" }] : /* istanbul ignore next */ []));
|
|
54
55
|
constructor() {
|
|
55
56
|
this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));
|
|
56
57
|
}
|
|
@@ -105,12 +106,12 @@ class TabsComponent {
|
|
|
105
106
|
indicatorEl.style.width = `${width}px`;
|
|
106
107
|
indicatorEl.style.backgroundColor = color;
|
|
107
108
|
}
|
|
108
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
109
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
109
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
110
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: TabsComponent, isStandalone: true, selector: "ap-tabs", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange" }, providers: [withSymbols(apFeatureLock)], queries: [{ propertyName: "tabs", predicate: TabComponent, isSignal: true }], viewQueries: [{ propertyName: "indicator", first: true, predicate: ["indicator"], descendants: true, isSignal: true }, { propertyName: "tabNav", first: true, predicate: ["tabNav"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ap-tabs\">\n <!-- Tab Navigation -->\n <div\n #tabNav\n class=\"ap-tabs__nav\"\n role=\"tablist\">\n @for (tab of tabs(); track $index) {\n <button\n type=\"button\"\n role=\"tab\"\n class=\"ap-tabs__tab\"\n [class.ap-tabs__tab--active]=\"activeTabIndex() === $index\"\n [class.ap-tabs__tab--disabled]=\"tab.disabled()\"\n [class.ap-tabs__tab--feature-locked]=\"tab.featureLocked()\"\n [attr.aria-selected]=\"activeTabIndex() === $index\"\n [attr.aria-controls]=\"componentId() + '-panel-' + $index\"\n [attr.id]=\"componentId() + '-tab-' + $index\"\n [attr.data-tab-index]=\"$index\"\n [disabled]=\"disabled() || tab.disabled()\"\n [tabindex]=\"disabled() || tab.disabled() ? -1 : 0\"\n (click)=\"selectTab($index)\"\n (keydown)=\"onKeyDown($event, $index)\">\n <div class=\"ap-tabs__tab-content\">\n <div class=\"ap-tabs__tab-header\">\n @if (tab.symbolId()) {\n <ap-symbol\n class=\"ap-tabs__tab-icon\"\n size=\"sm\"\n [symbolId]=\"tab.symbolId()\"\n [color]=\"activeTabIndex() === $index ? (tab.featureLocked() ? 'purple' : 'blue') : 'basic-grey'\" />\n }\n <span class=\"ap-tabs__tab-label\">{{ tab.label() }}</span>\n @if (tab.featureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n class=\"ap-tabs__tab-feature-lock\" />\n }\n @if (tab.counter() && !tab.featureLocked()) {\n <ap-counter [color]=\"activeTabIndex() === $index ? (tab.featureLocked() ? 'blue' : 'blue') : 'grey'\">\n {{ tab.counter() }}\n </ap-counter>\n }\n </div>\n </div>\n </button>\n }\n <!-- Sliding indicator -->\n <div\n #indicator\n class=\"ap-tabs__indicator\"></div>\n </div>\n\n <!-- Tab Panels -->\n <div class=\"ap-tabs__content\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block;width:100%}.ap-tabs{display:flex;flex-direction:column;width:100%}.ap-tabs .ap-tabs__nav{display:flex;align-items:center;border-bottom:1px solid var(--comp-tabs-border-color);position:relative}.ap-tabs .ap-tabs__tab{display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;font-family:var(--comp-tabs-text-font-family);text-align:center;position:relative;white-space:nowrap;padding:var(--comp-tabs-tab-padding);font-size:var(--comp-tabs-tab-font-size);line-height:var(--comp-tabs-tab-line-height);min-height:var(--comp-tabs-tab-min-height);color:var(--comp-tabs-tab-text-color-default)}.ap-tabs .ap-tabs__tab .ap-tabs__tab-content{display:flex;flex-direction:column;align-items:center;gap:var(--comp-tabs-tab-content-gap)}.ap-tabs .ap-tabs__tab .ap-tabs__tab-header{display:flex;align-items:center;gap:var(--comp-tabs-tab-header-gap)}.ap-tabs .ap-tabs__tab .ap-tabs__tab-label{font-weight:inherit;font-size:inherit;line-height:inherit}.ap-tabs .ap-tabs__tab .ap-tabs__tab-feature-lock{width:16px;height:16px;color:var(--comp-tabs-tab-feature-lock-color)}.ap-tabs .ap-tabs__tab:hover:not(:disabled):not(.ap-tabs .ap-tabs__tab.ap-tabs__tab--active){background-color:var(--comp-tabs-tab-hover-background-color)}.ap-tabs .ap-tabs__tab:focus{outline:none}.ap-tabs .ap-tabs__tab:focus-visible:not(.ap-tabs .ap-tabs__tab.ap-tabs__tab--active){outline:none;box-shadow:inset 0 0 0 2px var(--comp-tabs-tab-focus-color);border-radius:var(--comp-tabs-tab-focus-border-radius);background-color:var(--comp-tabs-tab-focus-background-color)}.ap-tabs .ap-tabs__tab:active:not(:disabled):not(.ap-tabs .ap-tabs__tab.ap-tabs__tab--active){background-color:var(--comp-tabs-tab-active-background-color)}.ap-tabs .ap-tabs__tab:disabled{cursor:not-allowed;opacity:.5}.ap-tabs .ap-tabs__tab.ap-tabs__tab--active{color:var(--comp-tabs-tab-text-color-active);text-shadow:.5px 0 0 currentColor}.ap-tabs .ap-tabs__tab.ap-tabs__tab--active:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--comp-tabs-tab-focus-color);border-radius:var(--comp-tabs-tab-focus-border-radius)}.ap-tabs .ap-tabs__tab.ap-tabs__tab--disabled{color:var(--comp-tabs-tab-text-color-disabled);cursor:not-allowed}.ap-tabs .ap-tabs__tab.ap-tabs__tab--feature-locked:hover:not(:disabled):not(.ap-tabs__tab--active){background-color:var(--comp-tabs-tab-feature-locked-hover-background-color)}.ap-tabs .ap-tabs__tab.ap-tabs__tab--feature-locked:focus-visible:not(.ap-tabs__tab--active){color:var(--comp-tabs-tab-text-color-feature-locked-focus);background-color:var(--comp-tabs-tab-feature-locked-focus-background-color)}.ap-tabs .ap-tabs__tab.ap-tabs__tab--feature-locked:active:not(:disabled):not(.ap-tabs__tab--active){background-color:var(--comp-tabs-tab-feature-locked-active-background-color)}.ap-tabs .ap-tabs__tab.ap-tabs__tab--feature-locked.ap-tabs__tab--active{color:var(--comp-tabs-tab-text-color-feature-locked-active);text-shadow:.5px 0 0 currentColor}.ap-tabs .ap-tabs__tab.ap-tabs__tab--feature-locked.ap-tabs__tab--active:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--comp-tabs-tab-focus-color);border-radius:var(--comp-tabs-tab-focus-border-radius)}.ap-tabs .ap-tabs__indicator{position:absolute;bottom:-1px;height:4px;background-color:var(--comp-tabs-tab-active-indicator-color);transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1);transform-origin:left}.ap-tabs .ap-tabs__content{flex:1;width:100%}\n"], dependencies: [{ kind: "component", type: CounterComponent, selector: "ap-counter", inputs: ["color", "size", "notif", "background", "role"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
110
111
|
}
|
|
111
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
112
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: TabsComponent, decorators: [{
|
|
112
113
|
type: Component,
|
|
113
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-tabs', imports: [
|
|
114
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-tabs', imports: [CounterComponent, SymbolComponent], providers: [withSymbols(apFeatureLock)], template: "<div class=\"ap-tabs\">\n <!-- Tab Navigation -->\n <div\n #tabNav\n class=\"ap-tabs__nav\"\n role=\"tablist\">\n @for (tab of tabs(); track $index) {\n <button\n type=\"button\"\n role=\"tab\"\n class=\"ap-tabs__tab\"\n [class.ap-tabs__tab--active]=\"activeTabIndex() === $index\"\n [class.ap-tabs__tab--disabled]=\"tab.disabled()\"\n [class.ap-tabs__tab--feature-locked]=\"tab.featureLocked()\"\n [attr.aria-selected]=\"activeTabIndex() === $index\"\n [attr.aria-controls]=\"componentId() + '-panel-' + $index\"\n [attr.id]=\"componentId() + '-tab-' + $index\"\n [attr.data-tab-index]=\"$index\"\n [disabled]=\"disabled() || tab.disabled()\"\n [tabindex]=\"disabled() || tab.disabled() ? -1 : 0\"\n (click)=\"selectTab($index)\"\n (keydown)=\"onKeyDown($event, $index)\">\n <div class=\"ap-tabs__tab-content\">\n <div class=\"ap-tabs__tab-header\">\n @if (tab.symbolId()) {\n <ap-symbol\n class=\"ap-tabs__tab-icon\"\n size=\"sm\"\n [symbolId]=\"tab.symbolId()\"\n [color]=\"activeTabIndex() === $index ? (tab.featureLocked() ? 'purple' : 'blue') : 'basic-grey'\" />\n }\n <span class=\"ap-tabs__tab-label\">{{ tab.label() }}</span>\n @if (tab.featureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n class=\"ap-tabs__tab-feature-lock\" />\n }\n @if (tab.counter() && !tab.featureLocked()) {\n <ap-counter [color]=\"activeTabIndex() === $index ? (tab.featureLocked() ? 'blue' : 'blue') : 'grey'\">\n {{ tab.counter() }}\n </ap-counter>\n }\n </div>\n </div>\n </button>\n }\n <!-- Sliding indicator -->\n <div\n #indicator\n class=\"ap-tabs__indicator\"></div>\n </div>\n\n <!-- Tab Panels -->\n <div class=\"ap-tabs__content\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block;width:100%}.ap-tabs{display:flex;flex-direction:column;width:100%}.ap-tabs .ap-tabs__nav{display:flex;align-items:center;border-bottom:1px solid var(--comp-tabs-border-color);position:relative}.ap-tabs .ap-tabs__tab{display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;font-family:var(--comp-tabs-text-font-family);text-align:center;position:relative;white-space:nowrap;padding:var(--comp-tabs-tab-padding);font-size:var(--comp-tabs-tab-font-size);line-height:var(--comp-tabs-tab-line-height);min-height:var(--comp-tabs-tab-min-height);color:var(--comp-tabs-tab-text-color-default)}.ap-tabs .ap-tabs__tab .ap-tabs__tab-content{display:flex;flex-direction:column;align-items:center;gap:var(--comp-tabs-tab-content-gap)}.ap-tabs .ap-tabs__tab .ap-tabs__tab-header{display:flex;align-items:center;gap:var(--comp-tabs-tab-header-gap)}.ap-tabs .ap-tabs__tab .ap-tabs__tab-label{font-weight:inherit;font-size:inherit;line-height:inherit}.ap-tabs .ap-tabs__tab .ap-tabs__tab-feature-lock{width:16px;height:16px;color:var(--comp-tabs-tab-feature-lock-color)}.ap-tabs .ap-tabs__tab:hover:not(:disabled):not(.ap-tabs .ap-tabs__tab.ap-tabs__tab--active){background-color:var(--comp-tabs-tab-hover-background-color)}.ap-tabs .ap-tabs__tab:focus{outline:none}.ap-tabs .ap-tabs__tab:focus-visible:not(.ap-tabs .ap-tabs__tab.ap-tabs__tab--active){outline:none;box-shadow:inset 0 0 0 2px var(--comp-tabs-tab-focus-color);border-radius:var(--comp-tabs-tab-focus-border-radius);background-color:var(--comp-tabs-tab-focus-background-color)}.ap-tabs .ap-tabs__tab:active:not(:disabled):not(.ap-tabs .ap-tabs__tab.ap-tabs__tab--active){background-color:var(--comp-tabs-tab-active-background-color)}.ap-tabs .ap-tabs__tab:disabled{cursor:not-allowed;opacity:.5}.ap-tabs .ap-tabs__tab.ap-tabs__tab--active{color:var(--comp-tabs-tab-text-color-active);text-shadow:.5px 0 0 currentColor}.ap-tabs .ap-tabs__tab.ap-tabs__tab--active:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--comp-tabs-tab-focus-color);border-radius:var(--comp-tabs-tab-focus-border-radius)}.ap-tabs .ap-tabs__tab.ap-tabs__tab--disabled{color:var(--comp-tabs-tab-text-color-disabled);cursor:not-allowed}.ap-tabs .ap-tabs__tab.ap-tabs__tab--feature-locked:hover:not(:disabled):not(.ap-tabs__tab--active){background-color:var(--comp-tabs-tab-feature-locked-hover-background-color)}.ap-tabs .ap-tabs__tab.ap-tabs__tab--feature-locked:focus-visible:not(.ap-tabs__tab--active){color:var(--comp-tabs-tab-text-color-feature-locked-focus);background-color:var(--comp-tabs-tab-feature-locked-focus-background-color)}.ap-tabs .ap-tabs__tab.ap-tabs__tab--feature-locked:active:not(:disabled):not(.ap-tabs__tab--active){background-color:var(--comp-tabs-tab-feature-locked-active-background-color)}.ap-tabs .ap-tabs__tab.ap-tabs__tab--feature-locked.ap-tabs__tab--active{color:var(--comp-tabs-tab-text-color-feature-locked-active);text-shadow:.5px 0 0 currentColor}.ap-tabs .ap-tabs__tab.ap-tabs__tab--feature-locked.ap-tabs__tab--active:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--comp-tabs-tab-focus-color);border-radius:var(--comp-tabs-tab-focus-border-radius)}.ap-tabs .ap-tabs__indicator{position:absolute;bottom:-1px;height:4px;background-color:var(--comp-tabs-tab-active-indicator-color);transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1);transform-origin:left}.ap-tabs .ap-tabs__content{flex:1;width:100%}\n"] }]
|
|
114
115
|
}], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabComponent), { isSignal: true }] }], indicator: [{ type: i0.ViewChild, args: ['indicator', { isSignal: true }] }], tabNav: [{ type: i0.ViewChild, args: ['tabNav', { isSignal: true }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }] } });
|
|
115
116
|
|
|
116
117
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-tabs.mjs","sources":["../../../libs/ui-components/tabs/src/tab/tab.component.ts","../../../libs/ui-components/tabs/src/tab/tab.component.html","../../../libs/ui-components/tabs/src/tabs.component.ts","../../../libs/ui-components/tabs/src/tabs.component.html","../../../libs/ui-components/tabs/src/agorapulse-ui-components-tabs.ts"],"sourcesContent":["import { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';\nimport { agorapulseSymbol, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport { ChangeDetectionStrategy, Component, inject, input, signal } from '@angular/core';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-tab',\n templateUrl: './tab.component.html',\n})\nexport class TabComponent {\n private readonly symbolRegistry = inject(SymbolRegistry);\n\n label = input.required<string>();\n counter = input<number>();\n disabled = input(false);\n featureLocked = input(false);\n symbolId = input<agorapulseSymbol>();\n\n isActive = signal(false);\n tabIndex = signal(0);\n\n constructor() {\n this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));\n }\n}\n","@if (isActive()) {\n <div\n role=\"tabpanel\"\n class=\"ap-tab__panel\"\n [attr.id]=\"'ap-tab-panel-' + tabIndex()\"\n [attr.aria-labelledby]=\"'ap-tab-' + tabIndex()\">\n <ng-content />\n </div>\n}\n","import { CounterComponent } from '@agorapulse/ui-components/counter';\nimport { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';\nimport { SymbolComponent, SymbolRegistry, withSymbols } from '@agorapulse/ui-symbol';\nimport { apFeatureLock } from '@agorapulse/ui-symbol/icons';\nimport { CommonModule } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n contentChildren,\n effect,\n ElementRef,\n inject,\n input,\n linkedSignal,\n output,\n signal,\n viewChild,\n} from '@angular/core';\nimport { TabComponent } from './tab/tab.component';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-tabs',\n templateUrl: './tabs.component.html',\n styleUrls: ['./tabs.component.scss'],\n imports: [CommonModule, CounterComponent, SymbolComponent],\n providers: [withSymbols(apFeatureLock)],\n})\nexport class TabsComponent {\n private readonly symbolRegistry = inject(SymbolRegistry);\n\n tabs = contentChildren(TabComponent);\n indicator = viewChild<ElementRef<HTMLElement>>('indicator');\n tabNav = viewChild<ElementRef<HTMLElement>>('tabNav');\n\n selectedIndex = input(0);\n disabled = input(false);\n\n tabChange = output<{ index: number; tab: TabComponent }>();\n\n // Unique ID per component instance to prevent DOM ID conflicts\n private static nextId = 0;\n readonly componentId = signal(`ap-tabs-${TabsComponent.nextId++}`);\n\n readonly activeTabIndex = linkedSignal(() => this.selectedIndex());\n\n private readonly updateIndicatorPositionEffect = effect(() => {\n const activeIndex = this.activeTabIndex();\n const tabs = this.tabs();\n tabs.forEach((tab, index) => {\n try { tab.label(); } catch { /* required input not yet bound */ }\n tab.isActive.set(index === activeIndex);\n tab.tabIndex.set(index);\n });\n this.updateIndicatorPosition(activeIndex);\n });\n\n constructor() {\n this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));\n }\n\n selectTab(index: number): void {\n if (this.disabled() || index < 0 || index >= this.tabs().length) {\n return;\n }\n\n const tab = this.tabs()[index];\n if (tab?.disabled()) {\n return;\n }\n\n this.activeTabIndex.set(index);\n this.tabChange.emit({ index, tab });\n }\n\n onKeyDown(event: KeyboardEvent, index: number): void {\n switch (event.key) {\n case 'Enter':\n case ' ':\n event.preventDefault();\n this.selectTab(index);\n break;\n }\n }\n\n private focusTab(index: number): void {\n const tabButton = document.querySelector(`[data-tab-index=\"${index}\"]`) as HTMLElement;\n tabButton?.focus();\n }\n\n private updateIndicatorPosition(activeIndex: number): void {\n const indicatorEl = this.indicator()?.nativeElement;\n const tabNavEl = this.tabNav()?.nativeElement;\n\n if (!indicatorEl || !tabNavEl) {\n // If elements aren't ready, try again in the next tick\n setTimeout(() => this.updateIndicatorPosition(activeIndex), 0);\n return;\n }\n\n const activeTab = tabNavEl.querySelector(`[data-tab-index=\"${activeIndex}\"]`) as HTMLElement;\n if (!activeTab) {\n // If tab button isn't ready, try again in the next tick\n setTimeout(() => this.updateIndicatorPosition(activeIndex), 0);\n return;\n }\n\n const tabRect = activeTab.getBoundingClientRect();\n const navRect = tabNavEl.getBoundingClientRect();\n\n const left = tabRect.left - navRect.left;\n const width = tabRect.width;\n\n // Check if active tab is feature locked to change indicator color\n const isFeatureLocked = this.tabs()[activeIndex]?.featureLocked();\n const color = isFeatureLocked\n ? 'var(--comp-tabs-tab-feature-locked-indicator-color)'\n : 'var(--comp-tabs-tab-active-indicator-color)';\n\n indicatorEl.style.transform = `translateX(${left}px)`;\n indicatorEl.style.width = `${width}px`;\n indicatorEl.style.backgroundColor = color;\n }\n}\n","<div class=\"ap-tabs\">\n <!-- Tab Navigation -->\n <div\n #tabNav\n class=\"ap-tabs__nav\"\n role=\"tablist\">\n @for (tab of tabs(); track $index) {\n <button\n type=\"button\"\n role=\"tab\"\n class=\"ap-tabs__tab\"\n [class.ap-tabs__tab--active]=\"activeTabIndex() === $index\"\n [class.ap-tabs__tab--disabled]=\"tab.disabled()\"\n [class.ap-tabs__tab--feature-locked]=\"tab.featureLocked()\"\n [attr.aria-selected]=\"activeTabIndex() === $index\"\n [attr.aria-controls]=\"componentId() + '-panel-' + $index\"\n [attr.id]=\"componentId() + '-tab-' + $index\"\n [attr.data-tab-index]=\"$index\"\n [disabled]=\"disabled() || tab.disabled()\"\n [tabindex]=\"disabled() || tab.disabled() ? -1 : 0\"\n (click)=\"selectTab($index)\"\n (keydown)=\"onKeyDown($event, $index)\">\n <div class=\"ap-tabs__tab-content\">\n <div class=\"ap-tabs__tab-header\">\n @if (tab.symbolId()) {\n <ap-symbol\n class=\"ap-tabs__tab-icon\"\n size=\"sm\"\n [symbolId]=\"tab.symbolId()\"\n [color]=\"activeTabIndex() === $index ? (tab.featureLocked() ? 'purple' : 'blue') : 'basic-grey'\" />\n }\n <span class=\"ap-tabs__tab-label\">{{ tab.label() }}</span>\n @if (tab.featureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n class=\"ap-tabs__tab-feature-lock\" />\n }\n @if (tab.counter() && !tab.featureLocked()) {\n <ap-counter [color]=\"activeTabIndex() === $index ? (tab.featureLocked() ? 'blue' : 'blue') : 'grey'\">\n {{ tab.counter() }}\n </ap-counter>\n }\n </div>\n </div>\n </button>\n }\n <!-- Sliding indicator -->\n <div\n #indicator\n class=\"ap-tabs__indicator\"></div>\n </div>\n\n <!-- Tab Panels -->\n <div class=\"ap-tabs__content\">\n <ng-content />\n </div>\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-tabs.mjs","sources":["../../../libs/ui-components/tabs/src/tab/tab.component.ts","../../../libs/ui-components/tabs/src/tab/tab.component.html","../../../libs/ui-components/tabs/src/tabs.component.ts","../../../libs/ui-components/tabs/src/tabs.component.html","../../../libs/ui-components/tabs/src/agorapulse-ui-components-tabs.ts"],"sourcesContent":["import { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';\nimport { agorapulseSymbol, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport { ChangeDetectionStrategy, Component, inject, input, signal } from '@angular/core';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-tab',\n templateUrl: './tab.component.html',\n})\nexport class TabComponent {\n private readonly symbolRegistry = inject(SymbolRegistry);\n\n label = input.required<string>();\n counter = input<number>();\n disabled = input(false);\n featureLocked = input(false);\n symbolId = input<agorapulseSymbol>();\n\n isActive = signal(false);\n tabIndex = signal(0);\n\n constructor() {\n this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));\n }\n}\n","@if (isActive()) {\n <div\n role=\"tabpanel\"\n class=\"ap-tab__panel\"\n [attr.id]=\"'ap-tab-panel-' + tabIndex()\"\n [attr.aria-labelledby]=\"'ap-tab-' + tabIndex()\">\n <ng-content />\n </div>\n}\n","import { CounterComponent } from '@agorapulse/ui-components/counter';\nimport { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';\nimport { SymbolComponent, SymbolRegistry, withSymbols } from '@agorapulse/ui-symbol';\nimport { apFeatureLock } from '@agorapulse/ui-symbol/icons';\n\nimport {\n ChangeDetectionStrategy,\n Component,\n contentChildren,\n effect,\n ElementRef,\n inject,\n input,\n linkedSignal,\n output,\n signal,\n viewChild,\n} from '@angular/core';\nimport { TabComponent } from './tab/tab.component';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-tabs',\n templateUrl: './tabs.component.html',\n styleUrls: ['./tabs.component.scss'],\n imports: [CounterComponent, SymbolComponent],\n providers: [withSymbols(apFeatureLock)],\n})\nexport class TabsComponent {\n private readonly symbolRegistry = inject(SymbolRegistry);\n\n tabs = contentChildren(TabComponent);\n indicator = viewChild<ElementRef<HTMLElement>>('indicator');\n tabNav = viewChild<ElementRef<HTMLElement>>('tabNav');\n\n selectedIndex = input(0);\n disabled = input(false);\n\n tabChange = output<{ index: number; tab: TabComponent }>();\n\n // Unique ID per component instance to prevent DOM ID conflicts\n private static nextId = 0;\n readonly componentId = signal(`ap-tabs-${TabsComponent.nextId++}`);\n\n readonly activeTabIndex = linkedSignal(() => this.selectedIndex());\n\n private readonly updateIndicatorPositionEffect = effect(() => {\n const activeIndex = this.activeTabIndex();\n const tabs = this.tabs();\n tabs.forEach((tab, index) => {\n try {\n tab.label();\n } catch {\n /* required input not yet bound */\n }\n tab.isActive.set(index === activeIndex);\n tab.tabIndex.set(index);\n });\n this.updateIndicatorPosition(activeIndex);\n });\n\n constructor() {\n this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));\n }\n\n selectTab(index: number): void {\n if (this.disabled() || index < 0 || index >= this.tabs().length) {\n return;\n }\n\n const tab = this.tabs()[index];\n if (tab?.disabled()) {\n return;\n }\n\n this.activeTabIndex.set(index);\n this.tabChange.emit({ index, tab });\n }\n\n onKeyDown(event: KeyboardEvent, index: number): void {\n switch (event.key) {\n case 'Enter':\n case ' ':\n event.preventDefault();\n this.selectTab(index);\n break;\n }\n }\n\n private focusTab(index: number): void {\n const tabButton = document.querySelector(`[data-tab-index=\"${index}\"]`) as HTMLElement;\n tabButton?.focus();\n }\n\n private updateIndicatorPosition(activeIndex: number): void {\n const indicatorEl = this.indicator()?.nativeElement;\n const tabNavEl = this.tabNav()?.nativeElement;\n\n if (!indicatorEl || !tabNavEl) {\n // If elements aren't ready, try again in the next tick\n setTimeout(() => this.updateIndicatorPosition(activeIndex), 0);\n return;\n }\n\n const activeTab = tabNavEl.querySelector(`[data-tab-index=\"${activeIndex}\"]`) as HTMLElement;\n if (!activeTab) {\n // If tab button isn't ready, try again in the next tick\n setTimeout(() => this.updateIndicatorPosition(activeIndex), 0);\n return;\n }\n\n const tabRect = activeTab.getBoundingClientRect();\n const navRect = tabNavEl.getBoundingClientRect();\n\n const left = tabRect.left - navRect.left;\n const width = tabRect.width;\n\n // Check if active tab is feature locked to change indicator color\n const isFeatureLocked = this.tabs()[activeIndex]?.featureLocked();\n const color = isFeatureLocked\n ? 'var(--comp-tabs-tab-feature-locked-indicator-color)'\n : 'var(--comp-tabs-tab-active-indicator-color)';\n\n indicatorEl.style.transform = `translateX(${left}px)`;\n indicatorEl.style.width = `${width}px`;\n indicatorEl.style.backgroundColor = color;\n }\n}\n","<div class=\"ap-tabs\">\n <!-- Tab Navigation -->\n <div\n #tabNav\n class=\"ap-tabs__nav\"\n role=\"tablist\">\n @for (tab of tabs(); track $index) {\n <button\n type=\"button\"\n role=\"tab\"\n class=\"ap-tabs__tab\"\n [class.ap-tabs__tab--active]=\"activeTabIndex() === $index\"\n [class.ap-tabs__tab--disabled]=\"tab.disabled()\"\n [class.ap-tabs__tab--feature-locked]=\"tab.featureLocked()\"\n [attr.aria-selected]=\"activeTabIndex() === $index\"\n [attr.aria-controls]=\"componentId() + '-panel-' + $index\"\n [attr.id]=\"componentId() + '-tab-' + $index\"\n [attr.data-tab-index]=\"$index\"\n [disabled]=\"disabled() || tab.disabled()\"\n [tabindex]=\"disabled() || tab.disabled() ? -1 : 0\"\n (click)=\"selectTab($index)\"\n (keydown)=\"onKeyDown($event, $index)\">\n <div class=\"ap-tabs__tab-content\">\n <div class=\"ap-tabs__tab-header\">\n @if (tab.symbolId()) {\n <ap-symbol\n class=\"ap-tabs__tab-icon\"\n size=\"sm\"\n [symbolId]=\"tab.symbolId()\"\n [color]=\"activeTabIndex() === $index ? (tab.featureLocked() ? 'purple' : 'blue') : 'basic-grey'\" />\n }\n <span class=\"ap-tabs__tab-label\">{{ tab.label() }}</span>\n @if (tab.featureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n class=\"ap-tabs__tab-feature-lock\" />\n }\n @if (tab.counter() && !tab.featureLocked()) {\n <ap-counter [color]=\"activeTabIndex() === $index ? (tab.featureLocked() ? 'blue' : 'blue') : 'grey'\">\n {{ tab.counter() }}\n </ap-counter>\n }\n </div>\n </div>\n </button>\n }\n <!-- Sliding indicator -->\n <div\n #indicator\n class=\"ap-tabs__indicator\"></div>\n </div>\n\n <!-- Tab Panels -->\n <div class=\"ap-tabs__content\">\n <ng-content />\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -9,14 +9,14 @@ class TagComponent {
|
|
|
9
9
|
constructor() {
|
|
10
10
|
this.symbolRegistry.registerSymbols([apClose, apPlus]);
|
|
11
11
|
}
|
|
12
|
-
clearable = input(false, ...(ngDevMode ?
|
|
13
|
-
add = input(false, ...(ngDevMode ?
|
|
14
|
-
color = input('blue', ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
15
|
-
mini = input(false, ...(ngDevMode ? [{ debugName: "mini" }] : []));
|
|
12
|
+
clearable = input(false, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
13
|
+
add = input(false, { ...(ngDevMode ? { debugName: "add" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
14
|
+
color = input('blue', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
15
|
+
mini = input(false, ...(ngDevMode ? [{ debugName: "mini" }] : /* istanbul ignore next */ []));
|
|
16
16
|
clear = output();
|
|
17
17
|
added = output();
|
|
18
18
|
content = viewChild.required('contentWrapper');
|
|
19
|
-
contentText = computed(() => this.content().nativeElement.innerText, ...(ngDevMode ? [{ debugName: "contentText" }] : []));
|
|
19
|
+
contentText = computed(() => this.content().nativeElement.innerText, ...(ngDevMode ? [{ debugName: "contentText" }] : /* istanbul ignore next */ []));
|
|
20
20
|
onClear($event) {
|
|
21
21
|
$event.stopImmediatePropagation();
|
|
22
22
|
this.elementRef.nativeElement.remove();
|
|
@@ -26,12 +26,12 @@ class TagComponent {
|
|
|
26
26
|
$event.stopImmediatePropagation();
|
|
27
27
|
this.added.emit({ $event: $event });
|
|
28
28
|
}
|
|
29
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
30
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
29
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
30
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: TagComponent, isStandalone: true, selector: "ap-tag", inputs: { clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, add: { classPropertyName: "add", publicName: "add", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, mini: { classPropertyName: "mini", publicName: "mini", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clear: "clear", added: "added" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["contentWrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n [class.blue]=\"color() === 'blue'\"\n [class.menthol]=\"color() === 'menthol'\"\n [class.grey]=\"color() === 'grey'\"\n [class.tagOrange]=\"color() === 'tagOrange'\"\n [class.green]=\"color() === 'green'\"\n [class.red]=\"color() === 'red'\"\n [class.clearable]=\"clearable()\"\n [class.add]=\"add()\"\n [class.mini]=\"mini()\">\n <ng-content select=\"ap-symbol\" />\n <ng-content select=\"ap-avatar\" />\n\n <span #contentWrapper>\n <ng-content />\n </span>\n\n @if (clearable()) {\n <!-- FIXME implement as a directive and combine with a button tag to have to full access to all attributes (aria-labelledby) -->\n <ap-close-button\n [ariaLabel]=\"'clear ' + contentText()\"\n (closed)=\"onClear($event)\" />\n } @else if (add()) {\n <button \n class=\"add-button\"\n type=\"button\"\n aria-label=\"Add item\"\n (click)=\"onAdd($event)\">\n <ap-symbol size=\"xs\" symbolId=\"plus\" color=\"#344563\" />\n </button>\n }\n</div>\n", styles: ["ap-tag{--avatar-size: 16px;--button-size: 20px;display:inline-flex;vertical-align:middle}ap-tag>div{display:flex;align-items:center;justify-content:center;height:var(--comp-tag-height);max-height:var(--height);box-sizing:border-box;border-width:1px;border-style:solid;padding:0 var(--comp-tag-padding-right) 0 var(--comp-tag-padding-left);border-radius:var(--comp-tag-border-radius);gap:var(--ref-spacing-xxxs)}ap-tag>div.clearable,ap-tag>div.add{padding:0 calc(var(--comp-tag-closable-padding-right) - 1px) 0 var(--comp-tag-padding-left)}ap-tag>div.mini{height:var(--comp-tag-mini-height);padding:0 var(--comp-tag-mini-padding-right) 0 var(--comp-tag-mini-padding-left)}ap-tag>div span{max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--comp-tag-text-style-size);line-height:var(--comp-tag-text-style-line-height);font-weight:var(--comp-tag-text-style-font-weight);font-family:var(--comp-tag-text-style-font-family)}ap-tag>div ap-avatar{min-width:var(--avatar-size);width:var(--avatar-size);max-width:var(--avatar-size);min-height:var(--avatar-size);height:var(--avatar-size);max-height:var(--avatar-size)}ap-tag>div ap-avatar img{width:var(--avatar-size);height:var(--avatar-size)}ap-tag>div.blue{background-color:var(--comp-tag-blue-background-color);border-color:var(--comp-tag-blue-border-color);color:var(--comp-tag-blue-text-color)}ap-tag>div.grey{background-color:var(--comp-tag-grey-background-color);border-color:var(--comp-tag-grey-border-color);color:var(--comp-tag-grey-text-color)}ap-tag>div.tagOrange{background-color:var(--comp-tag-tag-orange-background-color);border-color:var(--comp-tag-tag-orange-border-color);color:var(--comp-tag-tag-orange-text-color)}ap-tag>div.menthol{background-color:var(--comp-tag-menthol-background-color);border-color:var(--comp-tag-menthol-border-color);color:var(--comp-tag-menthol-text-color)}ap-tag>div.green{background-color:var(--comp-tag-green-background-color);border-color:var(--comp-tag-green-border-color);color:var(--comp-tag-green-text-color)}ap-tag>div.red{background-color:var(--comp-tag-red-background-color);border-color:var(--comp-tag-red-border-color);color:var(--comp-tag-red-text-color)}ap-tag>div .add-button{margin:0;display:flex;justify-content:center;align-items:center;width:var(--comp-close-button-size);max-width:var(--comp-close-button-size);height:var(--comp-close-button-size);max-height:var(--comp-close-button-size);border-radius:50%;background:transparent;border:none;position:relative;transition:border .25s;padding:var(--comp-close-button-padding);outline:none;cursor:pointer}@media(hover:hover){ap-tag>div .add-button:focus:not(.disabled):not(:active){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-tag>div .add-button:hover{background:var(--comp-close-button-hover-background)}ap-tag>div .add-button:active{background:var(--comp-close-button-active-background);outline:none}ap-tag>div .add-button:focus:active{outline:none}\n"], dependencies: [{ kind: "component", type: CloseButtonComponent, selector: "ap-close-button", inputs: ["disabled", "ariaLabel", "dataTest"], outputs: ["closed"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
31
31
|
}
|
|
32
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
32
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: TagComponent, decorators: [{
|
|
33
33
|
type: Component,
|
|
34
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-tag', imports: [CloseButtonComponent, SymbolComponent], encapsulation: ViewEncapsulation.None, template: "<div\n [class.blue]=\"color() === 'blue'\"\n [class.menthol]=\"color() === 'menthol'\"\n [class.grey]=\"color() === 'grey'\"\n [class.tagOrange]=\"color() === 'tagOrange'\"\n [class.green]=\"color() === 'green'\"\n [class.red]=\"color() === 'red'\"\n [class.clearable]=\"clearable()\"\n [class.add]=\"add()\"\n [class.mini]=\"mini()\">\n <ng-content select=\"ap-symbol\" />\n <ng-content select=\"ap-avatar\" />\n\n <span #contentWrapper>\n <ng-content />\n </span>\n\n @if (clearable()) {\n <!-- FIXME implement as a directive and combine with a button tag to have to full access to all attributes (aria-labelledby) -->\n <ap-close-button\n [ariaLabel]=\"'clear ' + contentText()\"\n (closed)=\"onClear($event)\" />\n } @else if (add()) {\n <button \n class=\"add-button\"\n type=\"button\"\n aria-label=\"Add item\"\n (click)=\"onAdd($event)\">\n <ap-symbol size=\"xs\" symbolId=\"plus\" color=\"#344563\" />\n </button>\n }\n</div>\n", styles: ["ap-tag{--avatar-size: 16px;--button-size: 20px;display:inline-flex;vertical-align:middle}ap-tag>div{display:flex;align-items:center;justify-content:center;height:var(--comp-tag-height);max-height:var(--height);box-sizing:border-box;border-width:1px;border-style:solid;padding:0 var(--comp-tag-padding-right) 0 var(--comp-tag-padding-left);border-radius:var(--comp-tag-border-radius);gap:var(--ref-spacing-xxxs)}ap-tag>div.clearable,ap-tag>div.add{padding:0 calc(var(--comp-tag-closable-padding-right) - 1px) 0 var(--comp-tag-padding-left)}ap-tag>div.mini{height:var(--comp-tag-mini-height);padding:0 var(--comp-tag-mini-padding-right) 0 var(--comp-tag-mini-padding-left)}ap-tag>div span{max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--comp-tag-text-style-size);line-height:var(--comp-tag-text-style-line-height);font-weight:var(--comp-tag-text-style-font-weight);font-family:var(--comp-tag-text-style-font-family)}ap-tag>div ap-avatar{min-width:var(--avatar-size);width:var(--avatar-size);max-width:var(--avatar-size);min-height:var(--avatar-size);height:var(--avatar-size);max-height:var(--avatar-size)}ap-tag>div ap-avatar img{width:var(--avatar-size);height:var(--avatar-size)}ap-tag>div.blue{background-color:var(--comp-tag-blue-background-color);border-color:var(--comp-tag-blue-border-color);color:var(--comp-tag-blue-text-color)}ap-tag>div.grey{background-color:var(--comp-tag-grey-background-color);border-color:var(--comp-tag-grey-border-color);color:var(--comp-tag-grey-text-color)}ap-tag>div.tagOrange{background-color:var(--comp-tag-tag-orange-background-color);border-color:var(--comp-tag-tag-orange-border-color);color:var(--comp-tag-tag-orange-text-color)}ap-tag>div.menthol{background-color:var(--comp-tag-menthol-background-color);border-color:var(--comp-tag-menthol-border-color);color:var(--comp-tag-menthol-text-color)}ap-tag>div.green{background-color:var(--comp-tag-green-background-color);border-color:var(--comp-tag-green-border-color);color:var(--comp-tag-green-text-color)}ap-tag>div.red{background-color:var(--comp-tag-red-background-color);border-color:var(--comp-tag-red-border-color);color:var(--comp-tag-red-text-color)}ap-tag>div .add-button{margin:0;display:flex;justify-content:center;align-items:center;width:var(--comp-close-button-size);max-width:var(--comp-close-button-size);height:var(--comp-close-button-size);max-height:var(--comp-close-button-size);border-radius:50%;background:transparent;border:none;position:relative;transition:border .25s;padding:var(--comp-close-button-padding);outline:none;cursor:pointer}@media
|
|
34
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-tag', imports: [CloseButtonComponent, SymbolComponent], encapsulation: ViewEncapsulation.None, template: "<div\n [class.blue]=\"color() === 'blue'\"\n [class.menthol]=\"color() === 'menthol'\"\n [class.grey]=\"color() === 'grey'\"\n [class.tagOrange]=\"color() === 'tagOrange'\"\n [class.green]=\"color() === 'green'\"\n [class.red]=\"color() === 'red'\"\n [class.clearable]=\"clearable()\"\n [class.add]=\"add()\"\n [class.mini]=\"mini()\">\n <ng-content select=\"ap-symbol\" />\n <ng-content select=\"ap-avatar\" />\n\n <span #contentWrapper>\n <ng-content />\n </span>\n\n @if (clearable()) {\n <!-- FIXME implement as a directive and combine with a button tag to have to full access to all attributes (aria-labelledby) -->\n <ap-close-button\n [ariaLabel]=\"'clear ' + contentText()\"\n (closed)=\"onClear($event)\" />\n } @else if (add()) {\n <button \n class=\"add-button\"\n type=\"button\"\n aria-label=\"Add item\"\n (click)=\"onAdd($event)\">\n <ap-symbol size=\"xs\" symbolId=\"plus\" color=\"#344563\" />\n </button>\n }\n</div>\n", styles: ["ap-tag{--avatar-size: 16px;--button-size: 20px;display:inline-flex;vertical-align:middle}ap-tag>div{display:flex;align-items:center;justify-content:center;height:var(--comp-tag-height);max-height:var(--height);box-sizing:border-box;border-width:1px;border-style:solid;padding:0 var(--comp-tag-padding-right) 0 var(--comp-tag-padding-left);border-radius:var(--comp-tag-border-radius);gap:var(--ref-spacing-xxxs)}ap-tag>div.clearable,ap-tag>div.add{padding:0 calc(var(--comp-tag-closable-padding-right) - 1px) 0 var(--comp-tag-padding-left)}ap-tag>div.mini{height:var(--comp-tag-mini-height);padding:0 var(--comp-tag-mini-padding-right) 0 var(--comp-tag-mini-padding-left)}ap-tag>div span{max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--comp-tag-text-style-size);line-height:var(--comp-tag-text-style-line-height);font-weight:var(--comp-tag-text-style-font-weight);font-family:var(--comp-tag-text-style-font-family)}ap-tag>div ap-avatar{min-width:var(--avatar-size);width:var(--avatar-size);max-width:var(--avatar-size);min-height:var(--avatar-size);height:var(--avatar-size);max-height:var(--avatar-size)}ap-tag>div ap-avatar img{width:var(--avatar-size);height:var(--avatar-size)}ap-tag>div.blue{background-color:var(--comp-tag-blue-background-color);border-color:var(--comp-tag-blue-border-color);color:var(--comp-tag-blue-text-color)}ap-tag>div.grey{background-color:var(--comp-tag-grey-background-color);border-color:var(--comp-tag-grey-border-color);color:var(--comp-tag-grey-text-color)}ap-tag>div.tagOrange{background-color:var(--comp-tag-tag-orange-background-color);border-color:var(--comp-tag-tag-orange-border-color);color:var(--comp-tag-tag-orange-text-color)}ap-tag>div.menthol{background-color:var(--comp-tag-menthol-background-color);border-color:var(--comp-tag-menthol-border-color);color:var(--comp-tag-menthol-text-color)}ap-tag>div.green{background-color:var(--comp-tag-green-background-color);border-color:var(--comp-tag-green-border-color);color:var(--comp-tag-green-text-color)}ap-tag>div.red{background-color:var(--comp-tag-red-background-color);border-color:var(--comp-tag-red-border-color);color:var(--comp-tag-red-text-color)}ap-tag>div .add-button{margin:0;display:flex;justify-content:center;align-items:center;width:var(--comp-close-button-size);max-width:var(--comp-close-button-size);height:var(--comp-close-button-size);max-height:var(--comp-close-button-size);border-radius:50%;background:transparent;border:none;position:relative;transition:border .25s;padding:var(--comp-close-button-padding);outline:none;cursor:pointer}@media(hover:hover){ap-tag>div .add-button:focus:not(.disabled):not(:active){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-tag>div .add-button:hover{background:var(--comp-close-button-hover-background)}ap-tag>div .add-button:active{background:var(--comp-close-button-active-background);outline:none}ap-tag>div .add-button:focus:active{outline:none}\n"] }]
|
|
35
35
|
}], ctorParameters: () => [], propDecorators: { clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], add: [{ type: i0.Input, args: [{ isSignal: true, alias: "add", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], mini: [{ type: i0.Input, args: [{ isSignal: true, alias: "mini", required: false }] }], clear: [{ type: i0.Output, args: ["clear"] }], added: [{ type: i0.Output, args: ["added"] }], content: [{ type: i0.ViewChild, args: ['contentWrapper', { isSignal: true }] }] } });
|
|
36
36
|
|
|
37
37
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-tag.mjs","sources":["../../../libs/ui-components/tag/src/tag.component.ts","../../../libs/ui-components/tag/src/tag.component.html","../../../libs/ui-components/tag/src/agorapulse-ui-components-tag.ts"],"sourcesContent":["import { CloseButtonComponent } from '@agorapulse/ui-components/close-button';\nimport { apClose, apPlus, SymbolComponent, SymbolRegistry } from '@agorapulse/ui-symbol';\n\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n ElementRef,\n inject,\n input,\n output,\n viewChild,\n ViewEncapsulation,\n} from '@angular/core';\n\nexport type TagColor = 'blue' | 'grey' | 'menthol' | 'tagOrange' | 'red' | 'green';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-tag',\n templateUrl: './tag.component.html',\n imports: [CloseButtonComponent, SymbolComponent],\n styleUrls: ['./tag.component.scss'],\n encapsulation: ViewEncapsulation.None,\n})\nexport class TagComponent {\n private readonly elementRef: ElementRef = inject(ElementRef);\n private readonly symbolRegistry: SymbolRegistry = inject(SymbolRegistry);\n\n constructor() {\n this.symbolRegistry.registerSymbols([apClose, apPlus]);\n }\n\n clearable = input(false, { transform: booleanAttribute });\n add = input(false, { transform: booleanAttribute });\n color = input<TagColor>('blue');\n mini = input(false);\n\n clear = output<{ $event: MouseEvent | PointerEvent }>();\n added = output<{ $event: MouseEvent | PointerEvent | KeyboardEvent }>();\n\n content = viewChild.required<ElementRef>('contentWrapper');\n contentText = computed(() => this.content().nativeElement.innerText);\n\n onClear($event: MouseEvent | PointerEvent): void {\n $event.stopImmediatePropagation();\n this.elementRef.nativeElement.remove();\n this.clear.emit({ $event });\n }\n\n onAdd($event: Event): void {\n $event.stopImmediatePropagation();\n this.added.emit({ $event: $event as MouseEvent | PointerEvent | KeyboardEvent });\n }\n}\n","<div\n [class.blue]=\"color() === 'blue'\"\n [class.menthol]=\"color() === 'menthol'\"\n [class.grey]=\"color() === 'grey'\"\n [class.tagOrange]=\"color() === 'tagOrange'\"\n [class.green]=\"color() === 'green'\"\n [class.red]=\"color() === 'red'\"\n [class.clearable]=\"clearable()\"\n [class.add]=\"add()\"\n [class.mini]=\"mini()\">\n <ng-content select=\"ap-symbol\" />\n <ng-content select=\"ap-avatar\" />\n\n <span #contentWrapper>\n <ng-content />\n </span>\n\n @if (clearable()) {\n <!-- FIXME implement as a directive and combine with a button tag to have to full access to all attributes (aria-labelledby) -->\n <ap-close-button\n [ariaLabel]=\"'clear ' + contentText()\"\n (closed)=\"onClear($event)\" />\n } @else if (add()) {\n <button \n class=\"add-button\"\n type=\"button\"\n aria-label=\"Add item\"\n (click)=\"onAdd($event)\">\n <ap-symbol size=\"xs\" symbolId=\"plus\" color=\"#344563\" />\n </button>\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;MA0Ba,YAAY,CAAA;AACJ,IAAA,UAAU,GAAe,MAAM,CAAC,UAAU,CAAC;AAC3C,IAAA,cAAc,GAAmB,MAAM,CAAC,cAAc,CAAC;AAExE,IAAA,WAAA,GAAA;QACI,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAC1D;
|
|
1
|
+
{"version":3,"file":"agorapulse-ui-components-tag.mjs","sources":["../../../libs/ui-components/tag/src/tag.component.ts","../../../libs/ui-components/tag/src/tag.component.html","../../../libs/ui-components/tag/src/agorapulse-ui-components-tag.ts"],"sourcesContent":["import { CloseButtonComponent } from '@agorapulse/ui-components/close-button';\nimport { apClose, apPlus, SymbolComponent, SymbolRegistry } from '@agorapulse/ui-symbol';\n\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n ElementRef,\n inject,\n input,\n output,\n viewChild,\n ViewEncapsulation,\n} from '@angular/core';\n\nexport type TagColor = 'blue' | 'grey' | 'menthol' | 'tagOrange' | 'red' | 'green';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-tag',\n templateUrl: './tag.component.html',\n imports: [CloseButtonComponent, SymbolComponent],\n styleUrls: ['./tag.component.scss'],\n encapsulation: ViewEncapsulation.None,\n})\nexport class TagComponent {\n private readonly elementRef: ElementRef = inject(ElementRef);\n private readonly symbolRegistry: SymbolRegistry = inject(SymbolRegistry);\n\n constructor() {\n this.symbolRegistry.registerSymbols([apClose, apPlus]);\n }\n\n clearable = input(false, { transform: booleanAttribute });\n add = input(false, { transform: booleanAttribute });\n color = input<TagColor>('blue');\n mini = input(false);\n\n clear = output<{ $event: MouseEvent | PointerEvent }>();\n added = output<{ $event: MouseEvent | PointerEvent | KeyboardEvent }>();\n\n content = viewChild.required<ElementRef>('contentWrapper');\n contentText = computed(() => this.content().nativeElement.innerText);\n\n onClear($event: MouseEvent | PointerEvent): void {\n $event.stopImmediatePropagation();\n this.elementRef.nativeElement.remove();\n this.clear.emit({ $event });\n }\n\n onAdd($event: Event): void {\n $event.stopImmediatePropagation();\n this.added.emit({ $event: $event as MouseEvent | PointerEvent | KeyboardEvent });\n }\n}\n","<div\n [class.blue]=\"color() === 'blue'\"\n [class.menthol]=\"color() === 'menthol'\"\n [class.grey]=\"color() === 'grey'\"\n [class.tagOrange]=\"color() === 'tagOrange'\"\n [class.green]=\"color() === 'green'\"\n [class.red]=\"color() === 'red'\"\n [class.clearable]=\"clearable()\"\n [class.add]=\"add()\"\n [class.mini]=\"mini()\">\n <ng-content select=\"ap-symbol\" />\n <ng-content select=\"ap-avatar\" />\n\n <span #contentWrapper>\n <ng-content />\n </span>\n\n @if (clearable()) {\n <!-- FIXME implement as a directive and combine with a button tag to have to full access to all attributes (aria-labelledby) -->\n <ap-close-button\n [ariaLabel]=\"'clear ' + contentText()\"\n (closed)=\"onClear($event)\" />\n } @else if (add()) {\n <button \n class=\"add-button\"\n type=\"button\"\n aria-label=\"Add item\"\n (click)=\"onAdd($event)\">\n <ap-symbol size=\"xs\" symbolId=\"plus\" color=\"#344563\" />\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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"}
|
|
@@ -18,10 +18,10 @@ class TextMeasurementService {
|
|
|
18
18
|
this.textDiv.style.fontFamily = fontFamily;
|
|
19
19
|
return this.textDiv.getBoundingClientRect().width;
|
|
20
20
|
}
|
|
21
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
22
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
21
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: TextMeasurementService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
22
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: TextMeasurementService, providedIn: 'root' });
|
|
23
23
|
}
|
|
24
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
24
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: TextMeasurementService, decorators: [{
|
|
25
25
|
type: Injectable,
|
|
26
26
|
args: [{
|
|
27
27
|
providedIn: 'root',
|
|
@@ -13,10 +13,10 @@ class TextareaDirective {
|
|
|
13
13
|
textarea.rows = 3;
|
|
14
14
|
}
|
|
15
15
|
}
|
|
16
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
17
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "
|
|
16
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: TextareaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
17
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.2.16", type: TextareaDirective, isStandalone: true, selector: "[apTextarea]", inputs: { resizable: ["resizable", "resizable", booleanAttribute] }, host: { properties: { "class.resizable": "this.resizable" }, classAttribute: "ap-textarea" }, hostDirectives: [{ directive: i1.InputDirective }], ngImport: i0 });
|
|
18
18
|
}
|
|
19
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
19
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: TextareaDirective, decorators: [{
|
|
20
20
|
type: Directive,
|
|
21
21
|
args: [{
|
|
22
22
|
selector: '[apTextarea]',
|
|
@@ -138,8 +138,8 @@ class ToggleComponent {
|
|
|
138
138
|
event.stopPropagation();
|
|
139
139
|
}
|
|
140
140
|
}
|
|
141
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
142
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "
|
|
141
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
142
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.16", type: ToggleComponent, isStandalone: true, selector: "ap-toggle", inputs: { ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], labelPosition: "labelPosition", disabled: ["disabled", "disabled", booleanAttribute], checked: "checked", required: ["required", "required", booleanAttribute], confirm: "confirm", confirmMessage: "confirmMessage", confirmOk: "confirmOk", confirmCancel: "confirmCancel", confirmTitle: "confirmTitle", name: "name" }, outputs: { change: "change" }, providers: [
|
|
143
143
|
AP_CHECKBOX_CONTROL_VALUE_ACCESSOR,
|
|
144
144
|
{
|
|
145
145
|
provide: NG_VALIDATORS,
|
|
@@ -147,9 +147,9 @@ class ToggleComponent {
|
|
|
147
147
|
multi: true,
|
|
148
148
|
},
|
|
149
149
|
MatDialog,
|
|
150
|
-
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }, { propertyName: "labelElement", first: true, predicate: ["label"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"toggle\"\n (click)=\"_preventBubblingFromLabel($event)\">\n <input\n #input\n class=\"hidden\"\n type=\"checkbox\"\n role=\"switch\"\n [id]=\"name\"\n [name]=\"name\"\n [checked]=\"checked\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [attr.data-test]=\"name\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-checked]=\"checked\"\n [class.checked]=\"checked\"\n (click)=\"onValueChange()\" />\n <div\n class=\"switch-container\"\n [class.label-left]=\"labelPosition === 'left'\">\n <div\n class=\"switch\"\n [class.checked]=\"checked\"\n [class.disabled]=\"disabled\"\n (click)=\"onValueChange()\">\n <div class=\"knob\">\n <ap-symbol\n [class.checked]=\"checked\"\n [symbolId]=\"checked ? 'check' : 'close'\" />\n </div>\n </div>\n <label\n #label\n [class.disabled]=\"disabled\"\n [for]=\"name\">\n <ng-content />\n </label>\n </div>\n</div>\n", styles: ["ap-toggle{position:relative}ap-toggle .toggle{display:flex;gap:var(--ref-spacing-xxs);align-items:center;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)}ap-toggle .toggle input.hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}ap-toggle .toggle input[type=checkbox]{margin:0;padding:0;width:0;height:0;transform:scale(0)}@media
|
|
150
|
+
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }, { propertyName: "labelElement", first: true, predicate: ["label"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"toggle\"\n (click)=\"_preventBubblingFromLabel($event)\">\n <input\n #input\n class=\"hidden\"\n type=\"checkbox\"\n role=\"switch\"\n [id]=\"name\"\n [name]=\"name\"\n [checked]=\"checked\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [attr.data-test]=\"name\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-checked]=\"checked\"\n [class.checked]=\"checked\"\n (click)=\"onValueChange()\" />\n <div\n class=\"switch-container\"\n [class.label-left]=\"labelPosition === 'left'\">\n <div\n class=\"switch\"\n [class.checked]=\"checked\"\n [class.disabled]=\"disabled\"\n (click)=\"onValueChange()\">\n <div class=\"knob\">\n <ap-symbol\n [class.checked]=\"checked\"\n [symbolId]=\"checked ? 'check' : 'close'\" />\n </div>\n </div>\n <label\n #label\n [class.disabled]=\"disabled\"\n [for]=\"name\">\n <ng-content />\n </label>\n </div>\n</div>\n", styles: ["ap-toggle{position:relative}ap-toggle .toggle{display:flex;gap:var(--ref-spacing-xxs);align-items:center;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)}ap-toggle .toggle input.hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}ap-toggle .toggle input[type=checkbox]{margin:0;padding:0;width:0;height:0;transform:scale(0)}@media(hover:hover){ap-toggle .toggle input[type=checkbox]:focus:not(.disabled)~.switch-container .switch{outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-toggle .toggle input[type=checkbox]:disabled~.switch-container .switch{pointer-events:none;cursor:default}ap-toggle .toggle .switch-container{display:flex;gap:var(--ref-spacing-xxs);align-items:center}ap-toggle .toggle .switch-container.label-left{flex-direction:row-reverse}ap-toggle .toggle .switch-container .switch{box-sizing:content-box;position:relative;display:flex;align-items:center;padding:2px;width:28px;height:12px;border-radius:16px;background:var(--ref-color-grey-60);transition:background-color .25s;cursor:pointer}ap-toggle .toggle .switch-container .switch:hover,ap-toggle .toggle .switch-container .switch:focus,ap-toggle .toggle .switch-container .switch:active{background:var(--ref-color-grey-80)}ap-toggle .toggle .switch-container .switch .knob{color:var(--ref-color-grey-80)}ap-toggle .toggle .switch-container .switch .knob.checked:active{background:var(--ref-color-electric-blue-60)}ap-toggle .toggle .switch-container .switch .knob.checked{background:var(--ref-color-electric-blue-100)}ap-toggle .toggle .switch-container .switch.checked{background:var(--ref-color-electric-blue-100)}ap-toggle .toggle .switch-container .switch.checked:hover,ap-toggle .toggle .switch-container .switch.checked:focus{background:var(--ref-color-electric-blue-80)}ap-toggle .toggle .switch-container .switch.checked:active{background:var(--ref-color-electric-blue-60)}ap-toggle .toggle .switch-container .switch.checked .knob{left:18px}ap-toggle .toggle .switch-container .switch.checked .knob ap-symbol,ap-toggle .toggle .switch-container .switch.checked .knob ap-symbol svg{color:var(--ref-color-electric-blue-150)}ap-toggle .toggle .switch-container .switch.disabled{background:var(--ref-color-grey-20)}ap-toggle .toggle .switch-container .switch.disabled .knob ap-symbol,ap-toggle .toggle .switch-container .switch.disabled .knob ap-symbol svg{color:var(--ref-color-grey-40)}ap-toggle .toggle .switch-container .switch .knob{width:12px;height:12px;background:#fff;border-radius:100%;position:absolute;transition:left .25s ease-in-out;left:2px}ap-toggle .toggle .switch-container .switch .knob ap-symbol,ap-toggle .toggle .switch-container .switch .knob ap-symbol svg{width:10px;height:10px;min-width:10px;max-width:10px;max-height:10px}ap-toggle .toggle .switch-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)}ap-toggle .toggle .switch-container label:empty{display:none}ap-toggle .toggle .switch-container label.disabled{color:var(--ref-color-grey-60)}ap-toggle .toggle .switch-container label:hover:not(.disabled){cursor:pointer}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
151
151
|
}
|
|
152
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
152
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ToggleComponent, decorators: [{
|
|
153
153
|
type: Component,
|
|
154
154
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-toggle', imports: [SymbolComponent], providers: [
|
|
155
155
|
AP_CHECKBOX_CONTROL_VALUE_ACCESSOR,
|
|
@@ -159,7 +159,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
159
159
|
multi: true,
|
|
160
160
|
},
|
|
161
161
|
MatDialog,
|
|
162
|
-
], encapsulation: ViewEncapsulation.None, template: "<div\n class=\"toggle\"\n (click)=\"_preventBubblingFromLabel($event)\">\n <input\n #input\n class=\"hidden\"\n type=\"checkbox\"\n role=\"switch\"\n [id]=\"name\"\n [name]=\"name\"\n [checked]=\"checked\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [attr.data-test]=\"name\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-checked]=\"checked\"\n [class.checked]=\"checked\"\n (click)=\"onValueChange()\" />\n <div\n class=\"switch-container\"\n [class.label-left]=\"labelPosition === 'left'\">\n <div\n class=\"switch\"\n [class.checked]=\"checked\"\n [class.disabled]=\"disabled\"\n (click)=\"onValueChange()\">\n <div class=\"knob\">\n <ap-symbol\n [class.checked]=\"checked\"\n [symbolId]=\"checked ? 'check' : 'close'\" />\n </div>\n </div>\n <label\n #label\n [class.disabled]=\"disabled\"\n [for]=\"name\">\n <ng-content />\n </label>\n </div>\n</div>\n", styles: ["ap-toggle{position:relative}ap-toggle .toggle{display:flex;gap:var(--ref-spacing-xxs);align-items:center;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)}ap-toggle .toggle input.hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}ap-toggle .toggle input[type=checkbox]{margin:0;padding:0;width:0;height:0;transform:scale(0)}@media
|
|
162
|
+
], encapsulation: ViewEncapsulation.None, template: "<div\n class=\"toggle\"\n (click)=\"_preventBubblingFromLabel($event)\">\n <input\n #input\n class=\"hidden\"\n type=\"checkbox\"\n role=\"switch\"\n [id]=\"name\"\n [name]=\"name\"\n [checked]=\"checked\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [attr.data-test]=\"name\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-checked]=\"checked\"\n [class.checked]=\"checked\"\n (click)=\"onValueChange()\" />\n <div\n class=\"switch-container\"\n [class.label-left]=\"labelPosition === 'left'\">\n <div\n class=\"switch\"\n [class.checked]=\"checked\"\n [class.disabled]=\"disabled\"\n (click)=\"onValueChange()\">\n <div class=\"knob\">\n <ap-symbol\n [class.checked]=\"checked\"\n [symbolId]=\"checked ? 'check' : 'close'\" />\n </div>\n </div>\n <label\n #label\n [class.disabled]=\"disabled\"\n [for]=\"name\">\n <ng-content />\n </label>\n </div>\n</div>\n", styles: ["ap-toggle{position:relative}ap-toggle .toggle{display:flex;gap:var(--ref-spacing-xxs);align-items:center;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)}ap-toggle .toggle input.hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}ap-toggle .toggle input[type=checkbox]{margin:0;padding:0;width:0;height:0;transform:scale(0)}@media(hover:hover){ap-toggle .toggle input[type=checkbox]:focus:not(.disabled)~.switch-container .switch{outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-toggle .toggle input[type=checkbox]:disabled~.switch-container .switch{pointer-events:none;cursor:default}ap-toggle .toggle .switch-container{display:flex;gap:var(--ref-spacing-xxs);align-items:center}ap-toggle .toggle .switch-container.label-left{flex-direction:row-reverse}ap-toggle .toggle .switch-container .switch{box-sizing:content-box;position:relative;display:flex;align-items:center;padding:2px;width:28px;height:12px;border-radius:16px;background:var(--ref-color-grey-60);transition:background-color .25s;cursor:pointer}ap-toggle .toggle .switch-container .switch:hover,ap-toggle .toggle .switch-container .switch:focus,ap-toggle .toggle .switch-container .switch:active{background:var(--ref-color-grey-80)}ap-toggle .toggle .switch-container .switch .knob{color:var(--ref-color-grey-80)}ap-toggle .toggle .switch-container .switch .knob.checked:active{background:var(--ref-color-electric-blue-60)}ap-toggle .toggle .switch-container .switch .knob.checked{background:var(--ref-color-electric-blue-100)}ap-toggle .toggle .switch-container .switch.checked{background:var(--ref-color-electric-blue-100)}ap-toggle .toggle .switch-container .switch.checked:hover,ap-toggle .toggle .switch-container .switch.checked:focus{background:var(--ref-color-electric-blue-80)}ap-toggle .toggle .switch-container .switch.checked:active{background:var(--ref-color-electric-blue-60)}ap-toggle .toggle .switch-container .switch.checked .knob{left:18px}ap-toggle .toggle .switch-container .switch.checked .knob ap-symbol,ap-toggle .toggle .switch-container .switch.checked .knob ap-symbol svg{color:var(--ref-color-electric-blue-150)}ap-toggle .toggle .switch-container .switch.disabled{background:var(--ref-color-grey-20)}ap-toggle .toggle .switch-container .switch.disabled .knob ap-symbol,ap-toggle .toggle .switch-container .switch.disabled .knob ap-symbol svg{color:var(--ref-color-grey-40)}ap-toggle .toggle .switch-container .switch .knob{width:12px;height:12px;background:#fff;border-radius:100%;position:absolute;transition:left .25s ease-in-out;left:2px}ap-toggle .toggle .switch-container .switch .knob ap-symbol,ap-toggle .toggle .switch-container .switch .knob ap-symbol svg{width:10px;height:10px;min-width:10px;max-width:10px;max-height:10px}ap-toggle .toggle .switch-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)}ap-toggle .toggle .switch-container label:empty{display:none}ap-toggle .toggle .switch-container label.disabled{color:var(--ref-color-grey-60)}ap-toggle .toggle .switch-container label:hover:not(.disabled){cursor:pointer}\n"] }]
|
|
163
163
|
}], propDecorators: { inputElement: [{
|
|
164
164
|
type: ViewChild,
|
|
165
165
|
args: ['input']
|