@lucca-front/ng 21.1.0-rc.0 → 21.1.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/lucca-front-ng-a11y.mjs +6 -6
- package/fesm2022/lucca-front-ng-a11y.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-api.mjs +16 -48
- package/fesm2022/lucca-front-ng-api.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-app-layout.mjs +2 -2
- package/fesm2022/lucca-front-ng-app-layout.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-box.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-breadcrumbs.mjs +5 -5
- package/fesm2022/lucca-front-ng-breadcrumbs.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-bubble-icon.mjs +51 -0
- package/fesm2022/lucca-front-ng-bubble-icon.mjs.map +1 -0
- package/fesm2022/lucca-front-ng-bubble-illustration.mjs +135 -0
- package/fesm2022/lucca-front-ng-bubble-illustration.mjs.map +1 -0
- package/fesm2022/lucca-front-ng-button.mjs +21 -0
- package/fesm2022/lucca-front-ng-button.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-callout.mjs +41 -15
- package/fesm2022/lucca-front-ng-callout.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-chip.mjs +37 -7
- package/fesm2022/lucca-front-ng-chip.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-clear.mjs +21 -6
- package/fesm2022/lucca-front-ng-clear.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-color.mjs +28 -0
- package/fesm2022/lucca-front-ng-color.mjs.map +1 -0
- package/fesm2022/lucca-front-ng-comment.mjs +20 -18
- package/fesm2022/lucca-front-ng-comment.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-container.mjs +7 -9
- package/fesm2022/lucca-front-ng-container.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-core-select-job-qualification.mjs +0 -2
- package/fesm2022/lucca-front-ng-core-select-job-qualification.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-core-select-user.mjs +14 -14
- package/fesm2022/lucca-front-ng-core-select-user.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-core-select.mjs +68 -49
- package/fesm2022/lucca-front-ng-core-select.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-core.mjs +13 -1
- package/fesm2022/lucca-front-ng-core.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-data-table.mjs +6 -6
- package/fesm2022/lucca-front-ng-data-table.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-date.mjs +66 -99
- package/fesm2022/lucca-front-ng-date.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-date2.mjs +48 -40
- package/fesm2022/lucca-front-ng-date2.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-department.mjs +8 -24
- package/fesm2022/lucca-front-ng-department.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-dialog.mjs +33 -10
- package/fesm2022/lucca-front-ng-dialog.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-divider.mjs +10 -1
- package/fesm2022/lucca-front-ng-divider.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-empty-state.mjs +66 -8
- package/fesm2022/lucca-front-ng-empty-state.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-establishment.mjs +11 -75
- package/fesm2022/lucca-front-ng-establishment.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-fancy-box.mjs +12 -0
- package/fesm2022/lucca-front-ng-fancy-box.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-file-upload.mjs +40 -34
- package/fesm2022/lucca-front-ng-file-upload.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-filter-pills.mjs +14 -13
- package/fesm2022/lucca-front-ng-filter-pills.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-footer.mjs +3 -0
- package/fesm2022/lucca-front-ng-footer.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-form-field.mjs +25 -10
- package/fesm2022/lucca-front-ng-form-field.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-form-header.mjs +3 -0
- package/fesm2022/lucca-front-ng-form-header.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-form.mjs +19 -5
- package/fesm2022/lucca-front-ng-form.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-formly.mjs +4 -4
- package/fesm2022/lucca-front-ng-formly.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-forms-phone-number-input.mjs +2 -2
- package/fesm2022/lucca-front-ng-forms-phone-number-input.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-forms-rich-text-input.mjs +91 -74
- package/fesm2022/lucca-front-ng-forms-rich-text-input.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-forms.mjs +110 -41
- package/fesm2022/lucca-front-ng-forms.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-gauge.mjs +28 -5
- package/fesm2022/lucca-front-ng-gauge.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-grid.mjs +3 -3
- package/fesm2022/lucca-front-ng-grid.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-highlight-data.mjs +31 -26
- package/fesm2022/lucca-front-ng-highlight-data.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-horizontal-navigation.mjs +5 -2
- package/fesm2022/lucca-front-ng-horizontal-navigation.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-icon.mjs +15 -0
- package/fesm2022/lucca-front-ng-icon.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-index-table.mjs +1 -1
- package/fesm2022/lucca-front-ng-index-table.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-inline-message.mjs +12 -0
- package/fesm2022/lucca-front-ng-inline-message.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-input.mjs +7 -7
- package/fesm2022/lucca-front-ng-input.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-link.mjs +21 -6
- package/fesm2022/lucca-front-ng-link.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-listbox.mjs +17 -5
- package/fesm2022/lucca-front-ng-listbox.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-listing.mjs +36 -7
- package/fesm2022/lucca-front-ng-listing.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-loading.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-main-layout.mjs +8 -2
- package/fesm2022/lucca-front-ng-main-layout.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-mobile-push.mjs +22 -14
- package/fesm2022/lucca-front-ng-mobile-push.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-modal.mjs +1 -1
- package/fesm2022/lucca-front-ng-modal.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-multi-select.mjs +31 -28
- package/fesm2022/lucca-front-ng-multi-select.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-new-badge.mjs +3 -0
- package/fesm2022/lucca-front-ng-new-badge.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-numeric-badge.mjs +10 -1
- package/fesm2022/lucca-front-ng-numeric-badge.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-option.mjs +227 -337
- package/fesm2022/lucca-front-ng-option.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-page-header.mjs +9 -0
- package/fesm2022/lucca-front-ng-page-header.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-pagination.mjs +29 -5
- package/fesm2022/lucca-front-ng-pagination.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-plg-push.mjs +11 -5
- package/fesm2022/lucca-front-ng-plg-push.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-popover.mjs +1 -33
- package/fesm2022/lucca-front-ng-popover.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-popover2.mjs +30 -20
- package/fesm2022/lucca-front-ng-popover2.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-progress-bar.mjs +12 -5
- package/fesm2022/lucca-front-ng-progress-bar.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-read-more.mjs +38 -21
- package/fesm2022/lucca-front-ng-read-more.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-resource-card.mjs +8 -8
- package/fesm2022/lucca-front-ng-resource-card.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-scroll-box.mjs +5 -2
- package/fesm2022/lucca-front-ng-scroll-box.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-segmented-control-tabs.mjs +9 -3
- package/fesm2022/lucca-front-ng-segmented-control-tabs.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-segmented-control.mjs +16 -1
- package/fesm2022/lucca-front-ng-segmented-control.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-simple-select.mjs +20 -14
- package/fesm2022/lucca-front-ng-simple-select.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-skeleton.mjs +65 -14
- package/fesm2022/lucca-front-ng-skeleton.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-sortable-list.mjs +25 -1
- package/fesm2022/lucca-front-ng-sortable-list.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-status-badge.mjs +12 -0
- package/fesm2022/lucca-front-ng-status-badge.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-tag.mjs +6 -0
- package/fesm2022/lucca-front-ng-tag.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-text-flow.mjs +20 -0
- package/fesm2022/lucca-front-ng-text-flow.mjs.map +1 -0
- package/fesm2022/lucca-front-ng-time.mjs +63 -24
- package/fesm2022/lucca-front-ng-time.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-toast.mjs +5 -5
- package/fesm2022/lucca-front-ng-toast.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-tooltip.mjs +13 -27
- package/fesm2022/lucca-front-ng-tooltip.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-tree-select.mjs +1 -1
- package/fesm2022/lucca-front-ng-tree-select.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-user-popover.mjs +6 -6
- package/fesm2022/lucca-front-ng-user-popover.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-user.mjs +20 -36
- package/fesm2022/lucca-front-ng-user.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-vertical-navigation.mjs +30 -0
- package/fesm2022/lucca-front-ng-vertical-navigation.mjs.map +1 -1
- package/package.json +19 -3
- package/schematics/action-icon/index.js +4 -5
- package/schematics/action-icon/migration.js +3 -4
- package/schematics/action-icon/migration.spec.js +8 -8
- package/schematics/alignment-utilities/index.js +3 -4
- package/schematics/alignment-utilities/migration.spec.js +8 -8
- package/schematics/cdn-urls/index.js +3 -4
- package/schematics/cdn-urls/migration.js +7 -9
- package/schematics/cdn-urls/migration.spec.js +8 -8
- package/schematics/class-prefix/index.js +3 -4
- package/schematics/class-prefix/migration.spec.js +8 -8
- package/schematics/collection.json +10 -0
- package/schematics/color-text/index.js +3 -4
- package/schematics/color-text/migration.spec.js +8 -8
- package/schematics/component-path/index.js +3 -4
- package/schematics/component-path/migration.spec.js +8 -8
- package/schematics/empty-state-title/index.js +5 -7
- package/schematics/empty-state-title/migration.spec.js +5 -5
- package/schematics/lib/index.js +29 -0
- package/schematics/lib/local-deps/package-lock.json +2 -0
- package/schematics/lib/local-deps/package.json +1 -2
- package/schematics/lib/schematic.utils.js +5 -0
- package/schematics/lu-button/index.js +3 -4
- package/schematics/lu-button/migration.js +5 -11
- package/schematics/lu-button/migration.spec.js +5 -5
- package/schematics/lu-container/index.js +23 -0
- package/schematics/lu-container/migration.js +116 -0
- package/schematics/lu-container/migration.spec.js +23 -0
- package/schematics/lu-container/schema.json +23 -0
- package/schematics/lu-icon/index.js +3 -4
- package/schematics/lu-icon/migration.js +8 -14
- package/schematics/lu-icon/migration.spec.js +5 -5
- package/schematics/lu-loading/index.js +23 -0
- package/schematics/lu-loading/migration.js +136 -0
- package/schematics/lu-loading/migration.spec.js +23 -0
- package/schematics/lu-loading/schema.json +28 -0
- package/schematics/lu-select/index.js +3 -4
- package/schematics/lu-select/migration.js +18 -21
- package/schematics/lu-select/migration.spec.js +5 -5
- package/schematics/lu-select/util.js +17 -19
- package/schematics/lu-text-input/index.js +3 -4
- package/schematics/lu-text-input/migration.js +22 -28
- package/schematics/lu-text-input/migration.spec.js +5 -5
- package/schematics/new-icons/index.js +5 -6
- package/schematics/new-icons/migration.js +11 -16
- package/schematics/new-icons/migration.spec.js +8 -8
- package/schematics/palettes/index.js +3 -4
- package/schematics/palettes/migration.spec.js +8 -8
- package/schematics/tokens-radius/index.js +3 -4
- package/schematics/tokens-radius/migration.spec.js +8 -8
- package/schematics/tokens-spacing/index.js +3 -4
- package/schematics/tokens-spacing/migration.spec.js +8 -8
- package/schematics/tokens-typo/index.js +3 -4
- package/schematics/tokens-typo/migration.spec.js +8 -8
- package/src/components/cdk/_overlay.scss +5 -0
- package/src/definitions/option/_option-item.scss +1 -0
- package/types/lucca-front-ng-a11y.d.ts +3 -3
- package/types/lucca-front-ng-api.d.ts +1 -19
- package/types/lucca-front-ng-breadcrumbs.d.ts +9 -9
- package/types/lucca-front-ng-bubble-icon.d.ts +20 -0
- package/types/lucca-front-ng-bubble-illustration.d.ts +24 -0
- package/types/lucca-front-ng-button.d.ts +21 -0
- package/types/lucca-front-ng-callout.d.ts +33 -3
- package/types/lucca-front-ng-chip.d.ts +33 -3
- package/types/lucca-front-ng-clear.d.ts +21 -6
- package/types/lucca-front-ng-color.d.ts +12 -0
- package/types/lucca-front-ng-comment.d.ts +19 -11
- package/types/lucca-front-ng-container.d.ts +4 -4
- package/types/lucca-front-ng-core-select.d.ts +21 -16
- package/types/lucca-front-ng-core.d.ts +23 -2
- package/types/lucca-front-ng-data-table.d.ts +2 -2
- package/types/lucca-front-ng-date.d.ts +6 -24
- package/types/lucca-front-ng-date2.d.ts +6 -5
- package/types/lucca-front-ng-department.d.ts +3 -12
- package/types/lucca-front-ng-dialog.d.ts +12 -5
- package/types/lucca-front-ng-divider.d.ts +10 -0
- package/types/lucca-front-ng-empty-state.d.ts +21 -3
- package/types/lucca-front-ng-establishment.d.ts +3 -39
- package/types/lucca-front-ng-fancy-box.d.ts +12 -0
- package/types/lucca-front-ng-file-upload.d.ts +18 -8
- package/types/lucca-front-ng-filter-pills.d.ts +6 -5
- package/types/lucca-front-ng-footer.d.ts +3 -0
- package/types/lucca-front-ng-form-field.d.ts +12 -3
- package/types/lucca-front-ng-form-header.d.ts +3 -0
- package/types/lucca-front-ng-form.d.ts +9 -5
- package/types/lucca-front-ng-forms-rich-text-input.d.ts +16 -16
- package/types/lucca-front-ng-forms.d.ts +41 -12
- package/types/lucca-front-ng-gauge.d.ts +25 -0
- package/types/lucca-front-ng-grid.d.ts +1 -1
- package/types/lucca-front-ng-highlight-data.d.ts +36 -15
- package/types/lucca-front-ng-horizontal-navigation.d.ts +3 -0
- package/types/lucca-front-ng-icon.d.ts +15 -0
- package/types/lucca-front-ng-inline-message.d.ts +12 -0
- package/types/lucca-front-ng-input.d.ts +2 -2
- package/types/lucca-front-ng-link.d.ts +17 -2
- package/types/lucca-front-ng-listbox.d.ts +16 -4
- package/types/lucca-front-ng-listing.d.ts +33 -2
- package/types/lucca-front-ng-main-layout.d.ts +6 -0
- package/types/lucca-front-ng-mobile-push.d.ts +9 -2
- package/types/lucca-front-ng-multi-select.d.ts +26 -24
- package/types/lucca-front-ng-new-badge.d.ts +3 -0
- package/types/lucca-front-ng-numeric-badge.d.ts +9 -0
- package/types/lucca-front-ng-option.d.ts +86 -149
- package/types/lucca-front-ng-page-header.d.ts +9 -0
- package/types/lucca-front-ng-pagination.d.ts +26 -2
- package/types/lucca-front-ng-plg-push.d.ts +8 -2
- package/types/lucca-front-ng-popover.d.ts +1 -20
- package/types/lucca-front-ng-popover2.d.ts +8 -6
- package/types/lucca-front-ng-progress-bar.d.ts +9 -0
- package/types/lucca-front-ng-read-more.d.ts +25 -10
- package/types/lucca-front-ng-resource-card.d.ts +6 -0
- package/types/lucca-front-ng-scroll-box.d.ts +4 -1
- package/types/lucca-front-ng-segmented-control-tabs.d.ts +7 -1
- package/types/lucca-front-ng-segmented-control.d.ts +16 -1
- package/types/lucca-front-ng-simple-select.d.ts +5 -4
- package/types/lucca-front-ng-skeleton.d.ts +61 -6
- package/types/lucca-front-ng-sortable-list.d.ts +24 -0
- package/types/lucca-front-ng-status-badge.d.ts +12 -0
- package/types/lucca-front-ng-tag.d.ts +6 -0
- package/types/lucca-front-ng-text-flow.d.ts +8 -0
- package/types/lucca-front-ng-time.d.ts +22 -16
- package/types/lucca-front-ng-toast.d.ts +2 -2
- package/types/lucca-front-ng-tooltip.d.ts +7 -14
- package/types/lucca-front-ng-user-popover.d.ts +6 -7
- package/types/lucca-front-ng-user.d.ts +6 -15
- package/types/lucca-front-ng-vertical-navigation.d.ts +30 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lucca-front-ng-gauge.mjs","sources":["../../../packages/ng/gauge/gauge.component.ts","../../../packages/ng/gauge/gauge.component.html","../../../packages/ng/gauge/lucca-front-ng-gauge.ts"],"sourcesContent":["import { booleanAttribute, ChangeDetectionStrategy, Component, computed, inject, input, LOCALE_ID, numberAttribute, ViewEncapsulation } from '@angular/core';\nimport { LuClass, Palette } from '@lucca-front/ng/core';\n\n@Component({\n\tselector: 'lu-gauge',\n\ttemplateUrl: './gauge.component.html',\n\tstyleUrl: './gauge.component.scss',\n\tencapsulation: ViewEncapsulation.None,\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\tproviders: [LuClass],\n})\nexport class GaugeComponent {\n\t#locale = inject(LOCALE_ID);\n\n\treadonly value = input(0, { transform: numberAttribute });\n\treadonly thin = input(false, { transform: booleanAttribute });\n\treadonly circular = input(false, { transform: booleanAttribute });\n\treadonly animated = input(false, { transform: booleanAttribute });\n\treadonly noAlt = input(false, { transform: booleanAttribute });\n\treadonly palette = input<Palette>('none');\n\treadonly alt = input<string>('');\n\treadonly size = input(40, { transform: numberAttribute });\n\n\treadonly thickness = computed(() => (this.thin() ? 4 : 8));\n\n\treadonly perimeter = computed(() => (2 * Math.PI * (this.size() - this.thickness())) / 2);\n\n\treadonly fullThreshold = computed(() => this.perimeter() - this.thickness());\n\n\treadonly full = computed<boolean>(() => this.fullThreshold() < (this.perimeter() / 100) * this.value());\n\n\treadonly fullThresholdValue = computed(() => Math.floor((this.fullThreshold() / this.perimeter()) * 100));\n\n\treadonly displayValue = computed(() => {\n\t\tif (this.value() >= 100) {\n\t\t\treturn this.value();\n\t\t}\n\t\treturn this.full() ? this.fullThresholdValue() : this.value();\n\t});\n\n\treadonly defaultAlt = computed(() => new Intl.NumberFormat(this.#locale, { style: 'percent' }).format(this.value() / 100));\n\n\treadonly paletteClass = computed(() => {\n\t\
|
|
1
|
+
{"version":3,"file":"lucca-front-ng-gauge.mjs","sources":["../../../packages/ng/gauge/gauge.component.ts","../../../packages/ng/gauge/gauge.component.html","../../../packages/ng/gauge/lucca-front-ng-gauge.ts"],"sourcesContent":["import { booleanAttribute, ChangeDetectionStrategy, Component, computed, inject, input, LOCALE_ID, numberAttribute, ViewEncapsulation } from '@angular/core';\nimport { LuClass, Palette } from '@lucca-front/ng/core';\n\n@Component({\n\tselector: 'lu-gauge',\n\ttemplateUrl: './gauge.component.html',\n\tstyleUrl: './gauge.component.scss',\n\tencapsulation: ViewEncapsulation.None,\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\tproviders: [LuClass],\n})\nexport class GaugeComponent {\n\t#locale = inject(LOCALE_ID);\n\n\t/**\n\t * The progress of the gauge from 0 to 100\n\t */\n\treadonly value = input(0, { transform: numberAttribute });\n\n\t/**\n\t * Make the gauge finer\n\t */\n\treadonly thin = input(false, { transform: booleanAttribute });\n\n\t/**\n\t * Display gaugue in circular\n\t */\n\treadonly circular = input(false, { transform: booleanAttribute });\n\n\t/**\n\t * Animate the gauge component\n\t */\n\treadonly animated = input(false, { transform: booleanAttribute });\n\n\t/**\n\t * Disabled alt display (overrides alt value)\n\t */\n\treadonly noAlt = input(false, { transform: booleanAttribute });\n\n\t/**\n\t * Which palette should be used for the entire gauge.\n\t * Defaults to none (inherits parent palette)\n\t */\n\treadonly palette = input<Palette>('none');\n\n\t/**\n\t * Defines the text alt attribute used for accessibility\n\t */\n\treadonly alt = input<string>('');\n\n\t/**\n\t * Which size should the gauge be? widht & height\n\t */\n\treadonly size = input(40, { transform: numberAttribute });\n\n\treadonly thickness = computed(() => (this.thin() ? 4 : 8));\n\n\treadonly perimeter = computed(() => (2 * Math.PI * (this.size() - this.thickness())) / 2);\n\n\treadonly fullThreshold = computed(() => this.perimeter() - this.thickness());\n\n\treadonly full = computed<boolean>(() => this.fullThreshold() < (this.perimeter() / 100) * this.value());\n\n\treadonly fullThresholdValue = computed(() => Math.floor((this.fullThreshold() / this.perimeter()) * 100));\n\n\treadonly displayValue = computed(() => {\n\t\tif (this.value() >= 100) {\n\t\t\treturn this.value();\n\t\t}\n\t\treturn this.full() ? this.fullThresholdValue() : this.value();\n\t});\n\n\treadonly defaultAlt = computed(() => new Intl.NumberFormat(this.#locale, { style: 'percent' }).format(this.value() / 100));\n\n\treadonly paletteClass = computed(() => ({\n\t\t[`palette-${this.palette()}`]: !!this.palette(),\n\t}));\n}\n","@if (circular()) {\n\t<svg\n\t\tclass=\"gauge\"\n\t\t[class]=\"paletteClass()\"\n\t\t[class.mod-thin]=\"thin()\"\n\t\t[class.is-animated]=\"animated()\"\n\t\t[class.is-zero]=\"value() === 0\"\n\t\t[attr.width]=\"size()\"\n\t\t[attr.height]=\"size()\"\n\t\t[attr.viewBox]=\"`0 0 ${size()} ${size()}`\"\n\t\t[attr.style]=\"`--components-gauge-value: ${displayValue()}; --components-gauge-circleR: ${(size() - thickness()) / 2}px`\"\n\t>\n\t\t<circle [attr.cx]=\"size() / 2\" [attr.cy]=\"size() / 2\" [attr.r]=\"(size() - thickness()) / 2\" class=\"gauge-circleBackground\" />\n\t\t<circle [attr.cx]=\"size() / 2\" [attr.cy]=\"size() / 2\" [attr.r]=\"(size() - thickness()) / 2\" class=\"gauge-circleBar\" />\n\t</svg>\n} @else {\n\t<div\n\t\tclass=\"gauge\"\n\t\t[attr.style]=\"`--components-gauge-value: ${value()}%`\"\n\t\t[class.mod-thin]=\"thin()\"\n\t\t[class]=\"paletteClass()\"\n\t\t[class.is-animated]=\"animated()\"\n\t></div>\n}\n@if (!noAlt()) {\n\t<span class=\"pr-u-mask\">{{ alt() || defaultAlt() }}</span>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -55,6 +55,9 @@ class GridComponent {
|
|
|
55
55
|
this.colspan = input(null, { ...(ngDevMode ? { debugName: "colspan" } : {}), transform: numberAttribute });
|
|
56
56
|
this.rowspan = input(null, { ...(ngDevMode ? { debugName: "rowspan" } : {}), transform: numberAttribute });
|
|
57
57
|
this.mode = input(null, ...(ngDevMode ? [{ debugName: "mode" }] : []));
|
|
58
|
+
this.gap = input(null, ...(ngDevMode ? [{ debugName: "gap" }] : []));
|
|
59
|
+
this.columnGap = input(null, ...(ngDevMode ? [{ debugName: "columnGap" }] : []));
|
|
60
|
+
this.rowGap = input(null, ...(ngDevMode ? [{ debugName: "rowGap" }] : []));
|
|
58
61
|
this.#gapTransform = (gap) => {
|
|
59
62
|
const spacingRegexp = /.*(\d)$/g;
|
|
60
63
|
if (!gap) {
|
|
@@ -65,9 +68,6 @@ class GridComponent {
|
|
|
65
68
|
}
|
|
66
69
|
return gap;
|
|
67
70
|
};
|
|
68
|
-
this.gap = input(null, ...(ngDevMode ? [{ debugName: "gap" }] : []));
|
|
69
|
-
this.columnGap = input(null, ...(ngDevMode ? [{ debugName: "columnGap" }] : []));
|
|
70
|
-
this.rowGap = input(null, ...(ngDevMode ? [{ debugName: "rowGap" }] : []));
|
|
71
71
|
this.gridStyle = computed(() => ({
|
|
72
72
|
'--grid-columns': this.mode() === null ? this.columns() : null,
|
|
73
73
|
'--grid-gap': this.#gapTransform(this.gap()),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lucca-front-ng-grid.mjs","sources":["../../../packages/ng/grid/grid.token.ts","../../../packages/ng/grid/grid-column/grid-column.component.ts","../../../packages/ng/grid/grid.component.ts","../../../packages/ng/grid/grid.component.html","../../../packages/ng/grid/lucca-front-ng-grid.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\nimport { GridComponent } from './grid.component';\n\nexport const LU_GRID_INSTANCE = new InjectionToken<GridComponent>('LU_GRID_INSTANCE');\n","import { ChangeDetectionStrategy, Component, computed, inject, input, numberAttribute, ViewEncapsulation } from '@angular/core';\nimport { ResponsiveConfig } from '@lucca-front/ng/core';\nimport { LU_GRID_INSTANCE } from '../grid.token';\n\n@Component({\n\tselector: 'lu-grid-column, [lu-grid-column]',\n\ttemplate: '<ng-content />',\n\tencapsulation: ViewEncapsulation.None,\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: {\n\t\tclass: 'grid-column',\n\t\t'[style]': 'style()',\n\t},\n})\nexport class GridColumnComponent {\n\treadonly colspan = input(null, { transform: numberAttribute });\n\treadonly rowspan = input(null, { transform: numberAttribute });\n\treadonly column = input(null, { transform: numberAttribute });\n\treadonly row = input(null, { transform: numberAttribute });\n\treadonly align = input<'start' | 'center' | 'end' | 'auto' | null>(null);\n\treadonly justify = input<'start' | 'center' | 'end' | 'auto' | null>(null);\n\n\treadonly responsive = input<ResponsiveConfig<'row' | 'column' | 'rowspan' | 'colspan', number>>({});\n\n\tprotected gridRef = inject(LU_GRID_INSTANCE);\n\n\treadonly style = computed(() => {\n\t\treturn {\n\t\t\t'--grid-colspan': this.colspan() || this.gridRef.colspan(),\n\t\t\t'--grid-rowspan': this.rowspan() || this.gridRef.rowspan(),\n\t\t\t'--grid-column': this.column(),\n\t\t\t'--grid-row': this.row(),\n\t\t\t'--grid-align': this.align(),\n\t\t\t'--grid-justify': this.justify(),\n\t\t\t...Object.entries(this.responsive()).reduce((acc, [key, value]) => {\n\t\t\t\treturn {\n\t\t\t\t\t...acc,\n\t\t\t\t\t[`--grid-${key}`]: value,\n\t\t\t\t};\n\t\t\t}, {}),\n\t\t};\n\t});\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport { booleanAttribute, ChangeDetectionStrategy, Component, computed, forwardRef, input, numberAttribute, ViewEncapsulation } from '@angular/core';\nimport { ResponsiveProperty } from '@lucca-front/ng/core';\nimport { LU_GRID_INSTANCE } from './grid.token';\n\n@Component({\n\tselector: 'lu-grid, [lu-grid]',\n\ttemplateUrl: './grid.component.html',\n\tstyleUrls: ['./grid.component.scss'],\n\tencapsulation: ViewEncapsulation.None,\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\timports: [NgTemplateOutlet],\n\tproviders: [\n\t\t{\n\t\t\tprovide: LU_GRID_INSTANCE,\n\t\t\tuseExisting: forwardRef(() => GridComponent),\n\t\t},\n\t],\n})\nexport class GridComponent {\n\treadonly container = input(false, { transform: booleanAttribute });\n\treadonly columns = input(null, { transform: numberAttribute });\n\treadonly colspan = input(null, { transform: numberAttribute });\n\treadonly rowspan = input(null, { transform: numberAttribute });\n\n\treadonly mode = input<'form' | 'auto' | ResponsiveProperty<'auto'> | null>(null);\n\n\t#gapTransform = (gap: Gap | null): string | null => {\n\t\tconst spacingRegexp = /.*(\\d)$/g;\n\n\t\tif (!gap) {\n\t\t\treturn null;\n\t\t}\n\t\tif (spacingRegexp.test(gap)) {\n\t\t\treturn `var(--pr-t-spacings-${gap})`;\n\t\t}\n\t\treturn gap;\n\t};\n\n\
|
|
1
|
+
{"version":3,"file":"lucca-front-ng-grid.mjs","sources":["../../../packages/ng/grid/grid.token.ts","../../../packages/ng/grid/grid-column/grid-column.component.ts","../../../packages/ng/grid/grid.component.ts","../../../packages/ng/grid/grid.component.html","../../../packages/ng/grid/lucca-front-ng-grid.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\nimport { GridComponent } from './grid.component';\n\nexport const LU_GRID_INSTANCE = new InjectionToken<GridComponent>('LU_GRID_INSTANCE');\n","import { ChangeDetectionStrategy, Component, computed, inject, input, numberAttribute, ViewEncapsulation } from '@angular/core';\nimport { ResponsiveConfig } from '@lucca-front/ng/core';\nimport { LU_GRID_INSTANCE } from '../grid.token';\n\n@Component({\n\tselector: 'lu-grid-column, [lu-grid-column]',\n\ttemplate: '<ng-content />',\n\tencapsulation: ViewEncapsulation.None,\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: {\n\t\tclass: 'grid-column',\n\t\t'[style]': 'style()',\n\t},\n})\nexport class GridColumnComponent {\n\treadonly colspan = input(null, { transform: numberAttribute });\n\treadonly rowspan = input(null, { transform: numberAttribute });\n\treadonly column = input(null, { transform: numberAttribute });\n\treadonly row = input(null, { transform: numberAttribute });\n\treadonly align = input<'start' | 'center' | 'end' | 'auto' | null>(null);\n\treadonly justify = input<'start' | 'center' | 'end' | 'auto' | null>(null);\n\n\treadonly responsive = input<ResponsiveConfig<'row' | 'column' | 'rowspan' | 'colspan', number>>({});\n\n\tprotected gridRef = inject(LU_GRID_INSTANCE);\n\n\treadonly style = computed(() => {\n\t\treturn {\n\t\t\t'--grid-colspan': this.colspan() || this.gridRef.colspan(),\n\t\t\t'--grid-rowspan': this.rowspan() || this.gridRef.rowspan(),\n\t\t\t'--grid-column': this.column(),\n\t\t\t'--grid-row': this.row(),\n\t\t\t'--grid-align': this.align(),\n\t\t\t'--grid-justify': this.justify(),\n\t\t\t...Object.entries(this.responsive()).reduce((acc, [key, value]) => {\n\t\t\t\treturn {\n\t\t\t\t\t...acc,\n\t\t\t\t\t[`--grid-${key}`]: value,\n\t\t\t\t};\n\t\t\t}, {}),\n\t\t};\n\t});\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport { booleanAttribute, ChangeDetectionStrategy, Component, computed, forwardRef, input, numberAttribute, ViewEncapsulation } from '@angular/core';\nimport { ResponsiveProperty } from '@lucca-front/ng/core';\nimport { LU_GRID_INSTANCE } from './grid.token';\n\n@Component({\n\tselector: 'lu-grid, [lu-grid]',\n\ttemplateUrl: './grid.component.html',\n\tstyleUrls: ['./grid.component.scss'],\n\tencapsulation: ViewEncapsulation.None,\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\timports: [NgTemplateOutlet],\n\tproviders: [\n\t\t{\n\t\t\tprovide: LU_GRID_INSTANCE,\n\t\t\tuseExisting: forwardRef(() => GridComponent),\n\t\t},\n\t],\n})\nexport class GridComponent {\n\treadonly container = input(false, { transform: booleanAttribute });\n\n\treadonly columns = input(null, { transform: numberAttribute });\n\n\treadonly colspan = input(null, { transform: numberAttribute });\n\n\treadonly rowspan = input(null, { transform: numberAttribute });\n\n\treadonly mode = input<'form' | 'auto' | ResponsiveProperty<'auto'> | null>(null);\n\n\treadonly gap = input<Gap | null>(null);\n\treadonly columnGap = input<Gap | null>(null);\n\n\treadonly rowGap = input<Gap | null>(null);\n\n\t#gapTransform = (gap: Gap | null): string | null => {\n\t\tconst spacingRegexp = /.*(\\d)$/g;\n\n\t\tif (!gap) {\n\t\t\treturn null;\n\t\t}\n\t\tif (spacingRegexp.test(gap)) {\n\t\t\treturn `var(--pr-t-spacings-${gap})`;\n\t\t}\n\t\treturn gap;\n\t};\n\n\tprotected readonly gridStyle = computed(() => ({\n\t\t'--grid-columns': this.mode() === null ? this.columns() : null,\n\t\t'--grid-gap': this.#gapTransform(this.gap()),\n\t\t'--grid-column-gap': this.#gapTransform(this.columnGap()),\n\t\t'--grid-row-gap': this.#gapTransform(this.rowGap()),\n\t}));\n}\n\nexport type Gap = '0' | '25' | '50' | '75' | '100' | '150' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | `${number}${string}`;\n","@if (container()) {\n\t<div class=\"grid-containerWrapper\">\n\t\t<ng-container *ngTemplateOutlet=\"content\" />\n\t</div>\n} @else {\n\t<ng-container *ngTemplateOutlet=\"content\" />\n}\n\n<ng-template #content>\n\t<div class=\"grid\" [class]=\"mode() && `mod-${mode()}`\" [style]=\"gridStyle()\">\n\t\t<ng-content />\n\t</div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, input,
|
|
2
|
+
import { inject, input, booleanAttribute, computed, effect, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
3
|
import { LuClass, PortalDirective } from '@lucca-front/ng/core';
|
|
4
4
|
|
|
5
5
|
class HighlightDataComponent {
|
|
@@ -12,42 +12,51 @@ class HighlightDataComponent {
|
|
|
12
12
|
}
|
|
13
13
|
constructor() {
|
|
14
14
|
this.#luClass = inject(LuClass);
|
|
15
|
+
/**
|
|
16
|
+
* The title of the highlight date
|
|
17
|
+
*/
|
|
15
18
|
this.heading = input.required(...(ngDevMode ? [{ debugName: "heading" }] : []));
|
|
19
|
+
/**
|
|
20
|
+
* The content of the highlight date
|
|
21
|
+
*/
|
|
16
22
|
this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
23
|
+
/**
|
|
24
|
+
* Add text below the content
|
|
25
|
+
*/
|
|
17
26
|
this.subText = input(...(ngDevMode ? [undefined, { debugName: "subText" }] : []));
|
|
27
|
+
/**
|
|
28
|
+
* Define a bubble style based on the CDN image bubble number
|
|
29
|
+
*/
|
|
18
30
|
this.bubble = input(...(ngDevMode ? [undefined, { debugName: "bubble" }] : []));
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
31
|
+
/**
|
|
32
|
+
* Define a specific them white light or dark. (White by default)
|
|
33
|
+
*/
|
|
22
34
|
this.theme = input('white', ...(ngDevMode ? [{ debugName: "theme" }] : []));
|
|
23
35
|
/**
|
|
24
36
|
* Apply product name to illustration URL and CSS component palette
|
|
25
37
|
* This specific palette must be set up on config.scss
|
|
26
38
|
*/
|
|
27
39
|
this.palette = input('lucca', ...(ngDevMode ? [{ debugName: "palette" }] : []));
|
|
28
|
-
this.bubbleTheme = computed(() => {
|
|
29
|
-
if (this.theme() === 'dark') {
|
|
30
|
-
return 'dark';
|
|
31
|
-
}
|
|
32
|
-
return 'light';
|
|
33
|
-
}, ...(ngDevMode ? [{ debugName: "bubbleTheme" }] : []));
|
|
34
40
|
/**
|
|
35
41
|
* Main illustration
|
|
36
42
|
* An URL can be apply for custom images
|
|
37
43
|
*/
|
|
38
44
|
this.illustration = input(...(ngDevMode ? [undefined, { debugName: "illustration" }] : []));
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
}
|
|
43
|
-
return `https://cdn.lucca.fr/transverse/prisme/visuals/highlight-data/generic/${this.illustration()}.svg`;
|
|
44
|
-
}, ...(ngDevMode ? [{ debugName: "illustrationSrc" }] : []));
|
|
45
|
+
/**
|
|
46
|
+
* Which size should the highlight data be? XS to medium
|
|
47
|
+
*/
|
|
45
48
|
this.size = input(null, ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
46
49
|
/**
|
|
47
50
|
* Adjust layout to text value
|
|
48
51
|
*/
|
|
49
52
|
this.valueFirst = input(false, { ...(ngDevMode ? { debugName: "valueFirst" } : {}), transform: booleanAttribute });
|
|
53
|
+
/**
|
|
54
|
+
* Displayed in nested mode
|
|
55
|
+
*/
|
|
50
56
|
this.nested = input(false, { ...(ngDevMode ? { debugName: "nested" } : {}), transform: booleanAttribute });
|
|
57
|
+
this.illustrationSrc = computed(() => this.illustration().includes('/') ? this.illustration() : `https://cdn.lucca.fr/transverse/prisme/visuals/highlight-data/generic/${this.illustration()}.svg`, ...(ngDevMode ? [{ debugName: "illustrationSrc" }] : []));
|
|
58
|
+
this.bubbleSrc = computed(() => `https://cdn.lucca.fr/transverse/prisme/visuals/highlight-data/${this.palette()}/bubbles-${this.bubbleTheme()}-${this.bubble()}.svg`, ...(ngDevMode ? [{ debugName: "bubbleSrc" }] : []));
|
|
59
|
+
this.bubbleTheme = computed(() => (this.theme() === 'dark' ? 'dark' : 'light'), ...(ngDevMode ? [{ debugName: "bubbleTheme" }] : []));
|
|
51
60
|
effect(() => {
|
|
52
61
|
this.#luClass.setState({
|
|
53
62
|
[`mod-${this.size()}`]: !!this.size(),
|
|
@@ -58,20 +67,16 @@ class HighlightDataComponent {
|
|
|
58
67
|
});
|
|
59
68
|
}
|
|
60
69
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: HighlightDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
61
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: HighlightDataComponent, isStandalone: true, selector: "lu-highlight-data", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, subText: { classPropertyName: "subText", publicName: "subText", isSignal: true, isRequired: false, transformFunction: null }, bubble: { classPropertyName: "bubble", publicName: "bubble", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, illustration: { classPropertyName: "illustration", publicName: "illustration", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, valueFirst: { classPropertyName: "valueFirst", publicName: "valueFirst", isSignal: true, isRequired: false, transformFunction: null }, nested: { classPropertyName: "nested", publicName: "nested", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.mod-light": "
|
|
70
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: HighlightDataComponent, isStandalone: true, selector: "lu-highlight-data", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, subText: { classPropertyName: "subText", publicName: "subText", isSignal: true, isRequired: false, transformFunction: null }, bubble: { classPropertyName: "bubble", publicName: "bubble", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, illustration: { classPropertyName: "illustration", publicName: "illustration", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, valueFirst: { classPropertyName: "valueFirst", publicName: "valueFirst", isSignal: true, isRequired: false, transformFunction: null }, nested: { classPropertyName: "nested", publicName: "nested", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.mod-light": "lightClass", "class.mod-dark": "darkClass" }, classAttribute: "highlightData" }, providers: [LuClass], ngImport: i0, template: "<dl class=\"highlightData-content\">\n\t<dt class=\"highlightData-content-title\"><ng-container *luPortal=\"heading()\" /></dt>\n\t<dd class=\"highlightData-content-value\"><ng-container *luPortal=\"value()\" /></dd>\n\t@if (subText()) {\n\t\t<dd class=\"highlightData-content-subText\"><ng-container *luPortal=\"subText()\" /></dd>\n\t}\n\t<dd class=\"highlightData-content-action\"><ng-content /></dd>\n</dl>\n\n@if (bubble() || illustration()) {\n\t<div class=\"highlightData-illustrations\">\n\t\t@if (bubble()) {\n\t\t\t<img alt=\"\" class=\"highlightData-illustrations-back\" [attr.src]=\"bubbleSrc()\" />\n\t\t}\n\t\t@if (illustration()) {\n\t\t\t<img alt=\"\" class=\"highlightData-illustrations-front\" [attr.src]=\"illustrationSrc()\" />\n\t\t}\n\t</div>\n}\n", styles: ["@layer components{.highlightData{--components-highlightData-display: grid;--components-highlightData-grid: \"title action\" \"value action\" \"subtext action\";--components-highlightData-alignItem: center;--components-highlightData-background: var(--pr-t-elevation-surface-raised);--components-highlightData-padding-inline: var(--pr-t-spacings-200);--components-highlightData-padding-block: var(--pr-t-spacings-150);--components-highlightData-padding: var(--components-highlightData-padding-block) var(--components-highlightData-padding-inline);--components-highlightData-gap: var(--components-highlightData-padding-inline);--components-highlightData-borderRadius: var(--pr-t-border-radius-structure);--components-highlightData-title-color: var(--palettes-neutral-200);--components-highlightData-value-font: var(--pr-t-font-highlight-XXL);--components-highlightData-value-order: 0;--components-highlightData-action-padding: 0;--components-highlightData-illustrations-width: 86px;--components-highlightData-illustrations-height: 72px;--components-highlightData-illustrations-display: grid;display:block;background-color:var(--components-highlightData-background);border-radius:var(--components-highlightData-borderRadius);overflow:hidden;padding:var(--components-highlightData-padding);position:relative}.highlightData-content{margin:0}.highlightData-content>dd,.highlightData-content>div>dd{margin:0}.highlightData-content{display:var(--components-highlightData-display);grid-template-columns:1fr auto;grid-template-areas:var(--components-highlightData-grid);align-items:var(--components-highlightData-alignItem);flex-direction:column;column-gap:var(--components-highlightData-gap)}.highlightData-content-title{grid-area:title;font:var(--pr-t-font-body-S);color:var(--pr-t-color-text-subtle)}.highlightData-content-value{grid-area:value;font:var(--components-highlightData-value-font);order:var(--components-highlightData-value-order)}.highlightData-content-subText{grid-area:subtext;font:var(--pr-t-font-body-XS);color:var(--pr-t-color-text-subtle);margin-block-start:var(--pr-t-spacings-100)!important}.highlightData-content-action{grid-area:action;padding-block-start:var(--components-highlightData-action-padding)}.highlightData-content-action:empty{display:none}.highlightData-content-action .link{--commons-text-link-color: var(--palettes-700, var(--palettes-product-700));--commons-text-link-hover: var(--palettes-800, var(--palettes-product-800))}.highlightData-content-action .button{--palettes-text: var(--palettes-neutral-text);--palettes-0: var(--palettes-neutral-0);--palettes-25: var(--palettes-neutral-25);--palettes-50: var(--palettes-neutral-50);--palettes-100: var(--palettes-neutral-100);--palettes-200: var(--palettes-neutral-200);--palettes-300: var(--palettes-neutral-300);--palettes-400: var(--palettes-neutral-400);--palettes-500: var(--palettes-neutral-500);--palettes-600: var(--palettes-neutral-600);--palettes-700: var(--palettes-neutral-700);--palettes-800: var(--palettes-neutral-800);--palettes-900: var(--palettes-neutral-900)}.highlightData-illustrations{display:var(--components-highlightData-illustrations-display);place-content:center;position:absolute;inset-block-end:0;inset-inline-end:0}.highlightData-illustrations-back,.highlightData-illustrations-front{grid-area:1/1;block-size:var(--components-highlightData-illustrations-height);inline-size:var(--components-highlightData-illustrations-width)}}@layer mods{.highlightData.mod-light{--components-highlightData-background: var(--palettes-50, var(--palettes-product-50))}.highlightData.mod-dark{--components-highlightData-background: var(--palettes-100, var(--palettes-product-100))}.highlightData.mod-valueFirst{--components-highlightData-grid: \"value action\" \"title action\" \"subtext action\"}.highlightData.mod-S{--components-highlightData-value-font: var(--pr-t-font-highlight-XL);--components-highlightData-illustrations-width: 82px;--components-highlightData-illustrations-height: 68px}.highlightData.mod-XS{--components-highlightData-value-font: var(--pr-t-font-highlight-L);--components-highlightData-illustrations-width: 77px;--components-highlightData-illustrations-height: 64px}.highlightData.mod-nested{--components-highlightData-borderRadius: var(--pr-t-border-radius-default)}.highlightData:has(.highlightData-illustrations){--components-highlightData-display: flex;--components-highlightData-alignItem: start;--components-highlightData-action-padding: var(--pr-t-spacings-100);padding-inline-end:calc(var(--components-highlightData-illustrations-width) + var(--components-highlightData-padding-inline))}.highlightData:has(.highlightData-illustrations).mod-valueFirst{--components-highlightData-value-order: -1}}\n"], dependencies: [{ kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
62
71
|
}
|
|
63
72
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: HighlightDataComponent, decorators: [{
|
|
64
73
|
type: Component,
|
|
65
|
-
args: [{ selector: 'lu-highlight-data', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [LuClass], host: {
|
|
74
|
+
args: [{ selector: 'lu-highlight-data', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [PortalDirective], providers: [LuClass], host: {
|
|
66
75
|
class: 'highlightData',
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
}], darkClass: [{
|
|
72
|
-
type: HostBinding,
|
|
73
|
-
args: ['class.mod-dark']
|
|
74
|
-
}], illustration: [{ type: i0.Input, args: [{ isSignal: true, alias: "illustration", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], valueFirst: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFirst", required: false }] }], nested: [{ type: i0.Input, args: [{ isSignal: true, alias: "nested", required: false }] }] } });
|
|
76
|
+
'[class.mod-light]': 'lightClass',
|
|
77
|
+
'[class.mod-dark]': 'darkClass',
|
|
78
|
+
}, template: "<dl class=\"highlightData-content\">\n\t<dt class=\"highlightData-content-title\"><ng-container *luPortal=\"heading()\" /></dt>\n\t<dd class=\"highlightData-content-value\"><ng-container *luPortal=\"value()\" /></dd>\n\t@if (subText()) {\n\t\t<dd class=\"highlightData-content-subText\"><ng-container *luPortal=\"subText()\" /></dd>\n\t}\n\t<dd class=\"highlightData-content-action\"><ng-content /></dd>\n</dl>\n\n@if (bubble() || illustration()) {\n\t<div class=\"highlightData-illustrations\">\n\t\t@if (bubble()) {\n\t\t\t<img alt=\"\" class=\"highlightData-illustrations-back\" [attr.src]=\"bubbleSrc()\" />\n\t\t}\n\t\t@if (illustration()) {\n\t\t\t<img alt=\"\" class=\"highlightData-illustrations-front\" [attr.src]=\"illustrationSrc()\" />\n\t\t}\n\t</div>\n}\n", styles: ["@layer components{.highlightData{--components-highlightData-display: grid;--components-highlightData-grid: \"title action\" \"value action\" \"subtext action\";--components-highlightData-alignItem: center;--components-highlightData-background: var(--pr-t-elevation-surface-raised);--components-highlightData-padding-inline: var(--pr-t-spacings-200);--components-highlightData-padding-block: var(--pr-t-spacings-150);--components-highlightData-padding: var(--components-highlightData-padding-block) var(--components-highlightData-padding-inline);--components-highlightData-gap: var(--components-highlightData-padding-inline);--components-highlightData-borderRadius: var(--pr-t-border-radius-structure);--components-highlightData-title-color: var(--palettes-neutral-200);--components-highlightData-value-font: var(--pr-t-font-highlight-XXL);--components-highlightData-value-order: 0;--components-highlightData-action-padding: 0;--components-highlightData-illustrations-width: 86px;--components-highlightData-illustrations-height: 72px;--components-highlightData-illustrations-display: grid;display:block;background-color:var(--components-highlightData-background);border-radius:var(--components-highlightData-borderRadius);overflow:hidden;padding:var(--components-highlightData-padding);position:relative}.highlightData-content{margin:0}.highlightData-content>dd,.highlightData-content>div>dd{margin:0}.highlightData-content{display:var(--components-highlightData-display);grid-template-columns:1fr auto;grid-template-areas:var(--components-highlightData-grid);align-items:var(--components-highlightData-alignItem);flex-direction:column;column-gap:var(--components-highlightData-gap)}.highlightData-content-title{grid-area:title;font:var(--pr-t-font-body-S);color:var(--pr-t-color-text-subtle)}.highlightData-content-value{grid-area:value;font:var(--components-highlightData-value-font);order:var(--components-highlightData-value-order)}.highlightData-content-subText{grid-area:subtext;font:var(--pr-t-font-body-XS);color:var(--pr-t-color-text-subtle);margin-block-start:var(--pr-t-spacings-100)!important}.highlightData-content-action{grid-area:action;padding-block-start:var(--components-highlightData-action-padding)}.highlightData-content-action:empty{display:none}.highlightData-content-action .link{--commons-text-link-color: var(--palettes-700, var(--palettes-product-700));--commons-text-link-hover: var(--palettes-800, var(--palettes-product-800))}.highlightData-content-action .button{--palettes-text: var(--palettes-neutral-text);--palettes-0: var(--palettes-neutral-0);--palettes-25: var(--palettes-neutral-25);--palettes-50: var(--palettes-neutral-50);--palettes-100: var(--palettes-neutral-100);--palettes-200: var(--palettes-neutral-200);--palettes-300: var(--palettes-neutral-300);--palettes-400: var(--palettes-neutral-400);--palettes-500: var(--palettes-neutral-500);--palettes-600: var(--palettes-neutral-600);--palettes-700: var(--palettes-neutral-700);--palettes-800: var(--palettes-neutral-800);--palettes-900: var(--palettes-neutral-900)}.highlightData-illustrations{display:var(--components-highlightData-illustrations-display);place-content:center;position:absolute;inset-block-end:0;inset-inline-end:0}.highlightData-illustrations-back,.highlightData-illustrations-front{grid-area:1/1;block-size:var(--components-highlightData-illustrations-height);inline-size:var(--components-highlightData-illustrations-width)}}@layer mods{.highlightData.mod-light{--components-highlightData-background: var(--palettes-50, var(--palettes-product-50))}.highlightData.mod-dark{--components-highlightData-background: var(--palettes-100, var(--palettes-product-100))}.highlightData.mod-valueFirst{--components-highlightData-grid: \"value action\" \"title action\" \"subtext action\"}.highlightData.mod-S{--components-highlightData-value-font: var(--pr-t-font-highlight-XL);--components-highlightData-illustrations-width: 82px;--components-highlightData-illustrations-height: 68px}.highlightData.mod-XS{--components-highlightData-value-font: var(--pr-t-font-highlight-L);--components-highlightData-illustrations-width: 77px;--components-highlightData-illustrations-height: 64px}.highlightData.mod-nested{--components-highlightData-borderRadius: var(--pr-t-border-radius-default)}.highlightData:has(.highlightData-illustrations){--components-highlightData-display: flex;--components-highlightData-alignItem: start;--components-highlightData-action-padding: var(--pr-t-spacings-100);padding-inline-end:calc(var(--components-highlightData-illustrations-width) + var(--components-highlightData-padding-inline))}.highlightData:has(.highlightData-illustrations).mod-valueFirst{--components-highlightData-value-order: -1}}\n"] }]
|
|
79
|
+
}], ctorParameters: () => [], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], subText: [{ type: i0.Input, args: [{ isSignal: true, alias: "subText", required: false }] }], bubble: [{ type: i0.Input, args: [{ isSignal: true, alias: "bubble", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], palette: [{ type: i0.Input, args: [{ isSignal: true, alias: "palette", required: false }] }], illustration: [{ type: i0.Input, args: [{ isSignal: true, alias: "illustration", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], valueFirst: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFirst", required: false }] }], nested: [{ type: i0.Input, args: [{ isSignal: true, alias: "nested", required: false }] }] } });
|
|
75
80
|
|
|
76
81
|
/**
|
|
77
82
|
* Generated bundle index. Do not edit.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lucca-front-ng-highlight-data.mjs","sources":["../../../packages/ng/highlight-data/highlight-data.component.ts","../../../packages/ng/highlight-data/highlight-data.component.html","../../../packages/ng/highlight-data/lucca-front-ng-highlight-data.ts"],"sourcesContent":["import { booleanAttribute, ChangeDetectionStrategy, Component, computed, effect,
|
|
1
|
+
{"version":3,"file":"lucca-front-ng-highlight-data.mjs","sources":["../../../packages/ng/highlight-data/highlight-data.component.ts","../../../packages/ng/highlight-data/highlight-data.component.html","../../../packages/ng/highlight-data/lucca-front-ng-highlight-data.ts"],"sourcesContent":["import { booleanAttribute, ChangeDetectionStrategy, Component, computed, effect, inject, input, ViewEncapsulation } from '@angular/core';\nimport { LuClass, PortalContent, PortalDirective } from '@lucca-front/ng/core';\n\n@Component({\n\tselector: 'lu-highlight-data',\n\ttemplateUrl: './highlight-data.component.html',\n\tstyleUrl: './highlight-data.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\tencapsulation: ViewEncapsulation.None,\n\timports: [PortalDirective],\n\tproviders: [LuClass],\n\thost: {\n\t\tclass: 'highlightData',\n\t\t'[class.mod-light]': 'lightClass',\n\t\t'[class.mod-dark]': 'darkClass',\n\t},\n})\nexport class HighlightDataComponent {\n\t#luClass = inject(LuClass);\n\n\t/**\n\t * The title of the highlight date\n\t */\n\treadonly heading = input.required<PortalContent>();\n\n\t/**\n\t * The content of the highlight date\n\t */\n\treadonly value = input.required<PortalContent>();\n\n\t/**\n\t * Add text below the content\n\t */\n\treadonly subText = input<PortalContent>();\n\n\t/**\n\t * Define a bubble style based on the CDN image bubble number\n\t */\n\treadonly bubble = input<1 | 2 | 3 | 4 | number>();\n\n\t/**\n\t * Define a specific them white light or dark. (White by default)\n\t */\n\treadonly theme = input<'white' | 'light' | 'dark'>('white');\n\n\t/**\n\t * Apply product name to illustration URL and CSS component palette\n\t * This specific palette must be set up on config.scss\n\t */\n\treadonly palette = input<'lucca' | 'cleemy' | 'timmi' | 'poplee' | 'coreHR' | 'pagga' | 'cc' | 'success' | 'warning' | 'critical' | string>('lucca');\n\n\t/**\n\t * Main illustration\n\t * An URL can be apply for custom images\n\t */\n\treadonly illustration = input<\n\t\t'calculator' | 'calendar' | 'cleemy-card' | 'coffee' | 'headphone' | 'mail' | 'manifying-glass' | 'medallon' | 'piggy-bank' | 'polaroid-female' | 'polaroid-male' | 'polaroids' | string\n\t>();\n\n\t/**\n\t * Which size should the highlight data be? XS to medium\n\t */\n\treadonly size = input<'XS' | 'S' | 'M' | null>(null);\n\n\t/**\n\t * Adjust layout to text value\n\t */\n\treadonly valueFirst = input(false, { transform: booleanAttribute });\n\n\t/**\n\t * Displayed in nested mode\n\t */\n\treadonly nested = input(false, { transform: booleanAttribute });\n\n\tget lightClass() {\n\t\treturn this.theme() === 'light';\n\t}\n\n\tget darkClass() {\n\t\treturn this.theme() === 'dark';\n\t}\n\n\treadonly illustrationSrc = computed(() =>\n\t\tthis.illustration().includes('/') ? this.illustration() : `https://cdn.lucca.fr/transverse/prisme/visuals/highlight-data/generic/${this.illustration()}.svg`,\n\t);\n\n\treadonly bubbleSrc = computed(() => `https://cdn.lucca.fr/transverse/prisme/visuals/highlight-data/${this.palette()}/bubbles-${this.bubbleTheme()}-${this.bubble()}.svg`);\n\n\treadonly bubbleTheme = computed(() => (this.theme() === 'dark' ? 'dark' : 'light'));\n\n\tconstructor() {\n\t\teffect(() => {\n\t\t\tthis.#luClass.setState({\n\t\t\t\t[`mod-${this.size()}`]: !!this.size(),\n\t\t\t\t'mod-valueFirst': this.valueFirst(),\n\t\t\t\t'mod-nested': this.nested(),\n\t\t\t\t[`palette-${this.palette()}`]: !!this.palette(),\n\t\t\t});\n\t\t});\n\t}\n}\n","<dl class=\"highlightData-content\">\n\t<dt class=\"highlightData-content-title\"><ng-container *luPortal=\"heading()\" /></dt>\n\t<dd class=\"highlightData-content-value\"><ng-container *luPortal=\"value()\" /></dd>\n\t@if (subText()) {\n\t\t<dd class=\"highlightData-content-subText\"><ng-container *luPortal=\"subText()\" /></dd>\n\t}\n\t<dd class=\"highlightData-content-action\"><ng-content /></dd>\n</dl>\n\n@if (bubble() || illustration()) {\n\t<div class=\"highlightData-illustrations\">\n\t\t@if (bubble()) {\n\t\t\t<img alt=\"\" class=\"highlightData-illustrations-back\" [attr.src]=\"bubbleSrc()\" />\n\t\t}\n\t\t@if (illustration()) {\n\t\t\t<img alt=\"\" class=\"highlightData-illustrations-front\" [attr.src]=\"illustrationSrc()\" />\n\t\t}\n\t</div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -22,10 +22,13 @@ class HorizontalNavigationComponent {
|
|
|
22
22
|
this.noBorder = input(false, { ...(ngDevMode ? { debugName: "noBorder" } : {}), transform: booleanAttribute });
|
|
23
23
|
this.container = input(false, { ...(ngDevMode ? { debugName: "container" } : {}), transform: booleanAttribute });
|
|
24
24
|
this.vertical = input(false, { ...(ngDevMode ? { debugName: "vertical" } : {}), transform: booleanAttribute });
|
|
25
|
+
/**
|
|
26
|
+
* Which size should the horizontal navigation be? Defaults and small
|
|
27
|
+
*/
|
|
25
28
|
this.size = input(null, ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
26
29
|
}
|
|
27
30
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: HorizontalNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
28
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: HorizontalNavigationComponent, isStandalone: true, selector: "lu-horizontal-navigation", inputs: { noBorder: { classPropertyName: "noBorder", publicName: "noBorder", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.mod-noBorder": "noBorder()", "class.mod-S": "size() === `S`", "class.mod-vertical": "vertical()" }, classAttribute: "horizontalNavigation" }, queries: [{ propertyName: "links", predicate: HorizontalNavigationLinkDirective, isSignal: true }], ngImport: i0, template: "@if (container()) {\n\t<div class=\"horizontalNavigation-containerOptional\">\n\t\t<ng-container *ngTemplateOutlet=\"horizontalNavigationList\" />\n\t</div>\n} @else {\n\t<ng-container *ngTemplateOutlet=\"horizontalNavigationList\" />\n}\n\n<ng-template #horizontalNavigationList>\n\t<ul class=\"horizontalNavigation-list\">\n\t\t@for (link of links(); track $index) {\n\t\t\t<li class=\"horizontalNavigation-list-item\">\n\t\t\t\t<ng-container *ngTemplateOutlet=\"link.template\" />\n\t\t\t</li>\n\t\t}\n\t</ul>\n</ng-template>\n", styles: ["@layer components{.horizontalNavigation,.menu{--components-horizontalNavigation-borderContent: \"\";--components-horizontalNavigation-listPadding: 0;--components-horizontalNavigation-listItemActionPaddingBlock: var(--pr-t-spacings-200);--components-horizontalNavigation-listItemActionPaddingInline: 0px;--components-horizontalNavigation-listItemActionPadding: var(--components-horizontalNavigation-listItemActionPaddingBlock) var(--components-horizontalNavigation-listItemActionPaddingInline);--components-horizontalNavigation-listGap: 0 var(--pr-t-spacings-400);--components-horizontalNavigation-listDirection: row;--components-horizontalNavigation-listAlign: flex-end;--components-horizontalNavigation-listItemActionAlign: center;--components-horizontalNavigation-listItemActionTransform: scale(0, 1);--components-horizontalNavigation-listItemActionColor: var(--pr-t-color-text);--components-horizontalNavigation-listItemActionSize: 2px;--components-horizontalNavigation-listItemActionFont: inherit;--components-horizontalNavigation-listItemActionInset: auto 0 0 0;--components-horizontalNavigation-listItemActionRadius: var(--pr-t-border-radius-default) var(--pr-t-border-radius-default) 0 0;--components-horizontalNavigation-listItemActionRadiusWidth: auto;--components-horizontalNavigation-listItemActionRadiusHeight: var(--components-horizontalNavigation-listItemActionSize);column-gap:var(--pr-t-spacings-400);align-items:center;display:flex;position:relative;flex-wrap:wrap;padding:var(--components-horizontalNavigation-listPadding)}.horizontalNavigation:after,.menu:after{content:var(--components-horizontalNavigation-borderContent);border-block-end-width:var(--commons-divider-width);border-block-end-color:var(--commons-divider-color);border-block-end-style:solid;position:absolute;block-size:1px;inset:auto 0 0}.horizontalNavigation .label,.menu .label{margin-inline-end:0;background-color:var(--palettes-neutral-100);color:var(--palettes-neutral-700)}.horizontalNavigation-containerOptional,.menu-containerOptional{max-inline-size:var(--commons-container-maxWidth);padding-inline:var(--commons-container-padding)}.horizontalNavigation-list,.menu-list{margin:0;padding:0;list-style-type:none;align-items:var(--components-horizontalNavigation-listAlign);gap:var(--components-horizontalNavigation-listGap);flex-direction:var(--components-horizontalNavigation-listDirection);display:flex;flex-grow:1;flex-wrap:wrap}.scrollBox .horizontalNavigation-list,.scrollBox .menu-list{flex-wrap:nowrap}.horizontalNavigation-list-item-action,.menu-list-item-action,.menu-link{padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;font:var(--components-horizontalNavigation-listItemActionFont);padding:var(--components-horizontalNavigation-listItemActionPadding);border-radius:var(--pr-t-border-radius-small);color:var(--components-horizontalNavigation-listItemActionColor);display:inline-flex;text-align:var(--components-horizontalNavigation-listItemActionAlign);transition-duration:var(--commons-animations-durations-fast);gap:var(--pr-t-spacings-100);align-items:center;transition-property:color;position:relative;text-decoration:none;inline-size:auto;z-index:1;scroll-margin-inline:var(--pr-t-spacings-200)}.horizontalNavigation-list-item-action:before,.menu-list-item-action:before,.menu-link:before{content:\"\";position:absolute;inset-block:calc(var(--components-horizontalNavigation-listItemActionPaddingBlock) - var(--pr-t-spacings-25));inset-inline:calc(var(--components-horizontalNavigation-listItemActionPaddingInline) - var(--pr-t-spacings-25));border-radius:var(--pr-t-border-radius-small)}.horizontalNavigation-list-item-action:after,.menu-list-item-action:after,.menu-link:after{background-color:var(--palettes-700, var(--palettes-product-700));border-radius:var(--components-horizontalNavigation-listItemActionRadius);transition-duration:var(--commons-animations-durations-fast);block-size:var(--components-horizontalNavigation-listItemActionRadiusHeight);inline-size:var(--components-horizontalNavigation-listItemActionRadiusWidth);transform:var(--components-horizontalNavigation-listItemActionTransform);inset:var(--components-horizontalNavigation-listItemActionInset);transition-property:transform;display:block;position:absolute;z-index:1;content:\"\"}.horizontalNavigation-list-item-action:focus-visible,.menu-list-item-action:focus-visible,.menu-link:focus-visible{outline:none!important}.horizontalNavigation-list-item-action:focus-visible:before,.menu-list-item-action:focus-visible:before,.menu-link:focus-visible:before{outline:2px solid var(--palettes-product-700);outline-offset:2px}.horizontalNavigation-list-item-action:not(.is-disabled,[disabled]):hover:not(.is-active,[aria-current=page]),.menu-list-item-action:not(.is-disabled,[disabled]):hover:not(.is-active,[aria-current=page]),.menu-link:not(.is-disabled,[disabled]):hover:not(.is-active,[aria-current=page]){color:var(--palettes-neutral-900)}.horizontalNavigation-list-item-action:not(.is-disabled,[disabled]):hover .label,.menu-list-item-action:not(.is-disabled,[disabled]):hover .label,.menu-link:not(.is-disabled,[disabled]):hover .label{background-color:var(--palettes-100, var(--palettes-product-100));color:var(--palettes-700, var(--palettes-product-700))}.horizontalNavigation-list-item-action:not(.is-disabled,[disabled]):hover:after,.menu-list-item-action:not(.is-disabled,[disabled]):hover:after,.menu-link:not(.is-disabled,[disabled]):hover:after{--components-horizontalNavigation-listItemActionTransform: scale(.75, 1)}.horizontalNavigation-list-item-action .link-text,.menu-list-item-action .link-text,.menu-link .link-text{text-decoration:none}.horizontalNavigation-link-placeholder:after,.menu-link-placeholder:after{content:attr(data-content-after);display:block;block-size:0;overflow:hidden;font-weight:var(--pr-t-font-fontWeight-semibold)}}@layer mods{.horizontalNavigation.mod-header,.menu.mod-header{--components-horizontalNavigation-listPadding: 0 var(--pr-t-spacings-500)}.horizontalNavigation.mod-S .horizontalNavigation-list-item-action,.horizontalNavigation.mod-S .menu-list-item-action,.horizontalNavigation.mod-S .menu-link,.menu.mod-S .horizontalNavigation-list-item-action,.menu.mod-S .menu-list-item-action,.menu.mod-S .menu-link{--components-horizontalNavigation-listItemActionFont: var(--pr-t-font-body-S);--components-horizontalNavigation-listItemActionPadding: var(--pr-t-spacings-150) 0}.horizontalNavigation.mod-S .horizontalNavigation-list-item-action:before,.horizontalNavigation.mod-S .menu-list-item-action:before,.horizontalNavigation.mod-S .menu-link:before,.menu.mod-S .horizontalNavigation-list-item-action:before,.menu.mod-S .menu-list-item-action:before,.menu.mod-S .menu-link:before{inset-block:calc(var(--components-horizontalNavigation-listItemActionPaddingBlock) - var(--pr-t-spacings-75));inset-inline:calc(var(--components-horizontalNavigation-listItemActionPaddingInline) - var(--pr-t-spacings-25))}.horizontalNavigation.mod-S .menu-link,.menu.mod-S .menu-link{margin-inline-end:var(--pr-t-spacings-300)}.horizontalNavigation.mod-S .label,.menu.mod-S .label{block-size:var(--pr-t-font-body-S-lineHeight);min-inline-size:var(--pr-t-font-body-S-lineHeight);line-height:var(--pr-t-font-body-S-lineHeight);padding:0}.horizontalNavigation.mod-S .numericBadge,.menu.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)}.horizontalNavigation.mod-noBorder:after,.menu.mod-noBorder:after{--components-horizontalNavigation-borderContent: none}.horizontalNavigation.mod-vertical:after,.menu.mod-vertical:after{--components-horizontalNavigation-borderContent: none}.horizontalNavigation.mod-vertical .horizontalNavigation-list,.horizontalNavigation.mod-vertical .menu-list,.menu.mod-vertical .horizontalNavigation-list,.menu.mod-vertical .menu-list{--components-horizontalNavigation-listDirection: column;--components-horizontalNavigation-listGap: 0;--components-horizontalNavigation-listAlign: stretch}.horizontalNavigation.mod-vertical .horizontalNavigation-list-item-action,.horizontalNavigation.mod-vertical .menu-list-item-action,.menu.mod-vertical .horizontalNavigation-list-item-action,.menu.mod-vertical .menu-list-item-action{--components-horizontalNavigation-listItemActionPadding: var(--pr-t-spacings-50) var(--pr-t-spacings-200);--components-horizontalNavigation-listItemActionAlign: left}.horizontalNavigation.mod-vertical .horizontalNavigation-list-item-action:before,.horizontalNavigation.mod-vertical .menu-list-item-action:before,.menu.mod-vertical .horizontalNavigation-list-item-action:before,.menu.mod-vertical .menu-list-item-action:before{inset-block:calc(var(--components-horizontalNavigation-listItemActionPaddingBlock) - var(--pr-t-spacings-150) - var(--pr-t-spacings-25));inset-inline:calc(var(--components-horizontalNavigation-listItemActionPaddingInline) + var(--pr-t-spacings-150) + var(--pr-t-spacings-25))}.horizontalNavigation.mod-vertical .horizontalNavigation-list-item-action:after,.horizontalNavigation.mod-vertical .menu-list-item-action:after,.menu.mod-vertical .horizontalNavigation-list-item-action:after,.menu.mod-vertical .menu-list-item-action:after{--components-horizontalNavigation-listItemActionTransform: scale(1, 0);--components-horizontalNavigation-listItemActionInset: 0 auto 0 0;--components-horizontalNavigation-listItemActionRadius: 0 var(--pr-t-border-radius-default) var(--pr-t-border-radius-default) 0;--components-horizontalNavigation-listItemActionRadiusWidth: var(--components-horizontalNavigation-listItemActionSize);--components-horizontalNavigation-listItemActionRadiusHeight: auto}.horizontalNavigation.mod-vertical .horizontalNavigation-list-item-action:hover:after,.horizontalNavigation.mod-vertical .horizontalNavigation-list-item-action[aria-current=page]:hover:after,.horizontalNavigation.mod-vertical .menu-list-item-action:hover:after,.horizontalNavigation.mod-vertical .menu-list-item-action[aria-current=page]:hover:after,.menu.mod-vertical .horizontalNavigation-list-item-action:hover:after,.menu.mod-vertical .horizontalNavigation-list-item-action[aria-current=page]:hover:after,.menu.mod-vertical .menu-list-item-action:hover:after,.menu.mod-vertical .menu-list-item-action[aria-current=page]:hover:after{--components-horizontalNavigation-listItemActionTransform: scale(1, .75)}.horizontalNavigation.mod-vertical .horizontalNavigation-list-item-action[aria-current=page]:after,.horizontalNavigation.mod-vertical .horizontalNavigation-list-item-action.is-active:after,.horizontalNavigation.mod-vertical .menu-list-item-action[aria-current=page]:after,.horizontalNavigation.mod-vertical .menu-list-item-action.is-active:after,.menu.mod-vertical .horizontalNavigation-list-item-action[aria-current=page]:after,.menu.mod-vertical .horizontalNavigation-list-item-action.is-active:after,.menu.mod-vertical .menu-list-item-action[aria-current=page]:after,.menu.mod-vertical .menu-list-item-action.is-active:after{--components-horizontalNavigation-listItemActionTransform: scale(1)}.horizontalNavigation.mod-vertical.mod-S .horizontalNavigation-list-item-action,.horizontalNavigation.mod-vertical.mod-S .menu-list-item-action,.menu.mod-vertical.mod-S .horizontalNavigation-list-item-action,.menu.mod-vertical.mod-S .menu-list-item-action{--components-horizontalNavigation-listItemActionPadding: var(--pr-t-spacings-50) var(--pr-t-spacings-150)}.horizontalNavigation.mod-vertical.mod-S .horizontalNavigation-list-item-action:before,.horizontalNavigation.mod-vertical.mod-S .menu-list-item-action:before,.menu.mod-vertical.mod-S .horizontalNavigation-list-item-action:before,.menu.mod-vertical.mod-S .menu-list-item-action:before{inset-block:calc(var(--components-horizontalNavigation-listItemActionPaddingBlock) - var(--pr-t-spacings-150) - var(--pr-t-spacings-25));inset-inline:calc(var(--components-horizontalNavigation-listItemActionPaddingInline) + var(--pr-t-spacings-100) + var(--pr-t-spacings-25))}}@layer mods{.horizontalNavigation-list-item-action[aria-current=page],.horizontalNavigation-list-item-action.is-active,.horizontalNavigation-list-item-action.active,.menu-link[aria-current=page],.menu-link.is-active,.menu-link.active,.menu-list-item-action[aria-current=page],.menu-list-item-action.is-active,.menu-list-item-action.active{--components-horizontalNavigation-listItemActionColor: var(--palettes-700, var(--palettes-product-700))}.horizontalNavigation-list-item-action[aria-current=page] .label,.horizontalNavigation-list-item-action.is-active .label,.horizontalNavigation-list-item-action.active .label,.menu-link[aria-current=page] .label,.menu-link.is-active .label,.menu-link.active .label,.menu-list-item-action[aria-current=page] .label,.menu-list-item-action.is-active .label,.menu-list-item-action.active .label{background-color:var(--palettes-100, var(--palettes-product-100));color:var(--palettes-700, var(--palettes-product-700))}.horizontalNavigation-list-item-action[aria-current=page]:after,.horizontalNavigation-list-item-action.is-active:after,.horizontalNavigation-list-item-action.active:after,.menu-link[aria-current=page]:after,.menu-link.is-active:after,.menu-link.active:after,.menu-list-item-action[aria-current=page]:after,.menu-list-item-action.is-active:after,.menu-list-item-action.active:after{--components-horizontalNavigation-listItemActionTransform: scale(1)}.horizontalNavigation-list-item-action[aria-current=page]:focus-visible:after,.horizontalNavigation-list-item-action.is-active:focus-visible:after,.horizontalNavigation-list-item-action.active:focus-visible:after,.menu-link[aria-current=page]:focus-visible:after,.menu-link.is-active:focus-visible:after,.menu-link.active:focus-visible:after,.menu-list-item-action[aria-current=page]:focus-visible:after,.menu-list-item-action.is-active:focus-visible:after,.menu-list-item-action.active:focus-visible:after{--components-horizontalNavigation-listItemActionTransform: scale(.75, 1)}.horizontalNavigation-list-item-action[aria-current=page] .numericBadge,.horizontalNavigation-list-item-action.is-active .numericBadge,.horizontalNavigation-list-item-action.active .numericBadge,.menu-link[aria-current=page] .numericBadge,.menu-link.is-active .numericBadge,.menu-link.active .numericBadge,.menu-list-item-action[aria-current=page] .numericBadge,.menu-list-item-action.is-active .numericBadge,.menu-list-item-action.active .numericBadge{--components-numericBadge-background: var(--palettes-200, var(--palettes-product-200));--components-numericBadge-color: var(--palettes-800, var(--palettes-product-800))}.horizontalNavigation-list-item-action.is-disabled,.horizontalNavigation-list-item-action.is-disabled .label,.horizontalNavigation-list-item-action.disabled,.horizontalNavigation-list-item-action.disabled .label,.horizontalNavigation-list-item-action[disabled],.horizontalNavigation-list-item-action[disabled] .label,.menu-link.is-disabled,.menu-link.is-disabled .label,.menu-link.disabled,.menu-link.disabled .label,.menu-link[disabled],.menu-link[disabled] .label,.menu-list-item-action.is-disabled,.menu-list-item-action.is-disabled .label,.menu-list-item-action.disabled,.menu-list-item-action.disabled .label,.menu-list-item-action[disabled],.menu-list-item-action[disabled] .label{color:var(--palettes-neutral-500);pointer-events:none}.horizontalNavigation-list-item-action.is-disabled .numericBadge,.horizontalNavigation-list-item-action.disabled .numericBadge,.horizontalNavigation-list-item-action[disabled] .numericBadge,.menu-link.is-disabled .numericBadge,.menu-link.disabled .numericBadge,.menu-link[disabled] .numericBadge,.menu-list-item-action.is-disabled .numericBadge,.menu-list-item-action.disabled .numericBadge,.menu-list-item-action[disabled] .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
31
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: HorizontalNavigationComponent, isStandalone: true, selector: "lu-horizontal-navigation", inputs: { noBorder: { classPropertyName: "noBorder", publicName: "noBorder", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.mod-noBorder": "noBorder()", "class.mod-S": "size() === `S`", "class.mod-vertical": "vertical()" }, classAttribute: "horizontalNavigation" }, queries: [{ propertyName: "links", predicate: HorizontalNavigationLinkDirective, isSignal: true }], ngImport: i0, template: "@if (container()) {\n\t<div class=\"horizontalNavigation-containerOptional\">\n\t\t<ng-container *ngTemplateOutlet=\"horizontalNavigationList\" />\n\t</div>\n} @else {\n\t<ng-container *ngTemplateOutlet=\"horizontalNavigationList\" />\n}\n\n<ng-template #horizontalNavigationList>\n\t<ul class=\"horizontalNavigation-list\">\n\t\t@for (link of links(); track $index) {\n\t\t\t<li class=\"horizontalNavigation-list-item\">\n\t\t\t\t<ng-container *ngTemplateOutlet=\"link.template\" />\n\t\t\t</li>\n\t\t}\n\t</ul>\n</ng-template>\n", styles: ["@layer components{.horizontalNavigation,.menu{--components-horizontalNavigation-borderContent: \"\";--components-horizontalNavigation-listPadding: 0;--components-horizontalNavigation-listItemActionPaddingBlock: var(--pr-t-spacings-200);--components-horizontalNavigation-listItemActionPaddingInline: 0px;--components-horizontalNavigation-listItemActionPadding: var(--components-horizontalNavigation-listItemActionPaddingBlock) var(--components-horizontalNavigation-listItemActionPaddingInline);--components-horizontalNavigation-listGap: 0 var(--pr-t-spacings-400);--components-horizontalNavigation-listDirection: row;--components-horizontalNavigation-listAlign: flex-end;--components-horizontalNavigation-listItemActionAlign: center;--components-horizontalNavigation-listItemActionTransform: scale(0, 1);--components-horizontalNavigation-listItemActionColor: var(--pr-t-color-text);--components-horizontalNavigation-listItemActionSize: 2px;--components-horizontalNavigation-listItemActionFont: inherit;--components-horizontalNavigation-listItemActionInset: auto 0 0 0;--components-horizontalNavigation-listItemActionRadius: var(--pr-t-border-radius-default) var(--pr-t-border-radius-default) 0 0;--components-horizontalNavigation-listItemActionRadiusWidth: auto;--components-horizontalNavigation-listItemActionRadiusHeight: var(--components-horizontalNavigation-listItemActionSize);column-gap:var(--pr-t-spacings-400);align-items:center;display:flex;position:relative;flex-wrap:wrap;padding:var(--components-horizontalNavigation-listPadding)}.horizontalNavigation:after,.menu:after{content:var(--components-horizontalNavigation-borderContent);border-block-end-width:var(--commons-divider-width);border-block-end-color:var(--commons-divider-color);border-block-end-style:solid;position:absolute;block-size:1px;inset:auto 0 0}.horizontalNavigation .label,.menu .label{margin-inline-end:0;background-color:var(--palettes-neutral-100);color:var(--palettes-neutral-700)}.horizontalNavigation-containerOptional,.menu-containerOptional{max-inline-size:var(--commons-container-maxWidth);padding:var(--commons-container-padding)}.horizontalNavigation-list,.menu-list{margin:0;padding:0;list-style-type:none;align-items:var(--components-horizontalNavigation-listAlign);gap:var(--components-horizontalNavigation-listGap);flex-direction:var(--components-horizontalNavigation-listDirection);display:flex;flex-grow:1;flex-wrap:wrap}.scrollBox .horizontalNavigation-list,.scrollBox .menu-list{flex-wrap:nowrap}.horizontalNavigation-list-item-action,.menu-list-item-action,.menu-link{padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;font:var(--components-horizontalNavigation-listItemActionFont);padding:var(--components-horizontalNavigation-listItemActionPadding);border-radius:var(--pr-t-border-radius-small);color:var(--components-horizontalNavigation-listItemActionColor);display:inline-flex;text-align:var(--components-horizontalNavigation-listItemActionAlign);transition-duration:var(--commons-animations-durations-fast);gap:var(--pr-t-spacings-100);align-items:center;transition-property:color;position:relative;text-decoration:none;inline-size:auto;z-index:1;scroll-margin-inline:var(--pr-t-spacings-200)}.horizontalNavigation-list-item-action:before,.menu-list-item-action:before,.menu-link:before{content:\"\";position:absolute;inset-block:calc(var(--components-horizontalNavigation-listItemActionPaddingBlock) - var(--pr-t-spacings-25));inset-inline:calc(var(--components-horizontalNavigation-listItemActionPaddingInline) - var(--pr-t-spacings-25));border-radius:var(--pr-t-border-radius-small)}.horizontalNavigation-list-item-action:after,.menu-list-item-action:after,.menu-link:after{background-color:var(--palettes-700, var(--palettes-product-700));border-radius:var(--components-horizontalNavigation-listItemActionRadius);transition-duration:var(--commons-animations-durations-fast);block-size:var(--components-horizontalNavigation-listItemActionRadiusHeight);inline-size:var(--components-horizontalNavigation-listItemActionRadiusWidth);transform:var(--components-horizontalNavigation-listItemActionTransform);inset:var(--components-horizontalNavigation-listItemActionInset);transition-property:transform;display:block;position:absolute;z-index:1;content:\"\"}.horizontalNavigation-list-item-action:focus-visible,.menu-list-item-action:focus-visible,.menu-link:focus-visible{outline:none!important}.horizontalNavigation-list-item-action:focus-visible:before,.menu-list-item-action:focus-visible:before,.menu-link:focus-visible:before{outline:2px solid var(--palettes-product-700);outline-offset:2px}.horizontalNavigation-list-item-action:not(.is-disabled,[disabled]):hover:not(.is-active,[aria-current=page]),.menu-list-item-action:not(.is-disabled,[disabled]):hover:not(.is-active,[aria-current=page]),.menu-link:not(.is-disabled,[disabled]):hover:not(.is-active,[aria-current=page]){color:var(--palettes-neutral-900)}.horizontalNavigation-list-item-action:not(.is-disabled,[disabled]):hover .label,.menu-list-item-action:not(.is-disabled,[disabled]):hover .label,.menu-link:not(.is-disabled,[disabled]):hover .label{background-color:var(--palettes-100, var(--palettes-product-100));color:var(--palettes-700, var(--palettes-product-700))}.horizontalNavigation-list-item-action:not(.is-disabled,[disabled]):hover:after,.menu-list-item-action:not(.is-disabled,[disabled]):hover:after,.menu-link:not(.is-disabled,[disabled]):hover:after{--components-horizontalNavigation-listItemActionTransform: scale(.75, 1)}.horizontalNavigation-list-item-action .link-text,.menu-list-item-action .link-text,.menu-link .link-text{text-decoration:none}.horizontalNavigation-link-placeholder:after,.menu-link-placeholder:after{content:attr(data-content-after);display:block;block-size:0;overflow:hidden;font-weight:var(--pr-t-font-fontWeight-semibold)}}@layer mods{.horizontalNavigation.mod-header,.menu.mod-header{--components-horizontalNavigation-listPadding: 0 var(--pr-t-spacings-500)}.horizontalNavigation.mod-S .horizontalNavigation-list-item-action,.horizontalNavigation.mod-S .menu-list-item-action,.horizontalNavigation.mod-S .menu-link,.menu.mod-S .horizontalNavigation-list-item-action,.menu.mod-S .menu-list-item-action,.menu.mod-S .menu-link{--components-horizontalNavigation-listItemActionFont: var(--pr-t-font-body-S);--components-horizontalNavigation-listItemActionPadding: var(--pr-t-spacings-150) 0}.horizontalNavigation.mod-S .horizontalNavigation-list-item-action:before,.horizontalNavigation.mod-S .menu-list-item-action:before,.horizontalNavigation.mod-S .menu-link:before,.menu.mod-S .horizontalNavigation-list-item-action:before,.menu.mod-S .menu-list-item-action:before,.menu.mod-S .menu-link:before{inset-block:calc(var(--components-horizontalNavigation-listItemActionPaddingBlock) - var(--pr-t-spacings-75));inset-inline:calc(var(--components-horizontalNavigation-listItemActionPaddingInline) - var(--pr-t-spacings-25))}.horizontalNavigation.mod-S .menu-link,.menu.mod-S .menu-link{margin-inline-end:var(--pr-t-spacings-300)}.horizontalNavigation.mod-S .label,.menu.mod-S .label{block-size:var(--pr-t-font-body-S-lineHeight);min-inline-size:var(--pr-t-font-body-S-lineHeight);line-height:var(--pr-t-font-body-S-lineHeight);padding:0}.horizontalNavigation.mod-S .numericBadge,.menu.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)}.horizontalNavigation.mod-noBorder:after,.menu.mod-noBorder:after{--components-horizontalNavigation-borderContent: none}.horizontalNavigation.mod-vertical:after,.menu.mod-vertical:after{--components-horizontalNavigation-borderContent: none}.horizontalNavigation.mod-vertical .horizontalNavigation-list,.horizontalNavigation.mod-vertical .menu-list,.menu.mod-vertical .horizontalNavigation-list,.menu.mod-vertical .menu-list{--components-horizontalNavigation-listDirection: column;--components-horizontalNavigation-listGap: 0;--components-horizontalNavigation-listAlign: stretch}.horizontalNavigation.mod-vertical .horizontalNavigation-list-item-action,.horizontalNavigation.mod-vertical .menu-list-item-action,.menu.mod-vertical .horizontalNavigation-list-item-action,.menu.mod-vertical .menu-list-item-action{--components-horizontalNavigation-listItemActionPadding: var(--pr-t-spacings-50) var(--pr-t-spacings-200);--components-horizontalNavigation-listItemActionAlign: left}.horizontalNavigation.mod-vertical .horizontalNavigation-list-item-action:before,.horizontalNavigation.mod-vertical .menu-list-item-action:before,.menu.mod-vertical .horizontalNavigation-list-item-action:before,.menu.mod-vertical .menu-list-item-action:before{inset-block:calc(var(--components-horizontalNavigation-listItemActionPaddingBlock) - var(--pr-t-spacings-150) - var(--pr-t-spacings-25));inset-inline:calc(var(--components-horizontalNavigation-listItemActionPaddingInline) + var(--pr-t-spacings-150) + var(--pr-t-spacings-25))}.horizontalNavigation.mod-vertical .horizontalNavigation-list-item-action:after,.horizontalNavigation.mod-vertical .menu-list-item-action:after,.menu.mod-vertical .horizontalNavigation-list-item-action:after,.menu.mod-vertical .menu-list-item-action:after{--components-horizontalNavigation-listItemActionTransform: scale(1, 0);--components-horizontalNavigation-listItemActionInset: 0 auto 0 0;--components-horizontalNavigation-listItemActionRadius: 0 var(--pr-t-border-radius-default) var(--pr-t-border-radius-default) 0;--components-horizontalNavigation-listItemActionRadiusWidth: var(--components-horizontalNavigation-listItemActionSize);--components-horizontalNavigation-listItemActionRadiusHeight: auto}.horizontalNavigation.mod-vertical .horizontalNavigation-list-item-action:hover:after,.horizontalNavigation.mod-vertical .horizontalNavigation-list-item-action[aria-current=page]:hover:after,.horizontalNavigation.mod-vertical .menu-list-item-action:hover:after,.horizontalNavigation.mod-vertical .menu-list-item-action[aria-current=page]:hover:after,.menu.mod-vertical .horizontalNavigation-list-item-action:hover:after,.menu.mod-vertical .horizontalNavigation-list-item-action[aria-current=page]:hover:after,.menu.mod-vertical .menu-list-item-action:hover:after,.menu.mod-vertical .menu-list-item-action[aria-current=page]:hover:after{--components-horizontalNavigation-listItemActionTransform: scale(1, .75)}.horizontalNavigation.mod-vertical .horizontalNavigation-list-item-action[aria-current=page]:after,.horizontalNavigation.mod-vertical .horizontalNavigation-list-item-action.is-active:after,.horizontalNavigation.mod-vertical .menu-list-item-action[aria-current=page]:after,.horizontalNavigation.mod-vertical .menu-list-item-action.is-active:after,.menu.mod-vertical .horizontalNavigation-list-item-action[aria-current=page]:after,.menu.mod-vertical .horizontalNavigation-list-item-action.is-active:after,.menu.mod-vertical .menu-list-item-action[aria-current=page]:after,.menu.mod-vertical .menu-list-item-action.is-active:after{--components-horizontalNavigation-listItemActionTransform: scale(1)}.horizontalNavigation.mod-vertical.mod-S .horizontalNavigation-list-item-action,.horizontalNavigation.mod-vertical.mod-S .menu-list-item-action,.menu.mod-vertical.mod-S .horizontalNavigation-list-item-action,.menu.mod-vertical.mod-S .menu-list-item-action{--components-horizontalNavigation-listItemActionPadding: var(--pr-t-spacings-50) var(--pr-t-spacings-150)}.horizontalNavigation.mod-vertical.mod-S .horizontalNavigation-list-item-action:before,.horizontalNavigation.mod-vertical.mod-S .menu-list-item-action:before,.menu.mod-vertical.mod-S .horizontalNavigation-list-item-action:before,.menu.mod-vertical.mod-S .menu-list-item-action:before{inset-block:calc(var(--components-horizontalNavigation-listItemActionPaddingBlock) - var(--pr-t-spacings-150) - var(--pr-t-spacings-25));inset-inline:calc(var(--components-horizontalNavigation-listItemActionPaddingInline) + var(--pr-t-spacings-100) + var(--pr-t-spacings-25))}}@layer mods{.horizontalNavigation-list-item-action[aria-current=page],.horizontalNavigation-list-item-action.is-active,.horizontalNavigation-list-item-action.active,.menu-link[aria-current=page],.menu-link.is-active,.menu-link.active,.menu-list-item-action[aria-current=page],.menu-list-item-action.is-active,.menu-list-item-action.active{--components-horizontalNavigation-listItemActionColor: var(--palettes-700, var(--palettes-product-700))}.horizontalNavigation-list-item-action[aria-current=page] .label,.horizontalNavigation-list-item-action.is-active .label,.horizontalNavigation-list-item-action.active .label,.menu-link[aria-current=page] .label,.menu-link.is-active .label,.menu-link.active .label,.menu-list-item-action[aria-current=page] .label,.menu-list-item-action.is-active .label,.menu-list-item-action.active .label{background-color:var(--palettes-100, var(--palettes-product-100));color:var(--palettes-700, var(--palettes-product-700))}.horizontalNavigation-list-item-action[aria-current=page]:after,.horizontalNavigation-list-item-action.is-active:after,.horizontalNavigation-list-item-action.active:after,.menu-link[aria-current=page]:after,.menu-link.is-active:after,.menu-link.active:after,.menu-list-item-action[aria-current=page]:after,.menu-list-item-action.is-active:after,.menu-list-item-action.active:after{--components-horizontalNavigation-listItemActionTransform: scale(1)}.horizontalNavigation-list-item-action[aria-current=page]:focus-visible:after,.horizontalNavigation-list-item-action.is-active:focus-visible:after,.horizontalNavigation-list-item-action.active:focus-visible:after,.menu-link[aria-current=page]:focus-visible:after,.menu-link.is-active:focus-visible:after,.menu-link.active:focus-visible:after,.menu-list-item-action[aria-current=page]:focus-visible:after,.menu-list-item-action.is-active:focus-visible:after,.menu-list-item-action.active:focus-visible:after{--components-horizontalNavigation-listItemActionTransform: scale(.75, 1)}.horizontalNavigation-list-item-action[aria-current=page] .numericBadge,.horizontalNavigation-list-item-action.is-active .numericBadge,.horizontalNavigation-list-item-action.active .numericBadge,.menu-link[aria-current=page] .numericBadge,.menu-link.is-active .numericBadge,.menu-link.active .numericBadge,.menu-list-item-action[aria-current=page] .numericBadge,.menu-list-item-action.is-active .numericBadge,.menu-list-item-action.active .numericBadge{--components-numericBadge-background: var(--palettes-200, var(--palettes-product-200));--components-numericBadge-color: var(--palettes-800, var(--palettes-product-800))}.horizontalNavigation-list-item-action.is-disabled,.horizontalNavigation-list-item-action.is-disabled .label,.horizontalNavigation-list-item-action.disabled,.horizontalNavigation-list-item-action.disabled .label,.horizontalNavigation-list-item-action[disabled],.horizontalNavigation-list-item-action[disabled] .label,.menu-link.is-disabled,.menu-link.is-disabled .label,.menu-link.disabled,.menu-link.disabled .label,.menu-link[disabled],.menu-link[disabled] .label,.menu-list-item-action.is-disabled,.menu-list-item-action.is-disabled .label,.menu-list-item-action.disabled,.menu-list-item-action.disabled .label,.menu-list-item-action[disabled],.menu-list-item-action[disabled] .label{color:var(--palettes-neutral-500);pointer-events:none}.horizontalNavigation-list-item-action.is-disabled .numericBadge,.horizontalNavigation-list-item-action.disabled .numericBadge,.horizontalNavigation-list-item-action[disabled] .numericBadge,.menu-link.is-disabled .numericBadge,.menu-link.disabled .numericBadge,.menu-link[disabled] .numericBadge,.menu-list-item-action.is-disabled .numericBadge,.menu-list-item-action.disabled .numericBadge,.menu-list-item-action[disabled] .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
29
32
|
}
|
|
30
33
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: HorizontalNavigationComponent, decorators: [{
|
|
31
34
|
type: Component,
|
|
@@ -34,7 +37,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
34
37
|
'[class.mod-noBorder]': 'noBorder()',
|
|
35
38
|
'[class.mod-S]': 'size() === `S`',
|
|
36
39
|
'[class.mod-vertical]': 'vertical()',
|
|
37
|
-
}, template: "@if (container()) {\n\t<div class=\"horizontalNavigation-containerOptional\">\n\t\t<ng-container *ngTemplateOutlet=\"horizontalNavigationList\" />\n\t</div>\n} @else {\n\t<ng-container *ngTemplateOutlet=\"horizontalNavigationList\" />\n}\n\n<ng-template #horizontalNavigationList>\n\t<ul class=\"horizontalNavigation-list\">\n\t\t@for (link of links(); track $index) {\n\t\t\t<li class=\"horizontalNavigation-list-item\">\n\t\t\t\t<ng-container *ngTemplateOutlet=\"link.template\" />\n\t\t\t</li>\n\t\t}\n\t</ul>\n</ng-template>\n", styles: ["@layer components{.horizontalNavigation,.menu{--components-horizontalNavigation-borderContent: \"\";--components-horizontalNavigation-listPadding: 0;--components-horizontalNavigation-listItemActionPaddingBlock: var(--pr-t-spacings-200);--components-horizontalNavigation-listItemActionPaddingInline: 0px;--components-horizontalNavigation-listItemActionPadding: var(--components-horizontalNavigation-listItemActionPaddingBlock) var(--components-horizontalNavigation-listItemActionPaddingInline);--components-horizontalNavigation-listGap: 0 var(--pr-t-spacings-400);--components-horizontalNavigation-listDirection: row;--components-horizontalNavigation-listAlign: flex-end;--components-horizontalNavigation-listItemActionAlign: center;--components-horizontalNavigation-listItemActionTransform: scale(0, 1);--components-horizontalNavigation-listItemActionColor: var(--pr-t-color-text);--components-horizontalNavigation-listItemActionSize: 2px;--components-horizontalNavigation-listItemActionFont: inherit;--components-horizontalNavigation-listItemActionInset: auto 0 0 0;--components-horizontalNavigation-listItemActionRadius: var(--pr-t-border-radius-default) var(--pr-t-border-radius-default) 0 0;--components-horizontalNavigation-listItemActionRadiusWidth: auto;--components-horizontalNavigation-listItemActionRadiusHeight: var(--components-horizontalNavigation-listItemActionSize);column-gap:var(--pr-t-spacings-400);align-items:center;display:flex;position:relative;flex-wrap:wrap;padding:var(--components-horizontalNavigation-listPadding)}.horizontalNavigation:after,.menu:after{content:var(--components-horizontalNavigation-borderContent);border-block-end-width:var(--commons-divider-width);border-block-end-color:var(--commons-divider-color);border-block-end-style:solid;position:absolute;block-size:1px;inset:auto 0 0}.horizontalNavigation .label,.menu .label{margin-inline-end:0;background-color:var(--palettes-neutral-100);color:var(--palettes-neutral-700)}.horizontalNavigation-containerOptional,.menu-containerOptional{max-inline-size:var(--commons-container-maxWidth);padding-inline:var(--commons-container-padding)}.horizontalNavigation-list,.menu-list{margin:0;padding:0;list-style-type:none;align-items:var(--components-horizontalNavigation-listAlign);gap:var(--components-horizontalNavigation-listGap);flex-direction:var(--components-horizontalNavigation-listDirection);display:flex;flex-grow:1;flex-wrap:wrap}.scrollBox .horizontalNavigation-list,.scrollBox .menu-list{flex-wrap:nowrap}.horizontalNavigation-list-item-action,.menu-list-item-action,.menu-link{padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;font:var(--components-horizontalNavigation-listItemActionFont);padding:var(--components-horizontalNavigation-listItemActionPadding);border-radius:var(--pr-t-border-radius-small);color:var(--components-horizontalNavigation-listItemActionColor);display:inline-flex;text-align:var(--components-horizontalNavigation-listItemActionAlign);transition-duration:var(--commons-animations-durations-fast);gap:var(--pr-t-spacings-100);align-items:center;transition-property:color;position:relative;text-decoration:none;inline-size:auto;z-index:1;scroll-margin-inline:var(--pr-t-spacings-200)}.horizontalNavigation-list-item-action:before,.menu-list-item-action:before,.menu-link:before{content:\"\";position:absolute;inset-block:calc(var(--components-horizontalNavigation-listItemActionPaddingBlock) - var(--pr-t-spacings-25));inset-inline:calc(var(--components-horizontalNavigation-listItemActionPaddingInline) - var(--pr-t-spacings-25));border-radius:var(--pr-t-border-radius-small)}.horizontalNavigation-list-item-action:after,.menu-list-item-action:after,.menu-link:after{background-color:var(--palettes-700, var(--palettes-product-700));border-radius:var(--components-horizontalNavigation-listItemActionRadius);transition-duration:var(--commons-animations-durations-fast);block-size:var(--components-horizontalNavigation-listItemActionRadiusHeight);inline-size:var(--components-horizontalNavigation-listItemActionRadiusWidth);transform:var(--components-horizontalNavigation-listItemActionTransform);inset:var(--components-horizontalNavigation-listItemActionInset);transition-property:transform;display:block;position:absolute;z-index:1;content:\"\"}.horizontalNavigation-list-item-action:focus-visible,.menu-list-item-action:focus-visible,.menu-link:focus-visible{outline:none!important}.horizontalNavigation-list-item-action:focus-visible:before,.menu-list-item-action:focus-visible:before,.menu-link:focus-visible:before{outline:2px solid var(--palettes-product-700);outline-offset:2px}.horizontalNavigation-list-item-action:not(.is-disabled,[disabled]):hover:not(.is-active,[aria-current=page]),.menu-list-item-action:not(.is-disabled,[disabled]):hover:not(.is-active,[aria-current=page]),.menu-link:not(.is-disabled,[disabled]):hover:not(.is-active,[aria-current=page]){color:var(--palettes-neutral-900)}.horizontalNavigation-list-item-action:not(.is-disabled,[disabled]):hover .label,.menu-list-item-action:not(.is-disabled,[disabled]):hover .label,.menu-link:not(.is-disabled,[disabled]):hover .label{background-color:var(--palettes-100, var(--palettes-product-100));color:var(--palettes-700, var(--palettes-product-700))}.horizontalNavigation-list-item-action:not(.is-disabled,[disabled]):hover:after,.menu-list-item-action:not(.is-disabled,[disabled]):hover:after,.menu-link:not(.is-disabled,[disabled]):hover:after{--components-horizontalNavigation-listItemActionTransform: scale(.75, 1)}.horizontalNavigation-list-item-action .link-text,.menu-list-item-action .link-text,.menu-link .link-text{text-decoration:none}.horizontalNavigation-link-placeholder:after,.menu-link-placeholder:after{content:attr(data-content-after);display:block;block-size:0;overflow:hidden;font-weight:var(--pr-t-font-fontWeight-semibold)}}@layer mods{.horizontalNavigation.mod-header,.menu.mod-header{--components-horizontalNavigation-listPadding: 0 var(--pr-t-spacings-500)}.horizontalNavigation.mod-S .horizontalNavigation-list-item-action,.horizontalNavigation.mod-S .menu-list-item-action,.horizontalNavigation.mod-S .menu-link,.menu.mod-S .horizontalNavigation-list-item-action,.menu.mod-S .menu-list-item-action,.menu.mod-S .menu-link{--components-horizontalNavigation-listItemActionFont: var(--pr-t-font-body-S);--components-horizontalNavigation-listItemActionPadding: var(--pr-t-spacings-150) 0}.horizontalNavigation.mod-S .horizontalNavigation-list-item-action:before,.horizontalNavigation.mod-S .menu-list-item-action:before,.horizontalNavigation.mod-S .menu-link:before,.menu.mod-S .horizontalNavigation-list-item-action:before,.menu.mod-S .menu-list-item-action:before,.menu.mod-S .menu-link:before{inset-block:calc(var(--components-horizontalNavigation-listItemActionPaddingBlock) - var(--pr-t-spacings-75));inset-inline:calc(var(--components-horizontalNavigation-listItemActionPaddingInline) - var(--pr-t-spacings-25))}.horizontalNavigation.mod-S .menu-link,.menu.mod-S .menu-link{margin-inline-end:var(--pr-t-spacings-300)}.horizontalNavigation.mod-S .label,.menu.mod-S .label{block-size:var(--pr-t-font-body-S-lineHeight);min-inline-size:var(--pr-t-font-body-S-lineHeight);line-height:var(--pr-t-font-body-S-lineHeight);padding:0}.horizontalNavigation.mod-S .numericBadge,.menu.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)}.horizontalNavigation.mod-noBorder:after,.menu.mod-noBorder:after{--components-horizontalNavigation-borderContent: none}.horizontalNavigation.mod-vertical:after,.menu.mod-vertical:after{--components-horizontalNavigation-borderContent: none}.horizontalNavigation.mod-vertical .horizontalNavigation-list,.horizontalNavigation.mod-vertical .menu-list,.menu.mod-vertical .horizontalNavigation-list,.menu.mod-vertical .menu-list{--components-horizontalNavigation-listDirection: column;--components-horizontalNavigation-listGap: 0;--components-horizontalNavigation-listAlign: stretch}.horizontalNavigation.mod-vertical .horizontalNavigation-list-item-action,.horizontalNavigation.mod-vertical .menu-list-item-action,.menu.mod-vertical .horizontalNavigation-list-item-action,.menu.mod-vertical .menu-list-item-action{--components-horizontalNavigation-listItemActionPadding: var(--pr-t-spacings-50) var(--pr-t-spacings-200);--components-horizontalNavigation-listItemActionAlign: left}.horizontalNavigation.mod-vertical .horizontalNavigation-list-item-action:before,.horizontalNavigation.mod-vertical .menu-list-item-action:before,.menu.mod-vertical .horizontalNavigation-list-item-action:before,.menu.mod-vertical .menu-list-item-action:before{inset-block:calc(var(--components-horizontalNavigation-listItemActionPaddingBlock) - var(--pr-t-spacings-150) - var(--pr-t-spacings-25));inset-inline:calc(var(--components-horizontalNavigation-listItemActionPaddingInline) + var(--pr-t-spacings-150) + var(--pr-t-spacings-25))}.horizontalNavigation.mod-vertical .horizontalNavigation-list-item-action:after,.horizontalNavigation.mod-vertical .menu-list-item-action:after,.menu.mod-vertical .horizontalNavigation-list-item-action:after,.menu.mod-vertical .menu-list-item-action:after{--components-horizontalNavigation-listItemActionTransform: scale(1, 0);--components-horizontalNavigation-listItemActionInset: 0 auto 0 0;--components-horizontalNavigation-listItemActionRadius: 0 var(--pr-t-border-radius-default) var(--pr-t-border-radius-default) 0;--components-horizontalNavigation-listItemActionRadiusWidth: var(--components-horizontalNavigation-listItemActionSize);--components-horizontalNavigation-listItemActionRadiusHeight: auto}.horizontalNavigation.mod-vertical .horizontalNavigation-list-item-action:hover:after,.horizontalNavigation.mod-vertical .horizontalNavigation-list-item-action[aria-current=page]:hover:after,.horizontalNavigation.mod-vertical .menu-list-item-action:hover:after,.horizontalNavigation.mod-vertical .menu-list-item-action[aria-current=page]:hover:after,.menu.mod-vertical .horizontalNavigation-list-item-action:hover:after,.menu.mod-vertical .horizontalNavigation-list-item-action[aria-current=page]:hover:after,.menu.mod-vertical .menu-list-item-action:hover:after,.menu.mod-vertical .menu-list-item-action[aria-current=page]:hover:after{--components-horizontalNavigation-listItemActionTransform: scale(1, .75)}.horizontalNavigation.mod-vertical .horizontalNavigation-list-item-action[aria-current=page]:after,.horizontalNavigation.mod-vertical .horizontalNavigation-list-item-action.is-active:after,.horizontalNavigation.mod-vertical .menu-list-item-action[aria-current=page]:after,.horizontalNavigation.mod-vertical .menu-list-item-action.is-active:after,.menu.mod-vertical .horizontalNavigation-list-item-action[aria-current=page]:after,.menu.mod-vertical .horizontalNavigation-list-item-action.is-active:after,.menu.mod-vertical .menu-list-item-action[aria-current=page]:after,.menu.mod-vertical .menu-list-item-action.is-active:after{--components-horizontalNavigation-listItemActionTransform: scale(1)}.horizontalNavigation.mod-vertical.mod-S .horizontalNavigation-list-item-action,.horizontalNavigation.mod-vertical.mod-S .menu-list-item-action,.menu.mod-vertical.mod-S .horizontalNavigation-list-item-action,.menu.mod-vertical.mod-S .menu-list-item-action{--components-horizontalNavigation-listItemActionPadding: var(--pr-t-spacings-50) var(--pr-t-spacings-150)}.horizontalNavigation.mod-vertical.mod-S .horizontalNavigation-list-item-action:before,.horizontalNavigation.mod-vertical.mod-S .menu-list-item-action:before,.menu.mod-vertical.mod-S .horizontalNavigation-list-item-action:before,.menu.mod-vertical.mod-S .menu-list-item-action:before{inset-block:calc(var(--components-horizontalNavigation-listItemActionPaddingBlock) - var(--pr-t-spacings-150) - var(--pr-t-spacings-25));inset-inline:calc(var(--components-horizontalNavigation-listItemActionPaddingInline) + var(--pr-t-spacings-100) + var(--pr-t-spacings-25))}}@layer mods{.horizontalNavigation-list-item-action[aria-current=page],.horizontalNavigation-list-item-action.is-active,.horizontalNavigation-list-item-action.active,.menu-link[aria-current=page],.menu-link.is-active,.menu-link.active,.menu-list-item-action[aria-current=page],.menu-list-item-action.is-active,.menu-list-item-action.active{--components-horizontalNavigation-listItemActionColor: var(--palettes-700, var(--palettes-product-700))}.horizontalNavigation-list-item-action[aria-current=page] .label,.horizontalNavigation-list-item-action.is-active .label,.horizontalNavigation-list-item-action.active .label,.menu-link[aria-current=page] .label,.menu-link.is-active .label,.menu-link.active .label,.menu-list-item-action[aria-current=page] .label,.menu-list-item-action.is-active .label,.menu-list-item-action.active .label{background-color:var(--palettes-100, var(--palettes-product-100));color:var(--palettes-700, var(--palettes-product-700))}.horizontalNavigation-list-item-action[aria-current=page]:after,.horizontalNavigation-list-item-action.is-active:after,.horizontalNavigation-list-item-action.active:after,.menu-link[aria-current=page]:after,.menu-link.is-active:after,.menu-link.active:after,.menu-list-item-action[aria-current=page]:after,.menu-list-item-action.is-active:after,.menu-list-item-action.active:after{--components-horizontalNavigation-listItemActionTransform: scale(1)}.horizontalNavigation-list-item-action[aria-current=page]:focus-visible:after,.horizontalNavigation-list-item-action.is-active:focus-visible:after,.horizontalNavigation-list-item-action.active:focus-visible:after,.menu-link[aria-current=page]:focus-visible:after,.menu-link.is-active:focus-visible:after,.menu-link.active:focus-visible:after,.menu-list-item-action[aria-current=page]:focus-visible:after,.menu-list-item-action.is-active:focus-visible:after,.menu-list-item-action.active:focus-visible:after{--components-horizontalNavigation-listItemActionTransform: scale(.75, 1)}.horizontalNavigation-list-item-action[aria-current=page] .numericBadge,.horizontalNavigation-list-item-action.is-active .numericBadge,.horizontalNavigation-list-item-action.active .numericBadge,.menu-link[aria-current=page] .numericBadge,.menu-link.is-active .numericBadge,.menu-link.active .numericBadge,.menu-list-item-action[aria-current=page] .numericBadge,.menu-list-item-action.is-active .numericBadge,.menu-list-item-action.active .numericBadge{--components-numericBadge-background: var(--palettes-200, var(--palettes-product-200));--components-numericBadge-color: var(--palettes-800, var(--palettes-product-800))}.horizontalNavigation-list-item-action.is-disabled,.horizontalNavigation-list-item-action.is-disabled .label,.horizontalNavigation-list-item-action.disabled,.horizontalNavigation-list-item-action.disabled .label,.horizontalNavigation-list-item-action[disabled],.horizontalNavigation-list-item-action[disabled] .label,.menu-link.is-disabled,.menu-link.is-disabled .label,.menu-link.disabled,.menu-link.disabled .label,.menu-link[disabled],.menu-link[disabled] .label,.menu-list-item-action.is-disabled,.menu-list-item-action.is-disabled .label,.menu-list-item-action.disabled,.menu-list-item-action.disabled .label,.menu-list-item-action[disabled],.menu-list-item-action[disabled] .label{color:var(--palettes-neutral-500);pointer-events:none}.horizontalNavigation-list-item-action.is-disabled .numericBadge,.horizontalNavigation-list-item-action.disabled .numericBadge,.horizontalNavigation-list-item-action[disabled] .numericBadge,.menu-link.is-disabled .numericBadge,.menu-link.disabled .numericBadge,.menu-link[disabled] .numericBadge,.menu-list-item-action.is-disabled .numericBadge,.menu-list-item-action.disabled .numericBadge,.menu-list-item-action[disabled] .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}}\n"] }]
|
|
40
|
+
}, template: "@if (container()) {\n\t<div class=\"horizontalNavigation-containerOptional\">\n\t\t<ng-container *ngTemplateOutlet=\"horizontalNavigationList\" />\n\t</div>\n} @else {\n\t<ng-container *ngTemplateOutlet=\"horizontalNavigationList\" />\n}\n\n<ng-template #horizontalNavigationList>\n\t<ul class=\"horizontalNavigation-list\">\n\t\t@for (link of links(); track $index) {\n\t\t\t<li class=\"horizontalNavigation-list-item\">\n\t\t\t\t<ng-container *ngTemplateOutlet=\"link.template\" />\n\t\t\t</li>\n\t\t}\n\t</ul>\n</ng-template>\n", styles: ["@layer components{.horizontalNavigation,.menu{--components-horizontalNavigation-borderContent: \"\";--components-horizontalNavigation-listPadding: 0;--components-horizontalNavigation-listItemActionPaddingBlock: var(--pr-t-spacings-200);--components-horizontalNavigation-listItemActionPaddingInline: 0px;--components-horizontalNavigation-listItemActionPadding: var(--components-horizontalNavigation-listItemActionPaddingBlock) var(--components-horizontalNavigation-listItemActionPaddingInline);--components-horizontalNavigation-listGap: 0 var(--pr-t-spacings-400);--components-horizontalNavigation-listDirection: row;--components-horizontalNavigation-listAlign: flex-end;--components-horizontalNavigation-listItemActionAlign: center;--components-horizontalNavigation-listItemActionTransform: scale(0, 1);--components-horizontalNavigation-listItemActionColor: var(--pr-t-color-text);--components-horizontalNavigation-listItemActionSize: 2px;--components-horizontalNavigation-listItemActionFont: inherit;--components-horizontalNavigation-listItemActionInset: auto 0 0 0;--components-horizontalNavigation-listItemActionRadius: var(--pr-t-border-radius-default) var(--pr-t-border-radius-default) 0 0;--components-horizontalNavigation-listItemActionRadiusWidth: auto;--components-horizontalNavigation-listItemActionRadiusHeight: var(--components-horizontalNavigation-listItemActionSize);column-gap:var(--pr-t-spacings-400);align-items:center;display:flex;position:relative;flex-wrap:wrap;padding:var(--components-horizontalNavigation-listPadding)}.horizontalNavigation:after,.menu:after{content:var(--components-horizontalNavigation-borderContent);border-block-end-width:var(--commons-divider-width);border-block-end-color:var(--commons-divider-color);border-block-end-style:solid;position:absolute;block-size:1px;inset:auto 0 0}.horizontalNavigation .label,.menu .label{margin-inline-end:0;background-color:var(--palettes-neutral-100);color:var(--palettes-neutral-700)}.horizontalNavigation-containerOptional,.menu-containerOptional{max-inline-size:var(--commons-container-maxWidth);padding:var(--commons-container-padding)}.horizontalNavigation-list,.menu-list{margin:0;padding:0;list-style-type:none;align-items:var(--components-horizontalNavigation-listAlign);gap:var(--components-horizontalNavigation-listGap);flex-direction:var(--components-horizontalNavigation-listDirection);display:flex;flex-grow:1;flex-wrap:wrap}.scrollBox .horizontalNavigation-list,.scrollBox .menu-list{flex-wrap:nowrap}.horizontalNavigation-list-item-action,.menu-list-item-action,.menu-link{padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;font:var(--components-horizontalNavigation-listItemActionFont);padding:var(--components-horizontalNavigation-listItemActionPadding);border-radius:var(--pr-t-border-radius-small);color:var(--components-horizontalNavigation-listItemActionColor);display:inline-flex;text-align:var(--components-horizontalNavigation-listItemActionAlign);transition-duration:var(--commons-animations-durations-fast);gap:var(--pr-t-spacings-100);align-items:center;transition-property:color;position:relative;text-decoration:none;inline-size:auto;z-index:1;scroll-margin-inline:var(--pr-t-spacings-200)}.horizontalNavigation-list-item-action:before,.menu-list-item-action:before,.menu-link:before{content:\"\";position:absolute;inset-block:calc(var(--components-horizontalNavigation-listItemActionPaddingBlock) - var(--pr-t-spacings-25));inset-inline:calc(var(--components-horizontalNavigation-listItemActionPaddingInline) - var(--pr-t-spacings-25));border-radius:var(--pr-t-border-radius-small)}.horizontalNavigation-list-item-action:after,.menu-list-item-action:after,.menu-link:after{background-color:var(--palettes-700, var(--palettes-product-700));border-radius:var(--components-horizontalNavigation-listItemActionRadius);transition-duration:var(--commons-animations-durations-fast);block-size:var(--components-horizontalNavigation-listItemActionRadiusHeight);inline-size:var(--components-horizontalNavigation-listItemActionRadiusWidth);transform:var(--components-horizontalNavigation-listItemActionTransform);inset:var(--components-horizontalNavigation-listItemActionInset);transition-property:transform;display:block;position:absolute;z-index:1;content:\"\"}.horizontalNavigation-list-item-action:focus-visible,.menu-list-item-action:focus-visible,.menu-link:focus-visible{outline:none!important}.horizontalNavigation-list-item-action:focus-visible:before,.menu-list-item-action:focus-visible:before,.menu-link:focus-visible:before{outline:2px solid var(--palettes-product-700);outline-offset:2px}.horizontalNavigation-list-item-action:not(.is-disabled,[disabled]):hover:not(.is-active,[aria-current=page]),.menu-list-item-action:not(.is-disabled,[disabled]):hover:not(.is-active,[aria-current=page]),.menu-link:not(.is-disabled,[disabled]):hover:not(.is-active,[aria-current=page]){color:var(--palettes-neutral-900)}.horizontalNavigation-list-item-action:not(.is-disabled,[disabled]):hover .label,.menu-list-item-action:not(.is-disabled,[disabled]):hover .label,.menu-link:not(.is-disabled,[disabled]):hover .label{background-color:var(--palettes-100, var(--palettes-product-100));color:var(--palettes-700, var(--palettes-product-700))}.horizontalNavigation-list-item-action:not(.is-disabled,[disabled]):hover:after,.menu-list-item-action:not(.is-disabled,[disabled]):hover:after,.menu-link:not(.is-disabled,[disabled]):hover:after{--components-horizontalNavigation-listItemActionTransform: scale(.75, 1)}.horizontalNavigation-list-item-action .link-text,.menu-list-item-action .link-text,.menu-link .link-text{text-decoration:none}.horizontalNavigation-link-placeholder:after,.menu-link-placeholder:after{content:attr(data-content-after);display:block;block-size:0;overflow:hidden;font-weight:var(--pr-t-font-fontWeight-semibold)}}@layer mods{.horizontalNavigation.mod-header,.menu.mod-header{--components-horizontalNavigation-listPadding: 0 var(--pr-t-spacings-500)}.horizontalNavigation.mod-S .horizontalNavigation-list-item-action,.horizontalNavigation.mod-S .menu-list-item-action,.horizontalNavigation.mod-S .menu-link,.menu.mod-S .horizontalNavigation-list-item-action,.menu.mod-S .menu-list-item-action,.menu.mod-S .menu-link{--components-horizontalNavigation-listItemActionFont: var(--pr-t-font-body-S);--components-horizontalNavigation-listItemActionPadding: var(--pr-t-spacings-150) 0}.horizontalNavigation.mod-S .horizontalNavigation-list-item-action:before,.horizontalNavigation.mod-S .menu-list-item-action:before,.horizontalNavigation.mod-S .menu-link:before,.menu.mod-S .horizontalNavigation-list-item-action:before,.menu.mod-S .menu-list-item-action:before,.menu.mod-S .menu-link:before{inset-block:calc(var(--components-horizontalNavigation-listItemActionPaddingBlock) - var(--pr-t-spacings-75));inset-inline:calc(var(--components-horizontalNavigation-listItemActionPaddingInline) - var(--pr-t-spacings-25))}.horizontalNavigation.mod-S .menu-link,.menu.mod-S .menu-link{margin-inline-end:var(--pr-t-spacings-300)}.horizontalNavigation.mod-S .label,.menu.mod-S .label{block-size:var(--pr-t-font-body-S-lineHeight);min-inline-size:var(--pr-t-font-body-S-lineHeight);line-height:var(--pr-t-font-body-S-lineHeight);padding:0}.horizontalNavigation.mod-S .numericBadge,.menu.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)}.horizontalNavigation.mod-noBorder:after,.menu.mod-noBorder:after{--components-horizontalNavigation-borderContent: none}.horizontalNavigation.mod-vertical:after,.menu.mod-vertical:after{--components-horizontalNavigation-borderContent: none}.horizontalNavigation.mod-vertical .horizontalNavigation-list,.horizontalNavigation.mod-vertical .menu-list,.menu.mod-vertical .horizontalNavigation-list,.menu.mod-vertical .menu-list{--components-horizontalNavigation-listDirection: column;--components-horizontalNavigation-listGap: 0;--components-horizontalNavigation-listAlign: stretch}.horizontalNavigation.mod-vertical .horizontalNavigation-list-item-action,.horizontalNavigation.mod-vertical .menu-list-item-action,.menu.mod-vertical .horizontalNavigation-list-item-action,.menu.mod-vertical .menu-list-item-action{--components-horizontalNavigation-listItemActionPadding: var(--pr-t-spacings-50) var(--pr-t-spacings-200);--components-horizontalNavigation-listItemActionAlign: left}.horizontalNavigation.mod-vertical .horizontalNavigation-list-item-action:before,.horizontalNavigation.mod-vertical .menu-list-item-action:before,.menu.mod-vertical .horizontalNavigation-list-item-action:before,.menu.mod-vertical .menu-list-item-action:before{inset-block:calc(var(--components-horizontalNavigation-listItemActionPaddingBlock) - var(--pr-t-spacings-150) - var(--pr-t-spacings-25));inset-inline:calc(var(--components-horizontalNavigation-listItemActionPaddingInline) + var(--pr-t-spacings-150) + var(--pr-t-spacings-25))}.horizontalNavigation.mod-vertical .horizontalNavigation-list-item-action:after,.horizontalNavigation.mod-vertical .menu-list-item-action:after,.menu.mod-vertical .horizontalNavigation-list-item-action:after,.menu.mod-vertical .menu-list-item-action:after{--components-horizontalNavigation-listItemActionTransform: scale(1, 0);--components-horizontalNavigation-listItemActionInset: 0 auto 0 0;--components-horizontalNavigation-listItemActionRadius: 0 var(--pr-t-border-radius-default) var(--pr-t-border-radius-default) 0;--components-horizontalNavigation-listItemActionRadiusWidth: var(--components-horizontalNavigation-listItemActionSize);--components-horizontalNavigation-listItemActionRadiusHeight: auto}.horizontalNavigation.mod-vertical .horizontalNavigation-list-item-action:hover:after,.horizontalNavigation.mod-vertical .horizontalNavigation-list-item-action[aria-current=page]:hover:after,.horizontalNavigation.mod-vertical .menu-list-item-action:hover:after,.horizontalNavigation.mod-vertical .menu-list-item-action[aria-current=page]:hover:after,.menu.mod-vertical .horizontalNavigation-list-item-action:hover:after,.menu.mod-vertical .horizontalNavigation-list-item-action[aria-current=page]:hover:after,.menu.mod-vertical .menu-list-item-action:hover:after,.menu.mod-vertical .menu-list-item-action[aria-current=page]:hover:after{--components-horizontalNavigation-listItemActionTransform: scale(1, .75)}.horizontalNavigation.mod-vertical .horizontalNavigation-list-item-action[aria-current=page]:after,.horizontalNavigation.mod-vertical .horizontalNavigation-list-item-action.is-active:after,.horizontalNavigation.mod-vertical .menu-list-item-action[aria-current=page]:after,.horizontalNavigation.mod-vertical .menu-list-item-action.is-active:after,.menu.mod-vertical .horizontalNavigation-list-item-action[aria-current=page]:after,.menu.mod-vertical .horizontalNavigation-list-item-action.is-active:after,.menu.mod-vertical .menu-list-item-action[aria-current=page]:after,.menu.mod-vertical .menu-list-item-action.is-active:after{--components-horizontalNavigation-listItemActionTransform: scale(1)}.horizontalNavigation.mod-vertical.mod-S .horizontalNavigation-list-item-action,.horizontalNavigation.mod-vertical.mod-S .menu-list-item-action,.menu.mod-vertical.mod-S .horizontalNavigation-list-item-action,.menu.mod-vertical.mod-S .menu-list-item-action{--components-horizontalNavigation-listItemActionPadding: var(--pr-t-spacings-50) var(--pr-t-spacings-150)}.horizontalNavigation.mod-vertical.mod-S .horizontalNavigation-list-item-action:before,.horizontalNavigation.mod-vertical.mod-S .menu-list-item-action:before,.menu.mod-vertical.mod-S .horizontalNavigation-list-item-action:before,.menu.mod-vertical.mod-S .menu-list-item-action:before{inset-block:calc(var(--components-horizontalNavigation-listItemActionPaddingBlock) - var(--pr-t-spacings-150) - var(--pr-t-spacings-25));inset-inline:calc(var(--components-horizontalNavigation-listItemActionPaddingInline) + var(--pr-t-spacings-100) + var(--pr-t-spacings-25))}}@layer mods{.horizontalNavigation-list-item-action[aria-current=page],.horizontalNavigation-list-item-action.is-active,.horizontalNavigation-list-item-action.active,.menu-link[aria-current=page],.menu-link.is-active,.menu-link.active,.menu-list-item-action[aria-current=page],.menu-list-item-action.is-active,.menu-list-item-action.active{--components-horizontalNavigation-listItemActionColor: var(--palettes-700, var(--palettes-product-700))}.horizontalNavigation-list-item-action[aria-current=page] .label,.horizontalNavigation-list-item-action.is-active .label,.horizontalNavigation-list-item-action.active .label,.menu-link[aria-current=page] .label,.menu-link.is-active .label,.menu-link.active .label,.menu-list-item-action[aria-current=page] .label,.menu-list-item-action.is-active .label,.menu-list-item-action.active .label{background-color:var(--palettes-100, var(--palettes-product-100));color:var(--palettes-700, var(--palettes-product-700))}.horizontalNavigation-list-item-action[aria-current=page]:after,.horizontalNavigation-list-item-action.is-active:after,.horizontalNavigation-list-item-action.active:after,.menu-link[aria-current=page]:after,.menu-link.is-active:after,.menu-link.active:after,.menu-list-item-action[aria-current=page]:after,.menu-list-item-action.is-active:after,.menu-list-item-action.active:after{--components-horizontalNavigation-listItemActionTransform: scale(1)}.horizontalNavigation-list-item-action[aria-current=page]:focus-visible:after,.horizontalNavigation-list-item-action.is-active:focus-visible:after,.horizontalNavigation-list-item-action.active:focus-visible:after,.menu-link[aria-current=page]:focus-visible:after,.menu-link.is-active:focus-visible:after,.menu-link.active:focus-visible:after,.menu-list-item-action[aria-current=page]:focus-visible:after,.menu-list-item-action.is-active:focus-visible:after,.menu-list-item-action.active:focus-visible:after{--components-horizontalNavigation-listItemActionTransform: scale(.75, 1)}.horizontalNavigation-list-item-action[aria-current=page] .numericBadge,.horizontalNavigation-list-item-action.is-active .numericBadge,.horizontalNavigation-list-item-action.active .numericBadge,.menu-link[aria-current=page] .numericBadge,.menu-link.is-active .numericBadge,.menu-link.active .numericBadge,.menu-list-item-action[aria-current=page] .numericBadge,.menu-list-item-action.is-active .numericBadge,.menu-list-item-action.active .numericBadge{--components-numericBadge-background: var(--palettes-200, var(--palettes-product-200));--components-numericBadge-color: var(--palettes-800, var(--palettes-product-800))}.horizontalNavigation-list-item-action.is-disabled,.horizontalNavigation-list-item-action.is-disabled .label,.horizontalNavigation-list-item-action.disabled,.horizontalNavigation-list-item-action.disabled .label,.horizontalNavigation-list-item-action[disabled],.horizontalNavigation-list-item-action[disabled] .label,.menu-link.is-disabled,.menu-link.is-disabled .label,.menu-link.disabled,.menu-link.disabled .label,.menu-link[disabled],.menu-link[disabled] .label,.menu-list-item-action.is-disabled,.menu-list-item-action.is-disabled .label,.menu-list-item-action.disabled,.menu-list-item-action.disabled .label,.menu-list-item-action[disabled],.menu-list-item-action[disabled] .label{color:var(--palettes-neutral-500);pointer-events:none}.horizontalNavigation-list-item-action.is-disabled .numericBadge,.horizontalNavigation-list-item-action.disabled .numericBadge,.horizontalNavigation-list-item-action[disabled] .numericBadge,.menu-link.is-disabled .numericBadge,.menu-link.disabled .numericBadge,.menu-link[disabled] .numericBadge,.menu-list-item-action.is-disabled .numericBadge,.menu-list-item-action.disabled .numericBadge,.menu-list-item-action[disabled] .numericBadge{--components-numericBadge-background: var(--palettes-neutral-200);--components-numericBadge-color: var(--palettes-neutral-500)}}\n"] }]
|
|
38
41
|
}], propDecorators: { links: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => HorizontalNavigationLinkDirective), { isSignal: true }] }], noBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "noBorder", required: false }] }], container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
39
42
|
|
|
40
43
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lucca-front-ng-horizontal-navigation.mjs","sources":["../../../packages/ng/horizontal-navigation/horizontal-navigation-link.directive.ts","../../../packages/ng/horizontal-navigation/horizontal-navigation.component.ts","../../../packages/ng/horizontal-navigation/horizontal-navigation.component.html","../../../packages/ng/horizontal-navigation/lucca-front-ng-horizontal-navigation.ts"],"sourcesContent":["import { Directive, inject, TemplateRef } from '@angular/core';\n\n@Directive({\n\tselector: '[luHorizontalNavigationLink]',\n})\nexport class HorizontalNavigationLinkDirective {\n\tpublic template = inject(TemplateRef);\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport { booleanAttribute, ChangeDetectionStrategy, Component, contentChildren, input, ViewEncapsulation } from '@angular/core';\nimport { HorizontalNavigationLinkDirective } from './horizontal-navigation-link.directive';\n\n@Component({\n\tselector: 'lu-horizontal-navigation',\n\ttemplateUrl: './horizontal-navigation.component.html',\n\tstyleUrl: './horizontal-navigation.component.scss',\n\tencapsulation: ViewEncapsulation.None,\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\timports: [NgTemplateOutlet],\n\thost: {\n\t\tclass: 'horizontalNavigation',\n\t\t'[class.mod-noBorder]': 'noBorder()',\n\t\t'[class.mod-S]': 'size() === `S`',\n\t\t'[class.mod-vertical]': 'vertical()',\n\t},\n})\nexport class HorizontalNavigationComponent {\n\treadonly links = contentChildren(HorizontalNavigationLinkDirective);\n\n\treadonly noBorder = input(false, { transform: booleanAttribute });\n\treadonly container = input(false, { transform: booleanAttribute });\n\treadonly vertical = input(false, { transform: booleanAttribute });\n\treadonly size = input<null | 'S'>(null);\n}\n","@if (container()) {\n\t<div class=\"horizontalNavigation-containerOptional\">\n\t\t<ng-container *ngTemplateOutlet=\"horizontalNavigationList\" />\n\t</div>\n} @else {\n\t<ng-container *ngTemplateOutlet=\"horizontalNavigationList\" />\n}\n\n<ng-template #horizontalNavigationList>\n\t<ul class=\"horizontalNavigation-list\">\n\t\t@for (link of links(); track $index) {\n\t\t\t<li class=\"horizontalNavigation-list-item\">\n\t\t\t\t<ng-container *ngTemplateOutlet=\"link.template\" />\n\t\t\t</li>\n\t\t}\n\t</ul>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MAKa,iCAAiC,CAAA;AAH9C,IAAA,WAAA,GAAA;AAIQ,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,WAAW,CAAC;AACrC,IAAA;8GAFY,iCAAiC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAjC,iCAAiC,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,8BAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAjC,iCAAiC,EAAA,UAAA,EAAA,CAAA;kBAH7C,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,QAAQ,EAAE,8BAA8B;AACxC,iBAAA;;;MCcY,6BAA6B,CAAA;AAd1C,IAAA,WAAA,GAAA;AAeU,QAAA,IAAA,CAAA,KAAK,GAAG,eAAe,CAAC,iCAAiC,iDAAC;QAE1D,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,qDAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;
|
|
1
|
+
{"version":3,"file":"lucca-front-ng-horizontal-navigation.mjs","sources":["../../../packages/ng/horizontal-navigation/horizontal-navigation-link.directive.ts","../../../packages/ng/horizontal-navigation/horizontal-navigation.component.ts","../../../packages/ng/horizontal-navigation/horizontal-navigation.component.html","../../../packages/ng/horizontal-navigation/lucca-front-ng-horizontal-navigation.ts"],"sourcesContent":["import { Directive, inject, TemplateRef } from '@angular/core';\n\n@Directive({\n\tselector: '[luHorizontalNavigationLink]',\n})\nexport class HorizontalNavigationLinkDirective {\n\tpublic template = inject(TemplateRef);\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport { booleanAttribute, ChangeDetectionStrategy, Component, contentChildren, input, ViewEncapsulation } from '@angular/core';\nimport { HorizontalNavigationLinkDirective } from './horizontal-navigation-link.directive';\n\n@Component({\n\tselector: 'lu-horizontal-navigation',\n\ttemplateUrl: './horizontal-navigation.component.html',\n\tstyleUrl: './horizontal-navigation.component.scss',\n\tencapsulation: ViewEncapsulation.None,\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\timports: [NgTemplateOutlet],\n\thost: {\n\t\tclass: 'horizontalNavigation',\n\t\t'[class.mod-noBorder]': 'noBorder()',\n\t\t'[class.mod-S]': 'size() === `S`',\n\t\t'[class.mod-vertical]': 'vertical()',\n\t},\n})\nexport class HorizontalNavigationComponent {\n\treadonly links = contentChildren(HorizontalNavigationLinkDirective);\n\n\treadonly noBorder = input(false, { transform: booleanAttribute });\n\n\treadonly container = input(false, { transform: booleanAttribute });\n\n\treadonly vertical = input(false, { transform: booleanAttribute });\n\n\t/**\n\t * Which size should the horizontal navigation be? Defaults and small\n\t */\n\treadonly size = input<null | 'S'>(null);\n}\n","@if (container()) {\n\t<div class=\"horizontalNavigation-containerOptional\">\n\t\t<ng-container *ngTemplateOutlet=\"horizontalNavigationList\" />\n\t</div>\n} @else {\n\t<ng-container *ngTemplateOutlet=\"horizontalNavigationList\" />\n}\n\n<ng-template #horizontalNavigationList>\n\t<ul class=\"horizontalNavigation-list\">\n\t\t@for (link of links(); track $index) {\n\t\t\t<li class=\"horizontalNavigation-list-item\">\n\t\t\t\t<ng-container *ngTemplateOutlet=\"link.template\" />\n\t\t\t</li>\n\t\t}\n\t</ul>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -4,10 +4,25 @@ import { input, booleanAttribute, computed, ViewEncapsulation, ChangeDetectionSt
|
|
|
4
4
|
|
|
5
5
|
class IconComponent {
|
|
6
6
|
constructor() {
|
|
7
|
+
/**
|
|
8
|
+
* Defines icon to display
|
|
9
|
+
*/
|
|
7
10
|
this.icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
11
|
+
/**
|
|
12
|
+
* Information conveyed by the screen reader
|
|
13
|
+
*/
|
|
8
14
|
this.alt = input(...(ngDevMode ? [undefined, { debugName: "alt" }] : []));
|
|
15
|
+
/**
|
|
16
|
+
* Which size should the icon be? XXS to XXL
|
|
17
|
+
*/
|
|
9
18
|
this.size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
|
|
19
|
+
/**
|
|
20
|
+
* Changes the color of the icon (inherit by default)
|
|
21
|
+
*/
|
|
10
22
|
this.color = input('inherit', ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
23
|
+
/**
|
|
24
|
+
* Display icon in AI mode
|
|
25
|
+
*/
|
|
11
26
|
this.AI = input(false, { ...(ngDevMode ? { debugName: "AI" } : {}), transform: booleanAttribute });
|
|
12
27
|
this.iconClasses = computed(() => {
|
|
13
28
|
const size = this.size();
|