@kksdev/ds-angular 1.2.4 → 1.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/kksdev-ds-angular.mjs +8 -8
- package/fesm2022/kksdev-ds-angular.mjs.map +1 -1
- package/package.json +1 -1
- package/src/styles/themes/_custom.scss +54 -0
- package/src/styles/themes/_dark.scss +42 -0
- package/src/styles/themes/_light.scss +42 -0
- package/src/styles/tokens/_semantic.scss +67 -0
- package/src/styles/tokens/_tokens.scss +52 -0
|
@@ -6342,7 +6342,7 @@ class DsContainer {
|
|
|
6342
6342
|
<div [class]="containerClasses()" [style]="containerStyle()">
|
|
6343
6343
|
<ng-content />
|
|
6344
6344
|
</div>
|
|
6345
|
-
`, isInline: true, styles: [".ds-container{width:100%;max-width:var(--container-
|
|
6345
|
+
`, isInline: true, styles: [".ds-container{width:100%;max-width:var(--ds-container-lg, 960px);box-sizing:border-box}.ds-container--center{margin-left:auto;margin-right:auto}.ds-container--fluid{max-width:100%}.ds-container--sm{max-width:var(--ds-container-sm, 540px)}.ds-container--md{max-width:var(--ds-container-md, 720px)}.ds-container--lg{max-width:var(--ds-container-lg, 960px)}.ds-container--xl{max-width:var(--ds-container-xl, 1140px)}.ds-container--2xl{max-width:var(--ds-container-2xl, 1320px)}.ds-container--gutter-none{padding-left:0;padding-right:0}.ds-container--gutter-sm{padding-left:var(--ds-container-gutter-sm, var(--space-4));padding-right:var(--ds-container-gutter-sm, var(--space-4))}.ds-container--gutter-md{padding-left:var(--ds-container-gutter-md, var(--space-6));padding-right:var(--ds-container-gutter-md, var(--space-6))}.ds-container--gutter-lg{padding-left:var(--ds-container-gutter-lg, var(--space-8));padding-right:var(--ds-container-gutter-lg, var(--space-8))}.ds-container--padding-y-none{padding-top:0;padding-bottom:0}.ds-container--padding-y-sm{padding-top:var(--space-4);padding-bottom:var(--space-4)}.ds-container--padding-y-md{padding-top:var(--space-6);padding-bottom:var(--space-6)}.ds-container--padding-y-lg{padding-top:var(--space-8);padding-bottom:var(--space-8)}@media (max-width: var(--breakpoint-sm, 575.98px)){.ds-container--gutter-lg{padding-left:var(--space-4);padding-right:var(--space-4)}.ds-container--gutter-md{padding-left:var(--space-3);padding-right:var(--space-3)}}@media (min-width: var(--breakpoint-sm, 576px)) and (max-width: var(--breakpoint-md, 767.98px)){.ds-container--gutter-lg{padding-left:var(--space-5);padding-right:var(--space-5)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6346
6346
|
}
|
|
6347
6347
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsContainer, decorators: [{
|
|
6348
6348
|
type: Component,
|
|
@@ -6350,7 +6350,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
6350
6350
|
<div [class]="containerClasses()" [style]="containerStyle()">
|
|
6351
6351
|
<ng-content />
|
|
6352
6352
|
</div>
|
|
6353
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".ds-container{width:100%;max-width:var(--container-
|
|
6353
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".ds-container{width:100%;max-width:var(--ds-container-lg, 960px);box-sizing:border-box}.ds-container--center{margin-left:auto;margin-right:auto}.ds-container--fluid{max-width:100%}.ds-container--sm{max-width:var(--ds-container-sm, 540px)}.ds-container--md{max-width:var(--ds-container-md, 720px)}.ds-container--lg{max-width:var(--ds-container-lg, 960px)}.ds-container--xl{max-width:var(--ds-container-xl, 1140px)}.ds-container--2xl{max-width:var(--ds-container-2xl, 1320px)}.ds-container--gutter-none{padding-left:0;padding-right:0}.ds-container--gutter-sm{padding-left:var(--ds-container-gutter-sm, var(--space-4));padding-right:var(--ds-container-gutter-sm, var(--space-4))}.ds-container--gutter-md{padding-left:var(--ds-container-gutter-md, var(--space-6));padding-right:var(--ds-container-gutter-md, var(--space-6))}.ds-container--gutter-lg{padding-left:var(--ds-container-gutter-lg, var(--space-8));padding-right:var(--ds-container-gutter-lg, var(--space-8))}.ds-container--padding-y-none{padding-top:0;padding-bottom:0}.ds-container--padding-y-sm{padding-top:var(--space-4);padding-bottom:var(--space-4)}.ds-container--padding-y-md{padding-top:var(--space-6);padding-bottom:var(--space-6)}.ds-container--padding-y-lg{padding-top:var(--space-8);padding-bottom:var(--space-8)}@media (max-width: var(--breakpoint-sm, 575.98px)){.ds-container--gutter-lg{padding-left:var(--space-4);padding-right:var(--space-4)}.ds-container--gutter-md{padding-left:var(--space-3);padding-right:var(--space-3)}}@media (min-width: var(--breakpoint-sm, 576px)) and (max-width: var(--breakpoint-md, 767.98px)){.ds-container--gutter-lg{padding-left:var(--space-5);padding-right:var(--space-5)}}\n"] }]
|
|
6354
6354
|
}], propDecorators: { maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], center: [{ type: i0.Input, args: [{ isSignal: true, alias: "center", required: false }] }], gutter: [{ type: i0.Input, args: [{ isSignal: true, alias: "gutter", required: false }] }], paddingY: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingY", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }] } });
|
|
6355
6355
|
|
|
6356
6356
|
/**
|
|
@@ -6531,7 +6531,7 @@ class DsSearchInput {
|
|
|
6531
6531
|
</button>
|
|
6532
6532
|
}
|
|
6533
6533
|
</div>
|
|
6534
|
-
`, isInline: true, styles: [".ds-search-input{display:flex;align-items:center;position:relative;width:100%;background:var(--input-bg, var(--background-main
|
|
6534
|
+
`, isInline: true, styles: [".ds-search-input{display:flex;align-items:center;position:relative;width:100%;background:var(--search-input-bg, var(--input-bg, var(--background-main)));border:1px solid var(--search-input-border, var(--input-border-color, var(--border-default)));border-radius:var(--search-input-radius, var(--radius-2));transition:border-color var(--duration-fast, .2s) ease,box-shadow var(--duration-fast, .2s) ease}.ds-search-input:focus-within{border-color:var(--search-input-focus-border, var(--input-focus-border, var(--color-primary)));box-shadow:var(--search-input-focus-shadow, var(--input-focus-shadow))}.ds-search-input--sm{height:var(--search-input-height-sm, 32px)}.ds-search-input--sm .ds-search-input__input{font-size:var(--search-input-font-size-sm, var(--font-size-2));padding:0 var(--search-input-padding-sm, var(--space-2))}.ds-search-input--sm .ds-search-input__icon{font-size:var(--search-input-icon-size-sm, 12px)}.ds-search-input--sm .ds-search-input__icon--search{margin-left:var(--search-input-padding-sm, var(--space-2))}.ds-search-input--sm .ds-search-input__clear{margin-right:var(--space-1);width:var(--search-input-clear-size-sm, 20px);height:var(--search-input-clear-size-sm, 20px)}.ds-search-input--md{height:var(--search-input-height-md, 40px)}.ds-search-input--md .ds-search-input__input{font-size:var(--search-input-font-size-md, var(--font-size-3));padding:0 var(--search-input-padding-md, var(--space-3))}.ds-search-input--md .ds-search-input__icon{font-size:var(--search-input-icon-size-md, 14px)}.ds-search-input--md .ds-search-input__icon--search{margin-left:var(--search-input-padding-md, var(--space-3))}.ds-search-input--md .ds-search-input__clear{margin-right:var(--space-2);width:var(--search-input-clear-size-md, 24px);height:var(--search-input-clear-size-md, 24px)}.ds-search-input--lg{height:var(--search-input-height-lg, 48px)}.ds-search-input--lg .ds-search-input__input{font-size:var(--search-input-font-size-lg, var(--font-size-4));padding:0 var(--search-input-padding-lg, var(--space-4))}.ds-search-input--lg .ds-search-input__icon{font-size:var(--search-input-icon-size-lg, 16px)}.ds-search-input--lg .ds-search-input__icon--search{margin-left:var(--search-input-padding-lg, var(--space-4))}.ds-search-input--lg .ds-search-input__clear{margin-right:var(--space-3);width:var(--search-input-clear-size-lg, 28px);height:var(--search-input-clear-size-lg, 28px)}.ds-search-input--disabled{opacity:.6;cursor:not-allowed;background:var(--search-input-disabled-bg, var(--input-disabled-bg, var(--bg-disabled)))}.ds-search-input--disabled .ds-search-input__input{cursor:not-allowed}.ds-search-input--loading .ds-search-input__icon--loading{color:var(--search-input-loading-color, var(--color-primary))}.ds-search-input__icon{flex-shrink:0;color:var(--search-input-icon-color, var(--text-muted))}.ds-search-input__icon--search{pointer-events:none}.ds-search-input__icon--loading{margin-right:var(--space-2)}.ds-search-input__icon--spin{animation:ds-search-spin 1s linear infinite}@keyframes ds-search-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ds-search-input__input{flex:1;border:none;background:transparent;color:var(--search-input-text, var(--text-default));outline:none;min-width:0}.ds-search-input__input::placeholder{color:var(--search-input-placeholder, var(--text-muted))}.ds-search-input__input:disabled{color:var(--search-input-disabled-text, var(--text-disabled))}.ds-search-input__clear{display:flex;align-items:center;justify-content:center;flex-shrink:0;border:none;background:transparent;color:var(--search-input-clear-color, var(--text-muted));cursor:pointer;border-radius:var(--radius-1);transition:background-color var(--duration-fast, .15s) ease,color var(--duration-fast, .15s) ease}.ds-search-input__clear:hover{background:var(--search-input-clear-hover-bg, var(--surface-hover));color:var(--search-input-clear-hover-color, var(--text-default))}.ds-search-input__clear:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.ds-search-input__clear:active{background:var(--search-input-clear-active-bg, var(--surface-raised))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6535
6535
|
}
|
|
6536
6536
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsSearchInput, decorators: [{
|
|
6537
6537
|
type: Component,
|
|
@@ -6579,7 +6579,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
6579
6579
|
useExisting: forwardRef(() => DsSearchInput),
|
|
6580
6580
|
multi: true,
|
|
6581
6581
|
},
|
|
6582
|
-
], styles: [".ds-search-input{display:flex;align-items:center;position:relative;width:100%;background:var(--input-bg, var(--background-main
|
|
6582
|
+
], styles: [".ds-search-input{display:flex;align-items:center;position:relative;width:100%;background:var(--search-input-bg, var(--input-bg, var(--background-main)));border:1px solid var(--search-input-border, var(--input-border-color, var(--border-default)));border-radius:var(--search-input-radius, var(--radius-2));transition:border-color var(--duration-fast, .2s) ease,box-shadow var(--duration-fast, .2s) ease}.ds-search-input:focus-within{border-color:var(--search-input-focus-border, var(--input-focus-border, var(--color-primary)));box-shadow:var(--search-input-focus-shadow, var(--input-focus-shadow))}.ds-search-input--sm{height:var(--search-input-height-sm, 32px)}.ds-search-input--sm .ds-search-input__input{font-size:var(--search-input-font-size-sm, var(--font-size-2));padding:0 var(--search-input-padding-sm, var(--space-2))}.ds-search-input--sm .ds-search-input__icon{font-size:var(--search-input-icon-size-sm, 12px)}.ds-search-input--sm .ds-search-input__icon--search{margin-left:var(--search-input-padding-sm, var(--space-2))}.ds-search-input--sm .ds-search-input__clear{margin-right:var(--space-1);width:var(--search-input-clear-size-sm, 20px);height:var(--search-input-clear-size-sm, 20px)}.ds-search-input--md{height:var(--search-input-height-md, 40px)}.ds-search-input--md .ds-search-input__input{font-size:var(--search-input-font-size-md, var(--font-size-3));padding:0 var(--search-input-padding-md, var(--space-3))}.ds-search-input--md .ds-search-input__icon{font-size:var(--search-input-icon-size-md, 14px)}.ds-search-input--md .ds-search-input__icon--search{margin-left:var(--search-input-padding-md, var(--space-3))}.ds-search-input--md .ds-search-input__clear{margin-right:var(--space-2);width:var(--search-input-clear-size-md, 24px);height:var(--search-input-clear-size-md, 24px)}.ds-search-input--lg{height:var(--search-input-height-lg, 48px)}.ds-search-input--lg .ds-search-input__input{font-size:var(--search-input-font-size-lg, var(--font-size-4));padding:0 var(--search-input-padding-lg, var(--space-4))}.ds-search-input--lg .ds-search-input__icon{font-size:var(--search-input-icon-size-lg, 16px)}.ds-search-input--lg .ds-search-input__icon--search{margin-left:var(--search-input-padding-lg, var(--space-4))}.ds-search-input--lg .ds-search-input__clear{margin-right:var(--space-3);width:var(--search-input-clear-size-lg, 28px);height:var(--search-input-clear-size-lg, 28px)}.ds-search-input--disabled{opacity:.6;cursor:not-allowed;background:var(--search-input-disabled-bg, var(--input-disabled-bg, var(--bg-disabled)))}.ds-search-input--disabled .ds-search-input__input{cursor:not-allowed}.ds-search-input--loading .ds-search-input__icon--loading{color:var(--search-input-loading-color, var(--color-primary))}.ds-search-input__icon{flex-shrink:0;color:var(--search-input-icon-color, var(--text-muted))}.ds-search-input__icon--search{pointer-events:none}.ds-search-input__icon--loading{margin-right:var(--space-2)}.ds-search-input__icon--spin{animation:ds-search-spin 1s linear infinite}@keyframes ds-search-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ds-search-input__input{flex:1;border:none;background:transparent;color:var(--search-input-text, var(--text-default));outline:none;min-width:0}.ds-search-input__input::placeholder{color:var(--search-input-placeholder, var(--text-muted))}.ds-search-input__input:disabled{color:var(--search-input-disabled-text, var(--text-disabled))}.ds-search-input__clear{display:flex;align-items:center;justify-content:center;flex-shrink:0;border:none;background:transparent;color:var(--search-input-clear-color, var(--text-muted));cursor:pointer;border-radius:var(--radius-1);transition:background-color var(--duration-fast, .15s) ease,color var(--duration-fast, .15s) ease}.ds-search-input__clear:hover{background:var(--search-input-clear-hover-bg, var(--surface-hover));color:var(--search-input-clear-hover-color, var(--text-default))}.ds-search-input__clear:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.ds-search-input__clear:active{background:var(--search-input-clear-active-bg, var(--surface-raised))}\n"] }]
|
|
6583
6583
|
}], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], minChars: [{ type: i0.Input, args: [{ isSignal: true, alias: "minChars", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], search: [{ type: i0.Output, args: ["search"] }], searchImmediate: [{ type: i0.Output, args: ["searchImmediate"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], inputRef: [{ type: i0.ViewChild, args: ['inputRef', { isSignal: true }] }] } });
|
|
6584
6584
|
|
|
6585
6585
|
/**
|
|
@@ -7072,7 +7072,7 @@ class DsDatePicker {
|
|
|
7072
7072
|
}
|
|
7073
7073
|
}
|
|
7074
7074
|
</div>
|
|
7075
|
-
`, isInline: true, styles: [".ds-date-picker{display:inline-flex;flex-direction:column;background:var(--datepicker-bg, var(--background-main
|
|
7075
|
+
`, isInline: true, styles: [".ds-date-picker{display:inline-flex;flex-direction:column;background:var(--datepicker-bg, var(--background-main));border:1px solid var(--datepicker-border, var(--border-default));border-radius:var(--datepicker-radius, var(--radius-2));box-shadow:var(--datepicker-shadow, var(--shadow-2));overflow:hidden;-webkit-user-select:none;user-select:none}.ds-date-picker--sm{width:var(--datepicker-width-sm, 260px);font-size:var(--datepicker-font-size-sm, var(--font-size-2))}.ds-date-picker--sm .ds-date-picker__header{padding:var(--datepicker-header-padding-sm, var(--space-2))}.ds-date-picker--sm .ds-date-picker__nav{width:var(--datepicker-nav-size-sm, 24px);height:var(--datepicker-nav-size-sm, 24px)}.ds-date-picker--sm .ds-date-picker__day{width:var(--datepicker-day-size-sm, 28px);height:var(--datepicker-day-size-sm, 28px)}.ds-date-picker--sm .ds-date-picker__weekday{width:var(--datepicker-day-size-sm, 28px);height:var(--datepicker-weekday-height-sm, 24px)}.ds-date-picker--md{width:var(--datepicker-width-md, 300px);font-size:var(--datepicker-font-size-md, var(--font-size-3))}.ds-date-picker--md .ds-date-picker__header{padding:var(--datepicker-header-padding-md, var(--space-3))}.ds-date-picker--md .ds-date-picker__nav{width:var(--datepicker-nav-size-md, 32px);height:var(--datepicker-nav-size-md, 32px)}.ds-date-picker--md .ds-date-picker__day{width:var(--datepicker-day-size-md, 36px);height:var(--datepicker-day-size-md, 36px)}.ds-date-picker--md .ds-date-picker__weekday{width:var(--datepicker-day-size-md, 36px);height:var(--datepicker-weekday-height-md, 28px)}.ds-date-picker--lg{width:var(--datepicker-width-lg, 360px);font-size:var(--datepicker-font-size-lg, var(--font-size-4))}.ds-date-picker--lg .ds-date-picker__header{padding:var(--datepicker-header-padding-lg, var(--space-4))}.ds-date-picker--lg .ds-date-picker__nav{width:var(--datepicker-nav-size-lg, 40px);height:var(--datepicker-nav-size-lg, 40px)}.ds-date-picker--lg .ds-date-picker__day{width:var(--datepicker-day-size-lg, 44px);height:var(--datepicker-day-size-lg, 44px)}.ds-date-picker--lg .ds-date-picker__weekday{width:var(--datepicker-day-size-lg, 44px);height:var(--datepicker-weekday-height-lg, 32px)}.ds-date-picker--disabled{opacity:.6;pointer-events:none}.ds-date-picker__header{display:flex;align-items:center;justify-content:space-between;background:var(--datepicker-header-bg, var(--surface-raised));border-bottom:1px solid var(--datepicker-border, var(--border-default))}.ds-date-picker__title{display:flex;align-items:center;gap:var(--space-1)}.ds-date-picker__month-btn,.ds-date-picker__year-btn{padding:var(--space-1) var(--space-2);background:transparent;border:none;border-radius:var(--radius-1);color:var(--datepicker-title-color, var(--text-default));font-weight:600;cursor:pointer;transition:background-color var(--duration-fast, .15s) ease}.ds-date-picker__month-btn:hover:not(:disabled),.ds-date-picker__year-btn:hover:not(:disabled){background:var(--datepicker-btn-hover-bg, var(--surface-hover))}.ds-date-picker__month-btn:focus-visible,.ds-date-picker__year-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.ds-date-picker__month-btn:disabled,.ds-date-picker__year-btn:disabled{cursor:not-allowed;opacity:.5}.ds-date-picker__nav{display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-1);color:var(--datepicker-nav-color, var(--text-muted));cursor:pointer;transition:background-color var(--duration-fast, .15s) ease,color var(--duration-fast, .15s) ease}.ds-date-picker__nav:hover:not(:disabled){background:var(--datepicker-btn-hover-bg, var(--surface-hover));color:var(--text-default)}.ds-date-picker__nav:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.ds-date-picker__nav:disabled{cursor:not-allowed;opacity:.5}.ds-date-picker__calendar{padding:var(--datepicker-calendar-padding, var(--space-2))}.ds-date-picker__weekdays{display:flex;margin-bottom:var(--datepicker-calendar-gap, var(--space-1))}.ds-date-picker__weekday{display:flex;align-items:center;justify-content:center;color:var(--datepicker-weekday-color, var(--text-muted));font-size:.75em;font-weight:500;text-transform:uppercase}.ds-date-picker__days{display:flex;flex-direction:column;gap:var(--datepicker-calendar-gap, var(--space-1))}.ds-date-picker__week{display:flex}.ds-date-picker__day{display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-1);color:var(--datepicker-day-color, var(--text-default));font-weight:400;cursor:pointer;transition:background-color var(--duration-fast, .15s) ease,color var(--duration-fast, .15s) ease}.ds-date-picker__day:hover:not(:disabled):not(.ds-date-picker__day--selected){background:var(--datepicker-day-hover-bg, var(--surface-hover))}.ds-date-picker__day:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;z-index:1}.ds-date-picker__day--other-month{color:var(--datepicker-day-other-color, var(--text-muted))}.ds-date-picker__day--today{font-weight:600;border:1px solid var(--datepicker-today-border, var(--color-primary))}.ds-date-picker__day--selected{background:var(--datepicker-selected-bg, var(--color-primary));color:var(--datepicker-selected-text, var(--gray-50));font-weight:600}.ds-date-picker__day--selected:hover:not(:disabled){background:var(--datepicker-selected-hover-bg, color-mix(in oklab, var(--color-primary) 85%, var(--background-main)))}.ds-date-picker__day--range-start{background:var(--datepicker-selected-bg, var(--color-primary));color:var(--datepicker-selected-text, var(--gray-50));border-radius:var(--radius-1) 0 0 var(--radius-1)}.ds-date-picker__day--range-end{background:var(--datepicker-selected-bg, var(--color-primary));color:var(--datepicker-selected-text, var(--gray-50));border-radius:0 var(--radius-1) var(--radius-1) 0}.ds-date-picker__day--in-range{background:var(--datepicker-range-bg, color-mix(in oklab, var(--color-primary) 15%, transparent));border-radius:0}.ds-date-picker__day--disabled{opacity:.4;cursor:not-allowed}.ds-date-picker__month-picker,.ds-date-picker__year-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);padding:var(--space-3);max-height:240px;overflow-y:auto}.ds-date-picker__month-option,.ds-date-picker__year-option{padding:var(--space-2);background:transparent;border:1px solid transparent;border-radius:var(--radius-1);color:var(--datepicker-option-color, var(--text-default));cursor:pointer;transition:background-color var(--duration-fast, .15s) ease,border-color var(--duration-fast, .15s) ease}.ds-date-picker__month-option:hover:not(:disabled),.ds-date-picker__year-option:hover:not(:disabled){background:var(--datepicker-option-hover-bg, var(--surface-hover));border-color:var(--border-default)}.ds-date-picker__month-option:focus-visible,.ds-date-picker__year-option:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.ds-date-picker__month-option--selected,.ds-date-picker__year-option--selected{background:var(--datepicker-selected-bg, var(--color-primary));color:var(--datepicker-selected-text, var(--gray-50));border-color:var(--datepicker-selected-bg, var(--color-primary))}.ds-date-picker__month-option--selected:hover:not(:disabled),.ds-date-picker__year-option--selected:hover:not(:disabled){background:var(--datepicker-selected-hover-bg, color-mix(in oklab, var(--color-primary) 85%, var(--background-main)));border-color:var(--datepicker-selected-hover-bg, color-mix(in oklab, var(--color-primary) 85%, var(--background-main)))}.ds-date-picker__month-option:disabled,.ds-date-picker__year-option:disabled{cursor:not-allowed;opacity:.5}.ds-date-picker__actions{display:flex;justify-content:center;gap:var(--space-2);padding:var(--space-2);border-top:1px solid var(--datepicker-border, var(--border-default));background:var(--datepicker-footer-bg, var(--surface-raised))}.ds-date-picker__action{padding:var(--space-1) var(--space-3);background:transparent;border:1px solid var(--border-default);border-radius:var(--radius-1);color:var(--datepicker-action-color, var(--text-default));font-size:.875em;cursor:pointer;transition:background-color var(--duration-fast, .15s) ease,border-color var(--duration-fast, .15s) ease}.ds-date-picker__action:hover:not(:disabled){background:var(--datepicker-action-hover-bg, var(--surface-hover));border-color:var(--border-strong)}.ds-date-picker__action:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.ds-date-picker__action:disabled{cursor:not-allowed;opacity:.5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7076
7076
|
}
|
|
7077
7077
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsDatePicker, decorators: [{
|
|
7078
7078
|
type: Component,
|
|
@@ -7222,7 +7222,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
7222
7222
|
useExisting: forwardRef(() => DsDatePicker),
|
|
7223
7223
|
multi: true,
|
|
7224
7224
|
},
|
|
7225
|
-
], styles: [".ds-date-picker{display:inline-flex;flex-direction:column;background:var(--datepicker-bg, var(--background-main
|
|
7225
|
+
], styles: [".ds-date-picker{display:inline-flex;flex-direction:column;background:var(--datepicker-bg, var(--background-main));border:1px solid var(--datepicker-border, var(--border-default));border-radius:var(--datepicker-radius, var(--radius-2));box-shadow:var(--datepicker-shadow, var(--shadow-2));overflow:hidden;-webkit-user-select:none;user-select:none}.ds-date-picker--sm{width:var(--datepicker-width-sm, 260px);font-size:var(--datepicker-font-size-sm, var(--font-size-2))}.ds-date-picker--sm .ds-date-picker__header{padding:var(--datepicker-header-padding-sm, var(--space-2))}.ds-date-picker--sm .ds-date-picker__nav{width:var(--datepicker-nav-size-sm, 24px);height:var(--datepicker-nav-size-sm, 24px)}.ds-date-picker--sm .ds-date-picker__day{width:var(--datepicker-day-size-sm, 28px);height:var(--datepicker-day-size-sm, 28px)}.ds-date-picker--sm .ds-date-picker__weekday{width:var(--datepicker-day-size-sm, 28px);height:var(--datepicker-weekday-height-sm, 24px)}.ds-date-picker--md{width:var(--datepicker-width-md, 300px);font-size:var(--datepicker-font-size-md, var(--font-size-3))}.ds-date-picker--md .ds-date-picker__header{padding:var(--datepicker-header-padding-md, var(--space-3))}.ds-date-picker--md .ds-date-picker__nav{width:var(--datepicker-nav-size-md, 32px);height:var(--datepicker-nav-size-md, 32px)}.ds-date-picker--md .ds-date-picker__day{width:var(--datepicker-day-size-md, 36px);height:var(--datepicker-day-size-md, 36px)}.ds-date-picker--md .ds-date-picker__weekday{width:var(--datepicker-day-size-md, 36px);height:var(--datepicker-weekday-height-md, 28px)}.ds-date-picker--lg{width:var(--datepicker-width-lg, 360px);font-size:var(--datepicker-font-size-lg, var(--font-size-4))}.ds-date-picker--lg .ds-date-picker__header{padding:var(--datepicker-header-padding-lg, var(--space-4))}.ds-date-picker--lg .ds-date-picker__nav{width:var(--datepicker-nav-size-lg, 40px);height:var(--datepicker-nav-size-lg, 40px)}.ds-date-picker--lg .ds-date-picker__day{width:var(--datepicker-day-size-lg, 44px);height:var(--datepicker-day-size-lg, 44px)}.ds-date-picker--lg .ds-date-picker__weekday{width:var(--datepicker-day-size-lg, 44px);height:var(--datepicker-weekday-height-lg, 32px)}.ds-date-picker--disabled{opacity:.6;pointer-events:none}.ds-date-picker__header{display:flex;align-items:center;justify-content:space-between;background:var(--datepicker-header-bg, var(--surface-raised));border-bottom:1px solid var(--datepicker-border, var(--border-default))}.ds-date-picker__title{display:flex;align-items:center;gap:var(--space-1)}.ds-date-picker__month-btn,.ds-date-picker__year-btn{padding:var(--space-1) var(--space-2);background:transparent;border:none;border-radius:var(--radius-1);color:var(--datepicker-title-color, var(--text-default));font-weight:600;cursor:pointer;transition:background-color var(--duration-fast, .15s) ease}.ds-date-picker__month-btn:hover:not(:disabled),.ds-date-picker__year-btn:hover:not(:disabled){background:var(--datepicker-btn-hover-bg, var(--surface-hover))}.ds-date-picker__month-btn:focus-visible,.ds-date-picker__year-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.ds-date-picker__month-btn:disabled,.ds-date-picker__year-btn:disabled{cursor:not-allowed;opacity:.5}.ds-date-picker__nav{display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-1);color:var(--datepicker-nav-color, var(--text-muted));cursor:pointer;transition:background-color var(--duration-fast, .15s) ease,color var(--duration-fast, .15s) ease}.ds-date-picker__nav:hover:not(:disabled){background:var(--datepicker-btn-hover-bg, var(--surface-hover));color:var(--text-default)}.ds-date-picker__nav:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.ds-date-picker__nav:disabled{cursor:not-allowed;opacity:.5}.ds-date-picker__calendar{padding:var(--datepicker-calendar-padding, var(--space-2))}.ds-date-picker__weekdays{display:flex;margin-bottom:var(--datepicker-calendar-gap, var(--space-1))}.ds-date-picker__weekday{display:flex;align-items:center;justify-content:center;color:var(--datepicker-weekday-color, var(--text-muted));font-size:.75em;font-weight:500;text-transform:uppercase}.ds-date-picker__days{display:flex;flex-direction:column;gap:var(--datepicker-calendar-gap, var(--space-1))}.ds-date-picker__week{display:flex}.ds-date-picker__day{display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-1);color:var(--datepicker-day-color, var(--text-default));font-weight:400;cursor:pointer;transition:background-color var(--duration-fast, .15s) ease,color var(--duration-fast, .15s) ease}.ds-date-picker__day:hover:not(:disabled):not(.ds-date-picker__day--selected){background:var(--datepicker-day-hover-bg, var(--surface-hover))}.ds-date-picker__day:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;z-index:1}.ds-date-picker__day--other-month{color:var(--datepicker-day-other-color, var(--text-muted))}.ds-date-picker__day--today{font-weight:600;border:1px solid var(--datepicker-today-border, var(--color-primary))}.ds-date-picker__day--selected{background:var(--datepicker-selected-bg, var(--color-primary));color:var(--datepicker-selected-text, var(--gray-50));font-weight:600}.ds-date-picker__day--selected:hover:not(:disabled){background:var(--datepicker-selected-hover-bg, color-mix(in oklab, var(--color-primary) 85%, var(--background-main)))}.ds-date-picker__day--range-start{background:var(--datepicker-selected-bg, var(--color-primary));color:var(--datepicker-selected-text, var(--gray-50));border-radius:var(--radius-1) 0 0 var(--radius-1)}.ds-date-picker__day--range-end{background:var(--datepicker-selected-bg, var(--color-primary));color:var(--datepicker-selected-text, var(--gray-50));border-radius:0 var(--radius-1) var(--radius-1) 0}.ds-date-picker__day--in-range{background:var(--datepicker-range-bg, color-mix(in oklab, var(--color-primary) 15%, transparent));border-radius:0}.ds-date-picker__day--disabled{opacity:.4;cursor:not-allowed}.ds-date-picker__month-picker,.ds-date-picker__year-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);padding:var(--space-3);max-height:240px;overflow-y:auto}.ds-date-picker__month-option,.ds-date-picker__year-option{padding:var(--space-2);background:transparent;border:1px solid transparent;border-radius:var(--radius-1);color:var(--datepicker-option-color, var(--text-default));cursor:pointer;transition:background-color var(--duration-fast, .15s) ease,border-color var(--duration-fast, .15s) ease}.ds-date-picker__month-option:hover:not(:disabled),.ds-date-picker__year-option:hover:not(:disabled){background:var(--datepicker-option-hover-bg, var(--surface-hover));border-color:var(--border-default)}.ds-date-picker__month-option:focus-visible,.ds-date-picker__year-option:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.ds-date-picker__month-option--selected,.ds-date-picker__year-option--selected{background:var(--datepicker-selected-bg, var(--color-primary));color:var(--datepicker-selected-text, var(--gray-50));border-color:var(--datepicker-selected-bg, var(--color-primary))}.ds-date-picker__month-option--selected:hover:not(:disabled),.ds-date-picker__year-option--selected:hover:not(:disabled){background:var(--datepicker-selected-hover-bg, color-mix(in oklab, var(--color-primary) 85%, var(--background-main)));border-color:var(--datepicker-selected-hover-bg, color-mix(in oklab, var(--color-primary) 85%, var(--background-main)))}.ds-date-picker__month-option:disabled,.ds-date-picker__year-option:disabled{cursor:not-allowed;opacity:.5}.ds-date-picker__actions{display:flex;justify-content:center;gap:var(--space-2);padding:var(--space-2);border-top:1px solid var(--datepicker-border, var(--border-default));background:var(--datepicker-footer-bg, var(--surface-raised))}.ds-date-picker__action{padding:var(--space-1) var(--space-3);background:transparent;border:1px solid var(--border-default);border-radius:var(--radius-1);color:var(--datepicker-action-color, var(--text-default));font-size:.875em;cursor:pointer;transition:background-color var(--duration-fast, .15s) ease,border-color var(--duration-fast, .15s) ease}.ds-date-picker__action:hover:not(:disabled){background:var(--datepicker-action-hover-bg, var(--surface-hover));border-color:var(--border-strong)}.ds-date-picker__action:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.ds-date-picker__action:disabled{cursor:not-allowed;opacity:.5}\n"] }]
|
|
7226
7226
|
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], showTodayButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTodayButton", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], todayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayLabel", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], prevMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "prevMonthLabel", required: false }] }], nextMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextMonthLabel", required: false }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], rangeChange: [{ type: i0.Output, args: ["rangeChange"] }] } });
|
|
7227
7227
|
|
|
7228
7228
|
class DsAvatar {
|
|
@@ -7304,11 +7304,11 @@ class DsAvatar {
|
|
|
7304
7304
|
this.imageError.set(false);
|
|
7305
7305
|
}
|
|
7306
7306
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7307
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsAvatar, isStandalone: true, selector: "ds-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, autoColor: { classPropertyName: "autoColor", publicName: "autoColor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n [ngClass]=\"containerClasses()\"\n [style.background-color]=\"generatedBgColor()\"\n [attr.role]=\"showImage() ? null : 'img'\"\n [attr.aria-label]=\"showImage() ? null : ariaLabel()\"\n>\n @if (showImage()) {\n <img\n [src]=\"src()\"\n [alt]=\"ariaLabel()\"\n class=\"ds-avatar__image\"\n (error)=\"onImageError()\"\n (load)=\"onImageLoad()\"\n />\n } @else {\n <span class=\"ds-avatar__initials\" aria-hidden=\"true\">\n {{ displayInitials() }}\n </span>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-block}.ds-avatar{display:flex;align-items:center;justify-content:center;overflow:hidden;background-color:var(--avatar-bg);color:var(--avatar-text);font-family:var(--font-family-base);font-weight:var(--font-weight-medium);-webkit-user-select:none;user-select:none}.ds-avatar--sm{width:var(--avatar-size-sm);height:var(--avatar-size-sm);font-size:var(--avatar-font-size-sm)}.ds-avatar--md{width:var(--avatar-size-md);height:var(--avatar-size-md);font-size:var(--avatar-font-size-md)}.ds-avatar--lg{width:var(--avatar-size-lg);height:var(--avatar-size-lg);font-size:var(--avatar-font-size-lg)}.ds-avatar--xl{width:var(--avatar-size-xl);height:var(--avatar-size-xl);font-size:var(--avatar-font-size-xl)}.ds-avatar--circle{border-radius:var(--avatar-radius-circle)}.ds-avatar--rounded{border-radius:var(--avatar-radius-rounded)}.ds-avatar--square{border-radius:var(--avatar-radius-square)}.ds-avatar--initials{background-color:var(--avatar-placeholder-bg);color:var(--avatar-placeholder-text)}.ds-avatar--has-image{background-color:transparent}.ds-avatar__image{width:100%;height:100%;object-fit:cover}.ds-avatar__initials{line-height:1;text-transform:uppercase;letter-spacing:var(--letter-spacing-tight)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
7307
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsAvatar, isStandalone: true, selector: "ds-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, autoColor: { classPropertyName: "autoColor", publicName: "autoColor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n [ngClass]=\"containerClasses()\"\n [style.background-color]=\"generatedBgColor()\"\n [attr.role]=\"showImage() ? null : 'img'\"\n [attr.aria-label]=\"showImage() ? null : ariaLabel()\"\n>\n @if (showImage()) {\n <img\n [src]=\"src()\"\n [alt]=\"ariaLabel()\"\n class=\"ds-avatar__image\"\n (error)=\"onImageError()\"\n (load)=\"onImageLoad()\"\n />\n } @else {\n <span class=\"ds-avatar__initials\" aria-hidden=\"true\">\n {{ displayInitials() }}\n </span>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-block}.ds-avatar{display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background-color:var(--avatar-bg);color:var(--avatar-text);font-family:var(--font-family-base);font-weight:var(--font-weight-medium);-webkit-user-select:none;user-select:none;flex-shrink:0}.ds-avatar--sm{width:var(--avatar-size-sm);height:var(--avatar-size-sm);font-size:var(--avatar-font-size-sm)}.ds-avatar--md{width:var(--avatar-size-md);height:var(--avatar-size-md);font-size:var(--avatar-font-size-md)}.ds-avatar--lg{width:var(--avatar-size-lg);height:var(--avatar-size-lg);font-size:var(--avatar-font-size-lg)}.ds-avatar--xl{width:var(--avatar-size-xl);height:var(--avatar-size-xl);font-size:var(--avatar-font-size-xl)}.ds-avatar--circle{border-radius:var(--avatar-radius-circle)}.ds-avatar--rounded{border-radius:var(--avatar-radius-rounded)}.ds-avatar--square{border-radius:var(--avatar-radius-square)}.ds-avatar--initials{background-color:var(--avatar-placeholder-bg);color:var(--avatar-placeholder-text)}.ds-avatar--has-image{background-color:transparent}.ds-avatar__image{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}.ds-avatar__initials{line-height:1;text-transform:uppercase;letter-spacing:var(--letter-spacing-tight)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
7308
7308
|
}
|
|
7309
7309
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsAvatar, decorators: [{
|
|
7310
7310
|
type: Component,
|
|
7311
|
-
args: [{ selector: 'ds-avatar', standalone: true, imports: [CommonModule], template: "<div\n [ngClass]=\"containerClasses()\"\n [style.background-color]=\"generatedBgColor()\"\n [attr.role]=\"showImage() ? null : 'img'\"\n [attr.aria-label]=\"showImage() ? null : ariaLabel()\"\n>\n @if (showImage()) {\n <img\n [src]=\"src()\"\n [alt]=\"ariaLabel()\"\n class=\"ds-avatar__image\"\n (error)=\"onImageError()\"\n (load)=\"onImageLoad()\"\n />\n } @else {\n <span class=\"ds-avatar__initials\" aria-hidden=\"true\">\n {{ displayInitials() }}\n </span>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-block}.ds-avatar{display:flex;align-items:center;justify-content:center;overflow:hidden;background-color:var(--avatar-bg);color:var(--avatar-text);font-family:var(--font-family-base);font-weight:var(--font-weight-medium);-webkit-user-select:none;user-select:none}.ds-avatar--sm{width:var(--avatar-size-sm);height:var(--avatar-size-sm);font-size:var(--avatar-font-size-sm)}.ds-avatar--md{width:var(--avatar-size-md);height:var(--avatar-size-md);font-size:var(--avatar-font-size-md)}.ds-avatar--lg{width:var(--avatar-size-lg);height:var(--avatar-size-lg);font-size:var(--avatar-font-size-lg)}.ds-avatar--xl{width:var(--avatar-size-xl);height:var(--avatar-size-xl);font-size:var(--avatar-font-size-xl)}.ds-avatar--circle{border-radius:var(--avatar-radius-circle)}.ds-avatar--rounded{border-radius:var(--avatar-radius-rounded)}.ds-avatar--square{border-radius:var(--avatar-radius-square)}.ds-avatar--initials{background-color:var(--avatar-placeholder-bg);color:var(--avatar-placeholder-text)}.ds-avatar--has-image{background-color:transparent}.ds-avatar__image{width:100%;height:100%;object-fit:cover}.ds-avatar__initials{line-height:1;text-transform:uppercase;letter-spacing:var(--letter-spacing-tight)}\n"] }]
|
|
7311
|
+
args: [{ selector: 'ds-avatar', standalone: true, imports: [CommonModule], template: "<div\n [ngClass]=\"containerClasses()\"\n [style.background-color]=\"generatedBgColor()\"\n [attr.role]=\"showImage() ? null : 'img'\"\n [attr.aria-label]=\"showImage() ? null : ariaLabel()\"\n>\n @if (showImage()) {\n <img\n [src]=\"src()\"\n [alt]=\"ariaLabel()\"\n class=\"ds-avatar__image\"\n (error)=\"onImageError()\"\n (load)=\"onImageLoad()\"\n />\n } @else {\n <span class=\"ds-avatar__initials\" aria-hidden=\"true\">\n {{ displayInitials() }}\n </span>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-block}.ds-avatar{display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background-color:var(--avatar-bg);color:var(--avatar-text);font-family:var(--font-family-base);font-weight:var(--font-weight-medium);-webkit-user-select:none;user-select:none;flex-shrink:0}.ds-avatar--sm{width:var(--avatar-size-sm);height:var(--avatar-size-sm);font-size:var(--avatar-font-size-sm)}.ds-avatar--md{width:var(--avatar-size-md);height:var(--avatar-size-md);font-size:var(--avatar-font-size-md)}.ds-avatar--lg{width:var(--avatar-size-lg);height:var(--avatar-size-lg);font-size:var(--avatar-font-size-lg)}.ds-avatar--xl{width:var(--avatar-size-xl);height:var(--avatar-size-xl);font-size:var(--avatar-font-size-xl)}.ds-avatar--circle{border-radius:var(--avatar-radius-circle)}.ds-avatar--rounded{border-radius:var(--avatar-radius-rounded)}.ds-avatar--square{border-radius:var(--avatar-radius-square)}.ds-avatar--initials{background-color:var(--avatar-placeholder-bg);color:var(--avatar-placeholder-text)}.ds-avatar--has-image{background-color:transparent}.ds-avatar__image{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}.ds-avatar__initials{line-height:1;text-transform:uppercase;letter-spacing:var(--letter-spacing-tight)}\n"] }]
|
|
7312
7312
|
}], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], autoColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoColor", required: false }] }] } });
|
|
7313
7313
|
|
|
7314
7314
|
class DsMenu {
|