@crowdfarming/oliva-ds 1.55.0 → 1.55.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -6923,6 +6923,20 @@ class TabsComponent {
|
|
|
6923
6923
|
// Wait for the DOM to be updated
|
|
6924
6924
|
setTimeout(() => this.centerSelectedTab(), 0);
|
|
6925
6925
|
}
|
|
6926
|
+
onKeydown(event, currentValue) {
|
|
6927
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
6928
|
+
event.preventDefault();
|
|
6929
|
+
this.valueChange.emit(currentValue);
|
|
6930
|
+
setTimeout(() => this.centerSelectedTab(), 0);
|
|
6931
|
+
return;
|
|
6932
|
+
}
|
|
6933
|
+
if (event.key === 'Tab' && !event.shiftKey) {
|
|
6934
|
+
const currentIndex = this.options().findIndex((opt) => opt.value === currentValue);
|
|
6935
|
+
if (currentIndex === this.options().length - 1 && currentValue !== String(this.selectedValue())) {
|
|
6936
|
+
event.preventDefault();
|
|
6937
|
+
}
|
|
6938
|
+
}
|
|
6939
|
+
}
|
|
6926
6940
|
centerSelectedTab() {
|
|
6927
6941
|
const scrollContainer = this.tabsRef()?.nativeElement;
|
|
6928
6942
|
const selectedTab = scrollContainer?.querySelector('.c-tabs__tab--selected');
|
|
@@ -6946,11 +6960,11 @@ class TabsComponent {
|
|
|
6946
6960
|
}
|
|
6947
6961
|
}
|
|
6948
6962
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6949
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TabsComponent, isStandalone: true, selector: "lib-tabs", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "tabsRef", first: true, predicate: ["tabsRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"c-tabs\">\n <div class=\"c-tabs__scroll-container\" #tabsRef>\n <ul\n class=\"c-tabs__list\"\n [class.c-tabs__list--center]=\"alignment() === 'center'\"\n role=\"tablist\"\n >\n @for (option of options(); track option.value) {\n <li\n class=\"c-tabs__tab\"\n [class.c-tabs__tab--selected]=\"option.value === selectedValue()\"\n role=\"tab\"\n tabindex=\"0\"\n (click)=\"onClick($event, option.value)\"\n (keydown)=\"
|
|
6963
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TabsComponent, isStandalone: true, selector: "lib-tabs", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "tabsRef", first: true, predicate: ["tabsRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"c-tabs\">\n <div class=\"c-tabs__scroll-container\" #tabsRef>\n <ul\n class=\"c-tabs__list\"\n [class.c-tabs__list--center]=\"alignment() === 'center'\"\n role=\"tablist\"\n >\n @for (option of options(); track option.value) {\n <li\n class=\"c-tabs__tab\"\n [class.c-tabs__tab--selected]=\"option.value === selectedValue()\"\n role=\"tab\"\n [attr.aria-selected]=\"option.value === selectedValue()\"\n tabindex=\"0\"\n (click)=\"onClick($event, option.value)\"\n (keydown)=\"onKeydown($event, option.value)\"\n >\n @if (option.iconName) {\n <lib-icon\n [name]=\"option.iconName\"\n size=\"lg\"\n color=\"core-content-default\"\n />\n }\n {{ option.label }}\n @if (option.showBadge) {\n <lib-badge />\n }\n </li>\n }\n </ul>\n </div>\n</div>\n", styles: [".c-tabs{width:100%}.c-tabs__scroll-container{width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}.c-tabs__scroll-container::-webkit-scrollbar{display:none}.c-tabs__list{width:100%;height:40px;display:flex;align-items:flex-start;border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft);margin:0;padding:0;list-style:none;box-sizing:border-box;min-width:max-content}.c-tabs__list--center{justify-content:center}.c-tabs__tab{cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:72px;flex-shrink:0;white-space:nowrap;box-sizing:border-box;color:var(--color-action-neutral-content-default);text-align:center;font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);padding:var(--space-component-padding-sm) var(--space-component-padding-md);background:var(--color-action-primary-background-default);gap:var(--space-component-gap-sm);margin:0;list-style:none}.c-tabs__tab:hover{color:var(--color-action-neutral-content-hover);background:var(--color-action-neutral-background-hover)}.c-tabs__tab:active{color:var(--color-action-neutral-content-pressed);background-color:var(--color-action-neutral-background-pressed)}.c-tabs__tab:focus-visible{box-shadow:var(--focus-inset);outline:none}.c-tabs__tab--selected{position:relative;color:var(--color-core-content-default);font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);font-style:normal;font-weight:var(--typography-label-md-strong-weight);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-tabs__tab--selected:before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:.125rem;background:var(--color-action-primary-selected-background-default)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "disabled", "name", "color"] }, { kind: "component", type: BadgeComponent, selector: "lib-badge", inputs: ["extraClass", "text", "showText", "strokeEnabled"] }] });
|
|
6950
6964
|
}
|
|
6951
6965
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TabsComponent, decorators: [{
|
|
6952
6966
|
type: Component,
|
|
6953
|
-
args: [{ selector: 'lib-tabs', standalone: true, imports: [IconComponent, BadgeComponent], template: "<div class=\"c-tabs\">\n <div class=\"c-tabs__scroll-container\" #tabsRef>\n <ul\n class=\"c-tabs__list\"\n [class.c-tabs__list--center]=\"alignment() === 'center'\"\n role=\"tablist\"\n >\n @for (option of options(); track option.value) {\n <li\n class=\"c-tabs__tab\"\n [class.c-tabs__tab--selected]=\"option.value === selectedValue()\"\n role=\"tab\"\n tabindex=\"0\"\n (click)=\"onClick($event, option.value)\"\n (keydown)=\"
|
|
6967
|
+
args: [{ selector: 'lib-tabs', standalone: true, imports: [IconComponent, BadgeComponent], template: "<div class=\"c-tabs\">\n <div class=\"c-tabs__scroll-container\" #tabsRef>\n <ul\n class=\"c-tabs__list\"\n [class.c-tabs__list--center]=\"alignment() === 'center'\"\n role=\"tablist\"\n >\n @for (option of options(); track option.value) {\n <li\n class=\"c-tabs__tab\"\n [class.c-tabs__tab--selected]=\"option.value === selectedValue()\"\n role=\"tab\"\n [attr.aria-selected]=\"option.value === selectedValue()\"\n tabindex=\"0\"\n (click)=\"onClick($event, option.value)\"\n (keydown)=\"onKeydown($event, option.value)\"\n >\n @if (option.iconName) {\n <lib-icon\n [name]=\"option.iconName\"\n size=\"lg\"\n color=\"core-content-default\"\n />\n }\n {{ option.label }}\n @if (option.showBadge) {\n <lib-badge />\n }\n </li>\n }\n </ul>\n </div>\n</div>\n", styles: [".c-tabs{width:100%}.c-tabs__scroll-container{width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}.c-tabs__scroll-container::-webkit-scrollbar{display:none}.c-tabs__list{width:100%;height:40px;display:flex;align-items:flex-start;border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft);margin:0;padding:0;list-style:none;box-sizing:border-box;min-width:max-content}.c-tabs__list--center{justify-content:center}.c-tabs__tab{cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:72px;flex-shrink:0;white-space:nowrap;box-sizing:border-box;color:var(--color-action-neutral-content-default);text-align:center;font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);padding:var(--space-component-padding-sm) var(--space-component-padding-md);background:var(--color-action-primary-background-default);gap:var(--space-component-gap-sm);margin:0;list-style:none}.c-tabs__tab:hover{color:var(--color-action-neutral-content-hover);background:var(--color-action-neutral-background-hover)}.c-tabs__tab:active{color:var(--color-action-neutral-content-pressed);background-color:var(--color-action-neutral-background-pressed)}.c-tabs__tab:focus-visible{box-shadow:var(--focus-inset);outline:none}.c-tabs__tab--selected{position:relative;color:var(--color-core-content-default);font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);font-style:normal;font-weight:var(--typography-label-md-strong-weight);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-tabs__tab--selected:before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:.125rem;background:var(--color-action-primary-selected-background-default)}\n"] }]
|
|
6954
6968
|
}] });
|
|
6955
6969
|
|
|
6956
6970
|
class TextInputComponent {
|