From 19620138e4f63783999c537c6114cc770ebcf664 Mon Sep 17 00:00:00 2001 From: Sasha Verbilo Date: Wed, 26 Oct 2022 12:31:51 +0400 Subject: [PATCH 01/18] docs(datepicker): move showcases with format in separate module (#3128) --- src/app/playground-components.ts | 6 +- ...ker-dynamic-inputs-showcase.component.html | 0 ...icker-dynamic-inputs-showcase.component.ts | 0 ...ker-dynamic-inputs-showcase.component.html | 0 ...icker-dynamic-inputs-showcase.component.ts | 0 .../datepicker-example.scss | 31 +++++++ .../datepicker-with-format-routing.module.ts | 32 +++++++ .../datepicker-with-format.module.ts | 34 +++++++ ...ker-dynamic-inputs-showcase.component.html | 0 ...icker-dynamic-inputs-showcase.component.ts | 0 .../datepicker/datepicker-routing.module.ts | 15 --- .../datepicker/datepicker.module.ts | 8 -- .../with-layout/with-layout-routing.module.ts | 93 ++++++++++--------- 13 files changed, 149 insertions(+), 70 deletions(-) rename src/playground/with-layout/{datepicker => datepicker-with-format}/date-timepicker-dynamic-inputs-showcase.component.html (100%) rename src/playground/with-layout/{datepicker => datepicker-with-format}/date-timepicker-dynamic-inputs-showcase.component.ts (100%) rename src/playground/with-layout/{datepicker => datepicker-with-format}/datepicker-dynamic-inputs-showcase.component.html (100%) rename src/playground/with-layout/{datepicker => datepicker-with-format}/datepicker-dynamic-inputs-showcase.component.ts (100%) create mode 100644 src/playground/with-layout/datepicker-with-format/datepicker-example.scss create mode 100644 src/playground/with-layout/datepicker-with-format/datepicker-with-format-routing.module.ts create mode 100644 src/playground/with-layout/datepicker-with-format/datepicker-with-format.module.ts rename src/playground/with-layout/{datepicker => datepicker-with-format}/rangepicker-dynamic-inputs-showcase.component.html (100%) rename src/playground/with-layout/{datepicker => datepicker-with-format}/rangepicker-dynamic-inputs-showcase.component.ts (100%) diff --git a/src/app/playground-components.ts b/src/app/playground-components.ts index 88bd2fc84d..1497c77f24 100644 --- a/src/app/playground-components.ts +++ b/src/app/playground-components.ts @@ -546,19 +546,19 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [ }, { path: 'date-timepicker-dynamic-inputs-showcase.component', - link: '/datepicker/date-timepicker-dynamic-inputs-showcase.component', + link: '/datepicker-with-format/date-timepicker-dynamic-inputs-showcase.component', component: 'DateTimepickerDynamicInputsShowcaseComponent', name: 'Date Timepicker Dynamic Inputs Showcase', }, { path: 'datepicker-dynamic-inputs-showcase.component', - link: '/datepicker/datepicker-dynamic-inputs-showcase.component', + link: '/datepicker-with-format/datepicker-dynamic-inputs-showcase.component', component: 'DatepickerDynamicInputsShowcaseComponent', name: 'Datepicker Dynamic Inputs Showcase', }, { path: 'range-picker-dynamic-inputs-showcase.component', - link: '/datepicker/rangepicker-dynamic-inputs-showcase.component', + link: '/datepicker-with-format/rangepicker-dynamic-inputs-showcase.component', component: 'RangeickerDynamicInputsShowcaseComponent', name: 'Range Picker Dynamic Inputs Showcase', }, diff --git a/src/playground/with-layout/datepicker/date-timepicker-dynamic-inputs-showcase.component.html b/src/playground/with-layout/datepicker-with-format/date-timepicker-dynamic-inputs-showcase.component.html similarity index 100% rename from src/playground/with-layout/datepicker/date-timepicker-dynamic-inputs-showcase.component.html rename to src/playground/with-layout/datepicker-with-format/date-timepicker-dynamic-inputs-showcase.component.html diff --git a/src/playground/with-layout/datepicker/date-timepicker-dynamic-inputs-showcase.component.ts b/src/playground/with-layout/datepicker-with-format/date-timepicker-dynamic-inputs-showcase.component.ts similarity index 100% rename from src/playground/with-layout/datepicker/date-timepicker-dynamic-inputs-showcase.component.ts rename to src/playground/with-layout/datepicker-with-format/date-timepicker-dynamic-inputs-showcase.component.ts diff --git a/src/playground/with-layout/datepicker/datepicker-dynamic-inputs-showcase.component.html b/src/playground/with-layout/datepicker-with-format/datepicker-dynamic-inputs-showcase.component.html similarity index 100% rename from src/playground/with-layout/datepicker/datepicker-dynamic-inputs-showcase.component.html rename to src/playground/with-layout/datepicker-with-format/datepicker-dynamic-inputs-showcase.component.html diff --git a/src/playground/with-layout/datepicker/datepicker-dynamic-inputs-showcase.component.ts b/src/playground/with-layout/datepicker-with-format/datepicker-dynamic-inputs-showcase.component.ts similarity index 100% rename from src/playground/with-layout/datepicker/datepicker-dynamic-inputs-showcase.component.ts rename to src/playground/with-layout/datepicker-with-format/datepicker-dynamic-inputs-showcase.component.ts diff --git a/src/playground/with-layout/datepicker-with-format/datepicker-example.scss b/src/playground/with-layout/datepicker-with-format/datepicker-example.scss new file mode 100644 index 0000000000..7d246c3937 --- /dev/null +++ b/src/playground/with-layout/datepicker-with-format/datepicker-example.scss @@ -0,0 +1,31 @@ +nb-card-body { + text-align: center; +} + +input { + width: 100%; +} + +input:nth-of-type(2) { + margin-top: 1rem; +} + +@media screen and (min-width: 31em) { + input { + width: 21.875rem; + } + + .two-inputs input { + width: calc(50% - 0.5rem); + } + .two-inputs input:last-of-type { + margin-top: 0; + margin-left: 1rem; + } +} + +@media screen and (min-width: 50.25em) { + .two-inputs input { + width: 21.875rem; + } +} diff --git a/src/playground/with-layout/datepicker-with-format/datepicker-with-format-routing.module.ts b/src/playground/with-layout/datepicker-with-format/datepicker-with-format-routing.module.ts new file mode 100644 index 0000000000..e407469e0c --- /dev/null +++ b/src/playground/with-layout/datepicker-with-format/datepicker-with-format-routing.module.ts @@ -0,0 +1,32 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { NgModule } from '@angular/core'; +import { RouterModule, Route } from '@angular/router'; +import { DateTimepickerDynamicInputsShowcaseComponent } from './date-timepicker-dynamic-inputs-showcase.component'; +import { DatepickerDynamicInputsShowcaseComponent } from './datepicker-dynamic-inputs-showcase.component'; +import { RangepickerDynamicInputsShowcaseComponent } from './rangepicker-dynamic-inputs-showcase.component'; + +const routes: Route[] = [ + { + path: 'date-timepicker-dynamic-inputs-showcase.component', + component: DateTimepickerDynamicInputsShowcaseComponent, + }, + { + path: 'datepicker-dynamic-inputs-showcase.component', + component: DatepickerDynamicInputsShowcaseComponent, + }, + { + path: 'rangepicker-dynamic-inputs-showcase.component', + component: RangepickerDynamicInputsShowcaseComponent, + }, +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class DatepickerWithFormatRoutingModule {} diff --git a/src/playground/with-layout/datepicker-with-format/datepicker-with-format.module.ts b/src/playground/with-layout/datepicker-with-format/datepicker-with-format.module.ts new file mode 100644 index 0000000000..45a8a754b9 --- /dev/null +++ b/src/playground/with-layout/datepicker-with-format/datepicker-with-format.module.ts @@ -0,0 +1,34 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { NgModule } from '@angular/core'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { NbButtonModule, NbCardModule, NbDatepickerModule, NbInputModule, NbTimepickerModule } from '@nebular/theme'; +import { DatepickerWithFormatRoutingModule } from './datepicker-with-format-routing.module'; +import { DateTimepickerDynamicInputsShowcaseComponent } from './date-timepicker-dynamic-inputs-showcase.component'; +import { NbDateFnsDateModule } from '@nebular/date-fns'; +import { DatepickerDynamicInputsShowcaseComponent } from './datepicker-dynamic-inputs-showcase.component'; +import { RangepickerDynamicInputsShowcaseComponent } from './rangepicker-dynamic-inputs-showcase.component'; + +@NgModule({ + declarations: [ + DateTimepickerDynamicInputsShowcaseComponent, + DatepickerDynamicInputsShowcaseComponent, + RangepickerDynamicInputsShowcaseComponent, + ], + imports: [ + FormsModule, + ReactiveFormsModule, + NbDatepickerModule.forRoot(), + NbTimepickerModule.forRoot(), + NbInputModule, + DatepickerWithFormatRoutingModule, + NbCardModule, + NbButtonModule, + NbDateFnsDateModule.forRoot({}), + ], +}) +export class DatepickerWithFormatModule {} diff --git a/src/playground/with-layout/datepicker/rangepicker-dynamic-inputs-showcase.component.html b/src/playground/with-layout/datepicker-with-format/rangepicker-dynamic-inputs-showcase.component.html similarity index 100% rename from src/playground/with-layout/datepicker/rangepicker-dynamic-inputs-showcase.component.html rename to src/playground/with-layout/datepicker-with-format/rangepicker-dynamic-inputs-showcase.component.html diff --git a/src/playground/with-layout/datepicker/rangepicker-dynamic-inputs-showcase.component.ts b/src/playground/with-layout/datepicker-with-format/rangepicker-dynamic-inputs-showcase.component.ts similarity index 100% rename from src/playground/with-layout/datepicker/rangepicker-dynamic-inputs-showcase.component.ts rename to src/playground/with-layout/datepicker-with-format/rangepicker-dynamic-inputs-showcase.component.ts diff --git a/src/playground/with-layout/datepicker/datepicker-routing.module.ts b/src/playground/with-layout/datepicker/datepicker-routing.module.ts index 584dcaf7f2..bb6a5cb086 100644 --- a/src/playground/with-layout/datepicker/datepicker-routing.module.ts +++ b/src/playground/with-layout/datepicker/datepicker-routing.module.ts @@ -13,9 +13,6 @@ import { RangepickerShowcaseComponent } from './rangepicker-showcase.component'; import { DateTimepickerShowcaseComponent } from './date-timepicker-showcase.component'; import { DateTimepickerSingleColumnComponent } from './date-timepicker-single-column.component'; import { DatepickerFilterComponent } from './datepicker-filter.component'; -import { DateTimepickerDynamicInputsShowcaseComponent } from './date-timepicker-dynamic-inputs-showcase.component'; -import { DatepickerDynamicInputsShowcaseComponent } from './datepicker-dynamic-inputs-showcase.component'; -import { RangepickerDynamicInputsShowcaseComponent } from './rangepicker-dynamic-inputs-showcase.component'; const routes: Route[] = [ { @@ -30,18 +27,6 @@ const routes: Route[] = [ path: 'date-timepicker-showcase.component', component: DateTimepickerShowcaseComponent, }, - { - path: 'date-timepicker-dynamic-inputs-showcase.component', - component: DateTimepickerDynamicInputsShowcaseComponent, - }, - { - path: 'datepicker-dynamic-inputs-showcase.component', - component: DatepickerDynamicInputsShowcaseComponent, - }, - { - path: 'rangepicker-dynamic-inputs-showcase.component', - component: RangepickerDynamicInputsShowcaseComponent, - }, { path: 'date-timepicker-single-column.component', component: DateTimepickerSingleColumnComponent, diff --git a/src/playground/with-layout/datepicker/datepicker.module.ts b/src/playground/with-layout/datepicker/datepicker.module.ts index 4c251b63f0..d953f3bef3 100644 --- a/src/playground/with-layout/datepicker/datepicker.module.ts +++ b/src/playground/with-layout/datepicker/datepicker.module.ts @@ -15,19 +15,12 @@ import { RangepickerShowcaseComponent } from './rangepicker-showcase.component'; import { DateTimepickerShowcaseComponent } from './date-timepicker-showcase.component'; import { DateTimepickerSingleColumnComponent } from './date-timepicker-single-column.component'; import { DatepickerFilterComponent } from './datepicker-filter.component'; -import { DateTimepickerDynamicInputsShowcaseComponent } from './date-timepicker-dynamic-inputs-showcase.component'; -import { NbDateFnsDateModule } from '@nebular/date-fns'; -import { DatepickerDynamicInputsShowcaseComponent } from './datepicker-dynamic-inputs-showcase.component'; -import { RangepickerDynamicInputsShowcaseComponent } from './rangepicker-dynamic-inputs-showcase.component'; @NgModule({ declarations: [ DatepickerFormsComponent, DatepickerShowcaseComponent, DateTimepickerShowcaseComponent, - DateTimepickerDynamicInputsShowcaseComponent, - DatepickerDynamicInputsShowcaseComponent, - RangepickerDynamicInputsShowcaseComponent, DateTimepickerSingleColumnComponent, DatepickerValidationComponent, RangepickerShowcaseComponent, @@ -42,7 +35,6 @@ import { RangepickerDynamicInputsShowcaseComponent } from './rangepicker-dynamic DatepickerRoutingModule, NbCardModule, NbButtonModule, - NbDateFnsDateModule.forRoot({}), ], }) export class DatepickerModule {} diff --git a/src/playground/with-layout/with-layout-routing.module.ts b/src/playground/with-layout/with-layout-routing.module.ts index c045805c2c..5bd8471e27 100644 --- a/src/playground/with-layout/with-layout-routing.module.ts +++ b/src/playground/with-layout/with-layout-routing.module.ts @@ -5,7 +5,7 @@ */ import { NgModule } from '@angular/core'; -import { RouterModule, Route} from '@angular/router'; +import { RouterModule, Route } from '@angular/router'; import { PlaygroundLayoutComponent } from './playground-layout.component'; const routes: Route[] = [ @@ -15,171 +15,176 @@ const routes: Route[] = [ children: [ { path: 'accordion', - loadChildren: () => import('./accordion/accordion.module').then(m => m.AccordionModule), + loadChildren: () => import('./accordion/accordion.module').then((m) => m.AccordionModule), }, { path: 'action', - loadChildren: () => import('./action/action.module').then(m => m.ActionModule), + loadChildren: () => import('./action/action.module').then((m) => m.ActionModule), }, { path: 'alert', - loadChildren: () => import('./alert/alert.module').then(m => m.AlertModule), + loadChildren: () => import('./alert/alert.module').then((m) => m.AlertModule), }, { path: 'autocomplete', - loadChildren: () => import('./autocomplete/autocomplete.module').then(m => m.AutocompleteModule), + loadChildren: () => import('./autocomplete/autocomplete.module').then((m) => m.AutocompleteModule), }, { path: 'badge', - loadChildren: () => import('./badge/badge.module').then(m => m.BadgeModule), + loadChildren: () => import('./badge/badge.module').then((m) => m.BadgeModule), }, { path: 'button', - loadChildren: () => import('./button/button.module').then(m => m.ButtonModule), + loadChildren: () => import('./button/button.module').then((m) => m.ButtonModule), }, { path: 'button-group', - loadChildren: () => import('./button-group/button-group.module').then(m => m.ButtonGroupModule), + loadChildren: () => import('./button-group/button-group.module').then((m) => m.ButtonGroupModule), }, { path: 'calendar', - loadChildren: () => import('./calendar/calendar.module').then(m => m.CalendarModule), + loadChildren: () => import('./calendar/calendar.module').then((m) => m.CalendarModule), }, { path: 'calendar-kit', - loadChildren: () => import('./calendar-kit/calendar-kit.module').then(m => m.CalendarKitModule), + loadChildren: () => import('./calendar-kit/calendar-kit.module').then((m) => m.CalendarKitModule), }, { path: 'card', - loadChildren: () => import('./card/card.module').then(m => m.CardModule), + loadChildren: () => import('./card/card.module').then((m) => m.CardModule), }, { path: 'chat', - loadChildren: () => import('./chat/chat.module').then(m => m.ChatModule), + loadChildren: () => import('./chat/chat.module').then((m) => m.ChatModule), }, { path: 'checkbox', - loadChildren: () => import('./checkbox/checkbox.module').then(m => m.CheckboxModule), + loadChildren: () => import('./checkbox/checkbox.module').then((m) => m.CheckboxModule), }, { path: 'datepicker', - loadChildren: () => import('./datepicker/datepicker.module').then(m => m.DatepickerModule), + loadChildren: () => import('./datepicker/datepicker.module').then((m) => m.DatepickerModule), + }, + { + path: 'datepicker-with-format', + loadChildren: () => + import('./datepicker-with-format/datepicker-with-format.module').then((m) => m.DatepickerWithFormatModule), }, { path: 'timepicker', - loadChildren: () => import('./timepicker/timepicker.module').then(m => m.TimepickerModule), + loadChildren: () => import('./timepicker/timepicker.module').then((m) => m.TimepickerModule), }, { path: 'dialog', - loadChildren: () => import('./dialog/dialog.module').then(m => m.DialogModule), + loadChildren: () => import('./dialog/dialog.module').then((m) => m.DialogModule), }, { path: 'flip-card', - loadChildren: () => import('./flip-card/flip-card.module').then(m => m.FlipCardModule), + loadChildren: () => import('./flip-card/flip-card.module').then((m) => m.FlipCardModule), }, { path: 'infinite-list', - loadChildren: () => import('./infinite-list/infinite-list.module').then(m => m.InfiniteListModule), + loadChildren: () => import('./infinite-list/infinite-list.module').then((m) => m.InfiniteListModule), }, { path: 'input', - loadChildren: () => import('./input/input.module').then(m => m.InputModule), + loadChildren: () => import('./input/input.module').then((m) => m.InputModule), }, { path: 'list', - loadChildren: () => import('./list/list.module').then(m => m.ListModule), + loadChildren: () => import('./list/list.module').then((m) => m.ListModule), }, { path: 'menu', - loadChildren: () => import('./menu/menu.module').then(m => m.MenuModule), + loadChildren: () => import('./menu/menu.module').then((m) => m.MenuModule), }, { path: 'overlay', - loadChildren: () => import('./overlay/overlay.module').then(m => m.OverlayModule), + loadChildren: () => import('./overlay/overlay.module').then((m) => m.OverlayModule), }, { path: 'popover', - loadChildren: () => import('./popover/popover.module').then(m => m.PopoverModule), + loadChildren: () => import('./popover/popover.module').then((m) => m.PopoverModule), }, { path: 'progress-bar', - loadChildren: () => import('./progress-bar/progress-bar.module').then(m => m.ProgressBarModule), + loadChildren: () => import('./progress-bar/progress-bar.module').then((m) => m.ProgressBarModule), }, { path: 'radio', - loadChildren: () => import('./radio/radio.module').then(m => m.RadioModule), + loadChildren: () => import('./radio/radio.module').then((m) => m.RadioModule), }, { path: 'reveal-card', - loadChildren: () => import('./reveal-card/reveal-card.module').then(m => m.RevealCardModule), + loadChildren: () => import('./reveal-card/reveal-card.module').then((m) => m.RevealCardModule), }, { path: 'select', - loadChildren: () => import('./select/select.module').then(m => m.SelectModule), + loadChildren: () => import('./select/select.module').then((m) => m.SelectModule), }, { path: 'spinner', - loadChildren: () => import('./spinner/spinner.module').then(m => m.SpinnerModule), + loadChildren: () => import('./spinner/spinner.module').then((m) => m.SpinnerModule), }, { path: 'stepper', - loadChildren: () => import('./stepper/stepper.module').then(m => m.StepperModule), + loadChildren: () => import('./stepper/stepper.module').then((m) => m.StepperModule), }, { path: 'tag', - loadChildren: () => import('./tag/tag.module').then(m => m.TagModule), + loadChildren: () => import('./tag/tag.module').then((m) => m.TagModule), }, { path: 'tabset', - loadChildren: () => import('./tabset/tabset.module').then(m => m.TabsetModule), + loadChildren: () => import('./tabset/tabset.module').then((m) => m.TabsetModule), }, { path: 'toastr', - loadChildren: () => import('./toastr/toastr.module').then(m => m.ToastrModule), + loadChildren: () => import('./toastr/toastr.module').then((m) => m.ToastrModule), }, { path: 'tooltip', - loadChildren: () => import('./tooltip/tooltip.module').then(m => m.TooltipModule), + loadChildren: () => import('./tooltip/tooltip.module').then((m) => m.TooltipModule), }, { path: 'user', - loadChildren: () => import('./user/user.module').then(m => m.UserModule), + loadChildren: () => import('./user/user.module').then((m) => m.UserModule), }, { path: 'window', - loadChildren: () => import('./window/window.module').then(m => m.WindowModule), + loadChildren: () => import('./window/window.module').then((m) => m.WindowModule), }, { path: 'oauth2', - loadChildren: () => import('./oauth2/oauth2.module').then(m => m.OAuth2PlaygroundModule), + loadChildren: () => import('./oauth2/oauth2.module').then((m) => m.OAuth2PlaygroundModule), }, { path: 'oauth2-password', - loadChildren: () => import('./oauth2-password/oauth2-password.module') - .then(m => m.OAuth2PasswordPlaygroundModule), + loadChildren: () => + import('./oauth2-password/oauth2-password.module').then((m) => m.OAuth2PasswordPlaygroundModule), }, { path: 'tree-grid', - loadChildren: () => import('./tree-grid/tree-grid.module').then(m => m.TreeGridModule), + loadChildren: () => import('./tree-grid/tree-grid.module').then((m) => m.TreeGridModule), }, { path: 'icon', - loadChildren: () => import('./icon/icon.module').then(m => m.IconModule), + loadChildren: () => import('./icon/icon.module').then((m) => m.IconModule), }, { path: 'toggle', - loadChildren: () => import('./toggle/toggle.module').then(m => m.ToggleModule), + loadChildren: () => import('./toggle/toggle.module').then((m) => m.ToggleModule), }, { path: 'form-field', - loadChildren: () => import('./form-field/form-field.module').then(m => m.FormFieldModule), + loadChildren: () => import('./form-field/form-field.module').then((m) => m.FormFieldModule), }, ], }, ]; @NgModule({ - imports: [ RouterModule.forChild(routes) ], - exports: [ RouterModule ], + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], }) export class WithLayoutRoutingModule {} From 7af5a8d2f85c6f557d161eda536ab22dcb45114e Mon Sep 17 00:00:00 2001 From: Sasha Verbilo Date: Wed, 26 Oct 2022 12:35:20 +0400 Subject: [PATCH 02/18] feat(timepicker): add disabled state (#3127) Co-authored-by: Dmitry Nehaychik <4dmitr@gmail.com> --- .../theme/components/timepicker/timepicker.directive.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/framework/theme/components/timepicker/timepicker.directive.ts b/src/framework/theme/components/timepicker/timepicker.directive.ts index 5a292b3902..b101f6101c 100644 --- a/src/framework/theme/components/timepicker/timepicker.directive.ts +++ b/src/framework/theme/components/timepicker/timepicker.directive.ts @@ -465,6 +465,10 @@ export class NbTimePickerDirective implements AfterViewInit, ControlValueAcce this.onTouched = fn; } + setDisabledState(isDisabled: boolean): void { + this.input.disabled = isDisabled; + } + protected parseNativeDateString(value: string): string { const date = this.dateService.today(); const year = this.dateService.getYear(date); From 7ce24c03174cfc280eeb1d22a473e554fe4b5957 Mon Sep 17 00:00:00 2001 From: Artem Zaiko <102226752+azaiko-akveo@users.noreply.github.com> Date: Tue, 15 Nov 2022 17:44:05 +0300 Subject: [PATCH 03/18] feat(menu component): improve accessibility (#3136) * feat(menu component): improve accessibility * fix(menu component): refactor property name --- .../components/menu/menu-item.component.html | 114 ++++++++++-------- .../theme/components/menu/menu.component.scss | 1 + .../theme/components/menu/menu.service.ts | 50 ++++---- .../menu/menu-autocollapse.component.ts | 7 +- 4 files changed, 97 insertions(+), 75 deletions(-) diff --git a/src/framework/theme/components/menu/menu-item.component.html b/src/framework/theme/components/menu/menu-item.component.html index c8d94a9619..d31dc37f71 100644 --- a/src/framework/theme/components/menu/menu-item.component.html +++ b/src/framework/theme/components/menu/menu-item.component.html @@ -2,75 +2,91 @@ {{ menuItem.title }} - + {{ menuItem.title }} - + {{ menuItem.title }} - + {{ menuItem.title }} - + {{ menuItem.title }} -