@vroxal/vd-angular 1.0.1 → 1.1.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/README.md +243 -32
- package/fesm2022/vroxal-vd-angular.mjs +38 -38
- package/fesm2022/vroxal-vd-angular.mjs.map +1 -1
- package/guidelines/USAGE_GUIDELINES.md +1 -1
- package/package.json +1 -1
|
@@ -339,11 +339,11 @@ class VdToast {
|
|
|
339
339
|
getIconName(toast) {
|
|
340
340
|
switch (toast.color) {
|
|
341
341
|
case 'success':
|
|
342
|
-
return 'vd-icon-
|
|
342
|
+
return 'vd-icon-check-circle-filled';
|
|
343
343
|
case 'error':
|
|
344
|
-
return 'vd-icon-
|
|
344
|
+
return 'vd-icon-danger-circle-filled';
|
|
345
345
|
case 'warning':
|
|
346
|
-
return 'vd-icon-
|
|
346
|
+
return 'vd-icon-danger-triangle-filled';
|
|
347
347
|
case 'info':
|
|
348
348
|
return 'vd-icon-info-circle-filled';
|
|
349
349
|
default:
|
|
@@ -351,11 +351,11 @@ class VdToast {
|
|
|
351
351
|
}
|
|
352
352
|
}
|
|
353
353
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VdToast, deps: [{ token: VdToastService }], target: i0.ɵɵFactoryTarget.Component });
|
|
354
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: VdToast, isStandalone: true, selector: "vd-toast", inputs: { maxStack: "maxStack" }, ngImport: i0, template: "<!-- //toast component -->\n<ng-container *ngIf=\"toastsByPosition$ | async as toastsByPosition\">\n <div\n *ngFor=\"let position of positions\"\n class=\"vd-toast-container\"\n [ngClass]=\"'vd-toast-container--' + position\"\n >\n <div\n *ngFor=\"let toast of toastsByPosition[position]; trackBy: trackById\"\n class=\"vd-toast-wrapper\"\n [class.vd-toast-wrapper--leaving]=\"toast.isLeaving\"\n >\n <div\n class=\"vd-toast\"\n [ngClass]=\"['vd-toast--' + toast.color]\"\n (mouseenter)=\"onMouseEnter(toast)\"\n (mouseleave)=\"onMouseLeave(toast)\"\n >\n <vd-icon\n *ngIf=\"getIconName(toast)\"\n class=\"vd-toast__icon\"\n [name]=\"getIconName(toast)\"\n ></vd-icon>\n\n <div class=\"vd-toast__content\">\n <h6 *ngIf=\"toast.title\" class=\"vd-toast__title title-medium\">\n {{ toast.title }}\n </h6>\n <p class=\"vd-toast__description label-medium\">\n {{ toast.description }}\n </p>\n </div>\n\n <vd-icon-button\n class=\"vd-toast__close\"\n icon=\"vd-icon-
|
|
354
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: VdToast, isStandalone: true, selector: "vd-toast", inputs: { maxStack: "maxStack" }, ngImport: i0, template: "<!-- //toast component -->\n<ng-container *ngIf=\"toastsByPosition$ | async as toastsByPosition\">\n <div\n *ngFor=\"let position of positions\"\n class=\"vd-toast-container\"\n [ngClass]=\"'vd-toast-container--' + position\"\n >\n <div\n *ngFor=\"let toast of toastsByPosition[position]; trackBy: trackById\"\n class=\"vd-toast-wrapper\"\n [class.vd-toast-wrapper--leaving]=\"toast.isLeaving\"\n >\n <div\n class=\"vd-toast\"\n [ngClass]=\"['vd-toast--' + toast.color]\"\n (mouseenter)=\"onMouseEnter(toast)\"\n (mouseleave)=\"onMouseLeave(toast)\"\n >\n <vd-icon\n *ngIf=\"getIconName(toast)\"\n class=\"vd-toast__icon\"\n [name]=\"getIconName(toast)\"\n ></vd-icon>\n\n <div class=\"vd-toast__content\">\n <h6 *ngIf=\"toast.title\" class=\"vd-toast__title title-medium\">\n {{ toast.title }}\n </h6>\n <p class=\"vd-toast__description label-medium\">\n {{ toast.description }}\n </p>\n </div>\n\n <vd-icon-button\n class=\"vd-toast__close\"\n icon=\"vd-icon-xmark\"\n variant=\"transparent\"\n color=\"neutral\"\n size=\"sm\"\n (click)=\"close(toast.id!)\"\n ></vd-icon-button>\n </div>\n </div>\n </div>\n</ng-container>\n", styles: [":host{--vd-toast-gap: var(--vd-scale-spacing-300);--vd-toast-offset: var(--vd-scale-spacing-600);--vd-toast-width: calc(3 * var(--vd-scale-spacing-3000));--vd-toast-padding: var(--vd-scale-spacing-400);--vd-toast-padding-right: var(--vd-scale-spacing-1000);--vd-toast-border-width: var(--vd-scale-border-width-md);--vd-toast-border-width-accent: var(--vd-scale-border-width-xl);--vd-toast-radius: var(--vd-scale-border-radius-md);--vd-toast-close-offset: calc(var(--vd-scale-spacing-300) + var(--vd-scale-border-width-md));--vd-toast-max-height: 200px;--vd-toast-border-color: var(--vd-color-border-info-secondary);--vd-toast-bg: var(--vd-color-background-info-secondary);--vd-toast-text: var(--vd-color-content-info-on-secondary);--vd-toast-description: var(--vd-color-content-default-base)}.vd-toast-container{position:fixed;z-index:2100;display:flex;flex-direction:column;gap:var(--vd-toast-gap);pointer-events:none}.vd-toast-container--top-right{top:var(--vd-toast-offset);right:var(--vd-toast-offset)}.vd-toast-container--top-left{top:var(--vd-toast-offset);left:var(--vd-toast-offset)}.vd-toast-container--top-center{top:var(--vd-toast-offset);left:50%;transform:translate(-50%)}.vd-toast-container--bottom-right{bottom:var(--vd-toast-offset);right:var(--vd-toast-offset);flex-direction:column-reverse}.vd-toast-container--bottom-left{bottom:var(--vd-toast-offset);left:var(--vd-toast-offset);flex-direction:column-reverse}.vd-toast-container--bottom-center{bottom:var(--vd-toast-offset);left:50%;transform:translate(-50%);flex-direction:column-reverse}.vd-toast-wrapper{position:relative;max-height:var(--vd-toast-max-height);transform:translate(120%);animation:toast-enter-right .3s ease forwards;transition:transform .3s ease,max-height .3s ease,margin .3s ease,padding .3s ease,opacity .3s ease;pointer-events:auto}.vd-toast-container--top-left .vd-toast-wrapper,.vd-toast-container--bottom-left .vd-toast-wrapper{transform:translate(-120%);animation:toast-enter-left .3s ease forwards}.vd-toast-container--top-center .vd-toast-wrapper,.vd-toast-container--bottom-center .vd-toast-wrapper{transform:translateY(-120%);animation:toast-enter-center .3s ease forwards}.vd-toast-wrapper--leaving{animation:toast-exit-right .3s ease forwards!important;max-height:0!important;margin:0!important;padding:0!important}.vd-toast-container--top-left .vd-toast-wrapper--leaving,.vd-toast-container--bottom-left .vd-toast-wrapper--leaving{animation:toast-exit-left .3s ease forwards!important}.vd-toast-container--top-center .vd-toast-wrapper--leaving,.vd-toast-container--bottom-center .vd-toast-wrapper--leaving{animation:toast-exit-center .3s ease forwards!important}.vd-toast{display:flex;align-items:flex-start;gap:var(--vd-scale-spacing-200);width:var(--vd-toast-width);padding:var(--vd-toast-padding);padding-right:var(--vd-toast-padding-right);border:var(--vd-toast-border-width) solid var(--vd-toast-border-color);border-left-width:var(--vd-toast-border-width-accent);border-radius:var(--vd-toast-radius);background:var(--vd-toast-bg);color:var(--vd-toast-text)}.vd-toast__content{flex:1}.vd-toast__title{margin:0;color:var(--vd-toast-text)}.vd-toast__description{margin:0;color:var(--vd-toast-description)}.vd-toast__close{position:absolute;display:flex;top:var(--vd-toast-close-offset);right:var(--vd-toast-close-offset)}.vd-toast--success{--vd-toast-border-color: var(--vd-color-border-success-secondary);--vd-toast-bg: var(--vd-color-background-success-secondary);--vd-toast-text: var(--vd-color-content-success-on-secondary)}.vd-toast--warning{--vd-toast-border-color: var(--vd-color-border-warning-secondary);--vd-toast-bg: var(--vd-color-background-warning-secondary);--vd-toast-text: var(--vd-color-content-warning-on-secondary)}.vd-toast--error{--vd-toast-border-color: var(--vd-color-border-error-secondary);--vd-toast-bg: var(--vd-color-background-error-secondary);--vd-toast-text: var(--vd-color-content-error-on-secondary)}.vd-toast--info{--vd-toast-border-color: var(--vd-color-border-info-secondary);--vd-toast-bg: var(--vd-color-background-info-secondary);--vd-toast-text: var(--vd-color-content-info-on-secondary)}@keyframes toast-enter-right{0%{transform:translate(120%)}to{transform:translate(0)}}@keyframes toast-exit-right{0%{transform:translate(0)}to{transform:translate(120%)}}@keyframes toast-enter-left{0%{transform:translate(-120%)}to{transform:translate(0)}}@keyframes toast-exit-left{0%{transform:translate(0)}to{transform:translate(-120%)}}@keyframes toast-enter-center{0%{transform:translateY(-120%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes toast-exit-center{0%{transform:translateY(0);opacity:1}to{transform:translateY(-120%);opacity:0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: VdIconButton, selector: "vd-icon-button", inputs: ["icon", "ariaLabel", "variant", "color", "size", "rounded", "disabled", "loading"] }, { kind: "component", type: VdIcon, selector: "vd-icon", inputs: ["name", "size", "color"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
|
|
355
355
|
}
|
|
356
356
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VdToast, decorators: [{
|
|
357
357
|
type: Component,
|
|
358
|
-
args: [{ selector: 'vd-toast', standalone: true, imports: [CommonModule, VdIconButton, VdIcon], template: "<!-- //toast component -->\n<ng-container *ngIf=\"toastsByPosition$ | async as toastsByPosition\">\n <div\n *ngFor=\"let position of positions\"\n class=\"vd-toast-container\"\n [ngClass]=\"'vd-toast-container--' + position\"\n >\n <div\n *ngFor=\"let toast of toastsByPosition[position]; trackBy: trackById\"\n class=\"vd-toast-wrapper\"\n [class.vd-toast-wrapper--leaving]=\"toast.isLeaving\"\n >\n <div\n class=\"vd-toast\"\n [ngClass]=\"['vd-toast--' + toast.color]\"\n (mouseenter)=\"onMouseEnter(toast)\"\n (mouseleave)=\"onMouseLeave(toast)\"\n >\n <vd-icon\n *ngIf=\"getIconName(toast)\"\n class=\"vd-toast__icon\"\n [name]=\"getIconName(toast)\"\n ></vd-icon>\n\n <div class=\"vd-toast__content\">\n <h6 *ngIf=\"toast.title\" class=\"vd-toast__title title-medium\">\n {{ toast.title }}\n </h6>\n <p class=\"vd-toast__description label-medium\">\n {{ toast.description }}\n </p>\n </div>\n\n <vd-icon-button\n class=\"vd-toast__close\"\n icon=\"vd-icon-
|
|
358
|
+
args: [{ selector: 'vd-toast', standalone: true, imports: [CommonModule, VdIconButton, VdIcon], template: "<!-- //toast component -->\n<ng-container *ngIf=\"toastsByPosition$ | async as toastsByPosition\">\n <div\n *ngFor=\"let position of positions\"\n class=\"vd-toast-container\"\n [ngClass]=\"'vd-toast-container--' + position\"\n >\n <div\n *ngFor=\"let toast of toastsByPosition[position]; trackBy: trackById\"\n class=\"vd-toast-wrapper\"\n [class.vd-toast-wrapper--leaving]=\"toast.isLeaving\"\n >\n <div\n class=\"vd-toast\"\n [ngClass]=\"['vd-toast--' + toast.color]\"\n (mouseenter)=\"onMouseEnter(toast)\"\n (mouseleave)=\"onMouseLeave(toast)\"\n >\n <vd-icon\n *ngIf=\"getIconName(toast)\"\n class=\"vd-toast__icon\"\n [name]=\"getIconName(toast)\"\n ></vd-icon>\n\n <div class=\"vd-toast__content\">\n <h6 *ngIf=\"toast.title\" class=\"vd-toast__title title-medium\">\n {{ toast.title }}\n </h6>\n <p class=\"vd-toast__description label-medium\">\n {{ toast.description }}\n </p>\n </div>\n\n <vd-icon-button\n class=\"vd-toast__close\"\n icon=\"vd-icon-xmark\"\n variant=\"transparent\"\n color=\"neutral\"\n size=\"sm\"\n (click)=\"close(toast.id!)\"\n ></vd-icon-button>\n </div>\n </div>\n </div>\n</ng-container>\n", styles: [":host{--vd-toast-gap: var(--vd-scale-spacing-300);--vd-toast-offset: var(--vd-scale-spacing-600);--vd-toast-width: calc(3 * var(--vd-scale-spacing-3000));--vd-toast-padding: var(--vd-scale-spacing-400);--vd-toast-padding-right: var(--vd-scale-spacing-1000);--vd-toast-border-width: var(--vd-scale-border-width-md);--vd-toast-border-width-accent: var(--vd-scale-border-width-xl);--vd-toast-radius: var(--vd-scale-border-radius-md);--vd-toast-close-offset: calc(var(--vd-scale-spacing-300) + var(--vd-scale-border-width-md));--vd-toast-max-height: 200px;--vd-toast-border-color: var(--vd-color-border-info-secondary);--vd-toast-bg: var(--vd-color-background-info-secondary);--vd-toast-text: var(--vd-color-content-info-on-secondary);--vd-toast-description: var(--vd-color-content-default-base)}.vd-toast-container{position:fixed;z-index:2100;display:flex;flex-direction:column;gap:var(--vd-toast-gap);pointer-events:none}.vd-toast-container--top-right{top:var(--vd-toast-offset);right:var(--vd-toast-offset)}.vd-toast-container--top-left{top:var(--vd-toast-offset);left:var(--vd-toast-offset)}.vd-toast-container--top-center{top:var(--vd-toast-offset);left:50%;transform:translate(-50%)}.vd-toast-container--bottom-right{bottom:var(--vd-toast-offset);right:var(--vd-toast-offset);flex-direction:column-reverse}.vd-toast-container--bottom-left{bottom:var(--vd-toast-offset);left:var(--vd-toast-offset);flex-direction:column-reverse}.vd-toast-container--bottom-center{bottom:var(--vd-toast-offset);left:50%;transform:translate(-50%);flex-direction:column-reverse}.vd-toast-wrapper{position:relative;max-height:var(--vd-toast-max-height);transform:translate(120%);animation:toast-enter-right .3s ease forwards;transition:transform .3s ease,max-height .3s ease,margin .3s ease,padding .3s ease,opacity .3s ease;pointer-events:auto}.vd-toast-container--top-left .vd-toast-wrapper,.vd-toast-container--bottom-left .vd-toast-wrapper{transform:translate(-120%);animation:toast-enter-left .3s ease forwards}.vd-toast-container--top-center .vd-toast-wrapper,.vd-toast-container--bottom-center .vd-toast-wrapper{transform:translateY(-120%);animation:toast-enter-center .3s ease forwards}.vd-toast-wrapper--leaving{animation:toast-exit-right .3s ease forwards!important;max-height:0!important;margin:0!important;padding:0!important}.vd-toast-container--top-left .vd-toast-wrapper--leaving,.vd-toast-container--bottom-left .vd-toast-wrapper--leaving{animation:toast-exit-left .3s ease forwards!important}.vd-toast-container--top-center .vd-toast-wrapper--leaving,.vd-toast-container--bottom-center .vd-toast-wrapper--leaving{animation:toast-exit-center .3s ease forwards!important}.vd-toast{display:flex;align-items:flex-start;gap:var(--vd-scale-spacing-200);width:var(--vd-toast-width);padding:var(--vd-toast-padding);padding-right:var(--vd-toast-padding-right);border:var(--vd-toast-border-width) solid var(--vd-toast-border-color);border-left-width:var(--vd-toast-border-width-accent);border-radius:var(--vd-toast-radius);background:var(--vd-toast-bg);color:var(--vd-toast-text)}.vd-toast__content{flex:1}.vd-toast__title{margin:0;color:var(--vd-toast-text)}.vd-toast__description{margin:0;color:var(--vd-toast-description)}.vd-toast__close{position:absolute;display:flex;top:var(--vd-toast-close-offset);right:var(--vd-toast-close-offset)}.vd-toast--success{--vd-toast-border-color: var(--vd-color-border-success-secondary);--vd-toast-bg: var(--vd-color-background-success-secondary);--vd-toast-text: var(--vd-color-content-success-on-secondary)}.vd-toast--warning{--vd-toast-border-color: var(--vd-color-border-warning-secondary);--vd-toast-bg: var(--vd-color-background-warning-secondary);--vd-toast-text: var(--vd-color-content-warning-on-secondary)}.vd-toast--error{--vd-toast-border-color: var(--vd-color-border-error-secondary);--vd-toast-bg: var(--vd-color-background-error-secondary);--vd-toast-text: var(--vd-color-content-error-on-secondary)}.vd-toast--info{--vd-toast-border-color: var(--vd-color-border-info-secondary);--vd-toast-bg: var(--vd-color-background-info-secondary);--vd-toast-text: var(--vd-color-content-info-on-secondary)}@keyframes toast-enter-right{0%{transform:translate(120%)}to{transform:translate(0)}}@keyframes toast-exit-right{0%{transform:translate(0)}to{transform:translate(120%)}}@keyframes toast-enter-left{0%{transform:translate(-120%)}to{transform:translate(0)}}@keyframes toast-exit-left{0%{transform:translate(0)}to{transform:translate(-120%)}}@keyframes toast-enter-center{0%{transform:translateY(-120%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes toast-exit-center{0%{transform:translateY(0);opacity:1}to{transform:translateY(-120%);opacity:0}}\n"] }]
|
|
359
359
|
}], ctorParameters: () => [{ type: VdToastService }], propDecorators: { maxStack: [{
|
|
360
360
|
type: Input
|
|
361
361
|
}] } });
|
|
@@ -581,11 +581,11 @@ class VdInput {
|
|
|
581
581
|
}
|
|
582
582
|
}
|
|
583
583
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VdInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
584
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: VdInput, isStandalone: true, selector: "vd-input", inputs: { label: "label", hintText: "hintText", helperText: "helperText", optional: "optional", leadingIcon: "leadingIcon", trailingActionIcon: "trailingActionIcon", placeholder: "placeholder", type: "type", value: "value", maxInputCount: "maxInputCount", readOnly: "readOnly", disabled: "disabled", state: "state" }, outputs: { valueChange: "valueChange", valueCommit: "valueCommit", trailingActionClick: "trailingActionClick", inputFocus: "inputFocus" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, static: true }], ngImport: i0, template: "<div\n class=\"vd-input\"\n [class.vd-input--error]=\"state === 'error'\"\n [class.vd-input--disabled]=\"disabled\"\n [class.vd-input--success]=\"state === 'success'\"\n [class.vd-input--warning]=\"state === 'warning'\"\n>\n <!-- Label row -->\n <div class=\"vd-input__label-row\" *ngIf=\"label || optional || hintText\">\n <label *ngIf=\"label\" class=\"vd-input__label\" [attr.for]=\"inputId\">\n {{ label }}\n </label>\n\n <vd-icon *ngIf=\"hintText\" name=\"vd-icon-
|
|
584
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: VdInput, isStandalone: true, selector: "vd-input", inputs: { label: "label", hintText: "hintText", helperText: "helperText", optional: "optional", leadingIcon: "leadingIcon", trailingActionIcon: "trailingActionIcon", placeholder: "placeholder", type: "type", value: "value", maxInputCount: "maxInputCount", readOnly: "readOnly", disabled: "disabled", state: "state" }, outputs: { valueChange: "valueChange", valueCommit: "valueCommit", trailingActionClick: "trailingActionClick", inputFocus: "inputFocus" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, static: true }], ngImport: i0, template: "<div\n class=\"vd-input\"\n [class.vd-input--error]=\"state === 'error'\"\n [class.vd-input--disabled]=\"disabled\"\n [class.vd-input--success]=\"state === 'success'\"\n [class.vd-input--warning]=\"state === 'warning'\"\n>\n <!-- Label row -->\n <div class=\"vd-input__label-row\" *ngIf=\"label || optional || hintText\">\n <label *ngIf=\"label\" class=\"vd-input__label\" [attr.for]=\"inputId\">\n {{ label }}\n </label>\n\n <vd-icon *ngIf=\"hintText\" name=\"vd-icon-question-circle\" [vdTooltip]=\"hintText\"> ></vd-icon>\n <p *ngIf=\"optional\" class=\"vd-input__optional body-medium-italic\">Optional</p>\n </div>\n\n <div class=\"vd-input__container\" (click)=\"focusInput()\">\n <span *ngIf=\"leadingIcon\" class=\"vd-input__leading-icon\">\n <vd-icon [name]=\"leadingIcon\"></vd-icon>\n </span>\n\n <input\n #inputElement\n [id]=\"inputId\"\n class=\"vd-input__input body-medium\"\n [type]=\"type\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n [attr.maxlength]=\"maxInputCount ? maxInputCount : null\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n [disabled]=\"disabled\"\n [readonly]=\"readOnly\"\n />\n\n <span *ngIf=\"trailingStateIcon\" class=\"vd-input__trailing-icon state\">\n <vd-icon [name]=\"trailingStateIcon\"></vd-icon>\n </span>\n\n <span class=\"vd-input__trailing-action-container\" *ngIf=\"trailingActionIcon\">\n <vd-icon-button\n class=\"vd-input__trailing-action\"\n variant=\"transparent\"\n color=\"neutral\"\n [disabled]=\"disabled\"\n [icon]=\"trailingActionIcon\"\n (click)=\"onTrailingActionClick(); $event.stopPropagation()\"\n ></vd-icon-button>\n </span>\n </div>\n\n <!-- Helper & counter row -->\n <div class=\"vd-input__helper-row\" *ngIf=\"helperText || maxInputCount\">\n <span *ngIf=\"helperText\" class=\"vd-input__helper-text body-small\">\n {{ helperText }}\n </span>\n\n <span *ngIf=\"maxInputCount\" class=\"vd-input__input-counter body-small\">\n {{ value.length || 0 }}/{{ maxInputCount }}\n </span>\n </div>\n</div>\n", styles: [":host{display:block;width:100%;--vd-input-border-base: var(--vd-color-border-default-base);--vd-input-border-secondary: var(--vd-color-border-default-secondary);--vd-input-border-disabled: var(--vd-color-border-default-disabled);--vd-input-outline-color: var(--vd-color-border-primary-tertiary);--vd-input-bg-base: var(--vd-color-background-default-secondary);--vd-input-bg-disabled: var(--vd-color-background-default-disabled);--vd-input-text-base: var(--vd-color-content-default-base);--vd-input-text-secondary: var(--vd-color-content-default-secondary);--vd-input-text-disabled: var(--vd-color-content-default-disabled);--vd-input-text-placeholder: var(--vd-color-content-default-disabled);--vd-input-icon-base: var(--vd-color-content-default-tertiary);--vd-input-icon-disabled: var(--vd-color-content-default-disabled);--vd-input-padding: var(--vd-scale-spacing-300);--vd-input-border-width: var(--vd-scale-border-width-sm);--vd-input-radius: var(--vd-scale-border-radius-md);--vd-input-outline-width: var(--vd-scale-border-width-md)}.vd-input--success{--vd-input-icon-state: var(--vd-color-content-success-base);--vd-input-text-state: var(--vd-color-content-success-base);--vd-input-border-state: var(--vd-color-border-success-base);--vd-input-bg-state: var(--vd-color-background-success-secondary)}.vd-input--error{--vd-input-icon-state: var(--vd-color-content-error-base);--vd-input-text-state: var(--vd-color-content-error-base);--vd-input-border-state: var(--vd-color-border-error-base);--vd-input-bg-state: var(--vd-color-background-error-secondary)}.vd-input--warning{--vd-input-icon-state: var(--vd-color-content-warning-base);--vd-input-text-state: var(--vd-color-content-warning-base);--vd-input-border-state: var(--vd-color-border-warning-base);--vd-input-bg-state: var(--vd-color-background-warning-secondary)}.vd-input{width:100%;min-width:240px}.vd-input__label-row{display:flex;gap:var(--vd-scale-spacing-200);margin-bottom:var(--vd-scale-spacing-100)}.vd-input__label{color:var(--vd-input-text-base)}.vd-input__optional{flex:1;text-align:right;margin:0}.vd-input__container{display:flex;gap:var(--vd-scale-spacing-200);align-items:center;margin:0;padding:calc(var(--vd-input-padding) - var(--vd-input-border-width));border:var(--vd-input-border-width) solid var(--vd-input-border-secondary);border-radius:var(--vd-input-radius);background:var(--vd-input-bg-base);cursor:text}.vd-input__container:focus-within:not(:has(.vd-input__trailing-action-container:focus-within)){border-color:var(--vd-input-border-base);background:var(--vd-input-bg-base)}.vd-input__input{flex:1;border:none;padding:0;background-color:transparent;color:var(--vd-input-text-base)}.vd-input__input:focus{outline:none}.vd-input__input::placeholder{color:var(--vd-input-text-placeholder)}.vd-input__input:-webkit-autofill{box-shadow:0 0 0 1000px var(--vd-input-bg-base) inset;-webkit-box-shadow:0 0 0px 1000px var(--vd-input-bg-base) inset;-webkit-text-fill-color:var(--vd-input-text-base);transition:background-color 5000s ease-in-out}.vd-input__input:-moz-autofill{box-shadow:0 0 0 1000px var(--vd-input-bg-base) inset;-moz-text-fill-color:var(--vd-input-text-base)}.vd-input__leading-icon,.vd-input__trailing-icon{display:inline-flex;color:var(--vd-input-icon-base)}.vd-input__trailing-action-container{position:relative;height:var(--vd-scale-spacing-600);width:var(--vd-scale-spacing-800)}.vd-input__trailing-action{position:absolute;top:50%;transform:translateY(-50%)}.vd-input__helper-row{display:flex;margin-top:var(--vd-scale-spacing-100)}.vd-input__helper-text{margin:0}.vd-input__input-counter{flex:1;text-align:right;margin:0}.vd-input:focus-within:not(:has(.vd-input__trailing-action-container:focus-within)) .vd-input__container{border-color:var(--vd-input-border-base);outline:var(--vd-input-outline-width) solid var(--vd-input-outline-color);outline-offset:var(--vd-scale-spacing-50);background:var(--vd-input-bg-base)}.vd-input:focus-within:not(:has(.vd-input__trailing-action-container:focus-within)) .vd-input__label,.vd-input:focus-within:not(:has(.vd-input__trailing-action-container:focus-within)) .vd-input__helper-text{color:var(--vd-input-text-secondary)}.vd-input--disabled .vd-input__container{border-color:var(--vd-input-border-disabled);background:var(--vd-input-bg-disabled)}.vd-input--disabled .vd-input__label,.vd-input--disabled .vd-input__helper-text,.vd-input--disabled .vd-input__input{color:var(--vd-input-text-disabled)}.vd-input--disabled .vd-input__leading-icon{color:var(--vd-input-icon-disabled)}.vd-input--success .vd-input__trailing-icon{color:var(--vd-input-icon-state)}.vd-input--success .vd-input__helper-text,.vd-input--error .vd-input__label{color:var(--vd-input-text-state)}.vd-input--error .vd-input__container{border-color:var(--vd-input-border-state);background:var(--vd-input-bg-state)}.vd-input--error .vd-input__trailing-icon{color:var(--vd-input-icon-state)}.vd-input--error .vd-input__helper-text{color:var(--vd-input-text-state)}.vd-input--warning .vd-input__trailing-icon{color:var(--vd-input-icon-state)}.vd-input--warning .vd-input__helper-text{color:var(--vd-input-text-state)}.vd-input__helper-icon{position:relative;display:inline-flex;align-items:center;cursor:pointer}.vd-input__helper-icon .vd-input__hint-tooltip{width:max-content;max-width:240px;min-width:120px;white-space:normal;text-align:center;position:absolute;bottom:100%;left:50%;transform:translate(-50%);background-color:var(--vd-color-background-default-always-dark, #333);color:var(--vd-color-background-default-always-light, #fff);padding:8px 12px;border-radius:var(--vd-radius-sm, 4px);z-index:10;box-shadow:0 2px 8px #0003;margin-top:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: VdIcon, selector: "vd-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: VdIconButton, selector: "vd-icon-button", inputs: ["icon", "ariaLabel", "variant", "color", "size", "rounded", "disabled", "loading"] }, { kind: "directive", type: VdTooltipDirective, selector: "[vdTooltip]", inputs: ["vdTooltip", "vdTooltipPosition"] }] });
|
|
585
585
|
}
|
|
586
586
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VdInput, decorators: [{
|
|
587
587
|
type: Component,
|
|
588
|
-
args: [{ selector: 'vd-input', standalone: true, imports: [CommonModule, VdIcon, VdIconButton, VdTooltipDirective], template: "<div\n class=\"vd-input\"\n [class.vd-input--error]=\"state === 'error'\"\n [class.vd-input--disabled]=\"disabled\"\n [class.vd-input--success]=\"state === 'success'\"\n [class.vd-input--warning]=\"state === 'warning'\"\n>\n <!-- Label row -->\n <div class=\"vd-input__label-row\" *ngIf=\"label || optional || hintText\">\n <label *ngIf=\"label\" class=\"vd-input__label\" [attr.for]=\"inputId\">\n {{ label }}\n </label>\n\n <vd-icon *ngIf=\"hintText\" name=\"vd-icon-
|
|
588
|
+
args: [{ selector: 'vd-input', standalone: true, imports: [CommonModule, VdIcon, VdIconButton, VdTooltipDirective], template: "<div\n class=\"vd-input\"\n [class.vd-input--error]=\"state === 'error'\"\n [class.vd-input--disabled]=\"disabled\"\n [class.vd-input--success]=\"state === 'success'\"\n [class.vd-input--warning]=\"state === 'warning'\"\n>\n <!-- Label row -->\n <div class=\"vd-input__label-row\" *ngIf=\"label || optional || hintText\">\n <label *ngIf=\"label\" class=\"vd-input__label\" [attr.for]=\"inputId\">\n {{ label }}\n </label>\n\n <vd-icon *ngIf=\"hintText\" name=\"vd-icon-question-circle\" [vdTooltip]=\"hintText\"> ></vd-icon>\n <p *ngIf=\"optional\" class=\"vd-input__optional body-medium-italic\">Optional</p>\n </div>\n\n <div class=\"vd-input__container\" (click)=\"focusInput()\">\n <span *ngIf=\"leadingIcon\" class=\"vd-input__leading-icon\">\n <vd-icon [name]=\"leadingIcon\"></vd-icon>\n </span>\n\n <input\n #inputElement\n [id]=\"inputId\"\n class=\"vd-input__input body-medium\"\n [type]=\"type\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n [attr.maxlength]=\"maxInputCount ? maxInputCount : null\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n [disabled]=\"disabled\"\n [readonly]=\"readOnly\"\n />\n\n <span *ngIf=\"trailingStateIcon\" class=\"vd-input__trailing-icon state\">\n <vd-icon [name]=\"trailingStateIcon\"></vd-icon>\n </span>\n\n <span class=\"vd-input__trailing-action-container\" *ngIf=\"trailingActionIcon\">\n <vd-icon-button\n class=\"vd-input__trailing-action\"\n variant=\"transparent\"\n color=\"neutral\"\n [disabled]=\"disabled\"\n [icon]=\"trailingActionIcon\"\n (click)=\"onTrailingActionClick(); $event.stopPropagation()\"\n ></vd-icon-button>\n </span>\n </div>\n\n <!-- Helper & counter row -->\n <div class=\"vd-input__helper-row\" *ngIf=\"helperText || maxInputCount\">\n <span *ngIf=\"helperText\" class=\"vd-input__helper-text body-small\">\n {{ helperText }}\n </span>\n\n <span *ngIf=\"maxInputCount\" class=\"vd-input__input-counter body-small\">\n {{ value.length || 0 }}/{{ maxInputCount }}\n </span>\n </div>\n</div>\n", styles: [":host{display:block;width:100%;--vd-input-border-base: var(--vd-color-border-default-base);--vd-input-border-secondary: var(--vd-color-border-default-secondary);--vd-input-border-disabled: var(--vd-color-border-default-disabled);--vd-input-outline-color: var(--vd-color-border-primary-tertiary);--vd-input-bg-base: var(--vd-color-background-default-secondary);--vd-input-bg-disabled: var(--vd-color-background-default-disabled);--vd-input-text-base: var(--vd-color-content-default-base);--vd-input-text-secondary: var(--vd-color-content-default-secondary);--vd-input-text-disabled: var(--vd-color-content-default-disabled);--vd-input-text-placeholder: var(--vd-color-content-default-disabled);--vd-input-icon-base: var(--vd-color-content-default-tertiary);--vd-input-icon-disabled: var(--vd-color-content-default-disabled);--vd-input-padding: var(--vd-scale-spacing-300);--vd-input-border-width: var(--vd-scale-border-width-sm);--vd-input-radius: var(--vd-scale-border-radius-md);--vd-input-outline-width: var(--vd-scale-border-width-md)}.vd-input--success{--vd-input-icon-state: var(--vd-color-content-success-base);--vd-input-text-state: var(--vd-color-content-success-base);--vd-input-border-state: var(--vd-color-border-success-base);--vd-input-bg-state: var(--vd-color-background-success-secondary)}.vd-input--error{--vd-input-icon-state: var(--vd-color-content-error-base);--vd-input-text-state: var(--vd-color-content-error-base);--vd-input-border-state: var(--vd-color-border-error-base);--vd-input-bg-state: var(--vd-color-background-error-secondary)}.vd-input--warning{--vd-input-icon-state: var(--vd-color-content-warning-base);--vd-input-text-state: var(--vd-color-content-warning-base);--vd-input-border-state: var(--vd-color-border-warning-base);--vd-input-bg-state: var(--vd-color-background-warning-secondary)}.vd-input{width:100%;min-width:240px}.vd-input__label-row{display:flex;gap:var(--vd-scale-spacing-200);margin-bottom:var(--vd-scale-spacing-100)}.vd-input__label{color:var(--vd-input-text-base)}.vd-input__optional{flex:1;text-align:right;margin:0}.vd-input__container{display:flex;gap:var(--vd-scale-spacing-200);align-items:center;margin:0;padding:calc(var(--vd-input-padding) - var(--vd-input-border-width));border:var(--vd-input-border-width) solid var(--vd-input-border-secondary);border-radius:var(--vd-input-radius);background:var(--vd-input-bg-base);cursor:text}.vd-input__container:focus-within:not(:has(.vd-input__trailing-action-container:focus-within)){border-color:var(--vd-input-border-base);background:var(--vd-input-bg-base)}.vd-input__input{flex:1;border:none;padding:0;background-color:transparent;color:var(--vd-input-text-base)}.vd-input__input:focus{outline:none}.vd-input__input::placeholder{color:var(--vd-input-text-placeholder)}.vd-input__input:-webkit-autofill{box-shadow:0 0 0 1000px var(--vd-input-bg-base) inset;-webkit-box-shadow:0 0 0px 1000px var(--vd-input-bg-base) inset;-webkit-text-fill-color:var(--vd-input-text-base);transition:background-color 5000s ease-in-out}.vd-input__input:-moz-autofill{box-shadow:0 0 0 1000px var(--vd-input-bg-base) inset;-moz-text-fill-color:var(--vd-input-text-base)}.vd-input__leading-icon,.vd-input__trailing-icon{display:inline-flex;color:var(--vd-input-icon-base)}.vd-input__trailing-action-container{position:relative;height:var(--vd-scale-spacing-600);width:var(--vd-scale-spacing-800)}.vd-input__trailing-action{position:absolute;top:50%;transform:translateY(-50%)}.vd-input__helper-row{display:flex;margin-top:var(--vd-scale-spacing-100)}.vd-input__helper-text{margin:0}.vd-input__input-counter{flex:1;text-align:right;margin:0}.vd-input:focus-within:not(:has(.vd-input__trailing-action-container:focus-within)) .vd-input__container{border-color:var(--vd-input-border-base);outline:var(--vd-input-outline-width) solid var(--vd-input-outline-color);outline-offset:var(--vd-scale-spacing-50);background:var(--vd-input-bg-base)}.vd-input:focus-within:not(:has(.vd-input__trailing-action-container:focus-within)) .vd-input__label,.vd-input:focus-within:not(:has(.vd-input__trailing-action-container:focus-within)) .vd-input__helper-text{color:var(--vd-input-text-secondary)}.vd-input--disabled .vd-input__container{border-color:var(--vd-input-border-disabled);background:var(--vd-input-bg-disabled)}.vd-input--disabled .vd-input__label,.vd-input--disabled .vd-input__helper-text,.vd-input--disabled .vd-input__input{color:var(--vd-input-text-disabled)}.vd-input--disabled .vd-input__leading-icon{color:var(--vd-input-icon-disabled)}.vd-input--success .vd-input__trailing-icon{color:var(--vd-input-icon-state)}.vd-input--success .vd-input__helper-text,.vd-input--error .vd-input__label{color:var(--vd-input-text-state)}.vd-input--error .vd-input__container{border-color:var(--vd-input-border-state);background:var(--vd-input-bg-state)}.vd-input--error .vd-input__trailing-icon{color:var(--vd-input-icon-state)}.vd-input--error .vd-input__helper-text{color:var(--vd-input-text-state)}.vd-input--warning .vd-input__trailing-icon{color:var(--vd-input-icon-state)}.vd-input--warning .vd-input__helper-text{color:var(--vd-input-text-state)}.vd-input__helper-icon{position:relative;display:inline-flex;align-items:center;cursor:pointer}.vd-input__helper-icon .vd-input__hint-tooltip{width:max-content;max-width:240px;min-width:120px;white-space:normal;text-align:center;position:absolute;bottom:100%;left:50%;transform:translate(-50%);background-color:var(--vd-color-background-default-always-dark, #333);color:var(--vd-color-background-default-always-light, #fff);padding:8px 12px;border-radius:var(--vd-radius-sm, 4px);z-index:10;box-shadow:0 2px 8px #0003;margin-top:4px}\n"] }]
|
|
589
589
|
}], propDecorators: { label: [{
|
|
590
590
|
type: Input
|
|
591
591
|
}], hintText: [{
|
|
@@ -696,7 +696,7 @@ class VdCheckbox {
|
|
|
696
696
|
useExisting: forwardRef(() => VdCheckbox),
|
|
697
697
|
multi: true,
|
|
698
698
|
},
|
|
699
|
-
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<label\n class=\"vd-checkbox\"\n [class.vd-checkbox--checked]=\"checked\"\n [class.vd-checkbox--indeterminate]=\"indeterminate\"\n [class.vd-checkbox--disabled]=\"disabled\"\n>\n <span class=\"vd-checkbox__icon-container\">\n <input\n #inputRef\n class=\"vd-checkbox__input\"\n type=\"checkbox\"\n [id]=\"inputId\"\n [name]=\"name\"\n [checked]=\"checked\"\n [indeterminate]=\"indeterminate\"\n [disabled]=\"disabled\"\n [attr.aria-checked]=\"indeterminate ? 'mixed' : checked\"\n [attr.aria-label]=\"ariaLabel || label\"\n (change)=\"onInputChange($event)\"\n (blur)=\"onBlur()\"\n />\n <span class=\"vd-checkbox__box\">\n <vd-icon\n *ngIf=\"checked && !indeterminate\"\n class=\"vd-checkbox__icon\"\n name=\"vd-icon-
|
|
699
|
+
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<label\n class=\"vd-checkbox\"\n [class.vd-checkbox--checked]=\"checked\"\n [class.vd-checkbox--indeterminate]=\"indeterminate\"\n [class.vd-checkbox--disabled]=\"disabled\"\n>\n <span class=\"vd-checkbox__icon-container\">\n <input\n #inputRef\n class=\"vd-checkbox__input\"\n type=\"checkbox\"\n [id]=\"inputId\"\n [name]=\"name\"\n [checked]=\"checked\"\n [indeterminate]=\"indeterminate\"\n [disabled]=\"disabled\"\n [attr.aria-checked]=\"indeterminate ? 'mixed' : checked\"\n [attr.aria-label]=\"ariaLabel || label\"\n (change)=\"onInputChange($event)\"\n (blur)=\"onBlur()\"\n />\n <span class=\"vd-checkbox__box\">\n <vd-icon\n *ngIf=\"checked && !indeterminate\"\n class=\"vd-checkbox__icon\"\n name=\"vd-icon-check\"\n size=\"sm\"\n ></vd-icon>\n <vd-icon\n *ngIf=\"indeterminate\"\n class=\"vd-checkbox__icon\"\n name=\"vd-icon-minus\"\n size=\"sm\"\n ></vd-icon>\n </span>\n </span>\n <span *ngIf=\"label || description\" class=\"vd-checkbox__content\">\n <span *ngIf=\"label\" class=\"vd-checkbox__label label-medium\">{{ label }}</span>\n <span *ngIf=\"description\" class=\"vd-checkbox__description body-small\">\n {{ description }}\n </span>\n </span>\n</label>\n", styles: [":host{display:inline-flex;--vd-checkbox-gap: var(--vd-scale-spacing-200);--vd-checkbox-icon-padding: var(--vd-scale-spacing-50);--vd-checkbox-size: var(--vd-scale-icon-size-sm);--vd-checkbox-radius: var(--vd-scale-border-radius-xs);--vd-checkbox-border-width: var(--vd-scale-border-width-sm);--vd-checkbox-focus-width: var(--vd-scale-border-width-md);--vd-checkbox-focus-color: var(--vd-color-border-primary-tertiary);--vd-checkbox-focus-offset: var(--vd-scale-border-width-md);--vd-checkbox-label-color: var(--vd-color-content-default-secondary);--vd-checkbox-label-color-hover: var(--vd-color-content-default-base);--vd-checkbox-description-color: var(--vd-color-content-default-tertiary);--vd-checkbox-description-color-hover: var(--vd-color-content-default-secondary);--vd-checkbox-bg-unchecked: var(--vd-color-background-default-secondary);--vd-checkbox-border-unchecked: var(--vd-color-border-default-secondary);--vd-checkbox-bg-unchecked-hover: var(--vd-color-background-primary-secondary);--vd-checkbox-border-unchecked-hover: var(--vd-color-border-primary-base);--vd-checkbox-border-unchecked-focus: var(--vd-color-border-default-base);--vd-checkbox-bg-checked: var(--vd-color-background-primary-base);--vd-checkbox-bg-checked-hover: var(--vd-color-background-primary-base-hover);--vd-checkbox-icon-color: var(--vd-color-content-primary-on-base);--vd-checkbox-bg-disabled: var(--vd-color-background-default-disabled);--vd-checkbox-border-disabled: var(--vd-color-border-default-tertiary);--vd-checkbox-text-disabled: var(--vd-color-content-default-disabled);--vd-checkbox-icon-disabled: var(--vd-color-content-default-disabled)}.vd-checkbox{--vd-checkbox-bg: var(--vd-checkbox-bg-unchecked);--vd-checkbox-border: var(--vd-checkbox-border-unchecked);--vd-checkbox-label-current: var(--vd-checkbox-label-color);--vd-checkbox-description-current: var(--vd-checkbox-description-color);--vd-checkbox-icon-current: var(--vd-checkbox-icon-color);--vd-checkbox-box-opacity: 1;display:inline-flex;align-items:flex-start;gap:var(--vd-checkbox-gap);cursor:pointer}.vd-checkbox__icon-container{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:var(--vd-checkbox-icon-padding)}.vd-checkbox__input{position:absolute;width:var(--vd-checkbox-size);height:var(--vd-checkbox-size);margin:0;opacity:0;cursor:inherit}.vd-checkbox__box{width:var(--vd-checkbox-size);height:var(--vd-checkbox-size);border-radius:var(--vd-checkbox-radius);border:var(--vd-checkbox-border-width) solid var(--vd-checkbox-border);background:var(--vd-checkbox-bg);color:var(--vd-checkbox-icon-current);opacity:var(--vd-checkbox-box-opacity);display:inline-flex;align-items:center;justify-content:center;transition:background-color .2s ease,border-color .2s ease,color .2s ease}.vd-checkbox__icon{color:var(--vd-checkbox-icon-current)}.vd-checkbox__content{display:flex;flex-direction:column;gap:var(--vd-scale-spacing-50)}.vd-checkbox__label,.vd-checkbox__description{margin:0}.vd-checkbox__label{color:var(--vd-checkbox-label-current)}.vd-checkbox__description{color:var(--vd-checkbox-description-current)}.vd-checkbox--checked,.vd-checkbox--indeterminate{--vd-checkbox-bg: var(--vd-checkbox-bg-checked);--vd-checkbox-border: var(--vd-color-background-primary-base);--vd-checkbox-icon-current: var(--vd-checkbox-icon-color)}.vd-checkbox--disabled{cursor:not-allowed;--vd-checkbox-label-current: var(--vd-checkbox-text-disabled);--vd-checkbox-description-current: var(--vd-checkbox-text-disabled);--vd-checkbox-border: var(--vd-checkbox-border-disabled);--vd-checkbox-bg: var(--vd-checkbox-bg-disabled);--vd-checkbox-icon-current: var(--vd-checkbox-icon-disabled)}.vd-checkbox.vd-checkbox--disabled.vd-checkbox--checked,.vd-checkbox.vd-checkbox--disabled.vd-checkbox--indeterminate{--vd-checkbox-bg: var(--vd-checkbox-bg-checked);--vd-checkbox-border: var(--vd-checkbox-bg-checked);--vd-checkbox-icon-current: var(--vd-checkbox-icon-color);--vd-checkbox-box-opacity: .4}.vd-checkbox:not(.vd-checkbox--disabled):hover{--vd-checkbox-label-current: var(--vd-checkbox-label-color-hover);--vd-checkbox-description-current: var(--vd-checkbox-description-color-hover)}.vd-checkbox:not(.vd-checkbox--disabled):hover:not(.vd-checkbox--checked):not(.vd-checkbox--indeterminate){--vd-checkbox-bg: var(--vd-checkbox-bg-unchecked-hover);--vd-checkbox-border: var(--vd-checkbox-border-unchecked-hover)}.vd-checkbox.vd-checkbox--checked:not(.vd-checkbox--disabled):hover,.vd-checkbox.vd-checkbox--indeterminate:not(.vd-checkbox--disabled):hover{--vd-checkbox-bg: var(--vd-checkbox-bg-checked-hover);--vd-checkbox-border: var(--vd-checkbox-bg-checked-hover)}.vd-checkbox:not(.vd-checkbox--disabled):focus-within{--vd-checkbox-label-current: var(--vd-checkbox-label-color-hover);--vd-checkbox-description-current: var(--vd-checkbox-description-color-hover)}.vd-checkbox__input:focus-visible+.vd-checkbox__box{outline:var(--vd-checkbox-focus-width) solid var(--vd-checkbox-focus-color);outline-offset:var(--vd-checkbox-focus-offset)}.vd-checkbox:not(.vd-checkbox--checked):not(.vd-checkbox--indeterminate) .vd-checkbox__input:focus-visible+.vd-checkbox__box{border-color:var(--vd-checkbox-border-unchecked-focus)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: VdIcon, selector: "vd-icon", inputs: ["name", "size", "color"] }] });
|
|
700
700
|
}
|
|
701
701
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VdCheckbox, decorators: [{
|
|
702
702
|
type: Component,
|
|
@@ -706,7 +706,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
706
706
|
useExisting: forwardRef(() => VdCheckbox),
|
|
707
707
|
multi: true,
|
|
708
708
|
},
|
|
709
|
-
], template: "<label\n class=\"vd-checkbox\"\n [class.vd-checkbox--checked]=\"checked\"\n [class.vd-checkbox--indeterminate]=\"indeterminate\"\n [class.vd-checkbox--disabled]=\"disabled\"\n>\n <span class=\"vd-checkbox__icon-container\">\n <input\n #inputRef\n class=\"vd-checkbox__input\"\n type=\"checkbox\"\n [id]=\"inputId\"\n [name]=\"name\"\n [checked]=\"checked\"\n [indeterminate]=\"indeterminate\"\n [disabled]=\"disabled\"\n [attr.aria-checked]=\"indeterminate ? 'mixed' : checked\"\n [attr.aria-label]=\"ariaLabel || label\"\n (change)=\"onInputChange($event)\"\n (blur)=\"onBlur()\"\n />\n <span class=\"vd-checkbox__box\">\n <vd-icon\n *ngIf=\"checked && !indeterminate\"\n class=\"vd-checkbox__icon\"\n name=\"vd-icon-
|
|
709
|
+
], template: "<label\n class=\"vd-checkbox\"\n [class.vd-checkbox--checked]=\"checked\"\n [class.vd-checkbox--indeterminate]=\"indeterminate\"\n [class.vd-checkbox--disabled]=\"disabled\"\n>\n <span class=\"vd-checkbox__icon-container\">\n <input\n #inputRef\n class=\"vd-checkbox__input\"\n type=\"checkbox\"\n [id]=\"inputId\"\n [name]=\"name\"\n [checked]=\"checked\"\n [indeterminate]=\"indeterminate\"\n [disabled]=\"disabled\"\n [attr.aria-checked]=\"indeterminate ? 'mixed' : checked\"\n [attr.aria-label]=\"ariaLabel || label\"\n (change)=\"onInputChange($event)\"\n (blur)=\"onBlur()\"\n />\n <span class=\"vd-checkbox__box\">\n <vd-icon\n *ngIf=\"checked && !indeterminate\"\n class=\"vd-checkbox__icon\"\n name=\"vd-icon-check\"\n size=\"sm\"\n ></vd-icon>\n <vd-icon\n *ngIf=\"indeterminate\"\n class=\"vd-checkbox__icon\"\n name=\"vd-icon-minus\"\n size=\"sm\"\n ></vd-icon>\n </span>\n </span>\n <span *ngIf=\"label || description\" class=\"vd-checkbox__content\">\n <span *ngIf=\"label\" class=\"vd-checkbox__label label-medium\">{{ label }}</span>\n <span *ngIf=\"description\" class=\"vd-checkbox__description body-small\">\n {{ description }}\n </span>\n </span>\n</label>\n", styles: [":host{display:inline-flex;--vd-checkbox-gap: var(--vd-scale-spacing-200);--vd-checkbox-icon-padding: var(--vd-scale-spacing-50);--vd-checkbox-size: var(--vd-scale-icon-size-sm);--vd-checkbox-radius: var(--vd-scale-border-radius-xs);--vd-checkbox-border-width: var(--vd-scale-border-width-sm);--vd-checkbox-focus-width: var(--vd-scale-border-width-md);--vd-checkbox-focus-color: var(--vd-color-border-primary-tertiary);--vd-checkbox-focus-offset: var(--vd-scale-border-width-md);--vd-checkbox-label-color: var(--vd-color-content-default-secondary);--vd-checkbox-label-color-hover: var(--vd-color-content-default-base);--vd-checkbox-description-color: var(--vd-color-content-default-tertiary);--vd-checkbox-description-color-hover: var(--vd-color-content-default-secondary);--vd-checkbox-bg-unchecked: var(--vd-color-background-default-secondary);--vd-checkbox-border-unchecked: var(--vd-color-border-default-secondary);--vd-checkbox-bg-unchecked-hover: var(--vd-color-background-primary-secondary);--vd-checkbox-border-unchecked-hover: var(--vd-color-border-primary-base);--vd-checkbox-border-unchecked-focus: var(--vd-color-border-default-base);--vd-checkbox-bg-checked: var(--vd-color-background-primary-base);--vd-checkbox-bg-checked-hover: var(--vd-color-background-primary-base-hover);--vd-checkbox-icon-color: var(--vd-color-content-primary-on-base);--vd-checkbox-bg-disabled: var(--vd-color-background-default-disabled);--vd-checkbox-border-disabled: var(--vd-color-border-default-tertiary);--vd-checkbox-text-disabled: var(--vd-color-content-default-disabled);--vd-checkbox-icon-disabled: var(--vd-color-content-default-disabled)}.vd-checkbox{--vd-checkbox-bg: var(--vd-checkbox-bg-unchecked);--vd-checkbox-border: var(--vd-checkbox-border-unchecked);--vd-checkbox-label-current: var(--vd-checkbox-label-color);--vd-checkbox-description-current: var(--vd-checkbox-description-color);--vd-checkbox-icon-current: var(--vd-checkbox-icon-color);--vd-checkbox-box-opacity: 1;display:inline-flex;align-items:flex-start;gap:var(--vd-checkbox-gap);cursor:pointer}.vd-checkbox__icon-container{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:var(--vd-checkbox-icon-padding)}.vd-checkbox__input{position:absolute;width:var(--vd-checkbox-size);height:var(--vd-checkbox-size);margin:0;opacity:0;cursor:inherit}.vd-checkbox__box{width:var(--vd-checkbox-size);height:var(--vd-checkbox-size);border-radius:var(--vd-checkbox-radius);border:var(--vd-checkbox-border-width) solid var(--vd-checkbox-border);background:var(--vd-checkbox-bg);color:var(--vd-checkbox-icon-current);opacity:var(--vd-checkbox-box-opacity);display:inline-flex;align-items:center;justify-content:center;transition:background-color .2s ease,border-color .2s ease,color .2s ease}.vd-checkbox__icon{color:var(--vd-checkbox-icon-current)}.vd-checkbox__content{display:flex;flex-direction:column;gap:var(--vd-scale-spacing-50)}.vd-checkbox__label,.vd-checkbox__description{margin:0}.vd-checkbox__label{color:var(--vd-checkbox-label-current)}.vd-checkbox__description{color:var(--vd-checkbox-description-current)}.vd-checkbox--checked,.vd-checkbox--indeterminate{--vd-checkbox-bg: var(--vd-checkbox-bg-checked);--vd-checkbox-border: var(--vd-color-background-primary-base);--vd-checkbox-icon-current: var(--vd-checkbox-icon-color)}.vd-checkbox--disabled{cursor:not-allowed;--vd-checkbox-label-current: var(--vd-checkbox-text-disabled);--vd-checkbox-description-current: var(--vd-checkbox-text-disabled);--vd-checkbox-border: var(--vd-checkbox-border-disabled);--vd-checkbox-bg: var(--vd-checkbox-bg-disabled);--vd-checkbox-icon-current: var(--vd-checkbox-icon-disabled)}.vd-checkbox.vd-checkbox--disabled.vd-checkbox--checked,.vd-checkbox.vd-checkbox--disabled.vd-checkbox--indeterminate{--vd-checkbox-bg: var(--vd-checkbox-bg-checked);--vd-checkbox-border: var(--vd-checkbox-bg-checked);--vd-checkbox-icon-current: var(--vd-checkbox-icon-color);--vd-checkbox-box-opacity: .4}.vd-checkbox:not(.vd-checkbox--disabled):hover{--vd-checkbox-label-current: var(--vd-checkbox-label-color-hover);--vd-checkbox-description-current: var(--vd-checkbox-description-color-hover)}.vd-checkbox:not(.vd-checkbox--disabled):hover:not(.vd-checkbox--checked):not(.vd-checkbox--indeterminate){--vd-checkbox-bg: var(--vd-checkbox-bg-unchecked-hover);--vd-checkbox-border: var(--vd-checkbox-border-unchecked-hover)}.vd-checkbox.vd-checkbox--checked:not(.vd-checkbox--disabled):hover,.vd-checkbox.vd-checkbox--indeterminate:not(.vd-checkbox--disabled):hover{--vd-checkbox-bg: var(--vd-checkbox-bg-checked-hover);--vd-checkbox-border: var(--vd-checkbox-bg-checked-hover)}.vd-checkbox:not(.vd-checkbox--disabled):focus-within{--vd-checkbox-label-current: var(--vd-checkbox-label-color-hover);--vd-checkbox-description-current: var(--vd-checkbox-description-color-hover)}.vd-checkbox__input:focus-visible+.vd-checkbox__box{outline:var(--vd-checkbox-focus-width) solid var(--vd-checkbox-focus-color);outline-offset:var(--vd-checkbox-focus-offset)}.vd-checkbox:not(.vd-checkbox--checked):not(.vd-checkbox--indeterminate) .vd-checkbox__input:focus-visible+.vd-checkbox__box{border-color:var(--vd-checkbox-border-unchecked-focus)}\n"] }]
|
|
710
710
|
}], propDecorators: { label: [{
|
|
711
711
|
type: Input
|
|
712
712
|
}], description: [{
|
|
@@ -1350,11 +1350,11 @@ class VdDatatable {
|
|
|
1350
1350
|
return Math.min(this.currentPage * this.rowsPerPage, this.totalRows);
|
|
1351
1351
|
}
|
|
1352
1352
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VdDatatable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1353
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: VdDatatable, isStandalone: true, selector: "vd-datatable", inputs: { data: "data", columns: "columns", expandedColumns: "expandedColumns", actions: "actions", currentPage: "currentPage", totalPages: "totalPages", rowsPerPage: "rowsPerPage", totalRows: "totalRows" }, outputs: { actionTriggered: "actionTriggered", rowClicked: "rowClicked", pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"vd-datatable\">\n <table class=\"vd-datatable__table\">\n <thead>\n <tr>\n <th *ngFor=\"let col of columns\" class=\"label-medium vd-datatable__table-header\">\n <div class=\"vd-datatable__cell\">{{ col.title }}</div>\n </th>\n <th\n *ngIf=\"actions.length\"\n class=\"label-medium vd-datatable__table-header vd-datatable__table-header--actions\"\n >\n <div class=\"vd-datatable__cell\">Actions</div>\n </th>\n </tr>\n </thead>\n\n <tbody>\n <ng-container *ngFor=\"let row of pagedData\">\n <!-- Main row -->\n <tr\n class=\"vd-datatable__row\"\n [class.vd-datatable__row--expandable]=\"isExpandable\"\n (click)=\"toggleExpand(row)\"\n >\n <td *ngFor=\"let col of columns\" class=\"body-medium vd-datatable__table-data\">\n <div class=\"vd-datatable__cell\">\n <ng-container *ngIf=\"col.template; else defaultCell\">\n <ng-container\n *ngTemplateOutlet=\"\n col.template;\n context: {\n $implicit: row,\n row: row,\n key: col.key,\n }\n \"\n ></ng-container>\n </ng-container>\n\n <ng-template #defaultCell>\n {{ (col.cell ? col.cell(row) : row[col.key]) ?? 'N/A' }}\n </ng-template>\n </div>\n </td>\n\n <td\n class=\"vd-datatable__table-data vd-datatable__table-data--actions\"\n *ngIf=\"actions.length\"\n >\n <div class=\"vd-datatable__action-cell\" *ngIf=\"hasActions(row)\">\n <vd-dropdown position=\"bottom-right\" (click)=\"$event.stopPropagation()\">\n <vd-icon-button\n color=\"neutral\"\n variant=\"transparent\"\n icon=\"vd-icon-vertical-
|
|
1353
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: VdDatatable, isStandalone: true, selector: "vd-datatable", inputs: { data: "data", columns: "columns", expandedColumns: "expandedColumns", actions: "actions", currentPage: "currentPage", totalPages: "totalPages", rowsPerPage: "rowsPerPage", totalRows: "totalRows" }, outputs: { actionTriggered: "actionTriggered", rowClicked: "rowClicked", pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"vd-datatable\">\n <table class=\"vd-datatable__table\">\n <thead>\n <tr>\n <th *ngFor=\"let col of columns\" class=\"label-medium vd-datatable__table-header\">\n <div class=\"vd-datatable__cell\">{{ col.title }}</div>\n </th>\n <th\n *ngIf=\"actions.length\"\n class=\"label-medium vd-datatable__table-header vd-datatable__table-header--actions\"\n >\n <div class=\"vd-datatable__cell\">Actions</div>\n </th>\n </tr>\n </thead>\n\n <tbody>\n <ng-container *ngFor=\"let row of pagedData\">\n <!-- Main row -->\n <tr\n class=\"vd-datatable__row\"\n [class.vd-datatable__row--expandable]=\"isExpandable\"\n (click)=\"toggleExpand(row)\"\n >\n <td *ngFor=\"let col of columns\" class=\"body-medium vd-datatable__table-data\">\n <div class=\"vd-datatable__cell\">\n <ng-container *ngIf=\"col.template; else defaultCell\">\n <ng-container\n *ngTemplateOutlet=\"\n col.template;\n context: {\n $implicit: row,\n row: row,\n key: col.key,\n }\n \"\n ></ng-container>\n </ng-container>\n\n <ng-template #defaultCell>\n {{ (col.cell ? col.cell(row) : row[col.key]) ?? 'N/A' }}\n </ng-template>\n </div>\n </td>\n\n <td\n class=\"vd-datatable__table-data vd-datatable__table-data--actions\"\n *ngIf=\"actions.length\"\n >\n <div class=\"vd-datatable__action-cell\" *ngIf=\"hasActions(row)\">\n <vd-dropdown position=\"bottom-right\" (click)=\"$event.stopPropagation()\">\n <vd-icon-button\n color=\"neutral\"\n variant=\"transparent\"\n icon=\"vd-icon-menu-dots-vertical-filled\"\n vdDropdownTrigger\n ></vd-icon-button>\n <vd-dropdown-item\n *ngFor=\"let act of getRowActions(row)\"\n [icon]=\"act.icon || 'vd-icon-placeholder'\"\n [title]=\"act.title\"\n [disabled]=\"act.disabled?.(row) || false\"\n (select)=\"onActionClick(act, row)\"\n ></vd-dropdown-item>\n </vd-dropdown>\n </div>\n </td>\n </tr>\n\n <!-- Expanded row -->\n <tr\n *ngIf=\"isExpandable && expandedRow === row\"\n class=\"vd-datatable__row vd-datatable__row--expanded\"\n >\n <td\n [attr.colspan]=\"columns.length + (actions.length ? 1 : 0)\"\n class=\"vd-datatable__table-data\"\n >\n <div class=\"vd-datatable__expanded-content\">\n <div *ngFor=\"let col of expandedColumns\" class=\"vd-datatable__expanded-row-item\">\n <div class=\"label-medium\">{{ col.title }}</div>\n <div class=\"body-medium\">\n {{ (col.cell ? col.cell(row) : row[col.key]) ?? 'N/A' }}\n </div>\n </div>\n </div>\n </td>\n </tr>\n </ng-container>\n </tbody>\n </table>\n</div>\n\n<!-- Bottom -->\n<div class=\"vd-datatable__bottom\" *ngIf=\"totalPages || totalRows\">\n <div class=\"vd-datatable__counter\" *ngIf=\"totalRows\">\n Showing {{ rangeStart }} \u2013 {{ rangeEnd }} of {{ totalRows }}\n </div>\n\n <vd-pagination\n *ngIf=\"totalPages\"\n [currentPage]=\"currentPage\"\n [totalPages]=\"totalPages\"\n (pageChange)=\"onPageChanged($event)\"\n class=\"vd-datatable__pagination\"\n ></vd-pagination>\n</div>\n", styles: [":host{display:block;width:100%;min-width:0;--vd-datatable-border-base: var(--vd-color-border-default-secondary);--vd-datatable-border-secondary: var(--vd-color-border-default-tertiary);--vd-datatable-header-bg: var(--vd-color-background-default-tertiary);--vd-datatable-row-bg: var(--vd-color-background-default-secondary);--vd-datatable-row-hover-bg: var(--vd-color-background-info-secondary);--vd-datatable-text: var(--vd-color-content-default-base);--vd-datatable-border-width: var(--vd-scale-border-width-sm);--vd-datatable-radius: var(--vd-scale-border-radius-md);--vd-datatable-cell-padding: var(--vd-scale-spacing-400);--vd-datatable-row-min-height: var(--vd-scale-spacing-800);--vd-datatable-actions-width: var(--vd-scale-spacing-1200)}.vd-datatable{display:block;width:100%;min-width:0;border:var(--vd-datatable-border-width) solid var(--vd-datatable-border-base);border-radius:var(--vd-datatable-radius);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.vd-datatable__table{width:100%;min-width:fit-content;border-collapse:collapse;table-layout:auto}.vd-datatable__table-header,.vd-datatable__table-data{white-space:nowrap;padding:0;text-align:left}.vd-datatable__table-header--actions,.vd-datatable__table-data--actions{width:var(--vd-datatable-actions-width)}.vd-datatable__table-header{border-bottom:var(--vd-datatable-border-width) solid var(--vd-datatable-border-base)}.vd-datatable__table-data{border-bottom:var(--vd-datatable-border-width) solid var(--vd-datatable-border-secondary)}.vd-datatable__table-header{position:sticky;top:0;background-color:var(--vd-datatable-header-bg);z-index:2}.vd-datatable__cell{display:flex;align-items:center;padding:var(--vd-datatable-cell-padding);min-height:var(--vd-datatable-row-min-height);color:var(--vd-datatable-text)}.vd-datatable__row{background-color:var(--vd-datatable-row-bg);transition:background-color .15s ease}.vd-datatable__row:hover{background-color:var(--vd-datatable-row-hover-bg)}.vd-datatable__row:last-child .vd-datatable__table-data{border-bottom:none}.vd-datatable__row--expandable{cursor:pointer}.vd-datatable__row--expanded{background-color:var(--vd-datatable-row-hover-bg)}.vd-datatable__row--expanded .vd-datatable__expanded-content{padding:var(--vd-datatable-cell-padding);display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--vd-scale-spacing-800)}.vd-datatable__expanded-row-item{display:flex;flex-direction:column;gap:var(--vd-scale-spacing-100)}.vd-datatable__action-cell{padding:var(--vd-scale-spacing-200) var(--vd-scale-spacing-400);display:flex;align-items:center;justify-content:end}.vd-datatable__bottom{display:flex;align-items:center;justify-content:flex-end;gap:var(--vd-scale-spacing-400);margin-top:var(--vd-scale-spacing-400);flex-wrap:wrap}.vd-datatable__counter{flex:1;min-width:200px}.vd-datatable__pagination{flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: VdPagination, selector: "vd-pagination", inputs: ["totalPages", "currentPage"], outputs: ["pageChange"] }, { kind: "component", type: VdDropdown, selector: "vd-dropdown", inputs: ["position"] }, { kind: "component", type: VdDropdownItem, selector: "vd-dropdown-item", inputs: ["title", "description", "icon", "disabled"], outputs: ["select"] }, { kind: "component", type: VdIconButton, selector: "vd-icon-button", inputs: ["icon", "ariaLabel", "variant", "color", "size", "rounded", "disabled", "loading"] }] });
|
|
1354
1354
|
}
|
|
1355
1355
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VdDatatable, decorators: [{
|
|
1356
1356
|
type: Component,
|
|
1357
|
-
args: [{ selector: 'vd-datatable', standalone: true, imports: [CommonModule, VdPagination, VdDropdown, VdDropdownItem, VdIconButton], template: "<div class=\"vd-datatable\">\n <table class=\"vd-datatable__table\">\n <thead>\n <tr>\n <th *ngFor=\"let col of columns\" class=\"label-medium vd-datatable__table-header\">\n <div class=\"vd-datatable__cell\">{{ col.title }}</div>\n </th>\n <th\n *ngIf=\"actions.length\"\n class=\"label-medium vd-datatable__table-header vd-datatable__table-header--actions\"\n >\n <div class=\"vd-datatable__cell\">Actions</div>\n </th>\n </tr>\n </thead>\n\n <tbody>\n <ng-container *ngFor=\"let row of pagedData\">\n <!-- Main row -->\n <tr\n class=\"vd-datatable__row\"\n [class.vd-datatable__row--expandable]=\"isExpandable\"\n (click)=\"toggleExpand(row)\"\n >\n <td *ngFor=\"let col of columns\" class=\"body-medium vd-datatable__table-data\">\n <div class=\"vd-datatable__cell\">\n <ng-container *ngIf=\"col.template; else defaultCell\">\n <ng-container\n *ngTemplateOutlet=\"\n col.template;\n context: {\n $implicit: row,\n row: row,\n key: col.key,\n }\n \"\n ></ng-container>\n </ng-container>\n\n <ng-template #defaultCell>\n {{ (col.cell ? col.cell(row) : row[col.key]) ?? 'N/A' }}\n </ng-template>\n </div>\n </td>\n\n <td\n class=\"vd-datatable__table-data vd-datatable__table-data--actions\"\n *ngIf=\"actions.length\"\n >\n <div class=\"vd-datatable__action-cell\" *ngIf=\"hasActions(row)\">\n <vd-dropdown position=\"bottom-right\" (click)=\"$event.stopPropagation()\">\n <vd-icon-button\n color=\"neutral\"\n variant=\"transparent\"\n icon=\"vd-icon-vertical-
|
|
1357
|
+
args: [{ selector: 'vd-datatable', standalone: true, imports: [CommonModule, VdPagination, VdDropdown, VdDropdownItem, VdIconButton], template: "<div class=\"vd-datatable\">\n <table class=\"vd-datatable__table\">\n <thead>\n <tr>\n <th *ngFor=\"let col of columns\" class=\"label-medium vd-datatable__table-header\">\n <div class=\"vd-datatable__cell\">{{ col.title }}</div>\n </th>\n <th\n *ngIf=\"actions.length\"\n class=\"label-medium vd-datatable__table-header vd-datatable__table-header--actions\"\n >\n <div class=\"vd-datatable__cell\">Actions</div>\n </th>\n </tr>\n </thead>\n\n <tbody>\n <ng-container *ngFor=\"let row of pagedData\">\n <!-- Main row -->\n <tr\n class=\"vd-datatable__row\"\n [class.vd-datatable__row--expandable]=\"isExpandable\"\n (click)=\"toggleExpand(row)\"\n >\n <td *ngFor=\"let col of columns\" class=\"body-medium vd-datatable__table-data\">\n <div class=\"vd-datatable__cell\">\n <ng-container *ngIf=\"col.template; else defaultCell\">\n <ng-container\n *ngTemplateOutlet=\"\n col.template;\n context: {\n $implicit: row,\n row: row,\n key: col.key,\n }\n \"\n ></ng-container>\n </ng-container>\n\n <ng-template #defaultCell>\n {{ (col.cell ? col.cell(row) : row[col.key]) ?? 'N/A' }}\n </ng-template>\n </div>\n </td>\n\n <td\n class=\"vd-datatable__table-data vd-datatable__table-data--actions\"\n *ngIf=\"actions.length\"\n >\n <div class=\"vd-datatable__action-cell\" *ngIf=\"hasActions(row)\">\n <vd-dropdown position=\"bottom-right\" (click)=\"$event.stopPropagation()\">\n <vd-icon-button\n color=\"neutral\"\n variant=\"transparent\"\n icon=\"vd-icon-menu-dots-vertical-filled\"\n vdDropdownTrigger\n ></vd-icon-button>\n <vd-dropdown-item\n *ngFor=\"let act of getRowActions(row)\"\n [icon]=\"act.icon || 'vd-icon-placeholder'\"\n [title]=\"act.title\"\n [disabled]=\"act.disabled?.(row) || false\"\n (select)=\"onActionClick(act, row)\"\n ></vd-dropdown-item>\n </vd-dropdown>\n </div>\n </td>\n </tr>\n\n <!-- Expanded row -->\n <tr\n *ngIf=\"isExpandable && expandedRow === row\"\n class=\"vd-datatable__row vd-datatable__row--expanded\"\n >\n <td\n [attr.colspan]=\"columns.length + (actions.length ? 1 : 0)\"\n class=\"vd-datatable__table-data\"\n >\n <div class=\"vd-datatable__expanded-content\">\n <div *ngFor=\"let col of expandedColumns\" class=\"vd-datatable__expanded-row-item\">\n <div class=\"label-medium\">{{ col.title }}</div>\n <div class=\"body-medium\">\n {{ (col.cell ? col.cell(row) : row[col.key]) ?? 'N/A' }}\n </div>\n </div>\n </div>\n </td>\n </tr>\n </ng-container>\n </tbody>\n </table>\n</div>\n\n<!-- Bottom -->\n<div class=\"vd-datatable__bottom\" *ngIf=\"totalPages || totalRows\">\n <div class=\"vd-datatable__counter\" *ngIf=\"totalRows\">\n Showing {{ rangeStart }} \u2013 {{ rangeEnd }} of {{ totalRows }}\n </div>\n\n <vd-pagination\n *ngIf=\"totalPages\"\n [currentPage]=\"currentPage\"\n [totalPages]=\"totalPages\"\n (pageChange)=\"onPageChanged($event)\"\n class=\"vd-datatable__pagination\"\n ></vd-pagination>\n</div>\n", styles: [":host{display:block;width:100%;min-width:0;--vd-datatable-border-base: var(--vd-color-border-default-secondary);--vd-datatable-border-secondary: var(--vd-color-border-default-tertiary);--vd-datatable-header-bg: var(--vd-color-background-default-tertiary);--vd-datatable-row-bg: var(--vd-color-background-default-secondary);--vd-datatable-row-hover-bg: var(--vd-color-background-info-secondary);--vd-datatable-text: var(--vd-color-content-default-base);--vd-datatable-border-width: var(--vd-scale-border-width-sm);--vd-datatable-radius: var(--vd-scale-border-radius-md);--vd-datatable-cell-padding: var(--vd-scale-spacing-400);--vd-datatable-row-min-height: var(--vd-scale-spacing-800);--vd-datatable-actions-width: var(--vd-scale-spacing-1200)}.vd-datatable{display:block;width:100%;min-width:0;border:var(--vd-datatable-border-width) solid var(--vd-datatable-border-base);border-radius:var(--vd-datatable-radius);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.vd-datatable__table{width:100%;min-width:fit-content;border-collapse:collapse;table-layout:auto}.vd-datatable__table-header,.vd-datatable__table-data{white-space:nowrap;padding:0;text-align:left}.vd-datatable__table-header--actions,.vd-datatable__table-data--actions{width:var(--vd-datatable-actions-width)}.vd-datatable__table-header{border-bottom:var(--vd-datatable-border-width) solid var(--vd-datatable-border-base)}.vd-datatable__table-data{border-bottom:var(--vd-datatable-border-width) solid var(--vd-datatable-border-secondary)}.vd-datatable__table-header{position:sticky;top:0;background-color:var(--vd-datatable-header-bg);z-index:2}.vd-datatable__cell{display:flex;align-items:center;padding:var(--vd-datatable-cell-padding);min-height:var(--vd-datatable-row-min-height);color:var(--vd-datatable-text)}.vd-datatable__row{background-color:var(--vd-datatable-row-bg);transition:background-color .15s ease}.vd-datatable__row:hover{background-color:var(--vd-datatable-row-hover-bg)}.vd-datatable__row:last-child .vd-datatable__table-data{border-bottom:none}.vd-datatable__row--expandable{cursor:pointer}.vd-datatable__row--expanded{background-color:var(--vd-datatable-row-hover-bg)}.vd-datatable__row--expanded .vd-datatable__expanded-content{padding:var(--vd-datatable-cell-padding);display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--vd-scale-spacing-800)}.vd-datatable__expanded-row-item{display:flex;flex-direction:column;gap:var(--vd-scale-spacing-100)}.vd-datatable__action-cell{padding:var(--vd-scale-spacing-200) var(--vd-scale-spacing-400);display:flex;align-items:center;justify-content:end}.vd-datatable__bottom{display:flex;align-items:center;justify-content:flex-end;gap:var(--vd-scale-spacing-400);margin-top:var(--vd-scale-spacing-400);flex-wrap:wrap}.vd-datatable__counter{flex:1;min-width:200px}.vd-datatable__pagination{flex-shrink:0}\n"] }]
|
|
1358
1358
|
}], propDecorators: { data: [{
|
|
1359
1359
|
type: Input
|
|
1360
1360
|
}], columns: [{
|
|
@@ -1388,11 +1388,11 @@ class VdAccordion {
|
|
|
1388
1388
|
this.active = !this.active;
|
|
1389
1389
|
}
|
|
1390
1390
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VdAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1391
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: VdAccordion, isStandalone: true, selector: "vd-accordion", inputs: { title: "title", variant: "variant", icon: "icon", active: "active" }, ngImport: i0, template: "<div\n [class.vd-accordion]=\"true\"\n [class.vd-accordion--filled]=\"variant === 'filled'\"\n [class.vd-accordion--divided]=\"variant === 'divided'\"\n [class.vd-accordion--active]=\"active\"\n>\n <!-- Title Row (clickable header) -->\n <button\n type=\"button\"\n class=\"vd-accordion__header\"\n (click)=\"toggle()\"\n [attr.aria-expanded]=\"active\"\n >\n <!-- Optional Icon -->\n <vd-icon *ngIf=\"icon\" [name]=\"icon\" size=\"md\" class=\"vd-accordion__icon\"></vd-icon>\n\n <!-- Title -->\n <span class=\"vd-accordion__title\">{{ title }}</span>\n\n <vd-icon name=\"vd-icon-
|
|
1391
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: VdAccordion, isStandalone: true, selector: "vd-accordion", inputs: { title: "title", variant: "variant", icon: "icon", active: "active" }, ngImport: i0, template: "<div\n [class.vd-accordion]=\"true\"\n [class.vd-accordion--filled]=\"variant === 'filled'\"\n [class.vd-accordion--divided]=\"variant === 'divided'\"\n [class.vd-accordion--active]=\"active\"\n>\n <!-- Title Row (clickable header) -->\n <button\n type=\"button\"\n class=\"vd-accordion__header\"\n (click)=\"toggle()\"\n [attr.aria-expanded]=\"active\"\n >\n <!-- Optional Icon -->\n <vd-icon *ngIf=\"icon\" [name]=\"icon\" size=\"md\" class=\"vd-accordion__icon\"></vd-icon>\n\n <!-- Title -->\n <span class=\"vd-accordion__title\">{{ title }}</span>\n\n <vd-icon name=\"vd-icon-chevron-down\" class=\"vd-accordion__chevron\" size=\"md\"></vd-icon>\n </button>\n\n <!-- Content Row (expandable content) -->\n <div class=\"vd-accordion__content\">\n <div class=\"vd-accordion__content-inner\">\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- Divider (only for divided style) -->\n <div *ngIf=\"variant === 'divided'\" class=\"vd-accordion__divider-container\">\n <vd-divider [inset]=\"true\"></vd-divider>\n </div>\n</div>\n", styles: [":host{width:100%;--vd-accordion-bg: transparent;--vd-accordion-bg-active: var(--vd-color-background-primary-secondary);--vd-accordion-bg-filled: var(--vd-color-background-default-secondary);--vd-accordion-border-color: var(--vd-color-border-default-tertiary);--vd-accordion-text-color: var(--vd-color-content-default-base);--_vd-accordion-padding: var(--vd-scale-spacing-400);--vd-accordion-padding: calc(var(--_vd-accordion-padding) - var(--vd-accordion-border-width));--vd-accordion-gap: var(--vd-scale-spacing-200);--vd-accordion-border-width: var(--vd-scale-border-width-sm);--vd-accordion-radius: var(--vd-scale-border-radius-md)}.vd-accordion{display:flex;flex-direction:column;width:100%;box-sizing:border-box;background-color:var(--vd-accordion-bg)}.vd-accordion--filled{--vd-accordion-bg: var(--vd-accordion-bg-filled);border:var(--vd-accordion-border-width) solid var(--vd-accordion-border-color);border-radius:var(--vd-accordion-radius);overflow:hidden}.vd-accordion--filled .vd-accordion__header{border-radius:var(--vd-accordion-radius)}.vd-accordion--divided{--vd-accordion-bg: transparent}.vd-accordion__header{display:flex;align-items:center;gap:var(--vd-accordion-gap);padding:var(--vd-accordion-padding);background-color:transparent;border:none;cursor:pointer;width:100%;text-align:left;transition:background-color .2s ease;box-sizing:border-box}.vd-accordion__header:hover{opacity:.9}.vd-accordion--active .vd-accordion__header{background-color:var(--vd-accordion-bg-active)}.vd-accordion--active .vd-accordion__chevron{transform:rotate(180deg)}.vd-accordion--active .vd-accordion__content{grid-template-rows:1fr}.vd-accordion--active .vd-accordion__content-inner{padding:var(--vd-accordion-padding);opacity:1}.vd-accordion__title{flex:1;color:var(--vd-accordion-text-color);min-width:0}.vd-accordion__chevron{flex-shrink:0;transition:transform .3s ease}.vd-accordion__content{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;overflow:hidden}.vd-accordion__content-inner{min-height:0;padding:0 var(--vd-accordion-padding);opacity:0;transition:opacity .3s ease}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: VdIcon, selector: "vd-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: VdDivider, selector: "vd-divider", inputs: ["dashed", "color", "direction", "inset"] }] });
|
|
1392
1392
|
}
|
|
1393
1393
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VdAccordion, decorators: [{
|
|
1394
1394
|
type: Component,
|
|
1395
|
-
args: [{ selector: 'vd-accordion', standalone: true, imports: [CommonModule, VdIcon, VdDivider], template: "<div\n [class.vd-accordion]=\"true\"\n [class.vd-accordion--filled]=\"variant === 'filled'\"\n [class.vd-accordion--divided]=\"variant === 'divided'\"\n [class.vd-accordion--active]=\"active\"\n>\n <!-- Title Row (clickable header) -->\n <button\n type=\"button\"\n class=\"vd-accordion__header\"\n (click)=\"toggle()\"\n [attr.aria-expanded]=\"active\"\n >\n <!-- Optional Icon -->\n <vd-icon *ngIf=\"icon\" [name]=\"icon\" size=\"md\" class=\"vd-accordion__icon\"></vd-icon>\n\n <!-- Title -->\n <span class=\"vd-accordion__title\">{{ title }}</span>\n\n <vd-icon name=\"vd-icon-
|
|
1395
|
+
args: [{ selector: 'vd-accordion', standalone: true, imports: [CommonModule, VdIcon, VdDivider], template: "<div\n [class.vd-accordion]=\"true\"\n [class.vd-accordion--filled]=\"variant === 'filled'\"\n [class.vd-accordion--divided]=\"variant === 'divided'\"\n [class.vd-accordion--active]=\"active\"\n>\n <!-- Title Row (clickable header) -->\n <button\n type=\"button\"\n class=\"vd-accordion__header\"\n (click)=\"toggle()\"\n [attr.aria-expanded]=\"active\"\n >\n <!-- Optional Icon -->\n <vd-icon *ngIf=\"icon\" [name]=\"icon\" size=\"md\" class=\"vd-accordion__icon\"></vd-icon>\n\n <!-- Title -->\n <span class=\"vd-accordion__title\">{{ title }}</span>\n\n <vd-icon name=\"vd-icon-chevron-down\" class=\"vd-accordion__chevron\" size=\"md\"></vd-icon>\n </button>\n\n <!-- Content Row (expandable content) -->\n <div class=\"vd-accordion__content\">\n <div class=\"vd-accordion__content-inner\">\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- Divider (only for divided style) -->\n <div *ngIf=\"variant === 'divided'\" class=\"vd-accordion__divider-container\">\n <vd-divider [inset]=\"true\"></vd-divider>\n </div>\n</div>\n", styles: [":host{width:100%;--vd-accordion-bg: transparent;--vd-accordion-bg-active: var(--vd-color-background-primary-secondary);--vd-accordion-bg-filled: var(--vd-color-background-default-secondary);--vd-accordion-border-color: var(--vd-color-border-default-tertiary);--vd-accordion-text-color: var(--vd-color-content-default-base);--_vd-accordion-padding: var(--vd-scale-spacing-400);--vd-accordion-padding: calc(var(--_vd-accordion-padding) - var(--vd-accordion-border-width));--vd-accordion-gap: var(--vd-scale-spacing-200);--vd-accordion-border-width: var(--vd-scale-border-width-sm);--vd-accordion-radius: var(--vd-scale-border-radius-md)}.vd-accordion{display:flex;flex-direction:column;width:100%;box-sizing:border-box;background-color:var(--vd-accordion-bg)}.vd-accordion--filled{--vd-accordion-bg: var(--vd-accordion-bg-filled);border:var(--vd-accordion-border-width) solid var(--vd-accordion-border-color);border-radius:var(--vd-accordion-radius);overflow:hidden}.vd-accordion--filled .vd-accordion__header{border-radius:var(--vd-accordion-radius)}.vd-accordion--divided{--vd-accordion-bg: transparent}.vd-accordion__header{display:flex;align-items:center;gap:var(--vd-accordion-gap);padding:var(--vd-accordion-padding);background-color:transparent;border:none;cursor:pointer;width:100%;text-align:left;transition:background-color .2s ease;box-sizing:border-box}.vd-accordion__header:hover{opacity:.9}.vd-accordion--active .vd-accordion__header{background-color:var(--vd-accordion-bg-active)}.vd-accordion--active .vd-accordion__chevron{transform:rotate(180deg)}.vd-accordion--active .vd-accordion__content{grid-template-rows:1fr}.vd-accordion--active .vd-accordion__content-inner{padding:var(--vd-accordion-padding);opacity:1}.vd-accordion__title{flex:1;color:var(--vd-accordion-text-color);min-width:0}.vd-accordion__chevron{flex-shrink:0;transition:transform .3s ease}.vd-accordion__content{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;overflow:hidden}.vd-accordion__content-inner{min-height:0;padding:0 var(--vd-accordion-padding);opacity:0;transition:opacity .3s ease}\n"] }]
|
|
1396
1396
|
}], propDecorators: { title: [{
|
|
1397
1397
|
type: Input
|
|
1398
1398
|
}], variant: [{
|
|
@@ -1479,11 +1479,11 @@ class VdTextarea {
|
|
|
1479
1479
|
}
|
|
1480
1480
|
}
|
|
1481
1481
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VdTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1482
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: VdTextarea, isStandalone: true, selector: "vd-textarea", inputs: { label: "label", hintText: "hintText", helperText: "helperText", optional: "optional", leadingIcon: "leadingIcon", trailingActionIcon: "trailingActionIcon", placeholder: "placeholder", type: "type", value: "value", maxInputCount: "maxInputCount", disabled: "disabled", state: "state" }, outputs: { valueChange: "valueChange", valueCommit: "valueCommit", trailingActionClick: "trailingActionClick", inputFocus: "inputFocus" }, viewQueries: [{ propertyName: "textareaElement", first: true, predicate: ["inputElement"], descendants: true, static: true }], ngImport: i0, template: "<div\n class=\"vd-textarea\"\n [class.vd-textarea--error]=\"state === 'error'\"\n [class.vd-textarea--disabled]=\"disabled\"\n [class.vd-textarea--success]=\"state === 'success'\"\n [class.vd-textarea--warning]=\"state === 'warning'\"\n>\n <!-- Label row -->\n <div class=\"vd-textarea__label-row\" *ngIf=\"label || optional || hintText\">\n <label *ngIf=\"label\" class=\"vd-textarea__label\" [attr.for]=\"inputId\">\n {{ label }}\n </label>\n\n <vd-icon *ngIf=\"hintText\" name=\"vd-icon-
|
|
1482
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: VdTextarea, isStandalone: true, selector: "vd-textarea", inputs: { label: "label", hintText: "hintText", helperText: "helperText", optional: "optional", leadingIcon: "leadingIcon", trailingActionIcon: "trailingActionIcon", placeholder: "placeholder", type: "type", value: "value", maxInputCount: "maxInputCount", disabled: "disabled", state: "state" }, outputs: { valueChange: "valueChange", valueCommit: "valueCommit", trailingActionClick: "trailingActionClick", inputFocus: "inputFocus" }, viewQueries: [{ propertyName: "textareaElement", first: true, predicate: ["inputElement"], descendants: true, static: true }], ngImport: i0, template: "<div\n class=\"vd-textarea\"\n [class.vd-textarea--error]=\"state === 'error'\"\n [class.vd-textarea--disabled]=\"disabled\"\n [class.vd-textarea--success]=\"state === 'success'\"\n [class.vd-textarea--warning]=\"state === 'warning'\"\n>\n <!-- Label row -->\n <div class=\"vd-textarea__label-row\" *ngIf=\"label || optional || hintText\">\n <label *ngIf=\"label\" class=\"vd-textarea__label\" [attr.for]=\"inputId\">\n {{ label }}\n </label>\n\n <vd-icon *ngIf=\"hintText\" name=\"vd-icon-question-circle\" [vdTooltip]=\"hintText\"> ></vd-icon>\n <p *ngIf=\"optional\" class=\"vd-textarea__optional body-medium-italic\">Optional</p>\n </div>\n\n <div class=\"vd-textarea__container\" (click)=\"focusInput()\">\n <span *ngIf=\"leadingIcon\" class=\"vd-textarea__leading-icon\">\n <vd-icon [name]=\"leadingIcon\"></vd-icon>\n </span>\n <textarea\n #inputElement\n [id]=\"inputId\"\n class=\"vd-textarea__input body-medium\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n [attr.maxlength]=\"maxInputCount ? maxInputCount : null\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n [disabled]=\"disabled\"\n ></textarea>\n\n <span *ngIf=\"trailingStateIcon\" class=\"vd-textarea__trailing-icon state\">\n <vd-icon [name]=\"trailingStateIcon\"></vd-icon>\n </span>\n\n <span class=\"vd-textarea__trailing-action-container\" *ngIf=\"trailingActionIcon\">\n <vd-icon-button\n class=\"vd-textarea__trailing-action\"\n variant=\"transparent\"\n color=\"neutral\"\n [disabled]=\"disabled\"\n [icon]=\"trailingActionIcon\"\n (click)=\"onTrailingActionClick(); $event.stopPropagation()\"\n ></vd-icon-button>\n </span>\n </div>\n\n <!-- Helper & counter row -->\n <div class=\"vd-textarea__helper-row\" *ngIf=\"helperText || maxInputCount\">\n <span *ngIf=\"helperText\" class=\"vd-textarea__helper-text body-small\">\n {{ helperText }}\n </span>\n\n <span *ngIf=\"maxInputCount\" class=\"vd-textarea__input-counter body-small\">\n {{ value.length || 0 }}/{{ maxInputCount }}\n </span>\n </div>\n</div>\n", styles: [":host{display:block;width:100%;--vd-textarea-border-base: var(--vd-color-border-default-base);--vd-textarea-border-secondary: var(--vd-color-border-default-secondary);--vd-textarea-border-tertiary: var(--vd-color-border-neutral-tertiary);--vd-textarea-border-disabled: var(--vd-color-border-default-disabled);--vd-textarea-bg-base: var(--vd-color-background-default-secondary);--vd-textarea-bg-secondary: var(--vd-color-background-default-secondary);--vd-textarea-bg-disabled: var(--vd-color-background-default-disabled);--vd-textarea-text-base: var(--vd-color-content-default-base);--vd-textarea-text-secondary: var(--vd-color-content-default-secondary);--vd-textarea-text-disabled: var(--vd-color-content-default-disabled);--vd-textarea-text-placeholder: var(--vd-color-content-default-disabled);--vd-textarea-icon-base: var(--vd-color-content-default-base);--vd-textarea-icon-disabled: var(--vd-color-content-default-disabled);--vd-textarea-padding: var(--vd-scale-spacing-300);--vd-textarea-border-width: var(--vd-scale-border-width-sm);--vd-textarea-radius: var(--vd-scale-border-radius-md);--vd-textarea-outline-width: var(--vd-scale-border-width-md);--vd-textarea-outline-color: var(--vd-color-border-primary-tertiary);--vd-textarea-min-height: var(--vd-scale-spacing-1800)}.vd-textarea--success{--vd-textarea-icon-state: var(--vd-color-content-success-base);--vd-textarea-text-state: var(--vd-color-content-success-base);--vd-textarea-border-state: var(--vd-color-border-success-base);--vd-textarea-bg-state: var(--vd-color-background-success-secondary)}.vd-textarea--error{--vd-textarea-icon-state: var(--vd-color-content-error-base);--vd-textarea-text-state: var(--vd-color-content-error-base);--vd-textarea-border-state: var(--vd-color-border-error-base);--vd-textarea-bg-state: var(--vd-color-background-error-secondary)}.vd-textarea--warning{--vd-textarea-icon-state: var(--vd-color-content-warning-base);--vd-textarea-text-state: var(--vd-color-content-warning-base);--vd-textarea-border-state: var(--vd-color-border-warning-base);--vd-textarea-bg-state: var(--vd-color-background-warning-secondary)}.vd-textarea{width:100%;min-width:240px}.vd-textarea__label-row{display:flex;gap:var(--vd-scale-spacing-200);margin-bottom:var(--vd-scale-spacing-100)}.vd-textarea__label{color:var(--vd-textarea-text-base)}.vd-textarea__optional{flex:1;text-align:right;margin:0}.vd-textarea__container{display:flex;gap:var(--vd-scale-spacing-200);align-items:start;margin:var(--vd-scale-spacing-100) 0;padding:calc(var(--vd-textarea-padding) - var(--vd-textarea-border-width));border:var(--vd-textarea-border-width) solid var(--vd-textarea-border-secondary);border-radius:var(--vd-textarea-radius);background:var(--vd-textarea-bg-base)}.vd-textarea__container:focus-within:not(:has(.vd-textarea__trailing-action-container:focus-within)){border-color:var(--vd-textarea-border-base);background:var(--vd-textarea-bg-secondary)}.vd-textarea__input{flex:1;min-width:0;padding:0;border:none;outline:none;background:transparent;resize:none;color:var(--vd-textarea-text-base);overflow-y:auto;min-height:var(--vd-textarea-min-height)}.vd-textarea__input:focus{outline:none}.vd-textarea__input::placeholder{color:var(--vd-textarea-text-placeholder)}.vd-textarea__input:-webkit-autofill{box-shadow:0 0 0 1000px var(--vd-textarea-bg-base) inset;-webkit-box-shadow:0 0 0px 1000px var(--vd-textarea-bg-base) inset;-webkit-text-fill-color:var(--vd-textarea-text-base);transition:background-color 5000s ease-in-out}.vd-textarea__input:-moz-autofill{box-shadow:0 0 0 1000px var(--vd-textarea-bg-base) inset;-moz-text-fill-color:var(--vd-textarea-text-base)}.vd-textarea__leading-icon,.vd-textarea__trailing-icon{color:var(--vd-textarea-icon-base)}.vd-textarea__trailing-action-container{position:relative;height:var(--vd-scale-spacing-600);width:var(--vd-scale-spacing-800)}.vd-textarea__trailing-action{position:absolute;top:50%;transform:translateY(-50%)}.vd-textarea__helper-row{display:flex}.vd-textarea__helper-text{margin:0}.vd-textarea__input-counter{flex:1;text-align:right;margin:0}.vd-textarea:focus-within:not(:has(.vd-textarea__trailing-action-container:focus-within)) .vd-textarea__container{border-color:var(--vd-textarea-border-base);outline:var(--vd-textarea-outline-width) solid var(--vd-textarea-outline-color);outline-offset:var(--vd-scale-spacing-50);background:var(--vd-textarea-bg-secondary)}.vd-textarea:focus-within:not(:has(.vd-textarea__trailing-action-container:focus-within)) .vd-textarea__label,.vd-textarea:focus-within:not(:has(.vd-textarea__trailing-action-container:focus-within)) .vd-textarea__helper-text{color:var(--vd-textarea-text-secondary)}.vd-textarea--disabled .vd-textarea__container{border-color:var(--vd-textarea-border-disabled);background:var(--vd-textarea-bg-disabled)}.vd-textarea--disabled .vd-textarea__label-row,.vd-textarea--disabled .vd-textarea__helper-text,.vd-textarea--disabled .vd-textarea__input{color:var(--vd-textarea-text-disabled)}.vd-textarea--disabled .vd-textarea__leading-icon{color:var(--vd-textarea-icon-disabled)}.vd-textarea--disabled .vd-textarea__trailing-action{pointer-events:none}.vd-textarea--success .vd-textarea__trailing-icon{color:var(--vd-textarea-icon-state)}.vd-textarea--success .vd-textarea__helper-text,.vd-textarea--error .vd-textarea__label{color:var(--vd-textarea-text-state)}.vd-textarea--error .vd-textarea__container{border-color:var(--vd-textarea-border-state);background:var(--vd-textarea-bg-state)}.vd-textarea--error .vd-textarea__trailing-icon{color:var(--vd-textarea-icon-state)}.vd-textarea--error .vd-textarea__helper-text{color:var(--vd-textarea-text-state)}.vd-textarea--warning .vd-textarea__trailing-icon{color:var(--vd-textarea-icon-state)}.vd-textarea--warning .vd-textarea__helper-text{color:var(--vd-textarea-text-state)}.vd-input__helper-icon{position:relative;display:inline-flex;align-items:center;cursor:pointer}.vd-input__helper-icon .vd-input__hint-tooltip{width:max-content;max-width:240px;min-width:120px;white-space:normal;text-align:center;position:absolute;bottom:100%;left:50%;transform:translate(-50%);background-color:var(--vd-color-background-default-always-dark, #333);color:var(--vd-color-background-default-always-light, #fff);padding:8px 12px;border-radius:var(--vd-radius-sm, 4px);z-index:10;box-shadow:0 2px 8px #0003;margin-top:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: VdIcon, selector: "vd-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: VdIconButton, selector: "vd-icon-button", inputs: ["icon", "ariaLabel", "variant", "color", "size", "rounded", "disabled", "loading"] }, { kind: "directive", type: VdTooltipDirective, selector: "[vdTooltip]", inputs: ["vdTooltip", "vdTooltipPosition"] }] });
|
|
1483
1483
|
}
|
|
1484
1484
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VdTextarea, decorators: [{
|
|
1485
1485
|
type: Component,
|
|
1486
|
-
args: [{ selector: 'vd-textarea', standalone: true, imports: [CommonModule, VdIcon, VdIconButton, VdTooltipDirective], template: "<div\n class=\"vd-textarea\"\n [class.vd-textarea--error]=\"state === 'error'\"\n [class.vd-textarea--disabled]=\"disabled\"\n [class.vd-textarea--success]=\"state === 'success'\"\n [class.vd-textarea--warning]=\"state === 'warning'\"\n>\n <!-- Label row -->\n <div class=\"vd-textarea__label-row\" *ngIf=\"label || optional || hintText\">\n <label *ngIf=\"label\" class=\"vd-textarea__label\" [attr.for]=\"inputId\">\n {{ label }}\n </label>\n\n <vd-icon *ngIf=\"hintText\" name=\"vd-icon-
|
|
1486
|
+
args: [{ selector: 'vd-textarea', standalone: true, imports: [CommonModule, VdIcon, VdIconButton, VdTooltipDirective], template: "<div\n class=\"vd-textarea\"\n [class.vd-textarea--error]=\"state === 'error'\"\n [class.vd-textarea--disabled]=\"disabled\"\n [class.vd-textarea--success]=\"state === 'success'\"\n [class.vd-textarea--warning]=\"state === 'warning'\"\n>\n <!-- Label row -->\n <div class=\"vd-textarea__label-row\" *ngIf=\"label || optional || hintText\">\n <label *ngIf=\"label\" class=\"vd-textarea__label\" [attr.for]=\"inputId\">\n {{ label }}\n </label>\n\n <vd-icon *ngIf=\"hintText\" name=\"vd-icon-question-circle\" [vdTooltip]=\"hintText\"> ></vd-icon>\n <p *ngIf=\"optional\" class=\"vd-textarea__optional body-medium-italic\">Optional</p>\n </div>\n\n <div class=\"vd-textarea__container\" (click)=\"focusInput()\">\n <span *ngIf=\"leadingIcon\" class=\"vd-textarea__leading-icon\">\n <vd-icon [name]=\"leadingIcon\"></vd-icon>\n </span>\n <textarea\n #inputElement\n [id]=\"inputId\"\n class=\"vd-textarea__input body-medium\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n [attr.maxlength]=\"maxInputCount ? maxInputCount : null\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n [disabled]=\"disabled\"\n ></textarea>\n\n <span *ngIf=\"trailingStateIcon\" class=\"vd-textarea__trailing-icon state\">\n <vd-icon [name]=\"trailingStateIcon\"></vd-icon>\n </span>\n\n <span class=\"vd-textarea__trailing-action-container\" *ngIf=\"trailingActionIcon\">\n <vd-icon-button\n class=\"vd-textarea__trailing-action\"\n variant=\"transparent\"\n color=\"neutral\"\n [disabled]=\"disabled\"\n [icon]=\"trailingActionIcon\"\n (click)=\"onTrailingActionClick(); $event.stopPropagation()\"\n ></vd-icon-button>\n </span>\n </div>\n\n <!-- Helper & counter row -->\n <div class=\"vd-textarea__helper-row\" *ngIf=\"helperText || maxInputCount\">\n <span *ngIf=\"helperText\" class=\"vd-textarea__helper-text body-small\">\n {{ helperText }}\n </span>\n\n <span *ngIf=\"maxInputCount\" class=\"vd-textarea__input-counter body-small\">\n {{ value.length || 0 }}/{{ maxInputCount }}\n </span>\n </div>\n</div>\n", styles: [":host{display:block;width:100%;--vd-textarea-border-base: var(--vd-color-border-default-base);--vd-textarea-border-secondary: var(--vd-color-border-default-secondary);--vd-textarea-border-tertiary: var(--vd-color-border-neutral-tertiary);--vd-textarea-border-disabled: var(--vd-color-border-default-disabled);--vd-textarea-bg-base: var(--vd-color-background-default-secondary);--vd-textarea-bg-secondary: var(--vd-color-background-default-secondary);--vd-textarea-bg-disabled: var(--vd-color-background-default-disabled);--vd-textarea-text-base: var(--vd-color-content-default-base);--vd-textarea-text-secondary: var(--vd-color-content-default-secondary);--vd-textarea-text-disabled: var(--vd-color-content-default-disabled);--vd-textarea-text-placeholder: var(--vd-color-content-default-disabled);--vd-textarea-icon-base: var(--vd-color-content-default-base);--vd-textarea-icon-disabled: var(--vd-color-content-default-disabled);--vd-textarea-padding: var(--vd-scale-spacing-300);--vd-textarea-border-width: var(--vd-scale-border-width-sm);--vd-textarea-radius: var(--vd-scale-border-radius-md);--vd-textarea-outline-width: var(--vd-scale-border-width-md);--vd-textarea-outline-color: var(--vd-color-border-primary-tertiary);--vd-textarea-min-height: var(--vd-scale-spacing-1800)}.vd-textarea--success{--vd-textarea-icon-state: var(--vd-color-content-success-base);--vd-textarea-text-state: var(--vd-color-content-success-base);--vd-textarea-border-state: var(--vd-color-border-success-base);--vd-textarea-bg-state: var(--vd-color-background-success-secondary)}.vd-textarea--error{--vd-textarea-icon-state: var(--vd-color-content-error-base);--vd-textarea-text-state: var(--vd-color-content-error-base);--vd-textarea-border-state: var(--vd-color-border-error-base);--vd-textarea-bg-state: var(--vd-color-background-error-secondary)}.vd-textarea--warning{--vd-textarea-icon-state: var(--vd-color-content-warning-base);--vd-textarea-text-state: var(--vd-color-content-warning-base);--vd-textarea-border-state: var(--vd-color-border-warning-base);--vd-textarea-bg-state: var(--vd-color-background-warning-secondary)}.vd-textarea{width:100%;min-width:240px}.vd-textarea__label-row{display:flex;gap:var(--vd-scale-spacing-200);margin-bottom:var(--vd-scale-spacing-100)}.vd-textarea__label{color:var(--vd-textarea-text-base)}.vd-textarea__optional{flex:1;text-align:right;margin:0}.vd-textarea__container{display:flex;gap:var(--vd-scale-spacing-200);align-items:start;margin:var(--vd-scale-spacing-100) 0;padding:calc(var(--vd-textarea-padding) - var(--vd-textarea-border-width));border:var(--vd-textarea-border-width) solid var(--vd-textarea-border-secondary);border-radius:var(--vd-textarea-radius);background:var(--vd-textarea-bg-base)}.vd-textarea__container:focus-within:not(:has(.vd-textarea__trailing-action-container:focus-within)){border-color:var(--vd-textarea-border-base);background:var(--vd-textarea-bg-secondary)}.vd-textarea__input{flex:1;min-width:0;padding:0;border:none;outline:none;background:transparent;resize:none;color:var(--vd-textarea-text-base);overflow-y:auto;min-height:var(--vd-textarea-min-height)}.vd-textarea__input:focus{outline:none}.vd-textarea__input::placeholder{color:var(--vd-textarea-text-placeholder)}.vd-textarea__input:-webkit-autofill{box-shadow:0 0 0 1000px var(--vd-textarea-bg-base) inset;-webkit-box-shadow:0 0 0px 1000px var(--vd-textarea-bg-base) inset;-webkit-text-fill-color:var(--vd-textarea-text-base);transition:background-color 5000s ease-in-out}.vd-textarea__input:-moz-autofill{box-shadow:0 0 0 1000px var(--vd-textarea-bg-base) inset;-moz-text-fill-color:var(--vd-textarea-text-base)}.vd-textarea__leading-icon,.vd-textarea__trailing-icon{color:var(--vd-textarea-icon-base)}.vd-textarea__trailing-action-container{position:relative;height:var(--vd-scale-spacing-600);width:var(--vd-scale-spacing-800)}.vd-textarea__trailing-action{position:absolute;top:50%;transform:translateY(-50%)}.vd-textarea__helper-row{display:flex}.vd-textarea__helper-text{margin:0}.vd-textarea__input-counter{flex:1;text-align:right;margin:0}.vd-textarea:focus-within:not(:has(.vd-textarea__trailing-action-container:focus-within)) .vd-textarea__container{border-color:var(--vd-textarea-border-base);outline:var(--vd-textarea-outline-width) solid var(--vd-textarea-outline-color);outline-offset:var(--vd-scale-spacing-50);background:var(--vd-textarea-bg-secondary)}.vd-textarea:focus-within:not(:has(.vd-textarea__trailing-action-container:focus-within)) .vd-textarea__label,.vd-textarea:focus-within:not(:has(.vd-textarea__trailing-action-container:focus-within)) .vd-textarea__helper-text{color:var(--vd-textarea-text-secondary)}.vd-textarea--disabled .vd-textarea__container{border-color:var(--vd-textarea-border-disabled);background:var(--vd-textarea-bg-disabled)}.vd-textarea--disabled .vd-textarea__label-row,.vd-textarea--disabled .vd-textarea__helper-text,.vd-textarea--disabled .vd-textarea__input{color:var(--vd-textarea-text-disabled)}.vd-textarea--disabled .vd-textarea__leading-icon{color:var(--vd-textarea-icon-disabled)}.vd-textarea--disabled .vd-textarea__trailing-action{pointer-events:none}.vd-textarea--success .vd-textarea__trailing-icon{color:var(--vd-textarea-icon-state)}.vd-textarea--success .vd-textarea__helper-text,.vd-textarea--error .vd-textarea__label{color:var(--vd-textarea-text-state)}.vd-textarea--error .vd-textarea__container{border-color:var(--vd-textarea-border-state);background:var(--vd-textarea-bg-state)}.vd-textarea--error .vd-textarea__trailing-icon{color:var(--vd-textarea-icon-state)}.vd-textarea--error .vd-textarea__helper-text{color:var(--vd-textarea-text-state)}.vd-textarea--warning .vd-textarea__trailing-icon{color:var(--vd-textarea-icon-state)}.vd-textarea--warning .vd-textarea__helper-text{color:var(--vd-textarea-text-state)}.vd-input__helper-icon{position:relative;display:inline-flex;align-items:center;cursor:pointer}.vd-input__helper-icon .vd-input__hint-tooltip{width:max-content;max-width:240px;min-width:120px;white-space:normal;text-align:center;position:absolute;bottom:100%;left:50%;transform:translate(-50%);background-color:var(--vd-color-background-default-always-dark, #333);color:var(--vd-color-background-default-always-light, #fff);padding:8px 12px;border-radius:var(--vd-radius-sm, 4px);z-index:10;box-shadow:0 2px 8px #0003;margin-top:4px}\n"] }]
|
|
1487
1487
|
}], propDecorators: { label: [{
|
|
1488
1488
|
type: Input
|
|
1489
1489
|
}], hintText: [{
|
|
@@ -1597,11 +1597,11 @@ class VdSelect {
|
|
|
1597
1597
|
}
|
|
1598
1598
|
}
|
|
1599
1599
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VdSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1600
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: VdSelect, isStandalone: true, selector: "vd-select", inputs: { label: "label", hintText: "hintText", helperText: "helperText", optional: "optional", leadingIcon: "leadingIcon", placeholder: "placeholder", disabled: "disabled", options: "options", value: "value", state: "state" }, outputs: { valueChange: "valueChange", valueCommit: "valueCommit", inputFocus: "inputFocus" }, viewQueries: [{ propertyName: "selectElement", first: true, predicate: ["selectElement"], descendants: true, static: true }], ngImport: i0, template: "<div\n class=\"vd-select\"\n [class.vd-select--error]=\"state === 'error'\"\n [class.vd-select--disabled]=\"disabled\"\n [class.vd-select--success]=\"state === 'success'\"\n [class.vd-select--warning]=\"state === 'warning'\"\n>\n <!-- Label row -->\n <div class=\"vd-select__label-row\" *ngIf=\"label || optional || hintText\">\n <label *ngIf=\"label\" class=\"vd-select__label\" [attr.for]=\"selectId\">\n {{ label }}\n </label>\n\n <vd-icon *ngIf=\"hintText\" name=\"vd-icon-
|
|
1600
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: VdSelect, isStandalone: true, selector: "vd-select", inputs: { label: "label", hintText: "hintText", helperText: "helperText", optional: "optional", leadingIcon: "leadingIcon", placeholder: "placeholder", disabled: "disabled", options: "options", value: "value", state: "state" }, outputs: { valueChange: "valueChange", valueCommit: "valueCommit", inputFocus: "inputFocus" }, viewQueries: [{ propertyName: "selectElement", first: true, predicate: ["selectElement"], descendants: true, static: true }], ngImport: i0, template: "<div\n class=\"vd-select\"\n [class.vd-select--error]=\"state === 'error'\"\n [class.vd-select--disabled]=\"disabled\"\n [class.vd-select--success]=\"state === 'success'\"\n [class.vd-select--warning]=\"state === 'warning'\"\n>\n <!-- Label row -->\n <div class=\"vd-select__label-row\" *ngIf=\"label || optional || hintText\">\n <label *ngIf=\"label\" class=\"vd-select__label\" [attr.for]=\"selectId\">\n {{ label }}\n </label>\n\n <vd-icon *ngIf=\"hintText\" name=\"vd-icon-question-circle\" [vdTooltip]=\"hintText\"> ></vd-icon>\n <p *ngIf=\"optional\" class=\"vd-select__optional body-medium-italic\">Optional</p>\n </div>\n\n <div class=\"vd-select__container\" (click)=\"focusSelect()\">\n <span *ngIf=\"leadingIcon\" class=\"vd-select__leading-icon\">\n <vd-icon [name]=\"leadingIcon\"></vd-icon>\n </span>\n\n <select\n #selectElement\n [id]=\"selectId\"\n class=\"vd-select__input body-medium\"\n [disabled]=\"disabled\"\n [value]=\"value !== null ? value : ''\"\n [class.placeholder]=\"!value\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (change)=\"onChange($event)\"\n >\n <option *ngIf=\"placeholder\" value=\"\" disabled selected hidden>{{ placeholder }}</option>\n <option\n *ngFor=\"let opt of options\"\n [value]=\"opt.value\"\n [disabled]=\"opt.disabled\"\n [selected]=\"opt.value === value\"\n >\n {{ opt.label }}\n </option>\n </select>\n\n <span *ngIf=\"trailingStateIcon\" class=\"vd-select__trailing-icon state\">\n <vd-icon [name]=\"trailingStateIcon\"></vd-icon>\n </span>\n\n <span class=\"vd-select__chevron\">\n <vd-icon name=\"vd-icon-chevron-down\"></vd-icon>\n </span>\n </div>\n\n <!-- Helper & counter row -->\n <div class=\"vd-select__helper-row\" *ngIf=\"helperText\">\n <span *ngIf=\"helperText\" class=\"vd-select__helper-text body-small\">\n {{ helperText }}\n </span>\n </div>\n</div>\n", styles: [":host{display:block;width:100%;--vd-select-border-base: var(--vd-color-border-default-base);--vd-select-border-secondary: var(--vd-color-border-default-secondary);--vd-select-border-tertiary: var(--vd-color-border-neutral-tertiary);--vd-select-border-disabled: var(--vd-color-border-default-disabled);--vd-select-bg-base: var(--vd-color-background-default-secondary);--vd-select-bg-secondary: var(--vd-color-background-default-secondary);--vd-select-bg-disabled: var(--vd-color-background-default-disabled);--vd-select-text-base: var(--vd-color-content-default-base);--vd-select-text-secondary: var(--vd-color-content-default-secondary);--vd-select-text-disabled: var(--vd-color-content-default-disabled);--vd-select-text-placeholder: var(--vd-color-content-default-disabled);--vd-select-icon-base: var(--vd-color-content-default-tertiary);--vd-select-icon-secondary: var(--vd-color-content-default-secondary);--vd-select-icon-disabled: var(--vd-color-content-default-disabled);--vd-select-padding: var(--vd-scale-spacing-300);--vd-select-border-width: var(--vd-scale-border-width-sm);--vd-select-radius: var(--vd-scale-border-radius-md);--vd-select-outline-width: var(--vd-scale-border-width-md);--vd-select-outline-color: var(--vd-color-border-primary-tertiary)}.vd-select--success{--vd-select-icon-state: var(--vd-color-content-success-base);--vd-select-text-state: var(--vd-color-content-success-base);--vd-select-border-state: var(--vd-color-border-success-base);--vd-select-bg-state: var(--vd-color-background-success-secondary)}.vd-select--error{--vd-select-icon-state: var(--vd-color-content-error-base);--vd-select-text-state: var(--vd-color-content-error-base);--vd-select-border-state: var(--vd-color-border-error-base);--vd-select-bg-state: var(--vd-color-background-error-secondary)}.vd-select--warning{--vd-select-icon-state: var(--vd-color-content-warning-base);--vd-select-text-state: var(--vd-color-content-warning-base);--vd-select-border-state: var(--vd-color-border-warning-base);--vd-select-bg-state: var(--vd-color-background-warning-secondary)}.vd-select{width:100%}.vd-select__label-row{display:flex;gap:var(--vd-scale-spacing-200);margin-bottom:var(--vd-scale-spacing-100)}.vd-select__label{color:var(--vd-select-text-base)}.vd-select__optional{flex:1;text-align:right;margin:0}.vd-select__container{display:flex;position:relative;gap:var(--vd-scale-spacing-200);align-items:center;margin:0;padding:calc(var(--vd-select-padding) - var(--vd-select-border-width));border:var(--vd-select-border-width) solid var(--vd-select-border-secondary);border-radius:var(--vd-select-radius);background:var(--vd-select-bg-base);cursor:pointer}.vd-select__container:focus-within:not(:has(.vd-select__trailing-action-container:focus-within)){border-color:var(--vd-select-border-base);outline:var(--vd-select-outline-width) solid var(--vd-select-outline-color);outline-offset:var(--vd-scale-spacing-50);background:var(--vd-select-bg-secondary)}.vd-select__input{flex:1;border:none;padding:0;min-width:0;height:100%;background-color:transparent;color:var(--vd-select-text-base);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.vd-select__input:focus{outline:none}.vd-select__input::placeholder,.vd-select__input.placeholder{color:var(--vd-select-text-placeholder)}.vd-select__input:-webkit-autofill{box-shadow:0 0 0 1000px var(--vd-select-bg-base) inset;-webkit-box-shadow:0 0 0px 1000px var(--vd-select-bg-base) inset;-webkit-text-fill-color:var(--vd-select-text-base);transition:background-color 5000s ease-in-out}.vd-select__input:-moz-autofill{box-shadow:0 0 0 1000px var(--vd-select-bg-base) inset;-moz-text-fill-color:var(--vd-select-text-base)}.vd-select__leading-icon{display:inline-flex;color:var(--vd-select-icon-base)}.vd-select__trailing-icon{display:inline-flex;color:var(--vd-select-icon-secondary)}.vd-select__chevron{display:inline-flex;-webkit-user-select:none;user-select:none}.vd-select__helper-row{display:flex;margin-top:var(--vd-scale-spacing-100)}.vd-select__helper-text{margin:0}.vd-select__input-counter{flex:1;text-align:right;margin:0}.vd-select:focus-within:not(:has(.vd-select__trailing-action-container:focus-within)) .vd-select__label,.vd-select:focus-within:not(:has(.vd-select__trailing-action-container:focus-within)) .vd-select__helper-text{color:var(--vd-select-text-secondary)}.vd-select--disabled .vd-select__container{border-color:var(--vd-select-border-disabled);background:var(--vd-select-bg-disabled)}.vd-select--disabled .vd-select__label-row,.vd-select--disabled .vd-select__helper-text,.vd-select--disabled .vd-select__input{color:var(--vd-select-text-disabled)}.vd-select--disabled .vd-select__leading-icon{color:var(--vd-select-icon-disabled)}.vd-select--success .vd-select__trailing-icon,.vd-select--warning .vd-select__trailing-icon{color:var(--vd-select-icon-state)}.vd-select--success .vd-select__helper-text,.vd-select--warning .vd-select__helper-text,.vd-select--error .vd-select__label{color:var(--vd-select-text-state)}.vd-select--error .vd-select__container{border-color:var(--vd-select-border-state);background:var(--vd-select-bg-state)}.vd-select--error .vd-select__trailing-icon{color:var(--vd-select-icon-state)}.vd-select--error .vd-select__helper-text{color:var(--vd-select-text-state)}.vd-select__helper-icon{position:relative;display:inline-flex;align-items:center;cursor:pointer}.vd-select__helper-icon .vd-select__hint-tooltip{width:max-content;max-width:240px;min-width:120px;white-space:normal;text-align:center;position:absolute;bottom:100%;left:50%;transform:translate(-50%);background-color:var(--vd-color-background-default-always-dark, #333);color:var(--vd-color-background-default-always-light, #fff);padding:8px 12px;border-radius:var(--vd-radius-sm, 4px);z-index:10;box-shadow:0 2px 8px #0003;margin-top:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: VdIcon, selector: "vd-icon", inputs: ["name", "size", "color"] }, { kind: "directive", type: VdTooltipDirective, selector: "[vdTooltip]", inputs: ["vdTooltip", "vdTooltipPosition"] }] });
|
|
1601
1601
|
}
|
|
1602
1602
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VdSelect, decorators: [{
|
|
1603
1603
|
type: Component,
|
|
1604
|
-
args: [{ selector: 'vd-select', standalone: true, imports: [CommonModule, VdIcon, VdTooltipDirective], template: "<div\n class=\"vd-select\"\n [class.vd-select--error]=\"state === 'error'\"\n [class.vd-select--disabled]=\"disabled\"\n [class.vd-select--success]=\"state === 'success'\"\n [class.vd-select--warning]=\"state === 'warning'\"\n>\n <!-- Label row -->\n <div class=\"vd-select__label-row\" *ngIf=\"label || optional || hintText\">\n <label *ngIf=\"label\" class=\"vd-select__label\" [attr.for]=\"selectId\">\n {{ label }}\n </label>\n\n <vd-icon *ngIf=\"hintText\" name=\"vd-icon-
|
|
1604
|
+
args: [{ selector: 'vd-select', standalone: true, imports: [CommonModule, VdIcon, VdTooltipDirective], template: "<div\n class=\"vd-select\"\n [class.vd-select--error]=\"state === 'error'\"\n [class.vd-select--disabled]=\"disabled\"\n [class.vd-select--success]=\"state === 'success'\"\n [class.vd-select--warning]=\"state === 'warning'\"\n>\n <!-- Label row -->\n <div class=\"vd-select__label-row\" *ngIf=\"label || optional || hintText\">\n <label *ngIf=\"label\" class=\"vd-select__label\" [attr.for]=\"selectId\">\n {{ label }}\n </label>\n\n <vd-icon *ngIf=\"hintText\" name=\"vd-icon-question-circle\" [vdTooltip]=\"hintText\"> ></vd-icon>\n <p *ngIf=\"optional\" class=\"vd-select__optional body-medium-italic\">Optional</p>\n </div>\n\n <div class=\"vd-select__container\" (click)=\"focusSelect()\">\n <span *ngIf=\"leadingIcon\" class=\"vd-select__leading-icon\">\n <vd-icon [name]=\"leadingIcon\"></vd-icon>\n </span>\n\n <select\n #selectElement\n [id]=\"selectId\"\n class=\"vd-select__input body-medium\"\n [disabled]=\"disabled\"\n [value]=\"value !== null ? value : ''\"\n [class.placeholder]=\"!value\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (change)=\"onChange($event)\"\n >\n <option *ngIf=\"placeholder\" value=\"\" disabled selected hidden>{{ placeholder }}</option>\n <option\n *ngFor=\"let opt of options\"\n [value]=\"opt.value\"\n [disabled]=\"opt.disabled\"\n [selected]=\"opt.value === value\"\n >\n {{ opt.label }}\n </option>\n </select>\n\n <span *ngIf=\"trailingStateIcon\" class=\"vd-select__trailing-icon state\">\n <vd-icon [name]=\"trailingStateIcon\"></vd-icon>\n </span>\n\n <span class=\"vd-select__chevron\">\n <vd-icon name=\"vd-icon-chevron-down\"></vd-icon>\n </span>\n </div>\n\n <!-- Helper & counter row -->\n <div class=\"vd-select__helper-row\" *ngIf=\"helperText\">\n <span *ngIf=\"helperText\" class=\"vd-select__helper-text body-small\">\n {{ helperText }}\n </span>\n </div>\n</div>\n", styles: [":host{display:block;width:100%;--vd-select-border-base: var(--vd-color-border-default-base);--vd-select-border-secondary: var(--vd-color-border-default-secondary);--vd-select-border-tertiary: var(--vd-color-border-neutral-tertiary);--vd-select-border-disabled: var(--vd-color-border-default-disabled);--vd-select-bg-base: var(--vd-color-background-default-secondary);--vd-select-bg-secondary: var(--vd-color-background-default-secondary);--vd-select-bg-disabled: var(--vd-color-background-default-disabled);--vd-select-text-base: var(--vd-color-content-default-base);--vd-select-text-secondary: var(--vd-color-content-default-secondary);--vd-select-text-disabled: var(--vd-color-content-default-disabled);--vd-select-text-placeholder: var(--vd-color-content-default-disabled);--vd-select-icon-base: var(--vd-color-content-default-tertiary);--vd-select-icon-secondary: var(--vd-color-content-default-secondary);--vd-select-icon-disabled: var(--vd-color-content-default-disabled);--vd-select-padding: var(--vd-scale-spacing-300);--vd-select-border-width: var(--vd-scale-border-width-sm);--vd-select-radius: var(--vd-scale-border-radius-md);--vd-select-outline-width: var(--vd-scale-border-width-md);--vd-select-outline-color: var(--vd-color-border-primary-tertiary)}.vd-select--success{--vd-select-icon-state: var(--vd-color-content-success-base);--vd-select-text-state: var(--vd-color-content-success-base);--vd-select-border-state: var(--vd-color-border-success-base);--vd-select-bg-state: var(--vd-color-background-success-secondary)}.vd-select--error{--vd-select-icon-state: var(--vd-color-content-error-base);--vd-select-text-state: var(--vd-color-content-error-base);--vd-select-border-state: var(--vd-color-border-error-base);--vd-select-bg-state: var(--vd-color-background-error-secondary)}.vd-select--warning{--vd-select-icon-state: var(--vd-color-content-warning-base);--vd-select-text-state: var(--vd-color-content-warning-base);--vd-select-border-state: var(--vd-color-border-warning-base);--vd-select-bg-state: var(--vd-color-background-warning-secondary)}.vd-select{width:100%}.vd-select__label-row{display:flex;gap:var(--vd-scale-spacing-200);margin-bottom:var(--vd-scale-spacing-100)}.vd-select__label{color:var(--vd-select-text-base)}.vd-select__optional{flex:1;text-align:right;margin:0}.vd-select__container{display:flex;position:relative;gap:var(--vd-scale-spacing-200);align-items:center;margin:0;padding:calc(var(--vd-select-padding) - var(--vd-select-border-width));border:var(--vd-select-border-width) solid var(--vd-select-border-secondary);border-radius:var(--vd-select-radius);background:var(--vd-select-bg-base);cursor:pointer}.vd-select__container:focus-within:not(:has(.vd-select__trailing-action-container:focus-within)){border-color:var(--vd-select-border-base);outline:var(--vd-select-outline-width) solid var(--vd-select-outline-color);outline-offset:var(--vd-scale-spacing-50);background:var(--vd-select-bg-secondary)}.vd-select__input{flex:1;border:none;padding:0;min-width:0;height:100%;background-color:transparent;color:var(--vd-select-text-base);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.vd-select__input:focus{outline:none}.vd-select__input::placeholder,.vd-select__input.placeholder{color:var(--vd-select-text-placeholder)}.vd-select__input:-webkit-autofill{box-shadow:0 0 0 1000px var(--vd-select-bg-base) inset;-webkit-box-shadow:0 0 0px 1000px var(--vd-select-bg-base) inset;-webkit-text-fill-color:var(--vd-select-text-base);transition:background-color 5000s ease-in-out}.vd-select__input:-moz-autofill{box-shadow:0 0 0 1000px var(--vd-select-bg-base) inset;-moz-text-fill-color:var(--vd-select-text-base)}.vd-select__leading-icon{display:inline-flex;color:var(--vd-select-icon-base)}.vd-select__trailing-icon{display:inline-flex;color:var(--vd-select-icon-secondary)}.vd-select__chevron{display:inline-flex;-webkit-user-select:none;user-select:none}.vd-select__helper-row{display:flex;margin-top:var(--vd-scale-spacing-100)}.vd-select__helper-text{margin:0}.vd-select__input-counter{flex:1;text-align:right;margin:0}.vd-select:focus-within:not(:has(.vd-select__trailing-action-container:focus-within)) .vd-select__label,.vd-select:focus-within:not(:has(.vd-select__trailing-action-container:focus-within)) .vd-select__helper-text{color:var(--vd-select-text-secondary)}.vd-select--disabled .vd-select__container{border-color:var(--vd-select-border-disabled);background:var(--vd-select-bg-disabled)}.vd-select--disabled .vd-select__label-row,.vd-select--disabled .vd-select__helper-text,.vd-select--disabled .vd-select__input{color:var(--vd-select-text-disabled)}.vd-select--disabled .vd-select__leading-icon{color:var(--vd-select-icon-disabled)}.vd-select--success .vd-select__trailing-icon,.vd-select--warning .vd-select__trailing-icon{color:var(--vd-select-icon-state)}.vd-select--success .vd-select__helper-text,.vd-select--warning .vd-select__helper-text,.vd-select--error .vd-select__label{color:var(--vd-select-text-state)}.vd-select--error .vd-select__container{border-color:var(--vd-select-border-state);background:var(--vd-select-bg-state)}.vd-select--error .vd-select__trailing-icon{color:var(--vd-select-icon-state)}.vd-select--error .vd-select__helper-text{color:var(--vd-select-text-state)}.vd-select__helper-icon{position:relative;display:inline-flex;align-items:center;cursor:pointer}.vd-select__helper-icon .vd-select__hint-tooltip{width:max-content;max-width:240px;min-width:120px;white-space:normal;text-align:center;position:absolute;bottom:100%;left:50%;transform:translate(-50%);background-color:var(--vd-color-background-default-always-dark, #333);color:var(--vd-color-background-default-always-light, #fff);padding:8px 12px;border-radius:var(--vd-radius-sm, 4px);z-index:10;box-shadow:0 2px 8px #0003;margin-top:4px}\n"] }]
|
|
1605
1605
|
}], propDecorators: { label: [{
|
|
1606
1606
|
type: Input
|
|
1607
1607
|
}], hintText: [{
|
|
@@ -2595,11 +2595,11 @@ class VdTimePicker {
|
|
|
2595
2595
|
return this.state;
|
|
2596
2596
|
}
|
|
2597
2597
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VdTimePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2598
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: VdTimePicker, isStandalone: true, selector: "vd-time-picker", inputs: { label: "label", hintText: "hintText", helperText: "helperText", optional: "optional", leadingIcon: "leadingIcon", trailingActionIcon: "trailingActionIcon", placeholder: "placeholder", type: "type", value: "value", maxInputCount: "maxInputCount", disabled: "disabled", state: "state" }, outputs: { valueChange: "valueChange", valueCommit: "valueCommit", trailingActionClick: "trailingActionClick", inputFocus: "inputFocus" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, static: true }], ngImport: i0, template: "<div\n class=\"vd-time-picker\"\n [class.vd-time-picker--error]=\"state === 'error'\"\n [class.vd-time-picker--disabled]=\"disabled\"\n [class.vd-time-picker--success]=\"state === 'success'\"\n [class.vd-time-picker--warning]=\"state === 'warning'\"\n>\n <vd-input\n [label]=\"label\"\n [hintText]=\"hintText\"\n [helperText]=\"helperText\"\n [optional]=\"optional\"\n [leadingIcon]=\"leadingIcon\"\n [trailingActionIcon]=\"'vd-icon-clock'\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n [readOnly]=\"true\"\n [disabled]=\"disabled\"\n [state]=\"visualState\"\n (trailingActionClick)=\"onTrailingActionClick()\"\n (inputFocus)=\"onInputFocus()\"\n (valueCommit)=\"onInputBlur()\"\n ></vd-input>\n\n <input\n #inputElement\n class=\"vd-time-picker__native-input\"\n type=\"time\"\n [value]=\"value\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n [disabled]=\"disabled\"\n />\n</div>\n", styles: [":host{display:block;width:100%}.vd-time-picker{position:relative;width:100%;min-width:240px}.vd-time-picker__native-input{position:absolute;opacity:0;width:0;height:0;overflow:hidden;pointer-events:none}.vd-time-picker__label-row{display:flex;gap:var(--vd-scale-spacing-200);margin-bottom:var(--vd-scale-spacing-100)}.vd-time-picker__label{color:var(--vd-time-picker-text-secondary)}.vd-time-picker__optional{--vd-time-picker-border-width: var(--vd-scale-border-width-sm)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: VdInput, selector: "vd-input", inputs: ["label", "hintText", "helperText", "optional", "leadingIcon", "trailingActionIcon", "placeholder", "type", "value", "maxInputCount", "readOnly", "disabled", "state"], outputs: ["valueChange", "valueCommit", "trailingActionClick", "inputFocus"] }] });
|
|
2598
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: VdTimePicker, isStandalone: true, selector: "vd-time-picker", inputs: { label: "label", hintText: "hintText", helperText: "helperText", optional: "optional", leadingIcon: "leadingIcon", trailingActionIcon: "trailingActionIcon", placeholder: "placeholder", type: "type", value: "value", maxInputCount: "maxInputCount", disabled: "disabled", state: "state" }, outputs: { valueChange: "valueChange", valueCommit: "valueCommit", trailingActionClick: "trailingActionClick", inputFocus: "inputFocus" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, static: true }], ngImport: i0, template: "<div\n class=\"vd-time-picker\"\n [class.vd-time-picker--error]=\"state === 'error'\"\n [class.vd-time-picker--disabled]=\"disabled\"\n [class.vd-time-picker--success]=\"state === 'success'\"\n [class.vd-time-picker--warning]=\"state === 'warning'\"\n>\n <vd-input\n [label]=\"label\"\n [hintText]=\"hintText\"\n [helperText]=\"helperText\"\n [optional]=\"optional\"\n [leadingIcon]=\"leadingIcon\"\n [trailingActionIcon]=\"'vd-icon-clock-circle'\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n [readOnly]=\"true\"\n [disabled]=\"disabled\"\n [state]=\"visualState\"\n (trailingActionClick)=\"onTrailingActionClick()\"\n (inputFocus)=\"onInputFocus()\"\n (valueCommit)=\"onInputBlur()\"\n ></vd-input>\n\n <input\n #inputElement\n class=\"vd-time-picker__native-input\"\n type=\"time\"\n [value]=\"value\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n [disabled]=\"disabled\"\n />\n</div>\n", styles: [":host{display:block;width:100%}.vd-time-picker{position:relative;width:100%;min-width:240px}.vd-time-picker__native-input{position:absolute;opacity:0;width:0;height:0;overflow:hidden;pointer-events:none}.vd-time-picker__label-row{display:flex;gap:var(--vd-scale-spacing-200);margin-bottom:var(--vd-scale-spacing-100)}.vd-time-picker__label{color:var(--vd-time-picker-text-secondary)}.vd-time-picker__optional{--vd-time-picker-border-width: var(--vd-scale-border-width-sm)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: VdInput, selector: "vd-input", inputs: ["label", "hintText", "helperText", "optional", "leadingIcon", "trailingActionIcon", "placeholder", "type", "value", "maxInputCount", "readOnly", "disabled", "state"], outputs: ["valueChange", "valueCommit", "trailingActionClick", "inputFocus"] }] });
|
|
2599
2599
|
}
|
|
2600
2600
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VdTimePicker, decorators: [{
|
|
2601
2601
|
type: Component,
|
|
2602
|
-
args: [{ selector: 'vd-time-picker', standalone: true, imports: [CommonModule, VdInput], template: "<div\n class=\"vd-time-picker\"\n [class.vd-time-picker--error]=\"state === 'error'\"\n [class.vd-time-picker--disabled]=\"disabled\"\n [class.vd-time-picker--success]=\"state === 'success'\"\n [class.vd-time-picker--warning]=\"state === 'warning'\"\n>\n <vd-input\n [label]=\"label\"\n [hintText]=\"hintText\"\n [helperText]=\"helperText\"\n [optional]=\"optional\"\n [leadingIcon]=\"leadingIcon\"\n [trailingActionIcon]=\"'vd-icon-clock'\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n [readOnly]=\"true\"\n [disabled]=\"disabled\"\n [state]=\"visualState\"\n (trailingActionClick)=\"onTrailingActionClick()\"\n (inputFocus)=\"onInputFocus()\"\n (valueCommit)=\"onInputBlur()\"\n ></vd-input>\n\n <input\n #inputElement\n class=\"vd-time-picker__native-input\"\n type=\"time\"\n [value]=\"value\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n [disabled]=\"disabled\"\n />\n</div>\n", styles: [":host{display:block;width:100%}.vd-time-picker{position:relative;width:100%;min-width:240px}.vd-time-picker__native-input{position:absolute;opacity:0;width:0;height:0;overflow:hidden;pointer-events:none}.vd-time-picker__label-row{display:flex;gap:var(--vd-scale-spacing-200);margin-bottom:var(--vd-scale-spacing-100)}.vd-time-picker__label{color:var(--vd-time-picker-text-secondary)}.vd-time-picker__optional{--vd-time-picker-border-width: var(--vd-scale-border-width-sm)}\n"] }]
|
|
2602
|
+
args: [{ selector: 'vd-time-picker', standalone: true, imports: [CommonModule, VdInput], template: "<div\n class=\"vd-time-picker\"\n [class.vd-time-picker--error]=\"state === 'error'\"\n [class.vd-time-picker--disabled]=\"disabled\"\n [class.vd-time-picker--success]=\"state === 'success'\"\n [class.vd-time-picker--warning]=\"state === 'warning'\"\n>\n <vd-input\n [label]=\"label\"\n [hintText]=\"hintText\"\n [helperText]=\"helperText\"\n [optional]=\"optional\"\n [leadingIcon]=\"leadingIcon\"\n [trailingActionIcon]=\"'vd-icon-clock-circle'\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n [readOnly]=\"true\"\n [disabled]=\"disabled\"\n [state]=\"visualState\"\n (trailingActionClick)=\"onTrailingActionClick()\"\n (inputFocus)=\"onInputFocus()\"\n (valueCommit)=\"onInputBlur()\"\n ></vd-input>\n\n <input\n #inputElement\n class=\"vd-time-picker__native-input\"\n type=\"time\"\n [value]=\"value\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n [disabled]=\"disabled\"\n />\n</div>\n", styles: [":host{display:block;width:100%}.vd-time-picker{position:relative;width:100%;min-width:240px}.vd-time-picker__native-input{position:absolute;opacity:0;width:0;height:0;overflow:hidden;pointer-events:none}.vd-time-picker__label-row{display:flex;gap:var(--vd-scale-spacing-200);margin-bottom:var(--vd-scale-spacing-100)}.vd-time-picker__label{color:var(--vd-time-picker-text-secondary)}.vd-time-picker__optional{--vd-time-picker-border-width: var(--vd-scale-border-width-sm)}\n"] }]
|
|
2603
2603
|
}], propDecorators: { label: [{
|
|
2604
2604
|
type: Input
|
|
2605
2605
|
}], hintText: [{
|
|
@@ -3201,11 +3201,11 @@ class VdSidebar {
|
|
|
3201
3201
|
return pathWithLeadingSlash.replace(/\/+$/, '');
|
|
3202
3202
|
}
|
|
3203
3203
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VdSidebar, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
3204
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: VdSidebar, isStandalone: true, selector: "vd-sidebar", inputs: { sections: "sections" }, ngImport: i0, template: "<div class=\"vd-sidebar\">\n <!-- Other sections -->\n <div *ngFor=\"let section of sections\" class=\"vd-sidebar__section\">\n <div *ngIf=\"section.showTitle !== false\" class=\"vd-sidebar__title-container\">\n <p class=\"vd-sidebar__title body-small\">{{ section.title }}</p>\n <vd-divider></vd-divider>\n </div>\n\n <ul>\n <li *ngFor=\"let item of section.items\">\n <!-- Parent item with children -->\n <ng-container *ngIf=\"item.children && item.children.length > 0\">\n <!-- If parent has a route, make it a link -->\n <a\n *ngIf=\"item.route\"\n [routerLink]=\"item.route\"\n class=\"vd-sidebar__item vd-sidebar__item--parent\"\n [class.active]=\"isItemActive(item)\"\n [class.vd-sidebar__item--child-active]=\"isChildActive(item)\"\n [attr.aria-current]=\"isRouteActive(item.route, item.matchMode) ? 'page' : null\"\n (click)=\"toggleExpand(item.label, $event)\"\n >\n <span class=\"vd-sidebar__item-content\">\n <vd-icon
|
|
3204
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: VdSidebar, isStandalone: true, selector: "vd-sidebar", inputs: { sections: "sections" }, ngImport: i0, template: "<div class=\"vd-sidebar\">\n <!-- Other sections -->\n <div *ngFor=\"let section of sections\" class=\"vd-sidebar__section\">\n <div *ngIf=\"section.showTitle !== false\" class=\"vd-sidebar__title-container\">\n <p class=\"vd-sidebar__title body-small\">{{ section.title }}</p>\n <vd-divider></vd-divider>\n </div>\n\n <ul>\n <li *ngFor=\"let item of section.items\">\n <!-- Parent item with children -->\n <ng-container *ngIf=\"item.children && item.children.length > 0\">\n <!-- If parent has a route, make it a link -->\n <a\n *ngIf=\"item.route\"\n [routerLink]=\"item.route\"\n class=\"vd-sidebar__item vd-sidebar__item--parent\"\n [class.active]=\"isItemActive(item)\"\n [class.vd-sidebar__item--child-active]=\"isChildActive(item)\"\n [attr.aria-current]=\"isRouteActive(item.route, item.matchMode) ? 'page' : null\"\n (click)=\"toggleExpand(item.label, $event)\"\n >\n <span class=\"vd-sidebar__item-content\">\n <vd-icon *ngIf=\"item.icon\" class=\"vd-sidebar__item-icon\" [name]=\"item.icon\"></vd-icon>\n <span class=\"vd-sidebar__item-label\">{{ item.label }}</span>\n </span>\n <vd-icon\n [class.vd-sidebar__icon--expanded]=\"isExpanded(item.label)\"\n name=\"vd-icon-chevron-right\"\n ></vd-icon>\n </a>\n <!-- If parent doesn't have a route, make it a div -->\n <div\n *ngIf=\"!item.route\"\n class=\"vd-sidebar__item vd-sidebar__item--parent label-medium\"\n [class.active]=\"isItemActive(item)\"\n [class.vd-sidebar__item--child-active]=\"isChildActive(item)\"\n (click)=\"toggleExpand(item.label)\"\n >\n <span class=\"vd-sidebar__item-content\">\n <vd-icon *ngIf=\"item.icon\" class=\"vd-sidebar__item-icon\" [name]=\"item.icon\"></vd-icon>\n <span class=\"vd-sidebar__item-label\">{{ item.label }}</span>\n </span>\n <vd-icon\n [class.vd-sidebar__icon--expanded]=\"isExpanded(item.label)\"\n name=\"vd-icon-chevron-right\"\n ></vd-icon>\n </div>\n <!-- Nested children -->\n <ul *ngIf=\"isExpanded(item.label)\" class=\"vd-sidebar__nested-items\">\n <li *ngFor=\"let child of item.children\">\n <a\n [routerLink]=\"child.route\"\n class=\"vd-sidebar__item vd-sidebar__item--nested\"\n [class.active]=\"isItemActive(child)\"\n [attr.aria-current]=\"isRouteActive(child.route, child.matchMode) ? 'page' : null\"\n >\n <span class=\"vd-sidebar__item-content\">\n <vd-icon\n *ngIf=\"child.icon\"\n class=\"vd-sidebar__item-icon\"\n [name]=\"child.icon\"\n ></vd-icon>\n <span class=\"vd-sidebar__item-label\">{{ child.label }}</span>\n </span>\n </a>\n </li>\n </ul>\n </ng-container>\n\n <!-- Regular item (with route, no children) -->\n <ng-container *ngIf=\"!item.children || item.children.length === 0\">\n <a\n *ngIf=\"item.route\"\n [routerLink]=\"item.route\"\n class=\"vd-sidebar__item\"\n [class.active]=\"isItemActive(item)\"\n [attr.aria-current]=\"isRouteActive(item.route, item.matchMode) ? 'page' : null\"\n >\n <span class=\"vd-sidebar__item-content\">\n <vd-icon *ngIf=\"item.icon\" class=\"vd-sidebar__item-icon\" [name]=\"item.icon\"></vd-icon>\n <span class=\"vd-sidebar__item-label\">{{ item.label }}</span>\n </span>\n </a>\n </ng-container>\n </li>\n </ul>\n </div>\n</div>\n", styles: [".vd-sidebar{--vd-sidebar-width: calc(2 * var(--vd-scale-spacing-3000));--vd-sidebar-padding: var(--vd-scale-spacing-200);--vd-sidebar-padding-bottom: var(--vd-scale-spacing-800);--vd-sidebar-padding-top: var(--vd-scale-spacing-600);--vd-sidebar-outline-color: var(--vd-color-border-primary-tertiary);--vd-sidebar-outline-width: var(--vd-scale-border-width-md);--vd-sidebar-outline-offset: var(--vd-scale-border-width-md);width:100%;max-width:var(--vd-layout-sidebar-width);padding:var(--vd-sidebar-padding-top) var(--vd-sidebar-padding) var(--vd-sidebar-padding-bottom) var(--vd-sidebar-padding);background:var(--vd-color-background-default-secondary);height:100%;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;border-right:var(--vd-scale-border-width-sm) solid var(--vd-color-border-default-tertiary)}.vd-sidebar ul{list-style:none;padding-left:0}.vd-sidebar li{margin-bottom:0}.vd-sidebar__section:not(:first-child) .vd-sidebar__title-container{margin:var(--vd-scale-spacing-400) 0 var(--vd-scale-spacing-200)}.vd-sidebar__title-container{display:flex;align-items:center;gap:var(--vd-scale-spacing-200);margin-bottom:var(--vd-scale-spacing-200)}.vd-sidebar__title{margin:0;white-space:nowrap}.vd-sidebar__item{display:flex;align-items:center;gap:var(--vd-scale-spacing-200);padding:var(--vd-scale-spacing-200) var(--vd-scale-spacing-400);color:var(--vd-color-content-default-secondary);border-radius:var(--vd-scale-border-radius-md)}.vd-sidebar__item.active{background:var(--vd-color-background-primary-secondary);color:var(--vd-color-content-primary-on-secondary)}.vd-sidebar__item:hover:not(.active){color:var(--vd-color-content-primary-base)}.vd-sidebar__item:focus{outline:var(--vd-sidebar-outline-width) solid var(--vd-sidebar-outline-color);outline-offset:var(--vd-sidebar-outline-offset)}.vd-sidebar__item--nested{margin:0 var(--vd-scale-spacing-400)}.vd-sidebar__item--parent{justify-content:space-between;padding:var(--vd-scale-spacing-200) var(--vd-scale-spacing-200) var(--vd-scale-spacing-200) var(--vd-scale-spacing-400);cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .2s ease}.vd-sidebar__item--child-active{background-color:transparent;color:var(--vd-color-content-primary-base)}.vd-sidebar__item-content{display:flex;align-items:center;gap:var(--vd-scale-spacing-200);flex:1;min-width:0}.vd-sidebar__item-icon{flex:0 0 auto;color:inherit}.vd-sidebar__item-label{flex:1;min-width:0}.vd-sidebar__nested-items{list-style:none;padding:0;margin:var(--vd-scale-spacing-100) 0}.vd-sidebar__icon--expanded{transform:rotate(90deg);transition:transform .3s ease}vd-icon:not(.vd-sidebar__icon--expanded){transition:transform .3s ease}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: VdIcon, selector: "vd-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: VdDivider, selector: "vd-divider", inputs: ["dashed", "color", "direction", "inset"] }] });
|
|
3205
3205
|
}
|
|
3206
3206
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VdSidebar, decorators: [{
|
|
3207
3207
|
type: Component,
|
|
3208
|
-
args: [{ standalone: true, selector: 'vd-sidebar', imports: [CommonModule, RouterModule, VdIcon, VdDivider], template: "<div class=\"vd-sidebar\">\n <!-- Other sections -->\n <div *ngFor=\"let section of sections\" class=\"vd-sidebar__section\">\n <div *ngIf=\"section.showTitle !== false\" class=\"vd-sidebar__title-container\">\n <p class=\"vd-sidebar__title body-small\">{{ section.title }}</p>\n <vd-divider></vd-divider>\n </div>\n\n <ul>\n <li *ngFor=\"let item of section.items\">\n <!-- Parent item with children -->\n <ng-container *ngIf=\"item.children && item.children.length > 0\">\n <!-- If parent has a route, make it a link -->\n <a\n *ngIf=\"item.route\"\n [routerLink]=\"item.route\"\n class=\"vd-sidebar__item vd-sidebar__item--parent\"\n [class.active]=\"isItemActive(item)\"\n [class.vd-sidebar__item--child-active]=\"isChildActive(item)\"\n [attr.aria-current]=\"isRouteActive(item.route, item.matchMode) ? 'page' : null\"\n (click)=\"toggleExpand(item.label, $event)\"\n >\n <span class=\"vd-sidebar__item-content\">\n <vd-icon
|
|
3208
|
+
args: [{ standalone: true, selector: 'vd-sidebar', imports: [CommonModule, RouterModule, VdIcon, VdDivider], template: "<div class=\"vd-sidebar\">\n <!-- Other sections -->\n <div *ngFor=\"let section of sections\" class=\"vd-sidebar__section\">\n <div *ngIf=\"section.showTitle !== false\" class=\"vd-sidebar__title-container\">\n <p class=\"vd-sidebar__title body-small\">{{ section.title }}</p>\n <vd-divider></vd-divider>\n </div>\n\n <ul>\n <li *ngFor=\"let item of section.items\">\n <!-- Parent item with children -->\n <ng-container *ngIf=\"item.children && item.children.length > 0\">\n <!-- If parent has a route, make it a link -->\n <a\n *ngIf=\"item.route\"\n [routerLink]=\"item.route\"\n class=\"vd-sidebar__item vd-sidebar__item--parent\"\n [class.active]=\"isItemActive(item)\"\n [class.vd-sidebar__item--child-active]=\"isChildActive(item)\"\n [attr.aria-current]=\"isRouteActive(item.route, item.matchMode) ? 'page' : null\"\n (click)=\"toggleExpand(item.label, $event)\"\n >\n <span class=\"vd-sidebar__item-content\">\n <vd-icon *ngIf=\"item.icon\" class=\"vd-sidebar__item-icon\" [name]=\"item.icon\"></vd-icon>\n <span class=\"vd-sidebar__item-label\">{{ item.label }}</span>\n </span>\n <vd-icon\n [class.vd-sidebar__icon--expanded]=\"isExpanded(item.label)\"\n name=\"vd-icon-chevron-right\"\n ></vd-icon>\n </a>\n <!-- If parent doesn't have a route, make it a div -->\n <div\n *ngIf=\"!item.route\"\n class=\"vd-sidebar__item vd-sidebar__item--parent label-medium\"\n [class.active]=\"isItemActive(item)\"\n [class.vd-sidebar__item--child-active]=\"isChildActive(item)\"\n (click)=\"toggleExpand(item.label)\"\n >\n <span class=\"vd-sidebar__item-content\">\n <vd-icon *ngIf=\"item.icon\" class=\"vd-sidebar__item-icon\" [name]=\"item.icon\"></vd-icon>\n <span class=\"vd-sidebar__item-label\">{{ item.label }}</span>\n </span>\n <vd-icon\n [class.vd-sidebar__icon--expanded]=\"isExpanded(item.label)\"\n name=\"vd-icon-chevron-right\"\n ></vd-icon>\n </div>\n <!-- Nested children -->\n <ul *ngIf=\"isExpanded(item.label)\" class=\"vd-sidebar__nested-items\">\n <li *ngFor=\"let child of item.children\">\n <a\n [routerLink]=\"child.route\"\n class=\"vd-sidebar__item vd-sidebar__item--nested\"\n [class.active]=\"isItemActive(child)\"\n [attr.aria-current]=\"isRouteActive(child.route, child.matchMode) ? 'page' : null\"\n >\n <span class=\"vd-sidebar__item-content\">\n <vd-icon\n *ngIf=\"child.icon\"\n class=\"vd-sidebar__item-icon\"\n [name]=\"child.icon\"\n ></vd-icon>\n <span class=\"vd-sidebar__item-label\">{{ child.label }}</span>\n </span>\n </a>\n </li>\n </ul>\n </ng-container>\n\n <!-- Regular item (with route, no children) -->\n <ng-container *ngIf=\"!item.children || item.children.length === 0\">\n <a\n *ngIf=\"item.route\"\n [routerLink]=\"item.route\"\n class=\"vd-sidebar__item\"\n [class.active]=\"isItemActive(item)\"\n [attr.aria-current]=\"isRouteActive(item.route, item.matchMode) ? 'page' : null\"\n >\n <span class=\"vd-sidebar__item-content\">\n <vd-icon *ngIf=\"item.icon\" class=\"vd-sidebar__item-icon\" [name]=\"item.icon\"></vd-icon>\n <span class=\"vd-sidebar__item-label\">{{ item.label }}</span>\n </span>\n </a>\n </ng-container>\n </li>\n </ul>\n </div>\n</div>\n", styles: [".vd-sidebar{--vd-sidebar-width: calc(2 * var(--vd-scale-spacing-3000));--vd-sidebar-padding: var(--vd-scale-spacing-200);--vd-sidebar-padding-bottom: var(--vd-scale-spacing-800);--vd-sidebar-padding-top: var(--vd-scale-spacing-600);--vd-sidebar-outline-color: var(--vd-color-border-primary-tertiary);--vd-sidebar-outline-width: var(--vd-scale-border-width-md);--vd-sidebar-outline-offset: var(--vd-scale-border-width-md);width:100%;max-width:var(--vd-layout-sidebar-width);padding:var(--vd-sidebar-padding-top) var(--vd-sidebar-padding) var(--vd-sidebar-padding-bottom) var(--vd-sidebar-padding);background:var(--vd-color-background-default-secondary);height:100%;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;border-right:var(--vd-scale-border-width-sm) solid var(--vd-color-border-default-tertiary)}.vd-sidebar ul{list-style:none;padding-left:0}.vd-sidebar li{margin-bottom:0}.vd-sidebar__section:not(:first-child) .vd-sidebar__title-container{margin:var(--vd-scale-spacing-400) 0 var(--vd-scale-spacing-200)}.vd-sidebar__title-container{display:flex;align-items:center;gap:var(--vd-scale-spacing-200);margin-bottom:var(--vd-scale-spacing-200)}.vd-sidebar__title{margin:0;white-space:nowrap}.vd-sidebar__item{display:flex;align-items:center;gap:var(--vd-scale-spacing-200);padding:var(--vd-scale-spacing-200) var(--vd-scale-spacing-400);color:var(--vd-color-content-default-secondary);border-radius:var(--vd-scale-border-radius-md)}.vd-sidebar__item.active{background:var(--vd-color-background-primary-secondary);color:var(--vd-color-content-primary-on-secondary)}.vd-sidebar__item:hover:not(.active){color:var(--vd-color-content-primary-base)}.vd-sidebar__item:focus{outline:var(--vd-sidebar-outline-width) solid var(--vd-sidebar-outline-color);outline-offset:var(--vd-sidebar-outline-offset)}.vd-sidebar__item--nested{margin:0 var(--vd-scale-spacing-400)}.vd-sidebar__item--parent{justify-content:space-between;padding:var(--vd-scale-spacing-200) var(--vd-scale-spacing-200) var(--vd-scale-spacing-200) var(--vd-scale-spacing-400);cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .2s ease}.vd-sidebar__item--child-active{background-color:transparent;color:var(--vd-color-content-primary-base)}.vd-sidebar__item-content{display:flex;align-items:center;gap:var(--vd-scale-spacing-200);flex:1;min-width:0}.vd-sidebar__item-icon{flex:0 0 auto;color:inherit}.vd-sidebar__item-label{flex:1;min-width:0}.vd-sidebar__nested-items{list-style:none;padding:0;margin:var(--vd-scale-spacing-100) 0}.vd-sidebar__icon--expanded{transform:rotate(90deg);transition:transform .3s ease}vd-icon:not(.vd-sidebar__icon--expanded){transition:transform .3s ease}\n"] }]
|
|
3209
3209
|
}], ctorParameters: () => [{ type: i1$1.Router }], propDecorators: { sections: [{
|
|
3210
3210
|
type: Input
|
|
3211
3211
|
}] } });
|
|
@@ -3240,11 +3240,11 @@ class VdAlert {
|
|
|
3240
3240
|
}
|
|
3241
3241
|
switch (this.color) {
|
|
3242
3242
|
case 'success':
|
|
3243
|
-
return 'vd-icon-
|
|
3243
|
+
return 'vd-icon-check-circle-filled';
|
|
3244
3244
|
case 'error':
|
|
3245
|
-
return 'vd-icon-
|
|
3245
|
+
return 'vd-icon-danger-circle-filled';
|
|
3246
3246
|
case 'warning':
|
|
3247
|
-
return 'vd-icon-
|
|
3247
|
+
return 'vd-icon-danger-triangle-filled';
|
|
3248
3248
|
case 'info':
|
|
3249
3249
|
return 'vd-icon-info-circle-filled';
|
|
3250
3250
|
case 'primary':
|
|
@@ -3339,11 +3339,11 @@ class VdDrawer {
|
|
|
3339
3339
|
}, 150);
|
|
3340
3340
|
}
|
|
3341
3341
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VdDrawer, deps: [{ token: DIALOG_DATA }, { token: i1$2.DialogRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3342
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: VdDrawer, isStandalone: true, selector: "vd-drawer", ngImport: i0, template: "<div\n class=\"vd-drawer\"\n [class.vd-drawer--closing]=\"isClosing\"\n [class.vd-drawer--sm]=\"config.size === 'sm'\"\n [class.vd-drawer--md]=\"config.size === 'md'\"\n [class.vd-drawer--lg]=\"config.size === 'lg'\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"config.title\"\n>\n <div class=\"vd-drawer__header\">\n <div class=\"vd-drawer__header-text\">\n <h6 class=\"title-medium\">\n {{ config.title }}\n </h6>\n </div>\n\n <vd-icon-button\n class=\"vd-drawer__close\"\n icon=\"vd-icon-
|
|
3342
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: VdDrawer, isStandalone: true, selector: "vd-drawer", ngImport: i0, template: "<div\n class=\"vd-drawer\"\n [class.vd-drawer--closing]=\"isClosing\"\n [class.vd-drawer--sm]=\"config.size === 'sm'\"\n [class.vd-drawer--md]=\"config.size === 'md'\"\n [class.vd-drawer--lg]=\"config.size === 'lg'\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"config.title\"\n>\n <div class=\"vd-drawer__header\">\n <div class=\"vd-drawer__header-text\">\n <h6 class=\"title-medium\">\n {{ config.title }}\n </h6>\n </div>\n\n <vd-icon-button\n class=\"vd-drawer__close\"\n icon=\"vd-icon-xmark\"\n variant=\"transparent\"\n color=\"neutral\"\n size=\"sm\"\n ariaLabel=\"Close drawer\"\n (click)=\"handleClose()\"\n ></vd-icon-button>\n </div>\n\n <div\n class=\"vd-drawer__content\"\n [class.vd-drawer__content--sm]=\"config.size === 'sm'\"\n [class.vd-drawer__content--md]=\"config.size === 'md'\"\n [class.vd-drawer__content--lg]=\"config.size === 'lg'\"\n >\n <ng-container\n *ngTemplateOutlet=\"config.contentTemplate; context: config.context ?? null\"\n ></ng-container>\n </div>\n\n <div\n *ngIf=\"hasActions\"\n class=\"vd-drawer__footer\"\n [class.vd-drawer__footer--sm]=\"config.size === 'sm'\"\n >\n <vd-button\n *ngIf=\"config.secondaryActionLabel\"\n [label]=\"config.secondaryActionLabel\"\n variant=\"subtle\"\n color=\"neutral\"\n size=\"md\"\n (click)=\"handleSecondaryAction()\"\n ></vd-button>\n\n <vd-button\n *ngIf=\"config.primaryActionLabel\"\n [label]=\"config.primaryActionLabel\"\n variant=\"solid\"\n color=\"primary\"\n size=\"md\"\n (click)=\"handlePrimaryAction()\"\n ></vd-button>\n </div>\n</div>\n", styles: [":host{--vd-drawer-bg: var(--vd-color-background-default-secondary);--vd-drawer-content-bg: var(--vd-color-background-default-base);--vd-drawer-border: var(--vd-color-border-default-tertiary);--vd-drawer-header-bg: var(--vd-color-background-default-secondary);--vd-drawer-footer-bg: var(--vd-color-background-default-secondary);--vd-drawer-content-padding: var(--vd-scale-spacing-400);--vd-drawer-header-padding: var(--vd-scale-spacing-400);--vd-drawer-footer-padding: var(--vd-scale-spacing-400);--vd-drawer-gap: var(--vd-scale-spacing-400);--vd-drawer-width-sm: calc(var(--vd-scale-spacing-1800) * 4);--vd-drawer-width-md: calc(var(--vd-scale-spacing-1800) * 7);--vd-drawer-width-lg: calc(var(--vd-scale-spacing-1800) * 11 + var(--vd-scale-spacing-1000));--vd-drawer-width: var(--vd-drawer-width-md);display:block;width:100%}::ng-deep .vd-drawer-panel{padding:0;height:100vh;max-height:100vh;display:flex;justify-content:flex-end;align-items:stretch}::ng-deep .vd-drawer-backdrop{background-color:var(--vd-color-background-overlay-base)}::ng-deep .vd-drawer__footer--sm vd-button .vd-button{width:100%}@keyframes slideInRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes slideOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}.vd-drawer{background-color:var(--vd-drawer-content-bg);border-left:var(--vd-scale-border-width-md) solid var(--vd-drawer-border);width:var(--vd-drawer-width);max-width:100vw;height:100vh;max-height:100vh;display:flex;flex-direction:column;animation:slideInRight .25s cubic-bezier(.4,0,.2,1) forwards}.vd-drawer--closing{animation:slideOutRight .15s cubic-bezier(.4,0,.2,1) forwards}.vd-drawer--sm{--vd-drawer-width: var(--vd-drawer-width-sm)}.vd-drawer--md{--vd-drawer-width: var(--vd-drawer-width-md)}.vd-drawer--lg{--vd-drawer-width: var(--vd-drawer-width-lg)}.vd-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:var(--vd-scale-spacing-400);padding:var(--vd-drawer-header-padding);background-color:var(--vd-drawer-header-bg)}.vd-drawer__header-text{display:flex;flex-direction:column;gap:var(--vd-scale-spacing-0)}.vd-drawer__header-text .title-medium{margin:0;color:var(--vd-color-content-default-secondary)}.vd-drawer__content{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--vd-drawer-content-padding);background-color:var(--vd-drawer-content-bg)}.vd-drawer__content>:only-child{height:100%;min-height:0}.vd-drawer__footer{display:flex;justify-content:flex-end;align-items:center;gap:var(--vd-scale-spacing-400);padding:var(--vd-drawer-footer-padding);background-color:var(--vd-drawer-footer-bg)}.vd-drawer__footer--sm>vd-button{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: VdButton, selector: "vd-button", inputs: ["label", "variant", "color", "size", "rounded", "disabled", "loading", "leftIcon", "rightIcon", "type"] }, { kind: "component", type: VdIconButton, selector: "vd-icon-button", inputs: ["icon", "ariaLabel", "variant", "color", "size", "rounded", "disabled", "loading"] }] });
|
|
3343
3343
|
}
|
|
3344
3344
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VdDrawer, decorators: [{
|
|
3345
3345
|
type: Component,
|
|
3346
|
-
args: [{ selector: 'vd-drawer', standalone: true, imports: [CommonModule, VdButton, VdIconButton], template: "<div\n class=\"vd-drawer\"\n [class.vd-drawer--closing]=\"isClosing\"\n [class.vd-drawer--sm]=\"config.size === 'sm'\"\n [class.vd-drawer--md]=\"config.size === 'md'\"\n [class.vd-drawer--lg]=\"config.size === 'lg'\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"config.title\"\n>\n <div class=\"vd-drawer__header\">\n <div class=\"vd-drawer__header-text\">\n <h6 class=\"title-medium\">\n {{ config.title }}\n </h6>\n </div>\n\n <vd-icon-button\n class=\"vd-drawer__close\"\n icon=\"vd-icon-
|
|
3346
|
+
args: [{ selector: 'vd-drawer', standalone: true, imports: [CommonModule, VdButton, VdIconButton], template: "<div\n class=\"vd-drawer\"\n [class.vd-drawer--closing]=\"isClosing\"\n [class.vd-drawer--sm]=\"config.size === 'sm'\"\n [class.vd-drawer--md]=\"config.size === 'md'\"\n [class.vd-drawer--lg]=\"config.size === 'lg'\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"config.title\"\n>\n <div class=\"vd-drawer__header\">\n <div class=\"vd-drawer__header-text\">\n <h6 class=\"title-medium\">\n {{ config.title }}\n </h6>\n </div>\n\n <vd-icon-button\n class=\"vd-drawer__close\"\n icon=\"vd-icon-xmark\"\n variant=\"transparent\"\n color=\"neutral\"\n size=\"sm\"\n ariaLabel=\"Close drawer\"\n (click)=\"handleClose()\"\n ></vd-icon-button>\n </div>\n\n <div\n class=\"vd-drawer__content\"\n [class.vd-drawer__content--sm]=\"config.size === 'sm'\"\n [class.vd-drawer__content--md]=\"config.size === 'md'\"\n [class.vd-drawer__content--lg]=\"config.size === 'lg'\"\n >\n <ng-container\n *ngTemplateOutlet=\"config.contentTemplate; context: config.context ?? null\"\n ></ng-container>\n </div>\n\n <div\n *ngIf=\"hasActions\"\n class=\"vd-drawer__footer\"\n [class.vd-drawer__footer--sm]=\"config.size === 'sm'\"\n >\n <vd-button\n *ngIf=\"config.secondaryActionLabel\"\n [label]=\"config.secondaryActionLabel\"\n variant=\"subtle\"\n color=\"neutral\"\n size=\"md\"\n (click)=\"handleSecondaryAction()\"\n ></vd-button>\n\n <vd-button\n *ngIf=\"config.primaryActionLabel\"\n [label]=\"config.primaryActionLabel\"\n variant=\"solid\"\n color=\"primary\"\n size=\"md\"\n (click)=\"handlePrimaryAction()\"\n ></vd-button>\n </div>\n</div>\n", styles: [":host{--vd-drawer-bg: var(--vd-color-background-default-secondary);--vd-drawer-content-bg: var(--vd-color-background-default-base);--vd-drawer-border: var(--vd-color-border-default-tertiary);--vd-drawer-header-bg: var(--vd-color-background-default-secondary);--vd-drawer-footer-bg: var(--vd-color-background-default-secondary);--vd-drawer-content-padding: var(--vd-scale-spacing-400);--vd-drawer-header-padding: var(--vd-scale-spacing-400);--vd-drawer-footer-padding: var(--vd-scale-spacing-400);--vd-drawer-gap: var(--vd-scale-spacing-400);--vd-drawer-width-sm: calc(var(--vd-scale-spacing-1800) * 4);--vd-drawer-width-md: calc(var(--vd-scale-spacing-1800) * 7);--vd-drawer-width-lg: calc(var(--vd-scale-spacing-1800) * 11 + var(--vd-scale-spacing-1000));--vd-drawer-width: var(--vd-drawer-width-md);display:block;width:100%}::ng-deep .vd-drawer-panel{padding:0;height:100vh;max-height:100vh;display:flex;justify-content:flex-end;align-items:stretch}::ng-deep .vd-drawer-backdrop{background-color:var(--vd-color-background-overlay-base)}::ng-deep .vd-drawer__footer--sm vd-button .vd-button{width:100%}@keyframes slideInRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes slideOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}.vd-drawer{background-color:var(--vd-drawer-content-bg);border-left:var(--vd-scale-border-width-md) solid var(--vd-drawer-border);width:var(--vd-drawer-width);max-width:100vw;height:100vh;max-height:100vh;display:flex;flex-direction:column;animation:slideInRight .25s cubic-bezier(.4,0,.2,1) forwards}.vd-drawer--closing{animation:slideOutRight .15s cubic-bezier(.4,0,.2,1) forwards}.vd-drawer--sm{--vd-drawer-width: var(--vd-drawer-width-sm)}.vd-drawer--md{--vd-drawer-width: var(--vd-drawer-width-md)}.vd-drawer--lg{--vd-drawer-width: var(--vd-drawer-width-lg)}.vd-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:var(--vd-scale-spacing-400);padding:var(--vd-drawer-header-padding);background-color:var(--vd-drawer-header-bg)}.vd-drawer__header-text{display:flex;flex-direction:column;gap:var(--vd-scale-spacing-0)}.vd-drawer__header-text .title-medium{margin:0;color:var(--vd-color-content-default-secondary)}.vd-drawer__content{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--vd-drawer-content-padding);background-color:var(--vd-drawer-content-bg)}.vd-drawer__content>:only-child{height:100%;min-height:0}.vd-drawer__footer{display:flex;justify-content:flex-end;align-items:center;gap:var(--vd-scale-spacing-400);padding:var(--vd-drawer-footer-padding);background-color:var(--vd-drawer-footer-bg)}.vd-drawer__footer--sm>vd-button{flex:1}\n"] }]
|
|
3347
3347
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
3348
3348
|
type: Inject,
|
|
3349
3349
|
args: [DIALOG_DATA]
|
|
@@ -3396,11 +3396,11 @@ class VdDialog {
|
|
|
3396
3396
|
}, 150);
|
|
3397
3397
|
}
|
|
3398
3398
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VdDialog, deps: [{ token: DIALOG_DATA }, { token: i1$2.DialogRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3399
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: VdDialog, isStandalone: true, selector: "vd-dialog", ngImport: i0, template: "<div\n class=\"vd-dialog\"\n [class.vd-dialog--closing]=\"isClosing\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"config.title\"\n>\n <div class=\"vd-dialog__header\">\n <div class=\"vd-dialog__header-text\">\n <h6 class=\"vd-dialog__title title-medium\">\n {{ config.title }}\n </h6>\n </div>\n\n <vd-icon-button\n class=\"vd-dialog__close\"\n icon=\"vd-icon-
|
|
3399
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: VdDialog, isStandalone: true, selector: "vd-dialog", ngImport: i0, template: "<div\n class=\"vd-dialog\"\n [class.vd-dialog--closing]=\"isClosing\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"config.title\"\n>\n <div class=\"vd-dialog__header\">\n <div class=\"vd-dialog__header-text\">\n <h6 class=\"vd-dialog__title title-medium\">\n {{ config.title }}\n </h6>\n </div>\n\n <vd-icon-button\n class=\"vd-dialog__close\"\n icon=\"vd-icon-xmark\"\n variant=\"transparent\"\n color=\"neutral\"\n size=\"sm\"\n ariaLabel=\"Close dialog\"\n (click)=\"handleClose()\"\n ></vd-icon-button>\n </div>\n\n <div class=\"vd-dialog__content\">\n <ng-container\n *ngTemplateOutlet=\"config.contentTemplate; context: config.context ?? null\"\n ></ng-container>\n </div>\n\n <div *ngIf=\"hasActions\" class=\"vd-dialog__footer\">\n <vd-button\n *ngIf=\"config.secondaryActionLabel\"\n [label]=\"config.secondaryActionLabel\"\n variant=\"subtle\"\n color=\"neutral\"\n size=\"md\"\n (click)=\"handleSecondaryAction()\"\n ></vd-button>\n\n <vd-button\n *ngIf=\"config.primaryActionLabel\"\n [label]=\"config.primaryActionLabel\"\n variant=\"solid\"\n color=\"primary\"\n size=\"md\"\n (click)=\"handlePrimaryAction()\"\n ></vd-button>\n </div>\n</div>\n", styles: [":host{--vd-modal-dialog-shell-bg: var(--vd-color-background-default-secondary);--vd-modal-dialog-content-bg: var(--vd-color-background-default-base);--vd-modal-dialog-border-color: var(--vd-color-border-default-tertiary);--vd-modal-dialog-title-color: var(--vd-color-content-default-secondary);--vd-modal-dialog-width: calc(var(--vd-scale-spacing-1600) * 10);--vd-modal-dialog-padding: var(--vd-scale-spacing-400);--vd-modal-dialog-gap: var(--vd-scale-spacing-400);display:block;width:100%}::ng-deep .vd-dialog-backdrop{background-color:var(--vd-color-background-overlay-base)}::ng-deep .vd-dialog-panel{padding:var(--vd-modal-dialog-padding);display:flex;justify-content:center;align-items:center}@keyframes vdDialogSlideDown{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}@keyframes vdDialogSlideUp{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100%)}}.vd-dialog{background-color:var(--vd-modal-dialog-content-bg);border:var(--vd-scale-border-width-md) solid var(--vd-modal-dialog-border-color);border-radius:var(--vd-scale-border-radius-xl);width:var(--vd-modal-dialog-width);max-height:calc(100vh - var(--vd-scale-spacing-1600) * 2);display:flex;flex-direction:column;overflow:hidden;animation:vdDialogSlideDown .25s cubic-bezier(.4,0,.2,1) forwards}.vd-dialog--closing{animation:vdDialogSlideUp .15s cubic-bezier(.4,0,.2,1) forwards}.vd-dialog__header{display:flex;align-items:center;justify-content:space-between;gap:var(--vd-modal-dialog-gap);padding:var(--vd-modal-dialog-padding);background-color:var(--vd-modal-dialog-shell-bg)}.vd-dialog__header-text{flex:1 1 auto;min-width:0}.vd-dialog__title{margin:0;color:var(--vd-modal-dialog-title-color)}.vd-dialog__content{flex:1 1 auto;background-color:var(--vd-modal-dialog-content-bg);padding:var(--vd-modal-dialog-padding);display:flex;flex-direction:column;gap:var(--vd-modal-dialog-gap);min-height:0;overflow:auto;overscroll-behavior:contain}.vd-dialog__footer{display:flex;justify-content:flex-end;align-items:center;gap:var(--vd-modal-dialog-gap);padding:var(--vd-modal-dialog-padding);background-color:var(--vd-modal-dialog-shell-bg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: VdButton, selector: "vd-button", inputs: ["label", "variant", "color", "size", "rounded", "disabled", "loading", "leftIcon", "rightIcon", "type"] }, { kind: "component", type: VdIconButton, selector: "vd-icon-button", inputs: ["icon", "ariaLabel", "variant", "color", "size", "rounded", "disabled", "loading"] }] });
|
|
3400
3400
|
}
|
|
3401
3401
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VdDialog, decorators: [{
|
|
3402
3402
|
type: Component,
|
|
3403
|
-
args: [{ selector: 'vd-dialog', standalone: true, imports: [CommonModule, VdButton, VdIconButton], template: "<div\n class=\"vd-dialog\"\n [class.vd-dialog--closing]=\"isClosing\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"config.title\"\n>\n <div class=\"vd-dialog__header\">\n <div class=\"vd-dialog__header-text\">\n <h6 class=\"vd-dialog__title title-medium\">\n {{ config.title }}\n </h6>\n </div>\n\n <vd-icon-button\n class=\"vd-dialog__close\"\n icon=\"vd-icon-
|
|
3403
|
+
args: [{ selector: 'vd-dialog', standalone: true, imports: [CommonModule, VdButton, VdIconButton], template: "<div\n class=\"vd-dialog\"\n [class.vd-dialog--closing]=\"isClosing\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-label]=\"config.title\"\n>\n <div class=\"vd-dialog__header\">\n <div class=\"vd-dialog__header-text\">\n <h6 class=\"vd-dialog__title title-medium\">\n {{ config.title }}\n </h6>\n </div>\n\n <vd-icon-button\n class=\"vd-dialog__close\"\n icon=\"vd-icon-xmark\"\n variant=\"transparent\"\n color=\"neutral\"\n size=\"sm\"\n ariaLabel=\"Close dialog\"\n (click)=\"handleClose()\"\n ></vd-icon-button>\n </div>\n\n <div class=\"vd-dialog__content\">\n <ng-container\n *ngTemplateOutlet=\"config.contentTemplate; context: config.context ?? null\"\n ></ng-container>\n </div>\n\n <div *ngIf=\"hasActions\" class=\"vd-dialog__footer\">\n <vd-button\n *ngIf=\"config.secondaryActionLabel\"\n [label]=\"config.secondaryActionLabel\"\n variant=\"subtle\"\n color=\"neutral\"\n size=\"md\"\n (click)=\"handleSecondaryAction()\"\n ></vd-button>\n\n <vd-button\n *ngIf=\"config.primaryActionLabel\"\n [label]=\"config.primaryActionLabel\"\n variant=\"solid\"\n color=\"primary\"\n size=\"md\"\n (click)=\"handlePrimaryAction()\"\n ></vd-button>\n </div>\n</div>\n", styles: [":host{--vd-modal-dialog-shell-bg: var(--vd-color-background-default-secondary);--vd-modal-dialog-content-bg: var(--vd-color-background-default-base);--vd-modal-dialog-border-color: var(--vd-color-border-default-tertiary);--vd-modal-dialog-title-color: var(--vd-color-content-default-secondary);--vd-modal-dialog-width: calc(var(--vd-scale-spacing-1600) * 10);--vd-modal-dialog-padding: var(--vd-scale-spacing-400);--vd-modal-dialog-gap: var(--vd-scale-spacing-400);display:block;width:100%}::ng-deep .vd-dialog-backdrop{background-color:var(--vd-color-background-overlay-base)}::ng-deep .vd-dialog-panel{padding:var(--vd-modal-dialog-padding);display:flex;justify-content:center;align-items:center}@keyframes vdDialogSlideDown{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}@keyframes vdDialogSlideUp{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100%)}}.vd-dialog{background-color:var(--vd-modal-dialog-content-bg);border:var(--vd-scale-border-width-md) solid var(--vd-modal-dialog-border-color);border-radius:var(--vd-scale-border-radius-xl);width:var(--vd-modal-dialog-width);max-height:calc(100vh - var(--vd-scale-spacing-1600) * 2);display:flex;flex-direction:column;overflow:hidden;animation:vdDialogSlideDown .25s cubic-bezier(.4,0,.2,1) forwards}.vd-dialog--closing{animation:vdDialogSlideUp .15s cubic-bezier(.4,0,.2,1) forwards}.vd-dialog__header{display:flex;align-items:center;justify-content:space-between;gap:var(--vd-modal-dialog-gap);padding:var(--vd-modal-dialog-padding);background-color:var(--vd-modal-dialog-shell-bg)}.vd-dialog__header-text{flex:1 1 auto;min-width:0}.vd-dialog__title{margin:0;color:var(--vd-modal-dialog-title-color)}.vd-dialog__content{flex:1 1 auto;background-color:var(--vd-modal-dialog-content-bg);padding:var(--vd-modal-dialog-padding);display:flex;flex-direction:column;gap:var(--vd-modal-dialog-gap);min-height:0;overflow:auto;overscroll-behavior:contain}.vd-dialog__footer{display:flex;justify-content:flex-end;align-items:center;gap:var(--vd-modal-dialog-gap);padding:var(--vd-modal-dialog-padding);background-color:var(--vd-modal-dialog-shell-bg)}\n"] }]
|
|
3404
3404
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
3405
3405
|
type: Inject,
|
|
3406
3406
|
args: [DIALOG_DATA]
|
|
@@ -3414,8 +3414,8 @@ class VdProgressTracker {
|
|
|
3414
3414
|
showConnector = true;
|
|
3415
3415
|
defaultIcon = 'vd-icon-placeholder';
|
|
3416
3416
|
itemClick = new EventEmitter();
|
|
3417
|
-
completedIcon = 'vd-icon-
|
|
3418
|
-
errorIcon = 'vd-icon-
|
|
3417
|
+
completedIcon = 'vd-icon-check';
|
|
3418
|
+
errorIcon = 'vd-icon-danger-circle-filled';
|
|
3419
3419
|
get indicatorSize() {
|
|
3420
3420
|
return this.direction === 'horizontal' ? 'sm' : 'lg';
|
|
3421
3421
|
}
|
|
@@ -3920,11 +3920,11 @@ class VdFileInput {
|
|
|
3920
3920
|
this.filesChange.emit([...this.selectedFiles]);
|
|
3921
3921
|
}
|
|
3922
3922
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VdFileInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3923
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: VdFileInput, isStandalone: true, selector: "vd-file-input", inputs: { label: "label", hintText: "hintText", optional: "optional", layout: "layout", supportedFiles: "supportedFiles", supportingText: "supportingText", maxSize: "maxSize", multiple: "multiple", disabled: "disabled", state: "state", helperText: "helperText" }, outputs: { filesChange: "filesChange" }, viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div\n class=\"vd-file-input\"\n [class.vd-file-input--horizontal]=\"layout === 'horizontal'\"\n [class.vd-file-input--vertical]=\"layout === 'vertical'\"\n [class.vd-file-input--error]=\"state === 'error'\"\n [class.vd-file-input--disabled]=\"disabled\"\n>\n <!-- Hidden native file input -->\n <input\n #fileInput\n type=\"file\"\n [id]=\"inputId\"\n [accept]=\"supportedFiles ?? ''\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n style=\"display: none\"\n (change)=\"onFileSelected($event)\"\n />\n\n <!-- Label row -->\n <div class=\"vd-file-input__label-row\" *ngIf=\"label || optional || hintText\">\n <label *ngIf=\"label\" class=\"vd-file-input__label body-medium\" [attr.for]=\"inputId\">\n {{ label }}\n </label>\n <vd-icon *ngIf=\"hintText\" name=\"vd-icon-help\" size=\"md\" [vdTooltip]=\"hintText\"></vd-icon>\n <p *ngIf=\"optional\" class=\"vd-file-input__optional body-medium-italic\">Optional</p>\n </div>\n\n <!-- Dropzone (hidden in single mode once a file is selected) -->\n <div\n *ngIf=\"!hideDropzone\"\n class=\"vd-file-input__dropzone\"\n [class.vd-file-input__dropzone--drag-over]=\"isDragOver\"\n [class.vd-file-input__dropzone--disabled]=\"disabled\"\n [attr.tabindex]=\"disabled ? null : 0\"\n [attr.role]=\"'button'\"\n [attr.aria-label]=\"'Upload file'\"\n [attr.aria-disabled]=\"disabled\"\n (click)=\"openFilePicker()\"\n (keydown.enter)=\"openFilePicker()\"\n (keydown.space)=\"openFilePicker()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n >\n <!-- Upload icon -->\n <span class=\"vd-file-input__icon-wrapper\">\n <vd-icon name=\"vd-icon-upload\" size=\"md\"></vd-icon>\n </span>\n\n <!-- Text content -->\n <div class=\"vd-file-input__content\">\n <div class=\"vd-file-input__placeholder body-medium\">\n <span class=\"vd-file-input__action-text body-medium\">Click to upload</span>\n <span class=\"vd-file-input__drag-text body-medium\">or drag and drop</span>\n </div>\n <div class=\"vd-file-input__footer-row\" *ngIf=\"supportingText\">\n <p classlass=\"vd-file-input__supported-files body-small\" *ngIf=\"supportingText\">\n {{ supportingText }}\n </p>\n </div>\n </div>\n </div>\n\n <!-- Footer: supported files / max size -->\n\n <!-- Selected files list -->\n <ul class=\"vd-file-input__file-list\" *ngIf=\"selectedFiles.length > 0\">\n <li class=\"vd-file-input__file-item\" *ngFor=\"let file of selectedFiles; let i = index\">\n <!-- File icon -->\n <span class=\"vd-file-input__file-icon\">\n <vd-icon name=\"vd-icon-file\" size=\"md\"></vd-icon>\n </span>\n\n <!-- File info -->\n <span class=\"vd-file-input__file-info\">\n <span class=\"vd-file-input__file-name label-medium\">{{ file.name }}</span>\n <span class=\"vd-file-input__file-size body-small\">{{ formatSize(file.size) }}</span>\n </span>\n\n <!-- Remove button -->\n <vd-icon-button\n class=\"vd-file-input__file-remove\"\n icon=\"vd-icon-trash\"\n ariaLabel=\"Remove {{ file.name }}\"\n variant=\"transparent\"\n color=\"neutral\"\n [disabled]=\"disabled\"\n (click)=\"removeFile(i, $event)\"\n ></vd-icon-button>\n </li>\n </ul>\n <!-- Helper text -->\n <div class=\"vd-file-input__helper-row\" *ngIf=\"helperText\">\n <p class=\"vd-file-input__helper-text body-small\">{{ helperText }}</p>\n </div>\n</div>\n", styles: [":host{display:block;width:100%;--vd-file-input-dropzone-bg: var(--vd-color-background-default-secondary);--vd-file-input-dropzone-bg-disabled: var(--vd-color-background-default-disabled);--vd-file-input-border-color: var(--vd-color-border-default-secondary);--vd-file-input-border-hover: var(--vd-color-border-default-base);--vd-file-input-border-disabled: var(--vd-color-border-default-disabled);--vd-file-input-border-drag: var(--vd-color-border-info-base);--vd-file-input-bg-drag: var(--vd-color-background-info-secondary);--vd-file-input-text-label: var(--vd-color-content-default-base);--vd-file-input-text-secondary: var(--vd-color-content-default-secondary);--vd-file-input-text-disabled: var(--vd-color-content-default-disabled);--vd-file-input-text-error: var(--vd-color-content-error-base);--vd-file-input-text-action: var(--vd-color-content-primary-base);--vd-file-input-icon-color: var(--vd-color-content-default-secondary);--vd-file-input-icon-bg: var(--vd-color-background-default-tertiary);--vd-file-input-radius: var(--vd-scale-border-radius-lg);--vd-file-input-border-width: var(--vd-scale-border-width-sm);--vd-file-input-padding: var(--vd-scale-spacing-300);--vd-file-input-gap: var(--vd-scale-spacing-200)}.vd-file-input--error{--vd-file-input-border-color: var(--vd-color-border-error-base);--vd-file-input-text-label: var(--vd-color-content-error-base);--vd-file-input-dropzone-bg: var(--vd-color-background-error-secondary)}.vd-file-input--error:focus-within{--vd-file-input-text-label: var(--vd-color-content-default-base)}.vd-file-input--disabled{--vd-file-input-dropzone-bg: var(--vd-file-input-dropzone-bg-disabled);--vd-file-input-border-color: var(--vd-file-input-border-disabled);--vd-file-input-text-label: var(--vd-file-input-text-disabled);--vd-file-input-text-secondary: var(--vd-file-input-text-disabled);--vd-file-input-text-action: var(--vd-file-input-text-disabled);--vd-file-input-icon-color: var(--vd-color-content-default-disabled)}.vd-file-input{width:100%}.vd-file-input__label-row{display:flex;align-items:center;gap:var(--vd-scale-spacing-200);margin-bottom:var(--vd-scale-spacing-100)}.vd-file-input__label{color:var(--vd-file-input-text-label);cursor:default}.vd-file-input__optional{flex:1;text-align:right;margin:0;color:var(--vd-file-input-text-secondary)}.vd-file-input__dropzone{display:flex;align-items:center;justify-content:center;padding:var(--vd-file-input-padding);background:var(--vd-file-input-dropzone-bg);border:var(--vd-file-input-border-width) solid var(--vd-file-input-border-color);border-radius:var(--vd-file-input-radius);cursor:pointer;transition:border-color .2s ease,background-color .2s ease;outline:none}.vd-file-input__dropzone:hover:not(.vd-file-input__dropzone--disabled){border-color:var(--vd-file-input-border-hover)}.vd-file-input__dropzone:focus-visible:not(.vd-file-input__dropzone--disabled){border-color:var(--vd-file-input-border-hover);outline:var(--vd-scale-border-width-md) solid var(--vd-color-border-primary-tertiary);outline-offset:var(--vd-scale-spacing-50);--vd-file-input-dropzone-bg: var(--vd-color-background-default-secondary)}.vd-file-input__dropzone--drag-over{border-color:var(--vd-file-input-border-drag)!important;background:var(--vd-file-input-bg-drag)!important}.vd-file-input__dropzone--disabled{cursor:not-allowed;opacity:.7}.vd-file-input--horizontal .vd-file-input__dropzone{gap:var(--vd-file-input-gap);border-radius:var(--vd-scale-border-radius-md);flex-direction:row;justify-content:flex-start;padding:calc(var(--vd-scale-spacing-300) - var(--vd-file-input-border-width))}.vd-file-input--horizontal .vd-file-input__icon-wrapper{display:inline-flex;color:var(--vd-file-input-icon-color);flex-shrink:0}.vd-file-input--vertical .vd-file-input__dropzone{flex-direction:column;gap:var(--vd-scale-spacing-200);padding:var(--vd-scale-spacing-600) var(--vd-file-input-padding);min-height:160px}.vd-file-input--vertical .vd-file-input__icon-wrapper{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:var(--vd-scale-border-radius-full);background:var(--vd-file-input-icon-bg);color:var(--vd-file-input-icon-color);flex-shrink:0}.vd-file-input--vertical .vd-file-input__placeholder{text-align:center}.vd-file-input__action-text{color:var(--vd-file-input-text-action);font-weight:600;margin-right:var(--vd-scale-spacing-100)}.vd-file-input__max-size{flex:1;text-align:right}.vd-file-input__drag-text{color:var(--vd-file-input-text-secondary)}.vd-file-input__footer-row{display:flex;justify-content:space-between;color:var(--vd-file-input-text-secondary)}.vd-file-input--error .vd-file-input__helper-text{color:var(--vd-file-input-text-error)}.vd-file-input__helper-row{margin-top:var(--vd-scale-spacing-100)}.vd-file-input__file-list{list-style:none;margin:var(--vd-scale-spacing-100) 0;padding:0;display:flex;flex-direction:column;gap:var(--vd-scale-spacing-100)}.vd-file-input__file-item{display:flex;align-items:center;gap:var(--vd-scale-spacing-200);padding:var(--vd-scale-spacing-200) var(--vd-scale-spacing-300);background:var(--vd-color-background-default-secondary);border:var(--vd-file-input-border-width) solid var(--vd-color-border-default-secondary);border-radius:var(--vd-file-input-radius);transition:border-color .15s ease}.vd-file-input__file-item:hover{border-color:var(--vd-color-border-default-base)}.vd-file-input__file-icon{display:inline-flex;color:var(--vd-file-input-icon-color);flex-shrink:0}.vd-file-input__file-info{display:flex;flex-direction:column;flex:1;overflow:hidden}.vd-file-input__file-name{color:var(--vd-file-input-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vd-file-input__file-size{color:var(--vd-file-input-text-secondary)}.vd-file-input__file-remove{flex-shrink:0}.vd-file-input__add-more{display:inline-flex;align-items:center;gap:var(--vd-scale-spacing-100);margin-top:var(--vd-scale-spacing-100);background:none;border:none;padding:0;cursor:pointer;color:var(--vd-file-input-text-action)}.vd-file-input__add-more:hover{text-decoration:underline}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: VdIcon, selector: "vd-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: VdIconButton, selector: "vd-icon-button", inputs: ["icon", "ariaLabel", "variant", "color", "size", "rounded", "disabled", "loading"] }, { kind: "directive", type: VdTooltipDirective, selector: "[vdTooltip]", inputs: ["vdTooltip", "vdTooltipPosition"] }] });
|
|
3923
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: VdFileInput, isStandalone: true, selector: "vd-file-input", inputs: { label: "label", hintText: "hintText", optional: "optional", layout: "layout", supportedFiles: "supportedFiles", supportingText: "supportingText", maxSize: "maxSize", multiple: "multiple", disabled: "disabled", state: "state", helperText: "helperText" }, outputs: { filesChange: "filesChange" }, viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div\n class=\"vd-file-input\"\n [class.vd-file-input--horizontal]=\"layout === 'horizontal'\"\n [class.vd-file-input--vertical]=\"layout === 'vertical'\"\n [class.vd-file-input--error]=\"state === 'error'\"\n [class.vd-file-input--disabled]=\"disabled\"\n>\n <!-- Hidden native file input -->\n <input\n #fileInput\n type=\"file\"\n [id]=\"inputId\"\n [accept]=\"supportedFiles ?? ''\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n style=\"display: none\"\n (change)=\"onFileSelected($event)\"\n />\n\n <!-- Label row -->\n <div class=\"vd-file-input__label-row\" *ngIf=\"label || optional || hintText\">\n <label *ngIf=\"label\" class=\"vd-file-input__label body-medium\" [attr.for]=\"inputId\">\n {{ label }}\n </label>\n <vd-icon\n *ngIf=\"hintText\"\n name=\"vd-icon-question-circle\"\n size=\"md\"\n [vdTooltip]=\"hintText\"\n ></vd-icon>\n <p *ngIf=\"optional\" class=\"vd-file-input__optional body-medium-italic\">Optional</p>\n </div>\n\n <!-- Dropzone (hidden in single mode once a file is selected) -->\n <div\n *ngIf=\"!hideDropzone\"\n class=\"vd-file-input__dropzone\"\n [class.vd-file-input__dropzone--drag-over]=\"isDragOver\"\n [class.vd-file-input__dropzone--disabled]=\"disabled\"\n [attr.tabindex]=\"disabled ? null : 0\"\n [attr.role]=\"'button'\"\n [attr.aria-label]=\"'Upload file'\"\n [attr.aria-disabled]=\"disabled\"\n (click)=\"openFilePicker()\"\n (keydown.enter)=\"openFilePicker()\"\n (keydown.space)=\"openFilePicker()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n >\n <!-- Upload icon -->\n <span class=\"vd-file-input__icon-wrapper\">\n <vd-icon name=\"vd-icon-upload\" size=\"md\"></vd-icon>\n </span>\n\n <!-- Text content -->\n <div class=\"vd-file-input__content\">\n <div class=\"vd-file-input__placeholder body-medium\">\n <span class=\"vd-file-input__action-text body-medium\">Click to upload</span>\n <span class=\"vd-file-input__drag-text body-medium\">or drag and drop</span>\n </div>\n <div class=\"vd-file-input__footer-row\" *ngIf=\"supportingText\">\n <p classlass=\"vd-file-input__supported-files body-small\" *ngIf=\"supportingText\">\n {{ supportingText }}\n </p>\n </div>\n </div>\n </div>\n\n <!-- Footer: supported files / max size -->\n\n <!-- Selected files list -->\n <ul class=\"vd-file-input__file-list\" *ngIf=\"selectedFiles.length > 0\">\n <li class=\"vd-file-input__file-item\" *ngFor=\"let file of selectedFiles; let i = index\">\n <!-- File icon -->\n <span class=\"vd-file-input__file-icon\">\n <vd-icon name=\"vd-icon-file\" size=\"md\"></vd-icon>\n </span>\n\n <!-- File info -->\n <span class=\"vd-file-input__file-info\">\n <span class=\"vd-file-input__file-name label-medium\">{{ file.name }}</span>\n <span class=\"vd-file-input__file-size body-small\">{{ formatSize(file.size) }}</span>\n </span>\n\n <!-- Remove button -->\n <vd-icon-button\n class=\"vd-file-input__file-remove\"\n icon=\"vd-icon-trash\"\n ariaLabel=\"Remove {{ file.name }}\"\n variant=\"transparent\"\n color=\"neutral\"\n [disabled]=\"disabled\"\n (click)=\"removeFile(i, $event)\"\n ></vd-icon-button>\n </li>\n </ul>\n <!-- Helper text -->\n <div class=\"vd-file-input__helper-row\" *ngIf=\"helperText\">\n <p class=\"vd-file-input__helper-text body-small\">{{ helperText }}</p>\n </div>\n</div>\n", styles: [":host{display:block;width:100%;--vd-file-input-dropzone-bg: var(--vd-color-background-default-secondary);--vd-file-input-dropzone-bg-disabled: var(--vd-color-background-default-disabled);--vd-file-input-border-color: var(--vd-color-border-default-secondary);--vd-file-input-border-hover: var(--vd-color-border-default-base);--vd-file-input-border-disabled: var(--vd-color-border-default-disabled);--vd-file-input-border-drag: var(--vd-color-border-info-base);--vd-file-input-bg-drag: var(--vd-color-background-info-secondary);--vd-file-input-text-label: var(--vd-color-content-default-base);--vd-file-input-text-secondary: var(--vd-color-content-default-secondary);--vd-file-input-text-disabled: var(--vd-color-content-default-disabled);--vd-file-input-text-error: var(--vd-color-content-error-base);--vd-file-input-text-action: var(--vd-color-content-primary-base);--vd-file-input-icon-color: var(--vd-color-content-default-secondary);--vd-file-input-icon-bg: var(--vd-color-background-default-tertiary);--vd-file-input-radius: var(--vd-scale-border-radius-lg);--vd-file-input-border-width: var(--vd-scale-border-width-sm);--vd-file-input-padding: var(--vd-scale-spacing-300);--vd-file-input-gap: var(--vd-scale-spacing-200)}.vd-file-input--error{--vd-file-input-border-color: var(--vd-color-border-error-base);--vd-file-input-text-label: var(--vd-color-content-error-base);--vd-file-input-dropzone-bg: var(--vd-color-background-error-secondary)}.vd-file-input--error:focus-within{--vd-file-input-text-label: var(--vd-color-content-default-base)}.vd-file-input--disabled{--vd-file-input-dropzone-bg: var(--vd-file-input-dropzone-bg-disabled);--vd-file-input-border-color: var(--vd-file-input-border-disabled);--vd-file-input-text-label: var(--vd-file-input-text-disabled);--vd-file-input-text-secondary: var(--vd-file-input-text-disabled);--vd-file-input-text-action: var(--vd-file-input-text-disabled);--vd-file-input-icon-color: var(--vd-color-content-default-disabled)}.vd-file-input{width:100%}.vd-file-input__label-row{display:flex;align-items:center;gap:var(--vd-scale-spacing-200);margin-bottom:var(--vd-scale-spacing-100)}.vd-file-input__label{color:var(--vd-file-input-text-label);cursor:default}.vd-file-input__optional{flex:1;text-align:right;margin:0;color:var(--vd-file-input-text-secondary)}.vd-file-input__dropzone{display:flex;align-items:center;justify-content:center;padding:var(--vd-file-input-padding);background:var(--vd-file-input-dropzone-bg);border:var(--vd-file-input-border-width) solid var(--vd-file-input-border-color);border-radius:var(--vd-file-input-radius);cursor:pointer;transition:border-color .2s ease,background-color .2s ease;outline:none}.vd-file-input__dropzone:hover:not(.vd-file-input__dropzone--disabled){border-color:var(--vd-file-input-border-hover)}.vd-file-input__dropzone:focus-visible:not(.vd-file-input__dropzone--disabled){border-color:var(--vd-file-input-border-hover);outline:var(--vd-scale-border-width-md) solid var(--vd-color-border-primary-tertiary);outline-offset:var(--vd-scale-spacing-50);--vd-file-input-dropzone-bg: var(--vd-color-background-default-secondary)}.vd-file-input__dropzone--drag-over{border-color:var(--vd-file-input-border-drag)!important;background:var(--vd-file-input-bg-drag)!important}.vd-file-input__dropzone--disabled{cursor:not-allowed;opacity:.7}.vd-file-input--horizontal .vd-file-input__dropzone{gap:var(--vd-file-input-gap);border-radius:var(--vd-scale-border-radius-md);flex-direction:row;justify-content:flex-start;padding:calc(var(--vd-scale-spacing-300) - var(--vd-file-input-border-width))}.vd-file-input--horizontal .vd-file-input__icon-wrapper{display:inline-flex;color:var(--vd-file-input-icon-color);flex-shrink:0}.vd-file-input--vertical .vd-file-input__dropzone{flex-direction:column;gap:var(--vd-scale-spacing-200);padding:var(--vd-scale-spacing-600) var(--vd-file-input-padding);min-height:160px}.vd-file-input--vertical .vd-file-input__icon-wrapper{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:var(--vd-scale-border-radius-full);background:var(--vd-file-input-icon-bg);color:var(--vd-file-input-icon-color);flex-shrink:0}.vd-file-input--vertical .vd-file-input__placeholder{text-align:center}.vd-file-input__action-text{color:var(--vd-file-input-text-action);font-weight:600;margin-right:var(--vd-scale-spacing-100)}.vd-file-input__max-size{flex:1;text-align:right}.vd-file-input__drag-text{color:var(--vd-file-input-text-secondary)}.vd-file-input__footer-row{display:flex;justify-content:space-between;color:var(--vd-file-input-text-secondary)}.vd-file-input--error .vd-file-input__helper-text{color:var(--vd-file-input-text-error)}.vd-file-input__helper-row{margin-top:var(--vd-scale-spacing-100)}.vd-file-input__file-list{list-style:none;margin:var(--vd-scale-spacing-100) 0;padding:0;display:flex;flex-direction:column;gap:var(--vd-scale-spacing-100)}.vd-file-input__file-item{display:flex;align-items:center;gap:var(--vd-scale-spacing-200);padding:var(--vd-scale-spacing-200) var(--vd-scale-spacing-300);background:var(--vd-color-background-default-secondary);border:var(--vd-file-input-border-width) solid var(--vd-color-border-default-secondary);border-radius:var(--vd-file-input-radius);transition:border-color .15s ease}.vd-file-input__file-item:hover{border-color:var(--vd-color-border-default-base)}.vd-file-input__file-icon{display:inline-flex;color:var(--vd-file-input-icon-color);flex-shrink:0}.vd-file-input__file-info{display:flex;flex-direction:column;flex:1;overflow:hidden}.vd-file-input__file-name{color:var(--vd-file-input-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vd-file-input__file-size{color:var(--vd-file-input-text-secondary)}.vd-file-input__file-remove{flex-shrink:0}.vd-file-input__add-more{display:inline-flex;align-items:center;gap:var(--vd-scale-spacing-100);margin-top:var(--vd-scale-spacing-100);background:none;border:none;padding:0;cursor:pointer;color:var(--vd-file-input-text-action)}.vd-file-input__add-more:hover{text-decoration:underline}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: VdIcon, selector: "vd-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: VdIconButton, selector: "vd-icon-button", inputs: ["icon", "ariaLabel", "variant", "color", "size", "rounded", "disabled", "loading"] }, { kind: "directive", type: VdTooltipDirective, selector: "[vdTooltip]", inputs: ["vdTooltip", "vdTooltipPosition"] }] });
|
|
3924
3924
|
}
|
|
3925
3925
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VdFileInput, decorators: [{
|
|
3926
3926
|
type: Component,
|
|
3927
|
-
args: [{ selector: 'vd-file-input', standalone: true, imports: [CommonModule, VdIcon, VdIconButton, VdTooltipDirective], template: "<div\n class=\"vd-file-input\"\n [class.vd-file-input--horizontal]=\"layout === 'horizontal'\"\n [class.vd-file-input--vertical]=\"layout === 'vertical'\"\n [class.vd-file-input--error]=\"state === 'error'\"\n [class.vd-file-input--disabled]=\"disabled\"\n>\n <!-- Hidden native file input -->\n <input\n #fileInput\n type=\"file\"\n [id]=\"inputId\"\n [accept]=\"supportedFiles ?? ''\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n style=\"display: none\"\n (change)=\"onFileSelected($event)\"\n />\n\n <!-- Label row -->\n <div class=\"vd-file-input__label-row\" *ngIf=\"label || optional || hintText\">\n <label *ngIf=\"label\" class=\"vd-file-input__label body-medium\" [attr.for]=\"inputId\">\n {{ label }}\n </label>\n <vd-icon
|
|
3927
|
+
args: [{ selector: 'vd-file-input', standalone: true, imports: [CommonModule, VdIcon, VdIconButton, VdTooltipDirective], template: "<div\n class=\"vd-file-input\"\n [class.vd-file-input--horizontal]=\"layout === 'horizontal'\"\n [class.vd-file-input--vertical]=\"layout === 'vertical'\"\n [class.vd-file-input--error]=\"state === 'error'\"\n [class.vd-file-input--disabled]=\"disabled\"\n>\n <!-- Hidden native file input -->\n <input\n #fileInput\n type=\"file\"\n [id]=\"inputId\"\n [accept]=\"supportedFiles ?? ''\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n style=\"display: none\"\n (change)=\"onFileSelected($event)\"\n />\n\n <!-- Label row -->\n <div class=\"vd-file-input__label-row\" *ngIf=\"label || optional || hintText\">\n <label *ngIf=\"label\" class=\"vd-file-input__label body-medium\" [attr.for]=\"inputId\">\n {{ label }}\n </label>\n <vd-icon\n *ngIf=\"hintText\"\n name=\"vd-icon-question-circle\"\n size=\"md\"\n [vdTooltip]=\"hintText\"\n ></vd-icon>\n <p *ngIf=\"optional\" class=\"vd-file-input__optional body-medium-italic\">Optional</p>\n </div>\n\n <!-- Dropzone (hidden in single mode once a file is selected) -->\n <div\n *ngIf=\"!hideDropzone\"\n class=\"vd-file-input__dropzone\"\n [class.vd-file-input__dropzone--drag-over]=\"isDragOver\"\n [class.vd-file-input__dropzone--disabled]=\"disabled\"\n [attr.tabindex]=\"disabled ? null : 0\"\n [attr.role]=\"'button'\"\n [attr.aria-label]=\"'Upload file'\"\n [attr.aria-disabled]=\"disabled\"\n (click)=\"openFilePicker()\"\n (keydown.enter)=\"openFilePicker()\"\n (keydown.space)=\"openFilePicker()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n >\n <!-- Upload icon -->\n <span class=\"vd-file-input__icon-wrapper\">\n <vd-icon name=\"vd-icon-upload\" size=\"md\"></vd-icon>\n </span>\n\n <!-- Text content -->\n <div class=\"vd-file-input__content\">\n <div class=\"vd-file-input__placeholder body-medium\">\n <span class=\"vd-file-input__action-text body-medium\">Click to upload</span>\n <span class=\"vd-file-input__drag-text body-medium\">or drag and drop</span>\n </div>\n <div class=\"vd-file-input__footer-row\" *ngIf=\"supportingText\">\n <p classlass=\"vd-file-input__supported-files body-small\" *ngIf=\"supportingText\">\n {{ supportingText }}\n </p>\n </div>\n </div>\n </div>\n\n <!-- Footer: supported files / max size -->\n\n <!-- Selected files list -->\n <ul class=\"vd-file-input__file-list\" *ngIf=\"selectedFiles.length > 0\">\n <li class=\"vd-file-input__file-item\" *ngFor=\"let file of selectedFiles; let i = index\">\n <!-- File icon -->\n <span class=\"vd-file-input__file-icon\">\n <vd-icon name=\"vd-icon-file\" size=\"md\"></vd-icon>\n </span>\n\n <!-- File info -->\n <span class=\"vd-file-input__file-info\">\n <span class=\"vd-file-input__file-name label-medium\">{{ file.name }}</span>\n <span class=\"vd-file-input__file-size body-small\">{{ formatSize(file.size) }}</span>\n </span>\n\n <!-- Remove button -->\n <vd-icon-button\n class=\"vd-file-input__file-remove\"\n icon=\"vd-icon-trash\"\n ariaLabel=\"Remove {{ file.name }}\"\n variant=\"transparent\"\n color=\"neutral\"\n [disabled]=\"disabled\"\n (click)=\"removeFile(i, $event)\"\n ></vd-icon-button>\n </li>\n </ul>\n <!-- Helper text -->\n <div class=\"vd-file-input__helper-row\" *ngIf=\"helperText\">\n <p class=\"vd-file-input__helper-text body-small\">{{ helperText }}</p>\n </div>\n</div>\n", styles: [":host{display:block;width:100%;--vd-file-input-dropzone-bg: var(--vd-color-background-default-secondary);--vd-file-input-dropzone-bg-disabled: var(--vd-color-background-default-disabled);--vd-file-input-border-color: var(--vd-color-border-default-secondary);--vd-file-input-border-hover: var(--vd-color-border-default-base);--vd-file-input-border-disabled: var(--vd-color-border-default-disabled);--vd-file-input-border-drag: var(--vd-color-border-info-base);--vd-file-input-bg-drag: var(--vd-color-background-info-secondary);--vd-file-input-text-label: var(--vd-color-content-default-base);--vd-file-input-text-secondary: var(--vd-color-content-default-secondary);--vd-file-input-text-disabled: var(--vd-color-content-default-disabled);--vd-file-input-text-error: var(--vd-color-content-error-base);--vd-file-input-text-action: var(--vd-color-content-primary-base);--vd-file-input-icon-color: var(--vd-color-content-default-secondary);--vd-file-input-icon-bg: var(--vd-color-background-default-tertiary);--vd-file-input-radius: var(--vd-scale-border-radius-lg);--vd-file-input-border-width: var(--vd-scale-border-width-sm);--vd-file-input-padding: var(--vd-scale-spacing-300);--vd-file-input-gap: var(--vd-scale-spacing-200)}.vd-file-input--error{--vd-file-input-border-color: var(--vd-color-border-error-base);--vd-file-input-text-label: var(--vd-color-content-error-base);--vd-file-input-dropzone-bg: var(--vd-color-background-error-secondary)}.vd-file-input--error:focus-within{--vd-file-input-text-label: var(--vd-color-content-default-base)}.vd-file-input--disabled{--vd-file-input-dropzone-bg: var(--vd-file-input-dropzone-bg-disabled);--vd-file-input-border-color: var(--vd-file-input-border-disabled);--vd-file-input-text-label: var(--vd-file-input-text-disabled);--vd-file-input-text-secondary: var(--vd-file-input-text-disabled);--vd-file-input-text-action: var(--vd-file-input-text-disabled);--vd-file-input-icon-color: var(--vd-color-content-default-disabled)}.vd-file-input{width:100%}.vd-file-input__label-row{display:flex;align-items:center;gap:var(--vd-scale-spacing-200);margin-bottom:var(--vd-scale-spacing-100)}.vd-file-input__label{color:var(--vd-file-input-text-label);cursor:default}.vd-file-input__optional{flex:1;text-align:right;margin:0;color:var(--vd-file-input-text-secondary)}.vd-file-input__dropzone{display:flex;align-items:center;justify-content:center;padding:var(--vd-file-input-padding);background:var(--vd-file-input-dropzone-bg);border:var(--vd-file-input-border-width) solid var(--vd-file-input-border-color);border-radius:var(--vd-file-input-radius);cursor:pointer;transition:border-color .2s ease,background-color .2s ease;outline:none}.vd-file-input__dropzone:hover:not(.vd-file-input__dropzone--disabled){border-color:var(--vd-file-input-border-hover)}.vd-file-input__dropzone:focus-visible:not(.vd-file-input__dropzone--disabled){border-color:var(--vd-file-input-border-hover);outline:var(--vd-scale-border-width-md) solid var(--vd-color-border-primary-tertiary);outline-offset:var(--vd-scale-spacing-50);--vd-file-input-dropzone-bg: var(--vd-color-background-default-secondary)}.vd-file-input__dropzone--drag-over{border-color:var(--vd-file-input-border-drag)!important;background:var(--vd-file-input-bg-drag)!important}.vd-file-input__dropzone--disabled{cursor:not-allowed;opacity:.7}.vd-file-input--horizontal .vd-file-input__dropzone{gap:var(--vd-file-input-gap);border-radius:var(--vd-scale-border-radius-md);flex-direction:row;justify-content:flex-start;padding:calc(var(--vd-scale-spacing-300) - var(--vd-file-input-border-width))}.vd-file-input--horizontal .vd-file-input__icon-wrapper{display:inline-flex;color:var(--vd-file-input-icon-color);flex-shrink:0}.vd-file-input--vertical .vd-file-input__dropzone{flex-direction:column;gap:var(--vd-scale-spacing-200);padding:var(--vd-scale-spacing-600) var(--vd-file-input-padding);min-height:160px}.vd-file-input--vertical .vd-file-input__icon-wrapper{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:var(--vd-scale-border-radius-full);background:var(--vd-file-input-icon-bg);color:var(--vd-file-input-icon-color);flex-shrink:0}.vd-file-input--vertical .vd-file-input__placeholder{text-align:center}.vd-file-input__action-text{color:var(--vd-file-input-text-action);font-weight:600;margin-right:var(--vd-scale-spacing-100)}.vd-file-input__max-size{flex:1;text-align:right}.vd-file-input__drag-text{color:var(--vd-file-input-text-secondary)}.vd-file-input__footer-row{display:flex;justify-content:space-between;color:var(--vd-file-input-text-secondary)}.vd-file-input--error .vd-file-input__helper-text{color:var(--vd-file-input-text-error)}.vd-file-input__helper-row{margin-top:var(--vd-scale-spacing-100)}.vd-file-input__file-list{list-style:none;margin:var(--vd-scale-spacing-100) 0;padding:0;display:flex;flex-direction:column;gap:var(--vd-scale-spacing-100)}.vd-file-input__file-item{display:flex;align-items:center;gap:var(--vd-scale-spacing-200);padding:var(--vd-scale-spacing-200) var(--vd-scale-spacing-300);background:var(--vd-color-background-default-secondary);border:var(--vd-file-input-border-width) solid var(--vd-color-border-default-secondary);border-radius:var(--vd-file-input-radius);transition:border-color .15s ease}.vd-file-input__file-item:hover{border-color:var(--vd-color-border-default-base)}.vd-file-input__file-icon{display:inline-flex;color:var(--vd-file-input-icon-color);flex-shrink:0}.vd-file-input__file-info{display:flex;flex-direction:column;flex:1;overflow:hidden}.vd-file-input__file-name{color:var(--vd-file-input-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vd-file-input__file-size{color:var(--vd-file-input-text-secondary)}.vd-file-input__file-remove{flex-shrink:0}.vd-file-input__add-more{display:inline-flex;align-items:center;gap:var(--vd-scale-spacing-100);margin-top:var(--vd-scale-spacing-100);background:none;border:none;padding:0;cursor:pointer;color:var(--vd-file-input-text-action)}.vd-file-input__add-more:hover{text-decoration:underline}\n"] }]
|
|
3928
3928
|
}], propDecorators: { label: [{
|
|
3929
3929
|
type: Input
|
|
3930
3930
|
}], hintText: [{
|
|
@@ -4053,11 +4053,11 @@ class VdNumberInput {
|
|
|
4053
4053
|
}
|
|
4054
4054
|
}
|
|
4055
4055
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VdNumberInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4056
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: VdNumberInput, isStandalone: true, selector: "vd-number-input", inputs: { label: "label", hintText: "hintText", helperText: "helperText", optional: "optional", leadingIcon: "leadingIcon", trailingActionIcon: "trailingActionIcon", placeholder: "placeholder", value: "value", min: "min", max: "max", step: "step", readOnly: "readOnly", disabled: "disabled", state: "state" }, outputs: { valueChange: "valueChange", valueCommit: "valueCommit", trailingActionClick: "trailingActionClick", inputFocus: "inputFocus" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, static: true }], ngImport: i0, template: "<div\n class=\"vd-number-input\"\n [class.vd-number-input--error]=\"state === 'error'\"\n [class.vd-number-input--disabled]=\"disabled\"\n [class.vd-number-input--success]=\"state === 'success'\"\n [class.vd-number-input--warning]=\"state === 'warning'\"\n>\n <!-- Label row -->\n <div class=\"vd-number-input__label-row\" *ngIf=\"label || optional || hintText\">\n <label *ngIf=\"label\" class=\"vd-number-input__label\" [attr.for]=\"inputId\">\n {{ label }}\n </label>\n\n <vd-icon *ngIf=\"hintText\" name=\"vd-icon-
|
|
4056
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: VdNumberInput, isStandalone: true, selector: "vd-number-input", inputs: { label: "label", hintText: "hintText", helperText: "helperText", optional: "optional", leadingIcon: "leadingIcon", trailingActionIcon: "trailingActionIcon", placeholder: "placeholder", value: "value", min: "min", max: "max", step: "step", readOnly: "readOnly", disabled: "disabled", state: "state" }, outputs: { valueChange: "valueChange", valueCommit: "valueCommit", trailingActionClick: "trailingActionClick", inputFocus: "inputFocus" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, static: true }], ngImport: i0, template: "<div\n class=\"vd-number-input\"\n [class.vd-number-input--error]=\"state === 'error'\"\n [class.vd-number-input--disabled]=\"disabled\"\n [class.vd-number-input--success]=\"state === 'success'\"\n [class.vd-number-input--warning]=\"state === 'warning'\"\n>\n <!-- Label row -->\n <div class=\"vd-number-input__label-row\" *ngIf=\"label || optional || hintText\">\n <label *ngIf=\"label\" class=\"vd-number-input__label\" [attr.for]=\"inputId\">\n {{ label }}\n </label>\n\n <vd-icon *ngIf=\"hintText\" name=\"vd-icon-question-circle\" [vdTooltip]=\"hintText\"></vd-icon>\n <p *ngIf=\"optional\" class=\"vd-number-input__optional body-medium-italic\">Optional</p>\n </div>\n\n <div class=\"vd-number-input__container\" (click)=\"focusInput()\">\n <span *ngIf=\"leadingIcon\" class=\"vd-number-input__leading-icon\">\n <vd-icon [name]=\"leadingIcon\"></vd-icon>\n </span>\n\n <input\n #inputElement\n [id]=\"inputId\"\n class=\"vd-number-input__input body-medium\"\n type=\"number\"\n [placeholder]=\"placeholder\"\n [value]=\"value === null ? '' : value\"\n [attr.min]=\"min !== undefined ? min : null\"\n [attr.max]=\"max !== undefined ? max : null\"\n [attr.step]=\"step !== undefined ? step : null\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n [disabled]=\"disabled\"\n [readonly]=\"readOnly\"\n />\n\n <span *ngIf=\"trailingStateIcon\" class=\"vd-number-input__trailing-icon state\">\n <vd-icon [name]=\"trailingStateIcon\"></vd-icon>\n </span>\n\n <span class=\"vd-number-input__trailing-action-container\" *ngIf=\"trailingActionIcon\">\n <vd-icon-button\n class=\"vd-number-input__trailing-action\"\n variant=\"transparent\"\n color=\"neutral\"\n [disabled]=\"disabled\"\n [icon]=\"trailingActionIcon\"\n (click)=\"onTrailingActionClick(); $event.stopPropagation()\"\n ></vd-icon-button>\n </span>\n </div>\n\n <!-- Helper row -->\n <div class=\"vd-number-input__helper-row\" *ngIf=\"helperText\">\n <span class=\"vd-number-input__helper-text body-small\">\n {{ helperText }}\n </span>\n </div>\n</div>\n", styles: [":host{display:block;width:100%;--vd-number-input-border-base: var(--vd-color-border-default-base);--vd-number-input-border-secondary: var(--vd-color-border-default-secondary);--vd-number-input-border-disabled: var(--vd-color-border-default-disabled);--vd-number-input-outline-color: var(--vd-color-border-primary-tertiary);--vd-number-input-bg-base: var(--vd-color-background-default-secondary);--vd-number-input-bg-disabled: var(--vd-color-background-default-disabled);--vd-number-input-text-base: var(--vd-color-content-default-base);--vd-number-input-text-secondary: var(--vd-color-content-default-secondary);--vd-number-input-text-disabled: var(--vd-color-content-default-disabled);--vd-number-input-text-placeholder: var(--vd-color-content-default-disabled);--vd-number-input-icon-base: var(--vd-color-content-default-base);--vd-number-input-icon-disabled: var(--vd-color-content-default-disabled);--vd-number-input-padding: var(--vd-scale-spacing-300);--vd-number-input-border-width: var(--vd-scale-border-width-sm);--vd-number-input-radius: var(--vd-scale-border-radius-md);--vd-number-input-outline-width: var(--vd-scale-border-width-md)}.vd-number-input--success{--vd-number-input-icon-state: var(--vd-color-content-success-base);--vd-number-input-text-state: var(--vd-color-content-success-base);--vd-number-input-border-state: var(--vd-color-border-success-base);--vd-number-input-bg-state: var(--vd-color-background-success-secondary)}.vd-number-input--error{--vd-number-input-icon-state: var(--vd-color-content-error-base);--vd-number-input-text-state: var(--vd-color-content-error-base);--vd-number-input-border-state: var(--vd-color-border-error-base);--vd-number-input-bg-state: var(--vd-color-background-error-secondary)}.vd-number-input--warning{--vd-number-input-icon-state: var(--vd-color-content-warning-base);--vd-number-input-text-state: var(--vd-color-content-warning-base);--vd-number-input-border-state: var(--vd-color-border-warning-base);--vd-number-input-bg-state: var(--vd-color-background-warning-secondary)}.vd-number-input{width:100%;min-width:240px}.vd-number-input__label-row{display:flex;gap:var(--vd-scale-spacing-200);margin-bottom:var(--vd-scale-spacing-100)}.vd-number-input__label{color:var(--vd-number-input-text-base)}.vd-number-input__optional{flex:1;text-align:right;margin:0}.vd-number-input__container{display:flex;gap:var(--vd-scale-spacing-200);align-items:center;padding:calc(var(--vd-number-input-padding) - var(--vd-number-input-border-width));border:var(--vd-number-input-border-width) solid var(--vd-number-input-border-secondary);border-radius:var(--vd-number-input-radius);background:var(--vd-number-input-bg-base);cursor:text}.vd-number-input__container:focus-within:not(:has(.vd-number-input__trailing-action-container:focus-within)){border-color:var(--vd-input-border-base);outline:var(--vd-number-input-outline-width) solid var(--vd-number-input-outline-color);outline-offset:var(--vd-scale-spacing-50)}.vd-number-input__input{flex:1;border:none;padding:0;background-color:transparent;color:var(--vd-number-input-text-base);-moz-appearance:textfield;appearance:textfield}.vd-number-input__input::-webkit-outer-spin-button,.vd-number-input__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.vd-number-input__input:focus{outline:none}.vd-number-input__input::placeholder{color:var(--vd-number-input-text-placeholder)}.vd-number-input__input:-webkit-autofill{box-shadow:0 0 0 1000px var(--vd-number-input-bg-base) inset;-webkit-box-shadow:0 0 0px 1000px var(--vd-number-input-bg-base) inset;-webkit-text-fill-color:var(--vd-number-input-text-base);transition:background-color 5000s ease-in-out}.vd-number-input__input:-moz-autofill{box-shadow:0 0 0 1000px var(--vd-number-input-bg-base) inset;-moz-text-fill-color:var(--vd-number-input-text-base)}.vd-number-input__leading-icon,.vd-number-input__trailing-icon{display:inline-flex;color:var(--vd-number-input-icon-base)}.vd-number-input__trailing-action-container{position:relative;height:var(--vd-scale-spacing-600);width:var(--vd-scale-spacing-800)}.vd-number-input__trailing-action{position:absolute;top:50%;transform:translateY(-50%)}.vd-number-input__helper-row{display:flex;margin-top:var(--vd-scale-spacing-100)}.vd-number-input__helper-text{margin:0;flex:1}.vd-number-input:focus-within:not(:has(.vd-number-input__trailing-action-container:focus-within)) .vd-number-input__container{border-color:var(--vd-number-input-border-base);outline:var(--vd-number-input-outline-width) solid var(--vd-number-input-outline-color);background:var(--vd-number-input-bg-base)}.vd-number-input:focus-within:not(:has(.vd-number-input__trailing-action-container:focus-within)) .vd-number-input__label,.vd-number-input:focus-within:not(:has(.vd-number-input__trailing-action-container:focus-within)) .vd-number-input__helper-text{color:var(--vd-number-input-text-secondary)}.vd-number-input--disabled .vd-number-input__container{border-color:var(--vd-number-input-border-disabled);background:var(--vd-number-input-bg-disabled)}.vd-number-input--disabled .vd-number-input__label-row,.vd-number-input--disabled .vd-number-input__helper-text,.vd-number-input--disabled .vd-number-input__input{color:var(--vd-number-input-text-disabled)}.vd-number-input--disabled .vd-number-input__leading-icon{color:var(--vd-number-input-icon-disabled)}.vd-number-input--success .vd-number-input__trailing-icon{color:var(--vd-number-input-icon-state)}.vd-number-input--success .vd-number-input__helper-text,.vd-number-input--error .vd-number-input__label{color:var(--vd-number-input-text-state)}.vd-number-input--error .vd-number-input__container{border-color:var(--vd-number-input-border-state);background:var(--vd-number-input-bg-state)}.vd-number-input--error .vd-number-input__trailing-icon{color:var(--vd-number-input-icon-state)}.vd-number-input--error .vd-number-input__helper-text{color:var(--vd-number-input-text-state)}.vd-number-input--warning .vd-number-input__trailing-icon{color:var(--vd-number-input-icon-state)}.vd-number-input--warning .vd-number-input__helper-text{color:var(--vd-number-input-text-state)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: VdIcon, selector: "vd-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: VdIconButton, selector: "vd-icon-button", inputs: ["icon", "ariaLabel", "variant", "color", "size", "rounded", "disabled", "loading"] }, { kind: "directive", type: VdTooltipDirective, selector: "[vdTooltip]", inputs: ["vdTooltip", "vdTooltipPosition"] }] });
|
|
4057
4057
|
}
|
|
4058
4058
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VdNumberInput, decorators: [{
|
|
4059
4059
|
type: Component,
|
|
4060
|
-
args: [{ selector: 'vd-number-input', standalone: true, imports: [CommonModule, FormsModule, VdIcon, VdIconButton, VdTooltipDirective], template: "<div\n class=\"vd-number-input\"\n [class.vd-number-input--error]=\"state === 'error'\"\n [class.vd-number-input--disabled]=\"disabled\"\n [class.vd-number-input--success]=\"state === 'success'\"\n [class.vd-number-input--warning]=\"state === 'warning'\"\n>\n <!-- Label row -->\n <div class=\"vd-number-input__label-row\" *ngIf=\"label || optional || hintText\">\n <label *ngIf=\"label\" class=\"vd-number-input__label\" [attr.for]=\"inputId\">\n {{ label }}\n </label>\n\n <vd-icon *ngIf=\"hintText\" name=\"vd-icon-
|
|
4060
|
+
args: [{ selector: 'vd-number-input', standalone: true, imports: [CommonModule, FormsModule, VdIcon, VdIconButton, VdTooltipDirective], template: "<div\n class=\"vd-number-input\"\n [class.vd-number-input--error]=\"state === 'error'\"\n [class.vd-number-input--disabled]=\"disabled\"\n [class.vd-number-input--success]=\"state === 'success'\"\n [class.vd-number-input--warning]=\"state === 'warning'\"\n>\n <!-- Label row -->\n <div class=\"vd-number-input__label-row\" *ngIf=\"label || optional || hintText\">\n <label *ngIf=\"label\" class=\"vd-number-input__label\" [attr.for]=\"inputId\">\n {{ label }}\n </label>\n\n <vd-icon *ngIf=\"hintText\" name=\"vd-icon-question-circle\" [vdTooltip]=\"hintText\"></vd-icon>\n <p *ngIf=\"optional\" class=\"vd-number-input__optional body-medium-italic\">Optional</p>\n </div>\n\n <div class=\"vd-number-input__container\" (click)=\"focusInput()\">\n <span *ngIf=\"leadingIcon\" class=\"vd-number-input__leading-icon\">\n <vd-icon [name]=\"leadingIcon\"></vd-icon>\n </span>\n\n <input\n #inputElement\n [id]=\"inputId\"\n class=\"vd-number-input__input body-medium\"\n type=\"number\"\n [placeholder]=\"placeholder\"\n [value]=\"value === null ? '' : value\"\n [attr.min]=\"min !== undefined ? min : null\"\n [attr.max]=\"max !== undefined ? max : null\"\n [attr.step]=\"step !== undefined ? step : null\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n [disabled]=\"disabled\"\n [readonly]=\"readOnly\"\n />\n\n <span *ngIf=\"trailingStateIcon\" class=\"vd-number-input__trailing-icon state\">\n <vd-icon [name]=\"trailingStateIcon\"></vd-icon>\n </span>\n\n <span class=\"vd-number-input__trailing-action-container\" *ngIf=\"trailingActionIcon\">\n <vd-icon-button\n class=\"vd-number-input__trailing-action\"\n variant=\"transparent\"\n color=\"neutral\"\n [disabled]=\"disabled\"\n [icon]=\"trailingActionIcon\"\n (click)=\"onTrailingActionClick(); $event.stopPropagation()\"\n ></vd-icon-button>\n </span>\n </div>\n\n <!-- Helper row -->\n <div class=\"vd-number-input__helper-row\" *ngIf=\"helperText\">\n <span class=\"vd-number-input__helper-text body-small\">\n {{ helperText }}\n </span>\n </div>\n</div>\n", styles: [":host{display:block;width:100%;--vd-number-input-border-base: var(--vd-color-border-default-base);--vd-number-input-border-secondary: var(--vd-color-border-default-secondary);--vd-number-input-border-disabled: var(--vd-color-border-default-disabled);--vd-number-input-outline-color: var(--vd-color-border-primary-tertiary);--vd-number-input-bg-base: var(--vd-color-background-default-secondary);--vd-number-input-bg-disabled: var(--vd-color-background-default-disabled);--vd-number-input-text-base: var(--vd-color-content-default-base);--vd-number-input-text-secondary: var(--vd-color-content-default-secondary);--vd-number-input-text-disabled: var(--vd-color-content-default-disabled);--vd-number-input-text-placeholder: var(--vd-color-content-default-disabled);--vd-number-input-icon-base: var(--vd-color-content-default-base);--vd-number-input-icon-disabled: var(--vd-color-content-default-disabled);--vd-number-input-padding: var(--vd-scale-spacing-300);--vd-number-input-border-width: var(--vd-scale-border-width-sm);--vd-number-input-radius: var(--vd-scale-border-radius-md);--vd-number-input-outline-width: var(--vd-scale-border-width-md)}.vd-number-input--success{--vd-number-input-icon-state: var(--vd-color-content-success-base);--vd-number-input-text-state: var(--vd-color-content-success-base);--vd-number-input-border-state: var(--vd-color-border-success-base);--vd-number-input-bg-state: var(--vd-color-background-success-secondary)}.vd-number-input--error{--vd-number-input-icon-state: var(--vd-color-content-error-base);--vd-number-input-text-state: var(--vd-color-content-error-base);--vd-number-input-border-state: var(--vd-color-border-error-base);--vd-number-input-bg-state: var(--vd-color-background-error-secondary)}.vd-number-input--warning{--vd-number-input-icon-state: var(--vd-color-content-warning-base);--vd-number-input-text-state: var(--vd-color-content-warning-base);--vd-number-input-border-state: var(--vd-color-border-warning-base);--vd-number-input-bg-state: var(--vd-color-background-warning-secondary)}.vd-number-input{width:100%;min-width:240px}.vd-number-input__label-row{display:flex;gap:var(--vd-scale-spacing-200);margin-bottom:var(--vd-scale-spacing-100)}.vd-number-input__label{color:var(--vd-number-input-text-base)}.vd-number-input__optional{flex:1;text-align:right;margin:0}.vd-number-input__container{display:flex;gap:var(--vd-scale-spacing-200);align-items:center;padding:calc(var(--vd-number-input-padding) - var(--vd-number-input-border-width));border:var(--vd-number-input-border-width) solid var(--vd-number-input-border-secondary);border-radius:var(--vd-number-input-radius);background:var(--vd-number-input-bg-base);cursor:text}.vd-number-input__container:focus-within:not(:has(.vd-number-input__trailing-action-container:focus-within)){border-color:var(--vd-input-border-base);outline:var(--vd-number-input-outline-width) solid var(--vd-number-input-outline-color);outline-offset:var(--vd-scale-spacing-50)}.vd-number-input__input{flex:1;border:none;padding:0;background-color:transparent;color:var(--vd-number-input-text-base);-moz-appearance:textfield;appearance:textfield}.vd-number-input__input::-webkit-outer-spin-button,.vd-number-input__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.vd-number-input__input:focus{outline:none}.vd-number-input__input::placeholder{color:var(--vd-number-input-text-placeholder)}.vd-number-input__input:-webkit-autofill{box-shadow:0 0 0 1000px var(--vd-number-input-bg-base) inset;-webkit-box-shadow:0 0 0px 1000px var(--vd-number-input-bg-base) inset;-webkit-text-fill-color:var(--vd-number-input-text-base);transition:background-color 5000s ease-in-out}.vd-number-input__input:-moz-autofill{box-shadow:0 0 0 1000px var(--vd-number-input-bg-base) inset;-moz-text-fill-color:var(--vd-number-input-text-base)}.vd-number-input__leading-icon,.vd-number-input__trailing-icon{display:inline-flex;color:var(--vd-number-input-icon-base)}.vd-number-input__trailing-action-container{position:relative;height:var(--vd-scale-spacing-600);width:var(--vd-scale-spacing-800)}.vd-number-input__trailing-action{position:absolute;top:50%;transform:translateY(-50%)}.vd-number-input__helper-row{display:flex;margin-top:var(--vd-scale-spacing-100)}.vd-number-input__helper-text{margin:0;flex:1}.vd-number-input:focus-within:not(:has(.vd-number-input__trailing-action-container:focus-within)) .vd-number-input__container{border-color:var(--vd-number-input-border-base);outline:var(--vd-number-input-outline-width) solid var(--vd-number-input-outline-color);background:var(--vd-number-input-bg-base)}.vd-number-input:focus-within:not(:has(.vd-number-input__trailing-action-container:focus-within)) .vd-number-input__label,.vd-number-input:focus-within:not(:has(.vd-number-input__trailing-action-container:focus-within)) .vd-number-input__helper-text{color:var(--vd-number-input-text-secondary)}.vd-number-input--disabled .vd-number-input__container{border-color:var(--vd-number-input-border-disabled);background:var(--vd-number-input-bg-disabled)}.vd-number-input--disabled .vd-number-input__label-row,.vd-number-input--disabled .vd-number-input__helper-text,.vd-number-input--disabled .vd-number-input__input{color:var(--vd-number-input-text-disabled)}.vd-number-input--disabled .vd-number-input__leading-icon{color:var(--vd-number-input-icon-disabled)}.vd-number-input--success .vd-number-input__trailing-icon{color:var(--vd-number-input-icon-state)}.vd-number-input--success .vd-number-input__helper-text,.vd-number-input--error .vd-number-input__label{color:var(--vd-number-input-text-state)}.vd-number-input--error .vd-number-input__container{border-color:var(--vd-number-input-border-state);background:var(--vd-number-input-bg-state)}.vd-number-input--error .vd-number-input__trailing-icon{color:var(--vd-number-input-icon-state)}.vd-number-input--error .vd-number-input__helper-text{color:var(--vd-number-input-text-state)}.vd-number-input--warning .vd-number-input__trailing-icon{color:var(--vd-number-input-icon-state)}.vd-number-input--warning .vd-number-input__helper-text{color:var(--vd-number-input-text-state)}\n"] }]
|
|
4061
4061
|
}], propDecorators: { label: [{
|
|
4062
4062
|
type: Input
|
|
4063
4063
|
}], hintText: [{
|
|
@@ -4133,11 +4133,11 @@ class VdBreadcrumb {
|
|
|
4133
4133
|
this.itemClick.emit(item);
|
|
4134
4134
|
}
|
|
4135
4135
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VdBreadcrumb, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4136
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: VdBreadcrumb, isStandalone: true, selector: "vd-breadcrumb", inputs: { items: "items", separatorIcon: "separatorIcon", size: "size" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<nav aria-label=\"breadcrumb\">\n <ol class=\"vd-breadcrumb label-medium\">\n <ng-container *ngFor=\"let item of visibleItems; let i = index; let isLast = last\">\n <li class=\"vd-breadcrumb__item\" [attr.aria-current]=\"isLast ? 'page' : null\">\n <!-- Render link if url exists, otherwise a span -->\n <a\n *ngIf=\"item.url; else noLink\"\n [href]=\"item.url\"\n class=\"vd-breadcrumb__link\"\n [class.vd-breadcrumb__link--active]=\"isLast\"\n (click)=\"onItemClick($event, item)\"\n >\n {{ item.label }}\n </a>\n <ng-template #noLink>\n <span\n class=\"vd-breadcrumb__link\"\n [class.vd-breadcrumb__link--active]=\"isLast\"\n (click)=\"onItemClick($event, item)\"\n [style.cursor]=\"isLast ? 'default' : 'pointer'\"\n >\n {{ item.label }}\n </span>\n </ng-template>\n </li>\n\n <!-- Separator for normally visible items -->\n <li *ngIf=\"!isLast\" class=\"vd-breadcrumb__separator\" aria-hidden=\"true\">\n <vd-icon name=\"vd-icon-
|
|
4136
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: VdBreadcrumb, isStandalone: true, selector: "vd-breadcrumb", inputs: { items: "items", separatorIcon: "separatorIcon", size: "size" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<nav aria-label=\"breadcrumb\">\n <ol class=\"vd-breadcrumb label-medium\">\n <ng-container *ngFor=\"let item of visibleItems; let i = index; let isLast = last\">\n <li class=\"vd-breadcrumb__item\" [attr.aria-current]=\"isLast ? 'page' : null\">\n <!-- Render link if url exists, otherwise a span -->\n <a\n *ngIf=\"item.url; else noLink\"\n [href]=\"item.url\"\n class=\"vd-breadcrumb__link\"\n [class.vd-breadcrumb__link--active]=\"isLast\"\n (click)=\"onItemClick($event, item)\"\n >\n {{ item.label }}\n </a>\n <ng-template #noLink>\n <span\n class=\"vd-breadcrumb__link\"\n [class.vd-breadcrumb__link--active]=\"isLast\"\n (click)=\"onItemClick($event, item)\"\n [style.cursor]=\"isLast ? 'default' : 'pointer'\"\n >\n {{ item.label }}\n </span>\n </ng-template>\n </li>\n\n <!-- Separator for normally visible items -->\n <li *ngIf=\"!isLast\" class=\"vd-breadcrumb__separator\" aria-hidden=\"true\">\n <vd-icon name=\"vd-icon-chevron-right\"></vd-icon>\n </li>\n\n <!-- Render the overflow dropdown right after the first item if there are overflow items -->\n <ng-container *ngIf=\"showOverflow && i === 0\">\n <li class=\"vd-breadcrumb__item\">\n <vd-dropdown position=\"bottom-center\">\n <vd-icon-button\n vdDropdownTrigger\n variant=\"transparent\"\n color=\"neutral\"\n size=\"sm\"\n icon=\"vd-icon-menu-dots-horizontal-filled\"\n class=\"vd-breadcrumb__overflow-button\"\n ></vd-icon-button>\n <ng-container vdDropdownContent>\n <vd-dropdown-item-link\n *ngFor=\"let overflowItem of overflowItems\"\n [href]=\"overflowItem.url!\"\n [title]=\"overflowItem.label\"\n ></vd-dropdown-item-link>\n </ng-container>\n </vd-dropdown>\n </li>\n\n <li class=\"vd-breadcrumb__separator\" aria-hidden=\"true\">\n <vd-icon name=\"vd-icon-chevron-right\"></vd-icon>\n </li>\n </ng-container>\n </ng-container>\n </ol>\n</nav>\n", styles: [":host{--vd-bradcrumb-active-text: var(--vd-color-content-default-disabled);--vd-bradcrumb-inactive-text: var(--vd-color-content-default-secondary);--vd-bradcrumb-inactive-text-hover: var(--vd-color-content-default-base);--vd-breadcrumb-seperator-color: var(--vd-color-content-default-secondary)}.vd-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;padding:0;margin:0;list-style:none}.vd-breadcrumb__item{display:inline-flex;align-items:center}.vd-breadcrumb__link{text-decoration:none;color:var(--vd-bradcrumb-inactive-text);transition:color .15s ease-in-out;display:inline-flex;align-items:center}.vd-breadcrumb__link:hover:not(.vd-breadcrumb__link--active){color:var(--vd-bradcrumb-inactive-text-hover)}.vd-breadcrumb__link--active{color:var(--vd-bradcrumb-active-text);font-weight:500;pointer-events:none}.vd-breadcrumb__separator{display:flex;align-items:center;color:var(--vd-bradcrumb-inactive-text);margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: VdIcon, selector: "vd-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: VdDropdown, selector: "vd-dropdown", inputs: ["position"] }, { kind: "component", type: VdDropdownItemLink, selector: "vd-dropdown-item-link", inputs: ["href", "target", "title", "disabled"], outputs: ["select"] }, { kind: "component", type: VdIconButton, selector: "vd-icon-button", inputs: ["icon", "ariaLabel", "variant", "color", "size", "rounded", "disabled", "loading"] }] });
|
|
4137
4137
|
}
|
|
4138
4138
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VdBreadcrumb, decorators: [{
|
|
4139
4139
|
type: Component,
|
|
4140
|
-
args: [{ selector: 'vd-breadcrumb', standalone: true, imports: [CommonModule, VdIcon, VdDropdown, VdDropdownItemLink, VdIconButton], template: "<nav aria-label=\"breadcrumb\">\n <ol class=\"vd-breadcrumb label-medium\">\n <ng-container *ngFor=\"let item of visibleItems; let i = index; let isLast = last\">\n <li class=\"vd-breadcrumb__item\" [attr.aria-current]=\"isLast ? 'page' : null\">\n <!-- Render link if url exists, otherwise a span -->\n <a\n *ngIf=\"item.url; else noLink\"\n [href]=\"item.url\"\n class=\"vd-breadcrumb__link\"\n [class.vd-breadcrumb__link--active]=\"isLast\"\n (click)=\"onItemClick($event, item)\"\n >\n {{ item.label }}\n </a>\n <ng-template #noLink>\n <span\n class=\"vd-breadcrumb__link\"\n [class.vd-breadcrumb__link--active]=\"isLast\"\n (click)=\"onItemClick($event, item)\"\n [style.cursor]=\"isLast ? 'default' : 'pointer'\"\n >\n {{ item.label }}\n </span>\n </ng-template>\n </li>\n\n <!-- Separator for normally visible items -->\n <li *ngIf=\"!isLast\" class=\"vd-breadcrumb__separator\" aria-hidden=\"true\">\n <vd-icon name=\"vd-icon-
|
|
4140
|
+
args: [{ selector: 'vd-breadcrumb', standalone: true, imports: [CommonModule, VdIcon, VdDropdown, VdDropdownItemLink, VdIconButton], template: "<nav aria-label=\"breadcrumb\">\n <ol class=\"vd-breadcrumb label-medium\">\n <ng-container *ngFor=\"let item of visibleItems; let i = index; let isLast = last\">\n <li class=\"vd-breadcrumb__item\" [attr.aria-current]=\"isLast ? 'page' : null\">\n <!-- Render link if url exists, otherwise a span -->\n <a\n *ngIf=\"item.url; else noLink\"\n [href]=\"item.url\"\n class=\"vd-breadcrumb__link\"\n [class.vd-breadcrumb__link--active]=\"isLast\"\n (click)=\"onItemClick($event, item)\"\n >\n {{ item.label }}\n </a>\n <ng-template #noLink>\n <span\n class=\"vd-breadcrumb__link\"\n [class.vd-breadcrumb__link--active]=\"isLast\"\n (click)=\"onItemClick($event, item)\"\n [style.cursor]=\"isLast ? 'default' : 'pointer'\"\n >\n {{ item.label }}\n </span>\n </ng-template>\n </li>\n\n <!-- Separator for normally visible items -->\n <li *ngIf=\"!isLast\" class=\"vd-breadcrumb__separator\" aria-hidden=\"true\">\n <vd-icon name=\"vd-icon-chevron-right\"></vd-icon>\n </li>\n\n <!-- Render the overflow dropdown right after the first item if there are overflow items -->\n <ng-container *ngIf=\"showOverflow && i === 0\">\n <li class=\"vd-breadcrumb__item\">\n <vd-dropdown position=\"bottom-center\">\n <vd-icon-button\n vdDropdownTrigger\n variant=\"transparent\"\n color=\"neutral\"\n size=\"sm\"\n icon=\"vd-icon-menu-dots-horizontal-filled\"\n class=\"vd-breadcrumb__overflow-button\"\n ></vd-icon-button>\n <ng-container vdDropdownContent>\n <vd-dropdown-item-link\n *ngFor=\"let overflowItem of overflowItems\"\n [href]=\"overflowItem.url!\"\n [title]=\"overflowItem.label\"\n ></vd-dropdown-item-link>\n </ng-container>\n </vd-dropdown>\n </li>\n\n <li class=\"vd-breadcrumb__separator\" aria-hidden=\"true\">\n <vd-icon name=\"vd-icon-chevron-right\"></vd-icon>\n </li>\n </ng-container>\n </ng-container>\n </ol>\n</nav>\n", styles: [":host{--vd-bradcrumb-active-text: var(--vd-color-content-default-disabled);--vd-bradcrumb-inactive-text: var(--vd-color-content-default-secondary);--vd-bradcrumb-inactive-text-hover: var(--vd-color-content-default-base);--vd-breadcrumb-seperator-color: var(--vd-color-content-default-secondary)}.vd-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;padding:0;margin:0;list-style:none}.vd-breadcrumb__item{display:inline-flex;align-items:center}.vd-breadcrumb__link{text-decoration:none;color:var(--vd-bradcrumb-inactive-text);transition:color .15s ease-in-out;display:inline-flex;align-items:center}.vd-breadcrumb__link:hover:not(.vd-breadcrumb__link--active){color:var(--vd-bradcrumb-inactive-text-hover)}.vd-breadcrumb__link--active{color:var(--vd-bradcrumb-active-text);font-weight:500;pointer-events:none}.vd-breadcrumb__separator{display:flex;align-items:center;color:var(--vd-bradcrumb-inactive-text);margin:0}\n"] }]
|
|
4141
4141
|
}], propDecorators: { items: [{
|
|
4142
4142
|
type: Input
|
|
4143
4143
|
}], separatorIcon: [{
|
|
@@ -4152,11 +4152,11 @@ class VdNavbar {
|
|
|
4152
4152
|
logoUrl;
|
|
4153
4153
|
logoAlt = 'Brand Logo';
|
|
4154
4154
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VdNavbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4155
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: VdNavbar, isStandalone: true, selector: "vd-navbar", inputs: { logoUrl: "logoUrl", logoAlt: "logoAlt" }, ngImport: i0, template: "<nav class=\"vd-navbar\">\n <div class=\"vd-navbar__row\">\n <ng-content></ng-content>\n </div>\n</nav>\n", styles: [":host{display:block}.vd-navbar{background-color:var(--vd-color-background-default-secondary);padding:var(--vd-scale-spacing-400);
|
|
4155
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: VdNavbar, isStandalone: true, selector: "vd-navbar", inputs: { logoUrl: "logoUrl", logoAlt: "logoAlt" }, ngImport: i0, template: "<nav class=\"vd-navbar\">\n <div class=\"vd-navbar__row\">\n <ng-content></ng-content>\n </div>\n</nav>\n", styles: [":host{display:block}.vd-navbar{background-color:var(--vd-color-background-default-secondary);padding:var(--vd-scale-spacing-400);box-sizing:border-box;z-index:2000;border-bottom:var(--vd-scale-border-width-sm) solid var(--vd-color-border-default-tertiary)}.vd-navbar__row{display:flex;justify-content:space-between;align-items:center}.vd-navbar__brand{display:flex;align-items:center;gap:var(--vd-scale-spacing-400)}.vd-navbar__brand .vd-navbar__logo img{height:32px;max-width:100%;fill:var(--vd-color-content-default-base)}\n"] });
|
|
4156
4156
|
}
|
|
4157
4157
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: VdNavbar, decorators: [{
|
|
4158
4158
|
type: Component,
|
|
4159
|
-
args: [{ selector: 'vd-navbar', standalone: true, template: "<nav class=\"vd-navbar\">\n <div class=\"vd-navbar__row\">\n <ng-content></ng-content>\n </div>\n</nav>\n", styles: [":host{display:block}.vd-navbar{background-color:var(--vd-color-background-default-secondary);padding:var(--vd-scale-spacing-400);
|
|
4159
|
+
args: [{ selector: 'vd-navbar', standalone: true, template: "<nav class=\"vd-navbar\">\n <div class=\"vd-navbar__row\">\n <ng-content></ng-content>\n </div>\n</nav>\n", styles: [":host{display:block}.vd-navbar{background-color:var(--vd-color-background-default-secondary);padding:var(--vd-scale-spacing-400);box-sizing:border-box;z-index:2000;border-bottom:var(--vd-scale-border-width-sm) solid var(--vd-color-border-default-tertiary)}.vd-navbar__row{display:flex;justify-content:space-between;align-items:center}.vd-navbar__brand{display:flex;align-items:center;gap:var(--vd-scale-spacing-400)}.vd-navbar__brand .vd-navbar__logo img{height:32px;max-width:100%;fill:var(--vd-color-content-default-base)}\n"] }]
|
|
4160
4160
|
}], propDecorators: { logoUrl: [{
|
|
4161
4161
|
type: Input
|
|
4162
4162
|
}], logoAlt: [{
|