@lucca-front/ng 18.3.0 → 18.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (67) hide show
  1. package/core/type/style.d.ts +1 -1
  2. package/core-select/input/select-input.component.d.ts +1 -1
  3. package/core-select/user/users.directive.d.ts +2 -1
  4. package/esm2022/callout/callout-disclosure/callout-disclosure.component.mjs +3 -3
  5. package/esm2022/comment/comment/comment.component.mjs +3 -3
  6. package/esm2022/core/portal/portal.directive.mjs +8 -3
  7. package/esm2022/core/type/style.mjs +1 -1
  8. package/esm2022/core-select/input/select-input.component.mjs +8 -6
  9. package/esm2022/core-select/user/user-option.component.mjs +3 -3
  10. package/esm2022/core-select/user/users.directive.mjs +19 -23
  11. package/esm2022/date2/date-input/date-input.component.mjs +24 -5
  12. package/esm2022/department/select/feeder/department-feeder.component.mjs +2 -2
  13. package/esm2022/department/select/input/department-select-input.component.mjs +2 -1
  14. package/esm2022/department/service/department-v4.service.mjs +2 -2
  15. package/esm2022/dialog/dialog/dialog.component.mjs +2 -2
  16. package/esm2022/dialog/dialog-header/dialog-header.component.mjs +3 -3
  17. package/esm2022/form-field/form-field.component.mjs +10 -9
  18. package/esm2022/forms/checkbox-input/checkbox-input.component.mjs +3 -3
  19. package/esm2022/forms/form-field-id.directive.mjs +4 -4
  20. package/esm2022/multi-select/displayer/displayer-input.directive.mjs +5 -5
  21. package/esm2022/multi-select/input/select-all/with-select-all.directive.mjs +15 -18
  22. package/esm2022/multi-select/input/select-input.component.mjs +8 -4
  23. package/esm2022/multi-select/public-api.mjs +2 -1
  24. package/esm2022/multi-select/select.model.mjs +2 -2
  25. package/esm2022/multi-select/select.utils.mjs +32 -0
  26. package/esm2022/skeleton/skeleton-field/skeleton-field.component.mjs +2 -2
  27. package/esm2022/tooltip/panel/tooltip-panel.component.mjs +3 -3
  28. package/esm2022/tooltip/trigger/ellipsis.ruler.mjs +81 -0
  29. package/esm2022/tooltip/trigger/tooltip-trigger.directive.mjs +42 -85
  30. package/esm2022/user/tile/user-tile.component.mjs +2 -2
  31. package/fesm2022/lucca-front-ng-callout.mjs +2 -2
  32. package/fesm2022/lucca-front-ng-callout.mjs.map +1 -1
  33. package/fesm2022/lucca-front-ng-comment.mjs +2 -2
  34. package/fesm2022/lucca-front-ng-comment.mjs.map +1 -1
  35. package/fesm2022/lucca-front-ng-core-select-user.mjs +24 -28
  36. package/fesm2022/lucca-front-ng-core-select-user.mjs.map +1 -1
  37. package/fesm2022/lucca-front-ng-core-select.mjs +5 -3
  38. package/fesm2022/lucca-front-ng-core-select.mjs.map +1 -1
  39. package/fesm2022/lucca-front-ng-core.mjs +7 -2
  40. package/fesm2022/lucca-front-ng-core.mjs.map +1 -1
  41. package/fesm2022/lucca-front-ng-date2.mjs +23 -4
  42. package/fesm2022/lucca-front-ng-date2.mjs.map +1 -1
  43. package/fesm2022/lucca-front-ng-department.mjs +3 -2
  44. package/fesm2022/lucca-front-ng-department.mjs.map +1 -1
  45. package/fesm2022/lucca-front-ng-dialog.mjs +4 -4
  46. package/fesm2022/lucca-front-ng-dialog.mjs.map +1 -1
  47. package/fesm2022/lucca-front-ng-form-field.mjs +9 -8
  48. package/fesm2022/lucca-front-ng-form-field.mjs.map +1 -1
  49. package/fesm2022/lucca-front-ng-forms.mjs +5 -5
  50. package/fesm2022/lucca-front-ng-forms.mjs.map +1 -1
  51. package/fesm2022/lucca-front-ng-multi-select.mjs +59 -26
  52. package/fesm2022/lucca-front-ng-multi-select.mjs.map +1 -1
  53. package/fesm2022/lucca-front-ng-skeleton.mjs +2 -2
  54. package/fesm2022/lucca-front-ng-skeleton.mjs.map +1 -1
  55. package/fesm2022/lucca-front-ng-tooltip.mjs +121 -87
  56. package/fesm2022/lucca-front-ng-tooltip.mjs.map +1 -1
  57. package/fesm2022/lucca-front-ng-user.mjs +2 -2
  58. package/fesm2022/lucca-front-ng-user.mjs.map +1 -1
  59. package/form-field/form-field.component.d.ts +1 -1
  60. package/multi-select/displayer/displayer-input.directive.d.ts +2 -2
  61. package/multi-select/input/select-input.component.d.ts +3 -1
  62. package/multi-select/public-api.d.ts +2 -0
  63. package/multi-select/select.utils.d.ts +14 -0
  64. package/package.json +15 -15
  65. package/tooltip/panel/tooltip-panel.component.d.ts +2 -2
  66. package/tooltip/trigger/ellipsis.ruler.d.ts +27 -0
  67. package/tooltip/trigger/tooltip-trigger.directive.d.ts +4 -19
@@ -36,11 +36,11 @@ class SkeletonFieldComponent {
36
36
  this.dark = false;
37
37
  }
