@crowdfarming/oliva-ds 1.19.0 → 1.20.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/crowdfarming-oliva-ds.mjs +66 -29
- package/fesm2022/crowdfarming-oliva-ds.mjs.map +1 -1
- package/lib/button/src/lib/button/button.component.d.ts +2 -1
- package/lib/dropdown/src/lib/dropdown/dropdown.component.d.ts +16 -9
- package/lib/icon/src/lib/icon/svg/communication.constant.d.ts +4 -0
- package/lib/icon/src/lib/icon/svg/index.d.ts +4 -0
- package/lib/text-input/src/lib/text-input/text-input.component.d.ts +3 -1
- package/lib/text-input/src/lib/text-input/text-input.constants.d.ts +2 -0
- package/package.json +1 -1
|
@@ -1723,6 +1723,22 @@ const communicationIcons = {
|
|
|
1723
1723
|
'megaphone-fill': `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1724
1724
|
<path d="M25 9.00001H20.025C19.6612 8.97876 13.3225 8.53251 7.28625 3.47001C6.99476 3.2252 6.63946 3.06866 6.26208 3.01877C5.88471 2.96889 5.50094 3.02774 5.15585 3.1884C4.81076 3.34907 4.51869 3.60488 4.31395 3.92578C4.1092 4.24668 4.00029 4.61935 4 5.00001V25C4.00005 25.3808 4.10879 25.7536 4.31345 26.0747C4.5181 26.3958 4.81015 26.6518 5.15529 26.8126C5.50042 26.9734 5.88429 27.0324 6.26178 26.9825C6.63926 26.9327 6.99468 26.7761 7.28625 26.5313C12.0075 22.5713 16.9113 21.4363 19 21.1188V25.0838C18.9996 25.4133 19.0806 25.7379 19.2359 26.0286C19.3912 26.3193 19.6159 26.5671 19.89 26.75L21.265 27.6663C21.5308 27.8436 21.8352 27.9548 22.1527 27.9903C22.4703 28.0259 22.7917 27.9849 23.0901 27.8706C23.3885 27.7564 23.6553 27.5724 23.8679 27.3339C24.0806 27.0955 24.2331 26.8095 24.3125 26.5L25.7838 20.955C27.3047 20.7682 28.6965 20.0065 29.6737 18.8261C30.6509 17.6458 31.1395 16.1363 31.0393 14.6073C30.939 13.0782 30.2575 11.6454 29.1346 10.6028C28.0116 9.56016 26.5323 8.98669 25 9.00001ZM22.375 25.9863V26L21 25.0838V21H23.7L22.375 25.9863ZM25 19H21V11H25C26.0609 11 27.0783 11.4214 27.8284 12.1716C28.5786 12.9217 29 13.9391 29 15C29 16.0609 28.5786 17.0783 27.8284 17.8284C27.0783 18.5786 26.0609 19 25 19Z" fill="#070707"/>
|
|
1725
1725
|
</svg>
|
|
1726
|
+
`,
|
|
1727
|
+
'envelopesimple-regular': `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1728
|
+
<path d="M28 6H4C3.73478 6 3.48043 6.10536 3.29289 6.29289C3.10536 6.48043 3 6.73478 3 7V24C3 24.5304 3.21071 25.0391 3.58579 25.4142C3.96086 25.7893 4.46957 26 5 26H27C27.5304 26 28.0391 25.7893 28.4142 25.4142C28.7893 25.0391 29 24.5304 29 24V7C29 6.73478 28.8946 6.48043 28.7071 6.29289C28.5196 6.10536 28.2652 6 28 6ZM25.4287 8L16 16.6437L6.57125 8H25.4287ZM27 24H5V9.27375L15.3237 18.7375C15.5082 18.9069 15.7496 19.0008 16 19.0008C16.2504 19.0008 16.4918 18.9069 16.6763 18.7375L27 9.27375V24Z" fill="#070707"/>
|
|
1729
|
+
</svg>
|
|
1730
|
+
`,
|
|
1731
|
+
'phone-regular': `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1732
|
+
<path d="M27.7963 19.8075L21.9075 17.1688L21.8913 17.1613C21.5856 17.0305 21.2521 16.978 20.921 17.0086C20.5899 17.0391 20.2716 17.1518 19.995 17.3363C19.9624 17.3578 19.9311 17.3811 19.9013 17.4063L16.8588 20C14.9313 19.0638 12.9413 17.0888 12.005 15.1863L14.6025 12.0975C14.6275 12.0663 14.6513 12.035 14.6738 12.0013C14.8543 11.7254 14.9638 11.4092 14.9926 11.0807C15.0214 10.7523 14.9686 10.4218 14.8388 10.1188V10.1038L12.1925 4.20501C12.0209 3.80909 11.7259 3.47928 11.3515 3.2648C10.9771 3.05033 10.5433 2.96271 10.115 3.01501C8.42122 3.23789 6.86649 4.06972 5.74118 5.35513C4.61587 6.64053 3.99695 8.29162 4.00001 10C4.00001 19.925 12.075 28 22 28C23.7084 28.0031 25.3595 27.3841 26.6449 26.2588C27.9303 25.1335 28.7621 23.5788 28.985 21.885C29.0374 21.4568 28.95 21.0232 28.7357 20.6488C28.5215 20.2744 28.1919 19.9793 27.7963 19.8075ZM22 26C17.758 25.9954 13.691 24.3082 10.6914 21.3086C7.69184 18.309 6.00464 14.242 6.00001 10C5.99531 8.77937 6.43507 7.59875 7.23718 6.67864C8.03929 5.75853 9.14889 5.16184 10.3588 5.00001C10.3583 5.00499 10.3583 5.01002 10.3588 5.01501L12.9838 10.89L10.4 13.9825C10.3738 14.0127 10.35 14.0449 10.3288 14.0788C10.1407 14.3674 10.0303 14.6997 10.0084 15.0436C9.9865 15.3874 10.0538 15.7311 10.2038 16.0413C11.3363 18.3575 13.67 20.6738 16.0113 21.805C16.3237 21.9536 16.6694 22.0185 17.0144 21.9936C17.3595 21.9686 17.6922 21.8545 17.98 21.6625C18.0121 21.6409 18.043 21.6175 18.0725 21.5925L21.1113 19L26.9863 21.6313C26.9863 21.6313 26.9963 21.6313 27 21.6313C26.8402 22.8428 26.2444 23.9547 25.3241 24.7588C24.4038 25.5629 23.2221 26.0041 22 26Z" fill="#070707"/>
|
|
1733
|
+
</svg>
|
|
1734
|
+
`,
|
|
1735
|
+
'paperplanetilt-regular': `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1736
|
+
<path d="M28.415 3.585C28.1635 3.33366 27.8495 3.15392 27.5055 3.06427C27.1614 2.97463 26.7997 2.97833 26.4575 3.075H26.4387L2.44624 10.355C2.05673 10.4673 1.71053 10.6952 1.45351 11.0087C1.19649 11.3221 1.04079 11.7063 1.00704 12.1102C0.973285 12.5142 1.06308 12.9189 1.26451 13.2706C1.46594 13.6224 1.76951 13.9047 2.13499 14.08L12.75 19.25L17.9125 29.8587C18.0731 30.2014 18.3283 30.4909 18.6482 30.6932C18.968 30.8954 19.3391 31.0019 19.7175 31C19.775 31 19.8325 30.9975 19.89 30.9925C20.2936 30.9598 20.6776 30.8045 20.9904 30.5473C21.3032 30.2901 21.5299 29.9434 21.64 29.5537L28.915 5.56125C28.915 5.555 28.915 5.54875 28.915 5.5425C29.0129 5.2012 29.0182 4.83999 28.9303 4.49597C28.8425 4.15195 28.6646 3.83753 28.415 3.585ZM19.7287 28.9812L19.7225 28.9987V28.99L14.715 18.7025L20.715 12.7025C20.8946 12.5134 20.9933 12.2617 20.9899 12.0009C20.9866 11.7402 20.8815 11.491 20.6971 11.3066C20.5127 11.1222 20.2636 11.0171 20.0028 11.0138C19.7421 11.0105 19.4903 11.1091 19.3012 11.2887L13.3012 17.2887L3.00999 12.2812H3.00124H3.01874L27 5L19.7287 28.9812Z" fill="#070707"/>
|
|
1737
|
+
</svg>
|
|
1738
|
+
`,
|
|
1739
|
+
'paperplanetilt-fill': `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1740
|
+
<path d="M28.925 5.54251C28.925 5.54251 28.925 5.55501 28.925 5.56126L21.65 29.5538C21.5399 29.9434 21.3132 30.2901 21.0004 30.5473C20.6876 30.8045 20.3036 30.9598 19.9 30.9925C19.8425 30.9975 19.785 31 19.7275 31C19.3492 31.0012 18.9785 30.8941 18.6591 30.6915C18.3398 30.4888 18.085 30.199 17.925 29.8563L13.375 20.5188C13.3295 20.4252 13.3143 20.3197 13.3315 20.2171C13.3488 20.1145 13.3976 20.0198 13.4712 19.9463L20.7112 12.7063C20.8909 12.5172 20.9895 12.2654 20.9862 12.0047C20.9828 11.7439 20.8778 11.4948 20.6934 11.3104C20.509 11.126 20.2598 11.0209 19.9991 11.0176C19.7383 11.0142 19.4866 11.1129 19.2975 11.2925L12.0537 18.5325C11.9802 18.6061 11.8855 18.655 11.7829 18.6722C11.6803 18.6895 11.5748 18.6743 11.4812 18.6288L2.13499 14.08C1.76951 13.9047 1.46594 13.6224 1.26451 13.2706C1.06308 12.9189 0.973285 12.5142 1.00704 12.1103C1.04079 11.7063 1.19649 11.3221 1.45351 11.0087C1.71053 10.6952 2.05673 10.4673 2.44624 10.355L26.4387 3.08001H26.4575C26.7991 2.98404 27.1601 2.98067 27.5034 3.07026C27.8467 3.15985 28.1601 3.33917 28.4112 3.58982C28.6624 3.84046 28.8423 4.15342 28.9326 4.49657C29.0229 4.83972 29.0203 5.20071 28.925 5.54251Z" fill="#070707"/>
|
|
1741
|
+
</svg>
|
|
1726
1742
|
`
|
|
1727
1743
|
};
|
|
1728
1744
|
|
|
@@ -2535,6 +2551,7 @@ class ButtonComponent {
|
|
|
2535
2551
|
fullWidth = input(false);
|
|
2536
2552
|
iconBefore = input();
|
|
2537
2553
|
iconAfter = input();
|
|
2554
|
+
type = input('button');
|
|
2538
2555
|
clicked = output();
|
|
2539
2556
|
handleClick() {
|
|
2540
2557
|
if (!this.loading() && !this.skeletonActive()) {
|
|
@@ -2607,11 +2624,11 @@ class ButtonComponent {
|
|
|
2607
2624
|
}
|
|
2608
2625
|
});
|
|
2609
2626
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2610
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ButtonComponent, isStandalone: true, selector: "lib-button", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, skeletonActive: { classPropertyName: "skeletonActive", publicName: "skeletonActive", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, iconBefore: { classPropertyName: "iconBefore", publicName: "iconBefore", isSignal: true, isRequired: false, transformFunction: null }, iconAfter: { classPropertyName: "iconAfter", publicName: "iconAfter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n type=\"button\"\n [ngClass]=\"classes()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-busy]=\"loading() || skeletonActive() ? 'true' : null\"\n (click)=\"handleClick()\"\n>\n <!-- Icon before -->\n @if (iconBefore() && !loading() && !skeletonActive()) {\n <span class=\"c-button__icon\">\n <lib-icon\n [name]=\"iconBefore()!\"\n [size]=\"iconSize()\"\n [color]=\"iconColor()\"\n iconBefore\n ></lib-icon>\n </span>\n }\n\n <!-- Text -->\n @if (text() && !loading() && !skeletonActive()) {\n <span class=\"c-button__text\">{{ text() }}</span>\n } @if (loading() && !skeletonActive()) {\n <lib-spinner [size]=\"iconSize()\" [color]=\"iconColor()\"></lib-spinner>\n <span class=\"c-button__text\">{{ loadingText() }}</span>\n }\n\n <!-- Icon after -->\n @if (iconAfter() && !loading() && !skeletonActive()) {\n <span class=\"c-button__icon\">\n <lib-icon\n [name]=\"iconAfter()!\"\n [size]=\"iconSize()\"\n [color]=\"iconColor()\"\n iconAfter\n ></lib-icon>\n </span>\n }\n</button>\n", styles: [".c-button{display:inline-flex;align-items:center;gap:var(--space-component-gap-md);cursor:pointer;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);padding:var(--space-component-padding-md) var(--space-component-padding-xl);border-radius:var(--size-button-border-radius);border:var(--size-button-border-width) solid var(--color-button-primary-border-default)}.c-button--skeleton-active{background-color:var(--color-effect-skeleton-soft);border-color:var(--color-button-primary-border-disabled);cursor:progress;height:50px;width:120px}.c-button--skeleton-active.c-button--md{height:42px;width:100px}.c-button--skeleton-active.c-button--sm{height:34px;width:80px}.c-button--skeleton-active.c-button--xs{height:26px;width:60px}.c-button--skeleton-active.c-button--full-width{width:100%}.c-button--loading{cursor:progress}.c-button:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-button:disabled{cursor:not-allowed}.c-button__icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px}.c-button__loading{width:24px;height:24px}.c-button--md{color:var(--color-button-primary-content-default);padding:var(--space-component-padding-sm) var(--space-component-padding-lg)}.c-button--sm{color:var(--color-button-primary-content-default);padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-button--xs{gap:var(--space-component-gap-md);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);line-height:var(--typography-label-sm-strong-line-height);letter-spacing:var(--typography-label-sm-strong-letter-spacing);padding:var(--space-component-padding-2xs) var(--space-component-padding-sm)}.c-button--xs .c-button__icon,.c-button--xs .c-button__loading{width:20px;height:20px}.c-button--primary:not(.c-button--skeleton-active){background-color:var(--color-button-primary-background-default);border-color:var(--color-button-primary-border-default);color:var(--color-button-primary-content-default)}.c-button--primary:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-primary-background-hover);border-color:var(--color-button-primary-border-hover);color:var(--color-button-primary-content-hover)}.c-button--primary:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-primary-background-pressed);border-color:var(--color-button-primary-border-pressed);color:var(--color-button-primary-content-pressed)}.c-button--primary:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-primary-background-disabled);border-color:var(--color-button-primary-border-disabled);color:var(--color-button-primary-content-disabled)}.c-button--secondary:not(.c-button--skeleton-active){background-color:var(--color-button-secondary-background-default);border-color:var(--color-button-secondary-border-default);color:var(--color-button-secondary-content-default)}.c-button--secondary:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-secondary-background-hover);border-color:var(--color-button-secondary-border-hover);color:var(--color-button-secondary-content-hover)}.c-button--secondary:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-secondary-background-pressed);border-color:var(--color-button-secondary-border-pressed);color:var(--color-button-secondary-content-pressed)}.c-button--secondary:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-secondary-background-disabled);border-color:var(--color-button-secondary-border-disabled);color:var(--color-button-secondary-content-disabled)}.c-button--tertiary:not(.c-button--skeleton-active){background-color:var(--color-button-tertiary-background-default);border-color:var(--color-button-tertiary-border-default);color:var(--color-button-tertiary-content-default)}.c-button--tertiary:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-tertiary-background-hover);border-color:var(--color-button-tertiary-border-hover);color:var(--color-button-tertiary-content-hover)}.c-button--tertiary:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-tertiary-background-pressed);border-color:var(--color-button-tertiary-border-pressed);color:var(--color-button-tertiary-content-pressed)}.c-button--tertiary:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-tertiary-background-disabled);border-color:var(--color-button-tertiary-border-disabled);color:var(--color-button-tertiary-content-disabled)}.c-button--neutral:not(.c-button--skeleton-active){background-color:var(--color-button-neutral-background-default);border-color:var(--color-button-neutral-border-default);color:var(--color-button-neutral-content-default)}.c-button--neutral:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-neutral-background-hover);border-color:var(--color-button-neutral-border-hover);color:var(--color-button-neutral-content-hover)}.c-button--neutral:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-neutral-background-pressed);border-color:var(--color-button-neutral-border-pressed);color:var(--color-button-neutral-content-pressed)}.c-button--neutral:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-neutral-background-disabled);border-color:var(--color-button-neutral-border-disabled);color:var(--color-button-neutral-content-disabled)}.c-button--danger:not(.c-button--skeleton-active){background-color:var(--color-button-danger-background-default);border-color:var(--color-button-danger-border-default);color:var(--color-button-danger-content-default)}.c-button--danger:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-danger-background-hover);border-color:var(--color-button-danger-border-hover);color:var(--color-button-danger-content-hover)}.c-button--danger:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-danger-background-pressed);border-color:var(--color-button-danger-border-pressed);color:var(--color-button-danger-content-pressed)}.c-button--danger:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-danger-background-disabled);border-color:var(--color-button-danger-border-disabled);color:var(--color-button-danger-content-disabled)}.c-button--inverse:not(.c-button--skeleton-active){background-color:var(--color-button-inverse-background-default);border-color:var(--color-button-inverse-border-default);color:var(--color-button-inverse-content-default)}.c-button--inverse:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-inverse-background-hover);border-color:var(--color-button-inverse-border-default);color:var(--color-button-inverse-content-hover)}.c-button--inverse:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-inverse-background-pressed);border-color:var(--color-button-inverse-border-pressed);color:var(--color-button-inverse-content-pressed)}.c-button--inverse:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-inverse-background-disabled);border-color:var(--color-button-inverse-border-disabled);color:var(--color-button-inverse-content-disabled)}.c-button--full-width{width:100%;justify-content:center}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }, { kind: "component", type: SpinnerComponent, selector: "lib-spinner", inputs: ["size", "color"] }] });
|
|
2627
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ButtonComponent, isStandalone: true, selector: "lib-button", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, skeletonActive: { classPropertyName: "skeletonActive", publicName: "skeletonActive", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, iconBefore: { classPropertyName: "iconBefore", publicName: "iconBefore", isSignal: true, isRequired: false, transformFunction: null }, iconAfter: { classPropertyName: "iconAfter", publicName: "iconAfter", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n [type]=\"type()\"\n [ngClass]=\"classes()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-busy]=\"loading() || skeletonActive() ? 'true' : null\"\n (click)=\"handleClick()\"\n>\n <!-- Icon before -->\n @if (iconBefore() && !loading() && !skeletonActive()) {\n <span class=\"c-button__icon\">\n <lib-icon\n [name]=\"iconBefore()!\"\n [size]=\"iconSize()\"\n [color]=\"iconColor()\"\n iconBefore\n ></lib-icon>\n </span>\n }\n\n <!-- Text -->\n @if (text() && !loading() && !skeletonActive()) {\n <span class=\"c-button__text\">{{ text() }}</span>\n } @if (loading() && !skeletonActive()) {\n <lib-spinner [size]=\"iconSize()\" [color]=\"iconColor()\"></lib-spinner>\n <span class=\"c-button__text\">{{ loadingText() }}</span>\n }\n\n <!-- Icon after -->\n @if (iconAfter() && !loading() && !skeletonActive()) {\n <span class=\"c-button__icon\">\n <lib-icon\n [name]=\"iconAfter()!\"\n [size]=\"iconSize()\"\n [color]=\"iconColor()\"\n iconAfter\n ></lib-icon>\n </span>\n }\n</button>\n", styles: [".c-button{display:inline-flex;align-items:center;gap:var(--space-component-gap-md);cursor:pointer;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);padding:var(--space-component-padding-md) var(--space-component-padding-xl);border-radius:var(--size-button-border-radius);border:var(--size-button-border-width) solid var(--color-button-primary-border-default)}.c-button--skeleton-active{background-color:var(--color-effect-skeleton-soft);border-color:var(--color-button-primary-border-disabled);cursor:progress;height:50px;width:120px}.c-button--skeleton-active.c-button--md{height:42px;width:100px}.c-button--skeleton-active.c-button--sm{height:34px;width:80px}.c-button--skeleton-active.c-button--xs{height:26px;width:60px}.c-button--skeleton-active.c-button--full-width{width:100%}.c-button--loading{cursor:progress}.c-button:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-button:disabled{cursor:not-allowed}.c-button__icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px}.c-button__loading{width:24px;height:24px}.c-button--md{color:var(--color-button-primary-content-default);padding:var(--space-component-padding-sm) var(--space-component-padding-lg)}.c-button--sm{color:var(--color-button-primary-content-default);padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-button--xs{gap:var(--space-component-gap-md);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);line-height:var(--typography-label-sm-strong-line-height);letter-spacing:var(--typography-label-sm-strong-letter-spacing);padding:var(--space-component-padding-2xs) var(--space-component-padding-sm)}.c-button--xs .c-button__icon,.c-button--xs .c-button__loading{width:20px;height:20px}.c-button--primary:not(.c-button--skeleton-active){background-color:var(--color-button-primary-background-default);border-color:var(--color-button-primary-border-default);color:var(--color-button-primary-content-default)}.c-button--primary:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-primary-background-hover);border-color:var(--color-button-primary-border-hover);color:var(--color-button-primary-content-hover)}.c-button--primary:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-primary-background-pressed);border-color:var(--color-button-primary-border-pressed);color:var(--color-button-primary-content-pressed)}.c-button--primary:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-primary-background-disabled);border-color:var(--color-button-primary-border-disabled);color:var(--color-button-primary-content-disabled)}.c-button--secondary:not(.c-button--skeleton-active){background-color:var(--color-button-secondary-background-default);border-color:var(--color-button-secondary-border-default);color:var(--color-button-secondary-content-default)}.c-button--secondary:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-secondary-background-hover);border-color:var(--color-button-secondary-border-hover);color:var(--color-button-secondary-content-hover)}.c-button--secondary:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-secondary-background-pressed);border-color:var(--color-button-secondary-border-pressed);color:var(--color-button-secondary-content-pressed)}.c-button--secondary:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-secondary-background-disabled);border-color:var(--color-button-secondary-border-disabled);color:var(--color-button-secondary-content-disabled)}.c-button--tertiary:not(.c-button--skeleton-active){background-color:var(--color-button-tertiary-background-default);border-color:var(--color-button-tertiary-border-default);color:var(--color-button-tertiary-content-default)}.c-button--tertiary:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-tertiary-background-hover);border-color:var(--color-button-tertiary-border-hover);color:var(--color-button-tertiary-content-hover)}.c-button--tertiary:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-tertiary-background-pressed);border-color:var(--color-button-tertiary-border-pressed);color:var(--color-button-tertiary-content-pressed)}.c-button--tertiary:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-tertiary-background-disabled);border-color:var(--color-button-tertiary-border-disabled);color:var(--color-button-tertiary-content-disabled)}.c-button--neutral:not(.c-button--skeleton-active){background-color:var(--color-button-neutral-background-default);border-color:var(--color-button-neutral-border-default);color:var(--color-button-neutral-content-default)}.c-button--neutral:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-neutral-background-hover);border-color:var(--color-button-neutral-border-hover);color:var(--color-button-neutral-content-hover)}.c-button--neutral:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-neutral-background-pressed);border-color:var(--color-button-neutral-border-pressed);color:var(--color-button-neutral-content-pressed)}.c-button--neutral:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-neutral-background-disabled);border-color:var(--color-button-neutral-border-disabled);color:var(--color-button-neutral-content-disabled)}.c-button--danger:not(.c-button--skeleton-active){background-color:var(--color-button-danger-background-default);border-color:var(--color-button-danger-border-default);color:var(--color-button-danger-content-default)}.c-button--danger:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-danger-background-hover);border-color:var(--color-button-danger-border-hover);color:var(--color-button-danger-content-hover)}.c-button--danger:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-danger-background-pressed);border-color:var(--color-button-danger-border-pressed);color:var(--color-button-danger-content-pressed)}.c-button--danger:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-danger-background-disabled);border-color:var(--color-button-danger-border-disabled);color:var(--color-button-danger-content-disabled)}.c-button--inverse:not(.c-button--skeleton-active){background-color:var(--color-button-inverse-background-default);border-color:var(--color-button-inverse-border-default);color:var(--color-button-inverse-content-default)}.c-button--inverse:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-inverse-background-hover);border-color:var(--color-button-inverse-border-default);color:var(--color-button-inverse-content-hover)}.c-button--inverse:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-inverse-background-pressed);border-color:var(--color-button-inverse-border-pressed);color:var(--color-button-inverse-content-pressed)}.c-button--inverse:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-inverse-background-disabled);border-color:var(--color-button-inverse-border-disabled);color:var(--color-button-inverse-content-disabled)}.c-button--full-width{width:100%;justify-content:center}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }, { kind: "component", type: SpinnerComponent, selector: "lib-spinner", inputs: ["size", "color"] }] });
|
|
2611
2628
|
}
|
|
2612
2629
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
2613
2630
|
type: Component,
|
|
2614
|
-
args: [{ selector: 'lib-button', imports: [NgClass, IconComponent, SpinnerComponent], template: "<button\n type=\"
|
|
2631
|
+
args: [{ selector: 'lib-button', imports: [NgClass, IconComponent, SpinnerComponent], template: "<button\n [type]=\"type()\"\n [ngClass]=\"classes()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-busy]=\"loading() || skeletonActive() ? 'true' : null\"\n (click)=\"handleClick()\"\n>\n <!-- Icon before -->\n @if (iconBefore() && !loading() && !skeletonActive()) {\n <span class=\"c-button__icon\">\n <lib-icon\n [name]=\"iconBefore()!\"\n [size]=\"iconSize()\"\n [color]=\"iconColor()\"\n iconBefore\n ></lib-icon>\n </span>\n }\n\n <!-- Text -->\n @if (text() && !loading() && !skeletonActive()) {\n <span class=\"c-button__text\">{{ text() }}</span>\n } @if (loading() && !skeletonActive()) {\n <lib-spinner [size]=\"iconSize()\" [color]=\"iconColor()\"></lib-spinner>\n <span class=\"c-button__text\">{{ loadingText() }}</span>\n }\n\n <!-- Icon after -->\n @if (iconAfter() && !loading() && !skeletonActive()) {\n <span class=\"c-button__icon\">\n <lib-icon\n [name]=\"iconAfter()!\"\n [size]=\"iconSize()\"\n [color]=\"iconColor()\"\n iconAfter\n ></lib-icon>\n </span>\n }\n</button>\n", styles: [".c-button{display:inline-flex;align-items:center;gap:var(--space-component-gap-md);cursor:pointer;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);padding:var(--space-component-padding-md) var(--space-component-padding-xl);border-radius:var(--size-button-border-radius);border:var(--size-button-border-width) solid var(--color-button-primary-border-default)}.c-button--skeleton-active{background-color:var(--color-effect-skeleton-soft);border-color:var(--color-button-primary-border-disabled);cursor:progress;height:50px;width:120px}.c-button--skeleton-active.c-button--md{height:42px;width:100px}.c-button--skeleton-active.c-button--sm{height:34px;width:80px}.c-button--skeleton-active.c-button--xs{height:26px;width:60px}.c-button--skeleton-active.c-button--full-width{width:100%}.c-button--loading{cursor:progress}.c-button:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-button:disabled{cursor:not-allowed}.c-button__icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px}.c-button__loading{width:24px;height:24px}.c-button--md{color:var(--color-button-primary-content-default);padding:var(--space-component-padding-sm) var(--space-component-padding-lg)}.c-button--sm{color:var(--color-button-primary-content-default);padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-button--xs{gap:var(--space-component-gap-md);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);line-height:var(--typography-label-sm-strong-line-height);letter-spacing:var(--typography-label-sm-strong-letter-spacing);padding:var(--space-component-padding-2xs) var(--space-component-padding-sm)}.c-button--xs .c-button__icon,.c-button--xs .c-button__loading{width:20px;height:20px}.c-button--primary:not(.c-button--skeleton-active){background-color:var(--color-button-primary-background-default);border-color:var(--color-button-primary-border-default);color:var(--color-button-primary-content-default)}.c-button--primary:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-primary-background-hover);border-color:var(--color-button-primary-border-hover);color:var(--color-button-primary-content-hover)}.c-button--primary:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-primary-background-pressed);border-color:var(--color-button-primary-border-pressed);color:var(--color-button-primary-content-pressed)}.c-button--primary:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-primary-background-disabled);border-color:var(--color-button-primary-border-disabled);color:var(--color-button-primary-content-disabled)}.c-button--secondary:not(.c-button--skeleton-active){background-color:var(--color-button-secondary-background-default);border-color:var(--color-button-secondary-border-default);color:var(--color-button-secondary-content-default)}.c-button--secondary:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-secondary-background-hover);border-color:var(--color-button-secondary-border-hover);color:var(--color-button-secondary-content-hover)}.c-button--secondary:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-secondary-background-pressed);border-color:var(--color-button-secondary-border-pressed);color:var(--color-button-secondary-content-pressed)}.c-button--secondary:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-secondary-background-disabled);border-color:var(--color-button-secondary-border-disabled);color:var(--color-button-secondary-content-disabled)}.c-button--tertiary:not(.c-button--skeleton-active){background-color:var(--color-button-tertiary-background-default);border-color:var(--color-button-tertiary-border-default);color:var(--color-button-tertiary-content-default)}.c-button--tertiary:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-tertiary-background-hover);border-color:var(--color-button-tertiary-border-hover);color:var(--color-button-tertiary-content-hover)}.c-button--tertiary:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-tertiary-background-pressed);border-color:var(--color-button-tertiary-border-pressed);color:var(--color-button-tertiary-content-pressed)}.c-button--tertiary:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-tertiary-background-disabled);border-color:var(--color-button-tertiary-border-disabled);color:var(--color-button-tertiary-content-disabled)}.c-button--neutral:not(.c-button--skeleton-active){background-color:var(--color-button-neutral-background-default);border-color:var(--color-button-neutral-border-default);color:var(--color-button-neutral-content-default)}.c-button--neutral:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-neutral-background-hover);border-color:var(--color-button-neutral-border-hover);color:var(--color-button-neutral-content-hover)}.c-button--neutral:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-neutral-background-pressed);border-color:var(--color-button-neutral-border-pressed);color:var(--color-button-neutral-content-pressed)}.c-button--neutral:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-neutral-background-disabled);border-color:var(--color-button-neutral-border-disabled);color:var(--color-button-neutral-content-disabled)}.c-button--danger:not(.c-button--skeleton-active){background-color:var(--color-button-danger-background-default);border-color:var(--color-button-danger-border-default);color:var(--color-button-danger-content-default)}.c-button--danger:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-danger-background-hover);border-color:var(--color-button-danger-border-hover);color:var(--color-button-danger-content-hover)}.c-button--danger:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-danger-background-pressed);border-color:var(--color-button-danger-border-pressed);color:var(--color-button-danger-content-pressed)}.c-button--danger:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-danger-background-disabled);border-color:var(--color-button-danger-border-disabled);color:var(--color-button-danger-content-disabled)}.c-button--inverse:not(.c-button--skeleton-active){background-color:var(--color-button-inverse-background-default);border-color:var(--color-button-inverse-border-default);color:var(--color-button-inverse-content-default)}.c-button--inverse:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-inverse-background-hover);border-color:var(--color-button-inverse-border-default);color:var(--color-button-inverse-content-hover)}.c-button--inverse:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-inverse-background-pressed);border-color:var(--color-button-inverse-border-pressed);color:var(--color-button-inverse-content-pressed)}.c-button--inverse:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-inverse-background-disabled);border-color:var(--color-button-inverse-border-disabled);color:var(--color-button-inverse-content-disabled)}.c-button--full-width{width:100%;justify-content:center}\n"] }]
|
|
2615
2632
|
}] });
|
|
2616
2633
|
|
|
2617
2634
|
class ButtonSetComponent {
|
|
@@ -2635,7 +2652,7 @@ class ButtonSetComponent {
|
|
|
2635
2652
|
this.tertiaryClick.emit();
|
|
2636
2653
|
}
|
|
2637
2654
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonSetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2638
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: ButtonSetComponent, isStandalone: true, selector: "lib-button-set", inputs: { primaryText: { classPropertyName: "primaryText", publicName: "primaryText", isSignal: true, isRequired: true, transformFunction: null }, secondaryText: { classPropertyName: "secondaryText", publicName: "secondaryText", isSignal: true, isRequired: true, transformFunction: null }, tertiaryText: { classPropertyName: "tertiaryText", publicName: "tertiaryText", isSignal: true, isRequired: true, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { primaryClick: "primaryClick", secondaryClick: "secondaryClick", tertiaryClick: "tertiaryClick" }, ngImport: i0, template: "<div class=\"c-button-set\" [ngClass]=\"alignmentClass\">\n <lib-button\n [text]=\"tertiaryText()\"\n variant=\"tertiary\"\n size=\"lg\"\n [fullWidth]=\"align() === 'stacked'\"\n (click)=\"handleTertiaryClick()\"\n ></lib-button>\n\n <lib-button\n [text]=\"secondaryText()\"\n variant=\"secondary\"\n size=\"lg\"\n [fullWidth]=\"align() === 'stacked'\"\n (click)=\"handleSecondaryClick()\"\n ></lib-button>\n\n <lib-button\n [text]=\"primaryText()\"\n variant=\"primary\"\n size=\"lg\"\n [fullWidth]=\"true\"\n (click)=\"handlePrimaryClick()\"\n ></lib-button>\n</div>\n", styles: [".c-button-set{display:flex;align-items:center;gap:var(--space-container-stack-md)}.c-button-set--right{flex-direction:row}.c-button-set--left{flex-direction:row-reverse}.c-button-set--stacked{align-items:unset;flex-direction:column-reverse;width:100%}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["text", "ariaLabel", "disabled", "loading", "skeletonActive", "variant", "size", "loadingText", "fullWidth", "iconBefore", "iconAfter"], outputs: ["clicked"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
2655
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: ButtonSetComponent, isStandalone: true, selector: "lib-button-set", inputs: { primaryText: { classPropertyName: "primaryText", publicName: "primaryText", isSignal: true, isRequired: true, transformFunction: null }, secondaryText: { classPropertyName: "secondaryText", publicName: "secondaryText", isSignal: true, isRequired: true, transformFunction: null }, tertiaryText: { classPropertyName: "tertiaryText", publicName: "tertiaryText", isSignal: true, isRequired: true, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { primaryClick: "primaryClick", secondaryClick: "secondaryClick", tertiaryClick: "tertiaryClick" }, ngImport: i0, template: "<div class=\"c-button-set\" [ngClass]=\"alignmentClass\">\n <lib-button\n [text]=\"tertiaryText()\"\n variant=\"tertiary\"\n size=\"lg\"\n [fullWidth]=\"align() === 'stacked'\"\n (click)=\"handleTertiaryClick()\"\n ></lib-button>\n\n <lib-button\n [text]=\"secondaryText()\"\n variant=\"secondary\"\n size=\"lg\"\n [fullWidth]=\"align() === 'stacked'\"\n (click)=\"handleSecondaryClick()\"\n ></lib-button>\n\n <lib-button\n [text]=\"primaryText()\"\n variant=\"primary\"\n size=\"lg\"\n [fullWidth]=\"true\"\n (click)=\"handlePrimaryClick()\"\n ></lib-button>\n</div>\n", styles: [".c-button-set{display:flex;align-items:center;gap:var(--space-container-stack-md)}.c-button-set--right{flex-direction:row}.c-button-set--left{flex-direction:row-reverse}.c-button-set--stacked{align-items:unset;flex-direction:column-reverse;width:100%}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["text", "ariaLabel", "disabled", "loading", "skeletonActive", "variant", "size", "loadingText", "fullWidth", "iconBefore", "iconAfter", "type"], outputs: ["clicked"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
2639
2656
|
}
|
|
2640
2657
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonSetComponent, decorators: [{
|
|
2641
2658
|
type: Component,
|
|
@@ -2774,7 +2791,7 @@ class CheckboxComponent {
|
|
|
2774
2791
|
useExisting: forwardRef(() => CheckboxComponent),
|
|
2775
2792
|
multi: true,
|
|
2776
2793
|
},
|
|
2777
|
-
], ngImport: i0, template: "<div [ngClass]=\"classes()\" class=\"c-checkbox\">\n <div class=\"c-checkbox__input-wrapper\">\n <input\n type=\"checkbox\"\n [id]=\"name()\"\n [ngClass]=\"inputClasses()\"\n [checked]=\"isChecked()\"\n [indeterminate]=\"isIndeterminate()\"\n [disabled]=\"isDisabled()\"\n [name]=\"name()\"\n [value]=\"value()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-checked]=\"ariaChecked()\"\n (change)=\"handleChange($event)\"\n (keydown)=\"handleKeyDown($event)\"\n />\n </div>\n @if(isSkeleton()) {\n <div class=\"c-checkbox__label__skeleton\">\n <span></span>\n </div>\n } @else {\n <lib-input-label\n [text]=\"label()\"\n [disabled]=\"disabled()\"\n [required]=\"true\"\n [for]=\"name()\"\n [innerHTML]=\"innerHTML()\"\n ></lib-input-label>\n }\n</div>\n", styles: [".c-checkbox{display:
|
|
2794
|
+
], ngImport: i0, template: "<div [ngClass]=\"classes()\" class=\"c-checkbox\">\n <div class=\"c-checkbox__input-wrapper\">\n <input\n type=\"checkbox\"\n [id]=\"name()\"\n [ngClass]=\"inputClasses()\"\n [checked]=\"isChecked()\"\n [indeterminate]=\"isIndeterminate()\"\n [disabled]=\"isDisabled()\"\n [name]=\"name()\"\n [value]=\"value()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-checked]=\"ariaChecked()\"\n (change)=\"handleChange($event)\"\n (keydown)=\"handleKeyDown($event)\"\n />\n </div>\n @if(isSkeleton()) {\n <div class=\"c-checkbox__label__skeleton\">\n <span></span>\n </div>\n } @else {\n <lib-input-label\n [text]=\"label()\"\n [disabled]=\"disabled()\"\n [required]=\"true\"\n [for]=\"name()\"\n [innerHTML]=\"innerHTML()\"\n ></lib-input-label>\n }\n</div>\n", styles: [".c-checkbox{display:flex;align-items:flex-start;gap:var(--space-component-gap-sm)}.c-checkbox__input-wrapper{height:var(--typography-label-md-default-line-height);display:flex;align-items:center}.c-checkbox__label{cursor:pointer}.c-checkbox__label__skeleton{width:64px;height:24px;display:flex;align-items:center}.c-checkbox__label__skeleton span{width:100%;height:8px;background-color:var(--color-effect-skeleton-default);border-radius:var(--size-border-radius-sm, 4px)}.c-checkbox--skeleton .c-checkbox__label{cursor:default;pointer-events:none}.c-checkbox input[type=checkbox]{-webkit-appearance:none;appearance:none;width:18px;height:18px;border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-default, #929a99);background-color:var(--color-textfield-background-default);border-radius:var(--size-border-radius-sm, 4px);display:grid;place-content:center;cursor:pointer}.c-checkbox input[type=checkbox]:hover{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-hover, #7d8483)}.c-checkbox input[type=checkbox]:not(:disabled):not(.c-checkbox__input--skeleton):focus-visible{box-shadow:var(--focus-outset);outline:none}.c-checkbox input[type=checkbox].c-checkbox__input--error{border-color:var(--color-feedback-danger-default, #ba2f1e)}.c-checkbox input[type=checkbox].c-checkbox__input--error:checked,.c-checkbox input[type=checkbox].c-checkbox__input--error:indeterminate,.c-checkbox input[type=checkbox].c-checkbox__input--error:checked:hover,.c-checkbox input[type=checkbox].c-checkbox__input--error:indeterminate:hover{background-color:var(--color-feedback-danger-default, #ba2f1e);border-color:var(--color-feedback-danger-default, #ba2f1e)}.c-checkbox input[type=checkbox]:checked,.c-checkbox input[type=checkbox]:indeterminate{border-color:var(--color-action-primary-selected-background-default, #217870);background-color:var(--color-action-primary-selected-background-default, #217870)}.c-checkbox input[type=checkbox]:checked:hover,.c-checkbox input[type=checkbox]:indeterminate:hover{background-color:var(--color-action-primary-selected-background-hover, #19625b);border-color:var(--color-action-primary-selected-background-hover, #19625b)}.c-checkbox input[type=checkbox]:disabled{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-disabled, #a6b0af);background:var(--color-textfield-background-disabled, rgba(0, 0, 0, .02));cursor:not-allowed}.c-checkbox input[type=checkbox]:disabled+.c-checkbox__label{pointer-events:none;cursor:not-allowed}.c-checkbox input[type=checkbox]:checked:disabled,.c-checkbox input[type=checkbox]:indeterminate:disabled{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-disabled, #a6b0af);background:var(--color-textfield-background-disabled, rgba(0, 0, 0, .02));cursor:not-allowed}.c-checkbox input[type=checkbox]:checked:before{content:\"\";width:10px;height:10px;transition:.12s transform ease-in-out;box-shadow:inset 1em 1em #fff;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%)}.c-checkbox input[type=checkbox]:indeterminate:before{content:\"\";width:10px;height:10px;transition:.12s transform ease-in-out;box-shadow:inset 1em 1em #fff;clip-path:polygon(0% 38%,100% 38%,100% 62%,0 62%)}.c-checkbox input[type=checkbox]:checked:disabled:before,.c-checkbox input[type=checkbox]:indeterminate:disabled:before{box-shadow:inset 1em 1em #7d8483}.c-checkbox input[type=checkbox].c-checkbox__input--skeleton{border-color:var(--color-effect-skeleton-soft);background-color:var(--color-textfield-background-disabled);cursor:not-allowed;pointer-events:none}.c-checkbox input[type=checkbox].c-checkbox__input--skeleton:before{content:none!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML"] }] });
|
|
2778
2795
|
}
|
|
2779
2796
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
2780
2797
|
type: Component,
|
|
@@ -2784,7 +2801,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
2784
2801
|
useExisting: forwardRef(() => CheckboxComponent),
|
|
2785
2802
|
multi: true,
|
|
2786
2803
|
},
|
|
2787
|
-
], template: "<div [ngClass]=\"classes()\" class=\"c-checkbox\">\n <div class=\"c-checkbox__input-wrapper\">\n <input\n type=\"checkbox\"\n [id]=\"name()\"\n [ngClass]=\"inputClasses()\"\n [checked]=\"isChecked()\"\n [indeterminate]=\"isIndeterminate()\"\n [disabled]=\"isDisabled()\"\n [name]=\"name()\"\n [value]=\"value()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-checked]=\"ariaChecked()\"\n (change)=\"handleChange($event)\"\n (keydown)=\"handleKeyDown($event)\"\n />\n </div>\n @if(isSkeleton()) {\n <div class=\"c-checkbox__label__skeleton\">\n <span></span>\n </div>\n } @else {\n <lib-input-label\n [text]=\"label()\"\n [disabled]=\"disabled()\"\n [required]=\"true\"\n [for]=\"name()\"\n [innerHTML]=\"innerHTML()\"\n ></lib-input-label>\n }\n</div>\n", styles: [".c-checkbox{display:
|
|
2804
|
+
], template: "<div [ngClass]=\"classes()\" class=\"c-checkbox\">\n <div class=\"c-checkbox__input-wrapper\">\n <input\n type=\"checkbox\"\n [id]=\"name()\"\n [ngClass]=\"inputClasses()\"\n [checked]=\"isChecked()\"\n [indeterminate]=\"isIndeterminate()\"\n [disabled]=\"isDisabled()\"\n [name]=\"name()\"\n [value]=\"value()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-checked]=\"ariaChecked()\"\n (change)=\"handleChange($event)\"\n (keydown)=\"handleKeyDown($event)\"\n />\n </div>\n @if(isSkeleton()) {\n <div class=\"c-checkbox__label__skeleton\">\n <span></span>\n </div>\n } @else {\n <lib-input-label\n [text]=\"label()\"\n [disabled]=\"disabled()\"\n [required]=\"true\"\n [for]=\"name()\"\n [innerHTML]=\"innerHTML()\"\n ></lib-input-label>\n }\n</div>\n", styles: [".c-checkbox{display:flex;align-items:flex-start;gap:var(--space-component-gap-sm)}.c-checkbox__input-wrapper{height:var(--typography-label-md-default-line-height);display:flex;align-items:center}.c-checkbox__label{cursor:pointer}.c-checkbox__label__skeleton{width:64px;height:24px;display:flex;align-items:center}.c-checkbox__label__skeleton span{width:100%;height:8px;background-color:var(--color-effect-skeleton-default);border-radius:var(--size-border-radius-sm, 4px)}.c-checkbox--skeleton .c-checkbox__label{cursor:default;pointer-events:none}.c-checkbox input[type=checkbox]{-webkit-appearance:none;appearance:none;width:18px;height:18px;border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-default, #929a99);background-color:var(--color-textfield-background-default);border-radius:var(--size-border-radius-sm, 4px);display:grid;place-content:center;cursor:pointer}.c-checkbox input[type=checkbox]:hover{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-hover, #7d8483)}.c-checkbox input[type=checkbox]:not(:disabled):not(.c-checkbox__input--skeleton):focus-visible{box-shadow:var(--focus-outset);outline:none}.c-checkbox input[type=checkbox].c-checkbox__input--error{border-color:var(--color-feedback-danger-default, #ba2f1e)}.c-checkbox input[type=checkbox].c-checkbox__input--error:checked,.c-checkbox input[type=checkbox].c-checkbox__input--error:indeterminate,.c-checkbox input[type=checkbox].c-checkbox__input--error:checked:hover,.c-checkbox input[type=checkbox].c-checkbox__input--error:indeterminate:hover{background-color:var(--color-feedback-danger-default, #ba2f1e);border-color:var(--color-feedback-danger-default, #ba2f1e)}.c-checkbox input[type=checkbox]:checked,.c-checkbox input[type=checkbox]:indeterminate{border-color:var(--color-action-primary-selected-background-default, #217870);background-color:var(--color-action-primary-selected-background-default, #217870)}.c-checkbox input[type=checkbox]:checked:hover,.c-checkbox input[type=checkbox]:indeterminate:hover{background-color:var(--color-action-primary-selected-background-hover, #19625b);border-color:var(--color-action-primary-selected-background-hover, #19625b)}.c-checkbox input[type=checkbox]:disabled{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-disabled, #a6b0af);background:var(--color-textfield-background-disabled, rgba(0, 0, 0, .02));cursor:not-allowed}.c-checkbox input[type=checkbox]:disabled+.c-checkbox__label{pointer-events:none;cursor:not-allowed}.c-checkbox input[type=checkbox]:checked:disabled,.c-checkbox input[type=checkbox]:indeterminate:disabled{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-disabled, #a6b0af);background:var(--color-textfield-background-disabled, rgba(0, 0, 0, .02));cursor:not-allowed}.c-checkbox input[type=checkbox]:checked:before{content:\"\";width:10px;height:10px;transition:.12s transform ease-in-out;box-shadow:inset 1em 1em #fff;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%)}.c-checkbox input[type=checkbox]:indeterminate:before{content:\"\";width:10px;height:10px;transition:.12s transform ease-in-out;box-shadow:inset 1em 1em #fff;clip-path:polygon(0% 38%,100% 38%,100% 62%,0 62%)}.c-checkbox input[type=checkbox]:checked:disabled:before,.c-checkbox input[type=checkbox]:indeterminate:disabled:before{box-shadow:inset 1em 1em #7d8483}.c-checkbox input[type=checkbox].c-checkbox__input--skeleton{border-color:var(--color-effect-skeleton-soft);background-color:var(--color-textfield-background-disabled);cursor:not-allowed;pointer-events:none}.c-checkbox input[type=checkbox].c-checkbox__input--skeleton:before{content:none!important}\n"] }]
|
|
2788
2805
|
}], ctorParameters: () => [] });
|
|
2789
2806
|
|
|
2790
2807
|
class HelperTextComponent {
|
|
@@ -2957,14 +2974,8 @@ class DropdownComponent {
|
|
|
2957
2974
|
dataSource = input.required();
|
|
2958
2975
|
value = input();
|
|
2959
2976
|
disabled = input(false);
|
|
2977
|
+
scrollBehavior = input('relative');
|
|
2960
2978
|
selectionChange = output();
|
|
2961
|
-
isOpen = signal(false);
|
|
2962
|
-
isClosing = signal(false);
|
|
2963
|
-
selectedOption = signal(null);
|
|
2964
|
-
dropdownId = 'c-dropdown';
|
|
2965
|
-
listboxId = `${this.dropdownId}-listbox`;
|
|
2966
|
-
elementRef = inject(ElementRef);
|
|
2967
|
-
triggerButtonRef;
|
|
2968
2979
|
dropdownButton;
|
|
2969
2980
|
dropdownMenu;
|
|
2970
2981
|
onClickOutside(event) {
|
|
@@ -2985,12 +2996,24 @@ class DropdownComponent {
|
|
|
2985
2996
|
}
|
|
2986
2997
|
}
|
|
2987
2998
|
onWindowScroll() {
|
|
2988
|
-
if (this.isOpen()) {
|
|
2989
|
-
|
|
2990
|
-
this.calculateOptimalPosition();
|
|
2991
|
-
}, 0);
|
|
2999
|
+
if (this.isOpen() && this.scrollBehavior() === 'relative') {
|
|
3000
|
+
this.updateDropdownPosition();
|
|
2992
3001
|
}
|
|
2993
3002
|
}
|
|
3003
|
+
isOpen = signal(false);
|
|
3004
|
+
isClosing = signal(false);
|
|
3005
|
+
selectedOption = signal(null);
|
|
3006
|
+
maxHeight = signal(200);
|
|
3007
|
+
menuLeft = signal(0);
|
|
3008
|
+
menuTop = signal(0);
|
|
3009
|
+
initialScrollX = signal(0);
|
|
3010
|
+
initialScrollY = signal(0);
|
|
3011
|
+
baseLeft = signal(0);
|
|
3012
|
+
baseTop = signal(0);
|
|
3013
|
+
dropdownId = 'c-dropdown';
|
|
3014
|
+
listboxId = `${this.dropdownId}-listbox`;
|
|
3015
|
+
elementRef = inject(ElementRef);
|
|
3016
|
+
triggerButtonRef;
|
|
2994
3017
|
classes = computed(() => {
|
|
2995
3018
|
const c = [
|
|
2996
3019
|
'c-dropdown',
|
|
@@ -3010,9 +3033,6 @@ class DropdownComponent {
|
|
|
3010
3033
|
}
|
|
3011
3034
|
return styles;
|
|
3012
3035
|
});
|
|
3013
|
-
maxHeight = signal(200);
|
|
3014
|
-
menuLeft = signal(0);
|
|
3015
|
-
menuTop = signal(0);
|
|
3016
3036
|
get flatOptions() {
|
|
3017
3037
|
return this.dataSource().type === 'default' ? this.dataSource()?.options || [] : this.dataSource().groups?.flatMap((group) => group.options) || [];
|
|
3018
3038
|
}
|
|
@@ -3175,24 +3195,38 @@ class DropdownComponent {
|
|
|
3175
3195
|
const availableSpace = openUpward ? spaceAbove : spaceBelow;
|
|
3176
3196
|
const idealHeight = this.flatOptions.length * OPTION_HEIGHT + PADDING;
|
|
3177
3197
|
const maxHeight = Math.min(idealHeight, Math.max(MIN_HEIGHT, availableSpace - 20));
|
|
3178
|
-
let left = buttonRect.left
|
|
3179
|
-
let top = buttonRect.bottom +
|
|
3198
|
+
let left = buttonRect.left;
|
|
3199
|
+
let top = buttonRect.bottom + GAP;
|
|
3180
3200
|
if (alignLeft) {
|
|
3181
|
-
left = buttonRect.right
|
|
3201
|
+
left = buttonRect.right - MENU_WIDTH;
|
|
3182
3202
|
}
|
|
3183
3203
|
if (openUpward) {
|
|
3184
|
-
top = buttonRect.top
|
|
3204
|
+
top = buttonRect.top - maxHeight - GAP;
|
|
3185
3205
|
}
|
|
3206
|
+
this.baseLeft.set(left);
|
|
3207
|
+
this.baseTop.set(top);
|
|
3208
|
+
this.initialScrollX.set(scrollX);
|
|
3209
|
+
this.initialScrollY.set(scrollY);
|
|
3186
3210
|
this.maxHeight.set(maxHeight);
|
|
3187
3211
|
this.menuLeft.set(left);
|
|
3188
3212
|
this.menuTop.set(top);
|
|
3189
3213
|
}
|
|
3214
|
+
updateDropdownPosition() {
|
|
3215
|
+
const currentScrollX = window.pageXOffset || document.documentElement.scrollLeft;
|
|
3216
|
+
const currentScrollY = window.pageYOffset || document.documentElement.scrollTop;
|
|
3217
|
+
const scrollDeltaX = currentScrollX - this.initialScrollX();
|
|
3218
|
+
const scrollDeltaY = currentScrollY - this.initialScrollY();
|
|
3219
|
+
const newLeft = this.baseLeft() - scrollDeltaX;
|
|
3220
|
+
const newTop = this.baseTop() - scrollDeltaY;
|
|
3221
|
+
this.menuLeft.set(newLeft);
|
|
3222
|
+
this.menuTop.set(newTop);
|
|
3223
|
+
}
|
|
3190
3224
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3191
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: DropdownComponent, isStandalone: true, selector: "lib-dropdown", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onClickOutside($event)", "window:resize": "onWindowResize()", "window:scroll": "onWindowScroll()" } }, viewQueries: [{ propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, static: true }, { propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true }], ngImport: i0, template: "@if (isOpen() || isClosing()) {\n <div \n #dropdownMenu\n [id]=\"listboxId\"\n class=\"c-dropdown__menu\" \n [ngStyle]=\"menuStyles()\"\n role=\"listbox\"\n [attr.aria-labelledby]=\"dropdownId\"\n >\n\n @switch (dataSource().type) {\n @case ('default') {\n @for (option of dataSource().options; track option.value) {\n <ng-container *ngTemplateOutlet=\"optionTpl; context: { $implicit: option }\"></ng-container>\n }\n }\n\n @case ('group') {\n @for (group of dataSource().groups; track group.header) {\n <div class=\"c-dropdown__group\" role=\"group\" [attr.aria-labelledby]=\"'group-header-' + $index\">\n <div\n role=\"presentation\" \n class=\"c-dropdown__group-header\" \n [id]=\"'group-header-' + $index\"\n [attr.aria-hidden]=\"true\">\n {{ group.header }}\n </div>\n\n @for (option of group.options; track option.value) {\n <ng-container *ngTemplateOutlet=\"optionTpl; context: { $implicit: option }\"></ng-container>\n }\n </div>\n }\n }\n }\n </div>\n}\n\n<ng-template #optionTpl let-option>\n <div\n role=\"option\"\n class=\"c-dropdown__option\"\n [attr.tabindex]=\"option.disabled ? -1 : 0\"\n [attr.aria-selected]=\"isOptionSelected(option)\"\n [attr.aria-disabled]=\"option.disabled\"\n [class.c-dropdown__option--disabled]=\"option.disabled\"\n [class.c-dropdown__option--selected]=\"isOptionSelected(option)\"\n (click)=\"selectOption(option)\"\n (keydown)=\"onOptionKeydown($event, option)\">\n <div class=\"c-dropdown__option-content\">\n @if (option.icon) {\n <lib-icon [name]=\"option.icon\" [size]=\"'lg'\"></lib-icon>\n }\n \n <span class=\"c-dropdown__option-label\">{{ option.label }}</span>\n \n @if (option.detail) {\n <span class=\"c-dropdown__option-detail\">{{ option.detail }}</span>\n }\n </div>\n</div>\n</ng-template>", styles: [".c-dropdown{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--space-component-gap-sm);font-family:var(--typography-body-md-family),sans-serif;font-weight:var(--typography-body-md-weight);font-size:var(--typography-body-md-size);line-height:var(--typography-body-md-line-height);background-color:var(--color-background-primary);border:var(--size-border-width-sm) solid var(--color-border-neutral-default);border-radius:var(--size-border-radius-sm);padding:var(--space-component-padding-sm) var(--space-component-padding-md);min-width:200px;transition:all .2s ease-in-out;box-sizing:border-box}.c-dropdown:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-dropdown:hover:not(.c-dropdown--disabled){border-color:var(--color-border-neutral-hover)}.c-dropdown--disabled{cursor:auto;background-color:var(--color-background-neutral-disabled);border-color:var(--color-border-neutral-disabled);color:var(--color-content-neutral-disabled)}.c-dropdown--open{border-color:var(--color-border-accent-default);box-shadow:0 0 0 1px var(--color-border-accent-default)}.c-dropdown__menu{position:fixed;overflow-y:auto;overflow-x:hidden;z-index:1000;width:320px;padding-top:var(--space-component-padding-sm);padding-bottom:var(--space-component-padding-sm);border-radius:var(--size-textfield-border-radius, 8px);border:var(--size-border-width-sm, 1px) solid var(--color-core-border-soft, #D6E0DF);background:var(--color-core-background-surface-raised, #FFF);box-shadow:0 0 4px 0 var(--color-effect-shadow-soft, rgba(4, 37, 34, .12)),0 2px 4px 0 var(--color-effect-shadow-strong, rgba(4, 37, 34, .16));scroll-behavior:smooth;opacity:0;transform:translateY(-8px) scale(.95);animation:dropdown-enter .2s ease-out forwards;transform-origin:top center}.c-dropdown__menu::-webkit-scrollbar{width:4px;padding:0 var(--space-component-padding-lg)}.c-dropdown__menu::-webkit-scrollbar-track{border-radius:4px;background:transparent}.c-dropdown__menu::-webkit-scrollbar-thumb{border-radius:4px;background:var(--color-core-border-soft)}.c-dropdown__menu::-webkit-scrollbar-thumb:hover{background:var(--color-core-border-default)}.c-dropdown__group{width:100%}.c-dropdown__group-header{display:flex;align-items:center;width:100%;padding:var(--space-component-padding-md) var(--space-component-padding-lg);min-height:calc(48px - var(--space-component-padding-md) * 2);gap:var(--space-component-gap-sm);color:var(--color-core-content-soft);font-family:var(--typography-label-sm-strong-family);font-size:var(--typography-label-sm-strong-size);font-style:normal;font-weight:var(--typography-label-sm-strong-weight);line-height:var(--typography-label-sm-strong-line-height);letter-spacing:var(--typography-label-sm-strong-letter-spacing)}.c-dropdown__option{cursor:pointer;display:flex;align-items:center;font-style:normal;border:none;background-color:transparent;text-align:left;min-height:calc(40px - var(--space-component-padding-sm) * 2);width:calc(100% - var(--space-component-padding-lg) * 2);padding:var(--space-component-padding-sm) var(--space-component-padding-lg);gap:var(--space-component-gap-sm);color:var(--color-core-content-default);transition:background-color .2s ease-in-out}.c-dropdown__option-content{display:flex;align-items:center;gap:var(--space-component-gap-sm)}.c-dropdown__option-label{word-wrap:break-word;overflow-wrap:break-word;white-space:normal;font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-dropdown__option-detail{font-style:normal;color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-dropdown__option:hover{background:var(--color-action-neutral-background-hover)}.c-dropdown__option:focus-visible{outline:none;background:var(--color-action-neutral-background-hover);box-shadow:0 0 0 2px var(--color-effect-focus-color) inset,0 0 0 4px var(--color-effect-focus-contrast) inset}.c-dropdown__option--disabled{pointer-events:none;color:var(--color-
|
|
3225
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: DropdownComponent, isStandalone: true, selector: "lib-dropdown", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onClickOutside($event)", "window:resize": "onWindowResize()", "window:scroll": "onWindowScroll()" } }, viewQueries: [{ propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, static: true }, { propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true }], ngImport: i0, template: "@if (isOpen() || isClosing()) {\n <div \n #dropdownMenu\n [id]=\"listboxId\"\n class=\"c-dropdown__menu\" \n [ngStyle]=\"menuStyles()\"\n role=\"listbox\"\n [attr.aria-labelledby]=\"dropdownId\"\n >\n\n @switch (dataSource().type) {\n @case ('default') {\n @for (option of dataSource().options; track option.value) {\n <ng-container *ngTemplateOutlet=\"optionTpl; context: { $implicit: option }\"></ng-container>\n }\n }\n\n @case ('group') {\n @for (group of dataSource().groups; track group.header) {\n <div class=\"c-dropdown__group\" role=\"group\" [attr.aria-labelledby]=\"'group-header-' + $index\">\n <div\n role=\"presentation\" \n class=\"c-dropdown__group-header\" \n [id]=\"'group-header-' + $index\"\n [attr.aria-hidden]=\"true\">\n {{ group.header }}\n </div>\n\n @for (option of group.options; track option.value) {\n <ng-container *ngTemplateOutlet=\"optionTpl; context: { $implicit: option }\"></ng-container>\n }\n </div>\n }\n }\n }\n </div>\n}\n\n<ng-template #optionTpl let-option>\n <div\n role=\"option\"\n class=\"c-dropdown__option\"\n [attr.tabindex]=\"option.disabled ? -1 : 0\"\n [attr.aria-selected]=\"isOptionSelected(option)\"\n [attr.aria-disabled]=\"option.disabled\"\n [class.c-dropdown__option--disabled]=\"option.disabled\"\n [class.c-dropdown__option--selected]=\"isOptionSelected(option)\"\n (click)=\"selectOption(option)\"\n (keydown)=\"onOptionKeydown($event, option)\">\n <div class=\"c-dropdown__option-content\">\n @if (option.icon) {\n <lib-icon [name]=\"option.icon\" [size]=\"'lg'\" [color]=\"option.disabled ? 'action-neutral-content-disabled' : ''\"></lib-icon>\n }\n \n <span class=\"c-dropdown__option-label\">{{ option.label }}</span>\n \n @if (option.detail) {\n <span class=\"c-dropdown__option-detail\">{{ option.detail }}</span>\n }\n </div>\n</div>\n</ng-template>", styles: [".c-dropdown{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--space-component-gap-sm);font-family:var(--typography-body-md-family),sans-serif;font-weight:var(--typography-body-md-weight);font-size:var(--typography-body-md-size);line-height:var(--typography-body-md-line-height);background-color:var(--color-background-primary);border:var(--size-border-width-sm) solid var(--color-border-neutral-default);border-radius:var(--size-border-radius-sm);padding:var(--space-component-padding-sm) var(--space-component-padding-md);min-width:200px;transition:all .2s ease-in-out;box-sizing:border-box}.c-dropdown:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-dropdown:hover:not(.c-dropdown--disabled){border-color:var(--color-border-neutral-hover)}.c-dropdown--disabled{cursor:auto;background-color:var(--color-background-neutral-disabled);border-color:var(--color-border-neutral-disabled);color:var(--color-content-neutral-disabled)}.c-dropdown--open{border-color:var(--color-border-accent-default);box-shadow:0 0 0 1px var(--color-border-accent-default)}.c-dropdown__menu{position:fixed;overflow-y:auto;overflow-x:hidden;z-index:1000;width:320px;padding-top:var(--space-component-padding-sm);padding-bottom:var(--space-component-padding-sm);border-radius:var(--size-textfield-border-radius, 8px);border:var(--size-border-width-sm, 1px) solid var(--color-core-border-soft, #D6E0DF);background:var(--color-core-background-surface-raised, #FFF);box-shadow:0 0 4px 0 var(--color-effect-shadow-soft, rgba(4, 37, 34, .12)),0 2px 4px 0 var(--color-effect-shadow-strong, rgba(4, 37, 34, .16));scroll-behavior:smooth;opacity:0;transform:translateY(-8px) scale(.95);animation:dropdown-enter .2s ease-out forwards;transform-origin:top center}.c-dropdown__menu::-webkit-scrollbar{width:4px;padding:0 var(--space-component-padding-lg)}.c-dropdown__menu::-webkit-scrollbar-track{border-radius:4px;background:transparent}.c-dropdown__menu::-webkit-scrollbar-thumb{border-radius:4px;background:var(--color-core-border-soft)}.c-dropdown__menu::-webkit-scrollbar-thumb:hover{background:var(--color-core-border-default)}.c-dropdown__group{width:100%}.c-dropdown__group-header{display:flex;align-items:center;width:100%;padding:var(--space-component-padding-md) var(--space-component-padding-lg);min-height:calc(48px - var(--space-component-padding-md) * 2);gap:var(--space-component-gap-sm);color:var(--color-core-content-soft);font-family:var(--typography-label-sm-strong-family);font-size:var(--typography-label-sm-strong-size);font-style:normal;font-weight:var(--typography-label-sm-strong-weight);line-height:var(--typography-label-sm-strong-line-height);letter-spacing:var(--typography-label-sm-strong-letter-spacing)}.c-dropdown__option{cursor:pointer;display:flex;align-items:center;font-style:normal;border:none;background-color:transparent;text-align:left;min-height:calc(40px - var(--space-component-padding-sm) * 2);width:calc(100% - var(--space-component-padding-lg) * 2);padding:var(--space-component-padding-sm) var(--space-component-padding-lg);gap:var(--space-component-gap-sm);color:var(--color-core-content-default);transition:background-color .2s ease-in-out}.c-dropdown__option-content{display:flex;align-items:center;gap:var(--space-component-gap-sm)}.c-dropdown__option-label{word-wrap:break-word;overflow-wrap:break-word;white-space:normal;font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-dropdown__option-detail{font-style:normal;color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-dropdown__option:hover{background:var(--color-action-neutral-background-hover)}.c-dropdown__option:focus-visible{outline:none;background:var(--color-action-neutral-background-hover);box-shadow:0 0 0 2px var(--color-effect-focus-color) inset,0 0 0 4px var(--color-effect-focus-contrast) inset}.c-dropdown__option--disabled{pointer-events:none;color:var(--color-action-neutral-content-disabled)}.c-dropdown__option--disabled:hover{background-color:transparent}@keyframes dropdown-enter{0%{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes dropdown-exit{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-4px) scale(.98)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }] });
|
|
3192
3226
|
}
|
|
3193
3227
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
3194
3228
|
type: Component,
|
|
3195
|
-
args: [{ selector: 'lib-dropdown', imports: [NgTemplateOutlet, NgStyle, IconComponent], template: "@if (isOpen() || isClosing()) {\n <div \n #dropdownMenu\n [id]=\"listboxId\"\n class=\"c-dropdown__menu\" \n [ngStyle]=\"menuStyles()\"\n role=\"listbox\"\n [attr.aria-labelledby]=\"dropdownId\"\n >\n\n @switch (dataSource().type) {\n @case ('default') {\n @for (option of dataSource().options; track option.value) {\n <ng-container *ngTemplateOutlet=\"optionTpl; context: { $implicit: option }\"></ng-container>\n }\n }\n\n @case ('group') {\n @for (group of dataSource().groups; track group.header) {\n <div class=\"c-dropdown__group\" role=\"group\" [attr.aria-labelledby]=\"'group-header-' + $index\">\n <div\n role=\"presentation\" \n class=\"c-dropdown__group-header\" \n [id]=\"'group-header-' + $index\"\n [attr.aria-hidden]=\"true\">\n {{ group.header }}\n </div>\n\n @for (option of group.options; track option.value) {\n <ng-container *ngTemplateOutlet=\"optionTpl; context: { $implicit: option }\"></ng-container>\n }\n </div>\n }\n }\n }\n </div>\n}\n\n<ng-template #optionTpl let-option>\n <div\n role=\"option\"\n class=\"c-dropdown__option\"\n [attr.tabindex]=\"option.disabled ? -1 : 0\"\n [attr.aria-selected]=\"isOptionSelected(option)\"\n [attr.aria-disabled]=\"option.disabled\"\n [class.c-dropdown__option--disabled]=\"option.disabled\"\n [class.c-dropdown__option--selected]=\"isOptionSelected(option)\"\n (click)=\"selectOption(option)\"\n (keydown)=\"onOptionKeydown($event, option)\">\n <div class=\"c-dropdown__option-content\">\n @if (option.icon) {\n <lib-icon [name]=\"option.icon\" [size]=\"'lg'\"></lib-icon>\n }\n \n <span class=\"c-dropdown__option-label\">{{ option.label }}</span>\n \n @if (option.detail) {\n <span class=\"c-dropdown__option-detail\">{{ option.detail }}</span>\n }\n </div>\n</div>\n</ng-template>", styles: [".c-dropdown{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--space-component-gap-sm);font-family:var(--typography-body-md-family),sans-serif;font-weight:var(--typography-body-md-weight);font-size:var(--typography-body-md-size);line-height:var(--typography-body-md-line-height);background-color:var(--color-background-primary);border:var(--size-border-width-sm) solid var(--color-border-neutral-default);border-radius:var(--size-border-radius-sm);padding:var(--space-component-padding-sm) var(--space-component-padding-md);min-width:200px;transition:all .2s ease-in-out;box-sizing:border-box}.c-dropdown:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-dropdown:hover:not(.c-dropdown--disabled){border-color:var(--color-border-neutral-hover)}.c-dropdown--disabled{cursor:auto;background-color:var(--color-background-neutral-disabled);border-color:var(--color-border-neutral-disabled);color:var(--color-content-neutral-disabled)}.c-dropdown--open{border-color:var(--color-border-accent-default);box-shadow:0 0 0 1px var(--color-border-accent-default)}.c-dropdown__menu{position:fixed;overflow-y:auto;overflow-x:hidden;z-index:1000;width:320px;padding-top:var(--space-component-padding-sm);padding-bottom:var(--space-component-padding-sm);border-radius:var(--size-textfield-border-radius, 8px);border:var(--size-border-width-sm, 1px) solid var(--color-core-border-soft, #D6E0DF);background:var(--color-core-background-surface-raised, #FFF);box-shadow:0 0 4px 0 var(--color-effect-shadow-soft, rgba(4, 37, 34, .12)),0 2px 4px 0 var(--color-effect-shadow-strong, rgba(4, 37, 34, .16));scroll-behavior:smooth;opacity:0;transform:translateY(-8px) scale(.95);animation:dropdown-enter .2s ease-out forwards;transform-origin:top center}.c-dropdown__menu::-webkit-scrollbar{width:4px;padding:0 var(--space-component-padding-lg)}.c-dropdown__menu::-webkit-scrollbar-track{border-radius:4px;background:transparent}.c-dropdown__menu::-webkit-scrollbar-thumb{border-radius:4px;background:var(--color-core-border-soft)}.c-dropdown__menu::-webkit-scrollbar-thumb:hover{background:var(--color-core-border-default)}.c-dropdown__group{width:100%}.c-dropdown__group-header{display:flex;align-items:center;width:100%;padding:var(--space-component-padding-md) var(--space-component-padding-lg);min-height:calc(48px - var(--space-component-padding-md) * 2);gap:var(--space-component-gap-sm);color:var(--color-core-content-soft);font-family:var(--typography-label-sm-strong-family);font-size:var(--typography-label-sm-strong-size);font-style:normal;font-weight:var(--typography-label-sm-strong-weight);line-height:var(--typography-label-sm-strong-line-height);letter-spacing:var(--typography-label-sm-strong-letter-spacing)}.c-dropdown__option{cursor:pointer;display:flex;align-items:center;font-style:normal;border:none;background-color:transparent;text-align:left;min-height:calc(40px - var(--space-component-padding-sm) * 2);width:calc(100% - var(--space-component-padding-lg) * 2);padding:var(--space-component-padding-sm) var(--space-component-padding-lg);gap:var(--space-component-gap-sm);color:var(--color-core-content-default);transition:background-color .2s ease-in-out}.c-dropdown__option-content{display:flex;align-items:center;gap:var(--space-component-gap-sm)}.c-dropdown__option-label{word-wrap:break-word;overflow-wrap:break-word;white-space:normal;font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-dropdown__option-detail{font-style:normal;color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-dropdown__option:hover{background:var(--color-action-neutral-background-hover)}.c-dropdown__option:focus-visible{outline:none;background:var(--color-action-neutral-background-hover);box-shadow:0 0 0 2px var(--color-effect-focus-color) inset,0 0 0 4px var(--color-effect-focus-contrast) inset}.c-dropdown__option--disabled{pointer-events:none;color:var(--color-
|
|
3229
|
+
args: [{ selector: 'lib-dropdown', imports: [NgTemplateOutlet, NgStyle, IconComponent], template: "@if (isOpen() || isClosing()) {\n <div \n #dropdownMenu\n [id]=\"listboxId\"\n class=\"c-dropdown__menu\" \n [ngStyle]=\"menuStyles()\"\n role=\"listbox\"\n [attr.aria-labelledby]=\"dropdownId\"\n >\n\n @switch (dataSource().type) {\n @case ('default') {\n @for (option of dataSource().options; track option.value) {\n <ng-container *ngTemplateOutlet=\"optionTpl; context: { $implicit: option }\"></ng-container>\n }\n }\n\n @case ('group') {\n @for (group of dataSource().groups; track group.header) {\n <div class=\"c-dropdown__group\" role=\"group\" [attr.aria-labelledby]=\"'group-header-' + $index\">\n <div\n role=\"presentation\" \n class=\"c-dropdown__group-header\" \n [id]=\"'group-header-' + $index\"\n [attr.aria-hidden]=\"true\">\n {{ group.header }}\n </div>\n\n @for (option of group.options; track option.value) {\n <ng-container *ngTemplateOutlet=\"optionTpl; context: { $implicit: option }\"></ng-container>\n }\n </div>\n }\n }\n }\n </div>\n}\n\n<ng-template #optionTpl let-option>\n <div\n role=\"option\"\n class=\"c-dropdown__option\"\n [attr.tabindex]=\"option.disabled ? -1 : 0\"\n [attr.aria-selected]=\"isOptionSelected(option)\"\n [attr.aria-disabled]=\"option.disabled\"\n [class.c-dropdown__option--disabled]=\"option.disabled\"\n [class.c-dropdown__option--selected]=\"isOptionSelected(option)\"\n (click)=\"selectOption(option)\"\n (keydown)=\"onOptionKeydown($event, option)\">\n <div class=\"c-dropdown__option-content\">\n @if (option.icon) {\n <lib-icon [name]=\"option.icon\" [size]=\"'lg'\" [color]=\"option.disabled ? 'action-neutral-content-disabled' : ''\"></lib-icon>\n }\n \n <span class=\"c-dropdown__option-label\">{{ option.label }}</span>\n \n @if (option.detail) {\n <span class=\"c-dropdown__option-detail\">{{ option.detail }}</span>\n }\n </div>\n</div>\n</ng-template>", styles: [".c-dropdown{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--space-component-gap-sm);font-family:var(--typography-body-md-family),sans-serif;font-weight:var(--typography-body-md-weight);font-size:var(--typography-body-md-size);line-height:var(--typography-body-md-line-height);background-color:var(--color-background-primary);border:var(--size-border-width-sm) solid var(--color-border-neutral-default);border-radius:var(--size-border-radius-sm);padding:var(--space-component-padding-sm) var(--space-component-padding-md);min-width:200px;transition:all .2s ease-in-out;box-sizing:border-box}.c-dropdown:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-dropdown:hover:not(.c-dropdown--disabled){border-color:var(--color-border-neutral-hover)}.c-dropdown--disabled{cursor:auto;background-color:var(--color-background-neutral-disabled);border-color:var(--color-border-neutral-disabled);color:var(--color-content-neutral-disabled)}.c-dropdown--open{border-color:var(--color-border-accent-default);box-shadow:0 0 0 1px var(--color-border-accent-default)}.c-dropdown__menu{position:fixed;overflow-y:auto;overflow-x:hidden;z-index:1000;width:320px;padding-top:var(--space-component-padding-sm);padding-bottom:var(--space-component-padding-sm);border-radius:var(--size-textfield-border-radius, 8px);border:var(--size-border-width-sm, 1px) solid var(--color-core-border-soft, #D6E0DF);background:var(--color-core-background-surface-raised, #FFF);box-shadow:0 0 4px 0 var(--color-effect-shadow-soft, rgba(4, 37, 34, .12)),0 2px 4px 0 var(--color-effect-shadow-strong, rgba(4, 37, 34, .16));scroll-behavior:smooth;opacity:0;transform:translateY(-8px) scale(.95);animation:dropdown-enter .2s ease-out forwards;transform-origin:top center}.c-dropdown__menu::-webkit-scrollbar{width:4px;padding:0 var(--space-component-padding-lg)}.c-dropdown__menu::-webkit-scrollbar-track{border-radius:4px;background:transparent}.c-dropdown__menu::-webkit-scrollbar-thumb{border-radius:4px;background:var(--color-core-border-soft)}.c-dropdown__menu::-webkit-scrollbar-thumb:hover{background:var(--color-core-border-default)}.c-dropdown__group{width:100%}.c-dropdown__group-header{display:flex;align-items:center;width:100%;padding:var(--space-component-padding-md) var(--space-component-padding-lg);min-height:calc(48px - var(--space-component-padding-md) * 2);gap:var(--space-component-gap-sm);color:var(--color-core-content-soft);font-family:var(--typography-label-sm-strong-family);font-size:var(--typography-label-sm-strong-size);font-style:normal;font-weight:var(--typography-label-sm-strong-weight);line-height:var(--typography-label-sm-strong-line-height);letter-spacing:var(--typography-label-sm-strong-letter-spacing)}.c-dropdown__option{cursor:pointer;display:flex;align-items:center;font-style:normal;border:none;background-color:transparent;text-align:left;min-height:calc(40px - var(--space-component-padding-sm) * 2);width:calc(100% - var(--space-component-padding-lg) * 2);padding:var(--space-component-padding-sm) var(--space-component-padding-lg);gap:var(--space-component-gap-sm);color:var(--color-core-content-default);transition:background-color .2s ease-in-out}.c-dropdown__option-content{display:flex;align-items:center;gap:var(--space-component-gap-sm)}.c-dropdown__option-label{word-wrap:break-word;overflow-wrap:break-word;white-space:normal;font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-dropdown__option-detail{font-style:normal;color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-dropdown__option:hover{background:var(--color-action-neutral-background-hover)}.c-dropdown__option:focus-visible{outline:none;background:var(--color-action-neutral-background-hover);box-shadow:0 0 0 2px var(--color-effect-focus-color) inset,0 0 0 4px var(--color-effect-focus-contrast) inset}.c-dropdown__option--disabled{pointer-events:none;color:var(--color-action-neutral-content-disabled)}.c-dropdown__option--disabled:hover{background-color:transparent}@keyframes dropdown-enter{0%{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes dropdown-exit{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-4px) scale(.98)}}\n"] }]
|
|
3196
3230
|
}], ctorParameters: () => [], propDecorators: { dropdownButton: [{
|
|
3197
3231
|
type: ViewChild,
|
|
3198
3232
|
args: ['dropdownButton', { static: true }]
|
|
@@ -4719,6 +4753,7 @@ class TextInputComponent {
|
|
|
4719
4753
|
type = 'text';
|
|
4720
4754
|
size = 'md';
|
|
4721
4755
|
fullWidth = false;
|
|
4756
|
+
autocomplete = 'off';
|
|
4722
4757
|
emitValue = new EventEmitter();
|
|
4723
4758
|
_value = '';
|
|
4724
4759
|
onChangeFn = () => { };
|
|
@@ -4764,13 +4799,13 @@ class TextInputComponent {
|
|
|
4764
4799
|
this.onTouchedFn();
|
|
4765
4800
|
}
|
|
4766
4801
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4767
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TextInputComponent, isStandalone: true, selector: "lib-text-input", inputs: { label: "label", name: "name", placeholder: "placeholder", helperText: "helperText", error: "error", success: "success", successText: "successText", alertText: "alertText", disabled: "disabled", readonly: "readonly", required: "required", type: "type", size: "size", fullWidth: "fullWidth" }, outputs: { emitValue: "emitValue" }, providers: [
|
|
4802
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TextInputComponent, isStandalone: true, selector: "lib-text-input", inputs: { label: "label", name: "name", placeholder: "placeholder", helperText: "helperText", error: "error", success: "success", successText: "successText", alertText: "alertText", disabled: "disabled", readonly: "readonly", required: "required", type: "type", size: "size", fullWidth: "fullWidth", autocomplete: "autocomplete" }, outputs: { emitValue: "emitValue" }, providers: [
|
|
4768
4803
|
{
|
|
4769
4804
|
provide: NG_VALUE_ACCESSOR,
|
|
4770
4805
|
useExisting: forwardRef(() => TextInputComponent),
|
|
4771
4806
|
multi: true,
|
|
4772
4807
|
},
|
|
4773
|
-
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [for]=\"name\"\n [text]=\"label\"\n ></lib-input-label>\n\n <input\n autocomplete=\"
|
|
4808
|
+
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [for]=\"name\"\n [text]=\"label\"\n ></lib-input-label>\n\n <input\n [attr.autocomplete]=\"autocomplete\"\n [id]=\"name\"\n [name]=\"name\"\n [type]=\"type\"\n [class]=\"inputClass.join(' ')\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"_value\"\n [required]=\"required\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-label]=\"name\"\n [attr.aria-labelledby]=\"name\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"text-input-helper\"\n class=\"c-text-input__helper\"\n [class]=\"helperClass\"\n >\n {{ helperText }}\n </span>\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-icon\n name=\"warning-regular\"\n color=\"feedback-danger-default\"\n size=\"md\"\n ></lib-icon\n >{{ alertText }}\n </span>\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-icon\n name=\"checkcircle-regular\"\n color=\"feedback-success-default\"\n size=\"md\"\n ></lib-icon\n >{{ successText }}\n </span>\n</div>\n", styles: [".c-text-input{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-md) var(--space-component-padding-lg);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-md)}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }] });
|
|
4774
4809
|
}
|
|
4775
4810
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextInputComponent, decorators: [{
|
|
4776
4811
|
type: Component,
|
|
@@ -4785,7 +4820,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
4785
4820
|
useExisting: forwardRef(() => TextInputComponent),
|
|
4786
4821
|
multi: true,
|
|
4787
4822
|
},
|
|
4788
|
-
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [for]=\"name\"\n [text]=\"label\"\n ></lib-input-label>\n\n <input\n autocomplete=\"
|
|
4823
|
+
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [for]=\"name\"\n [text]=\"label\"\n ></lib-input-label>\n\n <input\n [attr.autocomplete]=\"autocomplete\"\n [id]=\"name\"\n [name]=\"name\"\n [type]=\"type\"\n [class]=\"inputClass.join(' ')\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"_value\"\n [required]=\"required\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-label]=\"name\"\n [attr.aria-labelledby]=\"name\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"text-input-helper\"\n class=\"c-text-input__helper\"\n [class]=\"helperClass\"\n >\n {{ helperText }}\n </span>\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-icon\n name=\"warning-regular\"\n color=\"feedback-danger-default\"\n size=\"md\"\n ></lib-icon\n >{{ alertText }}\n </span>\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-icon\n name=\"checkcircle-regular\"\n color=\"feedback-success-default\"\n size=\"md\"\n ></lib-icon\n >{{ successText }}\n </span>\n</div>\n", styles: [".c-text-input{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-md) var(--space-component-padding-lg);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-md)}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}\n"] }]
|
|
4789
4824
|
}], propDecorators: { label: [{
|
|
4790
4825
|
type: Input
|
|
4791
4826
|
}], name: [{
|
|
@@ -4814,6 +4849,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
4814
4849
|
type: Input
|
|
4815
4850
|
}], fullWidth: [{
|
|
4816
4851
|
type: Input
|
|
4852
|
+
}], autocomplete: [{
|
|
4853
|
+
type: Input
|
|
4817
4854
|
}], emitValue: [{
|
|
4818
4855
|
type: Output
|
|
4819
4856
|
}] } });
|
|
@@ -5338,7 +5375,7 @@ class ModalComponent {
|
|
|
5338
5375
|
}
|
|
5339
5376
|
}
|
|
5340
5377
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5341
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ModalComponent, isStandalone: true, selector: "lib-modal", viewQueries: [{ propertyName: "modalContentRef", first: true, predicate: ["modalContent"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isModalOpen()) {\n<div class=\"c-modal\" [ngClass]=\"getClasses()\">\n <!-- Backdrop -->\n <div\n class=\"c-modal__backdrop\"\n [ngClass]=\"getBackdropClasses()\"\n (click)=\"onBackdropClick()\"\n (keydown.escape)=\"onEscapeKey()\"\n tabindex=\"0\"\n role=\"button\"\n aria-label=\"Close modal\"\n ></div>\n\n <!-- Modal Content -->\n <div\n class=\"c-modal__content\"\n [ngClass]=\"getContentClasses()\"\n (keydown.escape)=\"onEscapeKey()\"\n role=\"dialog\"\n tabindex=\"-1\"\n [attr.aria-labelledby]=\"getTitle() ? 'modal-title' : null\"\n [attr.aria-describedby]=\"getDescription() ? 'modal-description' : null\"\n >\n <!-- Header -->\n @if (getTitle() || getShowCloseButton()) {\n <div class=\"c-modal__content__header\">\n <div class=\"c-modal__content__header__left\">\n @if (getTitle()) {\n <p id=\"modal-title\" class=\"c-modal__content__header__title\">\n {{ getTitle() }}\n </p>\n }\n </div>\n @if (getShowCloseButton()) {\n <div class=\"c-modal__content__header__right\">\n <lib-button-icon\n iconName=\"x-regular\"\n size=\"sm\"\n variant=\"neutral\"\n (click)=\"onCloseButtonClick()\"\n aria-label=\"Close modal\"\n ></lib-button-icon>\n </div>\n }\n </div>\n }\n\n <!-- Description -->\n <div class=\"c-modal__content__body\">\n @if (getDescription()) {\n <div id=\"modal-description\" class=\"c-modal__content__body__description\">\n <p>{{ getDescription() }}</p>\n </div>\n }\n\n <!-- Body Content -->\n <div #modalContent class=\"c-modal__content__body__content\">\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- Footer with Buttons -->\n @if (getPrimaryButton() || getSecondaryButton()) {\n <div class=\"c-modal__content__footer\">\n @if (getSecondaryButton()) {\n <lib-button\n class=\"c-modal__content__footer__button secondary\"\n [text]=\"getSecondaryButton()!.text\"\n [variant]=\"getSecondaryButton()!.variant\"\n [disabled]=\"getSecondaryButton()!.disabled ?? false\"\n [loading]=\"getSecondaryButton()!.loading ?? false\"\n [fullWidth]=\"true\"\n (clicked)=\"onSecondaryButtonClick()\"\n ></lib-button>\n } @if (getPrimaryButton()) {\n <lib-button\n class=\"c-modal__content__footer__button primary\"\n [text]=\"getPrimaryButton()!.text\"\n [variant]=\"getPrimaryButton()!.variant\"\n [disabled]=\"getPrimaryButton()!.disabled ?? false\"\n [loading]=\"getPrimaryButton()!.loading ?? false\"\n [fullWidth]=\"true\"\n (clicked)=\"onPrimaryButtonClick()\"\n ></lib-button>\n }\n </div>\n }\n </div>\n</div>\n}\n", styles: [".c-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:100;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.c-modal--open{opacity:1;visibility:visible}.c-modal__content{background-color:var(--color-core-background-surface-floating);box-shadow:var(--elevation-floating);overflow:hidden;display:flex;flex-direction:column;width:100%}.c-modal__content--open{transform:scale(1)}.c-modal__content--sm{max-width:416px}.c-modal__content--md{max-width:636px}.c-modal__content--lg{max-width:856px}.c-modal__content__header{display:flex;align-items:center;padding:var(--space-container-padding-sm);border-bottom:1px solid var(--color-core-border-soft);gap:var(--space-container-gap-sm)}.c-modal__content__header__right{flex:1;display:flex;justify-content:flex-end}.c-modal__content__header__title{margin:0;font-family:var(--typography-label-lg-default-family),sans-serif;font-weight:var(--typography-label-lg-default-weight);font-size:var(--typography-label-lg-default-size);line-height:var(--typography-label-lg-default-line-height);letter-spacing:var(--typography-label-lg-default-letter-spacing);color:var(--color-core-content-default)}.c-modal__content__body{display:flex;flex-direction:column;flex:1;gap:var(--space-container-gap-md);padding:var(--space-container-padding-sm)}.c-modal__content__body__description p{margin:0;color:var(--color-core-content-soft);font-family:var(--typography-body-md-family),sans-serif;font-weight:var(--typography-body-md-weight);font-size:var(--typography-body-md-size);line-height:var(--typography-body-md-line-height);letter-spacing:var(--typography-body-md-letter-spacing)}.c-modal__content__body__content{overflow-y:auto}.c-modal__content--sm .c-modal__content__body__content{max-height:200px}.c-modal__content--md .c-modal__content__body__content{min-height:200px;max-height:600px}.c-modal__content--lg .c-modal__content__body__content{min-height:600px;max-height:800px}.c-modal__content__footer{display:flex;justify-content:flex-end;gap:var(--space-component-gap-md);padding:var(--space-container-padding-sm);border-top:1px solid var(--color-core-border-soft)}@media (max-width: 768px){.c-modal__content__footer{flex-direction:column;gap:var(--space-component-gap-md)}}@media (max-width: 768px){.c-modal__content__footer__button{width:100%}}.c-modal__content__footer__button.primary{order:2}.c-modal__content__footer__button.secondary{order:1}.c-modal__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out}.c-modal__backdrop--open{opacity:1}@media (max-width: 768px){.c-modal{align-items:flex-end}.c-modal--sm .c-modal__content,.c-modal--md .c-modal__content{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;transform:translateY(100%);transition:transform .3s ease-in-out}.c-modal--sm.c-modal--open .c-modal__content,.c-modal--md.c-modal--open .c-modal__content{transform:translateY(0)}.c-modal--lg{align-items:stretch}.c-modal--lg .c-modal__content{position:fixed;inset:0;width:100%;height:100%;max-width:none;border-radius:0;transform:scale(.95);transition:transform .3s ease-in-out}.c-modal--lg.c-modal--open .c-modal__content{transform:scale(1)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["text", "ariaLabel", "disabled", "loading", "skeletonActive", "variant", "size", "loadingText", "fullWidth", "iconBefore", "iconAfter"], outputs: ["clicked"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }] });
|
|
5378
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ModalComponent, isStandalone: true, selector: "lib-modal", viewQueries: [{ propertyName: "modalContentRef", first: true, predicate: ["modalContent"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isModalOpen()) {\n<div class=\"c-modal\" [ngClass]=\"getClasses()\">\n <!-- Backdrop -->\n <div\n class=\"c-modal__backdrop\"\n [ngClass]=\"getBackdropClasses()\"\n (click)=\"onBackdropClick()\"\n (keydown.escape)=\"onEscapeKey()\"\n tabindex=\"0\"\n role=\"button\"\n aria-label=\"Close modal\"\n ></div>\n\n <!-- Modal Content -->\n <div\n class=\"c-modal__content\"\n [ngClass]=\"getContentClasses()\"\n (keydown.escape)=\"onEscapeKey()\"\n role=\"dialog\"\n tabindex=\"-1\"\n [attr.aria-labelledby]=\"getTitle() ? 'modal-title' : null\"\n [attr.aria-describedby]=\"getDescription() ? 'modal-description' : null\"\n >\n <!-- Header -->\n @if (getTitle() || getShowCloseButton()) {\n <div class=\"c-modal__content__header\">\n <div class=\"c-modal__content__header__left\">\n @if (getTitle()) {\n <p id=\"modal-title\" class=\"c-modal__content__header__title\">\n {{ getTitle() }}\n </p>\n }\n </div>\n @if (getShowCloseButton()) {\n <div class=\"c-modal__content__header__right\">\n <lib-button-icon\n iconName=\"x-regular\"\n size=\"sm\"\n variant=\"neutral\"\n (click)=\"onCloseButtonClick()\"\n aria-label=\"Close modal\"\n ></lib-button-icon>\n </div>\n }\n </div>\n }\n\n <!-- Description -->\n <div class=\"c-modal__content__body\">\n @if (getDescription()) {\n <div id=\"modal-description\" class=\"c-modal__content__body__description\">\n <p>{{ getDescription() }}</p>\n </div>\n }\n\n <!-- Body Content -->\n <div #modalContent class=\"c-modal__content__body__content\">\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- Footer with Buttons -->\n @if (getPrimaryButton() || getSecondaryButton()) {\n <div class=\"c-modal__content__footer\">\n @if (getSecondaryButton()) {\n <lib-button\n class=\"c-modal__content__footer__button secondary\"\n [text]=\"getSecondaryButton()!.text\"\n [variant]=\"getSecondaryButton()!.variant\"\n [disabled]=\"getSecondaryButton()!.disabled ?? false\"\n [loading]=\"getSecondaryButton()!.loading ?? false\"\n [fullWidth]=\"true\"\n (clicked)=\"onSecondaryButtonClick()\"\n ></lib-button>\n } @if (getPrimaryButton()) {\n <lib-button\n class=\"c-modal__content__footer__button primary\"\n [text]=\"getPrimaryButton()!.text\"\n [variant]=\"getPrimaryButton()!.variant\"\n [disabled]=\"getPrimaryButton()!.disabled ?? false\"\n [loading]=\"getPrimaryButton()!.loading ?? false\"\n [fullWidth]=\"true\"\n (clicked)=\"onPrimaryButtonClick()\"\n ></lib-button>\n }\n </div>\n }\n </div>\n</div>\n}\n", styles: [".c-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:100;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.c-modal--open{opacity:1;visibility:visible}.c-modal__content{background-color:var(--color-core-background-surface-floating);box-shadow:var(--elevation-floating);overflow:hidden;display:flex;flex-direction:column;width:100%}.c-modal__content--open{transform:scale(1)}.c-modal__content--sm{max-width:416px}.c-modal__content--md{max-width:636px}.c-modal__content--lg{max-width:856px}.c-modal__content__header{display:flex;align-items:center;padding:var(--space-container-padding-sm);border-bottom:1px solid var(--color-core-border-soft);gap:var(--space-container-gap-sm)}.c-modal__content__header__right{flex:1;display:flex;justify-content:flex-end}.c-modal__content__header__title{margin:0;font-family:var(--typography-label-lg-default-family),sans-serif;font-weight:var(--typography-label-lg-default-weight);font-size:var(--typography-label-lg-default-size);line-height:var(--typography-label-lg-default-line-height);letter-spacing:var(--typography-label-lg-default-letter-spacing);color:var(--color-core-content-default)}.c-modal__content__body{display:flex;flex-direction:column;flex:1;gap:var(--space-container-gap-md);padding:var(--space-container-padding-sm)}.c-modal__content__body__description p{margin:0;color:var(--color-core-content-soft);font-family:var(--typography-body-md-family),sans-serif;font-weight:var(--typography-body-md-weight);font-size:var(--typography-body-md-size);line-height:var(--typography-body-md-line-height);letter-spacing:var(--typography-body-md-letter-spacing)}.c-modal__content__body__content{overflow-y:auto}.c-modal__content--sm .c-modal__content__body__content{max-height:200px}.c-modal__content--md .c-modal__content__body__content{min-height:200px;max-height:600px}.c-modal__content--lg .c-modal__content__body__content{min-height:600px;max-height:800px}.c-modal__content__footer{display:flex;justify-content:flex-end;gap:var(--space-component-gap-md);padding:var(--space-container-padding-sm);border-top:1px solid var(--color-core-border-soft)}@media (max-width: 768px){.c-modal__content__footer{flex-direction:column;gap:var(--space-component-gap-md)}}@media (max-width: 768px){.c-modal__content__footer__button{width:100%}}.c-modal__content__footer__button.primary{order:2}.c-modal__content__footer__button.secondary{order:1}.c-modal__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out}.c-modal__backdrop--open{opacity:1}@media (max-width: 768px){.c-modal{align-items:flex-end}.c-modal--sm .c-modal__content,.c-modal--md .c-modal__content{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;transform:translateY(100%);transition:transform .3s ease-in-out}.c-modal--sm.c-modal--open .c-modal__content,.c-modal--md.c-modal--open .c-modal__content{transform:translateY(0)}.c-modal--lg{align-items:stretch}.c-modal--lg .c-modal__content{position:fixed;inset:0;width:100%;height:100%;max-width:none;border-radius:0;transform:scale(.95);transition:transform .3s ease-in-out}.c-modal--lg.c-modal--open .c-modal__content{transform:scale(1)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["text", "ariaLabel", "disabled", "loading", "skeletonActive", "variant", "size", "loadingText", "fullWidth", "iconBefore", "iconAfter", "type"], outputs: ["clicked"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }] });
|
|
5342
5379
|
}
|
|
5343
5380
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ModalComponent, decorators: [{
|
|
5344
5381
|
type: Component,
|