@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.
- package/core/type/style.d.ts +1 -1
- package/core-select/input/select-input.component.d.ts +1 -1
- package/core-select/user/users.directive.d.ts +2 -1
- package/esm2022/callout/callout-disclosure/callout-disclosure.component.mjs +3 -3
- package/esm2022/comment/comment/comment.component.mjs +3 -3
- package/esm2022/core/portal/portal.directive.mjs +8 -3
- package/esm2022/core/type/style.mjs +1 -1
- package/esm2022/core-select/input/select-input.component.mjs +8 -6
- package/esm2022/core-select/user/user-option.component.mjs +3 -3
- package/esm2022/core-select/user/users.directive.mjs +19 -23
- package/esm2022/date2/date-input/date-input.component.mjs +24 -5
- package/esm2022/department/select/feeder/department-feeder.component.mjs +2 -2
- package/esm2022/department/select/input/department-select-input.component.mjs +2 -1
- package/esm2022/department/service/department-v4.service.mjs +2 -2
- package/esm2022/dialog/dialog/dialog.component.mjs +2 -2
- package/esm2022/dialog/dialog-header/dialog-header.component.mjs +3 -3
- package/esm2022/form-field/form-field.component.mjs +10 -9
- package/esm2022/forms/checkbox-input/checkbox-input.component.mjs +3 -3
- package/esm2022/forms/form-field-id.directive.mjs +4 -4
- package/esm2022/multi-select/displayer/displayer-input.directive.mjs +5 -5
- package/esm2022/multi-select/input/select-all/with-select-all.directive.mjs +15 -18
- package/esm2022/multi-select/input/select-input.component.mjs +8 -4
- package/esm2022/multi-select/public-api.mjs +2 -1
- package/esm2022/multi-select/select.model.mjs +2 -2
- package/esm2022/multi-select/select.utils.mjs +32 -0
- package/esm2022/skeleton/skeleton-field/skeleton-field.component.mjs +2 -2
- package/esm2022/tooltip/panel/tooltip-panel.component.mjs +3 -3
- package/esm2022/tooltip/trigger/ellipsis.ruler.mjs +81 -0
- package/esm2022/tooltip/trigger/tooltip-trigger.directive.mjs +42 -85
- package/esm2022/user/tile/user-tile.component.mjs +2 -2
- package/fesm2022/lucca-front-ng-callout.mjs +2 -2
- package/fesm2022/lucca-front-ng-callout.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-comment.mjs +2 -2
- package/fesm2022/lucca-front-ng-comment.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-core-select-user.mjs +24 -28
- package/fesm2022/lucca-front-ng-core-select-user.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-core-select.mjs +5 -3
- package/fesm2022/lucca-front-ng-core-select.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-core.mjs +7 -2
- package/fesm2022/lucca-front-ng-core.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-date2.mjs +23 -4
- package/fesm2022/lucca-front-ng-date2.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-department.mjs +3 -2
- package/fesm2022/lucca-front-ng-department.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-dialog.mjs +4 -4
- package/fesm2022/lucca-front-ng-dialog.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-form-field.mjs +9 -8
- package/fesm2022/lucca-front-ng-form-field.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-forms.mjs +5 -5
- package/fesm2022/lucca-front-ng-forms.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-multi-select.mjs +59 -26
- package/fesm2022/lucca-front-ng-multi-select.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-skeleton.mjs +2 -2
- package/fesm2022/lucca-front-ng-skeleton.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-tooltip.mjs +121 -87
- package/fesm2022/lucca-front-ng-tooltip.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-user.mjs +2 -2
- package/fesm2022/lucca-front-ng-user.mjs.map +1 -1
- package/form-field/form-field.component.d.ts +1 -1
- package/multi-select/displayer/displayer-input.directive.d.ts +2 -2
- package/multi-select/input/select-input.component.d.ts +3 -1
- package/multi-select/public-api.d.ts +2 -0
- package/multi-select/select.utils.d.ts +14 -0
- package/package.json +15 -15
- package/tooltip/panel/tooltip-panel.component.d.ts +2 -2
- package/tooltip/trigger/ellipsis.ruler.d.ts +27 -0
- 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":";;;MASa,uBAAuB,CAAA;AAPpC,IAAA,WAAA,GAAA;QASC,IAAI,CAAA,IAAA,GAAG,KAAK,CAAC;AACb,KAAA;8GAHY,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAAvB,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EACf,gBAAgB,CAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECVrC,kMAKA,EAAA,MAAA,EAAA,CAAA,+8kBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FDIa,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAPnC,SAAS;AACC,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,oBAAoB,EAClB,UAAA,EAAA,IAAI,EAGC,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,kMAAA,EAAA,MAAA,EAAA,CAAA,+8kBAAA,CAAA,EAAA,CAAA;8BAI/C,IAAI,EAAA,CAAA;sBADH,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAA;;;MED1B,uBAAuB,CAAA;AAPpC,IAAA,WAAA,GAAA;QASC,IAAI,CAAA,IAAA,GAAG,KAAK,CAAC;AACb,KAAA;8GAHY,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAAvB,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EACf,gBAAgB,CAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECVrC,6rBAcA,EAAA,MAAA,EAAA,CAAA,khOAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FDLa,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAPnC,SAAS;AACC,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,oBAAoB,EAClB,UAAA,EAAA,IAAI,EAGC,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,6rBAAA,EAAA,MAAA,EAAA,CAAA,khOAAA,CAAA,EAAA,CAAA;8BAI/C,IAAI,EAAA,CAAA;sBADH,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAA;;;MED1B,sBAAsB,CAAA;AAPnC,IAAA,WAAA,GAAA;QASC,IAAI,CAAA,IAAA,GAAG,KAAK,CAAC;AACb,KAAA;8GAHY,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAAtB,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EACd,gBAAgB,CAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECVrC,ibAUA,EAAA,MAAA,EAAA,CAAA,
|
|
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":";;;MASa,uBAAuB,CAAA;AAPpC,IAAA,WAAA,GAAA;QASC,IAAI,CAAA,IAAA,GAAG,KAAK,CAAC;AACb,KAAA;8GAHY,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAAvB,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EACf,gBAAgB,CAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECVrC,kMAKA,EAAA,MAAA,EAAA,CAAA,+8kBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FDIa,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAPnC,SAAS;AACC,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,oBAAoB,EAClB,UAAA,EAAA,IAAI,EAGC,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,kMAAA,EAAA,MAAA,EAAA,CAAA,+8kBAAA,CAAA,EAAA,CAAA;8BAI/C,IAAI,EAAA,CAAA;sBADH,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAA;;;MED1B,uBAAuB,CAAA;AAPpC,IAAA,WAAA,GAAA;QASC,IAAI,CAAA,IAAA,GAAG,KAAK,CAAC;AACb,KAAA;8GAHY,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAAvB,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EACf,gBAAgB,CAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECVrC,6rBAcA,EAAA,MAAA,EAAA,CAAA,khOAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FDLa,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAPnC,SAAS;AACC,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,oBAAoB,EAClB,UAAA,EAAA,IAAI,EAGC,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,6rBAAA,EAAA,MAAA,EAAA,CAAA,khOAAA,CAAA,EAAA,CAAA;8BAI/C,IAAI,EAAA,CAAA;sBADH,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAA;;;MED1B,sBAAsB,CAAA;AAPnC,IAAA,WAAA,GAAA;QASC,IAAI,CAAA,IAAA,GAAG,KAAK,CAAC;AACb,KAAA;8GAHY,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAAtB,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EACd,gBAAgB,CAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECVrC,ibAUA,EAAA,MAAA,EAAA,CAAA,+9XAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FDDa,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAPlC,SAAS;AACC,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,EACjB,UAAA,EAAA,IAAI,EAGC,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,ibAAA,EAAA,MAAA,EAAA,CAAA,+9XAAA,CAAA,EAAA,CAAA;8BAI/C,IAAI,EAAA,CAAA;sBADH,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAA;;;AEVvC;;AAEG;;;;"}
|
|
@@ -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,
|
|
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
|
|
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
|
-
#
|
|
95
|
-
|
|
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
|
|
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
|
|
201
|
+
this.luTooltip = input();
|
|
128
202
|
this.#openDelay$ = new BehaviorSubject(300);
|
|
129
203
|
this.#closeDelay$ = new BehaviorSubject(100);
|
|
130
|
-
this
|
|
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
|
|
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
|
|
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
|
-
|
|
174
|
-
this.
|
|
175
|
-
|
|
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 (
|
|
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
|
|
314
|
+
const isNativelyFocusableTag = nativelyFocusableTags.includes(tag);
|
|
225
315
|
const hasATabIndex = this.#host.nativeElement.getAttribute('tabindex') !== null;
|
|
226
|
-
if (!
|
|
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: "
|
|
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: {
|
|
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']
|