diff --git a/packages/stark-ui/src/modules/slider/components/slider.component.html b/packages/stark-ui/src/modules/slider/components/slider.component.html index 9e7017dacb..8bfbed8edc 100644 --- a/packages/stark-ui/src/modules/slider/components/slider.component.html +++ b/packages/stark-ui/src/modules/slider/components/slider.component.html @@ -1,3 +1,4 @@
-
+
+
diff --git a/showcase/src/app/app.component.html b/showcase/src/app/app.component.html index 3e20a77e0b..6d15e28198 100644 --- a/showcase/src/app/app.component.html +++ b/showcase/src/app/app.component.html @@ -98,6 +98,9 @@

STARK

Pretty Print + + Slider + Table diff --git a/showcase/src/app/app.module.ts b/showcase/src/app/app.module.ts index 1055583fd5..3d49eff59b 100644 --- a/showcase/src/app/app.module.ts +++ b/showcase/src/app/app.module.ts @@ -12,6 +12,7 @@ import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; import { MatIconRegistry } from "@angular/material"; import { MatButtonModule } from "@angular/material/button"; import { MatCardModule } from "@angular/material/card"; +import { MatCheckboxModule } from "@angular/material/checkbox"; import { MatIconModule } from "@angular/material/icon"; import { MatListModule } from "@angular/material/list"; import { MatSidenavModule } from "@angular/material/sidenav"; @@ -146,6 +147,7 @@ export const metaReducers: MetaReducer[] = ENV !== "production" ? [logger FormsModule, MatButtonModule, MatCardModule, + MatCheckboxModule, MatIconModule, MatListModule, MatSidenavModule, diff --git a/showcase/src/app/app.routes.ts b/showcase/src/app/app.routes.ts index 97738b2501..43049fc49b 100644 --- a/showcase/src/app/app.routes.ts +++ b/showcase/src/app/app.routes.ts @@ -1,16 +1,17 @@ import { ActionBarComponent, - DemoBreadcrumbComponent, ButtonComponent, DatePickerComponent, DateRangePickerComponent, + DemoBreadcrumbComponent, DropdownComponent, ExampleViewerComponent, HeaderComponent, KeyboardDirectivesComponent, + LogoutComponent, PrettyPrintComponent, - TableComponent, - LogoutComponent + SliderComponent, + TableComponent } from "./demo"; import { HomeComponent } from "./home"; import { NoContentComponent } from "./no-content"; @@ -30,6 +31,7 @@ export const APP_STATES: Ng2StateDeclaration[] = [ { name: "demo-keyboard-directives", url: "/demo/keyboard-directives", component: KeyboardDirectivesComponent }, { name: "demo-logout", url: "/demo/logout", component: LogoutComponent }, { name: "demo-pretty-print", url: "/demo/pretty-print", component: PrettyPrintComponent }, + { name: "demo-slider", url: "/demo/slider", component: SliderComponent }, { name: "demo-table", url: "/demo/table", component: TableComponent }, { name: "demo-dropdown", url: "/demo/dropdown", component: DropdownComponent }, { name: "otherwise", url: "/otherwise", component: NoContentComponent } diff --git a/showcase/src/app/demo/demo.module.ts b/showcase/src/app/demo/demo.module.ts index 527e4465db..387b1b30e0 100644 --- a/showcase/src/app/demo/demo.module.ts +++ b/showcase/src/app/demo/demo.module.ts @@ -19,26 +19,27 @@ import { ButtonComponent } from "./button/button.component"; import { DatePickerComponent } from "./date-picker/date-picker.component"; import { DateRangePickerComponent } from "./date-range-picker/date-range-picker.component"; import { DropdownComponent } from "./dropdown/dropdown.component"; -import { LogoutComponent } from "./logout/logout.component"; import { ExampleViewerComponent } from "./example-viewer/example-viewer.component"; import { HeaderComponent } from "./header/header.component"; import { KeyboardDirectivesComponent } from "./keyboard-directives/keyboard-directives.component"; +import { LogoutComponent } from "./logout/logout.component"; import { PrettyPrintComponent } from "./pretty-print/pretty-print.component"; +import { SliderComponent } from "./slider/slider.component"; import { TableComponent } from "./table/table.component"; import { SharedModule } from "../shared/shared.module"; import { + STARK_DATE_FORMATS, StarkActionBarModule, + StarkAppLogoutModule, StarkBreadcrumbModule, - STARK_DATE_FORMATS, StarkDatePickerModule, StarkDateRangePickerModule, StarkDropdownModule, StarkKeyboardDirectivesModule, StarkPrettyPrintModule, StarkSliderModule, - StarkTableModule, StarkSvgViewBoxModule, - StarkAppLogoutModule + StarkTableModule } from "@nationalbankbelgium/stark-ui"; import { MAT_DATE_FORMATS } from "@angular/material/core"; @@ -73,16 +74,15 @@ import { MAT_DATE_FORMATS } from "@angular/material/core"; ActionBarComponent, DemoBreadcrumbComponent, ButtonComponent, + DatePickerComponent, + DateRangePickerComponent, DropdownComponent, - LogoutComponent, ExampleViewerComponent, HeaderComponent, KeyboardDirectivesComponent, + LogoutComponent, PrettyPrintComponent, - DatePickerComponent, - DateRangePickerComponent, - ExampleViewerComponent, - KeyboardDirectivesComponent, + SliderComponent, TableComponent ], exports: [ @@ -92,11 +92,12 @@ import { MAT_DATE_FORMATS } from "@angular/material/core"; DatePickerComponent, DateRangePickerComponent, DropdownComponent, - LogoutComponent, ExampleViewerComponent, HeaderComponent, KeyboardDirectivesComponent, + LogoutComponent, PrettyPrintComponent, + SliderComponent, TableComponent ], providers: [{ provide: MAT_DATE_FORMATS, useValue: STARK_DATE_FORMATS }] diff --git a/showcase/src/app/demo/index.ts b/showcase/src/app/demo/index.ts index 65826b8955..4679168b0e 100644 --- a/showcase/src/app/demo/index.ts +++ b/showcase/src/app/demo/index.ts @@ -8,6 +8,7 @@ export * from "./example-viewer"; export * from "./header"; export * from "./keyboard-directives"; export * from "./pretty-print"; +export * from "./slider"; export * from "./table"; export * from "./demo.module"; export * from "./logout"; diff --git a/showcase/src/app/demo/slider/index.ts b/showcase/src/app/demo/slider/index.ts new file mode 100644 index 0000000000..fb8752a4ea --- /dev/null +++ b/showcase/src/app/demo/slider/index.ts @@ -0,0 +1 @@ +export * from "./slider.component"; diff --git a/showcase/src/app/demo/slider/slider.component.html b/showcase/src/app/demo/slider/slider.component.html new file mode 100644 index 0000000000..c20e3e6a57 --- /dev/null +++ b/showcase/src/app/demo/slider/slider.component.html @@ -0,0 +1,133 @@ + +
+ + +
+ + {{ 'SHOWCASE.COMMON.ENABLED' | translate }} + + + + +
+
+ + + +
+ + +
+ + {{ 'SHOWCASE.COMMON.ENABLED' | translate }} + + + + + + + +
+
+ + + +
+ + +
+ + {{ 'SHOWCASE.COMMON.ENABLED' | translate }} + + + + +
+
+ + + +
+ + +
+ + {{ 'SHOWCASE.COMMON.ENABLED' | translate }} + + + + + + + +
+
+ diff --git a/showcase/src/app/demo/slider/slider.component.scss b/showcase/src/app/demo/slider/slider.component.scss new file mode 100644 index 0000000000..cf91c8d003 --- /dev/null +++ b/showcase/src/app/demo/slider/slider.component.scss @@ -0,0 +1,8 @@ +.slider-enabled-field { + margin-right: 16px; +} + +.slider-value-field { + margin-top: 8px; + margin-right: 16px; +} diff --git a/showcase/src/app/demo/slider/slider.component.ts b/showcase/src/app/demo/slider/slider.component.ts new file mode 100644 index 0000000000..e357939b33 --- /dev/null +++ b/showcase/src/app/demo/slider/slider.component.ts @@ -0,0 +1,199 @@ +import { Component, Inject, OnInit } from "@angular/core"; +import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core"; +import { StarkSliderConfig } from "@nationalbankbelgium/stark-ui"; + +export enum SLIDER_HANDLES { + lower = 0, + upper = 1 +} + +@Component({ + selector: "showcase-demo-slider", + templateUrl: "./slider.component.html", + styleUrls: ["./slider.component.scss"] +}) +export class SliderComponent implements OnInit { + public SLIDER_HANDLES: typeof SLIDER_HANDLES = SLIDER_HANDLES; + + public constructor(@Inject(STARK_LOGGING_SERVICE) public loggingService: StarkLoggingService) {} + + /*** + * Simple Horizontal Slider + */ + public isSimpleHorizontalSliderEnabled: boolean; + public valueForSimpleHorizontalSlider: number = 100; + public simpleHorizontalSliderValues: number[] = [100]; + public simpleHorizontalSliderConfig: StarkSliderConfig = { + connect: [true, false], + tooltips: [true], + step: 10, + range: { + min: 0, + max: 1000 + }, + pips: { + mode: "values", + values: [0, 250, 500, 750, 1000], + density: 6 + } + }; + + /*** + * Horizontal Range Slider + */ + public isHorizontalRangeSliderEnabled: boolean; + public lowerValueForHorizontalRangeSlider: number = 100; + public upperValueForHorizontalRangeSlider: number = 900; + public horizontalRangeSliderValues: number[] = [100, 900]; + public horizontalRangeSliderConfig: StarkSliderConfig = { + connect: [false, true, false], + tooltips: [true, true], + step: 10, + range: { + min: 0, + max: 1000 + }, + pips: { + mode: "values", + values: [0, 250, 500, 750, 1000], + density: 6 + } + }; + + /*** + * Simple Vertical Slider + */ + public isSimpleVerticalSliderEnabled: boolean; + public valueForSimpleVerticalSlider: number = 100; + public simpleVerticalSliderValues: number[] = [100]; + public simpleVerticalSliderConfig: StarkSliderConfig = { + connect: [true, false], + orientation: "vertical", + tooltips: [true], + step: 10, + range: { + min: 0, + max: 1000 + }, + pips: { + mode: "values", + values: [0, 250, 500, 750, 1000], + density: 6 + } + }; + + /*** + * Vertical Range Slider + */ + public isVerticalRangeSliderEnabled: boolean; + public lowerValueForVerticalRangeSlider: number = 100; + public upperValueForVerticalRangeSlider: number = 900; + public verticalRangeSliderValues: number[] = [100, 900]; + public verticalRangeSliderConfig: StarkSliderConfig = { + connect: [false, true, false], + orientation: "vertical", + tooltips: [true, true], + step: 10, + range: { + min: 0, + max: 1000 + }, + pips: { + mode: "values", + values: [0, 250, 500, 750, 1000], + density: 6 + } + }; + + public ngOnInit(): void { + this.loggingService.debug("Hello from the `Slider` component"); + this.isSimpleHorizontalSliderEnabled = true; + this.isHorizontalRangeSliderEnabled = true; + this.isSimpleVerticalSliderEnabled = true; + this.isVerticalRangeSliderEnabled = true; + } + + /*** + * Simple Horizontal Slider + */ + public toggleSimpleHorizontalSliderEnable(): void { + this.isSimpleHorizontalSliderEnabled = !this.isSimpleHorizontalSliderEnabled; + } + + public onChangeSimpleHorizontalSlider(values: number[]): void { + this.valueForSimpleHorizontalSlider = values[0]; + } + + public onChangeValueForSimpleHorizontalSlider(event: any): void { + this.simpleHorizontalSliderValues = [parseInt(event.target.value, 10)]; + } + + /*** + * Horizontal Range Slider + */ + public toggleHorizontalRangeSliderEnable(): void { + this.isHorizontalRangeSliderEnabled = !this.isHorizontalRangeSliderEnabled; + } + + public onChangeHorizontalRangeSlider(values: number[]): void { + this.lowerValueForHorizontalRangeSlider = values[0]; + this.upperValueForHorizontalRangeSlider = values[1]; + } + + public onChangeValueForHorizontalRangeSlider(event: any, sliderHandle: SLIDER_HANDLES): void { + switch (sliderHandle) { + case SLIDER_HANDLES.lower: + this.horizontalRangeSliderValues = [parseInt(event.target.value, 10), this.horizontalRangeSliderValues[1]]; + break; + + case SLIDER_HANDLES.upper: + this.horizontalRangeSliderValues = [this.horizontalRangeSliderValues[0], parseInt(event.target.value, 10)]; + break; + + default: + break; + } + } + + /*** + * Simple Vertical Slider + */ + public toggleSimpleVerticalSliderEnable(): void { + this.isSimpleVerticalSliderEnabled = !this.isSimpleVerticalSliderEnabled; + } + + public onChangeSimpleVerticalSlider(values: number[]): void { + this.valueForSimpleVerticalSlider = values[0]; + } + + public onChangeValueForSimpleVerticalSlider(event: any): void { + this.simpleVerticalSliderValues = [parseInt(event.target.value, 10)]; + } + + /*** + * Vertical Range Slider + */ + public toggleVerticalRangeSliderEnable(): void { + this.isVerticalRangeSliderEnabled = !this.isVerticalRangeSliderEnabled; + } + + public onChangeVerticalRangeSlider(values: number[]): void { + this.lowerValueForVerticalRangeSlider = values[0]; + this.upperValueForVerticalRangeSlider = values[1]; + } + + public onChangeValueForVerticalRangeSlider(event: any, sliderHandle: SLIDER_HANDLES): void { + switch (sliderHandle) { + case SLIDER_HANDLES.lower: + this.verticalRangeSliderValues = [parseInt(event.target.value, 10), this.verticalRangeSliderValues[1]]; + break; + + case SLIDER_HANDLES.upper: + this.verticalRangeSliderValues = [this.verticalRangeSliderValues[0], parseInt(event.target.value, 10)]; + break; + + default: + break; + } + } +} diff --git a/showcase/src/assets/examples/slider/horizontal-range-slider.html b/showcase/src/assets/examples/slider/horizontal-range-slider.html new file mode 100644 index 0000000000..87eada6b78 --- /dev/null +++ b/showcase/src/assets/examples/slider/horizontal-range-slider.html @@ -0,0 +1,31 @@ +
+ + +
+ + Enabled + + + + + + + +
+
diff --git a/showcase/src/assets/examples/slider/horizontal-range-slider.scss b/showcase/src/assets/examples/slider/horizontal-range-slider.scss new file mode 100644 index 0000000000..cf91c8d003 --- /dev/null +++ b/showcase/src/assets/examples/slider/horizontal-range-slider.scss @@ -0,0 +1,8 @@ +.slider-enabled-field { + margin-right: 16px; +} + +.slider-value-field { + margin-top: 8px; + margin-right: 16px; +} diff --git a/showcase/src/assets/examples/slider/horizontal-range-slider.ts b/showcase/src/assets/examples/slider/horizontal-range-slider.ts new file mode 100644 index 0000000000..a9632f30fa --- /dev/null +++ b/showcase/src/assets/examples/slider/horizontal-range-slider.ts @@ -0,0 +1,59 @@ +import { Component } from "@angular/core"; +import { StarkSliderConfig } from "@nationalbankbelgium/stark-ui"; + +export enum SLIDER_HANDLES { + lower = 0, + upper = 1 +} + +@Component({ + selector: "slider-demo", + templateUrl: "./slider.component.html", + styleUrls: ["./slider.component.scss"] +}) +export class SliderComponent { + public SLIDER_HANDLES: typeof SLIDER_HANDLES = SLIDER_HANDLES; + + public isSliderEnabled: boolean; + public lowerValueForSlider: number = 100; + public upperValueForSlider: number = 900; + public sliderValues: number[] = [100, 900]; + public sliderConfig: StarkSliderConfig = { + connect: [false, true, false], + tooltips: [true, true], + step: 10, + range: { + min: 0, + max: 1000 + }, + pips: { + mode: "values", + values: [0, 250, 500, 750, 1000], + density: 6 + } + }; + + public toggleSliderEnable(): void { + this.isSliderEnabled = !this.isSliderEnabled; + } + + public onChangeSlider(values: number[]): void { + this.lowerValueForSlider = values[0]; + this.upperValueForSlider = values[1]; + } + + public onChangeValueForSlider(event: any, sliderHandle: SLIDER_HANDLES): void { + switch (sliderHandle) { + case SLIDER_HANDLES.lower: + this.sliderValues = [parseInt(event.target.value, 10), this.sliderValues[1]]; + break; + + case SLIDER_HANDLES.upper: + this.sliderValues = [this.sliderValues[0], parseInt(event.target.value, 10)]; + break; + + default: + break; + } + } +} diff --git a/showcase/src/assets/examples/slider/simple-horizontal-slider.html b/showcase/src/assets/examples/slider/simple-horizontal-slider.html new file mode 100644 index 0000000000..7e92f41194 --- /dev/null +++ b/showcase/src/assets/examples/slider/simple-horizontal-slider.html @@ -0,0 +1,23 @@ +
+ + +
+ + Enabled + + + + +
+
diff --git a/showcase/src/assets/examples/slider/simple-horizontal-slider.scss b/showcase/src/assets/examples/slider/simple-horizontal-slider.scss new file mode 100644 index 0000000000..cf91c8d003 --- /dev/null +++ b/showcase/src/assets/examples/slider/simple-horizontal-slider.scss @@ -0,0 +1,8 @@ +.slider-enabled-field { + margin-right: 16px; +} + +.slider-value-field { + margin-top: 8px; + margin-right: 16px; +} diff --git a/showcase/src/assets/examples/slider/simple-horizontal-slider.ts b/showcase/src/assets/examples/slider/simple-horizontal-slider.ts new file mode 100644 index 0000000000..27fb017640 --- /dev/null +++ b/showcase/src/assets/examples/slider/simple-horizontal-slider.ts @@ -0,0 +1,46 @@ +import { Component } from "@angular/core"; +import { StarkSliderConfig } from "@nationalbankbelgium/stark-ui"; + +export enum SLIDER_HANDLES { + lower = 0, + upper = 1 +} + +@Component({ + selector: "slider-demo", + templateUrl: "./slider.component.html", + styleUrls: ["./slider.component.scss"] +}) +export class SliderComponent { + public SLIDER_HANDLES: typeof SLIDER_HANDLES = SLIDER_HANDLES; + + public isSliderEnabled: boolean; + public valueForSlider: number = 100; + public sliderValues: number[] = [100]; + public sliderConfig: StarkSliderConfig = { + connect: [true, false], + tooltips: [true], + step: 10, + range: { + min: 0, + max: 1000 + }, + pips: { + mode: "values", + values: [0, 250, 500, 750, 1000], + density: 6 + } + }; + + public toggleSliderEnable(): void { + this.isSliderEnabled = !this.isSliderEnabled; + } + + public onChangeSlider(values: number[]): void { + this.valueForSlider = values[0]; + } + + public onChangeValueForSlider(event: any): void { + this.sliderValues = [parseInt(event.target.value, 10)]; + } +} diff --git a/showcase/src/assets/examples/slider/simple-vertical-slider.html b/showcase/src/assets/examples/slider/simple-vertical-slider.html new file mode 100644 index 0000000000..7e92f41194 --- /dev/null +++ b/showcase/src/assets/examples/slider/simple-vertical-slider.html @@ -0,0 +1,23 @@ +
+ + +
+ + Enabled + + + + +
+
diff --git a/showcase/src/assets/examples/slider/simple-vertical-slider.scss b/showcase/src/assets/examples/slider/simple-vertical-slider.scss new file mode 100644 index 0000000000..cf91c8d003 --- /dev/null +++ b/showcase/src/assets/examples/slider/simple-vertical-slider.scss @@ -0,0 +1,8 @@ +.slider-enabled-field { + margin-right: 16px; +} + +.slider-value-field { + margin-top: 8px; + margin-right: 16px; +} diff --git a/showcase/src/assets/examples/slider/simple-vertical-slider.ts b/showcase/src/assets/examples/slider/simple-vertical-slider.ts new file mode 100644 index 0000000000..b5178a7191 --- /dev/null +++ b/showcase/src/assets/examples/slider/simple-vertical-slider.ts @@ -0,0 +1,47 @@ +import { Component } from "@angular/core"; +import { StarkSliderConfig } from "@nationalbankbelgium/stark-ui"; + +export enum SLIDER_HANDLES { + lower = 0, + upper = 1 +} + +@Component({ + selector: "slider-demo", + templateUrl: "./slider.component.html", + styleUrls: ["./slider.component.scss"] +}) +export class SliderComponent { + public SLIDER_HANDLES: typeof SLIDER_HANDLES = SLIDER_HANDLES; + + public isSliderEnabled: boolean; + public valueForSlider: number = 100; + public sliderValues: number[] = [100]; + public sliderConfig: StarkSliderConfig = { + connect: [true, false], + orientation: "vertical", + tooltips: [true], + step: 10, + range: { + min: 0, + max: 1000 + }, + pips: { + mode: "values", + values: [0, 250, 500, 750, 1000], + density: 6 + } + }; + + public toggleSliderEnable(): void { + this.isSliderEnabled = !this.isSliderEnabled; + } + + public onChangeSlider(values: number[]): void { + this.valueForSlider = values[0]; + } + + public onChangeValueForSlider(event: any): void { + this.sliderValues = [parseInt(event.target.value, 10)]; + } +} diff --git a/showcase/src/assets/examples/slider/vertical-range-slider.html b/showcase/src/assets/examples/slider/vertical-range-slider.html new file mode 100644 index 0000000000..87eada6b78 --- /dev/null +++ b/showcase/src/assets/examples/slider/vertical-range-slider.html @@ -0,0 +1,31 @@ +
+ + +
+ + Enabled + + + + + + + +
+
diff --git a/showcase/src/assets/examples/slider/vertical-range-slider.scss b/showcase/src/assets/examples/slider/vertical-range-slider.scss new file mode 100644 index 0000000000..cf91c8d003 --- /dev/null +++ b/showcase/src/assets/examples/slider/vertical-range-slider.scss @@ -0,0 +1,8 @@ +.slider-enabled-field { + margin-right: 16px; +} + +.slider-value-field { + margin-top: 8px; + margin-right: 16px; +} diff --git a/showcase/src/assets/examples/slider/vertical-range-slider.ts b/showcase/src/assets/examples/slider/vertical-range-slider.ts new file mode 100644 index 0000000000..fbb7f15100 --- /dev/null +++ b/showcase/src/assets/examples/slider/vertical-range-slider.ts @@ -0,0 +1,60 @@ +import { Component } from "@angular/core"; +import { StarkSliderConfig } from "@nationalbankbelgium/stark-ui"; + +export enum SLIDER_HANDLES { + lower = 0, + upper = 1 +} + +@Component({ + selector: "slider-demo", + templateUrl: "./slider.component.html", + styleUrls: ["./slider.component.scss"] +}) +export class SliderComponent { + public SLIDER_HANDLES: typeof SLIDER_HANDLES = SLIDER_HANDLES; + + public isSliderEnabled: boolean; + public lowerValueForSlider: number = 100; + public upperValueForSlider: number = 900; + public sliderValues: number[] = [100, 900]; + public sliderConfig: StarkSliderConfig = { + connect: [false, true, false], + orientation: "vertical", + tooltips: [true, true], + step: 10, + range: { + min: 0, + max: 1000 + }, + pips: { + mode: "values", + values: [0, 250, 500, 750, 1000], + density: 6 + } + }; + + public toggleSliderEnable(): void { + this.isSliderEnabled = !this.isSliderEnabled; + } + + public onChangeSlider(values: number[]): void { + this.lowerValueForSlider = values[0]; + this.upperValueForSlider = values[1]; + } + + public onChangeValueForSlider(event: any, sliderHandle: SLIDER_HANDLES): void { + switch (sliderHandle) { + case SLIDER_HANDLES.lower: + this.sliderValues = [parseInt(event.target.value, 10), this.sliderValues[1]]; + break; + + case SLIDER_HANDLES.upper: + this.sliderValues = [this.sliderValues[0], parseInt(event.target.value, 10)]; + break; + + default: + break; + } + } +} diff --git a/showcase/src/assets/translations/en.json b/showcase/src/assets/translations/en.json index 6a84be197e..79010e6886 100644 --- a/showcase/src/assets/translations/en.json +++ b/showcase/src/assets/translations/en.json @@ -1,11 +1,23 @@ { "SHOWCASE": { + "COMMON": { + "ENABLED": "Enabled", + "VALUE": "Value" + }, "DEMO": { "ACTION-BAR": { "CLASSIC-FULL": "Action Bar Classic Full", "CLASSIC-COMPACT": "Action Bar Classic Compact", "ALT": "Action Bar Alternative" }, + "BREADCRUMB": { + "CONFIG_INPUT": "Breadcrumb demonstration (with breadcrumbConfig)", + "NO_INPUT": "Breadcrumb demonstration (without parameters)", + "ROOT": "Root ancestor", + "GRANDPARENT": "Grand parent", + "PARENT": "Parent", + "CHILD": "Child" + }, "DATE_PICKER": { "CUSTOM_FILTER": "Date Picker - Custom Filter", "PLACEHOLDER": "Choose a date", @@ -15,6 +27,23 @@ "DATE_RANGE_PICKER": { "FULL": "Date Range Picker" }, + "DROPDOWNS": { + "PR": "IT applications", + "IO": "Informatics infrastructure and operations", + "CS": "IT customer services", + "REQUIRED": "Single required selection", + "BLANK": "Single selection with default blank", + "MULTIPLE": "Multiple selection", + "MULTIPLE_REQUIRED": "Required multiple selection", + "DISABLED": "Disabled dropdown", + "SELECTED_VALUE": "Selected value ", + "SELECTED_VALUES": "Selected values ", + "SELECT_SERVICE": "Select Service", + "SELECT_NUMBER": "Select your lucky number", + "SELECT_SERVICES": "Select one or more services", + "SELECT_ONE_SERVICE": "Select at least one service", + "SELECT_DISABLED": "Sorry, it's disabled" + }, "HEADER": { "TITLE": "Stark App Header Guidelines", "INTRO": "Stark provide you usefull classes to implement your application header. You just need to include the header theme in your SCSS", @@ -46,6 +75,10 @@ "TYPE_A_VALUE": "Type a value" } }, + "LOGOUT": { + "LOGOUT_DEFAULT_ICON": "Logout button - Default icon", + "LOGOUT_CUSTOM_ICON": "Logout button - Custom icon" + }, "PRETTY-PRINT": { "ORIGINAL_CODE": "Original Code", "PRETTY_PRINTED": "Formatted", @@ -59,34 +92,11 @@ "TYPESCRIPT": "Pretty-Print Typescript", "XML": "Pretty-Print XML" }, - "BREADCRUMB": { - "CONFIG_INPUT": "Breadcrumb demonstration (with breadcrumbConfig)", - "NO_INPUT": "Breadcrumb demonstration (without parameters)", - "ROOT": "Root ancestor", - "GRANDPARENT": "Grand parent", - "PARENT": "Parent", - "CHILD": "Child" - }, - "DROPDOWNS": { - "PR": "IT applications", - "IO": "Informatics infrastructure and operations", - "CS": "IT customer services", - "REQUIRED": "Single required selection", - "BLANK": "Single selection with default blank", - "MULTIPLE": "Multiple selection", - "MULTIPLE_REQUIRED": "Required multiple selection", - "DISABLED": "Disabled dropdown", - "SELECTED_VALUE": "Selected value ", - "SELECTED_VALUES": "Selected values ", - "SELECT_SERVICE": "Select Service", - "SELECT_NUMBER": "Select your lucky number", - "SELECT_SERVICES": "Select one or more services", - "SELECT_ONE_SERVICE": "Select at least one service", - "SELECT_DISABLED": "Sorry, it's disabled" - }, - "LOGOUT": { - "LOGOUT_DEFAULT_ICON": "Logout button - Default icon", - "LOGOUT_CUSTOM_ICON": "Logout button - Custom icon" + "SLIDER": { + "HORIZONTAL_RANGE_SLIDER": "Horizontal Range Slider", + "SIMPLE_HORIZONTAL_SLIDER": "Simple Horizontal Slider", + "SIMPLE_VERTICAL_SLIDER": "Simple Vertical Slider", + "VERTICAL_RANGE_SLIDER": "Vertical Range Slider" } }, "STYLEGUIDE": { diff --git a/showcase/src/assets/translations/fr.json b/showcase/src/assets/translations/fr.json index b3264582df..926b53cc25 100644 --- a/showcase/src/assets/translations/fr.json +++ b/showcase/src/assets/translations/fr.json @@ -1,11 +1,23 @@ { "SHOWCASE": { + "COMMON": { + "ENABLED": "Activé", + "VALUE": "Valuer" + }, "DEMO": { "ACTION-BAR": { "CLASSIC-FULL": "Action Bar Classic Full", "CLASSIC-COMPACT": "Action Bar Classic Compact", "ALT": "Action Bar Alternative" }, + "BREADCRUMB": { + "CONFIG_INPUT": "Démonstration du breadcrumb component (avec breadcrumbConfig)", + "NO_INPUT": "Démonstration du breadcrumb component (sans paramètres)", + "ROOT": "Ancêtre racine", + "GRANDPARENT": "Grand-parent", + "PARENT": "Parent", + "CHILD": "Enfant" + }, "DATE_PICKER": { "CUSTOM_FILTER": "Date Picker - Filtre sur mesure", "PLACEHOLDER": "Choisir une date", @@ -15,6 +27,23 @@ "DATE_RANGE_PICKER": { "FULL": "Date Range Picker" }, + "DROPDOWNS": { + "PR": "Applications informatiques", + "IO": "Infrastructure et opérations informatiques", + "CS": "Services aux clients informatiques", + "REQUIRED": "Choix unique obligatoire", + "BLANK": "Option par défaut (blank)", + "MULTIPLE": "Choix multiple", + "MULTIPLE_REQUIRED": "Choix multiple obligatoire", + "DISABLED": "Dropdown désactivé", + "SELECTED_VALUE": "Valeur sélectionnée ", + "SELECTED_VALUES": "Valeurs sélectionnées ", + "SELECT_SERVICE": "Sélectionnez un service", + "SELECT_NUMBER": "Sélectionnez votre chiffre porte-bonheur", + "SELECT_SERVICES": "Sélectionnez un service ou plus", + "SELECT_ONE_SERVICE": "Sélectionnez au moins un service", + "SELECT_DISABLED": "Désolé, ce dropdown est désactivé" + }, "HEADER": { "TITLE": "Stark App Header Guidelines", "INTRO": "Stark fournit des classes utiles pour implémenter le header de votre application. Il suffit d'inclure le theme du header dans votre SCSS", @@ -26,6 +55,10 @@ "STARK_APP_BAR_CONTENT_RIGHT": "stark-app-bar-content-right contient 3 conteneurs, le premier pour le App Data component et le boutton de déconnection, le second pour le choix de langue et stark-app-bar-content-right-actions-alt qui contient des actions alternatives.", "STARK_APP_BAR_PAGE_TITLE": "stark-app-bar-page-title affiche le titre de la page visitée." }, + "LOGOUT": { + "LOGOUT_DEFAULT_ICON": "Bouton logout - Icône par défaut", + "LOGOUT_CUSTOM_ICON": "Bouton logout - Icône custom" + }, "KEYBOARD_DIRECTIVES": { "ON_ENTER_KEY": { "TITLE": "On Enter Key Directive", @@ -59,34 +92,11 @@ "TYPESCRIPT": "Pretty-Print Typescript", "XML": "Pretty-Print XML" }, - "BREADCRUMB": { - "CONFIG_INPUT": "Démonstration du breadcrumb component (avec breadcrumbConfig)", - "NO_INPUT": "Démonstration du breadcrumb component (sans paramètres)", - "ROOT": "Ancêtre racine", - "GRANDPARENT": "Grand-parent", - "PARENT": "Parent", - "CHILD": "Enfant" - }, - "DROPDOWNS": { - "PR": "Applications informatiques", - "IO": "Infrastructure et opérations informatiques", - "CS": "Services aux clients informatiques", - "REQUIRED": "Choix unique obligatoire", - "BLANK": "Option par défaut (blank)", - "MULTIPLE": "Choix multiple", - "MULTIPLE_REQUIRED": "Choix multiple obligatoire", - "DISABLED": "Dropdown désactivé", - "SELECTED_VALUE": "Valeur sélectionnée ", - "SELECTED_VALUES": "Valeurs sélectionnées ", - "SELECT_SERVICE": "Sélectionnez un service", - "SELECT_NUMBER": "Sélectionnez votre chiffre porte-bonheur", - "SELECT_SERVICES": "Sélectionnez un service ou plus", - "SELECT_ONE_SERVICE": "Sélectionnez au moins un service", - "SELECT_DISABLED": "Désolé, ce dropdown est désactivé" - }, - "LOGOUT": { - "LOGOUT_DEFAULT_ICON": "Bouton logout - Icône par défaut", - "LOGOUT_CUSTOM_ICON": "Bouton logout - Icône custom" + "SLIDER": { + "HORIZONTAL_RANGE_SLIDER": "Curseur de plage", + "SIMPLE_HORIZONTAL_SLIDER": "Curseur simple", + "SIMPLE_VERTICAL_SLIDER": "Curseur simple", + "VERTICAL_RANGE_SLIDER": "Curseur de plage" } }, "STYLEGUIDE": { diff --git a/showcase/src/assets/translations/nl.json b/showcase/src/assets/translations/nl.json index ceaf497042..1b66c5a9b6 100644 --- a/showcase/src/assets/translations/nl.json +++ b/showcase/src/assets/translations/nl.json @@ -1,11 +1,23 @@ { "SHOWCASE": { + "COMMON": { + "ENABLED": "Ingeschakeld", + "VALUE": "Waarde" + }, "DEMO": { "ACTION-BAR": { "CLASSIC-FULL": "Action Bar Classic Full", "CLASSIC-COMPACT": "Action Bar Classic Compact", "ALT": "Action Bar Alternative" }, + "BREADCRUMB": { + "CONFIG_INPUT": "Breadcrumb demonstration (met breadcrumbConfig)", + "NO_INPUT": "Breadcrumb demonstration (zonder parameters)", + "ROOT": "Voorouder", + "GRANDPARENT": "Grootouder", + "PARENT": "Ouder", + "CHILD": "Kind" + }, "DATE_PICKER": { "CUSTOM_FILTER": "Date Picker - Aangepaste filter", "PLACEHOLDER": "Datum kiezen", @@ -15,6 +27,23 @@ "DATE_RANGE_PICKER": { "FULL": "Date Range Picker" }, + "DROPDOWNS": { + "PR": "Informaticatoepassingen", + "IO": "Informatica-infrastructuur en operaties", + "CS": "IT-klantendiensten", + "REQUIRED": "Dropdown met gewenste keuze", + "BLANK": "Bij verstek keus (blank)", + "MULTIPLE": "Meerdere selectie", + "MULTIPLE_REQUIRED": "Gewenste meerdere selectie", + "DISABLED": "Niet geactiveerd dropdown", + "SELECTED_VALUE": "Geselecteerde waarde ", + "SELECTED_VALUES": "Geselecteerde waarden ", + "SELECT_SERVICE": "Selecteer een dienst", + "SELECT_NUMBER": "Selecteer uw geluksnummer", + "SELECT_SERVICES": "Selecteer een of meer diensten", + "SELECT_ONE_SERVICE": "Selecteer ten minsten een dienst", + "SELECT_DISABLED": "Sorry, ditdés dropdown is niet geactiveerd" + }, "HEADER": { "TITLE": "Stark App Header Guidelines", "INTRO": "Stark provides you usefull classes to implement your application header. You just need to include the header theme in your SCSS", @@ -46,6 +75,10 @@ "TYPE_A_VALUE": "Geef een waarde in" } }, + "LOGOUT": { + "LOGOUT_DEFAULT_ICON": "Logout-knop - Standaard pictogram", + "LOGOUT_CUSTOM_ICON": "Logout-knop - Aangepast pictogram" + }, "PRETTY-PRINT": { "ORIGINAL_CODE": "Originele Code", "PRETTY_PRINTED": "Geformatteerd", @@ -59,34 +92,11 @@ "TYPESCRIPT": "Pretty-Print Typescript", "XML": "Pretty-Print XML" }, - "BREADCRUMB": { - "CONFIG_INPUT": "Breadcrumb demonstration (met breadcrumbConfig)", - "NO_INPUT": "Breadcrumb demonstration (zonder parameters)", - "ROOT": "Voorouder", - "GRANDPARENT": "Grootouder", - "PARENT": "Ouder", - "CHILD": "Kind" - }, - "DROPDOWNS": { - "PR": "Informaticatoepassingen", - "IO": "Informatica-infrastructuur en operaties", - "CS": "IT-klantendiensten", - "REQUIRED": "Dropdown met gewenste keuze", - "BLANK": "Bij verstek keus (blank)", - "MULTIPLE": "Meerdere selectie", - "MULTIPLE_REQUIRED": "Gewenste meerdere selectie", - "DISABLED": "Niet geactiveerd dropdown", - "SELECTED_VALUE": "Geselecteerde waarde ", - "SELECTED_VALUES": "Geselecteerde waarden ", - "SELECT_SERVICE": "Selecteer een dienst", - "SELECT_NUMBER": "Selecteer uw geluksnummer", - "SELECT_SERVICES": "Selecteer een of meer diensten", - "SELECT_ONE_SERVICE": "Selecteer ten minsten een dienst", - "SELECT_DISABLED": "Sorry, ditdés dropdown is niet geactiveerd" - }, - "LOGOUT": { - "LOGOUT_DEFAULT_ICON": "Logout-knop - Standaard pictogram", - "LOGOUT_CUSTOM_ICON": "Logout-knop - Aangepast pictogram" + "SLIDER": { + "HORIZONTAL_RANGE_SLIDER": "Horizontale schuifregelaar met bereik", + "SIMPLE_HORIZONTAL_SLIDER": "Eenvoudige horizontale schuifregelaar", + "SIMPLE_VERTICAL_SLIDER": "Eenvoudige verticale schuifregelaar", + "VERTICAL_RANGE_SLIDER": "Verticale schuifregelaar met bereik" } }, "STYLEGUIDE": {