@lucca-front/ng 21.0.0-rc.3 → 21.0.0-rc.4
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/app-layout/index.d.ts +1 -1
- package/box/index.d.ts +3 -3
- package/breadcrumbs/index.d.ts +3 -3
- package/button/index.d.ts +21 -26
- package/callout/index.d.ts +58 -73
- package/chip/index.d.ts +1 -1
- package/code/index.d.ts +1 -1
- package/comment/index.d.ts +14 -11
- package/core/index.d.ts +5 -5
- package/core-select/index.d.ts +4 -6
- package/core-select/user/index.d.ts +2 -3
- package/data-table/index.d.ts +2 -1
- package/dialog/index.d.ts +3 -3
- package/empty-state/index.d.ts +26 -23
- package/fancy-box/index.d.ts +10 -11
- package/fesm2022/lucca-front-ng-app-layout.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-box.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-breadcrumbs.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-button.mjs +90 -59
- package/fesm2022/lucca-front-ng-button.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-callout.mjs +131 -165
- package/fesm2022/lucca-front-ng-callout.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-chip.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-code.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-comment.mjs +35 -15
- package/fesm2022/lucca-front-ng-comment.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-core-select-api.mjs +3 -3
- package/fesm2022/lucca-front-ng-core-select-api.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-core-select-user.mjs +11 -14
- package/fesm2022/lucca-front-ng-core-select-user.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-core-select.mjs +20 -14
- package/fesm2022/lucca-front-ng-core-select.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-core.mjs +3 -3
- package/fesm2022/lucca-front-ng-core.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-data-table.mjs +5 -3
- package/fesm2022/lucca-front-ng-data-table.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-dialog.mjs +25 -22
- package/fesm2022/lucca-front-ng-dialog.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-empty-state.mjs +68 -27
- package/fesm2022/lucca-front-ng-empty-state.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-fancy-box.mjs +28 -14
- package/fesm2022/lucca-front-ng-fancy-box.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-file-upload.mjs +1 -1
- package/fesm2022/lucca-front-ng-file-upload.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-forms-phone-number-input.mjs +17 -15
- package/fesm2022/lucca-front-ng-forms-phone-number-input.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-forms-rich-text-input.mjs +2 -2
- package/fesm2022/lucca-front-ng-forms-rich-text-input.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-forms.mjs +184 -96
- package/fesm2022/lucca-front-ng-forms.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-icon.mjs +19 -14
- package/fesm2022/lucca-front-ng-icon.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-inline-message.mjs +22 -15
- package/fesm2022/lucca-front-ng-inline-message.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-link.mjs +28 -20
- package/fesm2022/lucca-front-ng-link.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-mobile-push.mjs +8 -4
- package/fesm2022/lucca-front-ng-mobile-push.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-modal.mjs +1 -1
- package/fesm2022/lucca-front-ng-modal.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-multi-select.mjs +1 -1
- package/fesm2022/lucca-front-ng-multi-select.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-new-badge.mjs +11 -7
- package/fesm2022/lucca-front-ng-new-badge.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-numeric-badge.mjs +39 -40
- package/fesm2022/lucca-front-ng-numeric-badge.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-page-header.mjs +2 -2
- package/fesm2022/lucca-front-ng-page-header.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-plg-push.mjs +17 -8
- package/fesm2022/lucca-front-ng-plg-push.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-scroll.mjs +29 -19
- package/fesm2022/lucca-front-ng-scroll.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-simple-select.mjs +1 -1
- package/fesm2022/lucca-front-ng-simple-select.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-skeleton.mjs +44 -34
- package/fesm2022/lucca-front-ng-skeleton.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-tag.mjs +42 -31
- package/fesm2022/lucca-front-ng-tag.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-time.mjs +18 -8
- package/fesm2022/lucca-front-ng-time.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-toast.mjs +60 -55
- package/fesm2022/lucca-front-ng-toast.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-tooltip.mjs +107 -80
- package/fesm2022/lucca-front-ng-tooltip.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-user.mjs +84 -44
- package/fesm2022/lucca-front-ng-user.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-vertical-navigation.mjs +6 -6
- package/fesm2022/lucca-front-ng-vertical-navigation.mjs.map +1 -1
- package/forms/index.d.ts +61 -53
- package/forms/phone-number-input/index.d.ts +13 -13
- package/icon/index.d.ts +10 -10
- package/inline-message/index.d.ts +11 -9
- package/link/index.d.ts +13 -11
- package/mobile-push/index.d.ts +6 -5
- package/new-badge/index.d.ts +3 -2
- package/numeric-badge/index.d.ts +11 -14
- package/package.json +31 -31
- package/plg-push/index.d.ts +8 -6
- package/scroll/index.d.ts +22 -20
- package/skeleton/index.d.ts +32 -27
- package/tag/index.d.ts +15 -17
- package/time/index.d.ts +5 -5
- package/toast/index.d.ts +25 -23
- package/tooltip/index.d.ts +41 -33
- package/user/index.d.ts +28 -17
- package/vertical-navigation/index.d.ts +16 -16
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lucca-front-ng-new-badge.mjs","sources":["../../../packages/ng/new-badge/new-badge.component.ts","../../../packages/ng/new-badge/new-badge.component.html","../../../packages/ng/new-badge/lucca-front-ng-new-badge.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component,
|
|
1
|
+
{"version":3,"file":"lucca-front-ng-new-badge.mjs","sources":["../../../packages/ng/new-badge/new-badge.component.ts","../../../packages/ng/new-badge/new-badge.component.html","../../../packages/ng/new-badge/lucca-front-ng-new-badge.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';\n\n@Component({\n\tselector: 'lu-new-badge',\n\ttemplateUrl: './new-badge.component.html',\n\tstyleUrl: './new-badge.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\tencapsulation: ViewEncapsulation.None,\n})\nexport class NewBadgeComponent {\n\t@Input({ required: true })\n\tlabel: string;\n\n\t@HostBinding('class.newBadge')\n\tnewBadge = true;\n}\n","{{ label }}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MASa,iBAAiB,CAAA;AAP9B,IAAA,WAAA,GAAA;QAYC,IAAQ,CAAA,QAAA,GAAG,IAAI;AACf;8GANY,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,iKCT9B,eACA,EAAA,MAAA,EAAA,CAAA,0oBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FDQa,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAP7B,SAAS;AACC,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,mBAGP,uBAAuB,CAAC,MAAM,EAChC,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,0oBAAA,CAAA,EAAA;8BAIrC,KAAK,EAAA,CAAA;sBADJ,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;gBAIzB,QAAQ,EAAA,CAAA;sBADP,WAAW;uBAAC,gBAAgB;;;AEb9B;;AAEG;;;;"}
|
|
@@ -1,55 +1,33 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, input, booleanAttribute,
|
|
3
|
-
import { LuClass
|
|
2
|
+
import { inject, input, booleanAttribute, Input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { LuClass } from '@lucca-front/ng/core';
|
|
4
4
|
import * as i1 from '@lucca-front/ng/tooltip';
|
|
5
5
|
import { LuTooltipModule } from '@lucca-front/ng/tooltip';
|
|
6
6
|
|
|
7
7
|
class NumericBadgeComponent {
|
|
8
|
-
#luClass;
|
|
9
8
|
constructor() {
|
|
10
9
|
this.#luClass = inject(LuClass);
|
|
11
|
-
/**
|
|
12
|
-
* The value to display, number or string contains number only.
|
|
13
|
-
*/
|
|
14
|
-
this.value = input.required();
|
|
15
|
-
/**
|
|
16
|
-
* The size of the badge
|
|
17
|
-
*/
|
|
18
|
-
this.size = input();
|
|
19
|
-
/**
|
|
20
|
-
* The palette to use for this badge. Defaults to 'none' (inherits parent palette)
|
|
21
|
-
*/
|
|
22
|
-
this.palette = input('none');
|
|
23
10
|
this.loading = input(false, { transform: booleanAttribute });
|
|
24
|
-
this.maxValue =
|
|
11
|
+
this.maxValue = 999;
|
|
25
12
|
this.disableTooltip = input(false, { transform: booleanAttribute });
|
|
26
|
-
this.
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
});
|
|
31
|
-
this.displayValue = computed(() => {
|
|
32
|
-
const value = this.value();
|
|
33
|
-
const maxValue = this.maxValue();
|
|
34
|
-
if (typeof value === 'number') {
|
|
35
|
-
return +value > maxValue ? `${maxValue}+` : value;
|
|
13
|
+
this.palette = 'none';
|
|
14
|
+
this.displayValue = () => {
|
|
15
|
+
if (typeof this.value === 'number') {
|
|
16
|
+
return +this.value > this.maxValue ? `${this.maxValue}+` : this.value;
|
|
36
17
|
}
|
|
37
18
|
else {
|
|
38
|
-
return value;
|
|
39
|
-
}
|
|
40
|
-
});
|
|
41
|
-
this.isDisabled = computed(() => {
|
|
42
|
-
const value = this.value();
|
|
43
|
-
return this.disableTooltip() || typeof value !== 'number' || this.loading() || this.maxValue() >= +value;
|
|
44
|
-
});
|
|
45
|
-
_effectWithDeps([this.numericBadgeClasses], (numericBadgeClasses) => {
|
|
46
|
-
if (numericBadgeClasses) {
|
|
47
|
-
this.#luClass.setState(numericBadgeClasses);
|
|
19
|
+
return this.value;
|
|
48
20
|
}
|
|
49
|
-
}
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
#luClass;
|
|
24
|
+
ngOnChanges(changes) {
|
|
25
|
+
if (changes['palette']?.currentValue || changes['size']?.currentValue) {
|
|
26
|
+
this.#luClass.setState({ [`palette-${this.palette}`]: !!this.palette, [`mod-${this.size}`]: !!this.size });
|
|
27
|
+
}
|
|
50
28
|
}
|
|
51
29
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NumericBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
52
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.2", type: NumericBadgeComponent, isStandalone: true, selector: "lu-numeric-badge", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal:
|
|
30
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.2", type: NumericBadgeComponent, isStandalone: true, selector: "lu-numeric-badge", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: false, isRequired: false, transformFunction: null }, disableTooltip: { classPropertyName: "disableTooltip", publicName: "disableTooltip", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "class.is-loading": "loading()", "attr.aria-hidden": "loading()" }, classAttribute: "numericBadge" }, providers: [LuClass], usesOnChanges: true, ngImport: i0, template: "<span\n\tclass=\"numericBadge-value\"\n\t[luTooltip]=\"value\"\n\t[luTooltipDisabled]=\"disableTooltip() || typeof this.value !== 'number' || loading || maxValue >= +value\"\n\t>{{ this.displayValue() }}</span\n>\n", styles: ["@charset \"UTF-8\";@layer components{.numericBadge{--components-numericBadge-background: var(--palettes-200, var(--palettes-neutral-200));--components-numericBadge-color: var(--palettes-800, var(--palettes-neutral-700));--components-numericBadge-loadingColor: var(--palettes-500, var(--palettes-neutral-500));--components-numericBadge-size: 1.5rem;--components-numericBadge-font: var(--pr-t-font-body-S);--components-numericBadge-borderRadius: var(--pr-t-border-radius-default);--components-numericBadge-fontSize: var(--pr-t-font-body-S-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-S-lineHeight);display:inline-flex;align-items:center;justify-content:center;block-size:var(--components-numericBadge-size);min-inline-size:var(--components-numericBadge-size);padding:var(--pr-t-spacings-50);font:var(--components-numericBadge-font);font-size:var(--components-numericBadge-fontSize);line-height:var(--components-numericBadge-lineHeight);font-weight:var(--pr-t-font-fontWeight-semibold);background-color:var(--components-numericBadge-background);color:var(--components-numericBadge-color);border-radius:var(--components-numericBadge-borderRadius);transition-timing-function:ease;white-space:nowrap;position:relative;transition-duration:var(--commons-animations-durations-fast);transition-property:color}.numericBadge:empty:before{content:\"\\a0\"/\"\"}.numericBadge-value{outline:none}}@layer mods{.numericBadge.mod-S{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.numericBadge.mod-XS{--components-numericBadge-size: 1rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.numericBadge.is-loading{--commons-loading-frontground: var(--components-numericBadge-loadingColor);--commons-loading-borderWidth: 2px;--components-numericBadge-color: transparent}.numericBadge.is-loading:after{content:\"\";inline-size:calc(var(--components-numericBadge-size) - var(--pr-t-spacings-100));block-size:calc(var(--components-numericBadge-size) - var(--pr-t-spacings-100));border-radius:var(--pr-t-border-radius-full);line-height:.8rem;border-width:var(--commons-loading-borderWidth);inset:0;margin:auto;position:absolute;border-style:solid;animation-name:rotate;animation-duration:var(--commons-loading-speed);animation-timing-function:linear;animation-iteration-count:infinite;border-color:var(--commons-loading-frontground);border-block-start-color:transparent}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.numericBadge.is-loading.mod-S{--commons-loading-borderWidth: 1.5px}.numericBadge.is-loading.mod-XS{--commons-loading-borderWidth: 1px}.numericBadge:focus-within{outline:2px solid var(--palettes-product-700);outline-offset:2px}}@layer base{lu-numeric-badge{display:inline-flex}}\n"], dependencies: [{ kind: "ngmodule", type: LuTooltipModule }, { kind: "directive", type: i1.LuTooltipTriggerDirective, selector: "[luTooltip]", inputs: ["luTooltip", "luTooltipEnterDelay", "luTooltipLeaveDelay", "luTooltipDisabled", "luTooltipOnlyForDisplay", "luTooltipPosition", "luTooltipWhenEllipsis", "luTooltipAnchor"], exportAs: ["luTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
53
31
|
}
|
|
54
32
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NumericBadgeComponent, decorators: [{
|
|
55
33
|
type: Component,
|
|
@@ -57,8 +35,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
|
|
|
57
35
|
class: 'numericBadge',
|
|
58
36
|
'[class.is-loading]': 'loading()',
|
|
59
37
|
'[attr.aria-hidden]': 'loading()',
|
|
60
|
-
}, encapsulation: ViewEncapsulation.None, template: "<span
|
|
61
|
-
}],
|
|
38
|
+
}, encapsulation: ViewEncapsulation.None, template: "<span\n\tclass=\"numericBadge-value\"\n\t[luTooltip]=\"value\"\n\t[luTooltipDisabled]=\"disableTooltip() || typeof this.value !== 'number' || loading || maxValue >= +value\"\n\t>{{ this.displayValue() }}</span\n>\n", styles: ["@charset \"UTF-8\";@layer components{.numericBadge{--components-numericBadge-background: var(--palettes-200, var(--palettes-neutral-200));--components-numericBadge-color: var(--palettes-800, var(--palettes-neutral-700));--components-numericBadge-loadingColor: var(--palettes-500, var(--palettes-neutral-500));--components-numericBadge-size: 1.5rem;--components-numericBadge-font: var(--pr-t-font-body-S);--components-numericBadge-borderRadius: var(--pr-t-border-radius-default);--components-numericBadge-fontSize: var(--pr-t-font-body-S-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-S-lineHeight);display:inline-flex;align-items:center;justify-content:center;block-size:var(--components-numericBadge-size);min-inline-size:var(--components-numericBadge-size);padding:var(--pr-t-spacings-50);font:var(--components-numericBadge-font);font-size:var(--components-numericBadge-fontSize);line-height:var(--components-numericBadge-lineHeight);font-weight:var(--pr-t-font-fontWeight-semibold);background-color:var(--components-numericBadge-background);color:var(--components-numericBadge-color);border-radius:var(--components-numericBadge-borderRadius);transition-timing-function:ease;white-space:nowrap;position:relative;transition-duration:var(--commons-animations-durations-fast);transition-property:color}.numericBadge:empty:before{content:\"\\a0\"/\"\"}.numericBadge-value{outline:none}}@layer mods{.numericBadge.mod-S{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.numericBadge.mod-XS{--components-numericBadge-size: 1rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.numericBadge.is-loading{--commons-loading-frontground: var(--components-numericBadge-loadingColor);--commons-loading-borderWidth: 2px;--components-numericBadge-color: transparent}.numericBadge.is-loading:after{content:\"\";inline-size:calc(var(--components-numericBadge-size) - var(--pr-t-spacings-100));block-size:calc(var(--components-numericBadge-size) - var(--pr-t-spacings-100));border-radius:var(--pr-t-border-radius-full);line-height:.8rem;border-width:var(--commons-loading-borderWidth);inset:0;margin:auto;position:absolute;border-style:solid;animation-name:rotate;animation-duration:var(--commons-loading-speed);animation-timing-function:linear;animation-iteration-count:infinite;border-color:var(--commons-loading-frontground);border-block-start-color:transparent}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.numericBadge.is-loading.mod-S{--commons-loading-borderWidth: 1.5px}.numericBadge.is-loading.mod-XS{--commons-loading-borderWidth: 1px}.numericBadge:focus-within{outline:2px solid var(--palettes-product-700);outline-offset:2px}}@layer base{lu-numeric-badge{display:inline-flex}}\n"] }]
|
|
39
|
+
}], propDecorators: {
|
|
40
|
+
/**
|
|
41
|
+
* The value to display, number or string contains number only.
|
|
42
|
+
*/
|
|
43
|
+
value: [{
|
|
44
|
+
type: Input,
|
|
45
|
+
args: [{ required: true }]
|
|
46
|
+
}],
|
|
47
|
+
/**
|
|
48
|
+
* The size of the badge
|
|
49
|
+
*/
|
|
50
|
+
size: [{
|
|
51
|
+
type: Input
|
|
52
|
+
}], maxValue: [{
|
|
53
|
+
type: Input
|
|
54
|
+
}],
|
|
55
|
+
/**
|
|
56
|
+
* The palette to use for this badge. Defaults to 'none' (inherits parent palette)
|
|
57
|
+
*/
|
|
58
|
+
palette: [{
|
|
59
|
+
type: Input
|
|
60
|
+
}] } });
|
|
62
61
|
|
|
63
62
|
/**
|
|
64
63
|
* Generated bundle index. Do not edit.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lucca-front-ng-numeric-badge.mjs","sources":["../../../packages/ng/numeric-badge/numeric-badge.component.ts","../../../packages/ng/numeric-badge/numeric-badge.component.html","../../../packages/ng/numeric-badge/lucca-front-ng-numeric-badge.ts"],"sourcesContent":["import { booleanAttribute, ChangeDetectionStrategy, Component,
|
|
1
|
+
{"version":3,"file":"lucca-front-ng-numeric-badge.mjs","sources":["../../../packages/ng/numeric-badge/numeric-badge.component.ts","../../../packages/ng/numeric-badge/numeric-badge.component.html","../../../packages/ng/numeric-badge/lucca-front-ng-numeric-badge.ts"],"sourcesContent":["import { booleanAttribute, ChangeDetectionStrategy, Component, inject, input, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';\nimport { LuClass, Palette } from '@lucca-front/ng/core';\nimport { LuTooltipModule } from '@lucca-front/ng/tooltip';\n\n@Component({\n\tselector: 'lu-numeric-badge',\n\ttemplateUrl: './numeric-badge.component.html',\n\tstyleUrl: './numeric-badge.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\timports: [LuTooltipModule],\n\tproviders: [LuClass],\n\thost: {\n\t\tclass: 'numericBadge',\n\t\t'[class.is-loading]': 'loading()',\n\t\t'[attr.aria-hidden]': 'loading()',\n\t},\n\tencapsulation: ViewEncapsulation.None,\n})\nexport class NumericBadgeComponent implements OnChanges {\n\t#luClass = inject(LuClass);\n\n\t@Input({ required: true })\n\t/**\n\t * The value to display, number or string contains number only.\n\t */\n\tvalue!: number | string;\n\n\t@Input()\n\t/**\n\t * The size of the badge\n\t */\n\tsize: 'XS' | 'S' | 'M';\n\n\tloading = input(false, { transform: booleanAttribute });\n\n\t@Input()\n\tmaxValue: number = 999;\n\n\tdisableTooltip = input(false, { transform: booleanAttribute });\n\n\t@Input()\n\t/**\n\t * The palette to use for this badge. Defaults to 'none' (inherits parent palette)\n\t */\n\tpalette: Palette = 'none';\n\n\tngOnChanges(changes: SimpleChanges): void {\n\t\tif (changes['palette']?.currentValue || changes['size']?.currentValue) {\n\t\t\tthis.#luClass.setState({ [`palette-${this.palette}`]: !!this.palette, [`mod-${this.size}`]: !!this.size });\n\t\t}\n\t}\n\n\tdisplayValue = () => {\n\t\tif (typeof this.value === 'number') {\n\t\t\treturn +this.value > this.maxValue ? `${this.maxValue}+` : this.value;\n\t\t} else {\n\t\t\treturn this.value;\n\t\t}\n\t};\n}\n","<span\n\tclass=\"numericBadge-value\"\n\t[luTooltip]=\"value\"\n\t[luTooltipDisabled]=\"disableTooltip() || typeof this.value !== 'number' || loading || maxValue >= +value\"\n\t>{{ this.displayValue() }}</span\n>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;MAkBa,qBAAqB,CAAA;AAdlC,IAAA,WAAA,GAAA;AAeC,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,OAAO,CAAC;QAc1B,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;QAGvD,IAAQ,CAAA,QAAA,GAAW,GAAG;QAEtB,IAAc,CAAA,cAAA,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;QAM9D,IAAO,CAAA,OAAA,GAAY,MAAM;QAQzB,IAAY,CAAA,YAAA,GAAG,MAAK;AACnB,YAAA,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;gBACnC,OAAO,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAG,CAAA,CAAA,GAAG,IAAI,CAAC,KAAK;;iBAC/D;gBACN,OAAO,IAAI,CAAC,KAAK;;AAEnB,SAAC;AACD;AAxCA,IAAA,QAAQ;AA2BR,IAAA,WAAW,CAAC,OAAsB,EAAA;AACjC,QAAA,IAAI,OAAO,CAAC,SAAS,CAAC,EAAE,YAAY,IAAI,OAAO,CAAC,MAAM,CAAC,EAAE,YAAY,EAAE;AACtE,YAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAW,QAAA,EAAA,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAA,IAAA,EAAO,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;;;8GA9BhG,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,u8BARtB,CAAC,OAAO,CAAC,ECVrB,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,wNAMA,isGDGW,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,yBAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,mBAAA,EAAA,yBAAA,EAAA,mBAAA,EAAA,uBAAA,EAAA,iBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FASb,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAdjC,SAAS;AACC,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,EAGX,eAAA,EAAA,uBAAuB,CAAC,MAAM,EACtC,OAAA,EAAA,CAAC,eAAe,CAAC,EACf,SAAA,EAAA,CAAC,OAAO,CAAC,EACd,IAAA,EAAA;AACL,wBAAA,KAAK,EAAE,cAAc;AACrB,wBAAA,oBAAoB,EAAE,WAAW;AACjC,wBAAA,oBAAoB,EAAE,WAAW;qBACjC,EACc,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,wNAAA,EAAA,MAAA,EAAA,CAAA,0oGAAA,CAAA,EAAA;;AAMrC;;AAEG;QACH,KAAK,EAAA,CAAA;sBAJJ,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;;AAOzB;;AAEG;QACH,IAAI,EAAA,CAAA;sBAJH;gBASD,QAAQ,EAAA,CAAA;sBADP;;AAMD;;AAEG;QACH,OAAO,EAAA,CAAA;sBAJN;;;AExCF;;AAEG;;;;"}
|
|
@@ -15,11 +15,11 @@ class PageHeaderComponent {
|
|
|
15
15
|
return typeof message === 'string';
|
|
16
16
|
}
|
|
17
17
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: PageHeaderComponent, isStandalone: true, selector: "lu-page-header", inputs: { description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<header class=\"pageHeader\">\n\t@if (container()) {\n\t\t<div class=\"pageHeader-containerOptional\">\n\t\t\t<ng-container *ngTemplateOutlet=\"content\" />\n\t\t</div>\n\t} @else {\n\t\t<ng-container *ngTemplateOutlet=\"content\" />\n\t}\n</header>\n\n<ng-template #content>\n\t<ng-content select=\"[pageHeaderBreadcrumbs]\" />\n\t<div class=\"pageHeader-content\">\n\t\t<div class=\"pageHeader-content-title\">\n\t\t\t<div class=\"pageHeader-content-title-back\">\n\t\t\t\t<ng-content select=\"[pageHeaderBackAction]\" />\n\t\t\t</div>\n\t\t\t<div class=\"pageHeader-content-title-leading\">\n\t\t\t\t<ng-content select=\"[pageHeaderLeading]\" />\n\t\t\t</div>\n\t\t\t@if (labelIsString()) {\n\t\t\t\t<h1 class=\"pageHeader-content-title-content\"><ng-container *luPortal=\"label()\" /></h1>\n\t\t\t} @else {\n\t\t\t\t<ng-container *luPortal=\"label()\" />\n\t\t\t}\n\t\t\t<div class=\"pageHeader-content-title-trailing\">\n\t\t\t\t<ng-content select=\"[pageHeaderTrailing]\" />\n\t\t\t</div>\n\t\t\t<div class=\"pageHeader-content-title-actions\">\n\t\t\t\t<ng-content select=\"[pageHeaderTitleActions]\" />\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"pageHeader-content-actions\">\n\t\t\t<ng-content select=\"[pageHeaderActions]\" />\n\t\t</div>\n\t</div>\n\t@if (description()) {\n\t\t<div class=\"pageHeader-description\">\n\t\t\t@if (descriptionIsString()) {\n\t\t\t\t<p class=\"pageHeader-description-paragraph\">{{ description() }}</p>\n\t\t\t} @else {\n\t\t\t\t<ng-container *luPortal=\"description()\" />\n\t\t\t}\n\t\t</div>\n\t}\n\t<ng-content select=\"[pageHeaderNavigation]\" />\n</ng-template>\n", styles: ["@layer components{.pageHeader{--components-pageHeader-description-max-width: 50rem;--components-pageHeader-padding: var(--pr-t-spacings-300) var(--pr-t-spacings-200);padding:var(--components-pageHeader-padding)}.pageHeader-containerOptional{padding:var(--commons-container-padding);max-inline-size:var(--commons-container-maxWidth)}.pageHeader-content{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;row-gap:var(--pr-t-spacings-100)}.pageHeader-content-title{display:flex;column-gap:var(--pr-t-spacings-150);align-items:center;flex-wrap:wrap;min-block-size:var(--pr-t-spacings-500)}.pageHeader-content-actions:empty,.pageHeader-content-title-back:empty,.pageHeader-content-title-actions:empty,.pageHeader-content-title-leading:empty,.pageHeader-content-title-trailing:empty{display:none}.pageHeader-content-actions{gap:var(--pr-t-spacings-150);display:flex;align-items:center;flex-wrap:wrap;row-gap:var(--pr-t-spacings-200)}.pageHeader-content-actions .button{margin:0}@media not all and (min-width: 40em){.pageHeader-content-actions .button{flex:1}}@media not all and (min-width: 40em){.pageHeader-content-actions .textfield.mod-search,.pageHeader-content-actions .form-field:has(.icon-searchMagnifyingGlass){flex-basis:100%}}.pageHeader-description{max-inline-size:var(--components-pageHeader-description-max-width);margin-block-start:var(--pr-t-spacings-100);color:var(--palettes-neutral-700)}.pageHeader-description-paragraph{margin:0}}@layer mods{.pageHeader.mod-withHorizontalNavigation,.pageHeader:has(.horizontalNavigation),.pageHeader.mod-withMenu{padding-block-end:0}.pageHeader.mod-withHorizontalNavigation .horizontalNavigation,.pageHeader.mod-withHorizontalNavigation .menu,.pageHeader:has(.horizontalNavigation) .horizontalNavigation,.pageHeader:has(.horizontalNavigation) .menu,.pageHeader.mod-withMenu .horizontalNavigation,.pageHeader.mod-withMenu .menu{margin-block-start:var(--pr-t-spacings-50)}.pageHeader:has(.breadcrumbs),.pageHeader.mod-withBreadcrumbs{padding-block-start:var(--pr-t-spacings-200)}.pageHeader:has(.breadcrumbs) .breadcrumbs,.pageHeader.mod-withBreadcrumbs .breadcrumbs{margin-block-end:0}.pageHeader.mod-sticky{background-color:var(--pr-t-elevation-surface-default);inset-block-start:calc(var(--commons-banner-height) + var(--commons-navSide-mobile-toggle-height));position:sticky;inset-inline:0;z-index:99}@media (min-width: 50em){.pageHeader.mod-sticky{inset-block-start:var(--commons-banner-height);inset-inline-start:0!important}}@media (min-width: 50em){.pageHeader{--components-pageHeader-padding: var(--pr-t-spacings-300) var(--pr-t-spacings-400)}}.pageHeader:has(.pageHeader-containerOptional){--components-pageHeader-padding: var(--pr-t-spacings-300) 0}}@layer base{h1,h2,h3,h4,h5,h6{margin-block-start:0;color:var(--pr-t-color-text-heading);text-wrap:pretty;font:var(--components-title-font);margin-block-end:0;padding:0}h1{--components-title-font: var(--pr-t-font-heading-1);--sizes-verticalPadding: var(--sizes-XXL-verticalPadding)}h2{--components-title-font: var(--pr-t-font-heading-2);--sizes-verticalPadding: var(--sizes-XL-verticalPadding)}h3{--components-title-font: var(--pr-t-font-heading-3);--sizes-verticalPadding: var(--sizes-L-verticalPadding)}h4{--components-title-font: var(--pr-t-font-heading-4);--sizes-verticalPadding: var(--sizes-M-verticalPadding)}h5{--components-title-font: 600 var(--pr-t-font-fontSize-175)/var(--pr-t-font-lineHeight-250) var(--pr-t-font-family);--sizes-verticalPadding: var(--sizes-S-verticalPadding)}h6{--components-title-font: 600 var(--pr-t-font-fontSize-150)/var(--pr-t-font-lineHeight-200) var(--pr-t-font-family);--sizes-verticalPadding: var(--sizes-XS-verticalPadding)}}@layer mods{h1.mod-XXXL{--components-title-font: 900 2.25rem/2.5rem var(--pr-t-font-family-brand);--sizes-verticalPadding: var(--sizes-XXXL-verticalPadding)}h1.mod-elementAfterText,h2.mod-elementAfterText,h3.mod-elementAfterText,h4.mod-elementAfterText,h5.mod-elementAfterText,h6.mod-elementAfterText{display:flex;flex-wrap:wrap;column-gap:var(--pr-t-spacings-100)}}\n"], dependencies: [{ kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
18
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: PageHeaderComponent, isStandalone: true, selector: "lu-page-header", inputs: { description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<header class=\"pageHeader\">\n\t@if (container()) {\n\t\t<div class=\"pageHeader-containerOptional\">\n\t\t\t<ng-container *ngTemplateOutlet=\"content\" />\n\t\t</div>\n\t} @else {\n\t\t<ng-container *ngTemplateOutlet=\"content\" />\n\t}\n</header>\n\n<ng-template #content>\n\t<ng-content select=\"[pageHeaderBreadcrumbs]\" />\n\t<div class=\"pageHeader-content\">\n\t\t<div class=\"pageHeader-content-title\">\n\t\t\t<div class=\"pageHeader-content-title-back\">\n\t\t\t\t<ng-content select=\"[pageHeaderBackAction]\" />\n\t\t\t</div>\n\t\t\t<div class=\"pageHeader-content-title-leading\">\n\t\t\t\t<ng-content select=\"[pageHeaderLeading]\" />\n\t\t\t</div>\n\t\t\t@if (labelIsString()) {\n\t\t\t\t<h1 class=\"pageHeader-content-title-content\"><ng-container *luPortal=\"label()\" /></h1>\n\t\t\t} @else {\n\t\t\t\t<ng-container *luPortal=\"label()\" />\n\t\t\t}\n\t\t\t<div class=\"pageHeader-content-title-trailing\">\n\t\t\t\t<ng-content select=\"[pageHeaderTrailing]\" />\n\t\t\t</div>\n\t\t\t<div class=\"pageHeader-content-title-actions\">\n\t\t\t\t<ng-content select=\"[pageHeaderTitleActions]\" />\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"pageHeader-content-actions\">\n\t\t\t<ng-content select=\"[pageHeaderActions]\" />\n\t\t</div>\n\t</div>\n\t@if (description()) {\n\t\t<div class=\"pageHeader-description\">\n\t\t\t@if (descriptionIsString()) {\n\t\t\t\t<p class=\"pageHeader-description-paragraph\">{{ description() }}</p>\n\t\t\t} @else {\n\t\t\t\t<ng-container *luPortal=\"description()\" />\n\t\t\t}\n\t\t</div>\n\t}\n\t<ng-content select=\"[pageHeaderNavigation]\" />\n</ng-template>\n", styles: ["@layer components{.pageHeader{--components-pageHeader-description-max-width: 50rem;--components-pageHeader-padding: var(--pr-t-spacings-300) var(--pr-t-spacings-200);padding:var(--components-pageHeader-padding)}.pageHeader-containerOptional{padding:var(--commons-container-padding);max-inline-size:var(--commons-container-maxWidth)}.pageHeader-content{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;row-gap:var(--pr-t-spacings-100)}.pageHeader-content-title{display:flex;column-gap:var(--pr-t-spacings-150);align-items:center;flex-wrap:wrap;min-block-size:var(--pr-t-spacings-500)}.pageHeader-content-actions:empty,.pageHeader-content-title-back:empty,.pageHeader-content-title-actions:empty,.pageHeader-content-title-leading:empty,.pageHeader-content-title-trailing:empty{display:none}.pageHeader-content-actions{gap:var(--pr-t-spacings-150);display:flex;align-items:center;flex-wrap:wrap;row-gap:var(--pr-t-spacings-200)}.pageHeader-content-actions .button{margin:0}@media not all and (min-width: 40em){.pageHeader-content-actions .button{flex:1}}@media not all and (min-width: 40em){.pageHeader-content-actions .textfield.mod-search,.pageHeader-content-actions .form-field:has(.icon-searchMagnifyingGlass){flex-basis:100%}}.pageHeader-description{max-inline-size:var(--components-pageHeader-description-max-width);margin-block-start:var(--pr-t-spacings-100);color:var(--palettes-neutral-700)}.pageHeader-description-paragraph{margin:0}}@layer mods{.pageHeader.mod-withHorizontalNavigation,.pageHeader:has(.horizontalNavigation),.pageHeader.mod-withMenu{padding-block-end:0}.pageHeader.mod-withHorizontalNavigation .horizontalNavigation,.pageHeader.mod-withHorizontalNavigation .menu,.pageHeader:has(.horizontalNavigation) .horizontalNavigation,.pageHeader:has(.horizontalNavigation) .menu,.pageHeader.mod-withMenu .horizontalNavigation,.pageHeader.mod-withMenu .menu{margin-block-start:var(--pr-t-spacings-50)}.pageHeader:has(.breadcrumbs),.pageHeader.mod-withBreadcrumbs{padding-block-start:var(--pr-t-spacings-200)}.pageHeader:has(.breadcrumbs) .breadcrumbs,.pageHeader.mod-withBreadcrumbs .breadcrumbs{margin-block-end:0}.pageHeader.mod-sticky{background-color:var(--pr-t-elevation-surface-default);inset-block-start:calc(var(--commons-banner-height) + var(--commons-navSide-mobile-toggle-height));position:sticky;inset-inline:0;z-index:99}@media (min-width: 50em){.pageHeader.mod-sticky{inset-block-start:var(--commons-banner-height);inset-inline-start:0!important}}@media (min-width: 50em){.pageHeader{--components-pageHeader-padding: var(--pr-t-spacings-300) var(--pr-t-spacings-400)}}.pageHeader:has(.pageHeader-containerOptional){--components-pageHeader-padding: var(--pr-t-spacings-300) 0}.pageHeader:has(.pageHeader-content-title-back:not(:empty)) .pageHeader-content-title-back .button{--components-button-backgroundColor: var(--palettes-neutral-0);--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-boxShadow: var(--pr-t-elevation-shadow-button), 0 0 0 var(--commons-divider-width) var(--palettes-neutral-200);--icon-size: 1.25rem;--components-button-font: var(--pr-t-font-body-S);--components-button-paddingBlock: var(--pr-t-spacings-75);--components-button-paddingInline: var(--pr-t-spacings-100);--components-button-gap: var(--pr-t-spacings-75);--components-button-font-size: var(--pr-t-font-body-S-fontSize);--components-button-line-height: var(--pr-t-font-body-S-lineHeight);--components-button-padding: var(--pr-t-spacings-75)}.pageHeader:has(.pageHeader-content-title-back:not(:empty)) .pageHeader-content-title-back .button:hover{--components-button-boxShadow: var(--pr-t-elevation-shadow-button), 0 0 0 var(--commons-divider-width) var(--palettes-300, var(--palettes-neutral-300));--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50)) }.pageHeader:has(.pageHeader-content-title-back:not(:empty)) .pageHeader-content-title-back .button:active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.pageHeader:has(.pageHeader-content-title-back:not(:empty)) .pageHeader-content-title-back .button:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:3px}.pageHeader:has(.pageHeader-content-title-back:not(:empty)) .pageHeader-content-title-back .button:disabled{--components-button-backgroundColor: var(--palettes-neutral-0);--components-button-boxShadow: 0 0 0 1px var(--palettes-neutral-100);--components-button-color: var(--pr-t-color-text-disabled)}.pageHeader:has(.pageHeader-content-title-back:not(:empty)) .pageHeader-content-title-back .button .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}}@layer base{h1,h2,h3,h4,h5,h6{margin-block-start:0;color:var(--pr-t-color-text-heading);text-wrap:pretty;font:var(--components-title-font);margin-block-end:0;padding:0}h1{--components-title-font: var(--pr-t-font-heading-1);--sizes-verticalPadding: var(--sizes-XXL-verticalPadding)}h2{--components-title-font: var(--pr-t-font-heading-2);--sizes-verticalPadding: var(--sizes-XL-verticalPadding)}h3{--components-title-font: var(--pr-t-font-heading-3);--sizes-verticalPadding: var(--sizes-L-verticalPadding)}h4{--components-title-font: var(--pr-t-font-heading-4);--sizes-verticalPadding: var(--sizes-M-verticalPadding)}h5{--components-title-font: 600 var(--pr-t-font-fontSize-175)/var(--pr-t-font-lineHeight-250) var(--pr-t-font-family);--sizes-verticalPadding: var(--sizes-S-verticalPadding)}h6{--components-title-font: 600 var(--pr-t-font-fontSize-150)/var(--pr-t-font-lineHeight-200) var(--pr-t-font-family);--sizes-verticalPadding: var(--sizes-XS-verticalPadding)}}@layer mods{h1.mod-XXXL{--components-title-font: 900 2.25rem/2.5rem var(--pr-t-font-family-brand);--sizes-verticalPadding: var(--sizes-XXXL-verticalPadding)}h1.mod-elementAfterText,h2.mod-elementAfterText,h3.mod-elementAfterText,h4.mod-elementAfterText,h5.mod-elementAfterText,h6.mod-elementAfterText{display:flex;flex-wrap:wrap;column-gap:var(--pr-t-spacings-100)}}\n"], dependencies: [{ kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
19
19
|
}
|
|
20
20
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: PageHeaderComponent, decorators: [{
|
|
21
21
|
type: Component,
|
|
22
|
-
args: [{ selector: 'lu-page-header', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PortalDirective, NgTemplateOutlet], template: "<header class=\"pageHeader\">\n\t@if (container()) {\n\t\t<div class=\"pageHeader-containerOptional\">\n\t\t\t<ng-container *ngTemplateOutlet=\"content\" />\n\t\t</div>\n\t} @else {\n\t\t<ng-container *ngTemplateOutlet=\"content\" />\n\t}\n</header>\n\n<ng-template #content>\n\t<ng-content select=\"[pageHeaderBreadcrumbs]\" />\n\t<div class=\"pageHeader-content\">\n\t\t<div class=\"pageHeader-content-title\">\n\t\t\t<div class=\"pageHeader-content-title-back\">\n\t\t\t\t<ng-content select=\"[pageHeaderBackAction]\" />\n\t\t\t</div>\n\t\t\t<div class=\"pageHeader-content-title-leading\">\n\t\t\t\t<ng-content select=\"[pageHeaderLeading]\" />\n\t\t\t</div>\n\t\t\t@if (labelIsString()) {\n\t\t\t\t<h1 class=\"pageHeader-content-title-content\"><ng-container *luPortal=\"label()\" /></h1>\n\t\t\t} @else {\n\t\t\t\t<ng-container *luPortal=\"label()\" />\n\t\t\t}\n\t\t\t<div class=\"pageHeader-content-title-trailing\">\n\t\t\t\t<ng-content select=\"[pageHeaderTrailing]\" />\n\t\t\t</div>\n\t\t\t<div class=\"pageHeader-content-title-actions\">\n\t\t\t\t<ng-content select=\"[pageHeaderTitleActions]\" />\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"pageHeader-content-actions\">\n\t\t\t<ng-content select=\"[pageHeaderActions]\" />\n\t\t</div>\n\t</div>\n\t@if (description()) {\n\t\t<div class=\"pageHeader-description\">\n\t\t\t@if (descriptionIsString()) {\n\t\t\t\t<p class=\"pageHeader-description-paragraph\">{{ description() }}</p>\n\t\t\t} @else {\n\t\t\t\t<ng-container *luPortal=\"description()\" />\n\t\t\t}\n\t\t</div>\n\t}\n\t<ng-content select=\"[pageHeaderNavigation]\" />\n</ng-template>\n", styles: ["@layer components{.pageHeader{--components-pageHeader-description-max-width: 50rem;--components-pageHeader-padding: var(--pr-t-spacings-300) var(--pr-t-spacings-200);padding:var(--components-pageHeader-padding)}.pageHeader-containerOptional{padding:var(--commons-container-padding);max-inline-size:var(--commons-container-maxWidth)}.pageHeader-content{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;row-gap:var(--pr-t-spacings-100)}.pageHeader-content-title{display:flex;column-gap:var(--pr-t-spacings-150);align-items:center;flex-wrap:wrap;min-block-size:var(--pr-t-spacings-500)}.pageHeader-content-actions:empty,.pageHeader-content-title-back:empty,.pageHeader-content-title-actions:empty,.pageHeader-content-title-leading:empty,.pageHeader-content-title-trailing:empty{display:none}.pageHeader-content-actions{gap:var(--pr-t-spacings-150);display:flex;align-items:center;flex-wrap:wrap;row-gap:var(--pr-t-spacings-200)}.pageHeader-content-actions .button{margin:0}@media not all and (min-width: 40em){.pageHeader-content-actions .button{flex:1}}@media not all and (min-width: 40em){.pageHeader-content-actions .textfield.mod-search,.pageHeader-content-actions .form-field:has(.icon-searchMagnifyingGlass){flex-basis:100%}}.pageHeader-description{max-inline-size:var(--components-pageHeader-description-max-width);margin-block-start:var(--pr-t-spacings-100);color:var(--palettes-neutral-700)}.pageHeader-description-paragraph{margin:0}}@layer mods{.pageHeader.mod-withHorizontalNavigation,.pageHeader:has(.horizontalNavigation),.pageHeader.mod-withMenu{padding-block-end:0}.pageHeader.mod-withHorizontalNavigation .horizontalNavigation,.pageHeader.mod-withHorizontalNavigation .menu,.pageHeader:has(.horizontalNavigation) .horizontalNavigation,.pageHeader:has(.horizontalNavigation) .menu,.pageHeader.mod-withMenu .horizontalNavigation,.pageHeader.mod-withMenu .menu{margin-block-start:var(--pr-t-spacings-50)}.pageHeader:has(.breadcrumbs),.pageHeader.mod-withBreadcrumbs{padding-block-start:var(--pr-t-spacings-200)}.pageHeader:has(.breadcrumbs) .breadcrumbs,.pageHeader.mod-withBreadcrumbs .breadcrumbs{margin-block-end:0}.pageHeader.mod-sticky{background-color:var(--pr-t-elevation-surface-default);inset-block-start:calc(var(--commons-banner-height) + var(--commons-navSide-mobile-toggle-height));position:sticky;inset-inline:0;z-index:99}@media (min-width: 50em){.pageHeader.mod-sticky{inset-block-start:var(--commons-banner-height);inset-inline-start:0!important}}@media (min-width: 50em){.pageHeader{--components-pageHeader-padding: var(--pr-t-spacings-300) var(--pr-t-spacings-400)}}.pageHeader:has(.pageHeader-containerOptional){--components-pageHeader-padding: var(--pr-t-spacings-300) 0}}@layer base{h1,h2,h3,h4,h5,h6{margin-block-start:0;color:var(--pr-t-color-text-heading);text-wrap:pretty;font:var(--components-title-font);margin-block-end:0;padding:0}h1{--components-title-font: var(--pr-t-font-heading-1);--sizes-verticalPadding: var(--sizes-XXL-verticalPadding)}h2{--components-title-font: var(--pr-t-font-heading-2);--sizes-verticalPadding: var(--sizes-XL-verticalPadding)}h3{--components-title-font: var(--pr-t-font-heading-3);--sizes-verticalPadding: var(--sizes-L-verticalPadding)}h4{--components-title-font: var(--pr-t-font-heading-4);--sizes-verticalPadding: var(--sizes-M-verticalPadding)}h5{--components-title-font: 600 var(--pr-t-font-fontSize-175)/var(--pr-t-font-lineHeight-250) var(--pr-t-font-family);--sizes-verticalPadding: var(--sizes-S-verticalPadding)}h6{--components-title-font: 600 var(--pr-t-font-fontSize-150)/var(--pr-t-font-lineHeight-200) var(--pr-t-font-family);--sizes-verticalPadding: var(--sizes-XS-verticalPadding)}}@layer mods{h1.mod-XXXL{--components-title-font: 900 2.25rem/2.5rem var(--pr-t-font-family-brand);--sizes-verticalPadding: var(--sizes-XXXL-verticalPadding)}h1.mod-elementAfterText,h2.mod-elementAfterText,h3.mod-elementAfterText,h4.mod-elementAfterText,h5.mod-elementAfterText,h6.mod-elementAfterText{display:flex;flex-wrap:wrap;column-gap:var(--pr-t-spacings-100)}}\n"] }]
|
|
22
|
+
args: [{ selector: 'lu-page-header', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PortalDirective, NgTemplateOutlet], template: "<header class=\"pageHeader\">\n\t@if (container()) {\n\t\t<div class=\"pageHeader-containerOptional\">\n\t\t\t<ng-container *ngTemplateOutlet=\"content\" />\n\t\t</div>\n\t} @else {\n\t\t<ng-container *ngTemplateOutlet=\"content\" />\n\t}\n</header>\n\n<ng-template #content>\n\t<ng-content select=\"[pageHeaderBreadcrumbs]\" />\n\t<div class=\"pageHeader-content\">\n\t\t<div class=\"pageHeader-content-title\">\n\t\t\t<div class=\"pageHeader-content-title-back\">\n\t\t\t\t<ng-content select=\"[pageHeaderBackAction]\" />\n\t\t\t</div>\n\t\t\t<div class=\"pageHeader-content-title-leading\">\n\t\t\t\t<ng-content select=\"[pageHeaderLeading]\" />\n\t\t\t</div>\n\t\t\t@if (labelIsString()) {\n\t\t\t\t<h1 class=\"pageHeader-content-title-content\"><ng-container *luPortal=\"label()\" /></h1>\n\t\t\t} @else {\n\t\t\t\t<ng-container *luPortal=\"label()\" />\n\t\t\t}\n\t\t\t<div class=\"pageHeader-content-title-trailing\">\n\t\t\t\t<ng-content select=\"[pageHeaderTrailing]\" />\n\t\t\t</div>\n\t\t\t<div class=\"pageHeader-content-title-actions\">\n\t\t\t\t<ng-content select=\"[pageHeaderTitleActions]\" />\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"pageHeader-content-actions\">\n\t\t\t<ng-content select=\"[pageHeaderActions]\" />\n\t\t</div>\n\t</div>\n\t@if (description()) {\n\t\t<div class=\"pageHeader-description\">\n\t\t\t@if (descriptionIsString()) {\n\t\t\t\t<p class=\"pageHeader-description-paragraph\">{{ description() }}</p>\n\t\t\t} @else {\n\t\t\t\t<ng-container *luPortal=\"description()\" />\n\t\t\t}\n\t\t</div>\n\t}\n\t<ng-content select=\"[pageHeaderNavigation]\" />\n</ng-template>\n", styles: ["@layer components{.pageHeader{--components-pageHeader-description-max-width: 50rem;--components-pageHeader-padding: var(--pr-t-spacings-300) var(--pr-t-spacings-200);padding:var(--components-pageHeader-padding)}.pageHeader-containerOptional{padding:var(--commons-container-padding);max-inline-size:var(--commons-container-maxWidth)}.pageHeader-content{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;row-gap:var(--pr-t-spacings-100)}.pageHeader-content-title{display:flex;column-gap:var(--pr-t-spacings-150);align-items:center;flex-wrap:wrap;min-block-size:var(--pr-t-spacings-500)}.pageHeader-content-actions:empty,.pageHeader-content-title-back:empty,.pageHeader-content-title-actions:empty,.pageHeader-content-title-leading:empty,.pageHeader-content-title-trailing:empty{display:none}.pageHeader-content-actions{gap:var(--pr-t-spacings-150);display:flex;align-items:center;flex-wrap:wrap;row-gap:var(--pr-t-spacings-200)}.pageHeader-content-actions .button{margin:0}@media not all and (min-width: 40em){.pageHeader-content-actions .button{flex:1}}@media not all and (min-width: 40em){.pageHeader-content-actions .textfield.mod-search,.pageHeader-content-actions .form-field:has(.icon-searchMagnifyingGlass){flex-basis:100%}}.pageHeader-description{max-inline-size:var(--components-pageHeader-description-max-width);margin-block-start:var(--pr-t-spacings-100);color:var(--palettes-neutral-700)}.pageHeader-description-paragraph{margin:0}}@layer mods{.pageHeader.mod-withHorizontalNavigation,.pageHeader:has(.horizontalNavigation),.pageHeader.mod-withMenu{padding-block-end:0}.pageHeader.mod-withHorizontalNavigation .horizontalNavigation,.pageHeader.mod-withHorizontalNavigation .menu,.pageHeader:has(.horizontalNavigation) .horizontalNavigation,.pageHeader:has(.horizontalNavigation) .menu,.pageHeader.mod-withMenu .horizontalNavigation,.pageHeader.mod-withMenu .menu{margin-block-start:var(--pr-t-spacings-50)}.pageHeader:has(.breadcrumbs),.pageHeader.mod-withBreadcrumbs{padding-block-start:var(--pr-t-spacings-200)}.pageHeader:has(.breadcrumbs) .breadcrumbs,.pageHeader.mod-withBreadcrumbs .breadcrumbs{margin-block-end:0}.pageHeader.mod-sticky{background-color:var(--pr-t-elevation-surface-default);inset-block-start:calc(var(--commons-banner-height) + var(--commons-navSide-mobile-toggle-height));position:sticky;inset-inline:0;z-index:99}@media (min-width: 50em){.pageHeader.mod-sticky{inset-block-start:var(--commons-banner-height);inset-inline-start:0!important}}@media (min-width: 50em){.pageHeader{--components-pageHeader-padding: var(--pr-t-spacings-300) var(--pr-t-spacings-400)}}.pageHeader:has(.pageHeader-containerOptional){--components-pageHeader-padding: var(--pr-t-spacings-300) 0}.pageHeader:has(.pageHeader-content-title-back:not(:empty)) .pageHeader-content-title-back .button{--components-button-backgroundColor: var(--palettes-neutral-0);--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-boxShadow: var(--pr-t-elevation-shadow-button), 0 0 0 var(--commons-divider-width) var(--palettes-neutral-200);--icon-size: 1.25rem;--components-button-font: var(--pr-t-font-body-S);--components-button-paddingBlock: var(--pr-t-spacings-75);--components-button-paddingInline: var(--pr-t-spacings-100);--components-button-gap: var(--pr-t-spacings-75);--components-button-font-size: var(--pr-t-font-body-S-fontSize);--components-button-line-height: var(--pr-t-font-body-S-lineHeight);--components-button-padding: var(--pr-t-spacings-75)}.pageHeader:has(.pageHeader-content-title-back:not(:empty)) .pageHeader-content-title-back .button:hover{--components-button-boxShadow: var(--pr-t-elevation-shadow-button), 0 0 0 var(--commons-divider-width) var(--palettes-300, var(--palettes-neutral-300));--components-button-color: var(--palettes-700, var(--palettes-neutral-700));--components-button-backgroundColor: var(--palettes-50, var(--palettes-neutral-50)) }.pageHeader:has(.pageHeader-content-title-back:not(:empty)) .pageHeader-content-title-back .button:active{--components-button-backgroundColor: var(--palettes-100, var(--palettes-neutral-100))}.pageHeader:has(.pageHeader-content-title-back:not(:empty)) .pageHeader-content-title-back .button:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:3px}.pageHeader:has(.pageHeader-content-title-back:not(:empty)) .pageHeader-content-title-back .button:disabled{--components-button-backgroundColor: var(--palettes-neutral-0);--components-button-boxShadow: 0 0 0 1px var(--palettes-neutral-100);--components-button-color: var(--pr-t-color-text-disabled)}.pageHeader:has(.pageHeader-content-title-back:not(:empty)) .pageHeader-content-title-back .button .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}}@layer base{h1,h2,h3,h4,h5,h6{margin-block-start:0;color:var(--pr-t-color-text-heading);text-wrap:pretty;font:var(--components-title-font);margin-block-end:0;padding:0}h1{--components-title-font: var(--pr-t-font-heading-1);--sizes-verticalPadding: var(--sizes-XXL-verticalPadding)}h2{--components-title-font: var(--pr-t-font-heading-2);--sizes-verticalPadding: var(--sizes-XL-verticalPadding)}h3{--components-title-font: var(--pr-t-font-heading-3);--sizes-verticalPadding: var(--sizes-L-verticalPadding)}h4{--components-title-font: var(--pr-t-font-heading-4);--sizes-verticalPadding: var(--sizes-M-verticalPadding)}h5{--components-title-font: 600 var(--pr-t-font-fontSize-175)/var(--pr-t-font-lineHeight-250) var(--pr-t-font-family);--sizes-verticalPadding: var(--sizes-S-verticalPadding)}h6{--components-title-font: 600 var(--pr-t-font-fontSize-150)/var(--pr-t-font-lineHeight-200) var(--pr-t-font-family);--sizes-verticalPadding: var(--sizes-XS-verticalPadding)}}@layer mods{h1.mod-XXXL{--components-title-font: 900 2.25rem/2.5rem var(--pr-t-font-family-brand);--sizes-verticalPadding: var(--sizes-XXXL-verticalPadding)}h1.mod-elementAfterText,h2.mod-elementAfterText,h3.mod-elementAfterText,h4.mod-elementAfterText,h5.mod-elementAfterText,h6.mod-elementAfterText{display:flex;flex-wrap:wrap;column-gap:var(--pr-t-spacings-100)}}\n"] }]
|
|
23
23
|
}] });
|
|
24
24
|
|
|
25
25
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lucca-front-ng-page-header.mjs","sources":["../../../packages/ng/page-header/page-header.component.ts","../../../packages/ng/page-header/page-header.component.html","../../../packages/ng/page-header/lucca-front-ng-page-header.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport { booleanAttribute, ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';\nimport { PortalContent, PortalDirective } from '@lucca-front/ng/core';\n\n@Component({\n\tselector: 'lu-page-header',\n\tstyleUrl: './page-header.component.scss',\n\ttemplateUrl: './page-header.component.html',\n\tencapsulation: ViewEncapsulation.None,\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\timports: [PortalDirective, NgTemplateOutlet],\n})\nexport class PageHeaderComponent {\n\treadonly description = input<PortalContent | null>(null);\n\treadonly label = input<PortalContent | null>(null);\n\treadonly container = input(false, { transform: booleanAttribute });\n\n\treadonly descriptionIsString = computed(() => this.isStringPortalContent(this.description()));\n\treadonly labelIsString = computed(() => this.isStringPortalContent(this.label()));\n\n\tpublic isStringPortalContent(message: PortalContent): message is string {\n\t\treturn typeof message === 'string';\n\t}\n}\n","<header class=\"pageHeader\">\n\t@if (container()) {\n\t\t<div class=\"pageHeader-containerOptional\">\n\t\t\t<ng-container *ngTemplateOutlet=\"content\" />\n\t\t</div>\n\t} @else {\n\t\t<ng-container *ngTemplateOutlet=\"content\" />\n\t}\n</header>\n\n<ng-template #content>\n\t<ng-content select=\"[pageHeaderBreadcrumbs]\" />\n\t<div class=\"pageHeader-content\">\n\t\t<div class=\"pageHeader-content-title\">\n\t\t\t<div class=\"pageHeader-content-title-back\">\n\t\t\t\t<ng-content select=\"[pageHeaderBackAction]\" />\n\t\t\t</div>\n\t\t\t<div class=\"pageHeader-content-title-leading\">\n\t\t\t\t<ng-content select=\"[pageHeaderLeading]\" />\n\t\t\t</div>\n\t\t\t@if (labelIsString()) {\n\t\t\t\t<h1 class=\"pageHeader-content-title-content\"><ng-container *luPortal=\"label()\" /></h1>\n\t\t\t} @else {\n\t\t\t\t<ng-container *luPortal=\"label()\" />\n\t\t\t}\n\t\t\t<div class=\"pageHeader-content-title-trailing\">\n\t\t\t\t<ng-content select=\"[pageHeaderTrailing]\" />\n\t\t\t</div>\n\t\t\t<div class=\"pageHeader-content-title-actions\">\n\t\t\t\t<ng-content select=\"[pageHeaderTitleActions]\" />\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"pageHeader-content-actions\">\n\t\t\t<ng-content select=\"[pageHeaderActions]\" />\n\t\t</div>\n\t</div>\n\t@if (description()) {\n\t\t<div class=\"pageHeader-description\">\n\t\t\t@if (descriptionIsString()) {\n\t\t\t\t<p class=\"pageHeader-description-paragraph\">{{ description() }}</p>\n\t\t\t} @else {\n\t\t\t\t<ng-container *luPortal=\"description()\" />\n\t\t\t}\n\t\t</div>\n\t}\n\t<ng-content select=\"[pageHeaderNavigation]\" />\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;MAYa,mBAAmB,CAAA;AARhC,IAAA,WAAA,GAAA;AASU,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAuB,IAAI,CAAC;AAC/C,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAuB,IAAI,CAAC;QACzC,IAAS,CAAA,SAAA,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AAEzD,QAAA,IAAA,CAAA,mBAAmB,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;AACpF,QAAA,IAAA,CAAA,aAAa,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;AAKjF;AAHO,IAAA,qBAAqB,CAAC,OAAsB,EAAA;AAClD,QAAA,OAAO,OAAO,OAAO,KAAK,QAAQ;;8GATvB,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAnB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,ECZhC,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,6kDA+CA,EDrCW,MAAA,EAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"lucca-front-ng-page-header.mjs","sources":["../../../packages/ng/page-header/page-header.component.ts","../../../packages/ng/page-header/page-header.component.html","../../../packages/ng/page-header/lucca-front-ng-page-header.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport { booleanAttribute, ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';\nimport { PortalContent, PortalDirective } from '@lucca-front/ng/core';\n\n@Component({\n\tselector: 'lu-page-header',\n\tstyleUrl: './page-header.component.scss',\n\ttemplateUrl: './page-header.component.html',\n\tencapsulation: ViewEncapsulation.None,\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\timports: [PortalDirective, NgTemplateOutlet],\n})\nexport class PageHeaderComponent {\n\treadonly description = input<PortalContent | null>(null);\n\treadonly label = input<PortalContent | null>(null);\n\treadonly container = input(false, { transform: booleanAttribute });\n\n\treadonly descriptionIsString = computed(() => this.isStringPortalContent(this.description()));\n\treadonly labelIsString = computed(() => this.isStringPortalContent(this.label()));\n\n\tpublic isStringPortalContent(message: PortalContent): message is string {\n\t\treturn typeof message === 'string';\n\t}\n}\n","<header class=\"pageHeader\">\n\t@if (container()) {\n\t\t<div class=\"pageHeader-containerOptional\">\n\t\t\t<ng-container *ngTemplateOutlet=\"content\" />\n\t\t</div>\n\t} @else {\n\t\t<ng-container *ngTemplateOutlet=\"content\" />\n\t}\n</header>\n\n<ng-template #content>\n\t<ng-content select=\"[pageHeaderBreadcrumbs]\" />\n\t<div class=\"pageHeader-content\">\n\t\t<div class=\"pageHeader-content-title\">\n\t\t\t<div class=\"pageHeader-content-title-back\">\n\t\t\t\t<ng-content select=\"[pageHeaderBackAction]\" />\n\t\t\t</div>\n\t\t\t<div class=\"pageHeader-content-title-leading\">\n\t\t\t\t<ng-content select=\"[pageHeaderLeading]\" />\n\t\t\t</div>\n\t\t\t@if (labelIsString()) {\n\t\t\t\t<h1 class=\"pageHeader-content-title-content\"><ng-container *luPortal=\"label()\" /></h1>\n\t\t\t} @else {\n\t\t\t\t<ng-container *luPortal=\"label()\" />\n\t\t\t}\n\t\t\t<div class=\"pageHeader-content-title-trailing\">\n\t\t\t\t<ng-content select=\"[pageHeaderTrailing]\" />\n\t\t\t</div>\n\t\t\t<div class=\"pageHeader-content-title-actions\">\n\t\t\t\t<ng-content select=\"[pageHeaderTitleActions]\" />\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"pageHeader-content-actions\">\n\t\t\t<ng-content select=\"[pageHeaderActions]\" />\n\t\t</div>\n\t</div>\n\t@if (description()) {\n\t\t<div class=\"pageHeader-description\">\n\t\t\t@if (descriptionIsString()) {\n\t\t\t\t<p class=\"pageHeader-description-paragraph\">{{ description() }}</p>\n\t\t\t} @else {\n\t\t\t\t<ng-container *luPortal=\"description()\" />\n\t\t\t}\n\t\t</div>\n\t}\n\t<ng-content select=\"[pageHeaderNavigation]\" />\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;MAYa,mBAAmB,CAAA;AARhC,IAAA,WAAA,GAAA;AASU,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAuB,IAAI,CAAC;AAC/C,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAuB,IAAI,CAAC;QACzC,IAAS,CAAA,SAAA,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AAEzD,QAAA,IAAA,CAAA,mBAAmB,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;AACpF,QAAA,IAAA,CAAA,aAAa,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;AAKjF;AAHO,IAAA,qBAAqB,CAAC,OAAsB,EAAA;AAClD,QAAA,OAAO,OAAO,OAAO,KAAK,QAAQ;;8GATvB,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAnB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,ECZhC,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,6kDA+CA,EDrCW,MAAA,EAAA,CAAA,wuMAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,eAAe,gGAAE,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAE/B,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAR/B,SAAS;AACC,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,EAGX,aAAA,EAAA,iBAAiB,CAAC,IAAI,EACpB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EACtC,OAAA,EAAA,CAAC,eAAe,EAAE,gBAAgB,CAAC,EAAA,QAAA,EAAA,6kDAAA,EAAA,MAAA,EAAA,CAAA,wuMAAA,CAAA,EAAA;;;AEV7C;;AAEG;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken,
|
|
2
|
+
import { InjectionToken, model, booleanAttribute, HostBinding, Input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
3
|
import { ButtonComponent } from '@lucca-front/ng/button';
|
|
4
4
|
import { getIntl } from '@lucca-front/ng/core';
|
|
5
5
|
import { IconComponent } from '@lucca-front/ng/icon';
|
|
@@ -39,22 +39,31 @@ const LuPlgPushTranslations = Translations;
|
|
|
39
39
|
class PLGPushComponent {
|
|
40
40
|
constructor() {
|
|
41
41
|
this.intl = getIntl(LU_PLG_PUSH_TRANSLATIONS);
|
|
42
|
-
this.heading =
|
|
43
|
-
this.removable =
|
|
42
|
+
this.heading = '';
|
|
43
|
+
this.removable = false;
|
|
44
44
|
/**
|
|
45
45
|
* Is the callout removed? Works with two way binding too.
|
|
46
46
|
*/
|
|
47
47
|
this.removed = model(false);
|
|
48
48
|
}
|
|
49
|
+
get hiddenAttr() {
|
|
50
|
+
return this.removed() ? 'hidden' : null;
|
|
51
|
+
}
|
|
49
52
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: PLGPushComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
50
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: PLGPushComponent, isStandalone: true, selector: "lu-plg-push", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal:
|
|
53
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: PLGPushComponent, isStandalone: true, selector: "lu-plg-push", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: false, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, removed: { classPropertyName: "removed", publicName: "removed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removedChange" }, host: { properties: { "attr.hidden": "this.hiddenAttr" } }, ngImport: i0, template: "<div class=\"plgPush\">\n\t<div class=\"plgPush-icons\">\n\t\t<lu-icon class=\"plgPush-icons-front\" icon=\"transportRocket\" size=\"S\" />\n\t\t<img class=\"plgPush-icons-back\" alt=\"\" src=\"https://cdn.lucca.fr/transverse/prisme/visuals/plg-push/shape.svg\" />\n\t</div>\n\t<div class=\"plgPush-content\">\n\t\t@if (heading) {\n\t\t\t<div class=\"plgPush-content-title\">{{ heading }}</div>\n\t\t}\n\t\t<div class=\"plgPush-content-description\">\n\t\t\t<ng-content />\n\t\t</div>\n\t</div>\n\t@if (removable) {\n\t\t<button class=\"plgPush-close\" type=\"button\" luButton=\"ghost\" size=\"S\" (click)=\"removed.set(true)\">\n\t\t\t<lu-icon icon=\"signClose\" [alt]=\"intl.close\" />\n\t\t</button>\n\t}\n</div>\n", styles: ["@layer components{.plgPush{--components-plgPush-icon-size: 2rem;display:flex;align-items:flex-start;gap:var(--pr-t-spacings-100);padding:var(--pr-t-spacings-100);font:var(--pr-t-font-body-S);border:var(--commons-divider-width) var(--commons-divider-style) var(--palettes-brand-200);border-radius:var(--pr-t-border-radius-default);background-color:var(--palettes-brand-50)}.plgPush .link{--commons-text-link-color: var(--palettes-brand-700);--commons-text-link-hover: var(--palettes-brand-800);display:inline-block}.plgPush-icons{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;block-size:var(--components-plgPush-icon-size);inline-size:var(--components-plgPush-icon-size)}.plgPush-icons-front{color:var(--palettes-brand-600);z-index:1}.plgPush-icons-back{position:absolute;z-index:0;inset:0}.plgPush-content{display:flex;flex-direction:column;gap:var(--pr-t-spacings-50);padding-block:var(--pr-t-spacings-75)}.plgPush-content-title{font-weight:var(--pr-t-font-fontWeight-semibold)}.plgPush-content-link{display:flex;align-items:center;gap:var(--pr-t-spacings-25);padding:var(--pr-t-spacings-0)}.plgPush-close{margin-inline-start:auto}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lu-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "component", type: ButtonComponent, selector: "button[luButton],a[luButton]", inputs: ["size", "block", "critical", "delete", "disclosure", "palette", "state", "luButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
51
54
|
}
|
|
52
55
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: PLGPushComponent, decorators: [{
|
|
53
56
|
type: Component,
|
|
54
|
-
args: [{ selector: 'lu-plg-push', imports: [IconComponent, ButtonComponent],
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
57
|
+
args: [{ selector: 'lu-plg-push', imports: [IconComponent, ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"plgPush\">\n\t<div class=\"plgPush-icons\">\n\t\t<lu-icon class=\"plgPush-icons-front\" icon=\"transportRocket\" size=\"S\" />\n\t\t<img class=\"plgPush-icons-back\" alt=\"\" src=\"https://cdn.lucca.fr/transverse/prisme/visuals/plg-push/shape.svg\" />\n\t</div>\n\t<div class=\"plgPush-content\">\n\t\t@if (heading) {\n\t\t\t<div class=\"plgPush-content-title\">{{ heading }}</div>\n\t\t}\n\t\t<div class=\"plgPush-content-description\">\n\t\t\t<ng-content />\n\t\t</div>\n\t</div>\n\t@if (removable) {\n\t\t<button class=\"plgPush-close\" type=\"button\" luButton=\"ghost\" size=\"S\" (click)=\"removed.set(true)\">\n\t\t\t<lu-icon icon=\"signClose\" [alt]=\"intl.close\" />\n\t\t</button>\n\t}\n</div>\n", styles: ["@layer components{.plgPush{--components-plgPush-icon-size: 2rem;display:flex;align-items:flex-start;gap:var(--pr-t-spacings-100);padding:var(--pr-t-spacings-100);font:var(--pr-t-font-body-S);border:var(--commons-divider-width) var(--commons-divider-style) var(--palettes-brand-200);border-radius:var(--pr-t-border-radius-default);background-color:var(--palettes-brand-50)}.plgPush .link{--commons-text-link-color: var(--palettes-brand-700);--commons-text-link-hover: var(--palettes-brand-800);display:inline-block}.plgPush-icons{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;block-size:var(--components-plgPush-icon-size);inline-size:var(--components-plgPush-icon-size)}.plgPush-icons-front{color:var(--palettes-brand-600);z-index:1}.plgPush-icons-back{position:absolute;z-index:0;inset:0}.plgPush-content{display:flex;flex-direction:column;gap:var(--pr-t-spacings-50);padding-block:var(--pr-t-spacings-75)}.plgPush-content-title{font-weight:var(--pr-t-font-fontWeight-semibold)}.plgPush-content-link{display:flex;align-items:center;gap:var(--pr-t-spacings-25);padding:var(--pr-t-spacings-0)}.plgPush-close{margin-inline-start:auto}}\n"] }]
|
|
58
|
+
}], propDecorators: { heading: [{
|
|
59
|
+
type: Input
|
|
60
|
+
}], removable: [{
|
|
61
|
+
type: Input,
|
|
62
|
+
args: [{ transform: booleanAttribute }]
|
|
63
|
+
}], hiddenAttr: [{
|
|
64
|
+
type: HostBinding,
|
|
65
|
+
args: ['attr.hidden']
|
|
66
|
+
}] } });
|
|
58
67
|
|
|
59
68
|
/**
|
|
60
69
|
* Generated bundle index. Do not edit.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lucca-front-ng-plg-push.mjs","sources":["../../../packages/ng/plg-push/translations.ts","../../../packages/ng/plg-push/plg-push.translate.ts","../../../packages/ng/plg-push/plg-push.component.ts","../../../packages/ng/plg-push/plg-push.component.html","../../../packages/ng/plg-push/lucca-front-ng-plg-push.ts"],"sourcesContent":["export const Translations = {\n\t'nl-BE': {\n\t\tclose: 'Sluiten',\n\t},\n\tfr: {\n\t\tclose: 'Fermer',\n\t},\n\tde: {\n\t\tclose: 'Schließen',\n\t},\n\ten: {\n\t\tclose: 'Close',\n\t},\n\tes: {\n\t\tclose: 'Cerrar',\n\t},\n\tit: {\n\t\tclose: 'Chiudere',\n\t},\n\tnl: {\n\t\tclose: 'Sluiten',\n\t},\n\tpt: {\n\t\tclose: 'Fechar',\n\t},\n};\n","import { InjectionToken } from '@angular/core';\nimport { LuTranslation } from '@lucca-front/ng/core';\nimport { Translations } from './translations';\n\nexport const LU_PLG_PUSH_TRANSLATIONS = new InjectionToken('LuPlgPushTranslations', {\n\tfactory: () => LuPlgPushTranslations,\n});\n\nexport interface LuPlgPushLabel {\n\tclose: string;\n}\n\nexport const LuPlgPushTranslations: LuTranslation<LuPlgPushLabel> = Translations;\n","import { booleanAttribute, ChangeDetectionStrategy, Component,
|
|
1
|
+
{"version":3,"file":"lucca-front-ng-plg-push.mjs","sources":["../../../packages/ng/plg-push/translations.ts","../../../packages/ng/plg-push/plg-push.translate.ts","../../../packages/ng/plg-push/plg-push.component.ts","../../../packages/ng/plg-push/plg-push.component.html","../../../packages/ng/plg-push/lucca-front-ng-plg-push.ts"],"sourcesContent":["export const Translations = {\n\t'nl-BE': {\n\t\tclose: 'Sluiten',\n\t},\n\tfr: {\n\t\tclose: 'Fermer',\n\t},\n\tde: {\n\t\tclose: 'Schließen',\n\t},\n\ten: {\n\t\tclose: 'Close',\n\t},\n\tes: {\n\t\tclose: 'Cerrar',\n\t},\n\tit: {\n\t\tclose: 'Chiudere',\n\t},\n\tnl: {\n\t\tclose: 'Sluiten',\n\t},\n\tpt: {\n\t\tclose: 'Fechar',\n\t},\n};\n","import { InjectionToken } from '@angular/core';\nimport { LuTranslation } from '@lucca-front/ng/core';\nimport { Translations } from './translations';\n\nexport const LU_PLG_PUSH_TRANSLATIONS = new InjectionToken('LuPlgPushTranslations', {\n\tfactory: () => LuPlgPushTranslations,\n});\n\nexport interface LuPlgPushLabel {\n\tclose: string;\n}\n\nexport const LuPlgPushTranslations: LuTranslation<LuPlgPushLabel> = Translations;\n","import { booleanAttribute, ChangeDetectionStrategy, Component, HostBinding, Input, model, ViewEncapsulation } from '@angular/core';\nimport { ButtonComponent } from '@lucca-front/ng/button';\nimport { getIntl } from '@lucca-front/ng/core';\nimport { IconComponent } from '@lucca-front/ng/icon';\nimport { LU_PLG_PUSH_TRANSLATIONS } from './plg-push.translate';\n\n@Component({\n\tselector: 'lu-plg-push',\n\timports: [IconComponent, ButtonComponent],\n\ttemplateUrl: './plg-push.component.html',\n\tstyleUrl: './plg-push.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\tencapsulation: ViewEncapsulation.None,\n})\nexport class PLGPushComponent {\n\tprotected intl = getIntl(LU_PLG_PUSH_TRANSLATIONS);\n\n\t@Input() public heading = '';\n\n\t@Input({ transform: booleanAttribute })\n\tremovable = false;\n\n\t/**\n\t * Is the callout removed? Works with two way binding too.\n\t */\n\tremoved = model(false);\n\n\t@HostBinding('attr.hidden')\n\tget hiddenAttr(): 'hidden' | null {\n\t\treturn this.removed() ? 'hidden' : null;\n\t}\n}\n","<div class=\"plgPush\">\n\t<div class=\"plgPush-icons\">\n\t\t<lu-icon class=\"plgPush-icons-front\" icon=\"transportRocket\" size=\"S\" />\n\t\t<img class=\"plgPush-icons-back\" alt=\"\" src=\"https://cdn.lucca.fr/transverse/prisme/visuals/plg-push/shape.svg\" />\n\t</div>\n\t<div class=\"plgPush-content\">\n\t\t@if (heading) {\n\t\t\t<div class=\"plgPush-content-title\">{{ heading }}</div>\n\t\t}\n\t\t<div class=\"plgPush-content-description\">\n\t\t\t<ng-content />\n\t\t</div>\n\t</div>\n\t@if (removable) {\n\t\t<button class=\"plgPush-close\" type=\"button\" luButton=\"ghost\" size=\"S\" (click)=\"removed.set(true)\">\n\t\t\t<lu-icon icon=\"signClose\" [alt]=\"intl.close\" />\n\t\t</button>\n\t}\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { EventEmitter, HostListener, Output, Input, Directive, NgModule } from '@angular/core';
|
|
3
3
|
import { Subject } from 'rxjs';
|
|
4
4
|
import { debounceTime } from 'rxjs/operators';
|
|
5
5
|
|
|
@@ -8,13 +8,11 @@ import { debounceTime } from 'rxjs/operators';
|
|
|
8
8
|
* emits on scroll events
|
|
9
9
|
*/
|
|
10
10
|
class LuScrollDirective {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
scroll(event) {
|
|
14
|
-
this.#scrollSubject.next(event);
|
|
11
|
+
_scroll($event) {
|
|
12
|
+
this.scrollSubject.next($event);
|
|
15
13
|
}
|
|
16
14
|
ngOnInit() {
|
|
17
|
-
this
|
|
15
|
+
this.scroll$.subscribe((scrollEvent) => this.emitScrollEvents(scrollEvent));
|
|
18
16
|
}
|
|
19
17
|
emitScrollEvents($event) {
|
|
20
18
|
this.onScroll.emit($event);
|
|
@@ -42,28 +40,40 @@ class LuScrollDirective {
|
|
|
42
40
|
}
|
|
43
41
|
constructor(_elementRef) {
|
|
44
42
|
this._elementRef = _elementRef;
|
|
45
|
-
this.debounceTime =
|
|
46
|
-
this.onScroll =
|
|
47
|
-
this.onScrollTop =
|
|
48
|
-
this.onScrollBottom =
|
|
49
|
-
this.onScrollLeft =
|
|
50
|
-
this.onScrollRight =
|
|
51
|
-
this
|
|
52
|
-
this
|
|
43
|
+
this.debounceTime = 100;
|
|
44
|
+
this.onScroll = new EventEmitter();
|
|
45
|
+
this.onScrollTop = new EventEmitter();
|
|
46
|
+
this.onScrollBottom = new EventEmitter();
|
|
47
|
+
this.onScrollLeft = new EventEmitter();
|
|
48
|
+
this.onScrollRight = new EventEmitter();
|
|
49
|
+
this.scrollSubject = new Subject();
|
|
50
|
+
this.scroll$ = this.scrollSubject.asObservable().pipe(debounceTime(this.debounceTime));
|
|
53
51
|
}
|
|
54
52
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LuScrollDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
55
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
53
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.2", type: LuScrollDirective, isStandalone: true, selector: "[luScroll]", inputs: { debounceTime: "debounceTime" }, outputs: { onScroll: "onScroll", onScrollTop: "onScrollTop", onScrollBottom: "onScrollBottom", onScrollLeft: "onScrollLeft", onScrollRight: "onScrollRight" }, host: { listeners: { "scroll": "_scroll($event)" } }, exportAs: ["luScroll"], ngImport: i0 }); }
|
|
56
54
|
}
|
|
57
55
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LuScrollDirective, decorators: [{
|
|
58
56
|
type: Directive,
|
|
59
57
|
args: [{
|
|
60
58
|
selector: '[luScroll]',
|
|
61
59
|
exportAs: 'luScroll',
|
|
62
|
-
host: {
|
|
63
|
-
'(scroll)': 'scroll($event)',
|
|
64
|
-
},
|
|
65
60
|
}]
|
|
66
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }]
|
|
61
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { debounceTime: [{
|
|
62
|
+
type: Input
|
|
63
|
+
}], onScroll: [{
|
|
64
|
+
type: Output
|
|
65
|
+
}], onScrollTop: [{
|
|
66
|
+
type: Output
|
|
67
|
+
}], onScrollBottom: [{
|
|
68
|
+
type: Output
|
|
69
|
+
}], onScrollLeft: [{
|
|
70
|
+
type: Output
|
|
71
|
+
}], onScrollRight: [{
|
|
72
|
+
type: Output
|
|
73
|
+
}], _scroll: [{
|
|
74
|
+
type: HostListener,
|
|
75
|
+
args: ['scroll', ['$event']]
|
|
76
|
+
}] } });
|
|
67
77
|
|
|
68
78
|
/**
|
|
69
79
|
* @deprecated use `LuScrollDirective` instead
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lucca-front-ng-scroll.mjs","sources":["../../../packages/ng/scroll/scroll.directive.ts","../../../packages/ng/scroll/scroll.module.ts","../../../packages/ng/scroll/lucca-front-ng-scroll.ts"],"sourcesContent":["/* eslint-disable @angular-eslint/no-output-on-prefix */\nimport { Directive, ElementRef,
|
|
1
|
+
{"version":3,"file":"lucca-front-ng-scroll.mjs","sources":["../../../packages/ng/scroll/scroll.directive.ts","../../../packages/ng/scroll/scroll.module.ts","../../../packages/ng/scroll/lucca-front-ng-scroll.ts"],"sourcesContent":["/* eslint-disable @angular-eslint/no-output-on-prefix */\nimport { Directive, ElementRef, EventEmitter, HostListener, Input, OnInit, Output } from '@angular/core';\nimport { Subject } from 'rxjs';\nimport { debounceTime } from 'rxjs/operators';\nimport { ILuScrollable } from './scroll.model';\n\n/**\n * emits on scroll events\n */\n@Directive({\n\tselector: '[luScroll]',\n\texportAs: 'luScroll',\n})\nexport class LuScrollDirective implements ILuScrollable, OnInit {\n\t@Input() debounceTime = 100;\n\t@Output() onScroll = new EventEmitter<Event>();\n\t@Output() onScrollTop = new EventEmitter<Event>();\n\t@Output() onScrollBottom = new EventEmitter<Event>();\n\t@Output() onScrollLeft = new EventEmitter<Event>();\n\t@Output() onScrollRight = new EventEmitter<Event>();\n\tprivate scrollSubject = new Subject<Event>();\n\tprivate scroll$ = this.scrollSubject.asObservable().pipe(debounceTime(this.debounceTime));\n\t@HostListener('scroll', ['$event'])\n\t_scroll($event: Event) {\n\t\tthis.scrollSubject.next($event);\n\t}\n\n\tngOnInit(): void {\n\t\tthis.scroll$.subscribe((scrollEvent) => this.emitScrollEvents(scrollEvent));\n\t}\n\tprivate emitScrollEvents($event: Event) {\n\t\tthis.onScroll.emit($event);\n\n\t\tconst target = $event.target;\n\t\tif (target instanceof Element) {\n\t\t\tconst scrollLeft = target.scrollLeft;\n\t\t\tconst scrollTop = target.scrollTop;\n\t\t\tif (scrollLeft === 0) {\n\t\t\t\tthis.onScrollLeft.emit($event);\n\t\t\t}\n\t\t\tif (scrollTop === 0) {\n\t\t\t\tthis.onScrollTop.emit($event);\n\t\t\t}\n\t\t\tconst scrollWidth = target.scrollWidth;\n\t\t\tconst scrollHeight = target.scrollHeight;\n\t\t\tconst eltHeight = this._elementRef.nativeElement.clientHeight;\n\t\t\tconst eltWidth = this._elementRef.nativeElement.clientWidth;\n\t\t\tif (scrollWidth - scrollLeft - eltWidth < 10) {\n\t\t\t\tthis.onScrollRight.emit($event);\n\t\t\t}\n\t\t\tif (scrollHeight - scrollTop - eltHeight < 10) {\n\t\t\t\tthis.onScrollBottom.emit($event);\n\t\t\t}\n\t\t}\n\t}\n\tconstructor(protected _elementRef: ElementRef<HTMLElement>) {}\n}\n","import { NgModule } from '@angular/core';\nimport { LuScrollDirective } from './scroll.directive';\n\n/**\n * @deprecated use `LuScrollDirective` instead\n */\n@NgModule({\n\timports: [LuScrollDirective],\n\texports: [LuScrollDirective],\n})\nexport class LuScrollModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -149,7 +149,7 @@ class LuSelectPanelComponent {
|
|
|
149
149
|
options$: this.options$,
|
|
150
150
|
optionComparer: this.optionComparer,
|
|
151
151
|
activeOptionIdChanged$: this.panelRef.activeOptionIdChanged,
|
|
152
|
-
clueChange$: this.selectInput.searchable ? this.selectInput.clueChange
|
|
152
|
+
clueChange$: this.selectInput.searchable ? this.selectInput.clueChange : EMPTY,
|
|
153
153
|
});
|
|
154
154
|
if (this.initialValue && !this.selectInput.clue) {
|
|
155
155
|
this.keyManager.highlightOption(this.initialValue);
|