@lucca-front/ng 21.2.1 → 21.2.2
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/fesm2022/lucca-front-ng-callout.mjs +10 -6
- package/fesm2022/lucca-front-ng-callout.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-dialog.mjs +2 -2
- package/fesm2022/lucca-front-ng-error-page.mjs +3 -3
- package/fesm2022/lucca-front-ng-error-page.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-file-upload.mjs +1 -1
- package/fesm2022/lucca-front-ng-file-upload.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-forms-rich-text-input.mjs +2 -2
- package/fesm2022/lucca-front-ng-forms-rich-text-input.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-forms.mjs +2 -2
- package/fesm2022/lucca-front-ng-forms.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-multi-select.mjs +4 -3
- package/fesm2022/lucca-front-ng-multi-select.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-pagination.mjs +3 -2
- package/fesm2022/lucca-front-ng-pagination.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-segmented-control-tabs.mjs +2 -2
- package/fesm2022/lucca-front-ng-segmented-control-tabs.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-segmented-control.mjs +2 -2
- package/fesm2022/lucca-front-ng-segmented-control.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-simple-select.mjs +4 -3
- package/fesm2022/lucca-front-ng-simple-select.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-software-icon.mjs +4 -0
- package/fesm2022/lucca-front-ng-software-icon.mjs.map +1 -1
- package/package.json +4 -4
- package/types/lucca-front-ng-callout.d.ts +5 -1
- package/types/lucca-front-ng-simple-select.d.ts +1 -0
- package/types/lucca-front-ng-software-icon.d.ts +2 -2
|
@@ -2,6 +2,7 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { InjectionToken, input, booleanAttribute, output, effect, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
3
|
import { intlInputOptions, IntlParamsPipe } from '@lucca-front/ng/core';
|
|
4
4
|
import { IconComponent } from '@lucca-front/ng/icon';
|
|
5
|
+
import { ButtonComponent } from '@lucca-front/ng/button';
|
|
5
6
|
|
|
6
7
|
const Translations = {
|
|
7
8
|
'nl-BE': {
|
|
@@ -101,11 +102,11 @@ class PaginationComponent {
|
|
|
101
102
|
});
|
|
102
103
|
}
|
|
103
104
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
104
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: PaginationComponent, isStandalone: true, selector: "lu-pagination", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null }, isFirstPage: { classPropertyName: "isFirstPage", publicName: "isFirstPage", isSignal: true, isRequired: false, transformFunction: null }, isLastPage: { classPropertyName: "isLastPage", publicName: "isLastPage", isSignal: true, isRequired: false, transformFunction: null }, from: { classPropertyName: "from", publicName: "from", isSignal: true, isRequired: false, transformFunction: null }, to: { classPropertyName: "to", publicName: "to", isSignal: true, isRequired: false, transformFunction: null }, itemsCount: { classPropertyName: "itemsCount", publicName: "itemsCount", isSignal: true, isRequired: false, transformFunction: null }, mod: { classPropertyName: "mod", publicName: "mod", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { previousPage: "previousPage", nextPage: "nextPage" }, ngImport: i0, template: "<nav class=\"pagination\" role=\"navigation\" aria-label=\"pagination-count\" [class.mod-compact]=\"mod() === 'compact'\">\n\t@if (mod() === \"default\") {\n\t\t<div class=\"pagination-count\">\n\t\t\t<span class=\"pr-u-mask\"> {{ intl().resultsA11y | intlParams: { from: from(), to: to(), itemsCount: itemsCount() } }} </span>\n\t\t\t<span aria-hidden=\"true\"> {{ intl().results | intlParams: { from: from(), to: to(), itemsCount: itemsCount() } }} </span>\n\t\t</div>\n\t}\n\n\t<div class=\"pagination-scrolling\">\n\t\t<button type=\"button\"
|
|
105
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: PaginationComponent, isStandalone: true, selector: "lu-pagination", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null }, isFirstPage: { classPropertyName: "isFirstPage", publicName: "isFirstPage", isSignal: true, isRequired: false, transformFunction: null }, isLastPage: { classPropertyName: "isLastPage", publicName: "isLastPage", isSignal: true, isRequired: false, transformFunction: null }, from: { classPropertyName: "from", publicName: "from", isSignal: true, isRequired: false, transformFunction: null }, to: { classPropertyName: "to", publicName: "to", isSignal: true, isRequired: false, transformFunction: null }, itemsCount: { classPropertyName: "itemsCount", publicName: "itemsCount", isSignal: true, isRequired: false, transformFunction: null }, mod: { classPropertyName: "mod", publicName: "mod", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { previousPage: "previousPage", nextPage: "nextPage" }, ngImport: i0, template: "<nav class=\"pagination\" role=\"navigation\" aria-label=\"pagination-count\" [class.mod-compact]=\"mod() === 'compact'\">\n\t@if (mod() === \"default\") {\n\t\t<div class=\"pagination-count\">\n\t\t\t<span class=\"pr-u-mask\"> {{ intl().resultsA11y | intlParams: { from: from(), to: to(), itemsCount: itemsCount() } }} </span>\n\t\t\t<span aria-hidden=\"true\"> {{ intl().results | intlParams: { from: from(), to: to(), itemsCount: itemsCount() } }} </span>\n\t\t</div>\n\t}\n\n\t<div class=\"pagination-scrolling\">\n\t\t<button type=\"button\" luButton=\"ghost\" size=\"S\" [disabled]=\"isFirstPage()\" (click)=\"previousPage.emit()\">\n\t\t\t<lu-icon icon=\"arrowChevronLeft\" />\n\t\t\t<span class=\"pr-u-mask\">{{ intl().previous }}</span>\n\t\t</button>\n\t\t<button type=\"button\" luButton=\"ghost\" size=\"S\" [disabled]=\"isLastPage()\" (click)=\"nextPage.emit()\">\n\t\t\t<lu-icon icon=\"arrowChevronRight\" />\n\t\t\t<span class=\"pr-u-mask\">{{ intl().next }}</span>\n\t\t</button>\n\t</div>\n</nav>\n", styles: ["@charset \"UTF-8\";@layer components{.pagination{display:flex;flex-wrap:wrap;padding-block:var(--pr-t-spacings-100);padding-inline:var(--pr-t-spacings-150);justify-content:flex-end;color:var(--pr-t-color-text-subtle)}.pagination>*:not(:last-child){margin-inline-end:var(--pr-t-spacings-100)}.pagination-count,.pagination-navigation,.pagination-scrolling{display:flex;align-items:center;flex-wrap:wrap}.pagination-count-separator{margin-block:0;margin-inline:var(--pr-t-spacings-50)}.pagination-navigation{list-style:none;padding:0;margin-block:0}.pagination-navigation>*:not(:last-child){margin-inline-end:var(--pr-t-spacings-50)}.pagination-navigation-item{margin-inline-end:var(--pr-t-spacings-50)}}@layer mods{.pagination.mod-compact{padding:0;justify-content:start}}@layer mods{.pagination-navigation-item:is(.is-ellipsis,.ellipsis):after{content:\"\\2026\"/\"\"}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lu-icon, pr-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "component", type: ButtonComponent, selector: "button[luButton], a[luButton], span[luButton], button[prButton], a[prButton], span[prButton]", inputs: ["size", "block", "critical", "delete", "disclosure", "palette", "state", "luButton", "prButton"] }, { kind: "pipe", type: IntlParamsPipe, name: "intlParams" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
105
106
|
}
|
|
106
107
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
107
108
|
type: Component,
|
|
108
|
-
args: [{ selector: 'lu-pagination', imports: [IconComponent, IntlParamsPipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<nav class=\"pagination\" role=\"navigation\" aria-label=\"pagination-count\" [class.mod-compact]=\"mod() === 'compact'\">\n\t@if (mod() === \"default\") {\n\t\t<div class=\"pagination-count\">\n\t\t\t<span class=\"pr-u-mask\"> {{ intl().resultsA11y | intlParams: { from: from(), to: to(), itemsCount: itemsCount() } }} </span>\n\t\t\t<span aria-hidden=\"true\"> {{ intl().results | intlParams: { from: from(), to: to(), itemsCount: itemsCount() } }} </span>\n\t\t</div>\n\t}\n\n\t<div class=\"pagination-scrolling\">\n\t\t<button type=\"button\"
|
|
109
|
+
args: [{ selector: 'lu-pagination', imports: [IconComponent, IntlParamsPipe, ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<nav class=\"pagination\" role=\"navigation\" aria-label=\"pagination-count\" [class.mod-compact]=\"mod() === 'compact'\">\n\t@if (mod() === \"default\") {\n\t\t<div class=\"pagination-count\">\n\t\t\t<span class=\"pr-u-mask\"> {{ intl().resultsA11y | intlParams: { from: from(), to: to(), itemsCount: itemsCount() } }} </span>\n\t\t\t<span aria-hidden=\"true\"> {{ intl().results | intlParams: { from: from(), to: to(), itemsCount: itemsCount() } }} </span>\n\t\t</div>\n\t}\n\n\t<div class=\"pagination-scrolling\">\n\t\t<button type=\"button\" luButton=\"ghost\" size=\"S\" [disabled]=\"isFirstPage()\" (click)=\"previousPage.emit()\">\n\t\t\t<lu-icon icon=\"arrowChevronLeft\" />\n\t\t\t<span class=\"pr-u-mask\">{{ intl().previous }}</span>\n\t\t</button>\n\t\t<button type=\"button\" luButton=\"ghost\" size=\"S\" [disabled]=\"isLastPage()\" (click)=\"nextPage.emit()\">\n\t\t\t<lu-icon icon=\"arrowChevronRight\" />\n\t\t\t<span class=\"pr-u-mask\">{{ intl().next }}</span>\n\t\t</button>\n\t</div>\n</nav>\n", styles: ["@charset \"UTF-8\";@layer components{.pagination{display:flex;flex-wrap:wrap;padding-block:var(--pr-t-spacings-100);padding-inline:var(--pr-t-spacings-150);justify-content:flex-end;color:var(--pr-t-color-text-subtle)}.pagination>*:not(:last-child){margin-inline-end:var(--pr-t-spacings-100)}.pagination-count,.pagination-navigation,.pagination-scrolling{display:flex;align-items:center;flex-wrap:wrap}.pagination-count-separator{margin-block:0;margin-inline:var(--pr-t-spacings-50)}.pagination-navigation{list-style:none;padding:0;margin-block:0}.pagination-navigation>*:not(:last-child){margin-inline-end:var(--pr-t-spacings-50)}.pagination-navigation-item{margin-inline-end:var(--pr-t-spacings-50)}}@layer mods{.pagination.mod-compact{padding:0;justify-content:start}}@layer mods{.pagination-navigation-item:is(.is-ellipsis,.ellipsis):after{content:\"\\2026\"/\"\"}}\n"] }]
|
|
109
110
|
}], ctorParameters: () => [], propDecorators: { intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }], isFirstPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFirstPage", required: false }] }], isLastPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLastPage", required: false }] }], from: [{ type: i0.Input, args: [{ isSignal: true, alias: "from", required: false }] }], to: [{ type: i0.Input, args: [{ isSignal: true, alias: "to", required: false }] }], itemsCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsCount", required: false }] }], mod: [{ type: i0.Input, args: [{ isSignal: true, alias: "mod", required: false }] }], previousPage: [{ type: i0.Output, args: ["previousPage"] }], nextPage: [{ type: i0.Output, args: ["nextPage"] }] } });
|
|
110
111
|
|
|
111
112
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lucca-front-ng-pagination.mjs","sources":["../../../packages/ng/pagination/translations.ts","../../../packages/ng/pagination/pagination.translate.ts","../../../packages/ng/pagination/pagination.component.ts","../../../packages/ng/pagination/pagination.component.html","../../../packages/ng/pagination/lucca-front-ng-pagination.ts"],"sourcesContent":["export const Translations = {\n\t'nl-BE': {\n\t\tresults: '{{from}} – {{to}} van {{itemsCount}}',\n\t\tprevious: 'Vorige',\n\t\tnext: 'Volgende',\n\t\tresultsA11y: 'Resultaten van {{from}} tot {{to}} in {{itemsCount}}',\n\t},\n\tfr: {\n\t\tresults: '{{from}} – {{to}} sur {{itemsCount}}',\n\t\tprevious: 'Précédent',\n\t\tnext: 'Suivant',\n\t\tresultsA11y: 'Résultats de {{from}} à {{to}} sur {{itemsCount}}',\n\t},\n\tde: {\n\t\tresults: '{{from}} – {{to}} von {{itemsCount}}',\n\t\tprevious: 'Zurück',\n\t\tnext: 'Weiter',\n\t\tresultsA11y: 'Ergebnisse von {{from}} bis {{to}} von {{itemsCount}}',\n\t},\n\ten: {\n\t\tresults: '{{from}} – {{to}} out of {{itemsCount}}',\n\t\tprevious: 'Previous',\n\t\tnext: 'Next',\n\t\tresultsA11y: 'Results from {{from}} to {{to}} out of {{itemsCount}}',\n\t},\n\tes: {\n\t\tresults: '{{from}} - {{to}} de {{itemsCount}}',\n\t\tprevious: 'Anterior',\n\t\tnext: 'Siguiente',\n\t\tresultsA11y: 'Resultados de {{from}} a {{to}} de {{itemsCount}}',\n\t},\n\tit: {\n\t\tresults: '{{from}} - {{to}} su {{itemsCount}}',\n\t\tprevious: 'Precedente',\n\t\tnext: 'Successivo',\n\t\tresultsA11y: 'Risultati da {{from}} a {{to}} su {{itemsCount}}',\n\t},\n\tnl: {\n\t\tresults: '{{from}} – {{to}} van {{itemsCount}}',\n\t\tprevious: 'Vorige',\n\t\tnext: 'Volgende',\n\t\tresultsA11y: 'Resultaten van {{from}} tot {{to}} in {{itemsCount}}',\n\t},\n\tpt: {\n\t\tresults: '{{from}} – {{to}} em {{itemsCount}}',\n\t\tprevious: 'Anterior',\n\t\tnext: 'Seguinte',\n\t\tresultsA11y: 'Resultados de {{from}} a {{to}} {{itemsCount}}',\n\t},\n};\n","import { InjectionToken } from '@angular/core';\nimport { LuTranslation } from '@lucca-front/ng/core';\nimport { Translations } from './translations';\n\nexport const LU_PAGINATION_TRANSLATIONS = new InjectionToken('LuPaginationTranslations', {\n\tfactory: () => luPaginationTranslations,\n});\n\nexport interface LuPaginationLabel {\n\tresults: string;\n\tprevious: string;\n\tnext: string;\n\tresultsA11y: string;\n}\n\nexport const luPaginationTranslations: LuTranslation<LuPaginationLabel> = Translations;\n","import { booleanAttribute, ChangeDetectionStrategy, Component, effect, input, output, ViewEncapsulation } from '@angular/core';\nimport { intlInputOptions, IntlParamsPipe } from '@lucca-front/ng/core';\nimport { IconComponent } from '@lucca-front/ng/icon';\nimport { LU_PAGINATION_TRANSLATIONS } from './pagination.translate';\n\n@Component({\n\tselector: 'lu-pagination',\n\ttemplateUrl: './pagination.component.html',\n\tstyleUrl: './pagination.component.scss',\n\timports: [IconComponent, IntlParamsPipe],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\tencapsulation: ViewEncapsulation.None,\n})\nexport class PaginationComponent {\n\treadonly intl = input(...intlInputOptions(LU_PAGINATION_TRANSLATIONS));\n\n\t/**\n\t * Disabled the previous page arrow\n\t */\n\treadonly isFirstPage = input(false, { transform: booleanAttribute });\n\n\t/**\n\t * Disabled the next page arrow\n\t */\n\treadonly isLastPage = input(false, { transform: booleanAttribute });\n\n\t/**\n\t * Where the pagination start\n\t */\n\treadonly from = input<number | null>();\n\n\t/**\n\t * Where the pagination end\n\t */\n\treadonly to = input<number | null>();\n\n\t/**\n\t * Total number of items in the pagination\n\t */\n\treadonly itemsCount = input<number | null>();\n\n\t/**\n\t * Pagination mod (default or compact)\n\t */\n\treadonly mod = input<'default' | 'compact'>('default');\n\n\t/**\n\t * Emit event when click on previous arrow\n\t */\n\treadonly previousPage = output<void>();\n\n\t/**\n\t * Emit event when click on next arrow\n\t */\n\treadonly nextPage = output<void>();\n\n\tconstructor() {\n\t\teffect(() => {\n\t\t\tif (this.mod() === 'default' && (this.from() === null || this.to() === null || this.itemsCount() === null)) {\n\t\t\t\tthrow new Error('Pagination in \"default\" mode requires \"from\", \"to\", and \"itemsCount\" inputs.');\n\t\t\t}\n\t\t});\n\t}\n}\n","<nav class=\"pagination\" role=\"navigation\" aria-label=\"pagination-count\" [class.mod-compact]=\"mod() === 'compact'\">\n\t@if (mod() === \"default\") {\n\t\t<div class=\"pagination-count\">\n\t\t\t<span class=\"pr-u-mask\"> {{ intl().resultsA11y | intlParams: { from: from(), to: to(), itemsCount: itemsCount() } }} </span>\n\t\t\t<span aria-hidden=\"true\"> {{ intl().results | intlParams: { from: from(), to: to(), itemsCount: itemsCount() } }} </span>\n\t\t</div>\n\t}\n\n\t<div class=\"pagination-scrolling\">\n\t\t<button type=\"button\"
|
|
1
|
+
{"version":3,"file":"lucca-front-ng-pagination.mjs","sources":["../../../packages/ng/pagination/translations.ts","../../../packages/ng/pagination/pagination.translate.ts","../../../packages/ng/pagination/pagination.component.ts","../../../packages/ng/pagination/pagination.component.html","../../../packages/ng/pagination/lucca-front-ng-pagination.ts"],"sourcesContent":["export const Translations = {\n\t'nl-BE': {\n\t\tresults: '{{from}} – {{to}} van {{itemsCount}}',\n\t\tprevious: 'Vorige',\n\t\tnext: 'Volgende',\n\t\tresultsA11y: 'Resultaten van {{from}} tot {{to}} in {{itemsCount}}',\n\t},\n\tfr: {\n\t\tresults: '{{from}} – {{to}} sur {{itemsCount}}',\n\t\tprevious: 'Précédent',\n\t\tnext: 'Suivant',\n\t\tresultsA11y: 'Résultats de {{from}} à {{to}} sur {{itemsCount}}',\n\t},\n\tde: {\n\t\tresults: '{{from}} – {{to}} von {{itemsCount}}',\n\t\tprevious: 'Zurück',\n\t\tnext: 'Weiter',\n\t\tresultsA11y: 'Ergebnisse von {{from}} bis {{to}} von {{itemsCount}}',\n\t},\n\ten: {\n\t\tresults: '{{from}} – {{to}} out of {{itemsCount}}',\n\t\tprevious: 'Previous',\n\t\tnext: 'Next',\n\t\tresultsA11y: 'Results from {{from}} to {{to}} out of {{itemsCount}}',\n\t},\n\tes: {\n\t\tresults: '{{from}} - {{to}} de {{itemsCount}}',\n\t\tprevious: 'Anterior',\n\t\tnext: 'Siguiente',\n\t\tresultsA11y: 'Resultados de {{from}} a {{to}} de {{itemsCount}}',\n\t},\n\tit: {\n\t\tresults: '{{from}} - {{to}} su {{itemsCount}}',\n\t\tprevious: 'Precedente',\n\t\tnext: 'Successivo',\n\t\tresultsA11y: 'Risultati da {{from}} a {{to}} su {{itemsCount}}',\n\t},\n\tnl: {\n\t\tresults: '{{from}} – {{to}} van {{itemsCount}}',\n\t\tprevious: 'Vorige',\n\t\tnext: 'Volgende',\n\t\tresultsA11y: 'Resultaten van {{from}} tot {{to}} in {{itemsCount}}',\n\t},\n\tpt: {\n\t\tresults: '{{from}} – {{to}} em {{itemsCount}}',\n\t\tprevious: 'Anterior',\n\t\tnext: 'Seguinte',\n\t\tresultsA11y: 'Resultados de {{from}} a {{to}} {{itemsCount}}',\n\t},\n};\n","import { InjectionToken } from '@angular/core';\nimport { LuTranslation } from '@lucca-front/ng/core';\nimport { Translations } from './translations';\n\nexport const LU_PAGINATION_TRANSLATIONS = new InjectionToken('LuPaginationTranslations', {\n\tfactory: () => luPaginationTranslations,\n});\n\nexport interface LuPaginationLabel {\n\tresults: string;\n\tprevious: string;\n\tnext: string;\n\tresultsA11y: string;\n}\n\nexport const luPaginationTranslations: LuTranslation<LuPaginationLabel> = Translations;\n","import { booleanAttribute, ChangeDetectionStrategy, Component, effect, input, output, ViewEncapsulation } from '@angular/core';\nimport { intlInputOptions, IntlParamsPipe } from '@lucca-front/ng/core';\nimport { IconComponent } from '@lucca-front/ng/icon';\nimport { ButtonComponent } from '@lucca-front/ng/button';\nimport { LU_PAGINATION_TRANSLATIONS } from './pagination.translate';\n\n@Component({\n\tselector: 'lu-pagination',\n\ttemplateUrl: './pagination.component.html',\n\tstyleUrl: './pagination.component.scss',\n\timports: [IconComponent, IntlParamsPipe, ButtonComponent],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\tencapsulation: ViewEncapsulation.None,\n})\nexport class PaginationComponent {\n\treadonly intl = input(...intlInputOptions(LU_PAGINATION_TRANSLATIONS));\n\n\t/**\n\t * Disabled the previous page arrow\n\t */\n\treadonly isFirstPage = input(false, { transform: booleanAttribute });\n\n\t/**\n\t * Disabled the next page arrow\n\t */\n\treadonly isLastPage = input(false, { transform: booleanAttribute });\n\n\t/**\n\t * Where the pagination start\n\t */\n\treadonly from = input<number | null>();\n\n\t/**\n\t * Where the pagination end\n\t */\n\treadonly to = input<number | null>();\n\n\t/**\n\t * Total number of items in the pagination\n\t */\n\treadonly itemsCount = input<number | null>();\n\n\t/**\n\t * Pagination mod (default or compact)\n\t */\n\treadonly mod = input<'default' | 'compact'>('default');\n\n\t/**\n\t * Emit event when click on previous arrow\n\t */\n\treadonly previousPage = output<void>();\n\n\t/**\n\t * Emit event when click on next arrow\n\t */\n\treadonly nextPage = output<void>();\n\n\tconstructor() {\n\t\teffect(() => {\n\t\t\tif (this.mod() === 'default' && (this.from() === null || this.to() === null || this.itemsCount() === null)) {\n\t\t\t\tthrow new Error('Pagination in \"default\" mode requires \"from\", \"to\", and \"itemsCount\" inputs.');\n\t\t\t}\n\t\t});\n\t}\n}\n","<nav class=\"pagination\" role=\"navigation\" aria-label=\"pagination-count\" [class.mod-compact]=\"mod() === 'compact'\">\n\t@if (mod() === \"default\") {\n\t\t<div class=\"pagination-count\">\n\t\t\t<span class=\"pr-u-mask\"> {{ intl().resultsA11y | intlParams: { from: from(), to: to(), itemsCount: itemsCount() } }} </span>\n\t\t\t<span aria-hidden=\"true\"> {{ intl().results | intlParams: { from: from(), to: to(), itemsCount: itemsCount() } }} </span>\n\t\t</div>\n\t}\n\n\t<div class=\"pagination-scrolling\">\n\t\t<button type=\"button\" luButton=\"ghost\" size=\"S\" [disabled]=\"isFirstPage()\" (click)=\"previousPage.emit()\">\n\t\t\t<lu-icon icon=\"arrowChevronLeft\" />\n\t\t\t<span class=\"pr-u-mask\">{{ intl().previous }}</span>\n\t\t</button>\n\t\t<button type=\"button\" luButton=\"ghost\" size=\"S\" [disabled]=\"isLastPage()\" (click)=\"nextPage.emit()\">\n\t\t\t<lu-icon icon=\"arrowChevronRight\" />\n\t\t\t<span class=\"pr-u-mask\">{{ intl().next }}</span>\n\t\t</button>\n\t</div>\n</nav>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -84,7 +84,7 @@ class SegmentedControlTabsComponent {
|
|
|
84
84
|
provide: LU_SEGMENTEDCONTROLTABS_INSTANCE,
|
|
85
85
|
useExisting: forwardRef(() => SegmentedControlTabsComponent),
|
|
86
86
|
},
|
|
87
|
-
], queries: [{ propertyName: "tabs", predicate: SegmentedControlTabsPanelComponent, isSignal: true }], viewQueries: [{ propertyName: "tabButtons", predicate: ["tabButton"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.NoopValueAccessorDirective }], ngImport: i0, template: "<ul class=\"segmentedControl\" role=\"tablist\" [class.mod-S]=\"small()\" [class.mod-vertical]=\"vertical()\">\n\t@for (panel of tabs(); track panel.id) {\n\t\t<li class=\"segmentedControl-item\" role=\"presentation\">\n\t\t\t<button\n\t\t\t\t#tabButton\n\t\t\t\tclass=\"segmentedControl-item-action\"\n\t\t\t\ttype=\"button\"\n\t\t\t\trole=\"tab\"\n\t\t\t\t[attr.id]=\"panel.labelId\"\n\t\t\t\t[attr.aria-controls]=\"panel.value()\"\n\t\t\t\t[attr.aria-selected]=\"active() === panel.value()\"\n\t\t\t\t[attr.tabindex]=\"active() !== panel.value() ? '-1' : null\"\n\t\t\t\t(click)=\"active.set(panel.value())\"\n\t\t\t\t(keydown.arrowleft)=\"$event.preventDefault(); previous()\"\n\t\t\t\t(keydown.arrowup)=\"$event.preventDefault(); previous()\"\n\t\t\t\t(keydown.arrowright)=\"$event.preventDefault(); next()\"\n\t\t\t\t(keydown.arrowdown)=\"$event.preventDefault(); next()\"\n\t\t\t>\n\t\t\t\t<ng-container *luPortal=\"panel.label()\" />\n\t\t\t</button>\n\t\t</li>\n\t}\n</ul>\n<ng-content />\n", styles: ["@layer components{.segmentedControl,.viewTabs{--components-segmentedControl-borderRadius: var(--pr-t-border-radius-default);--components-segmentedControl-padding: var(--pr-t-spacings-100) var(--pr-t-spacings-200);--components-segmentedControl-font: var(--pr-t-font-body-M);--components-segmentedControl-background: transparent;--components-segmentedControl-shadow: none;--components-segmentedControl-color: var(--pr-t-color-text);--components-segmentedControl-cursor: pointer;--components-segmentedControl-dividerInset: var(--pr-t-spacings-100);--components-segmentedControl-direction: row;--components-segmentedControl-width: fit-content;--components-segmentedControl-zIndex: 0;--components-segmentedControl-wrap: wrap;--components-segmentedControl-whiteSpace: normal;padding:0;margin:0;list-style-type:none;display:flex;flex-wrap:var(--components-segmentedControl-wrap);inline-size:var(--components-segmentedControl-width);flex-direction:var(--components-segmentedControl-direction);box-shadow:0 0 0 var(--commons-divider-width) var(--palettes-neutral-100);border-radius:var(--components-segmentedControl-borderRadius);background-color:var(--palettes-neutral-0);font:var(--components-segmentedControl-font);gap:var(--commons-divider-width);white-space:var(--components-segmentedControl-whiteSpace)}.segmentedControl-item-input{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.segmentedControl-item-input:focus-visible+.segmentedControl-item-action{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.segmentedControl-item,.viewTabs-item{flex-grow:1;position:relative;z-index:1}.segmentedControl-item:before,.segmentedControl-item:after,.viewTabs-item:before,.viewTabs-item:after{content:\"\";border-width:0;inset:var(--components-segmentedControl-dividerInset);border-color:var(--palettes-neutral-100);position:absolute;border-style:solid}.segmentedControl-item:before,.viewTabs-item:before{inset-inline-end:calc(var(--commons-divider-width) * -1);border-inline-start-width:var(--commons-divider-width);inset-inline-start:auto}.segmentedControl-item:after,.viewTabs-item:after{inset-block-end:calc(var(--commons-divider-width) * -1);border-block-start-width:var(--commons-divider-width);inset-block-start:auto}.segmentedControl-item-action,.viewTabs-item-tab{inline-size:100%;border:0;margin:0;padding:var(--components-segmentedControl-padding);background-color:var(--components-segmentedControl-background);box-shadow:var(--components-segmentedControl-shadow);border-radius:var(--components-segmentedControl-borderRadius);gap:var(--pr-t-spacings-100);color:var(--components-segmentedControl-color);text-align:center;justify-content:center;display:flex;align-items:center;position:relative;cursor:var(--components-segmentedControl-cursor);z-index:var(--components-segmentedControl-zIndex);font:inherit;transition-property:box-shadow;transition-duration:var(--commons-animations-durations-fast)}.segmentedControl-item-action:focus-visible,.viewTabs-item-tab:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.segmentedControl-item-action:hover,.viewTabs-item-tab:hover{--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-product-400), var(--pr-t-elevation-shadow-raised);--components-segmentedControl-zIndex: 1}.segmentedControl-item-action:active,.viewTabs-item-tab:active{--components-segmentedControl-background: var(--palettes-neutral-0);--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-product-500), var(--pr-t-elevation-shadow-raised)}.segmentedControl_panel,.viewTabs_panel{display:var(--components-segmentedControl-display, block);border-radius:var(--pr-t-border-radius-default)}.segmentedControl_panel:focus-visible,.viewTabs_panel:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}}@layer mods{.segmentedControl.mod-S,.viewTabs.mod-S{--components-segmentedControl-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-150);--components-segmentedControl-font: var(--pr-t-font-body-S);--components-segmentedControl-dividerInset: var(--pr-t-spacings-75)}.segmentedControl.mod-S .numericBadge,.viewTabs.mod-S .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.segmentedControl.mod-vertical,.viewTabs.mod-vertical{--components-segmentedControl-direction: column;--components-segmentedControl-width: auto}@media not all and (min-width:30em){.segmentedControl,.viewTabs{--components-segmentedControl-direction: column;--components-segmentedControl-width: auto}}}@layer mods{.segmentedControl-item-input:checked+.segmentedControl-item-action,.segmentedControl-item-action[aria-selected=true],.segmentedControl-item-input:checked+.viewTabs-item-tab,.viewTabs-item-tab[aria-selected=true]{--components-segmentedControl-background: var(--palettes-product-50);--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-product-500);--components-segmentedControl-color: var(--palettes-product-800);--components-segmentedControl-cursor: default;--components-segmentedControl-backgroundContent: none;--components-segmentedControl-zIndex: 1}.segmentedControl-item-input:checked+.segmentedControl-item-action .numericBadge,.segmentedControl-item-action[aria-selected=true] .numericBadge,.segmentedControl-item-input:checked+.viewTabs-item-tab .numericBadge,.viewTabs-item-tab[aria-selected=true] .numericBadge{--components-numericBadge-background: var(--palettes-200, var(--palettes-product-200));--components-numericBadge-color: var(--palettes-800, var(--palettes-product-800))}.segmentedControl-item-input:checked+.segmentedControl-item-action .numericBadge.is-loading,.segmentedControl-item-action[aria-selected=true] .numericBadge.is-loading,.segmentedControl-item-input:checked+.viewTabs-item-tab .numericBadge.is-loading,.viewTabs-item-tab[aria-selected=true] .numericBadge.is-loading{--components-numericBadge-loadingColor: var(--palettes-product-500);--components-numericBadge-color: transparent}.segmentedControl-item-action:disabled,.segmentedControl-item-input:disabled~.segmentedControl-item-action{--components-segmentedControl-background: var(--palettes-neutral-100);--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-neutral-200);--components-segmentedControl-color: var(--pr-t-color-text-disabled);--components-segmentedControl-cursor: default}.segmentedControl-item-action:disabled .numericBadge,.segmentedControl-item-input:disabled~.segmentedControl-item-action .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}.segmentedControl-item-action:disabled .numericBadge.is-loading,.segmentedControl-item-input:disabled~.segmentedControl-item-action .numericBadge.is-loading{--components-numericBadge-color: transparent}.segmentedControl_panel:not(.is-active,.active),.viewTabs_panel:not(.is-active,.active){--components-segmentedControl-display: none}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
87
|
+
], queries: [{ propertyName: "tabs", predicate: SegmentedControlTabsPanelComponent, isSignal: true }], viewQueries: [{ propertyName: "tabButtons", predicate: ["tabButton"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.NoopValueAccessorDirective }], ngImport: i0, template: "<ul class=\"segmentedControl\" role=\"tablist\" [class.mod-S]=\"small()\" [class.mod-vertical]=\"vertical()\">\n\t@for (panel of tabs(); track panel.id) {\n\t\t<li class=\"segmentedControl-item\" role=\"presentation\">\n\t\t\t<button\n\t\t\t\t#tabButton\n\t\t\t\tclass=\"segmentedControl-item-action\"\n\t\t\t\ttype=\"button\"\n\t\t\t\trole=\"tab\"\n\t\t\t\t[attr.id]=\"panel.labelId\"\n\t\t\t\t[attr.aria-controls]=\"panel.value()\"\n\t\t\t\t[attr.aria-selected]=\"active() === panel.value()\"\n\t\t\t\t[attr.tabindex]=\"active() !== panel.value() ? '-1' : null\"\n\t\t\t\t(click)=\"active.set(panel.value())\"\n\t\t\t\t(keydown.arrowleft)=\"$event.preventDefault(); previous()\"\n\t\t\t\t(keydown.arrowup)=\"$event.preventDefault(); previous()\"\n\t\t\t\t(keydown.arrowright)=\"$event.preventDefault(); next()\"\n\t\t\t\t(keydown.arrowdown)=\"$event.preventDefault(); next()\"\n\t\t\t>\n\t\t\t\t<ng-container *luPortal=\"panel.label()\" />\n\t\t\t</button>\n\t\t</li>\n\t}\n</ul>\n<ng-content />\n", styles: ["@layer components{.segmentedControl,.viewTabs{--components-segmentedControl-borderRadius: var(--pr-t-border-radius-default);--components-segmentedControl-padding: var(--pr-t-spacings-100) var(--pr-t-spacings-200);--components-segmentedControl-font: var(--pr-t-font-body-M);--components-segmentedControl-background: transparent;--components-segmentedControl-shadow: none;--components-segmentedControl-color: var(--pr-t-color-text);--components-segmentedControl-cursor: pointer;--components-segmentedControl-dividerInset: var(--pr-t-spacings-100);--components-segmentedControl-direction: row;--components-segmentedControl-width: fit-content;--components-segmentedControl-zIndex: 0;--components-segmentedControl-wrap: wrap;--components-segmentedControl-whiteSpace: normal;padding:0;margin:0;list-style-type:none;display:flex;flex-wrap:var(--components-segmentedControl-wrap);inline-size:var(--components-segmentedControl-width);flex-direction:var(--components-segmentedControl-direction);box-shadow:0 0 0 var(--commons-divider-width) var(--palettes-neutral-100);border-radius:var(--components-segmentedControl-borderRadius);background-color:var(--palettes-neutral-0);font:var(--components-segmentedControl-font);gap:var(--commons-divider-width);white-space:var(--components-segmentedControl-whiteSpace)}.segmentedControl-item-input{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.segmentedControl-item-input:focus-visible+.segmentedControl-item-action{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.segmentedControl-item,.viewTabs-item{flex-grow:1;position:relative;z-index:1}.segmentedControl-item:before,.segmentedControl-item:after,.viewTabs-item:before,.viewTabs-item:after{content:\"\";border-width:0;inset:var(--components-segmentedControl-dividerInset);border-color:var(--palettes-neutral-100);position:absolute;border-style:solid}.segmentedControl-item:before,.viewTabs-item:before{inset-inline-end:calc(var(--commons-divider-width) * -1);border-inline-start-width:var(--commons-divider-width);inset-inline-start:auto}.segmentedControl-item:after,.viewTabs-item:after{inset-block-end:calc(var(--commons-divider-width) * -1);border-block-start-width:var(--commons-divider-width);inset-block-start:auto}.segmentedControl-item-action,.viewTabs-item-tab{inline-size:100%;border:0;margin:0;padding:var(--components-segmentedControl-padding);background-color:var(--components-segmentedControl-background);box-shadow:var(--components-segmentedControl-shadow);border-radius:var(--components-segmentedControl-borderRadius);gap:var(--pr-t-spacings-100);color:var(--components-segmentedControl-color);text-align:center;justify-content:center;display:flex;align-items:center;position:relative;cursor:var(--components-segmentedControl-cursor);z-index:var(--components-segmentedControl-zIndex);font:inherit;transition-property:box-shadow;transition-duration:var(--commons-animations-durations-fast)}.segmentedControl-item-action:focus-visible,.viewTabs-item-tab:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.segmentedControl-item-action:hover,.viewTabs-item-tab:hover{--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-400, var(--palettes-product-400)), var(--pr-t-elevation-shadow-raised);--components-segmentedControl-zIndex: 1}.segmentedControl-item-action:active,.viewTabs-item-tab:active{--components-segmentedControl-background: var(--palettes-neutral-0);--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-500, var(--palettes-product-500)), var(--pr-t-elevation-shadow-raised)}.segmentedControl_panel,.viewTabs_panel{display:var(--components-segmentedControl-display, block);border-radius:var(--pr-t-border-radius-default)}.segmentedControl_panel:focus-visible,.viewTabs_panel:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}}@layer mods{.segmentedControl.mod-S,.viewTabs.mod-S{--components-segmentedControl-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-150);--components-segmentedControl-font: var(--pr-t-font-body-S);--components-segmentedControl-dividerInset: var(--pr-t-spacings-75)}.segmentedControl.mod-S .numericBadge,.viewTabs.mod-S .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.segmentedControl.mod-vertical,.viewTabs.mod-vertical{--components-segmentedControl-direction: column;--components-segmentedControl-width: auto}@media not all and (min-width:30em){.segmentedControl,.viewTabs{--components-segmentedControl-direction: column;--components-segmentedControl-width: auto}}}@layer mods{.segmentedControl-item-input:checked+.segmentedControl-item-action,.segmentedControl-item-action[aria-selected=true],.segmentedControl-item-input:checked+.viewTabs-item-tab,.viewTabs-item-tab[aria-selected=true]{--components-segmentedControl-background: var(--palettes-50, var(--palettes-product-50));--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-500, var(--palettes-product-500));--components-segmentedControl-color: var(--palettes-800, var(--palettes-product-800));--components-segmentedControl-cursor: default;--components-segmentedControl-backgroundContent: none;--components-segmentedControl-zIndex: 1}.segmentedControl-item-input:checked+.segmentedControl-item-action .numericBadge,.segmentedControl-item-action[aria-selected=true] .numericBadge,.segmentedControl-item-input:checked+.viewTabs-item-tab .numericBadge,.viewTabs-item-tab[aria-selected=true] .numericBadge{--components-numericBadge-background: var(--palettes-200, var(--palettes-product-200));--components-numericBadge-color: var(--palettes-800, var(--palettes-product-800))}.segmentedControl-item-input:checked+.segmentedControl-item-action .numericBadge.is-loading,.segmentedControl-item-action[aria-selected=true] .numericBadge.is-loading,.segmentedControl-item-input:checked+.viewTabs-item-tab .numericBadge.is-loading,.viewTabs-item-tab[aria-selected=true] .numericBadge.is-loading{--components-numericBadge-loadingColor: var(--palettes-500, var(--palettes-product-500));--components-numericBadge-color: transparent}.segmentedControl-item-action:disabled,.segmentedControl-item-input:disabled~.segmentedControl-item-action{--components-segmentedControl-background: var(--palettes-neutral-100);--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-neutral-200);--components-segmentedControl-color: var(--pr-t-color-text-disabled);--components-segmentedControl-cursor: default}.segmentedControl-item-action:disabled .numericBadge,.segmentedControl-item-input:disabled~.segmentedControl-item-action .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}.segmentedControl-item-action:disabled .numericBadge.is-loading,.segmentedControl-item-input:disabled~.segmentedControl-item-action .numericBadge.is-loading{--components-numericBadge-color: transparent}.segmentedControl_panel:not(.is-active,.active),.viewTabs_panel:not(.is-active,.active){--components-segmentedControl-display: none}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
88
88
|
}
|
|
89
89
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SegmentedControlTabsComponent, decorators: [{
|
|
90
90
|
type: Component,
|
|
@@ -93,7 +93,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
93
93
|
provide: LU_SEGMENTEDCONTROLTABS_INSTANCE,
|
|
94
94
|
useExisting: forwardRef(() => SegmentedControlTabsComponent),
|
|
95
95
|
},
|
|
96
|
-
], template: "<ul class=\"segmentedControl\" role=\"tablist\" [class.mod-S]=\"small()\" [class.mod-vertical]=\"vertical()\">\n\t@for (panel of tabs(); track panel.id) {\n\t\t<li class=\"segmentedControl-item\" role=\"presentation\">\n\t\t\t<button\n\t\t\t\t#tabButton\n\t\t\t\tclass=\"segmentedControl-item-action\"\n\t\t\t\ttype=\"button\"\n\t\t\t\trole=\"tab\"\n\t\t\t\t[attr.id]=\"panel.labelId\"\n\t\t\t\t[attr.aria-controls]=\"panel.value()\"\n\t\t\t\t[attr.aria-selected]=\"active() === panel.value()\"\n\t\t\t\t[attr.tabindex]=\"active() !== panel.value() ? '-1' : null\"\n\t\t\t\t(click)=\"active.set(panel.value())\"\n\t\t\t\t(keydown.arrowleft)=\"$event.preventDefault(); previous()\"\n\t\t\t\t(keydown.arrowup)=\"$event.preventDefault(); previous()\"\n\t\t\t\t(keydown.arrowright)=\"$event.preventDefault(); next()\"\n\t\t\t\t(keydown.arrowdown)=\"$event.preventDefault(); next()\"\n\t\t\t>\n\t\t\t\t<ng-container *luPortal=\"panel.label()\" />\n\t\t\t</button>\n\t\t</li>\n\t}\n</ul>\n<ng-content />\n", styles: ["@layer components{.segmentedControl,.viewTabs{--components-segmentedControl-borderRadius: var(--pr-t-border-radius-default);--components-segmentedControl-padding: var(--pr-t-spacings-100) var(--pr-t-spacings-200);--components-segmentedControl-font: var(--pr-t-font-body-M);--components-segmentedControl-background: transparent;--components-segmentedControl-shadow: none;--components-segmentedControl-color: var(--pr-t-color-text);--components-segmentedControl-cursor: pointer;--components-segmentedControl-dividerInset: var(--pr-t-spacings-100);--components-segmentedControl-direction: row;--components-segmentedControl-width: fit-content;--components-segmentedControl-zIndex: 0;--components-segmentedControl-wrap: wrap;--components-segmentedControl-whiteSpace: normal;padding:0;margin:0;list-style-type:none;display:flex;flex-wrap:var(--components-segmentedControl-wrap);inline-size:var(--components-segmentedControl-width);flex-direction:var(--components-segmentedControl-direction);box-shadow:0 0 0 var(--commons-divider-width) var(--palettes-neutral-100);border-radius:var(--components-segmentedControl-borderRadius);background-color:var(--palettes-neutral-0);font:var(--components-segmentedControl-font);gap:var(--commons-divider-width);white-space:var(--components-segmentedControl-whiteSpace)}.segmentedControl-item-input{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.segmentedControl-item-input:focus-visible+.segmentedControl-item-action{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.segmentedControl-item,.viewTabs-item{flex-grow:1;position:relative;z-index:1}.segmentedControl-item:before,.segmentedControl-item:after,.viewTabs-item:before,.viewTabs-item:after{content:\"\";border-width:0;inset:var(--components-segmentedControl-dividerInset);border-color:var(--palettes-neutral-100);position:absolute;border-style:solid}.segmentedControl-item:before,.viewTabs-item:before{inset-inline-end:calc(var(--commons-divider-width) * -1);border-inline-start-width:var(--commons-divider-width);inset-inline-start:auto}.segmentedControl-item:after,.viewTabs-item:after{inset-block-end:calc(var(--commons-divider-width) * -1);border-block-start-width:var(--commons-divider-width);inset-block-start:auto}.segmentedControl-item-action,.viewTabs-item-tab{inline-size:100%;border:0;margin:0;padding:var(--components-segmentedControl-padding);background-color:var(--components-segmentedControl-background);box-shadow:var(--components-segmentedControl-shadow);border-radius:var(--components-segmentedControl-borderRadius);gap:var(--pr-t-spacings-100);color:var(--components-segmentedControl-color);text-align:center;justify-content:center;display:flex;align-items:center;position:relative;cursor:var(--components-segmentedControl-cursor);z-index:var(--components-segmentedControl-zIndex);font:inherit;transition-property:box-shadow;transition-duration:var(--commons-animations-durations-fast)}.segmentedControl-item-action:focus-visible,.viewTabs-item-tab:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.segmentedControl-item-action:hover,.viewTabs-item-tab:hover{--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-product-400), var(--pr-t-elevation-shadow-raised);--components-segmentedControl-zIndex: 1}.segmentedControl-item-action:active,.viewTabs-item-tab:active{--components-segmentedControl-background: var(--palettes-neutral-0);--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-product-500), var(--pr-t-elevation-shadow-raised)}.segmentedControl_panel,.viewTabs_panel{display:var(--components-segmentedControl-display, block);border-radius:var(--pr-t-border-radius-default)}.segmentedControl_panel:focus-visible,.viewTabs_panel:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}}@layer mods{.segmentedControl.mod-S,.viewTabs.mod-S{--components-segmentedControl-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-150);--components-segmentedControl-font: var(--pr-t-font-body-S);--components-segmentedControl-dividerInset: var(--pr-t-spacings-75)}.segmentedControl.mod-S .numericBadge,.viewTabs.mod-S .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.segmentedControl.mod-vertical,.viewTabs.mod-vertical{--components-segmentedControl-direction: column;--components-segmentedControl-width: auto}@media not all and (min-width:30em){.segmentedControl,.viewTabs{--components-segmentedControl-direction: column;--components-segmentedControl-width: auto}}}@layer mods{.segmentedControl-item-input:checked+.segmentedControl-item-action,.segmentedControl-item-action[aria-selected=true],.segmentedControl-item-input:checked+.viewTabs-item-tab,.viewTabs-item-tab[aria-selected=true]{--components-segmentedControl-background: var(--palettes-product-50);--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-product-500);--components-segmentedControl-color: var(--palettes-product-800);--components-segmentedControl-cursor: default;--components-segmentedControl-backgroundContent: none;--components-segmentedControl-zIndex: 1}.segmentedControl-item-input:checked+.segmentedControl-item-action .numericBadge,.segmentedControl-item-action[aria-selected=true] .numericBadge,.segmentedControl-item-input:checked+.viewTabs-item-tab .numericBadge,.viewTabs-item-tab[aria-selected=true] .numericBadge{--components-numericBadge-background: var(--palettes-200, var(--palettes-product-200));--components-numericBadge-color: var(--palettes-800, var(--palettes-product-800))}.segmentedControl-item-input:checked+.segmentedControl-item-action .numericBadge.is-loading,.segmentedControl-item-action[aria-selected=true] .numericBadge.is-loading,.segmentedControl-item-input:checked+.viewTabs-item-tab .numericBadge.is-loading,.viewTabs-item-tab[aria-selected=true] .numericBadge.is-loading{--components-numericBadge-loadingColor: var(--palettes-product-500);--components-numericBadge-color: transparent}.segmentedControl-item-action:disabled,.segmentedControl-item-input:disabled~.segmentedControl-item-action{--components-segmentedControl-background: var(--palettes-neutral-100);--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-neutral-200);--components-segmentedControl-color: var(--pr-t-color-text-disabled);--components-segmentedControl-cursor: default}.segmentedControl-item-action:disabled .numericBadge,.segmentedControl-item-input:disabled~.segmentedControl-item-action .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}.segmentedControl-item-action:disabled .numericBadge.is-loading,.segmentedControl-item-input:disabled~.segmentedControl-item-action .numericBadge.is-loading{--components-numericBadge-color: transparent}.segmentedControl_panel:not(.is-active,.active),.viewTabs_panel:not(.is-active,.active){--components-segmentedControl-display: none}}\n"] }]
|
|
96
|
+
], template: "<ul class=\"segmentedControl\" role=\"tablist\" [class.mod-S]=\"small()\" [class.mod-vertical]=\"vertical()\">\n\t@for (panel of tabs(); track panel.id) {\n\t\t<li class=\"segmentedControl-item\" role=\"presentation\">\n\t\t\t<button\n\t\t\t\t#tabButton\n\t\t\t\tclass=\"segmentedControl-item-action\"\n\t\t\t\ttype=\"button\"\n\t\t\t\trole=\"tab\"\n\t\t\t\t[attr.id]=\"panel.labelId\"\n\t\t\t\t[attr.aria-controls]=\"panel.value()\"\n\t\t\t\t[attr.aria-selected]=\"active() === panel.value()\"\n\t\t\t\t[attr.tabindex]=\"active() !== panel.value() ? '-1' : null\"\n\t\t\t\t(click)=\"active.set(panel.value())\"\n\t\t\t\t(keydown.arrowleft)=\"$event.preventDefault(); previous()\"\n\t\t\t\t(keydown.arrowup)=\"$event.preventDefault(); previous()\"\n\t\t\t\t(keydown.arrowright)=\"$event.preventDefault(); next()\"\n\t\t\t\t(keydown.arrowdown)=\"$event.preventDefault(); next()\"\n\t\t\t>\n\t\t\t\t<ng-container *luPortal=\"panel.label()\" />\n\t\t\t</button>\n\t\t</li>\n\t}\n</ul>\n<ng-content />\n", styles: ["@layer components{.segmentedControl,.viewTabs{--components-segmentedControl-borderRadius: var(--pr-t-border-radius-default);--components-segmentedControl-padding: var(--pr-t-spacings-100) var(--pr-t-spacings-200);--components-segmentedControl-font: var(--pr-t-font-body-M);--components-segmentedControl-background: transparent;--components-segmentedControl-shadow: none;--components-segmentedControl-color: var(--pr-t-color-text);--components-segmentedControl-cursor: pointer;--components-segmentedControl-dividerInset: var(--pr-t-spacings-100);--components-segmentedControl-direction: row;--components-segmentedControl-width: fit-content;--components-segmentedControl-zIndex: 0;--components-segmentedControl-wrap: wrap;--components-segmentedControl-whiteSpace: normal;padding:0;margin:0;list-style-type:none;display:flex;flex-wrap:var(--components-segmentedControl-wrap);inline-size:var(--components-segmentedControl-width);flex-direction:var(--components-segmentedControl-direction);box-shadow:0 0 0 var(--commons-divider-width) var(--palettes-neutral-100);border-radius:var(--components-segmentedControl-borderRadius);background-color:var(--palettes-neutral-0);font:var(--components-segmentedControl-font);gap:var(--commons-divider-width);white-space:var(--components-segmentedControl-whiteSpace)}.segmentedControl-item-input{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.segmentedControl-item-input:focus-visible+.segmentedControl-item-action{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.segmentedControl-item,.viewTabs-item{flex-grow:1;position:relative;z-index:1}.segmentedControl-item:before,.segmentedControl-item:after,.viewTabs-item:before,.viewTabs-item:after{content:\"\";border-width:0;inset:var(--components-segmentedControl-dividerInset);border-color:var(--palettes-neutral-100);position:absolute;border-style:solid}.segmentedControl-item:before,.viewTabs-item:before{inset-inline-end:calc(var(--commons-divider-width) * -1);border-inline-start-width:var(--commons-divider-width);inset-inline-start:auto}.segmentedControl-item:after,.viewTabs-item:after{inset-block-end:calc(var(--commons-divider-width) * -1);border-block-start-width:var(--commons-divider-width);inset-block-start:auto}.segmentedControl-item-action,.viewTabs-item-tab{inline-size:100%;border:0;margin:0;padding:var(--components-segmentedControl-padding);background-color:var(--components-segmentedControl-background);box-shadow:var(--components-segmentedControl-shadow);border-radius:var(--components-segmentedControl-borderRadius);gap:var(--pr-t-spacings-100);color:var(--components-segmentedControl-color);text-align:center;justify-content:center;display:flex;align-items:center;position:relative;cursor:var(--components-segmentedControl-cursor);z-index:var(--components-segmentedControl-zIndex);font:inherit;transition-property:box-shadow;transition-duration:var(--commons-animations-durations-fast)}.segmentedControl-item-action:focus-visible,.viewTabs-item-tab:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.segmentedControl-item-action:hover,.viewTabs-item-tab:hover{--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-400, var(--palettes-product-400)), var(--pr-t-elevation-shadow-raised);--components-segmentedControl-zIndex: 1}.segmentedControl-item-action:active,.viewTabs-item-tab:active{--components-segmentedControl-background: var(--palettes-neutral-0);--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-500, var(--palettes-product-500)), var(--pr-t-elevation-shadow-raised)}.segmentedControl_panel,.viewTabs_panel{display:var(--components-segmentedControl-display, block);border-radius:var(--pr-t-border-radius-default)}.segmentedControl_panel:focus-visible,.viewTabs_panel:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}}@layer mods{.segmentedControl.mod-S,.viewTabs.mod-S{--components-segmentedControl-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-150);--components-segmentedControl-font: var(--pr-t-font-body-S);--components-segmentedControl-dividerInset: var(--pr-t-spacings-75)}.segmentedControl.mod-S .numericBadge,.viewTabs.mod-S .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.segmentedControl.mod-vertical,.viewTabs.mod-vertical{--components-segmentedControl-direction: column;--components-segmentedControl-width: auto}@media not all and (min-width:30em){.segmentedControl,.viewTabs{--components-segmentedControl-direction: column;--components-segmentedControl-width: auto}}}@layer mods{.segmentedControl-item-input:checked+.segmentedControl-item-action,.segmentedControl-item-action[aria-selected=true],.segmentedControl-item-input:checked+.viewTabs-item-tab,.viewTabs-item-tab[aria-selected=true]{--components-segmentedControl-background: var(--palettes-50, var(--palettes-product-50));--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-500, var(--palettes-product-500));--components-segmentedControl-color: var(--palettes-800, var(--palettes-product-800));--components-segmentedControl-cursor: default;--components-segmentedControl-backgroundContent: none;--components-segmentedControl-zIndex: 1}.segmentedControl-item-input:checked+.segmentedControl-item-action .numericBadge,.segmentedControl-item-action[aria-selected=true] .numericBadge,.segmentedControl-item-input:checked+.viewTabs-item-tab .numericBadge,.viewTabs-item-tab[aria-selected=true] .numericBadge{--components-numericBadge-background: var(--palettes-200, var(--palettes-product-200));--components-numericBadge-color: var(--palettes-800, var(--palettes-product-800))}.segmentedControl-item-input:checked+.segmentedControl-item-action .numericBadge.is-loading,.segmentedControl-item-action[aria-selected=true] .numericBadge.is-loading,.segmentedControl-item-input:checked+.viewTabs-item-tab .numericBadge.is-loading,.viewTabs-item-tab[aria-selected=true] .numericBadge.is-loading{--components-numericBadge-loadingColor: var(--palettes-500, var(--palettes-product-500));--components-numericBadge-color: transparent}.segmentedControl-item-action:disabled,.segmentedControl-item-input:disabled~.segmentedControl-item-action{--components-segmentedControl-background: var(--palettes-neutral-100);--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-neutral-200);--components-segmentedControl-color: var(--pr-t-color-text-disabled);--components-segmentedControl-cursor: default}.segmentedControl-item-action:disabled .numericBadge,.segmentedControl-item-input:disabled~.segmentedControl-item-action .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}.segmentedControl-item-action:disabled .numericBadge.is-loading,.segmentedControl-item-input:disabled~.segmentedControl-item-action .numericBadge.is-loading{--components-numericBadge-color: transparent}.segmentedControl_panel:not(.is-active,.active),.viewTabs_panel:not(.is-active,.active){--components-segmentedControl-display: none}}\n"] }]
|
|
97
97
|
}], propDecorators: { small: [{ type: i0.Input, args: [{ isSignal: true, alias: "small", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SegmentedControlTabsPanelComponent), { isSignal: true }] }], tabButtons: [{ type: i0.ViewChildren, args: ['tabButton', { isSignal: true }] }] } });
|
|
98
98
|
|
|
99
99
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lucca-front-ng-segmented-control-tabs.mjs","sources":["../../../packages/ng/segmented-control-tabs/segmented-control-tabs.token.ts","../../../packages/ng/segmented-control-tabs/panel/panel.component.ts","../../../packages/ng/segmented-control-tabs/segmented-control-tabs.component.ts","../../../packages/ng/segmented-control-tabs/segmented-control-tabs.component.html","../../../packages/ng/segmented-control-tabs/lucca-front-ng-segmented-control-tabs.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\nimport { SegmentedControlTabsComponent } from './segmented-control-tabs.component';\n\nexport const LU_SEGMENTEDCONTROLTABS_INSTANCE = new InjectionToken<SegmentedControlTabsComponent>('LU_SEGMENTEDCONTROLTABS_INSTANCE');\n","import { ChangeDetectionStrategy, Component, inject, input, ViewEncapsulation } from '@angular/core';\nimport { PortalContent } from '@lucca-front/ng/core';\nimport { LU_SEGMENTEDCONTROLTABS_INSTANCE } from '../segmented-control-tabs.token';\n\nlet nextId = 0;\n\n@Component({\n\tselector: 'lu-segmented-control-tabs-panel',\n\ttemplate: '<ng-content />',\n\tencapsulation: ViewEncapsulation.None,\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: {\n\t\tclass: 'segmentedControl_panel',\n\t\trole: 'tabpanel',\n\t\t'[tabindex]': '0',\n\t\t'[class.is-active]': 'segmentedControlTabsRef.active() === value()',\n\t\t'[id]': 'panelId',\n\t\t'[attr.aria-labelledby]': 'labelId',\n\t},\n})\nexport class SegmentedControlTabsPanelComponent<T = unknown> {\n\tprotected segmentedControlTabsRef = inject(LU_SEGMENTEDCONTROLTABS_INSTANCE);\n\n\treadonly label = input<PortalContent>();\n\n\treadonly value = input.required<T>();\n\n\treadonly id = nextId++;\n\n\treadonly panelId = `panel${this.id}`;\n\treadonly labelId = `tab${this.id}`;\n}\n","import {\n\tAfterContentInit,\n\tbooleanAttribute,\n\tChangeDetectionStrategy,\n\tComponent,\n\tcomputed,\n\tcontentChildren,\n\tElementRef,\n\tforwardRef,\n\tinput,\n\tmodel,\n\tviewChildren,\n\tViewEncapsulation,\n} from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { PortalDirective } from '@lucca-front/ng/core';\nimport { NoopValueAccessorDirective } from '@lucca-front/ng/forms';\nimport { SegmentedControlTabsPanelComponent } from './public-api';\nimport { LU_SEGMENTEDCONTROLTABS_INSTANCE } from './segmented-control-tabs.token';\n\nlet nextId = 0;\n\n@Component({\n\tselector: 'lu-segmented-control-tabs',\n\ttemplateUrl: './segmented-control-tabs.component.html',\n\tstyleUrl: './segmented-control-tabs.component.scss',\n\tencapsulation: ViewEncapsulation.None,\n\timports: [ReactiveFormsModule, PortalDirective],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thostDirectives: [NoopValueAccessorDirective],\n\tproviders: [\n\t\t{\n\t\t\tprovide: LU_SEGMENTEDCONTROLTABS_INSTANCE,\n\t\t\tuseExisting: forwardRef(() => SegmentedControlTabsComponent),\n\t\t},\n\t],\n})\nexport class SegmentedControlTabsComponent<T = unknown> implements AfterContentInit {\n\t/**\n\t * Applies small size to segmented control tabs\n\t */\n\treadonly small = input(false, { transform: booleanAttribute });\n\n\t/**\n\t * Display segmented control tabs vertically\n\t */\n\treadonly vertical = input(false, { transform: booleanAttribute });\n\n\tactive = model<T>(null);\n\n\treadonly id = `segmentedControl${nextId++}`;\n\n\treadonly tabs = contentChildren<SegmentedControlTabsPanelComponent<T>>(SegmentedControlTabsPanelComponent);\n\treadonly tabButtons = viewChildren<ElementRef<HTMLButtonElement>>('tabButton');\n\n\treadonly currentIndex = computed(() => this.tabs().findIndex((tab) => tab.value() === this.active()));\n\n\tprevious() {\n\t\tlet newIndex = this.currentIndex() - 1;\n\t\tif (newIndex < 0) {\n\t\t\tnewIndex = this.tabs().length - 1;\n\t\t}\n\t\tthis.setActiveTab(newIndex);\n\t}\n\n\tnext() {\n\t\tlet newIndex = this.currentIndex() + 1;\n\t\tif (newIndex >= this.tabs().length) {\n\t\t\tnewIndex = 0;\n\t\t}\n\t\tthis.setActiveTab(newIndex);\n\t}\n\n\tsetActiveTab(index: number) {\n\t\tthis.active.set(this.tabs()[index].value());\n\t\tthis.tabButtons()[index].nativeElement.focus();\n\t}\n\n\tngAfterContentInit(): void {\n\t\tif (this.active() === null) {\n\t\t\tthis.active.set(this.tabs()[0].value());\n\t\t}\n\t}\n}\n","<ul class=\"segmentedControl\" role=\"tablist\" [class.mod-S]=\"small()\" [class.mod-vertical]=\"vertical()\">\n\t@for (panel of tabs(); track panel.id) {\n\t\t<li class=\"segmentedControl-item\" role=\"presentation\">\n\t\t\t<button\n\t\t\t\t#tabButton\n\t\t\t\tclass=\"segmentedControl-item-action\"\n\t\t\t\ttype=\"button\"\n\t\t\t\trole=\"tab\"\n\t\t\t\t[attr.id]=\"panel.labelId\"\n\t\t\t\t[attr.aria-controls]=\"panel.value()\"\n\t\t\t\t[attr.aria-selected]=\"active() === panel.value()\"\n\t\t\t\t[attr.tabindex]=\"active() !== panel.value() ? '-1' : null\"\n\t\t\t\t(click)=\"active.set(panel.value())\"\n\t\t\t\t(keydown.arrowleft)=\"$event.preventDefault(); previous()\"\n\t\t\t\t(keydown.arrowup)=\"$event.preventDefault(); previous()\"\n\t\t\t\t(keydown.arrowright)=\"$event.preventDefault(); next()\"\n\t\t\t\t(keydown.arrowdown)=\"$event.preventDefault(); next()\"\n\t\t\t>\n\t\t\t\t<ng-container *luPortal=\"panel.label()\" />\n\t\t\t</button>\n\t\t</li>\n\t}\n</ul>\n<ng-content />\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["nextId"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"lucca-front-ng-segmented-control-tabs.mjs","sources":["../../../packages/ng/segmented-control-tabs/segmented-control-tabs.token.ts","../../../packages/ng/segmented-control-tabs/panel/panel.component.ts","../../../packages/ng/segmented-control-tabs/segmented-control-tabs.component.ts","../../../packages/ng/segmented-control-tabs/segmented-control-tabs.component.html","../../../packages/ng/segmented-control-tabs/lucca-front-ng-segmented-control-tabs.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\nimport { SegmentedControlTabsComponent } from './segmented-control-tabs.component';\n\nexport const LU_SEGMENTEDCONTROLTABS_INSTANCE = new InjectionToken<SegmentedControlTabsComponent>('LU_SEGMENTEDCONTROLTABS_INSTANCE');\n","import { ChangeDetectionStrategy, Component, inject, input, ViewEncapsulation } from '@angular/core';\nimport { PortalContent } from '@lucca-front/ng/core';\nimport { LU_SEGMENTEDCONTROLTABS_INSTANCE } from '../segmented-control-tabs.token';\n\nlet nextId = 0;\n\n@Component({\n\tselector: 'lu-segmented-control-tabs-panel',\n\ttemplate: '<ng-content />',\n\tencapsulation: ViewEncapsulation.None,\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: {\n\t\tclass: 'segmentedControl_panel',\n\t\trole: 'tabpanel',\n\t\t'[tabindex]': '0',\n\t\t'[class.is-active]': 'segmentedControlTabsRef.active() === value()',\n\t\t'[id]': 'panelId',\n\t\t'[attr.aria-labelledby]': 'labelId',\n\t},\n})\nexport class SegmentedControlTabsPanelComponent<T = unknown> {\n\tprotected segmentedControlTabsRef = inject(LU_SEGMENTEDCONTROLTABS_INSTANCE);\n\n\treadonly label = input<PortalContent>();\n\n\treadonly value = input.required<T>();\n\n\treadonly id = nextId++;\n\n\treadonly panelId = `panel${this.id}`;\n\treadonly labelId = `tab${this.id}`;\n}\n","import {\n\tAfterContentInit,\n\tbooleanAttribute,\n\tChangeDetectionStrategy,\n\tComponent,\n\tcomputed,\n\tcontentChildren,\n\tElementRef,\n\tforwardRef,\n\tinput,\n\tmodel,\n\tviewChildren,\n\tViewEncapsulation,\n} from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { PortalDirective } from '@lucca-front/ng/core';\nimport { NoopValueAccessorDirective } from '@lucca-front/ng/forms';\nimport { SegmentedControlTabsPanelComponent } from './public-api';\nimport { LU_SEGMENTEDCONTROLTABS_INSTANCE } from './segmented-control-tabs.token';\n\nlet nextId = 0;\n\n@Component({\n\tselector: 'lu-segmented-control-tabs',\n\ttemplateUrl: './segmented-control-tabs.component.html',\n\tstyleUrl: './segmented-control-tabs.component.scss',\n\tencapsulation: ViewEncapsulation.None,\n\timports: [ReactiveFormsModule, PortalDirective],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thostDirectives: [NoopValueAccessorDirective],\n\tproviders: [\n\t\t{\n\t\t\tprovide: LU_SEGMENTEDCONTROLTABS_INSTANCE,\n\t\t\tuseExisting: forwardRef(() => SegmentedControlTabsComponent),\n\t\t},\n\t],\n})\nexport class SegmentedControlTabsComponent<T = unknown> implements AfterContentInit {\n\t/**\n\t * Applies small size to segmented control tabs\n\t */\n\treadonly small = input(false, { transform: booleanAttribute });\n\n\t/**\n\t * Display segmented control tabs vertically\n\t */\n\treadonly vertical = input(false, { transform: booleanAttribute });\n\n\tactive = model<T>(null);\n\n\treadonly id = `segmentedControl${nextId++}`;\n\n\treadonly tabs = contentChildren<SegmentedControlTabsPanelComponent<T>>(SegmentedControlTabsPanelComponent);\n\treadonly tabButtons = viewChildren<ElementRef<HTMLButtonElement>>('tabButton');\n\n\treadonly currentIndex = computed(() => this.tabs().findIndex((tab) => tab.value() === this.active()));\n\n\tprevious() {\n\t\tlet newIndex = this.currentIndex() - 1;\n\t\tif (newIndex < 0) {\n\t\t\tnewIndex = this.tabs().length - 1;\n\t\t}\n\t\tthis.setActiveTab(newIndex);\n\t}\n\n\tnext() {\n\t\tlet newIndex = this.currentIndex() + 1;\n\t\tif (newIndex >= this.tabs().length) {\n\t\t\tnewIndex = 0;\n\t\t}\n\t\tthis.setActiveTab(newIndex);\n\t}\n\n\tsetActiveTab(index: number) {\n\t\tthis.active.set(this.tabs()[index].value());\n\t\tthis.tabButtons()[index].nativeElement.focus();\n\t}\n\n\tngAfterContentInit(): void {\n\t\tif (this.active() === null) {\n\t\t\tthis.active.set(this.tabs()[0].value());\n\t\t}\n\t}\n}\n","<ul class=\"segmentedControl\" role=\"tablist\" [class.mod-S]=\"small()\" [class.mod-vertical]=\"vertical()\">\n\t@for (panel of tabs(); track panel.id) {\n\t\t<li class=\"segmentedControl-item\" role=\"presentation\">\n\t\t\t<button\n\t\t\t\t#tabButton\n\t\t\t\tclass=\"segmentedControl-item-action\"\n\t\t\t\ttype=\"button\"\n\t\t\t\trole=\"tab\"\n\t\t\t\t[attr.id]=\"panel.labelId\"\n\t\t\t\t[attr.aria-controls]=\"panel.value()\"\n\t\t\t\t[attr.aria-selected]=\"active() === panel.value()\"\n\t\t\t\t[attr.tabindex]=\"active() !== panel.value() ? '-1' : null\"\n\t\t\t\t(click)=\"active.set(panel.value())\"\n\t\t\t\t(keydown.arrowleft)=\"$event.preventDefault(); previous()\"\n\t\t\t\t(keydown.arrowup)=\"$event.preventDefault(); previous()\"\n\t\t\t\t(keydown.arrowright)=\"$event.preventDefault(); next()\"\n\t\t\t\t(keydown.arrowdown)=\"$event.preventDefault(); next()\"\n\t\t\t>\n\t\t\t\t<ng-container *luPortal=\"panel.label()\" />\n\t\t\t</button>\n\t\t</li>\n\t}\n</ul>\n<ng-content />\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["nextId"],"mappings":";;;;;;;AAGO,MAAM,gCAAgC,GAAG,IAAI,cAAc,CAAgC,kCAAkC,CAAC;;ACCrI,IAAIA,QAAM,GAAG,CAAC;MAgBD,kCAAkC,CAAA;AAd/C,IAAA,WAAA,GAAA;AAeW,QAAA,IAAA,CAAA,uBAAuB,GAAG,MAAM,CAAC,gCAAgC,CAAC;QAEnE,IAAA,CAAA,KAAK,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAiB;AAE9B,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,gDAAK;QAE3B,IAAA,CAAA,EAAE,GAAGA,QAAM,EAAE;AAEb,QAAA,IAAA,CAAA,OAAO,GAAG,CAAA,KAAA,EAAQ,IAAI,CAAC,EAAE,EAAE;AAC3B,QAAA,IAAA,CAAA,OAAO,GAAG,CAAA,GAAA,EAAM,IAAI,CAAC,EAAE,EAAE;AAClC,IAAA;8GAXY,kCAAkC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAlC,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kCAAkC,skBAZpC,gBAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAYd,kCAAkC,EAAA,UAAA,EAAA,CAAA;kBAd9C,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,QAAQ,EAAE,iCAAiC;AAC3C,oBAAA,QAAQ,EAAE,gBAAgB;oBAC1B,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;AAC/C,oBAAA,IAAI,EAAE;AACL,wBAAA,KAAK,EAAE,wBAAwB;AAC/B,wBAAA,IAAI,EAAE,UAAU;AAChB,wBAAA,YAAY,EAAE,GAAG;AACjB,wBAAA,mBAAmB,EAAE,8CAA8C;AACnE,wBAAA,MAAM,EAAE,SAAS;AACjB,wBAAA,wBAAwB,EAAE,SAAS;AACnC,qBAAA;AACD,iBAAA;;;ACCD,IAAI,MAAM,GAAG,CAAC;MAiBD,6BAA6B,CAAA;AAf1C,IAAA,WAAA,GAAA;AAgBC;;AAEG;QACM,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,KAAK,kDAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAE9D;;AAEG;QACM,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,qDAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAEjE,QAAA,IAAA,CAAA,MAAM,GAAG,KAAK,CAAI,IAAI,kDAAC;AAEd,QAAA,IAAA,CAAA,EAAE,GAAG,CAAA,gBAAA,EAAmB,MAAM,EAAE,EAAE;AAElC,QAAA,IAAA,CAAA,IAAI,GAAG,eAAe,CAAwC,kCAAkC,gDAAC;AACjG,QAAA,IAAA,CAAA,UAAU,GAAG,YAAY,CAAgC,WAAW,sDAAC;AAErE,QAAA,IAAA,CAAA,YAAY,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC,SAAS,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,KAAK,EAAE,KAAK,IAAI,CAAC,MAAM,EAAE,CAAC,wDAAC;AA4BrG,IAAA;IA1BA,QAAQ,GAAA;QACP,IAAI,QAAQ,GAAG,IAAI,CAAC,YAAY,EAAE,GAAG,CAAC;AACtC,QAAA,IAAI,QAAQ,GAAG,CAAC,EAAE;YACjB,QAAQ,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC;QAClC;AACA,QAAA,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;IAC5B;IAEA,IAAI,GAAA;QACH,IAAI,QAAQ,GAAG,IAAI,CAAC,YAAY,EAAE,GAAG,CAAC;QACtC,IAAI,QAAQ,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,EAAE;YACnC,QAAQ,GAAG,CAAC;QACb;AACA,QAAA,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;IAC5B;AAEA,IAAA,YAAY,CAAC,KAAa,EAAA;AACzB,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,CAAC;QAC3C,IAAI,CAAC,UAAU,EAAE,CAAC,KAAK,CAAC,CAAC,aAAa,CAAC,KAAK,EAAE;IAC/C;IAEA,kBAAkB,GAAA;AACjB,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE,KAAK,IAAI,EAAE;AAC3B,YAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;QACxC;IACD;8GA7CY,6BAA6B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA7B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,6BAA6B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,2BAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,cAAA,EAAA,EAAA,SAAA,EAP9B;AACV,YAAA;AACC,gBAAA,OAAO,EAAE,gCAAgC;AACzC,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,6BAA6B,CAAC;AAC5D,aAAA;AACD,SAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,MAAA,EAAA,SAAA,EAiBsE,kCAAkC,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,YAAA,EAAA,SAAA,EAAA,CAAA,WAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAAA,EAAA,CAAA,0BAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECpD1G,y+BAwBA,EAAA,MAAA,EAAA,CAAA,y3OAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDGW,mBAAmB,+BAAE,eAAe,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,iBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAUlC,6BAA6B,EAAA,UAAA,EAAA,CAAA;kBAfzC,SAAS;AACC,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,2BAA2B,iBAGtB,iBAAiB,CAAC,IAAI,EAAA,OAAA,EAC5B,CAAC,mBAAmB,EAAE,eAAe,CAAC,EAAA,eAAA,EAC9B,uBAAuB,CAAC,MAAM,kBAC/B,CAAC,0BAA0B,CAAC,EAAA,SAAA,EACjC;AACV,wBAAA;AACC,4BAAA,OAAO,EAAE,gCAAgC;AACzC,4BAAA,WAAW,EAAE,UAAU,CAAC,mCAAmC,CAAC;AAC5D,yBAAA;AACD,qBAAA,EAAA,QAAA,EAAA,y+BAAA,EAAA,MAAA,EAAA,CAAA,y3OAAA,CAAA,EAAA;AAiBsE,SAAA,CAAA,EAAA,cAAA,EAAA,EAAA,KAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,UAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,QAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,cAAA,CAAA,EAAA,CAAA,EAAA,IAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,UAAA,CAAA,MAAA,kCAAkC,wEACvC,WAAW,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AErD9E;;AAEG;;;;"}
|
|
@@ -61,7 +61,7 @@ class SegmentedControlComponent {
|
|
|
61
61
|
provide: LU_SEGMENTEDCONTROL_INSTANCE,
|
|
62
62
|
useExisting: forwardRef(() => SegmentedControlComponent),
|
|
63
63
|
},
|
|
64
|
-
], hostDirectives: [{ directive: i1$1.NoopValueAccessorDirective }], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@layer components{.segmentedControl,.viewTabs{--components-segmentedControl-borderRadius: var(--pr-t-border-radius-default);--components-segmentedControl-padding: var(--pr-t-spacings-100) var(--pr-t-spacings-200);--components-segmentedControl-font: var(--pr-t-font-body-M);--components-segmentedControl-background: transparent;--components-segmentedControl-shadow: none;--components-segmentedControl-color: var(--pr-t-color-text);--components-segmentedControl-cursor: pointer;--components-segmentedControl-dividerInset: var(--pr-t-spacings-100);--components-segmentedControl-direction: row;--components-segmentedControl-width: fit-content;--components-segmentedControl-zIndex: 0;--components-segmentedControl-wrap: wrap;--components-segmentedControl-whiteSpace: normal;padding:0;margin:0;list-style-type:none;display:flex;flex-wrap:var(--components-segmentedControl-wrap);inline-size:var(--components-segmentedControl-width);flex-direction:var(--components-segmentedControl-direction);box-shadow:0 0 0 var(--commons-divider-width) var(--palettes-neutral-100);border-radius:var(--components-segmentedControl-borderRadius);background-color:var(--palettes-neutral-0);font:var(--components-segmentedControl-font);gap:var(--commons-divider-width);white-space:var(--components-segmentedControl-whiteSpace)}.segmentedControl-item-input{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.segmentedControl-item-input:focus-visible+.segmentedControl-item-action{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.segmentedControl-item,.viewTabs-item{flex-grow:1;position:relative;z-index:1}.segmentedControl-item:before,.segmentedControl-item:after,.viewTabs-item:before,.viewTabs-item:after{content:\"\";border-width:0;inset:var(--components-segmentedControl-dividerInset);border-color:var(--palettes-neutral-100);position:absolute;border-style:solid}.segmentedControl-item:before,.viewTabs-item:before{inset-inline-end:calc(var(--commons-divider-width) * -1);border-inline-start-width:var(--commons-divider-width);inset-inline-start:auto}.segmentedControl-item:after,.viewTabs-item:after{inset-block-end:calc(var(--commons-divider-width) * -1);border-block-start-width:var(--commons-divider-width);inset-block-start:auto}.segmentedControl-item-action,.viewTabs-item-tab{inline-size:100%;border:0;margin:0;padding:var(--components-segmentedControl-padding);background-color:var(--components-segmentedControl-background);box-shadow:var(--components-segmentedControl-shadow);border-radius:var(--components-segmentedControl-borderRadius);gap:var(--pr-t-spacings-100);color:var(--components-segmentedControl-color);text-align:center;justify-content:center;display:flex;align-items:center;position:relative;cursor:var(--components-segmentedControl-cursor);z-index:var(--components-segmentedControl-zIndex);font:inherit;transition-property:box-shadow;transition-duration:var(--commons-animations-durations-fast)}.segmentedControl-item-action:focus-visible,.viewTabs-item-tab:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.segmentedControl-item-action:hover,.viewTabs-item-tab:hover{--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-product-400), var(--pr-t-elevation-shadow-raised);--components-segmentedControl-zIndex: 1}.segmentedControl-item-action:active,.viewTabs-item-tab:active{--components-segmentedControl-background: var(--palettes-neutral-0);--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-product-500), var(--pr-t-elevation-shadow-raised)}.segmentedControl_panel,.viewTabs_panel{display:var(--components-segmentedControl-display, block);border-radius:var(--pr-t-border-radius-default)}.segmentedControl_panel:focus-visible,.viewTabs_panel:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}}@layer mods{.segmentedControl.mod-S,.viewTabs.mod-S{--components-segmentedControl-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-150);--components-segmentedControl-font: var(--pr-t-font-body-S);--components-segmentedControl-dividerInset: var(--pr-t-spacings-75)}.segmentedControl.mod-S .numericBadge,.viewTabs.mod-S .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.segmentedControl.mod-vertical,.viewTabs.mod-vertical{--components-segmentedControl-direction: column;--components-segmentedControl-width: auto}@media not all and (min-width:30em){.segmentedControl,.viewTabs{--components-segmentedControl-direction: column;--components-segmentedControl-width: auto}}}@layer mods{.segmentedControl-item-input:checked+.segmentedControl-item-action,.segmentedControl-item-action[aria-selected=true],.segmentedControl-item-input:checked+.viewTabs-item-tab,.viewTabs-item-tab[aria-selected=true]{--components-segmentedControl-background: var(--palettes-product-50);--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-product-500);--components-segmentedControl-color: var(--palettes-product-800);--components-segmentedControl-cursor: default;--components-segmentedControl-backgroundContent: none;--components-segmentedControl-zIndex: 1}.segmentedControl-item-input:checked+.segmentedControl-item-action .numericBadge,.segmentedControl-item-action[aria-selected=true] .numericBadge,.segmentedControl-item-input:checked+.viewTabs-item-tab .numericBadge,.viewTabs-item-tab[aria-selected=true] .numericBadge{--components-numericBadge-background: var(--palettes-200, var(--palettes-product-200));--components-numericBadge-color: var(--palettes-800, var(--palettes-product-800))}.segmentedControl-item-input:checked+.segmentedControl-item-action .numericBadge.is-loading,.segmentedControl-item-action[aria-selected=true] .numericBadge.is-loading,.segmentedControl-item-input:checked+.viewTabs-item-tab .numericBadge.is-loading,.viewTabs-item-tab[aria-selected=true] .numericBadge.is-loading{--components-numericBadge-loadingColor: var(--palettes-product-500);--components-numericBadge-color: transparent}.segmentedControl-item-action:disabled,.segmentedControl-item-input:disabled~.segmentedControl-item-action{--components-segmentedControl-background: var(--palettes-neutral-100);--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-neutral-200);--components-segmentedControl-color: var(--pr-t-color-text-disabled);--components-segmentedControl-cursor: default}.segmentedControl-item-action:disabled .numericBadge,.segmentedControl-item-input:disabled~.segmentedControl-item-action .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}.segmentedControl-item-action:disabled .numericBadge.is-loading,.segmentedControl-item-input:disabled~.segmentedControl-item-action .numericBadge.is-loading{--components-numericBadge-color: transparent}.segmentedControl_panel:not(.is-active,.active),.viewTabs_panel:not(.is-active,.active){--components-segmentedControl-display: none}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
64
|
+
], hostDirectives: [{ directive: i1$1.NoopValueAccessorDirective }], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@layer components{.segmentedControl,.viewTabs{--components-segmentedControl-borderRadius: var(--pr-t-border-radius-default);--components-segmentedControl-padding: var(--pr-t-spacings-100) var(--pr-t-spacings-200);--components-segmentedControl-font: var(--pr-t-font-body-M);--components-segmentedControl-background: transparent;--components-segmentedControl-shadow: none;--components-segmentedControl-color: var(--pr-t-color-text);--components-segmentedControl-cursor: pointer;--components-segmentedControl-dividerInset: var(--pr-t-spacings-100);--components-segmentedControl-direction: row;--components-segmentedControl-width: fit-content;--components-segmentedControl-zIndex: 0;--components-segmentedControl-wrap: wrap;--components-segmentedControl-whiteSpace: normal;padding:0;margin:0;list-style-type:none;display:flex;flex-wrap:var(--components-segmentedControl-wrap);inline-size:var(--components-segmentedControl-width);flex-direction:var(--components-segmentedControl-direction);box-shadow:0 0 0 var(--commons-divider-width) var(--palettes-neutral-100);border-radius:var(--components-segmentedControl-borderRadius);background-color:var(--palettes-neutral-0);font:var(--components-segmentedControl-font);gap:var(--commons-divider-width);white-space:var(--components-segmentedControl-whiteSpace)}.segmentedControl-item-input{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.segmentedControl-item-input:focus-visible+.segmentedControl-item-action{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.segmentedControl-item,.viewTabs-item{flex-grow:1;position:relative;z-index:1}.segmentedControl-item:before,.segmentedControl-item:after,.viewTabs-item:before,.viewTabs-item:after{content:\"\";border-width:0;inset:var(--components-segmentedControl-dividerInset);border-color:var(--palettes-neutral-100);position:absolute;border-style:solid}.segmentedControl-item:before,.viewTabs-item:before{inset-inline-end:calc(var(--commons-divider-width) * -1);border-inline-start-width:var(--commons-divider-width);inset-inline-start:auto}.segmentedControl-item:after,.viewTabs-item:after{inset-block-end:calc(var(--commons-divider-width) * -1);border-block-start-width:var(--commons-divider-width);inset-block-start:auto}.segmentedControl-item-action,.viewTabs-item-tab{inline-size:100%;border:0;margin:0;padding:var(--components-segmentedControl-padding);background-color:var(--components-segmentedControl-background);box-shadow:var(--components-segmentedControl-shadow);border-radius:var(--components-segmentedControl-borderRadius);gap:var(--pr-t-spacings-100);color:var(--components-segmentedControl-color);text-align:center;justify-content:center;display:flex;align-items:center;position:relative;cursor:var(--components-segmentedControl-cursor);z-index:var(--components-segmentedControl-zIndex);font:inherit;transition-property:box-shadow;transition-duration:var(--commons-animations-durations-fast)}.segmentedControl-item-action:focus-visible,.viewTabs-item-tab:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.segmentedControl-item-action:hover,.viewTabs-item-tab:hover{--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-400, var(--palettes-product-400)), var(--pr-t-elevation-shadow-raised);--components-segmentedControl-zIndex: 1}.segmentedControl-item-action:active,.viewTabs-item-tab:active{--components-segmentedControl-background: var(--palettes-neutral-0);--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-500, var(--palettes-product-500)), var(--pr-t-elevation-shadow-raised)}.segmentedControl_panel,.viewTabs_panel{display:var(--components-segmentedControl-display, block);border-radius:var(--pr-t-border-radius-default)}.segmentedControl_panel:focus-visible,.viewTabs_panel:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}}@layer mods{.segmentedControl.mod-S,.viewTabs.mod-S{--components-segmentedControl-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-150);--components-segmentedControl-font: var(--pr-t-font-body-S);--components-segmentedControl-dividerInset: var(--pr-t-spacings-75)}.segmentedControl.mod-S .numericBadge,.viewTabs.mod-S .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.segmentedControl.mod-vertical,.viewTabs.mod-vertical{--components-segmentedControl-direction: column;--components-segmentedControl-width: auto}@media not all and (min-width:30em){.segmentedControl,.viewTabs{--components-segmentedControl-direction: column;--components-segmentedControl-width: auto}}}@layer mods{.segmentedControl-item-input:checked+.segmentedControl-item-action,.segmentedControl-item-action[aria-selected=true],.segmentedControl-item-input:checked+.viewTabs-item-tab,.viewTabs-item-tab[aria-selected=true]{--components-segmentedControl-background: var(--palettes-50, var(--palettes-product-50));--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-500, var(--palettes-product-500));--components-segmentedControl-color: var(--palettes-800, var(--palettes-product-800));--components-segmentedControl-cursor: default;--components-segmentedControl-backgroundContent: none;--components-segmentedControl-zIndex: 1}.segmentedControl-item-input:checked+.segmentedControl-item-action .numericBadge,.segmentedControl-item-action[aria-selected=true] .numericBadge,.segmentedControl-item-input:checked+.viewTabs-item-tab .numericBadge,.viewTabs-item-tab[aria-selected=true] .numericBadge{--components-numericBadge-background: var(--palettes-200, var(--palettes-product-200));--components-numericBadge-color: var(--palettes-800, var(--palettes-product-800))}.segmentedControl-item-input:checked+.segmentedControl-item-action .numericBadge.is-loading,.segmentedControl-item-action[aria-selected=true] .numericBadge.is-loading,.segmentedControl-item-input:checked+.viewTabs-item-tab .numericBadge.is-loading,.viewTabs-item-tab[aria-selected=true] .numericBadge.is-loading{--components-numericBadge-loadingColor: var(--palettes-500, var(--palettes-product-500));--components-numericBadge-color: transparent}.segmentedControl-item-action:disabled,.segmentedControl-item-input:disabled~.segmentedControl-item-action{--components-segmentedControl-background: var(--palettes-neutral-100);--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-neutral-200);--components-segmentedControl-color: var(--pr-t-color-text-disabled);--components-segmentedControl-cursor: default}.segmentedControl-item-action:disabled .numericBadge,.segmentedControl-item-input:disabled~.segmentedControl-item-action .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}.segmentedControl-item-action:disabled .numericBadge.is-loading,.segmentedControl-item-input:disabled~.segmentedControl-item-action .numericBadge.is-loading{--components-numericBadge-color: transparent}.segmentedControl_panel:not(.is-active,.active),.viewTabs_panel:not(.is-active,.active){--components-segmentedControl-display: none}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
65
65
|
}
|
|
66
66
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SegmentedControlComponent, decorators: [{
|
|
67
67
|
type: Component,
|
|
@@ -75,7 +75,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
75
75
|
provide: LU_SEGMENTEDCONTROL_INSTANCE,
|
|
76
76
|
useExisting: forwardRef(() => SegmentedControlComponent),
|
|
77
77
|
},
|
|
78
|
-
], styles: ["@layer components{.segmentedControl,.viewTabs{--components-segmentedControl-borderRadius: var(--pr-t-border-radius-default);--components-segmentedControl-padding: var(--pr-t-spacings-100) var(--pr-t-spacings-200);--components-segmentedControl-font: var(--pr-t-font-body-M);--components-segmentedControl-background: transparent;--components-segmentedControl-shadow: none;--components-segmentedControl-color: var(--pr-t-color-text);--components-segmentedControl-cursor: pointer;--components-segmentedControl-dividerInset: var(--pr-t-spacings-100);--components-segmentedControl-direction: row;--components-segmentedControl-width: fit-content;--components-segmentedControl-zIndex: 0;--components-segmentedControl-wrap: wrap;--components-segmentedControl-whiteSpace: normal;padding:0;margin:0;list-style-type:none;display:flex;flex-wrap:var(--components-segmentedControl-wrap);inline-size:var(--components-segmentedControl-width);flex-direction:var(--components-segmentedControl-direction);box-shadow:0 0 0 var(--commons-divider-width) var(--palettes-neutral-100);border-radius:var(--components-segmentedControl-borderRadius);background-color:var(--palettes-neutral-0);font:var(--components-segmentedControl-font);gap:var(--commons-divider-width);white-space:var(--components-segmentedControl-whiteSpace)}.segmentedControl-item-input{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.segmentedControl-item-input:focus-visible+.segmentedControl-item-action{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.segmentedControl-item,.viewTabs-item{flex-grow:1;position:relative;z-index:1}.segmentedControl-item:before,.segmentedControl-item:after,.viewTabs-item:before,.viewTabs-item:after{content:\"\";border-width:0;inset:var(--components-segmentedControl-dividerInset);border-color:var(--palettes-neutral-100);position:absolute;border-style:solid}.segmentedControl-item:before,.viewTabs-item:before{inset-inline-end:calc(var(--commons-divider-width) * -1);border-inline-start-width:var(--commons-divider-width);inset-inline-start:auto}.segmentedControl-item:after,.viewTabs-item:after{inset-block-end:calc(var(--commons-divider-width) * -1);border-block-start-width:var(--commons-divider-width);inset-block-start:auto}.segmentedControl-item-action,.viewTabs-item-tab{inline-size:100%;border:0;margin:0;padding:var(--components-segmentedControl-padding);background-color:var(--components-segmentedControl-background);box-shadow:var(--components-segmentedControl-shadow);border-radius:var(--components-segmentedControl-borderRadius);gap:var(--pr-t-spacings-100);color:var(--components-segmentedControl-color);text-align:center;justify-content:center;display:flex;align-items:center;position:relative;cursor:var(--components-segmentedControl-cursor);z-index:var(--components-segmentedControl-zIndex);font:inherit;transition-property:box-shadow;transition-duration:var(--commons-animations-durations-fast)}.segmentedControl-item-action:focus-visible,.viewTabs-item-tab:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.segmentedControl-item-action:hover,.viewTabs-item-tab:hover{--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-product-400), var(--pr-t-elevation-shadow-raised);--components-segmentedControl-zIndex: 1}.segmentedControl-item-action:active,.viewTabs-item-tab:active{--components-segmentedControl-background: var(--palettes-neutral-0);--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-product-500), var(--pr-t-elevation-shadow-raised)}.segmentedControl_panel,.viewTabs_panel{display:var(--components-segmentedControl-display, block);border-radius:var(--pr-t-border-radius-default)}.segmentedControl_panel:focus-visible,.viewTabs_panel:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}}@layer mods{.segmentedControl.mod-S,.viewTabs.mod-S{--components-segmentedControl-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-150);--components-segmentedControl-font: var(--pr-t-font-body-S);--components-segmentedControl-dividerInset: var(--pr-t-spacings-75)}.segmentedControl.mod-S .numericBadge,.viewTabs.mod-S .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.segmentedControl.mod-vertical,.viewTabs.mod-vertical{--components-segmentedControl-direction: column;--components-segmentedControl-width: auto}@media not all and (min-width:30em){.segmentedControl,.viewTabs{--components-segmentedControl-direction: column;--components-segmentedControl-width: auto}}}@layer mods{.segmentedControl-item-input:checked+.segmentedControl-item-action,.segmentedControl-item-action[aria-selected=true],.segmentedControl-item-input:checked+.viewTabs-item-tab,.viewTabs-item-tab[aria-selected=true]{--components-segmentedControl-background: var(--palettes-product-50);--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-product-500);--components-segmentedControl-color: var(--palettes-product-800);--components-segmentedControl-cursor: default;--components-segmentedControl-backgroundContent: none;--components-segmentedControl-zIndex: 1}.segmentedControl-item-input:checked+.segmentedControl-item-action .numericBadge,.segmentedControl-item-action[aria-selected=true] .numericBadge,.segmentedControl-item-input:checked+.viewTabs-item-tab .numericBadge,.viewTabs-item-tab[aria-selected=true] .numericBadge{--components-numericBadge-background: var(--palettes-200, var(--palettes-product-200));--components-numericBadge-color: var(--palettes-800, var(--palettes-product-800))}.segmentedControl-item-input:checked+.segmentedControl-item-action .numericBadge.is-loading,.segmentedControl-item-action[aria-selected=true] .numericBadge.is-loading,.segmentedControl-item-input:checked+.viewTabs-item-tab .numericBadge.is-loading,.viewTabs-item-tab[aria-selected=true] .numericBadge.is-loading{--components-numericBadge-loadingColor: var(--palettes-product-500);--components-numericBadge-color: transparent}.segmentedControl-item-action:disabled,.segmentedControl-item-input:disabled~.segmentedControl-item-action{--components-segmentedControl-background: var(--palettes-neutral-100);--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-neutral-200);--components-segmentedControl-color: var(--pr-t-color-text-disabled);--components-segmentedControl-cursor: default}.segmentedControl-item-action:disabled .numericBadge,.segmentedControl-item-input:disabled~.segmentedControl-item-action .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}.segmentedControl-item-action:disabled .numericBadge.is-loading,.segmentedControl-item-input:disabled~.segmentedControl-item-action .numericBadge.is-loading{--components-numericBadge-color: transparent}.segmentedControl_panel:not(.is-active,.active),.viewTabs_panel:not(.is-active,.active){--components-segmentedControl-display: none}}\n"] }]
|
|
78
|
+
], styles: ["@layer components{.segmentedControl,.viewTabs{--components-segmentedControl-borderRadius: var(--pr-t-border-radius-default);--components-segmentedControl-padding: var(--pr-t-spacings-100) var(--pr-t-spacings-200);--components-segmentedControl-font: var(--pr-t-font-body-M);--components-segmentedControl-background: transparent;--components-segmentedControl-shadow: none;--components-segmentedControl-color: var(--pr-t-color-text);--components-segmentedControl-cursor: pointer;--components-segmentedControl-dividerInset: var(--pr-t-spacings-100);--components-segmentedControl-direction: row;--components-segmentedControl-width: fit-content;--components-segmentedControl-zIndex: 0;--components-segmentedControl-wrap: wrap;--components-segmentedControl-whiteSpace: normal;padding:0;margin:0;list-style-type:none;display:flex;flex-wrap:var(--components-segmentedControl-wrap);inline-size:var(--components-segmentedControl-width);flex-direction:var(--components-segmentedControl-direction);box-shadow:0 0 0 var(--commons-divider-width) var(--palettes-neutral-100);border-radius:var(--components-segmentedControl-borderRadius);background-color:var(--palettes-neutral-0);font:var(--components-segmentedControl-font);gap:var(--commons-divider-width);white-space:var(--components-segmentedControl-whiteSpace)}.segmentedControl-item-input{border:0;clip-path:rect(1px 1px 1px 1px);margin:-1px;overflow:hidden;padding:0;position:absolute;block-size:1px;inline-size:1px;white-space:nowrap;contain:paint}.segmentedControl-item-input:focus-visible+.segmentedControl-item-action{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.segmentedControl-item,.viewTabs-item{flex-grow:1;position:relative;z-index:1}.segmentedControl-item:before,.segmentedControl-item:after,.viewTabs-item:before,.viewTabs-item:after{content:\"\";border-width:0;inset:var(--components-segmentedControl-dividerInset);border-color:var(--palettes-neutral-100);position:absolute;border-style:solid}.segmentedControl-item:before,.viewTabs-item:before{inset-inline-end:calc(var(--commons-divider-width) * -1);border-inline-start-width:var(--commons-divider-width);inset-inline-start:auto}.segmentedControl-item:after,.viewTabs-item:after{inset-block-end:calc(var(--commons-divider-width) * -1);border-block-start-width:var(--commons-divider-width);inset-block-start:auto}.segmentedControl-item-action,.viewTabs-item-tab{inline-size:100%;border:0;margin:0;padding:var(--components-segmentedControl-padding);background-color:var(--components-segmentedControl-background);box-shadow:var(--components-segmentedControl-shadow);border-radius:var(--components-segmentedControl-borderRadius);gap:var(--pr-t-spacings-100);color:var(--components-segmentedControl-color);text-align:center;justify-content:center;display:flex;align-items:center;position:relative;cursor:var(--components-segmentedControl-cursor);z-index:var(--components-segmentedControl-zIndex);font:inherit;transition-property:box-shadow;transition-duration:var(--commons-animations-durations-fast)}.segmentedControl-item-action:focus-visible,.viewTabs-item-tab:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:3px}.segmentedControl-item-action:hover,.viewTabs-item-tab:hover{--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-400, var(--palettes-product-400)), var(--pr-t-elevation-shadow-raised);--components-segmentedControl-zIndex: 1}.segmentedControl-item-action:active,.viewTabs-item-tab:active{--components-segmentedControl-background: var(--palettes-neutral-0);--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-500, var(--palettes-product-500)), var(--pr-t-elevation-shadow-raised)}.segmentedControl_panel,.viewTabs_panel{display:var(--components-segmentedControl-display, block);border-radius:var(--pr-t-border-radius-default)}.segmentedControl_panel:focus-visible,.viewTabs_panel:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px}}@layer mods{.segmentedControl.mod-S,.viewTabs.mod-S{--components-segmentedControl-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-150);--components-segmentedControl-font: var(--pr-t-font-body-S);--components-segmentedControl-dividerInset: var(--pr-t-spacings-75)}.segmentedControl.mod-S .numericBadge,.viewTabs.mod-S .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.segmentedControl.mod-vertical,.viewTabs.mod-vertical{--components-segmentedControl-direction: column;--components-segmentedControl-width: auto}@media not all and (min-width:30em){.segmentedControl,.viewTabs{--components-segmentedControl-direction: column;--components-segmentedControl-width: auto}}}@layer mods{.segmentedControl-item-input:checked+.segmentedControl-item-action,.segmentedControl-item-action[aria-selected=true],.segmentedControl-item-input:checked+.viewTabs-item-tab,.viewTabs-item-tab[aria-selected=true]{--components-segmentedControl-background: var(--palettes-50, var(--palettes-product-50));--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-500, var(--palettes-product-500));--components-segmentedControl-color: var(--palettes-800, var(--palettes-product-800));--components-segmentedControl-cursor: default;--components-segmentedControl-backgroundContent: none;--components-segmentedControl-zIndex: 1}.segmentedControl-item-input:checked+.segmentedControl-item-action .numericBadge,.segmentedControl-item-action[aria-selected=true] .numericBadge,.segmentedControl-item-input:checked+.viewTabs-item-tab .numericBadge,.viewTabs-item-tab[aria-selected=true] .numericBadge{--components-numericBadge-background: var(--palettes-200, var(--palettes-product-200));--components-numericBadge-color: var(--palettes-800, var(--palettes-product-800))}.segmentedControl-item-input:checked+.segmentedControl-item-action .numericBadge.is-loading,.segmentedControl-item-action[aria-selected=true] .numericBadge.is-loading,.segmentedControl-item-input:checked+.viewTabs-item-tab .numericBadge.is-loading,.viewTabs-item-tab[aria-selected=true] .numericBadge.is-loading{--components-numericBadge-loadingColor: var(--palettes-500, var(--palettes-product-500));--components-numericBadge-color: transparent}.segmentedControl-item-action:disabled,.segmentedControl-item-input:disabled~.segmentedControl-item-action{--components-segmentedControl-background: var(--palettes-neutral-100);--components-segmentedControl-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-neutral-200);--components-segmentedControl-color: var(--pr-t-color-text-disabled);--components-segmentedControl-cursor: default}.segmentedControl-item-action:disabled .numericBadge,.segmentedControl-item-input:disabled~.segmentedControl-item-action .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}.segmentedControl-item-action:disabled .numericBadge.is-loading,.segmentedControl-item-input:disabled~.segmentedControl-item-action .numericBadge.is-loading{--components-numericBadge-color: transparent}.segmentedControl_panel:not(.is-active,.active),.viewTabs_panel:not(.is-active,.active){--components-segmentedControl-display: none}}\n"] }]
|
|
79
79
|
}], propDecorators: { small: [{ type: i0.Input, args: [{ isSignal: true, alias: "small", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }] } });
|
|
80
80
|
|
|
81
81
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lucca-front-ng-segmented-control.mjs","sources":["../../../packages/ng/segmented-control/segmented-control.token.ts","../../../packages/ng/segmented-control/filter/filter.component.ts","../../../packages/ng/segmented-control/filter/filter.component.html","../../../packages/ng/segmented-control/segmented-control.component.ts","../../../packages/ng/segmented-control/lucca-front-ng-segmented-control.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\nimport { SegmentedControlComponent } from './segmented-control.component';\n\nexport const LU_SEGMENTEDCONTROL_INSTANCE = new InjectionToken<SegmentedControlComponent>('LU_SEGMENTEDCONTROL_INSTANCE');\n","import { booleanAttribute, ChangeDetectionStrategy, Component, inject, input, ViewEncapsulation } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { PortalContent, PortalDirective } from '@lucca-front/ng/core';\nimport { LU_SEGMENTEDCONTROL_INSTANCE } from '../segmented-control.token';\n\nlet nextId = 0;\n\n@Component({\n\tselector: 'lu-segmented-control-filter',\n\ttemplateUrl: './filter.component.html',\n\tencapsulation: ViewEncapsulation.None,\n\timports: [ReactiveFormsModule, PortalDirective],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: {\n\t\tclass: 'segmentedControl-item',\n\t\trole: 'listitem',\n\t},\n})\nexport class SegmentedControlFilterComponent<T = unknown> {\n\tprotected segmentedControlRef = inject(LU_SEGMENTEDCONTROL_INSTANCE);\n\n\t/**\n\t * Disabled the segmented control filter\n\t */\n\treadonly disabled = input(false, { transform: booleanAttribute });\n\n\t/**\n\t * Defines filtered value used\n\t */\n\treadonly value = input.required<T>();\n\n\t/**\n\t * Changes the text displayed by the segmented control filter\n\t */\n\treadonly label = input<PortalContent>();\n\n\treadonly id = `${this.segmentedControlRef.id}item${nextId++}`;\n\treadonly name = this.segmentedControlRef.id;\n\n\tpublic get formControl() {\n\t\treturn this.segmentedControlRef.ngControl.control;\n\t}\n}\n","<input\n\ttype=\"radio\"\n\tclass=\"segmentedControl-item-input\"\n\t[name]=\"name\"\n\t[attr.name]=\"name\"\n\t[formControl]=\"formControl\"\n\t[value]=\"value()\"\n\t[attr.id]=\"id\"\n\t[attr.disabled]=\"formControl.disabled || disabled() ? 'disabled' : null\"\n/>\n<label [attr.for]=\"id\" class=\"segmentedControl-item-action\">\n\t<ng-container *luPortal=\"label()\" />\n</label>\n","import { booleanAttribute, ChangeDetectionStrategy, Component, forwardRef, input, ViewEncapsulation } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { injectNgControl, NoopValueAccessorDirective } from '@lucca-front/ng/forms';\nimport { LU_SEGMENTEDCONTROL_INSTANCE } from './segmented-control.token';\n\nlet nextId = 0;\n\n@Component({\n\tselector: 'lu-segmented-control',\n\ttemplate: '<ng-content />',\n\tstyleUrl: './segmented-control.component.scss',\n\tencapsulation: ViewEncapsulation.None,\n\timports: [ReactiveFormsModule],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thostDirectives: [NoopValueAccessorDirective],\n\thost: {\n\t\trole: 'presentation',\n\t\tclass: 'segmentedControl',\n\t\t'[class.mod-S]': 'small()',\n\t\t'[class.mod-vertical]': 'vertical()',\n\t},\n\tproviders: [\n\t\t{\n\t\t\tprovide: LU_SEGMENTEDCONTROL_INSTANCE,\n\t\t\tuseExisting: forwardRef(() => SegmentedControlComponent),\n\t\t},\n\t],\n})\nexport class SegmentedControlComponent {\n\tngControl = injectNgControl();\n\n\t/**\n\t * Applies small size to segmented control\n\t */\n\treadonly small = input(false, { transform: booleanAttribute });\n\n\t/**\n\t * Display segmented control vertically\n\t */\n\treadonly vertical = input(false, { transform: booleanAttribute });\n\n\treadonly id = `segmentedControl${nextId++}`;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["nextId","i1"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"lucca-front-ng-segmented-control.mjs","sources":["../../../packages/ng/segmented-control/segmented-control.token.ts","../../../packages/ng/segmented-control/filter/filter.component.ts","../../../packages/ng/segmented-control/filter/filter.component.html","../../../packages/ng/segmented-control/segmented-control.component.ts","../../../packages/ng/segmented-control/lucca-front-ng-segmented-control.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\nimport { SegmentedControlComponent } from './segmented-control.component';\n\nexport const LU_SEGMENTEDCONTROL_INSTANCE = new InjectionToken<SegmentedControlComponent>('LU_SEGMENTEDCONTROL_INSTANCE');\n","import { booleanAttribute, ChangeDetectionStrategy, Component, inject, input, ViewEncapsulation } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { PortalContent, PortalDirective } from '@lucca-front/ng/core';\nimport { LU_SEGMENTEDCONTROL_INSTANCE } from '../segmented-control.token';\n\nlet nextId = 0;\n\n@Component({\n\tselector: 'lu-segmented-control-filter',\n\ttemplateUrl: './filter.component.html',\n\tencapsulation: ViewEncapsulation.None,\n\timports: [ReactiveFormsModule, PortalDirective],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: {\n\t\tclass: 'segmentedControl-item',\n\t\trole: 'listitem',\n\t},\n})\nexport class SegmentedControlFilterComponent<T = unknown> {\n\tprotected segmentedControlRef = inject(LU_SEGMENTEDCONTROL_INSTANCE);\n\n\t/**\n\t * Disabled the segmented control filter\n\t */\n\treadonly disabled = input(false, { transform: booleanAttribute });\n\n\t/**\n\t * Defines filtered value used\n\t */\n\treadonly value = input.required<T>();\n\n\t/**\n\t * Changes the text displayed by the segmented control filter\n\t */\n\treadonly label = input<PortalContent>();\n\n\treadonly id = `${this.segmentedControlRef.id}item${nextId++}`;\n\treadonly name = this.segmentedControlRef.id;\n\n\tpublic get formControl() {\n\t\treturn this.segmentedControlRef.ngControl.control;\n\t}\n}\n","<input\n\ttype=\"radio\"\n\tclass=\"segmentedControl-item-input\"\n\t[name]=\"name\"\n\t[attr.name]=\"name\"\n\t[formControl]=\"formControl\"\n\t[value]=\"value()\"\n\t[attr.id]=\"id\"\n\t[attr.disabled]=\"formControl.disabled || disabled() ? 'disabled' : null\"\n/>\n<label [attr.for]=\"id\" class=\"segmentedControl-item-action\">\n\t<ng-container *luPortal=\"label()\" />\n</label>\n","import { booleanAttribute, ChangeDetectionStrategy, Component, forwardRef, input, ViewEncapsulation } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { injectNgControl, NoopValueAccessorDirective } from '@lucca-front/ng/forms';\nimport { LU_SEGMENTEDCONTROL_INSTANCE } from './segmented-control.token';\n\nlet nextId = 0;\n\n@Component({\n\tselector: 'lu-segmented-control',\n\ttemplate: '<ng-content />',\n\tstyleUrl: './segmented-control.component.scss',\n\tencapsulation: ViewEncapsulation.None,\n\timports: [ReactiveFormsModule],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thostDirectives: [NoopValueAccessorDirective],\n\thost: {\n\t\trole: 'presentation',\n\t\tclass: 'segmentedControl',\n\t\t'[class.mod-S]': 'small()',\n\t\t'[class.mod-vertical]': 'vertical()',\n\t},\n\tproviders: [\n\t\t{\n\t\t\tprovide: LU_SEGMENTEDCONTROL_INSTANCE,\n\t\t\tuseExisting: forwardRef(() => SegmentedControlComponent),\n\t\t},\n\t],\n})\nexport class SegmentedControlComponent {\n\tngControl = injectNgControl();\n\n\t/**\n\t * Applies small size to segmented control\n\t */\n\treadonly small = input(false, { transform: booleanAttribute });\n\n\t/**\n\t * Display segmented control vertically\n\t */\n\treadonly vertical = input(false, { transform: booleanAttribute });\n\n\treadonly id = `segmentedControl${nextId++}`;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["nextId","i1"],"mappings":"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"}
|
|
@@ -14,7 +14,7 @@ import { ComponentPortal } from '@angular/cdk/portal';
|
|
|
14
14
|
import { EMPTY, takeUntil } from 'rxjs';
|
|
15
15
|
import * as i1 from '@angular/cdk/a11y';
|
|
16
16
|
import { A11yModule } from '@angular/cdk/a11y';
|
|
17
|
-
import { toObservable } from '@angular/core/rxjs-interop';
|
|
17
|
+
import { toSignal, toObservable } from '@angular/core/rxjs-interop';
|
|
18
18
|
import { TreeBranchComponent } from '@lucca-front/ng/tree-select';
|
|
19
19
|
import { map } from 'rxjs/operators';
|
|
20
20
|
|
|
@@ -115,6 +115,7 @@ class LuSelectPanelComponent {
|
|
|
115
115
|
this.options$ = this.selectInput.options$;
|
|
116
116
|
this.grouping = this.selectInput.groupingSignal;
|
|
117
117
|
this.treeGenerator = this.selectInput.treeGenerator;
|
|
118
|
+
this.loading = toSignal(this.selectInput.loading$);
|
|
118
119
|
this.loading$ = this.selectInput.loading$;
|
|
119
120
|
this.searchable = this.selectInput.searchable;
|
|
120
121
|
this.optionComparer = this.selectInput.optionComparer;
|
|
@@ -163,7 +164,7 @@ class LuSelectPanelComponent {
|
|
|
163
164
|
provide: SELECT_PANEL_INSTANCE,
|
|
164
165
|
useExisting: forwardRef(() => LuSelectPanelComponent),
|
|
165
166
|
},
|
|
166
|
-
], ngImport: i0, template: "@if (\n\t{\n\t\toptions: (options$ | async) || [],\n\t\tclueChange: (clueChange$ | async) || \"\",\n\t\tgroupTemplateLocation: groupTemplateLocation$ | async,\n\t\tshouldDisplayAddOption: shouldDisplayAddOption$ | async,\n\t};\n\tas ctx\n) {\n\t<div class=\"lu-picker-panel lu-option-picker-panel\" cdkTrapFocus>\n\t\t<div class=\"lu-picker-content\" [class.is-loading]=\"loading$ | async\" (scroll)=\"onScroll($event)\">\n\t\t\t@if (selectInput.panelHeaderTpl(); as tpl) {\n\t\t\t\t<div>\n\t\t\t\t\t<ng-container *luPortal=\"tpl\" />\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<div role=\"listbox\">\n\t\t\t\t@if (grouping() && ctx.groupTemplateLocation === \"group-header\") {\n\t\t\t\t\t@for (\n\t\t\t\t\t\tgroup of ctx.options | luOptionGroup: grouping().selector;\n\t\t\t\t\t\ttrack trackGroupsBy(groupIndex, group);\n\t\t\t\t\t\tlet groupIndex = $index\n\t\t\t\t\t) {\n\t\t\t\t\t\t<div class=\"lu-picker-content-option-group\" role=\"group\" [attr.aria-labelledby]=\"selectId + '-group-' + group.key\">\n\t\t\t\t\t\t\t<span class=\"lu-picker-content-option-group-title\" role=\"presentation\" [id]=\"selectId + '-group-' + group.key\">\n\t\t\t\t\t\t\t\t<ng-container *luPortal=\"grouping().content; context: { $implicit: group }\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"optionsList\"\n\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: group.options, groupIndex: groupIndex }\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t@if (!grouping() || ctx.groupTemplateLocation !== \"group-header\") {\n\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: ctx.options }\" />\n\t\t\t\t}\n\t\t\t\t<ng-template #optionsList let-options let-groupIndex=\"groupIndex\">\n\t\t\t\t\t@if (treeGenerator) {\n\t\t\t\t\t\t@for (branch of options | luTreeDisplay: treeGenerator; let index = $index; track trackBranchesBy(index, branch)) {\n\t\t\t\t\t\t\t<lu-tree-branch\n\t\t\t\t\t\t\t\t[branch]=\"branch\"\n\t\t\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t\t\t[optionComparer]=\"optionComparer\"\n\t\t\t\t\t\t\t\t[selectedOptions]=\"[selected()]\"\n\t\t\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t\t\t(toggleOne)=\"panelRef.emitValue($event)\"\n\t\t\t\t\t\t\t\tsimpleMode\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t@for (option of options; track trackOptionsBy(index, option); let index = $index) {\n\t\t\t\t\t\t\t<lu-select-option\n\t\t\t\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t\t\t\t[option]=\"option\"\n\t\t\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t\t\t[groupTemplateLocation]=\"ctx.groupTemplateLocation\"\n\t\t\t\t\t\t\t\t[groupIndex]=\"groupIndex\"\n\t\t\t\t\t\t\t\t[grouping]=\"grouping()\"\n\t\t\t\t\t\t\t\t[scrollIntoViewOptions]=\"{ block: 'center' }\"\n\t\t\t\t\t\t\t\t[isSelected]=\"option | luIsOptionSelected: optionComparer : selected()\"\n\t\t\t\t\t\t\t\t[class.withAddOption]=\"ctx.shouldDisplayAddOption\"\n\t\t\t\t\t\t\t\t(selected)=\"panelRef.emitValue(option)\"\n\t\t\t\t\t\t\t\t(click)=\"panelRef.emitValue(option)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t</ng-template>\n\t\t\t\t@if (ctx.options.length === 0 && (loading$ | async) === false) {\n\t\t\t\t\t<div class=\"lu-picker-content-option-emptyState\">\n\t\t\t\t\t\t{{ ctx.clueChange.length ? intl().emptyResults : intl().emptyOptions }}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t@if (loading$ | async) {\n\t\t\t\t<div class=\"lu-picker-content-loading\">\n\t\t\t\t\t<div class=\"loading\">{{ intl().loading }}</div>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (ctx.shouldDisplayAddOption) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"addOption palette-product is-stuck\"\n\t\t\t\t\t(click)=\"selectInput.emitAddOption()\"\n\t\t\t\t\t(selected)=\"selectInput.emitAddOption()\"\n\t\t\t\t\telementId=\"picker-content-add\"\n\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t>\n\t\t\t\t\t<div class=\"addOption-content\">\n\t\t\t\t\t\t<lu-icon icon=\"mathsPlus\" />\n\t\t\t\t\t\t<ng-container *luPortal=\"selectInput.addOptionLabel\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (selectInput.panelFooterTpl(); as tpl) {\n\t\t\t\t<div>\n\t\t\t\t\t<ng-container *luPortal=\"tpl\" />\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t</div>\n}\n", styles: ["@layer base{:root{--components-options-item-padding-vertical: var(--pr-t-spacings-50);--components-options-item-padding-horizontal: var(--pr-t-spacings-100);--components-options-item-multiple-padding: 2.25rem;--components-options-item-icon-color: var(--palettes-neutral-800);--components-options-checkbox-size: 1.25rem;--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));--components-options-checkbox-border-radius: var(--pr-t-border-radius-small);--components-options-checkbox-border-color: var(--palettes-neutral-700);--components-options-establishment-multiple-padding: 2rem}}@layer reset,base,components,mods,product,utils;@layer mods{.textfield.mod-search{inline-size:100%}.textfield-input{outline:none}.checkbox.mod-formerEmployee{padding-block:var(--pr-t-spacings-50);padding-inline:var(--components-options-item-padding-horizontal);border-block-end:var(--commons-divider-width) solid var(--commons-divider-color);background-color:var(--palettes-neutral-50);font-style:italic}}@layer components{.optionPlaceholder{display:block;padding-block:var(--components-options-item-padding-vertical);padding-inline:var(--components-options-item-padding-horizontal);font-style:italic;color:var(--palettes-neutral-600)}}@layer components{.addOption{position:sticky;inset-block-end:0;background-color:var(--pr-t-elevation-surface-raised)}}@layer mods{.addOption.is-highlighted .addOption-content{--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.addOption.is-stuck{margin-block-start:var(--pr-t-spacings-100);box-shadow:0 0 0 4px var(--pr-t-elevation-surface-raised),0 0 0 1px color-mix(in srgb,var(--palettes-neutral-400) 8%,transparent),0 0 4px 4px color-mix(in srgb,var(--palettes-neutral-400) 32%,transparent),0 0 8px 4px color-mix(in srgb,var(--palettes-neutral-400) 24%,transparent)}}@layer components{.addOption-content{--components-button-font: var(--pr-t-font-body-M);--components-button-borderRadius: var(--pr-t-border-radius-default);--components-button-paddingBlock: var(--pr-t-spacings-100);--components-button-paddingInline: var(--pr-t-spacings-150);--components-button-paddingBlockStart: var(--components-button-paddingBlock);--components-button-paddingBlockEnd: var(--components-button-paddingBlock);--components-button-paddingInlineStart: var(--components-button-paddingInline);--components-button-paddingInlineEnd: var(--components-button-paddingInline);--components-button-padding: var(--components-button-paddingBlockStart) var(--components-button-paddingInlineEnd) var(--components-button-paddingBlockEnd) var(--components-button-paddingInlineStart);--components-button-gap: var(--pr-t-spacings-100);--components-button-opacity: 1;--components-button-cursor: pointer;--components-button-pointerEvents: auto;--components-button-width: auto;--components-button-minWidth: none;--components-button-userSelect: auto;--components-button-boxShadow: var(--pr-t-elevation-shadow-button);--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-700, var(--palettes-product-700));--components-button-arrow-transform: none;--components-button-AI-background-opacity: 25%;--components-button-font-size: var(--pr-t-font-body-M-fontSize);--components-button-line-height: var(--pr-t-font-body-M-lineHeight);--icon-size: 1.5rem;background-color:var(--components-button-backgroundColor);box-shadow:var(--components-button-boxShadow);border-radius:var(--components-button-borderRadius);padding:var(--components-button-padding);transition-property:background-color,color,border-color,box-shadow;transition-duration:var(--commons-animations-durations-fast);inline-size:var(--components-button-width);min-inline-size:var(--components-button-minWidth);font:var(--components-button-font);font-size:var(--components-button-font-size);line-height:var(--components-button-line-height);font-weight:var(--pr-t-font-fontWeight-semibold);gap:var(--components-button-gap);pointer-events:var(--components-button-pointerEvents);-webkit-user-select:var(--components-button-userSelect);user-select:var(--components-button-userSelect);opacity:var(--components-button-opacity);cursor:var(--components-button-cursor);transition-timing-function:ease;display:inline-flex;align-items:center;justify-content:center;position:relative;text-decoration:none;vertical-align:middle;text-wrap:balance;text-align:center;border:0}.addOption-content,.addOption-content:is(a){color:var(--components-button-color)}.addOption-content .lucca-icon{display:block}.addOption-content .button-icon{--icon-size: 1.5rem}.addOption-content:not(.mod-outlined,.mod-outline) .numericBadge{--components-numericBadge-background: var(--palettes-200, var(--palettes-product-200));--components-numericBadge-color: var(--palettes-800, var(--palettes-product-800))}.addOption-content:hover{--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-800, var(--palettes-product-800))}.addOption-content:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px;border-radius:var(--components-button-borderRadius)}.addOption-content:active{--components-button-backgroundColor: var(--palettes-900, var(--palettes-product-900))}.addOption-content:disabled{--components-button-cursor: default;--components-button-color: var(--palettes-neutral-500);--components-button-backgroundColor: var(--commons-disabled-background);--components-button-pointerEvents: none}.addOption-content:disabled .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}.addOption-content{--components-button-width: 100%;--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-boxShadow: none}.addOption-content:hover,.addOption-content:focus-visible{--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50))}.addOption-content:active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.addOption-content:disabled{--components-button-backgroundColor: transparent;--components-button-color: var(--pr-t-color-text-disabled)}.addOption-content{justify-content:left;--components-button-padding: var(--pr-t-spacings-50)}}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: _LuOptionComponent, selector: "lu-select-option", inputs: ["intl", "optionTpl", "option", "grouping", "hasChildren", "groupIndex", "optionIndex", "scrollIntoViewOptions", "groupTemplateLocation"], outputs: ["onlyParent", "onlyChildren"] }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }, { kind: "directive", type: _CoreSelectPanelElement, selector: "[luCoreSelectPanelElement]", inputs: ["elementId", "isSelected", "option", "disabled"], outputs: ["isSelectedChange", "selected"], exportAs: ["luCoreSelectPanelElement"] }, { kind: "component", type: IconComponent, selector: "lu-icon, pr-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "component", type: TreeBranchComponent, selector: "lu-tree-branch", inputs: ["branch", "optionTpl", "optionIndex", "optionComparer", "selectedOptions", "simpleMode", "depth"], outputs: ["toggleOne", "selectMany", "unselectMany"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: _LuOptionGroupPipe, name: "luOptionGroup" }, { kind: "pipe", type: LuIsOptionSelectedPipe, name: "luIsOptionSelected" }, { kind: "pipe", type: TreeDisplayPipe, name: "luTreeDisplay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
167
|
+
], ngImport: i0, template: "@if (\n\t{\n\t\toptions: (options$ | async) || [],\n\t\tclueChange: (clueChange$ | async) || \"\",\n\t\tgroupTemplateLocation: groupTemplateLocation$ | async,\n\t\tshouldDisplayAddOption: shouldDisplayAddOption$ | async,\n\t};\n\tas ctx\n) {\n\t<div class=\"lu-picker-panel lu-option-picker-panel\" cdkTrapFocus>\n\t\t<div class=\"lu-picker-content\" [class.is-loading]=\"loading()\" (scroll)=\"onScroll($event)\">\n\t\t\t@if (selectInput.panelHeaderTpl(); as tpl) {\n\t\t\t\t<div>\n\t\t\t\t\t<ng-container *luPortal=\"tpl\" />\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<div role=\"listbox\">\n\t\t\t\t@if (grouping() && ctx.groupTemplateLocation === \"group-header\") {\n\t\t\t\t\t@for (\n\t\t\t\t\t\tgroup of ctx.options | luOptionGroup: grouping().selector;\n\t\t\t\t\t\ttrack trackGroupsBy(groupIndex, group);\n\t\t\t\t\t\tlet groupIndex = $index\n\t\t\t\t\t) {\n\t\t\t\t\t\t<div class=\"lu-picker-content-option-group\" role=\"group\" [attr.aria-labelledby]=\"selectId + '-group-' + group.key\">\n\t\t\t\t\t\t\t<span class=\"lu-picker-content-option-group-title\" role=\"presentation\" [id]=\"selectId + '-group-' + group.key\">\n\t\t\t\t\t\t\t\t<ng-container *luPortal=\"grouping().content; context: { $implicit: group }\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"optionsList\"\n\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: group.options, groupIndex: groupIndex }\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t@if (!grouping() || ctx.groupTemplateLocation !== \"group-header\") {\n\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: ctx.options }\" />\n\t\t\t\t}\n\t\t\t\t<ng-template #optionsList let-options let-groupIndex=\"groupIndex\">\n\t\t\t\t\t@if (treeGenerator) {\n\t\t\t\t\t\t@for (branch of options | luTreeDisplay: treeGenerator; let index = $index; track trackBranchesBy(index, branch)) {\n\t\t\t\t\t\t\t<lu-tree-branch\n\t\t\t\t\t\t\t\t[branch]=\"branch\"\n\t\t\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t\t\t[optionComparer]=\"optionComparer\"\n\t\t\t\t\t\t\t\t[selectedOptions]=\"[selected()]\"\n\t\t\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t\t\t(toggleOne)=\"panelRef.emitValue($event)\"\n\t\t\t\t\t\t\t\tsimpleMode\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t@for (option of options; track trackOptionsBy(index, option); let index = $index) {\n\t\t\t\t\t\t\t<lu-select-option\n\t\t\t\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t\t\t\t[option]=\"option\"\n\t\t\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t\t\t[groupTemplateLocation]=\"ctx.groupTemplateLocation\"\n\t\t\t\t\t\t\t\t[groupIndex]=\"groupIndex\"\n\t\t\t\t\t\t\t\t[grouping]=\"grouping()\"\n\t\t\t\t\t\t\t\t[scrollIntoViewOptions]=\"{ block: 'center' }\"\n\t\t\t\t\t\t\t\t[isSelected]=\"option | luIsOptionSelected: optionComparer : selected()\"\n\t\t\t\t\t\t\t\t[class.withAddOption]=\"ctx.shouldDisplayAddOption\"\n\t\t\t\t\t\t\t\t(selected)=\"panelRef.emitValue(option)\"\n\t\t\t\t\t\t\t\t(click)=\"panelRef.emitValue(option)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t</ng-template>\n\t\t\t\t@if (ctx.options.length === 0 && !loading()) {\n\t\t\t\t\t<div class=\"lu-picker-content-option-emptyState\">\n\t\t\t\t\t\t{{ ctx.clueChange.length ? intl().emptyResults : intl().emptyOptions }}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t@if (loading()) {\n\t\t\t\t<div class=\"lu-picker-content-loading\">\n\t\t\t\t\t<div class=\"loading\">{{ intl().loading }}</div>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (ctx.shouldDisplayAddOption) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"addOption palette-product is-stuck\"\n\t\t\t\t\t(click)=\"selectInput.emitAddOption()\"\n\t\t\t\t\t(selected)=\"selectInput.emitAddOption()\"\n\t\t\t\t\telementId=\"picker-content-add\"\n\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t>\n\t\t\t\t\t<div class=\"addOption-content\">\n\t\t\t\t\t\t<lu-icon icon=\"mathsPlus\" />\n\t\t\t\t\t\t<ng-container *luPortal=\"selectInput.addOptionLabel\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (selectInput.panelFooterTpl(); as tpl) {\n\t\t\t\t<div>\n\t\t\t\t\t<ng-container *luPortal=\"tpl\" />\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t</div>\n}\n", styles: ["@layer base{:root{--components-options-item-padding-vertical: var(--pr-t-spacings-50);--components-options-item-padding-horizontal: var(--pr-t-spacings-100);--components-options-item-multiple-padding: 2.25rem;--components-options-item-icon-color: var(--palettes-neutral-800);--components-options-checkbox-size: 1.25rem;--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));--components-options-checkbox-border-radius: var(--pr-t-border-radius-small);--components-options-checkbox-border-color: var(--palettes-neutral-700);--components-options-establishment-multiple-padding: 2rem}}@layer reset,base,components,mods,product,utils;@layer mods{.textfield.mod-search{inline-size:100%}.textfield-input{outline:none}.checkbox.mod-formerEmployee{padding-block:var(--pr-t-spacings-50);padding-inline:var(--components-options-item-padding-horizontal);border-block-end:var(--commons-divider-width) solid var(--commons-divider-color);background-color:var(--palettes-neutral-50);font-style:italic}}@layer components{.optionPlaceholder{display:block;padding-block:var(--components-options-item-padding-vertical);padding-inline:var(--components-options-item-padding-horizontal);font-style:italic;color:var(--palettes-neutral-600)}}@layer components{.addOption{position:sticky;inset-block-end:0;background-color:var(--pr-t-elevation-surface-raised)}}@layer mods{.addOption.is-highlighted .addOption-content{--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.addOption.is-stuck{margin-block-start:var(--pr-t-spacings-100);box-shadow:0 0 0 4px var(--pr-t-elevation-surface-raised),0 0 0 1px color-mix(in srgb,var(--palettes-neutral-400) 8%,transparent),0 0 4px 4px color-mix(in srgb,var(--palettes-neutral-400) 32%,transparent),0 0 8px 4px color-mix(in srgb,var(--palettes-neutral-400) 24%,transparent)}}@layer components{.addOption-content{--components-button-font: var(--pr-t-font-body-M);--components-button-borderRadius: var(--pr-t-border-radius-default);--components-button-paddingBlock: var(--pr-t-spacings-100);--components-button-paddingInline: var(--pr-t-spacings-150);--components-button-paddingBlockStart: var(--components-button-paddingBlock);--components-button-paddingBlockEnd: var(--components-button-paddingBlock);--components-button-paddingInlineStart: var(--components-button-paddingInline);--components-button-paddingInlineEnd: var(--components-button-paddingInline);--components-button-padding: var(--components-button-paddingBlockStart) var(--components-button-paddingInlineEnd) var(--components-button-paddingBlockEnd) var(--components-button-paddingInlineStart);--components-button-gap: var(--pr-t-spacings-100);--components-button-opacity: 1;--components-button-cursor: pointer;--components-button-pointerEvents: auto;--components-button-width: auto;--components-button-minWidth: none;--components-button-userSelect: auto;--components-button-boxShadow: var(--pr-t-elevation-shadow-button);--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-700, var(--palettes-product-700));--components-button-arrow-transform: none;--components-button-AI-background-opacity: 25%;--components-button-font-size: var(--pr-t-font-body-M-fontSize);--components-button-line-height: var(--pr-t-font-body-M-lineHeight);--icon-size: 1.5rem;background-color:var(--components-button-backgroundColor);box-shadow:var(--components-button-boxShadow);border-radius:var(--components-button-borderRadius);padding:var(--components-button-padding);transition-property:background-color,color,border-color,box-shadow;transition-duration:var(--commons-animations-durations-fast);inline-size:var(--components-button-width);min-inline-size:var(--components-button-minWidth);font:var(--components-button-font);font-size:var(--components-button-font-size);line-height:var(--components-button-line-height);font-weight:var(--pr-t-font-fontWeight-semibold);gap:var(--components-button-gap);pointer-events:var(--components-button-pointerEvents);-webkit-user-select:var(--components-button-userSelect);user-select:var(--components-button-userSelect);opacity:var(--components-button-opacity);cursor:var(--components-button-cursor);transition-timing-function:ease;display:inline-flex;align-items:center;justify-content:center;position:relative;text-decoration:none;vertical-align:middle;text-wrap:balance;text-align:center;border:0}.addOption-content,.addOption-content:is(a){color:var(--components-button-color)}.addOption-content .lucca-icon{display:block}.addOption-content .button-icon{--icon-size: 1.5rem}.addOption-content:not(.mod-outlined,.mod-outline) .numericBadge{--components-numericBadge-background: var(--palettes-200, var(--palettes-product-200));--components-numericBadge-color: var(--palettes-800, var(--palettes-product-800))}.addOption-content:hover{--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-800, var(--palettes-product-800))}.addOption-content:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px;border-radius:var(--components-button-borderRadius)}.addOption-content:active{--components-button-backgroundColor: var(--palettes-900, var(--palettes-product-900))}.addOption-content:disabled{--components-button-cursor: default;--components-button-color: var(--palettes-neutral-500);--components-button-backgroundColor: var(--commons-disabled-background);--components-button-pointerEvents: none}.addOption-content:disabled .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}.addOption-content{--components-button-width: 100%;--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-boxShadow: none}.addOption-content:hover,.addOption-content:focus-visible{--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50))}.addOption-content:active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.addOption-content:disabled{--components-button-backgroundColor: transparent;--components-button-color: var(--pr-t-color-text-disabled)}.addOption-content{justify-content:left;--components-button-padding: var(--pr-t-spacings-50)}}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: _LuOptionComponent, selector: "lu-select-option", inputs: ["intl", "optionTpl", "option", "grouping", "hasChildren", "groupIndex", "optionIndex", "scrollIntoViewOptions", "groupTemplateLocation"], outputs: ["onlyParent", "onlyChildren"] }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }, { kind: "directive", type: _CoreSelectPanelElement, selector: "[luCoreSelectPanelElement]", inputs: ["elementId", "isSelected", "option", "disabled"], outputs: ["isSelectedChange", "selected"], exportAs: ["luCoreSelectPanelElement"] }, { kind: "component", type: IconComponent, selector: "lu-icon, pr-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "component", type: TreeBranchComponent, selector: "lu-tree-branch", inputs: ["branch", "optionTpl", "optionIndex", "optionComparer", "selectedOptions", "simpleMode", "depth"], outputs: ["toggleOne", "selectMany", "unselectMany"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: _LuOptionGroupPipe, name: "luOptionGroup" }, { kind: "pipe", type: LuIsOptionSelectedPipe, name: "luIsOptionSelected" }, { kind: "pipe", type: TreeDisplayPipe, name: "luTreeDisplay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
167
168
|
}
|
|
168
169
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LuSelectPanelComponent, decorators: [{
|
|
169
170
|
type: Component,
|
|
@@ -188,7 +189,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
188
189
|
provide: SELECT_PANEL_INSTANCE,
|
|
189
190
|
useExisting: forwardRef(() => LuSelectPanelComponent),
|
|
190
191
|
},
|
|
191
|
-
], template: "@if (\n\t{\n\t\toptions: (options$ | async) || [],\n\t\tclueChange: (clueChange$ | async) || \"\",\n\t\tgroupTemplateLocation: groupTemplateLocation$ | async,\n\t\tshouldDisplayAddOption: shouldDisplayAddOption$ | async,\n\t};\n\tas ctx\n) {\n\t<div class=\"lu-picker-panel lu-option-picker-panel\" cdkTrapFocus>\n\t\t<div class=\"lu-picker-content\" [class.is-loading]=\"loading$ | async\" (scroll)=\"onScroll($event)\">\n\t\t\t@if (selectInput.panelHeaderTpl(); as tpl) {\n\t\t\t\t<div>\n\t\t\t\t\t<ng-container *luPortal=\"tpl\" />\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<div role=\"listbox\">\n\t\t\t\t@if (grouping() && ctx.groupTemplateLocation === \"group-header\") {\n\t\t\t\t\t@for (\n\t\t\t\t\t\tgroup of ctx.options | luOptionGroup: grouping().selector;\n\t\t\t\t\t\ttrack trackGroupsBy(groupIndex, group);\n\t\t\t\t\t\tlet groupIndex = $index\n\t\t\t\t\t) {\n\t\t\t\t\t\t<div class=\"lu-picker-content-option-group\" role=\"group\" [attr.aria-labelledby]=\"selectId + '-group-' + group.key\">\n\t\t\t\t\t\t\t<span class=\"lu-picker-content-option-group-title\" role=\"presentation\" [id]=\"selectId + '-group-' + group.key\">\n\t\t\t\t\t\t\t\t<ng-container *luPortal=\"grouping().content; context: { $implicit: group }\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"optionsList\"\n\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: group.options, groupIndex: groupIndex }\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t@if (!grouping() || ctx.groupTemplateLocation !== \"group-header\") {\n\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: ctx.options }\" />\n\t\t\t\t}\n\t\t\t\t<ng-template #optionsList let-options let-groupIndex=\"groupIndex\">\n\t\t\t\t\t@if (treeGenerator) {\n\t\t\t\t\t\t@for (branch of options | luTreeDisplay: treeGenerator; let index = $index; track trackBranchesBy(index, branch)) {\n\t\t\t\t\t\t\t<lu-tree-branch\n\t\t\t\t\t\t\t\t[branch]=\"branch\"\n\t\t\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t\t\t[optionComparer]=\"optionComparer\"\n\t\t\t\t\t\t\t\t[selectedOptions]=\"[selected()]\"\n\t\t\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t\t\t(toggleOne)=\"panelRef.emitValue($event)\"\n\t\t\t\t\t\t\t\tsimpleMode\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t@for (option of options; track trackOptionsBy(index, option); let index = $index) {\n\t\t\t\t\t\t\t<lu-select-option\n\t\t\t\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t\t\t\t[option]=\"option\"\n\t\t\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t\t\t[groupTemplateLocation]=\"ctx.groupTemplateLocation\"\n\t\t\t\t\t\t\t\t[groupIndex]=\"groupIndex\"\n\t\t\t\t\t\t\t\t[grouping]=\"grouping()\"\n\t\t\t\t\t\t\t\t[scrollIntoViewOptions]=\"{ block: 'center' }\"\n\t\t\t\t\t\t\t\t[isSelected]=\"option | luIsOptionSelected: optionComparer : selected()\"\n\t\t\t\t\t\t\t\t[class.withAddOption]=\"ctx.shouldDisplayAddOption\"\n\t\t\t\t\t\t\t\t(selected)=\"panelRef.emitValue(option)\"\n\t\t\t\t\t\t\t\t(click)=\"panelRef.emitValue(option)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t</ng-template>\n\t\t\t\t@if (ctx.options.length === 0 && (loading$ | async) === false) {\n\t\t\t\t\t<div class=\"lu-picker-content-option-emptyState\">\n\t\t\t\t\t\t{{ ctx.clueChange.length ? intl().emptyResults : intl().emptyOptions }}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t@if (loading$ | async) {\n\t\t\t\t<div class=\"lu-picker-content-loading\">\n\t\t\t\t\t<div class=\"loading\">{{ intl().loading }}</div>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (ctx.shouldDisplayAddOption) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"addOption palette-product is-stuck\"\n\t\t\t\t\t(click)=\"selectInput.emitAddOption()\"\n\t\t\t\t\t(selected)=\"selectInput.emitAddOption()\"\n\t\t\t\t\telementId=\"picker-content-add\"\n\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t>\n\t\t\t\t\t<div class=\"addOption-content\">\n\t\t\t\t\t\t<lu-icon icon=\"mathsPlus\" />\n\t\t\t\t\t\t<ng-container *luPortal=\"selectInput.addOptionLabel\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (selectInput.panelFooterTpl(); as tpl) {\n\t\t\t\t<div>\n\t\t\t\t\t<ng-container *luPortal=\"tpl\" />\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t</div>\n}\n", styles: ["@layer base{:root{--components-options-item-padding-vertical: var(--pr-t-spacings-50);--components-options-item-padding-horizontal: var(--pr-t-spacings-100);--components-options-item-multiple-padding: 2.25rem;--components-options-item-icon-color: var(--palettes-neutral-800);--components-options-checkbox-size: 1.25rem;--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));--components-options-checkbox-border-radius: var(--pr-t-border-radius-small);--components-options-checkbox-border-color: var(--palettes-neutral-700);--components-options-establishment-multiple-padding: 2rem}}@layer reset,base,components,mods,product,utils;@layer mods{.textfield.mod-search{inline-size:100%}.textfield-input{outline:none}.checkbox.mod-formerEmployee{padding-block:var(--pr-t-spacings-50);padding-inline:var(--components-options-item-padding-horizontal);border-block-end:var(--commons-divider-width) solid var(--commons-divider-color);background-color:var(--palettes-neutral-50);font-style:italic}}@layer components{.optionPlaceholder{display:block;padding-block:var(--components-options-item-padding-vertical);padding-inline:var(--components-options-item-padding-horizontal);font-style:italic;color:var(--palettes-neutral-600)}}@layer components{.addOption{position:sticky;inset-block-end:0;background-color:var(--pr-t-elevation-surface-raised)}}@layer mods{.addOption.is-highlighted .addOption-content{--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.addOption.is-stuck{margin-block-start:var(--pr-t-spacings-100);box-shadow:0 0 0 4px var(--pr-t-elevation-surface-raised),0 0 0 1px color-mix(in srgb,var(--palettes-neutral-400) 8%,transparent),0 0 4px 4px color-mix(in srgb,var(--palettes-neutral-400) 32%,transparent),0 0 8px 4px color-mix(in srgb,var(--palettes-neutral-400) 24%,transparent)}}@layer components{.addOption-content{--components-button-font: var(--pr-t-font-body-M);--components-button-borderRadius: var(--pr-t-border-radius-default);--components-button-paddingBlock: var(--pr-t-spacings-100);--components-button-paddingInline: var(--pr-t-spacings-150);--components-button-paddingBlockStart: var(--components-button-paddingBlock);--components-button-paddingBlockEnd: var(--components-button-paddingBlock);--components-button-paddingInlineStart: var(--components-button-paddingInline);--components-button-paddingInlineEnd: var(--components-button-paddingInline);--components-button-padding: var(--components-button-paddingBlockStart) var(--components-button-paddingInlineEnd) var(--components-button-paddingBlockEnd) var(--components-button-paddingInlineStart);--components-button-gap: var(--pr-t-spacings-100);--components-button-opacity: 1;--components-button-cursor: pointer;--components-button-pointerEvents: auto;--components-button-width: auto;--components-button-minWidth: none;--components-button-userSelect: auto;--components-button-boxShadow: var(--pr-t-elevation-shadow-button);--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-700, var(--palettes-product-700));--components-button-arrow-transform: none;--components-button-AI-background-opacity: 25%;--components-button-font-size: var(--pr-t-font-body-M-fontSize);--components-button-line-height: var(--pr-t-font-body-M-lineHeight);--icon-size: 1.5rem;background-color:var(--components-button-backgroundColor);box-shadow:var(--components-button-boxShadow);border-radius:var(--components-button-borderRadius);padding:var(--components-button-padding);transition-property:background-color,color,border-color,box-shadow;transition-duration:var(--commons-animations-durations-fast);inline-size:var(--components-button-width);min-inline-size:var(--components-button-minWidth);font:var(--components-button-font);font-size:var(--components-button-font-size);line-height:var(--components-button-line-height);font-weight:var(--pr-t-font-fontWeight-semibold);gap:var(--components-button-gap);pointer-events:var(--components-button-pointerEvents);-webkit-user-select:var(--components-button-userSelect);user-select:var(--components-button-userSelect);opacity:var(--components-button-opacity);cursor:var(--components-button-cursor);transition-timing-function:ease;display:inline-flex;align-items:center;justify-content:center;position:relative;text-decoration:none;vertical-align:middle;text-wrap:balance;text-align:center;border:0}.addOption-content,.addOption-content:is(a){color:var(--components-button-color)}.addOption-content .lucca-icon{display:block}.addOption-content .button-icon{--icon-size: 1.5rem}.addOption-content:not(.mod-outlined,.mod-outline) .numericBadge{--components-numericBadge-background: var(--palettes-200, var(--palettes-product-200));--components-numericBadge-color: var(--palettes-800, var(--palettes-product-800))}.addOption-content:hover{--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-800, var(--palettes-product-800))}.addOption-content:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px;border-radius:var(--components-button-borderRadius)}.addOption-content:active{--components-button-backgroundColor: var(--palettes-900, var(--palettes-product-900))}.addOption-content:disabled{--components-button-cursor: default;--components-button-color: var(--palettes-neutral-500);--components-button-backgroundColor: var(--commons-disabled-background);--components-button-pointerEvents: none}.addOption-content:disabled .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}.addOption-content{--components-button-width: 100%;--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-boxShadow: none}.addOption-content:hover,.addOption-content:focus-visible{--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50))}.addOption-content:active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.addOption-content:disabled{--components-button-backgroundColor: transparent;--components-button-color: var(--pr-t-color-text-disabled)}.addOption-content{justify-content:left;--components-button-padding: var(--pr-t-spacings-50)}}\n"] }]
|
|
192
|
+
], template: "@if (\n\t{\n\t\toptions: (options$ | async) || [],\n\t\tclueChange: (clueChange$ | async) || \"\",\n\t\tgroupTemplateLocation: groupTemplateLocation$ | async,\n\t\tshouldDisplayAddOption: shouldDisplayAddOption$ | async,\n\t};\n\tas ctx\n) {\n\t<div class=\"lu-picker-panel lu-option-picker-panel\" cdkTrapFocus>\n\t\t<div class=\"lu-picker-content\" [class.is-loading]=\"loading()\" (scroll)=\"onScroll($event)\">\n\t\t\t@if (selectInput.panelHeaderTpl(); as tpl) {\n\t\t\t\t<div>\n\t\t\t\t\t<ng-container *luPortal=\"tpl\" />\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<div role=\"listbox\">\n\t\t\t\t@if (grouping() && ctx.groupTemplateLocation === \"group-header\") {\n\t\t\t\t\t@for (\n\t\t\t\t\t\tgroup of ctx.options | luOptionGroup: grouping().selector;\n\t\t\t\t\t\ttrack trackGroupsBy(groupIndex, group);\n\t\t\t\t\t\tlet groupIndex = $index\n\t\t\t\t\t) {\n\t\t\t\t\t\t<div class=\"lu-picker-content-option-group\" role=\"group\" [attr.aria-labelledby]=\"selectId + '-group-' + group.key\">\n\t\t\t\t\t\t\t<span class=\"lu-picker-content-option-group-title\" role=\"presentation\" [id]=\"selectId + '-group-' + group.key\">\n\t\t\t\t\t\t\t\t<ng-container *luPortal=\"grouping().content; context: { $implicit: group }\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"optionsList\"\n\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: group.options, groupIndex: groupIndex }\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t@if (!grouping() || ctx.groupTemplateLocation !== \"group-header\") {\n\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"optionsList\" [ngTemplateOutletContext]=\"{ $implicit: ctx.options }\" />\n\t\t\t\t}\n\t\t\t\t<ng-template #optionsList let-options let-groupIndex=\"groupIndex\">\n\t\t\t\t\t@if (treeGenerator) {\n\t\t\t\t\t\t@for (branch of options | luTreeDisplay: treeGenerator; let index = $index; track trackBranchesBy(index, branch)) {\n\t\t\t\t\t\t\t<lu-tree-branch\n\t\t\t\t\t\t\t\t[branch]=\"branch\"\n\t\t\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t\t\t[optionComparer]=\"optionComparer\"\n\t\t\t\t\t\t\t\t[selectedOptions]=\"[selected()]\"\n\t\t\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t\t\t(toggleOne)=\"panelRef.emitValue($event)\"\n\t\t\t\t\t\t\t\tsimpleMode\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t@for (option of options; track trackOptionsBy(index, option); let index = $index) {\n\t\t\t\t\t\t\t<lu-select-option\n\t\t\t\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t\t\t\t\t[option]=\"option\"\n\t\t\t\t\t\t\t\t[optionTpl]=\"optionTpl()\"\n\t\t\t\t\t\t\t\t[optionIndex]=\"index\"\n\t\t\t\t\t\t\t\t[groupTemplateLocation]=\"ctx.groupTemplateLocation\"\n\t\t\t\t\t\t\t\t[groupIndex]=\"groupIndex\"\n\t\t\t\t\t\t\t\t[grouping]=\"grouping()\"\n\t\t\t\t\t\t\t\t[scrollIntoViewOptions]=\"{ block: 'center' }\"\n\t\t\t\t\t\t\t\t[isSelected]=\"option | luIsOptionSelected: optionComparer : selected()\"\n\t\t\t\t\t\t\t\t[class.withAddOption]=\"ctx.shouldDisplayAddOption\"\n\t\t\t\t\t\t\t\t(selected)=\"panelRef.emitValue(option)\"\n\t\t\t\t\t\t\t\t(click)=\"panelRef.emitValue(option)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t</ng-template>\n\t\t\t\t@if (ctx.options.length === 0 && !loading()) {\n\t\t\t\t\t<div class=\"lu-picker-content-option-emptyState\">\n\t\t\t\t\t\t{{ ctx.clueChange.length ? intl().emptyResults : intl().emptyOptions }}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t@if (loading()) {\n\t\t\t\t<div class=\"lu-picker-content-loading\">\n\t\t\t\t\t<div class=\"loading\">{{ intl().loading }}</div>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (ctx.shouldDisplayAddOption) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"addOption palette-product is-stuck\"\n\t\t\t\t\t(click)=\"selectInput.emitAddOption()\"\n\t\t\t\t\t(selected)=\"selectInput.emitAddOption()\"\n\t\t\t\t\telementId=\"picker-content-add\"\n\t\t\t\t\tluCoreSelectPanelElement\n\t\t\t\t>\n\t\t\t\t\t<div class=\"addOption-content\">\n\t\t\t\t\t\t<lu-icon icon=\"mathsPlus\" />\n\t\t\t\t\t\t<ng-container *luPortal=\"selectInput.addOptionLabel\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (selectInput.panelFooterTpl(); as tpl) {\n\t\t\t\t<div>\n\t\t\t\t\t<ng-container *luPortal=\"tpl\" />\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t</div>\n}\n", styles: ["@layer base{:root{--components-options-item-padding-vertical: var(--pr-t-spacings-50);--components-options-item-padding-horizontal: var(--pr-t-spacings-100);--components-options-item-multiple-padding: 2.25rem;--components-options-item-icon-color: var(--palettes-neutral-800);--components-options-checkbox-size: 1.25rem;--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));--components-options-checkbox-border-radius: var(--pr-t-border-radius-small);--components-options-checkbox-border-color: var(--palettes-neutral-700);--components-options-establishment-multiple-padding: 2rem}}@layer reset,base,components,mods,product,utils;@layer mods{.textfield.mod-search{inline-size:100%}.textfield-input{outline:none}.checkbox.mod-formerEmployee{padding-block:var(--pr-t-spacings-50);padding-inline:var(--components-options-item-padding-horizontal);border-block-end:var(--commons-divider-width) solid var(--commons-divider-color);background-color:var(--palettes-neutral-50);font-style:italic}}@layer components{.optionPlaceholder{display:block;padding-block:var(--components-options-item-padding-vertical);padding-inline:var(--components-options-item-padding-horizontal);font-style:italic;color:var(--palettes-neutral-600)}}@layer components{.addOption{position:sticky;inset-block-end:0;background-color:var(--pr-t-elevation-surface-raised)}}@layer mods{.addOption.is-highlighted .addOption-content{--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.addOption.is-stuck{margin-block-start:var(--pr-t-spacings-100);box-shadow:0 0 0 4px var(--pr-t-elevation-surface-raised),0 0 0 1px color-mix(in srgb,var(--palettes-neutral-400) 8%,transparent),0 0 4px 4px color-mix(in srgb,var(--palettes-neutral-400) 32%,transparent),0 0 8px 4px color-mix(in srgb,var(--palettes-neutral-400) 24%,transparent)}}@layer components{.addOption-content{--components-button-font: var(--pr-t-font-body-M);--components-button-borderRadius: var(--pr-t-border-radius-default);--components-button-paddingBlock: var(--pr-t-spacings-100);--components-button-paddingInline: var(--pr-t-spacings-150);--components-button-paddingBlockStart: var(--components-button-paddingBlock);--components-button-paddingBlockEnd: var(--components-button-paddingBlock);--components-button-paddingInlineStart: var(--components-button-paddingInline);--components-button-paddingInlineEnd: var(--components-button-paddingInline);--components-button-padding: var(--components-button-paddingBlockStart) var(--components-button-paddingInlineEnd) var(--components-button-paddingBlockEnd) var(--components-button-paddingInlineStart);--components-button-gap: var(--pr-t-spacings-100);--components-button-opacity: 1;--components-button-cursor: pointer;--components-button-pointerEvents: auto;--components-button-width: auto;--components-button-minWidth: none;--components-button-userSelect: auto;--components-button-boxShadow: var(--pr-t-elevation-shadow-button);--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-700, var(--palettes-product-700));--components-button-arrow-transform: none;--components-button-AI-background-opacity: 25%;--components-button-font-size: var(--pr-t-font-body-M-fontSize);--components-button-line-height: var(--pr-t-font-body-M-lineHeight);--icon-size: 1.5rem;background-color:var(--components-button-backgroundColor);box-shadow:var(--components-button-boxShadow);border-radius:var(--components-button-borderRadius);padding:var(--components-button-padding);transition-property:background-color,color,border-color,box-shadow;transition-duration:var(--commons-animations-durations-fast);inline-size:var(--components-button-width);min-inline-size:var(--components-button-minWidth);font:var(--components-button-font);font-size:var(--components-button-font-size);line-height:var(--components-button-line-height);font-weight:var(--pr-t-font-fontWeight-semibold);gap:var(--components-button-gap);pointer-events:var(--components-button-pointerEvents);-webkit-user-select:var(--components-button-userSelect);user-select:var(--components-button-userSelect);opacity:var(--components-button-opacity);cursor:var(--components-button-cursor);transition-timing-function:ease;display:inline-flex;align-items:center;justify-content:center;position:relative;text-decoration:none;vertical-align:middle;text-wrap:balance;text-align:center;border:0}.addOption-content,.addOption-content:is(a){color:var(--components-button-color)}.addOption-content .lucca-icon{display:block}.addOption-content .button-icon{--icon-size: 1.5rem}.addOption-content:not(.mod-outlined,.mod-outline) .numericBadge{--components-numericBadge-background: var(--palettes-200, var(--palettes-product-200));--components-numericBadge-color: var(--palettes-800, var(--palettes-product-800))}.addOption-content:hover{--components-button-color: var(--palettes-0, var(--palettes-text, var(--palettes-product-0)));--components-button-backgroundColor: var(--palettes-800, var(--palettes-product-800))}.addOption-content:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px;border-radius:var(--components-button-borderRadius)}.addOption-content:active{--components-button-backgroundColor: var(--palettes-900, var(--palettes-product-900))}.addOption-content:disabled{--components-button-cursor: default;--components-button-color: var(--palettes-neutral-500);--components-button-backgroundColor: var(--commons-disabled-background);--components-button-pointerEvents: none}.addOption-content:disabled .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}.addOption-content{--components-button-width: 100%;--components-button-backgroundColor: transparent;--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-boxShadow: none}.addOption-content:hover,.addOption-content:focus-visible{--components-button-color: var(--palettes-700, var(--pr-t-color-text-subtle));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50))}.addOption-content:active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.addOption-content:disabled{--components-button-backgroundColor: transparent;--components-button-color: var(--pr-t-color-text-disabled)}.addOption-content{justify-content:left;--components-button-padding: var(--pr-t-spacings-50)}}\n"] }]
|
|
192
193
|
}] });
|
|
193
194
|
|
|
194
195
|
class BaseSelectPanelRef extends LuSelectPanelRef {
|