38
38
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SkeletonFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
39
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.1", type: SkeletonFieldComponent, isStandalone: true, selector: "lu-skeleton-field", inputs: { dark: ["dark", "dark", booleanAttribute] }, ngImport: i0, template: "<div class=\"form-field skeleton is-loading\" [class.mod-dark]=\"dark\" inert=\"inert\">\n\t<span class=\"skeleton-item\" style=\"--components-skeleton-text-width: 50%\"></span>\n\t<div class=\"textField\">\n\t\t<div class=\"textField-input\">\n\t\t\t<span class=\"textField-input-value\">\n\t\t\t\t<span class=\"skeleton-item\" style=\"--components-skeleton-text-width: 80%\"></span>\n\t\t\t</span>\n\t\t</div>\n\t</div>\n</div>\n", styles: [".textField{--component-textField-lineHeight: var(--sizes-M-lineHeight);--component-textField-fontSize: var(--sizes-M-fontSize);--component-textField-placeholder: var(--palettes-neutral-400);--component-textField-background: var(--palettes-neutral-0);--component-textField-border: var(--palettes-neutral-300);--component-textField-color: var(--palettes-neutral-800);--component-textField-prefix-color: var(--palettes-neutral-600);--component-textField-padding: var(--pr-t-spacings-100);--component-textField-affix-padding: var(--component-textField-padding);--component-textField-affix-size: 1.75rem;--component-textField-scrollMargin: 88rem;--component-textField-maxHeight: 90dvh;--component-textField-maxHeightFallback: 90vh;display:flex;align-items:stretch;border-radius:var(--commons-borderRadius-M);background-color:var(--component-textField-background);box-shadow:0 0 0 1px var(--component-textField-border)}.textField:hover{--component-textField-border: var(--palettes-neutral-400)}.textField:has(.textField-input-value:focus-visible){outline:2px solid var(--palettes-product-700);outline-offset:3px}.textField .textField-input-affix-toggle{pointer-events:auto;width:var(--component-textField-affix-size);height:var(--component-textField-affix-size);color:var(--palettes-neutral-600)}.textField-input{display:flex;align-items:center;width:100%;border-radius:var(--commons-borderRadius-M);background-color:var(--component-textField-background);position:relative}.textField-input:has(.textField-input-affix-icon){--component-textField-affix-padding: 2.5rem}.textField-input:has(.textField-input-affix-toggle){--component-textField-affix-padding: 3rem}.textField-input:has(.textField-input-affix-clear){--component-textField-affix-padding: 2rem}.textField-input:has(.textField-input-affix-clear):has(.textField-input-affix-icon){--component-textField-affix-padding: 4rem}.textField-input:has(.textField-input-affix-clear):has(.textField-input-affix-toggle){--component-textField-affix-padding: 4.5rem}.textField-input-valueClone,.textField-input-value{border:0;outline:0;line-height:var(--component-textField-lineHeight);font-size:var(--component-textField-fontSize);width:100%;padding:var(--component-textField-padding) var(--component-textField-affix-padding) var(--component-textField-padding) var(--component-textField-padding);background-color:transparent;color:var(--component-textField-color)}.textField-input-valueClone:is(textarea,div),.textField-input-value:is(textarea,div){max-height:var(--component-textField-maxHeight)}@supports not (height: 1dvh){.textField-input-valueClone:is(textarea,div),.textField-input-value:is(textarea,div){--component-textField-maxHeight: var(--component-textField-maxHeightFallback)}}.textField-input-valueClone::placeholder,.textField-input-value::placeholder{color:var(--component-textField-placeholder)}.textField-input-valueClone:is(textarea),.textField-input-value:is(textarea){resize:vertical;min-height:calc(2lh + var(--component-textField-padding) * 2)}.textField-input-valueClone:is(textarea):not([rows]),.textField-input-value:is(textarea):not([rows]){height:calc(3lh + var(--component-textField-padding) * 2)}.textField-input-affix{display:inline-flex;align-items:center;gap:var(--pr-t-spacings-100);position:absolute;right:var(--pr-t-spacings-100);pointer-events:none}.textField-input-affix-icon{--icon-size: 1.5rem;color:var(--palettes-neutral-600);pointer-events:none}.textField-input-affix-clear{pointer-events:auto}.textField-prefix{display:flex;padding-left:var(--component-textField-padding);align-items:center;color:var(--component-textField-prefix-color);line-height:var(--component-textField-lineHeight);font-size:var(--component-textField-fontSize);border-top-left-radius:var(--commons-borderRadius-M);border-bottom-left-radius:var(--commons-borderRadius-M)}.textField-prefix~.textField-input{border-top-left-radius:0;border-bottom-left-radius:0}.textField-suffix{display:flex;padding-right:var(--component-textField-padding);align-items:center;color:var(--component-textField-prefix-color);line-height:var(--component-textField-lineHeight);font-size:var(--component-textField-fontSize);border-top-right-radius:var(--commons-borderRadius-M);border-bottom-right-radius:var(--commons-borderRadius-M);order:1;flex-shrink:0}.textField-suffix~.textField-input{border-top-right-radius:0;border-bottom-right-radius:0}.textField.mod-S{--component-textField-fontSize: var(--sizes-S-fontSize);--component-textField-lineHeight: var(--sizes-S-lineHeight);--component-textField-padding: var(--pr-t-spacings-75);--component-textField-affix-size: 1.5rem}.textField.mod-S .textField-input-affix-toggle{--icon-size: 1.25rem}.textField.mod-S .textField-input-affix-clear.clear,.textField.mod-S .textField-input-affix-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.textField.mod-S .textField-input-affix-icon{--icon-size: 1.25rem}.textField.mod-XS{--component-textField-fontSize: var(--sizes-XS-fontSize);--component-textField-lineHeight: var(--sizes-XS-lineHeight);--component-textField-padding: var(--pr-t-spacings-50)}.textField.mod-XS .textField-prefix,.textField.mod-XS .textField-suffix,.textField.mod-XS .textField-input-affix-icon{--icon-size: 1rem}.textField.mod-XS .textField-input-affix-clear.clear,.textField.mod-XS .textField-input-affix-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.textField.mod-valueAlignRight .textField-input-value{text-align:right}.textField.is-invalid,.textField:has(.textField-input-value[aria-invalid=true]){--component-textField-border: var(--palettes-error-400);--component-textField-background: var(--palettes-error-50);--component-textField-placeholder: var(--palettes-error-400)}.textField.is-invalid:hover,.textField:has(.textField-input-value[aria-invalid=true]):hover{--component-textField-border: var(--palettes-error-600)}.textField.is-disabled,.textField:has(.textField-input-value:disabled){--component-textField-border: var(--palettes-neutral-300);--component-textField-background: var(--commons-disabled-background);--component-textField-color: var(--palettes-neutral-700)}.textField.mod-autoResize .textField-input{display:grid;align-items:normal;min-width:0;scroll-margin-bottom:var(--component-textField-scrollMargin)}.textField.mod-autoResize .textField-input-valueClone,.textField.mod-autoResize .textField-input-value{white-space:pre-wrap;overflow-wrap:break-word;grid-area:1/1/2/2;resize:none;min-width:0;overflow:auto}.textField.mod-autoResize .textField-input-valueClone{visibility:hidden}.textField.mod-autoResize .textField-input-valueClone:after{content:\" \"}.skeleton{--components-skeleton-gradient-step-one: var(--palettes-neutral-50);--components-skeleton-gradient-step-two: var(--palettes-neutral-200);--components-skeleton-shape-height: 1.5rem;--components-skeleton-shape-width: 1.5rem;--components-skeleton-text-offset: var(--pr-t-spacings-75);--components-skeleton-text-width: 100%;--components-skeleton-text-clipPathRound: round var(--commons-borderRadius-L)}.skeleton-item{animation:skeletonFade var(--commons-animations-durations-fast) ease-in 1 forwards}@keyframes skeletonFade{0%{opacity:0}to{opacity:1}}.skeleton.mod-dark{--components-skeleton-gradient-step-one: var(--palettes-neutral-200);--components-skeleton-gradient-step-two: var(--palettes-neutral-500)}.skeleton.is-loading{animation:skeletonPulse 1.5s infinite ease-in-out}.skeleton.is-loading .skeleton-item{animation:skeletonBackground 1.5s infinite linear;background-image:linear-gradient(90deg,var(--components-skeleton-gradient-step-one, var(--palettes-neutral-50)),var(--components-skeleton-gradient-step-two, var(--palettes-neutral-200)),var(--components-skeleton-gradient-step-one, var(--palettes-neutral-50)));background-size:150% 100%;background-repeat:repeat-x;display:block}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle){clip-path:inset(calc(var(--components-skeleton-text-offset) + 1px) calc(100% - var(--components-skeleton-text-width, 100%)) calc(var(--components-skeleton-text-offset) - 1px) 0 var(--components-skeleton-text-clipPathRound));height:var(--sizes-M-lineHeight);width:100%}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle).u-textXS{--components-skeleton-text-offset: .25rem;height:var(--sizes-XS-lineHeight)}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle).u-textS{--components-skeleton-text-offset: .375rem;height:var(--sizes-S-lineHeight)}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle).u-textL{--components-skeleton-text-offset: .375rem;height:var(--sizes-L-lineHeight)}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle).u-textXL{height:var(--sizes-XL-lineHeight)}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle).u-textXXL{--components-skeleton-text-offset: .5rem;height:var(--sizes-XXL-lineHeight)}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle):is(.u-h1,h1){height:auto;line-height:var(--sizes-lineHeight);min-height:var(--sizes-lineHeight);--components-skeleton-text-offset: .5rem}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle):is(.u-h2,h2){height:auto;line-height:var(--sizes-lineHeight);min-height:var(--sizes-lineHeight);--components-skeleton-text-offset: .375rem}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle):is(.u-h3,h3){height:auto;line-height:var(--sizes-lineHeight);min-height:var(--sizes-lineHeight);--components-skeleton-text-offset: .375rem}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle):is(.u-h4,h4){height:auto;line-height:var(--sizes-lineHeight);min-height:var(--sizes-lineHeight);--components-skeleton-text-offset: .375rem}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle):is(.u-h5,h5){height:auto;line-height:var(--sizes-lineHeight);min-height:var(--sizes-lineHeight);--components-skeleton-text-offset: .375rem}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle):is(.u-h6,h6){height:auto;line-height:var(--sizes-lineHeight);min-height:var(--sizes-lineHeight);--components-skeleton-text-offset: .25rem}@keyframes skeletonBackground{0%{background-position:150% 50%}to{background-position:-150% 50%}}@keyframes skeletonPulse{0%{opacity:.9}50%{opacity:1}to{opacity:.9}}.skeleton.is-loading .skeleton-item.mod-dark{--components-skeleton-gradient-step-one: var(--palettes-neutral-200);--components-skeleton-gradient-step-two: var(--palettes-neutral-500)}.skeleton.is-loading .skeleton-item.mod-square{border-radius:var(--commons-borderRadius-M);height:var(--components-skeleton-shape-height);width:var(--components-skeleton-shape-width)}.skeleton.is-loading .skeleton-item.mod-circle{border-radius:var(--commons-borderRadius-full);height:var(--components-skeleton-shape-height);width:var(--components-skeleton-shape-width)}.skeleton.is-loading .skeleton-item.mod-XS{--components-skeleton-shape-height: .5rem;--components-skeleton-shape-width: .5rem}.skeleton.is-loading .skeleton-item.mod-S{--components-skeleton-shape-height: 1rem;--components-skeleton-shape-width: 1rem}.skeleton.is-loading .skeleton-item.mod-L{--components-skeleton-shape-height: 2rem;--components-skeleton-shape-width: 2rem}.skeleton.is-loading .skeleton-item.mod-XL{--components-skeleton-shape-height: 3rem;--components-skeleton-shape-width: 3rem}.skeleton.is-loading .skeleton-item.mod-XXL{--components-skeleton-shape-height: 4rem;--components-skeleton-shape-width: 4rem}.skeleton.is-loading .skeleton-item.mod-alignRight:not(.mod-square,.mod-circle){clip-path:inset(calc(var(--components-skeleton-text-offset) + 1px) 0 calc(var(--components-skeleton-text-offset) - 1px) calc(100% - var(--components-skeleton-text-width, 100%)) var(--components-skeleton-text-clipPathRound))}.skeleton.is-loading .skeleton-item.mod-alignCenter:not(.mod-square,.mod-circle){clip-path:inset(calc(var(--components-skeleton-text-offset) + 1px) calc(50% - var(--components-skeleton-text-width, 100%) / 2) calc(var(--components-skeleton-text-offset) - 1px) calc(50% - var(--components-skeleton-text-width, 100%) / 2) var(--components-skeleton-text-clipPathRound))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
39
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.1", type: SkeletonFieldComponent, isStandalone: true, selector: "lu-skeleton-field", inputs: { dark: ["dark", "dark", booleanAttribute] }, ngImport: i0, template: "<div class=\"form-field skeleton is-loading\" [class.mod-dark]=\"dark\" inert=\"inert\">\n\t<span class=\"skeleton-item\" style=\"--components-skeleton-text-width: 50%\"></span>\n\t<div class=\"textField\">\n\t\t<div class=\"textField-input\">\n\t\t\t<span class=\"textField-input-value\">\n\t\t\t\t<span class=\"skeleton-item\" style=\"--components-skeleton-text-width: 80%\"></span>\n\t\t\t</span>\n\t\t</div>\n\t</div>\n</div>\n", styles: [".textField{--component-textField-lineHeight: var(--sizes-M-lineHeight);--component-textField-fontSize: var(--sizes-M-fontSize);--component-textField-placeholder: var(--palettes-neutral-400);--component-textField-background: var(--palettes-neutral-0);--component-textField-border: var(--palettes-neutral-300);--component-textField-color: var(--palettes-neutral-800);--component-textField-prefix-color: var(--palettes-neutral-600);--component-textField-padding: var(--pr-t-spacings-100);--component-textField-affix-padding: var(--component-textField-padding);--component-textField-affix-size: 1.75rem;--component-textField-scrollMargin: 88rem;--component-textField-maxHeight: 90dvh;--component-textField-maxHeightFallback: 90vh;display:flex;align-items:stretch;border-radius:var(--commons-borderRadius-M);background-color:var(--component-textField-background);box-shadow:0 0 0 1px var(--component-textField-border)}.textField:hover{--component-textField-border: var(--palettes-neutral-400)}.textField:has(.textField-input-value:focus-visible){outline:2px solid var(--palettes-product-700);outline-offset:3px}.textField .textField-input-affix-toggle{pointer-events:auto;width:var(--component-textField-affix-size);height:var(--component-textField-affix-size);color:var(--palettes-neutral-600)}.textField-input{display:flex;align-items:center;width:100%;border-radius:var(--commons-borderRadius-M);background-color:var(--component-textField-background);position:relative}.textField-input:has(.textField-input-affix-icon){--component-textField-affix-padding: 2.5rem}.textField-input:has(.textField-input-affix-toggle){--component-textField-affix-padding: 3rem}.textField-input:has(.textField-input-affix-clear){--component-textField-affix-padding: 2rem}.textField-input:has(.textField-input-affix-clear):has(.textField-input-affix-icon){--component-textField-affix-padding: 4rem}.textField-input:has(.textField-input-affix-clear):has(.textField-input-affix-toggle){--component-textField-affix-padding: 4.5rem}.textField-input-valueClone,.textField-input-value{border:0;outline:0;line-height:var(--component-textField-lineHeight);font-size:var(--component-textField-fontSize);width:100%;padding:var(--component-textField-padding) var(--component-textField-affix-padding) var(--component-textField-padding) var(--component-textField-padding);background-color:transparent;color:var(--component-textField-color)}.textField-input-valueClone:is(textarea,div),.textField-input-value:is(textarea,div){max-height:var(--component-textField-maxHeight)}@supports not (height: 1dvh){.textField-input-valueClone:is(textarea,div),.textField-input-value:is(textarea,div){--component-textField-maxHeight: var(--component-textField-maxHeightFallback)}}.textField-input-valueClone::placeholder,.textField-input-value::placeholder{color:var(--component-textField-placeholder)}.textField-input-valueClone:is(textarea),.textField-input-value:is(textarea){resize:vertical;min-height:calc(2lh + var(--component-textField-padding) * 2)}.textField-input-valueClone:is(textarea):not([rows]),.textField-input-value:is(textarea):not([rows]){height:calc(3lh + var(--component-textField-padding) * 2)}.textField-input-valueClone:is(textarea)[rows=\"1\"],.textField-input-value:is(textarea)[rows=\"1\"]{min-height:calc(1lh + var(--component-textField-padding) * 2)}.textField-input-affix{display:inline-flex;align-items:center;gap:var(--pr-t-spacings-100);position:absolute;right:var(--pr-t-spacings-100);pointer-events:none}.textField-input-affix-icon{--icon-size: 1.5rem;color:var(--palettes-neutral-600);pointer-events:none}.textField-input-affix-clear{pointer-events:auto}.textField-prefix{display:flex;padding-left:var(--component-textField-padding);align-items:center;color:var(--component-textField-prefix-color);line-height:var(--component-textField-lineHeight);font-size:var(--component-textField-fontSize);border-top-left-radius:var(--commons-borderRadius-M);border-bottom-left-radius:var(--commons-borderRadius-M)}.textField-prefix~.textField-input{border-top-left-radius:0;border-bottom-left-radius:0}.textField-suffix{display:flex;padding-right:var(--component-textField-padding);align-items:center;color:var(--component-textField-prefix-color);line-height:var(--component-textField-lineHeight);font-size:var(--component-textField-fontSize);border-top-right-radius:var(--commons-borderRadius-M);border-bottom-right-radius:var(--commons-borderRadius-M);order:1;flex-shrink:0}.textField-suffix~.textField-input{border-top-right-radius:0;border-bottom-right-radius:0}.textField.mod-S{--component-textField-fontSize: var(--sizes-S-fontSize);--component-textField-lineHeight: var(--sizes-S-lineHeight);--component-textField-padding: var(--pr-t-spacings-75);--component-textField-affix-size: 1.5rem}.textField.mod-S .textField-input-affix-toggle{--icon-size: 1.25rem}.textField.mod-S .textField-input-affix-clear.clear,.textField.mod-S .textField-input-affix-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.textField.mod-S .textField-input-affix-icon{--icon-size: 1.25rem}.textField.mod-XS{--component-textField-fontSize: var(--sizes-XS-fontSize);--component-textField-lineHeight: var(--sizes-XS-lineHeight);--component-textField-padding: var(--pr-t-spacings-50)}.textField.mod-XS .textField-prefix,.textField.mod-XS .textField-suffix,.textField.mod-XS .textField-input-affix-icon{--icon-size: 1rem}.textField.mod-XS .textField-input-affix-clear.clear,.textField.mod-XS .textField-input-affix-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.textField.mod-valueAlignRight .textField-input-value{text-align:right}.textField.is-invalid,.textField:has(.textField-input-value[aria-invalid=true]){--component-textField-border: var(--palettes-error-400);--component-textField-background: var(--palettes-error-50);--component-textField-placeholder: var(--palettes-error-400)}.textField.is-invalid:hover,.textField:has(.textField-input-value[aria-invalid=true]):hover{--component-textField-border: var(--palettes-error-600)}.textField.is-disabled,.textField:has(.textField-input-value:disabled){--component-textField-border: var(--palettes-neutral-300);--component-textField-background: var(--commons-disabled-background);--component-textField-color: var(--palettes-neutral-700)}.textField.mod-autoResize .textField-input{display:grid;align-items:normal;min-width:0;scroll-margin-bottom:var(--component-textField-scrollMargin)}.textField.mod-autoResize .textField-input-valueClone,.textField.mod-autoResize .textField-input-value{white-space:pre-wrap;overflow-wrap:break-word;grid-area:1/1/2/2;resize:none;min-width:0;overflow:auto}.textField.mod-autoResize .textField-input-valueClone{visibility:hidden}.textField.mod-autoResize .textField-input-valueClone:after{content:\" \"}.skeleton{--components-skeleton-gradient-step-one: var(--palettes-neutral-50);--components-skeleton-gradient-step-two: var(--palettes-neutral-200);--components-skeleton-shape-height: 1.5rem;--components-skeleton-shape-width: 1.5rem;--components-skeleton-text-offset: var(--pr-t-spacings-75);--components-skeleton-text-width: 100%;--components-skeleton-text-clipPathRound: round var(--commons-borderRadius-L)}.skeleton-item{animation:skeletonFade var(--commons-animations-durations-fast) ease-in 1 forwards}@keyframes skeletonFade{0%{opacity:0}to{opacity:1}}.skeleton.mod-dark{--components-skeleton-gradient-step-one: var(--palettes-neutral-200);--components-skeleton-gradient-step-two: var(--palettes-neutral-500)}.skeleton.is-loading{animation:skeletonPulse 1.5s infinite ease-in-out}.skeleton.is-loading .skeleton-item{animation:skeletonBackground 1.5s infinite linear;background-image:linear-gradient(90deg,var(--components-skeleton-gradient-step-one, var(--palettes-neutral-50)),var(--components-skeleton-gradient-step-two, var(--palettes-neutral-200)),var(--components-skeleton-gradient-step-one, var(--palettes-neutral-50)));background-size:150% 100%;background-repeat:repeat-x;display:block}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle){clip-path:inset(calc(var(--components-skeleton-text-offset) + 1px) calc(100% - var(--components-skeleton-text-width, 100%)) calc(var(--components-skeleton-text-offset) - 1px) 0 var(--components-skeleton-text-clipPathRound));height:var(--sizes-M-lineHeight);width:100%}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle).u-textXS{--components-skeleton-text-offset: .25rem;height:var(--sizes-XS-lineHeight)}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle).u-textS{--components-skeleton-text-offset: .375rem;height:var(--sizes-S-lineHeight)}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle).u-textL{--components-skeleton-text-offset: .375rem;height:var(--sizes-L-lineHeight)}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle).u-textXL{height:var(--sizes-XL-lineHeight)}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle).u-textXXL{--components-skeleton-text-offset: .5rem;height:var(--sizes-XXL-lineHeight)}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle):is(.u-h1,h1){height:auto;line-height:var(--sizes-lineHeight);min-height:var(--sizes-lineHeight);--components-skeleton-text-offset: .5rem}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle):is(.u-h2,h2){height:auto;line-height:var(--sizes-lineHeight);min-height:var(--sizes-lineHeight);--components-skeleton-text-offset: .375rem}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle):is(.u-h3,h3){height:auto;line-height:var(--sizes-lineHeight);min-height:var(--sizes-lineHeight);--components-skeleton-text-offset: .375rem}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle):is(.u-h4,h4){height:auto;line-height:var(--sizes-lineHeight);min-height:var(--sizes-lineHeight);--components-skeleton-text-offset: .375rem}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle):is(.u-h5,h5){height:auto;line-height:var(--sizes-lineHeight);min-height:var(--sizes-lineHeight);--components-skeleton-text-offset: .375rem}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle):is(.u-h6,h6){height:auto;line-height:var(--sizes-lineHeight);min-height:var(--sizes-lineHeight);--components-skeleton-text-offset: .25rem}@keyframes skeletonBackground{0%{background-position:150% 50%}to{background-position:-150% 50%}}@keyframes skeletonPulse{0%{opacity:.9}50%{opacity:1}to{opacity:.9}}.skeleton.is-loading .skeleton-item.mod-dark{--components-skeleton-gradient-step-one: var(--palettes-neutral-200);--components-skeleton-gradient-step-two: var(--palettes-neutral-500)}.skeleton.is-loading .skeleton-item.mod-square{border-radius:var(--commons-borderRadius-M);height:var(--components-skeleton-shape-height);width:var(--components-skeleton-shape-width)}.skeleton.is-loading .skeleton-item.mod-circle{border-radius:var(--commons-borderRadius-full);height:var(--components-skeleton-shape-height);width:var(--components-skeleton-shape-width)}.skeleton.is-loading .skeleton-item.mod-XS{--components-skeleton-shape-height: .5rem;--components-skeleton-shape-width: .5rem}.skeleton.is-loading .skeleton-item.mod-S{--components-skeleton-shape-height: 1rem;--components-skeleton-shape-width: 1rem}.skeleton.is-loading .skeleton-item.mod-L{--components-skeleton-shape-height: 2rem;--components-skeleton-shape-width: 2rem}.skeleton.is-loading .skeleton-item.mod-XL{--components-skeleton-shape-height: 3rem;--components-skeleton-shape-width: 3rem}.skeleton.is-loading .skeleton-item.mod-XXL{--components-skeleton-shape-height: 4rem;--components-skeleton-shape-width: 4rem}.skeleton.is-loading .skeleton-item.mod-alignRight:not(.mod-square,.mod-circle){clip-path:inset(calc(var(--components-skeleton-text-offset) + 1px) 0 calc(var(--components-skeleton-text-offset) - 1px) calc(100% - var(--components-skeleton-text-width, 100%)) var(--components-skeleton-text-clipPathRound))}.skeleton.is-loading .skeleton-item.mod-alignCenter:not(.mod-square,.mod-circle){clip-path:inset(calc(var(--components-skeleton-text-offset) + 1px) calc(50% - var(--components-skeleton-text-width, 100%) / 2) calc(var(--components-skeleton-text-offset) - 1px) calc(50% - var(--components-skeleton-text-width, 100%) / 2) var(--components-skeleton-text-clipPathRound))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
40
40
  }
41
41
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: SkeletonFieldComponent, decorators: [{
42
42
  type: Component,
43
- args: [{ selector: 'lu-skeleton-field', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-field skeleton is-loading\" [class.mod-dark]=\"dark\" inert=\"inert\">\n\t<span class=\"skeleton-item\" style=\"--components-skeleton-text-width: 50%\"></span>\n\t<div class=\"textField\">\n\t\t<div class=\"textField-input\">\n\t\t\t<span class=\"textField-input-value\">\n\t\t\t\t<span class=\"skeleton-item\" style=\"--components-skeleton-text-width: 80%\"></span>\n\t\t\t</span>\n\t\t</div>\n\t</div>\n</div>\n", styles: [".textField{--component-textField-lineHeight: var(--sizes-M-lineHeight);--component-textField-fontSize: var(--sizes-M-fontSize);--component-textField-placeholder: var(--palettes-neutral-400);--component-textField-background: var(--palettes-neutral-0);--component-textField-border: var(--palettes-neutral-300);--component-textField-color: var(--palettes-neutral-800);--component-textField-prefix-color: var(--palettes-neutral-600);--component-textField-padding: var(--pr-t-spacings-100);--component-textField-affix-padding: var(--component-textField-padding);--component-textField-affix-size: 1.75rem;--component-textField-scrollMargin: 88rem;--component-textField-maxHeight: 90dvh;--component-textField-maxHeightFallback: 90vh;display:flex;align-items:stretch;border-radius:var(--commons-borderRadius-M);background-color:var(--component-textField-background);box-shadow:0 0 0 1px var(--component-textField-border)}.textField:hover{--component-textField-border: var(--palettes-neutral-400)}.textField:has(.textField-input-value:focus-visible){outline:2px solid var(--palettes-product-700);outline-offset:3px}.textField .textField-input-affix-toggle{pointer-events:auto;width:var(--component-textField-affix-size);height:var(--component-textField-affix-size);color:var(--palettes-neutral-600)}.textField-input{display:flex;align-items:center;width:100%;border-radius:var(--commons-borderRadius-M);background-color:var(--component-textField-background);position:relative}.textField-input:has(.textField-input-affix-icon){--component-textField-affix-padding: 2.5rem}.textField-input:has(.textField-input-affix-toggle){--component-textField-affix-padding: 3rem}.textField-input:has(.textField-input-affix-clear){--component-textField-affix-padding: 2rem}.textField-input:has(.textField-input-affix-clear):has(.textField-input-affix-icon){--component-textField-affix-padding: 4rem}.textField-input:has(.textField-input-affix-clear):has(.textField-input-affix-toggle){--component-textField-affix-padding: 4.5rem}.textField-input-valueClone,.textField-input-value{border:0;outline:0;line-height:var(--component-textField-lineHeight);font-size:var(--component-textField-fontSize);width:100%;padding:var(--component-textField-padding) var(--component-textField-affix-padding) var(--component-textField-padding) var(--component-textField-padding);background-color:transparent;color:var(--component-textField-color)}.textField-input-valueClone:is(textarea,div),.textField-input-value:is(textarea,div){max-height:var(--component-textField-maxHeight)}@supports not (height: 1dvh){.textField-input-valueClone:is(textarea,div),.textField-input-value:is(textarea,div){--component-textField-maxHeight: var(--component-textField-maxHeightFallback)}}.textField-input-valueClone::placeholder,.textField-input-value::placeholder{color:var(--component-textField-placeholder)}.textField-input-valueClone:is(textarea),.textField-input-value:is(textarea){resize:vertical;min-height:calc(2lh + var(--component-textField-padding) * 2)}.textField-input-valueClone:is(textarea):not([rows]),.textField-input-value:is(textarea):not([rows]){height:calc(3lh + var(--component-textField-padding) * 2)}.textField-input-affix{display:inline-flex;align-items:center;gap:var(--pr-t-spacings-100);position:absolute;right:var(--pr-t-spacings-100);pointer-events:none}.textField-input-affix-icon{--icon-size: 1.5rem;color:var(--palettes-neutral-600);pointer-events:none}.textField-input-affix-clear{pointer-events:auto}.textField-prefix{display:flex;padding-left:var(--component-textField-padding);align-items:center;color:var(--component-textField-prefix-color);line-height:var(--component-textField-lineHeight);font-size:var(--component-textField-fontSize);border-top-left-radius:var(--commons-borderRadius-M);border-bottom-left-radius:var(--commons-borderRadius-M)}.textField-prefix~.textField-input{border-top-left-radius:0;border-bottom-left-radius:0}.textField-suffix{display:flex;padding-right:var(--component-textField-padding);align-items:center;color:var(--component-textField-prefix-color);line-height:var(--component-textField-lineHeight);font-size:var(--component-textField-fontSize);border-top-right-radius:var(--commons-borderRadius-M);border-bottom-right-radius:var(--commons-borderRadius-M);order:1;flex-shrink:0}.textField-suffix~.textField-input{border-top-right-radius:0;border-bottom-right-radius:0}.textField.mod-S{--component-textField-fontSize: var(--sizes-S-fontSize);--component-textField-lineHeight: var(--sizes-S-lineHeight);--component-textField-padding: var(--pr-t-spacings-75);--component-textField-affix-size: 1.5rem}.textField.mod-S .textField-input-affix-toggle{--icon-size: 1.25rem}.textField.mod-S .textField-input-affix-clear.clear,.textField.mod-S .textField-input-affix-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.textField.mod-S .textField-input-affix-icon{--icon-size: 1.25rem}.textField.mod-XS{--component-textField-fontSize: var(--sizes-XS-fontSize);--component-textField-lineHeight: var(--sizes-XS-lineHeight);--component-textField-padding: var(--pr-t-spacings-50)}.textField.mod-XS .textField-prefix,.textField.mod-XS .textField-suffix,.textField.mod-XS .textField-input-affix-icon{--icon-size: 1rem}.textField.mod-XS .textField-input-affix-clear.clear,.textField.mod-XS .textField-input-affix-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.textField.mod-valueAlignRight .textField-input-value{text-align:right}.textField.is-invalid,.textField:has(.textField-input-value[aria-invalid=true]){--component-textField-border: var(--palettes-error-400);--component-textField-background: var(--palettes-error-50);--component-textField-placeholder: var(--palettes-error-400)}.textField.is-invalid:hover,.textField:has(.textField-input-value[aria-invalid=true]):hover{--component-textField-border: var(--palettes-error-600)}.textField.is-disabled,.textField:has(.textField-input-value:disabled){--component-textField-border: var(--palettes-neutral-300);--component-textField-background: var(--commons-disabled-background);--component-textField-color: var(--palettes-neutral-700)}.textField.mod-autoResize .textField-input{display:grid;align-items:normal;min-width:0;scroll-margin-bottom:var(--component-textField-scrollMargin)}.textField.mod-autoResize .textField-input-valueClone,.textField.mod-autoResize .textField-input-value{white-space:pre-wrap;overflow-wrap:break-word;grid-area:1/1/2/2;resize:none;min-width:0;overflow:auto}.textField.mod-autoResize .textField-input-valueClone{visibility:hidden}.textField.mod-autoResize .textField-input-valueClone:after{content:\" \"}.skeleton{--components-skeleton-gradient-step-one: var(--palettes-neutral-50);--components-skeleton-gradient-step-two: var(--palettes-neutral-200);--components-skeleton-shape-height: 1.5rem;--components-skeleton-shape-width: 1.5rem;--components-skeleton-text-offset: var(--pr-t-spacings-75);--components-skeleton-text-width: 100%;--components-skeleton-text-clipPathRound: round var(--commons-borderRadius-L)}.skeleton-item{animation:skeletonFade var(--commons-animations-durations-fast) ease-in 1 forwards}@keyframes skeletonFade{0%{opacity:0}to{opacity:1}}.skeleton.mod-dark{--components-skeleton-gradient-step-one: var(--palettes-neutral-200);--components-skeleton-gradient-step-two: var(--palettes-neutral-500)}.skeleton.is-loading{animation:skeletonPulse 1.5s infinite ease-in-out}.skeleton.is-loading .skeleton-item{animation:skeletonBackground 1.5s infinite linear;background-image:linear-gradient(90deg,var(--components-skeleton-gradient-step-one, var(--palettes-neutral-50)),var(--components-skeleton-gradient-step-two, var(--palettes-neutral-200)),var(--components-skeleton-gradient-step-one, var(--palettes-neutral-50)));background-size:150% 100%;background-repeat:repeat-x;display:block}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle){clip-path:inset(calc(var(--components-skeleton-text-offset) + 1px) calc(100% - var(--components-skeleton-text-width, 100%)) calc(var(--components-skeleton-text-offset) - 1px) 0 var(--components-skeleton-text-clipPathRound));height:var(--sizes-M-lineHeight);width:100%}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle).u-textXS{--components-skeleton-text-offset: .25rem;height:var(--sizes-XS-lineHeight)}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle).u-textS{--components-skeleton-text-offset: .375rem;height:var(--sizes-S-lineHeight)}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle).u-textL{--components-skeleton-text-offset: .375rem;height:var(--sizes-L-lineHeight)}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle).u-textXL{height:var(--sizes-XL-lineHeight)}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle).u-textXXL{--components-skeleton-text-offset: .5rem;height:var(--sizes-XXL-lineHeight)}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle):is(.u-h1,h1){height:auto;line-height:var(--sizes-lineHeight);min-height:var(--sizes-lineHeight);--components-skeleton-text-offset: .5rem}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle):is(.u-h2,h2){height:auto;line-height:var(--sizes-lineHeight);min-height:var(--sizes-lineHeight);--components-skeleton-text-offset: .375rem}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle):is(.u-h3,h3){height:auto;line-height:var(--sizes-lineHeight);min-height:var(--sizes-lineHeight);--components-skeleton-text-offset: .375rem}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle):is(.u-h4,h4){height:auto;line-height:var(--sizes-lineHeight);min-height:var(--sizes-lineHeight);--components-skeleton-text-offset: .375rem}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle):is(.u-h5,h5){height:auto;line-height:var(--sizes-lineHeight);min-height:var(--sizes-lineHeight);--components-skeleton-text-offset: .375rem}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle):is(.u-h6,h6){height:auto;line-height:var(--sizes-lineHeight);min-height:var(--sizes-lineHeight);--components-skeleton-text-offset: .25rem}@keyframes skeletonBackground{0%{background-position:150% 50%}to{background-position:-150% 50%}}@keyframes skeletonPulse{0%{opacity:.9}50%{opacity:1}to{opacity:.9}}.skeleton.is-loading .skeleton-item.mod-dark{--components-skeleton-gradient-step-one: var(--palettes-neutral-200);--components-skeleton-gradient-step-two: var(--palettes-neutral-500)}.skeleton.is-loading .skeleton-item.mod-square{border-radius:var(--commons-borderRadius-M);height:var(--components-skeleton-shape-height);width:var(--components-skeleton-shape-width)}.skeleton.is-loading .skeleton-item.mod-circle{border-radius:var(--commons-borderRadius-full);height:var(--components-skeleton-shape-height);width:var(--components-skeleton-shape-width)}.skeleton.is-loading .skeleton-item.mod-XS{--components-skeleton-shape-height: .5rem;--components-skeleton-shape-width: .5rem}.skeleton.is-loading .skeleton-item.mod-S{--components-skeleton-shape-height: 1rem;--components-skeleton-shape-width: 1rem}.skeleton.is-loading .skeleton-item.mod-L{--components-skeleton-shape-height: 2rem;--components-skeleton-shape-width: 2rem}.skeleton.is-loading .skeleton-item.mod-XL{--components-skeleton-shape-height: 3rem;--components-skeleton-shape-width: 3rem}.skeleton.is-loading .skeleton-item.mod-XXL{--components-skeleton-shape-height: 4rem;--components-skeleton-shape-width: 4rem}.skeleton.is-loading .skeleton-item.mod-alignRight:not(.mod-square,.mod-circle){clip-path:inset(calc(var(--components-skeleton-text-offset) + 1px) 0 calc(var(--components-skeleton-text-offset) - 1px) calc(100% - var(--components-skeleton-text-width, 100%)) var(--components-skeleton-text-clipPathRound))}.skeleton.is-loading .skeleton-item.mod-alignCenter:not(.mod-square,.mod-circle){clip-path:inset(calc(var(--components-skeleton-text-offset) + 1px) calc(50% - var(--components-skeleton-text-width, 100%) / 2) calc(var(--components-skeleton-text-offset) - 1px) calc(50% - var(--components-skeleton-text-width, 100%) / 2) var(--components-skeleton-text-clipPathRound))}\n"] }]
43
+ args: [{ selector: 'lu-skeleton-field', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-field skeleton is-loading\" [class.mod-dark]=\"dark\" inert=\"inert\">\n\t<span class=\"skeleton-item\" style=\"--components-skeleton-text-width: 50%\"></span>\n\t<div class=\"textField\">\n\t\t<div class=\"textField-input\">\n\t\t\t<span class=\"textField-input-value\">\n\t\t\t\t<span class=\"skeleton-item\" style=\"--components-skeleton-text-width: 80%\"></span>\n\t\t\t</span>\n\t\t</div>\n\t</div>\n</div>\n", styles: [".textField{--component-textField-lineHeight: var(--sizes-M-lineHeight);--component-textField-fontSize: var(--sizes-M-fontSize);--component-textField-placeholder: var(--palettes-neutral-400);--component-textField-background: var(--palettes-neutral-0);--component-textField-border: var(--palettes-neutral-300);--component-textField-color: var(--palettes-neutral-800);--component-textField-prefix-color: var(--palettes-neutral-600);--component-textField-padding: var(--pr-t-spacings-100);--component-textField-affix-padding: var(--component-textField-padding);--component-textField-affix-size: 1.75rem;--component-textField-scrollMargin: 88rem;--component-textField-maxHeight: 90dvh;--component-textField-maxHeightFallback: 90vh;display:flex;align-items:stretch;border-radius:var(--commons-borderRadius-M);background-color:var(--component-textField-background);box-shadow:0 0 0 1px var(--component-textField-border)}.textField:hover{--component-textField-border: var(--palettes-neutral-400)}.textField:has(.textField-input-value:focus-visible){outline:2px solid var(--palettes-product-700);outline-offset:3px}.textField .textField-input-affix-toggle{pointer-events:auto;width:var(--component-textField-affix-size);height:var(--component-textField-affix-size);color:var(--palettes-neutral-600)}.textField-input{display:flex;align-items:center;width:100%;border-radius:var(--commons-borderRadius-M);background-color:var(--component-textField-background);position:relative}.textField-input:has(.textField-input-affix-icon){--component-textField-affix-padding: 2.5rem}.textField-input:has(.textField-input-affix-toggle){--component-textField-affix-padding: 3rem}.textField-input:has(.textField-input-affix-clear){--component-textField-affix-padding: 2rem}.textField-input:has(.textField-input-affix-clear):has(.textField-input-affix-icon){--component-textField-affix-padding: 4rem}.textField-input:has(.textField-input-affix-clear):has(.textField-input-affix-toggle){--component-textField-affix-padding: 4.5rem}.textField-input-valueClone,.textField-input-value{border:0;outline:0;line-height:var(--component-textField-lineHeight);font-size:var(--component-textField-fontSize);width:100%;padding:var(--component-textField-padding) var(--component-textField-affix-padding) var(--component-textField-padding) var(--component-textField-padding);background-color:transparent;color:var(--component-textField-color)}.textField-input-valueClone:is(textarea,div),.textField-input-value:is(textarea,div){max-height:var(--component-textField-maxHeight)}@supports not (height: 1dvh){.textField-input-valueClone:is(textarea,div),.textField-input-value:is(textarea,div){--component-textField-maxHeight: var(--component-textField-maxHeightFallback)}}.textField-input-valueClone::placeholder,.textField-input-value::placeholder{color:var(--component-textField-placeholder)}.textField-input-valueClone:is(textarea),.textField-input-value:is(textarea){resize:vertical;min-height:calc(2lh + var(--component-textField-padding) * 2)}.textField-input-valueClone:is(textarea):not([rows]),.textField-input-value:is(textarea):not([rows]){height:calc(3lh + var(--component-textField-padding) * 2)}.textField-input-valueClone:is(textarea)[rows=\"1\"],.textField-input-value:is(textarea)[rows=\"1\"]{min-height:calc(1lh + var(--component-textField-padding) * 2)}.textField-input-affix{display:inline-flex;align-items:center;gap:var(--pr-t-spacings-100);position:absolute;right:var(--pr-t-spacings-100);pointer-events:none}.textField-input-affix-icon{--icon-size: 1.5rem;color:var(--palettes-neutral-600);pointer-events:none}.textField-input-affix-clear{pointer-events:auto}.textField-prefix{display:flex;padding-left:var(--component-textField-padding);align-items:center;color:var(--component-textField-prefix-color);line-height:var(--component-textField-lineHeight);font-size:var(--component-textField-fontSize);border-top-left-radius:var(--commons-borderRadius-M);border-bottom-left-radius:var(--commons-borderRadius-M)}.textField-prefix~.textField-input{border-top-left-radius:0;border-bottom-left-radius:0}.textField-suffix{display:flex;padding-right:var(--component-textField-padding);align-items:center;color:var(--component-textField-prefix-color);line-height:var(--component-textField-lineHeight);font-size:var(--component-textField-fontSize);border-top-right-radius:var(--commons-borderRadius-M);border-bottom-right-radius:var(--commons-borderRadius-M);order:1;flex-shrink:0}.textField-suffix~.textField-input{border-top-right-radius:0;border-bottom-right-radius:0}.textField.mod-S{--component-textField-fontSize: var(--sizes-S-fontSize);--component-textField-lineHeight: var(--sizes-S-lineHeight);--component-textField-padding: var(--pr-t-spacings-75);--component-textField-affix-size: 1.5rem}.textField.mod-S .textField-input-affix-toggle{--icon-size: 1.25rem}.textField.mod-S .textField-input-affix-clear.clear,.textField.mod-S .textField-input-affix-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.textField.mod-S .textField-input-affix-icon{--icon-size: 1.25rem}.textField.mod-XS{--component-textField-fontSize: var(--sizes-XS-fontSize);--component-textField-lineHeight: var(--sizes-XS-lineHeight);--component-textField-padding: var(--pr-t-spacings-50)}.textField.mod-XS .textField-prefix,.textField.mod-XS .textField-suffix,.textField.mod-XS .textField-input-affix-icon{--icon-size: 1rem}.textField.mod-XS .textField-input-affix-clear.clear,.textField.mod-XS .textField-input-affix-clear:not(.clear){--components-clear-size: .75rem;--icon-size: .75rem}.textField.mod-valueAlignRight .textField-input-value{text-align:right}.textField.is-invalid,.textField:has(.textField-input-value[aria-invalid=true]){--component-textField-border: var(--palettes-error-400);--component-textField-background: var(--palettes-error-50);--component-textField-placeholder: var(--palettes-error-400)}.textField.is-invalid:hover,.textField:has(.textField-input-value[aria-invalid=true]):hover{--component-textField-border: var(--palettes-error-600)}.textField.is-disabled,.textField:has(.textField-input-value:disabled){--component-textField-border: var(--palettes-neutral-300);--component-textField-background: var(--commons-disabled-background);--component-textField-color: var(--palettes-neutral-700)}.textField.mod-autoResize .textField-input{display:grid;align-items:normal;min-width:0;scroll-margin-bottom:var(--component-textField-scrollMargin)}.textField.mod-autoResize .textField-input-valueClone,.textField.mod-autoResize .textField-input-value{white-space:pre-wrap;overflow-wrap:break-word;grid-area:1/1/2/2;resize:none;min-width:0;overflow:auto}.textField.mod-autoResize .textField-input-valueClone{visibility:hidden}.textField.mod-autoResize .textField-input-valueClone:after{content:\" \"}.skeleton{--components-skeleton-gradient-step-one: var(--palettes-neutral-50);--components-skeleton-gradient-step-two: var(--palettes-neutral-200);--components-skeleton-shape-height: 1.5rem;--components-skeleton-shape-width: 1.5rem;--components-skeleton-text-offset: var(--pr-t-spacings-75);--components-skeleton-text-width: 100%;--components-skeleton-text-clipPathRound: round var(--commons-borderRadius-L)}.skeleton-item{animation:skeletonFade var(--commons-animations-durations-fast) ease-in 1 forwards}@keyframes skeletonFade{0%{opacity:0}to{opacity:1}}.skeleton.mod-dark{--components-skeleton-gradient-step-one: var(--palettes-neutral-200);--components-skeleton-gradient-step-two: var(--palettes-neutral-500)}.skeleton.is-loading{animation:skeletonPulse 1.5s infinite ease-in-out}.skeleton.is-loading .skeleton-item{animation:skeletonBackground 1.5s infinite linear;background-image:linear-gradient(90deg,var(--components-skeleton-gradient-step-one, var(--palettes-neutral-50)),var(--components-skeleton-gradient-step-two, var(--palettes-neutral-200)),var(--components-skeleton-gradient-step-one, var(--palettes-neutral-50)));background-size:150% 100%;background-repeat:repeat-x;display:block}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle){clip-path:inset(calc(var(--components-skeleton-text-offset) + 1px) calc(100% - var(--components-skeleton-text-width, 100%)) calc(var(--components-skeleton-text-offset) - 1px) 0 var(--components-skeleton-text-clipPathRound));height:var(--sizes-M-lineHeight);width:100%}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle).u-textXS{--components-skeleton-text-offset: .25rem;height:var(--sizes-XS-lineHeight)}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle).u-textS{--components-skeleton-text-offset: .375rem;height:var(--sizes-S-lineHeight)}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle).u-textL{--components-skeleton-text-offset: .375rem;height:var(--sizes-L-lineHeight)}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle).u-textXL{height:var(--sizes-XL-lineHeight)}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle).u-textXXL{--components-skeleton-text-offset: .5rem;height:var(--sizes-XXL-lineHeight)}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle):is(.u-h1,h1){height:auto;line-height:var(--sizes-lineHeight);min-height:var(--sizes-lineHeight);--components-skeleton-text-offset: .5rem}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle):is(.u-h2,h2){height:auto;line-height:var(--sizes-lineHeight);min-height:var(--sizes-lineHeight);--components-skeleton-text-offset: .375rem}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle):is(.u-h3,h3){height:auto;line-height:var(--sizes-lineHeight);min-height:var(--sizes-lineHeight);--components-skeleton-text-offset: .375rem}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle):is(.u-h4,h4){height:auto;line-height:var(--sizes-lineHeight);min-height:var(--sizes-lineHeight);--components-skeleton-text-offset: .375rem}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle):is(.u-h5,h5){height:auto;line-height:var(--sizes-lineHeight);min-height:var(--sizes-lineHeight);--components-skeleton-text-offset: .375rem}.skeleton.is-loading .skeleton-item:not(.mod-square,.mod-circle):is(.u-h6,h6){height:auto;line-height:var(--sizes-lineHeight);min-height:var(--sizes-lineHeight);--components-skeleton-text-offset: .25rem}@keyframes skeletonBackground{0%{background-position:150% 50%}to{background-position:-150% 50%}}@keyframes skeletonPulse{0%{opacity:.9}50%{opacity:1}to{opacity:.9}}.skeleton.is-loading .skeleton-item.mod-dark{--components-skeleton-gradient-step-one: var(--palettes-neutral-200);--components-skeleton-gradient-step-two: var(--palettes-neutral-500)}.skeleton.is-loading .skeleton-item.mod-square{border-radius:var(--commons-borderRadius-M);height:var(--components-skeleton-shape-height);width:var(--components-skeleton-shape-width)}.skeleton.is-loading .skeleton-item.mod-circle{border-radius:var(--commons-borderRadius-full);height:var(--components-skeleton-shape-height);width:var(--components-skeleton-shape-width)}.skeleton.is-loading .skeleton-item.mod-XS{--components-skeleton-shape-height: .5rem;--components-skeleton-shape-width: .5rem}.skeleton.is-loading .skeleton-item.mod-S{--components-skeleton-shape-height: 1rem;--components-skeleton-shape-width: 1rem}.skeleton.is-loading .skeleton-item.mod-L{--components-skeleton-shape-height: 2rem;--components-skeleton-shape-width: 2rem}.skeleton.is-loading .skeleton-item.mod-XL{--components-skeleton-shape-height: 3rem;--components-skeleton-shape-width: 3rem}.skeleton.is-loading .skeleton-item.mod-XXL{--components-skeleton-shape-height: 4rem;--components-skeleton-shape-width: 4rem}.skeleton.is-loading .skeleton-item.mod-alignRight:not(.mod-square,.mod-circle){clip-path:inset(calc(var(--components-skeleton-text-offset) + 1px) 0 calc(var(--components-skeleton-text-offset) - 1px) calc(100% - var(--components-skeleton-text-width, 100%)) var(--components-skeleton-text-clipPathRound))}.skeleton.is-loading .skeleton-item.mod-alignCenter:not(.mod-square,.mod-circle){clip-path:inset(calc(var(--components-skeleton-text-offset) + 1px) calc(50% - var(--components-skeleton-text-width, 100%) / 2) calc(var(--components-skeleton-text-offset) - 1px) calc(50% - var(--components-skeleton-text-width, 100%) / 2) var(--components-skeleton-text-clipPathRound))}\n"] }]
44
44
  }], propDecorators: { dark: [{
45
45
  type: Input,
46
46
  args: [{ transform: booleanAttribute }]
@@ -1 +1 @@
1
- {"version":3,"file":"lucca-front-ng-skeleton.mjs","sources":["../../../packages/ng/skeleton/skeleton-button/skeleton-button.component.ts","../../../packages/ng/skeleton/skeleton-button/skeleton-button.component.html","../../../packages/ng/skeleton/skeleton-header/skeleton-header.component.ts","../../../packages/ng/skeleton/skeleton-header/skeleton-header.component.html","../../../packages/ng/skeleton/skeleton-field/skeleton-field.component.ts","../../../packages/ng/skeleton/skeleton-field/skeleton-field.component.html","../../../packages/ng/skeleton/lucca-front-ng-skeleton.ts"],"sourcesContent":["import { booleanAttribute, ChangeDetectionStrategy, Component, Input } from '@angular/core';\n\n@Component({\n\tselector: 'lu-skeleton-button',\n\tstandalone: true,\n\ttemplateUrl: './skeleton-button.component.html',\n\tstyleUrl: './skeleton-button.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkeletonButtonComponent {\n\t@Input({ transform: booleanAttribute })\n\tdark = false;\n}\n","<div class=\"skeleton is-loading\" [class.mod-dark]=\"dark\" inert=\"inert\">\n\t<div class=\"button\" [class.mod-dark]=\"dark\">\n\t\t<span class=\"skeleton-item\"></span>\n\t</div>\n</div>\n","import { booleanAttribute, ChangeDetectionStrategy, Component, Input } from '@angular/core';\n\n@Component({\n\tselector: 'lu-skeleton-header',\n\tstandalone: true,\n\ttemplateUrl: './skeleton-header.component.html',\n\tstyleUrl: './skeleton-header.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkeletonHeaderComponent {\n\t@Input({ transform: booleanAttribute })\n\tdark = false;\n}\n","<header class=\"pageHeader skeleton is-loading\" [class.mod-dark]=\"dark\" inert=\"inert\">\n\t<div class=\"pageHeader-content\">\n\t\t<div class=\"pageHeader-content-title u-flexGrow1\">\n\t\t\t<h1 class=\"pr-u-margin0 skeleton-item\" style=\"--components-skeleton-text-width: 80%\"></h1>\n\t\t</div>\n\t\t<div class=\"pageHeader-content-actions\">\n\t\t\t<span class=\"u-textXXL skeleton-item\"></span>\n\t\t</div>\n\t</div>\n\t<div class=\"pageHeader-description\">\n\t\t<p class=\"pr-u-marginBottom0 skeleton-item\" style=\"--components-skeleton-text-width: 70%\"></p>\n\t\t<p class=\"pr-u-marginBottom0 skeleton-item\" style=\"--components-skeleton-text-width: 40%\"></p>\n\t</div>\n</header>\n","import { booleanAttribute, ChangeDetectionStrategy, Component, Input } from '@angular/core';\n\n@Component({\n\tselector: 'lu-skeleton-field',\n\tstandalone: true,\n\ttemplateUrl: './skeleton-field.component.html',\n\tstyleUrl: './skeleton-field.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkeletonFieldComponent {\n\t@Input({ transform: booleanAttribute })\n\tdark = false;\n}\n","<div class=\"form-field skeleton is-loading\" [class.mod-dark]=\"dark\" inert=\"inert\">\n\t<span class=\"skeleton-item\" style=\"--components-skeleton-text-width: 50%\"></span>\n\t<div class=\"textField\">\n\t\t<div class=\"textField-input\">\n\t\t\t<span class=\"textField-input-value\">\n\t\t\t\t<span class=\"skeleton-item\" style=\"--components-skeleton-text-width: 80%\"></span>\n\t\t\t</span>\n\t\t</div>\n\t</div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"lucca-front-ng-skeleton.mjs","sources":["../../../packages/ng/skeleton/skeleton-button/skeleton-button.component.ts","../../../packages/ng/skeleton/skeleton-button/skeleton-button.component.html","../../../packages/ng/skeleton/skeleton-header/skeleton-header.component.ts","../../../packages/ng/skeleton/skeleton-header/skeleton-header.component.html","../../../packages/ng/skeleton/skeleton-field/skeleton-field.component.ts","../../../packages/ng/skeleton/skeleton-field/skeleton-field.component.html","../../../packages/ng/skeleton/lucca-front-ng-skeleton.ts"],"sourcesContent":["import { booleanAttribute, ChangeDetectionStrategy, Component, Input } from '@angular/core';\n\n@Component({\n\tselector: 'lu-skeleton-button',\n\tstandalone: true,\n\ttemplateUrl: './skeleton-button.component.html',\n\tstyleUrl: './skeleton-button.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkeletonButtonComponent {\n\t@Input({ transform: booleanAttribute })\n\tdark = false;\n}\n","<div class=\"skeleton is-loading\" [class.mod-dark]=\"dark\" inert=\"inert\">\n\t<div class=\"button\" [class.mod-dark]=\"dark\">\n\t\t<span class=\"skeleton-item\"></span>\n\t</div>\n</div>\n","import { booleanAttribute, ChangeDetectionStrategy, Component, Input } from '@angular/core';\n\n@Component({\n\tselector: 'lu-skeleton-header',\n\tstandalone: true,\n\ttemplateUrl: './skeleton-header.component.html',\n\tstyleUrl: './skeleton-header.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkeletonHeaderComponent {\n\t@Input({ transform: booleanAttribute })\n\tdark = false;\n}\n","<header class=\"pageHeader skeleton is-loading\" [class.mod-dark]=\"dark\" inert=\"inert\">\n\t<div class=\"pageHeader-content\">\n\t\t<div class=\"pageHeader-content-title u-flexGrow1\">\n\t\t\t<h1 class=\"pr-u-margin0 skeleton-item\" style=\"--components-skeleton-text-width: 80%\"></h1>\n\t\t</div>\n\t\t<div class=\"pageHeader-content-actions\">\n\t\t\t<span class=\"u-textXXL skeleton-item\"></span>\n\t\t</div>\n\t</div>\n\t<div class=\"pageHeader-description\">\n\t\t<p class=\"pr-u-marginBottom0 skeleton-item\" style=\"--components-skeleton-text-width: 70%\"></p>\n\t\t<p class=\"pr-u-marginBottom0 skeleton-item\" style=\"--components-skeleton-text-width: 40%\"></p>\n\t</div>\n</header>\n","import { booleanAttribute, ChangeDetectionStrategy, Component, Input } from '@angular/core';\n\n@Component({\n\tselector: 'lu-skeleton-field',\n\tstandalone: true,\n\ttemplateUrl: './skeleton-field.component.html',\n\tstyleUrl: './skeleton-field.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkeletonFieldComponent {\n\t@Input({ transform: booleanAttribute })\n\tdark = false;\n}\n","<div class=\"form-field skeleton is-loading\" [class.mod-dark]=\"dark\" inert=\"inert\">\n\t<span class=\"skeleton-item\" style=\"--components-skeleton-text-width: 50%\"></span>\n\t<div class=\"textField\">\n\t\t<div class=\"textField-input\">\n\t\t\t<span class=\"textField-input-value\">\n\t\t\t\t<span class=\"skeleton-item\" style=\"--components-skeleton-text-width: 80%\"></span>\n\t\t\t</span>\n\t\t</div>\n\t</div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
@@ -1,12 +1,12 @@
1
1
  import { trigger, state, style, transition, animate } from '@angular/animations';
2
2
  import * as i0 from '@angular/core';
3
- import { inject, DestroyRef, Component, ChangeDetectionStrategy, HostListener, HostBinding, NgModule, ElementRef, Renderer2, ChangeDetectorRef, numberAttribute, booleanAttribute, Directive, Input } from '@angular/core';
3
+ import { inject, DestroyRef, Component, ChangeDetectionStrategy, HostListener, HostBinding, NgModule, Injectable, ElementRef, Renderer2, input, booleanAttribute, computed, effect, signal, numberAttribute, Directive, Input } from '@angular/core';
4
4
  import { Subject, BehaviorSubject, Observable, combineLatest, switchMap, merge, timer, startWith } from 'rxjs';
5
- import { NgClass } from '@angular/common';
5
+ import { NgClass, DOCUMENT } from '@angular/common';
6
6
  import { Overlay, OverlayModule } from '@angular/cdk/overlay';
7
7
  import { ComponentPortal } from '@angular/cdk/portal';
8
- import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
9
- import { filter, map, debounce, debounceTime } from 'rxjs/operators';
8
+ import { toObservable, toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
9
+ import { debounceTime, filter, map, debounce } from 'rxjs/operators';
10
10
 
11
11
  const luTransformTooltip = trigger('transformTooltip', [
12
12
  state('enter', style({
@@ -45,13 +45,13 @@ class LuTooltipPanelComponent {
45
45
  };
46
46
  }
47
47
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: LuTooltipPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
48
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: LuTooltipPanelComponent, isStandalone: true, selector: "lu-tooltip-panel", host: { attributes: { "role": "tooltip" }, listeners: { "mouseenter": "mouseEnter()", "mouseleave": "mouseLeave()" }, properties: { "attr.id": "this.id" } }, ngImport: i0, template: "<div class=\"tooltip\" [ngClass]=\"contentPositionClasses\" [innerHtml]=\"content\"></div>\n", styles: [".tooltip{--components-tooltip-background-color: var(--palettes-neutral-900);--components-tooltip-color: var(--palettes-neutral-0);--components-tooltip-max-width: 15rem;--components-tooltip-transformOrigin: center;--components-tooltip-margin: 0;background-color:var(--components-tooltip-background-color);color:var(--components-tooltip-color);padding:var(--pr-t-spacings-50) var(--pr-t-spacings-100);max-width:var(--components-tooltip-max-width);border-radius:var(--commons-borderRadius-M);font-size:var(--sizes-XS-fontSize);line-height:var(--sizes-XS-lineHeight);transform-origin:var(--components-tooltip-transformOrigin);margin:var(--components-tooltip-margin);text-align:center;width:fit-content;animation-name:scaleIn;animation-duration:var(--commons-animations-durations-fast);animation-iteration-count:1}@keyframes scaleIn{0%{transform:scale(0)}to{transform:scale(1)}}.tooltip:empty{display:none}@supports (background-image: -webkit-named-image(i)){@media (hover: hover){[luTooltipWhenEllipsis]:after{content:\"\";display:block}}}.tooltip.is-above{--components-tooltip-transformOrigin: bottom center}.tooltip.is-below{--components-tooltip-transformOrigin: top center}.tooltip.is-before{--components-tooltip-transformOrigin: center right}.tooltip.is-before.is-above{--components-tooltip-transformOrigin: bottom right}.tooltip.is-before.is-below{--components-tooltip-transformOrigin: top right}.tooltip.is-after{--components-tooltip-transformOrigin: center left}.tooltip.is-after.is-above{--components-tooltip-transformOrigin: bottom left}.tooltip.is-after.is-below{--components-tooltip-transformOrigin: top left}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
48
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: LuTooltipPanelComponent, isStandalone: true, selector: "lu-tooltip-panel", host: { attributes: { "role": "tooltip" }, listeners: { "mouseenter": "mouseEnter()", "mouseleave": "mouseLeave()" }, properties: { "attr.id": "this.id" } }, ngImport: i0, template: "<div class=\"tooltip\" [ngClass]=\"contentPositionClasses\" [innerHtml]=\"content()\"></div>\n", styles: [".tooltip{--components-tooltip-background-color: var(--palettes-neutral-900);--components-tooltip-color: var(--palettes-neutral-0);--components-tooltip-max-width: 15rem;--components-tooltip-transformOrigin: center;--components-tooltip-margin: 0;background-color:var(--components-tooltip-background-color);color:var(--components-tooltip-color);padding:var(--pr-t-spacings-50) var(--pr-t-spacings-100);max-width:var(--components-tooltip-max-width);border-radius:var(--commons-borderRadius-M);font-size:var(--sizes-XS-fontSize);line-height:var(--sizes-XS-lineHeight);transform-origin:var(--components-tooltip-transformOrigin);margin:var(--components-tooltip-margin);text-align:center;width:fit-content;animation-name:scaleIn;animation-duration:var(--commons-animations-durations-fast);animation-iteration-count:1}@keyframes scaleIn{0%{transform:scale(0)}to{transform:scale(1)}}.tooltip:empty{display:none}@supports (background-image: -webkit-named-image(i)){@media (hover: hover){[luTooltipWhenEllipsis]:after{content:\"\";display:block}}}.tooltip.is-above{--components-tooltip-transformOrigin: bottom center}.tooltip.is-below{--components-tooltip-transformOrigin: top center}.tooltip.is-before{--components-tooltip-transformOrigin: center right}.tooltip.is-before.is-above{--components-tooltip-transformOrigin: bottom right}.tooltip.is-before.is-below{--components-tooltip-transformOrigin: top right}.tooltip.is-after{--components-tooltip-transformOrigin: center left}.tooltip.is-after.is-above{--components-tooltip-transformOrigin: bottom left}.tooltip.is-after.is-below{--components-tooltip-transformOrigin: top left}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
49
49
  }
50
50
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: LuTooltipPanelComponent, decorators: [{
51
51
  type: Component,
52
52
  args: [{ selector: 'lu-tooltip-panel', standalone: true, host: {
53
53
  role: 'tooltip',
54
- }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<div class=\"tooltip\" [ngClass]=\"contentPositionClasses\" [innerHtml]=\"content\"></div>\n", styles: [".tooltip{--components-tooltip-background-color: var(--palettes-neutral-900);--components-tooltip-color: var(--palettes-neutral-0);--components-tooltip-max-width: 15rem;--components-tooltip-transformOrigin: center;--components-tooltip-margin: 0;background-color:var(--components-tooltip-background-color);color:var(--components-tooltip-color);padding:var(--pr-t-spacings-50) var(--pr-t-spacings-100);max-width:var(--components-tooltip-max-width);border-radius:var(--commons-borderRadius-M);font-size:var(--sizes-XS-fontSize);line-height:var(--sizes-XS-lineHeight);transform-origin:var(--components-tooltip-transformOrigin);margin:var(--components-tooltip-margin);text-align:center;width:fit-content;animation-name:scaleIn;animation-duration:var(--commons-animations-durations-fast);animation-iteration-count:1}@keyframes scaleIn{0%{transform:scale(0)}to{transform:scale(1)}}.tooltip:empty{display:none}@supports (background-image: -webkit-named-image(i)){@media (hover: hover){[luTooltipWhenEllipsis]:after{content:\"\";display:block}}}.tooltip.is-above{--components-tooltip-transformOrigin: bottom center}.tooltip.is-below{--components-tooltip-transformOrigin: top center}.tooltip.is-before{--components-tooltip-transformOrigin: center right}.tooltip.is-before.is-above{--components-tooltip-transformOrigin: bottom right}.tooltip.is-before.is-below{--components-tooltip-transformOrigin: top right}.tooltip.is-after{--components-tooltip-transformOrigin: center left}.tooltip.is-after.is-above{--components-tooltip-transformOrigin: bottom left}.tooltip.is-after.is-below{--components-tooltip-transformOrigin: top left}\n"] }]
54
+ }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<div class=\"tooltip\" [ngClass]=\"contentPositionClasses\" [innerHtml]=\"content()\"></div>\n", styles: [".tooltip{--components-tooltip-background-color: var(--palettes-neutral-900);--components-tooltip-color: var(--palettes-neutral-0);--components-tooltip-max-width: 15rem;--components-tooltip-transformOrigin: center;--components-tooltip-margin: 0;background-color:var(--components-tooltip-background-color);color:var(--components-tooltip-color);padding:var(--pr-t-spacings-50) var(--pr-t-spacings-100);max-width:var(--components-tooltip-max-width);border-radius:var(--commons-borderRadius-M);font-size:var(--sizes-XS-fontSize);line-height:var(--sizes-XS-lineHeight);transform-origin:var(--components-tooltip-transformOrigin);margin:var(--components-tooltip-margin);text-align:center;width:fit-content;animation-name:scaleIn;animation-duration:var(--commons-animations-durations-fast);animation-iteration-count:1}@keyframes scaleIn{0%{transform:scale(0)}to{transform:scale(1)}}.tooltip:empty{display:none}@supports (background-image: -webkit-named-image(i)){@media (hover: hover){[luTooltipWhenEllipsis]:after{content:\"\";display:block}}}.tooltip.is-above{--components-tooltip-transformOrigin: bottom center}.tooltip.is-below{--components-tooltip-transformOrigin: top center}.tooltip.is-before{--components-tooltip-transformOrigin: center right}.tooltip.is-before.is-above{--components-tooltip-transformOrigin: bottom right}.tooltip.is-before.is-below{--components-tooltip-transformOrigin: top right}.tooltip.is-after{--components-tooltip-transformOrigin: center left}.tooltip.is-after.is-above{--components-tooltip-transformOrigin: bottom left}.tooltip.is-after.is-below{--components-tooltip-transformOrigin: top left}\n"] }]
55
55
  }], propDecorators: { mouseEnter: [{
56
56
  type: HostListener,
57
57
  args: ['mouseenter']
@@ -76,13 +76,91 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
76
76
  }]
77
77
  }] });
78
78
 
79
+ class EllipsisRuler {
80
+ #document;
81
+ constructor() {
82
+ this.#document = inject(DOCUMENT);
83
+ this.parentMasked = this.#document.createElement('div');
84
+ this.parentMasked.classList.add('u-mask');
85
+ this.parentMasked.setAttribute('aria-hidden', 'true');
86
+ this.#document.body.appendChild(this.parentMasked);
87
+ }
88
+ /**
89
+ * Hacky af but let's explain everything
90
+ * This method checks for ellipsis by cloning the node and checking its width against original element.
91
+ *
92
+ * We used to do this using scrollWidth but the thing is, it's a rounded value. Sometimes,
93
+ * you'd get true while it should be false and vice-versa, because of rounding.
94
+ *
95
+ * So we duplicate the properties we're interested in on the element to be tested to calculate its ideal size,
96
+ * which we then compare with its current size.
97
+ *
98
+ * To avoid doing multiple reflow per check, we wait for the next microtask on each key step of the process:
99
+ * - After computing element style
100
+ * - After cloning the element and appending it to the DOM
101
+ * - After computing the width of the cloned element
102
+ * - After removing the cloned element from the DOM
103
+ *
104
+ * This way, we have 2 reflows per check, no matter how many elements are checked in a row.
105
+ */
106
+ async hasEllipsis(element) {
107
+ const elementStyle = getComputedStyle(element);
108
+ if (elementStyle.textOverflow !== 'ellipsis') {
109
+ return false;
110
+ }
111
+ const { padding, borderWidth, borderStyle, boxSizing, fontFamily, fontWeight, fontStyle } = elementStyle;
112
+ const fontSize = (Number(elementStyle.fontSize.replace('px', '')) / Number(getComputedStyle(document.body).fontSize.replace('px', ''))).toString() + 'rem';
113
+ // When multiple elements are checked in a row, we wait for the next microtask to before cloning the element
114
+ // to avoid the browser to reflow the page for each tooltip
115
+ await Promise.resolve();
116
+ const elementCloned = this.#document.createElement('div');
117
+ Object.assign(elementCloned.style, {
118
+ width: 'fit-content',
119
+ whiteSpace: 'nowrap',
120
+ position: 'absolute',
121
+ visibility: 'hidden',
122
+ padding,
123
+ borderWidth,
124
+ borderStyle,
125
+ boxSizing,
126
+ fontFamily,
127
+ fontWeight,
128
+ fontStyle,
129
+ fontSize,
130
+ });
131
+ this.parentMasked.appendChild(elementCloned);
132
+ elementCloned.innerHTML = element.innerHTML;
133
+ // To avoid multiple reflows, we wait for the next microtask before calculating the width
134
+ await Promise.resolve();
135
+ try {
136
+ const elementClonedWidth = elementCloned.getBoundingClientRect().width;
137
+ const elementWidth = element.getBoundingClientRect().width;
138
+ return elementClonedWidth > elementWidth;
139
+ }
140
+ catch (e) {
141
+ return false;
142
+ }
143
+ finally {
144
+ // To avoid multiple reflows, we wait for the next microtask before removing the cloned element
145
+ await Promise.resolve();
146
+ this.parentMasked.removeChild(elementCloned);
147
+ }
148
+ }
149
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: EllipsisRuler, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
150
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: EllipsisRuler, providedIn: 'root' }); }
151
+ }
152
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: EllipsisRuler, decorators: [{
153
+ type: Injectable,
154
+ args: [{ providedIn: 'root' }]
155
+ }], ctorParameters: () => [] });
156
+
79
157
  let nextId = 0;
80
158
  class LuTooltipTriggerDirective {
81
159
  #overlay;
82
160
  #host;
83
161
  #renderer;
162
+ #ruler;
84
163
  #destroyRef;
85
- #cdr;
86
164
  #openDelay$;
87
165
  set luTooltipEnterDelay(delay) {
88
166
  this.#openDelay$.next(delay);
@@ -91,13 +169,8 @@ class LuTooltipTriggerDirective {
91
169
  set luTooltipLeaveDelay(delay) {
92
170
  this.#closeDelay$.next(delay);
93
171
  }
94
- #disabled;
95
- set luTooltipDisabled(disabled) {
96
- this.#disabled = disabled;
97
- if (disabled) {
98
- this.setAccessibilityProperties(null);
99
- }
100
- }
172
+ #hasEllipsis$;
173
+ #hasEllipsis;
101
174
  onMouseEnter() {
102
175
  this.open$.next();
103
176
  }
@@ -114,7 +187,7 @@ class LuTooltipTriggerDirective {
114
187
  }
115
188
  #generatedId;
116
189
  get ariaDescribedBy() {
117
- if (this.#disabled || this.luTooltipWhenEllipsis || this.luTooltipOnlyForDisplay) {
190
+ if (this.luTooltipDisabled() || this.luTooltipWhenEllipsis || this.luTooltipOnlyForDisplay) {
118
191
  return null;
119
192
  }
120
193
  return `${this.#generatedId}-panel`;
@@ -123,14 +196,15 @@ class LuTooltipTriggerDirective {
123
196
  this.#overlay = inject(Overlay);
124
197
  this.#host = inject(ElementRef);
125
198
  this.#renderer = inject(Renderer2);
199
+ this.#ruler = inject(EllipsisRuler);
126
200
  this.#destroyRef = inject(DestroyRef);
127
- this.#cdr = inject(ChangeDetectorRef);
201
+ this.luTooltip = input();
128
202
  this.#openDelay$ = new BehaviorSubject(300);
129
203
  this.#closeDelay$ = new BehaviorSubject(100);
130
- this.#disabled = false;
204
+ this.luTooltipDisabled = input(false, { transform: booleanAttribute });
131
205
  this.luTooltipOnlyForDisplay = false;
132
206
  this.luTooltipPosition = 'above';
133
- this.luTooltipWhenEllipsis = false;
207
+ this.luTooltipWhenEllipsis = input(false, { transform: booleanAttribute });
134
208
  this.resize$ = new Observable((observer) => {
135
209
  const resizeObserver = new ResizeObserver(() => {
136
210
  observer.next();
@@ -140,6 +214,18 @@ class LuTooltipTriggerDirective {
140
214
  resizeObserver.disconnect();
141
215
  };
142
216
  });
217
+ this.#hasEllipsis$ = combineLatest([
218
+ toObservable(
219
+ // 1. Group necessary inputs
220
+ computed(() => ({ whenEllipsis: this.luTooltipWhenEllipsis(), disabled: this.luTooltipDisabled() }))),
221
+ // Resend resize events to trigger the check
222
+ this.resize$.pipe(debounceTime(150)),
223
+ ]).pipe(
224
+ // 2. Keep only necessary inputs
225
+ filter(([{ whenEllipsis, disabled }]) => !disabled && whenEllipsis),
226
+ // 3. Check for ellipsis
227
+ switchMap(() => this.#ruler.hasEllipsis(this.#host.nativeElement)));
228
+ this.#hasEllipsis = toSignal(this.#hasEllipsis$, { initialValue: false });
143
229
  this.open$ = new Subject();
144
230
  this.close$ = new Subject();
145
231
  this.#generatedId = `${this.#host.nativeElement.tagName.toLowerCase()}-tooltip-${nextId++}`;
@@ -148,12 +234,12 @@ class LuTooltipTriggerDirective {
148
234
  // We only filter open events because even if it's disabled while opened,
149
235
  // we want the tooltip to be able to close itself no matter what
150
236
  const openEvents$ = this.open$.pipe(filter(() => {
151
- if (this.#disabled) {
237
+ if (this.luTooltipDisabled()) {
152
238
  return false;
153
239
  }
154
240
  // If not disabled, let's check for ellipsis if needed
155
- if (this.luTooltipWhenEllipsis) {
156
- return this.hasEllipsis();
241
+ if (this.luTooltipWhenEllipsis()) {
242
+ return this.#hasEllipsis();
157
243
  }
158
244
  // If it's not disabled and is not triggered based on ellipsis, just return true
159
245
  return true;
@@ -170,9 +256,13 @@ class LuTooltipTriggerDirective {
170
256
  this.closeTooltip();
171
257
  }
172
258
  });
173
- this.resize$.pipe(takeUntilDestroyed(this.#destroyRef), debounceTime(150)).subscribe(() => {
174
- this.setAccessibilityProperties(0);
175
- this.#cdr.markForCheck();
259
+ effect(() => {
260
+ if (!this.luTooltipDisabled() && this.#hasEllipsis()) {
261
+ this.setAccessibilityProperties(0);
262
+ }
263
+ else {
264
+ this.setAccessibilityProperties(null);
265
+ }
176
266
  });
177
267
  }
178
268
  ngOnDestroy() {
@@ -196,11 +286,11 @@ class LuTooltipTriggerDirective {
196
286
  .subscribe(({ overlayX, overlayY }) => {
197
287
  ref.instance.setPanelPosition(overlayX, overlayY);
198
288
  });
199
- if (this.luTooltip) {
289
+ if (this.luTooltip()) {
200
290
  ref.instance.content = this.luTooltip;
201
291
  }
202
292
  else if (this.luTooltipWhenEllipsis) {
203
- ref.instance.content = this.#host.nativeElement.innerText;
293
+ ref.instance.content = signal(this.#host.nativeElement.innerText);
204
294
  }
205
295
  ref.instance.id = this.ariaDescribedBy;
206
296
  // On tooltip leave => trigger close
@@ -215,67 +305,19 @@ class LuTooltipTriggerDirective {
215
305
  }
216
306
  }
217
307
  setAccessibilityProperties(tabindex) {
218
- if (this.#disabled || (this.luTooltipWhenEllipsis && !this.hasEllipsis())) {
308
+ if (tabindex === null) {
219
309
  this.#renderer.removeAttribute(this.#host.nativeElement, 'tabindex');
220
310
  return;
221
311
  }
222
312
  const tag = this.#host.nativeElement.tagName.toLowerCase();
223
313
  const nativelyFocusableTags = ['a', 'button', 'input', 'select', 'textarea'];
224
- const isNatevelyFocusableTag = nativelyFocusableTags.includes(tag);
314
+ const isNativelyFocusableTag = nativelyFocusableTags.includes(tag);
225
315
  const hasATabIndex = this.#host.nativeElement.getAttribute('tabindex') !== null;
226
- if (!isNatevelyFocusableTag && !hasATabIndex) {
316
+ if (!isNativelyFocusableTag && !hasATabIndex) {
227
317
  this.#renderer.setAttribute(this.#host.nativeElement, 'tabindex', tabindex.toString());
228
318
  }
229
319
  }
230
- /**
231
- * Hacky af but let's explain everything
232
- * This method checks for ellipsis by cloning the node and checking its width against original element.
233
- *
234
- * We used to do this using scrollWidth but the thing is, it's a rounded value. Sometimes,
235
- * you'd get true while it should be false and vice-versa, because of rounding.
236
- *
237
- * So we duplicate the properties we're interested in on the element to be tested to calculate its ideal size,
238
- * which we then compare with its current size.
239
- *
240
- * @private
241
- */
242
- hasEllipsis() {
243
- if (window.getComputedStyle(this.#host.nativeElement).textOverflow !== 'ellipsis') {
244
- return false;
245
- }
246
- const element = this.#host.nativeElement;
247
- const elementCloned = this.#renderer.createElement('div');
248
- const parentMasked = this.#renderer.createElement('div');
249
- const elementStyle = window.getComputedStyle(element);
250
- this.#renderer.addClass(parentMasked, 'u-mask');
251
- this.#renderer.setAttribute(parentMasked, 'aria-hidden', 'true');
252
- this.#renderer.setStyle(elementCloned, 'width', 'fit-content');
253
- this.#renderer.setStyle(elementCloned, 'padding', elementStyle.padding);
254
- this.#renderer.setStyle(elementCloned, 'borderWidth', elementStyle.borderWidth);
255
- this.#renderer.setStyle(elementCloned, 'borderStyle', elementStyle.borderStyle);
256
- this.#renderer.setStyle(elementCloned, 'boxSizing', elementStyle.boxSizing);
257
- this.#renderer.setStyle(elementCloned, 'fontFamily', elementStyle.fontFamily);
258
- this.#renderer.setStyle(elementCloned, 'fontWeight', elementStyle.fontWeight);
259
- this.#renderer.setStyle(elementCloned, 'fontStyle', elementStyle.fontStyle);
260
- this.#renderer.setStyle(elementCloned, 'whiteSpace', 'nowrap');
261
- this.#renderer.setStyle(elementCloned, 'fontSize', (Number(elementStyle.fontSize.replace('px', '')) / Number(window.getComputedStyle(document.body).fontSize.replace('px', ''))).toString() + 'rem');
262
- elementCloned.innerHTML = element.innerHTML;
263
- this.#renderer.appendChild(parentMasked, elementCloned);
264
- this.#renderer.appendChild(document.body, parentMasked);
265
- try {
266
- const elementClonedWidth = elementCloned.getBoundingClientRect().width;
267
- const elementWidth = element.getBoundingClientRect().width;
268
- return elementClonedWidth > elementWidth;
269
- }
270
- catch (e) {
271
- return false;
272
- }
273
- finally {
274
- parentMasked.remove();
275
- }
276
- }
277
320
  ngAfterContentInit() {
278
- this.setAccessibilityProperties(0);
279
321
  this._id = this.#host.nativeElement.id || this.#generatedId;
280
322
  }
281
323
  /**********************
@@ -370,7 +412,7 @@ class LuTooltipTriggerDirective {
370
412
  return x;
371
413
  }
372
414
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: LuTooltipTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
373
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.1", type: LuTooltipTriggerDirective, isStandalone: true, selector: "[luTooltip]", inputs: { luTooltip: "luTooltip", luTooltipEnterDelay: ["luTooltipEnterDelay", "luTooltipEnterDelay", numberAttribute], luTooltipLeaveDelay: ["luTooltipLeaveDelay", "luTooltipLeaveDelay", numberAttribute], luTooltipDisabled: ["luTooltipDisabled", "luTooltipDisabled", booleanAttribute], luTooltipOnlyForDisplay: ["luTooltipOnlyForDisplay", "luTooltipOnlyForDisplay", booleanAttribute], luTooltipPosition: "luTooltipPosition", luTooltipWhenEllipsis: ["luTooltipWhenEllipsis", "luTooltipWhenEllipsis", booleanAttribute] }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focus": "onFocus()", "blur": "onBlur()" }, properties: { "attr.id": "this._id", "attr.aria-describedby": "this.ariaDescribedBy" } }, exportAs: ["luTooltip"], ngImport: i0 }); }
415
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.0.1", type: LuTooltipTriggerDirective, isStandalone: true, selector: "[luTooltip]", inputs: { luTooltip: { classPropertyName: "luTooltip", publicName: "luTooltip", isSignal: true, isRequired: false, transformFunction: null }, luTooltipEnterDelay: { classPropertyName: "luTooltipEnterDelay", publicName: "luTooltipEnterDelay", isSignal: false, isRequired: false, transformFunction: numberAttribute }, luTooltipLeaveDelay: { classPropertyName: "luTooltipLeaveDelay", publicName: "luTooltipLeaveDelay", isSignal: false, isRequired: false, transformFunction: numberAttribute }, luTooltipDisabled: { classPropertyName: "luTooltipDisabled", publicName: "luTooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, luTooltipOnlyForDisplay: { classPropertyName: "luTooltipOnlyForDisplay", publicName: "luTooltipOnlyForDisplay", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, luTooltipPosition: { classPropertyName: "luTooltipPosition", publicName: "luTooltipPosition", isSignal: false, isRequired: false, transformFunction: null }, luTooltipWhenEllipsis: { classPropertyName: "luTooltipWhenEllipsis", publicName: "luTooltipWhenEllipsis", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focus": "onFocus()", "blur": "onBlur()" }, properties: { "attr.id": "this._id", "attr.aria-describedby": "this.ariaDescribedBy" } }, exportAs: ["luTooltip"], ngImport: i0 }); }
374
416
  }
375
417
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: LuTooltipTriggerDirective, decorators: [{
376
418
  type: Directive,
@@ -379,25 +421,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
379
421
  exportAs: 'luTooltip',
380
422
  standalone: true,
381
423
  }]
382
- }], ctorParameters: () => [], propDecorators: { luTooltip: [{
383
- type: Input
384
- }], luTooltipEnterDelay: [{
424
+ }], ctorParameters: () => [], propDecorators: { luTooltipEnterDelay: [{
385
425
  type: Input,
386
426
  args: [{ transform: numberAttribute }]
387
427
  }], luTooltipLeaveDelay: [{
388
428
  type: Input,
389
429
  args: [{ transform: numberAttribute }]
390
- }], luTooltipDisabled: [{
391
- type: Input,
392
- args: [{ transform: booleanAttribute }]
393
430
  }], luTooltipOnlyForDisplay: [{
394
431
  type: Input,
395
432
  args: [{ transform: booleanAttribute }]
396
433
  }], luTooltipPosition: [{
397
434
  type: Input
398
- }], luTooltipWhenEllipsis: [{
399
- type: Input,
400
- args: [{ transform: booleanAttribute }]
401
435
  }], onMouseEnter: [{
402
436
  type: HostListener,
403
437
  args: ['mouseenter']