@crowdfarming/oliva-ds 1.48.0 → 1.49.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/crowdfarming-oliva-ds.mjs +13 -8
- package/fesm2022/crowdfarming-oliva-ds.mjs.map +1 -1
- package/lib/input-upload/src/lib/input-upload/input-upload.component.d.ts +1 -0
- package/lib/link/src/lib/link/link.component.d.ts +3 -1
- package/lib/link-action/src/lib/link-action/link-action.component.d.ts +3 -1
- package/package.json +1 -1
|
@@ -3841,6 +3841,7 @@ class LinkActionComponent {
|
|
|
3841
3841
|
variant = input('primary');
|
|
3842
3842
|
size = input('md');
|
|
3843
3843
|
weight = input('regular');
|
|
3844
|
+
underline = input(false);
|
|
3844
3845
|
iconBefore = input();
|
|
3845
3846
|
iconAfter = input();
|
|
3846
3847
|
// --- Output Events ---
|
|
@@ -3854,6 +3855,7 @@ class LinkActionComponent {
|
|
|
3854
3855
|
variantClass = computed(() => `c-link-action--${this.variant()}`);
|
|
3855
3856
|
sizeClass = computed(() => this.size() !== 'md' ? `c-link-action--${this.size()}` : '');
|
|
3856
3857
|
weightClass = computed(() => this.weight() !== 'regular' ? `c-link-action--${this.weight()}` : '');
|
|
3858
|
+
underlineClass = computed(() => this.underline() ? 'c-link-action--underline' : '');
|
|
3857
3859
|
/** Map the link size to the icon size. */
|
|
3858
3860
|
iconSize = computed(() => {
|
|
3859
3861
|
switch (this.size()) {
|
|
@@ -3952,11 +3954,11 @@ class LinkActionComponent {
|
|
|
3952
3954
|
this.active.set(false);
|
|
3953
3955
|
}
|
|
3954
3956
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LinkActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3955
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: LinkActionComponent, isStandalone: true, selector: "lib-link-action", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, weight: { classPropertyName: "weight", publicName: "weight", 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]=\"[\n 'c-link-action',\n variantClass(),\n sizeClass(),\n weightClass(),\n disabled() ? 'c-link-action--disabled' : ''\n ]\"\n [attr.aria-disabled]=\"finalAriaDisabled()\"\n (click)=\"onClick($event)\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (mousedown)=\"onMouseDown()\"\n (mouseup)=\"onMouseUp()\"\n>\n @if (iconBefore()) {\n <span class=\"c-link-action__icon\">\n <lib-icon\n [name]=\"iconBefore()!\"\n [size]=\"iconSize()\"\n [color]=\"\n iconBefore()?.includes('-regular') || iconBefore()?.includes('-fill')\n ? iconColor()\n : ''\n \"\n ></lib-icon>\n </span>\n }\n <span class=\"c-link-action__text\">{{ text() }}</span>\n @if (iconAfter()) {\n <span class=\"c-link-action__icon\">\n <lib-icon\n [name]=\"iconAfter()!\"\n [size]=\"iconSize()\"\n [color]=\"\n iconAfter()?.includes('-regular') || iconAfter()?.includes('-fill')\n ? iconColor()\n : ''\n \"\n ></lib-icon>\n </span>\n }\n</button>\n", styles: [".c-link-action{display:flex;align-items:center;width:fit-content;gap:var(--space-component-gap-xs);font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);text-decoration:none;border-radius:var(--size-border-radius-sm);cursor:pointer;background:none;border:none;padding:0}.c-link-action--sm{font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-link-action--xs{font-family:var(--typography-label-xs-default-family),sans-serif;font-weight:var(--typography-label-xs-default-weight);font-size:var(--typography-label-xs-default-size);line-height:var(--typography-label-xs-default-line-height);letter-spacing:var(--typography-label-xs-default-letter-spacing)}.c-link-action--bold{font-weight:var(--typography-font-weight-bold)}.c-link-action__icon{display:flex;align-items:center}.c-link-action:hover{text-decoration:underline}.c-link-action:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-link-action--primary{color:var(--color-action-primary-content-default)}.c-link-action--primary:hover{color:var(--color-action-primary-content-hover)}.c-link-action--primary:active{color:var(--color-action-primary-content-pressed)}.c-link-action--neutral{color:var(--color-action-neutral-content-default)}.c-link-action--neutral:hover{color:var(--color-action-neutral-content-hover)}.c-link-action--neutral:active{color:var(--color-action-neutral-content-pressed)}.c-link-action--inverse{color:var(--color-action-inverse-content-default)}.c-link-action--inverse:hover{color:var(--color-action-inverse-content-hover)}.c-link-action--inverse:active{color:var(--color-action-inverse-content-pressed)}.c-link-action--danger{color:var(--color-action-danger-content-default)}.c-link-action--danger:hover{color:var(--color-action-danger-content-hover)}.c-link-action--danger:active{color:var(--color-action-danger-content-pressed)}.c-link-action--disabled{cursor:not-allowed}.c-link-action--disabled:hover{text-decoration:none}.c-link-action--disabled.c-link-action--primary{color:var(--color-action-primary-content-disabled)}.c-link-action--disabled.c-link-action--neutral{color:var(--color-action-neutral-content-disabled)}.c-link-action--disabled.c-link-action--inverse{color:var(--color-action-inverse-content-disabled)}.c-link-action--disabled.c-link-action--danger{color:var(--color-action-danger-content-disabled)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }] });
|
|
3957
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: LinkActionComponent, isStandalone: true, selector: "lib-link-action", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null }, underline: { classPropertyName: "underline", publicName: "underline", 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]=\"[\n 'c-link-action',\n variantClass(),\n sizeClass(),\n weightClass(),\n underlineClass(),\n disabled() ? 'c-link-action--disabled' : ''\n ]\"\n [attr.aria-disabled]=\"finalAriaDisabled()\"\n (click)=\"onClick($event)\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (mousedown)=\"onMouseDown()\"\n (mouseup)=\"onMouseUp()\"\n>\n @if (iconBefore()) {\n <span class=\"c-link-action__icon\">\n <lib-icon\n [name]=\"iconBefore()!\"\n [size]=\"iconSize()\"\n [color]=\"\n iconBefore()?.includes('-regular') || iconBefore()?.includes('-fill')\n ? iconColor()\n : ''\n \"\n ></lib-icon>\n </span>\n }\n <span class=\"c-link-action__text\">{{ text() }}</span>\n @if (iconAfter()) {\n <span class=\"c-link-action__icon\">\n <lib-icon\n [name]=\"iconAfter()!\"\n [size]=\"iconSize()\"\n [color]=\"\n iconAfter()?.includes('-regular') || iconAfter()?.includes('-fill')\n ? iconColor()\n : ''\n \"\n ></lib-icon>\n </span>\n }\n</button>\n", styles: [".c-link-action{display:flex;align-items:center;width:fit-content;gap:var(--space-component-gap-xs);font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);text-decoration:none;border-radius:var(--size-border-radius-sm);cursor:pointer;background:none;border:none;padding:0}.c-link-action--sm{font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-link-action--xs{font-family:var(--typography-label-xs-default-family),sans-serif;font-weight:var(--typography-label-xs-default-weight);font-size:var(--typography-label-xs-default-size);line-height:var(--typography-label-xs-default-line-height);letter-spacing:var(--typography-label-xs-default-letter-spacing)}.c-link-action--bold{font-weight:var(--typography-font-weight-bold)}.c-link-action--underline{text-decoration:underline}.c-link-action__icon{display:flex;align-items:center}.c-link-action:hover:not(.c-link-action--underline){text-decoration:underline}.c-link-action:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-link-action--primary{color:var(--color-action-primary-content-default)}.c-link-action--primary:hover{color:var(--color-action-primary-content-hover)}.c-link-action--primary:active{color:var(--color-action-primary-content-pressed)}.c-link-action--neutral{color:var(--color-action-neutral-content-default)}.c-link-action--neutral:hover{color:var(--color-action-neutral-content-hover)}.c-link-action--neutral:active{color:var(--color-action-neutral-content-pressed)}.c-link-action--inverse{color:var(--color-action-inverse-content-default)}.c-link-action--inverse:hover{color:var(--color-action-inverse-content-hover)}.c-link-action--inverse:active{color:var(--color-action-inverse-content-pressed)}.c-link-action--danger{color:var(--color-action-danger-content-default)}.c-link-action--danger:hover{color:var(--color-action-danger-content-hover)}.c-link-action--danger:active{color:var(--color-action-danger-content-pressed)}.c-link-action--disabled{cursor:not-allowed}.c-link-action--disabled:hover{text-decoration:none}.c-link-action--disabled.c-link-action--primary{color:var(--color-action-primary-content-disabled)}.c-link-action--disabled.c-link-action--neutral{color:var(--color-action-neutral-content-disabled)}.c-link-action--disabled.c-link-action--inverse{color:var(--color-action-inverse-content-disabled)}.c-link-action--disabled.c-link-action--danger{color:var(--color-action-danger-content-disabled)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }] });
|
|
3956
3958
|
}
|
|
3957
3959
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LinkActionComponent, decorators: [{
|
|
3958
3960
|
type: Component,
|
|
3959
|
-
args: [{ selector: 'lib-link-action', imports: [NgClass, IconComponent], template: "<button\n type=\"button\"\n [ngClass]=\"[\n 'c-link-action',\n variantClass(),\n sizeClass(),\n weightClass(),\n disabled() ? 'c-link-action--disabled' : ''\n ]\"\n [attr.aria-disabled]=\"finalAriaDisabled()\"\n (click)=\"onClick($event)\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (mousedown)=\"onMouseDown()\"\n (mouseup)=\"onMouseUp()\"\n>\n @if (iconBefore()) {\n <span class=\"c-link-action__icon\">\n <lib-icon\n [name]=\"iconBefore()!\"\n [size]=\"iconSize()\"\n [color]=\"\n iconBefore()?.includes('-regular') || iconBefore()?.includes('-fill')\n ? iconColor()\n : ''\n \"\n ></lib-icon>\n </span>\n }\n <span class=\"c-link-action__text\">{{ text() }}</span>\n @if (iconAfter()) {\n <span class=\"c-link-action__icon\">\n <lib-icon\n [name]=\"iconAfter()!\"\n [size]=\"iconSize()\"\n [color]=\"\n iconAfter()?.includes('-regular') || iconAfter()?.includes('-fill')\n ? iconColor()\n : ''\n \"\n ></lib-icon>\n </span>\n }\n</button>\n", styles: [".c-link-action{display:flex;align-items:center;width:fit-content;gap:var(--space-component-gap-xs);font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);text-decoration:none;border-radius:var(--size-border-radius-sm);cursor:pointer;background:none;border:none;padding:0}.c-link-action--sm{font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-link-action--xs{font-family:var(--typography-label-xs-default-family),sans-serif;font-weight:var(--typography-label-xs-default-weight);font-size:var(--typography-label-xs-default-size);line-height:var(--typography-label-xs-default-line-height);letter-spacing:var(--typography-label-xs-default-letter-spacing)}.c-link-action--bold{font-weight:var(--typography-font-weight-bold)}.c-link-action__icon{display:flex;align-items:center}.c-link-action:hover{text-decoration:underline}.c-link-action:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-link-action--primary{color:var(--color-action-primary-content-default)}.c-link-action--primary:hover{color:var(--color-action-primary-content-hover)}.c-link-action--primary:active{color:var(--color-action-primary-content-pressed)}.c-link-action--neutral{color:var(--color-action-neutral-content-default)}.c-link-action--neutral:hover{color:var(--color-action-neutral-content-hover)}.c-link-action--neutral:active{color:var(--color-action-neutral-content-pressed)}.c-link-action--inverse{color:var(--color-action-inverse-content-default)}.c-link-action--inverse:hover{color:var(--color-action-inverse-content-hover)}.c-link-action--inverse:active{color:var(--color-action-inverse-content-pressed)}.c-link-action--danger{color:var(--color-action-danger-content-default)}.c-link-action--danger:hover{color:var(--color-action-danger-content-hover)}.c-link-action--danger:active{color:var(--color-action-danger-content-pressed)}.c-link-action--disabled{cursor:not-allowed}.c-link-action--disabled:hover{text-decoration:none}.c-link-action--disabled.c-link-action--primary{color:var(--color-action-primary-content-disabled)}.c-link-action--disabled.c-link-action--neutral{color:var(--color-action-neutral-content-disabled)}.c-link-action--disabled.c-link-action--inverse{color:var(--color-action-inverse-content-disabled)}.c-link-action--disabled.c-link-action--danger{color:var(--color-action-danger-content-disabled)}\n"] }]
|
|
3961
|
+
args: [{ selector: 'lib-link-action', imports: [NgClass, IconComponent], template: "<button\n type=\"button\"\n [ngClass]=\"[\n 'c-link-action',\n variantClass(),\n sizeClass(),\n weightClass(),\n underlineClass(),\n disabled() ? 'c-link-action--disabled' : ''\n ]\"\n [attr.aria-disabled]=\"finalAriaDisabled()\"\n (click)=\"onClick($event)\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (mousedown)=\"onMouseDown()\"\n (mouseup)=\"onMouseUp()\"\n>\n @if (iconBefore()) {\n <span class=\"c-link-action__icon\">\n <lib-icon\n [name]=\"iconBefore()!\"\n [size]=\"iconSize()\"\n [color]=\"\n iconBefore()?.includes('-regular') || iconBefore()?.includes('-fill')\n ? iconColor()\n : ''\n \"\n ></lib-icon>\n </span>\n }\n <span class=\"c-link-action__text\">{{ text() }}</span>\n @if (iconAfter()) {\n <span class=\"c-link-action__icon\">\n <lib-icon\n [name]=\"iconAfter()!\"\n [size]=\"iconSize()\"\n [color]=\"\n iconAfter()?.includes('-regular') || iconAfter()?.includes('-fill')\n ? iconColor()\n : ''\n \"\n ></lib-icon>\n </span>\n }\n</button>\n", styles: [".c-link-action{display:flex;align-items:center;width:fit-content;gap:var(--space-component-gap-xs);font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);text-decoration:none;border-radius:var(--size-border-radius-sm);cursor:pointer;background:none;border:none;padding:0}.c-link-action--sm{font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-link-action--xs{font-family:var(--typography-label-xs-default-family),sans-serif;font-weight:var(--typography-label-xs-default-weight);font-size:var(--typography-label-xs-default-size);line-height:var(--typography-label-xs-default-line-height);letter-spacing:var(--typography-label-xs-default-letter-spacing)}.c-link-action--bold{font-weight:var(--typography-font-weight-bold)}.c-link-action--underline{text-decoration:underline}.c-link-action__icon{display:flex;align-items:center}.c-link-action:hover:not(.c-link-action--underline){text-decoration:underline}.c-link-action:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-link-action--primary{color:var(--color-action-primary-content-default)}.c-link-action--primary:hover{color:var(--color-action-primary-content-hover)}.c-link-action--primary:active{color:var(--color-action-primary-content-pressed)}.c-link-action--neutral{color:var(--color-action-neutral-content-default)}.c-link-action--neutral:hover{color:var(--color-action-neutral-content-hover)}.c-link-action--neutral:active{color:var(--color-action-neutral-content-pressed)}.c-link-action--inverse{color:var(--color-action-inverse-content-default)}.c-link-action--inverse:hover{color:var(--color-action-inverse-content-hover)}.c-link-action--inverse:active{color:var(--color-action-inverse-content-pressed)}.c-link-action--danger{color:var(--color-action-danger-content-default)}.c-link-action--danger:hover{color:var(--color-action-danger-content-hover)}.c-link-action--danger:active{color:var(--color-action-danger-content-pressed)}.c-link-action--disabled{cursor:not-allowed}.c-link-action--disabled:hover{text-decoration:none}.c-link-action--disabled.c-link-action--primary{color:var(--color-action-primary-content-disabled)}.c-link-action--disabled.c-link-action--neutral{color:var(--color-action-neutral-content-disabled)}.c-link-action--disabled.c-link-action--inverse{color:var(--color-action-inverse-content-disabled)}.c-link-action--disabled.c-link-action--danger{color:var(--color-action-danger-content-disabled)}\n"] }]
|
|
3960
3962
|
}] });
|
|
3961
3963
|
|
|
3962
3964
|
class DropdownSelectComponent {
|
|
@@ -4251,7 +4253,7 @@ class DropdownSelectComponent {
|
|
|
4251
4253
|
}
|
|
4252
4254
|
}
|
|
4253
4255
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4254
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: DropdownSelectComponent, isStandalone: true, selector: "lib-dropdown-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null }, searchBarEnabled: { classPropertyName: "searchBarEnabled", publicName: "searchBarEnabled", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonText: { classPropertyName: "cancelButtonText", publicName: "cancelButtonText", isSignal: true, isRequired: false, transformFunction: null }, acceptButtonText: { classPropertyName: "acceptButtonText", publicName: "acceptButtonText", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", optionDeselected: "optionDeselected", searchChanged: "searchChanged", valueChange: "valueChange", cancelClicked: "cancelClicked", acceptClicked: "acceptClicked" }, viewQueries: [{ propertyName: "overlay", first: true, predicate: OverlayComponent, descendants: true }], ngImport: i0, template: "<lib-overlay\n [align]=\"align()\"\n [direction]=\"direction()\"\n [appendToBody]=\"appendToBody()\"\n [disabled]=\"disabled()\"\n [autoFocus]=\"autoFocus()\"\n [width]=\"width()\"\n (opened)=\"onOverlayOpened()\"\n (closed)=\"onOverlayClosed()\"\n>\n <!-- Search Input (if enabled and not multiselect) -->\n @if (showSearchBar()) {\n <div class=\"c-dropdown-select__search\">\n <lib-input-search\n [placeholder]=\"searchPlaceholder()\"\n [formControl]=\"searchControl\"\n size=\"lg\"\n [fullWidth]=\"true\"\n ></lib-input-search>\n </div>\n }\n\n <!-- Options List -->\n <div class=\"c-dropdown-select__options\">\n @for (group of filteredOptions(); track group.label) {\n <!-- Option Group -->\n <div class=\"c-dropdown-select__group\">\n <!-- Group Label -->\n @if (group.label) {\n <div class=\"c-dropdown-select__group-label\">\n {{ group.label }}\n </div>\n }\n <!-- Group Options -->\n @for (option of group.options; track option.value) { @if (isMultiSelect())\n {\n <!-- For multiselect: use full checkbox component with label -->\n <div\n class=\"c-dropdown-select__option c-dropdown-select__option--multiselect\"\n >\n <lib-checkbox\n [label]=\"option.label\"\n [name]=\"'option-' + option.value\"\n [value]=\"option.value\"\n [ariaLabel]=\"'Select ' + option.label\"\n [state]=\"isSelected(option) ? 'checked' : 'unchecked'\"\n [disabled]=\"option.disabled || false\"\n (changed)=\"onCheckboxChange(option, $event.checked)\"\n ></lib-checkbox>\n </div>\n } @else {\n <!-- For single select: use button with icon and label -->\n <button\n type=\"button\"\n class=\"c-dropdown-select__option\"\n [class.c-dropdown-select__option--selected]=\"isSelected(option)\"\n [disabled]=\"option.disabled\"\n (click)=\"selectOption(option)\"\n >\n @if (option.icon) {\n <lib-icon\n [name]=\"option.icon\"\n size=\"lg\"\n class=\"c-dropdown-select__option-icon\"\n >\n </lib-icon>\n }\n\n <span class=\"c-dropdown-select__option-label\">\n {{ option.label }}\n </span>\n\n <!-- Check icon for selected option in single select -->\n @if (isSelected(option)) {\n <lib-icon\n name=\"checkcircle-fill\"\n size=\"lg\"\n color=\"action-primary-selected-background-default\"\n >\n </lib-icon>\n }\n </button>\n } }\n </div>\n }\n </div>\n\n <!-- Mobile Action Buttons in footer slot -->\n @if (showMobileActions()) {\n <div slot=\"footer\" class=\"c-dropdown-select__mobile-actions\">\n <lib-link-action\n [text]=\"cancelButtonText()\"\n variant=\"neutral\"\n size=\"md\"\n weight=\"bold\"\n (clicked)=\"onCancelClick()\"\n ></lib-link-action>\n <lib-link-action\n [text]=\"acceptButtonText()\"\n variant=\"primary\"\n size=\"md\"\n weight=\"bold\"\n (clicked)=\"onAcceptClick()\"\n ></lib-link-action>\n </div>\n }\n</lib-overlay>\n", styles: [".c-dropdown-select__search{padding:var(--space-container-padding-sm);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft)}.c-dropdown-select__options{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}.c-dropdown-select__group-label{color:var(--color-core-content-soft);padding:var(--space-component-padding-md) var(--space-component-padding-lg);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);letter-spacing:var(--typography-label-sm-strong-letter-spacing)}.c-dropdown-select__option{display:flex;align-items:center;width:100%;min-height:40px;gap:var(--space-component-gap-sm);padding:var(--space-component-padding-sm) var(--space-component-padding-lg);border:none;background:var(--color-action-neutral-background-default);color:var(--color-core-content-default);font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);letter-spacing:var(--typography-label-sm-default-letter-spacing);text-align:left;cursor:pointer}.c-dropdown-select__option:hover:not(:disabled){background-color:var(--color-action-neutral-background-hover)}.c-dropdown-select__option:focus-visible:not(:disabled){box-shadow:var(--focus-inset);outline:none}.c-dropdown-select__option:disabled{cursor:not-allowed;opacity:.5}.c-dropdown-select__option--selected{-webkit-transform:translateZ(0);transform:translateZ(0);will-change:transform}.c-dropdown-select__option--multiselect{cursor:default;padding:0 var(--space-component-padding-lg)}.c-dropdown-select__option--multiselect:hover{background-color:var(--color-action-neutral-background-hover)}.c-dropdown-select__option--multiselect__option{font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-dropdown-select__option-icon{flex-shrink:0;margin-right:12px;color:var(--color-core-content-soft)}.c-dropdown-select__option-label{flex:1;min-width:0}.c-dropdown-select__mobile-actions{display:flex;justify-content:space-between;align-items:center;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["label", "state", "errorActive", "skeletonActive", "disabled", "name", "value", "innerHTML", "ariaLabel"], outputs: ["changed"] }, { kind: "component", type: InputSearchComponent, selector: "lib-input-search", inputs: ["label", "placeholder", "helperText", "alertText", "successText", "error", "success", "disabled", "readonly", "required", "size", "fullWidth", "clearButton"], outputs: ["emitValue"] }, { kind: "component", type: LinkActionComponent, selector: "lib-link-action", inputs: ["text", "disabled", "variant", "size", "weight", "iconBefore", "iconAfter"], outputs: ["clicked"] }, { kind: "component", type: OverlayComponent, selector: "lib-overlay", inputs: ["disabled", "width", "direction", "align", "appendToBody", "autoFocus"], outputs: ["opened", "closed"] }] });
|
|
4256
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: DropdownSelectComponent, isStandalone: true, selector: "lib-dropdown-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null }, searchBarEnabled: { classPropertyName: "searchBarEnabled", publicName: "searchBarEnabled", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonText: { classPropertyName: "cancelButtonText", publicName: "cancelButtonText", isSignal: true, isRequired: false, transformFunction: null }, acceptButtonText: { classPropertyName: "acceptButtonText", publicName: "acceptButtonText", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", optionDeselected: "optionDeselected", searchChanged: "searchChanged", valueChange: "valueChange", cancelClicked: "cancelClicked", acceptClicked: "acceptClicked" }, viewQueries: [{ propertyName: "overlay", first: true, predicate: OverlayComponent, descendants: true }], ngImport: i0, template: "<lib-overlay\n [align]=\"align()\"\n [direction]=\"direction()\"\n [appendToBody]=\"appendToBody()\"\n [disabled]=\"disabled()\"\n [autoFocus]=\"autoFocus()\"\n [width]=\"width()\"\n (opened)=\"onOverlayOpened()\"\n (closed)=\"onOverlayClosed()\"\n>\n <!-- Search Input (if enabled and not multiselect) -->\n @if (showSearchBar()) {\n <div class=\"c-dropdown-select__search\">\n <lib-input-search\n [placeholder]=\"searchPlaceholder()\"\n [formControl]=\"searchControl\"\n size=\"lg\"\n [fullWidth]=\"true\"\n ></lib-input-search>\n </div>\n }\n\n <!-- Options List -->\n <div class=\"c-dropdown-select__options\">\n @for (group of filteredOptions(); track group.label) {\n <!-- Option Group -->\n <div class=\"c-dropdown-select__group\">\n <!-- Group Label -->\n @if (group.label) {\n <div class=\"c-dropdown-select__group-label\">\n {{ group.label }}\n </div>\n }\n <!-- Group Options -->\n @for (option of group.options; track option.value) { @if (isMultiSelect())\n {\n <!-- For multiselect: use full checkbox component with label -->\n <div\n class=\"c-dropdown-select__option c-dropdown-select__option--multiselect\"\n >\n <lib-checkbox\n [label]=\"option.label\"\n [name]=\"'option-' + option.value\"\n [value]=\"option.value\"\n [ariaLabel]=\"'Select ' + option.label\"\n [state]=\"isSelected(option) ? 'checked' : 'unchecked'\"\n [disabled]=\"option.disabled || false\"\n (changed)=\"onCheckboxChange(option, $event.checked)\"\n ></lib-checkbox>\n </div>\n } @else {\n <!-- For single select: use button with icon and label -->\n <button\n type=\"button\"\n class=\"c-dropdown-select__option\"\n [class.c-dropdown-select__option--selected]=\"isSelected(option)\"\n [disabled]=\"option.disabled\"\n (click)=\"selectOption(option)\"\n >\n @if (option.icon) {\n <lib-icon\n [name]=\"option.icon\"\n size=\"lg\"\n class=\"c-dropdown-select__option-icon\"\n >\n </lib-icon>\n }\n\n <span class=\"c-dropdown-select__option-label\">\n {{ option.label }}\n </span>\n\n <!-- Check icon for selected option in single select -->\n @if (isSelected(option)) {\n <lib-icon\n name=\"checkcircle-fill\"\n size=\"lg\"\n color=\"action-primary-selected-background-default\"\n >\n </lib-icon>\n }\n </button>\n } }\n </div>\n }\n </div>\n\n <!-- Mobile Action Buttons in footer slot -->\n @if (showMobileActions()) {\n <div slot=\"footer\" class=\"c-dropdown-select__mobile-actions\">\n <lib-link-action\n [text]=\"cancelButtonText()\"\n variant=\"neutral\"\n size=\"md\"\n weight=\"bold\"\n (clicked)=\"onCancelClick()\"\n ></lib-link-action>\n <lib-link-action\n [text]=\"acceptButtonText()\"\n variant=\"primary\"\n size=\"md\"\n weight=\"bold\"\n (clicked)=\"onAcceptClick()\"\n ></lib-link-action>\n </div>\n }\n</lib-overlay>\n", styles: [".c-dropdown-select__search{padding:var(--space-container-padding-sm);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft)}.c-dropdown-select__options{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}.c-dropdown-select__group-label{color:var(--color-core-content-soft);padding:var(--space-component-padding-md) var(--space-component-padding-lg);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);letter-spacing:var(--typography-label-sm-strong-letter-spacing)}.c-dropdown-select__option{display:flex;align-items:center;width:100%;min-height:40px;gap:var(--space-component-gap-sm);padding:var(--space-component-padding-sm) var(--space-component-padding-lg);border:none;background:var(--color-action-neutral-background-default);color:var(--color-core-content-default);font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);letter-spacing:var(--typography-label-sm-default-letter-spacing);text-align:left;cursor:pointer}.c-dropdown-select__option:hover:not(:disabled){background-color:var(--color-action-neutral-background-hover)}.c-dropdown-select__option:focus-visible:not(:disabled){box-shadow:var(--focus-inset);outline:none}.c-dropdown-select__option:disabled{cursor:not-allowed;opacity:.5}.c-dropdown-select__option--selected{-webkit-transform:translateZ(0);transform:translateZ(0);will-change:transform}.c-dropdown-select__option--multiselect{cursor:default;padding:0 var(--space-component-padding-lg)}.c-dropdown-select__option--multiselect:hover{background-color:var(--color-action-neutral-background-hover)}.c-dropdown-select__option--multiselect__option{font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-dropdown-select__option-icon{flex-shrink:0;margin-right:12px;color:var(--color-core-content-soft)}.c-dropdown-select__option-label{flex:1;min-width:0}.c-dropdown-select__mobile-actions{display:flex;justify-content:space-between;align-items:center;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["label", "state", "errorActive", "skeletonActive", "disabled", "name", "value", "innerHTML", "ariaLabel"], outputs: ["changed"] }, { kind: "component", type: InputSearchComponent, selector: "lib-input-search", inputs: ["label", "placeholder", "helperText", "alertText", "successText", "error", "success", "disabled", "readonly", "required", "size", "fullWidth", "clearButton"], outputs: ["emitValue"] }, { kind: "component", type: LinkActionComponent, selector: "lib-link-action", inputs: ["text", "disabled", "variant", "size", "weight", "underline", "iconBefore", "iconAfter"], outputs: ["clicked"] }, { kind: "component", type: OverlayComponent, selector: "lib-overlay", inputs: ["disabled", "width", "direction", "align", "appendToBody", "autoFocus"], outputs: ["opened", "closed"] }] });
|
|
4255
4257
|
}
|
|
4256
4258
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownSelectComponent, decorators: [{
|
|
4257
4259
|
type: Component,
|
|
@@ -4744,6 +4746,7 @@ class InputUploadComponent {
|
|
|
4744
4746
|
emitValue = new EventEmitter();
|
|
4745
4747
|
fileInput;
|
|
4746
4748
|
fileName = '';
|
|
4749
|
+
uniqueId = `upload-input-${Math.random().toString(36).substring(2, 10)}`;
|
|
4747
4750
|
onChangeFn = () => { };
|
|
4748
4751
|
onTouchedFn = () => { };
|
|
4749
4752
|
writeValue(value) {
|
|
@@ -4772,9 +4775,9 @@ class InputUploadComponent {
|
|
|
4772
4775
|
else {
|
|
4773
4776
|
this.fileName = '';
|
|
4774
4777
|
}
|
|
4775
|
-
this.emitValue.emit(file);
|
|
4776
4778
|
this.onChangeFn(file);
|
|
4777
4779
|
this.onTouchedFn();
|
|
4780
|
+
this.emitValue.emit(file);
|
|
4778
4781
|
}
|
|
4779
4782
|
onBlur() {
|
|
4780
4783
|
this.onTouchedFn();
|
|
@@ -4809,7 +4812,7 @@ class InputUploadComponent {
|
|
|
4809
4812
|
useExisting: forwardRef(() => InputUploadComponent),
|
|
4810
4813
|
multi: true,
|
|
4811
4814
|
},
|
|
4812
|
-
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n size=\"sm\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n #fileInput\n type=\"file\"\n id=\"
|
|
4815
|
+
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n size=\"sm\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n #fileInput\n type=\"file\"\n [id]=\"uniqueId\"\n style=\"display: none\"\n [attr.accept]=\"acceptString\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n (change)=\"onFileSelected($event)\"\n (blur)=\"onBlur()\"\n />\n <label\n [for]=\"uniqueId\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n >\n {{ fileName || placeholder }}\n </label>\n <lib-button-icon\n ariaLabel=\"Upload\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n iconName=\"uploadsimple-regular\"\n (click)=\"fileInput.click()\"\n >\n </lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"danger\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-text-input{position:relative;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{--input-padding-y: var(--space-component-padding-md);--input-padding-x-right: var(--space-component-padding-sm);--input-padding-x-left: var(--space-component-padding-lg);width:100%;height:48px;box-sizing:border-box;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(--input-padding-y) var(--input-padding-x-right) var(--input-padding-y) var(--input-padding-x-left);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--no-file{color:var(--color-textfield-content-placeholder)}.c-text-input__input:focus-visible{border-width:2px;border-color:var(--color-textfield-border-active);padding:calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x-right) - 1px) calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x-left) - 1px);box-shadow:none;outline:none}.c-text-input__input--sm{height:32px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x-right: var(--space-component-padding-xs);--input-padding-x-left: var(--space-component-padding-sm)}.c-text-input__input--md{height:40px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x-right: var(--space-component-padding-xs);--input-padding-x-left: 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)}.c-text-input__wrapper{display:flex;position:relative;width:100%}.c-text-input__toggle{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}\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", "isLoading"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled", "isLoading"] }] });
|
|
4813
4816
|
}
|
|
4814
4817
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputUploadComponent, decorators: [{
|
|
4815
4818
|
type: Component,
|
|
@@ -4826,7 +4829,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
4826
4829
|
useExisting: forwardRef(() => InputUploadComponent),
|
|
4827
4830
|
multi: true,
|
|
4828
4831
|
},
|
|
4829
|
-
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n size=\"sm\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n #fileInput\n type=\"file\"\n id=\"
|
|
4832
|
+
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n size=\"sm\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n #fileInput\n type=\"file\"\n [id]=\"uniqueId\"\n style=\"display: none\"\n [attr.accept]=\"acceptString\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n (change)=\"onFileSelected($event)\"\n (blur)=\"onBlur()\"\n />\n <label\n [for]=\"uniqueId\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n >\n {{ fileName || placeholder }}\n </label>\n <lib-button-icon\n ariaLabel=\"Upload\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n iconName=\"uploadsimple-regular\"\n (click)=\"fileInput.click()\"\n >\n </lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"danger\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-text-input{position:relative;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{--input-padding-y: var(--space-component-padding-md);--input-padding-x-right: var(--space-component-padding-sm);--input-padding-x-left: var(--space-component-padding-lg);width:100%;height:48px;box-sizing:border-box;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(--input-padding-y) var(--input-padding-x-right) var(--input-padding-y) var(--input-padding-x-left);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--no-file{color:var(--color-textfield-content-placeholder)}.c-text-input__input:focus-visible{border-width:2px;border-color:var(--color-textfield-border-active);padding:calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x-right) - 1px) calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x-left) - 1px);box-shadow:none;outline:none}.c-text-input__input--sm{height:32px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x-right: var(--space-component-padding-xs);--input-padding-x-left: var(--space-component-padding-sm)}.c-text-input__input--md{height:40px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x-right: var(--space-component-padding-xs);--input-padding-x-left: 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)}.c-text-input__wrapper{display:flex;position:relative;width:100%}.c-text-input__toggle{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}\n"] }]
|
|
4830
4833
|
}], propDecorators: { label: [{
|
|
4831
4834
|
type: Input
|
|
4832
4835
|
}], placeholder: [{
|
|
@@ -4869,6 +4872,7 @@ class LinkComponent {
|
|
|
4869
4872
|
variant = input('primary');
|
|
4870
4873
|
size = input('md');
|
|
4871
4874
|
weight = input('regular');
|
|
4875
|
+
underline = input(false);
|
|
4872
4876
|
iconBefore = input();
|
|
4873
4877
|
iconAfter = input();
|
|
4874
4878
|
// --- Internal State ---
|
|
@@ -4883,6 +4887,7 @@ class LinkComponent {
|
|
|
4883
4887
|
variantClass = computed(() => `c-link--${this.variant()}`);
|
|
4884
4888
|
sizeClass = computed(() => this.size() !== 'md' ? `c-link--${this.size()}` : '');
|
|
4885
4889
|
weightClass = computed(() => this.weight() !== 'regular' ? `c-link--${this.weight()}` : '');
|
|
4890
|
+
underlineClass = computed(() => this.underline() ? 'c-link--underline' : '');
|
|
4886
4891
|
/** Map the link size to the icon size. */
|
|
4887
4892
|
iconSize = computed(() => {
|
|
4888
4893
|
switch (this.size()) {
|
|
@@ -4978,11 +4983,11 @@ class LinkComponent {
|
|
|
4978
4983
|
this.active.set(false);
|
|
4979
4984
|
}
|
|
4980
4985
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4981
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: LinkComponent, isStandalone: true, selector: "lib-link", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, external: { classPropertyName: "external", publicName: "external", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, weight: { classPropertyName: "weight", publicName: "weight", 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 } }, ngImport: i0, template: "@if (!external()) {\n<a\n [ngClass]=\"[\n 'c-link',\n variantClass(),\n sizeClass(),\n weightClass(),\n disabled() ? 'c-link--disabled' : ''\n ]\"\n [routerLink]=\"href()\"\n [queryParams]=\"queryParams()\"\n [attr.aria-disabled]=\"finalAriaDisabled()\"\n (click)=\"onClick($event)\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (mousedown)=\"onMouseDown()\"\n (mouseup)=\"onMouseUp()\"\n>\n @if (iconBefore()) {\n <span class=\"c-link__icon\">\n <lib-icon\n [name]=\"iconBefore()!\"\n [size]=\"iconSize()\"\n [color]=\"iconColor()\"\n ></lib-icon>\n </span>\n }\n <span class=\"c-link__text\">{{ text() }}</span>\n @if (iconAfter()) {\n <span class=\"c-link__icon\">\n <lib-icon\n [name]=\"iconAfter()!\"\n [size]=\"iconSize()\"\n [color]=\"iconColor()\"\n ></lib-icon>\n </span>\n }\n</a>\n} @else {\n<a\n [ngClass]=\"[\n 'c-link',\n variantClass(),\n sizeClass(),\n weightClass(),\n disabled() ? 'c-link--disabled' : ''\n ]\"\n [href]=\"href()\"\n [target]=\"target()\"\n [attr.rel]=\"rel()\"\n [attr.aria-disabled]=\"finalAriaDisabled()\"\n [attr.aria-label]=\"finalAriaLabel()\"\n (click)=\"onClick($event)\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (mousedown)=\"onMouseDown()\"\n (mouseup)=\"onMouseUp()\"\n>\n @if (iconBefore()) {\n <span class=\"c-link__icon\">\n <lib-icon\n [name]=\"iconBefore()!\"\n [size]=\"iconSize()\"\n [color]=\"iconColor()\"\n ></lib-icon>\n </span>\n }\n <span class=\"c-link__text\">{{ text() }}</span>\n @if (external()) {\n <span class=\"sr-only\">(opens in a new tab)</span>\n } @if (iconAfter()) {\n <span class=\"c-link__icon\">\n <lib-icon\n [name]=\"iconAfter()!\"\n [size]=\"iconSize()\"\n [color]=\"iconColor()\"\n ></lib-icon>\n </span>\n }\n</a>\n}\n", styles: [".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.c-link{display:flex;align-items:center;width:fit-content;gap:var(--space-component-gap-xs);font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);text-decoration:none;border-radius:var(--size-border-radius-sm);cursor:pointer}.c-link--sm{font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-link--xs{font-family:var(--typography-label-xs-default-family),sans-serif;font-weight:var(--typography-label-xs-default-weight);font-size:var(--typography-label-xs-default-size);line-height:var(--typography-label-xs-default-line-height);letter-spacing:var(--typography-label-xs-default-letter-spacing)}.c-link--bold{font-weight:var(--typography-font-weight-bold)}.c-link__icon{display:flex;align-items:center}.c-link:hover{text-decoration:underline}.c-link:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-link--primary{color:var(--color-action-primary-content-default)}.c-link--primary:hover{color:var(--color-action-primary-content-hover)}.c-link--primary:active{color:var(--color-action-primary-content-pressed)}.c-link--neutral{color:var(--color-action-neutral-content-default)}.c-link--neutral:hover{color:var(--color-action-neutral-content-hover)}.c-link--neutral:active{color:var(--color-action-neutral-content-pressed)}.c-link--inverse{color:var(--color-action-inverse-content-default)}.c-link--inverse:hover{color:var(--color-action-inverse-content-hover)}.c-link--inverse:active{color:var(--color-action-inverse-content-pressed)}.c-link--danger{color:var(--color-action-danger-content-default)}.c-link--danger:hover{color:var(--color-action-danger-content-hover)}.c-link--danger:active{color:var(--color-action-danger-content-pressed)}.c-link--disabled{cursor:not-allowed}.c-link--disabled:hover{text-decoration:none}.c-link--disabled.c-link--primary{color:var(--color-action-primary-content-disabled)}.c-link--disabled.c-link--neutral{color:var(--color-action-neutral-content-disabled)}.c-link--disabled.c-link--inverse{color:var(--color-action-inverse-content-disabled)}.c-link--disabled.c-link--danger{color:var(--color-action-danger-content-disabled)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
|
|
4986
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: LinkComponent, isStandalone: true, selector: "lib-link", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, external: { classPropertyName: "external", publicName: "external", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null }, underline: { classPropertyName: "underline", publicName: "underline", 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 } }, ngImport: i0, template: "@if (!external()) {\n<a\n [ngClass]=\"[\n 'c-link',\n variantClass(),\n sizeClass(),\n weightClass(),\n underlineClass(),\n disabled() ? 'c-link--disabled' : ''\n ]\"\n [routerLink]=\"href()\"\n [queryParams]=\"queryParams()\"\n [attr.aria-disabled]=\"finalAriaDisabled()\"\n (click)=\"onClick($event)\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (mousedown)=\"onMouseDown()\"\n (mouseup)=\"onMouseUp()\"\n>\n @if (iconBefore()) {\n <span class=\"c-link__icon\">\n <lib-icon\n [name]=\"iconBefore()!\"\n [size]=\"iconSize()\"\n [color]=\"iconColor()\"\n ></lib-icon>\n </span>\n }\n <span class=\"c-link__text\">{{ text() }}</span>\n @if (iconAfter()) {\n <span class=\"c-link__icon\">\n <lib-icon\n [name]=\"iconAfter()!\"\n [size]=\"iconSize()\"\n [color]=\"iconColor()\"\n ></lib-icon>\n </span>\n }\n</a>\n} @else {\n<a\n [ngClass]=\"[\n 'c-link',\n variantClass(),\n sizeClass(),\n weightClass(),\n underlineClass(),\n disabled() ? 'c-link--disabled' : ''\n ]\"\n [href]=\"href()\"\n [target]=\"target()\"\n [attr.rel]=\"rel()\"\n [attr.aria-disabled]=\"finalAriaDisabled()\"\n [attr.aria-label]=\"finalAriaLabel()\"\n (click)=\"onClick($event)\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (mousedown)=\"onMouseDown()\"\n (mouseup)=\"onMouseUp()\"\n>\n @if (iconBefore()) {\n <span class=\"c-link__icon\">\n <lib-icon\n [name]=\"iconBefore()!\"\n [size]=\"iconSize()\"\n [color]=\"iconColor()\"\n ></lib-icon>\n </span>\n }\n <span class=\"c-link__text\">{{ text() }}</span>\n @if (external()) {\n <span class=\"sr-only\">(opens in a new tab)</span>\n } @if (iconAfter()) {\n <span class=\"c-link__icon\">\n <lib-icon\n [name]=\"iconAfter()!\"\n [size]=\"iconSize()\"\n [color]=\"iconColor()\"\n ></lib-icon>\n </span>\n }\n</a>\n}\n", styles: [".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.c-link{display:flex;align-items:center;width:fit-content;gap:var(--space-component-gap-xs);font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);text-decoration:none;border-radius:var(--size-border-radius-sm);cursor:pointer}.c-link--sm{font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-link--xs{font-family:var(--typography-label-xs-default-family),sans-serif;font-weight:var(--typography-label-xs-default-weight);font-size:var(--typography-label-xs-default-size);line-height:var(--typography-label-xs-default-line-height);letter-spacing:var(--typography-label-xs-default-letter-spacing)}.c-link--bold{font-weight:var(--typography-font-weight-bold)}.c-link--underline{text-decoration:underline}.c-link__icon{display:flex;align-items:center}.c-link:hover:not(.c-link--underline){text-decoration:underline}.c-link:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-link--primary{color:var(--color-action-primary-content-default)}.c-link--primary:hover{color:var(--color-action-primary-content-hover)}.c-link--primary:active{color:var(--color-action-primary-content-pressed)}.c-link--neutral{color:var(--color-action-neutral-content-default)}.c-link--neutral:hover{color:var(--color-action-neutral-content-hover)}.c-link--neutral:active{color:var(--color-action-neutral-content-pressed)}.c-link--inverse{color:var(--color-action-inverse-content-default)}.c-link--inverse:hover{color:var(--color-action-inverse-content-hover)}.c-link--inverse:active{color:var(--color-action-inverse-content-pressed)}.c-link--danger{color:var(--color-action-danger-content-default)}.c-link--danger:hover{color:var(--color-action-danger-content-hover)}.c-link--danger:active{color:var(--color-action-danger-content-pressed)}.c-link--disabled{cursor:not-allowed}.c-link--disabled:hover{text-decoration:none}.c-link--disabled.c-link--primary{color:var(--color-action-primary-content-disabled)}.c-link--disabled.c-link--neutral{color:var(--color-action-neutral-content-disabled)}.c-link--disabled.c-link--inverse{color:var(--color-action-inverse-content-disabled)}.c-link--disabled.c-link--danger{color:var(--color-action-danger-content-disabled)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
|
|
4982
4987
|
}
|
|
4983
4988
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LinkComponent, decorators: [{
|
|
4984
4989
|
type: Component,
|
|
4985
|
-
args: [{ selector: 'lib-link', imports: [NgClass, IconComponent, RouterLink], template: "@if (!external()) {\n<a\n [ngClass]=\"[\n 'c-link',\n variantClass(),\n sizeClass(),\n weightClass(),\n disabled() ? 'c-link--disabled' : ''\n ]\"\n [routerLink]=\"href()\"\n [queryParams]=\"queryParams()\"\n [attr.aria-disabled]=\"finalAriaDisabled()\"\n (click)=\"onClick($event)\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (mousedown)=\"onMouseDown()\"\n (mouseup)=\"onMouseUp()\"\n>\n @if (iconBefore()) {\n <span class=\"c-link__icon\">\n <lib-icon\n [name]=\"iconBefore()!\"\n [size]=\"iconSize()\"\n [color]=\"iconColor()\"\n ></lib-icon>\n </span>\n }\n <span class=\"c-link__text\">{{ text() }}</span>\n @if (iconAfter()) {\n <span class=\"c-link__icon\">\n <lib-icon\n [name]=\"iconAfter()!\"\n [size]=\"iconSize()\"\n [color]=\"iconColor()\"\n ></lib-icon>\n </span>\n }\n</a>\n} @else {\n<a\n [ngClass]=\"[\n 'c-link',\n variantClass(),\n sizeClass(),\n weightClass(),\n disabled() ? 'c-link--disabled' : ''\n ]\"\n [href]=\"href()\"\n [target]=\"target()\"\n [attr.rel]=\"rel()\"\n [attr.aria-disabled]=\"finalAriaDisabled()\"\n [attr.aria-label]=\"finalAriaLabel()\"\n (click)=\"onClick($event)\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (mousedown)=\"onMouseDown()\"\n (mouseup)=\"onMouseUp()\"\n>\n @if (iconBefore()) {\n <span class=\"c-link__icon\">\n <lib-icon\n [name]=\"iconBefore()!\"\n [size]=\"iconSize()\"\n [color]=\"iconColor()\"\n ></lib-icon>\n </span>\n }\n <span class=\"c-link__text\">{{ text() }}</span>\n @if (external()) {\n <span class=\"sr-only\">(opens in a new tab)</span>\n } @if (iconAfter()) {\n <span class=\"c-link__icon\">\n <lib-icon\n [name]=\"iconAfter()!\"\n [size]=\"iconSize()\"\n [color]=\"iconColor()\"\n ></lib-icon>\n </span>\n }\n</a>\n}\n", styles: [".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.c-link{display:flex;align-items:center;width:fit-content;gap:var(--space-component-gap-xs);font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);text-decoration:none;border-radius:var(--size-border-radius-sm);cursor:pointer}.c-link--sm{font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-link--xs{font-family:var(--typography-label-xs-default-family),sans-serif;font-weight:var(--typography-label-xs-default-weight);font-size:var(--typography-label-xs-default-size);line-height:var(--typography-label-xs-default-line-height);letter-spacing:var(--typography-label-xs-default-letter-spacing)}.c-link--bold{font-weight:var(--typography-font-weight-bold)}.c-link__icon{display:flex;align-items:center}.c-link:hover{text-decoration:underline}.c-link:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-link--primary{color:var(--color-action-primary-content-default)}.c-link--primary:hover{color:var(--color-action-primary-content-hover)}.c-link--primary:active{color:var(--color-action-primary-content-pressed)}.c-link--neutral{color:var(--color-action-neutral-content-default)}.c-link--neutral:hover{color:var(--color-action-neutral-content-hover)}.c-link--neutral:active{color:var(--color-action-neutral-content-pressed)}.c-link--inverse{color:var(--color-action-inverse-content-default)}.c-link--inverse:hover{color:var(--color-action-inverse-content-hover)}.c-link--inverse:active{color:var(--color-action-inverse-content-pressed)}.c-link--danger{color:var(--color-action-danger-content-default)}.c-link--danger:hover{color:var(--color-action-danger-content-hover)}.c-link--danger:active{color:var(--color-action-danger-content-pressed)}.c-link--disabled{cursor:not-allowed}.c-link--disabled:hover{text-decoration:none}.c-link--disabled.c-link--primary{color:var(--color-action-primary-content-disabled)}.c-link--disabled.c-link--neutral{color:var(--color-action-neutral-content-disabled)}.c-link--disabled.c-link--inverse{color:var(--color-action-inverse-content-disabled)}.c-link--disabled.c-link--danger{color:var(--color-action-danger-content-disabled)}\n"] }]
|
|
4990
|
+
args: [{ selector: 'lib-link', imports: [NgClass, IconComponent, RouterLink], template: "@if (!external()) {\n<a\n [ngClass]=\"[\n 'c-link',\n variantClass(),\n sizeClass(),\n weightClass(),\n underlineClass(),\n disabled() ? 'c-link--disabled' : ''\n ]\"\n [routerLink]=\"href()\"\n [queryParams]=\"queryParams()\"\n [attr.aria-disabled]=\"finalAriaDisabled()\"\n (click)=\"onClick($event)\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (mousedown)=\"onMouseDown()\"\n (mouseup)=\"onMouseUp()\"\n>\n @if (iconBefore()) {\n <span class=\"c-link__icon\">\n <lib-icon\n [name]=\"iconBefore()!\"\n [size]=\"iconSize()\"\n [color]=\"iconColor()\"\n ></lib-icon>\n </span>\n }\n <span class=\"c-link__text\">{{ text() }}</span>\n @if (iconAfter()) {\n <span class=\"c-link__icon\">\n <lib-icon\n [name]=\"iconAfter()!\"\n [size]=\"iconSize()\"\n [color]=\"iconColor()\"\n ></lib-icon>\n </span>\n }\n</a>\n} @else {\n<a\n [ngClass]=\"[\n 'c-link',\n variantClass(),\n sizeClass(),\n weightClass(),\n underlineClass(),\n disabled() ? 'c-link--disabled' : ''\n ]\"\n [href]=\"href()\"\n [target]=\"target()\"\n [attr.rel]=\"rel()\"\n [attr.aria-disabled]=\"finalAriaDisabled()\"\n [attr.aria-label]=\"finalAriaLabel()\"\n (click)=\"onClick($event)\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (mousedown)=\"onMouseDown()\"\n (mouseup)=\"onMouseUp()\"\n>\n @if (iconBefore()) {\n <span class=\"c-link__icon\">\n <lib-icon\n [name]=\"iconBefore()!\"\n [size]=\"iconSize()\"\n [color]=\"iconColor()\"\n ></lib-icon>\n </span>\n }\n <span class=\"c-link__text\">{{ text() }}</span>\n @if (external()) {\n <span class=\"sr-only\">(opens in a new tab)</span>\n } @if (iconAfter()) {\n <span class=\"c-link__icon\">\n <lib-icon\n [name]=\"iconAfter()!\"\n [size]=\"iconSize()\"\n [color]=\"iconColor()\"\n ></lib-icon>\n </span>\n }\n</a>\n}\n", styles: [".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.c-link{display:flex;align-items:center;width:fit-content;gap:var(--space-component-gap-xs);font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);text-decoration:none;border-radius:var(--size-border-radius-sm);cursor:pointer}.c-link--sm{font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-link--xs{font-family:var(--typography-label-xs-default-family),sans-serif;font-weight:var(--typography-label-xs-default-weight);font-size:var(--typography-label-xs-default-size);line-height:var(--typography-label-xs-default-line-height);letter-spacing:var(--typography-label-xs-default-letter-spacing)}.c-link--bold{font-weight:var(--typography-font-weight-bold)}.c-link--underline{text-decoration:underline}.c-link__icon{display:flex;align-items:center}.c-link:hover:not(.c-link--underline){text-decoration:underline}.c-link:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-link--primary{color:var(--color-action-primary-content-default)}.c-link--primary:hover{color:var(--color-action-primary-content-hover)}.c-link--primary:active{color:var(--color-action-primary-content-pressed)}.c-link--neutral{color:var(--color-action-neutral-content-default)}.c-link--neutral:hover{color:var(--color-action-neutral-content-hover)}.c-link--neutral:active{color:var(--color-action-neutral-content-pressed)}.c-link--inverse{color:var(--color-action-inverse-content-default)}.c-link--inverse:hover{color:var(--color-action-inverse-content-hover)}.c-link--inverse:active{color:var(--color-action-inverse-content-pressed)}.c-link--danger{color:var(--color-action-danger-content-default)}.c-link--danger:hover{color:var(--color-action-danger-content-hover)}.c-link--danger:active{color:var(--color-action-danger-content-pressed)}.c-link--disabled{cursor:not-allowed}.c-link--disabled:hover{text-decoration:none}.c-link--disabled.c-link--primary{color:var(--color-action-primary-content-disabled)}.c-link--disabled.c-link--neutral{color:var(--color-action-neutral-content-disabled)}.c-link--disabled.c-link--inverse{color:var(--color-action-inverse-content-disabled)}.c-link--disabled.c-link--danger{color:var(--color-action-danger-content-disabled)}\n"] }]
|
|
4986
4991
|
}] });
|
|
4987
4992
|
|
|
4988
4993
|
class MenuChildItemComponent {
|